@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -0,0 +1,105 @@
+import { defaultTheme } from '@likec4/core'
+import { Box, Text } from '@mantine/core'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
+import { deepEqual as eq } from 'fast-equals'
+import { scale, toHex } from 'khroma'
+import { memo, useMemo } from 'react'
+import { useDiagramState } from '../../../state'
+import { vars } from '../../../theme.css'
+import type { CompoundXYFlowNode } from '../../types'
+import { NavigateToBtn } from '../shared/NavigateToBtn'
+import { cssCompound, cssContainer, cssIndicator, cssNavigateBtn, cssTitle } from './CompoundNode.css'
+
+type CompoundNodeProps = Pick<
+  NodeProps<CompoundXYFlowNode>,
+  'id' | 'data' | 'width' | 'height' | 'selected'
+>
+
+// @ts-ignore
+const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
+  prev.id === next.id
+  && prev.selected === next.selected
+  && prev.width === next.width
+  && prev.height === next.height
+  && eq(prev.data, next.data)
+)
+
+const compoundColor = (color: string, depth: number) =>
+  toHex(
+    scale(color, {
+      l: -35 - 5 * depth,
+      s: -15 - 5 * depth
+    })
+  )
+
+export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
+  id,
+  data: {
+    element
+  }
+}) {
+  // useTilg()
+  const { color, depth = 0, ...compound } = element
+  const colors = useMemo(() => {
+    const colors = defaultTheme.elements[color]
+    return {
+      fill: compoundColor(colors.fill, depth),
+      stroke: compoundColor(colors.stroke, depth)
+    }
+  }, [color, depth])
+
+  // const w = toDomPrecision(width ?? compound.width)
+  // const h = toDomPrecision(height ?? compound.height)
+
+  const { isHovered, hasOnNavigateTo } = useDiagramState(s => ({
+    isHovered: s.hoveredNodeId === id,
+    hasOnNavigateTo: !!s.onNavigateTo
+  }))
+  const isnavigable = !!compound.navigateTo && hasOnNavigateTo
+
+  return (
+    <Box
+      className={clsx(cssContainer, 'likec4-compound-node')}
+      style={assignInlineVars({ fill: vars.element.fill, stroke: vars.element.stroke }, {
+        fill: colors.fill,
+        stroke: colors.stroke
+      })}
+      mod={{
+        'likec4-color': color,
+        'likec4-shape': compound.shape,
+        'likec4-navigable': isnavigable,
+        hovered: isHovered
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ visibility: 'hidden' }}
+      />
+      <svg className={cssIndicator}>
+        <rect
+          x={0}
+          y={0}
+          width={'100%'}
+          height={'100%'}
+          rx={6}
+        />
+      </svg>
+      <div className={clsx(cssCompound, 'likec4-compound')}>
+        <Text
+          component="div"
+          className={clsx(cssTitle, 'likec4-compound-title')}>
+          {compound.title}
+        </Text>
+      </div>
+      {isnavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ visibility: 'hidden' }}
+      />
+    </Box>
+  )
+})

package/src/xyflow/nodes/compound/index.ts

@@ -0,0 +1 @@
+export { CompoundNodeMemo as CompoundNode } from './CompoundNode'

package/src/xyflow/nodes/element/ElementIcon.tsx

