Skip to content

Commit e09c7d6

Browse files
devhelprdevhelpr
committed
theming support in custom nodes
1 parent 9521daf commit e09c7d6

File tree

13 files changed

+94
-29
lines changed

13 files changed

+94
-29
lines changed

‎apps/vps-web/src/app/pages/ocwg.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
renderElement,
33
createJSXElement,
4+
standardTheme,
45
} from '@devhelpr/visual-programming-system';
56
import { RegisterNodeFactoryFunction } from '@devhelpr/web-flow-executor';
67

@@ -39,6 +40,12 @@ export function ocwgPage() {
3940
app.appRootSelector = '#app-root';
4041
app.heightSpaceForHeaderFooterToolbars = 100;
4142
app.widthSpaceForSideToobars = 32;
43+
44+
app.theme = { ...standardTheme };
45+
app.theme.background = 'bg-[#336699]';
46+
app.theme.backgroundAsHexColor = '#336699';
47+
app.theme.nodeBackground = 'bg-[#113366]';
48+
4249
app.registerExternalNodes = (
4350
_registerNodeFactory: RegisterNodeFactoryFunction
4451
) => {

‎libs/app-canvas/src/app/app.element.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1278,11 +1278,19 @@ export class AppElement<T extends BaseNodeInfo> {
12781278
undefined,
12791279
'composition-canvas-' + node.nodeInfo.compositionId,
12801280
undefined,
1281-
this.showEditCompositionNameDialog
1281+
this.showEditCompositionNameDialog,
1282+
undefined,
1283+
undefined,
1284+
undefined,
1285+
undefined,
1286+
undefined,
1287+
undefined,
1288+
this.canvasApp
12821289
);
12831290
if (canvasApp) {
12841291
canvasApp.isComposition = true;
12851292
}
1293+
this.onSetupCompositionCanvasEdit(canvasApp);
12861294
canvasApp?.setCamera(0, 0, 1);
12871295
this.currentCanvasApp = canvasApp;
12881296

@@ -2070,4 +2078,8 @@ export class AppElement<T extends BaseNodeInfo> {
20702078
onExitEditComposition() {
20712079
//
20722080
}
2081+
2082+
onSetupCompositionCanvasEdit(_canvasApp: IFlowCanvasBase<T>) {
2083+
//
2084+
}
20732085
}

‎libs/app-canvas/src/app/flow-app.element.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
IFormsComponent,
3535
FlowChangeType,
3636
IFlowCanvasBase,
37+
Theme,
3738
} from '@devhelpr/visual-programming-system';
3839

3940
import {
@@ -144,6 +145,7 @@ export class CodeFlowWebAppCanvas {
144145
registerExternalNodes?: (
145146
registerNodeFactory: RegisterNodeFactoryFunction
146147
) => void;
148+
theme?: Theme;
147149
render() {
148150
if (!this.appRootSelector) {
149151
throw new Error('appRootSelector is required');
@@ -157,7 +159,10 @@ export class CodeFlowWebAppCanvas {
157159
this.onStoreFlow,
158160
this.registerExternalNodes,
159161
this.flowId,
160-
this.clearPresetRegistry
162+
this.clearPresetRegistry,
163+
undefined,
164+
undefined,
165+
this.theme
161166
);
162167
}
163168
}
@@ -225,12 +230,13 @@ export class FlowAppElement extends AppElement<NodeInfo> {
225230
flowId?: string,
226231
clearPresetRegistry?: boolean,
227232
apiUrlRoot?: string,
228-
hideFlowPresets?: boolean
233+
hideFlowPresets?: boolean,
234+
theme?: Theme
229235
) {
230236
super(
231237
appRootSelector,
232238
undefined,
233-
standardTheme,
239+
theme ?? standardTheme,
234240
storageProvider,
235241
isReadOnly,
236242
heightSpaceForHeaderFooterToolbars,
@@ -2201,6 +2207,10 @@ export class FlowAppElement extends AppElement<NodeInfo> {
22012207
this.initializeNodes?.();
22022208
}
22032209

2210+
onSetupCompositionCanvasEdit(canvasApp: IFlowCanvasBase<NodeInfo>) {
2211+
canvasApp.setOnAddcomposition(this.onAddFlowComposition);
2212+
}
2213+
22042214
onImported = () => {
22052215
//
22062216
};

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
NodeTaskFactory,
1616
ThumbConnectionType,
1717
ThumbType,
18+
Theme,
1819
} from '@devhelpr/visual-programming-system';
1920
import { NodeInfo } from '../types/node-info';
2021
import {
@@ -84,7 +85,8 @@ export const getExpression: NodeTaskFactory<NodeInfo> = (
8485
isStoreOnly?: boolean,
8586
flowChangeType?: FlowChangeType,
8687
node?: INodeComponent<NodeInfo>
87-
) => void
88+
) => void,
89+
theme?: Theme
8890
): NodeTask<NodeInfo> => {
8991
let node: IRectNodeComponent<NodeInfo>;
9092
let errorNode: IDOMElement | undefined = undefined;
@@ -332,7 +334,9 @@ export const getExpression: NodeTaskFactory<NodeInfo> = (
332334
const componentWrapper = createNodeElement<NodeInfo>(
333335
'div',
334336
{
335-
class: `inner-node bg-slate-500 p-4 rounded`,
337+
class: `inner-node ${
338+
theme?.nodeBackground ?? 'bg-slate-500'
339+
} p-4 rounded`,
336340
},
337341
undefined
338342
);
@@ -356,7 +360,7 @@ export const getExpression: NodeTaskFactory<NodeInfo> = (
356360
thumbs,
357361
componentWrapper as INodeComponent<NodeInfo>,
358362
{
359-
classNames: `bg-slate-500 p-4 rounded`,
363+
classNames: `${theme?.nodeBackground ?? 'bg-slate-500'} p-4 rounded`,
360364
},
361365
true,
362366
undefined,

‎libs/web-flow-executor/src/nodes/if-condition.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
ThumbConnectionType,
1616
ThumbType,
1717
trackNamedSignal,
18+
Theme,
1819
} from '@devhelpr/visual-programming-system';
1920
import { NodeInfo } from '../types/node-info';
2021

@@ -50,7 +51,8 @@ const thumbs: IThumb[] = [
5051
},
5152
];
5253
export const getIfCondition: NodeTaskFactory<NodeInfo> = (
53-
updated: () => void
54+
updated: () => void,
55+
theme?: Theme
5456
): NodeTask<NodeInfo> => {
5557
let node: IRectNodeComponent<NodeInfo>;
5658
let canvasAppInstance: IFlowCanvasBase<NodeInfo> | undefined = undefined;
@@ -266,7 +268,7 @@ export const getIfCondition: NodeTaskFactory<NodeInfo> = (
266268
flex text-center items-center justify-center
267269
w-[150px] h-[150px]
268270
overflow-hidden
269-
bg-slate-500 text-white
271+
${theme?.nodeBackground ?? 'bg-slate-500'} text-white
270272
rounded`,
271273
style: {
272274
'clip-path': 'polygon(50% 0, 100% 50%, 50% 100%, 0 50%',
@@ -308,7 +310,7 @@ export const getIfCondition: NodeTaskFactory<NodeInfo> = (
308310
thumbs,
309311
jsxComponentWrapper,
310312
{
311-
classNames: `bg-slate-500 p-4 rounded`,
313+
classNames: `${theme?.nodeBackground ?? 'bg-slate-500'} p-4 rounded`,
312314
},
313315
undefined,
314316
undefined,

‎libs/web-flow-executor/src/nodes/split-by-case.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
NodeTask,
1111
ThumbConnectionType,
1212
ThumbType,
13+
Theme,
1314
} from '@devhelpr/visual-programming-system';
1415
import { NodeInfo } from '../types/node-info';
1516

@@ -43,7 +44,10 @@ function handleExpression(expression: string, payload: any) {
4344
}
4445
}
4546

46-
export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
47+
export const getSplitByCase = (
48+
updated: () => void,
49+
theme?: Theme
50+
): NodeTask<NodeInfo> => {
4751
let node: IRectNodeComponent<NodeInfo>;
4852
let canvasAppInstance: IFlowCanvasBase<NodeInfo> | undefined = undefined;
4953

@@ -238,7 +242,9 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
238242
const componentWrapper = createElement(
239243
'div',
240244
{
241-
class: `inner-node bg-slate-500 p-4 rounded`,
245+
class: `inner-node ${
246+
theme?.nodeBackground ?? 'bg-slate-500'
247+
} p-4 rounded`,
242248
},
243249
undefined
244250
) as unknown as INodeComponent<NodeInfo>;
@@ -299,7 +305,7 @@ export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {
299305
],
300306
componentWrapper,
301307
{
302-
classNames: `bg-slate-500 p-4 rounded`,
308+
classNames: `${theme?.nodeBackground ?? 'bg-slate-500'} p-4 rounded`,
303309
},
304310
true,
305311
undefined,

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,15 @@ import {
99
ThumbConnectionType,
1010
ThumbType,
1111
IDOMElement,
12+
Theme,
1213
} from '@devhelpr/visual-programming-system';
1314
import { NodeInfo } from '../types/node-info';
1415
import { createPreviewTip } from './node-utils/create-preview-tip';
1516
import { showPreviewTip } from './node-utils/show-preview-tip';
1617

1718
export const getSum: NodeTaskFactory<NodeInfo> = (
18-
_updated: () => void
19+
_updated: () => void,
20+
theme?: Theme
1921
): NodeTask<NodeInfo> => {
2022
let node: IRectNodeComponent<NodeInfo>;
2123
let htmlNode: INodeComponent<NodeInfo> | undefined = undefined;
@@ -154,7 +156,7 @@ export const getSum: NodeTaskFactory<NodeInfo> = (
154156
],
155157
wrapper,
156158
{
157-
classNames: `bg-slate-500 p-4 rounded`,
159+
classNames: `${theme?.nodeBackground ?? 'bg-slate-500'} p-4 rounded`,
158160
},
159161
undefined,
160162
false,

‎libs/web-flow-executor/src/nodes/user-input.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,9 @@ export const getUserInput =
196196
const formWrapper = createElement(
197197
'div',
198198
{
199-
class: `ui-form-node p-4 border-[2px] border-solid rounded bg-slate-500`,
199+
class: `ui-form-node p-4 border-[2px] border-solid rounded ${
200+
theme?.nodeBackground ?? 'bg-slate-500'
201+
}`,
200202
style: {
201203
'border-color': theme?.backgroundAsHexColor ?? '#000000',
202204
},
@@ -255,7 +257,9 @@ export const getUserInput =
255257
],
256258
componentWrapper,
257259
{
258-
classNames: `bg-slate-500 p-4 rounded`,
260+
classNames: `${
261+
theme?.nodeBackground ?? 'bg-slate-500'
262+
} p-4 rounded`,
259263
},
260264
undefined,
261265
undefined,

‎libs/web-flow-executor/src/nodes/user-text-input.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,9 @@ export const getUserTextInput =
223223
const formWrapper = createElement(
224224
'div',
225225
{
226-
class: `ui-form-node p-4 border-[2px] border-solid rounded bg-slate-500 h-full`,
226+
class: `ui-form-node p-4 border-[2px] border-solid rounded ${
227+
theme?.nodeBackground ?? 'bg-slate-500'
228+
} h-full`,
227229
style: {
228230
'border-color': theme?.backgroundAsHexColor ?? '#000000',
229231
},
@@ -283,7 +285,9 @@ export const getUserTextInput =
283285
],
284286
componentWrapper,
285287
{
286-
classNames: `bg-slate-500 p-4 rounded`,
288+
classNames: `${
289+
theme?.nodeBackground ?? 'bg-slate-500'
290+
} p-4 rounded`,
287291
},
288292
true,
289293
undefined,

‎libs/web-flow-executor/src/nodes/value-number.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
ThumbConnectionType,
1313
ThumbType,
1414
FlowChangeType,
15+
Theme,
1516
} from '@devhelpr/visual-programming-system';
1617
import { NodeInfo } from '../types/node-info';
1718
const thumbs = [
@@ -38,7 +39,8 @@ export const getNumberValue: NodeTaskFactory<NodeInfo> = (
3839
isStoreOnly?: boolean,
3940
flowChangeType?: FlowChangeType,
4041
node?: INodeComponent<NodeInfo> | undefined
41-
) => void
42+
) => void,
43+
theme?: Theme
4244
): NodeTask<NodeInfo> => {
4345
let node: IRectNodeComponent<NodeInfo>;
4446

@@ -108,7 +110,9 @@ export const getNumberValue: NodeTaskFactory<NodeInfo> = (
108110
const componentWrapper = createElement(
109111
'div',
110112
{
111-
class: `inner-node bg-slate-500 p-4 rounded`,
113+
class: `inner-node ${
114+
theme?.nodeBackground ?? 'bg-slate-500'
115+
} p-4 rounded`,
112116
},
113117
undefined
114118
) as unknown as INodeComponent<NodeInfo>;
@@ -133,7 +137,7 @@ export const getNumberValue: NodeTaskFactory<NodeInfo> = (
133137
thumbs,
134138
componentWrapper,
135139
{
136-
classNames: `bg-slate-500 p-4 rounded`,
140+
classNames: `${theme?.nodeBackground ?? 'bg-slate-500'} p-4 rounded`,
137141
},
138142
undefined,
139143
undefined,

0 commit comments

Comments
 (0)