squarified 0.6.1 → 1.0.0

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

@@ -1095,8 +1095,8 @@ function squarify(data, rect, config, scale = 1) {
     const totalArea = rect.w * rect.h;
     const containerSize = Math.min(rect.w, rect.h);
     const scaleFactor = Math.max(0.5, Math.min(1, containerSize / 800));
-    // evaluate minimum renderable size
-    const minRenderableSize = Math.max(20, containerSize * 0.05) / scale;
+    const baseMinSize = 20;
+    const minRenderableSize = Math.max(8, baseMinSize / Math.sqrt(scale));
     const minRenderableArea = minRenderableSize * minRenderableSize;
     const scaledGap = config.rectGap * scaleFactor;
     const scaledRadius = config.rectRadius * scaleFactor;
@@ -1364,17 +1364,17 @@ class Component extends Schedule {
         }
         return result;
     }
-    getViewportAABB(matrixE, matrixF, scale) {
+    getViewportAABB(matrixE, matrixF) {
         const { width, height } = this.render.options;
-        const worldX = -matrixE / scale;
-        const worldY = -matrixF / scale;
-        const worldWidth = width / scale;
-        const worldHeight = height / scale;
+        const viewportX = -matrixE;
+        const viewportY = -matrixF;
+        const viewportWidth = width;
+        const viewportHeight = height;
         return {
-            x: worldX,
-            y: worldY,
-            width: worldWidth,
-            height: worldHeight
+            x: viewportX,
+            y: viewportY,
+            width: viewportWidth,
+            height: viewportHeight
         };
     }
     getAABBUnion(a, b) {
@@ -1390,8 +1390,8 @@ class Component extends Schedule {
         };
     }
     handleTransformCacheInvalidation(oldMatrix, newMatrix) {
-        const oldViewportAABB = this.getViewportAABB(oldMatrix.e, oldMatrix.f, oldMatrix.a);
-        const newViewportAABB = this.getViewportAABB(newMatrix.e, newMatrix.f, newMatrix.a);
+        const oldViewportAABB = this.getViewportAABB(oldMatrix.e, oldMatrix.f);
+        const newViewportAABB = this.getViewportAABB(newMatrix.e, newMatrix.f);
         const affectedAABB = this.getAABBUnion(oldViewportAABB, newViewportAABB);
         this.clearFontCacheInAABB(affectedAABB);
     }
@@ -1699,10 +1699,9 @@ class DOMEvent extends Event {
             native: e.native,
             module: node
         });
-    // For MacOS
     }
     findRelativeNode(e) {
-        return findRelativeNode(captureBoxXY(this.el, e.native, this.matrix.a, this.matrix.d, this.matrix.e, this.matrix.f), this.component.layoutNodes);
+        return findRelativeNode(captureBoxXY(this.el, e.native, 1, 1, this.matrix.e, this.matrix.f), this.component.layoutNodes);
     }
 }
 

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

@@ -1093,8 +1093,8 @@ function squarify(data, rect, config, scale = 1) {
     const totalArea = rect.w * rect.h;
     const containerSize = Math.min(rect.w, rect.h);
     const scaleFactor = Math.max(0.5, Math.min(1, containerSize / 800));
-    // evaluate minimum renderable size
-    const minRenderableSize = Math.max(20, containerSize * 0.05) / scale;
+    const baseMinSize = 20;
+    const minRenderableSize = Math.max(8, baseMinSize / Math.sqrt(scale));
     const minRenderableArea = minRenderableSize * minRenderableSize;
     const scaledGap = config.rectGap * scaleFactor;
     const scaledRadius = config.rectRadius * scaleFactor;
@@ -1362,17 +1362,17 @@ class Component extends Schedule {
         }
         return result;
     }
