@social-mail/social-mail-client 1.8.332 → 1.8.334

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.332",
+  "version": "1.8.334",
   "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);

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,13 +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);
         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",
@@ -128,7 +172,7 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
             attributeNamespace: "",
         } as MutationRecord);
 
-        if (newWidth) {
+        if (moved) {
             records.push({
                 type: "attributes",
                 oldValue: oldWidth,
@@ -136,8 +180,6 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
                 attributeName: widthAttribute,
                 attributeNamespace: "",
             } as MutationRecord);
-        }
-        if (newHeight) {
             records.push({
                 type: "attributes",
                 oldValue: oldHeight,
@@ -222,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)}

package/src/site-editor/tools/ToolService.ts

@@ -0,0 +1,32 @@
+import DISingleton from "@web-atoms/core/dist/di/DISingleton";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import IPagedList from "@web-atoms/entity/dist/models/IPagedList";
+
+export interface ISiteTemplate {
+    id: any;
+    tags: string[];
+    name: string;
+    host: string;
+    preview: string;
+    previewMobile: string;
+    template: string;
+    url: string;
+}
+
+@DISingleton()
+export default class ToolService {
+
+
+    designs({ search, tags, start = 0, size = 50, cancelToken }) {
+        return FetchBuilder.get(`https://tools.esocialmail.com/social-mail/site/list/designs`)
+            .queries({
+                search,
+                tags,
+                start,
+                size
+            })
+            .cancelToken(cancelToken)
+            .asJson<IPagedList<ISiteTemplate>>();
+    }
+
+}

package/src/site-editor/tools/basic/BasicShapes.tsx

@@ -1,59 +1,33 @@
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import { CacheTTL } from "../../../common/cache/CacheTTL";
 import { packageVersion } from "../../../common/PackageInfo";
-import { Sql } from "../../../common/Sql";
-import { ChannelEmail, IChannelEmail } from "../../../model/model";
 import ToolSection, { IToolItem } from "../section/ToolSection";
+import ToolService, { ISiteTemplate } from "../ToolService";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
 
 const cacheVersion = packageVersion;
 const cacheSeconds = CacheTTL.seconds.oneDay;
 
 
-export default class BasicShapes extends ToolSection<IChannelEmail> {
+export default class BasicShapes extends ToolSection<ISiteTemplate> {
+
+    @InjectProperty
+    tools: ToolService;
 
     get headerName() {
         return "Shapes";
     }
 
     async searchItems({ start, search, cancelToken }) {
-        const contentTypes = ["image/%", "text/html"];
-        const shape = "shape";
-        let q = this.entityService.query(ChannelEmail, "libraryEmails")
-            .where({ contentTypes, shape }, (p) =>  (x) => x.email.attachments.some((e) =>
-                Sql.text.iLikeAny(e.contentType, p.contentTypes)
-                && e.email.emailTags.some((t) => t.tag.parent.lowerCaseName === p.shape)
-            ))
-            ;
-        if(search) {
-            search += "%";
-            q = q.where({ search }, (p) => (x) => Sql.text.iLike(x.email.subject, p.search));
-        }
-        return q
-            .include((x) => [x.email.attachments, x.email.emailTags.forEach((t) => t.tag)])
-            .toPagedList({
-                start,
-                cancelToken,
-                size: 25,
-                cacheSeconds,
-                cacheVersion
-            });
+        return this.tools.designs({ search, tags: "Shape", start, cancelToken, size: 50 });
     }
 
-    asToolItem(x: IChannelEmail): IToolItem {
-
-        const { email, emailID: id } = x;
-        const { attachments: files, subject: title } = email;
+    asToolItem(x: ISiteTemplate): IToolItem {
 
-        const preview = this.getFileType("preview.", ... files);
-        const { src, href } = this.getFileType("template.", ... files);
+        const { id, preview, name: title, template: templateUrl } = x;
 
         const template = async () => {
-            if (src) {
-                const img = document.createElement("img");
-                img.src = src;
-                return img;
-            }
-            const text = await FetchBuilder.get(href).asText();
+            const text = await FetchBuilder.get(templateUrl).asText();
             const parser = new DOMParser();
             const d = parser.parseFromString(text, "text/html");
             const t = d.body.querySelector("template");
@@ -64,10 +38,13 @@ export default class BasicShapes extends ToolSection<IChannelEmail> {
 
         return {
             title,
-            files,
+            files: [],
             id,
             copyAssets: true,
-            preview,
+            preview: {
+                src: preview,
+                href: void 0
+            },
             template
         };
     }

package/src/site-editor/tools/designs/Designs.tsx

@@ -1,59 +1,33 @@
 import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
 import { CacheTTL } from "../../../common/cache/CacheTTL";
 import { packageVersion } from "../../../common/PackageInfo";
-import { Sql } from "../../../common/Sql";
-import { ChannelEmail, IChannelEmail } from "../../../model/model";
 import ToolSection, { IToolItem } from "../section/ToolSection";
+import InjectProperty from "@web-atoms/core/dist/core/InjectProperty";
+import ToolService, { ISiteTemplate } from "../ToolService";
 
 const cacheVersion = packageVersion;
 const cacheSeconds = CacheTTL.seconds.oneDay;
 
 
-export default class Designs extends ToolSection<IChannelEmail> {
+export default class Designs extends ToolSection<ISiteTemplate> {
+
+     @InjectProperty
+    tools: ToolService;
 
     get headerName() {
         return "Designs";
     }
 
     async searchItems({ start, search, cancelToken }) {
-        const contentTypes = ["image/%", "text/html"];
-        const shape = "design";
-        let q = this.entityService.query(ChannelEmail, "libraryEmails")
-            .where({ contentTypes, shape }, (p) =>  (x) => x.email.attachments.some((e) =>
-                Sql.text.iLikeAny(e.contentType, p.contentTypes)
-                && e.email.emailTags.some((t) => t.tag.lowerCaseName === p.shape)
-            ))
-            ;
-        if(search) {
-            search += "%";
-            q = q.where({ search }, (p) => (x) => Sql.text.iLike(x.email.subject, p.search));
-        }
-        return q
-            .include((x) => [x.email.attachments, x.email.emailTags.forEach((t) => t.tag)])
-            .toPagedList({
-                start,
-                cancelToken,
-                size: 25,
-                cacheSeconds,
-                cacheVersion
-            });
+        return this.tools.designs({ search, tags: "Shape", start, cancelToken, size: 50 });
     }
 
-    asToolItem(x: IChannelEmail): IToolItem {
-
-        const { email, emailID: id } = x;
-        const { attachments: files, subject: title } = email;
+    asToolItem(x: ISiteTemplate): IToolItem {
 
-        const preview = this.getFileType("preview.", ... files);
-        const { src, href } = this.getFileType("template.", ... files);
+        const { id, preview, name: title, template: templateUrl } = x;
 
         const template = async () => {
-            if (src) {
-                const img = document.createElement("img");
-                img.src = src;
-                return img;
-            }
-            const text = await FetchBuilder.get(href).asText();
+            const text = await FetchBuilder.get(templateUrl).asText();
             const parser = new DOMParser();
             const d = parser.parseFromString(text, "text/html");
             const t = d.body.querySelector("template");
@@ -64,10 +38,13 @@ export default class Designs extends ToolSection<IChannelEmail> {
 
         return {
             title,
-            files,
+            files: [],
             id,
             copyAssets: true,
-            preview,
+            preview: {
+                src: preview,
+                href: void 0
+            },
             template
         };
     }