0.27.0. (#173)

b4rtaz · web-flow · commit 9b30613f09d5 · 2024-11-20T17:36:11.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 0.27.0
+
+This version adds the ability to configure the border style of the toolbox, control bar, and context menu using SASS mixins. It also updates the internal configuration structure for the container and switch step components.
+
 # 0.26.1
 
 This version fixes the bug with scaling in the pinch-to-zoom feature. Additionally, this version improves the rendering of lines that join steps.
diff --git a/README.md b/README.md
@@ -104,10 +104,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.26.1/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/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.26.1",
+	"version": "0.27.0",
 	"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.26.1"
+		"sequential-workflow-designer": "^0.27.0"
 	},
 	"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.26.1",
-		"sequential-workflow-designer-angular": "^0.26.1",
+		"sequential-workflow-designer": "^0.27.0",
+		"sequential-workflow-designer-angular": "^0.27.0",
 		"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.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.26.1.tgz#a7958048852b1fad66e2dde71a7cc6c740f8ccdc"
-  integrity sha512-eggkWg0FIxhAC4Awuee3ysTcSQUerRj14+G802QpzIFblYqgElK0TQBEjRgEjRnjoljaZIf4RipMQhFIIQZS7w==
+sequential-workflow-designer-angular@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.27.0.tgz#0c95ba93550c8c26043aa087f9207a1331dea2cd"
+  integrity sha512-g4UqxOkSiHC3bOIQusueiK30j/zXjkzdEtfgD/5Wdt6kKHftYrViABRXhoeobjMvwBY9H0q4HqF2nSFi2cd9ng==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.26.1.tgz#5a3fc4e992f76c46bc746547cf040fef8768dc29"
-  integrity sha512-R3zqYzZrj3wJ7zPgn9+7bvtNTB2kaTP31wW9MJD3ZgOUrTfvfpz+voIwKhknT9t4/cL7YH+TJF//QkwSp6BUlw==
+sequential-workflow-designer@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.27.0.tgz#157666cca79d993d5c52a127774d62d3a7e001df"
+  integrity sha512-wWpIIO3DQzm8iViNZQdjTfoj+0iD17Qncvqpkto+oXPAmrIRB3gf346aqlA03ze7H3F+FsL/elFGQl4bzxSVDw==
   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.26.1",
-		"sequential-workflow-designer-react": "^0.26.1"
+		"sequential-workflow-designer": "^0.27.0",
+		"sequential-workflow-designer-react": "^0.27.0"
 	},
 	"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.26.1",
-		"sequential-workflow-designer-svelte": "^0.26.1"
+		"sequential-workflow-designer": "^0.27.0",
+		"sequential-workflow-designer-svelte": "^0.27.0"
 	},
 	"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.26.1",
+	"version": "0.27.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/sass/designer-theme.scss b/designer/sass/designer-theme.scss
@@ -3,6 +3,7 @@
 	$panelBackgroundColor: #fff,
 	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
 	$panelBorderRadius: 10px,
+	$panelBorder: none,
 	$headerTextColor: #000,
 	$filterBackground: #fff,
 	$filterTextColor: #000,
