@builderx/bridge - npm Package Compare versions

Comparing version 0.1.13 to 0.1.14

dist/initBridge.js

@@ -130,3 +130,2 @@ "use strict";
         function getLayerAtXY(args) {
-            var _a;
             const { x, y, inLayers } = args;
@@ -156,5 +155,2 @@ const elementAtPoint = document.elementFromPoint(x, y);
                 const rect = element.getBoundingClientRect();
-                let parentFiberNode = null;
-                if (fiberNode)
-                    parentFiberNode = fiberNode.return;
                 const result = {
@@ -167,34 +163,3 @@ x: rect.left,
                 };
-                if (parentFiberNode) {
-                    const parentElement = getDomNodeFromFiber(parentFiberNode);
-                    if (parentElement) {
-                        const parentRect = parentElement.getBoundingClientRect();
-                        const parentStyle = window.getComputedStyle(parentElement);
-                        const flexDirection = parentStyle.flexDirection;
-                        const containerData = {
-                            x: parentRect.left,
-                            y: parentRect.top,
-                            width: parentRect.width,
-                            height: parentRect.height,
-                            flexDirection: flexDirection,
-                            children: [],
-                        };
-                        let childFiberNode = parentFiberNode.child;
-                        while (childFiberNode) {
-                            const childElement = getDomNodeFromFiber(childFiberNode);
-                            if (childElement) {
-                                const childRect = childElement.getBoundingClientRect();
-                                containerData.children.push({
-                                    path: ((_a = childFiberNode.memoizedProps) === null || _a === void 0 ? void 0 : _a['data-bx-path']) || '',
-                                    width: childRect.width,
-                                    height: childRect.height,
-                                    x: childRect.left - parentRect.left,
-                                    y: childRect.top - parentRect.top,
-                                });
-                            }
-                            childFiberNode = childFiberNode.sibling;
-                        }
-                        result.container = containerData;
-                    }
-                }
+                result.container = getContainerData(fiberNode);
                 return result;
@@ -222,3 +187,16 @@ }
                 const rect = element.getBoundingClientRect();
-                return {
+                const style = window.getComputedStyle(element);
+                const transform = style.transform;
+                const rotate = style.rotate;
+                // Extract rotation from either transform matrix or rotate property
+                let rotation = 0;
+                if (rotate && rotate !== 'none') {
+                    // Parse rotate value (e.g., "45deg" -> 45)
+                    rotation = parseFloat(rotate);
+                }
+                else if (transform && transform !== 'none') {
+                    const values = transform.split('(')[1].split(')')[0].split(',');
+                    rotation = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180 / Math.PI));
+                }
+                const result = {
                     x: rect.left,
@@ -229,3 +207,7 @@ y: rect.top,
                     path: layerId,
+                    rotation: rotation,
                 };
+                let fiberNode = getFiberFromDOMNode(element);
+                result.container = getContainerData(fiberNode);
+                return result;
             }
@@ -552,2 +534,53 @@ return null;
         }
+        function getContainerData(fiberNode) {
+            var _a;
+            let parentFiberNode = null;
+            if (fiberNode)
+                parentFiberNode = fiberNode.return;
+            if (!parentFiberNode)
+                return null;
+            const parentElement = getDomNodeFromFiber(parentFiberNode);
+            if (!parentElement)
+                return null;
+            const parentRect = parentElement.getBoundingClientRect();
+            const parentStyle = window.getComputedStyle(parentElement);
+            const flexDirection = parentStyle.flexDirection;
+            const containerPadding = {
+                top: parseFloat(parentStyle.paddingTop),
+                right: parseFloat(parentStyle.paddingRight),
+                bottom: parseFloat(parentStyle.paddingBottom),
+                left: parseFloat(parentStyle.paddingLeft)
+            };
+            const containerData = {
+                x: parentRect.left,
+                y: parentRect.top,
+                width: parentRect.width,
+                height: parentRect.height,
+                flexDirection: flexDirection,
+                padding: containerPadding,
+                contentBox: {
+                    x: parentRect.left + containerPadding.left,
+                    y: parentRect.top + containerPadding.top,
+                    width: parentRect.width - (containerPadding.left + containerPadding.right),
+                    height: parentRect.height - (containerPadding.top + containerPadding.bottom)
+                },
+                children: [],
+            };
+            let childFiberNode = parentFiberNode.child;
+            while (childFiberNode) {
+                const childElement = getDomNodeFromFiber(childFiberNode);
+                if (childElement) {
+                    const childRect = childElement.getBoundingClientRect();
+                    containerData.children.push({
+                        path: ((_a = childFiberNode.memoizedProps) === null || _a === void 0 ? void 0 : _a['data-bx-path']) || '',
+                        width: childRect.width,
+                        height: childRect.height,
+                        x: childRect.left - parentRect.left,
+                        y: childRect.top - parentRect.top,
+                    });
+                }
+                childFiberNode = childFiberNode.sibling;
+            }
+            return containerData;
+        }
         if (typeof window !== 'undefined') {
@@ -554,0 +587,0 @@ window.addEventListener('message', handleMessage);

package.json

 {
   "name": "@builderx/bridge",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "types": "dist/index.d.ts",

src/initBridge.ts

@@ -196,5 +196,4 @@ declare global {
 
-        let parentFiberNode = null;
-        if (fiberNode) parentFiberNode = fiberNode.return;
 
+
         const result: any = {
@@ -208,37 +207,4 @@ x: rect.left,
 
-        if (parentFiberNode) {
-          const parentElement = getDomNodeFromFiber(parentFiberNode);
-          if (parentElement) {
-            const parentRect = parentElement.getBoundingClientRect();
-            const parentStyle = window.getComputedStyle(parentElement);
-            const flexDirection = parentStyle.flexDirection;
+        result.container = getContainerData(fiberNode);
 
-            const containerData: any = {
-              x: parentRect.left,
-              y: parentRect.top,
-              width: parentRect.width,
-              height: parentRect.height,
-              flexDirection: flexDirection,
-              children: [],
-            };
-
-            let childFiberNode = parentFiberNode.child;
-            while (childFiberNode) {
-              const childElement = getDomNodeFromFiber(childFiberNode);
-              if (childElement) {
-                const childRect = childElement.getBoundingClientRect();
-                containerData.children.push({
-                  path: childFiberNode.memoizedProps?.['data-bx-path'] || '',
-                  width: childRect.width,
-                  height: childRect.height,
-                  x: childRect.left - parentRect.left,
-                  y: childRect.top - parentRect.top,
-                });
-              }
-              childFiberNode = childFiberNode.sibling;
-            }
-
-            result.container = containerData;
-          }
-        }
         return result;
@@ -263,2 +229,6 @@ }
     }
+
+
+
+
     // Update this function
@@ -271,4 +241,17 @@ function getLayerById(args: { layerId: string }): any {
         const rect = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+        const transform = style.transform;
+        const rotate = style.rotate;
+        
+        // Extract rotation from either transform matrix or rotate property
+        let rotation = 0;
+        if (rotate && rotate !== 'none') {
+          // Parse rotate value (e.g., "45deg" -> 45)
+          rotation = parseFloat(rotate);
+        } else if (transform && transform !== 'none') {
+          const values = transform.split('(')[1].split(')')[0].split(',');
+          rotation = Math.round(Math.atan2(Number(values[1]), Number(values[0])) * (180/Math.PI));
+        }
 
-        return {
+        const result: any = {
           x: rect.left,
@@ -279,3 +262,10 @@ y: rect.top,
           path: layerId,
+          rotation: rotation,
         };
+
+        let fiberNode = getFiberFromDOMNode(element);
+        result.container = getContainerData(fiberNode);
+        
+        return result;
+
       }
@@ -707,2 +697,56 @@
 
+    function getContainerData(fiberNode: any): any {
+
+      let parentFiberNode = null;
+      if (fiberNode) parentFiberNode = fiberNode.return;
+
+      if (!parentFiberNode) return null;
+      const parentElement = getDomNodeFromFiber(parentFiberNode);
+      if (!parentElement) return null;
+
+      const parentRect = parentElement.getBoundingClientRect();
+      const parentStyle = window.getComputedStyle(parentElement);
+      const flexDirection = parentStyle.flexDirection;
+      const containerPadding = {
+        top: parseFloat(parentStyle.paddingTop),
+        right: parseFloat(parentStyle.paddingRight),
+        bottom: parseFloat(parentStyle.paddingBottom),
+        left: parseFloat(parentStyle.paddingLeft)
+      };
+
+      const containerData: any = {
+        x: parentRect.left,
+        y: parentRect.top,
+        width: parentRect.width,
+        height: parentRect.height,
+        flexDirection: flexDirection,
+        padding: containerPadding,
+        contentBox: {
+          x: parentRect.left + containerPadding.left,
+          y: parentRect.top + containerPadding.top,
+          width: parentRect.width - (containerPadding.left + containerPadding.right),
+          height: parentRect.height - (containerPadding.top + containerPadding.bottom)
+        },
+        children: [],
+      };
+
+      let childFiberNode = parentFiberNode.child;
+      while (childFiberNode) {
+        const childElement = getDomNodeFromFiber(childFiberNode);
+        if (childElement) {
+          const childRect = childElement.getBoundingClientRect();
+          containerData.children.push({
+            path: childFiberNode.memoizedProps?.['data-bx-path'] || '',
+            width: childRect.width,
+            height: childRect.height,
+            x: childRect.left - parentRect.left,
+            y: childRect.top - parentRect.top,
+          });
+        }
+        childFiberNode = childFiberNode.sibling;
+      }
+
+      return containerData;
+    }
+
     if (typeof window !== 'undefined') {
@@ -814,2 +858,3 @@ window.addEventListener('message', handleMessage);
 
+
     for (const [property, value] of Object.entries(newStyleObject)) {
@@ -823,2 +868,3 @@ originalStyles[property] = DOM.style.getPropertyValue(property);
     const domUpdateActions = getDOMUpdateActions();
+
     domUpdateActions.push(updateAction);
@@ -825,0 +871,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

86963

increased by5.11%

Lines of code

1630

increased by4.02%

No dependency changes