@likec4/diagram 1.12.1 → 1.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/diagram",
-  "version": "1.12.1",
+  "version": "1.12.2",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -30,11 +30,11 @@
     "clean": "rm -r -f -g 'dist/*' .tsbuildinfo"
   },
   "dependencies": {
-    "@likec4/core": "1.12.1",
+    "@likec4/core": "1.12.2",
     "@lume/kiwi": "^0.4.4",
     "@mantine/vanilla-extract": "7.13.2",
     "@react-hookz/web": "^24.0.4",
-    "@tabler/icons-react": "^3.19.0",
+    "@tabler/icons-react": "3.17.0",
     "@vanilla-extract/css": "^1.16.0",
     "@vanilla-extract/css-utils": "^0.1.4",
     "@vanilla-extract/dynamic": "^2.1.2",
@@ -58,7 +58,7 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@likec4/tsconfig": "1.12.1",
+    "@likec4/tsconfig": "1.12.2",
     "@mantine/core": "7.13.2",
     "@mantine/hooks": "7.13.2",
     "@types/bezier-js": "^4.1.3",

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

@@ -10,10 +10,17 @@ import {
   Text,
   UnstyledButton
 } from '@mantine/core'
-import { clampUseMovePosition, useMove, type UseMovePosition, useUncontrolled } from '@mantine/hooks'
+import {
+  clampUseMovePosition,
+  useHover,
+  useMergedRef,
+  useMove,
+  type UseMovePosition,
+  useUncontrolled
+} from '@mantine/hooks'
 import { useDebouncedCallback } from '@react-hookz/web'
 import { IconLayoutDashboard } from '@tabler/icons-react'
-import { useState } from 'react'
+import { forwardRef, useState } from 'react'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { ActionIcon, Tooltip } from './_shared'
 import * as css from './styles.css'
@@ -32,6 +39,8 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
     viewId
   } = useDiagramState(selector)
 
+  const { ref, hovered: isSpacingHovered } = useHover()
+
   const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
     controlsRefs[name] = node
     setControlsRefs(controlsRefs)
@@ -51,6 +60,10 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   }
 
   const setSpacing = (nodeSep: number, rankSep: number) => {
+    // Force fitDiagram
+    store.setState({
+      viewportChanged: false
+    })
     store.getState().onChange?.({
       change: {
         op: 'change-autolayout',
@@ -82,7 +95,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
           </ActionIcon>
         </Tooltip>
       </PopoverTarget>
-      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6}>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={6} opacity={isSpacingHovered ? 0.6 : 1}>
         <Box pos={'relative'} ref={setRootRef}>
           <FloatingIndicator
             target={controlsRefs[autoLayout.direction]}
@@ -110,6 +123,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
             <Text inline fz={'xs'} c={'dimmed'} fw={500}>Spacing:</Text>
           </Box>
           <SpacingSliders
+            ref={ref}
             isVertical={autoLayout.direction === 'TB' || autoLayout.direction === 'BT'}
             key={viewId}
             nodeSep={autoLayout.nodeSep}
@@ -122,17 +136,18 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
   )
 }
 
-const SpacingSliders = ({
-  isVertical,
-  nodeSep,
-  rankSep,
-  onChange
-}: {
+const MAX_SPACING = 400
+const SpacingSliders = forwardRef<HTMLDivElement, {
   isVertical: boolean
   nodeSep: number | undefined
   rankSep: number | undefined
   onChange: (nodeSep: number, rankSep: number) => void
-}) => {
+}>(({
+  isVertical,
+  nodeSep,
+  rankSep,
+  onChange
+}, _ref) => {
   if (!isVertical) {
     ;[nodeSep, rankSep] = [rankSep, nodeSep]
   }
@@ -142,7 +157,7 @@ const SpacingSliders = ({
       if (!isVertical) {
         ;[x, y] = [y, x]
       }
-      onChange(Math.round(x * 500), Math.round(y * 500))
+      onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
     },
     [onChange, isVertical],
     150,
@@ -151,22 +166,24 @@ const SpacingSliders = ({
 
   const [value, setValue] = useUncontrolled({
     defaultValue: clampUseMovePosition({
-      x: (nodeSep ?? 250) / 500,
-      y: (rankSep ?? 250) / 500
+      x: (nodeSep ?? 100) / MAX_SPACING,
+      y: (rankSep ?? 120) / MAX_SPACING
     }),
     onChange: propagateChange
   })
 
   const { ref } = useMove(setValue)
 
-  let nodeSepValue = Math.round(value.x * 500)
-  let rankSepValue = Math.round(value.y * 500)
+  let nodeSepValue = Math.round(value.x * MAX_SPACING)
+  let rankSepValue = Math.round(value.y * MAX_SPACING)
   if (!isVertical) {
     ;[nodeSepValue, rankSepValue] = [rankSepValue, nodeSepValue]
   }
 
+  const mergedRef = useMergedRef(ref, _ref)
+
   return (
-    <Box ref={ref} className={css.spacingSliderBody} pt={'100%'}>
+    <Box ref={mergedRef} className={css.spacingSliderBody} pt={'100%'}>
       <Box
         className={css.spacingSliderThumb}
         style={{
@@ -179,4 +196,4 @@ const SpacingSliders = ({
       </Box>
     </Box>
   )
-}
+})