@likec4/diagram 1.26.2 → 1.27.1

package/dist/packages/core/src/utils/iterable/map.js

@@ -0,0 +1,18 @@
+import { isFunction } from 'remeda';
+import { invariant } from '../../errors/index.js';
+
+function imap(arg1, arg2) {
+  const mapper = arg1;
+  invariant(isFunction(mapper));
+  function* _map(iter) {
+    for (const value of iter) {
+      yield mapper(value);
+    }
+    return;
+  }
+  {
+    return _map;
+  }
+}
+
+export { imap };

package/dist/packages/core/src/utils/iterable/to.js

@@ -0,0 +1,14 @@
+function toArray(iterable) {
+  if (iterable) {
+    return Array.from(iterable);
+  }
+  return (it) => Array.from(it);
+}
+function toSet(iterable) {
+  if (iterable) {
+    return new Set(iterable);
+  }
+  return (it) => new Set(it);
+}
+
+export { toArray, toSet };

package/dist/src/index.ts.d.ts

@@ -0,0 +1,2 @@
+export * from '../index'
+export {}

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,87 +1,79 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallbackRef } from "@mantine/hooks";
-import { useActorRef, useSelector } from "@xstate/react";
-import { useStoreApi } from "@xyflow/react";
-import { shallowEqual } from "fast-equals";
-import { useEffect, useRef } 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 { diagramMachine } from "./diagram-machine.js";
-import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
-function DiagramActorProvider({ input, children }) {
+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 { 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';
+
+const selectToggledFeatures = (state) => state.context.toggledFeatures;
+function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children
+}) {
   const handlersRef = useDiagramEventHandlersRef();
   const xystore = useStoreApi();
   const actorRef = useActorRef(
     diagramMachine.provide({
       actions: {
         "trigger:NavigateTo": (_, { viewId }) => {
-          var _a, _b;
-          (_b = (_a = handlersRef.current).onNavigateTo) == null ? void 0 : _b.call(_a, viewId);
+          handlersRef.current.onNavigateTo?.(viewId);
         },
         "trigger:OnChange": (_, params) => {
-          var _a, _b;
-          (_b = (_a = handlersRef.current).onChange) == null ? void 0 : _b.call(_a, params);
+          handlersRef.current.onChange?.(params);
         },
         "trigger:OpenSource": (_, params) => {
-          var _a, _b;
-          (_b = (_a = handlersRef.current).onOpenSource) == null ? void 0 : _b.call(_a, params);
+          handlersRef.current.onOpenSource?.(params);
         }
       },
       actors: {
         syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
           actions: {
             "trigger:OnChange": (_, params) => {
-              var _a, _b;
-              (_b = (_a = handlersRef.current).onChange) == null ? void 0 : _b.call(_a, params);
+              handlersRef.current.onChange?.(params);
             }
           }
         })
       }
     }),
     {
-      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;
-};
-function DiagramActorToggledFeatures({ children, actorRef }) {
-  const toggledFeatures = useSelector(actorRef, useCallbackRef((s) => s.context.toggledFeatures), shallowEqual);
-  return /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children });
+  }, [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(DiagramActorSafeContext, { value: actorRef, children: /* @__PURE__ */ jsx(DiagramFeatures, { overrides: toggledFeatures, children }) });
 }
-export {
-  DiagramActorProvider
-};
+
+export { DiagramActorProvider };

package/dist/state/aligners.js

