squarified 0.4.3 → 0.6.0

package/dist/index.js

@@ -1,116 +1,1987 @@
 'use strict';
 
-var domEvent = require('./dom-event-CeVZ44nB.js');
+const DEG_TO_RAD = Math.PI / 180;
+class Matrix2D {
+    a;
+    b;
+    c;
+    d;
+    e;
+    f;
+    constructor(loc = {}){
+        this.a = loc.a || 1;
+        this.b = loc.b || 0;
+        this.c = loc.c || 0;
+        this.d = loc.d || 1;
+        this.e = loc.e || 0;
+        this.f = loc.f || 0;
+    }
+    create(loc) {
+        Object.assign(this, loc);
+        return this;
+    }
+    transform(x, y, scaleX, scaleY, rotation, skewX, skewY) {
+        this.scale(scaleX, scaleY).translation(x, y);
+        if (skewX || skewY) {
+            this.skew(skewX, skewY);
+        } else {
+            this.roate(rotation);
+        }
+        return this;
+    }
+    translation(x, y) {
+        this.e += x;
+        this.f += y;
+        return this;
+    }
+    scale(a, d) {
+        this.a *= a;
+        this.d *= d;
+        return this;
+    }
+    skew(x, y) {
+        const tanX = Math.tan(x * DEG_TO_RAD);
+        const tanY = Math.tan(y * DEG_TO_RAD);
+        const a = this.a + this.b * tanX;
+        const b = this.b + this.a * tanY;
+        const c = this.c + this.d * tanX;
+        const d = this.d + this.c * tanY;
+        this.a = a;
+        this.b = b;
+        this.c = c;
+        this.d = d;
+        return this;
+    }
+    roate(rotation) {
+        if (rotation > 0) {
+            const rad = rotation * DEG_TO_RAD;
+            const cosTheta = Math.cos(rad);
+            const sinTheta = Math.sin(rad);
+            const a = this.a * cosTheta - this.b * sinTheta;
+            const b = this.a * sinTheta + this.b * cosTheta;
+            const c = this.c * cosTheta - this.d * sinTheta;
+            const d = this.c * sinTheta + this.d * cosTheta;
+            this.a = a;
+            this.b = b;
+            this.c = c;
+            this.d = d;
+        }
+        return this;
+    }
+}
 
