@likec4/diagram 1.20.3 → 1.21.1

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -27,12 +27,13 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base'
+import { Link } from '../../../base/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
-import { DiagramContext, useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useLikeC4Model } from '../../../likec4model'
+import { DiagramContext } from '../../state/machine'
 import * as css from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
@@ -129,6 +130,7 @@ export function RelationshipsDropdownMenu({
       closeOnItemClick={false}
       disabled={disabled}
       position="bottom-start"
+      middlewares={{ size: { padding: 8 } }}
       {...portalProps}
     >
       <MenuTarget>

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core'
+import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base } from '../base'
@@ -75,7 +75,7 @@ export namespace Types {
     >
     & {
       depth: number
-      icon: string | null
+      icon?: IconUrl
     }
   >
 

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -13,10 +13,11 @@ const selector = (s: DiagramContext) => ({
   title: s.view.title ?? 'untitled',
   description: s.view.description,
   links: s.view.links,
+  isNotActiveWalkthrough: s.activeWalkthrough === null,
 })
 
 export function DiagramTitlePanel() {
-  const { id, title, description, links } = useDiagramContext(selector)
+  const { id, title, description, links, isNotActiveWalkthrough } = useDiagramContext(selector)
   const [isCollapsed, setCollapsed] = useLocalStorage({
     key: 'diagram-title-webview-collapsed',
     defaultValue: false,
@@ -41,126 +42,128 @@ export function DiagramTitlePanel() {
         </div>
       </ViewportPortal> */
       }
-      <m.div
-        key={id}
-        initial={{ opacity: 0.05, scale: 0.7 }}
-        animate={{ opacity: 1, scale: 1 }}
-        exit={{
-          opacity: 0.05,
-          scale: 0.6,
-        }}
-        className={clsx('react-flow__panel', css.container)}
-        style={{
-          transformOrigin: 'left center',
-        }}
-      >
-        <Card
-          radius="sm"
-          className={css.card}
-          withBorder={!isCollapsed}
-          p={isCollapsed ? 'sm' : 'md'}
-          onDoubleClick={e => e.stopPropagation()}>
-          {isCollapsed && (
-            <CardSection>
-              <Button
-                fullWidth
-                justify="stretch"
-                size="md"
-                radius={'0'}
-                variant={'subtle'}
-                color="gray"
-                onClick={toggle}
-                fw={500}
-                fz={'sm'}
-                tabIndex={-1}
-              >
-                {title}
-              </Button>
-            </CardSection>
-          )}
-          {!isCollapsed && (
-            <>
-              <CardSection mb={'xs'}>
+      {isNotActiveWalkthrough && (
+        <m.div
+          key={id}
+          initial={{ opacity: 0.05, scale: 0.7 }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{
+            opacity: 0.05,
+            scale: 0.6,
+          }}
+          className={clsx('react-flow__panel', css.container)}
+          style={{
+            transformOrigin: 'left center',
+          }}
+        >
+          <Card
+            radius="sm"
+            className={css.card}
+            withBorder={!isCollapsed}
+            p={isCollapsed ? 'sm' : 'md'}
+            onDoubleClick={e => e.stopPropagation()}>
+            {isCollapsed && (
+              <CardSection>
                 <Button
                   fullWidth
-                  size="xs"
-                  h={'sm'}
-                  py={2}
+                  justify="stretch"
+                  size="md"
                   radius={'0'}
                   variant={'subtle'}
                   color="gray"
                   onClick={toggle}
+                  fw={500}
+                  fz={'sm'}
                   tabIndex={-1}
                 >
-                  <IconMenu size={11} opacity={0.7} />
+                  {title}
                 </Button>
               </CardSection>
+            )}
+            {!isCollapsed && (
+              <>
+                <CardSection mb={'xs'}>
+                  <Button
+                    fullWidth
+                    size="xs"
+                    h={'sm'}
+                    py={2}
+                    radius={'0'}
+                    variant={'subtle'}
+                    color="gray"
+                    onClick={toggle}
+                    tabIndex={-1}
+                  >
+                    <IconMenu size={11} opacity={0.7} />
+                  </Button>
+                </CardSection>
 
-              <Group justify="stretch" wrap="nowrap" mb={'sm'}>
-                <Text
-                  component={'div'}
-                  flex={'1'}
-                  size={'md'}
-                  fw={500}
-                  lh={1.1}
-                  className={css.title}
-                >
-                  {title}
-                </Text>
-                <Text
-                  hidden={isCollapsed}
-                  component={'div'}
-                  flex={'0 0 auto'}
-                  inline
-                  size="xs"
-                  fz={9}
-                  fw={500}
-                  c={'dimmed'}
-                  style={{
-                    userSelect: 'all',
-                  }}>
-                  <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                  {id}
-                </Text>
-              </Group>
-              {description && (
-                <Spoiler
-                  maxHeight={42}
-                  showLabel={
-                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
-                  }
-                  hideLabel={
-                    <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
-                  }>
+                <Group justify="stretch" wrap="nowrap" mb={'sm'}>
                   <Text
                     component={'div'}
-                    size="sm"
-                    className={css.description}>
-                    {description || 'no description'}
+                    flex={'1'}
+                    size={'md'}
+                    fw={500}
+                    lh={1.1}
+                    className={css.title}
+                  >
+                    {title}
                   </Text>
-                </Spoiler>
-              )}
-              {!description && (
-                <Text
-                  component={'div'}
-                  size="xs"
-                  c={'dimmed'}>
-                  no description
-                </Text>
-              )}
-              {links && (
-                <Stack
-                  mt={'xs'}
-                  gap={4}
-                  justify="stretch"
-                  align="stretch">
-                  {links.map((link) => <Link value={link} key={link.url} />)}
-                </Stack>
-              )}
-            </>
-          )}
-        </Card>
-      </m.div>
+                  <Text
+                    hidden={isCollapsed}
+                    component={'div'}
+                    flex={'0 0 auto'}
+                    inline
+                    size="xs"
+                    fz={9}
+                    fw={500}
+                    c={'dimmed'}
+                    style={{
+                      userSelect: 'all',
+                    }}>
+                    <span style={{ userSelect: 'none' }}>id:{' '}</span>
+                    {id}
+                  </Text>
+                </Group>
+                {description && (
+                  <Spoiler
+                    maxHeight={42}
+                    showLabel={
+                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>show more</Button>
+                    }
+                    hideLabel={
+                      <Button color="gray" variant="light" fz={'10'} size="compact-xs" tabIndex={-1}>hide</Button>
+                    }>
+                    <Text
+                      component={'div'}
+                      size="sm"
+                      className={css.description}>
+                      {description || 'no description'}
+                    </Text>
+                  </Spoiler>
+                )}
+                {!description && (
+                  <Text
+                    component={'div'}
+                    size="xs"
+                    c={'dimmed'}>
+                    no description
+                  </Text>
+                )}
+                {links && (
+                  <Stack
+                    mt={'xs'}
+                    gap={4}
+                    justify="stretch"
+                    align="stretch">
+                    {links.map((link) => <Link value={link} key={link.url} />)}
+                  </Stack>
+                )}
+              </>
+            )}
+          </Card>
+        </m.div>
+      )}
     </AnimatePresence>
   )
 }

package/src/likec4diagram/ui/index.ts

@@ -1,2 +1,4 @@
 export { Controls } from './controls/Controls'
 export { DiagramTitlePanel } from './diagram-title/DiagramTitlePanel'
+export { NotationPanel } from './notation/NotationPanel'
+export { DynamicViewWalkthrough } from './walkthrough/DynamicViewWalkthrough'

package/src/likec4diagram/ui/notation/NotationPanel.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore
 import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
@@ -23,12 +22,12 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { memo, useState } from 'react'
 import { ceil, isNonNullish } from 'remeda'
-// import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import { ElementShape } from '../../../base/primitives'
-import { type DiagramContext, useMantinePortalProps } from '../../../hooks'
+import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useXYStore } from '../../../hooks/useXYFlow'
+import { DiagramContext } from '../../../likec4diagram/state/machine'
 import { vars } from '../../../theme-vars'
 import * as css from './NotationPanel.css'
 

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -120,7 +120,7 @@ function viewToNodesEdge(opts: {
       shape: node.shape,
       style: node.style,
       depth: node.depth ?? 0,
-      icon: node.icon ?? null,
+      icon: node.icon ?? 'none',
       position: node.position,
     } satisfies Types.CompoundNodeData