# Resize handler not working in designer for custom perspective component

**URL:** <https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [June 13, 2025, 12:25am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355 "2025-06-13T00:25:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake.bierman](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jake.bierman](https://forum.inductiveautomation.com/u/jake.bierman)\
**Post date:** [June 13, 2025, 12:25am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355/1 "2025-06-13T00:25:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [June 13, 2025, 2:08am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355/2 "2025-06-13T02:08:21Z")

</div>

> [@jake.bierman](#):
>
> 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.

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

```js
  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.

---

<div class="post-metadata">

**Author:** ![jake.bierman](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jake.bierman](https://forum.inductiveautomation.com/u/jake.bierman)\
**Post date:** [June 13, 2025, 3:37am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355/3 "2025-06-13T03:37:06Z")

</div>

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.

```tsx
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>
      );
  }
}

```

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [June 13, 2025, 3:57am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355/4 "2025-06-13T03:57:21Z")

</div>

> [@jake.bierman](#):
>
> ```typescript
> return (
> <div
> {...emit()}
> ref={this.viewContainerRef}
> className={`${style?.toStyleProps().className ?? ""}`}
> style={{
> ...style?.toStyleProps().style ?? {}
> }}
> >
> {/* ... other components */}
> </div>
> );
> 
> ```

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 😕.

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:

```typescript
      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:

```typescript
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>
      );

```

---

<div class="post-metadata">

**Author:** ![jake.bierman](https://avatars.discourse-cdn.com/v4/letter/j/5daacb/32.png) [@jake.bierman](https://forum.inductiveautomation.com/u/jake.bierman)\
**Post date:** [June 13, 2025, 4:49am UTC](https://forum.inductiveautomation.com/t/resize-handler-not-working-in-designer-for-custom-perspective-component/107355/5 "2025-06-13T04:49:43Z")

</div>

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.