squarified 0.6.2 → 1.1.0

package/dist/plugin.js

@@ -1,51 +1,7 @@
 'use strict';
 
-var domEvent = require('./dom-event-ClwTQnot.js');
+var domEvent = require('./dom-event-BkRCiIWB.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.
-const easing = {
-    linear: (k)=>k,
-    quadraticIn: (k)=>k * k,
-    quadraticOut: (k)=>k * (2 - k),
-    quadraticInOut: (k)=>{
-        if ((k *= 2) < 1) {
-            return 0.5 * k * k;
-        }
-        return -0.5 * (--k * (k - 2) - 1);
-    },
-    cubicIn: (k)=>k * k * k,
-    cubicOut: (k)=>{
-        if ((k *= 2) < 1) {
-            return 0.5 * k * k * k;
-        }
-        return 0.5 * ((k -= 2) * k * k + 2);
-    },
-    cubicInOut: (k)=>{
-        if ((k *= 2) < 1) {
-            return 0.5 * k * k * k;
-        }
-        return 0.5 * ((k -= 2) * k * k + 2);
-    }
-};
-
-class Highlight extends domEvent.Schedule {
-    reset() {
-        this.destory();
-        this.update();
-    }
-    get canvas() {
-        return this.render.canvas;
-    }
-    setZIndexForHighlight(zIndex = '-1') {
-        this.canvas.style.zIndex = zIndex;
-    }
-    init() {
-        this.setZIndexForHighlight();
-        this.canvas.style.position = 'absolute';
-        this.canvas.style.pointerEvents = 'none';
-    }
-}
 const ANIMATION_DURATION = 300;
 const HIGH_LIGHT_OPACITY = 0.3;
 const fill = {
@@ -58,43 +14,80 @@ const fill = {
 };
 const presetHighlightPlugin = domEvent.definePlugin({
     name: 'treemap:preset-highlight',
-    onLoad () {
-        const meta = this.getPluginMetadata('treemap:preset-highlight');
-        if (!meta) {
+    onDOMEventTriggered (name, _, graphic, { stateManager: state, matrix, component }) {
+        // Any interaction that isn't a pure hover must reset the overlay so we never
+        // show a stale highlight after zoom / drag / pan transitions.
+        if (name !== 'mousemove') {
+            const meta = this.getPluginMetadata('treemap:preset-highlight');
+            if (meta && meta.lastDirtyRect) {
+                component.clearOverlay();
+                meta.overlayGraphic = null;
+                meta.lastDirtyRect = null;
+            }
             return;
         }
-        if (!meta.highlight) {
-            meta.highlight = new Highlight(this.instance.to);
-        }
-    },
-    onDOMEventTriggered (name, _, module, { stateManager: state, matrix }) {
         if (name === 'mousemove') {
             if (state.canTransition('MOVE')) {
                 const meta = this.getPluginMetadata('treemap:preset-highlight');
-                if (!module) {
-                    meta.highlight?.reset();
-                    meta.highlight?.update();
-                    meta.highlight?.setZIndexForHighlight();
+                if (!meta) {
                     return;
                 }
+                const oldDirtyRect = meta.lastDirtyRect;
+                if (!graphic) {
+                    if (oldDirtyRect) {
+                        component.clearOverlay();
+                        component.updateDirty([
+                            oldDirtyRect
+                        ]);
+                        meta.overlayGraphic = null;
+                        meta.lastDirtyRect = null;
+                    }
+                    return;
+                }
+                const module = graphic.__widget__;
                 const [x, y, w, h] = module.layout;
-                const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
-                domEvent.smoothFrame((_, cleanup)=>{
-                    cleanup();
-                    meta.highlight?.reset();
-                    const mask = domEvent.createRoundBlock(x, y, w, h, {
-                        fill,
-                        opacity: HIGH_LIGHT_OPACITY,
-                        radius: effectiveRadius,
-                        padding: 0
-                    });
-                    meta.highlight?.add(mask);
-                    meta.highlight?.setZIndexForHighlight('1');
-                    domEvent.stackMatrixTransform(mask, matrix.e, matrix.f, 1);
-                    meta.highlight?.update();
-                }, {
-                    duration: ANIMATION_DURATION
+                const rect = graphic.elements[0];
+                if (!rect || !domEvent.asserts.isRoundRect(rect)) {
+                    return;
+                }
+                const effectiveRadius = rect.style.radius;
+                // Layout coordinates are already in visual (zoomed) space; matrix.e/f
+                // is the pan translation that gets added to every element position.
+                const visualX = x + matrix.e;
+                const visualY = y + matrix.f;
+                // Expand dirty rect by 1 CSS px on each side to cover anti-aliased edges.
+                const pad = 1;
+                const newDirtyRect = {
+                    x: visualX - pad,
+                    y: visualY - pad,
+                    width: w + pad * 2,
+                    height: h + pad * 2
+                };
+                const mask = domEvent.createRoundBlock(visualX, visualY, w, h, {
+                    fill,
+                    opacity: HIGH_LIGHT_OPACITY,
+                    radius: effectiveRadius,
+                    padding: 0
                 });
+                component.clearOverlay();
+                component.addOverlay(mask);
+                meta.overlayGraphic = mask;
+                meta.lastDirtyRect = newDirtyRect;
+                const dirtyRects = oldDirtyRect ? [
+                    newDirtyRect,
+                    oldDirtyRect
+                ] : [
+                    newDirtyRect
+                ];
+                component.updateDirty(dirtyRects);
+            } else {
+                // State changed away from hoverable (e.g. dragging / zooming) — clear overlay.
+                const meta = this.getPluginMetadata('treemap:preset-highlight');
+                if (meta && meta.lastDirtyRect) {
+                    component.clearOverlay();
+                    meta.overlayGraphic = null;
+                    meta.lastDirtyRect = null;
+                }
             }
         }
     },
@@ -103,21 +96,21 @@ const presetHighlightPlugin = domEvent.definePlugin({
         if (!meta) {
             return;
         }
-        meta.highlight?.render.initOptions({
-            ...this.instance.render.options
-        });
-        meta.highlight?.reset();
-        meta.highlight?.init();
+        this.instance.clearOverlay();
+        meta.overlayGraphic = null;
+        meta.lastDirtyRect = null;
     },
     onDispose () {
         const meta = this.getPluginMetadata('treemap:preset-highlight');
-        if (meta && meta.highlight) {
-            meta.highlight.destory();
-            meta.highlight = null;
+        if (meta) {
+            this.instance.clearOverlay();
+            meta.overlayGraphic = null;
+            meta.lastDirtyRect = null;
         }
     },
     meta: {
-        highlight: null
+        overlayGraphic: null,
+        lastDirtyRect: null
     }
 });
 
@@ -143,7 +136,6 @@ const presetDragElementPlugin = domEvent.definePlugin({
                     }
                     state.transition('DRAGGING');
                     if (state.isInState('DRAGGING')) {
-                        const highlight = getHighlightInstance.call(this);
                         domEvent.smoothFrame((_, cleanup)=>{
                             cleanup();
                             const { offsetX, offsetY } = event.native;
@@ -151,18 +143,30 @@ const presetDragElementPlugin = domEvent.definePlugin({
                             const drawY = offsetY - meta.dragOptions.y;
                             const lastX = meta.dragOptions.x;
                             const lastY = meta.dragOptions.y;
-                            if (highlight?.highlight) {
-                                highlight.highlight.reset();
-                                highlight.highlight.setZIndexForHighlight();
-                            }
+                            component.clearOverlay();
                             matrix.translation(drawX, drawY);
                             meta.dragOptions.x = offsetX;
                             meta.dragOptions.y = offsetY;
                             meta.dragOptions.lastX = lastX;
                             meta.dragOptions.lastY = lastY;
+                            const cloned = component.elements.map((el)=>domEvent.isBox(el) ? el.clone() : el);
                             component.cleanup();
-                            component.draw(false, false);
-                            domEvent.stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, 1);
+                            component.add(...cloned);
+                            domEvent.traverse(component.elements, (graph)=>{
+                                if (domEvent.isText(graph)) {
+                                    const { textX, textY } = graph.__widget__;
+                                    graph.x = textX;
+                                    graph.y = textY;
+                                }
+                                if (domEvent.isRoundRect(graph)) {
+                                    const { x, y, w, h } = graph.__widget__;
+                                    graph.x = x;
+                                    graph.y = y;
+                                    graph.width = w;
+                                    graph.height = h;
+                                }
+                                domEvent.stackMatrixTransform(graph, matrix.e, matrix.f, 1);
+                            });
                             component.update();
                             return true;
                         }, {
@@ -186,11 +190,7 @@ const presetDragElementPlugin = domEvent.definePlugin({
                         }
                     }
                     if (state.isInState('DRAGGING') && state.canTransition('IDLE')) {
-                        const highlight = getHighlightInstance.call(this);
-                        if (highlight && highlight.highlight) {
-                            highlight.highlight.reset();
-                            highlight.highlight.setZIndexForHighlight();
-                        }
+                        component.clearOverlay();
                         const meta = getDragOptions.call(this);
                         if (meta && meta.dragOptions) {
                             meta.dragOptions.x = 0;
@@ -233,9 +233,6 @@ const presetDragElementPlugin = domEvent.definePlugin({
         state.reset();
     }
 });
-function getHighlightInstance() {
-    return this.getPluginMetadata('treemap:preset-highlight');
-}
 function getDragOptions() {
     const meta = this.getPluginMetadata('treemap:preset-drag-element');
     return meta;
@@ -259,9 +256,9 @@ function presetMenuPlugin(options) {
                 return;
             }
             if (options?.onClick) {
-                options.onClick(action, domEvent$1.findRelativeNode({
-                    native: e,
-                    kind: undefined
+                options.onClick(action, domEvent$1.findRelativeGraphicNode({
+                    kind: 'click',
+                    native: e
                 }));
             }
         }
@@ -363,6 +360,15 @@ function adjustColorToComfortableForHumanEye(hue, saturation, lightness) {
     };
 }
 
+// refer https://developer.mozilla.org/en-US/docs/Web/API/Element/mousewheel_event
+// we shouldn't use wheelDelta property anymore.
+function getScaleOptions() {
+    const meta = this.getPluginMetadata('treemap:preset-scale');
+    if (!meta) {
+        throw new Error('treemap:preset-scale metadata missing; ensure presetScalePlugin is registered');
+    }
+    return meta;
+}
 function presetScalePlugin(options) {
     return domEvent.definePlugin({
         name: 'treemap:preset-scale',
@@ -374,9 +380,19 @@ function presetScalePlugin(options) {
         meta: {
             scaleOptions: {
                 scale: 1,
-                minScale: options?.min || 0.1,
-                maxScale: options?.max || Infinity,
-                scaleFactor: 0.05
+                virtualScale: 1,
+                minScale: options?.min ?? 0.1,
+                maxScale: options?.max ?? Infinity,
+                scaleFactor: 0.05,
+                springStiffness: options?.springStiffness ?? 300,
+                springDamping: options?.springDamping ?? 35,
+                overshootResistance: options?.overshootResistance ?? 0.35,
+                overshootLimitFactor: options?.overshootLimitFactor ?? 0.05,
+                lastAnchorX: undefined,
+                lastAnchorY: undefined,
+                springRafId: null,
+                animationsEnabled: options?.animationsEnabled ?? true,
+                wheelDebounce: options?.wheelDebounce ?? 200
             },
             gestureState: {
                 isTrackingGesture: false,
@@ -386,23 +402,19 @@ function presetScalePlugin(options) {
                 totalDeltaX: 0,
                 consecutivePinchEvents: 0,
                 gestureType: 'unknown',
-                lockGestureType: false
+                lockGestureType: false,
+                wheelEndTimeoutId: null
             }
         },
         onResize ({ matrix, stateManager: state }) {
             const meta = getScaleOptions.call(this);
-            if (meta) {
-                meta.scaleOptions.scale = 1;
-            }
+            meta.scaleOptions.scale = 1;
+            meta.scaleOptions.virtualScale = 1;
             matrix.create(domEvent.DEFAULT_MATRIX_LOC);
             state.reset();
         }
     });
 }
-function getScaleOptions() {
-    const meta = this.getPluginMetadata('treemap:preset-scale');
-    return meta;
-}
 function determineGestureType(event, gestureState) {
     const now = Date.now();
     const timeDiff = now - gestureState.lastEventTime;
@@ -429,7 +441,7 @@ function determineGestureType(event, gestureState) {
         return 'zoom';
     }
     // windows/macos mouse wheel
-    // Usually the dettaY is large and deltaX maybe 0 or small number.
+    // Usually the deltaY 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';
@@ -460,9 +472,6 @@ function determineGestureType(event, gestureState) {
 function onWheel(pluginContext, event, domEvent) {
     event.native.preventDefault();
     const meta = getScaleOptions.call(pluginContext);
-    if (!meta) {
-        return;
-    }
     const gestureType = determineGestureType(event.native, meta.gestureState);
     if (gestureType === 'zoom') {
         handleZoom(pluginContext, event, domEvent);
@@ -471,12 +480,8 @@ function onWheel(pluginContext, event, domEvent) {
     }
 }
 function updateViewport(pluginContext, { stateManager: state, component, matrix }, useAnimation = false) {
-    const highlight = getHighlightInstance.apply(pluginContext);
     const doUpdate = ()=>{
-        if (highlight && highlight.highlight) {
-            highlight.highlight.reset();
-            highlight.highlight.setZIndexForHighlight();
-        }
+        component.clearOverlay();
         component.cleanup();
         const { width, height } = component.render.options;
         component.layoutNodes = component.calculateLayoutNodes(component.data, {
@@ -504,43 +509,197 @@ function updateViewport(pluginContext, { stateManager: state, component, matrix
         doUpdate();
     }
 }
-function handleZoom(pluginContext, event, domEvent) {
-    const { stateManager: state, matrix, component } = domEvent;
+function cancelSpringAnimationIfAny(meta) {
+    const rafId = meta.scaleOptions.springRafId;
+    if (typeof rafId === 'number' && rafId !== null) {
+        cancelAnimationFrame(rafId);
+        meta.scaleOptions.springRafId = null;
+    }
+}
+function springAnimateToScale(pluginContext, domEvent, targetScale, anchorX, anchorY) {
     const meta = getScaleOptions.call(pluginContext);
-    if (!meta) {
+    const { matrix, component } = domEvent;
+    // if animations disabled, snap immediately and return
+    if (!meta.scaleOptions.animationsEnabled) {
+        const oldMatrix = {
+            e: matrix.e,
+            f: matrix.f
+        };
+        const finalScaleDiff = targetScale / meta.scaleOptions.scale;
+        if (isFinite(finalScaleDiff) && finalScaleDiff > 0 && Math.abs(finalScaleDiff - 1) > 1e-12) {
+            matrix.scale(finalScaleDiff, finalScaleDiff);
+            matrix.e = anchorX - (anchorX - matrix.e) * finalScaleDiff;
+            matrix.f = anchorY - (anchorY - matrix.f) * finalScaleDiff;
+        }
+        meta.scaleOptions.scale = targetScale;
+        meta.scaleOptions.virtualScale = targetScale;
+        try {
+            component.handleTransformCacheInvalidation(oldMatrix, {
+                e: matrix.e,
+                f: matrix.f
+            });
+        } catch  {}
+        updateViewport(pluginContext, domEvent, false);
         return;
     }
-    const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
+    cancelSpringAnimationIfAny(meta);
+    const stiffness = meta.scaleOptions.springStiffness ?? 300;
+    const damping = meta.scaleOptions.springDamping ?? 35;
+    let position = meta.scaleOptions.scale;
+    let velocity = 0;
+    let lastTime = performance.now();
+    const thresholdPos = Math.max(1e-4, Math.abs(targetScale) * 1e-3);
+    const thresholdVel = 1e-3;
+    const oldMatrix = {
+        e: matrix.e,
+        f: matrix.f
+    };
+    function step(now) {
+        const dt = Math.min((now - lastTime) / 1000, 0.033);
+        lastTime = now;
+        const force = stiffness * (targetScale - position);
+        const accel = force - damping * velocity;
+        velocity += accel * dt;
+        const prev = position;
+        position += velocity * dt;
+        const scaleDiff = position / prev;
+        if (isFinite(scaleDiff) && scaleDiff > 0) {
+            matrix.scale(scaleDiff, scaleDiff);
+            matrix.e = anchorX - (anchorX - matrix.e) * scaleDiff;
+            matrix.f = anchorY - (anchorY - matrix.f) * scaleDiff;
+            meta.scaleOptions.scale = position;
+            meta.scaleOptions.virtualScale = position;
+            updateViewport(pluginContext, domEvent, false);
+        }
+        const isSettled = Math.abs(targetScale - position) <= thresholdPos && Math.abs(velocity) <= thresholdVel;
+        if (isSettled) {
+            const finalScaleDiff = targetScale / meta.scaleOptions.scale;
+            if (isFinite(finalScaleDiff) && finalScaleDiff > 0 && Math.abs(finalScaleDiff - 1) > 1e-12) {
+                matrix.scale(finalScaleDiff, finalScaleDiff);
+                matrix.e = anchorX - (anchorX - matrix.e) * finalScaleDiff;
+                matrix.f = anchorY - (anchorY - matrix.f) * finalScaleDiff;
+            }
+            meta.scaleOptions.scale = targetScale;
+            meta.scaleOptions.virtualScale = targetScale;
+            try {
+                component.handleTransformCacheInvalidation(oldMatrix, {
+                    e: matrix.e,
+                    f: matrix.f
+                });
+            } catch  {}
+            updateViewport(pluginContext, domEvent, false);
+            meta.scaleOptions.springRafId = null;
+            return;
+        }
+        meta.scaleOptions.springRafId = requestAnimationFrame(step);
+    }
+    meta.scaleOptions.springRafId = requestAnimationFrame(step);
+}
+function handleWheelEnd(pluginContext, domEvent) {
+    const meta = getScaleOptions.call(pluginContext);
+    const { scale, minScale, maxScale } = meta.scaleOptions;
+    const eps = 1e-6;
+    if (scale + eps < minScale) {
+        const target = minScale;
+        const anchorX = meta.scaleOptions.lastAnchorX ?? domEvent.component.render.options.width / 2;
+        const anchorY = meta.scaleOptions.lastAnchorY ?? domEvent.component.render.options.height / 2;
+        springAnimateToScale(pluginContext, domEvent, target, anchorX, anchorY);
+    } else if (scale - eps > maxScale) {
+        const target = maxScale;
+        const anchorX = meta.scaleOptions.lastAnchorX ?? domEvent.component.render.options.width / 2;
+        const anchorY = meta.scaleOptions.lastAnchorY ?? domEvent.component.render.options.height / 2;
+        springAnimateToScale(pluginContext, domEvent, target, anchorX, anchorY);
+    } else {
+        // inside bounds: sync virtualScale to visible scale to avoid sudden jumps later
+        meta.scaleOptions.virtualScale = meta.scaleOptions.scale;
+        if (Math.abs(scale - minScale) < 1e-8) {
+            meta.scaleOptions.scale = minScale;
+        }
+        if (Math.abs(scale - maxScale) < 1e-8) {
+            meta.scaleOptions.scale = maxScale;
+        }
+    }
+}
+function handleZoom(pluginContext, event, domEvent) {
+    const { stateManager: state, matrix, component } = domEvent;
+    const meta = getScaleOptions.call(pluginContext);
+    // read currentVisible and currentVirtual separately to avoid destructuring-default warnings
+    const currentVisible = meta.scaleOptions.scale;
+    const prevVirtualRaw = meta.scaleOptions.virtualScale ?? currentVisible;
+    const minScale = meta.scaleOptions.minScale;
+    const maxScale = meta.scaleOptions.maxScale;
+    const scaleFactor = meta.scaleOptions.scaleFactor;
+    const overshootResistance = meta.scaleOptions.overshootResistance ?? 0.35;
+    const overshootLimitFactor = meta.scaleOptions.overshootLimitFactor ?? 0.05;
+    cancelSpringAnimationIfAny(meta);
     const oldMatrix = {
         e: matrix.e,
         f: matrix.f
     };
-    const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
+    const dynamicScaleFactor = Math.max(scaleFactor, currentVisible * 0.1);
     const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
-    const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
-    if (newScale === scale) {
+    let newVirtual = prevVirtualRaw + delta;
+    let newVisible;
+    if (newVirtual >= minScale && newVirtual <= maxScale) {
+        newVisible = newVirtual;
+    } else if (newVirtual < minScale) {
+        newVisible = minScale + (newVirtual - minScale) * overshootResistance;
+        const lowerBound = Math.max(0, minScale * overshootLimitFactor);
+        if (newVisible < lowerBound) {
+            newVisible = lowerBound;
+            // sync virtual so further moves are consistent with clamped visible value
+            newVirtual = minScale + (newVisible - minScale) / Math.max(1e-6, overshootResistance);
+        }
+    } else {
+        newVisible = maxScale + (newVirtual - maxScale) * overshootResistance;
+        const upperBound = maxScale * (1 + Math.max(overshootLimitFactor, 0.05));
+        if (newVisible > upperBound) {
+            newVisible = upperBound;
+            newVirtual = maxScale + (newVisible - maxScale) / Math.max(1e-6, overshootResistance);
+        }
+    }
+    const prevVisible = currentVisible;
+    if (newVisible === prevVisible) {
+        meta.scaleOptions.virtualScale = newVirtual;
         return;
     }
     state.transition('SCALING');
     const mouseX = event.native.offsetX;
     const mouseY = event.native.offsetY;
-    const scaleDiff = newScale / scale;
-    meta.scaleOptions.scale = newScale;
+    // remember anchor for later spring animation
+    meta.scaleOptions.lastAnchorX = mouseX;
+    meta.scaleOptions.lastAnchorY = mouseY;
+    const scaleDiff = newVisible / prevVisible;
+    meta.scaleOptions.virtualScale = newVirtual;
+    meta.scaleOptions.scale = newVisible;
     matrix.scale(scaleDiff, scaleDiff);
     matrix.e = mouseX - (mouseX - matrix.e) * scaleDiff;
     matrix.f = mouseY - (mouseY - matrix.f) * scaleDiff;
-    const newMatrix = {
-        e: matrix.e,
-        f: matrix.f
-    };
-    component.handleTransformCacheInvalidation(oldMatrix, newMatrix);
+    try {
+        component.handleTransformCacheInvalidation(oldMatrix, {
+            e: matrix.e,
+            f: matrix.f
+        });
+    } catch  {}
     updateViewport(pluginContext, domEvent, false);
+    const g = meta.gestureState;
+    if (g.wheelEndTimeoutId) {
+        clearTimeout(g.wheelEndTimeoutId);
+        g.wheelEndTimeoutId = null;
+    }
+    const debounceMs = meta.scaleOptions.wheelDebounce ?? 200;
+    g.wheelEndTimeoutId = window.setTimeout(()=>{
+        g.wheelEndTimeoutId = null;
+        handleWheelEnd(pluginContext, domEvent);
+    }, debounceMs);
 }
 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;
+    const meta = getScaleOptions.call(pluginContext);
+    cancelSpringAnimationIfAny(meta);
     state.transition('PANNING');
     matrix.e -= deltaX;
     matrix.f -= deltaY;
@@ -597,7 +756,6 @@ const presetZoomablePlugin = domEvent.definePlugin({
                         if (scaleMeta) {
                             scaleMeta.scaleOptions.scale = targetScale;
                         }
-                        const highlight = getHighlightInstance.call(this);
                         const dragMeta = getDragOptions.call(this);
                         if (dragMeta) {
                             Object.assign(dragMeta.dragOptions, {
@@ -619,16 +777,13 @@ const presetZoomablePlugin = domEvent.definePlugin({
                         };
                         component.handleTransformCacheInvalidation(oldMatrix, finalMatrix);
                         domEvent.smoothFrame((progress)=>{
-                            const easedProgress = easing.cubicInOut(progress);
+                            const easedProgress = domEvent.easing.cubicInOut(progress);
                             matrix.create(domEvent.DEFAULT_MATRIX_LOC);
                             matrix.e = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
                             matrix.f = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
                             matrix.a = startMatrix.a + (targetScale - startMatrix.a) * easedProgress;
                             matrix.d = startMatrix.d + (targetScale - startMatrix.d) * easedProgress;
-                            if (highlight?.highlight) {
-                                highlight.highlight.reset();
-                                highlight.highlight.setZIndexForHighlight();
-                            }
+                            component.clearOverlay();
                             component.cleanup();
                             component.layoutNodes = component.calculateLayoutNodes(component.data, {
                                 w: width * matrix.a,