@likec4/diagram 1.30.0 → 1.32.0

package/src/base/xyflowMachine.ts

@@ -1,75 +0,0 @@
-import type { BBox } from '@likec4/core'
-import { type ReactFlowInstance, type useStoreApi, type Viewport } from '@xyflow/react'
-import { type ActorRefFrom, setup } from 'xstate'
-import { MaxZoom, MinZoom } from './const'
-import type { Base } from './types'
-
-export interface TodoItem {
-  id: string
-  title: string
-  completed: boolean
-}
-
-export type TodosFilter = 'all' | 'active' | 'completed'
-
-type StoreApi = ReturnType<typeof useStoreApi<Base.Node, Base.Edge>>
-
-export const xyflowMachine = setup({
-  types: {
-    input: {} as {
-      xyflow: ReactFlowInstance<Base.Node, Base.Edge>
-      fitViewPadding?: number
-    },
-    context: {} as {
-      xyflow: ReactFlowInstance<Base.Node, Base.Edge>
-      fitViewPadding: number
-    },
-    events: {} as
-      | { type: 'fitBounds'; bounds: BBox; duration?: number }
-      | { type: 'fitView'; duration?: number }
-      | { type: 'setCenter'; center: { x: number; y: number }; duration?: number }
-      | { type: 'setViewport'; viewport: Viewport; duration?: number },
-  },
-}).createMachine({
-  id: 'xyflow',
-  context: ({ input }) => ({
-    fitViewPadding: 0,
-    ...input,
-  }),
-  on: {
-    'fitBounds': {
-      actions: ({ context, event }) => {
-        const { bounds, duration = 0 } = event
-        context.xyflow.fitBounds(bounds, {
-          padding: context.fitViewPadding,
-          ...duration > 0 && { duration },
-        })
-      },
-    },
-    'fitView': {
-      actions: ({ context, event }) => {
-        const { duration = 0 } = event
-        context.xyflow.fitView({
-          minZoom: MinZoom,
-          maxZoom: MaxZoom,
-          padding: context.fitViewPadding,
-          ...duration > 0 && { duration },
-        })
-      },
-    },
-    'setCenter': {
-      actions: ({ context, event }) => {
-        const { center, duration = 0 } = event
-        context.xyflow.setCenter(center.x, center.y, duration > 0 ? { duration } : undefined)
-      },
-    },
-    'setViewport': {
-      actions: ({ context, event }) => {
-        const { viewport, duration = 0 } = event
-        context.xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
-      },
-    },
-  },
-})
-
-export type XYFlowActorRef = ActorRefFrom<typeof xyflowMachine>

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -1,109 +0,0 @@
-import { type Fqn, type NodeId } from '@likec4/core'
-import type { NodeProps } from '../../../base'
-import {
-  CompoundDetailsButton,
-  CompoundNodeContainer,
-  CompoundTitle,
-  customNode,
-  DefaultHandles,
-  ElementDetailsButton,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTitle,
-} from '../../../base/primitives'
-import { IfEnabled, IfNotEnabled, useEnabledFeature } from '../../../context'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { Types } from '../../types'
-import { CompoundActions } from './CompoundActions'
-import { DeploymentElementActions, ElementActions } from './ElementActions'
-import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
-import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
-
-const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.NodeData> & { fqn: Fqn }) => {
-  const { enableElementDetails } = useEnabledFeature('ElementDetails')
-  const diagram = useDiagram()
-
-  if (!enableElementDetails) return null
-
-  return (
-    <ElementDetailsButton
-      {...props}
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openElementDetails(fqn, props.id as NodeId)
-      }}
-    />
-  )
-}
-
-export const ElementNode = customNode<Types.ElementNodeData>((props) => (
-  <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} />
-    <ElementTitle {...props} />
-    <ElementActions {...props} />
-    <ElementDetailsButtonWithHandler
-      fqn={props.data.modelFqn}
-      {...props} />
-    <IfNotEnabled feature="ReadOnly">
-      <ElementToolbar {...props} />
-    </IfNotEnabled>
-    <DefaultHandles />
-  </ElementNodeContainer>
-))
-
-export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
-  <ElementNodeContainer nodeProps={props}>
-    <ElementShape {...props} isMultiple={props.data.isMultiple} />
-    <ElementTitle {...props} />
-    <DeploymentElementActions {...props} />
-    {!!props.data.modelFqn && (
-      <ElementDetailsButtonWithHandler
-        fqn={props.data.modelFqn}
-        {...props} />
-    )}
-    <IfNotEnabled feature="ReadOnly">
-      <DeploymentElementToolbar {...props} />
-    </IfNotEnabled>
-    <DefaultHandles />
-  </ElementNodeContainer>
-))
-
-export const CompoundElementNode = customNode<Types.CompoundElementNodeData>((props) => {
-  const diagram = useDiagram()
-  return (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <CompoundActions {...props} />
-      <IfEnabled feature="ElementDetails">
-        <CompoundDetailsButton
-          {...props}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
-          }} />
-      </IfEnabled>
-      <IfNotEnabled feature="ReadOnly">
-        <CompoundElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )
-})
-
-export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData>((props) => (
-  <CompoundNodeContainer nodeProps={props}>
-    <CompoundTitle {...props} />
-    <CompoundActions {...props} />
-    <IfNotEnabled feature="ReadOnly">
-      <CompoundDeploymentToolbar {...props} />
-    </IfNotEnabled>
-    <DefaultHandles />
-  </CompoundNodeContainer>
-))
-
-export const ViewGroupNode = customNode<Types.ViewGroupNodeData>((props) => (
-  <CompoundNodeContainer nodeProps={props}>
-    <CompoundTitle {...props} />
-    <DefaultHandles />
-  </CompoundNodeContainer>
-))

