@likec4/diagram 1.1.1 → 1.2.0

package/src/ui/DynamicViewWalkthrough.tsx

@@ -0,0 +1,86 @@
+import { ActionIcon, Box, Button, rem, useComputedColorScheme } from '@mantine/core'
+import {
+  IconHeart,
+  IconPhoto,
+  IconPlayerPlayFilled,
+  IconPlayerSkipBackFilled,
+  IconPlayerSkipForwardFilled,
+  IconPlayerStopFilled,
+  IconSettings
+} from '@tabler/icons-react'
+import clsx from 'clsx'
+import { isNullish, isNumber } from 'remeda'
+import { useDiagramState } from '../state/useDiagramStore'
+import * as css from './DynamicViewWalkthrough.css'
+
+export function DynamicViewWalkthrough() {
+  const {
+    nextDynamicStep,
+    stopDynamicView,
+    activeDynamicViewStep,
+    hasNextSteps
+  } = useDiagramState(s => ({
+    nextDynamicStep: s.nextDynamicStep,
+    stopDynamicView: s.stopDynamicView,
+    activeDynamicViewStep: s.activeDynamicViewStep,
+    hasNextSteps: (s.activeDynamicViewStep ?? 1) < s.view.edges.length
+  }))
+
+  const buttonProps = {
+    className: css.btn,
+    size: 'compact-xl',
+    radius: 'xl'
+  }
+
+  const nextStep = (increment = 1) => (e: React.MouseEvent) => {
+    e.stopPropagation()
+    nextDynamicStep(increment)
+  }
+
+  return (
+    <Box
+      className={clsx('react-flow__panel', css.container)}
+    >
+      {isNullish(activeDynamicViewStep)
+        && (
+          <Button
+            {...buttonProps}
+            className={clsx(css.buttons, css.btn)}
+            rightSection={<IconPlayerPlayFilled />}
+            onClick={nextStep()}
+            px={'xl'}>
+            Start
+          </Button>
+        )}
+      {isNumber(activeDynamicViewStep) && (
+        <Button.Group className={css.buttons}>
+          <Button
+            {...buttonProps}
+            pl={'lg'}
+            disabled={activeDynamicViewStep === 1}
+            onClick={nextStep(-1)}>
+            <IconPlayerSkipBackFilled />
+          </Button>
+
+          <Button
+            {...buttonProps}
+            px={'sm'}
+            onClick={e => {
+              e.stopPropagation()
+              stopDynamicView()
+            }}>
+            <IconPlayerStopFilled />
+          </Button>
+
+          <Button
+            {...buttonProps}
+            pr={'lg'}
+            disabled={!hasNextSteps}
+            onClick={nextStep()}>
+            <IconPlayerSkipForwardFilled />
+          </Button>
+        </Button.Group>
+      )}
+    </Box>
+  )
+}

package/src/ui/OptionsPanel.tsx

@@ -4,10 +4,13 @@ import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import { AnimatePresence, motion } from 'framer-motion'
 import { useState } from 'react'
-import * as styles from './OptionsPanel.css'
+import { isNullish, isTruthy } from 'remeda'
+import { useDiagramState } from '../state'
 import { NodeOptions } from './options/NodeOptions'
