@likec4/diagram 1.8.1 → 1.12.0

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

@@ -1,13 +1,17 @@
 import {
+  ActionIconGroup,
   Code,
   Group,
   HoverCard,
   HoverCardDropdown,
   HoverCardTarget,
   Notification,
+  Overlay,
   type PopoverProps,
   Stack,
-  Text
+  Text,
+  TooltipGroup,
+  type TooltipProps
 } from '@mantine/core'
 import {
   IconAlertTriangle,
@@ -15,11 +19,15 @@ import {
   IconChevronRight,
   IconFileSymlink,
   IconFocusCentered,
-  IconMenu2
+  IconMenu2,
+  IconRouteOff
 } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { isNullish } from 'remeda'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
+import { mantine } from '../../theme-vars'
 import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import * as css from './styles.css'
@@ -38,59 +46,62 @@ const BackwardForwardButtons = () => {
     hasStepForward
   } = useDiagramState(historySelector)
   return (
-    <Group
-      className={'likec4-navigation-panel'}
-      gap={'xs'}>
-      {showBurgerMenu && (
-        <ActionIcon
-          onClick={e => {
-            e.stopPropagation()
-            store.getState().onBurgerMenuClick?.()
-          }}>
-          <IconMenu2 />
-        </ActionIcon>
-      )}
-      <AnimatePresence>
-        {hasStepBack && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0.05,
-              transform: 'translateX(-10px)'
-            }}
-            key={'back'}>
-            <ActionIcon
-              onClick={e => {
-                e.stopPropagation()
-                store.getState().goBack()
-              }}>
-              <IconChevronLeft />
-            </ActionIcon>
-          </m.div>
-        )}
-        {hasStepForward && (
-          <m.div
-            layout
-            initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateX(10px)'
-            }}
-            key={'forward'}>
-            <ActionIcon
-              onClick={e => {
-                e.stopPropagation()
-                store.getState().goForward()
-              }}>
-              <IconChevronRight />
-            </ActionIcon>
-          </m.div>
+    <LayoutGroup>
+      <Group
+        className={clsx(css.backwardForwardButtons, 'likec4-navigation-webview')}
+        align="flex-start"
+        gap={'xs'}>
+        {showBurgerMenu && (
+          <ActionIcon
+            onClick={e => {
+              e.stopPropagation()
+              store.getState().onBurgerMenuClick?.()
+            }}>
+            <IconMenu2 />
+          </ActionIcon>
         )}
-      </AnimatePresence>
-    </Group>
+        <AnimatePresence>
+          {hasStepBack && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0.05,
+                transform: 'translateX(-10px)'
+              }}
+              key={'back'}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  store.getState().goBack()
+                }}>
+                <IconChevronLeft />
+              </ActionIcon>
+            </m.div>
+          )}
+          {hasStepForward && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0,
+                transform: 'translateX(10px)'
+              }}
+              key={'forward'}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  store.getState().goForward()
+                }}>
+                <IconChevronRight />
+              </ActionIcon>
+            </m.div>
+          )}
+        </AnimatePresence>
+      </Group>
+    </LayoutGroup>
   )
 }
 
@@ -101,10 +112,8 @@ const LayoutDriftNotification = (props: PopoverProps) => (
     closeDelay={100}
     {...props}>
     <HoverCardTarget>
-      <ActionIcon
-        className="action-icon"
-        variant="light"
-        color="orange">
+      <ActionIcon c="orange">
+        <Overlay color={mantine.colors.orange.lightHover} backgroundOpacity={1} />
         <IconAlertTriangle />
       </ActionIcon>
     </HoverCardTarget>
@@ -126,6 +135,22 @@ 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 {
@@ -133,69 +158,55 @@ export const TopLeftPanel = () => {
     showFitDiagram,
     showLayoutDriftWarning,
     showChangeAutoLayout,
-    target,
-    showGoToSource
+    showGoToSource,
+    viewportChanged,
+    showResetControlPoints
   } = useDiagramState(s => {
-    const isNotActive = s.activeDynamicViewStep === null && s.focusedNodeId === null
+    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 && s.viewportChanged,
-      showLayoutDriftWarning: s.readonly !== true && s.view.hasLayoutDrift === true && isNotActive,
-      showChangeAutoLayout: s.readonly !== true && !!s.onChange && isNotActive,
-      showGoToSource: !!s.onOpenSourceView,
-      target: s.getContainer()
+      showFitDiagram: s.fitViewEnabled && s.zoomable && isNotWalkthrough,
+      showLayoutDriftWarning: !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
+      showChangeAutoLayout: s.isEditable() && isNotActive,
+      showGoToSource: !!s.onOpenSourceView && isNotWalkthrough,
+      viewportChanged: s.viewportChanged,
+      showResetControlPoints: s.readonly !== true && s.experimentalEdgeEditing === true
     })
   })
