@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,282 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { ActionIcon, Group } from '@mantine/core'
-import { useCallbackRef, useStateHistory } from '@mantine/hooks'
-import { useRafEffect } from '@react-hookz/web'
-import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
-import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m } from 'motion/react'
-import { memo, useEffect, useRef } from 'react'
-import type { SnapshotFrom } from 'xstate'
-import { BaseXYFlow } from '../../base/BaseXYFlow'
-import type { RelationshipsBrowserTypes, RelationshipsBrowserTypes as Types } from './_types'
-import type { RelationshipsBrowserActorRef } from './actor'
-import { CompoundNode, ElementNode, EmptyNode, RelationshipEdge } from './custom'
-import {
-  RelationshipsBrowserActorContext,
-  useRelationshipsBrowser,
-  useRelationshipsBrowserState,
-} from './hooks'
-import { useRelationshipsView } from './layout'
-import { SelectElement } from './SelectElement'
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode,
-  empty: EmptyNode,
-} satisfies {
-  [key in RelationshipsBrowserTypes.Node['type']]: any
-}
-
-export const edgeTypes = {
-  relationship: RelationshipEdge,
-} satisfies {
-  [key in RelationshipsBrowserTypes.Edge['type']]: any
-}
-
-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<{
-    initialNodes: Types.Node[]
-    initialEdges: Types.Edge[]
-  }>(null)
-
-  if (initialRef.current == null) {
-    initialRef.current = {
-      initialNodes: [],
-      initialEdges: [],
-    }
-  }
-
-  return (
-    <RelationshipsBrowserActorContext.Provider value={actorRef}>
-      <ReactFlowProvider {...initialRef.current}>
-        <LayoutGroup id={actorRef.sessionId} inherit={false}>
-          <AnimatePresence>
-            <RelationshipsBrowserXYFlow />
-          </AnimatePresence>
-        </LayoutGroup>
-      </ReactFlowProvider>
-    </RelationshipsBrowserActorContext.Provider>
-  )
-}
-
-const selector = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
-  isActive: state.hasTag('active'),
-  nodes: state.context.xynodes,
-  edges: state.context.xyedges,
-})
-const selectorEq = (a: ReturnType<typeof selector>, b: ReturnType<typeof selector>) =>
-  a.isActive === b.isActive &&
-  shallowEqual(a.nodes, b.nodes) &&
-  shallowEqual(a.edges, b.edges)
-
-const RelationshipsBrowserXYFlow = memo(() => {
-  const browser = useRelationshipsBrowser()
-  const {
-    isActive,
-    nodes,
-    edges,
-  } = useRelationshipsBrowserState(
-    selector,
-    selectorEq,
-  )
-
-  return (
-    <BaseXYFlow<Types.Node, Types.Edge>
-      id={browser.rootElementId}
-      nodes={nodes}
-      edges={edges}
-      className={cx(
-        isActive ? 'initialized' : 'not-initialized',
-        'relationships-browser',
-      )}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      fitView={false}
-      onNodeClick={useCallbackRef((e, node) => {
-        browser.send({ type: 'xyflow.nodeClick', node })
-      })}
-      onEdgeClick={useCallbackRef((e, edge) => {
-        browser.send({ type: 'xyflow.edgeClick', edge })
-      })}
-      onPaneClick={useCallbackRef((e) => {
-        browser.send({ type: 'xyflow.paneClick' })
-      })}
-      onDoubleClick={useCallbackRef(e => {
-        browser.send({ type: 'xyflow.paneDblClick' })
-      })}
-      onViewportResize={useCallbackRef(() => {
-        browser.send({ type: 'xyflow.resized' })
-      })}
-      onNodesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyNodeChanges', changes })
-      })}
-      onEdgesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyEdgeChanges', changes })
-      })}
-      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        if (!edge.data.hovered) {
-          browser.send({ type: 'xyflow.edgeMouseEnter', edge })
-        }
-      })}
-      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        if (edge.data.hovered) {
-          browser.send({ type: 'xyflow.edgeMouseLeave', edge })
-        }
-      })}
-      onSelectionChange={useCallbackRef((params) => {
-        browser.send({ type: 'xyflow.selectionChange', ...params })
-      })}
-      nodesDraggable={false}
-      pannable
-      zoomable
-    >
-      <RelationshipsBrowserInner />
-    </BaseXYFlow>
-  )
-})
-
-const selector2 = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
-  subjectId: state.context.subject,
-  viewId: state.context.viewId,
-  scope: state.context.scope,
-  closeable: state.context.closeable,
-})
-
-const RelationshipsBrowserInner = memo(() => {
-  const browser = useRelationshipsBrowser()
-  const {
-    subjectId,
-    viewId,
-    scope,
-    closeable,
-  } = useRelationshipsBrowserState(selector2)
-
-  const store = useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
-  const instance = useReactFlow<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
-
-  useEffect(() => {
-    if (instance.viewportInitialized) {
-      browser.send({ type: 'xyflow.init', instance, store })
-    }
-  }, [store, instance.viewportInitialized, browser])
-
-  const layouted = useRelationshipsView(subjectId, viewId, scope)
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      historyOps.set(subjectId)
-    }
-  }, [subjectId])
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      browser.navigateTo(historySubjectId)
-    }
-  }, [historySubjectId, browser])
-
-  useRafEffect(() => {
-    browser.updateView(layouted)
-  }, [layouted, browser])
-
-  const hasStepBack = current > 0
-  const hasStepForward = current + 1 < history.length
-
-  return (
-    <>
-      <TopLeftPanel
-        hasStepBack={hasStepBack}
-        hasStepForward={hasStepForward}
-        onStepBack={() => historyOps.back()}
-        onStepForward={() => historyOps.forward()}
-      />
-      {closeable && (
-        <Panel position="top-right">
-          <ActionIcon
-            variant="default"
-            color="gray"
-            onClick={(e) => {
-              e.stopPropagation()
-              browser.close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Panel>
-      )}
-    </>
-  )
-})
-
-type TopLeftPanelProps = {
-  hasStepBack: boolean
-  hasStepForward: boolean
-  onStepBack: () => void
-  onStepForward: () => void
-}
-const TopLeftPanel = ({
-  hasStepBack,
-  hasStepForward,
-  onStepBack,
-  onStepForward,
-}: TopLeftPanelProps) => {
-  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>
-          )}
-        </AnimatePresence>
-        <SelectElement />
-      </Group>
-    </Panel>
-  )
-}

