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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.342",
+  "version": "1.8.343",
   "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;
@@ -290,11 +233,13 @@ 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.tabIndex = 0;
-    currentElement.focus();
+    currentElement.focus({ preventScroll: true });
 
     const resize = element.getAttribute("data-resize");
     if (resize) {
@@ -358,6 +303,7 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
     if (!currentElement.hasAttribute("data-edit")) {
         return;
     }
+    // e.preventDefault();
 
     let dx = 0;
     let dy = 0;
@@ -383,7 +329,7 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
             return;
     }
 
-    let sc: SelectedCapture = currentElement[keyboardEditingSymbol];
+    let sc: ReturnType<typeof beginDrag> = currentElement[keyboardEditingSymbol];
 
     if(!sc) {
 
@@ -396,7 +342,7 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
             return r;
         };
 
-        sc = new SelectedCapture(editor, element);
+        sc = beginDrag(editor, element);
         currentElement[keyboardEditingSymbol] = sc;
 
         sc.move({ dx, dy, fx });
@@ -419,6 +365,7 @@ const eventKeyDown = (editor: HtmlPageEditor, e: KeyboardEvent) => {
 
 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)}