@likec4/diagram 1.25.0 → 1.26.0

package/dist/LikeC4Diagram.js

@@ -3,10 +3,10 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { useRef } from "react";
 import { isEmpty } from "remeda";
 import { ControlsCustomLayoutProvider } from "./context/ControlsCustomLayout.js";
-import { ReducedGraphicsContext } from "./hooks/useIsReducedGraphics.js";
+import { ReduceGraphicsContext } from "./context/ReduceGraphics.js";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
+import { LikeC4DiagramXYFlow } from "./likec4diagram/DiagramXYFlow.js";
 import { useViewToNodesEdges } from "./likec4diagram/useViewToNodesEdges.js";
-import { LikeC4DiagramXYFlow } from "./likec4diagram/XYFlow.js";
 import { DiagramActorProvider } from "./state/DiagramActorProvider.js";
 import { useLikeC4Model } from "./likec4model/useLikeC4Model.js";
 import { EnsureMantine } from "./context/EnsureMantine.js";
@@ -115,7 +115,7 @@ function LikeC4Diagram({
                 onOpenSource,
                 onBurgerMenuClick
               },
-              children: /* @__PURE__ */ jsx(ReducedGraphicsContext, { value: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: [
+              children: /* @__PURE__ */ jsx(ReduceGraphicsContext, { reduceGraphics: isReducedGraphicsMode, children: /* @__PURE__ */ jsxs(RootContainer, { className, reduceGraphics: isReducedGraphicsMode, children: [
                 !isEmpty(view.customColorDefinitions) && /* @__PURE__ */ jsx(LikeC4CustomColors, { customColors: view.customColorDefinitions }),
                 /* @__PURE__ */ jsx(
                   ReactFlowProvider,

package/dist/base/BaseXYFlow.d.ts

@@ -11,4 +11,4 @@ export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Ed
     fitViewPadding?: number;
     onViewportResize?: undefined | (() => void);
 } & SetRequired<Omit<ReactFlowProps<NodeType, EdgeType>, 'defaultNodes' | 'defaultEdges' | 'panOnScroll' | 'panOnDrag' | 'preventScrolling' | 'zoomOnPinch' | 'zoomActivationKeyCode' | 'zoomOnScroll' | 'elementsSelectable' | 'onNodeDoubleClick' | 'onEdgeDoubleClick' | 'fitViewOptions'>, 'nodes' | 'edges' | 'onNodesChange' | 'onEdgesChange'>>;
-export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;
+export declare const BaseXYFlow: <NodeType extends Base.Node, EdgeType extends Base.Edge>({ nodes, edges, onEdgesChange, onNodesChange, className, pannable, zoomable, nodesSelectable, nodesDraggable, background, children, colorMode, fitViewPadding, fitView, zoomOnDoubleClick, onViewportResize, onMoveEnd, ...props }: BaseXYFlowProps<NodeType, EdgeType>) => import("react/jsx-runtime").JSX.Element;

package/dist/base/BaseXYFlow.js

@@ -1,10 +1,8 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallbackRef } from "@mantine/hooks";
-import { ReactFlow, useStoreApi, useOnViewportChange, useStore } from "@xyflow/react";
+import { ReactFlow, useStore } from "@xyflow/react";
 import clsx from "clsx";
-import { shallowEqual } from "fast-equals";
-import { useRef, useEffect, useMemo } from "react";
-import { useIsReducedGraphics } from "../hooks/useIsReducedGraphics.js";
+import { useMemo } from "react";
 import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
 import { useIsZoomTooSmall, useXYStoreApi } from "../hooks/useXYFlow.js";
 import { cssReactFlow, cssDisablePan, cssTransparentBg } from "../LikeC4Diagram.css.js";
@@ -12,6 +10,7 @@ import { stopPropagation } from "../utils/xyflow.js";
 import { Background } from "./Background.js";
 import { MinZoom, MaxZoom } from "./const.js";
 import { Base } from "./types.js";
+import { useIsReducedGraphics } from "../context/ReduceGraphics.js";
 const BaseXYFlow = ({
   nodes,
   edges,
@@ -29,18 +28,13 @@ const BaseXYFlow = ({
   fitView = true,
   zoomOnDoubleClick = false,
   onViewportResize,
+  onMoveEnd,
   ...props
 }) => {
   const isBgWithPattern = background !== "transparent" && background !== "solid";
   const isZoomTooSmall = useIsZoomTooSmall();
   const reduceGraphics = useIsReducedGraphics();
-  const isPanningRef = useRef(false);
   const xystore = useXYStoreApi();
-  useEffect(() => {
-    return xystore.subscribe((state) => {
-      isPanningRef.current = state.paneDragging;
-    });
-  }, [xystore]);
   return /* @__PURE__ */ jsxs(
     ReactFlow,
     {
@@ -95,8 +89,14 @@ const BaseXYFlow = ({
       selectNodesOnDrag: false,
       onNodesChange,
       onEdgesChange,
+      onMoveEnd: useCallbackRef((event, { x, y, zoom }) => {
+        const roundedX = Math.round(x), roundedY = Math.round(y);
+        if (x !== roundedX || y !== roundedY) {
+          xystore.setState({ transform: [roundedX, roundedY, zoom] });
+        }
+        onMoveEnd == null ? void 0 : onMoveEnd(event, { x: roundedX, y: roundedY, zoom });
+      }),
       onNodeMouseEnter: useCallbackRef((_event, node) => {
-        if (isPanningRef.current) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -104,7 +104,6 @@ const BaseXYFlow = ({
         }]);
       }),
       onNodeMouseLeave: useCallbackRef((_event, node) => {
-        if (node.data.hovered !== true) return;
         onNodesChange([{
           id: node.id,
           type: "replace",
@@ -112,7 +111,6 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseEnter: useCallbackRef((_event, edge) => {
-        if (isPanningRef.current) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",
@@ -120,7 +118,6 @@ const BaseXYFlow = ({
         }]);
       }),
       onEdgeMouseLeave: useCallbackRef((_event, edge) => {
-        if (edge.data.hovered !== true) return;
         onEdgesChange([{
           id: edge.id,
           type: "replace",
@@ -132,33 +129,19 @@ const BaseXYFlow = ({
       ...props,
       children: [
         isBgWithPattern && /* @__PURE__ */ jsx(Background, { background }),
-        /* @__PURE__ */ jsx(BaseXYFlowInner, { onViewportResize }),
+        onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }),
         children
       ]
     }
   );
 };
-const BaseXYFlowInner = ({
-  onViewportResize
-}) => {
-  const xyflowApi = useStoreApi();
-  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(Fragment, { children: onViewportResize && /* @__PURE__ */ jsx(ViewportResizeHanlder, { onViewportResize }) });
-};
-const selectDimensions = ({ width, height }) => ({ width, height });
+const selectDimensions = ({ width, height }) => (width || 1) * (height || 1);
 const ViewportResizeHanlder = ({
   onViewportResize
 }) => {
-  const { width, height } = useStore(selectDimensions, shallowEqual);
-  useUpdateEffect(onViewportResize, [width, height]);
-  return /* @__PURE__ */ jsx(Fragment, {});
+  const square = useStore(selectDimensions);
+  useUpdateEffect(onViewportResize, [square]);
+  return null;
 };
 export {
   BaseXYFlow

package/dist/base/example/custom.d.ts

@@ -37,9 +37,9 @@ export declare const edgeTypes: {
         style?: CSSProperties;
         id: string;
         selected?: boolean;
-        selectable?: boolean;
-        deletable?: boolean;
         animated?: boolean;
+        deletable?: boolean;
+        selectable?: boolean;
         sourceX: number;
         sourceY: number;
         targetX: number;

package/dist/base/primitives/compound/CompoundNodeContainer.js

@@ -5,8 +5,8 @@ import clsx from "clsx";
 import { m } from "framer-motion";
 import { forwardRef } from "react";
 import { isNumber, clamp } from "remeda";
-import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { compoundBorder, indicator, container, varCompoundOpacity, varBorderTransparency } from "./CompoundNodeContainer.css.js";
+import { useIsReducedGraphics } from "../../../context/ReduceGraphics.js";
 function getVarName(variable) {
   var matches = variable.match(/^var\((.*)\)$/);
   if (matches) {

package/dist/base/primitives/customEdge.d.ts

@@ -1,20 +1,16 @@
 import { FunctionComponent, NamedExoticComponent, CSSProperties, ReactNode } from 'react';
 import { Base, EdgeProps } from '../types';
 import { Position } from '@xyflow/system';
-export declare const edgePropsEqual: <P extends Record<string, unknown> = {
-    hovered?: boolean;
-    active?: boolean;
-    dimmed?: Base.Dimmed;
-}>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
+export declare const edgePropsEqual: <P extends Record<string, unknown> = Base.EdgeData>(prev: EdgeProps<P>, next: EdgeProps<P>) => boolean;
 export declare function customEdge<P extends Record<string, unknown> = Base.NodeData>(Edge: FunctionComponent<EdgeProps<P>>): NamedExoticComponent<{
     source: string;
     target: string;
     style?: CSSProperties;
     id: string;
     selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
     animated?: boolean;
+    deletable?: boolean;
+    selectable?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;

package/dist/base/primitives/customNode.d.ts

@@ -1,7 +1,4 @@
 import { FunctionComponent, NamedExoticComponent } from 'react';
 import { Base, NodeProps } from '../types';
-export declare const nodePropsEqual: <P extends Record<string, unknown> = {
-    hovered?: boolean;
-    dimmed?: Base.Dimmed;
-}>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
+export declare const nodePropsEqual: <P extends Record<string, unknown> = Base.NodeData>(prev: NodeProps<P>, next: NodeProps<P>) => boolean;
 export declare function customNode<P extends Record<string, unknown> = Base.NodeData>(Node: FunctionComponent<NodeProps<P>>): NamedExoticComponent<NodeProps<P>>;

package/dist/base/primitives/edge/EdgePath.d.ts

@@ -7,9 +7,9 @@ export declare const EdgePath: ForwardRefExoticComponent<{
     style?: CSSProperties;
     id: string;
     selected?: boolean;
-    selectable?: boolean;
-    deletable?: boolean;
     animated?: boolean;
+    deletable?: boolean;
+    selectable?: boolean;
     sourceX: number;
     sourceY: number;
     targetX: number;

package/dist/base/primitives/edge/EdgePath.js

@@ -1,24 +1,27 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import { useIsReducedGraphics } from "../../../hooks/useIsReducedGraphics.js";
 import { markerContext, edgePathBg, cssEdgePath } from "./edge.css.js";
 import { arrowTypeToMarker, EdgeMarkers } from "./EdgeMarkers.js";
+import { useIsReducedGraphics, useLooseReducedGraphics } from "../../../context/ReduceGraphics.js";
 const EdgePath = forwardRef(({
   id,
   data: {
     line,
     dir,
     tail,
-    head
+    head,
+    ...data
   },
   strokeWidth,
   svgPath,
   style,
+  animated = false,
   interactionWidth,
   onEdgePointerDown
 }, svgPathRef) => {
-  const isReducedGraphicsMode = useIsReducedGraphics();
+  const isReducedGraphics = useIsReducedGraphics();
+  const isLooseReduce = useLooseReducedGraphics();
   let markerStartName = arrowTypeToMarker(tail);
   let markerEndName = arrowTypeToMarker(head ?? "normal");
   if (dir === "back") {
@@ -34,8 +37,18 @@ const EdgePath = forwardRef(({
   } else if (isDashed) {
     strokeDasharray = "8,10";
   }
+  if (isLooseReduce) {
+    strokeDasharray = void 0;
+  }
+  const isAnimated = (animated || data.hovered || data.active) && !data.dimmed;
+  if (isLooseReduce && isAnimated) {
+    style = {
+      ...style,
+      animationName: "none"
+    };
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isReducedGraphicsMode && /* @__PURE__ */ jsx(
+    !isLooseReduce && /* @__PURE__ */ jsx(
       "path",
       {
         className: clsx("react-flow__edge-interaction"),
@@ -50,7 +63,7 @@ const EdgePath = forwardRef(({
         MarkerStart && /* @__PURE__ */ jsx(MarkerStart, { id: "start" + id }),
         MarkerEnd && /* @__PURE__ */ jsx(MarkerEnd, { id: "end" + id })
       ] }),
-      !isReducedGraphicsMode && /* @__PURE__ */ jsx(
+      !isReducedGraphics && /* @__PURE__ */ jsx(
         "path",
         {
           className: clsx("react-flow__edge-path", edgePathBg),
@@ -65,16 +78,14 @@ const EdgePath = forwardRef(({
           ref: svgPathRef,
           className: clsx(
             "react-flow__edge-path",
-            isReducedGraphicsMode && "react-flow__edge-interaction",
+            "react-flow__edge-interaction",
             cssEdgePath
           ),
           d: svgPath,
           style,
           strokeWidth,
-          ...!isReducedGraphicsMode && {
-            strokeLinecap: "round",
-            strokeDasharray
-          },
+          strokeLinecap: "round",
+          strokeDasharray,
           markerStart: MarkerStart ? `url(#start${id})` : void 0,
           markerEnd: MarkerEnd ? `url(#end${id})` : void 0
         }

package/dist/base/primitives/edge/edge.css.d.ts

@@ -4,3 +4,4 @@ export declare const edgeContainer: string;
 export declare const edgePathBg: string;
 export declare const markerContext: string;
 export declare const cssEdgePath: string;
+export declare const looseReduce: string;

package/dist/context/DiagramFeatures.js

@@ -1,8 +1,7 @@
 import { jsx, Fragment } from "react/jsx-runtime";
-import { useCustomCompareEffect } from "@react-hookz/web";
-import { useContext, createContext, useState } from "react";
+import { shallowEqual } from "fast-equals";
+import { useContext, createContext, useState, useEffect } from "react";
 import { mapToObj, pick, map } from "remeda";
-import { depsShallowEqual } from "../hooks/useUpdateEffect.js";
 const FeatureNames = [
   "Controls",
   "ReadOnly",
@@ -68,20 +67,22 @@ function DiagramFeatures({
   features,
   overrides
 }) {
-  const scope = useContext(DiagramFeaturesContext);
-  const [enabled, setFeatures] = useState(scope);
-  useCustomCompareEffect(
+  const outerScope = useContext(DiagramFeaturesContext);
+  const [scope, setScope] = useState(outerScope);
+  useEffect(
     () => {
-      setFeatures(validate({
-        ...scope,
-        ...features,
-        ...overrides
-      }));
+      setScope((current) => {
+        const next = validate({
+          ...outerScope,
+          ...features,
+          ...overrides
+        });
+        return shallowEqual(current, next) ? current : next;
+      });
     },
-    [scope, features, overrides],
-    depsShallowEqual
+    [outerScope, features, overrides]
   );
-  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: enabled, children });
+  return /* @__PURE__ */ jsx(DiagramFeaturesContext.Provider, { value: scope, children });
 }
 DiagramFeatures.Overlays = ({ children }) => {
   return /* @__PURE__ */ jsx(

package/dist/context/IconRenderer.d.ts

@@ -1,7 +1,9 @@
 import { ElementShape } from '@likec4/core';
+import { PropsWithChildren } from 'react';
 import { ElementIconRenderer } from '../LikeC4Diagram.props';
-import { Provider } from 'react';
-export declare const IconRendererProvider: Provider<ElementIconRenderer | null>;
+export declare function IconRendererProvider({ value, children, }: PropsWithChildren<{
+    value: ElementIconRenderer | null;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function IconRenderer({ element, className, }: {
     element?: {
         id: string;

package/dist/context/IconRenderer.js

@@ -1,9 +1,18 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, Fragment } from "react/jsx-runtime";
 import { IconCylinder, IconRectangularPrism, IconReorder, IconUser, IconDeviceMobile, IconBrowser } from "@tabler/icons-react";
 import clsx from "clsx";
-import { createContext, useContext } from "react";
+import { useContext, createContext } from "react";
 const IconRendererContext = createContext(null);
-const IconRendererProvider = IconRendererContext.Provider;
+function IconRendererProvider({
+  value,
+  children
+}) {
+  const outerScope = useContext(IconRendererContext);
+  if (outerScope) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(IconRendererContext.Provider, { value, children });
+}
 function IconRenderer({
   element,
   className

package/dist/context/ReduceGraphics.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Hook to determine if reduced graphics mode is enabled.
+ */
+export declare function useIsReducedGraphics(): boolean;
+/**
+ * Reduce graphics when reduced mode is enabled and pan/zoom is active.
+ */
+export declare function useLooseReducedGraphics(): boolean;
+export declare function ReduceGraphicsContext({ reduceGraphics, children }: PropsWithChildren<{
+    reduceGraphics: boolean;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare function ReduceGraphicsViewportListener(): null;

package/dist/context/ReduceGraphics.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { createSafeContext, createOptionalContext } from "@mantine/core";
+import { useTimeout } from "@mantine/hooks";
+import { useStore } from "@nanostores/react";
+import { useStoreApi } from "@xyflow/react";
+import { atom } from "nanostores";
+import { useRef, useMemo, useEffect } from "react";
+const [ReduceGraphicsModeCtx, useReducedGraphics] = createOptionalContext();
+function useIsReducedGraphics() {
+  const isReduced = useReducedGraphics();
+  if (isReduced === null) {
+    console.warn("ReduceGraphicsMode is not provided");
+  }
+  return isReduced ?? false;
+}
+const [PanningAtomSafeCtx, usePanningAtom] = createSafeContext(
+  "PanningAtomSafeCtx is not provided"
+);
+const [LooseReduceGraphicsAtomCtx, useLooseReduceGraphicsAtom] = createOptionalContext();
+const $defaultLooseReduceGraphics = atom(false);
+function useLooseReducedGraphics() {
+  const $isPanning = useLooseReduceGraphicsAtom() ?? $defaultLooseReduceGraphics;
+  return useStore($isPanning);
+}
+function ReduceGraphicsContext({ reduceGraphics, children }) {
+  const $isPanningRef = useRef(null);
+  if (!$isPanningRef.current) {
+    $isPanningRef.current = atom(reduceGraphics);
+  }
+  const looseReduceGraphics = useMemo(() => {
+    return reduceGraphics ? $isPanningRef.current : atom(false);
+  }, [reduceGraphics, $isPanningRef.current]);
+  return /* @__PURE__ */ jsx(PanningAtomSafeCtx, { value: $isPanningRef.current, children: /* @__PURE__ */ jsx(LooseReduceGraphicsAtomCtx, { value: looseReduceGraphics, children: /* @__PURE__ */ jsx(ReduceGraphicsModeCtx, { value: reduceGraphics, children }) }) });
+}
+function ReduceGraphicsViewportListener() {
+  const store = useStoreApi();
+  const $isPanning = usePanningAtom();
+  const notPanning = useTimeout(() => {
+    $isPanning.set(false);
+  }, 150);
+  useEffect(() => {
+    store.setState({
+      onViewportChangeStart: () => {
+        notPanning.clear();
+      },
+      onViewportChange: () => {
+        $isPanning.set(true);
+      },
+      onViewportChangeEnd: () => {
+        notPanning.start();
+      }
+    });
+  }, [$isPanning, store]);
+  return null;
+}
+export {
+  ReduceGraphicsContext,
+  ReduceGraphicsViewportListener,
+  useIsReducedGraphics,
+  useLooseReducedGraphics
+};