@kabel-project/kabel 1.0.7 → 1.0.9

package/src/styles.css

@@ -1,224 +0,0 @@
-/* Workspace wrapper: horizontal layout */
-.KabelWorkspaceWrapper {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 100%;
-    background: #f0f0f0;
-    /* light gray background */
-    overflow: hidden;
-    position: relative;
-}
-
-/* Toolbox panel (left) */
-.KabelToolbox {
-    width: 12%;
-    min-width: 150px;
-    height: 100%;
-    background: rgba(240, 240, 240, 0.95);
-    border-right: 1px solid #ccc;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    padding: 8px;
-    overflow-y: auto;
-}
-
-/* Context menu container */
-.KabelContextMenu {
-    position: absolute;
-    background: #1e1e2f;
-    color: #000000;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
-    padding: 4px 0;
-    font-family: 'Segoe UI', sans-serif;
-    font-size: 14px;
-    min-width: 160px;
-    z-index: 9999;
-    user-select: none;
-    overflow: visible;
-    height: auto;
-    transition: opacity 0.15s ease, transform 0.15s ease;
-    opacity: 0;
-    transform: scale(0.95);
-    display: flex;
-    flex-direction: column;
-}
-
-/* Show state */
-.KabelContextMenu.show {
-    opacity: 1;
-    transform: scale(1);
-}
-
-/* Individual option */
-.KabelContextOption {
-    padding: 8px 16px;
-    cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease;
-}
-.KabelContextOption:hover {
-    background: #b0adb0;
-    color: #fff;
-}
-.KabelContextOption.disabled {
-	opacity: 0.35;
-	cursor: not-allowed;
-	color: #777; /* dim it so it's obviously off */
-	background: transparent;
-	pointer-events: none;
-}
-
-/* make sure hover never triggers visually */
-.KabelContextOption.disabled:hover {
-	background: transparent;
-	color: #777;
-}
-
-/* Optional: active click effect */
-.KabelContextOption:active {
-    background: #fff;
-    color: #000;
-}
-
-/* Scrollbar if too many options */
-.KabelContextMenu::-webkit-scrollbar {
-    width: 6px;
-}
-
-.KabelContextMenu::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
-}
-
-/* Category buttons */
-
-.KabelCategoryRow {
-    background: #fff;
-    border: 1px solid #ccc;
-    padding: 4px 8px;
-    margin-bottom: 4px;
-    border-radius: 4px;
-    height: 5%;
-    padding: 6px;
-    cursor: pointer;
-    text-align: left;
-    transition: background 0.2s, color 0.2s;
-}
-
-.KabelToolbox button:hover {
-    background: #e6e6e6;
-    color: #333;
-}
-
-.KabelConnectionBubbleHighlight {
-    stroke: yellow !important;
-    stroke-width: 6px !important;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-    filter: drop-shadow(0 0 6px rgba(255, 255, 0, 0.9));
-}
-
-.KabelConnectionBubbleHighlightWrong {
-    stroke: rgb(255, 0, 0) !important;
-    stroke-width: 6px !important;
-    stroke-linejoin: round;
-    stroke-linecap: round;
-    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.9));
-}
-
-/* Container */
-.KabelDropdownMenu {
-    position: absolute;
-    display: none;
-    background: #1e1e1e;
-    color: #f0f0f0;
-    font-family: sans-serif;
-    font-size: 14px;
-    border: 1px solid #333;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
-    padding: 4px 0;
-    z-index: 9999;
-    user-select: none;
-    animation: fadeIn 0.15s ease-out;
-}
-
-/* Dropdown items */
-.KabelDropdownItem {
-    padding: 6px 12px;
-    cursor: pointer;
-    transition: background 0.15s;
-}
-
-/* Hover + focus states */
-.KabelDropdownItem:hover,
-.KabelDropdownItem:focus {
-    background: #2d2d2d;
-}
-
-/* Active (clicked) state */
-.KabelDropdownItem:active {
-    background: #3a3a3a;
-}
-
-/* Optional: highlight selected value */
-.KabelDropdownItem.selected {
-    background: #444;
-    font-weight: 600;
-}
-
-/* Smooth open effect */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-3px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-
-
-/* Flyout panel (right) */
-.KabelFlyout {
-    width: 20%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.95);
-    border-left: 1px solid #ccc;
-    box-sizing: border-box;
-    overflow-y: auto;
-    position: relative;
-    /* for absolute positioning of nodes inside */
-    display: none;
-    /* hidden by default */
-    padding: 8px;
-}
-
-/* Flyout nodes */
-.KabelFlyoutNode {
-    padding: 6px 10px;
-    margin-bottom: 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    user-select: none;
-    transition: background 0.2s;
-}
-
-.KabelFlyoutNode:hover {
-    background: #e0e0e0;
-}
-
-/* SVG workspace area */
-.KabelWorkspaceWrapper svg {
-    flex: 1;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    /* white canvas background */
-    display: block;
-}

