@likec4/diagram 1.17.1 → 1.19.0

package/dist/xyflow/EdgeMarkers.js

@@ -0,0 +1,192 @@
+import { jsx } from "react/jsx-runtime";
+const Open = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 14 16",
+    refX: 5,
+    refY: 4,
+    markerWidth: "7",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M0,0 L7,4 L0,8 L4,4 Z",
+        stroke: "context-stroke",
+        fill: "context-stroke",
+        strokeDasharray: 0,
+        strokeWidth: 1,
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+const Arrow = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-1 -1 12 10",
+    refX: 4,
+    refY: 3,
+    markerWidth: "8",
+    markerHeight: "6",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+        fill: "context-stroke",
+        strokeWidth: 0
+      }
+    )
+  }
+);
+const Crow = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-1 -1 12 12",
+    refX: 8,
+    refY: 4,
+    markerWidth: "8",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 8 0 L 0 4 L 8 8 M 8 4 L 0 4",
+        fill: "none",
+        strokeWidth: 1
+      }
+    )
+  }
+);
+const OArrow = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-1 -1 12 10",
+    refX: 4,
+    refY: 3,
+    markerWidth: "8",
+    markerHeight: "6",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0 0 L 8 3 L 0 6 L 1 3 z",
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        strokeWidth: 1.25,
+        strokeLinejoin: "miter",
+        strokeLinecap: "square"
+      }
+    )
+  }
+);
+const Diamond = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 16 14",
+    refX: 5,
+    refY: 4,
+    markerWidth: "10",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5,0 L10,4 L5,8 L0,4 Z",
+        fill: "context-stroke",
+        strokeWidth: 0,
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+const ODiamond = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "-4 -4 16 14",
+    refX: 6,
+    refY: 4,
+    markerWidth: "10",
+    markerHeight: "8",
+    preserveAspectRatio: "xMaxYMid meet",
+    orient: "auto-start-reverse",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M5,0 L10,4 L5,8 L0,4 Z",
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        strokeWidth: 1.25,
+        strokeLinecap: "round"
+      }
+    )
+  }
+);
+const Dot = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "0 0 10 10",
+    refX: 4,
+    refY: 4,
+    markerWidth: "6",
+    markerHeight: "6",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "circle",
+      {
+        strokeWidth: 0,
+        fill: "context-stroke",
+        cx: 4,
+        cy: 4,
+        r: 3
+      }
+    )
+  }
+);
+const ODot = (props) => /* @__PURE__ */ jsx(
+  "marker",
+  {
+    viewBox: "0 0 10 10",
+    refX: 4,
+    refY: 4,
+    markerWidth: "6",
+    markerHeight: "6",
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      "circle",
+      {
+        strokeWidth: 1.25,
+        stroke: "context-stroke",
+        fill: "var(--likec4-background-color)",
+        cx: 4,
+        cy: 4,
+        r: 3
+      }
+    )
+  }
+);
+const EdgeMarkers = {
+  Arrow,
+  Crow,
+  OArrow,
+  Open,
+  Diamond,
+  ODiamond,
+  Dot,
+  ODot
+};
+export {
+  EdgeMarkers
+};

package/dist/xyflow/FitviewOnDiagramChange.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Fits the view when diagram changes
+ */
+export declare function FitViewOnDiagramChange(): import("react/jsx-runtime").JSX.Element | null;

package/dist/xyflow/FitviewOnDiagramChange.js

