labellife-design-tool 2.2.9 → 2.3.1

package/dist/esm/toolbar/toolbar.js

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, memo, useRef, useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
-import { Autocomplete, TextField, Divider, Tooltip, IconButton, ToggleButtonGroup, ToggleButton, Button, Menu, MenuItem, ListItemIcon, ListItemText, Box, Typography, Slider, Popover, Select, CircularProgress } from '@mui/material';
+import { Autocomplete, TextField, Divider, Tooltip, IconButton, ToggleButtonGroup, ToggleButton, Button, Menu, MenuItem, ListItemIcon, ListItemText, Box, Typography, Popover, Slider, Select, CircularProgress } from '@mui/material';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import UndoIcon from '@mui/icons-material/Undo';
@@ -23,6 +23,15 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
+import OpenWithIcon from '@mui/icons-material/OpenWith';
+import '@mui/icons-material/AlignHorizontalLeft';
+import '@mui/icons-material/AlignHorizontalCenter';
+import '@mui/icons-material/AlignHorizontalRight';
+import '@mui/icons-material/AlignVerticalTop';
+import '@mui/icons-material/AlignVerticalCenter';
+import '@mui/icons-material/AlignVerticalBottom';
+import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function _arrayLikeToArray(r, a) {
@@ -384,6 +393,21 @@ if (typeof window !== 'undefined' && !window[INPUT_FIELDS_CONFIG_KEY]) {
 }
 
 var _excluded = ["fontFamily"];
+var _positionMenuItemSx = {
+  textTransform: 'none',
+  fontSize: 12,
+  fontWeight: 400,
+  color: '#333',
+  justifyContent: 'flex-start',
+  px: 1,
+  py: 0.6,
+  minWidth: 0,
+  '&:hover': {
+    backgroundColor: 'rgba(13,131,205,0.08)'
+  }
+};
+
+// ── Font preview: lightweight Google Font subsets for dropdown ──
 var _fontPreviewLoaded = new Set();
 function loadFontPreview(fontFamily) {
   if (_fontPreviewLoaded.has(fontFamily)) return;
@@ -1064,10 +1088,270 @@ var LineToolbar = observer(function (_ref7) {
   });
 });
 
