diff --git a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx index ca2ac0b7..7d179b7e 100644 --- a/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/CustomNode.tsx @@ -4,7 +4,7 @@ import { Handle, Position, NodeProps, NodeToolbar } from 'reactflow'; const CustomNode: FC = ({ id, data }) => { return ( <> - + diff --git a/examples/vite-app/src/examples/NodeToolbar/index.tsx b/examples/vite-app/src/examples/NodeToolbar/index.tsx index 601d8618..70d8e36e 100644 --- a/examples/vite-app/src/examples/NodeToolbar/index.tsx +++ b/examples/vite-app/src/examples/NodeToolbar/index.tsx @@ -35,7 +35,7 @@ const initialNodes: Node[] = [ { id: '3', type: 'custom', - data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom }, + data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom, toolbarAlign: 'end' }, position: { x: 400, y: 100 }, className: 'react-flow__node-default', }, diff --git a/packages/node-toolbar/src/NodeToolbar.tsx b/packages/node-toolbar/src/NodeToolbar.tsx index d6394acf..86ea993c 100644 --- a/packages/node-toolbar/src/NodeToolbar.tsx +++ b/packages/node-toolbar/src/NodeToolbar.tsx @@ -40,16 +40,6 @@ function getTransform(nodeRect: Rect, transform: Transform, position: Position, let yPos = nodeRect.y * transform[2] + transform[1] - offset; let xShift = -50; let yShift = -100; - switch (align) { - case Align.Start: - xPos = nodeRect.x * transform[2] + transform[0]; - xShift = 0; - break; - case Align.End: - xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0]; - xShift = -100; - break; - } switch (position) { case Position.Right: @@ -57,50 +47,47 @@ function getTransform(nodeRect: Rect, transform: Transform, position: Position, yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1]; xShift = 0; yShift = -50; - - switch (align) { - case Align.Start: - yPos = nodeRect.y * transform[2] + transform[1]; - yShift = 0; - break; - case Align.End: - yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1]; - yShift = -100; - break; - } break; case Position.Bottom: yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset; yShift = 0; - switch (align) { - case Align.Start: - xPos = nodeRect.x * transform[2] + transform[0]; - xShift = 0; - break; - case Align.End: - xPos = (nodeRect.x + nodeRect.width) * transform[2] + transform[0]; - xShift = -100; - break; - } 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; + break; + } + switch (position) { + case Position.Right: + case Position.Left: switch (align) { - case Align.Start: + case 'start': yPos = nodeRect.y * transform[2] + transform[1]; yShift = 0; break; - case Align.End: + 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}%)`; } @@ -113,7 +100,7 @@ function NodeToolbar({ isVisible, position = Position.Top, offset = 10, - align = Align.Center, + align = 'center', ...rest }: NodeToolbarProps) { const contextNodeId = useNodeId(); diff --git a/packages/node-toolbar/src/types.ts b/packages/node-toolbar/src/types.ts index 33f82762..7ff2087b 100644 --- a/packages/node-toolbar/src/types.ts +++ b/packages/node-toolbar/src/types.ts @@ -9,8 +9,4 @@ export type NodeToolbarProps = HTMLAttributes & { align?: Align; }; -export enum Align { - Center = 'center', - Start = 'start', - End = 'end', -} +export type Align = 'center' | 'start' | 'end';