@social-mail/social-mail-client 1.8.434 → 1.8.435

package/package.json

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

package/src/site-editor/editor/EditingSymbols.ts

@@ -0,0 +1 @@
+export const isDragged = Symbol.for("isDragged");

package/src/site-editor/editor/HtmlPageEditor.global.css

@@ -71,32 +71,6 @@
             }
         }
 
-        & > svg {
-            pointer-events: none;
-            & * {
-                pointer-events: none;
-            }
-        }
-
-        & > [data-element=hover] {
-            position: absolute;
-            outline: solid 1px green;
-            outline-color: #00940094;
-            pointer-events: none;
-            z-index: 20;
-            margin: 20px;
-            & > label {
-                position: absolute;
-                transform: translate(0, -100%);
-                background-color: #00940094;
-                color: white;
-                font-size: smaller;
-                text-transform: capitalize;
-                padding: 2px;
-                padding-left: 5px;
-                padding-right: 5px;
-            }
-        }
         & > [data-element=drop-target] {
             position: absolute;
             background-color: #ff5e0097;

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

@@ -61,6 +61,7 @@ import InlinePopupButton from "@web-atoms/web-controls/dist/basic/InlinePopupBut
 import { IAppFile } from "../../model/model";
 import { SelectionUI } from "./ui/SelectionUI";
 import { desktopScreenWidth, mobileScreenWidth, tabletScreenWidth } from "./sizes";
+import UIGuides from "./guides/UIGuides";
 
 const desktopWidth = desktopScreenWidth;
 const tabletWidth = tabletScreenWidth;
@@ -325,13 +326,7 @@ export default class HtmlPageEditor extends AtomControl {
                     style-height={Bind.oneWay(() => this.dropTarget.height)}>
                 </div>
                 <SelectionUI/>
-                <div data-element="hover"
-                    style-left={Bind.oneWay(() => this.hover.left)}
-                    style-top={Bind.oneWay(() => this.hover.top)}
-                    style-width={Bind.oneWay(() => this.hover.width)}
-                    style-height={Bind.oneWay(() => this.hover.height)}>
-                    <label text={Bind.oneWay(() => this.hover.name)}/>
-                </div>
+                <UIGuides/>
                 <div
                     data-element="content-frame">
                     <iframe

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

@@ -1,5 +1,6 @@
 import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import type HtmlPageEditor from "./HtmlPageEditor";
+import { isDragged } from "./EditingSymbols";
 
 interface IDocumentChange {
     undo: (() => any)[];
@@ -56,6 +57,9 @@ export default class UndoRedo {
         const { documentObserver } = this;
         if (this.silent && documentObserver?.length) {
             for (const x of records) {
+                if (x.target[isDragged]) {
+                    continue;
+                }
                 for (const d of documentObserver) {
                     d(x);
                 }

package/src/site-editor/editor/guides/UIGuides.global.css

@@ -0,0 +1,42 @@
+ui-guides {
+    display: block;
+    position: absolute;
+    outline: solid 1px green;
+    outline-color: #00940094;
+    pointer-events: none;
+    margin: 20px;
+    z-index: 400;
+    contain: paint;
+
+    & > label {
+        position: absolute;
+        right: 0;
+        top: 0;
+        background-color: #00940094;
+        color: white;
+        font-size: smaller;
+        text-transform: capitalize;
+        padding: 2px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }    
+
+    & > h-guide {
+        display: block;
+        position: absolute;
+        border: solid 1px lightgreen;
+        left: 0;
+        right: 0;
+        top: -50px;
+        height: 1px;
+    }
+    & > v-guide {
+        display: block;
+        position: absolute;
+        border: solid 1px lightgreen;
+        left: -50px;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+    }
+}

package/src/site-editor/editor/guides/UIGuides.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable @typescript-eslint/no-namespace */
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { BindEditor } from "../../properties/controls/PropertyEditor";
+
+import "./UIGuides.global.css";
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ui-guides": any;
+            "h-guide": any;
+            "v-guide": any;
+        }
+    }
+}
+
+export default function UIGuides() {
+    return <ui-guides
+        style-left={BindEditor.oneWay((e) => e.hover.left)}
+        style-top={BindEditor.oneWay((e) => e.hover.top)}
+        style-width={BindEditor.oneWay((e) => e.hover.width)}
+        style-height={BindEditor.oneWay((e) => e.hover.height)}
+        >
+        <label text={BindEditor.oneWay((e) => e.hover.name)}/>
+        <h-guide/>
+        <v-guide/>
+    </ui-guides>;
+}

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

@@ -8,6 +8,8 @@ import "./SelectionUI.global.css";
 import type HtmlPageEditor from "../HtmlPageEditor";
 import { mobileScreenWidth, tabletScreenWidth } from "../sizes";
 import SnapGuides from "./SnapGuides";
+import { isDragged } from "../EditingSymbols";
+
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -23,6 +25,10 @@ interface IRect {
     bottom;
     dx;
     dy;
+    mx;
+    my;
+    width,
+    height,
     // sx;
     // sy;
     move?: boolean;
@@ -30,9 +36,9 @@ interface IRect {
 
 const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
-const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
+const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLElement) => {
 
-    const snaps = new SnapGuides(editor, element);
+    const snaps = new SnapGuides(direction, editor, element);
 
     const prefix = editor.maxWidth === tabletScreenWidth
         ? "styler-tablet"
@@ -55,14 +61,14 @@ const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
     const oldHeight = selectedElement.getAttribute(heightAttribute);
     const oldInset = selectedElement.getAttribute(insetAttribute);
 
-    const style = selectedElement.ownerDocument.defaultView.getComputedStyle(selectedElement);
+    // const style = selectedElement.ownerDocument.defaultView.getComputedStyle(selectedElement);
     const width = selectedParent.offsetWidth;
     const height = selectedParent.offsetHeight;
 
-    const left = parseFloat(style.left || "0");
-    const top = parseFloat(style.top || "0");
-    const bottom = parseFloat(style.bottom || "0");
-    const right = parseFloat(style.right || "0");
+    // const left = parseFloat(style.left || "0");
+    // const top = parseFloat(style.top || "0");
+    // const bottom = parseFloat(style.bottom || "0");
+    // const right = parseFloat(style.right || "0");
 
     const { undoRedo } = editor;
 
@@ -72,57 +78,89 @@ const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
     let changed = false;
     let timer = void 0;
 
+
+    let inset;
+    let newWidth;
+    let newHeight;
+
+    element[isDragged] = true;
+
+    editor.hover.update(selectedElement.parentElement);
+
+    let updateTimer = void 0;
+
     const move = ({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) => {
 
         changed = true;
 
-        let ri = {
+        const left = selectedElement.offsetLeft;
+        const top = selectedElement.offsetTop;
+        const elementWidth = selectedElement.offsetWidth;
+        const elementHeight = selectedElement.offsetHeight;
+
+        const mx = left + (elementWidth / 2);
+        const my = top + (elementHeight / 2);
+
+        const ri = {
             left,
             top,
-            right,
-            bottom,
+            right: width - (left + elementWidth),
+            bottom: height - (top + elementHeight),
+            width: elementWidth,
+            height: elementHeight,
+            mx,
+            my,
+            move: false,
             dx,
             dy
         };
-        const r = fx(ri);
-
-        // ri = snaps.snap(ri);
+        let r = fx(ri);
+        r = snaps.snap(r);
 
-        const inset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
-        selectedElement.setAttribute(insetAttribute, inset);
+        inset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
+        selectedElement.style.inset =  inset;
 
         if (!r.move) {
             resized = 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);
+            newWidth = ps(elementWidth + dx, width) + "%";
+            selectedElement.style.width = newWidth;
+            // // selectedElement.setAttribute(widthAttribute, newWidth);
+            newHeight = ps(elementHeight + dy, height) + "%";
+            selectedElement.style.height = newHeight;
+            // selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
-        // clearTimeout(this.timer);
-        setTimeout(() => {
-            selection.updateRect();
-            hover.updateRect();
-        }, 1);
+
+        if(!updateTimer) {
+            updateTimer = setTimeout(() => {
+                updateTimer = void 0;
+                selection.updateRect();
+            }, 10);
+        }
     };
 
     const resume = () => {
         snaps.dispose();
         d.resume();
+        element[isDragged] = void 0;
     };
 
     const commit = () => {
 
-        d.resume();
 
+        selectedElement.style.removeProperty("inset");
+        selectedElement.style.removeProperty("width");
+        selectedElement.style.removeProperty("height");
+
+        selectedElement.setAttribute(insetAttribute, inset);
+        if (newWidth) {
+            selectedElement.setAttribute(widthAttribute, newWidth);
+        }
+        if (newHeight) {
+            selectedElement.setAttribute(heightAttribute, newHeight);
+        }
+
+        d.resume();
         const records = [] as MutationRecord[];
 
         // push records...
@@ -173,13 +211,13 @@ const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
     };
 };
 
-const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
+const setCapture = (direction: string, editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
 
 
-    const sc = beginDrag(editor, element);
+    const sc = beginDrag(direction, editor, element);
 
-    const sx = e.clientX;
-    const sy = e.clientY;
+    let sx = e.clientX;
+    let sy = e.clientY;
 
     const captureMove = (evt: PointerEvent) => {
         const dx = evt.clientX - sx;
@@ -187,6 +225,8 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
         if (dx === 0 && dy === 0) {
             return;
         }
+        sx = evt.clientX;
+        sy = evt.clientY;
         sc.move({ dx, dy, fx});
     };
 
@@ -257,28 +297,28 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
         // enable resizing...
         switch(resize) {
             case "lt":
-                setCapture(editor, element, e, (r) => {
+                setCapture(resize, editor, element, e, (r) => {
                     r.left += r.dx;
                     r.top += r.dy;
                     return r;
                 });
                 return;
             case "rt":
-                setCapture(editor, element, e, (r) => {
+                setCapture(resize, editor, element, e, (r) => {
                     r.top += r.dy;
                     r.right -= r.dx;
                     return r;
                 });
                 return;
             case "lb":
-                setCapture(editor, element, e, (r) => {
+                setCapture(resize, editor, element, e, (r) => {
                     r.left += r.dx;
                     r.bottom -= r.dy;
                     return r;
                 });
                 return;
             case "rb":
-                setCapture(editor, element, e, (r) => {
+                setCapture(resize, editor, element, e, (r) => {
                     r.bottom -= r.dy;
                     r.right -= r.dx;
                     return r;
@@ -294,7 +334,7 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
 
     // update snaps...
 
-    setCapture(editor, element, e, (r) => {
+    setCapture("move", editor, element, e, (r) => {
         r.top += r.dy;
         r.left += r.dx;
         r.bottom -= r.dy;
@@ -361,7 +401,7 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
         return r;
     };
 
-    sc = beginDrag(editor, element);
+    sc = beginDrag("none", editor, element);
     currentElement[keyboardEditingSymbol] = sc;
 
     sc.move({ dx, dy, fx });
@@ -413,7 +453,7 @@ export function SelectionUI() {
         style-top={BindEditor.oneWay((e) => e.selection.top)}
         style-width={BindEditor.oneWay((e) => e.selection.width)}
         style-height={BindEditor.oneWay((e) => e.selection.height)}>
-        <label text={BindEditor.oneWay((e) => e.selection.name)}/>
+            <label text={BindEditor.oneWay((e) => e.selection.name)}/>
             <i data-resize="lt"/>
             <i data-resize="rt"/>
             <i data-resize="lb"/>

package/src/site-editor/editor/ui/SnapGuides.ts

@@ -1,7 +1,6 @@
-import { ChildEnumerator } from "@web-atoms/core/dist/web/core/AtomUI";
 import HtmlPageEditor from "../HtmlPageEditor";
 
-const hasSVG = Symbol("svg");
+const uiGuides = Symbol("ui-guides");
 
 interface IRect {
     left;
@@ -10,60 +9,214 @@ interface IRect {
     bottom;
     dx;
     dy;
+    mx;
+    my;
+    width,
+    height,
     // sx;
     // sy;
     move?: boolean;
 }
 export default class SnapGuides {
 
-    svg: SVGElement;
+    hGuide: HTMLDivElement;
+    vGuide: HTMLDivElement;
+    uiGuides: HTMLElement;
 
-    hl: SVGLineElement;
-    vl: SVGLineElement;
+    all = [] as { left, top, right, bottom, midX, midY, src }[];
 
     constructor(
+        private direction: string,
         private editor: HtmlPageEditor,
         private e: HTMLElement
     ) {
         if(!/selected/i.test(e.tagName)) {
             e = e.parentElement;
         }
-        let svg = e[hasSVG] as SVGElement;
-        if (!svg) {
-            svg = e[hasSVG] = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-            e.parentElement.appendChild(svg);
-            this.hl = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            this.vl = document.createElementNS("http://www.w3.org/2000/svg", "line");
-            svg.appendChild(this.hl);
-            svg.appendChild(this.vl);
-            this.hl.id = "hl";
-            this.vl.id = "vl";
-        } else {
-            this.hl = svg.querySelector("#hl");
-            this.vl = svg.querySelector("#vl");
+
+        const pe = e.parentElement;
+
+        const guides = (e[uiGuides] ??= editor.element.querySelector("ui-guides")) as HTMLElement;
+
+        this.hGuide = e["hGuide"] ??= guides.querySelector("h-guide");
+        this.vGuide = e["vGuide"] ??= guides.querySelector("v-guide");
+
+
+        const { all } = this;
+        const current = this.editor.selection.element;
+
+        const parent = current.parentElement;
+
+        let start = current.parentElement;
+        all.push({
+            src: start,
+            left: 0,
+            top: 0,
+            right: start.offsetWidth,
+            bottom: start.offsetHeight,
+            midX: start.offsetWidth /2,
+            midY: start.offsetHeight / 2
+        });
+        start = start.firstElementChild as HTMLElement;
+        if(start) {
+            if (start.offsetParent === parent && start !== current) {
+                all.push({
+                    src: start,
+                    left: start.offsetLeft,
+                    top: start.offsetTop,
+                    right: start.offsetLeft + start.offsetWidth,
+                    bottom: start.offsetTop + start.offsetHeight,
+                    midX: start.offsetLeft + (start.offsetWidth /2),
+                    midY: start.offsetTop + (start.offsetHeight / 2)
+                });
+            }
+            do {
+                if (start !== current) {
+                    all.push({
+                        src: start,
+                        left: start.offsetLeft,
+                        top: start.offsetTop,
+                        right: start.offsetLeft + start.offsetWidth,
+                        bottom: start.offsetTop + start.offsetHeight,
+                        midX: start.offsetLeft + (start.offsetWidth /2),
+                        midY: start.offsetTop + (start.offsetHeight / 2)
+                    });
+                }
+                start = start.nextElementSibling as HTMLElement;
+            } while(start);
         }
-        this.hl.style.display = "none";
-        this.vl.style.display = "none";
-        this.svg = svg;
+        console.log(all);
     }
 
     snap(rect: IRect) {
 
-        let start = this.editor.selection.element.parentElement;
+        let moving = false;
+        let setLeft = false;
+        let setTop = false;
 
-        start = start.firstElementChild as HTMLElement;
-        for(;;){
-            start = start.nextElementSibling as HTMLElement;
-            if (!start) {
+        switch(this.direction) {
+            case "none":
+                return rect;
+            case "move":
+                moving = true;
+                setLeft = true;
+                setTop = true;
+                break;
+            case "lt":
+                setLeft = true;
+                setTop = true;
                 break;
+            case "rt":
+                setTop = true;
+                break;
+            case "lb":
+                setLeft = true;
+                break;
+            case "rb":
+                break;
+        }
+
+
+        const mpX = rect.mx;
+        const mpY = rect.my;
+
+        const x = rect.left;
+        const y = rect.top;
+
+        const rx = x + rect.width;
+        const ry = y + rect.height;
+
+        let vl = void 0 as number;
+        let hl = void 0 as number;
+
+        let dx;
+        let dy;
+        let fdx;
+        let fdy;
+
+        const range = 2;
+
+        for (const { left, top, right, midX, bottom, midY} of this.all) {
+            if (!vl) {
+                dx = mpX - midX;
+                if (dx >= -range && dx <= range) {
+                    vl = midX;
+                    fdx = dx;
+                } else {
+                    dx = x - left;
+                    if (dx >= -range && dx <= range) {
+                        vl = left;
+                        fdx = dx;
+                    } else {
+                        dx = rx - (right);
+                        if(dx >= -range && dx <= range) {
+                            vl = right;
+                            fdx = dx;
+                        }
+                    }
+                }
             }
+            if (!hl) {
+                dy = mpY - midY;
+                if (dy >= -range && dy <= range) {
+                    hl = midY;
+                    fdy = dy;
+                } else {
+                    dy = y - top;
+                    if (dy >= -range && dy <= range) {
+                        hl = top;
+                        fdy = dy;
+                    } else {
+                        dy = ry - (bottom);
+                        if(dx >= -range && dx <= range) {
+                            hl = bottom;
+                            fdy = dy;
+                        }
+                    }
+                }
+            }
+        }
+
+        const v = this.vGuide;
+        if (vl) {
+            // if (moving) {
+            //     rect.left += fdx;
+            //     rect.right -= fdx;
+            // } else {
+            //     if (setLeft) {
+            //         rect.left += fdx;
+            //     } else {
+            //         rect.right -= fdx;
+            //     }
+            // }
+            v.style.left = vl + "px";
+        } else {
+            v.removeAttribute("style");
+        }
+
+        const h = this.hGuide;
+        if (hl) {
+            // if (moving) {
+            //     rect.top += fdy;
+            //     rect.bottom -= fdy;
+            // } else {
+            //     if (setTop) {
+            //         rect.top += fdy;
+            //     } else {
+            //         rect.bottom -= fdy;
+            //     }
+            // }
+            h.style.top = hl + "px";
+        } else {
+            h.removeAttribute("style");
         }
 
         return rect;
     }
 
     dispose() {
-        this.vl.style.display = "none";
-        this.hl.style.display = "none";
+        const { hGuide, vGuide } = this;
+        hGuide.removeAttribute("style");
+        vGuide.removeAttribute("style");
     }
 }