package/src/toolbox.ts

@@ -1,125 +0,0 @@
-import Flyout from "./flyout";
-import { InjectOptions, TblxCategoryStruct, TblxNodeStruct } from "./inject";
-import WorkspaceSvg, { WSTheme } from "./workspace-svg";
-import Category from "./category";
-
-/**
- * Represents the toolbox in a Kabel workspace.
- * The toolbox can be either a flyout or a category-based toolbox.
- */
-class Toolbox {
-    /** Toolbox type: 1 = category toolbox, 2 = flyout toolbox */
-    type: 1 | 2;
-
-    /** Reference to the workspace this toolbox belongs to */
-    workspace: WorkspaceSvg;
-
-    /** Workspace options for initialization */
-    wsOptions: InjectOptions;
-
-    /** Flyout instance for node display */
-    _flyout: Flyout;
-
-    /** Contents of the toolbox (nodes or categories) */
-    _contents: TblxNodeStruct[] | TblxCategoryStruct[];
-
-    /** DOM container element for the toolbox */
-    container: HTMLDivElement;
-
-    /** List of categories (if using a category toolbox) */
-    _categories: Category[] = [];
-
-    /**
-     * Creates a new Toolbox instance attached to a workspace.
-     * @param workspace The workspace instance to attach this toolbox to
-     */
-    constructor(workspace: WorkspaceSvg) {
-        this.workspace = workspace;
-        this.wsOptions = this.getOptions();
-        this.type = this.wsOptions.toolbox?.type == "flyout" ? 2 : 1;
-        this._contents = this.wsOptions.toolbox?.contents ?? [];
-
-        // Pass toolbox reference to flyout
-        this._flyout = new Flyout(this);
-
-        // Create container element
-        this.container = document.createElement("div");
-        this.container.className = "KabelToolbox";
-        this.container.style.position = "absolute";
-        this.container.style.left = "0";
-        this.container.style.top = "0";
-        this.container.style.width = "20%";
-        this.container.style.height = "100%";
-        this.container.style.background = "rgba(240,240,240,0.9)";
-        this.container.style.overflowY = "auto";
-
-        // Append to workspace top layer
-        workspace._wsTop.appendChild(this.container);
-
-        // Initialize toolbox depending on type
-        if (this.type === 1) this.initCategoryToolbox();
-        if (this.type === 2) this.initFlyoutToolbox();
-    }
-    /**
-     * Applies a WSTheme to the toolbox and flyout elements.
-     * @param theme The workspace theme to apply
-     */
-    updateStyles(theme: WSTheme) {
-        if (!theme?.UIStyles) return;
-
-        const { toolboxCategoriesBG, toolboxFlyoutBG } = theme.UIStyles;
-
-        const applyStyles = (el: HTMLElement, styles?: Partial<CSSStyleDeclaration>) => {
-            if (!styles) return;
-
-            for (const key in styles) {
-                const k = key as keyof CSSStyleDeclaration;
-                const v = styles[k];
-                // Only assign if value exists
-                if (v !== undefined) {
-                    // cast to any to avoid TS errors
-                    (el.style as any)[k] = v;
-                }
-            }
-        };
-
-        if (this.type === 1) applyStyles(this.container, toolboxCategoriesBG);
-        if (this._flyout?.container) applyStyles(this._flyout.container, toolboxFlyoutBG);
-    }
-
-
-    /**
-     * Retrieves the workspace options.
-     * @returns The workspace's InjectOptions
-     */
-    getOptions() {
-        return this.workspace.options;
-    }
-
-    /**
-     * Initializes a category-based toolbox.
-     * Converts the toolbox contents into Category instances and attaches them.
-     */
-    initCategoryToolbox() {
-        const categories = this._contents as TblxCategoryStruct[];
-        categories.forEach(cData => {
-            const category = new Category(this, cData);
-            this._categories.push(category);
-        });
-
-        // Hide flyout when workspace is clicked
-        this.workspace.svg.on("click", () => this._flyout.hide());
-    }
-
-    /**
-     * Initializes a flyout toolbox.
-     * Fills the flyout with the node definitions from the toolbox contents.
-     */
-    initFlyoutToolbox() {
-        this.container.style.display = "none";
-        const nodes = this._contents as TblxNodeStruct[];
-        this._flyout.fill(nodes);
-    }
-}
-
-export default Toolbox;