-    getViewportAABB(matrixE, matrixF, scale) {
+    getViewportAABB(matrixE, matrixF) {
         const { width, height } = this.render.options;
-        const worldX = -matrixE / scale;
-        const worldY = -matrixF / scale;
-        const worldWidth = width / scale;
-        const worldHeight = height / scale;
+        const viewportX = -matrixE;
+        const viewportY = -matrixF;
+        const viewportWidth = width;
+        const viewportHeight = height;
         return {
-            x: worldX,
-            y: worldY,
-            width: worldWidth,
-            height: worldHeight
+            x: viewportX,
+            y: viewportY,
+            width: viewportWidth,
+            height: viewportHeight
         };
     }
     getAABBUnion(a, b) {
@@ -1388,8 +1388,8 @@ class Component extends Schedule {
         };
     }
     handleTransformCacheInvalidation(oldMatrix, newMatrix) {
-        const oldViewportAABB = this.getViewportAABB(oldMatrix.e, oldMatrix.f, oldMatrix.a);
-        const newViewportAABB = this.getViewportAABB(newMatrix.e, newMatrix.f, newMatrix.a);
+        const oldViewportAABB = this.getViewportAABB(oldMatrix.e, oldMatrix.f);
+        const newViewportAABB = this.getViewportAABB(newMatrix.e, newMatrix.f);
         const affectedAABB = this.getAABBUnion(oldViewportAABB, newViewportAABB);
         this.clearFontCacheInAABB(affectedAABB);
     }
@@ -1697,10 +1697,9 @@ class DOMEvent extends Event {
             native: e.native,
             module: node
         });
-    // For MacOS
     }
     findRelativeNode(e) {
-        return findRelativeNode(captureBoxXY(this.el, e.native, this.matrix.a, this.matrix.d, this.matrix.e, this.matrix.f), this.component.layoutNodes);
+        return findRelativeNode(captureBoxXY(this.el, e.native, 1, 1, this.matrix.e, this.matrix.f), this.component.layoutNodes);
     }
 }
 

package/dist/{index-Bb8ZzMCD.d.ts → index-Bks7tGiV.d.ts}

