@likec4/diagram 1.7.1 → 1.7.3

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

@@ -0,0 +1,213 @@
+import {
+  Code,
+  Group,
+  HoverCard,
+  HoverCardDropdown,
+  HoverCardTarget,
+  Notification,
+  type PopoverProps,
+  Stack,
+  Text
+} from '@mantine/core'
+import {
+  IconAlertTriangle,
+  IconChevronLeft,
+  IconChevronRight,
+  IconFileSymlink,
+  IconFocusCentered,
+  IconMenu2
+} from '@tabler/icons-react'
+import clsx from 'clsx'
+import { AnimatePresence, m } from 'framer-motion'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { ActionIcon, Tooltip } from './_shared'
+import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
+import * as css from './styles.css'
+
+const historySelector = (s: DiagramState) => ({
+  showBurgerMenu: !!s.onBurgerMenuClick,
+  hasStepBack: s.navigationHistoryIndex > 0,
+  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1
+})
+
+const BackwardForwardButtons = () => {
+  const store = useDiagramStoreApi()
+  const {
+    showBurgerMenu,
+    hasStepBack,
+    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>
+        )}
+      </AnimatePresence>
+    </Group>
+  )
+}
+
+const LayoutDriftNotification = (props: PopoverProps) => (
+  <HoverCard
+    position="right-start"
+    openDelay={200}
+    closeDelay={100}
+    {...props}>
+    <HoverCardTarget>
+      <ActionIcon
+        className="action-icon"
+        variant="light"
+        color="orange">
+        <IconAlertTriangle />
+      </ActionIcon>
+    </HoverCardTarget>
+    <HoverCardDropdown p={'0'}>
+      <Notification
+        color="orange"
+        withBorder={false}
+        withCloseButton={false}
+        title="Manual layout issues">
+        <Text mt={2} size="sm" lh="xs">
+          View contains new elements or their sizes have changed,<br />
+          last manual layout can not be applied.
+        </Text>
+        <Text mt={'xs'} size="sm" lh="xs">
+          Update view predicates or remove <Code>@likec4-generated</Code>
+        </Text>
+      </Notification>
+    </HoverCardDropdown>
+  </HoverCard>
+)
+
+export const TopLeftPanel = () => {
+  const store = useDiagramStoreApi()
+  const {
+    showNavigationButtons,
+    showFitDiagram,
+    showLayoutDriftWarning,
+    showChangeAutoLayout,
+    portalProps: _portalProps,
+    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
+    })
+  })
+  const portalProps = _portalProps ? { portalProps: _portalProps } : undefined
+
+  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>
+        )}
+        {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}>
+              <ActionIcon
+                className="action-icon"
+                onClick={e => {
+                  e.stopPropagation()
+                  store.getState().fitDiagram()
+                }}>
+                <IconFocusCentered />
+              </ActionIcon>
+            </Tooltip>
+          </m.div>
+        )}
+      </AnimatePresence>
+    </Stack>
+  )
+}
+TopLeftPanel.displayName = 'TopLeftPanel'

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

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

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

@@ -0,0 +1,38 @@
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../mantine.css'
+import { vars } from '../../theme.css'
+
+export const panel = style({
+  top: fallbackVar(vars.navigationPanel.top, '1rem'),
+  left: fallbackVar(vars.navigationPanel.left, '1rem'),
+  margin: 0
+})
+
+globalStyle(`.likec4-top-left-panel .action-icon`, {
+  vars: {
+    ['--ai-size']: 'var(--ai-size-lg)'
+  }
+})
+globalStyle(`.likec4-top-left-panel .action-icon .tabler-icon`, {
+  width: '70%',
+  height: '70%'
+})
+
+export const autolayoutIcon = style({})
+
+globalStyle(`${autolayoutIcon} .tabler-icon`, {
+  width: '75%',
+  height: '75%'
+})
+
+export const autolayoutIndicator = style({
+  background: mantine.colors.gray[2],
+  borderRadius: mantine.radius.sm,
+  border: `1px solid ${mantine.colors.gray[3]}`,
+  selectors: {
+    [`:where([data-mantine-color-scheme="dark"]) &`]: {
+      background: mantine.colors.dark[5],
+      border: `1px solid ${mantine.colors.dark[4]}`
+    }
+  }
+})

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,8 +1,8 @@
 import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { useRef, useState } from 'react'
