@likec4/diagram 1.30.0 → 1.32.0

package/src/base/primitives/edge/EdgePath.tsx

@@ -1,4 +1,4 @@
-import type { DiagramEdge } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import * as m from 'motion/react-m'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
@@ -13,11 +14,12 @@ type ElementActionButtonsProps = NodeProps & {
 
 const container = css({
   position: 'absolute',
-  top: `calc(100% - 28px)`,
-  // transform: 'translateY(-100%)',
-  left: 0,
-  width: '100%',
-  minHeight: '28px',
+  zIndex: 1,
+  top: `calc(100% - 30px)`,
+  transform: 'translateX(-50%)',
+  left: `50%`,
+  width: 'auto',
+  minHeight: '30px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -47,14 +49,13 @@ export function ElementActionButtons({
   }
   return (
     <Box className={container}>
-      <Box
-        component={m.div}
+      <m.div
         layoutRoot
         key={`${id}-action-buttons`}
         initial={false}
         style={{
           originY: 0,
-          gap: '8px',
+          gap: 6,
         }}
         animate={{
           opacity: (isHovered || selected) ? 1 : 0.75,
@@ -82,7 +83,7 @@ export function ElementActionButtons({
             {button.icon}
           </ActionIcon>
         ))}
-      </Box>
+      </m.div>
     </Box>
   )
 }

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import * as m from 'motion/react-m'

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -1,29 +1,33 @@
 import {
-  type DiagramNode,
+  type Color,
+  type ElementShape,
   type ElementStyle,
   DefaultPaddingSize,
   DefaultShapeSize,
   DefaultTextSize,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
+import type { LayoutProps } from 'motion/react'
 import * as m from 'motion/react-m'
-import { type PropsWithChildren, forwardRef } from 'react'
+import { type CSSProperties, type ReactNode, forwardRef } from 'react'
 import type { NodeProps } from '../../types'
 import * as styles from './ElementNodeContainer.css'
 
-type RequiredData = Pick<
-  DiagramNode,
-  | 'color'
-  | 'shape'
-  | 'style'
->
+export type RequiredData = {
+  color: Color
+  shape: ElementShape
+  style?: ElementStyle
+}
 
-type ElementNodeContainerProps =
-  & BoxProps
-  & PropsWithChildren<{
+export type ElementNodeContainerProps =
+  & {
     nodeProps: NodeProps<RequiredData>
-  }>
+    children?: ReactNode | undefined
+    className?: string | undefined
+    style?: CSSProperties | undefined
+    [key: `data-${string}`]: string | undefined
+  }
+  & LayoutProps
 
 export function nodeSizes({
   size,
@@ -49,73 +53,76 @@ export function nodeSizes({
   }
 }
 
-export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNodeContainerProps>(
-  forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
-    nodeProps: {
-      selected = false,
-      selectable = false,
-      data: {
-        hovered: isHovered = false,
-        dimmed: isDimmed = false,
-        ...data
-      },
+/**
+ * Top-level primitive to compose leaf nodes renderers.
+ * This container provides the state via data-* attributes
+ */
+export const ElementNodeContainer = forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
+  nodeProps: {
+    selected = false,
+    selectable = false,
+    data: {
+      hovered: isHovered = false,
+      dimmed: isDimmed = false,
+      ...data
     },
-    style,
-    children,
-    ...rest
-  }, ref) => {
-    let scale = 1
-    switch (true) {
-      case isHovered:
-        scale = 1.05
-        break
-      case selected:
-        scale = 1.02
-        break
-    }
+  },
+  className,
+  style,
+  children,
+  ...rest
+}, ref) => {
+  let scale = 1
+  switch (true) {
+    case isHovered:
+      scale = 1.05
+      break
+    case selected:
+      scale = 1.02
+      break
+  }
 
-    const {
-      size,
-      padding,
-      textSize,
-    } = nodeSizes(data.style)
+  const {
+    size,
+    padding,
+    textSize,
+  } = nodeSizes(data.style ?? {})
 
-    return (
-      <Box
-        component={m.div}
-        ref={ref}
-        className={cx(
-          css({
-            likec4Palette: data.color,
-          }),
-          styles.container,
-          'group',
-          'likec4-element-node',
-        )}
-        initial={false}
-        {...selectable && {
-          animate: {
-            scale,
-          },
-          whileTap: { scale: 0.98 },
-        }}
-        data-likec4-hovered={isHovered}
-        data-likec4-color={data.color}
-        data-likec4-shape={data.shape}
-        data-likec4-shape-size={size}
-        data-likec4-spacing={padding}
-        data-likec4-text-size={textSize}
-        {...(isDimmed !== false && {
-          'data-likec4-dimmed': isDimmed,
-        })}
-        style={{
-          ...style,
-        }}
-        {...rest}
-      >
-        {children}
-      </Box>
-    )
-  }),
-)
+  return (
+    <m.div
+      ref={ref}
+      className={cx(
+        css({
+          likec4Palette: data.color,
+        }),
+        styles.container,
+        'group',
+        'likec4-element-node',
+        className,
+      )}
+      initial={false}
+      {...selectable && {
+        animate: {
+          scale,
+        },
+        whileTap: { scale: 0.98 },
+      }}
+      data-likec4-hovered={isHovered}
+      data-likec4-color={data.color}
+      data-likec4-shape={data.shape}
+      data-likec4-shape-size={size}
+      data-likec4-spacing={padding}
+      data-likec4-text-size={textSize}
+      {...(isDimmed !== false && {
+        'data-likec4-dimmed': isDimmed,
+      })}
+      style={{
+        ...style as any,
+      }}
+      {...rest}
+    >
+      {children}
+    </m.div>
+  )
+})
 ElementNodeContainer.displayName = 'ElementNodeContainer'

