rendx-engine 0.2.0 → 0.4.0

package/dist/main.js

@@ -403,7 +403,7 @@ getEmitter_fn = function() {
 };
 
 // src/core/graphics.ts
-var _nameMap, _classlist, _Graphics_instances, removeFromNameMap_fn, updateMat2d_fn, updateWorldMatrix_fn, updateEZ_fn;
+var _nameMap, _classlist, _Graphics_instances, removeFromNameMap_fn, inheritState_fn, updateMat2d_fn, updateWorldMatrix_fn, updateEZ_fn;
 var Graphics = class extends EventTarget {
   constructor() {
     super(...arguments);
@@ -519,6 +519,7 @@ var Graphics = class extends EventTarget {
     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);
+    __privateMethod(this, _Graphics_instances, inheritState_fn).call(this, child);
     this.setDirty(true);
     return this;
   }
@@ -527,6 +528,7 @@ var Graphics = class extends EventTarget {
     child.parent = this;
     this.children.unshift(child);
     __privateMethod(this, _Graphics_instances, removeFromNameMap_fn).call(this, child);
+    __privateMethod(this, _Graphics_instances, inheritState_fn).call(this, child);
     this.setDirty(true);
     return this;
   }
@@ -769,6 +771,22 @@ _Graphics_instances = new WeakSet();
 removeFromNameMap_fn = function(g) {
   if (__privateGet(this, _nameMap).has(g.name)) __privateGet(this, _nameMap).delete(g.name);
 };
+/**
+ * 将父节点的可继承状态（visible / display / pointerEvents）传播给新增子节点。
+ * 模拟 DOM 中 CSS 继承属性的行为：
+ * - 父级 pointer-events: none → 子级默认继承 none，除非子级显式覆盖
+ * - 父级 visibility: hidden → 同上
+ * - 父级 display: none → 整棵子树不渲染
+ *
+ * 使用 bySelf=false 调用，尊重子节点的 autoX 标记：
+ * - autoX=true（默认）→ 接受父级值
+ * - autoX=false（子节点显式设置过）→ 保持自身值不变
+ */
+inheritState_fn = function(child) {
+  if (!this.visible) child.setVisible(false, false);
+  if (!this.display) child.setDisplay(false, false);
+  if (!this.pointerEvents) child.setPointerEvents(false, false);
+};
 updateMat2d_fn = function() {
   if (!this.needUpdate) return;
   mat2d.identity(this.matrix);
@@ -1178,7 +1196,7 @@ var Group = class extends Graphics {
 
 // src/scene/node.ts
 import { mat2d as mat2d3, vec2 as vec23 } from "gl-matrix";
-import { BoundingBox as BoundingBox15 } from "rendx-bounding";
+import { BoundingBox as BoundingBox16 } from "rendx-bounding";
 
 // src/shapes/symbol.ts
 import { BoundingBox as BoundingBox2 } from "rendx-bounding";
@@ -1575,6 +1593,8 @@ var ArcShape = class extends Shape {
 };
 
 // src/shapes/path.ts
+import { BoundingBox as BoundingBox9 } from "rendx-bounding";
+import { pathBBox } from "rendx-path";
 var PathShape = class extends Shape {
   constructor() {
     super(...arguments);
@@ -1583,11 +1603,19 @@ var PathShape = class extends Shape {
   from(d) {
     this.d = d;
     this.p = null;
+    if (this.autoNeedUpdate) this.needUpdate = true;
+  }
+  box() {
+    const result = pathBBox(this.d);
+    if (result) {
+      this.boundingBox = BoundingBox9.fromPoints(result[0], result[1], result[2], result[3]);
+    }
+    return this.boundingBox;
   }
 };
 
 // src/shapes/text.ts
-import { BoundingBox as BoundingBox9 } from "rendx-bounding";
+import { BoundingBox as BoundingBox10 } from "rendx-bounding";
 var _attrs;
 var _TextShape = class _TextShape extends Shape {
   constructor() {
@@ -1620,7 +1648,7 @@ var _TextShape = class _TextShape extends Shape {
     if (measureFn && this.text) {
       const bb = measureFn(this.text, __privateGet(this, _attrs));
       if (bb) {
-        this.boundingBox = BoundingBox9.fromRect(this.x, this.y - bb.height, bb.width, bb.height);
+        this.boundingBox = BoundingBox10.fromRect(this.x, this.y - bb.height, bb.width, bb.height);
         return this.boundingBox;
       }
     }
@@ -1651,7 +1679,7 @@ _TextShape.defaultMeasure = null;
 var TextShape = _TextShape;
 
 // src/shapes/line.ts
-import { BoundingBox as BoundingBox10 } from "rendx-bounding";
+import { BoundingBox as BoundingBox11 } from "rendx-bounding";
 var LineShape = class extends Shape {
   constructor() {
     super(...arguments);
@@ -1683,13 +1711,13 @@ var LineShape = class extends Shape {
   }
   box() {
     const { x1, y1, x2, y2 } = this;
-    this.boundingBox = BoundingBox10.fromPoints(x1, y1, x2, y2);
+    this.boundingBox = BoundingBox11.fromPoints(x1, y1, x2, y2);
     return this.boundingBox;
   }
 };
 
 // src/shapes/rect.ts
-import { BoundingBox as BoundingBox11 } from "rendx-bounding";
+import { BoundingBox as BoundingBox12 } from "rendx-bounding";
 var RectShape = class extends Shape {
   constructor() {
     super(...arguments);
@@ -1719,13 +1747,13 @@ var RectShape = class extends Shape {
   }
   box() {
     const { x, y, width, height } = this;
-    this.boundingBox = BoundingBox11.fromRect(x, y, width, height);
+    this.boundingBox = BoundingBox12.fromRect(x, y, width, height);
     return this.boundingBox;
   }
 };
 
 // src/shapes/circle.ts
-import { BoundingBox as BoundingBox12 } from "rendx-bounding";
+import { BoundingBox as BoundingBox13 } from "rendx-bounding";
 var CircleShape = class extends Shape {
   constructor() {
     super(...arguments);
@@ -1752,13 +1780,13 @@ var CircleShape = class extends Shape {
   }
   box() {
     const { cx, cy, r } = this;
-    this.boundingBox = BoundingBox12.fromPoints(cx - r, cy - r, cx + r, cy + r);
+    this.boundingBox = BoundingBox13.fromPoints(cx - r, cy - r, cx + r, cy + r);
     return this.boundingBox;
   }
 };
 
 // src/shapes/image.ts
-import { BoundingBox as BoundingBox13 } from "rendx-bounding";
+import { BoundingBox as BoundingBox14 } from "rendx-bounding";
 var ImageShape = class extends Shape {
   constructor() {
     super(...arguments);
@@ -1802,13 +1830,13 @@ var ImageShape = class extends Shape {
   }
   box() {
     const { x, y, width, height } = this;
-    this.boundingBox = BoundingBox13.fromRect(x, y, width, height);
+    this.boundingBox = BoundingBox14.fromRect(x, y, width, height);
     return this.boundingBox;
   }
 };
 
 // src/shapes/rect-buffer.ts
-import { BoundingBox as BoundingBox14 } from "rendx-bounding";
+import { BoundingBox as BoundingBox15 } from "rendx-bounding";
 import { createShape as createShape7 } from "rendx-shape";
 import { Path as Path9 } from "rendx-path";
 var RectBufferShape = class extends Shape {
@@ -1874,7 +1902,7 @@ var RectBufferShape = class extends Shape {
       x1 = Math.max(x1, x + width);
       y1 = Math.max(y1, y + height);
     }
-    this.boundingBox = BoundingBox14.fromPoints(x0, y0, x1, y1);
+    this.boundingBox = BoundingBox15.fromPoints(x0, y0, x1, y1);
     return this.boundingBox;
   }
 };
@@ -1977,7 +2005,7 @@ var _Node = class _Node extends Graphics {
     if (wx > maxX) maxX = wx;
     if (wy < minY) minY = wy;
     if (wy > maxY) maxY = wy;
-    return BoundingBox15.fromPoints(minX, minY, maxX, maxY);
+    return BoundingBox16.fromPoints(minX, minY, maxX, maxY);
   }
   /**
    * 命中检测：将屏幕坐标通过逆世界矩阵变换为本地坐标，然后检测是否命中
@@ -2487,6 +2515,48 @@ createListener_fn = function(type) {
   };
 };
 
+// src/app.ts
+import EventEmitter2 from "eventemitter3";
+
+// src/scheduler.ts
+var _pendingState, _microTaskQueued, _onFlush;
+var Scheduler = class {
+  constructor(onFlush) {
+    __privateAdd(this, _pendingState, /* @__PURE__ */ new Set());
+    __privateAdd(this, _microTaskQueued, false);
+    __privateAdd(this, _onFlush);
+    __privateSet(this, _onFlush, onFlush);
+  }
+  /**
+   * 标记 state key 变更，批量到微任务统一通知。
+   * 同一轮微任务内多次调用同一 key 只通知一次。
+   */
+  markState(key) {
+    __privateGet(this, _pendingState).add(key);
+    if (!__privateGet(this, _microTaskQueued)) {
+      __privateSet(this, _microTaskQueued, true);
+      queueMicrotask(() => {
+        __privateSet(this, _microTaskQueued, false);
+        const keys = new Set(__privateGet(this, _pendingState));
+        __privateGet(this, _pendingState).clear();
+        __privateGet(this, _onFlush).call(this, keys);
+      });
+    }
+  }
+  /** 是否有待通知的 state 变更 */
+  get hasPending() {
+    return __privateGet(this, _pendingState).size > 0;
+  }
+  /** 清空待通知队列（用于 dispose） */
+  clear() {
+    __privateGet(this, _pendingState).clear();
+    __privateSet(this, _microTaskQueued, false);
+  }
+};
+_pendingState = new WeakMap();
+_microTaskQueued = new WeakMap();
+_onFlush = new WeakMap();
+
 // src/serialization.ts
 var SHAPE_FROM_KEYS = {
   text: ["text", "x", "y"],
@@ -2648,21 +2718,39 @@ function deserialize(json, cfg) {
 }
 
 // src/app.ts
-var _rafId, _mounted, _container, _eventLayer, _resizeObserver, _plugins, _App_instances, tick_fn;
+var _rafId, _renderDirty, _mounted, _container, _eventLayer, _resizeObserver, _plugins, _state, _stateMeta, _scheduler, _App_instances, resolveIndex_fn, nextAvailableIndex_fn, frame_fn;
 var _App = class _App {
   /**
    * @param cfg - 引擎配置（width/height/layers/autoResize 等）
    */
   constructor(cfg = {}) {
     __privateAdd(this, _App_instances);
+    /**
+     * 中心化事件总线 — 纯信号（不传数据）。
+     * 插件通过 `app.bus.emit('eventName')` 发布信号，
+     * 消费方通过 `app.bus.on('eventName', handler)` 订阅。
+     */
+    this.bus = new EventEmitter2();
     __privateAdd(this, _rafId, null);
+    __privateAdd(this, _renderDirty, false);
     __privateAdd(this, _mounted, false);
     __privateAdd(this, _container, null);
     __privateAdd(this, _eventLayer);
     __privateAdd(this, _resizeObserver, null);
     __privateAdd(this, _plugins, []);
+    // ========================
+    // State Management
+    // ========================
+    __privateAdd(this, _state, /* @__PURE__ */ new Map());
+    __privateAdd(this, _stateMeta, /* @__PURE__ */ new Map());
+    __privateAdd(this, _scheduler);
     this.cfg = cfg;
     this.scene = new Scene();
+    __privateSet(this, _scheduler, new Scheduler((keys) => {
+      for (const key of keys) {
+        this.bus.emit(`state:${key}`);
+      }
+    }));
     __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));
@@ -2735,7 +2823,30 @@ var _App = class _App {
     return this.scene.getLayer(name);
   }
   /**
-   * 注册插件（同名插件不会重复注册）
+   * 获取或创建图层（get-or-create 语义）。
+   * 多个插件声明同名图层时，只会创建一次。
+   *
+   * zIndex 语义：
+   * - 传入时代表全局层级意图（负数 = default 之下，正数 = default 之上）
+   * - 若与已有层冲突，自动向上偏移到最近可用值
+   * - 省略时自动分配（当前最高非事件层 + 1）
+   *
+   * @param name - 层名称
+   * @param zIndex - 全局层级意图（可选）
+   */
+  acquireLayer(name, zIndex) {
+    const existing = this.scene.getLayer(name);
+    if (existing) return existing;
+    const index = zIndex !== void 0 ? __privateMethod(this, _App_instances, resolveIndex_fn).call(this, zIndex) : __privateMethod(this, _App_instances, nextAvailableIndex_fn).call(this);
+    return this.addLayer(name, index);
+  }
+  /**
+   * 注册插件。流程：
+   * 1. 去重检查（同名跳过）
+   * 2. 注册 state 声明（key 冲突则抛错）
+   * 3. 自动 acquireLayer（声明的图层）
+   * 4. 调用 plugin.install(app)
+   *
    * @param plugin - 实现 Plugin 接口的插件实例
    */
   use(plugin) {
@@ -2743,6 +2854,22 @@ var _App = class _App {
       console.warn(`Plugin "${plugin.name}" is already registered.`);
       return this;
     }
+    if (plugin.state) {
+      for (const decl of plugin.state) {
+        if (__privateGet(this, _stateMeta).has(decl.key)) {
+          const owner = __privateGet(this, _stateMeta).get(decl.key).owner;
+          throw new Error(`State key "${decl.key}" already declared by plugin "${owner}". Plugin "${plugin.name}" cannot redeclare it.`);
+        }
+        __privateGet(this, _stateMeta).set(decl.key, { owner: plugin.name, description: decl.description });
+        __privateGet(this, _state).set(decl.key, decl.initial);
+      }
+    }
+    if (plugin.layers) {
+      const sorted = [...plugin.layers].sort((a, b) => (a.zIndex ?? 0) - (b.zIndex ?? 0));
+      for (const decl of sorted) {
+        this.acquireLayer(decl.name, decl.zIndex);
+      }
+    }
     __privateGet(this, _plugins).push(plugin);
     plugin.install(this);
     return this;
@@ -2751,6 +2878,40 @@ var _App = class _App {
   getPlugin(name) {
     return __privateGet(this, _plugins).find((p) => p.name === name);
   }
+  // ========================
+  // Centralized State
+  // ========================
+  /**
+   * 写入 state（同步写入 + 异步批量通知）。
+   * key 必须先由某个插件在 `state[]` 中声明，否则抛错。
+   * 写入后立即可通过 `getState()` 读到最新值，通知在微任务中批量发出。
+   */
+  setState(key, value) {
+    if (!__privateGet(this, _stateMeta).has(key)) {
+      throw new Error(`State key "${key}" is not declared by any plugin. Plugins must declare state keys in their "state" array.`);
+    }
+    __privateGet(this, _state).set(key, value);
+    __privateGet(this, _scheduler).markState(key);
+  }
+  /**
+   * 读取 state（同步读取，始终返回最新值）。
+   * @returns 对应 key 的当前值，不存在则返回 undefined
+   */
+  getState(key) {
+    return __privateGet(this, _state).get(key);
+  }
+  /**
+   * 导出完整 state 快照（调试/devtools 用）。
+   * 返回每个 key 的当前值、所属插件和描述信息。
+   */
+  dumpState() {
+    const result = {};
+    for (const [key, value] of __privateGet(this, _state)) {
+      const meta = __privateGet(this, _stateMeta).get(key);
+      result[key] = { value, owner: meta.owner, description: meta.description };
+    }
+    return result;
+  }
   /** 同步渲染一帧。适用于静态内容，仅重绘脏层 */
   render() {
     for (const layer of this.scene.layers) {
@@ -2759,10 +2920,12 @@ var _App = class _App {
       }
     }
   }
-  /** 请求异步渲染循环（rAF），有动画时自动继续，无变化时停止 */
+  /** 请求异步渲染帧（幂等，一帧只执行一次）。无变化时自动停止 rAF 链 */
   requestRender() {
-    if (__privateGet(this, _rafId) !== null) return;
-    __privateSet(this, _rafId, requestAnimationFrame((t) => __privateMethod(this, _App_instances, tick_fn).call(this, t)));
+    __privateSet(this, _renderDirty, true);
+    if (__privateGet(this, _rafId) === null) {
+      __privateSet(this, _rafId, requestAnimationFrame((t) => __privateMethod(this, _App_instances, frame_fn).call(this, t)));
+    }
   }
   /**
    * 调整画布尺寸，同步更新所有层、容器和视口矩阵
@@ -2788,6 +2951,26 @@ var _App = class _App {
       plugin.resize?.(width, height);
     }
   }
+  // ========================
+  // Cursor
+  // ========================
+  /**
+   * 设置容器的鼠标光标样式。
+   * @param cursor - CSS cursor 值（如 'pointer'、'crosshair'、'grab'）
+   */
+  setCursor(cursor) {
+    if (__privateGet(this, _container)) {
+      __privateGet(this, _container).style.cursor = cursor;
+    }
+  }
+  /**
+   * 重置鼠标光标为默认值。
+   */
+  resetCursor() {
+    if (__privateGet(this, _container)) {
+      __privateGet(this, _container).style.cursor = "";
+    }
+  }
   clear() {
     if (__privateGet(this, _rafId) !== null) {
       cancelAnimationFrame(__privateGet(this, _rafId));
@@ -2803,6 +2986,10 @@ var _App = class _App {
       plugin.dispose?.();
     }
     __privateSet(this, _plugins, []);
+    this.bus.removeAllListeners();
+    __privateGet(this, _state).clear();
+    __privateGet(this, _stateMeta).clear();
+    __privateGet(this, _scheduler).clear();
     if (__privateGet(this, _resizeObserver)) {
       __privateGet(this, _resizeObserver).disconnect();
       __privateSet(this, _resizeObserver, null);
@@ -2837,7 +3024,17 @@ var _App = class _App {
   }
   /** 序列化所有渲染层的场景图为 JSON，可用于保存/回放 */
   toJSON() {
-    return serialize(this.scene.layers, this.cfg.width ?? 800, this.cfg.height ?? 600);
+    const json = serialize(this.scene.layers, this.cfg.width ?? 800, this.cfg.height ?? 600);
+    const pluginsData = {};
+    for (const plugin of __privateGet(this, _plugins)) {
+      if (plugin.serialize) {
+        pluginsData[plugin.name] = plugin.serialize();
+      }
+    }
+    if (Object.keys(pluginsData).length > 0) {
+      json.plugins = pluginsData;
+    }
+    return json;
   }
   /**
    * 从 JSON 快照创建新的 App 实例（静态工厂方法）
@@ -2876,17 +3073,49 @@ var _App = class _App {
         __privateGet(this, _container).insertBefore(layer.renderer.el, __privateGet(this, _eventLayer).renderer.el);
       }
     }
+    if (json.plugins) {
+      for (const plugin of __privateGet(this, _plugins)) {
+        const data = json.plugins[plugin.name];
+        if (data && plugin.deserialize) {
+          plugin.deserialize(data);
+        }
+      }
+    }
   }
 };
 _rafId = new WeakMap();
+_renderDirty = new WeakMap();
 _mounted = new WeakMap();
 _container = new WeakMap();
 _eventLayer = new WeakMap();
 _resizeObserver = new WeakMap();
 _plugins = new WeakMap();
+_state = new WeakMap();
+_stateMeta = new WeakMap();
+_scheduler = new WeakMap();
 _App_instances = new WeakSet();
-tick_fn = function(time) {
-  __privateSet(this, _rafId, null);
+/**
+ * 解析 zIndex：若已被占用则向上偏移到最近可用值。
+ * 保证返回值不会与任何已有层的 layerIndex 冲突。
+ */
+resolveIndex_fn = function(desired) {
+  const used = new Set(this.scene.layers.map((l) => l.layerIndex));
+  while (used.has(desired)) desired++;
+  return desired;
+};
+/**
+ * 自动分配：当前最高非事件层 index + 1。
+ * 保证返回值始终 >= 1（default 层固定为 0）。
+ */
+nextAvailableIndex_fn = function() {
+  let max = 0;
+  for (const l of this.scene.layers) {
+    if (!l.isEventLayer && l.layerIndex > max) max = l.layerIndex;
+  }
+  return max + 1;
+};
+frame_fn = function(time) {
+  __privateSet(this, _renderDirty, false);
   this.scene.tick(time);
   let anyDirty = false;
   for (const layer of this.scene.layers) {
@@ -2895,8 +3124,10 @@ tick_fn = function(time) {
       anyDirty = true;
     }
   }
-  if (anyDirty) {
-    this.requestRender();
+  if (anyDirty || __privateGet(this, _renderDirty)) {
+    __privateSet(this, _rafId, requestAnimationFrame((t) => __privateMethod(this, _App_instances, frame_fn).call(this, t)));
+  } else {
+    __privateSet(this, _rafId, null);
   }
 };
 var App = _App;
@@ -2927,6 +3158,7 @@ export {
   Renderer,
   RoundShape,
   Scene,
+  Scheduler,
   SectorShape,
   SectorTransform,
   Shape,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rendx-engine",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "2D scene graph engine with animation, events, and plugin system",
   "license": "MIT",
   "author": "wei.liang (https://github.com/weiliang0121)",
@@ -32,14 +32,14 @@
   "dependencies": {
     "eventemitter3": "^5.0.4",
     "gl-matrix": "^3.4.4",
-    "rendx-bounding": "^0.1.0",
-    "rendx-canvas": "^0.1.0",
-    "rendx-ease": "^0.1.0",
-    "rendx-interpolate": "^0.1.0",
-    "rendx-path": "^0.1.0",
-    "rendx-shape": "^0.1.0",
-    "rendx-svg": "^0.1.0",
-    "rendx-core": "^0.1.0"
+    "rendx-bounding": "^0.1.1",
+    "rendx-canvas": "^0.1.1",
+    "rendx-ease": "^0.1.1",
+    "rendx-interpolate": "^0.1.1",
+    "rendx-path": "^0.2.0",
+    "rendx-shape": "^0.1.2",
+    "rendx-svg": "^0.1.1",
+    "rendx-core": "^0.1.1"
   },
   "sideEffects": false,
   "files": [