Skip to content

Commit 9b30613

Browse files
b4rtazb4rtaz
authoredNov 20, 2024
0.27.0. (#173)
1 parent 3fbba96 commit 9b30613

27 files changed

+164
-73
lines changed
 

‎CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 0.27.0
2+
3+
This version adds the ability to configure the border style of the toolbox, control bar, and context menu using SASS mixins. It also updates the internal configuration structure for the container and switch step components.
4+
15
# 0.26.1
26

37
This version fixes the bug with scaling in the pinch-to-zoom feature. Additionally, this version improves the rendering of lines that join steps.

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -104,10 +104,10 @@ Add the below code to your head section in HTML document.
104104
```html
105105
<head>
106106
...
107-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer.css" rel="stylesheet">
108-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-light.css" rel="stylesheet">
109-
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/css/designer-dark.css" rel="stylesheet">
110-
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.26.1/dist/index.umd.js"></script>
107+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer.css" rel="stylesheet">
108+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-light.css" rel="stylesheet">
109+
<link href="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/css/designer-dark.css" rel="stylesheet">
110+
<script src="https://cdn.jsdelivr.net/npm/sequential-workflow-designer@0.27.0/dist/index.umd.js"></script>
111111
```
112112

113113
Call the designer by:

‎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.26.1",
4+
"version": "0.27.0",
55
"author": {
66
"name": "NoCode JS",
77
"url": "https://nocode-js.com/"
@@ -15,7 +15,7 @@
1515
"peerDependencies": {
1616
"@angular/common": "12 - 18",
1717
"@angular/core": "12 - 18",
18-
"sequential-workflow-designer": "^0.26.1"
18+
"sequential-workflow-designer": "^0.27.0"
1919
},
2020
"dependencies": {
2121
"tslib": "^2.3.0"

‎demos/angular-app/package.json

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

‎demos/angular-app/yarn.lock

+8-8
Original file line numberDiff line numberDiff line change
@@ -6744,17 +6744,17 @@ send@0.18.0:
67446744
range-parser "~1.2.1"
67456745
statuses "2.0.1"
67466746

6747-
sequential-workflow-designer-angular@^0.26.1:
6748-
version "0.26.1"
6749-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.26.1.tgz#a7958048852b1fad66e2dde71a7cc6c740f8ccdc"
6750-
integrity sha512-eggkWg0FIxhAC4Awuee3ysTcSQUerRj14+G802QpzIFblYqgElK0TQBEjRgEjRnjoljaZIf4RipMQhFIIQZS7w==
6747+
sequential-workflow-designer-angular@^0.27.0:
6748+
version "0.27.0"
6749+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer-angular/-/sequential-workflow-designer-angular-0.27.0.tgz#0c95ba93550c8c26043aa087f9207a1331dea2cd"
6750+
integrity sha512-g4UqxOkSiHC3bOIQusueiK30j/zXjkzdEtfgD/5Wdt6kKHftYrViABRXhoeobjMvwBY9H0q4HqF2nSFi2cd9ng==
67516751
dependencies:
67526752
tslib "^2.3.0"
67536753

6754-
sequential-workflow-designer@^0.26.1:
6755-
version "0.26.1"
6756-
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.26.1.tgz#5a3fc4e992f76c46bc746547cf040fef8768dc29"
6757-
integrity sha512-R3zqYzZrj3wJ7zPgn9+7bvtNTB2kaTP31wW9MJD3ZgOUrTfvfpz+voIwKhknT9t4/cL7YH+TJF//QkwSp6BUlw==
6754+
sequential-workflow-designer@^0.27.0:
6755+
version "0.27.0"
6756+
resolved "https://registry.yarnpkg.com/sequential-workflow-designer/-/sequential-workflow-designer-0.27.0.tgz#157666cca79d993d5c52a127774d62d3a7e001df"
6757+
integrity sha512-wWpIIO3DQzm8iViNZQdjTfoj+0iD17Qncvqpkto+oXPAmrIRB3gf346aqlA03ze7H3F+FsL/elFGQl4bzxSVDw==
67586758
dependencies:
67596759
sequential-workflow-model "^0.2.0"
67606760

‎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.26.1",
10-
"sequential-workflow-designer-react": "^0.26.1"
9+
"sequential-workflow-designer": "^0.27.0",
10+
"sequential-workflow-designer-react": "^0.27.0"
1111
},
1212
"devDependencies": {
1313
"@types/jest": "^29.2.5",

‎demos/svelte-app/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"eslint": "eslint ./src --ext .ts"
1717
},
1818
"dependencies": {
19-
"sequential-workflow-designer": "^0.26.1",
20-
"sequential-workflow-designer-svelte": "^0.26.1"
19+
"sequential-workflow-designer": "^0.27.0",
20+
"sequential-workflow-designer-svelte": "^0.27.0"
2121
},
2222
"devDependencies": {
2323
"@sveltejs/adapter-static": "^2.0.3",

‎designer/package.json

+1-1
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.26.1",
4+
"version": "0.27.0",
55
"type": "module",
66
"main": "./lib/esm/index.js",
77
"types": "./lib/index.d.ts",

‎designer/sass/designer-theme.scss

+6
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
$panelBackgroundColor: #fff,
44
$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
55
$panelBorderRadius: 10px,
6+
$panelBorder: none,
67
$headerTextColor: #000,
78
$filterBackground: #fff,
89
$filterTextColor: #000,
@@ -17,6 +18,7 @@
1718
.sqd-toolbox {
1819
background: $panelBackgroundColor;
1920
box-shadow: $panelBoxShadow;
21+
border: $panelBorder;
2022
border-radius: $panelBorderRadius;
2123
}
2224
.sqd-toolbox-header-title {
@@ -75,6 +77,7 @@
7577
$panelBackgroundColor: #fff,
7678
$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.15)),
7779
$panelBorderRadius: 10px,
80+
$panelBorder: none,
7881
$buttonBackground: #fff,
7982
$buttonBackgroundHovered: #fff,
8083
$buttonBorder: (1px solid #c3c3c3),
@@ -87,6 +90,7 @@
8790
.sqd-control-bar {
8891
background: $panelBackgroundColor;
8992
box-shadow: $panelBoxShadow;
93+
border: $panelBorder;
9094
border-radius: $panelBorderRadius;
9195
}
9296
.sqd-control-bar-button {
@@ -131,6 +135,7 @@
131135
$panelBackgroundColor: #fff,
132136
$panelBoxShadow: (0 0 8px rgba(0, 0, 0, 0.2)),
133137
$panelBorderRadius: 4px,
138+
$panelBorder: none,
134139
$groupTextColor: #888,
135140
$itemTextColor: #000,
136141
$itemBackgroundColorHovered: #eee,
@@ -139,6 +144,7 @@
139144
.sqd-theme-#{$theme}.sqd-context-menu {
140145
background: $panelBackgroundColor;
141146
box-shadow: $panelBoxShadow;
147+
border: $panelBorder;
142148
border-radius: $panelBorderRadius;
143149
}
144150
.sqd-theme-#{$theme} .sqd-context-menu-group {

‎designer/src/designer-extension.ts

+11
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
export interface DesignerExtension {
2222
steps?: StepExtension[];
2323
stepComponentViewWrapper?: StepComponentViewWrapperExtension;
24+
stepBadgesDecorator?: StepBadgesDecoratorExtension;
2425
clickBehaviorWrapperExtension?: ClickBehaviorWrapperExtension;
2526
badges?: BadgeExtension[];
2627
uiComponents?: UiComponentExtension[];
@@ -91,6 +92,16 @@ export interface StepComponentViewWrapperExtension {
9192
wrap(view: StepComponentView, stepContext: StepContext): StepComponentView;
9293
}
9394

95+
// StepBadgesDecoratorExtension
96+
97+
export interface StepBadgesDecoratorExtension {
98+
create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator;
99+
}
100+
101+
export interface BadgesDecorator {
102+
update(): void;
103+
}
104+
94105
// ClickBehaviorWrapperExtension
95106

96107
export interface ClickBehaviorWrapperExtension {

‎designer/src/services.ts

+7
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { DefaultStepComponentViewWrapperExtension } from './workspace/default-st
2020
import { LineGridExtension } from './workspace/grid/line-grid-extension';
2121
import { DefaultRegionComponentViewExtension } from './workspace/region/default-region-component-view-extension';
2222
import { DefaultClickBehaviorWrapperExtension } from './behaviors/default-click-behavior-wrapper-extension';
23+
import { DefaultStepBadgesDecoratorExtension } from './workspace/badges/default-step-badges-decorator-extension';
2324

2425
export type Services = Required<DesignerExtension>;
2526

@@ -40,6 +41,9 @@ function merge(services: Partial<Services>, extensions: DesignerExtension[]) {
4041
if (ext.stepComponentViewWrapper) {
4142
services.stepComponentViewWrapper = ext.stepComponentViewWrapper;
4243
}
44+
if (ext.stepBadgesDecorator) {
45+
services.stepBadgesDecorator = ext.stepBadgesDecorator;
46+
}
4347
if (ext.clickBehaviorWrapperExtension) {
4448
services.clickBehaviorWrapperExtension = ext.clickBehaviorWrapperExtension;
4549
}
@@ -96,6 +100,9 @@ function setDefaults(services: Partial<Services>, configuration: DesignerConfigu
96100
if (!services.stepComponentViewWrapper) {
97101
services.stepComponentViewWrapper = new DefaultStepComponentViewWrapperExtension();
98102
}
103+
if (!services.stepBadgesDecorator) {
104+
services.stepBadgesDecorator = new DefaultStepBadgesDecoratorExtension();
105+
}
99106
if (!services.clickBehaviorWrapperExtension) {
100107
services.clickBehaviorWrapperExtension = new DefaultClickBehaviorWrapperExtension();
101108
}

‎designer/src/workspace/badges/badges.ts

+9-25
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
import { ComponentContext } from '../../component-context';
22
import { Dom, Vector } from '../../core';
3-
import { StepContext } from '../../designer-extension';
3+
import { BadgesDecorator, StepContext } from '../../designer-extension';
44
import { Badge, BadgesResult, ClickCommand, ClickDetails, StepComponentView } from '../component';
5-
6-
const BADGE_GAP = 4;
5+
import { DefaultBadgesDecorator } from './default-badges-decorator';
76

87
export class Badges {
98
public static createForStep(stepContext: StepContext, view: StepComponentView, componentContext: ComponentContext): Badges {
109
const g = createG(view.g);
1110
const badges = componentContext.services.badges.map(ext => ext.createForStep(g, view, stepContext, componentContext));
12-
const position = new Vector(view.width, 0);
13-
return new Badges(g, position, badges);
11+
const decorator = componentContext.services.stepBadgesDecorator.create(g, view, badges);
12+
return new Badges(badges, decorator);
1413
}
1514

1615
public static createForRoot(parentElement: SVGGElement, position: Vector, componentContext: ComponentContext): Badges {
1716
const g = createG(parentElement);
1817
const badges = componentContext.services.badges.map(ext => {
1918
return ext.createForRoot ? ext.createForRoot(g, componentContext) : null;
2019
});
21-
return new Badges(g, position, badges);
20+
const decorator = new DefaultBadgesDecorator(position, badges, g);
21+
return new Badges(badges, decorator);
2222
}
2323

2424
private constructor(
25-
private readonly g: SVGGElement,
26-
private readonly position: Vector,
27-
private readonly badges: (Badge | null)[]
25+
private readonly badges: (Badge | null)[],
26+
private readonly decorator: BadgesDecorator
2827
) {}
2928

3029
public update(result: BadgesResult) {
@@ -35,22 +34,7 @@ export class Badges {
3534
result[i] = badge.update(result[i]);
3635
}
3736
}
38-
39-
let offsetX = 0;
40-
let maxHeight = 0;
41-
let j = 0;
42-
for (let i = 0; i < count; i++) {
43-
const badge = this.badges[i];
44-
if (badge && badge.view) {
45-
offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
46-
maxHeight = Math.max(maxHeight, badge.view.height);
47-
Dom.translate(badge.view.g, -offsetX, 0);
48-
offsetX += BADGE_GAP;
49-
j++;
50-
}
51-
}
52-
53-
Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
37+
this.decorator.update();
5438
}
5539

5640
public resolveClick(click: ClickDetails): ClickCommand | null {

‎designer/src/workspace/badges/default-badges-decorator.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Dom, Vector } from '../../core';
2+
import { BadgesDecorator } from '../../designer-extension';
3+
import { Badge } from '../component';
4+
5+
const BADGE_GAP = 4;
6+
7+
export class DefaultBadgesDecorator implements BadgesDecorator {
8+
public constructor(
9+
private readonly position: Vector,
10+
private readonly badges: (Badge | null)[],
11+
private readonly g: SVGGElement
12+
) {}
13+
14+
public update() {
15+
let offsetX = 0;
16+
let maxHeight = 0;
17+
let j = 0;
18+
for (let i = 0; i < this.badges.length; i++) {
19+
const badge = this.badges[i];
20+
if (badge && badge.view) {
21+
offsetX += j === 0 ? badge.view.width / 2 : badge.view.width;
22+
maxHeight = Math.max(maxHeight, badge.view.height);
23+
Dom.translate(badge.view.g, -offsetX, 0);
24+
offsetX += BADGE_GAP;
25+
j++;
26+
}
27+
}
28+
Dom.translate(this.g, this.position.x, this.position.y + -maxHeight / 2);
29+
}
30+
}

‎designer/src/workspace/badges/default-step-badges-decorator-extension.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Vector } from '../../core';
2+
import { BadgesDecorator, StepBadgesDecoratorExtension } from '../../designer-extension';
3+
import { StepComponentView, Badge } from '../component';
4+
import { DefaultBadgesDecorator } from './default-badges-decorator';
5+
6+
export class DefaultStepBadgesDecoratorExtension implements StepBadgesDecoratorExtension {
7+
public create(g: SVGGElement, view: StepComponentView, badges: (Badge | null)[]): BadgesDecorator {
8+
const position = new Vector(view.width, 0);
9+
return new DefaultBadgesDecorator(position, badges, g);
10+
}
11+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ describe('InputView', () => {
99
});
1010

1111
it('createRectInput() creates view', () => {
12-
const view = InputView.createRectInput(parent, 10, 10, 16, 20, null);
12+
const view = InputView.createRectInput(parent, 10, 10, 16, 4, 20, null);
1313
expect(view).toBeDefined();
1414
expect(parent.children.length).not.toEqual(0);
1515
});

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export class InputView {
66
x: number,
77
y: number,
88
size: number,
9+
radius: number,
910
iconSize: number,
1011
iconUrl: string | null
1112
): InputView {
@@ -18,8 +19,8 @@ export class InputView {
1819
height: size,
1920
x: x - size / 2,
2021
y: y + size / -2 + 0.5,
21-
rx: 4,
22-
ry: 4
22+
rx: radius,
23+
ry: radius
2324
});
2425
g.appendChild(rect);
2526

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

+2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ export interface ContainerStepComponentViewConfiguration {
44
paddingTop: number;
55
paddingX: number;
66
inputSize: number;
7+
inputRadius: number;
78
inputIconSize: number;
9+
autoHideInputOnDrag: boolean;
810
label: LabelViewConfiguration;
911
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ describe('ContainerStepComponentView', () => {
3232
const factory = createContainerStepComponentViewFactory({
3333
inputIconSize: 10,
3434
inputSize: 14,
35+
inputRadius: 4,
36+
autoHideInputOnDrag: true,
3537
paddingTop: 20,
3638
paddingX: 20,
3739
label: {

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

+8-3
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,11 @@ export const createContainerStepComponentViewFactory =
3131
Dom.translate(labelView.g, joinX, 0);
3232
Dom.translate(sequenceComponent.view.g, offsetLeft, cfg.paddingTop + cfg.label.height);
3333

34-
const iconUrl = viewContext.getStepIconUrl();
35-
const inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputIconSize, iconUrl);
34+
let inputView: InputView | null = null;
35+
if (cfg.inputSize > 0) {
36+
const iconUrl = viewContext.getStepIconUrl();
37+
inputView = InputView.createRectInput(g, joinX, 0, cfg.inputSize, cfg.inputRadius, cfg.inputIconSize, iconUrl);
38+
}
3639

3740
JoinView.createStraightJoin(g, new Vector(joinX, 0), cfg.paddingTop);
3841

@@ -55,7 +58,9 @@ export const createContainerStepComponentViewFactory =
5558
return result === true || (result === null && g.contains(click.element)) ? true : result;
5659
},
5760
setIsDragging(isDragging: boolean) {
58-
inputView.setIsHidden(isDragging);
61+
if (cfg.autoHideInputOnDrag && inputView) {
62+
inputView.setIsHidden(isDragging);
63+
}
5964
},
6065
setIsSelected(isSelected: boolean) {
6166
regionView.setIsSelected(isSelected);

‎designer/src/workspace/container-step/container-step-extension.ts

+2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const defaultConfiguration: ContainerStepExtensionConfiguration = {
88
paddingTop: 20,
99
paddingX: 20,
1010
inputSize: 18,
11+
inputRadius: 4,
1112
inputIconSize: 14,
13+
autoHideInputOnDrag: true,
1214
label: {
1315
height: 22,
1416
paddingX: 10,

0 commit comments

Comments
 (0)