@likec4/diagram 1.27.2 → 1.27.3

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

@@ -74,9 +74,10 @@ function EdgeLabelContainer({
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: css({
+          style: {
             display: "contents"
-          }),
+          },
+          // Work around to keep same global selector data-likec4-dimmed
           ...isDimmed !== false && {
             "data-likec4-dimmed": isDimmed
           },

package/dist/base/primitives/element/ElementActionButtons.js

@@ -56,17 +56,19 @@ function ElementActionButtons({
       "data-likec4-hovered": isHovered,
       className: cx("nodrag nopan", actionButtons),
       children: buttons.map((button, index) => /* @__PURE__ */ jsx(
-        m.div,
+        ActionIcon,
         {
+          component: m.button,
+          layout: true,
+          className: actionBtn({}),
           initial: false,
           whileTap: { scale: 1 },
           whileHover: {
             scale: 1.3
           },
-          onTap: (e) => button.onClick(e),
-          onClick: stopPropagation,
+          onClick: button.onClick,
           onDoubleClick: stopPropagation,
-          children: /* @__PURE__ */ jsx(ActionIcon, { className: actionBtn({}), children: button.icon })
+          children: button.icon
         },
         `action-button-${id}-${button.key ?? index}`
       ))

package/dist/hooks/useDiagram.d.ts

@@ -9775,7 +9775,11 @@ export declare function useDiagram(): {
             readonly 'xyflow.applyEdgeChanges': {
                 readonly actions: ActionFunction<DiagramContext, {
                     type: "xyflow.applyEdgeChanges";
-                    changes: EdgeChange<Types.Edge>[];
+                    changes: EdgeChange<
+                    /**
+                     * @warning Do not use in render phase
+                     */
+                    Types.Edge>[];
                 }, Events, undefined, Values<{
                     syncManualLayoutActorLogic: {
                         src: "syncManualLayoutActorLogic";

package/dist/hooks/useDiagram.js

@@ -2,44 +2,33 @@ import '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useTransition, useMemo } from 'react';
+import { useMemo } from 'react';
 import { findDiagramEdge, findDiagramNode } from '../state/utils.js';
 import { useDiagramActorRef } from './safeContext.js';
 
 function useDiagram() {
   const actor = useDiagramActorRef();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     send: actor.send,
     navigateTo: (viewId, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          viewId,
-          ...fromNode && { fromNode }
-        });
+      actor.send({
+        type: "navigate.to",
+        viewId,
+        ...fromNode && { fromNode }
       });
     },
     navigate: (direction) => {
-      startTransition(() => {
-        actor.send({ type: `navigate.${direction}` });
-      });
+      actor.send({ type: `navigate.${direction}` });
     },
     fitDiagram: (duration = 350) => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram", duration });
-      });
+      actor.send({ type: "fitDiagram", duration });
     },
     openRelationshipsBrowser: (fqn) => {
-      startTransition(() => {
-        actor.send({ type: "open.relationshipsBrowser", fqn });
-      });
+      actor.send({ type: "open.relationshipsBrowser", fqn });
     },
     openSource: (params) => {
-      startTransition(() => {
-        actor.send({ type: "open.source", ...params });
-      });
+      actor.send({ type: "open.source", ...params });
     },
     openElementDetails: (fqn, fromNode) => {
       actor.send({ type: "open.elementDetails", fqn, fromNode });

package/dist/likec4diagram/DiagramXYFlow.js

@@ -57,15 +57,13 @@ const LikeC4DiagramXYFlow = memo(({
     onCanvasDblClick
   } = useDiagramEventHandlers();
   const notReadOnly = !enableReadOnly, isReducedGraphics = useIsReducedGraphics(), layoutConstraints = useLayoutConstraints(), $isPanning = usePanningAtom(), isPanning = useTimeout(() => {
-    if (!$isPanning.get()) {
-      $isPanning.set(true);
-    }
-  }, isReducedGraphics ? 150 : 350), notPanning = useDebouncedCallback(() => {
+    $isPanning.set(true);
+  }, isReducedGraphics ? 100 : 200), notPanning = useDebouncedCallback(() => {
     isPanning.clear();
     if ($isPanning.get()) {
       $isPanning.set(false);
     }
-  }, 120), onMove = useCallbackRef((event) => {
+  }, 200), onMove = useCallbackRef((event) => {
     if (!event) {
       return;
     }
@@ -74,7 +72,9 @@ const LikeC4DiagramXYFlow = memo(({
     }
     notPanning();
   }), onMoveEnd = useCallbackRef((event, viewport) => {
-    notPanning.flush();
+    if (!!event) {
+      notPanning.flush();
+    }
     diagram.send({ type: "xyflow.viewportMoved", viewport, manually: !!event });
   }), onViewportResize = useCallbackRef(() => {
     diagram.send({ type: "xyflow.resized" });

package/dist/overlays/overlay/Overlay.css.js

@@ -22,7 +22,7 @@ const dialog = css.raw({
   [backdropBlur]: "0px",
   [level]: "0",
   [offset]: "0px",
-  [inset]: "calc((1 + var(--_level) * 0.5) * var(--_offset))",
+  [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
   [backdropOpacity]: "0%",
   _backdrop: {
     cursor: "zoom-out",
@@ -43,8 +43,8 @@ const dialog = css.raw({
     height: "100vh"
   },
   sm: {
-    inset: "[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]",
-    width: "calc(100vw - var(--_offset) - var(--_inset))",
+    inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+    width: "calc(100vw - 2 * var(--_inset))",
     height: "calc(100vh - var(--_offset) - var(--_inset))",
     [borderRadius]: "6px",
     padding: "6px",

package/dist/overlays/overlay/Overlay.js

@@ -63,15 +63,13 @@ const Overlay = forwardRef(
             [backdropOpacity]: overlayLevel > 0 ? "50%" : "60%",
             scale: 1,
             opacity: 1,
-            translateY: 0,
             transition: {
               delay: 0.075
             }
           },
           exit: {
-            scale: 1.3,
+            scale: 1.2,
             opacity: 0,
-            translateY: -10,
             [backdropBlur]: "0px",
             [backdropOpacity]: "0%"
           }

package/dist/overlays/relationship-details/actor.d.ts

@@ -455,12 +455,22 @@ export declare const relationshipDetailsLogic: StateMachine<Readonly<{
                     }>, {
                         type: "update.layoutData";
                         data: LayoutResult;
-                    }, undefined, Events>, {
-                        readonly type: "xyflow:fitDiagram";
-                        readonly params: {
-                            readonly duration: 0;
+                    }, undefined, Events>, ActionFunction<Readonly<{
+                        subject: Subject;
+                        viewId: ViewId;
+                        xyflow: XYFLowInstance | null;
+                        xystore: XYStoreApi | null;
+                        initialized: {
+                            xydata: boolean;
+                            xyflow: boolean;
                         };
-                    }, ActionFunction<Readonly<{
+                        xynodes: RelationshipDetailsTypes.Node[];
+                        xyedges: RelationshipDetailsTypes.Edge[];
+                        bounds: BBox;
+                    }>, {
+                        type: "update.layoutData";
+                        data: LayoutResult;
+                    }, Events, undefined, never, never, never, never, never>, ActionFunction<Readonly<{
                         subject: Subject;
                         viewId: ViewId;
                         xyflow: XYFLowInstance | null;

package/dist/overlays/relationship-details/actor.js

@@ -218,12 +218,7 @@ const relationshipDetailsLogic = setup({
           actions: [
             "updateLayoutData",
             cancel("fitDiagram"),
-            {
-              type: "xyflow:fitDiagram",
-              params: {
-                duration: 0
-              }
-            },
+            raise({ type: "fitDiagram", duration: 0 }, { id: "fitDiagram", delay: 50 }),
             raise({ type: "xyflow.updateNodeInternals" }, { delay: 75 })
           ]
         },

package/dist/overlays/relationship-details/hooks.js

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useTransition, useMemo, useContext } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const RelationshipDetailsActorContext = createContext(null);
 function useRelationshipDetailsActor() {
@@ -15,7 +15,6 @@ function useRelationshipDetailsState(selector, compare = shallowEqual) {
 }
 function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -31,9 +30,7 @@ function useRelationshipDetails() {
       }
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: "fitDiagram" });
-      });
+      actor.send({ type: "fitDiagram" });
     },
     close: () => {
       if (actor._parent) {

package/dist/overlays/relationship-details/layout-to-xyflow.js

@@ -1,8 +1,4 @@
-import '@dagrejs/dagre';
 import { Queue, nonNullable } from '@likec4/core';
-import '@xstate/react';
-import 'fast-equals';
-import 'react';
 import { hasAtLeast } from 'remeda';
 import { ZIndexes } from '../../base/const.js';
 

package/dist/overlays/relationships-browser/hooks.js

@@ -2,7 +2,7 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useTransition, useMemo, useContext } from 'react';
+import { createContext, useMemo, useContext } from 'react';
 
 const RelationshipsBrowserActorContext = createContext(null);
 function useRelationshipsBrowserActor() {
@@ -14,7 +14,6 @@ function useRelationshipsBrowserState(selector, compare = shallowEqual) {
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
-  const [, startTransition] = useTransition();
   return useMemo(() => ({
     actor,
     get rootElementId() {
@@ -35,12 +34,10 @@ function useRelationshipsBrowser() {
       });
     },
     navigateTo: (subject, fromNode) => {
-      startTransition(() => {
-        actor.send({
-          type: "navigate.to",
-          subject,
-          fromNode
-        });
+      actor.send({
+        type: "navigate.to",
+        subject,
+        fromNode
       });
     },
     fitDiagram: () => {

package/dist/overlays/relationships-browser/layout.d.ts

@@ -11,7 +11,7 @@ export type LayoutRelationshipsViewResult = {
 };
 export declare namespace LayoutRelationshipsViewResult {
     const Empty: ElementKind;
-    type Node = DiagramNode & {
+    type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
         column: RelationshipsBrowserTypes.Column;
         ports: RelationshipsBrowserTypes.Ports;
         existsInCurrentView: boolean;

package/dist/overlays/relationships-browser/layout.js

@@ -13,7 +13,7 @@ const Sizes = {
     edgesep: 25
   },
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1
@@ -235,7 +235,7 @@ function layoutRelationshipsView(data, scope) {
     for (const edge of g.edges()) {
       g.setEdge(edge, {
         ...Sizes.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400
+        width: edgeCount > 25 ? 800 : 400
       });
     }
   }
@@ -346,8 +346,6 @@ function layoutRelationshipsView(data, scope) {
           width,
           height
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -393,8 +391,6 @@ function layoutRelationshipsView(data, scope) {
         ...element.$element.style
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...children.length > 0 && { depth: nodeDepth(id) },
       children,
       width,