Skip to content

Commit ea0b69e

Browse files
b4rtazb4rtaz
committed
0.2.0.
1 parent 56cd994 commit ea0b69e

35 files changed

+502
-139
lines changed

‎CHANGELOG.md

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
## 0.2.0
2+
3+
#### Editor's Context
4+
5+
We've changed an approach how the editors should notify the designer about changes in the definition. We've deleted `revalidate()` and `notifiyDefinitionChanged()` methods from the `Designer` class. Instead of this, now editors receive an editor's context.
6+
7+
```ts
8+
interface StepEditorContext {
9+
notifyNameChanged(): void;
10+
notifyPropertiesChanged(): void;
11+
}
12+
13+
interface GlobalEditorContext {
14+
notifyPropertiesChanged(): void;
15+
}
16+
17+
const config = {
18+
// ...
19+
editors: {
20+
stepEditorProvider: (step: Step, context: StepEditorContext) => {
21+
// ...
22+
context.notifyPropertiesChanged();
23+
// ...
24+
},
25+
globalEditorProvider: (definition: Definition, context: GlobalEditorContext) => {
26+
// ...
27+
context.notifyPropertiesChanged();
28+
// ...
29+
}
30+
}
31+
};
32+
```
33+
34+
#### Type Requirments
35+
36+
The `type` of a step cannot contain special characters from now. Check [the type validator](src/core/type-validator.ts).
37+
38+
* ✅ `someType`
39+
* ✅ `some-type`
40+
* ✅ `some_type`
41+
* ❌ `some type`
42+
* ❌ `someType!`
43+
44+
By this, we could add the `type` to an element's class on the SVG canvas. That allows to customize components by CSS. Check [this example](examples/code-generator.html).
45+
46+
#### Restrictions
47+
48+
We added `canInsertStep`, `canMoveStep` and `canDeleteStep` callbacks to the `StepsConfiguration`. You may restrict some activity in the designer by this.
49+
50+
```js
51+
const config = {
52+
// ...
53+
steps: {
54+
canInsertStep: (step, targetSequence, targetIndex) => {
55+
return targetSequence.length < 5;
56+
},
57+
canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
58+
return !step.properties['isLocked'];
59+
},
60+
canDeleteStep: (step, parentSequence) => {
61+
return step.name !== 'x';
62+
}
63+
// ...
64+
}
65+
};
66+
```
67+
68+
## 0.1.x
69+
70+
The designer released.

‎README.md

+14-5
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,10 @@ Add the below code to your head section in HTML document.
6262
```html
6363
<head>
6464
...
65-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/css/designer.css" rel="stylesheet">
66-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/css/designer-light.css" rel="stylesheet">
67-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/css/designer-dark.css" rel="stylesheet">
68-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9/lib/designer.js"></script>
65+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.0/css/designer.css" rel="stylesheet">
66+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.0/css/designer-light.css" rel="stylesheet">
67+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.0/css/designer-dark.css" rel="stylesheet">
68+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.0/lib/designer.js"></script>
6969
```
7070

7171
Call the designer by:
@@ -120,7 +120,16 @@ const configuration = {
120120
return `icon-${componentType}-${type}.svg`;
121121
},
122122
validator: (step) => {
123-
return step.name.toLowerCase() === step.name;
123+
return /^[a-z]+$/.test(step.name);
124+
},
125+
canInsertStep: (step, targetSequence, targetIndex) => {
126+
return targetSequence.length < 5;
127+
},
128+
canMoveStep: (sourceSequence, step, targetSequence, targetIndex) => {
129+
return !step.properties['isLocked'];
130+
},
131+
canDeleteStep: (step, parentSequence) => {
132+
return step.name !== 'x';
124133
}
125134
},
126135

‎examples/assets/code-generator.js

+30-12
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
/* global window, document, sequentialWorkflowDesigner */
1+
/* global window, document, sequentialWorkflowDesigner, alert, confirm, console */
22

33
let designer;
44

