22 lines
1.7 KiB
TypeScript
22 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { BaseEdge, Handle, Position, getBezierPath, type EdgeProps, type NodeProps } from "@xyflow/react";
|
|
import type { ProjectionNode } from "@/lib/canvas-bindings/projection";
|
|
import type { CanvasEdgeModel } from "@/lib/canvas-v2";
|
|
import styles from "./canvas.module.css";
|
|
const positions={top:Position.Top,right:Position.Right,bottom:Position.Bottom,left:Position.Left};
|
|
|
|
/** Render only the known envelope and derived endpoints, never interpret opaque payload fields. */
|
|
export function UnsupportedNode({data,selected}:NodeProps<ProjectionNode>){
|
|
const fallback=data.__headlessFallback;
|
|
return <div className={`${styles.node} ${selected?styles.selectedNode:""}`} style={{width:"100%",height:"100%",padding:14,transform:`rotate(${data.rotation||0}deg)`}} role="note" aria-label="暂不支持编辑的元素">
|
|
<span>{data.title}</span><small style={{display:"block"}}>此元素需要兼容的组件版本才能编辑</small>
|
|
<small title={fallback?`${fallback.componentId} · v${fallback.dataVersion}`:undefined}>{fallback?.reason==='renderer-unavailable'?'当前视图暂无此类型的编辑器':'原始内容已保留'}</small>
|
|
{fallback?.handles.map(handle=><Handle key={handle.id} id={handle.id} type="source" position={positions[handle.side]} className={styles.centerHandle} isConnectable={false} isConnectableStart={false} isConnectableEnd={false} aria-hidden />)}
|
|
</div>;
|
|
}
|
|
export function UnsupportedEdge(props:EdgeProps<CanvasEdgeModel>){
|
|
const [path]=getBezierPath(props);
|
|
return <g role="img" aria-label="暂不支持编辑的连线"><title>原始连线内容已保留</title><BaseEdge id={props.id} path={path} style={{stroke:'#aa968b',strokeWidth:1.5}} /></g>;
|
|
}
|