feat(example): Add custom edge example

update(example): fit view on custom node example
* node selection to use hooks
* dev script to use vue-tsc
This commit is contained in:
Braks
2021-08-08 19:28:45 +02:00
parent 6b9c608381
commit 2188c5d3d3
8 changed files with 209 additions and 34 deletions
+44
View File
@@ -0,0 +1,44 @@
import { FunctionalComponent } from 'vue';
import { EdgeProps, EdgeText, getBezierPath, getEdgeCenter, getMarkerEnd } from '../../src';
const CustomEdge: FunctionalComponent<EdgeProps> = ({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
arrowHeadType,
markerEndId
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
const [centerX, centerY] = getEdgeCenter({
sourceX,
sourceY,
targetX,
targetY
});
return () => (
<>
<path id={id} class="react-flow__edge-path" d={edgePath} marker-end={markerEnd} />
<EdgeText
x={centerX}
y={centerY}
label={data.text}
labelStyle={{ fill: 'white' }}
labelShowBg
labelBgStyle={{ fill: 'red' }}
labelBgPadding={[2, 4]}
labelBgBorderRadius={2}
onClick={() => console.log(data)}
/>
;
</>
);
};
export default CustomEdge;