@lincle/react-web-base 0.4.0-next.3 → 0.4.0-next.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/components/Edges/index.js +17 -2
- package/dist/styles.g.css +10 -0
- package/package.json +4 -4
|
@@ -19,14 +19,29 @@ const dashClass = (dash) => {
|
|
|
19
19
|
return '';
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const Edges = ({ children, className: givenClassName = '', dash, style
|
|
22
|
+
const Edges = ({ children, className: givenClassName = '', dash, scale = 1, style: givenStyle, translate = {
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0
|
|
25
|
+
} }) => {
|
|
26
|
+
const style = (0, react_1.useMemo)(() => {
|
|
27
|
+
const tx = translate.x;
|
|
28
|
+
const ty = translate.y;
|
|
29
|
+
const tz = scale;
|
|
30
|
+
const transform = `translateX(${tx}px) translateY(${ty}px) scale(${tz})`;
|
|
31
|
+
return Object.assign(Object.assign({}, givenStyle), { transform, transformOrigin: 'top left' });
|
|
32
|
+
}, [
|
|
33
|
+
translate.x,
|
|
34
|
+
translate.y,
|
|
35
|
+
scale,
|
|
36
|
+
givenStyle
|
|
37
|
+
]);
|
|
23
38
|
const className = (0, react_1.useMemo)(() => {
|
|
24
39
|
return `lincle-base-edges ${givenClassName} ${dashClass(dash)}`;
|
|
25
40
|
}, [
|
|
26
41
|
dash,
|
|
27
42
|
givenClassName
|
|
28
43
|
]);
|
|
29
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: className, style: style, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)(Marker_1.default, {}) }), (0, jsx_runtime_1.jsx)(Paths_1.default, {})] }), children] }));
|
|
44
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("svg", { className: className, style: style, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)(Marker_1.default, {}) }), (0, jsx_runtime_1.jsx)(Paths_1.default, {})] }), (0, jsx_runtime_1.jsx)("div", { className: className, style: style, children: children })] }));
|
|
30
45
|
};
|
|
31
46
|
exports.Edges = Edges;
|
|
32
47
|
Edges.displayName = 'LincleEdges';
|
package/dist/styles.g.css
CHANGED
|
@@ -77,6 +77,16 @@
|
|
|
77
77
|
pointer-events: all;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
.lincle-interactive-drag + svg > path {
|
|
81
|
+
animation: lincle-interactive-dash 20s linear reverse infinite;
|
|
82
|
+
stroke-dasharray: 5 5;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.lincle-base-edge-path-border:hover + path {
|
|
86
|
+
animation: lincle-base-edgedash 1.5s linear reverse infinite;
|
|
87
|
+
stroke-dasharray: 5 5;
|
|
88
|
+
}
|
|
89
|
+
|
|
80
90
|
.lincle-base-edge-path-border:hover + .lincle-base-edge-path {
|
|
81
91
|
animation: lincle-base-edgedash 1.5s linear reverse infinite;
|
|
82
92
|
stroke-dasharray: 5 5;
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@lincle/react-web-base",
|
|
3
3
|
"title": "lincle react web base",
|
|
4
4
|
"license": "LGPL-3.0-or-later",
|
|
5
|
-
"version": "0.4.0-next.
|
|
5
|
+
"version": "0.4.0-next.4",
|
|
6
6
|
"private": false,
|
|
7
7
|
"description": "A 'reactive' React node and edge generator",
|
|
8
8
|
"author": "wallzero @wallzeroblog (http://wallzero.com)",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@digest/stylelint-config": "^4.4.3",
|
|
54
54
|
"@digest/typescript": "^4.4.3",
|
|
55
55
|
"@types/jest": "^29.5.12",
|
|
56
|
-
"@types/node": "^
|
|
56
|
+
"@types/node": "^22.0.0",
|
|
57
57
|
"@types/react": "^18.3.3",
|
|
58
58
|
"@types/react-dom": "^18.3.0",
|
|
59
59
|
"@types/react-test-renderer": "^18.3.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"rimraf": "^6.0.1"
|
|
69
69
|
},
|
|
70
70
|
"dependencies": {
|
|
71
|
-
"@lincle/react-shared": "^0.4.0-next.
|
|
71
|
+
"@lincle/react-shared": "^0.4.0-next.4"
|
|
72
72
|
},
|
|
73
73
|
"peerDependencies": {
|
|
74
74
|
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
|
|
@@ -89,5 +89,5 @@
|
|
|
89
89
|
"acyclical graph",
|
|
90
90
|
"cyclical graph"
|
|
91
91
|
],
|
|
92
|
-
"gitHead": "
|
|
92
|
+
"gitHead": "6bbaaf166913673c8990505ea8de66a0587ce372"
|
|
93
93
|
}
|