@likec4/diagram 1.7.3 → 1.8.0

package/src/ui/notation/NotationPanel.tsx

@@ -0,0 +1,253 @@
+import { type ElementKind, type ElementNotation as ElementNotationData } from '@likec4/core'
+import {
+  ActionIcon,
+  Badge,
+  Box,
+  Card,
+  Group,
+  Paper,
+  ScrollAreaAutosize,
+  Stack,
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  Text,
+  ThemeIcon,
+  Tooltip
+} from '@mantine/core'
+import { useLocalStorage } from '@mantine/hooks'
+import { IconAlertTriangle, IconArrowDownRight, IconHelpCircle } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { AnimatePresence, m } from 'framer-motion'
+import { useState } from 'react'
+import { ceil, isNonNullish, isNullish } from 'remeda'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { vars } from '../../theme.css'
+import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
+import * as css from './NotationPanel.css'
+
+const ElementNotation = ({ value }: { value: ElementNotationData }) => {
+  const {
+    title,
+    color = 'primary',
+    shape = 'rectangle'
+  } = value
+  const [onlyKind, setOnlyKind] = useState<ElementKind | null>(null)
+  const diagramStore = useDiagramStoreApi()
+  const w = 300
+  const h = 200
+  return (
+    <Card
+      shadow="none"
+      px={'xs'}
+      py={'sm'}
+      className={css.elementNotation}
+      mod={{
+        'data-likec4-color': color
+      }}
+      onMouseEnter={() => {
+        setOnlyKind(null)
+        diagramStore.getState().highlightByElementNotation(value)
+      }}
+      onMouseLeave={() => {
+        setOnlyKind(null)
+        diagramStore.setState({ dimmed: new Set() })
+      }}
+    >
+      <Group
+        gap={'sm'}
+        align="stretch"
+        wrap="nowrap"
+      >
+        <Box
+          flex={'0 0 70px'}
+          style={{
+            width: 70,
+            height: ceil(70 * (h / w), 0)
+          }}>
+          <svg
+            className={clsx(
+              css.shapeSvg
+            )}
+            viewBox={`0 0 ${w} ${h}`}
+          >
+            <ElementShapeSvg
+              shape={shape}
+              w={w}
+              h={h}
+            />
+          </svg>
+        </Box>
+        <Stack gap={4} flex={1}>
+          <Group gap={4} flex={'0 0 auto'}>
+            {value.kinds.map((kind) => (
+              <Badge
+                key={kind}
+                className={css.shapeBadge}
+                onMouseEnter={() => {
+                  setOnlyKind(kind)
+                  diagramStore.getState().highlightByElementNotation(value, kind)
+                }}
+                onMouseLeave={() => {
+                  setOnlyKind(null)
+                  diagramStore.getState().highlightByElementNotation(value)
+                }}
+                opacity={isNonNullish(onlyKind) && onlyKind !== kind ? 0.25 : 1}
+                color={isNonNullish(onlyKind) && onlyKind !== kind ? 'gray' : vars.element.fill}
+              >
+                {kind}
+              </Badge>
+            ))}
+          </Group>
+          <Text
+            component="div"
+            fz={'sm'}
+            fw={500}
+            lh="1.25"
+            style={{
+              textWrap: 'pretty'
+            }}>
+            {title}
+          </Text>
+        </Stack>
+      </Group>
+    </Card>
+  )
+}
+
+const selector = (s: DiagramState) => ({
+  id: s.view.id,
+  notations: s.view.notation?.elements ?? [],
+  height: s.xystore.getState().height,
+  isVisible: isNullish(s.focusedNodeId ?? s.activeDynamicViewStep),
+  target: s.getContainer()
+})
+
+export function NotationPanel() {
+  const {
+    id,
+    notations,
+    isVisible,
+    height,
+    target
+  } = useDiagramState(selector)
+  const [isCollapsed, setCollapsed] = useLocalStorage({
+    key: 'notation-panel-collapsed',
+    defaultValue: true
+  })
+  const hasNotations = notations.length > 0
+  const portalProps = target ? { portalProps: { target } } : { withinPortal: false }
+
+  return (
+    <AnimatePresence>
+      {!hasNotations && (
+        <m.div
+          key={'empty'}
+          initial={{ opacity: 0.75, translateX: '50%' }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{
+            translateX: '100%',
+            opacity: 0.6
+          }}
+          className={clsx('react-flow__panel', css.container)}>
+          <Tooltip label="Diagram has no notations" color="orange" {...portalProps}>
+            <ThemeIcon
+              size={'xl'}
+              variant="light"
+              color="orange"
+              radius={'md'}
+            >
+              <IconAlertTriangle />
+            </ThemeIcon>
+          </Tooltip>
+        </m.div>
+      )}
+      {hasNotations && isVisible && isCollapsed && (
+        <m.div
+          key={'collapsed'}
+          initial={{ opacity: 0.75, translateX: '50%' }}
+          animate={{ opacity: 1, translateX: 0 }}
+          exit={{
+            translateX: '100%',
+            opacity: 0.6
+          }}
+          className={clsx('react-flow__panel', css.container)}
+        >
+          <Tooltip label="Show notation" color="dark" fz={'xs'} {...portalProps}>
+            <ActionIcon
+              size={'xl'}
+              variant="light"
+              color="gray"
+              radius={'md'}
+              onClick={() => setCollapsed(false)}
+            >
+              <IconHelpCircle stroke={1.5} />
+            </ActionIcon>
+          </Tooltip>
+        </m.div>
+      )}
+
+      {hasNotations && isVisible && !isCollapsed && (
+        <m.div
+          key={id}
+          initial={{
+            opacity: 0.75,
+            // translateX: '50%',
+            scale: 0.2
+          }}
+          animate={{ opacity: 1, scale: 1 }}
+          exit={{
+            opacity: 0,
+            scale: 0.25
+          }}
+          className={clsx('react-flow__panel', css.container)}
+          style={{
+            transformOrigin: 'bottom right'
+          }}
+        >
+          <Paper
+            radius="sm"
+            withBorder
+            shadow="lg"
+            className={css.card}>
+            {/* <Text fz={'sm'} fw={500} c={'dimmed'} ml={'md'}>diagram notation</Text> */}
+            <Tabs defaultValue="first" radius={'xs'}>
+              <TabsList>
+                <ActionIcon
+                  size={'md'}
+                  variant="subtle"
+                  color="gray"
+                  ml={2}
+                  style={{
+                    alignSelf: 'center'
+                  }}
+                  onClick={() => setCollapsed(true)}
+                >
+                  <IconArrowDownRight stroke={2} />
+                </ActionIcon>
+                <TabsTab value="first" fz={'xs'}>Elements</TabsTab>
+                <TabsTab value="second" fz={'xs'} disabled>
+                  Relationships
+                </TabsTab>
+              </TabsList>
+
+              <TabsPanel value="first" className={css.tabPanel} hidden={isCollapsed}>
+                <ScrollAreaAutosize
+                  viewportProps={{
+                    style: {
+                      maxHeight: height > 50 ? `min(40vh, ${height - 20}px)` : '40vh'
+                    }
+                  }}>
+                  <Stack gap={0}>
+                    {notations.map((n, i) => <ElementNotation key={i} value={n} />)}
+                  </Stack>
+                </ScrollAreaAutosize>
+              </TabsPanel>
+            </Tabs>
+          </Paper>
+        </m.div>
+      )}
+    </AnimatePresence>
+  )
+}

