@likec4/diagram 1.0.0-next.2 → 1.0.0

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

@@ -0,0 +1,181 @@
+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) {
+  const radius = Math.round(diameter / 2)
+  // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
+  const rx = radius
+  const ry = toDomPrecision(tilt * radius)
+  const tiltAdjustedHeight = height - 2 * ry
+
+  const path = `  M ${diameter},${ry}
+        a ${rx},${ry} 0,0,0 ${-diameter} 0
+        l 0,${tiltAdjustedHeight}
+        a ${rx},${ry} 0,0,0 ${diameter} 0
+        l 0,${-tiltAdjustedHeight}
+        z
+        `
+    .replace(/\s+/g, ' ')
+    .trim()
+  return {
+    path,
+    ry,
+    rx
+  }
+}
+
+function queueSVGPath(width: number, height: number, tilt = 0.2) {
+  const diameter = height
+  const radius = Math.round(diameter / 2)
+  const ry = radius
+  const rx = toDomPrecision((diameter / 2) * tilt)
+  const tiltAdjustedWidth = width - 2 * rx
+
+  const path = `
+    M ${rx},0
+    a ${rx},${ry} 0,0,0 0 ${diameter}
+    l ${tiltAdjustedWidth},0
+    a ${rx},${ry} 0,0,0 0 ${-diameter}
+    z`
+    .replace(/\s+/g, ' ')
+    .trim()
+  return {
+    path,
+    ry,
+    rx
+  }
+}
+
+const PersonIcon = {
+  width: 115,
+  height: 120,
+  path:
+    `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`
+} as const
+
+type ElementShapeSvgProps = {
+  shape: ElementShape
+  w: number
+  h: number
+}
+
+export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
+  switch (shape) {
+    case 'mobile': {
+      return (
+        <>
+          <rect
+            width={w}
+            height={h}
+            rx={6}
+            className={fillMixStroke}
+            strokeWidth={0}
+          />
+          <g className={fillElementFill} strokeWidth={0}>
+            <circle cx={17} cy={h / 2} r={12} />
+            <rect x={33} y={12} width={w - 44} height={h - 24} rx={5} />
+          </g>
+        </>
+      )
+    }
+    case 'browser': {
+      return (
+        <>
+          <rect
+            width={w}
+            height={h}
+            rx={6}
+            className={fillMixStroke}
+            strokeWidth={0}
+          />
+          <g className={fillElementFill} strokeWidth={0}>
+            <circle cx={16} cy={17} r={7} />
+            <circle cx={36} cy={17} r={7} />
+            <circle cx={56} cy={17} r={7} />
+            <rect x={70} y={8} width={w - 80} height={17} rx={4} />
+            <rect x={10} y={32} width={w - 20} height={h - 42} rx={4} />
+          </g>
+        </>
+      )
+    }
+    case 'person': {
+      return (
+        <>
+          <rect
+            width={w}
+            height={h}
+            rx={6}
+            strokeWidth={0} />
+          <svg
+            x={w - PersonIcon.width - 6}
+            y={h - PersonIcon.height}
+            width={PersonIcon.width}
+            height={PersonIcon.height}
+            viewBox={`0 0 ${PersonIcon.width} ${PersonIcon.height}`}
+            className={fillMixStroke}
+          >
+            <path
+              strokeWidth={0}
+              d={PersonIcon.path} />
+          </svg>
+        </>
+      )
+    }
+    case 'queue': {
+      const { path, rx, ry } = queueSVGPath(w, h)
+      return (
+        <>
+          <path d={path} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} className={fillMixStroke} strokeWidth={2} />
+        </>
+      )
+    }
+    case 'storage':
+    case 'cylinder': {
+      const { path, rx, ry } = cylinderSVGPath(w, h)
+      return (
+        <>
+          <path d={path} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} className={fillMixStroke} strokeWidth={2} />
+        </>
+      )
+    }
+    case 'rectangle': {
+      return (
+        <rect
+          width={w}
+          height={h}
+          rx={6}
+          strokeWidth={0} />
+      )
+    }
+    default: {
+      return nonexhaustive(shape)
+    }
+  }
+}
+
+/**
+ * When element is selected, this component is used to render the indicator
+ */
+export function SelectedIndicator({ shape, w, h }: ElementShapeSvgProps) {
+  switch (shape) {
+    case 'queue':
+      return <path d={queueSVGPath(w, h).path} />
+    case 'storage':
+    case 'cylinder': {
+      return <path d={cylinderSVGPath(w, h).path} />
+    }
+    default: {
+      return (
+        <rect
+          x={-1}
+          y={-1}
+          width={w + 2}
+          height={h + 2}
+          rx={6} />
+      )
+    }
+  }
+}

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

