@likec4/diagram 1.0.2 → 1.1.1

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -3,7 +3,7 @@ import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyl
 import { mantine } from '../../../mantine.css'
 import { vars } from '../../../theme.css'
 
-export const cssContainer = style({
+export const container = style({
   width: '100%',
   height: '100%',
   position: 'relative',
@@ -11,7 +11,7 @@ export const cssContainer = style({
   margin: 0
 })
 
-const bgTransparency = createVar('bgTransparency')
+export const varTransparency = createVar('transparency')
 
 const outlineColor = fallbackVar(
   mantine.colors.primaryColors.outline,
@@ -19,15 +19,15 @@ const outlineColor = fallbackVar(
   vars.element.stroke
 )
 
-export const cssCompound = style({
+export const compoundBody = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: rem(6),
+  borderRadius: 6,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  padding: rem(8),
+  padding: 8,
   background: vars.element.fill,
-  transition: 'all 300ms ease-out',
+  transition: 'all 200ms ease-out',
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -40,62 +40,76 @@ export const cssCompound = style({
   }
 })
 
-// @ts-ignore
-const cssTransparentCompound = style({
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  borderRadius: rem(8),
+const bgTransparency = createVar('bgTransparency')
+const bgTransparencyDelta = createVar('bgTransparencyDelta')
+export const transparent = style({
   borderStyle: 'dashed',
-  borderWidth: rem(3.5),
-  borderColor: vars.element.fill,
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.05) , 0 2px 2px -1px rgba(0,0,0,0.04)',
-  padding: rem(8),
+  borderWidth: 3,
+  padding: 6,
+  borderColor: `color-mix(in srgb , ${vars.element.stroke},  transparent min(${bgTransparency}, 30%))`,
   background: `color-mix(in srgb , ${vars.element.fill},  transparent ${bgTransparency})`,
-  transition: 'all 200ms ease-out',
+  backgroundClip: 'padding-box',
+  // transitionTimingFunction: 'ease-in',
+  // transition: 'all 150ms ease-in-out',
   vars: {
-    [bgTransparency]: '90%'
+    [bgTransparency]: `calc(${fallbackVar(varTransparency, '80%')} - ${bgTransparencyDelta})`,
+    [bgTransparencyDelta]: '0%',
+    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
   },
   selectors: {
-    [`:where(${cssContainer}[data-hovered]) &`]: {
-      transitionDelay: '300ms',
+    [`:where(.react-flow__node.selected) &`]: {
+      transitionDelay: '50ms',
+      // borderColor: 'transparent',
+      // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparency]: '65%'
+        [bgTransparencyDelta]: '5%'
       }
     },
-    [`:where(.react-flow__node.selected) &`]: {
-      transitionDelay: '50ms',
-      boxShadow: 'none',
-      borderColor: 'transparent',
+    [`:where([data-hovered]) &`]: {
+      transitionDelay: '175ms',
+      // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparency]: '15%'
+        [bgTransparencyDelta]: '15%'
       }
-    }
+    },
+
   }
 })
 
-export const cssTitle = style({
+export const title = style({
   fontFamily: vars.compound.font,
   fontOpticalSizing: 'auto',
   fontStyle: 'normal',
   textAlign: 'left',
   display: 'inline-block',
   fontWeight: 600,
-  fontSize: '13px',
+  fontSize: '14px',
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
   lineHeight: 1,
   opacity: 0.75,
-  color: vars.compound.titleColor,
-  paddingLeft: rem(12),
-  mixBlendMode: 'lighten',
+  color: `var(--_compound-title-color,${vars.compound.titleColor})`,
+  paddingLeft: 12,
   selectors: {
     [`:where([data-likec4-navigable='true']) &`]: {
-      paddingLeft: rem(26)
+      paddingLeft: 26
     }
+    // [`:where([data-mantine-color-scheme='light']) &`]: {
+    //   opacity: 1
+    // }
   }
 })
 
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-title-color']: vars.element.stroke
+  }
+})
+
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) ${title}`, {
+  opacity: 1
+})
+
 const indicatorKeyframes = generateIdentifier('indicator')
 globalKeyframes(indicatorKeyframes, {
   'from': {
@@ -106,7 +120,9 @@ globalKeyframes(indicatorKeyframes, {
   }
 })
 
-export const cssIndicator = style({
+const indicatorStroke = createVar('indicator-stroke')
+const indicatorStrokeWidth = createVar('indicator-stroke-width')
+export const indicator = style({
   position: 'absolute',
   top: '0',
   left: '0',
@@ -115,17 +131,32 @@ export const cssIndicator = style({
   pointerEvents: 'none',
   overflow: 'visible',
   visibility: 'hidden',
+  vars: {
+    [indicatorStroke]: vars.element.loContrast,
+    [indicatorStrokeWidth]: '6'
+  },
   selectors: {
     ':where(.react-flow__node.selected:not(:focus-visible)) &': {
       visibility: 'visible'
+    },
+    ':where(.react-flow__node:focus-within:not(.selected)) &': {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
+        [indicatorStrokeWidth]: '8'
+      }
+    },
+    [`:where([data-mantine-color-scheme='light']) &`]: {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 80%, #000)`
+      }
     }
   }
 })
 
