@social-mail/social-mail-client 1.8.339 → 1.8.343

package/package.json

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

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

@@ -5,7 +5,7 @@ import EditorPopupMenu from "../../menus/EditorPopupMenu";
 import { BindEditor } from "../../properties/controls/PropertyEditor";
 
 import "./SelectionUI.global.css";
-import HtmlPageEditor from "../HtmlPageEditor";
+import type HtmlPageEditor from "../HtmlPageEditor";
 import { mobileScreenWidth, tabletScreenWidth } from "../sizes";
 declare global {
     namespace JSX {
@@ -22,13 +22,14 @@ interface IRect {
     bottom;
     dx;
     dy;
-    sx;
-    sy;
+    // sx;
+    // sy;
     move?: boolean;
 }
 
-const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
+const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
+const beginDrag = (editor: HtmlPageEditor, element: HTMLElement) => {
 
     const prefix = editor.maxWidth === tabletScreenWidth
         ? "styler-tablet"
@@ -36,70 +37,56 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
             ? "styler-mobile"
             : "styler-desktop");
 
-    const sx = e.clientX;
-    const sy = e.clientY;
-
     const { selection, hover } = editor;
     const selectedElement = selection.element;
     const selectedParent = selectedElement.parentElement;
 
-    const frameDocument = selectedElement.ownerDocument;
-    const frame = editor.contentEditor;
 
 
     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 records = [] as MutationRecord[];
-
-
     const style = selectedElement.ownerDocument.defaultView.getComputedStyle(selectedElement);
     const width = selectedParent.offsetWidth;
     const height = selectedParent.offsetHeight;
 
-    const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
-
-    const { undoRedo } = editor;
-
-    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;
+    const { undoRedo } = editor;
 
+    const d = undoRedo.beginPause();
+
+    let resized = false;
     let changed = false;
+    let timer = void 0;
+
+    const move = ({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) => {
+
+        changed = true;
 
-    const captureMove = (evt: PointerEvent) => {
-        const dx = evt.clientX - sx;
-        const dy = evt.clientY - sy;
-        if (dx === 0 && dy === 0) {
-            return;
-        }
         const ri = {
             left,
             top,
             right,
             bottom,
-            sx,
-            sy,
             dx,
             dy
         };
-        changed = true;
         const r = fx(ri);
         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;
+            resized = true;
             let widthDiff = -r.left;
             let heightDiff = -r.top;
             if (ri.bottom === r.bottom) {
@@ -114,22 +101,96 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
             selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
+        // clearTimeout(this.timer);
         setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
         }, 1);
     };
 
+    const commit = () => {
+
+        d.resume();
+
+        const records = [] as MutationRecord[];
+
+        // push records...
+        records.push({
+            type: "attributes",
+            oldValue: oldInset,
+            target: selectedElement as any,
+            attributeName: insetAttribute,
+            attributeNamespace: "",
+        } as MutationRecord);
+
+        if (resized) {
+            records.push({
+                type: "attributes",
+                oldValue: oldWidth,
+                target: selectedElement as any,
+                attributeName: widthAttribute,
+                attributeNamespace: "",
+            } as MutationRecord);
+            records.push({
+                type: "attributes",
+                oldValue: oldHeight,
+                target: selectedElement as any,
+                attributeName: heightAttribute,
+                attributeNamespace: "",
+            } as MutationRecord);
+        }
+
+        undoRedo.observe(records);
+        editor.commit();
+
+        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 = beginDrag(editor, element);
+
+    const sx = e.clientX;
+    const sy = e.clientY;
+
+    const captureMove = (evt: PointerEvent) => {
+        const dx = evt.clientX - sx;
+        const dy = evt.clientY - sy;
+        if (dx === 0 && dy === 0) {
+            return;
+        }
+        sc.move({ dx, dy, fx});
+    };
+
     element.addEventListener("pointermove", captureMove);
     element.setPointerCapture(e.pointerId);
     const release = (e1: PointerEvent) => {
         element.releasePointerCapture(e.pointerId);
         element.removeEventListener("pointermove", captureMove);
         element.removeEventListener("pointerup", release);
-        captureMove(e1);
-        d.resume();
 
-        if (!changed) {
+        if (!sc.changed) {
+
+            const { selectedElement, selectedParent } = sc;
+            const frameDocument = selectedElement.ownerDocument;
+            const frame = editor.contentEditor;
+
 
             // try to select an element...
             const frameRect = frame.getBoundingClientRect();
@@ -163,40 +224,7 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
 
             return;
         }
-        // push records...
-        records.push({
-            type: "attributes",
-            oldValue: oldInset,
-            target: selectedElement as any,
-            attributeName: insetAttribute,
-            attributeNamespace: "",
-        } as MutationRecord);
-
-        if (moved) {
-            records.push({
-                type: "attributes",
-                oldValue: oldWidth,
-                target: selectedElement as any,
-                attributeName: widthAttribute,
-                attributeNamespace: "",
-            } as MutationRecord);
-            records.push({
-                type: "attributes",
-                oldValue: oldHeight,
-                target: selectedElement as any,
-                attributeName: heightAttribute,
-                attributeNamespace: "",
-            } as MutationRecord);
-        }
-
-        undoRedo.observe(records);
-        editor.commit();
-
-        setTimeout(() => {
-            selection.updateRect();
-            hover.updateRect();
-        }, 1);
-
+        sc.commit();
     };
     element.addEventListener("pointerup", release);
 };
@@ -205,9 +233,14 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
     const element = e.target as HTMLElement;
     const currentElement = e.currentTarget as HTMLElement;
     if (!currentElement.hasAttribute("data-edit")) {
+        setTimeout(() => currentElement.hasAttribute("data-edit")
+            ? currentElement.focus({ preventScroll: true })
+            : void 0, 250);
         return;
     }
 
+    currentElement.focus({ preventScroll: true });
+
     const resize = element.getAttribute("data-resize");
     if (resize) {
 
@@ -262,11 +295,81 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
 
 };
 
+const keyboardEditingSymbol = Symbol("keyboardEditing");
+
+const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
+    const element = e.target as HTMLElement;
+    const currentElement = e.currentTarget as HTMLElement;
+    if (!currentElement.hasAttribute("data-edit")) {
+        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;
+            break;
+        case "ArrowUp":
+            // Do something for "up arrow" key press.
+            dy = e.repeat ? -5 : -1;
+            break;
+        case "ArrowLeft":
+            // Do something for "left arrow" key press.
+            dx = e.repeat ? -5 : -1;
+            break;
+        case "ArrowRight":
+            // Do something for "right arrow" key press.
+            dx = e.repeat ? 5 : 1;
+            break;
+        default:
+            return;
+    }
+
+    let sc: ReturnType<typeof beginDrag> = currentElement[keyboardEditingSymbol];
+
+    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;
+        };
+
+        sc = beginDrag(editor, element);
+        currentElement[keyboardEditingSymbol] = sc;
+
+        sc.move({ dx, dy, fx });
+
+        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);
+    }
+
+};
+
 export function SelectionUI() {
     return <selected-element data-element="selection"
+        tabIndex="-1"
         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)}
+        event-keydown={BindEditor.event(eventKeyDown as any)}
         style-left={BindEditor.oneWay((e) => e.selection.left)}
         style-top={BindEditor.oneWay((e) => e.selection.top)}
         style-width={BindEditor.oneWay((e) => e.selection.width)}