From 02eef703cd1872864fb51b52184d5e1b6152626b Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Wed, 24 Jul 2024 20:35:21 +0300
Subject: [PATCH 01/10] feat: graph with svg

---
 src/lib/components/Note.svelte | 34 ++++++++++++++
 src/routes/graph/+page.svelte  | 82 ++++++++++++++++++++++++++++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/lib/components/Note.svelte

diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
new file mode 100644
index 0000000..ce7dcd6
--- /dev/null
+++ b/src/lib/components/Note.svelte
@@ -0,0 +1,34 @@
+<script>
+    export let posX = 0
+    export let posY = 0
+    export let message = ''
+    export let onMouseDown;
+
+    function copyToClipboard(text) {
+    navigator.clipboard.writeText(text).then(() => {
+      console.log('Text copied to clipboard');
+    }).catch(err => {
+      console.error('Failed to copy text: ', err);
+    });
+  }
+</script>
+
+<g
+    role="button"
+    tabindex="0"
+    transform="translate({posX}, {posY})"
+    class="node"
+    on:mousedown={onMouseDown}
+>
+    <rect width="100" height="50" rx='10' ry='10' fill="lightgray" />
+    <text x="10" y="25" font-family="Arial" font-size="14">
+        {message}
+    </text>
+    <foreignObject x="70" y="5" width="30" height="30">
+        <button on:click={() => copyToClipboard(message)} style="width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
+              </svg>
+        </button>
+      </foreignObject>
+</g>
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index e69de29..a8631fa 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -0,0 +1,82 @@
+<script lang='ts'>
+    import { onMount } from "svelte";
+    import Note from "../../lib/components/Note.svelte";
+    
+    let links = { 0: "0", 1: "0", 2: "1", 3: "2", 4: "2" };
+    let messages = {
+      0: { content: "n1", createdAt: 1721805898875 },
+      1: { content: "n2", createdAt: 1721805900864 },
+      2: { content: "n3", createdAt: 1721805903140 },
+      3: { content: "n4", createdAt: 1721805905711 },
+      4: { content: "n3 1", createdAt: 1721805912329 }
+    };
+  
+    let positions = {
+      0: { x: 300, y: 100 },
+      1: { x: 300, y: 200 },
+      2: { x: 300, y: 300 },
+      3: { x: 200, y: 400 },
+      4: { x: 400, y: 400 }
+    };
+    
+    onMount(() => {
+        let data = localStorage.getItem('notes');
+        let parseData = JSON.parse(data);
+        links = parseData.links;
+        messages = parseData.messages;
+        positions = Object.keys(messages).map((index) => {
+            return { x: 300, y: index * 100 + 50 };
+        });
+    });
+  
+  
+    let dragging = null as any;
+    let offset = { x: 0, y: 0 };
+  
+    function onMouseDown(event: any, index: number) {
+      dragging = index;
+      offset.x = event.clientX - positions[index].x;
+      offset.y = event.clientY - positions[index].y;
+    }
+  
+    function onMouseMove(event: any) {
+      if (dragging !== null) {
+        positions[dragging] = { x: event.clientX - offset.x, y: event.clientY - offset.y };
+      }
+    }
+  
+    function onMouseUp() {
+      dragging = null;
+    }
+  </script>
+  
+  <style>
+    .node {
+      cursor: pointer;
+    }
+  </style>
+  
+  <div class="flex flex-col px-12 pt-5">
+    <div class="border border-black" on:mousemove={onMouseMove} on:mouseup={onMouseUp} style="width: 600px; height: 600px; position: relative;" role="button" tabindex="0">
+      <svg width="100%" height="100%" role="img">
+        {#each Object.keys(links) as index}
+          <line
+            x1={positions[links[index]].x+50}
+            y1={positions[links[index]].y+50}
+            x2={positions[index].x+50}
+            y2={positions[index].y}
+            stroke="black"
+          />
+        {/each}
+        {#each Object.keys(messages) as index}
+          <Note
+            posX={positions[index].x}
+            posY={positions[index].y}
+            message={messages[index].content}
+            onMouseDown={(event) => onMouseDown(event, index)}
+            />
+        {/each}
+      </svg>
+    </div>
+  </div>
+  
\ No newline at end of file

From 2cd4671c71664bcd6a2ab1b82ed22c7ebfc210ba Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Wed, 24 Jul 2024 23:41:42 +0300
Subject: [PATCH 02/10] feat: html graph, Line&Note comp, copy button

---
 src/lib/components/Line.svelte | 26 +++++++++++++++
 src/lib/components/Note.svelte | 58 +++++++++++++++++++++++-----------
 src/routes/graph/+page.svelte  | 46 +++++++++++++--------------
 3 files changed, 88 insertions(+), 42 deletions(-)
 create mode 100644 src/lib/components/Line.svelte

diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
new file mode 100644
index 0000000..fe82b31
--- /dev/null
+++ b/src/lib/components/Line.svelte
@@ -0,0 +1,26 @@
+<script>
+    export let posLinksX = 0;
+    export let posLinksY = 0;
+    export let posIndexX = 0;
+    export let posIndexY = 0;
+</script>
+
+<div
+    class="line"
+    style="
+    position: absolute;
+    left: {posLinksX + 50}px;
+    top: {posLinksY + 50}px;
+    width: {Math.sqrt(Math.pow(posIndexX - posLinksX, 2) + Math.pow(posIndexY - posLinksY, 2))}px;
+    height: 2px;
+    background: black;
+    transform: rotate({Math.atan2(posIndexY - posLinksY, posIndexX - posLinksX) * 180 / Math.PI}deg);
+    "
+></div>
+
+<style>
+    .line {
+        transform-origin: 0 0;
+        z-index: -1;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index ce7dcd6..06a8c08 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -2,33 +2,55 @@
     export let posX = 0
     export let posY = 0
     export let message = ''
-    export let onMouseDown;
+    export let onMouseDown
 
     function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(() => {
-      console.log('Text copied to clipboard');
-    }).catch(err => {
-      console.error('Failed to copy text: ', err);
-    });
-  }
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+                console.log('Text copied to clipboard')
+            })
+            .catch((err) => {
+                console.error('Failed to copy text: ', err)
+            })
+    }
 </script>
 
-<g
+<div
+    class="note"
+    style="
+            position: absolute;
+            left: {posX}px;
+            top: {posY}px;
+          "
     role="button"
     tabindex="0"
-    transform="translate({posX}, {posY})"
-    class="node"
     on:mousedown={onMouseDown}
 >
-    <rect width="100" height="50" rx='10' ry='10' fill="lightgray" />
-    <text x="10" y="25" font-family="Arial" font-size="14">
-        {message}
-    </text>
-    <foreignObject x="70" y="5" width="30" height="30">
-        <button on:click={() => copyToClipboard(message)} style="width: 100%; height: 100%; border: none; background: transparent; cursor: pointer;">
+    <div class="note-content flex w-full h-full justify-center items-center relative">
+        <div class="note-rect select-none">{message}</div>
+        <button class="w-4 h-4 absolute right-2 top-2 hover:top-1.5" on:click={() => copyToClipboard(message)}>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
               </svg>
         </button>
-      </foreignObject>
-</g>
+    </div>
+</div>
+
+<style>
+    .note {
+        width: 100px;
+        height: 50px;
+        background-color: lightgray;
+        border-radius: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+    }
+
+    .note-content {
+        font-family: Arial;
+        font-size: 14px;
+    }
+</style>
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index a8631fa..8edc65b 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,6 +1,7 @@
 <script lang='ts'>
     import { onMount } from "svelte";
     import Note from "../../lib/components/Note.svelte";
+    import Line from "../../lib/components/Line.svelte";
     
     let links = { 0: "0", 1: "0", 2: "1", 3: "2", 4: "2" };
     let messages = {
@@ -50,33 +51,30 @@
     }
   </script>
   
-  <style>
-    .node {
-      cursor: pointer;
-    }
-  </style>
-  
   <div class="flex flex-col px-12 pt-5">
