@likec4/diagram 1.26.2 → 1.27.1

package/src/base/example/custom.tsx

@@ -1,58 +0,0 @@
-import { getBezierPath } from '@xyflow/system'
-import {
-  CompoundNodeContainer,
-  CompoundTitle,
-  customEdge,
-  customNode,
-  DefaultHandles,
-  EdgeContainer,
-  EdgePath,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTitle,
-} from '../primitives'
-import type { ExampleTypes } from './_types'
-
-export const nodeTypes = {
-  element: customNode<ExampleTypes.ElementNodeData>((props) => {
-    return (
-      <ElementNodeContainer nodeProps={props}>
-        <ElementShape {...props} />
-        <ElementTitle {...props} />
-        <DefaultHandles />
-      </ElementNodeContainer>
-    )
-  }),
-
-  compound: customNode<ExampleTypes.CompoundNodeData>((props) => {
-    return (
-      <CompoundNodeContainer nodeProps={props}>
-        <CompoundTitle {...props} />
-        <DefaultHandles />
-      </CompoundNodeContainer>
-    )
-  }),
-} satisfies { [key in ExampleTypes.Node['type']]: any }
-
-export const edgeTypes = {
-  relationships: customEdge<ExampleTypes.EdgeData>((props) => {
-    const [svgPath, labelX, labelY] = getBezierPath(props)
-    return (
-      <EdgeContainer {...props}>
-        <EdgePath {...props} svgPath={svgPath} />
-        {
-          /* <EdgeLabel {...props}>
-          {enableNavigateTo && navigateTo && (
-            <EdgeActionButton
-              {...props}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.navigateTo(navigateTo)
-              }} />
-          )}
-        </EdgeLabel> */
-        }
-      </EdgeContainer>
-    )
-  }),
-} satisfies { [key in ExampleTypes.Edge['type']]: any }

package/src/base/example/useViewToNodesEdges.ts

@@ -1,194 +0,0 @@
-import {
-  type DiagramView,
-  type Fqn,
-  DiagramNode,
-  ElementKind,
-  nonNullable,
-  Queue,
-} from '@likec4/core'
-import { useDeepCompareMemo } from '@react-hookz/web'
-import { hasAtLeast } from 'remeda'
-import { ZIndexes } from '../../base/const'
-import type { ExampleTypes } from './_types'
-
-// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
-function viewToNodesEdge(
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges'>,
-): {
-  xynodes: ExampleTypes.Node[]
-  xyedges: ExampleTypes.Edge[]
-} {
-  const xynodes = [] as ExampleTypes.Node[],
-    xyedges = [] as ExampleTypes.Edge[],
-    nodeLookup = new Map<Fqn, DiagramNode>()
-
-  type TraverseItem = {
-    node: DiagramNode
-    parent: DiagramNode | null
-  }
-  const queue = Queue.from(view.nodes.reduce(
-    (acc, node) => {
-      nodeLookup.set(node.id, node)
-      if (!node.parent) {
-        acc.push({ node, parent: null })
-      }
-      return acc
-    },
-    [] as TraverseItem[],
-  ))
-
-  // const visiblePredicate = opts.where ? whereOperatorAsPredicate(opts.where) : () => true
-
-  // namespace to force unique ids
-  const ns = ''
-  const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
-
-  let next: TraverseItem | undefined
-  while ((next = queue.dequeue())) {
-    const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
-    if (isCompound) {
-      for (const child of node.children) {
-        queue.enqueue({ node: nodeById(child), parent: node })
-      }
-    }
-
-    const position = {
-      x: node.position[0],
-      y: node.position[1],
-    }
-    if (parent) {
-      position.x -= parent.position[0]
-      position.y -= parent.position[1]
-    }
-
-    const id = ns + node.id
-
-    const base = {
-      id,
-      draggable: false,
-      selectable: true,
-      focusable: true,
-      deletable: false,
-      position,
-      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
-      style: {
-        width: node.width,
-        height: node.height,
-      },
-      initialWidth: node.width,
-      initialHeight: node.height,
-      ...(parent && {
-        parentId: ns + parent.id,
-      }),
-    } satisfies Omit<ExampleTypes.Node, 'data' | 'type'>
-
-    const fqn = DiagramNode.modelRef(node)
-    // const deploymentRef = DiagramNode.deploymentRef(node)
-    if (!fqn) {
-      console.error('Invalid node', node)
-      throw new Error('Element should have either modelRef or deploymentRef')
-    }
-
-    const navigateTo = { navigateTo: node.navigateTo ?? null }
-
-    switch (true) {
-      case isCompound: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'compound',
-            data: {
-              title: node.title,
-              color: node.color,
-              shape: node.shape,
-              style: node.style,
-              depth: node.depth ?? 0,
-              icon: node.icon ?? 'none',
-              fqn,
-              ...navigateTo,
-            },
-          },
-        )
-        break
-      }
-      default: {
-        xynodes.push(
-          {
-            ...base,
-            type: 'element' as const,
-            data: {
-              fqn,
-              title: node.title,
-              technology: node.technology,
-              description: node.description,
-              height: node.height,
-              width: node.width,
-              color: node.color,
-              shape: node.shape,
-              style: node.style,
-              icon: node.icon ?? null,
-              ...navigateTo,
-            },
-          },
-        )
-      }
-    }
-  }
-  for (const edge of view.edges) {
-    const source = edge.source
-    const target = edge.target
-    const id = ns + edge.id
-
-    if (!hasAtLeast(edge.points, 2)) {
-      console.error('edge should have at least 2 points', edge)
-      continue
-    }
-
-    xyedges.push({
-      id,
-      type: 'relationships',
-      source: ns + source,
-      target: ns + target,
-      zIndex: ZIndexes.Edge,
-      // selectable: selectable,
-      // hidden: !visiblePredicate(edge),
-      deletable: false,
-      data: {
-        color: edge.color ?? 'gray',
-        // label: edge.label,
-        // technology: edge.technology,
-        // navigateTo: edge.navigateTo,
-        // labelBBox: edge.labelBBox ?? null,
-        // points: edge.points,
-        // color: edge.color ?? 'gray',
-        // line: edge.line ?? 'dashed',
-        // dir: edge.dir ?? 'forward',
-        // head: edge.head ?? 'normal',
-        // tail: edge.tail ?? 'none',
-      },
-      interactionWidth: 20,
-    })
-  }
-
-  return {
-    xynodes,
-    xyedges,
-  }
-}
-
-export function useViewToNodesEdges(
-  {
-    id,
-    nodes,
-    edges,
-  }: Pick<DiagramView, 'id' | 'nodes' | 'edges'>,
-) {
-  return useDeepCompareMemo(() => {
-    return viewToNodesEdge({
-      id,
-      nodes,
-      edges,
-    })
-  }, [id, nodes, edges])
-}

