@yanqirenshi/d3.deployment 0.3.1 → 0.4.1
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/components/D3Deployment.js +3 -11
- package/dist/index.js +4 -13
- package/dist/js/Rectum.js +91 -166
- package/dist/js/datamodels/Edge.js +73 -0
- package/dist/js/datamodels/Node.js +132 -0
- package/dist/js/datamodels/Port.js +40 -0
- package/dist/js/painters/Edges.js +54 -0
- package/dist/js/{Node.js → painters/Nodes.js} +20 -136
- package/dist/js/painters/Ports.js +40 -0
- package/jest.config.js +18 -0
- package/package.json +46 -40
- package/tests/Rectum.test.js +18 -0
- package/tests/d3-stub.js +4 -0
- package/dist/js/Core.js +0 -463
- package/dist/js/Edge.js +0 -119
- package/dist/js/Port.js +0 -64
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _assh0le = require("@yanqirenshi/assh0le");
|
|
8
|
+
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); }
|
|
9
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
10
|
+
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); } }
|
|
11
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
12
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
13
|
+
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); }
|
|
14
|
+
/**
|
|
15
|
+
* Node のデータクラス。入力データの正規化(既定値補完)と幾何情報の提供を行う。
|
|
16
|
+
* 描画は painters/Nodes.js が担当する。
|
|
17
|
+
*/
|
|
18
|
+
var Node = exports["default"] = /*#__PURE__*/function () {
|
|
19
|
+
function Node() {
|
|
20
|
+
_classCallCheck(this, Node);
|
|
21
|
+
this.label = new _assh0le.Label();
|
|
22
|
+
this.rectangle = new _assh0le.Rectangle();
|
|
23
|
+
this.position = new _assh0le.Position();
|
|
24
|
+
this.stroke = new _assh0le.Stroke();
|
|
25
|
+
this.background = new _assh0le.Background();
|
|
26
|
+
this.padding = new _assh0le.Padding();
|
|
27
|
+
}
|
|
28
|
+
///// ////////////////////////////////////////////////////////////////
|
|
29
|
+
///// Utility
|
|
30
|
+
///// ////////////////////////////////////////////////////////////////
|
|
31
|
+
return _createClass(Node, [{
|
|
32
|
+
key: "getFourSides",
|
|
33
|
+
value: function getFourSides(data) {
|
|
34
|
+
var port_r = 4;
|
|
35
|
+
var margin = 4 + port_r;
|
|
36
|
+
var x = data._position.x;
|
|
37
|
+
var y = data._position.y;
|
|
38
|
+
var w = data._size.w;
|
|
39
|
+
var h = data._size.h;
|
|
40
|
+
var top_left = {
|
|
41
|
+
x: x - margin,
|
|
42
|
+
y: y - margin
|
|
43
|
+
};
|
|
44
|
+
var top_right = {
|
|
45
|
+
x: x + w + margin,
|
|
46
|
+
y: y - margin
|
|
47
|
+
};
|
|
48
|
+
var bottom_rigth = {
|
|
49
|
+
x: x + w + margin,
|
|
50
|
+
y: y + h + margin
|
|
51
|
+
};
|
|
52
|
+
var bottom_left = {
|
|
53
|
+
x: x - margin,
|
|
54
|
+
y: y + h + margin
|
|
55
|
+
};
|
|
56
|
+
return [{
|
|
57
|
+
from: top_left,
|
|
58
|
+
to: top_right
|
|
59
|
+
}, {
|
|
60
|
+
from: top_right,
|
|
61
|
+
to: bottom_rigth
|
|
62
|
+
}, {
|
|
63
|
+
from: bottom_rigth,
|
|
64
|
+
to: bottom_left
|
|
65
|
+
}, {
|
|
66
|
+
from: bottom_left,
|
|
67
|
+
to: top_left
|
|
68
|
+
}];
|
|
69
|
+
}
|
|
70
|
+
///// ////////////////////////////////////////////////////////////////
|
|
71
|
+
///// Adjust
|
|
72
|
+
///// ////////////////////////////////////////////////////////////////
|
|
73
|
+
}, {
|
|
74
|
+
key: "dataTemplate",
|
|
75
|
+
value: function dataTemplate() {
|
|
76
|
+
return {
|
|
77
|
+
type: '',
|
|
78
|
+
label: {
|
|
79
|
+
contents: '',
|
|
80
|
+
position: {
|
|
81
|
+
x: 20,
|
|
82
|
+
y: 20
|
|
83
|
+
},
|
|
84
|
+
font: {
|
|
85
|
+
size: 16,
|
|
86
|
+
color: '#333333'
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
position: null,
|
|
90
|
+
size: null,
|
|
91
|
+
background: null,
|
|
92
|
+
border: null,
|
|
93
|
+
link: null,
|
|
94
|
+
children: [],
|
|
95
|
+
_id: null,
|
|
96
|
+
_core: null,
|
|
97
|
+
_class: 'NODE'
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
}, {
|
|
101
|
+
key: "normalizeBase",
|
|
102
|
+
value: function normalizeBase(data) {
|
|
103
|
+
var core = data._core;
|
|
104
|
+
if (core.id || core.id === 0) data._id = core.id;
|
|
105
|
+
if (core.type) data.type = core.type;
|
|
106
|
+
if (core.link) data.link = core.link;else data.link = {
|
|
107
|
+
url: null
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
}, {
|
|
111
|
+
key: "normalize",
|
|
112
|
+
value: function normalize(data) {
|
|
113
|
+
var _this = this;
|
|
114
|
+
if (!data) return null;
|
|
115
|
+
var new_data = this.dataTemplate();
|
|
116
|
+
new_data._core = data;
|
|
117
|
+
var children = data.children;
|
|
118
|
+
if (children && children.length > 0) new_data.children = children.map(function (child) {
|
|
119
|
+
return _this.normalize(child);
|
|
120
|
+
});
|
|
121
|
+
this.normalizeBase(new_data);
|
|
122
|
+
new_data.label = this.label.build(new_data._core.label);
|
|
123
|
+
new_data.size = this.rectangle.build(new_data._core.size);
|
|
124
|
+
new_data.position = this.position.build(new_data._core.position);
|
|
125
|
+
new_data.border = this.stroke.build(new_data._core.border) || this.stroke.template();
|
|
126
|
+
new_data.padding = this.padding.build(new_data._core.padding);
|
|
127
|
+
new_data.background = this.background.build(new_data._core.background);
|
|
128
|
+
data._node = new_data;
|
|
129
|
+
return new_data;
|
|
130
|
+
}
|
|
131
|
+
}]);
|
|
132
|
+
}();
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
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); }
|
|
8
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
9
|
+
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); } }
|
|
10
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
12
|
+
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); }
|
|
13
|
+
/**
|
|
14
|
+
* Port のデータクラス。入力データの正規化を行う。
|
|
15
|
+
* 描画は painters/Ports.js が担当する。
|
|
16
|
+
*/
|
|
17
|
+
var Port = exports["default"] = /*#__PURE__*/function () {
|
|
18
|
+
function Port() {
|
|
19
|
+
_classCallCheck(this, Port);
|
|
20
|
+
}
|
|
21
|
+
return _createClass(Port, [{
|
|
22
|
+
key: "dataTemplate",
|
|
23
|
+
value: function dataTemplate() {
|
|
24
|
+
return {
|
|
25
|
+
node: null,
|
|
26
|
+
edge: null,
|
|
27
|
+
_id: null,
|
|
28
|
+
_core: null,
|
|
29
|
+
_class: 'PORT'
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
}, {
|
|
33
|
+
key: "normalize",
|
|
34
|
+
value: function normalize(data) {
|
|
35
|
+
var tmp = this.dataTemplate();
|
|
36
|
+
tmp._core = data;
|
|
37
|
+
return data;
|
|
38
|
+
}
|
|
39
|
+
}]);
|
|
40
|
+
}();
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var d3 = _interopRequireWildcard(require("d3"));
|
|
8
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
9
|
+
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); }
|
|
10
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
11
|
+
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); } }
|
|
12
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
14
|
+
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); }
|
|
15
|
+
/**
|
|
16
|
+
* Edge の描画クラス。正規化済みデータ(datamodels/Edge.js の出力)を SVG path で描画する。
|
|
17
|
+
*/
|
|
18
|
+
var Edges = exports["default"] = /*#__PURE__*/function () {
|
|
19
|
+
function Edges() {
|
|
20
|
+
_classCallCheck(this, Edges);
|
|
21
|
+
}
|
|
22
|
+
return _createClass(Edges, [{
|
|
23
|
+
key: "draw",
|
|
24
|
+
value: function draw(place, data) {
|
|
25
|
+
var lineData = [{
|
|
26
|
+
"x": data.from.position.x,
|
|
27
|
+
"y": data.from.position.y,
|
|
28
|
+
stroke: data.stroke
|
|
29
|
+
}, {
|
|
30
|
+
"x": data.to.position.x,
|
|
31
|
+
"y": data.to.position.y
|
|
32
|
+
}];
|
|
33
|
+
var lineFunction = d3.line().x(function (d) {
|
|
34
|
+
return d.x;
|
|
35
|
+
}).y(function (d) {
|
|
36
|
+
return d.y;
|
|
37
|
+
});
|
|
38
|
+
var path = place.append("path").datum(lineData).attr("fill", "none").attr("d", lineFunction).attr('marker-end', function (d) {
|
|
39
|
+
if (!d[0].stroke.marker || d[0].stroke.marker.end) return "url(#edge-arrow)";
|
|
40
|
+
return null;
|
|
41
|
+
}).style('stroke-linecap', 'round').style('fill', function (d) {
|
|
42
|
+
return d[0].stroke.color;
|
|
43
|
+
}).style("stroke", function (d) {
|
|
44
|
+
return d[0].stroke.color;
|
|
45
|
+
}).style("stroke-width", function (d) {
|
|
46
|
+
return d[0].stroke.width;
|
|
47
|
+
});
|
|
48
|
+
var len = path.node().getTotalLength();
|
|
49
|
+
var margin = 12;
|
|
50
|
+
var t = len - margin * 2;
|
|
51
|
+
path.attr('stroke-dasharray', "0 ".concat(margin, " ").concat(t, " ").concat(margin)).attr('stroke-dashoffset', 0);
|
|
52
|
+
}
|
|
53
|
+
}]);
|
|
54
|
+
}();
|
|
@@ -4,147 +4,36 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
function
|
|
11
|
-
|
|
12
|
-
function
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
function
|
|
18
|
-
_classCallCheck(this,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
this.stroke = new _assh0le.Stroke();
|
|
24
|
-
this.background = new _assh0le.Background();
|
|
25
|
-
this.padding = new _assh0le.Padding();
|
|
26
|
-
} ///// ////////////////////////////////////////////////////////////////
|
|
27
|
-
///// Utility
|
|
28
|
-
///// ////////////////////////////////////////////////////////////////
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
_createClass(Node, [{
|
|
32
|
-
key: "getFourSides",
|
|
33
|
-
value: function getFourSides(data) {
|
|
34
|
-
var port_r = 4;
|
|
35
|
-
var margin = 4 + port_r;
|
|
36
|
-
var x = data._position.x;
|
|
37
|
-
var y = data._position.y;
|
|
38
|
-
var w = data._size.w;
|
|
39
|
-
var h = data._size.h;
|
|
40
|
-
var top_left = {
|
|
41
|
-
x: x - margin,
|
|
42
|
-
y: y - margin
|
|
43
|
-
};
|
|
44
|
-
var top_right = {
|
|
45
|
-
x: x + w + margin,
|
|
46
|
-
y: y - margin
|
|
47
|
-
};
|
|
48
|
-
var bottom_rigth = {
|
|
49
|
-
x: x + w + margin,
|
|
50
|
-
y: y + h + margin
|
|
51
|
-
};
|
|
52
|
-
var bottom_left = {
|
|
53
|
-
x: x - margin,
|
|
54
|
-
y: y + h + margin
|
|
55
|
-
};
|
|
56
|
-
return [{
|
|
57
|
-
from: top_left,
|
|
58
|
-
to: top_right
|
|
59
|
-
}, {
|
|
60
|
-
from: top_right,
|
|
61
|
-
to: bottom_rigth
|
|
62
|
-
}, {
|
|
63
|
-
from: bottom_rigth,
|
|
64
|
-
to: bottom_left
|
|
65
|
-
}, {
|
|
66
|
-
from: bottom_left,
|
|
67
|
-
to: top_left
|
|
68
|
-
}];
|
|
69
|
-
} ///// ////////////////////////////////////////////////////////////////
|
|
70
|
-
///// Adjust
|
|
7
|
+
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); }
|
|
8
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
9
|
+
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); } }
|
|
10
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
12
|
+
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); }
|
|
13
|
+
/**
|
|
14
|
+
* Node の描画クラス。正規化済みデータ(datamodels/Node.js の出力)を SVG に描画する。
|
|
15
|
+
*/
|
|
16
|
+
var Nodes = exports["default"] = /*#__PURE__*/function () {
|
|
17
|
+
function Nodes() {
|
|
18
|
+
_classCallCheck(this, Nodes);
|
|
19
|
+
}
|
|
20
|
+
return _createClass(Nodes, [{
|
|
21
|
+
key: "addFilterShadow",
|
|
22
|
+
value:
|
|
71
23
|
///// ////////////////////////////////////////////////////////////////
|
|
72
|
-
|
|
73
|
-
}, {
|
|
74
|
-
key: "dataTemplate",
|
|
75
|
-
value: function dataTemplate() {
|
|
76
|
-
return {
|
|
77
|
-
type: '',
|
|
78
|
-
label: {
|
|
79
|
-
contents: '',
|
|
80
|
-
position: {
|
|
81
|
-
x: 20,
|
|
82
|
-
y: 20
|
|
83
|
-
},
|
|
84
|
-
font: {
|
|
85
|
-
size: 16,
|
|
86
|
-
color: '#333333'
|
|
87
|
-
}
|
|
88
|
-
},
|
|
89
|
-
position: null,
|
|
90
|
-
size: null,
|
|
91
|
-
background: null,
|
|
92
|
-
border: null,
|
|
93
|
-
link: null,
|
|
94
|
-
children: [],
|
|
95
|
-
_id: null,
|
|
96
|
-
_core: null,
|
|
97
|
-
_class: 'NODE'
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
}, {
|
|
101
|
-
key: "normalizeBase",
|
|
102
|
-
value: function normalizeBase(data) {
|
|
103
|
-
var core = data._core;
|
|
104
|
-
if (core.id || core.id === 0) data._id = core.id;
|
|
105
|
-
if (core.type) data.type = core.type;
|
|
106
|
-
if (core.link) data.link = core.link;else data.link = {
|
|
107
|
-
url: null
|
|
108
|
-
};
|
|
109
|
-
}
|
|
110
|
-
}, {
|
|
111
|
-
key: "normalize",
|
|
112
|
-
value: function normalize(data) {
|
|
113
|
-
var _this = this;
|
|
114
|
-
|
|
115
|
-
if (!data) return null;
|
|
116
|
-
var new_data = this.dataTemplate();
|
|
117
|
-
new_data._core = data;
|
|
118
|
-
var children = data.children;
|
|
119
|
-
if (children && children.length > 0) new_data.children = children.map(function (child) {
|
|
120
|
-
return _this.normalize(child);
|
|
121
|
-
});
|
|
122
|
-
this.normalizeBase(new_data);
|
|
123
|
-
new_data.label = this.label.build(new_data._core.label);
|
|
124
|
-
new_data.size = this.rectangle.build(new_data._core.size);
|
|
125
|
-
new_data.position = this.position.build(new_data._core.position);
|
|
126
|
-
new_data.border = this.stroke.build(new_data._core.border) || this.stroke.template();
|
|
127
|
-
new_data.padding = this.padding.build(new_data._core.padding);
|
|
128
|
-
new_data.background = this.background.build(new_data._core.background);
|
|
129
|
-
data._node = new_data;
|
|
130
|
-
return new_data;
|
|
131
|
-
} ///// ////////////////////////////////////////////////////////////////
|
|
132
24
|
///// Filter
|
|
133
25
|
///// ////////////////////////////////////////////////////////////////
|
|
134
|
-
|
|
135
|
-
}, {
|
|
136
|
-
key: "addFilterShadow",
|
|
137
|
-
value: function addFilterShadow(svg) {
|
|
26
|
+
function addFilterShadow(svg) {
|
|
138
27
|
var filter = svg.append("defs").append("filter").attr("id", "drop-shadow").attr("height", "130%");
|
|
139
28
|
filter.append("feGaussianBlur").attr("in", "SourceAlpha").attr("stdDeviation", 5).attr("result", "blur");
|
|
140
29
|
filter.append("feOffset").attr("in", "blur").attr("dx", 5).attr("dy", 5).attr("result", "offsetBlur");
|
|
141
30
|
var feMerge = filter.append("feMerge");
|
|
142
31
|
feMerge.append("feMergeNode").attr("in", "offsetBlur");
|
|
143
32
|
feMerge.append("feMergeNode").attr("in", "SourceGraphic");
|
|
144
|
-
}
|
|
33
|
+
}
|
|
34
|
+
///// ////////////////////////////////////////////////////////////////
|
|
145
35
|
///// Draw
|
|
146
36
|
///// ////////////////////////////////////////////////////////////////
|
|
147
|
-
|
|
148
37
|
}, {
|
|
149
38
|
key: "drawGroup",
|
|
150
39
|
value: function drawGroup(place, data, type) {
|
|
@@ -293,15 +182,10 @@ var Node = /*#__PURE__*/function () {
|
|
|
293
182
|
this.drawNode(place, data);
|
|
294
183
|
return;
|
|
295
184
|
}
|
|
296
|
-
|
|
297
185
|
if (data.type === 'COMPONENT') {
|
|
298
186
|
this.drawComponent(place, data);
|
|
299
187
|
return;
|
|
300
188
|
}
|
|
301
189
|
}
|
|
302
190
|
}]);
|
|
303
|
-
|
|
304
|
-
return Node;
|
|
305
|
-
}();
|
|
306
|
-
|
|
307
|
-
exports["default"] = Node;
|
|
191
|
+
}();
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
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); }
|
|
8
|
+
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
|
|
9
|
+
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); } }
|
|
10
|
+
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
|
|
11
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
12
|
+
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); }
|
|
13
|
+
/**
|
|
14
|
+
* Port の描画クラス。エッジ端点の円マーカーを描画する。
|
|
15
|
+
*/
|
|
16
|
+
var Ports = exports["default"] = /*#__PURE__*/function () {
|
|
17
|
+
function Ports() {
|
|
18
|
+
_classCallCheck(this, Ports);
|
|
19
|
+
}
|
|
20
|
+
return _createClass(Ports, [{
|
|
21
|
+
key: "draw",
|
|
22
|
+
value: function draw(place, data) {
|
|
23
|
+
place.selectAll('circle.port').data([data], function (d) {
|
|
24
|
+
return d._id;
|
|
25
|
+
}).enter().append('circle').attr('class', 'port').attr('cx', function (d) {
|
|
26
|
+
return d.position.x;
|
|
27
|
+
}).attr('cy', function (d) {
|
|
28
|
+
return d.position.y;
|
|
29
|
+
}).attr('r', function (d) {
|
|
30
|
+
return 6;
|
|
31
|
+
}).attr('level', function (d) {
|
|
32
|
+
return d._level;
|
|
33
|
+
}).style('fill', function (d) {
|
|
34
|
+
return '#fff';
|
|
35
|
+
}).style("stroke", function (d) {
|
|
36
|
+
return '#888';
|
|
37
|
+
});
|
|
38
|
+
}
|
|
39
|
+
}]);
|
|
40
|
+
}();
|
package/jest.config.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
// テストファイルは tests ディレクトリに指定
|
|
3
|
+
testMatch: [
|
|
4
|
+
"**/tests/**/?(*.)+(spec|test).[tj]s?(x)"
|
|
5
|
+
],
|
|
6
|
+
// monorepo では babel-jest がルートに hoist されるため名前解決に任せる
|
|
7
|
+
transform: {
|
|
8
|
+
"^.+\\.js$": 'babel-jest',
|
|
9
|
+
},
|
|
10
|
+
// d3 v7 は ESM-only で CJS ランタイムの jest では読めないため、スタブにマップする
|
|
11
|
+
moduleNameMapper: {
|
|
12
|
+
'^d3$': '<rootDir>/tests/d3-stub.js',
|
|
13
|
+
},
|
|
14
|
+
collectCoverageFrom: [
|
|
15
|
+
"**/src/**/*.js",
|
|
16
|
+
"!**/node_modules/**",
|
|
17
|
+
],
|
|
18
|
+
};
|
package/package.json
CHANGED
|
@@ -1,40 +1,46 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@yanqirenshi/d3.deployment",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"directories": {
|
|
7
|
-
"doc": "docs",
|
|
8
|
-
"example": "example"
|
|
9
|
-
},
|
|
10
|
-
"peerDependencies": {
|
|
11
|
-
"react": "^18.2.0",
|
|
12
|
-
"react-dom": "^18.2.0"
|
|
13
|
-
},
|
|
14
|
-
"dependencies": {
|
|
15
|
-
"
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
"@babel/
|
|
20
|
-
"@babel/
|
|
21
|
-
"@babel/preset-
|
|
22
|
-
"@
|
|
23
|
-
"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
"
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
"
|
|
40
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "@yanqirenshi/d3.deployment",
|
|
3
|
+
"version": "0.4.1",
|
|
4
|
+
"description": "See [Documents](https://yanqirenshi.github.io/D3.Deployment/)",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"directories": {
|
|
7
|
+
"doc": "docs",
|
|
8
|
+
"example": "example"
|
|
9
|
+
},
|
|
10
|
+
"peerDependencies": {
|
|
11
|
+
"react": "^18.2.0",
|
|
12
|
+
"react-dom": "^18.2.0"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"d3": "^7.9.0",
|
|
16
|
+
"@yanqirenshi/assh0le": "^0.5.0"
|
|
17
|
+
},
|
|
18
|
+
"devDependencies": {
|
|
19
|
+
"@babel/cli": "^7.12.17",
|
|
20
|
+
"@babel/core": "^7.12.17",
|
|
21
|
+
"@babel/preset-env": "^7.12.17",
|
|
22
|
+
"@babel/preset-react": "^7.12.13",
|
|
23
|
+
"@yanqirenshi/d3.deployment": "file:react",
|
|
24
|
+
"babel-loader": "^8.2.2",
|
|
25
|
+
"jest": "^25.2.4",
|
|
26
|
+
"babel-jest": "^25.2.4"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"test": "jest",
|
|
30
|
+
"transpile": "babel src -d dist --copy-files",
|
|
31
|
+
"prepublishOnly": "npm run transpile"
|
|
32
|
+
},
|
|
33
|
+
"repository": {
|
|
34
|
+
"type": "git",
|
|
35
|
+
"url": "git+https://github.com/yanqirenshi/D3.Deployment.git"
|
|
36
|
+
},
|
|
37
|
+
"author": "yanqirenshi@gmail.com",
|
|
38
|
+
"license": "MIT",
|
|
39
|
+
"bugs": {
|
|
40
|
+
"url": "https://github.com/yanqirenshi/D3.Deployment/issues"
|
|
41
|
+
},
|
|
42
|
+
"homepage": "https://github.com/yanqirenshi/D3.Deployment#readme",
|
|
43
|
+
"publishConfig": {
|
|
44
|
+
"access": "public"
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import Rectum from '../src/js/Rectum.js';
|
|
2
|
+
|
|
3
|
+
// makePortLine は共有版 Geometry.getPortLine + node 位置オフセットで構築される。
|
|
4
|
+
// 200×100 の node / degree=90: 中心 {100,50}、回転後の終点 {-223,0} → {-123,50}。
|
|
5
|
+
// 位置オフセット {10,20} を足して from {110,70} / to {-113,70}。
|
|
6
|
+
test('makePortLine builds the center-to-port line offset by the node position', () => {
|
|
7
|
+
const rectum = new Rectum({});
|
|
8
|
+
|
|
9
|
+
const node = {
|
|
10
|
+
_size: { w: 200, h: 100 },
|
|
11
|
+
_position: { x: 10, y: 20 },
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
expect(rectum.makePortLine(90, node)).toEqual({
|
|
15
|
+
from: { x: 110, y: 70 },
|
|
16
|
+
to: { x: -113, y: 70 },
|
|
17
|
+
});
|
|
18
|
+
});
|
package/tests/d3-stub.js
ADDED