package/src/undo-redo.ts

@@ -1,87 +0,0 @@
-import WorkspaceSvg from "./workspace-svg";
-
-interface HistoryEntry {
-	state: any; // serialized workspace or diff
-}
-
-export default class UndoRedoHistory {
-	private ws: WorkspaceSvg;
-	private undoStack: HistoryEntry[] = [];
-	private redoStack: HistoryEntry[] = [];
-	private isRecording: boolean = true;
-
-	constructor(ws: WorkspaceSvg) {
-		this.ws = ws;
-	}
-
-	emitChange() {
-		if (!this.isRecording) return;
-		if (!this.ws.recordHistory) return;
-
-		const state = this.ws.toJson ? this.ws.toJson(true) : {};
-		this.undoStack.push({ state });
-		this.redoStack.length = 0;
-
-		//console.log("[emitChange] pushed state. undoStack size:", this.undoStack.length, "redoStack cleared");
-	}
-
-	undo() {
-		//console.log("[undo] called. undoStack size:", this.undoStack.length, "redoStack size:", this.redoStack.length);
-
-		if (this.undoStack.length <= 1) {
-			//console.log("[undo] nothing to undo.");
-			return;
-		}
-
-		const current = this.undoStack.pop();
-		//console.log("[undo] popped current state:", current);
-
-		const prev = this.undoStack[this.undoStack.length - 1];
-		//console.log("[undo] previous state to restore:", prev);
-
-		if (!prev) {
-			//console.log("[undo] no previous state found.");
-			return;
-		}
-
-		this.isRecording = false;
-		this.ws.fromJson?.(prev.state);
-		this.isRecording = true;
-
-		this.redoStack.push(current as HistoryEntry);
-		//console.log("[undo] state restored. undoStack size now:", this.undoStack.length, "redoStack size now:", this.redoStack.length);
-	}
-
-	redo() {
-		//console.log("[redo] called. undoStack size:", this.undoStack.length, "redoStack size:", this.redoStack.length);
-
-		const entry = this.redoStack.pop();
-		if (!entry) {
-			//console.log("[redo] nothing to redo.");
-			return;
-		}
-
-		//console.log("[redo] popping state from redoStack:", entry);
-
-		this.isRecording = false;
-		this.ws.fromJson?.(entry.state);
-		this.isRecording = true;
-
-		this.undoStack.push(entry);
-		//console.log("[redo] state restored. undoStack size now:", this.undoStack.length, "redoStack size now:", this.redoStack.length);
-	}
-
-	clear() {
-		this.undoStack = [];
-		this.redoStack = [];
-		//console.log("[clear] undo and redo stacks cleared");
-	}
-
-	canUndo() {
-		return this.undoStack.length > 1;
-	}
-
-	canRedo() {
-		return this.redoStack.length > 0;
-	}
-}

package/src/widget-prototypes.ts

@@ -1,11 +0,0 @@
-import { WidgetOptions } from "./widget";
-
-/**
- * A list of prototypes for widgets.
- */
-export interface WidgetPrototypeList {
-    [key: string]: WidgetOptions
-}
-
-const WidgetPrototypes: WidgetPrototypeList = {};
-export default WidgetPrototypes;

package/src/widget.ts

