likec4 0.40.1-build.4 → 0.42.0

package/dist/@likec4/core/{colors.js → colors/element.js}

@@ -1,38 +1,22 @@
 const blue = {
-  // fill: colors.blue[500],
-  // stroke: colors.blue[600],
-  // hiContrast: colors.blue[50],
-  // loContrast: colors.blue[200],
   fill: "#3b82f6",
   stroke: "#2563eb",
   hiContrast: "#eff6ff",
   loContrast: "#bfdbfe"
 };
 const sky = {
-  // fill: colors.sky[600],
-  // stroke: colors.sky[700],
-  // hiContrast: colors.sky[50],
-  // loContrast: colors.sky[100],
   fill: "#0284c7",
   stroke: "#0369a1",
   hiContrast: "#f0f9ff",
   loContrast: "#e0f2fe"
 };
 const slate = {
-  // fill: colors.slate[500],
-  // stroke: colors.slate[600],
-  // hiContrast: colors.slate[50],
-  // loContrast: colors.slate[200],
   fill: "#64748b",
   stroke: "#475569",
   hiContrast: "#f8fafc",
   loContrast: "#e2e8f0"
 };
-export const RelationColors = {
-  lineColor: "#b1b1b1",
-  labelColor: "#b1b1b1"
-};
-export const Colors = {
+export const ElementColors = {
   primary: blue,
   blue,
   secondary: sky,
@@ -96,9 +80,3 @@ export const Colors = {
     loContrast: "#c7d2fe"
   }
 };
-export const defaultTheme = {
-  font: "Helvetica",
-  shadow: "#0a0a0a",
-  relation: RelationColors,
-  colors: Colors
-};

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

@@ -0,0 +1,9 @@
+import { ElementColors } from "./element.js";
+import { RelationshipColors } from "./relationships.js";
+export const defaultTheme = {
+  elements: ElementColors,
+  relationships: RelationshipColors,
+  font: "Helvetica",
+  shadow: "#0a0a0a"
+};
+export { ElementColors, RelationshipColors };

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

@@ -0,0 +1,64 @@
+const gray = {
+  lineColor: "#6E6E6E",
+  labelBgColor: "#18191b",
+  labelColor: "#C6C6C6"
+};
+const slate = {
+  lineColor: "#64748b",
+  // 500
+  labelBgColor: "#0f172a",
+  // 900
+  labelColor: "#cbd5e1"
+  // 300
+};
+const blue = {
+  lineColor: "#3b82f6",
+  // 500
+  labelBgColor: "#172554",
+  // 950
+  labelColor: "#60a5fa"
+  // 400
+};
+const sky = {
+  lineColor: "#0ea5e9",
+  // 500
+  labelBgColor: "#082f49",
+  // 950
+  labelColor: "#38bdf8"
+  // 400
+};
+export const RelationshipColors = {
+  amber: {
+    lineColor: "#b45309",
+    labelBgColor: "#78350f",
+    labelColor: "#f59e0b"
+  },
+  blue,
+  gray,
+  green: {
+    lineColor: "#15803d",
+    // 700
+    labelBgColor: "#052e16",
+    //950
+    labelColor: "#22c55e"
+    // 500
+  },
+  indigo: {
+    lineColor: "#6366f1",
+    // 500
+    labelBgColor: "#1e1b4b",
+    // 950
+    labelColor: "#818cf8"
+    // 400
+  },
+  muted: slate,
+  primary: blue,
+  red: {
+    lineColor: "#b91c1c",
+    labelBgColor: "#b91c1c",
+    labelColor: "#dc2626"
+  },
+  secondary: sky,
+  sky,
+  slate
+};

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

@@ -1,6 +1,4 @@
-export * from "./colors.js";
-export * from "./compute-view/index.js";
+export * from "./colors/index.js";
 export * from "./errors/index.js";
-export * from "./model-index/index.js";
 export * from "./types/index.js";
 export * from "./utils/index.js";

package/dist/@likec4/core/types/relation.js

@@ -0,0 +1,3 @@
+export const DefaultLineStyle = "dashed";
+export const DefaultArrowType = "normal";
+export const DefaultRelationshipColor = "gray";

package/dist/@likec4/core/types/view.js

@@ -1,5 +1,5 @@
 export function isViewRuleExpression(rule) {
-  return "exprs" in rule && "isInclude" in rule;
+  return "include" in rule && Array.isArray(rule.include) || "exclude" in rule && Array.isArray(rule.exclude);
 }
 export function isViewRuleStyle(rule) {
   return "style" in rule && "targets" in rule;

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

@@ -13,10 +13,10 @@ export function isAncestor(...args) {
   const another = isString(args[1]) ? args[1] : args[1].id;
   return another.startsWith(ancestor + ".");
 }
-export function isSameHierarchy(...args) {
-  const one = isString(args[0]) ? args[0] : args[0].id;
-  const another = isString(args[1]) ? args[1] : args[1].id;
-  return one === another || another.startsWith(one + ".") || one.startsWith(another + ".");
+export function isSameHierarchy(one, another) {
+  const first = isString(one) ? one : one.id;
+  const second = isString(another) ? another : another.id;
+  return first === second || second.startsWith(first + ".") || first.startsWith(second + ".");
 }
 export function isDescendantOf(ancestors) {
   const predicates = ancestors.flatMap((a) => [(e) => e.id === a.id, (e) => isAncestor(a, e)]);
@@ -52,6 +52,18 @@ export function parentFqn(fqn) {
   }
   return null;
 }
+export function ancestorsFqn(fqn) {
+  const path = fqn.split(".");
+  path.pop();
+  if (path.length === 0) {
+    return [];
+  }
+  return path.reduce((acc, _, idx) => {
+    const ancestor = path.slice(0, idx + 1).join(".");
+    acc.unshift(ancestor);
+    return acc;
+  }, []);
+}
 export function compareFqnHierarchically(a, b) {
   const depthA = a.split(".").length;
   const depthB = b.split(".").length;

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/core/utils/index.js

@@ -1,4 +1,3 @@
 export * from "./fqn.js";
 export * from "./guards.js";
-export * from "./compute-node-levels.js";
 export * from "./relations.js";

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

@@ -62,7 +62,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
       const viewRect = {
         width: Math.min(container?.clientWidth ?? width, width) - paddingLeft - paddingRight,
         height: Math.min(container?.clientHeight ?? height, height) - paddingTop - paddingBottom
-      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(0.1, 1, viewScale), centeringAjustment = {
+      }, viewScale = Math.min(viewRect.width / centerTo.width, viewRect.height / centerTo.height), scale = clamp(0.1, 1.1, viewScale), centeringAjustment = {
         x: ((width - centerTo.width) * scale + viewRect.width) / 2,
         y: ((height - centerTo.height) * scale + viewRect.height) / 2
       }, finalPosition = {
@@ -226,7 +226,7 @@ export const Diagram = /* @__PURE__ */ forwardRef(
             touch: true
           },
           enabled: zoomable,
-          scaleBounds: { min: 0.2, max: 1.15 },
+          scaleBounds: { min: 0.1, max: 1.4 },
           rubberband: 0.05,
           pinchOnWheel: true
         }

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

@@ -1,72 +1,74 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { DefaultRelationshipColor } from "@likec4/core";
+import { useTransition } from "@react-spring/konva";
+import { scale, toHex } from "khroma";
+import { memoize } from "rambdax";
+import { useCallback } from "react";
 import { Group } from "../konva.js";
 import { EdgeShape } from "./shapes/Edge.js";
 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) {
-    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
-      })
-    );
+const edgeColors = memoize((colors, isHovered) => {
+  if (isHovered) {
+    return {
+      lineColor: toHex(
+        scale(colors.lineColor, {
+          l: 25,
+          s: -5
+        })
+      ),
+      labelColor: toHex(
+        scale(colors.labelColor, {
+          l: 40
+        })
+      ),
+      labelBgColor: toHex(
+        scale(colors.labelBgColor, {
+          l: -10
+        })
+      )
+    };
+  } else {
+    return colors;
   }
-  return {
-    lineColor,
-    labelColor
-  };
-};
+});
 export function Edges({ animate, theme, diagram, onEdgeClick }) {
   const hoveredEdgeId = useHoveredEdgeId();
   const setHoveredEdge = useSetHoveredEdge();
-  const colors = useMemo(
-    () => ({
-      base: edgeColors(theme),
-      onHover: edgeColors(theme, true)
-    }),
+  const edgeSprings = useCallback(
+    (edge, isHovered = false) => {
+      return {
+        opacity: 1,
+        lineWidth: 2,
+        ...edgeColors(theme.relationships[edge.color ?? DefaultRelationshipColor], isHovered)
+      };
+    },
     [theme]
   );
   const edgeTransitions = useTransition(diagram.edges, {
-    initial: {
-      opacity: 1,
-      lineWidth: 2,
-      ...colors.base
-    },
-    from: {
+    from: (edge) => ({
+      ...edgeSprings(edge),
       opacity: 0.15,
-      lineWidth: 2,
-      ...colors.base
-    },
+      lineWidth: 2
+    }),
+    initial: (edge) => edgeSprings(edge),
     update: (edge) => {
       const isHovered = hoveredEdgeId === edge.id;
       return {
+        ...edgeSprings(edge, isHovered),
         opacity: 1,
-        lineWidth: isHovered ? 3 : 2,
-        ...isHovered ? colors.onHover : colors.base
+        lineWidth: isHovered ? 3 : 2
       };
     },
     enter: {
       opacity: 1
     },
-    leave: {
-      opacity: 0.05,
-      lineWidth: 2,
-      ...colors.base
+    leave: (edge) => {
+      return {
+        ...edgeSprings(edge),
+        opacity: 0.05,
+        lineWidth: 2
+      };
     },
     expires: true,
     exitBeforeEnter: true,
@@ -92,8 +94,10 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
           onEdgeClick(edge, e);
         },
         onPointerEnter: (e) => {
-          setHoveredEdge(edge);
-          mousePointer(e);
+          if (animate) {
+            setHoveredEdge(edge);
+            mousePointer(e);
+          }
         },
         onPointerLeave: (e) => {
           setHoveredEdge(null);
@@ -103,6 +107,7 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
       children: /* @__PURE__ */ jsx(
         EdgeShape,
         {
+          animate,
           edge,
           isHovered: hoveredEdgeId === edge.id,
           theme,

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

@@ -8,7 +8,7 @@ import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } f
 import { BrowserShape } from "./shapes/Browser.js";
 import { CompoundShape } from "./shapes/Compound.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
-import { useNodeSpringsFn } from "./springs.js";
+import { isCompound, useNodeSpringsFn } from "./springs.js";
 import { DiagramGesture, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
 function nodeShape({ shape }) {
   switch (shape) {
@@ -36,9 +36,6 @@ function nodeShape({ shape }) {
     }
   }
 }
-const isCompound = (node) => {
-  return node.children.length > 0;
-};
 const keyOf = (node) => {
   const key = (node.parent ? node.parent + "-" : "") + node.id;
   if (isCompound(node)) {
@@ -79,7 +76,7 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     },
     // update: nodeSprings(),
     update: (node) => {
-      const scale = !isCompound(node) && hoveredNodeId === node.id && animate ? 1.08 : 1;
+      const scale = animate && !isCompound(node) && hoveredNodeId === node.id ? 1.08 : 1;
       return {
         ...nodeSprings(node),
         scaleX: scale,
@@ -145,8 +142,10 @@ function NodeSnape({
       name: node.id,
       visible: expired !== true,
       onPointerEnter: (e) => {
-        setHoveredNode(node);
-        onNodeClick && animate && mousePointer(e);
+        if (animate) {
+          setHoveredNode(node);
+          onNodeClick && mousePointer(e);
+        }
       },
       onPointerLeave: (e) => {
         setHoveredNode(null);

package/dist/@likec4/diagrams/diagram/icons/ExternalLink.js

@@ -4,7 +4,7 @@ import { defaultTheme as theme } from "@likec4/core";
 export const ExternalLink = ({
   visible = true,
   fill,
-  fillIcon = theme.colors.primary.loContrast,
+  fillIcon = theme.elements.primary.loContrast,
   opacity = 1,
   scale = 1,
   x = 0,

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

@@ -3,14 +3,13 @@ import { useShadowSprings } from "../springs.js";
 import { AnimatedRect, Circle } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 export function BrowserShape({ node, theme, springs, isHovered }) {
-  const colors = theme.colors[node.color];
+  const colors = theme.elements[node.color];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,
       {
         ...useShadowSprings(isHovered, theme, springs),
         cornerRadius: 6,
-        perfectDrawEnabled: false,
         strokeEnabled: false,
         width: springs.width,
         height: springs.height,

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

@@ -37,7 +37,6 @@ export function CylinderShape({ node, theme, springs, isHovered }) {
       {
         ...useShadowSprings(isHovered, theme, springs),
         data: path,
-        perfectDrawEnabled: false,
         shadowForStrokeEnabled: false,
         fill: springs.fill
       }

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

@@ -1,61 +1,150 @@
 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";
+import {
+  DefaultArrowType,
+  DefaultLineStyle,
+  DefaultRelationshipColor
+} from "@likec4/core";
+function EdgeArrow({
+  arrowType,
+  points,
+  springs,
+  globalCompositeOperation
+}) {
+  const isOutline = arrowType === "odiamond" || arrowType === "onormal";
+  return /* @__PURE__ */ jsx(
+    AnimatedLine,
+    {
+      opacity: springs.opacity,
+      points: points.flat(),
+      closed: true,
+      fill: isOutline ? void 0 : springs.lineColor,
+      stroke: springs.lineColor,
+      strokeWidth: 1.6,
+      hitStrokeWidth: 5,
+      lineCap: "round",
+      lineJoin: "miter",
+      globalCompositeOperation
+    }
+  );
+}
+function EdgeLabelBg({
+  animate,
+  labelBBox,
+  isHovered,
+  springs
+}) {
+  const padding = 4;
+  const props = useSpring({
+    to: {
+      x: labelBBox.x - padding,
+      y: labelBBox.y - padding,
+      width: labelBBox.width + padding * 2,
+      height: labelBBox.height + padding * 2,
+      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,
+    head,
+    color,
+    line = DefaultLineStyle,
+    headArrow,
+    tail,
+    tailArrow,
+    labelBBox,
+    labels
+  } = edge;
+  const globalCompositeOperation = !color || color === DefaultRelationshipColor ? "luminosity" : "lighten";
+  const isDotted = line === "dotted";
+  const isDashed = isDotted || line === "dashed";
+  let dash;
+  if (isDotted) {
+    dash = [1, 5];
+  } else if (isDashed) {
+    dash = [10, 8];
+  }
   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,
       {
         opacity: springs.opacity,
         bezier: true,
-        dashEnabled: true,
+        dashEnabled: isDashed,
+        dashOffset: 1,
         points: points.flat(),
+        dash,
         stroke: springs.lineColor,
         strokeWidth: springs.lineWidth,
-        hitStrokeWidth: 20
+        hitStrokeWidth: 20,
+        lineCap: "round",
+        lineJoin: "round",
+        globalCompositeOperation
       }
     ),
-    headArrow && /* @__PURE__ */ jsx(
-      AnimatedLine,
+    head !== "none" && headArrow && /* @__PURE__ */ jsx(
+      EdgeArrow,
       {
-        opacity: springs.opacity,
-        points: headArrow.flat(),
-        closed: true,
-        fill: springs.lineColor,
-        stroke: springs.lineColor,
-        strokeWidth: 2,
-        hitStrokeWidth: 5
+        arrowType: head ?? DefaultArrowType,
+        points: headArrow,
+        springs,
+        globalCompositeOperation
+      },
+      "head"
+    ),
+    tail !== "none" && tailArrow && /* @__PURE__ */ jsx(
+      EdgeArrow,
+      {
+        arrowType: tail ?? DefaultArrowType,
+        points: tailArrow,
+        springs,
+        globalCompositeOperation
+      },
+      "tail"
+    ),
+    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,
+        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/Mobile.js

@@ -3,7 +3,7 @@ import { AnimatedRect, Circle } from "../../konva.js";
 import { NodeLabels } from "./NodeLabel.js";
 import { useShadowSprings } from "../springs.js";
 export function MobileShape({ node, theme, springs, isHovered }) {
-  const colors = theme.colors[node.color];
+  const colors = theme.elements[node.color];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       AnimatedRect,

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/NodeLabel.js

@@ -8,7 +8,7 @@ export function NodeLabels({
   offsetY = 0,
   maxWidth
 }) {
-  const colors = theme.colors[color];
+  const colors = theme.elements[color];
   const width = maxWidth ?? size.width;
   const firstLabel = labels[0];
   const titleFontSize = firstLabel?.fontSize ?? 12;

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

@@ -39,7 +39,6 @@ export function QueueShape({ node, theme, springs, isHovered }) {
       {
         ...useShadowSprings(isHovered, theme, springs),
         data: path,
-        perfectDrawEnabled: false,
         fill: springs.fill
       }
     ),

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(