squarified 0.4.0 → 0.4.2

package/dist/plugin.mjs

@@ -1,394 +1,472 @@
-import { DEFAULT_MATRIX_LOC, PI_2, Schedule, createRoundBlock, definePlugin, easing, hashCode, isScrollWheelOrRightButtonOnMouseupAndDown, isWheelEvent, mixinWithParams, smoothFrame, stackMatrixTransform, stackMatrixTransformWithGraphAndLayer } from "./dom-event-DQ8OFrZa.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, p as hashCode, P as PI_2, o as isWheelEvent, y as mixinWithParams } from './dom-event-BLJt9knO.mjs';
 
-//#region src/plugins/highlight.ts
-var Highlight = class extends 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";
-	}
+// 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 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 = .3;
+const HIGH_LIGHT_OPACITY = 0.3;
 const fill = {
-	desc: {
-		r: 255,
-		g: 255,
-		b: 255
-	},
-	mode: "rgb"
+    desc: {
+        r: 255,
+        g: 255,
+        b: 255
+    },
+    mode: 'rgb'
 };
 const presetHighlightPlugin = definePlugin({
-	name: "treemap:preset-highlight",
-	onLoad() {
-		const meta = this.getPluginMetadata("treemap:preset-highlight");
-		if (!meta) 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();
-					return;
-				}
-				const [x, y, w, h] = module.layout;
-				const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
-				smoothFrame((_$1, cleanup) => {
-					cleanup();
-					meta.highlight?.reset();
-					const mask = createRoundBlock(x, y, w, h, {
-						fill,
-						opacity: HIGH_LIGHT_OPACITY,
-						radius: effectiveRadius,
-						padding: 0
-					});
-					meta.highlight?.add(mask);
-					meta.highlight?.setZIndexForHighlight("1");
-					stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
-					meta.highlight?.update();
-				}, { duration: ANIMATION_DURATION });
-			}
-		}
-	},
-	onResize() {
-		const meta = this.getPluginMetadata("treemap:preset-highlight");
-		if (!meta) return;
-		meta.highlight?.render.initOptions({ ...this.instance.render.options });
-		meta.highlight?.reset();
-		meta.highlight?.init();
-	},
-	onDispose() {
-		const meta = this.getPluginMetadata("treemap:preset-highlight");
-		if (meta && meta.highlight) {
-			meta.highlight.destory();
-			meta.highlight = null;
-		}
-	},
-	meta: { highlight: null }
+    name: 'treemap:preset-highlight',
+    onLoad () {
+        const meta = this.getPluginMetadata('treemap:preset-highlight');
+        if (!meta) {
+            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();
+                    return;
+                }
+                const [x, y, w, h] = module.layout;
+                const effectiveRadius = Math.min(module.config.rectRadius, w / 4, h / 4);
+                smoothFrame((_, cleanup)=>{
+                    cleanup();
+                    meta.highlight?.reset();
+                    const mask = createRoundBlock(x, y, w, h, {
+                        fill,
+                        opacity: HIGH_LIGHT_OPACITY,
+                        radius: effectiveRadius,
+                        padding: 0
+                    });
+                    meta.highlight?.add(mask);
+                    meta.highlight?.setZIndexForHighlight('1');
+                    stackMatrixTransform(mask, matrix.e, matrix.f, matrix.a);
+                    meta.highlight?.update();
+                }, {
+                    duration: ANIMATION_DURATION
+                });
+            }
+        }
+    },
+    onResize () {
+        const meta = this.getPluginMetadata('treemap:preset-highlight');
+        if (!meta) {
+            return;
+        }
+        meta.highlight?.render.initOptions({
+            ...this.instance.render.options
+        });
+        meta.highlight?.reset();
+        meta.highlight?.init();
+    },
+    onDispose () {
+        const meta = this.getPluginMetadata('treemap:preset-highlight');
+        if (meta && meta.highlight) {
+            meta.highlight.destory();
+            meta.highlight = null;
+        }
+    },
+    meta: {
+        highlight: null
+    }
 });
 