-    <div class="border border-black" on:mousemove={onMouseMove} on:mouseup={onMouseUp} style="width: 600px; height: 600px; position: relative;" role="button" tabindex="0">
-      <svg width="100%" height="100%" role="img">
-        {#each Object.keys(links) as index}
-          <line
-            x1={positions[links[index]].x+50}
-            y1={positions[links[index]].y+50}
-            x2={positions[index].x+50}
-            y2={positions[index].y}
-            stroke="black"
-          />
-        {/each}
-        {#each Object.keys(messages) as index}
-          <Note
+    <div
+      class="border border-black"
+      on:mousemove={onMouseMove}
+      on:mouseup={onMouseUp}
+      style="width: 600px; height: 600px; position: relative;"
+      role="button"
+      tabindex="0"
+    >
+      {#each Object.keys(links) as index}
+        <Line
+            posIndexX={positions[index].x}
+            posIndexY={positions[index].y}
+            posLinksX={positions[links[index]].x}
+            posLinksY={positions[links[index]].y}
+        />
+      {/each}
+      {#each Object.keys(messages) as index}
+        <Note
             posX={positions[index].x}
             posY={positions[index].y}
             message={messages[index].content}
             onMouseDown={(event) => onMouseDown(event, index)}
-            />
-        {/each}
-      </svg>
+        />
+      {/each}
     </div>
-  </div>
-  
\ No newline at end of file
+  </div>
\ No newline at end of file

From 68a8afdd0dd2e03381aff41a9ab784a95b6c1eb3 Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Fri, 26 Jul 2024 17:10:30 +0300
Subject: [PATCH 03/10] feat: graph transform, link button, string id

---
 src/lib/components/Line.svelte |  28 +++---
 src/lib/components/Note.svelte |  46 +++++----
 src/lib/index.svelte.ts        |  23 ++++-
 src/routes/graph/+page.svelte  | 174 ++++++++++++++++++++-------------
 4 files changed, 170 insertions(+), 101 deletions(-)

diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
index fe82b31..92c89e6 100644
--- a/src/lib/components/Line.svelte
+++ b/src/lib/components/Line.svelte
@@ -1,19 +1,25 @@
 <script>
-    export let posLinksX = 0;
-    export let posLinksY = 0;
-    export let posIndexX = 0;
-    export let posIndexY = 0;
+    import { messages } from "$lib/index.svelte";
+
+    let {posLinksX, posLinksY, posIndexX, posIndexY, messageId} = $props();
+
+     let noteWidth = 96;
+     let noteHeight = 68;
+
+    $effect(() => {
+        let transform = messages.get(messageId).data.transform;
+        
+        console.log(transform)
+    });
+    // $: console.log(noteHeight, noteWidth);
 </script>
 
 <div
-    class="line"
+    class="line absolute h-0.5 bg-black dark:bg-white"
     style="
-    position: absolute;
-    left: {posLinksX + 50}px;
-    top: {posLinksY + 50}px;
+    left: {posLinksX + (noteWidth/2)}px;
+    top: {posLinksY + (noteHeight/2)}px;
     width: {Math.sqrt(Math.pow(posIndexX - posLinksX, 2) + Math.pow(posIndexY - posLinksY, 2))}px;
-    height: 2px;
-    background: black;
     transform: rotate({Math.atan2(posIndexY - posLinksY, posIndexX - posLinksX) * 180 / Math.PI}deg);
     "
 ></div>
@@ -21,6 +27,6 @@
 <style>
     .line {
         transform-origin: 0 0;
-        z-index: -1;
+        z-index: 0;
     }
 </style>
\ No newline at end of file
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 06a8c08..8d9a60d 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -1,8 +1,10 @@
 <script>
-    export let posX = 0
-    export let posY = 0
-    export let message = ''
-    export let onMouseDown
+    import {messages} from '../index.svelte'
+    let { posX, posY, messageContent, onMouseDown, messageId, noteWidth, noteHeight } = $props();
+
+    $effect(() => {
+        messages.updateTransform(messageId, { x: posX, y: posY }, noteWidth, noteHeight);
+    });
 
     function copyToClipboard(text) {
         navigator.clipboard
@@ -17,40 +19,42 @@
 </script>
 
 <div
-    class="note"
+    bind:offsetHeight={noteHeight}
+    bind:offsetWidth={noteWidth}
+    class="note min-w-24 max-w-96 min-h-12 relative pt-3"
     style="
             position: absolute;
             left: {posX}px;
             top: {posY}px;
           "
-    role="button"
-    tabindex="0"
-    on:mousedown={onMouseDown}
 >
-    <div class="note-content flex w-full h-full justify-center items-center relative">
-        <div class="note-rect select-none">{message}</div>
-        <button class="w-4 h-4 absolute right-2 top-2 hover:top-1.5" on:click={() => copyToClipboard(message)}>
+        <button class="w-4 h-4 absolute right-2 top-2" on:mousedown={onMouseDown}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-move" 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>
+        <button class="w-4 h-4 absolute left-2 top-2" on:click={() => copyToClipboard(messageContent)}>
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
                 <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"/>
-              </svg>
+            </svg>
         </button>
+        <a class="w-4 h-4 absolute left-8 top-2" href="/#{messageId}">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
+                <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9q-.13 0-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+                <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4 4 0 0 1-.82 1H12a3 3 0 1 0 0-6z"/>
+              </svg>
+        </a>
+    <div class="flex w-full h-full justify-center">
+        <div class="p-4 w-full break-all">{messageContent}</div>
     </div>
 </div>
 
 <style>
     .note {
-        width: 100px;
-        height: 50px;
         background-color: lightgray;
         border-radius: 10px;
         display: flex;
-        align-items: center;
+        align-items: end;
         justify-content: center;
-        cursor: pointer;
-    }
-
-    .note-content {
-        font-family: Arial;
-        font-size: 14px;
     }
 </style>
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index d38c84c..a161943 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -22,6 +22,14 @@ const INCREMENT_PROVIDER: IdProvider = new IncrementProvider()
 export type MessageData = {
     content: string
     createdAt: number
+    transform:{
+        position: {
+            x: number
+            y: number
+        }
+        width: number
+        height: number
+    }
 }
 
 export type Message = {
@@ -44,6 +52,10 @@ class Messages {
 
     constructor(private id_provider: IdProvider = NANOID_PROVIDER) {}
 
+    get(id: Id): Message | null {
+        return this.messages[id] ?? null
+    }
+
     insert(id: Id, message: MessageData) {
         const inner = {
             data: message,
@@ -123,12 +135,21 @@ class Messages {
         }
     }
 
+    updateTransform(id: Id, position: { x: number, y: number }, width: number, height: number) {
+        const message = this.messages[id];
+        if (message) {
+            message.data.transform = { position, width, height };
+        } else {
+            console.error(`Message with id ${id} does not exist.`);
+        }
+    }
+
     clear() {
         this.messages = {}
     }
 }
 
-export const messages = $state(new Messages())
+export const messages = $state(new Messages(NANOID_PROVIDER))
 
 type ExportedMessages = {
     // child to parent map
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index 8edc65b..a88b314 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,80 +1,118 @@
-<script lang='ts'>
-    import { onMount } from "svelte";
-    import Note from "../../lib/components/Note.svelte";
-    import Line from "../../lib/components/Line.svelte";
-    
-    let links = { 0: "0", 1: "0", 2: "1", 3: "2", 4: "2" };
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import Note from '../../lib/components/Note.svelte'
+    import Line from '../../lib/components/Line.svelte'
+    // import {messages} from "../../lib/index.svelte";
+
+    let links = {
+        
+    }
+
     let messages = {
-      0: { content: "n1", createdAt: 1721805898875 },
-      1: { content: "n2", createdAt: 1721805900864 },
-      2: { content: "n3", createdAt: 1721805903140 },
-      3: { content: "n4", createdAt: 1721805905711 },
-      4: { content: "n3 1", createdAt: 1721805912329 }
-    };
-  
+        
+    }
+
     let positions = {
-      0: { x: 300, y: 100 },
-      1: { x: 300, y: 200 },
-      2: { x: 300, y: 300 },
-      3: { x: 200, y: 400 },
-      4: { x: 400, y: 400 }
-    };
-    
+        
+    }
+
+    let noteSizes = {
+        'da-d23-asd0': { width: 100, height: 50 },
+        'da-d23-asd1': { width: 120, height: 60 },
+        'da-d23-asd2': { width: 130, height: 70 },
+        'da-d23-asd3': { width: 110, height: 55 },
+        'da-d23-asd4': { width: 140, height: 75 },
+    }
+
     onMount(() => {
-        let data = localStorage.getItem('notes');
-        let parseData = JSON.parse(data);
-        links = parseData.links;
-        messages = parseData.messages;
-        positions = Object.keys(messages).map((index) => {
-            return { x: 300, y: index * 100 + 50 };
-        });
-    });
-  
-  
-    let dragging = null as any;
-    let offset = { x: 0, y: 0 };
-  
+        let data = localStorage.getItem('notes')
+        let parseData = JSON.parse(data)
+        links = parseData.links
+        messages = parseData.messages
+
+        let messageYPos = 0
+        let messageXPos = 200
+
+        // let linksArray = Object.values(links);
+        // let linksKeys = Object.keys(links);
+
+        let parents = new Set()
+        let childrenPos = {}
+
+        Object.keys(messages).map((index) => {
+            if (parents.has(links[index])) {
+                positions[index] = {
+                    x: childrenPos[links[index]].x + 150,
+                    y: childrenPos[links[index]].y,
+                }
+                childrenPos[links[index]].x = childrenPos[links[index]].x + 150
+            } else {
+                let newYPos = messageYPos * 100 + 20;
+                let newXPos = messageXPos + 100;
+                parents.add(links[index]);
+                childrenPos[links[index]] = { x: newXPos, y: newYPos };
+                positions[index] = { x: newXPos, y: newYPos };
+                messageYPos++;
+            }
+            // console.log(`${messages[index].content}`, positions[index])
+        })
+    })
+
+    let dragging = null as any
+    let offset = { x: 0, y: 0 }
+
     function onMouseDown(event: any, index: number) {
-      dragging = index;
-      offset.x = event.clientX - positions[index].x;
-      offset.y = event.clientY - positions[index].y;
+        dragging = index
+        offset.x = event.clientX - positions[index].x
+        offset.y = event.clientY - positions[index].y
     }
-  
+
     function onMouseMove(event: any) {
-      if (dragging !== null) {
-        positions[dragging] = { x: event.clientX - offset.x, y: event.clientY - offset.y };
-      }
+        if (dragging !== null) {
+            positions[dragging] = {
+                x: event.clientX - offset.x,
+                y: event.clientY - offset.y,
+            }
+        }
     }
-  
+
     function onMouseUp() {
-      dragging = null;
+        dragging = null
     }
-  </script>
-  
-  <div class="flex flex-col px-12 pt-5">
+</script>
+
+<div class="flex flex-col px-1 py-0.5 flex-grow">
     <div
-      class="border border-black"
-      on:mousemove={onMouseMove}
-      on:mouseup={onMouseUp}
-      style="width: 600px; height: 600px; position: relative;"
-      role="button"
-      tabindex="0"
+        class="border border-black flex flex-grow cursor-default"
+        on:mousemove={onMouseMove}
+        on:mouseup={onMouseUp}
+        style="position: relative;"
+        role="button"
+        tabindex="0"
     >
-      {#each Object.keys(links) as index}
-        <Line
-            posIndexX={positions[index].x}
-            posIndexY={positions[index].y}
-            posLinksX={positions[links[index]].x}
-            posLinksY={positions[links[index]].y}
-        />
-      {/each}
-      {#each Object.keys(messages) as index}
-        <Note
-            posX={positions[index].x}
-            posY={positions[index].y}
-            message={messages[index].content}
-            onMouseDown={(event) => onMouseDown(event, index)}
-        />
-      {/each}
+        {#each Object.keys(links) as index}
+            <Line
+                messageId={index}
+                posIndexX={positions[index].x}
+                posIndexY={positions[index].y}
+                posLinksX={positions[links[index]].x}
+                posLinksY={positions[links[index]].y}
+            />
+        {/each}
+        {#each Object.keys(messages) as index}
+            <Note
+                messageId={index}
+                posX={positions[index].x}
+                posY={positions[index].y}
+                messageContent={messages[index].content}
+                onMouseDown={(event) => onMouseDown(event, index)}
+            />
+        {/each}
     </div>
-  </div>
\ No newline at end of file
+</div>
+
+<!-- noteWidth={noteSizes[index].width}
+  noteHeight={noteSizes[index].height} -->
+
+<!-- bind:noteWidth={noteSizes[index].width}
+  bind:noteHeight={noteSizes[index].height} -->

From 203205107e3f6ce8aeb1c61dc31d46812af7b186 Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Fri, 26 Jul 2024 19:09:09 +0300
Subject: [PATCH 04/10] feat: add infinity canvas

---
 src/lib/components/Note.svelte |   4 +-
 src/routes/+layout.svelte      |   2 +-
 src/routes/graph/+page.svelte  | 101 ++++++++++++++++++---------------
 3 files changed, 58 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 8d9a60d..2af9a8d 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -1,6 +1,8 @@
 <script>
     import {messages} from '../index.svelte'
-    let { posX, posY, messageContent, onMouseDown, messageId, noteWidth, noteHeight } = $props();
+    let { posX, posY, messageContent, onMouseDown, messageId } = $props();
+    let noteWidth = 96;
+    let noteHeight = 68;
 
     $effect(() => {
         messages.updateTransform(messageId, { x: posX, y: posY }, noteWidth, noteHeight);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7cadb5c..af6303e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <main class="flex h-screen overflow-hidden bg-slate-100 dark:bg-slate-800">
-    <div class="flex-1">
+    <div class="flex-grow flex flex-col">
         <header
             class="bg-white dark:bg-slate-700 p-4 text-gray-700 dark:text-gray-100"
         >
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index a88b314..2e4c908 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,20 +1,11 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import Note from '../../lib/components/Note.svelte'
-    import Line from '../../lib/components/Line.svelte'
-    // import {messages} from "../../lib/index.svelte";
+    import { onMount } from 'svelte';
+    import Note from '../../lib/components/Note.svelte';
+    import Line from '../../lib/components/Line.svelte';
 
-    let links = {
-        
-    }
-
-    let messages = {
-        
-    }
-
-    let positions = {
-        
-    }
+    let links = {};
+    let messages = {};
+    let positions = {};
 
     let noteSizes = {
         'da-d23-asd0': { width: 100, height: 50 },
@@ -22,30 +13,27 @@
         'da-d23-asd2': { width: 130, height: 70 },
         'da-d23-asd3': { width: 110, height: 55 },
         'da-d23-asd4': { width: 140, height: 75 },
-    }
+    };
 
     onMount(() => {
-        let data = localStorage.getItem('notes')
-        let parseData = JSON.parse(data)
-        links = parseData.links
-        messages = parseData.messages
-
-        let messageYPos = 0
-        let messageXPos = 200
+        let data = localStorage.getItem('notes');
+        let parseData = JSON.parse(data);
+        links = parseData.links;
+        messages = parseData.messages;
 
-        // let linksArray = Object.values(links);
-        // let linksKeys = Object.keys(links);
+        let messageYPos = 0;
+        let messageXPos = 200;
 
-        let parents = new Set()
-        let childrenPos = {}
+        let parents = new Set();
+        let childrenPos = {};
 
         Object.keys(messages).map((index) => {
             if (parents.has(links[index])) {
                 positions[index] = {
                     x: childrenPos[links[index]].x + 150,
                     y: childrenPos[links[index]].y,
-                }
-                childrenPos[links[index]].x = childrenPos[links[index]].x + 150
+                };
+                childrenPos[links[index]].x = childrenPos[links[index]].x + 150;
             } else {
                 let newYPos = messageYPos * 100 + 20;
                 let newXPos = messageXPos + 100;
@@ -54,38 +42,63 @@
                 positions[index] = { x: newXPos, y: newYPos };
                 messageYPos++;
             }
-            // console.log(`${messages[index].content}`, positions[index])
-        })
-    })
+        });
+        console.log(childrenPos);
+    });
 
-    let dragging = null as any
-    let offset = { x: 0, y: 0 }
+    let dragging = null as any;
+    let offset = { x: 0, y: 0 };
+    
+    let isDraggingCanvas = false; 
+    let canvasOffset = { x: 0, y: 0 }; 
 
     function onMouseDown(event: any, index: number) {
-        dragging = index
-        offset.x = event.clientX - positions[index].x
-        offset.y = event.clientY - positions[index].y
+        dragging = index;
+        offset.x = event.clientX - positions[index].x;
+        offset.y = event.clientY - positions[index].y;
     }
 
     function onMouseMove(event: any) {
-        if (dragging !== null) {
+        if (isDraggingCanvas) { 
+            const dx = event.movementX; 
+            const dy = event.movementY; 
+            Object.keys(positions).forEach((key) => { 
+                positions[key].x += dx; 
+                positions[key].y += dy; 
+            });
+        } else if (dragging !== null) {
             positions[dragging] = {
                 x: event.clientX - offset.x,
                 y: event.clientY - offset.y,
-            }
+            };
         }
     }
 
     function onMouseUp() {
-        dragging = null
+        dragging = null;
+        isDraggingCanvas = false; 
     }
+
+    function onCanvasMouseDown(event: any) { 
+        if (event.target === event.currentTarget) { 
+            isDraggingCanvas = true; 
+        } 
+    } 
 </script>
 
+<style>
+    .canvas {
+        position: relative;
+        overflow: hidden;
+    }
+</style>
+
 <div class="flex flex-col px-1 py-0.5 flex-grow">
     <div
-        class="border border-black flex flex-grow cursor-default"
+        class="border border-black flex flex-grow cursor-default canvas"
         on:mousemove={onMouseMove}
         on:mouseup={onMouseUp}
+        on:mousedown={onCanvasMouseDown}
         style="position: relative;"
         role="button"
         tabindex="0"
@@ -110,9 +123,3 @@
         {/each}
     </div>
 </div>
-
-<!-- noteWidth={noteSizes[index].width}
-  noteHeight={noteSizes[index].height} -->
-
-<!-- bind:noteWidth={noteSizes[index].width}
-  bind:noteHeight={noteSizes[index].height} -->

From 7d7ebb1e1fbb67de53bd34d596f4cd30ceba2aff Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Fri, 26 Jul 2024 21:05:44 +0300
Subject: [PATCH 05/10] feat: add zoom

---
 src/lib/components/Line.svelte |  2 +-
 src/lib/components/Note.svelte |  2 +-
 src/routes/graph/+page.svelte  | 96 +++++++++++++++++++++-------------
 3 files changed, 61 insertions(+), 39 deletions(-)

diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
index 92c89e6..ea667b0 100644
--- a/src/lib/components/Line.svelte
+++ b/src/lib/components/Line.svelte
@@ -15,7 +15,7 @@
 </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;
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 2af9a8d..b105596 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -23,7 +23,7 @@
 <div
     bind:offsetHeight={noteHeight}
     bind:offsetWidth={noteWidth}
-    class="note min-w-24 max-w-96 min-h-12 relative pt-3"
+    class="note min-w-24 max-w-96 min-h-12 relative pt-3 visible"
     style="
             position: absolute;
             left: {posX}px;
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index 2e4c908..47f888a 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -49,46 +49,64 @@
     let dragging = null as any;
     let offset = { x: 0, y: 0 };
     
-    let isDraggingCanvas = false; 
-    let canvasOffset = { x: 0, y: 0 }; 
+    let isDraggingCanvas = false;
+    let scale = 1;
+    const scaleFactor = 0.1;
+    let canvasOffset = { x: 0, y: 0 };
 
     function onMouseDown(event: any, index: number) {
         dragging = index;
-        offset.x = event.clientX - positions[index].x;
-        offset.y = event.clientY - positions[index].y;
+        offset.x = (event.clientX - (positions[index].x + canvasOffset.x) * scale) / scale;
+        offset.y = (event.clientY - (positions[index].y + canvasOffset.y) * scale) / scale;
     }
 
     function onMouseMove(event: any) {
-        if (isDraggingCanvas) { 
-            const dx = event.movementX; 
-            const dy = event.movementY; 
-            Object.keys(positions).forEach((key) => { 
-                positions[key].x += dx; 
-                positions[key].y += dy; 
-            });
+        if (isDraggingCanvas) {
+            const dx = event.movementX;
+            const dy = event.movementY;
+            canvasOffset.x += dx;
+            canvasOffset.y += dy;
         } else if (dragging !== null) {
             positions[dragging] = {
-                x: event.clientX - offset.x,
-                y: event.clientY - offset.y,
+                x: (event.clientX - offset.x * scale) / scale - canvasOffset.x,
+                y: (event.clientY - offset.y * scale) / scale - canvasOffset.y,
             };
         }
     }
 
     function onMouseUp() {
         dragging = null;
-        isDraggingCanvas = false; 
+        isDraggingCanvas = false;
     }
 
-    function onCanvasMouseDown(event: any) { 
-        if (event.target === event.currentTarget) { 
-            isDraggingCanvas = true; 
-        } 
-    } 
+    function onCanvasMouseDown(event: any) {
+        if (event.target === event.currentTarget) {
+            isDraggingCanvas = true;
+        }
+    }
+
+    function onWheel(event: WheelEvent) {
+        const { deltaY, clientX, clientY } = event;
+        const canvasRect = event.currentTarget.getBoundingClientRect();
+        const mouseX = clientX - canvasRect.left;
+        const mouseY = clientY - canvasRect.top;
+
+        const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor;
+        const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3);
+
+        const scaleRatio = newScale / scale;
+        canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x);
+        canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y);
+
+        scale = newScale;
+    }
 </script>
 
 <style>
     .canvas {
         position: relative;
+        width: 100%;
+        height: 100%;
         overflow: hidden;
     }
 </style>
@@ -99,27 +117,31 @@
         on:mousemove={onMouseMove}
         on:mouseup={onMouseUp}
         on:mousedown={onCanvasMouseDown}
+        on:wheel={onWheel}
         style="position: relative;"
         role="button"
         tabindex="0"
     >
-        {#each Object.keys(links) as index}
-            <Line
-                messageId={index}
-                posIndexX={positions[index].x}
-                posIndexY={positions[index].y}
-                posLinksX={positions[links[index]].x}
-                posLinksY={positions[links[index]].y}
-            />
-        {/each}
-        {#each Object.keys(messages) as index}
-            <Note
-                messageId={index}
-                posX={positions[index].x}
-                posY={positions[index].y}
-                messageContent={messages[index].content}
-                onMouseDown={(event) => onMouseDown(event, index)}
-            />
-        {/each}
+        <div class="flex flex-grow" style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale}); transform-origin: 0 0; visibility: hidden;">
+            {#each Object.keys(links) as index}
+                <Line
+
+                    messageId={index}
+                    posIndexX={positions[index].x}
+                    posIndexY={positions[index].y}
+                    posLinksX={positions[links[index]].x}
+                    posLinksY={positions[links[index]].y}
+                />
+            {/each}
+            {#each Object.keys(messages) as index}
+                <Note
+                    messageId={index}
+                    posX={positions[index].x}
+                    posY={positions[index].y}
+                    messageContent={messages[index].content}
+                    onMouseDown={(event) => onMouseDown(event, index)}
+                />
+            {/each}
+        </div>
     </div>
 </div>

From c4ecc61b8400f7db9abd88494c1d0ce737cde454 Mon Sep 17 00:00:00 2001
From: SDesya74 <sdesya74@gmail.com>
Date: Sun, 28 Jul 2024 19:28:32 +0300
Subject: [PATCH 06/10] feat: scroll with touchpad (break zoom) and some
 refactoring

---
 src/lib/assets/delete.svg         |   6 ++
 src/lib/components/Line.svelte    |  30 +++---
 src/lib/components/Message.svelte |  13 +--
 src/lib/components/Note.svelte    |  38 +++----
 src/routes/+layout.svelte         |  66 ++++++------
 src/routes/+page.svelte           |   2 +-
 src/routes/graph/+page.svelte     | 170 +++++++++++++++---------------
 7 files changed, 160 insertions(+), 165 deletions(-)
 create mode 100644 src/lib/assets/delete.svg

diff --git a/src/lib/assets/delete.svg b/src/lib/assets/delete.svg
new file mode 100644
index 0000000..2ddf863
--- /dev/null
+++ b/src/lib/assets/delete.svg
@@ -0,0 +1,6 @@
+<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>
diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
index 16cba5b..567bb24 100644
--- a/src/lib/components/Line.svelte
+++ b/src/lib/components/Line.svelte
@@ -1,26 +1,26 @@
 <script>
-    import { messages } from "$lib/index.svelte";
+    import { messages } from '$lib/index.svelte'
 
-    let {posLinksX, posLinksY, posIndexX, posIndexY, messageId} = $props();
+    let { posLinksX, posLinksY, posIndexX, posIndexY, messageId } = $props()
 
-     let noteWidth = 96;
-     let noteHeight = 68;
-
-    $effect(() => {
-        let transform = messages.get(messageId).data.transform;
-        
-        console.log(transform)
-    });
-    // $: console.log(noteHeight, noteWidth);
+    let noteWidth = 96
+    let noteHeight = 68
 </script>
 
 <div
     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;
-    transform: rotate({Math.atan2(posIndexY - posLinksY, posIndexX - posLinksX) * 180 / Math.PI}deg);
+    left: {posLinksX + noteWidth / 2}px;
+    top: {posLinksY + noteHeight / 2}px;
+    width: {Math.sqrt(
+        Math.pow(posIndexX - posLinksX, 2) + Math.pow(posIndexY - posLinksY, 2)
+    )}px;
+    transform: rotate({(Math.atan2(
+        posIndexY - posLinksY,
+        posIndexX - posLinksX
+    ) *
+        180) /
+        Math.PI}deg);
     "
 ></div>
 
diff --git a/src/lib/components/Message.svelte b/src/lib/components/Message.svelte
index 08def85..0c91efb 100644
--- a/src/lib/components/Message.svelte
+++ b/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>
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 83011d2..222a02f 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -1,16 +1,14 @@
 <script>
     import { base } from '$app/paths'
+    import { gfmPlugin } from 'svelte-exmarkdown/gfm'
     import { messages } from '../index.svelte'
-    let {
-        posX,
-        posY,
-        messageContent,
-        onMouseDown,
-        messageId,
-    } = $props()
+    import Markdown from 'svelte-exmarkdown'
+    import deleteIcon from '$lib/assets/delete.svg?raw'
 
-    let noteWidth = 96;
-    let noteHeight = 68;
+    let { posX, posY, messageContent, onMouseDown, messageId } = $props()
+
+    let noteWidth = 96
+    let noteHeight = 68
 
     $effect(() => {
         messages.updateTransform(
@@ -59,22 +57,10 @@
         </svg>
     </button>
     <button
-        class="w-4 h-4 absolute left-2 top-2"
+        class="w-4 h-4 absolute left-2 top-2 stroke-black"
         onclick={() => copyToClipboard(messageContent)}
     >
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-copy"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill-rule="evenodd"
-                d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"
-            />
-        </svg>
+        {@html deleteIcon}
     </button>
     <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{messageId}">
         <svg
@@ -94,7 +80,11 @@
         </svg>
     </a>
     <div class="flex w-full h-full justify-center">
-        <div class="p-4 w-full break-all">{messageContent}</div>
+        <div class="p-4 w-full break-all">
+            <article class="grow prose prose-zinc">
+                <Markdown md={messageContent} plugins={[gfmPlugin()]} />
+            </article>
+        </div>
     </div>
 </div>
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 21bb170..6e1bc1c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -23,42 +23,46 @@
 <main class="flex h-screen overflow-hidden bg-slate-100 dark:bg-slate-800">
     <div class="flex-grow flex flex-col">
         <header
-            class="bg-white dark:bg-slate-700 p-4 text-gray-700 dark:text-gray-100"
+            class="bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-100"
         >
-        <ul
-        class="flex flex-row items-center gap-4 px-1 sm:px-4 font-semibold text-lg"
-    >
-        <li class="w-14 h-14 p-2">
-            <a href="{base}/" aria-current={current(`${base}/`)}>
-                {@html favicon}
-            </a>
-        </li>
-        <li>
-            <a href="{base}/graph" aria-current={current(`${base}/graph`)}>
-                Graph
-            </a>
-        </li>
-        <li>
-            <a
-                href="{base}/settings"
-                aria-current={current(`${base}/settings`)}
+            <ul
+                class="flex flex-row items-center gap-4 px-1 sm:px-4 font-semibold text-lg"
             >
-                Settings
-            </a>
-        </li>
-        <li class="grow"></li>
+                <li class="w-14 h-14 p-2">
+                    <a href="{base}/" aria-current={current(`${base}/`)}>
+                        {@html favicon}
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="{base}/graph"
+                        aria-current={current(`${base}/graph`)}
+                    >
+                        Graph
+                    </a>
+                </li>
+                <li>
+                    <a
+                        href="{base}/settings"
+                        aria-current={current(`${base}/settings`)}
+                    >
+                        Settings
+                    </a>
+                </li>
+                <li class="grow"></li>
 
-            <ThemeToggle />
+                <ThemeToggle />
 
-            <li
-                class="flex-row justify-center items-center text-base collapse sm:visible"
-            >
-                Version: {version}
-            </li>
-        </ul>
-    </header>
+                <li
+                    class="flex-row justify-center items-center text-base collapse sm:visible"
+                >
+                    Version: {version}
+                </li>
+            </ul>
+        </header>
 
-    <slot />
+        <slot />
+    </div>
 </main>
 
 <style lang="postcss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2746422..17b649d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -61,7 +61,7 @@
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
 <div class="container mx-auto">
-    <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-36">
+    <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-32">
         {#if currentChat}
             {#each currentChat as message}
                 <Message
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index 47f888a..0ab3328 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,131 +1,135 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-    import Note from '../../lib/components/Note.svelte';
-    import Line from '../../lib/components/Line.svelte';
-
-    let links = {};
-    let messages = {};
-    let positions = {};
-
-    let noteSizes = {
-        'da-d23-asd0': { width: 100, height: 50 },
-        'da-d23-asd1': { width: 120, height: 60 },
-        'da-d23-asd2': { width: 130, height: 70 },
-        'da-d23-asd3': { width: 110, height: 55 },
-        'da-d23-asd4': { width: 140, height: 75 },
-    };
-
-    onMount(() => {
-        let data = localStorage.getItem('notes');
-        let parseData = JSON.parse(data);
-        links = parseData.links;
-        messages = parseData.messages;
-
-        let messageYPos = 0;
-        let messageXPos = 200;
-
-        let parents = new Set();
-        let childrenPos = {};
+    import Note from '$lib/components/Note.svelte'
+    import Line from '$lib/components/Line.svelte'
+    import { messages as messagesStore, type Message } from '$lib/index.svelte'
+    import { browser } from '$app/environment'
+
+    let links = {}
+    let messages = {}
+    let positions = {}
+
+    if (browser) {
+        // TODO: Use messages instead of localStorage
+        let data = localStorage.getItem('notes') ?? '{}'
+        let parseData = JSON.parse(data)
+        links = parseData.links
+        messages = parseData.messages
+
+        let messageYPos = 0
+        let messageXPos = 200
+
+        let parents = new Set()
+        let childrenPos = {}
 
         Object.keys(messages).map((index) => {
             if (parents.has(links[index])) {
                 positions[index] = {
                     x: childrenPos[links[index]].x + 150,
                     y: childrenPos[links[index]].y,
-                };
-                childrenPos[links[index]].x = childrenPos[links[index]].x + 150;
+                }
+                childrenPos[links[index]].x = childrenPos[links[index]].x + 150
             } else {
-                let newYPos = messageYPos * 100 + 20;
-                let newXPos = messageXPos + 100;
-                parents.add(links[index]);
-                childrenPos[links[index]] = { x: newXPos, y: newYPos };
-                positions[index] = { x: newXPos, y: newYPos };
-                messageYPos++;
+                let newYPos = messageYPos * 100 + 20
+                let newXPos = messageXPos + 100
+                parents.add(links[index])
+                childrenPos[links[index]] = { x: newXPos, y: newYPos }
+                positions[index] = { x: newXPos, y: newYPos }
+                messageYPos++
             }
-        });
-        console.log(childrenPos);
-    });
-
-    let dragging = null as any;
-    let offset = { x: 0, y: 0 };
-    
-    let isDraggingCanvas = false;
-    let scale = 1;
-    const scaleFactor = 0.1;
-    let canvasOffset = { x: 0, y: 0 };
+        })
+    }
+
+    let dragging = null as any
+    let offset = { x: 0, y: 0 }
+
+    let isDraggingCanvas = false
+    let scale = 1
+    const scaleFactor = 0.1
+    let canvasOffset = { x: 0, y: 0 }
+
+    function scrollCanvas(offset: { x: number; y: number }) {
+        canvasOffset.x += offset.x
+        canvasOffset.y += offset.y
+    }
 
     function onMouseDown(event: any, index: number) {
-        dragging = index;
-        offset.x = (event.clientX - (positions[index].x + canvasOffset.x) * scale) / scale;
-        offset.y = (event.clientY - (positions[index].y + canvasOffset.y) * scale) / scale;
+        dragging = index
+        offset.x =
+            (event.clientX - (positions[index].x + canvasOffset.x) * scale) /
+            scale
+        offset.y =
+            (event.clientY - (positions[index].y + canvasOffset.y) * scale) /
+            scale
     }
 
     function onMouseMove(event: any) {
         if (isDraggingCanvas) {
-            const dx = event.movementX;
-            const dy = event.movementY;
-            canvasOffset.x += dx;
-            canvasOffset.y += dy;
+            scrollCanvas({
+                x: event.movementX,
+                y: event.movementY,
+            })
         } else if (dragging !== null) {
             positions[dragging] = {
                 x: (event.clientX - offset.x * scale) / scale - canvasOffset.x,
                 y: (event.clientY - offset.y * scale) / scale - canvasOffset.y,
-            };
+            }
         }
     }
 
     function onMouseUp() {
-        dragging = null;
-        isDraggingCanvas = false;
+        dragging = null
+        isDraggingCanvas = false
     }
 
     function onCanvasMouseDown(event: any) {
         if (event.target === event.currentTarget) {
-            isDraggingCanvas = true;
+            isDraggingCanvas = true
         }
     }
 
     function onWheel(event: WheelEvent) {
-        const { deltaY, clientX, clientY } = event;
-        const canvasRect = event.currentTarget.getBoundingClientRect();
-        const mouseX = clientX - canvasRect.left;
-        const mouseY = clientY - canvasRect.top;
+        console.log({ event })
+        const { deltaY, clientX, clientY } = event
+        const canvasRect = event.currentTarget.getBoundingClientRect()
+        const mouseX = clientX - canvasRect.left
+        const mouseY = clientY - canvasRect.top
 
-        const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor;
-        const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3);
+        const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor
+        const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3)
 
-        const scaleRatio = newScale / scale;
-        canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x);
-        canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y);
+        const scaleRatio = newScale / scale
+        canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x)
+        canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y)
 
