@likec4/diagram 1.41.0 → 1.42.0

package/src/navigationpanel/actor.ts

@@ -1,320 +0,0 @@
-import type { ViewId } from '@likec4/core/types'
-import { isEmpty } from 'remeda'
-import {
-  type ActorLogicFrom,
-  type ActorRefFrom,
-  type SnapshotFrom,
-  assertEvent,
-  assign,
-  emit,
-  raise,
-  setup,
-} from 'xstate'
-import type { CurrentViewModel } from '../likec4model/LikeC4ModelContext'
-
-export interface NavigationPanelActorInput {
-  viewModel: CurrentViewModel
-}
-
-export type NavigationPanelActorEvent =
-  // Logic events
-  | { type: 'update.inputs'; inputs: NavigationPanelActorInput }
-  | { type: 'searchQuery.change'; value: string }
-  | { type: 'searchQuery.changed' }
-  | { type: 'select.folder'; folderPath: string }
-  | { type: 'select.view'; viewId: ViewId }
-  // Events from the UI
-  // - From breadcrumbs
-  | { type: 'breadcrumbs.mouseLeave' }
-  | { type: 'breadcrumbs.mouseEnter.root' }
-  | { type: 'breadcrumbs.mouseLeave.root' }
-  | { type: 'breadcrumbs.mouseEnter.folder'; folderPath: string }
-  | { type: 'breadcrumbs.mouseLeave.folder'; folderPath: string }
-  | { type: 'breadcrumbs.mouseEnter.viewtitle' }
-  | { type: 'breadcrumbs.mouseLeave.viewtitle' }
-  | { type: 'breadcrumbs.click.root' }
-  | { type: 'breadcrumbs.click.folder'; folderPath: string }
-  | { type: 'breadcrumbs.click.viewtitle' }
-  // - From dropdown
-  | { type: 'dropdown.mouseEnter' }
-  | { type: 'dropdown.mouseLeave' }
-  | { type: 'dropdown.dismiss' }
-
-export type NavigationPanelActorEmitted = { type: 'navigateTo'; viewId: ViewId }
-
-export type BreadcrumbItem =
-  | { type: 'folder'; folderPath: string; title: string }
-  | { type: 'viewtitle'; title: string }
-
-export type DropdownColumnItem =
-  | {
-    type: 'folder'
-    folderPath: string
-    title: string
-    selected: boolean
-  }
-  | {
-    type: 'view'
-    viewType: 'element' | 'deployment' | 'dynamic' | 'index'
-    viewId: string
-    title: string
-    description: string | null
-    selected: boolean
-  }
-
-export interface NavigationPanelActorContext {
-  viewModel: CurrentViewModel
-  /**
-   * Who activated the dropdown
-   * (if `click` then the dropdown is always open until dismissed)
-   * @default 'hover'
-   */
-  activatedBy: 'hover' | 'click'
-
-  /**
-   * The folder that is currently selected in the dropdown
-   * By default it is the root
-   */
-  selectedFolder: string
-
-  searchQuery: string
-}
-
-const _actorLogic = setup({
-  types: {
-    context: {} as NavigationPanelActorContext,
-    events: {} as NavigationPanelActorEvent,
-    tags: 'active',
-    input: {} as NavigationPanelActorInput,
-    emitted: {} as NavigationPanelActorEmitted,
-  },
-  delays: {
-    'open timeout': 500,
-    'close timeout': 350,
-  },
-  actions: {
-    'update activatedBy': assign({
-      activatedBy: ({ context, event }) => {
-        switch (true) {
-          case event.type.includes('click'):
-            return 'click'
-          case event.type.includes('mouseEnter'):
-            return 'hover'
-          default:
-            return context.activatedBy
-        }
-      },
-    }),
-    'keep dropdown open': assign({
-      activatedBy: 'click',
-    }),
-    'update selected folder': assign(({ event }) => {
-      if (event.type === 'breadcrumbs.click.root') {
-        return { selectedFolder: '' } // reset to root
-      }
-      assertEvent(event, ['breadcrumbs.click.folder', 'select.folder'])
-      return { selectedFolder: event.folderPath }
-    }),
-    'reset selected folder': assign({
-      selectedFolder: ({ context }) => context.viewModel.folder.path,
-    }),
-    'update inputs': assign(({ context, event }) => {
-      assertEvent(event, 'update.inputs')
-      const viewChanged = event.inputs.viewModel.id !== context.viewModel.id
-      let selectedFolder = context.selectedFolder
-      if (!event.inputs.viewModel.folder.path.startsWith(selectedFolder)) {
-        selectedFolder = event.inputs.viewModel.folder.path
-      }
-      return {
-        viewModel: event.inputs.viewModel,
-        selectedFolder,
-        // allow dropdown to close on mouse leave if view changed
-        activatedBy: viewChanged ? 'hover' : context.activatedBy,
-      }
-    }),
-    'reset search query': assign({
-      searchQuery: '',
-    }),
-    'update search query': assign(({ event }) => {
-      assertEvent(event, 'searchQuery.change')
-      return { searchQuery: event.value ?? '' }
-    }),
-    'emit navigateTo': emit(({ event }) => {
-      assertEvent(event, 'select.view')
-      return {
-        type: 'navigateTo' as const,
-        viewId: event.viewId,
-      }
-    }),
-  },
-  guards: {
-    'was opened on hover': ({ context }) => context.activatedBy === 'hover',
-    'has search query': ({ context }) => !isEmpty(context.searchQuery),
-    'search query is empty': ({ context }) => isEmpty(context.searchQuery),
-  },
-}).createMachine({
-  id: 'breadcrumbs',
-  context: ({ input }) => ({
-    ...input,
-    breadcrumbs: [],
-    activatedBy: 'hover',
-    selectedFolder: '',
-    searchQuery: '',
-    folderColumns: [],
-  }),
-  initial: 'idle',
-  entry: [
-    'update activatedBy',
-    'reset selected folder',
-  ],
-  on: {
-    'update.inputs': {
-      actions: 'update inputs',
-    },
-    'searchQuery.change': {
-      actions: [
-        'update search query',
-        raise({ type: 'searchQuery.changed' }),
-      ],
-    },
-  },
-  states: {
-    idle: {
-      id: 'idle',
-      on: {
-        'breadcrumbs.mouseEnter.*': {
-          target: 'pending',
-          actions: 'update activatedBy',
-        },
-        'breadcrumbs.click.*': {
-          target: 'active',
-          actions: 'update activatedBy',
-        },
-      },
-    },
-    // Breadcrumbs are hovered, but dropdown is not opened yet
-    pending: {
-      on: {
-        'breadcrumbs.mouseEnter.*': {
-          actions: 'update activatedBy',
-        },
-        'breadcrumbs.mouseLeave.*': {
-          target: 'idle',
-        },
-        'breadcrumbs.click.*': {
-          target: 'active',
-          actions: 'update activatedBy',
-        },
-      },
-      after: {
-        'open timeout': {
-          target: 'active',
-        },
-      },
-    },
-    active: {
-      tags: ['active'],
-      initial: 'decide',
-      on: {
-        'dropdown.dismiss': {
-          target: '#idle',
-        },
-        'breadcrumbs.mouseLeave': {
-          guard: 'was opened on hover',
-          target: '.closing',
-        },
-        'dropdown.mouseLeave': {
-          guard: 'was opened on hover',
-          target: '.closing',
-        },
-        'searchQuery.changed': {
-          target: '.decide',
-        },
-      },
-      states: {
-        // Decide next state based on the search query
-        decide: {
-          always: [
-            {
-              guard: 'has search query',
-              target: 'search',
-            },
-            {
-              target: 'opened',
-            },
-          ],
-        },
-        opened: {
-          on: {
-            'searchQuery.changed': {
-              guard: 'has search query',
-              actions: 'keep dropdown open',
-              target: 'search',
-            },
-            'breadcrumbs.click.viewtitle': {
-              actions: 'reset selected folder',
-            },
-            'breadcrumbs.click.*': {
-              actions: 'update selected folder',
-            },
-            'select.folder': {
-              actions: [
-                'keep dropdown open',
-                'update selected folder',
-              ],
-            },
-            'select.view': {
-              actions: [
-                'emit navigateTo',
-              ],
-            },
-          },
-        },
-        search: {
-          on: {
-            'breadcrumbs.click.viewtitle': {
-              actions: [
-                'reset search query',
-                'reset selected folder',
-              ],
-              target: 'opened',
-            },
-            'breadcrumbs.click.*': {
-              actions: [
-                'reset search query',
-                'update selected folder',
-              ],
-              target: 'opened',
-            },
-            'select.view': {
-              actions: [
-                'emit navigateTo',
-              ],
-            },
-          },
-        },
-        closing: {
-          on: {
-            'breadcrumbs.mouseEnter.*': {
-              target: 'decide',
-            },
-            'dropdown.mouseEnter': {
-              target: 'decide',
-            },
-          },
-          after: {
-            'close timeout': {
-              target: '#idle',
-            },
-          },
-        },
-      },
-    },
-  },
-})
-
-export interface NavigationPanelActorLogic extends ActorLogicFrom<typeof _actorLogic> {}
-export const navigationPanelActorLogic: NavigationPanelActorLogic = _actorLogic
-
-export type NavigationPanelActorSnapshot = SnapshotFrom<NavigationPanelActorLogic>
-export interface NavigationPanelActorRef extends ActorRefFrom<NavigationPanelActorLogic> {}

