@vkcha/svg-core 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+## Vkcha SVG Core (TypeScript) — base project
+
+A lightweight SVG rendering core library in TypeScript for the web: scene graph, viewport culling, zoom/pan, event handling, and a component system with zoom loaders + action views.
+
+**Demo Website:** [vkcha.com](https://vkcha.com)
+
+---
+
+### Folder structure
+
+- **`src/canvas/`**: `PanZoomCanvas` (wheel zoom + pointer pan)
+- **`src/utils/`**: minimal SVG DOM helper
+- **`demo/`**: demo entry (`demo/index.html`, `demo/main.ts`)
+- **`demo/index.html`**: demo page used by Vite
+
+---
+
+### Run demo (Vite)
+
+```bash
+npm install
+npm run dev
+```
+
+Then open the printed local URL.
+
+---
+
+### Build library (Rollup)
+
+```bash
+npm run build:lib
+```
+
+Outputs:
+
+- `dist/vkcha.min.js` (UMD, minified)
+- `dist/index.d.ts` (types)
+
+---

package/dist/index.d.ts

@@ -0,0 +1,234 @@
+type PanZoomState = {
+    zoom: number;
+    panX: number;
+    panY: number;
+};
+type PanZoomListener = (state: Readonly<PanZoomState>) => void;
+type PanZoomWheelMode = "zoom" | "pan";
+type PanZoomOptions = {
+    /** Default: "pan" (current behavior). Figma/Mac trackpad feel often uses "pan". */
+    wheelMode: PanZoomWheelMode;
+    /** If true, zooming via wheel requires Ctrl/Cmd (pinch on macOS typically sets ctrlKey=true). */
+    zoomRequiresCtrlKey: boolean;
+    /** If true, panning via pointer drag requires holding Space (Figma-like). */
+    panRequiresSpaceKey: boolean;
+    /** Zoom limits. */
+    minZoom: number;
+    maxZoom: number;
+    /** Zoom speed multiplier for wheel (higher = faster). */
+    zoomSpeed: number;
+    /** If true, invert wheel direction for zoom. */
+    invertZoom: boolean;
+    /** If true, invert wheel direction for pan. */
+    invertPan: boolean;
+};
+/**
+ * Minimal SVG "canvas" with pan/zoom.
+ *
+ * - Wheel: zoom around cursor
+ * - Pointer drag: pan
+ *
+ * This is intentionally tiny and standalone so the project can restart from a clean base.
+ */
+declare class PanZoomCanvas {
+    readonly svg: SVGSVGElement;
+    readonly world: SVGGElement;
+    state: PanZoomState;
+    options: PanZoomOptions;
+    private listeners;
+    private notifyScheduled;
+    private dragPointerId;
+    private panStart;
+    private isSpaceDown;
+    private windowKeyDownHandler;
+    private windowKeyUpHandler;
+    private svgWheelHandler;
+    private svgPointerDownHandler;
+    private svgPointerMoveHandler;
+    private svgPointerUpHandler;
+    private svgPointerCancelHandler;
+    private svgPointerLeaveHandler;
+    constructor(svg: SVGSVGElement, opts?: Partial<PanZoomOptions>);
+    setOptions(next: Partial<PanZoomOptions>): void;
+    /**
+     * Subscribe to pan/zoom state changes (event-driven, no polling).
+     *
+     * Optimized:
+     * - multiple updates within a frame are coalesced into a single notification via rAF
+     */
+    subscribe(fn: PanZoomListener): () => void;
+    setState(next: Partial<PanZoomState>): void;
+    reset(): void;
+    /**
+     * Clean up all event listeners and resources.
+     * Call this when the canvas is no longer needed to prevent memory leaks.
+     */
+    destroy(): void;
+    private scheduleNotify;
+    private attach;
+    private render;
+    private svgPoint;
+    private screenToWorld;
+}
+
+type NodeId = string;
+type NodeOptions = {
+    /** Required unique id for the node. Used for selective redraw and removal. */
+    id: NodeId;
+    /** SVG fragment markup (no outer <svg> wrapper). */
+    fragment: string;
+    /** World-space position (top-left of the node bounds). Default: (0, 0). */
+    x?: number;
+    y?: number;
+    /**
+     * Optional explicit node bounds (in world units). If omitted, the core may derive
+     * bounds from the fragment's measured bbox.
+     */
+    width?: number;
+    height?: number;
+    /** Optional UI callbacks (hit-tested by the core on the root SVG). */
+    onClick?: (node: Node) => void;
+    onDoubleClick?: (node: Node) => void;
+    onRightClick?: (node: Node) => void;
+};
+/**
+ * A scene-graph "node" for the SVG core.
+ */
+declare class Node {
+    readonly id: NodeId;
+    fragment: string;
+    x: number;
+    y: number;
+    width: number | null;
+    height: number | null;
+    onClick?: NodeOptions["onClick"];
+    onDoubleClick?: NodeOptions["onDoubleClick"];
+    onRightClick?: NodeOptions["onRightClick"];
+    /** Backing element (created lazily by the core). */
+    private _el;
+    constructor(opts: NodeOptions);
+    get el(): SVGGElement;
+}
+
+type CullingStats = {
+    visible: number;
+    hidden: number;
+    total: number;
+};
+type CullingOptions = {
+    /** Default: true */
+    enabled?: boolean;
+    /** Default: 30 */
+    overscanPx?: number;
+};
+type InitOptions = {
+    panZoom?: Partial<PanZoomOptions>;
+    culling?: boolean | CullingOptions;
+};
+/**
+ * SvgCore entrypoint.
+ *
+ * Usage:
+ *   const v = new SvgCore(svgElement)
+ */
+declare class SvgCore {
+    private canvas;
+    private nodesLayer;
+    private nodes;
+    private nodeIdToIndex;
+    private nodeBounds;
+    private cullingEnabled;
+    private cullingOverscanPx;
+    private resizeObserver;
+    private unsubPanZoom;
+    private unsubSvgEvents;
+    private svgClickTimer;
+    private suppressNextClick;
+    private dragWatch;
+    private cullingListeners;
+    private lastCullingStats;
+    private cullingNotifyScheduled;
+    /** SVG root passed to the constructor. */
+    get svg(): SVGSVGElement;
+    /** World layer (<g>) that you draw into. */
+    get world(): SVGGElement;
+    /** Current pan/zoom state. */
+    get state(): PanZoomState;
+    /** Current pan/zoom options (includes minZoom/maxZoom). */
+    get panZoomOptions(): Readonly<PanZoomOptions>;
+    constructor(svg: SVGSVGElement, opts?: InitOptions);
+    /**
+     * Set zoom while keeping a chosen screen-space anchor stable.
+     * By default anchors at the viewport center.
+     */
+    setZoom(nextZoom: number, anchor?: {
+        x: number;
+        y: number;
+    }): void;
+    /**
+     * Convert a pointer position (client px) into canvas/world coordinates,
+     * using the current pan/zoom state.
+     */
+    clientToCanvas(clientX: number, clientY: number): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Fast hit-test using the culling output: only checks nodes currently attached to `nodesLayer`
+     * (i.e. the visible subset after culling).
+     *
+     * Returns the topmost hit node (based on render order), or null.
+     */
+    hitTestVisibleNodeAtClient(clientX: number, clientY: number): Node | null;
+    zoomBy(factor: number, anchor?: {
+        x: number;
+        y: number;
+    }): void;
+    setState(next: Partial<PanZoomState>): void;
+    resetView(): void;
+    configurePanZoom(opts: Partial<PanZoomOptions>): void;
+    setNodes(nodes: Node[]): void;
+    /**
+     * Redraw the currently assigned nodes.
+     *
+     * Call this if you mutate node properties in-place (e.g. `node.x = ...` or `node.fragment = ...`).
+     *
+     * @param ids Optional array of node ids to redraw. If provided, only these nodes will be redrawn.
+     *            If not provided, all nodes will be redrawn.
+     */
+    redraw(ids?: string[]): void;
+    setCullingEnabled(enabled: boolean): void;
+    setCullingOverscanPx(px: number): void;
+    /** Subscribe to culling stats updates (event-driven). */
+    onCullingStatsChange(fn: (stats: Readonly<CullingStats>) => void): () => void;
+    /** Subscribe to pan/zoom updates (event-driven). */
+    onPanZoomChange(fn: PanZoomListener): () => void;
+    /**
+     * Remove nodes from the scene.
+     *
+     * @param ids Optional array of node ids to remove. If not provided, removes all nodes.
+     */
+    remove(ids?: string[]): void;
+    destroy(): void;
+    private renderNodes;
+    private applyCulling;
+    private setCullingStats;
+    private scheduleCullingNotify;
+    private rectsIntersect;
+    private getWorldViewport;
+}
+
+type BBox = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+type FragmentMetrics = {
+    bbox: BBox;
+    pad: number;
+};
+declare function measureFragmentMetrics(markup: string): FragmentMetrics | null;
+
+export { Node, PanZoomCanvas, SvgCore, measureFragmentMetrics };
+export type { CullingOptions, CullingStats, FragmentMetrics, InitOptions, NodeId, NodeOptions, PanZoomOptions, PanZoomState, PanZoomWheelMode };

package/dist/vkcha.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).SvgCore={})}(this,function(t){"use strict";const e={wheelMode:"pan",zoomRequiresCtrlKey:!1,panRequiresSpaceKey:!1,minZoom:.2,maxZoom:8,zoomSpeed:1,invertZoom:!1,invertPan:!1};class n{svg;world;state={zoom:1,panX:0,panY:0};options={...e};listeners=new Set;notifyScheduled=!1;dragPointerId=null;panStart=null;isSpaceDown=!1;windowKeyDownHandler=null;windowKeyUpHandler=null;svgWheelHandler=null;svgPointerDownHandler=null;svgPointerMoveHandler=null;svgPointerUpHandler=null;svgPointerCancelHandler=null;svgPointerLeaveHandler=null;constructor(t,e={}){this.svg=t,this.world=function(t,e={}){const n=document.createElementNS("http://www.w3.org/2000/svg",t);for(const[t,s]of Object.entries(e))n.setAttribute(t,s);return n}("g"),this.world.dataset.layer="world",this.svg.replaceChildren(this.world),this.setOptions(e),this.svg.style.touchAction="none",this.svg.style.userSelect="none",this.attach(),this.render()}setOptions(t){this.options={...e,...this.options,...t}}subscribe(t){return this.listeners.add(t),()=>this.listeners.delete(t)}setState(t){const e={...this.state,...t};e.zoom===this.state.zoom&&e.panX===this.state.panX&&e.panY===this.state.panY||(this.state=e,this.render(),this.scheduleNotify())}reset(){this.setState({zoom:1,panX:0,panY:0})}destroy(){if(this.windowKeyDownHandler&&(window.removeEventListener("keydown",this.windowKeyDownHandler),this.windowKeyDownHandler=null),this.windowKeyUpHandler&&(window.removeEventListener("keyup",this.windowKeyUpHandler),this.windowKeyUpHandler=null),this.svgWheelHandler&&(this.svg.removeEventListener("wheel",this.svgWheelHandler),this.svgWheelHandler=null),this.svgPointerDownHandler&&(this.svg.removeEventListener("pointerdown",this.svgPointerDownHandler),this.svgPointerDownHandler=null),this.svgPointerMoveHandler&&(this.svg.removeEventListener("pointermove",this.svgPointerMoveHandler),this.svgPointerMoveHandler=null),this.svgPointerUpHandler&&(this.svg.removeEventListener("pointerup",this.svgPointerUpHandler),this.svgPointerUpHandler=null),this.svgPointerCancelHandler&&(this.svg.removeEventListener("pointercancel",this.svgPointerCancelHandler),this.svgPointerCancelHandler=null),this.svgPointerLeaveHandler&&(this.svg.removeEventListener("pointerleave",this.svgPointerLeaveHandler),this.svgPointerLeaveHandler=null),null!==this.dragPointerId){try{this.svg.releasePointerCapture(this.dragPointerId)}catch{}this.dragPointerId=null}this.panStart=null,this.isSpaceDown=!1,this.listeners.clear()}scheduleNotify(){this.notifyScheduled||(this.notifyScheduled=!0,requestAnimationFrame(()=>{this.notifyScheduled=!1;for(const t of this.listeners)t(this.state)}))}attach(){this.windowKeyDownHandler=t=>{"Space"===t.code&&(this.isSpaceDown=!0)},this.windowKeyUpHandler=t=>{"Space"===t.code&&(this.isSpaceDown=!1)},window.addEventListener("keydown",this.windowKeyDownHandler),window.addEventListener("keyup",this.windowKeyUpHandler),this.svgWheelHandler=t=>{t.preventDefault();const e=this.svgPoint(t.clientX,t.clientY),{wheelMode:n,zoomRequiresCtrlKey:s,invertZoom:i,invertPan:o}=this.options,r=t.ctrlKey||t.metaKey;if("pan"===n&&!r){const e=o?-1:1;return void this.setState({panX:this.state.panX-t.deltaX*e,panY:this.state.panY-t.deltaY*e})}if("zoom"===n&&s&&!r)return;const l=this.screenToWorld(e.x,e.y),a=i?-t.deltaY:t.deltaY,h=Math.exp(.001*-a*this.options.zoomSpeed),d=(c=this.state.zoom*h,u=this.options.minZoom,g=this.options.maxZoom,Math.max(u,Math.min(g,c)));var c,u,g;const v=e.x-l.x*d,p=e.y-l.y*d;this.setState({zoom:d,panX:v,panY:p})},this.svg.addEventListener("wheel",this.svgWheelHandler,{passive:!1}),this.svgPointerDownHandler=t=>{if(null!==this.dragPointerId)return;if(this.options.panRequiresSpaceKey&&!this.isSpaceDown)return;this.dragPointerId=t.pointerId,this.svg.setPointerCapture(t.pointerId);const e=this.svgPoint(t.clientX,t.clientY);this.panStart={panX:this.state.panX,panY:this.state.panY,x:e.x,y:e.y}},this.svg.addEventListener("pointerdown",this.svgPointerDownHandler),this.svgPointerMoveHandler=t=>{if(null===this.dragPointerId)return;if(t.pointerId!==this.dragPointerId)return;if(!this.panStart)return;const e=this.svgPoint(t.clientX,t.clientY),n=e.x-this.panStart.x,s=e.y-this.panStart.y;this.setState({panX:this.panStart.panX+n,panY:this.panStart.panY+s})},this.svg.addEventListener("pointermove",this.svgPointerMoveHandler);const t=t=>{null!==this.dragPointerId&&t.pointerId===this.dragPointerId&&(this.dragPointerId=null,this.panStart=null)};this.svgPointerUpHandler=t,this.svgPointerCancelHandler=t,this.svgPointerLeaveHandler=()=>{this.dragPointerId=null,this.panStart=null},this.svg.addEventListener("pointerup",this.svgPointerUpHandler),this.svg.addEventListener("pointercancel",this.svgPointerCancelHandler),this.svg.addEventListener("pointerleave",this.svgPointerLeaveHandler)}render(){const{zoom:t,panX:e,panY:n}=this.state;this.world.setAttribute("transform",`matrix(${t} 0 0 ${t} ${e} ${n})`)}svgPoint(t,e){const n=this.svg.getBoundingClientRect();return{x:t-n.left,y:e-n.top}}screenToWorld(t,e){const{zoom:n,panX:s,panY:i}=this.state;return{x:(t-s)/n,y:(e-i)/n}}}const s=new Map;let i=null,o=null;function r(t){t.hasAttribute("xmlns")&&t.removeAttribute("xmlns");for(const e of Array.from(t.attributes))e.name.startsWith("xmlns:")&&t.removeAttribute(e.name);for(const e of Array.from(t.children))r(e)}function l(t){const e=t.trim();if(!e)return"";const n=`<svg xmlns="http://www.w3.org/2000/svg">${e}</svg>`;try{const t=(new DOMParser).parseFromString(n,"image/svg+xml"),e=t.documentElement;if(!e||"svg"!==e.nodeName.toLowerCase())return"";t.querySelectorAll("script, foreignObject").forEach(t=>t.remove()),t.querySelectorAll("*").forEach(t=>{for(const e of Array.from(t.attributes))e.name.toLowerCase().startsWith("on")&&t.removeAttribute(e.name),("xmlns"===e.name||e.name.startsWith("xmlns:"))&&t.removeAttribute(e.name)});const s=e.innerHTML;return"string"==typeof s?s.trim():(new XMLSerializer).serializeToString(e).replace(/^<svg[^>]*>|<\/svg>$/g,"").trim()}catch{return""}}function a(t){const e=t.trim();if(!e)return[];const n=`<svg xmlns="http://www.w3.org/2000/svg">${e}</svg>`;try{const t=(new DOMParser).parseFromString(n,"image/svg+xml"),e=t.documentElement;if(!e||"svg"!==e.nodeName.toLowerCase())return[];t.querySelectorAll("script, foreignObject").forEach(t=>t.remove()),t.querySelectorAll("*").forEach(t=>{for(const e of Array.from(t.attributes))e.name.toLowerCase().startsWith("on")&&t.removeAttribute(e.name),("xmlns"===e.name||e.name.startsWith("xmlns:"))&&t.removeAttribute(e.name)});const s=Array.from(e.children).map(t=>document.importNode(t,!0));for(const t of s)r(t);return s}catch{return[]}}function h(t){const e=l(t);if(!e)return null;const n=s.get(e);if(n)return n;const{svg:r,g:h}=function(){if(i&&o)return{svg:i,g:o};const t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.setAttribute("width","0"),t.setAttribute("height","0"),t.style.position="absolute",t.style.left="-10000px",t.style.top="-10000px",t.style.visibility="hidden",t.style.pointerEvents="none";const e=document.createElementNS("http://www.w3.org/2000/svg","g");return t.appendChild(e),i=t,o=e,{svg:t,g:e}}();!function(t){t.isConnected||document.body.appendChild(t)}(r),h.replaceChildren();const d=a(e);for(const t of d)h.appendChild(t.cloneNode(!0));try{const t=h.getBBox();let n=0;h.querySelectorAll("*").forEach(t=>{try{const e=getComputedStyle(t),s=e.stroke;if(!s||"none"===s||"transparent"===s)return;const i=Number.parseFloat(e.strokeWidth??"0");Number.isFinite(i)&&i>n&&(n=i)}catch{}});const i=Math.max(0,n/2),o={bbox:{x:t.x,y:t.y,width:t.width,height:t.height},pad:i};return s.set(e,o),o}catch{return null}finally{!function(t){t.isConnected&&t.remove()}(r)}}t.Node=class{id;fragment;x;y;width;height;onClick;onDoubleClick;onRightClick;_el=null;constructor(t){if(!t||"string"!=typeof t.id||""===t.id)throw new Error("Node requires a non-empty 'id' property");this.id=t.id,this.fragment=t.fragment??"",this.x=Number.isFinite(t?.x)?t?.x:0,this.y=Number.isFinite(t?.y)?t?.y:0;const e=t?.width,n=t?.height;this.width="number"==typeof e&&Number.isFinite(e)&&e>0?e:null,this.height="number"==typeof n&&Number.isFinite(n)&&n>0?n:null,this.onClick=t?.onClick,this.onDoubleClick=t?.onDoubleClick,this.onRightClick=t?.onRightClick}get el(){if(!this._el){const t=document.createElementNS("http://www.w3.org/2000/svg","g");t.dataset.nodeId=this.id,this._el=t}return this._el}},t.PanZoomCanvas=n,t.SvgCore=class{canvas;nodesLayer;nodes=[];nodeIdToIndex=new Map;nodeBounds=null;cullingEnabled=!0;cullingOverscanPx=30;resizeObserver=null;unsubPanZoom=null;unsubSvgEvents=null;svgClickTimer=null;suppressNextClick=!1;dragWatch=null;cullingListeners=new Set;lastCullingStats={visible:0,hidden:0,total:0};cullingNotifyScheduled=!1;get svg(){return this.canvas.svg}get world(){return this.canvas.world}get state(){return this.canvas.state}get panZoomOptions(){return this.canvas.options}constructor(t,e){this.canvas=new n(t,e?.panZoom),this.nodesLayer=document.createElementNS("http://www.w3.org/2000/svg","g"),this.nodesLayer.dataset.layer="nodes",this.world.appendChild(this.nodesLayer),this.world.style.pointerEvents="none";const s=e?.culling;"boolean"==typeof s?this.cullingEnabled=s:s&&("boolean"==typeof s.enabled&&(this.cullingEnabled=s.enabled),"number"==typeof s.overscanPx&&(this.cullingOverscanPx=Math.max(0,s.overscanPx))),this.unsubPanZoom=this.canvas.subscribe(()=>this.applyCulling()),this.resizeObserver=new ResizeObserver(()=>this.applyCulling()),this.resizeObserver.observe(this.svg);const i=()=>{null!==this.svgClickTimer&&(window.clearTimeout(this.svgClickTimer),this.svgClickTimer=null)},o=t=>{0===t.button&&(this.dragWatch={pointerId:t.pointerId,startClientX:t.clientX,startClientY:t.clientY,moved:!1})},r=t=>{const e=this.dragWatch;if(!e)return;if(t.pointerId!==e.pointerId)return;if(1&~t.buttons)return;const n=t.clientX-e.startClientX,s=t.clientY-e.startClientY;!e.moved&&Math.hypot(n,s)>=5&&(e.moved=!0)},l=t=>{const e=this.dragWatch;e&&t.pointerId===e.pointerId&&(this.dragWatch=null,e.moved&&(this.suppressNextClick=!0,i()))},a=t=>{if(this.suppressNextClick)this.suppressNextClick=!1;else{if(null!==this.svgClickTimer){i();const e=this.hitTestVisibleNodeAtClient(t.clientX,t.clientY);return void(e?.onDoubleClick&&e.onDoubleClick(e))}this.svgClickTimer=window.setTimeout(()=>{this.svgClickTimer=null;const e=this.hitTestVisibleNodeAtClient(t.clientX,t.clientY);e?.onClick&&e.onClick(e)},300)}},h=t=>{t.preventDefault(),i();const e=this.hitTestVisibleNodeAtClient(t.clientX,t.clientY);e?.onRightClick&&e.onRightClick(e)};this.svg.addEventListener("click",a),this.svg.addEventListener("contextmenu",h),this.svg.addEventListener("pointerdown",o),this.svg.addEventListener("pointermove",r),this.svg.addEventListener("pointerup",l),this.svg.addEventListener("pointercancel",l),this.unsubSvgEvents=()=>{this.svg.removeEventListener("click",a),this.svg.removeEventListener("contextmenu",h),this.svg.removeEventListener("pointerdown",o),this.svg.removeEventListener("pointermove",r),this.svg.removeEventListener("pointerup",l),this.svg.removeEventListener("pointercancel",l),i()}}setZoom(t,e){const n=this.canvas.options.minZoom,s=this.canvas.options.maxZoom,i=Math.min(s,Math.max(n,t)),o=this.svg.getBoundingClientRect(),r=e?.x??Math.max(1,o.width)/2,l=e?.y??Math.max(1,o.height)/2,a=this.state,h=r-(r-a.panX)/Math.max(1e-9,a.zoom)*i,d=l-(l-a.panY)/Math.max(1e-9,a.zoom)*i;this.setState({zoom:i,panX:h,panY:d})}clientToCanvas(t,e){const n=this.svg.getBoundingClientRect(),s=t-n.left,i=e-n.top,{panX:o,panY:r,zoom:l}=this.state,a=Math.max(1e-9,l);return{x:(s-o)/a,y:(i-r)/a}}hitTestVisibleNodeAtClient(t,e){if(!this.nodeBounds||0===this.nodes.length)return null;const n=this.clientToCanvas(t,e),s=this.nodesLayer.children;for(let t=s.length-1;t>=0;t--){const e=s.item(t);if(!e)continue;const i=e.dataset.nodeId;if(!i)continue;const o=this.nodeIdToIndex.get(i);if(void 0===o)continue;const r=this.nodeBounds[o];if(r&&(n.x>=r.x0&&n.x<=r.x1&&n.y>=r.y0&&n.y<=r.y1))return this.nodes[o]}return null}zoomBy(t,e){const n=Number.isFinite(t)?t:1;n<=0||this.setZoom(this.state.zoom*n,e)}setState(t){this.canvas.setState(t)}resetView(){this.canvas.reset()}configurePanZoom(t){this.canvas.setOptions(t)}setNodes(t){const e=new Set,n=new Set;for(let s=0;s<t.length;s++){const i=t[s].id;e.has(i)?n.add(i):e.add(i)}n.size>0&&console.warn(`Duplicate node ids found: ${Array.from(n).map(t=>`"${t}"`).join(", ")}. Each node should have a unique id.`),this.nodes=t,this.nodeIdToIndex.clear();for(let e=0;e<t.length;e++)this.nodeIdToIndex.set(t[e].id,e);this.redraw()}redraw(t){Array.isArray(t)&&t.length>0?(this.renderNodes(t),this.applyCulling()):(this.renderNodes(),this.applyCulling())}setCullingEnabled(t){this.cullingEnabled=t,this.applyCulling()}setCullingOverscanPx(t){this.cullingOverscanPx=Math.max(0,t),this.applyCulling()}onCullingStatsChange(t){return this.cullingListeners.add(t),t(this.lastCullingStats),()=>this.cullingListeners.delete(t)}onPanZoomChange(t){return this.canvas.subscribe(t)}remove(t){if(!t||0===t.length)return this.nodes=[],this.nodeIdToIndex.clear(),this.nodesLayer.replaceChildren(),this.nodeBounds=null,void this.setCullingStats({visible:0,hidden:0,total:0});const e=new Set;for(const n of t){const t=this.nodeIdToIndex.get(n);void 0!==t&&e.add(t)}if(0===e.size)return;const n=Array.from(e).sort((t,e)=>e-t);for(const t of n){const e=this.nodes[t];e&&(e.el.parentElement&&e.el.remove(),this.nodeIdToIndex.delete(e.id)),this.nodes.splice(t,1)}this.nodeIdToIndex.clear();for(let t=0;t<this.nodes.length;t++)this.nodeIdToIndex.set(this.nodes[t].id,t);if(this.nodeBounds){const t=[];for(let e=0;e<this.nodes.length;e++){const n=this.nodes[e],s=h(n.fragment),i=s?.bbox??{width:240,height:160},o=s?.pad??0,r=n.width??Math.max(1,i.width+2*o),l=n.height??Math.max(1,i.height+2*o);t.push({x0:n.x,y0:n.y,x1:n.x+r,y1:n.y+l})}this.nodeBounds=t}this.applyCulling()}destroy(){this.resizeObserver?.disconnect(),this.resizeObserver=null,this.unsubPanZoom?.(),this.unsubPanZoom=null,this.unsubSvgEvents?.(),this.unsubSvgEvents=null,this.cullingListeners.clear(),this.canvas.destroy()}renderNodes(t){if(t&&t.length>0){for(const e of t){const t=this.nodeIdToIndex.get(e);if(void 0===t)continue;const n=this.nodes[t];if(!n)continue;const s=n.el;s.replaceChildren(),s.setAttribute("transform",`translate(${n.x} ${n.y})`);const i=l(n.fragment);if(i){const e=a(i),o=h(i),r=o?.bbox??{x:0,y:0,width:240,height:160},l=o?.pad??0,d=Math.max(1,r.width+2*l),c=Math.max(1,r.height+2*l),u=-r.x+l,g=-r.y+l,v=document.createElementNS("http://www.w3.org/2000/svg","g");v.setAttribute("transform",`translate(${u} ${g})`);for(const t of e)v.appendChild(t.cloneNode(!0));if(s.appendChild(v),this.nodeBounds){const e=n.width??d,s=n.height??c;this.nodeBounds[t]={x0:n.x,y0:n.y,x1:n.x+e,y1:n.y+s}}}s.parentElement||this.nodesLayer.appendChild(s)}return}if(this.nodesLayer.replaceChildren(),this.nodeBounds=null,0===this.nodes.length)return;const e=new Map;for(const t of this.nodes){const n=l(t.fragment);if(!n)continue;if(e.has(n))continue;const s=a(n),i=h(n),o=i?.bbox??{x:0,y:0,width:240,height:160},r=i?.pad??0,d=Math.max(1,o.width+2*r),c=Math.max(1,o.height+2*r),u=-o.x+r,g=-o.y+r;e.set(n,{children:s,w:d,h:c,offsetX:u,offsetY:g})}const n=this.nodes.length,s=document.createDocumentFragment(),i=new Array(n);for(let t=0;t<n;t++){const n=this.nodes[t],o=n.el;o.replaceChildren(),o.setAttribute("transform",`translate(${n.x} ${n.y})`);const r=l(n.fragment),a=r?e.get(r):null;if(a){const t=document.createElementNS("http://www.w3.org/2000/svg","g");t.setAttribute("transform",`translate(${a.offsetX} ${a.offsetY})`);for(const e of a.children)t.appendChild(e.cloneNode(!0));o.appendChild(t)}const h=n.width??a?.w??240,d=n.height??a?.h??160;i[t]={x0:n.x,y0:n.y,x1:n.x+h,y1:n.y+d},s.appendChild(o)}this.nodesLayer.appendChild(s),this.nodeBounds=i}applyCulling(){if(!this.nodeBounds)return void this.setCullingStats({visible:0,hidden:0,total:this.nodes.length});const t=this.nodes.length;if(!this.cullingEnabled){this.nodesLayer.replaceChildren(...this.nodes.map(t=>t.el));for(const t of this.nodes)t.el.removeAttribute("display");return void this.setCullingStats({visible:t,hidden:0,total:t})}const e=this.getWorldViewport(this.state,this.cullingOverscanPx),n=[];for(let s=0;s<t;s++){const t=this.nodeBounds[s];if(t&&this.rectsIntersect(t,e)){const t=this.nodes[s].el;t.removeAttribute("display"),n.push(t)}}this.nodesLayer.replaceChildren(...n),this.setCullingStats({visible:n.length,hidden:t-n.length,total:t})}setCullingStats(t){const e=this.lastCullingStats;e.visible===t.visible&&e.hidden===t.hidden&&e.total===t.total||(this.lastCullingStats=t,this.scheduleCullingNotify())}scheduleCullingNotify(){this.cullingNotifyScheduled||(this.cullingNotifyScheduled=!0,requestAnimationFrame(()=>{this.cullingNotifyScheduled=!1;for(const t of this.cullingListeners)t(this.lastCullingStats)}))}rectsIntersect(t,e){return!(t.x1<e.x0||t.x0>e.x1||t.y1<e.y0||t.y0>e.y1)}getWorldViewport(t,e){const n=this.svg.getBoundingClientRect(),s=Math.max(1,n.width),i=Math.max(1,n.height),o=Math.max(1e-9,t.zoom),r=Math.max(0,e)/o;return{x0:-t.panX/o-r,y0:-t.panY/o-r,x1:(s-t.panX)/o+r,y1:(i-t.panY)/o+r}}},t.measureFragmentMetrics=h});

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@vkcha/svg-core",
+  "version": "0.1.0",
+  "description": "A lightweight SVG rendering core library in TypeScript for the web: scene graph, viewport culling, zoom/pan, event handling",
+  "keywords": [
+    "svg",
+    "canvas",
+    "pan",
+    "zoom",
+    "scene-graph",
+    "culling",
+    "typescript",
+    "vkcha"
+  ],
+  "author": "Vitaliy Frolov",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vkcha/monorepo.git",
+    "directory": "packages/svg-core"
+  },
+  "bugs": {
+    "url": "https://vkcha.com/issues"
+  },
+  "homepage": "https://vkcha.com",
+  "private": false,
+  "type": "module",
+  "main": "dist/vkcha.min.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/vkcha.min.js",
+      "require": "./dist/vkcha.min.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build:demo": "vite build",
+    "build:lib": "rollup -c && node scripts/minify.js",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/material": "^5.18.0",
+    "@mui/x-tree-view": "^8.24.0",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@uiw/react-textarea-code-editor": "^3.0.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "rollup": "^4.18.0",
+    "rollup-plugin-dts": "^6.3.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0"
+  }
+}