Skip to content

Commit d0e6758

Browse files
b4rtazb4rtaz
committedJan 16, 2023
0.5.3.
1 parent a706a5b commit d0e6758

29 files changed

+175
-93
lines changed
 

‎CHANGELOG.md

+5
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

+4-4
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

+3-3
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

+2-2
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

+7-5
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

+1-1
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

+11-5
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

+1-1
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

+17-9
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

+10-10
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) {

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

+5-8
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ export class ControlBar {
1313
view.bindResetButtonClick(() => bar.onResetButtonClicked());
1414
view.bindZoomInButtonClick(() => bar.onZoomInButtonClicked());
1515
view.bindZoomOutButtonClick(() => bar.onZoomOutButtonClicked());
16-
view.bindMoveButtonClick(() => bar.onMoveButtonClicked());
16+
view.bindDisableDragButtonClick(() => bar.onMoveButtonClicked());
1717
view.bindDeleteButtonClick(() => bar.onDeleteButtonClicked());
1818
context.state.onIsReadonlyChanged.subscribe(() => bar.onIsReadonlyChanged());
1919
context.state.onSelectedStepIdChanged.subscribe(() => bar.onSelectedStepIdChanged());
20-
context.state.onIsMoveModeEnabledChanged.subscribe(i => bar.onIsMoveModeEnabledChanged(i));
20+
context.state.onIsDragDisabledChanged.subscribe(i => bar.onIsDragDisabledChanged(i));
2121

2222
if (context.historyController) {
2323
view.bindUndoButtonClick(() => bar.onUndoButtonClicked());
@@ -50,10 +50,7 @@ export class ControlBar {
5050
}
5151

5252
private onMoveButtonClicked() {
53-
this.state.toggleIsMoveModeEnabled();
54-
if (this.state.selectedStepId) {
55-
this.state.setSelectedStepId(null);
56-
}
53+
this.state.toggleIsDragDisabled();
5754
}
5855

5956
private onUndoButtonClicked() {
@@ -82,8 +79,8 @@ export class ControlBar {
8279
this.refreshDeleteButtonVisibility();
8380
}
8481

85-
private onIsMoveModeEnabledChanged(isEnabled: boolean) {
86-
this.view.setIsMoveButtonDisabled(!isEnabled);
82+
private onIsDragDisabledChanged(isEnabled: boolean) {
83+
this.view.setDisableDragButtonDisabled(!isEnabled);
8784
}
8885

8986
private onDefinitionChanged() {

‎designer/src/core/icons.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { Dom } from './dom';
22

33
// Source: https://fonts.google.com/icons or https://github.com/google/material-design-icons
44
export class Icons {
5-
public static dirIn = 'M42.05 42.25H11.996v-7.12h17.388L6 11.746 11.546 6.2 34.93 29.584V12.196h7.12V42.25z';
6-
public static dirOut = 'M6 6.2h30.054v7.12H18.666L42.05 36.704l-5.546 5.546L13.12 18.866v17.388H6V6.2z';
5+
public static folderIn = 'M42.05 42.25H11.996v-7.12h17.388L6 11.746 11.546 6.2 34.93 29.584V12.196h7.12V42.25z';
6+
public static folderOut = 'M6 6.2h30.054v7.12H18.666L42.05 36.704l-5.546 5.546L13.12 18.866v17.388H6V6.2z';
77
public static center =
88
'M9 42q-1.2 0-2.1-.9Q6 40.2 6 39v-8.6h3V39h8.6v3Zm21.4 0v-3H39v-8.6h3V39q0 1.2-.9 2.1-.9.9-2.1.9ZM24 31.15q-3.15 0-5.15-2-2-2-2-5.15 0-3.15 2-5.15 2-2 5.15-2 3.15 0 5.15 2 2 2 2 5.15 0 3.15-2 5.15-2 2-5.15 2ZM6 17.6V9q0-1.2.9-2.1Q7.8 6 9 6h8.6v3H9v8.6Zm33 0V9h-8.6V6H39q1.2 0 2.1.9.9.9.9 2.1v8.6Z';
99
public static zoomIn =
@@ -27,6 +27,10 @@ export class Icons {
2727
public static expand = 'm24 30.75-12-12 2.15-2.15L24 26.5l9.85-9.85L36 18.8Z';
2828
public static alert =
2929
'M24 42q-1.45 0-2.475-1.025Q20.5 39.95 20.5 38.5q0-1.45 1.025-2.475Q22.55 35 24 35q1.45 0 2.475 1.025Q27.5 37.05 27.5 38.5q0 1.45-1.025 2.475Q25.45 42 24 42Zm-3.5-12V6h7v24Z';
30+
public static play = 'M14.75 40.15V7.55l25.6 16.3Z';
31+
public static stop = 'M10.75 37.25V10.7H37.3v26.55Z';
32+
public static folder =
33+
'M7.05 40q-1.2 0-2.1-.925-.9-.925-.9-2.075V11q0-1.15.9-2.075Q5.85 8 7.05 8h14l3 3h17q1.15 0 2.075.925.925.925.925 2.075v23q0 1.15-.925 2.075Q42.2 40 41.05 40Z';
3034

3135
public static appendPath(parent: SVGElement, pathClassName: string, d: string, size: number): SVGGElement {
3236
const g = Dom.svg('g');

‎designer/src/designer-state.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class DesignerState {
2929
public readonly onFolderPathChanged = new SimpleEvent<string[]>();
3030
public readonly onIsReadonlyChanged = new SimpleEvent<boolean>();
3131
public readonly onIsDraggingChanged = new SimpleEvent<boolean>();
32-
public readonly onIsMoveModeEnabledChanged = new SimpleEvent<boolean>();
32+
public readonly onIsDragDisabledChanged = new SimpleEvent<boolean>();
3333
public readonly onIsToolboxCollapsedChanged = new SimpleEvent<boolean>();
3434
public readonly onIsSmartEditorCollapsedChanged = new SimpleEvent<boolean>();
3535
public readonly onDefinitionChanged = new SimpleEvent<DefinitionChangedEvent>();
@@ -41,7 +41,7 @@ export class DesignerState {
4141
public selectedStepId: string | null = null;
4242
public folderPath: string[] = [];
4343
public isDragging = false;
44-
public isMoveModeEnabled = false;
44+
public isDragDisabled = false;
4545

4646
public constructor(
4747
public definition: Definition,
@@ -99,9 +99,9 @@ export class DesignerState {
9999
}
100100
}
101101

102-
public toggleIsMoveModeEnabled() {
103-
this.isMoveModeEnabled = !this.isMoveModeEnabled;
104-
this.onIsMoveModeEnabledChanged.forward(this.isMoveModeEnabled);
102+
public toggleIsDragDisabled() {
103+
this.isDragDisabled = !this.isDragDisabled;
104+
this.onIsDragDisabledChanged.forward(this.isDragDisabled);
105105
}
106106

107107
public toggleIsToolboxCollapsed() {

‎designer/src/workspace/common-views/rect-placeholder-view.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class RectPlaceholderView {
3434
g.appendChild(rect);
3535

3636
if (direction) {
37-
const iconD = direction === RectPlaceholderDirection.in ? Icons.dirIn : Icons.dirOut;
37+
const iconD = direction === RectPlaceholderDirection.in ? Icons.folderIn : Icons.folderOut;
3838
const icon = Icons.appendPath(g, 'sqd-placeholder-icon-path', iconD, ICON_SIZE);
3939
Dom.translate(icon, (width - ICON_SIZE) / 2, (height - ICON_SIZE) / 2);
4040
}

0 commit comments

Comments
 (0)