@gem-sdk/core 1.22.31-new-feature.17 → 1.22.31-new-feature.20

package/dist/cjs/components/ComponentToolbarPreview.js

@@ -13,6 +13,7 @@ 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');
 
 const SECTION_LIMIT = 25;
@@ -401,23 +402,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                     })
                 ]
             }),
-            props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                "data-spacing": true,
-                "data-spacing-theme-section": isThemeSectionEditor,
-                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    "data-spacing-margin-bottom": true,
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            "data-spacing-margin-bottom-bg": true,
-                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                "data-spacing-margin-bottom-value": true
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            "data-spacing-margin-bottom-drag": true
-                        })
-                    ]
-                })
+            /*#__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,124 @@
+'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;
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        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)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+        return false;
+    };
+    const onMouseUp = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        endDrag();
+        return false;
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            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,6 +11,7 @@ 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';
 
 const SECTION_LIMIT = 25;
@@ -399,23 +400,8 @@ const ComponentToolbarPreview = ({ ...props })=>{
                     })
                 ]
             }),
-            props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
-                "data-spacing": true,
-                "data-spacing-theme-section": isThemeSectionEditor,
-                children: /*#__PURE__*/ jsxs("div", {
-                    "data-spacing-margin-bottom": true,
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            "data-spacing-margin-bottom-bg": true,
-                            children: /*#__PURE__*/ jsx("div", {
-                                "data-spacing-margin-bottom-value": true
-                            })
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            "data-spacing-margin-bottom-drag": true
-                        })
-                    ]
-                })
+            /*#__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,120 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef } 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;
+            document.addEventListener('mousemove', onMouseMoveDocument);
+            document.addEventListener('mouseup', onMouseUpDocument);
+        }, 100);
+    };
+    const endDrag = ()=>{
+        if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
+        isDragging.current = false;
+        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)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        if ($bottomDrag.current) {
+            const style = getComputedStyle($bottomDrag.current);
+            startY.current = event.clientY;
+            marginBottom.current = parseFloat(style.top);
+            startDrag();
+        }
+        return false;
+    };
+    const onMouseUp = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+        endDrag();
+        return false;
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
+            "data-spacing": true,
+            "data-spacing-theme-section": isThemeSectionEditor,
+            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.22.31-new-feature.17",
+  "version": "1.22.31-new-feature.20",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
   },
   "devDependencies": {
     "@gem-sdk/adapter-shopify": "1.22.31-staging.0",
-    "@gem-sdk/styles": "1.22.31-new-feature.17"
+    "@gem-sdk/styles": "1.22.31-new-feature.18"
   },
   "dependencies": {
     "react-error-boundary": "4.0.10",