squarified 0.2.2 → 0.3.2

package/dist/index.mjs

@@ -1,15 +1,15 @@
-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);
+var __defProp$c = Object.defineProperty;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
 const DEG_TO_RAD = Math.PI / 180;
 class Matrix2D {
   constructor(loc = {}) {
-    __publicField$a(this, "a");
-    __publicField$a(this, "b");
-    __publicField$a(this, "c");
-    __publicField$a(this, "d");
-    __publicField$a(this, "e");
-    __publicField$a(this, "f");
+    __publicField$c(this, "a");
+    __publicField$c(this, "b");
+    __publicField$c(this, "c");
+    __publicField$c(this, "d");
+    __publicField$c(this, "e");
+    __publicField$c(this, "f");
     this.a = loc.a || 1;
     this.b = loc.b || 0;
     this.c = loc.c || 0;
@@ -71,9 +71,9 @@ class Matrix2D {
   }
 }
 
-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);
+var __defProp$b = Object.defineProperty;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
 const SELF_ID = {
   id: 0,
   get() {
@@ -83,16 +83,16 @@ const SELF_ID = {
 var DisplayType = /* @__PURE__ */ ((DisplayType2) => {
   DisplayType2["Graph"] = "Graph";
   DisplayType2["Box"] = "Box";
-  DisplayType2["Rect"] = "Rect";
   DisplayType2["Text"] = "Text";
-  DisplayType2["Layer"] = "Layer";
+  DisplayType2["RoundRect"] = "RoundRect";
+  DisplayType2["Bitmap"] = "Bitmap";
   return DisplayType2;
 })(DisplayType || {});
 class Display {
   constructor() {
-    __publicField$9(this, "parent");
-    __publicField$9(this, "id");
-    __publicField$9(this, "matrix");
+    __publicField$b(this, "parent");
+    __publicField$b(this, "id");
+    __publicField$b(this, "matrix");
     this.parent = null;
     this.id = SELF_ID.get();
     this.matrix = new Matrix2D();
@@ -139,21 +139,42 @@ function createInstruction() {
     },
     textAlign(...args) {
       this.mods.push({ mod: ["textAlign", args], type: ASSIGN_MAPPINGS.textAlign });
+    },
+    beginPath() {
+      this.mods.push({ mod: ["beginPath", []], type: CALL_MAPPINGS_MODE });
+    },
+    moveTo(...args) {
+      this.mods.push({ mod: ["moveTo", args], type: CALL_MAPPINGS_MODE });
+    },
+    arcTo(...args) {
+      this.mods.push({ mod: ["arcTo", args], type: CALL_MAPPINGS_MODE });
+    },
+    closePath() {
+      this.mods.push({ mod: ["closePath", []], type: CALL_MAPPINGS_MODE });
+    },
+    fill() {
+      this.mods.push({ mod: ["fill", []], type: CALL_MAPPINGS_MODE });
+    },
+    stroke() {
+      this.mods.push({ mod: ["stroke", []], type: CALL_MAPPINGS_MODE });
+    },
+    drawImage(...args) {
+      this.mods.push({ mod: ["drawImage", args], type: CALL_MAPPINGS_MODE });
     }
   };
 }
 class S extends Display {
   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");
+    __publicField$b(this, "width");
+    __publicField$b(this, "height");
+    __publicField$b(this, "x");
+    __publicField$b(this, "y");
+    __publicField$b(this, "scaleX");
+    __publicField$b(this, "scaleY");
+    __publicField$b(this, "rotation");
+    __publicField$b(this, "skewX");
+    __publicField$b(this, "skewY");
     this.width = options.width || 0;
     this.height = options.height || 0;
     this.x = options.x || 0;
@@ -168,10 +189,12 @@ class S extends Display {
 class Graph extends S {
   constructor(options = {}) {
     super(options);
-    __publicField$9(this, "instruction");
-    __publicField$9(this, "__options__");
+    __publicField$b(this, "instruction");
+    __publicField$b(this, "__options__");
+    __publicField$b(this, "__widget__");
     this.instruction = createInstruction();
     this.__options__ = options;
+    this.__widget__ = null;
   }
   render(ctx) {
     this.create();
@@ -197,30 +220,30 @@ function isGraph(display) {
 function isBox(display) {
   return display.__instanceOf__ === DisplayType.Box;
 }
-function isRect(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.Rect;
+function isRoundRect(display) {
+  return isGraph(display) && display.__shape__ === DisplayType.RoundRect;
 }
 function isText(display) {
   return isGraph(display) && display.__shape__ === DisplayType.Text;
 }
-function isLayer(display) {
-  return display.__instanceOf__ === DisplayType.Layer;
+function isBitmap(display) {
+  return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
 }
 const asserts = {
   isGraph,
   isBox,
-  isRect,
   isText,
-  isLayer
+  isRoundRect,
+  isBitmap
 };
 
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$a = Object.defineProperty;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
 class C extends Display {
   constructor() {
     super();
-    __publicField$8(this, "elements");
+    __publicField$a(this, "elements");
     this.elements = [];
   }
   add(...elements) {
@@ -252,7 +275,7 @@ class C extends Display {
 class Box extends C {
   constructor() {
     super();
-    __publicField$8(this, "elements");
+    __publicField$a(this, "elements");
     this.elements = [];
   }
   add(...elements) {
@@ -309,123 +332,29 @@ class Box extends C {
   }
 }
 
-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);
-  }
-  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 {
+var __defProp$9 = Object.defineProperty;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+class Bitmap extends Graph {
   constructor(options = {}) {
-    super();
-    __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);
-  }
-  cleanCacheSnapshot() {
-    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);
-    return { dpr, matrix };
-  }
-  setCacheSnapshot(c) {
-    const { matrix, dpr } = this.cleanCacheSnapshot();
-    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;
+    super(options);
+    __publicField$9(this, "bitmap");
+    __publicField$9(this, "style");
+    __publicField$9(this, "dpi");
+    this.bitmap = options.bitmap || null;
+    this.style = options.style || /* @__PURE__ */ Object.create(null);
+    this.dpi = options.dpi || 1;
   }
-  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);
+  create() {
+    if (this.bitmap) {
+      this.instruction.drawImage(this.bitmap, 0, 0, this.bitmap.width / this.dpi, this.bitmap.height / this.dpi);
+    }
   }
-  get canvas() {
-    return this.c.c.canvas;
+  clone() {
+    return new Bitmap({ ...this.style, ...this.__options__ });
   }
-  get ctx() {
-    return this.c.c.ctx;
+  get __shape__() {
+    return DisplayType.Bitmap;
   }
 }
 
@@ -454,44 +383,58 @@ const runtime = {
   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, typeof key !== "symbol" ? key + "" : key, value);
-class Rect extends Graph {
+var __defProp$8 = Object.defineProperty;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+class RoundRect extends Graph {
   constructor(options = {}) {
     super(options);
-    __publicField$5(this, "style");
+    __publicField$8(this, "style");
     this.style = options.style || /* @__PURE__ */ Object.create(null);
   }
   get __shape__() {
-    return DisplayType.Rect;
+    return DisplayType.RoundRect;
   }
   create() {
+    const padding = this.style.padding;
+    const x = 0;
+    const y = 0;
+    const width = this.width - padding * 2;
+    const height = this.height - padding * 2;
+    const radius = this.style.radius || 0;
+    this.instruction.beginPath();
+    this.instruction.moveTo(x + radius, y);
+    this.instruction.arcTo(x + width, y, x + width, y + height, radius);
+    this.instruction.arcTo(x + width, y + height, x, y + height, radius);
+    this.instruction.arcTo(x, y + height, x, y, radius);
+    this.instruction.arcTo(x, y, x + width, y, radius);
+    this.instruction.closePath();
     if (this.style.fill) {
+      this.instruction.closePath();
       this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
-      this.instruction.fillRect(0, 0, this.width, this.height);
+      this.instruction.fill();
     }
     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);
+      this.instruction.strokeStyle(this.style.stroke);
+      this.instruction.stroke();
     }
   }
   clone() {
-    return new Rect({ ...this.style, ...this.__options__ });
+    return new RoundRect({ ...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);
+var __defProp$7 = Object.defineProperty;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Text extends Graph {
   constructor(options = {}) {
     super(options);
-    __publicField$4(this, "text");
-    __publicField$4(this, "style");
+    __publicField$7(this, "text");
+    __publicField$7(this, "style");
     this.text = options.text || "";
     this.style = options.style || /* @__PURE__ */ Object.create(null);
   }
@@ -512,12 +455,63 @@ class Text extends Graph {
   }
 }
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+function traverse(graphs, handler) {
+  const len = graphs.length;
+  for (let i = 0; i < len; i++) {
+    const graph = graphs[i];
+    if (asserts.isGraph(graph)) {
+      handler(graph);
+    } else if (asserts.isBox(graph)) {
+      traverse(graph.elements, handler);
+    }
+  }
+}
+function getCanvasBoundarySize() {
+  const ua = navigator.userAgent;
+  let size = 16384;
+  if (/Firefox\/(\d+)/.test(ua)) {
+    const version = parseInt(RegExp.$1, 10);
+    if (version >= 122) {
+      size = 23168;
+    } else {
+      size = 11180;
+    }
+  }
+  return { size };
+}
+const canvasBoundarySize = getCanvasBoundarySize();
+
+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);
+  }
+};
+
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Event {
   constructor() {
-    __publicField$3(this, "eventCollections");
+    __publicField$6(this, "eventCollections");
     this.eventCollections = /* @__PURE__ */ Object.create(null);
   }
   on(evt, handler, c) {
@@ -527,7 +521,8 @@ class Event {
     const data = {
       name: evt,
       handler,
-      ctx: c || this
+      ctx: c || this,
+      silent: false
     };
     this.eventCollections[evt].push(data);
   }
@@ -540,11 +535,36 @@ class Event {
       this.eventCollections[evt] = this.eventCollections[evt].filter((d) => d.handler !== handler);
     }
   }
+  silent(evt, handler) {
+    if (!(evt in this.eventCollections)) {
+      return;
+    }
+    this.eventCollections[evt].forEach((d) => {
+      if (!handler || d.handler === handler) {
+        d.silent = true;
+      }
+    });
+  }
+  active(evt, handler) {
+    if (!(evt in this.eventCollections)) {
+      return;
+    }
+    this.eventCollections[evt].forEach((d) => {
+      if (!handler || d.handler === handler) {
+        d.silent = false;
+      }
+    });
+  }
   emit(evt, ...args) {
-    if (!this.eventCollections[evt]) return;
+    if (!this.eventCollections[evt]) {
+      return;
+    }
     const handlers = this.eventCollections[evt];
     if (handlers.length) {
       handlers.forEach((d) => {
+        if (d.silent) {
+          return;
+        }
         d.handler.call(d.ctx, ...args);
       });
     }
@@ -554,6 +574,51 @@ class Event {
   }
 }
 
+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 createRoundBlock(x, y, width, height, style) {
+  return new RoundRect({ width, height, x, y, style: { ...style } });
+}
+function createTitleText(text, x, y, font, color) {
+  return new Text({
+    text,
+    x,
+    y,
+    style: { fill: color, textAlign: "center", baseline: "middle", font, lineWidth: 1 }
+  });
+}
+const raf = window.requestAnimationFrame;
+function createCanvasElement() {
+  return document.createElement("canvas");
+}
+function applyCanvasTransform(ctx, matrix, dpr) {
+  ctx.setTransform(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr);
+}
+function mixin(app, methods) {
+  methods.forEach(({ name, fn }) => {
+    Object.defineProperty(app, name, {
+      value: fn(app),
+      writable: false
+    });
+  });
+}
+function prettyStrJoin(...s) {
+  return s.join("");
+}
+
 const NAME_SPACE = "etoile";
 const log = {
   error: (message) => {
@@ -561,28 +626,83 @@ const log = {
   }
 };
 
-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) {
+var __defProp$5 = Object.defineProperty;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+function writeBoundingRectForCanvas(c, w, h, dpr) {
+  c.width = w * dpr;
+  c.height = h * dpr;
+  c.style.cssText = `width: ${w}px; height: ${h}px`;
+}
+class Canvas {
+  constructor(options) {
+    __publicField$5(this, "canvas");
+    __publicField$5(this, "ctx");
+    this.canvas = createCanvasElement();
+    this.setOptions(options);
+    this.ctx = this.canvas.getContext("2d");
+  }
+  setOptions(options) {
+    writeBoundingRectForCanvas(this.canvas, options.width, options.height, options.devicePixelRatio);
+  }
+}
+class Render {
+  constructor(to, options) {
+    __publicField$5(this, "options");
+    __publicField$5(this, "container");
+    this.container = new Canvas(options);
+    this.options = options;
+    this.initOptions(options);
+    if (!options.shaow) {
+      to.appendChild(this.container.canvas);
+    }
+  }
+  clear(width, height) {
+    this.ctx.clearRect(0, 0, width, height);
+  }
+  get canvas() {
+    return this.container.canvas;
+  }
+  get ctx() {
+    return this.container.ctx;
+  }
+  initOptions(userOptions = {}) {
+    Object.assign(this.options, userOptions);
+    this.container.setOptions(this.options);
+  }
+  destory() {
+  }
+}
+
+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);
+function drawGraphIntoCanvas(graph, opts) {
   const { ctx, dpr } = opts;
   ctx.save();
-  if (asserts.isLayer(graph) && graph.__refresh__) {
-    callback(opts, graph);
-    return;
-  }
-  if (asserts.isLayer(graph) || asserts.isBox(graph)) {
+  if (asserts.isBox(graph)) {
     const elements = graph.elements;
     const cap = elements.length;
     for (let i = 0; i < cap; i++) {
       const element = elements[i];
-      drawGraphIntoCanvas(element, opts, callback);
+      drawGraphIntoCanvas(element, opts);
     }
-    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);
+    if (asserts.isRoundRect(graph)) {
+      const effectiveWidth = graph.width - graph.style.padding * 2;
+      const effectiveHeight = graph.height - graph.style.padding * 2;
+      if (effectiveWidth <= 0 || effectiveHeight <= 0) {
+        ctx.restore();
+        return;
+      }
+      if (graph.style.radius >= effectiveHeight / 2 || graph.style.radius >= effectiveWidth / 2) {
+        ctx.restore();
+        return;
+      }
+    }
     applyCanvasTransform(ctx, matrix, dpr);
     graph.render(ctx);
   }
@@ -591,9 +711,9 @@ function drawGraphIntoCanvas(graph, opts, callback) {
 class Schedule extends Box {
   constructor(to, renderOptions = {}) {
     super();
-    __publicField$2(this, "render");
-    __publicField$2(this, "to");
-    __publicField$2(this, "event");
+    __publicField$4(this, "render");
+    __publicField$4(this, "to");
+    __publicField$4(this, "event");
     this.to = typeof to === "string" ? document.querySelector(to) : to;
     if (!this.to) {
       throw new Error(log.error("The element to bind is not found."));
@@ -611,101 +731,180 @@ class Schedule extends Box {
   }
   // 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);
-        }
-      }
-    });
+    drawGraphIntoCanvas(graph, { c: render.canvas, ctx: render.ctx, dpr: render.options.devicePixelRatio });
   }
 }
 
-function traverse(graphs, handler) {
-  const len = graphs.length;
-  for (let i = 0; i < len; i++) {
-    const graph = graphs[i];
-    if (asserts.isLayer(graph) && graph.__refresh__) {
-      handler(graph);
-      continue;
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+class RenderCache extends Canvas {
+  constructor(opts) {
+    super(opts);
+    __publicField$3(this, "key");
+    __publicField$3(this, "$memory");
+    this.key = "render-cache";
+    this.$memory = false;
+  }
+  get state() {
+    return this.$memory;
+  }
+  flush(treemap, matrix = new Matrix2D()) {
+    const { devicePixelRatio, width, height } = treemap.render.options;
+    const { a, d } = matrix;
+    const { size } = canvasBoundarySize;
+    if (width * a >= size || height * d >= size) {
+      return;
     }
-    if (asserts.isGraph(graph)) {
-      handler(graph);
-    } else if (asserts.isBox(graph) || asserts.isLayer(graph)) {
-      traverse(graph.elements, handler);
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.setOptions({ width: width * a, height: height * d, devicePixelRatio });
+    resetLayout(treemap, width * a, height * d);
+    drawGraphIntoCanvas(treemap, { c: this.canvas, ctx: this.ctx, dpr: devicePixelRatio });
+    this.$memory = true;
+    if (this.ctx.isContextLost()) {
+      this.$memory = false;
     }
   }
+  destroy() {
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.$memory = false;
+  }
 }
-const etoile = {
-  Schedule,
-  traverse
-};
-
-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;
+class FontCache {
+  constructor() {
+    __publicField$3(this, "key");
+    __publicField$3(this, "fonts");
+    __publicField$3(this, "ellispsis");
+    this.key = "font-cache";
+    this.fonts = {};
+    this.ellispsis = {};
+  }
+  get state() {
+    return true;
+  }
+  flush(treemap, matrix = new Matrix2D()) {
+    const { width, height } = treemap.render.options;
+    const { a, d } = matrix;
+    const zoomedWidth = width * a;
+    const zoomedHeight = height * d;
+    if (zoomedWidth <= width || zoomedHeight <= height) {
+      return;
     }
-    return 0.5 * ((k -= 2) * k * k + 2);
-  },
-  cubicInOut: (k) => {
-    if ((k *= 2) < 1) {
-      return 0.5 * k * k * k;
+    traverse([treemap.elements[0]], (graph) => {
+      if (asserts.isRoundRect(graph)) {
+        const { x, y, height: graphHeight, width: graphWidth } = graph;
+        if (!graphHeight || !graphWidth) {
+          return;
+        }
+        if (x >= 0 && y >= 0 && x + graphWidth <= width && y + graphHeight <= height) {
+          if (graph.__widget__) {
+            const node = graph.__widget__.node;
+            delete this.fonts[node.id];
+            delete this.ellispsis[node.label];
+          }
+        }
+      }
+    });
+  }
+  destroy() {
+    this.fonts = {};
+    this.ellispsis = {};
+  }
+  queryFontById(id, byDefault) {
+    if (!(id in this.fonts)) {
+      this.fonts[id] = byDefault();
     }
-    return 0.5 * ((k -= 2) * k * k + 2);
+    return this.fonts[id];
   }
-};
+}
 
-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;
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+const DOM_EVENTS = ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "wheel"];
+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 hash;
+  return [
+    e + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
+    f + Math.max(document.documentElement.scrollTop, document.body.scrollTop)
+  ];
 }
-function perferNumeric(s) {
-  if (typeof s === "number") return true;
-  return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
+function captureBoxXY(c, evt, a, d, translateX, translateY) {
+  const boundingClientRect = c.getBoundingClientRect();
+  if (evt instanceof MouseEvent) {
+    const [e, f] = getOffset(c);
+    return {
+      x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
+      y: (evt.clientY - boundingClientRect.top - f - translateY) / d
+    };
+  }
+  return { x: 0, y: 0 };
 }
-function createFillBlock(x, y, width, height, style) {
-  return new Rect({ width, height, x, y, style });
+function createEffectRun(c) {
+  return (fn) => {
+    const effect = () => {
+      const done = fn();
+      if (!done) {
+        c.animationFrameID = raf(effect);
+      }
+    };
+    if (!c.animationFrameID) {
+      c.animationFrameID = raf(effect);
+    }
+  };
 }
-function createTitleText(text, x, y, font, color) {
-  return new Text({
-    text,
-    x,
-    y,
-    style: { fill: color, textAlign: "center", baseline: "middle", font, lineWidth: 1 }
-  });
+function createEffectStop(c) {
+  return () => {
+    if (c.animationFrameID) {
+      window.cancelAnimationFrame(c.animationFrameID);
+      c.animationFrameID = null;
+    }
+  };
 }
-const raf = window.requestAnimationFrame;
-function createCanvasElement() {
-  return document.createElement("canvas");
+function createEffectScope() {
+  const c = {
+    animationFrameID: null
+  };
+  const run = createEffectRun(c);
+  const stop = createEffectStop(c);
+  return { run, stop };
 }
-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 bindDOMEvent(el, evt, dom) {
+  const handler = (e) => {
+    const { x, y } = captureBoxXY(el, e, 1, 1, dom.matrix.e, dom.matrix.f);
+    dom.emit(evt, { native: e, loc: { x, y } });
+  };
+  el.addEventListener(evt, handler);
+  return handler;
 }
-function mixin(app, methods) {
-  methods.forEach(({ name, fn }) => {
-    Object.defineProperty(app, name, {
-      value: fn(app),
-      writable: false
-    });
-  });
+class DOMEvent extends Event {
+  constructor(el) {
+    super();
+    __publicField$2(this, "el");
+    __publicField$2(this, "events");
+    __publicField$2(this, "matrix");
+    this.el = el;
+    this.matrix = new Matrix2D();
+    this.events = DOM_EVENTS.map((evt) => bindDOMEvent(this.el, evt, this));
+  }
+}
+
+function useMagicTrackPad(event) {
+  if (event.cancelable !== false) {
+    event.preventDefault();
+  }
+  !event.ctrlKey;
 }
 
 function sortChildrenByKey(data, ...keys) {
@@ -714,12 +913,18 @@ function sortChildrenByKey(data, ...keys) {
       const v = a[key];
       const v2 = b[key];
       if (perferNumeric(v) && perferNumeric(v2)) {
-        if (v2 > v) return 1;
-        if (v2 < v) return -1;
+        if (v2 > v) {
+          return 1;
+        }
+        if (v2 < v) {
+          return -1;
+        }
         continue;
       }
       const comparison = ("" + v).localeCompare("" + v2);
-      if (comparison !== 0) return comparison;
+      if (comparison !== 0) {
+        return comparison;
+      }
     }
     return 0;
   });
@@ -729,7 +934,9 @@ function c2m(data, key, modifier) {
     data.groups = sortChildrenByKey(data.groups.map((d) => c2m(d, key, modifier)), "weight");
   }
   const obj = { ...data, weight: data[key] };
-  if (modifier) return modifier(obj);
+  if (modifier) {
+    return modifier(obj);
+  }
   return obj;
 }
 function flatten(data) {
@@ -762,14 +969,20 @@ function getNodeDepth(node) {
   return depth;
 }
 function visit(data, fn) {
-  if (!data) return null;
+  if (!data) {
+    return null;
+  }
   for (const d of data) {
     if (d.children) {
       const result = visit(d.children, fn);
-      if (result) return result;
+      if (result) {
+        return result;
+      }
     }
     const stop = fn(d);
-    if (stop) return d;
+    if (stop) {
+      return d;
+    }
   }
   return null;
 }
@@ -789,9 +1002,292 @@ function findRelativeNodeById(id, layoutNodes) {
   });
 }
 
+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);
+function createTreemapEventState() {
+  return {
+    isDragging: false,
+    isWheeling: false,
+    isZooming: false,
+    currentNode: null,
+    forceDestroy: false,
+    dragX: 0,
+    dragY: 0
+  };
+}
+const INTERNAL_EVENT_MAPPINGS = {
+  ON_ZOOM: 1,
+  ON_CLEANUP: 3
+};
+const ANIMATION_DURATION = 300;
+const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
+function runEffect(callback, opts) {
+  const effect = createEffectScope();
+  const startTime = Date.now();
+  const condtion = (process) => {
+    if (Array.isArray(opts.deps)) {
+      return opts.deps.some((dep) => dep());
+    }
+    return process >= 1;
+  };
+  effect.run(() => {
+    const elapsed = Date.now() - startTime;
+    const progress = Math.min(elapsed / opts.duration, 1);
+    if (condtion(progress)) {
+      effect.stop();
+      if (opts.onStop) {
+        opts.onStop();
+      }
+      return true;
+    }
+    return callback(progress, effect.stop);
+  });
+}
+const HIGH_LIGHT_OPACITY = 0.3;
+function drawHighlight(treemap, evt) {
+  const { highlight } = treemap;
+  const { currentNode } = evt.state;
+  if (currentNode) {
+    const [x, y, w, h] = currentNode.layout;
+    runEffect((_, cleanup) => {
+      cleanup();
+      highlight.reset();
+      const mask = createRoundBlock(x, y, w, h, { fill, opacity: HIGH_LIGHT_OPACITY, radius: 4, padding: 2 });
+      highlight.add(mask);
+      highlight.setZIndexForHighlight("1");
+      stackMatrixTransform(mask, evt.matrix.e, evt.matrix.f, 1);
+      highlight.update();
+      if (!evt.state.currentNode) {
+        return true;
+      }
+    }, {
+      duration: ANIMATION_DURATION,
+      deps: [() => evt.state.isDragging, () => evt.state.isWheeling, () => evt.state.isZooming]
+    });
+  } else {
+    highlight.reset();
+    highlight.setZIndexForHighlight();
+  }
+}
+class TreemapEvent extends DOMEvent {
+  constructor(app, treemap) {
+    super(treemap.render.canvas);
+    __publicField$1(this, "exposedEvent");
+    __publicField$1(this, "state");
+    __publicField$1(this, "zoom");
+    this.exposedEvent = new Event();
+    this.state = createTreemapEventState();
+    const exposedMethods = [
+      { name: "on", fn: () => this.exposedEvent.bindWithContext(treemap.api) },
+      { name: "off", fn: () => this.exposedEvent.off.bind(this.exposedEvent) }
+    ];
+    DOM_EVENTS.forEach((evt) => {
+      this.on(evt, (metadata) => {
+        this.dispatch({ type: evt, treemap }, metadata);
+      });
+    });
+    mixin(app, exposedMethods);
+    treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP, () => {
+      this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
+      this.state = createTreemapEventState();
+    });
+    this.zoom = createOnZoom(treemap, this);
+    treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, this.zoom);
+  }
+  dispatch(ctx, metadata) {
+    const node = findRelativeNode(metadata.loc, ctx.treemap.layoutNodes);
+    const fn = prettyStrJoin("on", ctx.type);
+    if (typeof this[fn] === "function") {
+      this[fn](ctx, metadata, node);
+    }
+    if (ctx.type === "mousemove") {
+      if (this.state.isDragging) {
+        this.exposedEvent.silent("click");
+      } else {
+        this.exposedEvent.active("click");
+      }
+    }
+    this.exposedEvent.emit(ctx.type === "macOSWheel" ? "wheel" : ctx.type, { native: metadata.native, module: node });
+  }
+  onmousemove(ctx, metadata, node) {
+    if (!this.state.isDragging) {
+      if (this.state.currentNode !== node || !node) {
+        this.state.currentNode = node;
+      }
+      drawHighlight(ctx.treemap, this);
+    } else {
+      const { treemap } = ctx;
+      runEffect((_, cleanup) => {
+        cleanup();
+        const { offsetX: x, offsetY: y } = metadata.native;
+        const { dragX: lastX, dragY: lastY } = this.state;
+        const drawX = x - lastX;
+        const drawY = y - lastY;
+        treemap.highlight.reset();
+        treemap.highlight.setZIndexForHighlight();
+        treemap.reset();
+        this.matrix.translation(drawX, drawY);
+        Object.assign(this.state, { isDragging: true, dragX: x, dragY: y });
+        stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
+        treemap.update();
+        return true;
+      }, {
+        duration: ANIMATION_DURATION,
+        deps: [() => this.state.forceDestroy],
+        onStop: () => {
+          this.state.isDragging = false;
+        }
+      });
+    }
+  }
+  onmouseout(ctx) {
+    this.state.currentNode = null;
+    drawHighlight(ctx.treemap, this);
+  }
+  onmousedown(ctx, metadata) {
+    if (isScrollWheelOrRightButtonOnMouseupAndDown(metadata.native)) {
+      return;
+    }
+    this.state.isDragging = true;
+    this.state.dragX = metadata.native.offsetX;
+    this.state.dragY = metadata.native.offsetY;
+    this.state.forceDestroy = false;
+    if (!ctx.treemap.renderCache.state) {
+      this.exposedEvent.silent("mousemove");
+      this.silent("mousemove");
+      ctx.treemap.renderCache.flush(ctx.treemap, this.matrix);
+      this.active("mousemove");
+      this.exposedEvent.active("mousemove");
+    }
+  }
+  onmouseup(ctx) {
+    if (!this.state.isDragging) {
+      return;
+    }
+    this.state.forceDestroy = true;
+    this.state.isDragging = false;
+    const { treemap } = ctx;
+    treemap.highlight.reset();
+    treemap.highlight.setZIndexForHighlight();
+  }
+  onwheel(ctx, metadata) {
+    ctx.treemap.renderCache.destroy();
+    const { native } = metadata;
+    const { treemap } = ctx;
+    const wheelDelta = native.wheelDelta;
+    const absWheelDelta = Math.abs(wheelDelta);
+    const offsetX = native.offsetX;
+    const offsetY = native.offsetY;
+    if (wheelDelta === 0) {
+      return;
+    }
+    this.state.forceDestroy = true;
+    const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
+    const delta = wheelDelta > 0 ? factor : 1 / factor;
+    const targetScaleRatio = this.matrix.a * delta;
+    const translateX = offsetX - (offsetX - this.matrix.e) * delta;
+    const translateY = offsetY - (offsetY - this.matrix.f) * delta;
+    runEffect((progress, cleanup) => {
+      this.silent("mousedown");
+      this.exposedEvent.silent("mousemove");
+      this.silent("mousemove");
+      this.silent("click");
+      this.exposedEvent.silent("click");
+      cleanup();
+      treemap.highlight.reset();
+      treemap.highlight.setZIndexForHighlight();
+      treemap.fontCache.flush(treemap, this.matrix);
+      this.state.isWheeling = true;
+      const easedProgress = easing.cubicInOut(progress);
+      const scale = (targetScaleRatio - this.matrix.a) * easedProgress;
+      this.matrix.a += scale;
+      this.matrix.d += scale;
+      this.matrix.translation((translateX - this.matrix.e) * easedProgress, (translateY - this.matrix.f) * easedProgress);
+      resetLayout(
+        treemap,
+        treemap.render.canvas.width * this.matrix.a / treemap.render.options.devicePixelRatio,
+        treemap.render.canvas.height * this.matrix.d / treemap.render.options.devicePixelRatio
+      );
+      stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
+      treemap.update();
+    }, {
+      duration: ANIMATION_DURATION,
+      onStop: () => {
+        this.state.forceDestroy = false;
+        this.state.isWheeling = false;
+        this.active("mousedown");
+        this.active("mousemove");
+        this.exposedEvent.active("mousemove");
+        this.active("click");
+        this.exposedEvent.active("click");
+      }
+    });
+  }
+  onmacOSWheel(ctx, metadata) {
+    useMagicTrackPad(metadata.native);
+  }
+}
+function stackMatrixTransform(graph, e, f, scale) {
+  graph.x = graph.x * scale + e;
+  graph.y = graph.y * scale + f;
+  graph.scaleX = scale;
+  graph.scaleY = scale;
+}
+function stackMatrixTransformWithGraphAndLayer(graphs, e, f, scale) {
+  traverse(graphs, (graph) => stackMatrixTransform(graph, e, f, scale));
+}
+function isScrollWheelOrRightButtonOnMouseupAndDown(e) {
+  return e.which === 2 || e.which === 3;
+}
+function createOnZoom(treemap, evt) {
+  return (node) => {
+    treemap.renderCache.destroy();
+    evt.state.isZooming = true;
+    const c = treemap.render.canvas;
+    const boundingClientRect = c.getBoundingClientRect();
+    if (node) {
+      const [mx, my, mw, mh] = node.layout;
+      const factor = Math.min(boundingClientRect.width / mw, boundingClientRect.height / mh);
+      const targetScale = factor * evt.matrix.a;
+      const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * factor;
+      const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
+      runEffect((progress, cleanup) => {
+        cleanup();
+        treemap.fontCache.flush(treemap, evt.matrix);
+        const easedProgress = easing.cubicInOut(progress);
+        const scale = (targetScale - evt.matrix.a) * easedProgress;
+        evt.matrix.a += scale;
+        evt.matrix.d += scale;
+        evt.matrix.translation((translateX - evt.matrix.e) * easedProgress, (translateY - evt.matrix.f) * easedProgress);
+        resetLayout(
+          treemap,
+          treemap.render.canvas.width * evt.matrix.a / treemap.render.options.devicePixelRatio,
+          treemap.render.canvas.height * evt.matrix.d / treemap.render.options.devicePixelRatio
+        );
+        stackMatrixTransformWithGraphAndLayer(treemap.elements, evt.matrix.e, evt.matrix.f, 1);
+        treemap.update();
+      }, {
+        duration: ANIMATION_DURATION,
+        onStop: () => {
+          evt.state.isZooming = false;
+        }
+      });
+    }
+  };
+}
+
+function register(Mod) {
+  return (app, treemap) => {
+    new Mod(app, treemap);
+  };
+}
+
 function squarify(data, rect, layoutDecorator) {
   const result = [];
-  if (!data.length) return 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;
@@ -814,7 +1310,9 @@ function squarify(data, rect, layoutDecorator) {
       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;
+        if (end > start && oldWorst < newWorst) {
+          break;
+        }
         areaInRun += area;
         oldWorst = newWorst;
         end++;
@@ -861,464 +1359,9 @@ function squarify(data, rect, layoutDecorator) {
   return result;
 }
 
-function applyForOpacity(graph, lastState, nextState, easedProgress) {
-  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 {
-}
-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."));
-}
-
-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 internalEventMappings = {
-  CLEAN_UP: "self:cleanup",
-  ON_LOAD: "self:onload",
-  ON_ZOOM: "zoom"
-};
-const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
-function smoothDrawing(c) {
-  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(internalEventMappings.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)
-  ];
-}
-function captureBoxXY(c, evt, a, d, translateX, translateY) {
-  const boundingClientRect = c.getBoundingClientRect();
-  if (evt instanceof MouseEvent) {
-    const [e, f] = getOffset(c);
-    return {
-      x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
-      y: (evt.clientY - boundingClientRect.top - f - translateY) / d
-    };
-  }
-  return { x: 0, y: 0 };
-}
-function 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({ x, y }, treemap.layoutNodes)
-    };
-    bus.emit(evt, event);
-  };
-  c.addEventListener(evt, handler);
-  return handler;
-}
-class SelfEvent extends RegisterModule {
-  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);
-        }
-      }
-      return;
-    }
-    this.self.highlight.reset();
-    this.self.highlight.setDisplayLayerForHighlight();
-    this.self.event.off("mousemove", this.self.onmousemove);
-    this.treemap.event.off(internalEventMappings.ON_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();
-    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();
-    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(internalEventMappings.ON_LOAD, (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(internalEventMappings.CLEAN_UP, () => {
-      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];
-}
-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;
-  self.forceDestroy = true;
-  const c = treemap.render.canvas;
-  const boundingClientRect = c.getBoundingClientRect();
-  const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
-  if (self.layoutHeight !== w || self.layoutHeight !== h) {
-    delete treemap.fontsCaches[node.node.id];
-    delete treemap.ellispsisWidthCache[node.node.id];
-  }
-  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 { 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;
-}
-function isScrollWheelOrRightButtonOnMouseupAndDown(e) {
-  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, self } = c;
-  const { backgroundLayer, render } = treemap;
-  const { canvas, ctx, options: { width: ow, height: oh } } = render;
-  const { layoutWidth: sw, layoutHeight: sh, scaleRatio: ss } = self;
-  const capture = sw * ss >= ow && sh * ss >= oh;
-  backgroundLayer.__refresh__ = false;
-  if (!capture && !self.forceDestroy) {
-    resetLayout(treemap, sw * ss, sh * ss);
-    render.clear(ow, oh);
-    const { dpr } = backgroundLayer.cleanCacheSnapshot();
-    drawGraphIntoCanvas(backgroundLayer, { c: canvas, ctx, dpr }, (opts, graph) => {
-      if (asserts.isLayer(graph) && !graph.__refresh__) {
-        graph.setCacheSnapshot(opts.c);
-      }
-    });
-    self.triggerZoom = false;
-    return true;
-  }
-}
-
 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())
-];
 function measureTextWidth(c, text) {
   return c.measureText(text).width;
 }
@@ -1368,60 +1411,83 @@ function resetLayout(treemap, w, h) {
   treemap.layoutNodes = squarify(treemap.data, { w, h, x: 0, y: 0 }, treemap.decorator.layout);
   treemap.reset(true);
 }
-class TreemapLayout extends etoile.Schedule {
+class Highlight extends Schedule {
+  reset() {
+    this.destory();
+    this.update();
+  }
+  get canvas() {
+    return this.render.canvas;
+  }
+  setZIndexForHighlight(zIndex = "-1") {
+    this.canvas.style.zIndex = zIndex;
+  }
+  init() {
+    this.setZIndexForHighlight();
+    this.canvas.style.position = "absolute";
+    this.canvas.style.pointerEvents = "none";
+  }
+}
+class TreemapLayout extends Schedule {
   constructor(...args) {
     super(...args);
     __publicField(this, "data");
     __publicField(this, "layoutNodes");
     __publicField(this, "decorator");
-    __publicField(this, "bgLayer");
+    __publicField(this, "bgBox");
     __publicField(this, "fgBox");
-    __publicField(this, "fontsCaches");
-    __publicField(this, "ellispsisWidthCache");
+    __publicField(this, "highlight");
+    __publicField(this, "renderCache");
+    __publicField(this, "fontCache");
     this.data = [];
     this.layoutNodes = [];
-    this.bgLayer = new Layer();
+    this.bgBox = new Box();
     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);
+    this.highlight = new Highlight(this.to, { width: this.render.options.width, height: this.render.options.height });
+    this.renderCache = new RenderCache(this.render.options);
+    this.fontCache = new FontCache();
   }
   drawBackgroundNode(node) {
     const [x, y, w, h] = node.layout;
+    const padding = 2;
+    if (w - padding * 2 <= 0 || h - padding * 2 <= 0) {
+      return;
+    }
     const fill = this.decorator.color.mappings[node.node.id];
-    const s = createFillBlock(x, y, w, h, { fill });
-    this.bgLayer.add(s);
+    const rect = createRoundBlock(x, y, w, h, { fill, padding, radius: 4 });
+    rect.__widget__ = node;
+    this.bgBox.add(rect);
     for (const child of node.children) {
       this.drawBackgroundNode(child);
     }
   }
   drawForegroundNode(node) {
     const [x, y, w, h] = node.layout;
-    if (!w || !h) return;
-    const { 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;
+    if (!w || !h) {
+      return;
     }
+    const { titleHeight, rectGap } = node.decorator;
+    const { fontSize, fontFamily, color } = this.decorator.font;
+    const optimalFontSize = this.fontCache.queryFontById(node.node.id, () => evaluateOptimalFontSize(
+      this.render.ctx,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      node.node.label,
+      {
+        range: fontSize,
+        family: fontFamily
+      },
+      w - rectGap * 2,
+      node.children.length ? Math.round(titleHeight / 2) + rectGap : h
+    ));
     this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
-    const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2, this.ellispsisWidthCache);
-    if (!result) return;
-    if (result.width >= w || optimalFontSize >= h) return;
+    const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2, this.fontCache.ellispsis);
+    if (!result) {
+      return;
+    }
+    if (result.width >= w || optimalFontSize >= h) {
+      return;
+    }
     const { text, width } = result;
     const textX = x + Math.round((w - width) / 2);
     const textY = y + (node.children.length ? Math.round(titleHeight / 2) : Math.round(h / 2));
@@ -1431,36 +1497,37 @@ class TreemapLayout extends etoile.Schedule {
     }
   }
   reset(refresh = false) {
-    this.remove(this.bgLayer, this.fgBox);
-    if (!this.bgLayer.__refresh__) {
-      this.bgLayer.destory();
+    this.remove(this.bgBox, this.fgBox);
+    this.bgBox.destory();
+    if (this.renderCache.state) {
+      this.fgBox.destory();
+      this.bgBox.add(new Bitmap({ bitmap: this.renderCache.canvas, dpi: this.render.options.devicePixelRatio }));
+    } else {
       for (const node of this.layoutNodes) {
         this.drawBackgroundNode(node);
       }
-    } else {
-      this.bgLayer.initLoc();
-    }
-    if (!this.fgBox.elements.length || refresh) {
-      this.render.ctx.textBaseline = "middle";
-      this.fgBox.destory();
-      for (const node of this.layoutNodes) {
-        this.drawForegroundNode(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();
       }
-    } else {
-      this.fgBox = this.fgBox.clone();
     }
-    this.add(this.bgLayer, this.fgBox);
+    this.add(this.bgBox, this.fgBox);
   }
   get api() {
     return {
       zoom: (node) => {
-        this.event.emit(internalEventMappings.ON_ZOOM, node);
+        if (!node) {
+          return;
+        }
+        this.event.emit(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, node);
       }
     };
   }
-  get backgroundLayer() {
-    return this.bgLayer;
-  }
 }
 function createTreemap() {
   let treemap = null;
@@ -1480,9 +1547,7 @@ function createTreemap() {
     root = el;
     root.style.position = "relative";
     if (!installed) {
-      for (const registry of defaultRegistries) {
-        registry(context, treemap, treemap.render);
-      }
+      register(TreemapEvent)(context, treemap);
       installed = true;
     }
   }
@@ -1495,23 +1560,25 @@ function createTreemap() {
     }
   }
   function resize() {
-    if (!treemap || !root) return;
+    if (!treemap || !root) {
+      return;
+    }
+    treemap.renderCache.destroy();
+    treemap.fontCache.destroy();
     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(internalEventMappings.CLEAN_UP);
-    treemap.event.emit(internalEventMappings.ON_LOAD, width, height, root);
+    treemap.event.emit(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP);
+    treemap.highlight.render.initOptions({ height, width, devicePixelRatio: window.devicePixelRatio });
+    treemap.highlight.reset();
+    treemap.highlight.init();
     resetLayout(treemap, width, height);
     treemap.update();
+    treemap.renderCache.flush(treemap, treemap.matrix);
   }
   function setOptions(options) {
     if (!treemap) {
-      throw new Error("Treemap not initialized");
+      throw new Error(log.error("Treemap not initialized"));
     }
     treemap.data = bindParentForModule(options.data || []);
     for (const use2 of uses) {
@@ -1519,27 +1586,29 @@ function createTreemap() {
     }
     resize();
   }
-  function use(key, register) {
+  function use(key, register2) {
     switch (key) {
       case "decorator":
-        uses.push((treemap2) => register(treemap2));
+        uses.push((treemap2) => register2(treemap2));
         break;
     }
   }
   function zoom(id) {
     if (!treemap) {
-      throw new Error("treemap don't init.");
+      throw new Error(log.error("treemap don't init."));
     }
     const node = findRelativeNodeById(id, treemap.layoutNodes);
-    node && treemap.api.zoom(node);
+    if (node) {
+      treemap.api.zoom(node);
+    }
   }
   return context;
 }
 
 const defaultLayoutOptions = {
   titleAreaHeight: {
-    max: 80,
-    min: 20
+    max: 60,
+    min: 30
   },
   rectGap: 5,
   rectBorderRadius: 0.5,
@@ -1548,8 +1617,8 @@ const defaultLayoutOptions = {
 const defaultFontOptions = {
   color: "#000",
   fontSize: {
-    max: 38,
-    min: 7
+    max: 70,
+    min: 0
   },
   fontFamily: "sans-serif"
 };
@@ -1566,9 +1635,9 @@ function evaluateColorMappings(data) {
     const hash = Math.abs(hashCode(id));
     return hash % 360;
   };
-  const lightScale = (depth) => 70 - depth * 5;
-  const baseSaturation = 40;
-  const siblingHueShift = 20;
+  const lightScale = (depth) => 60 - depth * 5;
+  const baseSaturation = 70;
+  const siblingHueShift = 30;
   const rc = 0.2126;
   const gc = 0.7152;
   const bc = 0.0722;
@@ -1595,8 +1664,8 @@ function evaluateColorMappings(data) {
     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.15;
+    } else if (luminance > 0.65) {
       hslColor.l -= 0.1;
     }
     hslColor.l *= 100;