@kabel-project/kabel 1.0.7 → 1.0.8

package/src/flyout.ts

@@ -1,165 +0,0 @@
-import newHeadlessNode from "./headless-node";
-import { TblxNodeStruct } from "./inject";
-import Toolbox from "./toolbox";
-import { parseColor } from "../util/parse-color";
-import { Color } from "./visual-types";
-
-/**
- * Represents a flyout menu for a toolbox in Kabel.
- * Displays a list of nodes that can be dragged into a workspace.
- */
-class Flyout {
-	container: HTMLDivElement;
-	visible: boolean;
-	toolbox?: Toolbox|undefined;
-
-	constructor(toolbox?: Toolbox) {
-		this.toolbox = toolbox;
-
-		this.container = document.createElement("div");
-		this.container.className = "KabelFlyout";
-
-		this.visible = false;
-
-		if (toolbox) {
-			toolbox.workspace._wsTop.appendChild(this.container);
-		} else {
-			document.body.appendChild(this.container);
-		}
-	}
-
-	/**
-	 * Populates the flyout with a list of nodes.
-	 */
-	fill(nodes: TblxNodeStruct[]) {
-		this.clear();
-		nodes.forEach(node => {
-			const headlessNode = newHeadlessNode(node.type as string);
-			if (!headlessNode) return;
-
-			const nodeEl = this.createNodeElement(headlessNode);
-			this.container.appendChild(nodeEl);
-		});
-
-		this.show();
-	}
-
-	/**
-	 * Creates a DOM element for a node with event listeners attached.
-	 */
-	private createNodeElement(headlessNode: any): HTMLDivElement {
-		const nodeEl = document.createElement("div");
-		nodeEl.className = "KabelFlyoutNode";
-		nodeEl.textContent = headlessNode.labelText;
-
-		this.applyNodeStyles(nodeEl, headlessNode.colors.primary);
-
-		nodeEl.addEventListener("mousedown", e => this.onNodeMouseDown(e, headlessNode));
-		return nodeEl;
-	}
-
-	/**
-	 * Applies consistent styling to a node element.
-	 */
-	private applyNodeStyles(el: HTMLElement, bgColor: Color) {
-		el.style.backgroundColor = parseColor(bgColor);
-		el.style.padding = "4px 8px";
-		el.style.cursor = "pointer";
-
-		if (this.toolbox?.workspace?.renderer?.constants) {
-			const c = this.toolbox.workspace.renderer.constants;
-			el.style.fontFamily = c.FONT_FAMILY;
-			el.style.fontSize = `${c.FONT_SIZE}px`;
-			el.style.color = parseColor(c.FONT_COLOR);
-		}
-	}
-
-	/**
-	 * Handles starting a drag operation for a node.
-	 */
-	private onNodeMouseDown(e: MouseEvent, headlessNode: any) {
-		if (!this.toolbox) return;
-
-		const ghostEl = this.createGhostNode(headlessNode);
-		document.body.appendChild(ghostEl);
-
-		const moveGhost = (ev: MouseEvent) => {
-			ghostEl.style.left = ev.clientX + 4 + "px";
-			ghostEl.style.top = ev.clientY + 4 + "px";
-		};
-
-		const releaseGhost = (ev: MouseEvent) => {
-			document.removeEventListener("mousemove", moveGhost);
-			document.removeEventListener("mouseup", releaseGhost);
-
-			this.dropNode(ev, headlessNode);
-
-			ghostEl.remove();
-		};
-
-		document.addEventListener("mousemove", moveGhost);
-		document.addEventListener("mouseup", releaseGhost);
-
-		e.preventDefault();
-	}
-
-	/**
-	 * Creates a ghost element that follows the mouse during drag.
-	 */
-	private createGhostNode(headlessNode: any): HTMLDivElement {
-		const ghostEl = document.createElement("div");
-		ghostEl.className = "KabelGhostNode";
-		ghostEl.textContent = headlessNode.labelText;
-		ghostEl.style.position = "absolute";
-		ghostEl.style.pointerEvents = "none";
-
-		this.applyNodeStyles(ghostEl, headlessNode.colors.primary);
-		return ghostEl;
-	}
-
-	/**
-	 * Handles dropping a node into the workspace if the mouse is over it.
-	 */
-	private dropNode(ev: MouseEvent, node: TblxNodeStruct) {
-		if (!this.toolbox) return;
-
-		const svg = this.toolbox.workspace.svg.node as SVGSVGElement;
-		const rect = svg.getBoundingClientRect();
-
-		if (
-			ev.clientX >= rect.left &&
-			ev.clientX <= rect.right &&
-			ev.clientY >= rect.top &&
-			ev.clientY <= rect.bottom
-		) {
-			const { x: wsX, y: wsY } = this.toolbox.workspace.screenToWorkspace(
-				ev.clientX - rect.left,
-				ev.clientY - rect.top
-			);
-
-			const nodews = this.toolbox.workspace.spawnAt(node.type as string, wsX, wsY);
-			if (nodews) {
-				for (let argName in node.arguments) {
-					nodews.setFieldValue(argName, node.arguments[argName]);
-				}
-				this.toolbox.workspace.drawNode(nodews.id);
-			}
-		}
-	}
-
-	show() {
-		this.container.style.display = "block";
-		this.visible = true;
-	}
-
-	hide() {
-		this.container.style.display = "none";
-		this.visible = false;
-	}
-
-	clear() {
-		this.container.innerHTML = "";
-	}
-}
-
-export default Flyout;

