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

package/package.json

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

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

@@ -5,8 +5,10 @@ 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";
+import type { SelectedElement } from "../SelectedElement";
+import UndoRedo from "../UndoRedo";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -22,84 +24,130 @@ interface IRect {
     bottom;
     dx;
     dy;
-    sx;
-    sy;
+    // sx;
+    // sy;
     move?: boolean;
 }
 
-const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
-
-
-    const prefix = editor.maxWidth === tabletScreenWidth
-        ? "styler-tablet"
-        : (editor.maxWidth === mobileScreenWidth
-            ? "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 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 left = parseFloat(style.left || "0");
-    const top = parseFloat(style.top || "0");
-    const bottom = parseFloat(style.bottom || "0");
-    const right = parseFloat(style.right || "0");
+    move({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) {
 
-    let moved = false;
+        this.changed = true;
 
-    let changed = false;
+        const {
+            left, top, bottom, right,
+            height, width,
+            selectedElement,
+            oldInset,
+            insetAttribute,
+            widthAttribute,
+            heightAttribute,
+            selection,
+            hover
+        } = this;
 
-    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;
+            this.resized = true;
             let widthDiff = -r.left;
             let heightDiff = -r.top;
             if (ri.bottom === r.bottom) {
@@ -114,10 +162,77 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
             selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
-        setTimeout(() => {
+        clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            selection.updateRect();
+            hover.updateRect();
+        }, 1);
+    }
+
+    commit() {
+
+        this.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",
+            oldValue: oldInset,
+            target: selectedElement as any,
+            attributeName: insetAttribute,
+            attributeNamespace: "",
+        } as MutationRecord);
+
+        if (this.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(this.timer);
+        this.timer = setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
         }, 1);
+    }
+}
+
+const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEvent, fx: (r: IRect, ) => IRect) => {
+
+
+    const sc = new SelectedCapture(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);
@@ -126,10 +241,13 @@ const setCapture = (editor: HtmlPageEditor, element: HTMLElement, e: PointerEven
         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 +281,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);
 };
@@ -208,6 +293,9 @@ const eventPointerDown = (editor: HtmlPageEditor, e: PointerEvent) =>  {
         return;
     }
 
+    currentElement.tabIndex = 0;
+    currentElement.focus();
+
     const resize = element.getAttribute("data-resize");
     if (resize) {
 
@@ -262,11 +350,79 @@ 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;
+    }
+
+    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: SelectedCapture = 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 = new SelectedCapture(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"
         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)}