@yanqirenshi/d3.deployment 0.8.5 → 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/package.json

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

package/tests/Rectum.test.js

@@ -182,3 +182,43 @@ test('id 0 is a valid node reference in edges (same class as sitemap issue #11)'
     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();
+});