squarified 0.1.1 → 0.2.0

package/dist/index.js

@@ -1,1441 +1,1602 @@
 'use strict';
 
-var _computedKey;
-_computedKey = Symbol.iterator;
-class Iter {
-    keys;
-    data;
-    constructor(data){
-        this.data = data;
-        this.keys = Object.keys(data);
-    }
-    // dprint-ignore
-    *[_computedKey]() {
-        for(let i = 0; i < this.keys.length; i++){
-            yield {
-                key: this.keys[i],
-                value: this.data[this.keys[i]],
-                index: i,
-                peek: ()=>this.keys[i + 1]
-            };
-        }
-    }
-}
-// 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;
-}
-
+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);
 const DEG_TO_RAD = Math.PI / 180;
 class Matrix2D {
-    a;
-    b;
-    c;
-    d;
-    e;
-    f;
-    constructor(loc = {}){
-        this.a = loc.a || 1;
-        this.b = loc.b || 0;
-        this.c = loc.c || 0;
-        this.d = loc.d || 1;
-        this.e = loc.e || 0;
-        this.f = loc.f || 0;
-    }
-    create(loc) {
-        for (const { key, value } of new Iter(loc)){
-            if (Object.hasOwnProperty.call(this, key)) {
-                this[key] = value;
-            }
-        }
-        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;
-    }
+  constructor(loc = {}) {
+    __publicField$a(this, "a");
+    __publicField$a(this, "b");
+    __publicField$a(this, "c");
+    __publicField$a(this, "d");
+    __publicField$a(this, "e");
+    __publicField$a(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;
+  }
 }
 
+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);
 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["Rect"] = "Rect";
+  DisplayType2["Text"] = "Text";
+  DisplayType2["Layer"] = "Layer";
+  return DisplayType2;
+})(DisplayType || {});
 class Display {
-    parent;
-    id;
-    matrix;
-    constructor(){
-        this.parent = null;
-        this.id = SELF_ID.get();
-        this.matrix = new Matrix2D();
-    }
-    destory() {
-    //
-    }
+  constructor() {
+    __publicField$9(this, "parent");
+    __publicField$9(this, "id");
+    __publicField$9(this, "matrix");
+    this.parent = null;
+    this.id = SELF_ID.get();
+    this.matrix = new Matrix2D();
+  }
+  destory() {
+  }
 }
 const ASSIGN_MAPPINGS = {
-    fillStyle: !0,
-    strokeStyle: !0,
-    font: !0,
-    lineWidth: !0,
-    textAlign: !0,
-    textBaseline: !0
+  fillStyle: true,
+  strokeStyle: true,
+  font: true,
+  lineWidth: true,
+  textAlign: true,
+  textBaseline: true
 };
 function createInstruction() {
-    return {
-        mods: [],
-        fillStyle (...args) {
-            this.mods.push([
-                'fillStyle',
-                args
-            ]);
-        },
-        fillRect (...args) {
-            this.mods.push([
-                'fillRect',
-                args
-            ]);
-        },
-        strokeStyle (...args) {
-            this.mods.push([
-                'strokeStyle',
-                args
-            ]);
-        },
-        lineWidth (...args) {
-            this.mods.push([
-                'lineWidth',
-                args
-            ]);
-        },
-        strokeRect (...args) {
-            this.mods.push([
-                'strokeRect',
-                args
-            ]);
-        },
-        fillText (...args) {
-            this.mods.push([
-                'fillText',
-                args
-            ]);
-        },
-        font (...args) {
-            this.mods.push([
-                'font',
-                args
-            ]);
-        },
-        textBaseline (...args) {
-            this.mods.push([
-                'textBaseline',
-                args
-            ]);
-        },
-        textAlign (...args) {
-            this.mods.push([
-                'textAlign',
-                args
-            ]);
-        }
-    };
+  return {
+    mods: [],
+    fillStyle(...args) {
+      this.mods.push(["fillStyle", args]);
+    },
+    fillRect(...args) {
+      this.mods.push(["fillRect", args]);
+    },
+    strokeStyle(...args) {
+      this.mods.push(["strokeStyle", args]);
+    },
+    lineWidth(...args) {
+      this.mods.push(["lineWidth", args]);
+    },
+    strokeRect(...args) {
+      this.mods.push(["strokeRect", args]);
+    },
+    fillText(...args) {
+      this.mods.push(["fillText", args]);
+    },
+    font(...args) {
+      this.mods.push(["font", args]);
+    },
+    textBaseline(...args) {
+      this.mods.push(["textBaseline", args]);
+    },
+    textAlign(...args) {
+      this.mods.push(["textAlign", args]);
+    }
+  };
 }
 class S extends Display {
-    width;
-    height;
-    x;
-    y;
-    scaleX;
-    scaleY;
-    rotation;
-    skewX;
-    skewY;
-    constructor(options = {}){
-        super();
-        this.width = options.width || 0;
-        this.height = options.height || 0;
-        this.x = options.x || 0;
-        this.y = options.y || 0;
-        this.scaleX = options.scaleX || 1;
-        this.scaleY = options.scaleY || 1;
-        this.rotation = options.rotation || 0;
-        this.skewX = options.skewX || 0;
-        this.skewY = options.skewY || 0;
-    }
+  constructor(options = {}) {
+    super();
+    __publicField$9(this, "width");
+    __publicField$9(this, "height");
+    __publicField$9(this, "x");
+    __publicField$9(this, "y");
+    __publicField$9(this, "scaleX");
+    __publicField$9(this, "scaleY");
+    __publicField$9(this, "rotation");
+    __publicField$9(this, "skewX");
+    __publicField$9(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;
+  }
 }
 class Graph extends S {
-    instruction;
-    constructor(options = {}){
-        super(options);
-        this.instruction = createInstruction();
-    }
-    render(ctx) {
-        this.create();
-        this.instruction.mods.forEach((mod)=>{
-            const direct = mod[0];
-            if (direct in ASSIGN_MAPPINGS) {
-                // @ts-expect-error
-                ctx[direct] = mod[1];
-                return;
-            }
-            // @ts-expect-error
-            ctx[direct].apply(ctx, ...mod.slice(1));
-        });
-    }
+  constructor(options = {}) {
+    super(options);
+    __publicField$9(this, "instruction");
+    __publicField$9(this, "__options__");
+    this.instruction = createInstruction();
+    this.__options__ = options;
+  }
+  render(ctx) {
+    this.create();
+    const cap = this.instruction.mods.length;
+    for (let i = 0; i < cap; i++) {
+      const mod = this.instruction.mods[i];
+      const [direct, ...args] = mod;
+      if (direct in ASSIGN_MAPPINGS) {
+        ctx[direct] = args[0];
+        continue;
+      }
+      ctx[direct].apply(ctx, ...args);
+    }
+  }
+  get __instanceOf__() {
+    return "Graph" /* Graph */;
+  }
 }
 
-class Box extends Display {
-    elements;
-    constructor(){
-        super();
-        this.elements = [];
-    }
-    add(...elements) {
-        const cap = elements.length;
-        for(let i = 0; i < cap; i++){
-            const element = elements[i];
-            if (element.parent) ;
-            this.elements.push(element);
-            element.parent = this;
+function isGraph(display) {
+  return display.__instanceOf__ === DisplayType.Graph;
+}
+function isBox(display) {
+  return display.__instanceOf__ === DisplayType.Box;
+}
+function isRect(display) {
+  return isGraph(display) && display.__shape__ === DisplayType.Rect;
+}
+function isText(display) {
+  return isGraph(display) && display.__shape__ === DisplayType.Text;
+}
+function isLayer(display) {
+  return display.__instanceOf__ === DisplayType.Layer;
+}
+const asserts = {
+  isGraph,
+  isBox,
+  isRect,
+  isText,
+  isLayer
+};
+
+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, key + "" , value);
+class C extends Display {
+  constructor() {
+    super();
+    __publicField$8(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;
         }
+      }
     }
-    remove(...elements) {
+  }
+  destory() {
+    this.elements.forEach((element) => element.parent = null);
+    this.elements.length = 0;
+  }
+}
+class Box extends C {
+  constructor() {
+    super();
+    __publicField$8(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 traverse = (elements, parent) => {
+        const els = [];
         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;
-                }
-            }
+        for (let i = 0; i < cap; i++) {
+          const element = elements[i];
+          if (asserts.isBox(element)) {
+            const box2 = new Box();
+            box2.parent = parent;
+            box2.add(...traverse(element.elements, box2));
+            els.push(box2);
+          } else if (asserts.isGraph(element)) {
+            const el = element.clone();
+            el.parent = parent;
+            els.push(el);
+          }
         }
+        return els;
+      };
+      box.add(...traverse(this.elements, box));
     }
-    destory() {
-        this.elements.forEach((element)=>element.parent = null);
-        this.elements.length = 0;
-    }
+    return box;
+  }
+}
+
+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);
+function writeBoundingRectForCanvas(c, w, h, dpr) {
+  c.width = w * dpr;
+  c.height = h * dpr;
+  c.style.cssText = `width: ${w}px; height: ${h}px`;
+}
+class Canvas {
+  constructor(options) {
+    __publicField$7(this, "canvas");
+    __publicField$7(this, "ctx");
+    this.canvas = createCanvasElement();
+    writeBoundingRectForCanvas(this.canvas, options.width, options.height, options.devicePixelRatio);
+    this.ctx = this.canvas.getContext("2d");
+  }
+  get c() {
+    return { canvas: this.canvas, ctx: this.ctx };
+  }
+}
+class Render {
+  constructor(to, options) {
+    __publicField$7(this, "c");
+    __publicField$7(this, "options");
+    this.c = new Canvas(options);
+    this.options = options;
+    this.initOptions(options);
+    !options.shaow && to.appendChild(this.canvas);
+  }
+  clear(width, height) {
+    this.ctx.clearRect(0, 0, width, height);
+  }
+  get canvas() {
+    return this.c.c.canvas;
+  }
+  get ctx() {
+    return this.c.c.ctx;
+  }
+  initOptions(userOptions = {}) {
+    Object.assign(this.options, userOptions);
+    writeBoundingRectForCanvas(this.canvas, this.options.width, this.options.height, this.options.devicePixelRatio);
+  }
+  update(schedule) {
+    this.clear(this.options.width, this.options.height);
+    schedule.execute(this);
+  }
+  destory() {
+  }
+}
+
+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 Layer extends C {
+  constructor(options = {}) {
+    super();
+    __publicField$6(this, "c");
+    __publicField$6(this, "__refresh__");
+    __publicField$6(this, "options");
+    __publicField$6(this, "width");
+    __publicField$6(this, "height");
+    __publicField$6(this, "x");
+    __publicField$6(this, "y");
+    __publicField$6(this, "scaleX");
+    __publicField$6(this, "scaleY");
+    __publicField$6(this, "rotation");
+    __publicField$6(this, "skewX");
+    __publicField$6(this, "skewY");
+    this.c = new Canvas({ width: 0, height: 0, devicePixelRatio: 1 });
+    this.__refresh__ = false;
+    this.options = /* @__PURE__ */ Object.create(null);
+    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;
+  }
+  get __instanceOf__() {
+    return DisplayType.Layer;
+  }
+  setCanvasOptions(options = {}) {
+    Object.assign(this.options, options);
+    writeBoundingRectForCanvas(this.c.c.canvas, options.width || 0, options.height || 0, options.devicePixelRatio || 1);
+  }
+  setCacheSnapshot(c) {
+    const dpr = this.options.devicePixelRatio || 1;
+    const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
+    this.ctx.clearRect(0, 0, this.options.width, this.options.height);
+    matrix.transform(this.x, this.y, this.scaleX, this.scaleY, this.rotation, this.skewX, this.skewY);
+    applyCanvasTransform(this.ctx, matrix, dpr);
+    this.ctx.drawImage(c, 0, 0, this.options.width / dpr, this.options.height / dpr);
+    this.__refresh__ = true;
+  }
+  initLoc(options = {}) {
+    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;
+  }
+  draw(ctx) {
+    const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
+    matrix.transform(this.x, this.y, this.scaleX, this.scaleY, this.rotation, this.skewX, this.skewY);
+    applyCanvasTransform(ctx, matrix, this.options.devicePixelRatio || 1);
+    ctx.drawImage(this.canvas, 0, 0);
+  }
+  get canvas() {
+    return this.c.c.canvas;
+  }
+  get ctx() {
+    return this.c.c.ctx;
+  }
 }
 
