@kabel-project/kabel 1.0.7

package/docs/variables/default.md

@@ -0,0 +1,11 @@
+[**Kabel Project Docs v1.0.6**](../README.md)
+
+***
+
+[Kabel Project Docs](../globals.md) / default
+
+# Variable: default
+
+> `const` **default**: [`KabelInterface`](../interfaces/KabelInterface.md) = `K`
+
+Defined in: [src/index.ts:43](https://github.com/FentFentFent/Kabel/blob/6a658c7afa967c18ecfb5cdff24af90b7d7319c3/src/index.ts#L43)

package/events/comment-drag-handle.ts

@@ -0,0 +1,61 @@
+import { Element } from '@svgdotjs/svg.js';
+import NodeSvg from '../src/nodesvg';
+import eventer from '../util/eventer';
+import type { EventSetupFn } from '../util/eventer';
+import WorkspaceSvg from '../src/workspace-svg';
+import userState from '../util/user-state';
+import CommentModel from '../src/comment';
+
+/** The drag handle for comments */
+function initDraggable(element: Element, args: Record<string, any>): () => void {
+    const comment = args.comment as CommentModel;
+    if (!comment) return () => { };
+
+    let startX = 0;
+    let startY = 0;
+    let startRelX = 0;
+    let startRelY = 0;
+
+    function onPointerDown(ev: PointerEvent) {
+        ev.preventDefault();
+
+        const ws = comment.getWorkspace();
+        const rel = comment.relativeCoords;
+
+        // Capture offset from pointer to comment in workspace coords
+        const pointerWS = ws.screenToWorkspace(ev.clientX, ev.clientY);
+        startRelX = rel.x - pointerWS.x;
+        startRelY = rel.y - pointerWS.y;
+
+        document.addEventListener('pointermove', onPointerMove);
+        document.addEventListener('pointerup', onPointerUp);
+    }
+
+    function onPointerMove(ev: PointerEvent) {
+        const ws = comment.getWorkspace();
+
+        // Map pointer to workspace
+        const pointerWS = ws.screenToWorkspace(ev.clientX, ev.clientY);
+
+        // Add initial offset
+        comment.relativeCoords.set(pointerWS.x + startRelX, pointerWS.y + startRelY);
+
+        ws.refreshComments();
+    }
+
+
+
+    function onPointerUp() {
+        document.removeEventListener('pointermove', onPointerMove);
+        document.removeEventListener('pointerup', onPointerUp);
+    }
+
+    element.node.addEventListener('pointerdown', onPointerDown);
+
+    // Cleanup function
+    return () => {
+        element.node.removeEventListener('pointerdown', onPointerDown);
+    };
+}
+
+eventer.registerEvent('k_draghandle', initDraggable as EventSetupFn);

package/events/comment-input.ts

@@ -0,0 +1,291 @@
+import { Element as SvgElement, Rect as SvgRect, Text as SvgText } from "@svgdotjs/svg.js";
+import CommentModel from "../src/comment";
+import eventer, { EventSetupFn } from "../util/eventer";
+import userState from '../util/user-state';
+import Renderer from "../comment-renderer/renderer"
+
+type InitArgs = {
+    comment: CommentModel;
+    text: SvgText;
+    renderer: Renderer;
+};
+
+function initCommentInput(element: SvgElement, rawArgs: any) {
+    const args = rawArgs as InitArgs;
+    const comment = args.comment;
+    const txt = args.text as SvgText;
+    const rect = element as unknown as SvgRect;
+    const renderer = args.renderer;
+
+    let editing = false;
+    let skipNextClick = false;
+    let buffer = comment.getText() ?? "";
+    let cursorPos = buffer.length;
+    let anchorPos = buffer.length;
+
+    const PADDING_X = 4;
+    const PADDING_Y = 4;
+
+    function getSelectionRange() {
+        const start = Math.min(cursorPos, anchorPos);
+        const end = Math.max(cursorPos, anchorPos);
+        return { start, end };
+    }
+
+    function hasSelection() {
+        return cursorPos !== anchorPos;
+    }
+
+    function deleteSelection() {
+        if (!hasSelection()) return false;
+        const { start, end } = getSelectionRange();
+        buffer = buffer.slice(0, start) + buffer.slice(end);
+        cursorPos = start;
+        anchorPos = start;
+        return true;
+    }
+
+    function encodeForSvg(s: string) {
+        return s.replace(/ /g, "\u00A0").replace(/\n/g, "
");
+    }
+
+    function ensureTspansPreserve(node: Element) {
+        Array.from(node.childNodes).forEach((child) => {
+            if (child.nodeType === 1) (child as Element).setAttribute("xml:space", "preserve");
+        });
+    }
+
+    let caretLine: SvgRect | null = null;
+    let selectionRect: SvgRect | null = null;
+
+    // --- MEASURE TEXT WIDTH USING COMMENT RENDERER ---
+    function measureTextWidth(text: string, fontSize?: number, fontFamily?: string) {
+        // Delegate to renderer’s measureTextBbox logic
+        const tempText = renderer.getSvg().text(text).font({ size: fontSize || 12, family: fontFamily || "Arial" });
+        const bbox = renderer.measureTextBbox(tempText);
+        tempText.remove();
+        return bbox.width;
+    }
+
+    function updateText() {
+        const { start, end } = getSelectionRange();
+        const hasSel = hasSelection();
+
+        // redraw main text
+        txt.clear().tspan(encodeForSvg(buffer));
+        txt.attr({ "xml:space": "preserve" });
+        try { ensureTspansPreserve(txt.node as Element); } catch { }
+        txt.leading(1.2);
+
+        // --- selection highlight ---
+        if (hasSel) {
+            const fontSize = parseFloat(txt.attr('font-size') as string) || 14;
+            const fontFamily = txt.attr('font-family') as string || 'Arial';
+
+            const textBeforeStart = buffer.slice(0, start);
+            const textBeforeEnd = buffer.slice(0, end);
+
+            const bbox = txt.bbox();
+            const highlightX = bbox.x + measureTextWidth(textBeforeStart, fontSize, fontFamily);
+            const highlightWidth = Math.max(
+                measureTextWidth(textBeforeEnd, fontSize, fontFamily) - measureTextWidth(textBeforeStart, fontSize, fontFamily),
+                1
+            );
+            const highlightY = bbox.y;
+            const highlightH = bbox.height;
+
+            if (!selectionRect) {
+                //@ts-ignore
+                selectionRect = rect!.parent()!.rect?.(highlightWidth, highlightH)
+                    .fill('#3390ff')
+                    .attr({ 'fill-opacity': 0.35 });
+                selectionRect!.node.parentNode!.insertBefore(selectionRect!.node, txt.node);
+            } else {
+                selectionRect.size(highlightWidth, highlightH);
+            }
+
+            selectionRect!.move(highlightX, highlightY);
+        } else {
+            if (selectionRect) { selectionRect.remove(); selectionRect = null; }
+        }
+
+        // --- caret ---
+        if (editing) {
+            const fontSize = parseFloat(txt.attr('font-size') as string) || 14;
+            const fontFamily = txt.attr('font-family') as string || 'Arial';
+            const textBeforeCaret = buffer.slice(0, cursorPos);
+            const caretXOffset = measureTextWidth(textBeforeCaret, fontSize, fontFamily);
+
+            const bbox = txt.bbox();
+            const caretY = bbox.y;
+            const caretH = bbox.height;
+
+            //@ts-ignore
+            if (!caretLine) caretLine = rect.parent().rect(1, caretH).fill('#000');
+
+            caretLine!.size(1, caretH).move(bbox.x + caretXOffset, caretY);
+        } else {
+            if (caretLine) { caretLine.remove(); caretLine = null; }
+        }
+
+        // --- resize background rect ---
+        const bbox = txt.bbox();
+        const handleRadius = 6;
+        const textOffsetX = PADDING_X + handleRadius * 2 + 4;
+        const rectW = Math.max(16, Math.ceil(bbox.width) + textOffsetX + PADDING_X);
+        const rectH = Math.max(16, Math.ceil(bbox.height) + PADDING_Y * 2);
+        rect.size(rectW, rectH);
+
+        comment._tempInputBBox = {
+            width: rectW,
+            height: rectH,
+            textX: textOffsetX,
+            textY: PADDING_Y
+        };
+    }
+
+    // --- editing lifecycle ---
+    function startEditing(ev?: MouseEvent) {
+        if (editing) return;
+        editing = true;
+        buffer = comment.getText() ?? "";
+        cursorPos = buffer.length;
+        anchorPos = buffer.length;
+
+        userState.setState('typing');
+
+        if (ev) {
+            const rectBox = txt.node.getBoundingClientRect();
+            //@ts-ignore
+            const zoom = renderer.getWs().getZoom();
+            const clickX = (ev.clientX - rectBox.left - PADDING_X) / zoom;
+
+            let cumulativeWidth = 0;
+            cursorPos = 0;
+            for (let i = 0; i < buffer.length; i++) {
+                const charWidth = measureTextWidth(buffer[i] as string);
+                if (cumulativeWidth + charWidth / 2 >= clickX) break;
+                cumulativeWidth += charWidth;
+                cursorPos = i + 1;
+            }
+        }
+
+        anchorPos = cursorPos;
+        updateText();
+        skipNextClick = true;
+
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("mousedown", onClickOutside);
+    }
+
+    function stopEditing(commit = true) {
+        if (!editing) return;
+        editing = false;
+        userState.removeState("typing");
+        document.removeEventListener("keydown", onKeyDown, { capture: true });
+        document.removeEventListener("mousedown", onClickOutside);
+
+        if (commit) comment.setTextNoRedraw(buffer);
+        updateText();
+        comment.getWorkspace()?.redraw?.();
+    }
+
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (!editing) return;
+
+        if (e.key === "Escape") { e.preventDefault(); stopEditing(false); return; }
+
+        if (e.key === "Enter") {
+            e.preventDefault();
+            stopEditing(true);
+        } else if (e.key === "Backspace") {
+            e.preventDefault();
+            if (hasSelection()) {
+                deleteSelection();
+            } else if (cursorPos > 0) {
+                buffer = buffer.slice(0, cursorPos - 1) + buffer.slice(cursorPos);
+                cursorPos--;
+                anchorPos = cursorPos;
+            }
+        } else if (e.key === "Delete") {
+            e.preventDefault();
+            if (hasSelection()) {
+                deleteSelection();
+            } else if (cursorPos < buffer.length) {
+                buffer = buffer.slice(0, cursorPos) + buffer.slice(cursorPos + 1);
+            }
+        }
+        else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            if (e.shiftKey) {
+                // extend selection left
+                cursorPos = Math.max(0, cursorPos - 1);
+            } else {
+                // collapse selection and move
+                cursorPos = Math.max(0, cursorPos - 1);
+                anchorPos = cursorPos;
+            }
+        } else if (e.key === "ArrowRight") {
+            e.preventDefault();
+            if (e.shiftKey) {
+                // extend selection right
+                cursorPos = Math.min(buffer.length, cursorPos + 1);
+            } else {
+                // collapse selection and move
+                cursorPos = Math.min(buffer.length, cursorPos + 1);
+                anchorPos = cursorPos;
+            }
+        } else if (e.key === "Home") {
+            e.preventDefault();
+            if (e.shiftKey) {
+                cursorPos = 0; // anchor unchanged
+            } else {
+                cursorPos = 0;
+                anchorPos = cursorPos;
+            }
+        } else if (e.key === "End") {
+            e.preventDefault();
+            if (e.shiftKey) {
+                cursorPos = buffer.length;
+            } else {
+                cursorPos = buffer.length;
+                anchorPos = cursorPos;
+            }
+        } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+            e.preventDefault();
+            if (hasSelection()) deleteSelection();
+            buffer = buffer.slice(0, cursorPos) + e.key + buffer.slice(cursorPos);
+            cursorPos++;
+            anchorPos = cursorPos;
+        }
+
+        updateText();
+        comment.setTextNoRedraw(buffer);
+    }
+
+    function onClickOutside(ev: MouseEvent) {
+        if (!editing) return;
+        if (skipNextClick) { skipNextClick = false; return; }
+        const targ = ev.target as Node;
+        if (targ !== rect.node && targ !== txt.node) stopEditing(true);
+    }
+
+    const onRectDown = (ev: Event) => startEditing(ev as MouseEvent);
+    const onTextDown = (ev: Event) => startEditing(ev as MouseEvent);
+
+    rect.on("mousedown", onRectDown as any);
+    txt.on("mousedown", onTextDown as any);
+
+    updateText();
+
+    return () => {
+        rect.off("mousedown", onRectDown as any);
+        txt.off("mousedown", onTextDown as any);
+        document.removeEventListener("keydown", onKeyDown, { capture: true });
+        document.removeEventListener("mousedown", onClickOutside);
+    };
+}
+
+eventer.registerEvent("k_commentinp", initCommentInput as EventSetupFn);
+export default initCommentInput;

