@likec4/diagram 1.40.0 → 1.42.0

package/src/navigationpanel/walkthrough/WalkthroughPanel.tsx

@@ -1,88 +0,0 @@
-import { RichText } from '@likec4/core'
-import { css, cx } from '@likec4/styles/css'
-import { styled } from '@likec4/styles/jsx'
-import { vstack } from '@likec4/styles/patterns'
-import {
-  ScrollAreaAutosize,
-} from '@mantine/core'
-import { isNonNull, isTruthy } from 'remeda'
-import { MarkdownBlock } from '../../custom'
-import { useDiagramContext } from '../../hooks/useDiagram'
-import type { DiagramContext } from '../../state/types'
-
-const SectionHeader = styled('div', {
-  base: {
-    fontSize: 'xs',
-    color: 'mantine.colors.dimmed',
-    fontWeight: 500,
-    userSelect: 'none',
-    mb: 'xxs',
-  },
-})
-
-function selectWalkthroughNotes(s: DiagramContext) {
-  const isActive = isNonNull(s.activeWalkthrough)
-  const activeStepIndex = isActive ? s.xyedges.findIndex(e => e.id === s.activeWalkthrough?.stepId) : -1
-  return {
-    isActive,
-    isParallel: isActive && isTruthy(s.activeWalkthrough?.parallelPrefix),
-    hasNext: isActive && activeStepIndex < s.xyedges.length - 1,
-    hasPrevious: isActive && activeStepIndex > 0,
-    notes: isActive ? s.xyedges[activeStepIndex]?.data?.notes ?? RichText.EMPTY : null,
-  }
-}
-
-export const WalkthroughPanel = () => {
-  const { notes } = useDiagramContext(selectWalkthroughNotes)
-
-  if (!notes || notes.isEmpty) {
-    return null
-  }
-
-  return (
-    <styled.div position={'relative'}>
-      <ScrollAreaAutosize
-        className={cx(
-          'nowheel nopan nodrag',
-          vstack({
-            position: 'absolute',
-            layerStyle: 'likec4.dropdown',
-            gap: 'sm',
-            padding: 'md',
-            paddingTop: 'xxs',
-            pointerEvents: 'all',
-            maxWidth: 'calc(100cqw - 32px)',
-            minWidth: 'calc(100cqw - 50px)',
-            maxHeight: 'calc(100cqh - 100px)',
-            width: 'max-content',
-            cursor: 'default',
-            overflow: 'auto',
-            overscrollBehavior: 'contain',
-            '@/sm': {
-              minWidth: 400,
-              maxWidth: 550,
-            },
-            '@/lg': {
-              maxWidth: 700,
-            },
-          }),
-        )}
-        // miw={180}
-        // maw={450}
-        // mah={350}
-        type="scroll"
-        // mt={2}
-      >
-        <SectionHeader>Notes</SectionHeader>
-        <MarkdownBlock
-          value={notes}
-          fontSize="sm"
-          emptyText="No description"
-          className={css({
-            userSelect: 'all',
-          })}
-        />
-      </ScrollAreaAutosize>
-    </styled.div>
-  )
-}

package/src/navigationpanel/walkthrough/index.tsx

@@ -1,2 +0,0 @@
-export { ActiveWalkthroughControls } from './ActiveWalkthroughControls'
-export { DynamicViewControls } from './DynamicViewControls'

package/src/overlays/Overlays.tsx

