Perspective Custom Container

Module Development
1

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
2

Hi
Are you trying to create cluttering and decluttering effect?

3

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

4

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
5

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!

6

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

7

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
8

Hi @dillonu did you ever make progress on this? I’m looking at implementing pan and zoom functionality natively in Perspective and have a working demo EXCEPT for the fact that the event onMouseUp doesn’t fire correctly about 5% of the time and its a bug that makes me want to rip my hair out.

9

We never managed to make our own container, but we created a couple of components that make the parent container pan and zoom. It’s a bit hacky (and probably messes up a few event handlers within Ignition that we don’t use), but works for our use case.
We do sometimes have issues with onMouseUp when swapping applications, which we use onBlur and other window-events to handle.

10

It sounds like there’s a ticket in progress for a pan and zoom container, but I believe it’s been in that state since April '22. I wish this was available right now - I have a project that’s about to close that uses the pan and zoom container that doesn’t work 100% of the time and I wish I could replace it with a native Perspective component.
@ynejati Has there been progress made since the specification and prototyping phase (April 2022)?