33 lines
3.9 KiB
TypeScript
33 lines
3.9 KiB
TypeScript
/**
|
|
* 提供旧卡片兼容布局与原生测量布局的连线锚点。
|
|
* 两种协议不能混猜：compat-v1 依卡片边框/ports 排布，record-v1 应使用 renderer 实测 Handle。
|
|
*/
|
|
import type {CanvasGeometryNode} from './compat-types.ts';
|
|
import type {ProjectionNode} from './projection.ts';
|
|
import {nodeConnector,type Connector,type ConnectorSide} from '../canvas-geometry.ts';
|
|
/** 兼容几何节点加投影 data，保留 measured 尺寸和旧卡片端口声明。 */
|
|
type CompatNode=CanvasGeometryNode&{data:ProjectionNode['data']};
|
|
/** Same card-border and port layout used by CanvasEdge. Never infer it for record-v1 DOM. */
|
|
/** 方向优先取降级外壳提示，再取标准 handle 名、port 方向或调用方 fallback。
|
|
* 找到具名 port 时，同 direction 的 port 沿高度均匀分布，与兼容 CanvasEdge 使用同一布局。
|
|
* 即使 fallback hint 选择了另一侧，已识别 port 仍按高度做 y 偏移；这是旧布局协议，不适用于原生 Handle。
|
|
* nodeConnector 先负责节点边界/旋转，下面直接叠加 y 偏移，不再把这段偏移当局部向量旋转。 */
|
|
export function compatConnector(node:CompatNode,handle:string|null|undefined,fallback:ConnectorSide):Connector{
|
|
const port=Array.isArray(node.data.ports)?node.data.ports.find(port=>port&&`port:${port.id}`===handle):undefined,hints=(node.data as ProjectionNode['data']&{__headlessFallback?:{handles?:{id:string;side:ConnectorSide}[]}}).__headlessFallback?.handles,projected=Array.isArray(hints)?hints.find(hint=>hint?.id===handle&&['top','right','bottom','left'].includes(hint.side))?.side:undefined,side=projected??(['top','right','bottom','left'].includes(handle??'')?handle as ConnectorSide:port?.direction==='input'?'left':port?'right':fallback),result=nodeConnector(node,side);
|
|
// 输入/输出各自独立排序，用测量高度优先；默认400仅属于旧卡片布局约定。
|
|
if(port){const peers=node.data.ports!.filter(item=>item.direction===port.direction);result.point.y+=((peers.indexOf(port)+1)/(peers.length+1)-.5)*(node.measured?.height||node.height||400);}return result;
|
|
}
|
|
/** renderer 测量端口：绝对位置与 source/target handle 边界，避免在这里依赖整个 UI store。 */
|
|
export type MeasuredNode={readonly internals:{readonly positionAbsolute:{x:number;y:number};readonly handleBounds?:{readonly source?:readonly MeasuredHandle[]|null;readonly target?:readonly MeasuredHandle[]|null}}};
|
|
/** 单个 Handle 在节点中的相对矩形及所在边。 */
|
|
type MeasuredHandle={readonly id?:string|null;readonly position:ConnectorSide;readonly x:number;readonly y:number;readonly width:number;readonly height:number};
|
|
/** Native Handle outer edge, matching the installed React Flow loose connection mode. */
|
|
/** 从实际 Handle 外侧中心生成锚点与朝外法线。target 可采用 source 把手以匹配 loose 模式，
|
|
* source 仅查 source 列表；target 按 target 再 source 顺序查，匹配 loose 模式。
|
|
* 非空 handleId 精确查找，空字符串/null/undefined 取首项；无匹配或未测量返回 undefined。
|
|
* 假定 positionAbsolute 与 Handle 尺寸采用同一场景单位；直接叠加，不在这里验证有限值或再次处理节点旋转。 */
|
|
export function measuredConnector(node:MeasuredNode|undefined,handleId:string|null|undefined,end:'source'|'target'):Connector|undefined{
|
|
const bounds=node?.internals.handleBounds;if(!node||!bounds)return;const handles=end==='source'?bounds.source??[]:[...(bounds.target??[]),...(bounds.source??[])],handle=handleId?handles.find(handle=>handle.id===handleId):handles[0];if(!handle)return;
|
|
const {x,y}=node.internals.positionAbsolute,side=handle.position,normals={top:{x:0,y:-1},right:{x:1,y:0},bottom:{x:0,y:1},left:{x:-1,y:0}},point={x:x+handle.x+(side==='left'?0:side==='right'?handle.width:handle.width/2),y:y+handle.y+(side==='top'?0:side==='bottom'?handle.height:handle.height/2)};return{point,normal:normals[side]};
|
|
}
|