-// 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$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, key + "" , value);
 class Rect extends Graph {
-    style;
-    constructor(options = {}){
-        super(options);
-        this.style = options.style || Object.create(null);
-    }
-    create() {
-        if (this.style.fill) {
-            this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
-            this.instruction.fillRect(0, 0, this.width, this.height);
-        }
-        if (this.style.stroke) {
-            this.instruction.strokeStyle(this.style.stroke);
-            if (typeof this.style.lineWidth === 'number') {
-                this.instruction.lineWidth(this.style.lineWidth);
-            }
-            this.instruction.strokeRect(0, 0, this.width, this.height);
-        }
-    }
+  constructor(options = {}) {
+    super(options);
+    __publicField$5(this, "style");
+    this.style = options.style || /* @__PURE__ */ Object.create(null);
+  }
+  get __shape__() {
+    return DisplayType.Rect;
+  }
+  create() {
+    if (this.style.fill) {
+      this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
+      this.instruction.fillRect(0, 0, this.width, this.height);
+    }
+    if (this.style.stroke) {
+      this.instruction.strokeStyle(this.style.stroke);
+      if (typeof this.style.lineWidth === "number") {
+        this.instruction.lineWidth(this.style.lineWidth);
+      }
+      this.instruction.strokeRect(0, 0, this.width, this.height);
+    }
+  }
+  clone() {
+    return new Rect({ ...this.style, ...this.__options__ });
+  }
 }
 
+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);
 class Text extends Graph {
-    text;
-    style;
-    constructor(options = {}){
-        super(options);
-        this.text = options.text || '';
-        this.style = options.style || Object.create(null);
-    }
-    create() {
-        if (this.style.fill) {
-            this.instruction.font(this.style.font);
-            this.instruction.lineWidth(this.style.lineWidth);
-            this.instruction.textBaseline(this.style.baseline);
-            this.instruction.fillStyle(this.style.fill);
-            this.instruction.fillText(this.text, 0, 0);
-        }
-    }
+  constructor(options = {}) {
+    super(options);
+    __publicField$4(this, "text");
+    __publicField$4(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;
+  }
 }
 
+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, key + "" , value);
 class Event {
-    eventCollections;
-    constructor(){
-        this.eventCollections = Object.create(null);
-    }
-    on(evt, handler, c) {
-        if (!(evt in this.eventCollections)) {
-            this.eventCollections[evt] = [];
-        }
-        const data = {
-            name: evt,
-            handler,
-            ctx: c || this
-        };
-        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);
-        }
-    }
-    emit(evt, ...args) {
-        if (!this.eventCollections[evt]) return;
-        const handlers = this.eventCollections[evt];
-        if (handlers.length) {
-            handlers.forEach((d)=>{
-                d.handler.call(d.ctx, ...args);
-            });
-        }
-    }
-    bindWithContext(c) {
-        return (evt, handler)=>this.on(evt, handler, c);
-    }
+  constructor() {
+    __publicField$3(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
+    };
+    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);
+    }
+  }
+  emit(evt, ...args) {
+    if (!this.eventCollections[evt]) return;
+    const handlers = this.eventCollections[evt];
+    if (handlers.length) {
+      handlers.forEach((d) => {
+        d.handler.call(d.ctx, ...args);
+      });
+    }
+  }
+  bindWithContext(c) {
+    return (evt, handler) => this.on(evt, handler, c);
+  }
 }
 
-const NAME_SPACE = 'etoile';
+const NAME_SPACE = "etoile";
 const log = {
-    error: (message)=>{
-        return `[${NAME_SPACE}] ${message}`;
-    }
+  error: (message) => {
+    return `[${NAME_SPACE}] ${message}`;
+  }
 };
 
-class Render {
-    canvas;
-    ctx;
-    options;
-    constructor(to, options){
-        this.canvas = document.createElement('canvas');
-        this.ctx = this.canvas.getContext('2d');
-        this.options = options;
-        this.initOptions(options);
-        to.appendChild(this.canvas);
-    }
-    clear(width, height) {
-        this.ctx.clearRect(0, 0, width, height);
-    }
-    initOptions(userOptions = {}) {
-        Object.assign(this.options, userOptions);
-        const { options } = this;
-        this.canvas.width = options.width * options.devicePixelRatio;
-        this.canvas.height = options.height * options.devicePixelRatio;
-        this.canvas.style.cssText = `width: ${options.width}px; height: ${options.height}px`;
-    }
-    update(schedule) {
-        this.clear(this.options.width, this.options.height);
-        schedule.execute(this);
-    }
-    destory() {}
+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);
+function drawGraphIntoCanvas(graph, opts, callback) {
+  const { ctx, dpr } = opts;
+  ctx.save();
+  if (asserts.isLayer(graph) && graph.__refresh__) {
+    callback(opts, graph);
+    return;
+  }
+  if (asserts.isLayer(graph) || 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, callback);
+    }
+    callback(opts, graph);
+  }
+  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);
+    applyCanvasTransform(ctx, matrix, dpr);
+    graph.render(ctx);
+  }
+  ctx.restore();
 }
