@kabel-project/kabel 1.0.7 → 1.0.9

package/src/core.ts

@@ -1,202 +0,0 @@
-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

@@ -1,143 +0,0 @@
-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

@@ -1,215 +0,0 @@
-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 };