package/src/ui/notation/index.ts

@@ -0,0 +1 @@
+export { NotationPanel as default } from './NotationPanel'

package/src/ui/top-left/TopLeftPanel.tsx

@@ -133,21 +133,20 @@ export const TopLeftPanel = () => {
     showFitDiagram,
     showLayoutDriftWarning,
     showChangeAutoLayout,
-    portalProps: _portalProps,
+    target,
     showGoToSource
   } = useDiagramState(s => {
     const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null
-    const target = s.getContainer()
     return ({
       showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
       showFitDiagram: s.fitViewEnabled && s.zoomable && s.viewportChanged,
       showLayoutDriftWarning: s.readonly !== true && s.view.hasLayoutDrift === true && isNotActive,
       showChangeAutoLayout: s.readonly !== true && !!s.onChange && isNotActive,
       showGoToSource: !!s.onOpenSourceView,
-      portalProps: target ? { target } : undefined
+      target: s.getContainer()
     })
   })
-  const portalProps = _portalProps ? { portalProps: _portalProps } : undefined
+  const portalProps = target ? { portalProps: { target } } : undefined
 
   return (
     <Stack

package/src/xyflow/XYFlow.tsx

@@ -1,10 +1,10 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useMemo } from 'react'
+import { type CSSProperties, type PropsWithChildren, useMemo, useState } from 'react'
 import { useDiagramState } from '../hooks/useDiagramState'
 import { useXYStoreApi } from '../hooks/useXYFlow'
 import type { DiagramState } from '../state/diagramStore'
