@likec4/diagram 1.27.3 → 1.28.1

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

@@ -2,7 +2,7 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ancestorsFqn } from '@likec4/core';
 import { useTree, Group, Box, Popover, PopoverTarget, Button, Text, PopoverDropdown, ScrollAreaAutosize, Tree, ActionIcon, Tooltip, SegmentedControl } from '@mantine/core';
 import { IconSelector, IconChevronRight } from '@tabler/icons-react';
-import { memo, useRef, useEffect } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks.js';
 import * as SelectElement_css from './SelectElement.css.js';
 import { scrollArea } from './SelectElement.css.js';
@@ -20,7 +20,9 @@ const selector2 = (state) => {
     enableChangeScope: state.context.enableChangeScope
   };
 };
-const SelectElement = memo(() => {
+const setHoveredNode = () => {
+};
+const SelectElement = reactExports.memo(() => {
   const browser = useRelationshipsBrowser();
   const {
     subjectId,
@@ -30,15 +32,16 @@ const SelectElement = memo(() => {
     enableSelectSubject,
     enableChangeScope
   } = useRelationshipsBrowserState(selector2);
-  const root = useRef(null);
-  const viewport = useRef(null);
+  const root = reactExports.useRef(null);
+  const viewport = reactExports.useRef(null);
   const model = useLikeC4Model(true);
   const subject = model.findElement(subjectId);
   const data = useLikeC4ElementsTree(scope === "view" && viewId ? viewId : void 0);
   const tree = useTree({
     multiple: false
   });
-  useEffect(() => {
+  tree.setHoveredNode = setHoveredNode;
+  reactExports.useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach((id) => {
       tree.expand(id);
     });

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

@@ -1140,7 +1140,7 @@ export declare const relationshipsBrowserLogic: StateMachine<Readonly<{
                                     active?: boolean;
                                     dimmed?: Base.Dimmed;
                                 };
-                            }> & Omit< ViewportHelperFunctions, "initialized"> & {
+                            }> & ViewportHelperFunctions & {
                                 viewportInitialized: boolean;
                             };
                             xystore: {

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

@@ -1,6 +1,6 @@
 import { invariant, nonNullable, delay } from '@likec4/core';
 import { applyEdgeChanges, applyNodeChanges } from '@xyflow/react';
-import { getViewportForBounds, getNodeDimensions } from '@xyflow/system';
+import { getViewportForBounds } from '@xyflow/system';
 import { prop, omit, isNullish } from 'remeda';
 import { setup, assign, fromPromise, assertEvent, enqueueActions, cancel, raise } from 'xstate';
 import { MinZoom, ZIndexes } from '../../base/const.js';
@@ -55,8 +55,6 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
   };
   const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id);
   const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode);
-  const existingInternalNode = xyflow.getInternalNode(existingNode.id);
-  const existingDimensions = getNodeDimensions(existingInternalNode);
   const nested = /* @__PURE__ */ new Set();
   currentNodes.forEach((n) => {
     if (n.id === existingNode.id) {
@@ -88,8 +86,8 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
       return {
         ...omit(n, ["parentId"]),
         position: {
-          x: currentSubjectCenter.x - existingDimensions.width / 2,
-          y: currentSubjectCenter.y - existingDimensions.height / 2
+          x: currentSubjectCenter.x - n.initialWidth / 2,
+          y: currentSubjectCenter.y - n.initialHeight / 2
         },
         zIndex: ZIndexes.Max,
         hidden: false,
@@ -105,16 +103,12 @@ const layouter = fromPromise(async ({ input, self, signal }) => {
     xynodes: currentNodes,
     xyedges: []
   });
-  zoom = Math.min(
-    zoom,
-    nextviewport.zoom
-  );
-  await delay(175);
+  await delay(120);
   next.xynodes = next.xynodes.map(Base.setDimmed(false));
   if (signal.aborted) {
     return updateXYData();
   }
-  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 });
+  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 300 });
   await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom });
   return updateXYData();
 });
@@ -414,7 +408,7 @@ const relationshipsBrowserLogic = setup({
                   xyedges: event.output.xyedges,
                   navigateFromNode: null
                 });
-                enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 50 });
+                enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 50 });
                 for (let i = 0; i < 6; i++) {
                   enqueue.raise({ type: "xyflow.updateNodeInternals" }, { delay: 100 + i * 100 });
                 }

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

