@likec4/diagram 1.7.2 → 1.7.4

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.css.ts

@@ -18,11 +18,11 @@ export const card = style({
   backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
   '@media': {
     [mantine.largerThan('sm')]: {
-      minWidth: 300,
+      minWidth: 250,
       maxWidth: '90vw'
     },
     [mantine.largerThan('md')]: {
-      minWidth: 400,
+      minWidth: 350,
       maxWidth: '70vw'
     }
   },

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) => ({
@@ -40,52 +40,70 @@ export default function DiagramTitlePanel() {
           radius="sm"
           className={css.card}
           withBorder
-          p={'md'}
-          pb={isCollapsed ? 'sm' : 'md'}
+          p={isCollapsed ? 'sm' : 'md'}
           onDoubleClick={e => e.stopPropagation()}>
-          <CardSection mb={isCollapsed ? 10 : 'sm'}>
-            <Button
-              fullWidth
-              size="xs"
-              h={'sm'}
-              py={2}
-              radius={'0'}
-              variant={isCollapsed ? 'light' : '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 && (
+            <CardSection>
+              <Button
+                fullWidth
+                justify="stretch"
+                size="sm"
+                py={2}
+                radius={'0'}
+                variant={'subtle'}
+                color="dark"
+                onClick={toggle}
+              >
+                <Text inline fw={500} fz={'xs'} c="gray">
+                  {title}
+                </Text>
+              </Button>
+            </CardSection>
+          )}
           {!isCollapsed && (
             <>
+              <CardSection mb={'sm'}>
+                <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={'sm'}>
+                <Text
+                  component={'div'}
+                  flex={'1'}
+                  size={'md'}
+                  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>
               {description && (
                 <Spoiler
                   maxHeight={42}

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}