@yanqirenshi/d3.deployment 0.5.2 → 0.7.0

package/dist/js/Rectum.js

@@ -52,13 +52,28 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       EDGE: new _Edges["default"](),
       PORT: new _Ports["default"]()
     };
+
+    // コールバック(任意)。描画は行わず通知のみ
+    // (インスペクタ等の外部ツールはこの通知に接続する)
+    _this._callbacks = _this.initCallbacks(params);
     return _this;
   }
-  /* ******** */
-  /*  Getter  */
-  /* ******** */
   _inherits(Rectum, _Colon);
   return _createClass(Rectum, [{
+    key: "initCallbacks",
+    value: function initCallbacks(params) {
+      var callbacks = params && params.callbacks || {};
+      var node = callbacks.node || {};
+      return {
+        node: {
+          click: node.click || null
+        }
+      };
+    }
+    /* ******** */
+    /*  Getter  */
+    /* ******** */
+  }, {
     key: "node",
     value: function node() {
       return this._node;
@@ -403,6 +418,21 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
         _iterator8.f();
       }
       this.attachNodeDrag(place, data);
+      this.attachNodeClick(place);
+    }
+    /**
+     * ノードのクリック通知(callbacks.node.click)。
+     * d3.drag は移動を伴ったクリックを抑止するため、静止クリックだけが届く。
+     */
+  }, {
+    key: "attachNodeClick",
+    value: function attachNodeClick(place) {
+      var callback = this._callbacks.node.click;
+      if (!callback) return;
+      place.selectAll('g.node, g.component').on('click', function (event, d) {
+        event.stopPropagation();
+        callback(d);
+      });
     }
     ///// ////////////////////////////////////////////////////////////////
     /////   Drag (grab + drag でノードを移動)

package/dist/js/datamodels/Node.js

@@ -86,6 +86,7 @@ var Node = exports["default"] = /*#__PURE__*/function () {
             color: '#333333'
           }
         },
+        description: '',
         position: null,
         size: null,
         background: null,
@@ -103,6 +104,7 @@ var Node = exports["default"] = /*#__PURE__*/function () {
       var core = data._core;
       if (core.id || core.id === 0) data._id = core.id;
       if (core.type) data.type = core.type;
+      if (core.description) data.description = core.description;
       if (core.link) data.link = core.link;else data.link = {
         url: null
       };

package/dist/js/painters/Nodes.js

@@ -37,13 +37,21 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "drawGroup",
     value: function drawGroup(place, data, type) {
-      return place.selectAll('g.' + type).data([data], function (d) {
+      var groups = place.selectAll('g.' + type).data([data], function (d) {
         return d._id;
       }).enter().append('g').attr('class', type).attr("transform", function (d) {
         return "translate(" + d._position.x + "," + d._position.y + ")";
       }).attr('level', function (d) {
         return d._level;
       });
+
+      // description はホバーツールチップ(SVG <title>)として表示する
+      groups.filter(function (d) {
+        return !!d.description;
+      }).append('title').text(function (d) {
+        return d.description;
+      });
+      return groups;
     }
   }, {
     key: "drawBody",

package/package.json

@@ -1,11 +1,10 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.5.2",
+    "version": "0.7.0",
     "description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
     "main": "dist/index.js",
     "directories": {
-        "doc": "docs",
-        "example": "example"
+        "doc": "docs"
     },
     "peerDependencies": {
         "react": "^18.2.0",

package/tests/Rectum.test.js

@@ -6,6 +6,7 @@ const NESTED_SAMPLE = () => ({
         {
             type: 'NODE', id: 1,
             label: { text: 'P', position: { x: 20, y: 20 } },
+            description: '親ノードの説明',
             size: { w: 300, h: 300 }, position: { x: 0, y: 0 },
             children: [
                 {
@@ -76,6 +77,13 @@ test('edges without an explicit id inherit the auto-numbered _id (drag redraw ne
     expect(typeof edges[0]._id).toBe('number');
 });
 
+test('node description is normalized (kept when given, empty by default)', () => {
+    const { data } = buildData();
+
+    expect(data.nodes.ht[1].description).toBe('親ノードの説明');
+    expect(data.nodes.ht[2].description).toBe('');   // 未指定は空文字
+});
+
 test('collectSubtree gathers a node and all descendants', () => {
     const { rectum, data } = buildData();