-//#endregion
-//#region src/plugins/drag.ts
 const presetDragElementPlugin = definePlugin({
-	name: "treemap:preset-drag-element",
-	onDOMEventTriggered(name, event, module, domEvent) {
-		const { stateManager: state, matrix, component } = domEvent;
-		switch (name) {
-			case "mousemove": {
-				if (state.isInState("DRAGGING")) domEvent.silent("click");
-				else domEvent.active("click");
-				const meta = getDragOptions.call(this);
-				if (!meta) return;
-				if (meta.dragOptions.x === 0 && meta.dragOptions.y === 0) {
-					state.transition("IDLE");
-					return;
-				}
-				state.transition("DRAGGING");
-				if (state.isInState("DRAGGING")) {
-					const highlight = getHighlightInstance.call(this);
-					smoothFrame((_, cleanup) => {
-						cleanup();
-						const { offsetX, offsetY } = event.native;
-						const drawX = offsetX - meta.dragOptions.x;
-						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();
-						}
-						matrix.translation(drawX, drawY);
-						meta.dragOptions.x = offsetX;
-						meta.dragOptions.y = offsetY;
-						meta.dragOptions.lastX = lastX;
-						meta.dragOptions.lastY = lastY;
-						component.cleanup();
-						component.draw(false, false);
-						stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
-						component.update();
-						return true;
-					}, {
-						duration: ANIMATION_DURATION,
-						deps: [() => state.isInState("IDLE")]
-					});
-				}
-				break;
-			}
-			case "mouseup": {
-				if (state.isInState("PRESSED")) {
-					const meta = getDragOptions.call(this);
-					if (meta && meta.dragOptions) {
-						if (meta.dragOptions.x === meta.dragOptions.lastX && meta.dragOptions.y === meta.dragOptions.lastY) {
-							state.transition("IDLE");
-							return;
-						}
-					}
-				}
-				if (state.isInState("DRAGGING") && state.canTransition("IDLE")) {
-					const highlight = getHighlightInstance.call(this);
-					if (highlight && highlight.highlight) {
-						highlight.highlight.reset();
-						highlight.highlight.setZIndexForHighlight();
-					}
-					const meta = getDragOptions.call(this);
-					if (meta && meta.dragOptions) {
-						meta.dragOptions.x = 0;
-						meta.dragOptions.y = 0;
-						meta.dragOptions.lastX = 0;
-						meta.dragOptions.lastY = 0;
-						state.transition("IDLE");
-					}
-				}
-				break;
-			}
-			case "mousedown": {
-				if (isScrollWheelOrRightButtonOnMouseupAndDown(event.native)) return;
-				const meta = getDragOptions.call(this);
-				if (!meta) return;
-				meta.dragOptions.x = event.native.offsetX;
-				meta.dragOptions.y = event.native.offsetY;
-				meta.dragOptions.lastX = event.native.offsetX;
-				meta.dragOptions.lastY = event.native.offsetY;
-				state.transition("PRESSED");
-				break;
-			}
-		}
-	},
-	meta: { dragOptions: {
-		x: 0,
-		y: 0,
-		lastX: 0,
-		lastY: 0
-	} },
-	onResize({ matrix, stateManager: state }) {
-		matrix.create(DEFAULT_MATRIX_LOC);
-		state.reset();
-	}
+    name: 'treemap:preset-drag-element',
+    onDOMEventTriggered (name, event, module, domEvent) {
+        const { stateManager: state, matrix, component } = domEvent;
+        switch(name){
+            case 'mousemove':
+                {
+                    if (state.isInState('DRAGGING')) {
+                        domEvent.silent('click');
+                    } else {
+                        domEvent.active('click');
+                    }
+                    const meta = getDragOptions.call(this);
+                    if (!meta) {
+                        return;
+                    }
+                    if (meta.dragOptions.x === 0 && meta.dragOptions.y === 0) {
+                        state.transition('IDLE');
+                        return;
+                    }
+                    state.transition('DRAGGING');
+                    if (state.isInState('DRAGGING')) {
+                        const highlight = getHighlightInstance.call(this);
+                        smoothFrame((_, cleanup)=>{
+                            cleanup();
+                            const { offsetX, offsetY } = event.native;
+                            const drawX = offsetX - meta.dragOptions.x;
+                            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();
+                            }
+                            matrix.translation(drawX, drawY);
+                            meta.dragOptions.x = offsetX;
+                            meta.dragOptions.y = offsetY;
+                            meta.dragOptions.lastX = lastX;
+                            meta.dragOptions.lastY = lastY;
+                            component.cleanup();
+                            component.draw(false, false);
+                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            component.update();
+                            return true;
+                        }, {
+                            duration: ANIMATION_DURATION,
+                            deps: [
+                                ()=>state.isInState('IDLE')
+                            ]
+                        });
+                    }
+                    break;
+                }
+            case 'mouseup':
+                {
+                    if (state.isInState('PRESSED')) {
+                        const meta = getDragOptions.call(this);
+                        if (meta && meta.dragOptions) {
+                            if (meta.dragOptions.x === meta.dragOptions.lastX && meta.dragOptions.y === meta.dragOptions.lastY) {
+                                state.transition('IDLE');
+                                return;
+                            }
+                        }
+                    }
+                    if (state.isInState('DRAGGING') && state.canTransition('IDLE')) {
+                        const highlight = getHighlightInstance.call(this);
+                        if (highlight && highlight.highlight) {
+                            highlight.highlight.reset();
+                            highlight.highlight.setZIndexForHighlight();
+                        }
+                        const meta = getDragOptions.call(this);
+                        if (meta && meta.dragOptions) {
+                            meta.dragOptions.x = 0;
+                            meta.dragOptions.y = 0;
+                            meta.dragOptions.lastX = 0;
+                            meta.dragOptions.lastY = 0;
+                            state.transition('IDLE');
+                        }
+                    }
+                    break;
+                }
+            case 'mousedown':
+                {
+                    if (isScrollWheelOrRightButtonOnMouseupAndDown(event.native)) {
+                        return;
+                    }
+                    const meta = getDragOptions.call(this);
+                    if (!meta) {
+                        return;
+                    }
+                    meta.dragOptions.x = event.native.offsetX;
+                    meta.dragOptions.y = event.native.offsetY;
+                    meta.dragOptions.lastX = event.native.offsetX;
+                    meta.dragOptions.lastY = event.native.offsetY;
+                    state.transition('PRESSED');
+                    break;
+                }
+        }
+    },
+    meta: {
+        dragOptions: {
+            x: 0,
+            y: 0,
+            lastX: 0,
+            lastY: 0
+        }
+    },
+    onResize ({ matrix, stateManager: state }) {
+        matrix.create(DEFAULT_MATRIX_LOC);
+        state.reset();
+    }
 });
 function getHighlightInstance() {
-	return this.getPluginMetadata("treemap:preset-highlight");
+    return this.getPluginMetadata('treemap:preset-highlight');
 }
 function getDragOptions() {
-	const meta = this.getPluginMetadata("treemap:preset-drag-element");
-	return meta;
+    const meta = this.getPluginMetadata('treemap:preset-drag-element');
+    return meta;
 }
 
