@kabel-project/kabel 1.0.7

package/renderers/representer-node.ts

@@ -0,0 +1,52 @@
+import NodeSvg from '../src/nodesvg';
+import WorkspaceSvg from '../src/workspace-svg';
+import { Element } from '@svgdotjs/svg.js';
+import Renderer, { DrawState } from './renderer';
+import RendererConstants from './constants';
+import { parseColor } from '../util/parse-color';
+import {Color} from '../src/visual-types';
+
+export class RepresenterNode {
+	node: NodeSvg;
+	state: DrawState;
+    renderer: Renderer;
+	constructor(node: NodeSvg, svgState: DrawState, renderer: Renderer) {
+        this.renderer = renderer;
+		this.node = node;
+		this.state = svgState;
+
+		// Attach this wrapper to the node for external access
+		node.svg = this;
+	}
+    getConstant(name: keyof RendererConstants) {
+        return this.renderer._constants[name];
+    }
+	/** Move node visually without changing its relativeCoords */
+	moveTo(x: number, y: number) {
+		this.state.group!.move(x, y);
+	}
+
+	/** Scale node visually */
+	setScale(scale: number) {
+		this.state.group!.scale(scale);
+	}
+
+	/** Apply raw transform string */
+	applyTransform(transform: string) {
+		this.state.group!.attr({ transform });
+	}
+
+	/** Access the raw SVG group */
+	getRaw() {
+		return this.state.group;
+	}
+
+	/** Optional: highlight node */
+	highlight(color = '#ff0') {
+        if (!color || color.length == 0 || typeof color !== 'string') {
+            this.highlight(parseColor(this.getConstant('NODE_OUTLINE_COLOR') as Color) as string);
+            return;
+        }
+		this.state.bg!.stroke({ color, width: 2 });
+	}
+}

package/renderers/representer.ts

@@ -0,0 +1,25 @@
+import NodeSvg from '../src/nodesvg';
+import Renderer, { DrawState } from './renderer';
+import { RepresenterNode } from './representer-node';
+
+export default class Representer {
+	nodes: Map<string, RepresenterNode> = new Map();
+
+	/** Build a representer node for a drawn node */
+	build(node: NodeSvg, renderer: Renderer, state: DrawState) {
+		if (!node) return;
+		const repNode = new RepresenterNode(node, state, renderer);
+		this.nodes.set(node.id, repNode);
+		return repNode;
+	}
+
+	/** Get a representer node by node id */
+	get(nodeId: string): RepresenterNode | undefined {
+		return this.nodes.get(nodeId);
+	}
+
+	/** Remove a node from the representer */
+	remove(nodeId: string) {
+		this.nodes.delete(nodeId);
+	}
+}

package/src/category.ts

