@likec4/diagram 1.7.2 → 1.7.3

package/src/state/diagramStore.ts

@@ -1,4 +1,4 @@
-import type { DiagramNode, DiagramView, Fqn, NodeId, ViewID } from '@likec4/core'
+import type { DiagramNode, DiagramView, Fqn, NodeId, ViewChange, ViewID } from '@likec4/core'
 import { getBBoxCenter, invariant, nonexhaustive, nonNullable, StepEdgeId } from '@likec4/core'
 import {
   applyEdgeChanges,
@@ -16,16 +16,16 @@ import type { ConditionalKeys, Exact, Except, RequiredKeysOf, Simplify } from 't
 import { devtools, subscribeWithSelector } from 'zustand/middleware'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
+import type { XYStoreApi } from '../hooks/useXYFlow'
 import type {
-  Changes,
   DiagramNodeWithNavigate,
   ElementIconRenderer,
-  LikeC4DiagramEventHandlers
+  LikeC4DiagramEventHandlers,
+  WhereOperator
 } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
-import type { XYStoreApi } from '../xyflow/hooks'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
-import { bezierControlPoints, isSamePoint, toDomPrecision } from '../xyflow/utils'
+import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
 type RequiredOrNull<T> = {
@@ -36,6 +36,7 @@ export type DiagramInitialState = {
   view: DiagramView
   readonly: boolean
   showElementLinks: boolean
+  showNavigationButtons: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
   zoomable: boolean
@@ -45,6 +46,7 @@ export type DiagramInitialState = {
   experimentalEdgeEditing: boolean
   enableFocusMode: boolean
   renderIcon: ElementIconRenderer | null
+  whereFilter: WhereOperator<string, string> | null
   // If Dynamic View
   enableDynamicViewWalkthrough: boolean
 
@@ -108,7 +110,7 @@ export type DiagramState = Simplify<
     resetLastClicked: () => void
 
     getElement(id: Fqn): DiagramNode | null
-    triggerChangeElementStyle: (change: Changes.ChangeElementStyle) => void
+    triggerChangeElementStyle: (change: ViewChange.ChangeElementStyle) => void
 
     /**
      * @returns true if there was pending save layout
@@ -166,6 +168,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
     xynodes,
     xyedges
   } = diagramViewToXYFlowData(props.view, {
+    where: props.whereFilter,
     draggable: props.nodesDraggable,
     selectable: props.nodesSelectable
   })
@@ -208,6 +211,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               xyflow,
               xystore,
               dimmed,
+              whereFilter,
               view: current,
               lastOnNavigate,
               navigationHistory,
@@ -224,11 +228,6 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               xynodes
             } = get()
 
-            if (shallowEqual(current, nextView)) {
-              DEV && console.debug('store: skip updateView')
-              return
-            }
-
             if (viewSyncDebounceTimeout !== null) {
               clearTimeout(viewSyncDebounceTimeout)
               viewSyncDebounceTimeout = null
@@ -329,14 +328,25 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
             }
 
             const update = diagramViewToXYFlowData(nextView, {
+              where: whereFilter,
               draggable: nodesDraggable,
               selectable: nodesSelectable
             })
 
             update.xynodes = update.xynodes.map(update => {
               const existing = xynodes.find(n => n.id === update.id)
-              if (existing && existing.type === update.type && eq(existing.parentId ?? null, update.parentId ?? null)) {
-                if (eq(existing.data.element, update.data.element)) {
+              if (
+                existing
+                && existing.type === update.type
+                && eq(existing.parentId ?? null, update.parentId ?? null)
+              ) {
+                if (
+                  existing.hidden === update.hidden
+                  && existing.width === update.width
+                  && existing.height === update.height
+                  && eq(existing.position, update.position)
+                  && eq(existing.data.element, update.data.element)
+                ) {
                   return existing
                 }
                 return {
@@ -352,21 +362,27 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               update.xyedges = update.xyedges.map((update): XYFlowEdge => {
                 const existing = xyedges.find(n => n.id === update.id)
                 if (existing) {
-                  if (eq(existing.data, update.data)) {
+                  if (
+                    existing.hidden === update.hidden
+                    && eq(existing.data.label, update.data.label)
+                    && eq(existing.data.controlPoints, update.data.controlPoints)
+                    && eq(existing.data.edge, update.data.edge)
+                  ) {
                     return existing
                   }
                   return {
                     ...existing,
-                    ...update
+                    ...update,
+                    data: {
+                      ...existing.data,
+                      ...update.data
+                    }
                   }
                 }
                 return update
               })
             }
 
-            const hasChanges = !isSameView || !shallowEqual(update.xynodes, xynodes)
-              || !shallowEqual(update.xyedges, xyedges)
-
             set(
               {
                 isDynamicView: nextView.__ === 'dynamic',
@@ -382,8 +398,8 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
                 navigationHistory,
                 navigationHistoryIndex,
                 dimmed,
-                xynodes: hasChanges ? update.xynodes : xynodes,
-                xyedges: hasChanges ? update.xyedges : xyedges
+                xynodes: !isSameView || !shallowEqual(update.xynodes, xynodes) ? update.xynodes : xynodes,
+                xyedges: !isSameView || !shallowEqual(update.xyedges, xyedges) ? update.xyedges : xyedges
               },
               noReplace,
               isSameView ? 'update-view [same]' : 'update-view [another]'
@@ -563,10 +579,6 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               clearTimeout(viewSyncDebounceTimeout)
               set({ viewSyncDebounceTimeout: null })
             }
-            if (!onChange) {
-              DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
-              return
-            }
             const { nodeLookup } = xystore.getState()
             const movedNodes = new StringSet()
             let bounds = {
@@ -575,6 +587,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               width: 1,
               height: 1
             }
+
             const nodes = reduce([...nodeLookup.values()], (acc, node) => {
               const dimensions = getNodeDimensions(node)
               if (!isSamePoint(node.internals.positionAbsolute, node.data.element.position)) {
@@ -589,7 +602,8 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               }
               bounds = getBoundsOfRects(bounds, rect)
               return acc
-            }, {} as Changes.SaveManualLayout['layout']['nodes'])
+            }, {} as ViewChange.SaveManualLayout['layout']['nodes'])
+
             const edges = reduce(xyflow.getEdges(), (acc, { source, target, data }) => {
               let controlPoints = data.controlPoints
               const sourceOrTargetMoved = movedNodes.has(source) || movedNodes.has(target)
@@ -600,7 +614,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               if (data.edge.points.length === 0 && (!controlPoints || controlPoints.length === 0)) {
                 return acc
               }
-              const _updated: Changes.SaveManualLayout['layout']['edges'][string] = acc[data.edge.id] = {
+              const _updated: ViewChange.SaveManualLayout['layout']['edges'][string] = acc[data.edge.id] = {
                 points: data.edge.points
               }
               if (data.label?.bbox) {
@@ -615,8 +629,16 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               if (!sourceOrTargetMoved && data.edge.dotpos) {
                 _updated.dotpos = data.edge.dotpos
               }
-              const allX = [...data.edge.points.map(p => p[0]), ...(controlPoints ?? []).map(p => p.x)]
-              const allY = [...data.edge.points.map(p => p[1]), ...(controlPoints ?? []).map(p => p.y)]
+              const allX = [
+                ...data.edge.points.map(p => p[0]),
+                ...(controlPoints ?? []).map(p => p.x),
+                ...(_updated.labelBBox ? [_updated.labelBBox.x, _updated.labelBBox.x + _updated.labelBBox.width] : [])
+              ]
+              const allY = [
+                ...data.edge.points.map(p => p[1]),
+                ...(controlPoints ?? []).map(p => p.y),
+                ...(_updated.labelBBox ? [_updated.labelBBox.y, _updated.labelBBox.y + _updated.labelBBox.height] : [])
+              ]
               const rect = boxToRect({
                 x: Math.floor(Math.min(...allX)),
                 y: Math.floor(Math.min(...allY)),
@@ -625,14 +647,13 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               })
               bounds = getBoundsOfRects(bounds, rect)
               return acc
-            }, {} as Changes.SaveManualLayout['layout']['edges'])
+            }, {} as ViewChange.SaveManualLayout['layout']['edges'])
 
-            const change: Changes.SaveManualLayout = {
+            const change: ViewChange.SaveManualLayout = {
               op: 'save-manual-layout',
               layout: {
                 hash: view.hash,
                 autoLayout: view.autoLayout,
-
                 nodes,
                 edges,
                 ...bounds
@@ -643,14 +664,24 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
               console.debug('triggerSaveManualLayout', change)
             }
 
-            onChange({ change })
+            // If new view bounds are outside of the diagram bounds, update the view bounds
+            // and update edges, as
+            if (!isInside(bounds, view.bounds)) {
+              set(
+                {
+                  view: {
+                    ...view,
+                    bounds
+                  }
+                },
+                noReplace,
+                'update view bounds'
+              )
+            }
+            onChange?.({ change })
           },
           scheduleSaveManualLayout: () => {
-            let { viewSyncDebounceTimeout, onChange } = get()
-            if (!onChange) {
-              DEV && console.debug('ignore triggerSaveManualLayout, as no onChange handler is set')
-              return
-            }
+            let { viewSyncDebounceTimeout } = get()
             if (viewSyncDebounceTimeout) {
               clearTimeout(viewSyncDebounceTimeout)
             }
@@ -666,7 +697,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
           },
 
           triggerOnNavigateTo: (xynodeId, event) => {
-            const { view, xynodes, onNavigateTo } = get()
+            const { view, xynodes, onNavigateTo, cancelSaveManualLayout } = get()
             if (!onNavigateTo) {
               return
             }
@@ -674,6 +705,7 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
             invariant(xynode, `xynode not found: ${xynodeId}`)
             const element = view.nodes.find(({ id }) => id === xynodeId)
             invariant(element?.navigateTo, `node is not navigable: ${xynodeId}`)
+            cancelSaveManualLayout()
             set(
               {
                 lastClickedNodeId: xynodeId,
@@ -857,3 +889,6 @@ export function createDiagramStore<T extends Exact<DiagramInitialState, T>>(prop
     shallow
   )
 }
+
+export type DiagramZustandStore = ReturnType<typeof createDiagramStore>
+export type DiagramStoreApi = Readonly<Pick<DiagramZustandStore, 'getState' | 'setState' | 'subscribe'>>

package/src/ui/DiagramTitlePanel.tsx

@@ -3,7 +3,7 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { type DiagramState, useDiagramState } from '../state/hooks'
+import { type DiagramState, useDiagramState } from '../hooks'
 import * as css from './DiagramTitlePanel.css'
 
 const selector = (s: DiagramState) => ({

package/src/ui/DynamicViewWalkthrough.tsx

@@ -8,8 +8,7 @@ import {
 } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { isNullish, isNumber } from 'remeda'
-import { useDiagramState } from '../state/hooks'
-import { useXYStore } from '../xyflow/hooks/useXYFlow'
+import { useDiagramState, useXYStore } from '../hooks'
 import * as css from './DynamicViewWalkthrough.css'
 
 export function DynamicViewWalkthrough() {

package/src/ui/OptionsPanel.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
 import { AnimatePresence, m } from 'framer-motion'
 import { useState } from 'react'
-import { useDiagramState } from '../state/hooks'
+import { useDiagramState } from '../hooks/useDiagramState'
 import { NodeOptions } from './options/NodeOptions'
 import * as styles from './OptionsPanel.css'
 

package/src/ui/options/EdgeOptions.tsx

@@ -3,8 +3,7 @@ import { CheckIcon, ColorSwatch, Divider, Flex, rem, Stack, Text, Tooltip, Toolt
 import { shallowEqual } from 'fast-equals'
 import { memo } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
-import { useDiagramStoreApi } from '../../state/hooks'
-import { useXYEdgesData } from '../../xyflow/hooks/useXYFlow'
+import { useDiagramStoreApi, useXYEdgesData } from '../../hooks'
 import { type XYFlowEdge } from '../../xyflow/types'
 
 const {
@@ -41,20 +40,6 @@ export const EdgeOptions = memo<{ selectedEdgeIds: string[] }>(({ selectedEdgeId
   }
   const [firstEdge, ...rest] = edges
 
-  // // Makes sense to show opacity option only if there is at least one compound node
-  // const showOpacityOption = firstNode.type === 'compound'
-  //   && (rest.length === 0 || rest.every(node => node.type === 'compound'))
-
-  // const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
-  //   const targets = edges.map(node => node.data.element.id)
-  //   invariant(hasAtLeast(targets, 1), 'At least one target is required')
-  //   diagramApi.getState().triggerChangeElementStyle({
-  //     op: 'change-element-style',
-  //     style,
-  //     targets
-  //   })
-  // }
-
   return (
     <Stack gap={'xs'}>
       <div>

package/src/ui/options/NodeOptions.tsx

@@ -5,14 +5,17 @@ import {
   ElementShapes,
   invariant,
   type NonEmptyArray,
-  type ThemeColor
+  type ThemeColor,
+  type ViewChange
 } from '@likec4/core'
 import {
+  ActionIcon,
   Box,
   CheckIcon,
   ColorSwatch,
   Divider,
   Flex,
+  Group,
   rem,
   SegmentedControl,
   Select,
@@ -23,13 +26,12 @@ import {
   Tooltip,
   TooltipGroup
 } from '@mantine/core'
+import { IconFileSymlink } from '@tabler/icons-react'
 import { shallowEqual } from 'fast-equals'
 import { memo, useState } from 'react'
 import { hasAtLeast, keys, takeWhile } from 'remeda'
+import { useDiagramStoreApi, useXYNodesData } from '../../hooks'
 import { useUpdateEffect } from '../../hooks/useUpdateEffect'
-import type { Changes } from '../../LikeC4Diagram.props'
-import { useDiagramStoreApi } from '../../state/hooks'
-import { useXYNodesData } from '../../xyflow/hooks'
 import { XYFlowNode } from '../../xyflow/types'
 
 const {
@@ -71,11 +73,13 @@ export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeId
 
   const [firstNode, ...rest] = nodes
 
+  const showGoToSource = rest.length === 0 && diagramApi.getState().onOpenSourceElement!!
+
   // Makes sense to show opacity option only if there is at least one compound node
   const showOpacityOption = firstNode.type === 'compound'
     && (rest.length === 0 || rest.every(node => node.type === 'compound'))
 
-  const triggerChange = (style: Changes.ChangeElementStyle['style']) => {
+  const triggerChange = (style: ViewChange.ChangeElementStyle['style']) => {
     const targets = nodes.map(node => node.data.element.id)
     invariant(hasAtLeast(targets, 1), 'At least one target is required')
     diagramApi.getState().triggerChangeElementStyle({
@@ -87,14 +91,35 @@ export const NodeOptions = memo<{ selectedNodeIds: string[] }>(({ selectedNodeId
 
   return (
     <Stack gap={'xs'}>
-      <div>
-        <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
-          ELEMENT{rest.length > 0 ? 'S' : ``}
-        </Text>
-        <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
-          {rest.length === 0 ? firstNode.data.element.title : `[ multiple ]`}
-        </Text>
-      </div>
+      <Group wrap="nowrap" align="flex-start">
+        <Box flex={1}>
+          <Text fz={rem(9)} fw={'500'} c={'dimmed'}>
+            ELEMENT{rest.length > 0 ? 'S' : ``}
+          </Text>
+          <Text size="xs" c={rest.length > 0 ? 'dimmed' : ''} truncate>
+            {rest.length === 0 ? firstNode.data.element.title : `[ multiple ]`}
+          </Text>
+        </Box>
+        {showGoToSource && (
+          <Box flex={0}>
+            <ActionIcon
+              size={'sm'}
+              variant="light"
+              color="gray"
+              onClick={e => {
+                e.stopPropagation()
+                diagramApi.getState().onOpenSourceElement?.(firstNode.data.element.id)
+              }}>
+              <IconFileSymlink
+                stroke={1.2}
+                style={{
+                  width: '70%',
+                  height: '70%'
+                }} />
+            </ActionIcon>
+          </Box>
+        )}
+      </Group>
       {showShapeOption && (
         <ShapeOption
           nodes={nodes}

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

@@ -0,0 +1,131 @@
+import type { AutoLayoutDirection } from '@likec4/core'
+import {
+  ActionIcon as MantineActionIcon,
+  Box,
+  FloatingIndicator,
+  Group,
+  Popover,
+  PopoverDropdown,
+  type PopoverProps,
+  PopoverTarget,
+  Stack,
+  Text,
+  Tooltip as MantineTooltip,
+  TooltipGroup
+} from '@mantine/core'
+import { IconArrowBigDownLines, IconLayoutDashboard } from '@tabler/icons-react'
+import { useState } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../../hooks/useDiagramState'
+import * as css from './styles.css'
+
+const ActionIcon = MantineActionIcon.withProps({
+  size: 'md',
+  variant: 'subtle',
+  color: 'gray'
+})
+
+const Tooltip = MantineTooltip.withProps({
+  color: 'gray',
+  fz: 'xs',
+  position: 'right',
+  openDelay: 300,
+  label: '',
+  children: null,
+  offset: 5,
+  transitionProps: { transition: 'fade', duration: 200 }
+})
+
+export const ChangeAutoLayoutButton = (props: PopoverProps) => {
+  const store = useDiagramStoreApi()
+  const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null)
+  const [controlsRefs, setControlsRefs] = useState<Record<AutoLayoutDirection, HTMLButtonElement | null>>({} as any)
+  const autoLayout = useDiagramState(s => s.view.autoLayout)
+
+  const setControlRef = (name: AutoLayoutDirection) => (node: HTMLButtonElement) => {
+    controlsRefs[name] = node
+    setControlsRefs(controlsRefs)
+  }
+
+  const setAutoLayout = (layout: AutoLayoutDirection) => (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation()
+    store.getState().onChange?.({
+      change: {
+        op: 'change-autolayout',
+        layout
+      }
+    })
+  }
+
+  return (
+    <Popover
+      position="right-start"
+      clickOutsideEvents={[
+        'pointerdown'
+      ]}
+      radius="xs"
+      shadow="lg"
+      offset={{
+        mainAxis: 10
+      }}
+      {...props}>
+      <PopoverTarget>
+        <MantineActionIcon
+          className="action-icon"
+          variant="light"
+          color="gray">
+          <IconLayoutDashboard stroke={1.3} />
+        </MantineActionIcon>
+      </PopoverTarget>
+      <PopoverDropdown className="likec4-top-left-panel" p={8} pt={4}>
+        <Box pos={'relative'} ref={setRootRef}>
+          <FloatingIndicator
+            target={controlsRefs[autoLayout]}
+            parent={rootRef}
+            className={css.autolayoutIndicator}
+          />
+          <Box mb={10}>
+            <Text inline fz={'xs'} c={'dimmed'} fw={500}>Auto layout:</Text>
+          </Box>
+          <TooltipGroup openDelay={100}>
+            <Stack align="center" gap={1}>
+              <Tooltip label="Top to Bottom">
+                <ActionIcon
+                  className={css.autolayoutIcon}
+                  ref={setControlRef('TB')}
+                  onClick={setAutoLayout('TB')}>
+                  <IconArrowBigDownLines stroke={1.3} />
+                </ActionIcon>
+              </Tooltip>
+              <Group gap={30}>
+                <Tooltip label="Left to Right">
+                  <ActionIcon
+                    className={css.autolayoutIcon}
+                    ref={setControlRef('LR')}
+                    onClick={setAutoLayout('LR')}>
+                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '270deg' }} />
+                  </ActionIcon>
+                </Tooltip>
+                <Tooltip label="Right to Left">
+                  <ActionIcon
+                    className={css.autolayoutIcon}
+                    ref={setControlRef('RL')}
+                    onClick={setAutoLayout('RL')}>
+                    <IconArrowBigDownLines stroke={1.3} style={{ rotate: '90deg' }} />
+                  </ActionIcon>
+                </Tooltip>
+              </Group>
+              <Tooltip label="Bottom to Top">
+                <ActionIcon
+                  className={css.autolayoutIcon}
+                  ref={setControlRef('BT')}
+                  onClick={setAutoLayout('BT')}>
+                  <IconArrowBigDownLines stroke={1.3} style={{ rotate: '180deg' }} />
+                </ActionIcon>
+              </Tooltip>
+            </Stack>
+          </TooltipGroup>
+        </Box>
+      </PopoverDropdown>
+    </Popover>
+  )
+}