@likec4/diagram 1.19.1 → 1.20.0

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -0,0 +1,247 @@
+import type { Fqn } from '@likec4/core'
+import { ActionIcon, Box, Group } from '@mantine/core'
+import { useCallbackRef, useStateHistory } from '@mantine/hooks'
+import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
+import { Panel, ReactFlowProvider } from '@xyflow/react'
+import clsx from 'clsx'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { memo, useEffect, useRef } from 'react'
+import type { SnapshotFrom } from 'xstate'
+import { BaseXYFlow } from '../../base/BaseXYFlow'
+import { useRelationshipsView } from './-useRelationshipsView'
+import type { RelationshipsBrowserTypes as Types } from './_types'
+import type { RelationshipsBrowserActorRef } from './actor'
+import { edgeTypes } from './custom/edgeTypes'
+import { nodeTypes } from './custom/nodeTypes'
+import {
+  RelationshipsBrowserActorContext,
+  useRelationshipsBrowser,
+  useRelationshipsBrowserState,
+} from './hooks'
+import { SelectElement } from './SelectElement'
+
+export type RelationshipsBrowserProps = {
+  actorRef: RelationshipsBrowserActorRef
+}
+export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
+  // const actorRef = useDiagramActorState(s => s.children.relationshipsBrowser)
+  // if (actorRef == null) {
+  //   return null
+  // }
+  const initialRef = useRef<{
+    defaultNodes: Types.Node[]
+    defaultEdges: Types.Edge[]
+  }>(null)
+
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultNodes: [],
+      defaultEdges: [],
+    }
+  }
+
+  return (
+    <RelationshipsBrowserActorContext.Provider value={actorRef}>
+      <ReactFlowProvider {...initialRef.current}>
+        <RelationshipsBrowserInner />
+      </ReactFlowProvider>
+    </RelationshipsBrowserActorContext.Provider>
+  )
+}
+
+const selector = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
+  subjectId: state.context.subject,
+  initialized: state.context.initialized,
+  scope: state.context.scope,
+  nodes: state.context.xynodes,
+  edges: state.context.xyedges,
+  closeable: state.context.closeable,
+  enableNavigationMenu: state.context.enableNavigationMenu,
+})
+
+const RelationshipsBrowserInner = memo(() => {
+  const browser = useRelationshipsBrowser()
+  const {
+    subjectId,
+    initialized,
+    scope,
+    nodes,
+    edges,
+    closeable,
+    enableNavigationMenu,
+  } = useRelationshipsBrowserState(selector)
+
+  const layouted = useRelationshipsView(subjectId)
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId)
+    }
+  }, [subjectId])
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      browser.navigateTo(historySubjectId)
+    }
+  }, [historySubjectId])
+
+  useEffect(() => {
+    browser.send({ type: 'update.view', layouted })
+  }, [layouted])
+
+  const hasStepBack = current > 0
+  const hasStepForward = current + 1 < history.length
+
+  return (
+    <LayoutGroup>
+      <BaseXYFlow<Types.Node, Types.Edge>
+        id="relationships-browser"
+        nodes={nodes}
+        edges={edges}
+        className={clsx(initialized ? 'initialized' : 'not-initialized')}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        fitViewPadding={0.05}
+        onInit={useCallbackRef((instance) => {
+          browser.send({ type: 'xyflow.init', instance })
+        })}
+        onNodeClick={useCallbackRef((e, node) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.nodeClick', node })
+        })}
+        onEdgeClick={useCallbackRef((e, edge) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.edgeClick', edge })
+        })}
+        onPaneClick={useCallbackRef((e) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.paneClick' })
+        })}
+        onDoubleClick={useCallbackRef(e => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.paneDblClick' })
+        })}
+        onViewportResize={() => {
+          browser.send({ type: 'xyflow.resized' })
+        }}
+        onNodesChange={useCallbackRef((changes) => {
+          browser.send({ type: 'xyflow.applyNodeChages', changes })
+        })}
+        onEdgesChange={useCallbackRef((changes) => {
+          browser.send({ type: 'xyflow.applyEdgeChages', changes })
+        })}
+        nodesDraggable={false}
+        fitView={false}
+        pannable
+        zoomable
+      >
+        <TopLeftPanel
+          enableNavigationMenu={enableNavigationMenu}
+          subjectId={subjectId}
+          hasStepBack={hasStepBack}
+          hasStepForward={hasStepForward}
+          onStepBack={() => historyOps.back()}
+          onStepForward={() => historyOps.forward()}
+        />
+        {closeable && (
+          <Panel position="top-right">
+            <ActionIcon
+              variant="default"
+              color="gray"
+              // color="gray"
+              // size={'lg'}
+              // data-autofocus
+              // autoFocus
+              onClick={(e) => {
+                e.stopPropagation()
+                browser.close()
+              }}>
+              <IconX />
+            </ActionIcon>
+          </Panel>
+        )}
+      </BaseXYFlow>
+    </LayoutGroup>
+  )
+})
+
+type TopLeftPanelProps = {
+  enableNavigationMenu: boolean
+  subjectId: Fqn
+  hasStepBack: boolean
+  hasStepForward: boolean
+  onStepBack: () => void
+  onStepForward: () => void
+}
+const TopLeftPanel = ({
+  enableNavigationMenu,
+  subjectId,
+  hasStepBack,
+  hasStepForward,
+  onStepBack,
+  onStepForward,
+}: TopLeftPanelProps) => {
+  const browser = useRelationshipsBrowser()
+  return (
+    <Panel position="top-left">
+      <Group gap={4} wrap={'nowrap'}>
+        <AnimatePresence mode="popLayout">
+          {hasStepBack && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(-5px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0.05,
+                transform: 'translateX(-10px)',
+              }}
+              key={'back'}>
+              <ActionIcon
+                variant="default"
+                color="gray"
+                onClick={e => {
+                  e.stopPropagation()
+                  onStepBack()
+                }}>
+                <IconChevronLeft />
+              </ActionIcon>
+            </m.div>
+          )}
+          {hasStepForward && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(5px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0,
+                transform: 'translateX(5px)',
+              }}
+              key={'forward'}>
+              <ActionIcon
+                variant="default"
+                color="gray"
+                onClick={e => {
+                  e.stopPropagation()
+                  onStepForward()
+                }}>
+                <IconChevronRight />
+              </ActionIcon>
+            </m.div>
+          )}
+          {enableNavigationMenu && (
+            <Group gap={'xs'} wrap={'nowrap'} ml={'sm'}>
+              <Box fz={'xs'} fw={'500'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
+              <SelectElement
+                subjectId={subjectId}
+                onSelect={(id) => browser.navigateTo(id)}
+                viewId={browser.getState().scope?.id ?? '' as any}
+                scope={'global'}
+              />
+            </Group>
+          )}
+        </AnimatePresence>
+      </Group>
+    </Panel>
+  )
+}