-// Common controls for all element types
-var CommonControls = observer(function (_ref8) {
+// Position + alignment popover button
+var PositionButton = observer(function (_ref8) {
   var element = _ref8.element,
     store = _ref8.store;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var open = Boolean(anchorEl);
+  var pageW = store.width;
+  var pageH = store.height;
+  var alignEl = function alignEl(xVal, yVal) {
+    var attrs = {};
+    if (xVal !== null) attrs.x = xVal;
+    if (yVal !== null) attrs.y = yVal;
+    element.set(attrs);
+    store.history.addUndoState();
+  };
+  var layer = function layer(fn) {
+    fn();
+    store.history.addUndoState();
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button, {
+      size: "small",
+      onClick: function onClick(e) {
+        return setAnchorEl(e.currentTarget);
+      },
+      startIcon: /*#__PURE__*/jsx(OpenWithIcon, {
+        sx: {
+          fontSize: '16px !important'
+        }
+      }),
+      sx: _objectSpread2({
+        textTransform: 'none',
+        fontSize: 12,
+        whiteSpace: 'nowrap',
+        px: 1.5,
+        minWidth: 'auto'
+      }, open ? {
+        backgroundColor: '#e3f2fd',
+        color: '#0d83cd'
+      } : {}),
+      children: t('toolbar.position', 'Position')
+    }), /*#__PURE__*/jsxs(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: function onClose() {
+        return setAnchorEl(null);
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      slotProps: {
+        paper: {
+          sx: {
+            mt: 0.5,
+            p: 2,
+            width: 300,
+            borderRadius: '10px',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.12)'
+          }
+        }
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          fontWeight: 700,
+          color: '#111',
+          display: 'block',
+          mb: 1,
+          fontSize: 12
+        },
+        children: t('toolbar.layering', 'Layer order')
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 0.5,
+          mb: 2
+        },
+        children: [/*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(ArrowUpwardIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveUp();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.up', 'Up')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(ArrowDownwardIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveDown();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.down', 'Down')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(VerticalAlignTopIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveTop();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.toForward', 'To front')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(VerticalAlignBottomIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveBottom();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.toBottom', 'To back')
+        })]
+      }), /*#__PURE__*/jsx(Divider, {
+        sx: {
+          mb: 1.5
+        }
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          fontWeight: 700,
+          color: '#111',
+          display: 'block',
+          mb: 1,
+          fontSize: 12
+        },
+        children: t('toolbar.position', 'Position')
+      }), function () {
+        var cx = (pageW - element.width) / 2;
+        var cy = (pageH - element.height) / 2;
+        var rx = pageW - element.width;
+        var by = pageH - element.height;
+        var positions = [{
+          label: 'Top left',
+          x: 0,
+          y: 0,
+          row: 0,
+          col: 0
+        }, {
+          label: 'Top center',
+          x: cx,
+          y: 0,
+          row: 0,
+          col: 1
+        }, {
+          label: 'Top right',
+          x: rx,
+          y: 0,
+          row: 0,
+          col: 2
+        }, {
+          label: 'Middle left',
+          x: 0,
+          y: cy,
+          row: 1,
+          col: 0
+        }, {
+          label: 'Center',
+          x: cx,
+          y: cy,
+          row: 1,
+          col: 1
+        }, {
+          label: 'Middle right',
+          x: rx,
+          y: cy,
+          row: 1,
+          col: 2
+        }, {
+          label: 'Bottom left',
+          x: 0,
+          y: by,
+          row: 2,
+          col: 0
+        }, {
+          label: 'Bottom center',
+          x: cx,
+          y: by,
+          row: 2,
+          col: 1
+        }, {
+          label: 'Bottom right',
+          x: rx,
+          y: by,
+          row: 2,
+          col: 2
+        }];
+        return /*#__PURE__*/jsx(Box, {
+          sx: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 0.5
+          },
+          children: positions.map(function (_ref9) {
+            var label = _ref9.label,
+              x = _ref9.x,
+              y = _ref9.y;
+            return /*#__PURE__*/jsx(Tooltip, {
+              title: label,
+              placement: "top",
+              children: /*#__PURE__*/jsx(IconButton, {
+                size: "small",
+                onClick: function onClick() {
+                  return alignEl(x, y);
+                },
+                sx: {
+                  borderRadius: '6px',
+                  border: '1px solid #e0e0e0',
+                  p: 0.75,
+                  '&:hover': {
+                    backgroundColor: 'rgba(13,131,205,0.08)',
+                    borderColor: '#0d83cd'
+                  }
+                },
+                children: /*#__PURE__*/jsx(Box, {
+                  sx: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, 5px)',
+                    gap: '2px'
+                  },
+                  children: [0, 1, 2].map(function (r) {
+                    return [0, 1, 2].map(function (c) {
+                      return /*#__PURE__*/jsx(Box, {
+                        sx: {
+                          width: 5,
+                          height: 5,
+                          borderRadius: '1px',
+                          backgroundColor: r === positions.find(function (p) {
+                            return p.label === label;
+                          }).row && c === positions.find(function (p) {
+                            return p.label === label;
+                          }).col ? '#0d83cd' : '#ccc'
+                        }
+                      }, "".concat(r, "-").concat(c));
+                    });
+                  })
+                })
+              })
+            }, label);
+          })
+        });
+      }()]
+    })]
+  });
+});
+
+// Common controls for all element types
+var CommonControls = observer(function (_ref0) {
+  var element = _ref0.element,
+    store = _ref0.store;
   var isLocked = element.locked;
   var handleDuplicate = function handleDuplicate() {
     if (element.clone) {
@@ -1108,14 +1392,6 @@ var CommonControls = observer(function (_ref8) {
   var handleOpacityCommit = function handleOpacityCommit() {
     store.history.addUndoState();
   };
-  var handleMoveUp = function handleMoveUp() {
-    element.moveUp();
-    store.history.addUndoState();
-  };
-  var handleMoveDown = function handleMoveDown() {
-    element.moveDown();
-    store.history.addUndoState();
-  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Tooltip, {
       title: t('toolbar.opacity', 'Opacity'),
@@ -1150,24 +1426,9 @@ var CommonControls = observer(function (_ref8) {
       sx: {
         mx: 0.5
       }
-    }), /*#__PURE__*/jsx(Tooltip, {
-      title: t('toolbar.up', 'Move up'),
-      children: /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        onClick: handleMoveUp,
-        children: /*#__PURE__*/jsx(ArrowUpwardIcon, {
-          fontSize: "small"
-        })
-      })
-    }), /*#__PURE__*/jsx(Tooltip, {
-      title: t('toolbar.down', 'Move down'),
-      children: /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        onClick: handleMoveDown,
-        children: /*#__PURE__*/jsx(ArrowDownwardIcon, {
-          fontSize: "small"
-        })
-      })
+    }), /*#__PURE__*/jsx(PositionButton, {
+      element: element,
+      store: store
     }), /*#__PURE__*/jsx(Divider, {
       orientation: "vertical",
       flexItem: true,
@@ -1211,26 +1472,26 @@ var CommonControls = observer(function (_ref8) {
 });
 
 // Download button with format/quality popover
-var DefaultDownloadButton = observer(function (_ref9) {
-  var store = _ref9.store;
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    anchorEl = _useState4[0],
-    setAnchorEl = _useState4[1];
-  var _useState5 = useState('png'),
+var DefaultDownloadButton = observer(function (_ref1) {
+  var store = _ref1.store;
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    fileType = _useState6[0],
-    setFileType = _useState6[1];
+    anchorEl = _useState6[0],
+    setAnchorEl = _useState6[1];
+  var _useState7 = useState('png'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fileType = _useState8[0],
+    setFileType = _useState8[1];
   // Default quality so pixelRatio=1 (output = template's own pixel size).
   // qualityToPixelRatio(q) = q * 3, so q = 1/3 → pixelRatio = 1.
-  var _useState7 = useState(1 / 3),
-    _useState8 = _slicedToArray(_useState7, 2),
-    quality = _useState8[0],
-    setQuality = _useState8[1];
-  var _useState9 = useState(false),
+  var _useState9 = useState(1 / 3),
     _useState0 = _slicedToArray(_useState9, 2),
-    exporting = _useState0[0],
-    setExporting = _useState0[1];
+    quality = _useState0[0],
+    setQuality = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    exporting = _useState10[0],
+    setExporting = _useState10[1];
   var open = Boolean(anchorEl);
   var handleClick = function handleClick(e) {
     setAnchorEl(e.currentTarget);
@@ -1463,15 +1724,15 @@ var DefaultDownloadButton = observer(function (_ref9) {
 });
 
 // Import button — loads a JSON template file into the store
-var DefaultImportButton = observer(function (_ref1) {
-  var store = _ref1.store;
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    importing = _useState10[0],
-    setImporting = _useState10[1];
+var DefaultImportButton = observer(function (_ref11) {
+  var store = _ref11.store;
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    importing = _useState12[0],
+    setImporting = _useState12[1];
   var fileInputRef = React.useRef(null);
   var handleFileChange = useCallback(/*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
       var _e$target$files;
       var file, text, jsonData, _t3;
       return _regenerator().w(function (_context2) {
@@ -1509,7 +1770,7 @@ var DefaultImportButton = observer(function (_ref1) {
       }, _callee2, null, [[2, 4, 5, 6]]);
     }));
     return function (_x) {
-      return _ref10.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }(), [store]);
   return /*#__PURE__*/jsxs(Fragment, {
@@ -1575,10 +1836,10 @@ var rowSx = {
     display: 'none'
   }
 };
-var Toolbar = observer(function (_ref11) {
-  var store = _ref11.store,
-    _ref11$components = _ref11.components,
-    components = _ref11$components === void 0 ? {} : _ref11$components;
+var Toolbar = observer(function (_ref13) {
+  var store = _ref13.store,
+    _ref13$components = _ref13.components,
+    components = _ref13$components === void 0 ? {} : _ref13$components;
   var ActionControls = components.ActionControls;
   var ImportButton = 'ImportButton' in components ? components.ImportButton : DefaultImportButton;
   var DownloadButton = 'DownloadButton' in components ? components.DownloadButton : DefaultDownloadButton;