-function createTreemap(// @ts-expect-error todo fix
-options) {
-    const { plugins = [], graphic = {} } = options || {};
-    let root = null;
-    let installed = false;
-    let domEvent$1 = null;
-    let component = null;
-    const exposedEvent = new domEvent.Event();
-    if (!Array.isArray(plugins)) {
-        domEvent.logger.panic('Plugins should be an array');
+const SELF_ID = {
+    id: 0,
+    get () {
+        return this.id++;
+    }
+};
+var DisplayType = /*#__PURE__*/ function(DisplayType) {
+    DisplayType["Graph"] = "Graph";
+    DisplayType["Box"] = "Box";
+    DisplayType["Text"] = "Text";
+    DisplayType["RoundRect"] = "RoundRect";
+    DisplayType["Bitmap"] = "Bitmap";
+    return DisplayType;
+}({});
+class Display {
+    parent;
+    id;
+    matrix;
+    constructor(){
+        this.parent = null;
+        this.id = SELF_ID.get();
+        this.matrix = new Matrix2D();
+    }
+    destory() {
+    //
+    }
+}
+const ASSIGN_MAPPINGS = {
+    fillStyle: 0o1,
+    strokeStyle: 0o2,
+    font: 0o4,
+    lineWidth: 0o10,
+    textAlign: 0o20,
+    textBaseline: 0o40
+};
+const ASSIGN_MAPPINGS_MODE = ASSIGN_MAPPINGS.fillStyle | ASSIGN_MAPPINGS.strokeStyle | ASSIGN_MAPPINGS.font | ASSIGN_MAPPINGS.lineWidth | ASSIGN_MAPPINGS.textAlign | ASSIGN_MAPPINGS.textBaseline;
+const CALL_MAPPINGS_MODE = 0o0;
+function createInstruction() {
+    return {
+        mods: [],
+        fillStyle (...args) {
+            this.mods.push({
+                mod: [
+                    'fillStyle',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.fillStyle
+            });
+        },
+        fillRect (...args) {
+            this.mods.push({
+                mod: [
+                    'fillRect',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        strokeStyle (...args) {
+            this.mods.push({
+                mod: [
+                    'strokeStyle',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.strokeStyle
+            });
+        },
+        lineWidth (...args) {
+            this.mods.push({
+                mod: [
+                    'lineWidth',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.lineWidth
+            });
+        },
+        strokeRect (...args) {
+            this.mods.push({
+                mod: [
+                    'strokeRect',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        fillText (...args) {
+            this.mods.push({
+                mod: [
+                    'fillText',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        font (...args) {
+            this.mods.push({
+                mod: [
+                    'font',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.font
+            });
+        },
+        textBaseline (...args) {
+            this.mods.push({
+                mod: [
+                    'textBaseline',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.textBaseline
+            });
+        },
+        textAlign (...args) {
+            this.mods.push({
+                mod: [
+                    'textAlign',
+                    args
+                ],
+                type: ASSIGN_MAPPINGS.textAlign
+            });
+        },
+        beginPath () {
+            this.mods.push({
+                mod: [
+                    'beginPath',
+                    []
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        moveTo (...args) {
+            this.mods.push({
+                mod: [
+                    'moveTo',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        arcTo (...args) {
+            this.mods.push({
+                mod: [
+                    'arcTo',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        closePath () {
+            this.mods.push({
+                mod: [
+                    'closePath',
+                    []
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        fill () {
+            this.mods.push({
+                mod: [
+                    'fill',
+                    []
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        stroke () {
+            this.mods.push({
+                mod: [
+                    'stroke',
+                    []
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        },
+        drawImage (...args) {
+            // @ts-expect-error safe
+            this.mods.push({
+                mod: [
+                    'drawImage',
+                    args
+                ],
+                type: CALL_MAPPINGS_MODE
+            });
+        }
+    };
+}
+class S extends Display {
+    width;
+    height;
+    x;
+    y;
+    scaleX;
+    scaleY;
+    rotation;
+    skewX;
+    skewY;
+    constructor(options = {}){
+        super();
+        this.width = options.width || 0;
+        this.height = options.height || 0;
+        this.x = options.x || 0;
+        this.y = options.y || 0;
+        this.scaleX = options.scaleX || 1;
+        this.scaleY = options.scaleY || 1;
+        this.rotation = options.rotation || 0;
+        this.skewX = options.skewX || 0;
+        this.skewY = options.skewY || 0;
+    }
+}
+// For performance. we need impl AABB Check for render.
+class Graph extends S {
+    instruction;
+    __options__;
+    __widget__;
+    constructor(options = {}){
+        super(options);
+        this.instruction = createInstruction();
+        this.__options__ = options;
+        this.__widget__ = null;
+    }
+    render(ctx) {
+        this.create();
+        const cap = this.instruction.mods.length;
+        for(let i = 0; i < cap; i++){
+            const { mod, type } = this.instruction.mods[i];
+            const [direct, ...args] = mod;
+            if (type & ASSIGN_MAPPINGS_MODE) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                ctx[direct] = args[0];
+                continue;
+            }
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            ctx[direct].apply(ctx, ...args);
+        }
+    }
+    get __instanceOf__() {
+        return "Graph";
+    }
+}
+
+function isGraph(display) {
+    return display.__instanceOf__ === DisplayType.Graph;
+}
+function isBox(display) {
+    return display.__instanceOf__ === DisplayType.Box;
+}
+function isRoundRect(display) {
+    return isGraph(display) && display.__shape__ === DisplayType.RoundRect;
+}
+function isText(display) {
+    return isGraph(display) && display.__shape__ === DisplayType.Text;
+}
+function isBitmap(display) {
+    return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
+}
+const asserts = {
+    isGraph,
+    isBox,
+    isText,
+    isRoundRect,
+    isBitmap
+};
+
+class C extends Display {
+    elements;
+    constructor(){
+        super();
+        this.elements = [];
+    }
+    add(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            const element = elements[i];
+            if (element.parent) ;
+            this.elements.push(element);
+            element.parent = this;
+        }
+    }
+    remove(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            for(let j = this.elements.length - 1; j >= 0; j--){
+                const element = this.elements[j];
+                if (element.id === elements[i].id) {
+                    this.elements.splice(j, 1);
+                    element.parent = null;
+                }
+            }
+        }
+    }
+    destory() {
+        this.elements.forEach((element)=>element.parent = null);
+        this.elements.length = 0;
+    }
+}
+class Box extends C {
+    elements;
+    constructor(){
+        super();
+        this.elements = [];
+    }
+    add(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            const element = elements[i];
+            if (element.parent) ;
+            this.elements.push(element);
+            element.parent = this;
+        }
+    }
+    remove(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            for(let j = this.elements.length - 1; j >= 0; j--){
+                const element = this.elements[j];
+                if (element.id === elements[i].id) {
+                    this.elements.splice(j, 1);
+                    element.parent = null;
+                }
+            }
+        }
+    }
+    destory() {
+        this.elements.forEach((element)=>element.parent = null);
+        this.elements.length = 0;
+    }
+    get __instanceOf__() {
+        return DisplayType.Box;
+    }
+    clone() {
+        const box = new Box();
+        if (this.elements.length) {
+            const stack = [
+                {
+                    elements: this.elements,
+                    parent: box
+                }
+            ];
+            while(stack.length > 0){
+                const { elements, parent } = stack.pop();
+                const cap = elements.length;
+                for(let i = 0; i < cap; i++){
+                    const element = elements[i];
+                    if (asserts.isBox(element)) {
+                        const newBox = new Box();
+                        newBox.parent = parent;
+                        parent.add(newBox);
+                        stack.push({
+                            elements: element.elements,
+                            parent: newBox
+                        });
+                    } else if (asserts.isGraph(element)) {
+                        const el = element.clone();
+                        el.parent = parent;
+                        parent.add(el);
+                    }
+                }
+            }
+        }
+        return box;
+    }
+}
+
+class Bitmap extends Graph {
+    bitmap;
+    style;
+    dpi;
+    constructor(options = {}){
+        super(options);
+        this.bitmap = options.bitmap || null;
+        this.style = options.style || Object.create(null);
+        this.dpi = options.dpi || 1;
+    }
+    create() {
+        if (this.bitmap) {
+            this.instruction.drawImage(this.bitmap, 0, 0, this.bitmap.width / this.dpi, this.bitmap.height / this.dpi);
+        }
+    }
+    clone() {
+        return new Bitmap({
+            ...this.style,
+            ...this.__options__
+        });
+    }
+    get __shape__() {
+        return DisplayType.Bitmap;
+    }
+}
+
+// Runtime is designed for graph element
+function decodeHLS(meta) {
+    const { h, l, s, a } = meta;
+    if ('a' in meta) {
+        return `hsla(${h}deg, ${s}%, ${l}%, ${a})`;
+    }
+    return `hsl(${h}deg, ${s}%, ${l}%)`;
+}
+function decodeRGB(meta) {
+    const { r, g, b, a } = meta;
+    if ('a' in meta) {
+        return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+}
+function decodeColor(meta) {
+    return meta.mode === 'rgb' ? decodeRGB(meta.desc) : decodeHLS(meta.desc);
+}
+function evaluateFillStyle(primitive, opacity = 1) {
+    const descibe = {
+        mode: primitive.mode,
+        desc: {
+            ...primitive.desc,
+            a: opacity
+        }
+    };
+    return decodeColor(descibe);
+}
+const runtime = {
+    evaluateFillStyle
+};
+
+class RoundRect extends Graph {
+    style;
+    constructor(options = {}){
+        super(options);
+        this.style = options.style || Object.create(null);
+    }
+    get __shape__() {
+        return DisplayType.RoundRect;
+    }
+    create() {
+        const padding = this.style.padding;
+        const x = 0;
+        const y = 0;
+        const width = this.width - padding * 2;
+        const height = this.height - padding * 2;
+        const radius = this.style.radius || 0;
+        this.instruction.beginPath();
+        this.instruction.moveTo(x + radius, y);
+        this.instruction.arcTo(x + width, y, x + width, y + height, radius);
+        this.instruction.arcTo(x + width, y + height, x, y + height, radius);
+        this.instruction.arcTo(x, y + height, x, y, radius);
+        this.instruction.arcTo(x, y, x + width, y, radius);
+        this.instruction.closePath();
+        if (this.style.fill) {
+            this.instruction.closePath();
+            this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
+            this.instruction.fill();
+        }
+        if (this.style.stroke) {
+            if (typeof this.style.lineWidth === 'number') {
+                this.instruction.lineWidth(this.style.lineWidth);
+            }
+            this.instruction.strokeStyle(this.style.stroke);
+            this.instruction.stroke();
+        }
+    }
+    clone() {
+        return new RoundRect({
+            ...this.style,
+            ...this.__options__
+        });
+    }
+}
+
+class Text extends Graph {
+    text;
+    style;
+    constructor(options = {}){
+        super(options);
+        this.text = options.text || '';
+        this.style = options.style || Object.create(null);
+    }
+    create() {
+        if (this.style.fill) {
+            this.instruction.font(this.style.font);
+            this.instruction.lineWidth(this.style.lineWidth);
+            this.instruction.textBaseline(this.style.baseline);
+            this.instruction.fillStyle(this.style.fill);
+            this.instruction.fillText(this.text, 0, 0);
+        }
+    }
+    clone() {
+        return new Text({
+            ...this.style,
+            ...this.__options__
+        });
+    }
+    get __shape__() {
+        return DisplayType.Text;
+    }
+}
+
+function traverse(graphs, handler) {
+    const len = graphs.length;
+    for(let i = 0; i < len; i++){
+        const graph = graphs[i];
+        if (asserts.isGraph(graph)) {
+            handler(graph);
+        } else if (asserts.isBox(graph)) {
+            traverse(graph.elements, handler);
+        }
+    }
+}
+// https://jhildenbiddle.github.io/canvas-size/#/?id=maxheight
+function getCanvasBoundarySize() {
+    const ua = navigator.userAgent;
+    let size = 16384;
+    if (/Firefox\/(\d+)/.test(ua)) {
+        const version = parseInt(RegExp.$1, 10);
+        if (version >= 122) {
+            size = 23168;
+        } else {
+            size = 11180;
+        }
+    }
+    return {
+        size
+    };
+}
+const canvasBoundarySize = getCanvasBoundarySize();
+
+// 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 Event {
+    eventCollections;
+    constructor(){
+        this.eventCollections = Object.create(null);
+    }
+    on(evt, handler, c) {
+        if (!(evt in this.eventCollections)) {
+            this.eventCollections[evt] = [];
+        }
+        const data = {
+            name: evt,
+            handler,
+            ctx: c || this,
+            silent: false
+        };
+        this.eventCollections[evt].push(data);
+    }
+    off(evt, handler) {
+        if (evt in this.eventCollections) {
+            if (!handler) {
+                this.eventCollections[evt] = [];
+                return;
+            }
+            this.eventCollections[evt] = this.eventCollections[evt].filter((d)=>d.handler !== handler);
+        }
+    }
+    silent(evt, handler) {
+        if (!(evt in this.eventCollections)) {
+            return;
+        }
+        this.eventCollections[evt].forEach((d)=>{
+            if (!handler || d.handler === handler) {
+                d.silent = true;
+            }
+        });
+    }
+    active(evt, handler) {
+        if (!(evt in this.eventCollections)) {
+            return;
+        }
+        this.eventCollections[evt].forEach((d)=>{
+            if (!handler || d.handler === handler) {
+                d.silent = false;
+            }
+        });
+    }
+    emit(evt, ...args) {
+        if (!this.eventCollections[evt]) {
+            return;
+        }
+        const handlers = this.eventCollections[evt];
+        if (handlers.length) {
+            handlers.forEach((d)=>{
+                if (d.silent) {
+                    return;
+                }
+                d.handler.call(d.ctx, ...args);
+            });
+        }
+    }
+    bindWithContext(c) {
+        return (evt, handler)=>this.on(evt, handler, c);
+    }
+}
+
+function hashCode(str) {
+    let hash = 0;
+    for(let i = 0; i < str.length; i++){
+        const code = str.charCodeAt(i);
+        hash = (hash << 5) - hash + code;
+        hash = hash & hash;
+    }
+    return hash;
+}
+// For strings we only check the first character to determine if it's a number (I think it's enough)
+function perferNumeric(s) {
+    if (typeof s === 'number') {
+        return true;
+    }
+    return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
+}
+function createRoundBlock(x, y, width, height, style) {
+    return new RoundRect({
+        width,
+        height,
+        x,
+        y,
+        style: {
+            ...style
+        }
+    });
+}
+function createTitleText(text, x, y, font, color) {
+    return new Text({
+        text,
+        x,
+        y,
+        style: {
+            fill: color,
+            textAlign: 'center',
+            baseline: 'middle',
+            font,
+            lineWidth: 1
+        }
+    });
+}
+const raf = window.requestAnimationFrame;
+function createCanvasElement() {
+    return document.createElement('canvas');
+}
+function applyCanvasTransform(ctx, matrix, dpr) {
+    ctx.setTransform(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr);
+}
+function mixin(app, methods) {
+    methods.forEach(({ name, fn })=>{
+        Object.defineProperty(app, name, {
+            value: fn(app),
+            writable: false
+        });
+    });
+}
+function prettyStrJoin(...s) {
+    return s.join('');
+}
+
+const NAME_SPACE = 'etoile';
+const log = {
+    error: (message)=>{
+        return `[${NAME_SPACE}] ${message}`;
+    }
+};
+
+function writeBoundingRectForCanvas(c, w, h, dpr) {
+    c.width = w * dpr;
+    c.height = h * dpr;
+    c.style.cssText = `width: ${w}px; height: ${h}px`;
+}
+class Canvas {
+    canvas;
+    ctx;
+    constructor(options){
+        this.canvas = createCanvasElement();
+        this.setOptions(options);
+        this.ctx = this.canvas.getContext('2d');
+    }
+    setOptions(options) {
+        writeBoundingRectForCanvas(this.canvas, options.width, options.height, options.devicePixelRatio);
+    }
+}
+class Render {
+    options;
+    container;
+    constructor(to, options){
+        this.container = new Canvas(options);
+        this.options = options;
+        this.initOptions(options);
+        if (!options.shaow) {
+            to.appendChild(this.container.canvas);
+        }
+    }
+    clear(width, height) {
+        this.ctx.clearRect(0, 0, width, height);
+    }
+    get canvas() {
+        return this.container.canvas;
+    }
+    get ctx() {
+        return this.container.ctx;
+    }
+    initOptions(userOptions = {}) {
+        Object.assign(this.options, userOptions);
+        this.container.setOptions(this.options);
+    }
+    destory() {}
+}
+
+// First cleanup canvas
+function drawGraphIntoCanvas(graph, opts) {
+    const { ctx, dpr } = opts;
+    ctx.save();
+    if (asserts.isBox(graph)) {
+        const elements = graph.elements;
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            const element = elements[i];
+            drawGraphIntoCanvas(element, opts);
+        }
+    }
+    if (asserts.isGraph(graph)) {
+        const matrix = graph.matrix.create({
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+            e: 0,
+            f: 0
+        });
+        matrix.transform(graph.x, graph.y, graph.scaleX, graph.scaleY, graph.rotation, graph.skewX, graph.skewY);
+        if (asserts.isRoundRect(graph)) {
+            const effectiveWidth = graph.width - graph.style.padding * 2;
+            const effectiveHeight = graph.height - graph.style.padding * 2;
+            if (effectiveWidth <= 0 || effectiveHeight <= 0) {
+                ctx.restore();
+                return;
+            }
+            if (graph.style.radius >= effectiveHeight / 2 || graph.style.radius >= effectiveWidth / 2) {
+                ctx.restore();
+                return;
+            }
+        }
+        applyCanvasTransform(ctx, matrix, dpr);
+        graph.render(ctx);
+    }
+    ctx.restore();
+}
+class Schedule extends Box {
+    render;
+    to;
+    event;
+    constructor(to, renderOptions = {}){
+        super();
+        this.to = typeof to === 'string' ? document.querySelector(to) : to;
+        if (!this.to) {
+            throw new Error(log.error('The element to bind is not found.'));
+        }
+        const { width, height } = this.to.getBoundingClientRect();
+        Object.assign(renderOptions, {
+            width,
+            height
+        }, {
+            devicePixelRatio: window.devicePixelRatio || 1
+        });
+        this.event = new Event();
+        this.render = new Render(this.to, renderOptions);
+    }
+    update() {
+        this.render.clear(this.render.options.width, this.render.options.height);
+        this.execute(this.render, this);
+        const matrix = this.matrix.create({
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+            e: 0,
+            f: 0
+        });
+        applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
+    }
+    // execute all graph elements
+    execute(render, graph = this) {
+        drawGraphIntoCanvas(graph, {
+            c: render.canvas,
+            ctx: render.ctx,
+            dpr: render.options.devicePixelRatio
+        });
+    }
+}
+
+class RenderCache extends Canvas {
+    key;
+    $memory;
+    constructor(opts){
+        super(opts);
+        this.key = 'render-cache';
+        this.$memory = false;
+    }
+    get state() {
+        return this.$memory;
+    }
+    flush(treemap, matrix = new Matrix2D()) {
+        const { devicePixelRatio, width, height } = treemap.render.options;
+        const { a, d } = matrix;
+        const { size } = canvasBoundarySize;
+        // Check outof boundary
+        if (width * a >= size || height * d >= size) {
+            return;
+        }
+        if (width * a * height * d >= size * size) {
+            return;
+        }
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.setOptions({
+            width: width * a,
+            height: height * d,
+            devicePixelRatio
+        });
+        resetLayout(treemap, width * a, height * d);
+        drawGraphIntoCanvas(treemap, {
+            c: this.canvas,
+            ctx: this.ctx,
+            dpr: devicePixelRatio
+        });
+        this.$memory = true;
     }
-    const api = {
-        zoom: domEvent.noop
+    destroy() {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.$memory = false;
+    }
+}
+class FontCache {
+    key;
+    fonts;
+    ellispsis;
+    constructor(){
+        this.key = 'font-cache';
+        this.fonts = {};
+        this.ellispsis = {};
+    }
+    get state() {
+        return true;
+    }
+    flush(treemap, matrix = new Matrix2D()) {
+        const { width, height } = treemap.render.options;
+        const { a, d } = matrix;
+        const zoomedWidth = width * a;
+        const zoomedHeight = height * d;
+        if (zoomedWidth <= width || zoomedHeight <= height) {
+            return;
+        }
+        traverse([
+            treemap.elements[0]
+        ], (graph)=>{
+            if (asserts.isRoundRect(graph)) {
+                const { x, y, height: graphHeight, width: graphWidth } = graph;
+                if (!graphHeight || !graphWidth) {
+                    return;
+                }
+                if (x >= 0 && y >= 0 && x + graphWidth <= width && y + graphHeight <= height) {
+                    if (graph.__widget__) {
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                        const node = graph.__widget__.node;
+                        delete this.fonts[node.id];
+                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+                        delete this.ellispsis[node.label];
+                    }
+                }
+            }
+        });
+    }
+    destroy() {
+        this.fonts = {};
+        this.ellispsis = {};
+    }
+    queryFontById(id, byDefault) {
+        if (!(id in this.fonts)) {
+            this.fonts[id] = byDefault();
+        }
+        return this.fonts[id];
+    }
+}
+
+// primitive types
+const DOM_EVENTS = [
+    'click',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'wheel'
+];
+function getOffset(el) {
+    let e = 0;
+    let f = 0;
+    if (document.documentElement.getBoundingClientRect && el.getBoundingClientRect) {
+        const { top, left } = el.getBoundingClientRect();
+        e = top;
+        f = left;
+    } else {
+        for(let elt = el; elt; elt = el.offsetParent){
+            e += el.offsetLeft;
+            f += el.offsetTop;
+        }
+    }
+    return [
+        e + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
+        f + Math.max(document.documentElement.scrollTop, document.body.scrollTop)
+    ];
+}
+function captureBoxXY(c, evt, a, d, translateX, translateY) {
+    const boundingClientRect = c.getBoundingClientRect();
+    if (evt instanceof MouseEvent) {
+        const [e, f] = getOffset(c);
+        return {
+            x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
+            y: (evt.clientY - boundingClientRect.top - f - translateY) / d
+        };
+    }
+    return {
+        x: 0,
+        y: 0
+    };
+}
+function createEffectRun(c) {
+    return (fn)=>{
+        const effect = ()=>{
+            const done = fn();
+            if (!done) {
+                c.animationFrameID = raf(effect);
+            }
+        };
+        if (!c.animationFrameID) {
+            c.animationFrameID = raf(effect);
+        }
     };
-    const ctx = {
+}
+function createEffectStop(c) {
+    return ()=>{
+        if (c.animationFrameID) {
+            window.cancelAnimationFrame(c.animationFrameID);
+            c.animationFrameID = null;
+        }
+    };
+}
+function createSmoothFrame() {
+    const c = {
+        animationFrameID: null
+    };
+    const run = createEffectRun(c);
+    const stop = createEffectStop(c);
+    return {
+        run,
+        stop
+    };
+}
+// Some thoughts DOMEvent was designed this way intentionally. I don't have any idea of splitting the general libray yet.
+// The follow captureBoxXy matrix a and d be 1 is because of the scaled canvas (without zoomed) is with a new layout.
+function bindDOMEvent(el, evt, dom) {
+    const handler = (e)=>{
+        const { x, y } = captureBoxXY(el, e, 1, 1, dom.matrix.e, dom.matrix.f);
+        // @ts-expect-error safe
+        dom.emit(evt, {
+            native: e,
+            loc: {
+                x,
+                y
+            }
+        });
+    };
+    el.addEventListener(evt, handler);
+    return handler;
+}
+class DOMEvent extends Event {
+    el;
+    events;
+    matrix;
+    constructor(el){
+        super();
+        this.el = el;
+        this.matrix = new Matrix2D();
+        this.events = DOM_EVENTS.map((evt)=>bindDOMEvent(this.el, evt, this));
+    }
+}
+
+// Note: I won't decide to support mobile devices.
+// So don't create any reporting issues about mobile devices.
+// Notte: this only work at wheel event.
+function useMagicTrackPad(event) {
+    if (event.cancelable !== false) {
+        event.preventDefault();
+    }
+    !event.ctrlKey;
+}
+
+function sortChildrenByKey(data, ...keys) {
+    return data.sort((a, b)=>{
+        for (const key of keys){
+            const v = a[key];
+            const v2 = b[key];
+            if (perferNumeric(v) && perferNumeric(v2)) {
+                if (v2 > v) {
+                    return 1;
+                }
+                if (v2 < v) {
+                    return -1;
+                }
+                continue;
+            }
+            // Not numeric, compare as string
+            const comparison = ('' + v).localeCompare('' + v2);
+            if (comparison !== 0) {
+                return comparison;
+            }
+        }
+        return 0;
+    });
+}
+function c2m(data, key, modifier) {
+    if (Array.isArray(data.groups)) {
+        data.groups = sortChildrenByKey(data.groups.map((d)=>c2m(d, key, modifier)), 'weight');
+    }
+    const obj = {
+        ...data,
+        weight: data[key]
+    };
+    if (modifier) {
+        return modifier(obj);
+    }
+    return obj;
+}
+function flatten(data) {
+    const result = [];
+    for(let i = 0; i < data.length; i++){
+        const { groups, ...rest } = data[i];
+        result.push(rest);
+        if (groups) {
+            result.push(...flatten(groups));
+        }
+    }
+    return result;
+}
+function bindParentForModule(modules, parent) {
+    return modules.map((module)=>{
+        const next = {
+            ...module
+        };
+        next.parent = parent;
+        if (next.groups && Array.isArray(next.groups)) {
+            next.groups = bindParentForModule(next.groups, next);
+        }
+        return next;
+    });
+}
+function getNodeDepth(node) {
+    let depth = 0;
+    while(node.parent){
+        node = node.parent;
+        depth++;
+    }
+    return depth;
+}
+function visit(data, fn) {
+    if (!data) {
+        return null;
+    }
+    for (const d of data){
+        if (d.children) {
+            const result = visit(d.children, fn);
+            if (result) {
+                return result;
+            }
+        }
+        const stop = fn(d);
+        if (stop) {
+            return d;
+        }
+    }
+    return null;
+}
+function findRelativeNode(p, layoutNodes) {
+    return visit(layoutNodes, (node)=>{
+        const [x, y, w, h] = node.layout;
+        if (p.x >= x && p.y >= y && p.x < x + w && p.y < y + h) {
+            return true;
+        }
+    });
+}
+function findRelativeNodeById(id, layoutNodes) {
+    return visit(layoutNodes, (node)=>{
+        if (node.node.id === id) {
+            return true;
+        }
+    });
+}
+
+// Because of the cache system. scale factor is not needed to apply.
+// Eg. Only use scale factor when the layout is changed.
+function createTreemapEventState() {
+    return {
+        isDragging: false,
+        isWheeling: false,
+        isZooming: false,
+        currentNode: null,
+        forceDestroy: false,
+        dragX: 0,
+        dragY: 0
+    };
+}
+const INTERNAL_EVENT_MAPPINGS = {
+    ON_ZOOM: 0o1,
+    ON_CLEANUP: 0o3
+};
+const ANIMATION_DURATION = 300;
+const fill = {
+    desc: {
+        r: 255,
+        g: 255,
+        b: 255
+    },
+    mode: 'rgb'
+};
+function smoothFrame(callback, opts) {
+    const frame = createSmoothFrame();
+    const startTime = Date.now();
+    const condtion = (process)=>{
+        if (Array.isArray(opts.deps)) {
+            return opts.deps.some((dep)=>dep());
+        }
+        return process >= 1;
+    };
+    frame.run(()=>{
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min(elapsed / opts.duration, 1);
+        if (condtion(progress)) {
+            frame.stop();
+            if (opts.onStop) {
+                opts.onStop();
+            }
+            return true;
+        }
+        return callback(progress, frame.stop);
+    });
+}
+const HIGH_LIGHT_OPACITY = 0.3;
+function drawHighlight(treemap, evt) {
+    const { highlight } = treemap;
+    const { currentNode } = evt.state;
+    if (currentNode) {
+        const [x, y, w, h] = currentNode.layout;
+        smoothFrame((_, cleanup)=>{
+            cleanup();
+            highlight.reset();
+            const mask = createRoundBlock(x, y, w, h, {
+                fill,
+                opacity: HIGH_LIGHT_OPACITY,
+                radius: 4,
+                padding: 2
+            });
+            highlight.add(mask);
+            highlight.setZIndexForHighlight('1');
+            stackMatrixTransform(mask, evt.matrix.e, evt.matrix.f, 1);
+            highlight.update();
+            if (!evt.state.currentNode) {
+                return true;
+            }
+        }, {
+            duration: ANIMATION_DURATION,
+            deps: [
+                ()=>evt.state.isDragging,
+                ()=>evt.state.isWheeling,
+                ()=>evt.state.isZooming
+            ]
+        });
+    } else {
+        highlight.reset();
+        highlight.setZIndexForHighlight();
+    }
+}
+// TODO: Do we need turn off internal events?
+class TreemapEvent extends DOMEvent {
+    exposedEvent;
+    state;
+    zoom;
+    constructor(app, treemap){
+        super(treemap.render.canvas);
+        this.exposedEvent = new Event();
+        this.state = createTreemapEventState();
+        const exposedMethods = [
+            {
+                name: 'on',
+                fn: ()=>this.exposedEvent.bindWithContext(treemap.api)
+            },
+            {
+                name: 'off',
+                fn: ()=>this.exposedEvent.off.bind(this.exposedEvent)
+            }
+        ];
+        DOM_EVENTS.forEach((evt)=>{
+            this.on(evt, (metadata)=>{
+                // if (evt === 'wheel' && macOS) {
+                //   this.dispatch({ type: 'macOSWheel', treemap }, metadata)
+                //   return
+                // }
+                this.dispatch({
+                    type: evt,
+                    treemap
+                }, metadata);
+            });
+        });
+        mixin(app, exposedMethods);
+        treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP, ()=>{
+            this.matrix.create({
+                a: 1,
+                b: 0,
+                c: 0,
+                d: 1,
+                e: 0,
+                f: 0
+            });
+            this.state = createTreemapEventState();
+        });
+        this.zoom = createOnZoom(treemap, this);
+        treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, this.zoom);
+    }
+    dispatch(ctx, metadata) {
+        const node = findRelativeNode(metadata.loc, ctx.treemap.layoutNodes);
+        const fn = prettyStrJoin('on', ctx.type);
+        // @ts-expect-error safe
+        if (typeof this[fn] === 'function') {
+            // @ts-expect-error safe
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+            this[fn](ctx, metadata, node);
+        }
+        // note: onmouseup event will trigger click event together
+        if (ctx.type === 'mousemove') {
+            if (this.state.isDragging) {
+                this.exposedEvent.silent('click');
+            } else {
+                this.exposedEvent.active('click');
+            }
+        }
+        // For macOS
+        this.exposedEvent.emit(ctx.type === 'macOSWheel' ? 'wheel' : ctx.type, {
+            native: metadata.native,
+            module: node
+        });
+    }
+    onmousemove(ctx, metadata, node) {
+        if (!this.state.isDragging) {
+            if (this.state.currentNode !== node || !node) {
+                this.state.currentNode = node;
+            }
+            drawHighlight(ctx.treemap, this);
+        } else {
+            // for drag
+            const { treemap } = ctx;
+            smoothFrame((_, cleanup)=>{
+                cleanup();
+                const { offsetX: x, offsetY: y } = metadata.native;
+                const { dragX: lastX, dragY: lastY } = this.state;
+                const drawX = x - lastX;
+                const drawY = y - lastY;
+                treemap.highlight.reset();
+                treemap.highlight.setZIndexForHighlight();
+                treemap.reset();
+                this.matrix.translation(drawX, drawY);
+                Object.assign(this.state, {
+                    isDragging: true,
+                    dragX: x,
+                    dragY: y
+                });
+                stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
+                treemap.update();
+                return true;
+            }, {
+                duration: ANIMATION_DURATION,
+                deps: [
+                    ()=>this.state.forceDestroy
+                ],
+                onStop: ()=>{
+                    this.state.isDragging = false;
+                }
+            });
+        }
+    }
+    onmouseout(ctx) {
+        this.state.currentNode = null;
+        drawHighlight(ctx.treemap, this);
+    }
+    onmousedown(ctx, metadata) {
+        if (isScrollWheelOrRightButtonOnMouseupAndDown(metadata.native)) {
+            return;
+        }
+        this.state.isDragging = true;
+        this.state.dragX = metadata.native.offsetX;
+        this.state.dragY = metadata.native.offsetY;
+        this.state.forceDestroy = false;
+        if (!ctx.treemap.renderCache.state) {
+            this.exposedEvent.silent('mousemove');
+            this.silent('mousemove');
+            ctx.treemap.renderCache.flush(ctx.treemap, this.matrix);
+            this.active('mousemove');
+            this.exposedEvent.active('mousemove');
+        }
+    }
+    onmouseup(ctx) {
+        if (!this.state.isDragging) {
+            return;
+        }
+        this.state.forceDestroy = true;
+        this.state.isDragging = false;
+        const { treemap } = ctx;
+        treemap.highlight.reset();
+        treemap.highlight.setZIndexForHighlight();
+    }
+    onwheel(ctx, metadata) {
+        ctx.treemap.renderCache.destroy();
+        ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
+        const { native } = metadata;
+        const { treemap } = ctx;
+        // @ts-expect-error safe
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const wheelDelta = native.wheelDelta;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const absWheelDelta = Math.abs(wheelDelta);
+        const offsetX = native.offsetX;
+        const offsetY = native.offsetY;
+        if (wheelDelta === 0) {
+            return;
+        }
+        this.state.forceDestroy = true;
+        const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
+        const delta = wheelDelta > 0 ? factor : 1 / factor;
+        const targetScaleRatio = this.matrix.a * delta;
+        const translateX = offsetX - (offsetX - this.matrix.e) * delta;
+        const translateY = offsetY - (offsetY - this.matrix.f) * delta;
+        smoothFrame((progress, cleanup)=>{
+            this.exposedEvent.silent('mousemove');
+            this.silent('mousemove');
+            this.silent('click');
+            this.exposedEvent.silent('click');
+            treemap.highlight.reset();
+            treemap.highlight.setZIndexForHighlight();
+            treemap.fontCache.flush(treemap, this.matrix);
+            this.state.isWheeling = true;
+            const easedProgress = easing.cubicInOut(progress);
+            const scale = (targetScaleRatio - this.matrix.a) * easedProgress;
+            this.matrix.a += scale;
+            this.matrix.d += scale;
+            this.matrix.translation((translateX - this.matrix.e) * easedProgress, (translateY - this.matrix.f) * easedProgress);
+            // Each shape will scale by schedule phase. (According the dpi)
+            // So that if the DPI is more than 1. we need to shrink first. ( w / dpi , h / dpi )
+            // Schedule will scale it back to the original size.
+            resetLayout(treemap, treemap.render.canvas.width * this.matrix.a / treemap.render.options.devicePixelRatio, treemap.render.canvas.height * this.matrix.d / treemap.render.options.devicePixelRatio);
+            stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
+            treemap.update();
+            cleanup();
+        }, {
+            duration: ANIMATION_DURATION,
+            onStop: ()=>{
+                this.state.forceDestroy = false;
+                this.state.isWheeling = false;
+                // this.active('mousedown')
+                this.active('mousemove');
+                this.exposedEvent.active('mousemove');
+                this.active('click');
+                this.exposedEvent.active('click');
+                treemap.event.active(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
+            }
+        });
+    }
+    onmacOSWheel(ctx, metadata) {
+        useMagicTrackPad(metadata.native);
+    }
+}
+function stackMatrixTransform(graph, e, f, scale) {
+    graph.x = graph.x * scale + e;
+    graph.y = graph.y * scale + f;
+    graph.scaleX = scale;
+    graph.scaleY = scale;
+}
+function stackMatrixTransformWithGraphAndLayer(graphs, e, f, scale) {
+    traverse(graphs, (graph)=>stackMatrixTransform(graph, e, f, scale));
+}
+// Only works for mouseup and mousedown events
+function isScrollWheelOrRightButtonOnMouseupAndDown(e) {
+    return e.which === 2 || e.which === 3;
+}
+function createOnZoom(treemap, evt) {
+    return (node)=>{
+        treemap.renderCache.destroy();
+        evt.state.isZooming = true;
+        const c = treemap.render.canvas;
+        const boundingClientRect = c.getBoundingClientRect();
+        if (node) {
+            const [mx, my, mw, mh] = node.layout;
+            const factor = Math.min(boundingClientRect.width / mw, boundingClientRect.height / mh);
+            const targetScale = factor * evt.matrix.a;
+            const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * factor;
+            const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
+            smoothFrame((progress, cleanup)=>{
+                cleanup();
+                evt.silent('mousemove');
+                evt.exposedEvent.silent('mousemove');
+                treemap.fontCache.flush(treemap, evt.matrix);
+                const easedProgress = easing.cubicInOut(progress);
+                const scale = (targetScale - evt.matrix.a) * easedProgress;
+                evt.matrix.a += scale;
+                evt.matrix.d += scale;
+                evt.matrix.translation((translateX - evt.matrix.e) * easedProgress, (translateY - evt.matrix.f) * easedProgress);
+                resetLayout(treemap, treemap.render.canvas.width * evt.matrix.a / treemap.render.options.devicePixelRatio, treemap.render.canvas.height * evt.matrix.d / treemap.render.options.devicePixelRatio);
+                stackMatrixTransformWithGraphAndLayer(treemap.elements, evt.matrix.e, evt.matrix.f, 1);
+                treemap.update();
+            }, {
+                duration: ANIMATION_DURATION,
+                onStop: ()=>{
+                    evt.state.isZooming = false;
+                    evt.active('mousemove');
+                    evt.exposedEvent.active('mousemove');
+                }
+            });
+        }
+    };
+}
+
+function register(Mod) {
+    return (app, treemap)=>{
+        new Mod(app, treemap);
+    };
+}
+
+function squarify(data, rect, layoutDecorator) {
+    const result = [];
+    if (!data.length) {
+        return result;
+    }
+    const worst = (start, end, shortestSide, totalWeight, aspectRatio)=>{
+        const max = data[start].weight * aspectRatio;
+        const min = data[end].weight * aspectRatio;
+        return Math.max(shortestSide * shortestSide * max / (totalWeight * totalWeight), totalWeight * totalWeight / (shortestSide * shortestSide * min));
+    };
+    const recursion = (start, rect)=>{
+        while(start < data.length){
+            let totalWeight = 0;
+            for(let i = start; i < data.length; i++){
+                totalWeight += data[i].weight;
+            }
+            const shortestSide = Math.min(rect.w, rect.h);
+            const aspectRatio = rect.w * rect.h / totalWeight;
+            let end = start;
+            let areaInRun = 0;
+            let oldWorst = 0;
+            // find the best split
+            while(end < data.length){
+                const area = data[end].weight * aspectRatio;
+                const newWorst = worst(start, end, shortestSide, areaInRun + area, aspectRatio);
+                if (end > start && oldWorst < newWorst) {
+                    break;
+                }
+                areaInRun += area;
+                oldWorst = newWorst;
+                end++;
+            }
+            const splited = Math.round(areaInRun / shortestSide);
+            let areaInLayout = 0;
+            for(let i = start; i < end; i++){
+                const children = data[i];
+                const area = children.weight * aspectRatio;
+                const lower = Math.round(shortestSide * areaInLayout / areaInRun);
+                const upper = Math.round(shortestSide * (areaInLayout + area) / areaInRun);
+                const [x, y, w, h] = rect.w >= rect.h ? [
+                    rect.x,
+                    rect.y + lower,
+                    splited,
+                    upper - lower
+                ] : [
+                    rect.x + lower,
+                    rect.y,
+                    upper - lower,
+                    splited
+                ];
+                const depth = getNodeDepth(children) || 1;
+                const { titleAreaHeight, rectGap } = layoutDecorator;
+                const diff = titleAreaHeight.max / depth;
+                const hh = diff < titleAreaHeight.min ? titleAreaHeight.min : diff;
+                result.push({
+                    layout: [
+                        x,
+                        y,
+                        w,
+                        h
+                    ],
+                    node: children,
+                    decorator: {
+                        ...layoutDecorator,
+                        titleHeight: hh
+                    },
+                    children: w > rectGap * 2 && h > hh + rectGap ? squarify(children.groups || [], {
+                        x: x + rectGap,
+                        y: y + hh,
+                        w: w - rectGap * 2,
+                        h: h - hh - rectGap
+                    }, layoutDecorator) : []
+                });
+                areaInLayout += area;
+            }
+            start = end;
+            if (rect.w >= rect.h) {
+                rect.x += splited;
+                rect.w -= splited;
+            } else {
+                rect.y += splited;
+                rect.h -= splited;
+            }
+        }
+    };
+    recursion(0, rect);
+    return result;
+}
+
+function measureTextWidth(c, text) {
+    return c.measureText(text).width;
+}
+function evaluateOptimalFontSize(c, text, font, desiredW, desiredH) {
+    desiredW = Math.floor(desiredW);
+    desiredH = Math.floor(desiredH);
+    const { range, family } = font;
+    let min = range.min;
+    let max = range.max;
+    const cache = new Map();
+    while(max - min >= 1){
+        const current = min + (max - min) / 2;
+        if (!cache.has(current)) {
+            c.font = `${current}px ${family}`;
+            const metrics = c.measureText(text);
+            const width = metrics.width;
+            const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+            cache.set(current, {
+                width,
+                height
+            });
+        }
+        const { width, height } = cache.get(current);
+        if (width > desiredW || height > desiredH) {
+            max = current;
+        } else {
+            min = current;
+        }
+    }
+    return Math.floor(min);
+}
+function getSafeText(c, text, width, cache) {
+    let ellipsisWidth = 0;
+    if (text in cache) {
+        ellipsisWidth = cache[text];
+    } else {
+        ellipsisWidth = measureTextWidth(c, '...');
+        cache[text] = ellipsisWidth;
+    }
+    if (width < ellipsisWidth) {
+        return false;
+    }
+    const textWidth = measureTextWidth(c, text);
+    if (textWidth < width) {
+        return {
+            text,
+            width: textWidth
+        };
+    }
+    return {
+        text: '...',
+        width: ellipsisWidth
+    };
+}
+function resetLayout(treemap, w, h) {
+    treemap.layoutNodes = squarify(treemap.data, {
+        w,
+        h,
+        x: 0,
+        y: 0
+    }, treemap.decorator.layout);
+    treemap.reset(true);
+}
+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';
+    }
+}
+class TreemapLayout extends Schedule {
+    data;
+    layoutNodes;
+    decorator;
+    bgBox;
+    fgBox;
+    highlight;
+    renderCache;
+    fontCache;
+    constructor(...args){
+        super(...args);
+        this.data = [];
+        this.layoutNodes = [];
+        this.bgBox = new Box();
+        this.fgBox = new Box();
+        this.decorator = Object.create(null);
+        this.highlight = new Highlight(this.to, {
+            width: this.render.options.width,
+            height: this.render.options.height
+        });
+        this.renderCache = new RenderCache(this.render.options);
+        this.fontCache = new FontCache();
+    }
+    drawBackgroundNode(node) {
+        const [x, y, w, h] = node.layout;
+        const padding = 2;
+        if (w - padding * 2 <= 0 || h - padding * 2 <= 0) {
+            return;
+        }
+        const fill = this.decorator.color.mappings[node.node.id];
+        const rect = createRoundBlock(x, y, w, h, {
+            fill,
+            padding,
+            radius: 4
+        });
+        rect.__widget__ = node;
+        this.bgBox.add(rect);
+        for (const child of node.children){
+            this.drawBackgroundNode(child);
+        }
+    }
+    drawForegroundNode(node) {
+        const [x, y, w, h] = node.layout;
+        if (!w || !h) {
+            return;
+        }
+        const { titleHeight, rectGap } = node.decorator;
+        const { fontSize, fontFamily, color } = this.decorator.font;
+        const optimalFontSize = this.fontCache.queryFontById(node.node.id, ()=>evaluateOptimalFontSize(this.render.ctx, // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+            node.node.label, {
+                range: fontSize,
+                family: fontFamily
+            }, w - rectGap * 2, node.children.length ? Math.round(titleHeight / 2) + rectGap : h));
+        this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2, this.fontCache.ellispsis);
+        if (!result) {
+            return;
+        }
+        if (result.width >= w || optimalFontSize >= h) {
+            return;
+        }
+        const { text, width } = result;
+        const textX = x + Math.round((w - width) / 2);
+        const textY = y + (node.children.length ? Math.round(titleHeight / 2) : Math.round(h / 2));
+        this.fgBox.add(createTitleText(text, textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
+        for (const child of node.children){
+            this.drawForegroundNode(child);
+        }
+    }
+    reset(refresh = false) {
+        this.remove(this.bgBox, this.fgBox);
+        this.bgBox.destory();
+        if (this.renderCache.state) {
+            this.fgBox.destory();
+            this.bgBox.add(new Bitmap({
+                bitmap: this.renderCache.canvas,
+                dpi: this.render.options.devicePixelRatio
+            }));
+        } else {
+            for (const node of this.layoutNodes){
+                this.drawBackgroundNode(node);
+            }
+            if (!this.fgBox.elements.length || refresh) {
+                this.render.ctx.textBaseline = 'middle';
+                this.fgBox.destory();
+                for (const node of this.layoutNodes){
+                    this.drawForegroundNode(node);
+                }
+            } else {
+                this.fgBox = this.fgBox.clone();
+            }
+        }
+        this.add(this.bgBox, this.fgBox);
+    }
+    get api() {
+        return {
+            zoom: (node)=>{
+                if (!node) {
+                    return;
+                }
+                this.event.emit(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, node);
+            }
+        };
+    }
+}
+function createTreemap() {
+    let treemap = null;
+    let root = null;
+    let installed = false;
+    const uses = [];
+    const context = {
         init,
         dispose,
+        setOptions,
         resize,
-        setOptions
+        use,
+        zoom
     };
     function init(el) {
-        component = new domEvent.Component(graphic, el);
-        domEvent$1 = new domEvent.DOMEvent(component);
+        treemap = new TreemapLayout(el);
         root = el;
         root.style.position = 'relative';
         if (!installed) {
-            plugins.forEach((plugin)=>component?.pluginDriver.use(plugin));
+            register(TreemapEvent)(context, treemap);
             installed = true;
-            component.pluginDriver.runHook('onLoad', ctx, domEvent$1);
         }
-        domEvent$1.on('__exposed__', (type, args)=>exposedEvent.emit(type, args));
     }
     function dispose() {
-        if (root && component && domEvent$1) {
-            domEvent$1.destory();
-            component.destory();
+        if (root && treemap) {
+            treemap.destory();
             root.removeChild(root.firstChild);
-            for(const evt in exposedEvent.eventCollections){
-                exposedEvent.off(evt);
-            }
-            component.pluginDriver.runHook('onDispose');
             root = null;
-            component = null;
-            domEvent$1 = null;
+            treemap = null;
         }
     }
     function resize() {
-        if (!component || !root) {
+        if (!treemap || !root) {
             return;
         }
+        treemap.renderCache.destroy();
+        treemap.fontCache.destroy();
         const { width, height } = root.getBoundingClientRect();
-        component.render.initOptions({
+        treemap.render.initOptions({
             height,
             width,
             devicePixelRatio: window.devicePixelRatio
         });
-        component.render.canvas.style.position = 'absolute';
-        if (domEvent$1) {
-            component.pluginDriver.runHook('onResize', domEvent$1);
-        }
-        component.cleanup();
-        component.draw();
+        treemap.render.canvas.style.position = 'absolute';
+        treemap.event.emit(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP);
+        treemap.highlight.render.initOptions({
+            height,
+            width,
+            devicePixelRatio: window.devicePixelRatio
+        });
+        treemap.highlight.reset();
+        treemap.highlight.init();
+        resetLayout(treemap, width, height);
+        treemap.update();
+        treemap.renderCache.flush(treemap, treemap.matrix);
     }
     function setOptions(options) {
-        domEvent.assertExists(component, domEvent.logger, 'Treemap not initialized. Please call `init()` before setOptions.');
-        component.data = domEvent.bindParentForModule(options.data);
+        if (!treemap) {
+            throw new Error(log.error('Treemap not initialized'));
+        }
+        treemap.data = bindParentForModule(options.data || []);
+        for (const use of uses){
+            use(treemap);
+        }
         resize();
     }
-    const base = domEvent.mixin(ctx, [
-        {
-            name: 'on',
-            fn: ()=>exposedEvent.bindWithContext(api)
-        },
-        {
-            name: 'off',
-            fn: ()=>exposedEvent.off.bind(exposedEvent)
-        }
-    ]);
-    return base;
-}
-
-exports.DefaultMap = domEvent.DefaultMap;
-exports.applyCanvasTransform = domEvent.applyCanvasTransform;
-exports.c2m = domEvent.c2m;
-exports.createCanvasElement = domEvent.createCanvasElement;
-exports.createRoundBlock = domEvent.createRoundBlock;
-exports.createTitleText = domEvent.createTitleText;
-exports.definePlugin = domEvent.definePlugin;
-exports.findRelativeNode = domEvent.findRelativeNode;
-exports.findRelativeNodeById = domEvent.findRelativeNodeById;
-exports.flattenModule = domEvent.flatten;
-exports.getNodeDepth = domEvent.getNodeDepth;
-exports.hashCode = domEvent.hashCode;
-exports.isClickEvent = domEvent.isClickEvent;
-exports.isContextMenuEvent = domEvent.isContextMenuEvent;
-exports.isMacOS = domEvent.isMacOS;
-exports.isMouseEvent = domEvent.isMouseEvent;
-exports.isScrollWheelOrRightButtonOnMouseupAndDown = domEvent.isScrollWheelOrRightButtonOnMouseupAndDown;
-exports.isWheelEvent = domEvent.isWheelEvent;
-exports.mixin = domEvent.mixin;
-exports.mixinWithParams = domEvent.mixinWithParams;
-exports.noop = domEvent.noop;
-exports.perferNumeric = domEvent.perferNumeric;
-exports.prettyStrJoin = domEvent.prettyStrJoin;
-exports.raf = domEvent.raf;
-exports.smoothFrame = domEvent.smoothFrame;
-exports.sortChildrenByKey = domEvent.sortChildrenByKey;
-exports.stackMatrixTransform = domEvent.stackMatrixTransform;
-exports.stackMatrixTransformWithGraphAndLayer = domEvent.stackMatrixTransformWithGraphAndLayer;
-exports.typedForIn = domEvent.typedForIn;
-exports.visit = domEvent.visit;
+    function use(key, register) {
+        switch(key){
+            case 'decorator':
+                uses.push((treemap)=>register(treemap));
+                break;
+        }
+    }
+    function zoom(id) {
+        if (!treemap) {
+            throw new Error(log.error("treemap don't init."));
+        }
+        const node = findRelativeNodeById(id, treemap.layoutNodes);
+        if (node) {
+            treemap.api.zoom(node);
+        }
+    }
+    return context;
+}
+
+const defaultLayoutOptions = {
+    titleAreaHeight: {
+        max: 60,
+        min: 30
+    },
+    rectGap: 5,
+    rectBorderRadius: 0.5,
+    rectBorderWidth: 1.5
+};
+const defaultFontOptions = {
+    color: '#000',
+    fontSize: {
+        max: 70,
+        min: 0
+    },
+    fontFamily: 'sans-serif'
+};
+function presetDecorator(app) {
+    Object.assign(app.decorator, {
+        layout: defaultLayoutOptions,
+        font: defaultFontOptions,
+        color: {
+            mappings: evaluateColorMappings(app.data)
+        }
+    });
+}
+function evaluateColorMappings(data) {
+    const colorMappings = {};
+    const hashToHue = (id)=>{
+        const hash = Math.abs(hashCode(id));
+        return hash % 360;
+    };
+    const lightScale = (depth)=>50 - depth * 5;
+    const baseSaturation = 80;
+    const siblingHueShift = 30;
+    const rc = 0.2126;
+    const gc = 0.7152;
+    const bc = 0.0722;
+    const hslToRgb = (h, s, l)=>{
+        const a = s * Math.min(l, 1 - l);
+        const f = (n)=>{
+            const k = (n + h / 30) % 12;
+            return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+        };
+        return {
+            r: f(0),
+            g: f(8),
+            b: f(4)
+        };
+    };
+    const calculateLuminance = (r, g, b)=>{
+        return rc * r + gc * g + bc * b;
+    };
+    const calculateColor = (module, depth, parentHue, siblingIndex, totalSiblings)=>{
+        const nodeHue = hashToHue(module.id);
+        const hue = parentHue !== null ? (parentHue + siblingHueShift * siblingIndex / totalSiblings) % 360 : nodeHue;
+        const lightness = lightScale(depth);
+        const hslColor = {
+            h: hue,
+            s: baseSaturation,
+            l: lightness / 100
+        };
+        const { r, g, b } = hslToRgb(hslColor.h, hslColor.s / 100, hslColor.l);
+        const luminance = calculateLuminance(r, g, b);
+        if (luminance < 0.6) {
+            hslColor.l += 0.2;
+        } else if (luminance > 0.8) {
+            hslColor.l -= 0.1;
+        }
+        hslColor.l *= 100;
+        colorMappings[module.id] = {
+            mode: 'hsl',
+            desc: hslColor
+        };
+        if (module.groups && Array.isArray(module.groups)) {
+            const totalChildren = module.groups.length;
+            for(let i = 0; i < totalChildren; i++){
+                const child = module.groups[i];
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                calculateColor(child, depth + 1, hue, i, totalChildren);
+            }
+        }
+    };
+    for(let i = 0; i < data.length; i++){
+        const module = data[i];
+        calculateColor(module, 0, null, i, data.length);
+    }
+    return colorMappings;
+}
+
+exports.TreemapLayout = TreemapLayout;
+exports.c2m = c2m;
 exports.createTreemap = createTreemap;
+exports.defaultFontOptions = defaultFontOptions;
+exports.defaultLayoutOptions = defaultLayoutOptions;
+exports.findRelativeNode = findRelativeNode;
+exports.findRelativeNodeById = findRelativeNodeById;
+exports.flattenModule = flatten;
+exports.getNodeDepth = getNodeDepth;
+exports.presetDecorator = presetDecorator;
+exports.sortChildrenByKey = sortChildrenByKey;
+exports.visit = visit;