squarified 0.3.5 → 0.3.7

package/dist/index.js

@@ -1,1697 +1,1976 @@
 'use strict';
 
-var __defProp$c = Object.defineProperty;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEG_TO_RAD = Math.PI / 180;
 class Matrix2D {
-  constructor(loc = {}) {
-    __publicField$c(this, "a");
-    __publicField$c(this, "b");
-    __publicField$c(this, "c");
-    __publicField$c(this, "d");
-    __publicField$c(this, "e");
-    __publicField$c(this, "f");
-    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;
-  }
+    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;
+    }
 }
 
-var __defProp$b = Object.defineProperty;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
 const SELF_ID = {
-  id: 0,
-  get() {
-    return this.id++;
-  }
+    id: 0,
+    get () {
+        return this.id++;
+    }
 };
-var DisplayType = /* @__PURE__ */ ((DisplayType2) => {
-  DisplayType2["Graph"] = "Graph";
-  DisplayType2["Box"] = "Box";
-  DisplayType2["Text"] = "Text";
-  DisplayType2["RoundRect"] = "RoundRect";
-  DisplayType2["Bitmap"] = "Bitmap";
-  return DisplayType2;
-})(DisplayType || {});
+var DisplayType = /*#__PURE__*/ function(DisplayType) {
+    DisplayType["Graph"] = "Graph";
+    DisplayType["Box"] = "Box";
+    DisplayType["Text"] = "Text";
+    DisplayType["RoundRect"] = "RoundRect";
+    DisplayType["Bitmap"] = "Bitmap";
+    return DisplayType;
+}({});
 class Display {
-  constructor() {
-    __publicField$b(this, "parent");
-    __publicField$b(this, "id");
-    __publicField$b(this, "matrix");
-    this.parent = null;
-    this.id = SELF_ID.get();
-    this.matrix = new Matrix2D();
-  }
-  destory() {
-  }
+    parent;
+    id;
+    matrix;
+    constructor(){
+        this.parent = null;
+        this.id = SELF_ID.get();
+        this.matrix = new Matrix2D();
+    }
+    destory() {
+    //
+    }
 }
 const ASSIGN_MAPPINGS = {
-  fillStyle: 1,
-  strokeStyle: 2,
-  font: 4,
-  lineWidth: 8,
-  textAlign: 16,
-  textBaseline: 32
+    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 = 0;
+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) {
-      this.mods.push({ mod: ["drawImage", args], type: CALL_MAPPINGS_MODE });
-    }
-  };
+    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 {
-  constructor(options = {}) {
-    super();
-    __publicField$b(this, "width");
-    __publicField$b(this, "height");
-    __publicField$b(this, "x");
-    __publicField$b(this, "y");
-    __publicField$b(this, "scaleX");
-    __publicField$b(this, "scaleY");
-    __publicField$b(this, "rotation");
-    __publicField$b(this, "skewX");
-    __publicField$b(this, "skewY");
-    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;
-  }
-}
+    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 {
-  constructor(options = {}) {
-    super(options);
-    __publicField$b(this, "instruction");
-    __publicField$b(this, "__options__");
-    __publicField$b(this, "__widget__");
-    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) {
-        ctx[direct] = args[0];
-        continue;
-      }
-      ctx[direct].apply(ctx, ...args);
-    }
-  }
-  get __instanceOf__() {
-    return "Graph" /* Graph */;
-  }
+    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;
+    return display.__instanceOf__ === DisplayType.Graph;
 }
 function isBox(display) {
-  return display.__instanceOf__ === DisplayType.Box;
+    return display.__instanceOf__ === DisplayType.Box;
 }
 function isRoundRect(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.RoundRect;
+    return isGraph(display) && display.__shape__ === DisplayType.RoundRect;
 }
 function isText(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.Text;
+    return isGraph(display) && display.__shape__ === DisplayType.Text;
 }
 function isBitmap(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
+    return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
 }
 const asserts = {
-  isGraph,
-  isBox,
-  isText,
-  isRoundRect,
-  isBitmap
+    isGraph,
+    isBox,
+    isText,
+    isRoundRect,
+    isBitmap
 };
 
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
 class C extends Display {
-  constructor() {
-    super();
-    __publicField$a(this, "elements");
-    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;
-  }
+    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 {
-  constructor() {
-    super();
-    __publicField$a(this, "elements");
-    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();
+    elements;
+    constructor(){
+        super();
+        this.elements = [];
+    }
+    add(...elements) {
         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;
-  }
+        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;
+    }
 }
 
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Bitmap extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$9(this, "bitmap");
-    __publicField$9(this, "style");
-    __publicField$9(this, "dpi");
-    this.bitmap = options.bitmap || null;
-    this.style = options.style || /* @__PURE__ */ 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;
-  }
+    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}%)`;
+    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})`;
+    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);
+    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 descibe = {
+        mode: primitive.mode,
+        desc: {
+            ...primitive.desc,
+            a: opacity
+        }
+    };
+    return decodeColor(descibe);
 }
 const runtime = {
-  evaluateFillStyle
+    evaluateFillStyle
 };
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
 class RoundRect extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$8(this, "style");
