diff --git a/CHANGELOG.md b/CHANGELOG.md index b75faec..0df47d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 0.31.0 + +This version introduces a new feature: you can now add a custom icon to placeholders that appear while dragging a step. + # 0.30.5 This version fixes the configuration usage in the `RectPlaceholderDesignerExtension` class. diff --git a/README.md b/README.md index 4ca0972..1db1480 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 80a671a..9c1562e 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.30.5", + "version": "0.31.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.30.5" + "sequential-workflow-designer": "^0.31.0" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 77425a8..18c21be 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.30.5", - "sequential-workflow-designer-angular": "^0.30.5", + "sequential-workflow-designer": "^0.31.0", + "sequential-workflow-designer-angular": "^0.31.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 da36d43..8c4d624 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.30.0: - version "0.30.0" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.30.0.tgz#94cf034281c6e3409a0fef921d132b67e3562fcd" - integrity sha512-7eRPzyZkEF65nhBMmNS4O3u9S0tuWBo07QxJsNjAijQMpkDE3BgMmNDssvjeUwFdKPR1oQdH5H1LzsBAIyXN3Q== +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== dependencies: tslib "^2.3.0" -sequential-workflow-designer@^0.30.0: - version "0.30.0" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.30.0.tgz#98a11796ab3323030048965f8849d1b93a79e8c4" - integrity sha512-SwjlRMhO6auFpB9DiYm+1Lb1KHbLL7h66GgOEs60Ej4n0Y5yDTN9ifDLGOiMvUSWqTe3xkfEEsVQ/WLuW9Lz8Q== +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== dependencies: sequential-workflow-model "^0.2.0" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index b065f03..a312d83 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.30.5", - "sequential-workflow-designer-react": "^0.30.5" + "sequential-workflow-designer": "^0.31.0", + "sequential-workflow-designer-react": "^0.31.0" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 66e8b31..1629b9e 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.30.5", - "sequential-workflow-designer-svelte": "^0.30.5" + "sequential-workflow-designer": "^0.31.0", + "sequential-workflow-designer-svelte": "^0.31.0" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index f49b6ac..1136f3f 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.30.5", + "version": "0.31.0", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts index 36fab73..4cb1ceb 100644 --- a/designer/src/designer-extension.ts +++ b/designer/src/designer-extension.ts @@ -222,7 +222,13 @@ export enum PlaceholderGapOrientation { export interface PlaceholderExtension { getGapSize(orientation: PlaceholderGapOrientation): Vector; createForGap(parentElement: SVGElement, sequence: Sequence, index: number, orientation: PlaceholderGapOrientation): Placeholder; - createForArea(parentElement: SVGElement, size: Vector, direction: PlaceholderDirection, sequence: Sequence, index: number): Placeholder; + createForArea( + parentElement: SVGElement, + size: Vector, + direction: PlaceholderDirection | null, + sequence: Sequence, + index: number + ): Placeholder; } // ViewportControllerExtension diff --git a/designer/src/workspace/component.ts b/designer/src/workspace/component.ts index 2a1c019..18949f8 100644 --- a/designer/src/workspace/component.ts +++ b/designer/src/workspace/component.ts @@ -120,7 +120,6 @@ export interface Placeholder { } export enum PlaceholderDirection { - gap = 0, in = 1, out = 2 } diff --git a/designer/src/workspace/placeholder/rect-placeholder-configuration.ts b/designer/src/workspace/placeholder/rect-placeholder-configuration.ts index 6fe287a..3ccf828 100644 --- a/designer/src/workspace/placeholder/rect-placeholder-configuration.ts +++ b/designer/src/workspace/placeholder/rect-placeholder-configuration.ts @@ -2,5 +2,6 @@ export interface RectPlaceholderConfiguration { gapWidth: number; gapHeight: number; radius: number; + iconD?: string; iconSize: number; } diff --git a/designer/src/workspace/placeholder/rect-placeholder-extension.ts b/designer/src/workspace/placeholder/rect-placeholder-extension.ts index 8d818f0..ec27fa0 100644 --- a/designer/src/workspace/placeholder/rect-placeholder-extension.ts +++ b/designer/src/workspace/placeholder/rect-placeholder-extension.ts @@ -1,5 +1,5 @@ import { Sequence } from '../../definition'; -import { Vector } from '../../core'; +import { Icons, Vector } from '../../core'; import { PlaceholderExtension, PlaceholderGapOrientation } from '../../designer-extension'; import { PlaceholderDirection, Placeholder } from '../component'; import { RectPlaceholder } from './rect-placeholder'; @@ -31,10 +31,10 @@ export class RectPlaceholderExtension implements PlaceholderExtension { return RectPlaceholder.create( parent, gapSize, - PlaceholderDirection.gap, parentSequence, index, this.configuration.radius, + this.configuration.iconD, this.configuration.iconSize ); } @@ -42,18 +42,16 @@ export class RectPlaceholderExtension implements PlaceholderExtension { public createForArea( parent: SVGElement, size: Vector, - direction: PlaceholderDirection, + direction: PlaceholderDirection | null, parentSequence: Sequence, index: number ): Placeholder { - return RectPlaceholder.create( - parent, - size, - direction, - parentSequence, - index, - this.configuration.radius, - this.configuration.iconSize - ); + let iconD: string | undefined; + if (direction === PlaceholderDirection.in) { + iconD = Icons.folderIn; + } else if (direction === PlaceholderDirection.out) { + iconD = Icons.folderOut; + } + return RectPlaceholder.create(parent, size, parentSequence, index, this.configuration.radius, iconD, this.configuration.iconSize); } } diff --git a/designer/src/workspace/placeholder/rect-placeholder-view.ts b/designer/src/workspace/placeholder/rect-placeholder-view.ts index 792dbfb..c2eab23 100644 --- a/designer/src/workspace/placeholder/rect-placeholder-view.ts +++ b/designer/src/workspace/placeholder/rect-placeholder-view.ts @@ -1,6 +1,6 @@ import { Dom } from '../../core'; import { Icons } from '../../core/icons'; -import { PlaceholderDirection, PlaceholderView } from '../component'; +import { PlaceholderView } from '../component'; export class RectPlaceholderView implements PlaceholderView { public static create( @@ -8,8 +8,8 @@ export class RectPlaceholderView implements PlaceholderView { width: number, height: number, radius: number, - iconSize: number, - direction: PlaceholderDirection + iconD: string | undefined, + iconSize: number ): RectPlaceholderView { const g = Dom.svg('g', { visibility: 'hidden', @@ -26,8 +26,7 @@ export class RectPlaceholderView implements PlaceholderView { }); g.appendChild(rect); - if (direction) { - const iconD = direction === PlaceholderDirection.in ? Icons.folderIn : Icons.folderOut; + if (iconD) { const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, iconSize); Dom.translate(icon, (width - iconSize) / 2, (height - iconSize) / 2); } diff --git a/designer/src/workspace/placeholder/rect-placeholder.ts b/designer/src/workspace/placeholder/rect-placeholder.ts index b34c160..0975689 100644 --- a/designer/src/workspace/placeholder/rect-placeholder.ts +++ b/designer/src/workspace/placeholder/rect-placeholder.ts @@ -1,20 +1,20 @@ import { Vector } from '../../core'; import { Sequence } from '../../definition'; -import { Placeholder, PlaceholderDirection } from '../component'; +import { Placeholder } from '../component'; import { RectPlaceholderView } from './rect-placeholder-view'; export class RectPlaceholder implements Placeholder { public static create( parent: SVGElement, size: Vector, - direction: PlaceholderDirection, - sequence: Sequence, + parentSequence: Sequence, index: number, radius: number, + iconD: string | undefined, iconSize: number ): RectPlaceholder { - const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconSize, direction); - return new RectPlaceholder(view, sequence, index); + const view = RectPlaceholderView.create(parent, size.x, size.y, radius, iconD, iconSize); + return new RectPlaceholder(view, parentSequence, index); } public constructor( diff --git a/examples/assets/lib.js b/examples/assets/lib.js index c760a47..ec1314b 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.30.5'; +const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.31.0'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/examples/assets/triggers.js b/examples/assets/triggers.js index d129706..20e9baa 100644 --- a/examples/assets/triggers.js +++ b/examples/assets/triggers.js @@ -127,6 +127,13 @@ const configuration = { view: { start: null } + }), + sequentialWorkflowDesigner.RectPlaceholderDesignerExtension.create({ + gapWidth: 88, + gapHeight: 24, + radius: 6, + iconD: 'M21.2 27.04H5.6v-5.19h15.6V6.29h5.2v15.56H42v5.19H26.4V42.6h-5.2V27.04z', + iconSize: 16 }) ] }; diff --git a/react/package.json b/react/package.json index 66114f4..c059a33 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.30.5", + "version": "0.31.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.30.5" + "sequential-workflow-designer": "^0.31.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.30.5", + "sequential-workflow-designer": "^0.31.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 d152bd4..ac52c9a 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.30.5", + "version": "0.31.0", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.30.5" + "sequential-workflow-designer": "^0.31.0" }, "devDependencies": { - "sequential-workflow-designer": "^0.30.5", + "sequential-workflow-designer": "^0.31.0", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",