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

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

@@ -22027,7 +22027,7 @@ System.register(["tslib", "@web-atoms/core/dist/App", "@web-atoms/core/dist/core
             const fud = new FileUploader(this);
             while (size > 0) {
               const blobSize = Math.min(maxSize, file.size - start);
-              const part = new File([file.slice(start, blobSize === maxSize ? blobSize : void 0)], "file.dat");
+              const part = new File([file.slice(start, start + blobSize)], "file.dat");
               size -= blobSize;
               start += blobSize;
               const uploadRequest = fud.upload({
@@ -55962,12 +55962,13 @@ 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, setCapture, eventPointerDown;
+  var XNode, EditorPopupMenu, BindEditor, mobileScreenWidth, tabletScreenWidth, SelectedCapture, ps, setCapture, eventPointerDown, keyboardEditingSymbol, eventKeyDown;
   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),
       "event-pointerdown": BindEditor.event(eventPointerDown),
+      "event-keydown": BindEditor.event(eventKeyDown),
       "style-left": BindEditor.oneWay(e => e.selection.left),
       "style-top": BindEditor.oneWay(e => e.selection.top),
       "style-width": BindEditor.oneWay(e => e.selection.width),
@@ -56035,61 +56036,89 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
       tabletScreenWidth = _sizes.tabletScreenWidth;
     }],
     execute: function () {
-      setCapture = (editor, element, e, fx) => {
-        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 = [];
-        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;
-        let changed = false;
-        const captureMove = evt => {
-          const dx = evt.clientX - sx;
-          const dy = evt.clientY - sy;
-          if (dx === 0 && dy === 0) {
-            return;
-          }
+      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({
+          dx,
+          dy,
+          fx
+        }) {
+          this.changed = true;
+          const {
+            left,
+            top,
+            bottom,
+            right,
+            height,
+            width,
+            selectedElement,
+            oldInset,
+            insetAttribute,
+            widthAttribute,
+            heightAttribute,
+            selection,
+            hover
+          } = this;
           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) {
@@ -56103,10 +56132,75 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
             const newHeight = ps(height + heightDiff, height) + "%";
             selectedElement.setAttribute(heightAttribute, newHeight);
           }
-          setTimeout(() => {
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
+            selection.updateRect();
+            hover.updateRect();
+          }, 1);
+        }
+        commit() {
+          this.d.resume();
+          const records = [];
+          const {
+            oldInset,
+            oldHeight,
+            oldWidth,
+            selectedElement,
+            insetAttribute,
+            widthAttribute,
+            heightAttribute,
+            undoRedo,
+            editor,
+            selection,
+            hover
+          } = this;
+          records.push({
+            type: "attributes",
+            oldValue: oldInset,
+            target: selectedElement,
+            attributeName: insetAttribute,
+            attributeNamespace: ""
+          });
+          if (this.resized) {
+            records.push({
+              type: "attributes",
+              oldValue: oldWidth,
+              target: selectedElement,
+              attributeName: widthAttribute,
+              attributeNamespace: ""
+            });
+            records.push({
+              type: "attributes",
+              oldValue: oldHeight,
+              target: selectedElement,
+              attributeName: heightAttribute,
+              attributeNamespace: ""
+            });
+          }
+          undoRedo.observe(records);
+          editor.commit();
+          clearTimeout(this.timer);
+          this.timer = setTimeout(() => {
             selection.updateRect();
             hover.updateRect();
           }, 1);
+        }
+      };
+      setCapture = (editor, element, e, fx) => {
+        const sc = new SelectedCapture(editor, element);
+        const sx = e.clientX;
+        const sy = e.clientY;
+        const captureMove = evt => {
+          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);
@@ -56114,9 +56208,13 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
           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;
             const frameRect = frame.getBoundingClientRect();
             let {
               clientX,
@@ -56145,35 +56243,7 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
             }
             return;
           }
-          records.push({
-            type: "attributes",
-            oldValue: oldInset,
-            target: selectedElement,
-            attributeName: insetAttribute,
-            attributeNamespace: ""
-          });
-          if (moved) {
-            records.push({
-              type: "attributes",
-              oldValue: oldWidth,
-              target: selectedElement,
-              attributeName: widthAttribute,
-              attributeNamespace: ""
-            });
-            records.push({
-              type: "attributes",
-              oldValue: oldHeight,
-              target: selectedElement,
-              attributeName: heightAttribute,
-              attributeNamespace: ""
-            });
-          }
-          undoRedo.observe(records);
-          editor.commit();
-          setTimeout(() => {
-            selection.updateRect();
-            hover.updateRect();
-          }, 1);
+          sc.commit();
         };
         element.addEventListener("pointerup", release);
       };
@@ -56183,6 +56253,8 @@ 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) {
@@ -56229,6 +56301,62 @@ System.register(["@web-atoms/core/dist/core/XNode", "../../menus/EditorPopupMenu
           return r;
         });
       };
+      keyboardEditingSymbol = Symbol("keyboardEditing");
+      eventKeyDown = (editor, e) => {
+        const element = e.target;
+        const currentElement = e.currentTarget;
+        if (!currentElement.hasAttribute("data-edit")) {
+          return;
+        }
+        let dx = 0;
+        let dy = 0;
+        switch (e.key) {
+          case "ArrowDown":
+            dy = e.repeat ? 5 : 1;
+            break;
+          case "ArrowUp":
+            dy = e.repeat ? -5 : -1;
+            break;
+          case "ArrowLeft":
+            dx = e.repeat ? -5 : -1;
+            break;
+          case "ArrowRight":
+            dx = e.repeat ? 5 : 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;
+          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);
+        }
+      };
     }
   };
 });