package/src/base/primitives/compound/CompoundActionButton.css.ts

@@ -1,52 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { vars } from '../../../theme-vars'
-
-export const container = style({
-  position: 'absolute',
-  top: 4,
-  // transform: 'translateY(-100%)',
-  left: 2,
-  // minHeight: 28,
-  // display: 'flex',
-  // justifyContent: 'center',
-  // alignItems: 'center',
-})
-
-export const actionIcon = style({
-  opacity: 0.45,
-  color: `var(--_compound-title-color,${vars.element.loContrast})`,
-  // transition: transitions.fast,
-  'vars': {
-    '--ai-color-hover': vars.element.hiContrast,
-    '--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})`,
-  },
-  // background: `var(--ai-bg)`,
-  boxShadow: '1px 1px 3px 0px transparent',
-  selectors: {
-    [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
-      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%)`,
-      },
-    },
-    [`:where([data-hovered='true']) &`]: {
-      opacity: 1,
-      // transitionDelay: '100ms',
-      // transitionDuration: '300ms',
-      // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
-      // color: `var(--ai-color-hover)`,
-      // vars: {
-      //   '--ai-bg': `var(--ai-bg-hover)`,
-      // },
-    },
-    [`${reactFlowReducedGraphics} &`]: {
-      boxShadow: 'none',
-    },
-  },
-})

package/src/base/primitives/compound/CompoundDetailsButton.css.ts

@@ -1,58 +0,0 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { vars } from '../../../theme-vars'
-
-export const container = style({
-  position: 'absolute',
-  top: 2,
-  right: 2,
-})
-
-const btnColor = createVar('navigateBtnColor')
-globalStyle(`${container}`, {
-  vars: {
-    [btnColor]: vars.element.loContrast,
-  },
-})
-globalStyle(`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) ${container}`, {
-  vars: {
-    [btnColor]: vars.element.stroke,
-  },
-})
-
-export const actionIcon = style({
-  opacity: 0.4,
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  color: `var(--_compound-title-color,${btnColor})`,
-  'vars': {
-    '--ai-color-hover': vars.element.hiContrast,
-    '--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})`,
-  },
-  boxShadow: '1px 1px 3px 0px transparent',
-  ':hover': {
-    opacity: 1,
-    boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
-  },
-  selectors: {
-    [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
-      opacity: 0.6,
-      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%)`,
-      },
-    },
-    [`${reactFlowReducedGraphics} &`]: {
-      boxShadow: 'none',
-    },
-  },
-})
-
-export const actionIconWrapper = style({
-  width: 'min-content',
-  height: 'min-content',
-})

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -1,65 +0,0 @@
-import { rem } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-import { hiddenIfZoomTooSmall } from '../../../LikeC4Diagram.css'
-import { vars, whereNotReducedGraphics } from '../../../theme-vars'
-
-export const compoundTitle = style([hiddenIfZoomTooSmall, {
-  position: 'absolute',
-  display: 'flex',
-  alignItems: 'center',
-  gap: 6,
-  left: 14,
-  top: 6,
-  right: 30,
-  width: 'auto',
-  minHeight: 30,
-  selectors: {
-    [`:where(.react-flow__node.draggable) &`]: {
-      cursor: 'grab',
-    },
-    [`.likec4-compound-node:has(.compound-action) &`]: {
-      paddingLeft: 30,
-    },
-  },
-}])
-
-export const title = style({
-  flex: 1,
-  fontFamily: vars.compound.font,
-  fontWeight: 600,
-  fontSize: rem(15),
-  textTransform: 'uppercase',
-  letterSpacing: '0.2px',
-  color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  selectors: {
-    [`${whereNotReducedGraphics} &`]: {
-      mixBlendMode: 'screen',
-    },
-  },
-})
-
-const iconSize = '20px'
-export const icon = style({
-  flex: `0 0 ${iconSize}`,
-  height: `${iconSize}`,
-  width: `${iconSize}`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  mixBlendMode: 'hard-light',
-})
-
-globalStyle(`${icon} svg, ${icon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-  filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
-    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
-  `,
-})
-globalStyle(`${icon} img`, {
-  objectFit: 'contain',
-})

package/src/base/primitives/element/ElementActionButtons.css.ts

@@ -1,52 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { transitions, vars } from '../../../theme-vars'
-
-export const container = style({
-  position: 'absolute',
-  top: `calc(100% - 28px)`,
-  // transform: 'translateY(-100%)',
-  left: 0,
-  width: '100%',
-  minHeight: 28,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  // zIndex: 10,
-})
-
-export const actionButtons = style({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-})
-
-export const actionIcon = style({
-  color: vars.element.loContrast,
-  opacity: 0.75,
-  transition: transitions.fast,
-  'vars': {
-    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-    '--ai-bg-container-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 50%)`,
-    '--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})`,
-  },
-  background: `var(--ai-bg)`,
-  boxShadow: '1px 1px 3px 0px transparent',
-  selectors: {
-    [`:where([data-hovered='true']) &`]: {
-      opacity: 1,
-      boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.2)',
-      vars: {
-        '--ai-bg': `var(--ai-bg-hover)`,
-      },
-    },
-    [`${reactFlowReducedGraphics} &`]: {
-      boxShadow: 'none',
-    },
-  },
-})
-// globalStyle(`${actionIcon} > *`, {
-//   pointerEvents: 'none',
-// })