-        scale = newScale;
+        scale = newScale
     }
-</script>
 
-<style>
-    .canvas {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
+    function handleScroll(wheel: WheelEvent) {
+        // TODO: Zoom
+        const { deltaX, deltaY, deltaMode, deltaZ } = wheel
+        scrollCanvas({
+            x: -deltaX,
+            y: -deltaY,
+        })
     }
-</style>
+</script>
 
 <div class="flex flex-col px-1 py-0.5 flex-grow">
     <div
-        class="border border-black flex flex-grow cursor-default canvas"
-        on:mousemove={onMouseMove}
-        on:mouseup={onMouseUp}
-        on:mousedown={onCanvasMouseDown}
-        on:wheel={onWheel}
-        style="position: relative;"
+        class="flex flex-grow cursor-default w-full h-full overflow-hidden relative"
+        onmousemove={onMouseMove}
+        onmouseup={onMouseUp}
+        onmousedown={onCanvasMouseDown}
+        onwheel={handleScroll}
         role="button"
         tabindex="0"
     >
-        <div class="flex flex-grow" style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale}); transform-origin: 0 0; visibility: hidden;">
+        <div
+            class="flex flex-grow"
+            style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale}); transform-origin: 0 0; visibility: hidden;"
+        >
             {#each Object.keys(links) as index}
                 <Line
-
                     messageId={index}
                     posIndexX={positions[index].x}
                     posIndexY={positions[index].y}

From ee5fa86ef24e7fd01efbcecf81b33d9d3429ea55 Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Sun, 28 Jul 2024 23:28:28 +0300
Subject: [PATCH 07/10] feat: zoom-ctrl+scroll, horizontal scroll-alt+scroll

---
 src/routes/graph/+page.svelte | 66 ++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 25 deletions(-)

diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index 0ab3328..fca8dad 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte'
     import Note from '$lib/components/Note.svelte'
     import Line from '$lib/components/Line.svelte'
     import { messages as messagesStore, type Message } from '$lib/index.svelte'
@@ -39,6 +40,19 @@
         })
     }
 