-//#endregion
-//#region src/plugins/preset-color.ts
 const presetColorPlugin = definePlugin({
-	name: "treemap:preset-color",
-	onModuleInit(modules) {
-		const colorMappings = {};
-		for (let i = 0; i < modules.length; i++) {
-			const module = modules[i];
-			assignColorMappings(colorMappings, module, Math.abs(hashCode(module.node.id)) % PI_2, 0);
-		}
-		return { colorMappings };
-	}
+    name: 'treemap:preset-color',
+    onModuleInit (modules) {
+        const colorMappings = {};
+        for(let i = 0; i < modules.length; i++){
+            const module = modules[i];
+            assignColorMappings(colorMappings, module, Math.abs(hashCode(module.node.id)) % PI_2, 0);
+        }
+        return {
+            colorMappings
+        };
+    }
 });
 function assignColorMappings(colorMappings, module, ancestorHue, depth) {
-	const hueOffset = Math.abs(hashCode(module.node.id)) % 60 - 30;
-	const hue = (ancestorHue + hueOffset) % 360;
-	const saturation = Math.max(75 - depth * 5, 40);
-	const baseLightness = 55 - depth * 3;
-	const color = adjustColorToComfortableForHumanEye(hue, saturation, baseLightness);
-	colorMappings[module.node.id] = color;
-	if (module.node.isCombinedNode && module.node.originalNodes) for (const combined of module.node.originalNodes) colorMappings[combined.id] = color;
-	if (module.children && module.children.length) {
-		const childCount = module.children.length;
-		for (let i = 0; i < childCount; i++) {
-			const childHueOffset = 40 * i / childCount;
-			const childHue = (hue + childHueOffset) % 360;
-			assignColorMappings(colorMappings, module.children[i], childHue, depth + 1);
-		}
-	}
+    const hueOffset = Math.abs(hashCode(module.node.id)) % 60 - 30;
+    const hue = (ancestorHue + hueOffset) % 360;
+    const saturation = Math.max(75 - depth * 5, 40);
+    const baseLightness = 55 - depth * 3;
+    const color = adjustColorToComfortableForHumanEye(hue, saturation, baseLightness);
+    colorMappings[module.node.id] = color;
+    if (module.node.isCombinedNode && module.node.originalNodes) {
+        for (const combined of module.node.originalNodes){
+            colorMappings[combined.id] = color;
+        }
+    }
+    if (module.children && module.children.length) {
+        const childCount = module.children.length;
+        for(let i = 0; i < childCount; i++){
+            const childHueOffset = 40 * i / childCount;
+            const childHue = (hue + childHueOffset) % 360;
+            assignColorMappings(colorMappings, module.children[i], childHue, depth + 1);
+        }
+    }
 }
 function adjustColorToComfortableForHumanEye(hue, saturation, lightness) {
-	hue = (hue % 360 + 360) % 360;
-	saturation = Math.min(Math.max(saturation, 40), 85);
-	lightness = Math.min(Math.max(lightness, 35), 75);
-	if (hue >= 60 && hue <= 180) {
-		saturation = Math.max(saturation - 10, 40);
-		lightness = Math.min(lightness + 5, 75);
-	} else if (hue >= 200 && hue <= 280) lightness = Math.min(lightness + 8, 75);
-	else if (hue >= 0 && hue <= 30) saturation = Math.max(saturation - 5, 40);
-	return {
-		mode: "hsl",
-		desc: {
-			h: hue,
-			s: saturation,
-			l: lightness
-		}
-	};
+    hue = (hue % 360 + 360) % 360;
+    saturation = Math.min(Math.max(saturation, 40), 85);
+    lightness = Math.min(Math.max(lightness, 35), 75);
+    if (hue >= 60 && hue <= 180) {
+        saturation = Math.max(saturation - 10, 40);
+        lightness = Math.min(lightness + 5, 75);
+    } else if (hue >= 200 && hue <= 280) {
+        lightness = Math.min(lightness + 8, 75);
+    } else if (hue >= 0 && hue <= 30) {
+        saturation = Math.max(saturation - 5, 40);
+    }
+    return {
+        mode: 'hsl',
+        desc: {
+            h: hue,
+            s: saturation,
+            l: lightness
+        }
+    };
 }
 
