0.19.4. (#138)

nocode-js · Apr 30, 2024 · 286a0a3 · 286a0a3
1 parent 220f1a1
commit 286a0a3
Show file tree

Hide file tree

Showing 18 changed files with 61 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.19.4
+
+This version adds the data-step-id attribute to the root `<g>` 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
@@ -100,10 +100,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/[email protected].3/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected].4/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/[email protected].4/dist/index.umd.js"></script>
 ```
 
 Call the designer by:

diff --git 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
@@ -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
@@ -5956,17 +5956,17 @@ [email protected]:
     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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,11 @@
+import { ComponentDom } from './component-dom';
+
+describe('ComponentDom', () => {
+	it('stepG() creates <g> 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
@@ -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
@@ -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
@@ -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<SequentialStep>, 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
@@ -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
@@ -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<BranchedStep>, 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
@@ -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<Step>, 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
@@ -19,7 +19,7 @@ function embedStylesheet(url) {
 
 const baseUrl = isTestEnv()
 	? '../designer'
-	: '//cdn.jsdelivr.net/npm/[email protected].3';
+	: '//cdn.jsdelivr.net/npm/[email protected].4';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);

diff --git 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
@@ -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",