squarified 0.1.2 → 0.2.0

package/dist/index.js

@@ -20,11 +20,7 @@ class Matrix2D {
     this.f = loc.f || 0;
   }
   create(loc) {
-    for (const { key, value } of new Iter(loc)) {
-      if (Object.hasOwnProperty.call(this, key)) {
-        this[key] = value;
-      }
-    }
+    Object.assign(this, loc);
     return this;
   }
   transform(x, y, scaleX, scaleY, rotation, skewX, skewY) {
@@ -91,6 +87,7 @@ var DisplayType = /* @__PURE__ */ ((DisplayType2) => {
   DisplayType2["Box"] = "Box";
   DisplayType2["Rect"] = "Rect";
   DisplayType2["Text"] = "Text";
+  DisplayType2["Layer"] = "Layer";
   return DisplayType2;
 })(DisplayType || {});
 class Display {
@@ -172,10 +169,8 @@ class Graph extends S {
   constructor(options = {}) {
     super(options);
     __publicField$9(this, "instruction");
-    __publicField$9(this, "__refresh__");
     __publicField$9(this, "__options__");
     this.instruction = createInstruction();
-    this.__refresh__ = true;
     this.__options__ = options;
   }
   render(ctx) {
@@ -208,17 +203,53 @@ function isRect(display) {
 function isText(display) {
   return isGraph(display) && display.__shape__ === DisplayType.Text;
 }
+function isLayer(display) {
+  return display.__instanceOf__ === DisplayType.Layer;
+}
 const asserts = {
   isGraph,
   isBox,
   isRect,
-  isText
+  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 Box extends Display {
+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;
+        }
+      }
+    }
+  }
+  destory() {
+    this.elements.forEach((element) => element.parent = null);
+    this.elements.length = 0;
+  }
+}
+class Box extends C {
   constructor() {
     super();
     __publicField$8(this, "elements");
@@ -279,6 +310,126 @@ class Box extends Display {
   }
 }
 
+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;
+  }
+}
+
 function decodeHLS(meta) {
   const { h, l, s, a } = meta;
   if ("a" in meta) {
@@ -304,13 +455,13 @@ const runtime = {
   evaluateFillStyle
 };
 
-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, key + "" , value);
+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 {
   constructor(options = {}) {
     super(options);
-    __publicField$7(this, "style");
+    __publicField$5(this, "style");
     this.style = options.style || /* @__PURE__ */ Object.create(null);
   }
   get __shape__() {
@@ -334,14 +485,14 @@ class Rect extends Graph {
   }
 }
 
-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);
+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 {
   constructor(options = {}) {
     super(options);
-    __publicField$6(this, "text");
-    __publicField$6(this, "style");
+    __publicField$4(this, "text");
+    __publicField$4(this, "style");
     this.text = options.text || "";
     this.style = options.style || /* @__PURE__ */ Object.create(null);
   }
@@ -362,12 +513,12 @@ class Text extends Graph {
   }
 }
 
-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);
+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 {
   constructor() {
-    __publicField$5(this, "eventCollections");
+    __publicField$3(this, "eventCollections");
     this.eventCollections = /* @__PURE__ */ Object.create(null);
   }
   on(evt, handler, c) {
@@ -411,47 +562,39 @@ const log = {
   }
 };
 
-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 Render {
-  constructor(to, options) {
-    __publicField$4(this, "canvas");
-    __publicField$4(this, "ctx");
-    __publicField$4(this, "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);
+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);
   }
-  destory() {
+  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();
 }
-
-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);
-let Schedule$1 = class Schedule extends Box {
+class Schedule extends Box {
   constructor(to, renderOptions = {}) {
     super();
-    __publicField$3(this, "render");
-    __publicField$3(this, "to");
-    __publicField$3(this, "event");
+    __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."));
@@ -461,63 +604,42 @@ let Schedule$1 = class Schedule extends Box {
     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);
+    applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
   }
   // execute all graph elements
   execute(render, graph = this) {
-    render.ctx.save();
-    if (asserts.isBox(graph)) {
-      const elements = graph.elements;
-      const cap = elements.length;
-      const matrices = new Array(cap);
-      for (let i = 0; i < cap; i++) {
-        const element = elements[i];
-        if (asserts.isGraph(element)) {
-          matrices[i] = element.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
-          matrices[i].transform(element.x, element.y, element.scaleX, element.scaleY, element.rotation, element.skewX, element.skewY);
+    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);
         }
       }
-      for (let i = 0; i < cap; i++) {
-        const element = elements[i];
-        this.execute(render, element);
-      }
-    }
-    if (asserts.isGraph(graph)) {
-      const matrix = graph.matrix;
-      this.applyTransform(matrix);
-      graph.render(render.ctx);
-    }
-    render.ctx.restore();
+    });
   }
-};
+}
 
 function traverse(graphs, handler) {
   const len = graphs.length;
   for (let i = 0; i < len; i++) {
     const graph = graphs[i];
-    if (asserts.isBox(graph)) {
-      traverse(graph.elements, handler);
-    } else if (asserts.isGraph(graph)) {
+    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,
+  Schedule,
   traverse
 };
 
@@ -546,27 +668,14 @@ const easing = {
   }
 };
 
-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);
-class Iter {
-  constructor(data) {
-    __publicField$2(this, "keys");
-    __publicField$2(this, "data");
-    this.data = data;
-    this.keys = Object.keys(data);
-  }
-  // dprint-ignore
-  *[Symbol.iterator]() {
-    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]
-      };
-    }
-  }
+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;
@@ -584,6 +693,20 @@ function createTitleText(text, x, y, font, color) {
   });
 }
 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) => {
@@ -748,9 +871,7 @@ function createEffectRun(c) {
   return (fn) => {
     const effect = () => {
       const done = fn();
-      if (done) {
-        c.animationFrameID = null;
-      } else {
+      if (!done) {
         c.animationFrameID = raf(effect);
       }
     };
@@ -777,14 +898,6 @@ function createEffectScope() {
 }
 
 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) {
@@ -799,33 +912,34 @@ var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !==
 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 { self } = c;
   const currentNode = self.currentNode;
   if (currentNode) {
-    const { run, stop } = createEffectScope();
+    const effect = createEffectScope();
     const startTime = Date.now();
     const animationDuration = 300;
     const [x, y, w, h] = currentNode.layout;
-    run(() => {
-      if (self.forceDestroy) {
-        stop();
-        return true;
-      }
+    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 });
-      treemap.reset();
+      self.highlight.highlight.add(mask);
+      self.highlight.setDisplayLayerForHighlight("1");
       applyForOpacity(mask, 0.4, 0.4, easedProgress);
-      treemap.bgBox.add(mask);
-      applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
-      treemap.update();
-      return progress >= 1;
+      stackMatrixTransform(mask, self.translateX, self.translateY, self.scaleRatio);
+      self.highlight.highlight.update();
     });
   } else {
-    treemap.reset();
-    applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
-    treemap.update();
+    self.highlight.reset();
+    self.highlight.setDisplayLayerForHighlight();
   }
 }
 function applyZoomEvent(ctx) {
@@ -864,9 +978,8 @@ function captureBoxXY(c, evt, a, d, translateX, translateY) {
   }
   return { x: 0, y: 0 };
 }
-function bindPrimitiveEvent(ctx, evt, bus) {
+function bindPrimitiveEvent(c, ctx, evt, bus) {
   const { treemap, self } = ctx;
-  const c = treemap.render.canvas;
   const handler = (e) => {
     const { x, y } = captureBoxXY(
       c,
@@ -898,6 +1011,9 @@ class SelfEvent extends RegisterModule {
     __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;
@@ -908,6 +1024,8 @@ class SelfEvent extends RegisterModule {
     this.layoutHeight = 0;
     this.draggingState = { x: 0, y: 0 };
     this.event = new Event();
+    this.triggerZoom = false;
+    this.highlight = createHighlight();
   }
   ondragstart(metadata) {
     const { native } = metadata;
@@ -929,6 +1047,8 @@ class SelfEvent extends RegisterModule {
       }
       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;
@@ -941,23 +1061,26 @@ class SelfEvent extends RegisterModule {
     this.self.translateX += drawX;
     this.self.translateY += drawY;
     this.self.draggingState = { x, y };
+    if (this.self.triggerZoom) {
+      refreshBackgroundLayer(this);
+    }
     this.treemap.reset();
-    applyGraphTransform(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
+    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
+    stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
     this.treemap.update();
   }
-  ondragend(metadata) {
+  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;
-    if (self.isDragging) {
-      return;
-    }
     const { module: node } = metadata;
     self.forceDestroy = false;
     if (self.currentNode !== node) {
@@ -969,7 +1092,6 @@ class SelfEvent extends RegisterModule {
     const { self } = this;
     self.currentNode = null;
     self.forceDestroy = true;
-    self.isDragging = false;
     smoothDrawing(this);
   }
   onwheel(metadata) {
@@ -982,7 +1104,13 @@ class SelfEvent extends RegisterModule {
       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;
@@ -990,11 +1118,11 @@ class SelfEvent extends RegisterModule {
     const translateY = offsetY - (offsetY - self.translateY) * delta;
     self.translateX = translateX;
     self.translateY = translateY;
-    applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
+    stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
     treemap.update();
     self.forceDestroy = false;
   }
-  init(app, treemap, render) {
+  init(app, treemap) {
     const event = this.event;
     const nativeEvents = [];
     const methods = [
@@ -1011,19 +1139,30 @@ class SelfEvent extends RegisterModule {
         fn: () => event.emit.bind(event)
       }
     ];
-    RegisterModule.mixin(app, methods);
+    mixin(app, methods);
     const selfEvents = [...primitiveEvents, "wheel"];
     selfEvents.forEach((evt) => {
-      nativeEvents.push(bindPrimitiveEvent({ treemap, self: this }, evt, event));
+      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("mousemove", this.onmousemove);
-    selfEvt("mouseout", this.onmouseout);
     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;
@@ -1032,6 +1171,7 @@ class SelfEvent extends RegisterModule {
       this.layoutWidth = treemap.render.canvas.width;
       this.layoutHeight = treemap.render.canvas.height;
       this.isDragging = false;
+      this.triggerZoom = false;
       this.draggingState = { x: 0, y: 0 };
     });
   }
@@ -1060,17 +1200,19 @@ function estimateZoomingArea(node, root, w, h) {
   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;
+  self.forceDestroy = true;
   const c = treemap.render.canvas;
   const boundingClientRect = c.getBoundingClientRect();
   const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
@@ -1094,10 +1236,14 @@ function onZoom(ctx, node, root) {
     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;
@@ -1105,9 +1251,8 @@ function onZoom(ctx, node, root) {
       self.translateY = initialTranslateY + (translateY - initialTranslateY) * easedProgress;
       self.scaleRatio = scaleRatio;
       treemap.reset();
-      applyGraphTransform(treemap.elements, self.translateX, self.translateY, scaleRatio);
+      stackMatrixTransformWithGraphAndLayer(treemap.elements, self.translateX, self.translateY, scaleRatio);
       treemap.update();
-      return progress >= 1;
     });
   }
   root = node;
@@ -1115,6 +1260,40 @@ function onZoom(ctx, node, root) {
 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 } = 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;
@@ -1169,33 +1348,32 @@ function getSafeText(c, text, width, cache) {
 }
 function resetLayout(treemap, w, h) {
   treemap.layoutNodes = squarify(treemap.data, { w, h, x: 0, y: 0 }, treemap.decorator.layout);
-  treemap.reset();
+  treemap.reset(true);
 }
-class Schedule extends etoile.Schedule {
-}
-class TreemapLayout extends Schedule {
+class TreemapLayout extends etoile.Schedule {
   constructor(...args) {
     super(...args);
     __publicField(this, "data");
     __publicField(this, "layoutNodes");
     __publicField(this, "decorator");
-    __publicField(this, "bgBox");
+    __publicField(this, "bgLayer");
     __publicField(this, "fgBox");
     __publicField(this, "fontsCaches");
     __publicField(this, "ellispsisWidthCache");
     this.data = [];
     this.layoutNodes = [];
-    this.bgBox = new Box();
+    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.bgBox.add(s);
+    this.bgLayer.add(s);
     for (const child of node.children) {
       this.drawBackgroundNode(child);
     }
@@ -1212,7 +1390,7 @@ class TreemapLayout extends Schedule {
     } else {
       optimalFontSize = evaluateOptimalFontSize(
         this.render.ctx,
-        node.node.id,
+        node.node.label,
         {
           range: fontSize,
           family: fontFamily
@@ -1223,7 +1401,7 @@ class TreemapLayout extends Schedule {
       this.fontsCaches[node.node.id] = optimalFontSize;
     }
     this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
-    const result = getSafeText(this.render.ctx, node.node.id, w - rectGap * 2, this.ellispsisWidthCache);
+    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;
@@ -1234,16 +1412,24 @@ class TreemapLayout extends Schedule {
       this.drawForegroundNode(child);
     }
   }
-  reset() {
-    this.bgBox.destory();
-    this.fgBox.destory();
-    this.remove(this.bgBox, this.fgBox);
-    this.render.ctx.textBaseline = "middle";
-    for (const node of this.layoutNodes) {
-      this.drawBackgroundNode(node);
-      this.drawForegroundNode(node);
+  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.bgBox, this.fgBox);
+    this.add(this.bgLayer, this.fgBox);
   }
   get api() {
     return {
@@ -1252,6 +1438,9 @@ class TreemapLayout extends Schedule {
       }
     };
   }
+  get backgroundLayer() {
+    return this.bgLayer;
+  }
 }
 function createTreemap() {
   let treemap = null;
@@ -1269,6 +1458,13 @@ function createTreemap() {
   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) {
@@ -1281,9 +1477,15 @@ function createTreemap() {
   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();
   }
@@ -1292,12 +1494,6 @@ function createTreemap() {
       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 use2 of uses) {
       use2(treemap);
     }
@@ -1341,54 +1537,66 @@ function presetDecorator(app) {
   Object.assign(app.decorator, {
     layout: defaultLayoutOptions,
     font: defaultFontOptions,
-    color: colorMappings(app)
+    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;
   };
-}
-function evaluateColorMappingByNode(node, state) {
-  const colorMappings2 = {};
-  if (node.groups && Array.isArray(node.groups)) {
-    for (const child of node.groups) {
-      Object.assign(colorMappings2, evaluateColorMappingByNode(child, state));
+  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);
+    };
+    return { r: f(0), g: f(8), b: f(4) };
+  };
+  const calculateLuminance = (r, g, b) => {
+    return rc * r + gc * g + bc * b;
+  };
+  const calculateColor = (module, depth, parentHue, siblingIndex, totalSiblings) => {
+    const nodeHue = hashToHue(module.id);
+    const hue = parentHue !== null ? (parentHue + siblingHueShift * siblingIndex / totalSiblings) % 360 : nodeHue;
+    const lightness = lightScale(depth);
+    const hslColor = {
+      h: hue,
+      s: baseSaturation,
+      l: lightness / 100
+    };
+    const { r, g, b } = hslToRgb(hslColor.h, hslColor.s / 100, hslColor.l);
+    const luminance = calculateLuminance(r, g, b);
+    if (luminance < 0.6) {
+      hslColor.l += 0.2;
+    } else if (luminance > 0.8) {
+      hslColor.l -= 0.1;
+    }
+    hslColor.l *= 100;
+    colorMappings[module.id] = {
+      mode: "hsl",
+      desc: hslColor
+    };
+    if (module.groups && Array.isArray(module.groups)) {
+      const totalChildren = module.groups.length;
+      for (let i = 0; i < totalChildren; i++) {
+        const child = module.groups[i];
+        calculateColor(child, depth + 1, hue, i, totalChildren);
+      }
     }
-  }
-  if (node.id) {
-    colorMappings2[node.id] = colorDecorator(node, state);
-  }
-  return colorMappings2;
-}
-function colorMappings(app) {
-  const colorMappings2 = {};
-  const state = {
-    hue: 0
   };
-  for (const node of app.data) {
-    Object.assign(colorMappings2, evaluateColorMappingByNode(node, state));
+  for (let i = 0; i < data.length; i++) {
+    const module = data[i];
+    calculateColor(module, 0, null, i, data.length);
   }
-  return { mappings: colorMappings2 };
+  return colorMappings;
 }
 
 exports.TreemapLayout = TreemapLayout;