0.24.7. (#168)

b4rtaz · web-flow · commit 6d701546ab23 · 2024-10-29T21:34:14.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.24.7
+
+This version introduces the ability to adjust the appearance of the start-stop root component.
+
 # 0.24.6
 
 Fixed a bug where the designer remained in an invalid state when rendered inside a placeholder with a width or height of 0px.
diff --git a/README.md b/README.md
@@ -103,10 +103,10 @@ Add the below code to your head section in HTML document.
 ```html
 <head>
 ...
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7/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.24.6",
+	"version": "0.24.7",
 	"author": {
 		"name": "NoCode JS",
 		"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
 	"peerDependencies": {
 		"@angular/common": "12 - 18",
 		"@angular/core": "12 - 18",
-		"sequential-workflow-designer": "^0.24.6"
+		"sequential-workflow-designer": "^0.24.7"
 	},
 	"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": "^17.3.9",
 		"@angular/router": "^17.3.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.24.6",
-		"sequential-workflow-designer-angular": "^0.24.6",
+		"sequential-workflow-designer": "^0.24.7",
+		"sequential-workflow-designer-angular": "^0.24.7",
 		"tslib": "^2.3.0",
 		"zone.js": "~0.14.6"
 	},
diff --git 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.24.6:
-  version "0.24.6"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.6.tgz#342e7b3aa75b5bd021ddd3fa8b7271001f2b14ac"
-  integrity sha512-USyB8FXHEIZ6IXBzHe31jPovMtfqjHCsAhOeWQ6qAZCjVVRe1ymCIdAoixVK7TvKONursMqlcGoQ2O+iAdMABw==
+sequential-workflow-designer-angular@^0.24.7:
+  version "0.24.7"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.24.7.tgz#0cbfc6b6844719e9bd62d6ab54a29893c0411f5d"
+  integrity sha512-xCDLflTlY2XivxLxQejub6/ozG9nlaaT48FrjPVYCJBgmXjC+7HUegCDK5bO+oBhBV5QdouSQN1zFhP1TP0+iw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.24.6:
-  version "0.24.6"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.6.tgz#0be6112837177db19c2e5e69e15e5a827243097d"
-  integrity sha512-zjv60NrWKYZY8ZiL+PAG3DZK3lJX/cjBkgQ/IYElsk2rwHl6+srOFWSRKx2cEfHHNueTovNQLFVsFIWRvAtVNg==
+sequential-workflow-designer@^0.24.7:
+  version "0.24.7"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.24.7.tgz#865f03fcfc547acbaa7e7daebaeca3ca77e91e5f"
+  integrity sha512-mwsNK4jDHv1GBQnN13gr8mbK4cHAd66Q5PX4TlQOt9ky20osiF1+TOxpwJtfRSFXO8o4KO944YUVe2IPYY6xnA==
   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.24.6",
-		"sequential-workflow-designer-react": "^0.24.6"
+		"sequential-workflow-designer": "^0.24.7",
+		"sequential-workflow-designer-react": "^0.24.7"
 	},
 	"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.24.6",
-		"sequential-workflow-designer-svelte": "^0.24.6"
+		"sequential-workflow-designer": "^0.24.7",
+		"sequential-workflow-designer-svelte": "^0.24.7"
 	},
 	"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.24.6",
+	"version": "0.24.7",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/services.ts b/designer/src/services.ts
@@ -135,7 +135,7 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu
 		services.grid = LineGridExtension.create();
 	}
 	if (!services.rootComponent) {
-		services.rootComponent = new StartStopRootComponentExtension();
+		services.rootComponent = StartStopRootComponentExtension.create();
 	}
 	if (!services.sequenceComponent) {
 		services.sequenceComponent = new DefaultSequenceComponentExtension();
diff --git a/designer/src/workspace/index.ts b/designer/src/workspace/index.ts
@@ -1,6 +1,7 @@
 export * from './badges';
 export * from './common-views';
 export * from './sequence';
+export * from './start-stop-root';
 export * from './container-step';
 export * from './grid';
 export * from './switch-step';
diff --git a/designer/src/workspace/start-stop-root/index.ts b/designer/src/workspace/start-stop-root/index.ts
@@ -0,0 +1,3 @@
+export * from './start-stop-root-component-extension-configuration';
+export * from './start-stop-root-component-view-configuration';
+export * from './start-stop-root-component-extension';
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component-extension-configuration.ts b/designer/src/workspace/start-stop-root/start-stop-root-component-extension-configuration.ts
@@ -0,0 +1,5 @@
+import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
+
+export interface StartStopRootComponentExtensionConfiguration {
+	view: StartStopRootComponentViewConfiguration;
+}
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component-extension.ts b/designer/src/workspace/start-stop-root/start-stop-root-component-extension.ts
@@ -1,6 +1,35 @@
-import { RootComponentExtension } from '../../designer-extension';
+import { Sequence } from 'sequential-workflow-model';
+import { ComponentContext } from '../../component-context';
+import { Icons } from '../../core';
+import { RootComponentExtension, SequencePlaceIndicator } from '../../designer-extension';
 import { StartStopRootComponent } from './start-stop-root-component';
+import { StartStopRootComponentExtensionConfiguration } from './start-stop-root-component-extension-configuration';
+import { Component } from '../component';
+
+const defaultConfiguration: StartStopRootComponentExtensionConfiguration = {
+	view: {
+		size: 30,
+		defaultIconSize: 22,
+		folderIconSize: 18,
+		startIconD: Icons.play,
+		stopIconD: Icons.stop,
+		folderIconD: Icons.folder
+	}
+};
 
 export class StartStopRootComponentExtension implements RootComponentExtension {
-	public readonly create = StartStopRootComponent.create;
+	public static create(configuration?: StartStopRootComponentExtensionConfiguration) {
+		return new StartStopRootComponentExtension(configuration ?? defaultConfiguration);
+	}
+
+	private constructor(private readonly configuration: StartStopRootComponentExtensionConfiguration) {}
+
+	public create(
+		parentElement: SVGElement,
+		sequence: Sequence,
+		parentPlaceIndicator: SequencePlaceIndicator | null,
+		context: ComponentContext
+	): Component {
+		return StartStopRootComponent.create(parentElement, sequence, parentPlaceIndicator, context, this.configuration.view);
+	}
 }
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component-view-configuration.ts b/designer/src/workspace/start-stop-root/start-stop-root-component-view-configuration.ts
@@ -0,0 +1,8 @@
+export interface StartStopRootComponentViewConfiguration {
+	size: number;
+	defaultIconSize: number;
+	folderIconSize: number;
+	folderIconD: string;
+	startIconD: string;
+	stopIconD: string;
+}
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component-view.spec.ts b/designer/src/workspace/start-stop-root/start-stop-root-component-view.spec.ts
@@ -1,3 +1,4 @@
+import { Icons } from '../../core';
 import { Dom } from '../../core/dom';
 import { createComponentContextStub } from '../../test-tools/stubs';
 import { StartStopRootComponentView } from './start-stop-root-component-view';
@@ -6,7 +7,14 @@ describe('StartStopRootComponentView', () => {
 	it('create() creates view', () => {
 		const parent = Dom.svg('svg');
 		const componentContext = createComponentContextStub();
-		StartStopRootComponentView.create(parent, [], null, componentContext);
+		StartStopRootComponentView.create(parent, [], null, componentContext, {
+			size: 30,
+			defaultIconSize: 22,
+			folderIconSize: 22,
+			folderIconD: Icons.folder,
+			startIconD: Icons.play,
+			stopIconD: Icons.stop
+		});
 		expect(parent.children.length).not.toEqual(0);
 	});
 });
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component-view.ts b/designer/src/workspace/start-stop-root/start-stop-root-component-view.ts
@@ -6,17 +6,15 @@ import { ComponentContext } from '../../component-context';
 import { DefaultSequenceComponent } from '../sequence/default-sequence-component';
 import { SequencePlaceIndicator } from '../../designer-extension';
 import { Badges } from '../badges/badges';
-
-const SIZE = 30;
-const DEFAULT_ICON_SIZE = 22;
-const FOLDER_ICON_SIZE = 18;
+import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
 
 export class StartStopRootComponentView implements ComponentView {
 	public static create(
 		parent: SVGElement,
 		sequence: Sequence,
 		parentPlaceIndicator: SequencePlaceIndicator | null,
-		context: ComponentContext
+		context: ComponentContext,
+		cfg: StartStopRootComponentViewConfiguration
 	): StartStopRootComponentView {
 		const g = Dom.svg('g', {
 			class: 'sqd-root-start-stop'
@@ -36,24 +34,24 @@ export class StartStopRootComponentView implements ComponentView {
 		);
 		const view = sequenceComponent.view;
 
-		const x = view.joinX - SIZE / 2;
-		const endY = SIZE + view.height;
+		const x = view.joinX - cfg.size / 2;
+		const endY = cfg.size + view.height;
 
-		const iconSize = parentPlaceIndicator ? FOLDER_ICON_SIZE : DEFAULT_ICON_SIZE;
-		const startCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.play, iconSize);
+		const iconSize = parentPlaceIndicator ? cfg.folderIconSize : cfg.defaultIconSize;
+		const startCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.startIconD, cfg.size, iconSize);
 		Dom.translate(startCircle, x, 0);
 		g.appendChild(startCircle);
 
-		Dom.translate(view.g, 0, SIZE);
+		Dom.translate(view.g, 0, cfg.size);
 
-		const endCircle = createCircle(parentPlaceIndicator ? Icons.folder : Icons.stop, iconSize);
+		const endCircle = createCircle(parentPlaceIndicator ? cfg.folderIconD : cfg.stopIconD, cfg.size, iconSize);
 		Dom.translate(endCircle, x, endY);
 		g.appendChild(endCircle);
 
 		let startPlaceholder: Placeholder | null = null;
 		let endPlaceholder: Placeholder | null = null;
 		if (parentPlaceIndicator) {
-			const size = new Vector(SIZE, SIZE);
+			const size = new Vector(cfg.size, cfg.size);
 			startPlaceholder = context.services.placeholder.createForArea(
 				g,
 				size,
@@ -73,12 +71,12 @@ export class StartStopRootComponentView implements ComponentView {
 			Dom.translate(endPlaceholder.view.g, x, endY);
 		}
 
-		const badges = Badges.createForRoot(g, new Vector(x + SIZE, 0), context);
+		const badges = Badges.createForRoot(g, new Vector(x + cfg.size, 0), context);
 
 		return new StartStopRootComponentView(
 			g,
 			view.width,
-			view.height + SIZE * 2,
+			view.height + cfg.size * 2,
 			view.joinX,
 			sequenceComponent,
 			startPlaceholder,
@@ -103,8 +101,8 @@ export class StartStopRootComponentView implements ComponentView {
 	}
 }
 
-function createCircle(d: string, iconSize: number): SVGGElement {
-	const r = SIZE / 2;
+function createCircle(d: string, size: number, iconSize: number): SVGGElement {
+	const r = size / 2;
 	const circle = Dom.svg('circle', {
 		class: 'sqd-root-start-stop-circle',
 		cx: r,
@@ -115,7 +113,7 @@ function createCircle(d: string, iconSize: number): SVGGElement {
 	const g = Dom.svg('g');
 	g.appendChild(circle);
 
-	const offset = (SIZE - iconSize) / 2;
+	const offset = (size - iconSize) / 2;
 	const icon = Icons.appendPath(g, 'sqd-root-start-stop-icon', d, iconSize);
 	Dom.translate(icon, offset, offset);
 	return g;
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component.spec.ts b/designer/src/workspace/start-stop-root/start-stop-root-component.spec.ts
@@ -1,3 +1,4 @@
+import { Icons } from '../../core';
 import { Dom } from '../../core/dom';
 import { createComponentContextStub } from '../../test-tools/stubs';
 import { StartStopRootComponent } from './start-stop-root-component';
@@ -6,7 +7,14 @@ describe('StartStopRootComponent', () => {
 	it('create() creates component', () => {
 		const parent = Dom.svg('svg');
 		const componentContext = createComponentContextStub();
-		const component = StartStopRootComponent.create(parent, [], null, componentContext);
+		const component = StartStopRootComponent.create(parent, [], null, componentContext, {
+			size: 30,
+			defaultIconSize: 22,
+			folderIconSize: 22,
+			folderIconD: Icons.folder,
+			startIconD: Icons.play,
+			stopIconD: Icons.stop
+		});
 
 		expect(component).toBeDefined();
 	});
diff --git a/designer/src/workspace/start-stop-root/start-stop-root-component.ts b/designer/src/workspace/start-stop-root/start-stop-root-component.ts
@@ -4,15 +4,17 @@ import { ComponentContext } from '../../component-context';
 import { StartStopRootComponentView } from './start-stop-root-component-view';
 import { SequencePlaceIndicator } from '../../designer-extension';
 import { StepComponent } from '../step-component';
+import { StartStopRootComponentViewConfiguration } from './start-stop-root-component-view-configuration';
 
 export class StartStopRootComponent implements Component {
 	public static create(
 		parentElement: SVGElement,
 		sequence: Sequence,
 		parentPlaceIndicator: SequencePlaceIndicator | null,
-		context: ComponentContext
+		context: ComponentContext,
+		viewConfiguration: StartStopRootComponentViewConfiguration
 	): StartStopRootComponent {
-		const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context);
+		const view = StartStopRootComponentView.create(parentElement, sequence, parentPlaceIndicator, context, viewConfiguration);
 		return new StartStopRootComponent(view);
 	}
 
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
@@ -13,7 +13,7 @@ function embedStylesheet(url) {
 	document.write(`<link href="${url}" rel="stylesheet">`);
 }
 
-const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.6';
+const baseUrl = isTestEnv() ? '../designer' : '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.24.7';
 
 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.24.6",
+	"version": "0.24.7",
 	"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.24.6"
+		"sequential-workflow-designer": "^0.24.7"
 	},
 	"devDependencies": {
 		"@rollup/plugin-node-resolve": "^15.0.1",
@@ -63,7 +63,7 @@
 		"prettier": "^3.2.5",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sequential-workflow-designer": "^0.24.6",
+		"sequential-workflow-designer": "^0.24.7",
 		"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.24.6",
+	"version": "0.24.7",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.24.6"
+		"sequential-workflow-designer": "^0.24.7"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.24.6",
+		"sequential-workflow-designer": "^0.24.7",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "sequential-workflow-designer",`
`3`	`3`	`"description": "Customizable no-code component for building flow-based programming applications.",`
`4`		`- "version": "0.24.6",`
	`4`	`+ "version": "0.24.7",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`
Original file line number	Diff line number	Diff line change
`@@ -135,7 +135,7 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu`
`135`	`135`	`services.grid = LineGridExtension.create();`
`136`	`136`	`}`
`137`	`137`	`if (!services.rootComponent) {`
`138`		`- services.rootComponent = new StartStopRootComponentExtension();`
	`138`	`+ services.rootComponent = StartStopRootComponentExtension.create();`
`139`	`139`	`}`
`140`	`140`	`if (!services.sequenceComponent) {`
`141`	`141`	`services.sequenceComponent = new DefaultSequenceComponentExtension();`