package/src/fonts-manager.ts

@@ -1,38 +0,0 @@
-
-
-// fonts-manager.ts
-
-const loadedFonts: Record<string, Promise<void>> = {};
-
-/**
- * Load a Google Font by name and optional weights.
- * Returns a promise that resolves when the font is available.
- */
-export function loadGoogleFont(
-	name: string,
-	weights: number[] = [400, 700]
-): Promise<void> {
-	if (loadedFonts[name]) return loadedFonts[name]; // already loading/loaded
-
-	const linkId = `gf-${name.replace(/\s+/g, '-')}`;
-	if (!document.getElementById(linkId)) {
-		const link = document.createElement('link');
-		link.id = linkId;
-		link.rel = 'stylesheet';
-		const weightsParam = weights.join(';');
-		link.href = `https://fonts.googleapis.com/css2?family=${name.replace(
-			/\s+/g,
-			'+'
-		)}:wght@${weightsParam}&display=swap`;
-		document.head.appendChild(link);
-	}
-
-	// wait for all requested weights to be loaded
-	const fontPromises = weights.map((w) =>
-		document.fonts.load(`${w} 1em ${name}`)
-	);
-
-	const promise = Promise.all(fontPromises).then(() => undefined);
-	loadedFonts[name] = promise;
-	return promise;
-}

package/src/grid.ts

