squarified 1.0.0 → 1.1.0

package/dist/{dom-event-DrYYfglv.mjs → dom-event-CBrOg7CX.mjs}

@@ -36,6 +36,12 @@ class Matrix2D {
         }
         return this;
     }
+    transformPoint(x, y) {
+        return {
+            x: this.a * x + this.c * y + this.e,
+            y: this.b * x + this.d * y + this.f
+        };
+    }
     translation(x, y) {
         this.e += x;
         this.f += y;
@@ -94,10 +100,12 @@ class Display {
     parent;
     id;
     matrix;
-    constructor(){
+    __widget__;
+    constructor(id, widget){
         this.parent = null;
-        this.id = SELF_ID.get();
+        this.id = id ?? SELF_ID.get();
         this.matrix = new Matrix2D();
+        this.__widget__ = widget;
     }
     destory() {
     //
@@ -274,7 +282,7 @@ class S extends Display {
     skewX;
     skewY;
     constructor(options = {}){
-        super();
+        super(options.__id__);
         this.width = options.width || 0;
         this.height = options.height || 0;
         this.x = options.x || 0;
@@ -290,12 +298,14 @@ class S extends Display {
 class Graph extends S {
     instruction;
     __options__;
-    constructor(options = {}){
+    constructor(options = {}, widget){
         super(options);
         this.instruction = createInstruction();
         this.__options__ = options;
+        this.__widget__ = widget;
     }
     render(ctx) {
+        this.instruction.mods.length = 0;
         this.create();
         const cap = this.instruction.mods.length;
         for(let i = 0; i < cap; i++){
@@ -339,8 +349,8 @@ const asserts = {
 
 class C extends Display {
     elements;
-    constructor(){
-        super();
+    constructor(id){
+        super(id);
         this.elements = [];
     }
     add(...elements) {
@@ -371,16 +381,45 @@ class C extends Display {
 }
 class Box extends C {
     elements;
-    constructor(){
-        super();
+    constructor(id, widget){
+        super(id);
         this.elements = [];
+        this.__widget__ = widget;
     }
     add(...elements) {
         const cap = elements.length;
         for(let i = 0; i < cap; i++){
             const element = elements[i];
-            if (element.parent) ;
-            this.elements.push(element);
+            if (element === this) {
+                console.warn('skip adding element: cannot add self as child');
+                continue;
+            }
+            let parent = this.parent ?? null;
+            while(parent){
+                if (parent === element) {
+                    throw new Error('Cannot add an ancestor as a child (would create a cycle).');
+                }
+                parent = parent.parent ?? null;
+            }
+            if (element.parent) {
+                if (element.parent === this) {
+                    const idx = this.elements.indexOf(element);
+                    if (idx === -1) {
+                        this.elements.push(element);
+                    }
+                    element.parent = this;
+                    continue;
+                }
+                const prev = element.parent;
+                if (prev && asserts.isBox(prev)) {
+                    prev.remove(element);
+                } else {
+                    element.parent = null;
+                }
+            }
+            if (this.elements.indexOf(element) === -1) {
+                this.elements.push(element);
+            }
             element.parent = this;
         }
     }
@@ -404,7 +443,7 @@ class Box extends C {
         return DisplayType.Box;
     }
     clone() {
-        const box = new Box();
+        const box = new Box(this.id, this.__widget__);
         if (this.elements.length) {
             const stack = [
                 {
@@ -418,7 +457,7 @@ class Box extends C {
                 for(let i = 0; i < cap; i++){
                     const element = elements[i];
                     if (asserts.isBox(element)) {
-                        const newBox = new Box();
+                        const newBox = new Box(undefined, element.__widget__);
                         newBox.parent = parent;
                         parent.add(newBox);
                         stack.push({
@@ -471,8 +510,8 @@ const runtime = {
 
 class RoundRect extends Graph {
     style;
-    constructor(options = {}){
-        super(options);
+    constructor(options = {}, widget){
+        super(options, widget);
         this.style = options.style || Object.create(null);
     }
     get __shape__() {
@@ -508,16 +547,17 @@ class RoundRect extends Graph {
     clone() {
         return new RoundRect({
             ...this.style,
-            ...this.__options__
-        });
+            ...this.__options__,
+            __id__: this.id
+        }, this.__widget__);
     }
 }
 
 class Text extends Graph {
     text;
     style;
-    constructor(options = {}){
-        super(options);
+    constructor(options = {}, widget){
+        super(options, widget);
         this.text = options.text || '';
         this.style = options.style || Object.create(null);
     }
@@ -534,8 +574,9 @@ class Text extends Graph {
     clone() {
         return new Text({
             ...this.style,
-            ...this.__options__
-        });
+            ...this.__options__,
+            __id__: this.id
+        }, this.__widget__);
     }
     get __shape__() {
         return DisplayType.Text;
@@ -554,6 +595,33 @@ function traverse(graphs, handler) {
     }
 }
 
+// Currently, etoile is an internal module, so we won't need too much easing functions.
+// And the animation logic is implemented by user code.
+const easing = {
+    linear: (k)=>k,
+    quadraticIn: (k)=>k * k,
+    quadraticOut: (k)=>k * (2 - k),
+    quadraticInOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k;
+        }
+        return -0.5 * (--k * (k - 2) - 1);
+    },
+    cubicIn: (k)=>k * k * k,
+    cubicOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k + 2);
+    },
+    cubicInOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k + 2);
+    }
+};
+
 class Event {
     eventCollections;
     constructor(){
@@ -701,7 +769,7 @@ function perferNumeric(s) {
     return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
 }
 function noop() {}
-function createRoundBlock(x, y, width, height, style) {
+function createRoundBlock(x, y, width, height, style, widget) {
     return new RoundRect({
         width,
         height,
@@ -710,9 +778,9 @@ function createRoundBlock(x, y, width, height, style) {
         style: {
             ...style
         }
-    });
+    }, widget);
 }
-function createTitleText(text, x, y, font, color) {
+function createTitleText(text, x, y, font, color, widget) {
     return new Text({
         text,
         x,
@@ -724,7 +792,7 @@ function createTitleText(text, x, y, font, color) {
             font,
             lineWidth: 1
         }
-    });
+    }, widget);
 }
 const raf = window.requestAnimationFrame;
 function createCanvasElement() {
@@ -796,9 +864,9 @@ class DefaultMap extends Map {
         }
         return super.get(key);
     }
-    getOrInsert(key, value) {
+    getOrCreate(key, value) {
         if (!super.has(key)) {
-            const defaultValue = value || this.defaultFactory();
+            const defaultValue = value ? value() : this.defaultFactory();
             super.set(key, defaultValue);
             return defaultValue;
         }
@@ -869,19 +937,20 @@ class Render {
     destory() {}
 }
 
-// First cleanup canvas
-function drawGraphIntoCanvas(graph, opts) {
+function drawGraphIntoCanvas(graph, opts, visibleSet) {
     const { ctx, dpr } = opts;
-    ctx.save();
     if (asserts.isBox(graph)) {
         const elements = graph.elements;
-        const cap = elements.length;
-        for(let i = 0; i < cap; i++){
-            const element = elements[i];
-            drawGraphIntoCanvas(element, opts);
+        for(let i = 0; i < elements.length; i++){
+            drawGraphIntoCanvas(elements[i], opts, visibleSet);
         }
+        return;
     }
     if (asserts.isGraph(graph)) {
+        if (visibleSet && !visibleSet.has(graph.id)) {
+            return;
+        }
+        ctx.save();
         const matrix = graph.matrix.create({
             a: 1,
             b: 0,
@@ -893,13 +962,36 @@ function drawGraphIntoCanvas(graph, opts) {
         matrix.transform(graph.x, graph.y, graph.scaleX, graph.scaleY, graph.rotation, graph.skewX, graph.skewY);
         applyCanvasTransform(ctx, matrix, dpr);
         graph.render(ctx);
+        ctx.restore();
+    }
+}
+function collectSpatialEntries(graph, out) {
+    if (asserts.isBox(graph)) {
+        const elements = graph.elements;
+        for(let i = 0; i < elements.length; i++){
+            collectSpatialEntries(elements[i], out);
+        }
+        return;
+    }
+    if (asserts.isGraph(graph)) {
+        out.push({
+            id: graph.id,
+            x: graph.x,
+            y: graph.y,
+            w: graph.width,
+            h: graph.height
+        });
     }
-    ctx.restore();
+}
+function intersects(b, dr) {
+    return b.x < dr.x + dr.width && b.x + b.w > dr.x && b.y < dr.y + dr.height && b.y + b.h > dr.y;
 }
 class Schedule extends Box {
     render;
     to;
     event;
+    _overlays;
+    _spatialIndex;
     constructor(to, renderOptions = {}){
         super();
         this.to = typeof to === 'string' ? document.querySelector(to) : to;
@@ -915,11 +1007,30 @@ class Schedule extends Box {
         });
         this.event = new Event();
         this.render = new Render(this.to, renderOptions);
+        this._overlays = [];
+        this._spatialIndex = [];
+    }
+    addOverlay(...elements) {
+        for (const el of elements){
+            this._overlays.push(el);
+        }
+    }
+    clearOverlay() {
+        this._overlays.length = 0;
     }
-    update() {
-        this.render.clear(this.render.options.width, this.render.options.height);
+    /** Full redraw: clear canvas, draw all elements and overlay. Rebuilds spatial index. */ update() {
+        const { width, height, devicePixelRatio: dpr } = this.render.options;
+        this.render.clear(width, height);
+        const drawOpts = {
+            c: this.render.canvas,
+            ctx: this.render.ctx,
+            dpr
+        };
         this.execute(this.render, this);
-        const matrix = this.matrix.create({
+        for(let i = 0; i < this._overlays.length; i++){
+            drawGraphIntoCanvas(this._overlays[i], drawOpts);
+        }
+        const identity = this.matrix.create({
             a: 1,
             b: 0,
             c: 0,
@@ -927,15 +1038,62 @@ class Schedule extends Box {
             e: 0,
             f: 0
         });
-        applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
+        applyCanvasTransform(this.render.ctx, identity, dpr);
+        // Rebuild spatial index after full draw (positions are now finalised).
+        this._spatialIndex.length = 0;
+        collectSpatialEntries(this, this._spatialIndex);
+    }
+    updateDirty(rects) {
+        // Partial redraw: for each dirty rect, clip → clear → redraw only the elements
+        // that spatially intersect that rect → redraw overlay within the clip.
+        // Vastly cheaper than a full update for small regions like hover highlights.
+        if (rects.length === 0) {
+            return;
+        }
+        const { devicePixelRatio: dpr } = this.render.options;
+        const ctx = this.render.ctx;
+        const drawOpts = {
+            c: this.render.canvas,
+            ctx,
+            dpr
+        };
+        const identity = this.matrix.create({
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+            e: 0,
+            f: 0
+        });
+        applyCanvasTransform(ctx, identity, dpr);
+        for (const dr of rects){
+            // Build a culled visible-set: only leaf-graph IDs whose bbox overlaps dr.
+            const visibleSet = new Set();
+            for(let i = 0; i < this._spatialIndex.length; i++){
+                if (intersects(this._spatialIndex[i], dr)) {
+                    visibleSet.add(this._spatialIndex[i].id);
+                }
+            }
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(dr.x, dr.y, dr.width, dr.height);
+            ctx.clip();
+            ctx.clearRect(dr.x, dr.y, dr.width, dr.height);
+            this.execute(this.render, this, visibleSet);
+            for(let i = 0; i < this._overlays.length; i++){
+                drawGraphIntoCanvas(this._overlays[i], drawOpts);
+            }
+            ctx.restore();
+        }
+        applyCanvasTransform(ctx, identity, dpr);
     }
-    // execute all graph elements
-    execute(render, graph = this) {
+    // Execute (draw) graph elements; pass visibleSet to skip non-intersecting leaves.
+    execute(render, graph = this, visibleSet) {
         drawGraphIntoCanvas(graph, {
             c: render.canvas,
             ctx: render.ctx,
             dpr: render.options.devicePixelRatio
-        });
+        }, visibleSet);
     }
 }
 
@@ -1006,13 +1164,14 @@ function getNodeDepth(node) {
     }
     return depth;
 }
-function visit(data, fn) {
+function visit(data, fn, getChildren = (d)=>d.children) {
     if (!data) {
         return null;
     }
     for (const d of data){
-        if (d.children) {
-            const result = visit(d.children, fn);
+        const children = getChildren(d);
+        if (children) {
+            const result = visit(children, fn, getChildren);
             if (result) {
                 return result;
             }
@@ -1039,6 +1198,15 @@ function findRelativeNodeById(id, layoutNodes) {
         }
     });
 }
+function findRelativeGraphicNode(bbox, graphics) {
+    return visit(graphics, (graphic)=>{
+        const widget = graphic.__widget__;
+        if (Array.isArray(widget?.layout)) {
+            const [x, y, w, h] = widget.layout;
+            return bbox.x >= x && bbox.y >= y && bbox.x < x + w && bbox.y < y + h;
+        }
+    }, (graphic)=>graphic.elements);
+}
 
 function generateStableCombinedNodeId(weight, nodes) {
     const name = nodes.map((node)=>node.id).sort().join('-');
@@ -1321,8 +1489,6 @@ class Component extends Schedule {
     pluginDriver;
     data;
     colorMappings;
-    rectLayer;
-    textLayer;
     layoutNodes;
     config;
     caches;
@@ -1332,8 +1498,6 @@ class Component extends Schedule {
         this.config = config;
         this.colorMappings = {};
         this.pluginDriver = new PluginDriver(this);
-        this.rectLayer = new Box();
-        this.textLayer = new Box();
         this.caches = new DefaultMap(()=>14);
         this.layoutNodes = [];
     }
@@ -1396,52 +1560,58 @@ class Component extends Schedule {
     isAABBIntersecting(a, b) {
         return !(a.x + a.width < b.x || b.x + b.width < a.x || a.y + a.height < b.y || b.y + b.height < a.y);
     }
-    drawBroundRect(node) {
+    drawNode(node, box) {
         const [x, y, w, h] = node.layout;
         const { rectRadius } = node.config;
         const effectiveRadius = Math.min(rectRadius, w / 4, h / 4);
         const fill = this.colorMappings[node.node.id] || DEFAULT_RECT_FILL_DESC;
+        const graphic = new Box(undefined, node);
+        if (box) {
+            box.add(graphic);
+        } else {
+            this.add(graphic);
+        }
         const rect = createRoundBlock(x, y, w, h, {
             fill,
             padding: 0,
             radius: effectiveRadius
+        }, {
+            x,
+            y,
+            w,
+            h
         });
-        this.rectLayer.add(rect);
-        for (const child of node.children){
-            this.drawBroundRect(child);
-        }
-    }
-    drawText(node) {
-        if (!node.node.label && !node.node.isCombinedNode) {
-            return;
-        }
-        const [x, y, w, h] = node.layout;
-        const { titleAreaHeight } = node.config;
-        const content = node.node.isCombinedNode ? `+ ${node.node.originalNodeCount} Modules` : node.node.label;
-        const availableHeight = node.children && node.children.length > 0 ? titleAreaHeight - DEFAULT_RECT_GAP * 2 : h - DEFAULT_RECT_GAP * 2;
-        const availableWidth = w - DEFAULT_RECT_GAP * 2;
-        if (availableWidth <= 0 || availableHeight <= 0) {
-            return;
-        }
-        const config = {
-            fontSize: this.config.font?.fontSize || DEFAULT_FONT_SIZE,
-            family: this.config.font?.family || DEFAULT_FONT_FAMILY,
-            color: this.config.font?.color || DEFAULT_FONT_COLOR
-        };
-        const optimalFontSize = this.caches.getOrInsert(node.node.id, evaluateOptimalFontSize(this.render.ctx, content, config, availableWidth, availableHeight));
-        const font = `${optimalFontSize}px ${config.family}`;
-        this.render.ctx.font = font;
-        const result = getTextLayout(this.render.ctx, content, availableWidth, availableHeight);
-        if (!result.valid) {
-            return;
+        graphic.add(rect);
+        if (node.node.label || node.node.isCombinedNode) {
+            const content = node.node.isCombinedNode ? `+ ${node.node.originalNodeCount} Modules` : node.node.label;
+            const { titleAreaHeight } = node.config;
+            const availableHeight = node.children && node.children.length > 0 ? titleAreaHeight - DEFAULT_RECT_GAP * 2 : h - DEFAULT_RECT_GAP * 2;
+            const availableWidth = w - DEFAULT_RECT_GAP * 2;
+            if (availableWidth > 0 && availableHeight > 0) {
+                const config = {
+                    fontSize: this.config.font?.fontSize || DEFAULT_FONT_SIZE,
+                    family: this.config.font?.family || DEFAULT_FONT_FAMILY,
+                    color: this.config.font?.color || DEFAULT_FONT_COLOR
+                };
+                const optimalFontSize = this.caches.getOrCreate(node.node.id, ()=>evaluateOptimalFontSize(this.render.ctx, content, config, availableWidth, availableHeight));
+                const font = `${optimalFontSize}px ${config.family}`;
+                this.render.ctx.font = font;
+                const result = getTextLayout(this.render.ctx, content, availableWidth, availableHeight);
+                if (!result.valid) {
+                    return;
+                }
+                const { text } = result;
+                const textX = x + Math.round(w / 2);
+                const textY = y + (node.children && node.children.length > 0 ? Math.round(titleAreaHeight / 2) : Math.round(h / 2));
+                const textComponent = createTitleText(text, textX, textY, font, config.color, {
+                    textX,
+                    textY
+                });
+                graphic.add(textComponent);
+            }
         }
-        const { text } = result;
-        const textX = x + Math.round(w / 2);
-        const textY = y + (node.children && node.children.length > 0 ? Math.round(titleAreaHeight / 2) : Math.round(h / 2));
-        const textComponent = createTitleText(text, textX, textY, font, config.color);
-        this.textLayer.add(textComponent);
         for (const child of node.children){
-            this.drawText(child);
+            this.drawNode(child, graphic);
         }
     }
     draw(flush = true, update = true) {
@@ -1462,20 +1632,14 @@ class Component extends Schedule {
             }
         }
         for (const node of this.layoutNodes){
-            this.drawBroundRect(node);
-        }
-        for (const node of this.layoutNodes){
-            this.drawText(node);
+            this.drawNode(node, null);
         }
-        this.add(this.rectLayer, this.textLayer);
         if (update) {
             this.update();
         }
     }
     cleanup() {
-        this.remove(this.rectLayer, this.textLayer);
-        this.rectLayer.destory();
-        this.textLayer.destory();
+        this.destory();
     }
     calculateLayoutNodes(data, rect, scale = 1) {
         const config = {
@@ -1512,8 +1676,8 @@ function evaluateOptimalFontSize(c, text, config, desiredW, desiredH) {
     return Math.floor(min);
 }
 function getTextLayout(c, text, width, height) {
-    const textWidth = c.measureText(text).width;
     const metrics = c.measureText(text);
+    const textWidth = metrics.width;
     const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
     if (textHeight > height) {
         return {
@@ -1691,16 +1855,20 @@ class DOMEvent extends Event {
         }
     }
     dispatch(kind, e) {
-        const node = this.findRelativeNode(e);
-        this.component.pluginDriver.runHook('onDOMEventTriggered', kind, e, node, this);
+        const { native } = e;
+        const bbox = captureBoxXY(this.el, native, 1, 1, this.matrix.e, this.matrix.f);
+        const graphic = findRelativeGraphicNode(bbox, this.component.elements);
+        this.component.pluginDriver.runHook('onDOMEventTriggered', kind, e, graphic, this);
         this.emit('__exposed__', kind, {
             native: e.native,
-            module: node
+            module: graphic
         });
     }
-    findRelativeNode(e) {
-        return findRelativeNode(captureBoxXY(this.el, e.native, 1, 1, this.matrix.e, this.matrix.f), this.component.layoutNodes);
+    findRelativeGraphicNode(metadata) {
+        const { native } = metadata;
+        const bbox = captureBoxXY(this.el, native, 1, 1, this.matrix.e, this.matrix.f);
+        return findRelativeGraphicNode(bbox, this.component.elements);
     }
 }
 
-export { stackMatrixTransformWithGraphAndLayer as A, smoothFrame as B, Component as C, DOMEvent as D, Event as E, isScrollWheelOrRightButtonOnMouseupAndDown as F, DefaultMap as G, DEFAULT_MATRIX_LOC as H, PI_2 as P, Schedule as S, assertExists as a, bindParentForModule as b, c2m as c, findRelativeNodeById as d, flatten as e, findRelativeNode as f, getNodeDepth as g, definePlugin as h, isClickEvent as i, isContextMenuEvent as j, isMouseEvent as k, logger as l, mixin as m, isWheelEvent as n, hashCode as o, perferNumeric as p, noop as q, createRoundBlock as r, sortChildrenByKey as s, createTitleText as t, raf as u, visit as v, createCanvasElement as w, applyCanvasTransform as x, typedForIn as y, stackMatrixTransform as z };
+export { Render as A, Box as B, Component as C, DOMEvent as D, Event as E, hashCode as F, perferNumeric as G, noop as H, createRoundBlock as I, createTitleText as J, raf as K, createCanvasElement as L, applyCanvasTransform as M, typedForIn as N, stackMatrixTransform as O, stackMatrixTransformWithGraphAndLayer as P, smoothFrame as Q, RoundRect as R, Schedule as S, Text as T, isScrollWheelOrRightButtonOnMouseupAndDown as U, DefaultMap as V, DEFAULT_MATRIX_LOC as W, PI_2 as X, assertExists as a, bindParentForModule as b, c2m as c, findRelativeNodeById as d, flatten as e, findRelativeNode as f, getNodeDepth as g, definePlugin as h, isClickEvent as i, isContextMenuEvent as j, isMouseEvent as k, logger as l, mixin as m, isWheelEvent as n, isGraph as o, isBox as p, isRoundRect as q, isText as r, sortChildrenByKey as s, traverse as t, asserts as u, visit as v, easing as w, drawGraphIntoCanvas as x, writeBoundingRectForCanvas as y, Canvas as z };