Skip to content

Commit b1b2846

Browse files
b4rtazb4rtaz
authored
0.17.0. (#103)
1 parent b689399 commit b1b2846

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+372
-280
lines changed

‎CHANGELOG.md

+36
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,39 @@
1+
## 0.17.0
2+
3+
This version introduces a new argument for editor providers: `isReadonly`. Now when the designer is in the read-only mode, the editor providers can render the read-only version of the editor.
4+
5+
### Breaking Changes
6+
7+
This version finally renames the "global editor" into the "root editor". This change is made in the designer package and all wrappers, except the Svelte package. The Svelte package uses a new name from the beginning.
8+
9+
```js
10+
const configuration = {
11+
editors: {
12+
// globalEditorProvider: () => {}, is not supported anymore, use `rootEditorProvider` instead.
13+
rootEditorProvider: (definition, rootContext, isReadonly) => { /* ... */ },
14+
// ...
15+
}
16+
};
17+
```
18+
19+
This version also renames the `sqd-global-editor` class of the root editor into the `sqd-root-editor` class.
20+
21+
### React
22+
23+
```tsx
24+
// globalEditor={} is not supported anymore, use `rootEditor={}` instead.
25+
<SequentialWorkflowDesigner
26+
rootEditor={<RootEditor />} ... />
27+
```
28+
29+
### Angular
30+
31+
```html
32+
<!-- [globalEditor]="" is not supported anymore, use [rootEditor]="" instead. -->
33+
<sqd-designer ...
34+
[rootEditor]="rootEditor"></sqd-designer>
35+
```
36+
137
## 0.16.10
238

339
This version fixes the error: `Failed to execute 'removeChild' on 'Node'` when a user uses the undo feature [#100](https://github.com/nocode-js/sequential-workflow-designer/issues/100).

‎README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -96,10 +96,10 @@ Add the below code to your head section in HTML document.
9696
```html
9797
<head>
9898
...
99-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer.css" rel="stylesheet">
100-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-light.css" rel="stylesheet">
101-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/css/designer-dark.css" rel="stylesheet">
102-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.16.10/dist/index.umd.js"></script>
99+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer.css" rel="stylesheet">
100+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-light.css" rel="stylesheet">
101+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/css/designer-dark.css" rel="stylesheet">
102+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.17.0/dist/index.umd.js"></script>
103103
```
104104

105105
Call the designer by:
@@ -120,10 +120,10 @@ const placeholder = document.getElementById('placeholder');
120120
const definition = {
121121
properties: {
122122
'myProperty': 'my-value',
123-
// global properties...
123+
// root properties...
124124
},
125125
sequence: [
126-
// root steps...
126+
// steps...
127127
]
128128
};
129129

@@ -190,12 +190,12 @@ const configuration = {
190190

191191
editors: {
192192
isCollapsed: false,
193-
globalEditorProvider: (definition, globalContext) => {
193+
rootEditorProvider: (definition, rootContext, isReadonly) => {
194194
const editor = document.createElement('div');
195195
// ...
196196
return editor;
197197
},
198-
stepEditorProvider: (step, stepContext, definition) => {
198+
stepEditorProvider: (step, stepContext, definition, isReadonly) => {
199199
const editor = document.createElement('div');
200200
// ...
201201
return editor;

‎angular/designer/README.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -91,18 +91,18 @@ export class AppComponent {
9191
context.notifyNameChanged();
9292
}
9393

94-
public updateProperty(properties: Properties, name: string, event: Event, context: GlobalEditorContext | StepEditorContext) {
94+
public updateProperty(properties: Properties, name: string, event: Event, context: RootEditorContext | StepEditorContext) {
9595
properties[name] = (event.target as HTMLInputElement).value;
9696
context.notifyPropertiesChanged();
9797
}
9898
}
9999
```
100100

101-
Create a template for the global editor. The value of the `editor` variable implements the `GlobalEditorWrapper` interface.
101+
Create a template for the root editor. The value of the `editor` variable implements the `RootEditorWrapper` interface.
102102

103103
```html
104-
<ng-template #globalEditor let-editor>
105-
<h2>Global Editor</h2>
104+
<ng-template #rootEditor let-editor>
105+
<h2>Root Editor</h2>
106106

107107
<h3>Velocity</h3>
108108
<input type="number"
@@ -112,9 +112,10 @@ Create a template for the global editor. The value of the `editor` variable impl
112112
```
113113

114114
```ts
115-
interface GlobalEditorWrapper {
115+
interface RootEditorWrapper {
116116
definition: Definition;
117-
context: GlobalEditorContext;
117+
context: RootEditorContext;
118+
isReadonly: boolean;
118119
}
119120
```
120121

@@ -141,6 +142,7 @@ interface StepEditorWrapper {
141142
step: Step;
142143
definition: Definition;
143144
context: StepEditorContext;
145+
isReadonly: boolean;
144146
}
145147
```
146148

@@ -157,7 +159,7 @@ At the end attach the designer:
157159
[controlBar]="true"
158160
[contextMenu]="true"
159161
[areEditorsHidden]="false"
160-
[globalEditor]="globalEditor"
162+
[rootEditor]="rootEditor"
161163
[stepEditor]="stepEditor"
162164
(onReady)="onDesignerReady($event)"
163165
(onDefinitionChanged)="onDefinitionChanged($event)"

‎angular/designer/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "sequential-workflow-designer-angular",
33
"description": "Angular wrapper for Sequential Workflow Designer component.",
4-
"version": "0.16.10",
4+
"version": "0.17.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 16",
1717
"@angular/core": "12 - 16",
18-
"sequential-workflow-designer": "^0.16.10"
18+
"sequential-workflow-designer": "^0.17.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎angular/designer/src/designer.component.ts

+21-17
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import {
1919
Definition,
2020
Designer,
2121
DesignerExtension,
22-
GlobalEditorContext,
23-
GlobalEditorProvider,
22+
RootEditorContext,
23+
RootEditorProvider,
2424
KeyboardConfiguration,
2525
Step,
2626
StepEditorContext,
@@ -31,15 +31,17 @@ import {
3131
ValidatorConfiguration
3232
} from 'sequential-workflow-designer';
3333

34-
export interface GlobalEditorWrapper {
34+
export interface RootEditorWrapper {
3535
definition: Definition;
36-
context: GlobalEditorContext;
36+
context: RootEditorContext;
37+
isReadonly: boolean;
3738
}
3839

3940
export interface StepEditorWrapper {
4041
step: Step;
4142
definition: Definition;
4243
context: StepEditorContext;
44+
isReadonly: boolean;
4345
}
4446

4547
export type AngularToolboxConfiguration = Omit<ToolboxConfiguration, 'isCollapsed'>;
@@ -90,8 +92,8 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
9092

9193
@Input('areEditorsHidden')
9294
public areEditorsHidden?: boolean;
93-
@Input('globalEditor')
94-
public globalEditor?: TemplateRef<unknown> | GlobalEditorProvider;
95+
@Input('rootEditor')
96+
public rootEditor?: TemplateRef<unknown> | RootEditorProvider;
9597
@Input('stepEditor')
9698
public stepEditor?: TemplateRef<unknown> | StepEditorProvider;
9799

@@ -198,7 +200,7 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
198200
? false
199201
: {
200202
isCollapsed: this.isEditorCollapsed,
201-
globalEditorProvider: this.globalEditorProvider,
203+
rootEditorProvider: this.rootEditorProvider,
202204
stepEditorProvider: this.stepEditorProvider
203205
},
204206
steps: this.stepsConfiguration,
@@ -240,30 +242,32 @@ export class DesignerComponent implements AfterViewInit, OnChanges, OnDestroy {
240242
});
241243
}
242244

243-
private readonly globalEditorProvider = (definition: Definition, context: GlobalEditorContext) => {
244-
if (!this.globalEditor) {
245-
throw new Error('Input "globalEditor" is not set');
245+
private readonly rootEditorProvider = (definition: Definition, context: RootEditorContext, isReadonly: boolean) => {
246+
if (!this.rootEditor) {
247+
throw new Error('Input "rootEditor" is not set');
246248
}
247-
if (typeof this.globalEditor === 'function') {
248-
return this.globalEditor(definition, context);
249+
if (typeof this.rootEditor === 'function') {
250+
return this.rootEditor(definition, context, isReadonly);
249251
}
250-
return this.editorProvider<GlobalEditorWrapper>(this.globalEditor, {
252+
return this.editorProvider<RootEditorWrapper>(this.rootEditor, {
251253
definition,
252-
context
254+
context,
255+
isReadonly
253256
});
254257
};
255258

256-
private readonly stepEditorProvider = (step: Step, context: StepEditorContext, definition: Definition) => {
259+
private readonly stepEditorProvider = (step: Step, context: StepEditorContext, definition: Definition, isReadonly: boolean) => {
257260
if (!this.stepEditor) {
258261
throw new Error('Input "stepEditor" is not set');
259262
}
260263
if (typeof this.stepEditor === 'function') {
261-
return this.stepEditor(step, context, definition);
264+
return this.stepEditor(step, context, definition, isReadonly);
262265
}
263266
return this.editorProvider<StepEditorWrapper>(this.stepEditor, {
264267
step,
268+
context,
265269
definition,
266-
context
270+
isReadonly
267271
});
268272
};
269273

‎demos/angular-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@angular/platform-browser-dynamic": "^15.2.9",
2727
"@angular/router": "^15.2.9",
2828
"rxjs": "~7.8.0",
29-
"sequential-workflow-designer": "^0.16.10",
30-
"sequential-workflow-designer-angular": "^0.16.10",
29+
"sequential-workflow-designer": "^0.17.0",
30+
"sequential-workflow-designer-angular": "^0.17.0",
3131
"tslib": "^2.3.0",
3232
"zone.js": "~0.13.0"
3333
},

‎demos/angular-app/src/app/app.component.html

+12-4
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
[isToolboxCollapsed]="isToolboxCollapsed"
1212
[isEditorCollapsed]="isEditorCollapsed"
1313
[areEditorsHidden]="false"
14-
[globalEditor]="globalEditor"
14+
[rootEditor]="rootEditor"
1515
[stepEditor]="stepEditor"
1616
(onReady)="onDesignerReady($event)"
1717
(onDefinitionChanged)="onDefinitionChanged($event)"
@@ -21,15 +21,16 @@
2121
>
2222
</sqd-designer>
2323

24-
<ng-template #globalEditor let-editor>
25-
<h2>Global Editor</h2>
24+
<ng-template #rootEditor let-editor>
25+
<h2>Root Editor</h2>
2626

2727
<h3>Velocity</h3>
2828
<mat-form-field class="full-width">
2929
<input
3030
matInput
3131
type="number"
3232
[value]="editor.definition.properties.velocity"
33+
[readonly]="editor.isReadonly"
3334
(input)="updateProperty(editor.definition.properties, 'velocity', $event, editor.context)"
3435
/>
3536
</mat-form-field>
@@ -42,7 +43,13 @@ <h2>Step Editor</h2>
4243
<mat-tab label="Basic">
4344
<h3>Name</h3>
4445
<mat-form-field class="full-width">
45-
<input matInput type="text" [value]="editor.step.name" (input)="updateName(editor.step, $event, editor.context)" />
46+
<input
47+
matInput
48+
type="text"
49+
[value]="editor.step.name"
50+
[readonly]="editor.isReadonly"
51+
(input)="updateName(editor.step, $event, editor.context)"
52+
/>
4653
</mat-form-field>
4754
</mat-tab>
4855
<mat-tab label="Details">
@@ -52,6 +59,7 @@ <h3>Velocity</h3>
5259
matInput
5360
type="number"
5461
[value]="editor.step.properties.velocity"
62+
[readonly]="editor.isReadonly"
5563
(input)="updateProperty(editor.step.properties, 'velocity', $event, editor.context)"
5664
/>
5765
</mat-form-field>

‎demos/angular-app/src/app/app.component.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
22
import {
33
Definition,
44
Designer,
5-
GlobalEditorContext,
5+
RootEditorContext,
66
Properties,
77
Uid,
88
Step,
@@ -96,7 +96,7 @@ export class AppComponent implements OnInit {
9696
context.notifyNameChanged();
9797
}
9898

99-
public updateProperty(properties: Properties, name: string, event: Event, context: GlobalEditorContext | StepEditorContext) {
99+
public updateProperty(properties: Properties, name: string, event: Event, context: RootEditorContext | StepEditorContext) {
100100
properties[name] = (event.target as HTMLInputElement).value;
101101
context.notifyPropertiesChanged();
102102
}

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -5956,17 +5956,17 @@ send@0.18.0:
59565956
range-parser "~1.2.1"
59575957
statuses "2.0.1"
59585958

5959-
sequential-workflow-designer-angular@^0.16.10:
5960-
version "0.16.10"
5961-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.16.10.tgz#25094a86e9713c95008616c21425b796bf28f947"
5962-
integrity sha512-Cr7xABHuJwVNsDaU3dr0qOCOgRGLojQTFOZ2bXH1OpXRzwhxK4xEpmuKptnYhyl1piR5NuhWrfHAfODBJs21bQ==
5959+
sequential-workflow-designer-angular@^0.17.0:
5960+
version "0.17.0"
5961+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.17.0.tgz#c16fc5d629180af3f9d609fc654bf2b08ced59bc"
5962+
integrity sha512-Qhs0LQRHwiLp9K4pETnVhmeeaGqe7Kv055ix7arqFi8HYYkNHga/7IWIJLVpjpk2AomM8DIpf4t2r6NrSr4jnQ==
59635963
dependencies:
59645964
tslib "^2.3.0"
59655965

5966-
sequential-workflow-designer@^0.16.10:
5967-
version "0.16.10"
5968-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.16.10.tgz#a8c75397cdc1e87c7ca5d787983ee394811fa9d8"
5969-
integrity sha512-4r5eDOPuiTNUoCYPJr5wJXVvB7rFOVgCjk7tgLEoivvaiMXxdqP3PC/n3/JwKuwxsnJyf6skvjHerwdqV6/e4Q==
5966+
sequential-workflow-designer@^0.17.0:
5967+
version "0.17.0"
5968+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.17.0.tgz#fb126b4a45fef107ac54b041e116ddaca607e48f"
5969+
integrity sha512-RzKn99irxTqsLn84RkMp7Q6XnvVjufG3xTKUy89uSC9a4CgG0k70jL36zLXxpW7cGEjjzGK/LgIeQ9/kiUOInQ==
59705970
dependencies:
59715971
sequential-workflow-model "^0.2.0"
59725972

‎demos/react-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
"dependencies": {
77
"react": "^18.2.0",
88
"react-dom": "^18.2.0",
9-
"sequential-workflow-designer": "^0.16.10",
10-
"sequential-workflow-designer-react": "^0.16.10"
9+
"sequential-workflow-designer": "^0.17.0",
10+
"sequential-workflow-designer-react": "^0.17.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/react-app/src/index.css

+6
Original file line numberDiff line numberDiff line change
@@ -49,3 +49,9 @@ nav .github:hover {
4949
width: 100vw;
5050
height: 50vh;
5151
}
52+
.sqd-editor {
53+
padding: 10px;
54+
}
55+
input:read-only {
56+
opacity: 0.35;
57+
}

‎demos/react-app/src/nativeEditors/NativeEditors.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ export const startDefinition: Definition = {
1515
properties: {}
1616
};
1717

18-
function globalEditorProvider(): HTMLElement {
18+
function rootEditorProvider(): HTMLElement {
1919
const editor = document.createElement('div');
20-
editor.innerHTML = 'Global editor';
20+
editor.innerHTML = 'Root editor';
2121
return editor;
2222
}
2323

@@ -48,7 +48,7 @@ export function NativeEditors() {
4848
stepsConfiguration={{}}
4949
controlBar={true}
5050
contextMenu={true}
51-
globalEditor={globalEditorProvider}
51+
rootEditor={rootEditorProvider}
5252
stepEditor={stepEditorProvider}
5353
/>
5454
</>

0 commit comments

Comments
 (0)