@likec4/diagram 1.1.1 → 1.2.1

package/src/ui/DiagramTitlePanel.css.ts

@@ -10,9 +10,10 @@ export const container = style({
 
 export const paper = style({
   cursor: 'default',
-  minWidth: 200,
+  minWidth: 100,
   maxWidth: 'calc(100vw - 16px)',
   backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
+  WebkitBackdropFilter: 'blur(8px)',
   backdropFilter: 'blur(8px)',
   '@media': {
     [mantine.largerThan('md')]: {

package/src/ui/DiagramTitlePanel.tsx

@@ -1,10 +1,9 @@
 import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
-import { useToggle } from '@react-hookz/web'
+import { useLocalStorage } from '@mantine/hooks'
 import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../state'
 import * as css from './DiagramTitlePanel.css'
-import { useLocalStorage } from '@mantine/hooks'
 
 const selector = (s: DiagramState) => ({
   id: s.view.id,
@@ -40,7 +39,7 @@ export default function DiagramTitlePanel() {
           radius="sm"
           withBorder={!isCollapsed}
           className={css.paper}
-          p={isCollapsed ? 'sm' : 'md'}
+          p={isCollapsed ? 'xs' : 'lg'}
           onDoubleClick={e => e.stopPropagation()}>
           <Stack gap={'sm'} justify="stretch" align="stretch">
             <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
@@ -99,7 +98,7 @@ export default function DiagramTitlePanel() {
                     justify="stretch"
                     align="stretch">
                     {links.map((link) => (
-                      <Group key={link} wrap="nowrap" align='center' gap={'sm'}>
+                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
                         <Box flex={'1'} style={{ overflow: 'hidden' }}>
                           <Anchor
                             href={link}

package/src/ui/DynamicViewWalkthrough.css.ts

@@ -0,0 +1,46 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../mantine.css'
+
+export const container = style({
+  position: 'absolute',
+  bottom: '0.5rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  padding: 0,
+  margin: 0
+})
+
+export const buttons = style({
+  backdropFilter: 'blur(8px)',
+  transition: 'all 175ms ease-in',
+  ':hover': {
+    transitionTimingFunction: 'ease-out',
+    transform: 'scale(1.1)'
+  },
+  ':active': {
+    transitionDuration: '100ms',
+    transform: 'scale(0.98) translateY(3px)'
+  }
+})
+
+var transparency = createVar()
+export const btn = style({
+  transition: 'all 175ms ease-in',
+  backgroundColor: 'var(--button-bg)',
+  vars: {
+    [transparency]: '35%',
+    ['--button-bg']: `color-mix(in srgb, ${mantine.colors.primaryColors.filled}, transparent ${transparency})`,
+    ['--button-hover']: `color-mix(in srgb, ${mantine.colors.primaryColors.filledHover}, transparent ${transparency})`
+  },
+  selectors: {
+    [mantine.lightSelector]: {
+      vars: {
+        [transparency]: '15%'
+      }
+    }
+  }
+})
+
+globalStyle(`${btn} .tabler-icon`, {
+  width: '80%'
+})

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
 }