-  const portalProps = target ? { portalProps: { target } } : undefined
+  const portalProps = useMantinePortalProps()
 
   return (
-    <Stack
-      className={clsx(
-        'react-flow__panel',
-        css.panel,
-        'likec4-top-left-panel'
-      )}
-      onClick={e => e.stopPropagation()}
-      gap={'xs'}>
-      {showNavigationButtons && <BackwardForwardButtons />}
-      {showGoToSource && (
-        <Tooltip label="Go to source" {...portalProps}>
-          <ActionIcon
-            className="action-icon"
-            onClick={e => {
-              e.stopPropagation()
-              store.getState().onOpenSourceView?.()
-            }}>
-            <IconFileSymlink stroke={1.5} />
-          </ActionIcon>
-        </Tooltip>
-      )}
-      {showChangeAutoLayout && <ChangeAutoLayoutButton {...portalProps} />}
-      <AnimatePresence>
-        {showLayoutDriftWarning && (
-          <m.div
-            initial={{ opacity: 0.05, transform: 'translateX(-40%)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateX(-40%)'
-            }}
-            key={'layout'}>
-            <LayoutDriftNotification {...portalProps} />
-          </m.div>
+    <TooltipGroup openDelay={500} closeDelay={150}>
+      <Stack
+        className={clsx(
+          'react-flow__panel',
+          css.panel,
+          'likec4-top-left-panel'
         )}
-        {showFitDiagram && (
-          <m.div
-            initial={{ opacity: 0.05, transform: 'translateX(-20%)' }}
-            animate={{ opacity: 1, transform: 'translateX(0)' }}
-            exit={{
-              opacity: 0,
-              transform: 'translateX(-30%)'
-            }}
-            key={'fit-view'}>
-            <Tooltip label="Center diagram" {...portalProps}>
+        align="flex-start"
+        onClick={e => e.stopPropagation()}
+        gap={'xs'}>
+        {showNavigationButtons && <BackwardForwardButtons />}
+        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+          {showGoToSource && (
+            <Tooltip label="Open source" {...portalProps}>
+              <ActionIcon
+                onClick={e => {
+                  e.stopPropagation()
+                  store.getState().onOpenSourceView?.()
+                }}>
+                <IconFileSymlink stroke={1.5} />
+              </ActionIcon>
+            </Tooltip>
+          )}
+          {showChangeAutoLayout && <ChangeAutoLayoutButton {...portalProps} />}
+          {showLayoutDriftWarning && <LayoutDriftNotification {...portalProps} />}
+          {showResetControlPoints && <ResetControlPointsButton {...portalProps} />}
+          {showFitDiagram && (
+            <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
               <ActionIcon
-                className="action-icon"
                 onClick={e => {
                   e.stopPropagation()
                   store.getState().fitDiagram()
@@ -203,10 +214,10 @@ export const TopLeftPanel = () => {
                 <IconFocusCentered />
               </ActionIcon>
             </Tooltip>
-          </m.div>
-        )}
-      </AnimatePresence>
-    </Stack>
+          )}
+        </ActionIconGroup>
+      </Stack>
+    </TooltipGroup>
   )
 }
 TopLeftPanel.displayName = 'TopLeftPanel'

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

@@ -1,19 +1,20 @@
 import { ActionIcon as MantineActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
 
 export const Tooltip = MantineTooltip.withProps({
-  color: 'gray',
+  color: 'dark',
   fz: 'xs',
   position: 'right',
   openDelay: 400,
-  closeDelay: 100,
+  closeDelay: 150,
   label: '',
   children: null,
-  offset: 8,
-  transitionProps: { transition: 'fade-right', duration: 200 }
+  offset: 8
 })
 
 export const ActionIcon = MantineActionIcon.withProps({
-  className: 'action-icon',
-  variant: 'light',
+  classNames: {
+    root: 'action-icon'
+  },
+  variant: 'default',
   color: 'gray'
 })

package/src/ui/top-left/styles.css.ts

@@ -1,28 +1,37 @@
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../mantine.css'
-import { vars } from '../../theme.css'
+import { calc } from '@vanilla-extract/css-utils'
+import { mantine, vars } from '../../theme-vars'
+
+export const backwardForwardButtons = style({
+  gap: calc(mantine.spacing.xs).divide(1.5).toString()
+})
 
 export const panel = style({
   top: fallbackVar(vars.navigationPanel.top, '1rem'),
   left: fallbackVar(vars.navigationPanel.left, '1rem'),
+  gap: calc(mantine.spacing.xs).divide(1.5).toString(),
   margin: 0
 })
 
 globalStyle(`.likec4-top-left-panel .action-icon`, {
   vars: {
-    ['--ai-size']: 'var(--ai-size-lg)'
+    ['--ai-size']: '2rem'
   }
 })
 globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
-  width: '70%',
-  height: '70%'
+  width: '65%',
+  height: '65%'
+})
+
+export const actionIconGroup = style({
+  boxShadow: mantine.shadows.md
 })
 
 export const autolayoutIcon = style({})
 
 globalStyle(`${autolayoutIcon} .tabler-icon`, {
-  width: '75%',
-  height: '75%'
+  width: '65%',
+  height: '65%'
 })
 
 export const autolayoutIndicator = style({
@@ -32,7 +41,7 @@ export const autolayoutIndicator = style({
   selectors: {
     [`:where([data-mantine-color-scheme="dark"]) &`]: {
       background: mantine.colors.dark[5],
-      border: `1px solid ${mantine.colors.dark[4]}`
+      borderColor: mantine.colors.dark[4]
     }
   }
 })

package/src/utils/vector.ts

@@ -0,0 +1,57 @@
+export interface Vector {
+  x: number
+  y: number
+}
+
+export class VectorImpl implements Vector {
+  constructor(public x: number, public y: number) {}
+
+  static create(position: Vector): VectorImpl {
+    return new VectorImpl(position.x, position.y)
+  }
+
+  static add(a: Vector, b: Vector): Vector {
+    return { x: a.x + b.x, y: a.y + b.y }
+  }
+  static sub(a: Vector, b: Vector): Vector {
+    return { x: a.x - b.x, y: a.y - b.y }
+  }
+  static mul(a: Vector, b: number): Vector {
+    return { x: a.x * b, y: a.y * b }
+  }
+  static dot(a: Vector, b: Vector): number {
+    return a.x * b.x + a.y * b.y
+  }
+  static cross(a: Vector, b: Vector): VectorImpl {
+    return new VectorImpl(a.y * b.x - a.x * b.y, a.x * b.y - a.y * b.x)
+  }
+  static setLength(a: Vector, length: number): Vector {
+    return vector(a).setLength(length)
+  }
+
+  add(b: Vector): VectorImpl {
+    return new VectorImpl(this.x + b.x, this.y + b.y)
+  }
+  sub(b: Vector): VectorImpl {
+    return new VectorImpl(this.x - b.x, this.y - b.y)
+  }
+  mul(b: number): VectorImpl {
+    return new VectorImpl(this.x * b, this.y * b)
+  }
+  dot(b: Vector): number {
+    return this.x * b.x + this.y * b.y
+  }
+  cross(b: Vector): VectorImpl {
+    return new VectorImpl(this.y * b.x - this.x * b.y, this.x * b.y - this.y * b.x)
+  }
+  abs(): number {
+    return Math.sqrt(this.x * this.x + this.y * this.y)
+  }
+  setLength(length: number): VectorImpl {
+    return this.mul(length / this.abs())
+  }
+}
+
+export function vector(source: Vector): VectorImpl {
+  return VectorImpl.create(source)
+}

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -36,16 +36,16 @@ function FitViewOnViewportResize({ diagramApi }: {
       fitDiagram(250)
     },
     [dimensions, diagramApi],
-    250,
-    1000
+    250
   )
 
   return null
 }
 
-function selector({ view, viewportChanged, fitViewPadding }: DiagramState) {
+function selector({ view, activeWalkthrough, viewportChanged, fitViewPadding }: DiagramState) {
   return {
     layoutId: view.id + '_' + view.autoLayout + '_' + fitViewPadding,
+    isActiveWalkthrough: !!activeWalkthrough,
     viewportNotMoved: !viewportChanged
   }
 }
@@ -56,6 +56,7 @@ function selector({ view, viewportChanged, fitViewPadding }: DiagramState) {
 export function FitViewOnDiagramChange() {
   const {
     layoutId,
+    isActiveWalkthrough,
     viewportNotMoved
   } = useDiagramState(selector, shallowEqual)
   const diagramApi = useDiagramStoreApi()
@@ -75,7 +76,7 @@ export function FitViewOnDiagramChange() {
     50
   )
 
-  if (viewportNotMoved && !requiresFit) {
+  if (viewportNotMoved && !isActiveWalkthrough && !requiresFit) {
     return <FitViewOnViewportResize diagramApi={diagramApi} />
   }
   return null

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -4,6 +4,7 @@ import type { EdgeChange, NodeChange } from '@xyflow/react'
 import { getBoundsOfRects, getViewportForBounds } from '@xyflow/system'
 import { useUpdateEffect } from '../hooks'
 import { useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
+import { MinZoom } from './const'
 import type { XYFlowEdge, XYFlowNode } from './types'
 import { nodeToRect } from './utils'
 
@@ -20,7 +21,6 @@ export function SelectEdgesOnNodeFocus() {
     if (!container) {
       return
     }
-    const { width, height } = container.getBoundingClientRect()
 
     const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
     const nodeChanges = [] as NodeChange<XYFlowNode>[]
@@ -68,6 +68,8 @@ export function SelectEdgesOnNodeFocus() {
     }
     triggerNodeChanges(nodeChanges)
 
+    const { width, height } = container.getBoundingClientRect()
+
     const maxZoom = Math.max(1, transform[2])
     const viewport = getViewportForBounds(
       {
@@ -78,7 +80,7 @@ export function SelectEdgesOnNodeFocus() {
       },
       width,
       height,
-      0.1,
+      MinZoom,
       maxZoom,
       0
     )
@@ -91,10 +93,10 @@ export function SelectEdgesOnNodeFocus() {
     focusedNodeId !== null
       ? [
         ['Escape', (e) => {
-          e.stopImmediatePropagation()
-          const { xystore, fitDiagram } = diagramStore.getState()
+          e.stopPropagation()
+          const { resetFocusAndLastClicked, fitDiagram } = diagramStore.getState()
+          resetFocusAndLastClicked()
           fitDiagram()
-          xystore.getState().resetSelectedElements()
         }, { preventDefault: true }]
       ]
       : []

package/src/xyflow/XYFlow.tsx

@@ -1,6 +1,6 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useMemo, useState } from 'react'
+import { type CSSProperties, type PropsWithChildren, useEffect, useMemo, useState } from 'react'
 import { useDiagramState } from '../hooks/useDiagramState'
 import { useXYStoreApi } from '../hooks/useXYFlow'
 import type { DiagramState } from '../state/diagramStore'
@@ -88,14 +88,7 @@ export function XYFlow({
     translateY
   } = useDiagramState(selector, shallowEqual)
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
-
-  // useLogger('XYFlow',[
-  //   nodes,
-  //   edges,
-  // ])
-
   const layoutConstraints = useLayoutConstraints()
-
   const handlers = useXYFlowEvents()
 
   /**
@@ -111,10 +104,15 @@ export function XYFlow({
       if (x !== roundedX || y !== roundedY) {
         xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
-      setZoomOnDoubleClick(zoomable && zoom < 1.1)
+      setZoomOnDoubleClick(zoomable && zoom < 0.75)
     }
   })
 
+  useEffect(() => {
+    const zoom = xyflowApi.getState().transform[2]
+    setZoomOnDoubleClick(zoomable && zoom < 0.75)
+  }, [])
+
   return (
     <ReactFlow<XYFlowNode, XYFlowEdge>
       className={className}
@@ -129,6 +127,7 @@ export function XYFlow({
       {...(!zoomable && {
         zoomActivationKeyCode: null
       })}
+      zoomOnDoubleClick={zoomOnDoubleClick}
       maxZoom={zoomable ? MaxZoom : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
@@ -163,8 +162,7 @@ export function XYFlow({
         onNodeDrag: layoutConstraints.onNodeDrag,
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
-      nodeDragThreshold={3}
-      zoomOnDoubleClick={zoomOnDoubleClick}
+      nodeDragThreshold={4}
       elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false}
       onNodesChange={onNodesChange}
@@ -194,5 +192,6 @@ export function XYFlow({
     </ReactFlow>
   )
 }
+XYFlow.displayName = 'XYFlow'
 
 // export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper