@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,210 +0,0 @@
-import {
-  type Fqn,
-  GroupElementKind,
-  invariant,
-  nonNullable,
-  Queue,
-} from '@likec4/core'
-import { useDeepCompareMemo } from '@react-hookz/web'
-import { hasAtLeast } from 'remeda'
-import { ZIndexes } from '../../base/const'
-import type { RelationshipsBrowserTypes } from './_types'
-import { LayoutRelationshipsViewResult } from './layout'
-
-// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
-export function viewToNodesEdge(
-  view: Pick<LayoutRelationshipsViewResult, 'nodes' | 'edges'>,
-): {
-  xynodes: RelationshipsBrowserTypes.Node[]
-  xyedges: RelationshipsBrowserTypes.Edge[]
-} {
-  const xynodes = [] as RelationshipsBrowserTypes.Node[],
-    xyedges = [] as RelationshipsBrowserTypes.Edge[],
-    nodeLookup = new Map<Fqn, LayoutRelationshipsViewResult.Node>()
-
-  type TraverseItem = {
-    node: LayoutRelationshipsViewResult.Node
-    parent: LayoutRelationshipsViewResult.Node | null
-  }
-  const queue = Queue.from(view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node)
-      if (!node.parent) {
-        acc.push({ node, parent: null })
-      }
-      return acc
-    },
-    [] as TraverseItem[],
-  ))
-
-  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
-
-  // namespace to force unique ids
-  const ns = ''
-  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
-
-  let next: TraverseItem | undefined
-  while ((next = queue.dequeue())) {
-    const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
-    if (isCompound) {
-      for (const child of node.children) {
-        queue.enqueue({ node: nodeById(child), parent: node })
-      }
-    }
-
-    const position = {
-      x: node.position[0],
-      y: node.position[1],
-    }
-    if (parent) {
-      position.x -= parent.position[0]
-      position.y -= parent.position[1]
-    }
-
-    const id = ns + node.id
-
-    const base = {
-      id,
-      draggable: false,
-      selectable: true,
-      focusable: true,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height,
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      ...(parent && {
-        parentId: ns + parent.id,
-      }),
-    } satisfies Omit<RelationshipsBrowserTypes.Node, 'data' | 'type'>
-
-    const fqn = node.modelRef ?? null
-    // const deploymentRef = DiagramNode.deploymentRef(node)
-    // if (!fqn) {
-    //   console.error('Invalid node', node)
-    //   throw new Error('Element should have either modelRef or deploymentRef')
-    // }
-
-    const navigateTo = { navigateTo: node.navigateTo ?? null }
-
-    switch (true) {
-      case node.kind === LayoutRelationshipsViewResult.Empty: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'empty',
-            data: {
-              column: node.column,
-            },
-          },
-        )
-        break
-      }
-
-      case isCompound && !!fqn: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'compound',
-            data: {
-              column: node.column,
-              title: node.title,
-              color: node.color,
-              shape: node.shape,
-              style: node.style,
-              depth: node.depth ?? 0,
-              icon: node.icon ?? 'none',
-              ports: node.ports,
-              existsInCurrentView: node.existsInCurrentView,
-              fqn,
-              ...navigateTo,
-            },
-          },
-        )
-        break
-      }
-      default: {
-        invariant(fqn, 'Element should have either modelRef or deploymentRef')
-        xynodes.push(
-          {
-            ...base,
-            type: 'element' as const,
-            data: {
-              column: node.column,
-              fqn,
-              title: node.title,
-              technology: node.technology,
-              description: node.description,
-              height: node.height,
-              width: node.width,
-              color: node.color,
-              shape: node.shape,
-              icon: node.icon ?? 'none',
-              ports: node.ports,
-              style: node.style,
-              existsInCurrentView: node.existsInCurrentView,
-              tags: node.tags,
-              ...navigateTo,
-            },
-          },
-        )
-      }
-    }
-  }
-  for (const edge of view.edges) {
-    const source = edge.source
-    const target = edge.target
-    const id = ns + edge.id
-
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error('edge should have at least 2 points', edge)
-      continue
-    }
-
-    if (!hasAtLeast(edge.relations, 1)) {
-      console.error('edge should have at least 1 relation', edge)
-      continue
-    }
-
-    xyedges.push({
-      id,
-      type: 'relationship',
-      source: ns + source,
-      target: ns + target,
-      sourceHandle: edge.sourceHandle,
-      targetHandle: edge.targetHandle,
-      // selectable: selectable,
-      // hidden: !visiblePredicate(edge),
-      // deletable: false,
-      data: {
-        sourceFqn: edge.sourceFqn,
-        targetFqn: edge.targetFqn,
-        relations: edge.relations,
-        color: edge.color ?? 'gray',
-        label: edge.label,
-        navigateTo: edge.navigateTo ?? null,
-        line: edge.line ?? 'dashed',
-        existsInCurrentView: edge.existsInCurrentView,
-      },
-      interactionWidth: 20,
-    })
-  }
-
-  return {
-    xynodes,
-    xyedges,
-  }
-}
-
-export function useViewToNodesEdges({ edges, nodes }: LayoutRelationshipsViewResult) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      nodes,
-      edges,
-    })
-  }, [nodes, edges])
-}

