squarified 0.4.3 → 0.5.0

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";
@@ -69,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;
 };

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";
@@ -69,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;
 };

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.
@@ -377,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 }) {
@@ -393,34 +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 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;
+    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, {
@@ -430,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;

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, j as isContextMenuEvent, 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.
@@ -375,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 }) {
@@ -391,34 +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 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;
+    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, {
@@ -428,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;

package/package.json

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