refactor(node-toolbar): align prop

examples/vite-app/src/examples/NodeToolbar/index.tsx

@@ -17,49 +17,38 @@ const nodeTypes: NodeTypes = {
   custom: CustomNode,
 };
 
+const positions = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'center', 'end'];
+
 const initialNodes: Node[] = [
-  {
-    id: '1',
-    type: 'custom',
-    data: { label: 'toolbar top', toolbarPosition: Position.Top },
-    position: { x: 0, y: 50 },
-    className: 'react-flow__node-default',
-  },
-  {
-    id: '2',
-    type: 'custom',
-    data: { label: 'toolbar right', toolbarPosition: Position.Right },
-    position: { x: 300, y: 0 },
-    className: 'react-flow__node-default',
-  },
-  {
-    id: '3',
-    type: 'custom',
-    data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom, toolbarAlign: 'end' },
-    position: { x: 400, y: 100 },
-    className: 'react-flow__node-default',
-  },
   {
     id: '4',
     type: 'custom',
-    data: { label: 'toolbar left', toolbarPosition: Position.Left },
+    data: { label: 'toolbar top', toolbarPosition: Position.Top },
-    position: { x: 400, y: 200 },
+    position: { x: 0, y: -200 },
-    className: 'react-flow__node-default',
-  },
-  {
-    id: '5',
-    type: 'custom',
-    data: { label: 'toolbar always open', toolbarPosition: Position.Top, toolbarVisible: true },
-    position: { x: 0, y: 200 },
     className: 'react-flow__node-default',
   },
 ];
 
-const initialEdges: Edge[] = [
+positions.forEach((position, posIndex) => {
-  { id: 'e1-2', source: '1', target: '2' },
+  alignments.forEach((align, alignIndex) => {
-  { id: 'e1-3', source: '1', target: '3' },
+    const id = `node-${align}-${position}`;
-  { id: 'e1-4', source: '1', target: '4' },
+    initialNodes.push({
-];
+      id,
+      type: 'custom',
+      data: {
+        label: `toolbar ${position} ${align}`,
+        toolbarPosition: position as Position,
+        toolbarAlign: align,
+        toolbarVisible: true,
+      },
+      className: 'react-flow__node-default',
+      position: { x: posIndex * 300, y: alignIndex * 100 },
+    });
+  });
+});
+
+const initialEdges: Edge[] = [];
 
 const defaultEdgeOptions = { zIndex: 0 };
 const nodeOrigin: NodeOrigin = [0.5, 0.5];

packages/node-toolbar/src/NodeToolbar.tsx

@@ -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];
+  // we set the x any y position of the toolbar based on the nodes position
-  let yPos = nodeRect.y * transform[2] + transform[1] - offset;
+  let pos = [
-  let xShift = -50;
+    (nodeRect.x + nodeRect.width * alignmentOffset) * transform[2] + transform[0],
-  let yShift = -100;
+    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;
+      pos = [
-      yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+        (nodeRect.x + nodeRect.width) * transform[2] + transform[0] + offset,
-      xShift = 0;
+        (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
-      yShift = -50;
+      ];
+      shift = [0, -100 * alignmentOffset];
       break;
     case Position.Bottom:
-      yPos = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
+      pos[1] = (nodeRect.y + nodeRect.height) * transform[2] + transform[1] + offset;
-      yShift = 0;
+      shift[1] = 0;
       break;
     case Position.Left:
-      xPos = nodeRect.x * transform[2] + transform[0] - offset;
+      pos = [
-      yPos = (nodeRect.y + nodeRect.height / 2) * transform[2] + transform[1];
+        nodeRect.x * transform[2] + transform[0] - offset,
-      xShift = -100;
+        (nodeRect.y + nodeRect.height * alignmentOffset) * transform[2] + transform[1],
-      yShift = -50;
+      ];
+      shift = [-100, -100 * alignmentOffset];
       break;
   }
 
-  switch (position) {
+  return `translate(${pos[0]}px, ${pos[1]}px) translate(${shift[0]}%, ${shift[1]}%)`;
-    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}%)`;
 }
 
 function NodeToolbar({