@@ -0,0 +1,72 @@
+import { jsx } from "react/jsx-runtime";
+import { useDebouncedEffect } from "@react-hookz/web";
+import { shallowEqual } from "fast-equals";
+import { useState, useRef } from "react";
+import { useDiagramState, useDiagramStoreApi } from "../hooks/useDiagramState.js";
+import { useXYStore } from "../hooks/useXYFlow.js";
+function selectXYFlowSize(state) {
+  return `${Math.round(state.width)}:${Math.round(state.height)}`;
+}
+function selectDiagramsize({ view, fitViewPadding }) {
+  return [
+    view.bounds.x,
+    view.bounds.y,
+    view.bounds.width,
+    view.bounds.height,
+    fitViewPadding
+  ].map(Math.round).join(":");
+}
+function FitViewOnViewportResize({ diagramApi }) {
+  const xyflowsize = useXYStore(selectXYFlowSize);
+  const viewsize = useDiagramState(selectDiagramsize);
+  const dimensions = xyflowsize + viewsize;
+  const prevDimensionsRef = useRef(dimensions);
+  useDebouncedEffect(
+    () => {
+      const { focusedNodeId, fitDiagram } = diagramApi.getState();
+      if (focusedNodeId || prevDimensionsRef.current === dimensions) {
+        return;
+      }
+      prevDimensionsRef.current = dimensions;
+      fitDiagram(250);
+    },
+    [dimensions, diagramApi],
+    250
+  );
+  return null;
+}
+function selector({ view, activeWalkthrough, viewportChanged, fitViewPadding }) {
+  return {
+    layoutId: view.id + "_" + view.autoLayout + "_" + fitViewPadding,
+    isActiveWalkthrough: !!activeWalkthrough,
+    viewportNotMoved: !viewportChanged
+  };
+}
+function FitViewOnDiagramChange() {
+  const {
+    layoutId,
+    isActiveWalkthrough,
+    viewportNotMoved
+  } = useDiagramState(selector, shallowEqual);
+  const diagramApi = useDiagramStoreApi();
+  const [currentLayoutId, setCurrent] = useState(layoutId);
+  const requiresFit = layoutId !== currentLayoutId;
+  useDebouncedEffect(
+    () => {
+      if (layoutId === currentLayoutId) {
+        return;
+      }
+      setCurrent(layoutId);
+      diagramApi.getState().fitDiagram(450);
+    },
+    [requiresFit, diagramApi],
+    50
+  );
+  if (viewportNotMoved && !isActiveWalkthrough && !requiresFit) {
+    return /* @__PURE__ */ jsx(FitViewOnViewportResize, { diagramApi });
+  }
+  return null;
+}
+export {
+  FitViewOnDiagramChange
+};

package/dist/xyflow/SelectEdgesOnNodeFocus.d.ts

@@ -0,0 +1 @@
+export declare function SelectEdgesOnNodeFocus(): null;

package/dist/xyflow/SelectEdgesOnNodeFocus.js

@@ -0,0 +1,96 @@
+import { nonNullable } from "@likec4/core";
+import { useHotkeys } from "@mantine/hooks";
+import { getBoundsOfRects, getViewportForBounds } from "@xyflow/system";
+import { useDiagramStoreApi, useDiagramState } from "../hooks/useDiagramState.js";
+import { MinZoom } from "./const.js";
+import { nodeToRect } from "./utils.js";
+import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
+function SelectEdgesOnNodeFocus() {
+  const diagramStore = useDiagramStoreApi();
+  const focusedNodeId = useDiagramState((s) => s.focusedNodeId);
+  useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      diagramStore.getState().xystore.getState().resetSelectedElements();
+      return;
+    }
+    const container = diagramStore.getState().getContainer();
+    if (!container) {
+      return;
+    }
+    const edgeChanges = [];
+    const nodeChanges = [];
+    const {
+      edgeLookup,
+      nodeLookup,
+      panZoom,
+      transform,
+      triggerNodeChanges,
+      triggerEdgeChanges
+    } = diagramStore.getState().xystore.getState();
+    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)));
+    for (const [, edge] of edgeLookup) {
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source;
+        const nd = nonNullable(nodeLookup.get(anotherNodeId));
+        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd));
+      }
+      if (edge.selected) {
+        edgeChanges.push({
+          id: edge.id,
+          type: "select",
+          selected: false
+        });
+      }
+    }
+    for (const [, node] of nodeLookup) {
+      if (node.selected && node.id !== focusedNodeId) {
+        nodeChanges.push({
+          id: node.id,
+          type: "select",
+          selected: false
+        });
+      }
+    }
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: "select",
+      selected: true
+    });
+    if (edgeChanges.length > 0) {
+      triggerEdgeChanges(edgeChanges);
+    }
+    triggerNodeChanges(nodeChanges);
+    const { width, height } = container.getBoundingClientRect();
+    const maxZoom = Math.max(1, transform[2]);
+    const viewport = getViewportForBounds(
+      {
+        x: focusBounds.x - 16,
+        y: focusBounds.y - 16,
+        width: focusBounds.width + 32,
+        height: focusBounds.height + 32
+      },
+      width,
+      height,
+      MinZoom,
+      maxZoom,
+      0
+    );
+    panZoom == null ? void 0 : panZoom.setViewport(viewport, {
+      duration: 350
+    });
+  }, [focusedNodeId]);
+  useHotkeys(
+    focusedNodeId !== null ? [
+      ["Escape", (e) => {
+        e.stopPropagation();
+        const { resetFocusAndLastClicked, fitDiagram } = diagramStore.getState();
+        resetFocusAndLastClicked();
+        fitDiagram();
+      }, { preventDefault: true }]
+    ] : []
+  );
+  return null;
+}
+export {
+  SelectEdgesOnNodeFocus
+};

