alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(node-toolbar): align prop

Browse Source
This commit is contained in:
moklick
2023-05-15 10:56:21 +02:00
parent 921512eec4
commit 8386c7af6c
2 changed files with 52 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/node-toolbar/src/NodeToolbar.tsx
+28 -44
View File
@@ -35,61 +35,45 @@ const storeSelector = (state: ReactFlowState) => ({
});
function getTransform(nodeRect: Rect, transform: Transform, position: Position, offset: number, align: Align): string {
let alignmentOffset = 0.5;
if (align === 'start') {
alignmentOffset = 0;
} else if (align === 'end') {
alignmentOffset = 1;
}
// position === Position.Top
let xPos = (nodeRect.x + nodeRect.width / 2) * transform[2] + transform[0];
let yPos = nodeRect.y * transform[2] + transform[1] - offset;
let xShift = -50;
let yShift = -100;
// we set the x any y position of the toolbar based on the nodes position
let pos = [
(nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
nodeRect.y * transform[2] + transform[1] - offset,
];
// and than shift it based on the alignment. The shift values are in %.
let shift = [-100 * alignmentOffset, -100];
switch (position) {
case Position.Right:
xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset;
yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
xShift = 0;
yShift = -50;
pos = [
(nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
(nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
];
shift = [0, -100 * alignmentOffset];
break;
case Position.Bottom:
yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
yShift = 0;
pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
shift[1] = 0;
break;
case Position.Left:
xPos = nodeRect.x * transform[2] + transform[0] - offset;
yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
xShift = -100;
yShift = -50;
pos = [
nodeRect.x * transform[2] + transform[0] - offset,
(nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
];
shift = [-100, -100 * alignmentOffset];
break;
}
switch (position) {
case Position.Right:
case Position.Left:
switch (align) {
case 'start':
yPos = nodeRect.y * transform[2] + transform[1];
yShift = 0;
break;
case 'end':
yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1];
yShift = -100;
break;
}
break;
case Position.Top:
case Position.Bottom:
switch (align) {
case 'start':
xPos = nodeRect.x * transform[2] + transform[0];
xShift = 0;
break;
case 'end':
xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0];
xShift = -100;
break;
}
break
}
return `translate(${xPos}px, ${yPos}px) translate(${xShift}%, ${yShift}%)`;
return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
}
function NodeToolbar({