squarified 0.6.2 → 1.1.0

package/dist/{dom-event-ClwTQnot.js → dom-event-BkRCiIWB.js}

@@ -38,6 +38,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;
@@ -96,10 +102,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() {
     //
@@ -276,7 +284,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;
@@ -292,12 +300,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++){
@@ -341,8 +351,8 @@ const asserts = {
 
 class C extends Display {
     elements;
-    constructor(){
-        super();
+    constructor(id){
+        super(id);
         this.elements = [];
     }
     add(...elements) {
@@ -373,16 +383,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;
         }
     }
@@ -406,7 +445,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 = [
                 {
@@ -420,7 +459,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({
@@ -473,8 +512,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__() {
@@ -510,16 +549,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);
     }
@@ -536,8 +576,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;
@@ -556,6 +597,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(){
@@ -703,7 +771,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,
@@ -712,9 +780,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,
@@ -726,7 +794,7 @@ function createTitleText(text, x, y, font, color) {
             font,
             lineWidth: 1
         }
-    });
+    }, widget);
 }
 const raf = window.requestAnimationFrame;
 function createCanvasElement() {
@@ -798,9 +866,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;
         }
@@ -871,19 +939,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,
@@ -895,13 +964,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;
@@ -917,11 +1009,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,
@@ -929,15 +1040,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);
     }
 }
 
@@ -1008,13 +1166,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;
             }
@@ -1041,6 +1200,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('-');
@@ -1323,8 +1491,6 @@ class Component extends Schedule {
     pluginDriver;
     data;
     colorMappings;
-    rectLayer;
-    textLayer;
     layoutNodes;
     config;
     caches;
@@ -1334,8 +1500,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 = [];
     }
@@ -1398,52 +1562,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) {
@@ -1464,20 +1634,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 = {
@@ -1514,8 +1678,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 {
@@ -1693,42 +1857,58 @@ 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);
     }
 }
 
+exports.Box = Box;
+exports.Canvas = Canvas;
 exports.Component = Component;
 exports.DEFAULT_MATRIX_LOC = DEFAULT_MATRIX_LOC;
 exports.DOMEvent = DOMEvent;
 exports.DefaultMap = DefaultMap;
 exports.Event = Event;
 exports.PI_2 = PI_2;
+exports.Render = Render;
+exports.RoundRect = RoundRect;
 exports.Schedule = Schedule;
+exports.Text = Text;
 exports.applyCanvasTransform = applyCanvasTransform;
 exports.assertExists = assertExists;
+exports.asserts = asserts;
 exports.bindParentForModule = bindParentForModule;
 exports.c2m = c2m;
 exports.createCanvasElement = createCanvasElement;
 exports.createRoundBlock = createRoundBlock;
 exports.createTitleText = createTitleText;
 exports.definePlugin = definePlugin;
+exports.drawGraphIntoCanvas = drawGraphIntoCanvas;
+exports.easing = easing;
 exports.findRelativeNode = findRelativeNode;
 exports.findRelativeNodeById = findRelativeNodeById;
 exports.flatten = flatten;
 exports.getNodeDepth = getNodeDepth;
 exports.hashCode = hashCode;
+exports.isBox = isBox;
 exports.isClickEvent = isClickEvent;
 exports.isContextMenuEvent = isContextMenuEvent;
+exports.isGraph = isGraph;
 exports.isMouseEvent = isMouseEvent;
+exports.isRoundRect = isRoundRect;
 exports.isScrollWheelOrRightButtonOnMouseupAndDown = isScrollWheelOrRightButtonOnMouseupAndDown;
+exports.isText = isText;
 exports.isWheelEvent = isWheelEvent;
 exports.logger = logger;
 exports.mixin = mixin;
@@ -1739,5 +1919,7 @@ exports.smoothFrame = smoothFrame;
 exports.sortChildrenByKey = sortChildrenByKey;
 exports.stackMatrixTransform = stackMatrixTransform;
 exports.stackMatrixTransformWithGraphAndLayer = stackMatrixTransformWithGraphAndLayer;
+exports.traverse = traverse;
 exports.typedForIn = typedForIn;
 exports.visit = visit;
+exports.writeBoundingRectForCanvas = writeBoundingRectForCanvas;