@@ -0,0 +1,107 @@
+import { parseColor } from "../util/parse-color";
+import { TblxCategoryStruct, TblxNodeStruct } from "./inject";
+import Toolbox from "./toolbox";
+import { Color } from "./visual-types";
+
+/**
+ * Represents a category in the toolbox, containing nodes and a label.
+ */
+class Category {
+	/** Display label for the category */
+	label: string;
+	/** Category color */
+	color: Color;
+	/** Nodes contained in this category */
+	contents: TblxNodeStruct[];
+	/** HTML button element representing this category row */
+	_rowDiv!: HTMLButtonElement;
+	/** Reference to parent toolbox */
+	_toolbox: Toolbox;
+
+	/**
+	 * @param toolbox The parent Toolbox instance
+	 * @param cData Category data (label, color, nodes)
+	 */
+	constructor(toolbox: Toolbox, cData: TblxCategoryStruct) {
+		this.label = cData.name;
+		this.color = cData.color;
+		this.contents = cData.contents;
+		this._toolbox = toolbox;
+		this._makeDiv();
+	}
+
+	/** Creates the category button in the UI and attaches click events */
+	_makeDiv() {
+		const btn = document.createElement("button");
+		btn.textContent = this.label;
+		btn.className = "KabelCategoryRow";
+		btn.style.backgroundColor = parseColor(this.color);
+		btn.style.color = parseColor('#ffffff');
+		this._rowDiv = btn;
+
+		btn.addEventListener("click", e => {
+			e.stopPropagation();
+			this._toolbox._flyout.clear();
+			this._toolbox._flyout.fill(this.contents);
+			this._toolbox._flyout.show();
+		});
+
+		this._toolbox.container.appendChild(btn);
+	}
+
+	/**
+	 * Refreshes the category UI with new data
+	 * @param cData Partial data to update (name, color, contents)
+	 */
+	refresh(cData: Partial<TblxCategoryStruct>) {
+		if (cData.name !== undefined) {
+			this.label = cData.name;
+			this._rowDiv.textContent = this.label;
+		}
+		if (cData.color !== undefined) {
+			this.color = cData.color;
+			this._rowDiv.style.backgroundColor = parseColor(this.color);
+		}
+		if (cData.contents !== undefined) {
+			this.contents = cData.contents;
+		}
+	}
+
+	/** Remove category row from the toolbox */
+	destroy() {
+		this._rowDiv.remove();
+		this._toolbox = null as unknown as Toolbox;
+	}
+
+	/** Hide this category from the UI */
+	hide() {
+		this._rowDiv.style.display = "none";
+	}
+
+	/** Show this category in the UI */
+	show() {
+		this._rowDiv.style.display = "";
+	}
+
+	/**
+	 * Enable or disable interaction with this category
+	 * @param disabled True to disable, false to enable
+	 */
+	setDisabled(disabled: boolean) {
+		this._rowDiv.disabled = disabled;
+	}
+
+	/**
+	 * Returns a plain object representation of this category
+	 * @returns JSON-compatible category object
+	 */
+	toJSON(): TblxCategoryStruct {
+		return {
+			name: this.label,
+			color: this.color,
+			contents: this.contents,
+		};
+	}
+}
+
+export default Category;

package/src/colors.ts

@@ -0,0 +1,20 @@
+import { Color, ColorStyle } from "./visual-types";
+
+/**
+ * Stores color styles for node categories.
+ * 
+ * Each key is a category name, and the value is a ColorStyle object
+ * containing colors like primary, secondary, and tertiary.
+ * 
+ * Example:
+ * ```ts
+ * CategoryColors["logic"] = {
+ *   primary: "#FF0000",
+ *   secondary: "#00FF00",
+ *   tertiary: "#0000FF"
+ * };
+ * ```
+ */
+const CategoryColors: { [key: string]: ColorStyle } = {};
+
+export default CategoryColors;

package/src/comment.ts

