@social-mail/social-mail-client 1.8.342 → 1.8.344

package/package.json

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

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

@@ -7,8 +7,6 @@ import { BindEditor } from "../../properties/controls/PropertyEditor";
 import "./SelectionUI.global.css";
 import type HtmlPageEditor from "../HtmlPageEditor";
 import { mobileScreenWidth, tabletScreenWidth } from "../sizes";
-import type { SelectedElement } from "../SelectedElement";
-import UndoRedo from "../UndoRedo";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -31,108 +29,49 @@ interface IRect {
 
 const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
-class SelectedCapture {
-
-    public left;
-    public top;
-    public width;
-    public height;
-    public right;
-    public bottom;
-    public oldInset;
-    public oldWidth;
-    public oldHeight;
-
-    d: { resume: () => void; };
-    selectedParent: HTMLElement;
-    selectedElement: HTMLElement;
-    insetAttribute: string;
-    widthAttribute: string;
-    heightAttribute: string;
-    resized: boolean;
-    selection: SelectedElement;
-    hover: SelectedElement;
-    undoRedo: UndoRedo;
-    changed: boolean;
-    timer: any;
-
-    constructor(
-        public editor: HtmlPageEditor,
-        public element: HTMLElement
-    ) {
-        const prefix = editor.maxWidth === tabletScreenWidth
-            ? "styler-tablet"
-            : (editor.maxWidth === mobileScreenWidth
-                ? "styler-mobile"
-                : "styler-desktop");
-
-        const { selection, hover } = editor;
-        const selectedElement = selection.element;
-        const selectedParent = selectedElement.parentElement;
-
-        this.selectedElement = selectedElement;
-        this.selectedParent = selectedParent;
-        this.selection = selection;
-        this.hover = hover;
-        // const frameDocument = selectedElement.ownerDocument;
-        // const frame = editor.contentEditor;
-
-
-        const insetAttribute = `${prefix}-inset`;
-        const widthAttribute = `${prefix}-width`;
-        const heightAttribute = `${prefix}-height`;
-
-        this.insetAttribute = insetAttribute;
-        this.widthAttribute = widthAttribute;
-        this.heightAttribute = heightAttribute;
-
-        const oldWidth = selectedElement.getAttribute(widthAttribute);
-        const oldHeight = selectedElement.getAttribute(heightAttribute);
-        const oldInset = selectedElement.getAttribute(insetAttribute);
-
-        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");
-
-        this.left = left;
-        this.top = top;
-        this.bottom = bottom;
-        this.right = right;
-        this.width = width;
-        this.height = height;
-        this.oldWidth = oldWidth;
-        this.oldHeight = oldHeight;
-        this.oldInset = oldInset;
-
-        const { undoRedo } = editor;
-        this.undoRedo = undoRedo;
-
-        const d = undoRedo.beginPause();
-
-        this.d = d;
-        this.resized = false;
-    }
+const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
+
+    const prefix = editor.maxWidth === tabletScreenWidth
+        ? "styler-tablet"
+        : (editor.maxWidth === mobileScreenWidth
+            ? "styler-mobile"
+            : "styler-desktop");
+
+    const { selection, hover } = editor;
+    const selectedElement = selection.element;
+    const selectedParent = selectedElement.parentElement;
+
+
+
+    const insetAttribute = `${prefix}-inset`;
+    const widthAttribute = `${prefix}-width`;
+    const heightAttribute = `${prefix}-height`;
+
+
+    const oldWidth = selectedElement.getAttribute(widthAttribute);
+    const oldHeight = selectedElement.getAttribute(heightAttribute);
+    const oldInset = selectedElement.getAttribute(insetAttribute);
+
+    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 { undoRedo } = editor;
 
-    move({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) {
+    const d = undoRedo.beginPause();
 
-        this.changed = true;
+    let resized = false;
+    let changed = false;
+    let timer = void 0;
 
-        const {
-            left, top, bottom, right,
-            height, width,
-            selectedElement,
-            oldInset,
-            insetAttribute,
-            widthAttribute,
-            heightAttribute,
-            selection,
-            hover
-        } = this;
+    const move = ({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) => {
+
+        changed = true;
 
         const ri = {
             left,
@@ -147,7 +86,7 @@ class SelectedCapture {
         selectedElement.setAttribute(insetAttribute, inset);
 
         if (!r.move) {
-            this.resized = true;
+            resized = true;
             let widthDiff = -r.left;
             let heightDiff = -r.top;
             if (ri.bottom === r.bottom) {
@@ -162,25 +101,19 @@ class SelectedCapture {
             selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
+        // clearTimeout(this.timer);
+        setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
         }, 1);
-    }
+    };
 
-    commit() {
+    const commit = () => {
 
-        this.d.resume();
+        d.resume();
 
         const records = [] as MutationRecord[];
 
-        const { oldInset, oldHeight, oldWidth, selectedElement,
-            insetAttribute, widthAttribute, heightAttribute,
-            undoRedo, editor,
-            selection, hover
-        } = this;
-
         // push records...
         records.push({
             type: "attributes",
@@ -190,7 +123,7 @@ class SelectedCapture {
             attributeNamespace: "",
         } as MutationRecord);
 
-        if (this.resized) {
+        if (resized) {
             records.push({
                 type: "attributes",
                 oldValue: oldWidth,
@@ -210,18 +143,28 @@ class SelectedCapture {
         undoRedo.observe(records);
         editor.commit();
 
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
         }, 1);
-    }
-}
+    };
+
+    return {
+        move,
+        commit,
+        selectedElement,
+        selectedParent,
+        get changed() {
+            return changed;
+        }
+    };
+};
 
 const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
 
 
-    const sc = new SelectedCapture(editor, element);
+    const sc = beginDrag(editor, element);
 
     const sx = e.clientX;
     const sy = e.clientY;
@@ -293,9 +236,6 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
         return;
     }
 
-    currentElement.tabIndex = 0;
-    currentElement.focus();
-
     const resize = element.getAttribute("data-resize");
     if (resize) {
 
@@ -359,68 +299,84 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
         return;
     }
 
+    let sc: ReturnType<typeof beginDrag> = currentElement[keyboardEditingSymbol];
+    if (sc) {
+        return;
+    }
+
+    // e.preventDefault();
+
     let dx = 0;
     let dy = 0;
 
     switch(e.key) {
         case "ArrowDown":
             // Do something for "down arrow" key press.
-            dy = e.repeat ? 5 : 1;
+            dy = 1;
             break;
         case "ArrowUp":
             // Do something for "up arrow" key press.
-            dy = e.repeat ? -5 : -1;
+            dy = -1;
             break;
         case "ArrowLeft":
             // Do something for "left arrow" key press.
-            dx = e.repeat ? -5 : -1;
+            dx = -1;
             break;
         case "ArrowRight":
             // Do something for "right arrow" key press.
-            dx = e.repeat ? 5 : 1;
+            dx = 1;
             break;
         default:
             return;
     }
 
-    let sc: SelectedCapture = currentElement[keyboardEditingSymbol];
+    const sx = dx * 5;
+    const sy = dy * 5;
 
-    if(!sc) {
+    const fx = (r) => {
+        r.top += r.dy;
+        r.left += r.dx;
+        r.bottom -= r.dy;
+        r.right -= r.dx;
+        r.move = true;
+        return r;
+    };
 
-        const fx = (r) => {
-            r.top += r.dy;
-            r.left += r.dx;
-            r.bottom -= r.dy;
-            r.right -= r.dx;
-            r.move = true;
-            return r;
-        };
+    sc = beginDrag(editor, element);
+    currentElement[keyboardEditingSymbol] = sc;
 
-        sc = new SelectedCapture(editor, element);
-        currentElement[keyboardEditingSymbol] = sc;
+    sc.move({ dx, dy, fx });
 
+    const timer = setInterval(() => {
+        dx += sx;
+        dy += sy;
         sc.move({ dx, dy, fx });
+    }, 250);
+
+
+    const release = () => {
+        clearInterval(timer);
+        currentElement[keyboardEditingSymbol] = void 0;
+        currentElement.removeEventListener("keyup", release);
+        sc.commit();
+    };
+    currentElement.addEventListener("keyup", release);
 
-        const timer = setInterval(() =>
-            sc.move({ dx, dy, fx })
-        , 250);
 
+};
 
-        const release = () => {
-            clearInterval(timer);
-            currentElement[keyboardEditingSymbol] = void 0;
-            currentElement.removeEventListener("keyup", release);
-            sc.commit();
-        };
-        currentElement.addEventListener("keyup", release);
+const updateFocus = (e, b) => {
+    if (b) {
+        e.focus();
     }
-
+    return b;
 };
 
 export function SelectionUI() {
     return <selected-element data-element="selection"
-        data-edit={BindEditor.oneWay((e) => /relative/i.test(e.selection.parentStyle.position)
-            && /absolute|fixed/i.test(e.selection.currentStyle.position) ? "1" : null)}
+        tabIndex="-1"
+        data-edit={BindEditor.oneWay((editor,e) => updateFocus(e, /relative/i.test(editor.selection.parentStyle.position)
+            && /absolute|fixed/i.test(editor.selection.currentStyle.position) ? "1" : null))}
         event-pointerdown={BindEditor.event(eventPointerDown as any)}
         event-keydown={BindEditor.event(eventKeyDown as any)}
         style-left={BindEditor.oneWay((e) => e.selection.left)}