@gem-sdk/core 1.23.0-staging.345 → 1.23.0-staging.348

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -13,9 +13,9 @@ require('../hooks/useCartUI.js');
 var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
 var Tooltip = require('./toolbar/Tooltip.js');
 var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
+var Resize = require('./resize/Resize.js');
 require('../helpers/convert.js');
 
-// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -454,6 +454,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
+                ...props
             })
         ]
     });

package/dist/cjs/components/resize/Resize.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Spacing = require('./Spacing.js');
+
+function Resize(props) {
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
+            ...props
+        })
+    });
+}
+
+exports.default = Resize;

package/dist/cjs/components/resize/Spacing.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('zustand');
+var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
+require('swr');
+require('@gem-sdk/adapter-shopify');
+require('swr/mutation');
+require('vanilla-lazyload');
+require('../../hooks/useCartUI.js');
+require('react-transition-group');
+require('@gem-sdk/core');
+require('../../helpers/convert.js');
+
+function Spacing(props) {
+    const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const $bottomDrag = react.useRef(null);
+    const $bottomBg = react.useRef(null);
+    const delayMouseMove = react.useRef(null);
+    const isDragging = react.useRef(false);
+    const startY = react.useRef(0);
+    const marginBottom = react.useRef(0);
+    const getNewValueMargin = (event)=>{
+        const top = event.clientY;
+        const diffY = Math.ceil(top - startY.current);
+        const currentValue = marginBottom.current || 0;
+        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
+        return {
+            newValue
+        };
+    };
+    const onMouseMoveDocument = (event)=>{
+        if ($bottomDrag.current && $bottomBg.current) {
+            // $bottomDrag.current.
+            const { newValue } = getNewValueMargin(event);
+            $bottomBg.current.style.height = newValue;
+            $bottomDrag.current.style.top = newValue;
+            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
+            if ($component) {
+                $component.style.marginBottom = newValue;
+            }
+        }
+    };
+    const onMouseUpDocument = ()=>{
+        endDrag();
+    };
+    const startDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        delayMouseMove.current = setTimeout(()=>{
+            isDragging.current = true;
+            const event = new CustomEvent('editor:toolbar:resize-spacing', {
+                bubbles: true,
+                detail: {
+                    value: true
+                }
+            });
+            window.dispatchEvent(event);
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        const event = new CustomEvent('editor:toolbar:resize-spacing', {
+            bubbles: true,
+            detail: {
+                value: false
+            }
+        });
+        window.dispatchEvent(event);
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            const marginBottom = style.top;
+            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    marginBottom
+                }
+            });
+            window.dispatchEvent(event);
+        }
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            $component.style.marginBottom = '';
+        }
+        document.removeEventListener('mousemove', onMouseMoveDocument);
+        document.removeEventListener('mouseup', onMouseUpDocument);
+    };
+    const onMouseDown = (event)=>{
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+    };
+    const onMouseUp = ()=>{
+        endDrag();
+    };
+    const getChildrenByAttrSelector = ($el, attrSelector)=>{
+        const childLen = $el.children.length;
+        if (childLen) {
+            for(let i = 0; i < childLen; i++){
+                const children = $el.children[i];
+                if (children) {
+                    const is = children.getAttribute(attrSelector);
+                    if (is) {
+                        return children;
+                    }
+                }
+            }
+        }
+    };
+    const isLayoutElement = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Row' || tag === 'Product';
+    };
+    const updateSpacing = react.useCallback(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if (!$component) return;
+        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        if (!toolbar) return;
+        const isActive = toolbar.getAttribute('data-toolbar-active');
+        if (!isActive) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            if ($bottomBg.current && $bottomDrag.current) {
+                let value = style.marginBottom;
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
+                $bottomBg.current.style.height = value;
+                $bottomDrag.current.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bottomBg.current.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bottomBg.current.style.left = leftValue;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    react.useEffect(()=>{
+        updateSpacing();
+    });
+    react.useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+        window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+            window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        };
+    }, [
+        updateSpacing
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "absolute w-full bottom-0",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            "data-spacing-margin-bottom-value": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+
+exports.default = Spacing;

package/dist/esm/components/ComponentToolbarPreview.js

@@ -11,9 +11,9 @@ import '../hooks/useCartUI.js';
 import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
 import Tooltip from './toolbar/Tooltip.js';
 import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
+import Resize from './resize/Resize.js';
 import '../helpers/convert.js';
 
-// import Resize from './resize/Resize';
 const SECTION_LIMIT = 25;
 const notVisible = (el)=>{
     const overflow = getComputedStyle(el).overflow;
@@ -452,6 +452,9 @@ const ComponentToolbarPreview = ({ ...props })=>{
                         })
                     })
                 ]
+            }),
+            /*#__PURE__*/ jsx(Resize, {
+                ...props
             })
         ]
     });

package/dist/esm/components/resize/Resize.js

