@likec4/diagram 1.7.2 → 1.7.4

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

@@ -0,0 +1,131 @@
+import type { AutoLayoutDirection } from '@likec4/core'
+import {
+  ActionIcon as MantineActionIcon,
+  Box,
+  FloatingIndicator,
+  Group,
+  Popover,
+  PopoverDropdown,
+  type PopoverProps,
+  PopoverTarget,
+  Stack,
+  Text,
+  Tooltip as MantineTooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconArrowBigDownLines, IconLayoutDashboard } from '@tabler/icons-react'
+import { useState } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import * as css from './styles.css'
+
+const ActionIcon = MantineActionIcon.withProps({
+  size: 'md',
+  variant: 'subtle',
+  color: 'gray'
+})
+
+const Tooltip = MantineTooltip.withProps({
+  color: 'gray',
+  fz: 'xs',
+  position: 'right',
+  openDelay: 300,
+  label: '',
+  children: null,
+  offset: 5,
+  transitionProps: { transition: 'fade', duration: 200 }
+})
+
+export const ChangeAutoLayoutButton = (props: PopoverProps) => {
+  const store = useDiagramStoreApi()
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
+  const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
+  const autoLayout = useDiagramState(s => s.view.autoLayout)
+
+  const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
+    controlsRefs[name] = node
+    setControlsRefs(controlsRefs)
+  }
+
+  const setAutoLayout = (layout: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    store.getState().onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout
+      }
+    })
+  }
+
+  return (
+    <Popover
+      position="right-start"
+      clickOutsideEvents={[
+        'pointerdown'
+      ]}
+      radius="xs"
+      shadow="lg"
+      offset={{
+        mainAxis: 10
+      }}
+      {...props}>
+      <PopoverTarget>
+        <MantineActionIcon
+          className="action-icon"
+          variant="light"
+          color="gray">
+          <IconLayoutDashboard stroke={1.3} />
+        </MantineActionIcon>
+      </PopoverTarget>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={4}>
+        <Box pos={'relative'} ref={setRootRef}>
+          <FloatingIndicator
+            target={controlsRefs[autoLayout]}
+            parent={rootRef}
+            className={css.autolayoutIndicator}
+          />
+          <Box mb={10}>
+            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
+          </Box>
+          <TooltipGroup openDelay={100}>
+            <Stack align="center" gap={1}>
+              <Tooltip label="Top to Bottom">
+                <ActionIcon
+                  className={css.autolayoutIcon}
+                  ref={setControlRef('TB')}
+                  onClick={setAutoLayout('TB')}>
+                  <IconArrowBigDownLines stroke={1.3} />
+                </ActionIcon>
+              </Tooltip>
+              <Group gap={30}>
+                <Tooltip label="Left to Right">
+                  <ActionIcon
+                    className={css.autolayoutIcon}
+                    ref={setControlRef('LR')}
+                    onClick={setAutoLayout('LR')}>
+                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '270deg' }} />
+                  </ActionIcon>
+                </Tooltip>
+                <Tooltip label="Right to Left">
+                  <ActionIcon
+                    className={css.autolayoutIcon}
+                    ref={setControlRef('RL')}
+                    onClick={setAutoLayout('RL')}>
+                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '90deg' }} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+              <Tooltip label="Bottom to Top">
+                <ActionIcon
+                  className={css.autolayoutIcon}
+                  ref={setControlRef('BT')}
+                  onClick={setAutoLayout('BT')}>
+                  <IconArrowBigDownLines stroke={1.3} style={{ rotate: '180deg' }} />
+                </ActionIcon>
+              </Tooltip>
+            </Stack>
+          </TooltipGroup>
+        </Box>
+      </PopoverDropdown>
+    </Popover>
+  )
+}

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, useState } 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 { MaxZoom, 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,
@@ -88,6 +87,7 @@ export function XYFlow({
     translateX,
     translateY
   } = useDiagramState(selector, shallowEqual)
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(zoomable)
 
   // useLogger('XYFlow',[
   //   nodes,
@@ -111,6 +111,7 @@ export function XYFlow({
       if (x !== roundedX || y !== roundedY) {
         xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
+      setZoomOnDoubleClick(zoomable && zoom < 1.1)
     }
   })
 
@@ -128,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(() => ({
@@ -163,9 +164,9 @@ export function XYFlow({
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
       nodeDragThreshold={3}
-      zoomOnDoubleClick={false}
+      zoomOnDoubleClick={zoomOnDoubleClick}
       elevateNodesOnSelect={false} // or edges are not visible after select\
-      selectNodesOnDrag={false} // or weird camera movement
+      selectNodesOnDrag={false}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onDoubleClick={handlers.onDoubleClick}