@likec4/diagram 1.19.1 → 1.20.0

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

@@ -0,0 +1,45 @@
+import { IconZoomScan } from '@tabler/icons-react'
+import { ElementActionButtons } from '../../../base/primitives'
+import type { NodeProps } from '../../../base/types'
+import { useEnabledFeature } from '../../../context/DiagramFeatures'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { RelationshipDetailsTypes as Types } from '../_types'
+import { useRelationshipDetails } from '../hooks'
+// import { useRelationshipsBrowser } from '../hooks'
+
+type ElementActionsProps = NodeProps<Types.ElementNodeData>
+export const ElementActions = (props: ElementActionsProps) => {
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const diagram = useDiagram()
+  const browser = useRelationshipDetails()
+
+  const buttons = [] as ElementActionButtons.Item[]
+
+  const { navigateTo, fqn } = props.data
+  if (navigateTo && enableNavigateTo) {
+    buttons.push({
+      key: 'navigate',
+      icon: <IconZoomScan />,
+      onClick: (e) => {
+        e.stopPropagation()
+        diagram.navigateTo(navigateTo)
+      },
+    })
+  }
+  // if (fqn !== browser.getState().subject) {
+  //   buttons.push({
+  //     key: 'relationships',
+  //     icon: <IconTransform />,
+  //     onClick: (e) => {
+  //       e.stopPropagation()
+  //       browser.navigateTo(fqn)
+  //     },
+  //   })
+  // }
+  return (
+    <ElementActionButtons
+      buttons={buttons}
+      {...props}
+    />
+  )
+}

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

@@ -0,0 +1,49 @@
+import { getBezierPath } from '@xyflow/system'
+import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
+import { useEnabledFeature } from '../../../context'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { RelationshipDetailsTypes } from '../_types'
+
+export const edgeTypes = {
+  relationship: customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
+    const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+    const {
+      sourceX,
+      targetY,
+      data: { navigateTo },
+    } = props
+    const [svgPath, labelX, labelY] = getBezierPath(props)
+    const diagram = useDiagram()
+    return (
+      <EdgeContainer {...props}>
+        <EdgePath {...props} svgPath={svgPath} />
+        <EdgeLabel
+          edgeProps={props}
+          labelPosition={{
+            x: labelX,
+            y: labelY,
+            translate: 'translate(-50%, 0)',
+          }}
+          style={{
+            maxWidth: Math.abs(props.targetX - props.sourceX - 70),
+          }}>
+          {enableNavigateTo && navigateTo && (
+            <EdgeActionButton
+              {...props}
+              onClick={e => {
+                e.stopPropagation()
+                diagram.navigateTo(navigateTo)
+              }} />
+          )}
+        </EdgeLabel>
+        {
+          /* <EdgeLabel {...props}>
+
+        </EdgeLabel> */
+        }
+      </EdgeContainer>
+    )
+  }),
+} satisfies {
+  [key in RelationshipDetailsTypes.Edge['type']]: any
+}

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

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

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

@@ -0,0 +1,108 @@
+import {
+  CompoundNodeContainer,
+  CompoundTitle,
+  customNode,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTitle,
+} from '../../../base/primitives'
+import { ElementActions } from './ElementActions'
+
+import { Handle } from '@xyflow/react'
+import { Position } from '@xyflow/system'
+import type { NodeProps } from '../../../base'
+import type { RelationshipDetailsTypes } from '../_types'
+
+export const nodeTypes = {
+  element: customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
+    return (
+      <ElementNodeContainer nodeProps={props}>
+        <ElementShape {...props} />
+        <ElementTitle {...props} iconSize={40} />
+        <ElementActions {...props} />
+        <ElementPorts {...props} />
+      </ElementNodeContainer>
+    )
+  }),
+
+  compound: customNode<RelationshipDetailsTypes.CompoundNodeData>((props) => {
+    return (
+      <CompoundNodeContainer nodeProps={props}>
+        <CompoundTitle {...props} />
+        <CompoundPorts {...props} />
+      </CompoundNodeContainer>
+    )
+  }),
+} satisfies {
+  [key in RelationshipDetailsTypes.Node['type']]: any
+}
+
+type ElementPortsProps = NodeProps<
+  Pick<
+    RelationshipDetailsTypes.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<
+    RelationshipDetailsTypes.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/relationship-details/custom/styles.css.ts

@@ -0,0 +1,13 @@
+import { rem } from '@mantine/core'
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+
+export const emptyNode = style({
+  width: '100%',
+  height: '100%',
+  border: `3px dashed ${mantine.colors.defaultBorder}`,
+  borderRadius: mantine.radius.md,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+})

package/src/overlays/relationship-details/hooks.ts

@@ -0,0 +1,48 @@
+import { type EdgeId, nonNullable } from '@likec4/core'
+import { useCallbackRef } from '@mantine/hooks'
+import { useSelector } from '@xstate/react'
+import { shallowEqual } from 'fast-equals'
+import { createContext, useContext, useMemo, useTransition } from 'react'
+import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
+
+export const RelationshipDetailsActorContext = createContext<RelationshipDetailsActorRef | null>(null)
+
+export function useRelationshipsBrowserActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), 'No RelationshipsBrowserActorContext')
+}
+
+export function useRelationshipsBrowserState<T>(
+  selector: (state: RelationshipDetailsSnapshot) => T,
+  compare: (a: T, b: T) => boolean = shallowEqual,
+) {
+  const select = useCallbackRef(selector)
+  const actor = useRelationshipsBrowserActor()
+  return useSelector(actor, select, compare)
+}
+
+export function useRelationshipDetails() {
+  const actor = useRelationshipsBrowserActor()
+  const [, startTransition] = useTransition()
+  return useMemo(() => ({
+    getState: () => actor.getSnapshot().context,
+    send: actor.send,
+    navigateTo: (edgeId: EdgeId) => {
+      startTransition(() => {
+        actor.send({
+          type: 'navigate.to',
+          edgeId,
+        })
+      })
+    },
+    fitDiagram: () => {
+      startTransition(() => {
+        actor.send({ type: 'fitDiagram' })
+      })
+    },
+    close: () => {
+      startTransition(() => {
+        actor.send({ type: 'close' })
+      })
+    },
+  }), [actor])
+}