@@ -0,0 +1,12 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import Spacing from './Spacing.js';
+
+function Resize(props) {
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Spacing, {
+            ...props
+        })
+    });
+}
+
+export { Resize as default };

package/dist/esm/components/resize/Spacing.js

@@ -0,0 +1,191 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import 'zustand';
+import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
+import 'swr';
+import '@gem-sdk/adapter-shopify';
+import 'swr/mutation';
+import 'vanilla-lazyload';
+import '../../hooks/useCartUI.js';
+import 'react-transition-group';
+import '@gem-sdk/core';
+import '../../helpers/convert.js';
+
+function Spacing(props) {
+    const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
+    const $bottomDrag = useRef(null);
+    const $bottomBg = useRef(null);
+    const delayMouseMove = useRef(null);
+    const isDragging = useRef(false);
+    const startY = useRef(0);
+    const marginBottom = useRef(0);
+    const getNewValueMargin = (event)=>{
+        const top = event.clientY;
+        const diffY = Math.ceil(top - startY.current);
+        const currentValue = marginBottom.current || 0;
+        const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
+        return {
+            newValue
+        };
+    };
+    const onMouseMoveDocument = (event)=>{
+        if ($bottomDrag.current && $bottomBg.current) {
+            // $bottomDrag.current.
+            const { newValue } = getNewValueMargin(event);
+            $bottomBg.current.style.height = newValue;
+            $bottomDrag.current.style.top = newValue;
+            const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
+            if ($component) {
+                $component.style.marginBottom = newValue;
+            }
+        }
+    };
+    const onMouseUpDocument = ()=>{
+        endDrag();
+    };
+    const startDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        delayMouseMove.current = setTimeout(()=>{
+            isDragging.current = true;
+            const event = new CustomEvent('editor:toolbar:resize-spacing', {
+                bubbles: true,
+                detail: {
+                    value: true
+                }
+            });
+            window.dispatchEvent(event);
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        const event = new CustomEvent('editor:toolbar:resize-spacing', {
+            bubbles: true,
+            detail: {
+                value: false
+            }
+        });
+        window.dispatchEvent(event);
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            const marginBottom = style.top;
+            const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
+                bubbles: true,
+                detail: {
+                    componentUid: props.uid,
+                    marginBottom
+                }
+            });
+            window.dispatchEvent(event);
+        }
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if ($component) {
+            $component.style.marginBottom = '';
+        }
+        document.removeEventListener('mousemove', onMouseMoveDocument);
+        document.removeEventListener('mouseup', onMouseUpDocument);
+    };
+    const onMouseDown = (event)=>{
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+    };
+    const onMouseUp = ()=>{
+        endDrag();
+    };
+    const getChildrenByAttrSelector = ($el, attrSelector)=>{
+        const childLen = $el.children.length;
+        if (childLen) {
+            for(let i = 0; i < childLen; i++){
+                const children = $el.children[i];
+                if (children) {
+                    const is = children.getAttribute(attrSelector);
+                    if (is) {
+                        return children;
+                    }
+                }
+            }
+        }
+    };
+    const isLayoutElement = (el)=>{
+        const tag = el.getAttribute('data-component-tag');
+        return tag === 'Row' || tag === 'Product';
+    };
+    const updateSpacing = useCallback(()=>{
+        const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
+        if (!$component) return;
+        const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
+        if (!toolbar) return;
+        const isActive = toolbar.getAttribute('data-toolbar-active');
+        if (!isActive) return;
+        const style = getComputedStyle($component);
+        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
+        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
+        if ($marginBottom) {
+            if ($bottomBg.current && $bottomDrag.current) {
+                let value = style.marginBottom;
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
+                $bottomBg.current.style.height = value;
+                $bottomDrag.current.style.top = value;
+                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bottomBg.current.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bottomBg.current.style.left = leftValue;
+                    $bottomDrag.current.style.transform = translateCss;
+                }
+            }
+        }
+    }, []);
+    useEffect(()=>{
+        updateSpacing();
+    });
+    useEffect(()=>{
+        window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+        window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        return ()=>{
+            window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
+            window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
+        };
+    }, [
+        updateSpacing
+    ]);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            className: "absolute w-full bottom-0",
+            children: /*#__PURE__*/ jsxs("div", {
+                "data-spacing-margin-bottom": true,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "data-spacing-margin-bottom-bg": true,
+                        ref: $bottomBg,
+                        children: /*#__PURE__*/ jsx("div", {
+                            "data-spacing-margin-bottom-value": true
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        ref: $bottomDrag,
+                        "data-spacing-margin-bottom-drag": true,
+                        onMouseDown: onMouseDown,
+                        onMouseUp: onMouseUp,
+                        role: "presentation"
+                    })
+                ]
+            })
+        })
+    });
+}
+
+export { Spacing as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "1.23.0-staging.345",
+  "version": "1.23.0-staging.348",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",