+import * as styles from './OptionsPanel.css'
 
 export default function OptionsPanel() {
+  const isFocusDisabled = useDiagramState(s => isNullish(s.focusedNodeId))
   const [selectedNodes, setSelectedNodes] = useState([] as string[])
 
   useOnSelectionChange({
@@ -19,10 +22,9 @@ export default function OptionsPanel() {
     }
   })
 
-
   return (
     <AnimatePresence mode="wait">
-      {selectedNodes.length > 0 && (
+      {isFocusDisabled && selectedNodes.length > 0 && (
         <motion.div
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}

package/src/ui/index.ts

@@ -1,2 +1,3 @@
 // export { default as Camera } from './Camera'
+export * from './DynamicViewWalkthrough'
 export { default as OptionsPanel } from './OptionsPanel'

package/src/ui/options/NodeOptions.tsx

@@ -1,9 +1,9 @@
 import {
-  ElementShapes,
-  defaultTheme,
-  invariant,
   type BorderStyle,
+  defaultTheme,
   type ElementShape,
+  ElementShapes,
+  invariant,
   type NonEmptyArray,
   type ThemeColor
 } from '@likec4/core'
@@ -13,14 +13,14 @@ import {
   ColorSwatch,
   Divider,
   Flex,
+  rem,
   SegmentedControl,
   Select,
   Slider,
   Stack,
   Text,
   Tooltip,
-  TooltipGroup,
-  rem
+  TooltipGroup
 } from '@mantine/core'
 import { useEffect, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
@@ -57,7 +57,7 @@ export type ColorKey = typeof colors[0]['key']
 type XYNodesData = Pick<XYFlowNode, 'id' | 'data' | 'type'>
 
 export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] }) {
-// export function NodeOptions(props: { nodes: XYFlowNode[] }) {
+  // export function NodeOptions(props: { nodes: XYFlowNode[] }) {
   const diagramApi = useDiagramStoreApi()
   // const nodes = useXYNodesData(props.nodes.map(node => node.id))
   const nodes = useXYNodesData(selectedNodeIds)
@@ -104,25 +104,24 @@ export function NodeOptions({ selectedNodeIds }: { selectedNodeIds: string[] })
         onColorChange={(color: ColorKey | ThemeColorKey) => {
           triggerChange({ color })
         }} />
+
+      {showOpacityOption && (
+        <Box key={firstNode.id}>
+          <Divider label="opacity and border" labelPosition="left" />
+          <OpacityOption
+            node={firstNode}
+            onOpacityChange={(opacity: number) => {
+              triggerChange({ opacity })
+            }} />
+          <BorderStyleOption
+            node={firstNode}
+            onChange={(border: BorderStyle) => {
+              triggerChange({ border })
+            }}
+          />
+        </Box>
+      )}
       <NavigateToOption nodes={nodes} />
-      <Box key={firstNode.id}>
-        {showOpacityOption && (
-          <>
-            <Divider label="opacity and border" labelPosition="left" />
-            <OpacityOption
-              node={firstNode}
-              onOpacityChange={(opacity: number) => {
-                triggerChange({ opacity })
-              }} />
-            <BorderStyleOption
-              node={firstNode}
-              onChange={(border: BorderStyle) => {
-                triggerChange({ border })
-              }}
-            />
-          </>
-        )}
-      </Box>
     </Stack>
   )
 }

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,99 +1,119 @@
-import { useDebouncedCallback, useDebouncedEffect, useRafEffect } from '@react-hookz/web'
-import { useNodesInitialized } from '@xyflow/react'
-import { memo, useEffect, useRef, useState } from 'react'
+import { useDebouncedEffect } from '@react-hookz/web'
+import { useEffect, useRef } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
-import { useXYStore } from './hooks'
+import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
 import type { XYFlowState } from './types'
+import { toDomPrecision } from './utils'
 
 function selectDimensions(state: XYFlowState) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`
 }
 
-function FitViewOnViewportResize({ diagramApi }: { diagramApi: DiagramStoreApi }) {
+function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
+  xyflowApi: XYStoreApi
+  diagramApi: DiagramStoreApi
+}) {
   const dimensions = useXYStore(selectDimensions)
   const prevDimensionsRef = useRef(dimensions)
 
   useDebouncedEffect(
     () => {
-      if (prevDimensionsRef.current === dimensions) {
+      const { focusedNodeId, fitDiagram } = diagramApi.getState()
+      if (focusedNodeId || prevDimensionsRef.current === dimensions) {
         return
       }
-      diagramApi.getState().fitDiagram()
+      fitDiagram(xyflowApi)
       prevDimensionsRef.current = dimensions
     },
-    [dimensions],
-    150
+    [dimensions, diagramApi, xyflowApi],
+    200,
+    800
   )
 
   return null
 }
 
-const diagramChangeId = (s: DiagramState) => s.view.id + '_' + s.view.autoLayout + '_' + s.fitViewPadding
+function selector({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }: DiagramState) {
+  const viewId = view.id + '_' + view.autoLayout + '_' + s.fitViewPadding
+
+  const waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id
+    && lastOnNavigate.positionCorrected === false
+  const elTo = waitCorrection ? view.nodes.find(n => n.id === lastOnNavigate.element.id) : undefined
+  if (waitCorrection && elTo) {
+    return {
+      viewId,
+      xyflowSynced,
+      viewportChanged,
+      waitCorrection: true,
+      elFrom: lastOnNavigate.element,
+      elTo
+    }
+  }
+
+  return {
+    viewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection: false,
+    fromElement: null,
+    toElement: null
+  }
+}
 
 /**
  * Fits the view when the view changes and nodes are initialized
  */
-function FitViewOnDiagramChanges() {
+export function FitViewOnDiagramChange() {
+  const xyflowApi = useXYStoreApi()
+  const {
+    viewId: pendingViewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection,
+    elFrom,
+    elTo
+  } = useDiagramState(selector)
   const diagramApi = useDiagramStoreApi()
-  const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
-  const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
-  const [pendingChangeId, setPending] = useState(processedChangeId)
-
-  const isReady = useNodesInitialized({
-    includeHiddenNodes: true
-  })
-
-  const schedulePending = useDebouncedCallback(
-    (pendingChangeId: string) => {
-      setPending(pendingChangeId)
-    },
-    [setPending],
-    75
-  )
-
-  useEffect(
-    () =>
-      diagramApi.subscribe(
-        s => diagramChangeId(s),
-        schedulePending
-      ),
-    [diagramApi, schedulePending]
-  )
-
-  useEffect(
-    () =>
-      diagramApi.subscribe(
-        s => s.viewportChanged,
-        setViewportMoved
-      ),
-    [diagramApi, setViewportMoved]
-  )
-
-  useRafEffect(
-    () => {
-      if (!isReady || processedChangeId === pendingChangeId) {
-        return
+  const processedRef = useRef(pendingViewId)
+
+  useEffect(() => {
+    if (!xyflowSynced || pendingViewId === processedRef.current) {
+      return
+    }
+    if (waitCorrection && elTo && elFrom) {
+      const [x, y, zoom] = xyflowApi.getState().transform
+      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
+        })
       }
-      diagramApi.getState().fitDiagram()
-      setProcessed(pendingChangeId)
-    },
-    [isReady, processedChangeId, pendingChangeId, diagramApi]
-  )
-
-  if (!viewportMoved && isReady) {
-    return <FitViewOnViewportResize diagramApi={diagramApi} />
+      const centerTo = xyflow.flowToScreenPosition({
+          x: elTo.position[0] + elTo.width / 2,
+          y: elTo.position[1] + elTo.height / 2
+        }),
+        diff = {
+          x: toDomPrecision(centerFrom.x - centerTo.x),
+          y: toDomPrecision(centerFrom.y - centerTo.y)
+        }
+      xyflowApi.getState().panBy(diff)
+      diagramApi.setState({ lastOnNavigate: null })
+      return
+    }
+    processedRef.current = pendingViewId
+    diagramApi.getState().fitDiagram(xyflowApi)
+  }, [pendingViewId, xyflowSynced, waitCorrection])
+
+  if (!viewportChanged && xyflowSynced) {
+    return <FitViewOnViewportResize xyflowApi={xyflowApi} diagramApi={diagramApi} />
   }
   return null
 }
-
-const selectFitViewFlag = (s: DiagramState) => s.fitViewEnabled
-
-export const FitViewOnDiagramChange = memo(() => {
-  const fitView = useDiagramState(selectFitViewFlag)
-
-  if (!fitView) {
-    return null
-  }
-
-  return <FitViewOnDiagramChanges />
-})

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,57 +1,75 @@
+import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { useUpdateEffect } from '../hooks'
-import { useDiagramState } from '../state/useDiagramStore'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
+import { MinZoom } from './const'
 import { useXYStoreApi } from './hooks/useXYFlow'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
 export function SelectEdgesOnNodeFocus() {
   const focusedNodeId = useDiagramState(s => s.focusedNodeId)
+  const diagramStore = useDiagramStoreApi()
   const xyflowApi = useXYStoreApi()
 
   useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      xyflowApi.getState().resetSelectedElements()
+      return
+    }
+
     const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
     const nodeChanges = [] as NodeChange<XYFlowNode>[]
-    const { edges, nodes, triggerNodeChanges, triggerEdgeChanges } = xyflowApi.getState()
-    if (focusedNodeId) {
-      for (const edge of edges) {
-        if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
-          edgeChanges.push({
-            id: edge.id,
-            type: 'select',
-            selected: true
-          })
-        } else if (edge.selected) {
-          edgeChanges.push({
-            id: edge.id,
-            type: 'select',
-            selected: false
-          })
-        }
-      }
-      for (const node of nodes) {
-        if (node.selected && node.id !== focusedNodeId) {
-          nodeChanges.push({
-            id: node.id,
-            type: 'select',
-            selected: false
-          })
+    const { edgeLookup, nodeLookup, transform, triggerNodeChanges, fitView, triggerEdgeChanges } = xyflowApi.getState()
+    const fitViewNodes = new Set<XYFlowNode>()
+    fitViewNodes.add(nonNullable(nodeLookup.get(focusedNodeId)))
+
+    for (const [, edge] of edgeLookup) {
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        edgeChanges.push({
+          id: edge.id,
+          type: 'select',
+          selected: true
+        })
+        const anotherNode = nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source)
+        if (anotherNode) {
+          fitViewNodes.add(anotherNode)
         }
+      } else if (edge.selected) {
+        edgeChanges.push({
+          id: edge.id,
+          type: 'select',
+          selected: false
+        })
       }
-      nodeChanges.push({
-        id: focusedNodeId,
-        type: 'select',
-        selected: true
-      })
-      if (edgeChanges.length > 0) {
-        triggerEdgeChanges(edgeChanges)
-      }
-      if (nodeChanges.length > 0) {
-        triggerNodeChanges(nodeChanges)
+    }
+    for (const [, node] of nodeLookup) {
+      if (node.selected && node.id !== focusedNodeId) {
+        nodeChanges.push({
+          id: node.id,
+          type: 'select',
+          selected: false
+        })
       }
-    } else {
-      xyflowApi.getState().resetSelectedElements()
     }
-  }, [focusedNodeId])
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: 'select',
+      selected: true
+    })
+    if (edgeChanges.length > 0) {
+      triggerEdgeChanges(edgeChanges)
+    }
+    triggerNodeChanges(nodeChanges)
+
+    fitView({
+      includeHiddenNodes: true,
+      duration: 300,
+      padding: 0.1,
+      minZoom: MinZoom,
+      maxZoom: Math.max(1, transform[2]),
+      nodes: Array.from(fitViewNodes)
+    })
+  }, [diagramStore, xyflowApi, focusedNodeId])
 
   return null
 }

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,125 +1,73 @@
-import { deepEqual as eq, shallowEqual } from 'fast-equals'
-import { useXYFlow, useXYStoreApi } from './hooks'
-import type { XYFlowNode } from './types'
+import { deepEqual as eq } from 'fast-equals'
+import { useXYStoreApi } from './hooks'
 
-import { memo, useEffect, useRef } from 'react'
-import { useDiagramStoreApi } from '../state'
+import { useEffect } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../state'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
-import { toDomPrecision } from './utils'
-
-const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
-  a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId)
 
 /**
  * Syncs the diagram state with the XYFlow instance
  */
-export const SyncWithDiagram = memo(() => {
-  const _xyflow = useXYFlow()
-  const xyflowRef = useRef(_xyflow)
-  xyflowRef.current = _xyflow
-
+export function SyncWithDiagram() {
+  const xyflowSynced = useDiagramState(s => s.xyflowSynced)
   const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
   useEffect(() => {
-    return diagramStoreApi.subscribe(
-      // selector
-      state => ({
-        viewId: state.view.id,
-        nodes: state.view.nodes,
-        edges: state.view.edges
-      }),
-      // listener
-      ({ viewId, nodes, edges }) => {
-        const {
-          lastOnNavigate,
-          nodesDraggable,
-          nodesSelectable,
-          focusedNodeId
-        } = diagramStoreApi.getState()
-        const updates = diagramViewToXYFlowData({ nodes, edges }, {
-          draggable: nodesDraggable,
-          selectable: nodesSelectable || focusedNodeId !== null
-        })
-
-        xyflowRef.current.setNodes(prev =>
-          updates.nodes.map(update => {
-            const existing = prev.find(isSameNode(update))
-            if (existing) {
-              if (eq(existing.data.element, update.data.element)) {
-                return existing
-              }
-              return {
-                ...existing,
-                ...update
-              }
-            }
-            return update
-          })
-        )
+    if (xyflowSynced) {
+      return
+    }
+    const {
+      view,
+      nodesDraggable,
+      nodesSelectable,
+      focusedNodeId
+    } = diagramStoreApi.getState()
+    const updates = diagramViewToXYFlowData(view, {
+      draggable: nodesDraggable,
+      selectable: nodesSelectable || focusedNodeId !== null
+    })
 
-        xyflowRef.current.setEdges(prev =>
-          updates.edges.map(update => {
-            const existing = prev.find(e => e.id === update.id)
-            if (existing) {
-              return eq(existing.data, update.data) ? existing : {
-                ...existing,
-                ...update
-              }
-            }
-            return update
-          })
-        )
+    const {
+      nodeLookup,
+      edgeLookup,
+      setNodes,
+      setEdges
+    } = xyflowApi.getState()
 
-        if (lastOnNavigate?.toView === viewId && lastOnNavigate.positionCorrected !== true) {
-          const elFrom = lastOnNavigate.element
-          const elTo = nodes.find(n => n.id === elFrom.id)
-          if (elTo) {
-            const centerFrom = lastOnNavigate.elementCenterScreenPosition
-            let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
-
-            // TODO: investigate why 2 animation frames are needed
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                const v = xyflowRef.current.getViewport()
-                if (nextZoom < v.zoom) {
-                  nextZoom = Math.max(nextZoom, v.zoom * 0.5)
-                  xyflowRef.current.setViewport({
-                    x: v.x,
-                    y: v.y,
-                    zoom: nextZoom
-                  })
-                }
+    setNodes(updates.nodes.map(update => {
+      const existing = nodeLookup.get(update.id)?.internals.userNode
+      if (existing && existing.type === update.type && eq(existing.parentId, update.parentId)) {
+        if (eq(existing.data.element, update.data.element)) {
+          return existing
+        }
+        return {
+          ...existing,
+          ...update
+        }
+      }
+      return update
+    }))
 
-                const centerTo = xyflowRef.current.flowToScreenPosition({
-                    x: elTo.position[0] + elTo.width / 2,
-                    y: elTo.position[1] + elTo.height / 2
-                  }),
-                  diff = {
-                    x: toDomPrecision(centerFrom.x - centerTo.x),
-                    y: toDomPrecision(centerFrom.y - centerTo.y)
-                  }
-                xyflowApi.getState().panBy(diff)
-              })
-            })
-          }
-          diagramStoreApi.setState(
-            {
-              lastOnNavigate: {
-                ...lastOnNavigate,
-                positionCorrected: true
-              }
-            },
-            false,
-            'positionCorrected'
-          )
+    setEdges(updates.edges.map(update => {
+      const existing = edgeLookup.get(update.id)
+      if (existing) {
+        return eq(existing.data.edge, update.data.edge) ? existing : {
+          ...existing,
+          ...update
         }
-      },
-      {
-        equalityFn: shallowEqual
       }
+      return update
+    }))
+
+    diagramStoreApi.setState(
+      {
+        xyflowSynced: true
+      },
+      false,
+      'xyflowSynced'
     )
-  }, [xyflowApi, diagramStoreApi])
+  }, [xyflowSynced, xyflowApi, diagramStoreApi])
 
   return null
-})
+}