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

Lines changed: 11 additions & 0 deletions
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

Lines changed: 11 additions & 9 deletions
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

Lines changed: 4 additions & 3 deletions
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

Lines changed: 12 additions & 12 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 7 additions & 16 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 16 additions & 12 deletions
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
}

0 commit comments

Comments
 (0)