@likec4/diagram 1.20.3 → 1.21.0

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

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import { type DiagramNode, DefaultPaddingSize, DefaultShapeSize, DefaultTextSize } from '@likec4/core'
 import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
@@ -10,6 +10,7 @@ type RequiredData = Pick<
   DiagramNode,
   | 'color'
   | 'shape'
+  | 'style'
 >
 
 type ElementNodeContainerProps =
@@ -42,6 +43,22 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         break
     }
 
+    let {
+      size,
+      padding,
+      textSize,
+    } = data.style
+
+    // if (size === DefaultShapeSize && textSize !== DefaultTextSize) {
+    //   size = textSize
+    // }
+    if (!size && !!textSize) {
+      size = textSize
+    }
+    if (!textSize && !!size) {
+      textSize = size
+    }
+
     return (
       <Box
         component={m.div}
@@ -60,6 +77,9 @@ export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNod
         data-hovered={isHovered}
         data-likec4-color={data.color}
         data-likec4-shape={data.shape}
+        data-likec4-shape-size={size ?? DefaultShapeSize}
+        data-likec4-padding={padding ?? DefaultPaddingSize}
+        data-likec4-text-size={textSize ?? DefaultTextSize}
         data-likec4-dimmed={isDimmed}
         {...rest}
       >

package/src/base/primitives/element/ElementShape.css.ts

@@ -130,5 +130,10 @@ export const shapeSvg = style([shapeBase, {
         [filterShadow]: `none`,
       },
     },
+    [`:where([data-likec4-zoom-small="true"]) &`]: {
+      vars: {
+        [filterShadow]: `none`,
+      },
+    },
   },
 }])

package/src/base/primitives/element/ElementTitle.css.ts

@@ -1,11 +1,12 @@
 import { rem } from '@mantine/core'
 import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
 import { vars } from '../../../theme-vars'
+import { iconSize, paddingSize, textSize } from './styles.css'
 
 export const hasIcon = style({})
 
 const textAlign = createVar('text-align')
