Skip to content

Commit 32976bf

Browse files
devhelprdevhelpr
committed
WiP toolbar buttons to enable modes .. create-connection and assistant
1 parent e0df02d commit 32976bf

File tree

6 files changed

+97
-63
lines changed

6 files changed

+97
-63
lines changed

‎libs/app-canvas/src/app/components/toolbar.tsx‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,13 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
108108
// skipNextEffect = false;
109109
// return;
110110
// }
111+
111112
const selectedNodeInfo = getSelectedNode();
112113
const actionSelectedNodeInfo = getActionNode();
114+
115+
if (props.canvasAppInstance.getCanvasAttribute('mode') !== 'assistant') {
116+
return;
117+
}
113118
if (selectedNodeInfo || actionSelectedNodeInfo) {
114119
// selectedNode = undefined;
115120
// const info = props.getNode(
@@ -444,6 +449,15 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
444449
setSelectNode(undefined);
445450
popupTriggeredFromEffect = false;
446451
hideUL();
452+
453+
if (
454+
props.canvasAppInstance.getCanvasAttribute('mode') ===
455+
'create-connection'
456+
) {
457+
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
458+
createConnectionButton?.classList.remove('bg-blue-500');
459+
assistantButton?.classList.remove('bg-blue-500');
460+
}
447461
}
448462
);
449463

@@ -486,17 +500,63 @@ export function Toolbar<T extends BaseNodeInfo>(props: {
486500
}
487501
fillTaskList(tasks, label);
488502
};
503+
let createConnectionButton: HTMLButtonElement | null = null;
504+
let assistantButton: HTMLButtonElement | null = null;
489505
const ToolbarComponent = () => (
490506
<div
491507
class="flex whitespace-nowrap absolute bottom-[80px] left-[50%] -translate-x-[50%] z-[10000] bg-white rounded-sm max-w-full w-max"
492508
getElement={(element: HTMLElement) => {
493509
wrapper = element as HTMLDivElement;
494510
}}
495511
>
496-
<button>
512+
<button
513+
getElement={(element: HTMLButtonElement) => {
514+
createConnectionButton = element;
515+
}}
516+
click={(event: MouseEvent) => {
517+
event.preventDefault();
518+
event.stopPropagation();
519+
createConnectionButton?.classList.toggle('bg-blue-500');
520+
assistantButton?.classList.remove('bg-blue-500');
521+
if (
522+
props.canvasAppInstance.getCanvasAttribute('mode') ===
523+
'create-connection'
524+
) {
525+
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
526+
} else {
527+
props.canvasAppInstance.setCanvasAttribute(
528+
'mode',
529+
'create-connection'
530+
);
531+
}
532+
return false;
533+
}}
534+
>
497535
<span class="icon icon-arrow_right_alt px-2" />
498536
</button>
499-
<button>
537+
<button
538+
getElement={(element: HTMLButtonElement) => {
539+
assistantButton = element;
540+
}}
541+
click={(event: MouseEvent) => {
542+
event.preventDefault();
543+
event.stopPropagation();
544+
545+
createConnectionButton?.classList.remove('bg-blue-500');
546+
assistantButton?.classList.toggle('bg-blue-500');
547+
if (
548+
props.canvasAppInstance.getCanvasAttribute('mode') === 'assistant'
549+
) {
550+
props.canvasAppInstance.setCanvasAttribute('mode', 'default');
551+
popupTriggeredFromEffect = false;
552+
selectedNode = undefined;
553+
hideUL();
554+
} else {
555+
props.canvasAppInstance.setCanvasAttribute('mode', 'assistant');
556+
}
557+
return false;
558+
}}
559+
>
500560
<span class="icon icon-assistant px-2" />
501561
</button>
502562
<input

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,4 +239,7 @@ export interface IBaseFlow<T extends BaseNodeInfo> {
239239
x: number;
240240
y: number;
241241
};
242+
243+
getCanvasAttribute: (attribute: string) => string | null;
244+
setCanvasAttribute: (attribute: string, value: string) => void;
242245
}

