@likec4/diagram 1.4.0 → 1.6.0

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

@@ -4,16 +4,16 @@ 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})`
   },
@@ -27,6 +27,12 @@ export const container = style({
   }
 })
 
+export const handleCenter = style({
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden'
+})
+
 export const containerAnimated = style({
   willChange: 'transform'
 })
@@ -43,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
   }
 })
 
@@ -56,15 +62,21 @@ const outlineColor = fallbackVar(
   vars.element.stroke
 )
 
+const indicatorStroke = createVar('indicator-stroke')
+
 export const indicator = style({
-  stroke: vars.element.loContrast,
+  stroke: indicatorStroke,
+  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
+  },
   selectors: {
     ':where(.react-flow__node.selected) &': {
       visibility: 'visible',
@@ -78,6 +90,11 @@ export const indicator = style({
     ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
       strokeWidth: 10
     },
+    [`:where([data-mantine-color-scheme='light']) &`]: {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`
+      }
+    },
     [`${dimmed} &`]: {
       visibility: 'hidden',
       display: 'none'
@@ -97,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),
-  lineHeight: 1.2,
+  fontSize: 19,
+  lineHeight: 1.15,
   textWrap: 'balance',
   color: vars.element.hiContrast
 })
@@ -116,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({
@@ -132,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,
@@ -145,74 +172,137 @@ 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 iconMaxH = createVar('max-h')
-
-export const elementIcon = style({
-  flex: `0 1 ${iconMaxH}`,
-  maxHeight: iconMaxH,
-  marginTop: -8,
-  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]: '30px'
+    [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: 0,
+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: `calc(${iconMaxH} + 16px)`
+  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')
-const filterShadowHovered = createVar('filter-shadow-hovered')
 
+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,
   stroke: vars.element.stroke,
   overflow: 'visible',
-  filter: fallbackVar(filterShadowHovered, filterShadow),
+  filter: filterShadow,
   transition: 'filter 300ms ease-out',
   transitionDelay: '0ms',
   zIndex: -1,
@@ -225,7 +315,9 @@ export const cssShapeSvg = style({
   },
   selectors: {
     [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      filter: 'none'
+      vars: {
+        [filterShadow]: `none`
+      }
     }
   }
 })

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'
+import { useDiagramStoreApi } from '../../../state/useDiagramStore'
 
 export type NavigateToBtnProps = {
   xynodeId: string

package/src/xyflow/types.ts

@@ -1,4 +1,4 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, Point, ViewID, XYPosition } from '@likec4/core'
+import type { BBox, DiagramEdge, DiagramNode, Fqn, XYPosition } from '@likec4/core'
 import type {
   Edge,
   EdgeMouseHandler,
@@ -13,7 +13,7 @@ import type {
 import { isNode } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent } from 'react'
 import { isTruthy } from 'remeda'
-import type { SetReadonly, SetRequired, Simplify } from 'type-fest'
+import type { SetReadonly, SetRequired } from 'type-fest'
 
 export type ElementNodeData = {
   fqn: Fqn
@@ -61,8 +61,6 @@ export type RelationshipData = {
   // viewId: ViewID
   // if set - edge was changed by user
   controlPoints: XYPosition[] | null
-  headPoint: Point | null
-  tailPoint: Point | null
   type: 'bezier' | 'poly'
   // if dynamic view
   stepNum: number | null

package/src/xyflow/utils.ts

@@ -1,5 +1,5 @@
 import { hasAtLeast, invariant } from '@likec4/core'
-import type { DiagramEdge, NonEmptyArray, Point } from '@likec4/core/types'
+import type { DiagramEdge, Point } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/react'
 import { Bezier } from 'bezier-js'
 import { isArray } from 'remeda'
@@ -33,17 +33,14 @@ export function bezierControlPoints(diagramEdge: DiagramEdge) {
     inflections.forEach(t => {
       const { x, y } = bezier.get(t)
       handles.push({
-        x: toDomPrecision(x),
-        y: toDomPrecision(y)
+        x: Math.round(x),
+        y: Math.round(y)
       })
     })
     bezierPoints = rest
     start = end
   }
   invariant(bezierPoints.length === 0, 'all points should be consumed')
-  if (diagramEdge.dir === 'back' && handles.length > 0) {
-    handles.reverse()
-  }
 
   return handles
 }

package/dist/KeepAspectRatioContainer.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from 'react';
-
-type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
-    enabled: boolean;
-    width: number;
-    height: number;
-};
-export declare function KeepAspectRatioContainer({ children, width, height, enabled, className, style, ...rest }: KeepAspectRatioContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/icons/Clipboard.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const ClipboardCopy: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/Link.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const Link: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/ZoomIn.d.ts

@@ -1,3 +0,0 @@
-import { SVGProps } from 'react';
-
-export declare const ZoomIn: import('react').ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist/icons/index.d.ts

@@ -1,3 +0,0 @@
-export * from './Clipboard';
-export * from './Link';
-export * from './ZoomIn';

package/dist/mantine/theme.d.ts

@@ -1,3 +0,0 @@
-import { MantineTheme } from '@mantine/core';
-
-export declare const theme: MantineTheme;

package/dist/state/WhenInitialized.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-export declare function WhenInitialized({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/Camera.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const CameraMemo: import('react').NamedExoticComponent<object>;
-export default CameraMemo;

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

@@ -1,10 +0,0 @@
-import { XYFlowNode } from '../../types';
-
-type ElementIconProps = {
-    node: XYFlowNode['data']['element'];
-    maxWidth?: number | undefined;
-    paddingX?: number | undefined;
-    paddingY?: number | undefined;
-};
-export declare function ElementIcon({ node, paddingY }: ElementIconProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/src/KeepAspectRatioContainer.tsx

@@ -1,36 +0,0 @@
-import { Box } from '@mantine/core'
-import clsx from 'clsx'
-import { type HTMLAttributes, useId } from 'react'
-import * as css from './LikeC4Diagram.css'
-
-type KeepAspectRatioContainerProps = HTMLAttributes<HTMLDivElement> & {
-  // Whether to keep the aspect ratio
-  enabled: boolean
-  width: number
-  height: number
-}
-
-export function KeepAspectRatioContainer({
-  children,
-  width,
-  height,
-  enabled,
-  className,
-  style,
-  ...rest
-}: KeepAspectRatioContainerProps) {
-  return (
-    <Box
-      {...rest}
-      className={clsx(css.keepAspectRatioContainer, className)}
-      style={enabled
-        ? {
-          ...style,
-          aspectRatio: `${Math.ceil(width)}/${Math.ceil(height)}`,
-          maxHeight: `var(--likec4-view-max-height, ${Math.ceil(height)}px)`
-        }
-        : style}>
-      {children}
-    </Box>
-  )
-}

package/src/icons/Clipboard.tsx

@@ -1,24 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const ClipboardCopy = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h3m9 -9v-5a2 2 0 0 0 -2 -2h-2" />
-    <path d="M13 17v-1a1 1 0 0 1 1 -1h1m3 0h1a1 1 0 0 1 1 1v1m0 3v1a1 1 0 0 1 -1 1h-1m-3 0h-1a1 1 0 0 1 -1 -1v-1" />
-    <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
-  </svg>
-))

package/src/icons/Link.tsx

@@ -1,23 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const Link = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    className={clsx('icon icon-tabler', className)}
-    stroke="currentColor"
-    fill="currentColor"
-    strokeWidth="0"
-    viewBox="0 0 20 20"
-    height="20"
-    width="20"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path
-      fillRule="evenodd"
-      d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
-      clipRule="evenodd">
-    </path>
-  </svg>
-))

package/src/icons/ZoomIn.tsx

@@ -1,25 +0,0 @@
-import clsx from 'clsx'
-import { forwardRef, type SVGProps } from 'react'
-
-export const ZoomIn = forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(({ className, ...props }, ref) => (
-  <svg
-    ref={ref}
-    xmlns="http://www.w3.org/2000/svg"
-    className={clsx('icon icon-tabler icon-tabler-zoom-in', className)}
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    strokeWidth="1.5"
-    stroke="currentColor"
-    fill="none"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...props}
-  >
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
-    <path d="M7 10l6 0" />
-    <path d="M10 7l0 6" />
-    <path d="M21 21l-6 -6" />
-  </svg>
-))

package/src/icons/index.ts

@@ -1,3 +0,0 @@
-export * from './Clipboard'
-export * from './Link'
-export * from './ZoomIn'

package/src/mantine/theme.ts

@@ -1,20 +0,0 @@
-import { createTheme, type MantineTheme } from '@mantine/core'
-
-export const theme = createTheme({
-  primaryColor: 'indigo',
-  cursorType: 'pointer',
-  defaultRadius: 'sm',
-  respectReducedMotion: true,
-  headings: {
-    fontWeight: '500',
-    sizes: {
-      h1: {
-        // fontSize: '2rem',
-        fontWeight: '600'
-      },
-      h2: {
-        // fontSize: '1.85rem',
-      }
-    }
-  }
-}) as MantineTheme

package/src/state/WhenInitialized.tsx

@@ -1,24 +0,0 @@
-import { type PropsWithChildren, useEffect, useState } from 'react'
-import { useDiagramStoreApi } from './useDiagramStore'
-
-export function WhenInitialized({ children }: PropsWithChildren) {
-  const diagramApi = useDiagramStoreApi()
-
-  const [isInitialized, setIsInitialized] = useState(diagramApi.getState().initialized)
-
-  useEffect(() => {
-    if (isInitialized) {
-      return
-    }
-    return diagramApi.subscribe(
-      s => s.initialized,
-      setIsInitialized
-    )
-  }, [isInitialized])
-
-  if (!isInitialized) {
-    return null
-  }
-
-  return <>{children}</>
-}