@kabel-project/kabel 1.0.7 → 1.0.9

package/comment-renderer/renderer.ts

@@ -1,228 +0,0 @@
-import Renderer from '../renderers/renderer';
-import WorkspaceSvg from '../src/workspace-svg';
-import NodeSvg from '../src/nodesvg';
-import CommentModel from '../src/comment';
-import { Element, SVG, Svg } from '@svgdotjs/svg.js';
-import eventer from '../util/eventer';
-
-class CommentRenderer {
-	static get NAME() { return 'cr_atlas'; }
-	static get COMMENT_G_TAG() { return 'KabelCommentGroup'; }
-	static get COMMENT_LINE_TAG() { return 'KabelCommentLine'; }
-	static get COMMENT_TEXT_EL() { return 'KabelCommentText'; }
-	static get COMMENT_DRAG_EL() { return 'KabelCommentDragHandle'; }
-	static get RENDERER_TAG_EL() { return 'KabelCommentElTag'; }
-
-	workspace: WorkspaceSvg;
-
-	constructor(workspace: WorkspaceSvg) {
-		this.workspace = workspace;
-	}
-
-	encodeForSvg(s: string) {
-		return s.replace(/ /g, "\u00A0");
-	}
-
-	ensureTspansPreserve(node: HTMLElement) {
-		Array.from(node.childNodes).forEach((child) => {
-			if (child.nodeType === 1) {
-				(child as HTMLElement).setAttribute("xml:space", "preserve");
-			}
-		});
-	}
-
-	measureTextBbox(textEl: Element) {
-		return textEl.bbox();
-	}
-
-	drawComment(comment: CommentModel) {
-		const svg = this.getSvg();
-		this._removeExistingElements(comment);
-
-		const g = svg.group().addClass(CommentRenderer.COMMENT_G_TAG);
-		g.attr({
-			'comment-data': JSON.stringify({
-				id: comment.id,
-				isws: comment.isWorkspaceComment()
-			})
-		});
-		comment.svgGroup = g;
-
-		const padding = 4;
-		const handleRadius = 6;
-		const textOffsetX = padding + handleRadius * 2 + 4;
-
-		const displayEncoded = this.encodeForSvg(comment.getText());
-		const textEl = this._createTextElement(g, displayEncoded, textOffsetX, padding);
-
-		const bbox = this.measureTextBbox(textEl);
-
-		const rect = this._createBackgroundRect(g, bbox, padding, handleRadius);
-		const dragHandle = this._createDragHandle(g, bbox, padding, handleRadius);
-
-		this._addEventer(rect, dragHandle, comment, textEl);
-
-		const { screenPos, zoom } = this._computeScreenPosition(comment);
-		g.attr({ transform: `translate(${screenPos.x}, ${screenPos.y}) scale(${zoom})` });
-
-		if (comment._parent instanceof NodeSvg && comment._parent.svgGroup) {
-			this._drawLineToNode(comment, padding);
-		}
-	}
-
-	refreshCommentTransforms() {
-		for (const comment of [
-			...this.workspace.getComments(),
-			...Array.from(this.workspace._nodeDB.values())
-				.map(n => n.getComment())
-				.filter(c => !!c) as CommentModel[]
-		]) {
-			if (!comment.svgGroup) continue;
-
-			const { screenPos, zoom } = this._computeScreenPosition(comment);
-			comment.svgGroup.attr({ transform: `translate(${screenPos.x}, ${screenPos.y}) scale(${zoom})` });
-
-			if (comment.svgLine) {
-				comment.svgLine.remove();
-				comment.svgLine = undefined;
-			}
-
-			if (comment._parent instanceof NodeSvg) {
-				this._drawLineToNode(comment, 4);
-			}
-		}
-	}
-
-	private _removeExistingElements(comment: CommentModel) {
-		if (comment.svgGroup) comment.svgGroup.remove();
-		if (comment.svgLine) comment.svgLine.remove();
-	}
-
-	private _createTextElement(parent: Element, text: string, x: number, y: number) {
-        //@ts-ignore
-		const textEl = parent.text(text)
-			.font({ family: 'Arial', size: 12 })
-			.fill('#000')
-			.move(x, y)
-			.addClass(CommentRenderer.COMMENT_TEXT_EL);
-
-		textEl.node.style.userSelect = 'none';
-		// @ts-ignore
-		textEl.node.style!.webkitUserSelect = 'none';
-		// @ts-ignore
-		textEl.node.style!.msUserSelect = 'none';
-		// @ts-ignore
-		textEl.node.style!.MozUserSelect = 'none';
-		return textEl;
-	}
-
-	private _createBackgroundRect(parent: Element, bbox: any, padding: number, handleRadius: number) {
-        //@ts-ignore
-		return parent.rect(bbox.width + padding * 2 + handleRadius * 2 + 4, bbox.height + padding * 2)
-			.fill('#ffffcc')
-			.stroke({ color: '#cccc99', width: 1 })
-			.radius(4)
-			.back();
-	}
-
-	private _createDragHandle(parent: Element, bbox: any, padding: number, handleRadius: number) {
-        //@ts-ignore
-		return parent.circle(handleRadius * 2)
-			.fill('#adad7d')
-			.move(padding, padding + (bbox.height / 2) - handleRadius)
-			.addClass(CommentRenderer.COMMENT_DRAG_EL);
-	}
-
-	private _addEventer(rect: Element, dragHandle: Element, comment: CommentModel, textEl: Element) {
-		eventer.addElement(dragHandle, 'k_draghandle', { comment })
-			.tagElement(dragHandle, CommentRenderer.RENDERER_TAG_EL);
-		eventer.addElement(rect, "k_commentinp", { comment, text: textEl, renderer: this })
-			.tagElement(rect, CommentRenderer.RENDERER_TAG_EL);
-	}
-
-	private _computeScreenPosition(comment: CommentModel) {
-		let workspaceX = comment.relativeCoords.x;
-		let workspaceY = comment.relativeCoords.y;
-
-		if (comment._parent instanceof NodeSvg) {
-			const nodePos = comment._parent.relativeCoords;
-			workspaceX += nodePos.x;
-			workspaceY += nodePos.y;
-		}
-
-		const screenPos = this.workspace.workspaceToScreen(workspaceX, workspaceY);
-		const zoom = this.workspace.getZoom();
-		return { screenPos, zoom };
-	}
-
-	private _drawLineToNode(comment: CommentModel, padding: number) {
-		if (!comment || !(comment._parent instanceof NodeSvg) || !comment.svgGroup) return;
-		const svg = this.getSvg();
-		const ws = this.workspace;
-
-		if (comment.svgLine) comment.svgLine.remove();
-
-		const nodeWSPos = comment._parent.relativeCoords;
-		const nodeBBox = comment._parent.svgGroup!.bbox();
-		const nodeTopCenter = ws.workspaceToScreen(
-			nodeWSPos.x + nodeBBox.width / 2,
-			nodeWSPos.y
-		);
-
-		const parentWSPos = comment._parent.relativeCoords;
-		const commentRelPos = comment.relativeCoords;
-		const commentAbsX = parentWSPos.x + commentRelPos.x;
-		const commentAbsY = parentWSPos.y + commentRelPos.y;
-		const commentBBox = comment.svgGroup!.bbox();
-		const commentTopCenter = ws.workspaceToScreen(
-			commentAbsX + (commentBBox.width + padding * 2) / 2,
-			commentAbsY
-		);
-
-		comment.svgLine = svg.line(
-			nodeTopCenter.x, nodeTopCenter.y,
-			commentTopCenter.x, commentTopCenter.y
-		)
-			.stroke({ color: '#888', width: 1, dasharray: '3,2' })
-			.addClass(CommentRenderer.COMMENT_LINE_TAG)
-			.back();
-	}
-
-	clearAllComments() {
-		const svg = this.getSvg();
-		svg.find(`.${CommentRenderer.COMMENT_G_TAG}`).forEach(el => el.remove());
-		svg.find(`.${CommentRenderer.COMMENT_LINE_TAG}`).forEach(el => el.remove());
-		eventer.destroyByTag(CommentRenderer.RENDERER_TAG_EL);
-
-		for (let [_, node] of this.workspace._nodeDB) {
-			const comment = node.getComment();
-			if (comment) comment.svgGroup = undefined;
-		}
-
-		for (const comment of this.workspace.getComments()) {
-			comment.svgGroup = undefined;
-		}
-	}
-
-	clearCommentLines() {
-		const svg = this.getSvg();
-		svg.find(`.${CommentRenderer.COMMENT_LINE_TAG}`).forEach(el => el.remove());
-	}
-
-	drawAllComments() {
-		for (const comment of this.workspace.getComments()) this.drawComment(comment);
-		for (let [_, node] of this.workspace._nodeDB) {
-			const comment = node.getComment();
-			if (comment) this.drawComment(comment);
-		}
-	}
-
-	getSvg(): Svg {
-		return this.workspace.svg;
-	}
-    getWs(): WorkspaceSvg {
-        return this.workspace;
-    }
-}
-
-export default CommentRenderer;