package/src/likec4diagram/ui/search/LikeC4Search.tsx

@@ -1,301 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import {
-  ActionIcon,
-  Grid,
-  GridCol,
-  Group,
-  Portal,
-  ScrollArea,
-  ScrollAreaAutosize,
-  Stack,
-  Title,
-} from '@mantine/core'
-import {
-  useCallbackRef,
-  useDisclosure,
-  useFocusReturn,
-  useFocusTrap,
-  useHotkeys,
-  useWindowEvent,
-} from '@mantine/hooks'
-import { IconX } from '@tabler/icons-react'
-import { AnimatePresence, LayoutGroup, m } from 'motion/react'
-import { memo, useRef } from 'react'
-import { SearchControl } from '../../../components/SearchControl'
-import { useMantinePortalProps } from '../../../hooks'
-import { ElementsColumn } from './ElementsColumn'
-import * as styles from './LikeC4Search.css'
-import { LikeC4SearchInput } from './SearchInput'
-import {
-  LikeC4SearchContext,
-  setPickView,
-  useCloseSearch,
-  useIsPickViewActive,
-  usePickView,
-  wasResetPickView,
-} from './state'
-import { stopAndPrevent } from './utils'
-import { ViewButton, ViewsColumn } from './ViewsColum'
-
-export const LikeC4Search = memo(() => {
-  const [searchOpened, searchOps] = useDisclosure(false)
-  useHotkeys([
-    ['mod+k', () => searchOps.toggle(), {
-      preventDefault: true,
-    }],
-    ['mod+f', () => searchOps.toggle(), {
-      preventDefault: true,
-    }],
-  ])
-
-  const afterCloseCbRef = useRef<(() => void)>(null)
-  const close = useCallbackRef((cb?: () => void) => {
-    afterCloseCbRef.current = cb ?? null
-    searchOps.close()
-  })
-  const onExitComplete = useCallbackRef(() => {
-    if (afterCloseCbRef.current) {
-      afterCloseCbRef.current()
-      afterCloseCbRef.current = null
-    }
-  })
-
-  const { portalProps } = useMantinePortalProps()
-
-  return (
-    <LikeC4SearchContext value={close}>
-      <SearchControl
-        onClick={e => {
-          e.stopPropagation()
-          searchOps.toggle()
-        }} />
-      <Portal {...portalProps} reuseTargetNode>
-        <AnimatePresence onExitComplete={onExitComplete}>
-          {searchOpened && (
-            <m.div
-              key={'backdrop'}
-              className={styles.backdrop}
-              initial={{ opacity: 0.7 }}
-              animate={{
-                opacity: 1,
-                transition: {
-                  duration: 0.13,
-                },
-              }}
-              exit={{
-                opacity: 0,
-                transition: {
-                  duration: 0.13,
-                },
-              }}>
-            </m.div>
-          )}
-          {searchOpened && <LikeC4SearchOverlay key="overlay" />}
-        </AnimatePresence>
-      </Portal>
-    </LikeC4SearchContext>
-  )
-})
-LikeC4Search.displayName = 'LikeC4Search'
-
-const LikeC4SearchOverlay = () => {
-  const close = useCloseSearch()
-  const pickViewActive = useIsPickViewActive()
-
-  useWindowEvent(
-    'keydown',
-    (event) => {
-      if (event.key === 'Escape') {
-        stopAndPrevent(event)
-        if (!wasResetPickView()) {
-          close()
-        }
-        return
-      }
-    },
-  )
-
-  return (
-    <m.div
-      className={styles.root}
-      data-likec4-search="true"
-      initial={false}
-      animate={{
-        opacity: 1,
-        scale: 1,
-        translateY: 0,
-      }}
-      exit={{
-        opacity: 0,
-        scale: 0.9,
-        translateY: -30,
-        transition: {
-          duration: 0.13,
-        },
-      }}
-    >
-      <Group wrap="nowrap">
-        <Box flex={1} px={'sm'}>
-          <LikeC4SearchInput />
-        </Box>
-        <Box flex={'0 0 auto'}>
-          <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="hover"
-            className={styles.scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-elements">
-                <ElementsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-        <GridCol span={6}>
-          <ScrollArea
-            type="hover"
-            className={styles.scrollArea}
-            pr="xs"
-            scrollbars="y">
-            <AnimatePresence>
-              <LayoutGroup id="likec4-search-views">
-                <ViewsColumn />
-              </LayoutGroup>
-            </AnimatePresence>
-          </ScrollArea>
-        </GridCol>
-      </Grid>
-      {pickViewActive && <PickView />}
-    </m.div>
-  )
-}
-
-function PickView() {
-  const pickview = usePickView()
-  // const navigateTo = useCloseSearchAndNavigateTo()
-  const focusTrapRef = useFocusTrap(!!pickview)
-  useFocusReturn({
-    opened: !!pickview,
-  })
-
-  return (
-    <AnimatePresence>
-      <LayoutGroup id="likec4-search-pickview">
-        {pickview && (
-          <>
-            <m.div
-              key="backdrop"
-              className={styles.pickviewBackdrop}
-              onClick={e => {
-                e.stopPropagation()
-                setPickView(null)
-              }}>
-            </m.div>
-            <m.div
-              key="pickview"
-              initial={{
-                opacity: 0,
-                scale: 0.95,
-                originY: 0,
-                translateX: '-50%',
-                translateY: -20,
-              }}
-              animate={{
-                opacity: 1,
-                scale: 1,
-                translateY: 0,
-              }}
-              exit={{
-                opacity: 0,
-                scale: 0.98,
-                translateY: -20,
-                transition: {
-                  duration: 0.1,
-                },
-              }}
-              className={styles.pickview}
-              data-likec4-search-views
-              ref={focusTrapRef}>
-              <Group px="sm" py="md" justify="space-between">
-                <Title order={2} lh={1}>Select view</Title>
-                <ActionIcon
-                  size={'md'}
-                  variant="default"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setPickView(null)
-                  }}>
-                  <IconX />
-                </ActionIcon>
-              </Group>
-
-              <ScrollAreaAutosize mah={'calc(100vh - 8rem - 50px)'} type="never">
-                {pickview.scoped.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                    <Title order={6} c={'dimmed'}>scoped views of the element</Title>
-                    {pickview.scoped.map((view, i) => (
-                      <ViewButton
-                        key={view.id}
-                        view={view}
-                        search={''}
-                        loop
-                        mod={{
-                          autofocus: i === 0,
-                        }}
-                      />
-                    ))}
-                  </Stack>
-                )}
-
-                {pickview.others.length > 0 && (
-                  <Stack gap={'sm'} px={'sm'} className={styles.pickviewGroup}>
-                    <Title order={6} c={'dimmed'}>views including this element</Title>
-                    {pickview.others.map((view, i) => (
-                      <ViewButton
-                        key={view.id}
-                        view={view}
-                        search={''}
-                        loop
-                        mod={{
-                          autofocus: i === 0 && pickview.scoped.length === 0,
-                        }}
-                      />
-                    ))}
-                  </Stack>
-                )}
-              </ScrollAreaAutosize>
-            </m.div>
-          </>
-        )}
-      </LayoutGroup>
-    </AnimatePresence>
-  )
-}

