@likec4/diagram 1.42.1 → 1.44.0

package/dist/hooks/useDiagram.d.ts

@@ -1,123 +1,17 @@
-import { DynamicViewDisplayVariant, NodeNotation as ElementNotation } from '@likec4/core/types';
 import { DependencyList } from 'react';
-import { PartialDeep } from 'type-fest';
-import { FeatureName } from '../context/DiagramFeatures';
-import { OpenSourceParams } from '../LikeC4Diagram.props';
-import { AlignmentMode } from '../likec4diagram/state/aligners';
-import { DiagramActorEvent, DiagramActorRef, DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../likec4diagram/state/types';
-import { Types } from '../likec4diagram/types';
-import { useDiagramActorRef } from './safeContext';
-import type * as t from '@likec4/core/types';
-type Any = t.aux.Any;
-type Unknown = t.aux.UnknownLayouted;
-type ViewId<A> = t.aux.ViewId<A>;
-type Fqn<A> = t.aux.Fqn<A>;
-type NodeId = t.aux.NodeId;
-type EdgeId = t.aux.EdgeId;
-export { useDiagramActorRef };
-export type { DiagramContext };
-export interface DiagramApi<A extends Any = Unknown> {
-    readonly actor: DiagramActorRef;
-    /**
-     * @warning Do not use in render phase
-     */
-    readonly currentView: t.DiagramView<A>;
-    /**
-     * Send event to diagram actor
-     */
-    send(event: DiagramActorEvent): void;
-    /**
-     * Navigate to view
-     */
-    navigateTo(viewId: ViewId<A>, fromNode?: NodeId): void;
-    /**
-     * Navigate back or forward in history
-     */
-    navigate(direction: 'back' | 'forward'): void;
-    /**
-     * Fit diagram to view
-     */
-    fitDiagram(duration?: number): void;
-    /**
-     * Open relationships browser
-     */
-    openRelationshipsBrowser(fqn: Fqn<A>): void;
-    /**
-     * If running in editor, trigger opening source file
-     */
-    openSource(params: OpenSourceParams<A>): void;
-    /**
-     * Open element details card
-     */
-    openElementDetails(fqn: Fqn<A>, fromNode?: NodeId): void;
-    openRelationshipDetails(...params: [edgeId: EdgeId] | [source: Fqn<A>, target: Fqn<A>]): void;
-    updateNodeData(nodeId: NodeId, data: PartialDeep<Types.NodeData>): void;
-    updateEdgeData(edgeId: EdgeId, data: PartialDeep<Types.EdgeData>): void;
-    /**
-     * Schedule save manual layout
-     */
-    scheduleSaveManualLayout(): void;
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout(): boolean;
-    /**
-     * Align nodes
-     */
-    align(mode: AlignmentMode): void;
-    /**
-     * Reset edge control points
-     */
-    resetEdgeControlPoints(): void;
-    /**
-     * Focus node
-     */
-    focusNode(nodeId: NodeId): void;
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot(): DiagramActorSnapshot;
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext(): DiagramContext;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode(xynodeId: string): t.DiagramNode<A> | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findEdge(xyedgeId: string): Types.Edge | null;
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge(xyedgeId: string): t.DiagramEdge<A> | null;
-    startWalkthrough(): void;
-    walkthroughStep(direction?: 'next' | 'previous'): void;
-    stopWalkthrough(): void;
-    toggleFeature(feature: FeatureName, forceValue?: boolean): void;
-    highlightNotation(notation: ElementNotation, kind?: string): void;
-    unhighlightNotation(): void;
-    openSearch(searchValue?: string): void;
-    /**
-     * Switch dynamic view display variant
-     */
-    switchDynamicViewVariant(variant: DynamicViewDisplayVariant): void;
-}
-/**
- * Diagram API
- * Mostly for internal use
- */
-export declare function useDiagram<A extends Any = Unknown>(): DiagramApi<A>;
+import { DiagramApi } from '../likec4diagram/state/diagram-api';
+import { DiagramActorSnapshot, DiagramContext, DiagramEmittedEvents } from '../likec4diagram/state/types';
+import { useDiagram, useDiagramActorRef } from './safeContext';
+export { useDiagram, useDiagramActorRef };
+export type { DiagramApi, DiagramContext };
 export declare function useDiagramActorSnapshot<T = unknown>(selector: (state: DiagramActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
 /**
  * Read diagram context
  */
 export declare function useDiagramContext<T = unknown>(selector: (context: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean, deps?: DependencyList): T;
-type PickEmittedEvent<T extends DiagramEmittedEvents['type']> = DiagramEmittedEvents & {
+type PickEmittedEvent<T> = T extends DiagramEmittedEvents['type'] ? DiagramEmittedEvents & {
     type: T;
-};
+} : never;
 /**
  * Subscribe to diagram emitted events
  * @example

package/dist/hooks/useDiagram.js

@@ -1,132 +1,12 @@
-import { useCallbackRef } from '@mantine/hooks';
 import { useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { findDiagramEdge, findDiagramNode } from '../likec4diagram/state/utils.js';
+import { useCallback, useRef, useEffect } from 'react';
 import { useDiagramActorRef } from './safeContext.js';
+export { useDiagram } from './safeContext.js';
 
-function useDiagram() {
-  const actor = useDiagramActorRef();
-  return useMemo(() => ({
-    actor,
-    send: (event) => actor.send(event),
-    navigateTo: (viewId, fromNode) => {
-      actor.send({
-        type: "navigate.to",
-        viewId,
-        ...fromNode && { fromNode }
-      });
-    },
-    navigate: (direction) => {
-      actor.send({ type: `navigate.${direction}` });
-    },
-    fitDiagram: (duration = 350) => {
-      actor.send({ type: "fitDiagram", duration });
-    },
-    openRelationshipsBrowser: (fqn) => {
-      actor.send({ type: "open.relationshipsBrowser", fqn });
-    },
-    openSource: (params) => {
-      actor.send({ type: "open.source", ...params });
-    },
-    openElementDetails: (fqn, fromNode) => {
-      actor.send({ type: "open.elementDetails", fqn, fromNode });
-    },
-    openRelationshipDetails: (...params) => {
-      if (params.length === 1) {
-        actor.send({ type: "open.relationshipDetails", params: { edgeId: params[0] } });
-      } else {
-        actor.send({ type: "open.relationshipDetails", params: { source: params[0], target: params[1] } });
-      }
-    },
-    updateNodeData: (nodeId, data) => {
-      actor.send({ type: "update.nodeData", nodeId, data });
-    },
-    updateEdgeData: (edgeId, data) => {
-      actor.send({
-        type: "update.edgeData",
-        edgeId,
-        data
-      });
-    },
-    scheduleSaveManualLayout: () => {
-      actor.send({ type: "saveManualLayout.schedule" });
-    },
-    /**
-     * @returns true if there was pending request to save layout
-     */
-    cancelSaveManualLayout: () => {
-      const syncState = actor.getSnapshot().children.syncLayout?.getSnapshot().value;
-      actor.send({ type: "saveManualLayout.cancel" });
-      return syncState === "pending" || syncState === "paused";
-    },
-    align: (mode) => {
-      actor.send({ type: "layout.align", mode });
-    },
-    resetEdgeControlPoints: () => {
-      actor.send({ type: "layout.resetEdgeControlPoints" });
-    },
-    focusNode: (nodeId) => {
-      actor.send({ type: "focus.node", nodeId });
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    get currentView() {
-      return actor.getSnapshot().context.view;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    getSnapshot: () => actor.getSnapshot(),
-    /**
-     * @warning Do not use in render phase
-     */
-    getContext: () => actor.getSnapshot().context,
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramNode: (xynodeId) => {
-      return findDiagramNode(actor.getSnapshot().context, xynodeId);
-    },
-    findEdge: (xyedgeId) => {
-      return actor.getSnapshot().context.xyedges.find((e) => e.data.id === xyedgeId) ?? null;
-    },
-    /**
-     * @warning Do not use in render phase
-     */
-    findDiagramEdge: (xyedgeId) => {
-      return findDiagramEdge(actor.getSnapshot().context, xyedgeId);
-    },
-    startWalkthrough: () => {
-      actor.send({ type: "walkthrough.start" });
-    },
-    walkthroughStep: (direction = "next") => {
-      actor.send({ type: "walkthrough.step", direction });
-    },
-    stopWalkthrough: () => {
-      actor.send({ type: "walkthrough.end" });
-    },
-    toggleFeature: (feature, forceValue) => {
-      actor.send({ type: "toggle.feature", feature, ...forceValue !== void 0 && { forceValue } });
-    },
-    highlightNotation: (notation, kind) => {
-      actor.send({ type: "notations.highlight", notation, ...kind && { kind } });
-    },
-    unhighlightNotation: () => {
-      actor.send({ type: "notations.unhighlight" });
-    },
-    openSearch: (searchValue) => {
-      actor.send({ type: "open.search", ...searchValue && { search: searchValue } });
-    },
-    switchDynamicViewVariant: (variant) => {
-      actor.send({ type: "switch.dynamicViewVariant", variant });
-    }
-  }), [actor]);
-}
 function useDiagramActorSnapshot(selector, compare = shallowEqual) {
   const actorRef = useDiagramActorRef();
-  return useSelector(actorRef, useCallbackRef(selector), compare);
+  return useSelector(actorRef, selector, compare);
 }
 function useDiagramContext(selector, compare = shallowEqual, deps) {
   const actorRef = useDiagramActorRef();
@@ -138,13 +18,13 @@ function useOnDiagramEvent(event, callback) {
   const callbackRef = useRef(callback);
   callbackRef.current = callback;
   useEffect(() => {
-    const subscription = actorRef.on(event, (event2) => {
-      callbackRef.current(event2);
+    const subscription = actorRef.on(event, (payload) => {
+      callbackRef.current(payload);
     });
     return () => {
       subscription.unsubscribe();
     };
-  }, [actorRef]);
+  }, [actorRef, event]);
 }
 
-export { useDiagram, useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };
+export { useDiagramActorRef, useDiagramActorSnapshot, useDiagramContext, useOnDiagramEvent };

package/dist/hooks/useDiagramCompareLayout.d.ts

@@ -0,0 +1,35 @@
+import { DiagramActorSnapshot } from '../likec4diagram/state/types';
+import type * as t from '@likec4/core/types';
+declare const selectCompareLayoutState: ({ context }: DiagramActorSnapshot) => {
+    isEnabled: false;
+    isEditable: false;
+    isActive: false;
+    drifts: never[];
+    layout: t.LayoutType;
+} | {
+    isEnabled: true;
+    isEditable: boolean;
+    isActive: boolean;
+    drifts: t.NonEmptyReadonlyArray<t.LayoutedViewDriftReason>;
+    layout: t.LayoutType;
+};
+type DiagramCompareLayoutState = ReturnType<typeof selectCompareLayoutState>;
+type DiagramCompareLayoutOps = {
+    /**
+     * Toggles the compare mode on or off.
+     */
+    toggleCompare: (force?: 'on' | 'off') => void;
+    /**
+     * Switches the layout type between 'auto' and 'manual'.
+     */
+    switchLayout: (layoutType: t.LayoutType) => void;
+    /**
+     * Resets the manual layout to its default state.
+     */
+    resetManualLayout: () => void;
+};
+export declare function useDiagramCompareLayout(): [
+    DiagramCompareLayoutState,
+    DiagramCompareLayoutOps
+];
+export {};

package/dist/hooks/useDiagramCompareLayout.js

@@ -0,0 +1,60 @@
+import { useSelector } from '@xstate/react';
+import { shallowEqual } from 'fast-equals';
+import { useDiagramActorRef } from './safeContext.js';
+import { useCallbackRef } from './useCallbackRef.js';
+
+const selectCompareLayoutState = ({ context }) => {
+  const drifts = context.view.drifts ?? null;
+  if (!context.features.enableCompareWithLatest || !drifts) {
+    return {
+      isEnabled: false,
+      isEditable: false,
+      isActive: false,
+      drifts: [],
+      layout: context.view._layout ?? "auto"
+    };
+  }
+  return {
+    isEnabled: true,
+    isEditable: !context.features.enableReadOnly,
+    isActive: context.toggledFeatures.enableCompareWithLatest === true,
+    drifts,
+    layout: context.view._layout ?? "auto"
+  };
+};
+function useDiagramCompareLayout() {
+  const actorRef = useDiagramActorRef();
+  const state = useSelector(actorRef, selectCompareLayoutState, shallowEqual);
+  const switchLayout = useCallbackRef((layoutType) => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    actorRef.send({ type: "emit.onLayoutTypeChange", layoutType });
+  });
+  const toggleCompare = useCallbackRef((force) => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    const nextIsActive = force ? force === "on" : !state.isActive;
+    if (state.isActive && !nextIsActive && state.layout === "auto") {
+      switchLayout("manual");
+    }
+    actorRef.send({
+      type: "toggle.feature",
+      feature: "CompareWithLatest",
+      forceValue: nextIsActive
+    });
+  });
+  const resetManualLayout = useCallbackRef(() => {
+    if (!state.isEnabled) {
+      console.warn("Compare with latest feature is not enabled");
+      return;
+    }
+    actorRef.send({ type: "layout.resetManualLayout" });
+  });
+  return [state, { toggleCompare, switchLayout, resetManualLayout }];
+}
+
+export { useDiagramCompareLayout };

package/dist/hooks/useUpdateEffect.js

@@ -11,12 +11,10 @@ const depsShallowEqual = (d1, d2) => {
     return false;
   }
   for (const [i, element] of d1.entries()) {
-    if (element === d2[i]) {
+    if (element === d2[i] || shallowEqual(element, d2[i])) {
       continue;
     }
-    if (!shallowEqual(element, d2[i])) {
-      return false;
-    }
+    return false;
   }
   return true;
 };

package/dist/hooks/useXYFlow.d.ts

@@ -8,6 +8,7 @@ export declare function useXYStoreApi(): XYStoreApi;
 export type XYStoreApi = {
     getState: () => XYStoreState;
     setState: (state: Partial<XYStoreState> | ((state: XYStoreState) => Partial<XYStoreState>)) => void;
+    subscribe: (listener: (state: XYStoreState, prevState: XYStoreState) => void) => () => void;
 };
 export type XYInternalNode = InternalNode<Types.AnyNode>;
 export declare function useXYInternalNode(id: string): XYInternalNode | undefined;

package/dist/hooks/useXYFlow.js

@@ -1,6 +1,6 @@
-import { useCallbackRef } from '@mantine/hooks';
-import { useStore, useStoreApi, useReactFlow, useInternalNode } from '@xyflow/react';
+import { useStore, useStoreApi, useReactFlow } from '@xyflow/react';
 import { shallowEqual } from 'fast-equals';
+import { useCallbackRef } from './useCallbackRef.js';
 
 function useXYFlow() {
   return useReactFlow();
@@ -8,15 +8,12 @@ function useXYFlow() {
 function useXYStore(selector, equalityFn) {
   return useStore(
     useCallbackRef(selector),
-    shallowEqual
+    equalityFn ?? shallowEqual
   );
 }
 function useXYStoreApi() {
   return useStoreApi();
 }
-function useXYInternalNode(id) {
-  return useInternalNode(id);
-}
 const selectCurrentZoom = (state) => Math.round(state.transform[2] * 100) / 100;
 function useCurrentZoom() {
   return useStore(selectCurrentZoom);
@@ -26,4 +23,4 @@ function useIsZoomTooSmall() {
   return useStore(selectZoom);
 }
 
-export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYInternalNode, useXYStore, useXYStoreApi };
+export { useCurrentZoom, useIsZoomTooSmall, useXYFlow, useXYStore, useXYStoreApi };

package/dist/index.d.ts

@@ -14,5 +14,5 @@ export { StaticLikeC4Diagram } from './StaticLikeC4Diagram';
 export { LikeC4View } from './LikeC4View';
 export type { LikeC4BrowserProps, LikeC4ViewProps } from './LikeC4View';
 export { ReactLikeC4, type ReactLikeC4Props } from './ReactLikeC4';
-export { useCurrentViewId } from './hooks/useCurrentViewId';
-export { getViewBounds } from './utils/get-view-bounds';
+export { useCurrentViewId } from './hooks/useCurrentView';
+export { pickViewBounds } from './utils/view-bounds';

package/dist/index.js

@@ -2,7 +2,7 @@ export { IconRendererProvider } from './context/IconRenderer.js';
 export { LikeC4Diagram } from './LikeC4Diagram.js';
 export { LikeC4ModelProvider } from './LikeC4ModelProvider.js';
 export { LikeC4ProjectsProvider } from './LikeC4ProjectsProvider.js';
-export { useDiagram, useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
+export { useDiagramContext, useOnDiagramEvent } from './hooks/useDiagram.js';
 export { useLikeC4Model, useLikeC4Specification, useLikeC4ViewModel } from './hooks/useLikeC4Model.js';
 export { useCurrentViewModel } from './hooks/useCurrentViewModel.js';
 export { useHasProjects, useLikeC4ProjectId, useLikeC4Projects, useLikeC4ProjectsContext } from './hooks/useLikeC4Project.js';
@@ -11,5 +11,6 @@ export { useUpdateEffect } from './hooks/useUpdateEffect.js';
 export { StaticLikeC4Diagram } from './StaticLikeC4Diagram.js';
 export { LikeC4View } from './LikeC4View.js';
 export { ReactLikeC4 } from './ReactLikeC4.js';
-export { useCurrentViewId } from './hooks/useCurrentViewId.js';
-export { getViewBounds } from './utils/get-view-bounds.js';
+export { useCurrentViewId } from './hooks/useCurrentView.js';
+export { pickViewBounds } from './utils/view-bounds.js';
+export { useDiagram } from './hooks/safeContext.js';

package/dist/likec4diagram/DiagramUI.js

@@ -1,33 +1,40 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRerender } from '@react-hookz/web';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { ErrorBoundary } from '../components/ErrorFallback.js';
-import { EnsureCurrentViewModel } from '../context/LikeC4ModelContext.js';
+import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { useOverlaysActorRef } from '../hooks/useOverlaysActor.js';
 import { useSearchActorRef } from '../hooks/useSearchActor.js';
 import { Overlays } from '../overlays/Overlays.js';
 import { Search } from '../search/Search.js';
 import { RelationshipPopover } from './relationship-popover/RelationshipPopover.js';
-import { useEnabledFeatures } from '../context/DiagramFeatures.js';
 import { NavigationPanel } from '../navigationpanel/NavigationPanel.js';
 import { NotationPanel } from './ui/notation/NotationPanel.js';
+import { LayoutDriftFrame } from './ui/LayoutDriftFrame.js';
 
 const LikeC4DiagramUI = memo(() => {
   const {
     enableControls,
     enableNotations,
     enableSearch,
-    enableRelationshipDetails
+    enableRelationshipDetails,
+    enableReadOnly,
+    enableCompareWithLatest
   } = useEnabledFeatures();
   const rerender = useRerender();
   const overlaysActorRef = useOverlaysActorRef();
   const searchActorRef = useSearchActorRef();
-  return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: rerender, children: [
-    enableControls && /* @__PURE__ */ jsx(EnsureCurrentViewModel, { children: /* @__PURE__ */ jsx(NavigationPanel, {}) }),
+  const handleReset = useCallback(() => {
+    console.warn("DiagramUI: resetting error boundary and rerendering...");
+    rerender();
+  }, []);
+  return /* @__PURE__ */ jsxs(ErrorBoundary, { onReset: handleReset, children: [
+    enableControls && /* @__PURE__ */ jsx(NavigationPanel, {}),
     overlaysActorRef && /* @__PURE__ */ jsx(Overlays, { overlaysActorRef }),
     enableNotations && /* @__PURE__ */ jsx(NotationPanel, {}),
     enableSearch && searchActorRef && /* @__PURE__ */ jsx(Search, { searchActorRef }),
-    enableRelationshipDetails && /* @__PURE__ */ jsx(RelationshipPopover, {})
+    enableRelationshipDetails && enableReadOnly && /* @__PURE__ */ jsx(RelationshipPopover, {}),
+    enableCompareWithLatest && /* @__PURE__ */ jsx(LayoutDriftFrame, {})
   ] });
 });
 LikeC4DiagramUI.displayName = "DiagramUI";

package/dist/likec4diagram/DiagramXYFlow.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
 import { Simplify } from 'type-fest';
 import { LikeC4DiagramProperties } from '../LikeC4Diagram.props';
-export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'nodesDraggable' | 'nodesSelectable' | 'reactFlowProps' | 'renderNodes'>>>;
-export declare function LikeC4DiagramXYFlow({ background, nodesDraggable, nodesSelectable, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Simplify<Pick<LikeC4DiagramProperties<any>, 'background' | 'reactFlowProps' | 'renderNodes'>>>;
+export declare function LikeC4DiagramXYFlow({ background, reactFlowProps, children, renderNodes, }: LikeC4DiagramXYFlowProps): import("react/jsx-runtime").JSX.Element;