@likec4/diagram 1.12.2 → 1.13.0

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

@@ -0,0 +1,110 @@
+import { ActionIconGroup, Group, Popover, PopoverDropdown, type PopoverProps, PopoverTarget } from '@mantine/core'
+import {
+  IconLayoutAlignBottom,
+  IconLayoutAlignCenter,
+  IconLayoutAlignLeft,
+  IconLayoutAlignMiddle,
+  IconLayoutAlignRight,
+  IconLayoutAlignTop,
+  IconLayoutCollage,
+  IconRouteOff
+} from '@tabler/icons-react'
+import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { ActionIcon, Tooltip } from './_shared'
+
+const Action = ({
+  label,
+  icon,
+  onClick
+}: {
+  label: string
+  icon: React.ReactNode
+  onClick: React.MouseEventHandler
+}) => (
+  <Tooltip label={label} withinPortal={false} position="top">
+    <ActionIcon onClick={onClick}>
+      {icon}
+    </ActionIcon>
+  </Tooltip>
+)
+
+export const ManualLayoutToolsButton = (props: PopoverProps) => {
+  const store = useDiagramStoreApi()
+
+  return (
+    <Popover
+      position="right-start"
+      clickOutsideEvents={[
+        'pointerdown'
+      ]}
+      radius="xs"
+      shadow="lg"
+      offset={{
+        mainAxis: 10
+      }}
+      {...props}>
+      <PopoverTarget>
+        <Tooltip label="Manual layouting tools" withinPortal={false} position="top-end">
+          <ActionIcon>
+            <IconLayoutCollage />
+          </ActionIcon>
+        </Tooltip>
+      </PopoverTarget>
+      <PopoverDropdown p={0}>
+        <Group gap={'xs'}>
+          <ActionIconGroup pos={'relative'}>
+            <Action
+              label="Align left"
+              icon={<IconLayoutAlignLeft />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Left')
+              }} />
+            <Action
+              label="Align center"
+              icon={<IconLayoutAlignCenter />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Center')
+              }} />
+            <Action
+              label="Align right"
+              icon={<IconLayoutAlignRight />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Right')
+              }} />
+            <Action
+              label="Align top"
+              icon={<IconLayoutAlignTop />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Top')
+              }} />
+            <Action
+              label="Align middle"
+              icon={<IconLayoutAlignMiddle />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Middle')
+              }} />
+            <Action
+              label="Align bottom"
+              icon={<IconLayoutAlignBottom />}
+              onClick={e => {
+                e.stopPropagation()
+                store.getState().align('Bottom')
+              }} />
+          </ActionIconGroup>
+          <Action
+            label="Reset all control points"
+            icon={<IconRouteOff />}
+            onClick={e => {
+              e.stopPropagation()
+              store.getState().resetEdgeControlPoints()
+            }} />
+        </Group>
+      </PopoverDropdown>
+    </Popover>
+  )
+}

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

