@likec4/diagram 1.41.0 → 1.42.0

package/src/overlays/element-details/TabPanelStructure.tsx

@@ -1,121 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from '@mantine/core'
-import { IconInfoCircle } from '@tabler/icons-react'
-import { type ReactNode, useEffect, useMemo } from 'react'
-import * as css from './TabPanelStructure.css'
-
-interface ElementTreeNodeData {
-  label: ReactNode
-  value: string
-  element: LikeC4Model.Element
-  type: 'ancestor' | 'current' | 'descedant'
-  children: TreeNodeData[]
-}
-
-export interface MessageNodeData {
-  label: ReactNode
-  value: string
-  type: 'message'
-  children: TreeNodeData[]
-}
-
-export type TreeNodeData = ElementTreeNodeData | MessageNodeData
-
-type TabPanelStructureProps = {
-  element: LikeC4Model.Element
-}
-
-export const ElementLabel = ({
-  element,
-}: { element: LikeC4Model.Element; type: 'ancestor' | 'current' | 'descedant' }) => (
-  <Box className={css.elementLabel}>
-    <Text component="div" fz={'sm'} fw={'500'}>{element.title}</Text>
-  </Box>
-)
-
-// const Render = ({
-//   node
-// }: RenderTreeNodePayload) => {
-// }
-const setHoveredNode = () => {}
-export function TabPanelStructure({
-  element,
-}: TabPanelStructureProps) {
-  const tree = useTree({
-    multiple: false,
-  })
-  tree.setHoveredNode = setHoveredNode
-
-  const data = useMemo(() => {
-    let seq = 1
-
-    const messageNode = (label: ReactNode): MessageNodeData => ({
-      label,
-      value: `msg${seq++}`,
-      type: 'message',
-      children: [],
-    })
-
-    const current: TreeNodeData = {
-      label: <ElementLabel type="current" element={element} />,
-      value: element.id,
-      element,
-      type: 'current',
-      children: [...element.children()].map((child): TreeNodeData => ({
-        label: <ElementLabel type="descedant" element={child} />,
-        value: child.id,
-        element: child,
-        type: 'descedant',
-        children: [],
-      })),
-    }
-    if (current.children.length === 0) {
-      current.children.push(
-        messageNode(<Pill radius={'sm'}>no nested</Pill>),
-      )
-    }
-    let ancestor = [...element.ancestors()].reduce((acc, parent) => ({
-      label: <ElementLabel type="ancestor" element={parent} />,
-      value: parent.id,
-      element: parent,
-      type: 'ancestor' as const,
-      children: [acc],
-    }), current)
-
-    return [
-      ancestor,
-    ]
-  }, [element])
-
-  useEffect(() => {
-    tree.expandAllNodes()
-  }, [data])
-
-  return (
-    <>
-      <Alert variant="light" color="orange" title="In development" icon={<IconInfoCircle />}>
-        We need your feedback. Share your thoughts and ideas -{' '}
-        <Anchor
-          fz="sm"
-          fw={500}
-          underline="hover"
-          c={'orange'}
-          href="https://github.com/likec4/likec4/discussions/"
-          target="_blank">
-          GitHub discussions
-        </Anchor>
-      </Alert>
-      <Tree
-        levelOffset={'xl'}
-        allowRangeSelection={false}
-        expandOnClick={false}
-        expandOnSpace={false}
-        classNames={{
-          label: css.treeNodeLabel,
-        }}
-        data={data}
-        tree={tree}
-      />
-    </>
-  )
-}

package/src/overlays/element-details/actor.ts