@@ -1,162 +0,0 @@
-import { Svg, Pattern, Rect } from "@svgdotjs/svg.js";
-import WorkspaceSvg from "./workspace-svg";
-import { addWindowListener } from "../util/window-listeners";
-
-/**
- * Options for configuring the workspace grid.
- * @typedef {Object} GridOptions
- * @property {"dotted"|"celled"} [type="dotted"] - The type of grid to render.
- * @property {number} [spacing=40] - The spacing between grid dots or cells.
- * @property {number} [dotSize=2] - The radius of the dots (only for dotted type).
- * @property {number} [strokeWidth=2] - Stroke width of the cells (only for celled type).
- * @property {string} [color="#bebebeff"] - Color of the grid.
- */
-export interface GridOptions {
-    type?: "dotted" | "celled";
-    spacing?: number;
-    dotSize?: number;
-    strokeWidth?: number;
-    color?: string;
-}
-
-/**
- * Handles drawing and managing a workspace background grid.
- */
-export default class Grid {
-    private ws: WorkspaceSvg;
-    private svg: Svg;
-    private pattern?: Pattern;
-    private rect?: Rect;
-
-    /** Cached + normalized grid values */
-    private grid: Required<GridOptions>;
-
-    /**
-     * Creates a new Grid instance and attaches it to the given workspace SVG.
-     * @param {WorkspaceSvg} ws - The workspace this grid belongs to.
-     * @param {Svg} svg - The SVG element to draw the grid into.
-     * @param {GridOptions} opts - Initial options for the grid.
-     */
-    constructor(ws: WorkspaceSvg, svg: Svg, opts: GridOptions) {
-        this.ws = ws;
-        this.svg = svg;
-
-        this.grid = {
-            type: opts.type ?? "dotted",
-            spacing: opts.spacing ?? 40,
-            dotSize: opts.dotSize ?? 2,
-            strokeWidth: opts.strokeWidth ?? 2,
-            color: opts.color ?? "#bebebeff",
-        };
-
-        this.init();
-    }
-
-    /**
-     * Initializes the grid pattern, background rect, and attaches resize listener.
-     * @private
-     */
-    private init() {
-        if (this.rect) {
-            this.rect.remove();
-        }
-        const { type, spacing, dotSize, strokeWidth, color } = this.grid;
-
-        let defs = this.svg.findOne("defs");
-        if (!defs) defs = this.svg.defs();
-
-        this.pattern = this.svg.pattern(spacing, spacing, (add) => {
-            if (type === "dotted") {
-                add
-                    .circle(dotSize * 2)
-                    .fill(color)
-                    .move(spacing / 2 - dotSize, spacing / 2 - dotSize);
-            } else {
-                add.rect(spacing, spacing).stroke({ color, width: strokeWidth }).fill("none");
-            }
-        });
-        this.pattern.attr({ patternUnits: "userSpaceOnUse" });
-        defs.add(this.pattern);
-
-        const { width, height } = this.ws.getSize();
-        this.rect = this.svg
-            .rect(width, height)
-            .fill(this.pattern)
-            .back()
-            .addClass("WorkspaceBgPattern");
-
-        addWindowListener("resize", () => this.resize());
-    }
-
-    /**
-     * Resizes the grid background rect to fit the workspace size.
-     */
-    resize() {
-        if (!this.rect) return;
-        const { width, height } = this.ws.getSize();
-        this.rect.size(width, height).back();
-        this.ws._backgroundRect.back();
-    }
-
-    /**
-     * Updates the grid pattern transform according to zoom and camera position.
-     * Scales the dots/cells to match zoom and repositions them based on camera.
-     */
-    updateTransform() {
-        if (!this.pattern || !this.rect) return;
-        const { type, spacing, dotSize, strokeWidth, color } = this.grid;
-
-        const zoom = this.ws.getZoom();
-        const scaledSpacing = spacing * zoom;
-
-        this.pattern.attr({ width: scaledSpacing, height: scaledSpacing });
-        this.pattern.clear();
-
-        if (type === "dotted") {
-            const scaledDot = Math.max(dotSize * zoom, 0.5);
-            this.pattern
-                .circle(scaledDot * 2)
-                .fill(color)
-                .move(scaledSpacing / 2 - scaledDot, scaledSpacing / 2 - scaledDot);
-        } else {
-            this.pattern
-                .rect(scaledSpacing, scaledSpacing)
-                .stroke({ color, width: strokeWidth * zoom })
-                .fill("none");
-        }
-
-        const cam = this.ws._camera;
-        this.pattern.attr({
-            patternTransform: `translate(${-cam.x * zoom % scaledSpacing}, ${-cam.y * zoom % scaledSpacing})`,
-        });
-
-        this.resize();
-        this.ws._backgroundRect.back();
-    }
-
-    /**
-     * Updates internal grid options from the workspace configuration.
-     */
-    updateOptions() {
-        const opts = this.ws.options!.grid;
-        this.grid = {
-            type: opts!.type ?? "dotted",
-            spacing: opts!.spacing ?? 40,
-            dotSize: opts!.dotSize ?? 2,
-            strokeWidth: opts!.strokeWidth ?? 2,
-            color: opts!.color ?? "#bebebeff",
-        };
-        this.init();
-    }
-
-    /**
-     * Dynamically sets new grid options and rebuilds the grid pattern.
-     * @param {Partial<GridOptions>} newOpts - New options to apply.
-     */
-    setOptions(newOpts: Partial<GridOptions>) {
-        Object.assign(this.grid, newOpts);
-        this.rect?.remove?.();
-        this.pattern?.remove?.();
-        this.init(); // rebuild
-    }
-}

