@likec4/diagram 1.4.0 → 1.6.0

package/src/xyflow/hooks/useXYFlow.ts

@@ -1,5 +1,6 @@
 import { useNodesData, useReactFlow, useStore, useStoreApi } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
+import { deepEqual, shallowEqual } from 'fast-equals'
+import { useCallback } from 'react'
 import type { XYFlowEdge, XYFlowNode, XYFlowState } from '../types'
 
 export const useXYFlow = useReactFlow<XYFlowNode, XYFlowEdge>
@@ -18,3 +19,29 @@ export function useXYStore<StateSlice = unknown>(
 }
 export const useXYStoreApi = useStoreApi<XYFlowNode, XYFlowEdge>
 export type XYStoreApi = ReturnType<typeof useXYStoreApi>
+
+export function useXYEdgesData(edgeIds: string[]): Pick<XYFlowEdge, 'id' | 'data'>[] {
+  const ids = edgeIds.join(',')
+  const edgesData = useXYStore(
+    useCallback(
+      (s) => {
+        const data = [] as Pick<XYFlowEdge, 'id' | 'data'>[]
+        for (const id of edgeIds) {
+          const edge = s.edgeLookup.get(id)
+          if (edge) {
+            data.push({
+              id: edge.id,
+              data: edge.data
+            })
+          }
+        }
+
+        return data
+      },
+      [ids]
+    ),
+    deepEqual
+  )
+
+  return edgesData
+}

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

@@ -12,6 +12,12 @@ export const container = style({
   margin: 0
 })
 