package/src/base/primitives/element/ElementShape.tsx

@@ -1,5 +1,6 @@
-import { type DiagramNode, type ElementShape, nonexhaustive } from '@likec4/core'
-import clsx from 'clsx'
+import { nonexhaustive } from '@likec4/core'
+import type { ElementShape, ElementStyle } from '@likec4/core/types'
+import { cx as clsx } from '@likec4/styles/css'
 import { toDomPrecision } from '../../../utils/xyflow'
 import * as css from './ElementShape.css'
 
@@ -157,19 +158,19 @@ function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
   }
 }
 
-type Data = Pick<
-  DiagramNode,
-  | 'shape'
-  | 'width'
-  | 'height'
->
+type Data = {
+  shape: ElementShape
+  width: number
+  height: number
+  style?: ElementStyle
+}
 
 // type ElementShapePrimitiveProps = NodeProps<Data> & {
 type ElementShapePrimitiveProps = {
   data: Data
   width?: number
   height?: number
-  isMultiple?: boolean | undefined
+  // isMultiple?: boolean | undefined
   /**
    * @default true
    */
@@ -177,10 +178,11 @@ type ElementShapePrimitiveProps = {
 }
 
 export function ElementShape(
-  { data, width, height, isMultiple = false, withSelectedIndicator = true }: ElementShapePrimitiveProps,
+  { data, width, height, withSelectedIndicator = true }: ElementShapePrimitiveProps,
 ) {
   let w = !!width && width > 10 ? width : data.width
   let h = !!height && height > 10 ? height : data.height
+  const isMultiple = data.style?.multiple ?? false
   return (
     <>
       {isMultiple && (

package/src/base/primitives/element/ElementTags.tsx

@@ -0,0 +1,182 @@
+import { isTagColorSpecified } from '@likec4/core'
+import { css, cx } from '@likec4/styles/css'
+import { type BoxProps, Box, HStack } from '@likec4/styles/jsx'
+import { hstack } from '@likec4/styles/patterns'
+import { likec4tag } from '@likec4/styles/recipes'
+import { HoverCard } from '@mantine/core'
+import { deepEqual } from 'fast-equals'
+import { forwardRef, memo, useCallback } from 'react'
+import { useTagSpecification } from '../../../context/TagStylesContext'
+import { useDiagram } from '../../../hooks/useDiagram'
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
+import { useCurrentZoom } from '../../../hooks/useXYFlow'
+import { stopPropagation } from '../../../utils/xyflow'
+import type { NodeProps } from '../../types'
+
+export type ElementTagProps = {
+  tag: string
+} & Omit<BoxProps, 'children'>
+
+export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
+  ({ tag, className, ...props }, ref) => {
+    const spec = useTagSpecification(tag)
+    return (
+      <Box
+        ref={ref}
+        data-likec4-tag={tag}
+        className={cx(
+          likec4tag({
+            autoTextColor: isTagColorSpecified(spec),
+          }),
+          className,
+        )}
+        {...props}
+      >
+        <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
+        <span>{tag}</span>
+      </Box>
+    )
+  },
+)
+
+type Data = {
+  tags: readonly string[] | null | undefined
+  width: number
+}
+type ElementTagsProps = NodeProps<Data>
+
+const propsAreEqual = (prev: ElementTagsProps, next: ElementTagsProps) => {
+  return prev.data.width === next.data.width && deepEqual(prev.data.tags, next.data.tags)
+}
+export const ElementTags = memo(({ id, data: { tags, width } }: ElementTagsProps) => {
+  const zoom = useCurrentZoom()
+  const zoomIsLargeEnough = zoom > 1.2
+  const portalProps = useMantinePortalProps()
+  if (!tags || tags.length === 0) {
+    return null
+  }
+  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200)
+
+  return (
+    <HoverCard
+      {...portalProps}
+      floatingStrategy="fixed"
+      position="bottom-start"
+      offset={{
+        alignmentAxis: Math.round(4 * zoom),
+        mainAxis: 8,
+      }}
+      keepMounted={false}
+      openDelay={300}
+      closeDelay={500}
+    >
+      <HoverCard.Target>
+        <div
+          className={cx(
+            'likec4-element-tags',
+            hstack({
+              pointerEvents: 'all',
+              gap: 4,
+              alignItems: 'flex-end',
+              justifyItems: 'stretch',
+              position: 'absolute',
+              width: '100%',
+              bottom: 0,
+              left: 0,
+              padding: 4,
+              _shapeCylinder: {
+                bottom: 5,
+              },
+              _shapeStorage: {
+                bottom: 5,
+              },
+              _shapeQueue: {
+                bottom: 0,
+                paddingLeft: 14,
+              },
+            }),
+          )}
+          onClick={stopPropagation}
+        >
+          {tags.map((tag) => (
+            <Box
+              key={id + '#' + tag}
+              data-likec4-tag={tag}
+              className={css({
+                layerStyle: 'likec4.tag',
+                flex: 1,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                maxWidth: 50,
+                height: 5,
+                _whenHovered: {
+                  height: 12,
+                  borderRadius: 4,
+                  transitionDelay: '.08s',
+                },
+                transition: 'fast',
+              })}
+            />
+          ))}
+        </div>
+      </HoverCard.Target>
+      <HoverCard.Dropdown
+        p={0}
+        w={'auto'}
+        maw={maxWidth}
+        className={css({
+          background: 'transparent',
+          border: 'none',
+        })}
+      >
+        <ElementTagsDropdown tags={tags} zoomIsLargeEnough={zoomIsLargeEnough} />
+      </HoverCard.Dropdown>
+    </HoverCard>
+  )
+}, propsAreEqual)
+ElementTags.displayName = 'ElementTags'
+
+function ElementTagsDropdown({ tags, zoomIsLargeEnough }: { tags: readonly string[]; zoomIsLargeEnough: boolean }) {
+  const diagram = useDiagram()
+
+  const onHover = (tag: string) => {
+    diagram.send({ type: 'tag.highlight', tag })
+  }
+
+  const onLeave = useCallback(() => {
+    diagram.send({ type: 'tag.unhighlight' })
+  }, [])
+
+  return (
+    <HStack
+      css={{
+        gap: 4,
+        flexWrap: 'wrap',
+        pb: 'sm',
+      }}
+    >
+      {tags.map((tag) => (
+        <ElementTag
+          key={tag}
+          tag={tag}
+          className={css({
+            userSelect: 'none',
+            cursor: 'pointer',
+            ...(zoomIsLargeEnough && {
+              fontSize: 'lg',
+              borderRadius: 4,
+              px: 6,
+            }),
+          })}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.openSearch(`#${tag}`)
+          }}
+          onMouseEnter={() => onHover(tag)}
+          onMouseLeave={onLeave}
+        />
+      ))}
+    </HStack>
+  )
+}

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,24 +1,29 @@
-import { type DiagramNode } from '@likec4/core'
+import type { DiagramNode } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
-import { Box, Text } from '@mantine/core'
+import { Box } from '@likec4/styles/jsx'
+import { Text } from '@mantine/core'
 import { isEmpty, isNumber, isTruthy } from 'remeda'
+import type { Simplify } from 'type-fest'
 import { IconRenderer } from '../../../context/IconRenderer'
-import type { NodeProps } from '../../types'
+import type { NodeProps, NonOptional } from '../../types'
 import { nodeSizes } from './ElementNodeContainer'
 import * as styles from './ElementTitle.css'
 
-type Data =
-  & Pick<
-    DiagramNode,
-    | 'title'
-    | 'technology'
-    | 'description'
-    | 'color'
-    | 'style'
+type Data = Simplify<
+  & NonOptional<
+    Pick<
+      DiagramNode,
+      | 'title'
+      | 'technology'
+      | 'description'
+      | 'color'
+      | 'style'
+    >
   >
   & {
     icon?: string | null
   }
+>
 
 type ElementTitleProps = NodeProps<Data> & {
   iconSize?: number
@@ -47,11 +52,12 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
         classes.root,
         'likec4-element',
       )}