@@ -0,0 +1,142 @@
+import { G, Line } from "@svgdotjs/svg.js";
+import NodeSvg from "./nodesvg";
+import WorkspaceSvg from "./workspace-svg";
+import Coordinates from "./coordinates";
+import { generateUID } from "../util/uid";
+import Workspace from "./workspace";
+
+
+export interface CommentSerialized {
+    id: string;
+    text: string;
+    coords: { x: number; y: number };
+    parent: string | null; // node ID if node comment, null if workspace comment
+}
+/**
+ * Represents a comment attached to either a NodeSvg or a WorkspaceSvg.
+ */
+class CommentModel {
+    /** The comment text */
+    _text: string;
+
+    /** True if this comment belongs to the workspace instead of a node */
+    _isWorkspaceComment: boolean;
+
+    /** Parent NodeSvg or WorkspaceSvg to which this comment belongs */
+    _parent: NodeSvg | WorkspaceSvg | Workspace;
+
+    /** SVG group representing this comment in the DOM */
+    svgGroup?: G | undefined;
+
+    /** Coordinates relative to parent */
+    relativeCoords: Coordinates;
+
+    /** Optional SVG line connecting the comment to its node */
+    svgLine?: Line | undefined;
+
+    /** Temporary bounding box info for input handling */
+    _tempInputBBox?: { width: number; height: number; textX: number; textY: number };
+
+    /** Unique identifier for this comment */
+    id: string;
+
+    /**
+     * Creates a new comment attached to a node or workspace.
+     * @param parent - NodeSvg or WorkspaceSvg this comment belongs to
+     */
+    constructor(parent: NodeSvg | WorkspaceSvg | Workspace) {
+        this._parent = parent;
+        this._isWorkspaceComment = parent instanceof WorkspaceSvg;
+        this._text = "";
+        this.relativeCoords = new Coordinates(0, 0); // Coordinates relative to this._parent
+        this.id = generateUID("nanoid", {
+            alphabet: "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0129384756!)@(#*$&%^",
+        });
+    }
+
+    /**
+     * Sets the text of the comment without triggering a comment redraw.
+     * @param value - New text content
+     * @returns The updated text
+     */
+    setTextNoRedraw(value: string): string {
+        return (this._text = value);
+    }
+
+    /**
+     * Retrieves the current text of the comment.
+     * @returns The comment text
+     */
+    getText(): string {
+        return this._text;
+    }
+
+    /**
+     * Sets the text of the comment and triggers a redraw of all comments in the workspace.
+     * @param value - New text content
+     * @returns The updated text
+     */
+    setText(value: string): string {
+        const res = (this._text = value);
+        if (this.getWorkspace().isHeadless) return res;
+        this.getWorkspace().renderer.clearComments();
+        this.getWorkspace().renderer.drawComments();
+        return res;
+    }
+
+    /**
+     * Returns true if this comment is attached to a node.
+     */
+    isNodeComment(): boolean {
+        return !this._isWorkspaceComment;
+    }
+
+    /**
+     * Returns true if this comment is attached to the workspace.
+     */
+    isWorkspaceComment(): boolean {
+        return this._isWorkspaceComment;
+    }
+
+    /**
+     * Gets the workspace that owns this comment.
+     */
+    getWorkspace(): WorkspaceSvg {
+        if (this.isWorkspaceComment()) {
+            return this._parent as WorkspaceSvg;
+        } else {
+            return (this._parent as NodeSvg)?.workspace as WorkspaceSvg;
+        }
+    }
+    /**
+     * Convert to JSON structure holding all important data.
+     */
+    toJson(): CommentSerialized {
+        return {
+            text: this.getText(),
+            coords: { x: this.relativeCoords.x, y: this.relativeCoords.y },
+            parent: this.isWorkspaceComment() ? null : (this._parent as NodeSvg).id,
+            id: this.id
+        }
+    }
+
+    /**
+     * Creates a CommentModel from serialized data.
+     * @param data - The serialized comment
+     * @param workspace - The workspace to attach the comment to
+     * @param nodeMap - Optional map of node IDs to NodeSvg instances
+     */
+    static fromJson(
+        data: CommentSerialized,
+    ): CommentModel {
+        const comment = new CommentModel(null as any as WorkspaceSvg | NodeSvg);
+        comment.id = data.id;
+        comment.relativeCoords = new Coordinates(data.coords.x, data.coords.y);
+        comment.setTextNoRedraw(data.text);
+
+        return comment;
+    }
+}
+
+export default CommentModel;
+export { CommentModel };

package/src/connection.ts

@@ -0,0 +1,114 @@
+import Field, { ConnectableField } from "./field";
+import NodeSvg from "./nodesvg";
+
+/**
+ * A node or field that can participate in a connection.
+ */
+export type Connectable = NodeSvg | null | Field;
+
+/**
+ * Represents a connection between two connectable objects.
+ */
+class Connection {
+	/** The source of the connection */
+	from: Connectable;
+	/** The target of the connection */
+	to: Connectable;
+	/** Whether this connection represents a previous connection (affects rendering/logic) */
+	isPrevious: boolean;
+
+	/**
+	 * Creates a new Connection.
+	 * @param from - The source NodeSvg or Field
+	 * @param to - The target NodeSvg or Field
+	 * @param isPrevious - True if this connection is a previous connection
+	 */
+	constructor(from: Connectable, to: Connectable, isPrevious: boolean = false) {
+		this.from = from;
+		this.to = to;
+		this.isPrevious = isPrevious;
+	}
+
+	/** Returns the target of the connection */
+	getTo(): Connectable {
+		return this.to;
+	}
+
+	/** Returns the source of the connection */
+	getFrom(): Connectable {
+		return this.from;
+	}
+
+	/**
+	 * Disconnects this connection from its target.
+	 * Safely handles NodeSvg chains and ConnectableFields.
+	 */
+	disconnectTo() {
+		if (!this.to) return;
+
+		if (this.to instanceof NodeSvg && this.to.previousConnection) {
+			const prevConn = this.to.previousConnection;
+			const prevFrom = prevConn.from;
+
+			// Disconnect NodeSvg chain
+			if (prevFrom instanceof NodeSvg && prevFrom.nextConnection?.to) {
+				prevFrom.nextConnection.to = null;
+			}
+
+			// Disconnect Field chain
+			if (prevFrom instanceof Field && prevFrom.hasConnectable?.()) {
+				(prevFrom as ConnectableField).disconnect();
+			}
+		}
+
+		this.to = null;
+	}
+
+	/**
+	 * Disconnects this connection from its source.
+	 * Safely handles NodeSvg chains and ConnectableFields.
+	 */
+	disconnectFrom() {
+		if (!this.from) return;
+
+		if (this.from instanceof NodeSvg && this.from.nextConnection) {
+			const next = this.from.nextConnection;
+
+			if (next.to instanceof NodeSvg && next.to.previousConnection?.from) {
+				next.to.previousConnection.from = null;
+			} else if (next.to instanceof Field && next.to.hasConnectable()) {
+				(next.to as ConnectableField).disconnect();
+			}
+
+			next.to = null;
+		} else if (this.from instanceof Field && this.from.hasConnectable()) {
+			(this.from as ConnectableField).disconnect();
+		}
+
+		this.from = null;
+	}
+
+	/**
+	 * Sets the target of this connection (used during deserialization)
+	 * @param target - New connection target
+	 */
+	setTo(target: Connectable) {
+		this.to = target;
+	}
+
+	/**
+	 * Sets the source of this connection (used during deserialization)
+	 * @param source - New connection source
+	 */
+	setFrom(source: Connectable) {
+		this.from = source;
+	}
+
+	/** Completely isolates this connection, clearing both ends */
+	isolate() {
+		this.from = null as any;
+		this.to = null as any;
+	}
+}
+
+export default Connection;

