squarified 0.3.6 → 0.4.0

package/dist/index.mjs

@@ -1,1695 +1,72 @@
-var __defProp$c = Object.defineProperty;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$c = (obj, key, value) => __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
-const DEG_TO_RAD = Math.PI / 180;
-class Matrix2D {
-  constructor(loc = {}) {
-    __publicField$c(this, "a");
-    __publicField$c(this, "b");
-    __publicField$c(this, "c");
-    __publicField$c(this, "d");
-    __publicField$c(this, "e");
-    __publicField$c(this, "f");
-    this.a = loc.a || 1;
-    this.b = loc.b || 0;
-    this.c = loc.c || 0;
-    this.d = loc.d || 1;
-    this.e = loc.e || 0;
-    this.f = loc.f || 0;
-  }
-  create(loc) {
-    Object.assign(this, loc);
-    return this;
-  }
-  transform(x, y, scaleX, scaleY, rotation, skewX, skewY) {
-    this.scale(scaleX, scaleY).translation(x, y);
-    if (skewX || skewY) {
-      this.skew(skewX, skewY);
-    } else {
-      this.roate(rotation);
-    }
-    return this;
-  }
-  translation(x, y) {
-    this.e += x;
-    this.f += y;
-    return this;
-  }
-  scale(a, d) {
-    this.a *= a;
-    this.d *= d;
-    return this;
-  }
-  skew(x, y) {
-    const tanX = Math.tan(x * DEG_TO_RAD);
-    const tanY = Math.tan(y * DEG_TO_RAD);
-    const a = this.a + this.b * tanX;
-    const b = this.b + this.a * tanY;
-    const c = this.c + this.d * tanX;
-    const d = this.d + this.c * tanY;
-    this.a = a;
-    this.b = b;
-    this.c = c;
-    this.d = d;
-    return this;
-  }
-  roate(rotation) {
-    if (rotation > 0) {
-      const rad = rotation * DEG_TO_RAD;
-      const cosTheta = Math.cos(rad);
-      const sinTheta = Math.sin(rad);
-      const a = this.a * cosTheta - this.b * sinTheta;
-      const b = this.a * sinTheta + this.b * cosTheta;
-      const c = this.c * cosTheta - this.d * sinTheta;
-      const d = this.c * sinTheta + this.d * cosTheta;
-      this.a = a;
-      this.b = b;
-      this.c = c;
-      this.d = d;
-    }
-    return this;
-  }
-}
-
-var __defProp$b = Object.defineProperty;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$b = (obj, key, value) => __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
-const SELF_ID = {
-  id: 0,
-  get() {
-    return this.id++;
-  }
-};
-var DisplayType = /* @__PURE__ */ ((DisplayType2) => {
-  DisplayType2["Graph"] = "Graph";
-  DisplayType2["Box"] = "Box";
-  DisplayType2["Text"] = "Text";
-  DisplayType2["RoundRect"] = "RoundRect";
-  DisplayType2["Bitmap"] = "Bitmap";
-  return DisplayType2;
-})(DisplayType || {});
-class Display {
-  constructor() {
-    __publicField$b(this, "parent");
-    __publicField$b(this, "id");
-    __publicField$b(this, "matrix");
-    this.parent = null;
-    this.id = SELF_ID.get();
-    this.matrix = new Matrix2D();
-  }
-  destory() {
-  }
-}
-const ASSIGN_MAPPINGS = {
-  fillStyle: 1,
-  strokeStyle: 2,
-  font: 4,
-  lineWidth: 8,
-  textAlign: 16,
-  textBaseline: 32
-};
-const ASSIGN_MAPPINGS_MODE = ASSIGN_MAPPINGS.fillStyle | ASSIGN_MAPPINGS.strokeStyle | ASSIGN_MAPPINGS.font | ASSIGN_MAPPINGS.lineWidth | ASSIGN_MAPPINGS.textAlign | ASSIGN_MAPPINGS.textBaseline;
-const CALL_MAPPINGS_MODE = 0;
-function createInstruction() {
-  return {
-    mods: [],
-    fillStyle(...args) {
-      this.mods.push({ mod: ["fillStyle", args], type: ASSIGN_MAPPINGS.fillStyle });
-    },
-    fillRect(...args) {
-      this.mods.push({ mod: ["fillRect", args], type: CALL_MAPPINGS_MODE });
-    },
-    strokeStyle(...args) {
-      this.mods.push({ mod: ["strokeStyle", args], type: ASSIGN_MAPPINGS.strokeStyle });
-    },
-    lineWidth(...args) {
-      this.mods.push({ mod: ["lineWidth", args], type: ASSIGN_MAPPINGS.lineWidth });
-    },
-    strokeRect(...args) {
-      this.mods.push({ mod: ["strokeRect", args], type: CALL_MAPPINGS_MODE });
-    },
-    fillText(...args) {
-      this.mods.push({ mod: ["fillText", args], type: CALL_MAPPINGS_MODE });
-    },
-    font(...args) {
-      this.mods.push({ mod: ["font", args], type: ASSIGN_MAPPINGS.font });
-    },
-    textBaseline(...args) {
-      this.mods.push({ mod: ["textBaseline", args], type: ASSIGN_MAPPINGS.textBaseline });
-    },
-    textAlign(...args) {
-      this.mods.push({ mod: ["textAlign", args], type: ASSIGN_MAPPINGS.textAlign });
-    },
-    beginPath() {
-      this.mods.push({ mod: ["beginPath", []], type: CALL_MAPPINGS_MODE });
-    },
-    moveTo(...args) {
-      this.mods.push({ mod: ["moveTo", args], type: CALL_MAPPINGS_MODE });
-    },
-    arcTo(...args) {
-      this.mods.push({ mod: ["arcTo", args], type: CALL_MAPPINGS_MODE });
-    },
-    closePath() {
-      this.mods.push({ mod: ["closePath", []], type: CALL_MAPPINGS_MODE });
-    },
-    fill() {
-      this.mods.push({ mod: ["fill", []], type: CALL_MAPPINGS_MODE });
-    },
-    stroke() {
-      this.mods.push({ mod: ["stroke", []], type: CALL_MAPPINGS_MODE });
-    },
-    drawImage(...args) {
-      this.mods.push({ mod: ["drawImage", args], type: CALL_MAPPINGS_MODE });
-    }
-  };
-}
-class S extends Display {
-  constructor(options = {}) {
-    super();
-    __publicField$b(this, "width");
-    __publicField$b(this, "height");
-    __publicField$b(this, "x");
-    __publicField$b(this, "y");
-    __publicField$b(this, "scaleX");
-    __publicField$b(this, "scaleY");
-    __publicField$b(this, "rotation");
-    __publicField$b(this, "skewX");
-    __publicField$b(this, "skewY");
-    this.width = options.width || 0;
-    this.height = options.height || 0;
-    this.x = options.x || 0;
-    this.y = options.y || 0;
-    this.scaleX = options.scaleX || 1;
-    this.scaleY = options.scaleY || 1;
-    this.rotation = options.rotation || 0;
-    this.skewX = options.skewX || 0;
-    this.skewY = options.skewY || 0;
-  }
-}
-class Graph extends S {
-  constructor(options = {}) {
-    super(options);
-    __publicField$b(this, "instruction");
-    __publicField$b(this, "__options__");
-    __publicField$b(this, "__widget__");
-    this.instruction = createInstruction();
-    this.__options__ = options;
-    this.__widget__ = null;
-  }
-  render(ctx) {
-    this.create();
-    const cap = this.instruction.mods.length;
-    for (let i = 0; i < cap; i++) {
-      const { mod, type } = this.instruction.mods[i];
-      const [direct, ...args] = mod;
-      if (type & ASSIGN_MAPPINGS_MODE) {
-        ctx[direct] = args[0];
-        continue;
-      }
-      ctx[direct].apply(ctx, ...args);
-    }
-  }
-  get __instanceOf__() {
-    return "Graph" /* Graph */;
-  }
-}
-
-function isGraph(display) {
-  return display.__instanceOf__ === DisplayType.Graph;
-}
-function isBox(display) {
-  return display.__instanceOf__ === DisplayType.Box;
-}
-function isRoundRect(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.RoundRect;
-}
-function isText(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.Text;
-}
-function isBitmap(display) {
-  return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
-}
-const asserts = {
-  isGraph,
-  isBox,
-  isText,
-  isRoundRect,
-  isBitmap
-};
-
-var __defProp$a = Object.defineProperty;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$a = (obj, key, value) => __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
-class C extends Display {
-  constructor() {
-    super();
-    __publicField$a(this, "elements");
-    this.elements = [];
-  }
-  add(...elements) {
-    const cap = elements.length;
-    for (let i = 0; i < cap; i++) {
-      const element = elements[i];
-      if (element.parent) ;
-      this.elements.push(element);
-      element.parent = this;
-    }
-  }
-  remove(...elements) {
-    const cap = elements.length;
-    for (let i = 0; i < cap; i++) {
-      for (let j = this.elements.length - 1; j >= 0; j--) {
-        const element = this.elements[j];
-        if (element.id === elements[i].id) {
-          this.elements.splice(j, 1);
-          element.parent = null;
-        }
-      }
-    }
-  }
-  destory() {
-    this.elements.forEach((element) => element.parent = null);
-    this.elements.length = 0;
-  }
-}
-class Box extends C {
-  constructor() {
-    super();
-    __publicField$a(this, "elements");
-    this.elements = [];
-  }
-  add(...elements) {
-    const cap = elements.length;
-    for (let i = 0; i < cap; i++) {
-      const element = elements[i];
-      if (element.parent) ;
-      this.elements.push(element);
-      element.parent = this;
-    }
-  }
-  remove(...elements) {
-    const cap = elements.length;
-    for (let i = 0; i < cap; i++) {
-      for (let j = this.elements.length - 1; j >= 0; j--) {
-        const element = this.elements[j];
-        if (element.id === elements[i].id) {
-          this.elements.splice(j, 1);
-          element.parent = null;
-        }
-      }
-    }
-  }
-  destory() {
-    this.elements.forEach((element) => element.parent = null);
-    this.elements.length = 0;
-  }
-  get __instanceOf__() {
-    return DisplayType.Box;
-  }
-  clone() {
-    const box = new Box();
-    if (this.elements.length) {
-      const stack = [{ elements: this.elements, parent: box }];
-      while (stack.length > 0) {
-        const { elements, parent } = stack.pop();
-        const cap = elements.length;
-        for (let i = 0; i < cap; i++) {
-          const element = elements[i];
-          if (asserts.isBox(element)) {
-            const newBox = new Box();
-            newBox.parent = parent;
-            parent.add(newBox);
-            stack.push({ elements: element.elements, parent: newBox });
-          } else if (asserts.isGraph(element)) {
-            const el = element.clone();
-            el.parent = parent;
-            parent.add(el);
-          }
-        }
-      }
-    }
-    return box;
-  }
-}
-
-var __defProp$9 = Object.defineProperty;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$9 = (obj, key, value) => __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
-class Bitmap extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$9(this, "bitmap");
-    __publicField$9(this, "style");
-    __publicField$9(this, "dpi");
-    this.bitmap = options.bitmap || null;
-    this.style = options.style || /* @__PURE__ */ Object.create(null);
-    this.dpi = options.dpi || 1;
-  }
-  create() {
-    if (this.bitmap) {
-      this.instruction.drawImage(this.bitmap, 0, 0, this.bitmap.width / this.dpi, this.bitmap.height / this.dpi);
-    }
-  }
-  clone() {
-    return new Bitmap({ ...this.style, ...this.__options__ });
-  }
-  get __shape__() {
-    return DisplayType.Bitmap;
-  }
-}
-
-function decodeHLS(meta) {
-  const { h, l, s, a } = meta;
-  if ("a" in meta) {
-    return `hsla(${h}deg, ${s}%, ${l}%, ${a})`;
-  }
-  return `hsl(${h}deg, ${s}%, ${l}%)`;
-}
-function decodeRGB(meta) {
-  const { r, g, b, a } = meta;
-  if ("a" in meta) {
-    return `rgba(${r}, ${g}, ${b}, ${a})`;
-  }
-  return `rgb(${r}, ${g}, ${b})`;
-}
-function decodeColor(meta) {
-  return meta.mode === "rgb" ? decodeRGB(meta.desc) : decodeHLS(meta.desc);
-}
-function evaluateFillStyle(primitive, opacity = 1) {
-  const descibe = { mode: primitive.mode, desc: { ...primitive.desc, a: opacity } };
-  return decodeColor(descibe);
-}
-const runtime = {
-  evaluateFillStyle
-};
-
-var __defProp$8 = Object.defineProperty;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
-class RoundRect extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$8(this, "style");
-    this.style = options.style || /* @__PURE__ */ Object.create(null);
-  }
-  get __shape__() {
-    return DisplayType.RoundRect;
-  }
-  create() {
-    const padding = this.style.padding;
-    const x = 0;
-    const y = 0;
-    const width = this.width - padding * 2;
-    const height = this.height - padding * 2;
-    const radius = this.style.radius || 0;
-    this.instruction.beginPath();
-    this.instruction.moveTo(x + radius, y);
-    this.instruction.arcTo(x + width, y, x + width, y + height, radius);
-    this.instruction.arcTo(x + width, y + height, x, y + height, radius);
-    this.instruction.arcTo(x, y + height, x, y, radius);
-    this.instruction.arcTo(x, y, x + width, y, radius);
-    this.instruction.closePath();
-    if (this.style.fill) {
-      this.instruction.closePath();
-      this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
-      this.instruction.fill();
-    }
-    if (this.style.stroke) {
-      if (typeof this.style.lineWidth === "number") {
-        this.instruction.lineWidth(this.style.lineWidth);
-      }
-      this.instruction.strokeStyle(this.style.stroke);
-      this.instruction.stroke();
-    }
-  }
-  clone() {
-    return new RoundRect({ ...this.style, ...this.__options__ });
-  }
-}
-
-var __defProp$7 = Object.defineProperty;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$7 = (obj, key, value) => __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
-class Text extends Graph {
-  constructor(options = {}) {
-    super(options);
-    __publicField$7(this, "text");
-    __publicField$7(this, "style");
-    this.text = options.text || "";
-    this.style = options.style || /* @__PURE__ */ Object.create(null);
-  }
-  create() {
-    if (this.style.fill) {
-      this.instruction.font(this.style.font);
-      this.instruction.lineWidth(this.style.lineWidth);
-      this.instruction.textBaseline(this.style.baseline);
-      this.instruction.fillStyle(this.style.fill);
-      this.instruction.fillText(this.text, 0, 0);
-    }
-  }
-  clone() {
-    return new Text({ ...this.style, ...this.__options__ });
-  }
-  get __shape__() {
-    return DisplayType.Text;
-  }
-}
-
-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$6(this, "eventCollections");
-    this.eventCollections = /* @__PURE__ */ Object.create(null);
-  }
-  on(evt, handler, c) {
-    if (!(evt in this.eventCollections)) {
-      this.eventCollections[evt] = [];
-    }
-    const data = {
-      name: evt,
-      handler,
-      ctx: c || this,
-      silent: false
-    };
-    this.eventCollections[evt].push(data);
-  }
-  off(evt, handler) {
-    if (evt in this.eventCollections) {
-      if (!handler) {
-        this.eventCollections[evt] = [];
-        return;
-      }
-      this.eventCollections[evt] = this.eventCollections[evt].filter((d) => d.handler !== handler);
-    }
-  }
-  silent(evt, handler) {
-    if (!(evt in this.eventCollections)) {
-      return;
-    }
-    this.eventCollections[evt].forEach((d) => {
-      if (!handler || d.handler === handler) {
-        d.silent = true;
-      }
-    });
-  }
-  active(evt, handler) {
-    if (!(evt in this.eventCollections)) {
-      return;
-    }
-    this.eventCollections[evt].forEach((d) => {
-      if (!handler || d.handler === handler) {
-        d.silent = false;
-      }
-    });
-  }
-  emit(evt, ...args) {
-    if (!this.eventCollections[evt]) {
-      return;
-    }
-    const handlers = this.eventCollections[evt];
-    if (handlers.length) {
-      handlers.forEach((d) => {
-        if (d.silent) {
-          return;
-        }
-        d.handler.call(d.ctx, ...args);
-      });
-    }
-  }
-  bindWithContext(c) {
-    return (evt, handler) => this.on(evt, handler, c);
-  }
-}
-
-function hashCode(str) {
-  let hash = 0;
-  for (let i = 0; i < str.length; i++) {
-    const code = str.charCodeAt(i);
-    hash = (hash << 5) - hash + code;
-    hash = hash & hash;
-  }
-  return hash;
-}
-function perferNumeric(s) {
-  if (typeof s === "number") {
-    return true;
-  }
-  return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
-}
-function createRoundBlock(x, y, width, height, style) {
-  return new RoundRect({ width, height, x, y, style: { ...style } });
-}
-function createTitleText(text, x, y, font, color) {
-  return new Text({
-    text,
-    x,
-    y,
-    style: { fill: color, textAlign: "center", baseline: "middle", font, lineWidth: 1 }
-  });
-}
-const raf = window.requestAnimationFrame;
-function createCanvasElement() {
-  return document.createElement("canvas");
-}
-function applyCanvasTransform(ctx, matrix, dpr) {
-  ctx.setTransform(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr);
-}
-function mixin(app, methods) {
-  methods.forEach(({ name, fn }) => {
-    Object.defineProperty(app, name, {
-      value: fn(app),
-      writable: false
-    });
-  });
-}
-function prettyStrJoin(...s) {
-  return s.join("");
-}
-
-const NAME_SPACE = "etoile";
-const log = {
-  error: (message) => {
-    return `[${NAME_SPACE}] ${message}`;
-  }
-};
-
-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.isBox(graph)) {
-    const elements = graph.elements;
-    const cap = elements.length;
-    for (let i = 0; i < cap; i++) {
-      const element = elements[i];
-      drawGraphIntoCanvas(element, opts);
-    }
-  }
-  if (asserts.isGraph(graph)) {
-    const matrix = graph.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
-    matrix.transform(graph.x, graph.y, graph.scaleX, graph.scaleY, graph.rotation, graph.skewX, graph.skewY);
-    if (asserts.isRoundRect(graph)) {
-      const effectiveWidth = graph.width - graph.style.padding * 2;
-      const effectiveHeight = graph.height - graph.style.padding * 2;
-      if (effectiveWidth <= 0 || effectiveHeight <= 0) {
-        ctx.restore();
-        return;
-      }
-      if (graph.style.radius >= effectiveHeight / 2 || graph.style.radius >= effectiveWidth / 2) {
-        ctx.restore();
-        return;
-      }
-    }
-    applyCanvasTransform(ctx, matrix, dpr);
-    graph.render(ctx);
-  }
-  ctx.restore();
-}
-class Schedule extends Box {
-  constructor(to, renderOptions = {}) {
-    super();
-    __publicField$4(this, "render");
-    __publicField$4(this, "to");
-    __publicField$4(this, "event");
-    this.to = typeof to === "string" ? document.querySelector(to) : to;
-    if (!this.to) {
-      throw new Error(log.error("The element to bind is not found."));
-    }
-    const { width, height } = this.to.getBoundingClientRect();
-    Object.assign(renderOptions, { width, height }, { devicePixelRatio: window.devicePixelRatio || 1 });
-    this.event = new Event();
-    this.render = new Render(this.to, renderOptions);
-  }
-  update() {
-    this.render.clear(this.render.options.width, this.render.options.height);
-    this.execute(this.render, this);
-    const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
-    applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
-  }
-  // execute all graph elements
-  execute(render, graph = this) {
-    drawGraphIntoCanvas(graph, { c: render.canvas, ctx: render.ctx, dpr: render.options.devicePixelRatio });
-  }
-}
-
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
-class RenderCache extends Canvas {
-  constructor(opts) {
-    super(opts);
-    __publicField$3(this, "key");
-    __publicField$3(this, "$memory");
-    this.key = "render-cache";
-    this.$memory = false;
-  }
-  get state() {
-    return this.$memory;
-  }
-  flush(treemap, matrix = new Matrix2D()) {
-    const { devicePixelRatio, width, height } = treemap.render.options;
-    const { a, d } = matrix;
-    const { size } = canvasBoundarySize;
-    if (width * a >= size || height * d >= size) {
-      return;
-    }
-    if (width * a * height * d >= size * size) {
-      return;
-    }
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.setOptions({ width: width * a, height: height * d, devicePixelRatio });
-    resetLayout(treemap, width * a, height * d);
-    drawGraphIntoCanvas(treemap, { c: this.canvas, ctx: this.ctx, dpr: devicePixelRatio });
-    this.$memory = true;
-  }
-  destroy() {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-    this.$memory = false;
-  }
-}
-class FontCache {
-  constructor() {
-    __publicField$3(this, "key");
-    __publicField$3(this, "fonts");
-    __publicField$3(this, "ellispsis");
-    this.key = "font-cache";
-    this.fonts = {};
-    this.ellispsis = {};
-  }
-  get state() {
-    return true;
-  }
-  flush(treemap, matrix = new Matrix2D()) {
-    const { width, height } = treemap.render.options;
-    const { a, d } = matrix;
-    const zoomedWidth = width * a;
-    const zoomedHeight = height * d;
-    if (zoomedWidth <= width || zoomedHeight <= height) {
-      return;
-    }
-    traverse([treemap.elements[0]], (graph) => {
-      if (asserts.isRoundRect(graph)) {
-        const { x, y, height: graphHeight, width: graphWidth } = graph;
-        if (!graphHeight || !graphWidth) {
-          return;
-        }
-        if (x >= 0 && y >= 0 && x + graphWidth <= width && y + graphHeight <= height) {
-          if (graph.__widget__) {
-            const node = graph.__widget__.node;
-            delete this.fonts[node.id];
-            delete this.ellispsis[node.label];
-          }
-        }
-      }
-    });
-  }
-  destroy() {
-    this.fonts = {};
-    this.ellispsis = {};
-  }
-  queryFontById(id, byDefault) {
-    if (!(id in this.fonts)) {
-      this.fonts[id] = byDefault();
-    }
-    return this.fonts[id];
-  }
-}
-
-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 [
-    e + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
-    f + Math.max(document.documentElement.scrollTop, document.body.scrollTop)
-  ];
-}
-function captureBoxXY(c, evt, a, d, translateX, translateY) {
-  const boundingClientRect = c.getBoundingClientRect();
-  if (evt instanceof MouseEvent) {
-    const [e, f] = getOffset(c);
-    return {
-      x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
-      y: (evt.clientY - boundingClientRect.top - f - translateY) / d
-    };
-  }
-  return { x: 0, y: 0 };
-}
-function createEffectRun(c) {
-  return (fn) => {
-    const effect = () => {
-      const done = fn();
-      if (!done) {
-        c.animationFrameID = raf(effect);
-      }
-    };
-    if (!c.animationFrameID) {
-      c.animationFrameID = raf(effect);
-    }
-  };
-}
-function createEffectStop(c) {
-  return () => {
-    if (c.animationFrameID) {
-      window.cancelAnimationFrame(c.animationFrameID);
-      c.animationFrameID = null;
-    }
-  };
-}
-function createSmoothFrame() {
-  const c = {
-    animationFrameID: null
-  };
-  const run = createEffectRun(c);
-  const stop = createEffectStop(c);
-  return { run, stop };
-}
-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;
-}
-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) {
-  return data.sort((a, b) => {
-    for (const key of keys) {
-      const v = a[key];
-      const v2 = b[key];
-      if (perferNumeric(v) && perferNumeric(v2)) {
-        if (v2 > v) {
-          return 1;
-        }
-        if (v2 < v) {
-          return -1;
-        }
-        continue;
-      }
-      const comparison = ("" + v).localeCompare("" + v2);
-      if (comparison !== 0) {
-        return comparison;
-      }
-    }
-    return 0;
-  });
-}
-function c2m(data, key, modifier) {
-  if (Array.isArray(data.groups)) {
-    data.groups = sortChildrenByKey(data.groups.map((d) => c2m(d, key, modifier)), "weight");
-  }
-  const obj = { ...data, weight: data[key] };
-  if (modifier) {
-    return modifier(obj);
-  }
-  return obj;
-}
-function flatten(data) {
-  const result = [];
-  for (let i = 0; i < data.length; i++) {
-    const { groups, ...rest } = data[i];
-    result.push(rest);
-    if (groups) {
-      result.push(...flatten(groups));
-    }
-  }
-  return result;
-}
-function bindParentForModule(modules, parent) {
-  return modules.map((module) => {
-    const next = { ...module };
-    next.parent = parent;
-    if (next.groups && Array.isArray(next.groups)) {
-      next.groups = bindParentForModule(next.groups, next);
-    }
-    return next;
-  });
-}
-function getNodeDepth(node) {
-  let depth = 0;
-  while (node.parent) {
-    node = node.parent;
-    depth++;
-  }
-  return depth;
-}
-function visit(data, fn) {
-  if (!data) {
-    return null;
-  }
-  for (const d of data) {
-    if (d.children) {
-      const result = visit(d.children, fn);
-      if (result) {
-        return result;
-      }
-    }
-    const stop = fn(d);
-    if (stop) {
-      return d;
-    }
-  }
-  return null;
-}
-function findRelativeNode(p, layoutNodes) {
-  return visit(layoutNodes, (node) => {
-    const [x, y, w, h] = node.layout;
-    if (p.x >= x && p.y >= y && p.x < x + w && p.y < y + h) {
-      return true;
-    }
-  });
-}
-function findRelativeNodeById(id, layoutNodes) {
-  return visit(layoutNodes, (node) => {
-    if (node.node.id === id) {
-      return true;
-    }
-  });
-}
-
-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 smoothFrame(callback, opts) {
-  const frame = createSmoothFrame();
-  const startTime = Date.now();
-  const condtion = (process) => {
-    if (Array.isArray(opts.deps)) {
-      return opts.deps.some((dep) => dep());
-    }
-    return process >= 1;
-  };
-  frame.run(() => {
-    const elapsed = Date.now() - startTime;
-    const progress = Math.min(elapsed / opts.duration, 1);
-    if (condtion(progress)) {
-      frame.stop();
-      if (opts.onStop) {
-        opts.onStop();
-      }
-      return true;
-    }
-    return callback(progress, frame.stop);
-  });
-}
-const HIGH_LIGHT_OPACITY = 0.3;
-function drawHighlight(treemap, evt) {
-  const { highlight } = treemap;
-  const { currentNode } = evt.state;
-  if (currentNode) {
-    const [x, y, w, h] = currentNode.layout;
-    smoothFrame((_, cleanup) => {
-      cleanup();
-      highlight.reset();
-      const mask = createRoundBlock(x, y, w, h, { fill, opacity: HIGH_LIGHT_OPACITY, radius: 4, padding: 2 });
-      highlight.add(mask);
-      highlight.setZIndexForHighlight("1");
-      stackMatrixTransform(mask, evt.matrix.e, evt.matrix.f, 1);
-      highlight.update();
-      if (!evt.state.currentNode) {
-        return true;
-      }
-    }, {
-      duration: ANIMATION_DURATION,
-      deps: [() => evt.state.isDragging, () => evt.state.isWheeling, () => evt.state.isZooming]
-    });
-  } else {
-    highlight.reset();
-    highlight.setZIndexForHighlight();
-  }
-}
-class TreemapEvent extends DOMEvent {
-  constructor(app, treemap) {
-    super(treemap.render.canvas);
-    __publicField$1(this, "exposedEvent");
-    __publicField$1(this, "state");
-    __publicField$1(this, "zoom");
-    this.exposedEvent = new Event();
-    this.state = createTreemapEventState();
-    const exposedMethods = [
-      { name: "on", fn: () => this.exposedEvent.bindWithContext(treemap.api) },
-      { name: "off", fn: () => this.exposedEvent.off.bind(this.exposedEvent) }
-    ];
-    DOM_EVENTS.forEach((evt) => {
-      this.on(evt, (metadata) => {
-        this.dispatch({ type: evt, treemap }, metadata);
-      });
-    });
-    mixin(app, exposedMethods);
-    treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP, () => {
-      this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
-      this.state = createTreemapEventState();
-    });
-    this.zoom = createOnZoom(treemap, this);
-    treemap.event.on(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, this.zoom);
-  }
-  dispatch(ctx, metadata) {
-    const node = findRelativeNode(metadata.loc, ctx.treemap.layoutNodes);
-    const fn = prettyStrJoin("on", ctx.type);
-    if (typeof this[fn] === "function") {
-      this[fn](ctx, metadata, node);
-    }
-    if (ctx.type === "mousemove") {
-      if (this.state.isDragging) {
-        this.exposedEvent.silent("click");
-      } else {
-        this.exposedEvent.active("click");
-      }
-    }
-    this.exposedEvent.emit(ctx.type === "macOSWheel" ? "wheel" : ctx.type, { native: metadata.native, module: node });
-  }
-  onmousemove(ctx, metadata, node) {
-    if (!this.state.isDragging) {
-      if (this.state.currentNode !== node || !node) {
-        this.state.currentNode = node;
-      }
-      drawHighlight(ctx.treemap, this);
-    } else {
-      const { treemap } = ctx;
-      smoothFrame((_, cleanup) => {
-        cleanup();
-        const { offsetX: x, offsetY: y } = metadata.native;
-        const { dragX: lastX, dragY: lastY } = this.state;
-        const drawX = x - lastX;
-        const drawY = y - lastY;
-        treemap.highlight.reset();
-        treemap.highlight.setZIndexForHighlight();
-        treemap.reset();
-        this.matrix.translation(drawX, drawY);
-        Object.assign(this.state, { isDragging: true, dragX: x, dragY: y });
-        stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
-        treemap.update();
-        return true;
-      }, {
-        duration: ANIMATION_DURATION,
-        deps: [() => this.state.forceDestroy],
-        onStop: () => {
-          this.state.isDragging = false;
-        }
-      });
-    }
-  }
-  onmouseout(ctx) {
-    this.state.currentNode = null;
-    drawHighlight(ctx.treemap, this);
-  }
-  onmousedown(ctx, metadata) {
-    if (isScrollWheelOrRightButtonOnMouseupAndDown(metadata.native)) {
-      return;
-    }
-    this.state.isDragging = true;
-    this.state.dragX = metadata.native.offsetX;
-    this.state.dragY = metadata.native.offsetY;
-    this.state.forceDestroy = false;
-    if (!ctx.treemap.renderCache.state) {
-      this.exposedEvent.silent("mousemove");
-      this.silent("mousemove");
-      ctx.treemap.renderCache.flush(ctx.treemap, this.matrix);
-      this.active("mousemove");
-      this.exposedEvent.active("mousemove");
-    }
-  }
-  onmouseup(ctx) {
-    if (!this.state.isDragging) {
-      return;
-    }
-    this.state.forceDestroy = true;
-    this.state.isDragging = false;
-    const { treemap } = ctx;
-    treemap.highlight.reset();
-    treemap.highlight.setZIndexForHighlight();
-  }
-  onwheel(ctx, metadata) {
-    ctx.treemap.renderCache.destroy();
-    ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
-    const { native } = metadata;
-    const { treemap } = ctx;
-    const wheelDelta = native.wheelDelta;
-    const absWheelDelta = Math.abs(wheelDelta);
-    const offsetX = native.offsetX;
-    const offsetY = native.offsetY;
-    if (wheelDelta === 0) {
-      return;
-    }
-    this.state.forceDestroy = true;
-    const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
-    const delta = wheelDelta > 0 ? factor : 1 / factor;
-    const targetScaleRatio = this.matrix.a * delta;
-    const translateX = offsetX - (offsetX - this.matrix.e) * delta;
-    const translateY = offsetY - (offsetY - this.matrix.f) * delta;
-    smoothFrame((progress, cleanup) => {
-      this.exposedEvent.silent("mousemove");
-      this.silent("mousemove");
-      this.silent("click");
-      this.exposedEvent.silent("click");
-      treemap.highlight.reset();
-      treemap.highlight.setZIndexForHighlight();
-      treemap.fontCache.flush(treemap, this.matrix);
-      this.state.isWheeling = true;
-      const easedProgress = easing.cubicInOut(progress);
-      const scale = (targetScaleRatio - this.matrix.a) * easedProgress;
-      this.matrix.a += scale;
-      this.matrix.d += scale;
-      this.matrix.translation((translateX - this.matrix.e) * easedProgress, (translateY - this.matrix.f) * easedProgress);
-      resetLayout(
-        treemap,
-        treemap.render.canvas.width * this.matrix.a / treemap.render.options.devicePixelRatio,
-        treemap.render.canvas.height * this.matrix.d / treemap.render.options.devicePixelRatio
-      );
-      stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
-      treemap.update();
-      cleanup();
-    }, {
-      duration: ANIMATION_DURATION,
-      onStop: () => {
-        this.state.forceDestroy = false;
-        this.state.isWheeling = false;
-        this.active("mousemove");
-        this.exposedEvent.active("mousemove");
-        this.active("click");
-        this.exposedEvent.active("click");
-        treemap.event.active(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
-      }
-    });
-  }
-  onmacOSWheel(ctx, metadata) {
-    useMagicTrackPad(metadata.native);
-  }
-}
-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;
-      smoothFrame((progress, cleanup) => {
-        cleanup();
-        evt.silent("mousemove");
-        evt.exposedEvent.silent("mousemove");
-        treemap.fontCache.flush(treemap, evt.matrix);
-        const easedProgress = easing.cubicInOut(progress);
-        const scale = (targetScale - evt.matrix.a) * easedProgress;
-        evt.matrix.a += scale;
-        evt.matrix.d += scale;
-        evt.matrix.translation((translateX - evt.matrix.e) * easedProgress, (translateY - evt.matrix.f) * easedProgress);
-        resetLayout(
-          treemap,
-          treemap.render.canvas.width * evt.matrix.a / treemap.render.options.devicePixelRatio,
-          treemap.render.canvas.height * evt.matrix.d / treemap.render.options.devicePixelRatio
-        );
-        stackMatrixTransformWithGraphAndLayer(treemap.elements, evt.matrix.e, evt.matrix.f, 1);
-        treemap.update();
-      }, {
-        duration: ANIMATION_DURATION,
-        onStop: () => {
-          evt.state.isZooming = false;
-          evt.active("mousemove");
-          evt.exposedEvent.active("mousemove");
-        }
-      });
-    }
-  };
-}
-
-function register(Mod) {
-  return (app, treemap) => {
-    new Mod(app, treemap);
-  };
-}
-
-function squarify(data, rect, layoutDecorator) {
-  const result = [];
-  if (!data.length) {
-    return result;
-  }
-  const worst = (start, end, shortestSide, totalWeight, aspectRatio) => {
-    const max = data[start].weight * aspectRatio;
-    const min = data[end].weight * aspectRatio;
-    return Math.max(
-      shortestSide * shortestSide * max / (totalWeight * totalWeight),
-      totalWeight * totalWeight / (shortestSide * shortestSide * min)
-    );
-  };
-  const recursion = (start, rect2) => {
-    while (start < data.length) {
-      let totalWeight = 0;
-      for (let i = start; i < data.length; i++) {
-        totalWeight += data[i].weight;
-      }
-      const shortestSide = Math.min(rect2.w, rect2.h);
-      const aspectRatio = rect2.w * rect2.h / totalWeight;
-      let end = start;
-      let areaInRun = 0;
-      let oldWorst = 0;
-      while (end < data.length) {
-        const area = data[end].weight * aspectRatio;
-        const newWorst = worst(start, end, shortestSide, areaInRun + area, aspectRatio);
-        if (end > start && oldWorst < newWorst) {
-          break;
-        }
-        areaInRun += area;
-        oldWorst = newWorst;
-        end++;
-      }
-      const splited = Math.round(areaInRun / shortestSide);
-      let areaInLayout = 0;
-      for (let i = start; i < end; i++) {
-        const children = data[i];
-        const area = children.weight * aspectRatio;
-        const lower = Math.round(shortestSide * areaInLayout / areaInRun);
-        const upper = Math.round(shortestSide * (areaInLayout + area) / areaInRun);
-        const [x, y, w, h] = rect2.w >= rect2.h ? [rect2.x, rect2.y + lower, splited, upper - lower] : [rect2.x + lower, rect2.y, upper - lower, splited];
-        const depth = getNodeDepth(children) || 1;
-        const { titleAreaHeight, rectGap } = layoutDecorator;
-        const diff = titleAreaHeight.max / depth;
-        const hh = diff < titleAreaHeight.min ? titleAreaHeight.min : diff;
-        result.push({
-          layout: [x, y, w, h],
-          node: children,
-          decorator: {
-            ...layoutDecorator,
-            titleHeight: hh
-          },
-          children: w > rectGap * 2 && h > hh + rectGap ? squarify(children.groups || [], {
-            x: x + rectGap,
-            y: y + hh,
-            w: w - rectGap * 2,
-            h: h - hh - rectGap
-          }, layoutDecorator) : []
-        });
-        areaInLayout += area;
-      }
-      start = end;
-      if (rect2.w >= rect2.h) {
-        rect2.x += splited;
-        rect2.w -= splited;
-      } else {
-        rect2.y += splited;
-        rect2.h -= splited;
-      }
-    }
-  };
-  recursion(0, rect);
-  return result;
-}
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-function measureTextWidth(c, text) {
-  return c.measureText(text).width;
-}
-function evaluateOptimalFontSize(c, text, font, desiredW, desiredH) {
-  desiredW = Math.floor(desiredW);
-  desiredH = Math.floor(desiredH);
-  const { range, family } = font;
-  let min = range.min;
-  let max = range.max;
-  const cache = /* @__PURE__ */ new Map();
-  while (max - min >= 1) {
-    const current = min + (max - min) / 2;
-    if (!cache.has(current)) {
-      c.font = `${current}px ${family}`;
-      const metrics = c.measureText(text);
-      const width2 = metrics.width;
-      const height2 = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-      cache.set(current, { width: width2, height: height2 });
-    }
-    const { width, height } = cache.get(current);
-    if (width > desiredW || height > desiredH) {
-      max = current;
-    } else {
-      min = current;
-    }
-  }
-  return Math.floor(min);
-}
-function getSafeText(c, text, width, cache) {
-  let ellipsisWidth = 0;
-  if (text in cache) {
-    ellipsisWidth = cache[text];
-  } else {
-    ellipsisWidth = measureTextWidth(c, "...");
-    cache[text] = ellipsisWidth;
-  }
-  if (width < ellipsisWidth) {
-    return false;
-  }
-  const textWidth = measureTextWidth(c, text);
-  if (textWidth < width) {
-    return { text, width: textWidth };
-  }
-  return { text: "...", width: ellipsisWidth };
-}
-function resetLayout(treemap, w, h) {
-  treemap.layoutNodes = squarify(treemap.data, { w, h, x: 0, y: 0 }, treemap.decorator.layout);
-  treemap.reset(true);
-}
-class Highlight extends Schedule {
-  reset() {
-    this.destory();
-    this.update();
-  }
-  get canvas() {
-    return this.render.canvas;
-  }
-  setZIndexForHighlight(zIndex = "-1") {
-    this.canvas.style.zIndex = zIndex;
-  }
-  init() {
-    this.setZIndexForHighlight();
-    this.canvas.style.position = "absolute";
-    this.canvas.style.pointerEvents = "none";
-  }
-}
-class TreemapLayout extends Schedule {
-  constructor(...args) {
-    super(...args);
-    __publicField(this, "data");
-    __publicField(this, "layoutNodes");
-    __publicField(this, "decorator");
-    __publicField(this, "bgBox");
-    __publicField(this, "fgBox");
-    __publicField(this, "highlight");
-    __publicField(this, "renderCache");
-    __publicField(this, "fontCache");
-    this.data = [];
-    this.layoutNodes = [];
-    this.bgBox = new Box();
-    this.fgBox = new Box();
-    this.decorator = /* @__PURE__ */ Object.create(null);
-    this.highlight = new Highlight(this.to, { width: this.render.options.width, height: this.render.options.height });
-    this.renderCache = new RenderCache(this.render.options);
-    this.fontCache = new FontCache();
-  }
-  drawBackgroundNode(node) {
-    const [x, y, w, h] = node.layout;
-    const padding = 2;
-    if (w - padding * 2 <= 0 || h - padding * 2 <= 0) {
-      return;
-    }
-    const fill = this.decorator.color.mappings[node.node.id];
-    const rect = createRoundBlock(x, y, w, h, { fill, padding, radius: 4 });
-    rect.__widget__ = node;
-    this.bgBox.add(rect);
-    for (const child of node.children) {
-      this.drawBackgroundNode(child);
-    }
-  }
-  drawForegroundNode(node) {
-    const [x, y, w, h] = node.layout;
-    if (!w || !h) {
-      return;
-    }
-    const { titleHeight, rectGap } = node.decorator;
-    const { fontSize, fontFamily, color } = this.decorator.font;
-    const optimalFontSize = this.fontCache.queryFontById(node.node.id, () => evaluateOptimalFontSize(
-      this.render.ctx,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      node.node.label,
-      {
-        range: fontSize,
-        family: fontFamily
-      },
-      w - rectGap * 2,
-      node.children.length ? Math.round(titleHeight / 2) + rectGap : h
-    ));
-    this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
-    const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2, this.fontCache.ellispsis);
-    if (!result) {
-      return;
-    }
-    if (result.width >= w || optimalFontSize >= h) {
-      return;
-    }
-    const { text, width } = result;
-    const textX = x + Math.round((w - width) / 2);
-    const textY = y + (node.children.length ? Math.round(titleHeight / 2) : Math.round(h / 2));
-    this.fgBox.add(createTitleText(text, textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
-    for (const child of node.children) {
-      this.drawForegroundNode(child);
-    }
-  }
-  reset(refresh = false) {
-    this.remove(this.bgBox, this.fgBox);
-    this.bgBox.destory();
-    if (this.renderCache.state) {
-      this.fgBox.destory();
-      this.bgBox.add(new Bitmap({ bitmap: this.renderCache.canvas, dpi: this.render.options.devicePixelRatio }));
-    } else {
-      for (const node of this.layoutNodes) {
-        this.drawBackgroundNode(node);
-      }
-      if (!this.fgBox.elements.length || refresh) {
-        this.render.ctx.textBaseline = "middle";
-        this.fgBox.destory();
-        for (const node of this.layoutNodes) {
-          this.drawForegroundNode(node);
-        }
-      } else {
-        this.fgBox = this.fgBox.clone();
-      }
-    }
-    this.add(this.bgBox, this.fgBox);
-  }
-  get api() {
-    return {
-      zoom: (node) => {
-        if (!node) {
-          return;
-        }
-        this.event.emit(INTERNAL_EVENT_MAPPINGS.ON_ZOOM, node);
-      }
-    };
-  }
-}
-function createTreemap() {
-  let treemap = null;
-  let root = null;
-  let installed = false;
-  const uses = [];
-  const context = {
-    init,
-    dispose,
-    setOptions,
-    resize,
-    use,
-    zoom
-  };
-  function init(el) {
-    treemap = new TreemapLayout(el);
-    root = el;
-    root.style.position = "relative";
-    if (!installed) {
-      register(TreemapEvent)(context, treemap);
-      installed = true;
-    }
-  }
-  function dispose() {
-    if (root && treemap) {
-      treemap.destory();
-      root.removeChild(root.firstChild);
-      root = null;
-      treemap = null;
-    }
-  }
-  function resize() {
-    if (!treemap || !root) {
-      return;
-    }
-    treemap.renderCache.destroy();
-    treemap.fontCache.destroy();
-    const { width, height } = root.getBoundingClientRect();
-    treemap.render.initOptions({ height, width, devicePixelRatio: window.devicePixelRatio });
-    treemap.render.canvas.style.position = "absolute";
-    treemap.event.emit(INTERNAL_EVENT_MAPPINGS.ON_CLEANUP);
-    treemap.highlight.render.initOptions({ height, width, devicePixelRatio: window.devicePixelRatio });
-    treemap.highlight.reset();
-    treemap.highlight.init();
-    resetLayout(treemap, width, height);
-    treemap.update();
-    treemap.renderCache.flush(treemap, treemap.matrix);
-  }
-  function setOptions(options) {
-    if (!treemap) {
-      throw new Error(log.error("Treemap not initialized"));
-    }
-    treemap.data = bindParentForModule(options.data || []);
-    for (const use2 of uses) {
-      use2(treemap);
-    }
-    resize();
-  }
-  function use(key, register2) {
-    switch (key) {
-      case "decorator":
-        uses.push((treemap2) => register2(treemap2));
-        break;
-    }
-  }
-  function zoom(id) {
-    if (!treemap) {
-      throw new Error(log.error("treemap don't init."));
-    }
-    const node = findRelativeNodeById(id, treemap.layoutNodes);
-    if (node) {
-      treemap.api.zoom(node);
-    }
-  }
-  return context;
-}
-
-const defaultLayoutOptions = {
-  titleAreaHeight: {
-    max: 60,
-    min: 30
-  },
-  rectGap: 5,
-  rectBorderRadius: 0.5,
-  rectBorderWidth: 1.5
-};
-const defaultFontOptions = {
-  color: "#000",
-  fontSize: {
-    max: 70,
-    min: 0
-  },
-  fontFamily: "sans-serif"
-};
-function presetDecorator(app) {
-  Object.assign(app.decorator, {
-    layout: defaultLayoutOptions,
-    font: defaultFontOptions,
-    color: { mappings: evaluateColorMappings(app.data) }
-  });
-}
-function evaluateColorMappings(data) {
-  const colorMappings = {};
-  const hashToHue = (id) => {
-    const hash = Math.abs(hashCode(id));
-    return hash % 360;
-  };
-  const lightScale = (depth) => 50 - depth * 5;
-  const baseSaturation = 80;
-  const siblingHueShift = 30;
-  const rc = 0.2126;
-  const gc = 0.7152;
-  const bc = 0.0722;
-  const hslToRgb = (h, s, l) => {
-    const a = s * Math.min(l, 1 - l);
-    const f = (n) => {
-      const k = (n + h / 30) % 12;
-      return l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    };
-    return { r: f(0), g: f(8), b: f(4) };
-  };
-  const calculateLuminance = (r, g, b) => {
-    return rc * r + gc * g + bc * b;
-  };
-  const calculateColor = (module, depth, parentHue, siblingIndex, totalSiblings) => {
-    const nodeHue = hashToHue(module.id);
-    const hue = parentHue !== null ? (parentHue + siblingHueShift * siblingIndex / totalSiblings) % 360 : nodeHue;
-    const lightness = lightScale(depth);
-    const hslColor = {
-      h: hue,
-      s: baseSaturation,
-      l: lightness / 100
-    };
-    const { r, g, b } = hslToRgb(hslColor.h, hslColor.s / 100, hslColor.l);
-    const luminance = calculateLuminance(r, g, b);
-    if (luminance < 0.6) {
-      hslColor.l += 0.2;
-    } else if (luminance > 0.8) {
-      hslColor.l -= 0.1;
-    }
-    hslColor.l *= 100;
-    colorMappings[module.id] = {
-      mode: "hsl",
-      desc: hslColor
-    };
-    if (module.groups && Array.isArray(module.groups)) {
-      const totalChildren = module.groups.length;
-      for (let i = 0; i < totalChildren; i++) {
-        const child = module.groups[i];
-        calculateColor(child, depth + 1, hue, i, totalChildren);
-      }
-    }
-  };
-  for (let i = 0; i < data.length; i++) {
-    const module = data[i];
-    calculateColor(module, 0, null, i, data.length);
-  }
-  return colorMappings;
-}
-
-export { TreemapLayout, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, visit };
+import { Component, DOMEvent, DefaultMap, Event, applyCanvasTransform, assertExists, bindParentForModule, c2m, createCanvasElement, createRoundBlock, createTitleText, definePlugin, findRelativeNode, findRelativeNodeById, flatten, getNodeDepth, hashCode, isClickEvent, isContextMenuEvent, isMacOS, isMouseEvent, isScrollWheelOrRightButtonOnMouseupAndDown, isWheelEvent, logger, mixin, mixinWithParams, noop, perferNumeric, prettyStrJoin, raf, smoothFrame, sortChildrenByKey, stackMatrixTransform, stackMatrixTransformWithGraphAndLayer, typedForIn, visit } from "./dom-event-DQ8OFrZa.mjs";
+
+//#region src/index.ts
+function createTreemap(options) {
+	const { plugins = [], graphic = {} } = options || {};
+	let root = null;
+	let installed = false;
+	let domEvent = null;
+	let component = null;
+	const exposedEvent = new Event();
+	if (!Array.isArray(plugins)) logger.panic("Plugins should be an array");
+	const api = { zoom: noop };
+	const ctx = {
+		init,
+		dispose,
+		resize,
+		setOptions
+	};
+	function init(el) {
+		component = new Component(graphic, el);
+		domEvent = new DOMEvent(component);
+		root = el;
+		root.style.position = "relative";
+		if (!installed) {
+			plugins.forEach((plugin) => component?.pluginDriver.use(plugin));
+			installed = true;
+			component.pluginDriver.runHook("onLoad", ctx, domEvent);
+		}
+		domEvent.on("__exposed__", (type, args) => exposedEvent.emit(type, args));
+	}
+	function dispose() {
+		if (root && component && domEvent) {
+			domEvent.destory();
+			component.destory();
+			root.removeChild(root.firstChild);
+			for (const evt in exposedEvent.eventCollections) exposedEvent.off(evt);
+			component.pluginDriver.runHook("onDispose");
+			root = null;
+			component = null;
+			domEvent = null;
+		}
+	}
+	function resize() {
+		if (!component || !root) return;
+		const { width, height } = root.getBoundingClientRect();
+		component.render.initOptions({
+			height,
+			width,
+			devicePixelRatio: window.devicePixelRatio
+		});
+		component.render.canvas.style.position = "absolute";
+		if (domEvent) component.pluginDriver.runHook("onResize", domEvent);
+		component.cleanup();
+		component.draw();
+	}
+	function setOptions(options$1) {
+		assertExists(component, logger, "Treemap not initialized. Please call `init()` before setOptions.");
+		component.data = bindParentForModule(options$1.data);
+		resize();
+	}
+	const base = mixin(ctx, [{
+		name: "on",
+		fn: () => exposedEvent.bindWithContext(api)
+	}, {
+		name: "off",
+		fn: () => exposedEvent.off.bind(exposedEvent)
+	}]);
+	return base;
+}
+
+//#endregion
+export { DefaultMap, applyCanvasTransform, c2m, createCanvasElement, createRoundBlock, createTitleText, createTreemap, definePlugin, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, hashCode, isClickEvent, isContextMenuEvent, isMacOS, isMouseEvent, isScrollWheelOrRightButtonOnMouseupAndDown, isWheelEvent, mixin, mixinWithParams, noop, perferNumeric, prettyStrJoin, raf, smoothFrame, sortChildrenByKey, stackMatrixTransform, stackMatrixTransformWithGraphAndLayer, typedForIn, visit };