@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,103 +0,0 @@
-import { css } from '@likec4/styles/css'
-import { Tooltip } from '@mantine/core'
-import { getBezierPath } from '@xyflow/system'
-import {
-  customEdge,
-  EdgeActionButton,
-  EdgeContainer,
-  EdgeLabel,
-  EdgeLabelContainer,
-  EdgePath,
-} from '../../../base/primitives'
-import { useEnabledFeatures } from '../../../context'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { RelationshipsBrowserTypes } from '../_types'
-import { useRelationshipsBrowser } from '../hooks'
-
-export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((props) => {
-  const browser = useRelationshipsBrowser()
-  const { enableNavigateTo } = useEnabledFeatures()
-  const {
-    id,
-    data: {
-      navigateTo,
-      relations,
-      existsInCurrentView,
-    },
-  } = props
-  const [svgPath, labelX, labelY] = getBezierPath(props)
-  const diagram = useDiagram()
-
-  const markOrange = relations.length > 1 || !existsInCurrentView
-
-  const edgeProps = markOrange
-    ? {
-      ...props,
-      data: {
-        ...props.data,
-        line: 'solid',
-        color: 'amber',
-      } satisfies RelationshipsBrowserTypes.EdgeData,
-    }
-    : props
-
-  let label = (
-    <EdgeLabel
-      edgeProps={edgeProps}
-      className={css({
-        transition: 'fast',
-      })}
-    >
-      {enableNavigateTo && navigateTo && (
-        <EdgeActionButton
-          {...props}
-          onClick={e => {
-            e.stopPropagation()
-            diagram.navigateTo(navigateTo)
-          }} />
-      )}
-    </EdgeLabel>
-  )
-
-  if (!existsInCurrentView) {
-    label = (
-      <Tooltip
-        color="orange"
-        c={'black'}
-        label="This relationship is not included in the current view"
-        // withinPortal={false}
-        portalProps={{
-          target: `#${browser.rootElementId}`,
-        }}
-        openDelay={800}
-      >
-        {label}
-      </Tooltip>
-    )
-  }
-
-  return (
-    <EdgeContainer {...edgeProps}>
-      <EdgePath
-        edgeProps={edgeProps}
-        svgPath={svgPath}
-        {...markOrange && {
-          strokeWidth: 5,
-        }}
-      />
-      <EdgeLabelContainer
-        edgeProps={edgeProps}
-        labelPosition={{
-          x: labelX,
-          y: labelY,
-          translate: 'translate(-50%, 0)',
-        }}
-        style={{
-          maxWidth: Math.min(Math.abs(props.targetX - props.sourceX - 70), 250),
-        }}
-      >
-        {label}
-      </EdgeLabelContainer>
-    </EdgeContainer>
-  )
-})

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

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

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

