@visualli/react 0.1.2 → 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 +10 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +10 -7
- package/dist/index.js.map +1 -1
- package/package.json +4 -2
- package/src/VisualliCanvas.tsx +14 -14
- package/src/components/KonvaEdge.tsx +6 -2
package/dist/index.js
CHANGED
|
@@ -1233,11 +1233,13 @@ function getEllipseIntersection(cx, cy, rx, ry, angle) {
|
|
|
1233
1233
|
}
|
|
1234
1234
|
var EDGE_SPACING = 25;
|
|
1235
1235
|
var STROKE_COLOR = "#000000";
|
|
1236
|
+
var STROKE_COLOR_DARK = "#ffffff";
|
|
1236
1237
|
var STROKE_WIDTH = 2.5;
|
|
1237
1238
|
var KonvaEdge = memo(function KonvaEdge2({
|
|
1238
1239
|
sourceNode: from,
|
|
1239
1240
|
targetNode: to,
|
|
1240
1241
|
connection,
|
|
1242
|
+
isDark = false,
|
|
1241
1243
|
zoomLevel = 1
|
|
1242
1244
|
}) {
|
|
1243
1245
|
const label = connection?.label;
|
|
@@ -1356,12 +1358,13 @@ var KonvaEdge = memo(function KonvaEdge2({
|
|
|
1356
1358
|
}
|
|
1357
1359
|
return { pathData: d, fontSize: scaledFontSize };
|
|
1358
1360
|
}, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
|
|
1361
|
+
const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
|
|
1359
1362
|
return /* @__PURE__ */ jsxs2(KGroup, { children: [
|
|
1360
1363
|
/* @__PURE__ */ jsx4(
|
|
1361
1364
|
KLine,
|
|
1362
1365
|
{
|
|
1363
1366
|
points,
|
|
1364
|
-
stroke:
|
|
1367
|
+
stroke: strokeColor,
|
|
1365
1368
|
strokeWidth: STROKE_WIDTH,
|
|
1366
1369
|
tension: 0,
|
|
1367
1370
|
opacity: 0.9,
|
|
@@ -1375,7 +1378,7 @@ var KonvaEdge = memo(function KonvaEdge2({
|
|
|
1375
1378
|
KLine,
|
|
1376
1379
|
{
|
|
1377
1380
|
points: arrowHeadPoints,
|
|
1378
|
-
stroke:
|
|
1381
|
+
stroke: strokeColor,
|
|
1379
1382
|
strokeWidth: STROKE_WIDTH,
|
|
1380
1383
|
lineCap: "round",
|
|
1381
1384
|
lineJoin: "round",
|
|
@@ -2149,11 +2152,6 @@ function VisualliCanvas(props) {
|
|
|
2149
2152
|
return { flatNodes: [], connections: [], containers: [] };
|
|
2150
2153
|
}
|
|
2151
2154
|
}, [doc, currentLayerId]);
|
|
2152
|
-
const setNodes = useNodeStore((s) => s.setNodes);
|
|
2153
|
-
const nodes = useNodeStore((s) => s.nodes);
|
|
2154
|
-
const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
|
|
2155
|
-
const setCenter = useViewportStore((s) => s.setCenter);
|
|
2156
|
-
const setZoom = useViewportStore((s) => s.setZoom);
|
|
2157
2155
|
const viewport = useViewportStore((s) => ({
|
|
2158
2156
|
centerX: s.centerX,
|
|
2159
2157
|
centerY: s.centerY,
|
|
@@ -2161,6 +2159,11 @@ function VisualliCanvas(props) {
|
|
|
2161
2159
|
canvasWidth: s.canvasWidth,
|
|
2162
2160
|
canvasHeight: s.canvasHeight
|
|
2163
2161
|
}));
|
|
2162
|
+
const setCenter = useViewportStore((s) => s.setCenter);
|
|
2163
|
+
const setZoom = useViewportStore((s) => s.setZoom);
|
|
2164
|
+
const nodes = useNodeStore((s) => s.nodes);
|
|
2165
|
+
const setNodes = useNodeStore((s) => s.setNodes);
|
|
2166
|
+
const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
|
|
2164
2167
|
const clearSel = useSelectionStore((s) => s.clear);
|
|
2165
2168
|
const select = useSelectionStore((s) => s.select);
|
|
2166
2169
|
useEffect6(() => {
|