@likec4/diagram 1.34.2 → 1.35.0

package/src/likec4model/useLikeC4Model.ts

@@ -1,42 +1,32 @@
 import type { aux, LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
-import { useContext } from 'react'
-import { isString } from 'remeda'
+import { deepEqual } from 'fast-equals'
+import { useContext, useEffect, useState } from 'react'
 import { LikeC4ModelContext } from './LikeC4ModelContext'
 
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(): LikeC4Model<A>
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted'): LikeC4Model.Layouted<A>
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'computed'): LikeC4Model.Computed<A>
-// dprint-ignore
-export function useLikeC4Model<A extends aux.Any = aux.Unknown>(type: 'layouted' | 'computed' | undefined): LikeC4Model<A>
-export function useLikeC4Model(type?: 'layouted' | 'computed') {
+export function useLikeC4Model<A extends aux.Any = aux.UnknownLayouted>(): LikeC4Model<A> {
   const model = useContext(LikeC4ModelContext)
-
   if (!model) {
     throw new Error('LikeC4Model not found. Make sure you have LikeC4ModelProvider.')
   }
-
-  if (isString(type) && model.stage !== type) {
-    throw new Error(`Invalid LikeC4ModelContext, expected "${type}" but got "${model.stage}" in context`)
-  }
-
   return model
 }
 
-export function useLikeC4ViewModel<A extends aux.Any = aux.Unknown>(
-  viewId: aux.LooseViewId<A>,
-): LikeC4ViewModel<aux.toLayouted<A>> | null {
-  const model = useLikeC4Model<A>('layouted')
-  const view = model.findView(viewId)
-  if (!view) {
-    return null
-  }
-  if (!view.isDiagram()) {
-    throw new Error(`View "${viewId}" is not layouted`)
-  }
-  return view as any
+export function useLikeC4ViewModel<A extends aux.Any = aux.UnknownLayouted>(
+  viewId: aux.ViewId<A>,
+): LikeC4ViewModel<A> {
+  const model = useLikeC4Model<A>()
+  // const [view, setView] = useState(() => model.findView(viewId))
+  // useEffect(() => {
+  //   setView(model.findView(viewId))
+  // }, [model, viewId])
+  return model.view(viewId)
 }
 
 export function useLikeC4Specification() {
   const model = useLikeC4Model()
-  return model.$data.specification
+  const [specification, setSpecification] = useState(model.$data.specification)
+  useEffect(() => {
+    setSpecification(current => deepEqual(current, model.$data.specification) ? current : model.$data.specification)
+  }, [model])
+  return specification
 }

package/src/navigationpanel/NavigationPanel.tsx

@@ -0,0 +1,136 @@
+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('trigger.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={{
+          gap: 'sm',
+          margin: 'sm',
+          alignItems: 'flex-start',
+          pointerEvents: 'none',
+          top: 0,
+          left: 0,
+          maxWidth: [
+            'calc(100vw - 2 * {spacing.sm})',
+            'calc(100cqw - 2 * {spacing.sm})',
+          ],
+          width: 'max-content',
+          overflow: 'hidden',
+          smDown: {
+            margin: 0,
+            width: '100%',
+            gap: '2xs',
+            maxWidth: [
+              'calc(100vw)',
+              'calc(100cqw)',
+            ],
+          },
+        }}>
+        <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: 4,
+      }}
+      middlewares={{ flip: false }}
+      opened={opened}
+      shadow="md"
+      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,155 @@
+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 } from './controls'
+import { useNavigationActorRef } 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(),
+    hasLinks: context.viewModel.links.length > 0,
+  }
+}
+
+export const NavigationPanelControls = () => {
+  const actor = useNavigationActorRef()
+  const {
+    enableSearch,
+    enableNavigationButtons,
+    enableDynamicViewWalkthrough,
+    enableReadOnly,
+  } = useEnabledFeatures()
+  const {
+    folders,
+    viewTitle,
+    isDynamicView,
+  } = useSelector(actor, 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({
+          maxWidth: '200px',
+        }),
+      )}
+      visibleFrom="sm"
+      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 }),
+      )}
+      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 />
+      {enableNavigationButtons && <NavigationButtons />}
+      <m.div
+        layout="position"
+        className={hstack({
+          gap: 3,
+          flexShrink: 1,
+          flexGrow: 1,
+          overflow: 'hidden',
+          md: {
+            marginRight: 'md',
+          },
+        })}>
+        {folderBreadcrumbs}
+        {viewBreadcrumb}
+      </m.div>
+      {
+        /* <HStack gap={1}>
+          <PanelActionIcon
+            variant="subtle"
+            size={24}
+            component={m.button}
+            whileHover={{
+              scale: 1.085,
+            }}
+            whileTap={{
+              scale: 1,
+              translateY: 1,
+            }}
+            children={<IconInfoCircleFilled style={{ width: '85%', height: '85%' }} />}
+          />
+          <PanelActionIcon
+            variant="subtle"
+            size={24}
+            component={m.button}
+            whileHover={{
+              scale: 1.085,
+            }}
+            whileTap={{
+              scale: 1,
+              translateY: 1,
+            }}
+            children={<IconLink style={{ width: '85%', height: '85%' }} />}
+          />
+        </HStack> */
+      }
+
+      {enableDynamicViewWalkthrough && isDynamicView && <StartWalkthroughButton />}
+      <m.div
+        layout="position"
+        className={hstack({
+          gap: 1,
+          _empty: {
+            display: 'none',
+          },
+        })}>
+        <OpenSource />
+        <ToggleReadonly />
+      </m.div>
+      {enableSearch && <SearchControl />}
+    </AnimatePresence>
+  )
+}