package/dist/xyflow/XYFlow.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+type XYFlowWrapperProps = PropsWithChildren<{
+    colorMode?: 'system' | 'light' | 'dark';
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+}>;
+export declare function XYFlow({ colorMode, className, children, style }: XYFlowWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/xyflow/XYFlow.js

@@ -0,0 +1,145 @@
+import { jsx } from "react/jsx-runtime";
+import { useOnViewportChange, ReactFlow } from "@xyflow/react";
+import { shallowEqual } from "fast-equals";
+import "react";
+import { useDiagramState } from "../hooks/useDiagramState.js";
+import { useXYStoreApi } from "../hooks/useXYFlow.js";
+import { MaxZoom, MinZoom } from "./const.js";
+import { RelationshipEdge } from "./edges/RelationshipEdge.js";
+import { useLayoutConstraints } from "./useLayoutConstraints.js";
+import { useXYFlowEvents } from "./useXYFlowEvents.js";
+import { ElementNodeMemo } from "./nodes/element/ElementNode.js";
+import { CompoundNodeMemo } from "./nodes/compound/CompoundNode.js";
+const nodeTypes = {
+  element: ElementNodeMemo,
+  compound: CompoundNodeMemo
+};
+const edgeTypes = {
+  relationship: RelationshipEdge
+};
+const selector = (s) => ({
+  nodes: s.xynodes,
+  edges: s.xyedges,
+  onInit: s.onInit,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
+  nodesDraggable: s.nodesDraggable,
+  fitView: s.fitViewEnabled,
+  fitViewPadding: s.fitViewPadding,
+  // hasOnNavigateTo: !!s.onNavigateTo,
+  // hasOnNodeClick: !!s.onNodeClick,
+  hasOnNodeContextMenu: !!s.onNodeContextMenu,
+  hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
+  hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
+  hasOnEdgeClick: !!s.onEdgeClick,
+  zoomable: s.zoomable,
+  pannable: s.pannable,
+  // If fitView is not enabled
+  // And diagram starts with a negative x or y - we need to translate viewprot
+  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
+  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
+});
+function XYFlow({
+  colorMode = "system",
+  className,
+  children,
+  style
+}) {
+  const xyflowApi = useXYStoreApi();
+  const {
+    nodes,
+    edges,
+    onInit,
+    onNodesChange,
+    onEdgesChange,
+    nodesSelectable,
+    nodesDraggable,
+    fitView,
+    fitViewPadding,
+    pannable,
+    zoomable,
+    hasOnNodeContextMenu,
+    hasOnCanvasContextMenu,
+    hasOnEdgeContextMenu,
+    translateX,
+    translateY
+  } = useDiagramState(selector, shallowEqual);
+  const layoutConstraints = useLayoutConstraints();
+  const {
+    onNodeContextMenu,
+    onPaneContextMenu,
+    onEdgeContextMenu,
+    ...handlers
+  } = useXYFlowEvents();
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const roundedX = Math.round(x), roundedY = Math.round(y);
+      if (x !== roundedX || y !== roundedY) {
+        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] });
+      }
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    ReactFlow,
+    {
+      className,
+      style,
+      ...colorMode && { colorMode },
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onInit,
+      nodeTypes,
+      edgeTypes,
+      zoomOnPinch: zoomable,
+      zoomOnScroll: !pannable && zoomable,
+      ...!zoomable && {
+        zoomActivationKeyCode: null
+      },
+      zoomOnDoubleClick: false,
+      maxZoom: zoomable ? MaxZoom : 1,
+      minZoom: zoomable ? MinZoom : 1,
+      fitView: false,
+      fitViewOptions: {
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: true
+      },
+      ...!fitView && {
+        viewport: {
+          x: translateX,
+          y: translateY,
+          zoom: 1
+        }
+      },
+      preventScrolling: zoomable || pannable,
+      defaultMarkerColor: "var(--xy-edge-stroke)",
+      noDragClassName: "nodrag",
+      noPanClassName: "nopan",
+      panOnScroll: pannable,
+      panOnDrag: pannable,
+      ...!pannable && {
+        selectionKeyCode: null
+      },
+      elementsSelectable: nodesSelectable,
+      nodesFocusable: nodesDraggable || nodesSelectable,
+      edgesFocusable: false,
+      nodesDraggable,
+      ...nodesDraggable && layoutConstraints,
+      nodeDragThreshold: 4,
+      elevateNodesOnSelect: false,
+      selectNodesOnDrag: false,
+      ...hasOnNodeContextMenu && { onNodeContextMenu },
+      ...hasOnCanvasContextMenu && { onPaneContextMenu },
+      ...hasOnEdgeContextMenu && { onEdgeContextMenu },
+      ...handlers,
+      children
+    }
+  );
+}
+export {
+  XYFlow
+};

package/dist/xyflow/XYFlowBackground.d.ts

