@likec4/diagram 1.22.1 → 1.23.0

package/src/{likec4diagram/state → state}/syncManualLayoutActor.ts

@@ -2,20 +2,19 @@ import type { ViewChange, ViewId } from '@likec4/core'
 import { type Rect, boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { hasAtLeast, reduce } from 'remeda'
 import {
+  type ActorLogicFrom,
   type ActorRef,
-  type ActorRefFromLogic,
   type MachineSnapshot,
-  type SnapshotFrom,
   assign,
   setup,
 } from 'xstate'
-import { bezierControlPoints, isSamePoint } from '../../utils'
-import type * as Machine from './machine'
+import { bezierControlPoints, isSamePoint } from '../utils'
+import type { Context as DiagramContext, Events as DiagramEvents } from './diagram-machine'
 
 export type Input = {
   parent: ActorRef<
-    MachineSnapshot<Machine.DiagramContext, Machine.Events, any, any, any, any, any, any>,
-    Machine.Events,
+    MachineSnapshot<DiagramContext, DiagramEvents, any, any, any, any, any, any>,
+    DiagramEvents,
     any
   >
   viewId: ViewId
@@ -31,7 +30,7 @@ export type Events =
   | { type: 'cancel' }
   | { type: 'stop' }
 // TODO: naming convention for actors
-export const syncManualLayoutActor = setup({
+export const syncManualLayoutActorLogic = setup({
   types: {
     context: {} as Context,
     input: {} as Input,
@@ -52,8 +51,6 @@ export const syncManualLayoutActor = setup({
   initial: 'idle',
   context: ({ input }) => ({
     ...input,
-    // parent: input.parent,
-    // viewId: input.parent.getSnapshot().context.view.id,
   }),
   states: {
     idle: {
@@ -124,10 +121,9 @@ export const syncManualLayoutActor = setup({
   },
 })
 
-export type SyncLayoutActorRef = ActorRefFromLogic<typeof syncManualLayoutActor>
-export type SyncLayoutActorSnapshot = SnapshotFrom<typeof syncManualLayoutActor>
+export type SyncLayoutActorLogic = ActorLogicFrom<typeof syncManualLayoutActorLogic>
 
-function createViewChange(parentContext: Machine.DiagramContext): ViewChange.SaveManualLayout {
+function createViewChange(parentContext: DiagramContext): ViewChange.SaveManualLayout {
   const { view, xystore, xyflow } = parentContext
 
   const { nodeLookup } = xystore.getState()

package/src/state/types.ts

@@ -0,0 +1,23 @@
+import type { ActorRefFromLogic, ActorSystem, SnapshotFrom } from 'xstate'
+import type { OverlaysActorRef } from '../overlays/overlaysActor'
+import type { DiagramMachineLogic } from './diagram-machine'
+import type { SyncLayoutActorLogic } from './syncManualLayoutActor'
+
+export type System = ActorSystem<{
+  actors: {
+    diagram: DiagramActorRef
+    overlays: OverlaysActorRef
+  }
+}>
+
+export type DiagramActorRef = Omit<ActorRefFromLogic<DiagramMachineLogic>, 'system'> & {
+  system: System
+}
+export type DiagramActorSnapshot = SnapshotFrom<DiagramMachineLogic>
+
+export type { Context as DiagramContext } from './diagram-machine'
+
+export type SyncLayoutActorRef = Omit<ActorRefFromLogic<SyncLayoutActorLogic>, 'system'> & {
+  system: System
+}
+export type SyncLayoutActorSnapshot = SnapshotFrom<SyncLayoutActorLogic>

package/src/{likec4diagram/state → state}/utils.ts

@@ -1,7 +1,29 @@
 import type { BBox, XYPoint } from '@likec4/core'
-import type { DiagramContext } from './machine'
+import type { ActorSystem } from 'xstate'
+import type { OverlaysActorRef } from '../overlays/overlaysActor'
+import type { Context } from './diagram-machine'
+import type { DiagramActorRef, System } from './types'
 
-export function focusedBounds(params: { context: DiagramContext }): { bounds: BBox; duration?: number } {
+export function typedSystem(system: ActorSystem<any>) {
+  return {
+    get overlaysActorRef(): OverlaysActorRef | null {
+      return (system as System).get('overlays') ?? null
+    },
+    get diagramActorRef(): DiagramActorRef | null {
+      return (system as System).get('diagram') ?? null
+    },
+  }
+}
+
+export function findDiagramNode(ctx: Context, xynodeId: string) {
+  return ctx.view.nodes.find(n => n.id === xynodeId) ?? null
+}
+
+export function findDiagramEdge(ctx: Context, xyedgeId: string) {
+  return ctx.view.edges.find(e => e.id === xyedgeId) ?? null
+}
+
+export function focusedBounds(params: { context: Context }): { bounds: BBox; duration?: number } {
   const knownAbsolutes = new Map<string, XYPoint>()
 
   const b = params.context.xynodes.reduce((acc, node) => {

package/dist/hooks/useDiagramActor.d.ts

@@ -1,5 +0,0 @@
-import { LikeC4ViewActorRef, MachineSnapshot } from '../likec4diagram/state/machine';
-import { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor';
-export declare function useDiagramActor(): LikeC4ViewActorRef;
-export declare function useDiagramActorState<T = unknown>(selector: (state: MachineSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export declare function useDiagramSyncLayoutState<T = unknown>(selector: (state: SyncLayoutActorSnapshot) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;

package/dist/hooks/useDiagramActor.js

@@ -1,21 +0,0 @@
-import { useCallbackRef } from "@mantine/hooks";
-import { useSelector as useSelector$1 } from "@xstate/react";
-import { shallowEqual } from "fast-equals";
-import { useActorRef, useSelector } from "../likec4diagram/state/actorContext.js";
-function useDiagramActor() {
-  return useActorRef();
-}
-function useDiagramActorState(selector, compare = shallowEqual) {
-  const select = useCallbackRef((s) => selector(s));
-  return useSelector(select, compare);
-}
-function useDiagramSyncLayoutState(selector, compare = shallowEqual) {
-  const syncLayoutActorRef = useDiagramActorState((s) => s.context.syncLayoutActorRef);
-  const select = useCallbackRef(selector);
-  return useSelector$1(syncLayoutActorRef, select, compare);
-}
-export {
-  useDiagramActor,
-  useDiagramActorState,
-  useDiagramSyncLayoutState
-};

package/dist/hooks/useDiagramContext.d.ts

@@ -1,3 +0,0 @@
-import { DiagramContext } from '../likec4diagram/state/machine';
-export declare function useDiagramContext<T = unknown>(selector: (state: DiagramContext) => T, compare?: (a: NoInfer<T>, b: NoInfer<T>) => boolean): T;
-export { DiagramContext } from '../likec4diagram/state/machine';

package/dist/hooks/useDiagramContext.js

@@ -1,10 +0,0 @@
-import { useCallbackRef } from "@mantine/hooks";
-import { shallowEqual } from "fast-equals";
-import { useSelector } from "../likec4diagram/state/actorContext.js";
-function useDiagramContext(selector, compare = shallowEqual) {
-  const select = useCallbackRef((s) => selector(s.context));
-  return useSelector(select, compare);
-}
-export {
-  useDiagramContext
-};

package/dist/likec4diagram/DiagramActor.js

@@ -1,82 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useCallbackRef } from "@mantine/hooks";
-import { useStoreApi } from "@xyflow/react";
-import { useEffect } from "react";
-import { useDiagramActor } from "../hooks/useDiagramActor.js";
-import { useUpdateEffect } from "../hooks/useUpdateEffect.js";
-import { LikeC4ViewMachineContextProvider } from "./state/actorContext.js";
-import { useDiagramContext } from "../hooks/useDiagramContext.js";
-import { diagramMachine } from "./state/machine.js";
-import { syncManualLayoutActor } from "./state/syncManualLayoutActor.js";
-import { useDiagramEventHandlers } from "../context/DiagramEventHandlers.js";
-import { useEnabledFeatures, DiagramFeatures } from "../context/DiagramFeatures.js";
-function DiagramActor({ input, children }) {
-  const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers();
-  const xystore = useStoreApi();
-  return /* @__PURE__ */ jsxs(
-    LikeC4ViewMachineContextProvider,
-    {
-      logic: diagramMachine.provide({
-        actions: {
-          "trigger:NavigateTo": useCallbackRef((_, { viewId }) => {
-            onNavigateTo == null ? void 0 : onNavigateTo(viewId);
-          }),
-          "trigger:OnChange": useCallbackRef((_, params) => {
-            onChange == null ? void 0 : onChange(params);
-          }),
-          "trigger:OpenSource": useCallbackRef((_, params) => {
-            onOpenSource == null ? void 0 : onOpenSource(params);
-          })
-        },
-        actors: {
-          syncManualLayoutActor: syncManualLayoutActor.provide({
-            actions: {
-              "trigger:OnChange": useCallbackRef((_, params) => {
-                onChange == null ? void 0 : onChange(params);
-              })
-            }
-          })
-        }
-      }),
-      options: {
-        // ...inspector,
-        id: `diagram:${input.view.id}`,
-        input: {
-          xystore,
-          ...input
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx(SyncStore, { input }),
-        /* @__PURE__ */ jsx(DiagramActorToggledFeatures, { children })
-      ]
-    }
-  );
-}
-const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }) => {
-  const features = useEnabledFeatures();
-  const { send } = useDiagramActor();
-  useUpdateEffect(() => {
-    send({ type: "update.inputs", inputs });
-  }, [send, inputs]);
-  useEffect(() => {
-    send({ type: "update.features", features });
-  }, [send, features]);
-  useUpdateEffect(() => {
-    send({ type: "update.view", view, xyedges, xynodes });
-  }, [send, view, xyedges, xynodes]);
-  return null;
-};
-function DiagramActorToggledFeatures({ children }) {
-  const toggledFeatures = useDiagramContext((s) => s.toggledFeatures);
-  return /* @__PURE__ */ jsx(
-    DiagramFeatures,
-    {
-      overrides: toggledFeatures,
-      children
-    }
-  );
-}
-export {
-  DiagramActor
-};