@@ -17,6 +18,7 @@
 		.sqd-toolbox {
 			background: $panelBackgroundColor;
 			box-shadow: $panelBoxShadow;
+			border: $panelBorder;
 			border-radius: $panelBorderRadius;
 		}
 		.sqd-toolbox-header-title {
@@ -75,6 +77,7 @@
 	$panelBackgroundColor: #fff,
 	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
 	$panelBorderRadius: 10px,
+	$panelBorder: none,
 	$buttonBackground: #fff,
 	$buttonBackgroundHovered: #fff,
 	$buttonBorder: (1px solid #c3c3c3),
@@ -87,6 +90,7 @@
 		.sqd-control-bar {
 			background: $panelBackgroundColor;
 			box-shadow: $panelBoxShadow;
+			border: $panelBorder;
 			border-radius: $panelBorderRadius;
 		}
 		.sqd-control-bar-button {
@@ -131,6 +135,7 @@
 	$panelBackgroundColor: #fff,
 	$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
 	$panelBorderRadius: 4px,
+	$panelBorder: none,
 	$groupTextColor: #888,
 	$itemTextColor: #000,
 	$itemBackgroundColorHovered: #eee,
@@ -139,6 +144,7 @@
 	.sqd-theme-#{$theme}.sqd-context-menu {
 		background: $panelBackgroundColor;
 		box-shadow: $panelBoxShadow;
+		border: $panelBorder;
 		border-radius: $panelBorderRadius;
 	}
 	.sqd-theme-#{$theme} .sqd-context-menu-group {
diff --git a/designer/src/designer-extension.ts b/designer/src/designer-extension.ts
@@ -21,6 +21,7 @@ import {
 export interface DesignerExtension {
 	steps?: StepExtension[];
 	stepComponentViewWrapper?: StepComponentViewWrapperExtension;
+	stepBadgesDecorator?: StepBadgesDecoratorExtension;
 	clickBehaviorWrapperExtension?: ClickBehaviorWrapperExtension;
 	badges?: BadgeExtension[];
 	uiComponents?: UiComponentExtension[];
@@ -91,6 +92,16 @@ export interface StepComponentViewWrapperExtension {
 	wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
 }
 
+// StepBadgesDecoratorExtension
+
+export interface StepBadgesDecoratorExtension {
+	create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator;
+}
+
+export interface BadgesDecorator {
+	update(): void;
+}
+
 // ClickBehaviorWrapperExtension
 
 export interface ClickBehaviorWrapperExtension {
diff --git a/designer/src/services.ts b/designer/src/services.ts
@@ -20,6 +20,7 @@ import { DefaultStepComponentViewWrapperExtension } from './workspace/default-st
 import { LineGridExtension } from './workspace/grid/line-grid-extension';
 import { DefaultRegionComponentViewExtension } from './workspace/region/default-region-component-view-extension';
 import { DefaultClickBehaviorWrapperExtension } from './behaviors/default-click-behavior-wrapper-extension';
+import { DefaultStepBadgesDecoratorExtension } from './workspace/badges/default-step-badges-decorator-extension';
 
 export type Services = Required<DesignerExtension>;
 
@@ -40,6 +41,9 @@ function merge(services: Partial<Services>, extensions: DesignerExtension[]) {
 		if (ext.stepComponentViewWrapper) {
 			services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
 		}
+		if (ext.stepBadgesDecorator) {
+			services.stepBadgesDecorator = ext.stepBadgesDecorator;
+		}
 		if (ext.clickBehaviorWrapperExtension) {
 			services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
 		}
@@ -96,6 +100,9 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu
 	if (!services.stepComponentViewWrapper) {
 		services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
 	}
+	if (!services.stepBadgesDecorator) {
+		services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
+	}
 	if (!services.clickBehaviorWrapperExtension) {
 		services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
 	}
diff --git a/designer/src/workspace/badges/badges.ts b/designer/src/workspace/badges/badges.ts
@@ -1,30 +1,29 @@
 import { ComponentContext } from '../../component-context';
 import { Dom, Vector } from '../../core';
-import { StepContext } from '../../designer-extension';
+import { BadgesDecorator, StepContext } from '../../designer-extension';
 import { Badge, BadgesResult, ClickCommand, ClickDetails, StepComponentView } from '../component';
-
-const BADGE_GAP = 4;
+import { DefaultBadgesDecorator } from './default-badges-decorator';
 
 export class Badges {
 	public static createForStep(stepContext: StepContext, view: StepComponentView, componentContext: ComponentContext): Badges {
 		const g = createG(view.g);
 		const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
-		const position = new Vector(view.width, 0);
-		return new Badges(g, position, badges);
+		const decorator = componentContext.services.stepBadgesDecorator.create(g, view, badges);
+		return new Badges(badges, decorator);
 	}
 
 	public static createForRoot(parentElement: SVGGElement, position: Vector, componentContext: ComponentContext): Badges {
 		const g = createG(parentElement);
 		const badges = componentContext.services.badges.map(ext => {
 			return ext.createForRoot ? ext.createForRoot(g, componentContext) : null;
 		});
-		return new Badges(g, position, badges);
+		const decorator = new DefaultBadgesDecorator(position, badges, g);
+		return new Badges(badges, decorator);
 	}
 
 	private constructor(
-		private readonly g: SVGGElement,
-		private readonly position: Vector,
-		private readonly badges: (Badge | null)[]
+		private readonly badges: (Badge | null)[],
+		private readonly decorator: BadgesDecorator
 	) {}
 
 	public update(result: BadgesResult) {
@@ -35,22 +34,7 @@ export class Badges {
 				result[i] = badge.update(result[i]);
 			}
 		}
-
-		let offsetX = 0;
-		let maxHeight = 0;
-		let j = 0;
-		for (let i = 0; i < count; i++) {
-			const badge = this.badges[i];
-			if (badge && badge.view) {
-				offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
-				maxHeight = Math.max(maxHeight, badge.view.height);
-				Dom.translate(badge.view.g, -offsetX, 0);
-				offsetX += BADGE_GAP;
-				j++;
-			}
-		}
-
-		Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
+		this.decorator.update();
 	}
 
 	public resolveClick(click: ClickDetails): ClickCommand | null {
diff --git a/designer/src/workspace/badges/default-badges-decorator.ts b/designer/src/workspace/badges/default-badges-decorator.ts
@@ -0,0 +1,30 @@
+import { Dom, Vector } from '../../core';
+import { BadgesDecorator } from '../../designer-extension';
+import { Badge } from '../component';
+
+const BADGE_GAP = 4;
+
+export class DefaultBadgesDecorator implements BadgesDecorator {
+	public constructor(
+		private readonly position: Vector,
+		private readonly badges: (Badge | null)[],
+		private readonly g: SVGGElement
+	) {}
+
+	public update() {
+		let offsetX = 0;
+		let maxHeight = 0;
+		let j = 0;
+		for (let i = 0; i < this.badges.length; i++) {
+			const badge = this.badges[i];
+			if (badge && badge.view) {
+				offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
+				maxHeight = Math.max(maxHeight, badge.view.height);
+				Dom.translate(badge.view.g, -offsetX, 0);
+				offsetX += BADGE_GAP;
+				j++;
+			}
+		}
+		Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
+	}
+}
diff --git a/designer/src/workspace/badges/default-step-badges-decorator-extension.ts b/designer/src/workspace/badges/default-step-badges-decorator-extension.ts
@@ -0,0 +1,11 @@
+import { Vector } from '../../core';
+import { BadgesDecorator, StepBadgesDecoratorExtension } from '../../designer-extension';
+import { StepComponentView, Badge } from '../component';
+import { DefaultBadgesDecorator } from './default-badges-decorator';
+
+export class DefaultStepBadgesDecoratorExtension implements StepBadgesDecoratorExtension {
+	public create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator {
+		const position = new Vector(view.width, 0);
+		return new DefaultBadgesDecorator(position, badges, g);
+	}
+}
diff --git a/designer/src/workspace/common-views/input-view.spec.ts b/designer/src/workspace/common-views/input-view.spec.ts
@@ -9,7 +9,7 @@ describe('InputView', () => {
 	});
 
 	it('createRectInput() creates view', () => {
-		const view = InputView.createRectInput(parent, 10, 10, 16, 20, null);
+		const view = InputView.createRectInput(parent, 10, 10, 16, 4, 20, null);
 		expect(view).toBeDefined();
 		expect(parent.children.length).not.toEqual(0);
 	});
diff --git a/designer/src/workspace/common-views/input-view.ts b/designer/src/workspace/common-views/input-view.ts
@@ -6,6 +6,7 @@ export class InputView {
 		x: number,
 		y: number,
 		size: number,
+		radius: number,
 		iconSize: number,
 		iconUrl: string | null
 	): InputView {
@@ -18,8 +19,8 @@ export class InputView {
 			height: size,
 			x: x - size / 2,
 			y: y + size / -2 + 0.5,
-			rx: 4,
-			ry: 4
+			rx: radius,
+			ry: radius
 		});
 		g.appendChild(rect);
 
diff --git a/designer/src/workspace/container-step/container-step-component-view-configuration.ts b/designer/src/workspace/container-step/container-step-component-view-configuration.ts
@@ -4,6 +4,8 @@ export interface ContainerStepComponentViewConfiguration {
 	paddingTop: number;
 	paddingX: number;
 	inputSize: number;
+	inputRadius: number;
 	inputIconSize: number;
+	autoHideInputOnDrag: boolean;
 	label: LabelViewConfiguration;
 }
diff --git a/designer/src/workspace/container-step/container-step-component-view.spec.ts b/designer/src/workspace/container-step/container-step-component-view.spec.ts
@@ -32,6 +32,8 @@ describe('ContainerStepComponentView', () => {
 		const factory = createContainerStepComponentViewFactory({
 			inputIconSize: 10,
 			inputSize: 14,
+			inputRadius: 4,
+			autoHideInputOnDrag: true,
 			paddingTop: 20,
 			paddingX: 20,
 			label: {
diff --git a/designer/src/workspace/container-step/container-step-component-view.ts b/designer/src/workspace/container-step/container-step-component-view.ts
@@ -31,8 +31,11 @@ export const createContainerStepComponentViewFactory =
 			Dom.translate(labelView.g, joinX, 0);
 			Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
 
-			const iconUrl = viewContext.getStepIconUrl();
-			const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
+			let inputView: InputView | null = null;
+			if (cfg.inputSize > 0) {
+				const iconUrl = viewContext.getStepIconUrl();
+				inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
+			}
 
 			JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
 
@@ -55,7 +58,9 @@ export const createContainerStepComponentViewFactory =
 					return result === true || (result === null && g.contains(click.element)) ? true : result;
 				},
 				setIsDragging(isDragging: boolean) {
-					inputView.setIsHidden(isDragging);
+					if (cfg.autoHideInputOnDrag && inputView) {
+						inputView.setIsHidden(isDragging);
+					}
 				},
 				setIsSelected(isSelected: boolean) {
 					regionView.setIsSelected(isSelected);
diff --git a/designer/src/workspace/container-step/container-step-extension.ts b/designer/src/workspace/container-step/container-step-extension.ts
@@ -8,7 +8,9 @@ const defaultConfiguration: ContainerStepExtensionConfiguration = {
 		paddingTop: 20,
 		paddingX: 20,
 		inputSize: 18,
+		inputRadius: 4,
 		inputIconSize: 14,
+		autoHideInputOnDrag: true,
 		label: {
 			height: 22,
 			paddingX: 10,
diff --git a/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts b/designer/src/workspace/switch-step/switch-step-component-view-configuration.ts
diff --git a/designer/src/workspace/switch-step/switch-step-component-view.spec.ts b/designer/src/workspace/switch-step/switch-step-component-view.spec.ts
diff --git a/designer/src/workspace/switch-step/switch-step-component-view.ts b/designer/src/workspace/switch-step/switch-step-component-view.ts
diff --git a/designer/src/workspace/switch-step/switch-step-extension.ts b/designer/src/workspace/switch-step/switch-step-extension.ts
diff --git a/examples/assets/lib.js b/examples/assets/lib.js
diff --git a/react/package.json b/react/package.json
diff --git a/svelte/package.json b/svelte/package.json

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.26.1",`
	`4`	`+ "version": "0.27.0",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"main": "./lib/esm/index.js",`
`7`	`7`	`"types": "./lib/index.d.ts",`