package/controllers/base.ts

@@ -1,186 +0,0 @@
-import WorkspaceSvg from '../src/workspace-svg';
-import userState from '../util/user-state';
-
-interface Vec2 { x: number; y: number; }
-
-export default class WorkspaceController {
-    workspace: WorkspaceSvg;
-
-    keysDown: Set<string>;
-    mouseBtns: Set<number>;
-    mousePos: Vec2;
-    lastMousePos: Vec2;
-    isDragging: boolean;
-
-    wheelDelta: number;
-    movedListeners: (() => void)[];
-    _lastMoveFire = 0;
-    _moveThrottleMs = 100; // bump this to whatever doesn't lag you
-    _queuedMove = false;
-    _moveTimeout: any = null;
-    _updateInt: any;
-
-    constructor(workspace: WorkspaceSvg) {
-        this.workspace = workspace;
-
-        this.keysDown = new Set();
-        this.mouseBtns = new Set();
-        this.mousePos = { x: 0, y: 0 };
-        this.lastMousePos = { x: 0, y: 0 };
-        this.isDragging = false;
-        this.wheelDelta = 0;
-        this.movedListeners = [];
-
-        this._setupListeners();
-
-        this._updateInt = setInterval(() => this.update(), 16);
-    }
-    addMoveListener(cb: () => void) {
-        this.movedListeners.push(cb);
-    }
-
-    removeMoveListener(cb: () => void) {
-        const i = this.movedListeners.indexOf(cb);
-        if (i !== -1) this.movedListeners.splice(i, 1);
-    }
-
-    fireDidMove() {
-        if (typeof queueMicrotask !== 'undefined') {
-            queueMicrotask(() => {
-                for (let cb of this.movedListeners) {
-                    try { cb(); } catch (e) { console.error(e); }
-                }
-            });
-        } else {
-            Promise.resolve().then(() => {
-                for (let cb of this.movedListeners) {
-                    try { cb(); } catch (e) { console.error(e); }
-                }
-            });
-        }
-    }
-
-    _throttledFireDidMove() {
-        const now = performance.now();
-
-        // enough time passed → fire instantly
-        if (now - this._lastMoveFire >= this._moveThrottleMs) {
-            this._lastMoveFire = now;
-            this.fireDidMove();
-            return;
-        }
-
-        // otherwise queue ONE fire
-        if (!this._queuedMove) {
-            this._queuedMove = true;
-            const wait = this._moveThrottleMs - (now - this._lastMoveFire);
-
-            this._moveTimeout = setTimeout(() => {
-                this._queuedMove = false;
-                this._lastMoveFire = performance.now();
-                this.fireDidMove();
-            }, wait);
-        }
-    }
-    getZoom() {
-        return 1;
-    }
-    canMove() {
-        return true;
-    }
-    private _setupListeners() {
-        window.addEventListener('keydown', e => this.keysDown.add(e.key));
-        window.addEventListener('keyup', e => this.keysDown.delete(e.key));
-
-        window.addEventListener('mousedown', e => this.mouseBtns.add(e.button));
-        window.addEventListener('mouseup', e => this.mouseBtns.delete(e.button));
-
-        window.addEventListener('mousemove', e => {
-            this.lastMousePos = { ...this.mousePos };
-            this.mousePos = { x: e.clientX, y: e.clientY };
-        });
-
-        window.addEventListener('wheel', e => {
-            this.wheelDelta = e.deltaY;
-        });
-
-        window.addEventListener('mousedown', e => {
-            if (e.button === 0) this.isDragging = true;
-        });
-        window.addEventListener('mouseup', e => {
-            if (e.button === 0) this.isDragging = false;
-        });
-    }
-
-    update() {
-        // Can handle keyboard shortcuts or auto-pan here
-    }
-
-    // --- Camera methods ---
-    pan(dx: number, dy: number) {
-        const x = this.workspace._camera.x, y = this.workspace._camera.y;
-        this.workspace._camera.x += dx;
-        this.workspace._camera.y += dy;
-        if (x == this.workspace._camera.x && y == this.workspace._camera.y) {
-            return;
-        }
-        this._throttledFireDidMove();
-        this.workspace.didMove = true;
-        this.workspace.fireMoveListeners();
-        this.refreshPos();
-    }
-
-    setCamera(pos: Vec2) {
-        const x = this.workspace._camera.x, y = this.workspace._camera.y;
-        this.workspace._camera.x = pos.x;
-        this.workspace._camera.y = pos.y;
-        if (x == this.workspace._camera.x && y == this.workspace._camera.y) {
-            return;
-        }
-        this._throttledFireDidMove();
-        this.workspace.didMove = true;
-        this.workspace.fireMoveListeners();
-        this.refreshPos();
-    }
-
-    centerOn(pos: Vec2) {
-        const wsSize = this.workspace.getSize?.() ?? { width: 0, height: 0 };
-        this.setCamera({
-            x: pos.x - wsSize.width / 2,
-            y: pos.y - wsSize.height / 2
-        });
-    }
-
-
-
-    // --- Coordinate conversion ---
-    screenToWorkspace(x: number, y: number): Vec2 {
-        const cam = this.workspace._camera;
-        return {
-            x: x + cam.x,
-            y: y + cam.y
-        };
-    }
-
-    workspaceToScreen(x: number, y: number): Vec2 {
-        const cam = this.workspace._camera;
-        return {
-            x: (x - cam.x),
-            y: (y - cam.y)
-        };
-    }
-
-    // --- Refresh ---
-    refreshPos() {
-        this.workspace.refresh?.();
-    }
-
-    redraw() {
-        this.workspace.redraw?.();
-    }
-
-    // --- Cleanup ---
-    stop() {
-        clearInterval(this._updateInt);
-    }
-}