package/src/base/primitives/element/ElementDetailsButton.css.ts

@@ -1,50 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { reactFlowReducedGraphics } from '../../../LikeC4Diagram.css'
-import { vars } from '../../../theme-vars'
-
-export const container = 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 actionIconWrapper = style({
-  width: 'min-content',
-  height: 'min-content',
-  // display: 'flex',
-  // justifyContent: 'center',
-  // alignItems: 'center',
-})
-
-export const actionIcon = style({
-  pointerEvents: 'all',
-  color: vars.element.loContrast,
-  cursor: 'pointer',
-  'vars': {
-    '--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})`,
-  },
-  boxShadow: '1px 1px 3px 0px transparent',
-  ':hover': {
-    boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
-  },
-  selectors: {
-    [`${reactFlowReducedGraphics} &`]: {
-      boxShadow: 'none',
-    },
-  },
-})

package/src/base/primitives/element/vars.css.ts

@@ -1,5 +0,0 @@
-import { createGlobalVar, createVar } from '@vanilla-extract/css'
-
-export const textSize = createVar('text-size')
-export const paddingSize = createVar('padding-size')
-export const iconSize = createGlobalVar('likec4-icon-size')

package/src/components/Link.css.ts

@@ -1,49 +0,0 @@
-import { style } from '@vanilla-extract/css'
-import { mantine } from '../theme-vars'
-import { easings, transitions, whereDark } from '../theme-vars'
-
-export const elementLink = style({
-  display: 'flex',
-  overflow: 'hidden',
-  alignItems: 'center',
-  gap: 3,
-  justifyContent: 'stretch',
-  transition: transitions.fast,
-  border: `1px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.sm,
-  minHeight: 30,
-  padding: '3px 16px 3px 3px',
-  cursor: 'pointer',
-  color: mantine.colors.gray[7],
-  ':hover': {
-    // transitionTimingFunction: easings.out,
-    borderStyle: 'solid',
-    color: mantine.colors.defaultColor,
-    background: mantine.colors.defaultHover,
-  },
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[1],
-    },
-    [`&[data-size='sm']`]: {
-      minHeight: 22,
-      padding: '2px 8px 2px 2px',
-    },
-  },
-})
-
-export const linkIcon = style({
-  flex: 0,
-})
-
-export const linkTitleBox = style({
-  flex: '1 1 100%',
-  transition: `transform 100ms ${easings.inOut}`,
-  selectors: {
-    [`${elementLink}:hover &`]: {
-      transitionTimingFunction: easings.out,
-      transitionDelay: '50ms',
-      transform: 'translateX(1px)',
-    },
-  },
-})

package/src/overlays/relationship-details/custom/index.tsx

@@ -1,2 +0,0 @@
-export { edgeTypes } from './edgeTypes'
-export { nodeTypes } from './nodeTypes'

package/src/overlays/relationships-browser/custom/index.tsx

@@ -1,2 +0,0 @@
-export { edgeTypes } from './edgeTypes'
-export { nodeTypes } from './nodeTypes'

package/src/theme-vars.css.ts

@@ -1,69 +0,0 @@
-import { createGlobalThemeContract } from '@vanilla-extract/css'
-
-export const vars = createGlobalThemeContract({
-  safariAnimationHook: 'safari-animation-hook',
-  default: {
-    font: 'default-font-family',
-  },
-  likec4: {
-    font: 'font-family',
-    background: {
-      color: 'background-color',
-      pattern: {
-        color: 'background-pattern-color',
-      },
-    },
-  },
-  compound: {
-    font: 'compound-font-family',
-    titleColor: 'compound-title-color',
-  },
-  element: {
-    font: 'element-font-family',
-    fill: 'element-fill',
-    stroke: 'element-stroke',
-    hiContrast: 'element-hiContrast',
-    loContrast: 'element-loContrast',
-  },
-  relation: {
-    lineColor: 'relation-lineColor',
-    labelColor: 'relation-labelColor',
-    labelBgColor: 'relation-labelBg',
-  },
-  optionsPanel: {
-    top: 'options-webview-top',
-    right: 'options-webview-right',
-  },
-  navigationPanel: {
-    top: 'navigation-webview-top',
-    left: 'navigation-webview-left',
-  },
-}, (value) => `likec4-${value}`)
-
-export const xyvars = createGlobalThemeContract({
-  background: {
-    color: 'background-color',
-    pattern: {
-      color: 'background-pattern-color',
-      // dots: 'background-pattern-dots-color',
-      // lines: 'background-pattern-lines-color',
-      // cross: 'background-pattern-cross-color'
-    },
-  },
-  edge: {
-    stroke: 'edge-stroke',
-    strokeSelected: 'edge-stroke-selected',
-    labelColor: 'edge-label-color',
-    labelBgColor: 'edge-label-background-color',
-    strokeWidth: 'edge-stroke-width',
-  },
-  node: {
-    color: 'node-color',
-    border: 'node-border',
-    backgroundColor: 'node-background-color',
-    groupBackgroundColor: 'node-group-background-color',
-    boxshadowHover: 'node-boxshadow-hover',
-    boxshadowSelected: 'node-boxshadow-selected',
-    borderRadius: 'node-border-radius',
-  },
-}, (value) => `xy-${value}`)

package/src/theme-vars.ts

@@ -1,25 +0,0 @@
-import { themeToVars } from '@mantine/vanilla-extract'
-
-export {
-  vars,
-  xyvars,
-} from './theme-vars.css'
-
-export const rootClassName = 'likec4-diagram-root'
-export const whereNotReducedGraphics = `:where(.${rootClassName}:not([data-likec4-reduced-graphics]))`
-export const whereReducedGraphics = `:where(.${rootClassName}:is([data-likec4-reduced-graphics="true"]))`
-export const whereSmallZoom = `:where([data-likec4-zoom-small="true"])`
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`,
-}
-
-export const mantine = themeToVars({})