@yanqirenshi/d3.deployment 0.8.4 → 0.9.0

package/dist/js/Rectum.js

@@ -64,9 +64,13 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
     value: function initCallbacks(params) {
       var callbacks = params && params.callbacks || {};
       var node = callbacks.node || {};
+      var edge = callbacks.edge || {};
       return {
         node: {
           click: node.click || null
+        },
+        edge: {
+          click: edge.click || null
         }
       };
     }
@@ -411,6 +415,7 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       }
       this.attachNodeDrag(place, data);
       this.attachNodeClick(place);
+      this.attachEdgeClick(place);
     }
     /**
      * ノードのクリック通知(callbacks.node.click)。
@@ -435,6 +440,75 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
         callback(d._core, d);
       });
     }
+    /**
+     * エッジのクリック通知(callbacks.edge.click)。
+     * エッジ path のほか、両端のポート円からも同じエッジを通知する
+     * (細い線より円のほうが掴みやすい)。(core, edge) を渡す契約は
+     * node.click と同じ(core = 入力のエッジオブジェクトそのまま)。
+     */
+  }, {
+    key: "attachEdgeClick",
+    value: function attachEdgeClick(place) {
+      var _this5 = this;
+      var callback = this._callbacks.edge.click;
+      if (!callback) return;
+      place.selectAll('path.edge').style('cursor', 'pointer').on('click', function (event) {
+        // path の datum は線分データのため data-edge-id からエッジを引く
+        var el = event.currentTarget;
+        var id = el && el.getAttribute && el.getAttribute('data-edge-id');
+        var edge = _this5.findEdge(id);
+        if (!edge) return;
+        event.stopPropagation();
+        callback(edge._core, edge);
+      });
+      place.selectAll('circle.port').style('cursor', 'pointer').on('click', function (event, d) {
+        event.stopPropagation();
+        callback(d.edge._core, d.edge);
+      });
+    }
+    /** id(入力 id。DOM の data-edge-id は文字列)からエッジを引く。 */
+  }, {
+    key: "findEdge",
+    value: function findEdge(id) {
+      var data = this.data();
+      if (!data || id === null || id === undefined) return null;
+      return data.edges.ht[id] || data.edges.ht[Number(id)] || null;
+    }
+    /**
+     * エッジのポート位置(角度)を変更して再フィットし、DOM があれば
+     * その場で再描画する(remount 不要)。角度は入力と同じ規約
+     * (ノード中心から見て 0=真下・時計回り。90=左, 180=真上, 270=右)。
+     *
+     * @param {*} edge_id 対象エッジの id(入力の id)
+     * @param {object} positions { from?: 角度, to?: 角度 } 省略側は変更しない
+     */
+  }, {
+    key: "setEdgePorts",
+    value: function setEdgePorts(edge_id) {
+      var positions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var edge = this.findEdge(edge_id);
+      if (!edge) return this;
+
+      // 入力(_core)の角度を更新する。fittingPort は _core を読むので
+      // そのまま再フィットでき、以後の再描画・remount でも維持される。
+      if (positions.from !== undefined && positions.from !== null) edge._core.from.position = positions.from;
+      if (positions.to !== undefined && positions.to !== null) edge._core.to.position = positions.to;
+      this.fittingPort(edge.from.port);
+      this.fittingPort(edge.to.port);
+      this.fittingEdge(edge);
+      var place = this.d3Element();
+      if (place) {
+        place.selectAll('circle.port').filter(function (d) {
+          return d === edge.from.port || d === edge.to.port;
+        }).attr('cx', function (d) {
+          return d.position.x;
+        }).attr('cy', function (d) {
+          return d.position.y;
+        });
+        this._painter.EDGE.redraw(place, edge);
+      }
+      return this;
+    }
     ///// ////////////////////////////////////////////////////////////////
     /////   Drag (grab + drag でノードを移動)
     ///// ////////////////////////////////////////////////////////////////

package/dist/js/datamodels/Edge.js

@@ -63,8 +63,11 @@ var Edge = exports["default"] = /*#__PURE__*/function () {
       // (これを落とすと _id=null → data-edge-id="null" になり、
       //  ドラッグ時の redraw が対象 path を特定できず接続線が追従しない)
       if (data.id || data.id === 0) new_data._id = data.id;else if (data._id || data._id === 0) new_data._id = data._id;
-      if (data.from.id) new_data.from.id = data.from.id;
-      if (data.to.id) new_data.to.id = data.to.id;
+
+      // id: 0 も有効な参照として扱う(truthy チェックだと 0 のノードへの
+      // 接続が無視され、ポート解決時にクラッシュする — sitemap 側 issue #11 と同族)
+      if (data.from.id !== undefined && data.from.id !== null) new_data.from.id = data.from.id;
+      if (data.to.id !== undefined && data.to.id !== null) new_data.to.id = data.to.id;
       if (data.stroke) {
         if (data.stroke.color) new_data.stroke.color = data.stroke.color;
         if (data.stroke.width) new_data.stroke.width = data.stroke.width;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.8.4",
+    "version": "0.9.0",
     "description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
     "main": "dist/index.js",
     "directories": {

package/tests/Rectum.test.js

@@ -147,3 +147,78 @@ test('moving a child leaf shifts only that child, and edges from it follow', ()
     expect(child._position).toEqual({ ...c0, x: c0.x - 20, y: c0.y + 40 });
     expect(parent._position).toEqual(p0); // 親は動かない
 });
+
+// sitemap 側 issue #11 と同族: id 0 のノードをエッジの from/to に指定すると
+// Edge.normalize の truthy チェックで参照が落ち、ポート解決でクラッシュしていた。
+test('id 0 is a valid node reference in edges (same class as sitemap issue #11)', () => {
+    const rectum = new Rectum({});
+    const sample = {
+        nodes: [
+            {
+                type: 'NODE', id: 0,
+                label: { text: 'Zero', position: { x: 20, y: 20 } },
+                size: { w: 200, h: 100 }, position: { x: 0, y: 0 },
+                children: [],
+            },
+            {
+                type: 'NODE', id: 1,
+                label: { text: 'One', position: { x: 20, y: 20 } },
+                size: { w: 200, h: 100 }, position: { x: 400, y: 0 },
+                children: [],
+            },
+        ],
+        edges: [
+            { id: 100, from: { id: 0, position: 0 }, to: { id: 1, position: 180 } },
+        ],
+    };
+
+    expect(() => rectum.data(sample)).not.toThrow();
+
+    const data = rectum.data();
+    const edge = data.edges.list.find((e) => e._id === 100);
+
+    expect(edge.from.id).toBe(0);
+    expect(edge.from.node).toBe(data.nodes.ht[0]);
+    expect(typeof edge.from.position.x).toBe('number');
+    expect(typeof edge.from.position.y).toBe('number');
+});
+
+// issue #13: エッジのポート位置(角度)を描画後に変更する公開 API。
+// setEdgePorts は _core の角度を更新してポートを再フィットする(DOM 不要でテスト可能)。
+test('setEdgePorts refits ports to the new angles (issue #13)', () => {
+    const rectum = new Rectum({});
+    rectum.data(NESTED_SAMPLE());
+    const data = rectum.data();
+
+    const edge = data.edges.ht[100];
+    const node1 = data.nodes.ht[1];
+    const node2 = data.nodes.ht[2];
+
+    // 初期: from は角度 0(真下) → node 1 の下辺中央(マージン 8)
+    expect(edge.from.port.position.x).toBeCloseTo(node1._position.x + node1._size.w / 2, 0);
+    expect(edge.from.port.position.y).toBeCloseTo(node1._position.y + node1._size.h + 8, 0);
+
+    rectum.setEdgePorts(100, { from: 180, to: 90 });
+
+    // _core が更新され、from ポートは上辺中央へ、to ポートは左辺中央へ再フィット
+    expect(edge._core.from.position).toBe(180);
+    expect(edge._core.to.position).toBe(90);
+
+    expect(edge.from.port.position.x).toBeCloseTo(node1._position.x + node1._size.w / 2, 0);
+    expect(edge.from.port.position.y).toBeCloseTo(node1._position.y - 8, 0);
+
+    expect(edge.to.port.position.x).toBeCloseTo(node2._position.x - 8, 0);
+    expect(edge.to.port.position.y).toBeCloseTo(node2._position.y + node2._size.h / 2, 0);
+
+    // エッジ端点もポートに追従
+    expect(edge.from.position).toEqual(edge.from.port.position);
+    expect(edge.to.position).toEqual(edge.to.port.position);
+
+    // 片側のみの変更(from は 180 のまま)
+    rectum.setEdgePorts(100, { to: 270 });
+    expect(edge._core.from.position).toBe(180);
+    expect(edge.to.port.position.x).toBeCloseTo(node2._position.x + node2._size.w + 8, 0);
+
+    // 未知のエッジ id は無視される(例外なし)
+    expect(() => rectum.setEdgePorts(999, { from: 0 })).not.toThrow();
+});