@likec4/diagram 1.41.0 → 1.42.0

package/src/search/components/styles.css.ts

@@ -1,72 +0,0 @@
-import { css } from '@likec4/styles/css'
-export { focusable } from './_shared.css'
-
-export const input = css({
-  border: 'transparent',
-  background: {
-    base: 'transparent',
-    _focusWithin: {
-      base: `mantine.colors.gray[4]/55 !important`,
-      _dark: `mantine.colors.dark[5]/55 !important`,
-    },
-    _groupHover: {
-      base: 'mantine.colors.gray[3]/35',
-      _dark: 'mantine.colors.dark[5]/35',
-    },
-  },
-})
-
-export const pickviewBackdrop = css({
-  position: 'absolute',
-  inset: '0',
-  width: '100%',
-  height: '100%',
-  backgroundColor: '[rgb(34 34 34 / 0.7)]',
-  zIndex: 902,
-  backdropFilter: 'auto',
-  backdropBlur: '10px',
-  _light: {
-    backgroundColor: '[rgb(255 255 255 / 0.6)]',
-  },
-})
-export const pickview = css({
-  position: 'absolute',
-  top: '[2rem]',
-  left: '[50%]',
-  width: '100%',
-  maxWidth: '600px',
-  minWidth: '200px',
-  transform: 'translateX(-50%)',
-  zIndex: 903,
-})
-
-export const pickviewGroup = css({
-  marginTop: '2',
-  '& + &': {
-    marginTop: '[32px]',
-  },
-})
-
-// globalStyle(`${whereDark} ${pickview} ${button}`, {
-//   borderColor: mantine.colors.dark[5],
-//   backgroundColor: mantine.colors.dark[6],
-// })
-// globalStyle(`${whereDark} ${pickview} ${button}:hover`, {
-//   ...buttonFocused,
-//   backgroundColor: `color-mix(in srgb, ${buttonFocused.backgroundColor}, transparent 40%)`,
-// })
-// globalStyle(`${whereDark} ${pickview} ${button}:focus`, buttonFocused)
-
-export const scrollArea = css({
-  height: [
-    '100%',
-    '100cqh',
-  ],
-  '& .mantine-ScrollArea-viewport': {
-    minHeight: '100%',
-    '& > div': {
-      minHeight: '100%',
-      height: '100%',
-    },
-  },
-})

package/src/search/components/utils.ts

@@ -1,64 +0,0 @@
-import { isFunction } from 'remeda'
-import { focusable } from './_shared.css'
-
-export function stopAndPrevent(e: React.KeyboardEvent | KeyboardEvent) {
-  e.stopPropagation()
-  e.preventDefault()
-  return
-}
-
-export function centerY(element: HTMLElement) {
-  const rect = element.getBoundingClientRect()
-  const y = rect.y + Math.floor(rect.height / 2)
-  return y
-}
-
-export function moveFocusToSearchInput(from: HTMLElement | null | undefined) {
-  if (!from) {
-    console.error('moveFocusToSearchInput: from is null or undefined')
-    return
-  }
-  const root = from.getRootNode() as Document | ShadowRoot
-  if (!isFunction(root.querySelector)) {
-    console.error('moveFocusToSearchInput: root.querySelector is not a function')
-    return
-  }
-  let input = root.querySelector('[data-likec4-search-input]') as HTMLInputElement | null
-  if (input) {
-    const length = input.value.length
-    input.focus()
-    input.setSelectionRange(length, length)
-  }
-}
-
-export function focusToFirstFoundElement(from: HTMLElement | null | undefined) {
-  if (!from) {
-    console.error('focusToFirstFoundElement: from is null or undefined')
-    return
-  }
-  const root = from.getRootNode() as Document | ShadowRoot
-  if (!isFunction(root.querySelector)) {
-    console.error('focusToFirstFoundElement: root.querySelector is not a function')
-    return
-  }
-  let firstFoundElement = root.querySelector<HTMLButtonElement>(`[data-likec4-search] .${focusable}`)
-  firstFoundElement?.focus()
-}
-
-export function queryAllFocusable(
-  from: HTMLElement | null | undefined,
-  where: 'elements' | 'views',
-  selector: string = `.${focusable}`,
-): HTMLButtonElement[] {
-  if (!from) {
-    console.error('queryAllFocusable: from is null or undefined')
-    return []
-  }
-  const root = from.getRootNode() as Document | ShadowRoot
-  if (!isFunction(root.querySelectorAll)) {
-    console.error('queryAllFocusable: root.querySelectorAll is not a function')
-    return []
-  }
-  const elements = root.querySelectorAll<HTMLButtonElement>(`[data-likec4-search-${where}] ${selector}`)
-  return [...elements]
-}

package/src/search/hooks.ts