package/src/overlays/{relationships-of → relationships-browser}/SelectElement.css.ts

@@ -2,17 +2,24 @@ import { style } from '@vanilla-extract/css'
 import { mantine, whereDark } from '../../theme-vars'
 
 export const node = style({
-  margin: 0
+  margin: 0,
 })
 
 export const label = style({
   ':hover': {
-    backgroundColor: mantine.colors.gray[0]
+    backgroundColor: mantine.colors.gray[0],
   },
   selectors: {
     [`${whereDark} &:hover`]: {
       backgroundColor: mantine.colors.defaultHover,
-      color: mantine.colors.white
-    }
-  }
+      color: mantine.colors.white,
+    },
+  },
+})
+
+export const scrollArea = style({
+  maxHeight: [
+    '70vh',
+    'calc(100cqh - 70px)',
+  ],
 })

package/src/overlays/{relationships-of → relationships-browser}/SelectElement.tsx

@@ -1,4 +1,4 @@
-import { ancestorsFqn, type Element, type Fqn, type ViewId } from '@likec4/core'
+import { type Fqn, type ViewId, ancestorsFqn } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -11,36 +11,38 @@ import {
   Text,
   Tree,
   useComputedColorScheme,
-  useTree
+  useTree,
 } from '@mantine/core'
 import { IconChevronRight, IconSelector } from '@tabler/icons-react'
 import { useEffect, useRef } from 'react'
