Skip to content

Commit e8eaf5b

Browse files
devhelprdevhelpr
committed
observable enum data-type for variables (WiP)
1 parent 2a33d2d commit e8eaf5b

File tree

10 files changed

+306
-24
lines changed

10 files changed

+306
-24
lines changed

‎examples-test-flows/enum-example.json‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
{
2+
"schemaType": "flow",
3+
"schemaVersion": "0.0.1",
4+
"id": "1234",
5+
"flows": {
6+
"flow": {
7+
"flowType": "flow",
8+
"nodes": [
9+
{
10+
"id": "691421ad-a30d-44f2-abd0-072bd8468b89",
11+
"x": 422.3632394523364,
12+
"y": -43.64197821262764,
13+
"width": 119.99997976878514,
14+
"height": 108.00000474727274,
15+
"nodeType": "Shape",
16+
"nodeInfo": {
17+
"type": "scope-variable",
18+
"formValues": {
19+
"variableName": "enum",
20+
"initialValue": "",
21+
"fieldType": "enum",
22+
"fieldValueType": "number",
23+
"enumValues": [
24+
{
25+
"label": "test1",
26+
"value": "test1"
27+
},
28+
{
29+
"label": "test2",
30+
"value": "test2"
31+
}
32+
],
33+
"initialEnumValue": "test3"
34+
},
35+
"isVariable": true,
36+
"nodeCannotBeReplaced": true
37+
}
38+
},
39+
{
40+
"id": "a21c19c9-7b8d-4a39-9a21-d2ece057e904",
41+
"x": 907.0955307570923,
42+
"y": 66.03645436235243,
43+
"width": 199.99993896484375,
44+
"height": 116,
45+
"nodeType": "Shape",
46+
"nodeInfo": {
47+
"type": "observe-variable",
48+
"formValues": {
49+
"variableName": "enum"
50+
}
51+
}
52+
},
53+
{
54+
"id": "054255b7-f15b-4210-bf4f-2046e4e17515",
55+
"x": 524.342257706599,
56+
"y": 277.7768752377074,
57+
"width": 200,
58+
"height": 128,
59+
"nodeType": "Shape",
60+
"nodeInfo": {
61+
"type": "set-variable",
62+
"formValues": {
63+
"variableName": "enum"
64+
},
65+
"nodeCannotBeReplaced": false,
66+
"showFormOnlyInPopup": false,
67+
"useInCompositionOnly": false,
68+
"keepPopupOpenAfterUpdate": false
69+
}
70+
},
71+
{
72+
"id": "50393f42-8715-42bb-82f3-66d991345272",
73+
"x": 152.4223554852694,
74+
"y": 289.44615192434736,
75+
"width": 200.00001525878906,
76+
"height": 112,
77+
"nodeType": "Shape",
78+
"nodeInfo": {
79+
"type": "value",
80+
"formValues": {
81+
"value": "test2"
82+
}
83+
}
84+
},
85+
{
86+
"id": "e26bac56-73b4-4d5a-9532-fbeafd131a1c",
87+
"x": 1333.6522439657404,
88+
"y": 95.33927303098446,
89+
"width": 119.99999995410255,
90+
"height": 55.9999801828729,
91+
"nodeType": "Shape",
92+
"nodeInfo": {
93+
"type": "show-input",
94+
"formValues": {
95+
"name": "",
96+
"data-type": "default"
97+
},
98+
"initializeOnStartFlow": true,
99+
"isSettingsPopup": true
100+
}
101+
},
102+
{
103+
"id": "b49d6ed9-09a3-4daa-b6c4-32f5b05f6d15",
104+
"x": 1107.095469721936,
105+
"y": 124.03645436235243,
106+
"endX": 1333.6522439657404,
107+
"endY": 125.33927303098446,
108+
"startNodeId": "a21c19c9-7b8d-4a39-9a21-d2ece057e904",
109+
"endNodeId": "e26bac56-73b4-4d5a-9532-fbeafd131a1c",
110+
"startThumbName": "output",
111+
"endThumbName": "input",
112+
"lineType": "BezierCubic",
113+
"nodeType": "Connection",
114+
"layer": 1,
115+
"nodeInfo": {}
116+
},
117+
{
118+
"id": "616577b0-7a83-4e73-a0ff-1d2e752b9029",
119+
"x": 352.42237074405847,
120+
"y": 345.44615192434736,
121+
"endX": 524.342257706599,
122+
"endY": 341.7768752377074,
123+
"startNodeId": "50393f42-8715-42bb-82f3-66d991345272",
124+
"endNodeId": "054255b7-f15b-4210-bf4f-2046e4e17515",
125+
"startThumbName": "output",
126+
"endThumbName": "input",
127+
"lineType": "BezierCubic",
128+
"nodeType": "Connection",
129+
"layer": 1,
130+
"nodeInfo": {}
131+
}
132+
]
133+
}
134+
},
135+
"compositions": {}
136+
}