@@ -0,0 +1,10 @@
+import { BackgroundProps } from '@xyflow/react';
+import { OverrideProperties } from 'type-fest';
+export type XYBackgroundVariant = 'dots' | 'lines' | 'cross';
+export type XYBackground = XYBackgroundVariant | OverrideProperties<BackgroundProps, {
+    variant: XYBackgroundVariant;
+}>;
+export type XYBackgroundProps = {
+    background: XYBackground;
+};
+export declare function XYFlowBackground({ background }: XYBackgroundProps): import("react/jsx-runtime").JSX.Element;

package/dist/xyflow/XYFlowBackground.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { nonexhaustive } from "@likec4/core";
+import { Background, BackgroundVariant } from "@xyflow/react";
+function literalToEnum(value) {
+  switch (value) {
+    case "dots":
+      return BackgroundVariant.Dots;
+    case "lines":
+      return BackgroundVariant.Lines;
+    case "cross":
+      return BackgroundVariant.Cross;
+    default:
+      nonexhaustive(value);
+  }
+}
+function XYFlowBackground({ background }) {
+  if (typeof background === "string") {
+    return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(background), size: 2, gap: 20 });
+  }
+  const { variant, ...rest } = background;
+  return /* @__PURE__ */ jsx(Background, { variant: literalToEnum(variant), ...rest });
+}
+export {
+  XYFlowBackground
+};

package/dist/xyflow/XYFlowInner.d.ts

@@ -0,0 +1,8 @@
+import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
+import { NamedExoticComponent } from 'react';
+type XYFlowInnerProps = {
+    background: NonNullable<LikeC4DiagramProperties['background']>;
+    showDiagramTitle: boolean;
+};
+export declare const XYFlowInner: NamedExoticComponent<XYFlowInnerProps>;
+export {};

package/dist/xyflow/XYFlowInner.js

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+import { memo } from "react";
+import { isNonNullish } from "remeda";
+import { useDiagramState } from "../hooks/useDiagramState.js";
+import DiagramTitlePanel from "../ui/DiagramTitlePanel.js";
+import { DynamicViewWalkthrough } from "../ui/DynamicViewWalkthrough.js";
+import { TopLeftPanel } from "../ui/top-left/TopLeftPanel.js";
+import { XYFlowBackground } from "./XYFlowBackground.js";
+import { NotationPanel } from "../ui/notation/NotationPanel.js";
+const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
+  background,
+  showDiagramTitle
+}) {
+  const {
+    showNotations,
+    isDynamicView,
+    showTopLeft,
+    isDynamicViewActive,
+    enableDynamicViewWalkthrough
+  } = useDiagramState((s) => ({
+    showNotations: s.showNotations,
+    isDynamicView: s.isDynamicView,
+    showTopLeft: s.controls || s.showNavigationButtons && !!s.onNavigateTo || !!s.onBurgerMenuClick,
+    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
+    isDynamicViewActive: isNonNullish(s.activeWalkthrough)
+  }));
+  const isBgWithPattern = background !== "transparent" && background !== "solid";
+  const isDiagramTitleVisible = showDiagramTitle && !isDynamicViewActive;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isBgWithPattern && /* @__PURE__ */ jsx(XYFlowBackground, { background }),
+    showTopLeft && /* @__PURE__ */ jsx(TopLeftPanel, {}),
+    isDiagramTitleVisible && /* @__PURE__ */ jsx(DiagramTitlePanel, {}),
+    isDynamicView && enableDynamicViewWalkthrough && /* @__PURE__ */ jsx(DynamicViewWalkthrough, {}),
+    showNotations && /* @__PURE__ */ jsx(NotationPanel, {})
+  ] });
+}, deepEqual);
+XYFlowInner.displayName = "XYFlowInner";
+export {
+  XYFlowInner
+};

package/dist/xyflow/const.d.ts

@@ -0,0 +1,7 @@
+export declare const ZIndexes: {
+    readonly Compound: 2;
+    readonly Edge: 4;
+    readonly Element: 6;
+};
+export declare const MinZoom = 0.1;
+export declare const MaxZoom = 2;

package/dist/xyflow/const.js

@@ -0,0 +1,12 @@
+const ZIndexes = {
+  Compound: 2,
+  Edge: 4,
+  Element: 6
+};
+const MinZoom = 0.1;
+const MaxZoom = 2;
+export {
+  MaxZoom,
+  MinZoom,
+  ZIndexes
+};

package/dist/xyflow/edges/EdgeLabel.d.ts

@@ -0,0 +1,7 @@
+import { BoxProps } from '@mantine/core';
+import { DiagramFlowTypes } from '../types';
+export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
+    isDimmed: boolean;
+    edgeData: DiagramFlowTypes.DiagramEdgeData;
+}
+export declare const EdgeLabel: ({ isDimmed, edgeData: { label, edge, }, ...props }: EdgeLabelProps) => import("react/jsx-runtime").JSX.Element;