-import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
-import { useXYStore } from './hooks/useXYFlow'
+import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
+import { useXYStore } from '../hooks/useXYFlow'
 
 function selectXYFlowSize(state: { width: number; height: number }): string {
   return `${Math.round(state.width)}:${Math.round(state.height)}`

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,75 +1,103 @@
 import { nonNullable } from '@likec4/core'
+import { useHotkeys } from '@mantine/hooks'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { getBoundsOfRects, getNodesBounds, getViewportForBounds, nodeToRect } from '@xyflow/system'
-import { useEffect } from 'react'
-import { useDiagramStoreApi } from '../state/useDiagramStore'
-import { MinZoom } from './const'
+import { getBoundsOfRects, getViewportForBounds } from '@xyflow/system'
+import { useUpdateEffect } from '../hooks'
+import { useDiagramState, useDiagramStoreApi } from '../hooks/useDiagramState'
 import type { XYFlowEdge, XYFlowNode } from './types'
+import { nodeToRect } from './utils'
 
 export function SelectEdgesOnNodeFocus() {
   const diagramStore = useDiagramStoreApi()
+  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
 
-  useEffect(
-    () =>
-      diagramStore.subscribe(s => s.focusedNodeId, focusedNodeId => {
-        if (!focusedNodeId) {
-          return
-        }
+  useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      diagramStore.getState().xystore.getState().resetSelectedElements()
+      return
+    }
+    const container = diagramStore.getState().getContainer()
+    if (!container) {
+      return
+    }
+    const { width, height } = container.getBoundingClientRect()
 
-        const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
-        const nodeChanges = [] as NodeChange<XYFlowNode>[]
-        const {
-          edgeLookup,
-          nodeLookup,
-          width,
-          height,
-          panZoom,
-          transform,
-          triggerNodeChanges,
-          triggerEdgeChanges
-        } = diagramStore.getState().xystore.getState()
-        let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)))
+    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const {
+      edgeLookup,
+      nodeLookup,
+      panZoom,
+      transform,
+      triggerNodeChanges,
+      triggerEdgeChanges
+    } = diagramStore.getState().xystore.getState()
 
-        for (const [, edge] of edgeLookup) {
-          if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-            const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source
-            const nd = nodeToRect(nonNullable(nodeLookup.get(anotherNodeId)))
-            focusBounds = getBoundsOfRects(focusBounds, nd)
-          }
-          if (edge.selected) {
-            edgeChanges.push({
-              id: edge.id,
-              type: 'select',
-              selected: false
-            })
-          }
-        }
-        for (const [, node] of nodeLookup) {
-          if (node.selected && node.id !== focusedNodeId) {
-            nodeChanges.push({
-              id: node.id,
-              type: 'select',
-              selected: false
-            })
-          }
-        }
+    let focusBounds = nodeToRect(nonNullable(nodeLookup.get(focusedNodeId)))
+
+    for (const [, edge] of edgeLookup) {
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source
+        const nd = nonNullable(nodeLookup.get(anotherNodeId))
+        focusBounds = getBoundsOfRects(focusBounds, nodeToRect(nd))
+      }
+      if (edge.selected) {
+        edgeChanges.push({
+          id: edge.id,
+          type: 'select',
+          selected: false
+        })
+      }
+    }
+    for (const [, node] of nodeLookup) {
+      if (node.selected && node.id !== focusedNodeId) {
         nodeChanges.push({
-          id: focusedNodeId,
+          id: node.id,
           type: 'select',
-          selected: true
+          selected: false
         })
-        if (edgeChanges.length > 0) {
-          triggerEdgeChanges(edgeChanges)
-        }
-        triggerNodeChanges(nodeChanges)
+      }
+    }
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: 'select',
+      selected: true
+    })
+    if (edgeChanges.length > 0) {
+      triggerEdgeChanges(edgeChanges)
+    }
+    triggerNodeChanges(nodeChanges)
 