package/events/connection-line.ts

@@ -0,0 +1,68 @@
+import { Element, Svg } from '@svgdotjs/svg.js';
+import NodeSvg from '../src/nodesvg';
+import eventer from '../util/eventer';
+import type { EventSetupFn } from '../util/eventer';
+import WorkspaceSvg from '../src/workspace-svg';
+import userState from '../util/user-state';
+import Renderer, { ConnectorToFrom, DrawState } from '../renderers/renderer';
+
+
+
+function initConnectionLine(element: Element, args: Record<string, any>): () => void {
+    // click destroys the line
+    const handleClick = () => {
+        args.fromConn.disconnectTo();
+        args.toConn.disconnectFrom();
+        element.remove();
+        xMark.remove();
+        const remove: ConnectorToFrom[] = [];
+        for (let state of args.renderer._drawStates as DrawState[]) {
+            for (let pair of state.pendingConnections) {
+                if (pair.from == args.fromConn && pair.to == args.toConn) {
+                    remove.push(pair);
+                }
+                if (pair.from = args.toConn && pair.to == args.fromConn) {
+                    remove.push(pair);
+                }
+            }
+            state.pendingConnections = state.pendingConnections.filter(e => !remove.includes(e));
+        }
+    };
+
+    // create X element
+    const bbox = element.bbox();
+    const midX = bbox.x + bbox.width / 2;
+    const midY = bbox.y + bbox.height / 2;
+    const xMark = (element.parent()! as Svg).text('X').font({
+        family: 'Fredoka, sans-serif',
+        size: 46,
+        weight: '700',
+        anchor: 'middle',
+        leading: '1em'
+    })
+        .addClass((args.renderer.constructor as typeof Renderer).LINE_X_MARK_TAG)
+        .center(midX, midY)
+        .fill('#fff')           // white fill
+        .stroke({ color: '#000', width: 2 })  // black outline
+        .hide();
+
+    xMark.on('click', handleClick)
+    xMark.node.style.userSelect = 'none';
+    // show X on hover
+    element.on('mouseover', () => xMark.show());
+    element.on('mouseout', () => xMark.hide());
+
+    // attach click event
+    element.on('click', handleClick);
+
+    // cleanup function
+    return () => {
+        element.off('click', handleClick);
+        element.off('mouseover');
+        element.off('mouseout');
+        xMark.off('click', handleClick);
+        xMark.remove();
+    };
+}
+// ok
+eventer.registerEvent('k_connline', initConnectionLine as EventSetupFn);