package/src/overlays/relationships-browser/SelectElement.css.ts

@@ -1,22 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const node = css({
-  margin: '0',
-})
-
-export const label = css({
-  _hover: {
-    backgroundColor: 'mantine.colors.gray[0]',
-    _dark: {
-      backgroundColor: 'mantine.colors.defaultHover',
-      color: 'mantine.colors.white',
-    },
-  },
-})
-
-export const scrollArea = css({
-  maxHeight: [
-    '70vh',
-    'calc(100cqh - 70px)',
-  ],
-})

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

@@ -1,229 +0,0 @@
-import { type Fqn, ancestorsFqn } from '@likec4/core'
-import {
-  ActionIcon,
-  Box,
-  Button,
-  Group,
-  Popover,
-  PopoverDropdown,
-  PopoverTarget,
-  ScrollAreaAutosize,
-  SegmentedControl,
-  Text,
-  Tooltip,
-  Tree,
-  useTree,
-} from '@mantine/core'
-import { IconChevronRight, IconSelector } from '@tabler/icons-react'
-import { memo, useEffect, useRef } from 'react'
-import { useLikeC4ElementsTree, useLikeC4Model } from '../../likec4model'
-import type { RelationshipsBrowserSnapshot } from './actor'
-import { useRelationshipsBrowser, useRelationshipsBrowserState } from './hooks'
-import * as classes from './SelectElement.css'
-
-const selector2 = (state: RelationshipsBrowserSnapshot) => {
-  const subjectExistsInScope = state.context.layouted?.subjectExistsInScope ?? false
-  return ({
-    subjectId: state.context.subject,
-    viewId: state.context.viewId,
-    scope: state.context.scope,
-    subjectExistsInScope,
-    enableSelectSubject: state.context.enableSelectSubject,
-    enableChangeScope: state.context.enableChangeScope,
-  })
-}
-
-const setHoveredNode = () => {}
-export const SelectElement = memo(() => {
-  const browser = useRelationshipsBrowser()
-  const {
-    subjectId,
-    viewId,
-    scope,
-    subjectExistsInScope,
-    enableSelectSubject,
-    enableChangeScope,
-  } = useRelationshipsBrowserState(selector2)
-
-  const root = useRef<HTMLDivElement>(null)
-  const viewport = useRef<HTMLDivElement>(null)
-  const model = useLikeC4Model()
-  const subject = model.findElement(subjectId)
-  const data = useLikeC4ElementsTree(scope === 'view' && viewId ? viewId : undefined)
-  const tree = useTree({
-    multiple: false,
-  })
-  tree.setHoveredNode = setHoveredNode
-
-  useEffect(() => {
-    ancestorsFqn(subjectId).reverse().forEach(id => {
-      tree.expand(id)
-    })
-    tree.select(subjectId)
-  }, [subjectId])
-
-  return (
-    <Group ref={root} gap={'xs'} pos={'relative'}>
-      {enableSelectSubject && (
-        <Group gap={4} wrap="nowrap">
-          <Box
-            fz={'xs'}
-            fw={'500'}
-            style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>
-            Relationships of
-          </Box>
-          <Box pos={'relative'}>
-            <Popover
-              position="bottom-start"
-              shadow="md"
-              keepMounted={false}
-              withinPortal={false}
-              closeOnClickOutside
-              clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-              offset={4}
-              onOpen={() => {
-                setTimeout(() => {
-                  const item = viewport.current?.querySelector(`[data-value="${subjectId}"]`)
-                  item?.scrollIntoView({ behavior: 'instant', block: 'nearest' })
-                }, 100)
-              }}
-            >
-              <PopoverTarget>
-                <Button
-                  size="xs"
-                  variant="default"
-                  maw={250}
-                  rightSection={<IconSelector size={16} />}
-                >
-                  <Text fz={'xs'} fw={'500'} truncate>
-                    {subject?.title ?? '???'}
-                  </Text>
-                </Button>
-              </PopoverTarget>
-              <PopoverDropdown p={0} miw={250} maw={400}>
-                <ScrollAreaAutosize scrollbars="y" type="never" viewportRef={viewport} className={classes.scrollArea}>
-                  <Tree
-                    allowRangeSelection={false}
-                    selectOnClick={false}
-                    tree={tree}
-                    data={data}
-                    classNames={classes}
-                    levelOffset={8}
-                    styles={{
-                      root: {
-                        maxWidth: 400,
-                        overflow: 'hidden',
-                      },
-                      label: {
-                        paddingTop: 5,
-                        paddingBottom: 6,
-                      },
-                    }}
-                    renderNode={({ node, selected, expanded, elementProps, hasChildren }) => (
-                      <Group gap={2} wrap="nowrap" {...elementProps} py="3">
-                        <ActionIcon
-                          variant="subtle"
-                          size={18}
-                          // color={theme === 'light' ? 'gray' : 'gray'}
-                          c={'dimmed'}
-                          style={{
-                            visibility: hasChildren ? 'visible' : 'hidden',
-                          }}>
-                          <IconChevronRight
-                            stroke={3.5}
-                            style={{
-                              transition: 'transform 150ms ease',
-                              transform: `rotate(${expanded ? '90deg' : '0'})`,
-                              width: '80%',
-                            }} />
-                        </ActionIcon>
-                        <Box
-                          flex={'1 1 100%'}
-                          w={'100%'}
-                          // gap={3}
-                          onClick={e => {
-                            e.stopPropagation()
-                            tree.select(node.value)
-                            tree.expand(node.value)
-                            browser.navigateTo(node.value as Fqn)
-                          }}>
-                          <Text
-                            fz="sm"
-                            fw={selected ? '600' : '400'}
-                            truncate="end">
-                            {node.label}
-                          </Text>
-                        </Box>
-                      </Group>
-                    )}
-                  />
-                </ScrollAreaAutosize>
-              </PopoverDropdown>
-            </Popover>
-          </Box>
-        </Group>
-      )}
-      {enableChangeScope && (
-        <Group gap={4} wrap="nowrap">
-          {/* Show if only "select" is enabled  */}
-          {enableSelectSubject && (
-            <Box
-              fz={'xs'}
-              fw={'500'}
-              {...!subjectExistsInScope && {
-                c: 'dimmed',
-              }}
-              style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>
-              Scope
-            </Box>
-          )}
-          <div>
-            <Tooltip
-              color="orange"
-              label={
-                <>
-                  This element does not exist in the current view
-                  {scope === 'view' && (
-                    <>
-                      <br />
-                      {'Scope is set to global'}
-                    </>
-                  )}
-                </>
-              }
-              position="bottom-start"
-              disabled={subjectExistsInScope}
-              portalProps={{
-                target: root.current!,
-              }}
-            >
-              <SegmentedControl
-                flex={'1 0 auto'}
-                size="xs"
-                withItemsBorders={false}
-                value={scope}
-                styles={{
-                  label: {
-                    paddingLeft: 8,
-                    paddingRight: 8,
-                  },
-                }}
-                onChange={value => {
-                  browser.changeScope(value as 'global' | 'view')
-                }}
-                data={[
-                  { label: 'Global', value: 'global' },
-                  {
-                    label: <span>Current view</span>,
-                    value: 'view',
-                    disabled: !subjectExistsInScope,
-                  },
-                ]}
-              />
-            </Tooltip>
-          </div>
-        </Group>
-      )}
-    </Group>
-  )
-})

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

