From 3d34469af2e6742647c4521024895d1dc9c6a700 Mon Sep 17 00:00:00 2001 From: b4rtaz Date: Sat, 25 Oct 2025 11:29:09 +0200 Subject: [PATCH 1/2] 0.34.1. --- CHANGELOG.md | 4 +++ README.md | 8 ++--- angular/designer/package.json | 4 +-- demos/angular-app/package.json | 4 +-- demos/angular-app/yarn.lock | 16 ++++----- demos/react-app/package.json | 4 +-- demos/svelte-app/package.json | 4 +-- designer/package.json | 2 +- designer/src/api/viewport-api.ts | 7 +++- designer/src/designer-extension.ts | 2 +- ...ainer-step-component-view-configuration.ts | 5 +++ .../container-step-component-view.spec.ts | 1 + .../container-step-component-view.ts | 11 ++++-- .../container-step-extension.ts | 1 + ...witch-step-component-view-configuration.ts | 4 +++ .../switch-step-component-view.spec.ts | 1 + .../switch-step/switch-step-component-view.ts | 34 ++++++++++++------- .../switch-step/switch-step-extension.ts | 1 + examples/assets/lib.js | 2 +- react/package.json | 6 ++-- scripts/publish.sh | 2 ++ svelte/package.json | 6 ++-- 22 files changed, 83 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0c5e4c61..39dbfe07 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.34.0 + +This version adds the ability to configure whether the regions of the switch step component and the container step component are clickable. By default, these regions are clickable; when disabled, the components can only be dragged by their labels or icons. + # 0.33.1 This version fixes a bug with the rendering of the `drop-shadow` filter in some browsers. diff --git a/README.md b/README.md index 246fe379..19d4af14 100644 --- a/README.md +++ b/README.md @@ -106,10 +106,10 @@ Add the below code to your head section in HTML document. ```html ... - - - - + + + + ``` Call the designer by: diff --git a/angular/designer/package.json b/angular/designer/package.json index 18bde89b..5f950713 100644 --- a/angular/designer/package.json +++ b/angular/designer/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-angular", "description": "Angular wrapper for Sequential Workflow Designer component.", - "version": "0.33.1", + "version": "0.34.1", "author": { "name": "NoCode JS", "url": "https://nocode-js.com/" @@ -15,7 +15,7 @@ "peerDependencies": { "@angular/common": "12 - 19", "@angular/core": "12 - 19", - "sequential-workflow-designer": "^0.33.1" + "sequential-workflow-designer": "^0.34.1" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 809b0256..56b7644f 100644 --- a/demos/angular-app/package.json +++ b/demos/angular-app/package.json @@ -26,8 +26,8 @@ "@angular/platform-browser-dynamic": "^17.3.9", "@angular/router": "^17.3.9", "rxjs": "~7.8.0", - "sequential-workflow-designer": "^0.33.1", - "sequential-workflow-designer-angular": "^0.33.1", + "sequential-workflow-designer": "^0.34.1", + "sequential-workflow-designer-angular": "^0.34.1", "tslib": "^2.3.0", "zone.js": "~0.14.6" }, diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock index c9c2fa4a..1bb62d1f 100644 --- a/demos/angular-app/yarn.lock +++ b/demos/angular-app/yarn.lock @@ -6744,17 +6744,17 @@ send@0.18.0: range-parser "~1.2.1" statuses "2.0.1" -sequential-workflow-designer-angular@^0.33.1: - version "0.33.1" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.33.1.tgz#7f2db4a4cd510c2ed75607442cb86bc046f8ec17" - integrity sha512-3rYJtKZJ9V/JFOxZ8r22L7wFE2ZuiX/rlE+wguzTyrqxCI+fjRQyLT1NKDnuFU2pxbCyz0mMVfOpBN2DBb59UQ== +sequential-workflow-designer-angular@^0.34.1: + version "0.34.1" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.34.1.tgz#f10aa52db9be0268cb869cb582165292a78e5af3" + integrity sha512-0nOuT4L7k1PPeFQP2XMZxq7XKNDumqSEj3natQfaB/+PuOPE4Dy2hfD552sw7MNTdPRkMzlIPA7JmYdpq5AZbw== dependencies: tslib "^2.3.0" -sequential-workflow-designer@^0.33.1: - version "0.33.1" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.33.1.tgz#227e99cf468d8ecc315d8e200f8ebba3c790c494" - integrity sha512-snozputiOUFuv3Zw2ilpksqjI5rSvEVk/8Y704u7K2uKL7q5xpXCcxkBUQCzQIrDMa9/3jwqgKhKPG9PzJk20w== +sequential-workflow-designer@^0.34.1: + version "0.34.1" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.34.1.tgz#08f9d15ac467f743a5ccae3ef64dea99922b86ea" + integrity sha512-pvb3sBh1ARNtB+jjeVfrH98QtKXhgff91lPkkJkwlyMHTVoKly1CJxtUb3ADCcY5mze0Zv88GI3Eoz8jATyg2Q== dependencies: sequential-workflow-model "^0.2.0" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index cffe001e..5da111ad 100644 --- a/demos/react-app/package.json +++ b/demos/react-app/package.json @@ -6,8 +6,8 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.33.1", - "sequential-workflow-designer-react": "^0.33.1" + "sequential-workflow-designer": "^0.34.1", + "sequential-workflow-designer-react": "^0.34.1" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index df873ecc..7ff3711d 100644 --- a/demos/svelte-app/package.json +++ b/demos/svelte-app/package.json @@ -16,8 +16,8 @@ "eslint": "eslint ./src --ext .ts" }, "dependencies": { - "sequential-workflow-designer": "^0.33.1", - "sequential-workflow-designer-svelte": "^0.33.1" + "sequential-workflow-designer": "^0.34.1", + "sequential-workflow-designer-svelte": "^0.34.1" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index 8de7e6a1..902dc727 100644 --- a/designer/package.json +++ b/designer/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer", "description": "Customizable no-code component for building flow-based programming applications.", - "version": "0.33.1", + "version": "0.34.1", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/api/viewport-api.ts b/designer/src/api/viewport-api.ts index feaa403d..5d76cdd9 100644 --- a/designer/src/api/viewport-api.ts +++ b/designer/src/api/viewport-api.ts @@ -38,7 +38,12 @@ export class ViewportApi { const componentPosition = clientPosition.subtract(canvasPosition); const componentSize = new Vector(component.view.width, component.view.height); - const viewport = this.viewportController.getFocusedOnComponent(componentPosition, componentSize); + const viewport = this.viewportController.getFocusedOnComponent( + componentPosition, + componentSize, + component.step.componentType, + component.view.g + ); this.animator.execute(viewport); } diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts index 58449a3f..d0fba996 100644 --- a/designer/src/designer-extension.ts +++ b/designer/src/designer-extension.ts @@ -241,7 +241,7 @@ export interface ViewportController { smoothDeltaYLimit: number; getDefault(): Viewport; getZoomed(direction: boolean): Viewport | null; - getFocusedOnComponent(componentPosition: Vector, componentSize: Vector): Viewport; + getFocusedOnComponent(componentPosition: Vector, componentSize: Vector, componentType: string, componentElement: SVGElement): Viewport; getNextScale(scale: number, direction: boolean): NextScale; limitScale(scale: number): number; } diff --git a/designer/src/workspace/container-step/container-step-component-view-configuration.ts b/designer/src/workspace/container-step/container-step-component-view-configuration.ts index a4e3775f..2c30d6e7 100644 --- a/designer/src/workspace/container-step/container-step-component-view-configuration.ts +++ b/designer/src/workspace/container-step/container-step-component-view-configuration.ts @@ -8,4 +8,9 @@ export interface ContainerStepComponentViewConfiguration { inputIconSize: number; autoHideInputOnDrag: boolean; label: LabelViewConfiguration; + + /** + * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable. + */ + isRegionClickable: boolean; } diff --git a/designer/src/workspace/container-step/container-step-component-view.spec.ts b/designer/src/workspace/container-step/container-step-component-view.spec.ts index 9ca38cde..006d44c5 100644 --- a/designer/src/workspace/container-step/container-step-component-view.spec.ts +++ b/designer/src/workspace/container-step/container-step-component-view.spec.ts @@ -34,6 +34,7 @@ describe('ContainerStepComponentView', () => { inputSize: 14, inputRadius: 4, autoHideInputOnDrag: true, + isRegionClickable: true, paddingTop: 20, paddingX: 20, label: { diff --git a/designer/src/workspace/container-step/container-step-component-view.ts b/designer/src/workspace/container-step/container-step-component-view.ts index 553be8b1..861ec007 100644 --- a/designer/src/workspace/container-step/container-step-component-view.ts +++ b/designer/src/workspace/container-step/container-step-component-view.ts @@ -54,11 +54,16 @@ export const createContainerStepComponentViewFactory = return regionView.getClientPosition(); }, resolveClick(click: ClickDetails): true | ClickCommand | null { - const result = regionView.resolveClick(click); - return result === true || (result === null && g.contains(click.element)) ? true : result; + if (cfg.isRegionClickable) { + const result = regionView.resolveClick(click); + if (result !== null) { + return result; + } + } + return labelView.g.contains(click.element) || (inputView && inputView.g.contains(click.element)) ? true : null; }, setIsDragging(isDragging: boolean) { - if (cfg.autoHideInputOnDrag && inputView) { + if (inputView && cfg.autoHideInputOnDrag) { inputView.setIsHidden(isDragging); } }, diff --git a/designer/src/workspace/container-step/container-step-extension.ts b/designer/src/workspace/container-step/container-step-extension.ts index 25dce925..386520cb 100644 --- a/designer/src/workspace/container-step/container-step-extension.ts +++ b/designer/src/workspace/container-step/container-step-extension.ts @@ -11,6 +11,7 @@ const defaultConfiguration: ContainerStepExtensionConfiguration = { inputRadius: 4, inputIconSize: 14, autoHideInputOnDrag: true, + isRegionClickable: true, label: { height: 22, paddingX: 10, diff --git a/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts b/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts index 3baf4e1a..712e0fad 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts +++ b/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts @@ -18,6 +18,10 @@ export interface SwitchStepComponentViewConfiguration { noBranchPaddingBottom: number; inputSize: number; inputIconSize: number; + /** + * If `true`, the entire region of the switch step is clickable; otherwise, only the labels and icon are clickable. + */ + isRegionClickable: boolean; autoHideInputOnDrag: boolean; inputRadius: number; nameLabel: LabelViewConfiguration; diff --git a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts b/designer/src/workspace/switch-step/switch-step-component-view.spec.ts index 90bb07b6..0f78dbef 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts +++ b/designer/src/workspace/switch-step/switch-step-component-view.spec.ts @@ -50,6 +50,7 @@ describe('SwitchStepComponentView', () => { inputIconSize: 14, inputRadius: 4, autoHideInputOnDrag: true, + isRegionClickable: true, branchNameLabel: labelViewCfg, nameLabel: labelViewCfg }, diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts index 4146a761..aad6dd86 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view.ts +++ b/designer/src/workspace/switch-step/switch-step-component-view.ts @@ -18,6 +18,7 @@ function createView( joinX: number, viewContext: StepComponentViewContext, sequenceComponents: SequenceComponent[] | null, + labelViews: LabelView[], regionView: RegionView, cfg: SwitchStepComponentViewConfiguration ): StepComponentView { @@ -40,11 +41,16 @@ function createView( return regionView.getClientPosition(); }, resolveClick(click: ClickDetails): true | ClickCommand | null { - const result = regionView.resolveClick(click); - return result === true || (result === null && g.contains(click.element)) ? true : result; + if (cfg.isRegionClickable) { + const result = regionView.resolveClick(click); + if (result !== null) { + return result; + } + } + return labelViews.some(v => v.g.contains(click.element) || (inputView && inputView.g.contains(click.element))) ? true : null; }, setIsDragging(isDragging: boolean) { - if (cfg.autoHideInputOnDrag && inputView) { + if (inputView && cfg.autoHideInputOnDrag) { inputView.setIsHidden(isDragging); } }, @@ -77,16 +83,18 @@ export const createSwitchStepComponentViewFactory = Dom.translate(nameLabelView.g, joinX, 0); JoinView.createStraightJoin(g, new Vector(joinX, 0), height); - return createView(g, width, height, joinX, viewContext, null, regionView, cfg); + return createView(g, width, height, joinX, viewContext, null, [nameLabelView], regionView, cfg); } - const branchComponents: SequenceComponent[] = []; - const branchLabelViews: LabelView[] = []; - const branchSizes: BranchSize[] = []; + const branchComponents = new Array(branchNames.length); + const branchSizes = new Array(branchNames.length); + const labelViews = new Array(branchNames.length + 1); + labelViews[branchNames.length] = nameLabelView; + let totalBranchesWidth = 0; let maxBranchesHeight = 0; - branchNames.forEach(branchName => { + branchNames.forEach((branchName, i) => { const labelY = paddingTop + cfg.nameLabel.height + cfg.connectionHeight; const translatedBranchName = viewContext.i18n(`stepComponent.${step.type}.branchName`, branchName); const labelView = LabelView.create(g, labelY, cfg.branchNameLabel, translatedBranchName, 'secondary'); @@ -106,9 +114,9 @@ export const createSwitchStepComponentViewFactory = totalBranchesWidth += width; maxBranchesHeight = Math.max(maxBranchesHeight, component.view.height); - branchComponents.push(component); - branchLabelViews.push(labelView); - branchSizes.push({ width, branchOffsetLeft, offsetX, joinX }); + branchComponents[i] = component; + branchSizes[i] = { width, branchOffsetLeft, offsetX, joinX }; + labelViews[i] = labelView; }); const centerBranchIndex = Math.floor(branchNames.length / 2); @@ -135,7 +143,7 @@ export const createSwitchStepComponentViewFactory = const branchSize = branchSizes[i]; const branchOffsetLeft = switchOffsetLeft + branchSize.offsetX + branchSize.branchOffsetLeft; - Dom.translate(branchLabelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0); + Dom.translate(labelViews[i].g, switchOffsetLeft + branchSize.offsetX + branchSize.joinX, 0); Dom.translate(component.view.g, branchOffsetLeft, branchOffsetTop); if (component.hasOutput && stepContext.isOutputConnected) { @@ -183,7 +191,7 @@ export const createSwitchStepComponentViewFactory = regions[regions.length - 1] += switchOffsetRight; const regionView = regionViewBuilder(g, regions, viewHeight); - return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, regionView, cfg); + return createView(g, viewWidth, viewHeight, shiftedJoinX, viewContext, branchComponents, labelViews, regionView, cfg); }); }; diff --git a/designer/src/workspace/switch-step/switch-step-extension.ts b/designer/src/workspace/switch-step/switch-step-extension.ts index a1040b89..08bea100 100644 --- a/designer/src/workspace/switch-step/switch-step-extension.ts +++ b/designer/src/workspace/switch-step/switch-step-extension.ts @@ -15,6 +15,7 @@ const defaultViewConfiguration: SwitchStepComponentViewConfiguration = { inputIconSize: 14, inputRadius: 4, autoHideInputOnDrag: true, + isRegionClickable: true, branchNameLabel: { height: 22, paddingX: 10, diff --git a/examples/assets/lib.js b/examples/assets/lib.js index 8b46b477..82bd47e5 100644 --- a/examples/assets/lib.js +++ b/examples/assets/lib.js @@ -13,7 +13,7 @@ function embedStylesheet(url) { document.write(``); } -const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.33.1'; +const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/react/package.json b/react/package.json index ef1c2c86..7b403489 100644 --- a/react/package.json +++ b/react/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-react", "description": "React wrapper for Sequential Workflow Designer component.", - "version": "0.33.1", + "version": "0.34.1", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", @@ -47,7 +47,7 @@ "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", - "sequential-workflow-designer": "^0.33.1" + "sequential-workflow-designer": "^0.34.1" }, "devDependencies": { "@rollup/plugin-node-resolve": "^16.0.1", @@ -63,7 +63,7 @@ "prettier": "^3.2.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.33.1", + "sequential-workflow-designer": "^0.34.1", "rollup": "^4.40.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-typescript2": "^0.36.0", diff --git a/scripts/publish.sh b/scripts/publish.sh index 7dab8fb2..5e3605ca 100644 --- a/scripts/publish.sh +++ b/scripts/publish.sh @@ -1,5 +1,7 @@ #!/bin/bash +set -e + cd "$(dirname "${BASH_SOURCE[0]}")" cd ../designer diff --git a/svelte/package.json b/svelte/package.json index df2282e6..d9df3736 100644 --- a/svelte/package.json +++ b/svelte/package.json @@ -1,7 +1,7 @@ { "name": "sequential-workflow-designer-svelte", "description": "Svelte wrapper for Sequential Workflow Designer component.", - "version": "0.33.1", + "version": "0.34.1", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.33.1" + "sequential-workflow-designer": "^0.34.1" }, "devDependencies": { - "sequential-workflow-designer": "^0.33.1", + "sequential-workflow-designer": "^0.34.1", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0", From 7a497bb5e31d46df3a83e69c2ae7de6c614d53d3 Mon Sep 17 00:00:00 2001 From: b4rtaz Date: Sat, 25 Oct 2025 11:29:36 +0200 Subject: [PATCH 2/2] fix: changelog. --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 39dbfe07..0183bd9e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,4 @@ -# 0.34.0 +# 0.34.1 This version adds the ability to configure whether the regions of the switch step component and the container step component are clickable. By default, these regions are clickable; when disabled, the components can only be dragged by their labels or icons.