5-
const nextId = () => sequentialWorkflowDesigner.nextId();
5+
const nextId = () => sequentialWorkflowDesigner.utils.nextId();
66

77
function createTaskStep(type, name, properties) {
88
return {
@@ -102,14 +102,27 @@ class CodeGenerator {
102102
}
103103
}
104104

105+
function canPlaceStep(step, parentSequence) {
106+
const definition = designer.getDefinition();
107+
const parentSteps = sequentialWorkflowDesigner.utils.getParents(definition, parentSequence);
108+
109+
console.log('parent steps', parentSteps.map(s => typeof s === 'string' ? s : s.name));
110+
111+
if (step.type === 'loop' && parentSteps.length >= 2) {
112+
alert('Max depth is 2');
113+
return false;
114+
}
115+
return true;
116+
}
117+
105118
class Editors {
106119
static createGlobalEditor() {
107120
const root = document.createElement('div');
108121
root.innerText = 'Select step.';
109122
return root;
110123
}
111124

112-
static createStepEditor(step) {
125+
static createStepEditor(step, editorContext) {
113126
const root = document.createElement('div');
114127
const title = document.createElement('h3');
115128
title.innerText = `Edit ${step.type} step`;
@@ -121,7 +134,7 @@ class Editors {
121134
nameInput.value = step.name;
122135
nameInput.addEventListener('input', () => {
123136
step.name = nameInput.value;
124-
designer.notifiyDefinitionChanged();
137+
editorContext.notifyNameChanged();
125138
});
126139
root.appendChild(nameItem);
127140

@@ -138,7 +151,7 @@ class Editors {
138151
? parseInt(input.value)
139152
: input.value;
140153
step.properties[propName] = value;
141-
designer.notifiyDefinitionChanged();
154+
editorContext.notifyPropertiesChanged();
142155
});
143156
root.appendChild(item);
144157
}
@@ -176,7 +189,7 @@ const configuration = {
176189
Steps.setNumber('set number', 'X', 0),
177190
Steps.assignVar('assign var', 'X', 'Y'),
178191
Steps.addVar('add var', 'X', 'Y'),
179-
Steps.loop('loop', 'i', 0, 5)
192+
Steps.loop('loop', 'j', 0, 5)
180193
]
181194
}
182195
]
@@ -190,16 +203,21 @@ const configuration = {
190203
},
191204
validator: () => {
192205
return true;
206+
},
207+
canInsertStep: (step, targetSequence) => {
208+
return canPlaceStep(step, targetSequence);
209+
},
210+
canMoveStep: (_, step, targetSequence) => {
211+
return canPlaceStep(step, targetSequence);
212+
},
213+
canDeleteStep: (step) => {
214+
return confirm(`Are you sure? (${step.name})`);
193215
}
194216
},
195217

196218
editors: {
197-
globalEditorProvider: () => {
198-
return Editors.createGlobalEditor();
199-
},
200-
stepEditorProvider: (step) => {
201-
return Editors.createStepEditor(step);
202-
}
219+
globalEditorProvider: Editors.createGlobalEditor,
220+
stepEditorProvider: Editors.createStepEditor
203221
}
204222
};
205223

‎examples/assets/fullscreen.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ const configuration = {
6666

6767
validator: (step) => {
6868
return !step.properties['isInvalid'];
69-
}
69+
},
7070
},
7171