@@ -1,102 +0,0 @@
-import type {
-  Color,
-  DiagramNode,
-  Fqn,
-  IconUrl,
-  NonEmptyArray,
-  RelationId,
-  RelationshipLineType,
-  RichTextOrEmpty,
-  ViewId,
-} from '@likec4/core/types'
-import type { Simplify } from 'type-fest'
-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 = Simplify<
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'title'
-        | 'technology'
-        | 'color'
-        | 'shape'
-        | 'style'
-        | 'width'
-        | 'height'
-        | 'tags'
-        | 'navigateTo'
-      >
-    >
-    & {
-      column: Column
-      fqn: Fqn
-      icon: string | null
-      ports: Ports
-      existsInCurrentView: boolean
-      description: RichTextOrEmpty
-    }
-  >
-
-  export type CompoundNodeData = Simplify<
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'title'
-        | 'color'
-        | 'shape'
-        | 'style'
-      >
-    >
-    & {
-      column: Column
-      fqn: Fqn
-      depth: number
-      icon: IconUrl
-      ports: Ports
-      existsInCurrentView: boolean
-    }
-  >
-
-  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']
-
-  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
-
-  export type EdgeData = Simplify<
-    Base.EdgeData & {
-      sourceFqn: Fqn
-      targetFqn: Fqn
-      relations: NonEmptyArray<RelationId>
-      color: Color | undefined
-      label: string | null
-      navigateTo: ViewId | null
-      line: RelationshipLineType
-      existsInCurrentView: boolean
-    }
-  >
-
-  export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
-}