-import { MinZoom } from './const'
+import { MaxZoom, MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
@@ -87,6 +87,7 @@ export function XYFlow({
     translateX,
     translateY
   } = useDiagramState(selector, shallowEqual)
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
 
   // useLogger('XYFlow',[
   //   nodes,
@@ -110,6 +111,7 @@ export function XYFlow({
       if (x !== roundedX || y !== roundedY) {
         xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
+      setZoomOnDoubleClick(zoomable && zoom < 1.1)
     }
   })
 
@@ -127,7 +129,7 @@ export function XYFlow({
       {...(!zoomable && {
         zoomActivationKeyCode: null
       })}
-      maxZoom={zoomable ? 1.9 : 1}
+      maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
       fitViewOptions={useMemo(() => ({
@@ -162,7 +164,7 @@ export function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
       nodeDragThreshold={3}
-      zoomOnDoubleClick={zoomable}
+      zoomOnDoubleClick={zoomOnDoubleClick}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}

package/src/xyflow/XYFlowBackground.tsx

@@ -28,7 +28,7 @@ function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
 
 export function XYFlowBackground({ background }: XYBackgroundProps) {
   if (typeof background === 'string') {
-    return <Background variant={literalToEnum(background)} />
+    return <Background variant={literalToEnum(background)} size={2} gap={20} />
   }
   const { variant, ...rest } = background
   return <Background variant={literalToEnum(variant)} {...rest} />

package/src/xyflow/XYFlowEvents.tsx

@@ -58,7 +58,10 @@ export function useXYFlowEvents() {
       onDoubleClick: (event) => {
         const {
           onCanvasDblClick,
+          zoomable,
           xystore,
+          viewportChanged,
+          fitDiagram,
           resetLastClicked
         } = diagramApi.getState()
         resetLastClicked()
@@ -66,6 +69,9 @@ export function useXYFlowEvents() {
         if (!onCanvasDblClick) {
           event.stopPropagation()
         }
+        if (zoomable && viewportChanged) {
+          fitDiagram()
+        }
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {

package/src/xyflow/XYFlowInner.tsx

@@ -6,6 +6,7 @@ import { useDiagramState } from '../hooks/useDiagramState'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
+import NotationPanel from '../ui/notation'
 import OptionsPanel from '../ui/OptionsPanel'
 import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
@@ -23,11 +24,13 @@ export const XYFlowInner = memo(function XYFlowInnerR({
   showDiagramTitle
 }: XYFlowInnerProps) {
   const {
+    showNotations,
     isDynamicView,
     isDynamicViewActive,
     readonly,
     enableDynamicViewWalkthrough
   } = useDiagramState(s => ({
+    showNotations: s.showNotations,
     isDynamicView: s.isDynamicView,
     readonly: s.readonly,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
@@ -37,7 +40,6 @@ export const XYFlowInner = memo(function XYFlowInnerR({
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
 
   const isDiagramTitleVisible = showDiagramTitle === true && !isDynamicViewActive
-
   return (
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
@@ -46,6 +48,7 @@ export const XYFlowInner = memo(function XYFlowInnerR({
       {readonly !== true && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {showNotations && <NotationPanel />}
       {children}
     </>
   )

package/src/xyflow/const.ts

@@ -5,3 +5,4 @@ export const ZIndexes = {
 } as const
 
 export const MinZoom = 0.1
+export const MaxZoom = 2

package/src/xyflow/edges/edges.css.ts

@@ -221,7 +221,7 @@ export const edgeLabel = style({
 })
 
 export const edgeLabelText = style({
-  textAlign: 'left',
+  textAlign: 'center',
   whiteSpaceCollapse: 'preserve-breaks',
   fontSize: rem(14),
   lineHeight: 1.185

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -69,13 +69,13 @@ export function ElementLink({
           p={'xs'}>
           <Stack gap={'xs'}>
             {element.links.map((link) => (
-              <Group key={link} wrap="nowrap" gap={'sm'}>
+              <Group key={link.url} wrap="nowrap" gap={'sm'}>
                 <Box flex={'1'} style={{ overflow: 'clip', maxWidth: clamp(element.width, { min: 200, max: 400 }) }}>
-                  <Anchor href={link} target="_blank" fz="13" truncate="end">
-                    {link}
+                  <Anchor href={link.url} target="_blank" fz="13" truncate="end">
+                    {link.title || link.url}
                   </Anchor>
                 </Box>
-                <CopyButton value={link}>
+                <CopyButton value={link.url}>
                   {({ copied, copy }) => (
                     <Button
                       size="compact-xs"

package/src/xyflow/nodes/element/element.css.ts

@@ -41,8 +41,8 @@ export const dimmed = style({})
 
 globalStyle(`.react-flow__node-element:has(${dimmed})`, {
   opacity: 0.25,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
+  transition: 'opacity 400ms ease-in-out, filter 500ms ease-in-out',
+  transitionDelay: '50ms',
   filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
   willChange: 'opacity, filter'
 })

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -19,6 +19,7 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
         event.stopPropagation()
         diagramApi.getState().triggerOnNavigateTo(xynodeId, event)
       }}
+      role="button"
       onDoubleClick={event => event.stopPropagation()}
     >
       <IconZoomScan