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

package/dist/site-editor-app/SiteEditorApp.pack.js

@@ -55962,11 +55962,12 @@ System.register([], function (_export, _context) {
 System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu", "../../properties/controls/PropertyEditor", "./SelectionUI.global.css", "../sizes"], function (_export, _context) {
   "use strict";
 
-  var XNode, EditorPopupMenu, BindEditor, mobileScreenWidth, tabletScreenWidth, SelectedCapture, ps, setCapture, eventPointerDown, keyboardEditingSymbol, eventKeyDown;
+  var XNode, EditorPopupMenu, BindEditor, mobileScreenWidth, tabletScreenWidth, ps, beginDrag, setCapture, eventPointerDown, keyboardEditingSymbol, eventKeyDown, updateFocus;
   function SelectionUI() {
     return XNode.create("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),
       "event-keydown": BindEditor.event(eventKeyDown),
       "style-left": BindEditor.oneWay(e => e.selection.left),
@@ -56037,75 +56038,40 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
     }],
     execute: function () {
       ps = (v, max) => (v * 100 / (max || 1)).toFixed(2);
-      SelectedCapture = class SelectedCapture {
-        constructor(editor, element) {
-          this.editor = editor;
-          this.element = element;
-          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 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;
-        }
-        move({
+      beginDrag = (editor, element) => {
+        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;
+        const d = undoRedo.beginPause();
+        let resized = false;
+        let changed = false;
+        let timer = void 0;
+        const move = ({
           dx,
           dy,
           fx
-        }) {
-          this.changed = true;
-          const {
-            left,
-            top,
-            bottom,
-            right,
-            height,
-            width,
-            selectedElement,
-            oldInset,
-            insetAttribute,
-            widthAttribute,
-            heightAttribute,
-            selection,
-            hover
-          } = this;
+        }) => {
+          changed = true;
           const ri = {
             left,
             top,
@@ -56118,7 +56084,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
           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) {
-            this.resized = true;
+            resized = true;
             let widthDiff = -r.left;
             let heightDiff = -r.top;
             if (ri.bottom === r.bottom) {
@@ -56132,28 +56098,14 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
             const newHeight = ps(height + heightDiff, height) + "%";
             selectedElement.setAttribute(heightAttribute, newHeight);
           }
-          clearTimeout(this.timer);
-          this.timer = setTimeout(() => {
+          setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
           }, 1);
-        }
-        commit() {
-          this.d.resume();
+        };
+        const commit = () => {
+          d.resume();
           const records = [];
-          const {
-            oldInset,
-            oldHeight,
-            oldWidth,
-            selectedElement,
-            insetAttribute,
-            widthAttribute,
-            heightAttribute,
-            undoRedo,
-            editor,
-            selection,
-            hover
-          } = this;
           records.push({
             type: "attributes",
             oldValue: oldInset,
@@ -56161,7 +56113,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
             attributeName: insetAttribute,
             attributeNamespace: ""
           });
-          if (this.resized) {
+          if (resized) {
             records.push({
               type: "attributes",
               oldValue: oldWidth,
@@ -56179,15 +56131,24 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
           }
           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;
+          }
+        };
       };
       setCapture = (editor, element, e, fx) => {
-        const sc = new SelectedCapture(editor, element);
+        const sc = beginDrag(editor, element);
         const sx = e.clientX;
         const sy = e.clientY;
         const captureMove = evt => {
@@ -56253,8 +56214,6 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
         if (!currentElement.hasAttribute("data-edit")) {
           return;
         }
-        currentElement.tabIndex = 0;
-        currentElement.focus();
         const resize = element.getAttribute("data-resize");
         if (resize) {
           switch (resize) {
@@ -56308,54 +56267,67 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
         if (!currentElement.hasAttribute("data-edit")) {
           return;
         }
+        let sc = currentElement[keyboardEditingSymbol];
+        if (sc) {
+          return;
+        }
         let dx = 0;
         let dy = 0;
         switch (e.key) {
           case "ArrowDown":
-            dy = e.repeat ? 5 : 1;
+            dy = 1;
             break;
           case "ArrowUp":
-            dy = e.repeat ? -5 : -1;
+            dy = -1;
             break;
           case "ArrowLeft":
-            dx = e.repeat ? -5 : -1;
+            dx = -1;
             break;
           case "ArrowRight":
-            dx = e.repeat ? 5 : 1;
+            dx = 1;
             break;
           default:
             return;
         }
-        let sc = 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;
+        const sx = dx * 5;
+        const sy = dy * 5;
+        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(() => {
+          dx += sx;
+          dy += sy;
           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);
+        }, 250);
+        const release = () => {
+          clearInterval(timer);
+          currentElement[keyboardEditingSymbol] = void 0;
+          currentElement.removeEventListener("keyup", release);
+          sc.commit();
+        };
+        currentElement.addEventListener("keyup", release);
+      };
+      updateFocus = (e, b) => {
+        if (b) {
+          e.focus();
         }
+        return b;
       };
     }
   };