package/src/headless-node.ts

@@ -1,27 +0,0 @@
-import { NodePrototype } from "./node-types";
-import NodeSvg from "./nodesvg";
-import NodePrototypes from "./prototypes";
-
-/**
- * Creates a new headless NodeSvg instance without attaching it to a workspace.
- * This is useful for programmatic node generation, testing, or serialization.
- *
- * @param type - The type of node to create. Must exist in NodePrototypes.
- * @returns The initialized NodeSvg instance, or `undefined` if the prototype does not exist.
- */
-function newHeadlessNode(type: string): NodeSvg | undefined {
-    const proto: NodePrototype = NodePrototypes[type as string] as NodePrototype;
-
-    // Return undefined if prototype not found
-    if (!proto) return;
-
-    // Create a new node instance
-    const node = new NodeSvg(proto);
-
-    // Initialize the node (calls prototype init, sets defaults)
-    node.init();
-
-    return node;
-}
-
-export default newHeadlessNode;

package/src/index.ts

@@ -1,115 +0,0 @@
-/**
- * Kabel Core Export Module
- * ------------------------
- * Aggregates all core Kabel modules, types, utilities, and components,
- * and exports them under a single namespace.
- */
-
-import RendererConstants from "../renderers/constants";
-import Renderer, { DrawState, ConnectorToFrom } 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, ConnectableField, 
-    FieldRawBoxData, FieldConnectionData 
-} from "./field";
-import inject, { 
-    InjectMsg, InjectOptions, TblxCategoryStruct, TblxObjStruct, 
-    TblxFieldStruct, TblxNodeStruct, GridOptions
-} from "./inject";
-import { clearMainWorkspace, getMainWorkspace, setMainWorkspace } from "./main-workspace";
-import NodeSvg, { NodeJson, NodeEvents, InputFieldJson, SerializedNode } from "./nodesvg";
-import NodePrototypes from "./prototypes";
-import WorkspaceSvg from "./workspace-svg";
-import WorkspaceCoords from "./workspace-coords";
-import { NodePrototype } from "./node-types";
-import { Color, ColorStyle, Hex, RGBObject, RGBString, RGBTuple } from "./visual-types";
-import { parseColor } from "../util/parse-color";
-import eventer, { Eventer,  EventSetupFn, EventArgs, RegisteredEl } from "../util/eventer";
-import hasProp from "../util/has-prop";
-import EventEmitter from "../util/emitter";
-import * as Path from "../util/path";
-import * as SVG from "@svgdotjs/svg.js";
-import * as UID from "../util/uid";
-
-import K from "./core";
-import Widget, { WidgetOptions } from "./widget";
-import { WidgetPrototypeList } from "./widget-prototypes";
-import Showable, { KabelInterface, KabelCommentRendering, KabelNodeRendering, KabelUIX, KabelUtils } from "./types";
-
-//@ts-ignore
-const Kabel: KabelInterface = K;
-export default Kabel;
-
-// Core types and utilities
-export {
-    KabelInterface,
-    TblxCategoryStruct,
-    TblxNodeStruct,
-    TblxFieldStruct,
-    TblxObjStruct,
-    RendererConstants,
-    Renderer,
-    CategoryColors,
-    Connection,
-    Coordinates,
-    Field,
-    DummyField,
-    FieldMap,
-    NumberField,
-    OptConnectField,
-    TextField,
-    FieldOptions,
-    FieldVisualInfo,
-    AnyFieldCls,
-    AnyField,
-    ConnectableField,
-    FieldRawBoxData,
-    FieldConnectionData,
-    inject,
-    InjectMsg,
-    InjectOptions,
-    clearMainWorkspace,
-    getMainWorkspace,
-    setMainWorkspace,
-    NodeSvg,
-    NodePrototypes,
-    WorkspaceSvg,
-    WorkspaceCoords,
-    NodePrototype,
-    Color, ColorStyle, Hex, RGBObject, RGBString, RGBTuple,
-    NodeJson, NodeEvents, InputFieldJson,
-    SerializedNode,
-    Eventer,
-    EventSetupFn,
-    EventArgs,
-    Connectable,
-    DrawState,
-    ConnectorToFrom,
-    WidgetOptions,
-    WidgetPrototypeList,
-    KabelCommentRendering,
-    KabelNodeRendering,
-    KabelUIX,
-    KabelUtils,
-    Showable,
-    RegisteredEl,
-    GridOptions
-};
-
-// Core classes used by public API
-export { default as CommentModel } from './comment';
-
-export { default as Toolbox } from './toolbox';
-export { default as ContextMenuHTML } from './context-menu';
-export { default as Widget } from './widget';
-export {  DropdownContainer } from './dropdown-menu';
-export { RepresenterNode } from '../renderers/representer-node';
-export { default as CommentRenderer } from '../comment-renderer/renderer';
-export { default as Representer } from '../renderers/representer';
-
-// Controllers
-export { default as WorkspaceController } from '../controllers/base';
-export { default as WASDController } from '../controllers/wasd';

