likec4 0.41.0 → 0.42.1

package/dist/@likec4/diagrams/components/primitives/responsive/ResponsiveDiagram.mjs

@@ -1,42 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMeasure } from "@react-hookz/web/esm";
-import { forwardRef } from "react";
-import { Diagram } from "../../../diagram/index.mjs";
-export const ResponsiveDiagram = /* @__PURE__ */ forwardRef(
-  ({ diagram, animate = false, className, diagramClassName, style, ...props }, ref) => {
-    const [measures, containerRef] = useMeasure();
-    const w = diagram.width, h = diagram.height;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "relative",
-          display: "flex",
-          aspectRatio: `${w} / ${h}`,
-          width: "100%",
-          height: "auto",
-          marginLeft: "auto",
-          marginRight: "auto",
-          padding: 0,
-          maxWidth: w,
-          boxSizing: "border-box",
-          ...style
-        },
-        className,
-        children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { flex: "1 1 100%", overflow: "hidden" }, children: measures && /* @__PURE__ */ jsx(
-          Diagram,
-          {
-            ref,
-            width: Math.floor(measures.width),
-            height: Math.floor(measures.height),
-            diagram,
-            className: diagramClassName,
-            animate,
-            ...props
-          }
-        ) })
-      }
-    );
-  }
-);
-ResponsiveDiagram.displayName = "ResponsiveDiagram";

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

