@likec4/diagram 1.22.0 → 1.22.1

package/src/likec4diagram/state/syncManualLayoutActor.ts

@@ -1,5 +1,5 @@
 import type { ViewChange, ViewId } from '@likec4/core'
-import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
+import { type Rect, boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { hasAtLeast, reduce } from 'remeda'
 import {
   type ActorRef,
@@ -132,12 +132,7 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
 
   const { nodeLookup } = xystore.getState()
   const movedNodes = new Set<string>()
-  let bounds = {
-    x: 0,
-    y: 0,
-    width: 1,
-    height: 1,
-  }
+  let bounds: Rect | undefined
 
   const nodes = reduce([...nodeLookup.values()], (acc, node) => {
     const dimensions = getNodeDimensions(node)
@@ -154,7 +149,7 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
       width: Math.ceil(dimensions.width),
       height: Math.ceil(dimensions.height),
     }
-    bounds = getBoundsOfRects(bounds, rect)
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
     return acc
   }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
 
@@ -202,10 +197,12 @@ function createViewChange(parentContext: Machine.DiagramContext): ViewChange.Sav
       x2: Math.ceil(Math.max(...allX)),
       y2: Math.ceil(Math.max(...allY)),
     })
-    bounds = getBoundsOfRects(bounds, rect)
+    bounds = bounds ? getBoundsOfRects(bounds, rect) : rect
     return acc
   }, {} as ViewChange.SaveManualLayout['layout']['edges'])
 
+  bounds ??= view.bounds
+
   return {
     op: 'save-manual-layout',
     layout: {

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -16,6 +16,7 @@ import { LayoutDriftNotification } from './LayoutDriftNotification'
 import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import { NavigationButtons } from './NavigationButtons'
 import * as css from './styles.css'
+import { ToggleReadonly } from './ToggleReadonly'
 
 export const Controls = memo(() => {
   const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
@@ -78,6 +79,7 @@ export const Controls = memo(() => {
               </ActionIcon>
             </Tooltip>
           )}
+          {enableControls && <ToggleReadonly />}
           {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
           {enableControls && notReadOnly && (
             <>

package/src/likec4diagram/ui/controls/ToggleReadonly.tsx

@@ -0,0 +1,31 @@
+import { IconLock, IconLockOpen2 } from '@tabler/icons-react'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
+import type { DiagramContext } from '../../state/machine'
+import { ActionIcon, Tooltip } from './_shared'
+
+const selector = (state: DiagramContext) => ({
+  visible: state.features.enableReadOnly !== true,
+  isReadOnly: state.toggledFeatures.enableReadOnly ?? state.features.enableReadOnly,
+})
+
+export const ToggleReadonly = () => {
+  const { visible, isReadOnly } = useDiagramContext(selector)
+  const diagram = useDiagram()
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <Tooltip label={isReadOnly ? 'Enable editing' : 'Disable editing'}>
+      <ActionIcon
+        onClick={e => {
+          e.stopPropagation()
+          diagram.toggleFeature('ReadOnly')
+        }}>
+        {isReadOnly ? <IconLock /> : <IconLockOpen2 />}
+      </ActionIcon>
+    </Tooltip>
+  )
+}