+export const nodeHandlerInCenter = style({
+  top: '50%',
+  left: '50%',
+  visibility: 'hidden'
+})
+
 export const dimmed = style({})
 
 globalStyle(`.react-flow__node-compound:has(${dimmed})`, {
@@ -37,8 +43,12 @@ export const compoundBody = style({
   position: 'relative',
   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,
+  padding: 0,
+  margin: 0,
   transition: 'all 200ms ease-out',
+  backgroundClip: 'padding-box',
+  overflow: 'hidden',
+  cursor: 'default',
   selectors: {
     [`:where(.react-flow__node.selected) &`]: {
       boxShadow: 'none'
@@ -56,11 +66,9 @@ export const compoundBody = style({
     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'
+    background: vars.element.fill
   }
 })
 
@@ -68,16 +76,15 @@ const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
 export const transparent = style({
   borderStyle: 'dashed',
   borderWidth: 3,
-  padding: 6,
   boxShadow: 'none',
   borderColor: `color-mix(in srgb , ${vars.element.stroke}, transparent ${fallbackVar(varBorderTransparency, '10%')})`,
-  backgroundClip: 'padding-box',
   vars: {
     [opacityDeltaOnHover]: '0',
     '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`
   },
   ':before': {
-    transitionDelay: '200ms',
+    borderRadius: 'unset',
+    transitionDelay: '100ms',
     opacity: calc.add(fallbackVar(varOpacity, '1'), opacityDeltaOnHover)
   },
   selectors: {
@@ -88,7 +95,7 @@ export const transparent = style({
     // },
     [`:where([data-hovered]) &`]: {
       vars: {
-        [opacityDeltaOnHover]: '.07'
+        [opacityDeltaOnHover]: '.08'
       }
     }
   }
@@ -96,21 +103,28 @@ export const transparent = style({
 
 export const title = style({
   fontFamily: vars.compound.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
   textAlign: 'left',
-  display: 'inline-block',
   fontWeight: 600,
-  fontSize: '14px',
+  fontSize: rem(15),
   textTransform: 'uppercase',
   letterSpacing: '0.2px',
   lineHeight: 1,
-  opacity: 0.75,
   color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  paddingLeft: 12
+  paddingLeft: 14,
+  paddingTop: 13,
+  paddingBottom: 6,
+  mixBlendMode: 'screen',
+  selectors: {
+    [`:where(.react-flow__node.draggable) &`]: {
+      cursor: 'grab'
+    },
+    [`:where(.likec4-compound-transparent) &`]: {
+      paddingTop: 10
+    }
+  }
 })
 export const titleWithNavigation = style({
-  paddingLeft: 26
+  paddingLeft: 32
 })
 
 globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
@@ -119,10 +133,6 @@ globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transpa
   }
 })
 
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent) ${title}`, {
-  opacity: 1
-})
-
 const indicatorKeyframes = keyframes({
   'from': {
     opacity: 0.6
@@ -197,10 +207,10 @@ export const navigateBtn = style({
   position: 'absolute',
   pointerEvents: 'all',
   left: 3,
-  top: 7,
+  top: 6,
   cursor: 'pointer',
   color: `var(--_compound-title-color,${navigateBtnColor})`,
-  transformOrigin: '90% 70%',
+  transformOrigin: '90% 50%',
   opacity: 0.75,
   transition: 'all 150ms ease-out',
   transitionDelay: '0ms',
@@ -225,7 +235,7 @@ export const navigateBtn = style({
     [`: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-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 60%)`,
         '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`
       }
     },
@@ -241,8 +251,8 @@ export const navigateBtn = style({
   }
 })
 globalStyle(`${navigateBtn} svg.icon`, {
-  width: '70%',
-  height: '70%',
+  width: '75%',
+  height: '75%',
   strokeWidth: 1.5
 })
 

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

@@ -2,12 +2,10 @@ 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 { useDiagramState } from '../../../state/useDiagramStore'
 import type { CompoundXYFlowNode } from '../../types'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './CompoundNode.css'
@@ -31,7 +29,6 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
     element
   }
 }) {
-  DEV && useTilg()
   const { color, style, depth = 1, ...compound } = element
   // const w = toDomPrecision(width ?? compound.width)
   // const h = toDomPrecision(height ?? compound.height)
@@ -52,65 +49,67 @@ export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>(function
   const isnavigable = !!compound.navigateTo && hasOnNavigateTo
 
   return (
-    <Box
-      className={clsx(
-        css.container,
-        'likec4-compound-node',
-        opacity < 1 && 'likec4-compound-transparent',
-        isDimmed && css.dimmed
-      )}
-      mod={{
-        'compound-depth': depth,
-        'likec4-color': color,
-        hovered: isHovered
-      }}
-    >
+    <>
       <Handle
         type="target"
         position={Position.Top}
-        style={{ visibility: 'hidden' }}
+        className={css.nodeHandlerInCenter}
       />
-      <svg className={css.indicator}>
-        <rect
-          x={0}
-          y={0}
-          width={'100%'}
-          height={'100%'}
-          rx={6}
-        />
-      </svg>
-      <div
+      <Box
         className={clsx(
-          css.compoundBody,
-          opacity < 1 && css.transparent,
-          'likec4-compound'
+          css.container,
+          'likec4-compound-node',
+          opacity < 1 && 'likec4-compound-transparent',
+          isDimmed && css.dimmed
         )}
-        style={opacity < 1
-          ? {
-            ...assignInlineVars({
-              [css.varBorderTransparency]: `${borderTransparency}%`,
-              [css.varOpacity]: opacity.toFixed(2)
-            }),
-            borderStyle: style.border ?? 'dashed'
-          }
-          : undefined}
+        mod={{
+          'compound-depth': depth,
+          'likec4-color': color,
+          hovered: isHovered
+        }}
       >
-        <Text
-          component="div"
+        <svg className={css.indicator}>
+          <rect
+            x={0}
+            y={0}
+            width={'100%'}
+            height={'100%'}
+            rx={6}
+          />
+        </svg>
+        <div
           className={clsx(
-            css.title,
-            isnavigable && css.titleWithNavigation,
-            'likec4-compound-title'
-          )}>
-          {compound.title}
-        </Text>
-      </div>
-      {isnavigable && <NavigateToBtn xynodeId={id} className={css.navigateBtn} />}
+            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,
+              isnavigable && css.titleWithNavigation,
+              'likec4-compound-title'
+            )}>
+            {compound.title}
+          </Text>
+        </div>
+        {isnavigable && <NavigateToBtn xynodeId={id} className={css.navigateBtn} />}
+      </Box>
       <Handle
         type="source"
-        position={Position.Bottom}
-        style={{ visibility: 'hidden' }}
+        position={Position.Top}
+        className={css.nodeHandlerInCenter}
       />
-    </Box>
+    </>
   )
 }, isEqualProps)

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

@@ -7,14 +7,17 @@ import {
   Group,
   HoverCard,
   HoverCardDropdown,
+  type HoverCardProps,
   HoverCardTarget,
   Stack,
   UnstyledButton
 } from '@mantine/core'
+import { IconLink } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { useId } from 'react'
 import { clamp } from 'remeda'
-import { Link } from '../../../icons'
+import { type DiagramState } from '../../../state/diagramStore'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { XYFlowNode } from '../../types'
 import { elementLink, trigger } from './ElementLink.css'
 
@@ -22,23 +25,17 @@ type ElementLinkProps = {
   element: XYFlowNode['data']['element']
 }
 
