@visualli/react 0.1.3 → 0.1.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/index.cjs +5 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +5 -2
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/KonvaEdge.tsx +6 -2
package/package.json
CHANGED
|
@@ -46,12 +46,14 @@ export interface KonvaEdgeProps {
|
|
|
46
46
|
|
|
47
47
|
const EDGE_SPACING = 25; // Increased spacing to ensure arrow head stays out of organic shapes
|
|
48
48
|
const STROKE_COLOR = '#000000';
|
|
49
|
+
const STROKE_COLOR_DARK = '#ffffff';
|
|
49
50
|
const STROKE_WIDTH = 2.5;
|
|
50
51
|
|
|
51
52
|
const KonvaEdge = memo(function KonvaEdge({
|
|
52
53
|
sourceNode: from,
|
|
53
54
|
targetNode: to,
|
|
54
55
|
connection,
|
|
56
|
+
isDark = false,
|
|
55
57
|
zoomLevel = 1.0,
|
|
56
58
|
}: KonvaEdgeProps) {
|
|
57
59
|
const label = (connection as { label?: string } | undefined)?.label;
|
|
@@ -194,11 +196,13 @@ const KonvaEdge = memo(function KonvaEdge({
|
|
|
194
196
|
}, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
|
|
195
197
|
|
|
196
198
|
// ── Render ────────────────────────────────────────────────────────────────
|
|
199
|
+
const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
|
|
200
|
+
|
|
197
201
|
return (
|
|
198
202
|
<Group>
|
|
199
203
|
<Line
|
|
200
204
|
points={points}
|
|
201
|
-
stroke={
|
|
205
|
+
stroke={strokeColor}
|
|
202
206
|
strokeWidth={STROKE_WIDTH}
|
|
203
207
|
tension={0}
|
|
204
208
|
opacity={0.9}
|
|
@@ -209,7 +213,7 @@ const KonvaEdge = memo(function KonvaEdge({
|
|
|
209
213
|
/>
|
|
210
214
|
<Line
|
|
211
215
|
points={arrowHeadPoints}
|
|
212
|
-
stroke={
|
|
216
|
+
stroke={strokeColor}
|
|
213
217
|
strokeWidth={STROKE_WIDTH}
|
|
214
218
|
lineCap="round"
|
|
215
219
|
lineJoin="round"
|