package/src/navigationpanel/controls/BurgerButton.tsx

@@ -1,30 +0,0 @@
-import { IconMenu2 } from '@tabler/icons-react'
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
-import { PanelActionIcon } from '../_common'
-import { useNavigationActor } from '../hooks'
-
-export const BurgerButton = () => {
-  const actor = useNavigationActor()
-  const { onBurgerMenuClick } = useDiagramEventHandlers()
-  return (
-    <PanelActionIcon
-      layout="position"
-      onMouseEnter={() => {
-        actor.send({ type: 'breadcrumbs.mouseEnter.root' })
-      }}
-      onMouseLeave={() => {
-        actor.send({ type: 'breadcrumbs.mouseLeave.root' })
-      }}
-      onClick={e => {
-        e.stopPropagation()
-        if (onBurgerMenuClick && actor.isOpened()) {
-          setTimeout(() => {
-            onBurgerMenuClick()
-          }, 100)
-        }
-        actor.send({ type: 'breadcrumbs.click.root' })
-      }}
-      children={<IconMenu2 style={{ width: '80%', height: '80%' }} />}
-    />
-  )
-}

package/src/navigationpanel/controls/NavigationButtons.tsx

@@ -1,40 +0,0 @@
-import { hstack } from '@likec4/styles/patterns'
-import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
-import { PanelActionIcon } from '../_common'
-
-export const NavigationButtons = () => {
-  const diagram = useDiagram()
-  const {
-    hasStepBack,
-    hasStepForward,
-  } = useDiagramContext(s => ({
-    hasStepBack: s.navigationHistory.currentIndex > 0,
-    hasStepForward: s.navigationHistory.currentIndex < s.navigationHistory.history.length - 1,
-  }))
-  return (
-    <m.div
-      layout="position"
-      className={hstack({
-        gap: '0.5',
-      })}>
-      <PanelActionIcon
-        disabled={!hasStepBack}
-        onClick={e => {
-          e.stopPropagation()
-          diagram.navigate('back')
-        }}
-        children={<IconArrowLeft size={14} />}
-      />
-      <PanelActionIcon
-        disabled={!hasStepForward}
-        onClick={e => {
-          e.stopPropagation()
-          diagram.navigate('forward')
-        }}
-        children={<IconArrowRight size={14} />}
-      />
-    </m.div>
-  )
-}

