Functions

src/components/tabs/Tabs.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    import Icon from "../icon/Icon.svelte";
+
+    export let tabs: { icon?: string, label: string, key: string, removable: boolean }[]
+    export let selected: number
+    export let setSelected: (index: number) => void
+    export let removeTab: (index: number) => void
+
+</script>
+
+<div class="wrapper">
+    {#each tabs as tab, index}
+        <div class="item" class:highlight-item={selected === index}>
+            <div class="label" role="button" on:click={() => setSelected(index)}>
+                {#if tab.icon}
+                    <Icon>{tab.icon}</Icon>
+                {/if}
+                {tab.label}
+            </div>
+            {#if tab.removable}
+                <button data-sveltebuttondefault="-" class="btn" on:click={() => removeTab(index)}>
+                    <Icon>close</Icon>
+                </button>
+            {/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .wrapper {
+        display: flex;
+        height: 30px;
+        align-items: center;
+        background: var(--pj-background-tertiary);
+    }
+
+    .highlight-item {
+        background: var(--pj-background-primary) !important;
+        border-bottom-color: white !important;
+
+    }
+
+    .item {
+        height: 30px;
+        width: fit-content;
+        min-width: 100px;
+        border-right: var(--pj-border-primary) 1px solid;
+        background: var(--pj-background-tertiary);
+        border-bottom: var(--pj-border-primary) 2px solid;
+    }
+
+    .label {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        font-size: .8rem;
+        padding: 4px;
+    }
+
+    .btn {
+        width: 20px;
+        height: 20px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>

src/components/tooltip/ToolTipService.ts

@@ -2,27 +2,26 @@ import AbstractSingleton from "../../core/libs/AbstractSingleton";
 import SveltePortal from "../../core/libs/SveltePortal";
 
 export default class ToolTipService extends AbstractSingleton {
-	portal = new SveltePortal(999, false)
-	element
-	closeCurrent
+    portal = new SveltePortal(999, false)
+    element: HTMLElement
+    closeCurrent?: VoidFunction
 
-	constructor() {
-		super();
-		document.addEventListener("dragstart", () => {
-			this.portal.close()
-			if (this.closeCurrent)
-				this.closeCurrent()
-		})
-		const el = document.createElement("div")
-		el.classList.add("tooltip")
-		el.setAttribute("data-sveltetooltip", "-")
-		this.portal.create(el)
+    constructor() {
+        super();
+        document.addEventListener("dragstart", () => {
+            this.portal.close()
+            this.closeCurrent?.()
+        })
+        const el = document.createElement("div")
+        el.classList.add("tooltip")
+        el.setAttribute("data-sveltetooltip", "-")
+        this.portal.create(el)
 
-		this.element = el
-	}
+        this.element = el
+    }
 
-	static getInstance(): ToolTipService{
-		return super.get<ToolTipService>()
-	}
+    static getInstance(): ToolTipService {
+        return super.get<ToolTipService>()
+    }
 
 }

src/core/CanvasRenderEngine.ts

@@ -1,24 +1,17 @@
 import RendererUtil from "./util/RendererUtil"
-import AbstractNode from "./instances/AbstractNode"
 import type AbstractLink from "./instances/AbstractLink"
-import Comment from "./instances/Comment"
-import ActionHistory from "./libs/ActionHistory"
 import PScriptUtil from "./util/PScriptUtil";
-import PScriptRendererState from "./libs/PScriptRendererState";
-import AbstractDraggable from "./instances/AbstractDraggable";
 import IDraggableUtil from "./util/IDraggableUtil";
+import CanvasStateStore from "./libs/CanvasStateStore";
+import GlobalStyles from "./resources/GlobalStyles";
 
 export default class CanvasRenderEngine implements IRenderEngine {
     #id: string
     #initialized = false
-    //history = new ActionHistory()
     __ctx: CanvasRenderingContext2D
     __canvas: HTMLCanvasElement
-    __lastSelectionListener?: Function
-    __selectionMap = new Map<string, IDraggable>()
-    #lastSelection: IDraggable
     #frame: number;
-    __observer
+    __observer: ResizeObserver
     #state: RendererState<CanvasRenderEngine>
 
     constructor(id: string) {
@@ -27,11 +20,16 @@ export default class CanvasRenderEngine implements IRenderEngine {
     }
 
     getState(): RendererState<CanvasRenderEngine> {
-        return this.#state ?? (this.#state = PScriptRendererState.getState(this.getId()))
+        return this.#state ?? (this.#state = CanvasStateStore.getDataById(this.getId()))
     }
 
     clearState() {
         this.#state = undefined
+        CanvasStateStore.updateStore({
+            selected: new Map<string, IDraggable>(),
+            lastSelection: undefined,
+            focusedFunction: undefined
+        })
     }
 
     initialize(canvas: HTMLCanvasElement) {
@@ -59,10 +57,10 @@ export default class CanvasRenderEngine implements IRenderEngine {
 
     private findTextDimensions() {
         const state = this.getState()
-        this.__ctx.font = state.defaultFont
+        this.__ctx.font = GlobalStyles.defaultFont
         state.defaultTextSize = this.__ctx.measureText("T").width
 
-        this.__ctx.font = state.smallFont
+        this.__ctx.font = GlobalStyles.smallFont
         state.smallTextSize = this.__ctx.measureText("T").width
     }
 
@@ -80,7 +78,7 @@ export default class CanvasRenderEngine implements IRenderEngine {
     }
 
     #loop() {
-        const STATE = this.#getState()
+        const STATE = this.getState()
         if (!STATE)
             return;
         if (STATE.needsUpdate) {
@@ -103,81 +101,13 @@ export default class CanvasRenderEngine implements IRenderEngine {
         return this.#id
     }
 
-    #getState() {
-        return PScriptRendererState.getState(this.getId())
-    }
-
-    addLink(link: AbstractLink, noUpdate?: boolean) {
-        const foundExisting = this.#state.links.findIndex(l => l.input === link.input)
-        if (foundExisting > -1)
-            this.#state.links[foundExisting] = link
-        else
-            this.#state.links.push(link)
-        if (!noUpdate)
-            this.clear()
-    }
-
-    removeLink(index: number) {
-        this.#state.links.splice(index, 1)
-        this.clear()
-    }
-
-    get lastSelection() {
-        return this.#lastSelection
-    }
-
-    set lastSelection(data: IDraggable) {
-        this.#lastSelection = data
-        this.__lastSelectionListener?.()
-    }
-
-    addDraggable(node: IDraggable) {
-        // if (!noSerialization) {
-        //     this.history.save([node], true)
-        //     this.history.save([node])
-        // }
-        const state = this.getState()
-        if (node instanceof Comment) {
-            state.comments.push(node)
-        } else {
-            state.nodes.push(<AbstractNode>node)
-        }
-        this.clear()
-    }
-
-    removeDraggable(toRemove: AbstractDraggable[]) {
-        // if (!noSerialization) {
-        //     const mapped = STATE.nodes.filter(e => toRemove.includes(e.id))
-        //     this.history.save(mapped)
-        //     this.history.save(mapped, true)
-        // }
-        for (let i = 0; i < toRemove.length; i++) {
-            const draggable = toRemove[i];
-            if (draggable instanceof AbstractNode) {
-                const index = this.#state.nodes.indexOf(draggable)
-                if (index > -1) {
-                    this.#state.nodes.splice(index, 1)
-                    const toRemove = this.#state.links.filter(l => l.sourceNode === draggable || l.targetNode === draggable)
-                    toRemove.forEach(l => {
-                        this.removeLink(this.#state.links.indexOf(l))
-                    })
-                }
-            } else {
-                const index = this.#state.comments.indexOf(draggable)
-                this.#state.comments.splice(index, 1)
-            }
-        }
-        this.clear()
-    }
-
-
     clear() {
-        this.#getState().needsUpdate = true
+        this.getState().needsUpdate = true
     }
 
     #draw() {
         const ctx = this.__ctx
-        const STATE = this.#getState()
+        const STATE = this.getState()
         const links = STATE.links
         const nodes = STATE.nodes
         const comments = STATE.comments