@likec4/diagram 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -7764,7 +7764,9 @@ function toDomPrecision(v) {
   return v === null ? 0.01 : Math.round(v * 100) / 100;
 }
 const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId), SyncWithDiagram = memo(() => {
-  const xyflow = useXYFlow(), xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
+  const _xyflow = useXYFlow(), xyflowRef = useRef(_xyflow);
+  xyflowRef.current = _xyflow;
+  const xyflowApi = useXYStoreApi(), diagramStoreApi = useDiagramStoreApi();
   return useEffect(() => diagramStoreApi.subscribe(
     // selector
     (state) => ({
@@ -7777,7 +7779,7 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
     // listener
     ({ viewId, nodes, edges, ...opts }) => {
       const { lastOnNavigate } = diagramStoreApi.getState(), updates = diagramViewToXYFlowData({ nodes, edges }, opts);
-      if (xyflow.setNodes(
+      if (xyflowRef.current.setNodes(
         (prev) => updates.nodes.map((update) => {
           const existing = prev.find(isSameNode(update));
           return existing ? deepEqual(existing.data.element, update.data.element) ? existing : {
@@ -7785,7 +7787,7 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
             ...update
           } : update;
         })
-      ), xyflow.setEdges(
+      ), xyflowRef.current.setEdges(
         (prev) => updates.edges.map((update) => {
           const existing = prev.find((e) => e.id === update.id);
           return existing ? deepEqual(existing.data, update.data) ? existing : {
@@ -7798,22 +7800,20 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
         if (elTo) {
           const centerFrom = lastOnNavigate.elementCenterScreenPosition, nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height);
           requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              const v = xyflow.getViewport();
-              nextZoom < v.zoom && xyflow.setViewport({
-                x: v.x,
-                y: v.y,
-                zoom: nextZoom
-              });
-              const centerTo = xyflow.flowToScreenPosition({
-                x: elTo.position[0] + elTo.width / 2,
-                y: elTo.position[1] + elTo.height / 2
-              }), diff = {
-                x: toDomPrecision(centerFrom.x - centerTo.x),
-                y: toDomPrecision(centerFrom.y - centerTo.y)
-              };
-              xyflowApi.getState().panBy(diff);
+            const v = xyflowRef.current.getViewport();
+            nextZoom < v.zoom && xyflowRef.current.setViewport({
+              x: v.x,
+              y: v.y,
+              zoom: nextZoom
             });
+            const centerTo = xyflowRef.current.flowToScreenPosition({
+              x: elTo.position[0] + elTo.width / 2,
+              y: elTo.position[1] + elTo.height / 2
+            }), diff = {
+              x: toDomPrecision(centerFrom.x - centerTo.x),
+              y: toDomPrecision(centerFrom.y - centerTo.y)
+            };
+            xyflowApi.getState().panBy(diff);
           });
         }
         diagramStoreApi.setState(
@@ -7831,7 +7831,7 @@ const isSameNode = (a) => (b) => a.id === b.id && a.type === b.type && Object.is
     {
       equalityFn: shallowEqual
     }
-  ), [xyflow, xyflowApi, diagramStoreApi]), null;
+  ), [xyflowApi, diagramStoreApi]), null;
 });
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);

package/dist/style.css

@@ -756,7 +756,7 @@ svg.react-flow__connectionline {
 }
 [data-mantine-color-scheme="dark"] .bexn7q0 {
   --xy-edge-label-color: var(--likec4-relation-labelColor);
-  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 75%);
+  --xy-edge-label-background-color: color-mix(in srgb, var(--likec4-relation-labelBg), transparent 55%);
 }
 .bexn7q0[data-edge-hovered='true'] {
   --xy-edge-stroke: color-mix(in srgb, var(--likec4-relation-lineColor), white 30%);
@@ -805,9 +805,6 @@ svg.react-flow__connectionline {
   transform: var(--bexn7q6);
   will-change: transform;
 }
-[data-mantine-color-scheme="dark"] .bexn7q7 {
-  mix-blend-mode: luminosity;
-}
 .bexn7q7[data-edge-hovered="true"] {
   transition: all 140ms ease-out;
   transform: var(--bexn7q6) scale(1.1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -40,36 +40,38 @@
       "./style.css": "./dist/style.css"
     }
   },
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "yarn@4.2.2",
   "scripts": {
     "typecheck": "tsc",
     "prepack": "vite build --mode production",
     "build:turbo": "run -T turbo build --filter='diagram'",
     "build": "vite build --mode development && tsc -b",
     "lint": "run -T eslint src/ --fix",
-    "clean": "run -T rimraf -v dist/* .tsbuildinfo"
+    "clean": "run -T rimraf -v -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.0.0",
-    "@mantine/core": "^7.9.0",
-    "@mantine/hooks": "^7.9.0",
+    "@likec4/core": "1.0.2",
     "@react-hookz/web": "^24.0.4",
     "esm-env": "^1.0.0",
     "fast-equals": "^5.0.1",
-    "framer-motion": "^11.1.7",
+    "framer-motion": "^11.2.2",
     "remeda": "^1.61.0",
     "zustand": "^4.5.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@mantine/core": "^7.9.2",
+    "@mantine/hooks": "^7.9.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@lume/kiwi": "^0.4.3",
-    "@mantine/vanilla-extract": "^7.9.0",
+    "@mantine/core": "^7.9.2",
+    "@mantine/hooks": "^7.9.2",
+    "@mantine/vanilla-extract": "^7.9.2",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.4",
     "@vanilla-extract/css": "^1.15.1",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.5",

package/src/xyflow/SyncWithDiagram.tsx

@@ -2,7 +2,7 @@ import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import { useXYFlow, useXYStoreApi } from './hooks'
 import type { XYFlowNode } from './types'
 
-import { memo, useEffect } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import { useDiagramStoreApi } from '../state'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { toDomPrecision } from './utils'
@@ -14,7 +14,10 @@ const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
  * Syncs the diagram state with the XYFlow instance
  */
 export const SyncWithDiagram = memo(() => {
-  const xyflow = useXYFlow()
+  const _xyflow = useXYFlow()
+  const xyflowRef = useRef(_xyflow)
+  xyflowRef.current = _xyflow
+
   const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
@@ -33,7 +36,7 @@ export const SyncWithDiagram = memo(() => {
         const { lastOnNavigate } = diagramStoreApi.getState()
         const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
 
-        xyflow.setNodes(prev =>
+        xyflowRef.current.setNodes(prev =>
           updates.nodes.map(update => {
             const existing = prev.find(isSameNode(update))
             if (existing) {
@@ -49,7 +52,7 @@ export const SyncWithDiagram = memo(() => {
           })
         )
 
-        xyflow.setEdges(prev =>
+        xyflowRef.current.setEdges(prev =>
           updates.edges.map(update => {
             const existing = prev.find(e => e.id === update.id)
             if (existing) {
@@ -70,25 +73,25 @@ export const SyncWithDiagram = memo(() => {
             const nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
 
             requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                const v = xyflow.getViewport()
-                if (nextZoom < v.zoom) {
-                  xyflow.setViewport({
-                    x: v.x,
-                    y: v.y,
-                    zoom: nextZoom
-                  })
+              // requestAnimationFrame(() => {
+              const v = xyflowRef.current.getViewport()
+              if (nextZoom < v.zoom) {
+                xyflowRef.current.setViewport({
+                  x: v.x,
+                  y: v.y,
+                  zoom: nextZoom
+                })
+              }
+              const centerTo = xyflowRef.current.flowToScreenPosition({
+                  x: elTo.position[0] + elTo.width / 2,
+                  y: elTo.position[1] + elTo.height / 2
+                }),
+                diff = {
+                  x: toDomPrecision(centerFrom.x - centerTo.x),
+                  y: toDomPrecision(centerFrom.y - centerTo.y)
                 }
-                const centerTo = xyflow.flowToScreenPosition({
-                    x: elTo.position[0] + elTo.width / 2,
-                    y: elTo.position[1] + elTo.height / 2
-                  }),
-                  diff = {
-                    x: toDomPrecision(centerFrom.x - centerTo.x),
-                    y: toDomPrecision(centerFrom.y - centerTo.y)
-                  }
-                xyflowApi.getState().panBy(diff)
-              })
+              xyflowApi.getState().panBy(diff)
+              // })
             })
           }
           diagramStoreApi.setState(
@@ -107,7 +110,7 @@ export const SyncWithDiagram = memo(() => {
         equalityFn: shallowEqual
       }
     )
-  }, [xyflow, xyflowApi, diagramStoreApi])
+  }, [xyflowApi, diagramStoreApi])
 
   return null
 })

package/src/xyflow/edges/edges.css.ts

@@ -15,7 +15,7 @@ export const container = style({
     [mantine.darkSelector]: {
       vars: {
         [xyvars.edge.labelColor]: vars.relation.labelColor,
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 75%)`
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 55%)`
       }
     }
     // [mantine.lightSelector]: {
@@ -105,9 +105,9 @@ export const edgeLabel = style({
     [varLabelY]: '50%'
   },
   selectors: {
-    [mantine.darkSelector]: {
-      mixBlendMode: 'luminosity'
-    },
+    // [mantine.darkSelector]: {
+    //   mixBlendMode: 'luminosity'
+    // },
     '&[data-edge-hovered="true"]': {
       transition: 'all 140ms ease-out',
       transform: `${varTranslate} scale(1.1)`