@likec4/diagram 1.2.2 → 1.3.0

package/src/ui/DiagramTitlePanel.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
 import clsx from 'clsx'
-import { AnimatePresence, motion } from 'framer-motion'
+import { AnimatePresence, m } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../state'
 import * as css from './DiagramTitlePanel.css'
 
@@ -22,7 +22,7 @@ export default function DiagramTitlePanel() {
 
   return (
     <AnimatePresence mode="wait">
-      <motion.div
+      <m.div
         key={id}
         initial={{ opacity: 0.05, scale: 0.7 }}
         animate={{ opacity: 1, scale: 1 }}
@@ -132,7 +132,7 @@ export default function DiagramTitlePanel() {
             )}
           </Stack>
         </Paper>
-      </motion.div>
+      </m.div>
     </AnimatePresence>
   )
 }

package/src/ui/DynamicViewWalkthrough.css.ts

@@ -41,6 +41,7 @@ export const btn = style({
   }
 })
 
-globalStyle(`${btn} .tabler-icon`, {
-  width: '80%'
+globalStyle(`:where(${buttons}, ${btn}) .tabler-icon`, {
+  width: '0.85em',
+  height: '0.85em'
 })

package/src/ui/DynamicViewWalkthrough.tsx

@@ -1,19 +1,19 @@
-import { ActionIcon, Box, Button, rem, useComputedColorScheme } from '@mantine/core'
+import { Box, Button } from '@mantine/core'
+import { useHotkeys } from '@mantine/hooks'
 import {
-  IconHeart,
-  IconPhoto,
   IconPlayerPlayFilled,
   IconPlayerSkipBackFilled,
   IconPlayerSkipForwardFilled,
-  IconPlayerStopFilled,
-  IconSettings
+  IconPlayerStopFilled
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { isNullish, isNumber } from 'remeda'
 import { useDiagramState } from '../state/useDiagramStore'
+import { useXYStore } from '../xyflow/hooks/useXYFlow'
 import * as css from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {
+  const isMobile = useXYStore(s => s.width <= 750)
   const {
     nextDynamicStep,
     stopDynamicView,
@@ -26,10 +26,28 @@ export function DynamicViewWalkthrough() {
     hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
   }))
 
+  const isActive = isNumber(activeDynamicViewStep)
+
+  useHotkeys(
+    isActive
+      ? [
+        ['ArrowLeft', () => nextDynamicStep(-1)],
+        ['ArrowRight', () => nextDynamicStep()],
+        ['Escape', (e) => {
+          e.stopImmediatePropagation()
+          stopDynamicView()
+        }, { preventDefault: true }]
+      ]
+      : [
+        ['ArrowLeft', () => nextDynamicStep()],
+        ['ArrowRight', () => nextDynamicStep()]
+      ]
+  )
+
   const buttonProps = {
     className: css.btn,
-    size: 'compact-xl',
-    radius: 'xl'
+    size: isMobile ? 'compact-md' : 'lg',
+    radius: isMobile ? 'lg' : 'xl'
   }
 
   const nextStep = (increment = 1) => (e: React.MouseEvent) => {
@@ -64,21 +82,22 @@ export function DynamicViewWalkthrough() {
 
           <Button
             {...buttonProps}
-            px={'sm'}
+            px={hasNextSteps ? 'md' : 'xl'}
             onClick={e => {
               e.stopPropagation()
               stopDynamicView()
             }}>
-            <IconPlayerStopFilled />
-          </Button>
-
-          <Button
-            {...buttonProps}
-            pr={'lg'}
-            disabled={!hasNextSteps}
-            onClick={nextStep()}>
-            <IconPlayerSkipForwardFilled />
+            {hasNextSteps && <IconPlayerStopFilled />}
+            {!hasNextSteps && 'End'}
           </Button>
+          {hasNextSteps && (
+            <Button
+              {...buttonProps}
+              pr={'lg'}
+              onClick={nextStep()}>
+              <IconPlayerSkipForwardFilled />
+            </Button>
+          )}
         </Button.Group>
       )}
     </Box>

package/src/ui/OptionsPanel.tsx

@@ -1,31 +1,29 @@
 import { Card } from '@mantine/core'
 import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
-import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, motion } from 'framer-motion'
-import { useState } from 'react'
-import { isNullish, isTruthy } from 'remeda'
+import { deepEqual as eq } from 'fast-equals'
+import { AnimatePresence, m } from 'framer-motion'
+import { memo, useState } from 'react'
+import { isNullish } from 'remeda'
 import { useDiagramState } from '../state'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
-export default function OptionsPanel() {
+const OptionsPanelMemo = memo(function OptionsPanel() {
   const isFocusDisabled = useDiagramState(s => isNullish(s.focusedNodeId))
   const [selectedNodes, setSelectedNodes] = useState([] as string[])
 
   useOnSelectionChange({
     onChange: ({ nodes }) => {
-      const next = nodes.map(n => n.id).sort()
-      setSelectedNodes(prev => {
-        return shallowEqual(prev, next) ? prev : next
-      })
+      const next = nodes.map(n => n.id)
+      setSelectedNodes(prev => eq(prev, next) ? prev : next)
     }
   })
 
   return (
     <AnimatePresence mode="wait">
       {isFocusDisabled && selectedNodes.length > 0 && (
-        <motion.div
+        <m.div
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
@@ -41,8 +39,10 @@ export default function OptionsPanel() {
           <Card shadow="sm">
             <NodeOptions selectedNodeIds={selectedNodes} />
           </Card>
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   )
-}
+})
+
+export default OptionsPanelMemo

package/src/ui/options/NodeOptions.tsx

@@ -22,17 +22,14 @@ import {
   Tooltip,
   TooltipGroup
 } from '@mantine/core'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
+import { useUpdateEffect } from '../../hooks/useUpdateEffect'
 import type { Changes } from '../../LikeC4Diagram.props'
 import { useDiagramStoreApi } from '../../state'
 import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
 
-// const ColorPanel = () => {
-//   const selectedNodes = useStore(state => state.nodeInternals
-// }
-
 const {
   primary,
   secondary,
@@ -78,20 +75,20 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
   const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
     const targets = nodes.map(node => node.data.element.id)
     invariant(hasAtLeast(targets, 1), 'At least one target is required')
-    diagramApi.getState().triggerOnChange([{
+    diagramApi.getState().triggerChangeElementStyle({
       op: 'change-element-style',
       style,
       targets
-    }])
+    })
   }
 
   return (
     <Stack>
-      <Box maw={200}>
+      <div>
         <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
           {rest.length === 0 ? firstNode.data.element.title : `[ multiple ]`}
         </Text>
-      </Box>
+      </div>
       {showShapeOption && (
         <ShapeOption
           nodes={nodes}
@@ -106,7 +103,7 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
         }} />
 
       {showOpacityOption && (
-        <Box key={firstNode.id}>
+        <div key={firstNode.id}>
           <Divider label="opacity and border" labelPosition="left" />
           <OpacityOption
             node={firstNode}
@@ -119,7 +116,7 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
               triggerChange({ border })
             }}
           />
-        </Box>
+        </div>
       )}
       <NavigateToOption nodes={nodes} />
     </Stack>
@@ -148,7 +145,7 @@ function Colors({
     onColorChange(color)
   }
   return (
-    <Box>
+    <div>
       <TooltipGroup openDelay={400} closeDelay={300}>
         <Divider label="color" labelPosition="left" />
         <Flex mt={'xs'} maw={150} gap="xs" justify="flex-start" align="flex-start" direction="row" wrap="wrap">
@@ -194,7 +191,7 @@ function Colors({
           ))}
         </Flex>
       </TooltipGroup>
-    </Box>
+    </div>
   )
 }
 
@@ -215,7 +212,7 @@ function ShapeOption({
   })
 
   return (
-    <Box>
+    <div>
       <Divider label="shape" labelPosition="left" />
       <Select
         mt={'xs'}
@@ -232,7 +229,7 @@ function ShapeOption({
           }
           onShapeChange(value as ElementShape)
         }} />
-    </Box>
+    </div>
   )
 }
 
@@ -243,7 +240,7 @@ function NavigateToOption({
 }) {
   const isMultiple = nodes.length >= 1
   return (
-    <Box>
+    <div>
       <Divider label="navigate to" labelPosition="left" />
       <Select
         mt={'xs'}
@@ -265,7 +262,7 @@ function NavigateToOption({
         //   onShapeChange(value as ElementShape)
         // }} />
       />
-    </Box>
+    </div>
   )
 }
 
@@ -278,7 +275,7 @@ function OpacityOption({
 }) {
   let selectedOpacity = node.data.element.style.opacity ?? 100
   const [value, setValue] = useState(selectedOpacity)
-  useEffect(() => {
+  useUpdateEffect(() => {
     setValue(selectedOpacity)
   }, [selectedOpacity])
 
@@ -302,7 +299,7 @@ function BorderStyleOption({
 }) {
   let selecteBorderStyle = node.data.element.style.border ?? 'dashed'
   const [value, setValue] = useState(selecteBorderStyle)
-  useEffect(() => {
+  useUpdateEffect(() => {
     setValue(selecteBorderStyle)
   }, [selecteBorderStyle])
 

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,4 +1,6 @@
+import { invariant } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
+import { shallowEqual } from 'fast-equals'
 import { useEffect, useRef } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
 import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
@@ -26,8 +28,8 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
       prevDimensionsRef.current = dimensions
     },
     [dimensions, diagramApi, xyflowApi],
-    200,
-    800
+    250,
+    1000
   )
 
   return null
@@ -72,7 +74,7 @@ export function FitViewOnDiagramChange() {
     waitCorrection,
     elFrom,
     elTo
-  } = useDiagramState(selector)
+  } = useDiagramState(selector, shallowEqual)
   const diagramApi = useDiagramStoreApi()
   const processedRef = useRef(pendingViewId)
 
@@ -80,29 +82,19 @@ export function FitViewOnDiagramChange() {
     if (!xyflowSynced || pendingViewId === processedRef.current) {
       return
     }
-    if (waitCorrection && elTo && elFrom) {
-      const [x, y, zoom] = xyflowApi.getState().transform
+    if (waitCorrection) {
+      invariant(elTo, 'elTo should be defined')
+      invariant(elFrom, 'elFrom should be defined')
       const { xyflow, lastOnNavigate } = diagramApi.getState()
-      const nextZoom = Math.min(
-        elFrom.width / elTo.width,
-        elFrom.height / elTo.height
-      )
-      const centerFrom = lastOnNavigate!.elementCenterScreenPosition
-      if (nextZoom !== 1 && nextZoom < zoom) {
-        xyflowApi.setState({ transform: [x, y, nextZoom] })
-        xyflow.setViewport({
-          x,
-          y,
-          zoom: nextZoom
-        })
-      }
-      const centerTo = xyflow.flowToScreenPosition({
-          x: elTo.position[0] + elTo.width / 2,
-          y: elTo.position[1] + elTo.height / 2
+      invariant(lastOnNavigate, 'lastOnNavigate should be defined')
+      const fromPos = lastOnNavigate.elementScreenPosition
+      const toPos = xyflow.flowToScreenPosition({
+          x: elTo.position[0], // + elFrom.width / 2,
+          y: elTo.position[1] // + elFrom.height / 2
         }),
         diff = {
-          x: toDomPrecision(centerFrom.x - centerTo.x),
-          y: toDomPrecision(centerFrom.y - centerTo.y)
+          x: toDomPrecision(fromPos.x - toPos.x),
+          y: toDomPrecision(fromPos.y - toPos.y)
         }
       xyflowApi.getState().panBy(diff)
       diagramApi.setState({ lastOnNavigate: null })

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -30,10 +30,8 @@ export function SelectEdgesOnNodeFocus() {
           type: 'select',
           selected: true
         })
-        const anotherNode = nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source)
-        if (anotherNode) {
-          fitViewNodes.add(anotherNode)
-        }
+        const anotherNode = nonNullable(nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source))
+        fitViewNodes.add(anotherNode)
       } else if (edge.selected) {
         edgeChanges.push({
           id: edge.id,
@@ -62,8 +60,7 @@ export function SelectEdgesOnNodeFocus() {
     triggerNodeChanges(nodeChanges)
 
     fitView({
-      includeHiddenNodes: true,
-      duration: 300,
+      duration: 350,
       padding: 0.1,
       minZoom: MinZoom,
       maxZoom: Math.max(1, transform[2]),

package/src/xyflow/SyncWithDiagram.tsx

@@ -52,10 +52,29 @@ export function SyncWithDiagram() {
     setEdges(updates.edges.map(update => {
       const existing = edgeLookup.get(update.id)
       if (existing) {
-        return eq(existing.data.edge, update.data.edge) ? existing : {
+        if (eq(existing.data.controlPoints, update.data.controlPoints) && eq(existing.data.edge, update.data.edge)) {
+          return existing
+        }
+        return {
           ...existing,
-          ...update
+          ...update,
+          data: {
+            ...existing.data,
+            ...update.data
+          }
         }
+        // if (update.data.controlPoints === null && existing.data.controlPoints !== null) {
+        //   // we don't want accidentally
+        //   // overwrite existing control points
+        //   return {
+        //     ...existing,
+        //     ...update,
+        //     data: {
+        //       ...update.data,
+        //       controlPoints: existing.data.controlPoints
+        //     }
+        //   }
+        // }
       }
       return update
     }))

package/src/xyflow/XYFlow.tsx

@@ -1,10 +1,8 @@
-import { useMantineColorScheme } from '@mantine/core'
-import { Controls, ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { deepEqual as eq, shallowEqual } from 'fast-equals'
-import { type CSSProperties, memo, type PropsWithChildren } from 'react'
-import { omit, omitBy } from 'remeda'
-import type { SetNonNullable, Simplify } from 'type-fest'
-import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import { ReactFlow, useOnViewportChange } from '@xyflow/react'
+import { DEV } from 'esm-env'
+import { deepEqual as eq } from 'fast-equals'
+import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
+import useTilg from 'tilg'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
@@ -13,7 +11,6 @@ import { useXYStoreApi } from './hooks/useXYFlow'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
 import { XYFlowEdge, XYFlowNode } from './types'
-import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
 
 const nodeTypes = {
@@ -25,6 +22,7 @@ const edgeTypes = {
 }
 
 type XYFlowWrapperProps = PropsWithChildren<{
+  colorMode?: 'system' | 'light' | 'dark'
   className?: string | undefined
   defaultNodes: XYFlowNode[]
   defaultEdges: XYFlowEdge[]
@@ -45,7 +43,12 @@ const selector = (s: DiagramState) => ({
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
+  fitViewOptions: {
+    minZoom: MinZoom,
+    maxZoom: 1,
+    padding: s.fitViewPadding,
+    includeHiddenNodes: true
+  },
   hasOnNavigateTo: !!s.onNavigateTo,
   hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
@@ -57,19 +60,21 @@ const selector = (s: DiagramState) => ({
 })
 
 export function XYFlow({
+  colorMode = 'system',
   className,
   children,
   defaultNodes,
   defaultEdges,
   style
 }: XYFlowWrapperProps) {
+  DEV && useTilg()
   const xyflowApi = useXYStoreApi()
   const diagramApi = useDiagramStoreApi()
   const {
     nodesSelectable,
     nodesDraggable,
     fitView,
-    fitViewPadding,
+    fitViewOptions,
     pannable,
     zoomable,
     hasOnNodeClick,
@@ -78,15 +83,12 @@ export function XYFlow({
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
     hasOnEdgeClick
-  } = useDiagramState(selector)
+  } = useDiagramState(selector, eq)
 
   const layoutConstraints = useLayoutConstraints()
 
   const handlers = useXYFlowEvents()
 
-  const { colorScheme } = useMantineColorScheme()
-  const colorMode = colorScheme !== 'auto' ? colorScheme : undefined
-
   /**
    * WORKAROUND - Called on viewport change
    * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
@@ -122,12 +124,7 @@ export function XYFlow({
       maxZoom={zoomable ? 1.9 : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
-      fitViewOptions={{
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: true
-      }}
+      fitViewOptions={fitViewOptions}
       preventScrolling={zoomable || pannable}
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"
@@ -159,9 +156,9 @@ export function XYFlow({
       onNodeClick={handlers.onNodeClick}
       onNodeDoubleClick={handlers.onNodeDoubleClick}
       onEdgeClick={handlers.onEdgeClick}
-      onInit={() => {
+      onInit={useCallback(() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
-      }}
+      }, [diagramApi])}
       {...(hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}
@@ -176,4 +173,4 @@ export function XYFlow({
   )
 }
 
-// export const XYFlow = memo(XYFlowWrapper, propsAreEqual) as typeof XYFlowWrapper
+// export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper

package/src/xyflow/XYFlowEvents.tsx

@@ -1,5 +1,6 @@
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
+import { isNullish } from 'remeda'
 import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../state'
 import { useXYStoreApi } from './hooks'
@@ -30,6 +31,8 @@ export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
   const xyflowApi = useXYStoreApi()
 
+  const lastClickTimestamp = useRef<number>()
+
   const dblclickTimeout = useRef<number>()
 
   const dbclickLock = () => {
@@ -42,6 +45,10 @@ export function useXYFlowEvents() {
     return false
   }
 
+  const lastClickWasRecent = (ms = 1500) => {
+    return lastClickTimestamp.current && (Date.now() - lastClickTimestamp.current) < ms
+  }
+
   // If we are in focused mode, on edge enter we want to "highlight" the other node
   // This ref contains the id of this node
   const hoveredNodeFromOnEdgeEnterRef = useRef('')
@@ -68,8 +75,14 @@ export function useXYFlowEvents() {
         if (dbclickLock()) {
           return
         }
-        const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState()
-        if (!!focusedNodeId) {
+        const {
+          focusedNodeId,
+          activeDynamicViewStep,
+          fitDiagram,
+          onCanvasClick,
+          resetLastClicked
+        } = diagramApi.getState()
+        if (focusedNodeId || activeDynamicViewStep) {
           fitDiagram(xyflowApi)
           if (!onCanvasClick) {
             event.stopPropagation()
@@ -100,20 +113,28 @@ export function useXYFlowEvents() {
       },
       onNodeClick: (event, xynode) => {
         const {
+          zoomable,
+          fitViewEnabled,
           focusedNodeId,
           focusOnNode,
           onNodeClick,
+          lastClickedNodeId,
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
+        const focusPossible = zoomable && fitViewEnabled
         // if we focused on a node, and clicked on another node - focus on the clicked node
-        if (!!focusedNodeId && focusedNodeId !== xynode.id) {
+        const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
+        // if user clicked on the same node twice in a short time, focus on it
+        const clickedRecently = isNullish(focusedNodeId) && lastClickedNodeId === xynode.id && lastClickWasRecent()
+        if (focusPossible && (shallChangeFocus || clickedRecently)) {
           focusOnNode(xynode.id)
           if (!onNodeClick) {
             // user did not provide a custom handler, stop propagation
             event.stopPropagation()
           }
         }
+        lastClickTimestamp.current = Date.now()
         onNodeClick?.({
           element: xynode.data.element,
           xynode,
@@ -166,10 +187,7 @@ export function useXYFlowEvents() {
       },
       onNodeMouseEnter: (_event, xynode) => {
         hoveredNodeFromOnEdgeEnterRef.current = ''
-        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
-        if (hoveredNodeId !== xynode.id) {
-          setHoveredNode(xynode.id)
-        }
+        diagramApi.getState().setHoveredNode(xynode.id)
       },
       onNodeMouseLeave: (_event, xynode) => {
         const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
@@ -191,9 +209,9 @@ export function useXYFlowEvents() {
           setHoveredEdge(null)
         }
         if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
-          hoveredNodeFromOnEdgeEnterRef.current = ''
           setHoveredNode(null)
         }
+        hoveredNodeFromOnEdgeEnterRef.current = ''
       }
     }) satisfies XYFlowEventHandlers, [diagramApi, xyflowApi])
 }

package/src/xyflow/XYFlowInner.tsx

@@ -1,11 +1,12 @@
 import { isDynamicView } from '@likec4/core'
 import { Controls } from '@xyflow/react'
-import type { PropsWithChildren } from 'react'
+import { shallowEqual } from 'fast-equals'
+import { memo, type PropsWithChildren } from 'react'
 import { isNonNull, isNonNullish, isNullish } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { useDiagramState } from '../state/useDiagramStore'
-import { DynamicViewWalkthrough } from '../ui'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
+import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
@@ -16,7 +17,7 @@ type XYFlowInnerProps = PropsWithChildren<{
   enableDynamicViewWalkthrough: boolean
 }>
 
-export function XYFlowInner({
+export const XYFlowInner = memo(function XYFlowInnerR({
   children,
   background,
   controls,
@@ -47,4 +48,4 @@ export function XYFlowInner({
       {children}
     </>
   )
-}
+}, shallowEqual)

package/src/xyflow/const.ts

@@ -4,4 +4,4 @@ export const ZIndexes = {
   Element: 3
 } as const
 
-export const MinZoom = 0.05
+export const MinZoom = 0.1