+    onMount(()=>{
+        const canvas = document.querySelector('.canvas');
+        if (canvas) {
+            canvas.addEventListener('wheel', onWheel, { passive: false });
+        }
+
+        return () => {
+            if (canvas) {
+                canvas.removeEventListener('wheel', onWheel);
+            }
+        };
+    })
+
     let dragging = null as any
     let offset = { x: 0, y: 0 }
 
@@ -88,39 +102,41 @@
     }
 
     function onWheel(event: WheelEvent) {
-        console.log({ event })
-        const { deltaY, clientX, clientY } = event
-        const canvasRect = event.currentTarget.getBoundingClientRect()
-        const mouseX = clientX - canvasRect.left
-        const mouseY = clientY - canvasRect.top
-
-        const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor
-        const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3)
-
-        const scaleRatio = newScale / scale
-        canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x)
-        canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y)
-
-        scale = newScale
-    }
-
-    function handleScroll(wheel: WheelEvent) {
-        // TODO: Zoom
-        const { deltaX, deltaY, deltaMode, deltaZ } = wheel
-        scrollCanvas({
-            x: -deltaX,
-            y: -deltaY,
-        })
+        const { deltaX, deltaY, clientX, clientY, ctrlKey, altKey } = event;
+        if (ctrlKey) {
+            event.preventDefault();
+            const canvasRect = event.currentTarget.getBoundingClientRect();
+            const mouseX = clientX - canvasRect.left;
+            const mouseY = clientY - canvasRect.top;
+
+            const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor;
+            const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3);
+
+            const scaleRatio = newScale / scale;
+            canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x);
+            canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y);
+
+            scale = newScale;
+        } else if (altKey) {
+            scrollCanvas({
+                x: -deltaY,
+                y: 0,
+            });
+        } else {
+            scrollCanvas({
+                x: -deltaX,
+                y: -deltaY,
+            });
+        }
     }
 </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"