-
-let Schedule$1 = class Schedule extends Box {
-    render;
-    to;
-    event;
-    constructor(to, renderOptions = {}){
-        super();
-        this.to = typeof to === 'string' ? document.querySelector(to) : to;
-        if (!this.to) {
-            throw new Error(log.error('The element to bind is not found.'));
-        }
-        const { width, height } = this.to.getBoundingClientRect();
-        Object.assign(renderOptions, {
-            width,
-            height
-        }, {
-            devicePixelRatio: window.devicePixelRatio || 1
-        });
-        this.event = new Event();
-        this.render = new Render(this.to, renderOptions);
-    }
-    applyTransform(matrix) {
-        const pixel = this.render.options.devicePixelRatio;
-        this.render.ctx.setTransform(matrix.a * pixel, matrix.b * pixel, matrix.c * pixel, matrix.d * pixel, matrix.e * pixel, matrix.f * pixel);
-    }
-    update() {
-        this.render.update(this);
-        const matrix = this.matrix.create({
-            a: 1,
-            b: 0,
-            c: 0,
-            d: 1,
-            e: 0,
-            f: 0
-        });
-        this.applyTransform(matrix);
-    }
-    // execute all graph elements
-    execute(render, graph = this) {
-        render.ctx.save();
-        let matrix = graph.matrix;
-        this.applyTransform(matrix);
-        if (graph instanceof Box) {
-            const cap = graph.elements.length;
-            for(let i = 0; i < cap; i++){
-                const element = graph.elements[i];
-                matrix = element.matrix.create({
-                    a: 1,
-                    b: 0,
-                    c: 0,
-                    d: 1,
-                    e: 0,
-                    f: 0
-                });
-                if (element instanceof Graph) {
-                    matrix.transform(element.x, element.y, element.scaleX, element.scaleY, element.rotation, element.skewX, element.skewY);
-                }
-                this.execute(render, element);
-            }
-        }
-        if (graph instanceof Graph) {
-            graph.render(render.ctx);
+class Schedule extends Box {
+  constructor(to, renderOptions = {}) {
+    super();
+    __publicField$2(this, "render");
+    __publicField$2(this, "to");
+    __publicField$2(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.update(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 }, (opts, graph2) => {
+      if (asserts.isLayer(graph2)) {
+        if (graph2.__refresh__) {
+          graph2.draw(opts.ctx);
+        } else {
+          graph2.setCacheSnapshot(opts.c);
         }
-        render.ctx.restore();
-    }
-};
+      }
+    });
+  }
+}
 
 function traverse(graphs, handler) {
-    graphs.forEach((graph)=>{
-        if (graph instanceof Box) {
-            traverse(graph.elements, handler);
-        } else if (graph instanceof Graph) {
-            handler(graph);
-        }
-    });
+  const len = graphs.length;
+  for (let i = 0; i < len; i++) {
+    const graph = graphs[i];
+    if (asserts.isLayer(graph) && graph.__refresh__) {
+      handler(graph);
+      continue;
+    }
+    if (asserts.isGraph(graph)) {
+      handler(graph);
+    } else if (asserts.isBox(graph) || asserts.isLayer(graph)) {
+      traverse(graph.elements, handler);
+    }
+  }
 }
 const etoile = {
-    Schedule: Schedule$1,
-    traverse
+  Schedule,
+  traverse
 };
 
-// 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);
+  }
 };
 
-function sortChildrenByKey(data, ...keys) {
-    return data.sort((a, b)=>{
-        for (const key of keys){
-            const v = a[key];
-            const v2 = b[key];
-            if (perferNumeric(v) && perferNumeric(v2)) {
-                if (v2 > v) return 1;
-                if (v2 < v) return -1;
-                continue;
-            }
-            // Not numeric, compare as string
-            const comparison = ('' + v).localeCompare('' + v2);
-            if (comparison !== 0) return comparison;
-        }
-        return 0;
+function 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;
+}
+function perferNumeric(s) {
+  if (typeof s === "number") return true;
+  return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
+}
+function createFillBlock(x, y, width, height, style) {
+  return new Rect({ width, height, x, y, style });
+}
+function createTitleText(text, x, y, font, color) {
+  return new Text({
+    text,
+    x,
+    y,
+    style: { fill: color, textAlign: "center", baseline: "middle", font, lineWidth: 1 }
+  });
+}
+const raf = window.requestAnimationFrame;
+function createCanvasElement() {
+  return document.createElement("canvas");
+}
+function applyCanvasTransform(ctx, matrix, dpr) {
+  ctx.setTransform(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr);
+}
+function mixin(app, methods) {
+  methods.forEach(({ name, fn }) => {
+    Object.defineProperty(app, name, {
+      value: fn(app),
+      writable: false
     });
+  });
+}
+
+function 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;
+  });
 }
 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));
