See if in preview or design mode in js

Module Development
1

In a custom module for perspective, is there a way to see if you are in preview or design mode?

Its possible to see if we are in the designer or client, but is it also possible to see if we are in preview/design mode inside the designer?

I’d like to turn off some bits of my javascript during design mode. Is that possible?

1 Like
2

It looks like your frontend ComponentDesignDelegate should implement and return designerComponent(), and then we’ll automatically use a different component when you switch to/from design mode:

image
image903×552 54.8 KB

1 Like
3

Thx this is probably what i need, ill check if it works when i got time

4

Finally got the time to look into this.

Where to implement this? the ComponentMeta doesnt seem to be the right place xd
My next guess is web/packages/designer/ … unfortunatly there seems to be no example from this xd

So i came up with something like this…
components.forEach((c: ComponentDesignDelegate) => InteractionRegistry.registerInteractionDelegates(c));
similar to the registry of componentMetas, but this doesnt seem to do anything

5

Hmm, that looks correct:

image
image653×503 32.8 KB

6

Hmm i wonder what im doing wrong then :confused:

the

 ComponentMeta {
  getComponentType(){return TYPE}

matches the

ComponentDesignDelegate {
  type = TYPE;

…
Do they also have to be registered in the java designer/gatewayhook? If so how?

7

Ah, yeah, that might be it. DesignerHook for the Perspective module has getDesignerComponentRegistry(), which is essentially identical to the common ComponentRegistry; maybe try using that too.

1 Like
8

Something else came up so ill have to check later

9

Hmm those seem to be already registering, with the same decriptor as the component tho…

Im able to put a designer delegate there just like the rad tagcounter, so it gotta be registered in java correct too…
but im not getting the designer web component :confused:

10

I am not sure victors original specific reason for identifying scope, but I ended up here trying to figure out how to disable specific event handlers in the design vs preview scopes. I figured I would throw this question here incase someone got here for the same reason.

I had a button with an onClick event of onActionPerformed, and it was firing when clicking the button regardless of being in design or preview mode in the designer.

I managed to fix it through the use of this.props.eventsEnabled, but I'd like to confirm is this the correct way to handle that?

export class Button extends Component<ComponentProps<ButtonProps>, any> {
	onActionPerformed = () => {
		if (!this.props.eventsEnabled) {
			console.log("Button is disabled in the design-scope");
			return;
		}

		this.props.componentEvents.fireComponentEvent("onActionPerformed", {});
	}

	render() {
		const { props: { text, enabled }, emit } = this.props;
		return (
			<button
				onClick={this.onActionPerformed}
				disabled={!enabled}
			>
				{text}
			</button>
		);
	}
}
11

In the designer, all components get a CSS class of designing added to them when in design mode.

I'd use CSS to set pointer-events: none when that class is applied.

2 Likes