Skip to content

Commit 4ab8d70

Browse files
devhelprdevhelpr
committed
refactor node creation functions to include canvasApp parameter and clean up commented code in connection components
1 parent 836eb16 commit 4ab8d70

File tree

10 files changed

+182
-132
lines changed

10 files changed

+182
-132
lines changed

‎libs/app-canvas/src/app/nodes-gl/for-node.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,13 @@ export const getForNode = (updated: () => void): NodeTask<GLNodeInfo> => {
157157
undefined,
158158
undefined,
159159
undefined,
160-
true
160+
true,
161+
undefined,
162+
undefined,
163+
undefined,
164+
undefined,
165+
undefined,
166+
canvasApp
161167
);
162168
const debugHandler = canvasApp?.getDebugInfoHandler();
163169
if (debugHandler) {

‎libs/app-canvas/src/app/nodes-gl/gate-node.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,13 @@ export const getGateNode = (updated: () => void): NodeTask<GLNodeInfo> => {
152152
undefined,
153153
undefined,
154154
undefined,
155-
true
155+
true,
156+
undefined,
157+
undefined,
158+
undefined,
159+
undefined,
160+
undefined,
161+
canvasApp
156162
);
157163

158164
rect.nodeComponent.canvasAppInstance = canvasAppInstance;

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2086,9 +2086,22 @@ export class FlowCanvas<T extends BaseNodeInfo>
20862086
};
20872087

20882088
getCanvasAttribute = (attribute: string) => {
2089-
return this.canvasAttributes.get(attribute) ?? null;
2089+
if (
2090+
this.rootFlowCanvas?.canvas?.id === this.canvas.id ||
2091+
!this.rootFlowCanvas
2092+
) {
2093+
return this.canvasAttributes.get(attribute) ?? null;
2094+
}
2095+
return this.rootFlowCanvas?.getCanvasAttribute(attribute) ?? null;
20902096
};
20912097
setCanvasAttribute = (attribute: string, value: string) => {
2092-
this.canvasAttributes.set(attribute, value);
2098+
if (
2099+
this.rootFlowCanvas?.canvas?.id === this.canvas.id ||
2100+
!this.rootFlowCanvas
2101+
) {
2102+
this.canvasAttributes.set(attribute, value);
2103+
} else {
2104+
this.rootFlowCanvas?.setCanvasAttribute(attribute, value);
2105+
}
20932106
};
20942107
}