7272
editors: {
@@ -79,7 +79,7 @@ const configuration = {
7979
return root;
8080
},
8181

82-
stepEditorProvider: (step) => {
82+
stepEditorProvider: (step, editorContext) => {
8383
const root = document.createElement('div');
8484
root.innerHTML = '<h5></h5> <p>is invalid: <input type="checkbox" /></p>';
8585
const title = root.getElementsByTagName('h5')[0];
@@ -88,7 +88,7 @@ const configuration = {
8888
input.checked = !!step.properties['isInvalid'];
8989
input.addEventListener('click', () => {
9090
step.properties['isInvalid'] = !!input.checked;
91-
designer.revalidate();
91+
editorContext.notifyPropertiesChanged();
9292
});
9393
return root;
9494
}

‎examples/assets/lib.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/* global location, document */
22

33
function isTestEnv() {
4-
return location.hostname.toLowerCase() === 'localhost' ||
5-
location.hostname.startsWith('192.168.');
4+
const hostname = location.hostname.toLowerCase();
5+
return hostname === 'localhost' ||
6+
hostname.startsWith('192.168.');
67
}
78

89
function embedScript(url) {
@@ -15,7 +16,7 @@ function embedStylesheet(url) {
1516

1617
const baseUrl = isTestEnv()
1718
? '..'
18-
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.1.9';
19+
: '//cdn.jsdelivr.net/npm/sequential-workflow-designer@0.2.0';
1920

2021
embedScript(`${baseUrl}/lib/designer.js`);
2122
embedStylesheet(`${baseUrl}/css/designer.css`);

‎examples/assets/live-testing.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -127,34 +127,34 @@ function globalEditorProvider(definition) {
127127
return container;
128128
}
129129

130-
function stepEditorProvider(step) {
130+
function stepEditorProvider(step, editorContext) {
131131
const container = document.createElement('div');
132132
appendTitle(container, 'Step ' + step.type);
133133

134134
appendTextField(container, 'Name', step.name,
135135
v => {
136136
step.name = v;
137-
designer.notifiyDefinitionChanged();
137+
editorContext.notifyNameChanged();
138138
});
139139
if (step.properties['var'] !== undefined) {
140140
appendTextField(container, 'Variable', step.properties['var'],
141141
v => {
142142
step.properties['var'] = v;
143-
designer.revalidate();
143+
editorContext.notifyPropertiesChanged();
144144
});
145145
}
146146
if (step.properties['val']) {
147147
appendTextField(container, 'Value', step.properties['val'],
148148
v => {
149149
step.properties['val'] = parseInt(v, 10);
150-
designer.revalidate();
150+
editorContext.notifyPropertiesChanged();
151151
});
152152
}
153153
if (step.properties['text']) {
154154
appendTextField(container, 'Text', step.properties['text'],
155155
v => {
156156
step.properties['text'] = v;
157-
designer.revalidate();
157+
editorContext.notifyPropertiesChanged();
158158
});
159159
}
160160
return container;

‎examples/code-generator.html

+11
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,17 @@
1919
.sqd-smart-editor p {margin: 0; padding: 10px;}
2020
.sqd-smart-editor p label {display: block; padding: 0 0 5px;}
2121
.sqd-smart-editor input {width: 100%; box-sizing: border-box; border: 1px solid silver; padding: 6px; border-radius: 5px;}
22+
23+
/* types */
24+
25+
.sqd-toolbox-item.sqd-type-setNumber {background: #E6F2FF;}
26+
.sqd-task-group.sqd-type-setNumber .sqd-task-rect {fill: #E6F2FF !important;}
27+
28+
.sqd-toolbox-item.sqd-type-assignVar {background: #FFEEE6;}
29+
.sqd-task-group.sqd-type-assignVar .sqd-task-rect {fill: #FFEEE6 !important;}
30+
31+
.sqd-toolbox-item.sqd-type-addVar {background: #E6FFE6;}
32+
.sqd-task-group.sqd-type-addVar .sqd-task-rect {fill: #E6FFE6 !important;}
2233
</style>
2334
</head>
2435
<body>

‎package-lock.json

+9-9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "sequential-workflow-designer",
3-
"version": "0.1.9",
3+
"version": "0.2.0",
44
"main": "./lib/designer.js",
55
"types": "./lib/designer.d.ts",
66
"repository": {
@@ -41,7 +41,7 @@
4141
"rollup": "^2.75.3",
4242
"rollup-plugin-dts": "^4.2.2",
4343
"rollup-plugin-typescript2": "^0.31.2",
44-
"typescript": "^4.6.4"
44+
"typescript": "^4.8.3"
4545
},
4646
"keywords": [
4747
"workflow",

0 commit comments

Comments
 (0)