squarified 0.4.2 → 0.5.0

package/README.md

@@ -2,8 +2,6 @@
 
 `squarified` is a minimal and powerful treemap component.
 
-https://github.com/user-attachments/assets/caf30d9d-0a5a-446a-b767-7927bf4387c9
-
 ## Install
 
 ```shell
@@ -18,6 +16,10 @@ nonzzz.github.io/squarified/
 
 Kanno
 
+### Credits
+
+Algorithm is ported from [esbuild Bundle Size Analyzer](https://esbuild.github.io/analyze/) by [Evan Wallace](https://github.com/evanw). Refactor algorithm to adjusted the layout.
+
 ### LICENSE
 
 [MIT](./LICENSE)

package/dist/{dom-event-BLJt9knO.mjs → dom-event-Bkw3ecGf.mjs}

@@ -1529,7 +1529,7 @@ class StateManager {
     canTransition(to) {
         switch(this.current){
             case 'IDLE':
-                return to === 'PRESSED' || to === 'MOVE' || to === 'SCALING' || to === 'ZOOMING';
+                return to === 'PRESSED' || to === 'MOVE' || to === 'SCALING' || to === 'ZOOMING' || to === 'PANNING';
             case 'PRESSED':
                 return to === 'DRAGGING' || to === 'IDLE';
             case 'DRAGGING':
@@ -1540,6 +1540,8 @@ class StateManager {
                 return to === 'IDLE';
             case 'ZOOMING':
                 return to === 'IDLE';
+            case 'PANNING':
+                return to === 'IDLE';
             default:
                 return false;
         }

package/dist/{dom-event-CeVZ44nB.js → dom-event-Dz0I7Z12.js}

@@ -1531,7 +1531,7 @@ class StateManager {
     canTransition(to) {
         switch(this.current){
             case 'IDLE':
-                return to === 'PRESSED' || to === 'MOVE' || to === 'SCALING' || to === 'ZOOMING';
+                return to === 'PRESSED' || to === 'MOVE' || to === 'SCALING' || to === 'ZOOMING' || to === 'PANNING';
             case 'PRESSED':
                 return to === 'DRAGGING' || to === 'IDLE';
             case 'DRAGGING':
@@ -1542,6 +1542,8 @@ class StateManager {
                 return to === 'IDLE';
             case 'ZOOMING':
                 return to === 'IDLE';
+            case 'PANNING':
+                return to === 'IDLE';
             default:
                 return false;
         }

package/dist/{index-BoUEaWVv.d.ts → index-Dskgz6nc.d.ts}

@@ -454,6 +454,7 @@ declare const STATE_TRANSITION: {
     readonly ZOOMING: "ZOOMING";
     readonly MOVE: "MOVE";
     readonly SCALING: "SCALING";
+    readonly PANNING: "PANNING";
 };
 type StateTransition = typeof STATE_TRANSITION[keyof typeof STATE_TRANSITION];
 declare class StateManager {

package/dist/index.d.mts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U 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, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-BoUEaWVv.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U 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, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-Dskgz6nc.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U 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, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-BoUEaWVv.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U 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, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-Dskgz6nc.js';

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var domEvent = require('./dom-event-CeVZ44nB.js');
+var domEvent = require('./dom-event-Dz0I7Z12.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, n as noop, a as assertExists, b as bindParentForModule, C as Component, D as DOMEvent } from './dom-event-BLJt9knO.mjs';
-export { J 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, p as hashCode, i as isClickEvent, j as isContextMenuEvent, A as isMacOS, k as isMouseEvent, I as isScrollWheelOrRightButtonOnMouseupAndDown, o as isWheelEvent, y as mixinWithParams, q as perferNumeric, z as prettyStrJoin, u as raf, H as smoothFrame, s as sortChildrenByKey, F as stackMatrixTransform, G as stackMatrixTransformWithGraphAndLayer, B as typedForIn, v as visit } from './dom-event-BLJt9knO.mjs';
+import { l as logger, m as mixin, E as Event, n as noop, a as assertExists, b as bindParentForModule, C as Component, D as DOMEvent } from './dom-event-Bkw3ecGf.mjs';
+export { J 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, p as hashCode, i as isClickEvent, j as isContextMenuEvent, A as isMacOS, k as isMouseEvent, I as isScrollWheelOrRightButtonOnMouseupAndDown, o as isWheelEvent, y as mixinWithParams, q as perferNumeric, z as prettyStrJoin, u as raf, H as smoothFrame, s as sortChildrenByKey, F as stackMatrixTransform, G as stackMatrixTransformWithGraphAndLayer, B as typedForIn, v as visit } from './dom-event-Bkw3ecGf.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-BoUEaWVv.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-Dskgz6nc.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -25,6 +25,21 @@ declare const presetDragElementPlugin: {
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
 
+interface MenuRenderConfig {
+    html: string;
+    action: string;
+}
+interface MenuPluginOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    render?: (menu: HTMLDivElement) => MenuRenderConfig[];
+    onClick?: (action: string, module: LayoutModule | null) => void;
+}
+declare function presetMenuPlugin(options?: MenuPluginOptions): {
+    name: "treemap:preset-menu";
+    onDOMEventTriggered<N extends DOMEventType>(this: PluginContext, _: N, event: DOMEventMetadata<N>, __: LayoutModule | null, DOMEvent: DOMEvent): void;
+    onDispose(this: PluginContext): void;
+};
+
 declare const presetColorPlugin: {
     name: "treemap:preset-color";
     onModuleInit(this: PluginContext, modules: LayoutModule[]): {
@@ -54,6 +69,16 @@ declare function presetScalePlugin(options?: ScalePluginOptions): {
             maxScale: number;
             scaleFactor: number;
         };
+        gestureState: {
+            isTrackingGesture: false;
+            lastEventTime: number;
+            eventCount: number;
+            totalDeltaY: number;
+            totalDeltaX: number;
+            consecutivePinchEvents: number;
+            gestureType: "unknown";
+            lockGestureType: false;
+        };
     };
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
@@ -75,4 +100,4 @@ declare const presetZoomablePlugin: {
     meta: ZoomableMetadata;
 };
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

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-BoUEaWVv.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-Dskgz6nc.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -25,6 +25,21 @@ declare const presetDragElementPlugin: {
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
 
+interface MenuRenderConfig {
+    html: string;
+    action: string;
+}
+interface MenuPluginOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    render?: (menu: HTMLDivElement) => MenuRenderConfig[];
+    onClick?: (action: string, module: LayoutModule | null) => void;
+}
+declare function presetMenuPlugin(options?: MenuPluginOptions): {
+    name: "treemap:preset-menu";
+    onDOMEventTriggered<N extends DOMEventType>(this: PluginContext, _: N, event: DOMEventMetadata<N>, __: LayoutModule | null, DOMEvent: DOMEvent): void;
+    onDispose(this: PluginContext): void;
+};
+
 declare const presetColorPlugin: {
     name: "treemap:preset-color";
     onModuleInit(this: PluginContext, modules: LayoutModule[]): {
@@ -54,6 +69,16 @@ declare function presetScalePlugin(options?: ScalePluginOptions): {
             maxScale: number;
             scaleFactor: number;
         };
+        gestureState: {
+            isTrackingGesture: false;
+            lastEventTime: number;
+            eventCount: number;
+            totalDeltaY: number;
+            totalDeltaX: number;
+            consecutivePinchEvents: number;
+            gestureType: "unknown";
+            lockGestureType: false;
+        };
     };
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
@@ -75,4 +100,4 @@ declare const presetZoomablePlugin: {
     meta: ZoomableMetadata;
 };
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

package/dist/plugin.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var domEvent = require('./dom-event-CeVZ44nB.js');
+var domEvent = require('./dom-event-Dz0I7Z12.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.
@@ -241,6 +241,72 @@ function getDragOptions() {
     return meta;
 }
 
+function presetMenuPlugin(options) {
+    let menu = null;
+    let domEvent$1 = null;
+    const handleMenuClick = (e)=>{
+        if (!domEvent$1) {
+            return;
+        }
+        if (!menu) {
+            return;
+        }
+        const target = e.target;
+        if (target.parentNode) {
+            const parent = target.parentNode;
+            const action = parent.getAttribute('data-action');
+            if (!action) {
+                return;
+            }
+            if (options?.onClick) {
+                options.onClick(action, domEvent$1.findRelativeNode({
+                    native: e,
+                    kind: undefined
+                }));
+            }
+        }
+        menu.style.display = 'none';
+    };
+    return domEvent.definePlugin({
+        name: 'treemap:preset-menu',
+        onDOMEventTriggered (_, event, __, DOMEvent) {
+            if (domEvent.isContextMenuEvent(event)) {
+                event.native.stopPropagation();
+                event.native.preventDefault();
+                if (!menu) {
+                    menu = document.createElement('div');
+                    domEvent$1 = DOMEvent;
+                    Object.assign(menu.style, {
+                        backgroundColor: '#fff',
+                        ...options?.style,
+                        position: 'absolute',
+                        zIndex: '9999'
+                    });
+                    menu.addEventListener('click', handleMenuClick);
+                    if (menu && options?.render) {
+                        const result = options.render(menu);
+                        menu.innerHTML = result.map((item)=>{
+                            return `<div data-action='${item.action}'>${item.html}</div>`;
+                        }).join('');
+                    }
+                    document.body.append(menu);
+                }
+                menu.style.left = event.native.clientX + 'px';
+                menu.style.top = event.native.clientY + 'px';
+                menu.style.display = 'initial';
+            }
+        },
+        onDispose () {
+            if (!menu) {
+                return;
+            }
+            menu.removeEventListener('click', handleMenuClick);
+            menu = null;
+            domEvent$1 = null;
+        }
+    });
+}
+
 const presetColorPlugin = domEvent.definePlugin({
     name: 'treemap:preset-color',
     onModuleInit (modules) {
@@ -311,6 +377,16 @@ function presetScalePlugin(options) {
                 minScale: options?.min || 0.1,
                 maxScale: options?.max || Infinity,
                 scaleFactor: 0.05
+            },
+            gestureState: {
+                isTrackingGesture: false,
+                lastEventTime: 0,
+                eventCount: 0,
+                totalDeltaY: 0,
+                totalDeltaX: 0,
+                consecutivePinchEvents: 0,
+                gestureType: 'unknown',
+                lockGestureType: false
             }
         },
         onResize ({ matrix, stateManager: state }) {
@@ -327,33 +403,80 @@ function getScaleOptions() {
     const meta = this.getPluginMetadata('treemap:preset-scale');
     return meta;
 }
-function onWheel(pluginContext, event, { stateManager: state, component, matrix }) {
+function determineGestureType(event, gestureState) {
+    const now = Date.now();
+    const timeDiff = now - gestureState.lastEventTime;
+    if (timeDiff > 150) {
+        Object.assign(gestureState, {
+            isTrackingGesture: false,
+            lastEventTime: now,
+            eventCount: 1,
+            totalDeltaY: Math.abs(event.deltaY),
+            totalDeltaX: Math.abs(event.deltaX),
+            consecutivePinchEvents: 0,
+            gestureType: 'unknown',
+            lockGestureType: false
+        });
+    } else {
+        gestureState.eventCount++;
+        gestureState.totalDeltaY += Math.abs(event.deltaY);
+        gestureState.totalDeltaX += Math.abs(event.deltaX);
+        gestureState.lastEventTime = now;
+    }
+    if (event.ctrlKey) {
+        gestureState.gestureType = 'zoom';
+        gestureState.lockGestureType = true;
+        return 'zoom';
+    }
+    // windows/macos mouse wheel
+    // Usually the dettaY is large and deltaX maybe 0 or small number.
+    const isMouseWheel = Math.abs(event.deltaX) >= 100 && Math.abs(event.deltaX) <= 10 || Math.abs(event.deltaY) > 50 && Math.abs(event.deltaX) < Math.abs(event.deltaY) * 0.1;
+    if (isMouseWheel) {
+        gestureState.gestureType = 'zoom';
+        gestureState.lockGestureType = true;
+        return 'zoom';
+    }
+    if (gestureState.lockGestureType && gestureState.gestureType !== 'unknown') {
+        return gestureState.gestureType;
+    }
+    // Magic trackpad
+    if (gestureState.eventCount >= 3) {
+        const avgDeltaY = gestureState.totalDeltaY / gestureState.eventCount;
+        const avgDeltaX = gestureState.totalDeltaX / gestureState.eventCount;
+        const ratio = avgDeltaX / (avgDeltaY + 0.1);
+        const isZoomGesture = avgDeltaY > 8 && ratio < 0.3 && Math.abs(event.deltaY) > 5;
+        if (isZoomGesture) {
+            gestureState.gestureType = 'zoom';
+            gestureState.lockGestureType = true;
+            return 'zoom';
+        } else {
+            gestureState.gestureType = 'pan';
+            gestureState.lockGestureType = true;
+            return 'pan';
+        }
+    }
+    return 'pan';
+}
+function onWheel(pluginContext, event, domEvent) {
     event.native.preventDefault();
     const meta = getScaleOptions.call(pluginContext);
     if (!meta) {
         return;
     }
-    const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
-    const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
-    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
-    if (newScale === scale) {
-        return;
+    const gestureType = determineGestureType(event.native, meta.gestureState);
+    if (gestureType === 'zoom') {
+        handleZoom(pluginContext, event, domEvent);
+    } else {
+        handlePan(pluginContext, event, domEvent);
     }
-    state.transition('SCALING');
-    const mouseX = event.native.offsetX;
-    const mouseY = event.native.offsetY;
-    const scaleDiff = newScale / scale;
-    meta.scaleOptions.scale = newScale;
+}
+function updateViewport(pluginContext, { stateManager: state, component, matrix }, useAnimation = false) {
     const highlight = getHighlightInstance.apply(pluginContext);
-    domEvent.smoothFrame((_, cleanup)=>{
-        cleanup();
+    const doUpdate = ()=>{
         if (highlight && highlight.highlight) {
             highlight.highlight.reset();
             highlight.highlight.setZIndexForHighlight();
         }
-        matrix.scale(scaleDiff, scaleDiff);
-        matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
-        matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
         component.cleanup();
         const { width, height } = component.render.options;
         component.layoutNodes = component.calculateLayoutNodes(component.data, {
@@ -363,15 +486,56 @@ function onWheel(pluginContext, event, { stateManager: state, component, matrix
             y: 0
         }, matrix.a);
         component.draw(true, false);
-        domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
+        domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
         component.update();
         if (state.canTransition('IDLE')) {
             state.transition('IDLE');
         }
-        return true;
-    }, {
-        duration: ANIMATION_DURATION
-    });
+    };
+    if (useAnimation) {
+        domEvent.smoothFrame((_, cleanup)=>{
+            cleanup();
+            doUpdate();
+            return true;
+        }, {
+            duration: ANIMATION_DURATION
+        });
+    } else {
+        doUpdate();
+    }
+}
+function handleZoom(pluginContext, event, domEvent) {
+    const { stateManager: state, matrix } = domEvent;
+    const meta = getScaleOptions.call(pluginContext);
+    if (!meta) {
+        return;
+    }
+    const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
+    const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
+    const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
+    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
+    if (newScale === scale) {
+        return;
+    }
+    state.transition('SCALING');
+    const mouseX = event.native.offsetX;
+    const mouseY = event.native.offsetY;
+    const scaleDiff = newScale / scale;
+    meta.scaleOptions.scale = newScale;
+    matrix.scale(scaleDiff, scaleDiff);
+    matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
+    matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
+    updateViewport(pluginContext, domEvent, false);
+}
+function handlePan(pluginContext, event, domEvent) {
+    const { stateManager: state, matrix } = domEvent;
+    const panSpeed = 0.8;
+    const deltaX = event.native.deltaX * panSpeed;
+    const deltaY = event.native.deltaY * panSpeed;
+    state.transition('PANNING');
+    matrix.e -= deltaX;
+    matrix.f -= deltaY;
+    updateViewport(pluginContext, domEvent, true);
 }
 
 const MAX_SCALE_MULTIPLIER = 2.0;
@@ -474,5 +638,6 @@ const presetZoomablePlugin = domEvent.definePlugin({
 exports.presetColorPlugin = presetColorPlugin;
 exports.presetDragElementPlugin = presetDragElementPlugin;
 exports.presetHighlightPlugin = presetHighlightPlugin;
+exports.presetMenuPlugin = presetMenuPlugin;
 exports.presetScalePlugin = presetScalePlugin;
 exports.presetZoomablePlugin = presetZoomablePlugin;

package/dist/plugin.mjs

@@ -1,4 +1,4 @@
-import { h as definePlugin, H as smoothFrame, r as createRoundBlock, F as stackMatrixTransform, S as Schedule, K as DEFAULT_MATRIX_LOC, I as isScrollWheelOrRightButtonOnMouseupAndDown, G as stackMatrixTransformWithGraphAndLayer, p as hashCode, P as PI_2, o as isWheelEvent, y as mixinWithParams } from './dom-event-BLJt9knO.mjs';
+import { h as definePlugin, H as smoothFrame, r as createRoundBlock, F as stackMatrixTransform, S as Schedule, K as DEFAULT_MATRIX_LOC, I as isScrollWheelOrRightButtonOnMouseupAndDown, G as stackMatrixTransformWithGraphAndLayer, j as isContextMenuEvent, p as hashCode, P as PI_2, o as isWheelEvent, y as mixinWithParams } from './dom-event-Bkw3ecGf.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.
@@ -239,6 +239,72 @@ function getDragOptions() {
     return meta;
 }
 
+function presetMenuPlugin(options) {
+    let menu = null;
+    let domEvent = null;
+    const handleMenuClick = (e)=>{
+        if (!domEvent) {
+            return;
+        }
+        if (!menu) {
+            return;
+        }
+        const target = e.target;
+        if (target.parentNode) {
+            const parent = target.parentNode;
+            const action = parent.getAttribute('data-action');
+            if (!action) {
+                return;
+            }
+            if (options?.onClick) {
+                options.onClick(action, domEvent.findRelativeNode({
+                    native: e,
+                    kind: undefined
+                }));
+            }
+        }
+        menu.style.display = 'none';
+    };
+    return definePlugin({
+        name: 'treemap:preset-menu',
+        onDOMEventTriggered (_, event, __, DOMEvent) {
+            if (isContextMenuEvent(event)) {
+                event.native.stopPropagation();
+                event.native.preventDefault();
+                if (!menu) {
+                    menu = document.createElement('div');
+                    domEvent = DOMEvent;
+                    Object.assign(menu.style, {
+                        backgroundColor: '#fff',
+                        ...options?.style,
+                        position: 'absolute',
+                        zIndex: '9999'
+                    });
+                    menu.addEventListener('click', handleMenuClick);
+                    if (menu && options?.render) {
+                        const result = options.render(menu);
+                        menu.innerHTML = result.map((item)=>{
+                            return `<div data-action='${item.action}'>${item.html}</div>`;
+                        }).join('');
+                    }
+                    document.body.append(menu);
+                }
+                menu.style.left = event.native.clientX + 'px';
+                menu.style.top = event.native.clientY + 'px';
+                menu.style.display = 'initial';
+            }
+        },
+        onDispose () {
+            if (!menu) {
+                return;
+            }
+            menu.removeEventListener('click', handleMenuClick);
+            menu = null;
+            domEvent = null;
+        }
+    });
+}
+
 const presetColorPlugin = definePlugin({
     name: 'treemap:preset-color',
     onModuleInit (modules) {
@@ -309,6 +375,16 @@ function presetScalePlugin(options) {
                 minScale: options?.min || 0.1,
                 maxScale: options?.max || Infinity,
                 scaleFactor: 0.05
+            },
+            gestureState: {
+                isTrackingGesture: false,
+                lastEventTime: 0,
+                eventCount: 0,
+                totalDeltaY: 0,
+                totalDeltaX: 0,
+                consecutivePinchEvents: 0,
+                gestureType: 'unknown',
+                lockGestureType: false
             }
         },
         onResize ({ matrix, stateManager: state }) {
@@ -325,33 +401,80 @@ function getScaleOptions() {
     const meta = this.getPluginMetadata('treemap:preset-scale');
     return meta;
 }
-function onWheel(pluginContext, event, { stateManager: state, component, matrix }) {
+function determineGestureType(event, gestureState) {
+    const now = Date.now();
+    const timeDiff = now - gestureState.lastEventTime;
+    if (timeDiff > 150) {
+        Object.assign(gestureState, {
+            isTrackingGesture: false,
+            lastEventTime: now,
+            eventCount: 1,
+            totalDeltaY: Math.abs(event.deltaY),
+            totalDeltaX: Math.abs(event.deltaX),
+            consecutivePinchEvents: 0,
+            gestureType: 'unknown',
+            lockGestureType: false
+        });
+    } else {
+        gestureState.eventCount++;
+        gestureState.totalDeltaY += Math.abs(event.deltaY);
+        gestureState.totalDeltaX += Math.abs(event.deltaX);
+        gestureState.lastEventTime = now;
+    }
+    if (event.ctrlKey) {
+        gestureState.gestureType = 'zoom';
+        gestureState.lockGestureType = true;
+        return 'zoom';
+    }
+    // windows/macos mouse wheel
+    // Usually the dettaY is large and deltaX maybe 0 or small number.
+    const isMouseWheel = Math.abs(event.deltaX) >= 100 && Math.abs(event.deltaX) <= 10 || Math.abs(event.deltaY) > 50 && Math.abs(event.deltaX) < Math.abs(event.deltaY) * 0.1;
+    if (isMouseWheel) {
+        gestureState.gestureType = 'zoom';
+        gestureState.lockGestureType = true;
+        return 'zoom';
+    }
+    if (gestureState.lockGestureType && gestureState.gestureType !== 'unknown') {
+        return gestureState.gestureType;
+    }
+    // Magic trackpad
+    if (gestureState.eventCount >= 3) {
+        const avgDeltaY = gestureState.totalDeltaY / gestureState.eventCount;
+        const avgDeltaX = gestureState.totalDeltaX / gestureState.eventCount;
+        const ratio = avgDeltaX / (avgDeltaY + 0.1);
+        const isZoomGesture = avgDeltaY > 8 && ratio < 0.3 && Math.abs(event.deltaY) > 5;
+        if (isZoomGesture) {
+            gestureState.gestureType = 'zoom';
+            gestureState.lockGestureType = true;
+            return 'zoom';
+        } else {
+            gestureState.gestureType = 'pan';
+            gestureState.lockGestureType = true;
+            return 'pan';
+        }
+    }
+    return 'pan';
+}
+function onWheel(pluginContext, event, domEvent) {
     event.native.preventDefault();
     const meta = getScaleOptions.call(pluginContext);
     if (!meta) {
         return;
     }
-    const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
-    const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
-    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
-    if (newScale === scale) {
-        return;
+    const gestureType = determineGestureType(event.native, meta.gestureState);
+    if (gestureType === 'zoom') {
+        handleZoom(pluginContext, event, domEvent);
+    } else {
+        handlePan(pluginContext, event, domEvent);
     }
-    state.transition('SCALING');
-    const mouseX = event.native.offsetX;
-    const mouseY = event.native.offsetY;
-    const scaleDiff = newScale / scale;
-    meta.scaleOptions.scale = newScale;
+}
+function updateViewport(pluginContext, { stateManager: state, component, matrix }, useAnimation = false) {
     const highlight = getHighlightInstance.apply(pluginContext);
-    smoothFrame((_, cleanup)=>{
-        cleanup();
+    const doUpdate = ()=>{
         if (highlight && highlight.highlight) {
             highlight.highlight.reset();
             highlight.highlight.setZIndexForHighlight();
         }
-        matrix.scale(scaleDiff, scaleDiff);
-        matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
-        matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
         component.cleanup();
         const { width, height } = component.render.options;
         component.layoutNodes = component.calculateLayoutNodes(component.data, {
@@ -361,15 +484,56 @@ function onWheel(pluginContext, event, { stateManager: state, component, matrix
             y: 0
         }, matrix.a);
         component.draw(true, false);
-        stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
+        stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
         component.update();
         if (state.canTransition('IDLE')) {
             state.transition('IDLE');
         }
-        return true;
-    }, {
-        duration: ANIMATION_DURATION
-    });
+    };
+    if (useAnimation) {
+        smoothFrame((_, cleanup)=>{
+            cleanup();
+            doUpdate();
+            return true;
+        }, {
+            duration: ANIMATION_DURATION
+        });
+    } else {
+        doUpdate();
+    }
+}
+function handleZoom(pluginContext, event, domEvent) {
+    const { stateManager: state, matrix } = domEvent;
+    const meta = getScaleOptions.call(pluginContext);
+    if (!meta) {
+        return;
+    }
+    const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
+    const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
+    const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
+    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
+    if (newScale === scale) {
+        return;
+    }
+    state.transition('SCALING');
+    const mouseX = event.native.offsetX;
+    const mouseY = event.native.offsetY;
+    const scaleDiff = newScale / scale;
+    meta.scaleOptions.scale = newScale;
+    matrix.scale(scaleDiff, scaleDiff);
+    matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
+    matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
+    updateViewport(pluginContext, domEvent, false);
+}
+function handlePan(pluginContext, event, domEvent) {
+    const { stateManager: state, matrix } = domEvent;
+    const panSpeed = 0.8;
+    const deltaX = event.native.deltaX * panSpeed;
+    const deltaY = event.native.deltaY * panSpeed;
+    state.transition('PANNING');
+    matrix.e -= deltaX;
+    matrix.f -= deltaY;
+    updateViewport(pluginContext, domEvent, true);
 }
 
 const MAX_SCALE_MULTIPLIER = 2.0;
@@ -469,4 +633,4 @@ const presetZoomablePlugin = definePlugin({
     }
 });
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "squarified tree map",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,7 +34,6 @@
   "author": "Kanno",
   "license": "MIT",
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.3",
     "@swc/core": "^1.11.29",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.7.4",
@@ -57,7 +56,7 @@
     "tinyglobby": "^0.2.13",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "vite-bundle-analyzer": "^0.21.0"
+    "vite-bundle-analyzer": "^0.22.0"
   },
   "pnpm": {
     "overrides": {