@likec4/diagram 1.34.1 → 1.35.0

package/src/navigationpanel/actor.ts

@@ -0,0 +1,321 @@
+import { 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: 'trigger.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 }) => {
+      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 trigger.navigateTo': emit(({ event }) => {
+      assertEvent(event, 'select.view')
+      return {
+        type: 'trigger.navigateTo' as const,
+        viewId: 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.folder': {
+              actions: 'update selected folder',
+              target: 'opened',
+              reenter: true,
+            },
+            'breadcrumbs.click.viewtitle': {
+              actions: 'reset selected folder',
+              reenter: true,
+              target: 'opened',
+            },
+            'select.folder': {
+              actions: [
+                'keep dropdown open',
+                'update selected folder',
+              ],
+            },
+            'select.view': {
+              actions: [
+                'emit trigger.navigateTo',
+              ],
+            },
+          },
+        },
+        search: {
+          on: {
+            'breadcrumbs.click.folder': {
+              actions: [
+                'reset search query',
+                'update selected folder',
+              ],
+              target: 'opened',
+            },
+            'breadcrumbs.click.*': {
+              actions: [
+                'reset search query',
+                'reset selected folder',
+              ],
+              target: 'opened',
+            },
+            'select.view': {
+              actions: [
+                'emit trigger.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

@@ -0,0 +1,32 @@
+import { IconMenu2 } from '@tabler/icons-react'
+import { useDiagramEventHandlers } from '../../context'
+import { PanelActionIcon } from '../_common'
+import { useNavigationActorRef } from '../hooks'
+
+export const BurgerButton = () => {
+  const actor = useNavigationActorRef()
+  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.send({ type: 'breadcrumbs.mouseLeave.root' })
+          setTimeout(() => {
+            onBurgerMenuClick()
+          }, 100)
+        } else {
+          actor.send({ type: 'breadcrumbs.click.root' })
+        }
+      }}
+      children={<IconMenu2 style={{ width: '80%', height: '80%' }} />}
+    />
+  )
+}

package/src/navigationpanel/controls/NavigationButtons.tsx

@@ -0,0 +1,36 @@
+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: 1, mdDown: { display: 'none' } })}>
+      <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

@@ -0,0 +1,28 @@
+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 size={12} stroke={1.5} style={{ width: '65%' }} />}
+      />
+    </Tooltip>
+  )
+}

package/src/navigationpanel/controls/SearchControl.tsx

@@ -0,0 +1,64 @@
+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={{
+        translateY: 1,
+      }}
+      className={cx(
+        'group',
+        hstack({
+          gap: '2xs',
+          paddingInline: 'sm',
+          paddingBlock: '2xs',
+          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',
+          },
+          smDown: {
+            display: 'none',
+          },
+        }),
+      )}>
+      <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

@@ -0,0 +1,66 @@
+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: '2',
+          paddingInline: '2xs',
+          paddingBlock: '2xs',
+          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>
+  )
+}

package/src/navigationpanel/controls/index.ts

@@ -0,0 +1,5 @@
+export { BurgerButton } from './BurgerButton'
+export { NavigationButtons } from './NavigationButtons'
+export { OpenSource } from './OpenSource'
+export { SearchControl } from './SearchControl'
+export { ToggleReadonly } from './ToggleReadonly'

package/src/navigationpanel/editorpanel/CenterCamera.tsx

@@ -0,0 +1,15 @@
+import { IconFocusCentered } from '@tabler/icons-react'
+import { useDiagram } from '../../hooks/useDiagram'
+import { PanelActionIcon } from '../_common'
+import { Tooltip } from './_common'
+
+export const CenterCamera = () => {
+  const diagram = useDiagram()
+  return (
+    <Tooltip label="Center camera">
+      <PanelActionIcon onClick={() => diagram.fitDiagram()}>
+        <IconFocusCentered />
+      </PanelActionIcon>
+    </Tooltip>
+  )
+}