likec4 0.41.0 → 0.42.0

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

@@ -1,326 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Diagram = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _core = require("@likec4/core");
-var _esm = require("@react-hookz/web/esm");
-var _konva = require("@react-spring/konva");
-var _rambdax = require("rambdax");
-var _react = require("react");
-var _konva2 = require("../konva");
-var _Edges = require("./Edges");
-var _react2 = require("@use-gesture/react");
-var _Nodes = require("./Nodes");
-var _state = require("./state");
-const useGesture = (0, _react2.createUseGesture)([_react2.dragAction, _react2.pinchAction]);
-const useSyncedRef = value => {
-  const ref = (0, _react.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;
-}
-const Diagram = /* @__PURE__ */(0, _react.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 = (0, _react.useRef)(null);
-  const stageRef = (0, _esm.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 = (0, _rambdax.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] = (0, _konva.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: _konva.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
-  });
-  (0, _react.useImperativeHandle)(ref, () => ({
-    get stage() {
-      return (0, _core.nonNullable)(stageRef.current, "not mounted");
-    },
-    get diagramView() {
-      return refs.current.diagram;
-    },
-    get container() {
-      return (0, _core.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]);
-  (0, _esm.useUpdateEffect)(() => {
-    refs.current.centerAndFit(80, 650);
-  }, [id, height, width]);
-  (0, _react.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: () => {
-      _state.DiagramGesture.isDragging = false;
-    },
-    onDrag: state => {
-      const {
-        pinching,
-        down,
-        cancel,
-        intentional,
-        offset: [x, y]
-      } = state;
-      if (pinching) {
-        return cancel();
-      }
-      if (intentional) {
-        _state.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 = (0, _core.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: _core.defaultTheme,
-    diagram
-  };
-  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_konva2.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 (_state.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 (_state.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 (_state.DiagramGesture.isDragging || e.evt.button !== 0 || !stageRef.current) {
-          return;
-        }
-        if (e.target === stageRef.current) {
-          e.cancelBubble = true;
-          centerAndFit();
-        }
-      }
-    }),
-    ...props,
-    children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_konva2.Layer, {
-      children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Nodes.Nodes, {
-        ...sharedProps,
-        onNodeClick
-      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_Edges.Edges, {
-        ...sharedProps,
-        onEdgeClick
-      })]
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_konva2.Layer, {
-      name: "top"
-    })]
-  });
-});
-exports.Diagram = Diagram;
-Diagram.displayName = "Diagram";

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

@@ -1,121 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Edges = Edges;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _konva = require("../konva");
-var _Edge = require("./shapes/Edge");
-var _utils = require("./shapes/utils");
-var _state = require("./state");
-var _konva2 = require("@react-spring/konva");
-var _khroma = require("khroma");
-const edgeColors = ({
-  relation: {
-    lineColor,
-    labelColor
-  }
-}, isHovered = false) => {
-  if (Array.isArray(lineColor)) {
-    lineColor = isHovered ? lineColor[1].onHover : lineColor[0];
-  } else if (isHovered) {
-    lineColor = (0, _khroma.toHex)((0, _khroma.scale)(lineColor, {
-      l: 35,
-      s: -5
-    }));
-  }
-  if (Array.isArray(labelColor)) {
-    labelColor = isHovered ? labelColor[1].onHover : labelColor[0];
-  } else if (isHovered) {
-    labelColor = (0, _khroma.toHex)((0, _khroma.scale)(labelColor, {
-      l: 50
-    }));
-  }
-  return {
-    lineColor,
-    labelColor
-  };
-};
-function Edges({
-  animate,
-  theme,
-  diagram,
-  onEdgeClick
-}) {
-  const hoveredEdgeId = (0, _state.useHoveredEdgeId)();
-  const setHoveredEdge = (0, _state.useSetHoveredEdge)();
-  const colors = (0, _react.useMemo)(() => ({
-    base: edgeColors(theme),
-    onHover: edgeColors(theme, true)
-  }), [theme]);
-  const edgeTransitions = (0, _konva2.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__ */(0, _jsxRuntime.jsx)(_konva.Group, {
-    ...(onEdgeClick && {
-      onPointerClick: e => {
-        if (_state.DiagramGesture.isDragging || e.evt.button !== 0) {
-          return;
-        }
-        e.cancelBubble = true;
-        onEdgeClick(edge, e);
-      },
-      onPointerEnter: e => {
-        if (animate) {
-          setHoveredEdge(edge);
-          (0, _utils.mousePointer)(e);
-        }
-      },
-      onPointerLeave: e => {
-        setHoveredEdge(null);
-        (0, _utils.mouseDefault)(e);
-      }
-    }),
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_Edge.EdgeShape, {
-      edge,
-      isHovered: hoveredEdgeId === edge.id,
-      theme,
-      springs
-    })
-  }, key));
-}

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

