@social-mail/social-mail-client 1.9.67 → 1.9.69

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

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-namespace */
 import XNode from "@web-atoms/core/dist/core/XNode";
 import EditorPopupMenu from "../../menus/EditorPopupMenu";
 import { BindEditor } from "../../properties/controls/PropertyEditor";
@@ -10,14 +8,6 @@ import { mobileScreenWidth, tabletScreenWidth } from "../sizes";
 import SnapGuides from "./SnapGuides";
 import { isDragged } from "../EditingSymbols";
 
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "selected-element": any;
-        }
-    }
-}
-
 interface IRect {
     left;
     top;
@@ -36,6 +26,33 @@ interface IRect {
 
 const ps = (v, max) => (v* 100 / (max || 1)).toFixed(2);
 
+const cssPath = (el) => {
+    // if (!(el instanceof Element)) {
+    //     return;
+    // }
+    const path = [];
+    while (el.nodeType === Node.ELEMENT_NODE) {
+        let selector = el.nodeName.toLowerCase();
+        if (el.id) {
+            selector += '#' + el.id;
+        } else {
+            let nth = 1;
+            let f = (el as HTMLElement).parentElement.firstElementChild;
+            while(f !== el) {
+                nth++;
+                f = f.nextElementSibling;
+            }
+            selector += ":nth-child("+nth+")";
+        }
+        path.unshift(selector);
+        if (el.tagName === "BODY") {
+            break;
+        }
+        el = el.parentNode;
+    }
+    return path.join(" > ");
+};
+
 const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLElement) => {
 
     const snaps = new SnapGuides(direction, editor, element);
@@ -89,6 +106,10 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
 
     let updateTimer = void 0;
 
+    const dndStyle = editor.dndStyle;
+
+    const elementSelector = cssPath(selectedElement);
+
     const move = ({ dx, dy, fx}: { dx: number, dy: number, fx: (r: IRect, ) => IRect}) => {
 
         changed = true;
@@ -118,18 +139,25 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
         r = snaps.snap(r);
 
         inset = `${ps(r.top, height)}% ${ps(r.right, width)}% ${ps(r.bottom, height)}% ${ps(r.left, width)}%`;
-        selectedElement.style.inset =  inset;
+        let rules = `${elementSelector} {
+            inset: ${inset};
+        `;
 
         if (!r.move) {
             resized = true;
             newWidth = ps(elementWidth + dx, width) + "%";
-            selectedElement.style.width = newWidth;
+            rules += ` width: ${newWidth}; `;
+            // selectedElement.style.width = newWidth;
             // // selectedElement.setAttribute(widthAttribute, newWidth);
             newHeight = ps(elementHeight + dy, height) + "%";
-            selectedElement.style.height = newHeight;
+            rules += ` height: ${newHeight}; `;
+            // selectedElement.style.height = newHeight;
             // selectedElement.setAttribute(heightAttribute, newHeight);
         }
 
+        rules += "}";
+
+        dndStyle.replaceSync(rules);
 
         if(!updateTimer) {
             updateTimer = setTimeout(() => {
@@ -148,9 +176,7 @@ const beginDrag = (direction: string, editor: HtmlPageEditor, element: HTMLEleme
     const commit = () => {
 
 
-        selectedElement.style.removeProperty("inset");
-        selectedElement.style.removeProperty("width");
-        selectedElement.style.removeProperty("height");
+        dndStyle.replaceSync("");
 
         selectedElement.setAttribute(insetAttribute, inset);
         if (resized) {
@@ -241,10 +267,10 @@ const setCapture = (direction: string, editor: HtmlPageEditor, element: HTMLElem
         element.removeEventListener("pointermove", captureMove);
         element.removeEventListener("pointerup", release);
 
-        sc.resume();
 
         if (!sc.changed) {
 
+            sc.resume();
             const { selectedElement, selectedParent } = sc;
             const frameDocument = selectedElement.ownerDocument;
             const frame = editor.contentEditor;

package/src/site-editor/properties/controls/multi-value/MultiValueControl.tsx

@@ -5,16 +5,6 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 import HtmlPageEditor from "../../../editor/HtmlPageEditor";
 import { CancelToken } from "@web-atoms/core/dist/core/types";
 
-declare global {
-    // eslint-disable-next-line @typescript-eslint/no-namespace
-    namespace JSX {
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        interface IntrinsicElements {
-            "multi-value": any;
-        }
-    }
-}
-
 import "./MultiValueControl.global.css";
 import AtomPopover from "@web-atoms/web-controls/dist/basic/elements/AtomPopover";
 

package/src/site-editor/tools/preview/ToolPreview.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable no-console */
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-namespace */
 import "./ToolPreview.global.css";
 
 const observer = new IntersectionObserver((entries) => {
@@ -135,11 +133,3 @@ export default class ToolPreview extends HTMLElement {
 }
 
 customElements.define("tool-preview", ToolPreview);
-
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "tool-preview": any;
-        }
-    }
-}

package/src/site-editor-app/pages/websites/studio/layers/StudioLayers.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-namespace */
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
 
@@ -9,14 +7,8 @@ import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
  */
 
 declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "studio-layers": any;
-            "layer-item": any;
-            "layer-children": any;
-        }
-    }
 
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     interface HTMLElement {
         scrollIntoViewIfNeeded(...a: any[]);
     }

package/src/tags.d.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+namespace JSX {
+    interface IntrinsicElements {
+        "preview-template": any;
+        "label-badge": any;
+        "line-chart": any;
+        "bar-chart": any;
+        "pie-chart": any;
+        "removable-menu": any;
+        "splash-screen": any;
+        "web-site-reports": any;
+        "channel-post": any;
+        "channel-name": any;
+        "post-author": any;
+        "post-title": any;
+        "post-date": any;
+        "post-description": any;
+        "emoji-span": any;
+        "post-highlight": any;
+        "product-price": any;
+        "share-button": any;
+
+        "mini-calendar-events": any;
+        "calendar-events": any;
+        "create-event": any;
+        "vflex-div": any;
+        "post-item": any;
+
+        "post-comment": any;
+        "comment-date": any;
+        "comment-body": any;
+
+        "video-preview": any;
+        "video-grid": any;
+        "video-page": any;
+
+        "carousel-slider": any;
+        "type-writer": any;
+            "flip-box": any;
+            "image-gallery": any;
+            "image-grid": any;
+            "inject": any;
+            "inline-svg": any;
+
+            "marquee-text": any;
+            "pdf-flip-book": any;
+            "pdf-viewer": any;
+            "scroll-aware": any;
+            "video-player": any;
+            "ui-guides": any;
+            "h-guide": any;
+            "v-guide": any;
+            "selected-element": any;
+
+            "multi-value": any;
+            "tool-preview": any;
+            "studio-layers": any;
+            "layer-item": any;
+            "layer-children": any;
+            "home-page":any;
+
+    }
+}

package/src/web/page/home/HomePage.tsx

@@ -1,17 +1,7 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-namespace */
 import XNode from "@web-atoms/core/dist/core/XNode";
 import { ContentPage, isMobileView } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import PositronInBrowser from "@positron-js/context/dist/PositronInBrowser";
 
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "home-page":any;
-        }
-    }
-}
-
 import "./HomePage.global.css";
 import MenuService from "../../../common/menu/MenuService";
 import PageNavigator from "@web-atoms/web-controls/dist/PageNavigator";