@yanqirenshi/d3.deployment 0.8.2 → 0.8.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/js/Rectum.js +0 -8
- package/dist/js/painters/Nodes.js +20 -17
- package/package.json +3 -3
package/dist/js/Rectum.js
CHANGED
|
@@ -88,14 +88,6 @@ var Rectum = exports["default"] = /*#__PURE__*/function (_Colon) {
|
|
|
88
88
|
value: function edge() {
|
|
89
89
|
return this._edge;
|
|
90
90
|
}
|
|
91
|
-
/* **************************** */
|
|
92
|
-
/* Overwrite Asshole function */
|
|
93
|
-
/* **************************** */
|
|
94
|
-
}, {
|
|
95
|
-
key: "selector_setAfter",
|
|
96
|
-
value: function selector_setAfter() {
|
|
97
|
-
this._painter.NODE.addFilterShadow(this.d3Element());
|
|
98
|
-
}
|
|
99
91
|
/* ******** */
|
|
100
92
|
/* DATA */
|
|
101
93
|
/* ******** */
|
|
@@ -18,25 +18,12 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
|
|
|
18
18
|
_classCallCheck(this, Nodes);
|
|
19
19
|
}
|
|
20
20
|
return _createClass(Nodes, [{
|
|
21
|
-
key: "
|
|
21
|
+
key: "drawGroup",
|
|
22
22
|
value:
|
|
23
23
|
///// ////////////////////////////////////////////////////////////////
|
|
24
|
-
///// Filter
|
|
25
|
-
///// ////////////////////////////////////////////////////////////////
|
|
26
|
-
function addFilterShadow(svg) {
|
|
27
|
-
var filter = svg.append("defs").append("filter").attr("id", "drop-shadow").attr("height", "130%");
|
|
28
|
-
filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 5).attr("result", "blur");
|
|
29
|
-
filter.append("feOffset").attr("in", "blur").attr("dx", 5).attr("dy", 5).attr("result", "offsetBlur");
|
|
30
|
-
var feMerge = filter.append("feMerge");
|
|
31
|
-
feMerge.append("feMergeNode").attr("in", "offsetBlur");
|
|
32
|
-
feMerge.append("feMergeNode").attr("in", "SourceGraphic");
|
|
33
|
-
}
|
|
34
|
-
///// ////////////////////////////////////////////////////////////////
|
|
35
24
|
///// Draw
|
|
36
25
|
///// ////////////////////////////////////////////////////////////////
|
|
37
|
-
|
|
38
|
-
key: "drawGroup",
|
|
39
|
-
value: function drawGroup(place, data, type) {
|
|
26
|
+
function drawGroup(place, data, type) {
|
|
40
27
|
var groups = place.selectAll('g.' + type).data([data], function (d) {
|
|
41
28
|
return d._id;
|
|
42
29
|
}).enter().append('g').attr('class', type).attr("transform", function (d) {
|
|
@@ -53,6 +40,23 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
|
|
|
53
40
|
});
|
|
54
41
|
return groups;
|
|
55
42
|
}
|
|
43
|
+
}, {
|
|
44
|
+
key: "drawShadow",
|
|
45
|
+
value: function drawShadow(groups) {
|
|
46
|
+
// 旧実装は feGaussianBlur フィルタ(url(#drop-shadow))によるシャドウ
|
|
47
|
+
// だったが、SVG フィルタはパン/ズーム/ドラッグのたびに対象領域の
|
|
48
|
+
// 再ラスタライズが走り、ノード数に比例して重くなる。
|
|
49
|
+
// ずらした半透明 rect の擬似シャドウに置き換える(通常の rect と同コスト)。
|
|
50
|
+
groups.append('rect').attr('class', 'node-shadow').attr('x', 5).attr('y', 5).attr('width', function (d) {
|
|
51
|
+
return d._size.w;
|
|
52
|
+
}).attr('height', function (d) {
|
|
53
|
+
return d._size.h;
|
|
54
|
+
}).attr('rx', function (d) {
|
|
55
|
+
return d.border && d.border.r || 0;
|
|
56
|
+
}).attr('ry', function (d) {
|
|
57
|
+
return d.border && d.border.r || 0;
|
|
58
|
+
}).attr('fill', '#000000').attr('fill-opacity', 0.15).attr('stroke', 'none');
|
|
59
|
+
}
|
|
56
60
|
}, {
|
|
57
61
|
key: "drawBody",
|
|
58
62
|
value: function drawBody(groups) {
|
|
@@ -70,8 +74,6 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
|
|
|
70
74
|
return d.border.color;
|
|
71
75
|
}).attr('stroke-width', function (d) {
|
|
72
76
|
return d.border.width;
|
|
73
|
-
}).style("filter", function (d) {
|
|
74
|
-
return d.type === 'NODE' ? 'url(#drop-shadow)' : '';
|
|
75
77
|
});
|
|
76
78
|
}
|
|
77
79
|
}, {
|
|
@@ -183,6 +185,7 @@ var Nodes = exports["default"] = /*#__PURE__*/function () {
|
|
|
183
185
|
key: "drawNode",
|
|
184
186
|
value: function drawNode(place, data) {
|
|
185
187
|
var groups = this.drawGroup(place, data, 'node');
|
|
188
|
+
this.drawShadow(groups, data);
|
|
186
189
|
this.drawBody(groups, data);
|
|
187
190
|
this.drawLabel(groups, data);
|
|
188
191
|
this.drawLink(groups, data);
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yanqirenshi/d3.deployment",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.4",
|
|
4
4
|
"description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"directories": {
|
|
7
7
|
"doc": "docs"
|
|
8
8
|
},
|
|
9
9
|
"peerDependencies": {
|
|
10
|
-
"react": "^18.
|
|
11
|
-
"react-dom": "^18.
|
|
10
|
+
"react": "^18.0.0 || ^19.0.0",
|
|
11
|
+
"react-dom": "^18.0.0 || ^19.0.0"
|
|
12
12
|
},
|
|
13
13
|
"dependencies": {
|
|
14
14
|
"d3": "^7.9.0",
|