@yanqirenshi/d3.deployment 0.9.1 → 0.11.0

package/README.markdown

@@ -4,8 +4,11 @@
 
 - ノードは `children` で入れ子にできます。宣言サイズより子が大きい場合は親が自動で広がります。
 - ノードはドラッグで移動でき、**親を動かすとサブツリーごと追従**します。
+  動かし終えたことは `callbacks.node.dragend(core, node, move)` で受け取れます（v0.11.0+）。
+- 既定値（枠線・背景・線の stroke と矢印・端点の角度 90）は [`@yanqirenshi/model.deployment`](../model.deployment) から取ります。
+  インスペクタや保存は model.deployment と組み合わせます（ショーケースの `model.deployment` のデモ）。
 - エッジの取り付け位置はポートの角度で指定します（0=真下・時計回り。90=左 / 180=真上 / 270=右）。
-- **このライブラリは描画のみを行います。** クリックはコールバックで通知するだけで、
+- **このライブラリは描画のみを行います。** クリックと右クリックはコールバックで通知するだけで、
   編集 UI は利用側が用意します（ショーケースではインスペクタ `@yanqirenshi/colonoscope` を繋いでいます）。
 
 ## インストール
@@ -33,8 +36,12 @@ export default function Graph({ data }) {
       transform: { k: 0.6, x: 120, y: 120 },   // 初期のズーム / パン
       callbacks: {
         // 描画は行わず通知のみ。core は入力データそのもの
-        node: { click: (core, node) => {} },
-        edge: { click: (core, edge) => {} },
+        // contextmenu は右クリック。引数は click と同じで、最後に event(MouseEvent)。
+        // 渡したときだけブラウザ標準のメニューを止める。ドラッグ中は呼ばれない
+        node: { click: (core, node) => {}, contextmenu: (core, node, event) => {},
+                // ドラッグの終わり(動いたときだけ)。move は移動量 { dx, dy }。model.deployment の movePatch(core, move) に渡せる
+                dragend: (core, node, move) => {} },
+        edge: { click: (core, edge) => {}, contextmenu: (core, edge, event) => {} },
       },
     });
     r.data(data);

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/js/Rectum.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var d3 = _interopRequireWildcard(require("d3"));
 var _assh0le = require("@yanqirenshi/assh0le");
+var _model = require("@yanqirenshi/model.deployment");
 var _Node = _interopRequireDefault(require("./datamodels/Node.js"));
 var _Edge = _interopRequireDefault(require("./datamodels/Edge.js"));
 var _Port = _interopRequireDefault(require("./datamodels/Port.js"));
@@ -32,7 +33,27 @@ function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? R
 function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
 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); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } // 端点の角度の既定(90=左)は図ごとの知識なので @yanqirenshi/model.deployment が持つ(Foolsgolds/Assholes#146)
+/**
+ * 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 +88,14 @@ 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,
+          // ドラッグの終わり(動いたときだけ)。(core, node, move) を渡す
+          dragend: node.dragend || null
         },
         edge: {
-          click: edge.click || null
+          click: edge.click || null,
+          contextmenu: edge.contextmenu || null
         }
       };
     }
@@ -247,7 +272,9 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
     value: function fittingPort(port) {
       var port_pos;
       if (port._type === 'FROM') port_pos = port.edge._core.from.position;else port_pos = port.edge._core.to.position;
-      var position = this.positioningPort(port, port_pos, port.node);
+
+      // 角度が無ければモデルの既定(90=左)。Geometry.getPortLineTo も同じ値に倒すが、既定の出どころはモデル側
+      var position = this.positioningPort(port, (0, _model.degreeOf)(port_pos), port.node);
       port.position = position;
     }
   }, {
@@ -414,56 +441,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 は文字列)からエッジを引く。 */
@@ -525,17 +557,46 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       // Next.js(Webpack/SWC)のトランスパイルで `this` が書き換わり得るため、
       // 掴んだ要素は sourceEvent から closest() で取り、クロージャで保持する。
       var grabbed = null;
-      var drag = d3.drag().on('start', function (event) {
+
+      // dragend(callbacks.node.dragend)で移動量を出すために、掴んだときの位置を覚える
+      var origin = null;
+      var drag = d3.drag().on('start', function (event, node) {
         grabbed = event.sourceEvent.target.closest('g.node, g.component');
         if (grabbed) grabbed.style.cursor = 'grabbing';
+        origin = {
+          x: node._position.x,
+          y: node._position.y
+        };
       }).on('drag', function (event, node) {
         self.moveSubtree(place, data, node, event.dx, event.dy);
-      }).on('end', function () {
+      }).on('end', function (event, node) {
         if (grabbed) grabbed.style.cursor = 'grab';
         grabbed = null;
+        self.notifyDragend(node, origin);
+        origin = null;
       });
       place.selectAll('g.node, g.component').style('cursor', 'grab').call(drag);
     }
+    /**
+     * ドラッグの終わり。動いたときだけ callbacks.node.dragend(core, node, move) を呼ぶ。
+     *   core: 入力のレコード(node._core)
+     *   node: 正規化済みのノード(_position は動かしたあとの位置)
+     *   move: 移動量 { dx, dy }(世界座標)。model.deployment の movePatch(core, move) にそのまま渡せる
+     * 動かさずに離したとき(クリック)は呼ばない(保存が走らないように)。
+     * 掴んだノード(node / component)についてだけ呼ぶ(子孫はいっしょに動くが、position は親の中での位置なので変わらない)。
+     */
+  }, {
+    key: "notifyDragend",
+    value: function notifyDragend(node, origin) {
+      var callback = this._callbacks.node.dragend;
+      if (!callback || !origin) return;
+      var move = {
+        dx: node._position.x - origin.x,
+        dy: node._position.y - origin.y
+      };
+      if (move.dx === 0 && move.dy === 0) return;
+      callback(node._core, node, move);
+    }
     /** node を根とするサブツリーの node._id 集合を返す。 */
   }, {
     key: "collectSubtree",

package/dist/js/datamodels/Edge.js

@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _model = require("@yanqirenshi/model.deployment");
 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); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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); }
