@yanqirenshi/d3.deployment 0.4.1 → 0.5.1

package/dist/js/Rectum.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var d3 = _interopRequireWildcard(require("d3"));
 var _assh0le = require("@yanqirenshi/assh0le");
 var _Node = _interopRequireDefault(require("./datamodels/Node.js"));
 var _Edge = _interopRequireDefault(require("./datamodels/Edge.js"));
@@ -13,6 +14,7 @@ var _Nodes = _interopRequireDefault(require("./painters/Nodes.js"));
 var _Edges = _interopRequireDefault(require("./painters/Edges.js"));
 var _Ports = _interopRequireDefault(require("./painters/Ports.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -400,6 +402,149 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       } finally {
         _iterator8.f();
       }
+      this.attachNodeDrag(place, data);
+    }
+    ///// ////////////////////////////////////////////////////////////////
+    /////   Drag (grab + drag でノードを移動)
+    ///// ////////////////////////////////////////////////////////////////
+    /**
+     * ノード(node / component)にグラブ&ドラッグを付与する。
+     * 親を掴んで動かすとサブツリー(子孫ノード + ポート + 接続エッジ)がまとまって動く。
+     */
+  }, {
+    key: "attachNodeDrag",
+    value: function attachNodeDrag(place, data) {
+      var self = this;
+
+      // 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 () {
+        if (grabbed) grabbed.style.cursor = 'grab';
+        grabbed = null;
+      });
+      place.selectAll('g.node, g.component').style('cursor', 'grab').call(drag);
+    }
+    /** node を根とするサブツリーの node._id 集合を返す。 */
+  }, {
+    key: "collectSubtree",
+    value: function collectSubtree(node) {
+      var ids = new Set();
+      var _walk = function walk(n) {
+        ids.add(n._id);
+        var _iterator9 = _createForOfIteratorHelper(n.children || []),
+          _step9;
+        try {
+          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+            var child = _step9.value;
+            _walk(child);
+          }
+        } catch (err) {
+          _iterator9.e(err);
+        } finally {
+          _iterator9.f();
+        }
+      };
+      _walk(node);
+      return ids;
+    }
+    /**
+     * サブツリーを (dx, dy) だけ移動する「データ変換」。DOM には触れない(テスト可能)。
+     * ノードは剛体移動なのでポートも同じ量だけ平行移動し、影響エッジを再フィットする。
+     *
+     * @returns { moved:Set<id>, edges:Array } moved は移動した node._id、edges は再描画対象のエッジ
+     */
+  }, {
+    key: "moveSubtreeData",
+    value: function moveSubtreeData(data, node, dx, dy) {
+      var moved = this.collectSubtree(node);
+      var _iterator0 = _createForOfIteratorHelper(data.nodes.list),
+        _step0;
+      try {
+        for (_iterator0.s(); !(_step0 = _iterator0.n()).done;) {
+          var n = _step0.value;
+          if (moved.has(n._id)) {
+            n._position.x += dx;
+            n._position.y += dy;
+          }
+        }
+      } catch (err) {
+        _iterator0.e(err);
+      } finally {
+        _iterator0.f();
+      }
+      var _iterator1 = _createForOfIteratorHelper(data.ports.list),
+        _step1;
+      try {
+        for (_iterator1.s(); !(_step1 = _iterator1.n()).done;) {
+          var port = _step1.value;
+          if (moved.has(port.node._id)) {
+            port.position.x += dx;
+            port.position.y += dy;
+          }
+        }
+      } catch (err) {
+        _iterator1.e(err);
+      } finally {
+        _iterator1.f();
+      }
+      var edges = [];
+      var _iterator10 = _createForOfIteratorHelper(data.edges.list),
+        _step10;
+      try {
+        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+          var edge = _step10.value;
+          if (!moved.has(edge.from.node._id) && !moved.has(edge.to.node._id)) continue;
+          this.fittingEdge(edge);
+          edges.push(edge);
+        }
+      } catch (err) {
+        _iterator10.e(err);
+      } finally {
+        _iterator10.f();
+      }
+      return {
+        moved: moved,
+        edges: edges
+      };
+    }
+    /** moveSubtreeData でデータを更新し、対応する SVG(ノード g・ポート円・エッジ path)を反映する。 */
+  }, {
+    key: "moveSubtree",
+    value: function moveSubtree(place, data, node, dx, dy) {
+      var _this$moveSubtreeData = this.moveSubtreeData(data, node, dx, dy),
+        moved = _this$moveSubtreeData.moved,
+        edges = _this$moveSubtreeData.edges;
+      place.selectAll('g.node, g.component').filter(function (d) {
+        return moved.has(d._id);
+      }).attr('transform', function (d) {
+        return 'translate(' + d._position.x + ',' + d._position.y + ')';
+      });
+      place.selectAll('circle.port').filter(function (d) {
+        return moved.has(d.node._id);
+      }).attr('cx', function (d) {
+        return d.position.x;
+      }).attr('cy', function (d) {
+        return d.position.y;
+      });
+      var _iterator11 = _createForOfIteratorHelper(edges),
+        _step11;
+      try {
+        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+          var edge = _step11.value;
+          this._painter.EDGE.redraw(place, edge);
+        }
+      } catch (err) {
+        _iterator11.e(err);
+      } finally {
+        _iterator11.f();
+      }
     }
   }]);
 }(_assh0le.Colon);

