@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.cjs
CHANGED
|
@@ -1251,11 +1251,13 @@ function getEllipseIntersection(cx, cy, rx, ry, angle) {
|
|
|
1251
1251
|
}
|
|
1252
1252
|
var EDGE_SPACING = 25;
|
|
1253
1253
|
var STROKE_COLOR = "#000000";
|
|
1254
|
+
var STROKE_COLOR_DARK = "#ffffff";
|
|
1254
1255
|
var STROKE_WIDTH = 2.5;
|
|
1255
1256
|
var KonvaEdge = (0, import_react7.memo)(function KonvaEdge2({
|
|
1256
1257
|
sourceNode: from,
|
|
1257
1258
|
targetNode: to,
|
|
1258
1259
|
connection,
|
|
1260
|
+
isDark = false,
|
|
1259
1261
|
zoomLevel = 1
|
|
1260
1262
|
}) {
|
|
1261
1263
|
const label = connection?.label;
|
|
@@ -1374,12 +1376,13 @@ var KonvaEdge = (0, import_react7.memo)(function KonvaEdge2({
|
|
|
1374
1376
|
}
|
|
1375
1377
|
return { pathData: d, fontSize: scaledFontSize };
|
|
1376
1378
|
}, [from.x, from.y, from.width, from.branchCount, to.x, to.y, to.width, to.branchCount, label, zoomLevel]);
|
|
1379
|
+
const strokeColor = isDark ? STROKE_COLOR_DARK : STROKE_COLOR;
|
|
1377
1380
|
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(KGroup, { children: [
|
|
1378
1381
|
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
1379
1382
|
KLine,
|
|
1380
1383
|
{
|
|
1381
1384
|
points,
|
|
1382
|
-
stroke:
|
|
1385
|
+
stroke: strokeColor,
|
|
1383
1386
|
strokeWidth: STROKE_WIDTH,
|
|
1384
1387
|
tension: 0,
|
|
1385
1388
|
opacity: 0.9,
|
|
@@ -1393,7 +1396,7 @@ var KonvaEdge = (0, import_react7.memo)(function KonvaEdge2({
|
|
|
1393
1396
|
KLine,
|
|
1394
1397
|
{
|
|
1395
1398
|
points: arrowHeadPoints,
|
|
1396
|
-
stroke:
|
|
1399
|
+
stroke: strokeColor,
|
|
1397
1400
|
strokeWidth: STROKE_WIDTH,
|
|
1398
1401
|
lineCap: "round",
|
|
1399
1402
|
lineJoin: "round",
|
|
@@ -2167,11 +2170,6 @@ function VisualliCanvas(props) {
|
|
|
2167
2170
|
return { flatNodes: [], connections: [], containers: [] };
|
|
2168
2171
|
}
|
|
2169
2172
|
}, [doc, currentLayerId]);
|
|
2170
|
-
const setNodes = useNodeStore((s) => s.setNodes);
|
|
2171
|
-
const nodes = useNodeStore((s) => s.nodes);
|
|
2172
|
-
const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
|
|
2173
|
-
const setCenter = useViewportStore((s) => s.setCenter);
|
|
2174
|
-
const setZoom = useViewportStore((s) => s.setZoom);
|
|
2175
2173
|
const viewport = useViewportStore((s) => ({
|
|
2176
2174
|
centerX: s.centerX,
|
|
2177
2175
|
centerY: s.centerY,
|
|
@@ -2179,6 +2177,11 @@ function VisualliCanvas(props) {
|
|
|
2179
2177
|
canvasWidth: s.canvasWidth,
|
|
2180
2178
|
canvasHeight: s.canvasHeight
|
|
2181
2179
|
}));
|
|
2180
|
+
const setCenter = useViewportStore((s) => s.setCenter);
|
|
2181
|
+
const setZoom = useViewportStore((s) => s.setZoom);
|
|
2182
|
+
const nodes = useNodeStore((s) => s.nodes);
|
|
2183
|
+
const setNodes = useNodeStore((s) => s.setNodes);
|
|
2184
|
+
const updateNodePosition = useNodeStore((s) => s.updateNodePosition);
|
|
2182
2185
|
const clearSel = useSelectionStore((s) => s.clear);
|
|
2183
2186
|
const select = useSelectionStore((s) => s.select);
|
|
2184
2187
|
(0, import_react14.useEffect)(() => {
|