@likec4/diagram 1.31.0 → 1.32.1

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>)
+}

package/src/base/types.ts

@@ -4,8 +4,8 @@ import type {
   Node as RFNode,
   NodeProps as ReactFlowNodeProps,
 } from '@xyflow/react'
-import { hasSubObject } from 'remeda'
 import type { OptionalKeysOf, SetRequired, Simplify } from 'type-fest'
+import * as Base from './types.Base'
 
 /**
 
@@ -64,101 +64,4 @@ export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends
   'type' | 'data'
 >
 
-export namespace Base {
-  // '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<Base.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 = SetRequired<RFEdge<EdgeData>, 'data'>
-
-  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>)
-  }
-}
+export * as Base from './types.Base'

package/src/bundle/LikeC4View.props.ts

@@ -1,12 +1,13 @@
-import type { WhereOperator } from '@likec4/core'
+import type { WhereOperator } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import type { CSSProperties } from 'react'
 import type { CustomNodes, ElementIconRenderer, OverrideReactFlowProps, PaddingWithUnit } from '../LikeC4Diagram.props'
 
-export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
+export interface LikeC4ViewProps<A extends aux.Any> {
   /**
    * View to display.
    */
-  viewId: ViewId
+  viewId: aux.ViewId<A>
 
   /**
    * Enable/disable panning
@@ -110,6 +111,12 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
    */
   enableElementDetails?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default false
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Experimental feature to browse relationships
    *
@@ -130,7 +137,7 @@ export interface LikeC4ViewProps<ViewId = string, Tag = string, Kind = string> {
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
-  where?: WhereOperator<Tag, Kind> | undefined
+  where?: WhereOperator<A> | undefined
 
   /**
    * Override some react flow props
@@ -230,6 +237,12 @@ export interface LikeC4BrowserProps {
    */
   enableRelationshipDetails?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default true
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Display notations of the view
    * @default true

package/src/bundle/LikeC4View.tsx

@@ -1,57 +1,46 @@
-import { memo, useState } from 'react'
-import { ShadowRoot } from './ShadowRoot'
-
-import type { DiagramView, ViewId } from '@likec4/core'
+import type { Any, DiagramView } from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import { cx } from '@likec4/styles/css'
 import { ActionIcon, Box } from '@mantine/core'
 import { shallowEqual } from '@mantine/hooks'
 import { IconX } from '@tabler/icons-react'
+import { memo, useState } from 'react'
 import { isBoolean } from 'remeda'
 import { FramerMotionConfig } from '../context/FramerMotionConfig'
 import { LikeC4Diagram } from '../LikeC4Diagram'
 import { useLikeC4Model } from '../likec4model/useLikeC4Model'
 import { Overlay } from '../overlays/overlay/Overlay'
 import type { LikeC4ViewProps } from './LikeC4View.props'
+import { ShadowRoot } from './ShadowRoot'
 import { cssInteractive, useColorScheme, useShadowRootStyle } from './styles.css'
 import { ErrorMessage, ViewNotFound } from './ViewNotFound'
 
-export function LikeC4View<
-  ViewId extends string = string,
-  Tag = string,
-  Kind = string,
->({
+export function LikeC4View<A extends aux.Any = aux.UnknownLayouted>({
   viewId,
   ...props
-}: LikeC4ViewProps<ViewId, Tag, Kind>) {
+}: LikeC4ViewProps<A>) {
   const likec4model = useLikeC4Model()
-  const view = likec4model?.findView(viewId)
+  const view = likec4model.findView(viewId)
 
-  if (!likec4model) {
-    return (
-      <ErrorMessage>
-        LikeC4Model not found. Make sure you have LikeC4ModelProvider.
-      </ErrorMessage>
-    )
+  if (!view) {
+    return <ViewNotFound viewId={viewId} />
   }
-  if (likec4model.type !== 'layouted') {
+
+  if (!view.isDiagram()) {
     return (
       <ErrorMessage>
-        LikeC4Model is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
+        LikeC4 View "${viewId}" is not layouted. Make sure you have LikeC4ModelProvider with layouted model.
       </ErrorMessage>
     )
   }
 
-  if (!view || !view.isDiagram()) {
-    return <ViewNotFound viewId={viewId} />
-  }
-
   return <LikeC4ViewInner view={view.$view} {...props} />
 }
 
-type LikeC4ViewInnerProps = Omit<LikeC4ViewProps<any, any, any>, 'viewId'> & {
-  view: DiagramView
+type LikeC4ViewInnerProps<A extends aux.Any> = Omit<LikeC4ViewProps<A>, 'viewId'> & {
+  view: DiagramView<A>
 }
-const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
+const LikeC4ViewInner = memo<LikeC4ViewInnerProps<aux.Any>>(({
   view,
   className,
   pannable = false,
@@ -61,7 +50,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
   injectFontCss = true,
   controls = false,
   fitView = true,
-  fitViewPadding = '8px',
+  fitViewPadding = '16px',
   background = 'transparent',
   browser = true,
   showDiagramTitle = false,
@@ -80,16 +69,16 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
   renderNodes,
   ...props
 }) => {
-  const likec4model = useLikeC4Model(true, 'layouted')
+  const likec4model = useLikeC4Model('layouted')
   const colorScheme = useColorScheme(explicitColorScheme)
 
   const [shadowRootProps, cssstyle] = useShadowRootStyle(keepAspectRatio, view)
 
-  const [browserViewId, onNavigateTo] = useState(null as ViewId | null)
+  const [browserViewId, onNavigateTo] = useState(null as aux.ViewId<Any> | null)
 
   const browserView = browserViewId ? likec4model.findView(browserViewId)?.$view : null
 
-  const notations = view.notation?.elements ?? []
+  const notations = view.notation?.nodes ?? []
   const hasNotations = notations.length > 0
 
   let nonce
@@ -124,7 +113,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
         style={style}>
         <FramerMotionConfig>
           <LikeC4Diagram
-            view={view as any}
+            view={view}
             readonly
             pannable={pannable}
             zoomable={zoomable}
@@ -140,6 +129,7 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
             enableRelationshipDetails={enableRelationshipDetails}
             enableElementDetails={enableElementDetails}
             enableRelationshipBrowser={enableRelationshipBrowser}
+            enableElementTags={false}
             controls={controls}
             nodesDraggable={false}
             reduceGraphics={reduceGraphics}
@@ -157,26 +147,27 @@ const LikeC4ViewInner = memo<LikeC4ViewInnerProps>(({
             {...props}
           />
           {browserView && (
-            <Overlay onClose={() => onNavigateTo(null)}>
+            <Overlay openDelay={0} onClose={() => onNavigateTo(null)}>
               <LikeC4Diagram
                 view={browserView}
                 background="dots"
-                onNavigateTo={to => onNavigateTo(to as ViewId)}
+                onNavigateTo={onNavigateTo}
                 enableDynamicViewWalkthrough
                 enableFocusMode
                 enableRelationshipBrowser
                 enableElementDetails
                 enableRelationshipDetails
                 enableSearch
+                enableElementTags
                 controls
                 readonly
                 fitView
-                fitViewPadding={'16px'}
-                renderNodes={renderNodes}
+                fitViewPadding={'32px'}
                 {...props}
                 {...browserProps}
                 showNotations={(browserProps.showNotations ?? true) &&
-                  (browserView.notation?.elements.length ?? 0) > 0}
+                  (browserView.notation?.nodes.length ?? 0) > 0}
+                renderNodes={renderNodes}
               />
               <Box pos="absolute" top={'1rem'} right={'1rem'}>
                 <ActionIcon