fix placment and offset of boxquads

Author: jogibear9988

packages/web-component-designer/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A WYSIWYG designer webcomponent for html components",
   "name": "@node-projects/web-component-designer",
-  "version": "0.1.311",
+  "version": "0.1.312",
   "type": "module",
   "main": "./dist/index.js",
   "author": "[email protected]",

packages/web-component-designer/src/elements/helper/LayoutHelper.ts

@@ -87,9 +87,9 @@ export function placeDesignItem(container: IDesignItem, designItem: IDesignItem,
       designItem.setStyle('left', roundValue(designItem, offset.x + (oldLeft ?? 0) + containerLeft) + "px");
     if (oldTop || oldBottom == null)
       designItem.setStyle('top', roundValue(designItem, offset.y + (oldTop ?? 0) + containerTop) + "px");
-    if (oldRight)
+    if (oldRight != null)
       designItem.setStyle('right', roundValue(designItem, (oldRight ?? 0) - offset.x + containerRight) + "px");
-    if (oldBottom)
+    if (oldBottom != null)
       designItem.setStyle('bottom', roundValue(designItem, (oldBottom ?? 0) - offset.y + containerBottom) + "px");
   }
 }

packages/web-component-designer/src/elements/helper/getBoxQuads.js

@@ -292,7 +292,12 @@ export function getElementSize(node, matrix) {
 */
 function getElementOffsetsInContainer(node, includeScroll, iframes) {
     if ((node instanceof HTMLElement || node instanceof (node.ownerDocument.defaultView ?? window).HTMLElement)) {
-        return new DOMPoint(node.offsetLeft - (includeScroll ? node.scrollLeft : 0), node.offsetTop - (includeScroll ? node.scrollTop : 0));
+        if (includeScroll) {
+            const cs = (node.ownerDocument.defaultView ?? window).getComputedStyle(node);
+            return new DOMPoint(node.offsetLeft - (includeScroll ? node.scrollLeft - parseFloat(cs.borderLeftWidth) : 0), node.offsetTop - (includeScroll ? node.scrollTop - parseFloat(cs.borderTopWidth) : 0));
+        } else {
+            return new DOMPoint(node.offsetLeft, node.offsetTop);
+        }
     } else if ((node instanceof Text || node instanceof (node.ownerDocument.defaultView ?? window).Text)) {
         const range = document.createRange();
         range.selectNodeContents(node);