-//#endregion
-//#region src/plugins/wheel.ts
 function presetScalePlugin(options) {
-	return definePlugin({
-		name: "treemap:preset-scale",
-		onDOMEventTriggered(_, event, module, evt) {
-			if (isWheelEvent(event)) onWheel(this, event, evt);
-		},
-		meta: { scaleOptions: {
-			scale: 1,
-			minScale: options?.min || .1,
-			maxScale: options?.max || Infinity,
-			scaleFactor: .05
-		} },
-		onResize({ matrix, stateManager: state }) {
-			const meta = getScaleOptions.call(this);
-			if (meta) meta.scaleOptions.scale = 1;
-			matrix.create(DEFAULT_MATRIX_LOC);
-			state.reset();
-		}
-	});
+    return definePlugin({
+        name: 'treemap:preset-scale',
+        onDOMEventTriggered (_, event, module, evt) {
+            if (isWheelEvent(event)) {
+                onWheel(this, event, evt);
+            }
+        },
+        meta: {
+            scaleOptions: {
+                scale: 1,
+                minScale: options?.min || 0.1,
+                maxScale: options?.max || Infinity,
+                scaleFactor: 0.05
+            }
+        },
+        onResize ({ matrix, stateManager: state }) {
+            const meta = getScaleOptions.call(this);
+            if (meta) {
+                meta.scaleOptions.scale = 1;
+            }
+            matrix.create(DEFAULT_MATRIX_LOC);
+            state.reset();
+        }
+    });
 }
 function getScaleOptions() {
-	const meta = this.getPluginMetadata("treemap:preset-scale");
-	return meta;
+    const meta = this.getPluginMetadata('treemap:preset-scale');
+    return meta;
 }
 function onWheel(pluginContext, event, { stateManager: state, component, matrix }) {
-	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;
-	state.transition("SCALING");
-	const mouseX = event.native.offsetX;
-	const mouseY = event.native.offsetY;
-	const scaleDiff = newScale / scale;
-	meta.scaleOptions.scale = newScale;
-	const highlight = getHighlightInstance.apply(pluginContext);
-	smoothFrame((_, cleanup) => {
-		cleanup();
-		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, {
-			w: width,
-			h: height,
-			x: 0,
-			y: 0
-		}, matrix.a);
-		component.draw(true, false);
-		stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
-		component.update();
-		if (state.canTransition("IDLE")) state.transition("IDLE");
-		return true;
-	}, { duration: ANIMATION_DURATION });
+    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;
+    }
+    state.transition('SCALING');
+    const mouseX = event.native.offsetX;
+    const mouseY = event.native.offsetY;
+    const scaleDiff = newScale / scale;
+    meta.scaleOptions.scale = newScale;
+    const highlight = getHighlightInstance.apply(pluginContext);
+    smoothFrame((_, cleanup)=>{
+        cleanup();
+        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, {
+            w: width,
+            h: height,
+            x: 0,
+            y: 0
+        }, matrix.a);
+        component.draw(true, false);
+        stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, newScale);
+        component.update();
+        if (state.canTransition('IDLE')) {
+            state.transition('IDLE');
+        }
+        return true;
+    }, {
+        duration: ANIMATION_DURATION
+    });
 }
 
