@kabel-project/kabel 1.0.7

package/src/coordinates.ts

@@ -0,0 +1,74 @@
+/**
+ * Represents a 2D coordinate in space.
+ */
+class Coordinates {
+	/** X position */
+	x: number;
+	/** Y position */
+	y: number;
+
+	/**
+	 * Creates a new Coordinates instance
+	 * @param x - The x value (default 0)
+	 * @param y - The y value (default 0)
+	 */
+	constructor(x: number = 0, y: number = 0) {
+		this.x = x;
+		this.y = y;
+	}
+
+	/**
+	 * Set the coordinates to new values
+	 * @param x - The new x value
+	 * @param y - The new y value
+	 */
+	set(x: number, y: number) {
+		this.x = x;
+		this.y = y;
+	}
+
+	/**
+	 * Returns a copy of this coordinate
+	 * @returns A new Coordinates instance with the same x and y
+	 */
+	clone(): Coordinates {
+		return new Coordinates(this.x, this.y);
+	}
+
+	/**
+	 * Calculate the Euclidean distance to another coordinate
+	 * @param other - The target coordinate
+	 * @returns The distance as a number
+	 */
+	distanceTo(other: Coordinates): number {
+		const dx = this.x - other.x;
+		const dy = this.y - other.y;
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
+	/**
+	 * Convert the coordinate to a string representation
+	 * @returns A string like "(x, y)"
+	 */
+	toString(): string {
+		return `(${this.x}, ${this.y})`;
+	}
+
+	/**
+	 * Convert the coordinate to an array [x, y]
+	 * @returns Tuple of numbers [x, y]
+	 */
+	toArray(): [number, number] {
+		return [this.x, this.y];
+	}
+
+	/**
+	 * Convert the coordinate to an object { x, y }
+	 * @returns Object with x and y properties
+	 */
+	toObject(): { x: number; y: number } {
+		return { x: this.x, y: this.y };
+	}
+}
+
+export default Coordinates;

package/src/core.ts

@@ -0,0 +1,202 @@
+import RendererConstants from '../renderers/constants'
+import Renderer from '../renderers/renderer'
+import CategoryColors from './colors'
+import Connection, { Connectable } from './connection'
+import Coordinates from './coordinates'
+import Field, {
+    FieldOptions,
+    FieldVisualInfo,
+    AnyFieldCls,
+    AnyField,
+    DummyField,
+    FieldMap,
+    NumberField,
+    OptConnectField,
+    TextField
+} from './field'
+import inject, { InjectMsg, InjectOptions } from './inject'
+import {
+    clearMainWorkspace,
+    getMainWorkspace,
+    setMainWorkspace
+} from './main-workspace'
+import NodeSvg, { NodeJson, NodeEvents, InputFieldJson } from './nodesvg'
+import NodePrototypes from './prototypes'
+import WorkspaceSvg from './workspace-svg'
+import { NodePrototype } from './node-types'
+import {
+    Color,
+    ColorStyle,
+    Hex,
+    RGBObject,
+    RGBString,
+    RGBTuple
+} from './visual-types'
+import { parseColor } from '../util/parse-color'
+import eventer, { Eventer } from '../util/eventer'
+import * as Path from '../util/path'
+import * as SVG from '@svgdotjs/svg.js'
+import * as UID from '../util/uid'
+import hasProp from '../util/has-prop'
+import EventEmitter from '../util/emitter'
+import userState from '../util/user-state'
+import '../events/events'
+import WorkspaceController from '../controllers/base'
+import WASDController from '../controllers/wasd'
+import { RMap, RendererMap } from './renderer-map'
+import styler, { Styler } from '../util/styler'
+import WidgetPrototypes from './widget-prototypes'
+import Widget from './widget'
+import ContextOptsRegistry, { ContextMenu } from './ctx-menu-registry'
+import { Showable } from './context-menu'
+import escapeAttr from '../util/escape-html'
+import unescapeAttr from '../util/unescape-html'
+import waitFrames from '../util/wait-anim-frames'
+import CommentModel from './comment'
+import CommentRenderer from '../comment-renderer/renderer'
+import dropdownContainer from './dropdown-menu'
+import Representer from '../renderers/representer'
+import { RepresenterNode } from '../renderers/representer-node'
+import windowListeners, { addWindowListener, clearWindowListeners, removeWindowListener } from '../util/window-listeners'
+import * as FontManager from './fonts-manager';
+import env from "../util/env";
+import Workspace from './workspace'
+import injectHeadless from './inject-headless'
+import createHeadlessNode from './headless-node';
+import * as apollo from '../renderers/apollo/apollo';
+import * as atlas from '../renderers/atlas/atlas';
+import KabelWSTheme from '../themes/default'
+import KabelDarkTheme from '../themes/dark'
+/** Register default renderers. */
+RendererMap['default'] = atlas.Renderer;
+RendererMap[atlas.Renderer.NAME] = atlas.Renderer;
+RendererMap[apollo.Renderer.NAME] = apollo.Renderer;
+
+if (env.isBrowser) {
+    // Use FontsManager to load default Kabel fonts.
+    FontManager.loadGoogleFont('Fredoka');
+}
+/**
+ * Utility method to register a field globally by name
+ * @param name - Field identifier
+ * @param cls - Class constructor for the field
+ */
+Field.register = function (name: string, cls: Function) {
+    FieldMap[name] = cls as AnyFieldCls
+}
+
+/**
+ * Utility method to unregister a field globally by name
+ * @param name - Field identifier
+ */
+Field.unregister = function (name: string) {
+    delete FieldMap[name]
+}
+
+/**
+ * Central Kabel object exposing all main modules, utilities, and defaults
+ */
+const Kabel = {
+    env, // Environment information
+    UIX: { // User experience enhancing utilities.
+        /** Event manager, loads events from '../events' and lets us attach them to svg.js elements to give them behavior that's seperated from the renderer. */
+        events: eventer as Eventer,
+        /** Font manager, used to load fonts. */
+        FontManager,
+        /** * State Manager, Makes things possible: E.G (the 'typing' state when you type in a input box..) * Used in controllers so you dont move when typing characters like a w s or d etc. */
+        userState,
+        /** Window listeners manager */
+        windowListeners: {
+            addWindowListener,
+            removeWindowListener,
+            clearWindowListeners,
+            windowListeners
+        }
+    },
+    Themes: {
+        Classic: KabelWSTheme,
+        Dark: KabelDarkTheme
+    },
+    /** Context menu manager */
+    ContextMenu,
+    /**
+     * Utility methods and constants for various purposes.
+     * @property Path - Utility methods for handling SVG paths.
+     * @property waitFrames - Utility method to wait for a certain number of animation frames.
+     */
+    Utils: {
+        Path,
+        waitFrames,
+        SVG, // Re-exporting svg.js for convenience
+        parseColor,
+        UID,
+        EventEmitter,
+        hasProp,
+        styler,
+        Styler,
+        escapeHTML: escapeAttr,
+        unescapeHTML: unescapeAttr
+    },
+    Widget,
+    CategoryColors,
+    Connection,
+    Coordinates,
+    Field,
+    DummyField,
+    FieldMap,
+    NumberField,
+    OptConnectField,
+    TextField,
+    inject,
+    injectHeadless,
+    createHeadlessNode,
+    InjectMsg,
+    clearMainWorkspace,
+    getMainWorkspace,
+    setMainWorkspace,
+    NodeSvg,
+    Nodes: NodePrototypes,
+    Widgets: WidgetPrototypes,
+    WorkspaceSvg,
+    Workspace,
+    WorkspaceController,
+    WASDController,
+    nodeRendering: {
+        SVG: SVG, // also re-export svg.js here for easier access in renderers
+        rendererMap: RMap,
+        Apollo: apollo,
+        Atlas: atlas,
+        Renderer: Renderer,
+        RendererConstants: RendererConstants,
+        Representer: Representer,
+        RepresenterNode: RepresenterNode
+    },
+    atlas,
+    apollo,
+    commentRendering: { CommentModel, CommentRenderer },
+    Dropdown: dropdownContainer
+}
+
+/**
+ * Provides a getter/setter for the main workspace
+ * @property _mainWorkspace - Get or set the currently active workspace
+ */
+Object.defineProperty(Kabel, '_mainWorkspace', {
+    get(): WorkspaceSvg | Workspace | null {
+        return getMainWorkspace()
+    },
+    set(v: WorkspaceSvg | Workspace | undefined | null | false | 0 | string) {
+        if (
+            v === undefined ||
+            v === null ||
+            v === false ||
+            v === 0 ||
+            typeof v === 'string'
+        ) {
+            return clearMainWorkspace()
+        }
+        return setMainWorkspace(v)
+    }
+})
+
+export default Kabel

package/src/ctx-menu-registry.ts

@@ -0,0 +1,143 @@
+import CommentModel from "./comment";
+import { ContextMenuOpts, Showable } from "./context-menu";
+import NodeSvg from "./nodesvg";
+import WorkspaceSvg from "./workspace-svg";
+
+/** Registry for all context menu options */
+const ContextOptsRegistry: ContextMenuOpts[] = [];
+
+/**
+ * Global context menu manager
+ */
+const ContextMenu = {
+    /**
+     * Register a new context menu option
+     * @param id - Unique identifier for the option
+     * @param option - Configuration for the context menu item
+     */
+    registerOption(id: string, option: Omit<ContextMenuOpts, 'id'>) {
+        const opt = {
+            id,
+            click: option.click,
+            label: option.label,
+            onHoverStart: option.onHoverStart || (() => { }),
+            onHoverEnd: option.onHoverEnd || (() => { }),
+            showFor: option.showFor || 'any'
+        };
+        ContextOptsRegistry.push(opt);
+    },
+
+    /**
+     * Unregister an existing context menu option by ID
+     * @param id - ID of the option to remove
+     */
+    unregisterOption(id: string) {
+        const index = ContextOptsRegistry.findIndex(opt => opt.id === id);
+        if (index >= 0) ContextOptsRegistry.splice(index, 1);
+    }
+};
+
+// ----- Default options -----
+
+ContextMenu.registerOption('k_delete', {
+    showFor: 'node',
+    label: 'Delete',
+    click: (t) => {
+        const target = t as NodeSvg;
+        if (!target.workspace) return;
+        target.workspace.removeNode(target);
+    }
+});
+
+ContextMenu.registerOption('k_deleteall', {
+    showFor: 'ws',
+    label: 'Delete all',
+    click: (t) => {
+        const target = t as WorkspaceSvg;
+        const isSure = window.confirm(`Are you sure you want to delete ${Array.from(target._nodeDB.keys()).length} nodes?`);
+        if (!isSure) return;
+        for (let [id, _] of target._nodeDB) {
+            target.removeNodeById(id);
+        }
+    }
+});
+
+ContextMenu.registerOption('k_addcomment', {
+    showFor: ['ws', 'node'],
+    label: 'Add Comment',
+    click: (t) => {
+        const target = t;
+        if (target instanceof NodeSvg) {
+            target.addComment();
+            target.setCommentText('Comment!');
+        } else if (target instanceof WorkspaceSvg) {
+            const model = target.addComment();
+            const pos = target.screenToWorkspace(target._ctxMenu.widget.coords.x, target._ctxMenu.widget.coords.y);
+            model.relativeCoords.set(pos.x, pos.y);
+            model.setText('Comment!');
+        }
+    }
+});
+ContextMenu.registerOption('k_undo', {
+    showFor: ['ws', 'node', 'comment'],
+    label: 'Undo',
+    click: (t) => {
+        if (t instanceof NodeSvg) {
+            t.workspace?.history?.undo();
+        } else if (t instanceof CommentModel) {
+            t.getWorkspace()?.history?.undo();
+        } else if (t instanceof WorkspaceSvg) {
+            t.history.undo();
+        }
+    },
+    onDraw(el, ws, opt) {
+        console.log('onDrawCalled');
+        if (!ws.history.canUndo()) {
+            (el as HTMLElement).classList.add('disabled')
+        }
+    }
+})
+ContextMenu.registerOption('k_redo', {
+    showFor: ['ws', 'node', 'comment'],
+    label: 'Redo',
+    click: (t) => {
+        if (t instanceof NodeSvg) {
+            t.workspace?.history?.redo();
+        } else if (t instanceof CommentModel) {
+            t.getWorkspace()?.history?.redo();
+        } else if (t instanceof WorkspaceSvg) {
+            t.history.redo();
+        }
+    },
+    onDraw(el, ws, opt) {
+        console.log('onDrawCalled');
+        if (!ws.history.canRedo()) {
+            (el as HTMLElement).classList.add('disabled')
+        }
+    }
+})
+ContextMenu.registerOption('k_deletecomment', {
+    showFor: 'comment',
+    label: 'Delete Comment',
+    click: (t) => {
+        const target = t as CommentModel;
+        if (target.isNodeComment() && target._parent instanceof NodeSvg) {
+            target._parent.removeComment();
+        } else {
+            target.getWorkspace().removeComment(target);
+        }
+    }
+});
+
+ContextMenu.registerOption('k_duplicate', {
+    showFor: 'node',
+    label: 'Duplicate',
+    click: t => {
+        const node = t as NodeSvg;
+        if (!node.workspace) return;
+        node.workspace.cloneNode(node);
+    }
+});
+
+export { ContextMenu };
+export default ContextOptsRegistry;

package/src/dropdown-menu.ts

@@ -0,0 +1,215 @@
+import { G } from "@svgdotjs/svg.js";
+import Field, { AnyField } from "./field";
+import NodeSvg from "./nodesvg";
+
+/**
+ * Allowed owner types for the dropdown container.
+ * Can be either a NodeSvg or a Field.
+ */
+export type AllowedOwner = NodeSvg | AnyField;
+
+/**
+ * Get absolute position of an HTMLElement relative to the document.
+ * @param el - The HTML element to measure.
+ * @returns The bounding box with scroll offset.
+ */
+function getAbsolutePosition(el: HTMLElement) {
+    const rect = el.getBoundingClientRect();
+    return {
+        x: rect.left + window.scrollX,
+        y: rect.top + window.scrollY,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+
+/**
+ * Options for creating a dropdown menu.
+ */
+export interface DropdownOptions {
+    /** List of items to display in the dropdown */
+    items: { label: string; value: string }[];
+    /** Callback when an item is selected */
+    onSelect?: (value: string, item: { label: string; value: string }) => void;
+    /** Optional fixed width of the dropdown */
+    width?: number;
+}
+
+/**
+ * Dropdown container for NodeSvg or Field elements.
+ * Supports singleton behavior (only one dropdown visible at a time).
+ */
+class DropdownContainer {
+    private static current: DropdownContainer | null = null;
+    private owner: AllowedOwner | null = null;
+    private rootEl: HTMLDivElement;
+    private options: DropdownOptions | null = null;
+    private constraint: { x: number; y: number; width: number; height: number };
+    private offset: { dx: number; dy: number };
+    private currentRemoveListener: (() => void) | null = null;
+    /**
+     * Creates the dropdown container and attaches it to the DOM.
+     */
+    constructor() {
+        this.rootEl = document.createElement("div");
+        this.rootEl.className = "KabelDropdownMenu";
+        this.rootEl.style.position = "absolute";
+        this.rootEl.style.display = "none";
+        document.body.appendChild(this.rootEl);
+
+        this.constraint = { x: 0, y: 0, width: 0, height: 0 };
+        this.offset = { dx: 0, dy: 0 };
+    }
+
+    /**
+     * Move the dropdown by an offset.
+     * @param dx - horizontal offset
+     * @param dy - vertical offset
+     */
+    move(dx: number, dy: number) {
+        this.offset.dx = dx;
+        this.offset.dy = dy;
+        this.updatePosition();
+    }
+
+    /**
+     * Update the dropdown position based on constraint and offset.
+     */
+    private updatePosition() {
+        const { x, y, height } = this.constraint;
+        const { dx, dy } = this.offset;
+        this.rootEl.style.left = `${x + dx}px`;
+        this.rootEl.style.top = `${y + height + dy}px`; // anchored below
+    }
+
+    /**
+     * Set inner HTML content of the dropdown.
+     * @param html - HTML string
+     */
+    setContent(html: string) {
+        this.rootEl.innerHTML = html;
+    }
+
+    /**
+     * Append an element as a child to the dropdown.
+     * @param element - Element to append
+     * @returns The appended element
+     */
+    appendChild(element: Element) {
+        this.rootEl.appendChild(element);
+        return element;
+    }
+
+    /**
+     * Show the dropdown for a given owner.
+     * @param owner - NodeSvg or Field that owns this dropdown
+     * @param options - Dropdown configuration options
+     */
+    show(owner: AllowedOwner, options: DropdownOptions) {
+        if (!owner.svgGroup) return;
+        this.hide(); // close existing dropdown first
+        this.owner = owner;
+        if (options) this.options = options;
+        if (this.currentRemoveListener) this.currentRemoveListener();
+        this.currentRemoveListener = null;
+        const groupRect = owner.svgGroup.node.getBoundingClientRect();
+        this.constraint = {
+            x: groupRect.left + window.scrollX,
+            y: groupRect.top + window.scrollY,
+            width: groupRect.width,
+            height: groupRect.height,
+        };
+
+        this.offset = { dx: 0, dy: 0 };
+
+        this.rootEl.innerHTML = "";
+        if (options.width) this.rootEl.style.width = `${options.width}px`;
+        this.rootEl.style.display = "block";
+
+        // Render items
+        if (options.items) {
+            options.items.forEach((item) => {
+                const el = document.createElement("div");
+                el.className = "KabelDropdownItem";
+                el.textContent = item.label;
+                el.onclick = () => {
+                    options.onSelect?.(item.value, item);
+                    this.hide();
+                };
+                this.rootEl.appendChild(el);
+            });
+        }
+        if (owner instanceof NodeSvg) {
+            // Add a move listener to the node's workspace.
+            const ws = owner.workspace;
+            let remove = ws?.addMoveListener(() => {
+                if (this.owner !== owner) {
+                    remove!(); // disconnect when owner changes.
+                    return;
+                }
+                this.hideIfOwner(owner)
+            });
+            this.currentRemoveListener = remove as () => void;
+        }
+        if (owner instanceof Field) {
+            // Add a move listener to the field's workspace.
+            const ws = owner.node!.workspace;
+            let remove = ws?.addMoveListener(() => {
+                if (this.owner !== owner) {
+                    console.log("Disconnecting..");
+                    remove!(); // disconnect when owner changes.
+                    return;
+                }
+                console.log("Hiding..");
+                this.hide();
+            });
+            this.currentRemoveListener = remove as () => void;
+        }
+        this.updatePosition();
+        DropdownContainer.current = this;
+    }
+
+    /**
+     * Hide this dropdown.
+     */
+    hide() {
+        if (DropdownContainer.current !== this) return;
+        this.rootEl.style.display = "none";
+        this.rootEl.innerHTML = "";
+        this.owner = null;
+        this.options = null;
+        DropdownContainer.current = null;
+        if (this.currentRemoveListener) this.currentRemoveListener();
+        this.currentRemoveListener = null;
+    }
+
+    /**
+     * Hide this dropdown if the given owner currently owns it.
+     * @param owner - The owner to check
+     */
+    hideIfOwner(owner: AllowedOwner) {
+        if (this.owner === owner) {
+            this.hide();
+        }
+    }
+
+    /** @returns True if the dropdown is currently visible */
+    isVisible(): boolean {
+        return DropdownContainer.current === this;
+    }
+
+    /** @returns The current owner of the dropdown, or null if none */
+    getOwner(): AllowedOwner | null {
+        return this.owner;
+    }
+
+    /** @returns The currently visible dropdown container singleton */
+    static getCurrent(): DropdownContainer | null {
+        return DropdownContainer.current;
+    }
+}
+
+// Singleton export
+const dropdownContainer = new DropdownContainer();
+export default dropdownContainer;
+export { DropdownContainer };