Skip to content

Commit 7327ed7

Browse files
b4rtazb4rtaz
authored
Merge pull request #15 from nocode-js/develop
0.5.0.
2 parents 7ca6de4 + 76aca4f commit 7327ed7

34 files changed

+563
-240
lines changed

‎CHANGELOG.md

+11
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
## 0.5.0
2+
3+
* Fixed losing the disabled state during dragging.
4+
* Fixed steps rendering with long labels.
5+
* Added to the global editor and the step editor the common class: `sqd-editor`.
6+
7+
#### Breaking Changes
8+
9+
* Changed a behavior of the default zoom. From now the designer shows a whole flow at the start.
10+
* Zoom is aligned to the predefined constants.
11+
112
## 0.4.0
213

314
This version brings rendering speed improvements. Check the `stress-test.html` example. This version contains many internal changes to support the `folder` component in the pro version.

‎README.md

+11-9
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@ Features:
1212
* full generic & configurable,
1313
* light/dark themes,
1414
* works on modern browsers,
15-
* works on mobile.
15+
* works on mobile,
16+
* the definition is stored as JSON.
1617

1718
🤩 Don't miss [the pro version](https://github.com/nocode-js/sequential-workflow-designer-pro-demo).
1819

1920
## 👀 Examples
2021

21-
* [📐 Simple Flow](https://nocode-js.github.io/sequential-workflow-designer/examples/simple-flow.html)
22+
* [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
2223
* [❎ Fullscreen](https://nocode-js.github.io/sequential-workflow-designer/examples/fullscreen.html)
2324
* [🌅 Image Filter](https://nocode-js.github.io/sequential-workflow-designer/examples/image-filter.html)
24-
* [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
25-
* [⏩ Live Testing](https://nocode-js.github.io/sequential-workflow-designer/examples/live-testing.html)
2625
* [🔴 Particles](https://nocode-js.github.io/sequential-workflow-designer/examples/particles.html)
26+
* [⛅ Light Dark](https://nocode-js.github.io/sequential-workflow-designer/examples/light-dark.html)
2727
* [🤖 Code Generator](https://nocode-js.github.io/sequential-workflow-designer/examples/code-generator.html)
28-
* [🔩 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
28+
* [📐 Simple Flow](https://nocode-js.github.io/sequential-workflow-designer/examples/simple-flow.html)
29+
* [🌻 Rendering Test](https://nocode-js.github.io/sequential-workflow-designer/examples/rendering-test.html)
30+
* [🚄 Stress Test](https://nocode-js.github.io/sequential-workflow-designer/examples/stress-test.html)
2931

3032
Pro:
3133

@@ -71,10 +73,10 @@ Add the below code to your head section in HTML document.
7173
```html
7274
<head>
7375
...
74-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer.css" rel="stylesheet">
75-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer-light.css" rel="stylesheet">
76-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/css/designer-dark.css" rel="stylesheet">
77-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.4.0/dist/index.umd.js"></script>
76+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/css/designer.css" rel="stylesheet">
77+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/css/designer-light.css" rel="stylesheet">
78+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/css/designer-dark.css" rel="stylesheet">
79+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.5.0/dist/index.umd.js"></script>
7880
```
7981

8082
Call the designer by:

‎designer/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sequential-workflow-designer",
3-
"version": "0.4.0",
3+
"version": "0.5.0",
44
"main": "./lib/index.mjs",
55
"types": "./lib/index.d.ts",
66
"repository": {
@@ -17,9 +17,10 @@
1717
},
1818
"scripts": {
1919
"prepare": "cp ../LICENSE LICENSE && cp ../README.md README.md",
20+
"clean": "rm -rf lib && rm -rf build && rm -rf dist",
2021
"start": "rollup -c --watch",
21-
"start:clean": "rm -rf lib && rm -rf build && npm run start",
22-
"build": "rollup -c",
22+
"start:clean": "yarn clean && npm run start",
23+
"build": "yarn clean && rollup -c",
2324
"test": "karma start",
2425
"test:single": "karma start --single-run",
2526
"eslint": "eslint ./src --ext .ts",

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

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Vector } from '../core/vector';
22
import { Step } from '../definition';
33
import { DesignerContext } from '../designer-context';
4-
import { Placeholder, StepComponent, StepComponentState } from '../workspace/component';
4+
import { Placeholder, StepComponent } from '../workspace/component';
55
import { Behavior } from './behavior';
66
import { DragStepView } from './drag-step-behavior-view';
77
import { PlaceholderFinder } from './placeholder-finder';
@@ -15,7 +15,7 @@ export class DragStepBehavior implements Behavior {
1515
designerContext: DesignerContext,
1616
componentContext: ComponentContext,
1717
step: Step,
18-
movingStepComponent?: StepComponent
18+
draggedStepComponent?: StepComponent
1919
): DragStepBehavior {
2020
const view = DragStepView.create(step, designerContext.configuration, componentContext);
2121
return new DragStepBehavior(
@@ -24,7 +24,7 @@ export class DragStepBehavior implements Behavior {
2424
designerContext.state,
2525
step,
2626
designerContext.definitionModifier,
27-
movingStepComponent
27+
draggedStepComponent
2828
);
2929
}
3030

@@ -41,15 +41,15 @@ export class DragStepBehavior implements Behavior {
4141
private readonly designerState: DesignerState,
4242
private readonly step: Step,
4343
private readonly definitionModifier: DefinitionModifier,
44-
private readonly movingStepComponent?: StepComponent
44+
private readonly draggedStepComponent?: StepComponent
4545
) {}
4646

4747
public onStart(position: Vector) {
4848
let offset: Vector;
49-
if (this.movingStepComponent) {
50-
this.movingStepComponent.setState(StepComponentState.dragging);
49+
if (this.draggedStepComponent) {
50+
this.draggedStepComponent.setIsDisabled(true);
5151

52-
const clientPosition = this.movingStepComponent.view.getClientPosition();
52+
const clientPosition = this.draggedStepComponent.view.getClientPosition();
5353
offset = position.subtract(clientPosition);
5454
} else {
5555
offset = new Vector(this.view.width / 2, this.view.height / 2);
@@ -98,10 +98,10 @@ export class DragStepBehavior implements Behavior {
9898
let modified = false;
9999

100100
if (!interrupt && this.currentPlaceholder) {
101-
if (this.movingStepComponent) {
101+
if (this.draggedStepComponent) {
102102
modified = this.definitionModifier.tryMove(
103-
this.movingStepComponent.parentSequence,
104-
this.movingStepComponent.step,
103+
this.draggedStepComponent.parentSequence,
104+
this.draggedStepComponent.step,
105105
this.currentPlaceholder.parentSequence,
106106
this.currentPlaceholder.index
107107
);
@@ -114,8 +114,8 @@ export class DragStepBehavior implements Behavior {
114114
}
115115
}
116116
if (!modified) {
117-
if (this.movingStepComponent) {
118-
this.movingStepComponent.setState(StepComponentState.default);
117+
if (this.draggedStepComponent) {
118+
this.draggedStepComponent.setIsDisabled(false);
119119
}
120120
if (this.currentPlaceholder) {
121121
this.currentPlaceholder.setIsHover(false);

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ describe('SelectStepBehavior', () => {
77
let selectedStepId: string | null = null;
88

99
const step = createStepStub();
10-
const stepComponent = jasmine.createSpyObj<StepComponent>('StepComponent', ['setState'], {
10+
const stepComponent = jasmine.createSpyObj<StepComponent>('StepComponent', ['setIsDisabled'], {
1111
step
1212
});
1313
const designerContext = createDesignerContextStub();

‎designer/src/smart-editor/global-editor-view.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { EditorView } from './editor';
44
export class GlobalEditorView implements EditorView {
55
public static create(content: HTMLElement): GlobalEditorView {
66
const se = Dom.element('div', {
7-
class: 'sqd-global-editor'
7+
class: 'sqd-editor sqd-global-editor'
88
});
99
se.appendChild(content);
1010
return new GlobalEditorView(se);

‎designer/src/smart-editor/step-editor-view.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { EditorView } from './editor';
44
export class StepEditorView implements EditorView {
55
public static create(content: HTMLElement): StepEditorView {
66
const root = Dom.element('div', {
7-
class: 'sqd-step-editor'
7+
class: 'sqd-editor sqd-step-editor'
88
});
99
root.appendChild(content);
1010
return new StepEditorView(root);

‎designer/src/workspace/childless-step-component.ts

+7-16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Sequence, Step } from '../definition';
22
import { StepsConfiguration } from '../designer-configuration';
3-
import { ClickBehavior, ClickDetails, ClickResult, ComponentView, StepComponent, StepComponentState } from './component';
3+
import { ClickBehavior, ClickDetails, ClickResult, ComponentView, StepComponent } from './component';
44

55
export interface ChildlessComponentView extends ComponentView {
66
resolveClick(click: ClickDetails): ClickBehavior | null;
@@ -42,21 +42,12 @@ export class ChildlessStepComponent<S extends Step> implements StepComponent {
4242
this.view.setIsDragging(isDragging);
4343
}
4444

45-
public setState(state: StepComponentState) {
46-
switch (state) {
47-
case StepComponentState.default:
48-
this.view.setIsDisabled(false);
49-
this.view.setIsSelected(false);
50-
break;
51-
case StepComponentState.selected:
52-
this.view.setIsDisabled(false);
53-
this.view.setIsSelected(true);
54-
break;
55-
case StepComponentState.dragging:
56-
this.view.setIsDisabled(true);
57-
this.view.setIsSelected(false);
58-
break;
59-
}
45+
public setIsDisabled(isDisabled: boolean) {
46+
this.view.setIsDisabled(isDisabled);
47+
}
48+
49+
public setIsSelected(isSelected: boolean) {
50+
this.view.setIsSelected(isSelected);
6051
}
6152

6253
public validate(): boolean {

‎designer/src/workspace/common-views/label-view.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { LabelView } from './label-view';
44
describe('LabelView', () => {
55
it('create() creates view', () => {
66
const parent = Dom.svg('svg');
7-
LabelView.create(parent, 0, 0, 'test');
7+
LabelView.create(parent, 0, 'test', 'primary');
88
expect(parent.children.length).not.toEqual(0);
99
});
1010
});

‎designer/src/workspace/common-views/label-view.ts

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
import { Dom } from '../../core/dom';
22

3-
const LABEL_HEIGHT = 22;
3+
export const LABEL_HEIGHT = 22;
44
const LABEL_PADDING_X = 10;
55
const MIN_LABEL_WIDTH = 50;
66

77
export class LabelView {
8-
public static create(parent: SVGElement, x: number, y: number, text: string, theme?: string) {
8+
public static create(parent: SVGElement, y: number, text: string, theme: 'primary' | 'secondary'): LabelView {
9+
const g = Dom.svg('g', {
10+
class: 'sqd-label'
11+
});
12+
parent.appendChild(g);
13+
914
const nameText = Dom.svg('text', {
1015
class: 'sqd-label-text',
11-
x,
1216
y: y + LABEL_HEIGHT / 2
1317
});
1418
nameText.textContent = text;
15-
parent.appendChild(nameText);
16-
const nameWidth = Math.max(nameText.getBBox().width + LABEL_PADDING_X * 2, MIN_LABEL_WIDTH);
19+
g.appendChild(nameText);
20+
const width = Math.max(nameText.getBBox().width + LABEL_PADDING_X * 2, MIN_LABEL_WIDTH);
1721

1822
const nameRect = Dom.svg('rect', {
19-
class: 'sqd-label-rect',
20-
width: nameWidth,
23+
class: `sqd-label-rect sqd-label-${theme}`,
24+
width: width,
2125
height: LABEL_HEIGHT,
22-
x: x - nameWidth / 2,
26+
x: -width / 2,
2327
y,
2428
rx: 10,
2529
ry: 10
2630
});
27-
if (theme) {
28-
nameRect.classList.add(`sqd-label-${theme}`);
29-
}
30-
parent.insertBefore(nameRect, nameText);
31+
g.insertBefore(nameRect, nameText);
32+
return new LabelView(g, width, LABEL_HEIGHT);
3133
}
34+
35+
public constructor(public readonly g: SVGGElement, public readonly width: number, public readonly height: number) {}
3236
}

‎designer/src/workspace/common-views/region-view.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { ClickDetails } from '../component';
44

55
export class RegionView {
66
public static create(parent: SVGElement, widths: number[], height: number): RegionView {
7-
const totalWidth = widths.reduce((c, v) => c + v, 0);
7+
const totalWidth = widths.reduce((result, width) => result + width, 0);
88

99
const lines: SVGLineElement[] = [
1010
drawLine(parent, 0, 0, totalWidth, 0),

‎designer/src/workspace/component.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,6 @@ export interface StepComponent extends Component {
5454
step: Step;
5555
parentSequence: Sequence;
5656

57-
setState(state: StepComponentState): void;
58-
}
59-
60-
export enum StepComponentState {
61-
default,
62-
selected,
63-
dragging
57+
setIsSelected(isSelected: boolean): void;
58+
setIsDisabled(isDisabled: boolean): void;
6459
}

‎designer/src/workspace/container-step/container-step-component-view.ts

+15-11
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@ import { ClickDetails, ComponentView } from '../component';
55
import { SequenceComponent } from '../sequence/sequence-component';
66
import { InputView } from '../common-views/input-view';
77
import { JoinView } from '../common-views/join-view';
8-
import { LabelView } from '../common-views/label-view';
8+
import { LabelView, LABEL_HEIGHT } from '../common-views/label-view';
99
import { RegionView } from '../common-views/region-view';
1010
import { ValidationErrorView } from '../common-views/validation-error-view';
1111
import { ComponentContext } from '../component-context';
1212

1313
const PADDING_TOP = 20;
1414
const PADDING_X = 20;
15-
const LABEL_HEIGHT = 22;
1615

1716
export class ContainerStepComponentView implements ComponentView {
1817
public static create(parent: SVGElement, step: ContainerStep, context: ComponentContext): ContainerStepComponentView {
@@ -21,25 +20,30 @@ export class ContainerStepComponentView implements ComponentView {
2120
});
2221
parent.appendChild(g);
2322

24-
const sequenceComponent = SequenceComponent.create(g, step.sequence, context);
25-
Dom.translate(sequenceComponent.view.g, PADDING_X, PADDING_TOP + LABEL_HEIGHT);
23+
const labelView = LabelView.create(g, PADDING_TOP, step.name, 'primary');
24+
const component = SequenceComponent.create(g, step.sequence, context);
2625

27-
const width = sequenceComponent.view.width + PADDING_X * 2;
28-
const height = sequenceComponent.view.height + PADDING_TOP + LABEL_HEIGHT;
29-
const joinX = sequenceComponent.view.joinX + PADDING_X;
26+
const halfOfWidestElement = labelView.width / 2;
27+
const offsetLeft = Math.max(halfOfWidestElement - component.view.joinX, 0) + PADDING_X;
28+
const offsetRight = Math.max(halfOfWidestElement - (component.view.width - component.view.joinX), 0) + PADDING_X;
3029

31-
LabelView.create(g, joinX, PADDING_TOP, step.name);
30+
const viewWidth = offsetLeft + component.view.width + offsetRight;
31+
const viewHeight = PADDING_TOP + LABEL_HEIGHT + component.view.height;
32+
const joinX = component.view.joinX + offsetLeft;
33+
34+
Dom.translate(labelView.g, joinX, 0);
35+
Dom.translate(component.view.g, offsetLeft, PADDING_TOP + LABEL_HEIGHT);
3236

3337
const iconUrl = context.configuration.iconUrlProvider ? context.configuration.iconUrlProvider(step.componentType, step.type) : null;
3438
const inputView = InputView.createRectInput(g, joinX, 0, iconUrl);
3539

3640
JoinView.createStraightJoin(g, new Vector(joinX, 0), PADDING_TOP);
3741

38-
const regionView = RegionView.create(g, [width], height);
42+
const regionView = RegionView.create(g, [viewWidth], viewHeight);
3943

40-
const validationErrorView = ValidationErrorView.create(g, width, 0);
44+
const validationErrorView = ValidationErrorView.create(g, viewWidth, 0);
4145

42-
return new ContainerStepComponentView(g, width, height, joinX, sequenceComponent, inputView, regionView, validationErrorView);
46+
return new ContainerStepComponentView(g, viewWidth, viewHeight, joinX, component, inputView, regionView, validationErrorView);
4347
}
4448

4549
private constructor(

0 commit comments

Comments
 (0)