@likec4/diagram 1.15.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
-    "@likec4/core": "1.15.0",
+    "@likec4/core": "1.15.1",
     "@mantine/vanilla-extract": "7.13.4",
     "@react-hookz/web": "^24.0.4",
     "@tabler/icons-react": "3.17.0",
@@ -47,18 +47,18 @@
     "fast-equals": "^5.0.1",
     "framer-motion": "^11.11.9",
     "khroma": "^2.1.0",
-    "remeda": "^2.15.0",
+    "remeda": "^2.16.0",
     "type-fest": "4.26.1",
     "zustand": "^4.5.5"
   },
   "peerDependencies": {
-    "@mantine/core": "^7.13.2",
-    "@mantine/hooks": "^7.13.2",
+    "@mantine/core": "^7.13.4",
+    "@mantine/hooks": "^7.13.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.15.0",
+    "@likec4/tsconfig": "1.15.1",
     "@mantine/core": "7.13.4",
     "@mantine/hooks": "7.13.4",
     "@types/bezier-js": "^4.1.3",

package/src/overlays/Overlays.css.ts

@@ -47,6 +47,13 @@ globalStyle(`:where(${container}) .react-flow__node-compound`, {
   mixBlendMode: 'hard-light'
 })
 
+globalStyle(`${container} .react-flow__edges > svg`, {
+  mixBlendMode: 'plus-lighter'
+})
+globalStyle(`:where([data-mantine-color-scheme="light"]) ${container} .react-flow__edges > svg`, {
+  mixBlendMode: 'screen'
+})
+
 // const dialogFadeIn = keyframes({
 //   '0%': {
 //     opacity: 0,

package/src/overlays/relationships-of/use-layouted-relationships.ts

@@ -51,7 +51,7 @@ const Sizes = {
     edgesep: 20
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 60
+    width: 65
   } satisfies Label,
 
   emptyNodeOffset: 150,
@@ -465,9 +465,10 @@ function layout(
 
     forEachIncoming(sourceId, relations) {
       const source = createNode('incomers', 'element', likec4model.element(sourceId), ctx)
-      g.setEdge(graphId(source).port, subject.id)
-
-      // const op = source.type === 'compound' ? 'unshift' : 'push'
+      g.setEdge(graphId(source).port, subject.id, {
+        width: Sizes.edgeLabel.width,
+        weight: source.type === 'compound' ? 0 : 1
+      })
 
       subject.data.ports.left.push({
         id: source.id,
@@ -486,9 +487,11 @@ function layout(
 
     forEachOutgoing(targetId, relations) {
       const target = createNode('outgoers', 'element', likec4model.element(targetId), ctx)
-      g.setEdge(subjectElement.id, graphId(target).port)
+      g.setEdge(subjectElement.id, graphId(target).port, {
+        width: Sizes.edgeLabel.width,
+        weight: target.type === 'compound' ? 1 : 2
+      })
 
-      // const op = target.type === 'compound' ? 'unshift' : 'push'
       subject.data.ports.right.push({
         id: target.id,
         type: 'out'
@@ -515,8 +518,8 @@ function layout(
   }
 
   const subjectPortsCount = Math.max(subject.data.ports.left.length, subject.data.ports.right.length)
-  if (subjectPortsCount > 2) {
-    g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 2) * 1
+  if (subjectPortsCount > 3) {
+    g.node(subjectElement.id).height = Sizes.hodeHeight + (subjectPortsCount - 3) * 5
   }
 
   const nodebounds = applyDagreLayout(ctx.g)

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -56,6 +56,9 @@ export function RelationshipEdge({
               )}
               <Text
                 fw={isMultiRelation ? '500' : '400'}
+                style={{
+                  whiteSpace: isMultiRelation ? 'nowrap' : undefined
+                }}
                 component={'div'}
                 className={css.edgeLabelText}
                 lineClamp={3}>