@yanqirenshi/d3.deployment 0.9.0 → 0.10.0

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,110 @@
-# 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 は入力データそのもの
+        // contextmenu は右クリック。引数は click と同じで、最後に event(MouseEvent)。
+        // 渡したときだけブラウザ標準のメニューを止める。ドラッグ中は呼ばれない
+        node: { click: (core, node) => {}, contextmenu: (core, node, event) => {} },
+        edge: { click: (core, edge) => {}, contextmenu: (core, edge, event) => {} },
+      },
+    });
+    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/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

@@ -33,6 +33,26 @@ function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !==
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+/**
+ * click / contextmenu のコールバックを呼ぶ。
+ *
+ * contextmenu(右クリック)のときだけ次のようにする。
+ *   - 左ボタンを押したまま(ドラッグ中)の右クリックは通知しない
+ *   - ブラウザ標準のコンテキストメニューを止める(コールバックがあるときだけ
+ *     ここに来るので、渡していなければ標準のメニューが出る)
+ *   - 最後の引数に event を渡す(clientX / clientY を使えるように)
+ */
+var notify = function notify(callback, event, core, datum) {
+  if (event.type === 'contextmenu') {
+    if (event.buttons & 1) return;
+    event.preventDefault();
+    event.stopPropagation();
+    callback(core, datum, event);
+    return;
+  }
+  event.stopPropagation();
+  callback(core, datum);
+};
 var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
   function Rectum(params) {
     var _this;
@@ -67,10 +87,12 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       var edge = callbacks.edge || {};
       return {
         node: {
-          click: node.click || null
+          click: node.click || null,
+          contextmenu: node.contextmenu || null
         },
         edge: {
-          click: edge.click || null
+          click: edge.click || null,
+          contextmenu: edge.contextmenu || null
         }
       };
     }
@@ -414,56 +436,61 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
         _iterator8.f();
       }
       this.attachNodeDrag(place, data);
-      this.attachNodeClick(place);
-      this.attachEdgeClick(place);
+      this.attachNodeEvent(place, 'click');
+      this.attachNodeEvent(place, 'contextmenu');
+      this.attachEdgeEvent(place, 'click');
+      this.attachEdgeEvent(place, 'contextmenu');
     }
     /**
-     * ノードのクリック通知(callbacks.node.click)。
+     * ノードのクリック通知(callbacks.node.click)と
+     * 右クリック通知(callbacks.node.contextmenu)。
      * d3.drag は移動を伴ったクリックを抑止するため、静止クリックだけが届く。
      *
-     * コールバックには (core, node) を渡す。
+     * コールバックには (core, node) を渡す。contextmenu は最後に event も渡す。
      *   core: 入力データそのまま(ライブラリが解釈しないフィールドも落ちない)
      *   node: 正規化済みデータ(位置・サイズ等が必要な場合に使う)
      *
      * リンク(a.link-alt)のクリックはリンク側を優先し、コールバックは発火しない。
+     *
+     * @param {string} type 'click' | 'contextmenu'
      */
   }, {
-    key: "attachNodeClick",
-    value: function attachNodeClick(place) {
-      var callback = this._callbacks.node.click;
+    key: "attachNodeEvent",
+    value: function attachNodeEvent(place, type) {
+      var callback = this._callbacks.node[type];
       if (!callback) return;
-      place.selectAll('g.node, g.component').on('click', function (event, d) {
+      place.selectAll('g.node, g.component').on(type, function (event, d) {
         var target = event.target;
         if (target && target.closest && target.closest('a.link-alt')) return; // リンク優先(既存の <a target="_blank"> と干渉しない)
 
-        event.stopPropagation();
-        callback(d._core, d);
+        notify(callback, event, d._core, d);
       });
     }
     /**
-     * エッジのクリック通知(callbacks.edge.click)。
+     * エッジのクリック通知(callbacks.edge.click)と
+     * 右クリック通知(callbacks.edge.contextmenu)。
      * エッジ path のほか、両端のポート円からも同じエッジを通知する
      * (細い線より円のほうが掴みやすい)。(core, edge) を渡す契約は
-     * node.click と同じ(core = 入力のエッジオブジェクトそのまま)。
+     * node.click / node.contextmenu と同じ(core = 入力のエッジオブジェクトそのまま)。
+     *
+     * @param {string} type 'click' | 'contextmenu'
      */
   }, {
-    key: "attachEdgeClick",
-    value: function attachEdgeClick(place) {
+    key: "attachEdgeEvent",
+    value: function attachEdgeEvent(place, type) {
       var _this5 = this;
-      var callback = this._callbacks.edge.click;
+      var callback = this._callbacks.edge[type];
       if (!callback) return;
-      place.selectAll('path.edge').style('cursor', 'pointer').on('click', function (event) {
+      place.selectAll('path.edge').style('cursor', 'pointer').on(type, 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);
+        notify(callback, event, edge._core, edge);
       });
-      place.selectAll('circle.port').style('cursor', 'pointer').on('click', function (event, d) {
-        event.stopPropagation();
-        callback(d.edge._core, d.edge);
+      place.selectAll('circle.port').style('cursor', 'pointer').on(type, function (event, d) {
+        notify(callback, event, d.edge._core, d.edge);
       });
     }
     /** id(入力 id。DOM の data-edge-id は文字列)からエッジを引く。 */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.9.0",
-    "description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
+    "version": "0.10.0",
+    "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"
     }