‎libs/visual-programming-system/src/components/connection.ts‎

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -926,39 +926,35 @@ export class Connection<T extends BaseNodeInfo> {
926926
}px - 50%), calc(${
927927
(this.points.beginY + this.points.endY) / 2
928928
}px - 50%))`;
929-
930-
// (
931-
// this.textElement.domElement as HTMLElement
932-
// ).style.transform = `translate(calc(${this.points.endX}px - 50%), calc(${this.points.endY}px - 50%))`;
933-
}
934-
const connectionsFromSameoutput =
935-
this.getMultipleConnectionsFromSameOutput();
936-
if (
937-
!inUpdateLoop &&
938-
this.nodeComponent?.id &&
939-
connectionsFromSameoutput.length > 0
940-
) {
941-
// console.log(
942-
// 'update all connections from same output',
943-
// initiator?.id,
944-
// inUpdateLoop,
945-
// connectionsFromSameoutput
946-
// );
947-
if (
948-
!initiator ||
949-
(initiator &&
950-
(initiator.id === this.nodeComponent.id ||
951-
initiator.id === this.nodeComponent.startNode?.id ||
952-
initiator.id === this.nodeComponent.endNode?.id) &&
953-
!connectionsFromSameoutput.find((c) => c.id === initiator.id))
954-
) {
955-
connectionsFromSameoutput.forEach((c) => {
956-
if (c.id !== this.nodeComponent?.id) {
957-
c.update?.(c, undefined, undefined, this.nodeComponent, true);
958-
}
959-
});
960-
}
961929
}
930+
931+
// commented .. when dragging a connection which is connected to a node that also has another connection as output...
932+
// ... the node connected to this node was not moved
933+
934+
// const connectionsFromSameoutput =
935+
// this.getMultipleConnectionsFromSameOutput();
936+
// if (
937+
// !inUpdateLoop &&
938+
// this.nodeComponent?.id &&
939+
// connectionsFromSameoutput.length > 0
940+
// ) {
941+
942+
// if (
943+
// !initiator ||
944+
// (initiator &&
945+
// (initiator.id === this.nodeComponent.id ||
946+
// initiator.id === this.nodeComponent.startNode?.id ||
947+
// initiator.id === this.nodeComponent.endNode?.id) &&
948+
// !connectionsFromSameoutput.find((c) => c.id === initiator.id))
949+
// ) {
950+
951+
// // connectionsFromSameoutput.forEach((c) => {
952+
// // if (c.id !== this.nodeComponent?.id) {
953+
// // c.update?.(c, undefined, undefined, this.nodeComponent, true);
954+
// // }
955+
// // });
956+
// }
957+
// }
962958
return true;
963959
};
964960

‎libs/visual-programming-system/src/components/line-connection.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
IThumbNodeComponent,
1313
} from '../interfaces/element';
1414
import { Theme } from '../interfaces/theme';
15-
import { createEffect, getVisbility, setSelectNode } from '../reactivity';
15+
import { setSelectNode } from '../reactivity';
1616
import { ConnectionControllerType, NodeType, ThumbType } from '../types';
1717
import { BaseNodeInfo } from '../types/base-node-info';
1818
import { LineType } from '../types/line-type';
@@ -221,18 +221,18 @@ export class LineConnection<T extends BaseNodeInfo> extends Connection<T> {
221221
this.nodeComponent.connectionStartNodeThumb = startPointNode.nodeComponent;
222222
this.nodeComponent.connectionEndNodeThumb = endPointNode.nodeComponent;
223223

224-
createEffect(() => {
225-
const visibility = getVisbility(); //&& selectedNode && selectedNode === connection.id;
226-
if (!startPointNode.nodeComponent || !endPointNode.nodeComponent) {
227-
return;
228-
}
229-
(
230-
startPointNode.nodeComponent.domElement as unknown as SVGElement
231-
).style.display = visibility ? 'block' : 'none';
232-
(
233-
endPointNode.nodeComponent.domElement as unknown as SVGElement
234-
).style.display = visibility ? 'block' : 'none';
235-
});
224+
// createEffect(() => {
225+
// const visibility = getVisbility(); //&& selectedNode && selectedNode === connection.id;
226+
// if (!startPointNode.nodeComponent || !endPointNode.nodeComponent) {
227+
// return;
228+
// }
229+
// (
230+
// startPointNode.nodeComponent.domElement as unknown as SVGElement
231+
// ).style.display = visibility ? 'block' : 'none';
232+
// (
233+
// endPointNode.nodeComponent.domElement as unknown as SVGElement
234+
// ).style.display = visibility ? 'block' : 'none';
235+
// });
236236

237237
this.startPointElement = startPointNode.nodeComponent;
238238
this.endPointElement = endPointNode.nodeComponent;

‎libs/visual-programming-system/src/components/rect-thumb.ts‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
} from '../interfaces';
1515
import { LayoutProperties } from '../interfaces/layout-properties';
1616
import { Theme } from '../interfaces/theme';
17-
import { getSelectedNode } from '../reactivity';
17+
import { setSelectNode } from '../reactivity';
1818
import { ConnectionControllerType, NodeType } from '../types';
1919
import { BaseNodeInfo } from '../types/base-node-info';
2020
import { getRectNodeCssClasses } from './css-classes/rect-css-classes';
@@ -141,85 +141,85 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
141141
) {
142142
const { x, y } = this.canvasApp.getPointerPositionInLocalSpace(event);
143143

144-
const selectedNodeId = getSelectedNode();
145-
if (selectedNodeId) {
146-
const selectedNode = this.canvasElements?.get(
147-
selectedNodeId.id
148-
) as unknown as INodeComponent<T>;
149-
if (
150-
selectedNode &&
151-
selectedNode.nodeType === NodeType.Connection &&
152-
event &&
153-
this.nodeComponent?.connections &&
154-
this.nodeComponent?.connections.length > 0
155-
) {
156-
const startConnections = this.nodeComponent.connections.filter(
157-
(connection) => {
158-
return (
159-
connection.startNode &&
160-
connection.startNode?.id === this.nodeComponent?.id &&
161-
connection.id === selectedNode.id
162-
);
163-
}
164-
);
165-
if (startConnections.length > 0) {
166-
const connection = startConnections[0];
167-
168-
console.log('thumb 2 start', x, y);
169-
if (connection.connectionStartNodeThumb) {
170-
connection.startNode = undefined;
171-
connection.startNodeThumb = undefined;
172-
173-
this.initiateDraggingConnection(
174-
connection.connectionStartNodeThumb,
175-
x,
176-
y
177-
// xorg,
178-
// yorg,
179-
// rootX,
180-
// rootY
181-
);
182-
}
183-
return true;
184-
}
144+
// const selectedNodeId = getSelectedNode();
145+
// if (selectedNodeId) {
146+
// const selectedNode = this.canvasElements?.get(
147+
// selectedNodeId.id
148+
// ) as unknown as INodeComponent<T>;
149+
// if (
150+
// selectedNode &&
151+
// selectedNode.nodeType === NodeType.Connection &&
152+
// event &&
153+
// this.nodeComponent?.connections &&
154+
// this.nodeComponent?.connections.length > 0
155+
// ) {
156+
// const startConnections = this.nodeComponent.connections.filter(
157+
// (connection) => {
158+
// return (
159+
// connection.startNode &&
160+
// connection.startNode?.id === this.nodeComponent?.id &&
161+
// connection.id === selectedNode.id
162+
// );
163+
// }
164+
// );
165+
// if (startConnections.length > 0) {
166+
// const connection = startConnections[0];
167+
168+
// console.log('thumb 2 start', x, y);
169+
// if (connection.connectionStartNodeThumb) {
170+
// connection.startNode = undefined;
171+
// connection.startNodeThumb = undefined;
172+
173+
// this.initiateDraggingConnection(
174+
// connection.connectionStartNodeThumb,
175+
// x,
176+
// y
177+
// // xorg,
178+
// // yorg,
179+
// // rootX,
180+
// // rootY
181+
// );
182+
// }
183+
// return true;
184+
// }
185185

186-
const endConnections = this.nodeComponent.connections.filter(
187-
(connection) => {
188-
return (
189-
connection.endNode &&
190-
connection.endNode?.id === this.nodeComponent?.id &&
191-
connection.id === selectedNode.id
192-
);
193-
}
194-
);
195-
if (endConnections.length > 0) {
196-
const connection = endConnections[0];
197-
198-
console.log('thumb 2 end', x, y);
199-
if (connection.connectionEndNodeThumb) {
200-
if (connection.endNode) {
201-
connection.endNode.connections =
202-
connection.endNode.connections.filter((connection) => {
203-
return connection.id !== connection.id;
204-
});
205-
}
206-
connection.endNode = undefined;
207-
connection.endNodeThumb = undefined;
208-
209-
this.initiateDraggingConnection(
210-
connection.connectionEndNodeThumb,
211-
x,
212-
y
213-
// xorg,
214-
// yorg,
215-
// rootX,
216-
// rootY
217-
);
218-
}
219-
return true;
220-
}
221-
}
222-
}
186+
// const endConnections = this.nodeComponent.connections.filter(
187+
// (connection) => {
188+
// return (
189+
// connection.endNode &&
190+
// connection.endNode?.id === this.nodeComponent?.id &&
191+
// connection.id === selectedNode.id
192+
// );
193+
// }
194+
// );
195+
// if (endConnections.length > 0) {
196+
// const connection = endConnections[0];
197+
198+
// console.log('thumb 2 end', x, y);
199+
// if (connection.connectionEndNodeThumb) {
200+
// if (connection.endNode) {
201+
// connection.endNode.connections =
202+
// connection.endNode.connections.filter((connection) => {
203+
// return connection.id !== connection.id;
204+
// });
205+
// }
206+
// connection.endNode = undefined;
207+
// connection.endNodeThumb = undefined;
208+
209+
// this.initiateDraggingConnection(
210+
// connection.connectionEndNodeThumb,
211+
// x,
212+
// y
213+
// // xorg,
214+
// // yorg,
215+
// // rootX,
216+
// // rootY
217+
// );
218+
// }
219+
// return true;
220+
// }
221+
// }
222+
// }
223223

224224
const curve = this.createStraightLineConnection
225225
? new LineConnection<T>(
@@ -276,6 +276,11 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
276276
this.nodeComponent.thumbConnectors &&
277277
this.nodeComponent.thumbConnectors.length > 0
278278
) {
279+
setSelectNode({
280+
id: curve.nodeComponent.id,
281+
containerNode: curve.nodeComponent
282+
.containerNode as unknown as IRectNodeComponent<BaseNodeInfo>,
283+
});
279284
const thumbConnector = this.nodeComponent.thumbConnectors.find(
280285
(thumbConnector) => {
281286
if (

‎libs/web-flow-executor/src/nodes/canvas-node.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,13 @@ export const getCanvasNode = (updated: () => void): NodeTask<NodeInfo> => {
156156
undefined,
157157
undefined,
158158
undefined,
159-
true
159+
true,
160+
undefined,
161+
undefined,
162+
undefined,
163+
undefined,
164+
undefined,
165+
canvasApp
160166
);
161167

162168
rect.nodeComponent.canvasAppInstance = canvasAppInstance;

‎libs/web-flow-executor/src/nodes/layout-node.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,13 @@ export const getLayoutNode = (updated: () => void): NodeTask<NodeInfo> => {
153153
undefined,
154154
undefined,
155155
undefined,
156-
true
156+
true,
157+
undefined,
158+
undefined,
159+
undefined,
160+
undefined,
161+
undefined,
162+
canvasApp
157163
);
158164
if (!canvasAppInstance) {
159165
throw new Error('canvasAppInstance is undefined');

‎libs/web-flow-executor/src/nodes/state-compound.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,13 @@ export const createStateCompound: NodeTaskFactory<NodeInfo> = (
172172
undefined,
173173
undefined,
174174
undefined,
175-
true
175+
true,
176+
undefined,
177+
undefined,
178+
undefined,
179+
undefined,
180+
undefined,
181+
canvasApp
176182
);
177183

178184
rect.nodeComponent.canvasAppInstance = canvasAppInstance;

0 commit comments

Comments
 (0)