@@ -1,19 +1,17 @@
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { nonexhaustive, invariant } from "@likec4/core";
-import { getNodeDimensions } from "@xyflow/system";
-import { pipe, sortBy, map, pick, reduce } from "remeda";
+import { nonexhaustive, invariant } from '@likec4/core';
+import { getNodeDimensions } from '@xyflow/system';
+import { pipe, sortBy, map, pick, reduce } from 'remeda';
+
 class Aligner {
 }
 class LinearAligner extends Aligner {
   constructor(getEdgePosition, computePosition, propertyToEdit) {
     super();
-    __publicField(this, "alignTo");
     this.getEdgePosition = getEdgePosition;
     this.computePosition = computePosition;
     this.propertyToEdit = propertyToEdit;
   }
+  alignTo;
   computeLayout(nodes) {
     this.alignTo = this.getEdgePosition(nodes);
   }
@@ -24,10 +22,22 @@ class LinearAligner extends Aligner {
   }
 }
 class GridAligner extends Aligner {
+  layout = /* @__PURE__ */ new Map();
+  axisPreset;
+  get primaryAxisCoord() {
+    return this.axisPreset.primaryAxisCoord;
+  }
+  get secondaryAxisCoord() {
+    return this.axisPreset.secondaryAxisCoord;
+  }
+  get primaryAxisDimension() {
+    return this.axisPreset.primaryAxisDimension;
+  }
+  get secondaryAxisDimension() {
+    return this.axisPreset.secondaryAxisDimension;
+  }
   constructor(alignmentMode) {
     super();
-    __publicField(this, "layout", /* @__PURE__ */ new Map());
-    __publicField(this, "axisPreset");
     this.axisPreset = alignmentMode === "Column" ? {
       primaryAxisDimension: "width",
       secondaryAxisDimension: "height",
@@ -40,21 +50,8 @@ class GridAligner extends Aligner {
       secondaryAxisCoord: "x"
     };
   }
-  get primaryAxisCoord() {
-    return this.axisPreset.primaryAxisCoord;
-  }
-  get secondaryAxisCoord() {
-    return this.axisPreset.secondaryAxisCoord;
-  }
-  get primaryAxisDimension() {
-    return this.axisPreset.primaryAxisDimension;
-  }
-  get secondaryAxisDimension() {
-    return this.axisPreset.secondaryAxisDimension;
-  }
   applyPosition(node) {
-    var _a;
-    return ((_a = this.layout) == null ? void 0 : _a.get(node.id)) ?? {};
+    return this.layout?.get(node.id) ?? {};
   }
   computeLayout(nodes) {
     const sortedNodeRects = pipe(
@@ -365,11 +362,5 @@ function getAligner(mode) {
       nonexhaustive(mode);
   }
 }
-export {
-  Aligner,
-  GridAligner,
-  LinearAligner,
-  getAligner,
-  getLinearAligner,
-  toNodeRect
-};
+
+export { Aligner, GridAligner, LinearAligner, getAligner, getLinearAligner, toNodeRect };

package/dist/state/assign.js

@@ -1,10 +1,11 @@
-import { nonNullable, invariant } from "@likec4/core";
-import { getNodeDimensions } from "@xyflow/system";
-import { deepEqual } from "fast-equals";
-import { isEmpty, mergeDeep, omit } from "remeda";
-import { assertEvent } from "xstate";
-import { Base } from "../base/types.js";
-import { VectorImpl, vector } from "../utils/vector.js";
+import { nonNullable, invariant } from '@likec4/core';
+import { getNodeDimensions } from '@xyflow/system';
+import { deepEqual } from 'fast-equals';
+import { omit, mergeDeep, isEmpty } from 'remeda';
+import { assertEvent } from 'xstate';
+import { Base } from '../base/types.js';
+import { VectorImpl, vector } from '../utils/vector.js';
+
 function lastClickedNode(params) {
   const { lastClickedNode: lastClickedNode2 } = params.context;
   if (!lastClickedNode2 || lastClickedNode2.id !== params.event.node.id) {
@@ -186,7 +187,7 @@ function updateNavigationHistory({ context, event }) {
       ...history.slice(0, currentIndex + 1),
       {
         viewId: event.view.id,
-        fromNode: (lastOnNavigate == null ? void 0 : lastOnNavigate.fromNode) ?? null,
+        fromNode: lastOnNavigate?.fromNode ?? null,
         viewport: { ...viewport }
       }
     ];
@@ -337,21 +338,10 @@ 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);
     })
   };
 }
-export {
-  focusNodesEdges,
-  lastClickedNode,
-  mergeXYNodesEdges,
-  navigateBack,
-  navigateForward,
-  resetEdgeControlPoints,
-  unfocusNodesEdges,
-  updateActiveWalkthrough,
-  updateEdgeData,
-  updateNavigationHistory,
-  updateNodeData
-};
+
+export { focusNodesEdges, lastClickedNode, mergeXYNodesEdges, navigateBack, navigateForward, resetEdgeControlPoints, unfocusNodesEdges, updateActiveWalkthrough, updateEdgeData, updateNavigationHistory, updateNodeData };