topo-engine 0.1.5 → 0.1.6

package/dist/style.css

@@ -1,6 +1,6 @@
 
 /* —— 主题变量：dark 为默认值，light 由 [data-theme='light'] 覆盖 —— */
-.topo-wrap[data-v-c213df91] {
+.topo-wrap[data-v-b02bff98] {
   --tp-bg: #050505;
   --tp-toolbar-bg: rgba(20, 20, 20, 0.88);
   --tp-toolbar-border: #333;
@@ -19,7 +19,7 @@
   overflow: hidden;
   background: var(--tp-bg);
 }
-.topo-wrap[data-theme='light'][data-v-c213df91] {
+.topo-wrap[data-theme='light'][data-v-b02bff98] {
   --tp-bg: #ffffff;
   --tp-toolbar-bg: rgba(255, 255, 255, 0.92);
   --tp-toolbar-border: #d9d9d9;
@@ -33,11 +33,11 @@
   --tp-text: #555;
   --tp-error: #d32f2f;
 }
-.topo-container[data-v-c213df91] {
+.topo-container[data-v-b02bff98] {
   width: 100%;
   height: 100%;
 }
-.topo-toolbar[data-v-c213df91] {
+.topo-toolbar[data-v-b02bff98] {
   position: absolute;
   top: 10px;
   left: 12px;
@@ -52,14 +52,14 @@
   color: var(--tp-text);
   z-index: 10;
 }
-.topo-title[data-v-c213df91] {
+.topo-title[data-v-b02bff98] {
   color: var(--tp-title);
   font-weight: 600;
 }
-.topo-meta[data-v-c213df91] {
+.topo-meta[data-v-b02bff98] {
   color: var(--tp-meta);
 }
-.btn[data-v-c213df91] {
+.btn[data-v-b02bff98] {
   margin-left: 4px;
   padding: 3px 10px;
   border: 1px solid var(--tp-btn-border);
@@ -69,12 +69,12 @@
   cursor: pointer;
   font-size: 12px;
 }
-.btn[data-v-c213df91]:hover {
+.btn[data-v-b02bff98]:hover {
   border-color: var(--tp-accent);
   color: var(--tp-accent);
 }
-.topo-loading[data-v-c213df91],
-.topo-error[data-v-c213df91] {
+.topo-loading[data-v-b02bff98],
+.topo-error[data-v-b02bff98] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -85,7 +85,7 @@
   z-index: 5;
   background: var(--tp-overlay-bg);
 }
-.topo-error[data-v-c213df91] {
+.topo-error[data-v-b02bff98] {
   color: var(--tp-error);
 }
 

package/dist/topo-engine.cjs

@@ -54,6 +54,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 {
@@ -373,7 +380,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()) });
     }
   }
@@ -381,7 +388,7 @@ class TopoApi {
   getViewport() {
     this._assertReady();
     const zoom = this._graph.getZoom();
-    const center = this._graph.getCanvasCenter();
+    const center = this._canvasCenterXY();
     return { zoom, center };
   }
   // ============================================================
@@ -754,11 +761,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;
@@ -28190,6 +28211,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);
@@ -28212,6 +28261,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 || {};
@@ -28224,7 +28278,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(() => {
@@ -28336,7 +28391,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 = {
@@ -28646,7 +28701,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 = "配电台区单线图拓扑成图引擎";
 exports.DESCRIPTION = DESCRIPTION;
 exports.DistanceTop10 = DistanceTop10;