package/controllers/wasd.ts

@@ -1,132 +0,0 @@
-import WorkspaceController from './base';
-import WorkspaceSvg from '../src/workspace-svg';
-import userState from '../util/user-state';
-
-interface Vec2 { x: number; y: number; }
-
-export default class WASDController extends WorkspaceController {
-    moveSpeed: number;
-    doAccelerate?: boolean;
-    accelSpeed: number;
-    friction: number;
-    velocity: Vec2;
-    zoom: number = 1;
-    zoomSpeed: number;
-    minZoom: number;
-    maxZoom: number;
-    isFalloff: boolean;
-    constructor(workspace: WorkspaceSvg, moveSpeed?: number) {
-        super(workspace);
-        this.moveSpeed = workspace.options.moveSpeed || moveSpeed || 5;
-
-        this.doAccelerate = workspace.options?.controls?.wasdSmooth ?? false;
-        this.accelSpeed = workspace.options?.controls?.wasdAccelerate ?? 0.2;
-        this.friction = workspace.options?.controls?.wasdFriction ?? 0.85;
-
-        this.velocity = { x: 0, y: 0 };
-        this.isFalloff = false;
-
-        // Zoom settings
-        this.zoomSpeed = workspace.options?.controls?.zoomSpeed ?? 0.1;
-        this.minZoom = workspace.options?.controls?.minZoom ?? 0.1;
-        this.maxZoom = workspace.options?.controls?.maxZoom ?? 4;
-        this.zoom = 1;
-        // Bind wheel for zoom
-        workspace._wsTop.addEventListener('wheel', this.onWheel.bind(this), { passive: false });
-    }
-
-    canMove() {
-        return !userState.hasState('typing');
-    }
-
-    update() {
-        super.update();
-        if (!this.canMove()) return;
-
-        let inputX = 0;
-        let inputY = 0;
-
-        if (this.keysDown.has('w') || this.keysDown.has('ArrowUp')) inputY -= 1;
-        if (this.keysDown.has('s') || this.keysDown.has('ArrowDown')) inputY += 1;
-        if (this.keysDown.has('a') || this.keysDown.has('ArrowLeft')) inputX -= 1;
-        if (this.keysDown.has('d') || this.keysDown.has('ArrowRight')) inputX += 1;
-
-        if (this.doAccelerate) {
-            // Accelerate velocity towards input direction
-            this.velocity.x += inputX * this.accelSpeed;
-            this.velocity.y += inputY * this.accelSpeed;
-
-            // Apply friction
-            this.velocity.x *= this.friction;
-            this.velocity.y *= this.friction;
-            if (inputX == 0 && inputY == 0) {
-                this.isFalloff = true;
-            } else {
-                this.isFalloff = false;
-            }
-            // Only pan if velocity is noticeable
-            if (Math.abs(this.velocity.x) > 0.01 || Math.abs(this.velocity.y) > 0.01) {
-                this.pan(this.velocity.x, this.velocity.y);
-            }
-        } else {
-            // Instant movement
-            const dx = inputX * this.moveSpeed;
-            const dy = inputY * this.moveSpeed;
-            if (dx !== 0 || dy !== 0) this.pan(dx, dy);
-        }
-    }
-    pan(dx: number, dy: number) {
-        const x = this.workspace._camera.x, y = this.workspace._camera.y;
-        this.workspace._camera.x += dx;
-        this.workspace._camera.y += dy;
-        if (x == this.workspace._camera.x && y == this.workspace._camera.y) {
-            return;
-        }
-        if (!this.isFalloff) {
-            this._throttledFireDidMove();
-            this.workspace.didMove = true;
-            this.workspace.fireMoveListeners();
-            this.refreshPos();
-        }
-        this.refreshPos();
-    }
-    /**
-     * Handles wheel events for zooming.
-     * Zooms around the mouse position for intuitive zooming.
-     */
-    onWheel(e: WheelEvent) {
-        e.preventDefault();
-
-        const oldZoom = this.getZoom();
-        let delta = -e.deltaY * this.zoomSpeed * 0.01; // normalize wheel
-        let newZoom = oldZoom * (1 + delta);
-
-        // Clamp zoom
-        newZoom = Math.max(this.minZoom, Math.min(this.maxZoom, newZoom));
-
-        // Zoom around cursor
-        const mouseX = e.clientX;
-        const mouseY = e.clientY;
-
-        const wsMouse = this.workspace.screenToWorkspace(mouseX, mouseY);
-
-        // Apply new zoom
-        this.setZoom(newZoom);
-
-        // Adjust camera so the point under cursor stays stable
-        this.workspace._camera.x = wsMouse.x - mouseX / newZoom;
-        this.workspace._camera.y = wsMouse.y - mouseY / newZoom;
-
-        this.workspace.refresh();
-    }
-
-    /** Returns current zoom level */
-    getZoom() {
-        return this.zoom;
-    }
-
-    /** Sets zoom directly */
-    setZoom(zoom: number) {
-        this.zoom = zoom;
-    }
-}