@@ -1 +1,2 @@
-export declare const ViewPadding = 0.1;
+import { Padding } from '@xyflow/system';
+export declare const ViewPadding: Padding;

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

@@ -1,3 +1,8 @@
-const ViewPadding = 0.1;
+const ViewPadding = {
+  top: "40px",
+  bottom: "16px",
+  left: "16px",
+  right: "16px"
+};
 
 export { ViewPadding };

package/dist/overlays/relationships-browser/custom/edgeTypes.js

@@ -72,13 +72,12 @@ const RelationshipEdge = customEdge((props) => {
     /* @__PURE__ */ jsx(
       EdgePath,
       {
-        ...edgeProps,
+        edgeProps,
         svgPath,
         ...markOrange && {
           strokeWidth: 5
         }
-      },
-      id
+      }
     ),
     /* @__PURE__ */ jsx(
       EdgeLabelContainer,
@@ -95,7 +94,7 @@ const RelationshipEdge = customEdge((props) => {
         children: label
       }
     )
-  ] }, id);
+  ] });
 });
 
 export { RelationshipEdge };

package/dist/overlays/relationships-browser/custom/nodeTypes.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Handle } from '@xyflow/react';
 import { Position } from '@xyflow/system';
-import { m } from 'framer-motion';
+import * as m from 'motion/react-m';
 import { useDiagram } from '../../../hooks/useDiagram.js';
 import { ElementActions } from './ElementActions.js';
 import { EmptyNode as EmptyNode$1 } from './EmptyNode.js';
