David/graph view

src/lib/components/Canvas.svelte

@@ -0,0 +1,147 @@
+<script lang="ts">
+    import { onMount, setContext } from 'svelte'
+
+    type Scale = {
+        current: number
+        min: number
+        max: number
+        factor: number
+    }
+
+    let { children, scale = $bindable({ current: 1, min: 0.1, max: 4, factor: 0.05 }) }: { children: any; scale?: Scale } = $props()
+
+    let canvas: HTMLDivElement | null = $state(null)
+    onMount(() => {
+        canvas?.addEventListener('wheel', onWheel, { passive: false });
+        canvas?.addEventListener('touchmove', onTouchMove, { passive: false });
+        return () => {
+            canvas?.removeEventListener('wheel', onWheel);
+            canvas?.removeEventListener('touchmove', onTouchMove);
+        };
+    })
+
+    let dragProject: ((event: any) => void) | null = $state(null)
+    let isDragging = $derived(dragProject !== null) 
+    setContext('graph', {
+        startDrag(project: any) {
+            dragProject = project
+        },
+        stopDrag()  {
+            dragProject = null
+        },
+        isDragging() {
+            return isDragging
+        }
+    })
+
+    let isDraggingCanvas = false
+    let canvasOffset = $state({ x: 0, y: 0 })
+    function scrollCanvas(offset: { x: number; y: number }) {
+        canvasOffset.x += offset.x
+        canvasOffset.y += offset.y
+    }
+
+    function onMouseMove(event: any) {
+        if (isDraggingCanvas) {
+            // drag with mouse
+            scrollCanvas({
+                x: event.movementX,
+                y: event.movementY,
+            })
+            return;
+        } 
+
+        dragProject?.(event)
+    }
+
+    function onMouseUp() {
+        dragProject = null
+        isDraggingCanvas = false
+    }
+
+    function onCanvasMouseDown(event: any) {
+        if (event.button === 1) {
+            isDraggingCanvas = true;
+        }
+    }
+
+    function onWheel(event: WheelEvent) {
+        const { deltaX, deltaY, clientX, clientY, ctrlKey, shiftKey } = event
+        if (ctrlKey) {
+            // scale
+            event.preventDefault()
+
+            // @ts-ignore
+            const canvasRect = event.currentTarget.getBoundingClientRect()
+
+            let normalX = clientX / canvasRect.width - 0.5
+            let normalY = clientY / canvasRect.height - 0.5
+
+            const mouseX = canvasRect.width * normalX
+            const mouseY = canvasRect.height * normalY
+
+            const change = scale.factor * -Math.sign(deltaY)
+            const changedScale = Math.min(Math.max(scale.min, scale.current + change), scale.max)
+
+            const ratio = changedScale / scale.current
+            canvasOffset.x = mouseX - ratio * (mouseX - canvasOffset.x)
+            canvasOffset.y = mouseY - ratio * (mouseY - canvasOffset.y)
+
+            scale.current = changedScale
+        } else if (shiftKey) {
+            // scroll horizontally
+            scrollCanvas({
+                x: -deltaY,
+                y: 0,
+            })
+        } else {
+            // scroll both directions (touchpad)
+            scrollCanvas({
+                x: -deltaX,
+                y: -deltaY,
+            })
+        }
+    }
+
+    let touchStartPos = { x: 0, y: 0 };
+    let isPinching = false;
+
+    function onTouchStart(event: TouchEvent) {
+        if (event.touches.length === 1) {
+            touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+        }
+    }
+
+    function onTouchMove(event: TouchEvent) {
+        event.preventDefault();
+        if (!isPinching && event.touches.length === 1) {
+            const dx = event.touches[0].clientX - touchStartPos.x;
+            const dy = event.touches[0].clientY - touchStartPos.y;
+            touchStartPos = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+            scrollCanvas({ x: dx, y: dy });
+        }
+    }
+
+</script>
+
+<div class="flex flex-col px-1 py-0.5 flex-grow">
+    <div
+        class="flex flex-grow cursor-default w-full h-full overflow-hidden relative"
+        onmousemove={onMouseMove}
+        onmouseup={onMouseUp}
+        onmousedown={onCanvasMouseDown}
+        ontouchstart={onTouchStart}
+        role="button"
+        tabindex="0"
+        bind:this={canvas}
+        class:cursor-grabbing={dragProject !== null}
+
+    >
+        <div
+            class="flex flex-grow origin-center"
+            style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale.current});"
+        >
+            {@render children()}
+        </div>
+    </div>
+</div>

