Resize handler not working in designer for custom perspective component

Module Development
1

Hi guys, fairly new to Ignition still but I have been playing around a lot with a custom module I have based on the perspective component example on github. I have been combining bits I found on here and github to get as many functional parts I can into a single component that I can then use as reference for later.

Currently I am stuck on 2 small things, the resize handler in the designer, it shows up top left as a single dot, although I can still move and resize via position props, and I get some mouse events through even while the designer is in design mode.

So my question is if there are anything like specific styles or something that could mess up the resize handler or something specific required in the java side? and regarding the mouse events, is there something I should be adding to my component to ignore mouse events while in design mode?

I am also new to react so am assuming its just something small I am missing, as everything else is working great now. Happy to share some code if someone can point me in the right direction.

Thanks in advance for any help.

2

It sounds like you aren't using the provided emitter; the outer layer of your component should look something like this:

  return (
    <div {...props.emit()}>
      <...your component here..>
    </div>
  )

In my experience, you need to put your component inside a div for the resize handles to work correctly.

3

I thought it might be related to that, but have checked to make sure its the same as my other components that are working fine, and the resize handler is working as expected, this is the simplified version of my component that is having the issue, I have used a div for my main element in all components I have done.

export class MyClass extends Component<ComponentProps<MyClassProps>, MyClassState> {
    
    constructor(props: ComponentProps<MyClassProps>) {
        super(props);
        this.state = {
            ... state vars
        };
    }
    render() {
      const {
          props: { 
              ... other props
              style 
          },
          emit
      } = this.props;
  
      return (
          <div
              {...emit()}
              ref={this.viewContainerRef}
              className={`${style?.toStyleProps().className ?? ""}`}
              style={{
                  ...style?.toStyleProps().style ?? {}
              }}
          >
              {/* ... other components */}
          </div>
      );
  }
}
4

When you call {...emit()}, you are spread applying className and style properties to the div. Then, you are immediately overwriting those emitted properties with your own className and style definitions :confused:.

The emit function is basically an automatic way of applying the designer configured style properties - you don't need to apply the className and style properties yourself. I think removing them will accomplish what you want:

      return (
          <div
              {...emit()}
              ref={this.viewContainerRef}
          >
              {/* ... other components */}
          </div>
      );

If you do want to add your own styles/classes to the emitted values, the emit function takes an optional first parameter allows you to append them:

export interface EmitProps {
    style?: React.CSSProperties;
    classes?: Array<string>;
}
export interface Emitter {
    (emitProps?: EmitProps, layoutStyleOnly?: boolean, disableEvents?: boolean, noLayoutStyle?: boolean): any;
}

// Example
      return (
          <div
              {...emit({ classes: ['extra-class-name'], style: { background: 'red'} })}
              ref={this.viewContainerRef}
          >
              {/* ... other components */}
          </div>
      );
5

Thanks I will have a look a that as I have only just gotten the style prop to merge properly, well I did this on other child elements and haven't seen an issue yet, unless that is part of the root cause, as I have a few child elements that does this but since they are working as expected I haven't look there.

I have removed the style and classname completely for now, but it's still the same.

I will do a test and remove everything and add bits back slowly to see where its breaking the handler, just thought I'd ask and see if i can get some pointers. I have done a lot of trial and error getting to this point and has been my main way of getting into this and learning how all bits in the module works together haha.

Thanks again for the style info above, will make sure to get that implemented.