0.18.0 (#106)

b4rtaz · web-flow · commit 41549b6a009f · 2023-12-12T16:48:54.000+01:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 0.18.0
+
+This version fixes the problem with scrolling [#105](https://github.com/nocode-js/sequential-workflow-designer/issues/105).
+
 ## 0.17.0
 
 This version introduces a new argument for editor providers: `isReadonly`. Now when the designer is in the read-only mode, the editor providers can render the read-only version of the editor.
diff --git a/README.md b/README.md
@@ -96,10 +96,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.17.0/css/designer.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-light.css" rel="stylesheet">
-<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-dark.css" rel="stylesheet">
-<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/dist/index.umd.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer-light.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0/css/designer-dark.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.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.17.0",
+	"version": "0.18.0",
 	"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.17.0"
+		"sequential-workflow-designer": "^0.18.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": "^15.2.9",
 		"@angular/router": "^15.2.9",
 		"rxjs": "~7.8.0",
-		"sequential-workflow-designer": "^0.17.0",
-		"sequential-workflow-designer-angular": "^0.17.0",
+		"sequential-workflow-designer": "^0.18.0",
+		"sequential-workflow-designer-angular": "^0.18.0",
 		"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 @@ send@0.18.0:
     range-parser "~1.2.1"
     statuses "2.0.1"
 
-sequential-workflow-designer-angular@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.17.0.tgz#c16fc5d629180af3f9d609fc654bf2b08ced59bc"
-  integrity sha512-Qhs0LQRHwiLp9K4pETnVhmeeaGqe7Kv055ix7arqFi8HYYkNHga/7IWIJLVpjpk2AomM8DIpf4t2r6NrSr4jnQ==
+sequential-workflow-designer-angular@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.18.0.tgz#2646e33cb50c5854cf29dd92c2838f03449c28ee"
+  integrity sha512-gYxRxNP1Y8d+m9C0TmkQ0F9jcDrb1hsZVxQmLtTaJcTYTigxz0Hr0ATzhbZTbxVX1A2Gwr0apXj3oO7hpUMXhw==
   dependencies:
     tslib "^2.3.0"
 
-sequential-workflow-designer@^0.17.0:
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.17.0.tgz#fb126b4a45fef107ac54b041e116ddaca607e48f"
-  integrity sha512-RzKn99irxTqsLn84RkMp7Q6XnvVjufG3xTKUy89uSC9a4CgG0k70jL36zLXxpW7cGEjjzGK/LgIeQ9/kiUOInQ==
+sequential-workflow-designer@^0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.18.0.tgz#20833b793103096be31009fca20891d59433020a"
+  integrity sha512-B/jdes+Vxkjec+GRSMePQ9AtssJ1Da1yaHT1XKK1wkKbBpmBUXqYEel0C1NBVhp+JliKMMyN2rACiUlbXBHpVA==
   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.17.0",
-		"sequential-workflow-designer-react": "^0.17.0"
+		"sequential-workflow-designer": "^0.18.0",
+		"sequential-workflow-designer-react": "^0.18.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.17.0",
-		"sequential-workflow-designer-svelte": "^0.17.0"
+		"sequential-workflow-designer": "^0.18.0",
+		"sequential-workflow-designer-svelte": "^0.18.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.17.0",
+	"version": "0.18.0",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
diff --git a/designer/src/behaviors/drag-step-behavior.ts b/designer/src/behaviors/drag-step-behavior.ts
@@ -49,9 +49,8 @@ export class DragStepBehavior implements Behavior {
 				this.draggedStepComponent.view.width === this.view.component.width &&
 				this.draggedStepComponent.view.height === this.view.component.height;
 			if (hasSameSize) {
-				const scroll = new Vector(window.scrollX, window.scrollY);
 				// Mouse cursor will be positioned on the same place as the source component.
-				const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);
+				const pagePosition = this.draggedStepComponent.view.getClientPosition();
 				offset = position.subtract(pagePosition);
 			}
 		}
diff --git a/designer/src/core/get-absolute-position.spec.ts b/designer/src/core/get-absolute-position.spec.ts
@@ -0,0 +1,19 @@
+import { getAbsolutePosition } from './get-absolute-position';
+
+describe('getAbsolutePosition', () => {
+	it('returns correct position', () => {
+		const el = document.createElement('div');
+		el.style.position = 'absolute';
+		el.style.left = '10px';
+		el.style.top = '20px';
+
+		document.body.appendChild(el);
+
+		const position = getAbsolutePosition(el);
+
+		expect(position.x).toBe(10);
+		expect(position.y).toBe(20);
+
+		document.body.removeChild(el);
+	});
+});
diff --git a/designer/src/core/get-absolute-position.ts b/designer/src/core/get-absolute-position.ts
@@ -0,0 +1,6 @@
+import { Vector } from './vector';
+
+export function getAbsolutePosition(element: Element): Vector {
+	const rect = element.getBoundingClientRect();
+	return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
+}
diff --git a/designer/src/core/index.ts b/designer/src/core/index.ts
@@ -1,6 +1,7 @@
 export * from './icons';
 export * from './object-cloner';
 export * from './dom';
+export * from './get-absolute-position';
 export * from './vector';
 export * from './uid';
 export * from './simple-event';
diff --git a/designer/src/workspace/common-views/region-view.ts b/designer/src/workspace/common-views/region-view.ts
@@ -1,4 +1,5 @@
 import { Dom } from '../../core/dom';
+import { getAbsolutePosition } from '../../core/get-absolute-position';
 import { Vector } from '../../core/vector';
 import { ClickDetails } from '../component';
 
@@ -25,8 +26,7 @@ export class RegionView {
 	public constructor(private readonly lines: SVGLineElement[], private readonly width: number, private readonly height: number) {}
 
 	public getClientPosition(): Vector {
-		const rect = this.lines[0].getBoundingClientRect();
-		return new Vector(rect.x, rect.y);
+		return getAbsolutePosition(this.lines[0]);
 	}
 
 	public resolveClick(click: ClickDetails): boolean {
diff --git a/designer/src/workspace/task-step/task-step-component-view.ts b/designer/src/workspace/task-step/task-step-component-view.ts
@@ -1,4 +1,5 @@
 import { Dom } from '../../core/dom';
+import { getAbsolutePosition } from '../../core/get-absolute-position';
 import { Vector } from '../../core/vector';
 import { Step } from '../../definition';
 import { StepComponentViewContext, StepComponentViewFactory, StepContext } from '../../designer-extension';
@@ -76,8 +77,7 @@ export const createTaskStepComponentViewFactory =
 				return !!outputView;
 			},
 			getClientPosition(): Vector {
-				const r = rect.getBoundingClientRect();
-				return new Vector(r.x, r.y);
+				return getAbsolutePosition(rect);
 			},
 			resolveClick(click: ClickDetails): true | null {
 				return g.contains(click.element) ? true : null;
diff --git a/designer/src/workspace/workspace-view.ts b/designer/src/workspace/workspace-view.ts
@@ -5,6 +5,7 @@ import { Sequence } from '../definition';
 import { Grid, SequencePlaceIndicator } from '../designer-extension';
 import { ComponentContext } from '../component-context';
 import { Component } from './component';
+import { getAbsolutePosition } from '../core/get-absolute-position';
 
 let lastGridPatternId = 0;
 
@@ -90,8 +91,7 @@ export class WorkspaceView {
 	}
 
 	public getCanvasPosition(): Vector {
-		const rect = this.canvas.getBoundingClientRect();
-		return new Vector(rect.x + window.scrollX, rect.y + window.scrollY);
+		return getAbsolutePosition(this.canvas);
 	}
 
 	public getCanvasSize(): Vector {
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/sequential-workflow-designer@0.17.0';
+	: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.18.0';
 
 embedScript(`${baseUrl}/dist/index.umd.js`);
 embedStylesheet(`${baseUrl}/css/designer.css`);
diff --git a/examples/assets/scrollable-page.js b/examples/assets/scrollable-page.js
@@ -1,15 +1,31 @@
 /* global window, document, sequentialWorkflowDesigner */
 
-function createStep(name) {
+const uid = sequentialWorkflowDesigner.Uid.next;
+
+function createTaskStep(name) {
 	return {
-		id: sequentialWorkflowDesigner.Uid.next(),
+		id: uid(),
 		componentType: 'task',
 		type: 'task',
 		name,
 		properties: {}
 	};
 }
 
+function createSwitchStep(name) {
+	return {
+		id: uid(),
+		componentType: 'switch',
+		type: 'switch',
+		name,
+		properties: {},
+		branches: {
+			true: [],
+			false: [],
+		}
+	};
+}
+
 function createEditor(text) {
 	const editor = document.createElement('div');
 	editor.innerText = text;
@@ -18,9 +34,10 @@ function createEditor(text) {
 
 const definition = {
 	sequence: [
-		createStep('Save e-mail'),
-		createStep('Read file'),
-		createStep('Delete file'),
+		createTaskStep('Save e-mail'),
+		createTaskStep('Read file'),
+		createTaskStep('Delete file'),
+		createSwitchStep('Condition')
 	],
 	properties: {}
 };
@@ -29,7 +46,7 @@ const configuration = {
 		groups: [
 			{
 				name: 'Test',
-				steps: Array(20).fill(null).map((_, i) => createStep(`Task ${i}`))
+				steps: Array(20).fill(null).map((_, i) => createTaskStep(`Task ${i}`))
 			}
 		]
 	},
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
 		"eslint": "yarn workspaces run eslint",
 		"prettier": "yarn workspaces run prettier",
 		"prettier:fix": "yarn workspaces run prettier:fix",
-		"serve": "http-server -c-1 ./",
+		"serve": "http-server -c-1 -a 127.0.0.1 ./",
 		"ci": "bash .github/workflows/main.sh"
 	},
 	"workspaces": [
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.17.0",
+	"version": "0.18.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.17.0"
+		"sequential-workflow-designer": "^0.18.0"
 	},
 	"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.17.0",
+		"sequential-workflow-designer": "^0.18.0",
 		"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.17.0",
+	"version": "0.18.0",
 	"license": "MIT",
 	"scripts": {
 		"prepare": "cp ../LICENSE LICENSE",
@@ -28,10 +28,10 @@
 	],
 	"peerDependencies": {
 		"svelte": "^4.0.0",
-		"sequential-workflow-designer": "^0.17.0"
+		"sequential-workflow-designer": "^0.18.0"
 	},
 	"devDependencies": {
-		"sequential-workflow-designer": "^0.17.0",
+		"sequential-workflow-designer": "^0.18.0",
 		"@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.17.0",`
	`4`	`+ "version": "0.18.0",`
`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
`@@ -49,9 +49,8 @@ export class DragStepBehavior implements Behavior {`
`49`	`49`	`this.draggedStepComponent.view.width === this.view.component.width &&`
`50`	`50`	`this.draggedStepComponent.view.height === this.view.component.height;`
`51`	`51`	`if (hasSameSize) {`
`52`		`- const scroll = new Vector(window.scrollX, window.scrollY);`
`53`	`52`	`// Mouse cursor will be positioned on the same place as the source component.`
`54`		`- const pagePosition = this.draggedStepComponent.view.getClientPosition().add(scroll);`
	`53`	`+ const pagePosition = this.draggedStepComponent.view.getClientPosition();`
`55`	`54`	`offset = position.subtract(pagePosition);`
`56`	`55`	`}`
`57`	`56`	`}`