@likec4/diagram 1.2.1 → 1.3.0

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

@@ -1,5 +1,6 @@
 import { rem } from '@mantine/core'
-import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+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'
 
@@ -11,12 +12,18 @@ export const container = style({
   margin: 0
 })
 
-export const dimmed = style({
-  filter: vars.filterDimmed,
-  transition: 'filter 800ms ease-out'
+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) blur(1px)',
+  willChange: 'opacity, filter'
 })
 
-export const varTransparency = createVar('transparency')
+export const varOpacity = createVar('opacity')
+export const varBorderTransparency = createVar('border-transparency')
 
 const outlineColor = fallbackVar(
   mantine.colors.primaryColors.outline,
@@ -31,7 +38,6 @@ export const compoundBody = style({
   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: 8,
-  background: vars.element.fill,
   transition: 'all 200ms ease-out',
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
@@ -42,39 +48,47 @@ export const compoundBody = style({
       outline: `3px solid ${outlineColor}`,
       outlineOffset: rem(1.5)
     }
+  },
+  ':before': {
+    content: '" "',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    borderRadius: 6,
+    pointerEvents: 'none',
+    transition: 'background 175ms ease-out, opacity 175ms ease-out',
+    background: vars.element.fill,
+    backgroundClip: 'padding-box'
   }
 })
 
-const bgTransparency = createVar('bgTransparency')
-const bgTransparencyDelta = createVar('bgTransparencyDelta')
+const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
 export const transparent = style({
   borderStyle: 'dashed',
   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})`,
+  boxShadow: 'none',
+  borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
   backgroundClip: 'padding-box',
-  // transitionTimingFunction: 'ease-in',
-  // transition: 'all 150ms ease-in-out',
   vars: {
-    [bgTransparency]: `calc(${fallbackVar(varTransparency, '80%')} - ${bgTransparencyDelta})`,
-    [bgTransparencyDelta]: '0%',
+    [opacityDeltaOnHover]: '0',
     '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
   },
+  ':before': {
+    transitionDelay: '200ms',
+    opacity: calc.add(fallbackVar(varOpacity, '1'), opacityDeltaOnHover)
+  },
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
-      transitionDelay: '50ms',
-      // borderColor: 'transparent',
-      // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparencyDelta]: '5%'
+        [opacityDeltaOnHover]: '.05'
       }
     },
     [`:where([data-hovered]) &`]: {
-      transitionDelay: '175ms',
-      // transitionTimingFunction: 'ease-out',
       vars: {
-        [bgTransparencyDelta]: '15%'
+        [opacityDeltaOnHover]: '.1'
       }
     }
   }
@@ -93,15 +107,10 @@ export const title = style({
   lineHeight: 1,
   opacity: 0.75,
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  paddingLeft: 12,
-  selectors: {
-    [`:where([data-likec4-navigable='true']) &`]: {
-      paddingLeft: 26
-    }
-    // [`:where([data-mantine-color-scheme='light']) &`]: {
-    //   opacity: 1
-    // }
-  }
+  paddingLeft: 12
+})
+export const titleWithNavigation = style({
+  paddingLeft: 26
 })
 
 globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
@@ -114,8 +123,7 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   opacity: 1
 })
 
-const indicatorKeyframes = generateIdentifier('indicator')
-globalKeyframes(indicatorKeyframes, {
+const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6
   },

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

@@ -2,13 +2,14 @@ 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 { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { memo } from 'react'
 import { clamp } from 'remeda'
+import useTilg from 'tilg'
 import { useDiagramState } from '../../../state'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
-import { compoundBody, container, indicator, navigateBtn, title } from './CompoundNode.css'
 import * as css from './CompoundNode.css'
 
 type CompoundNodeProps = Pick<
@@ -16,13 +17,12 @@ type CompoundNodeProps = Pick<
   'id' | 'data' | 'width' | 'height' | 'selected'
 >
 
-// @ts-ignore
 const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
   prev.id === next.id
-  && prev.selected === next.selected
-  && prev.width === next.width
-  && prev.height === next.height
-  && eq(prev.data, next.data)
+  // && prev.selected === next.selected
+  // && eq(prev.width, next.width)
+  // && eq(prev.height, next.height)
+  && eq(prev.data.element, next.data.element)
 )
 
 export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function CompoundNode({
@@ -31,11 +31,18 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     element
   }
 }) {
-  // useTilg()
+  DEV && useTilg()
   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 opacity = clamp((style.opacity ?? 100) / 100, {
+    min: 0,
+    max: 1
+  })
+  const borderTransparency = clamp(50 - opacity * 50, {
+    min: 0,
+    max: 50
+  })
 
   const { isHovered, isDimmed, hasOnNavigateTo } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
@@ -44,30 +51,19 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   }))
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
-  // invert opacity to transparency
-  const transparency = clamp(100 - opacity, {
-    min: 0,
-    max: 99
-  })
-
   return (
     <Box
       className={clsx(
         css.container,
         'likec4-compound-node',
-        opacity < 100 && 'likec4-compound-transparent',
+        opacity < 1 && 'likec4-compound-transparent',
         isDimmed && css.dimmed
       )}
       mod={{
         'compound-depth': depth,
         'likec4-color': color,
-        'likec4-shape': compound.shape,
-        'likec4-navigable': isnavigable,
         hovered: isHovered
       }}
-      style={assignInlineVars({
-        [css.varTransparency]: transparency + '%'
-      })}
     >
       <Handle
         type="target"
@@ -84,14 +80,28 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
         />
       </svg>
       <div
-        className={clsx(css.compoundBody, opacity < 100 && css.transparent, 'likec4-compound')}
-        style={{
-          borderStyle: opacity < 100 ? style.border : undefined
-        }}
+        className={clsx(
+          css.compoundBody,
+          opacity < 1 && css.transparent,
+          'likec4-compound'
+        )}
+        style={opacity < 1
+          ? {
+            ...assignInlineVars({
+              [css.varBorderTransparency]: `${borderTransparency}%`,
+              [css.varOpacity]: opacity.toFixed(2)
+            }),
+            borderStyle: style.border ?? 'dashed'
+          }
+          : undefined}
       >
         <Text
           component="div"
-          className={clsx(css.title, 'likec4-compound-title')}>
+          className={clsx(
+            css.title,
+            isnavigable && css.titleWithNavigation,
+            'likec4-compound-title'
+          )}>
           {compound.title}
         </Text>
       </div>
@@ -103,4 +113,4 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
       />
     </Box>
   )
-})
+}, isEqualProps)

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

@@ -1,8 +1,12 @@
 import { Text } from '@mantine/core'
 import { Handle, type NodeProps, Position } from '@xyflow/react'
 import clsx from 'clsx'
-import { motion, type Variants } from 'framer-motion'
+import { DEV } from 'esm-env'
+import { deepEqual as eq } from 'fast-equals'
+import { m, type Variants } from 'framer-motion'
+import { memo } from 'react'
 import { isNumber } from 'remeda'
+import useTilg from 'tilg'
 import { useDiagramState } from '../../../state'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
@@ -64,7 +68,16 @@ const variants = {
   // }
 } satisfies Variants
 
-export function ElementNode({
+const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
+  prev.id === next.id
+  && eq(prev.selected ?? false, next.selected ?? false)
+  && eq(prev.dragging ?? false, next.dragging ?? false)
+  && eq(prev.width ?? 0, next.width ?? 0)
+  && eq(prev.height ?? 0, next.height ?? 0)
+  && eq(prev.data.element, next.data.element)
+)
+
+export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   id,
   data: {
     element
@@ -73,7 +86,8 @@ export function ElementNode({
   selected = false,
   width,
   height
-}: ElementNodeProps) {
+}) {
+  DEV && useTilg()
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
@@ -109,7 +123,7 @@ export function ElementNode({
   // useTilg(animate, isHovered, isInteractive)
 
   return (
-    <motion.div
+    <m.div
       id={id}
       className={clsx([
         css.container,
@@ -225,6 +239,6 @@ export function ElementNode({
       }
       {isHovercards && element.links && <ElementLink element={element} />}
       {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
-    </motion.div>
+    </m.div>
   )
-}
+}, isEqualProps)

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

@@ -1,5 +1,5 @@
 import { rem } from '@mantine/core'
-import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
 import { mantine } from '../../../mantine.css'
 import { vars } from '../../../theme.css'
 
@@ -8,12 +8,12 @@ const elPadding = createVar('el-padding')
 // assignVars
 
 export const container = style({
-  position: 'relative',
   width: '100%',
   height: '100%',
   padding: 0,
   margin: 0,
-  backfaceVisibility: 'hidden',
+  display: 'flex',
+  alignItems: 'stretch',
   vars: {
     [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
   }
@@ -21,13 +21,15 @@ export const container = style({
 
 export const dimmed = style({})
 
-globalStyle(`.react-flow__node:has(${dimmed})`, {
-  filter: vars.filterDimmed,
-  transition: 'filter 800ms ease-out'
+globalStyle(`.react-flow__node-element:has(${dimmed})`, {
+  opacity: 0.25,
+  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+  transitionDelay: '200ms',
+  filter: 'grayscale(0.85) blur(2px)',
+  willChange: 'opacity, filter'
 })
 
-const indicatorKeyframes = generateIdentifier('indicator')
-globalKeyframes(indicatorKeyframes, {
+const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6
   },
@@ -63,6 +65,9 @@ export const indicator = style({
     },
     ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
       strokeWidth: 10
+    },
+    [`${dimmed} &`]: {
+      visibility: 'hidden'
     }
   }
 })
@@ -128,9 +133,7 @@ export const technology = style({
 })
 
 export const element = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
+  flex: '1',
   padding: elPadding,
   display: 'flex',
   flexDirection: 'column',
@@ -165,10 +168,6 @@ export const elementIcon = style({
   flex: `0 1 ${iconMaxH}`,
   maxHeight: iconMaxH,
   marginTop: -8,
-  // display: 'flex',
-  // justifyContent: 'flex-end',
-  // flexDirection: 'column',
-  // alignItems: 'center',
   position: 'relative',
   userSelect: 'none',
   pointerEvents: 'none',
@@ -203,6 +202,7 @@ export const cssShapeSvg = style({
   filter: fallbackVar(filterShadowHovered, filterShadow),
   transition: 'filter 300ms ease-out',
   transitionDelay: '0ms',
+  zIndex: -1,
   vars: {
     [filterShadow]: `
       drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))

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

