From 286a0a3a5820c3717bada067e9bbd39c14a449cf Mon Sep 17 00:00:00 2001 From: Bart Tadych Date: Tue, 30 Apr 2024 23:01:35 +0200 Subject: [PATCH] 0.19.4. (#138) --- 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 +- .../workspace/common-views/component-dom.spec.ts | 11 +++++++++++ .../src/workspace/common-views/component-dom.ts | 10 ++++++++++ designer/src/workspace/common-views/index.ts | 2 +- .../container-step-component-view.ts | 5 ++--- designer/src/workspace/placeholder/index.ts | 1 + .../switch-step/switch-step-component-view.ts | 5 ++--- .../task-step/task-step-component-view.ts | 5 ++--- examples/assets/lib.js | 2 +- react/package.json | 6 +++--- svelte/package.json | 6 +++--- 18 files changed, 61 insertions(+), 38 deletions(-) create mode 100644 designer/src/workspace/common-views/component-dom.spec.ts create mode 100644 designer/src/workspace/common-views/component-dom.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 28b72e7..be5025a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +## 0.19.4 + +This version adds the data-step-id attribute to the root `` elements of step components on the canvas. This attribute contains the ID of the step, enabling the use of CSS selectors to style step components [#135](https://github.com/nocode-js/sequential-workflow-designer/issues/135). + ## 0.19.3 This version improves the experience of scrolling in the toolbox via the touchpad. diff --git a/README.md b/README.md index 22f50d7..e581a5c 100644 --- a/README.md +++ b/README.md @@ -100,10 +100,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 d44cb77..6de0b4b 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.19.3", + "version": "0.19.4", "author": { "name": "NoCode JS", "url": "https://nocode-js.com/" @@ -15,7 +15,7 @@ "peerDependencies": { "@angular/common": "12 - 16", "@angular/core": "12 - 16", - "sequential-workflow-designer": "^0.19.3" + "sequential-workflow-designer": "^0.19.4" }, "dependencies": { "tslib": "^2.3.0" diff --git a/demos/angular-app/package.json b/demos/angular-app/package.json index 683aef4..6a28082 100644 --- a/demos/angular-app/package.json +++ b/demos/angular-app/package.json @@ -26,8 +26,8 @@ "@angular/platform-browser-dynamic": "^15.2.9", "@angular/router": "^15.2.9", "rxjs": "~7.8.0", - "sequential-workflow-designer": "^0.19.3", - "sequential-workflow-designer-angular": "^0.19.3", + "sequential-workflow-designer": "^0.19.4", + "sequential-workflow-designer-angular": "^0.19.4", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, diff --git a/demos/angular-app/yarn.lock b/demos/angular-app/yarn.lock index cdbd9c5..d1d2888 100644 --- a/demos/angular-app/yarn.lock +++ b/demos/angular-app/yarn.lock @@ -5956,17 +5956,17 @@ send@0.18.0: range-parser "~1.2.1" statuses "2.0.1" -sequential-workflow-designer-angular@^0.19.3: - version "0.19.3" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.3.tgz#5b69f09f5d600034202ec04c42f473eb2be34841" - integrity sha512-H7J+Vr923SeNvnG8Uxup3Hu+lSjNodMZEILoum+uVTZP3xUZyETd4bprd5MdEE6/wlUai8cLOk69+QojQAuqUQ== +sequential-workflow-designer-angular@^0.19.4: + version "0.19.4" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.19.4.tgz#80449ac17015cd2e58a7b8b0b5169f3148083c88" + integrity sha512-svUfsbISuYe5CEAjuu3Z3IyjoOvvWI0ADP1KrNf9UpHWD+QXCX/yvviUJfDvMGY5YtniI3ylkNfDjUBPPXnm4A== dependencies: tslib "^2.3.0" -sequential-workflow-designer@^0.19.3: - version "0.19.3" - resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.3.tgz#967967f5772e6cbd592def584e6ba78331a837bc" - integrity sha512-lDDclYAsbg8DXfVa4ZiFnCmnvbgO1A7bey2TO2Q6DfmiVqqQ8VhsDEpMXcSxT72O3nkQxn1YDVG2XZzpJBTxyA== +sequential-workflow-designer@^0.19.4: + version "0.19.4" + resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.19.4.tgz#1ef69541e17c3daaf1e06d3c7984771e14f9b2c0" + integrity sha512-pCv27HahJajaiyJo7UUd4qkXyH0OtauGFpPksorGWr+EzoYEtcMsR/53x+1t+e6qZ4++FboGLQ85+63+XIGBvg== dependencies: sequential-workflow-model "^0.2.0" diff --git a/demos/react-app/package.json b/demos/react-app/package.json index 6c0af7d..9aaef25 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.19.3", - "sequential-workflow-designer-react": "^0.19.3" + "sequential-workflow-designer": "^0.19.4", + "sequential-workflow-designer-react": "^0.19.4" }, "devDependencies": { "@types/jest": "^29.2.5", diff --git a/demos/svelte-app/package.json b/demos/svelte-app/package.json index 03ae555..c9f6cce 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.19.3", - "sequential-workflow-designer-svelte": "^0.19.3" + "sequential-workflow-designer": "^0.19.4", + "sequential-workflow-designer-svelte": "^0.19.4" }, "devDependencies": { "@sveltejs/adapter-static": "^2.0.3", diff --git a/designer/package.json b/designer/package.json index 640ba10..57a8b93 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.19.3", + "version": "0.19.4", "type": "module", "main": "./lib/esm/index.js", "types": "./lib/index.d.ts", diff --git a/designer/src/workspace/common-views/component-dom.spec.ts b/designer/src/workspace/common-views/component-dom.spec.ts new file mode 100644 index 0000000..1581f6c --- /dev/null +++ b/designer/src/workspace/common-views/component-dom.spec.ts @@ -0,0 +1,11 @@ +import { ComponentDom } from './component-dom'; + +describe('ComponentDom', () => { + it('stepG() creates element', () => { + const view = ComponentDom.stepG('container', 'foreach', 'some-id'); + + expect(view.tagName.toLowerCase()).toBe('g'); + expect(view.getAttribute('class')).toBe('sqd-step-container sqd-type-foreach'); + expect(view.getAttribute('data-step-id')).toBe('some-id'); + }); +}); diff --git a/designer/src/workspace/common-views/component-dom.ts b/designer/src/workspace/common-views/component-dom.ts new file mode 100644 index 0000000..d3bdefd --- /dev/null +++ b/designer/src/workspace/common-views/component-dom.ts @@ -0,0 +1,10 @@ +import { Dom } from '../../core'; + +export class ComponentDom { + public static stepG(componentClassName: string, type: string, id: string): SVGGElement { + return Dom.svg('g', { + class: `sqd-step-${componentClassName} sqd-type-${type}`, + 'data-step-id': id + }); + } +} diff --git a/designer/src/workspace/common-views/index.ts b/designer/src/workspace/common-views/index.ts index 1c94056..4e30476 100644 --- a/designer/src/workspace/common-views/index.ts +++ b/designer/src/workspace/common-views/index.ts @@ -1,6 +1,6 @@ +export * from './component-dom'; export * from './input-view'; export * from './join-view'; export * from './label-view'; export * from './output-view'; export * from './region-view'; -export * from '../placeholder/rect-placeholder-view'; 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 9602ada..1e91f67 100644 --- a/designer/src/workspace/container-step/container-step-component-view.ts +++ b/designer/src/workspace/container-step/container-step-component-view.ts @@ -8,14 +8,13 @@ import { LabelView } from '../common-views/label-view'; import { RegionView } from '../common-views/region-view'; import { StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension'; import { ContainerStepComponentViewConfiguration } from './container-step-component-view-configuration'; +import { ComponentDom } from '../common-views/component-dom'; export const createContainerStepComponentViewFactory = (cfg: ContainerStepComponentViewConfiguration): StepComponentViewFactory => (parentElement: SVGElement, stepContext: StepContext, viewContext: StepComponentViewContext): StepComponentView => { const { step } = stepContext; - const g = Dom.svg('g', { - class: `sqd-step-container sqd-type-${step.type}` - }); + const g = ComponentDom.stepG('container', step.type, step.id); parentElement.appendChild(g); const labelView = LabelView.create(g, cfg.paddingTop, cfg.label, step.name, 'primary'); diff --git a/designer/src/workspace/placeholder/index.ts b/designer/src/workspace/placeholder/index.ts index d210a88..7e772d8 100644 --- a/designer/src/workspace/placeholder/index.ts +++ b/designer/src/workspace/placeholder/index.ts @@ -1,2 +1,3 @@ export * from './rect-placeholder'; +export * from './rect-placeholder-view'; export * from './rect-placeholder-configuration'; 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 0dc2f19..c91ca4c 100644 --- a/designer/src/workspace/switch-step/switch-step-component-view.ts +++ b/designer/src/workspace/switch-step/switch-step-component-view.ts @@ -8,14 +8,13 @@ import { InputView } from '../common-views/input-view'; import { ClickDetails, StepComponentView } from '../component'; import { StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension'; import { SwitchStepComponentViewConfiguration } from './switch-step-component-view-configuration'; +import { ComponentDom } from '../common-views/component-dom'; export const createSwitchStepComponentViewFactory = (cfg: SwitchStepComponentViewConfiguration): StepComponentViewFactory => (parent: SVGElement, stepContext: StepContext, viewContext: StepComponentViewContext): StepComponentView => { const { step } = stepContext; - const g = Dom.svg('g', { - class: `sqd-step-switch sqd-type-${step.type}` - }); + const g = ComponentDom.stepG('switch', step.type, step.id); parent.appendChild(g); const branchNames = Object.keys(step.branches); diff --git a/designer/src/workspace/task-step/task-step-component-view.ts b/designer/src/workspace/task-step/task-step-component-view.ts index 9639c8a..069f72d 100644 --- a/designer/src/workspace/task-step/task-step-component-view.ts +++ b/designer/src/workspace/task-step/task-step-component-view.ts @@ -3,6 +3,7 @@ import { getAbsolutePosition } from '../../core/get-absolute-position'; import { Vector } from '../../core/vector'; import { Step } from '../../definition'; import { StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension'; +import { ComponentDom } from '../common-views/component-dom'; import { InputView } from '../common-views/input-view'; import { OutputView } from '../common-views/output-view'; import { ClickDetails, StepComponentView } from '../component'; @@ -12,9 +13,7 @@ export const createTaskStepComponentViewFactory = (isInterrupted: boolean, cfg: TaskStepComponentViewConfiguration): StepComponentViewFactory => (parentElement: SVGElement, stepContext: StepContext, viewContext: StepComponentViewContext): StepComponentView => { const { step } = stepContext; - const g = Dom.svg('g', { - class: `sqd-step-task sqd-type-${step.type}` - }); + const g = ComponentDom.stepG('task', step.type, step.id); parentElement.appendChild(g); const boxHeight = cfg.paddingY * 2 + cfg.iconSize; diff --git a/examples/assets/lib.js b/examples/assets/lib.js index 90385b7..4386fc3 100644 --- a/examples/assets/lib.js +++ b/examples/assets/lib.js @@ -19,7 +19,7 @@ function embedStylesheet(url) { const baseUrl = isTestEnv() ? '../designer' - : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.3'; + : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.19.4'; embedScript(`${baseUrl}/dist/index.umd.js`); embedStylesheet(`${baseUrl}/css/designer.css`); diff --git a/react/package.json b/react/package.json index 298fbe8..d003423 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.19.3", + "version": "0.19.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.19.3" + "sequential-workflow-designer": "^0.19.4" }, "devDependencies": { "@rollup/plugin-node-resolve": "^15.0.1", @@ -63,7 +63,7 @@ "prettier": "^2.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", - "sequential-workflow-designer": "^0.19.3", + "sequential-workflow-designer": "^0.19.4", "rollup": "^3.18.0", "rollup-plugin-dts": "^5.2.0", "rollup-plugin-typescript2": "^0.34.1", diff --git a/svelte/package.json b/svelte/package.json index 314ab1b..a88d388 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.19.3", + "version": "0.19.4", "license": "MIT", "scripts": { "prepare": "cp ../LICENSE LICENSE", @@ -28,10 +28,10 @@ ], "peerDependencies": { "svelte": "^4.0.0", - "sequential-workflow-designer": "^0.19.3" + "sequential-workflow-designer": "^0.19.4" }, "devDependencies": { - "sequential-workflow-designer": "^0.19.3", + "sequential-workflow-designer": "^0.19.4", "@sveltejs/adapter-static": "^2.0.3", "@sveltejs/kit": "^1.20.4", "@sveltejs/package": "^2.0.0",