package/src/navigationpanel/controls/OpenSource.tsx

@@ -1,28 +0,0 @@
-import { IconFileSymlink } from '@tabler/icons-react'
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
-import { useEnabledFeatures } from '../../context/DiagramFeatures'
-import { useCurrentViewId } from '../../hooks/useCurrentViewId'
-import { PanelActionIcon, Tooltip } from '../_common'
-
-export const OpenSource = () => {
-  const viewId = useCurrentViewId()
-  const { enableVscode } = useEnabledFeatures()
-  const { onOpenSource } = useDiagramEventHandlers()
-
-  if (!enableVscode) {
-    return null
-  }
-
-  return (
-    <Tooltip label="Open View Source">
-      <PanelActionIcon
-        // variant="filled"
-        onClick={e => {
-          e.stopPropagation()
-          onOpenSource?.({ view: viewId })
-        }}
-        children={<IconFileSymlink style={{ width: '60%', height: '60%' }} />}
-      />
-    </Tooltip>
-  )
-}

package/src/navigationpanel/controls/SearchControl.tsx

@@ -1,66 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { hstack } from '@likec4/styles/patterns'
-import {
-  UnstyledButton,
-} from '@mantine/core'
-import {
-  IconSearch,
-} from '@tabler/icons-react'
-import { isMacOs } from '@xyflow/system'
-import * as m from 'motion/react-m'
-import { useDiagram } from '../../hooks/useDiagram'
-
-export function SearchControl() {
-  const diagram = useDiagram()
-  const isMac = isMacOs()
-
-  return (
-    <UnstyledButton
-      component={m.button}
-      layout="position"
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openSearch()
-      }}
-      whileTap={{
-        scale: 0.95,
-        translateY: 1,
-      }}
-      className={cx(
-        'group',
-        hstack({
-          gap: 'xxs',
-          paddingInline: 'sm',
-          paddingBlock: 'xxs',
-          rounded: 'sm',
-          userSelect: 'none',
-          cursor: 'pointer',
-          color: {
-            base: 'likec4.panel.action-icon.text',
-            _hover: 'likec4.panel.action-icon.text.hover',
-          },
-          backgroundColor: {
-            base: 'likec4.panel.action-icon.bg',
-            _hover: 'likec4.panel.action-icon.bg.hover',
-          },
-          display: {
-            base: 'none',
-            '@/md': 'flex',
-          },
-        }),
-      )}>
-      <IconSearch size={14} stroke={2.5} />
-      <Box
-        css={{
-          fontSize: '11px',
-          fontWeight: 600,
-          lineHeight: 1,
-          opacity: 0.8,
-          whiteSpace: 'nowrap',
-        }}>
-        {isMac ? '⌘ + K' : 'Ctrl + K'}
-      </Box>
-    </UnstyledButton>
-  )
-}