@@ -403,16 +403,14 @@ declare class Component extends Schedule {
     constructor(config: GraphicConfig, ...args: ConstructorParameters<typeof Schedule>);
     clearFontCacheInAABB(aabb: AABB): void;
     private getModulesInAABB;
-    getViewportAABB(matrixE: number, matrixF: number, scale: number): AABB;
+    getViewportAABB(matrixE: number, matrixF: number): AABB;
     private getAABBUnion;
     handleTransformCacheInvalidation(oldMatrix: {
         e: number;
         f: number;
-        a: number;
     }, newMatrix: {
         e: number;
         f: number;
-        a: number;
     }): void;
     private isAABBIntersecting;
     private drawBroundRect;

package/dist/index.d.mts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, Y as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, O as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, T as TreemapOptions, K as applyCanvasTransform, f as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, y as hashCode, q as isClickEvent, r as isContextMenuEvent, t as isMouseEvent, X as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, Q as mixin, A as noop, z as perferNumeric, I as raf, W as smoothFrame, s as sortChildrenByKey, U as stackMatrixTransform, V as stackMatrixTransformWithGraphAndLayer, R as typedForIn, v as visit } from './index-Bb8ZzMCD.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, Y as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, O as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, T as TreemapOptions, K as applyCanvasTransform, f as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, y as hashCode, q as isClickEvent, r as isContextMenuEvent, t as isMouseEvent, X as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, Q as mixin, A as noop, z as perferNumeric, I as raf, W as smoothFrame, s as sortChildrenByKey, U as stackMatrixTransform, V as stackMatrixTransformWithGraphAndLayer, R as typedForIn, v as visit } from './index-Bks7tGiV.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, Y as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, O as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, T as TreemapOptions, K as applyCanvasTransform, f as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, y as hashCode, q as isClickEvent, r as isContextMenuEvent, t as isMouseEvent, X as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, Q as mixin, A as noop, z as perferNumeric, I as raf, W as smoothFrame, s as sortChildrenByKey, U as stackMatrixTransform, V as stackMatrixTransformWithGraphAndLayer, R as typedForIn, v as visit } from './index-Bb8ZzMCD.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, Y as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, O as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, T as TreemapOptions, K as applyCanvasTransform, f as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, y as hashCode, q as isClickEvent, r as isContextMenuEvent, t as isMouseEvent, X as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, Q as mixin, A as noop, z as perferNumeric, I as raf, W as smoothFrame, s as sortChildrenByKey, U as stackMatrixTransform, V as stackMatrixTransformWithGraphAndLayer, R as typedForIn, v as visit } from './index-Bks7tGiV.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var domEvent = require('./dom-event-CxIxc4YC.js');
+var domEvent = require('./dom-event-ClwTQnot.js');
 
 function createTreemap(// @ts-expect-error todo fix
 options) {

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { l as logger, m as mixin, E as Event, a as assertExists, b as bindParentForModule, C as Component, D as DOMEvent } from './dom-event-CKb3Ko4-.mjs';
-export { G as DefaultMap, x as applyCanvasTransform, c as c2m, w as createCanvasElement, r as createRoundBlock, t as createTitleText, h as definePlugin, f as findRelativeNode, d as findRelativeNodeById, e as flattenModule, g as getNodeDepth, o as hashCode, i as isClickEvent, j as isContextMenuEvent, k as isMouseEvent, F as isScrollWheelOrRightButtonOnMouseupAndDown, n as isWheelEvent, q as noop, p as perferNumeric, u as raf, B as smoothFrame, s as sortChildrenByKey, z as stackMatrixTransform, A as stackMatrixTransformWithGraphAndLayer, y as typedForIn, v as visit } from './dom-event-CKb3Ko4-.mjs';
+import { l as logger, m as mixin, E as Event, a as assertExists, b as bindParentForModule, C as Component, D as DOMEvent } from './dom-event-DrYYfglv.mjs';
+export { G as DefaultMap, x as applyCanvasTransform, c as c2m, w as createCanvasElement, r as createRoundBlock, t as createTitleText, h as definePlugin, f as findRelativeNode, d as findRelativeNodeById, e as flattenModule, g as getNodeDepth, o as hashCode, i as isClickEvent, j as isContextMenuEvent, k as isMouseEvent, F as isScrollWheelOrRightButtonOnMouseupAndDown, n as isWheelEvent, q as noop, p as perferNumeric, u as raf, B as smoothFrame, s as sortChildrenByKey, z as stackMatrixTransform, A as stackMatrixTransformWithGraphAndLayer, y as typedForIn, v as visit } from './dom-event-DrYYfglv.mjs';
 
 function createTreemap(// @ts-expect-error todo fix
 options) {

package/dist/plugin.d.mts

@@ -1,4 +1,4 @@
-import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-Bb8ZzMCD.js';
+import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-Bks7tGiV.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -8,6 +8,7 @@ declare const presetHighlightPlugin: {
     onDispose(this: PluginContext): void;
     meta: {
         highlight: null;
+        highlightSeq: number;
     };
 };
 

package/dist/plugin.d.ts

@@ -1,4 +1,4 @@
-import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-Bb8ZzMCD.js';
+import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-Bks7tGiV.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -8,6 +8,7 @@ declare const presetHighlightPlugin: {
     onDispose(this: PluginContext): void;
     meta: {
         highlight: null;
+        highlightSeq: number;
     };
 };
 

package/dist/plugin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var domEvent = require('./dom-event-CxIxc4YC.js');
+var domEvent = require('./dom-event-ClwTQnot.js');
 
 // Currently, etoile is an internal module, so we won't need too much easing functions.
 // And the animation logic is implemented by user code.
@@ -75,11 +75,19 @@ const presetHighlightPlugin = domEvent.definePlugin({
                     meta.highlight?.reset();
                     meta.highlight?.update();
                     meta.highlight?.setZIndexForHighlight();
+                    meta.highlightSeq = (meta.highlightSeq ?? 0) + 1;
                     return;
                 }
                 const [x, y, w, h] = module.layout;
                 const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
+                meta.highlightSeq = (meta.highlightSeq ?? 0) + 1;
+                const thisSeq = meta.highlightSeq;
                 domEvent.smoothFrame((_, cleanup)=>{
+                    if (meta.highlightSeq !== thisSeq) {
+                        meta.highlight?.setZIndexForHighlight();
+                        cleanup();
+                        return;
+                    }
                     cleanup();
                     meta.highlight?.reset();
                     const mask = domEvent.createRoundBlock(x, y, w, h, {
@@ -90,7 +98,7 @@ const presetHighlightPlugin = domEvent.definePlugin({
                     });
                     meta.highlight?.add(mask);
                     meta.highlight?.setZIndexForHighlight('1');
-                    domEvent.stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
+                    domEvent.stackMatrixTransform(mask, matrix.e, matrix.f, 1);
                     meta.highlight?.update();
                 }, {
                     duration: ANIMATION_DURATION
@@ -117,7 +125,8 @@ const presetHighlightPlugin = domEvent.definePlugin({
         }
     },
     meta: {
-        highlight: null
+        highlight: null,
+        highlightSeq: 0
     }
 });
 
@@ -162,7 +171,7 @@ const presetDragElementPlugin = domEvent.definePlugin({
                             meta.dragOptions.lastY = lastY;
                             component.cleanup();
                             component.draw(false, false);
-                            domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
                             component.update();
                             return true;
                         }, {
@@ -477,16 +486,19 @@ function updateViewport(pluginContext, { stateManager: state, component, matrix
             highlight.highlight.reset();
             highlight.highlight.setZIndexForHighlight();
         }
+        if (highlight) {
+            highlight.highlightSeq = (highlight.highlightSeq ?? 0) + 1;
+        }
         component.cleanup();
         const { width, height } = component.render.options;
         component.layoutNodes = component.calculateLayoutNodes(component.data, {
-            w: width,
-            h: height,
+            w: width * matrix.a,
+            h: height * matrix.d,
             x: 0,
             y: 0
-        }, matrix.a);
+        }, 1);
         component.draw(true, false);
-        domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+        domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
         component.update();
         if (state.canTransition('IDLE')) {
             state.transition('IDLE');
@@ -513,8 +525,7 @@ function handleZoom(pluginContext, event, domEvent) {
     const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
     const oldMatrix = {
         e: matrix.e,
-        f: matrix.f,
-        a: matrix.a
+        f: matrix.f
     };
     const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
     const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
@@ -532,8 +543,7 @@ function handleZoom(pluginContext, event, domEvent) {
     matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
     const newMatrix = {
         e: matrix.e,
-        f: matrix.f,
-        a: matrix.a
+        f: matrix.f
     };
     component.handleTransformCacheInvalidation(oldMatrix, newMatrix);
     updateViewport(pluginContext, domEvent, false);
@@ -582,17 +592,19 @@ const presetZoomablePlugin = domEvent.definePlugin({
                         const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
                         const { width, height } = component.render.options;
                         const currentScale = matrix.a;
+                        // To prevent unlimited scale factor growth.
                         const scaleX = width * ZOOM_PADDING_RATIO / nodeW;
                         const scaleY = height * ZOOM_PADDING_RATIO / nodeH;
-                        const idealScale = Math.min(scaleX, scaleY);
+                        const idleScale = Math.min(scaleX, scaleY);
                         const maxAllowedScale = currentScale * MAX_SCALE_MULTIPLIER;
-                        const targetScale = Math.max(currentScale, Math.min(idealScale, maxAllowedScale));
-                        const nodeWorldCenterX = nodeX + nodeW / 2;
-                        const nodeWorldCenterY = nodeY + nodeH / 2;
-                        const viewCenterX = width / 2;
-                        const viewCenterY = height / 2;
-                        const targetE = viewCenterX - nodeWorldCenterX * targetScale;
-                        const targetF = viewCenterY - nodeWorldCenterY * targetScale;
+                        const targetScale = Math.max(currentScale, Math.min(idleScale, maxAllowedScale));
+                        // Real world args
+                        const viewportCenterX = width / 2;
+                        const viewportCenterY = height / 2;
+                        const originalNodeCenterX = (nodeX + nodeW / 2) / currentScale;
+                        const originalNodeCenterY = (nodeY + nodeH / 2) / currentScale;
+                        const targetE = viewportCenterX - originalNodeCenterX * targetScale;
+                        const targetF = viewportCenterY - originalNodeCenterY * targetScale;
                         const scaleMeta = getScaleOptions.call(this);
                         if (scaleMeta) {
                             scaleMeta.scaleOptions.scale = targetScale;
@@ -615,8 +627,7 @@ const presetZoomablePlugin = domEvent.definePlugin({
                         };
                         const finalMatrix = {
                             e: targetE,
-                            f: targetF,
-                            a: targetScale
+                            f: targetF
                         };
                         component.handleTransformCacheInvalidation(oldMatrix, finalMatrix);
                         domEvent.smoothFrame((progress)=>{
@@ -630,15 +641,18 @@ const presetZoomablePlugin = domEvent.definePlugin({
                                 highlight.highlight.reset();
                                 highlight.highlight.setZIndexForHighlight();
                             }
+                            if (highlight) {
+                                highlight.highlightSeq = (highlight.highlightSeq ?? 0) + 1;
+                            }
                             component.cleanup();
                             component.layoutNodes = component.calculateLayoutNodes(component.data, {
-                                w: width,
-                                h: height,
+                                w: width * matrix.a,
+                                h: height * matrix.d,
                                 x: 0,
                                 y: 0
-                            }, matrix.a);
+                            }, 1);
                             component.draw(true, false);
-                            domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
                             component.update();
                         }, {
                             duration: ANIMATION_DURATION,

package/dist/plugin.mjs

@@ -1,4 +1,4 @@
-import { h as definePlugin, B as smoothFrame, r as createRoundBlock, z as stackMatrixTransform, S as Schedule, H as DEFAULT_MATRIX_LOC, F as isScrollWheelOrRightButtonOnMouseupAndDown, A as stackMatrixTransformWithGraphAndLayer, j as isContextMenuEvent, o as hashCode, P as PI_2, n as isWheelEvent, m as mixin } from './dom-event-CKb3Ko4-.mjs';
+import { h as definePlugin, B as smoothFrame, r as createRoundBlock, z as stackMatrixTransform, S as Schedule, H as DEFAULT_MATRIX_LOC, F as isScrollWheelOrRightButtonOnMouseupAndDown, A as stackMatrixTransformWithGraphAndLayer, j as isContextMenuEvent, o as hashCode, P as PI_2, n as isWheelEvent, m as mixin } from './dom-event-DrYYfglv.mjs';
 
 // Currently, etoile is an internal module, so we won't need too much easing functions.
 // And the animation logic is implemented by user code.
@@ -73,11 +73,19 @@ const presetHighlightPlugin = definePlugin({
                     meta.highlight?.reset();
                     meta.highlight?.update();
                     meta.highlight?.setZIndexForHighlight();
+                    meta.highlightSeq = (meta.highlightSeq ?? 0) + 1;
                     return;
                 }
                 const [x, y, w, h] = module.layout;
                 const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
+                meta.highlightSeq = (meta.highlightSeq ?? 0) + 1;
+                const thisSeq = meta.highlightSeq;
                 smoothFrame((_, cleanup)=>{
+                    if (meta.highlightSeq !== thisSeq) {
+                        meta.highlight?.setZIndexForHighlight();
+                        cleanup();
+                        return;
+                    }
                     cleanup();
                     meta.highlight?.reset();
                     const mask = createRoundBlock(x, y, w, h, {
@@ -88,7 +96,7 @@ const presetHighlightPlugin = definePlugin({
                     });
                     meta.highlight?.add(mask);
                     meta.highlight?.setZIndexForHighlight('1');
-                    stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
+                    stackMatrixTransform(mask, matrix.e, matrix.f, 1);
                     meta.highlight?.update();
                 }, {
                     duration: ANIMATION_DURATION
@@ -115,7 +123,8 @@ const presetHighlightPlugin = definePlugin({
         }
     },
     meta: {
-        highlight: null
+        highlight: null,
+        highlightSeq: 0
     }
 });
 
@@ -160,7 +169,7 @@ const presetDragElementPlugin = definePlugin({
                             meta.dragOptions.lastY = lastY;
                             component.cleanup();
                             component.draw(false, false);
-                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
                             component.update();
                             return true;
                         }, {
@@ -475,16 +484,19 @@ function updateViewport(pluginContext, { stateManager: state, component, matrix
             highlight.highlight.reset();
             highlight.highlight.setZIndexForHighlight();
         }
+        if (highlight) {
+            highlight.highlightSeq = (highlight.highlightSeq ?? 0) + 1;
+        }
         component.cleanup();
         const { width, height } = component.render.options;
         component.layoutNodes = component.calculateLayoutNodes(component.data, {
-            w: width,
-            h: height,
+            w: width * matrix.a,
+            h: height * matrix.d,
             x: 0,
             y: 0
-        }, matrix.a);
+        }, 1);
         component.draw(true, false);
-        stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+        stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
         component.update();
         if (state.canTransition('IDLE')) {
             state.transition('IDLE');
@@ -511,8 +523,7 @@ function handleZoom(pluginContext, event, domEvent) {
     const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
     const oldMatrix = {
         e: matrix.e,
-        f: matrix.f,
-        a: matrix.a
+        f: matrix.f
     };
     const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
     const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
@@ -530,8 +541,7 @@ function handleZoom(pluginContext, event, domEvent) {
     matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
     const newMatrix = {
         e: matrix.e,
-        f: matrix.f,
-        a: matrix.a
+        f: matrix.f
     };
     component.handleTransformCacheInvalidation(oldMatrix, newMatrix);
     updateViewport(pluginContext, domEvent, false);
@@ -580,17 +590,19 @@ const presetZoomablePlugin = definePlugin({
                         const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
                         const { width, height } = component.render.options;
                         const currentScale = matrix.a;
+                        // To prevent unlimited scale factor growth.
                         const scaleX = width * ZOOM_PADDING_RATIO / nodeW;
                         const scaleY = height * ZOOM_PADDING_RATIO / nodeH;
-                        const idealScale = Math.min(scaleX, scaleY);
+                        const idleScale = Math.min(scaleX, scaleY);
                         const maxAllowedScale = currentScale * MAX_SCALE_MULTIPLIER;
-                        const targetScale = Math.max(currentScale, Math.min(idealScale, maxAllowedScale));
-                        const nodeWorldCenterX = nodeX + nodeW / 2;
-                        const nodeWorldCenterY = nodeY + nodeH / 2;
-                        const viewCenterX = width / 2;
-                        const viewCenterY = height / 2;
-                        const targetE = viewCenterX - nodeWorldCenterX * targetScale;
-                        const targetF = viewCenterY - nodeWorldCenterY * targetScale;
+                        const targetScale = Math.max(currentScale, Math.min(idleScale, maxAllowedScale));
+                        // Real world args
+                        const viewportCenterX = width / 2;
+                        const viewportCenterY = height / 2;
+                        const originalNodeCenterX = (nodeX + nodeW / 2) / currentScale;
+                        const originalNodeCenterY = (nodeY + nodeH / 2) / currentScale;
+                        const targetE = viewportCenterX - originalNodeCenterX * targetScale;
+                        const targetF = viewportCenterY - originalNodeCenterY * targetScale;
                         const scaleMeta = getScaleOptions.call(this);
                         if (scaleMeta) {
                             scaleMeta.scaleOptions.scale = targetScale;
@@ -613,8 +625,7 @@ const presetZoomablePlugin = definePlugin({
                         };
                         const finalMatrix = {
                             e: targetE,
-                            f: targetF,
-                            a: targetScale
+                            f: targetF
                         };
                         component.handleTransformCacheInvalidation(oldMatrix, finalMatrix);
                         smoothFrame((progress)=>{
@@ -628,15 +639,18 @@ const presetZoomablePlugin = definePlugin({
                                 highlight.highlight.reset();
                                 highlight.highlight.setZIndexForHighlight();
                             }
+                            if (highlight) {
+                                highlight.highlightSeq = (highlight.highlightSeq ?? 0) + 1;
+                            }
                             component.cleanup();
                             component.layoutNodes = component.calculateLayoutNodes(component.data, {
-                                w: width,
-                                h: height,
+                                w: width * matrix.a,
+                                h: height * matrix.d,
                                 x: 0,
                                 y: 0
-                            }, matrix.a);
+                            }, 1);
                             component.draw(true, false);
-                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
                             component.update();
                         }, {
                             duration: ANIMATION_DURATION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.6.1",
+  "version": "1.0.0",
   "description": "squarified tree map",
   "main": "dist/index.js",
   "module": "dist/index.mjs",