@@ -1,104 +0,0 @@
-import type { DiagramView, Fqn, NodeId } from '@likec4/core/types'
-import type { Rect } from '@xyflow/system'
-import {
-  type ActorLogicFrom,
-  type ActorRefFromLogic,
-  type SnapshotFrom,
-  assign,
-  sendTo,
-  setup,
-  spawnChild,
-  stopChild,
-} from 'xstate'
-import { relationshipsBrowserLogic } from '../relationships-browser/actor'
-
-export type Input = {
-  subject: Fqn
-  currentView: DiagramView
-  initiatedFrom?: {
-    node?: NodeId
-    clientRect?: Rect
-  }
-}
-
-export type Context = {
-  subject: Fqn
-  currentView: DiagramView
-  initiatedFrom: {
-    node: NodeId | null
-    clientRect: Rect | null
-  }
-}
-
-export type Events =
-  | { type: 'change.subject'; subject: Fqn }
-  | { type: 'close' }
-
-export const elementDetailsLogic = setup({
-  types: {
-    context: {} as Context,
-    input: {} as Input,
-    events: {} as Events,
-    children: {} as {
-      [key: `${string}-relationships`]: 'relationshipsBrowserLogic'
-    },
-  },
-  actors: {
-    relationshipsBrowserLogic,
-  },
-}).createMachine({
-  id: 'element-details',
-  context: ({ input }) => ({
-    ...input,
-    initiatedFrom: {
-      node: input.initiatedFrom?.node ?? null,
-      clientRect: input.initiatedFrom?.clientRect ?? null,
-    },
-  }),
-  initial: 'active',
-  states: {
-    'active': {
-      entry: spawnChild('relationshipsBrowserLogic', {
-        id: ({ self }) => `${self.id}-relationships`,
-        input: ({ context }) => ({
-          subject: context.subject,
-          viewId: context.currentView.id,
-          scope: 'view',
-          enableSelectSubject: false,
-          enableChangeScope: true,
-          closeable: false,
-        }),
-      }),
-      exit: [
-        sendTo(({ self }) => `${self.id}-relationships`, { type: 'close' }),
-        stopChild(({ self }) => `${self.id}-relationships`),
-      ],
-      on: {
-        'change.subject': {
-          actions: assign({
-            subject: ({ event }) => event.subject,
-          }),
-        },
-        'close': 'closed',
-      },
-    },
-    closed: {
-      id: 'closed',
-      type: 'final',
-    },
-  },
-  // exit: assign({
-  //   initialized: false,
-  //   xyflow: null,
-  //   layouted: null,
-  //   xystore: null,
-  //   xyedges: [],
-  //   xynodes: [],
-  // }),
-})
-
-export interface ElementDetailsLogic extends ActorLogicFrom<typeof elementDetailsLogic> {
-}
-export interface ElementDetailsActorRef extends ActorRefFromLogic<ElementDetailsLogic> {
-}
-export type ElementDetailsSnapshot = SnapshotFrom<ElementDetailsLogic>

package/src/overlays/element-details/actorContext.tsx

@@ -1,16 +0,0 @@
-import { createContext, useContext } from 'react'
-import type { ElementDetailsActorRef } from './actor'
-
-/**
- * To improve experience with HMR, we use `createSafeContext` as a boundary for hoooks
- */
-export const ElementDetailsActorContext = createContext<ElementDetailsActorRef>(null as any)
-ElementDetailsActorContext.displayName = 'ElementDetailsActorContext'
-
-export const useElementDetailsActorRef = () => {
-  const ctx = useContext(ElementDetailsActorContext)
-  if (ctx === null) {
-    throw new Error('ElementDetailsActorRef is not provided')
-  }
-  return ctx
-}

package/src/overlays/overlay/Overlay.css.ts

@@ -1,123 +0,0 @@
-import { css, sva } from '@likec4/styles/css'
-
-export const backdropBlur = '--_blur'
-export const backdropOpacity = '--_opacity'
-
-export const level = '--_level'
-const offset = '--_offset'
-const inset = '--_inset'
-
-const borderRadius = '--_border-radius'
-const dialog = css.raw({
-  boxSizing: 'border-box',
-  margin: '0',
-  position: 'fixed',
-  width: '100vw',
-  height: '100vh',
-  maxWidth: '100vw',
-  maxHeight: '100vh',
-  background: `mantine.colors.defaultBorder/50`,
-  shadow: 'xl',
-  border: 'transparent',
-  outline: 'none',
-  borderRadius: `var(${borderRadius})`,
-  [backdropBlur]: '0px',
-  [level]: '0',
-  [offset]: '0px',
-  [inset]: 'calc((1 + var(--_level) * 0.75) * var(--_offset))',
-  [backdropOpacity]: '0%',
-  [borderRadius]: '0px',
-  _backdrop: {
-    cursor: 'zoom-out',
-  },
-  inset: '0',
-  padding: '0',
-})
-
-const body = css.raw({
-  position: 'relative',
-  containerName: 'likec4-dialog',
-  containerType: 'size',
-  border: `0 solid transparent`,
-  overflow: 'hidden',
-  width: '100%',
-  height: '100%',
-  background: 'mantine.colors.body',
-})
-
-export const overlay = sva({
-  slots: ['dialog', 'body'],
-  base: {
-    dialog: dialog,
-    body: body,
-  },
-  variants: {
-    fullscreen: {
-      false: {
-        dialog: {
-          sm: {
-            inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
-            width: 'calc(100vw - 2 * var(--_inset))',
-            height: 'calc(100vh - var(--_offset) - var(--_inset))',
-            [borderRadius]: '6px',
-            padding: '1.5', // 6px
-            [offset]: '1rem',
-          },
-          md: {
-            [offset]: '1rem',
-          },
-          lg: {
-            [offset]: '2rem',
-          },
-          xl: {
-            [offset]: '4rem',
-          },
-        },
-        body: {
-          sm: {
-            borderRadius: `calc(var(${borderRadius}) - 2px)`,
-          },
-        },
-      },
-      true: {
-        dialog: {
-          inset: '0',
-          padding: '0',
-        },
-      },
-    },
-    // transparent: {
-    //   false: {
-    //   },
-    //   true: {
-    //     dialog: {
-    //       background: 'transparent',
-    //     },
-    //   },
-    // },
-    withBackdrop: {
-      false: {
-        dialog: {
-          _backdrop: {
-            display: 'none',
-          },
-        },
-      },
-      true: {
-        dialog: {
-          _backdrop: {
-            backdropFilter: `blur(var(${backdropBlur}))`,
-            backgroundColor: {
-              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
-            },
-          },
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    fullscreen: false,
-    withBackdrop: true,
-  },
-})

package/src/overlays/overlay/Overlay.tsx

@@ -1,169 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import {
-  RemoveScroll,
-} from '@mantine/core'
-import { useFocusTrap, useMergedRef } from '@mantine/hooks'
-import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web'
-import { m, useReducedMotionConfig } from 'motion/react'
-import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
-import { stopPropagation } from '../../utils'
-import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
-
-export type OverlayProps = PropsWithChildren<{
-  fullscreen?: boolean | undefined
-  withBackdrop?: boolean | undefined
-  overlayLevel?: number
-  className?: string
-  classes?: {
-    dialog?: string
-    body?: string
-  }
-  backdrop?: {
-    opacity?: number
-  }
-  openDelay?: number
-  onClose: () => void
-  onClick?: never
-}>
-
-export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
-  onClose,
-  className,
-  classes,
-  overlayLevel = 0,
-  children,
-  fullscreen = false,
-  withBackdrop = true,
-  backdrop,
-  openDelay = 130,
-  ...rest
-}, ref) => {
-  const [opened, setOpened] = useState(openDelay === 0)
-  const focusTrapRef = useFocusTrap(opened)
-  const dialogRef = useRef<HTMLDialogElement>(null)
-  const isClosingRef = useRef(false)
-
-  const motionNotReduced = useReducedMotionConfig() !== true
-
-  const onCloseRef = useRef(onClose)
-  onCloseRef.current = onClose
-
-  const close = useDebouncedCallback(
-    () => {
-      if (isClosingRef.current) return
-      isClosingRef.current = true
-      onCloseRef.current()
-    },
-    [],
-    50,
-  )
-
-  useLayoutEffect(() => {
-    if (!dialogRef.current?.open) {
-      // Move dialog to the top of the DOM
-      dialogRef.current?.showModal()
-    }
-  }, [])
-
-  useTimeoutEffect(() => {
-    setOpened(true)
-  }, openDelay > 0 ? openDelay : undefined)
-
-  const styles = overlayCVA({
-    fullscreen,
-    withBackdrop,
-  })
-
-  let targetBackdropOpacity = overlayLevel > 0 ? '50%' : '60%'
-  if (backdrop?.opacity !== undefined) {
-    targetBackdropOpacity = `${backdrop.opacity * 100}%`
-  }
-  return (
-    <m.dialog
-      ref={useMergedRef(
-        dialogRef,
-        focusTrapRef,
-        ref,
-      )}
-      className={cx(
-        classes?.dialog,
-        className,
-        styles.dialog,
-        fullscreen && RemoveScroll.classNames.fullWidth,
-      )}
-      layout
-      style={{
-        // @ts-ignore
-        [cssVarLevel]: overlayLevel,
-      }}
-      {...motionNotReduced
-        ? ({
-          initial: {
-            [backdropBlur]: '0px',
-            [backdropOpacity]: '0%',
-            scale: 0.95,
-            originY: 0,
-            translateY: -20,
-            opacity: 0,
-          },
-          animate: {
-            [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
-            [backdropOpacity]: targetBackdropOpacity,
-            scale: 1,
-            opacity: 1,
-            translateY: 0,
-            transition: {
-              delay: 0.075,
-            },
-          },
-          exit: {
-            opacity: 0,
-            scale: 0.98,
-            translateY: -20,
-            transition: {
-              duration: 0.1,
-            },
-            [backdropBlur]: '0px',
-            [backdropOpacity]: '0%',
-          },
-        })
-        : {
-          initial: {
-            [backdropBlur]: '8px',
-            [backdropOpacity]: targetBackdropOpacity,
-          },
-        }}
-      onClick={e => {
-        e.stopPropagation()
-        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
-          dialogRef.current?.close()
-          return
-        }
-      }}
-      onCancel={e => {
-        e.preventDefault()
-        e.stopPropagation()
-        close()
-      }}
-      onDoubleClick={stopPropagation}
-      onPointerDown={stopPropagation}
-      onClose={e => {
-        e.stopPropagation()
-        close()
-      }}
-      {...rest}
-    >
-      <RemoveScroll forwardProps>
-        <div
-          className={cx(
-            classes?.body,
-            styles.body,
-            'overlay-body',
-          )}>
-          {opened && <>{children}</>}
-        </div>
-      </RemoveScroll>
-    </m.dialog>
-  )
-})
-Overlay.displayName = 'Overlay'