@kabel-project/kabel 1.0.7

package/events/input-box.ts

@@ -0,0 +1,213 @@
+import { Element, Rect, Text } from "@svgdotjs/svg.js";
+import eventer, { EventSetupFn } from "../util/eventer";
+import userState from '../util/user-state';
+import { Renderer } from "../src";
+
+function initInputBox(element: Element, args: Record<string, any>) {
+    let editing = false;
+    let skipNextClick = false;
+    let buffer = args.field.getDisplayValue?.() ?? "";
+    let cursorPos = buffer.length;
+    let anchorPos = buffer.length;
+    const txt: Text = args.text;
+    const rect: Rect = element as Rect;
+    const renderer = args.renderer as Renderer;
+    const PADDING_X = 4;
+    const PADDING_Y = 4;
+    let caretLine: Rect | null = null;
+    let selectionRect: Rect | null = null;
+    // @ts-ignore
+    txt!.style('user-select', 'none');
+    // @ts-ignore
+    rect!.style('user-select', 'none');
+
+    // Helper: measure width of text using renderer or fallback
+    function measureTextWidth(text: string) {
+
+        if (renderer.measureTextWidth) return renderer.measureTextWidth(text);
+        return text.length * 8; // rough fallback
+    }
+
+    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 updateText() {
+        // redraw main text
+        txt.text(buffer);
+
+        const { start, end } = getSelectionRange();
+        const { width: totalWidth } = renderer.measureRawField(buffer);
+        const { height: rectHeight } = rect.bbox(); // actual rect height
+
+        const textBBox = txt.bbox();
+        const offsetY = (rectHeight - textBBox.height) / 2; // center vertically
+
+        // --- selection highlight ---
+        if (hasSelection()) {
+            const textBeforeStart = buffer.slice(0, start);
+            const textBeforeEnd = buffer.slice(0, end);
+            const highlightX = args.startX + PADDING_X + measureTextWidth(textBeforeStart);
+            const highlightWidth = Math.max(measureTextWidth(textBeforeEnd) - measureTextWidth(textBeforeStart), 1);
+            const highlightY = offsetY; // use offsetY for vertical alignment
+
+            if (!selectionRect) {
+                // @ts-ignore
+                selectionRect = rect.parent()!.rect(highlightWidth, textBBox.height)
+                    .fill('#3390ff')
+                    .attr({ 'fill-opacity': 0.35 });
+                selectionRect!.node.parentNode!.insertBefore(selectionRect!.node, txt.node);
+            } else {
+                selectionRect.size(highlightWidth, textBBox.height);
+            }
+
+            selectionRect!.move(highlightX, highlightY);
+        } else {
+            if (selectionRect) { selectionRect.remove(); selectionRect = null; }
+        }
+
+        // --- caret ---
+        if (editing) {
+            const zoom = renderer.getWs().getZoom(); // workspace zoom
+            const caretX = (args.startX + PADDING_X + measureTextWidth(buffer.slice(0, cursorPos))); // scale pos
+            const caretH = textBBox.height;
+            // @ts-ignore
+            if (!caretLine) caretLine = rect.parent()!.rect(1, caretH).fill(renderer.constants.FIELD_RAW_TEXT_COLOR);
+            caretLine!.size(1, caretH).move(caretX, offsetY);
+        } else {
+            if (caretLine) { caretLine.remove(); caretLine = null; }
+        }
+
+        // --- background rect ---
+        rect.size(Math.max(16, totalWidth + PADDING_X * 2), Math.max(rectHeight, textBBox.height + PADDING_Y * 2));
+        txt.move(args.startX + PADDING_X, offsetY);
+    }
+
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (!args.field.canEdit()) { // If editing isnt allowed, close the event early.
+            if (editing) stopEditing();
+            return;
+        }
+        if (!editing) return;
+
+        if (e.key === "Escape") { e.preventDefault(); stopEditing(); return; }
+        if (e.key === "Enter") { e.preventDefault(); stopEditing(); return; }
+
+        if (e.key === "Backspace") {
+            if (!deleteSelection() && cursorPos > 0) {
+                buffer = buffer.slice(0, cursorPos - 1) + buffer.slice(cursorPos);
+                cursorPos--;
+                anchorPos = cursorPos;
+            }
+        } else if (e.key === "Delete") {
+            if (!deleteSelection() && cursorPos < buffer.length) {
+                buffer = buffer.slice(0, cursorPos) + buffer.slice(cursorPos + 1);
+            }
+        } else if (e.key === "ArrowLeft") {
+            if (e.shiftKey) cursorPos = Math.max(0, cursorPos - 1);
+            else { cursorPos = Math.max(0, cursorPos - 1); anchorPos = cursorPos; }
+        } else if (e.key === "ArrowRight") {
+            if (e.shiftKey) cursorPos = Math.min(buffer.length, cursorPos + 1);
+            else { cursorPos = Math.min(buffer.length, cursorPos + 1); anchorPos = cursorPos; }
+        } else if (e.key === "Home") {
+            if (!e.shiftKey) anchorPos = 0;
+            cursorPos = 0;
+        } else if (e.key === "End") {
+            if (!e.shiftKey) anchorPos = buffer.length;
+            cursorPos = buffer.length;
+        } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+            if (hasSelection()) deleteSelection();
+            buffer = buffer.slice(0, cursorPos) + e.key + buffer.slice(cursorPos);
+            cursorPos++;
+            anchorPos = cursorPos;
+        } else return;
+
+        e.preventDefault();
+        updateText();
+        args.field.setValue(buffer);
+    }
+
+    function onClickOutside(ev: MouseEvent) {
+        if (!editing) return;
+        if (skipNextClick) { skipNextClick = false; return; }
+        const target = ev.target as Node;
+        if (target !== rect.node && target !== txt.node) stopEditing();
+    }
+
+    function startEditing(ev?: MouseEvent) {
+        if (!args.field.canEdit()) { // If editing isnt allowed, close the event early.
+            if (editing) stopEditing();
+            return;
+        }
+        if (editing) return;
+        editing = true;
+        buffer = args.field.getValue?.() ?? "";
+        cursorPos = buffer.length;
+        anchorPos = buffer.length;
+
+        userState.setState('typing');
+
+        if (ev) {
+            const rectBox = rect.node.getBoundingClientRect();
+            const zoom = renderer.getWs().getZoom(); // workspace zoom
+            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]); // scale widths
+                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() {
+        editing = false;
+        userState.removeState('typing');
+        document.removeEventListener("keydown", onKeyDown);
+        document.removeEventListener("mousedown", onClickOutside);
+        args.field.setValue(buffer);
+        updateText();
+        renderer.getWs().redraw();
+        renderer.getWs().emitChange();
+    }
+
+    rect.on("mousedown", (ev: Event) => startEditing(ev as MouseEvent));
+    txt.on("mousedown", (ev: Event) => startEditing(ev as MouseEvent));
+
+    updateText();
+
+    return () => {
+        rect.off("mousedown", startEditing as EventListener);
+        txt.off("mousedown", startEditing as EventListener);
+        document.removeEventListener("keydown", onKeyDown);
+        document.removeEventListener("mousedown", onClickOutside);
+    };
+}
+
+eventer.registerEvent("k_inputbox", initInputBox as EventSetupFn);

