From e3cf177afafdfd7d771376af18e943aea758b50b Mon Sep 17 00:00:00 2001 From: b4rtaz Date: Thu, 16 Oct 2025 00:25:18 +0200 Subject: [PATCH] 0.32.0. --- 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 +- .../behaviors/default-dragged-component.ts | 2 +- .../behaviors/drag-step-behavior-view.spec.ts | 4 +-- .../src/behaviors/drag-step-behavior-view.ts | 4 +-- designer/src/behaviors/drag-step-behavior.ts | 35 ++++++++++--------- designer/src/designer-extension.ts | 2 +- examples/assets/lib.js | 2 +- react/package.json | 6 ++-- svelte/package.json | 6 ++-- 16 files changed, 56 insertions(+), 51 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0df47d2b..59b8cdb4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.32.0 + +This introduces internal changes related to the dragged component. + # 0.31.0 This version introduces a new feature: you can now add a custom icon to placeholders that appear while dragging a step. diff --git a/README.md b/README.md index 1db14803..c26fdf8f 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 9c1562e9..354f1a60 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.31.0", + "version": "0.32.0", "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.31.0" + "sequential-workflow-designer": "^0.32.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 18c21be5..d7d078ef 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.31.0", - "sequential-workflow-designer-angular": "^0.31.0", + "sequential-workflow-designer": "^0.32.0", + "sequential-workflow-designer-angular": "^0.32.0", "tslib": "^2.3.0", "zone.js": "~0.14.6" }, diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock index 8c4d624c..613d7fa3 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.31.0: - version "0.31.0" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.31.0.tgz#c8cabbcd1efa54ad546419a06c2e06c896a21995" - integrity sha512-BM3MxNmca5l0tGp7ILWkXbXZPRhPdCDWEiqAtQ8YQ17PCM1SC+A9NXnKqS/Wy3hspDyF8x30TAe6RNbdd45TsQ== +sequential-workflow-designer-angular@^0.32.0: + version "0.32.0" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.32.0.tgz#4347f0ce4a161484bb97d9ab73ed24298e3095d5" + integrity sha512-NamicpEsIOSWCdLUozyUIWJzi9Q6tpbJbO4OiK0VXpK86oLBKKVmejdufIqjB/Z6EkPFAkg0KTKURaZSzSt+0A== dependencies: tslib "^2.3.0" -sequential-workflow-designer@^0.31.0: - version "0.31.0" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.31.0.tgz#0caf70148c99425fe1fdfd1f59af0727f472337c" - integrity sha512-M1mPf79u5swztIbUf+Pjln4Jro8iUHA0mZc9EUwsZPi9o/MFz3w/YYiYndf385U1kqTrlXHrhB8NkugVthonBg== +sequential-workflow-designer@^0.32.0: + version "0.32.0" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.32.0.tgz#176b763f09d603c10f1455339d0ba19943d0c483" + integrity sha512-11aAfRN2vhD0FLmJDGZeVgozT3l41O8sJ6sHPmFvkoNmxW1/VezU9RAaOMuF2t/jQMACxe+dj9++sTkmrooOyA== dependencies: sequential-workflow-model "^0.2.0" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index a312d839..61257693 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.31.0", - "sequential-workflow-designer-react": "^0.31.0" + "sequential-workflow-designer": "^0.32.0", + "sequential-workflow-designer-react": "^0.32.0" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 1629b9e1..5f677b38 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.31.0", - "sequential-workflow-designer-svelte": "^0.31.0" + "sequential-workflow-designer": "^0.32.0", + "sequential-workflow-designer-svelte": "^0.32.0" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index 1136f3fe..202ce65e 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.31.0", + "version": "0.32.0", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/behaviors/default-dragged-component.ts b/designer/src/behaviors/default-dragged-component.ts index 805bbf54..f3a73e88 100644 --- a/designer/src/behaviors/default-dragged-component.ts +++ b/designer/src/behaviors/default-dragged-component.ts @@ -6,7 +6,7 @@ import { DraggedComponent, StepContext } from '../designer-extension'; const SAFE_OFFSET = 10; export class DefaultDraggedComponent implements DraggedComponent { - public static create(parent: HTMLElement, step: Step, componentContext: ComponentContext): DefaultDraggedComponent { + public static create(parent: HTMLElement, step: Step, _: boolean, componentContext: ComponentContext): DefaultDraggedComponent { const canvas = Dom.svg('svg'); canvas.style.marginLeft = -SAFE_OFFSET + 'px'; canvas.style.marginTop = -SAFE_OFFSET + 'px'; diff --git a/designer/src/behaviors/drag-step-behavior-view.spec.ts b/designer/src/behaviors/drag-step-behavior-view.spec.ts index 7a15d6b5..fe983a5c 100644 --- a/designer/src/behaviors/drag-step-behavior-view.spec.ts +++ b/designer/src/behaviors/drag-step-behavior-view.spec.ts @@ -15,7 +15,7 @@ describe('DragStepView', () => { const step = createStepStub(); const componentContext = createComponentContextStub(); - const component = DragStepView.create(step, 'light', componentContext); + const component = DragStepView.create(step, false, 'light', componentContext); expect(component).toBeDefined(); expect(appendChildSpy).toHaveBeenCalled(); @@ -43,7 +43,7 @@ describe('DragStepView', () => { const createForGapSpy = spyOn(componentContext.services.placeholder, 'createForGap').and.callThrough(); const createForAreaSpy = spyOn(componentContext.services.placeholder, 'createForArea').and.callThrough(); - const component = DragStepView.create(step, 'light', componentContext); + const component = DragStepView.create(step, false, 'light', componentContext); expect(component).toBeDefined(); expect(appendChildSpy).toHaveBeenCalled(); diff --git a/designer/src/behaviors/drag-step-behavior-view.ts b/designer/src/behaviors/drag-step-behavior-view.ts index 2d47a489..05666ca3 100644 --- a/designer/src/behaviors/drag-step-behavior-view.ts +++ b/designer/src/behaviors/drag-step-behavior-view.ts @@ -5,14 +5,14 @@ import { ComponentContext } from '../component-context'; import { DraggedComponent } from '../designer-extension'; export class DragStepView { - public static create(step: Step, theme: string, componentContext: ComponentContext): DragStepView { + public static create(step: Step, isAttached: boolean, theme: string, componentContext: ComponentContext): DragStepView { const body = componentContext.shadowRoot ?? document.body; const layer = Dom.element('div', { class: `sqd-drag sqd-theme-${theme}` }); body.appendChild(layer); - const component = componentContext.services.draggedComponent.create(layer, step, componentContext); + const component = componentContext.services.draggedComponent.create(layer, step, isAttached, componentContext); return new DragStepView(component, layer, body); } diff --git a/designer/src/behaviors/drag-step-behavior.ts b/designer/src/behaviors/drag-step-behavior.ts index 41a22d1e..e4faebd0 100644 --- a/designer/src/behaviors/drag-step-behavior.ts +++ b/designer/src/behaviors/drag-step-behavior.ts @@ -12,8 +12,9 @@ import { StepComponent } from '../workspace/step-component'; import { PlaceholderController } from '../workspace/placeholder/placeholder-controller'; export class DragStepBehavior implements Behavior { - public static create(designerContext: DesignerContext, step: Step, draggedStepComponent?: StepComponent): DragStepBehavior { - const view = DragStepView.create(step, designerContext.theme, designerContext.componentContext); + public static create(designerContext: DesignerContext, step: Step, attachedStepComponent?: StepComponent): DragStepBehavior { + const isAttached = Boolean(attachedStepComponent); + const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext); return new DragStepBehavior( view, designerContext.workspaceController, @@ -21,7 +22,7 @@ export class DragStepBehavior implements Behavior { designerContext.state, step, designerContext.stateModifier, - draggedStepComponent + attachedStepComponent ); } @@ -39,22 +40,22 @@ export class DragStepBehavior implements Behavior { private readonly designerState: DesignerState, private readonly step: Step, private readonly stateModifier: StateModifier, - private readonly draggedStepComponent?: StepComponent + private readonly attachedStepComponent?: StepComponent ) {} public onStart(position: Vector) { let offset: Vector | null = null; - if (this.draggedStepComponent) { - this.draggedStepComponent.setIsDisabled(true); - this.draggedStepComponent.setIsDragging(true); + if (this.attachedStepComponent) { + this.attachedStepComponent.setIsDisabled(true); + this.attachedStepComponent.setIsDragging(true); const hasSameSize = - this.draggedStepComponent.view.width === this.view.component.width && - this.draggedStepComponent.view.height === this.view.component.height; + this.attachedStepComponent.view.width === this.view.component.width && + this.attachedStepComponent.view.height === this.view.component.height; if (hasSameSize) { // Mouse cursor will be positioned on the same place as the source component. - const pagePosition = this.draggedStepComponent.view.getClientPosition(); + const pagePosition = this.attachedStepComponent.view.getClientPosition(); offset = position.subtract(pagePosition); } } @@ -66,7 +67,7 @@ export class DragStepBehavior implements Behavior { this.view.setPosition(position.subtract(offset)); this.designerState.setIsDragging(true); - const { placeholders, components } = this.resolvePlaceholders(this.draggedStepComponent); + const { placeholders, components } = this.resolvePlaceholders(this.attachedStepComponent); this.state = { placeholders, components, @@ -114,10 +115,10 @@ export class DragStepBehavior implements Behavior { let modified = false; if (!interrupt && this.currentPlaceholder) { - if (this.draggedStepComponent) { + if (this.attachedStepComponent) { modified = this.stateModifier.tryMove( - this.draggedStepComponent.parentSequence, - this.draggedStepComponent.step, + this.attachedStepComponent.parentSequence, + this.attachedStepComponent.step, this.currentPlaceholder.parentSequence, this.currentPlaceholder.index ); @@ -126,9 +127,9 @@ export class DragStepBehavior implements Behavior { } } if (!modified) { - if (this.draggedStepComponent) { - this.draggedStepComponent.setIsDisabled(false); - this.draggedStepComponent.setIsDragging(false); + if (this.attachedStepComponent) { + this.attachedStepComponent.setIsDisabled(false); + this.attachedStepComponent.setIsDragging(false); } if (this.currentPlaceholder) { this.currentPlaceholder.setIsHover(false); diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts index 4cb1cebe..58449a3f 100644 --- a/designer/src/designer-extension.ts +++ b/designer/src/designer-extension.ts @@ -153,7 +153,7 @@ export interface UiComponent { // DraggedComponentExtension export interface DraggedComponentExtension { - create(parentElement: HTMLElement, step: Step, componentContext: ComponentContext): DraggedComponent; + create(parentElement: HTMLElement, step: Step, isAttached: boolean, componentContext: ComponentContext): DraggedComponent; } export interface DraggedComponent { diff --git a/examples/assets/lib.js b/examples/assets/lib.js index ec1314b1..9b63e6af 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.31.0'; +const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.32.0'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/react/package.json b/react/package.json index c059a332..e7fcea22 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.31.0", + "version": "0.32.0", "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.31.0" + "sequential-workflow-designer": "^0.32.0" }, "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.31.0", + "sequential-workflow-designer": "^0.32.0", "rollup": "^4.40.0", "rollup-plugin-dts": "^6.2.1", "rollup-plugin-typescript2": "^0.36.0", diff --git a/svelte/package.json b/svelte/package.json index ac52c9ae..eb352923 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.31.0", + "version": "0.32.0", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.31.0" + "sequential-workflow-designer": "^0.32.0" }, "devDependencies": { - "sequential-workflow-designer": "^0.31.0", + "sequential-workflow-designer": "^0.32.0", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",