likec4 1.0.0-build.2 → 1.0.0-build.4

package/dist/@likec4/core/colors/index.js

@@ -29,8 +29,9 @@ const slate = {
   loContrast: "#e2e8f0"
 };
 export const RelationColors = {
-  lineColor: "#b1b1b1",
-  labelColor: "#b1b1b1"
+  lineColor: "#6E6E6E",
+  labelBgColor: "#18191b",
+  labelColor: "#C6C6C6"
 };
 export const Colors = {
   primary: blue,

package/dist/@likec4/core/utils/guards.js

@@ -1,3 +1,4 @@
+export { hasAtLeast } from "remeda";
 export function isString(value) {
   return value != null && typeof value === "string";
 }

package/dist/@likec4/diagrams/diagram/Edges.js

@@ -6,20 +6,14 @@ import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { DiagramGesture, useHoveredEdgeId, useSetHoveredEdge } from "./state/index.js";
 import { useTransition } from "@react-spring/konva";
 import { scale, toHex } from "khroma";
-const edgeColors = ({ relation: { lineColor, labelColor } }, isHovered = false) => {
-  if (Array.isArray(lineColor)) {
-    lineColor = isHovered ? lineColor[1].onHover : lineColor[0];
-  } else if (isHovered) {
+const edgeColors = ({ relation: { lineColor, labelBgColor, labelColor } }, isHovered = false) => {
+  if (isHovered) {
     lineColor = toHex(
       scale(lineColor, {
         l: 35,
         s: -5
       })
     );
-  }
-  if (Array.isArray(labelColor)) {
-    labelColor = isHovered ? labelColor[1].onHover : labelColor[0];
-  } else if (isHovered) {
     labelColor = toHex(
       scale(labelColor, {
         l: 50
@@ -28,6 +22,7 @@ const edgeColors = ({ relation: { lineColor, labelColor } }, isHovered = false)
   }
   return {
     lineColor,
+    labelBgColor,
     labelColor
   };
 };
@@ -105,6 +100,7 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
       children: /* @__PURE__ */ jsx(
         EdgeShape,
         {
+          animate,
           edge,
           isHovered: hoveredEdgeId === edge.id,
           theme,

package/dist/@likec4/diagrams/diagram/shapes/Edge.js

@@ -1,22 +1,36 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatedCircle, AnimatedLine, AnimatedText } from "../../konva.js";
-import { invariant, nonNullable } from "@likec4/core";
-export function EdgeShape({ edge, theme, isHovered, springs }) {
-  const { points, headArrow, labels } = edge;
-  invariant(points[0], "Edge must have at least one point");
-  const [x, y] = nonNullable(points[0]);
+import { useSpring } from "@react-spring/konva";
+import { AnimatedLine, AnimatedRect, AnimatedText } from "../../konva.js";
+function EdgeLabelBg({
+  animate,
+  labelBBox,
+  isHovered,
+  springs
+}) {
+  const props = useSpring({
+    to: {
+      x: labelBBox.x - 4,
+      y: labelBBox.y - 4,
+      width: labelBBox.width + 8,
+      height: labelBBox.height + 8,
+      opacity: isHovered ? 0.25 : 0.1
+    },
+    immediate: !animate
+  });
+  return /* @__PURE__ */ jsx(
+    AnimatedRect,
+    {
+      ...props,
+      fill: springs.labelBgColor,
+      cornerRadius: 2,
+      globalCompositeOperation: "darken",
+      hitStrokeWidth: 5
+    }
+  );
+}
+export function EdgeShape({ animate = true, edge, theme, isHovered, springs }) {
+  const { points, headArrow, labelBBox, labels } = edge;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      AnimatedCircle,
-      {
-        opacity: springs.opacity,
-        x,
-        y,
-        radius: springs.lineWidth.to((v) => v + 1),
-        fill: springs.lineColor,
-        visible: isHovered
-      }
-    ),
     /* @__PURE__ */ jsx(
       AnimatedLine,
       {
@@ -24,9 +38,11 @@ export function EdgeShape({ edge, theme, isHovered, springs }) {
         bezier: true,
         dashEnabled: true,
         points: points.flat(),
+        dash: [8, 4],
         stroke: springs.lineColor,
         strokeWidth: springs.lineWidth,
-        hitStrokeWidth: 20
+        hitStrokeWidth: 20,
+        globalCompositeOperation: "luminosity"
       }
     ),
     headArrow && /* @__PURE__ */ jsx(
@@ -37,25 +53,41 @@ export function EdgeShape({ edge, theme, isHovered, springs }) {
         closed: true,
         fill: springs.lineColor,
         stroke: springs.lineColor,
-        strokeWidth: 2,
-        hitStrokeWidth: 5
+        strokeWidth: 1,
+        hitStrokeWidth: 5,
+        globalCompositeOperation: "luminosity"
+      }
+    ),
+    labelBBox && labelBBox.width > 0 && /* @__PURE__ */ jsx(
+      EdgeLabelBg,
+      {
+        animate,
+        labelBBox,
+        isHovered,
+        springs
       }
     ),
-    labels.map((label, i) => /* @__PURE__ */ jsx(
+    labels && labels.map((label, i) => /* @__PURE__ */ jsx(
       AnimatedText,
       {
-        x: label.pt[0] - 4,
-        y: label.pt[1] - label.fontSize / 2 - 4,
+        x: label.pt[0],
+        y: label.pt[1],
+        offsetY: label.fontSize / 2,
         opacity: springs.opacity,
-        padding: 4,
         fill: springs.labelColor,
         fontFamily: theme.font,
         fontSize: label.fontSize,
         fontStyle: label.fontStyle ?? "normal",
-        align: label.align,
         text: label.text,
         perfectDrawEnabled: false,
-        hitStrokeWidth: 10
+        listening: false,
+        globalCompositeOperation: "luminosity",
+        shadowEnabled: springs.opacity.to((o) => o > 0.5),
+        shadowColor: "#222",
+        shadowOpacity: 0.15,
+        shadowOffsetX: 1,
+        shadowOffsetY: 2,
+        shadowBlur: 2
       },
       i
     ))

package/dist/@likec4/diagrams/diagram/shapes/NodeIcon.js

@@ -22,7 +22,8 @@ export function NodeIcon({ icon, maxWidth, maxHeight, offsetX = 0, offsetY = 0 }
       offsetY,
       width: iconWidth,
       height: iconHeight,
-      listening: false
+      listening: false,
+      globalCompositeOperation: "hard-light"
     }
   );
 }

package/dist/@likec4/diagrams/diagram/shapes/Rectangle.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatedRect } from "../../konva.js";
-import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
+import { NodeLabels } from "./NodeLabel.js";
 export function RectangleShape({ node, theme, springs, isHovered }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(

package/dist/@likec4/diagrams/diagram/state/hooks.js

@@ -1,7 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { selectAtom } from "jotai/utils";
 import { hoveredEdgeAtom, hoveredEdgeIdAtom, hoveredNodeAtom, hoveredNodeIdAtom } from "./atoms.js";
-import { useCallback } from "react";
 export function useHoveredNode() {
   return useAtom(hoveredNodeAtom);
 }
@@ -11,15 +9,6 @@ export function useHoveredNodeId() {
 export function useSetHoveredNode() {
   return useSetAtom(hoveredNodeAtom);
 }
-export function useGetNodeState(nodeId) {
-  const isHovered = useAtomValue(
-    selectAtom(
-      hoveredNodeAtom,
-      useCallback((node) => node?.id === nodeId, [nodeId])
-    )
-  );
-  return { isHovered };
-}
 export function useHoveredEdgeId() {
   return useAtomValue(hoveredEdgeIdAtom);
 }