-        const maxZoom = Math.max(1, transform[2])
-        const viewport = getViewportForBounds(focusBounds, width, height, MinZoom, maxZoom, 0.2)
-        panZoom?.setViewport(viewport, {
-          duration: 350
-        })
-      }),
-    [diagramStore]
+    const maxZoom = Math.max(1, transform[2])
+    const viewport = getViewportForBounds(
+      {
+        x: focusBounds.x - 16,
+        y: focusBounds.y - 16,
+        width: focusBounds.width + 32,
+        height: focusBounds.height + 32
+      },
+      width,
+      height,
+      0.1,
+      maxZoom,
+      0
+    )
+    panZoom?.setViewport(viewport, {
+      duration: 350
+    })
+  }, [focusedNodeId])
+
+  useHotkeys(
+    focusedNodeId !== null
+      ? [
+        ['Escape', (e) => {
+          e.stopImmediatePropagation()
+          const { xystore, fitDiagram } = diagramStore.getState()
+          fitDiagram()
+          xystore.getState().resetSelectedElements()
+        }, { preventDefault: true }]
+      ]
+      : []
   )
 
   return null

package/src/xyflow/XYFlow.tsx

@@ -1,17 +1,16 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { deepEqual as eq, shallowEqual } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useCallback, useMemo } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { type CSSProperties, type PropsWithChildren, useMemo } from 'react'
+import { useDiagramState } from '../hooks/useDiagramState'
+import { useXYStoreApi } from '../hooks/useXYFlow'
 import type { DiagramState } from '../state/diagramStore'
-import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
-import { useLayoutConstraints } from './hooks/useLayoutConstraints'
-import { useXYStoreApi } from './hooks/useXYFlow'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
 import { XYFlowEdge, XYFlowNode } from './types'
+import { useLayoutConstraints } from './useLayoutConstraints'
 import { useXYFlowEvents } from './XYFlowEvents'