package/docs/README.md

@@ -1,98 +0,0 @@
-**Kabel Project Docs v1.0.6**
-
-***
-
-# Kabel
-[![npm version](https://img.shields.io/npm/v/@kabel-project/kabel)](https://www.npmjs.com/package/@kabel-project/kabel)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
-
-Node-based visual editor framework with an API inspired by Google’s Blockly project.  
-Fully extensible with custom nodes, fields, and renderers.  
-Written in TypeScript and ready to use out of the box.
-
-![Kabel workspace screenshot](_media/workspace.png)
-
----
-
-## Installation
-
-You can install Kabel in two main ways:
-
-**Using npm (recommended):**
-```bash
-cd path/to/your/project
-npm install @kabel-project/kabel
-```
-
-**Cloning from GitHub (Experimental builds):**
-
-```bash
-git clone https://github.com/FentFentFent/Kabel.git --depth 1
-cd Kabel
-npm install
-npm run build
-```
-
-Then import Kabel from the build:
-
-```js
-import Kabel from './Kabel/dist/kabel.js';
-```
-
-##### Quick Starter HTML
-
-```html
-<div id="workspace-container" style="width:800px;height:600px;"></div>
-<script type="module">
-  import Kabel from 'kabel';
-  Kabel.inject('workspace-container', {
-    /* Your options here... */
-  });
-</script>
-```
-
----
-
-## Features
-
-* ⚡ Extensible: create custom nodes, fields, and renderers.
-* 🛠️ TypeScript support out of the box.
-* 🎨 Renderer override system for custom visuals.
-* ⌨️ Built-in workspace controls (WASD movement, drag, etc.).
-
----
-
-## Example
-
-```js
-import Kabel from 'kabel';
-
-const ws = Kabel.inject('workspace-container', {
-  controls: { wasd: true, wasdSmooth: true }
-});
-
-// Register a simple node
-Kabel.Nodes['example'] = {
-  init() {
-    this.jsonInit({
-      labelText: 'Hello Kabel',
-      type: 'example_node',
-      primaryColor: '#cc0c00'
-    });
-  }
-};
-```
-
-For another example refer to [Kabel Test](_media/index.html)
-
----
-
-## Documentation
-
-Please refer to [Kabel Guide](_media/docs.md)
-
----
-
-## License
-
-MIT