@yanqirenshi/d3.deployment 0.9.1 → 0.10.0

package/README.markdown

@@ -5,7 +5,7 @@
 - ノードは `children` で入れ子にできます。宣言サイズより子が大きい場合は親が自動で広がります。
 - ノードはドラッグで移動でき、**親を動かすとサブツリーごと追従**します。
 - エッジの取り付け位置はポートの角度で指定します（0=真下・時計回り。90=左 / 180=真上 / 270=右）。
-- **このライブラリは描画のみを行います。** クリックはコールバックで通知するだけで、
+- **このライブラリは描画のみを行います。** クリックと右クリックはコールバックで通知するだけで、
   編集 UI は利用側が用意します（ショーケースではインスペクタ `@yanqirenshi/colonoscope` を繋いでいます）。
 
 ## インストール
@@ -33,8 +33,10 @@ 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) => {} },
+        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

@@ -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,6 +1,6 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.9.1",
+    "version": "0.10.0",
     "description": "Deployment diagram renderer (nestable nodes / edges / ports) — dragging a parent moves its whole subtree",
     "main": "dist/index.js",
     "directories": {