diff --git a/src/components/tabs/Tabs.svelte b/src/components/tabs/Tabs.svelte new file mode 100644 index 0000000..2ad3544 --- /dev/null +++ b/src/components/tabs/Tabs.svelte @@ -0,0 +1,69 @@ + + +
+ {#each tabs as tab, index} +
+
setSelected(index)}> + {#if tab.icon} + {tab.icon} + {/if} + {tab.label} +
+ {#if tab.removable} + + {/if} +
+ {/each} +
+ + diff --git a/src/components/tooltip/ToolTipService.ts b/src/components/tooltip/ToolTipService.ts index 2e2123a..d2676be 100644 --- a/src/components/tooltip/ToolTipService.ts +++ b/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() - } + static getInstance(): ToolTipService { + return super.get() + } } diff --git a/src/core/CanvasRenderEngine.ts b/src/core/CanvasRenderEngine.ts index 95a8d2e..0107624 100644 --- a/src/core/CanvasRenderEngine.ts +++ b/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() - #lastSelection: IDraggable #frame: number; - __observer + __observer: ResizeObserver #state: RendererState constructor(id: string) { @@ -27,11 +20,16 @@ export default class CanvasRenderEngine implements IRenderEngine { } getState(): RendererState { - 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(), + 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(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 diff --git a/src/core/PScript.svelte b/src/core/PScript.svelte index 966338d..ad79f02 100644 --- a/src/core/PScript.svelte +++ b/src/core/PScript.svelte @@ -1,40 +1,94 @@ -
- e.preventDefault()} - class="canvas" - bind:this={canvasElement} - > + + selectedTab = v} + selected={selectedTab} + removeTab={index => { + tabs.slice(index, 1) + tabs = tabs + }} +/> +
+ + +
+ e.preventDefault()} + class="canvas" + bind:this={canvasElement} + > +
+ +
+ diff --git a/src/core/components/ActionBar.svelte b/src/core/components/ActionBar.svelte index 0aafe60..0cc6803 100644 --- a/src/core/components/ActionBar.svelte +++ b/src/core/components/ActionBar.svelte @@ -2,7 +2,7 @@ import Icon from "../../components/icon/Icon.svelte"; import Serializer from "../libs/Serializer"; import CanvasRenderEngine from "../CanvasRenderEngine"; - import PScriptRendererState from "../libs/PScriptRendererState"; + import CanvasStateStore from "../libs/CanvasStateStore"; export let canvas: CanvasRenderEngine let fileInput: HTMLInputElement; @@ -13,7 +13,7 @@ reader.onload = e => { canvas.stop() canvas.clearState() - PScriptRendererState.setState(canvas, Serializer.deserialize(canvas, e.target.result.toString())) + CanvasStateStore.updateStore({[canvas.getId()]: Serializer.deserialize(canvas, e.target.result.toString())}) canvas.start() }; } @@ -36,8 +36,7 @@ } -
- +
+ + diff --git a/src/core/components/AttributeEditor.svelte b/src/core/components/AttributeEditor.svelte index 80e805b..e6decd0 100644 --- a/src/core/components/AttributeEditor.svelte +++ b/src/core/components/AttributeEditor.svelte @@ -1,19 +1,19 @@ @@ -34,7 +34,7 @@ placeholder={LocalizationEN.NAME} /> - {#if node instanceof Comment} + {#if node instanceof CommentDraggable}
{LocalizationEN.COLOR}
- + {:else} +
+ category + No node selected +
{/if} + + diff --git a/src/core/components/Nodes.svelte b/src/core/components/Nodes.svelte index 6030087..0c54bd3 100644 --- a/src/core/components/Nodes.svelte +++ b/src/core/components/Nodes.svelte @@ -1,48 +1,91 @@ -