@yanqirenshi/d3.deployment 0.10.0 → 0.11.0

package/README.markdown

@@ -4,6 +4,9 @@
 
 - ノードは `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` を繋いでいます）。
@@ -35,7 +38,9 @@ export default function Graph({ data }) {
         // 描画は行わず通知のみ。core は入力データそのもの
         // contextmenu は右クリック。引数は click と同じで、最後に event(MouseEvent)。
         // 渡したときだけブラウザ標準のメニューを止める。ドラッグ中は呼ばれない
-        node: { click: (core, node) => {}, contextmenu: (core, node, event) => {} },
+        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) => {} },
       },
     });

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,7 @@ 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 のコールバックを呼ぶ。
  *
@@ -88,7 +89,9 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
       return {
         node: {
           click: node.click || null,
-          contextmenu: node.contextmenu || null
+          contextmenu: node.contextmenu || null,
+          // ドラッグの終わり(動いたときだけ)。(core, node, move) を渡す
+          dragend: node.dragend || null
         },
         edge: {
           click: edge.click || null,
@@ -269,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;
     }
   }, {
@@ -552,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.10.0",
+    "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",