@likec4/diagram 1.22.0 → 1.23.0

package/dist/likec4diagram/state/utils.d.ts

@@ -1,8 +0,0 @@
-import { BBox } from '@likec4/core';
-import { DiagramContext } from './machine';
-export declare function focusedBounds(params: {
-    context: DiagramContext;
-}): {
-    bounds: BBox;
-    duration?: number;
-};

package/src/hooks/useDiagramActor.ts

@@ -1,27 +0,0 @@
-import { useCallbackRef } from '@mantine/hooks'
-import { useSelector as useXstateSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import { useActorRef, useSelector } from '../likec4diagram/state/actorContext'
-import type { LikeC4ViewActorRef } from '../likec4diagram/state/machine'
-import { type MachineSnapshot } from '../likec4diagram/state/machine'
-import type { SyncLayoutActorSnapshot } from '../likec4diagram/state/syncManualLayoutActor'
-
-export function useDiagramActor(): LikeC4ViewActorRef {
-  return useActorRef()
-}
-export function useDiagramActorState<T = unknown>(
-  selector: (state: MachineSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-): T {
-  const select = useCallbackRef((s: MachineSnapshot) => selector(s))
-  return useSelector(select, compare)
-}
-
-export function useDiagramSyncLayoutState<T = unknown>(
-  selector: (state: SyncLayoutActorSnapshot) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-): T {
-  const syncLayoutActorRef = useDiagramActorState(s => s.context.syncLayoutActorRef)
-  const select = useCallbackRef(selector)
-  return useXstateSelector(syncLayoutActorRef, select, compare)
-}

package/src/hooks/useDiagramContext.ts

@@ -1,14 +0,0 @@
-import { useCallbackRef } from '@mantine/hooks'
-import { shallowEqual } from 'fast-equals'
-import { useSelector } from '../likec4diagram/state/actorContext'
-import { type DiagramContext, type MachineSnapshot } from '../likec4diagram/state/machine'
-
-export function useDiagramContext<T = unknown>(
-  selector: (state: DiagramContext) => T,
-  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
-) {
-  const select = useCallbackRef((s: MachineSnapshot) => selector(s.context))
-  return useSelector(select, compare)
-}
-
-export { DiagramContext } from '../likec4diagram/state/machine'

package/src/likec4diagram/DiagramActor.tsx

@@ -1,79 +0,0 @@
-import type { ViewId } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { useStoreApi } from '@xyflow/react'
-import { type PropsWithChildren, useEffect } from 'react'
-import { useDiagramEventHandlers, useEnabledFeatures } from '../context'
-import { useDiagramActor } from '../hooks/useDiagramActor'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { LikeC4ViewMachineContextProvider } from './state/actorContext'
-// import { useInspector } from './state/inspector'
-import { type Input, diagramMachine } from './state/machine'
-import { syncManualLayoutActor } from './state/syncManualLayoutActor'
-import type { Types } from './types'
-
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-
-export function DiagramActor({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
-  const { onNavigateTo, onOpenSource, onChange } = useDiagramEventHandlers()
-  const xystore = useStoreApi<Types.Node, Types.Edge>()
-  // const inspector = useInspector()
-  return (
-    (
-      <LikeC4ViewMachineContextProvider
-        logic={diagramMachine.provide({
-          actions: {
-            'trigger:NavigateTo': useCallbackRef((_, { viewId }) => {
-              onNavigateTo?.(viewId as ViewId)
-            }),
-
-            'trigger:OnChange': useCallbackRef((_, params) => {
-              onChange?.(params)
-            }),
-
-            'trigger:OpenSource': useCallbackRef((_, params) => {
-              onOpenSource?.(params)
-            }),
-          },
-          actors: {
-            syncManualLayoutActor: syncManualLayoutActor.provide({
-              actions: {
-                'trigger:OnChange': useCallbackRef((_, params) => {
-                  onChange?.(params)
-                }),
-              },
-            }),
-          },
-        })}
-        options={{
-          // ...inspector,
-          id: `diagram:${input.view.id}`,
-          input: {
-            xystore,
-            ...input,
-          },
-        }}
-      >
-        <SyncStore input={input} />
-        {children}
-      </LikeC4ViewMachineContextProvider>
-    )
-  )
-}
-
-const SyncStore = ({ input: { view, xyedges, xynodes, ...inputs } }: { input: ActorContextInput }) => {
-  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
-}

package/src/likec4diagram/state/actorContext.ts

@@ -1,8 +0,0 @@
-import { createActorContext } from '@xstate/react'
-import { diagramMachine } from './machine'
-
-export const {
-  Provider: LikeC4ViewMachineContextProvider,
-  useSelector,
-  useActorRef,
-} = createActorContext(diagramMachine)

package/src/likec4diagram/state/hotkeyActor.ts

@@ -1,20 +0,0 @@
-import { getHotkeyHandler } from '@mantine/hooks'
-import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
-
-export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
-// TODO: naming convention for actors
-export const hotkeyActor = fromCallback<AnyEventObject, NonReducibleUnknown, HotKeyEvent>(({ sendBack }: {
-  sendBack: (event: HotKeyEvent) => void
-}) => {
-  const handler = getHotkeyHandler([
-    ['Escape', () => sendBack({ type: 'key.esc' }), {
-      preventDefault: true,
-    }],
-    ['ArrowLeft', () => sendBack({ type: 'key.arrow.left' })],
-    ['ArrowRight', () => sendBack({ type: 'key.arrow.right' })],
-  ])
-  document.body.addEventListener('keydown', handler, { capture: true })
-  return () => {
-    document.body.removeEventListener('keydown', handler, { capture: true })
-  }
-})

package/src/likec4diagram/state/inspector.ts

@@ -1,23 +0,0 @@
-import { createBrowserInspector } from '@statelyai/inspect'
-import { useRef } from 'react'
-import type { InspectionEvent, Observer } from 'xstate'
-
-const useInspector: () => { inspect?: Observer<InspectionEvent> } =
-  // @ts-ignore
-  process.env.NODE_ENV === 'production'
-    ? () => ({})
-    : () => {
-      const inspectorRef = useRef<ReturnType<typeof createBrowserInspector>>(null)
-      if (!inspectorRef.current) {
-        inspectorRef.current = createBrowserInspector({
-          filter: (event) => {
-            return event.type !== '@xstate.event' || !event.event.type.startsWith('xyflow.apply')
-          },
-        })
-      }
-      return {
-        inspect: inspectorRef.current.inspect,
-      }
-    }
-
-export { useInspector }