@yanqirenshi/d3.deployment 0.8.2 → 0.8.3

package/dist/js/Rectum.js

@@ -88,14 +88,6 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
     value: function edge() {
       return this._edge;
     }
-    /* **************************** */
-    /*  Overwrite Asshole function  */
-    /* **************************** */
-  }, {
-    key: "selector_setAfter",
-    value: function selector_setAfter() {
-      this._painter.NODE.addFilterShadow(this.d3Element());
-    }
     /* ******** */
     /*  DATA  */
     /* ******** */

package/dist/js/painters/Nodes.js

@@ -18,25 +18,12 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
     _classCallCheck(this, Nodes);
   }
   return _createClass(Nodes, [{
-    key: "addFilterShadow",
+    key: "drawGroup",
     value:
     ///// ////////////////////////////////////////////////////////////////
-    /////   Filter
-    ///// ////////////////////////////////////////////////////////////////
-    function addFilterShadow(svg) {
-      var filter = svg.append("defs").append("filter").attr("id", "drop-shadow").attr("height", "130%");
-      filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 5).attr("result", "blur");
-      filter.append("feOffset").attr("in", "blur").attr("dx", 5).attr("dy", 5).attr("result", "offsetBlur");
-      var feMerge = filter.append("feMerge");
-      feMerge.append("feMergeNode").attr("in", "offsetBlur");
-      feMerge.append("feMergeNode").attr("in", "SourceGraphic");
-    }
-    ///// ////////////////////////////////////////////////////////////////
     /////   Draw
     ///// ////////////////////////////////////////////////////////////////
-  }, {
-    key: "drawGroup",
-    value: function drawGroup(place, data, type) {
+    function drawGroup(place, data, type) {
       var groups = place.selectAll('g.' + type).data([data], function (d) {
         return d._id;
       }).enter().append('g').attr('class', type).attr("transform", function (d) {
@@ -53,6 +40,23 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
       });
       return groups;
     }
+  }, {
+    key: "drawShadow",
+    value: function drawShadow(groups) {
+      // 旧実装は feGaussianBlur フィルタ(url(#drop-shadow))によるシャドウ
+      // だったが、SVG フィルタはパン/ズーム/ドラッグのたびに対象領域の
+      // 再ラスタライズが走り、ノード数に比例して重くなる。
+      // ずらした半透明 rect の擬似シャドウに置き換える(通常の rect と同コスト)。
+      groups.append('rect').attr('class', 'node-shadow').attr('x', 5).attr('y', 5).attr('width', function (d) {
+        return d._size.w;
+      }).attr('height', function (d) {
+        return d._size.h;
+      }).attr('rx', function (d) {
+        return d.border && d.border.r || 0;
+      }).attr('ry', function (d) {
+        return d.border && d.border.r || 0;
+      }).attr('fill', '#000000').attr('fill-opacity', 0.15).attr('stroke', 'none');
+    }
   }, {
     key: "drawBody",
     value: function drawBody(groups) {
@@ -70,8 +74,6 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
         return d.border.color;
       }).attr('stroke-width', function (d) {
         return d.border.width;
-      }).style("filter", function (d) {
-        return d.type === 'NODE' ? 'url(#drop-shadow)' : '';
       });
     }
   }, {
@@ -183,6 +185,7 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
     key: "drawNode",
     value: function drawNode(place, data) {
       var groups = this.drawGroup(place, data, 'node');
+      this.drawShadow(groups, data);
       this.drawBody(groups, data);
       this.drawLabel(groups, data);
       this.drawLink(groups, data);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yanqirenshi/d3.deployment",
-    "version": "0.8.2",
+    "version": "0.8.3",
     "description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
     "main": "dist/index.js",
     "directories": {