src/lib/components/CanvasDragger.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import { getContext } from 'svelte'
+
+    let { startDrag, stopDrag, isDragging } = getContext('graph')
+    let grabbing = $derived(isDragging())
+
+    let { drag, end } = $props()
+</script>
+
+<button
+    class="w-4 h-4 absolute right-2 top-2"
+    class:cursor-grab={!grabbing}
+    class:cursor-grabbing={grabbing}
+    onmousedown={() => startDrag(drag)}
+    onmouseup={() => {
+        stopDrag()
+        end()
+    }}
+>
+    <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="16"
+        height="16"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+    >
+        <path
+            fill-rule="evenodd"
+            d="M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8"
+        />
+    </svg>
+</button>

src/lib/components/Line.svelte

@@ -1,29 +1,38 @@
-<script>
-    import { messages } from '$lib/index.svelte'
+<script lang="ts">
+    import Message from './Message.svelte'
 
-    let { posLinksX, posLinksY, posIndexX, posIndexY, messageId } = $props()
+    let { from, to }: { from: Message; to: Message } = $props()
 
-    let noteWidth = 96
-    let noteHeight = 68
+    let parent = $derived(from.data.transform)
+    let child = $derived(to.data.transform)
 
-    $effect(() => {
-        let transform = messages.get(messageId).data.transform
+    let childCenter = $derived({
+        x: child.x + child.width / 2,
+        y: child.y + child.height / 2,
+    })
 
-        console.log(transform)
+    let parentCenter = $derived({
+        x: parent.x + parent.width / 2,
+        y: parent.y + parent.height / 2,
     })
+
+    let length = $derived(
+        Math.sqrt(
+            Math.pow(parentCenter.x - childCenter.x, 2) +
+                Math.pow(parentCenter.y - childCenter.y, 2)
+        )
+    )
 </script>
 
 <div
-    class="line absolute h-0.5 bg-black dark:bg-white"
+    class="line absolute h-0.5 bg-black dark:bg-white visible"
     style="
-    left: {posLinksX + noteWidth / 2}px;
-    top: {posLinksY + noteHeight / 2}px;
-    width: {Math.sqrt(
-        Math.pow(posIndexX - posLinksX, 2) + Math.pow(posIndexY - posLinksY, 2)
-    )}px;
+    left: {childCenter.x}px;
+    top: {childCenter.y}px;
+    width: {length}px;
     transform: rotate({(Math.atan2(
-        posIndexY - posLinksY,
-        posIndexX - posLinksX
+        parentCenter.y - childCenter.y,
+        parentCenter.x - childCenter.x
     ) *
         180) /
         Math.PI}deg);

src/lib/components/Message.svelte

@@ -3,6 +3,7 @@
     import { type Message } from '$lib/index.svelte'
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
+    import deleteIcon from '$lib/assets/delete.svg?raw'
 
     let {
         value,
@@ -49,17 +50,7 @@
             onclick={() => ondelete(value)}
             title="Delete a note"
         >
-            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-                ><g
-                    fill="none"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    ><path
-                        d="M3 6h18M5 6v14c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V6M8 6V4c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2M14 11v6M10 11v6"
-                    /></g
-                ></svg
-            >
+            {@html deleteIcon}
         </button>
     </div>
 </div>