+        class="flex flex-grow cursor-default w-full h-full overflow-hidden relative canvas"
         onmousemove={onMouseMove}
         onmouseup={onMouseUp}
         onmousedown={onCanvasMouseDown}
-        onwheel={handleScroll}
         role="button"
         tabindex="0"
     >

From 478d64894b3cc31fa0d492a207dd3e2c53ad71c9 Mon Sep 17 00:00:00 2001
From: SDesya74 <sdesya74@gmail.com>
Date: Mon, 29 Jul 2024 22:19:07 +0300
Subject: [PATCH 08/10] feat: refactor graph, move scroll to separate
 component, note deletion in graph

---
 src/lib/components/Canvas.svelte        | 122 ++++++++++++++++
 src/lib/components/CanvasDragger.svelte |  32 +++++
 src/lib/components/Line.svelte          |  39 ++++--
 src/lib/components/Note.svelte          |  88 ++++--------
 src/lib/index.svelte.ts                 |  31 ++---
 src/routes/+layout.svelte               |  73 +++++-----
 src/routes/+page.svelte                 |  73 +++++-----
 src/routes/graph/+page.svelte           | 176 ++----------------------
 src/routes/settings/+page.svelte        |   1 +
 9 files changed, 308 insertions(+), 327 deletions(-)
 create mode 100644 src/lib/components/Canvas.svelte
 create mode 100644 src/lib/components/CanvasDragger.svelte

diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte
new file mode 100644
index 0000000..ca388fc
--- /dev/null
+++ b/src/lib/components/Canvas.svelte
@@ -0,0 +1,122 @@
+<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 })
+        return () => canvas?.removeEventListener('wheel', onWheel)
+    })
+
+    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.target === event.currentTarget) {
+            isDraggingCanvas = true
+        }
+    }
+
+    function onWheel(event: WheelEvent) {
+        const { deltaX, deltaY, clientX, clientY, ctrlKey, altKey } = 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 (altKey) {
+            // scroll horizontally
+            scrollCanvas({
+                x: -deltaY,
+                y: 0,
+            })
+        } else {
+            // scroll both directions (touchpad)
+            scrollCanvas({
+                x: -deltaX,
+                y: -deltaY,
+            })
+        }
+    }
+</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}
+        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>
diff --git a/src/lib/components/CanvasDragger.svelte b/src/lib/components/CanvasDragger.svelte
new file mode 100644
index 0000000..a1f5525
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/Line.svelte b/src/lib/components/Line.svelte
index 567bb24..dc04e7c 100644
--- a/src/lib/components/Line.svelte
+++ b/src/lib/components/Line.svelte
@@ -1,23 +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)
+
+    let childCenter = $derived({
+        x: child.x + child.width / 2,
+        y: child.y + child.height / 2,
+    })
+
+    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 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);
diff --git a/src/lib/components/Note.svelte b/src/lib/components/Note.svelte
index 222a02f..a23a32f 100644
--- a/src/lib/components/Note.svelte
+++ b/src/lib/components/Note.svelte
@@ -1,74 +1,53 @@
-<script>
+<script lang="ts">
     import { base } from '$app/paths'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
-    import { messages } from '../index.svelte'
     import Markdown from 'svelte-exmarkdown'
     import deleteIcon from '$lib/assets/delete.svg?raw'
+    import { type Message, messages } from '$lib/index.svelte'
+    import CanvasDragger from './CanvasDragger.svelte'
 
-    let { posX, posY, messageContent, onMouseDown, messageId } = $props()
+    let {
+        message = $bindable(),
+    }: {
+        message: Message
+    } = $props()
 
-    let noteWidth = 96
-    let noteHeight = 68
+    let transform = $derived(message.data.transform)
 
-    $effect(() => {
-        messages.updateTransform(
-            messageId,
-            { x: posX, y: posY },
-            noteWidth,
-            noteHeight
-        )
-    })
+    function dragNote(event: any) {
+        message.data.transform.x += event.movementX
+        message.data.transform.y += event.movementY
+    }
 
-    function copyToClipboard(text) {
-        navigator.clipboard
-            .writeText(text)
-            .then(() => {
-                console.log('Text copied to clipboard')
-            })
-            .catch((err) => {
-                console.error('Failed to copy text: ', err)
-            })
+    function deleteNote() {
+        messages.delete(message.id)
     }
 </script>
 
 <div
-    bind:offsetHeight={noteHeight}
-    bind:offsetWidth={noteWidth}
-    class="note min-w-24 max-w-96 min-h-12 relative pt-3 visible"
-    style="
-            position: absolute;
-            left: {posX}px;
-            top: {posY}px;
-          "
+    bind:offsetWidth={message.data.transform.width}
+    bind:offsetHeight={message.data.transform.height}
+    class="min-w-24 max-w-96 min-h-12 pt-3 visible absolute bg-gray-200 rounded-md flex items-end justify-center"
+    style="left: {transform.x}px; top: {transform.y}px;"
 >
-    <button class="w-4 h-4 absolute right-2 top-2" onmousedown={onMouseDown}>
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            fill="currentColor"
-            class="bi bi-arrows-move"
-            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>
+    <CanvasDragger
+        drag={dragNote}
+        end={() =>
+            localStorage.setItem('notes', JSON.stringify(messages.export()))}
+    />
+
     <button
         class="w-4 h-4 absolute left-2 top-2 stroke-black"
-        onclick={() => copyToClipboard(messageContent)}
+        onclick={deleteNote}
     >
         {@html deleteIcon}
     </button>
-    <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{messageId}">
+    <a class="w-4 h-4 absolute left-8 top-2" href="{base}/#{message.id}">
         <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16"
             fill="currentColor"
-            class="bi bi-link"
             viewBox="0 0 16 16"
         >
             <path
@@ -82,18 +61,11 @@
     <div class="flex w-full h-full justify-center">
         <div class="p-4 w-full break-all">
             <article class="grow prose prose-zinc">
-                <Markdown md={messageContent} plugins={[gfmPlugin()]} />
+                <Markdown md={message.data.content} plugins={[gfmPlugin()]} />
             </article>
         </div>
     </div>
 </div>
 
-<style>
-    .note {
-        background-color: lightgray;
-        border-radius: 10px;
-        display: flex;
-        align-items: end;
-        justify-content: center;
-    }
-</style>
+
+
diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index e7054a0..19aa880 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -19,17 +19,17 @@ class IncrementProvider implements IdProvider {
 }
 const INCREMENT_PROVIDER: IdProvider = new IncrementProvider()
 
+export type Transform = {
+    x: number
+    y: number
+    width: number
+    height: number
+}
+
 export type MessageData = {
     content: string
     createdAt: number
-    transform: {
-        position: {
-            x: number
-            y: number
-        }
-        width: number
-        height: number
-    }
+    transform: Transform
 }
 
 export type Message = {
@@ -45,6 +45,7 @@ export function createMessage(text: string): MessageData {
     return {
         content: text,
         createdAt: Date.now(),
+        transform: { x: 0, y: 0, width: 100, height: 40 },
     }
 }
 
@@ -171,20 +172,6 @@ class Messages {
         }
     }
 
-    updateTransform(
-        id: Id,
-        position: { x: number; y: number },
-        width: number,
-        height: number
-    ) {
-        const message = this.inner[id]
-        if (message) {
-            message.data.transform = { position, width, height }
-        } else {
-            console.error(`Message with id ${id} does not exist.`)
-        }
-    }
-
     clear() {
         this.inner = {}
     }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6e1bc1c..bd57f55 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -20,49 +20,44 @@
     }
 </script>
 