-        }
-    }
-    return result;
+  const result = [];
+  for (let i = 0; i < data.length; i++) {
+    const { groups, ...rest } = data[i];
+    result.push(rest);
+    if (groups) {
+      result.push(...flatten(groups));
+    }
+  }
+  return result;
 }
 function bindParentForModule(modules, parent) {
-    return modules.map((module)=>{
-        const next = {
-            ...module
-        };
-        next.parent = parent;
-        if (next.groups && Array.isArray(next.groups)) {
-            next.groups = bindParentForModule(next.groups, next);
-        }
-        return next;
-    });
+  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;
-    }
-    return null;
+  if (!data) return null;
+  for (const d of data) {
+    if (d.children) {
+      const result = visit(d.children, fn);
+      if (result) return result;
+    }
+    const stop = fn(d);
+    if (stop) return d;
+  }
+  return null;
 }
 function findRelativeNode(c, 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;
+    }
+  });
 }
 
 function squarify(data, rect, layoutDecorator) {
-    const result = [];
-    if (!data.length) return result;
-    const worst = (start, end, shortestSide, totalWeight, aspectRatio)=>{
-        const max = data[start].weight * aspectRatio;
-        const min = data[end].weight * aspectRatio;
-        return Math.max(shortestSide * shortestSide * max / (totalWeight * totalWeight), totalWeight * totalWeight / (shortestSide * shortestSide * min));
-    };
-    const recursion = (start, rect)=>{
-        while(start < data.length){
-            let totalWeight = 0;
-            for(let i = start; i < data.length; i++){
-                totalWeight += data[i].weight;
-            }
-            const shortestSide = Math.min(rect.w, rect.h);
-            const aspectRatio = rect.w * rect.h / totalWeight;
-            let end = start;
-            let areaInRun = 0;
-            let oldWorst = 0;
-            // find the best split
-            while(end < data.length){
-                const area = data[end].weight * aspectRatio;
-                const newWorst = worst(start, end, shortestSide, areaInRun + area, aspectRatio);
-                if (end > start && oldWorst < newWorst) break;
-                areaInRun += area;
-                oldWorst = newWorst;
-                end++;
-            }
-            const splited = Math.round(areaInRun / shortestSide);
-            let areaInLayout = 0;
-            for(let i = start; i < end; i++){
-                const children = data[i];
-                const area = children.weight * aspectRatio;
-                const lower = Math.round(shortestSide * areaInLayout / areaInRun);
-                const upper = Math.round(shortestSide * (areaInLayout + area) / areaInRun);
-                const [x, y, w, h] = rect.w >= rect.h ? [
-                    rect.x,
-                    rect.y + lower,
-                    splited,
-                    upper - lower
-                ] : [
-                    rect.x + lower,
-                    rect.y,
-                    upper - lower,
-                    splited
-                ];
-                const depth = getNodeDepth(children) || 1;
-                const { titleAreaHeight, rectGap } = layoutDecorator;
-                const diff = titleAreaHeight.max / depth;
-                const hh = diff < titleAreaHeight.min ? titleAreaHeight.min : diff;
-                result.push({
-                    layout: [
-                        x,
-                        y,
-                        w,
-                        h
-                    ],
-                    node: children,
-                    decorator: {
-                        ...layoutDecorator,
-                        titleHeight: hh
-                    },
-                    children: w > rectGap * 2 && h > hh + rectGap ? squarify(children.groups || [], {
-                        x: x + rectGap,
-                        y: y + hh,
-                        w: w - rectGap * 2,
-                        h: h - hh - rectGap
-                    }, layoutDecorator) : []
-                });
-                areaInLayout += area;
-            }
-            start = end;
-            if (rect.w >= rect.h) {
-                rect.x += splited;
-                rect.w -= splited;
-            } else {
-                rect.y += splited;
-                rect.h -= splited;
-            }
-        }
-    };
-    recursion(0, rect);
-    return result;
+  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, 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;
 }
 
 function applyForOpacity(graph, lastState, nextState, easedProgress) {
-    const alpha = lastState + (nextState - lastState) * easedProgress;
-    if (graph instanceof Rect) {
-        graph.style.opacity = alpha;
+  const alpha = lastState + (nextState - lastState) * easedProgress;
+  if (asserts.isRect(graph)) {
+    graph.style.opacity = alpha;
+  }
+}
+function createEffectRun(c) {
+  return (fn) => {
+    const effect = () => {
+      const done = fn();
+      if (!done) {
+        c.animationFrameID = raf(effect);
+      }
+    };
+    if (!c.animationFrameID) {
+      c.animationFrameID = raf(effect);
     }
+  };
+}
+function createEffectStop(c) {
+  return () => {
+    if (c.animationFrameID) {
+      window.cancelAnimationFrame(c.animationFrameID);
+      c.animationFrameID = null;
+    }
+  };
+}
+function createEffectScope() {
+  const c = {
+    animationFrameID: null
+  };
+  const run = createEffectRun(c);
+  const stop = createEffectStop(c);
+  return { run, stop };
 }
 
 class RegisterModule {
-    static mixin(app, methods) {
-        methods.forEach(({ name, fn })=>{
-            Object.defineProperty(app, name, {
-                value: fn(app),
-                writable: false
-            });
-        });
-    }
 }
 function registerModuleForSchedule(mod) {
-    if (mod instanceof RegisterModule) {
-        return (app, treemap, render)=>mod.init(app, treemap, render);
-    }
-    throw new Error(log.error('The module is not a valid RegisterScheduleModule.'));
+  if (mod instanceof RegisterModule) {
+    return (app, treemap, render) => mod.init(app, treemap, render);
+  }
+  throw new Error(log.error("The module is not a valid RegisterScheduleModule."));
 }
 
-// etoile is a simple 2D render engine for web and it don't take complex rendering into account.
-// So it's no need to implement a complex event algorithm or hit mode.
-// If one day etoile need to build as a useful library. Pls rewrite it!
-// All of implementation don't want to consider the compatibility of the browser.
-const primitiveEvents = [
-    'click',
-    'mousedown',
-    'mousemove',
-    'mouseup',
-    'mouseover',
-    'mouseout'
-];
+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);
+const primitiveEvents = ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout"];
+const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
 function smoothDrawing(c) {
-    const { self, treemap } = c;
-    const currentNode = self.currentNode;
-    if (currentNode) {
-        const lloc = new Set();
-        visit([
-            currentNode
-        ], (node)=>{
-            const [x, y, w, h] = node.layout;
-            const { rectGap, titleHeight } = node.decorator;
-            lloc.add(x + '-' + y);
-            lloc.add(x + '-' + (y + h - rectGap));
-            lloc.add(x + '-' + (y + titleHeight));
-            lloc.add(x + w - rectGap + '-' + (y + titleHeight));
-        });
-        const startTime = Date.now();
-        const animationDuration = 300;
-        const draw = ()=>{
-            if (self.forceDestroy) {
-                return;
-            }
-            const elapsed = Date.now() - startTime;
-            const progress = Math.min(elapsed / animationDuration, 1);
-            const easedProgress = easing.cubicIn(progress) || 0.1;
-            let allTasksCompleted = true;
-            treemap.reset();
-            etoile.traverse([
-                treemap.elements[0]
-            ], (graph)=>{
-                const key = `${graph.x}-${graph.y}`;
-                if (lloc.has(key)) {
-                    applyForOpacity(graph, 1, 0.7, easedProgress);
-                    if (progress < 1) {
-                        allTasksCompleted = false;
-                    }
-                }
-            });
-            applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
-            treemap.update();
-            if (!allTasksCompleted) {
-                window.requestAnimationFrame(draw);
-            }
-        };
-        if (!self.isAnimating) {
-            self.isAnimating = true;
-            window.requestAnimationFrame(draw);
-        }
-    } else {
-        treemap.reset();
-        applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
-        treemap.update();
-    }
+  const { self } = c;
+  const currentNode = self.currentNode;
+  if (currentNode) {
+    const effect = createEffectScope();
+    const startTime = Date.now();
+    const animationDuration = 300;
+    const [x, y, w, h] = currentNode.layout;
+    effect.run(() => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / animationDuration, 1);
+      if (self.forceDestroy || progress >= 1) {
+        effect.stop();
+        self.highlight.reset();
+        self.highlight.setDisplayLayerForHighlight();
+        return true;
+      }
+      const easedProgress = easing.cubicInOut(progress);
+      self.highlight.reset();
+      const mask = createFillBlock(x, y, w, h, { fill, opacity: 0.4 });
+      self.highlight.highlight.add(mask);
+      self.highlight.setDisplayLayerForHighlight("1");
+      applyForOpacity(mask, 0.4, 0.4, easedProgress);
+      stackMatrixTransform(mask, self.translateX, self.translateY, self.scaleRatio);
+      self.highlight.highlight.update();
+    });
+  } else {
+    self.highlight.reset();
+    self.highlight.setDisplayLayerForHighlight();
+  }
 }
 function applyZoomEvent(ctx) {
-    ctx.treemap.event.on('zoom', (node)=>{
-        const root = null;
-        if (ctx.self.isDragging) return;
-        onZoom(ctx, node, root);
-    });
+  ctx.treemap.event.on("zoom", (node) => {
+    const root = null;
+    if (ctx.self.isDragging) return;
+    onZoom(ctx, node, root);
+  });
 }
 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);
-        return {
-            x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
-            y: (evt.clientY - boundingClientRect.top - f - translateY) / d
-        };
-    }
+  const boundingClientRect = c.getBoundingClientRect();
+  if (evt instanceof MouseEvent) {
+    const [e, f] = getOffset(c);
     return {
-        x: 0,
-        y: 0
+      x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
+      y: (evt.clientY - boundingClientRect.top - f - translateY) / d
     };
+  }
+  return { x: 0, y: 0 };
 }