package/src/overlays/types.ts

@@ -1,39 +0,0 @@
-import type { ActorRefFrom } from 'xstate'
-import type {
-  ElementDetailsLogic,
-  Events as ElementDetailsEvents,
-  Input as ElementDetailsInput,
-} from './element-details/actor'
-import type {
-  Events as RelationshipDetailsEvents,
-  Input as RelationshipDetailsInput,
-  RelationshipDetailsLogic,
-} from './relationship-details/actor'
-import type {
-  Events as RelationshipsBrowserEvents,
-  Input as RelationshipsBrowserInput,
-  RelationshipsBrowserLogic,
-} from './relationships-browser/actor'
-
-export namespace Overlays {
-  export namespace ElementDetails {
-    export type Events = ElementDetailsEvents
-    export type Input = ElementDetailsInput
-    export type Logic = ElementDetailsLogic
-    export interface ActorRef extends ActorRefFrom<ElementDetailsLogic> {}
-  }
-
-  export namespace RelationshipDetails {
-    export type Events = RelationshipDetailsEvents
-    export type Input = RelationshipDetailsInput
-    export interface Logic extends RelationshipDetailsLogic {}
-    export interface ActorRef extends ActorRefFrom<RelationshipDetailsLogic> {}
-  }
-
-  export namespace RelationshipsBrowser {
-    export type Events = RelationshipsBrowserEvents
-    export type Input = RelationshipsBrowserInput
-    export interface Logic extends RelationshipsBrowserLogic {}
-    export interface ActorRef extends ActorRefFrom<RelationshipsBrowserLogic> {}
-  }
-}

package/src/search/Search.tsx

