Skip to content

Commit b34e19d

Browse files
b4rtazb4rtaz
authored
Merge pull request #20 from nocode-js/develop
0.5.3.
2 parents 03e36a4 + d0e6758 commit b34e19d

29 files changed

+175
-93
lines changed

‎CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## 0.5.3
2+
3+
* The disabled drag mode doesn't block the step selecting anymore.
4+
* Replaced custom shapes by icons from the `Icons` class for `StartStopComponentView`.
5+
16
## 0.5.2
27

38
This version introduces the first release of the [Sequential Workflow Designer for React](./react/) package.

‎README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,10 @@ Add the below code to your head section in HTML document.
7474
```html
7575
<head>
7676
...
77-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.2/css/designer.css" rel="stylesheet">
78-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.2/css/designer-light.css" rel="stylesheet">
79-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.2/css/designer-dark.css" rel="stylesheet">
80-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.2/dist/index.umd.js"></script>
77+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.3/css/designer.css" rel="stylesheet">
78+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.3/css/designer-light.css" rel="stylesheet">
79+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.3/css/designer-dark.css" rel="stylesheet">
80+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.3/dist/index.umd.js"></script>
8181
```
8282

8383
Call the designer by:

‎demos/react-app/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"name": "sequential-workflow-designer-react-app-demo",
3-
"version": "1.0.0",
3+
"version": "0.5.3",
44
"private": true,
55
"dependencies": {
66
"react": "^18.2.0",
77
"react-dom": "^18.2.0",
8-
"sequential-workflow-designer": "^0.5.2",
8+
"sequential-workflow-designer": "^0.5.3",
99
"sequential-workflow-designer-react": "^0.5.2"
1010
},
1111
"devDependencies": {
@@ -47,4 +47,4 @@
4747
"last 1 safari version"
4848
]
4949
}
50-
}
50+
}

‎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",
33
"description": "Customizable no-code component for building flow-based programming applications.",
4-
"version": "0.5.2",
4+
"version": "0.5.3",
55
"main": "./lib/index.mjs",
66
"types": "./lib/index.d.ts",
77
"repository": {
@@ -54,4 +54,4 @@
5454
"lowcode",
5555
"flow"
5656
]
57-
}
57+
}

‎designer/src/behaviors/click-behavior-resolver.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,23 @@ export class ClickBehaviorResolver {
1414
private readonly state: DesignerState
1515
) {}
1616

