sequential-workflow-designer 0.35.3 → 0.37.0

package/lib/cjs/index.cjs

@@ -152,7 +152,7 @@ class SimpleEvent {
     count() {
         return this.listeners.length;
     }
-    first() {
+    once() {
         return new Promise(resolve => {
             const handler = (value) => {
                 this.unsubscribe(handler);
@@ -1334,7 +1334,7 @@ class DefaultSequenceComponent {
 exports.ClickCommandType = void 0;
 (function (ClickCommandType) {
     ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
-    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
+    ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
     ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
     ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
 })(exports.ClickCommandType || (exports.ClickCommandType = {}));
@@ -2551,7 +2551,12 @@ class StepComponentViewContextFactory {
             createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
             createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
             getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
-            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
+            createPreferenceChange: (key, value) => {
+                return {
+                    key: preferenceKeyPrefix + key,
+                    value
+                };
+            }
         };
     }
 }
@@ -2864,11 +2869,19 @@ class StepDuplicator {
     }
     duplicate(step) {
         const newStep = ObjectCloner.deepClone(step);
-        newStep.id = this.uidGenerator();
+        const duplicatedIds = [];
+        const newId = this.uidGenerator();
+        duplicatedIds.push([step.id, newId]);
+        newStep.id = newId;
         this.definitionWalker.forEachChildren(newStep, s => {
-            s.id = this.uidGenerator();
+            const newId = this.uidGenerator();
+            duplicatedIds.push([s.id, newId]);
+            s.id = newId;
         });
-        return newStep;
+        return {
+            step: newStep,
+            duplicatedIds
+        };
     }
 }
 
@@ -2989,13 +3002,13 @@ class StateModifier {
         this.updateDependencies();
         return true;
     }
-    tryInsert(step, targetSequence, targetIndex) {
+    tryInsert(step, targetSequence, targetIndex, details) {
         const canInsertStep = this.configuration.canInsertStep ? this.configuration.canInsertStep(step, targetSequence, targetIndex) : true;
         if (!canInsertStep) {
             return false;
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
-        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id);
+        this.state.notifyDefinitionChanged(exports.DefinitionChangeType.stepInserted, step.id, details);
         if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
             this.trySelectStepById(step.id);
         }
@@ -3031,8 +3044,10 @@ class StateModifier {
     tryDuplicate(step, parentSequence) {
         const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
         const index = parentSequence.indexOf(step);
-        const newStep = duplicator.duplicate(step);
-        return this.tryInsert(newStep, parentSequence, index + 1);
+        const result = duplicator.duplicate(step);
+        return this.tryInsert(result.step, parentSequence, index + 1, {
+            duplicatedStepIds: result.duplicatedIds
+        });
     }
     replaceDefinition(definition) {
         if (!definition) {
@@ -3047,11 +3062,12 @@ class StateModifier {
 }
 
 class DesignerState {
-    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
+    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
         this.definition = definition;
         this.isReadonly = isReadonly;
         this.isToolboxCollapsed = isToolboxCollapsed;
         this.isEditorCollapsed = isEditorCollapsed;
+        this.preferenceStorage = preferenceStorage;
         this.onViewportChanged = new SimpleEvent();
         this.onSelectedStepIdChanged = new SimpleEvent();
         this.onStepUnselectionBlocked = new SimpleEvent();
@@ -3062,6 +3078,7 @@ class DesignerState {
         this.onDefinitionChanged = new SimpleEvent();
         this.onIsToolboxCollapsedChanged = new SimpleEvent();
         this.onIsEditorCollapsedChanged = new SimpleEvent();
+        this.onPreferencesChanged = new SimpleEvent();
         this.viewport = {
             position: new Vector(0, 0),
             scale: 1
@@ -3092,8 +3109,16 @@ class DesignerState {
         this.definition = definition;
         this.notifyDefinitionChanged(exports.DefinitionChangeType.rootReplaced, null);
     }
-    notifyDefinitionChanged(changeType, stepId) {
-        this.onDefinitionChanged.forward({ changeType, stepId });
+    notifyDefinitionChanged(changeType, stepId, details) {
+        const event = {
+            definition: this.definition,
+            changeType,
+            stepId
+        };
+        if (details) {
+            Object.assign(event, details);
+        }
+        this.onDefinitionChanged.forward(event);
     }
     notifyStepUnselectionBlocked(stepId) {
         this.onStepUnselectionBlocked.forward(stepId);
@@ -3132,6 +3157,15 @@ class DesignerState {
             this.onIsEditorCollapsedChanged.forward(isCollapsed);
         }
     }
+    setPreferences(changes, stepId) {
+        for (const change of changes) {
+            this.preferenceStorage.setItem(change.key, change.value);
+        }
+        this.onPreferencesChanged.forward({ changes, stepId });
+    }
+    getPreference(key) {
+        return this.preferenceStorage.getItem(key);
+    }
 }
 
 class HistoryController {
@@ -3285,22 +3319,22 @@ class DesignerContext {
         const isReadonly = Boolean(configuration.isReadonly);
         const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
         const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
+        const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
         const theme = configuration.theme || 'light';
-        const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
+        const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
         const workspaceController = new WorkspaceControllerWrapper();
         const behaviorController = BehaviorController.create(configuration.shadowRoot);
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const placeholderController = PlaceholderController.create(state, configuration.placeholder);
-        const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new sequentialWorkflowModel.DefinitionWalker();
-        const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
-        const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
+        const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new sequentialWorkflowModel.DefinitionWalker();
+        const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
+        const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
         const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
         const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
-        const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
         const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
         return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
@@ -3574,16 +3608,13 @@ class PressingBehavior {
     }
 }
 
-class RerenderStepPressingBehaviorHandler {
+class ChangePreferencesBehaviorHandler {
     constructor(command, designerContext) {
         this.command = command;
         this.designerContext = designerContext;
     }
     handle() {
-        if (this.command.beforeCallback) {
-            this.command.beforeCallback();
-        }
-        this.designerContext.workspaceController.updateRootComponent();
+        this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
     }
 }
 
@@ -3619,8 +3650,8 @@ class ClickBehaviorResolver {
         switch (commandOrNull.type) {
             case exports.ClickCommandType.selectStep:
                 return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
-            case exports.ClickCommandType.rerenderStep:
-                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
+            case exports.ClickCommandType.changePreferences:
+                return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
             case exports.ClickCommandType.openFolder:
                 return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
             case exports.ClickCommandType.triggerCustomAction:
@@ -3931,6 +3962,7 @@ class Workspace {
         const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
         designerContext.setWorkspaceController(workspace);
         designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
+        designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
             workspace.onStateChanged(r[0], r[1], r[2]);
         });
@@ -3953,11 +3985,25 @@ class Workspace {
         this.viewportApi = viewportApi;
         this.workspaceApi = workspaceApi;
         this.services = services;
-        this.onRendered = new SimpleEvent();
+        this.onRootComponentUpdated = new SimpleEvent();
         this.isValid = false;
         this.initTimeout = null;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
+        this.updateRootComponent = () => {
+            this.selectedStepComponent = null;
+            const rootSequence = this.workspaceApi.getRootSequence();
+            const parentPlaceIndicator = rootSequence.parentStep
+                ? {
+                    sequence: rootSequence.parentStep.parentSequence,
+                    index: rootSequence.parentStep.index
+                }
+                : null;
+            this.view.render(rootSequence.sequence, parentPlaceIndicator);
+            this.trySelectStepComponent(this.state.selectedStepId);
+            this.updateBadges();
+            this.onRootComponentUpdated.forward();
+        };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
             const isMiddleButton = buttonIndex === 1;
@@ -3984,6 +4030,9 @@ class Workspace {
         this.onViewportChanged = (viewport) => {
             this.view.setPositionAndScale(viewport.position, viewport.scale);
         };
+        this.onPreferencesChanged = () => {
+            this.updateRootComponent();
+        };
     }
     scheduleInit() {
         this.initTimeout = setTimeout(() => {
@@ -3992,20 +4041,6 @@ class Workspace {
             this.viewportApi.resetViewport();
         });
     }
-    updateRootComponent() {
-        this.selectedStepComponent = null;
-        const rootSequence = this.workspaceApi.getRootSequence();
-        const parentPlaceIndicator = rootSequence.parentStep
-            ? {
-                sequence: rootSequence.parentStep.parentSequence,
-                index: rootSequence.parentStep.index
-            }
-            : null;
-        this.view.render(rootSequence.sequence, parentPlaceIndicator);
-        this.trySelectStepComponent(this.state.selectedStepId);
-        this.updateBadges();
-        this.onRendered.forward();
-    }
     updateBadges() {
         const result = BadgesResultFactory.create(this.services);
         this.getRootComponent().updateBadges(result);
@@ -5034,11 +5069,12 @@ class Designer {
         const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
-        const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
-        view.workspace.onRendered.first().then(designer.onReady.forward);
+        const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(designerContext.state.definition);
+                designer.onDefinitionChanged.forward(definition);
             }
             if (selectedStepId !== undefined) {
                 designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
@@ -5048,12 +5084,12 @@ class Designer {
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
         designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
         designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
         return designer;
     }
-    constructor(view, state, stateModifier, walker, historyController, api) {
+    constructor(view, state, walker, historyController, api) {
         this.view = view;
         this.state = state;
-        this.stateModifier = stateModifier;
         this.walker = walker;
         this.historyController = historyController;
         this.api = api;
@@ -5085,6 +5121,14 @@ class Designer {
          * @description Fires when the editor is collapsed or expanded.
          */
         this.onIsEditorCollapsedChanged = new SimpleEvent();
+        /**
+         * @description Fires when the root component and all its children are rerendered.
+         */
+        this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when any of the designer preferences has changed.
+         */
+        this.onPreferencesChanged = new SimpleEvent();
     }
     /**
      * @returns the current definition of the workflow.
@@ -5210,8 +5254,8 @@ class Designer {
         return __awaiter(this, void 0, void 0, function* () {
             this.getHistoryController().replaceDefinition(definition);
             yield Promise.all([
-                this.view.workspace.onRendered.first(),
-                this.onDefinitionChanged.first()
+                this.view.workspace.onRootComponentUpdated.once(),
+                this.onDefinitionChanged.once()
             ]);
         });
     }

package/lib/esm/index.js

@@ -151,7 +151,7 @@ class SimpleEvent {
     count() {
         return this.listeners.length;
     }
-    first() {
+    once() {
         return new Promise(resolve => {
             const handler = (value) => {
                 this.unsubscribe(handler);
@@ -1333,7 +1333,7 @@ class DefaultSequenceComponent {
 var ClickCommandType;
 (function (ClickCommandType) {
     ClickCommandType[ClickCommandType["selectStep"] = 1] = "selectStep";
-    ClickCommandType[ClickCommandType["rerenderStep"] = 2] = "rerenderStep";
+    ClickCommandType[ClickCommandType["changePreferences"] = 2] = "changePreferences";
     ClickCommandType[ClickCommandType["openFolder"] = 3] = "openFolder";
     ClickCommandType[ClickCommandType["triggerCustomAction"] = 4] = "triggerCustomAction";
 })(ClickCommandType || (ClickCommandType = {}));
@@ -2550,7 +2550,12 @@ class StepComponentViewContextFactory {
             createPlaceholderForGap: componentContext.services.placeholder.createForGap.bind(componentContext.services.placeholder),
             createPlaceholderForArea: componentContext.services.placeholder.createForArea.bind(componentContext.services.placeholder),
             getPreference: (key) => componentContext.preferenceStorage.getItem(preferenceKeyPrefix + key),
-            setPreference: (key, value) => componentContext.preferenceStorage.setItem(preferenceKeyPrefix + key, value)
+            createPreferenceChange: (key, value) => {
+                return {
+                    key: preferenceKeyPrefix + key,
+                    value
+                };
+            }
         };
     }
 }
@@ -2863,11 +2868,19 @@ class StepDuplicator {
     }
     duplicate(step) {
         const newStep = ObjectCloner.deepClone(step);
-        newStep.id = this.uidGenerator();
+        const duplicatedIds = [];
+        const newId = this.uidGenerator();
+        duplicatedIds.push([step.id, newId]);
+        newStep.id = newId;
         this.definitionWalker.forEachChildren(newStep, s => {
-            s.id = this.uidGenerator();
+            const newId = this.uidGenerator();
+            duplicatedIds.push([s.id, newId]);
+            s.id = newId;
         });
-        return newStep;
+        return {
+            step: newStep,
+            duplicatedIds
+        };
     }
 }
 
@@ -2988,13 +3001,13 @@ class StateModifier {
         this.updateDependencies();
         return true;
     }
-    tryInsert(step, targetSequence, targetIndex) {
+    tryInsert(step, targetSequence, targetIndex, details) {
         const canInsertStep = this.configuration.canInsertStep ? this.configuration.canInsertStep(step, targetSequence, targetIndex) : true;
         if (!canInsertStep) {
             return false;
         }
         SequenceModifier.insertStep(step, targetSequence, targetIndex);
-        this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id);
+        this.state.notifyDefinitionChanged(DefinitionChangeType.stepInserted, step.id, details);
         if (!this.configuration.isAutoSelectDisabled && this.isSelectable(step, targetSequence)) {
             this.trySelectStepById(step.id);
         }
@@ -3030,8 +3043,10 @@ class StateModifier {
     tryDuplicate(step, parentSequence) {
         const duplicator = new StepDuplicator(this.uidGenerator, this.definitionWalker);
         const index = parentSequence.indexOf(step);
-        const newStep = duplicator.duplicate(step);
-        return this.tryInsert(newStep, parentSequence, index + 1);
+        const result = duplicator.duplicate(step);
+        return this.tryInsert(result.step, parentSequence, index + 1, {
+            duplicatedStepIds: result.duplicatedIds
+        });
     }
     replaceDefinition(definition) {
         if (!definition) {
@@ -3046,11 +3061,12 @@ class StateModifier {
 }
 
 class DesignerState {
-    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed) {
+    constructor(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage) {
         this.definition = definition;
         this.isReadonly = isReadonly;
         this.isToolboxCollapsed = isToolboxCollapsed;
         this.isEditorCollapsed = isEditorCollapsed;
+        this.preferenceStorage = preferenceStorage;
         this.onViewportChanged = new SimpleEvent();
         this.onSelectedStepIdChanged = new SimpleEvent();
         this.onStepUnselectionBlocked = new SimpleEvent();
@@ -3061,6 +3077,7 @@ class DesignerState {
         this.onDefinitionChanged = new SimpleEvent();
         this.onIsToolboxCollapsedChanged = new SimpleEvent();
         this.onIsEditorCollapsedChanged = new SimpleEvent();
+        this.onPreferencesChanged = new SimpleEvent();
         this.viewport = {
             position: new Vector(0, 0),
             scale: 1
@@ -3091,8 +3108,16 @@ class DesignerState {
         this.definition = definition;
         this.notifyDefinitionChanged(DefinitionChangeType.rootReplaced, null);
     }
-    notifyDefinitionChanged(changeType, stepId) {
-        this.onDefinitionChanged.forward({ changeType, stepId });
+    notifyDefinitionChanged(changeType, stepId, details) {
+        const event = {
+            definition: this.definition,
+            changeType,
+            stepId
+        };
+        if (details) {
+            Object.assign(event, details);
+        }
+        this.onDefinitionChanged.forward(event);
     }
     notifyStepUnselectionBlocked(stepId) {
         this.onStepUnselectionBlocked.forward(stepId);
@@ -3131,6 +3156,15 @@ class DesignerState {
             this.onIsEditorCollapsedChanged.forward(isCollapsed);
         }
     }
+    setPreferences(changes, stepId) {
+        for (const change of changes) {
+            this.preferenceStorage.setItem(change.key, change.value);
+        }
+        this.onPreferencesChanged.forward({ changes, stepId });
+    }
+    getPreference(key) {
+        return this.preferenceStorage.getItem(key);
+    }
 }
 
 class HistoryController {
@@ -3284,22 +3318,22 @@ class DesignerContext {
         const isReadonly = Boolean(configuration.isReadonly);
         const isToolboxCollapsed = configuration.toolbox ? (_a = configuration.toolbox.isCollapsed) !== null && _a !== void 0 ? _a : layoutController.isMobile() : false;
         const isEditorCollapsed = configuration.editors ? (_b = configuration.editors.isCollapsed) !== null && _b !== void 0 ? _b : layoutController.isMobile() : false;
+        const preferenceStorage = (_c = configuration.preferenceStorage) !== null && _c !== void 0 ? _c : new MemoryPreferenceStorage();
         const theme = configuration.theme || 'light';
-        const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed);
+        const state = new DesignerState(definition, isReadonly, isToolboxCollapsed, isEditorCollapsed, preferenceStorage);
         const workspaceController = new WorkspaceControllerWrapper();
         const behaviorController = BehaviorController.create(configuration.shadowRoot);
         const stepExtensionResolver = StepExtensionResolver.create(services);
         const placeholderController = PlaceholderController.create(state, configuration.placeholder);
-        const definitionWalker = (_c = configuration.definitionWalker) !== null && _c !== void 0 ? _c : new DefinitionWalker();
-        const i18n = (_d = configuration.i18n) !== null && _d !== void 0 ? _d : ((_, defaultValue) => defaultValue);
-        const uidGenerator = (_e = configuration.uidGenerator) !== null && _e !== void 0 ? _e : Uid.next;
+        const definitionWalker = (_d = configuration.definitionWalker) !== null && _d !== void 0 ? _d : new DefinitionWalker();
+        const i18n = (_e = configuration.i18n) !== null && _e !== void 0 ? _e : ((_, defaultValue) => defaultValue);
+        const uidGenerator = (_f = configuration.uidGenerator) !== null && _f !== void 0 ? _f : Uid.next;
         const stateModifier = StateModifier.create(definitionWalker, uidGenerator, state, configuration.steps);
         const customActionController = new CustomActionController(configuration, state, stateModifier);
         let historyController = undefined;
         if (configuration.undoStackSize) {
             historyController = HistoryController.create(configuration.undoStack, state, stateModifier, configuration);
         }
-        const preferenceStorage = (_f = configuration.preferenceStorage) !== null && _f !== void 0 ? _f : new MemoryPreferenceStorage();
         const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
         return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
@@ -3573,16 +3607,13 @@ class PressingBehavior {
     }
 }
 
-class RerenderStepPressingBehaviorHandler {
+class ChangePreferencesBehaviorHandler {
     constructor(command, designerContext) {
         this.command = command;
         this.designerContext = designerContext;
     }
     handle() {
-        if (this.command.beforeCallback) {
-            this.command.beforeCallback();
-        }
-        this.designerContext.workspaceController.updateRootComponent();
+        this.designerContext.state.setPreferences(this.command.changes, this.command.step.id);
     }
 }
 
@@ -3618,8 +3649,8 @@ class ClickBehaviorResolver {
         switch (commandOrNull.type) {
             case ClickCommandType.selectStep:
                 return SelectStepBehavior.create(commandOrNull.component, forceMove, this.context);
-            case ClickCommandType.rerenderStep:
-                return PressingBehavior.create(element, new RerenderStepPressingBehaviorHandler(commandOrNull, this.context));
+            case ClickCommandType.changePreferences:
+                return PressingBehavior.create(element, new ChangePreferencesBehaviorHandler(commandOrNull, this.context));
             case ClickCommandType.openFolder:
                 return PressingBehavior.create(element, new OpenFolderPressingBehaviorHandler(commandOrNull, this.context));
             case ClickCommandType.triggerCustomAction:
@@ -3930,6 +3961,7 @@ class Workspace {
         const workspace = new Workspace(view, designerContext.state, designerContext.behaviorController, wheelController, pinchToZoomController, contextMenuController, clickBehaviorResolver, clickBehaviorWrapper, api.viewport, api.workspace, designerContext.services);
         designerContext.setWorkspaceController(workspace);
         designerContext.state.onViewportChanged.subscribe(workspace.onViewportChanged);
+        designerContext.state.onPreferencesChanged.subscribe(workspace.onPreferencesChanged);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged, designerContext.state.onFolderPathChanged).subscribe(r => {
             workspace.onStateChanged(r[0], r[1], r[2]);
         });
@@ -3952,11 +3984,25 @@ class Workspace {
         this.viewportApi = viewportApi;
         this.workspaceApi = workspaceApi;
         this.services = services;
-        this.onRendered = new SimpleEvent();
+        this.onRootComponentUpdated = new SimpleEvent();
         this.isValid = false;
         this.initTimeout = null;
         this.selectedStepComponent = null;
         this.validationErrorBadgeIndex = null;
+        this.updateRootComponent = () => {
+            this.selectedStepComponent = null;
+            const rootSequence = this.workspaceApi.getRootSequence();
+            const parentPlaceIndicator = rootSequence.parentStep
+                ? {
+                    sequence: rootSequence.parentStep.parentSequence,
+                    index: rootSequence.parentStep.index
+                }
+                : null;
+            this.view.render(rootSequence.sequence, parentPlaceIndicator);
+            this.trySelectStepComponent(this.state.selectedStepId);
+            this.updateBadges();
+            this.onRootComponentUpdated.forward();
+        };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
             const isMiddleButton = buttonIndex === 1;
@@ -3983,6 +4029,9 @@ class Workspace {
         this.onViewportChanged = (viewport) => {
             this.view.setPositionAndScale(viewport.position, viewport.scale);
         };
+        this.onPreferencesChanged = () => {
+            this.updateRootComponent();
+        };
     }
     scheduleInit() {
         this.initTimeout = setTimeout(() => {
@@ -3991,20 +4040,6 @@ class Workspace {
             this.viewportApi.resetViewport();
         });
     }
-    updateRootComponent() {
-        this.selectedStepComponent = null;
-        const rootSequence = this.workspaceApi.getRootSequence();
-        const parentPlaceIndicator = rootSequence.parentStep
-            ? {
-                sequence: rootSequence.parentStep.parentSequence,
-                index: rootSequence.parentStep.index
-            }
-            : null;
-        this.view.render(rootSequence.sequence, parentPlaceIndicator);
-        this.trySelectStepComponent(this.state.selectedStepId);
-        this.updateBadges();
-        this.onRendered.forward();
-    }
     updateBadges() {
         const result = BadgesResultFactory.create(this.services);
         this.getRootComponent().updateBadges(result);
@@ -5033,11 +5068,12 @@ class Designer {
         const designerContext = DesignerContext.create(placeholder, startDefinition, config, services);
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
-        const designer = new Designer(view, designerContext.state, designerContext.stateModifier, designerContext.definitionWalker, designerContext.historyController, designerApi);
-        view.workspace.onRendered.first().then(designer.onReady.forward);
+        const designer = new Designer(view, designerContext.state, designerContext.definitionWalker, designerContext.historyController, designerApi);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.forward);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.forward);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(designerContext.state.definition);
+                designer.onDefinitionChanged.forward(definition);
             }
             if (selectedStepId !== undefined) {
                 designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
@@ -5047,12 +5083,12 @@ class Designer {
         designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.forward);
         designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.forward);
         designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.forward);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.forward);
         return designer;
     }
-    constructor(view, state, stateModifier, walker, historyController, api) {
+    constructor(view, state, walker, historyController, api) {
         this.view = view;
         this.state = state;
-        this.stateModifier = stateModifier;
         this.walker = walker;
         this.historyController = historyController;
         this.api = api;
@@ -5084,6 +5120,14 @@ class Designer {
          * @description Fires when the editor is collapsed or expanded.
          */
         this.onIsEditorCollapsedChanged = new SimpleEvent();
+        /**
+         * @description Fires when the root component and all its children are rerendered.
+         */
+        this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when any of the designer preferences has changed.
+         */
+        this.onPreferencesChanged = new SimpleEvent();
     }
     /**
      * @returns the current definition of the workflow.
@@ -5209,8 +5253,8 @@ class Designer {
         return __awaiter(this, void 0, void 0, function* () {
             this.getHistoryController().replaceDefinition(definition);
             yield Promise.all([
-                this.view.workspace.onRendered.first(),
-                this.onDefinitionChanged.first()
+                this.view.workspace.onRootComponentUpdated.once(),
+                this.onDefinitionChanged.once()
             ]);
         });
     }