-    this.style = options.style || /* @__PURE__ */ 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__ });
-  }
+    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__
+        });
+    }
 }
 
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Text extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$7(this, "text");
-    __publicField$7(this, "style");
-    this.text = options.text || "";
-    this.style = options.style || /* @__PURE__ */ 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;
-  }
+    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);
+    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;
+    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 };
+    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);
-  }
+    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);
+    }
 };
 
-var __defProp$6 = Object.defineProperty;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Event {
-  constructor() {
-    __publicField$6(this, "eventCollections");
-    this.eventCollections = /* @__PURE__ */ 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;
+    eventCollections;
+    constructor(){
+        this.eventCollections = Object.create(null);
     }
-    const handlers = this.eventCollections[evt];
-    if (handlers.length) {
-      handlers.forEach((d) => {
-        if (d.silent) {
-          return;
+    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);
         }
-        d.handler.call(d.ctx, ...args);
-      });
     }
-  }
-  bindWithContext(c) {
-    return (evt, handler) => this.on(evt, handler, c);
-  }
+    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;
+    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;
+    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 } });
+    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 }
-  });
+    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");
+    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);
+    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
+    methods.forEach(({ name, fn })=>{
+        Object.defineProperty(app, name, {
+            value: fn(app),
+            writable: false
+        });
     });
-  });
 }
 function prettyStrJoin(...s) {
-  return s.join("");
+    return s.join('');
 }
 
-const NAME_SPACE = "etoile";
+const NAME_SPACE = 'etoile';
 const log = {
-  error: (message) => {
-    return `[${NAME_SPACE}] ${message}`;
-  }
+    error: (message)=>{
+        return `[${NAME_SPACE}] ${message}`;
+    }
 };
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
 function writeBoundingRectForCanvas(c, w, h, dpr) {
-  c.width = w * dpr;
-  c.height = h * dpr;
-  c.style.cssText = `width: ${w}px; height: ${h}px`;
+    c.width = w * dpr;
+    c.height = h * dpr;
+    c.style.cssText = `width: ${w}px; height: ${h}px`;
 }
 class Canvas {
-  constructor(options) {
-    __publicField$5(this, "canvas");
-    __publicField$5(this, "ctx");
-    this.canvas = createCanvasElement();
-    this.setOptions(options);
-    this.ctx = this.canvas.getContext("2d");
-  }
-  setOptions(options) {
-    writeBoundingRectForCanvas(this.canvas, options.width, options.height, options.devicePixelRatio);
-  }
+    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 {
-  constructor(to, options) {
-    __publicField$5(this, "options");
-    __publicField$5(this, "container");
-    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() {
-  }
+    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() {}
 }
 
-var __defProp$4 = Object.defineProperty;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+// 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();
+    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 {
-  constructor(to, renderOptions = {}) {
-    super();
-    __publicField$4(this, "render");
-    __publicField$4(this, "to");
-    __publicField$4(this, "event");
-    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 });
-  }
+    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
+        });
+    }
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class RenderCache extends Canvas {
-  constructor(opts) {
-    super(opts);
-    __publicField$3(this, "key");
-    __publicField$3(this, "$memory");
-    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;
-    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;
-  }
+    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 {
-  constructor() {
-    __publicField$3(this, "key");
-    __publicField$3(this, "fonts");
-    __publicField$3(this, "ellispsis");
-    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__) {
-            const node = graph.__widget__.node;
-            delete this.fonts[node.id];
-            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];
-  }
+    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];
+    }
 }
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
-const DOM_EVENTS = ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "wheel"];
+// 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)
-  ];
+    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);
+    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: (evt.clientX - boundingClientRect.left - e - translateX) / a,
-      y: (evt.clientY - boundingClientRect.top - f - translateY) / d
+        x: 0,
+        y: 0
     };