+const selector = (s: DiagramState) => {
+  const target = s.getContainer()
+  return target ? { target } : null
+}
+
 export function ElementLink({
   element
 }: ElementLinkProps) {
   invariant(element.links, 'ElementLink: links are required')
   const id = useId()
-  // const mantineCtx = useMantineContext()
-  // const root = mantineCtx.getRootElement()
-
-  // const targetSelector = `.react-flow:has([data-likec4-linkid="${id}"])`
-  // // const target = root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
-
-  // const portalProps = useMemo(() => ({
-  //   get target(): HTMLElement | string {
-  //     const root = mantineCtx.getRootElement()
-  //     return root?.querySelector<HTMLDivElement>(targetSelector) ?? targetSelector
-  //   }
-  // }), [targetSelector])
+  const portalProps = useDiagramState(selector)
   return (
     <div className={elementLink} data-likec4-linkid={id}>
       <HoverCard
@@ -51,8 +48,7 @@ export function ElementLink({
         transitionProps={{
           transition: 'pop'
         }}
-        // portalProps={portalProps}
-        withinPortal={false}
+        {...(portalProps ? { portalProps } : { withinPortal: false })}
         floatingStrategy={'fixed'}
         openDelay={350}
         closeDelay={800}
@@ -64,7 +60,7 @@ export function ElementLink({
           <UnstyledButton
             className={clsx('nodrag nopan', trigger)}
             autoFocus={false}>
-            <Link />
+            <IconLink size={12} />
             <span>links</span>
           </UnstyledButton>
         </HoverCardTarget>

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

@@ -1,21 +1,23 @@
-import { Text } from '@mantine/core'
+import type { DiagramNode } from '@likec4/core/types'
+import { Text as MantineText } from '@mantine/core'
 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 { m, type Variants } from 'framer-motion'
 import { memo } from 'react'
-import { isNumber } from 'remeda'
-import useTilg from 'tilg'
-import { useDiagramState } from '../../../state'
+import { isNumber, isTruthy } from 'remeda'
+import { useDiagramState } from '../../../state/useDiagramStore'
 import type { ElementXYFlowNode } from '../../types'
 import { toDomPrecision } from '../../utils'
 import { NavigateToBtn } from '../shared/NavigateToBtn'
 import * as css from './element.css'
-import { ElementIcon } from './ElementIcon'
 import { ElementLink } from './ElementLink'
 import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
 
+const Text = MantineText.withProps({
+  component: 'div'
+})
+
 type ElementNodeProps = NodeProps<ElementXYFlowNode>
 
 const selectedScale = 1.015
@@ -69,6 +71,7 @@ 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.draggable ?? false, next.draggable ?? false)
   && eq(prev.width ?? 0, next.width ?? 0)
   && eq(prev.height ?? 0, next.height ?? 0)
   && eq(prev.data.element, next.data.element)
@@ -80,11 +83,11 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
     element
   },
   dragging,
+  // draggable = false,
   selected = false,
   width,
   height
 }) {
-  DEV && useTilg()
   const { isHovered, isDimmed, hasOnNavigateTo, isHovercards, isInteractive } = useDiagramState(s => ({
     isHovered: s.hoveredNodeId === id,
     isDimmed: s.dimmed.has(id),
@@ -120,124 +123,125 @@ export const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
   // useTilg(animate, isHovered, isInteractive)
 
   return (
-    <m.div
-      id={id}
-      className={clsx([
-        css.container,
-        isDimmed && css.dimmed,
-        animate !== 'idle' && css.containerAnimated,
-        'likec4-element-node'
-      ])}
-      data-hovered={!dragging && isHovered}
-      data-likec4-color={element.color}
-      data-likec4-shape={element.shape}
-      variants={variants}
-      initial={false}
-      animate={animate}
-      {...(isInteractive && {
-        whileTap: dragging ? animate : 'tap'
-      })}
-    >
-      {
-        /* <NodeToolbar
-        position={Position.Bottom}
-        align={'start'}
-        offset={-10}
-        isVisible={selected || isHovered}>
-<Button>editggg</Button>
-      </NodeToolbar> */
-      }
-      {
-        /* <NodeResizer minWidth={100} minHeight={30} />
-      <NodeToolbar
-        position={Position.Right}
-        align={'start'}
-        style={{
-          background: 'blue'
-        }}>
-        <Stack>
-          <Button>edit</Button>
-
-        </Stack>
-      </NodeToolbar>*/
-      }
-      {
-        /* {element.inEdges.map((edge) => (
-        <Handle
-          key={edge}
-          id={edge}
-          type="target"
-          position={Position.Top}
-          style={{ visibility: 'hidden' }}
-        />
-      ))} */
-      }
+    <>
       <Handle
         type="target"
         position={Position.Top}
-        style={{ visibility: 'hidden' }}
+        className={css.handleCenter}
       />
-      <svg
-        className={clsx(
-          css.cssShapeSvg
-        )}
-        viewBox={`0 0 ${w} ${h}`}
-        width={w}
-        height={h}
+      <m.div
+        id={id}
+        className={clsx([
+          css.container,
+          isDimmed && css.dimmed,
+          animate !== 'idle' && css.containerAnimated,
+          'likec4-element-node'
+        ])}
+        data-hovered={!dragging && isHovered}
+        data-likec4-color={element.color}
+        data-likec4-shape={element.shape}
+        variants={variants}
+        initial={false}
+        animate={animate}
+        {...(isInteractive && {
+          whileTap: dragging ? animate : 'tap'
+        })}
       >
-        <g className={css.indicator}>
-          <SelectedIndicator
+        {
+          /* <svg
+          className={clsx(
+            css.cssShapeSvgMultiple
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <ElementShapeSvg
             shape={element.shape}
             w={w}
             h={h}
           />
-        </g>
-        <ElementShapeSvg
-          shape={element.shape}
-          w={w}
-          h={h}
-        />
-      </svg>
-      <div className={clsx(css.element, 'likec4-element')}>
-        {element.icon && <ElementIcon node={element} />}
-        <Text
-          component="div"
-          className={clsx(css.title, 'likec4-element-title')}>
-          {element.title}
-        </Text>
-        {element.technology && (
-          <Text
-            component="div"
-            className={clsx(css.technology, 'likec4-element-technology')}>
-            {element.technology}
-          </Text>
-        )}
-        {element.description && (
-          <Text
-            component="div"
-            className={clsx(css.description, 'likec4-element-description')}>
-            {element.description}
-          </Text>
-        )}
-      </div>
+        </svg> */
+        }
+        <svg
+          className={clsx(
+            css.cssShapeSvg
+          )}
+          viewBox={`0 0 ${w} ${h}`}
+          width={w}
+          height={h}
+        >
+          <g className={css.indicator}>
+            <SelectedIndicator
+              shape={element.shape}
+              w={w}
+              h={h}
+            />
+          </g>
+          <ElementShapeSvg
+            shape={element.shape}
+            w={w}
+            h={h}
+          />
+        </svg>
+        <div
+          className={clsx(
+            css.elementDataContainer,
+            isTruthy(element.icon) && css.hasIcon,
+            'likec4-element'
+          )}
+        >
+          {isTruthy(element.icon) && <ElementIcon node={element} />}
+          <div className={clsx(css.elementTextData, 'likec4-element-main-props')}>
+            <Text
+              className={clsx(css.title, 'likec4-element-title')}>
+              {element.title}
+            </Text>
+            {element.technology && (
+              <Text
+                className={clsx(css.technology, 'likec4-element-technology')}>
+                {element.technology}
+              </Text>
+            )}
+            {element.description && (
+              <Text
+                className={clsx(css.description, 'likec4-element-description')}>
+                {element.description}
+              </Text>
+            )}
+          </div>
+        </div>
+        {isHovercards && element.links && <ElementLink element={element} />}
+        {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
+      </m.div>
       <Handle
         type="source"
-        position={Position.Bottom}
-        style={{ visibility: 'hidden' }}
+        position={Position.Top}
+        className={css.handleCenter}
       />
-      {
-        /* {element.outEdges.map((edge) => (
-        <Handle
-        key={edge}
-          id={edge}
-          type="source"
-          position={Position.Bottom}
-          style={{ visibility: 'hidden' }}
-        />
-      ))} */
-      }
-      {isHovercards && element.links && <ElementLink element={element} />}
-      {isNavigable && <NavigateToBtn xynodeId={id} className={css.cssNavigateBtn} />}
-    </m.div>
+    </>
   )
 }, isEqualProps)
+
+const ElementIcon = ({ node }: { node: DiagramNode }) => {
+  const RenderIcon = useDiagramState(s => s.renderIcon)
+  if (!node.icon) {
+    return null
+  }
+  if (node.icon.startsWith('http://') || node.icon.startsWith('https://')) {
+    return (
+      <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+        <img src={node.icon} alt={node.title} />
+      </div>
+    )
+  }
+  const icon = RenderIcon ? <RenderIcon node={node} /> : null
+  if (!icon) {
+    return null
+  }
+  return (
+    <div className={clsx(css.elementIcon, 'likec4-element-icon')}>
+      {icon}
+    </div>
+  )
+}

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

@@ -2,7 +2,7 @@ import { type ElementShape, nonexhaustive } from '@likec4/core'
 import { toDomPrecision } from '../../utils'
 import { fillElementFill, fillMixStroke } from './element.css'
 
-function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
+export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
   const radius = Math.round(diameter / 2)
   // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
   const rx = radius
@@ -25,7 +25,7 @@ function cylinderSVGPath(diameter: number, height: number, tilt = 0.0725) {
   }
 }
 
-function queueSVGPath(width: number, height: number, tilt = 0.2) {
+function queueSVGPath(width: number, height: number, tilt = 0.185) {
   const diameter = height
   const radius = Math.round(diameter / 2)
   const ry = radius