@likec4/diagram 1.34.2 → 1.36.0

package/src/navigationpanel/NavigationPanel.tsx

@@ -0,0 +1,135 @@
+import { VStack } from '@likec4/styles/jsx'
+import { hstack } from '@likec4/styles/patterns'
+import {
+  Popover,
+  PopoverTarget,
+  Portal,
+} from '@mantine/core'
+import { useUpdateEffect } from '@react-hookz/web'
+import { useActorRef, useSelector } from '@xstate/react'
+import { AnimatePresence, LayoutGroup } from 'motion/react'
+import * as m from 'motion/react-m'
+import { memo, useEffect } from 'react'
+import { useDiagramActorRef } from '../hooks/safeContext'
+import { useDiagramContext } from '../hooks/useDiagram'
+import { useMantinePortalProps } from '../hooks/useMantinePortalProps'
+import { useCurrentViewModel } from '../likec4model/useCurrentViewModel'
+import { type NavigationPanelActorRef, navigationPanelActorLogic } from './actor'
+import { EditorPanel } from './editorpanel'
+import { NavigationPanelActorContextProvider } from './hooks'
+import { NavigationPanelControls } from './NavigationPanelControls'
+import { NavigationPanelDropdown } from './NavigationPanelDropdown'
+import { ActiveWalkthroughControls } from './walkthrough'
+
+export const NavigationPanel = memo(() => {
+  const diagramActor = useDiagramActorRef()
+  const viewModel = useCurrentViewModel()
+  const { portalProps } = useMantinePortalProps()
+
+  const actorRef = useActorRef(
+    navigationPanelActorLogic,
+    {
+      input: {
+        viewModel,
+      },
+    },
+  )
+  useEffect(() => {
+    const subscription = actorRef.on('navigateTo', (event) => {
+      if (diagramActor.getSnapshot().context.view.id !== event.viewId) {
+        diagramActor.send({ type: 'navigate.to', viewId: event.viewId })
+      }
+    })
+    return () => subscription.unsubscribe()
+  }, [actorRef, diagramActor])
+
+  useUpdateEffect(() => {
+    actorRef.send({ type: 'update.inputs', inputs: { viewModel } })
+  }, [viewModel])
+
+  return (
+    <Portal {...portalProps}>
+      <VStack
+        className="react-flow__panel"
+        css={{
+          alignItems: 'flex-start',
+          pointerEvents: 'none',
+
+          top: '0',
+          left: '0',
+          margin: '0',
+          width: '100%',
+          gap: 'xxs',
+          maxWidth: [
+            'calc(100vw)',
+            'calc(100cqw)',
+          ],
+          '@/sm': {
+            margin: 'xs',
+            gap: 'xs',
+            width: 'max-content',
+            maxWidth: [
+              'calc(100vw - 2 * {spacing.md})',
+              'calc(100cqw - 2 * {spacing.md})',
+            ],
+          },
+        }}>
+        <NavigationPanelActorContextProvider value={actorRef}>
+          <NavigationPanelImpl actor={actorRef} />
+          <EditorPanel />
+        </NavigationPanelActorContextProvider>
+      </VStack>
+    </Portal>
+  )
+})
+NavigationPanel.displayName = 'NavigationPanel'
+
+const NavigationPanelImpl = ({ actor }: { actor: NavigationPanelActorRef }) => {
+  const opened = useSelector(actor, s => s.hasTag('active'))
+  const portalProps = useMantinePortalProps()
+
+  return (
+    <Popover
+      offset={{
+        mainAxis: 2,
+      }}
+      middlewares={{ flip: false }}
+      opened={opened}
+      position="bottom-start"
+      trapFocus
+      {...portalProps}
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      onDismiss={() => actor.send({ type: 'dropdown.dismiss' })}
+    >
+      <NavigationPanelPopoverTarget actor={actor} />
+      <NavigationPanelDropdown />
+    </Popover>
+  )
+}
+const NavigationPanelPopoverTarget = ({ actor }: { actor: NavigationPanelActorRef }) => {
+  const isActiveWalkthrough = useDiagramContext(c => c.activeWalkthrough !== null)
+
+  return (
+    <LayoutGroup>
+      <PopoverTarget>
+        <m.div
+          layout
+          className={hstack({
+            layerStyle: 'likec4.panel',
+            position: 'relative',
+            gap: 'xs',
+            cursor: 'pointer',
+            paddingRight: 'md',
+            pointerEvents: 'all',
+            width: '100%',
+          })}
+          onMouseLeave={() => actor.send({ type: 'breadcrumbs.mouseLeave' })}
+        >
+          <AnimatePresence mode="popLayout">
+            {isActiveWalkthrough ? <ActiveWalkthroughControls /> : <NavigationPanelControls />}
+          </AnimatePresence>
+        </m.div>
+      </PopoverTarget>
+    </LayoutGroup>
+  )
+}