@@ -1,121 +0,0 @@
-import { nonexhaustive } from '@likec4/core'
-import { useSelector } from '@xstate/react'
-import { animate } from 'motion'
-import { AnimatePresence, LayoutGroup, useReducedMotionConfig } from 'motion/react'
-import { useEffect, useMemo } from 'react'
-import { ErrorBoundary } from 'react-error-boundary'
-import { isNonNullish } from 'remeda'
-import type { AnyActorRef } from 'xstate'
-import { ErrorFallback } from '../components/ErrorFallback'
-import { DiagramFeatures } from '../context'
-import { useXYStore } from '../hooks'
-import { ElementDetails } from './element-details/ElementDetails'
-import { Overlay } from './overlay/Overlay'
-import { type OverlaysActorRef, type OverlaysActorSnapshot } from './overlaysActor'
-import { RelationshipDetails } from './relationship-details/RelationshipDetails'
-import { RelationshipsBrowser } from './relationships-browser/RelationshipsBrowser'
-
-const selectOverlays = (s: OverlaysActorSnapshot) => {
-  return s.context.overlays.map((overlay) => {
-    switch (overlay.type) {
-      case 'relationshipsBrowser':
-        return s.children[overlay.id]
-          ? {
-            type: overlay.type,
-            actorRef: s.children[overlay.id]!,
-          }
-          : null
-      case 'relationshipDetails':
-        return s.children[overlay.id]
-          ? {
-            type: overlay.type,
-            actorRef: s.children[overlay.id]!,
-          }
-          : null
-      case 'elementDetails':
-        return s.children[overlay.id]
-          ? {
-            type: overlay.type,
-            actorRef: s.children[overlay.id]!,
-          }
-          : null
-      default:
-        nonexhaustive(overlay)
-    }
-  }).filter(isNonNullish)
-}
-const compareSelectOverlays = <T extends ReturnType<typeof selectOverlays>>(a: T, b: T) => {
-  return a.length === b.length && a.every((overlay, i) => {
-    return overlay.actorRef === b[i]!.actorRef
-  })
-}
-
-export function Overlays({ overlaysActorRef }: { overlaysActorRef: OverlaysActorRef }) {
-  const xyflowDomNode = useXYStore(s => s.domNode)
-  const xyflowRendererDom = useMemo(() => xyflowDomNode?.querySelector('.react-flow__renderer') ?? null, [
-    xyflowDomNode,
-  ])
-  const overlays = useSelector(overlaysActorRef, selectOverlays, compareSelectOverlays)
-  const isMotionReduced = useReducedMotionConfig() ?? false
-
-  const isActiveOverlay = overlays.some((overlay) => overlay.type === 'elementDetails')
-
-  useEffect(() => {
-    if (!xyflowRendererDom || isMotionReduced) return
-    animate(xyflowRendererDom, {
-      opacity: isActiveOverlay ? 0.7 : 1,
-      filter: isActiveOverlay ? 'grayscale(1)' : 'grayscale(0)',
-      transform: isActiveOverlay ? `perspective(400px) translateZ(-12px) translateY(3px)` : `translateY(0)`,
-    }, {
-      duration: isActiveOverlay ? 0.35 : 0.17,
-    })
-  }, [isActiveOverlay, xyflowRendererDom])
-
-  const close = (actorRef: AnyActorRef) => {
-    overlaysActorRef.send({ type: 'close', actorId: actorRef.id })
-  }
-
-  const overlaysReact = overlays.map((overlay, index) => {
-    switch (overlay.type) {
-      case 'relationshipsBrowser':
-        return (
-          <Overlay
-            key={overlay.actorRef.sessionId}
-            overlayLevel={index}
-            onClose={() => close(overlay.actorRef)}>
-            <RelationshipsBrowser actorRef={overlay.actorRef} />
-          </Overlay>
-        )
-      case 'relationshipDetails':
-        return (
-          <Overlay
-            overlayLevel={index}
-            key={overlay.actorRef.sessionId}
-            onClose={() => close(overlay.actorRef)}>
-            <RelationshipDetails actorRef={overlay.actorRef} />
-          </Overlay>
-        )
-      case 'elementDetails':
-        return (
-          <ElementDetails
-            key={overlay.actorRef.sessionId}
-            actorRef={overlay.actorRef}
-            onClose={() => close(overlay.actorRef)} />
-        )
-      default:
-        nonexhaustive(overlay)
-    }
-  })
-
-  return (
-    <DiagramFeatures.Overlays>
-      <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => overlaysActorRef.send({ type: 'close.all' })}>
-        <LayoutGroup>
-          <AnimatePresence>
-            {overlaysReact}
-          </AnimatePresence>
-        </LayoutGroup>
-      </ErrorBoundary>
-    </DiagramFeatures.Overlays>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { useCallbackRef } from '@mantine/hooks'
-import { useSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import type { ElementDetailsActorRef } from './actor'
-import { ElementDetailsActorContext } from './actorContext'
-import { ElementDetailsCard } from './ElementDetailsCard'
-
-export type ElementDetailsProps = {
-  actorRef: ElementDetailsActorRef
-  onClose: () => void
-}
-export function ElementDetails({
-  actorRef,
-  onClose,
-}: ElementDetailsProps) {
-  const props = useSelector(
-    actorRef,
-    useCallbackRef((s) => ({
-      viewId: s.context.currentView.id,
-      fromNode: s.context.initiatedFrom.node,
-      rectFromNode: s.context.initiatedFrom.clientRect,
-      fqn: s.context.subject,
-    })),
-    shallowEqual,
-  )
-  return (
-    <ElementDetailsActorContext.Provider value={actorRef}>
-      <ElementDetailsCard
-        onClose={onClose}
-        {...props} />
-    </ElementDetailsActorContext.Provider>
-  )
-}

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -1,257 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const backdropBlur = '--_blur'
-export const backdropOpacity = '--_opacity'
-
-export const dialog = css({
-  boxSizing: 'border-box',
-  margin: '0',
-  padding: '0',
-  position: 'fixed',
-  inset: '0',
-  width: '100vw',
-  height: '100vh',
-  maxWidth: '100vw',
-  maxHeight: '100vh',
-  background: '[transparent]',
-  border: 'transparent',
-  _backdrop: {
-    // WebkitBackdropFilter: `blur(${backdropBlur})`,
-    backdropFilter: 'auto',
-    backdropBlur: `var(${backdropBlur})`,
-    backgroundColor: `[rgb(36 36 36 / var(${backdropOpacity}, 5%))]`,
-  },
-})
-export const card = css({
-  position: 'absolute',
-  pointerEvents: 'all',
-  gap: 'lg',
-  justifyContent: 'stretch',
-  backgroundColor: {
-    base: 'mantine.colors.body',
-    _dark: 'mantine.colors.dark[6]',
-  },
-  border: `none`,
-  backgroundImage: `
-    linear-gradient(180deg,
-      color-mix(in srgb, var(--likec4-palette-fill) 60%, transparent),
-      color-mix(in srgb, var(--likec4-palette-fill) 20%, transparent) 8px,
-      color-mix(in srgb, var(--likec4-palette-fill) 14%, transparent) 20px,
-      transparent 80px
-    ),
-    linear-gradient(180deg, var(--likec4-palette-fill), var(--likec4-palette-fill) 4px, transparent 4px)
-  `,
-  '& .react-flow__attribution': {
-    display: 'none',
-  },
-})
-
-export const cardHeader = css({
-  flex: 0,
-  cursor: 'move',
-})
-
-export const title = css({
-  display: 'block',
-  fontFamily: 'likec4.element',
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 600,
-  fontSize: '24px',
-  // lineHeight: 1.15,
-  lineHeight: 'xs',
-  // color: vars.element.hiContrast
-})
-
-const iconSize = '40px'
-export const elementIcon = css({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  alignSelf: 'flex-start',
-  cursor: 'move',
-  _dark: {
-    mixBlendMode: 'hard-light',
-  },
-  '& :where(svg, img)': {
-    width: '100%',
-    height: 'auto',
-    maxHeight: '100%',
-    pointerEvents: 'none',
-    filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 5%))
-    drop-shadow(1px 1px 16px rgb(0 0 0 / 2%))
-  `,
-  },
-  '& img': {
-    objectFit: 'contain',
-  },
-})
-
-const viewTitleColor = '--view-title-color'
-const iconColor = '--icon-color'
-export const viewButton = css({
-  // display: 'flex',
-  width: '100%',
-  background: 'mantine.colors.body',
-  borderRadius: 'sm',
-  padding: `[10px 8px]`,
-  // gap: 6,
-  // alignItems: 'flex-start',
-  transition: 'fast',
-  border: `1px dashed`,
-  borderColor: 'mantine.colors.defaultBorder',
-  [viewTitleColor]: '{colors.mantine.colors.dark[1]}',
-  _hover: {
-    background: 'mantine.colors.defaultHover',
-    [iconColor]: '{colors.mantine.colors.dark[1]}',
-    [viewTitleColor]: '{colors.mantine.colors.defaultColor}',
-  },
-  _dark: {
-    background: 'mantine.colors.dark[6]',
-  },
-  _light: {
-    [iconColor]: '{colors.mantine.colors.gray[6]}',
-    [viewTitleColor]: '{colors.mantine.colors.gray[7]}',
-    _hover: {
-      [iconColor]: '{colors.mantine.colors.gray[7]}',
-    },
-  },
-
-  '& .mantine-ThemeIcon-root': {
-    transition: 'fast',
-    // color: fallbackVar(iconColor, 'mantine.colors.dark[2])',
-    color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
-    '--ti-size': '22px',
-    _hover: {
-      color: 'mantine.colors.defaultColor',
-    },
-  },
-
-  '& > *': {
-    transition: `all 130ms {easings.inOut}`,
-  },
-  '&:hover > *': {
-    transitionTimingFunction: 'out',
-    transform: 'translateX(1.6px)',
-  },
-})
-
-export const viewButtonTitle = css({
-  transition: 'fast',
-  color: `[var(${viewTitleColor}, {colors.mantine.colors.gray[7]})]`,
-  fontSize: '15px',
-  fontWeight: 500,
-  lineHeight: '1.4',
-})
-
-export const tabsRoot = css({
-  flex: 1,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'stretch',
-  overflow: 'hidden',
-  gap: 'sm',
-})
-
-export const tabsList = css({
-  // flex: '0',
-  background: 'mantine.colors.gray[1]',
-  borderRadius: 'sm',
-  flexWrap: 'nowrap',
-  gap: '1.5', // 6px
-  padding: '1',
-  _dark: {
-    background: 'mantine.colors.dark[7]',
-  },
-})
-
-export const tabsTab = css({
-  fontSize: 'xs',
-  fontWeight: 500,
-  flexGrow: 1,
-  padding: '[6px 8px]',
-  transition: 'fast',
-  borderRadius: 'sm',
-  color: 'mantine.colors.gray[7]',
-  _hover: {
-    transitionTimingFunction: 'out',
-    color: 'mantine.colors.defaultColor',
-    background: 'mantine.colors.gray[3]',
-  },
-  ['&[data-active]']: {
-    transition: 'none',
-    background: 'mantine.colors.white',
-    shadow: 'xs',
-    color: 'mantine.colors.defaultColor',
-  },
-  _dark: {
-    color: 'mantine.colors.dark[1]',
-    _hover: {
-      color: 'mantine.colors.white',
-      background: 'mantine.colors.dark[6]',
-    },
-
-    [`&:is([data-active])`]: {
-      color: 'mantine.colors.white',
-      background: 'mantine.colors.dark[5]',
-    },
-  },
-})
-
-export const tabsPanel = css({
-  flex: 1,
-  overflow: 'hidden',
-  position: 'relative',
-  '&:not(:has(.mantine-ScrollArea-root))': {
-    paddingLeft: '1',
-    paddingRight: '1',
-  },
-  '& .mantine-ScrollArea-root': {
-    width: '100%',
-    height: '100%',
-    '& > div': {
-      paddingLeft: '1',
-      paddingRight: '1',
-    },
-  },
-})
-
-export const propertiesGrid = css({
-  flex: 1,
-  display: 'grid',
-  gridTemplateColumns: 'min-content 1fr',
-  gridAutoRows: 'min-content max-content',
-  gap: `[24px 20px]`,
-  alignItems: 'baseline',
-  justifyItems: 'stretch',
-})
-
-export const propertyLabel = css({
-  justifySelf: 'end',
-  textAlign: 'right',
-  userSelect: 'none',
-})
-
-export const resizeHandle = css({
-  position: 'absolute',
-  width: '14px',
-  height: '14px',
-  border: `3.5px solid`,
-  borderColor: 'mantine.colors.dark[3]',
-  borderTop: 'none',
-  borderLeft: 'none',
-  borderRadius: '2px',
-  bottom: '0.5',
-  right: '0.5',
-  transition: 'fast',
-  cursor: 'se-resize',
-  _hover: {
-    borderWidth: '4px',
-    borderColor: 'mantine.colors.dark[1]',
-  },
-})