-// import { useLogger } from '@mantine/hooks'
 
 const nodeTypes = {
   element: ElementNode,
@@ -163,9 +162,9 @@ export function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
       nodeDragThreshold={3}
-      zoomOnDoubleClick={false}
+      zoomOnDoubleClick={zoomable}
       elevateNodesOnSelect={false} // or edges are not visible after select\
-      selectNodesOnDrag={false} // or weird camera movement
+      selectNodesOnDrag={false}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onDoubleClick={handlers.onDoubleClick}

package/src/xyflow/XYFlowEvents.tsx

@@ -3,7 +3,7 @@ import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
 import { isNonNullish, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
-import { useDiagramStoreApi } from '../state/useDiagramStore'
+import { useDiagramStoreApi } from '../hooks/useDiagramState'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export type XYFlowEventHandlers = Simplify<
@@ -57,18 +57,15 @@ export function useXYFlowEvents() {
     return ({
       onDoubleClick: (event) => {
         const {
-          fitViewEnabled,
           onCanvasDblClick,
-          resetLastClicked,
-          fitDiagram
+          xystore,
+          resetLastClicked
         } = diagramApi.getState()
-        if (fitViewEnabled) {
-          fitDiagram()
-          if (!onCanvasDblClick) {
-            event.stopPropagation()
-          }
-        }
         resetLastClicked()
+        xystore.getState().resetSelectedElements()
+        if (!onCanvasDblClick) {
+          event.stopPropagation()
+        }
         onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
@@ -80,6 +77,7 @@ export function useXYFlowEvents() {
           activeDynamicViewStep,
           fitDiagram,
           onCanvasClick,
+          xystore,
           resetLastClicked
         } = diagramApi.getState()
         if ((focusedNodeId ?? activeDynamicViewStep) !== null) {
@@ -89,6 +87,7 @@ export function useXYFlowEvents() {
           }
         }
         resetLastClicked()
+        xystore.getState().resetSelectedElements()
         onCanvasClick?.(event)
       },
       onNodeContextMenu: (event, xynode) => {
@@ -117,27 +116,42 @@ export function useXYFlowEvents() {
           fitDiagram,
           focusOnNode,
           onNodeClick,
+          xystore,
           enableFocusMode,
           lastClickedNodeId,
-          setLastClickedNode
+          nodesSelectable,
+          setLastClickedNode,
+          onOpenSourceElement
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
         // 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()
-        if (enableFocusMode) {
-          let stopPropagation = false
+
+        if (clickedRecently && !!onOpenSourceElement) {
+          onOpenSourceElement(xynode.data.element.id)
+        }
+
+        if (enableFocusMode || nodesSelectable) {
+          let stopPropagation = true
           switch (true) {
-            case !focusedNodeId && clickedRecently:
-            case shallChangeFocus:
-              stopPropagation = true
+            case enableFocusMode && !focusedNodeId && clickedRecently:
+            case enableFocusMode && shallChangeFocus: {
               focusOnNode(xynode.id)
               break
-            case focusedNodeId === xynode.id && clickedRecently:
-              stopPropagation = true
+            }
+            case enableFocusMode && focusedNodeId === xynode.id && clickedRecently: {
               fitDiagram()
               break
+            }
+            case nodesSelectable: {
+              xystore.getState().addSelectedNodes([xynode.id])
+              break
+            }
+            default: {
+              stopPropagation = false
+            }
           }
           if (!onNodeClick && stopPropagation) {
             // user did not provide a custom handler, stop propagation
@@ -179,6 +193,8 @@ export function useXYFlowEvents() {
           activateDynamicStep,
           activeDynamicViewStep,
           focusedNodeId,
+          xystore,
+          nodesSelectable,
           focusOnNode,
           onEdgeClick,
           setLastClickedEdge
@@ -204,7 +220,11 @@ export function useXYFlowEvents() {
         if (isEdgeOfFocusedNode) {
           focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
           if (!onEdgeClick) {
-            // user did not provide a custom handler, stop propagation
+            event.stopPropagation()
+          }
+        } else if (nodesSelectable) {
+          xystore.getState().addSelectedEdges([xyedge.id])
+          if (!onEdgeClick) {
             event.stopPropagation()
           }
         }

package/src/xyflow/XYFlowInner.tsx

@@ -2,27 +2,25 @@ import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
 import { isNonNullish } from 'remeda'
+import { useDiagramState } from '../hooks/useDiagramState'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { useDiagramState } from '../state/useDiagramStore'
-import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
+import { TopLeftPanel } from '../ui/top-left/TopLeftPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
 type XYFlowInnerProps = PropsWithChildren<{
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
-  showNavigationButtons: boolean
 }>
 
 export const XYFlowInner = memo(function XYFlowInnerR({
   children,
   background,
   controls,
-  showDiagramTitle,
-  showNavigationButtons
+  showDiagramTitle
 }: XYFlowInnerProps) {
   const {
     isDynamicView,
@@ -44,10 +42,10 @@ export const XYFlowInner = memo(function XYFlowInnerR({
     <>
       {isBgWithPattern && <XYFlowBackground background={background} />}
       {controls && <Controls position={'bottom-right'} />}
-      {readonly === false && <OptionsPanel />}
+      <TopLeftPanel />
+      {readonly !== true && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
-      {showNavigationButtons && <BackwardForwardPanel />}
       {children}
     </>
   )