package/dist/js/painters/Edges.js

@@ -14,6 +14,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /**
  * Edge の描画クラス。正規化済みデータ(datamodels/Edge.js の出力)を SVG path で描画する。
+ * path には class="edge" と data-edge-id を付与し、ドラッグ後の再描画(redraw)を可能にする。
  */
 var Edges = exports["default"] = /*#__PURE__*/function () {
   function Edges() {
@@ -22,33 +23,55 @@ var Edges = exports["default"] = /*#__PURE__*/function () {
   return _createClass(Edges, [{
     key: "draw",
     value: function draw(place, data) {
+      var path = place.append('path').attr('class', 'edge').attr('data-edge-id', data._id).attr('fill', 'none').style('stroke-linecap', 'round');
+      this.applyGeometry(path, data);
+    }
+    /** ドラッグ後などに、既存のエッジ path を from/to の最新位置で引き直す。 */
+  }, {
+    key: "redraw",
+    value: function redraw(place, data) {
+      var id = String(data._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);
+    }
+    /** from/to の位置からエッジ path の d・マーカー・破線を適用する。 */
+  }, {
+    key: "applyGeometry",
+    value: function applyGeometry(path, data) {
       var lineData = [{
-        "x": data.from.position.x,
-        "y": data.from.position.y,
+        x: data.from.position.x,
+        y: data.from.position.y,
         stroke: data.stroke
       }, {
-        "x": data.to.position.x,
-        "y": data.to.position.y
+        x: data.to.position.x,
+        y: data.to.position.y
       }];
       var lineFunction = d3.line().x(function (d) {
         return d.x;
       }).y(function (d) {
         return d.y;
       });
-      var path = place.append("path").datum(lineData).attr("fill", "none").attr("d", lineFunction).attr('marker-end', function (d) {
-        if (!d[0].stroke.marker || d[0].stroke.marker.end) return "url(#edge-arrow)";
+      path.datum(lineData).attr('d', lineFunction).attr('marker-end', function (d) {
+        if (!d[0].stroke.marker || d[0].stroke.marker.end) return 'url(#edge-arrow)';
         return null;
-      }).style('stroke-linecap', 'round').style('fill', function (d) {
+      }).style('fill', function (d) {
         return d[0].stroke.color;
-      }).style("stroke", function (d) {
+      }).style('stroke', function (d) {
         return d[0].stroke.color;
-      }).style("stroke-width", function (d) {
+      }).style('stroke-width', function (d) {
         return d[0].stroke.width;
       });
       var len = path.node().getTotalLength();
       var margin = 12;
       var t = len - margin * 2;
       path.attr('stroke-dasharray', "0 ".concat(margin, " ").concat(t, " ").concat(margin)).attr('stroke-dashoffset', 0);
+      return path;
     }
   }]);
 }();

package/package.json

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

package/tests/Rectum.test.js

@@ -1,5 +1,34 @@
 import Rectum from '../src/js/Rectum.js';
 
+// 親(id:1)の中に子(id:3)が入れ子。edge 100: 1→2、edge 101: 3→2。
+const NESTED_SAMPLE = () => ({
+    nodes: [
+        {
+            type: 'NODE', id: 1,
+            label: { text: 'P', position: { x: 20, y: 20 } },
+            size: { w: 300, h: 300 }, position: { x: 0, y: 0 },
+            children: [
+                {
+                    type: 'NODE', id: 3,
+                    label: { text: 'C', position: { x: 20, y: 20 } },
+                    size: { w: 120, h: 100 }, position: { x: 90, y: 120 },
+                    children: [],
+                },
+            ],
+        },
+        {
+            type: 'NODE', id: 2,
+            label: { text: 'Q', position: { x: 20, y: 20 } },
+            size: { w: 300, h: 300 }, position: { x: 450, y: 0 },
+            children: [],
+        },
+    ],
+    edges: [
+        { id: 100, from: { id: 1, position: 0 },   to: { id: 2, position: 180 }, port: 45 },
+        { id: 101, from: { id: 3, position: 270 }, to: { id: 2, position: 90 },  port: 45 },
+    ],
+});
+
 // makePortLine は共有版 Geometry.getPortLine + node 位置オフセットで構築される。
 // 200×100 の node / degree=90: 中心 {100,50}、回転後の終点 {-223,0} → {-123,50}。
 // 位置オフセット {10,20} を足して from {110,70} / to {-113,70}。
@@ -16,3 +45,74 @@ test('makePortLine builds the center-to-port line offset by the node position',
         to:   { x: -113, y: 70 },
     });
 });
+
+// selector を設定していないので data() は描画せず pool を返すだけ(DOM 不要)。
+const buildData = () => {
+    const rectum = new Rectum({});
+    rectum.data(NESTED_SAMPLE());
+    return { rectum, data: rectum.data() };
+};
+
+test('collectSubtree gathers a node and all descendants', () => {
+    const { rectum, data } = buildData();
+
+    // 親(1)を根にすると子(3)も含む。子(3)単体は 3 のみ。
+    expect([...rectum.collectSubtree(data.nodes.ht[1])].sort()).toEqual([1, 3]);
+    expect([...rectum.collectSubtree(data.nodes.ht[3])]).toEqual([3]);
+    expect([...rectum.collectSubtree(data.nodes.ht[2])]).toEqual([2]);
+});
+
+test('moving a parent shifts its subtree (nodes + ports) rigidly and re-fits touched edges', () => {
+    const { rectum, data } = buildData();
+
+    const parent = data.nodes.ht[1];
+    const child  = data.nodes.ht[3];
+    const other  = data.nodes.ht[2];
+
+    const p0 = { ...parent._position };
+    const c0 = { ...child._position };
+    const o0 = { ...other._position };
+
+    // 親のポート(edge100 FROM)と子のポート(edge101 FROM)の初期位置
+    const edge100 = data.edges.list.find((e) => e._id === 100);
+    const edge101 = data.edges.list.find((e) => e._id === 101);
+    const parentPort0 = { ...edge100.from.port.position };
+    const childPort0  = { ...edge101.from.port.position };
+    const staticEnd0  = { ...edge100.to.position }; // node 2 側(動かさない)
+
+    const result = rectum.moveSubtreeData(data, parent, 50, 30);
+
+    // 親サブツリー(1,3)が移動対象、node 2 は非対象
+    expect([...result.moved].sort()).toEqual([1, 3]);
+    expect(result.edges.map((e) => e._id).sort()).toEqual([100, 101]);
+
+    // 親・子ノードは +50 / +30 だけ剛体移動(z は不変)、node 2 は不変
+    expect(parent._position).toEqual({ ...p0, x: p0.x + 50, y: p0.y + 30 });
+    expect(child._position).toEqual({ ...c0, x: c0.x + 50, y: c0.y + 30 });
+    expect(other._position).toEqual(o0);
+
+    // 親・子のポートも同じ量だけ移動
+    expect(edge100.from.port.position).toEqual({ x: parentPort0.x + 50, y: parentPort0.y + 30 });
+    expect(edge101.from.port.position).toEqual({ x: childPort0.x + 50,  y: childPort0.y + 30 });
+
+    // エッジ端点: 動いた側(from)は追従、node 2 側(to)は不変
+    expect(edge100.from.position).toEqual({ x: parentPort0.x + 50, y: parentPort0.y + 30 });
+    expect(edge100.to.position).toEqual(staticEnd0);
+});
+
+test('moving a child leaf shifts only that child, and edges from it follow', () => {
+    const { rectum, data } = buildData();
+
+    const parent = data.nodes.ht[1];
+    const child  = data.nodes.ht[3];
+    const p0 = { ...parent._position };
+    const c0 = { ...child._position };
+
+    const result = rectum.moveSubtreeData(data, child, -20, 40);
+
+    expect([...result.moved]).toEqual([3]);
+    expect(result.edges.map((e) => e._id)).toEqual([101]); // 3→2 のみ
+
+    expect(child._position).toEqual({ ...c0, x: c0.x - 20, y: c0.y + 40 });
+    expect(parent._position).toEqual(p0); // 親は動かない
+});