-<main class="flex h-screen overflow-hidden bg-slate-100 dark:bg-slate-800">
-    <div class="flex-grow flex flex-col">
-        <header
-            class="bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-100"
+<main
+    class="flex flex-col h-screen bg-slate-100 dark:bg-slate-800 overflow-hidden"
+>
+    <header class="bg-white dark:bg-slate-700 text-gray-700 dark:text-gray-100">
+        <ul
+            class="flex flex-row items-center gap-4 px-1 sm:px-4 font-semibold text-lg"
         >
-            <ul
-                class="flex flex-row items-center gap-4 px-1 sm:px-4 font-semibold text-lg"
-            >
-                <li class="w-14 h-14 p-2">
-                    <a href="{base}/" aria-current={current(`${base}/`)}>
-                        {@html favicon}
-                    </a>
-                </li>
-                <li>
-                    <a
-                        href="{base}/graph"
-                        aria-current={current(`${base}/graph`)}
-                    >
-                        Graph
-                    </a>
-                </li>
-                <li>
-                    <a
-                        href="{base}/settings"
-                        aria-current={current(`${base}/settings`)}
-                    >
-                        Settings
-                    </a>
-                </li>
-                <li class="grow"></li>
+            <li class="w-14 h-14 p-2">
+                <a href="{base}/" aria-current={current(`${base}/`)}>
+                    {@html favicon}
+                </a>
+            </li>
+            <li>
+                <a href="{base}/graph" aria-current={current(`${base}/graph`)}>
+                    Graph
+                </a>
+            </li>
+            <li>
+                <a
+                    href="{base}/settings"
+                    aria-current={current(`${base}/settings`)}
+                >
+                    Settings
+                </a>
+            </li>
+            <li class="grow"></li>
 
-                <ThemeToggle />
+            <ThemeToggle />
 
-                <li
-                    class="flex-row justify-center items-center text-base collapse sm:visible"
-                >
-                    Version: {version}
-                </li>
-            </ul>
-        </header>
+            <li
+                class="flex-row justify-center items-center text-base collapse sm:visible"
+            >
+                Version: {version}
+            </li>
+        </ul>
+    </header>
 
-        <slot />
-    </div>
+    <slot />
 </main>
 
 <style lang="postcss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 17b649d..fb40b2d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -27,7 +27,7 @@
     })
 
     let leaf = $derived(messages.get(leafId!))
