From fb7739eb59a4ee6d0edfab1744c449f06ff23420 Mon Sep 17 00:00:00 2001 From: facobackup Date: Sun, 27 Aug 2023 13:06:31 -0300 Subject: [PATCH 1/5] Starting functions architecture --- src/core/CanvasRenderEngine.ts | 4 +- src/core/components/AttributeEditor.svelte | 6 +-- src/core/instances/AbstractDraggable.ts | 8 +--- .../{Comment.ts => CommentDraggable.ts} | 8 ++-- src/core/instances/FunctionDraggable.ts | 39 +++++++++++++++++++ src/core/libs/ActionHistory.ts | 6 +-- src/core/libs/Serializer.ts | 4 +- src/core/pscript.g.ts | 2 +- src/core/util/IDraggableUtil.ts | 6 +-- .../javascript/javascript-nodes.ts | 16 +++++++- ...e-node.test.ts => serialize-state.test.ts} | 0 11 files changed, 72 insertions(+), 27 deletions(-) rename src/core/instances/{Comment.ts => CommentDraggable.ts} (76%) create mode 100644 src/core/instances/FunctionDraggable.ts rename test/{serialize-node.test.ts => serialize-state.test.ts} (100%) diff --git a/src/core/CanvasRenderEngine.ts b/src/core/CanvasRenderEngine.ts index 95a8d2e..f63dd6a 100644 --- a/src/core/CanvasRenderEngine.ts +++ b/src/core/CanvasRenderEngine.ts @@ -1,7 +1,7 @@ import RendererUtil from "./util/RendererUtil" import AbstractNode from "./instances/AbstractNode" import type AbstractLink from "./instances/AbstractLink" -import Comment from "./instances/Comment" +import CommentDraggable from "./instances/CommentDraggable" import ActionHistory from "./libs/ActionHistory" import PScriptUtil from "./util/PScriptUtil"; import PScriptRendererState from "./libs/PScriptRendererState"; @@ -137,7 +137,7 @@ export default class CanvasRenderEngine implements IRenderEngine { // this.history.save([node]) // } const state = this.getState() - if (node instanceof Comment) { + if (node instanceof CommentDraggable) { state.comments.push(node) } else { state.nodes.push(node) diff --git a/src/core/components/AttributeEditor.svelte b/src/core/components/AttributeEditor.svelte index 80e805b..df3bab2 100644 --- a/src/core/components/AttributeEditor.svelte +++ b/src/core/components/AttributeEditor.svelte @@ -2,11 +2,11 @@ import Attribute from "./Attribute.svelte"; import type AbstractNode from "../instances/AbstractNode"; - import Comment from "../instances/Comment"; + import CommentDraggable from "../instances/CommentDraggable"; import LocalizationEN from "../resources/LocalizationEN"; import ColorPicker from "../../components/color-picker/ColorPicker.svelte"; - export let node: AbstractNode | Comment + export let node: AbstractNode | CommentDraggable export let updateCanvas: Function @@ -34,7 +34,7 @@ placeholder={LocalizationEN.NAME} /> - {#if node instanceof Comment} + {#if node instanceof CommentDraggable}
{LocalizationEN.COLOR} implements IDraggable { +export default abstract class AbstractDraggable extends AbstractStateful implements IDraggable { static HEADER_HEIGHT = 25 static SCALE_BUTTON_SIZE = 10 diff --git a/src/core/instances/Comment.ts b/src/core/instances/CommentDraggable.ts similarity index 76% rename from src/core/instances/Comment.ts rename to src/core/instances/CommentDraggable.ts index 8e37dc3..adf1e06 100644 --- a/src/core/instances/Comment.ts +++ b/src/core/instances/CommentDraggable.ts @@ -3,14 +3,14 @@ import RendererUtil from "../util/RendererUtil" import AbstractDraggable from "./AbstractDraggable" -export default class Comment extends AbstractDraggable implements ICommentDraggable { - static of(props: CommentProps) { - const instance = new Comment() +export default class CommentDraggable extends AbstractDraggable implements ICommentDraggable { + static of(props: AbstractDraggableProps) { + const instance = new CommentDraggable() instance.from(props) return instance } - from(props: CommentProps) { + from(props: AbstractDraggableProps) { super.from(props) this.height = 200 } diff --git a/src/core/instances/FunctionDraggable.ts b/src/core/instances/FunctionDraggable.ts new file mode 100644 index 0000000..67993d8 --- /dev/null +++ b/src/core/instances/FunctionDraggable.ts @@ -0,0 +1,39 @@ +import AbstractDraggable from "./AbstractDraggable"; +import CanvasRenderEngine from "../CanvasRenderEngine"; +import RendererUtil from "../util/RendererUtil"; + +export default class FunctionDraggable extends AbstractDraggable implements IFunctionDraggable { + collapsed = false + + static of(props: AbstractDraggableProps) { + const instance = new FunctionDraggable() + instance.from(props) + return instance + } + + from(props: AbstractDraggableProps) { + super.from(props) + this.height = 200 + } + + drawToCanvas() { + const ctx = this.__canvas.__ctx + if(!this.collapsed) { + RendererUtil.drawRoundedRect(ctx, this, 3, this.__canvas.__selectionMap.get(this.id) !== undefined, this.__canvas.lastSelection === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) + } + RendererUtil.drawDraggableHeader(ctx, this) + this.#drawCollapseButton() + this.drawScale() + } + + #drawCollapseButton(){ + const ctx = this.__canvas.__ctx + const state = this.__canvas.getState() + + + } + + getInitialProperties(): MutableObject | undefined { + return undefined; + } +} diff --git a/src/core/libs/ActionHistory.ts b/src/core/libs/ActionHistory.ts index 9e3167c..78f1ae9 100644 --- a/src/core/libs/ActionHistory.ts +++ b/src/core/libs/ActionHistory.ts @@ -1,6 +1,6 @@ import type CanvasRenderEngine from "../CanvasRenderEngine" import AbstractNode from "../instances/AbstractNode" -import Comment from "../instances/Comment" +import CommentDraggable from "../instances/CommentDraggable" import ToastNotificationSystem from "../../components/alert/ToastNotificationSystem"; import LocalizationEN from "../resources/LocalizationEN"; import UndoRedo from "./UndoRedo"; @@ -15,7 +15,7 @@ export default class ActionHistory { this.#cache.history = [null] } - save(value: (AbstractNode | Comment)[], isRemoval?: boolean) { + save(value: (AbstractNode | CommentDraggable)[], isRemoval?: boolean) { // if (value.length === 0) // return // const data = value.map(v => { @@ -53,7 +53,7 @@ export default class ActionHistory { for (let i = 0; i < toAdd.length; i++) { const current = toAdd[i] if (current.DATA_TYPE === "comment") { - // const parsed = new Comment(current.x, current.y) + // const parsed = new CommentDraggable(current.x, current.y) // parsed.color = current.color // parsed.name = current.name // parsed.width = current.width diff --git a/src/core/libs/Serializer.ts b/src/core/libs/Serializer.ts index ed09828..a07bc18 100644 --- a/src/core/libs/Serializer.ts +++ b/src/core/libs/Serializer.ts @@ -1,5 +1,5 @@ import AbstractStateful from "../instances/AbstractStateful"; -import Comment from "../instances/Comment" +import CommentDraggable from "../instances/CommentDraggable" import PropertyType from "../instances/PropertyType"; import NodeType from "../instances/NodeType"; import Output from "../instances/Output"; @@ -15,7 +15,7 @@ import AbstractDraggable from "../instances/AbstractDraggable"; export default class Serializer { static #types: typeof AbstractSerializable[] = [ - Comment, + CommentDraggable, ExecutionInput, ExecutionOutput, ExecutionLink, diff --git a/src/core/pscript.g.ts b/src/core/pscript.g.ts index 3e1bf1f..fa0c93d 100644 --- a/src/core/pscript.g.ts +++ b/src/core/pscript.g.ts @@ -12,7 +12,7 @@ type NodeProps = { inputs?: IInput[]; } -type CommentProps = { +type AbstractDraggableProps = { canvas: IRenderEngine; x: number; y: number; diff --git a/src/core/util/IDraggableUtil.ts b/src/core/util/IDraggableUtil.ts index 07885bb..3ec62cf 100644 --- a/src/core/util/IDraggableUtil.ts +++ b/src/core/util/IDraggableUtil.ts @@ -1,7 +1,7 @@ import AbstractDraggable from "../instances/AbstractDraggable" import AbstractNode from "../instances/AbstractNode" import RendererUtil from "./RendererUtil"; -import Comment from "../instances/Comment"; +import CommentDraggable from "../instances/CommentDraggable"; import CanvasRenderEngine from "../CanvasRenderEngine"; import PScriptUtil from "./PScriptUtil"; @@ -79,7 +79,7 @@ export default class IDraggableUtil { }, nodesOnDrag, canvasAPI: CanvasRenderEngine, parentBBox, parentElement: HTMLElement, event: MouseEvent) { const state = canvasAPI.getState() const nodes = state.nodes - const comments = state.comments + const comments = state.comments const links = state.links const X = (event.clientX - BBox.x) / state.scale @@ -182,7 +182,7 @@ export default class IDraggableUtil { RendererUtil.drawTempLink(event, parentElement, parentBBox, canvasAPI) } - private static processCommentClick(onHeader: boolean, nodesOnDrag, event: MouseEvent, comment: Comment, parentBBox, X: number, Y: number, canvasAPI: CanvasRenderEngine) { + private static processCommentClick(onHeader: boolean, nodesOnDrag, event: MouseEvent, comment: CommentDraggable, parentBBox, X: number, Y: number, canvasAPI: CanvasRenderEngine) { if (onHeader) { nodesOnDrag.push(IDraggableUtil.drag(event, comment, parentBBox, true)) comment.isOnDrag = true diff --git a/src/environment/javascript/javascript-nodes.ts b/src/environment/javascript/javascript-nodes.ts index 3af3ca2..1ad8cc1 100644 --- a/src/environment/javascript/javascript-nodes.ts +++ b/src/environment/javascript/javascript-nodes.ts @@ -1,9 +1,10 @@ -import Comment from "../../core/instances/Comment"; +import CommentDraggable from "../../core/instances/CommentDraggable"; import Add from "./basic-functions/Add"; import BooleanVal from "./basic-types/BooleanVal"; import NumberVal from "./basic-types/NumberVal"; import {Colors} from "./javascript.enum"; import Do from "./basic-functions/Do"; +import FunctionDraggable from "../../core/instances/FunctionDraggable"; export default [ { @@ -20,7 +21,7 @@ export default [ { label: "Comment", class: "CommentDraggable", - getInstance: (x, y, canvas) => Comment.of({ + getInstance: (x, y, canvas) => CommentDraggable.of({ canvas, x, y, @@ -28,6 +29,17 @@ export default [ colorRGBA: Colors.COMMENT }) }, + { + label: "Function", + class: "FunctionDraggable", + getInstance: (x, y, canvas) => FunctionDraggable.of({ + canvas, + x, + y, + label: "New function", + colorRGBA: Colors.FUNCTION + }) + }, { label: "Boolean", diff --git a/test/serialize-node.test.ts b/test/serialize-state.test.ts similarity index 100% rename from test/serialize-node.test.ts rename to test/serialize-state.test.ts From 90df38c0a061284587fb56ba6945a5d70fa2e3a8 Mon Sep 17 00:00:00 2001 From: facobackup Date: Sun, 27 Aug 2023 16:35:01 -0300 Subject: [PATCH 2/5] - Organizing bound checks - Tweaking collapse button - Adding new store for selection --- src/core/CanvasRenderEngine.ts | 32 ++++++++-------- src/core/PScript.svelte | 4 +- src/core/components/ActionBar.svelte | 4 +- src/core/components/SideBar.svelte | 7 +++- src/core/instances/AbstractDraggable.ts | 13 ++----- src/core/instances/AbstractNode.ts | 26 +++---------- src/core/instances/CommentDraggable.ts | 3 +- src/core/instances/FunctionDraggable.ts | 37 ++++++++++++++++--- ...RendererState.ts => CanvasStateManager.ts} | 2 +- src/core/libs/SelectionStore.ts | 25 +++++++++++++ src/core/pscript.g.ts | 2 - src/core/util/IDraggableUtil.ts | 36 ++++++++++++------ src/core/util/MathUtil.ts | 27 ++++++++++++++ src/core/util/PScriptUtil.ts | 3 +- src/core/util/RendererUtil.ts | 13 +++++-- .../javascript/JavascriptScriptingView.svelte | 4 +- test/serialize-state.test.ts | 4 +- 17 files changed, 159 insertions(+), 83 deletions(-) rename src/core/libs/{PScriptRendererState.ts => CanvasStateManager.ts} (97%) create mode 100644 src/core/libs/SelectionStore.ts create mode 100644 src/core/util/MathUtil.ts diff --git a/src/core/CanvasRenderEngine.ts b/src/core/CanvasRenderEngine.ts index f63dd6a..d0bc2a0 100644 --- a/src/core/CanvasRenderEngine.ts +++ b/src/core/CanvasRenderEngine.ts @@ -4,21 +4,18 @@ import type AbstractLink from "./instances/AbstractLink" import CommentDraggable from "./instances/CommentDraggable" import ActionHistory from "./libs/ActionHistory" import PScriptUtil from "./util/PScriptUtil"; -import PScriptRendererState from "./libs/PScriptRendererState"; +import CanvasStateManager from "./libs/CanvasStateManager"; import AbstractDraggable from "./instances/AbstractDraggable"; import IDraggableUtil from "./util/IDraggableUtil"; +import SelectionStore from "./libs/SelectionStore"; 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 +24,16 @@ export default class CanvasRenderEngine implements IRenderEngine { } getState(): RendererState { - return this.#state ?? (this.#state = PScriptRendererState.getState(this.getId())) + return this.#state ?? (this.#state = CanvasStateManager.getState(this.getId())) } clearState() { this.#state = undefined + SelectionStore.updateStore({ + selected: new Map(), + lastSelection: undefined, + focusedFunction: undefined + }) } initialize(canvas: HTMLCanvasElement) { @@ -104,7 +106,7 @@ export default class CanvasRenderEngine implements IRenderEngine { } #getState() { - return PScriptRendererState.getState(this.getId()) + return CanvasStateManager.getState(this.getId()) } addLink(link: AbstractLink, noUpdate?: boolean) { @@ -122,15 +124,6 @@ export default class CanvasRenderEngine implements IRenderEngine { 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) @@ -151,8 +144,13 @@ export default class CanvasRenderEngine implements IRenderEngine { // this.history.save(mapped) // this.history.save(mapped, true) // } + const focusedFunction = SelectionStore.getData().focusedFunction for (let i = 0; i < toRemove.length; i++) { const draggable = toRemove[i]; + SelectionStore.getSelectionMap().delete(draggable.id) + if(focusedFunction === draggable.id){ + SelectionStore.updateStore({focusedFunction: undefined}) + } if (draggable instanceof AbstractNode) { const index = this.#state.nodes.indexOf(draggable) if (index > -1) { diff --git a/src/core/PScript.svelte b/src/core/PScript.svelte index 966338d..6fdaf23 100644 --- a/src/core/PScript.svelte +++ b/src/core/PScript.svelte @@ -1,7 +1,7 @@ diff --git a/src/core/instances/AbstractDraggable.ts b/src/core/instances/AbstractDraggable.ts index a537c86..481e183 100644 --- a/src/core/instances/AbstractDraggable.ts +++ b/src/core/instances/AbstractDraggable.ts @@ -1,5 +1,6 @@ import AbstractStateful from "./AbstractStateful"; import uuid from "uuidv4" +import MathUtil from "../util/MathUtil"; export default abstract class AbstractDraggable extends AbstractStateful implements IDraggable { static HEADER_HEIGHT = 25 @@ -34,11 +35,7 @@ export default abstract class AbstractDraggable extends AbstractStateful= XI && x < XF && y >= YI && y < YF + return MathUtil.isPointInsideRect(x, y, XI, YI, AbstractDraggable.SCALE_BUTTON_SIZE, AbstractDraggable.SCALE_BUTTON_SIZE) } getMinHeight() { @@ -51,14 +48,12 @@ export default abstract class AbstractDraggable extends AbstractStateful= coord.x && x < coord.x + this.width && y >= coord.y && y < coord.y + AbstractDraggable.HEADER_HEIGHT + return MathUtil.isPointInsideRect(x, y, coord.x, coord.y, this.width, AbstractDraggable.HEADER_HEIGHT) } checkBodyClick(x: number, y: number): boolean { const coord = this.getTransformedCoordinates() - const XI = coord.x - 4, XF = coord.x + 4 + this.width - const YI = coord.y + AbstractDraggable.HEADER_HEIGHT, YF = YI + this.height - AbstractDraggable.HEADER_HEIGHT - return x >= XI && x < XF && y >= YI && y < YF + return MathUtil.isPointInsideRect(x, y, coord.x, coord.y + AbstractDraggable.HEADER_HEIGHT, this.width, this.height - AbstractDraggable.HEADER_HEIGHT) } drawScale() { diff --git a/src/core/instances/AbstractNode.ts b/src/core/instances/AbstractNode.ts index 03590ff..a062edc 100644 --- a/src/core/instances/AbstractNode.ts +++ b/src/core/instances/AbstractNode.ts @@ -4,6 +4,8 @@ import IDraggableUtil from "../util/IDraggableUtil" import NodeType from "./NodeType"; import ExecutionOutput from "./ExecutionOutput"; import ExecutionInput from "./ExecutionInput"; +import MathUtil from "../util/MathUtil"; +import SelectionStore from "../libs/SelectionStore"; export default abstract class AbstractNode extends AbstractDraggable implements INodeDraggable { static IO_RADIUS = 4 @@ -59,34 +61,18 @@ export default abstract class AbstractNode extends AbstractDraggable implements if (io instanceof ExecutionInput) { const startX = linePosition.x + AbstractNode.IO_RADIUS * 3 const positions = AbstractNode.#getTrianglePoints(startX, linePosition.y) - isValid = AbstractNode.#isPointInsideTriangle(x, y, positions) + isValid = MathUtil.isPointInsideTriangle(x, y, positions) } else if (io instanceof ExecutionOutput) { const positions = AbstractNode.#getTrianglePoints(linePosition.x - AbstractNode.IO_RADIUS, linePosition.y) - isValid = AbstractNode.#isPointInsideTriangle(x, y, positions) + isValid = MathUtil.isPointInsideTriangle(x, y, positions) } else { - isValid = ((x - linePosition.x) ** 2 + (y - linePosition.y) ** 2 < R2) + isValid = MathUtil.isPointInsideCircle(x, y, linePosition.x, linePosition.y, R2) } if (isValid) return io } } - static #areaOfTriangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) { - return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0); - } - - static #isPointInsideTriangle(x: number, y: number, positions: [number, number, number, number, number, number]): boolean { - const x1 = positions[0], y1 = positions[1], - x2 = positions[2], y2 = positions[3], - x3 = positions[4], y3 = positions[5] - - const A = AbstractNode.#areaOfTriangle(x1, y1, x2, y2, x3, y3); - const A1 = AbstractNode.#areaOfTriangle(x, y, x2, y2, x3, y3); - const A2 = AbstractNode.#areaOfTriangle(x1, y1, x, y, x3, y3); - const A3 = AbstractNode.#areaOfTriangle(x1, y1, x2, y2, x, y); - return (A === A1 + A2 + A3); - } - static #getTrianglePoints(startX: number, startY: number): [number, number, number, number, number, number] { const X = startX - RendererUtil.EXECUTION_IO_SIZE return [startX, startY, X, startY + RendererUtil.EXECUTION_IO_SIZE, X, startY - RendererUtil.EXECUTION_IO_SIZE] @@ -94,7 +80,7 @@ export default abstract class AbstractNode extends AbstractDraggable implements drawToCanvas() { const ctx = this.__canvas.__ctx - RendererUtil.drawRoundedRect(ctx, this, 3, this.__canvas.__selectionMap.get(this.id) !== undefined, this.__canvas.lastSelection === this, this.__canvas.getState().rectColor) + RendererUtil.drawDraggableBody(ctx, this, 3, SelectionStore.getSelectionMap().get(this.id) !== undefined, SelectionStore.getLastSelection() === this, this.__canvas.getState().rectColor) RendererUtil.drawDraggableHeader(ctx, this) for (let j = 0; j < this.outputs.length; j++) { diff --git a/src/core/instances/CommentDraggable.ts b/src/core/instances/CommentDraggable.ts index adf1e06..a4cdbd0 100644 --- a/src/core/instances/CommentDraggable.ts +++ b/src/core/instances/CommentDraggable.ts @@ -1,6 +1,7 @@ import type CanvasRenderEngine from "../CanvasRenderEngine" import RendererUtil from "../util/RendererUtil" import AbstractDraggable from "./AbstractDraggable" +import SelectionStore from "../libs/SelectionStore"; export default class CommentDraggable extends AbstractDraggable implements ICommentDraggable { @@ -17,7 +18,7 @@ export default class CommentDraggable extends AbstractDraggable implements IComm drawToCanvas() { const ctx = this.__canvas.__ctx - RendererUtil.drawRoundedRect(ctx, this, 3, this.__canvas.__selectionMap.get(this.id) !== undefined, this.__canvas.lastSelection === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) + RendererUtil.drawDraggableBody(ctx, this, 3, SelectionStore.getSelectionMap().get(this.id) !== undefined, SelectionStore.getLastSelection() === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) RendererUtil.drawDraggableHeader(ctx, this) this.drawScale() } diff --git a/src/core/instances/FunctionDraggable.ts b/src/core/instances/FunctionDraggable.ts index 67993d8..bebe93d 100644 --- a/src/core/instances/FunctionDraggable.ts +++ b/src/core/instances/FunctionDraggable.ts @@ -1,9 +1,12 @@ import AbstractDraggable from "./AbstractDraggable"; import CanvasRenderEngine from "../CanvasRenderEngine"; import RendererUtil from "../util/RendererUtil"; +import MathUtil from "../util/MathUtil"; +import SelectionStore from "../libs/SelectionStore"; export default class FunctionDraggable extends AbstractDraggable implements IFunctionDraggable { collapsed = false + #darkerColor: string; static of(props: AbstractDraggableProps) { const instance = new FunctionDraggable() @@ -14,23 +17,45 @@ export default class FunctionDraggable extends AbstractDraggable implements IFun from(props: AbstractDraggableProps) { super.from(props) this.height = 200 + this.#darkerColor = `rgba(${this.colorRGBA[0] * .85},${this.colorRGBA[1] * .85},${this.colorRGBA[2] * .85},1)` } drawToCanvas() { const ctx = this.__canvas.__ctx - if(!this.collapsed) { - RendererUtil.drawRoundedRect(ctx, this, 3, this.__canvas.__selectionMap.get(this.id) !== undefined, this.__canvas.lastSelection === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) + if (!this.collapsed) { + RendererUtil.drawDraggableBody( + ctx, + this, + 3, + SelectionStore.getFocusedFunction() === this.id || SelectionStore.getSelectionMap().get(this.id) !== undefined, + SelectionStore.getLastSelection() === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) + this.drawScale() } - RendererUtil.drawDraggableHeader(ctx, this) + RendererUtil.drawDraggableHeader(ctx, this, this.collapsed ? 3 : undefined) this.#drawCollapseButton() - this.drawScale() } - #drawCollapseButton(){ + #drawCollapseButton() { const ctx = this.__canvas.__ctx - const state = this.__canvas.getState() + const coord = this.getTransformedCoordinates() + const offset = AbstractDraggable.HEADER_HEIGHT * .1 + const size = AbstractDraggable.HEADER_HEIGHT * .75 + const XI = coord.x + this.width - size - offset + const YI = coord.y + offset + + ctx.fillStyle = this.#darkerColor + RendererUtil.drawRoundedRect(ctx, XI, YI, size, size, 3) + } + + checkAgainstCollapse(x: number, y: number): boolean { + const coord = this.getTransformedCoordinates() + const offset = AbstractDraggable.HEADER_HEIGHT * .1 + const size = AbstractDraggable.HEADER_HEIGHT * .75 + const XI = coord.x + this.width - size - offset + const YI = coord.y + offset + return MathUtil.isPointInsideRect(x, y, XI, YI, size, size) } getInitialProperties(): MutableObject | undefined { diff --git a/src/core/libs/PScriptRendererState.ts b/src/core/libs/CanvasStateManager.ts similarity index 97% rename from src/core/libs/PScriptRendererState.ts rename to src/core/libs/CanvasStateManager.ts index 292d912..b4c272b 100644 --- a/src/core/libs/PScriptRendererState.ts +++ b/src/core/libs/CanvasStateManager.ts @@ -1,7 +1,7 @@ import DynamicMap from "./DynamicMap"; import CanvasRenderEngine from "../CanvasRenderEngine"; -export default class PScriptRendererState { +export default class CanvasStateManager { static #state = new DynamicMap>() static getState(id: string) { diff --git a/src/core/libs/SelectionStore.ts b/src/core/libs/SelectionStore.ts new file mode 100644 index 0000000..0d071e0 --- /dev/null +++ b/src/core/libs/SelectionStore.ts @@ -0,0 +1,25 @@ +import AbstractStore from "./AbstractStore" +import FunctionDraggable from "../instances/FunctionDraggable"; + +export default class SelectionStore extends AbstractStore{ + constructor() { + super({ + selected: new Map(), + lastSelection: undefined, + focusedFunction: undefined + }) + } + + static getSelectionMap(): Map{ + return this.getData().selected + } + + static getLastSelection(): IDraggable{ + return this.getData().lastSelection + } + + static getFocusedFunction(): string { + return this.getData().focusedFunction + } +} + diff --git a/src/core/pscript.g.ts b/src/core/pscript.g.ts index fa0c93d..29152ba 100644 --- a/src/core/pscript.g.ts +++ b/src/core/pscript.g.ts @@ -21,8 +21,6 @@ type AbstractDraggableProps = { } interface IRenderEngine { - lastSelection: IDraggable; - __selectionMap: Map; __observer: ResizeObserver; stop: VoidFunction; __ctx: CanvasRenderingContext2D; diff --git a/src/core/util/IDraggableUtil.ts b/src/core/util/IDraggableUtil.ts index 3ec62cf..7310df8 100644 --- a/src/core/util/IDraggableUtil.ts +++ b/src/core/util/IDraggableUtil.ts @@ -4,6 +4,8 @@ import RendererUtil from "./RendererUtil"; import CommentDraggable from "../instances/CommentDraggable"; import CanvasRenderEngine from "../CanvasRenderEngine"; import PScriptUtil from "./PScriptUtil"; +import FunctionDraggable from "../instances/FunctionDraggable"; +import SelectionStore from "../libs/SelectionStore"; export default class IDraggableUtil { @@ -86,12 +88,14 @@ export default class IDraggableUtil { const Y = (event.clientY - BBox.y) / state.scale if (!event.ctrlKey) { - canvasAPI.lastSelection = undefined - canvasAPI.__selectionMap.clear() - } else - canvasAPI.__selectionMap.forEach(node => { + SelectionStore.updateStore({lastSelection: undefined}) + SelectionStore.getSelectionMap().clear() + } else { + SelectionStore.getSelectionMap().forEach(node => { nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) }) + } + let executionBroken = false for (let i = nodes.length - 1; i >= 0; i--) { @@ -100,11 +104,19 @@ export default class IDraggableUtil { const onHeader = node.checkHeaderClick(X, Y) if (!onHeader && !onBody) continue - canvasAPI.__selectionMap.set(node.id, node) - canvasAPI.lastSelection = node + const isFunctionNode = node instanceof FunctionDraggable + if(isFunctionNode){ + SelectionStore.updateStore({focusedFunction: node.id}) + } + SelectionStore.getSelectionMap().set(node.id, node) + SelectionStore.updateStore({lastSelection: node}) if (onHeader) { - nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) - node.isOnDrag = true + if (isFunctionNode && node.checkAgainstCollapse(X, Y)) { + node.collapsed = !node.collapsed + } else { + nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) + node.isOnDrag = true + } } else if (!event.ctrlKey) { const isOnScale = node.checkAgainstScale(X, Y) if (isOnScale) { @@ -132,7 +144,6 @@ export default class IDraggableUtil { executionBroken = true break } - if (!executionBroken) { for (let i = comments.length - 1; i >= 0; i--) { const comment = comments[i] @@ -144,7 +155,7 @@ export default class IDraggableUtil { } } } - + SelectionStore.updateStore({selected: SelectionStore.getSelectionMap()}) if (nodesOnDrag.length > 0 || IO.node !== undefined) canvasAPI.__ctx.canvas.style.cursor = "grabbing" canvasAPI.clear() @@ -193,8 +204,9 @@ export default class IDraggableUtil { comment.isOnDrag = true } } - canvasAPI.__selectionMap.set(comment.id, comment) - canvasAPI.lastSelection = comment + + SelectionStore.getSelectionMap().set(comment.id, comment) + SelectionStore.updateStore({selected: SelectionStore.getSelectionMap(), lastSelection: comment}) } static #checkOffset(ev1: MouseEvent, ev2: { x: number, y: number }): boolean { diff --git a/src/core/util/MathUtil.ts b/src/core/util/MathUtil.ts new file mode 100644 index 0000000..7387384 --- /dev/null +++ b/src/core/util/MathUtil.ts @@ -0,0 +1,27 @@ +export default class MathUtil { + static isPointInsideCircle(x: number, y: number, centerX: number, centerY: number, radiusSquared: number): boolean { + return ((x - centerX) ** 2 + (y - centerY) ** 2 < radiusSquared) + } + + static isPointInsideRect(x: number, y: number, centerX: number, centerY: number, width: number, height: number): boolean { + const XI = centerX + width + const YI = centerY + height + return x >= centerX && x <= XI && y >= centerY && y < YI + } + + static #areaOfTriangle(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) { + return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0); + } + + static isPointInsideTriangle(x: number, y: number, positions: [number, number, number, number, number, number]): boolean { + const x1 = positions[0], y1 = positions[1], + x2 = positions[2], y2 = positions[3], + x3 = positions[4], y3 = positions[5] + + const A = this.#areaOfTriangle(x1, y1, x2, y2, x3, y3); + const A1 = this.#areaOfTriangle(x, y, x2, y2, x3, y3); + const A2 = this.#areaOfTriangle(x1, y1, x, y, x3, y3); + const A3 = this.#areaOfTriangle(x1, y1, x2, y2, x, y); + return (A === A1 + A2 + A3); + } +} diff --git a/src/core/util/PScriptUtil.ts b/src/core/util/PScriptUtil.ts index fff192d..c529f33 100644 --- a/src/core/util/PScriptUtil.ts +++ b/src/core/util/PScriptUtil.ts @@ -4,6 +4,7 @@ import {MaterialDataTypes} from "../pscript.enum"; import LocalizationEN from "../resources/LocalizationEN"; import ToastNotificationSystem from "../../components/alert/ToastNotificationSystem"; import Link from "../instances/Link"; +import SelectionStore from "../libs/SelectionStore"; export default class PScriptUtil { /** @@ -16,7 +17,7 @@ export default class PScriptUtil { biggestX: number | undefined, biggestY: number | undefined - canvasAPI.__selectionMap + SelectionStore.getSelectionMap() .forEach(n => { if (!smallestX || n.x < smallestX) smallestX = n.x diff --git a/src/core/util/RendererUtil.ts b/src/core/util/RendererUtil.ts index dd6ea2d..0706a25 100644 --- a/src/core/util/RendererUtil.ts +++ b/src/core/util/RendererUtil.ts @@ -131,7 +131,7 @@ export default class RendererUtil { state.needsUpdate = true } - static drawDraggableHeader(ctx: CanvasRenderingContext2D, node: IDraggable) { + static drawDraggableHeader(ctx: CanvasRenderingContext2D, node: IDraggable, borderRadius?: number) { const state = node.__canvas.getState() const name = node.label const color = node.colorRGBA @@ -141,7 +141,7 @@ export default class RendererUtil { ctx.fillStyle = `rgb(${color})` ctx.strokeStyle = node.__canvas.getState().borderColor ctx.lineWidth = .5 - ctx.roundRect(coord.x, coord.y, node.width, RendererUtil.#HEADER_LABEL_HEIGHT, RendererUtil.#BORDER_RADIUS) + ctx.roundRect(coord.x, coord.y, node.width, RendererUtil.#HEADER_LABEL_HEIGHT, borderRadius ?? RendererUtil.#BORDER_RADIUS) ctx.stroke() ctx.fill() ctx.font = state.defaultFont @@ -164,7 +164,7 @@ export default class RendererUtil { } - static drawRoundedRect(ctx: CanvasRenderingContext2D, node: AbstractDraggable, r: number, isSelected: boolean, isFirstSelected: boolean, color: string) { + static drawDraggableBody(ctx: CanvasRenderingContext2D, node: AbstractDraggable, r: number, isSelected: boolean, isFirstSelected: boolean, color: string) { const coord = node.getTransformedCoordinates() const state = node.__canvas.getState() const w = node.width, h = node.height, x = coord.x, y = coord.y @@ -178,9 +178,14 @@ export default class RendererUtil { ctx.lineWidth = isSelected ? 2 : 1 ctx.strokeStyle = outlineColor + RendererUtil.drawRoundedRect(ctx, x, y, w, h, r) + } + + static drawRoundedRect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) { ctx.beginPath() ctx.roundRect(x, y, w, h, r) - ctx.stroke() ctx.fill() + ctx.closePath() + ctx.stroke() } } diff --git a/src/environment/javascript/JavascriptScriptingView.svelte b/src/environment/javascript/JavascriptScriptingView.svelte index 9c4d0c6..26c09fa 100644 --- a/src/environment/javascript/JavascriptScriptingView.svelte +++ b/src/environment/javascript/JavascriptScriptingView.svelte @@ -1,7 +1,7 @@ diff --git a/test/serialize-state.test.ts b/test/serialize-state.test.ts index 66ae40f..1c09741 100644 --- a/test/serialize-state.test.ts +++ b/test/serialize-state.test.ts @@ -2,11 +2,11 @@ import {expect, test} from '@jest/globals'; import BooleanVal from "../src/environment/javascript/basic-types/BooleanVal"; import {Colors} from "../src/environment/javascript/javascript.enum"; import Serializer from "../src/core/libs/Serializer"; -import PScriptRendererState from "../src/core/libs/PScriptRendererState"; +import CanvasStateManager from "../src/core/libs/CanvasStateManager"; test('Serialized node is valid', () => { Serializer.addTypes(BooleanVal) - const canvas = PScriptRendererState.createState("TEST") + const canvas = CanvasStateManager.createState("TEST") const newNode = BooleanVal.of({canvas, x: 0, y: 0, label: "Boolean", colorRGBA: Colors.BOOLEAN}) canvas.addDraggable(newNode) From 0326c4af174315e29eb973726a741786d9048112 Mon Sep 17 00:00:00 2001 From: facobackup Date: Mon, 28 Aug 2023 20:47:26 -0300 Subject: [PATCH 3/5] - Improving UI --- src/components/tabs/Tabs.svelte | 69 ++++++++++++++ src/core/PScript.svelte | 88 +++++++++++++++-- src/core/components/ActionBar.svelte | 15 ++- src/core/components/AttributeEditor.svelte | 15 ++- src/core/components/Functions.svelte | 9 ++ src/core/components/ManagementSideBar.svelte | 17 ++++ src/core/components/Nodes.svelte | 93 +++++++++++++----- src/core/components/ResourcesSideBar.svelte | 39 ++++++++ src/core/components/SideBar.svelte | 95 ------------------- src/core/components/Variables.svelte | 9 ++ src/core/instances/FunctionDraggable.ts | 1 - .../javascript/JavascriptScriptingView.svelte | 7 +- 12 files changed, 316 insertions(+), 141 deletions(-) create mode 100644 src/components/tabs/Tabs.svelte create mode 100644 src/core/components/Functions.svelte create mode 100644 src/core/components/ManagementSideBar.svelte create mode 100644 src/core/components/ResourcesSideBar.svelte delete mode 100644 src/core/components/SideBar.svelte create mode 100644 src/core/components/Variables.svelte 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/core/PScript.svelte b/src/core/PScript.svelte index 6fdaf23..56e48f0 100644 --- a/src/core/PScript.svelte +++ b/src/core/PScript.svelte @@ -3,11 +3,29 @@ import CanvasRenderEngine from "./CanvasRenderEngine" import CanvasStateManager from "./libs/CanvasStateManager"; import AbstractDraggable from "./instances/AbstractDraggable"; + import ActionBar from "./components/ActionBar.svelte"; + import SideBar from "./components/ResourcesSideBar.svelte"; + import Tabs from "../components/tabs/Tabs.svelte"; + import ResizableBar from "../components/resizable/ResizableBar.svelte"; + import PropertiesSideBar from "./components/ManagementSideBar.svelte"; export let scriptCanvas: CanvasRenderEngine - export let allNodes: { label: string, getInstance: (x: number, y: number, canvas: CanvasRenderEngine) => typeof AbstractDraggable, class: string }[] + export let allNodes: { + label: string, + getInstance: (x: number, y: number, canvas: CanvasRenderEngine) => typeof AbstractDraggable, + class: string + }[] + let tabs = [ + { + label: "Editor", + removable: false, + key: "EDITOR" + } + ] + let selectedTab = 0 let canvasElement + onMount(() => scriptCanvas.initialize(canvasElement)) onDestroy(() => { CanvasStateManager.destroyState(scriptCanvas.getId()) @@ -21,20 +39,42 @@ const x = e.clientX - rect.left - state.offsetX; const y = e.clientY - rect.top - state.offsetY; const instance = allNodes.find(n => n.class === nodeId)?.getInstance?.(x, y, scriptCanvas) - if(instance != null) { + if (instance != null) { scriptCanvas.addDraggable(instance) } } -
- 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 fce8e3a..ff681f8 100644 --- a/src/core/components/ActionBar.svelte +++ b/src/core/components/ActionBar.svelte @@ -36,8 +36,7 @@ } -
- +
+ + diff --git a/src/core/components/AttributeEditor.svelte b/src/core/components/AttributeEditor.svelte index df3bab2..5cf86d0 100644 --- a/src/core/components/AttributeEditor.svelte +++ b/src/core/components/AttributeEditor.svelte @@ -5,6 +5,8 @@ import CommentDraggable from "../instances/CommentDraggable"; import LocalizationEN from "../resources/LocalizationEN"; import ColorPicker from "../../components/color-picker/ColorPicker.svelte"; + import Input from "../../components/input/Input.svelte"; + import Icon from "../../components/icon/Icon.svelte"; export let node: AbstractNode | CommentDraggable export let updateCanvas: Function @@ -12,8 +14,8 @@ function handleNodeChange(value: any, attr: MutableObject) { node[attr.key] = value - const input = (node as AbstractNode).inputs.find(i => i.key === attr.key) - input.onChange?.(value) + // const input = (node as AbstractNode).inputs.find(i => i.key === attr.key) + // input.onChange?.(value) updateCanvas() } @@ -64,11 +66,16 @@ {/each} {/if} -
- + {:else} +
+ category + No node selected +
{/if} + + diff --git a/src/core/components/ManagementSideBar.svelte b/src/core/components/ManagementSideBar.svelte new file mode 100644 index 0000000..f855572 --- /dev/null +++ b/src/core/components/ManagementSideBar.svelte @@ -0,0 +1,17 @@ + + +
+
+
+ +
+
+
+ diff --git a/src/core/components/Nodes.svelte b/src/core/components/Nodes.svelte index 6030087..c97b81c 100644 --- a/src/core/components/Nodes.svelte +++ b/src/core/components/Nodes.svelte @@ -3,46 +3,89 @@ import Input from "../../components/input/Input.svelte"; import Icon from "../../components/icon/Icon.svelte"; - export let allNodes:{ label: string, class: string }[] = [] + export let allNodes: { label: string, class: string }[] = [] let inputValue = "" let nodes + let interval + $: nodes = !inputValue ? allNodes : allNodes.filter(i => i.label.toLowerCase().includes(inputValue.toLowerCase())) + + function onChange(e: InputEvent) { + clearInterval(interval) + const value = (e.target as HTMLInputElement).value + interval = setInterval(() => inputValue = value) + } -
-
- {#each nodes as d, i} -
e.dataTransfer.setData("text", d.class)} - > - drag_indicator - {d.label} -
- {/each} -
-
- inputValue = v} - placeholder={LocalizationEN.SEARCH} +
+ search + +
+
+ {#each nodes as d, i} +
e.dataTransfer.setData("text", d.class)} > - search - -
+ drag_indicator + {d.label} +
+ {/each}
diff --git a/src/core/components/ResourcesSideBar.svelte b/src/core/components/ResourcesSideBar.svelte new file mode 100644 index 0000000..cc1ef82 --- /dev/null +++ b/src/core/components/ResourcesSideBar.svelte @@ -0,0 +1,39 @@ + + +
+
+
+ +
+ +
+ scriptCanvas.clear()}/> +
+
+
diff --git a/src/core/components/SideBar.svelte b/src/core/components/SideBar.svelte deleted file mode 100644 index 3fdb864..0000000 --- a/src/core/components/SideBar.svelte +++ /dev/null @@ -1,95 +0,0 @@ - - -
-
- - {#if tab === 0} - - {:else if !!mainNode} - scriptCanvas.clear()}/> - {/if} -
- - -
-
- - diff --git a/src/core/components/Variables.svelte b/src/core/components/Variables.svelte new file mode 100644 index 0000000..759a611 --- /dev/null +++ b/src/core/components/Variables.svelte @@ -0,0 +1,9 @@ +
+ +
+ + diff --git a/src/core/instances/FunctionDraggable.ts b/src/core/instances/FunctionDraggable.ts index bebe93d..e9bf714 100644 --- a/src/core/instances/FunctionDraggable.ts +++ b/src/core/instances/FunctionDraggable.ts @@ -38,7 +38,6 @@ export default class FunctionDraggable extends AbstractDraggable implements IFun #drawCollapseButton() { const ctx = this.__canvas.__ctx - const coord = this.getTransformedCoordinates() const offset = AbstractDraggable.HEADER_HEIGHT * .1 const size = AbstractDraggable.HEADER_HEIGHT * .75 diff --git a/src/environment/javascript/JavascriptScriptingView.svelte b/src/environment/javascript/JavascriptScriptingView.svelte index 26c09fa..916ebeb 100644 --- a/src/environment/javascript/JavascriptScriptingView.svelte +++ b/src/environment/javascript/JavascriptScriptingView.svelte @@ -1,6 +1,6 @@ - - From 58ae996799b52c95ca7a337999aa32d25fa2af31 Mon Sep 17 00:00:00 2001 From: facobackup Date: Sun, 3 Sep 2023 11:08:13 -0300 Subject: [PATCH 4/5] - Implementing structure for variables - Moving state to store - Removing function node --- src/core/CanvasRenderEngine.ts | 86 ++--------- src/core/PScript.svelte | 14 +- src/core/components/ActionBar.svelte | 4 +- src/core/components/AttributeEditor.svelte | 2 +- src/core/components/DynamicNodes.svelte | 50 +++++++ src/core/components/ManagementSideBar.svelte | 17 --- src/core/components/Nodes.svelte | 1 - src/core/components/ResourcesSideBar.svelte | 10 +- src/core/components/Variables.svelte | 26 +++- src/core/instances/AbstractDraggable.ts | 27 ++-- src/core/instances/AbstractFunctionNode.ts | 12 ++ src/core/instances/AbstractInput.ts | 2 +- src/core/instances/AbstractNode.ts | 18 +-- src/core/instances/AbstractOutput.ts | 2 +- src/core/instances/AbstractStateful.ts | 4 +- src/core/instances/AbstractType.ts | 8 +- src/core/instances/CommentDraggable.ts | 5 +- src/core/instances/FunctionDraggable.ts | 63 -------- src/core/instances/Input.ts | 2 +- src/core/instances/Output.ts | 2 +- src/core/instances/PropertyType.ts | 4 +- src/core/instances/Variable.ts | 17 +++ src/core/instances/VariableGetterNode.ts | 42 ++++++ src/core/instances/VariableSetterNode.ts | 44 ++++++ src/core/libs/ActionHistory.ts | 2 +- src/core/libs/CanvasStateManager.ts | 58 -------- src/core/libs/CanvasStateStore.ts | 71 +++++++++ src/core/libs/SelectionStore.ts | 25 ---- src/core/libs/Serializer.ts | 3 - src/core/pscript.enum.ts | 9 +- src/core/pscript.g.ts | 58 +++++--- src/core/resources/GlobalStyles.ts | 15 ++ src/core/util/CanvasStateUtil.ts | 140 ++++++++++++++++++ src/core/util/IDraggableUtil.ts | 42 +++--- src/core/util/PScriptUtil.ts | 6 +- src/core/util/RendererUtil.ts | 58 ++++---- .../javascript/JavascriptScriptingView.svelte | 15 +- .../javascript/basic-functions/Add.ts | 13 +- .../javascript/basic-functions/Do.ts | 2 +- .../javascript/basic-types/BooleanVal.ts | 9 +- .../javascript/basic-types/NumberVal.ts | 9 +- .../javascript/javascript-nodes.ts | 12 -- src/environment/javascript/javascript.enum.ts | 10 +- test/serialize-state.test.ts | 7 +- 44 files changed, 600 insertions(+), 426 deletions(-) create mode 100644 src/core/components/DynamicNodes.svelte delete mode 100644 src/core/components/ManagementSideBar.svelte create mode 100644 src/core/instances/AbstractFunctionNode.ts delete mode 100644 src/core/instances/FunctionDraggable.ts create mode 100644 src/core/instances/Variable.ts create mode 100644 src/core/instances/VariableGetterNode.ts create mode 100644 src/core/instances/VariableSetterNode.ts delete mode 100644 src/core/libs/CanvasStateManager.ts create mode 100644 src/core/libs/CanvasStateStore.ts delete mode 100644 src/core/libs/SelectionStore.ts create mode 100644 src/core/resources/GlobalStyles.ts create mode 100644 src/core/util/CanvasStateUtil.ts diff --git a/src/core/CanvasRenderEngine.ts b/src/core/CanvasRenderEngine.ts index d0bc2a0..0107624 100644 --- a/src/core/CanvasRenderEngine.ts +++ b/src/core/CanvasRenderEngine.ts @@ -1,13 +1,9 @@ import RendererUtil from "./util/RendererUtil" -import AbstractNode from "./instances/AbstractNode" import type AbstractLink from "./instances/AbstractLink" -import CommentDraggable from "./instances/CommentDraggable" -import ActionHistory from "./libs/ActionHistory" import PScriptUtil from "./util/PScriptUtil"; -import CanvasStateManager from "./libs/CanvasStateManager"; -import AbstractDraggable from "./instances/AbstractDraggable"; import IDraggableUtil from "./util/IDraggableUtil"; -import SelectionStore from "./libs/SelectionStore"; +import CanvasStateStore from "./libs/CanvasStateStore"; +import GlobalStyles from "./resources/GlobalStyles"; export default class CanvasRenderEngine implements IRenderEngine { #id: string @@ -24,12 +20,12 @@ export default class CanvasRenderEngine implements IRenderEngine { } getState(): RendererState { - return this.#state ?? (this.#state = CanvasStateManager.getState(this.getId())) + return this.#state ?? (this.#state = CanvasStateStore.getDataById(this.getId())) } clearState() { this.#state = undefined - SelectionStore.updateStore({ + CanvasStateStore.updateStore({ selected: new Map(), lastSelection: undefined, focusedFunction: undefined @@ -61,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 } @@ -82,7 +78,7 @@ export default class CanvasRenderEngine implements IRenderEngine { } #loop() { - const STATE = this.#getState() + const STATE = this.getState() if (!STATE) return; if (STATE.needsUpdate) { @@ -105,77 +101,13 @@ export default class CanvasRenderEngine implements IRenderEngine { return this.#id } - #getState() { - return CanvasStateManager.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() - } - - addDraggable(node: IDraggable) { - // if (!noSerialization) { - // this.history.save([node], true) - // this.history.save([node]) - // } - const state = this.getState() - if (node instanceof CommentDraggable) { - 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) - // } - const focusedFunction = SelectionStore.getData().focusedFunction - for (let i = 0; i < toRemove.length; i++) { - const draggable = toRemove[i]; - SelectionStore.getSelectionMap().delete(draggable.id) - if(focusedFunction === draggable.id){ - SelectionStore.updateStore({focusedFunction: undefined}) - } - 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 56e48f0..49d0a9a 100644 --- a/src/core/PScript.svelte +++ b/src/core/PScript.svelte @@ -1,13 +1,13 @@ @@ -56,9 +54,7 @@ }} />
- +
{ canvas.stop() canvas.clearState() - CanvasStateManager.setState(canvas, Serializer.deserialize(canvas, e.target.result.toString())) + CanvasStateStore.updateStore({[canvas.getId()]: Serializer.deserialize(canvas, e.target.result.toString())}) canvas.start() }; } diff --git a/src/core/components/AttributeEditor.svelte b/src/core/components/AttributeEditor.svelte index 5cf86d0..003f5a6 100644 --- a/src/core/components/AttributeEditor.svelte +++ b/src/core/components/AttributeEditor.svelte @@ -8,7 +8,7 @@ import Input from "../../components/input/Input.svelte"; import Icon from "../../components/icon/Icon.svelte"; - export let node: AbstractNode | CommentDraggable + export let node: IDraggable export let updateCanvas: Function diff --git a/src/core/components/DynamicNodes.svelte b/src/core/components/DynamicNodes.svelte new file mode 100644 index 0000000..f85ca71 --- /dev/null +++ b/src/core/components/DynamicNodes.svelte @@ -0,0 +1,50 @@ + + +
+
+
+ +
+
+
+
+ +
+
+
+ diff --git a/src/core/components/ManagementSideBar.svelte b/src/core/components/ManagementSideBar.svelte deleted file mode 100644 index f855572..0000000 --- a/src/core/components/ManagementSideBar.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - -
-
-
- -
-
-
- diff --git a/src/core/components/Nodes.svelte b/src/core/components/Nodes.svelte index c97b81c..71b0534 100644 --- a/src/core/components/Nodes.svelte +++ b/src/core/components/Nodes.svelte @@ -1,6 +1,5 @@ diff --git a/src/core/components/Variables.svelte b/src/core/components/Variables.svelte index 759a611..0f4808c 100644 --- a/src/core/components/Variables.svelte +++ b/src/core/components/Variables.svelte @@ -1,9 +1,31 @@ -
+ + +
+ {#each variables as variable} + {variable.getName()} + {/each}
diff --git a/src/core/instances/AbstractDraggable.ts b/src/core/instances/AbstractDraggable.ts index 481e183..5cac6a6 100644 --- a/src/core/instances/AbstractDraggable.ts +++ b/src/core/instances/AbstractDraggable.ts @@ -1,15 +1,13 @@ import AbstractStateful from "./AbstractStateful"; import uuid from "uuidv4" import MathUtil from "../util/MathUtil"; +import GlobalStyles from "../resources/GlobalStyles"; export default abstract class AbstractDraggable extends AbstractStateful implements IDraggable { - static HEADER_HEIGHT = 25 - static SCALE_BUTTON_SIZE = 10 - id = uuid() isOnDrag = false width = 200 - height = AbstractDraggable.HEADER_HEIGHT + height = GlobalStyles.HEADER_HEIGHT x: number y: number label: string @@ -33,13 +31,13 @@ export default abstract class AbstractDraggable extends AbstractStateful + getState(){ + return this._state + } + + setState(newState: RendererState){ + this._state = newState + } +} diff --git a/src/core/instances/AbstractInput.ts b/src/core/instances/AbstractInput.ts index 78d4879..c64ac8f 100644 --- a/src/core/instances/AbstractInput.ts +++ b/src/core/instances/AbstractInput.ts @@ -7,7 +7,7 @@ export default abstract class AbstractInput extends AbstractStateful<{ disabled: boolean; visibleOnNode: boolean; hideLabel?: boolean; - colorRGBA?: [number, number, number, number]; + colorRGBA?: ColorRGBA; }> implements IInput { hideLabel: boolean = false; diff --git a/src/core/instances/AbstractNode.ts b/src/core/instances/AbstractNode.ts index a062edc..74d856b 100644 --- a/src/core/instances/AbstractNode.ts +++ b/src/core/instances/AbstractNode.ts @@ -5,17 +5,14 @@ import NodeType from "./NodeType"; import ExecutionOutput from "./ExecutionOutput"; import ExecutionInput from "./ExecutionInput"; import MathUtil from "../util/MathUtil"; -import SelectionStore from "../libs/SelectionStore"; +import GlobalStyles from "../resources/GlobalStyles"; export default abstract class AbstractNode extends AbstractDraggable implements INodeDraggable { - static IO_RADIUS = 4 - - /** * IO will query this map */ __properties = new Map() - #minHeight = AbstractDraggable.HEADER_HEIGHT + #minHeight = GlobalStyles.HEADER_HEIGHT outputs: IOutput[] = [] inputs: IInput[] = [] abstract nodeType: NodeType @@ -30,7 +27,7 @@ export default abstract class AbstractNode extends AbstractDraggable implements this.outputs.length, this.inputs.length ) + .5 - this.#minHeight = this.height = AbstractDraggable.HEADER_HEIGHT + q * (AbstractDraggable.HEADER_HEIGHT - 5) + this.#minHeight = this.height = GlobalStyles.HEADER_HEIGHT + q * (GlobalStyles.HEADER_HEIGHT - 5) } getProperty(key): T { @@ -47,7 +44,7 @@ export default abstract class AbstractNode extends AbstractDraggable implements checkAgainstIO(x: number, y: number, asInput?: boolean): T { - const R2 = AbstractNode.IO_RADIUS ** 2 + const R2 = GlobalStyles.IO_RADIUS ** 2 const data = asInput ? this.inputs : this.outputs @@ -59,11 +56,11 @@ export default abstract class AbstractNode extends AbstractDraggable implements let isValid = false const linePosition = IDraggableUtil.getIOPosition(i, this, !asInput) if (io instanceof ExecutionInput) { - const startX = linePosition.x + AbstractNode.IO_RADIUS * 3 + const startX = linePosition.x + GlobalStyles.IO_RADIUS * 3 const positions = AbstractNode.#getTrianglePoints(startX, linePosition.y) isValid = MathUtil.isPointInsideTriangle(x, y, positions) } else if (io instanceof ExecutionOutput) { - const positions = AbstractNode.#getTrianglePoints(linePosition.x - AbstractNode.IO_RADIUS, linePosition.y) + const positions = AbstractNode.#getTrianglePoints(linePosition.x - GlobalStyles.IO_RADIUS, linePosition.y) isValid = MathUtil.isPointInsideTriangle(x, y, positions) } else { isValid = MathUtil.isPointInsideCircle(x, y, linePosition.x, linePosition.y, R2) @@ -80,7 +77,8 @@ export default abstract class AbstractNode extends AbstractDraggable implements drawToCanvas() { const ctx = this.__canvas.__ctx - RendererUtil.drawDraggableBody(ctx, this, 3, SelectionStore.getSelectionMap().get(this.id) !== undefined, SelectionStore.getLastSelection() === this, this.__canvas.getState().rectColor) + const state = this.__canvas.getState() + RendererUtil.drawDraggableBody(ctx, this, 3, state.selected.get(this.id) !== undefined, state.lastSelection === this, GlobalStyles.rectColor) RendererUtil.drawDraggableHeader(ctx, this) for (let j = 0; j < this.outputs.length; j++) { diff --git a/src/core/instances/AbstractOutput.ts b/src/core/instances/AbstractOutput.ts index e8117d9..ceef449 100644 --- a/src/core/instances/AbstractOutput.ts +++ b/src/core/instances/AbstractOutput.ts @@ -6,7 +6,7 @@ export default abstract class AbstractOutput extends AbstractStateful<{ type: IType; disabled: boolean; hideLabel?: boolean; - colorRGBA?: [number, number, number, number]; + colorRGBA?: ColorRGBA; }> implements IOutput { getInitialProperties(): MutableObject | undefined { return {}; diff --git a/src/core/instances/AbstractStateful.ts b/src/core/instances/AbstractStateful.ts index aa2bf52..7c11fec 100644 --- a/src/core/instances/AbstractStateful.ts +++ b/src/core/instances/AbstractStateful.ts @@ -2,9 +2,9 @@ import AbstractSerializable from "./AbstractSerializable"; export default abstract class AbstractStateful extends AbstractSerializable implements IStateful { __properties: Map; - colorRGBA: [number, number, number, number] + colorRGBA: ColorRGBA - protected fromValue(colorRGBA: [number, number, number, number] ) { + protected fromValue(colorRGBA: ColorRGBA ) { this.colorRGBA = colorRGBA this.__properties = new Map() const properties = this.getInitialProperties() diff --git a/src/core/instances/AbstractType.ts b/src/core/instances/AbstractType.ts index add9efd..3c483cb 100644 --- a/src/core/instances/AbstractType.ts +++ b/src/core/instances/AbstractType.ts @@ -1,7 +1,8 @@ import AbstractSerializable from "./AbstractSerializable"; -export default class AbstractType extends AbstractSerializable<{type: string}> implements IType { +export default class AbstractType extends AbstractSerializable<{ type: string, color?: ColorRGBA }> implements IType { _type: string + _color: ColorRGBA getType(): string { return this._type; @@ -9,5 +10,10 @@ export default class AbstractType extends AbstractSerializable<{type: string}> i from(props) { this._type = props.type + this._color = props.color ?? [0, 0, 0, 0] + } + + getColor(): ColorRGBA { + return this._color; } } diff --git a/src/core/instances/CommentDraggable.ts b/src/core/instances/CommentDraggable.ts index a4cdbd0..ccc0f0d 100644 --- a/src/core/instances/CommentDraggable.ts +++ b/src/core/instances/CommentDraggable.ts @@ -1,7 +1,5 @@ -import type CanvasRenderEngine from "../CanvasRenderEngine" import RendererUtil from "../util/RendererUtil" import AbstractDraggable from "./AbstractDraggable" -import SelectionStore from "../libs/SelectionStore"; export default class CommentDraggable extends AbstractDraggable implements ICommentDraggable { @@ -18,7 +16,8 @@ export default class CommentDraggable extends AbstractDraggable implements IComm drawToCanvas() { const ctx = this.__canvas.__ctx - RendererUtil.drawDraggableBody(ctx, this, 3, SelectionStore.getSelectionMap().get(this.id) !== undefined, SelectionStore.getLastSelection() === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) + const state = this.__canvas.getState() + RendererUtil.drawDraggableBody(ctx, this, 3, state.selected.get(this.id) !== undefined, state.lastSelection === this, `rgba(${this.colorRGBA[0]}, ${this.colorRGBA[1]}, ${this.colorRGBA[2]}, .5)`) RendererUtil.drawDraggableHeader(ctx, this) this.drawScale() } diff --git a/src/core/instances/FunctionDraggable.ts b/src/core/instances/FunctionDraggable.ts deleted file mode 100644 index e9bf714..0000000 --- a/src/core/instances/FunctionDraggable.ts +++ /dev/null @@ -1,63 +0,0 @@ -import AbstractDraggable from "./AbstractDraggable"; -import CanvasRenderEngine from "../CanvasRenderEngine"; -import RendererUtil from "../util/RendererUtil"; -import MathUtil from "../util/MathUtil"; -import SelectionStore from "../libs/SelectionStore"; - -export default class FunctionDraggable extends AbstractDraggable implements IFunctionDraggable { - collapsed = false - #darkerColor: string; - - static of(props: AbstractDraggableProps) { - const instance = new FunctionDraggable() - instance.from(props) - return instance - } - - from(props: AbstractDraggableProps) { - super.from(props) - this.height = 200 - this.#darkerColor = `rgba(${this.colorRGBA[0] * .85},${this.colorRGBA[1] * .85},${this.colorRGBA[2] * .85},1)` - } - - drawToCanvas() { - const ctx = this.__canvas.__ctx - if (!this.collapsed) { - RendererUtil.drawDraggableBody( - ctx, - this, - 3, - SelectionStore.getFocusedFunction() === this.id || SelectionStore.getSelectionMap().get(this.id) !== undefined, - SelectionStore.getLastSelection() === this, `rgba(${[this.colorRGBA[0], this.colorRGBA[1], this.colorRGBA[2], .5]})`) - this.drawScale() - } - RendererUtil.drawDraggableHeader(ctx, this, this.collapsed ? 3 : undefined) - this.#drawCollapseButton() - } - - #drawCollapseButton() { - const ctx = this.__canvas.__ctx - - const coord = this.getTransformedCoordinates() - const offset = AbstractDraggable.HEADER_HEIGHT * .1 - const size = AbstractDraggable.HEADER_HEIGHT * .75 - const XI = coord.x + this.width - size - offset - const YI = coord.y + offset - - ctx.fillStyle = this.#darkerColor - RendererUtil.drawRoundedRect(ctx, XI, YI, size, size, 3) - } - - checkAgainstCollapse(x: number, y: number): boolean { - const coord = this.getTransformedCoordinates() - const offset = AbstractDraggable.HEADER_HEIGHT * .1 - const size = AbstractDraggable.HEADER_HEIGHT * .75 - const XI = coord.x + this.width - size - offset - const YI = coord.y + offset - return MathUtil.isPointInsideRect(x, y, XI, YI, size, size) - } - - getInitialProperties(): MutableObject | undefined { - return undefined; - } -} diff --git a/src/core/instances/Input.ts b/src/core/instances/Input.ts index ba61881..f4f860f 100644 --- a/src/core/instances/Input.ts +++ b/src/core/instances/Input.ts @@ -7,7 +7,7 @@ export default class Input extends AbstractInput { accept: IType[], disabled: boolean, visibleOnNode: boolean, - colorRGBA?: [number, number, number, number] + colorRGBA?: ColorRGBA }) { const instance = new Input() instance.from(props) diff --git a/src/core/instances/Output.ts b/src/core/instances/Output.ts index 645a10a..3e7e131 100644 --- a/src/core/instances/Output.ts +++ b/src/core/instances/Output.ts @@ -6,7 +6,7 @@ export default class Output extends AbstractOutput { label: string, type: IType, disabled: boolean - colorRGBA?: [number, number, number, number] + colorRGBA?: ColorRGBA }){ const instance = new Output() instance.from(props) diff --git a/src/core/instances/PropertyType.ts b/src/core/instances/PropertyType.ts index b5b660c..494e650 100644 --- a/src/core/instances/PropertyType.ts +++ b/src/core/instances/PropertyType.ts @@ -1,9 +1,9 @@ import AbstractType from "./AbstractType"; export default class PropertyType extends AbstractType{ - static of(type: string) { + static of(type: string, color: ColorRGBA) { const instance = new PropertyType() - instance.from({type}) + instance.from({type, color}) return instance } } diff --git a/src/core/instances/Variable.ts b/src/core/instances/Variable.ts new file mode 100644 index 0000000..97d3d58 --- /dev/null +++ b/src/core/instances/Variable.ts @@ -0,0 +1,17 @@ +export default class Variable implements IVariable{ + _name: string; + _type: IType; + + constructor(name: string, type: IType) { + this._name = name + this._type = type + } + + getName(): string { + return this._name + } + + getType(): IType { + return this._type; + } +} diff --git a/src/core/instances/VariableGetterNode.ts b/src/core/instances/VariableGetterNode.ts new file mode 100644 index 0000000..abd662c --- /dev/null +++ b/src/core/instances/VariableGetterNode.ts @@ -0,0 +1,42 @@ +import AbstractNode from "./AbstractNode"; +import Output from "./Output"; +import NodeType from "./NodeType"; +import {NodeTypes} from "../pscript.enum"; + +export default class VariableGetterNode extends AbstractNode implements IVariableNode{ + _variable: IVariable + nodeType = NodeType.of(NodeTypes.VAR); + + getVariable(){ + return this._variable + } + + from(props: VariableProps) { + super.from(props) + this._variable = props.variable + } + + + getInitialProperties(): MutableObject { + return {truthy: false}; + } + + static of(props: VariableProps) { + const instance = new VariableGetterNode() + instance._variable = props.variable + instance.from({ + ...props, + inputs: [], + outputs: [ + Output.of({ + key: "value", + label: "Value", + type: props.variable.getType(), + disabled: false, + colorRGBA: props.variable.getType().getColor() + }) + ] + }); + return instance + } +} diff --git a/src/core/instances/VariableSetterNode.ts b/src/core/instances/VariableSetterNode.ts new file mode 100644 index 0000000..cc222b2 --- /dev/null +++ b/src/core/instances/VariableSetterNode.ts @@ -0,0 +1,44 @@ +import AbstractNode from "./AbstractNode"; +import NodeType from "./NodeType"; +import {NodeTypes} from "../pscript.enum"; +import Input from "./Input"; + +export default class VariableSetterNode extends AbstractNode implements IVariableNode { + _variable: IVariable + nodeType = NodeType.of(NodeTypes.VAR); + + getVariable() { + return this._variable + } + + from(props: VariableProps) { + super.from(props) + this._variable = props.variable + } + + + getInitialProperties(): MutableObject { + return {truthy: false}; + } + + + static of(props: VariableProps) { + const instance = new VariableSetterNode() + instance._variable = props.variable + instance.from({ + ...props, + inputs: [ + Input.of({ + key: "value", + label: "Value", + accept: [props.variable.getType()], + colorRGBA: props.variable.getType().getColor(), + disabled: false, + visibleOnNode: false + }) + ], + outputs: [] + }); + return instance + } +} diff --git a/src/core/libs/ActionHistory.ts b/src/core/libs/ActionHistory.ts index 78f1ae9..1bcaf68 100644 --- a/src/core/libs/ActionHistory.ts +++ b/src/core/libs/ActionHistory.ts @@ -48,7 +48,7 @@ export default class ActionHistory { #apply(action: IAction) { const {toAdd, toRemove} = action - this.canvas.removeDraggable(toRemove, true) + // CanvasStateUtil.removeDraggable(this.canvas.getId(), toRemove) if (toAdd) for (let i = 0; i < toAdd.length; i++) { const current = toAdd[i] diff --git a/src/core/libs/CanvasStateManager.ts b/src/core/libs/CanvasStateManager.ts deleted file mode 100644 index b4c272b..0000000 --- a/src/core/libs/CanvasStateManager.ts +++ /dev/null @@ -1,58 +0,0 @@ -import DynamicMap from "./DynamicMap"; -import CanvasRenderEngine from "../CanvasRenderEngine"; - -export default class CanvasStateManager { - static #state = new DynamicMap>() - - static getState(id: string) { - return this.#state.get(id) - } - - static createState(id: string) { - const instance = new CanvasRenderEngine(id) - this.#state.set(id, { - offsetX: 0, - offsetY: 0, - getId: () => id, - links: [], - nodes: [], - functions: [], - comments: [], - needsUpdate: false, - getInstance: () => instance, - grid: 20, - scale: 1, - backgroundColor: "#292929", - rectColor: "#353535", - borderColor: "#6b6b6b", - defaultFont: "10px Roboto", - smallFont: "9px Roboto", - textColor: "#f0f0f0", - defaultTextSize: 1, - smallTextSize: 1, - firstSelectionColor: "white", - multiSelectionColor: "darkorange", - ioTextColor: "#e0e0e0", - tempLinkCoords: {x: 0, y: 0, startY: 0, startX: 0, color: "white"}, - drawTempLink: false, - executionIOColor: "white" - }) - return instance - } - - static destroyState(id: string) { - if (!this.#state.has(id)) - return - const state = this.#state.get(id) - state.getInstance().stop() - state.getInstance().__observer.disconnect() - - - this.#state.delete(id) - } - - static setState(canvas: CanvasRenderEngine, canvasRenderEngineRendererState: RendererState) { - this.#state.delete(canvas.getId()) - this.#state.set(canvas.getId(), canvasRenderEngineRendererState) - } -} diff --git a/src/core/libs/CanvasStateStore.ts b/src/core/libs/CanvasStateStore.ts new file mode 100644 index 0000000..de1d641 --- /dev/null +++ b/src/core/libs/CanvasStateStore.ts @@ -0,0 +1,71 @@ +import AbstractStore from "./AbstractStore" +import CanvasRenderEngine from "../CanvasRenderEngine"; + +export default class CanvasStateStore extends AbstractStore { + static silentlyUpdateProperty(instanceId: string, key: string, value: any) { + const state = this.getDataById(instanceId) + + if (state != null) { + state[key] = value + } + } + + static updateProperty(instanceId: string, key: string, value: any) { + const state = this.getDataById(instanceId) + if (state != null) { + state[key] = value + this.updateStore({[instanceId]: state}) + } + } + + static createState(id: string) { + const instance = new CanvasRenderEngine(id) + this.updateStore({ + [id]: { + offsetX: 0, + offsetY: 0, + getId: () => id, + links: [], + nodes: [], + functions: [], + comments: [], + needsUpdate: false, + getInstance: () => instance, + grid: 20, + scale: 1, + defaultTextSize: 1, + smallTextSize: 1, + tempLinkCoords: {x: 0, y: 0, startY: 0, startX: 0, color: "white"}, + drawTempLink: false, + selected: new Map(), + lastSelection: undefined, + variableNames: {} + } + }) + return instance + } + + static getDataById(id: string): RendererState | undefined { + return this.getData()[id] + } + + static triggerDelayedUpdate(instanceId: string) { + const state = this.getDataById(instanceId) + if (state != null) { + this.updateStore({[instanceId]: state}) + } + } + + static destroyState(id: string) { + const data = this.getData() + const current = data[id] as RendererState + if (current != null) { + current.getInstance().stop() + current.getInstance().__observer.disconnect() + delete data[id] + this.updateStore(data) + } + } + +} + diff --git a/src/core/libs/SelectionStore.ts b/src/core/libs/SelectionStore.ts deleted file mode 100644 index 0d071e0..0000000 --- a/src/core/libs/SelectionStore.ts +++ /dev/null @@ -1,25 +0,0 @@ -import AbstractStore from "./AbstractStore" -import FunctionDraggable from "../instances/FunctionDraggable"; - -export default class SelectionStore extends AbstractStore{ - constructor() { - super({ - selected: new Map(), - lastSelection: undefined, - focusedFunction: undefined - }) - } - - static getSelectionMap(): Map{ - return this.getData().selected - } - - static getLastSelection(): IDraggable{ - return this.getData().lastSelection - } - - static getFocusedFunction(): string { - return this.getData().focusedFunction - } -} - diff --git a/src/core/libs/Serializer.ts b/src/core/libs/Serializer.ts index a07bc18..a08f292 100644 --- a/src/core/libs/Serializer.ts +++ b/src/core/libs/Serializer.ts @@ -1,4 +1,3 @@ -import AbstractStateful from "../instances/AbstractStateful"; import CommentDraggable from "../instances/CommentDraggable" import PropertyType from "../instances/PropertyType"; import NodeType from "../instances/NodeType"; @@ -7,10 +6,8 @@ import Input from "../instances/Input"; import ExecutionLink from "../instances/ExecutionLink"; import ExecutionOutput from "../instances/ExecutionOutput"; import ExecutionInput from "../instances/ExecutionInput"; -import Bend from "../instances/Bend"; import AbstractSerializable from "../instances/AbstractSerializable"; import CanvasRenderEngine from "../CanvasRenderEngine"; -import AbstractNode from "../instances/AbstractNode"; import AbstractDraggable from "../instances/AbstractDraggable"; export default class Serializer { diff --git a/src/core/pscript.enum.ts b/src/core/pscript.enum.ts index 9a5af73..f436408 100644 --- a/src/core/pscript.enum.ts +++ b/src/core/pscript.enum.ts @@ -21,4 +21,11 @@ enum MaterialDataTypes { UNDEFINED = "-1" } -export {MaterialDataTypes} +enum NodeTypes { + FUNCTION = "func", + CONST = "const", + VAR = "var", + STRUCT = "struct" +} + +export {MaterialDataTypes, NodeTypes} diff --git a/src/core/pscript.g.ts b/src/core/pscript.g.ts index 29152ba..d6ae25f 100644 --- a/src/core/pscript.g.ts +++ b/src/core/pscript.g.ts @@ -1,13 +1,27 @@ +interface IFunctionNode { + +} + +type ColorRGBA = [number, number, number, number] +interface IVariableNode { + _variable: IVariable; + getVariable: () => IVariable +} + interface ISerializable { from(props: T) } +interface VariableProps extends NodeProps { + variable: IVariable +} + type NodeProps = { canvas: IRenderEngine; x: number; y: number; label: string; - colorRGBA: [number, number, number, number]; + colorRGBA: ColorRGBA; outputs?: IOutput[]; inputs?: IInput[]; } @@ -17,7 +31,7 @@ type AbstractDraggableProps = { x: number; y: number; label: string; - colorRGBA: [number, number, number, number]; + colorRGBA: ColorRGBA; } interface IRenderEngine { @@ -28,11 +42,11 @@ interface IRenderEngine { getState(): RendererState; } -interface IStateful extends ISerializable{ +interface IStateful extends ISerializable { __properties: Map; setProperty: (key: string, value: any) => void; getProperty: (key: string) => T; - colorRGBA: [number, number, number, number]; + colorRGBA: ColorRGBA; } interface IDraggable extends IStateful { @@ -71,7 +85,7 @@ interface IBend { y: number } -interface ILink extends ISerializable{ +interface ILink extends ISerializable { input: IInput, output: IOutput, targetNode: INodeDraggable, @@ -85,7 +99,9 @@ interface IAction { } interface IType { - getType: () => string + getType(): string + + getColor(): ColorRGBA } @@ -108,13 +124,25 @@ interface IInput extends IStateful { acceptsType(type: IType): boolean; } +interface IVariable { + _name: string; + _type: IType; + + getName(): string -interface RendererState { + getType(): IType +} + +/** + * Should act like a function scope + */ +type RendererState = { getId: GenericNonVoidFunction, links: ILink[], nodes: INodeDraggable[], functions: IFunctionDraggable[], comments: ICommentDraggable[], + variables: IVariable[], needsUpdate: boolean, getInstance: () => T, @@ -122,17 +150,8 @@ interface RendererState { offsetY: number, grid: number, scale: number, - backgroundColor: string, - rectColor: string, - borderColor: string, defaultTextSize: number, smallTextSize: number, - defaultFont: string, - smallFont: string, - textColor: string, - firstSelectionColor: string, - multiSelectionColor: string, - ioTextColor: string, tempLinkCoords: { x: number, y: number, @@ -140,7 +159,10 @@ interface RendererState { startY: number, color: string }, - drawTempLink: boolean - executionIOColor: string + drawTempLink: boolean, + + selected: Map, + lastSelection: IDraggable, + variableNames: { [key: string]: boolean } } diff --git a/src/core/resources/GlobalStyles.ts b/src/core/resources/GlobalStyles.ts new file mode 100644 index 0000000..0097a28 --- /dev/null +++ b/src/core/resources/GlobalStyles.ts @@ -0,0 +1,15 @@ +export default class GlobalStyles { + static rectColor = "#353535"; + static borderColor = "#6b6b6b"; + static defaultFont = "10px Roboto"; + static smallFont = "9px Roboto"; + static textColor = "#f0f0f0"; + static firstSelectionColor = "white"; + static multiSelectionColor = "darkorange"; + static ioTextColor = "#e0e0e0"; + static executionIOColor = "white"; + + static IO_RADIUS = 4 + static HEADER_HEIGHT = 25 + static SCALE_BUTTON_SIZE = 10 +} diff --git a/src/core/util/CanvasStateUtil.ts b/src/core/util/CanvasStateUtil.ts new file mode 100644 index 0000000..b98ee56 --- /dev/null +++ b/src/core/util/CanvasStateUtil.ts @@ -0,0 +1,140 @@ +import AbstractLink from "../instances/AbstractLink"; +import CanvasStateStore from "../libs/CanvasStateStore"; +import AbstractNode from "../instances/AbstractNode"; +import CommentDraggable from "../instances/CommentDraggable"; +import VariableGetterNode from "../instances/VariableGetterNode"; +import VariableSetterNode from "../instances/VariableSetterNode"; +import Variable from "../instances/Variable"; + +export default class CanvasStateUtil { + static addLink(id: string, link: AbstractLink, noUpdate?: boolean) { + const state = CanvasStateStore.getDataById(id) + const foundExisting = state.links.findIndex(l => l.input === link.input) + if (foundExisting > -1) + state.links[foundExisting] = link + else + state.links.push(link) + if (!noUpdate) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + + static removeLink(id: string, index: number) { + const state = CanvasStateStore.getDataById(id) + state.links.splice(index, 1) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + + + static addDraggable(id: string, node: IDraggable) { + const state = CanvasStateStore.getDataById(id) + if (node instanceof CommentDraggable) { + state.comments.push(node) + } else { + state.nodes.push(node) + } + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + + static removeDraggable(id: string, toRemove: INodeDraggable[]) { + const state = CanvasStateStore.getDataById(id) + const focusedFunction = CanvasStateStore.getData().focusedFunction + for (let i = 0; i < toRemove.length; i++) { + const draggable = toRemove[i]; + state.selected.delete(draggable.id) + if (focusedFunction === draggable.id) { + CanvasStateStore.updateProperty(id, "focusedFunction", undefined) + } + if (draggable instanceof AbstractNode) { + const index = state.nodes.indexOf(draggable) + if (index > -1) { + state.nodes.splice(index, 1) + const toRemove = state.links.filter(l => l.sourceNode === draggable || l.targetNode === draggable) + toRemove.forEach(l => { + CanvasStateUtil.removeLink(id, state.links.indexOf(l)) + }) + } + } else { + const index = state.comments.indexOf(draggable) + state.comments.splice(index, 1) + } + } + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + + static addVariable(id: string, type: IType, variableName: string): boolean { + const state = CanvasStateStore.getDataById(id) + const correctName = variableName.toLowerCase() + if (state.variableNames[correctName]) + return false + state.variableNames[correctName] = true + state.variables.push(new Variable(correctName, type)) + CanvasStateStore.triggerDelayedUpdate(id) + return true + } + + static removeVariable(id: string, variableName: string) { + const state = CanvasStateStore.getDataById(id) + const variableIndex = state.variables.findIndex(v => v.getName() === variableName) + + if (variableIndex > -1) { + const nodesWithVariable = state.nodes.filter(n => { + return (n instanceof VariableGetterNode || n instanceof VariableSetterNode) && n.getVariable().getName() === variableName + }) + this.removeDraggable(id, nodesWithVariable) + const variablesRemoved = state.variables.splice(variableIndex, 1) + + delete state.variableNames[variablesRemoved[0].getName()] + CanvasStateStore.triggerDelayedUpdate(id) + } + } + + static addVariableGetter(id: string, x: number, y: number, variableName: string) { + const state = CanvasStateStore.getDataById(id) + const name = variableName.toLowerCase() + const variable = state.variables.find(v => v.getName() === name) + if (variable != null) { + const newNode = VariableGetterNode.of({ + variable, + canvas: state.getInstance(), + x, + y, + label: variableName + " (GETTER)", + colorRGBA: [0, 255, 0, 1] + }) + state.nodes.push(newNode) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + } + + static addVariableSetter(id: string, x: number, y: number, variableName: string) { + const state = CanvasStateStore.getDataById(id) + const name = variableName.toLowerCase() + const variable = state.variables.find(v => v.getName() === name) + if (variable != null) { + const newNode = VariableSetterNode.of({ + variable, + canvas: state.getInstance(), + x, + y, + label: variableName + " (SETTER)", + colorRGBA: [255, 0, 0, 1] + }) + state.nodes.push(newNode) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + } + + static renameVariable(){ + // TODO + } + + static changeVariableType(){ + // TODO + } +} diff --git a/src/core/util/IDraggableUtil.ts b/src/core/util/IDraggableUtil.ts index 7310df8..0f88b91 100644 --- a/src/core/util/IDraggableUtil.ts +++ b/src/core/util/IDraggableUtil.ts @@ -4,8 +4,9 @@ import RendererUtil from "./RendererUtil"; import CommentDraggable from "../instances/CommentDraggable"; import CanvasRenderEngine from "../CanvasRenderEngine"; import PScriptUtil from "./PScriptUtil"; -import FunctionDraggable from "../instances/FunctionDraggable"; -import SelectionStore from "../libs/SelectionStore"; +import CanvasStateStore from "../libs/CanvasStateStore"; +import CanvasStateUtil from "./CanvasStateUtil"; +import GlobalStyles from "../resources/GlobalStyles"; export default class IDraggableUtil { @@ -26,10 +27,10 @@ export default class IDraggableUtil { const coord = node.getTransformedCoordinates() const xN = coord.x, yN = coord.y, w = node.width - const H = AbstractDraggable.HEADER_HEIGHT - 5 + const H = GlobalStyles.HEADER_HEIGHT - 5 const Y = yN + H * (index + 2) const xIO = !asOutput ? xN : xN + w - const yIO = Y - AbstractNode.IO_RADIUS + const yIO = Y - GlobalStyles.IO_RADIUS return {x: xIO, y: yIO, height: H, width: w, rowY: Y} @@ -86,12 +87,13 @@ export default class IDraggableUtil { const X = (event.clientX - BBox.x) / state.scale const Y = (event.clientY - BBox.y) / state.scale + const selectionMap = canvasAPI.getState().selected if (!event.ctrlKey) { - SelectionStore.updateStore({lastSelection: undefined}) - SelectionStore.getSelectionMap().clear() + CanvasStateStore.updateStore({lastSelection: undefined}) + selectionMap.clear() } else { - SelectionStore.getSelectionMap().forEach(node => { + selectionMap.forEach(node => { nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) }) } @@ -104,19 +106,11 @@ export default class IDraggableUtil { const onHeader = node.checkHeaderClick(X, Y) if (!onHeader && !onBody) continue - const isFunctionNode = node instanceof FunctionDraggable - if(isFunctionNode){ - SelectionStore.updateStore({focusedFunction: node.id}) - } - SelectionStore.getSelectionMap().set(node.id, node) - SelectionStore.updateStore({lastSelection: node}) + selectionMap.set(node.id, node) + CanvasStateStore.updateProperty(canvasAPI.getId(), "lastSelection", node) if (onHeader) { - if (isFunctionNode && node.checkAgainstCollapse(X, Y)) { - node.collapsed = !node.collapsed - } else { - nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) - node.isOnDrag = true - } + nodesOnDrag.push(IDraggableUtil.drag(event, node, parentBBox, true)) + node.isOnDrag = true } else if (!event.ctrlKey) { const isOnScale = node.checkAgainstScale(X, Y) if (isOnScale) { @@ -155,7 +149,8 @@ export default class IDraggableUtil { } } } - SelectionStore.updateStore({selected: SelectionStore.getSelectionMap()}) + + CanvasStateStore.triggerDelayedUpdate(canvasAPI.getId()) if (nodesOnDrag.length > 0 || IO.node !== undefined) canvasAPI.__ctx.canvas.style.cursor = "grabbing" canvasAPI.clear() @@ -185,7 +180,7 @@ export default class IDraggableUtil { IO.node = found.sourceNode IO.output = found.output - canvasAPI.removeLink(linkIndex) + CanvasStateUtil.removeLink(canvasAPI.getId(), linkIndex) const state = canvasAPI.getState() state.tempLinkCoords.startX = originalPosition.x state.tempLinkCoords.startY = originalPosition.y @@ -205,8 +200,9 @@ export default class IDraggableUtil { } } - SelectionStore.getSelectionMap().set(comment.id, comment) - SelectionStore.updateStore({selected: SelectionStore.getSelectionMap(), lastSelection: comment}) + canvasAPI.getState().selected.set(comment.id, comment) + CanvasStateStore.silentlyUpdateProperty(canvasAPI.getId(), "lastSelection", comment) + CanvasStateStore.triggerDelayedUpdate(canvasAPI.getId()) } static #checkOffset(ev1: MouseEvent, ev2: { x: number, y: number }): boolean { diff --git a/src/core/util/PScriptUtil.ts b/src/core/util/PScriptUtil.ts index c529f33..c62587f 100644 --- a/src/core/util/PScriptUtil.ts +++ b/src/core/util/PScriptUtil.ts @@ -4,7 +4,7 @@ import {MaterialDataTypes} from "../pscript.enum"; import LocalizationEN from "../resources/LocalizationEN"; import ToastNotificationSystem from "../../components/alert/ToastNotificationSystem"; import Link from "../instances/Link"; -import SelectionStore from "../libs/SelectionStore"; +import CanvasStateUtil from "./CanvasStateUtil"; export default class PScriptUtil { /** @@ -17,7 +17,7 @@ export default class PScriptUtil { biggestX: number | undefined, biggestY: number | undefined - SelectionStore.getSelectionMap() + canvasAPI.getState().selected .forEach(n => { if (!smallestX || n.x < smallestX) smallestX = n.x @@ -71,7 +71,7 @@ export default class PScriptUtil { const targetIO = node.checkAgainstIO(X, Y, true) if (targetIO?.acceptsType?.(sourceIO.type)) { const newLink = Link.of(node, sourceNode, targetIO, sourceIO) - canvasAPI.addLink(newLink) + CanvasStateUtil.addLink(canvasAPI.getId(), newLink) } else if (targetIO) { ToastNotificationSystem.getInstance().error(LocalizationEN.INVALID_TYPE) } diff --git a/src/core/util/RendererUtil.ts b/src/core/util/RendererUtil.ts index 0706a25..fb5735c 100644 --- a/src/core/util/RendererUtil.ts +++ b/src/core/util/RendererUtil.ts @@ -5,6 +5,7 @@ import AbstractDraggable from "../instances/AbstractDraggable"; import CanvasRenderEngine from "../CanvasRenderEngine"; import ExecutionInput from "../instances/ExecutionInput"; import ExecutionOutput from "../instances/ExecutionOutput"; +import GlobalStyles from "../resources/GlobalStyles"; export default class RendererUtil { @@ -35,25 +36,25 @@ export default class RendererUtil { let label = attribute.label if (attribute instanceof ExecutionInput) { - ctx.strokeStyle = state.borderColor - ctx.fillStyle = state.executionIOColor + ctx.strokeStyle = GlobalStyles.borderColor + ctx.fillStyle = GlobalStyles.executionIOColor ctx.lineWidth = .5 - X = X + AbstractNode.IO_RADIUS * 2 - this.#drawTriangleIOExecution(linePosition.y, X + AbstractNode.IO_RADIUS, ctx); + X = X + GlobalStyles.IO_RADIUS * 2 + this.#drawTriangleIOExecution(linePosition.y, X + GlobalStyles.IO_RADIUS, ctx); } else { - ctx.font = state.smallFont - ctx.strokeStyle = state.borderColor + ctx.font = GlobalStyles.smallFont + ctx.strokeStyle = GlobalStyles.borderColor ctx.beginPath() ctx.fillStyle = IDraggableUtil.getIOColor(attribute, attribute.disabled) ctx.lineWidth = .5 - ctx.arc(X, YA, AbstractNode.IO_RADIUS, 0, Math.PI * 2) + ctx.arc(X, YA, GlobalStyles.IO_RADIUS, 0, Math.PI * 2) ctx.fill() ctx.stroke() } if (!attribute.hideLabel) { - X -= AbstractNode.IO_RADIUS - ctx.fillStyle = state.ioTextColor + X -= GlobalStyles.IO_RADIUS + ctx.fillStyle = GlobalStyles.ioTextColor let X_P = X + this.#LABEL_OFFSET ctx.fillText(label, X_P, Y) ctx.closePath() @@ -71,40 +72,39 @@ export default class RendererUtil { const labelSize = state.smallTextSize * label.length + this.#LABEL_OFFSET if (attribute instanceof ExecutionOutput) { - ctx.strokeStyle = state.borderColor - ctx.fillStyle = state.executionIOColor + ctx.strokeStyle = GlobalStyles.borderColor + ctx.fillStyle = GlobalStyles.executionIOColor ctx.lineWidth = .5 - this.#drawTriangleIOExecution(linePosition.y, linePosition.x - AbstractNode.IO_RADIUS, ctx); + this.#drawTriangleIOExecution(linePosition.y, linePosition.x - GlobalStyles.IO_RADIUS, ctx); } else { - ctx.font = state.smallFont - ctx.strokeStyle = state.borderColor + ctx.font = GlobalStyles.smallFont + ctx.strokeStyle = GlobalStyles.borderColor ctx.beginPath() ctx.fillStyle = IDraggableUtil.getIOColor(attribute, false) ctx.lineWidth = .5 - ctx.arc(X, YA, AbstractNode.IO_RADIUS, 0, Math.PI * 2) + ctx.arc(X, YA, GlobalStyles.IO_RADIUS, 0, Math.PI * 2) ctx.fill() ctx.stroke() } if (!attribute.hideLabel) { - X -= AbstractNode.IO_RADIUS * 2 - ctx.fillStyle = state.ioTextColor + X -= GlobalStyles.IO_RADIUS * 2 + ctx.fillStyle = GlobalStyles.ioTextColor ctx.fillText(label, X - labelSize + this.#LABEL_OFFSET, Y) ctx.closePath() } } static drawDraggablePosition(ctx: CanvasRenderingContext2D, draggable: IDraggable) { - const state = draggable.__canvas.getState() - ctx.font = state.defaultFont + ctx.font = GlobalStyles.defaultFont const coord = draggable.getTransformedCoordinates() const TEXT = `X ${coord.x} Y ${coord.y} W ${draggable.width} H ${draggable.height}` let Y = coord.y - 10 if (Y < 0) Y = coord.y + draggable.height + 10 ctx.beginPath() - ctx.fillStyle = state.textColor + ctx.fillStyle = GlobalStyles.textColor ctx.fillText(TEXT, coord.x, Y) } @@ -114,8 +114,8 @@ export default class RendererUtil { const coordS = S.getTransformedCoordinates() const coordT = T.getTransformedCoordinates() const x1 = coordS.x + S.width, x2 = coordT.x, - y1 = coordS.y + AbstractDraggable.HEADER_HEIGHT + AbstractNode.IO_RADIUS * 3 + S.outputs.indexOf(link.output) * 20, - y2 = coordT.y + AbstractDraggable.HEADER_HEIGHT + AbstractNode.IO_RADIUS * 3 + T.inputs.indexOf(link.input) * 20 + y1 = coordS.y + GlobalStyles.HEADER_HEIGHT + GlobalStyles.IO_RADIUS * 3 + S.outputs.indexOf(link.output) * 20, + y2 = coordT.y + GlobalStyles.HEADER_HEIGHT + GlobalStyles.IO_RADIUS * 3 + T.inputs.indexOf(link.input) * 20 const isSomeoneDisabled = link.output.disabled || link.input.disabled ctx.strokeStyle = IDraggableUtil.getIOColor(link.output, isSomeoneDisabled) @@ -132,22 +132,21 @@ export default class RendererUtil { } static drawDraggableHeader(ctx: CanvasRenderingContext2D, node: IDraggable, borderRadius?: number) { - const state = node.__canvas.getState() const name = node.label const color = node.colorRGBA const coord = node.getTransformedCoordinates() ctx.beginPath() ctx.fillStyle = `rgb(${color})` - ctx.strokeStyle = node.__canvas.getState().borderColor + ctx.strokeStyle = GlobalStyles.borderColor ctx.lineWidth = .5 ctx.roundRect(coord.x, coord.y, node.width, RendererUtil.#HEADER_LABEL_HEIGHT, borderRadius ?? RendererUtil.#BORDER_RADIUS) ctx.stroke() ctx.fill() - ctx.font = state.defaultFont + ctx.font = GlobalStyles.defaultFont - ctx.fillStyle = state.textColor - ctx.fillText(name, coord.x + AbstractNode.IO_RADIUS, coord.y + RendererUtil.#OFFSET_Y_TITLE) + ctx.fillStyle = GlobalStyles.textColor + ctx.fillText(name, coord.x + GlobalStyles.IO_RADIUS, coord.y + RendererUtil.#OFFSET_Y_TITLE) ctx.closePath() } @@ -166,13 +165,12 @@ export default class RendererUtil { static drawDraggableBody(ctx: CanvasRenderingContext2D, node: AbstractDraggable, r: number, isSelected: boolean, isFirstSelected: boolean, color: string) { const coord = node.getTransformedCoordinates() - const state = node.__canvas.getState() const w = node.width, h = node.height, x = coord.x, y = coord.y if (w < 2 * r) r = w / 2 if (h < 2 * r) r = h / 2 - let outlineColor = state.borderColor + let outlineColor = GlobalStyles.borderColor if (isSelected) { - outlineColor = isFirstSelected ? state.firstSelectionColor : state.multiSelectionColor + outlineColor = isFirstSelected ? GlobalStyles.firstSelectionColor : GlobalStyles.multiSelectionColor } ctx.fillStyle = color ctx.lineWidth = isSelected ? 2 : 1 diff --git a/src/environment/javascript/JavascriptScriptingView.svelte b/src/environment/javascript/JavascriptScriptingView.svelte index 916ebeb..cabdaa1 100644 --- a/src/environment/javascript/JavascriptScriptingView.svelte +++ b/src/environment/javascript/JavascriptScriptingView.svelte @@ -1,18 +1,21 @@ +> + + diff --git a/src/environment/javascript/basic-functions/Add.ts b/src/environment/javascript/basic-functions/Add.ts index 232933e..6e88ab2 100644 --- a/src/environment/javascript/basic-functions/Add.ts +++ b/src/environment/javascript/basic-functions/Add.ts @@ -1,5 +1,5 @@ import AbstractNode from "../../../core/instances/AbstractNode"; -import Types, {Colors, NodeTypes} from "../javascript.enum"; +import Types, {Colors} from "../javascript.enum"; import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; @@ -7,6 +7,7 @@ import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; import ExecutionInput from "../../../core/instances/ExecutionInput"; import ExecutionOutput from "../../../core/instances/ExecutionOutput"; +import {NodeTypes} from "../../../core/pscript.enum"; export default class Add extends AbstractNode { nodeType = NodeType.of(NodeTypes.FUNCTION); @@ -24,9 +25,7 @@ export default class Add extends AbstractNode { Input.of({ key: "a", label: "A", - accept: [ - PropertyType.of(Types.NUMBER) - ], + accept: [PropertyType.of(Types.NUMBER, Colors.NUMBER)], disabled: false, visibleOnNode: true, colorRGBA: Colors.NUMBER @@ -34,9 +33,7 @@ export default class Add extends AbstractNode { Input.of({ key: "b", label: "B", - accept: [ - PropertyType.of(Types.NUMBER) - ], + accept: [PropertyType.of(Types.NUMBER, Colors.NUMBER)], disabled: false, visibleOnNode: true, colorRGBA: Colors.NUMBER @@ -47,7 +44,7 @@ export default class Add extends AbstractNode { Output.of({ key: "sum", label: "Sum", - type: PropertyType.of(Types.NUMBER), + type: PropertyType.of(Types.NUMBER, Colors.NUMBER), disabled: false, colorRGBA: Colors.NUMBER }) diff --git a/src/environment/javascript/basic-functions/Do.ts b/src/environment/javascript/basic-functions/Do.ts index 6aa1ef7..1bcad68 100644 --- a/src/environment/javascript/basic-functions/Do.ts +++ b/src/environment/javascript/basic-functions/Do.ts @@ -1,7 +1,7 @@ import AbstractNode from "../../../core/instances/AbstractNode"; -import {NodeTypes} from "../javascript.enum"; import NodeType from "../../../core/instances/NodeType"; import ExecutionOutput from "../../../core/instances/ExecutionOutput"; +import {NodeTypes} from "../../../core/pscript.enum"; export default class Do extends AbstractNode { nodeType = NodeType.of(NodeTypes.FUNCTION); diff --git a/src/environment/javascript/basic-types/BooleanVal.ts b/src/environment/javascript/basic-types/BooleanVal.ts index 9ef8039..1f857d5 100644 --- a/src/environment/javascript/basic-types/BooleanVal.ts +++ b/src/environment/javascript/basic-types/BooleanVal.ts @@ -1,11 +1,10 @@ import AbstractNode from "../../../core/instances/AbstractNode"; -import Types, {Colors, NodeTypes} from "../javascript.enum"; +import Types, {Colors} from "../javascript.enum"; import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; -import ExecutionOutput from "../../../core/instances/ExecutionOutput"; -import ExecutionInput from "../../../core/instances/ExecutionInput"; +import {NodeTypes} from "../../../core/pscript.enum"; export default class BooleanVal extends AbstractNode { @@ -20,7 +19,6 @@ export default class BooleanVal extends AbstractNode { instance.from({ ...props, inputs: [ - ExecutionInput.of("run", "Continue"), Input.of({ key: "truthy", label: "Truthy", @@ -30,11 +28,10 @@ export default class BooleanVal extends AbstractNode { }) ], outputs: [ - ExecutionOutput.of("run", "Continue"), Output.of({ key: "truthy", label: "isTruthy", - type: PropertyType.of(Types.BOOLEAN), + type: PropertyType.of(Types.BOOLEAN, Colors.BOOLEAN), disabled: false, colorRGBA: Colors.BOOLEAN }) diff --git a/src/environment/javascript/basic-types/NumberVal.ts b/src/environment/javascript/basic-types/NumberVal.ts index 583c668..b5daafd 100644 --- a/src/environment/javascript/basic-types/NumberVal.ts +++ b/src/environment/javascript/basic-types/NumberVal.ts @@ -1,11 +1,10 @@ import AbstractNode from "../../../core/instances/AbstractNode"; -import Types, {Colors, NodeTypes} from "../javascript.enum"; +import Types, {Colors,} from "../javascript.enum"; import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; -import ExecutionInput from "../../../core/instances/ExecutionInput"; -import ExecutionOutput from "../../../core/instances/ExecutionOutput"; +import {NodeTypes} from "../../../core/pscript.enum"; export default class NumberVal extends AbstractNode { nodeType = NodeType.of(NodeTypes.VAR); @@ -19,7 +18,6 @@ export default class NumberVal extends AbstractNode { instance.from({ ...props, inputs: [ - ExecutionInput.of("run", "Continue"), Input.of({ key: "value", label: "Value", @@ -29,11 +27,10 @@ export default class NumberVal extends AbstractNode { }) ], outputs: [ - ExecutionOutput.of("run", "Continue"), Output.of({ key: "value", label: "Value", - type: PropertyType.of(Types.NUMBER), + type: PropertyType.of(Types.NUMBER, Colors.NUMBER), disabled: false, colorRGBA: Colors.NUMBER }) diff --git a/src/environment/javascript/javascript-nodes.ts b/src/environment/javascript/javascript-nodes.ts index 1ad8cc1..e8d9a0a 100644 --- a/src/environment/javascript/javascript-nodes.ts +++ b/src/environment/javascript/javascript-nodes.ts @@ -4,7 +4,6 @@ import BooleanVal from "./basic-types/BooleanVal"; import NumberVal from "./basic-types/NumberVal"; import {Colors} from "./javascript.enum"; import Do from "./basic-functions/Do"; -import FunctionDraggable from "../../core/instances/FunctionDraggable"; export default [ { @@ -29,17 +28,6 @@ export default [ colorRGBA: Colors.COMMENT }) }, - { - label: "Function", - class: "FunctionDraggable", - getInstance: (x, y, canvas) => FunctionDraggable.of({ - canvas, - x, - y, - label: "New function", - colorRGBA: Colors.FUNCTION - }) - }, { label: "Boolean", diff --git a/src/environment/javascript/javascript.enum.ts b/src/environment/javascript/javascript.enum.ts index ea91ebb..f778dd4 100644 --- a/src/environment/javascript/javascript.enum.ts +++ b/src/environment/javascript/javascript.enum.ts @@ -3,16 +3,10 @@ enum Types { BOOLEAN = "boolean" } -enum NodeTypes { - FUNCTION = "func", - CONST = "const", - VAR = "var", - STRUCT = "struct" -} export default Types -const Colors: { [key: string]: [number, number, number, number] } = Object.freeze({ +const Colors: { [key: string]: ColorRGBA } = Object.freeze({ NUMBER: [59, 171, 28, 1], BOOLEAN: [90, 34, 139, 1], FUNCTION: [240, 153, 60, 1], @@ -20,6 +14,6 @@ const Colors: { [key: string]: [number, number, number, number] } = Object.freez START: [255, 0, 0, 1] }) -export {Colors, NodeTypes} +export {Colors} diff --git a/test/serialize-state.test.ts b/test/serialize-state.test.ts index 1c09741..342eeea 100644 --- a/test/serialize-state.test.ts +++ b/test/serialize-state.test.ts @@ -2,13 +2,14 @@ import {expect, test} from '@jest/globals'; import BooleanVal from "../src/environment/javascript/basic-types/BooleanVal"; import {Colors} from "../src/environment/javascript/javascript.enum"; import Serializer from "../src/core/libs/Serializer"; -import CanvasStateManager from "../src/core/libs/CanvasStateManager"; +import CanvasStateStore from "../src/core/libs/CanvasStateStore"; +import CanvasStateUtil from "../src/core/util/CanvasStateUtil"; test('Serialized node is valid', () => { Serializer.addTypes(BooleanVal) - const canvas = CanvasStateManager.createState("TEST") + const canvas = CanvasStateStore.createState("TEST") const newNode = BooleanVal.of({canvas, x: 0, y: 0, label: "Boolean", colorRGBA: Colors.BOOLEAN}) - canvas.addDraggable(newNode) + CanvasStateUtil.addDraggable(canvas.getId(), newNode) const serializedState = Serializer.serialize(canvas.getState()) const deserializedState = Serializer.deserialize(canvas, serializedState) From 63b5718274d444111c53952f55edf1934709251b Mon Sep 17 00:00:00 2001 From: facobackup Date: Sun, 3 Sep 2023 14:50:07 -0300 Subject: [PATCH 5/5] - Implementing addition/removal of variables - Implementing renaming/type change of variables --- src/components/tooltip/ToolTipService.ts | 37 +++-- src/core/PScript.svelte | 36 +++-- src/core/components/AttributeEditor.svelte | 2 - src/core/components/DynamicNodes.svelte | 25 ++- src/core/components/Nodes.svelte | 3 +- src/core/components/Variables.svelte | 150 ++++++++++++++++-- src/core/instances/AbstractType.ts | 14 +- src/core/instances/PropertyType.ts | 4 +- src/core/instances/VariableSetterNode.ts | 17 +- src/core/libs/CanvasStateStore.ts | 2 + src/core/pscript.g.ts | 3 +- src/core/util/CanvasStateUtil.ts | 77 +++++++-- src/core/util/RendererUtil.ts | 1 - .../javascript/JavascriptScriptingView.svelte | 2 + src/environment/javascript/all-types.ts | 7 + .../javascript/basic-functions/Add.ts | 9 +- .../javascript/basic-types/BooleanVal.ts | 4 +- .../javascript/basic-types/NumberVal.ts | 4 +- 18 files changed, 304 insertions(+), 93 deletions(-) create mode 100644 src/environment/javascript/all-types.ts 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/PScript.svelte b/src/core/PScript.svelte index 49d0a9a..ad79f02 100644 --- a/src/core/PScript.svelte +++ b/src/core/PScript.svelte @@ -30,15 +30,33 @@ onDestroy(() => CanvasStateStore.destroyState(scriptCanvas.getId())) function onDrop(e: DragEvent) { - const nodeId = e.dataTransfer.getData("text") - const target = e.currentTarget as HTMLElement; - const rect = target.getBoundingClientRect(); - const state = scriptCanvas.getState() - const x = e.clientX - rect.left - state.offsetX; - const y = e.clientY - rect.top - state.offsetY; - const instance = allNodes.find(n => n.class === nodeId)?.getInstance?.(x, y, scriptCanvas) - if (instance != null) { - CanvasStateUtil.addDraggable(scriptCanvas.getId(), instance) + const data = e.dataTransfer.getData("text") + try { + const target = e.currentTarget as HTMLElement; + const rect = target.getBoundingClientRect(); + const state = scriptCanvas.getState() + const x = e.clientX - rect.left - state.offsetX; + const y = e.clientY - rect.top - state.offsetY; + + const payload = JSON.parse(data) + switch (payload.type) { + case "node": { + const instance = allNodes.find(n => n.class === payload.content)?.getInstance?.(x, y, scriptCanvas) + if (instance != null) { + CanvasStateUtil.addDraggable(scriptCanvas.getId(), instance) + } + break + } + case "var-getter": + CanvasStateUtil.addVariableGetter(scriptCanvas.getId(), x, y, payload.content) + break + case "var-setter": + CanvasStateUtil.addVariableSetter(scriptCanvas.getId(), x, y, payload.content) + break + } + + } catch (ex) { + console.error(ex) } } diff --git a/src/core/components/AttributeEditor.svelte b/src/core/components/AttributeEditor.svelte index 003f5a6..e6decd0 100644 --- a/src/core/components/AttributeEditor.svelte +++ b/src/core/components/AttributeEditor.svelte @@ -1,7 +1,5 @@ -
- {#each variables as variable} - {variable.getName()} - {/each} + +
+ {#each variables as variable} +
+ +
+ {#each types as type} + + {/each} + + + +
e.dataTransfer.setData("text", JSON.stringify({type: "var-getter", content: variable.getName()}))} + > + drag_indicator + +
+
e.dataTransfer.setData("text", JSON.stringify({type: "var-setter", content: variable.getName()}))} + > + drag_indicator + +
+
+ {/each} +
diff --git a/src/core/instances/AbstractType.ts b/src/core/instances/AbstractType.ts index 3c483cb..6fd50b2 100644 --- a/src/core/instances/AbstractType.ts +++ b/src/core/instances/AbstractType.ts @@ -1,19 +1,27 @@ import AbstractSerializable from "./AbstractSerializable"; -export default class AbstractType extends AbstractSerializable<{ type: string, color?: ColorRGBA }> implements IType { +type P = { name?: string, type: string, color?: ColorRGBA } +export default class AbstractType extends AbstractSerializable

implements IType { + _type: string - _color: ColorRGBA + _color?: ColorRGBA + _name?: string; getType(): string { return this._type; } - from(props) { + from(props: P) { this._type = props.type + this._name = props.name this._color = props.color ?? [0, 0, 0, 0] } getColor(): ColorRGBA { return this._color; } + + getName(): string { + return this._name; + } } diff --git a/src/core/instances/PropertyType.ts b/src/core/instances/PropertyType.ts index 494e650..4a85980 100644 --- a/src/core/instances/PropertyType.ts +++ b/src/core/instances/PropertyType.ts @@ -1,9 +1,9 @@ import AbstractType from "./AbstractType"; export default class PropertyType extends AbstractType{ - static of(type: string, color: ColorRGBA) { + static of(type: string, name?: string, color?: ColorRGBA) { const instance = new PropertyType() - instance.from({type, color}) + instance.from({type, color, name}) return instance } } diff --git a/src/core/instances/VariableSetterNode.ts b/src/core/instances/VariableSetterNode.ts index cc222b2..e87d473 100644 --- a/src/core/instances/VariableSetterNode.ts +++ b/src/core/instances/VariableSetterNode.ts @@ -2,6 +2,9 @@ import AbstractNode from "./AbstractNode"; import NodeType from "./NodeType"; import {NodeTypes} from "../pscript.enum"; import Input from "./Input"; +import Output from "./Output"; +import ExecutionInput from "./ExecutionInput"; +import ExecutionOutput from "./ExecutionOutput"; export default class VariableSetterNode extends AbstractNode implements IVariableNode { _variable: IVariable @@ -28,16 +31,26 @@ export default class VariableSetterNode extends AbstractNode implements IVariabl instance.from({ ...props, inputs: [ + ExecutionInput.of("run", "Continue"), Input.of({ key: "value", label: "Value", accept: [props.variable.getType()], colorRGBA: props.variable.getType().getColor(), disabled: false, - visibleOnNode: false + visibleOnNode: true }) ], - outputs: [] + outputs: [ + ExecutionOutput.of("run", "Continue"), + Output.of({ + key: "value", + label: "Value", + type: props.variable.getType(), + disabled: false, + colorRGBA: props.variable.getType().getColor() + }) + ] }); return instance } diff --git a/src/core/libs/CanvasStateStore.ts b/src/core/libs/CanvasStateStore.ts index de1d641..00b389a 100644 --- a/src/core/libs/CanvasStateStore.ts +++ b/src/core/libs/CanvasStateStore.ts @@ -28,6 +28,7 @@ export default class CanvasStateStore extends AbstractStore { links: [], nodes: [], functions: [], + variables: [], comments: [], needsUpdate: false, getInstance: () => instance, @@ -51,6 +52,7 @@ export default class CanvasStateStore extends AbstractStore { static triggerDelayedUpdate(instanceId: string) { const state = this.getDataById(instanceId) + console.trace(state, instanceId) if (state != null) { this.updateStore({[instanceId]: state}) } diff --git a/src/core/pscript.g.ts b/src/core/pscript.g.ts index d6ae25f..8b8521c 100644 --- a/src/core/pscript.g.ts +++ b/src/core/pscript.g.ts @@ -3,7 +3,8 @@ interface IFunctionNode { } type ColorRGBA = [number, number, number, number] -interface IVariableNode { + +interface IVariableNode extends INodeDraggable { _variable: IVariable; getVariable: () => IVariable } diff --git a/src/core/util/CanvasStateUtil.ts b/src/core/util/CanvasStateUtil.ts index b98ee56..4261639 100644 --- a/src/core/util/CanvasStateUtil.ts +++ b/src/core/util/CanvasStateUtil.ts @@ -27,6 +27,14 @@ export default class CanvasStateUtil { } + static removeLinks(id: string, links: ILink[]) { + const state = CanvasStateStore.getDataById(id) + state.links = state.links.filter(l => !links.includes(l)) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) + } + + static addDraggable(id: string, node: IDraggable) { const state = CanvasStateStore.getDataById(id) if (node instanceof CommentDraggable) { @@ -41,9 +49,11 @@ export default class CanvasStateUtil { static removeDraggable(id: string, toRemove: INodeDraggable[]) { const state = CanvasStateStore.getDataById(id) const focusedFunction = CanvasStateStore.getData().focusedFunction + const toRemoveMap = {} for (let i = 0; i < toRemove.length; i++) { const draggable = toRemove[i]; state.selected.delete(draggable.id) + toRemoveMap[draggable.id] = draggable if (focusedFunction === draggable.id) { CanvasStateStore.updateProperty(id, "focusedFunction", undefined) } @@ -51,27 +61,29 @@ export default class CanvasStateUtil { const index = state.nodes.indexOf(draggable) if (index > -1) { state.nodes.splice(index, 1) - const toRemove = state.links.filter(l => l.sourceNode === draggable || l.targetNode === draggable) - toRemove.forEach(l => { - CanvasStateUtil.removeLink(id, state.links.indexOf(l)) - }) } } else { const index = state.comments.indexOf(draggable) state.comments.splice(index, 1) } } + + const linksToRemove = state.links.flatMap((l, index) => { + return (toRemoveMap[l.sourceNode.id] != null || toRemoveMap[l.targetNode.id] != null) ? [l] : [] + }) + CanvasStateUtil.removeLinks(id, linksToRemove) + state.needsUpdate = true CanvasStateStore.triggerDelayedUpdate(id) } static addVariable(id: string, type: IType, variableName: string): boolean { const state = CanvasStateStore.getDataById(id) - const correctName = variableName.toLowerCase() - if (state.variableNames[correctName]) + console.trace(state.variableNames, variableName) + if (state.variableNames[variableName]) return false - state.variableNames[correctName] = true - state.variables.push(new Variable(correctName, type)) + state.variableNames[variableName] = true + state.variables.push(new Variable(variableName, type)) CanvasStateStore.triggerDelayedUpdate(id) return true } @@ -94,8 +106,7 @@ export default class CanvasStateUtil { static addVariableGetter(id: string, x: number, y: number, variableName: string) { const state = CanvasStateStore.getDataById(id) - const name = variableName.toLowerCase() - const variable = state.variables.find(v => v.getName() === name) + const variable = state.variables.find(v => v.getName() === variableName) if (variable != null) { const newNode = VariableGetterNode.of({ variable, @@ -103,7 +114,7 @@ export default class CanvasStateUtil { x, y, label: variableName + " (GETTER)", - colorRGBA: [0, 255, 0, 1] + colorRGBA: variable.getType().getColor() }) state.nodes.push(newNode) state.needsUpdate = true @@ -122,7 +133,7 @@ export default class CanvasStateUtil { x, y, label: variableName + " (SETTER)", - colorRGBA: [255, 0, 0, 1] + colorRGBA: variable.getType().getColor() }) state.nodes.push(newNode) state.needsUpdate = true @@ -130,11 +141,45 @@ export default class CanvasStateUtil { } } - static renameVariable(){ - // TODO + static renameVariable(id: string, variable: IVariable, value: string) { + const state = CanvasStateStore.getDataById(id) + delete state.variableNames[variable._name] + variable._name = value + state.variableNames[value] = true + state.nodes.forEach(n => { + if (n instanceof VariableGetterNode && n.getVariable() === variable) { + n.label = value + " (GETTER)" + } else if (n instanceof VariableSetterNode && n.getVariable() === variable) { + n.label = value + " (SETTER)" + } + }) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) } - static changeVariableType(){ - // TODO + static changeVariableType(id: string, variable: IVariable, value: IType) { + const state = CanvasStateStore.getDataById(id) + variable._type = value + let nodesToRecreate: IVariableNode[] = state.nodes.filter(n => { + return (n instanceof VariableGetterNode || n instanceof VariableSetterNode) && n.getVariable() === variable + }) + CanvasStateUtil.removeDraggable(id, nodesToRecreate) + nodesToRecreate = nodesToRecreate.map(n => { + const variableProps = { + variable: n._variable, + canvas: state.getInstance(), + x: n.x, + y: n.y, + label: n.label, + colorRGBA: variable.getType().getColor() + } + if (n instanceof VariableGetterNode) + return VariableGetterNode.of(variableProps) + else if (n instanceof VariableSetterNode) + return VariableSetterNode.of(variableProps) + }) + state.nodes.push(...nodesToRecreate) + state.needsUpdate = true + CanvasStateStore.triggerDelayedUpdate(id) } } diff --git a/src/core/util/RendererUtil.ts b/src/core/util/RendererUtil.ts index fb5735c..2270d6d 100644 --- a/src/core/util/RendererUtil.ts +++ b/src/core/util/RendererUtil.ts @@ -1,4 +1,3 @@ -import AbstractNode from "../instances/AbstractNode" import type AbstractLink from "../instances/AbstractLink" import IDraggableUtil from "./IDraggableUtil" import AbstractDraggable from "../instances/AbstractDraggable"; diff --git a/src/environment/javascript/JavascriptScriptingView.svelte b/src/environment/javascript/JavascriptScriptingView.svelte index cabdaa1..2a994a2 100644 --- a/src/environment/javascript/JavascriptScriptingView.svelte +++ b/src/environment/javascript/JavascriptScriptingView.svelte @@ -6,6 +6,7 @@ import {onMount} from "svelte"; import DynamicNodes from "../../core/components/DynamicNodes.svelte"; import CanvasStateStore from "../../core/libs/CanvasStateStore"; + import allTypes from "./all-types"; const canvas = CanvasStateStore.createState(uuid()) onMount(registerTypes) @@ -15,6 +16,7 @@ scriptCanvas={canvas} > diff --git a/src/environment/javascript/all-types.ts b/src/environment/javascript/all-types.ts new file mode 100644 index 0000000..34f2a33 --- /dev/null +++ b/src/environment/javascript/all-types.ts @@ -0,0 +1,7 @@ +import PropertyType from "../../core/instances/PropertyType"; +import Types, {Colors} from "./javascript.enum"; + +export default { + [Types.BOOLEAN]: PropertyType.of(Types.BOOLEAN, "Boolean", Colors.BOOLEAN), + [Types.NUMBER]: PropertyType.of(Types.NUMBER, "Numeric", Colors.NUMBER), +} diff --git a/src/environment/javascript/basic-functions/Add.ts b/src/environment/javascript/basic-functions/Add.ts index 6e88ab2..e4e1377 100644 --- a/src/environment/javascript/basic-functions/Add.ts +++ b/src/environment/javascript/basic-functions/Add.ts @@ -1,13 +1,12 @@ import AbstractNode from "../../../core/instances/AbstractNode"; import Types, {Colors} from "../javascript.enum"; - -import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; import ExecutionInput from "../../../core/instances/ExecutionInput"; import ExecutionOutput from "../../../core/instances/ExecutionOutput"; import {NodeTypes} from "../../../core/pscript.enum"; +import AllTypes from "../all-types"; export default class Add extends AbstractNode { nodeType = NodeType.of(NodeTypes.FUNCTION); @@ -25,7 +24,7 @@ export default class Add extends AbstractNode { Input.of({ key: "a", label: "A", - accept: [PropertyType.of(Types.NUMBER, Colors.NUMBER)], + accept: [AllTypes[Types.NUMBER]], disabled: false, visibleOnNode: true, colorRGBA: Colors.NUMBER @@ -33,7 +32,7 @@ export default class Add extends AbstractNode { Input.of({ key: "b", label: "B", - accept: [PropertyType.of(Types.NUMBER, Colors.NUMBER)], + accept: [AllTypes[Types.NUMBER]], disabled: false, visibleOnNode: true, colorRGBA: Colors.NUMBER @@ -44,7 +43,7 @@ export default class Add extends AbstractNode { Output.of({ key: "sum", label: "Sum", - type: PropertyType.of(Types.NUMBER, Colors.NUMBER), + type: AllTypes[Types.NUMBER], disabled: false, colorRGBA: Colors.NUMBER }) diff --git a/src/environment/javascript/basic-types/BooleanVal.ts b/src/environment/javascript/basic-types/BooleanVal.ts index 1f857d5..9ee23e0 100644 --- a/src/environment/javascript/basic-types/BooleanVal.ts +++ b/src/environment/javascript/basic-types/BooleanVal.ts @@ -1,10 +1,10 @@ import AbstractNode from "../../../core/instances/AbstractNode"; import Types, {Colors} from "../javascript.enum"; -import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; import {NodeTypes} from "../../../core/pscript.enum"; +import AllTypes from "../all-types"; export default class BooleanVal extends AbstractNode { @@ -31,7 +31,7 @@ export default class BooleanVal extends AbstractNode { Output.of({ key: "truthy", label: "isTruthy", - type: PropertyType.of(Types.BOOLEAN, Colors.BOOLEAN), + type: AllTypes[Types.BOOLEAN], disabled: false, colorRGBA: Colors.BOOLEAN }) diff --git a/src/environment/javascript/basic-types/NumberVal.ts b/src/environment/javascript/basic-types/NumberVal.ts index b5daafd..e96c3de 100644 --- a/src/environment/javascript/basic-types/NumberVal.ts +++ b/src/environment/javascript/basic-types/NumberVal.ts @@ -1,10 +1,10 @@ import AbstractNode from "../../../core/instances/AbstractNode"; import Types, {Colors,} from "../javascript.enum"; -import PropertyType from "../../../core/instances/PropertyType"; import NodeType from "../../../core/instances/NodeType"; import Output from "../../../core/instances/Output"; import Input from "../../../core/instances/Input"; import {NodeTypes} from "../../../core/pscript.enum"; +import AllTypes from "../all-types"; export default class NumberVal extends AbstractNode { nodeType = NodeType.of(NodeTypes.VAR); @@ -30,7 +30,7 @@ export default class NumberVal extends AbstractNode { Output.of({ key: "value", label: "Value", - type: PropertyType.of(Types.NUMBER, Colors.NUMBER), + type: AllTypes[Types.NUMBER], disabled: false, colorRGBA: Colors.NUMBER })