@@ -0,0 +1,44 @@
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import clsx from 'clsx'
+import type { XYFlowNode } from '../../types'
+import { elementIcon, iconMaxH } from './element.css'
+
+type ElementIconProps = {
+  node: XYFlowNode['data']['element']
+  maxWidth?: number | undefined
+  paddingX?: number | undefined
+  paddingY?: number | undefined
+}
+
+export function ElementIcon({
+  node,
+  paddingY = 32
+}: ElementIconProps) {
+  if (!node.icon) {
+    return null
+  }
+  const firstLabel = node.labels[0]
+  if (!firstLabel) {
+    return null
+  }
+
+  const firstLabelY = Math.floor(firstLabel.pt[1] - firstLabel.fontSize * 1.25)
+  const maxIconHeight = Math.floor(firstLabelY - paddingY - 16)
+  // const maxIconWidth = maxWidth ?? node.width - paddingX * 2
+
+  // const centerY = paddingY + Math.floor(maxIconHeight / 2)
+  // const centerX = Math.floor(node.width / 2)
+
+  return (
+    <div
+      className={clsx(elementIcon, 'likec4-element-icon')}
+      style={assignInlineVars({ iconMaxH }, {
+        iconMaxH: maxIconHeight + 'px'
+      })}>
+      <img
+        src={node.icon!}
+        alt={node.title}
+      />
+    </div>
+  )
+}

package/src/xyflow/nodes/element/ElementLink.css.ts

@@ -0,0 +1,67 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { vars } from '../../../theme.css'
+
+export const elementLink = style({
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  paddingLeft: 6,
+  paddingBottom: 6,
+  pointerEvents: 'all',
+  selectors: {
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      bottom: 6
+    },
+    ':where([data-likec4-shape="queue"]) &': {
+      left: 12,
+      bottom: -3
+    }
+  }
+  // fontSize: rem(10),
+  // height: 12,
+  // width: '100%',
+  // height: '100%',
+  // vars: {
+  //   [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  // }
+})
+
+export const trigger = style({
+  display: 'flex',
+  lineHeight: 0.75,
+  fontSize: 11,
+  fontWeight: 500,
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.element.loContrast,
+  paddingTop: 2,
+  paddingBottom: 2,
+  paddingLeft: 4,
+  paddingRight: 5,
+  borderRadius: 3,
+  backgroundColor: `color-mix(in srgb, ${vars.element.stroke}, transparent 20%)`,
+  transition: 'all 180ms ease-out',
+  opacity: 0.85,
+  ':hover': {
+    color: vars.element.hiContrast,
+    backgroundColor: vars.element.stroke,
+    opacity: 1
+  }
+})
+
+globalStyle(`${trigger} .icon`, {
+  display: 'inline-block',
+  lineHeight: 1,
+  width: 10,
+  height: 10,
+  opacity: 0.6
+})
+globalStyle(`${trigger} span`, {
+  display: 'inline-block',
+  lineHeight: 1,
+  marginLeft: 3
+})
+
+export const linkButton = style({
+  textAlign: 'left'
+})

package/src/xyflow/nodes/element/ElementLink.tsx

