@yanqirenshi/d3.deployment 0.8.5 → 0.9.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018-2026 Satoshi Iwasaki (yanqirenshi@gmail.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.markdown

@@ -1,15 +1,108 @@
-# D3.Deployment
-
-See [Documents](https://yanqirenshi.github.io/D3.Deployment/)
-
-# Author
-
-yanqirenshi (yanqirenshie@gmail.com)
-
-# Copyright
-
-Copyright (c) 2019 yanqirenshi (yanqirenshie@gmail.com)
-
-# License
-
-Licensed under the LLGPL License.
+# @yanqirenshi/d3.deployment
+
+デプロイメント図（ノード・エッジ・ポート）を SVG で描画する React コンポーネントです。
+
+- ノードは `children` で入れ子にできます。宣言サイズより子が大きい場合は親が自動で広がります。
+- ノードはドラッグで移動でき、**親を動かすとサブツリーごと追従**します。
+- エッジの取り付け位置はポートの角度で指定します（0=真下・時計回り。90=左 / 180=真上 / 270=右）。
+- **このライブラリは描画のみを行います。** クリックはコールバックで通知するだけで、
+  編集 UI は利用側が用意します（ショーケースではインスペクタ `@yanqirenshi/colonoscope` を繋いでいます）。
+
+## インストール
+
+```bash
+npm install @yanqirenshi/d3.deployment
+```
+
+React 18 / 19 に対応しています（`peerDependencies`）。
+
+## 使い方
+
+描画の管理オブジェクト `Rectum` を作って React コンポーネント `D3Deployment` に渡し、
+`data()` でデータを流し込みます。
+
+```jsx
+import React from 'react';
+import D3Deployment, { Rectum } from '@yanqirenshi/d3.deployment';
+
+export default function Graph({ data }) {
+  const [rectum, setRectum] = React.useState(null);
+
+  React.useEffect(() => {
+    const r = new Rectum({
+      transform: { k: 0.6, x: 120, y: 120 },   // 初期のズーム / パン
+      callbacks: {
+        // 描画は行わず通知のみ。core は入力データそのもの
+        node: { click: (core, node) => {} },
+        edge: { click: (core, edge) => {} },
+      },
+    });
+    r.data(data);
+    setRectum(r);
+  }, [data]);
+
+  if (!rectum) return null;
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <D3Deployment rectum={rectum} />
+    </div>
+  );
+}
+```
+
+### 描画後にポートの角度を変える
+
+```js
+rectum.setEdgePorts(edge_id, { from: 0, to: 180 });   // 省略した側は変更しない
+```
+
+入力データ側（`_core`）の角度を書き換えてから再フィットするので、
+以後の再描画やコンポーネントの remount でも維持されます。
+
+## 入力データ
+
+`{ nodes, edges }` の連想配列です。
+
+```js
+{
+  nodes: [
+    {
+      type: 'NODE', id: 1,
+      label: { text: 'NODE 01', position: { x: 20, y: 20 }, font: { size: 16, color: '#333333' } },
+      description: 'ホバー時のツールチップに出る（任意）',
+      link: { url: 'https://example.com/' },   // 任意。ボックス左下に表示
+      padding: 40,                             // 任意。数値・全辺共通
+      size: { w: 150, h: 150 }, position: { x: 0, y: 0 },
+      children: [ /* 入れ子のノード */ ],
+    },
+  ],
+  edges: [
+    { id: 100, from: { id: 1, position: 0 }, to: { id: 2, position: 180 } },
+  ],
+}
+```
+
+`edges[].from.id` / `to.id` は `nodes[].id` を参照します（入れ子の内側のノードも指定できます）。
+
+フィールドの詳細はショーケースの d3.deployment のページ（「データ」タブ）を参照してください。
+サンプルの実データは `showcase/src/demos/data/deployment-sample.js` です。
+
+## 開発
+
+```bash
+npm run transpile -w @yanqirenshi/d3.deployment   # src -> dist（dist はコミット対象）
+npm test -w @yanqirenshi/d3.deployment            # jest
+```
+
+## Author
+
+Satoshi Iwasaki (yanqirenshi@gmail.com)
+
+## Copyright
+
+Copyright (c) 2018-2026 Satoshi Iwasaki (yanqirenshi@gmail.com)
+
+## License
+
+Licensed under the MIT License.

package/babel.config.js

@@ -1,14 +1,14 @@
-module.exports = {
-  presets: [
-    [
-      "@babel/preset-env"
-    ]
-  ],
-  env: {
-    test: {
-      plugins: [
-          "babel-plugin-transform-es2015-modules-commonjs",
-      ],
-    },
-  },
-};
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env"
+    ]
+  ],
+  env: {
+    test: {
+      plugins: [
+          "babel-plugin-transform-es2015-modules-commonjs",
+      ],
+    },
+  },
+};

package/dist/components/D3Deployment.js

@@ -1,18 +1,17 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = D3Deployment;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _assh0le = _interopRequireDefault(require("@yanqirenshi/assh0le"));
 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 D3Deployment(props) {
   var rectum = props.rectum;
+  var id = props.id || "d3-deployment-graph";
   return /*#__PURE__*/_react["default"].createElement(_assh0le["default"], {
-    id: "d3-deployment-graph",
+    id: id,
     rectum: rectum
   });
 }

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,7 +1,7 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.8.5",
-    "description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
+    "version": "0.9.1",
+    "description": "Deployment diagram renderer (nestable nodes / edges / ports) — dragging a parent moves its whole subtree",
     "main": "dist/index.js",
     "directories": {
         "doc": "docs"
@@ -26,19 +26,20 @@
     },
     "scripts": {
         "test": "jest",
-        "transpile": "babel src -d dist --copy-files",
+        "transpile": "babel src -d dist --copy-files --delete-dir-on-start",
         "prepublishOnly": "npm run transpile"
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/yanqirenshi/D3.Deployment.git"
+        "url": "git+https://github.com/Foolsgolds/Assholes.git",
+        "directory": "packages/d3.deployment"
     },
     "author": "yanqirenshi@gmail.com",
     "license": "MIT",
     "bugs": {
-        "url": "https://github.com/yanqirenshi/D3.Deployment/issues"
+        "url": "https://github.com/Foolsgolds/Assholes/issues"
     },
-    "homepage": "https://github.com/yanqirenshi/D3.Deployment#readme",
+    "homepage": "https://github.com/Foolsgolds/Assholes/tree/main/packages/d3.deployment#readme",
     "publishConfig": {
         "access": "public"
     }

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();
+});