rendx-engine 0.2.0

package/dist/main.cjs

@@ -0,0 +1,3017 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+
+// src/main.ts
+var main_exports = {};
+__export(main_exports, {
+  App: () => App,
+  ArcShape: () => ArcShape,
+  ArcTransform: () => ArcTransform,
+  AreaShape: () => AreaShape,
+  AttributeTransform: () => AttributeTransform,
+  Attributes: () => Attributes,
+  BaseTransform: () => BaseTransform,
+  CircleShape: () => CircleShape,
+  ClipBoxTransform: () => ClipBoxTransform,
+  CurveShape: () => CurveShape,
+  EventDispatcher: () => EventDispatcher,
+  EventObserver: () => EventObserver,
+  EventTarget: () => EventTarget,
+  Graphics: () => Graphics,
+  GraphicsTransform: () => GraphicsTransform,
+  Group: () => Group,
+  ImageShape: () => ImageShape,
+  Layer: () => Layer,
+  LineShape: () => LineShape,
+  Node: () => Node,
+  PathShape: () => PathShape,
+  PolygonShape: () => PolygonShape,
+  RectShape: () => RectShape,
+  Renderer: () => Renderer,
+  RoundShape: () => RoundShape,
+  Scene: () => Scene,
+  SectorShape: () => SectorShape,
+  SectorTransform: () => SectorTransform,
+  Shape: () => Shape,
+  SimulatedEvent: () => SimulatedEvent,
+  SymbolShape: () => SymbolShape,
+  TextShape: () => TextShape,
+  createShape: () => createShape8,
+  deserialize: () => deserialize,
+  imageLoader: () => imageLoader,
+  isHit: () => isHit,
+  serialize: () => serialize,
+  serializeLayer: () => serializeLayer,
+  setCanvasRenderingContext2StrokeAttrs: () => setCanvasRenderingContext2StrokeAttrs
+});
+module.exports = __toCommonJS(main_exports);
+
+// src/core/graphics.ts
+var import_gl_matrix = require("gl-matrix");
+var import_rendx_core2 = require("rendx-core");
+
+// src/transforms/base.ts
+var import_rendx_ease = require("rendx-ease");
+var BaseTransform = class {
+  constructor() {
+    this.status = "start";
+    this._duration = 0;
+    this._delay = 0;
+    this._easing = "linear";
+    this._repeat = false;
+    this._time = -1;
+  }
+  /** 是否仍在活跃状态（未结束） */
+  get active() {
+    return this.status !== "end";
+  }
+  duration(time) {
+    this._duration = time;
+    return this;
+  }
+  delay(time) {
+    this._delay = time;
+    return this;
+  }
+  easing(easing) {
+    this._easing = easing;
+    return this;
+  }
+  repeat(repeat) {
+    this._repeat = repeat;
+    return this;
+  }
+  /** 动画结束时的清理，子类可覆盖 */
+  onEnd() {
+  }
+  interpolate(time) {
+    if (this.status === "end") return;
+    if (this.status === "last") {
+      if (this._repeat) {
+        this.status = "start";
+        this._time = -1;
+      } else {
+        this.status = "end";
+        this.onEnd();
+        return;
+      }
+    }
+    if (this._time === -1) this._time = time;
+    const elapsed = time - this._time;
+    if (elapsed < this._delay) {
+      this.status = "waiting";
+      return;
+    }
+    this.status = elapsed > this._delay + this._duration ? "last" : "running";
+    const ease = import_rendx_ease.easeMap[this._easing] ?? import_rendx_ease.easeMap["linear"];
+    const raw = this._duration > 0 ? (elapsed - this._delay) / this._duration : 1;
+    const t = ease(Math.max(0, Math.min(1, raw)));
+    this.apply(t);
+  }
+};
+
+// src/transforms/graphics.ts
+var GraphicsTransform = class extends BaseTransform {
+  constructor(values) {
+    super();
+    this.attrs = {};
+    this.values = {};
+    this.V = values;
+  }
+  translate(x, y) {
+    if (!this.attrs.translate) {
+      this.attrs.translate = [this.V.tx, this.V.ty, x, y];
+    } else {
+      const [, , tx2, ty2] = this.attrs.translate;
+      this.attrs.translate = [tx2, ty2, x, y];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  rotate(r) {
+    if (!this.attrs.rotate) {
+      this.attrs.rotate = [this.V.rotate, r];
+    } else {
+      const [, r2] = this.attrs.rotate;
+      this.attrs.rotate = [r2, r];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  scale(x, y) {
+    if (!this.attrs.scale) {
+      this.attrs.scale = [this.V.sx, this.V.sy, x, y];
+    } else {
+      const [, , sx2, sy2] = this.attrs.scale;
+      this.attrs.scale = [sx2, sy2, x, y];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  apply(t) {
+    const { translate, scale, rotate } = this.attrs;
+    if (translate) {
+      this.values.tx = translate[0] + (translate[2] - translate[0]) * t;
+      this.values.ty = translate[1] + (translate[3] - translate[1]) * t;
+    }
+    if (scale) {
+      this.values.sx = scale[0] + (scale[2] - scale[0]) * t;
+      this.values.sy = scale[1] + (scale[3] - scale[1]) * t;
+    }
+    if (rotate) {
+      this.values.rotate = rotate[0] + (rotate[1] - rotate[0]) * t;
+    }
+  }
+  onEnd() {
+    this.attrs = {};
+  }
+};
+
+// src/transforms/attributes.ts
+var import_rendx_interpolate = require("rendx-interpolate");
+var AttributeTransform = class extends BaseTransform {
+  constructor(values) {
+    super();
+    this.attrs = {};
+    this.V = values;
+  }
+  /** 设置属性动画目标值（属性应在调用前已设置初始值） */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  attr(key, value) {
+    this.attrs[key] = [this.V[key] ?? value, value];
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  apply(t) {
+    const { opacity, fill, fillOpacity, stroke, strokeOpacity } = this.attrs;
+    if (opacity) this.V.opacity = opacity[0] + (opacity[1] - opacity[0]) * t;
+    if (fill) this.V.fill = (0, import_rendx_interpolate.interpolateColor)(fill[0], fill[1])(t);
+    if (fillOpacity) this.V.fillOpacity = fillOpacity[0] + (fillOpacity[1] - fillOpacity[0]) * t;
+    if (stroke) this.V.stroke = (0, import_rendx_interpolate.interpolateColor)(stroke[0], stroke[1])(t);
+    if (strokeOpacity) this.V.strokeOpacity = strokeOpacity[0] + (strokeOpacity[1] - strokeOpacity[0]) * t;
+  }
+};
+
+// src/transforms/clip.ts
+var import_rendx_ease2 = require("rendx-ease");
+var import_rendx_path = require("rendx-path");
+var _path, _ClipBoxTransform_instances, generatePath_fn;
+var ClipBoxTransform = class extends BaseTransform {
+  constructor(clipPath) {
+    super();
+    __privateAdd(this, _ClipBoxTransform_instances);
+    this.type = void 0;
+    this.boundingBox = null;
+    __privateAdd(this, _path, null);
+    this.clipPath = clipPath;
+  }
+  direction(type) {
+    this.type = type;
+    return this;
+  }
+  box(box) {
+    this.boundingBox = box;
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  apply(_t) {
+  }
+  interpolate(time) {
+    if (this.status === "end") return;
+    if (this._time === -1) this._time = time;
+    const elapsed = time - this._time;
+    if (elapsed < this._delay) {
+      if (this.status === "init" || this.status === "waiting") {
+        this.status = "waiting";
+        return;
+      }
+      __privateMethod(this, _ClipBoxTransform_instances, generatePath_fn).call(this, 0);
+      this.clipPath.path = __privateGet(this, _path).toString();
+      this.status = "init";
+      return;
+    }
+    if (elapsed - 16 > this._delay + this._duration) {
+      if (this.status === "running") this.status = "clear";
+      else if (this.status === "clear") this.status = "end";
+      return;
+    }
+    this.status = "running";
+    const ease = import_rendx_ease2.easeMap[this._easing] ?? import_rendx_ease2.easeMap["linear"];
+    const t = ease(Math.max(0, Math.min(1, (elapsed - this._delay) / this._duration)));
+    __privateMethod(this, _ClipBoxTransform_instances, generatePath_fn).call(this, t);
+    this.clipPath.path = __privateGet(this, _path).toString();
+  }
+};
+_path = new WeakMap();
+_ClipBoxTransform_instances = new WeakSet();
+generatePath_fn = function(t) {
+  if (!this.boundingBox) return;
+  if (!__privateGet(this, _path)) __privateSet(this, _path, new import_rendx_path.Path());
+  else __privateGet(this, _path).clear();
+  const { x, y, width, height } = this.boundingBox;
+  const x0 = x, y0 = y, x1 = x + width, y1 = y + height;
+  if (this.type === "lr") {
+    const px = x0 + (x1 - x0) * t;
+    __privateGet(this, _path).M(px, y0);
+    __privateGet(this, _path).L(px, y1);
+    __privateGet(this, _path).L(x0, y1);
+    __privateGet(this, _path).L(x0, y0);
+    __privateGet(this, _path).Z();
+  } else if (this.type === "rl") {
+    const px = x1 + (x0 - x1) * t;
+    __privateGet(this, _path).M(px, y1);
+    __privateGet(this, _path).L(px, y0);
+    __privateGet(this, _path).L(x1, y0);
+    __privateGet(this, _path).L(x1, y1);
+    __privateGet(this, _path).Z();
+  } else if (this.type === "tb") {
+    const py = y0 + (y1 - y0) * t;
+    __privateGet(this, _path).M(x0, py);
+    __privateGet(this, _path).L(x1, py);
+    __privateGet(this, _path).L(x1, y0);
+    __privateGet(this, _path).L(x0, y0);
+    __privateGet(this, _path).Z();
+  } else if (this.type === "bt") {
+    const py = y1 + (y0 - y1) * t;
+    __privateGet(this, _path).M(x1, py);
+    __privateGet(this, _path).L(x0, py);
+    __privateGet(this, _path).L(x0, y1);
+    __privateGet(this, _path).L(x1, y1);
+    __privateGet(this, _path).Z();
+  }
+};
+
+// src/transforms/shape/arc.ts
+var ArcTransform = class extends BaseTransform {
+  constructor(values) {
+    super();
+    this.attrs = {};
+    this.values = {};
+    this.V = values;
+  }
+  startAngle(a) {
+    if (!this.attrs.startAngle) {
+      this.attrs.startAngle = [this.V.startAngle, a];
+    } else {
+      this.attrs.startAngle = [this.attrs.startAngle[0], a];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  endAngle(a) {
+    if (!this.attrs.endAngle) {
+      this.attrs.endAngle = [this.V.endAngle, a];
+    } else {
+      this.attrs.endAngle = [this.attrs.endAngle[0], a];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  apply(t) {
+    const { startAngle, endAngle } = this.attrs;
+    if (startAngle) this.values.startAngle = startAngle[0] + (startAngle[1] - startAngle[0]) * t;
+    if (endAngle) this.values.endAngle = endAngle[0] + (endAngle[1] - endAngle[0]) * t;
+  }
+  onEnd() {
+    this.attrs = {};
+  }
+};
+
+// src/transforms/shape/sector.ts
+var SectorTransform = class extends BaseTransform {
+  constructor(values) {
+    super();
+    this.attrs = {};
+    this.values = {};
+    this.V = values;
+  }
+  startAngle(a) {
+    if (!this.attrs.startAngle) {
+      this.attrs.startAngle = [this.V.startAngle, a];
+    } else {
+      this.attrs.startAngle = [this.attrs.startAngle[0], a];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  endAngle(a) {
+    if (!this.attrs.endAngle) {
+      this.attrs.endAngle = [this.V.endAngle, a];
+    } else {
+      this.attrs.endAngle = [this.attrs.endAngle[0], a];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  innerRadius(r) {
+    if (!this.attrs.innerRadius) {
+      this.attrs.innerRadius = [this.V.innerRadius, r];
+    } else {
+      this.attrs.innerRadius = [this.attrs.innerRadius[0], r];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  outerRadius(r) {
+    if (!this.attrs.outerRadius) {
+      this.attrs.outerRadius = [this.V.outerRadius, r];
+    } else {
+      this.attrs.outerRadius = [this.attrs.outerRadius[0], r];
+    }
+    this.status = "start";
+    this._time = -1;
+    return this;
+  }
+  apply(t) {
+    const { startAngle, endAngle, innerRadius, outerRadius } = this.attrs;
+    if (startAngle) this.values.startAngle = startAngle[0] + (startAngle[1] - startAngle[0]) * t;
+    if (endAngle) this.values.endAngle = endAngle[0] + (endAngle[1] - endAngle[0]) * t;
+    if (innerRadius) this.values.innerRadius = innerRadius[0] + (innerRadius[1] - innerRadius[0]) * t;
+    if (outerRadius) this.values.outerRadius = outerRadius[0] + (outerRadius[1] - outerRadius[0]) * t;
+  }
+  onEnd() {
+    this.attrs = {};
+  }
+};
+
+// src/events/target.ts
+var import_eventemitter3 = __toESM(require("eventemitter3"), 1);
+var import_rendx_core = require("rendx-core");
+var _emitter, _EventTarget_instances, getEmitter_fn;
+var EventTarget = class {
+  constructor() {
+    __privateAdd(this, _EventTarget_instances);
+    __privateAdd(this, _emitter, null);
+    this.dispatcher = null;
+  }
+  setDispatcher(dispatcher) {
+    this.dispatcher = dispatcher;
+  }
+  on(event, listener, options) {
+    const { once = false, capture } = options || {};
+    if (capture) event = `capture-${event}`;
+    const emitter = __privateMethod(this, _EventTarget_instances, getEmitter_fn).call(this);
+    if (once) emitter.once(event, listener);
+    else emitter.on(event, listener);
+  }
+  off(event, listener, options) {
+    if (!__privateGet(this, _emitter)) return;
+    const { capture } = options || {};
+    if (capture) event = `capture-${event}`;
+    __privateGet(this, _emitter).off(event, listener);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  emit(event, payload) {
+    if (!__privateGet(this, _emitter)) return;
+    __privateGet(this, _emitter).emit(event, payload);
+  }
+  eventNames() {
+    return __privateGet(this, _emitter) ? __privateGet(this, _emitter).eventNames() : [];
+  }
+  eventTypes() {
+    return this.eventNames().filter((name) => (0, import_rendx_core.isStr)(name)).map((name) => {
+      return name.startsWith("capture-") ? name.slice(8) : name;
+    });
+  }
+  listeners(event) {
+    return __privateGet(this, _emitter) ? __privateGet(this, _emitter).listeners(event) : [];
+  }
+  hasEvent(event) {
+    return __privateGet(this, _emitter) ? __privateGet(this, _emitter).listenerCount(event) > 0 : false;
+  }
+  dispatchEvent(evt) {
+    this.dispatcher?.process(evt);
+  }
+};
+_emitter = new WeakMap();
+_EventTarget_instances = new WeakSet();
+getEmitter_fn = function() {
+  if (!__privateGet(this, _emitter)) __privateSet(this, _emitter, new import_eventemitter3.default());
+  return __privateGet(this, _emitter);
+};
+
+// src/core/graphics.ts
+var _nameMap, _classlist, _Graphics_instances, removeFromNameMap_fn, updateMat2d_fn, updateWorldMatrix_fn, updateEZ_fn;
+var Graphics = class extends EventTarget {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _Graphics_instances);
+    this.type = 0;
+    this.uid = (0, import_rendx_core2.uid8)();
+    this.name = "";
+    this.className = "";
+    this.parent = null;
+    this.children = [];
+    __privateAdd(this, _nameMap, /* @__PURE__ */ new Map());
+    this.z = 0;
+    this.visible = true;
+    this.display = true;
+    this.pointerEvents = true;
+    // 决定是否收到父级的影响
+    this.autoVisible = true;
+    this.autoDisplay = true;
+    this.autoPointerEvents = true;
+    this.autoNeedUpdate = true;
+    this.autoWorldMatrixNeedUpdate = true;
+    this.needUpdate = true;
+    this.worldMatrixNeedUpdate = true;
+    this.data = {};
+    this.ez = 0;
+    this.dirty = true;
+    __privateAdd(this, _classlist, []);
+    this._translate = import_gl_matrix.vec2.fromValues(0, 0);
+    this._rotate = 0;
+    this._scale = import_gl_matrix.vec2.fromValues(1, 1);
+    this.matrix = import_gl_matrix.mat2d.create();
+    this.worldMatrix = import_gl_matrix.mat2d.create();
+    this.transform = null;
+  }
+  /** 当前平移值 [tx, ty]（只读） */
+  get translation() {
+    return this._translate;
+  }
+  /** 当前旋转弧度（只读） */
+  get rotation() {
+    return this._rotate;
+  }
+  /** 当前缩放值 [sx, sy]（只读） */
+  get scaling() {
+    return this._scale;
+  }
+  setName(name) {
+    this.name = name;
+    return this;
+  }
+  setClassName(className) {
+    this.className = className;
+    __privateSet(this, _classlist, (0, import_rendx_core2.uniqueArray)(className.split(" ").filter(Boolean)));
+    return this;
+  }
+  addClassName(className) {
+    if (__privateGet(this, _classlist).includes(className)) return this;
+    __privateGet(this, _classlist).push(className);
+    this.className = __privateGet(this, _classlist).join(" ");
+    return this;
+  }
+  hasClassName(className) {
+    return __privateGet(this, _classlist).includes(className);
+  }
+  setVisible(visible, bySelf = true) {
+    if (!bySelf && !this.autoVisible) return this;
+    this.visible = visible;
+    if (bySelf) this.autoVisible = false;
+    if (this.children.length) {
+      for (let i = 0; i < this.children.length; i++) {
+        this.children[i].setVisible(visible, false);
+      }
+    }
+    this.setDirty(true);
+    return this;
+  }
+  setDisplay(display, bySelf = true) {
+    if (!bySelf && !this.autoDisplay) return this;
+    this.display = display;
+    if (bySelf) this.autoDisplay = false;
+    if (this.children.length) {
+      for (let i = 0; i < this.children.length; i++) {
+        this.children[i].setDisplay(display, false);
+      }
+    }
+    this.setDirty(true);
+    return this;
+  }
+  setPointerEvents(pointerEvents, bySelf = true) {
+    if (!bySelf && !this.autoPointerEvents) return this;
+    this.pointerEvents = pointerEvents;
+    if (bySelf) this.autoPointerEvents = false;
+    if (this.children.length) {
+      for (let i = 0; i < this.children.length; i++) {
+        this.children[i].setPointerEvents(pointerEvents, false);
+      }
+    }
+    return this;
+  }
+  setDirty(dirty) {
+    this.dirty = dirty;
+    if (this.parent && this.dirty) this.parent.setDirty(this.dirty);
+    if (!this.dirty) this.children.forEach((child) => child.setDirty(this.dirty));
+    return this;
+  }
+  /**
+   * 添加子节点。若 child 已有 parent 会先移除。
+   * @param child - 要添加的场景图节点
+   */
+  add(child) {
+    if (child.parent) child.parent.remove(child);
+    child.parent = this;
+    this.children.push(child);
+    if (__privateGet(this, _nameMap).has(child.name)) throw new Error(`The name "${child.name}" is already used.`);
+    if (child.name) __privateGet(this, _nameMap).set(child.name, child);
+    this.setDirty(true);
+    return this;
+  }
+  unshift(child) {
+    if (child.parent) child.parent.remove(child);
+    child.parent = this;
+    this.children.unshift(child);
+    __privateMethod(this, _Graphics_instances, removeFromNameMap_fn).call(this, child);
+    this.setDirty(true);
+    return this;
+  }
+  remove(child) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      const node = this.children[index];
+      this.children.splice(index, 1);
+      __privateMethod(this, _Graphics_instances, removeFromNameMap_fn).call(this, node);
+      this.setDirty(true);
+    }
+    return this;
+  }
+  removeChildren() {
+    this.children.forEach((child) => child.parent = null);
+    this.children = [];
+    __privateGet(this, _nameMap).clear();
+    this.setDirty(true);
+    return this;
+  }
+  is(name) {
+    return this.name === name;
+  }
+  equals(target) {
+    return this.uid === target.uid;
+  }
+  /**
+   * 按名称查找子节点
+   * @param name - 节点名称
+   * @param deep - 是否递归搜索子树（默认 false 仅搜索直接children）
+   */
+  find(name, deep = false) {
+    let node = __privateGet(this, _nameMap).get(name);
+    if (node) return node;
+    if (deep) {
+      const queue = [...this.children];
+      while (queue.length > 0) {
+        const current = queue.shift();
+        node = __privateGet(current, _nameMap).get(name);
+        if (node) return node;
+        queue.push(...current.children);
+      }
+    }
+    return null;
+  }
+  /**
+   * 按 className 查询节点列表
+   * @param className - CSS 风格的类名
+   * @param deep - 是否递归搜索子树
+   */
+  query(className, deep = false) {
+    const result = [];
+    const queue = [...this.children];
+    while (queue.length > 0) {
+      const node = queue.shift();
+      if (node.hasClassName(className)) result.push(node);
+      if (deep) queue.push(...node.children);
+    }
+    return result;
+  }
+  has(name, deep = false) {
+    return this.find(name, deep) != null;
+  }
+  root() {
+    return this.parent ? this.parent.root() : this;
+  }
+  /** 根到当前节点的完整路径（从 root 到 this） */
+  path() {
+    return this.parent ? this.parent.path().concat(this) : [this];
+  }
+  source(target) {
+    return this.path().includes(target);
+  }
+  /** 深度优先遍历子树，包含自身 */
+  traverse(fn) {
+    fn(this);
+    for (let i = 0; i < this.children.length; i++) {
+      this.children[i].traverse(fn);
+    }
+  }
+  setZ(z) {
+    this.z = z;
+    return this;
+  }
+  getZIndex() {
+    return this.ez;
+  }
+  /**
+   * 设置本地矩阵（直接覆盖 translate/rotate/scale 计算的结果）
+   * @param matrix - [a, b, c, d, e, f] 2x3 仿射矩阵
+   * @param needUpdate - 是否触发世界矩阵更新（默认 true）
+   */
+  setMatrix(matrix, needUpdate = true) {
+    this.matrix = import_gl_matrix.mat2d.fromValues(...matrix);
+    this.needUpdate = needUpdate;
+    return this;
+  }
+  setWorldMatrix(matrix, needUpdate = true) {
+    this.worldMatrix = import_gl_matrix.mat2d.fromValues(...matrix);
+    this.worldMatrixNeedUpdate = needUpdate;
+    return this;
+  }
+  /**
+   * 设置平移
+   * @param tx - X 方向平移量（像素）
+   * @param ty - Y 方向平移量（像素）
+   */
+  translate(tx, ty) {
+    this._translate = import_gl_matrix.vec2.fromValues(tx, ty);
+    if (this.transform) {
+      this.transform.V.tx = tx;
+      this.transform.V.ty = ty;
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  translateX(tx) {
+    this._translate[0] += tx;
+    if (this.transform) this.transform.V.tx = this._translate[0];
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  translateY(ty) {
+    this._translate[1] += ty;
+    if (this.transform) this.transform.V.ty = this._translate[1];
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  translateXY(tx, ty) {
+    this._translate[0] += tx;
+    this._translate[1] += ty;
+    if (this.transform) {
+      this.transform.V.tx = this._translate[0];
+      this.transform.V.ty = this._translate[1];
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  rotate(radian) {
+    this._rotate = radian;
+    if (this.transform) this.transform.V.rotate = radian;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  rotateZ(radian) {
+    this._rotate += radian;
+    if (this.transform) this.transform.V.rotate = this._rotate;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  scale(sx, sy) {
+    this._scale = import_gl_matrix.vec2.fromValues(sx, sy);
+    if (this.transform) {
+      this.transform.V.sx = sx;
+      this.transform.V.sy = sy;
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  scaleX(sx) {
+    this._scale[0] *= sx;
+    if (this.transform) this.transform.V.sx = this._scale[0];
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  scaleY(sy) {
+    this._scale[1] *= sy;
+    if (this.transform) this.transform.V.sy = this._scale[1];
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  scaleXY(sx, sy) {
+    this._scale[0] *= sx;
+    this._scale[1] *= sy;
+    if (this.transform) {
+      this.transform.V.sx = this._scale[0];
+      this.transform.V.sy = this._scale[1];
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  /** 启用几何变换动画（GraphicsTransform），可链式配置 duration/delay/easing */
+  useTransform() {
+    if (this.transform) return this;
+    const [tx, ty] = this._translate;
+    const [sx, sy] = this._scale;
+    const rotate = this._rotate;
+    this.transform = new GraphicsTransform({ tx, ty, sx, sy, rotate });
+    return this;
+  }
+  renderable() {
+    return this.visible && this.display;
+  }
+  /** 检查是否需要重绘（自身或子树有脏标记/更新标记） */
+  sign() {
+    if (!this.display) return false;
+    if (this.dirty || this.needUpdate || this.worldMatrixNeedUpdate) return true;
+    for (let i = 0; i < this.children.length; i++) if (this.children[i].sign()) return true;
+    return false;
+  }
+  tick(time) {
+    if (!this.display) return;
+    if (this.transform) {
+      this.transform.interpolate(time);
+      if (this.transform.status === "running" || this.transform.status === "last") {
+        const { tx, ty, sx, sy, rotate } = this.transform.values;
+        if (!(0, import_rendx_core2.isNil)(tx) && !(0, import_rendx_core2.isNil)(ty)) this.translate(tx, ty);
+        if (!(0, import_rendx_core2.isNil)(rotate)) this.rotate(rotate);
+        if (!(0, import_rendx_core2.isNil)(sx) && !(0, import_rendx_core2.isNil)(sy)) this.scale(sx, sy);
+      }
+    }
+    for (let i = 0; i < this.children.length; i++) {
+      this.children[i].tick(time);
+    }
+  }
+  update() {
+    if (!this.display) return;
+    const needUpdateWorldMatrix = this.needUpdate || this.worldMatrixNeedUpdate;
+    __privateMethod(this, _Graphics_instances, updateMat2d_fn).call(this);
+    __privateMethod(this, _Graphics_instances, updateWorldMatrix_fn).call(this);
+    __privateMethod(this, _Graphics_instances, updateEZ_fn).call(this);
+    for (let i = 0; i < this.children.length; i++) {
+      const child = this.children[i];
+      child.worldMatrixNeedUpdate = needUpdateWorldMatrix;
+      child.update();
+    }
+  }
+  clear() {
+    this.data = {};
+    this.removeChildren();
+  }
+  dispose() {
+    this.clear();
+    this.parent = null;
+  }
+};
+_nameMap = new WeakMap();
+_classlist = new WeakMap();
+_Graphics_instances = new WeakSet();
+removeFromNameMap_fn = function(g) {
+  if (__privateGet(this, _nameMap).has(g.name)) __privateGet(this, _nameMap).delete(g.name);
+};
+updateMat2d_fn = function() {
+  if (!this.needUpdate) return;
+  import_gl_matrix.mat2d.identity(this.matrix);
+  import_gl_matrix.mat2d.translate(this.matrix, this.matrix, this._translate);
+  import_gl_matrix.mat2d.rotate(this.matrix, this.matrix, this._rotate);
+  import_gl_matrix.mat2d.scale(this.matrix, this.matrix, this._scale);
+  this.needUpdate = false;
+  this.worldMatrixNeedUpdate = true;
+};
+updateWorldMatrix_fn = function() {
+  if (!this.worldMatrixNeedUpdate) return;
+  if (this.parent) import_gl_matrix.mat2d.multiply(this.worldMatrix, this.parent.worldMatrix, this.matrix);
+  else import_gl_matrix.mat2d.copy(this.worldMatrix, this.matrix);
+  this.worldMatrixNeedUpdate = false;
+};
+updateEZ_fn = function() {
+  this.ez = this.parent ? this.parent.ez + this.z : this.z;
+};
+
+// src/core/shape.ts
+var import_rendx_bounding = require("rendx-bounding");
+var import_rendx_core3 = require("rendx-core");
+var Shape = class {
+  constructor() {
+    this.uid = (0, import_rendx_core3.uid8)();
+    this.type = 0;
+    this.name = "";
+    this.command = "";
+    this.boundingBox = new import_rendx_bounding.BoundingBox();
+    this.creator = null;
+    this.d = "";
+    this.p = null;
+    this.autoNeedUpdate = true;
+    this.needUpdate = true;
+  }
+  setBox(box) {
+    this.boundingBox = box;
+  }
+  /** 按属性名列表获取值（序列化用），避免 as any */
+  getProps(keys) {
+    const self = this;
+    return keys.map((k) => self[k]);
+  }
+  /** 接收节点属性（子类按需 override，如 TextShape 用于文本测量） */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setAttrs(_attrs2) {
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  options(..._args) {
+  }
+  /** 子类覆写此方法设置形状参数（如 CircleShape.from(cx, cy, r)） */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+  from(..._args) {
+  }
+  /** 构建形状：计算包围盒和路径数据，仅在 needUpdate 时执行 */
+  build() {
+    if (!this.needUpdate) return;
+    this.box();
+    this.needUpdate = false;
+  }
+  /** 返回 SVG 路径字符串（d 属性） */
+  path() {
+    return this.d;
+  }
+  /** 返回缓存的 Path2D 对象（用于 Canvas 命中检测） */
+  path2d() {
+    if (!this.p) this.p = new Path2D(this.d);
+    return this.p;
+  }
+  box() {
+    return this.boundingBox;
+  }
+  useTransform() {
+    return this;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  tick(_time) {
+  }
+  /**
+   * 点命中检测（默认使用包围盒，子类可覆写用 path2d 精确检测）
+   * @param point - 本地坐标 [x, y]
+   */
+  hit(point) {
+    if (!this.boundingBox) this.box();
+    if (!this.boundingBox) return false;
+    return this.boundingBox.containsPoint(point[0], point[1]);
+  }
+  clear() {
+    this.needUpdate = true;
+    this.autoNeedUpdate = true;
+  }
+  dispose() {
+    this.clear();
+  }
+};
+
+// src/core/attributes.ts
+var import_rendx_core4 = require("rendx-core");
+var _boundingBox, _Attributes_instances, updateBoundingBoxForGradient_fn;
+var Attributes = class {
+  constructor() {
+    __privateAdd(this, _Attributes_instances);
+    this.uid = (0, import_rendx_core4.uid8)();
+    this.name = "";
+    this.values = {};
+    this.autoNeedUpdate = true;
+    this.needUpdate = true;
+    this.transform = null;
+    this.clipBoxTransform = null;
+    __privateAdd(this, _boundingBox, null);
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  set(key, value) {
+    this.values[key] = value;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  get(key) {
+    return this.values[key];
+  }
+  /** 从对象批量设置属性（替换全部） */
+  from(attrs) {
+    this.values = attrs;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  /** 合并属性（保留已有值，追加新值） */
+  merge(attrs) {
+    Object.entries(attrs ?? {}).forEach(([key, value]) => this.values[key] = value);
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  /** 关联渐变配置 */
+  gradient(gradientOptions) {
+    this.gradientOptions = gradientOptions;
+    if ((0, import_rendx_core4.isNil)(this.gradientOptions.id)) this.gradientOptions.id = this.uid;
+    this.values.fill = `url(#${this.gradientOptions.id})`;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  /** 关联裁剪路径 */
+  clip(clipPath) {
+    this.clipPath = clipPath;
+    if ((0, import_rendx_core4.isNil)(this.clipPath.id)) this.clipPath.id = this.uid;
+    this.values.clipPath = `url(#${this.clipPath.id})`;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  setBox(box) {
+    __privateSet(this, _boundingBox, box);
+    return this;
+  }
+  /** 启用属性动画（可对 opacity/fill/stroke 等做插值动画） */
+  useTransform() {
+    if (this.transform) return this;
+    this.transform = new AttributeTransform(this.values);
+    return this;
+  }
+  /** 启用裁剪框动画（lr/rl/tb/bt 方向的揭露动效） */
+  useClipBoxTransform() {
+    if (this.clipBoxTransform) return this;
+    this.clip({ id: this.uid, path: "" });
+    this.set("clipPath", `url(#${this.uid})`);
+    this.clipBoxTransform = new ClipBoxTransform(this.clipPath);
+    return this;
+  }
+  tick(time) {
+    if (this.transform) {
+      this.transform.interpolate(time);
+      if (this.transform.status === "running" || this.transform.status === "last") this.needUpdate = true;
+    }
+    if (this.clipBoxTransform) {
+      this.clipBoxTransform.interpolate(time);
+      const { status } = this.clipBoxTransform;
+      if (status === "init" || status === "running") this.needUpdate = true;
+      if (status === "clear") {
+        this.clipPath = void 0;
+        delete this.values.clipPath;
+        this.needUpdate = true;
+      }
+    }
+    return this;
+  }
+  update() {
+    if (!this.needUpdate) return;
+    __privateMethod(this, _Attributes_instances, updateBoundingBoxForGradient_fn).call(this);
+    this.needUpdate = false;
+  }
+  clear() {
+    this.values = {};
+    this.gradientOptions = void 0;
+    this.clipPath = void 0;
+    return this;
+  }
+  dispose() {
+    this.clear();
+  }
+};
+_boundingBox = new WeakMap();
+_Attributes_instances = new WeakSet();
+updateBoundingBoxForGradient_fn = function() {
+  if (!__privateGet(this, _boundingBox)) return;
+  if (!this.gradientOptions) return;
+  if (this.gradientOptions.region) return;
+  const { x, y, width, height } = __privateGet(this, _boundingBox);
+  this.gradientOptions.region = [x, y, width, height];
+};
+
+// src/core/canvas-hit.ts
+var import_rendx_core5 = require("rendx-core");
+var isEmptyOrNone = (v) => (0, import_rendx_core5.isEmpty)(v) || (0, import_rendx_core5.isNone)(v);
+function setCanvasRenderingContext2StrokeAttrs(ctx, attributes) {
+  const { strokeWidth, strokeLinecap, strokeLinejoin, strokeMiterlimit, strokeDasharray, strokeDashoffset } = attributes;
+  if ((0, import_rendx_core5.isNum)(strokeWidth)) ctx.lineWidth = strokeWidth;
+  if ((0, import_rendx_core5.isStr)(strokeLinecap)) ctx.lineCap = strokeLinecap;
+  if ((0, import_rendx_core5.isStr)(strokeLinejoin)) ctx.lineJoin = strokeLinejoin;
+  if ((0, import_rendx_core5.isNum)(strokeMiterlimit)) ctx.miterLimit = strokeMiterlimit;
+  if ((0, import_rendx_core5.isNum)(strokeDashoffset)) ctx.lineDashOffset = strokeDashoffset;
+  if ((0, import_rendx_core5.isStr)(strokeDasharray)) ctx.setLineDash(strokeDasharray.split(",").map((x) => Number(x.trim())));
+}
+var _ctx = null;
+var getCtx = () => {
+  if (!_ctx && typeof OffscreenCanvas !== "undefined") {
+    _ctx = new OffscreenCanvas(1, 1).getContext("2d");
+  }
+  return _ctx;
+};
+var checkHit = (method, path, point, style, strokeAttrs) => {
+  const ctx = getCtx();
+  if (!isEmptyOrNone(style) && ctx) {
+    if (method === "isPointInPath") return ctx.isPointInPath(path, point[0], point[1]);
+    if (method === "isPointInStroke") {
+      ctx.save();
+      if (strokeAttrs) setCanvasRenderingContext2StrokeAttrs(ctx, strokeAttrs);
+      const flag = ctx.isPointInStroke(path, point[0], point[1]);
+      ctx.restore();
+      return flag;
+    }
+  }
+  return false;
+};
+var isHit = (path, point, fill, stroke, strokeAttrs) => {
+  if (!getCtx()) return false;
+  if (checkHit("isPointInPath", path, point, fill)) return true;
+  return checkHit("isPointInStroke", path, point, stroke, strokeAttrs);
+};
+
+// src/core/image-loader.ts
+var _cache, _ImageLoader_instances, createEntry_fn;
+var ImageLoader = class {
+  constructor() {
+    __privateAdd(this, _ImageLoader_instances);
+    __privateAdd(this, _cache, /* @__PURE__ */ new Map());
+    /** 全局回调：任何图片加载完成时触发（用于重启渲染循环） */
+    this.onChange = null;
+  }
+  load(src, onReady) {
+    let entry = __privateGet(this, _cache).get(src);
+    if (!entry) {
+      entry = __privateMethod(this, _ImageLoader_instances, createEntry_fn).call(this, src);
+      __privateGet(this, _cache).set(src, entry);
+    }
+    if (onReady && !entry.ready) entry.listeners.add(onReady);
+    return entry.source;
+  }
+  get(src) {
+    return __privateGet(this, _cache).get(src)?.source ?? null;
+  }
+  has(src) {
+    return __privateGet(this, _cache).get(src)?.ready ?? false;
+  }
+  clear() {
+    __privateGet(this, _cache).clear();
+  }
+};
+_cache = new WeakMap();
+_ImageLoader_instances = new WeakSet();
+createEntry_fn = function(src) {
+  const listeners = /* @__PURE__ */ new Set();
+  const entry = { source: null, ready: false, listeners };
+  const img = new Image();
+  img.crossOrigin = "anonymous";
+  img.onload = () => {
+    entry.source = img;
+    entry.ready = true;
+    listeners.forEach((fn) => fn());
+    listeners.clear();
+    this.onChange?.();
+  };
+  img.src = src;
+  return entry;
+};
+var imageLoader = new ImageLoader();
+
+// src/scene/scene.ts
+var import_gl_matrix2 = require("gl-matrix");
+var _queue, _invertWorldMatrix, _layerMap;
+var Scene = class extends Graphics {
+  constructor() {
+    super(...arguments);
+    this.type = 1;
+    __privateAdd(this, _queue, []);
+    __privateAdd(this, _invertWorldMatrix, null);
+    /** 有序层列表（按 layerIndex 排序） */
+    this.layers = [];
+    /** 层名称 → Layer 快速查找 */
+    __privateAdd(this, _layerMap, /* @__PURE__ */ new Map());
+  }
+  /** 注册一个 Layer（由 App 调用） */
+  registerLayer(layer) {
+    __privateGet(this, _layerMap).set(layer.layerName, layer);
+    this.layers.push(layer);
+    this.layers.sort((a, b) => a.layerIndex - b.layerIndex);
+    super.add(layer);
+  }
+  /** 按名称获取 Layer */
+  getLayer(name) {
+    return __privateGet(this, _layerMap).get(name);
+  }
+  /** 移除 Layer（事件层不可移除） */
+  removeLayer(name) {
+    const layer = __privateGet(this, _layerMap).get(name);
+    if (!layer || layer.isEventLayer) return;
+    __privateGet(this, _layerMap).delete(name);
+    this.layers = this.layers.filter((l) => l !== layer);
+    super.remove(layer);
+    layer.dispose();
+  }
+  /**
+   * 默认 add：添加到 default 层（向下兼容）
+   * 如果没有 layer，退回原行为（直接加到 Scene children）
+   */
+  add(child) {
+    const defaultLayer = __privateGet(this, _layerMap).get("default");
+    if (defaultLayer) {
+      defaultLayer.add(child);
+    } else {
+      super.add(child);
+    }
+    return this;
+  }
+  /** 收集所有可渲染节点（type=3），按 ez 排序，带脏标记缓存 */
+  getQueue() {
+    if (this.dirty) {
+      const queue = [];
+      if (this.layers.length > 0) {
+        for (const layer of this.layers) {
+          if (!layer.isEventLayer) {
+            queue.push(...layer.getQueue());
+          }
+        }
+      } else {
+        this.traverse((node) => {
+          if (node.type === 3) queue.push(node);
+        });
+      }
+      queue.sort((a, b) => a.ez - b.ez);
+      this.setDirty(false);
+      __privateSet(this, _queue, queue);
+    }
+    return __privateGet(this, _queue);
+  }
+  /** 跨层命中检测：从最高层向下搜索 */
+  pick(point) {
+    if (this.layers.length > 0) {
+      for (let i = this.layers.length - 1; i >= 0; i--) {
+        const layer = this.layers[i];
+        if (layer.isEventLayer) continue;
+        const queue = layer.getQueue();
+        for (let j = queue.length - 1; j >= 0; j--) {
+          const node = queue[j];
+          if (node.hit(point)) return node;
+        }
+      }
+      return void 0;
+    }
+    for (let i = __privateGet(this, _queue).length - 1; i >= 0; i--) {
+      const node = __privateGet(this, _queue)[i];
+      if (node.hit(point)) return node;
+    }
+    return void 0;
+  }
+  /**
+   * 屏幕坐标 → 场景坐标（通过逆 worldMatrix 变换，缓存逆矩阵）
+   * @param point - 画布像素坐标 [x, y]
+   */
+  position(point) {
+    if (!__privateGet(this, _invertWorldMatrix)) __privateSet(this, _invertWorldMatrix, import_gl_matrix2.mat2d.invert(import_gl_matrix2.mat2d.create(), this.worldMatrix));
+    return import_gl_matrix2.vec2.transformMat2d(import_gl_matrix2.vec2.create(), point, __privateGet(this, _invertWorldMatrix));
+  }
+  setMatrix(matrix, needUpdate) {
+    __privateSet(this, _invertWorldMatrix, null);
+    return super.setMatrix(matrix, needUpdate);
+  }
+};
+_queue = new WeakMap();
+_invertWorldMatrix = new WeakMap();
+_layerMap = new WeakMap();
+
+// src/scene/group.ts
+var Group = class extends Graphics {
+  constructor() {
+    super(...arguments);
+    this.type = 2;
+  }
+};
+
+// src/scene/node.ts
+var import_gl_matrix3 = require("gl-matrix");
+var import_rendx_bounding15 = require("rendx-bounding");
+
+// src/shapes/symbol.ts
+var import_rendx_bounding2 = require("rendx-bounding");
+var import_rendx_shape = require("rendx-shape");
+var import_rendx_path2 = require("rendx-path");
+var SymbolShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.r = 1;
+    this.symbol = "circle";
+  }
+  options(symbol) {
+    this.symbol = symbol;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(r) {
+    this.r = r;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path2.Path();
+    else this.creator.clear();
+    (0, import_rendx_shape.createSymbol)(this.creator, this.symbol, { cx: 0, cy: 0, r: this.r });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { r } = this;
+    this.boundingBox = import_rendx_bounding2.BoundingBox.fromPoints(-r, -r, r, r);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/round.ts
+var import_rendx_bounding3 = require("rendx-bounding");
+var import_rendx_shape2 = require("rendx-shape");
+var import_rendx_path3 = require("rendx-path");
+var RoundShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.x = 0;
+    this.y = 0;
+    this.width = 0;
+    this.height = 0;
+    this.rx = void 0;
+    this.ry = void 0;
+  }
+  options(rx, ry) {
+    this.rx = rx;
+    this.ry = ry ?? rx;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path3.Path();
+    else this.creator.clear();
+    const { x, y, width, height, rx, ry } = this;
+    (0, import_rendx_shape2.createShape)(this.creator, "rect", { x, y, width, height, rx, ry });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { x, y, width, height } = this;
+    this.boundingBox = import_rendx_bounding3.BoundingBox.fromRect(x, y, width, height);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/curve.ts
+var import_rendx_bounding4 = require("rendx-bounding");
+var import_rendx_shape3 = require("rendx-shape");
+var import_rendx_core6 = require("rendx-core");
+var import_rendx_path4 = require("rendx-path");
+var CurveShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.segments = [];
+    this.curve = "linear";
+    this.closed = false;
+  }
+  options(curve, closed) {
+    this.curve = curve;
+    this.closed = closed;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(segments) {
+    this.segments = segments;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path4.Path();
+    else this.creator.clear();
+    const { segments, curve, closed } = this;
+    (0, import_rendx_shape3.createShape)(this.creator, "segmentLine", { segments, curve, closed });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const segments = this.segments.flat();
+    const [x0, x1] = (0, import_rendx_core6.extent)(segments.map(([x]) => x));
+    const [y0, y1] = (0, import_rendx_core6.extent)(segments.map(([, y]) => y));
+    this.boundingBox = import_rendx_bounding4.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/area.ts
+var import_rendx_bounding5 = require("rendx-bounding");
+var import_rendx_shape4 = require("rendx-shape");
+var import_rendx_core7 = require("rendx-core");
+var import_rendx_path5 = require("rendx-path");
+var AreaShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.upperSegments = [];
+    this.lowerSegments = [];
+    this.curve = "linear";
+  }
+  options(curve) {
+    this.curve = curve;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(upperSegments, lowerSegments) {
+    this.upperSegments = upperSegments;
+    this.lowerSegments = lowerSegments;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path5.Path();
+    else this.creator.clear();
+    const { upperSegments, lowerSegments, curve } = this;
+    (0, import_rendx_shape4.createShape)(this.creator, "segmentArea", { upperSegments, lowerSegments, curve });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { upperSegments, lowerSegments } = this;
+    const U = upperSegments.flat();
+    const L = lowerSegments.flat();
+    const P = U.concat(L);
+    const [x0, x1] = (0, import_rendx_core7.extent)(P.map(([x]) => x));
+    const [y0, y1] = (0, import_rendx_core7.extent)(P.map(([, y]) => y));
+    this.boundingBox = import_rendx_bounding5.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/polygon.ts
+var import_rendx_bounding6 = require("rendx-bounding");
+var import_rendx_shape5 = require("rendx-shape");
+var import_rendx_core8 = require("rendx-core");
+var import_rendx_path6 = require("rendx-path");
+var PolygonShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.points = [];
+    this.curve = "linear";
+    this.closed = true;
+  }
+  options(curve, closed = true) {
+    this.curve = curve;
+    this.closed = closed;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(points) {
+    this.points = points;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path6.Path();
+    else this.creator.clear();
+    const { points, curve, closed } = this;
+    (0, import_rendx_shape5.createShape)(this.creator, "line", { points, curve, closed });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { points } = this;
+    const [x0, x1] = (0, import_rendx_core8.extent)(points.map(([x]) => x));
+    const [y0, y1] = (0, import_rendx_core8.extent)(points.map(([, y]) => y));
+    this.boundingBox = import_rendx_bounding6.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/sector.ts
+var import_rendx_bounding7 = require("rendx-bounding");
+var import_rendx_shape6 = require("rendx-shape");
+var import_rendx_path7 = require("rendx-path");
+var SectorShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.r = 1;
+    this.startAngle = 0;
+    this.endAngle = Math.PI * 2;
+    this.padAngle = void 0;
+    this.innerRadius = 0;
+    this.outerRadius = 1;
+    this.rc = void 0;
+    this.transform = null;
+  }
+  options(rc) {
+    this.rc = rc;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  from(r, startAngle, endAngle, innerRadius, outerRadius, padAngle) {
+    this.r = r;
+    this.startAngle = startAngle;
+    this.endAngle = endAngle;
+    this.innerRadius = innerRadius;
+    this.outerRadius = outerRadius;
+    this.padAngle = padAngle;
+    if (this.transform) {
+      this.transform.V.startAngle = startAngle;
+      this.transform.V.endAngle = endAngle;
+      this.transform.V.innerRadius = innerRadius;
+      this.transform.V.outerRadius = outerRadius;
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path7.Path();
+    else this.creator.clear();
+    const { r, startAngle, endAngle, innerRadius, outerRadius, padAngle, rc } = this;
+    (0, import_rendx_shape6.createShape)(this.creator, "sector", { cx: 0, cy: 0, r, startAngle, endAngle, innerRadius, outerRadius, padAngle, rc });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { r, startAngle, endAngle, innerRadius, outerRadius } = this;
+    const points = [];
+    const r0 = innerRadius * r;
+    const r1 = outerRadius * r;
+    points.push([0, 0]);
+    points.push([r1 * Math.cos(startAngle), r1 * Math.sin(startAngle)]);
+    points.push([r1 * Math.cos(endAngle), r1 * Math.sin(endAngle)]);
+    points.push([r0 * Math.cos(startAngle), r0 * Math.sin(startAngle)]);
+    points.push([r0 * Math.cos(endAngle), r0 * Math.sin(endAngle)]);
+    if (startAngle <= Math.PI && endAngle >= Math.PI) points.push([-r1, 0]);
+    if (startAngle <= 0 && endAngle >= 0) points.push([r1, 0]);
+    if (startAngle <= 1.5 * Math.PI && endAngle >= 1.5 * Math.PI) points.push([0, -r1]);
+    if (startAngle <= 0.5 * Math.PI && endAngle >= 0.5 * Math.PI) points.push([0, r1]);
+    const X = points.map(([x]) => x);
+    const Y = points.map(([, y]) => y);
+    const x0 = Math.min(...X);
+    const x1 = Math.max(...X);
+    const y0 = Math.min(...Y);
+    const y1 = Math.max(...Y);
+    this.boundingBox = import_rendx_bounding7.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+  useTransform() {
+    if (this.transform) return this;
+    const { startAngle, endAngle, innerRadius, outerRadius } = this;
+    this.transform = new SectorTransform({ startAngle, endAngle, innerRadius, outerRadius });
+    return this;
+  }
+  tick(time) {
+    if (this.transform) {
+      this.transform.interpolate(time);
+      if (this.transform.status === "running" || this.transform.status === "last") {
+        const { startAngle, endAngle, innerRadius, outerRadius } = this.transform.values;
+        if (startAngle) this.startAngle = startAngle;
+        if (endAngle) this.endAngle = endAngle;
+        if (innerRadius) this.innerRadius = innerRadius;
+        if (outerRadius) this.outerRadius = outerRadius;
+        if (startAngle || endAngle || innerRadius || outerRadius) this.needUpdate = true;
+      }
+    }
+    return this;
+  }
+};
+
+// src/shapes/arc.ts
+var import_rendx_bounding8 = require("rendx-bounding");
+var import_rendx_shape7 = require("rendx-shape");
+var import_rendx_core9 = require("rendx-core");
+var import_rendx_path8 = require("rendx-path");
+var ArcShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+    this.r = 1;
+    this.startAngle = 0;
+    this.endAngle = Math.PI * 2;
+    this.radius = 1;
+    this.transform = null;
+  }
+  from(r, startAngle, endAngle, radius) {
+    this.r = r;
+    this.startAngle = startAngle;
+    this.endAngle = endAngle;
+    this.radius = radius;
+    if (this.transform) {
+      this.transform.V.startAngle = startAngle;
+      this.transform.V.endAngle = endAngle;
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (!this.creator) this.creator = new import_rendx_path8.Path();
+    else this.creator.clear();
+    const { r, startAngle, endAngle, radius } = this;
+    (0, import_rendx_shape7.createShape)(this.creator, "arc", { cx: 0, cy: 0, r, startAngle, endAngle, radius });
+    this.d = this.creator.toString();
+    this.p = null;
+    this.box();
+    this.needUpdate = false;
+  }
+  path() {
+    return this.d;
+  }
+  box() {
+    const { r, startAngle, endAngle, radius } = this;
+    const points = [];
+    const r1 = r * radius;
+    const midAngle = (startAngle + endAngle) / 2;
+    points.push([r1 * Math.cos(startAngle), r1 * Math.sin(startAngle)]);
+    points.push([r1 * Math.cos(midAngle), r1 * Math.sin(midAngle)]);
+    points.push([r1 * Math.cos(endAngle), r1 * Math.sin(endAngle)]);
+    const X = points.map(([x]) => x);
+    const Y = points.map(([, y]) => y);
+    const [x0, x1] = (0, import_rendx_core9.extent)(X);
+    const [y0, y1] = (0, import_rendx_core9.extent)(Y);
+    this.boundingBox = import_rendx_bounding8.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+  useTransform() {
+    if (this.transform) return this;
+    this.transform = new ArcTransform({ startAngle: this.startAngle, endAngle: this.endAngle });
+    return this;
+  }
+  tick(time) {
+    if (this.transform) {
+      this.transform.interpolate(time);
+      if (this.transform.status === "running" || this.transform.status === "last") {
+        const { startAngle, endAngle } = this.transform.values;
+        if (startAngle) this.startAngle = startAngle;
+        if (endAngle) this.endAngle = endAngle;
+        if (startAngle || endAngle) this.needUpdate = true;
+      }
+    }
+    return this;
+  }
+};
+
+// src/shapes/path.ts
+var PathShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "path";
+  }
+  from(d) {
+    this.d = d;
+    this.p = null;
+  }
+};
+
+// src/shapes/text.ts
+var import_rendx_bounding9 = require("rendx-bounding");
+var _attrs;
+var _TextShape = class _TextShape extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "text";
+    this.x = 0;
+    this.y = 0;
+    this.text = "";
+    /** 实例级文本测量函数，优先于 `defaultMeasure` */
+    this.measure = null;
+    /** 当前绑定的属性（Node.update → shape.setAttrs 注入，供测量函数读取字体信息） */
+    __privateAdd(this, _attrs, {});
+  }
+  setAttrs(attrs) {
+    __privateSet(this, _attrs, attrs);
+  }
+  from(text, x, y) {
+    this.x = x;
+    this.y = y;
+    this.text = text;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    this.box();
+    this.needUpdate = false;
+  }
+  box() {
+    const measureFn = this.measure ?? _TextShape.defaultMeasure;
+    if (measureFn && this.text) {
+      const bb = measureFn(this.text, __privateGet(this, _attrs));
+      if (bb) {
+        this.boundingBox = import_rendx_bounding9.BoundingBox.fromRect(this.x, this.y - bb.height, bb.width, bb.height);
+        return this.boundingBox;
+      }
+    }
+    return this.boundingBox;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  hit(_point) {
+    if (this.boundingBox && !this.boundingBox.empty) {
+      return this.boundingBox.containsPoint(_point[0], _point[1]);
+    }
+    return false;
+  }
+};
+_attrs = new WeakMap();
+/**
+ * 全局默认文本测量函数。
+ * 使用者通过 `TextShape.defaultMeasure = fn` 注入，
+ * 所有 TextShape 实例默认使用此函数（除非实例级覆盖）。
+ *
+ * @example
+ * ```ts
+ * import {getTextBoundingBox} from 'rendx-dom';
+ * TextShape.defaultMeasure = (text, attrs) =>
+ *   getTextBoundingBox({fontSize: attrs.fontSize, fontFamily: attrs.fontFamily}, text);
+ * ```
+ */
+_TextShape.defaultMeasure = null;
+var TextShape = _TextShape;
+
+// src/shapes/line.ts
+var import_rendx_bounding10 = require("rendx-bounding");
+var LineShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "line";
+    this.x1 = 0;
+    this.y1 = 0;
+    this.x2 = 1;
+    this.y2 = 1;
+  }
+  /**
+   * 设置线段端点
+   * @param x1 - 起点 X
+   * @param y1 - 起点 Y
+   * @param x2 - 终点 X
+   * @param y2 - 终点 Y
+   */
+  from(x1, y1, x2, y2) {
+    this.x1 = x1;
+    this.y1 = y1;
+    this.x2 = x2;
+    this.y2 = y2;
+    this.d = `M${x1} ${y1} L${x2} ${y2}`;
+    this.p = null;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  path2d() {
+    if (!this.p) this.p = new Path2D(this.d);
+    return this.p;
+  }
+  box() {
+    const { x1, y1, x2, y2 } = this;
+    this.boundingBox = import_rendx_bounding10.BoundingBox.fromPoints(x1, y1, x2, y2);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/rect.ts
+var import_rendx_bounding11 = require("rendx-bounding");
+var RectShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "rect";
+    this.x = 0;
+    this.y = 0;
+    this.width = 1;
+    this.height = 1;
+  }
+  /**
+   * 设置矩形参数
+   * @param x - 左上角 X
+   * @param y - 左上角 Y
+   * @param width - 宽度
+   * @param height - 高度
+   */
+  from(x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+  }
+  hit(point) {
+    const [px, py] = point;
+    const { x, y, width, height } = this;
+    return x <= px && px <= x + width && y <= py && py <= y + height;
+  }
+  box() {
+    const { x, y, width, height } = this;
+    this.boundingBox = import_rendx_bounding11.BoundingBox.fromRect(x, y, width, height);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/circle.ts
+var import_rendx_bounding12 = require("rendx-bounding");
+var CircleShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "circle";
+    this.cx = 0;
+    this.cy = 0;
+    this.r = 1;
+  }
+  /**
+   * 设置圆形参数
+   * @param cx - 圆心 X
+   * @param cy - 圆心 Y
+   * @param r - 半径
+   */
+  from(cx, cy, r) {
+    this.cx = cx;
+    this.cy = cy;
+    this.r = r;
+  }
+  hit(point) {
+    const dx = point[0] - this.cx;
+    const dy = point[1] - this.cy;
+    return Math.sqrt(dx * dx + dy * dy) <= this.r;
+  }
+  box() {
+    const { cx, cy, r } = this;
+    this.boundingBox = import_rendx_bounding12.BoundingBox.fromPoints(cx - r, cy - r, cx + r, cy + r);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/image.ts
+var import_rendx_bounding13 = require("rendx-bounding");
+var ImageShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.command = "image";
+    this.src = "";
+    this.x = 0;
+    this.y = 0;
+    this.width = 0;
+    this.height = 0;
+    this.source = null;
+  }
+  from(src, x, y, width, height) {
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    if (src !== this.src) {
+      this.src = src;
+      this.source = imageLoader.load(src, () => {
+        this.source = imageLoader.get(src);
+        this.needUpdate = true;
+      });
+    }
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  /** 直接传入已加载的图片对象（跳过 loader） */
+  fromElement(el, x, y, width, height) {
+    this.source = el;
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+    return this;
+  }
+  hit(point) {
+    const [px, py] = point;
+    const { x, y, width, height } = this;
+    return x <= px && px <= x + width && y <= py && py <= y + height;
+  }
+  box() {
+    const { x, y, width, height } = this;
+    this.boundingBox = import_rendx_bounding13.BoundingBox.fromRect(x, y, width, height);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/rect-buffer.ts
+var import_rendx_bounding14 = require("rendx-bounding");
+var import_rendx_shape8 = require("rendx-shape");
+var import_rendx_path9 = require("rendx-path");
+var RectBufferShape = class extends Shape {
+  constructor() {
+    super(...arguments);
+    this.type = 3;
+    this.command = "path";
+    this.mode = "render";
+    this.buffer = new Float32Array(0);
+    this.hitIndex = -1;
+  }
+  from(buffer) {
+    this.buffer = buffer;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  build() {
+    if (!this.needUpdate) return;
+    if (this.mode === "render") {
+      if (!this.creator) this.creator = new import_rendx_path9.Path();
+      else this.creator.clear();
+      const { buffer } = this;
+      for (let i = 0; i < buffer.length; i += 4) {
+        const x = buffer[i];
+        const y = buffer[i + 1];
+        const width = buffer[i + 2];
+        const height = buffer[i + 3];
+        (0, import_rendx_shape8.createShape)(this.creator, "rect", { x, y, width, height });
+      }
+      this.d = this.creator.toString();
+      this.p = null;
+    }
+    this.needUpdate = false;
+  }
+  hit(point) {
+    const [px, py] = point;
+    const { buffer } = this;
+    for (let i = 0; i < buffer.length; i += 4) {
+      const x = buffer[i];
+      const y = buffer[i + 1];
+      const width = buffer[i + 2];
+      const height = buffer[i + 3];
+      if (x <= px && px <= x + width && y <= py && py <= y + height) {
+        this.hitIndex = Math.floor(i / 4);
+        return true;
+      }
+    }
+    this.hitIndex = -1;
+    return false;
+  }
+  box() {
+    const { buffer } = this;
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (let i = 0; i < buffer.length; i += 4) {
+      const x = buffer[i];
+      const y = buffer[i + 1];
+      const width = buffer[i + 2];
+      const height = buffer[i + 3];
+      x0 = Math.min(x0, x);
+      y0 = Math.min(y0, y);
+      x1 = Math.max(x1, x + width);
+      y1 = Math.max(y1, y + height);
+    }
+    this.boundingBox = import_rendx_bounding14.BoundingBox.fromPoints(x0, y0, x1, y1);
+    return this.boundingBox;
+  }
+};
+
+// src/shapes/shape.ts
+var shapes = {
+  text: TextShape,
+  circle: CircleShape,
+  rect: RectShape,
+  line: LineShape,
+  path: PathShape,
+  curve: CurveShape,
+  area: AreaShape,
+  polygon: PolygonShape,
+  sector: SectorShape,
+  arc: ArcShape,
+  symbol: SymbolShape,
+  round: RoundShape,
+  rectBuffer: RectBufferShape,
+  image: ImageShape
+};
+var createShape8 = (type) => {
+  const Ctor = shapes[type];
+  if (!Ctor) throw new Error(`Unknown shape type: ${type}`);
+  return new Ctor();
+};
+
+// src/scene/node.ts
+var _invertWorldMatrix2;
+var _Node = class _Node extends Graphics {
+  constructor(shape, attrs) {
+    super();
+    this.type = 3;
+    /** Shape 注册类型名（如 'rect', 'circle' 等），序列化时使用 */
+    this.shapeType = "";
+    __privateAdd(this, _invertWorldMatrix2, null);
+    this.shape = shape;
+    this.attrs = attrs;
+  }
+  /**
+   * 创建指定类型的节点（推荐使用此工厂方法而非直接 new）
+   * @param type - 形状类型：'circle' | 'rect' | 'line' | 'path' | 'text' | 'image'
+   * @param values - 视觉属性（fill/stroke/opacity/fontSize 等）
+   */
+  static create(type, values = {}) {
+    const shape = createShape8(type);
+    const attrs = new Attributes().from(values);
+    const node = new _Node(shape, attrs);
+    node.shapeType = type;
+    return node;
+  }
+  tick(time) {
+    if (!this.display) return;
+    this.shape.tick(time);
+    this.attrs.tick(time);
+    super.tick(time);
+  }
+  update() {
+    super.update();
+    this.shape.setAttrs(this.attrs.values);
+    this.shape.build();
+    this.attrs.setBox(this.shape.boundingBox);
+    this.attrs.update();
+    __privateSet(this, _invertWorldMatrix2, null);
+  }
+  sign() {
+    return super.sign() || this.shape.needUpdate || this.attrs.needUpdate;
+  }
+  /**
+   * 计算节点在世界坐标系中的轴对齐包围盒 (AABB)。
+   * 通过 worldMatrix 变换本地 boundingBox 的四个角点,
+   * 返回变换后的包围盒。若本地包围盒不可用，返回 null。
+   */
+  getWorldBBox() {
+    const bb = this.shape.boundingBox;
+    if (!bb || bb.empty) return null;
+    const m = this.worldMatrix;
+    const x0 = bb.x, y0 = bb.y, x1 = bb.right, y1 = bb.bottom;
+    let wx, wy;
+    let minX, maxX, minY, maxY;
+    wx = m[0] * x0 + m[2] * y0 + m[4];
+    wy = m[1] * x0 + m[3] * y0 + m[5];
+    minX = maxX = wx;
+    minY = maxY = wy;
+    wx = m[0] * x1 + m[2] * y0 + m[4];
+    wy = m[1] * x1 + m[3] * y0 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    wx = m[0] * x1 + m[2] * y1 + m[4];
+    wy = m[1] * x1 + m[3] * y1 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    wx = m[0] * x0 + m[2] * y1 + m[4];
+    wy = m[1] * x0 + m[3] * y1 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    return import_rendx_bounding15.BoundingBox.fromPoints(minX, minY, maxX, maxY);
+  }
+  /**
+   * 命中检测：将屏幕坐标通过逆世界矩阵变换为本地坐标，然后检测是否命中
+   * @param point - 场景坐标 [x, y]
+   * @returns 命中时返回自身，否则 undefined
+   */
+  hit(point) {
+    if (!this.display || !this.pointerEvents) return;
+    if (!__privateGet(this, _invertWorldMatrix2)) __privateSet(this, _invertWorldMatrix2, import_gl_matrix3.mat2d.invert(import_gl_matrix3.mat2d.create(), this.worldMatrix));
+    const local = import_gl_matrix3.vec2.transformMat2d(import_gl_matrix3.vec2.create(), import_gl_matrix3.vec2.fromValues(...point), __privateGet(this, _invertWorldMatrix2));
+    let flag = this.shape.hit(local);
+    const { type, command } = this.shape;
+    if (type === 0 && (command === "path" || command === "line")) {
+      const { fill, stroke } = this.attrs.values;
+      flag = isHit(this.shape.path2d(), local, fill, stroke, this.attrs.values);
+    }
+    return flag ? this : void 0;
+  }
+};
+_invertWorldMatrix2 = new WeakMap();
+var Node = _Node;
+
+// src/renderers/renderer.ts
+var import_gl_matrix4 = require("gl-matrix");
+var import_rendx_core10 = require("rendx-core");
+var import_rendx_canvas = require("rendx-canvas");
+var import_rendx_svg = require("rendx-svg");
+var DEFAULT_CONFIG = {
+  width: 800,
+  height: 600,
+  renderer: "canvas"
+};
+var drawText = (r, n) => {
+  const { x, y, text } = n.shape;
+  r.text(text, x, y);
+};
+var drawCircle = (r, n) => {
+  const { cx, cy, r: radius } = n.shape;
+  r.circle(cx, cy, radius);
+};
+var drawRect = (r, n) => {
+  const { x, y, width, height } = n.shape;
+  r.rect(x, y, width, height);
+};
+var drawLine = (r, n) => {
+  const { x1, y1, x2, y2 } = n.shape;
+  r.line(x1, y1, x2, y2);
+};
+var drawPath = (r, n) => {
+  r.path(n.shape.path());
+};
+var drawImage = (r, n) => {
+  const { source, x, y, width, height } = n.shape;
+  if (!source) return;
+  r.image(source, x, y, width, height);
+};
+var DRAW_MAP = {
+  text: drawText,
+  circle: drawCircle,
+  rect: drawRect,
+  line: drawLine,
+  path: drawPath,
+  image: drawImage
+};
+var _renderer, _Renderer_instances, createRenderer_fn, computeViewMatrix_fn;
+var Renderer = class {
+  constructor(cfg) {
+    __privateAdd(this, _Renderer_instances);
+    __privateAdd(this, _renderer);
+    this.viewMatrix = import_gl_matrix4.mat2d.create();
+    this.cfg = (0, import_rendx_core10.defaultsDeep)(cfg, [DEFAULT_CONFIG]);
+    __privateSet(this, _renderer, __privateMethod(this, _Renderer_instances, createRenderer_fn).call(this));
+    __privateMethod(this, _Renderer_instances, computeViewMatrix_fn).call(this);
+  }
+  get el() {
+    return __privateGet(this, _renderer).el;
+  }
+  /** 客户端坐标(clientX/Y) → 画布局部坐标 */
+  position(point) {
+    const rect = __privateGet(this, _renderer).el.getBoundingClientRect();
+    return [point[0] - rect.left, point[1] - rect.top];
+  }
+  resize(size) {
+    __privateGet(this, _renderer).resize(size);
+    this.cfg.width = size.width;
+    this.cfg.height = size.height;
+    __privateMethod(this, _Renderer_instances, computeViewMatrix_fn).call(this);
+  }
+  /** 绘制渲染队列 */
+  draw(queue) {
+    const r = __privateGet(this, _renderer);
+    r.clear();
+    for (let i = 0; i < queue.length; i++) {
+      const node = queue[i];
+      if (!node.renderable()) continue;
+      r.save();
+      const { attrs } = node;
+      if (attrs.gradientOptions) r.gradient(attrs.gradientOptions);
+      if (attrs.clipPath) r.clipPath(attrs.clipPath);
+      r.setTransform(...node.worldMatrix);
+      r.setAttributes(attrs.values);
+      const draw = DRAW_MAP[node.shape.command];
+      if (draw) draw(r, node);
+      r.restore();
+    }
+  }
+  clear() {
+    __privateGet(this, _renderer).clear();
+  }
+  dispose() {
+    __privateGet(this, _renderer).dispose();
+  }
+};
+_renderer = new WeakMap();
+_Renderer_instances = new WeakSet();
+createRenderer_fn = function() {
+  const { width, height, renderer } = this.cfg;
+  if (renderer && typeof renderer === "object") return renderer;
+  return renderer === "svg" ? new import_rendx_svg.SvgRenderer({ width, height }) : new import_rendx_canvas.CanvasRenderer({ width, height });
+};
+computeViewMatrix_fn = function() {
+  const { width, height } = this.cfg;
+  const [x, y, w, h] = this.cfg.viewport ?? [0, 0, width, height];
+  const sx = width / w;
+  const sy = height / h;
+  this.viewMatrix = import_gl_matrix4.mat2d.fromValues(sx, 0, 0, sy, -x * sx, -y * sy);
+};
+
+// src/scene/layer.ts
+var _queue2, _culledQueue, _Layer_instances, cullViewport_fn;
+var Layer = class extends Group {
+  constructor(name, index, cfg, isEventLayer = false) {
+    super();
+    __privateAdd(this, _Layer_instances);
+    this.type = 4;
+    __privateAdd(this, _queue2, []);
+    __privateAdd(this, _culledQueue, []);
+    this.layerName = name;
+    this.layerIndex = index;
+    this.isEventLayer = isEventLayer;
+    this.culling = !isEventLayer;
+    this.renderer = new Renderer(cfg);
+    const el = this.renderer.el;
+    el.style.position = "absolute";
+    el.style.left = "0";
+    el.style.top = "0";
+    el.style.zIndex = String(index);
+    if (isEventLayer) {
+      el.style.background = "transparent";
+    } else {
+      el.style.pointerEvents = "none";
+    }
+  }
+  /** 获取当前层的渲染队列（仅 type=3 的 Node） */
+  getQueue() {
+    if (this.dirty) {
+      const queue = [];
+      this.traverse((node) => {
+        if (node.type === 3) queue.push(node);
+      });
+      queue.sort((a, b) => a.ez - b.ez);
+      this.setDirty(false);
+      __privateSet(this, _queue2, queue);
+    }
+    return __privateGet(this, _queue2);
+  }
+  /** 层级是否需要重绘 */
+  sign() {
+    if (this.isEventLayer) return false;
+    return super.sign();
+  }
+  /** 绘制本层 */
+  draw() {
+    if (this.isEventLayer) return;
+    this.update();
+    const queue = this.getQueue();
+    this.renderer.draw(this.culling ? __privateMethod(this, _Layer_instances, cullViewport_fn).call(this, queue) : queue);
+  }
+  resize(size) {
+    this.renderer.resize(size);
+  }
+  clear() {
+    super.clear();
+    __privateSet(this, _queue2, []);
+    this.renderer.clear();
+  }
+  dispose() {
+    super.dispose();
+    __privateSet(this, _queue2, []);
+    this.renderer.dispose();
+  }
+};
+_queue2 = new WeakMap();
+_culledQueue = new WeakMap();
+_Layer_instances = new WeakSet();
+/**
+ * 视口裁剪：过滤掉 worldBBox 完全在画布外的节点，减少 draw call。
+ * 没有有效 boundingBox 的节点（如 Text）不会被剔除。
+ */
+cullViewport_fn = function(queue) {
+  const { width, height } = this.renderer.cfg;
+  const culled = __privateGet(this, _culledQueue);
+  culled.length = 0;
+  for (let i = 0; i < queue.length; i++) {
+    const node = queue[i];
+    const bb = node.shape.boundingBox;
+    if (!bb || bb.empty) {
+      culled.push(node);
+      continue;
+    }
+    const m = node.worldMatrix;
+    const x0 = bb.x, y0 = bb.y, x1 = bb.right, y1 = bb.bottom;
+    let wx, wy;
+    let minX, maxX, minY, maxY;
+    wx = m[0] * x0 + m[2] * y0 + m[4];
+    wy = m[1] * x0 + m[3] * y0 + m[5];
+    minX = maxX = wx;
+    minY = maxY = wy;
+    wx = m[0] * x1 + m[2] * y0 + m[4];
+    wy = m[1] * x1 + m[3] * y0 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    wx = m[0] * x1 + m[2] * y1 + m[4];
+    wy = m[1] * x1 + m[3] * y1 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    wx = m[0] * x0 + m[2] * y1 + m[4];
+    wy = m[1] * x0 + m[3] * y1 + m[5];
+    if (wx < minX) minX = wx;
+    if (wx > maxX) maxX = wx;
+    if (wy < minY) minY = wy;
+    if (wy > maxY) maxY = wy;
+    if (maxX > 0 && minX < width && maxY > 0 && minY < height) {
+      culled.push(node);
+    }
+  }
+  return culled;
+};
+
+// src/events/event.ts
+var _path2;
+var _SimulatedEvent = class _SimulatedEvent {
+  constructor(type, target, nativeEvent) {
+    this.eventPhase = 0;
+    this.bubbles = true;
+    this.timestamp = Date.now();
+    this.offsetX = 0;
+    this.offsetY = 0;
+    this.worldX = 0;
+    this.worldY = 0;
+    this.truth = true;
+    __privateAdd(this, _path2, null);
+    this.type = type;
+    this.target = target;
+    this.currentTarget = target;
+    this.nativeEvent = nativeEvent;
+  }
+  get captureType() {
+    return `capture-${this.type}`;
+  }
+  stopPropagation() {
+    this.bubbles = false;
+  }
+  /** 返回从 target 到 root 的路径（缓存） */
+  composedPath() {
+    if (!__privateGet(this, _path2)) __privateSet(this, _path2, this.target.path().reverse());
+    return __privateGet(this, _path2);
+  }
+  copy() {
+    const event = new _SimulatedEvent(this.type, this.target, this.nativeEvent);
+    event.currentTarget = this.currentTarget;
+    event.eventPhase = this.eventPhase;
+    event.bubbles = this.bubbles;
+    event.timestamp = this.timestamp;
+    event.offsetX = this.offsetX;
+    event.offsetY = this.offsetY;
+    event.worldX = this.worldX;
+    event.worldY = this.worldY;
+    __privateSet(event, _path2, __privateGet(this, _path2));
+    return event;
+  }
+};
+_path2 = new WeakMap();
+var SimulatedEvent = _SimulatedEvent;
+
+// src/events/dispatcher.ts
+var POINTERENTER = ["capture-pointerenter", "pointerenter"];
+var POINTERLEAVE = ["capture-pointerleave", "pointerleave"];
+var POINTEROVER = ["capture-pointerover", "pointerover"];
+var POINTEROUT = ["capture-pointerout", "pointerout"];
+var EventDispatcher = class {
+  constructor() {
+    this.last = null;
+    this.eventMap = {};
+    this.eventMap = Object.fromEntries([
+      ["click", this.normal],
+      ["pointerenter", this.onPointerEnter],
+      ["pointerleave", this.onPointerLeave],
+      ["pointerover", this.onPointerOver],
+      ["pointerout", this.onPointerOut],
+      ["pointerdown", this.normal],
+      ["pointermove", this.normal],
+      ["pointerup", this.normal],
+      ["pointercancel", this.normal]
+    ]);
+  }
+  exec(event, node) {
+    if (node === event.target && event.eventPhase !== 2) return;
+    const evt = event.copy();
+    evt.currentTarget = node;
+    const handler = this.eventMap[evt.type];
+    if (handler) handler.bind(this)(evt);
+    else this.normal(evt);
+  }
+  capture(event) {
+    event.eventPhase = 1;
+    const path = event.composedPath();
+    for (let i = path.length - 1; i >= 0; i--) this.exec(event, path[i]);
+  }
+  target(event) {
+    event.eventPhase = 2;
+    this.exec(event, event.target);
+  }
+  bubble(event) {
+    event.eventPhase = 3;
+    if (!event.bubbles) return;
+    const path = event.composedPath();
+    for (let i = 0; i < path.length; i++) this.exec(event, path[i]);
+  }
+  flow(event) {
+    this.capture(event);
+    this.target(event);
+    this.bubble(event);
+  }
+  process(event) {
+    this.simulateOut(event);
+    this.simulateLeave(event);
+    this.simulateOver(event);
+    this.simulateEnter(event);
+    this.flow(event);
+    this.last = event;
+  }
+  simulateEnter(event) {
+    if (event.type !== "pointermove") return;
+    const { target, nativeEvent } = event;
+    const evt = new SimulatedEvent("pointerenter", target, nativeEvent);
+    evt.stopPropagation();
+    evt.truth = false;
+    this.flow(evt);
+  }
+  simulateLeave(event) {
+    if (event.type !== "pointermove") return;
+    const { target: last } = this.last || {};
+    const { target: hit } = event;
+    if (last && !hit.equals(last)) {
+      const evt = new SimulatedEvent("pointerleave", last, event.nativeEvent);
+      evt.stopPropagation();
+      evt.truth = false;
+      this.flow(evt);
+    }
+  }
+  simulateOver(event) {
+    if (event.type !== "pointermove") return;
+    const { target, nativeEvent } = event;
+    const evt = new SimulatedEvent("pointerover", target, nativeEvent);
+    evt.truth = false;
+    this.flow(evt);
+  }
+  simulateOut(event) {
+    if (event.type !== "pointermove") return;
+    const { target: last } = this.last || {};
+    const { target: hit } = event;
+    if (last && !hit.equals(last)) {
+      const evt = new SimulatedEvent("pointerout", last, event.nativeEvent);
+      evt.truth = false;
+      this.flow(evt);
+    }
+  }
+  normal(event) {
+    const { type, captureType, eventPhase, currentTarget } = event;
+    const name = eventPhase === 1 ? captureType : type;
+    if (currentTarget.hasEvent(name)) currentTarget.emit(name, event);
+  }
+  onPointerEnter(event) {
+    const [t0, t1] = POINTERENTER;
+    const { eventPhase, currentTarget: cur } = event;
+    const name = eventPhase === 1 ? t0 : t1;
+    if (cur.hasEvent(name)) {
+      const { target: last } = this.last || {};
+      const { target: hit } = event;
+      if ((!last || !hit.equals(last)) && hit.equals(cur)) {
+        cur.emit(name, event);
+      }
+    }
+  }
+  onPointerLeave(event) {
+    const [t0, t1] = POINTERLEAVE;
+    const { eventPhase, currentTarget: cur } = event;
+    const name = eventPhase === 1 ? t0 : t1;
+    if (cur.hasEvent(name)) {
+      const { target: hit } = event;
+      if (hit.equals(cur)) {
+        cur.emit(name, event);
+      }
+    }
+  }
+  onPointerOver(event) {
+    const [t0, t1] = POINTEROVER;
+    const { eventPhase, currentTarget: cur } = event;
+    const name = eventPhase === 1 ? t0 : t1;
+    if (cur.hasEvent(name)) {
+      const { target: last } = this.last || {};
+      const { target: hit } = event;
+      if ((!last || !last.equals(hit)) && hit.source(cur)) {
+        cur.emit(name, event);
+      }
+    }
+  }
+  onPointerOut(event) {
+    const [t0, t1] = POINTEROUT;
+    const { eventPhase, currentTarget: cur } = event;
+    const name = eventPhase === 1 ? t0 : t1;
+    if (cur.hasEvent(name)) {
+      const { target: hit } = event;
+      if (hit.source(cur)) {
+        cur.emit(name, event);
+      }
+    }
+  }
+  clear() {
+    this.last = null;
+  }
+  dispose() {
+    this.clear();
+    this.eventMap = {};
+  }
+};
+
+// src/events/observer.ts
+var FEAT_NATIVE_EVENTS = {
+  move: ["pointermove"],
+  click: ["pointerdown", "pointerup", "click"],
+  wheel: ["wheel"]
+};
+var PASSIVE_EVENTS = /* @__PURE__ */ new Set(["pointermove", "wheel"]);
+var _bound, _cleanups, _EventObserver_instances, createListener_fn;
+var EventObserver = class {
+  constructor(scene, renderer) {
+    __privateAdd(this, _EventObserver_instances);
+    this.feats = { move: true, click: true, wheel: true };
+    this.dispatcher = new EventDispatcher();
+    __privateAdd(this, _bound, false);
+    __privateAdd(this, _cleanups, []);
+    this.scene = scene;
+    this.renderer = renderer;
+  }
+  /** 幂等绑定：每种原生事件只注册一次 */
+  bindEvents() {
+    if (__privateGet(this, _bound)) return;
+    __privateSet(this, _bound, true);
+    const el = this.renderer.el;
+    const nativeTypes = /* @__PURE__ */ new Set();
+    for (const [feat, enabled] of Object.entries(this.feats)) {
+      if (!enabled) continue;
+      for (const type of FEAT_NATIVE_EVENTS[feat]) {
+        nativeTypes.add(type);
+      }
+    }
+    for (const nativeType of nativeTypes) {
+      const listener = __privateMethod(this, _EventObserver_instances, createListener_fn).call(this, nativeType);
+      const passive = PASSIVE_EVENTS.has(nativeType);
+      const options = passive ? { passive: true } : void 0;
+      el.addEventListener(nativeType, listener, options);
+      __privateGet(this, _cleanups).push(() => el.removeEventListener(nativeType, listener, options));
+    }
+  }
+  unbindEvents() {
+    for (const fn of __privateGet(this, _cleanups)) fn();
+    __privateSet(this, _cleanups, []);
+    __privateSet(this, _bound, false);
+  }
+  dispose() {
+    this.unbindEvents();
+    this.dispatcher.dispose();
+  }
+};
+_bound = new WeakMap();
+_cleanups = new WeakMap();
+_EventObserver_instances = new WeakSet();
+createListener_fn = function(type) {
+  return (evt) => {
+    const { clientX, clientY } = evt;
+    const offset = this.renderer.position([clientX, clientY]);
+    const world = this.scene.position(offset);
+    const target = this.scene.pick(offset) || this.scene;
+    target.setDispatcher(this.dispatcher);
+    const event = new SimulatedEvent(type, target, evt);
+    event.offsetX = offset[0];
+    event.offsetY = offset[1];
+    event.worldX = world[0];
+    event.worldY = world[1];
+    target.dispatchEvent(event);
+  };
+};
+
+// src/serialization.ts
+var SHAPE_FROM_KEYS = {
+  text: ["text", "x", "y"],
+  circle: ["cx", "cy", "r"],
+  rect: ["x", "y", "width", "height"],
+  line: ["x1", "y1", "x2", "y2"],
+  path: ["d"],
+  curve: ["segments"],
+  area: ["upperSegments", "lowerSegments"],
+  polygon: ["points"],
+  sector: ["r", "startAngle", "endAngle", "innerRadius", "outerRadius", "padAngle"],
+  arc: ["r", "startAngle", "endAngle", "radius"],
+  symbol: ["r"],
+  round: ["x", "y", "width", "height"],
+  image: ["src", "x", "y", "width", "height"]
+};
+var SHAPE_OPTIONS_KEYS = {
+  curve: ["curve", "closed"],
+  area: ["curve"],
+  polygon: ["curve", "closed"],
+  sector: ["rc"],
+  symbol: ["symbol"],
+  round: ["rx", "ry"]
+};
+function serializeGraphicsProps(g) {
+  const json = {};
+  if (g.name) json.name = g.name;
+  if (g.className) json.className = g.className;
+  if (g.z !== 0) json.z = g.z;
+  if (!g.visible) json.visible = false;
+  if (!g.display) json.display = false;
+  const [tx, ty] = g._translate;
+  if (tx !== 0 || ty !== 0) json.translate = [tx, ty];
+  if (g._rotate !== 0) json.rotate = g._rotate;
+  const [sx, sy] = g._scale;
+  if (sx !== 1 || sy !== 1) json.scale = [sx, sy];
+  if (Object.keys(g.data).length > 0) json.data = { ...g.data };
+  return json;
+}
+function serializeNode(node) {
+  const shapeType = node.shapeType;
+  if (!shapeType || shapeType === "rectBuffer") return null;
+  const fromKeys = SHAPE_FROM_KEYS[shapeType];
+  if (!fromKeys) return null;
+  const args = node.shape.getProps(fromKeys);
+  const json = {
+    type: "node",
+    shapeType,
+    args,
+    ...serializeGraphicsProps(node)
+  };
+  const optKeys = SHAPE_OPTIONS_KEYS[shapeType];
+  if (optKeys) {
+    const opts = node.shape.getProps(optKeys);
+    if (opts.some((v) => v !== void 0)) {
+      json.options = opts;
+    }
+  }
+  const attrKeys = Object.keys(node.attrs.values);
+  if (attrKeys.length > 0) {
+    json.attrs = { ...node.attrs.values };
+  }
+  if (node.attrs.gradientOptions) {
+    const { id, ...rest } = node.attrs.gradientOptions;
+    json.gradient = { ...rest };
+  }
+  if (node.attrs.clipPath) {
+    const { id, ...rest } = node.attrs.clipPath;
+    json.clipPath = { ...rest };
+  }
+  return json;
+}
+function serializeChild(g) {
+  if (g.type === 3) return serializeNode(g);
+  if (g.type === 2) return serializeGroup(g);
+  return null;
+}
+function serializeGroup(g) {
+  const children = [];
+  for (const child of g.children) {
+    const c = serializeChild(child);
+    if (c) children.push(c);
+  }
+  return {
+    type: "group",
+    ...serializeGraphicsProps(g),
+    children
+  };
+}
+function serializeLayer(layer) {
+  const json = {
+    name: layer.layerName,
+    index: layer.layerIndex,
+    children: []
+  };
+  if (!layer.culling) json.culling = false;
+  for (const child of layer.children) {
+    const c = serializeChild(child);
+    if (c) json.children.push(c);
+  }
+  return json;
+}
+function serialize(layers, width, height) {
+  const layerJSONs = [];
+  for (const layer of layers) {
+    if (layer.isEventLayer) continue;
+    layerJSONs.push(serializeLayer(layer));
+  }
+  return {
+    version: 1,
+    width,
+    height,
+    layers: layerJSONs
+  };
+}
+function deserializeGraphicsProps(g, json) {
+  if (json.name) g.setName(json.name);
+  if (json.className) g.setClassName(json.className);
+  if (json.z !== void 0) g.setZ(json.z);
+  if (json.visible === false) g.setVisible(false);
+  if (json.display === false) g.setDisplay(false);
+  if (json.translate) g.translate(json.translate[0], json.translate[1]);
+  if (json.rotate !== void 0) g.rotate(json.rotate);
+  if (json.scale) g.scale(json.scale[0], json.scale[1]);
+  if (json.data) g.data = { ...json.data };
+}
+function deserializeNode(json) {
+  const node = Node.create(json.shapeType, json.attrs ?? {});
+  node.shape.from(...json.args);
+  if (json.options) node.shape.options(...json.options);
+  if (json.gradient) node.attrs.gradient({ ...json.gradient });
+  if (json.clipPath) node.attrs.clip({ ...json.clipPath });
+  deserializeGraphicsProps(node, json);
+  return node;
+}
+function deserializeChild(json) {
+  if (json.type === "node") return deserializeNode(json);
+  return deserializeGroup(json);
+}
+function deserializeGroup(json) {
+  const group = new Group();
+  deserializeGraphicsProps(group, json);
+  for (const child of json.children) {
+    group.add(deserializeChild(child));
+  }
+  return group;
+}
+function deserialize(json, cfg) {
+  const layers = [];
+  for (const layerJSON of json.layers) {
+    const layer = new Layer(layerJSON.name, layerJSON.index, cfg);
+    if (layerJSON.culling === false) layer.culling = false;
+    for (const child of layerJSON.children) {
+      layer.add(deserializeChild(child));
+    }
+    layers.push(layer);
+  }
+  return layers;
+}
+
+// src/app.ts
+var _rafId, _mounted, _container, _eventLayer, _resizeObserver, _plugins, _App_instances, tick_fn;
+var _App = class _App {
+  /**
+   * @param cfg - 引擎配置（width/height/layers/autoResize 等）
+   */
+  constructor(cfg = {}) {
+    __privateAdd(this, _App_instances);
+    __privateAdd(this, _rafId, null);
+    __privateAdd(this, _mounted, false);
+    __privateAdd(this, _container, null);
+    __privateAdd(this, _eventLayer);
+    __privateAdd(this, _resizeObserver, null);
+    __privateAdd(this, _plugins, []);
+    this.cfg = cfg;
+    this.scene = new Scene();
+    __privateSet(this, _eventLayer, new Layer("__event__", 99999, this.cfg, true));
+    this.scene.registerLayer(__privateGet(this, _eventLayer));
+    this.scene.registerLayer(new Layer("default", 0, this.cfg));
+    if (cfg.layers) {
+      cfg.layers.forEach((name, i) => {
+        if (name === "default") return;
+        this.scene.registerLayer(new Layer(name, i + 1, this.cfg));
+      });
+    }
+    this.observer = new EventObserver(this.scene, __privateGet(this, _eventLayer).renderer);
+    imageLoader.onChange = () => this.requestRender();
+  }
+  /** 挂载容器（供插件访问） */
+  get container() {
+    return __privateGet(this, _container);
+  }
+  /** 是否已挂载 */
+  get mounted() {
+    return __privateGet(this, _mounted);
+  }
+  /**
+   * 挂载到 DOM 容器，初始化渲染层并绑定事件。必须在 render() 之前调用。
+   * @param container - 目标 DOM 元素，引擎会在其中创建 Canvas 元素
+   */
+  mount(container) {
+    if (__privateGet(this, _mounted)) return this;
+    __privateSet(this, _container, document.createElement("div"));
+    __privateGet(this, _container).style.position = "relative";
+    __privateGet(this, _container).style.width = `${this.cfg.width ?? 800}px`;
+    __privateGet(this, _container).style.height = `${this.cfg.height ?? 600}px`;
+    __privateGet(this, _container).style.overflow = "hidden";
+    container.appendChild(__privateGet(this, _container));
+    const viewMatrix = __privateGet(this, _eventLayer).renderer.viewMatrix;
+    for (const layer of this.scene.layers) {
+      __privateGet(this, _container).appendChild(layer.renderer.el);
+      layer.setMatrix(viewMatrix);
+    }
+    this.scene.setMatrix(viewMatrix);
+    this.observer.bindEvents();
+    __privateSet(this, _mounted, true);
+    if (this.cfg.autoResize) {
+      __privateSet(this, _resizeObserver, new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          this.resize(width, height);
+        }
+      }));
+      __privateGet(this, _resizeObserver).observe(container);
+    }
+    return this;
+  }
+  /** 添加渲染层 */
+  addLayer(name, index) {
+    if (this.scene.getLayer(name)) {
+      throw new Error(`Layer "${name}" already exists.`);
+    }
+    const layer = new Layer(name, index, this.cfg);
+    this.scene.registerLayer(layer);
+    if (__privateGet(this, _mounted) && __privateGet(this, _container)) {
+      const viewMatrix = __privateGet(this, _eventLayer).renderer.viewMatrix;
+      layer.setMatrix(viewMatrix);
+      __privateGet(this, _container).insertBefore(layer.renderer.el, __privateGet(this, _eventLayer).renderer.el);
+    }
+    return layer;
+  }
+  /** 获取层 */
+  getLayer(name) {
+    return this.scene.getLayer(name);
+  }
+  /**
+   * 注册插件（同名插件不会重复注册）
+   * @param plugin - 实现 Plugin 接口的插件实例
+   */
+  use(plugin) {
+    if (__privateGet(this, _plugins).some((p) => p.name === plugin.name)) {
+      console.warn(`Plugin "${plugin.name}" is already registered.`);
+      return this;
+    }
+    __privateGet(this, _plugins).push(plugin);
+    plugin.install(this);
+    return this;
+  }
+  /** 获取已注册的插件 */
+  getPlugin(name) {
+    return __privateGet(this, _plugins).find((p) => p.name === name);
+  }
+  /** 同步渲染一帧。适用于静态内容，仅重绘脏层 */
+  render() {
+    for (const layer of this.scene.layers) {
+      if (layer.sign()) {
+        layer.draw();
+      }
+    }
+  }
+  /** 请求异步渲染循环（rAF），有动画时自动继续，无变化时停止 */
+  requestRender() {
+    if (__privateGet(this, _rafId) !== null) return;
+    __privateSet(this, _rafId, requestAnimationFrame((t) => __privateMethod(this, _App_instances, tick_fn).call(this, t)));
+  }
+  /**
+   * 调整画布尺寸，同步更新所有层、容器和视口矩阵
+   * @param width - 新宽度（像素）
+   * @param height - 新高度（像素）
+   */
+  resize(width, height) {
+    this.cfg.width = width;
+    this.cfg.height = height;
+    for (const layer of this.scene.layers) {
+      layer.resize({ width, height });
+    }
+    if (__privateGet(this, _container)) {
+      __privateGet(this, _container).style.width = `${width}px`;
+      __privateGet(this, _container).style.height = `${height}px`;
+    }
+    const viewMatrix = __privateGet(this, _eventLayer).renderer.viewMatrix;
+    this.scene.setMatrix(viewMatrix);
+    for (const layer of this.scene.layers) {
+      layer.setMatrix(viewMatrix);
+    }
+    for (const plugin of __privateGet(this, _plugins)) {
+      plugin.resize?.(width, height);
+    }
+  }
+  clear() {
+    if (__privateGet(this, _rafId) !== null) {
+      cancelAnimationFrame(__privateGet(this, _rafId));
+      __privateSet(this, _rafId, null);
+    }
+    for (const layer of this.scene.layers) {
+      layer.clear();
+    }
+  }
+  dispose() {
+    this.clear();
+    for (const plugin of __privateGet(this, _plugins)) {
+      plugin.dispose?.();
+    }
+    __privateSet(this, _plugins, []);
+    if (__privateGet(this, _resizeObserver)) {
+      __privateGet(this, _resizeObserver).disconnect();
+      __privateSet(this, _resizeObserver, null);
+    }
+    for (const layer of this.scene.layers) {
+      layer.dispose();
+    }
+    this.observer.dispose();
+    this.scene.dispose();
+    if (__privateGet(this, _container)) {
+      __privateGet(this, _container).remove();
+      __privateSet(this, _container, null);
+    }
+  }
+  // ========================
+  // Export & Serialization
+  // ========================
+  /** 将所有渲染层合成到一个 Canvas 上并返回 */
+  toCanvas() {
+    this.render();
+    const width = this.cfg.width ?? 800;
+    const height = this.cfg.height ?? 600;
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    const ctx = canvas.getContext("2d");
+    for (const layer of this.scene.layers) {
+      if (layer.isEventLayer) continue;
+      ctx.drawImage(layer.renderer.el, 0, 0);
+    }
+    return canvas;
+  }
+  /** 序列化所有渲染层的场景图为 JSON，可用于保存/回放 */
+  toJSON() {
+    return serialize(this.scene.layers, this.cfg.width ?? 800, this.cfg.height ?? 600);
+  }
+  /**
+   * 从 JSON 快照创建新的 App 实例（静态工厂方法）
+   * @param json - 由 toJSON() 生成的场景快照
+   * @param cfg - 可选的额外配置（会与 json 中的 width/height 合并）
+   */
+  static fromJSON(json, cfg = {}) {
+    const merged = {
+      ...cfg,
+      width: json.width,
+      height: json.height
+    };
+    const app = new _App(merged);
+    app.scene.removeLayer("default");
+    const layers = deserialize(json, merged);
+    for (const layer of layers) {
+      app.scene.registerLayer(layer);
+    }
+    return app;
+  }
+  /**
+   * 将 JSON 快照恢复到当前 App 实例（就地替换所有渲染层内容）。
+   * 与静态 fromJSON 不同，此方法不创建新 App，保留挂载状态和插件。
+   */
+  restoreFromJSON(json) {
+    const names = this.scene.layers.filter((l) => !l.isEventLayer).map((l) => l.layerName);
+    for (const name of names) {
+      this.scene.removeLayer(name);
+    }
+    const layers = deserialize(json, this.cfg);
+    const viewMatrix = __privateGet(this, _eventLayer).renderer.viewMatrix;
+    for (const layer of layers) {
+      this.scene.registerLayer(layer);
+      if (__privateGet(this, _mounted) && __privateGet(this, _container)) {
+        layer.setMatrix(viewMatrix);
+        __privateGet(this, _container).insertBefore(layer.renderer.el, __privateGet(this, _eventLayer).renderer.el);
+      }
+    }
+  }
+};
+_rafId = new WeakMap();
+_mounted = new WeakMap();
+_container = new WeakMap();
+_eventLayer = new WeakMap();
+_resizeObserver = new WeakMap();
+_plugins = new WeakMap();
+_App_instances = new WeakSet();
+tick_fn = function(time) {
+  __privateSet(this, _rafId, null);
+  this.scene.tick(time);
+  let anyDirty = false;
+  for (const layer of this.scene.layers) {
+    if (layer.sign()) {
+      layer.draw();
+      anyDirty = true;
+    }
+  }
+  if (anyDirty) {
+    this.requestRender();
+  }
+};
+var App = _App;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  App,
+  ArcShape,
+  ArcTransform,
+  AreaShape,
+  AttributeTransform,
+  Attributes,
+  BaseTransform,
+  CircleShape,
+  ClipBoxTransform,
+  CurveShape,
+  EventDispatcher,
+  EventObserver,
+  EventTarget,
+  Graphics,
+  GraphicsTransform,
+  Group,
+  ImageShape,
+  Layer,
+  LineShape,
+  Node,
+  PathShape,
+  PolygonShape,
+  RectShape,
+  Renderer,
+  RoundShape,
+  Scene,
+  SectorShape,
+  SectorTransform,
+  Shape,
+  SimulatedEvent,
+  SymbolShape,
+  TextShape,
+  createShape,
+  deserialize,
+  imageLoader,
+  isHit,
+  serialize,
+  serializeLayer,
+  setCanvasRenderingContext2StrokeAttrs
+});