@likec4/diagram 1.22.0 → 1.23.0

package/dist/LikeC4Diagram.js

@@ -3,9 +3,9 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { useRef } from "react";
 import { isEmpty } from "remeda";
 import { LikeC4CustomColors } from "./LikeC4CustomColors.js";
-import { DiagramActor } from "./likec4diagram/DiagramActor.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";
 import { FramerMotionConfig } from "./context/FramerMotionConfig.js";
@@ -56,7 +56,6 @@ function LikeC4Diagram({
   const xyNodesEdges = useViewToNodesEdges({
     view,
     where,
-    nodesDraggable,
     nodesSelectable
   });
   const isDynamicView = view.__ === "dynamic";
@@ -113,7 +112,7 @@ function LikeC4Diagram({
                 fitView,
                 ...initialRef.current,
                 children: /* @__PURE__ */ jsx(
-                  DiagramActor,
+                  DiagramActorProvider,
                   {
                     input: {
                       view,

package/dist/base/BaseXYFlow.js

@@ -68,7 +68,6 @@ const BaseXYFlow = ({
       ...!pannable && {
         selectionKeyCode: null
       },
-      onlyRenderVisibleElements: nodes.length > 75,
       elementsSelectable: nodesSelectable,
       nodesFocusable: nodesDraggable || nodesSelectable,
       edgesFocusable: false,

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

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

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

@@ -11,9 +11,9 @@ export declare function customEdge<P extends Record<string, unknown> = Base.Node
     target: string;
     style?: CSSProperties;
     id: string;
+    selected?: boolean;
     selectable?: boolean;
     deletable?: boolean;
-    selected?: boolean;
     animated?: boolean;
     sourceX: number;
     sourceY: number;

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

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

package/dist/context/DiagramEventHandlers.d.ts

@@ -1,10 +1,14 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, RefObject } from 'react';
 import { LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props';
 type RequiredOrNull<T> = {
     [P in keyof T]-?: NonNullable<T[P]> | null;
 };
+type DiagramEventHandlersContextValue = RequiredOrNull<LikeC4DiagramEventHandlers> & {
+    handlersRef: RefObject<LikeC4DiagramEventHandlers>;
+};
 export declare function DiagramEventHandlers({ handlers, children, }: PropsWithChildren<{
     handlers: LikeC4DiagramEventHandlers;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function useDiagramEventHandlers(): RequiredOrNull<LikeC4DiagramEventHandlers>;
+export declare function useDiagramEventHandlers(): DiagramEventHandlersContextValue;
+export declare function useDiagramEventHandlersRef(): RefObject<LikeC4DiagramEventHandlers>;
 export {};

package/dist/context/DiagramEventHandlers.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useSyncedRef } from "@react-hookz/web";
-import { createContext, useMemo, useContext } from "react";
+import { useMemo, createContext, useContext } from "react";
 import { isFunction, mapToObj } from "remeda";
 const HandlerNames = [
   "onBurgerMenuClick",
@@ -15,35 +15,40 @@ const HandlerNames = [
   "onChange",
   "onCanvasDblClick"
 ];
-const DiagramEventHandlersContext = createContext(
-  mapToObj(HandlerNames, (name) => [name, null])
-);
+const DiagramEventHandlersContext = createContext({
+  ...mapToObj(HandlerNames, (name) => [name, null]),
+  handlersRef: {
+    current: {}
+  }
+});
 function DiagramEventHandlers({
   handlers,
   children
 }) {
   const handlersRef = useSyncedRef(handlers);
   const deps = HandlerNames.map((name) => isFunction(handlers[name]));
-  return /* @__PURE__ */ jsx(
-    DiagramEventHandlersContext.Provider,
-    {
-      value: useMemo(() => mapToObj(HandlerNames, (name) => {
-        if (handlersRef.current[name]) {
-          return [name, (...args) => {
-            var _a, _b;
-            return (_b = (_a = handlersRef.current)[name]) == null ? void 0 : _b.call(_a, ...args);
-          }];
-        }
-        return [name, null];
-      }), [handlersRef, ...deps]),
-      children
-    }
-  );
+  const value = useMemo(() => ({
+    ...mapToObj(HandlerNames, (name) => {
+      if (handlersRef.current[name]) {
+        return [name, (...args) => {
+          var _a, _b;
+          return (_b = (_a = handlersRef.current)[name]) == null ? void 0 : _b.call(_a, ...args);
+        }];
+      }
+      return [name, null];
+    }),
+    handlersRef
+  }), [handlersRef, ...deps]);
+  return /* @__PURE__ */ jsx(DiagramEventHandlersContext.Provider, { value, children });
 }
 function useDiagramEventHandlers() {
   return useContext(DiagramEventHandlersContext);
 }
+function useDiagramEventHandlersRef() {
+  return useContext(DiagramEventHandlersContext).handlersRef;
+}
 export {
   DiagramEventHandlers,
-  useDiagramEventHandlers
+  useDiagramEventHandlers,
+  useDiagramEventHandlersRef
 };

package/dist/context/DiagramFeatures.d.ts

@@ -1,7 +1,7 @@
 import { ExclusiveUnion, NonEmptyArray } from '@likec4/core';
 import { PropsWithChildren } from 'react';
 declare const FeatureNames: readonly ["Controls", "ReadOnly", "FocusMode", "NavigateTo", "ElementDetails", "RelationshipDetails", "RelationshipBrowser", "Search", "NavigationButtons", "Notations", "DynamicViewWalkthrough", "EdgeEditing", "ViewTitle", "FitView", "LikeC4Model", "Vscode"];
-type FeatureName = typeof FeatureNames[number];
+export type FeatureName = typeof FeatureNames[number];
 export type EnabledFeatures = {
     [P in `enable${FeatureName}`]: boolean;
 };

package/dist/context/DiagramFeatures.js

@@ -40,40 +40,27 @@ const validate = (features) => {
     enableRelationshipDetails,
     enableRelationshipBrowser,
     enableSearch,
+    enableEdgeEditing,
     ...rest
   } = features;
   if (!enableLikeC4Model) {
-    if (enableElementDetails) {
-      console.warn("enableElementDetails is ignored because requires LikeC4Model");
-      enableElementDetails = false;
-    }
-    if (enableRelationshipDetails) {
-      console.warn("enableRelationshipDetails is ignored because requires enableLikeC4Model");
-      enableRelationshipDetails = false;
-    }
-    if (enableRelationshipBrowser) {
-      console.warn("enableRelationshipBrowser is ignored because requires LikeC4Model");
-      enableRelationshipBrowser = false;
-    }
-    if (enableSearch) {
-      console.warn("enableSearch is ignored because requires LikeC4Model");
-      enableSearch = false;
-    }
+    enableElementDetails = false;
+    enableRelationshipDetails = false;
+    enableRelationshipBrowser = false;
+    enableSearch = false;
   }
   if (enableReadOnly) {
-    if (rest.enableEdgeEditing) {
-      console.warn("enableEdgeEditing is ignored because enabled ReadOnly");
-      rest.enableEdgeEditing = false;
-    }
+    enableEdgeEditing = false;
   }
   return {
-    ...rest,
     enableReadOnly,
     enableLikeC4Model,
     enableElementDetails,
     enableRelationshipDetails,
     enableRelationshipBrowser,
-    enableSearch
+    enableSearch,
+    enableEdgeEditing,
+    ...rest
   };
 };
 function DiagramFeatures({