-export const iconSize = createVar('icon-size')
 
 export const title = style({
   flex: '0 0 auto',
@@ -14,7 +15,7 @@ export const title = style({
   fontStyle: 'normal',
   textAlign: textAlign,
   fontWeight: 500,
-  fontSize: 19,
+  fontSize: textSize,
   lineHeight: 1.15,
   textWrap: 'balance',
   color: vars.element.hiContrast,
@@ -27,7 +28,7 @@ export const description = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: 14,
+  fontSize: calc(textSize).multiply(0.74).toString(),
   lineHeight: 1.2,
   textAlign: textAlign,
   textWrap: 'pretty',
@@ -39,6 +40,9 @@ export const description = style({
     [`:where(${hasIcon}) &`]: {
       textWrap: 'wrap',
     },
+    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+      display: 'none',
+    },
   },
 })
 
@@ -48,7 +52,7 @@ export const technology = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: 12,
+  fontSize: calc(textSize).multiply(0.635).toString(),
   lineHeight: 1.125,
   textAlign: textAlign,
   textWrap: 'balance',
@@ -58,6 +62,9 @@ export const technology = style({
     [`:where([data-hovered='true']) &`]: {
       opacity: 1,
     },
+    [`:where([data-likec4-shape-size="xs"], [data-likec4-shape-size="sm"]) &`]: {
+      display: 'none',
+    },
   },
 })
 
@@ -68,12 +75,9 @@ export const elementDataContainer = style({
   alignItems: 'center',
   justifyContent: 'center',
   flexDirection: 'row',
-  padding: rem(24),
+  padding: paddingSize,
   overflow: 'hidden',
-  gap: rem(10),
-  vars: {
-    [iconSize]: '48px',
-  },
+  gap: rem(12),
   selectors: {
     ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
       paddingLeft: 40,
@@ -86,22 +90,11 @@ export const elementDataContainer = style({
       paddingTop: 32,
       paddingBottom: 28,
     },
-    // [`&:is(${hasIcon})`]: {
-    //   paddingLeft: 40,
-    //   paddingRight: 20
-    // },
-    [`.likec4-element-node:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
-      paddingLeft: 24,
-      paddingRight: 18,
-    },
-    [`&:has(${description}, ${technology})`]: {
-      gap: rem(16),
-      vars: {
-        [iconSize]: '60px',
-      },
-    },
   },
 })
+globalStyle(`:where([data-likec4-shape-size="lg"], [data-likec4-shape-size="xl"]) ${elementDataContainer}`, {
+  gap: rem(16),
+})
 
 export const elementTextData = style({
   height: 'fit-content',
@@ -121,7 +114,7 @@ export const elementTextData = style({
       gap: rem(6),
     },
     [`:where(${hasIcon}) &`]: {
-      minWidth: 'calc(100% - 160px)',
+      minWidth: `calc(100% - ${iconSize} - ${calc(paddingSize).multiply(2).toString()})`,
       alignItems: 'flex-start',
       'vars': {
         [textAlign]: 'left',

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

@@ -1,4 +1,4 @@
-import type { DiagramNode } from '@likec4/core'
+import { type DiagramNode } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import clsx from 'clsx'
@@ -7,6 +7,7 @@ import { IconRenderer } from '../../../context/IconRenderer'
 import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
 import type { NodeProps } from '../../types'
 import * as css from './ElementTitle.css'
+import { iconSize as varIconSize } from './styles.css'
 
 type Data =
   & Pick<
@@ -15,6 +16,7 @@ type Data =
     | 'technology'
     | 'description'
     | 'color'
+    | 'style'
   >
   & {
     icon?: string | null
@@ -42,7 +44,7 @@ export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
       )}
       style={{
         ...isNumber(iconSize) && assignInlineVars({
-          [css.iconSize]: `${iconSize}px`,
+          [varIconSize]: `${iconSize}px`,
         }),
       }}
     >

package/src/base/primitives/element/styles.css.ts

@@ -0,0 +1,74 @@
+import { defaultTheme } from '@likec4/core'
+import { rem } from '@mantine/core'
+import { createVar, globalStyle } from '@vanilla-extract/css'
+import { container } from './ElementNodeContainer.css'
+
+export const textSize = createVar('text-size')
+export const paddingSize = createVar('padding-size')
+export const iconSize = createVar('icon-size')
+
+globalStyle(`${container}`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.md),
+    [paddingSize]: rem(defaultTheme.spacing.md),
+    [iconSize]: '60px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-shape-size="xs"]`, {
+  vars: {
+    [iconSize]: '24px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="sm"]`, {
+  vars: {
+    [iconSize]: '36px',
+  },
+})
+globalStyle(`${container}[data-likec4-shape-size="lg"], ${container}[data-likec4-shape-size="xl"]`, {
+  vars: {
+    [iconSize]: '82px',
+  },
+})
+
+globalStyle(`${container}[data-likec4-text-size="xs"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.xs),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="sm"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.sm),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="lg"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.lg),
+  },
+})
+globalStyle(`${container}[data-likec4-text-size="xl"]`, {
+  vars: {
+    [textSize]: rem(defaultTheme.textSizes.xl),
+  },
+})
+
+globalStyle(`${container}[data-likec4-padding="xs"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.xs),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="sm"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.sm),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="lg"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.lg),
+  },
+})
+globalStyle(`${container}[data-likec4-padding="xl"]`, {
+  vars: {
+    [paddingSize]: rem(defaultTheme.spacing.xl),
+  },
+})

package/src/hooks/useDiagram.ts

@@ -4,8 +4,8 @@ import type { PartialDeep } from 'type-fest'
 import { useDiagramActor } from '../hooks/useDiagramActor'
 import type { OpenSourceParams } from '../LikeC4Diagram.props'
 import type { AlignmentMode } from '../likec4diagram/state/aligners'
+import { DiagramContext } from '../likec4diagram/state/machine'
 import type { Types } from '../likec4diagram/types'
-import { DiagramContext } from './useDiagramContext'
 
 export function useDiagram() {
   const actor = useDiagramActor()

package/src/likec4diagram/DiagramUI.tsx

@@ -6,7 +6,7 @@ import { Controls, DiagramTitlePanel } from './ui'
 import NotationPanel from './ui/notation'
 import { DynamicViewWalkthrough } from './ui/walkthrough/DynamicViewWalkthrough'
 
-export const DiagramUI = memo(() => {
+export function DiagramUI() {
   return (
     <>
       <Controls />
@@ -25,4 +25,4 @@ export const DiagramUI = memo(() => {
       </IfEnabled>
     </>
   )
-})
+}

package/src/likec4diagram/XYFlow.tsx

@@ -3,8 +3,8 @@ import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
-import { BaseXYFlow } from '../base'
-import { useDiagramEventHandlers, useEnabledFeature } from '../context'
+import { BaseXYFlow } from '../base/BaseXYFlow'
+import { useDiagramEventHandlers } from '../context'
 import { useDiagram } from '../hooks/useDiagram'
 import { useDiagramContext } from '../hooks/useDiagramContext'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -27,12 +27,13 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import clsx from 'clsx'
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../base'
+import { Link } from '../../../base/Link'
 import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
-import { DiagramContext, useDiagramContext } from '../../../hooks/useDiagramContext'
+import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import { useLikeC4Model } from '../../../likec4model'
+import { DiagramContext } from '../../state/machine'
 import * as css from './RelationshipsDropdownMenu.css'
 
 const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()

package/src/likec4diagram/types.ts

@@ -1,4 +1,4 @@
-import type { DiagramEdge, DiagramNode, Fqn, ViewId } from '@likec4/core'
+import type { DiagramEdge, DiagramNode, Fqn, IconUrl, ViewId } from '@likec4/core'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base } from '../base'
@@ -75,7 +75,7 @@ export namespace Types {
     >
     & {
       depth: number
-      icon: string | null
+      icon?: IconUrl
     }
   >
 

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -120,7 +120,7 @@ function viewToNodesEdge(opts: {
       shape: node.shape,
       style: node.style,
       depth: node.depth ?? 0,
-      icon: node.icon ?? null,
+      icon: node.icon ?? 'none',
       position: node.position,
     } satisfies Types.CompoundNodeData