Skip to content

Commit 63262a9

Browse files
b4rtazb4rtaz
authored
0.35.0. (#207)
1 parent 4b3ee13 commit 63262a9

16 files changed

Lines changed: 63 additions & 45 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.35.0
2+
3+
This version changes the behavior of the drag step component. The dragged component is now scaled according to the current zoom level of the designer [#206](https://github.com/nocode-js/sequential-workflow-designer/issues/206).
4+
15
# 0.34.1
26

37
This version adds the ability to configure whether the regions of the switch step component and the container step component are clickable. By default, these regions are clickable; when disabled, the components can only be dragged by their labels or icons.

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,10 @@ Add the below code to your head section in HTML document.
106106
```html
107107
<head>
108108
...
109-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer.css" rel="stylesheet">
110-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-light.css" rel="stylesheet">
111-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/css/designer-dark.css" rel="stylesheet">
112-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.34.1/dist/index.umd.js"></script>
109+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer.css" rel="stylesheet">
110+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer-light.css" rel="stylesheet">
111+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/css/designer-dark.css" rel="stylesheet">
112+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.35.0/dist/index.umd.js"></script>
113113
```
114114

115115
Call the designer by:

‎angular/designer/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.34.1",
4+
"version": "0.35.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 19",
1717
"@angular/core": "12 - 19",
18-
"sequential-workflow-designer": "^0.34.1"
18+
"sequential-workflow-designer": "^0.35.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^17.3.9",
2727
"@angular/router": "^17.3.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.34.1",
30-
"sequential-workflow-designer-angular": "^0.34.1",
29+
"sequential-workflow-designer": "^0.35.0",
30+
"sequential-workflow-designer-angular": "^0.35.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.14.6"
3333
},

‎demos/angular-app/yarn.lock‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.34.1:
6748-
version "0.34.1"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.34.1.tgz#f10aa52db9be0268cb869cb582165292a78e5af3"
6750-
integrity sha512-0nOuT4L7k1PPeFQP2XMZxq7XKNDumqSEj3natQfaB/+PuOPE4Dy2hfD552sw7MNTdPRkMzlIPA7JmYdpq5AZbw==
6747+
sequential-workflow-designer-angular@^0.35.0:
6748+
version "0.35.0"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.35.0.tgz#52e266a88161f0d11d82ec6e97faf6804d2fcd82"
6750+
integrity sha512-tDj4Ccmga4j1Ujb7DVyZ6YLxa2VLylyHLbPb9erktdfL2ipR02FT6IbRZN9BR7ROpOqMjxSCMbWug3B3wjGzMg==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.34.1:
6755-
version "0.34.1"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.34.1.tgz#08f9d15ac467f743a5ccae3ef64dea99922b86ea"
6757-
integrity sha512-pvb3sBh1ARNtB+jjeVfrH98QtKXhgff91lPkkJkwlyMHTVoKly1CJxtUb3ADCcY5mze0Zv88GI3Eoz8jATyg2Q==
6754+
sequential-workflow-designer@^0.35.0:
6755+
version "0.35.0"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.35.0.tgz#1849d3c5134338138cee7dadb2e5e5c772fe7c74"
6757+
integrity sha512-AEHfvWhZL/DekiW5nO1f2IA9RWu8X6Rn6g7TLFG1yttvzKPMO3HGFUc7jpHOsCxYX8XLzJ7YO0Q33n8rHhUj5A==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎demos/react-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.34.1",
10-
"sequential-workflow-designer-react": "^0.34.1"
9+
"sequential-workflow-designer": "^0.35.0",
10+
"sequential-workflow-designer-react": "^0.35.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.34.1",
20-
"sequential-workflow-designer-svelte": "^0.34.1"
19+
"sequential-workflow-designer": "^0.35.0",
20+
"sequential-workflow-designer-svelte": "^0.35.0"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.34.1",
4+
"version": "0.35.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/src/behaviors/default-dragged-component.ts‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@ import { ComponentContext } from '../component-context';
33
import { Dom } from '../core';
44
import { DraggedComponent, StepContext } from '../designer-extension';
55

6-
const SAFE_OFFSET = 10;
6+
// We need some padding around the step component to make sure shadows are not clipped.
7+
const PADDING = 10;
78

89
export class DefaultDraggedComponent implements DraggedComponent {
9-
public static create(parent: HTMLElement, step: Step, _: boolean, componentContext: ComponentContext): DefaultDraggedComponent {
10-
const canvas = Dom.svg('svg');
11-
canvas.style.marginLeft = -SAFE_OFFSET + 'px';
12-
canvas.style.marginTop = -SAFE_OFFSET + 'px';
10+
public static create(
11+
parent: HTMLElement,
12+
step: Step,
13+
isAttached: boolean,
14+
componentContext: ComponentContext
15+
): DefaultDraggedComponent {
16+
const scale = isAttached ? componentContext.getViewportScale() : 1;
1317

18+
const canvas = Dom.svg('svg');
1419
parent.appendChild(canvas);
1520

1621
const previewStepContext: StepContext = {
@@ -25,17 +30,18 @@ export class DefaultDraggedComponent implements DraggedComponent {
2530
const stepComponent = componentContext.stepComponentFactory.create(canvas, previewStepContext, componentContext);
2631

2732
Dom.attrs(canvas, {
28-
width: stepComponent.view.width + SAFE_OFFSET * 2,
29-
height: stepComponent.view.height + SAFE_OFFSET * 2
33+
width: stepComponent.view.width + PADDING * 2,
34+
height: stepComponent.view.height + PADDING * 2,
35+
style: `transform: scale(${scale}) translate(${-PADDING}px, ${-PADDING}px); transform-origin: 0 0;`
3036
});
31-
32-
Dom.translate(stepComponent.view.g, SAFE_OFFSET, SAFE_OFFSET);
33-
return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height);
37+
Dom.translate(stepComponent.view.g, PADDING, PADDING);
38+
return new DefaultDraggedComponent(stepComponent.view.width, stepComponent.view.height, scale);
3439
}
3540

3641
private constructor(
3742
public readonly width: number,
38-
public readonly height: number
43+
public readonly height: number,
44+
public readonly scale: number
3945
) {}
4046

4147
public destroy() {

‎designer/src/behaviors/drag-step-behavior.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export class DragStepBehavior implements Behavior {
1717
const view = DragStepView.create(step, isAttached, designerContext.theme, designerContext.componentContext);
1818
return new DragStepBehavior(
1919
view,
20+
step,
2021
designerContext.workspaceController,
2122
designerContext.placeholderController,
2223
designerContext.state,
23-
step,
2424
designerContext.stateModifier,
2525
attachedStepComponent
2626
);
@@ -35,10 +35,10 @@ export class DragStepBehavior implements Behavior {
3535

3636
private constructor(
3737
private readonly view: DragStepView,
38+
private readonly step: Step,
3839
private readonly workspaceController: WorkspaceController,
3940
private readonly placeholderController: PlaceholderController,
4041
private readonly designerState: DesignerState,
41-
private readonly step: Step,
4242
private readonly stateModifier: StateModifier,
4343
private readonly attachedStepComponent?: StepComponent
4444
) {}
@@ -56,13 +56,14 @@ export class DragStepBehavior implements Behavior {
5656
if (hasSameSize) {
5757
// Mouse cursor will be positioned on the same place as the source component.
5858
const pagePosition = this.attachedStepComponent.view.getClientPosition();
59-
offset = position.subtract(pagePosition);
59+
offset = position.subtract(pagePosition).divideByScalar(this.designerState.viewport.scale);
6060
}
6161
}
6262
if (!offset) {
6363
// Mouse cursor will be positioned in the center of the component.
6464
offset = new Vector(this.view.component.width, this.view.component.height).divideByScalar(2);
6565
}
66+
offset = offset.multiplyByScalar(this.view.component.scale);
6667

6768
this.view.setPosition(position.subtract(offset));
6869
this.designerState.setIsDragging(true);

0 commit comments

Comments
 (0)