@@ -1 +1 @@
-export { ElementNode } from './ElementNode'
+export { ElementNodeMemo as ElementNode } from './ElementNode'

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

@@ -1,6 +1,6 @@
 import { ActionIcon } from '@mantine/core'
+import { IconZoomScan } from '@tabler/icons-react'
 import clsx from 'clsx'
-import { ZoomIn } from '../../../icons'
 import { useDiagramStoreApi } from '../../../state'
 
 export type NavigateToBtnProps = {
@@ -13,7 +13,7 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
   return (
     <ActionIcon
       className={clsx('nodrag nopan', className)}
-      radius="xl"
+      radius="md"
       onPointerDownCapture={e => e.stopPropagation()}
       onClick={event => {
         event.stopPropagation()
@@ -21,7 +21,11 @@ export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
       }}
       onDoubleClick={event => event.stopPropagation()}
     >
-      <ZoomIn />
+      <IconZoomScan
+        style={{
+          width: '75%',
+          height: '75%'
+        }} />
     </ActionIcon>
   )
 }

package/src/xyflow/types.ts

@@ -1,4 +1,4 @@
-import type { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core'
+import type { BBox, DiagramEdge, DiagramNode, Fqn, Point, ViewID, XYPosition } from '@likec4/core'
 import type {
   Edge,
   EdgeMouseHandler,
@@ -57,7 +57,10 @@ export namespace XYFlowNode {
 
 export type RelationshipData = {
   edge: DiagramEdge
-  controlPoints: Point[]
+  // to replace edges on view change
+  // viewId: ViewID
+  // if set - edge was changed by user
+  controlPoints: XYPosition[] | null
   headPoint: Point | null
   tailPoint: Point | null
   type: 'bezier' | 'poly'

package/src/xyflow/utils.ts

@@ -1,4 +1,8 @@
+import { hasAtLeast, invariant } from '@likec4/core'
+import type { DiagramEdge, NonEmptyArray, Point } from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/react'
+import { Bezier } from 'bezier-js'
+import { isArray } from 'remeda'
 
 export function toDomPrecision(v: number | null) {
   if (v === null) {
@@ -10,3 +14,47 @@ export function toDomPrecision(v: number | null) {
 export function distance(a: XYPosition, b: XYPosition) {
   return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
 }
+
+export function bezierControlPoints(diagramEdge: DiagramEdge) {
+  let [start, ...bezierPoints] = diagramEdge.points
+  invariant(start, 'start should be defined')
+  const handles = [
+    // start
+  ] as XYPosition[]
+
+  while (hasAtLeast(bezierPoints, 3)) {
+    const [cp1, cp2, end, ...rest] = bezierPoints
+    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1])
+    // TODO: temporary, we need correcly derive catmull-rom from bezier. Actually, from poly-bezier
+    const inflections = bezier.inflections()
+    if (inflections.length === 0) {
+      inflections.push(0.5)
+    }
+    inflections.forEach(t => {
+      const { x, y } = bezier.get(t)
+      handles.push({
+        x: toDomPrecision(x),
+        y: toDomPrecision(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
+}
+
+// If points are within 3px, consider them the same
+const isClose = (a: number, b: number) => {
+  return Math.abs(a - b) < 3.1
+}
+
+export function isSamePoint(a: XYPosition | Point, b: XYPosition | Point) {
+  const [ax, ay] = isArray(a) ? a : [a.x, a.y]
+  const [bx, by] = isArray(b) ? b : [b.x, b.y]
+  return isClose(ax, bx) && isClose(ay, by)
+}

package/dist/ui/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DynamicViewWalkthrough';
-export { default as OptionsPanel } from './OptionsPanel';

package/src/ui/index.ts

@@ -1,3 +0,0 @@
-// export { default as Camera } from './Camera'
-export * from './DynamicViewWalkthrough'
-export { default as OptionsPanel } from './OptionsPanel'