topo-engine 0.1.5 → 0.1.6

package/dist/topo-engine.js

@@ -52,6 +52,13 @@ class TopoApi {
   _assertReady() {
     if (!this._graph) throw new Error("[TopoApi] 图实例未就绪，请等待渲染完成");
   }
+  /** 画布中心兼容取值：G6 v5 getCanvasCenter 返回数组 [x,y,z]，历史代码按 {x,y} 对象使用 */
+  _canvasCenterXY() {
+    const c = this._graph.getCanvasCenter();
+    if (Array.isArray(c)) return { x: c[0], y: c[1] };
+    if (c && typeof c === "object") return { x: c.x || 0, y: c.y || 0 };
+    return { x: 0, y: 0 };
+  }
   /** 安全合并 style：保留现有字段，只覆盖传入字段 */
   _safeNodeStyle(nodeId, style) {
     try {
@@ -371,7 +378,7 @@ class TopoApi {
     try {
       this._graph.focusElement(nodeId);
     } catch {
-      const center = this._graph.getCanvasCenter();
+      const center = this._canvasCenterXY();
       this._graph.translateTo({ x: center.x - p.x * (zoom || this._graph.getZoom()), y: center.y - p.y * (zoom || this._graph.getZoom()) });
     }
   }
@@ -379,7 +386,7 @@ class TopoApi {
   getViewport() {
     this._assertReady();
     const zoom = this._graph.getZoom();
-    const center = this._graph.getCanvasCenter();
+    const center = this._canvasCenterXY();
     return { zoom, center };
   }
   // ============================================================
@@ -752,11 +759,25 @@ class TopoApi {
     if (!container) return;
     const pos = this._layout.pos.get(nodeId);
     if (!pos) return;
-    const zoom = this._graph.getZoom();
-    const canvasCenter = this._graph.getCanvasCenter();
-    const containerRect = container.getBoundingClientRect();
-    const screenX = containerRect.left + canvasCenter.x + pos.x * zoom;
-    const screenY = containerRect.top + canvasCenter.y + pos.y * zoom;
+    let client = null;
+    try {
+      if (typeof this._graph.getClientByCanvas === "function") {
+        const r = this._graph.getClientByCanvas([pos.x, pos.y]);
+        client = Array.isArray(r) ? { x: r[0], y: r[1] } : r;
+      }
+    } catch (e2) {
+    }
+    let screenX, screenY;
+    if (client && isFinite(client.x)) {
+      screenX = client.x;
+      screenY = client.y;
+    } else {
+      const zoom = this._graph.getZoom();
+      const canvasCenter = this._canvasCenterXY();
+      const containerRect = container.getBoundingClientRect();
+      screenX = containerRect.left + canvasCenter.x + pos.x * zoom;
+      screenY = containerRect.top + canvasCenter.y + pos.y * zoom;
+    }
     const el = document.createElement("div");
     el.className = "topo-card";
     el.dataset.nodeId = nodeId;
@@ -28188,6 +28209,34 @@ const _sfc_main$2 = {
         const id2 = evt.target.id;
         selectNodeWithInfo(id2);
       });
+      function hitTestNodeAtCanvas(evt) {
+        const c = evt && (evt.canvas || evt.viewport) || {};
+        const cx = c.x, cy = c.y;
+        if (cx == null || cy == null) return null;
+        let best = null, bestD = Infinity;
+        let all = [];
+        try {
+          all = graph.getNodeData();
+        } catch {
+          return null;
+        }
+        for (const nd of all || []) {
+          if (nd && nd.data && nd.data.isStationFrame) continue;
+          const st = nd && nd.style;
+          if (!st || st.x == null || st.y == null) continue;
+          const size = st.size || [0, 0];
+          const w = size[0] || 0, h = size[1] || 0;
+          if (w <= 0 || h <= 0) continue;
+          if (cx >= st.x - w / 2 && cx <= st.x + w / 2 && cy >= st.y - h / 2 && cy <= st.y + h / 2) {
+            const d2 = Math.abs(cx - st.x) + Math.abs(cy - st.y);
+            if (d2 < bestD) {
+              bestD = d2;
+              best = nd.id;
+            }
+          }
+        }
+        return best;
+      }
       graph.on("node:pointerenter", (evt) => {
         const id2 = evt.target.id;
         const data3 = graph.getNodeData(id2);
@@ -28210,6 +28259,11 @@ const _sfc_main$2 = {
         api._emit("edge:click", { edgeId: id2, source: src, target: tgt });
       });
       graph.on("canvas:click", (evt) => {
+        const hitId = hitTestNodeAtCanvas(evt);
+        if (hitId) {
+          selectNodeWithInfo(hitId);
+          return;
+        }
         if (selectedId) {
           const data3 = graph.getNodeData(selectedId);
           const existing = data3 && data3.style || {};
@@ -28222,7 +28276,8 @@ const _sfc_main$2 = {
       });
       graph.on("viewportchange", (evt) => {
         const zoom = graph.getZoom();
-        const center = graph.getCanvasCenter();
+        const raw2 = graph.getCanvasCenter();
+        const center = Array.isArray(raw2) ? { x: raw2[0], y: raw2[1] } : raw2;
         api._emit("viewport:change", { zoom, center });
       });
       graph.render().then(() => {
@@ -28334,7 +28389,7 @@ const _sfc_main$2 = {
     };
   }
 };
-const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c213df91"]]);
+const TopoGraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-b02bff98"]]);
 const _hoisted_1$1 = ["data-theme"];
 const _hoisted_2$1 = { class: "panel-head" };
 const _hoisted_3$1 = {
@@ -28644,7 +28699,7 @@ const _sfc_main = {
   }
 };
 const DistanceTop10 = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-438b6017"]]);
-const VERSION = "0.1.5";
+const VERSION = "0.1.6";
 const DESCRIPTION = "配电台区单线图拓扑成图引擎";
 export {
   DESCRIPTION,