-      style={{
-        ...isNumber(iconSize) && {
+      style={isNumber(iconSize)
+        ? {
+          // @ts-ignore
           [styles.iconSize]: `${iconSize}px`,
-        },
-      }}
+        }
+        : undefined}
     >
       {elementIcon}
       <Box className={cx(classes.textContainer, 'likec4-element-main-props')}>

package/src/base/primitives/index.ts

@@ -14,5 +14,6 @@ export { ElementActionButtons } from './element/ElementActionButtons'
 export { ElementDetailsButton } from './element/ElementDetailsButton'
 export { ElementNodeContainer } from './element/ElementNodeContainer'
 export { ElementShape } from './element/ElementShape'
+export { ElementTag, ElementTags } from './element/ElementTags'
 export { ElementTitle } from './element/ElementTitle'
 export { DefaultHandles } from './NodeHandles'

package/src/base/types.Base.ts

@@ -0,0 +1,104 @@
+import type {
+  Edge as RFEdge,
+  Node as RFNode,
+  NodeProps as ReactFlowNodeProps,
+} from '@xyflow/react'
+import { hasSubObject } from 'remeda'
+import type { Simplify } from 'type-fest'
+
+// 'immediate' means that the node is dimmed without delay
+export type Dimmed = 'immediate' | boolean
+
+export type NodeData = {
+  /**
+   * Whether the cursor is hovering over the node
+   */
+  hovered?: boolean
+  /**
+   * Whether the node is dimmed
+   * 'immediate' means that the node is dimmed without delay
+   */
+  dimmed?: Dimmed
+}
+export type Node = RFNode<NodeData>
+
+export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>
+
+export type EdgeData = {
+  /**
+   * Whether the cursor is hovering over the edge
+   */
+  hovered?: boolean
+  /**
+   * Whether the edge is active (animated and highlighted)
+   */
+  active?: boolean
+  /**
+   * Whether the edge is dimmed
+   * 'immediate' means that the edge is dimmed without delay
+   */
+  dimmed?: Dimmed
+}
+
+// export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
+export type Edge = Simplify<Omit<RFEdge, 'data'> & { data: EdgeData }>
+
+type WithDimmed = { data: { dimmed?: Dimmed } }
+type WithHovered = { data: { hovered?: boolean } }
+
+const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
+  (v.data.dimmed ?? false) === dimmed ? v : ({
+    ...v,
+    data: {
+      ...v.data,
+      dimmed,
+    },
+  })
+
+export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T
+export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T
+export function setDimmed<T extends WithDimmed>(arg1: T | Dimmed, arg2?: Dimmed) {
+  if (arg2 !== undefined) {
+    return _setDimmed(arg1 as T, arg2)
+  }
+  return (v: T) => _setDimmed(v, arg1 as Dimmed)
+}
+
+const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
+  (v.data.hovered ?? false) === hovered ? v : ({
+    ...v,
+    data: {
+      ...v.data,
+      hovered,
+    },
+  })
+export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T
+export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T
+export function setHovered<T extends WithHovered>(arg1: T | boolean, arg2?: boolean) {
+  if (arg2 !== undefined) {
+    return _setHovered(arg1 as T, arg2)
+  }
+  return (v: T) => _setHovered(v, arg1 as boolean)
+}
+
+type WithData<D> = { data: D }
+function _setData<D, E extends WithData<D>>(value: E, state: Partial<NoInfer<D>>): E {
+  if (hasSubObject(value.data as any, state as any)) {
+    return value
+  }
+  return {
+    ...value,
+    data: {
+      ...value.data,
+      ...state,
+    },
+  }
+}
+export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E
+export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E
+export function setData<E extends WithData<any>>(arg1: E | Partial<E['data']>, arg2?: any) {
+  if (arg2 !== undefined) {
+    return _setData(arg1 as E, arg2)
+  }
+  return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
+}