@likec4/diagram 1.40.0 → 1.42.0

package/src/navigationpanel/NavigationPanel.tsx

@@ -1,136 +0,0 @@
-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'
-import { WalkthroughPanel } from './walkthrough/WalkthroughPanel'
-
-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 />
-          <WalkthroughPanel />
-        </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: 4,
-      }}
-      opened={opened}
-      position="bottom-start"
-      trapFocus
-      {...portalProps}
-      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-      onDismiss={() => actor.send({ type: 'dropdown.dismiss' })}
-    >
-      <NavigationPanelPopoverTarget actor={actor} />
-      {opened && <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

@@ -1,133 +0,0 @@
-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 { DynamicViewControls } 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 && <DynamicViewControls key="dynamic-view-controls" />}
-      {enableSearch && <SearchControl key="search-control" />}
-    </AnimatePresence>
-  )
-}