feat(padding): fix bug with auto layout parents and replace render bo…

…unding with bounding box

package.json

@@ -13,16 +13,16 @@
   "license": "ISC",
   "devDependencies": {
     "@figma/plugin-typings": "^1.49.0",
-    "@types/node": "^18.0.1",
-    "@types/react-dom": "^18.0.5",
+    "@types/node": "^18.6.2",
+    "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
-    "@typescript-eslint/eslint-plugin": "^5.30.4",
-    "@typescript-eslint/parser": "^5.30.4",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
     "create-file-webpack": "^1.0.2",
     "css-loader": "^6.7.1",
     "esbuild-loader": "^2.19.0",
-    "eslint": "^8.19.0",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.30.1",
@@ -32,7 +32,7 @@
     "terser-webpack-plugin": "^5.3.3",
     "typescript": "^4.7.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0"
   },
   "figmaPlugin": {
@@ -55,9 +55,9 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "mobx": "^6.6.1",
-    "mobx-react": "^7.5.1",
+    "mobx-react": "^7.5.2",
     "mobx-sync": "^3.0.0",
-    "preact": "^10.8.2",
+    "preact": "^10.10.0",
     "react-popper": "^2.3.0",
     "react-router-dom": "^6.3.0"
   },

src/main/helper.ts

@@ -65,7 +65,7 @@ export const getRenderBoundsOfRectangle = (node) => {
   const dummyRect = figma.createRectangle();
   dummyRect.relativeTransform = node.absoluteTransform;
   dummyRect.resize(node.width, node.height);
-  nodeBounds = dummyRect.absoluteRenderBounds;
+  nodeBounds = dummyRect.absoluteBoundingBox;
   dummyRect.remove();
 
   return nodeBounds;

src/main/padding.ts

@@ -7,6 +7,7 @@ import {
   appendElementsToGroup,
   getClosestAttachedGroup,
   getColor,
+  getNearestParentNode,
   getRenderBoundsOfRectangle,
 } from './helper';
 import { createLabel, createStandardCap } from './line';
@@ -179,8 +180,8 @@ EventEmitter.on('add padding', ({ direction, settings }) => {
 });
 
 const contains = (node1, node2) => {
-  let node1Bounds = node1.absoluteRenderBounds;
-  let node2Bounds = node2.absoluteRenderBounds;
+  let node1Bounds = node1.absoluteBoundingBox;
+  let node2Bounds = node2.absoluteBoundingBox;
 
   if (node1.type === 'TEXT' || node1.type === 'SHAPE_WITH_TEXT') {
     node1Bounds = getRenderBoundsOfRectangle(node1);
@@ -217,7 +218,8 @@ export const getNodeAndParentNode = (
 
   if (figma.currentPage.selection.length === 1 && !parentNode) {
     if (currentNode.parent && currentNode.parent.type !== 'PAGE') {
-      parentNode = currentNode.parent as SceneNode;
+      parentNode = getNearestParentNode(currentNode);
+      console.log(parentNode);
     } else {
       return { error: ParentNodeErrors.PARENT_NOT_FOUND };
     }
@@ -314,8 +316,8 @@ export const createPaddingLine = ({
   const { node, parentNode } = nodeData;
 
   if (
-    !(node as any).absoluteRenderBounds ||
-    !(parentNode as any).absoluteRenderBounds
+    !(node as any).absoluteBoundingBox ||
+    !(parentNode as any).absoluteBoundingBox
   ) {
     figma.notify('Element is no supported');
     return;
@@ -330,8 +332,8 @@ export const createPaddingLine = ({
 
   let distance = 0;
 
-  let nodeBounds = (node as any).absoluteRenderBounds;
-  let parentNodeBounds = (parentNode as any).absoluteRenderBounds;
+  let nodeBounds = (node as any).absoluteBoundingBox;
+  let parentNodeBounds = (parentNode as any).absoluteBoundingBox;
 
   if (node.type === 'TEXT' || node.type === 'SHAPE_WITH_TEXT') {
     nodeBounds = getRenderBoundsOfRectangle(node);

src/main/spacing.ts

@@ -67,24 +67,24 @@ export const distanceBetweenTwoPoints = (x1, y1, x2, y2) =>
   Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
 
 const getShapeValues = (shape) => {
-  let absoluteRenderBounds =
+  let absoluteBoundingBox =
     shape?.rotation === 0
       ? {
           x: shape.absoluteTransform[0][2],
           y: shape.absoluteTransform[1][2],
           height: shape.height,
           width: shape.width,
         }
-      : shape.absoluteRenderBounds;
+      : shape.absoluteBoundingBox;
   if (shape.type === 'TEXT' || shape.type === 'SHAPE_WITH_TEXT') {
-    absoluteRenderBounds = getRenderBoundsOfRectangle(shape);
+    absoluteBoundingBox = getRenderBoundsOfRectangle(shape);
   }
 
-  const x = absoluteRenderBounds.x;
-  const y = absoluteRenderBounds.y;
+  const x = absoluteBoundingBox.x;
+  const y = absoluteBoundingBox.y;
 
-  const w = absoluteRenderBounds.width;
-  const h = absoluteRenderBounds.height;
+  const w = absoluteBoundingBox.width;
+  const h = absoluteBoundingBox.height;
 
   const cx = x + w / 2;
   const cy = y + h / 2;
@@ -112,8 +112,8 @@ export const drawSpacing = async (
   }
 
   if (
-    !(rects[0] as any).absoluteRenderBounds ||
-    !(rects[1] as any).absoluteRenderBounds
+    !(rects[0] as any).absoluteBoundingBox ||
+    !(rects[1] as any).absoluteBoundingBox
   ) {
     figma.notify('Element is no supported');
     return;

src/main/tooltip/index.ts

@@ -155,7 +155,7 @@ export const setTooltip = async (
 
     tooltipFrame.resize(contentFrame.width, contentFrame.height);
     // ----
-    const nodeBounds = (node as any).absoluteRenderBounds;
+    const nodeBounds = (node as any).absoluteBoundingBox;
     tooltipFrame.x = nodeBounds.x;
     tooltipFrame.y = nodeBounds.y;