-//#endregion
-//#region src/plugins/zoomable.ts
-const MAX_SCALE_MULTIPLIER = 2;
+const MAX_SCALE_MULTIPLIER = 2.0;
 const presetZoomablePlugin = definePlugin({
-	name: "treemap:preset-zoomable",
-	onLoad(treemap, { stateManager: state, matrix }) {
-		return mixinWithParams(treemap, [{
-			name: "zoom",
-			fn: () => (id) => {
-				const meta = this.getPluginMetadata("treemap:preset-zoomable");
-				if (!meta || state.isInState("ZOOMING")) return;
-				const targetModule = this.resolveModuleById(id);
-				if (!targetModule) return;
-				meta.previousMatrixState = {
-					e: matrix.e,
-					f: matrix.f,
-					a: matrix.a,
-					d: matrix.d
-				};
-				const component = this.instance;
-				state.transition("ZOOMING");
-				const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
-				const { width, height } = component.render.options;
-				const currentScale = matrix.a;
-				const scaleX = width / nodeW;
-				const scaleY = height / nodeH;
-				const fullScale = Math.min(scaleX, scaleY) * .9;
-				const targetScale = Math.min(fullScale, currentScale * MAX_SCALE_MULTIPLIER);
-				const scale = targetScale;
-				const nodeCenterX = nodeX + nodeW / 2;
-				const nodeCenterY = nodeY + nodeH / 2;
-				const viewCenterX = width / 2;
-				const viewCenterY = height / 2;
-				const targetE = viewCenterX - nodeCenterX * scale;
-				const targetF = viewCenterY - nodeCenterY * scale;
-				const scaleMeta = getScaleOptions.call(this);
-				if (scaleMeta) scaleMeta.scaleOptions.scale = scale;
-				const highlight = getHighlightInstance.call(this);
-				const dragMeta = getDragOptions.call(this);
-				if (dragMeta) {
-					dragMeta.dragOptions.x = 0;
-					dragMeta.dragOptions.y = 0;
-					dragMeta.dragOptions.lastX = 0;
-					dragMeta.dragOptions.lastY = 0;
-				}
-				const startMatrix = {
-					e: matrix.e,
-					f: matrix.f,
-					a: matrix.a,
-					d: matrix.d
-				};
-				smoothFrame((progress) => {
-					const easedProgress = easing.cubicInOut(progress);
-					const currentE = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
-					const currentF = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
-					const currentA = startMatrix.a + (scale - startMatrix.a) * easedProgress;
-					const currentD = startMatrix.d + (scale - startMatrix.d) * easedProgress;
-					matrix.create(DEFAULT_MATRIX_LOC);
-					matrix.e = currentE;
-					matrix.f = currentF;
-					matrix.a = currentA;
-					matrix.d = currentD;
-					if (highlight?.highlight) {
-						highlight.highlight.reset();
-						highlight.highlight.setZIndexForHighlight();
-					}
-					component.cleanup();
-					const { width: width$1, height: height$1 } = component.render.options;
-					component.layoutNodes = component.calculateLayoutNodes(component.data, {
-						w: width$1,
-						h: height$1,
-						x: 0,
-						y: 0
-					}, matrix.a);
-					component.draw(true, false);
-					stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
-					component.update();
-				}, {
-					duration: ANIMATION_DURATION,
-					onStop: () => {
-						state.reset();
-					}
-				});
-			}
-		}]);
-	},
-	meta: { isZooming: false }
+    name: 'treemap:preset-zoomable',
+    onLoad (treemap, { stateManager: state, matrix }) {
+        return mixinWithParams(treemap, [
+            {
+                name: 'zoom',
+                fn: ()=>(id)=>{
+                        const meta = this.getPluginMetadata('treemap:preset-zoomable');
+                        if (!meta || state.isInState('ZOOMING')) {
+                            return;
+                        }
+                        const targetModule = this.resolveModuleById(id);
+                        if (!targetModule) {
+                            return;
+                        }
+                        meta.previousMatrixState = {
+                            e: matrix.e,
+                            f: matrix.f,
+                            a: matrix.a,
+                            d: matrix.d
+                        };
+                        const component = this.instance;
+                        state.transition('ZOOMING');
+                        const [nodeX, nodeY, nodeW, nodeH] = targetModule.layout;
+                        const { width, height } = component.render.options;
+                        const currentScale = matrix.a;
+                        const scaleX = width / nodeW;
+                        const scaleY = height / nodeH;
+                        const fullScale = Math.min(scaleX, scaleY) * 0.9;
+                        const targetScale = Math.min(fullScale, currentScale * MAX_SCALE_MULTIPLIER);
+                        const scale = targetScale;
+                        const nodeCenterX = nodeX + nodeW / 2;
+                        const nodeCenterY = nodeY + nodeH / 2;
+                        const viewCenterX = width / 2;
+                        const viewCenterY = height / 2;
+                        const targetE = viewCenterX - nodeCenterX * scale;
+                        const targetF = viewCenterY - nodeCenterY * scale;
+                        const scaleMeta = getScaleOptions.call(this);
+                        if (scaleMeta) {
+                            scaleMeta.scaleOptions.scale = scale;
+                        }
+                        const highlight = getHighlightInstance.call(this);
+                        const dragMeta = getDragOptions.call(this);
+                        if (dragMeta) {
+                            dragMeta.dragOptions.x = 0;
+                            dragMeta.dragOptions.y = 0;
+                            dragMeta.dragOptions.lastX = 0;
+                            dragMeta.dragOptions.lastY = 0;
+                        }
+                        const startMatrix = {
+                            e: matrix.e,
+                            f: matrix.f,
+                            a: matrix.a,
+                            d: matrix.d
+                        };
+                        smoothFrame((progress)=>{
+                            const easedProgress = easing.cubicInOut(progress);
+                            const currentE = startMatrix.e + (targetE - startMatrix.e) * easedProgress;
+                            const currentF = startMatrix.f + (targetF - startMatrix.f) * easedProgress;
+                            const currentA = startMatrix.a + (scale - startMatrix.a) * easedProgress;
+                            const currentD = startMatrix.d + (scale - startMatrix.d) * easedProgress;
+                            matrix.create(DEFAULT_MATRIX_LOC);
+                            matrix.e = currentE;
+                            matrix.f = currentF;
+                            matrix.a = currentA;
+                            matrix.d = currentD;
+                            if (highlight?.highlight) {
+                                highlight.highlight.reset();
+                                highlight.highlight.setZIndexForHighlight();
+                            }
+                            component.cleanup();
+                            const { width, height } = component.render.options;
+                            component.layoutNodes = component.calculateLayoutNodes(component.data, {
+                                w: width,
+                                h: height,
+                                x: 0,
+                                y: 0
+                            }, matrix.a);
+                            component.draw(true, false);
+                            stackMatrixTransformWithGraphAndLayer(component.elements, matrix.e, matrix.f, matrix.a);
+                            component.update();
+                        }, {
+                            duration: ANIMATION_DURATION,
+                            onStop: ()=>{
+                                state.reset();
+                            }
+                        });
+                    }
+            }
+        ]);
+    },
+    meta: {
+        isZooming: false
+    }
 });
 
-//#endregion
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };