npm - sequential-workflow-designer - Versions diffs - 0.37.3 → 0.38.0 - Mend

sequential-workflow-designer 0.37.3 → 0.38.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -107,10 +107,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
   ...
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/css/designer.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/css/designer-light.css" rel="stylesheet" />
-  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/css/designer-dark.css" rel="stylesheet" />
-  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.3/dist/index.umd.js"></script>
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.0/css/designer.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.0/css/designer-light.css" rel="stylesheet" />
+  <link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.0/css/designer-dark.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.38.0/dist/index.umd.js"></script>
 </head>
 ```

package/dist/index.umd.js CHANGED Viewed

@@ -16,10 +16,11 @@
 	        element.setAttribute('transform', `translate(${x}, ${y})`);
 	    }
 	    static attrs(element, attributes) {
-	        Object.keys(attributes).forEach(name => {
+	        const names = Object.keys(attributes);
+	        for (const name in names) {
 	            const value = attributes[name];
 	            element.setAttribute(name, typeof value === 'string' ? value : value.toString());
-	        });
+	        }
 	    }
 	    static element(name, attributes) {
 	        const element = document.createElement(name);
@@ -133,9 +134,9 @@
 	class SimpleEvent {
 	    constructor() {
 	        this.listeners = [];
-	        this.forward = (value) => {
-	            if (this.listeners.length > 0) {
-	                this.listeners.forEach(listener => listener(value));
+	        this.emit = (value) => {
+	            for (const listener of this.listeners) {
+	                listener(value);
 	            }
 	        };
 	    }
@@ -169,14 +170,14 @@
 	    const value = [undefined, undefined, undefined, undefined];
 	    const result = new SimpleEvent();
 	    let scheduled = false;
-	    function forward() {
+	    function emit() {
 	        if (scheduled) {
 	            return;
 	        }
 	        scheduled = true;
 	        setTimeout(() => {
 	            try {
-	                result.forward(value);
+	                result.emit(value);
 	            }
 	            finally {
 	                scheduled = false;
@@ -187,7 +188,7 @@
 	    function subscribe(event, index) {
 	        event.subscribe(v => {
 	            value[index] = v;
-	            forward();
+	            emit();
 	        });
 	    }
 	    subscribe(a, 0);
@@ -204,7 +205,7 @@
 	class ControlBarApi {
 	    static create(state, historyController, stateModifier) {
 	        const api = new ControlBarApi(state, historyController, stateModifier);
-	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+	        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
 	        return api;
 	    }
 	    constructor(state, historyController, stateModifier) {
@@ -1340,7 +1341,7 @@
 	}
 	class LabelView {
-	    static create(parent, y, cfg, text, theme) {
+	    static create(parent, y, cfg, text, theme, textWidthMeasurer) {
 	        const g = Dom.svg('g', {
 	            class: `sqd-label sqd-label-${theme}`
 	        });
@@ -1351,7 +1352,8 @@
 	        });
 	        nameText.textContent = text;
 	        g.appendChild(nameText);
-	        const width = Math.max(nameText.getBBox().width + cfg.paddingX * 2, cfg.minWidth);
+	        const nameWidth = textWidthMeasurer(nameText);
+	        const width = Math.max(nameWidth + cfg.paddingX * 2, cfg.minWidth);
 	        const nameRect = Dom.svg('rect', {
 	            class: 'sqd-label-rect',
 	            width: width,
@@ -1407,7 +1409,9 @@
 	        const { sequence } = sequenceContext;
 	        const g = Dom.svg('g');
 	        parent.appendChild(g);
-	        const components = [];
+	        const components = new Array(sequence.length);
+	        let restWidth = 0;
+	        let joinX = 0;
 	        for (let index = 0; index < sequence.length; index++) {
 	            const stepContext = {
 	                parentSequence: sequenceContext.sequence,
@@ -1418,13 +1422,13 @@
 	                isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
 	                isPreview: sequenceContext.isPreview
 	            };
-	            components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+	            const component = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+	            components[index] = component;
+	            restWidth = Math.max(restWidth, component.view.width - component.view.joinX);
+	            joinX = Math.max(joinX, component.view.joinX);
 	        }
-	        let joinX;
 	        let totalWidth;
-	        if (components.length > 0) {
-	            const restWidth = Math.max(...components.map(c => c.view.width - c.view.joinX));
-	            joinX = Math.max(...components.map(c => c.view.joinX));
+	        if (sequence.length > 0) {
 	            totalWidth = joinX + restWidth;
 	        }
 	        else {
@@ -1656,7 +1660,7 @@
 	    return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$3, (g, regionViewBuilder) => {
 	        const step = stepContext.step;
 	        const name = viewContext.getStepName();
-	        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
+	        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary', viewContext.textWidthMeasurer);
 	        const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
 	        const halfOfWidestElement = labelView.width / 2;
 	        const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1902,7 +1906,7 @@
 	        const step = stepContext.step;
 	        const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
 	        const name = viewContext.getStepName();
-	        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
+	        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary', viewContext.textWidthMeasurer);
 	        const branchNames = branchNameResolver ? branchNameResolver(step) : Object.keys(step.branches);
 	        if (branchNames.length === 0) {
 	            const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
@@ -1923,7 +1927,7 @@
 	            const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
 	            const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
 	            const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-	            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
+	            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary', viewContext.textWidthMeasurer);
 	            const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
 	            const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
 	            const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -1999,8 +2003,9 @@
 	    });
 	    text.textContent = viewContext.getStepName();
 	    g.appendChild(text);
-	    const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
-	    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
+	    const textWidth = viewContext.textWidthMeasurer(text);
+	    const width = Math.max(textWidth, cfg.minTextWidth);
+	    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + width;
 	    const rect = Dom.svg('rect', {
 	        x: 0.5,
 	        y: 0.5,
@@ -2010,7 +2015,6 @@
 	        rx: cfg.radius,
 	        ry: cfg.radius
 	    });
-	    g.insertBefore(rect, text);
 	    const iconUrl = viewContext.getStepIconUrl();
 	    const icon = iconUrl
 	        ? Dom.svg('image', {
@@ -2027,6 +2031,7 @@
 	        width: cfg.iconSize,
 	        height: cfg.iconSize
 	    });
+	    g.insertBefore(rect, text);
 	    g.appendChild(icon);
 	    const isInputViewHidden = !stepContext.isInputConnected; // TODO: handle inside the folder
 	    const isOutputViewHidden = isInterrupted;
@@ -2713,6 +2718,7 @@
 	        const preferenceKeyPrefix = stepContext.step.id + ':';
 	        return {
 	            i18n: componentContext.i18n,
+	            textWidthMeasurer: componentContext.textWidthMeasurer,
 	            getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
 	            getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
 	            createStepComponent: (parentElement, parentSequence, step, position) => {
@@ -2767,13 +2773,13 @@
 	}
 	class ComponentContext {
-	    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services) {
+	    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services) {
 	        const validator = new DefinitionValidator(configuration.validator, state);
 	        const iconProvider = new IconProvider(configuration.steps);
 	        const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
+	        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state);
 	    }
-	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
+	    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state) {
 	        this.shadowRoot = shadowRoot;
 	        this.validator = validator;
 	        this.iconProvider = iconProvider;
@@ -2783,6 +2789,7 @@
 	        this.services = services;
 	        this.preferenceStorage = preferenceStorage;
 	        this.i18n = i18n;
+	        this.textWidthMeasurer = textWidthMeasurer;
 	        this.state = state;
 	    }
 	    getViewportScale() {
@@ -3283,16 +3290,16 @@
 	    setSelectedStepId(stepId) {
 	        if (this.selectedStepId !== stepId) {
 	            this.selectedStepId = stepId;
-	            this.onSelectedStepIdChanged.forward(stepId);
+	            this.onSelectedStepIdChanged.emit(stepId);
 	        }
 	    }
 	    pushStepIdToFolderPath(stepId) {
 	        this.folderPath.push(stepId);
-	        this.onFolderPathChanged.forward(this.folderPath);
+	        this.onFolderPathChanged.emit(this.folderPath);
 	    }
 	    setFolderPath(path) {
 	        this.folderPath = path;
-	        this.onFolderPathChanged.forward(path);
+	        this.onFolderPathChanged.emit(path);
 	    }
 	    tryGetLastStepIdFromFolderPath() {
 	        return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3310,50 +3317,50 @@
 	        if (details) {
 	            Object.assign(event, details);
 	        }
-	        this.onDefinitionChanged.forward(event);
+	        this.onDefinitionChanged.emit(event);
 	    }
 	    notifyStepUnselectionBlocked(stepId) {
-	        this.onStepUnselectionBlocked.forward(stepId);
+	        this.onStepUnselectionBlocked.emit(stepId);
 	    }
 	    setViewport(viewport) {
 	        this.viewport = viewport;
-	        this.onViewportChanged.forward(viewport);
+	        this.onViewportChanged.emit(viewport);
 	    }
 	    setIsReadonly(isReadonly) {
 	        if (this.isReadonly !== isReadonly) {
 	            this.isReadonly = isReadonly;
-	            this.onIsReadonlyChanged.forward(isReadonly);
+	            this.onIsReadonlyChanged.emit(isReadonly);
 	        }
 	    }
 	    setIsDragging(isDragging) {
 	        if (this.isDragging !== isDragging) {
 	            this.isDragging = isDragging;
-	            this.onIsDraggingChanged.forward(isDragging);
+	            this.onIsDraggingChanged.emit(isDragging);
 	        }
 	    }
 	    setIsDragDisabled(isDragDisabled) {
 	        if (this.isDragDisabled !== isDragDisabled) {
 	            this.isDragDisabled = isDragDisabled;
-	            this.onIsDragDisabledChanged.forward(isDragDisabled);
+	            this.onIsDragDisabledChanged.emit(isDragDisabled);
 	        }
 	    }
 	    setIsToolboxCollapsed(isCollapsed) {
 	        if (this.isToolboxCollapsed !== isCollapsed) {
 	            this.isToolboxCollapsed = isCollapsed;
-	            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+	            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
 	        }
 	    }
 	    setIsEditorCollapsed(isCollapsed) {
 	        if (this.isEditorCollapsed !== isCollapsed) {
 	            this.isEditorCollapsed = isCollapsed;
-	            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+	            this.onIsEditorCollapsedChanged.emit(isCollapsed);
 	        }
 	    }
 	    setPreferences(changes, stepId) {
 	        for (const change of changes) {
 	            this.preferenceStorage.setItem(change.key, change.value);
 	        }
-	        this.onPreferencesChanged.forward({ changes, stepId });
+	        this.onPreferencesChanged.emit({ changes, stepId });
 	    }
 	    getPreference(key) {
 	        return this.preferenceStorage.getItem(key);
@@ -3503,9 +3510,13 @@
 	    }
 	}
+	function measureTextWidth(text) {
+	    return text.getBBox().width;
+	}
 	class DesignerContext {
 	    static create(placeholder, startDefinition, configuration, services) {
-	        var _a, _b, _c, _d, _e, _f;
+	        var _a, _b, _c, _d, _e, _f, _g;
 	        const definition = ObjectCloner.deepClone(startDefinition);
 	        const layoutController = new LayoutController(placeholder);
 	        const isReadonly = Boolean(configuration.isReadonly);
@@ -3521,13 +3532,14 @@
 	        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 textWidthMeasurer = (_g = configuration.textWidthMeasurer) !== null && _g !== void 0 ? _g : measureTextWidth;
 	        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 componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
+	        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services);
 	        return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
 	    }
 	    constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -4194,7 +4206,7 @@
 	            this.view.render(rootSequence.sequence, parentPlaceIndicator);
 	            this.trySelectStepComponent(this.state.selectedStepId);
 	            this.updateBadges();
-	            this.onRootComponentUpdated.forward();
+	            this.onRootComponentUpdated.emit();
 	        };
 	        this.onClick = (position, target, buttonIndex, altKey) => {
 	            const isPrimaryButton = buttonIndex === 0;
@@ -5262,21 +5274,22 @@
 	        const designerApi = DesignerApi.create(designerContext);
 	        const view = DesignerView.create(placeholder, designerContext, designerApi);
 	        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);
+	        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+	        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
 	        race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
 	            if (definition !== undefined) {
-	                designer.onDefinitionChanged.forward(definition);
+	                designer.onDefinitionChanged.emit(definition);
 	            }
 	            if (selectedStepId !== undefined) {
-	                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+	                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
 	            }
 	        });
-	        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
-	        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);
+	        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+	        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+	        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+	        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+	        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+	        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
 	        return designer;
 	    }
 	    constructor(view, state, walker, historyController, api) {
@@ -5317,6 +5330,10 @@
 	         * @description Fires when the root component and all its children are rerendered.
 	         */
 	        this.onRootComponentUpdated = new SimpleEvent();
+	        /**
+	         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+	         */
+	        this.onIsDraggingChanged = new SimpleEvent();
 	        /**
 	         * @description Fires when any of the designer preferences has changed.
 	         */
@@ -5426,6 +5443,12 @@
 	    isEditorCollapsed() {
 	        return this.state.isEditorCollapsed;
 	    }
+	    /**
+	     * @returns a flag that indicates whether the step is being dragged.
+	     */
+	    isDragging() {
+	        return this.state.isDragging;
+	    }
 	    /**
 	     * @description Sets a flag that indicates whether the editor is collapsed.
 	     */

package/lib/cjs/index.cjs CHANGED Viewed

@@ -14,10 +14,11 @@ class Dom {
         element.setAttribute('transform', `translate(${x}, ${y})`);
     }
     static attrs(element, attributes) {
-        Object.keys(attributes).forEach(name => {
+        const names = Object.keys(attributes);
+        for (const name in names) {
             const value = attributes[name];
             element.setAttribute(name, typeof value === 'string' ? value : value.toString());
-        });
+        }
     }
     static element(name, attributes) {
         const element = document.createElement(name);
@@ -131,9 +132,9 @@ class Uid {
 class SimpleEvent {
     constructor() {
         this.listeners = [];
-        this.forward = (value) => {
-            if (this.listeners.length > 0) {
-                this.listeners.forEach(listener => listener(value));
+        this.emit = (value) => {
+            for (const listener of this.listeners) {
+                listener(value);
             }
         };
     }
@@ -167,14 +168,14 @@ function race(timeout, a, b, c, d) {
     const value = [undefined, undefined, undefined, undefined];
     const result = new SimpleEvent();
     let scheduled = false;
-    function forward() {
+    function emit() {
         if (scheduled) {
             return;
         }
         scheduled = true;
         setTimeout(() => {
             try {
-                result.forward(value);
+                result.emit(value);
             }
             finally {
                 scheduled = false;
@@ -185,7 +186,7 @@ function race(timeout, a, b, c, d) {
     function subscribe(event, index) {
         event.subscribe(v => {
             value[index] = v;
-            forward();
+            emit();
         });
     }
     subscribe(a, 0);
@@ -202,7 +203,7 @@ function race(timeout, a, b, c, d) {
 class ControlBarApi {
     static create(state, historyController, stateModifier) {
         const api = new ControlBarApi(state, historyController, stateModifier);
-        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
         return api;
     }
     constructor(state, historyController, stateModifier) {
@@ -1155,7 +1156,7 @@ function appendJoin(parent, d) {
 }
 class LabelView {
-    static create(parent, y, cfg, text, theme) {
+    static create(parent, y, cfg, text, theme, textWidthMeasurer) {
         const g = Dom.svg('g', {
             class: `sqd-label sqd-label-${theme}`
         });
@@ -1166,7 +1167,8 @@ class LabelView {
         });
         nameText.textContent = text;
         g.appendChild(nameText);
-        const width = Math.max(nameText.getBBox().width + cfg.paddingX * 2, cfg.minWidth);
+        const nameWidth = textWidthMeasurer(nameText);
+        const width = Math.max(nameWidth + cfg.paddingX * 2, cfg.minWidth);
         const nameRect = Dom.svg('rect', {
             class: 'sqd-label-rect',
             width: width,
@@ -1222,7 +1224,9 @@ class DefaultSequenceComponentView {
         const { sequence } = sequenceContext;
         const g = Dom.svg('g');
         parent.appendChild(g);
-        const components = [];
+        const components = new Array(sequence.length);
+        let restWidth = 0;
+        let joinX = 0;
         for (let index = 0; index < sequence.length; index++) {
             const stepContext = {
                 parentSequence: sequenceContext.sequence,
@@ -1233,13 +1237,13 @@ class DefaultSequenceComponentView {
                 isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
                 isPreview: sequenceContext.isPreview
             };
-            components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+            const component = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+            components[index] = component;
+            restWidth = Math.max(restWidth, component.view.width - component.view.joinX);
+            joinX = Math.max(joinX, component.view.joinX);
         }
-        let joinX;
         let totalWidth;
-        if (components.length > 0) {
-            const restWidth = Math.max(...components.map(c => c.view.width - c.view.joinX));
-            joinX = Math.max(...components.map(c => c.view.joinX));
+        if (sequence.length > 0) {
             totalWidth = joinX + restWidth;
         }
         else {
@@ -1471,7 +1475,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
     return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$3, (g, regionViewBuilder) => {
         const step = stepContext.step;
         const name = viewContext.getStepName();
-        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
+        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary', viewContext.textWidthMeasurer);
         const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
         const halfOfWidestElement = labelView.width / 2;
         const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1717,7 +1721,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNam
         const step = stepContext.step;
         const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
         const name = viewContext.getStepName();
-        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
+        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary', viewContext.textWidthMeasurer);
         const branchNames = branchNameResolver ? branchNameResolver(step) : Object.keys(step.branches);
         if (branchNames.length === 0) {
             const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
@@ -1738,7 +1742,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNam
             const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
             const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
             const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
+            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary', viewContext.textWidthMeasurer);
             const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
             const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
             const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -1814,8 +1818,9 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
     });
     text.textContent = viewContext.getStepName();
     g.appendChild(text);
-    const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
-    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
+    const textWidth = viewContext.textWidthMeasurer(text);
+    const width = Math.max(textWidth, cfg.minTextWidth);
+    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + width;
     const rect = Dom.svg('rect', {
         x: 0.5,
         y: 0.5,
@@ -1825,7 +1830,6 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         rx: cfg.radius,
         ry: cfg.radius
     });
-    g.insertBefore(rect, text);
     const iconUrl = viewContext.getStepIconUrl();
     const icon = iconUrl
         ? Dom.svg('image', {
@@ -1842,6 +1846,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         width: cfg.iconSize,
         height: cfg.iconSize
     });
+    g.insertBefore(rect, text);
     g.appendChild(icon);
     const isInputViewHidden = !stepContext.isInputConnected; // TODO: handle inside the folder
     const isOutputViewHidden = isInterrupted;
@@ -2528,6 +2533,7 @@ class StepComponentViewContextFactory {
         const preferenceKeyPrefix = stepContext.step.id + ':';
         return {
             i18n: componentContext.i18n,
+            textWidthMeasurer: componentContext.textWidthMeasurer,
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
             getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
             createStepComponent: (parentElement, parentSequence, step, position) => {
@@ -2582,13 +2588,13 @@ class StepComponentFactory {
 }
 class ComponentContext {
-    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services) {
+    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services) {
         const validator = new DefinitionValidator(configuration.validator, state);
         const iconProvider = new IconProvider(configuration.steps);
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
+        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state);
     }
-    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
+    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state) {
         this.shadowRoot = shadowRoot;
         this.validator = validator;
         this.iconProvider = iconProvider;
@@ -2598,6 +2604,7 @@ class ComponentContext {
         this.services = services;
         this.preferenceStorage = preferenceStorage;
         this.i18n = i18n;
+        this.textWidthMeasurer = textWidthMeasurer;
         this.state = state;
     }
     getViewportScale() {
@@ -3098,16 +3105,16 @@ class DesignerState {
     setSelectedStepId(stepId) {
         if (this.selectedStepId !== stepId) {
             this.selectedStepId = stepId;
-            this.onSelectedStepIdChanged.forward(stepId);
+            this.onSelectedStepIdChanged.emit(stepId);
         }
     }
     pushStepIdToFolderPath(stepId) {
         this.folderPath.push(stepId);
-        this.onFolderPathChanged.forward(this.folderPath);
+        this.onFolderPathChanged.emit(this.folderPath);
     }
     setFolderPath(path) {
         this.folderPath = path;
-        this.onFolderPathChanged.forward(path);
+        this.onFolderPathChanged.emit(path);
     }
     tryGetLastStepIdFromFolderPath() {
         return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3125,50 +3132,50 @@ class DesignerState {
         if (details) {
             Object.assign(event, details);
         }
-        this.onDefinitionChanged.forward(event);
+        this.onDefinitionChanged.emit(event);
     }
     notifyStepUnselectionBlocked(stepId) {
-        this.onStepUnselectionBlocked.forward(stepId);
+        this.onStepUnselectionBlocked.emit(stepId);
     }
     setViewport(viewport) {
         this.viewport = viewport;
-        this.onViewportChanged.forward(viewport);
+        this.onViewportChanged.emit(viewport);
     }
     setIsReadonly(isReadonly) {
         if (this.isReadonly !== isReadonly) {
             this.isReadonly = isReadonly;
-            this.onIsReadonlyChanged.forward(isReadonly);
+            this.onIsReadonlyChanged.emit(isReadonly);
         }
     }
     setIsDragging(isDragging) {
         if (this.isDragging !== isDragging) {
             this.isDragging = isDragging;
-            this.onIsDraggingChanged.forward(isDragging);
+            this.onIsDraggingChanged.emit(isDragging);
         }
     }
     setIsDragDisabled(isDragDisabled) {
         if (this.isDragDisabled !== isDragDisabled) {
             this.isDragDisabled = isDragDisabled;
-            this.onIsDragDisabledChanged.forward(isDragDisabled);
+            this.onIsDragDisabledChanged.emit(isDragDisabled);
         }
     }
     setIsToolboxCollapsed(isCollapsed) {
         if (this.isToolboxCollapsed !== isCollapsed) {
             this.isToolboxCollapsed = isCollapsed;
-            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
         }
     }
     setIsEditorCollapsed(isCollapsed) {
         if (this.isEditorCollapsed !== isCollapsed) {
             this.isEditorCollapsed = isCollapsed;
-            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+            this.onIsEditorCollapsedChanged.emit(isCollapsed);
         }
     }
     setPreferences(changes, stepId) {
         for (const change of changes) {
             this.preferenceStorage.setItem(change.key, change.value);
         }
-        this.onPreferencesChanged.forward({ changes, stepId });
+        this.onPreferencesChanged.emit({ changes, stepId });
     }
     getPreference(key) {
         return this.preferenceStorage.getItem(key);
@@ -3318,9 +3325,13 @@ class MemoryPreferenceStorage {
     }
 }
+function measureTextWidth(text) {
+    return text.getBBox().width;
+}
 class DesignerContext {
     static create(placeholder, startDefinition, configuration, services) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(placeholder);
         const isReadonly = Boolean(configuration.isReadonly);
@@ -3336,13 +3347,14 @@ class DesignerContext {
         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 textWidthMeasurer = (_g = configuration.textWidthMeasurer) !== null && _g !== void 0 ? _g : measureTextWidth;
         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 componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services);
         return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
     constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -4009,7 +4021,7 @@ class Workspace {
             this.view.render(rootSequence.sequence, parentPlaceIndicator);
             this.trySelectStepComponent(this.state.selectedStepId);
             this.updateBadges();
-            this.onRootComponentUpdated.forward();
+            this.onRootComponentUpdated.emit();
         };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
@@ -5077,21 +5089,22 @@ class Designer {
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         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);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(definition);
+                designer.onDefinitionChanged.emit(definition);
             }
             if (selectedStepId !== undefined) {
-                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
             }
         });
-        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
-        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);
+        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
         return designer;
     }
     constructor(view, state, walker, historyController, api) {
@@ -5132,6 +5145,10 @@ class Designer {
          * @description Fires when the root component and all its children are rerendered.
          */
         this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+         */
+        this.onIsDraggingChanged = new SimpleEvent();
         /**
          * @description Fires when any of the designer preferences has changed.
          */
@@ -5241,6 +5258,12 @@ class Designer {
     isEditorCollapsed() {
         return this.state.isEditorCollapsed;
     }
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging() {
+        return this.state.isDragging;
+    }
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */

package/lib/esm/index.js CHANGED Viewed

@@ -13,10 +13,11 @@ class Dom {
         element.setAttribute('transform', `translate(${x}, ${y})`);
     }
     static attrs(element, attributes) {
-        Object.keys(attributes).forEach(name => {
+        const names = Object.keys(attributes);
+        for (const name in names) {
             const value = attributes[name];
             element.setAttribute(name, typeof value === 'string' ? value : value.toString());
-        });
+        }
     }
     static element(name, attributes) {
         const element = document.createElement(name);
@@ -130,9 +131,9 @@ class Uid {
 class SimpleEvent {
     constructor() {
         this.listeners = [];
-        this.forward = (value) => {
-            if (this.listeners.length > 0) {
-                this.listeners.forEach(listener => listener(value));
+        this.emit = (value) => {
+            for (const listener of this.listeners) {
+                listener(value);
             }
         };
     }
@@ -166,14 +167,14 @@ function race(timeout, a, b, c, d) {
     const value = [undefined, undefined, undefined, undefined];
     const result = new SimpleEvent();
     let scheduled = false;
-    function forward() {
+    function emit() {
         if (scheduled) {
             return;
         }
         scheduled = true;
         setTimeout(() => {
             try {
-                result.forward(value);
+                result.emit(value);
             }
             finally {
                 scheduled = false;
@@ -184,7 +185,7 @@ function race(timeout, a, b, c, d) {
     function subscribe(event, index) {
         event.subscribe(v => {
             value[index] = v;
-            forward();
+            emit();
         });
     }
     subscribe(a, 0);
@@ -201,7 +202,7 @@ function race(timeout, a, b, c, d) {
 class ControlBarApi {
     static create(state, historyController, stateModifier) {
         const api = new ControlBarApi(state, historyController, stateModifier);
-        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.forward);
+        race(0, state.onIsReadonlyChanged, state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined).subscribe(api.onStateChanged.emit);
         return api;
     }
     constructor(state, historyController, stateModifier) {
@@ -1154,7 +1155,7 @@ function appendJoin(parent, d) {
 }
 class LabelView {
-    static create(parent, y, cfg, text, theme) {
+    static create(parent, y, cfg, text, theme, textWidthMeasurer) {
         const g = Dom.svg('g', {
             class: `sqd-label sqd-label-${theme}`
         });
@@ -1165,7 +1166,8 @@ class LabelView {
         });
         nameText.textContent = text;
         g.appendChild(nameText);
-        const width = Math.max(nameText.getBBox().width + cfg.paddingX * 2, cfg.minWidth);
+        const nameWidth = textWidthMeasurer(nameText);
+        const width = Math.max(nameWidth + cfg.paddingX * 2, cfg.minWidth);
         const nameRect = Dom.svg('rect', {
             class: 'sqd-label-rect',
             width: width,
@@ -1221,7 +1223,9 @@ class DefaultSequenceComponentView {
         const { sequence } = sequenceContext;
         const g = Dom.svg('g');
         parent.appendChild(g);
-        const components = [];
+        const components = new Array(sequence.length);
+        let restWidth = 0;
+        let joinX = 0;
         for (let index = 0; index < sequence.length; index++) {
             const stepContext = {
                 parentSequence: sequenceContext.sequence,
@@ -1232,13 +1236,13 @@ class DefaultSequenceComponentView {
                 isOutputConnected: index === sequence.length - 1 ? sequenceContext.isOutputConnected : true,
                 isPreview: sequenceContext.isPreview
             };
-            components[index] = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+            const component = componentContext.stepComponentFactory.create(g, stepContext, componentContext);
+            components[index] = component;
+            restWidth = Math.max(restWidth, component.view.width - component.view.joinX);
+            joinX = Math.max(joinX, component.view.joinX);
         }
-        let joinX;
         let totalWidth;
-        if (components.length > 0) {
-            const restWidth = Math.max(...components.map(c => c.view.width - c.view.joinX));
-            joinX = Math.max(...components.map(c => c.view.joinX));
+        if (sequence.length > 0) {
             totalWidth = joinX + restWidth;
         }
         else {
@@ -1470,7 +1474,7 @@ const createContainerStepComponentViewFactory = (cfg) => (parentElement, stepCon
     return viewContext.createRegionComponentView(parentElement, COMPONENT_CLASS_NAME$3, (g, regionViewBuilder) => {
         const step = stepContext.step;
         const name = viewContext.getStepName();
-        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary');
+        const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, name, 'primary', viewContext.textWidthMeasurer);
         const sequenceComponent = viewContext.createSequenceComponent(g, step.sequence);
         const halfOfWidestElement = labelView.width / 2;
         const offsetLeft = Math.max(halfOfWidestElement - sequenceComponent.view.joinX, 0) + cfg.paddingX;
@@ -1716,7 +1720,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNam
         const step = stepContext.step;
         const paddingTop = cfg.paddingTop1 + cfg.paddingTop2;
         const name = viewContext.getStepName();
-        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary');
+        const nameLabelView = LabelView.create(g, paddingTop, cfg.nameLabel, name, 'primary', viewContext.textWidthMeasurer);
         const branchNames = branchNameResolver ? branchNameResolver(step) : Object.keys(step.branches);
         if (branchNames.length === 0) {
             const width = Math.max(nameLabelView.width, cfg.minBranchWidth) + cfg.paddingX * 2;
@@ -1737,7 +1741,7 @@ const createSwitchStepComponentViewFactory = (cfg, branchNameResolver, branchNam
             const label = branchNameLabelResolver ? branchNameLabelResolver(branchName, step) : branchName;
             const translatedLabel = viewContext.i18n(`stepComponent.${step.type}.branchName`, label);
             const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight;
-            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary');
+            const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedLabel, 'secondary', viewContext.textWidthMeasurer);
             const component = viewContext.createSequenceComponent(g, step.branches[branchName]);
             const halfOfWidestBranchElement = Math.max(labelView.width, cfg.minBranchWidth) / 2;
             const branchOffsetLeft = Math.max(halfOfWidestBranchElement - component.view.joinX, 0) + cfg.paddingX;
@@ -1813,8 +1817,9 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
     });
     text.textContent = viewContext.getStepName();
     g.appendChild(text);
-    const textWidth = Math.max(text.getBBox().width, cfg.minTextWidth);
-    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + textWidth;
+    const textWidth = viewContext.textWidthMeasurer(text);
+    const width = Math.max(textWidth, cfg.minTextWidth);
+    const boxWidth = cfg.iconSize + cfg.paddingLeft + cfg.paddingRight + cfg.textMarginLeft + width;
     const rect = Dom.svg('rect', {
         x: 0.5,
         y: 0.5,
@@ -1824,7 +1829,6 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         rx: cfg.radius,
         ry: cfg.radius
     });
-    g.insertBefore(rect, text);
     const iconUrl = viewContext.getStepIconUrl();
     const icon = iconUrl
         ? Dom.svg('image', {
@@ -1841,6 +1845,7 @@ const createTaskStepComponentViewFactory = (isInterrupted, cfg) => (parentElemen
         width: cfg.iconSize,
         height: cfg.iconSize
     });
+    g.insertBefore(rect, text);
     g.appendChild(icon);
     const isInputViewHidden = !stepContext.isInputConnected; // TODO: handle inside the folder
     const isOutputViewHidden = isInterrupted;
@@ -2527,6 +2532,7 @@ class StepComponentViewContextFactory {
         const preferenceKeyPrefix = stepContext.step.id + ':';
         return {
             i18n: componentContext.i18n,
+            textWidthMeasurer: componentContext.textWidthMeasurer,
             getStepIconUrl: () => componentContext.iconProvider.getIconUrl(stepContext.step),
             getStepName: () => componentContext.i18n(`step.${stepContext.step.type}.name`, stepContext.step.name),
             createStepComponent: (parentElement, parentSequence, step, position) => {
@@ -2581,13 +2587,13 @@ class StepComponentFactory {
 }
 class ComponentContext {
-    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services) {
+    static create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services) {
         const validator = new DefinitionValidator(configuration.validator, state);
         const iconProvider = new IconProvider(configuration.steps);
         const stepComponentFactory = new StepComponentFactory(stepExtensionResolver);
-        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state);
+        return new ComponentContext(configuration.shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state);
     }
-    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, state) {
+    constructor(shadowRoot, validator, iconProvider, placeholderController, stepComponentFactory, definitionWalker, services, preferenceStorage, i18n, textWidthMeasurer, state) {
         this.shadowRoot = shadowRoot;
         this.validator = validator;
         this.iconProvider = iconProvider;
@@ -2597,6 +2603,7 @@ class ComponentContext {
         this.services = services;
         this.preferenceStorage = preferenceStorage;
         this.i18n = i18n;
+        this.textWidthMeasurer = textWidthMeasurer;
         this.state = state;
     }
     getViewportScale() {
@@ -3097,16 +3104,16 @@ class DesignerState {
     setSelectedStepId(stepId) {
         if (this.selectedStepId !== stepId) {
             this.selectedStepId = stepId;
-            this.onSelectedStepIdChanged.forward(stepId);
+            this.onSelectedStepIdChanged.emit(stepId);
         }
     }
     pushStepIdToFolderPath(stepId) {
         this.folderPath.push(stepId);
-        this.onFolderPathChanged.forward(this.folderPath);
+        this.onFolderPathChanged.emit(this.folderPath);
     }
     setFolderPath(path) {
         this.folderPath = path;
-        this.onFolderPathChanged.forward(path);
+        this.onFolderPathChanged.emit(path);
     }
     tryGetLastStepIdFromFolderPath() {
         return this.folderPath.length > 0 ? this.folderPath[this.folderPath.length - 1] : null;
@@ -3124,50 +3131,50 @@ class DesignerState {
         if (details) {
             Object.assign(event, details);
         }
-        this.onDefinitionChanged.forward(event);
+        this.onDefinitionChanged.emit(event);
     }
     notifyStepUnselectionBlocked(stepId) {
-        this.onStepUnselectionBlocked.forward(stepId);
+        this.onStepUnselectionBlocked.emit(stepId);
     }
     setViewport(viewport) {
         this.viewport = viewport;
-        this.onViewportChanged.forward(viewport);
+        this.onViewportChanged.emit(viewport);
     }
     setIsReadonly(isReadonly) {
         if (this.isReadonly !== isReadonly) {
             this.isReadonly = isReadonly;
-            this.onIsReadonlyChanged.forward(isReadonly);
+            this.onIsReadonlyChanged.emit(isReadonly);
         }
     }
     setIsDragging(isDragging) {
         if (this.isDragging !== isDragging) {
             this.isDragging = isDragging;
-            this.onIsDraggingChanged.forward(isDragging);
+            this.onIsDraggingChanged.emit(isDragging);
         }
     }
     setIsDragDisabled(isDragDisabled) {
         if (this.isDragDisabled !== isDragDisabled) {
             this.isDragDisabled = isDragDisabled;
-            this.onIsDragDisabledChanged.forward(isDragDisabled);
+            this.onIsDragDisabledChanged.emit(isDragDisabled);
         }
     }
     setIsToolboxCollapsed(isCollapsed) {
         if (this.isToolboxCollapsed !== isCollapsed) {
             this.isToolboxCollapsed = isCollapsed;
-            this.onIsToolboxCollapsedChanged.forward(isCollapsed);
+            this.onIsToolboxCollapsedChanged.emit(isCollapsed);
         }
     }
     setIsEditorCollapsed(isCollapsed) {
         if (this.isEditorCollapsed !== isCollapsed) {
             this.isEditorCollapsed = isCollapsed;
-            this.onIsEditorCollapsedChanged.forward(isCollapsed);
+            this.onIsEditorCollapsedChanged.emit(isCollapsed);
         }
     }
     setPreferences(changes, stepId) {
         for (const change of changes) {
             this.preferenceStorage.setItem(change.key, change.value);
         }
-        this.onPreferencesChanged.forward({ changes, stepId });
+        this.onPreferencesChanged.emit({ changes, stepId });
     }
     getPreference(key) {
         return this.preferenceStorage.getItem(key);
@@ -3317,9 +3324,13 @@ class MemoryPreferenceStorage {
     }
 }
+function measureTextWidth(text) {
+    return text.getBBox().width;
+}
 class DesignerContext {
     static create(placeholder, startDefinition, configuration, services) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         const definition = ObjectCloner.deepClone(startDefinition);
         const layoutController = new LayoutController(placeholder);
         const isReadonly = Boolean(configuration.isReadonly);
@@ -3335,13 +3346,14 @@ class DesignerContext {
         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 textWidthMeasurer = (_g = configuration.textWidthMeasurer) !== null && _g !== void 0 ? _g : measureTextWidth;
         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 componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, services);
+        const componentContext = ComponentContext.create(configuration, state, stepExtensionResolver, placeholderController, definitionWalker, preferenceStorage, i18n, textWidthMeasurer, services);
         return new DesignerContext(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController);
     }
     constructor(theme, state, configuration, services, componentContext, definitionWalker, i18n, uidGenerator, stateModifier, layoutController, workspaceController, placeholderController, behaviorController, customActionController, historyController) {
@@ -4008,7 +4020,7 @@ class Workspace {
             this.view.render(rootSequence.sequence, parentPlaceIndicator);
             this.trySelectStepComponent(this.state.selectedStepId);
             this.updateBadges();
-            this.onRootComponentUpdated.forward();
+            this.onRootComponentUpdated.emit();
         };
         this.onClick = (position, target, buttonIndex, altKey) => {
             const isPrimaryButton = buttonIndex === 0;
@@ -5076,21 +5088,22 @@ class Designer {
         const designerApi = DesignerApi.create(designerContext);
         const view = DesignerView.create(placeholder, designerContext, designerApi);
         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);
+        view.workspace.onRootComponentUpdated.subscribe(designer.onRootComponentUpdated.emit);
+        view.workspace.onRootComponentUpdated.once().then(designer.onReady.emit);
         race(0, designerContext.state.onDefinitionChanged, designerContext.state.onSelectedStepIdChanged).subscribe(([definition, selectedStepId]) => {
             if (definition !== undefined) {
-                designer.onDefinitionChanged.forward(definition);
+                designer.onDefinitionChanged.emit(definition);
             }
             if (selectedStepId !== undefined) {
-                designer.onSelectedStepIdChanged.forward(designerContext.state.selectedStepId);
+                designer.onSelectedStepIdChanged.emit(designerContext.state.selectedStepId);
             }
         });
-        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.forward);
-        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);
+        designerContext.state.onViewportChanged.subscribe(designer.onViewportChanged.emit);
+        designerContext.state.onIsToolboxCollapsedChanged.subscribe(designer.onIsToolboxCollapsedChanged.emit);
+        designerContext.state.onIsEditorCollapsedChanged.subscribe(designer.onIsEditorCollapsedChanged.emit);
+        designerContext.state.onStepUnselectionBlocked.subscribe(designer.onStepUnselectionBlocked.emit);
+        designerContext.state.onIsDraggingChanged.subscribe(designer.onIsDraggingChanged.emit);
+        designerContext.state.onPreferencesChanged.subscribe(designer.onPreferencesChanged.emit);
         return designer;
     }
     constructor(view, state, walker, historyController, api) {
@@ -5131,6 +5144,10 @@ class Designer {
          * @description Fires when the root component and all its children are rerendered.
          */
         this.onRootComponentUpdated = new SimpleEvent();
+        /**
+         * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+         */
+        this.onIsDraggingChanged = new SimpleEvent();
         /**
          * @description Fires when any of the designer preferences has changed.
          */
@@ -5240,6 +5257,12 @@ class Designer {
     isEditorCollapsed() {
         return this.state.isEditorCollapsed;
     }
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging() {
+        return this.state.isDragging;
+    }
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */

package/lib/index.d.ts CHANGED Viewed

@@ -61,7 +61,7 @@ declare class SimpleEvent<T> {
     private readonly listeners;
     subscribe(listener: SimpleEventListener<T>): void;
     unsubscribe(listener: SimpleEventListener<T>): void;
-    readonly forward: (value: T) => void;
+    readonly emit: (value: T) => void;
     count(): number;
     once(): Promise<T>;
 }
@@ -302,8 +302,9 @@ declare class ComponentContext {
     readonly services: Services;
     readonly preferenceStorage: PreferenceStorage;
     readonly i18n: I18n;
+    readonly textWidthMeasurer: TextWidthMeasurer;
     private readonly state;
-    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, placeholderController: PlaceholderController, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, i18n: I18n, services: Services): ComponentContext;
+    static create(configuration: DesignerConfiguration, state: DesignerState, stepExtensionResolver: StepExtensionResolver, placeholderController: PlaceholderController, definitionWalker: DefinitionWalker, preferenceStorage: PreferenceStorage, i18n: I18n, textWidthMeasurer: TextWidthMeasurer, services: Services): ComponentContext;
     private constructor();
     getViewportScale(): number;
 }
@@ -592,7 +593,7 @@ declare class LabelView {
     readonly g: SVGGElement;
     readonly width: number;
     readonly height: number;
-    static create(parent: SVGElement, y: number, cfg: LabelViewConfiguration, text: string, theme: 'primary' | 'secondary'): LabelView;
+    static create(parent: SVGElement, y: number, cfg: LabelViewConfiguration, text: string, theme: 'primary' | 'secondary', textWidthMeasurer: TextWidthMeasurer): LabelView;
     constructor(g: SVGGElement, width: number, height: number);
 }
@@ -873,6 +874,7 @@ interface StepExtension<S extends Step = Step> {
 type StepComponentViewFactory = StepExtension['createComponentView'];
 interface StepComponentViewContext {
     i18n: I18n;
+    textWidthMeasurer: TextWidthMeasurer;
     getStepName(): string;
     getStepIconUrl(): string | null;
     createStepComponent(parentElement: SVGElement, parentSequence: Sequence, step: Step, position: number): StepComponent;
@@ -1094,6 +1096,10 @@ interface DesignerConfiguration<TDefinition extends Definition = Definition> {
      * @description Custom translation function.
      */
     i18n?: I18n;
+    /**
+     * @description Custom text width measurer. By default, the designer uses `getBBox()` method to measure the width of the text.
+     */
+    textWidthMeasurer?: TextWidthMeasurer;
     /**
      * @description Pass the shadow root of the shadow root to the designer if the designer is placed inside the shadow DOM.
      */
@@ -1149,6 +1155,7 @@ interface PreferenceStorage {
     setItem(key: string, value: string): void;
     getItem(key: string): string | null;
 }
+type TextWidthMeasurer = (text: SVGTextElement) => number;
 interface StepsConfiguration {
     isSelectable?: (step: Step, parentSequence: Sequence) => boolean;
     isDraggable?: (step: Step, parentSequence: Sequence) => boolean;
@@ -1391,6 +1398,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @description Fires when the root component and all its children are rerendered.
      */
     readonly onRootComponentUpdated: SimpleEvent<void>;
+    /**
+     * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`.
+     */
+    readonly onIsDraggingChanged: SimpleEvent<boolean>;
     /**
      * @description Fires when any of the designer preferences has changed.
      */