@@ -1,307 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { nonNullable, defaultTheme as theme } from "@likec4/core";
-import { useHookableRef, useUpdateEffect } from "@react-hookz/web/esm";
-import { easings, useSpring } from "@react-spring/konva";
-import { clamp } from "rambdax";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { AnimatedStage, Layer } from "../konva.mjs";
-import { Edges } from "./Edges.mjs";
-import { createUseGesture, dragAction, pinchAction } from "@use-gesture/react";
-import { Nodes } from "./Nodes.mjs";
-import { DiagramGesture } from "./state/index.mjs";
-const useGesture = createUseGesture([dragAction, pinchAction]);
-const useSyncedRef = (value) => {
-  const ref = useRef(value);
-  Object.assign(ref.current, value);
-  return ref;
-};
-const NoPadding = [0, 0, 0, 0];
-function diagramNodeId(konvaNode) {
-  let shape = konvaNode;
-  while (shape && shape.nodeType !== "Stage") {
-    const name = shape.name();
-    if (name !== "") {
-      return name;
-    }
-    shape = shape.parent;
-  }
-  return null;
-}
-export const Diagram = /* @__PURE__ */ forwardRef(
-  ({
-    diagram,
-    padding: _padding = NoPadding,
-    pannable = true,
-    zoomable = true,
-    animate = true,
-    initialPosition,
-    onEdgeClick,
-    onNodeClick,
-    onNodeContextMenu,
-    onStageClick,
-    onStageContextMenu,
-    width: _width,
-    height: _height,
-    ...props
-  }, ref) => {
-    const immediate = !animate;
-    const id = diagram.id;
-    const containerRef = useRef(null);
-    const stageRef = useHookableRef(null, (value) => {
-      containerRef.current = value?.container() ?? null;
-      if (containerRef.current) {
-        containerRef.current.style.touchAction = "none";
-      }
-      return value;
-    });
-    const width = _width ?? diagram.width;
-    const height = _height ?? diagram.height;
-    const toCenterOnRect = (centerTo) => {
-      const [paddingTop, paddingRight, paddingBottom, paddingLeft] = Array.isArray(_padding) ? _padding : [_padding, _padding, _padding, _padding];
-      const container = stageRef.current?.container();
-      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 = {
-        x: ((width - centerTo.width) * scale + viewRect.width) / 2,
-        y: ((height - centerTo.height) * scale + viewRect.height) / 2
-      }, finalPosition = {
-        x: Math.ceil(paddingLeft + centeringAjustment.x - centerTo.x * scale),
-        y: Math.ceil(paddingTop + centeringAjustment.y - centerTo.y * scale)
-      };
-      return {
-        ...finalPosition,
-        scale
-      };
-    };
-    const toFitDiagram = () => toCenterOnRect({ x: 0, y: 0, width: diagram.width, height: diagram.height });
-    const [stageProps, stageSpringApi] = useSpring(
-      () => initialPosition ? {
-        from: initialPosition,
-        to: toFitDiagram()
-      } : {
-        from: toFitDiagram(),
-        immediate
-      }
-    );
-    const centerOnRect = (centerTo) => {
-      stageSpringApi.start({
-        to: toCenterOnRect(centerTo),
-        immediate
-      });
-      return;
-    };
-    const centerAndFit = (delay = 70, durationMs) => {
-      stageSpringApi.start({
-        to: toFitDiagram(),
-        delay,
-        config: durationMs ? {
-          duration: durationMs,
-          easing: easings.easeInOutCubic
-        } : {},
-        immediate
-      });
-      return;
-    };
-    const resetStageZoom = (_immediate) => {
-      stageSpringApi.start({
-        to: {
-          x: 0,
-          y: 0,
-          scale: 1
-        },
-        immediate
-      });
-      return;
-    };
-    const refs = useSyncedRef({
-      diagram,
-      width,
-      height,
-      centerOnRect,
-      centerAndFit,
-      resetStageZoom
-    });
-    useImperativeHandle(
-      ref,
-      () => ({
-        get stage() {
-          return nonNullable(stageRef.current, "not mounted");
-        },
-        get diagramView() {
-          return refs.current.diagram;
-        },
-        get container() {
-          return nonNullable(stageRef.current?.container(), "not mounted");
-        },
-        resetStageZoom: (_immediate) => {
-          refs.current.resetStageZoom(_immediate);
-        },
-        centerOnNode: (node) => refs.current.centerOnRect({
-          x: node.position[0],
-          y: node.position[1],
-          width: node.size.width,
-          height: node.size.height
-        }),
-        centerAndFit: () => refs.current.centerAndFit()
-      }),
-      [refs, id, stageRef]
-    );
-    useUpdateEffect(() => {
-      refs.current.centerAndFit(80, 650);
-    }, [id, height, width]);
-    useEffect(() => {
-      if (!zoomable) {
-        return;
-      }
-      const handler = (e) => e.preventDefault();
-      document.addEventListener("gesturestart", handler);
-      document.addEventListener("gesturechange", handler);
-      return () => {
-        document.removeEventListener("gesturestart", handler);
-        document.removeEventListener("gesturechange", handler);
-      };
-    }, [zoomable]);
-    useGesture(
-      {
-        onDragEnd: () => {
-          DiagramGesture.isDragging = false;
-        },
-        onDrag: (state) => {
-          const {
-            pinching,
-            down,
-            cancel,
-            intentional,
-            offset: [x, y]
-          } = state;
-          if (pinching) {
-            return cancel();
-          }
-          if (intentional) {
-            DiagramGesture.isDragging = true;
-            stageSpringApi.start({
-              to: {
-                x,
-                y
-              },
-              immediate: immediate || down
-            });
-          }
-        },
-        onPinch: ({ memo, first, last, origin: [ox, oy], movement: [ms], offset: [scale] }) => {
-          if (first) {
-            const stage = nonNullable(stageRef.current);
-            const { x: x2, y: y2 } = stage.getAbsolutePosition();
-            const tx = Math.round(ox - x2);
-            const ty = Math.round(oy - y2);
-            memo = [stage.x(), stage.y(), tx, ty];
-          }
-          const x = Math.round(memo[0] - (ms - 1) * memo[2]);
-          const y = Math.round(memo[1] - (ms - 1) * memo[3]);
-          stageSpringApi.start({
-            to: {
-              x,
-              y,
-              scale
-            },
-            immediate: immediate || !last || !first
-          });
-          return memo;
-        }
-      },
-      {
-        target: containerRef,
-        drag: {
-          enabled: pannable,
-          threshold: 4,
-          from: () => [stageProps.x.get(), stageProps.y.get()],
-          pointer: {
-            buttons: -1,
-            keys: false
-          }
-        },
-        pinch: {
-          pointer: {
-            touch: true
-          },
-          enabled: zoomable,
-          scaleBounds: { min: 0.2, max: 1.15 },
-          rubberband: 0.05,
-          pinchOnWheel: true
-        }
-      }
-    );
-    const sharedProps = {
-      animate,
-      theme,
-      diagram
-    };
-    return /* @__PURE__ */ jsxs(
-      AnimatedStage,
-      {
-        ref: stageRef,
-        width,
-        height,
-        offsetX: width / 2,
-        offsetY: height / 2,
-        x: stageProps.x,
-        y: stageProps.y,
-        scaleX: stageProps.scale,
-        scaleY: stageProps.scale,
-        ...(onStageContextMenu || onNodeContextMenu) && {
-          onContextMenu: (e) => {
-            if (DiagramGesture.isDragging || !stageRef.current) {
-              return;
-            }
-            if (e.target === stageRef.current || !onNodeContextMenu) {
-              e.cancelBubble = true;
-              onStageContextMenu?.(stageRef.current, e);
-              return;
-            }
-            if (onNodeContextMenu) {
-              const nodeId = diagramNodeId(e.target);
-              const node = nodeId && refs.current.diagram.nodes.find((n) => n.id === nodeId);
-              if (node) {
-                e.cancelBubble = true;
-                onNodeContextMenu(node, e);
-                return;
-              }
-            }
-          }
-        },
-        ...onStageClick && {
-          onPointerClick: (e) => {
-            if (DiagramGesture.isDragging || e.evt.button !== 0 || !stageRef.current) {
-              return;
-            }
-            if (e.target === stageRef.current) {
-              e.cancelBubble = true;
-              onStageClick(stageRef.current, e);
-            }
-          }
-        },
-        ...zoomable && {
-          onPointerDblClick: (e) => {
-            if (DiagramGesture.isDragging || e.evt.button !== 0 || !stageRef.current) {
-              return;
-            }
-            if (e.target === stageRef.current) {
-              e.cancelBubble = true;
-              centerAndFit();
-            }
-          }
-        },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs(Layer, { children: [
-            /* @__PURE__ */ jsx(Nodes, { ...sharedProps, onNodeClick }),
-            /* @__PURE__ */ jsx(Edges, { ...sharedProps, onEdgeClick })
-          ] }),
-          /* @__PURE__ */ jsx(Layer, { name: "top" })
-        ]
-      }
-    );
-  }
-);
-Diagram.displayName = "Diagram";

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

