@yanqirenshi/d3.deployment 0.9.0 → 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/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.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"
     }