-globalStyle(`${cssIndicator} rect`, {
-  stroke: vars.element.loContrast,
+globalStyle(`${indicator} rect`, {
+  stroke: indicatorStroke,
   transformOrigin: 'center center',
-  strokeWidth: 6,
+  strokeWidth: indicatorStrokeWidth,
   animationDuration: '800ms',
   animationName: indicatorKeyframes,
   animationIterationCount: 'infinite',
@@ -133,18 +164,30 @@ globalStyle(`${cssIndicator} rect`, {
   fill: 'none'
 })
 
-globalStyle(`:where(.react-flow__node:focus-within:not(.selected)) ${cssIndicator} rect`, {
-  stroke: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
-  strokeWidth: 8
+// globalStyle(`:where(.react-flow__node:focus-within:not(.selected)) ${indicator} rect`, {
+//   stroke: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
+//   strokeWidth: 8
+// })
+const navigateBtnColor = createVar('navigateBtnColor')
+
+globalStyle(`${container}`, {
+  vars: {
+    [navigateBtnColor]: vars.element.loContrast
+  }
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
+  vars: {
+    [navigateBtnColor]: vars.element.stroke
+  }
 })
 
-export const cssNavigateBtn = style({
+export const navigateBtn = style({
   position: 'absolute',
   pointerEvents: 'all',
   left: 3,
   top: 7,
   cursor: 'pointer',
-  color: vars.element.loContrast,
+  color: `var(--_compound-title-color,${navigateBtnColor})`,
   transformOrigin: '90% 70%',
   opacity: 0.75,
   transition: 'all 150ms ease-out',
@@ -167,7 +210,14 @@ export const cssNavigateBtn = style({
     transitionDelay: '0'
   },
   selectors: {
-    [`:where(.react-flow__node:not(.dragging) ${cssContainer}:hover) &:not(:hover)`]: {
+    [`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) &`]: {
+      opacity: 0.85,
+      vars: {
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 50%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`
+      }
+    },
+    [`:where(.react-flow__node:not(.dragging) ${container}:hover) &:not(:hover)`]: {
       boxShadow: mantine.shadows.lg,
       transform: 'scale(1.223)',
       opacity: 1,
@@ -178,7 +228,7 @@ export const cssNavigateBtn = style({
     }
   }
 })
-globalStyle(`${cssNavigateBtn} svg.icon`, {
+globalStyle(`${navigateBtn} svg.icon`, {
   width: '70%',
   height: '70%',
   strokeWidth: 1.5

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -1,16 +1,15 @@
-import { defaultTheme } from '@likec4/core'
 import { Box, Text } from '@mantine/core'
 import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual as eq } from 'fast-equals'
-import { scale, toHex } from 'khroma'
-import { memo, useMemo } from 'react'
+import { memo } from 'react'
+import { clamp } from 'remeda'
 import { useDiagramState } from '../../../state'
-import { vars } from '../../../theme.css'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
-import { cssCompound, cssContainer, cssIndicator, cssNavigateBtn, cssTitle } from './CompoundNode.css'
+import { compoundBody, container, indicator, navigateBtn, title } from './CompoundNode.css'
+import * as css from './CompoundNode.css'
 
 type CompoundNodeProps = Pick<
   NodeProps<CompoundXYFlowNode>,
@@ -26,14 +25,6 @@ const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   && eq(prev.data, next.data)
 )
 
-const compoundColor = (color: string, depth: number) =>
-  toHex(
-    scale(color, {
-      l: -35 - 5 * depth,
-      s: -15 - 5 * depth
-    })
-  )
-
 export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
   id,
   data: {
@@ -41,17 +32,10 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   }
 }) {
   // useTilg()
-  const { color, depth = 0, ...compound } = element
-  const colors = useMemo(() => {
-    const colors = defaultTheme.elements[color]
-    return {
-      fill: compoundColor(colors.fill, depth),
-      stroke: compoundColor(colors.stroke, depth)
-    }
-  }, [color, depth])
-
+  const { color, style, depth = 1, ...compound } = element
   // const w = toDomPrecision(width ?? compound.width)
   // const h = toDomPrecision(height ?? compound.height)
+  const opacity = style.opacity ?? 100
 
   const { isHovered, hasOnNavigateTo } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
@@ -59,26 +43,35 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
+  const transparency = clamp(100 - opacity, {
+    min: 0,
+    max: 98
+  })
+
   return (
     <Box
-      className={clsx(cssContainer, 'likec4-compound-node')}
-      style={assignInlineVars({ fill: vars.element.fill, stroke: vars.element.stroke }, {
-        fill: colors.fill,
-        stroke: colors.stroke
-      })}
+      className={clsx(
+        css.container,
+        'likec4-compound-node',
+        opacity < 100 && 'likec4-compound-transparent'
+      )}
       mod={{
+        'compound-depth': depth,
         'likec4-color': color,
         'likec4-shape': compound.shape,
         'likec4-navigable': isnavigable,
         hovered: isHovered
       }}
+      style={assignInlineVars({
+        [css.varTransparency]: transparency + '%'
+      })}
     >
       <Handle
         type="target"
         position={Position.Top}
         style={{ visibility: 'hidden' }}
       />
-      <svg className={cssIndicator}>
+      <svg className={css.indicator}>
         <rect
           x={0}
           y={0}
@@ -87,14 +80,19 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
           rx={6}
         />
       </svg>
-      <div className={clsx(cssCompound, 'likec4-compound')}>
+      <div
+        className={clsx(css.compoundBody, opacity < 100 && css.transparent, 'likec4-compound')}
+        style={{
+          borderStyle: opacity < 100 ? style.border : undefined
+        }}
+      >
         <Text
           component="div"
-          className={clsx(cssTitle, 'likec4-compound-title')}>
+          className={clsx(css.title, 'likec4-compound-title')}>
           {compound.title}
         </Text>
       </div>
-      {isnavigable && <NavigateToBtn xynodeId={id} className={cssNavigateBtn} />}
+      {isnavigable && <NavigateToBtn xynodeId={id} className={css.navigateBtn} />}
       <Handle
         type="source"
         position={Position.Bottom}

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

@@ -78,7 +78,7 @@ export function ElementNode({
 }: ElementNodeProps) {
   const { isHovered, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
-    isInteractive: s.nodesDraggable || s.nodesSelectable,
+    isInteractive: s.nodesDraggable || s.nodesSelectable || !!s.onNavigateTo,
     isHovercards: s.showElementLinks,
     hasOnNavigateTo: !!s.onNavigateTo
   }))
@@ -99,7 +99,7 @@ export function ElementNode({
     case dragging:
       animate = 'idle'
       break
-    case (isInteractive || hasOnNavigateTo) && isHovered:
+    case isInteractive && isHovered:
       animate = 'hovered'
       break
     case selected:

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

@@ -13,6 +13,7 @@ export const container = style({
   height: '100%',
   padding: 0,
   margin: 0,
+  backfaceVisibility: 'hidden',
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
   }

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

@@ -15,9 +15,10 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
       className={clsx('nodrag nopan', className)}
       radius="xl"
       onClick={event => {
-        diagramApi.getState().triggerOnNavigateTo(xynodeId, event)
         event.stopPropagation()
+        diagramApi.getState().triggerOnNavigateTo(xynodeId, event)
       }}
+      onDoubleClick={event => event.stopPropagation()}
     >
       <ZoomIn />
     </ActionIcon>

package/dist/ui/KeepAspectRatio.css.d.ts

@@ -1 +0,0 @@
-export declare const wrapper: string;

package/dist/ui/KeepAspectRatio.d.ts

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

package/src/ui/KeepAspectRatio.css.ts

@@ -1,7 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-export const wrapper = style({
-  width: '100%',
-  height: '100%',
-  padding: 0
-})