@social-mail/social-mail-client 1.8.331 → 1.8.333

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.331",
+  "version": "1.8.333",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -95,6 +95,8 @@ export default class HtmlPageEditor extends AtomControl {
 
     public maxWidth = desktopWidth;
 
+    public contentEditor: HTMLIFrameElement;
+
 
     public get modifiedDocument() {
         if (!this.undoRedo.changed) {
@@ -231,7 +233,6 @@ export default class HtmlPageEditor extends AtomControl {
     private lastInit: Promise<void>;
     private initCT: CancelToken;
 
-    private contentEditor: HTMLIFrameElement;
 
 
     private readonly dropTarget: SelectedElement = new SelectedElement(this);
@@ -580,6 +581,7 @@ export default class HtmlPageEditor extends AtomControl {
     @Action({ onEvent: "undo"})
     undo() {
         this.undoRedo?.undo();
+        this.selection.updateRect();
         // if (!this.undoList.length) {
         //     return;
         // }
@@ -594,6 +596,7 @@ export default class HtmlPageEditor extends AtomControl {
     @Action({ onEvent: "redo"})
     redo() {
         this.undoRedo?.redo();
+        this.selection.updateRect();
         // if (!this.redoList.length) {
         //     return;
         // }

package/src/site-editor/editor/ui/SelectionUI.tsx

@@ -43,6 +43,9 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
     const selectedElement = selection.element;
     const selectedParent = selectedElement.parentElement;
 
+    const frameDocument = selectedElement.ownerDocument;
+    const frame = editor.contentEditor;
+
 
     const insetAttribute = `${prefix}-inset`;
     const widthAttribute = `${prefix}-width`;
@@ -52,15 +55,10 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
     const oldHeight = selectedElement.getAttribute(heightAttribute);
     const oldInset = selectedElement.getAttribute(insetAttribute);
 
-    let newInset;
-    let newHeight;
-    let newWidth;
-
     const records = [] as MutationRecord[];
 
 
     const style = selectedElement.ownerDocument.defaultView.getComputedStyle(selectedElement);
-    const { left = "0", top = "0", right = "0", bottom = "0" } = style;
     const width = selectedParent.offsetWidth;
     const height = selectedParent.offsetHeight;
 
@@ -70,39 +68,51 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
 
     const d = undoRedo.beginPause();
 
+    const left = parseFloat(style.left || "0");
+    const top = parseFloat(style.top || "0");
+    const bottom = parseFloat(style.bottom || "0");
+    const right = parseFloat(style.right || "0");
+
+    let moved = false;
+
+    let changed = false;
+
     const captureMove = (evt: PointerEvent) => {
         const dx = evt.clientX - sx;
         const dy = evt.clientY - sy;
+        if (dx === 0 && dy === 0) {
+            return;
+        }
         const ri = {
-            left: parseFloat(left),
-            top: parseFloat(top),
-            right: parseFloat(right),
-            bottom: parseFloat(bottom),
+            left,
+            top,
+            right,
+            bottom,
             sx,
             sy,
             dx,
             dy
         };
+        changed = true;
         const r = fx(ri);
-        newInset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
-        selectedElement.setAttribute(insetAttribute, newInset);
-        // if (/^img$/i.test(selectedElement.tagName)) {
-            // image needs width/height as well...
-            if (!r.move) {
-                let widthDiff = -r.left;
-                let heightDiff = -r.top;
-                if (ri.bottom === r.bottom) {
-                    heightDiff -= r.bottom;
-                }
-                if (ri.right === r.right) {
-                    widthDiff -= r.right;
-                }
-                newWidth = ps(width + widthDiff, width) + "%";
-                selectedElement.setAttribute(widthAttribute, newWidth);
-                newHeight = ps(height + heightDiff, height) + "%";
-                selectedElement.setAttribute(heightAttribute, newHeight);
+        const inset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
+        selectedElement.setAttribute(insetAttribute, inset);
+
+        if (!r.move) {
+            moved = true;
+            let widthDiff = -r.left;
+            let heightDiff = -r.top;
+            if (ri.bottom === r.bottom) {
+                heightDiff -= r.bottom;
+            }
+            if (ri.right === r.right) {
+                widthDiff -= r.right;
             }
-        // }
+            const newWidth = ps(width + widthDiff, width) + "%";
+            selectedElement.setAttribute(widthAttribute, newWidth);
+            const newHeight = ps(height + heightDiff, height) + "%";
+            selectedElement.setAttribute(heightAttribute, newHeight);
+        }
 
         setTimeout(() => {
             selection.updateRect();
@@ -112,14 +122,47 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
 
     element.addEventListener("pointermove", captureMove);
     element.setPointerCapture(e.pointerId);
-    const release = (e1) => {
+    const release = (e1: PointerEvent) => {
         element.releasePointerCapture(e.pointerId);
         element.removeEventListener("pointermove", captureMove);
         element.removeEventListener("pointerup", release);
         captureMove(e1);
-        editor.commit();
         d.resume();
 
+        if (!changed) {
+
+            // try to select an element...
+            const frameRect = frame.getBoundingClientRect();
+            let { clientX, clientY } = e1;
+            clientX -= frameRect.left;
+            clientY -= frameRect.top;
+
+            const elementAtPoint = frameDocument.elementFromPoint(clientX, clientY);
+            if (!elementAtPoint) {
+                return;
+            }
+
+            if (elementAtPoint === selectedElement) {
+                return;
+            }
+
+            const body = frameDocument.body;
+
+            let start = elementAtPoint;
+            while(start) {
+                if (start === selectedParent) {
+                    // we need to select different child
+                    editor.selection.update(elementAtPoint as any);
+                    break;
+                }
+                start = start.parentElement;
+                if (start === body) {
+                    return;
+                }
+            }
+
+            return;
+        }
         // push records...
         records.push({
             type: "attributes",
@@ -129,7 +172,7 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
             attributeNamespace: "",
         } as MutationRecord);
 
-        if (newWidth) {
+        if (moved) {
             records.push({
                 type: "attributes",
                 oldValue: oldWidth,
@@ -137,8 +180,6 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
                 attributeName: widthAttribute,
                 attributeNamespace: "",
             } as MutationRecord);
-        }
-        if (newHeight) {
             records.push({
                 type: "attributes",
                 oldValue: oldHeight,
@@ -149,6 +190,13 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
         }
 
         undoRedo.observe(records);
+        editor.commit();
+
+        setTimeout(() => {
+            selection.updateRect();
+            hover.updateRect();
+        }, 1);
+
     };
     element.addEventListener("pointerup", release);
 };
@@ -216,7 +264,8 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
 
 export function SelectionUI() {
     return <selected-element data-element="selection"
-        data-edit={BindEditor.oneWay((e) => /absolute|fixed/i.test(e.selection.currentStyle.position) ? "1" : null)}
+        data-edit={BindEditor.oneWay((e) => /relative/i.test(e.selection.parentStyle.position)
+            && /absolute|fixed/i.test(e.selection.currentStyle.position) ? "1" : null)}
         event-pointerdown={BindEditor.event(eventPointerDown as any)}
         style-left={BindEditor.oneWay((e) => e.selection.left)}
         style-top={BindEditor.oneWay((e) => e.selection.top)}