@likec4/diagram 1.31.0 → 1.32.1

package/src/search/hooks.ts

@@ -0,0 +1,38 @@
+import { createSafeContext } from '@mantine/core'
+import { useSelector } from '@xstate/react'
+import { useCallback, useDeferredValue } from 'react'
+import type { SearchActorRef, SearchActorSnapshot } from './searchActor'
+
+export const [SearchActorContext, useSearchActor] = createSafeContext<SearchActorRef>('SearchActorContext')
+
+const selectSearchValue = (s: SearchActorSnapshot) => s.context.searchValue
+export function useSearch(): [string, (search: string) => void] {
+  const searchActorRef = useSearchActor()
+  const searchValue = useSelector(searchActorRef, selectSearchValue)
+  const updateSearch = useCallback((search: string) => {
+    searchActorRef.send({ type: 'change.search', search })
+  }, [searchActorRef])
+  return [searchValue, updateSearch]
+}
+
+const selectNormalizedSearchValue = (s: SearchActorSnapshot) => {
+  const v = s.context.searchValue.trim().toLowerCase()
+  return v.length > 1 ? v : ''
+}
+export function useNormalizedSearch() {
+  const searchActorRef = useSearchActor()
+  return useDeferredValue(useSelector(searchActorRef, selectNormalizedSearchValue))
+}
+
+export function useUpdateSearch() {
+  const searchActorRef = useSearchActor()
+  return useCallback((search: string) => {
+    searchActorRef.send({ type: 'change.search', search })
+  }, [searchActorRef])
+}
+
+const selectPickViewFor = (s: SearchActorSnapshot) => s.context.pickViewFor
+export function usePickViewFor() {
+  const searchActorRef = useSearchActor()
+  return useSelector(searchActorRef, selectPickViewFor)
+}

package/src/search/searchActor.ts

@@ -0,0 +1,99 @@
+import type { Fqn } from '@likec4/core/types'
+import {
+  type ActorLogicFrom,
+  type ActorRefFrom,
+  type SnapshotFrom,
+  assertEvent,
+  assign,
+  setup,
+} from 'xstate'
+
+export type SearchActorEvent =
+  | { type: 'open'; search?: string | undefined }
+  | { type: 'close' }
+  | { type: 'change.search'; search: string }
+  | { type: 'pickview.open'; elementFqn: Fqn }
+  | { type: 'pickview.close' }
+
+export interface SearchContext {
+  openedWithSearch: string | null
+  searchValue: string
+  pickViewFor: Fqn | null
+}
+
+const _searchActorLogic = setup({
+  types: {
+    context: {} as SearchContext,
+    events: {} as SearchActorEvent,
+  },
+  actions: {
+    'change searchValue': assign({
+      searchValue: ({ event, context }) => {
+        assertEvent(event, ['change.search', 'open'])
+        return event.search ?? context.searchValue
+      },
+    }),
+    'reset pickViewFor': assign({
+      pickViewFor: () => null,
+    }),
+  },
+}).createMachine({
+  id: 'search',
+  context: {
+    openedWithSearch: null,
+    searchValue: '',
+    pickViewFor: null,
+  },
+  initial: 'inactive',
+  on: {
+    'close': {
+      target: '.inactive',
+      actions: 'reset pickViewFor',
+    },
+  },
+  states: {
+    inactive: {
+      on: {
+        'open': {
+          target: 'opened',
+          actions: [
+            assign({
+              openedWithSearch: ({ event }) => event.search ?? null,
+              searchValue: ({ event, context }) => event.search ?? context.searchValue,
+            }),
+          ],
+        },
+      },
+    },
+    opened: {
+      on: {
+        'open': {
+          actions: 'change searchValue',
+        },
+        'change.search': {
+          actions: 'change searchValue',
+        },
+        'pickview.open': {
+          target: 'pickView',
+          actions: assign({
+            pickViewFor: ({ event }) => event.elementFqn,
+          }),
+        },
+      },
+    },
+    pickView: {
+      on: {
+        'pickview.close': {
+          target: 'opened',
+          actions: 'reset pickViewFor',
+        },
+      },
+    },
+  },
+})
+
+export interface SearchActorLogic extends ActorLogicFrom<typeof _searchActorLogic> {}
+export const searchActorLogic: SearchActorLogic = _searchActorLogic
+
+export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>
+export interface SearchActorRef extends ActorRefFrom<SearchActorLogic> {}