17-
public resolve(rootComponent: Component, element: Element, position: Vector, forceMoveMode: boolean): Behavior {
17+
public resolve(rootComponent: Component, element: Element, position: Vector, forceDisableDrag: boolean): Behavior {
1818
const click: ClickDetails = {
1919
element,
2020
position,
2121
scale: this.state.viewPort.scale
2222
};
2323

24-
const result = !forceMoveMode && !this.state.isMoveModeEnabled ? rootComponent.findByClick(click) : null;
24+
const result = rootComponent.findByClick(click);
2525
if (!result) {
26-
return MoveViewPortBehavior.create(this.state);
26+
return MoveViewPortBehavior.create(this.state, true);
2727
}
2828

2929
switch (result.action.type) {
30-
case ClickBehaviorType.selectStep:
31-
return SelectStepBehavior.create(result.component, this.designerContext, this.componentContext);
30+
case ClickBehaviorType.selectStep: {
31+
const isDragDisabled = forceDisableDrag || this.state.isDragDisabled;
32+
return SelectStepBehavior.create(result.component, isDragDisabled, this.designerContext, this.componentContext);
33+
}
3234

3335
case ClickBehaviorType.openFolder:
3436
return OpenFolderBehavior.create(this.designerContext, element, result);

‎designer/src/behaviors/move-view-port-behavior.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('MoveViewPortBehavior', () => {
1717
scale: 1
1818
});
1919

20-
const behavior = MoveViewPortBehavior.create(context.state);
20+
const behavior = MoveViewPortBehavior.create(context.state, true);
2121
behavior.onStart();
2222

2323
expect(lastViewPort.position.x).toEqual(0);

‎designer/src/behaviors/move-view-port-behavior.ts

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@ import { DesignerState } from '../designer-state';
33
import { Behavior } from './behavior';
44

55
export class MoveViewPortBehavior implements Behavior {
6-
public static create(state: DesignerState): MoveViewPortBehavior {
7-
return new MoveViewPortBehavior(state.viewPort.position, state);
6+
public static create(state: DesignerState, resetSelectedStep: boolean): MoveViewPortBehavior {
7+
return new MoveViewPortBehavior(state.viewPort.position, resetSelectedStep, state);
88
}
99

10-
private constructor(private readonly startPosition: Vector, private readonly state: DesignerState) {}
10+
private constructor(
11+
private readonly startPosition: Vector,
12+
private readonly resetSelectedStep: boolean,
13+
private readonly state: DesignerState
14+
) {}
1115

1216
public onStart() {
13-
const stepId = this.state.tryGetLastStepIdFromFolderPath();
14-
this.state.setSelectedStepId(stepId);
17+
if (this.resetSelectedStep) {
18+
const stepId = this.state.tryGetLastStepIdFromFolderPath();
19+
this.state.setSelectedStepId(stepId);
20+
}
1521
}
1622

1723
public onMove(delta: Vector) {

‎designer/src/behaviors/select-step-behavior.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ describe('SelectStepBehavior', () => {
1414
const componentContext = createComponentContextStub();
1515
designerContext.state.onSelectedStepIdChanged.subscribe(s => (selectedStepId = s));
1616

17-
const behavior = SelectStepBehavior.create(stepComponent, designerContext, componentContext);
17+
const behavior = SelectStepBehavior.create(stepComponent, false, designerContext, componentContext);
1818

1919
behavior.onStart();
2020
behavior.onEnd(false);

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

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,21 @@ import { StepComponent } from '../workspace/component';
55
import { ComponentContext } from '../workspace/component-context';
66
import { Behavior } from './behavior';
77
import { DragStepBehavior } from './drag-step-behavior';
8+
import { MoveViewPortBehavior } from './move-view-port-behavior';
89

910
export class SelectStepBehavior implements Behavior {
1011
public static create(
1112
pressedStepComponent: StepComponent,
13+
isDragDisabled: boolean,
1214
designerContext: DesignerContext,
1315
componentContext: ComponentContext
1416
): SelectStepBehavior {
15-
return new SelectStepBehavior(pressedStepComponent, designerContext, componentContext, designerContext.state);
17+
return new SelectStepBehavior(pressedStepComponent, isDragDisabled, designerContext, componentContext, designerContext.state);
1618
}
1719

1820
private constructor(
1921
private readonly pressedStepComponent: StepComponent,
22+
private readonly isDragDisabled: boolean,
2023
private readonly designerContext: DesignerContext,
2124
private readonly componentContext: ComponentContext,
2225
private readonly state: DesignerState
@@ -27,14 +30,19 @@ export class SelectStepBehavior implements Behavior {
2730
}
2831

2932
public onMove(delta: Vector): Behavior | void {
30-
if (!this.state.isReadonly && delta.distance() > 2) {
31-
this.state.setSelectedStepId(null);
32-
return DragStepBehavior.create(
33-
this.designerContext,
34-
this.componentContext,
35-
this.pressedStepComponent.step,
36-
this.pressedStepComponent
37-
);
33+
if (delta.distance() > 2) {
34+
const canDrag = !this.state.isReadonly && !this.isDragDisabled;
35+
if (canDrag) {
36+
this.state.setSelectedStepId(null);
37+
return DragStepBehavior.create(
38+
this.designerContext,
39+
this.componentContext,
40+
this.pressedStepComponent.step,
41+
this.pressedStepComponent
42+
);
43+
} else {
44+
return MoveViewPortBehavior.create(this.state, false);
45+
}
3846
}
3947
}
4048

‎designer/src/control-bar/control-bar-view.ts

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export class ControlBarView {
77
class: 'sqd-control-bar'
88
});
99

10-
const resetButton = createButton(Icons.center, 'Reset');
10+
const resetButton = createButton(Icons.center, 'Reset view');
1111
root.appendChild(resetButton);
1212

1313
const zoomInButton = createButton(Icons.zoomIn, 'Zoom in');
@@ -26,17 +26,17 @@ export class ControlBarView {
2626
root.appendChild(redoButton);
2727
}
2828

29-
const moveButton = createButton(Icons.move, 'Turn on/off drag and drop');
30-
moveButton.classList.add('sqd-disabled');
31-
root.appendChild(moveButton);
29+
const disableDragButton = createButton(Icons.move, 'Turn on/off drag and drop');
30+
disableDragButton.classList.add('sqd-disabled');
31+
root.appendChild(disableDragButton);
3232

3333
const deleteButton = createButton(Icons.delete, 'Delete selected step');
3434
deleteButton.classList.add('sqd-delete');
3535
deleteButton.classList.add('sqd-hidden');
3636
root.appendChild(deleteButton);
3737

3838
parent.appendChild(root);
39-
return new ControlBarView(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, moveButton, deleteButton);
39+
return new ControlBarView(resetButton, zoomInButton, zoomOutButton, undoButton, redoButton, disableDragButton, deleteButton);
4040
}
4141

4242
private constructor(
@@ -45,7 +45,7 @@ export class ControlBarView {
4545
private readonly zoomOutButton: HTMLElement,
4646
private readonly undoButton: HTMLElement | null,
4747
private readonly redoButton: HTMLElement | null,
48-
private readonly moveButton: HTMLElement,
48+
private readonly disableDragButton: HTMLElement,
4949
private readonly deleteButton: HTMLElement
5050
) {}
5151

@@ -75,8 +75,8 @@ export class ControlBarView {
7575
bindClick(this.redoButton, handler);
7676
}
7777

78-
public bindMoveButtonClick(handler: () => void) {
79-
bindClick(this.moveButton, handler);
78+
public bindDisableDragButtonClick(handler: () => void) {
79+
bindClick(this.disableDragButton, handler);
8080
}
8181

8282
public bindDeleteButtonClick(handler: () => void) {
@@ -87,8 +87,8 @@ export class ControlBarView {
8787
Dom.toggleClass(this.deleteButton, isHidden, 'sqd-hidden');
8888
}
8989

90-
public setIsMoveButtonDisabled(isDisabled: boolean) {
91-
Dom.toggleClass(this.moveButton, isDisabled, 'sqd-disabled');
90+
public setDisableDragButtonDisabled(isDisabled: boolean) {
91+
Dom.toggleClass(this.disableDragButton, isDisabled, 'sqd-disabled');
9292
}
9393

9494
public setUndoButtonDisabled(isDisabled: boolean) {

0 commit comments

Comments
 (0)