@likec4/diagram 1.2.2 → 1.4.0

package/src/ui/DiagramTitlePanel.css.ts

@@ -1,5 +1,6 @@
-import { globalStyle, style } from '@vanilla-extract/css'
+import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { mantine } from '../mantine.css'
+import { vars } from '../theme.css'
 
 export const container = style({
   bottom: 0,
@@ -8,17 +9,22 @@ export const container = style({
   margin: 0
 })
 
-export const paper = style({
+export const card = style({
   cursor: 'default',
-  minWidth: 100,
+  minWidth: 150,
   maxWidth: 'calc(100vw - 16px)',
   backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
-  WebkitBackdropFilter: 'blur(8px)',
-  backdropFilter: 'blur(8px)',
+  WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
+  backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   '@media': {
     [mantine.largerThan('md')]: {
       maxWidth: '45vw'
     }
+  },
+  selectors: {
+    [`:where([data-mantine-color-scheme='dark']) &`]: {
+      backgroundColor: `color-mix(in srgb, ${mantine.colors.dark[6]}, transparent 20%)`
+    }
   }
 })
 

package/src/ui/DiagramTitlePanel.tsx

@@ -1,7 +1,8 @@
-import { Anchor, Box, Button, CopyButton, Group, Paper, Spoiler, Stack, Text } from '@mantine/core'
+import { Anchor, Box, Button, Card, CardSection, CopyButton, Group, Spoiler, Stack, Text } from '@mantine/core'
 import { useLocalStorage } from '@mantine/hooks'
+import { IconMenu } from '@tabler/icons-react'
 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 +23,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 }}
@@ -35,104 +36,115 @@ export default function DiagramTitlePanel() {
           transformOrigin: 'left center'
         }}
       >
-        <Paper
+        <Card
           radius="sm"
-          withBorder={!isCollapsed}
-          className={css.paper}
-          p={isCollapsed ? 'xs' : 'lg'}
+          className={css.card}
+          p={'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <Stack gap={'sm'} justify="stretch" align="stretch">
-            <Group justify="stretch" wrap="nowrap" onClick={toggle} style={{ cursor: 'pointer' }}>
-              <Text
-                component={'div'}
-                flex={'1'}
-                size={isCollapsed ? 'sm' : 'lg'}
-                fw={500}
-                lh={1.1}
-                className={css.title}
-              >
-                {title}
-              </Text>
-              <Text
-                hidden={isCollapsed}
-                component={'div'}
-                flex={'0 0 auto'}
-                inline
-                size="xs"
-                fz={9}
-                fw={500}
-                c={'dimmed'}
-                style={{
-                  userSelect: 'all'
-                }}>
-                <span style={{ userSelect: 'none' }}>id:{' '}</span>
-                {id}
-              </Text>
-            </Group>
-            {!isCollapsed && (
-              <>
-                {description && (
-                  <Spoiler
-                    maxHeight={42}
-                    showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
-                    hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
-                    <Text
-                      component={'div'}
-                      size="sm"
-                      className={css.description}>
-                      {description || 'no description'}
-                    </Text>
-                  </Spoiler>
-                )}
-                {!description && (
+          <CardSection mb={4}>
+            <Button
+              fullWidth
+              size="xs"
+              h={'sm'}
+              py={2}
+              radius={'0'}
+              variant="subtle"
+              color="gray"
+              onClick={toggle}
+            >
+              <IconMenu size={11} opacity={0.7} />
+            </Button>
+          </CardSection>
+          <Group justify="stretch" wrap="nowrap" mb={isCollapsed ? 0 : 'sm'}>
+            <Text
+              component={'div'}
+              flex={'1'}
+              size={isCollapsed ? 'sm' : 'lg'}
+              fw={500}
+              lh={1.1}
+              className={css.title}
+            >
+              {title}
+            </Text>
+            <Text
+              hidden={isCollapsed}
+              component={'div'}
+              flex={'0 0 auto'}
+              inline
+              size="xs"
+              fz={9}
+              fw={500}
+              c={'dimmed'}
+              style={{
+                userSelect: 'all'
+              }}>
+              <span style={{ userSelect: 'none' }}>id:{' '}</span>
+              {id}
+            </Text>
+          </Group>
+          {!isCollapsed && (
+            <>
+              {description && (
+                <Spoiler
+                  maxHeight={42}
+                  showLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">show more</Button>}
+                  hideLabel={<Button color="gray" variant="light" fz={'10'} size="compact-xs">hide</Button>}>
                   <Text
                     component={'div'}
-                    size="xs"
-                    c={'dimmed'}>
-                    no description
+                    size="sm"
+                    className={css.description}>
+                    {description || 'no description'}
                   </Text>
-                )}
-                {links && (
-                  <Stack
-                    gap={3}
-                    justify="stretch"
-                    align="stretch">
-                    {links.map((link) => (
-                      <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
-                        <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                          <Anchor
-                            href={link}
-                            target="_blank"
-                            fz="xs"
-                            truncate="end"
-                            display={'inline-block'}
-                            w={'100%'}>
-                            {link}
-                          </Anchor>
-                        </Box>
-                        <CopyButton value={link}>
-                          {({ copied, copy }) => (
-                            <Button
-                              size="compact-xs"
-                              fz={'10'}
-                              variant="light"
-                              onClick={copy}
-                              color={copied
-                                ? 'teal'
-                                : 'gray'}>
-                              {copied ? 'copied' : 'copy'}
-                            </Button>
-                          )}
-                        </CopyButton>
-                      </Group>
-                    ))}
-                  </Stack>
-                )}
-              </>
-            )}
-          </Stack>
-        </Paper>
-      </motion.div>
+                </Spoiler>
+              )}
+              {!description && (
+                <Text
+                  component={'div'}
+                  size="xs"
+                  c={'dimmed'}>
+                  no description
+                </Text>
+              )}
+              {links && (
+                <Stack
+                  gap={3}
+                  justify="stretch"
+                  align="stretch">
+                  {links.map((link) => (
+                    <Group key={link} wrap="nowrap" align="center" gap={'sm'}>
+                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
+                        <Anchor
+                          href={link}
+                          target="_blank"
+                          fz="xs"
+                          truncate="end"
+                          display={'inline-block'}
+                          w={'100%'}>
+                          {link}
+                        </Anchor>
+                      </Box>
+                      <CopyButton value={link}>
+                        {({ copied, copy }) => (
+                          <Button
+                            size="compact-xs"
+                            fz={'10'}
+                            variant="light"
+                            onClick={copy}
+                            color={copied
+                              ? 'teal'
+                              : 'gray'}>
+                            {copied ? 'copied' : 'copy'}
+                          </Button>
+                        )}
+                      </CopyButton>
+                    </Group>
+                  ))}
+                </Stack>
+              )}
+            </>
+          )}
+        </Card>
+      </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,40 @@
 import { Card } from '@mantine/core'
-import { useOnSelectionChange } from '@xyflow/react'
 import clsx from 'clsx'
+import { DEV } from 'esm-env'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, motion } from 'framer-motion'
-import { useState } from 'react'
-import { isNullish, isTruthy } from 'remeda'
+import { AnimatePresence, m } from 'framer-motion'
+import { useCallback } from 'react'
+import { reduce } from 'remeda'
+import useTilg from 'tilg'
 import { useDiagramState } from '../state'
+import { useXYStore } from '../xyflow/hooks'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 
+const Empty = [] as string[]
 export default 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 { isFocusDisabled, viewId } = useDiagramState(s => ({
+    viewId: s.view.id,
+    isFocusDisabled: s.focusedNodeId === null && s.activeDynamicViewStep === null
+  }))
+  const selectedNodes = useXYStore(
+    useCallback(s =>
+      s.elementsSelectable && isFocusDisabled
+        ? reduce(s.nodes, (acc, n) => {
+          if (n.selected) {
+            acc.push(n.id)
+          }
+          return acc
+        }, [] as string[])
+        : Empty, [isFocusDisabled]),
+    shallowEqual
+  )
+  DEV && useTilg()
   return (
     <AnimatePresence mode="wait">
-      {isFocusDisabled && selectedNodes.length > 0 && (
-        <motion.div
+      {selectedNodes.length > 0 && (
+        <m.div
+          key={viewId}
           initial={{ opacity: 0, scale: 0.85 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{
@@ -41,7 +50,7 @@ export default function OptionsPanel() {
           <Card shadow="sm">
             <NodeOptions selectedNodeIds={selectedNodes} />
           </Card>
-        </motion.div>
+        </m.div>
       )}
     </AnimatePresence>
   )

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]),