‎libs/visual-programming-system/src/canvas-app/composition-runtime-flow-context.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -597,4 +597,11 @@ export class CompositionRuntimeFlowContext<T extends BaseNodeInfo>
597597
y: 0,
598598
};
599599
};
600+
601+
getCanvasAttribute = (_attribute: string) => {
602+
return null;
603+
};
604+
setCanvasAttribute = (_attribute: string, _value: string) => {
605+
//
606+
};
600607
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,9 @@ export class FlowCanvas<T extends BaseNodeInfo>
187187
private rootFlowCanvas: IFlowCanvasBase<T> | undefined;
188188
private isNodeContainer = false;
189189
public getRootFlowCanvas = () => this.rootFlowCanvas;
190+
191+
private canvasAttributes: Map<string, string> = new Map();
192+
190193
constructor(
191194
rootElement: HTMLElement,
192195
disableInteraction?: boolean,
@@ -2076,4 +2079,11 @@ export class FlowCanvas<T extends BaseNodeInfo>
20762079
y: ypos,
20772080
};
20782081
};
2082+
2083+
getCanvasAttribute = (attribute: string) => {
2084+
return this.canvasAttributes.get(attribute) ?? null;
2085+
};
2086+
setCanvasAttribute = (attribute: string, value: string) => {
2087+
this.canvasAttributes.set(attribute, value);
2088+
};
20792089
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,4 +406,11 @@ export class RuntimeFlowContext<T extends BaseNodeInfo>
406406
y: 0,
407407
};
408408
};
409+
410+
getCanvasAttribute = (_attribute: string) => {
411+
return null;
412+
};
413+
setCanvasAttribute = (_attribute: string, _value: string) => {
414+
//
415+
};
409416
}

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

Lines changed: 8 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -133,68 +133,15 @@ export class RectThumb<T extends BaseNodeInfo> extends Rect<T> {
133133
if (!this.canvas || !this.rootElement) {
134134
return false;
135135
}
136-
if (event.shiftKey && this.canvasElements && this.canvasApp) {
137-
// const elementRect = (
138-
// this.nodeComponent.domElement as unknown as HTMLElement | SVGElement
139-
// ).getBoundingClientRect();
140-
// let parentX = 0;
141-
// let parentY = 0;
142-
// if (this.containerNode) {
143-
// if (this.containerNode && this.containerNode?.getParentedCoordinates) {
144-
// const parentCoordinates =
145-
// this.containerNode?.getParentedCoordinates() ?? {
146-
// x: 0,
147-
// y: 0,
148-
// };
149-
// // parentX = this.containerNode.x - paddingRect;
150-
// // parentY = this.containerNode.y - paddingRect;
151-
// parentX = parentCoordinates.x - paddingRect;
152-
// parentY = parentCoordinates.y - paddingRect;
153-
// }
154-
// }
155-
console.log('pre getPointerPos', this.rootElement);
156-
// const {
157-
// pointerXPos,
158-
// pointerYPos,
159-
// rootX,
160-
// rootY,
161-
// eventClientX,
162-
// eventClientY,
163-
// } = getPointerPos(
164-
// this.canvas.domElement as HTMLElement,
165-
// this.rootElement,
166-
// event
167-
// );
168-
169-
// const { x: rootXCamera, y: rootYCamera } =
170-
// transformCameraSpaceToWorldSpace(rootX, rootY);
171-
172-
// const { x: clientXCamera, y: clientYCamera } =
173-
// transformCameraSpaceToWorldSpace(eventClientX, eventClientY);
174-
175-
// const xpos = clientXCamera - rootXCamera;
176-
// const ypos = clientYCamera - rootYCamera;
177-
const { x, y } = this.canvasApp.getPointerPositionInLocalSpace(event);
178136

179-
// let { x, y } = transformCameraSpaceToWorldSpace(pointerXPos, pointerYPos);
180-
// const xorg = x;
181-
// const yorg = y;
182-
// x = x - parentX;
183-
// y = y - parentY;
184-
185-
// console.log(
186-
// 'RECT-THUMB pointerdown',
187-
// event.clientX,
188-
// event.clientY,
189-
// x,
190-
// y,
191-
// xorg,
192-
// yorg,
193-
// pointerXPos,
194-
// pointerYPos,
195-
// rootX,
196-
// rootY
197-
// );
137+
const isCreatingConnecting =
138+
this.canvasApp?.getCanvasAttribute('mode') === 'create-connection';
139+
if (
140+
(event.shiftKey || isCreatingConnecting) &&
141+
this.canvasElements &&
142+
this.canvasApp
143+
) {
144+
const { x, y } = this.canvasApp.getPointerPositionInLocalSpace(event);
198145

199146
const selectedNodeId = getSelectedNode();
200147
if (selectedNodeId) {

0 commit comments

Comments
 (0)