@likec4/diagram 1.5.0 → 1.6.0

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

@@ -1,20 +1,19 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
 import { mantine } from '../../../mantine.css'
 import { vars } from '../../../theme.css'
 
 export const stokeFillMix = createVar('stroke-fill-mix')
-const elPadding = createVar('el-padding')
-// assignVars
 
 export const container = style({
   width: '100%',
   height: '100%',
   padding: 0,
   margin: 0,
+  flex: '1',
   display: 'flex',
-  alignItems: 'stretch',
+  alignItems: 'center',
+  justifyContent: 'center',
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
   },
@@ -50,10 +49,10 @@ globalStyle(`.react-flow__node-element:has(${dimmed})`, {
 
 const indicatorKeyframes = keyframes({
   'from': {
-    opacity: 0.6
+    strokeOpacity: 0.8
   },
   'to': {
-    opacity: 0.4
+    strokeOpacity: 0.5
   }
 })
 
@@ -70,10 +69,10 @@ export const indicator = style({
   fill: 'none',
   transformOrigin: 'center center',
   strokeWidth: 6,
-  animationDuration: '800ms',
+  animationDuration: '1s',
   animationIterationCount: 'infinite',
   animationDirection: 'alternate',
-  opacity: 0.6,
+  strokeOpacity: 0.8,
   visibility: 'hidden',
   vars: {
     [indicatorStroke]: vars.element.loContrast
@@ -93,7 +92,7 @@ export const indicator = style({
     },
     [`:where([data-mantine-color-scheme='light']) &`]: {
       vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 60%, ${vars.element.loContrast})`
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`
       }
     },
     [`${dimmed} &`]: {
@@ -115,15 +114,20 @@ export const fillMixStroke = style({
   fill: stokeFillMix
 })
 
+export const hasIcon = style({})
+
+const textAlign = createVar('text-align')
+const iconSize = createVar('icon-size')
+
 export const title = style({
   flex: '0 0 auto',
   fontFamily: vars.element.font,
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
-  textAlign: 'center',
+  textAlign: textAlign,
   fontWeight: 500,
-  fontSize: rem(19.5),
-  lineHeight: 1.2,
+  fontSize: 19,
+  lineHeight: 1.15,
   textWrap: 'balance',
   color: vars.element.hiContrast
 })
@@ -134,14 +138,19 @@ export const description = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: rem(14),
-  lineHeight: 1.25,
-  textAlign: 'center',
+  fontSize: 14,
+  lineHeight: 1.2,
+  textAlign: textAlign,
   textWrap: 'pretty',
   color: vars.element.loContrast,
   whiteSpaceCollapse: 'preserve-breaks',
   textOverflow: 'ellipsis',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  selectors: {
+    [`:where(${hasIcon}) &`]: {
+      textWrap: 'wrap'
+    }
+  }
 })
 
 export const technology = style({
@@ -150,9 +159,9 @@ export const technology = style({
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   fontWeight: 400,
-  fontSize: rem(12),
+  fontSize: 12,
   lineHeight: 1.125,
-  textAlign: 'center',
+  textAlign: textAlign,
   textWrap: 'balance',
   opacity: 0.92,
   color: vars.element.loContrast,
@@ -163,68 +172,131 @@ export const technology = style({
   }
 })
 
-export const element = style({
+export const elementDataContainer = style({
   flex: '1',
-  padding: elPadding,
+  height: 'fit-content',
   display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
+  alignItems: 'center',
   justifyContent: 'center',
+  flexDirection: 'row',
+  padding: rem(24),
   overflow: 'hidden',
-  gap: rem(8),
-  'vars': {
-    [elPadding]: rem(24)
+  gap: rem(10),
+  vars: {
+    [iconSize]: '48px'
   },
   selectors: {
-    [`&:has(${description}):has(${technology})`]: {
-      gap: rem(6)
-    },
     ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
-      paddingLeft: rem(40),
-      paddingRight: rem(20)
+      paddingLeft: 40,
+      paddingRight: 20
     },
     ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      paddingTop: rem(34)
+      paddingTop: 30
     },
     ':where([data-likec4-shape="browser"]) &': {
-      paddingTop: rem(32),
-      paddingBottom: rem(28)
+      paddingTop: 32,
+      paddingBottom: 28
+    },
+    [`&:is(${hasIcon})`]: {
+      paddingRight: 20
+    },
+    [`${container}:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
+      paddingLeft: 20
+    },
+    [`&:has(${description}, ${technology})`]: {
+      alignItems: 'flex-start',
+      gap: rem(16),
+      vars: {
+        [iconSize]: '60px'
+      }
     }
   }
 })
 
-export const iconOffsetY = createVar('offset-y')
-
-const iconMaxH = createVar('max-h')
-
-export const elementIcon = style({
-  flex: `0 1 ${iconMaxH}`,
-  maxHeight: iconMaxH,
-  position: 'relative',
-  userSelect: 'none',
-  pointerEvents: 'none',
-  overflow: 'visible',
-  mixBlendMode: 'hard-light',
+export const elementTextData = style({
+  height: 'fit-content',
+  width: 'max-content',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+  gap: rem(8),
   'vars': {
-    [iconMaxH]: calc(iconOffsetY).subtract('12px').toString()
+    [textAlign]: 'center'
+  },
+  selectors: {
+    [`&:has(${description}):has(${technology})`]: {
+      gap: rem(6)
+    },
+    [`:where(${hasIcon}) &`]: {
+      minWidth: 'calc(100% - 160px)',
+      alignItems: 'flex-start',
+      'vars': {
+        [textAlign]: 'left'
+      }
+    }
   }
 })
 
-globalStyle(`${elementIcon} img`, {
-  position: 'absolute',
-  left: 0,
-  bottom: 4,
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  mixBlendMode: 'hard-light'
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
   width: '100%',
   height: 'auto',
-  objectFit: 'contain',
-  maxHeight: iconOffsetY
+  maxHeight: '100%',
+  pointerEvents: 'none',
+  filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+  `
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain'
 })
 
 const filterShadow = createVar('filter-shadow')
 
+export const cssShapeSvgMultiple = style({
+  top: 0,
+  left: 0,
+  position: 'absolute',
+  pointerEvents: 'none',
+  transformOrigin: '50% 50%',
+  fill: vars.element.fill,
+  stroke: 'none',
+  zIndex: -1,
+  transition: 'opacity 500ms ease-out',
+  transform: 'translate(8px,10px)',
+  opacity: 0.5,
+  selectors: {
+    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+      visibility: 'hidden'
+    },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      transform: 'translate(8px,8px)'
+    },
+    ':where([data-likec4-shape="queue"]) &': {
+      transform: 'translate(-10px,8px)'
+    },
+    ':where([data-hovered="true"]) &': {
+      transition: 'opacity 300ms ease-in',
+      opacity: 0.2
+    }
+  }
+})
 export const cssShapeSvg = style({
-  top: '0px',
-  left: '0px',
+  top: 0,
+  left: 0,
   position: 'absolute',
   pointerEvents: 'none',
   fill: vars.element.fill,

package/src/xyflow/nodes/shared/NavigateToBtn.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon } from '@mantine/core'
 import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { useDiagramStoreApi } from '../../../state/hooks'
+import { useDiagramStoreApi } from '../../../state/useDiagramStore'
 
 export type NavigateToBtnProps = {
   xynodeId: string

package/dist/xyflow/nodes/element/ElementIcon.d.ts

@@ -1,7 +0,0 @@
-import { XYFlowNode } from '../../types';
-
-type ElementIconProps = {
-    node: XYFlowNode['data']['element'];
-};
-export declare function ElementIcon({ node: { icon, title, labelBBox } }: ElementIconProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

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

@@ -1,33 +0,0 @@
-import { assignInlineVars } from '@vanilla-extract/dynamic'
-import clsx from 'clsx'
-import type { XYFlowNode } from '../../types'
-import { elementIcon, iconOffsetY } from './element.css'
-
-type ElementIconProps = {
-  node: XYFlowNode['data']['element']
-}
-
-export function ElementIcon({
-  node: {
-    icon,
-    title,
-    labelBBox
-  }
-}: ElementIconProps) {
-  if (!icon) {
-    return null
-  }
-
-  return (
-    <div
-      className={clsx(elementIcon, 'likec4-element-icon')}
-      style={assignInlineVars({ iconOffsetY }, {
-        iconOffsetY: labelBBox.y + 'px'
-      })}>
-      <img
-        src={icon}
-        alt={title}
-      />
-    </div>
-  )
-}