@@ -1,117 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { Group } from "../konva.mjs";
-import { EdgeShape } from "./shapes/Edge.mjs";
-import { mouseDefault, mousePointer } from "./shapes/utils.mjs";
-import { DiagramGesture, useHoveredEdgeId, useSetHoveredEdge } from "./state/index.mjs";
-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
-      })
-    );
-  }
-  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)
-    }),
-    [theme]
-  );
-  const edgeTransitions = useTransition(diagram.edges, {
-    initial: {
-      opacity: 1,
-      lineWidth: 2,
-      ...colors.base
-    },
-    from: {
-      opacity: 0.15,
-      lineWidth: 2,
-      ...colors.base
-    },
-    update: (edge) => {
-      const isHovered = hoveredEdgeId === edge.id;
-      return {
-        opacity: 1,
-        lineWidth: isHovered ? 3 : 2,
-        ...isHovered ? colors.onHover : colors.base
-      };
-    },
-    enter: {
-      opacity: 1
-    },
-    leave: {
-      opacity: 0.05,
-      lineWidth: 2,
-      ...colors.base
-    },
-    expires: true,
-    exitBeforeEnter: true,
-    immediate: !animate,
-    // delay: 30,
-    config: {
-      duration: 160,
-      precision: 5e-3
-    },
-    // unique edge key, scoped to this diagram
-    // to avoid any issues with diagram-to-diagram transitions
-    keys: (e) => e.id + diagram.id
-  });
-  return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ jsx(
-    Group,
-    {
-      ...onEdgeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onEdgeClick(edge, e);
-        },
-        onPointerEnter: (e) => {
-          if (animate) {
-            setHoveredEdge(edge);
-            mousePointer(e);
-          }
-        },
-        onPointerLeave: (e) => {
-          setHoveredEdge(null);
-          mouseDefault(e);
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        EdgeShape,
-        {
-          edge,
-          isHovered: hoveredEdgeId === edge.id,
-          theme,
-          springs
-        }
-      )
-    },
-    key
-  ));
-}

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