@@ -0,0 +1,261 @@
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, generateIdentifier, globalKeyframes, globalStyle, style } from '@vanilla-extract/css'
+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({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  vars: {
+    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
+  }
+})
+
+const indicatorKeyframes = generateIdentifier('indicator')
+globalKeyframes(indicatorKeyframes, {
+  'from': {
+    opacity: 0.6
+  },
+  'to': {
+    opacity: 0.4
+  }
+})
+
+const outlineColor = fallbackVar(
+  mantine.colors.primaryColors.outline,
+  mantine.colors.primaryColors.filled,
+  vars.element.stroke
+)
+
+export const indicator = style({
+  stroke: vars.element.loContrast,
+  transformOrigin: 'center center',
+  strokeWidth: 6,
+  animationDuration: '800ms',
+  animationName: indicatorKeyframes,
+  animationIterationCount: 'infinite',
+  animationDirection: 'alternate',
+  visibility: 'hidden',
+  selectors: {
+    ':where(.react-flow__node.selected) &': {
+      visibility: 'visible'
+    },
+    [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+      animationName: 'none',
+      strokeWidth: 10,
+      stroke: outlineColor,
+      visibility: 'visible'
+    },
+    ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      strokeWidth: 10
+    }
+  }
+})
+
+export const fillElementFill = style({
+  fill: vars.element.fill
+})
+
+export const fillElementStroke = style({
+  fill: vars.element.stroke
+})
+
+export const fillMixStroke = style({
+  fill: stokeFillMix
+})
+
+export const title = style({
+  flex: '0 0 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  textAlign: 'center',
+  fontWeight: 500,
+  fontSize: rem(19),
+  lineHeight: 1.2,
+  textWrap: 'balance',
+  color: vars.element.hiContrast
+})
+
+export const description = style({
+  flex: '0 1 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: rem(14),
+  lineHeight: 1.125,
+  textAlign: 'center',
+  textWrap: 'pretty',
+  color: vars.element.loContrast,
+  whiteSpaceCollapse: 'preserve-breaks',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+})
+
+export const technology = style({
+  flex: '0 0 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: rem(12),
+  lineHeight: 1.125,
+  textAlign: 'center',
+  textWrap: 'balance',
+  opacity: 0.92,
+  color: vars.element.loContrast,
+  selectors: {
+    [`${container}:hover &`]: {
+      opacity: 1
+    }
+  }
+})
+
+export const cssElement = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: elPadding,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  gap: rem(8),
+  'vars': {
+    [elPadding]: rem(24)
+  },
+  selectors: {
+    [`&:has(${description}):has(${technology})`]: {
+      gap: rem(6)
+    },
+    ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
+      paddingLeft: rem(40),
+      paddingRight: rem(20)
+    },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      paddingTop: rem(34)
+    },
+    ':where([data-likec4-shape="browser"]) &': {
+      paddingTop: rem(32),
+      paddingBottom: rem(28)
+    }
+  }
+})
+
+export const iconMaxH = createVar('max-h')
+
+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',
+  overflow: 'visible',
+  mixBlendMode: 'hard-light',
+  'vars': {
+    [iconMaxH]: '30px'
+  }
+})
+
+globalStyle(`${elementIcon} img`, {
+  position: 'absolute',
+  left: 0,
+  bottom: 0,
+  width: '100%',
+  height: 'auto',
+  objectFit: 'contain',
+  maxHeight: `calc(${iconMaxH} + 16px)`
+})
+
+const filterShadow = createVar('filter-shadow')
+const filterShadowHovered = createVar('filter-shadow-hovered')
+
+export const cssShapeSvg = style({
+  top: '0px',
+  left: '0px',
+  position: 'absolute',
+  pointerEvents: 'none',
+  fill: vars.element.fill,
+  stroke: vars.element.stroke,
+  overflow: 'visible',
+  filter: fallbackVar(filterShadowHovered, filterShadow),
+  transition: 'filter 300ms ease-out',
+  transitionDelay: '0ms',
+  vars: {
+    [filterShadow]: `
+      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
+      drop-shadow(0 1px 1px color-mix(in srgb, ${vars.element.stroke} 40%, transparent))
+      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
+    `
+  },
+  selectors: {
+    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+      filter: 'none'
+    }
+  }
+})
+
+export const cssNavigateBtn = style({
+  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  position: 'absolute',
+  pointerEvents: 'all',
+  left: '50%',
+  bottom: 0,
+  color: vars.element.loContrast,
+  cursor: 'pointer',
+  transformOrigin: '50% 65%',
+  opacity: 0.75,
+  transition: 'all 150ms ease-out',
+  transform: 'translate(-50%, 0)',
+  transitionDelay: '0ms',
+  backgroundColor: 'var(--ai-bg)',
+  'vars': {
+    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--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})`
+  },
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      bottom: 3
+    },
+    [`:where(.react-flow__node:not(.dragging) ${container}:hover) &:not(:hover)`]: {
+      boxShadow: mantine.shadows.lg,
+      transform: 'translate(-50%, 0) scale(1.185)',
+      opacity: 1,
+      transitionDelay: '250ms',
+      vars: {
+        '--ai-bg': 'var(--ai-bg-hover)'
+      }
+    }
+  },
+  ':hover': {
+    boxShadow: mantine.shadows.lg,
+    transform: 'translate(-50%, 0) scale(1.35)',
+    opacity: 1,
+    transitionDelay: '0'
+  },
+  ':active': {
+    transform: 'translate(-50%, 0) scale(1.02)',
+    opacity: 1,
+    transitionDelay: '0'
+  }
+})
+globalStyle(`${cssNavigateBtn} svg.icon`, {
+  width: '65%',
+  height: '65%',
+  strokeWidth: '1.5'
+})

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

@@ -0,0 +1 @@
+export { ElementNode } from './ElementNode'

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

@@ -0,0 +1,25 @@
+import { ActionIcon } from '@mantine/core'
+import clsx from 'clsx'
+import { ZoomIn } from '../../../icons'
+import { useDiagramStoreApi } from '../../../state'
+
+export type NavigateToBtnProps = {
+  xynodeId: string
+  className?: string
+}
+
+export function NavigateToBtn({ xynodeId, className }: NavigateToBtnProps) {
+  const diagramApi = useDiagramStoreApi()
+  return (
+    <ActionIcon
+      className={clsx('nodrag nopan', className)}
+      radius="xl"
+      onClick={event => {
+        diagramApi.getState().triggerOnNavigateTo(xynodeId, event)
+        event.stopPropagation()
+      }}
+    >
+      <ZoomIn />
+    </ActionIcon>
+  )
+}

package/src/xyflow/types.ts

@@ -0,0 +1,100 @@
+import type { BBox, DiagramEdge, DiagramNode, Fqn, Point } from '@likec4/core'
+import type {
+  Edge,
+  EdgeMouseHandler,
+  InternalNode,
+  Node,
+  NodeMouseHandler,
+  OnMoveEnd,
+  OnMoveStart,
+  ReactFlowInstance,
+  ReactFlowState
+} from '@xyflow/react'
+import { isNode } from '@xyflow/react'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { isTruthy } from 'remeda'
+import type { SetReadonly, SetRequired, Simplify } from 'type-fest'
+
+export type ElementNodeData = {
+  fqn: Fqn
+  element: DiagramNode
+}
+
+type TypedXYFlowNode<D extends Record<string, unknown>, T extends string> = SetReadonly<
+  SetRequired<Node<D, T>, 'type'>,
+  'id' | 'type'
+>
+
+export type ElementXYFlowNode = TypedXYFlowNode<ElementNodeData, 'element'>
+
+export type CompoundNodeData = {
+  fqn: Fqn
+  element: DiagramNode
+}
+
+export type CompoundXYFlowNode = TypedXYFlowNode<CompoundNodeData, 'compound'>
+
+export type XYFlowNode = ElementXYFlowNode | CompoundXYFlowNode
+
+export type InternalXYFlowNode = InternalNode<XYFlowNode>
+
+export namespace XYFlowNode {
+  export type Data = ElementNodeData | CompoundNodeData
+
+  export function isCompound(node: unknown): node is CompoundXYFlowNode {
+    return isNode(node) && node.type === 'compound'
+  }
+  export function isElement(node: Node): node is ElementXYFlowNode {
+    return isNode(node) && node.type === 'element'
+  }
+
+  export const is = (node: Node): node is XYFlowNode => isCompound(node) || isElement(node)
+}
+
+export type RelationshipData = {
+  edge: DiagramEdge
+  controlPoints: Point[]
+  headPoint: Point | null
+  tailPoint: Point | null
+  type: 'bezier' | 'poly'
+  label: null | {
+    bbox: BBox
+    text: string
+  }
+}
+
+export type RelationshipEdge = Simplify<
+  SetRequired<
+    Omit<Edge<RelationshipData>, 'type'>,
+    'data'
+  > & {
+    type: 'relationship'
+  }
+>
+
+export type XYFlowEdge = RelationshipEdge
+
+export namespace XYFlowEdge {
+  export type Data = RelationshipData
+
+  export const isRelationship = (e: Edge): e is RelationshipEdge => e.type === 'relationship' && isTruthy(e.data)
+}
+
+export type XYFlowInstance = ReactFlowInstance<XYFlowNode, XYFlowEdge>
+export type XYFlowState = ReactFlowState<XYFlowNode, XYFlowEdge>
+
+export type XYFlowData = {
+  nodes: XYFlowNode[]
+  edges: XYFlowEdge[]
+}
+
+export type XYFlowEventHandlers = {
+  onPanelClick: (event: ReactMouseEvent) => void
+  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
+  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
+  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
+  onNodeClick: NodeMouseHandler<XYFlowNode>
+  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
+  onMoveStart: OnMoveStart
+  onMoveEnd: OnMoveEnd
+}

package/src/xyflow/utils.ts

@@ -0,0 +1,12 @@
+import type { XYPosition } from '@xyflow/react'
+
+export function toDomPrecision(v: number | null) {
+  if (v === null) {
+    return 0.01
+  }
+  return Math.round(v * 100) / 100
+}
+
+export function distance(a: XYPosition, b: XYPosition) {
+  return Math.sqrt(Math.pow(b.x - a.x, 2) + Math.pow(b.y - a.y, 2))
+}

package/dist/EmbeddedLikeC4Diagram.css.d.ts

@@ -1,6 +0,0 @@
-export declare const modalContent: string;
-export declare const modalBody: string;
-export declare const modalHeader: string;
-export declare const modalCloseButtonBox: string;
-export declare const modalCloseButton: string;
-//# sourceMappingURL=EmbeddedLikeC4Diagram.css.d.ts.map

package/dist/EmbeddedLikeC4Diagram.d.ts

@@ -1,18 +0,0 @@
-import { LikeC4ColorMode } from './LikeC4Diagram.props';
-import { DiagramView } from '@likec4/core';
-
-export type EmbeddedLikeC4DiagramProps = {
-    viewId: string;
-    views: Record<string, DiagramView>;
-    /**
-     * Controls color scheme used for styling the flow
-     * By default inherits from system or surrounding MantineProvider
-     *
-     * @example 'light' | 'dark'
-     */
-    colorMode?: LikeC4ColorMode | undefined;
-};
-declare function EmbeddedLikeC4DiagramCmp({ viewId, views, colorMode }: EmbeddedLikeC4DiagramProps): JSX.Element;
-export declare const EmbeddedLikeC4Diagram: typeof EmbeddedLikeC4DiagramCmp;
-export {};
-//# sourceMappingURL=EmbeddedLikeC4Diagram.d.ts.map

package/dist/bundle.d.ts

@@ -1,3 +0,0 @@
-export declare function Styles(): string;
-export declare function useInjectStyles(): void;
-//# sourceMappingURL=bundle.d.ts.map

package/dist/hooks/use-set-state.d.ts

@@ -1,2 +0,0 @@
-export declare function useSetState<T extends Record<string, any>>(initialState: T | (() => T)): readonly [T, (statePartial: Partial<T> | ((current: T) => Partial<T>)) => void];
-//# sourceMappingURL=use-set-state.d.ts.map

package/dist/hooks/use-update-effect.d.ts

@@ -1,4 +0,0 @@
-import { useEffect } from 'react';
-
-export declare function useUpdateEffect(callback: React.EffectCallback, deps: React.DependencyList, effectFn?: typeof useEffect): void;
-//# sourceMappingURL=use-update-effect.d.ts.map

package/dist/index.css.d.ts

@@ -1,2 +0,0 @@
-export declare const scope: string;
-//# sourceMappingURL=index.css.d.ts.map