package/src/context-menu.ts

@@ -0,0 +1,194 @@
+import WorkspaceController from "../controllers/base";
+import unescapeAttr from "../util/unescape-html";
+import CommentModel from "./comment";
+import Coordinates from "./coordinates";
+import ContextOptsRegistry from "./ctx-menu-registry";
+import NodeSvg from "./nodesvg";
+import Widget from "./widget";
+import WorkspaceSvg from "./workspace-svg";
+/**
+ * A list of types that a context menu item can show for.
+ */
+export type Showable = 'node' | 'ws' | 'html' | 'comment' | 'any';
+
+/**
+ * Describes a context menu option.
+ */
+export interface ContextMenuOpts {
+    /** Function executed when the option is clicked */
+    click: (target: NodeSvg | WorkspaceSvg | CommentModel | HTMLElement) => void;
+    /** Optional hover start callback */
+    onHoverStart?: () => void;
+    /** Optional hover end callback */
+    onHoverEnd?: () => void;
+    /** Specifies which target types this option should appear for */
+    showFor?: Showable | Showable[];
+    /** Specifies extra logic for drawing */
+    onDraw?: (optEl: Node, ws: WorkspaceSvg, opt: ContextMenuOpts) => void;
+    /** Text label for the menu option */
+    label: string;
+    /** Unique ID for the option */
+    id: string;
+}
+
+/**
+ * HTML context menu rendered on workspace right-click.
+ */
+class ContextMenuHTML {
+    /**
+     * The workspace.
+     */
+    workspace: WorkspaceSvg;
+    /**
+     * The workspace's controller
+     */
+    controller: WorkspaceController;
+    /**
+     * The widget in the workspace to display the menu on.
+     */
+    widget: Widget;
+    /**
+     * Options for the context menu.
+     */
+    options: ContextMenuOpts[];
+
+    /**
+     * Create a new context menu for a workspace.
+     * @param workspace - Workspace to attach the context menu to
+     */
+    constructor(workspace: WorkspaceSvg) {
+        this.workspace = workspace;
+        this.controller = this.workspace.controller;
+        this.widget = new Widget(this.workspace, {
+            coords: new Coordinates(0, 0),
+            name: 'k_contextmenu',
+            className: 'KabelContextMenu'
+        });
+
+        // Override show/hide methods to manipulate CSS
+        this.widget.show = () => {
+            this.widget.container.classList.add('show');
+            this.widget.container.style.display = 'flex';
+            this.widget.visible = true;
+        };
+        this.widget.hide = () => {
+            this.widget.container.classList.remove('show');
+            this.widget.container.style.display = 'none';
+            this.widget.visible = false;
+        };
+        this.widget.container.style.removeProperty('height');
+        this.widget.container.style.removeProperty('width');
+
+        this.widget.hide();
+        this.options = ContextOptsRegistry;
+        this.initListeners();
+    }
+
+    /**
+     * Renders context menu options for a given target.
+     * @param target - The object the context menu is for
+     */
+    renderOptions(target: NodeSvg | WorkspaceSvg | HTMLElement | CommentModel | null) {
+        this.widget.container.innerHTML = '';
+
+        const filteredOptions = this.options.filter(opt => {
+            if (!target) return false;
+            const showFor = Array.isArray(opt.showFor) ? opt.showFor : [opt.showFor];
+            if (showFor.includes('any')) return true;
+            if (target instanceof NodeSvg && showFor.includes('node')) return true;
+            if (target instanceof WorkspaceSvg && showFor.includes('ws')) return true;
+            if (target instanceof HTMLElement && !(target instanceof SVGSVGElement) && showFor.includes('html')) return true;
+            if (target instanceof CommentModel && showFor.includes('comment')) return true;
+            return false;
+        });
+
+        filteredOptions.forEach((opt, i) => {
+            const el = document.createElement('div');
+            el.className = 'KabelContextOption';
+            el.textContent = opt.label || 'Option ' + i;
+
+            el.addEventListener('click', () => {
+                if (target) opt.click(target);
+                this.hide();
+            });
+            if (opt.onDraw) opt.onDraw(el, this.workspace, opt);
+            if (opt.onHoverStart) el.addEventListener('mouseenter', () => opt.onHoverStart?.());
+            if (opt.onHoverEnd) el.addEventListener('mouseleave', () => opt.onHoverEnd?.());
+
+            this.widget.container.appendChild(el);
+        });
+    }
+
+    /**
+     * Initializes event listeners for showing/hiding the menu.
+     */
+    initListeners() {
+        if (this.controller) {
+            this.controller.addMoveListener(() => {
+                if (this.widget.visible) this.hide();
+            })
+        }
+        this.workspace.svg.node.addEventListener('contextmenu', e => {
+            e.preventDefault();
+            const mouseX = e.clientX;
+            const mouseY = e.clientY;
+
+            this.widget.setCoords(new Coordinates(mouseX, mouseY));
+            this.renderOptions(this.target);
+            this.widget.show();
+        });
+
+        document.addEventListener('mousedown', e => {
+            if (!this.widget.container.contains(e.target as Node)) {
+                this.hide();
+            }
+        });
+    }
+
+    /** Hides the context menu */
+    hide() {
+        this.widget.hide();
+    }
+
+    /** Returns the current mouse position in workspace coordinates */
+    get mousePos(): { x: number, y: number } {
+        return this.controller.mousePos;
+    }
+
+    /**
+     * Returns the target element under the mouse for context menu.
+     */
+    get target(): NodeSvg | WorkspaceSvg | HTMLElement | CommentModel | null {
+        let el = document.elementFromPoint(this.mousePos.x, this.mousePos.y) as HTMLElement | null;
+        if (!el) return null;
+        if ((el as unknown as SVGSVGElement) === this.workspace.svg.node) return this.workspace;
+
+        if (el && el.classList?.contains?.('WorkspaceBgPattern')) return this.workspace;
+
+        while (el && el !== document.body) {
+            if (el.tagName.toLowerCase() === 'g' && el.hasAttribute('data-node-id')) {
+                const nodeId = unescapeAttr(el.getAttribute('data-node-id') as string);
+                const node = this.workspace.getNode(nodeId);
+                if (node) return node;
+            }
+            if (el.tagName.toLowerCase() === 'g' && el.hasAttribute('comment-data')) {
+                const dta = JSON.parse(el.getAttribute('comment-data') as string);
+                if (!dta.id && !dta.isws) continue;
+                if (dta.isws) {
+                    for (let comment of this.workspace._commentDB) {
+                        if (comment.id === dta.id) return comment;
+                    }
+                } else {
+                    for (let [_, node] of this.workspace._nodeDB) {
+                        if (node.comment && node.comment.id == dta.id) return node.comment;
+                    }
+                }
+            }
+            el = el.parentElement;
+        }
+
+        return document.elementFromPoint(this.mousePos.x, this.mousePos.y) as HTMLElement | null;
+    }
+}
+
+export default ContextMenuHTML;