@yanqirenshi/d3.deployment 0.5.0 → 0.5.2

package/dist/js/Rectum.js

@@ -415,12 +415,19 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
     key: "attachNodeDrag",
     value: function attachNodeDrag(place, data) {
       var self = this;
-      var drag = d3.drag().on('start', function () {
-        d3.select(this).style('cursor', 'grabbing');
+
+      // d3 コールバック内で `this`(= DOM 要素)に依存しない。
+      // Next.js(Webpack/SWC)のトランスパイルで `this` が書き換わり得るため、
+      // 掴んだ要素は sourceEvent から closest() で取り、クロージャで保持する。
+      var grabbed = null;
+      var drag = d3.drag().on('start', function (event) {
+        grabbed = event.sourceEvent.target.closest('g.node, g.component');
+        if (grabbed) grabbed.style.cursor = 'grabbing';
       }).on('drag', function (event, node) {
         self.moveSubtree(place, data, node, event.dx, event.dy);
       }).on('end', function () {
-        d3.select(this).style('cursor', 'grab');
+        if (grabbed) grabbed.style.cursor = 'grab';
+        grabbed = null;
       });
       place.selectAll('g.node, g.component').style('cursor', 'grab').call(drag);
     }

package/dist/js/datamodels/Edge.js

@@ -58,7 +58,11 @@ var Edge = exports["default"] = /*#__PURE__*/function () {
     value: function normalize(data) {
       var new_data = this.dataTemplate();
       new_data._core = data;
-      if (data.id) new_data._id = data.id;
+
+      // 入力に id があればそれを、無ければ Rectum.makeEdges が採番した _id を引き継ぐ。
+      // (これを落とすと _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;
       if (data.stroke) {

package/dist/js/painters/Edges.js

@@ -31,8 +31,12 @@ var Edges = exports["default"] = /*#__PURE__*/function () {
     key: "redraw",
     value: function redraw(place, data) {
       var id = String(data._id);
-      var path = place.selectAll('path.edge').filter(function () {
-        return this.getAttribute('data-edge-id') === id;
+
+      // d3 コールバック内では `this`(= DOM 要素)に依存しない。
+      // Next.js(Webpack/SWC)などのトランスパイル環境で `this` が
+      // 書き換わり得るため、引数 (d, i, nodes) の nodes[i] で要素へアクセスする。
+      var path = place.selectAll('path.edge').filter(function (d, i, nodes) {
+        return nodes[i].getAttribute('data-edge-id') === id;
       });
       if (!path.empty()) this.applyGeometry(path, data);
     }

package/package.json

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

package/tests/Rectum.test.js

@@ -53,6 +53,29 @@ const buildData = () => {
     return { rectum, data: rectum.data() };
 };
 
+test('edges without an explicit id inherit the auto-numbered _id (drag redraw needs it)', () => {
+    const rectum = new Rectum({});
+
+    // 入力エッジに id を与えない → makeEdges が _id を採番、normalize が引き継ぐべき。
+    rectum.data({
+        nodes: [
+            { type: 'NODE', id: 1, label: { text: 'A' }, size: { w: 100, h: 100 }, position: { x: 0,   y: 0 } },
+            { type: 'NODE', id: 2, label: { text: 'B' }, size: { w: 100, h: 100 }, position: { x: 300, y: 0 } },
+        ],
+        edges: [
+            { from: { id: 1, position: 0 }, to: { id: 2, position: 180 }, port: 45 },
+        ],
+    });
+
+    const edges = rectum.data().edges.list;
+
+    expect(edges).toHaveLength(1);
+    // _id が null のままだと data-edge-id="null" になり redraw が対象を見つけられない。
+    expect(edges[0]._id).not.toBeNull();
+    expect(edges[0]._id).not.toBeUndefined();
+    expect(typeof edges[0]._id).toBe('number');
+});
+
 test('collectSubtree gathers a node and all descendants', () => {
     const { rectum, data } = buildData();