Canvas

packages/plugins/io-center/src/headless/stores/canvas-operations.svelte.ts

@@ -0,0 +1,11 @@
+import { canvasStore } from "@/ui/components/canvas/canvas-store.svelte";
+import type { TreeNode } from "@/ui/components/object-tree/types.object-tree";
+
+export function addDoElementToCanvas(node: TreeNode) {
+    if (canvasStore.dataObjects.some(item => item.id === node.id)) {
+        canvasStore.dataObjects = canvasStore.dataObjects.filter((item) => item.id !== node.id);
+        return;
+    }
+
+    canvasStore.dataObjects.push({ id: node.id, name: node.name })
+}

packages/plugins/io-center/src/headless/utils/utils.ts

@@ -1,3 +1,5 @@
+import { canvasStore } from "@/ui/components/canvas/canvas-store.svelte";
+import type { ConnectionPoint } from "@/ui/components/canvas/types.canvas";
 import type { TreeNode } from "@/ui/components/object-tree/types.object-tree";
 
 export function searchTree(tree: TreeNode[], searchTerm: string): TreeNode[] {
@@ -16,3 +18,173 @@ export function searchTree(tree: TreeNode[], searchTerm: string): TreeNode[] {
         })
         .filter(node => node !== null);
 }
+
+export function startDrawing(event: MouseEvent) {
+    event.preventDefault();
+    if (!event.target || !event.currentTarget) {
+        return;
+    }
+    canvasStore.drawStartPoint = event.target;
+    const currentTarget = event.currentTarget as HTMLElement;
+    if (!currentTarget.parentElement) {
+        return;
+    }
+    canvasStore.startNode = currentTarget.parentElement.getAttribute("data-title");
+}
+
+export function isWrongColumn(node1: string, node2: string) {
+    if (!canvasStore.container) {
+        return false;
+    }
+
+    const column1 = canvasStore.container
+        .querySelector(`[data-title="${node1}"]`)
+        ?.closest(".flex-col");
+    const column2 = canvasStore.container
+        .querySelector(`[data-title="${node2}"]`)
+        ?.closest(".flex-col");
+    if (!column1 || !column2) {
+        return false;
+    }
+    if (column1 === column2) {
+        return true;
+    }
+
+    const column1Title = column1.getAttribute("data-title");
+    const column2Title = column2.getAttribute("data-title");
+    if (!column1Title || !column2Title) {
+        return false;
+    }
+
+    if (
+        (column1Title === "DO" && column2Title === "LP") ||
+        (column1Title === "LP" && column2Title === "DO")
+    ) {
+        return true;
+    }
+    return false;
+}
+
+export function isSameSide(startSide: string, targetSide: string) {
+    return (
+        (startSide === "left-circle" && targetSide === "left") ||
+        (startSide === "right-circle" && targetSide === "right")
+    );
+}
+
+export function connectionExists(fromNode: string, toNode: string) {
+    return canvasStore.connections.some(
+        (connection) =>
+            (connection.from.node === fromNode &&
+                connection.to.node === toNode) ||
+            (connection.from.node === toNode &&
+                connection.to.node === fromNode),
+    );
+}
+
+export function stopDrawing(targetNode: string, targetSide: string) {
+    const startCircle = canvasStore.lastStartPoint;
+    canvasStore.lastStartPoint = null;
+
+    if (!canvasStore.container) {
+        return;
+    }
+
+    const target = canvasStore.container.querySelector(
+        `[data-title="${targetNode}"]`,
+    ) as HTMLElement | null;
+
+    if (startCircle && target && startCircle !== target) {
+        let fromNode = canvasStore.startNode;
+        if (!fromNode) {
+            return;
+        }
+        let toNode = targetNode;
+
+        if (startCircle instanceof HTMLElement)
+            if (
+                fromNode === toNode ||
+                isWrongColumn(fromNode, toNode) ||
+                isSameSide(startCircle.id, targetSide)
+            ) {
+                return;
+            }
+
+        if (
+            startCircle instanceof HTMLElement &&
+            startCircle.id === "left-circle"
+        ) {
+            [fromNode, toNode] = [toNode, fromNode];
+        }
+
+        if (!connectionExists(fromNode, toNode)) {
+            canvasStore.connections = [
+                ...canvasStore.connections,
+                {
+                    from: { node: fromNode, side: "right" },
+                    to: { node: toNode, side: "left" },
+                },
+            ];
+        }
+    }
+}
+
+export function getCoordinates(connectionPoint: ConnectionPoint) {
+    if (!canvasStore.svgElement || !canvasStore.container) {
+        return { x: 0, y: 0 };
+    }
+
+    const target = canvasStore.container.querySelector(
+        `[data-title="${connectionPoint.node}"]`,
+    ) as HTMLElement | null;
+
+    if (!target) {
+        return { x: 0, y: 0 };
+    }
+
+    const circle = target.querySelector(
+        connectionPoint.side === "left" ? "#left-circle" : "#right-circle",
+    );
+
+    if (!circle) {
+        return { x: 0, y: 0 };
+    }
+
+    const rect = circle.getBoundingClientRect();
+
+    const svgPoint = new DOMPoint(
+        rect.left + rect.width / 2,
+        rect.top + rect.height / 2,
+    );
+
+    const transformedPoint = svgPoint.matrixTransform(
+        canvasStore.svgElement.getScreenCTM()?.inverse(),
+    );
+    return { x: transformedPoint.x, y: transformedPoint.y };
+}
+
+export function getCirclePosition(target: EventTarget | null) {
+    if (
+        !target ||
+        !(target instanceof HTMLElement) ||
+        !canvasStore.svgElement
+    ) {
+        return { x: 0, y: 0 };
+    }
+
+    const rect = target.getBoundingClientRect();
+
+    const svgPoint = new DOMPoint(
+        rect.left + rect.width / 2,
+        rect.top + rect.height / 2,
+    );
+
+    const transformedPoint = svgPoint.matrixTransform(
+        canvasStore.svgElement.getScreenCTM()?.inverse(),
+    );
+    return { x: transformedPoint.x, y: transformedPoint.y };
+}
+
+export function redrawConnections() {
+    canvasStore.connections = [...canvasStore.connections];
+}