package/src/navigationpanel/controls/ToggleReadonly.tsx

@@ -1,66 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-import { hstack } from '@likec4/styles/patterns'
-import { UnstyledButton } from '@mantine/core'
-import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { useDiagram, useDiagramContext } from '../../hooks/useDiagram'
-import type { DiagramContext } from '../../state/types'
-
-const selector = (state: DiagramContext) => ({
-  visible: state.features.enableReadOnly !== true,
-  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly,
-})
-
-export const ToggleReadonly = () => {
-  const { visible, isReadOnly } = useDiagramContext(selector)
-  const diagram = useDiagram()
-
-  if (!visible) {
-    return null
-  }
-
-  return (
-    <UnstyledButton
-      component={m.button}
-      layout="position"
-      onClick={e => {
-        e.stopPropagation()
-        diagram.toggleFeature('ReadOnly')
-      }}
-      whileTap={{
-        translateY: 1,
-      }}
-      className={cx(
-        'group',
-        hstack({
-          gap: '0.5',
-          paddingInline: 'xxs',
-          paddingBlock: 'xxs',
-          rounded: 'sm',
-          userSelect: 'none',
-          cursor: 'pointer',
-          color: {
-            base: 'likec4.panel.action-icon.text',
-            _hover: 'likec4.panel.action-icon.text.hover',
-          },
-          backgroundColor: {
-            _hover: 'likec4.panel.action-icon.bg.hover',
-          },
-        }),
-      )}>
-      {isReadOnly ? <IconLock size={14} stroke={2} /> : <IconLockOpen2 size={14} stroke={2} />}
-      {isReadOnly && (
-        <m.div
-          // layout="position"
-          className={css({
-            fontSize: '11px',
-            fontWeight: 600,
-            lineHeight: 1,
-            opacity: 0.8,
-          })}>
-          Unlock
-        </m.div>
-      )}
-    </UnstyledButton>
-  )
-}