@likec4/diagram 1.17.1 → 1.19.0

package/src/xyflow/edges/utils.ts

@@ -1,8 +1,8 @@
 import { Position, type XYPosition } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
-import type { InternalXYFlowNode } from '../types'
+import type { DiagramFlowTypes } from '../types'
 
-export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
+export function getNodeCenter(node: DiagramFlowTypes.InternalNode): XYPosition {
   const { width, height } = getNodeDimensions(node)
   const { x, y } = node.internals.positionAbsolute
 
@@ -15,7 +15,7 @@ export function getNodeCenter(node: InternalXYFlowNode): XYPosition {
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
 export function getNodeIntersectionFromCenterToPoint(
-  intersectionNode: InternalXYFlowNode,
+  intersectionNode: DiagramFlowTypes.InternalNode,
   { x: x1, y: y1 }: XYPosition
 ) {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
@@ -47,7 +47,7 @@ export function getNodeIntersectionFromCenterToPoint(
 
 // this helper function returns the intersection point
 // of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: InternalXYFlowNode): XYPosition {
+function getNodeIntersection(intersectionNode: DiagramFlowTypes.InternalNode, targetNode: DiagramFlowTypes.InternalNode): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
   const {
     width: intersectionNodeWidth,
@@ -81,7 +81,7 @@ function getNodeIntersection(intersectionNode: InternalXYFlowNode, targetNode: I
 }
 
 // returns the position (top,right,bottom or right) passed node compared to the intersection point
-export function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XYPosition) {
+export function getPointPosition(node: DiagramFlowTypes.InternalNode, intersectionPoint: XYPosition) {
   const n = {
     // x: node.data.element.position[0],
     // y: node.data.element.position[1],
@@ -135,7 +135,7 @@ export function getPointPosition(node: InternalXYFlowNode, intersectionPoint: XY
 }
 
 // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: InternalXYFlowNode, target: InternalXYFlowNode) {
+export function getEdgeParams(source: DiagramFlowTypes.InternalNode, target: DiagramFlowTypes.InternalNode) {
   const sourceIntersectionPoint = getNodeIntersection(source, target)
   const targetIntersectionPoint = getNodeIntersection(target, source)
 

package/src/xyflow/nodes/AnimateVariants.ts

@@ -0,0 +1,143 @@
+import { fallbackVar } from '@vanilla-extract/css'
+import type { Variants } from 'framer-motion'
+import { useMemo, useState } from 'react'
+import { isEmpty, isNumber, isString } from 'remeda'
+import { vars } from '../../theme-vars'
+
+const DEFAULT_SCALE_BY = 0
+const SELECTED_SCALE_BY = 16
+const HOVERED_SCALE_BY = 12
+const TAP_SCALE_BY = -16
+
+const DELAY_NODE = 0.1
+const DELAY_NODE_CHILDREN = 0.06
+
+const DIMMED_OPACITY = 0.15
+const DIMMED_DELAY = 0.2
+
+export type VariantKeys = 'dimmed' | 'hoverd' | 'idle' | 'selected' | 'tap'
+
+export const NodeVariants = (width: number, height: number, opts?: {
+  selectedScaleBy?: number
+  hoveredScaleBy?: number
+  tapScaleBy?: number
+}) => {
+  const {
+    selectedScaleBy = SELECTED_SCALE_BY,
+    hoveredScaleBy = HOVERED_SCALE_BY,
+    tapScaleBy = TAP_SCALE_BY,
+  } = opts ?? {}
+
+  // Same scale for X and Y
+  const maxwh = Math.max(width, height)
+  const scaleBy = (diffPx: number) => ({
+    scale: (maxwh + diffPx) / maxwh,
+    // scaleY: (maxwh + diffPx) / maxwh,
+  })
+
+  return {
+    dimmed: {
+      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+      opacity: DIMMED_OPACITY,
+      transition: {
+        delay: DIMMED_DELAY,
+        ease: 'easeInOut',
+      },
+      willChange: 'opacity, filter',
+    },
+    idle: {
+      ...scaleBy(DEFAULT_SCALE_BY),
+      transition: {
+        delay: DELAY_NODE,
+        delayChildren: DELAY_NODE_CHILDREN,
+      },
+      filter: `grayscale(0) ${fallbackVar(vars.safariAnimationHook, 'blur(0px)')}`,
+    },
+    selected: {
+      ...scaleBy(selectedScaleBy),
+    },
+    hovered: (_, { scale }) => ({
+      ...scaleBy(hoveredScaleBy),
+      transition: !isNumber(scale) || (scale === 1)
+        ? ({
+          delay: DELAY_NODE,
+          delayChildren: DELAY_NODE_CHILDREN,
+        })
+        : {},
+    }),
+    tap: {
+      ...scaleBy(tapScaleBy),
+    },
+  } satisfies Variants
+}
+
+export function useFramerAnimateVariants() {
+  const [variants, setVariants] = useState<string[] | null>(null)
+
+  const handlers = useMemo(() => {
+    const getTarget = (e: MouseEvent | undefined) => {
+      try {
+        // 🤔 Sometimes target is null
+        return (e?.target as HTMLElement | null)?.closest('[data-animate-target]')?.getAttribute('data-animate-target')
+          ?? null
+      } catch (_e) {
+        console.warn(`Failed to get animate target`, _e)
+        // noop
+        return null
+      }
+    }
+
+    const onHoverStart = (e: MouseEvent) => {
+      e?.stopPropagation()
+      const hoverTarget = getTarget(e)
+      if (!isString(hoverTarget)) {
+        setVariants(null)
+        return
+      }
+      if (isEmpty(hoverTarget)) {
+        setVariants(['hovered'])
+        return
+      }
+      setVariants(['hovered', `hovered:${hoverTarget}`])
+    }
+
+    const resetVariants = (e: MouseEvent) => {
+      e?.stopPropagation()
+      const hoverTarget = getTarget(e)
+      if (!isString(hoverTarget) || isEmpty(hoverTarget)) {
+        setVariants(null)
+        return
+      }
+      setVariants(v => v?.filter(v => !v.includes(hoverTarget)) ?? null)
+    }
+
+    return ({
+      onTapStart: (e: MouseEvent) => {
+        e?.stopPropagation()
+        const tapTarget = getTarget(e)
+        if (!isString(tapTarget)) {
+          setVariants(null)
+          return
+        }
+        if (isEmpty(tapTarget)) {
+          setVariants([
+            'hovered',
+            'tap',
+          ])
+        } else {
+          setVariants([
+            'hovered',
+            `hovered:${tapTarget}`,
+            `tap:${tapTarget}`,
+          ])
+        }
+      },
+      onHoverStart,
+      onHoverEnd: resetVariants,
+      onTapCancel: resetVariants,
+      onTap: onHoverStart,
+    })
+  }, [setVariants])
+
+  return [variants, handlers] as const
+}

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

@@ -0,0 +1,44 @@
+import { style } from "@vanilla-extract/css";
+
+export const topLeftBtnContainer = style({
+  position: 'absolute',
+  left: 3,
+  top: 6
+})
+
+export const topRightBtnContainer = style({
+  position: 'absolute',
+  top: 2,
+  right: 2,
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      right: 5
+    },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      top: 14
+    },
+    ':where([data-likec4-shape="queue"]) &': {
+      top: 1,
+      right: 12
+    }
+  }
+})
+
+export const bottomBtnContainer = style({
+  zIndex: 100,
+  position: 'absolute',
+  left: 0,
+  width: '100%',
+  bottom: 2,
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  justifyContent: 'center',
+  pointerEvents: 'none',
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 4
+    }
+  }
+})

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

@@ -1,7 +1,7 @@
 import { rem } from '@mantine/core'
 import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars, whereLight } from '../../../theme-vars'
+import { mantine, vars } from '../../../theme-vars'
 
 // For framer motion
 export const containerForFramer = style({
@@ -39,17 +39,20 @@ export const nodeHandlerInCenter = style({
   visibility: 'hidden'
 })
 
-export const dimmed = style({})
-
-globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
-  opacity: 0.25,
-  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
-  transitionDelay: '200ms',
-  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-  willChange: 'opacity, filter'
+globalStyle(`:where([data-mantine-color-scheme='dark'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`
+  }
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
+  vars: {
+    ['--_compound-title-color']: vars.element.stroke
+  }
 })
 
 export const varOpacity = createVar('opacity')
+export const varBorderColor = createVar('border-color')
+export const varBorderRadius = createVar('border-transparency')
 export const varBorderTransparency = createVar('border-transparency')
 
 const outlineColor = fallbackVar(
@@ -62,14 +65,17 @@ export const compoundBody = style({
   width: '100%',
   height: '100%',
   position: 'relative',
-  borderRadius: 6,
+  borderRadius: varBorderRadius,
   boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
   padding: 0,
   margin: 0,
   transition: 'all 200ms ease-out',
-  backgroundClip: 'padding-box',
+  // backgroundClip: 'padding-box',
   // overflow: 'hidden',
   cursor: 'default',
+  vars: {
+    [varBorderRadius]: '6px'
+  },
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -88,8 +94,11 @@ export const compoundBody = style({
     width: '100%',
     height: '100%',
     pointerEvents: 'none',
+    border: '1px solid transparent',
+    borderRadius: varBorderRadius,
     transition: 'background 175ms ease-out, opacity 175ms ease-out',
-    background: vars.element.fill
+    background: vars.element.fill,
+    backgroundClip: 'border-box'
   }
 })
 export const compoundTitle = style({
@@ -97,19 +106,20 @@ export const compoundTitle = style({
   alignItems: 'center',
   gap: 6,
   paddingLeft: 14,
-  paddingTop: 9,
+  paddingTop: 6,
   minHeight: 30,
+  paddingRight: 2,
   selectors: {
     [`:where(.react-flow__node.draggable) &`]: {
       cursor: 'grab'
     },
     [`:where(.likec4-compound-transparent) &`]: {
-      paddingTop: 4
+      paddingTop: 3
     }
   }
 })
 export const withNavigation = style({
-  paddingLeft: 30
+  paddingLeft: 32
 })
 
 const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
@@ -117,8 +127,9 @@ export const transparent = style({
   borderStyle: 'dashed',
   borderWidth: 3,
   boxShadow: 'none',
-  borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
+  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
   vars: {
+    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
     [opacityDeltaOnHover]: '0'
   },
   ':before': {
@@ -156,12 +167,6 @@ export const title = style({
   mixBlendMode: 'screen'
 })
 
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
-  vars: {
-    ['--_compound-title-color']: vars.element.stroke
-  }
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6
@@ -228,59 +233,6 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
-const btn = style({
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  color: `var(--_compound-title-color,${navigateBtnColor})`,
-  opacity: 'var(--ai-opacity)',
-  backgroundColor: 'var(--ai-bg)',
-  vars: {
-    '--ai-opacity': '1',
-    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-    '--ai-bg': `var(--ai-bg-idle)`,
-    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
-    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
-  },
-  ':hover': {
-    boxShadow: mantine.shadows.md
-  },
-  selectors: {
-    [`${whereLight} .likec4-compound-transparent &`]: {
-      opacity: 0.85,
-      vars: {
-        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
-        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
-      }
-    }
-  }
-})
-
-export const navigateBtn = style([btn, {
-  position: 'absolute',
-  left: 3,
-  top: 6
-}])
-
-export const detailsBtn = style([btn, {
-  // position: 'absolute',
-  // top: 2,
-  // right: 2,
-  // selectors: {
-  //   [`:where([data-likec4-shape='browser']) &`]: {
-  //     top: 3,
-  //     right: 5
-  //   },
-  //   ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-  //     top: 14
-  //   },
-  //   ':where([data-likec4-shape="queue"]) &': {
-  //     top: 1,
-  //     right: 12
-  //   }
-  // }
-}])
-
 export const elementIcon = style({
   flex: `0 0 ${iconSize}`,
   height: iconSize,