@@ -10,8 +10,7 @@ import {
   type PopoverProps,
   Stack,
   Text,
-  TooltipGroup,
-  type TooltipProps
+  TooltipGroup
 } from '@mantine/core'
 import {
   IconAlertTriangle,
@@ -19,8 +18,7 @@ import {
   IconChevronRight,
   IconFileSymlink,
   IconFocusCentered,
-  IconMenu2,
-  IconRouteOff
+  IconMenu2
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
@@ -30,12 +28,14 @@ import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
 import { mantine } from '../../theme-vars'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
+import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import * as css from './styles.css'
 
 const historySelector = (s: DiagramState) => ({
   showBurgerMenu: !!s.onBurgerMenuClick,
-  hasStepBack: s.navigationHistoryIndex > 0,
-  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1
+  hasStepBack: s.showNavigationButtons && !!s.onNavigateTo && s.navigationHistoryIndex > 0,
+  hasStepForward: s.showNavigationButtons && !!s.onNavigateTo
+    && s.navigationHistoryIndex < s.navigationHistory.length - 1
 })
 
 const BackwardForwardButtons = () => {
@@ -135,22 +135,6 @@ const LayoutDriftNotification = (props: PopoverProps) => (
   </HoverCard>
 )
 
-const ResetControlPointsButton = (props: Omit<TooltipProps, 'label' | 'children'>) => {
-  const store = useDiagramStoreApi()
-
-  return (
-    <Tooltip label="Reset all control points" {...props}>
-      <ActionIcon
-        onClick={e => {
-          e.stopPropagation()
-          store.getState().resetEdgeControlPoints()
-        }}>
-        <IconRouteOff />
-      </ActionIcon>
-    </Tooltip>
-  )
-}
-
 export const TopLeftPanel = () => {
   const store = useDiagramStoreApi()
   const {
@@ -160,25 +144,25 @@ export const TopLeftPanel = () => {
     showChangeAutoLayout,
     showGoToSource,
     viewportChanged,
-    showResetControlPoints
+    showManualLayoutTools
   } = useDiagramState(s => {
     const isNotWalkthrough = isNullish(s.activeWalkthrough)
     const isNotFocused = isNullish(s.focusedNodeId)
     const isNotActive = isNotWalkthrough && isNotFocused
     return ({
-      showNavigationButtons: !!s.onBurgerMenuClick || s.showNavigationButtons && !!s.onNavigateTo,
-      showFitDiagram: s.fitViewEnabled && s.zoomable && isNotWalkthrough,
-      showLayoutDriftWarning: !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
-      showChangeAutoLayout: s.isEditable() && isNotActive,
-      showGoToSource: !!s.onOpenSourceView && isNotWalkthrough,
+      showNavigationButtons: !!s.onBurgerMenuClick || (s.showNavigationButtons && !!s.onNavigateTo),
+      showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
+      showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
+      showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
+      showGoToSource: s.controls && !!s.onOpenSourceView && isNotWalkthrough,
       viewportChanged: s.viewportChanged,
-      showResetControlPoints: s.readonly !== true && s.experimentalEdgeEditing === true
+      showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
     })
   })
   const portalProps = useMantinePortalProps()
 
   return (
-    <TooltipGroup openDelay={500} closeDelay={150}>
+    <TooltipGroup openDelay={600} closeDelay={150}>
       <Stack
         className={clsx(
           'react-flow__panel',
@@ -203,7 +187,7 @@ export const TopLeftPanel = () => {
           )}
           {showChangeAutoLayout && <ChangeAutoLayoutButton {...portalProps} />}
           {showLayoutDriftWarning && <LayoutDriftNotification {...portalProps} />}
-          {showResetControlPoints && <ResetControlPointsButton {...portalProps} />}
+          {showManualLayoutTools && <ManualLayoutToolsButton {...portalProps} />}
           {showFitDiagram && (
             <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
               <ActionIcon

package/src/ui/top-left/_shared.ts

@@ -4,8 +4,8 @@ export const Tooltip = MantineTooltip.withProps({
   color: 'dark',
   fz: 'xs',
   position: 'right',
-  openDelay: 400,
-  closeDelay: 150,
+  openDelay: 600,
+  closeDelay: 120,
   label: '',
   children: null,
   offset: 8

package/src/xyflow/EdgeMarkers.tsx

@@ -39,6 +39,24 @@ const Arrow = (props: SVGProps<SVGMarkerElement>) => (
   </marker>
 )
 
+const Crow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 12"
+    refX={8}
+    refY={4}
+    markerWidth="8"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 8 0 L 0 4 L 8 8 M 8 4 L 0 4"
+      fill="none"
+      strokeWidth={1}
+    />
+  </marker>
+)
+
 const OArrow = (props: SVGProps<SVGMarkerElement>) => (
   <marker
     viewBox="-1 -1 12 10"
@@ -139,6 +157,7 @@ const ODot = (props: SVGProps<SVGMarkerElement>) => (
 
 export const EdgeMarkers = {
   Arrow,
+  Crow,
   OArrow,
   Open,
   Diamond,

package/src/xyflow/XYFlowEvents.tsx

@@ -50,12 +50,9 @@ export function useXYFlowEvents() {
     }
 
     const lastClickWasRecent = (ms = 2000) => {
-      const prevTimestamp = lastClickTimestamp.current
-      lastClickTimestamp.current = Date.now()
-      if (prevTimestamp === undefined) {
-        return false
-      }
-      return prevTimestamp + ms > Date.now()
+      const prevTimestamp = lastClickTimestamp.current ?? 0
+      const now = lastClickTimestamp.current = Date.now()
+      return prevTimestamp + ms > now
     }
 
     return ({
@@ -68,16 +65,15 @@ export function useXYFlowEvents() {
           resetFocusAndLastClicked
         } = diagramApi.getState()
         resetFocusAndLastClicked()
-        if (!onCanvasDblClick) {
-          event.stopPropagation()
-        }
         if (zoomable && viewportChanged) {
           fitDiagram()
         }
+        if (!onCanvasDblClick) {
+          event.stopPropagation()
+        }
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
-        console.log('onPaneClick')
         if (dbclickLock()) {
           return
         }
@@ -132,7 +128,7 @@ export function useXYFlowEvents() {
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
         // if user clicked on the same node twice in a short time, focus on it
-        const clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent()
+        const clickedRecently = lastClickWasRecent() && lastClickedNodeId === xynode.id
 
         if (clickedRecently && !!onOpenSourceElement) {
           onOpenSourceElement(xynode.data.element.id)
@@ -141,27 +137,27 @@ export function useXYFlowEvents() {
           }
         }
 
-        if (enableFocusMode || nodesSelectable) {
+        if (enableFocusMode) {
           switch (true) {
-            case enableFocusMode && clickedRecently && focusedNodeId === xynode.id: {
+            case clickedRecently && focusedNodeId === xynode.id: {
               focusOnNode(false)
               fitDiagram()
               break
             }
-            case enableFocusMode && shallChangeFocus:
-            case enableFocusMode && clickedRecently && focusedNodeId !== xynode.id: {
+            case (shallChangeFocus || clickedRecently): {
               focusOnNode(xynode.id)
               break
             }
-            case nodesSelectable: {
-              xystore.getState().addSelectedNodes([xynode.id])
-              break
-            }
-          }
-          if (!onNodeClick) {
-            event.stopPropagation()
           }
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedNodes([xynode.id])
+        }
+
+        if (!onNodeClick && (enableFocusMode || nodesSelectable)) {
+          event.stopPropagation()
+          return
         }
+
         onNodeClick?.(
           xynode.data.element,
           event
@@ -176,16 +172,17 @@ export function useXYFlowEvents() {
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
-        lastClickTimestamp.current = Date.now()
+        lastClickWasRecent()
         if (isNonNullish(focusedNodeId) || enableFocusMode) {
           // if we are already focused on the node, cancel
           if (focusedNodeId === xynode.id) {
+            focusOnNode(false)
             fitDiagram()
           } else {
             focusOnNode(xynode.id)
           }
-          event.stopPropagation()
         }
+        event.stopPropagation()
       },
       onEdgeClick: (event, xyedge) => {
         const {

package/src/xyflow/XYFlowInner.tsx

@@ -1,6 +1,5 @@
-import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { memo, type PropsWithChildren } from 'react'
+import { memo } from 'react'
 import { isNonNullish } from 'remeda'
 import { useDiagramState } from '../hooks/useDiagramState'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
@@ -10,26 +9,25 @@ import NotationPanel from '../ui/notation'
 import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
-type XYFlowInnerProps = PropsWithChildren<{
+type XYFlowInnerProps = {
   background: NonNullable<LikeC4DiagramProperties['background']>
-  controls: boolean
   showDiagramTitle: boolean
-}>
+}
 
 export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
-  children,
   background,
-  controls,
   showDiagramTitle
 }: XYFlowInnerProps) {
   const {
     showNotations,
     isDynamicView,
+    showTopLeft,
     isDynamicViewActive,
     enableDynamicViewWalkthrough
   } = useDiagramState(s => ({
     showNotations: s.showNotations,
     isDynamicView: s.isDynamicView,
+    showTopLeft: s.controls || (s.showNavigationButtons && !!s.onNavigateTo) || !!s.onBurgerMenuClick,
     enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
     isDynamicViewActive: isNonNullish(s.activeWalkthrough)
   }))
@@ -40,12 +38,10 @@ export const XYFlowInner = /* @__PURE__ */ memo(function XYFlowInnerR({
   return (
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls showInteractive={false} position={'top-center'} />}
-      <TopLeftPanel />
+      {showTopLeft && <TopLeftPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
       {showNotations && <NotationPanel />}
-      {children}
     </>
   )
 }, shallowEqual)

package/src/xyflow/edges/EdgeLabel.tsx

@@ -22,6 +22,7 @@ import { isTruthy } from 'remeda'
 import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import type { RelationshipData } from '../types'
+import { stopPropagation } from '../utils'
 import * as edgesCss from './edges.css'
 import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
 
@@ -125,9 +126,9 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
       <PopoverDropdown
         component={Stack}
         p={'xs'}
-        onPointerDownCapture={e => e.stopPropagation()}
-        onClick={e => e.stopPropagation()}
-        onDoubleClick={e => e.stopPropagation()}
+        onPointerDownCapture={stopPropagation}
+        onClick={stopPropagation}
+        onDoubleClick={stopPropagation}
       >
         <ScrollAreaAutosize maw={450} mah={350} type="scroll" mx={'auto'} mt={2}>
           <Text component="div" className={edgesCss.edgeNoteText} p={4}>{notes}</Text>
@@ -171,13 +172,13 @@ function NavigateToBtn({ viewId }: NavigateToBtnProps) {
       className={clsx('nodrag nopan', edgesCss.cssNavigateBtn)}
       size={'sm'}
       radius="sm"
-      onPointerDownCapture={e => e.stopPropagation()}
+      onPointerDownCapture={stopPropagation}
       onClick={event => {
         event.stopPropagation()
         diagramApi.getState().onNavigateTo?.(viewId, event)
       }}
       role="button"
-      onDoubleClick={event => event.stopPropagation()}
+      onDoubleClick={stopPropagation}
     >
       <IconZoomScan className={edgesCss.cssNavigateBtnIcon} />
     </ActionIcon>

package/src/xyflow/edges/RelationshipEdge.tsx

@@ -63,8 +63,9 @@ const toMarker = (arrowType?: RelationshipArrowType): EdgeMarkerType | undefined
   }
   switch (arrowType) {
     case 'normal':
-    case 'crow':
       return 'Arrow' as const
+    case 'crow':
+      return 'Crow' as const
     case 'onormal':
       return 'OArrow' as const
     case 'diamond':
@@ -332,7 +333,7 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
   const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {
     const { xyflow } = diagramStore.getState()
 
-    if(controlPoints.length <= 1) {
+    if (controlPoints.length <= 1) {
       return
     }
 
@@ -349,7 +350,7 @@ export const RelationshipEdge = memo<EdgeProps<XYFlowEdge>>(function Relationshi
       domNode.removeEventListener('pointerup', onPointerUp, {
         capture: true
       })
-      e.stopPropagation()      
+      e.stopPropagation()
     }
 
     domNode.addEventListener('pointerup', onPointerUp, {

package/src/xyflow/edges/RelationshipsDropdownMenu.tsx

@@ -122,6 +122,22 @@ export function RelationshipsDropdownMenu({
             {nested.map(renderRelationship)}
           </>
         )}
+        {
+          /* <Box pos={'absolute'} top={5} right={6}>
+          <ActionIcon
+            size={24}
+            variant="light"
+            onClick={e => {
+              e.stopPropagation()
+              diagramApi.getState().openOverlay({
+                edgeDetails: edge.id
+              })
+            }}
+          >
+            <IconArrowsMaximize style={{ width: '70%' }} />
+          </ActionIcon>
+        </Box> */
+        }
       </MenuDropdown>
     </Menu>
   )

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

@@ -45,23 +45,17 @@ globalStyle(`:where(${isSelected}) ${container}[data-edge-hovered='true']`, {
     [xyvars.edge.strokeWidth]: '4'
   }
 })
-// globalStyle(`${container}[data-edge-hovered='true']`, {
-//   vars: {
-//     [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, white 35%)`
-//   },
-// })
 
-globalStyle(`.react-flow__edges > svg`, {
+globalStyle(`.likec4-diagram .react-flow__edges > svg`, {
   mixBlendMode: 'plus-lighter'
 })
-
-// globalStyle(`:where([data-mantine-color-scheme="light"]) .react-flow__edges > svg`, {
-//   mixBlendMode: 'screen'
-// })
+globalStyle(`:where([data-mantine-color-scheme="light"]) .likec4-diagram .react-flow__edges > svg`, {
+  mixBlendMode: 'screen'
+})
 
 export const dimmed = style({})
 
-globalStyle(`.react-flow__edges > svg:has(${dimmed})`, {
+globalStyle(`.likec4-diagram .react-flow__edges > svg:has(${dimmed})`, {
   opacity: 0.6,
   transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
   transitionDelay: '200ms',

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -8,7 +8,17 @@ export const container = style({
   height: '100%',
   position: 'relative',
   padding: 0,
-  margin: 0
+  margin: 0,
+  ':before': {
+    content: ' ',
+    position: 'absolute',
+    top: 0,
+    left: -16,
+    width: 16,
+    height: 'min(100%, 80px)',
+    pointerEvents: 'all',
+    background: 'transparent'
+  }
 })
 
 export const nodeHandlerInCenter = style({
@@ -59,7 +69,7 @@ export const compoundBody = style({
     }
   },
   ':before': {
-    content: '" "',
+    content: ' ',
     position: 'absolute',
     top: 0,
     left: 0,
@@ -185,10 +195,6 @@ globalStyle(`${indicator} rect`, {
   fill: 'none'
 })
 
-// globalStyle(`:where(.react-flow__node:focus-within:not(.selected)) ${indicator} rect`, {
-//   stroke: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
-//   strokeWidth: 8
-// })
 const navigateBtnColor = createVar('navigateBtnColor')
 
 globalStyle(`${container}`, {
@@ -209,26 +215,17 @@ export const navigateBtn = style({
   top: 6,
   cursor: 'pointer',
   color: `var(--_compound-title-color,${navigateBtnColor})`,
-  transformOrigin: '90% 50%',
-  opacity: 0.75,
-  transition: 'all 150ms ease-out',
-  transitionDelay: '0ms',
+  opacity: 'var(--ai-opacity)',
   backgroundColor: 'var(--ai-bg)',
   vars: {
-    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-opacity': '0.75',
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg': `var(--ai-bg-idle)`,
     '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
     '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
   },
   ':hover': {
-    boxShadow: mantine.shadows.lg,
-    transform: 'scale(1.42)',
-    opacity: 1,
-    transitionDelay: '0'
-  },
-  ':active': {
-    transform: 'scale(1.1)',
-    opacity: 1,
-    transitionDelay: '0'
+    boxShadow: mantine.shadows.md
   },
   selectors: {
     [`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) &`]: {
@@ -237,26 +234,6 @@ export const navigateBtn = style({
         '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 60%)`,
         '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`
       }
-    },
-    [`:where(.react-flow__node:not(.dragging) ${container}:hover) &:not(:hover)`]: {
-      boxShadow: mantine.shadows.lg,
-      transform: 'scale(1.223)',
-      opacity: 1,
-      transitionDelay: '250ms',
-      vars: {
-        '--ai-bg': 'var(--ai-bg-hover)'
-      }
     }
   }
 })
-globalStyle(`${navigateBtn} svg.icon`, {
-  width: '75%',
-  height: '75%',
-  strokeWidth: 1.5
-})
-
-// globalStyle(`:where(.react-flow__node:not(.dragging)) ${cssIndicator}`, {
-//   visibility: 'visible',
-//   ":hover": {
-//   }
-// })