package/src/likec4diagram/ui/search/state.ts

@@ -1,78 +0,0 @@
-import { type Fqn, type LikeC4Model, type ViewId, DiagramNode } from '@likec4/core'
-import { createSafeContext } from '@mantine/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { useStore } from '@nanostores/react'
-import { atom, computed, onMount } from 'nanostores'
-import { useCallback, useDeferredValue } from 'react'
-import { useDiagram } from '../../../hooks/useDiagram'
-
-const $search = atom('')
-
-export function setSearch(term: string) {
-  $search.set(term)
-}
-
-export function useSearch() {
-  return useStore($search)
-}
-
-const $normalizedSearch = computed($search, search => {
-  const v = search.trim().toLowerCase()
-  return v.length > 1 ? v : ''
-})
-export function useNormalizedSearch() {
-  return useDeferredValue(useStore($normalizedSearch))
-}
-
-export const [LikeC4SearchContext, useCloseSearch] = createSafeContext<(cb?: () => void) => void>('LikeC4Search')
-
-type PickView = {
-  elementFqn: Fqn
-  scoped: LikeC4Model.View[]
-  others: LikeC4Model.View[]
-}
-const $pickView = atom<PickView | null>(null)
-onMount($search, () => {
-  // reset search on mount
-  $pickView.set(null)
-})
-
-export function usePickView() {
-  return useStore($pickView)
-}
-export function setPickView(data: PickView | null) {
-  $pickView.set(data)
-}
-export function wasResetPickView() {
-  if ($pickView.get() !== null) {
-    $pickView.set(null)
-    return true
-  }
-  return false
-}
-
-const $pickViewActive = computed($pickView, pickView => pickView !== null)
-export function useIsPickViewActive() {
-  return useStore($pickViewActive)
-}
-
-export function useCloseSearchAndNavigateTo() {
-  const diagram = useDiagram()
-  const close = useCloseSearch()
-  return useCallback((viewId: ViewId, fromElementFqn?: Fqn) => {
-    close(() => {
-      fromElementFqn ??= $pickView.get()?.elementFqn
-      setPickView(null)
-      const fromNode = fromElementFqn
-        ? diagram.getContext().view.nodes.find(n => DiagramNode.modelRef(n) === fromElementFqn)?.id
-        : undefined
-      if (diagram.currentView.id !== viewId) {
-        diagram.navigateTo(viewId, fromNode)
-        return
-      }
-      if (fromNode) {
-        diagram.focusNode(fromNode)
-      }
-    })
-  }, [close, diagram])
-}