@@ -1,146 +0,0 @@
-import { Handle } from '@xyflow/react'
-import { Position } from '@xyflow/system'
-import type { FC } from 'react'
-import type { NodeProps } from '../../../base'
-import {
-  CompoundDetailsButton,
-  CompoundNodeContainer,
-  CompoundTitle,
-  ElementDetailsButton,
-  ElementNodeContainer,
-  ElementShape,
-  ElementTags,
-  ElementTitle,
-} from '../../../base/primitives'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { RelationshipsBrowserTypes } from '../_types'
-import { ElementActions } from './ElementActions'
-import { EmptyNode as EmptyNodeRender } from './EmptyNode'
-
-type NodeTypes = {
-  element: FC<NodeProps<RelationshipsBrowserTypes.ElementNodeData>>
-  compound: FC<NodeProps<RelationshipsBrowserTypes.CompoundNodeData>>
-  empty: FC<NodeProps<RelationshipsBrowserTypes.EmptyNodeData>>
-}
-
-const ElementDetailsButtonWithHandler = (
-  props: NodeProps<RelationshipsBrowserTypes.ElementNodeData | RelationshipsBrowserTypes.CompoundNodeData>,
-) => {
-  const diagram = useDiagram()
-
-  return (
-    <ElementDetailsButton
-      {...props}
-      onClick={e => {
-        e.stopPropagation()
-        diagram.openElementDetails(props.data.fqn)
-      }}
-    />
-  )
-}
-
-export const ElementNode: NodeTypes['element'] = (props) => {
-  const { enableElementTags } = useEnabledFeatures()
-  return (
-    <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
-      <ElementShape {...props} />
-      <ElementTitle {...props} />
-      {enableElementTags && <ElementTags {...props} />}
-      <ElementDetailsButtonWithHandler {...props} />
-      <ElementActions {...props} />
-      <ElementPorts {...props} />
-    </ElementNodeContainer>
-  )
-}
-
-export const CompoundNode: NodeTypes['compound'] = (props) => {
-  const diagram = useDiagram()
-  return (
-    <CompoundNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
-      <CompoundTitle {...props} />
-      <CompoundDetailsButton
-        {...props}
-        onClick={e => {
-          e.stopPropagation()
-          diagram.openElementDetails(props.data.fqn)
-        }}
-      />
-      <CompoundPorts {...props} />
-    </CompoundNodeContainer>
-  )
-}
-
-export const EmptyNode: NodeTypes['empty'] = (props) => {
-  return <EmptyNodeRender {...props} />
-}
-
-type ElementPortsProps = NodeProps<
-  Pick<
-    RelationshipsBrowserTypes.ElementNodeData,
-    | 'ports'
-    | 'height'
-  >
->
-
-export const ElementPorts = ({ data: { ports, height: h } }: ElementPortsProps) => {
-  return (
-    <>
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="target"
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`,
-          }} />
-      ))}
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="source"
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`,
-          }} />
-      ))}
-    </>
-  )
-}
-type CompoundPortsProps = NodeProps<
-  Pick<
-    RelationshipsBrowserTypes.CompoundNodeData,
-    'ports'
-  >
->
-
-export const CompoundPorts = ({ data }: CompoundPortsProps) => (
-  <>
-    {data.ports.in.map((id, i) => (
-      <Handle
-        key={id}
-        id={id}
-        type="target"
-        position={Position.Left}
-        style={{
-          visibility: 'hidden',
-          top: `${20 * (i + 1)}px`,
-        }} />
-    ))}
-    {data.ports.out.map((id, i) => (
-      <Handle
-        key={id}
-        id={id}
-        type="source"
-        position={Position.Right}
-        style={{
-          visibility: 'hidden',
-          top: `${20 * (i + 1)}px`,
-        }} />
-    ))}
-  </>
-)

package/src/overlays/relationships-browser/custom/styles.css.ts

@@ -1,12 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const emptyNode = css({
-  width: '100%',
-  height: '100%',
-  border: `3px dashed`,
-  borderColor: `mantine.colors.defaultBorder`,
-  borderRadius: 'md',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-})

package/src/overlays/relationships-browser/hooks.ts

@@ -1,63 +0,0 @@
-import { type Fqn, nonNullable } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { useSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo } from 'react'
-import type { OverlaysActorRef } from '../overlaysActor'
-import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
-import type { LayoutRelationshipsViewResult } from './layout'
-
-export const RelationshipsBrowserActorContext = createContext<RelationshipsBrowserActorRef | null>(null)
-
-export function useRelationshipsBrowserActor() {
-  return nonNullable(useContext(RelationshipsBrowserActorContext), 'No RelationshipsBrowserActorContext')
-}
-
-export function useRelationshipsBrowserState<T>(
-  selector: (state: RelationshipsBrowserSnapshot) => T,
-  compare: (a: T, b: T) => boolean = shallowEqual,
-) {
-  const actor = useRelationshipsBrowserActor()
-  return useSelector(actor, useCallbackRef(selector), compare)
-}
-
-export function useRelationshipsBrowser() {
-  const actor = useRelationshipsBrowserActor()
-  return useMemo(() => ({
-    actor,
-    get rootElementId(): string {
-      return `relationships-browser-${actor.sessionId.replaceAll(':', '_')}`
-    },
-    getState: () => actor.getSnapshot().context,
-    send: actor.send,
-    updateView: (layouted: LayoutRelationshipsViewResult) => {
-      actor.send({
-        type: 'update.view',
-        layouted,
-      })
-    },
-    changeScope: (scope: 'global' | 'view') => {
-      actor.send({
-        type: 'change.scope',
-        scope,
-      })
-    },
-    navigateTo: (subject: Fqn, fromNode?: string) => {
-      actor.send({
-        type: 'navigate.to',
-        subject,
-        fromNode,
-      })
-    },
-    fitDiagram: () => {
-      actor.send({ type: 'fitDiagram' })
-    },
-    close: () => {
-      if (actor._parent) {
-        ;(actor._parent as OverlaysActorRef)?.send({ type: 'close', actorId: actor.id })
-      } else {
-        actor.send({ type: 'close' })
-      }
-    },
-  }), [actor])
-}