@@ -29,7 +29,7 @@ const ElementDetailsButtonWithHandler = (props) => {
 const ElementNode = customNode((props) => {
   return /* @__PURE__ */ jsxs(ElementNodeContainer, { component: m.div, layoutId: props.id, nodeProps: props, children: [
     /* @__PURE__ */ jsx(ElementShape, { ...props }),
-    /* @__PURE__ */ jsx(ElementTitle, { ...props, iconSize: 40 }),
+    /* @__PURE__ */ jsx(ElementTitle, { ...props }),
     /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
     /* @__PURE__ */ jsx(ElementActions, { ...props }),
     /* @__PURE__ */ jsx(ElementPorts, { ...props })

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

@@ -57,7 +57,7 @@ export declare function useRelationshipsBrowser(): {
                 active?: boolean;
                 dimmed?: import("../../base").Base.Dimmed;
             };
-        }> & Omit< ViewportHelperFunctions, "initialized"> & {
+        }> & ViewportHelperFunctions & {
             viewportInitialized: boolean;
         }) | null;
         xystore: XYStoreApi | null;

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

@@ -2,11 +2,11 @@ import { nonNullable } from '@likec4/core';
 import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { createContext, useMemo, useContext } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 
-const RelationshipsBrowserActorContext = createContext(null);
+const RelationshipsBrowserActorContext = reactExports.createContext(null);
 function useRelationshipsBrowserActor() {
-  return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
+  return nonNullable(reactExports.useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
 }
 function useRelationshipsBrowserState(selector, compare = shallowEqual) {
   const actor = useRelationshipsBrowserActor();
@@ -14,7 +14,7 @@ function useRelationshipsBrowserState(selector, compare = shallowEqual) {
 }
 function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor();
-  return useMemo(() => ({
+  return reactExports.useMemo(() => ({
     actor,
     get rootElementId() {
       return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { r as reactExports } from '../../_virtual/index.js';
 import dagre from '@dagrejs/dagre';
 import { toArray, invariant, ifind, DefaultMap } from '@likec4/core';
 import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, find, only, unique, tap, reduce, sortBy } from 'remeda';
@@ -454,7 +454,7 @@ function layoutRelationshipsView(data, scope) {
 }
 function useRelationshipsView(subject, viewId, scope) {
   const model = useLikeC4Model(true);
-  return useMemo(() => {
+  return reactExports.useMemo(() => {
     const view = viewId ? model.findView(viewId) : null;
     const data = layoutRelationshipsView(
       computeRelationshipsView(subject, model, viewId, scope),

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

@@ -41,7 +41,6 @@ function viewToNodesEdge(view) {
       draggable: false,
       selectable: true,
       focusable: true,
-      deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {
@@ -140,7 +139,7 @@ function viewToNodesEdge(view) {
       zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
-      deletable: false,
+      // deletable: false,
       data: {
         sourceFqn: edge.sourceFqn,
         targetFqn: edge.targetFqn,

package/dist/state/DiagramActorProvider.js

@@ -3,7 +3,7 @@ import { useDeepCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { useEffect } from 'react';
+import { r as reactExports } from '../_virtual/index.js';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorSafeContext } from '../hooks/safeContext.js';
@@ -27,7 +27,9 @@ function DiagramActorProvider({
     diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
-          handlersRef.current.onNavigateTo?.(viewId);
+          setTimeout(() => {
+            handlersRef.current.onNavigateTo?.(viewId);
+          }, 30);
         },
         "trigger:OnChange": (_, params) => {
           handlersRef.current.onChange?.(params);
@@ -61,7 +63,7 @@ function DiagramActorProvider({
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs });
   }, [inputs]);
-  useEffect(() => {
+  reactExports.useEffect(() => {
     actorRef.send({ type: "update.features", features });
   }, [features]);
   const { xyedges, xynodes } = useViewToNodesEdges({

package/dist/state/diagram-machine.d.ts

@@ -2210,7 +2210,7 @@ export declare const diagramMachine: StateMachine<Context, Events, {
                     readonly params: {
                         readonly duration: 0;
                     };
-                }, "startSyncLayout", ActionFunction<Context, Events, Events, undefined, Values<{
+                }, ActionFunction<Context, Events, Events, undefined, Values<{
                     syncManualLayoutActorLogic: {
                         src: "syncManualLayoutActorLogic";
                         logic: StateMachine<Readonly< Input>, SyncLayoutEvents, {}, never, {
@@ -2463,7 +2463,7 @@ export declare const diagramMachine: StateMachine<Context, Events, {
                         }>;
                         id: "overlays";
                     };
-                }>, never, never, never, never>];
+                }>, never, never, never, never>, "startSyncLayout"];
                 readonly target: "ready";
             }, {
                 readonly target: "initializing";

package/dist/state/diagram-machine.js

@@ -332,7 +332,6 @@ const diagramMachine = setup({
             type: "xyflow:fitDiagram",
             params: { duration: 0 }
           },
-          "startSyncLayout",
           assign(({ context }) => ({
             navigationHistory: {
               currentIndex: 0,
@@ -342,7 +341,8 @@ const diagramMachine = setup({
                 viewport: { ...context.xyflow.getViewport() }
               }]
             }
-          }))
+          })),
+          "startSyncLayout"
         ],
         target: "ready"
       }, {
@@ -743,13 +743,11 @@ const diagramMachine = setup({
                   }
                 }
               });
-              enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 80 });
             } else {
               enqueue({
                 type: "xyflow:setViewportCenter",
                 params: getBBoxCenter(event.view.bounds)
               });
-              enqueue.raise({ type: "fitDiagram", duration: 200 }, { id: "fitDiagram", delay: 25 });
             }
             enqueue.assign(updateNavigationHistory);
             enqueue.assign({
@@ -757,6 +755,7 @@ const diagramMachine = setup({
               lastOnNavigate: null
             });
             enqueue("startSyncLayout");
+            enqueue.raise({ type: "fitDiagram" }, { id: "fitDiagram", delay: 25 });
           }),
           target: "#idle"
         }

package/dist/state/hotkeyActor.js

@@ -3,15 +3,24 @@ import { fromCallback } from 'xstate';
 
 const hotkeyActorLogic = fromCallback(({ sendBack }) => {
   const escHandler = getHotkeyHandler([
-    ["Escape", () => sendBack({ type: "key.esc" }), {
+    ["Escape", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.esc" });
+    }, {
       preventDefault: true
     }]
   ]);
   const arrowshandler = getHotkeyHandler([
-    ["ArrowLeft", () => sendBack({ type: "key.arrow.left" }), {
+    ["ArrowLeft", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.left" });
+    }, {
       preventDefault: true
     }],
-    ["ArrowRight", () => sendBack({ type: "key.arrow.right" }), {
+    ["ArrowRight", (event) => {
+      event.stopPropagation();
+      sendBack({ type: "key.arrow.right" });
+    }, {
       preventDefault: true
     }]
   ]);