packages/plugins/io-center/src/plugin.svelte

@@ -24,6 +24,7 @@
 	import type { Nullable } from "./types";
 	import type { IED } from "./ied/ied";
 	import ObjectTree from "./ui/components/object-tree/object-tree.svelte";
+    import CanvasArea from "./ui/components/canvas/canvas-area.svelte";
 
 	// props
 	const {
@@ -89,10 +90,7 @@
 			<ObjectTree />
 		</div>
 		<div slot="content">
-			Document: {docName}
-			<p>
-				<button onclick={addIED}>Add IED</button>
-			</p>
+			<CanvasArea />
 		</div>
 		<div slot="sidebar-right">sidebar right</div>
 	</Layout>

packages/plugins/io-center/src/ui/components/canvas/canvas-actions.svelte.ts

@@ -0,0 +1,39 @@
+import { canvasStore } from './canvas-store.svelte'
+
+export function calulateCoordinates(node: HTMLElement) {
+	function convertToSVGCoordinates(clientX: number, clientY: number) {
+		if (!canvasStore.svgElement) {
+			return { x: clientX, y: clientY }
+		}
+
+		const svgPoint = new DOMPoint(clientX, clientY)
+
+		const transformedPoint = svgPoint.matrixTransform(
+			canvasStore.svgElement.getScreenCTM()?.inverse()
+		)
+		return { x: transformedPoint.x, y: transformedPoint.y }
+	}
+
+	function updateMousePosition(event: MouseEvent) {
+		event.preventDefault()
+		canvasStore.mousePosition = convertToSVGCoordinates(
+			event.clientX,
+			event.clientY
+		)
+	}
+
+	function onMouseUp() {
+		canvasStore.lastStartPoint = canvasStore.drawStartPoint
+		canvasStore.drawStartPoint = null
+	}
+
+	$effect(() => {
+		node.addEventListener('mousemove', updateMousePosition)
+		node.addEventListener('mouseup', onMouseUp)
+
+		return () => {
+			node.removeEventListener('mousemove', updateMousePosition)
+			node.removeEventListener('mouseup', onMouseUp)
+		}
+	})
+}

packages/plugins/io-center/src/ui/components/canvas/canvas-area.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+	import NodeElement from "./node-element.svelte";
+	import { calulateCoordinates } from "./canvas-actions.svelte";
+	import { canvasStore } from "./canvas-store.svelte";
+	import {
+		getCirclePosition,
+		getCoordinates,
+		redrawConnections,
+		startDrawing,
+		stopDrawing,
+	} from "@/headless/utils";
+</script>
+
+<svelte:window onresize={redrawConnections} />
+
+<div
+	use:calulateCoordinates
+	class="grid grid-cols-3 h-screen p-2 gap-2"
+	bind:this={canvasStore.container}
+>
+	<div
+		class="flex flex-col items-center w-full gap-2 bg-gray-50"
+		data-title="DO"
+	>
+		<div class="text-center">Data Objects</div>
+		{#each canvasStore.dataObjects as node}
+			<NodeElement
+				{node}
+				showLeftCircle={false}
+				showRightCircle={true}
+				{startDrawing}
+				{stopDrawing}
+			/>
+		{/each}
+	</div>
+	<div
+		class="flex flex-col items-center w-full gap-2 bg-gray-50"
+		data-title="LC"
+	>
+		<div class="text-center">Logical Conditioners</div>
+		{#each canvasStore.logicalConditioners as node}
+			<NodeElement
+				{node}
+				showLeftCircle={true}
+				showRightCircle={true}
+				{startDrawing}
+				{stopDrawing}
+			/>
+		{/each}
+	</div>
+	<div
+		class="flex flex-col items-center w-full gap-2 bg-gray-50"
+		data-title="LP"
+	>
+		<div class="text-center">Logical Physical Inputs/Outputs</div>
+		{#each canvasStore.logicalPhysicals as node}
+			<NodeElement
+				{node}
+				showLeftCircle={true}
+				showRightCircle={false}
+				{startDrawing}
+				{stopDrawing}
+			/>
+		{/each}
+	</div>
+</div>
+
+<svg
+	class="absolute top-0 left-0 w-full h-full pointer-events-none"
+	bind:this={canvasStore.svgElement}
+>
+	{#key canvasStore.connections}
+		{#each canvasStore.connections as connection}
+			<path
+				class="stroke-black stroke-2 fill-none"
+				d={`M ${getCoordinates(connection.from).x},${getCoordinates(connection.from).y} 
+					 C ${(getCoordinates(connection.from).x + getCoordinates(connection.to).x) / 2},${getCoordinates(connection.from).y} 
+					 ${(getCoordinates(connection.from).x + getCoordinates(connection.to).x) / 2},${getCoordinates(connection.to).y} 
+					 ${getCoordinates(connection.to).x},${getCoordinates(connection.to).y}`}
+			/>
+		{/each}
+	{/key}
+	{#if canvasStore.drawStartPoint}
+		<path
+			class="stroke-black stroke-2"
+			d={`M ${getCirclePosition(canvasStore.drawStartPoint).x},${getCirclePosition(canvasStore.drawStartPoint).y} L ${canvasStore.mousePosition.x},${canvasStore.mousePosition.y}`}
+		/>
+	{/if}
+</svg>

packages/plugins/io-center/src/ui/components/canvas/canvas-store.svelte.ts

@@ -0,0 +1,16 @@
+import type { Connection, NodeElement } from "./types.canvas"
+
+class UseCanvasStore {
+	dataObjects = $state<NodeElement[]>([])
+	logicalConditioners = $state<NodeElement[]>([])
+	logicalPhysicals = $state<NodeElement[]>([])
+	connections = $state<Connection[]>([])
+	container = $state<HTMLDivElement | null>(null)
+	mousePosition = $state({ x: 0, y: 0 })
+	startNode = $state<string | null>("");
+	drawStartPoint = $state<EventTarget | null>(null)
+	lastStartPoint = $state<EventTarget | null>(null)
+	svgElement = $state<SVGGraphicsElement | null>(null)
+}
+
+export const canvasStore = new UseCanvasStore()