@@ -1,204 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Nodes = Nodes;
-var _jsxRuntime = require("react/jsx-runtime");
-var _core = require("@likec4/core");
-var _konva = require("@react-spring/konva");
-var _react = require("react");
-var _konva2 = require("../konva");
-var _konvaPortal = require("../konva-portal");
-var _shapes = require("./shapes");
-var _Browser = require("./shapes/Browser");
-var _Compound = require("./shapes/Compound");
-var _utils = require("./shapes/utils");
-var _springs = require("./springs");
-var _state = require("./state");
-function nodeShape({
-  shape
-}) {
-  switch (shape) {
-    case "cylinder":
-    case "storage":
-      {
-        return _shapes.CylinderShape;
-      }
-    case "queue":
-      {
-        return _shapes.QueueShape;
-      }
-    case "browser":
-      {
-        return _Browser.BrowserShape;
-      }
-    case "person":
-      {
-        return _shapes.PersonShape;
-      }
-    case "rectangle":
-      {
-        return _shapes.RectangleShape;
-      }
-    case "mobile":
-      {
-        return _shapes.MobileShape;
-      }
-    default:
-      {
-        return (0, _core.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;
-};
-function Nodes({
-  animate,
-  theme,
-  diagram,
-  onNodeClick
-}) {
-  const _prev = (0, _react.useRef)( /* @__PURE__ */new Map());
-  const _last = (0, _react.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 = (0, _state.useHoveredNodeId)();
-  const nodeSprings = (0, _springs.useNodeSpringsFn)(theme);
-  const nodeTransitions = (0, _konva.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__ */(0, _jsxRuntime.jsx)(NodeSnape, {
-    animate,
-    node,
-    theme,
-    ctrl,
-    expired,
-    onNodeClick,
-    isHovered: node.id === hoveredNodeId
-  }, key));
-}
-function NodeSnape({
-  animate,
-  node,
-  ctrl,
-  theme,
-  isHovered,
-  expired,
-  onNodeClick
-}) {
-  const setHoveredNode = (0, _state.useSetHoveredNode)();
-  const Shape = isCompound(node) ? _Compound.CompoundShape : nodeShape(node);
-  const springs = ctrl.springs;
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_konvaPortal.Portal, {
-    selector: ".top",
-    enabled: isHovered && !isCompound(node),
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_konva2.AnimatedGroup, {
-      name: node.id,
-      visible: expired !== true,
-      onPointerEnter: e => {
-        if (animate) {
-          setHoveredNode(node);
-          onNodeClick && (0, _utils.mousePointer)(e);
-        }
-      },
-      onPointerLeave: e => {
-        setHoveredNode(null);
-        (0, _utils.mouseDefault)(e);
-      },
-      ...(onNodeClick && {
-        onPointerClick: e => {
-          if (_state.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__ */(0, _jsxRuntime.jsx)(Shape, {
-        node,
-        theme,
-        springs,
-        isHovered
-      })
-    })
-  });
-}

package/dist/@likec4/diagrams/cjs/diagram/icons/BrainIcon.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrainIcon = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-const BrainIcon = () => /* @__PURE__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.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__ */(0, _jsxRuntime.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"
-  })]
-});
-exports.BrainIcon = BrainIcon;