@likec4/diagram 1.27.0 → 1.27.1

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

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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';
@@ -44,8 +44,8 @@ const SelectElement = memo(() => {
     });
     tree.select(subjectId);
   }, [subjectId]);
-  return /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", wrap: "nowrap", pos: "relative", children: [
-    enableSelectSubject && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Group, { ref: root, gap: "xs", pos: "relative", children: [
+    enableSelectSubject && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       /* @__PURE__ */ jsx(
         Box,
         {
@@ -153,7 +153,7 @@ const SelectElement = memo(() => {
         }
       ) })
     ] }),
-    enableChangeScope && /* @__PURE__ */ jsxs(Fragment, { children: [
+    enableChangeScope && /* @__PURE__ */ jsxs(Group, { gap: 4, wrap: "nowrap", children: [
       enableSelectSubject && /* @__PURE__ */ jsx(
         Box,
         {

package/dist/state/DiagramActorProvider.d.ts

@@ -1,7 +1,9 @@
+import { WhereOperator } from '@likec4/core';
 import { PropsWithChildren } from 'react';
 import { Input } from './diagram-machine';
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>;
-export declare function DiagramActorProvider({ input, children }: PropsWithChildren<{
+type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>;
+export declare function DiagramActorProvider({ input: { view, ...inputs }, where, children, }: PropsWithChildren<{
     input: ActorContextInput;
+    where?: WhereOperator<string, string> | undefined;
 }>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/state/DiagramActorProvider.js

@@ -1,20 +1,30 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
+import { useDeepCompareEffect } from '@react-hookz/web';
 import { useActorRef, useSelector } from '@xstate/react';
 import { useStoreApi } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers.js';
 import { useEnabledFeatures, DiagramFeatures } from '../context/DiagramFeatures.js';
 import { DiagramActorSafeContext } from '../hooks/safeContext.js';
 import { useUpdateEffect } from '../hooks/useUpdateEffect.js';
+import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges.js';
 import { diagramMachine } from './diagram-machine.js';
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor.js';
 
-function DiagramActorProvider({ input, children }) {
+const selectToggledFeatures = (state) => state.context.toggledFeatures;
+function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children
+}) {
   const handlersRef = useDiagramEventHandlersRef();
   const xystore = useStoreApi();
-  const logic = useMemo(() => {
-    return diagramMachine.provide({
+  const actorRef = useActorRef(
+    diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
           handlersRef.current.onNavigateTo?.(viewId);
@@ -35,52 +45,35 @@ function DiagramActorProvider({ input, children }) {
           }
         })
       }
-    });
-  }, [handlersRef]);
-  const actorRef = useActorRef(
-    logic,
+    }),
     {
-      id: `diagram:${input.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: "diagram",
       // ...inspector,
       input: {
         xystore,
-        ...input
+        view,
+        ...inputs
       }
     }
   );
-  return /* @__PURE__ */ jsxs(DiagramActorSafeContext, { value: actorRef, children: [
-    /* @__PURE__ */ jsx(SyncStore, { input, actorRef }),
-    /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { actorRef, children })
-  ] });
-}
-const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs }, actorRef }) => {
   const features = useEnabledFeatures();
   useUpdateEffect(() => {
     actorRef.send({ type: "update.inputs", inputs });
-  }, [actorRef, inputs]);
+  }, [inputs]);
   useEffect(() => {
     actorRef.send({ type: "update.features", features });
-  }, [actorRef, features]);
-  const frameReq = useRef(null);
-  useUpdateEffect(() => {
-    frameReq.current = requestAnimationFrame(() => {
-      frameReq.current = null;
-      actorRef.send({ type: "update.view", view, xyedges, xynodes });
-    });
-    return () => {
-      if (frameReq.current != null) {
-        cancelAnimationFrame(frameReq.current);
-      }
-      frameReq.current = null;
-    };
-  }, [actorRef, view, xyedges, xynodes]);
-  return null;
-};
-const selectToggledFeatures = (state) => state.context.toggledFeatures;
-function DiagramActorToggledFeatures({ children, actorRef }) {
+  }, [features]);
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable
+  });
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: "update.view", view, xyedges, xynodes });
+  }, [view, xyedges, xynodes]);
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
+  return /* @__PURE__ */ jsx(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
 
 export { DiagramActorProvider };

package/dist/state/assign.js

@@ -338,8 +338,8 @@ function updateActiveWalkthrough({ context }) {
       });
     }),
     xynodes: context.xynodes.map((node) => {
-      const active = step.source === node.id || step.target === node.id;
-      return Base.setDimmed(node, !active);
+      const dimmed = step.source !== node.id && step.target !== node.id;
+      return Base.setDimmed(node, dimmed);
     })
   };
 }