package/events/node-x-btn.ts

@@ -0,0 +1,25 @@
+import { Element, G } from '@svgdotjs/svg.js';
+import NodeSvg from '../src/nodesvg';
+import eventer, { EventSetupFn } from '../util/eventer';
+import WorkspaceSvg from '../src/workspace-svg';
+
+function initXButton(element: Element, args: Record<string, any>): () => void {
+	const xBtnGroup = element as G;
+	const ws: WorkspaceSvg = args.workspace;
+
+	// click handler
+	const onClick = () => {
+		ws.removeNode(args.node);
+	};
+
+	// attach
+	xBtnGroup.on('click', onClick);
+
+	// return cleanup function
+	return () => {
+		xBtnGroup.off('click', onClick);
+	};
+}
+
+// register as Kabel event
+eventer.registerEvent('k_closenode', initXButton as EventSetupFn);

package/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}

package/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "@kabel-project/kabel",
+    "version": "1.0.7",
+    "main": "index.js",
+    "scripts": {
+        "test": "node test-server.js",
+        "build": "npx webpack",
+        "docs": "typedoc --out docs src"
+    },
+    "keywords": [
+        "editor",
+        "code",
+        "script",
+        "visual",
+        "programming",
+        "node",
+        "graph"
+    ],
+    "repository": "https://github.com/FentFentFent/Kabel",
+    "author": "fentiefentfent",
+    "license": "ISC",
+    "description": "A blockly-inspired visual programming interface.",
+    "devDependencies": {
+        "@types/node": "^24.3.1",
+        "chokidar": "^5.0.0",
+        "connect-livereload": "^0.6.1",
+        "css-minimizer-webpack-plugin": "^7.0.2",
+        "express": "^5.2.1",
+        "jsdoc": "^4.0.5",
+        "livereload": "^0.10.3",
+        "raw-loader": "^4.0.2",
+        "source-map-loader": "^5.0.0",
+        "terser-webpack-plugin": "^5.3.14",
+        "ts-loader": "^9.5.2",
+        "typedoc": "^0.28.14",
+        "typescript": "^5.9.2",
+        "webpack": "^5.101.2",
+        "webpack-cli": "^6.0.1"
+    },
+    "dependencies": {
+        "@fontsource/fredoka": "^5.2.10",
+        "@svgdotjs/svg.js": "^3.2.4",
+        "svgpath": "^2.6.0",
+        "typedoc-plugin-markdown": "^4.9.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/renderers/apollo/apollo.ts

@@ -0,0 +1,21 @@
+
+import ApolloRenderer from "./renderer"
+import ApolloConstants from "./constants"
+import Representer from "../representer"
+import { RepresenterNode } from "../representer-node"
+
+export interface apolloType {
+    Renderer: typeof ApolloRenderer;
+    Constants: typeof ApolloConstants;
+    Representer: typeof Representer;
+    RepresenterNode: typeof RepresenterNode;
+}
+
+
+export {
+    ApolloRenderer as Renderer,
+    ApolloConstants as Constants,
+    // Despite apollo not extending these, we still need to re-export them for the API.
+    Representer,
+    RepresenterNode
+}

package/renderers/apollo/constants.ts

@@ -0,0 +1,40 @@
+import { Color } from "../../src/visual-types";
+import RendererConstants from "../constants";
+
+// Define the new Dogear shape
+type DogearShape = {
+    PathMain: string;
+    Width: number;
+    Height: number;
+};
+
+// Extend the original SHAPES type
+type ApolloShapes = RendererConstants['SHAPES'] & {
+    Dogear?: DogearShape;
+};
+
+class ApolloConstants extends RendererConstants {
+    SHAPES: ApolloShapes = {};
+    CONNECTOR_COLOR: Color = '#9912e8ff'
+    FIELD_RAW_COLOR: Color = '#343745ff';
+    FIELD_RAW_TEXT_COLOR: Color = '#cfd4e4ff';
+    FIELD_RAW_OUTLINE_COLOR: Color = '#202128ff';
+    constructor(overrides: Partial<ApolloConstants>) {
+        super(overrides);
+        this.CONNECTOR_LINE_WIDTH = 2.5;
+        this.CORNER_RADIUS = 10;
+        this.FOOTER_HEIGHT = 25;
+        this.CONNECTOR_LINE_WIDTH = 7;
+        this.init();
+    }
+
+    init() {
+        this.SHAPES.Dogear = {
+            PathMain: `M -1 1 Q -1 21 0 30 L 26 0 Q 2 -1 0 0 Z`,
+            Width: 26,
+            Height: 30
+        };
+    }
+}
+
+export default ApolloConstants;

package/renderers/apollo/renderer.ts

@@ -0,0 +1,331 @@
+
+import { Path as SvgPath, StrokeData, G } from "@svgdotjs/svg.js";
+import * as Path from '../../util/path'
+import { ColorStyle, Hex } from "../../src/visual-types";
+import WorkspaceSvg from "../../src/workspace-svg";
+import Renderer, { DrawState, NodeMeasurements } from "../renderer"; // Saying the value of "Renderer" is undefined when it's clearly defined and theres no circular refs.
+import ApolloConstants from "./constants";
+import { parseColor } from "../../util/parse-color";
+import eventer from "../../util/eventer";
+import NodeSvg from "../../src/nodesvg";
+import Connection from "../../src/connection";
+import { AnyField, FieldRawBoxData } from "../../src/field";
+console.log(Renderer);
+
+function darkenColor(hex: string, amount: number = 0.2): string {
+    // Remove # if present
+    hex = hex.replace(/^#/, "");
+
+    // Parse r, g, b
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+
+    // Darken each channel
+    const newR = Math.max(0, Math.floor(r * (1 - amount)));
+    const newG = Math.max(0, Math.floor(g * (1 - amount)));
+    const newB = Math.max(0, Math.floor(b * (1 - amount)));
+
+    // Convert back to hex and pad with 0s
+    const toHex = (c: number) => c.toString(16).padStart(2, "0");
+
+    return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+
+
+
+
+/**
+ * ApolloRenderer
+ * 
+ * Custom renderer extending the base `Renderer` for a visual programming workspace.
+ * This renderer provides a distinct node style:
+ * - Node background uses the primary color entirely
+ * - Topbar is hidden (but still present for dragging)
+ * - Bottom-right dog-ear decoration
+ * - Previous connection at the top, next connection at the bottom
+ */
+class ApolloRenderer extends Renderer {
+    declare _constants: ApolloConstants;
+
+    static get NAME() {
+        return 'apollo';
+    }
+    static get ElEMENT_TAG() {
+        return 'ApolloElement';
+    }
+    /**
+     * Constructor
+     * @param workspace - The WorkspaceSvg instance
+     * @param overrides - Partial constant overrides for ApolloConstants
+     */
+    constructor(workspace: WorkspaceSvg, overrides: Partial<ApolloConstants>) {
+        super(workspace, overrides);
+    }
+
+    /** 
+     * Typed getter for renderer constants
+     */
+    get constants(): ApolloConstants {
+        return super.constants as ApolloConstants;
+    }
+
+    /** Initialize constants using Apollo-specific overrides */
+    initConstants() {
+        this._constants = new ApolloConstants(this.constantOverrides);
+    }
+
+    /**
+     * Draws the node's topbar.
+     * Overridden to hide the topbar visually while retaining its group for dragging.
+     * @param state - Current draw state
+     * @param colors - Node colors
+     * @param measurements - Node dimensions
+     */
+    drawNodeTopbar(state: DrawState, colors: ColorStyle, measurements: NodeMeasurements | null) {
+        const c = this.constants;
+        const width = measurements?.width ?? c.NODE_BASE_WIDTH;
+        const radius = c.CORNER_RADIUS;
+
+        state.topbar = state.group!.path(Path.roundedRect(width, c.TOPBAR_HEIGHT, radius))
+            .fill('transparent');
+    }
+
+    /**
+     * Draws the node background with rounded corners and bottom-right dog-ear cut.
+     * Also creates a shadow.
+     * @param state - Current draw state
+     * @param measurements - Node dimensions
+     */
+    drawNodeBase(state: DrawState, measurements: NodeMeasurements | null) {
+        const c = this.constants;
+        const width = measurements?.width ?? c.NODE_BASE_WIDTH;
+        const height = measurements?.height ?? c.NODE_BASE_HEIGHT;
+        const r = c.CORNER_RADIUS;
+
+        const dogear = this.constants.SHAPES.Dogear;
+        const cutW = dogear?.Width ?? 0;
+        const cutH = dogear?.Height ?? 0;
+
+        // Rounded rect with bottom-right cut
+        const roundedRect = `M${r},0 H${width - r} Q${width},0 ${width},${r} V${height - cutH} L${width - cutW},${height} H${r} Q0,${height} 0,${height - r} V${r} Q0,0 ${r},0 Z`;
+
+        const colors = this.getNodeColors();
+        const primary = parseColor(colors.primary) as string;
+        const stroke = parseColor(colors.secondary) as string;
+
+        // Node background
+        state.bg = state.group!.path(roundedRect)
+            .fill(primary)
+            .stroke({ color: stroke, width: 2 });
+
+        // Dog-ear decoration
+        this.drawDogEar(state, state.group as G, width, height, colors);
+
+        // Node shadow
+        state.shadow = state.group!.path(roundedRect)
+            .fill('rgba(0,0,0,0.2)')
+            .stroke('none')
+            .attr({ 'pointer-events': 'none' })
+            .move(Number(state.bg.x()) + 5, Number(state.bg.y()) + 5)
+            .back();
+    }
+
+    /**
+     * Draws a dog-ear decoration at the node's bottom-right corner
+     * @param state - Current draw state
+     * @param nodeG - Node's SVG group
+     * @param w - Node width
+     * @param h - Node height
+     * @param colors - Node colors
+     */
+    drawDogEar(state: DrawState, nodeG: G, w: number, h: number, colors: ColorStyle) {
+        const pathDef = this.constants.SHAPES.Dogear?.PathMain;
+        if (!pathDef) return;
+
+        const dogEar = nodeG.path(pathDef)
+            .fill(parseColor(colors.secondary) as string)
+            .stroke({ color: parseColor(colors.tertiary) as string, width: 1 } as StrokeData);
+
+        const offsetX = w - this.constants.SHAPES.Dogear!.Width;
+        const offsetY = h - this.constants.SHAPES.Dogear!.Height;
+        dogEar.move(offsetX, offsetY);
+        dogEar.front();
+    }
+
+    /**
+     * Draws previous and next connections for the node.
+     * Previous connection is on top, next is on bottom.
+     * @param state - Draw state
+     * @param node - NodeSvg instance
+     * @param nodeGroup - Node's SVG group
+     * @param measurements - Node dimensions
+     */
+    drawPreviousNextConnections(state: DrawState, node: NodeSvg, nodeGroup: G, measurements: { width: number, height: number } | null = null) {
+        if (!state || !node || !state.bg) return;
+
+        const c = this.constants;
+        const colors: ColorStyle = this.getNodeColors();
+        const bbox = state.bg.bbox();
+
+        // Top connector (previous)
+        if (node.previousConnection) {
+            const c1 = this.drawPrimaryConnector(nodeGroup, state.bg, 'top', parseColor(this._constants.CONNECTOR_COLOR) as string);
+            if (c1) {
+                const conn = {
+                    from: node.previousConnection,
+                    to: this.resolveConnectable(node.previousConnection.getFrom(), node.previousConnection) as Connection,
+                    fromCircle: c1 as SvgPath,
+                    originConn: node.previousConnection,
+                    originCircle: c1
+                };
+                this.setConnect(conn);
+                eventer.addElement(c1, 'k_connectbubble', { connection: node.previousConnection, node })
+                    .tagElement(c1, [(this.constructor as typeof Renderer).ELEMENT_TAG, `node_${node.id}`]);
+                this._fillOtherNodeConnectorCircle(node.previousConnection, c1 as SvgPath, true);
+            }
+        }
+
+        // Bottom connector (next)
+        if (node.nextConnection) {
+            const c2 = this.drawPrimaryConnector(nodeGroup, state.bg, 'bottom', parseColor(this._constants.CONNECTOR_COLOR) as string);
+            if (c2) {
+                const conn = {
+                    from: node.nextConnection,
+                    to: this.resolveConnectable(node.nextConnection.getTo(), node.nextConnection) as Connection,
+                    fromCircle: c2 as SvgPath,
+                    originConn: node.nextConnection,
+                    originCircle: c2
+                };
+                this.setConnect(conn);
+                eventer.addElement(c2, 'k_connectbubble', { connection: node.nextConnection, node })
+                    .tagElement(c2, [(this.constructor as typeof Renderer).ELEMENT_TAG, `node_${node.id}`]);
+                this._fillOtherNodeConnectorCircle(node.nextConnection, c2 as SvgPath, false);
+            }
+        }
+    }
+
+    /**
+     * Draws a primary connector (triangle or circle) on either the top or bottom edge.
+     * @param nodeGroup - Node's SVG group
+     * @param nodeBg - Node background path
+     * @param side - 'top' or 'bottom'
+     * @param color - Connector color
+     * @returns SvgPath of the connector
+     */
+    drawPrimaryConnector(nodeGroup: G, nodeBg: SvgPath, side: 'top' | 'bottom', color: string): SvgPath | void {
+        const c = this.constants;
+        if (!nodeGroup || !nodeBg) return;
+
+        const bbox = nodeBg.bbox();
+        const triSize = c.CONNECTOR_TRI_SIZE;
+        const radius = c.CONNECTOR_RADIUS;
+        const x = bbox.width / 2;
+        let y: number;
+        let element: SvgPath;
+
+        if (c.CONNECTOR_TRIANGLE) {
+            let path = Path.roundedTri(triSize, triSize, 1);
+            if (side === 'top') y = -triSize;
+            else { y = bbox.height; path = Path.rotatePath(path, 180, triSize / 2, triSize / 2); }
+
+            element = nodeGroup.path(path)
+                .fill(parseColor(color as Hex))
+                .stroke({ color: parseColor('#00000000'), width: 0 })
+                .transform({ translateX: x - triSize / 2, translateY: y });
+        } else {
+            const circlePath = Path.circle(radius);
+            y = side === 'top' ? 0 : bbox.height;
+
+            element = nodeGroup.path(circlePath)
+                .fill(parseColor(color as Hex))
+                .stroke({ color: parseColor('#00000000'), width: 0 })
+                .move(x - radius, y - radius);
+        }
+
+        element.attr({ class: (this.constructor as typeof Renderer).CONNECTOR_TAG });
+        return element;
+    }
+    /**
+     * Draws a raw input field.
+     * @param fieldGroup - The SVG group element for the field.
+     * @param field - The field to draw.
+     * @param startX - The starting X position for the field.
+     * @returns The rectangle and text elements of the raw field.
+     */
+    drawFieldRaw(fieldGroup: G, field: AnyField, startX: number = 0) {
+        const c = this.constants;
+        const value = field.getDisplayValue?.() ?? "";
+        const { width, height } = this.measureRawField(value);
+
+        // Draw the rectangle
+        const rect = fieldGroup.rect(width, height)
+            .fill(parseColor(c.FIELD_RAW_COLOR))
+            .stroke({ color: parseColor(c.FIELD_RAW_OUTLINE_COLOR), width: c.FIELD_RAW_OUTLINE_STROKE })
+            .radius(20);
+
+        // Draw the text
+        const txt = fieldGroup.text(value)
+            .font({
+                family: c.FONT_FAMILY,
+                size: c.FONT_SIZE,
+                anchor: 'start'
+            })
+            .fill(parseColor(c.FIELD_RAW_TEXT_COLOR));
+        txt.node.style.userSelect = 'none';
+
+        const rawBox: FieldRawBoxData = { box: rect, txt };
+
+        // Measure text dimensions
+        const textBBox = txt.bbox();
+
+        // Vertical centering
+        const offsetY = (height - textBBox.height) / 2;
+
+        // Horizontal centering with padding
+        const paddedWidth = width - 2 * c.INPUT_BOX_PADDING;
+        const offsetX = startX + c.INPUT_BOX_PADDING + Math.max(0, (paddedWidth - textBBox.width) / 2);
+
+        // Move elements
+        rect.move(startX, 0);
+        txt.move(offsetX, offsetY);
+
+        // Add event listener
+        eventer.addElement(rect, "k_inputbox", {
+            field,
+            text: txt,
+            renderer: this,
+            startX
+        }).tagElement(rect, [(this.constructor as typeof Renderer).ELEMENT_TAG, `node_${this.node!.id}`]);
+
+        return { rect, txt, rawBox };
+    }
+
+    /**
+     * Draws the full node (base, topbar, fields, connectors, label, etc.)
+     */
+    drawNode() {
+        if (!this.node) return;
+
+        const colors = this.getNodeColors();
+        const node = this.node;
+        const state = this.drawState(this.createNodeGroup(node), node.id);
+        this._nodeDraw = state;
+
+        const measurements = this.measureNodeDimensions();
+        if (!measurements) return;
+
+        this.drawNodeBase(state, measurements as NodeMeasurements);
+        this.drawNodeTopbar(state, colors, measurements as NodeMeasurements);
+        this.drawNodeXButton();
+        this.drawNodeLabel(state.group!);
+        this.makeNodeDraggable(state.group!, state.topbar!, node);
+
+        this.createFieldGroup(state);
+        this.drawAllFieldsForNode(measurements as NodeMeasurements);
+        this.drawPreviousNextConnections(state, node, state.group!, measurements as NodeMeasurements);
+    }
+}
+
+
+export default ApolloRenderer;