-  }
-  return { x: 0, y: 0 };
 }
 function createEffectRun(c) {
-  return (fn) => {
-    const effect = () => {
-      const done = fn();
-      if (!done) {
-        c.animationFrameID = raf(effect);
-      }
+    return (fn)=>{
+        const effect = ()=>{
+            const done = fn();
+            if (!done) {
+                c.animationFrameID = raf(effect);
+            }
+        };
+        if (!c.animationFrameID) {
+            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;
-    }
-  };
+    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 };
+    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);
-    dom.emit(evt, { native: e, loc: { x, y } });
-  };
-  el.addEventListener(evt, handler);
-  return handler;
+    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 {
-  constructor(el) {
-    super();
-    __publicField$2(this, "el");
-    __publicField$2(this, "events");
-    __publicField$2(this, "matrix");
-    this.el = el;
-    this.matrix = new Matrix2D();
-    this.events = DOM_EVENTS.map((evt) => bindDOMEvent(this.el, evt, this));
-  }
+    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;
+    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;
-      }
-      const comparison = ("" + v).localeCompare("" + v2);
-      if (comparison !== 0) {
-        return comparison;
-      }
-    }
-    return 0;
-  });
+    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;
+    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));
+    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;
+    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;
-  });
+    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;
+    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;
+    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;
+    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;
-    }
-  });
+    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;
-    }
-  });
+    return visit(layoutNodes, (node)=>{
+        if (node.node.id === id) {
+            return true;
+        }
+    });
 }
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+// 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
-  };
+    return {
+        isDragging: false,
+        isWheeling: false,
+        isZooming: false,
+        currentNode: null,
+        forceDestroy: false,
+        dragX: 0,
+        dragY: 0
+    };
 }
 const INTERNAL_EVENT_MAPPINGS = {
-  ON_ZOOM: 1,
-  ON_CLEANUP: 3
+    ON_ZOOM: 0o1,
+    ON_CLEANUP: 0o3
 };
 const ANIMATION_DURATION = 300;