-function bindPrimitiveEvent(ctx, evt, bus) {
-    const { treemap, self } = ctx;
-    const c = treemap.render.canvas;
-    const handler = (e)=>{
-        const { x, y } = captureBoxXY(c, e, self.scaleRatio, self.scaleRatio, self.translateX, self.translateY);
-        const event = {
-            native: e,
-            module: findRelativeNode(c, {
-                x,
-                y
-            }, treemap.layoutNodes)
-        };
-        // @ts-expect-error
-        bus.emit(evt, event);
+function bindPrimitiveEvent(c, ctx, evt, bus) {
+  const { treemap, self } = ctx;
+  const handler = (e) => {
+    const { x, y } = captureBoxXY(
+      c,
+      e,
+      self.scaleRatio,
+      self.scaleRatio,
+      self.translateX,
+      self.translateY
+    );
+    const event = {
+      native: e,
+      module: findRelativeNode(c, { x, y }, treemap.layoutNodes)
     };
-    c.addEventListener(evt, handler);
-    return handler;
+    bus.emit(evt, event);
+  };
+  c.addEventListener(evt, handler);
+  return handler;
 }
 class SelfEvent extends RegisterModule {
-    currentNode;
-    isAnimating;
-    forceDestroy;
-    scaleRatio;
-    translateX;
-    translateY;
-    layoutWidth;
-    layoutHeight;
-    isDragging;
-    draggingState;
-    event;
-    constructor(){
-        super();
-        this.currentNode = null;
-        this.isAnimating = false;
-        this.forceDestroy = false;
-        this.isDragging = false;
-        this.scaleRatio = 1;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.layoutWidth = 0;
-        this.layoutHeight = 0;
-        this.draggingState = {
-            x: 0,
-            y: 0
-        };
-        this.event = new Event();
-    }
-    ondragstart(metadata) {
-        const { native } = metadata;
-        if (isScrollWheelOrRightButtonOnMouseupAndDown(native)) {
-            return;
-        }
-        const x = native.offsetX;
-        const y = native.offsetY;
-        this.self.isDragging = true;
-        this.self.draggingState = {
-            x,
-            y
-        };
-    }
-    ondragmove(metadata) {
-        if (!this.self.isDragging) {
-            if ('zoom' in this.treemap.event.eventCollections) {
-                const condit = this.treemap.event.eventCollections.zoom.length > 0;
-                if (!condit) {
-                    applyZoomEvent(this);
-                }
-            }
-            return;
-        }
-        // @ts-expect-error
-        this.self.event.off('mousemove', this.self.onmousemove);
-        this.treemap.event.off('zoom');
-        this.self.forceDestroy = true;
-        const { native } = metadata;
-        const x = native.offsetX;
-        const y = native.offsetY;
-        const { x: lastX, y: lastY } = this.self.draggingState;
-        const drawX = x - lastX;
-        const drawY = y - lastY;
-        this.self.translateX += drawX;
-        this.self.translateY += drawY;
-        this.self.draggingState = {
-            x,
-            y
-        };
-        this.treemap.reset();
-        applyGraphTransform(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
-        this.treemap.update();
-    }
-    ondragend(metadata) {
-        if (!this.self.isDragging) {
-            return;
-        }
-        this.self.isDragging = false;
-        this.self.draggingState = {
-            x: 0,
-            y: 0
-        };
-        this.self.event.bindWithContext(this)('mousemove', this.self.onmousemove);
-    }
-    onmousemove(metadata) {
-        const { self } = this;
-        if (self.isDragging) {
-            return;
+  constructor() {
+    super();
+    __publicField$1(this, "currentNode");
+    __publicField$1(this, "forceDestroy");
+    __publicField$1(this, "scaleRatio");
+    __publicField$1(this, "translateX");
+    __publicField$1(this, "translateY");
+    __publicField$1(this, "layoutWidth");
+    __publicField$1(this, "layoutHeight");
+    __publicField$1(this, "isDragging");
+    __publicField$1(this, "draggingState");
+    __publicField$1(this, "event");
+    __publicField$1(this, "triggerZoom");
+    // eslint-disable-next-line no-use-before-define
+    __publicField$1(this, "highlight");
+    this.currentNode = null;
+    this.forceDestroy = false;
+    this.isDragging = false;
+    this.scaleRatio = 1;
+    this.translateX = 0;
+    this.translateY = 0;
+    this.layoutWidth = 0;
+    this.layoutHeight = 0;
+    this.draggingState = { x: 0, y: 0 };
+    this.event = new Event();
+    this.triggerZoom = false;
+    this.highlight = createHighlight();
+  }
+  ondragstart(metadata) {
+    const { native } = metadata;
+    if (isScrollWheelOrRightButtonOnMouseupAndDown(native)) {
+      return;
+    }
+    const x = native.offsetX;
+    const y = native.offsetY;
+    this.self.isDragging = true;
+    this.self.draggingState = { x, y };
+  }
+  ondragmove(metadata) {
+    if (!this.self.isDragging) {
+      if ("zoom" in this.treemap.event.eventCollections) {
+        const condit = this.treemap.event.eventCollections.zoom.length > 0;
+        if (!condit) {
+          applyZoomEvent(this);
         }
-        const { module: node } = metadata;
-        self.forceDestroy = false;
-        if (self.currentNode !== node) {
-            self.currentNode = node;
-            self.isAnimating = false;
-        }
-        smoothDrawing(this);
-    }
-    onmouseout() {
-        const { self } = this;
-        self.currentNode = null;
-        self.forceDestroy = true;
-        self.isDragging = false;
-        smoothDrawing(this);
-    }
-    onwheel(metadata) {
-        const { self, treemap } = this;
-        // @ts-expect-error
-        const wheelDelta = metadata.native.wheelDelta;
-        const absWheelDelta = Math.abs(wheelDelta);
-        const offsetX = metadata.native.offsetX;
-        const offsetY = metadata.native.offsetY;
-        if (wheelDelta === 0) {
-            return;
-        }
-        self.forceDestroy = true;
-        self.isAnimating = true;
-        treemap.reset();
-        const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
-        const delta = wheelDelta > 0 ? factor : 1 / factor;
-        self.scaleRatio *= delta;
-        const translateX = offsetX - (offsetX - self.translateX) * delta;
-        const translateY = offsetY - (offsetY - self.translateY) * delta;
-        self.translateX = translateX;
-        self.translateY = translateY;
-        applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
-        treemap.update();
-        self.forceDestroy = false;
-        self.isAnimating = false;
-    }
-    init(app, treemap, render) {
-        const event = this.event;
-        const nativeEvents = [];
-        const methods = [
-            {
-                name: 'on',
-                fn: ()=>event.bindWithContext(treemap.api).bind(event)
-            },
-            {
-                name: 'off',
-                fn: ()=>event.off.bind(event)
-            },
-            {
-                name: 'emit',
-                fn: ()=>event.emit.bind(event)
-            }
-        ];
-        RegisterModule.mixin(app, methods);
-        const selfEvents = [
-            ...primitiveEvents,
-            'wheel'
-        ];
-        selfEvents.forEach((evt)=>{
-            nativeEvents.push(bindPrimitiveEvent({
-                treemap,
-                self: this
-            }, evt, event));
-        });
-        const selfEvt = event.bindWithContext({
-            treemap,
-            self: this
-        });
-        selfEvt('mousedown', this.ondragstart);
-        selfEvt('mousemove', this.ondragmove);
-        selfEvt('mouseup', this.ondragend);
-        // highlight
-        selfEvt('mousemove', this.onmousemove);
-        selfEvt('mouseout', this.onmouseout);
-        // wheel
-        selfEvt('wheel', this.onwheel);
-        applyZoomEvent({
-            treemap,
-            self: this
-        });
-        treemap.event.on('cleanup:selfevent', ()=>{
-            this.currentNode = null;
-            this.isAnimating = false;
-            this.scaleRatio = 1;
-            this.translateX = 0;
-            this.translateY = 0;
-            this.layoutWidth = treemap.render.canvas.width;
-            this.layoutHeight = treemap.render.canvas.height;
-            this.isDragging = false;
-            this.draggingState = {
-                x: 0,
-                y: 0
-            };
-        });
+      }
+      return;
+    }
+    this.self.highlight.reset();
+    this.self.highlight.setDisplayLayerForHighlight();
+    this.self.event.off("mousemove", this.self.onmousemove);
+    this.treemap.event.off("zoom");
+    this.self.forceDestroy = true;
+    const { native } = metadata;
+    const x = native.offsetX;
+    const y = native.offsetY;
+    const { x: lastX, y: lastY } = this.self.draggingState;
+    const drawX = x - lastX;
+    const drawY = y - lastY;
+    this.self.translateX += drawX;
+    this.self.translateY += drawY;
+    this.self.draggingState = { x, y };
+    if (this.self.triggerZoom) {
+      refreshBackgroundLayer(this);
+    }
+    this.treemap.reset();
+    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
+    stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
+    this.treemap.update();
+  }
+  ondragend() {
+    if (!this.self.isDragging) {
+      return;
+    }
+    this.self.isDragging = false;
+    this.self.draggingState = { x: 0, y: 0 };
+    this.self.highlight.reset();
+    this.self.highlight.setDisplayLayerForHighlight();
+    this.self.event.bindWithContext(this)("mousemove", this.self.onmousemove);
+  }
+  onmousemove(metadata) {
+    const { self } = this;
+    const { module: node } = metadata;
+    self.forceDestroy = false;
+    if (self.currentNode !== node) {
+      self.currentNode = node;
+    }
+    smoothDrawing(this);
+  }
+  onmouseout() {
+    const { self } = this;
+    self.currentNode = null;
+    self.forceDestroy = true;
+    smoothDrawing(this);
+  }
+  onwheel(metadata) {
+    const { self, treemap } = this;
+    const wheelDelta = metadata.native.wheelDelta;
+    const absWheelDelta = Math.abs(wheelDelta);
+    const offsetX = metadata.native.offsetX;
+    const offsetY = metadata.native.offsetY;
+    if (wheelDelta === 0) {
+      return;
+    }
+    self.forceDestroy = true;
+    if (self.triggerZoom) {
+      refreshBackgroundLayer(this);
     }
+    treemap.reset();
+    this.self.highlight.reset();
+    this.self.highlight.setDisplayLayerForHighlight();
+    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
+    const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
+    const delta = wheelDelta > 0 ? factor : 1 / factor;
+    self.scaleRatio *= delta;
+    const translateX = offsetX - (offsetX - self.translateX) * delta;
+    const translateY = offsetY - (offsetY - self.translateY) * delta;
+    self.translateX = translateX;
+    self.translateY = translateY;
+    stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
+    treemap.update();
+    self.forceDestroy = false;
+  }
+  init(app, treemap) {
+    const event = this.event;
+    const nativeEvents = [];
+    const methods = [
+      {
+        name: "on",
+        fn: () => event.bindWithContext(treemap.api).bind(event)
+      },
+      {
+        name: "off",
+        fn: () => event.off.bind(event)
+      },
+      {
+        name: "emit",
+        fn: () => event.emit.bind(event)
+      }
+    ];
+    mixin(app, methods);
+    const selfEvents = [...primitiveEvents, "wheel"];
+    selfEvents.forEach((evt) => {
+      nativeEvents.push(bindPrimitiveEvent(treemap.render.canvas, { treemap, self: this }, evt, event));
+    });
+    const selfEvt = event.bindWithContext({ treemap, self: this });
+    selfEvt("mousedown", this.ondragstart);
+    selfEvt("mousemove", this.ondragmove);
+    selfEvt("mouseup", this.ondragend);
+    selfEvt("wheel", this.onwheel);
+    applyZoomEvent({ treemap, self: this });
+    let installHightlightEvent = false;
+    treemap.event.on("onload:selfevent", ({ width, height, root }) => {
+      this.highlight.init(width, height, root);
+      if (!installHightlightEvent) {
+        bindPrimitiveEvent(this.highlight.highlight.render.canvas, { treemap, self: this }, "mousemove", event);
+        bindPrimitiveEvent(this.highlight.highlight.render.canvas, { treemap, self: this }, "mouseout", event);
+        selfEvt("mousemove", this.onmousemove);
+        selfEvt("mouseout", this.onmouseout);
+        installHightlightEvent = true;
+        this.highlight.setDisplayLayerForHighlight();
+      }
+      this.highlight.reset();
+    });
+    treemap.event.on("cleanup:selfevent", () => {
+      this.currentNode = null;
+      this.scaleRatio = 1;
+      this.translateX = 0;
+      this.translateY = 0;
+      this.layoutWidth = treemap.render.canvas.width;
+      this.layoutHeight = treemap.render.canvas.height;
+      this.isDragging = false;
+      this.triggerZoom = false;
+      this.draggingState = { x: 0, y: 0 };
+    });
+  }
 }
 function estimateZoomingArea(node, root, w, h) {
-    const defaultSizes = [
-        w,
-        h,
-        1
-    ];
-    if (root === node) {
-        return defaultSizes;
-    }
-    const viewArea = w * h;
-    let area = viewArea;
-    let parent = node.node.parent;
-    let totalWeight = node.node.weight;
-    while(parent){
-        const siblings = parent.groups || [];
-        let siblingWeightSum = 0;
-        for (const sibling of siblings){
-            siblingWeightSum += sibling.weight;
-        }
-        area *= siblingWeightSum / totalWeight;
-        totalWeight = parent.weight;
-        parent = parent.parent;
-    }
-    const maxScaleFactor = 2.5;
-    const minScaleFactor = 0.3;
-    const scaleFactor = Math.max(minScaleFactor, Math.min(maxScaleFactor, Math.sqrt(area / viewArea)));
-    return [
-        w * scaleFactor,
-        h * scaleFactor
-    ];
+  const defaultSizes = [w, h, 1];
+  if (root === node) {
+    return defaultSizes;
+  }
+  const viewArea = w * h;
+  let area = viewArea;
+  let parent = node.node.parent;
+  let totalWeight = node.node.weight;
+  while (parent) {
+    const siblings = parent.groups || [];
+    let siblingWeightSum = 0;
+    for (const sibling of siblings) {
+      siblingWeightSum += sibling.weight;
+    }
+    area *= siblingWeightSum / totalWeight;
+    totalWeight = parent.weight;
+    parent = parent.parent;
+  }
+  const maxScaleFactor = 2.5;
+  const minScaleFactor = 0.3;
+  const scaleFactor = Math.max(minScaleFactor, Math.min(maxScaleFactor, Math.sqrt(area / viewArea)));
+  return [w * scaleFactor, h * scaleFactor];
 }
-function applyGraphTransform(graphs, translateX, translateY, scale) {
-    etoile.traverse(graphs, (graph)=>{
-        graph.x = graph.x * scale + translateX;
-        graph.y = graph.y * scale + translateY;
-        graph.scaleX = scale;
-        graph.scaleY = scale;
-    });
+function stackMatrixTransform(graph, e, f, scale) {
+  graph.x = graph.x * scale + e;
+  graph.y = graph.y * scale + f;
+  graph.scaleX = scale;
+  graph.scaleY = scale;
+}
+function stackMatrixTransformWithGraphAndLayer(graphs, e, f, scale) {
+  etoile.traverse(graphs, (graph) => stackMatrixTransform(graph, e, f, scale));
 }
 function onZoom(ctx, node, root) {
-    if (!node) return;
-    const { treemap, self } = ctx;
-    let isAnimating = false;
-    const c = treemap.render.canvas;
-    const boundingClientRect = c.getBoundingClientRect();
-    const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
-    resetLayout(treemap, w, h);
-    const module = findRelativeNodeById(node.node.id, treemap.layoutNodes);
-    if (module) {
-        const [mx, my, mw, mh] = module.layout;
-        const scale = Math.min(boundingClientRect.width / mw, boundingClientRect.height / mh);
-        const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * scale;
-        const translateY = boundingClientRect.height / 2 - (my + mh / 2) * scale;
-        const initialScale = self.scaleRatio;
-        const initialTranslateX = self.translateX;
-        const initialTranslateY = self.translateY;
-        const startTime = Date.now();
-        const animationDuration = 300;
-        const draw = ()=>{
-            const elapsed = Date.now() - startTime;
-            const progress = Math.min(elapsed / animationDuration, 1);
-            const easedProgress = easing.cubicInOut(progress);
-            const scaleRatio = initialScale + (scale - initialScale) * easedProgress;
-            self.translateX = initialTranslateX + (translateX - initialTranslateX) * easedProgress;
-            self.translateY = initialTranslateY + (translateY - initialTranslateY) * easedProgress;
-            self.scaleRatio = scaleRatio;
-            treemap.reset();
-            applyGraphTransform(treemap.elements, self.translateX, self.translateY, scaleRatio);
-            treemap.update();
-            if (progress < 1) {
-                window.requestAnimationFrame(draw);
-            } else {
-                self.layoutWidth = w;
-                self.layoutHeight = h;
-                isAnimating = false;
-            }
-        };
-        if (!isAnimating) {
-            isAnimating = true;
-            window.requestAnimationFrame(draw);
-        }
-    }
-    root = node;
+  if (!node) return;
+  const { treemap, self } = ctx;
+  self.forceDestroy = true;
+  const c = treemap.render.canvas;
+  const boundingClientRect = c.getBoundingClientRect();
+  const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
+  resetLayout(treemap, w, h);
+  const module = findRelativeNodeById(node.node.id, treemap.layoutNodes);
+  if (module) {
+    const [mx, my, mw, mh] = module.layout;
+    const scale = Math.min(boundingClientRect.width / mw, boundingClientRect.height / mh);
+    const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * scale;
+    const translateY = boundingClientRect.height / 2 - (my + mh / 2) * scale;
+    const initialScale = self.scaleRatio;
+    const initialTranslateX = self.translateX;
+    const initialTranslateY = self.translateY;
+    const startTime = Date.now();
+    const animationDuration = 300;
+    if (self.layoutHeight !== w || self.layoutHeight !== h) {
+      delete treemap.fontsCaches[module.node.id];
+      delete treemap.ellispsisWidthCache[module.node.id];
+    }
+    const { run, stop } = createEffectScope();
+    run(() => {
+      const elapsed = Date.now() - startTime;
+      const progress = Math.min(elapsed / animationDuration, 1);
+      treemap.backgroundLayer.__refresh__ = false;
+      if (progress >= 1) {
+        stop();
+        self.layoutWidth = w;
+        self.layoutHeight = h;
+        self.forceDestroy = false;
+        self.triggerZoom = true;
+        return true;
+      }
+      const easedProgress = easing.cubicInOut(progress);
+      const scaleRatio = initialScale + (scale - initialScale) * easedProgress;
+      self.translateX = initialTranslateX + (translateX - initialTranslateX) * easedProgress;
+      self.translateY = initialTranslateY + (translateY - initialTranslateY) * easedProgress;
+      self.scaleRatio = scaleRatio;
+      treemap.reset();
+      stackMatrixTransformWithGraphAndLayer(treemap.elements, self.translateX, self.translateY, scaleRatio);
+      treemap.update();
+    });
+  }
+  root = node;
 }
-// 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 createHighlight() {
+  let s = null;
+  const setDisplayLayerForHighlight = (layer = "-1") => {
+    if (!s) return;
+    const c = s.render.canvas;
+    c.style.zIndex = layer;
+  };
+  const init = (w, h, root) => {
+    if (!s) {
+      s = new Schedule(root, { width: w, height: h });
+    }
+    setDisplayLayerForHighlight();
+    s.render.canvas.style.position = "absolute";
+    s.render.canvas.style.pointerEvents = "none";
+  };
+  const reset = () => {
+    if (!s) return;
+    s.destory();
+    s.update();
+  };
+  return {
+    init,
+    reset,
+    setDisplayLayerForHighlight,
+    get highlight() {
+      return s;
+    }
+  };
+}
+function refreshBackgroundLayer(c) {
+  const { treemap } = c;
+  const { backgroundLayer } = treemap;
+  backgroundLayer.__refresh__ = false;
 }
 
+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);
 const defaultRegistries = [
-    registerModuleForSchedule(new SelfEvent())
+  registerModuleForSchedule(new SelfEvent())
 ];
-function charCodeWidth(c, ch) {
-    return c.measureText(String.fromCharCode(ch)).width;
-}
-function evaluateOptimalFontSize(c, text, width, fontRange, fontFamily, height) {
-    height = Math.floor(height);
-    let optimalFontSize = fontRange.min;
-    for(let fontSize = fontRange.min; fontSize <= fontRange.max; fontSize++){
-        c.font = `${fontSize}px ${fontFamily}`;
-        let textWidth = 0;
-        const textHeight = fontSize;
-        let i = 0;
-        while(i < text.length){
-            const codePointWidth = charCodeWidth(c, text.charCodeAt(i));
-            textWidth += codePointWidth;
-            i++;
-        }
-        if (textWidth >= width) {
-            const overflow = textWidth - width;
-            const ratio = overflow / textWidth;
-            const newFontSize = Math.abs(Math.floor(fontSize - fontSize * ratio));
-            optimalFontSize = newFontSize || fontRange.min;
-            break;
-        }
-        if (textHeight >= height) {
-            const overflow = textHeight - height;
-            const ratio = overflow / textHeight;
-            const newFontSize = Math.abs(Math.floor(fontSize - fontSize * ratio));
-            optimalFontSize = newFontSize || fontRange.min;
-            break;
-        }
-        optimalFontSize = fontSize;
-    }
-    return optimalFontSize;
+function measureTextWidth(c, text) {
+  return c.measureText(text).width;
 }
-function getSafeText(c, text, width) {
-    const ellipsisWidth = c.measureText('...').width;
-    if (width < ellipsisWidth) {
-        return false;
-    }
-    let textWidth = 0;
-    let i = 0;
-    while(i < text.length){
-        const codePointWidth = charCodeWidth(c, text.charCodeAt(i));
-        textWidth += codePointWidth;
-        i++;
-    }
-    if (textWidth < width) {
-        return {
-            text,
-            width: textWidth
-        };
+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;
     }
-    return {
-        text: '...',
-        width: ellipsisWidth
-    };
+  }
+  return Math.floor(min);
 }
-function createFillBlock(color, x, y, width, height) {
-    return new Rect({
-        width,
-        height,
-        x,
-        y,
-        style: {
-            fill: color,
-            opacity: 1
-        }
-    });
-}
-function createTitleText(text, x, y, font, color) {
-    return new Text({
-        text,
-        x,
-        y,
-        style: {
-            fill: color,
-            textAlign: 'center',
-            baseline: 'middle',
-            font,
-            lineWidth: 1
-        }
-    });
+function getSafeText(c, text, width, cache) {
+  let ellipsisWidth = 0;
+  if (text in cache) {
+    ellipsisWidth = cache[text];
+  } else {
+    ellipsisWidth = measureTextWidth(c, "...");
+    cache[text] = ellipsisWidth;
+  }
+  if (width < ellipsisWidth) {
+    return false;
+  }
+  const textWidth = measureTextWidth(c, text);
+  if (textWidth < width) {
+    return { text, width: textWidth };
+  }
+  return { text: "...", width: ellipsisWidth };
 }
 function resetLayout(treemap, w, h) {
-    treemap.layoutNodes = squarify(treemap.data, {
-        w,
-        h,
-        x: 0,
-        y: 0
-    }, treemap.decorator.layout);
-    treemap.reset();
+  treemap.layoutNodes = squarify(treemap.data, { w, h, x: 0, y: 0 }, treemap.decorator.layout);
+  treemap.reset(true);
 }
-// https://www.typescriptlang.org/docs/handbook/mixins.html
-class Schedule extends etoile.Schedule {
-}
-class TreemapLayout extends Schedule {
-    data;
-    layoutNodes;
-    decorator;
-    bgBox;
-    fgBox;
-    constructor(...args){
-        super(...args);
-        this.data = [];
-        this.layoutNodes = [];
-        this.bgBox = new Box();
-        this.fgBox = new Box();
-        this.decorator = Object.create(null);
-    }
-    drawBackgroundNode(node) {
-        for (const child of node.children){
-            this.drawBackgroundNode(child);
-        }
-        const [x, y, w, h] = node.layout;
-        const { rectGap, titleHeight } = node.decorator;
-        const fill = this.decorator.color.mappings[node.node.id];
-        if (node.children.length) {
-            const box = new Box();
-            box.add(createFillBlock(fill, x, y, w, titleHeight), createFillBlock(fill, x, y + h - rectGap, w, rectGap), createFillBlock(fill, x, y + titleHeight, rectGap, h - titleHeight - rectGap), createFillBlock(fill, x + w - rectGap, y + titleHeight, rectGap, h - titleHeight - rectGap));
-            this.bgBox.add(box);
-        } else {
-            this.bgBox.add(createFillBlock(fill, x, y, w, h));
-        }
-    }
-    drawForegroundNode(node) {
-        for (const child of node.children){
-            this.drawForegroundNode(child);
-        }
-        const [x, y, w, h] = node.layout;
-        const { rectBorderWidth, titleHeight, rectGap } = node.decorator;
-        const { fontSize, fontFamily, color } = this.decorator.font;
-        const rect = new Rect({
-            x: x + 0.5,
-            y: y + 0.5,
-            width: w,
-            height: h,
-            style: {
-                stroke: '#222',
-                lineWidth: rectBorderWidth
-            }
-        });
-        this.fgBox.add(rect);
-        this.render.ctx.textBaseline = 'middle';
-        const optimalFontSize = evaluateOptimalFontSize(this.render.ctx, node.node.label, w - rectGap * 2, fontSize, fontFamily, node.children.length ? Math.round(titleHeight / 2) + rectGap : h);
-        this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
-        if (h > titleHeight) {
-            const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2);
-            if (!result) return;
-            const { text, width } = result;
-            const textX = x + Math.round((w - width) / 2);
-            let textY = y + Math.round(h / 2);
-            if (node.children.length) {
-                textY = y + Math.round(titleHeight / 2);
-            }
-            this.fgBox.add(createTitleText(text, textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
-        } else {
-            const ellipsisWidth = 3 * charCodeWidth(this.render.ctx, 46);
-            const textX = x + Math.round((w - ellipsisWidth) / 2);
-            const textY = y + Math.round(h / 2);
-            this.fgBox.add(createTitleText('...', textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
-        }
-    }
-    reset() {
-        this.bgBox.destory();
-        this.fgBox.destory();
-        this.remove(this.bgBox, this.fgBox);
-        for (const node of this.layoutNodes){
-            this.drawBackgroundNode(node);
-            this.drawForegroundNode(node);
-        }
-        this.add(this.bgBox, this.fgBox);
-    }
-    get api() {
-        return {
-            zoom: (node)=>{
-                this.event.emit('zoom', node);
-            }
-        };
+class TreemapLayout extends etoile.Schedule {
+  constructor(...args) {
+    super(...args);
+    __publicField(this, "data");
+    __publicField(this, "layoutNodes");
+    __publicField(this, "decorator");
+    __publicField(this, "bgLayer");
+    __publicField(this, "fgBox");
+    __publicField(this, "fontsCaches");
+    __publicField(this, "ellispsisWidthCache");
+    this.data = [];
+    this.layoutNodes = [];
+    this.bgLayer = new Layer();
+    this.fgBox = new Box();
+    this.decorator = /* @__PURE__ */ Object.create(null);
+    this.fontsCaches = /* @__PURE__ */ Object.create(null);
+    this.ellispsisWidthCache = /* @__PURE__ */ Object.create(null);
+    this.bgLayer.setCanvasOptions(this.render.options);
+  }
+  drawBackgroundNode(node) {
+    const [x, y, w, h] = node.layout;
+    const fill = this.decorator.color.mappings[node.node.id];
+    const s = createFillBlock(x, y, w, h, { fill });
+    this.bgLayer.add(s);
+    for (const child of node.children) {
+      this.drawBackgroundNode(child);
+    }
+  }
+  drawForegroundNode(node) {
+    const [x, y, w, h] = node.layout;
+    if (!w || !h) return;
+    const { rectBorderWidth, titleHeight, rectGap } = node.decorator;
+    const { fontSize, fontFamily, color } = this.decorator.font;
+    this.fgBox.add(createFillBlock(x + 0.5, y + 0.5, w, h, { stroke: "#222", lineWidth: rectBorderWidth }));
+    let optimalFontSize;
+    if (node.node.id in this.fontsCaches) {
+      optimalFontSize = this.fontsCaches[node.node.id];
+    } else {
+      optimalFontSize = evaluateOptimalFontSize(
+        this.render.ctx,
+        node.node.label,
+        {
+          range: fontSize,
+          family: fontFamily
+        },
+        w - rectGap * 2,
+        node.children.length ? Math.round(titleHeight / 2) + rectGap : h
+      );
+      this.fontsCaches[node.node.id] = optimalFontSize;
+    }
+    this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
+    const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2, this.ellispsisWidthCache);
+    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.bgLayer, this.fgBox);
+    if (!this.bgLayer.__refresh__) {
+      this.bgLayer.destory();
+      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.bgLayer, this.fgBox);
+  }
+  get api() {
+    return {
+      zoom: (node) => {
+        this.event.emit("zoom", node);
+      }
+    };
+  }
+  get backgroundLayer() {
+    return this.bgLayer;
+  }
 }
 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;
-    }
-    function dispose() {
-        if (root && treemap) {
-            treemap.destory();
-            root.removeChild(root.firstChild);
-            root = null;
-            treemap = null;
-        }
-    }
-    function resize() {
-        if (!treemap || !root) return;
-        const { width, height } = root.getBoundingClientRect();
-        treemap.render.initOptions({
-            height,
-            width,
-            devicePixelRatio: window.devicePixelRatio
-        });
-        treemap.event.emit('cleanup:selfevent');
-        resetLayout(treemap, width, height);
-        treemap.update();
-    }
-    function setOptions(options) {
-        if (!treemap) {
-            throw new Error('Treemap not initialized');
-        }
-        treemap.data = bindParentForModule(options.data || []);
-        if (!installed) {
-            for (const registry of defaultRegistries){
-                registry(context, treemap, treemap.render);
-            }
-            installed = true;
-        }
-        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("treemap don't init.");
-        }
-        const node = findRelativeNodeById(id, treemap.layoutNodes);
-        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) {
+      for (const registry of defaultRegistries) {
+        registry(context, treemap, treemap.render);
+      }
+      installed = true;
+    }
+  }
+  function dispose() {
+    if (root && treemap) {
+      treemap.destory();
+      root.removeChild(root.firstChild);
+      root = null;
+      treemap = null;
+    }
+  }
+  function resize() {
+    if (!treemap || !root) return;
+    const { width, height } = root.getBoundingClientRect();
+    treemap.backgroundLayer.__refresh__ = false;
+    treemap.render.initOptions({ height, width, devicePixelRatio: window.devicePixelRatio });
+    treemap.render.canvas.style.position = "absolute";
+    treemap.backgroundLayer.setCanvasOptions(treemap.render.options);
+    treemap.backgroundLayer.initLoc();
+    treemap.backgroundLayer.matrix = treemap.backgroundLayer.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
+    treemap.fontsCaches = /* @__PURE__ */ Object.create(null);
+    treemap.event.emit("cleanup:selfevent");
+    treemap.event.emit("onload:selfevent", { width, height, root });
+    resetLayout(treemap, width, height);
+    treemap.update();
+  }
+  function setOptions(options) {
+    if (!treemap) {
+      throw new Error("Treemap not initialized");
+    }
+    treemap.data = bindParentForModule(options.data || []);
+    for (const use2 of uses) {
+      use2(treemap);
+    }
+    resize();
+  }
+  function use(key, register) {
+    switch (key) {
+      case "decorator":
+        uses.push((treemap2) => register(treemap2));
+        break;
+    }
+  }
+  function zoom(id) {
+    if (!treemap) {
+      throw new Error("treemap don't init.");
+    }
+    const node = findRelativeNodeById(id, treemap.layoutNodes);
+    node && treemap.api.zoom(node);
+  }
+  return context;
 }
 
 const defaultLayoutOptions = {
-    titleAreaHeight: {
-        max: 80,
-        min: 20
-    },
-    rectGap: 5,
-    rectBorderRadius: 0.5,
-    rectBorderWidth: 1.5
+  titleAreaHeight: {
+    max: 80,
+    min: 20
+  },
+  rectGap: 5,
+  rectBorderRadius: 0.5,
+  rectBorderWidth: 1.5
 };
 const defaultFontOptions = {
-    color: '#000',
-    fontSize: {
-        max: 38,
-        min: 7
-    },
-    fontFamily: 'sans-serif'
+  color: "#000",
+  fontSize: {
+    max: 38,
+    min: 7
+  },
+  fontFamily: "sans-serif"
 };
 function presetDecorator(app) {
-    Object.assign(app.decorator, {
-        layout: defaultLayoutOptions,
-        font: defaultFontOptions,
-        color: colorMappings(app)
-    });
+  Object.assign(app.decorator, {
+    layout: defaultLayoutOptions,
+    font: defaultFontOptions,
+    color: { mappings: evaluateColorMappings(app.data) }
+  });
 }
-function colorDecorator(node, state) {
-    const depth = getNodeDepth(node);
-    let baseHue = 0;
-    let sweepAngle = Math.PI * 2;
-    const totalHueRange = Math.PI;
-    if (node.parent) {
-        sweepAngle = node.weight / node.parent.weight * sweepAngle;
-        baseHue = state.hue + sweepAngle / Math.PI * 180;
-    }
-    baseHue += sweepAngle;
-    const depthHueOffset = depth + totalHueRange / 10;
-    const finalHue = baseHue + depthHueOffset / 2;
-    const saturation = 0.6 + 0.4 * Math.max(0, Math.cos(finalHue));
-    const lightness = 0.5 + 0.2 * Math.max(0, Math.cos(finalHue + Math.PI * 2 / 3));
-    state.hue = baseHue;
-    return {
-        mode: 'hsl',
-        desc: {
-            h: finalHue,
-            s: Math.round(saturation * 100),
-            l: Math.round(lightness * 100)
-        }
+function evaluateColorMappings(data) {
+  const colorMappings = {};
+  const hashToHue = (id) => {
+    const hash = Math.abs(hashCode(id));
+    return hash % 360;
+  };
+  const lightScale = (depth) => 70 - depth * 5;
+  const baseSaturation = 40;
+  const siblingHueShift = 20;
+  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);
     };
-}
-function evaluateColorMappingByNode(node, state) {
-    const colorMappings = {};
-    if (node.groups && Array.isArray(node.groups)) {
-        for (const child of node.groups){
-            Object.assign(colorMappings, evaluateColorMappingByNode(child, state));
-        }
-    }
-    if (node.id) {
-        colorMappings[node.id] = colorDecorator(node, state);
-    }
-    return colorMappings;
-}
-function colorMappings(app) {
-    const colorMappings = {};
-    const state = {
-        hue: 0
+    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
     };
-    for (const node of app.data){
-        Object.assign(colorMappings, evaluateColorMappingByNode(node, state));
-    }
-    return {
-        mappings: colorMappings
+    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];
+        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;