@@ -1,220 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { Box, VStack } from '@likec4/styles/jsx'
-import { Grid, GridCol, Group, ScrollArea, Title } from '@mantine/core'
-import {
-  useCallbackRef,
-  useHotkeys,
-} from '@mantine/hooks'
-import { useTimeoutEffect } from '@react-hookz/web'
-import { useSelector } from '@xstate/react'
-import { AnimatePresence, LayoutGroup } from 'motion/react'
-import { useRef } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
-import { isTruthy } from 'remeda'
-import { ErrorFallback } from '../components/ErrorFallback'
-import { DiagramFeatures } from '../context/DiagramFeatures'
-import { Overlay } from '../overlays/overlay/Overlay'
-import { ElementsColumn } from './components/ElementsColumn'
-import { PickView } from './components/PickView'
-import { SearchByTags } from './components/SearchByTags'
-import { LikeC4SearchInput } from './components/SearchInput'
-import { focusToFirstFoundElement, moveFocusToSearchInput } from './components/utils'
-import { ViewsColumn } from './components/ViewsColum'
-import { SearchActorContext, usePickViewFor } from './hooks'
-import { type SearchActorRef, type SearchActorSnapshot } from './searchActor'
-
-const dialog = css({
-  backgroundColor: `[rgb(34 34 34 / var(--_opacity, 95%))]`,
-  _light: {
-    backgroundColor: `[rgb(250 250 250 / var(--_opacity, 95%))]`,
-  },
-  backdropFilter: 'auto',
-  backdropBlur: 'var(--_blur, 10px)',
-  //   base: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-  //   _light: `[rgb(255 255 255/ var(${backdropOpacity}))]`,
-  // },
-})
-
-const body = css({
-  // containerName: 'likec4-search',
-  // containerType: 'size',
-  // position: 'fixed',
-  // zIndex: 901,
-  // top: '0',
-  // left: '0',
-  width: '100%',
-  height: '100%',
-  maxHeight: '100vh',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'stretch',
-  gap: 'sm',
-  paddingTop: '[20px]',
-  paddingLeft: 'md',
-  paddingRight: 'md',
-  paddingBottom: 'sm',
-  background: '[transparent]',
-  // backgroundColor: {
-  //   _dark: `[rgb(34 34 34 / 0.95)]`,
-  //   _light: `[rgb(255 255 255/ 0.95)]`,
-  // },
-})
-
-const selectIsOpened = (s: SearchActorSnapshot) => !s.matches('inactive')
-
-export function Search({ searchActorRef }: { searchActorRef: SearchActorRef }) {
-  const isOpened = useSelector(searchActorRef, selectIsOpened)
-
-  const openSearch = () => {
-    searchActorRef.send({ type: 'open' })
-  }
-
-  const close = useCallbackRef(() => {
-    searchActorRef.send({ type: 'close' })
-  })
-
-  useHotkeys([
-    ['mod+k', openSearch, {
-      preventDefault: true,
-    }],
-    ['mod+f', openSearch, {
-      preventDefault: true,
-    }],
-  ])
-
-  return (
-    <SearchActorContext value={searchActorRef}>
-      <DiagramFeatures.Overlays>
-        <ErrorBoundary FallbackComponent={ErrorFallback} onReset={close}>
-          <AnimatePresence>
-            {isOpened && (
-              <Overlay
-                fullscreen
-                withBackdrop={false}
-                backdrop={{
-                  opacity: 0.9,
-                }}
-                classes={{
-                  dialog,
-                  body,
-                }}
-                openDelay={0}
-                onClose={close}
-                data-likec4-search="true"
-              >
-                <SearchOverlay searchActorRef={searchActorRef} />
-              </Overlay>
-            )}
-          </AnimatePresence>
-        </ErrorBoundary>
-      </DiagramFeatures.Overlays>
-    </SearchActorContext>
-  )
-}
-
-const scrollArea = css({
-  height: [
-    '100%',
-    '100cqh',
-  ],
-  '& .mantine-ScrollArea-viewport': {
-    minHeight: '100%',
-    '& > div': {
-      minHeight: '100%',
-      height: '100%',
-    },
-  },
-})
-
-const SearchOverlay = ({ searchActorRef }: { searchActorRef: SearchActorRef }) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const pickViewFor = usePickViewFor()
-
-  useTimeoutEffect(() => {
-    if (isTruthy(searchActorRef.getSnapshot().context.openedWithSearch)) {
-      focusToFirstFoundElement(ref.current)
-    }
-  }, 150)
-
-  return (
-    <Box ref={ref} display={'contents'}>
-      <Group
-        className={'group'}
-        wrap="nowrap"
-        onClick={e => {
-          e.stopPropagation()
-          moveFocusToSearchInput(ref.current)
-        }}>
-        <VStack flex={1} px={'sm'}>
-          <LikeC4SearchInput />
-          <SearchByTags />
-        </VStack>
-        {
-          /* <Box
-          css={{
-            alignSelf: 'flex-start',
-            flex: '0 0 auto',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: 50,
-          }}>
-          <ActionIcon
-            size={'lg'}
-            variant="default"
-            onClick={(e) => {
-              e.stopPropagation()
-              close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Box> */
-        }
-      </Group>
-      <Grid>
-        <GridCol span={6}>
-          <Title component={'div'} order={6} c="dimmed" pl="sm">Elements</Title>
-        </GridCol>
-        <GridCol span={6}>
-          <Title component={'div'} order={6} c="dimmed" pl="sm">Views</Title>
-        </GridCol>
-      </Grid>
-      <Grid
-        className={css({
-          containerName: 'likec4-search-elements',
-          containerType: 'size',
-          overflow: 'hidden',
-          flexGrow: 1,
-        })}>
-        <GridCol span={6}>
-          <ScrollArea
-            type="scroll"
-            className={scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-elements">
-                <ElementsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-        <GridCol span={6}>
-          <ScrollArea
-            type="scroll"
-            className={scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-views">
-                <ViewsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-      </Grid>
-      {pickViewFor && <PickView elementFqn={pickViewFor} />}
-    </Box>
-  )
-}

package/src/search/components/ElementsColumn.css.ts

@@ -1,84 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { container } from '@likec4/styles/patterns'
-
-export { focusable } from './_shared.css'
-
-const whenContainerIsNarrow = `@container likec4-tree (max-width: 450px)`
-
-export const treeNode = css({
-  outline: 'none',
-  marginBottom: '2',
-})
-export const treeRoot = css(
-  container.raw({
-    containerName: 'likec4-tree',
-  }),
-  {
-    containerType: 'inline-size',
-    height: '100%',
-  },
-)
-export const treeLabel = css({
-  display: 'flex',
-  alignItems: 'baseline',
-  outline: 'none !important',
-  gap: '1',
-})
-export const treeSubtree = css({
-  marginTop: '2',
-})
-
-// const iconSize = '--likec4-icon-size'
-export const elementExpandIcon = css({
-  color: 'mantine.colors.dimmed',
-})
-
-// export const elementButton = css(button, {
-//   flexGrow: 1,
-// })
-
-// TODO
-// globalStyle(`${treeNode}:focus > ${treeLabel} ${elementButton}`, buttonFocused)
-
-export const elementTitleAndId = css({
-  [whenContainerIsNarrow]: {
-    flexDirection: 'column-reverse',
-    alignItems: 'flex-start',
-    gap: '0.5',
-  },
-})
-
-// export const elementTitle = css(title)
-export const elementId = css({
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
-  fontSize: '10px',
-  lineHeight: '1.3',
-  display: 'block',
-  fontWeight: 500,
-  whiteSpace: 'nowrap',
-  padding: '[1px 5px]',
-  borderRadius: '4px',
-  background: `mantine.colors.dark[9]/30`,
-  _light: {
-    background: `mantine.colors.gray[3]/20`,
-  },
-})
-
-export const elementIcon = css({
-  ['--likec4-icon-size']: '24px',
-  [whenContainerIsNarrow]: {
-    ['--likec4-icon-size']: '18px',
-  },
-})
-
-export const elementViewsCount = css({
-  flex: 0,
-  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
-  fontSize: '10px',
-  fontWeight: 500,
-  whiteSpace: 'nowrap',
-  lineHeight: '1.1',
-  [whenContainerIsNarrow]: {
-    display: 'none',
-  },
-})