‎libs/dom-components/src/lib/component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ export class Component<T> extends BaseComponent {
55
props: T;
66
constructor(parent: BaseComponent | null, props: T) {
77
super();
8+
// create a proxy to handle changes to props and rerender the component
89
this.props = new Proxy(props, this.propsHandler);
910

1011
// create proxy for array properties within props

‎libs/visual-programming-system/src/canvas-app/flow-core.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export interface IFlowCore {
2525
variable: {
2626
id: string;
2727
getData: () => any;
28-
setData: (data: any) => void;
28+
setData: (data: any) => boolean;
2929
initializeDataStructure?: (structureInfo: any) => void;
3030
removeScope: (scopeId: string) => void;
3131
}
@@ -131,7 +131,7 @@ export class FlowCore implements IFlowCore {
131131
{
132132
id: string;
133133
getData: (parameter?: any, scopeId?: string) => any;
134-
setData: (data: any, scopeId?: string) => void;
134+
setData: (data: any, scopeId?: string) => boolean;
135135
initializeDataStructure?: (structureInfo: any, scopeId?: string) => void;
136136
removeScope: (scopeId: string) => void;
137137
}
@@ -193,7 +193,7 @@ export class FlowCore implements IFlowCore {
193193
variable: {
194194
id: string;
195195
getData: () => any;
196-
setData: (data: any) => void;
196+
setData: (data: any) => boolean;
197197
initializeDataStructure?: (structureInfo: any) => void;
198198
removeScope: (scopeId: string) => void;
199199
}
@@ -265,14 +265,18 @@ export class FlowCore implements IFlowCore {
265265
if (scopeId && this.tempVariables[scopeId][variableName]) {
266266
this.tempVariables[scopeId][variableName] = data;
267267
} else if (variableName && this.variables[variableName]) {
268-
this.variables[variableName].setData(data, scopeId);
269-
if (isInitializing) {
268+
const result = this.variables[variableName].setData(data, scopeId);
269+
if (isInitializing || !result) {
270270
return;
271271
}
272+
const dataToObserver = this.variables[variableName].getData(
273+
undefined,
274+
scopeId
275+
);
272276
const map = this.variableObservers.get(`${variableName}`);
273277
if (map) {
274278
map.forEach((observer) => {
275-
observer(data, runCounter);
279+
observer(dataToObserver, runCounter);
276280
});
277281
}
278282
}

‎libs/visual-programming-system/src/forms/FormField.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ export type FormField = (
1818
| {
1919
fieldType: 'Select';
2020
value: string;
21-
options: { value: string; label: string }[];
21+
options?: { value: string; label: string }[];
22+
getOptions?: (values: any) => { value: string; label: string }[];
2223
onChange?: (value: string, formComponent: IFormsComponent) => void;
2324
}
2425
| {

‎libs/visual-programming-system/src/forms/form-component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -330,7 +330,8 @@ export class FormsComponent
330330
'',
331331
isRow: formControl.isRow,
332332
settings,
333-
options: formControl.options,
333+
options:
334+
formControl.options ?? formControl.getOptions?.(this.values) ?? [],
334335
setValue: this.setValue,
335336
onChange: (value) => this.onChange(formControl, value),
336337
isLast: index === this.props.formElements.length - 1,
@@ -458,6 +459,10 @@ export class FormsComponent
458459
isLast: index === this.props.formElements.length - 1,
459460
setValue: this.setValue,
460461
onChange: (value) => this.onChange(formControl, value),
462+
renderForm: () => {
463+
this.oldProps = null;
464+
this.render();
465+
},
461466
createDataReadElement: (formElement, data) => {
462467
if (
463468
formElement.fieldType === FormFieldType.File &&

‎libs/visual-programming-system/src/forms/form-fields/array.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface ArrayFieldProps extends BaseFormFieldProps {
2626
data: unknown
2727
) => HTMLElement | undefined;
2828
onChange?: (value: unknown[]) => void;
29+
renderForm(): void;
2930
}
3031

3132
export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps> {
@@ -130,10 +131,9 @@ export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps
130131
editCell.firstChild?.addEventListener('click', (event) => {
131132
event.preventDefault();
132133
const values = this.values.find((v) => v.id === value.id);
133-
console.log('edit', value, values?.arrayItems, this.values);
134134
if (values) {
135135
this.props
136-
.createFormDialog(this.props.formElements, values.arrayItems)
136+
.createFormDialog([...this.props.formElements], values.arrayItems)
137137
.then((result) => {
138138
values.arrayItems = result;
139139
const updatedArrayRow = this.createRenderRow(values, true);
@@ -155,11 +155,12 @@ export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps
155155
event.preventDefault();
156156
this.values = this.values.filter((v) => v.id !== value.id);
157157

158-
this.render();
158+
//this.render();
159159
this.array
160160
?.querySelector(`[data-array-id="${value.id}"]`)
161161
?.remove();
162162
this.props.onChange?.(this.values.map((value) => value.arrayItems));
163+
this.props.renderForm();
163164
return false;
164165
});
165166
}
@@ -190,9 +191,8 @@ export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps
190191
this.addButton = this.array.nextSibling as HTMLInputElement;
191192
this.renderList.push(this.label, this.array, this.addButton);
192193
this.addButton.addEventListener('click', this.onAddButtonClick);
193-
console.log('array', this.array, this.values, this.label);
194194
this.values.forEach((value, _index) => {
195-
console.log('array item', value, _index, this.createRenderRow(value));
195+
this.createRenderRow(value);
196196
});
197197
trackNamedSignal(
198198
`${this.props.formId}_${this.props.fieldName}`,
@@ -219,12 +219,22 @@ export class ArrayFieldChildComponent extends FormFieldComponent<ArrayFieldProps
219219
}
220220

221221
onAddButtonClick = (_event: Event) => {
222-
this.props.createFormDialog(this.props.formElements, {}).then((result) => {
222+
const formElements = this.props.formElements.map((formElement) => {
223+
const clonedFormElement = { ...formElement };
224+
if (formElement.fieldType === FormFieldType.Text) {
225+
clonedFormElement.value = '';
226+
}
227+
return { ...formElement };
228+
});
229+
230+
this.props.createFormDialog(formElements, {}).then((result) => {
223231
const valueRow = { arrayItems: result, id: crypto.randomUUID() };
224232
this.values.push(valueRow);
225233
this.createRenderRow(valueRow);
226234
this.render();
235+
227236
this.props.onChange?.(this.values.map((value) => value.arrayItems));
237+
this.props.renderForm();
228238
});
229239
};
230240
override render() {

‎libs/visual-programming-system/src/forms/form-fields/select.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export class SelectFieldChildComponent extends FormFieldComponent<SelectFieldPro
4747
autocomplete="off"
4848
id="${props.formId}_${props.fieldName}"
4949
value="${props.value}"
50-
type="text">${props.options.map((option) => {
50+
type="text">${props.options?.map((option) => {
5151
return `<option value="${option.value}"
5252
${option.value === props.value ? 'selected' : ''}
5353
>${option.label}</option>`;

‎libs/web-flow-executor/src/nodes/array.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,6 +339,7 @@ export const getArray: NodeTaskFactory<NodeInfo> = (
339339
};
340340
const setData = (_data: any) => {
341341
//currentValue = data;
342+
return true;
342343
};
343344
const removeScope = (_scopeId: string) => {
344345
//

0 commit comments

Comments
 (0)