@@ -1,178 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { nonexhaustive } from "@likec4/core";
-import { useTransition } from "@react-spring/konva";
-import { useRef } from "react";
-import { AnimatedGroup } from "../konva.mjs";
-import { Portal } from "../konva-portal.mjs";
-import { CylinderShape, MobileShape, PersonShape, QueueShape, RectangleShape } from "./shapes/index.mjs";
-import { BrowserShape } from "./shapes/Browser.mjs";
-import { CompoundShape } from "./shapes/Compound.mjs";
-import { mouseDefault, mousePointer } from "./shapes/utils.mjs";
-import { useNodeSpringsFn } from "./springs.mjs";
-import { DiagramGesture, useHoveredNodeId, useSetHoveredNode } from "./state/index.mjs";
-function nodeShape({ shape }) {
-  switch (shape) {
-    case "cylinder":
-    case "storage": {
-      return CylinderShape;
-    }
-    case "queue": {
-      return QueueShape;
-    }
-    case "browser": {
-      return BrowserShape;
-    }
-    case "person": {
-      return PersonShape;
-    }
-    case "rectangle": {
-      return RectangleShape;
-    }
-    case "mobile": {
-      return MobileShape;
-    }
-    default: {
-      return nonexhaustive(shape);
-    }
-  }
-}
-const isCompound = (node) => {
-  return node.children.length > 0;
-};
-const keyOf = (node) => {
-  const key = (node.parent ? node.parent + "-" : "") + node.id;
-  if (isCompound(node)) {
-    return "compound-" + key;
-  }
-  return key;
-};
-export function Nodes({ animate, theme, diagram, onNodeClick }) {
-  const _prev = useRef(/* @__PURE__ */ new Map());
-  const _last = useRef(diagram);
-  if (_last.current.id !== diagram.id) {
-    _prev.current = new Map(_last.current.nodes.map((n) => [n.id, n]));
-  }
-  _last.current = diagram;
-  const prevNodes = _prev.current;
-  const hoveredNodeId = useHoveredNodeId();
-  const nodeSprings = useNodeSpringsFn(theme);
-  const nodeTransitions = useTransition(diagram.nodes, {
-    initial: nodeSprings,
-    from: (node) => {
-      const prevNode = prevNodes.get(node.id);
-      if (prevNode) {
-        return nodeSprings(prevNode);
-      }
-      return {
-        ...nodeSprings(node),
-        opacity: 0,
-        scaleX: isCompound(node) ? 0.85 : 0.6,
-        scaleY: isCompound(node) ? 0.85 : 0.6
-      };
-    },
-    enter: (node) => {
-      const isReplacing = prevNodes.has(node.id);
-      return {
-        ...nodeSprings(node),
-        delay: isReplacing ? 50 : 70
-      };
-    },
-    // update: nodeSprings(),
-    update: (node) => {
-      const scale = !isCompound(node) && hoveredNodeId === node.id && animate ? 1.08 : 1;
-      return {
-        ...nodeSprings(node),
-        scaleX: scale,
-        scaleY: scale
-      };
-    },
-    leave: (node) => {
-      const replacedWith = diagram.nodes.find((n) => n.id === node.id);
-      if (replacedWith && keyOf(node) !== keyOf(replacedWith)) {
-        return {
-          opacity: 0,
-          immediate: true
-        };
-      }
-      return {
-        opacity: 0,
-        scaleX: isCompound(node) ? 0.7 : 0.5,
-        scaleY: isCompound(node) ? 0.7 : 0.5,
-        config: {
-          duration: 120
-        }
-      };
-    },
-    sort: (a, b) => {
-      if (isCompound(a) === isCompound(b)) {
-        return a.level - b.level;
-      }
-      return isCompound(a) ? -1 : 1;
-    },
-    expires: true,
-    immediate: !animate,
-    keys: keyOf
-  });
-  return nodeTransitions((_, node, { key, ctrl, expired }) => /* @__PURE__ */ jsx(
-    NodeSnape,
-    {
-      animate,
-      node,
-      theme,
-      ctrl,
-      expired,
-      onNodeClick,
-      isHovered: node.id === hoveredNodeId
-    },
-    key
-  ));
-}
-function NodeSnape({
-  animate,
-  node,
-  ctrl,
-  theme,
-  isHovered,
-  expired,
-  onNodeClick
-}) {
-  const setHoveredNode = useSetHoveredNode();
-  const Shape = isCompound(node) ? CompoundShape : nodeShape(node);
-  const springs = ctrl.springs;
-  return /* @__PURE__ */ jsx(Portal, { selector: ".top", enabled: isHovered && !isCompound(node), children: /* @__PURE__ */ jsx(
-    AnimatedGroup,
-    {
-      name: node.id,
-      visible: expired !== true,
-      onPointerEnter: (e) => {
-        if (animate) {
-          setHoveredNode(node);
-          onNodeClick && mousePointer(e);
-        }
-      },
-      onPointerLeave: (e) => {
-        setHoveredNode(null);
-        mouseDefault(e);
-      },
-      ...onNodeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onNodeClick(node, e);
-        }
-      },
-      x: springs.x,
-      y: springs.y,
-      offsetX: springs.offsetX,
-      offsetY: springs.offsetY,
-      width: springs.width,
-      height: springs.height,
-      scaleX: springs.scaleX,
-      scaleY: springs.scaleY,
-      opacity: springs.opacity,
-      children: /* @__PURE__ */ jsx(Shape, { node, theme, springs, isHovered })
-    }
-  ) });
-}

package/dist/@likec4/diagrams/diagram/icons/BrainIcon.mjs

@@ -1,20 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-export const BrainIcon = () => /* @__PURE__ */ jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "#dedede",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "lucide lucide-brain",
-    children: [
-      /* @__PURE__ */ jsx("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" }),
-      /* @__PURE__ */ jsx("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" })
-    ]
-  }
-);