@kabel-project/kabel 1.0.7

package/src/undo-redo.ts

@@ -0,0 +1,87 @@
+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/visual-types.ts

@@ -0,0 +1,29 @@
+/**
+ * A RGB array (ex: {r: 255, g: 255, b: 255})
+ */
+export type RGBObject = { r: number; g: number; b: number };
+/**
+ * A RGB tuple (ex: [255, 255, 255])
+ */
+export type RGBTuple = [number, number, number];
+/**
+ * A RGB string (ex: '255, 255, 255')
+ */
+export type RGBString = `${number}, ${number}, ${number}`;
+/**
+ * A hex color
+ */
+export type Hex = `#${string}`;
+/**
+ * A color, whether it be #ffffff, {r, g, b}, 'r, g, b', or [r, g, b]
+ */
+export type Color = RGBObject | RGBString | RGBTuple | Hex;
+/**
+ * Stores color data for a visual element on screen.
+ */
+export interface ColorStyle {
+    primary: Color;
+    secondary: Color;
+    tertiary: Color;
+    category?: string;
+}

package/src/widget-prototypes.ts

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

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

package/src/workspace-coords.ts

@@ -0,0 +1,14 @@
+import Coordinates from "./coordinates";
+
+
+
+/**
+ * A class that represents Workspace Camera Coords.
+ * May be used in the future, right now its a no-op Coords wrapper.
+ */
+class WorkspaceCoords extends Coordinates {
+    constructor(x = 0, y = 0) {
+        super(x, y);
+    }
+}
+export default WorkspaceCoords;