package/events/connector.ts

@@ -0,0 +1,116 @@
+import { Element } from '@svgdotjs/svg.js';
+import Connection, { Connectable } from '../src/connection';
+import eventer, { EventArgs } from '../util/eventer';
+import userState from '../util/user-state';
+import Field, { AnyField } from '../src/field';
+import NodeSvg from '../src/nodesvg';
+import waitFrames from '../util/wait-anim-frames';
+import WorkspaceSvg from '../src/workspace-svg';
+interface ConnectionV {
+    conn: Connection,
+    el: Element,
+    args?: EventArgs
+}
+interface ConnectionState {
+    one: null | ConnectionV,
+    two: null | ConnectionV
+}
+
+
+const cState: ConnectionState = {
+    one: null,
+    two: null
+}
+
+
+function initConnector(el: Element, args?: EventArgs) {
+    args = args as {
+        connection: Connection,
+        node?: NodeSvg,
+        field?: AnyField
+    };
+    if (args.field && !args.field?.canEditConnector) { // If editing isnt allowed, close the event early.
+        return; 
+    }
+    el.on('click', () => {
+        const isPrev = args.connection.isPrevious;
+
+        // First click → must NOT be previous
+        if (!cState.one) {
+            if (isPrev) {
+                el.addClass('KabelConnectionBubbleHighlightWrong');
+                waitFrames(10, () => {
+                    el.removeClass('KabelConnectionBubbleHighlightWrong');
+                })
+                return;
+            }
+            cState.one = { conn: args.connection, el, args };
+            el.addClass('KabelConnectionBubbleHighlight');
+            userState.setState('connecting')
+            return;
+        }
+
+        // Second click → must be previous
+        if (!cState.two && (args?.node !== cState.one?.args?.node)) {
+            if (!isPrev) {
+                el.addClass('KabelConnectionBubbleHighlightWrong');
+                waitFrames(10, () => {
+                    el.removeClass('KabelConnectionBubbleHighlightWrong');
+                })
+                return;
+            }
+            if (cState.one.conn === args.connection) return; // ignore clicking the same again
+            cState.two = { conn: args.connection, el, args };
+            el.addClass('KabelConnectionBubbleHighlight');
+        }
+
+        // Both are filled → attempt to connect
+        if (cState.one && cState.two) {
+            if (cState.two.args?.node == cState.one.args?.node || cState.two.args?.node === cState.one?.args?.field?.node) {
+                cState.one.el.addClass('KabelConnectionBubbleHighlightWrong');
+                cState.two.el.addClass('KabelConnectionBubbleHighlightWrong');
+                waitFrames(10, () => {
+                    if (!cState) return;
+                    if (!cState.one || !cState.two) return;
+                    cState.one.el.removeClass('KabelConnectionBubbleHighlightWrong');
+                    cState.two.el.removeClass('KabelConnectionBubbleHighlightWrong');
+                    cState.one = null;
+                    cState.two = null;
+                })
+                userState.removeState('connecting');
+                return;
+            }
+            const { conn: connA } = cState.one;
+            const { conn: connB } = cState.two;
+
+            connA.disconnectTo();
+            connB.disconnectFrom();
+
+            connA.to = cState.two.args?.node;
+            connB.from = cState.one.args?.node || cState.one.args?.field;
+
+            waitFrames(2, () => {
+                if (cState.one?.args?.node) {
+                    cState.one.args.node.workspace?.redraw();
+                    (cState.one.args.node.workspace as WorkspaceSvg).emitChange();
+                } else if (cState.two?.args?.node) {
+                    cState.two.args.node.workspace?.redraw();
+                    (cState!.two!.args.node!.workspace as WorkspaceSvg).emitChange();
+
+                }
+                
+                
+                cState.one = null;
+                cState.two = null;
+                userState.removeState('connecting');
+
+            });
+        }
+    });
+    return () => {
+        el.off('click'); // removes the click listener
+    };
+
+}
+
+eventer.registerEvent('k_connectbubble', initConnector);

