Perspective Custom Container

Hi, I’ve been looking through the SDK documentation and examples, and have been developing perspective modules for some time. We’ve gotten to the point where we’d like to create our own perspective container to handle client-side events like zooming and mouse dragging. How can we create a custom container? The examples and documentation don’t seem to cover this topic.

Thanks,
Dillon

1 Like

Hi
Are you trying to create cluttering and decluttering effect?

As a starting point, we’re trying to create a custom container for pan and zoom controls. Eventually we hope to create a custom container to optimize certain groupings of custom components, while still taking advantage of Ignition Designer’s tools (so not storing the components as a property list).

As far as I can tell from a quick skim of the implementation, containers just are components. The main thing you have to do is, in the designer scope, register a ContainerDesignDelegate (on the TS side) with the InteractionRegistry - then your component is in charge of implementing addNewComponents.

2 Likes

Thanks for the response! So would that ContainerDesignDelegate be registered in the web\packages\designer\typescript\* context? Do we need to implement anything outside of the web folder?

Do I need to mess with the properties in ComponentMeta on the client side? I noticed there is a isContainer.

Any publically available examples?

Thanks again!

I’ll delegate here, since I’m well out of my depth :slight_smile:
@ynejati @PerryAJ

We think it’s great that you’re experimenting with building your own container component. This is arguably one of the most challenging things you can do in an Ignition module. We do not have any publicly available examples at the moment, nor do we have any current plans to release any due to the complexity and time requirements of the task. However, we will gladly try and provide some useful information that may help.

Paul is correct, the main thing you need to do is to register your container component with the InteractionRegistry. The container is merely a component, but a component with a special design implementation as well as rules of interaction and layout.

Typically you will have:

  1. A Designer version of your container component (DesignerCustomContainer)
  2. A design delegate (CustomContainerDesignDelegate extends ContainerDesignDelegate) which implements designer type behaviors and interactions. You will want to set the isContainer member as true.
  3. Your delegate registered with the InteractionRegistry (InteractionRegistry.registerInteractionDelegates)
  4. isContainer = true in ComponentMeta set to true to aid in some Designer selection behavior to say the least.

Hopefully that helps.

-Yousuf

1 Like