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

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

@@ -0,0 +1,222 @@
+import HtmlPageEditor from "../HtmlPageEditor";
+
+const uiGuides = Symbol("ui-guides");
+
+interface IRect {
+    left;
+    top;
+    right;
+    bottom;
+    dx;
+    dy;
+    mx;
+    my;
+    width,
+    height,
+    // sx;
+    // sy;
+    move?: boolean;
+}
+export default class SnapGuides {
+
+    hGuide: HTMLDivElement;
+    vGuide: HTMLDivElement;
+    uiGuides: HTMLElement;
+
+    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;
+        }
+
+        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);
+        }
+        console.log(all);
+    }
+
+    snap(rect: IRect) {
+
+        let moving = false;
+        let setLeft = false;
+        let setTop = false;
+
+        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() {
+        const { hGuide, vGuide } = this;
+        hGuide.removeAttribute("style");
+        vGuide.removeAttribute("style");
+    }
+}

package/src/web/drawer/AppDrawer.local.css

@@ -15,6 +15,7 @@ drawer-menu {
         & input {
             width: 100%;
             margin-left: 16px;
+            padding-right: 16px;
             border-radius: 0;
             border-bottom: solid 1px transparent;
             &:focus {