@@ -1,38 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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,160 +0,0 @@
-import type { DiagramView, DynamicViewDisplayVariant, WhereOperator } from '@likec4/core/types'
-import { useCustomCompareEffect, useRafEffect } from '@react-hookz/web'
-import { useActorRef, useSelector } from '@xstate/react'
-import { useStoreApi } from '@xyflow/react'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useMemo, useRef } from 'react'
-import { ErrorBoundary } from '../components/ErrorFallback'
-import { useDiagramEventHandlers } from '../context/DiagramEventHandlers'
-import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
-import { useOnDiagramEvent } from '../custom'
-import { DiagramActorContextProvider } from '../hooks/safeContext'
-import type { ViewPadding } from '../LikeC4Diagram.props'
-import { convertToXYFlow } from '../likec4diagram/convert-to-xyflow'
-import type { Types } from '../likec4diagram/types'
-import { CurrentViewModelContext } from '../likec4model/LikeC4ModelContext'
-import { useLikeC4Model } from '../likec4model/useLikeC4Model'
-import { type DiagramMachine, diagramMachine } from './diagram-machine'
-import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorRef, DiagramActorSnapshot } from './types'
-
-const selectDynamicViewVariant = (state: DiagramActorSnapshot) => {
-  return state.context.dynamicViewVariant
-}
-
-export function DiagramActorProvider({
-  view,
-  zoomable,
-  pannable,
-  fitViewPadding,
-  nodesSelectable,
-  where,
-  children,
-  dynamicViewVariant: _defaultVariant,
-}: PropsWithChildren<{
-  view: DiagramView
-  zoomable: boolean
-  pannable: boolean
-  fitViewPadding: ViewPadding
-  nodesSelectable: boolean
-  where: WhereOperator | null
-  dynamicViewVariant: DynamicViewDisplayVariant | undefined
-}>) {
-  const { handlersRef } = useDiagramEventHandlers()
-  const xystore = useStoreApi<Types.Node, Types.Edge>()
-
-  const machineRef = useRef<DiagramMachine | null>(null)
-  if (!machineRef.current) {
-    machineRef.current = diagramMachine.provide({
-      actors: {
-        syncManualLayoutActorLogic: syncManualLayoutActorLogic.provide({
-          actions: {
-            'trigger:OnChange': ((_, params) => {
-              handlersRef.current.onChange?.(params)
-            }),
-          },
-        }),
-      },
-    })
-  }
-
-  const actorRef = useActorRef(
-    machineRef.current,
-    {
-      id: `diagram`,
-      systemId: 'diagram',
-      // ...inspector,
-      input: {
-        xystore,
-        view,
-        zoomable,
-        pannable,
-        fitViewPadding,
-        nodesSelectable,
-        dynamicViewVariant: _defaultVariant,
-      },
-    },
-  )
-
-  const features = useEnabledFeatures()
-  useCustomCompareEffect(
-    () => {
-      actorRef.send({ type: 'update.features', features })
-    },
-    [features],
-    shallowEqual,
-  )
-
-  useCustomCompareEffect(
-    () => {
-      actorRef.send({ type: 'update.inputs', inputs: { zoomable, pannable, fitViewPadding, nodesSelectable } })
-    },
-    [zoomable, pannable, fitViewPadding, nodesSelectable],
-    deepEqual,
-  )
-
-  const dynamicViewVariant = useSelector(actorRef, selectDynamicViewVariant)
-
-  const update = useMemo(
-    () => convertToXYFlow({ view, where, nodesSelectable, dynamicViewVariant }),
-    [view, where, nodesSelectable, dynamicViewVariant],
-  )
-
-  useRafEffect(() => {
-    actorRef.send({
-      type: 'update.view',
-      ...update,
-    })
-  }, [actorRef, update])
-
-  return (
-    <DiagramActorContextProvider value={actorRef}>
-      <ErrorBoundary>
-        <CurrentViewModelProvider actorRef={actorRef}>
-          {children}
-        </CurrentViewModelProvider>
-      </ErrorBoundary>
-      <DiagramActorEventListener actorRef={actorRef} />
-    </DiagramActorContextProvider>
-  )
-}
-
-const selectViewIdAndToggledFeatures = (state: DiagramActorSnapshot) => {
-  if (state.context.features.enableReadOnly || state.context.activeWalkthrough) {
-    return {
-      viewId: state.context.view.id,
-      toggledFeatures: {
-        ...state.context.toggledFeatures,
-        enableReadOnly: true,
-      },
-    }
-  }
-  return {
-    viewId: state.context.view.id,
-    toggledFeatures: state.context.toggledFeatures,
-  }
-}
-function CurrentViewModelProvider({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
-  const { viewId, toggledFeatures } = useSelector(actorRef, selectViewIdAndToggledFeatures, deepEqual)
-  const likec4model = useLikeC4Model()
-  const viewmodel = likec4model.findView(viewId)
-  return (
-    <CurrentViewModelContext.Provider value={viewmodel}>
-      <DiagramFeatures overrides={toggledFeatures}>
-        {children}
-      </DiagramFeatures>
-    </CurrentViewModelContext.Provider>
-  )
-}
-
-function DiagramActorEventListener({ actorRef }: { actorRef: DiagramActorRef }) {
-  const {
-    onNavigateTo,
-    onOpenSource,
-  } = useDiagramEventHandlers()
-
-  useOnDiagramEvent('openSource', ({ params }) => onOpenSource?.(params))
-  useOnDiagramEvent('navigateTo', ({ viewId }) => onNavigateTo?.(viewId))
-
-  return null
-}