-const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
+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 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();
-  }
+    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 {
-  constructor(app, treemap) {
-    super(treemap.render.canvas);
-    __publicField$1(this, "exposedEvent");
-    __publicField$1(this, "state");
-    __publicField$1(this, "zoom");
-    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) => {
-        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);
-    if (typeof this[fn] === "function") {
-      this[fn](ctx, metadata, node);
-    }
-    if (ctx.type === "mousemove") {
-      if (this.state.isDragging) {
-        this.exposedEvent.silent("click");
-      } else {
-        this.exposedEvent.active("click");
-      }
-    }
-    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 {
-      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;
+    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();
-        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;
-    const wheelDelta = native.wheelDelta;
-    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);
-      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("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);
-  }
+    }
+    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;
+    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));
+    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;
+    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");
+    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);
-  };
+    return (app, treemap)=>{
+        new Mod(app, treemap);
+    };
 }
 
 function squarify(data, rect, layoutDecorator) {
-  const result = [];
-  if (!data.length) {
+    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;
-  }
-  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, rect2) => {
-    while (start < data.length) {
-      let totalWeight = 0;
-      for (let i = start; i < data.length; i++) {
-        totalWeight += data[i].weight;
-      }
-      const shortestSide = Math.min(rect2.w, rect2.h);
-      const aspectRatio = rect2.w * rect2.h / totalWeight;
-      let end = start;
-      let areaInRun = 0;
-      let oldWorst = 0;
-      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] = rect2.w >= rect2.h ? [rect2.x, rect2.y + lower, splited, upper - lower] : [rect2.x + lower, rect2.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 (rect2.w >= rect2.h) {
-        rect2.x += splited;
-        rect2.w -= splited;
-      } else {
-        rect2.y += splited;
-        rect2.h -= splited;
-      }
-    }
-  };
-  recursion(0, rect);
-  return result;
 }
 
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 function measureTextWidth(c, text) {
-  return c.measureText(text).width;
+    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 = /* @__PURE__ */ 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 width2 = metrics.width;
-      const height2 = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-      cache.set(current, { width: width2, height: height2 });
-    }
-    const { width, height } = cache.get(current);
-    if (width > desiredW || height > desiredH) {
-      max = current;
-    } else {
-      min = current;
+    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);
+    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 };
+    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);
+    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";
-  }
+    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 {
-  constructor(...args) {
-    super(...args);
-    __publicField(this, "data");
-    __publicField(this, "layoutNodes");
-    __publicField(this, "decorator");
-    __publicField(this, "bgBox");
-    __publicField(this, "fgBox");
-    __publicField(this, "highlight");
-    __publicField(this, "renderCache");
-    __publicField(this, "fontCache");
-    this.data = [];
-    this.layoutNodes = [];
-    this.bgBox = new Box();
-    this.fgBox = new Box();
-    this.decorator = /* @__PURE__ */ 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}`;
-    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;
+    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;
         }
-        this.event.emit(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, node);
-      }
-    };
-  }
+        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,
-    use,
-    zoom
-  };
-  function init(el) {
-    treemap = new TreemapLayout(el);
-    root = el;
-    root.style.position = "relative";
-    if (!installed) {
-      register(TreemapEvent)(context, treemap);
-      installed = true;
-    }
-  }
-  function dispose() {
-    if (root && treemap) {
-      treemap.destory();
-      root.removeChild(root.firstChild);
-      root = null;
-      treemap = null;
-    }
-  }
-  function resize() {
-    if (!treemap || !root) {
-      return;
-    }
-    treemap.renderCache.destroy();
-    treemap.fontCache.destroy();
-    const { width, height } = root.getBoundingClientRect();
-    treemap.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);
-  }
-  function setOptions(options) {
-    if (!treemap) {
-      throw new Error(log.error("Treemap not initialized"));
-    }
-    treemap.data = bindParentForModule(options.data || []);
-    for (const use2 of uses) {
-      use2(treemap);
-    }
-    resize();
-  }
-  function use(key, register2) {
-    switch (key) {
-      case "decorator":
-        uses.push((treemap2) => register2(treemap2));
-        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;
+    let treemap = null;
+    let root = null;
+    let installed = false;
+    const uses = [];
+    const context = {
+        init,
+        dispose,
+        setOptions,
+        resize,
+        use,
+        zoom
+    };
+    function init(el) {
+        treemap = new TreemapLayout(el);
+        root = el;
+        root.style.position = 'relative';
+        if (!installed) {
+            register(TreemapEvent)(context, treemap);
+            installed = true;
+        }
+    }
+    function dispose() {
+        if (root && treemap) {
+            treemap.destory();
+            root.removeChild(root.firstChild);
+            root = null;
+            treemap = null;
+        }
+    }
+    function resize() {
+        if (!treemap || !root) {
+            return;
+        }
+        treemap.renderCache.destroy();
+        treemap.fontCache.destroy();
+        const { width, height } = root.getBoundingClientRect();
+        treemap.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);
+    }
+    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);
+        }
+        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
+    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"
+    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) }
-  });
+    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);
+    const colorMappings = {};
+    const hashToHue = (id)=>{
+        const hash = Math.abs(hashCode(id));
+        return hash % 360;
     };
-    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 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 { 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
+    const calculateLuminance = (r, g, b)=>{
+        return rc * r + gc * g + bc * b;
     };
-    if (module.groups && Array.isArray(module.groups)) {
-      const totalChildren = module.groups.length;
-      for (let i = 0; i < totalChildren; i++) {
-        const child = module.groups[i];
-        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;
+    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;