package/src/navigationpanel/NavigationPanelControls.tsx

@@ -0,0 +1,133 @@
+import { css, cx } from '@likec4/styles/css'
+import { hstack } from '@likec4/styles/patterns'
+import {
+  UnstyledButton,
+} from '@mantine/core'
+import { useSelector } from '@xstate/react'
+import { deepEqual } from 'fast-equals'
+import { AnimatePresence } from 'motion/react'
+import * as m from 'motion/react-m'
+import { useEnabledFeatures } from '../context/DiagramFeatures'
+import { BreadcrumbsSeparator } from './_common'
+import { type NavigationPanelActorSnapshot } from './actor'
+import { BurgerButton, NavigationButtons, OpenSource, SearchControl, ToggleReadonly, ViewDetailsCard } from './controls'
+import { useNavigationActor } from './hooks'
+import { breadcrumbTitle } from './styles.css'
+import { StartWalkthroughButton } from './walkthrough'
+
+const selectBreadcrumbs = ({ context }: NavigationPanelActorSnapshot) => {
+  const folder = context.viewModel.folder
+  return {
+    folders: folder.isRoot ? [] : folder.breadcrumbs.map(s => ({
+      folderPath: s.path,
+      title: s.title,
+    })),
+    viewId: context.viewModel.id,
+    viewTitle: context.viewModel.titleOrUntitled,
+    isDynamicView: context.viewModel.isDynamicView(),
+  }
+}
+
+export const NavigationPanelControls = () => {
+  const actor = useNavigationActor()
+  const {
+    enableSearch,
+    enableNavigationButtons,
+    enableDynamicViewWalkthrough,
+    enableReadOnly,
+  } = useEnabledFeatures()
+  const {
+    folders,
+    viewTitle,
+    isDynamicView,
+  } = useSelector(actor.actorRef, selectBreadcrumbs, deepEqual)
+
+  const folderBreadcrumbs = folders.flatMap(({ folderPath, title }, i) => [
+    <UnstyledButton
+      key={folderPath}
+      component={m.button}
+      className={cx(
+        breadcrumbTitle({ dimmed: true, truncate: true }),
+        'mantine-active',
+        css({
+          userSelect: 'none',
+          maxWidth: '200px',
+          display: {
+            base: 'none',
+            '@/md': 'block',
+          },
+        }),
+      )}
+      title={title}
+      onMouseEnter={() => actor.send({ type: 'breadcrumbs.mouseEnter.folder', folderPath })}
+      onMouseLeave={() => actor.send({ type: 'breadcrumbs.mouseLeave.folder', folderPath })}
+      onClick={e => {
+        e.stopPropagation()
+        actor.send({ type: 'breadcrumbs.click.folder', folderPath })
+      }}
+    >
+      {title}
+    </UnstyledButton>,
+    <BreadcrumbsSeparator key={`separator-${i}`} />,
+  ])
+
+  const viewBreadcrumb = (
+    <UnstyledButton
+      key={'view-title'}
+      component={m.button}
+      className={cx(
+        'mantine-active',
+        breadcrumbTitle({ truncate: true }),
+        css({
+          userSelect: 'none',
+        }),
+      )}
+      title={viewTitle}
+      onMouseEnter={() => actor.send({ type: 'breadcrumbs.mouseEnter.viewtitle' })}
+      onMouseLeave={() => actor.send({ type: 'breadcrumbs.mouseLeave.viewtitle' })}
+      onClick={e => {
+        e.stopPropagation()
+        actor.send({ type: 'breadcrumbs.click.viewtitle' })
+      }}
+    >
+      {viewTitle}
+    </UnstyledButton>
+  )
+
+  return (
+    <AnimatePresence propagate>
+      <BurgerButton key="burger-button" />
+      {enableNavigationButtons && <NavigationButtons key="nav-buttons" />}
+      <m.div
+        key="breadcrumbs"
+        layout="position"
+        className={hstack({
+          gap: '[3px]',
+          flexShrink: 1,
+          flexGrow: 1,
+          overflow: 'hidden',
+        })}>
+        {folderBreadcrumbs}
+        {viewBreadcrumb}
+      </m.div>
+      <m.div
+        key="actions"
+        layout="position"
+        className={hstack({
+          gap: '[1px]',
+          flexGrow: 0,
+          _empty: {
+            display: 'none',
+          },
+        })}>
+        <ViewDetailsCard
+          onOpen={() => actor.closeDropdown()}
+        />
+        <OpenSource />
+        <ToggleReadonly />
+      </m.div>
+      {enableDynamicViewWalkthrough && isDynamicView && <StartWalkthroughButton key="walkthrough-button" />}
+      {enableSearch && <SearchControl key="search-control" />}
+    </AnimatePresence>
+  )
+}