squarified 0.6.0 → 0.6.2

package/dist/index.mjs

@@ -1,1974 +1,82 @@
-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;
-    }
-}
-
-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;
-    }
-    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);
-        }
-    };
-}
-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;
-        }
-    });
-}
+import { l as logger, m as mixin, E as Event, a as assertExists, b as bindParentForModule, C as Component, D as DOMEvent } from './dom-event-DrYYfglv.mjs';
+export { G as DefaultMap, x as applyCanvasTransform, c as c2m, w as createCanvasElement, r as createRoundBlock, t as createTitleText, h as definePlugin, f as findRelativeNode, d as findRelativeNodeById, e as flattenModule, g as getNodeDepth, o as hashCode, i as isClickEvent, j as isContextMenuEvent, k as isMouseEvent, F as isScrollWheelOrRightButtonOnMouseupAndDown, n as isWheelEvent, q as noop, p as perferNumeric, u as raf, B as smoothFrame, s as sortChildrenByKey, z as stackMatrixTransform, A as stackMatrixTransformWithGraphAndLayer, y as typedForIn, v as visit } from './dom-event-DrYYfglv.mjs';
 
-// 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;
+function createTreemap(// @ts-expect-error todo fix
+options) {
+    const { plugins = [], graphic = {} } = options || {};
     let root = null;
     let installed = false;
-    const uses = [];
-    const context = {
+    let domEvent = null;
+    let component = null;
+    const exposedEvent = new Event();
+    if (!Array.isArray(plugins)) {
+        logger.panic('Plugins should be an array');
+    }
+    const ctx = {
         init,
         dispose,
-        setOptions,
         resize,
-        use,
-        zoom
+        setOptions
     };
     function init(el) {
-        treemap = new TreemapLayout(el);
+        component = new Component(graphic, el);
+        domEvent = new DOMEvent(component);
         root = el;
         root.style.position = 'relative';
         if (!installed) {
-            register(TreemapEvent)(context, treemap);
+            plugins.forEach((plugin)=>component?.pluginDriver.use(plugin));
             installed = true;
+            component.pluginDriver.runHook('onLoad', ctx, domEvent);
         }
+        domEvent.on('__exposed__', (type, args)=>exposedEvent.emit(type, args));
     }
     function dispose() {
-        if (root && treemap) {
-            treemap.destory();
+        if (root && component && domEvent) {
+            domEvent.destory();
+            component.destory();
             root.removeChild(root.firstChild);
+            for(const evt in exposedEvent.eventCollections){
+                exposedEvent.off(evt);
+            }
+            component.pluginDriver.runHook('onDispose');
             root = null;
-            treemap = null;
+            component = null;
+            domEvent = null;
         }
     }
     function resize() {
-        if (!treemap || !root) {
+        if (!component || !root) {
             return;
         }
-        treemap.renderCache.destroy();
-        treemap.fontCache.destroy();
         const { width, height } = root.getBoundingClientRect();
-        treemap.render.initOptions({
+        component.render.initOptions({
             height,
             width,
             devicePixelRatio: window.devicePixelRatio
         });
-        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);
+        component.render.canvas.style.position = 'absolute';
+        if (domEvent) {
+            component.pluginDriver.runHook('onResize', domEvent);
+        }
+        component.cleanup();
+        component.draw();
     }
     function setOptions(options) {
-        if (!treemap) {
-            throw new Error(log.error('Treemap not initialized'));
-        }
-        treemap.data = bindParentForModule(options.data || []);
-        for (const use of uses){
-            use(treemap);
-        }
+        assertExists(component, logger, 'Treemap not initialized. Please call `init()` before setOptions.');
+        component.data = bindParentForModule(options.data);
         resize();
     }
-    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);
-            }
+    const base = mixin(ctx, [
+        {
+            name: 'on',
+            fn: ()=>exposedEvent.on.bind(exposedEvent)
+        },
+        {
+            name: 'off',
+            fn: ()=>exposedEvent.off.bind(exposedEvent)
         }
-    };
-    for(let i = 0; i < data.length; i++){
-        const module = data[i];
-        calculateColor(module, 0, null, i, data.length);
-    }
-    return colorMappings;
+    ]);
+    return base;
 }
 
-export { TreemapLayout, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, visit };
+export { createTreemap, mixin };