@@ -1,139 +0,0 @@
-import WorkspaceSvg from "./workspace-svg";
-import Coordinates from "./coordinates";
-import { generateUID } from "../util/uid";
-import Workspace from "./workspace";
-
-export interface WidgetOptions {
-    /**
-     * Widget class to instantiate for the widget, by default it uses Kabel's
-     */
-    cls?: typeof Widget;
-    /**
-     * Coordinates to spawn the widget at.
-     */
-    coords?: Coordinates;      // where to position the widget
-    /**
-     * Width of the widget
-     */
-    width?: number;            // optional width
-    /**
-     * Height of the widget.
-     */
-    height?: number;           // optional height
-    /**
-     * Class to give the widget's html container.
-     */
-    className?: string;        // optional CSS class
-    /**
-     * Widget inner HTML default content.
-     */
-    html?: string;             // inner HTML
-    /**
-     * Widget name
-     */
-    name: string;
-    /**
-     * Sets up a new widget of this type
-     * @param this - This context of the function points to widget.
-     * @param widget - The widget this function is called on.
-     * @param html - The html container of the widget.
-     * @returns - Void.
-     */
-    init?: (this: WidgetOptions, widget: Widget, html: HTMLElement) => void;
-}
-class Widget {
-    workspace: WorkspaceSvg|Workspace;
-    container: HTMLDivElement;
-    coords: Coordinates;
-    width: number;
-    height: number;
-    visible: boolean;
-    name: string;
-    id: string;
-    options: WidgetOptions;
-    static WIDGET_GLOBAL_ID = 0;
-    constructor(workspace: WorkspaceSvg|Workspace, options: WidgetOptions = { name: `Untitled(${Widget.WIDGET_GLOBAL_ID++})` }) {
-        this.workspace = workspace;
-        this.coords = options.coords ?? new Coordinates(0, 0);
-        this.width = options.width ?? 200;
-        this.height = options.height ?? 100;
-        this.visible = false;
-        this.name = options.name;
-        this.id = generateUID('nanoid', { alphabet: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0129384756!)@(#*$&%^' });
-        this.options = options;
-        this.container = document.createElement("div");
-        this.container.className = options.className ?? "KabelWidget";
-        this.container.style.position = "absolute";
-        this.container.style.left = `${this.coords.x}px`;
-        this.container.style.top = `${this.coords.y}px`;
-        this.container.style.width = `${this.width}px`;
-        this.container.style.height = `${this.height}px`;
-        this.container.style.background = "rgba(255,255,255,0.9)";
-        this.container.style.border = "1px solid #aaa";
-        this.container.style.borderRadius = "4px";
-        this.container.style.boxShadow = "0 2px 6px rgba(0,0,0,0.2)";
-        this.container.style.pointerEvents = "auto";
-        this.container.style.zIndex = "1000"; // overlays nodes
-
-        if (options.html) this.container.innerHTML = options.html;
-
-        if (!this.workspace.isHeadless) (this.workspace as WorkspaceSvg)._wsTop.appendChild(this.container);
-        this.hide();
-        if (typeof options.init !== 'undefined' && options.init) {
-            options.init(this, this.container);
-        }
-    }
-
-    // Show the widget
-    show() {
-        this.container.style.display = "block";
-        this.visible = true;
-    }
-
-    // Hide the widget
-    hide() {
-        this.container.style.display = "none";
-        this.visible = false;
-    }
-
-    // Move the widget to new coords
-    setCoords(coords: Coordinates) {
-        this.coords = coords;
-        this.container.style.left = `${coords.x}px`;
-        this.container.style.top = `${coords.y}px`;
-    }
-
-    // Update the HTML content
-    setHTML(html: string) {
-        this.container.innerHTML = html;
-    }
-    // Bring widget back from the dead after a .destroy call
-    reanimate() {
-        this.container = document.createElement("div");
-        this.container.className = this.options.className ?? "KabelWidget";
-        this.container.style.position = "absolute";
-        this.container.style.left = `${this.coords.x}px`;
-        this.container.style.top = `${this.coords.y}px`;
-        this.container.style.width = `${this.width}px`;
-        this.container.style.height = `${this.height}px`;
-        this.container.style.background = "rgba(255,255,255,0.9)";
-        this.container.style.border = "1px solid #aaa";
-        this.container.style.borderRadius = "4px";
-        this.container.style.boxShadow = "0 2px 6px rgba(0,0,0,0.2)";
-        this.container.style.pointerEvents = "auto";
-        this.container.style.zIndex = "1000"; // overlays nodes
-        
-        if (this.options.html) this.container.innerHTML = this.options.html;
-        if (this.workspace.isHeadless) return;
-
-        (this.workspace as WorkspaceSvg)._wsTop.appendChild(this.container);
-        this.workspace._addWidgetToDB(this);
-    }
-    // Destroy widget & cleanup.
-    destroy() {
-        this.container.remove();
-        this.workspace._delWidgetFromDB(this);
-    }
-}
-
-export default Widget;