package/events/draggable.ts

@@ -0,0 +1,119 @@
+import { Element, G } from '@svgdotjs/svg.js';
+import NodeSvg from '../src/nodesvg';
+import eventer from '../util/eventer';
+import type { EventSetupFn } from '../util/eventer';
+import WorkspaceSvg from '../src/workspace-svg';
+import userState from '../util/user-state';
+
+const draggableStore: Record<string, { x: number, y: number }> = {};
+
+function initDraggable(element: Element, args: Record<string, any>): () => void {
+    let isDragging = false;
+    let offsetX = 0;
+    let offsetY = 0;
+
+    // fallback to element itself if no drag handle is given
+    const dragTarget: Element = args.dragel ?? element;
+
+    // Restore position if previously stored (type 3)
+    if (args.type === 3 && args.id && draggableStore[args.id]) {
+        const pos = draggableStore[args.id];
+        if (pos) element.move(pos.x, pos.y);
+    }
+
+    function onMouseDown(e: MouseEvent) {
+        if (args.type === 2 && args.node) {
+            const ws : WorkspaceSvg = args.node.workspace;
+            if (!ws) return;
+
+            const start = ws.screenToWorkspace(e.clientX, e.clientY);
+            const nodePos = args.node.relativeCoords;
+
+            offsetX = start.x - nodePos.x;
+            offsetY = start.y - nodePos.y;
+            ws.beginDrag(args.node, start.x, start.y);
+            (args.group as G).front();
+            
+        } else {
+            const bbox = element.bbox();
+            offsetX = e.clientX - bbox.x;
+            offsetY = e.clientY - bbox.y;
+        }
+
+        isDragging = false;
+
+        // Mark user as dragging
+        userState.setState('dragging');
+
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+
+        if (args.type === 1 && args.ondrag) args.ondrag(e);
+    }
+
+
+    function onMouseMove(e: MouseEvent) {
+        if (!isDragging) {
+            const dx = e.movementX || 0;
+            const dy = e.movementY || 0;
+            if (Math.abs(dx) > 2 || Math.abs(dy) > 2) isDragging = true;
+        }
+        if (!isDragging) return;
+
+        if (args.type === 2 && args.node && args.node instanceof NodeSvg) {
+            const ws: WorkspaceSvg = args.node.workspace as WorkspaceSvg;
+            if (!ws) return;
+
+            // Compute new workspace coordinates
+            const mouseWS = ws.screenToWorkspace(e.clientX, e.clientY);
+            const newX = mouseWS.x - offsetX;
+            const newY = mouseWS.y - offsetY;
+            args.node.relativeCoords.set(newX, newY);
+            ws.updateDrag(newX, newY);
+            ws.refresh();
+            // Move node visually
+            const screenPos = ws.workspaceToScreen(newX, newY);
+            element.attr({ transform: `translate(${screenPos.x}, ${screenPos.y}) scale(${ws.getZoom()})` });
+            
+            args.node.emit('NODE_DRAG', null);
+        } else if (args.type === 1 && args.onmove) {
+            const newX = e.clientX - offsetX;
+            const newY = e.clientY - offsetY;
+            element.move(newX, newY);
+            args.onmove({ x: newX, y: newY });
+        } else if (args.type === 3 && args.id) {
+            const newX = e.clientX - offsetX;
+            const newY = e.clientY - offsetY;
+            element.move(newX, newY);
+            draggableStore[args.id] = { x: newX, y: newY };
+        }
+    }
+
+    function onMouseUp(e: MouseEvent) {
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+
+        // Remove dragging state
+        userState.removeState('dragging');
+
+        if (args.type === 1 && args.enddrag) args.enddrag(e);
+        if (args.type === 2 && args.node && args.node instanceof NodeSvg) {
+            const ws: WorkspaceSvg = args.node.workspace as WorkspaceSvg;
+            if (!ws) return;
+            ws.emitChange();
+            ws.endDrag();
+        }
+        isDragging = false;
+    }
+
+    dragTarget.node.addEventListener('mousedown', onMouseDown);
+
+    // cleanup
+    return () => {
+        dragTarget.node.removeEventListener('mousedown', onMouseDown);
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    };
+}
+
+eventer.registerEvent('k_draggable', initDraggable as EventSetupFn);

package/events/events.ts

@@ -0,0 +1,7 @@
+import './draggable';
+import './input-box';
+import './node-x-btn';
+import './connector';
+import './comment-drag-handle';
+import './comment-input';
+import './connection-line';