+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); } // 線の既定(stroke と矢印)は図ごとの知識なので @yanqirenshi/model.deployment が持つ(Foolsgolds/Assholes#146)
 /**
  * Edge のデータクラス。入力データの正規化(既定値補完)を行う。
  * 描画は painters/Edges.js が担当する。
@@ -41,12 +45,9 @@ var Edge = exports["default"] = /*#__PURE__*/function () {
           }
         },
         stroke: {
-          color: '#333',
-          width: 1.5,
-          marker: {
-            start: false,
-            end: true
-          }
+          color: _model.EDGE_DEFAULTS.stroke.color,
+          width: _model.EDGE_DEFAULTS.stroke.width,
+          marker: _objectSpread({}, _model.EDGE_DEFAULTS.stroke.marker)
         },
         _id: null,
         _core: null,

package/dist/js/datamodels/Node.js

@@ -5,12 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _assh0le = require("@yanqirenshi/assh0le");
+var _model = require("@yanqirenshi/model.deployment");
 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); }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-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); }
+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); } // 枠線・背景の既定は図ごとの知識なので @yanqirenshi/model.deployment が持つ(Foolsgolds/Assholes#146)。
+// 値は assh0le の Stroke.template / Background.template と同じ(model.deployment のテストが突き合わせる)。
 /**
  * Node のデータクラス。入力データの正規化(既定値補完)と幾何情報の提供を行う。
  * 描画は painters/Nodes.js が担当する。
@@ -21,8 +23,6 @@ var Node = exports["default"] = /*#__PURE__*/function () {
     this.label = new _assh0le.Label();
     this.rectangle = new _assh0le.Rectangle();
     this.position = new _assh0le.Position();
-    this.stroke = new _assh0le.Stroke();
-    this.background = new _assh0le.Background();
     this.padding = new _assh0le.Padding();
   }
   ///// ////////////////////////////////////////////////////////////////
@@ -124,9 +124,12 @@ var Node = exports["default"] = /*#__PURE__*/function () {
       new_data.label = this.label.build(new_data._core.label);
       new_data.size = this.rectangle.build(new_data._core.size);
       new_data.position = this.position.build(new_data._core.position);
-      new_data.border = this.stroke.build(new_data._core.border) || this.stroke.template();
       new_data.padding = this.padding.build(new_data._core.padding);
-      new_data.background = this.background.build(new_data._core.background);
+
+      // 枠線・背景(既定に入力の truthy な項目を重ねる)は model.deployment の nodeStyle
+      var style = (0, _model.nodeStyle)(new_data._core);
+      new_data.border = style.border;
+      new_data.background = style.background;
       data._node = new_data;
       return new_data;
     }

package/jest.config.js

@@ -10,6 +10,10 @@ module.exports = {
     // d3 v7 は ESM-only で CJS ランタイムの jest では読めないため、スタブにマップする
     moduleNameMapper: {
         '^d3$': '<rootDir>/tests/d3-stub.js',
+        // model.deployment は ESM のみを main にしている。jest 25 は package.json の exports を見ないので、
+        // CommonJS 版(model.deployment の build が dist/cjs/ に出す)へ直接マップする。
+        // model.deployment を先にビルドしておくこと(npm run build -w @yanqirenshi/model.deployment)。
+        '^@yanqirenshi/model.deployment$': '<rootDir>/../model.deployment/dist/cjs/index.js',
     },
     collectCoverageFrom: [
         "**/src/**/*.js",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.9.1",
+    "version": "0.11.0",
     "description": "Deployment diagram renderer (nestable nodes / edges / ports) — dragging a parent moves its whole subtree",
     "main": "dist/index.js",
     "directories": {
@@ -12,7 +12,8 @@
     },
     "dependencies": {
         "d3": "^7.9.0",
-        "@yanqirenshi/assh0le": "^0.5.0"
+        "@yanqirenshi/assh0le": "^0.5.0",
+        "@yanqirenshi/model.deployment": "^0.1.0"
     },
     "devDependencies": {
         "@babel/cli": "^7.12.17",