package/src/inject-headless.ts

@@ -1,18 +0,0 @@
-import { InjectMsg } from "./inject";
-import { setMainWorkspace } from "./main-workspace";
-import Workspace from "./workspace";
-
-
-
-
-function injectHeadless() : Workspace | undefined {
-    try {
-        const ws = new Workspace();
-        setMainWorkspace(ws);
-        return ws;
-    } catch (e) {
-        new InjectMsg(`Failed to initialize workspace: ${(e as Error).message}`).err();
-    }
-}
-
-export default injectHeadless;

package/src/mutator.ts

@@ -1,40 +0,0 @@
-import NodeSvg from "./nodesvg"
-import WorkspaceSvg from "./workspace-svg";
-
-const Mutations : {[key: string]: MutatorData}= {
-    // Stores mut_name: MutationData for MutatorModel
-}
-
-class MutatorModel {
-    // ignore this class for now, but keep it.
-}
-interface MutatorData {
-	/**
-	 * Called to create a container representing the editable state of the node.
-	 * Equivalent to Blockly's `decompose`.
-	 */
-	decompose(this: MutatorModel, workspace: WorkspaceSvg): NodeSvg;
-
-	/**
-	 * Called after the user edits the container; rebuilds the node from it.
-	 * Equivalent to Blockly's `compose`.
-	 */
-	compose(this: NodeSvg, containerBlock: NodeSvg): void;
-
-	/**
-	 * Serialize the node’s mutation state to JSON for saving/exporting.
-	 * Equivalent to Blockly's `mutationToDom`.
-	 */
-	mutationToJson(this: NodeSvg): {[key: string]: any};
-
-	/**
-	 * Load/apply mutation state from JSON when loading/importing.
-	 * Equivalent to Blockly's `domToMutation`.
-	 */
-	jsonToMutation(this: NodeSvg, json: {[key: string]: any}): void;
-
-	/**
-	 * Whether Kabel should render the default UI for this mutator.
-	 */
-	isEditable: boolean;
-}