package/src/state/DiagramActorProvider.tsx

@@ -1,43 +1,48 @@
-import type { ViewId, WhereOperator } from '@likec4/core'
-import { useDeepCompareEffect } from '@react-hookz/web'
+import type { DiagramView, WhereOperator } from '@likec4/core/types'
+import { useLogger } from '@mantine/hooks'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorContextProvider } from '../hooks/safeContext'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import type { PaddingWithUnit } from '../LikeC4Diagram.props'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
-import { type Input, diagramMachine } from './diagram-machine'
+import { type DiagramMachine, diagramMachine } from './diagram-machine'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorSnapshot } from './types'
 
 const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
-type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>
 export function DiagramActorProvider({
-  input: {
-    view,
-    ...inputs
-  },
+  view,
+  zoomable,
+  pannable,
+  fitViewPadding,
+  nodesSelectable,
   where,
   children,
 }: PropsWithChildren<{
-  input: ActorContextInput
-  where?: WhereOperator<string, string> | undefined
+  view: DiagramView
+  zoomable: boolean
+  pannable: boolean
+  fitViewPadding: PaddingWithUnit
+  nodesSelectable: boolean
+  where: WhereOperator | null
 }>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
-  const actorRef = useActorRef(
-    diagramMachine.provide({
+  const machineRef = useRef<DiagramMachine | null>(null)
+  if (!machineRef.current) {
+    machineRef.current = diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
           // Slightly defer callback for better responsiveness
           setTimeout(() => {
-            handlersRef.current.onNavigateTo?.(viewId as ViewId)
-          }, 50)
+            handlersRef.current.onNavigateTo?.(viewId)
+          }, 40)
         }),
 
         'trigger:OnChange': ((_, params) => {
@@ -57,35 +62,42 @@ export function DiagramActorProvider({
           },
         }),
       },
-    }),
+    })
+  }
+
+  const actorRef = useActorRef(
+    machineRef.current,
     {
-      id: `diagram:${view.id}`,
+      id: `diagram`,
       systemId: 'diagram',
       // ...inspector,
       input: {
         xystore,
         view,
-        ...inputs,
+        zoomable,
+        pannable,
+        fitViewPadding,
+        nodesSelectable,
       },
     },
   )
 
   const features = useEnabledFeatures()
-  useUpdateEffect(() => {
-    actorRef.send({ type: 'update.inputs', inputs })
-  }, [inputs])
-
   useEffect(() => {
     actorRef.send({ type: 'update.features', features })
   }, [features])
 
+  useEffect(() => {
+    actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
+  }, [zoomable, pannable, fitViewPadding, nodesSelectable])
+
   const { xyedges, xynodes } = useViewToNodesEdges({
     view,
     where,
-    nodesSelectable: inputs.nodesSelectable,
+    nodesSelectable,
   })
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     actorRef.send({ type: 'update.view', view, xyedges, xynodes })
   }, [view, xyedges, xynodes])
 

package/src/state/assign.ts

@@ -140,16 +140,16 @@ export function focusNodesEdges(params: ActionArg): Partial<DiagramContext> {
   }
 }
 
-export function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext> {
-  const { xynodes, xyedges } = context
-  return {
-    xynodes: xynodes.map(Base.setDimmed(false)),
-    xyedges: xyedges.map(Base.setData({
-      dimmed: false,
-      active: false,
-    })),
-  }
-}
+// export function unfocusNodesEdges({ context }: ActionArg): Partial<DiagramContext> {
+//   const { xynodes, xyedges } = context
+//   return {
+//     xynodes: xynodes.map(Base.setDimmed(false)),
+//     xyedges: xyedges.map(Base.setData({
+//       dimmed: false,
+//       active: false,
+//     })),
+//   }
+// }
 
 export function updateNavigationHistory({ context, event }: ActionArg): Partial<DiagramContext> {
   assertEvent(event, 'update.view')