@@ -0,0 +1,94 @@
+import { invariant } from '@likec4/core'
+import {
+  Anchor,
+  Box,
+  Button,
+  CopyButton,
+  Group,
+  HoverCard,
+  HoverCardDropdown,
+  HoverCardTarget,
+  Stack,
+  UnstyledButton
+} from '@mantine/core'
+import clsx from 'clsx'
+import { useId } from 'react'
+import { clamp } from 'remeda'
+import { Link } from '../../../icons'
+import type { XYFlowNode } from '../../types'
+import { elementLink, trigger } from './ElementLink.css'
+
+type ElementLinkProps = {
+  element: XYFlowNode['data']['element']
+}
+
+export function ElementLink({
+  element
+}: ElementLinkProps) {
+  invariant(element.links, 'ElementLink: links are required')
+  const id = useId()
+  // const mantineCtx = useMantineContext()
+  // const root = mantineCtx.getRootElement()
+
+  // const targetSelector = `.react-flow:has([data-likec4-linkid="${id}"])`
+  // // const target = root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
+
+  // const portalProps = useMemo(() => ({
+  //   get target(): HTMLElement | string {
+  //     const root = mantineCtx.getRootElement()
+  //     return root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
+  //   }
+  // }), [targetSelector])
+  return (
+    <div className={elementLink} data-likec4-linkid={id}>
+      <HoverCard
+        position="bottom-start"
+        shadow="lg"
+        radius="sm"
+        classNames={{
+          dropdown: clsx('nodrag', 'nopan')
+        }}
+        transitionProps={{
+          transition: 'pop'
+        }}
+        // portalProps={portalProps}
+        withinPortal={false}
+        floatingStrategy={'fixed'}
+        openDelay={350}
+        closeDelay={800}
+        offset={{
+          mainAxis: 5,
+          crossAxis: -10
+        }}>
+        <HoverCardTarget>
+          <UnstyledButton
+            className={clsx('nodrag nopan', trigger)}
+            autoFocus={false}>
+            <Link />
+            <span>links</span>
+          </UnstyledButton>
+        </HoverCardTarget>
+        <HoverCardDropdown onClick={e => e.stopPropagation()} p={'xs'}>
+          <Stack gap={'xs'}>
+            {element.links.map((link) => (
+              <Group key={link} wrap="nowrap" gap={'sm'}>
+                <Box flex={'1'} style={{ overflow: 'clip', maxWidth: clamp(element.width, { min: 200, max: 400 }) }}>
+                  <Anchor href={link} target="_blank" fz="13" truncate="end">
+                    {link}
+                  </Anchor>
+                </Box>
+                <CopyButton value={link}>
+                  {({ copied, copy }) => (
+                    <Button size="compact-xs" fz={'12'} onClick={copy} color={copied ? 'teal' : 'gray'}>
+                      {copied ? 'Copied' : 'Copy'}
+                    </Button>
+                  )}
+                </CopyButton>
+              </Group>
+            ))}
+          </Stack>
+        </HoverCardDropdown>
+      </HoverCard>
+    </div>
+  )
+}

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -0,0 +1,225 @@
+import { Text } from '@mantine/core'
+import { Handle, type NodeProps, Position } from '@xyflow/react'
+import clsx from 'clsx'
+import { motion, type Variants } from 'framer-motion'
+import { isNumber } from 'remeda'
+import { useDiagramState } from '../../../state'
+import type { ElementXYFlowNode } from '../../types'
+import { toDomPrecision } from '../../utils'
+import { NavigateToBtn } from '../shared/NavigateToBtn'
+import {
+  container,
+  cssElement,
+  cssNavigateBtn,
+  cssShapeSvg,
+  description as cssdescription,
+  indicator,
+  technology as csstechnology,
+  title as cssTitle
+} from './element.css'
+import { ElementIcon } from './ElementIcon'
+import { ElementLink } from './ElementLink'
+import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
+
+type ElementNodeProps = NodeProps<ElementXYFlowNode>
+
+const selectedScale = 1.015
+// Frame-motion variants
+const variants = {
+  idle: (_, { scale }) => ({
+    scale: 1,
+    transition: {
+      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+    }
+  }),
+  selected: (_, { scale }) => ({
+    scale: selectedScale,
+    transition: {
+      delay: isNumber(scale) && scale > selectedScale ? 0.075 : 0
+    }
+  }),
+  // dragging: {
+  //   scale: selectedScale
+  // },
+  // hovered: {
+  //   scale: 1.08
+  // },
+  // hover: (_, {scale}) => isNumber(scale) && scale < 1.02 ? ({
+  //   scale: 1.08,
+  // }) : ({
+  //   scale: 1.08,
+  //   transition: {
+  //     delay: 1
+  //   }
+  // }),
+  hovered: (_, { scale }) => ({
+    scale: 1.06,
+    transition: {
+      delay: isNumber(scale) && scale !== 1 && scale !== selectedScale ? 0 : 0.15
+    }
+  }),
+  tap: {
+    scale: 0.975
+  }
+  // tap: {
+  //   scale: 0.9
+  // }
+} satisfies Variants
+
+export function ElementNode({
+  id,
+  data: {
+    element
+  },
+  dragging,
+  selected = false,
+  width,
+  height
+}: ElementNodeProps) {
+  const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
+    isHovered: s.hoveredNodeId === id,
+    isInteractive: s.nodesDraggable || s.nodesSelectable,
+    isHovercards: s.showElementLinks,
+    hasOnNavigateTo: !!s.onNavigateTo
+  }))
+  // const diagramState = useDiagramState()
+  // const isNodeInteractive = diagramState.isNodeInteractive
+  // const isHovercards = diagramState.disableHovercards !== true
+  // const isNavigable = diagramState.hasOnNavigateTo && !!element.navigateTo
+  const isNavigable = hasOnNavigateTo && !!element.navigateTo
+
+  const w = toDomPrecision(width ?? element.width)
+  const h = toDomPrecision(height ?? element.height)
+
+  let animate: keyof typeof variants = 'idle'
+  switch (true) {
+    case dragging && selected:
+      animate = 'selected'
+      break
+    case dragging:
+      animate = 'idle'
+      break
+    case (isInteractive || hasOnNavigateTo) && isHovered:
+      animate = 'hovered'
+      break
+    case selected:
+      animate = 'selected'
+      break
+  }
+
+  // useTilg(animate, isHovered, isInteractive)
+
+  return (
+    <motion.div
+      id={id}
+      className={clsx(container, 'likec4-element-node')}
+      data-likec4-color={element.color}
+      data-likec4-shape={element.shape}
+      variants={variants}
+      initial={false}
+      animate={animate}
+      {...(isInteractive && {
+        whileTap: dragging ? animate : 'tap'
+      })}
+    >
+      {
+        /* <NodeToolbar
+        position={Position.Bottom}
+        align={'start'}
+        offset={-10}
+        isVisible={selected || isHovered}>
+<Button>editggg</Button>
+      </NodeToolbar> */
+      }
+      {
+        /* <NodeResizer minWidth={100} minHeight={30} />
+      <NodeToolbar
+        position={Position.Right}
+        align={'start'}
+        style={{
+          background: 'blue'
+        }}>
+        <Stack>
+          <Button>edit</Button>
+
+        </Stack>
+      </NodeToolbar>*/
+      }
+      {
+        /* {element.inEdges.map((edge) => (
+        <Handle
+          key={edge}
+          id={edge}
+          type="target"
+          position={Position.Top}
+          style={{ visibility: 'hidden' }}
+        />
+      ))} */
+      }
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ visibility: 'hidden' }}
+      />
+      <svg
+        className={cssShapeSvg}
+        viewBox={`0 0 ${w} ${h}`}
+        width={w}
+        height={h}
+      >
+        <g className={indicator}>
+          <SelectedIndicator
+            shape={element.shape}
+            w={w}
+            h={h}
+          />
+        </g>
+        <ElementShapeSvg
+          shape={element.shape}
+          w={w}
+          h={h}
+        />
+      </svg>
+      <div className={clsx(cssElement, 'likec4-element')}>
+        {element.icon && <ElementIcon node={element} />}
+        <Text
+          component="div"
+          className={clsx(cssTitle, 'likec4-element-title')}>
+          {element.title}
+        </Text>
+        {element.technology && (
+          <Text
+            component="div"
+            className={clsx(csstechnology, 'likec4-element-technology')}>
+            {element.technology}
+          </Text>
+        )}
+        {element.description && (
+          <Text
+            component="div"
+            className={clsx(cssdescription, 'likec4-element-description')}>
+            {element.description}
+          </Text>
+        )}
+      </div>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ visibility: 'hidden' }}
+      />
+      {
+        /* {element.outEdges.map((edge) => (
+        <Handle
+        key={edge}
+          id={edge}
+          type="source"
+          position={Position.Bottom}
+          style={{ visibility: 'hidden' }}
+        />
+      ))} */
+      }
+      {isHovercards && element.links && <ElementLink element={element} />}
+      {isNavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
+    </motion.div>
+  )
+}