-import { useLikeC4ElementsTree } from '../../likec4model'
+import { useLikeC4ElementsTree, useLikeC4Model } from '../../likec4model'
 import * as classes from './SelectElement.css'
 
 export const SelectElement = ({
-  subject,
+  subjectId,
   viewId,
   scope,
-  onSelect
+  onSelect,
 }: {
-  subject: Element
+  subjectId: Fqn
   viewId: ViewId
   scope: 'global' | 'view'
   onSelect: (id: Fqn) => void
 }) => {
   const viewport = useRef<HTMLDivElement>(null)
+  const model = useLikeC4Model(true)
+  const subject = model.findElement(subjectId)
   const data = useLikeC4ElementsTree(scope === 'view' ? viewId : undefined)
   const tree = useTree({
-    multiple: false
+    multiple: false,
   })
 
   useEffect(() => {
-    ancestorsFqn(subject.id).reverse().forEach(id => {
+    ancestorsFqn(subjectId).reverse().forEach(id => {
       tree.expand(id)
     })
-    tree.select(subject.id)
-  }, [subject.id])
+    tree.select(subjectId)
+  }, [subjectId])
 
   const theme = useComputedColorScheme()
 
@@ -54,7 +56,7 @@ export const SelectElement = ({
       clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
       onOpen={() => {
         setTimeout(() => {
-          const item = viewport.current?.querySelector(`[data-value="${subject.id}"]`)
+          const item = viewport.current?.querySelector(`[data-value="${subjectId}"]`)
           console.log('item', item)
           item?.scrollIntoView({ behavior: 'instant', block: 'nearest' })
         }, 100)
@@ -70,11 +72,11 @@ export const SelectElement = ({
           style={{ padding: '0.25rem 0.75rem' }}
           rightSection={<IconSelector size={16} />}
         >
-          {subject.title}
+          {subject?.title ?? '???'}
         </Button>
       </PopoverTarget>
       <PopoverDropdown p={0} miw={250} maw={400}>
-        <ScrollAreaAutosize mah={'70vh'} scrollbars="y" type="never" viewportRef={viewport}>
+        <ScrollAreaAutosize scrollbars="y" type="never" viewportRef={viewport} className={classes.scrollArea}>
           <Tree
             allowRangeSelection={false}
             selectOnClick={false}
@@ -85,8 +87,8 @@ export const SelectElement = ({
             styles={{
               label: {
                 paddingTop: 5,
-                paddingBottom: 6
-              }
+                paddingBottom: 6,
+              },
             }}
             renderNode={({ node, selected, expanded, elementProps, hasChildren }) => (
               <Group gap={2} wrap="nowrap" {...elementProps} py="3">
@@ -96,14 +98,14 @@ export const SelectElement = ({
                   // color={theme === 'light' ? 'gray' : 'gray'}
                   c={'dimmed'}
                   style={{
-                    visibility: hasChildren ? 'visible' : 'hidden'
+                    visibility: hasChildren ? 'visible' : 'hidden',
                   }}>
                   <IconChevronRight
                     stroke={3.5}
                     style={{
                       transition: 'transform 150ms ease',
                       transform: `rotate(${expanded ? '90deg' : '0'})`,
-                      width: '80%'
+                      width: '80%',
                     }} />
                 </ActionIcon>
                 <Box

package/src/overlays/relationships-browser/_types.ts

@@ -0,0 +1,89 @@
+import type { Color, DiagramNode, Fqn, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
+
+export namespace RelationshipsBrowserTypes {
+  export type Column = 'incomers' | 'subjects' | 'outgoers'
+
+  /**
+   * The node's incoming and outgoing ports
+   */
+  export type Ports = {
+    in: string[]
+    out: string[]
+  }
+
+  export type ElementNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'technology'
+        | 'description'
+        | 'color'
+        | 'shape'
+        | 'width'
+        | 'height'
+        | 'navigateTo'
+      >
+    >
+    & {
+      column: Column
+      fqn: Fqn
+      icon: string | null
+      ports: Ports
+    }
+  >
+
+  export type CompoundNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'color'
+        | 'shape'
+        | 'style'
+      >
+    >
+    & {
+      column: Column
+      fqn: Fqn
+      depth: number
+      icon: string | null
+      ports: Ports
+    }
+  >
+
+  export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
+
+  export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
+
+  // export type NonEmptyNode = ElementNode | CompoundNode
+
+  export type EmptyNodeData = Base.NodeData<{
+    column: Column
+  }>
+
+  export type EmptyNode = ReactFlowNode<EmptyNodeData, 'empty'>
+
+  export type Node = ElementNode | CompoundNode | EmptyNode
+  export type NodeData = Node['data']
+
+  /**
+   * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
+   * provided by SharedFlowTypes.
+   */
+  type RelationshipsOfEdgeData = {
+    existsInCurrentView: boolean
+  }
+
+  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
+
+  export type EdgeData = Base.EdgeData<{
+    color: Color | undefined
+    label: string | null
+    navigateTo: ViewId | null
+    line: RelationshipLineType
+  }>
+
+  export type Edge = ReactFlowEdge<EdgeData, 'relationships'>
+}

package/src/overlays/relationships-browser/actor.ts

@@ -0,0 +1,224 @@
+import { type BBox, type DiagramView, type Fqn, invariant } from '@likec4/core'
+import {
+  type EdgeChange,
+  type NodeChange,
+  type ReactFlowInstance,
+  applyEdgeChanges,
+  applyNodeChanges,
+} from '@xyflow/react'
+import { prop } from 'remeda'
+import {
+  type ActorLogic,
+  type ActorRefFromLogic,
+  type MachineSnapshot,
+  type SnapshotFrom,
+  assign,
+  cancel,
+  enqueueActions,
+  raise,
+  setup,
+} from 'xstate'
+import { MinZoom } from '../../base/const'
+import { updateEdges } from '../../base/updateEdges'
+import { updateNodes } from '../../base/updateNodes'
+import type { LayoutRelationshipsViewResult } from './-useRelationshipsView'
+import type { RelationshipsBrowserTypes } from './_types'
+import { viewToNodesEdge } from './useViewToNodesEdges'
+
+type XYFLowInstance = ReactFlowInstance<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>
+
+export type Input = {
+  subject: Fqn
+  scope?: DiagramView | null
+  closeable?: boolean
+  enableNavigationMenu?: boolean
+  // parentRef?: AnyActorRef| null
+}
+
+export type Context = Readonly<
+  Input & {
+    closeable: boolean
+    enableNavigationMenu: boolean
+    // parentRef: AnyActorRef | null
+    xyflow: XYFLowInstance | null
+    initialized: boolean
+    layouted: LayoutRelationshipsViewResult | null
+    xynodes: RelationshipsBrowserTypes.Node[]
+    xyedges: RelationshipsBrowserTypes.Edge[]
+  }
+>
+
+export type Events =
+  | { type: 'xyflow.init'; instance: XYFLowInstance }
+  | { type: 'xyflow.nodeClick'; node: RelationshipsBrowserTypes.Node }
+  | { type: 'xyflow.edgeClick'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.applyNodeChages'; changes: NodeChange<RelationshipsBrowserTypes.Node>[] }
+  | { type: 'xyflow.applyEdgeChages'; changes: EdgeChange<RelationshipsBrowserTypes.Edge>[] }
+  | { type: 'xyflow.paneClick' }
+  | { type: 'xyflow.paneDblClick' }
+  | { type: 'xyflow.resized' }
+  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
+  | { type: 'navigate.to'; subject: Fqn }
+  | { type: 'update.view'; layouted: LayoutRelationshipsViewResult }
+  | { type: 'close' }
+
+export const relationshipsBrowserActor = setup({
+  types: {
+    context: {} as Context,
+    input: {} as Input,
+    events: {} as Events,
+  },
+  actions: {
+    'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
+      const {
+        duration = 450,
+        bounds,
+      } = params ?? {}
+      const { xyflow } = context
+      invariant(xyflow, 'xyflow is not initialized')
+      if (bounds) {
+        xyflow.fitBounds(bounds, duration > 0 ? { duration } : undefined)
+      } else {
+        const maxZoom = Math.max(xyflow.getZoom(), 1)
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: 0.1,
+          ...(duration > 0 && { duration }),
+        })
+      }
+    },
+  },
+  guards: {
+    'enable: navigate.to': () => true,
+  },
+}).createMachine({
+  initial: 'waiting-data',
+  context: ({ input }) => ({
+    ...input,
+    closeable: input.closeable ?? true,
+    enableNavigationMenu: input.enableNavigationMenu ?? true,
+    initialized: false,
+    xyflow: null,
+    layouted: null,
+    xynodes: [],
+    xyedges: [],
+  }),
+  states: {
+    'waiting-data': {
+      on: {
+        'update.view': {
+          actions: assign(({ event }) => {
+            return {
+              layouted: event.layouted,
+              ...viewToNodesEdge(event.layouted),
+            }
+          }),
+          target: 'opening',
+        },
+      },
+    },
+    'opening': {
+      on: {
+        'xyflow.init': {
+          actions: assign({
+            initialized: true,
+            xyflow: ({ event }) => event.instance,
+          }),
+          target: 'active',
+        },
+        'close': {
+          target: 'closed',
+        },
+      },
+    },
+    'active': {
+      entry: {
+        type: 'xyflow:fitDiagram',
+        params: { duration: 0 },
+      },
+      on: {
+        'xyflow.nodeClick': {
+          guard: 'enable: navigate.to',
+          actions: enqueueActions(({ event, enqueue }) => {
+            if ('fqn' in event.node.data) {
+              const fqn = event.node.data.fqn
+              enqueue.assign({
+                subject: fqn,
+              })
+            }
+          }),
+        },
+        'navigate.to': {
+          guard: 'enable: navigate.to',
+          actions: [
+            assign({
+              subject: ({ event }) => event.subject,
+            }),
+          ],
+        },
+        'xyflow.paneDblClick': {
+          actions: 'xyflow:fitDiagram',
+        },
+        'update.view': {
+          actions: enqueueActions(({ context, event, enqueue }) => {
+            const updated = viewToNodesEdge(event.layouted)
+            enqueue.assign({
+              layouted: event.layouted,
+              xynodes: updateNodes(context.xynodes, updated.xynodes),
+              xyedges: updateEdges(context.xyedges, updated.xyedges),
+            })
+            enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
+          }),
+        },
+        'close': {
+          guard: ({ context }) => context.closeable,
+          target: 'closed',
+        },
+      },
+      exit: assign({
+        initialized: false,
+        xyflow: null,
+      }),
+    },
+    'closed': {
+      type: 'final',
+    },
+  },
+  on: {
+    'fitDiagram': {
+      actions: {
+        type: 'xyflow:fitDiagram',
+        params: prop('event'),
+      },
+    },
+    'xyflow.resized': {
+      actions: [
+        cancel('fitDiagram'),
+        raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
+      ],
+    },
+    'xyflow.applyNodeChages': {
+      actions: assign({
+        xynodes: ({ context, event }) => applyNodeChanges(event.changes, context.xynodes),
+      }),
+    },
+    'xyflow.applyEdgeChages': {
+      actions: assign({
+        xyedges: ({ context, event }) => applyEdgeChanges(event.changes, context.xyedges),
+      }),
+    },
+  },
+}) as unknown as ActorLogic<
+  MachineSnapshot<Context, Events, any, 'opening' | 'active' | 'closed', any, any, any, any>,
+  Events,
+  Input,
+  any,
+  any
+> // TODO reduce type inference by forcing the types
+
+export type RelationshipsBrowserLogic = typeof relationshipsBrowserActor
+export type RelationshipsBrowserActorRef = ActorRefFromLogic<typeof relationshipsBrowserActor>
+export type RelationshipsBrowserSnapshot = SnapshotFrom<RelationshipsBrowserActorRef>