@@ -1464,6 +1475,10 @@ declare class Designer<TDefinition extends Definition = Definition> {
      * @returns a flag that indicates whether the editor is collapsed.
      */
     isEditorCollapsed(): boolean;
+    /**
+     * @returns a flag that indicates whether the step is being dragged.
+     */
+    isDragging(): boolean;
     /**
      * @description Sets a flag that indicates whether the editor is collapsed.
      */
@@ -1494,4 +1509,4 @@ declare class Designer<TDefinition extends Definition = Definition> {
 }
 export { Badges, CenteredViewportCalculator, ClassicWheelControllerExtension, ClickCommandType, ComponentContext, ComponentDom, ControlBarApi, CustomActionController, DefaultRegionComponentViewExtension, DefaultRegionView, DefaultSequenceComponent, DefaultSequenceComponentView, DefaultViewportController, DefaultViewportControllerDesignerExtension, DefaultViewportControllerExtension, DefinitionChangeType, Designer, DesignerApi, DesignerContext, DesignerState, Dom, Editor, EditorApi, Icons, InputView, JoinView, KeyboardAction, LabelView, LineGridDesignerExtension, ObjectCloner, OutputView, PathBarApi, PlaceholderController, PlaceholderDirection, PlaceholderGapOrientation, RectPlaceholder, RectPlaceholderDesignerExtension, RectPlaceholderView, SelectStepBehaviorEndToken, ServicesResolver, SimpleEvent, StartStopRootComponentDesignerExtension, StartStopRootComponentExtension, StepComponent, StepExtensionResolver, StepsDesignerExtension, TYPE, ToolboxApi, Uid, ValidationErrorBadgeExtension, Vector, ViewportApi, WorkspaceApi, createContainerStepComponentViewFactory, createLaunchPadStepComponentViewFactory, createSwitchStepComponentViewFactory, createTaskStepComponentViewFactory, getAbsolutePosition, race };
-export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, BranchNameLabelResolver, BranchNamesResolver, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DefinitionChangedEventDetails, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, DuplicatedStepId, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LaunchPadStepComponentViewConfiguration, LaunchPadStepExtensionConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderConfiguration, PlaceholderExtension, PlaceholderView, PreferenceChange, PreferenceStorage, PreferencesChangedEvent, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SetPreferencesClickCommand, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };
+export type { Attributes, Badge, BadgeExtension, BadgeView, BadgesDecorator, BadgesResult, BaseClickCommand, Behavior, BehaviorEndToken, BranchNameLabelResolver, BranchNamesResolver, ClickBehaviorWrapper, ClickBehaviorWrapperExtension, ClickCommand, ClickDetails, Component, ComponentView, ContainerStepComponentViewConfiguration, ContainerStepExtensionConfiguration, ContextMenuExtension, ContextMenuItem, ContextMenuItemsProvider, CustomAction, CustomActionHandler, CustomActionHandlerContext, Daemon, DaemonExtension, DefaultViewportControllerConfiguration, DefaultViewportControllerExtensionConfiguration, DefinitionChangedEvent, DefinitionChangedEventDetails, DesignerConfiguration, DesignerExtension, DraggedComponent, DraggedComponentExtension, DuplicatedStepId, EditorsConfiguration, FoundPlaceholders, Grid, GridExtension, I18n, KeyboardConfiguration, LaunchPadStepComponentViewConfiguration, LaunchPadStepExtensionConfiguration, LineGridConfiguration, NextScale, OpenFolderClickCommand, Placeholder, PlaceholderConfiguration, PlaceholderExtension, PlaceholderView, PreferenceChange, PreferenceStorage, PreferencesChangedEvent, RectPlaceholderConfiguration, RegionComponentViewContentFactory, RegionComponentViewExtension, RegionView, RegionViewFactory, RootComponentExtension, RootEditorContext, RootEditorProvider, RootValidator, SelectStepClickCommand, SelectedStepIdProvider, SequenceComponent, SequenceComponentExtension, SequenceContext, SequencePlaceIndicator, Services, SetPreferencesClickCommand, SimpleEventListener, StartStopRootComponentExtensionConfiguration, StartStopRootComponentViewConfiguration, StateModifierDependency, StepBadgesDecoratorExtension, StepComponentView, StepComponentViewContext, StepComponentViewFactory, StepComponentViewWrapperExtension, StepContext, StepDefinition, StepDescriptionProvider, StepEditorContext, StepEditorProvider, StepExtension, StepIconUrlProvider, StepLabelProvider, StepValidator, StepsConfiguration, StepsDesignerExtensionConfiguration, SwitchStepComponentViewConfiguration, SwitchStepExtensionConfiguration, TaskStepComponentViewConfiguration, TaskStepExtensionConfiguration, TextWidthMeasurer, ToolboxConfiguration, ToolboxGroupConfiguration, TriggerCustomActionClickCommand, UiComponent, UiComponentExtension, UidGenerator, UndoStack, UndoStackItem, ValidationErrorBadgeExtensionConfiguration, ValidationErrorBadgeViewConfiguration, ValidatorConfiguration, Viewport, ViewportController, ViewportControllerExtension, WheelController, WheelControllerExtension, WorkspaceRootSequence };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "sequential-workflow-designer",
 	"description": "Customizable no-code component for building flow-based programming applications.",
-	"version": "0.37.3",
+	"version": "0.38.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",