-    let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
+    let currentChat = $derived(messages.chatFrom(leafId!, 100).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
     let textInput = $state('')
@@ -57,11 +57,14 @@
         messages.delete(value.id)
         localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
+
+    let inputHeight = $state(0)
+    $inspect(inputHeight)
 </script>
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
-<div class="container mx-auto">
-    <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-32">
+<div class="flex-grow flex flex-col overflow-y-hidden">
+    <div class="flex flex-col container mx-auto overflow-y-scroll">
         {#if currentChat}
             {#each currentChat as message}
                 <Message
@@ -92,36 +95,36 @@
         {/if}
     </div>
 
-    <footer
-        class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
-    >
-        <form
-            class="flex items-center container mx-auto"
-            onsubmit={appendMessage}
-        >
-            <input
-                type="text"
-                bind:this={textInputElement}
-                bind:value={textInput}
-                placeholder="Type a message..."
-                class="w-full p-2 focus:outline-none focus:border-blue-500 bg-transparent"
-            />
-            <button class="px-4 py-2 rounded-md ml-2" type="submit">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="w-8 h-8 fill-current"
-                    viewBox="0 0 64 64"
-                    ><defs
-                        ><clipPath id="a"
-                            ><rect width="64" height="64"></rect></clipPath
-                        ></defs
-                    ><g clip-path="url(#a)"
-                        ><path
-                            d="M 8.216 36.338 L 26.885 32.604 C 28.552 32.271 28.552 31.729 26.885 31.396 L 8.216 27.662 C 7.104 27.44 6.021 26.356 5.799 25.245 L 2.065 6.576 C 1.731 4.908 2.714 4.133 4.259 4.846 L 61.228 31.139 C 62.257 31.614 62.257 32.386 61.228 32.861 L 4.259 59.154 C 2.714 59.867 1.731 59.092 2.065 57.424 L 5.799 38.755 C 6.021 37.644 7.104 36.56 8.216 36.338 Z "
-                        ></path></g
-                    ></svg
-                >
-            </button>
-        </form>
-    </footer>
+    <div class="block" style="height: {inputHeight + 16}px"></div>
 </div>
+
+<footer
+    bind:clientHeight={inputHeight}
+    class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 fixed bottom-0 left-0 dark:border-slate-600 px-4 py-2 md:py-4 w-full"
+>
+    <form class="flex items-center container mx-auto" onsubmit={appendMessage}>
+        <input
+            type="text"
+            bind:this={textInputElement}
+            bind:value={textInput}
+            placeholder="Type a message..."
+            class="w-full p-2 focus:outline-none focus:border-blue-500 bg-transparent"
+        />
+        <button class="py-2 rounded-md ml-2" type="submit">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="w-8 h-8 fill-current"
+                viewBox="0 0 64 64"
+                ><defs
+                    ><clipPath id="a"
+                        ><rect width="64" height="64"></rect></clipPath
+                    ></defs
+                ><g clip-path="url(#a)"
+                    ><path
+                        d="M 8.216 36.338 L 26.885 32.604 C 28.552 32.271 28.552 31.729 26.885 31.396 L 8.216 27.662 C 7.104 27.44 6.021 26.356 5.799 25.245 L 2.065 6.576 C 1.731 4.908 2.714 4.133 4.259 4.846 L 61.228 31.139 C 62.257 31.614 62.257 32.386 61.228 32.861 L 4.259 59.154 C 2.714 59.867 1.731 59.092 2.065 57.424 L 5.799 38.755 C 6.021 37.644 7.104 36.56 8.216 36.338 Z "
+                    ></path></g
+                ></svg
+            >
+        </button>
+    </form>
+</footer>
diff --git a/src/routes/graph/+page.svelte b/src/routes/graph/+page.svelte
index fca8dad..82fe5e7 100644
--- a/src/routes/graph/+page.svelte
+++ b/src/routes/graph/+page.svelte
@@ -1,167 +1,21 @@
 <script lang="ts">
-    import { onMount } from 'svelte'
-    import Note from '$lib/components/Note.svelte'
+    import Canvas from '$lib/components/Canvas.svelte'
     import Line from '$lib/components/Line.svelte'
-    import { messages as messagesStore, type Message } from '$lib/index.svelte'
-    import { browser } from '$app/environment'
-
-    let links = {}
-    let messages = {}
-    let positions = {}
-
-    if (browser) {
-        // TODO: Use messages instead of localStorage
-        let data = localStorage.getItem('notes') ?? '{}'
-        let parseData = JSON.parse(data)
-        links = parseData.links
-        messages = parseData.messages
-
-        let messageYPos = 0
-        let messageXPos = 200
-
-        let parents = new Set()
-        let childrenPos = {}
-
-        Object.keys(messages).map((index) => {
-            if (parents.has(links[index])) {
-                positions[index] = {
-                    x: childrenPos[links[index]].x + 150,
-                    y: childrenPos[links[index]].y,
-                }
-                childrenPos[links[index]].x = childrenPos[links[index]].x + 150
-            } else {
-                let newYPos = messageYPos * 100 + 20
-                let newXPos = messageXPos + 100
-                parents.add(links[index])
-                childrenPos[links[index]] = { x: newXPos, y: newYPos }
-                positions[index] = { x: newXPos, y: newYPos }
-                messageYPos++
-            }
-        })
-    }
-
-    onMount(()=>{
-        const canvas = document.querySelector('.canvas');
-        if (canvas) {
-            canvas.addEventListener('wheel', onWheel, { passive: false });
-        }
+    import Note from '$lib/components/Note.svelte'
+    import { messages } from '$lib/index.svelte'
 
-        return () => {
-            if (canvas) {
-                canvas.removeEventListener('wheel', onWheel);
-            }
-        };
+    $effect(() => {
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
     })
-
-    let dragging = null as any
-    let offset = { x: 0, y: 0 }
-
-    let isDraggingCanvas = false
-    let scale = 1
-    const scaleFactor = 0.1
-    let canvasOffset = { x: 0, y: 0 }
-
-    function scrollCanvas(offset: { x: number; y: number }) {
-        canvasOffset.x += offset.x
-        canvasOffset.y += offset.y
-    }
-
-    function onMouseDown(event: any, index: number) {
-        dragging = index
-        offset.x =
-            (event.clientX - (positions[index].x + canvasOffset.x) * scale) /
-            scale
-        offset.y =
-            (event.clientY - (positions[index].y + canvasOffset.y) * scale) /
-            scale
-    }
-
-    function onMouseMove(event: any) {
-        if (isDraggingCanvas) {
-            scrollCanvas({
-                x: event.movementX,
-                y: event.movementY,
-            })
-        } else if (dragging !== null) {
-            positions[dragging] = {
-                x: (event.clientX - offset.x * scale) / scale - canvasOffset.x,
-                y: (event.clientY - offset.y * scale) / scale - canvasOffset.y,
-            }
-        }
-    }
-
-    function onMouseUp() {
-        dragging = null
-        isDraggingCanvas = false
-    }
-
-    function onCanvasMouseDown(event: any) {
-        if (event.target === event.currentTarget) {
-            isDraggingCanvas = true
-        }
-    }
-
-    function onWheel(event: WheelEvent) {
-        const { deltaX, deltaY, clientX, clientY, ctrlKey, altKey } = event;
-        if (ctrlKey) {
-            event.preventDefault();
-            const canvasRect = event.currentTarget.getBoundingClientRect();
-            const mouseX = clientX - canvasRect.left;
-            const mouseY = clientY - canvasRect.top;
-
-            const scaleChange = deltaY < 0 ? scaleFactor : -scaleFactor;
-            const newScale = Math.min(Math.max(0.5, scale + scaleChange), 3);
-
-            const scaleRatio = newScale / scale;
-            canvasOffset.x = mouseX - scaleRatio * (mouseX - canvasOffset.x);
-            canvasOffset.y = mouseY - scaleRatio * (mouseY - canvasOffset.y);
-
-            scale = newScale;
-        } else if (altKey) {
-            scrollCanvas({
-                x: -deltaY,
-                y: 0,
-            });
-        } else {
-            scrollCanvas({
-                x: -deltaX,
-                y: -deltaY,
-            });
-        }
-    }
 </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 canvas"
-        onmousemove={onMouseMove}
-        onmouseup={onMouseUp}
-        onmousedown={onCanvasMouseDown}
-        role="button"
-        tabindex="0"
-    >
-        <div
-            class="flex flex-grow"
-            style="transform: translate({canvasOffset.x}px, {canvasOffset.y}px) scale({scale}); transform-origin: 0 0; visibility: hidden;"
-        >
-            {#each Object.keys(links) as index}
-                <Line
-                    messageId={index}
-                    posIndexX={positions[index].x}
-                    posIndexY={positions[index].y}
-                    posLinksX={positions[links[index]].x}
-                    posLinksY={positions[links[index]].y}
-                />
-            {/each}
-            {#each Object.keys(messages) as index}
-                <Note
-                    messageId={index}
-                    posX={positions[index].x}
-                    posY={positions[index].y}
-                    messageContent={messages[index].content}
-                    onMouseDown={(event) => onMouseDown(event, index)}
-                />
-            {/each}
-        </div>
-    </div>
-</div>
+<Canvas>
+    {#each Object.values(messages.inner) as message}
+        {#if message.parent}
+            <Line from={messages.inner[message.parent]} to={message} />
+        {/if}
+    {/each}
+    {#each Object.values(messages.inner) as message}
+        <Note {message} />
+    {/each}
+</Canvas>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 6057703..c7d3382 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -10,6 +10,7 @@
 
     function importGraph() {
         messages.import(JSON.parse(raw))
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
 
     function deleteGraph() {

From dc839be03339e8cbce5e97ce71017d5574c147bc Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Tue, 30 Jul 2024 19:57:10 +0300
Subject: [PATCH 09/10] feat: change scroll keys and add canvas scroll on phone

---
 src/lib/components/Canvas.svelte | 37 ++++++++++++++++++++++++++------
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte
index ca388fc..edb1ec7 100644
--- a/src/lib/components/Canvas.svelte
+++ b/src/lib/components/Canvas.svelte
@@ -12,8 +12,12 @@
 
     let canvas: HTMLDivElement | null = $state(null)
     onMount(() => {
-        canvas?.addEventListener('wheel', onWheel, { passive: false })
-        return () => canvas?.removeEventListener('wheel', onWheel)
+        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)
@@ -56,13 +60,13 @@
     }
 
     function onCanvasMouseDown(event: any) {
-        if (event.target === event.currentTarget) {
-            isDraggingCanvas = true
+        if (event.button === 1) {
+            isDraggingCanvas = true;
         }
     }
 
     function onWheel(event: WheelEvent) {
-        const { deltaX, deltaY, clientX, clientY, ctrlKey, altKey } = event
+        const { deltaX, deltaY, clientX, clientY, ctrlKey, shiftKey } = event
         if (ctrlKey) {
             // scale
             event.preventDefault()
@@ -84,7 +88,7 @@
             canvasOffset.y = mouseY - ratio * (mouseY - canvasOffset.y)
 
             scale.current = changedScale
-        } else if (altKey) {
+        } else if (shiftKey) {
             // scroll horizontally
             scrollCanvas({
                 x: -deltaY,
@@ -98,6 +102,26 @@
             })
         }
     }
+
+    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">
@@ -106,6 +130,7 @@
         onmousemove={onMouseMove}
         onmouseup={onMouseUp}
         onmousedown={onCanvasMouseDown}
+        ontouchstart={onTouchStart}
         role="button"
         tabindex="0"
         bind:this={canvas}

From 0b0cd36e910f68c9115efa7a4a83432bf5f8671e Mon Sep 17 00:00:00 2001
From: "DESKTOP-0B2V58C\\HP" <kachur-shefer.davyd@student.uzhnu.edu.ua>
Date: Wed, 31 Jul 2024 17:26:56 +0300
Subject: [PATCH 10/10] feat: add positions for notes

---
 src/lib/index.svelte.ts |  4 ++--
 src/routes/+page.svelte | 24 +++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/lib/index.svelte.ts b/src/lib/index.svelte.ts
index 19aa880..8148dcc 100644
--- a/src/lib/index.svelte.ts
+++ b/src/lib/index.svelte.ts
@@ -40,12 +40,12 @@ export type Message = {
     children: Set<Id>
 }
 
-export function createMessage(text: string): MessageData {
+export function createMessage(text: string, x: number, y: number): MessageData {
     // TODO: Choose transform for a new message
     return {
         content: text,
         createdAt: Date.now(),
-        transform: { x: 0, y: 0, width: 100, height: 40 },
+        transform: { x: x, y: y, width: 100, height: 40 },
     }
 }
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fb40b2d..b0d154a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -35,7 +35,29 @@
     let textInputElement: HTMLInputElement | null = $state(null)
 
     function appendMessage() {
-        let message = createMessage(textInput)
+        let parentMessageId = $page.url.hash.substring(1)
+        let parentMessage = messages.get(parentMessageId)
+        let { x, y } = parentMessage?.data.transform || { x: 0, y: 0 }
+       
+        let allMessages = messages.export().messages;
+        let allMessagesId = Object.keys(allMessages);
+        allMessagesId.forEach((id) => {
+            let message = messages.get(id);
+            if(message?.data.transform.y === y + 100){
+                x = message?.data.transform.x + 150;
+            }
+            
+        });
+        
+        // let parentChildren = parentMessage?.children || []
+        // if (parentChildren.size > 0) {
+        //     let arrayChildren = Array.from(parentChildren)
+        //     let lastChildId = arrayChildren[arrayChildren.length - 1]
+        //     let lastChild = messages.get(lastChildId)
+        //     x = lastChild!.data.transform.x + 150
+        // }
+
+        let message = createMessage(textInput, x, y + 100)
         leafId = messages.add(leafId, message)
 
         textInput = ''