diff --git a/CHANGELOG.md b/CHANGELOG.md index eec787e..ef02da9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.37.4 + +This version adds a new event: `onIsDraggingChanged`. This event is triggered when the dragging state of the designer changes. Additionally, the `Designer` class now includes the `isDragging()` method, which allows you to check if the designer is currently in a dragging state. + # 0.37.3 Added support for Angular 21. diff --git a/README.md b/README.md index 234ddbd..1a882b6 100644 --- a/README.md +++ b/README.md @@ -107,10 +107,10 @@ Add the below code to your head section in HTML document. ```html ... - - - - + + + + ``` diff --git a/angular/designer/package.json b/angular/designer/package.json index 7bf1d21..c60f986 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.37.3", + "version": "0.37.4", "author": { "name": "NoCode JS", "url": "https://nocode-js.com/" @@ -15,7 +15,7 @@ "peerDependencies": { "@angular/common": "12 - 21", "@angular/core": "12 - 21", - "sequential-workflow-designer": "^0.37.3" + "sequential-workflow-designer": "^0.37.4" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index db31628..b657547 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.37.3", - "sequential-workflow-designer-angular": "^0.37.3", + "sequential-workflow-designer": "^0.37.4", + "sequential-workflow-designer-angular": "^0.37.4", "tslib": "^2.3.0", "zone.js": "~0.14.6" }, diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock index da968db..7a7ef94 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.37.2: - version "0.37.2" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.2.tgz#a40d34f6f869358101b9d46e3c7d10580ef4936e" - integrity sha512-TFz+3qVjIFpQxk0O9su2EpcnebpohmZsdMTag76+7AP6GPD1pLQbTRVuXDATmlj5S+1aVil7VFqE0GNQ0IxSWg== +sequential-workflow-designer-angular@^0.37.4: + version "0.37.4" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.37.4.tgz#453290f1ec02fa5d22a75a044713a5c33bd6d27c" + integrity sha512-Q4rQi2vhDQK/wVkmTBNX6ldLkT8GN9qdyYTnvgsGVjtZxcF9qqwToLeMoAXidDP0qjvd0In27K6TDMfjgMsYyw== dependencies: tslib "^2.3.0" -sequential-workflow-designer@^0.37.2: - version "0.37.2" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.2.tgz#d311d769f58ed1b2a1627f29ad0538707e3d0451" - integrity sha512-AGtv8GJ9SF+mIGtDzyEZTn1X3VkcgMIZzV15WCAOweMGec/NTS9zw8qraWPoSBkLdNDQtuK4/jbUxLnwJS4N9g== +sequential-workflow-designer@^0.37.4: + version "0.37.4" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.37.4.tgz#6a6abfa56b1cec7e07bc748da448c2f944f185e4" + integrity sha512-sjQy7yl265Ei4Pd3uX7CxJ2BICtPA73b3T7hpn1jQGqDlBqHofHw8BZvnM5UB0re5/vAuvsGnhldeAxjprJT7g== dependencies: sequential-workflow-model "^0.2.0" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index 521820d..3835932 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.37.3", - "sequential-workflow-designer-react": "^0.37.3" + "sequential-workflow-designer": "^0.37.4", + "sequential-workflow-designer-react": "^0.37.4" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 63e266f..9b80717 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.37.3", - "sequential-workflow-designer-svelte": "^0.37.3" + "sequential-workflow-designer": "^0.37.4", + "sequential-workflow-designer-svelte": "^0.37.4" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index 7f7011a..9cf6f62 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.37.3", + "version": "0.37.4", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/api/control-bar-api.ts b/designer/src/api/control-bar-api.ts index 1088e6f..e29d8a3 100644 --- a/designer/src/api/control-bar-api.ts +++ b/designer/src/api/control-bar-api.ts @@ -17,7 +17,7 @@ export class ControlBarApi { state.onSelectedStepIdChanged, state.onIsDragDisabledChanged, api.isUndoRedoSupported() ? state.onDefinitionChanged : undefined - ).subscribe(api.onStateChanged.forward); + ).subscribe(api.onStateChanged.emit); return api; } diff --git a/designer/src/core/simple-event-race.spec.ts b/designer/src/core/simple-event-race.spec.ts index 5f7597f..5f2e83a 100644 --- a/designer/src/core/simple-event-race.spec.ts +++ b/designer/src/core/simple-event-race.spec.ts @@ -17,8 +17,8 @@ describe('race', () => { done(); }); - a.forward(0x128); - b.forward(0x256); + a.emit(0x128); + b.emit(0x256); }); it('forwards first event only', done => { @@ -28,7 +28,7 @@ describe('race', () => { done(); }); - a.forward(0x128); + a.emit(0x128); }); it('forwards second event only', done => { @@ -38,6 +38,6 @@ describe('race', () => { done(); }); - b.forward(0x256); + b.emit(0x256); }); }); diff --git a/designer/src/core/simple-event-race.ts b/designer/src/core/simple-event-race.ts index ca65046..f940fbc 100644 --- a/designer/src/core/simple-event-race.ts +++ b/designer/src/core/simple-event-race.ts @@ -11,14 +11,14 @@ export function race( const result = new SimpleEvent<[A?, B?, C?, D?]>(); let scheduled = false; - function forward() { + function emit() { if (scheduled) { return; } scheduled = true; setTimeout(() => { try { - result.forward(value); + result.emit(value); } finally { scheduled = false; value.fill(undefined); @@ -29,7 +29,7 @@ export function race( function subscribe(event: SimpleEvent, index: number) { event.subscribe(v => { value[index] = v; - forward(); + emit(); }); } diff --git a/designer/src/core/simple-event.spec.ts b/designer/src/core/simple-event.spec.ts index 921610b..e1e1b1d 100644 --- a/designer/src/core/simple-event.spec.ts +++ b/designer/src/core/simple-event.spec.ts @@ -10,13 +10,13 @@ describe('SimpleEvent', () => { } e.subscribe(listener); - e.forward(); + e.emit(); expect(counter).toEqual(1); expect(e.count()).toEqual(1); e.unsubscribe(listener); - e.forward(); + e.emit(); expect(counter).toEqual(1); expect(e.count()).toEqual(0); @@ -28,10 +28,10 @@ describe('SimpleEvent', () => { e.once().then(v => (lastValue = v)); - e.forward(1); - e.forward(2); - e.forward(3); - e.forward(4); + e.emit(1); + e.emit(2); + e.emit(3); + e.emit(4); setTimeout(() => { expect(lastValue).toEqual(1); diff --git a/designer/src/core/simple-event.ts b/designer/src/core/simple-event.ts index e20080e..101c7f3 100644 --- a/designer/src/core/simple-event.ts +++ b/designer/src/core/simple-event.ts @@ -14,12 +14,17 @@ export class SimpleEvent { } } - public readonly forward = (value: T) => { - if (this.listeners.length > 0) { - this.listeners.forEach(listener => listener(value)); + public readonly emit = (value: T) => { + for (const listener of this.listeners) { + listener(value); } }; + /** + * @deprecated Use `emit` method instead. + */ + public readonly forward = this.emit; + public count(): number { return this.listeners.length; } diff --git a/designer/src/designer-state.ts b/designer/src/designer-state.ts index cd79d74..8b1da1e 100644 --- a/designer/src/designer-state.ts +++ b/designer/src/designer-state.ts @@ -45,18 +45,18 @@ export class DesignerState { public setSelectedStepId(stepId: string | null) { if (this.selectedStepId !== stepId) { this.selectedStepId = stepId; - this.onSelectedStepIdChanged.forward(stepId); + this.onSelectedStepIdChanged.emit(stepId); } } public pushStepIdToFolderPath(stepId: string) { this.folderPath.push(stepId); - this.onFolderPathChanged.forward(this.folderPath); + this.onFolderPathChanged.emit(this.folderPath); } public setFolderPath(path: string[]) { this.folderPath = path; - this.onFolderPathChanged.forward(path); + this.onFolderPathChanged.emit(path); } public tryGetLastStepIdFromFolderPath(): string | null { @@ -77,50 +77,50 @@ export class DesignerState { if (details) { Object.assign(event, details); } - this.onDefinitionChanged.forward(event); + this.onDefinitionChanged.emit(event); } public notifyStepUnselectionBlocked(stepId: string | null) { - this.onStepUnselectionBlocked.forward(stepId); + this.onStepUnselectionBlocked.emit(stepId); } public setViewport(viewport: Viewport) { this.viewport = viewport; - this.onViewportChanged.forward(viewport); + this.onViewportChanged.emit(viewport); } public setIsReadonly(isReadonly: boolean) { if (this.isReadonly !== isReadonly) { this.isReadonly = isReadonly; - this.onIsReadonlyChanged.forward(isReadonly); + this.onIsReadonlyChanged.emit(isReadonly); } } public setIsDragging(isDragging: boolean) { if (this.isDragging !== isDragging) { this.isDragging = isDragging; - this.onIsDraggingChanged.forward(isDragging); + this.onIsDraggingChanged.emit(isDragging); } } public setIsDragDisabled(isDragDisabled: boolean) { if (this.isDragDisabled !== isDragDisabled) { this.isDragDisabled = isDragDisabled; - this.onIsDragDisabledChanged.forward(isDragDisabled); + this.onIsDragDisabledChanged.emit(isDragDisabled); } } public setIsToolboxCollapsed(isCollapsed: boolean) { if (this.isToolboxCollapsed !== isCollapsed) { this.isToolboxCollapsed = isCollapsed; - this.onIsToolboxCollapsedChanged.forward(isCollapsed); + this.onIsToolboxCollapsedChanged.emit(isCollapsed); } } public setIsEditorCollapsed(isCollapsed: boolean) { if (this.isEditorCollapsed !== isCollapsed) { this.isEditorCollapsed = isCollapsed; - this.onIsEditorCollapsedChanged.forward(isCollapsed); + this.onIsEditorCollapsedChanged.emit(isCollapsed); } } @@ -128,7 +128,7 @@ export class DesignerState { for (const change of changes) { this.preferenceStorage.setItem(change.key, change.value); } - this.onPreferencesChanged.forward({ changes, stepId }); + this.onPreferencesChanged.emit({ changes, stepId }); } public getPreference(key: string): string | null { diff --git a/designer/src/designer.ts b/designer/src/designer.ts index 0532ce7..baf9b6a 100644 --- a/designer/src/designer.ts +++ b/designer/src/designer.ts @@ -51,25 +51,26 @@ export class Designer { 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 as DefinitionChangedEvent); + designer.onDefinitionChanged.emit(definition as DefinitionChangedEvent); } 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; } @@ -121,6 +122,11 @@ export class Designer { */ public readonly onRootComponentUpdated = new SimpleEvent(); + /** + * @description Fires when the dragging state has changed. `true` if the step is being dragged, otherwise `false`. + */ + public readonly onIsDraggingChanged = new SimpleEvent(); + /** * @description Fires when any of the designer preferences has changed. */ @@ -247,6 +253,13 @@ export class Designer { return this.state.isEditorCollapsed; } + /** + * @returns a flag that indicates whether the step is being dragged. + */ + public isDragging(): boolean { + return this.state.isDragging; + } + /** * @description Sets a flag that indicates whether the editor is collapsed. */ diff --git a/designer/src/workspace/workspace.ts b/designer/src/workspace/workspace.ts index 5c2b006..50e4843 100644 --- a/designer/src/workspace/workspace.ts +++ b/designer/src/workspace/workspace.ts @@ -127,7 +127,7 @@ export class Workspace implements WorkspaceController { this.trySelectStepComponent(this.state.selectedStepId); this.updateBadges(); - this.onRootComponentUpdated.forward(); + this.onRootComponentUpdated.emit(); }; public updateBadges() { diff --git a/examples/assets/lib.js b/examples/assets/lib.js index 01117c6..ae087d3 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.37.3'; +const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.37.4'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/react/package.json b/react/package.json index 073519a..5646667 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.37.3", + "version": "0.37.4", "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.37.3" + "sequential-workflow-designer": "^0.37.4" }, "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.37.3", + "sequential-workflow-designer": "^0.37.4", "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 ca26fe9..f886677 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.37.3", + "version": "0.37.4", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.37.3" + "sequential-workflow-designer": "^0.37.4" }, "devDependencies": { - "sequential-workflow-designer": "^0.37.3", + "sequential-workflow-designer": "^0.37.4", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",