@arbisoft/react-design-tool
Version:
Arbisoft design tool library
8,378 lines • 439 kB
JavaScript
import React, { useCallback, useMemo, useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
import PropTypes, { element } from 'prop-types';
import styled, { css, keyframes, StyleSheetManager } from 'styled-components';
import { createPortal } from 'react-dom';
import { Image as Image$1, Group, Rect, Text, Line, Star, Path, RegularPolygon, Arrow, Circle, Stage, Layer, Transformer } from 'react-konva';
import Konva from 'konva';
import QRCode from 'qrcode';
import { Html } from 'react-konva-utils';
function _arrayLikeToArray(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithHoles(r) {
if (Array.isArray(r)) return r;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray(r);
}
function asyncGeneratorStep(n, t, e, r, o, a, c) {
try {
var i = n[a](c),
u = i.value;
} catch (n) {
return void e(n);
}
i.done ? t(u) : Promise.resolve(u).then(r, o);
}
function _asyncToGenerator(n) {
return function () {
var t = this,
e = arguments;
return new Promise(function (r, o) {
var a = n.apply(t, e);
function _next(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
}
function _throw(n) {
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
}
_next(void 0);
});
};
}
function _createForOfIteratorHelper(r, e) {
var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (!t) {
if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
t && (r = t);
var n = 0,
F = function () {};
return {
s: F,
n: function () {
return n >= r.length ? {
done: true
} : {
done: false,
value: r[n++]
};
},
e: function (r) {
throw r;
},
f: F
};
}
throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var o,
a = true,
u = false;
return {
s: function () {
t = t.call(r);
},
n: function () {
var r = t.next();
return a = r.done, r;
},
e: function (r) {
u = true, o = r;
},
f: function () {
try {
a || null == t.return || t.return();
} finally {
if (u) throw o;
}
}
};
}
function _defineProperty(e, r, t) {
return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _extends() {
return _extends = Object.assign ? Object.assign.bind() : function (n) {
for (var e = 1; e < arguments.length; e++) {
var t = arguments[e];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
}
return n;
}, _extends.apply(null, arguments);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = true,
o = false;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = true, n = r;
} finally {
try {
if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _objectDestructuringEmpty(t) {
if (null == t) throw new TypeError("Cannot destructure " + t);
}
function ownKeys(e, r) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var o = Object.getOwnPropertySymbols(e);
r && (o = o.filter(function (r) {
return Object.getOwnPropertyDescriptor(e, r).enumerable;
})), t.push.apply(t, o);
}
return t;
}
function _objectSpread2(e) {
for (var r = 1; r < arguments.length; r++) {
var t = null != arguments[r] ? arguments[r] : {};
r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
_defineProperty(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _regenerator() {
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
var e,
t,
r = "function" == typeof Symbol ? Symbol : {},
n = r.iterator || "@@iterator",
o = r.toStringTag || "@@toStringTag";
function i(r, n, o, i) {
var c = n && n.prototype instanceof Generator ? n : Generator,
u = Object.create(c.prototype);
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
var i,
c,
u,
f = 0,
p = o || [],
y = false,
G = {
p: 0,
n: 0,
v: e,
a: d,
f: d.bind(e, 4),
d: function (t, r) {
return i = t, c = 0, u = e, G.n = r, a;
}
};
function d(r, n) {
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
var o,
i = p[t],
d = G.p,
l = i[2];
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
}
if (o || r > 1) return a;
throw y = true, n;
}
return function (o, p, l) {
if (f > 1) throw TypeError("Generator is already running");
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
try {
if (f = 2, i) {
if (c || (o = "next"), t = i[o]) {
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
if (!t.done) return t;
u = t.value, c < 2 && (c = 0);
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
i = e;
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
} catch (t) {
i = e, c = 1, u = t;
} finally {
f = 1;
}
}
return {
value: t,
done: y
};
};
}(r, o, i), true), u;
}
var a = {};
function Generator() {}
function GeneratorFunction() {}
function GeneratorFunctionPrototype() {}
t = Object.getPrototypeOf;
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
return this;
}), t),
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
function f(e) {
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
}
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
return this;
}), _regeneratorDefine(u, "toString", function () {
return "[object Generator]";
}), (_regenerator = function () {
return {
w: i,
m: f
};
})();
}
function _regeneratorDefine(e, r, n, t) {
var i = Object.defineProperty;
try {
i({}, "", {});
} catch (e) {
i = 0;
}
_regeneratorDefine = function (e, r, n, t) {
function o(r, n) {
_regeneratorDefine(e, r, function (e) {
return this._invoke(r, n, e);
});
}
r ? i ? i(e, r, {
value: n,
enumerable: !t,
configurable: !t,
writable: !t
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
}, _regeneratorDefine(e, r, n, t);
}
function _slicedToArray(r, e) {
return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
}
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
}
function _toPrimitive(t, r) {
if ("object" != typeof t || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != typeof i) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function _toPropertyKey(t) {
var i = _toPrimitive(t, "string");
return "symbol" == typeof i ? i : i + "";
}
function _unsupportedIterableToArray(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
}
}
var propTypes$z = {
title: PropTypes.string,
languageLocale: PropTypes.string,
elementsList: PropTypes.array,
customImages: PropTypes.array,
defaultImages: PropTypes.array,
disableWhiteLabel: PropTypes.bool,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array,
templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst']),
askDeleteConfirmation: PropTypes.bool,
showOutsideBoundaryPreview: PropTypes.bool,
outsideBoundaryPreviewPadding: PropTypes.number,
qrLink: PropTypes.string,
styleProps: PropTypes.object,
defaultText: PropTypes.string,
onSave: PropTypes.func,
saveButtonText: PropTypes.string,
locale: PropTypes.oneOf(['en', 'ru', 'pl', 'de', 'es', 'fr', 'it']),
canvasSize: PropTypes.shape({
mode: PropTypes.oneOf(['preset', 'custom']),
preset: PropTypes.string,
widthMm: PropTypes.number,
heightMm: PropTypes.number
}),
onCanvasSizeChange: PropTypes.func
};
/**
* palette contains the basic colors set
*/
var palette = {
primary: '#5F98D0',
secondary: '#F9FAFB',
gray_700: '#344054',
white: '#FFFFFF',
white_F5F5F5: '#F5F5F5',
white_F7F7F7: '#F7F7F7',
gray_535354: '#535354',
gray_545454: '#545454',
gray_646464: '#646464',
gray_200: '#E4E7EC',
gray_788899: '#788899',
icon_gray: '#4D6277',
gray_B8B8B8: '#B8B8B8',
gray_25: '#FCFCFD',
gray_7A7979: '#7A7979',
gray_E8E8E8: '#E8E8E8',
gray_EAEAEA: '#EAEAEA',
gray_CCC: '#CCC',
gray_F2F2F2: '#F2F2F2',
gray_FDFCFC: '#FDFCFC',
gray_EDEDED: '#EDEDED',
gray_FBFBFB: '#FBFBFB',
gray_F5F6F6: '#F5F6F6',
gray_A1A1A1: '#A1A1A1',
gray_F0F2F7: '#F0F2F7',
gray_333: '#333333',
gray_EFEFEF: '#EFEFEF',
gray_9DA1A7: '#9DA1A7',
green_80D965: '#80D965',
black: '#000000',
black_transparent: 'rgba(0,0,0,0.4)'
};
var color = _objectSpread2({}, palette);
var fonts = {
primary: 'Plus Jakarta Sans, sans-serif',
secondary: 'Inter, sans-serif'};
var fontWeights = {
300: 300,
400: 400,
500: 500,
600: 600,
700: 700};
var theme = {
color: color,
fonts: fonts,
fontWeights: fontWeights
};
var _templateObject$u;
var StudioWrapper = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex: 1;\n flex-direction: row;\n overflow: hidden;\n height: 100%;\n width: 100%;\n position: relative;\n"])), theme.color.white);
var propTypes$y = {
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onClickPill: PropTypes.func,
languageLocale: PropTypes.string,
disableWhiteLabel: PropTypes.bool,
styleProps: PropTypes.object
};
var _templateObject$t;
var SideBarWrapper$1 = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n background-color: ", ";\n display: flex;\n flex-direction: column;\n width: 100px;\n overflow: auto;\n"])), theme.color.white);
var propTypes$x = {
isSelected: PropTypes.bool,
onClick: PropTypes.func,
icon: PropTypes.node,
text: PropTypes.string,
pillActiveColor: PropTypes.string
};
var _templateObject$s, _templateObject2$m, _templateObject3$c;
var SideBarItem = styled.div(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100px;\n min-height: 100px;\n background-color: ", ";\n margin-bottom: 2px;\n cursor: pointer;\n transition: background-color 0.2s ease-in-out;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_ref) {
var isSelected = _ref.isSelected,
pillActiveColor = _ref.pillActiveColor;
return isSelected ? pillActiveColor : theme.color.secondary;
}, function (_ref2) {
var pillActiveColor = _ref2.pillActiveColor;
return pillActiveColor;
});
var SideBarIcon = styled.img(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n height: 28px;\n width: 28px;\n object-fit: contain;\n margin-bottom: 8px;\n filter: ", ";\n\n ", ":hover & {\n filter: brightness(0) invert(1);\n }\n"])), function (_ref3) {
var _ref3$isSelected = _ref3.isSelected,
isSelected = _ref3$isSelected === void 0 ? false : _ref3$isSelected;
return isSelected ? 'brightness(0) invert(1)' : 'none';
}, SideBarItem);
var SideBarText = styled.p(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n font-family: ", ";\n font-weight: ", ";\n line-height: 109.023%;\n text-align: center;\n\n ", ":hover & {\n color: ", ";\n }\n"])), function (_ref4) {
var _ref4$isSelected = _ref4.isSelected,
isSelected = _ref4$isSelected === void 0 ? false : _ref4$isSelected;
return isSelected ? theme.color.white : theme.color.gray_535354;
}, theme.fonts.primary, theme.fontWeights[400], SideBarItem, theme.color.white);
var SideBarPill = function SideBarPill(_ref) {
var _ref$isSelected = _ref.isSelected,
isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
_ref$onClick = _ref.onClick,
_onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
icon = _ref.icon,
text = _ref.text,
pillActiveColor = _ref.pillActiveColor,
id = _ref.id;
return /*#__PURE__*/React.createElement(SideBarItem, {
key: id,
isSelected: isSelected,
onClick: function onClick() {
return _onClick();
},
pillActiveColor: pillActiveColor || theme.color.primary
}, /*#__PURE__*/React.createElement(SideBarIcon, {
src: icon,
isSelected: isSelected
}), /*#__PURE__*/React.createElement(SideBarText, {
isSelected: isSelected
}, text));
};
SideBarPill.propTypes = propTypes$x;
var IconTemplate = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22layout-dashboard%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.66683%202.83337C3.37816%202.83337%202.3335%203.87804%202.3335%205.16671V13.3334C2.3335%2014.622%203.37816%2015.6667%204.66683%2015.6667H10.5002C11.7888%2015.6667%2012.8335%2014.622%2012.8335%2013.3334V5.16671C12.8335%203.87804%2011.7888%202.83337%2010.5002%202.83337H4.66683ZM4.66683%205.16671H10.5002V13.3334H4.66683V5.16671Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M17.5002%202.83337C16.2115%202.83337%2015.1668%203.87804%2015.1668%205.16671V8.66671C15.1668%209.95537%2016.2115%2011%2017.5002%2011H23.3335C24.6222%2011%2025.6668%209.95537%2025.6668%208.66671V5.16671C25.6668%203.87804%2024.6222%202.83337%2023.3335%202.83337H17.5002ZM17.5002%205.16671H23.3335V8.66671H17.5002V5.16671Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M15.1668%2015.6667C15.1668%2014.378%2016.2115%2013.3334%2017.5002%2013.3334H23.3335C24.6222%2013.3334%2025.6668%2014.378%2025.6668%2015.6667V23.8334C25.6668%2025.122%2024.6222%2026.1667%2023.3335%2026.1667H17.5002C16.2115%2026.1667%2015.1668%2025.122%2015.1668%2023.8334V15.6667ZM23.3335%2015.6667H17.5002V23.8334H23.3335V15.6667Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.66683%2018C3.37816%2018%202.3335%2019.0447%202.3335%2020.3334V23.8334C2.3335%2025.122%203.37816%2026.1667%204.66683%2026.1667H10.5002C11.7888%2026.1667%2012.8335%2025.122%2012.8335%2023.8334V20.3334C12.8335%2019.0447%2011.7888%2018%2010.5002%2018H4.66683ZM4.66683%2020.3334H10.5002V23.8334H4.66683V20.3334Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconImage = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M22.1667%204H5.83333C4.54467%204%203.5%205.04467%203.5%206.33333V22.6667C3.5%2023.9553%204.54467%2025%205.83333%2025H22.1667C23.4553%2025%2024.5%2023.9553%2024.5%2022.6667V6.33333C24.5%205.04467%2023.4553%204%2022.1667%204Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M10.4998%2013.3334C11.7885%2013.3334%2012.8332%2012.2887%2012.8332%2011C12.8332%209.71136%2011.7885%208.66669%2010.4998%208.66669C9.21117%208.66669%208.1665%209.71136%208.1665%2011C8.1665%2012.2887%209.21117%2013.3334%2010.4998%2013.3334Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M24.5%2018L20.8997%2014.3997C20.4621%2013.9622%2019.8687%2013.7165%2019.25%2013.7165C18.6313%2013.7165%2018.0379%2013.9622%2017.6003%2014.3997L7%2025%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconQrCode = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22heroicons-solid%2Fqr-code%22%3E%3Cpath%20id%3D%22Vector%20%28Stroke%29%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%205C2%203.61929%203.11929%202.5%204.5%202.5H10.5C11.8807%202.5%2013%203.61929%2013%205V11C13%2012.3807%2011.8807%2013.5%2010.5%2013.5H4.5C3.11929%2013.5%202%2012.3807%202%2011V5ZM4.5%204.5C4.22386%204.5%204%204.72386%204%205V11C4%2011.2761%204.22386%2011.5%204.5%2011.5H10.5C10.7761%2011.5%2011%2011.2761%2011%2011V5C11%204.72386%2010.7761%204.5%2010.5%204.5H4.5ZM15%205C15%203.61929%2016.1193%202.5%2017.5%202.5H23.5C24.8807%202.5%2026%203.61929%2026%205V11C26%2012.3807%2024.8807%2013.5%2023.5%2013.5H17.5C16.1193%2013.5%2015%2012.3807%2015%2011V5ZM17.5%204.5C17.2239%204.5%2017%204.72386%2017%205V11C17%2011.2761%2017.2239%2011.5%2017.5%2011.5H23.5C23.7761%2011.5%2024%2011.2761%2024%2011V5C24%204.72386%2023.7761%204.5%2023.5%204.5H17.5ZM6%207.5C6%206.94772%206.44772%206.5%207%206.5H8C8.55228%206.5%209%206.94772%209%207.5V8.5C9%209.05228%208.55228%209.5%208%209.5H7C6.44772%209.5%206%209.05228%206%208.5V7.5ZM19%207.5C19%206.94772%2019.4477%206.5%2020%206.5H21C21.5523%206.5%2022%206.94772%2022%207.5V8.5C22%209.05228%2021.5523%209.5%2021%209.5H20C19.4477%209.5%2019%209.05228%2019%208.5V7.5ZM2%2018C2%2016.6193%203.11929%2015.5%204.5%2015.5H10.5C11.8807%2015.5%2013%2016.6193%2013%2018V24C13%2025.3807%2011.8807%2026.5%2010.5%2026.5H4.5C3.11929%2026.5%202%2025.3807%202%2024V18ZM4.5%2017.5C4.22386%2017.5%204%2017.7239%204%2018V24C4%2024.2761%204.22386%2024.5%204.5%2024.5H10.5C10.7761%2024.5%2011%2024.2761%2011%2024V18C11%2017.7239%2010.7761%2017.5%2010.5%2017.5H4.5ZM15%2016.5C15%2015.9477%2015.4477%2015.5%2016%2015.5H17C17.5523%2015.5%2018%2015.9477%2018%2016.5V17.5C18%2018.0523%2017.5523%2018.5%2017%2018.5H16C15.4477%2018.5%2015%2018.0523%2015%2017.5V16.5ZM23%2016.5C23%2015.9477%2023.4477%2015.5%2024%2015.5H25C25.5523%2015.5%2026%2015.9477%2026%2016.5V17.5C26%2018.0523%2025.5523%2018.5%2025%2018.5H24C23.4477%2018.5%2023%2018.0523%2023%2017.5V16.5ZM6%2020.5C6%2019.9477%206.44772%2019.5%207%2019.5H8C8.55228%2019.5%209%2019.9477%209%2020.5V21.5C9%2022.0523%208.55228%2022.5%208%2022.5H7C6.44772%2022.5%206%2022.0523%206%2021.5V20.5ZM19%2020.5C19%2019.9477%2019.4477%2019.5%2020%2019.5H21C21.5523%2019.5%2022%2019.9477%2022%2020.5V21.5C22%2022.0523%2021.5523%2022.5%2021%2022.5H20C19.4477%2022.5%2019%2022.0523%2019%2021.5V20.5ZM15%2024.5C15%2023.9477%2015.4477%2023.5%2016%2023.5H17C17.5523%2023.5%2018%2023.9477%2018%2024.5V25.5C18%2026.0523%2017.5523%2026.5%2017%2026.5H16C15.4477%2026.5%2015%2026.0523%2015%2025.5V24.5ZM23%2024.5C23%2023.9477%2023.4477%2023.5%2024%2023.5H25C25.5523%2023.5%2026%2023.9477%2026%2024.5V25.5C26%2026.0523%2025.5523%2026.5%2025%2026.5H24C23.4477%2026.5%2023%2026.0523%2023%2025.5V24.5Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconShape = "data:image/svg+xml,%3Csvg%20width%3D%2226%22%20height%3D%2227%22%20viewBox%3D%220%200%2026%2027%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.8996%200.305068C13.2791%200.29145%2013.6556%200.376085%2013.9926%200.55077C14.3297%200.725456%2014.616%200.984266%2014.8236%201.30211L14.8386%201.32569L19.6238%209.0076C19.8397%209.33005%2019.9667%209.70402%2019.9917%2010.0917C20.0176%2010.4929%2019.9332%2010.8935%2019.7477%2011.2502C19.5623%2011.6068%2019.2828%2011.906%2018.9395%2012.1152C18.5963%2012.3244%2018.2023%2012.4358%2017.8003%2012.4372L17.7958%2012.4372H8.19452C7.8032%2012.4509%207.41501%2012.3601%207.07005%2012.1737C6.71246%2011.9806%206.41525%2011.6923%206.21129%2011.3407C6.00733%2010.9892%205.90457%2010.588%205.91436%2010.1817C5.92407%209.77863%206.0442%209.38598%206.26157%209.04651L11.0735%201.39989C11.2568%201.08451%2011.5157%200.819365%2011.8271%200.628499C12.1508%200.430098%2012.5202%200.318687%2012.8996%200.305068ZM12.9777%203.24166L8.82255%209.84459H17.0908L12.9777%203.24166Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%2017.6223C0%2016.1905%201.16074%2015.0297%202.59259%2015.0297H9.07407C10.5059%2015.0297%2011.6667%2016.1905%2011.6667%2017.6223V24.1038C11.6667%2025.5356%2010.5059%2026.6964%209.07407%2026.6964H2.59259C1.16074%2026.6964%200%2025.5356%200%2024.1038V17.6223ZM9.07407%2017.6223H2.59259V24.1038H9.07407V17.6223Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.0926%2015.0297C16.8709%2015.0297%2014.2593%2017.6414%2014.2593%2020.863C14.2593%2024.0847%2016.8709%2026.6964%2020.0926%2026.6964C23.3143%2026.6964%2025.9259%2024.0847%2025.9259%2020.863C25.9259%2017.6414%2023.3143%2015.0297%2020.0926%2015.0297ZM16.8519%2020.863C16.8519%2019.0732%2018.3028%2017.6223%2020.0926%2017.6223C21.8824%2017.6223%2023.3333%2019.0732%2023.3333%2020.863C23.3333%2022.6529%2021.8824%2024.1038%2020.0926%2024.1038C18.3028%2024.1038%2016.8519%2022.6529%2016.8519%2020.863Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconText = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.81277%2024.83C11.0728%2024.63%2011.8428%2024.43%2012.1228%2024.23C12.4028%2024.01%2012.5428%2023.59%2012.5428%2022.97V6.77C9.96277%206.81%208.58277%206.87%208.40277%206.95C8.22277%207.03%208.08277%207.12%207.98277%207.22C7.74277%207.54%207.45277%208.67%207.11277%2010.61L5.58277%2010.49C5.56277%2010.19%205.55277%209.61%205.55277%208.75C5.55277%207.87%205.64277%206.69%205.82277%205.21H22.1728C22.3528%206.69%2022.4428%207.87%2022.4428%208.75C22.4428%209.61%2022.4328%2010.19%2022.4128%2010.49L20.8828%2010.61C20.5428%208.67%2020.2428%207.54%2019.9828%207.22C19.9028%207.12%2019.7728%207.03%2019.5928%206.95C19.4128%206.87%2018.0328%206.81%2015.4528%206.77V23.69C15.4528%2024.15%2015.6528%2024.41%2016.0528%2024.47L18.3628%2024.83L18.2428%2026H9.99277L9.81277%2024.83Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E";
var IconWhiteLabel = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2229%22%20viewBox%3D%220%200%2028%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_1597_130%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M11.2063%2022.2583H24.7765V12.7095H11.2063V22.2583ZM1.71955%2026.75C0.913059%2026.75%200.230426%2026.4642%20-0.328346%2025.8925C-0.887118%2025.3208%20-1.1665%2024.6224%20-1.1665%2023.7973V5.20266C-1.1665%204.37755%20-0.887118%203.67917%20-0.328346%203.1075C0.230426%202.53583%200.913059%202.25%201.71955%202.25H26.2808C27.0873%202.25%2027.7699%202.53583%2028.3287%203.1075C28.8874%203.67917%2029.1668%204.37755%2029.1668%205.20266V23.7973C29.1668%2024.6224%2028.8874%2025.3208%2028.3287%2025.8925C27.7699%2026.4642%2027.0873%2026.75%2026.2808%2026.75H1.71955ZM1.71955%2024.3H26.2808C26.4037%2024.3%2026.5163%2024.2476%2026.6184%2024.1428C26.7209%2024.0383%2026.7721%2023.9231%2026.7721%2023.7973V5.20266C26.7721%205.07689%2026.7209%204.96174%2026.6184%204.85721C26.5163%204.7524%2026.4037%204.7%2026.2808%204.7H1.71955C1.59662%204.7%201.48407%204.7524%201.3819%204.85721C1.27945%204.96174%201.22823%205.07689%201.22823%205.20266V23.7973C1.22823%2023.9231%201.27945%2024.0383%201.3819%2024.1428C1.48407%2024.2476%201.59662%2024.3%201.71955%2024.3Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1597_130%22%3E%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22white%22%20transform%3D%22translate%280%200.5%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconDropDown = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2211%22%20viewBox%3D%220%200%2016%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22Shape%22%20d%3D%22M1.41005%201.71004C1.95679%201.1633%202.84322%201.1633%203.38995%201.71004L8%206.32009L12.6101%201.71004C13.1568%201.1633%2014.0432%201.1633%2014.5899%201.71004C15.1367%202.25677%2015.1367%203.1432%2014.5899%203.68994L8.98995%209.28994C8.44322%209.83667%207.55679%209.83667%207.01005%209.28994L1.41005%203.68994C0.863317%203.1432%200.863317%202.25677%201.41005%201.71004Z%22%20fill%3D%22%2398A2B3%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconBackgroundColor = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2218%22%20viewBox%3D%220%200%2017%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22background-color%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M13.5093%2012.1849C13.5093%2012.4144%2013.3232%2012.6005%2013.0937%2012.6005C12.8643%2012.6005%2012.6782%2012.4144%2012.6782%2012.1849C12.6782%2012.1873%2012.6782%2012.1886%2012.6783%2012.1886C12.6793%2012.1887%2012.6927%2012.0751%2012.8642%2011.8179C12.9262%2011.7249%2013.0023%2011.6229%2013.0937%2011.5118C13.1852%2011.6229%2013.2613%2011.7249%2013.3233%2011.8179C13.4948%2012.0751%2013.5082%2012.1887%2013.5092%2012.1886C13.5093%2012.1886%2013.5093%2012.1873%2013.5093%2012.1849Z%22%20fill%3D%22%23344054%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.37988%202.45471L8.63103%203.70587%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M8.38058%203.45575L2.87549%208.96086L6.8792%2012.9646L12.3843%207.45945L8.38058%203.45575Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M4.24658%207.61035L10.2488%209.58373%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M1.41553%2015.7238H15.5708%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBackgroundImage = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cg%20id%3D%22Group_2%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.34066%204H20.6323C21.1616%204%2021.5907%204.44772%2021.5907%205V19C21.5907%2019.5523%2021.1616%2020%2020.6323%2020H4.34066C3.81138%2020%203.38232%2019.5523%203.38232%2019V5C3.38232%204.44772%203.81138%204%204.34066%204Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M7.93457%208.99994C8.33152%208.99994%208.65332%208.66415%208.65332%208.24994C8.65332%207.83573%208.33152%207.49994%207.93457%207.49994C7.53762%207.49994%207.21582%207.83573%207.21582%208.24994C7.21582%208.66415%207.53762%208.99994%207.93457%208.99994Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M8.17399%2012L10.5698%2014L13.4448%2010.5L21.5907%2017V19C21.5907%2019.5523%2021.1616%2020%2020.6323%2020H4.34066C3.81138%2020%203.38232%2019.5523%203.38232%2019V17L8.17399%2012Z%22%20fill%3D%22white%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBackgroundImageOpacity = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M1.16327%2017.3162V0.683777H17.7957V17.3162H1.16327Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%220.353881%22%2F%3E%3Cg%20id%3D%22Group_2%22%3E%3Cpath%20id%3D%22Vector_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.46362%203.33789H15.4956C15.8865%203.33789%2016.2033%203.65477%2016.2033%204.04565V13.9543C16.2033%2014.3452%2015.8865%2014.6621%2015.4956%2014.6621H3.46362C3.07274%2014.6621%202.75586%2014.3452%202.75586%2013.9543V4.04565C2.75586%203.65477%203.07274%203.33789%203.46362%203.33789Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M6.11774%206.87671C6.4109%206.87671%206.64856%206.63905%206.64856%206.34589C6.64856%206.05272%206.4109%205.81506%206.11774%205.81506C5.82457%205.81506%205.58691%206.05272%205.58691%206.34589C5.58691%206.63905%205.82457%206.87671%206.11774%206.87671Z%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M6.29467%209L8.06408%2010.4155L10.1874%207.93835L16.2033%2012.5388V13.9543C16.2033%2014.3452%2015.8865%2014.6621%2015.4956%2014.6621H3.46362C3.07274%2014.6621%202.75586%2014.3452%202.75586%2013.9543V12.5388L6.29467%209Z%22%20fill%3D%22white%22%20stroke%3D%22%23344054%22%20stroke-opacity%3D%220.75%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconDropDownSmall = "data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%226%22%20viewBox%3D%220%200%2011%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M9.97266%201L5.97266%205L1.97266%201%22%20stroke%3D%22%2398A2B3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconFrame = "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M5.97266%2019H19.9727V5H5.97266V19ZM3.97266%2021V3H21.9727V21H3.97266ZM7.97266%2013V11H9.97266V13H7.97266ZM11.9727%2017V15H13.9727V17H11.9727ZM11.9727%2013V11H13.9727V13H11.9727ZM11.9727%209V7H13.9727V9H11.9727ZM15.9727%2013V11H17.9727V13H15.9727Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconZoomIn = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2216%22%20viewBox%3D%220%200%2018%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22zoom-in%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M8.03174%204.73066C8.42294%204.73066%208.74007%205.02339%208.74007%205.3845V6.69219H10.1567C10.5479%206.69219%2010.8651%206.98493%2010.8651%207.34604C10.8651%207.70715%2010.5479%207.99989%2010.1567%207.99989H8.74007V9.30758C8.74007%209.66869%208.42294%209.96143%208.03174%209.96143C7.64054%209.96143%207.3234%209.66869%207.3234%209.30758V7.99989H5.90674C5.51554%207.99989%205.1984%207.70715%205.1984%207.34604C5.1984%206.98493%205.51554%206.69219%205.90674%206.69219H7.3234V5.3845C7.3234%205.02339%207.64054%204.73066%208.03174%204.73066Z%22%20fill%3D%22%234D6277%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12.0109%2011.9439C10.9203%2012.7491%209.53694%2013.2307%208.03174%2013.2307C4.51092%2013.2307%201.65674%2010.596%201.65674%207.34604C1.65674%204.09606%204.51092%201.46143%208.03174%201.46143C11.5526%201.46143%2014.4067%204.09606%2014.4067%207.34604C14.4067%208.73549%2013.8851%2010.0125%2013.0126%2011.0192L15.6159%2013.4222C15.8925%2013.6775%2015.8925%2014.0915%2015.6159%2014.3468C15.3392%2014.6022%2014.8908%2014.6022%2014.6141%2014.3468L12.0109%2011.9439ZM3.0734%207.34604C3.0734%204.81828%205.29333%202.76912%208.03174%202.76912C10.7702%202.76912%2012.9901%204.81828%2012.9901%207.34604C12.9901%208.57907%2012.4619%209.69821%2011.6029%2010.5212C11.5786%2010.5384%2011.5552%2010.5574%2011.5329%2010.5779C11.5106%2010.5985%2011.4901%2010.6201%2011.4714%2010.6426C10.5799%2011.4354%209.36749%2011.923%208.03174%2011.923C5.29333%2011.923%203.0734%209.87381%203.0734%207.34604Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconZoomOut = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22zoom-out%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M5.90674%207.58329C5.51554%207.58329%205.1984%207.90042%205.1984%208.29163C5.1984%208.68283%205.51554%208.99996%205.90674%208.99996H10.1567C10.5479%208.99996%2010.8651%208.68283%2010.8651%208.29163C10.8651%207.90042%2010.5479%207.58329%2010.1567%207.58329H5.90674Z%22%20fill%3D%22%234D6277%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.03174%2014.6666C9.53694%2014.6666%2010.9203%2014.145%2012.0109%2013.2726L14.6141%2015.8758C14.8908%2016.1525%2015.3392%2016.1525%2015.6159%2015.8758C15.8925%2015.5992%2015.8925%2015.1507%2015.6159%2014.8741L13.0126%2012.2709C13.8851%2011.1803%2014.4067%209.79686%2014.4067%208.29163C14.4067%204.77081%2011.5526%201.91663%208.03174%201.91663C4.51092%201.91663%201.65674%204.77081%201.65674%208.29163C1.65674%2011.8124%204.51092%2014.6666%208.03174%2014.6666ZM8.03174%203.33329C5.29333%203.33329%203.0734%205.55321%203.0734%208.29163C3.0734%2011.03%205.29333%2013.25%208.03174%2013.25C9.36749%2013.25%2010.5799%2012.7218%2011.4714%2011.8629C11.4901%2011.8385%2011.5106%2011.8151%2011.5329%2011.7928C11.5552%2011.7706%2011.5786%2011.7501%2011.6029%2011.7314C12.4619%2010.8398%2012.9901%209.6274%2012.9901%208.29163C12.9901%205.55321%2010.7702%203.33329%208.03174%203.33329Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconBringFront = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22bring-to-front%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M17.0833%207.49988H7.91667C7.68654%207.49988%207.5%207.68642%207.5%207.91654V17.0832C7.5%2017.3133%207.68654%2017.4999%207.91667%2017.4999H17.0833C17.3135%2017.4999%2017.5%2017.3133%2017.5%2017.0832V7.91654C17.5%207.68642%2017.3135%207.49988%2017.0833%207.49988Z%22%20fill%3D%22white%22%20stroke%3D%22%23203040%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M4.15377%202.5H2.5V4.18067%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M4.16544%2012.4999H2.5V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M10.8345%202.5H12.5002V4.173%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M6.67871%202.5H8.33704%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M2.5%206.66675C2.5%207.77241%202.5%208.32796%202.5%208.33341%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M12.5%206.66675C12.5%207.78196%2012.5%208.06075%2012.5%207.50316%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M6.66357%2012.5001H7.49999%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconSentBack = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22sent-to-back%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M12.5%207.49988H17.0833C17.3135%207.49988%2017.5%207.68642%2017.5%207.91654V17.0832C17.5%2017.3133%2017.3135%2017.4999%2017.0833%2017.4999H7.91667C7.68654%2017.4999%207.5%2017.3133%207.5%2017.0832V12.4999%22%20stroke%3D%22%23203040%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M4.15377%202.5H2.5V4.18067%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M4.16544%2012.4999H2.5V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M10.8335%2012.4999H12.499V10.8383%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_5%22%20d%3D%22M10.8345%202.5H12.5002V4.16577%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_6%22%20d%3D%22M6.67871%202.5H8.33704%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_7%22%20d%3D%22M2.5%206.66675V8.33958%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_8%22%20d%3D%22M12.5%206.66675V8.33958%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_9%22%20d%3D%22M6.66357%2012.5001H8.33332%22%20stroke%3D%22%234D6277%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconLock = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22lock%22%3E%3Cpath%20id%3D%22Icon%20color%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.46566%208.33325V5.83325C5.46566%204.50717%205.99244%203.2354%206.93012%202.29772C7.86781%201.36004%209.13958%200.833252%2010.4657%200.833252C11.7917%200.833252%2013.0635%201.36004%2014.0012%202.29772C14.9389%203.2354%2015.4657%204.50717%2015.4657%205.83325V8.33325H16.299C17.6797%208.33325%2018.799%209.45254%2018.799%2010.8333V16.6666C18.799%2018.0473%2017.6797%2019.1666%2016.299%2019.1666H4.63232C3.25161%2019.1666%202.13232%2018.0473%202.13232%2016.6666V10.8333C2.13232%209.45254%203.25161%208.33325%204.63232%208.33325H5.46566ZM8.10863%203.47623C8.73376%202.85111%209.5816%202.49992%2010.4657%202.49992C11.3497%202.49992%2012.1976%202.85111%2012.8227%203.47623C13.4478%204.10135%2013.799%204.9492%2013.799%205.83325V8.33325H7.13232V5.83325C7.13232%204.9492%207.48351%204.10135%208.10863%203.47623ZM4.63232%209.99992C4.17209%209.99992%203.79899%2010.373%203.79899%2010.8333V16.6666C3.79899%2017.1268%204.17209%2017.4999%204.63232%2017.4999H16.299C16.7592%2017.4999%2017.1323%2017.1268%2017.1323%2016.6666V10.8333C17.1323%2010.373%2016.7592%209.99992%2016.299%209.99992H4.63232Z%22%20fill%3D%22%23383F46%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconCopy = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22copy%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M3.27653%203.33337C3.27653%202.87694%203.65343%202.50004%204.10986%202.50004H12.4432C12.8996%202.50004%2013.2765%202.87694%2013.2765%203.33337C13.2765%203.79361%2013.6496%204.16671%2014.1099%204.16671C14.5701%204.16671%2014.9432%203.79361%2014.9432%203.33337C14.9432%201.95647%2013.8201%200.833374%2012.4432%200.833374H4.10986C2.73296%200.833374%201.60986%201.95647%201.60986%203.33337V11.6667C1.60986%2013.0436%202.73296%2014.1667%204.10986%2014.1667C4.5701%2014.1667%204.9432%2013.7936%204.9432%2013.3334C4.9432%2012.8731%204.5701%2012.5%204.10986%2012.5C3.65343%2012.5%203.27653%2012.1231%203.27653%2011.6667V3.33337Z%22%20fill%3D%22%2334C276%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.10986%205.83337C7.72915%205.83337%206.60986%206.95266%206.60986%208.33337V16.6667C6.60986%2018.0474%207.72915%2019.1667%209.10986%2019.1667H17.4432C18.8239%2019.1667%2019.9432%2018.0474%2019.9432%2016.6667V8.33337C19.9432%206.95266%2018.8239%205.83337%2017.4432%205.83337H9.10986ZM8.27653%208.33337C8.27653%207.87314%208.64963%207.50004%209.10986%207.50004H17.4432C17.9034%207.50004%2018.2765%207.87314%2018.2765%208.33337V16.6667C18.2765%2017.1269%2017.9034%2017.5%2017.4432%2017.5H9.10986C8.64963%2017.5%208.27653%2017.1269%208.27653%2016.6667V8.33337Z%22%20fill%3D%22%2334C276%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconDelete = "data:image/svg+xml,%3Csvg%20width%3D%2225%22%20height%3D%2224%22%20viewBox%3D%220%200%2025%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M9.48691%2016.1537L12.0869%2013.5537L14.6869%2016.1537L15.7407%2015.1L13.1407%2012.5L15.7407%209.89998L14.6869%208.84623L12.0869%2011.4462L9.48691%208.84623L8.43316%209.89998L11.0332%2012.5L8.43316%2015.1L9.48691%2016.1537ZM7.39466%2020.5C6.8895%2020.5%206.46191%2020.325%206.11191%2019.975C5.76191%2019.625%205.58691%2019.1974%205.58691%2018.6922V5.99998H4.58691V4.49998H9.08691V3.61548H15.0869V4.49998H19.5869V5.99998H18.5869V18.6922C18.5869%2019.1974%2018.4119%2019.625%2018.0619%2019.975C17.7119%2020.325%2017.2843%2020.5%2016.7792%2020.5H7.39466ZM17.0869%205.99998H7.08691V18.6922C7.08691%2018.7692%207.119%2018.8397%207.18316%2018.9037C7.24716%2018.9679%207.31766%2019%207.39466%2019H16.7792C16.8562%2019%2016.9267%2018.9679%2016.9907%2018.9037C17.0548%2018.8397%2017.0869%2018.7692%2017.0869%2018.6922V5.99998Z%22%20fill%3D%22%23D91919%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUndo = "data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22redo%22%3E%3Cpath%20id%3D%22Icon%20color%22%20d%3D%22M1.66683%205.83333C1.66683%205.3731%202.03993%205%202.50016%205C2.9604%205%203.3335%205.3731%203.3335%205.83333V8.9622L4.44323%207.96344C5.96994%206.59414%207.94893%205.83542%209.99974%205.83333C12.2099%205.83333%2014.3299%206.71131%2015.8927%208.27411C17.4555%209.83691%2018.3335%2011.9565%2018.3335%2014.1667C18.3335%2014.6269%2017.9604%2015%2017.5002%2015C17.0399%2015%2016.6668%2014.6269%2016.6668%2014.1667C16.6668%2012.3986%2015.9645%2010.7029%2014.7142%209.45262C13.4641%208.20248%2011.7685%207.50011%2010.0006%207.5C8.36033%207.50178%206.77775%208.10868%205.55657%209.2037L4.67179%2010H7.50016C7.9604%2010%208.3335%2010.3731%208.3335%2010.8333C8.3335%2011.2936%207.9604%2011.6667%207.50016%2011.6667H2.50016C2.03993%2011.6667%201.66683%2011.2936%201.66683%2010.8333V5.83333Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconRedo = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22redo%22%3E%3Cpath%20id%3D%22Icon%20color%22%20d%3D%22M18.8332%205.83333C18.8332%205.3731%2018.4601%205%2017.9998%205C17.5396%205%2017.1665%205.3731%2017.1665%205.83333V8.9622L16.0568%207.96344C14.5301%206.59414%2012.5511%205.83542%2010.5003%205.83333C8.29012%205.83333%206.17008%206.71131%204.60728%208.27411C3.04448%209.83691%202.1665%2011.9565%202.1665%2014.1667C2.1665%2014.6269%202.5396%2015%202.99984%2015C3.46007%2015%203.83317%2014.6269%203.83317%2014.1667C3.83317%2012.3986%204.53555%2010.7029%205.78579%209.45262C7.03594%208.20248%208.73146%207.50011%2010.4994%207.5C12.1397%207.50178%2013.7222%208.10868%2014.9434%209.2037L15.8282%2010H12.9998C12.5396%2010%2012.1665%2010.3731%2012.1665%2010.8333C12.1665%2011.2936%2012.5396%2011.6667%2012.9998%2011.6667H17.9998C18.4601%2011.6667%2018.8332%2011.2936%2018.8332%2010.8333V5.83333Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconTextSmall = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2217%22%20viewBox%3D%220%200%2014%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.78979%2015.7742C4.75579%2015.6209%205.34613%2015.4675%205.56079%2015.3142C5.77546%2015.1455%205.88279%2014.8235%205.88279%2014.3482V1.9282C3.90479%201.95887%202.84679%202.00487%202.70879%202.0662C2.57079%202.12754%202.46346%202.19654%202.38679%202.2732C2.20279%202.51854%201.98046%203.38487%201.71979%204.8722L0.546793%204.7802C0.53146%204.5502%200.523793%204.10554%200.523793%203.4462C0.523793%202.77154%200.592793%201.86687%200.730793%200.732203H13.2658C13.4038%201.86687%2013.4728%202.77154%2013.4728%203.4462C13.4728%204.10554%2013.4651%204.5502%2013.4498%204.7802L12.2768%204.8722C12.0161%203.38487%2011.7861%202.51854%2011.5868%202.2732C11.5255%202.19654%2011.4258%202.12754%2011.2878%202.0662C11.1498%202.00487%2010.0918%201.95887%208.11379%201.9282V14.9002C8.11379%2015.2529%208.26713%2015.4522%208.57379%2015.4982L10.3448%2015.7742L10.2528%2016.6712H3.92779L3.78979%2015.7742Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fsvg%3E";
var IconBold = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22text-bold%22%3E%3Cpath%20id%3D%22Vector%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.1463%208.99999C11.0946%208.99999%2012.6741%207.41559%2012.6741%205.46118C12.6741%203.50674%2011.0946%201.92236%209.1463%201.92236H3.69434V8.99999H9.1463Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.12329%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.4291%2016.0776C12.3775%2016.0776%2013.9569%2014.4932%2013.9569%2012.5388C13.9569%2010.5844%2012.3775%209%2010.4291%209H3.69434V16.0776H10.4291Z%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222.12329%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconLineThrough = "data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2216%22%20viewBox%3D%220%200%2014%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.4649%204.09091H12.1695C12.0914%201.89631%2010.0672%200.255681%207.25471%200.255681C4.47061%200.255681%202.28311%201.875%202.28311%204.31818C2.28311%206.27841%203.70357%207.44318%205.9763%208.09659L7.76607%208.60795C9.30016%209.03409%2010.6638%209.57386%2010.6638%2011.0227C10.6638%2012.6136%209.12971%2013.6648%207.11266%2013.6648C5.37971%2013.6648%203.84561%2012.8977%203.70357%2011.25H1.88539C2.05584%2013.6364%203.98766%2015.2557%207.11266%2015.2557C10.4649%2015.2557%2012.3683%2013.4091%2012.3683%2011.0511C12.3683%208.32386%209.78311%207.44318%208.27743%207.04545L6.80016%206.64773C5.72061%206.36364%203.98766%205.79545%203.98766%204.23295C3.98766%202.84091%205.26607%201.81818%207.19789%201.81818C8.95925%201.81818%2010.2945%202.65625%2010.4649%204.09091Z%22%20fill%3D%22%23344054%22%2F%3E%3Cpath%20d%3D%22M0.749023%208.4517H13.5047V9.81534H0.749023V8.4517Z%22%20fill%3D%22%23344054%22%2F%3E%3C%2Fsvg%3E";
var IconTextItalic = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.5293%202.63013H13.1914%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4.69824%2015.3699H10.3603%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.7146%202.61328L7.17578%2015.3699%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconTextUnderLine = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22text-underline%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M2.89062%2016.0776H14.2148%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M13.1531%202.66443C13.1531%205.02362%2013.1531%205.93299%2013.1531%208.29221C13.1531%2010.833%2011.0934%2012.8927%208.55261%2012.8927C6.01184%2012.8927%203.95215%2010.833%203.95215%208.29221C3.95215%205.93299%203.95215%205.02362%203.95215%202.66443%22%20stroke%3D%22%23344054%22%20stroke-width%3D%221.41553%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconAlignLeft = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.2192%203.86304H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12.3882%207.40186H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.2192%2010.9407H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12.3882%2014.4795H2.47949%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAlignCenter = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M13.3926%207.40186H4.89941%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5161%203.86304H2.77637%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5161%2010.9407H2.77637%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13.3926%2014.4795H4.89941%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAlignRight = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.813%203.86304H3.07324%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%207.40186H5.9043%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%2010.9407H3.07324%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.813%2014.4795H5.9043%22%20stroke%3D%22%23344054%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconOpacity = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2217%22%20viewBox%3D%220%200%2018%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_565_3386%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M8.52116%2015.5045C6.65314%2015.5045%205.06461%2014.8885%203.75556%2013.6565C2.44652%2012.4246%201.79199%2010.9167%201.79199%209.13278C1.79199%208.26628%201.96889%207.45244%202.3227%206.69128C2.67635%205.93011%203.15629%205.25038%203.76252%204.6521L8.52116%200.171204L13.2798%204.6521C13.886%205.25038%2014.366%205.93011%2014.7196%206.69128C15.0734%207.45244%2015.2503%208.26628%2015.2503%209.13278C15.2503%2010.9167%2014.5958%2012.4246%2013.2868%2013.6565C11.9777%2014.8885%2010.3892%2015.5045%208.52116%2015.5045ZM3.19121%209.90772H13.8233C14.0027%208.87446%2013.9004%207.98916%2013.5162%207.25182C13.1321%206.51433%2012.7381%205.95903%2012.3344%205.58591L8.52116%201.9695L4.70796%205.58591C4.30421%205.95903%203.90936%206.51433%203.52341%207.25182C3.13745%207.98916%203.02672%208.87446%203.19121%209.90772Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_565_3386%22%3E%3Crect%20width%3D%2217%22%20height%3D%2216%22%20fill%3D%22white%22%20transform%3D%22translate%280.0917969%200.171204%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconGrid = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.5%2020.5V3.5H20.5V20.5H3.5ZM19%2019V12.75H12.75V19H19ZM19%205H12.75V11.25H19V5ZM5%205V11.25H11.25V5H5ZM5%2019H11.25V12.75H5V19Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fsvg%3E";
var IconChevronLeft = "data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%2218%22%20viewBox%3D%220%200%2010%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2016.125L1%208.625L9%201.125%22%20stroke%3D%22%23646464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconAdd = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.83317%2012.5H9.1665V10.5H11.1665V9.16665H9.1665V7.16665H7.83317V9.16665H5.83317V10.5H7.83317V12.5ZM4.49984%2015.1666C4.13317%2015.1666%203.81928%2015.0361%203.55817%2014.775C3.29706%2014.5139%203.1665%2014.2%203.1665%2013.8333V3.16665C3.1665%202.79998%203.29706%202.48609%203.55817%202.22498C3.81928%201.96387%204.13317%201.83331%204.49984%201.83331H9.83317L13.8332%205.83331V13.8333C13.8332%2014.2%2013.7026%2014.5139%2013.4415%2014.775C13.1804%2015.0361%2012.8665%2015.1666%2012.4998%2015.1666H4.49984ZM9.1665%206.49998V3.16665H4.49984V13.8333H12.4998V6.49998H9.1665Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconAddText = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2217%22%20viewBox%3D%220%200%2017%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.83366%2011.1667V7.16669H5.83366V5.83335H11.167V7.16669H9.16699V11.1667H7.83366ZM1.16699%2015.8334V11.8334H2.50033V5.16669H1.16699V1.16669H5.16699V2.50002H11.8337V1.16669H15.8337V5.16669H14.5003V11.8334H15.8337V15.8334H11.8337V14.5H5.16699V15.8334H1.16699ZM5.16699%2013.1667H11.8337V11.8334H13.167V5.16669H11.8337V3.83335H5.16699V5.16669H3.83366V11.8334H5.16699V13.1667ZM2.50033%203.83335H3.83366V2.50002H2.50033V3.83335ZM13.167%203.83335H14.5003V2.50002H13.167V3.83335ZM13.167%2014.5H14.5003V13.1667H13.167V14.5ZM2.50033%2014.5H3.83366V13.1667H2.50033V14.5Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUpload = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2217%22%20viewBox%3D%220%200%2016%2017%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22upload%22%3E%3Cg%20id%3D%22Icon%20color%22%3E%3Cpath%20d%3D%22M8.25486%201.8839C8.33349%201.91643%208.40716%201.96466%208.47108%202.02858L11.8044%205.36191C12.0648%205.62226%2012.0648%206.04437%2011.8044%206.30472C11.5441%206.56507%2011.122%206.56507%2010.8616%206.30472L8.66634%204.10946V10.5C8.66634%2010.8682%208.36786%2011.1666%207.99967%2011.1666C7.63148%2011.1666%207.33301%2010.8682%207.33301%2010.5V4.10946L5.13775%206.30472C4.8774%206.56507%204.45529%206.56507%204.19494%206.30472C3.93459%206.04437%203.93459%205.62226%204.19494%205.36191L7.52792%202.02893%22%20fill%3D%22%235F98D0%22%2F%3E%3Cpath%20d%3D%22M8.25486%201.8839C8.17626%201.8513%208.09007%201.83331%207.99967%201.83331C7.8163%201.83331%207.65021%201.90735%207.52969%202.02716%22%20fill%3D%22%235F98D0%22%2F%3E%3Cpath%20d%3D%22M1.99967%209.83331C2.36786%209.83331%202.66634%2010.1318%202.66634%2010.5V13.1666C2.66634%2013.3435%202.73658%2013.513%202.8616%2013.6381C2.98663%2013.7631%203.1562%2013.8333%203.33301%2013.8333H12.6663C12.8432%2013.8333%2013.0127%2013.7631%2013.1377%2013.6381C13.2628%2013.513%2013.333%2013.3435%2013.333%2013.1666V10.5C13.333%2010.1318%2013.6315%209.83331%2013.9997%209.83331C14.3679%209.83331%2014.6663%2010.1318%2014.6663%2010.5V13.1666C14.6663%2013.6971%2014.4556%2014.2058%2014.0806%2014.5809C13.7055%2014.9559%2013.1968%2015.1666%2012.6663%2015.1666H3.33301C2.80257%2015.1666%202.29387%2014.9559%201.91879%2014.5809C1.54372%2014.2058%201.33301%2013.6971%201.33301%2013.1666V10.5C1.33301%2010.1318%201.63148%209.83331%201.99967%209.83331Z%22%20fill%3D%22%235F98D0%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconGraph = "data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2220%22%20viewBox%3D%220%200%2021%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%20clip-path%3D%22url%28%23clip0_2240_1532%29%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M1.16467%2016L0%2014.8505L7.57326%207.321L11.9943%2011.6846L18.1987%205.63636H14.9211V4H21V10H19.3421V6.78618L11.9943%2014.0385L7.57326%209.67491L1.16467%2016Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2240_1532%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%20transform%3D%22translate%280.5%29%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconCheveronDown = "data:image/svg+xml,%3Csvg%20width%3D%2212%22%20height%3D%227%22%20viewBox%3D%220%200%2012%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M11%201L6%206L1%201%22%20stroke%3D%22%23646464%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E";
var IconInfo = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2015%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M7.49312%2011.0095C7.67156%2011.0095%207.82229%2010.948%207.94531%2010.8248C8.06833%2010.7016%208.12984%2010.5507%208.12984%2010.3722C8.12984%2010.1938%208.06823%2010.043%207.945%209.92C7.82177%209.79708%207.67094%209.73562%207.4925%209.73562C7.31406%209.73562%207.16333%209.79724%207.04031%209.92047C6.91729%2010.0437%206.85578%2010.1945%206.85578%2010.373C6.85578%2010.5514%206.9174%2010.7021%207.04063%2010.8252C7.16385%2010.9481%207.31469%2011.0095%207.49312%2011.0095ZM7.05047%208.77156H7.93031C7.93833%208.46396%207.98339%208.21818%208.06547%208.03422C8.14766%207.85036%208.34698%207.60661%208.66344%207.30297C8.93833%207.02807%209.14885%206.77422%209.295%206.54141C9.44125%206.3087%209.51437%206.03385%209.51437%205.71688C9.51437%205.17885%209.32109%204.75859%208.93453%204.45609C8.54786%204.1537%208.09052%204.0025%207.5625%204.0025C7.04083%204.0025%206.60917%204.14172%206.2675%204.42016C5.92573%204.69859%205.68193%205.02651%205.53609%205.40391L6.33891%205.72594C6.41505%205.51844%206.54526%205.3163%206.72953%205.11953C6.9138%204.92286%207.18745%204.82453%207.55047%204.82453C7.91984%204.82453%208.19286%204.92568%208.36953%205.12797C8.5463%205.33036%208.63469%205.55292%208.63469%205.79562C8.63469%206.00802%208.57417%206.20234%208.45312%206.37859C8.33219%206.55484%208.17797%206.7251%207.99047%206.88937C7.58016%207.25958%207.32094%207.5549%207.21281%207.77531C7.10458%207.99563%207.05047%208.32771%207.05047%208.77156ZM7.50109%2013.4375C6.67984%2013.4375%205.90792%2013.2817%205.18531%2012.97C4.46271%2012.6583%203.83417%2012.2354%203.29969%2011.7011C2.76521%2011.1668%202.34203%2010.5385%202.03016%209.81625C1.71839%209.09396%201.5625%208.32224%201.5625%207.50109C1.5625%206.67984%201.71833%205.90792%202.03%205.18531C2.34167%204.46271%202.76464%203.83417%203.29891%203.29969C3.83318%202.76521%204.46146%202.34203%205.18375%202.03016C5.90604%201.71839%206.67776%201.5625%207.49891%201.5625C8.32016%201.5625%209.09208%201.71833%209.81469%202.03C10.5373%202.34167%2011.1658%202.76464%2011.7003%203.29891C12.2348%203.83318%2012.658%204.46146%2012.9698%205.18375C13.2816%205.90604%2013.4375%206.67776%2013.4375%207.49891C13.4375%208.32016%2013.2817%209.09208%2012.97%209.81469C12.6583%2010.5373%2012.2354%2011.1658%2011.7011%2011.7003C11.1668%2012.2348%2010.5385%2012.658%209.81625%2012.9698C9.09396%2013.2816%208.32224%2013.4375%207.50109%2013.4375ZM7.5%2012.5C8.89583%2012.5%2010.0781%2012.0156%2011.0469%2011.0469C12.0156%2010.0781%2012.5%208.89583%2012.5%207.5C12.5%206.10417%2012.0156%204.92188%2011.0469%203.95312C10.0781%202.98438%208.89583%202.5%207.5%202.5C6.10417%202.5%204.92188%202.98438%203.95312%203.95312C2.98438%204.92188%202.5%206.10417%202.5%207.5C2.5%208.89583%202.98438%2010.0781%203.95312%2011.0469C4.92188%2012.0156%206.10417%2012.5%207.5%2012.5Z%22%20fill%3D%22%235F6368%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconTools = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%201%22%20clip-path%3D%22url%28%23clip0_2312_1672%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1672%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1672%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%238D8B8B%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1672%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconToolsPink = "data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2230%22%20viewBox%3D%220%200%2028%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22logo22%202%22%20clip-path%3D%22url%28%23clip0_2312_1680%29%22%3E%3Cg%20id%3D%22Clip%20path%20group%22%3E%3Cmask%20id%3D%22mask0_2312_1680%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2228%22%20height%3D%2230%22%3E%3Cg%20id%3D%22clip0_8042_16520%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M27.6442%200H0V30H27.6442V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0_2312_1680%29%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector_2%22%20d%3D%22M23.8782%203.46176C24.4391%202.63758%2024.2788%201.56616%2023.4775%200.989232C23.0769%200.741978%2022.6763%200.577144%2022.1955%200.659562C21.7147%200.741978%2021.3141%200.989232%2021.0737%201.40132L12.5801%2013.187L10.657%2015.9068C9.85578%2016.3189%205.04807%2018.5442%201.4423%2018.7914H1.36218C1.12179%2018.7914%200.961536%2018.7914%200.72115%2018.8739C0.24038%2018.9563%200.0801234%2019.3683%20-5.05522e-06%2019.5332C-0.24039%2020.9343%200.480764%2022.665%202.24359%2024.5607C3.44551%2025.9617%204.80769%2026.9508%204.80769%2026.9508C5.1282%2027.198%205.44871%2027.198%205.60897%2026.9508L7.29168%2025.0551L6.41026%2027.6926C6.33011%2027.9398%206.41026%2028.187%206.65065%2028.3519C6.73074%2028.4343%208.73397%2029.6706%2010.0962%2029.9178C10.1763%2029.9178%2010.1763%2029.9178%2010.2564%2029.9178C10.4167%2029.9178%2010.5769%2029.9178%2010.7372%2029.753C11.2179%2029.3409%2011.6186%2028.2695%2011.8589%2027.2804C12.0993%2026.2914%2012.3397%2024.9728%2012.6603%2023.3244C13.0609%2020.9343%2013.3013%2018.6266%2013.3814%2018.0497L15.3045%2015.3299L23.8782%203.46176Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_3%22%20d%3D%22M26.2819%2019.451C25.4005%2018.5444%2024.1184%2017.9675%2022.7562%2017.9675C22.1953%2017.9675%2021.6344%2018.0499%2021.0735%2018.2971L17.3876%2014.506C17.1472%2014.2587%2016.7466%2014.2587%2016.5062%2014.5883L14.9037%2016.8136C14.7434%2017.0609%2014.7434%2017.3905%2014.9838%2017.5554L18.3492%2021.0169C17.7082%2022.8301%2018.1088%2025.0554%2019.4709%2026.3741C20.3524%2027.2807%2021.5543%2027.7751%2022.7562%2027.7751C23.237%2027.7751%2023.6376%2027.6928%2024.1184%2027.5279L25.0799%2027.1982L22.035%2023.984C21.7947%2023.7367%2021.7947%2023.3246%2022.035%2023.0774L23.237%2021.7587C23.3171%2021.6763%2023.4774%2021.5938%2023.6376%2021.5938C23.7979%2021.5938%2024.0383%2021.6763%2024.1184%2021.8411L27.2434%2025.0554L27.4838%2023.984C27.9646%2022.418%2027.4838%2020.6873%2026.2819%2019.451Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3Cpath%20id%3D%22Vector_4%22%20d%3D%22M5.60925%209.8903C6.17014%209.8903%206.73102%209.80786%207.29195%209.56066L10.8977%2013.2694C11.1381%2013.5167%2011.5387%2013.5167%2011.7791%2013.187L13.3817%2010.9617C13.542%2010.7145%2013.542%2010.3848%2013.3016%2010.22L10.0163%206.84086C10.6573%205.02767%2010.2567%202.8024%208.89449%201.48372C7.61244%200.165035%205.84966%20-0.32947%204.24707%200.247452L3.28553%200.494705L6.41054%203.70899C6.65093%203.95624%206.65093%204.36833%206.41054%204.61558L5.12848%205.85185C4.88809%206.09908%204.40733%206.09908%204.24707%205.85185L1.12207%202.63756L0.881685%203.70899C0.481046%205.35734%200.881685%207.1705%202.08361%208.4068C2.96502%209.3134%204.24707%209.8903%205.60925%209.8903Z%22%20fill%3D%22%23AC8EBA%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_2312_1680%22%3E%3Crect%20width%3D%2228%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E";
var IconCircle = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M23.5037%2041.7084C20.9852%2041.7084%2018.6179%2041.2305%2016.402%2040.2747C14.186%2039.3189%2012.2584%2038.0218%2010.6194%2036.3834C8.9803%2034.7449%207.68255%2032.8182%206.72614%2030.6032C5.77004%2028.3882%205.29199%2026.0216%205.29199%2023.5034C5.29199%2020.9849%205.76988%2018.6176%206.72566%2016.4016C7.68144%2014.1857%208.97854%2012.2581%2010.617%2010.6191C12.2554%208.97999%2014.1821%207.68225%2016.3972%206.72583C18.6122%205.76974%2020.9788%205.29169%2023.497%205.29169C26.0155%205.29169%2028.3827%205.76958%2030.5987%206.72535C32.8147%207.68113%2034.7422%208.97824%2036.3813%2010.6167C38.0204%2012.2551%2039.3181%2014.1818%2040.2745%2016.3969C41.2306%2018.6119%2041.7087%2020.9785%2041.7087%2023.4967C41.7087%2026.0152%2041.2308%2028.3824%2040.275%2030.5984C39.3192%2032.8144%2038.0221%2034.7419%2036.3837%2036.381C34.7453%2038.0201%2032.8185%2039.3178%2030.6035%2040.2742C28.3885%2041.2303%2026.0219%2041.7084%2023.5037%2041.7084ZM23.5003%2038.8334C27.7809%2038.8334%2031.4066%2037.3479%2034.3774%2034.3771C37.3482%2031.4063%2038.8337%2027.7806%2038.8337%2023.5C38.8337%2019.2195%2037.3482%2015.5938%2034.3774%2012.6229C31.4066%209.6521%2027.7809%208.16669%2023.5003%208.16669C19.2198%208.16669%2015.5941%209.6521%2012.6232%2012.6229C9.65241%2015.5938%208.16699%2019.2195%208.16699%2023.5C8.16699%2027.7806%209.65241%2031.4063%2012.6232%2034.3771C15.5941%2037.3479%2019.2198%2038.8334%2023.5003%2038.8334Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconSquare = "data:image/svg+xml,%3Csvg%20width%3D%2237%22%20height%3D%2237%22%20viewBox%3D%220%200%2037%2037%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20x%3D%221.5%22%20y%3D%221.5%22%20width%3D%2234%22%20height%3D%2234%22%20stroke%3D%22%23A7A7A7%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E";
var IconTriangle = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5.68652%2038.1875L23.4995%209.67908L41.3125%2038.1875H5.68652ZM10.9662%2035.25H36.0329L23.4995%2015.1771L10.9662%2035.25Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconArrowRight = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M33.9701%2031.6345L31.8761%2029.5709L36.4782%2024.9688H6.85449V22.0313H36.4782L31.906%2017.4292L33.9999%2015.3656L42.1045%2023.5L33.9701%2031.6345Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconHorizontalLine = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.8125%2024.9688V22.0312H38.1875V24.9688H8.8125Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconVerticalLine = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M24.9688%2038.1875L22.0312%2038.1875L22.0312%208.8125L24.9687%208.8125L24.9688%2038.1875Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconStar = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M17.3316%2032.949L23.5003%2029.2281L29.6691%2032.9979L28.0534%2025.9479L33.4878%2021.2479L26.3399%2020.6115L23.5003%2013.9531L20.6607%2020.5625L13.5128%2021.199L18.9472%2025.9479L17.3316%2032.949ZM12.8764%2039.0913L15.6822%2027.0098L6.30859%2018.8867L18.676%2017.8135L23.5003%206.42139L28.3247%2017.8135L40.692%2018.8867L31.3185%2027.0098L34.1243%2039.0913L23.5003%2032.6817L12.8764%2039.0913Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fsvg%3E";
var IconHeart = "data:image/svg+xml,%3Csvg%20width%3D%2247%22%20height%3D%2247%22%20viewBox%3D%220%200%2047%2047%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22Frame%22%3E%3Cpath%20id%3D%22Vector%22%20d%3D%22M23.4997%2039.8066L21.3382%2037.8634C18.0919%2034.9184%2015.4074%2032.3877%2013.2845%2030.2714C11.1617%2028.1548%209.47948%2026.2711%208.23789%2024.6202C6.99631%2022.9696%206.12893%2021.4638%205.63576%2020.1028C5.14226%2018.7421%204.89551%2017.3613%204.89551%2015.9604C4.89551%2013.1812%205.83257%2010.8544%207.7067%208.97995C9.58115%207.10582%2011.908%206.16876%2014.6872%206.16876C16.3968%206.16876%2018.0124%206.56859%2019.534%207.36824C21.0557%208.16789%2022.3775%209.31466%2023.4997%2010.8085C24.6218%209.31466%2025.9437%208.16789%2027.4653%207.36824C28.9869%206.56859%2030.6025%206.16876%2032.3122%206.16876C35.0914%206.16876%2037.4182%207.10582%2039.2927%208.97995C41.1668%2010.8544%2042.1038%2013.1812%2042.1038%2015.9604C42.1038%2017.3613%2041.8571%2018.7421%2041.3636%2020.1028C40.8704%2021.4638%2040.003%2022.9696%2038.7615%2024.6202C37.5199%2026.2711%2035.8408%2028.1548%2033.7241%2030.2714C31.6078%2032.3877%2028.9202%2034.9184%2025.6612%2037.8634L23.4997%2039.8066ZM23.4997%2035.8375C26.633%2033.0182%2029.2115%2030.6016%2031.2351%2028.5878C33.2587%2026.5743%2034.858%2024.825%2036.033%2023.3399C37.208%2021.8548%2038.024%2020.5361%2038.4809%2019.3836C38.9379%2018.2314%2039.1663%2017.0904%2039.1663%2015.9604C39.1663%2014.0021%2038.5136%2012.3702%2037.208%2011.0646C35.9025%209.75904%2034.2705%209.10626%2032.3122%209.10626C30.7657%209.10626%2029.3365%209.54493%2028.0244%2010.4223C26.7126%2011.2999%2025.6739%2012.5208%2024.9082%2014.0848H22.0911C21.3127%2012.5081%2020.2707%2011.2841%2018.9652%2010.413C17.6596%209.54183%2016.2336%209.10626%2014.6872%209.10626C12.7412%209.10626%2011.1124%209.75904%209.80064%2011.0646C8.48889%2012.3702%207.83301%2014.0021%207.83301%2015.9604C7.83301%2017.0904%208.06148%2018.2314%208.51842%2019.3836C8.97537%2020.5361%209.79134%2021.8548%2010.9663%2023.3399C12.1413%2024.825%2013.7406%2026.5712%2015.7643%2028.5785C17.7879%2030.5858%2020.3663%2033.0054%2023.4997%2035.8375Z%22%20fill%3D%22%23A7A7A7%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var IconUnlock = "data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2216%22%20viewBox%3D%220%200%2017%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.66368%202.01017C9.32164%201.94371%209.98083%202.1241%2010.5133%202.51632C11.0457%202.90854%2011.4134%203.4846%2011.545%204.13269C11.6183%204.49351%2011.9702%204.72662%2012.331%204.65336C12.6918%204.58009%2012.925%204.22819%2012.8517%203.86736C12.6543%202.89524%2012.1027%202.03114%2011.3041%201.44281C10.5054%200.854482%209.51663%200.583899%208.52969%200.68359C7.54691%200.782861%206.63577%201.24224%205.97161%201.97299L5.96306%201.98228C5.29856%202.71803%204.93098%203.67431%204.93156%204.66567L4.93156%206.66675H4.26489C3.16032%206.66675%202.26489%207.56218%202.26489%208.66675V13.3334C2.26489%2014.438%203.16032%2015.3334%204.26489%2015.3334H13.5982C14.7028%2015.3334%2015.5982%2014.438%2015.5982%2013.3334V8.66675C15.5982%207.56218%2014.7028%206.66675%2013.5982%206.66675H6.26489L6.26489%204.66601C6.26423%204.00811%206.50679%203.37331%206.94572%202.88356L6.95268%202.87597C7.39593%202.3852%208.00572%202.07663%208.66368%202.01017ZM4.26489%208.00008C3.8967%208.00008%203.59823%208.29856%203.59823%208.66675V13.3334C3.59823%2013.7016%203.8967%2014.0001%204.26489%2014.0001H13.5982C13.9664%2014.0001%2014.2649%2013.7016%2014.2649%2013.3334V8.66675C14.2649%208.29856%2013.9664%208.00008%2013.5982%208.00008H4.26489Z%22%20fill%3D%22%234D6277%22%2F%3E%3C%2Fsvg%3E";
var IconCross = "data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%3E%3Cpath%20d%3D%22M5.3%2018.7c.2.2.4.3.7.3s.5-.1.7-.3l5.3-5.3%205.3%205.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1%200-1.4L13.4%2012l5.3-5.3c.4-.4.4-1%200-1.4s-1-.4-1.4%200L12%2010.6%206.7%205.3c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l5.3%205.3-5.3%205.3c-.4.4-.4%201%200%201.4z%22%20id%3D%22_icons%22%20fill%3D%22%23ffffff%22%20class%3D%22fill-000000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
var IconRoundedCorner = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20enable-background%3D%22new%200%200%2024%2024%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224px%22%20fill%3D%22%234D6277%22%3E%3Cg%3E%3Crect%20fill%3D%22none%22%20height%3D%2224%22%20width%3D%2224%22%2F%3E%3C%2Fg%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%22M19%2C19h2v2h-2V19z%20M19%2C17h2v-2h-2V17z%20M3%2C13h2v-2H3V13z%20M3%2C17h2v-2H3V17z%20M3%2C9h2V7H3V9z%20M3%2C5h2V3H3V5z%20M7%2C5h2V3H7V5z%20M15%2C21h2v-2h-2V21z%20M11%2C21h2v-2h-2V21z%20M15%2C21h2v-2h-2V21z%20M7%2C21h2v-2H7V21z%20M3%2C21h2v-2H3V21z%20M21%2C8c0-2.76-2.24-5-5-5h-5v2h5%20c1.65%2C0%2C3%2C1.35%2C3%2C3v5h2V8z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
var EditorBg = "/images/small-dots.png";
var topTabBarpadding = '11.51px 14.16px';
var helperSideBarWidth = 280;
var pageSizes = {
A4: 'A4',
A3: 'A3',
A5: 'A5',
Letter: 'Letter',
Legal: 'Legal',
Ledger: 'Ledger',
B5: 'B5',
C5: 'C5'
};
var pageSizesDimensions = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, pageSizes.A4, {
width: 499,
height: 670
}), pageSizes.A3, {
width: 531,
height: 750
}), pageSizes.A5, {
width: 350,
height: 499
}), pageSizes.Letter, {
width: 510,
height: 680
}), pageSizes.Legal, {
width: 440,
height: 750
}), pageSizes.Ledger, {
width: 900,
height: 584
}), pageSizes.B5, {
width: 518,
height: 726
}), pageSizes.C5, {
width: 460,
height: 648
});
var STANDARD_PAPER_SIZES_MM = {
A3: {
width: 297,
height: 420
},
A4: {
width: 210,
height: 297
},
A5: {
width: 148,
height: 210
},
Letter: {
width: 215.9,
height: 279.4
},
Legal: {
width: 215.9,
height: 355.6
},
Ledger: {
width: 431.8,
height: 279.4
},
B5: {
width: 176,
height: 250
},
C5: {
width: 162,
height: 229
}
};
var CANVAS_SIZE_MODES = {
preset: 'preset',
custom: 'custom'
};
var CUSTOM_CANVAS_PRESET_KEY = 'Custom';
var MM_TO_PX_RATIO = pageSizesDimensions[pageSizes.A4].width / STANDARD_PAPER_SIZES_MM.A4.width;
var MIN_CUSTOM_MM = 10;
var MAX_CUSTOM_MM = 2000;
var isValidPresetSize = function isValidPresetSize(size) {
return Boolean(size && pageSizesDimensions[size]);
};
var clampMm = function clampMm(value) {
var parsed = Number(value);
if (!Number.isFinite(parsed)) return null;
var clamped = Math.max(MIN_CUSTOM_MM, Math.min(MAX_CUSTOM_MM, parsed));
return Number(clamped.toFixed(2));
};
var mmToPx = function mmToPx(mm) {
var safeMm = clampMm(mm);
if (!safeMm) return null;
return Math.round(safeMm * MM_TO_PX_RATIO);
};
var getPresetMmDimensions = function getPresetMmDimensions(preset) {
return STANDARD_PAPER_SIZES_MM[preset] || null;
};
var getCanvasSizeLabel = function getCanvasSizeLabel(canvasSize) {
if (!canvasSize) return pageSizes.A4;
if (canvasSize.mode === CANVAS_SIZE_MODES.custom) {
return "".concat(canvasSize.widthMm, " x ").concat(canvasSize.heightMm, " mm");
}
return canvasSize.preset || pageSizes.A4;
};
var normalizeCanvasSize = function normalizeCanvasSize() {
var _pageSizesDimensions$, _pageSizesDimensions$2, _getPresetMmDimension, _getPresetMmDimension2;
var input = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var fallbackPreset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : pageSizes.A4;
var fallback = {
mode: CANVAS_SIZE_MODES.preset,
preset: fallbackPreset,
widthPx: ((_pageSizesDimensions$ = pageSizesDimensions[fallbackPreset]) === null || _pageSizesDimensions$ === void 0 ? void 0 : _pageSizesDimensions$.width) || pageSizesDimensions[pageSizes.A4].width,
heightPx: ((_pageSizesDimensions$2 = pageSizesDimensions[fallbackPreset]) === null || _pageSizesDimensions$2 === void 0 ? void 0 : _pageSizesDimensions$2.height) || pageSizesDimensions[pageSizes.A4].height,
widthMm: ((_getPresetMmDimension = getPresetMmDimensions(fallbackPreset)) === null || _getPresetMmDimension === void 0 ? void 0 : _getPresetMmDimension.width) || STANDARD_PAPER_SIZES_MM.A4.width,
heightMm: ((_getPresetMmDimension2 = getPresetMmDimensions(fallbackPreset)) === null || _getPresetMmDimension2 === void 0 ? void 0 : _getPresetMmDimension2.height) || STANDARD_PAPER_SIZES_MM.A4.height
};
if (!input) return fallback;
if (typeof input === 'string' && isValidPresetSize(input)) {
var mmDims = getPresetMmDimensions(input) || getPresetMmDimensions(fallbackPreset);
return {
mode: CANVAS_SIZE_MODES.preset,
preset: input,
widthPx: pageSizesDimensions[input].width,
heightPx: pageSizesDimensions[input].height,
widthMm: mmDims === null || mmDims === void 0 ? void 0 : mmDims.width,
heightMm: mmDims === null || mmDims === void 0 ? void 0 : mmDims.height
};
}
var mode = input.mode || (isValidPresetSize(input.size) ? CANVAS_SIZE_MODES.preset : null);
var preset = input.preset || input.size;
if (mode === CANVAS_SIZE_MODES.preset && isValidPresetSize(preset)) {
var _mmDims = getPresetMmDimensions(preset) || getPresetMmDimensions(fallbackPreset);
return {
mode: CANVAS_SIZE_MODES.preset,
preset: preset,
widthPx: pageSizesDimensions[preset].width,
heightPx: pageSizesDimensions[preset].height,
widthMm: _mmDims === null || _mmDims === void 0 ? void 0 : _mmDims.width,
heightMm: _mmDims === null || _mmDims === void 0 ? void 0 : _mmDims.height
};
}
var widthMm = clampMm(input.widthMm);
var heightMm = clampMm(input.heightMm);
var widthPx = mmToPx(widthMm);
var heightPx = mmToPx(heightMm);
if (mode === CANVAS_SIZE_MODES.custom && widthPx && heightPx) {
return {
mode: CANVAS_SIZE_MODES.custom,
preset: CUSTOM_CANVAS_PRESET_KEY,
widthMm: widthMm,
heightMm: heightMm,
widthPx: widthPx,
heightPx: heightPx
};
}
return fallback;
};
var sideBarpillsList = {
template: 'Template',
text: 'Text',
image: 'Image',
shape: 'Shape',
qr: 'QR',
whiteLabel: 'White-label'
};
var ButtonVarients = {
primary: 'primary',
secondary: 'secondary'
};
var defaultSideBarImagesList = [IconTools, IconToolsPink];
var textList = [{
text: 'HEADING_1',
fontFamily: 'Open Sans',
fontSize: 18,
color: '#333333',
fontWeight: theme.fontWeights[700],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left',
width: 125
}, {
text: 'HEADING_2',
fontFamily: 'Open Sans',
fontSize: 16,
color: '#333333',
fontWeight: theme.fontWeights[700],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left'
}, {
text: 'SCAN_THIS_QR',
fontFamily: 'Open Sans',
fontSize: 16,
color: '#333333',
fontWeight: theme.fontWeights[400],
textDecoration: 'normal',
fontStyle: 'normal',
textAlign: 'left',
width: 220
}];
var elementTypes = {
pageSize: 'pageSize',
backgroundColor: 'backgroundColor',
backgroundImage: 'backgroundImage',
circle: 'circle',
square: 'square',
triangle: 'triangle',
arrowRight: 'arrowRight',
horizontalLine: 'horizontalLine',
verticalLine: 'verticalLine',
star: 'star',
heart: 'heart',
image: 'image',
qr: 'qr',
text: 'text'
};
var shapesList = [{
shape: elementTypes.circle,
icon: IconCircle
}, {
shape: elementTypes.square,
icon: IconSquare
}, {
shape: elementTypes.triangle,
icon: IconTriangle
}, {
shape: elementTypes.arrowRight,
icon: IconArrowRight
}, {
shape: elementTypes.horizontalLine,
icon: IconHorizontalLine
}, {
shape: elementTypes.verticalLine,
icon: IconVerticalLine
}, {
shape: elementTypes.star,
icon: IconStar
}, {
shape: elementTypes.heart,
icon: IconHeart
}];
var defaultElements = [{
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize,
id: "element".concat(Date.now()),
size: pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4,
cuttingGuideStroke: 0,
cuttingGuideStrokeColor: theme.color.black
}];
var basicTextProps = {
opacity: 1,
text: 'Enter Text Here',
fontSize: 16,
fontFamily: 'Open Sans',
color: theme.color.black,
textDecoration: 'normal',
fontStyle: 'normal',
fontWeight: theme.fontWeights[400],
textAlign: 'left',
lineHeight: 1
// width: 125,
};
var normalFonts = ['Open Sans', 'Roboto', 'Lato', 'Montserrat', 'Source Sans Pro', 'Inter', 'Raleway', 'Poppins', 'Merriweather', 'Noto Sans', 'Work Sans', 'Ubuntu', 'Nunito', 'Playfair Display', 'DM Sans', 'PT Sans', 'Quicksand', 'Baloo 2', 'Amatic SC', 'Plus Jakarta Sans', 'Rubik', 'Oswald', 'Kalam', 'Caveat'];
var funkyFonts = ['Open Sans Condensed', 'Lobster', 'Pacifico', 'Bangers', 'Shadows Into Light', 'Indie Flower', 'Fredericka the Great', 'Chewy', 'Coming Soon', 'Gloria Hallelujah', 'Luckiest Guy', 'Patrick Hand', 'Rock Salt', 'Architects Daughter', 'Boogaloo', 'Concert One', 'Courgette', 'Great Vibes', 'Handlee', 'Mansalva', 'Satisfy', 'Special Elite', 'Titan One'];
var fontFamilies = [].concat(normalFonts, funkyFonts);
var BRING_FORWARD$8 = "Bring Forward";
var SEND_BACKWARD$8 = "Send Backward";
var LOCK$8 = "Lock";
var UNLOCK$8 = "Unlock";
var COPY$8 = "Copy";
var DELETE$8 = "Delete";
var BUTTON$8 = "Button";
var COLLAPSABLE$8 = "Collapsable";
var DROPDOWN$8 = "Dropdown";
var TITLE$8 = "Title";
var ADD_IMAGE$8 = "Add Image";
var DEFAULT$8 = "Default";
var CUSTOM_IMAGES$8 = "Custom Images";
var IMAGE_OPACITY$8 = "Image Opacity";
var LOGO$8 = "Logo";
var SHOW_QR_CODE$8 = "Show QR Code";
var SHOW_LOGO_IN_QR$8 = "Show Logo in QR Code";
var ADD_LOGO$8 = "Add Logo";
var SHAPE_FILL$8 = "Shape Fill";
var SHAPE_OPACITY$8 = "Shape Opacity";
var COLLAPSE$8 = "Collapse";
var TEXT$8 = "Text";
var STROKE_WIDTH_AND_COLOR$8 = "Stroke Width & Color";
var NEW_TEMPLATE$8 = "New Template";
var CUSTOM_TEMPLATES$8 = "My Designs";
var PAGE_SIZE$8 = "Page size";
var BACKGROUND_COLOR$8 = "Background Color";
var BACKGROUND_IMAGE$8 = "Background Image";
var BACKGROUND_IMAGE_OPACITY$8 = "Background Image Opacity";
var CUTTING_GUIDE$8 = "Cutting Guide";
var ADD_TEXT$8 = "Add Text";
var HELP_TEXT$8 = "Help Text";
var BOLD$8 = "Bold";
var ITALIC$8 = "Italic";
var LINE_THROUGH$8 = "Line Through";
var UNDERLINE$8 = "Underline";
var LEFT_ALIGN$8 = "Left Align";
var CENTER_ALIGN$8 = "Center Align";
var RIGHT_ALIGN$8 = "Right Align";
var FONT_FAMILY$8 = "Font Family";
var TEXT_SIZE$8 = "Text Size";
var TEXT_LINE_HEIGHT$8 = "Line & Paragraph Spacing";
var TEXT_COLOR$8 = "Text Color";
var TEXT_OPACITY$8 = "Text Opacity";
var UNDO$8 = "Undo";
var REDO$8 = "Redo";
var SHOW_BRANDING$8 = "Show Fixalert Branding";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$8 = "Unlock premium features to customize your QR code sticker by hiding the company logo and watermark. Upgrade your plan for full control over your design.";
var UPGRADE_PLAN$8 = "Upgrade your plan";
var PREMIUM_SETTINGS$8 = "Premium settings";
var ZOOM_IN_OUT$8 = "Zoom In/Out";
var TEMPLATE$8 = "Template";
var IMAGE$8 = "Image";
var SHAPE$8 = "Shape";
var QR_CODE$8 = "QR Code";
var BRANDING$8 = "Branding";
var QR$8 = "QR";
var WHITE_LABEL$8 = "White-label";
var OPACITY$8 = "Opacity";
var ADD_SHAPES$8 = "Add shapes";
var SETTINGS$8 = "Settings";
var PLEASE_ADD_IMAGES$8 = "Please Add Images";
var SAVE$8 = "Save";
var HEADING_1$8 = "+ Heading 1";
var HEADING_2$8 = "+ Heading 2";
var SCAN_THIS_QR$8 = "Scan this QR code from your mobile to report the issue";
var LOCATION_BREADCRUMB$8 = "property > building > room";
var DOMAIN$8 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$8 = "Show Property Label";
var LOCATION_HELPER$8 = "Enable this to show the property’s location label on the canvas, or disable it to hide it.";
var SHOW_QR_ID$8 = "Show QR ID";
var QR_ID_HELPER$8 = "Enable this to display the unique QR Code ID on the canvas, or disable it to remove it.";
var MONOCHROME_COLOR$8 = "Tint Color";
var MONOCHROME_STRENGTH$8 = "Tint Strength";
var CLEAR_MONOCHROME$8 = "Remove Tint";
var TINT_SHORT$8 = "Tint";
var enTranslations = {
BRING_FORWARD: BRING_FORWARD$8,
SEND_BACKWARD: SEND_BACKWARD$8,
LOCK: LOCK$8,
UNLOCK: UNLOCK$8,
COPY: COPY$8,
DELETE: DELETE$8,
BUTTON: BUTTON$8,
COLLAPSABLE: COLLAPSABLE$8,
DROPDOWN: DROPDOWN$8,
TITLE: TITLE$8,
ADD_IMAGE: ADD_IMAGE$8,
DEFAULT: DEFAULT$8,
CUSTOM_IMAGES: CUSTOM_IMAGES$8,
IMAGE_OPACITY: IMAGE_OPACITY$8,
LOGO: LOGO$8,
SHOW_QR_CODE: SHOW_QR_CODE$8,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$8,
ADD_LOGO: ADD_LOGO$8,
SHAPE_FILL: SHAPE_FILL$8,
SHAPE_OPACITY: SHAPE_OPACITY$8,
COLLAPSE: COLLAPSE$8,
TEXT: TEXT$8,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$8,
NEW_TEMPLATE: NEW_TEMPLATE$8,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$8,
PAGE_SIZE: PAGE_SIZE$8,
BACKGROUND_COLOR: BACKGROUND_COLOR$8,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$8,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$8,
CUTTING_GUIDE: CUTTING_GUIDE$8,
ADD_TEXT: ADD_TEXT$8,
HELP_TEXT: HELP_TEXT$8,
BOLD: BOLD$8,
ITALIC: ITALIC$8,
LINE_THROUGH: LINE_THROUGH$8,
UNDERLINE: UNDERLINE$8,
LEFT_ALIGN: LEFT_ALIGN$8,
CENTER_ALIGN: CENTER_ALIGN$8,
RIGHT_ALIGN: RIGHT_ALIGN$8,
FONT_FAMILY: FONT_FAMILY$8,
TEXT_SIZE: TEXT_SIZE$8,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$8,
TEXT_COLOR: TEXT_COLOR$8,
TEXT_OPACITY: TEXT_OPACITY$8,
UNDO: UNDO$8,
REDO: REDO$8,
SHOW_BRANDING: SHOW_BRANDING$8,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$8,
UPGRADE_PLAN: UPGRADE_PLAN$8,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$8,
ZOOM_IN_OUT: ZOOM_IN_OUT$8,
TEMPLATE: TEMPLATE$8,
IMAGE: IMAGE$8,
SHAPE: SHAPE$8,
QR_CODE: QR_CODE$8,
BRANDING: BRANDING$8,
QR: QR$8,
WHITE_LABEL: WHITE_LABEL$8,
OPACITY: OPACITY$8,
ADD_SHAPES: ADD_SHAPES$8,
SETTINGS: SETTINGS$8,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$8,
SAVE: SAVE$8,
HEADING_1: HEADING_1$8,
HEADING_2: HEADING_2$8,
SCAN_THIS_QR: SCAN_THIS_QR$8,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$8,
DOMAIN: DOMAIN$8,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$8,
LOCATION_HELPER: LOCATION_HELPER$8,
SHOW_QR_ID: SHOW_QR_ID$8,
QR_ID_HELPER: QR_ID_HELPER$8,
MONOCHROME_COLOR: MONOCHROME_COLOR$8,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$8,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$8,
TINT_SHORT: TINT_SHORT$8
};
var BRING_FORWARD$7 = "Перенести вперёд";
var SEND_BACKWARD$7 = "Отправить назад";
var LOCK$7 = "Заблокировать";
var UNLOCK$7 = "Разблокировать";
var COPY$7 = "Копировать";
var DELETE$7 = "Удалить";
var BUTTON$7 = "Кнопка";
var COLLAPSABLE$7 = "Сворачиваемый";
var DROPDOWN$7 = "Выпадающий список";
var TITLE$7 = "Заголовок";
var ADD_IMAGE$7 = "Добавить изображение";
var DEFAULT$7 = "По умолчанию";
var CUSTOM_IMAGES$7 = "Пользовательские изображения";
var IMAGE_OPACITY$7 = "Прозрачность изображения";
var LOGO$7 = "Логотип";
var SHOW_QR_CODE$7 = "Показать QR-код";
var SHOW_LOGO_IN_QR$7 = "Показать логотип в QR-коде";
var ADD_LOGO$7 = "Добавить логотип";
var SHAPE_FILL$7 = "Заливка формы";
var SHAPE_OPACITY$7 = "Прозрачность формы";
var COLLAPSE$7 = "Свернуть";
var TEXT$7 = "Текст";
var STROKE_WIDTH_AND_COLOR$7 = "Толщина и цвет обводки";
var NEW_TEMPLATE$7 = "Новый шаблон";
var CUSTOM_TEMPLATES$7 = "Мои дизайны";
var PAGE_SIZE$7 = "Размер страницы";
var BACKGROUND_COLOR$7 = "Цвет фона";
var BACKGROUND_IMAGE$7 = "Фоновое изображение";
var BACKGROUND_IMAGE_OPACITY$7 = "Прозрачность фонового изображения";
var CUTTING_GUIDE$7 = "Руководство по обрезке";
var ADD_TEXT$7 = "Добавить текст";
var HELP_TEXT$7 = "Справочный текст";
var BOLD$7 = "Жирный";
var ITALIC$7 = "Курсив";
var LINE_THROUGH$7 = "Зачёркнутый";
var UNDERLINE$7 = "Подчёркнутый";
var LEFT_ALIGN$7 = "Выровнять по левому краю";
var CENTER_ALIGN$7 = "Выровнять по центру";
var RIGHT_ALIGN$7 = "Выровнять по правому краю";
var FONT_FAMILY$7 = "Семейство шрифтов";
var TEXT_SIZE$7 = "Размер текста";
var TEXT_LINE_HEIGHT$7 = "Межстрочный и межабзацный интервал";
var TEXT_COLOR$7 = "Цвет текста";
var TEXT_OPACITY$7 = "Прозрачность текста";
var UNDO$7 = "Отменить";
var REDO$7 = "Повторить";
var SHOW_BRANDING$7 = "Показать брендинг Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$7 = "Разблокируйте премиум-функции, чтобы настроить наклейку QR-кода, скрыв логотип компании и водяной знак. Обновите свой план для полного контроля над дизайном.";
var UPGRADE_PLAN$7 = "Обновить план";
var PREMIUM_SETTINGS$7 = "Премиум настройки";
var ZOOM_IN_OUT$7 = "Масштабировать";
var TEMPLATE$7 = "Шаблон";
var IMAGE$7 = "Изображение";
var SHAPE$7 = "Фигура";
var QR_CODE$7 = "QR-код";
var BRANDING$7 = "Брендинг";
var QR$7 = "QR";
var WHITE_LABEL$7 = "Белая метка";
var OPACITY$7 = "Прозрачность";
var ADD_SHAPES$7 = "Добавить фигуры";
var SETTINGS$7 = "Настройки";
var PLEASE_ADD_IMAGES$7 = "Пожалуйста, добавьте изображения";
var SAVE$7 = "Сохранить";
var HEADING_1$7 = "+ Заголовок 1";
var HEADING_2$7 = "+ Заголовок 2";
var SCAN_THIS_QR$7 = "Отсканируйте этот QR-код с помощью мобильного телефона, чтобы сообщить о проблеме";
var LOCATION_BREADCRUMB$7 = "объект > здание > комната";
var DOMAIN$7 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$7 = "Показать метку объекта";
var LOCATION_HELPER$7 = "Включите, чтобы показать метку расположения объекта на холсте, или отключите, чтобы скрыть её.";
var SHOW_QR_ID$7 = "Показать QR-ID";
var QR_ID_HELPER$7 = "Включите, чтобы отобразить уникальный идентификатор QR-кода на холсте, или отключите, чтобы убрать его.";
var MONOCHROME_COLOR$7 = "Цвет тона";
var MONOCHROME_STRENGTH$7 = "Сила тона";
var CLEAR_MONOCHROME$7 = "Убрать тон";
var TINT_SHORT$7 = "Тон";
var ruTranslations = {
BRING_FORWARD: BRING_FORWARD$7,
SEND_BACKWARD: SEND_BACKWARD$7,
LOCK: LOCK$7,
UNLOCK: UNLOCK$7,
COPY: COPY$7,
DELETE: DELETE$7,
BUTTON: BUTTON$7,
COLLAPSABLE: COLLAPSABLE$7,
DROPDOWN: DROPDOWN$7,
TITLE: TITLE$7,
ADD_IMAGE: ADD_IMAGE$7,
DEFAULT: DEFAULT$7,
CUSTOM_IMAGES: CUSTOM_IMAGES$7,
IMAGE_OPACITY: IMAGE_OPACITY$7,
LOGO: LOGO$7,
SHOW_QR_CODE: SHOW_QR_CODE$7,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$7,
ADD_LOGO: ADD_LOGO$7,
SHAPE_FILL: SHAPE_FILL$7,
SHAPE_OPACITY: SHAPE_OPACITY$7,
COLLAPSE: COLLAPSE$7,
TEXT: TEXT$7,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$7,
NEW_TEMPLATE: NEW_TEMPLATE$7,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$7,
PAGE_SIZE: PAGE_SIZE$7,
BACKGROUND_COLOR: BACKGROUND_COLOR$7,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$7,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$7,
CUTTING_GUIDE: CUTTING_GUIDE$7,
ADD_TEXT: ADD_TEXT$7,
HELP_TEXT: HELP_TEXT$7,
BOLD: BOLD$7,
ITALIC: ITALIC$7,
LINE_THROUGH: LINE_THROUGH$7,
UNDERLINE: UNDERLINE$7,
LEFT_ALIGN: LEFT_ALIGN$7,
CENTER_ALIGN: CENTER_ALIGN$7,
RIGHT_ALIGN: RIGHT_ALIGN$7,
FONT_FAMILY: FONT_FAMILY$7,
TEXT_SIZE: TEXT_SIZE$7,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$7,
TEXT_COLOR: TEXT_COLOR$7,
TEXT_OPACITY: TEXT_OPACITY$7,
UNDO: UNDO$7,
REDO: REDO$7,
SHOW_BRANDING: SHOW_BRANDING$7,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$7,
UPGRADE_PLAN: UPGRADE_PLAN$7,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$7,
ZOOM_IN_OUT: ZOOM_IN_OUT$7,
TEMPLATE: TEMPLATE$7,
IMAGE: IMAGE$7,
SHAPE: SHAPE$7,
QR_CODE: QR_CODE$7,
BRANDING: BRANDING$7,
QR: QR$7,
WHITE_LABEL: WHITE_LABEL$7,
OPACITY: OPACITY$7,
ADD_SHAPES: ADD_SHAPES$7,
SETTINGS: SETTINGS$7,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$7,
SAVE: SAVE$7,
HEADING_1: HEADING_1$7,
HEADING_2: HEADING_2$7,
SCAN_THIS_QR: SCAN_THIS_QR$7,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$7,
DOMAIN: DOMAIN$7,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$7,
LOCATION_HELPER: LOCATION_HELPER$7,
SHOW_QR_ID: SHOW_QR_ID$7,
QR_ID_HELPER: QR_ID_HELPER$7,
MONOCHROME_COLOR: MONOCHROME_COLOR$7,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$7,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$7,
TINT_SHORT: TINT_SHORT$7
};
var BRING_FORWARD$6 = "Przenieś do przodu";
var SEND_BACKWARD$6 = "Przenieś do tyłu";
var LOCK$6 = "Zablokuj";
var UNLOCK$6 = "Odblokuj";
var COPY$6 = "Kopiuj";
var DELETE$6 = "Usuń";
var BUTTON$6 = "Przycisk";
var COLLAPSABLE$6 = "Zwijany";
var DROPDOWN$6 = "Lista rozwijana";
var TITLE$6 = "Tytuł";
var ADD_IMAGE$6 = "Dodaj obraz";
var DEFAULT$6 = "Domyślny";
var CUSTOM_IMAGES$6 = "Niestandardowe obrazy";
var IMAGE_OPACITY$6 = "Przezroczystość obrazu";
var LOGO$6 = "Logo";
var SHOW_QR_CODE$6 = "Pokaż kod QR";
var SHOW_LOGO_IN_QR$6 = "Pokaż logo w kodzie QR";
var ADD_LOGO$6 = "Dodaj logo";
var SHAPE_FILL$6 = "Wypełnienie kształtu";
var SHAPE_OPACITY$6 = "Przezroczystość kształtu";
var COLLAPSE$6 = "Zwiń";
var TEXT$6 = "Tekst";
var STROKE_WIDTH_AND_COLOR$6 = "Szerokość i kolor obramowania";
var NEW_TEMPLATE$6 = "Nowy szablon";
var CUSTOM_TEMPLATES$6 = "Moje projekty";
var PAGE_SIZE$6 = "Rozmiar strony";
var BACKGROUND_COLOR$6 = "Kolor tła";
var BACKGROUND_IMAGE$6 = "Obraz tła";
var BACKGROUND_IMAGE_OPACITY$6 = "Przezroczystość obrazu tła";
var CUTTING_GUIDE$6 = "Przewodnik cięcia";
var ADD_TEXT$6 = "Dodaj tekst";
var HELP_TEXT$6 = "Tekst pomocy";
var BOLD$6 = "Pogrubiony";
var ITALIC$6 = "Kursywa";
var LINE_THROUGH$6 = "Przekreślenie";
var UNDERLINE$6 = "Podkreślenie";
var LEFT_ALIGN$6 = "Wyrównaj do lewej";
var CENTER_ALIGN$6 = "Wyrównaj do środka";
var RIGHT_ALIGN$6 = "Wyrównaj do prawej";
var FONT_FAMILY$6 = "Czcionka";
var TEXT_SIZE$6 = "Rozmiar tekstu";
var TEXT_LINE_HEIGHT$6 = "Odstępy między wierszami i akapitami";
var TEXT_COLOR$6 = "Kolor tekstu";
var TEXT_OPACITY$6 = "Przezroczystość tekstu";
var UNDO$6 = "Cofnij";
var REDO$6 = "Ponów";
var SHOW_BRANDING$6 = "Pokaż branding Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$6 = "Odblokuj funkcje premium, aby dostosować naklejkę kodu QR, ukrywając logo firmy i znak wodny. Uaktualnij plan, aby uzyskać pełną kontrolę nad projektem.";
var UPGRADE_PLAN$6 = "Uaktualnij plan";
var PREMIUM_SETTINGS$6 = "Ustawienia premium";
var ZOOM_IN_OUT$6 = "Powiększ/Pomniejsz";
var TEMPLATE$6 = "Szablon";
var IMAGE$6 = "Obraz";
var SHAPE$6 = "Kształt";
var QR_CODE$6 = "Kod QR";
var BRANDING$6 = "Branding";
var QR$6 = "QR";
var WHITE_LABEL$6 = "Biała etykieta";
var OPACITY$6 = "Przezroczystość";
var ADD_SHAPES$6 = "Dodaj kształty";
var SETTINGS$6 = "Ustawienia";
var PLEASE_ADD_IMAGES$6 = "Dodaj obrazy";
var SAVE$6 = "Zapisz";
var HEADING_1$6 = "+ Nagłówek 1";
var HEADING_2$6 = "+ Nagłówek 2";
var SCAN_THIS_QR$6 = "Zeskanuj ten kod QR telefonem, aby zgłosić problem";
var LOCATION_BREADCRUMB$6 = "nieruchomość > budynek > pokój";
var DOMAIN$6 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$6 = "Pokaż etykietę nieruchomości";
var LOCATION_HELPER$6 = "Włącz tę opcję, aby wyświetlić etykietę lokalizacji nieruchomości na płótnie, lub wyłącz, aby ją ukryć.";
var SHOW_QR_ID$6 = "Pokaż identyfikator QR";
var QR_ID_HELPER$6 = "Włącz tę opcję, aby wyświetlić unikalny identyfikator kodu QR na płótnie, lub wyłącz, aby go usunąć.";
var MONOCHROME_COLOR$6 = "Kolor tonu";
var MONOCHROME_STRENGTH$6 = "Siła tonu";
var CLEAR_MONOCHROME$6 = "Usuń ton";
var TINT_SHORT$6 = "Ton";
var plTranslations = {
BRING_FORWARD: BRING_FORWARD$6,
SEND_BACKWARD: SEND_BACKWARD$6,
LOCK: LOCK$6,
UNLOCK: UNLOCK$6,
COPY: COPY$6,
DELETE: DELETE$6,
BUTTON: BUTTON$6,
COLLAPSABLE: COLLAPSABLE$6,
DROPDOWN: DROPDOWN$6,
TITLE: TITLE$6,
ADD_IMAGE: ADD_IMAGE$6,
DEFAULT: DEFAULT$6,
CUSTOM_IMAGES: CUSTOM_IMAGES$6,
IMAGE_OPACITY: IMAGE_OPACITY$6,
LOGO: LOGO$6,
SHOW_QR_CODE: SHOW_QR_CODE$6,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$6,
ADD_LOGO: ADD_LOGO$6,
SHAPE_FILL: SHAPE_FILL$6,
SHAPE_OPACITY: SHAPE_OPACITY$6,
COLLAPSE: COLLAPSE$6,
TEXT: TEXT$6,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$6,
NEW_TEMPLATE: NEW_TEMPLATE$6,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$6,
PAGE_SIZE: PAGE_SIZE$6,
BACKGROUND_COLOR: BACKGROUND_COLOR$6,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$6,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$6,
CUTTING_GUIDE: CUTTING_GUIDE$6,
ADD_TEXT: ADD_TEXT$6,
HELP_TEXT: HELP_TEXT$6,
BOLD: BOLD$6,
ITALIC: ITALIC$6,
LINE_THROUGH: LINE_THROUGH$6,
UNDERLINE: UNDERLINE$6,
LEFT_ALIGN: LEFT_ALIGN$6,
CENTER_ALIGN: CENTER_ALIGN$6,
RIGHT_ALIGN: RIGHT_ALIGN$6,
FONT_FAMILY: FONT_FAMILY$6,
TEXT_SIZE: TEXT_SIZE$6,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$6,
TEXT_COLOR: TEXT_COLOR$6,
TEXT_OPACITY: TEXT_OPACITY$6,
UNDO: UNDO$6,
REDO: REDO$6,
SHOW_BRANDING: SHOW_BRANDING$6,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$6,
UPGRADE_PLAN: UPGRADE_PLAN$6,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$6,
ZOOM_IN_OUT: ZOOM_IN_OUT$6,
TEMPLATE: TEMPLATE$6,
IMAGE: IMAGE$6,
SHAPE: SHAPE$6,
QR_CODE: QR_CODE$6,
BRANDING: BRANDING$6,
QR: QR$6,
WHITE_LABEL: WHITE_LABEL$6,
OPACITY: OPACITY$6,
ADD_SHAPES: ADD_SHAPES$6,
SETTINGS: SETTINGS$6,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$6,
SAVE: SAVE$6,
HEADING_1: HEADING_1$6,
HEADING_2: HEADING_2$6,
SCAN_THIS_QR: SCAN_THIS_QR$6,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$6,
DOMAIN: DOMAIN$6,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$6,
LOCATION_HELPER: LOCATION_HELPER$6,
SHOW_QR_ID: SHOW_QR_ID$6,
QR_ID_HELPER: QR_ID_HELPER$6,
MONOCHROME_COLOR: MONOCHROME_COLOR$6,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$6,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$6,
TINT_SHORT: TINT_SHORT$6
};
var BRING_FORWARD$5 = "Nach vorne bringen";
var SEND_BACKWARD$5 = "Nach hinten senden";
var LOCK$5 = "Sperren";
var UNLOCK$5 = "Entsperren";
var COPY$5 = "Kopieren";
var DELETE$5 = "Löschen";
var BUTTON$5 = "Button";
var COLLAPSABLE$5 = "Einklappbar";
var DROPDOWN$5 = "Dropdown";
var TITLE$5 = "Titel";
var ADD_IMAGE$5 = "Bild hinzufügen";
var DEFAULT$5 = "Standard";
var CUSTOM_IMAGES$5 = "Benutzerdefinierte Bilder";
var IMAGE_OPACITY$5 = "Bildtransparenz";
var LOGO$5 = "Logo";
var SHOW_QR_CODE$5 = "QR-Code anzeigen";
var SHOW_LOGO_IN_QR$5 = "Logo im QR-Code anzeigen";
var ADD_LOGO$5 = "Logo hinzufügen";
var SHAPE_FILL$5 = "Formfüllung";
var SHAPE_OPACITY$5 = "Formtransparenz";
var COLLAPSE$5 = "Einklappen";
var TEXT$5 = "Text";
var STROKE_WIDTH_AND_COLOR$5 = "Strichbreite und -farbe";
var NEW_TEMPLATE$5 = "Neue Vorlage";
var CUSTOM_TEMPLATES$5 = "Meine Designs";
var PAGE_SIZE$5 = "Seitengröße";
var BACKGROUND_COLOR$5 = "Hintergrundfarbe";
var BACKGROUND_IMAGE$5 = "Hintergrundbild";
var BACKGROUND_IMAGE_OPACITY$5 = "Transparenz des Hintergrundbildes";
var CUTTING_GUIDE$5 = "Schnittführung";
var ADD_TEXT$5 = "Text hinzufügen";
var HELP_TEXT$5 = "Hilfetext";
var BOLD$5 = "Fett";
var ITALIC$5 = "Kursiv";
var LINE_THROUGH$5 = "Durchgestrichen";
var UNDERLINE$5 = "Unterstrichen";
var LEFT_ALIGN$5 = "Linksbündig";
var CENTER_ALIGN$5 = "Zentriert";
var RIGHT_ALIGN$5 = "Rechtsbündig";
var FONT_FAMILY$5 = "Schriftart";
var TEXT_SIZE$5 = "Textgröße";
var TEXT_LINE_HEIGHT$5 = "Zeilen- & Absatzabstand";
var TEXT_COLOR$5 = "Textfarbe";
var TEXT_OPACITY$5 = "Texttransparenz";
var UNDO$5 = "Rückgängig";
var REDO$5 = "Wiederholen";
var SHOW_BRANDING$5 = "Fixalert-Branding anzeigen";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$5 = "Schalte Premiumfunktionen frei, um deinen QR-Code-Sticker anzupassen, indem du das Firmenlogo und das Wasserzeichen ausblendest. Aktualisiere deinen Plan für volle Designkontrolle.";
var UPGRADE_PLAN$5 = "Plan upgraden";
var PREMIUM_SETTINGS$5 = "Premium-Einstellungen";
var ZOOM_IN_OUT$5 = "Vergrößern/Verkleinern";
var TEMPLATE$5 = "Vorlage";
var IMAGE$5 = "Bild";
var SHAPE$5 = "Form";
var QR_CODE$5 = "QR-Code";
var BRANDING$5 = "Branding";
var QR$5 = "QR";
var WHITE_LABEL$5 = "White-Label";
var OPACITY$5 = "Transparenz";
var ADD_SHAPES$5 = "Formen hinzufügen";
var SETTINGS$5 = "Einstellungen";
var PLEASE_ADD_IMAGES$5 = "Bitte Bilder hinzufügen";
var SAVE$5 = "Speichern";
var HEADING_1$5 = "+ Überschrift 1";
var HEADING_2$5 = "+ Überschrift 2";
var SCAN_THIS_QR$5 = "Scannen Sie diesen QR-Code mit Ihrem Mobiltelefon, um das Problem zu melden";
var LOCATION_BREADCRUMB$5 = "Objekt > Gebäude > Raum";
var DOMAIN$5 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$5 = "Eigenschaftsbeschriftung anzeigen";
var LOCATION_HELPER$5 = "Aktivieren Sie dies, um die Standortbeschriftung der Eigenschaft auf der Leinwand anzuzeigen, oder deaktivieren Sie es, um sie auszublenden.";
var SHOW_QR_ID$5 = "QR-ID anzeigen";
var QR_ID_HELPER$5 = "Aktivieren Sie dies, um die eindeutige QR-Code-ID auf der Leinwand anzuzeigen, oder deaktivieren Sie es, um sie zu entfernen.";
var MONOCHROME_COLOR$5 = "Tönungsfarbe";
var MONOCHROME_STRENGTH$5 = "Tönungsstärke";
var CLEAR_MONOCHROME$5 = "Tönung entfernen";
var TINT_SHORT$5 = "Tönung";
var deTranslations = {
BRING_FORWARD: BRING_FORWARD$5,
SEND_BACKWARD: SEND_BACKWARD$5,
LOCK: LOCK$5,
UNLOCK: UNLOCK$5,
COPY: COPY$5,
DELETE: DELETE$5,
BUTTON: BUTTON$5,
COLLAPSABLE: COLLAPSABLE$5,
DROPDOWN: DROPDOWN$5,
TITLE: TITLE$5,
ADD_IMAGE: ADD_IMAGE$5,
DEFAULT: DEFAULT$5,
CUSTOM_IMAGES: CUSTOM_IMAGES$5,
IMAGE_OPACITY: IMAGE_OPACITY$5,
LOGO: LOGO$5,
SHOW_QR_CODE: SHOW_QR_CODE$5,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$5,
ADD_LOGO: ADD_LOGO$5,
SHAPE_FILL: SHAPE_FILL$5,
SHAPE_OPACITY: SHAPE_OPACITY$5,
COLLAPSE: COLLAPSE$5,
TEXT: TEXT$5,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$5,
NEW_TEMPLATE: NEW_TEMPLATE$5,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$5,
PAGE_SIZE: PAGE_SIZE$5,
BACKGROUND_COLOR: BACKGROUND_COLOR$5,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$5,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$5,
CUTTING_GUIDE: CUTTING_GUIDE$5,
ADD_TEXT: ADD_TEXT$5,
HELP_TEXT: HELP_TEXT$5,
BOLD: BOLD$5,
ITALIC: ITALIC$5,
LINE_THROUGH: LINE_THROUGH$5,
UNDERLINE: UNDERLINE$5,
LEFT_ALIGN: LEFT_ALIGN$5,
CENTER_ALIGN: CENTER_ALIGN$5,
RIGHT_ALIGN: RIGHT_ALIGN$5,
FONT_FAMILY: FONT_FAMILY$5,
TEXT_SIZE: TEXT_SIZE$5,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$5,
TEXT_COLOR: TEXT_COLOR$5,
TEXT_OPACITY: TEXT_OPACITY$5,
UNDO: UNDO$5,
REDO: REDO$5,
SHOW_BRANDING: SHOW_BRANDING$5,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$5,
UPGRADE_PLAN: UPGRADE_PLAN$5,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$5,
ZOOM_IN_OUT: ZOOM_IN_OUT$5,
TEMPLATE: TEMPLATE$5,
IMAGE: IMAGE$5,
SHAPE: SHAPE$5,
QR_CODE: QR_CODE$5,
BRANDING: BRANDING$5,
QR: QR$5,
WHITE_LABEL: WHITE_LABEL$5,
OPACITY: OPACITY$5,
ADD_SHAPES: ADD_SHAPES$5,
SETTINGS: SETTINGS$5,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$5,
SAVE: SAVE$5,
HEADING_1: HEADING_1$5,
HEADING_2: HEADING_2$5,
SCAN_THIS_QR: SCAN_THIS_QR$5,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$5,
DOMAIN: DOMAIN$5,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$5,
LOCATION_HELPER: LOCATION_HELPER$5,
SHOW_QR_ID: SHOW_QR_ID$5,
QR_ID_HELPER: QR_ID_HELPER$5,
MONOCHROME_COLOR: MONOCHROME_COLOR$5,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$5,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$5,
TINT_SHORT: TINT_SHORT$5
};
var BRING_FORWARD$4 = "Traer al frente";
var SEND_BACKWARD$4 = "Enviar hacia atrás";
var LOCK$4 = "Bloquear";
var UNLOCK$4 = "Desbloquear";
var COPY$4 = "Copiar";
var DELETE$4 = "Eliminar";
var BUTTON$4 = "Botón";
var COLLAPSABLE$4 = "Colapsable";
var DROPDOWN$4 = "Desplegable";
var TITLE$4 = "Título";
var ADD_IMAGE$4 = "Agregar imagen";
var DEFAULT$4 = "Predeterminado";
var CUSTOM_IMAGES$4 = "Imágenes personalizadas";
var IMAGE_OPACITY$4 = "Opacidad de imagen";
var LOGO$4 = "Logo";
var SHOW_QR_CODE$4 = "Mostrar código QR";
var SHOW_LOGO_IN_QR$4 = "Mostrar logo en el código QR";
var ADD_LOGO$4 = "Agregar logo";
var SHAPE_FILL$4 = "Relleno de forma";
var SHAPE_OPACITY$4 = "Opacidad de forma";
var COLLAPSE$4 = "Colapsar";
var TEXT$4 = "Texto";
var STROKE_WIDTH_AND_COLOR$4 = "Grosor y color del trazo";
var NEW_TEMPLATE$4 = "Nueva plantilla";
var CUSTOM_TEMPLATES$4 = "Mis diseños";
var PAGE_SIZE$4 = "Tamaño de página";
var BACKGROUND_COLOR$4 = "Color de fondo";
var BACKGROUND_IMAGE$4 = "Imagen de fondo";
var BACKGROUND_IMAGE_OPACITY$4 = "Opacidad de imagen de fondo";
var CUTTING_GUIDE$4 = "Guía de corte";
var ADD_TEXT$4 = "Agregar texto";
var HELP_TEXT$4 = "Texto de ayuda";
var BOLD$4 = "Negrita";
var ITALIC$4 = "Cursiva";
var LINE_THROUGH$4 = "Tachado";
var UNDERLINE$4 = "Subrayado";
var LEFT_ALIGN$4 = "Alinear a la izquierda";
var CENTER_ALIGN$4 = "Centrar";
var RIGHT_ALIGN$4 = "Alinear a la derecha";
var FONT_FAMILY$4 = "Tipo de letra";
var TEXT_SIZE$4 = "Tamaño del texto";
var TEXT_LINE_HEIGHT$4 = "Espaciado de línea y párrafo";
var TEXT_COLOR$4 = "Color del texto";
var TEXT_OPACITY$4 = "Opacidad del texto";
var UNDO$4 = "Deshacer";
var REDO$4 = "Rehacer";
var SHOW_BRANDING$4 = "Mostrar marca de Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$4 = "Desbloquea funciones premium para personalizar tu etiqueta de código QR ocultando el logotipo y la marca de agua. Mejora tu plan para un control total del diseño.";
var UPGRADE_PLAN$4 = "Mejorar plan";
var PREMIUM_SETTINGS$4 = "Ajustes premium";
var ZOOM_IN_OUT$4 = "Zoom";
var TEMPLATE$4 = "Plantilla";
var IMAGE$4 = "Imagen";
var SHAPE$4 = "Forma";
var QR_CODE$4 = "Código QR";
var BRANDING$4 = "Marca";
var QR$4 = "QR";
var WHITE_LABEL$4 = "Etiqueta blanca";
var OPACITY$4 = "Opacidad";
var ADD_SHAPES$4 = "Agregar formas";
var SETTINGS$4 = "Ajustes";
var PLEASE_ADD_IMAGES$4 = "Por favor agrega imágenes";
var SAVE$4 = "Guardar";
var HEADING_1$4 = "+ Encabezado 1";
var HEADING_2$4 = "+ Encabezado 2";
var SCAN_THIS_QR$4 = "Escanee este código QR con su móvil para reportar el problema";
var LOCATION_BREADCRUMB$4 = "propiedad > edificio > habitación";
var DOMAIN$4 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$4 = "Mostrar etiqueta de propiedad";
var LOCATION_HELPER$4 = "Active esto para mostrar la etiqueta de ubicación de la propiedad en el lienzo, o desactívelo para ocultarla.";
var SHOW_QR_ID$4 = "Mostrar ID de QR";
var QR_ID_HELPER$4 = "Active esto para mostrar el identificador único del código QR en el lienzo, o desactívelo para eliminarlo.";
var MONOCHROME_COLOR$4 = "Color de tinte";
var MONOCHROME_STRENGTH$4 = "Intensidad del tinte";
var CLEAR_MONOCHROME$4 = "Eliminar tinte";
var TINT_SHORT$4 = "Tinte";
var esTranslations = {
BRING_FORWARD: BRING_FORWARD$4,
SEND_BACKWARD: SEND_BACKWARD$4,
LOCK: LOCK$4,
UNLOCK: UNLOCK$4,
COPY: COPY$4,
DELETE: DELETE$4,
BUTTON: BUTTON$4,
COLLAPSABLE: COLLAPSABLE$4,
DROPDOWN: DROPDOWN$4,
TITLE: TITLE$4,
ADD_IMAGE: ADD_IMAGE$4,
DEFAULT: DEFAULT$4,
CUSTOM_IMAGES: CUSTOM_IMAGES$4,
IMAGE_OPACITY: IMAGE_OPACITY$4,
LOGO: LOGO$4,
SHOW_QR_CODE: SHOW_QR_CODE$4,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$4,
ADD_LOGO: ADD_LOGO$4,
SHAPE_FILL: SHAPE_FILL$4,
SHAPE_OPACITY: SHAPE_OPACITY$4,
COLLAPSE: COLLAPSE$4,
TEXT: TEXT$4,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$4,
NEW_TEMPLATE: NEW_TEMPLATE$4,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$4,
PAGE_SIZE: PAGE_SIZE$4,
BACKGROUND_COLOR: BACKGROUND_COLOR$4,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$4,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$4,
CUTTING_GUIDE: CUTTING_GUIDE$4,
ADD_TEXT: ADD_TEXT$4,
HELP_TEXT: HELP_TEXT$4,
BOLD: BOLD$4,
ITALIC: ITALIC$4,
LINE_THROUGH: LINE_THROUGH$4,
UNDERLINE: UNDERLINE$4,
LEFT_ALIGN: LEFT_ALIGN$4,
CENTER_ALIGN: CENTER_ALIGN$4,
RIGHT_ALIGN: RIGHT_ALIGN$4,
FONT_FAMILY: FONT_FAMILY$4,
TEXT_SIZE: TEXT_SIZE$4,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$4,
TEXT_COLOR: TEXT_COLOR$4,
TEXT_OPACITY: TEXT_OPACITY$4,
UNDO: UNDO$4,
REDO: REDO$4,
SHOW_BRANDING: SHOW_BRANDING$4,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$4,
UPGRADE_PLAN: UPGRADE_PLAN$4,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$4,
ZOOM_IN_OUT: ZOOM_IN_OUT$4,
TEMPLATE: TEMPLATE$4,
IMAGE: IMAGE$4,
SHAPE: SHAPE$4,
QR_CODE: QR_CODE$4,
BRANDING: BRANDING$4,
QR: QR$4,
WHITE_LABEL: WHITE_LABEL$4,
OPACITY: OPACITY$4,
ADD_SHAPES: ADD_SHAPES$4,
SETTINGS: SETTINGS$4,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$4,
SAVE: SAVE$4,
HEADING_1: HEADING_1$4,
HEADING_2: HEADING_2$4,
SCAN_THIS_QR: SCAN_THIS_QR$4,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$4,
DOMAIN: DOMAIN$4,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$4,
LOCATION_HELPER: LOCATION_HELPER$4,
SHOW_QR_ID: SHOW_QR_ID$4,
QR_ID_HELPER: QR_ID_HELPER$4,
MONOCHROME_COLOR: MONOCHROME_COLOR$4,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$4,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$4,
TINT_SHORT: TINT_SHORT$4
};
var BRING_FORWARD$3 = "Mettre au premier plan";
var SEND_BACKWARD$3 = "Envoyer en arrière";
var LOCK$3 = "Verrouiller";
var UNLOCK$3 = "Déverrouiller";
var COPY$3 = "Copier";
var DELETE$3 = "Supprimer";
var BUTTON$3 = "Bouton";
var COLLAPSABLE$3 = "Repliable";
var DROPDOWN$3 = "Menu déroulant";
var TITLE$3 = "Titre";
var ADD_IMAGE$3 = "Ajouter une image";
var DEFAULT$3 = "Par défaut";
var CUSTOM_IMAGES$3 = "Images personnalisées";
var IMAGE_OPACITY$3 = "Opacité de l'image";
var LOGO$3 = "Logo";
var SHOW_QR_CODE$3 = "Afficher le code QR";
var SHOW_LOGO_IN_QR$3 = "Afficher le logo dans le code QR";
var ADD_LOGO$3 = "Ajouter un logo";
var SHAPE_FILL$3 = "Remplissage de forme";
var SHAPE_OPACITY$3 = "Opacité de la forme";
var COLLAPSE$3 = "Réduire";
var TEXT$3 = "Texte";
var STROKE_WIDTH_AND_COLOR$3 = "Largeur et couleur du trait";
var NEW_TEMPLATE$3 = "Nouveau modèle";
var CUSTOM_TEMPLATES$3 = "Mes créations";
var PAGE_SIZE$3 = "Taille de page";
var BACKGROUND_COLOR$3 = "Couleur d’arrière-plan";
var BACKGROUND_IMAGE$3 = "Image d’arrière-plan";
var BACKGROUND_IMAGE_OPACITY$3 = "Opacité de l’image d’arrière-plan";
var CUTTING_GUIDE$3 = "Guide de découpe";
var ADD_TEXT$3 = "Ajouter du texte";
var HELP_TEXT$3 = "Texte d’aide";
var BOLD$3 = "Gras";
var ITALIC$3 = "Italique";
var LINE_THROUGH$3 = "Barré";
var UNDERLINE$3 = "Souligné";
var LEFT_ALIGN$3 = "Aligner à gauche";
var CENTER_ALIGN$3 = "Centrer";
var RIGHT_ALIGN$3 = "Aligner à droite";
var FONT_FAMILY$3 = "Police";
var TEXT_SIZE$3 = "Taille du texte";
var TEXT_LINE_HEIGHT$3 = "Espacement des lignes et des paragraphes";
var TEXT_COLOR$3 = "Couleur du texte";
var TEXT_OPACITY$3 = "Opacité du texte";
var UNDO$3 = "Annuler";
var REDO$3 = "Rétablir";
var SHOW_BRANDING$3 = "Afficher la marque Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$3 = "Déverrouillez les fonctionnalités premium pour personnaliser votre étiquette QR en masquant le logo et le filigrane. Passez à une formule supérieure pour un contrôle total du design.";
var UPGRADE_PLAN$3 = "Mettre à niveau le plan";
var PREMIUM_SETTINGS$3 = "Paramètres premium";
var ZOOM_IN_OUT$3 = "Zoom";
var TEMPLATE$3 = "Modèle";
var IMAGE$3 = "Image";
var SHAPE$3 = "Forme";
var QR_CODE$3 = "Code QR";
var BRANDING$3 = "Marque";
var QR$3 = "QR";
var WHITE_LABEL$3 = "Étiquette blanche";
var OPACITY$3 = "Opacité";
var ADD_SHAPES$3 = "Ajouter des formes";
var SETTINGS$3 = "Paramètres";
var PLEASE_ADD_IMAGES$3 = "Veuillez ajouter des images";
var SAVE$3 = "Enregistrer";
var HEADING_1$3 = "+ Titre 1";
var HEADING_2$3 = "+ Titre 2";
var SCAN_THIS_QR$3 = "Scannez ce code QR avec votre mobile pour signaler le problème";
var LOCATION_BREADCRUMB$3 = "propriété > bâtiment > pièce";
var DOMAIN$3 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$3 = "Afficher l’étiquette de propriété";
var LOCATION_HELPER$3 = "Activez ceci pour afficher l’étiquette de l’emplacement de la propriété sur la zone de travail, ou désactivez-le pour la masquer.";
var SHOW_QR_ID$3 = "Afficher l’ID du QR";
var QR_ID_HELPER$3 = "Activez ceci pour afficher l’ID unique du code QR sur la zone de travail, ou désactivez-le pour le supprimer.";
var MONOCHROME_COLOR$3 = "Couleur de teinte";
var MONOCHROME_STRENGTH$3 = "Intensité de la teinte";
var CLEAR_MONOCHROME$3 = "Retirer la teinte";
var TINT_SHORT$3 = "Teinte";
var frTranslations = {
BRING_FORWARD: BRING_FORWARD$3,
SEND_BACKWARD: SEND_BACKWARD$3,
LOCK: LOCK$3,
UNLOCK: UNLOCK$3,
COPY: COPY$3,
DELETE: DELETE$3,
BUTTON: BUTTON$3,
COLLAPSABLE: COLLAPSABLE$3,
DROPDOWN: DROPDOWN$3,
TITLE: TITLE$3,
ADD_IMAGE: ADD_IMAGE$3,
DEFAULT: DEFAULT$3,
CUSTOM_IMAGES: CUSTOM_IMAGES$3,
IMAGE_OPACITY: IMAGE_OPACITY$3,
LOGO: LOGO$3,
SHOW_QR_CODE: SHOW_QR_CODE$3,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$3,
ADD_LOGO: ADD_LOGO$3,
SHAPE_FILL: SHAPE_FILL$3,
SHAPE_OPACITY: SHAPE_OPACITY$3,
COLLAPSE: COLLAPSE$3,
TEXT: TEXT$3,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$3,
NEW_TEMPLATE: NEW_TEMPLATE$3,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$3,
PAGE_SIZE: PAGE_SIZE$3,
BACKGROUND_COLOR: BACKGROUND_COLOR$3,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$3,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$3,
CUTTING_GUIDE: CUTTING_GUIDE$3,
ADD_TEXT: ADD_TEXT$3,
HELP_TEXT: HELP_TEXT$3,
BOLD: BOLD$3,
ITALIC: ITALIC$3,
LINE_THROUGH: LINE_THROUGH$3,
UNDERLINE: UNDERLINE$3,
LEFT_ALIGN: LEFT_ALIGN$3,
CENTER_ALIGN: CENTER_ALIGN$3,
RIGHT_ALIGN: RIGHT_ALIGN$3,
FONT_FAMILY: FONT_FAMILY$3,
TEXT_SIZE: TEXT_SIZE$3,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$3,
TEXT_COLOR: TEXT_COLOR$3,
TEXT_OPACITY: TEXT_OPACITY$3,
UNDO: UNDO$3,
REDO: REDO$3,
SHOW_BRANDING: SHOW_BRANDING$3,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$3,
UPGRADE_PLAN: UPGRADE_PLAN$3,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$3,
ZOOM_IN_OUT: ZOOM_IN_OUT$3,
TEMPLATE: TEMPLATE$3,
IMAGE: IMAGE$3,
SHAPE: SHAPE$3,
QR_CODE: QR_CODE$3,
BRANDING: BRANDING$3,
QR: QR$3,
WHITE_LABEL: WHITE_LABEL$3,
OPACITY: OPACITY$3,
ADD_SHAPES: ADD_SHAPES$3,
SETTINGS: SETTINGS$3,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$3,
SAVE: SAVE$3,
HEADING_1: HEADING_1$3,
HEADING_2: HEADING_2$3,
SCAN_THIS_QR: SCAN_THIS_QR$3,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$3,
DOMAIN: DOMAIN$3,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$3,
LOCATION_HELPER: LOCATION_HELPER$3,
SHOW_QR_ID: SHOW_QR_ID$3,
QR_ID_HELPER: QR_ID_HELPER$3,
MONOCHROME_COLOR: MONOCHROME_COLOR$3,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$3,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$3,
TINT_SHORT: TINT_SHORT$3
};
var BRING_FORWARD$2 = "Porta in primo piano";
var SEND_BACKWARD$2 = "Invia indietro";
var LOCK$2 = "Blocca";
var UNLOCK$2 = "Sblocca";
var COPY$2 = "Copia";
var DELETE$2 = "Elimina";
var BUTTON$2 = "Pulsante";
var COLLAPSABLE$2 = "Collassabile";
var DROPDOWN$2 = "Menu a discesa";
var TITLE$2 = "Titolo";
var ADD_IMAGE$2 = "Aggiungi immagine";
var DEFAULT$2 = "Predefinito";
var CUSTOM_IMAGES$2 = "Immagini personalizzate";
var IMAGE_OPACITY$2 = "Opacità dell'immagine";
var LOGO$2 = "Logo";
var SHOW_QR_CODE$2 = "Mostra codice QR";
var SHOW_LOGO_IN_QR$2 = "Mostra il logo nel codice QR";
var ADD_LOGO$2 = "Aggiungi logo";
var SHAPE_FILL$2 = "Riempimento forma";
var SHAPE_OPACITY$2 = "Opacità della forma";
var COLLAPSE$2 = "Comprimi";
var TEXT$2 = "Testo";
var STROKE_WIDTH_AND_COLOR$2 = "Spessore e colore del tratto";
var NEW_TEMPLATE$2 = "Nuovo modello";
var CUSTOM_TEMPLATES$2 = "I miei progetti";
var PAGE_SIZE$2 = "Dimensione della pagina";
var BACKGROUND_COLOR$2 = "Colore di sfondo";
var BACKGROUND_IMAGE$2 = "Immagine di sfondo";
var BACKGROUND_IMAGE_OPACITY$2 = "Opacità dell'immagine di sfondo";
var CUTTING_GUIDE$2 = "Guida al taglio";
var ADD_TEXT$2 = "Aggiungi testo";
var HELP_TEXT$2 = "Testo di aiuto";
var BOLD$2 = "Grassetto";
var ITALIC$2 = "Corsivo";
var LINE_THROUGH$2 = "Barrato";
var UNDERLINE$2 = "Sottolineato";
var LEFT_ALIGN$2 = "Allinea a sinistra";
var CENTER_ALIGN$2 = "Centra";
var RIGHT_ALIGN$2 = "Allinea a destra";
var FONT_FAMILY$2 = "Famiglia di font";
var TEXT_SIZE$2 = "Dimensione del testo";
var TEXT_LINE_HEIGHT$2 = "Spaziatura tra righe e paragrafi";
var TEXT_COLOR$2 = "Colore del testo";
var TEXT_OPACITY$2 = "Opacità del testo";
var UNDO$2 = "Annulla";
var REDO$2 = "Ripeti";
var SHOW_BRANDING$2 = "Mostra marchio Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$2 = "Sblocca le funzionalità premium per personalizzare l'adesivo del codice QR nascondendo il logo e la filigrana. Passa al piano superiore per il pieno controllo sul design.";
var UPGRADE_PLAN$2 = "Aggiorna piano";
var PREMIUM_SETTINGS$2 = "Impostazioni premium";
var ZOOM_IN_OUT$2 = "Zoom avanti/indietro";
var TEMPLATE$2 = "Modello";
var IMAGE$2 = "Immagine";
var SHAPE$2 = "Forma";
var QR_CODE$2 = "Codice QR";
var BRANDING$2 = "Branding";
var QR$2 = "QR";
var WHITE_LABEL$2 = "White-label";
var OPACITY$2 = "Opacità";
var ADD_SHAPES$2 = "Aggiungi forme";
var SETTINGS$2 = "Impostazioni";
var PLEASE_ADD_IMAGES$2 = "Aggiungi immagini";
var SAVE$2 = "Salva";
var HEADING_1$2 = "+ Intestazione 1";
var HEADING_2$2 = "+ Intestazione 2";
var SCAN_THIS_QR$2 = "Scansiona questo codice QR con il tuo cellulare per segnalare il problema";
var LOCATION_BREADCRUMB$2 = "proprietà > edificio > stanza";
var DOMAIN$2 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$2 = "Mostra etichetta proprietà";
var LOCATION_HELPER$2 = "Abilita questa opzione per mostrare l’etichetta della posizione della proprietà sulla tela, oppure disabilitala per nasconderla.";
var SHOW_QR_ID$2 = "Mostra ID QR";
var QR_ID_HELPER$2 = "Abilita questa opzione per mostrare l’ID univoco del codice QR sulla tela, oppure disabilitala per rimuoverlo.";
var MONOCHROME_COLOR$2 = "Colore tinta";
var MONOCHROME_STRENGTH$2 = "Intensità della tinta";
var CLEAR_MONOCHROME$2 = "Rimuovi tinta";
var TINT_SHORT$2 = "Tinta";
var itTranslations = {
BRING_FORWARD: BRING_FORWARD$2,
SEND_BACKWARD: SEND_BACKWARD$2,
LOCK: LOCK$2,
UNLOCK: UNLOCK$2,
COPY: COPY$2,
DELETE: DELETE$2,
BUTTON: BUTTON$2,
COLLAPSABLE: COLLAPSABLE$2,
DROPDOWN: DROPDOWN$2,
TITLE: TITLE$2,
ADD_IMAGE: ADD_IMAGE$2,
DEFAULT: DEFAULT$2,
CUSTOM_IMAGES: CUSTOM_IMAGES$2,
IMAGE_OPACITY: IMAGE_OPACITY$2,
LOGO: LOGO$2,
SHOW_QR_CODE: SHOW_QR_CODE$2,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$2,
ADD_LOGO: ADD_LOGO$2,
SHAPE_FILL: SHAPE_FILL$2,
SHAPE_OPACITY: SHAPE_OPACITY$2,
COLLAPSE: COLLAPSE$2,
TEXT: TEXT$2,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$2,
NEW_TEMPLATE: NEW_TEMPLATE$2,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$2,
PAGE_SIZE: PAGE_SIZE$2,
BACKGROUND_COLOR: BACKGROUND_COLOR$2,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$2,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$2,
CUTTING_GUIDE: CUTTING_GUIDE$2,
ADD_TEXT: ADD_TEXT$2,
HELP_TEXT: HELP_TEXT$2,
BOLD: BOLD$2,
ITALIC: ITALIC$2,
LINE_THROUGH: LINE_THROUGH$2,
UNDERLINE: UNDERLINE$2,
LEFT_ALIGN: LEFT_ALIGN$2,
CENTER_ALIGN: CENTER_ALIGN$2,
RIGHT_ALIGN: RIGHT_ALIGN$2,
FONT_FAMILY: FONT_FAMILY$2,
TEXT_SIZE: TEXT_SIZE$2,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$2,
TEXT_COLOR: TEXT_COLOR$2,
TEXT_OPACITY: TEXT_OPACITY$2,
UNDO: UNDO$2,
REDO: REDO$2,
SHOW_BRANDING: SHOW_BRANDING$2,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$2,
UPGRADE_PLAN: UPGRADE_PLAN$2,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$2,
ZOOM_IN_OUT: ZOOM_IN_OUT$2,
TEMPLATE: TEMPLATE$2,
IMAGE: IMAGE$2,
SHAPE: SHAPE$2,
QR_CODE: QR_CODE$2,
BRANDING: BRANDING$2,
QR: QR$2,
WHITE_LABEL: WHITE_LABEL$2,
OPACITY: OPACITY$2,
ADD_SHAPES: ADD_SHAPES$2,
SETTINGS: SETTINGS$2,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$2,
SAVE: SAVE$2,
HEADING_1: HEADING_1$2,
HEADING_2: HEADING_2$2,
SCAN_THIS_QR: SCAN_THIS_QR$2,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$2,
DOMAIN: DOMAIN$2,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$2,
LOCATION_HELPER: LOCATION_HELPER$2,
SHOW_QR_ID: SHOW_QR_ID$2,
QR_ID_HELPER: QR_ID_HELPER$2,
MONOCHROME_COLOR: MONOCHROME_COLOR$2,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$2,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$2,
TINT_SHORT: TINT_SHORT$2
};
var BRING_FORWARD$1 = "Επισπεύδω";
var SEND_BACKWARD$1 = "Αποστέλλω προς τα πίσω";
var LOCK$1 = "Κλείδωμα";
var UNLOCK$1 = "Ξεκλείδωμα";
var COPY$1 = "Αντιγραφή";
var DELETE$1 = "Διαγραφή";
var BUTTON$1 = "Κουμπί";
var COLLAPSABLE$1 = "Συμπτύξιμο";
var DROPDOWN$1 = "Αναπτυσσόμενο";
var TITLE$1 = "Τίτλος";
var ADD_IMAGE$1 = "Προσθήκη εικόνας";
var DEFAULT$1 = "Προκαθορισμένο";
var CUSTOM_IMAGES$1 = "Προσαρμοσμένες εικόνες";
var IMAGE_OPACITY$1 = "Αδιαφάνεια εικόνας";
var LOGO$1 = "Λογότυπο";
var SHOW_QR_CODE$1 = "Εμφάνιση QR κώδικα";
var SHOW_LOGO_IN_QR$1 = "Εμφάνιση λογοτύπου στο QR";
var ADD_LOGO$1 = "Προσθήκη λογότυπου";
var SHAPE_FILL$1 = "Γέμισμα σχήματος";
var SHAPE_OPACITY$1 = "Αδιαφάνεια σχήματος";
var COLLAPSE$1 = "Σύμπτυξη";
var TEXT$1 = "Κείμενο";
var STROKE_WIDTH_AND_COLOR$1 = "Πλάτος και χρώμα περιγράμματος";
var NEW_TEMPLATE$1 = "Νέο πρότυπο";
var CUSTOM_TEMPLATES$1 = "Τα σχέδιά μου";
var PAGE_SIZE$1 = "Μέγεθος σελίδας";
var BACKGROUND_COLOR$1 = "Χρώμα φόντου";
var BACKGROUND_IMAGE$1 = "Εικόνα φόντου";
var BACKGROUND_IMAGE_OPACITY$1 = "Αδιαφάνεια εικόνας φόντου";
var CUTTING_GUIDE$1 = "Οδηγός κοπής";
var ADD_TEXT$1 = "Προσθήκη κειμένου";
var HELP_TEXT$1 = "Κείμενο βοήθειας";
var BOLD$1 = "Έντονα";
var ITALIC$1 = "Πλάγια";
var LINE_THROUGH$1 = "Διαγραμμένο";
var UNDERLINE$1 = "Υπογράμμιση";
var LEFT_ALIGN$1 = "Αριστερή στοίχιση";
var CENTER_ALIGN$1 = "Κεντρική στοίχιση";
var RIGHT_ALIGN$1 = "Δεξιά στοίχιση";
var FONT_FAMILY$1 = "Γραμματοσειρά";
var TEXT_SIZE$1 = "Μέγεθος κειμένου";
var TEXT_LINE_HEIGHT$1 = "Διάστιχο & απόσταση παραγράφου";
var TEXT_COLOR$1 = "Χρώμα κειμένου";
var TEXT_OPACITY$1 = "Αδιαφάνεια κειμένου";
var UNDO$1 = "Αναίρεση";
var REDO$1 = "Επανάληψη";
var SHOW_BRANDING$1 = "Εμφάνιση Fixalert Branding";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH$1 = "Αποκτήστε premium δυνατότητες για να προσαρμόσετε το αυτοκόλλητο QR κώδικα αποκρύπτοντας το λογότυπο και το υδατόσημο εταιρείας. Αναβαθμίστε το πλάνο σας για πλήρη έλεγχο στο σχέδιό σας.";
var UPGRADE_PLAN$1 = "Αναβάθμιση πλάνου";
var PREMIUM_SETTINGS$1 = "Ρυθμίσεις premium";
var ZOOM_IN_OUT$1 = "Μεγέθυνση/Σμίκρυνση";
var TEMPLATE$1 = "Πρότυπο";
var IMAGE$1 = "Εικόνα";
var SHAPE$1 = "Σχήμα";
var QR_CODE$1 = "QR κώδικας";
var BRANDING$1 = "Branding";
var QR$1 = "QR";
var WHITE_LABEL$1 = "Λευκή ετικέτα";
var OPACITY$1 = "Αδιαφάνεια";
var ADD_SHAPES$1 = "Προσθήκη σχημάτων";
var SETTINGS$1 = "Ρυθμίσεις";
var PLEASE_ADD_IMAGES$1 = "Παρακαλώ προσθέστε εικόνες";
var SAVE$1 = "Αποθήκευση";
var HEADING_1$1 = "+ Επικεφαλίδα 1";
var HEADING_2$1 = "+ Επικεφαλίδα 2";
var SCAN_THIS_QR$1 = "Σκανάρετε αυτόν τον QR από το κινητό σας για να αναφέρετε το πρόβλημα";
var LOCATION_BREADCRUMB$1 = "ιδιοκτησία > κτήριο > δωμάτιο";
var DOMAIN$1 = "www.domain.com";
var SHOW_PROPERTY_LOCATION$1 = "Εμφάνιση ετικέτας ιδιοκτησίας";
var LOCATION_HELPER$1 = "Ενεργοποιήστε το για να εμφανιστεί η ετικέτα τοποθεσίας της ιδιοκτησίας στον καμβά ή απενεργοποιήστε το για να την αποκρύψετε.";
var SHOW_QR_ID$1 = "Εμφάνιση ταυτότητας QR";
var QR_ID_HELPER$1 = "Ενεργοποιήστε το για να εμφανιστεί το μοναδικό αναγνωριστικό QR Code στον καμβά ή απενεργοποιήστε το για να το αφαιρέσετε.";
var MONOCHROME_COLOR$1 = "Χρώμα απόχρωσης";
var MONOCHROME_STRENGTH$1 = "Ένταση απόχρωσης";
var CLEAR_MONOCHROME$1 = "Αφαίρεση απόχρωσης";
var TINT_SHORT$1 = "Απόχρωση";
var elTranslations = {
BRING_FORWARD: BRING_FORWARD$1,
SEND_BACKWARD: SEND_BACKWARD$1,
LOCK: LOCK$1,
UNLOCK: UNLOCK$1,
COPY: COPY$1,
DELETE: DELETE$1,
BUTTON: BUTTON$1,
COLLAPSABLE: COLLAPSABLE$1,
DROPDOWN: DROPDOWN$1,
TITLE: TITLE$1,
ADD_IMAGE: ADD_IMAGE$1,
DEFAULT: DEFAULT$1,
CUSTOM_IMAGES: CUSTOM_IMAGES$1,
IMAGE_OPACITY: IMAGE_OPACITY$1,
LOGO: LOGO$1,
SHOW_QR_CODE: SHOW_QR_CODE$1,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR$1,
ADD_LOGO: ADD_LOGO$1,
SHAPE_FILL: SHAPE_FILL$1,
SHAPE_OPACITY: SHAPE_OPACITY$1,
COLLAPSE: COLLAPSE$1,
TEXT: TEXT$1,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR$1,
NEW_TEMPLATE: NEW_TEMPLATE$1,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES$1,
PAGE_SIZE: PAGE_SIZE$1,
BACKGROUND_COLOR: BACKGROUND_COLOR$1,
BACKGROUND_IMAGE: BACKGROUND_IMAGE$1,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY$1,
CUTTING_GUIDE: CUTTING_GUIDE$1,
ADD_TEXT: ADD_TEXT$1,
HELP_TEXT: HELP_TEXT$1,
BOLD: BOLD$1,
ITALIC: ITALIC$1,
LINE_THROUGH: LINE_THROUGH$1,
UNDERLINE: UNDERLINE$1,
LEFT_ALIGN: LEFT_ALIGN$1,
CENTER_ALIGN: CENTER_ALIGN$1,
RIGHT_ALIGN: RIGHT_ALIGN$1,
FONT_FAMILY: FONT_FAMILY$1,
TEXT_SIZE: TEXT_SIZE$1,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT$1,
TEXT_COLOR: TEXT_COLOR$1,
TEXT_OPACITY: TEXT_OPACITY$1,
UNDO: UNDO$1,
REDO: REDO$1,
SHOW_BRANDING: SHOW_BRANDING$1,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH$1,
UPGRADE_PLAN: UPGRADE_PLAN$1,
PREMIUM_SETTINGS: PREMIUM_SETTINGS$1,
ZOOM_IN_OUT: ZOOM_IN_OUT$1,
TEMPLATE: TEMPLATE$1,
IMAGE: IMAGE$1,
SHAPE: SHAPE$1,
QR_CODE: QR_CODE$1,
BRANDING: BRANDING$1,
QR: QR$1,
WHITE_LABEL: WHITE_LABEL$1,
OPACITY: OPACITY$1,
ADD_SHAPES: ADD_SHAPES$1,
SETTINGS: SETTINGS$1,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES$1,
SAVE: SAVE$1,
HEADING_1: HEADING_1$1,
HEADING_2: HEADING_2$1,
SCAN_THIS_QR: SCAN_THIS_QR$1,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB$1,
DOMAIN: DOMAIN$1,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION$1,
LOCATION_HELPER: LOCATION_HELPER$1,
SHOW_QR_ID: SHOW_QR_ID$1,
QR_ID_HELPER: QR_ID_HELPER$1,
MONOCHROME_COLOR: MONOCHROME_COLOR$1,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH$1,
CLEAR_MONOCHROME: CLEAR_MONOCHROME$1,
TINT_SHORT: TINT_SHORT$1
};
var BRING_FORWARD = "Переносити";
var SEND_BACKWARD = "Надіслати назад";
var LOCK = "Блокувати";
var UNLOCK = "Розблокувати";
var COPY = "Копіювати";
var DELETE = "Видалити";
var BUTTON = "Кнопка";
var COLLAPSABLE = "Згортальний";
var DROPDOWN = "Випадний список";
var TITLE = "Заголовок";
var ADD_IMAGE = "Додати зображення";
var DEFAULT = "За замовчуванням";
var CUSTOM_IMAGES = "Користувацькі зображення";
var IMAGE_OPACITY = "Непрозорість зображення";
var LOGO = "Логотип";
var SHOW_QR_CODE = "Показати QR‑код";
var SHOW_LOGO_IN_QR = "Показати логотип у QR‑коді";
var ADD_LOGO = "Додати логотип";
var SHAPE_FILL = "Заливка форми";
var SHAPE_OPACITY = "Непрозорість форми";
var COLLAPSE = "Згорнути";
var TEXT = "Текст";
var STROKE_WIDTH_AND_COLOR = "Ширина та колір контуру";
var NEW_TEMPLATE = "Новий шаблон";
var CUSTOM_TEMPLATES = "Мої дизайни";
var PAGE_SIZE = "Розмір сторінки";
var BACKGROUND_COLOR = "Колір фону";
var BACKGROUND_IMAGE = "Фонове зображення";
var BACKGROUND_IMAGE_OPACITY = "Непрозорість фонового зображення";
var CUTTING_GUIDE = "Гід по обрізці";
var ADD_TEXT = "Додати текст";
var HELP_TEXT = "Текст допомоги";
var BOLD = "Жирний";
var ITALIC = "Курсив";
var LINE_THROUGH = "Закреслений";
var UNDERLINE = "Підкреслений";
var LEFT_ALIGN = "Вирівняти ліворуч";
var CENTER_ALIGN = "Вирівняти по центру";
var RIGHT_ALIGN = "Вирівняти праворуч";
var FONT_FAMILY = "Шрифт";
var TEXT_SIZE = "Розмір тексту";
var TEXT_LINE_HEIGHT = "Інтерліньяж & абзацний інтервал";
var TEXT_COLOR = "Колір тексту";
var TEXT_OPACITY = "Непрозорість тексту";
var UNDO = "Скасувати";
var REDO = "Повернути";
var SHOW_BRANDING = "Показати брендування Fixalert";
var UNLOCK_PREMIUM_FEATURE_PARAGRAPH = "Розблокуйте преміум‑функції, щоб налаштувати наклейку з QR‑кодом, приховавши логотип компанії та водяний знак. Оновіть свій план для повного контролю над дизайном.";
var UPGRADE_PLAN = "Оновити план";
var PREMIUM_SETTINGS = "Преміум‑налаштування";
var ZOOM_IN_OUT = "Збільшити/Зменшити";
var TEMPLATE = "Шаблон";
var IMAGE = "Зображення";
var SHAPE = "Форма";
var QR_CODE = "QR‑код";
var BRANDING = "Брендування";
var QR = "QR";
var WHITE_LABEL = "White‑label";
var OPACITY = "Непрозорість";
var ADD_SHAPES = "Додати форми";
var SETTINGS = "Налаштування";
var PLEASE_ADD_IMAGES = "Будь ласка, додайте зображення";
var SAVE = "Зберегти";
var HEADING_1 = "+ Заголовок 1";
var HEADING_2 = "+ Заголовок 2";
var SCAN_THIS_QR = "Відскануйте цей QR‑код зі свого мобільного, щоб повідомити про проблему";
var LOCATION_BREADCRUMB = "власність > будівля > кімната";
var DOMAIN = "www.domain.com";
var SHOW_PROPERTY_LOCATION = "Показати мітку власності";
var LOCATION_HELPER = "Увімкніть, щоб показати мітку розташування власності на полотні, або вимкніть, щоб приховати її.";
var SHOW_QR_ID = "Показати QR-ID";
var QR_ID_HELPER = "Увімкніть, щоб відобразити унікальний ідентифікатор QR-коду на полотні, або вимкніть, щоб видалити його.";
var MONOCHROME_COLOR = "Колір тону";
var MONOCHROME_STRENGTH = "Сила тону";
var CLEAR_MONOCHROME = "Прибрати тон";
var TINT_SHORT = "Тон";
var ukTranslations = {
BRING_FORWARD: BRING_FORWARD,
SEND_BACKWARD: SEND_BACKWARD,
LOCK: LOCK,
UNLOCK: UNLOCK,
COPY: COPY,
DELETE: DELETE,
BUTTON: BUTTON,
COLLAPSABLE: COLLAPSABLE,
DROPDOWN: DROPDOWN,
TITLE: TITLE,
ADD_IMAGE: ADD_IMAGE,
DEFAULT: DEFAULT,
CUSTOM_IMAGES: CUSTOM_IMAGES,
IMAGE_OPACITY: IMAGE_OPACITY,
LOGO: LOGO,
SHOW_QR_CODE: SHOW_QR_CODE,
SHOW_LOGO_IN_QR: SHOW_LOGO_IN_QR,
ADD_LOGO: ADD_LOGO,
SHAPE_FILL: SHAPE_FILL,
SHAPE_OPACITY: SHAPE_OPACITY,
COLLAPSE: COLLAPSE,
TEXT: TEXT,
STROKE_WIDTH_AND_COLOR: STROKE_WIDTH_AND_COLOR,
NEW_TEMPLATE: NEW_TEMPLATE,
CUSTOM_TEMPLATES: CUSTOM_TEMPLATES,
PAGE_SIZE: PAGE_SIZE,
BACKGROUND_COLOR: BACKGROUND_COLOR,
BACKGROUND_IMAGE: BACKGROUND_IMAGE,
BACKGROUND_IMAGE_OPACITY: BACKGROUND_IMAGE_OPACITY,
CUTTING_GUIDE: CUTTING_GUIDE,
ADD_TEXT: ADD_TEXT,
HELP_TEXT: HELP_TEXT,
BOLD: BOLD,
ITALIC: ITALIC,
LINE_THROUGH: LINE_THROUGH,
UNDERLINE: UNDERLINE,
LEFT_ALIGN: LEFT_ALIGN,
CENTER_ALIGN: CENTER_ALIGN,
RIGHT_ALIGN: RIGHT_ALIGN,
FONT_FAMILY: FONT_FAMILY,
TEXT_SIZE: TEXT_SIZE,
TEXT_LINE_HEIGHT: TEXT_LINE_HEIGHT,
TEXT_COLOR: TEXT_COLOR,
TEXT_OPACITY: TEXT_OPACITY,
UNDO: UNDO,
REDO: REDO,
SHOW_BRANDING: SHOW_BRANDING,
UNLOCK_PREMIUM_FEATURE_PARAGRAPH: UNLOCK_PREMIUM_FEATURE_PARAGRAPH,
UPGRADE_PLAN: UPGRADE_PLAN,
PREMIUM_SETTINGS: PREMIUM_SETTINGS,
ZOOM_IN_OUT: ZOOM_IN_OUT,
TEMPLATE: TEMPLATE,
IMAGE: IMAGE,
SHAPE: SHAPE,
QR_CODE: QR_CODE,
BRANDING: BRANDING,
QR: QR,
WHITE_LABEL: WHITE_LABEL,
OPACITY: OPACITY,
ADD_SHAPES: ADD_SHAPES,
SETTINGS: SETTINGS,
PLEASE_ADD_IMAGES: PLEASE_ADD_IMAGES,
SAVE: SAVE,
HEADING_1: HEADING_1,
HEADING_2: HEADING_2,
SCAN_THIS_QR: SCAN_THIS_QR,
LOCATION_BREADCRUMB: LOCATION_BREADCRUMB,
DOMAIN: DOMAIN,
SHOW_PROPERTY_LOCATION: SHOW_PROPERTY_LOCATION,
LOCATION_HELPER: LOCATION_HELPER,
SHOW_QR_ID: SHOW_QR_ID,
QR_ID_HELPER: QR_ID_HELPER,
MONOCHROME_COLOR: MONOCHROME_COLOR,
MONOCHROME_STRENGTH: MONOCHROME_STRENGTH,
CLEAR_MONOCHROME: CLEAR_MONOCHROME,
TINT_SHORT: TINT_SHORT
};
var SUPPPORTED_LOCALES = ['en', 'ru', 'pl', 'de', 'es', 'fr', 'it', 'el', 'uk'];
var TEXT_DICTIONARY = {
en: enTranslations,
ru: ruTranslations,
pl: plTranslations,
de: deTranslations,
es: esTranslations,
fr: frTranslations,
it: itTranslations,
el: elTranslations,
uk: ukTranslations
};
var LOCATION_ELEMENT_ID = 'element-location-text';
var QRID_ELEMENT_ID = 'element-qrid-text';
var SideBar = function SideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
var selectedSideBarItem = _ref.selectedSideBarItem,
_ref$onClickPill = _ref.onClickPill,
onClickPill = _ref$onClickPill === void 0 ? function () {} : _ref$onClickPill,
disableWhiteLabel = _ref.disableWhiteLabel,
styleProps = _ref.styleProps,
languageLocale = _ref.languageLocale;
var sideBarItems = [{
id: sideBarpillsList.template,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TEMPLATE,
icon: IconTemplate
}, {
id: sideBarpillsList.text,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.TEXT,
icon: IconText
}, {
id: sideBarpillsList.image,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.IMAGE,
icon: IconImage
}, {
id: sideBarpillsList.shape,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.SHAPE,
icon: IconShape
}, {
id: sideBarpillsList.qr,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.QR,
icon: IconQrCode
}, {
id: sideBarpillsList.whiteLabel,
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.WHITE_LABEL,
icon: IconWhiteLabel
}];
var onClickSinglePill = useCallback(function (e) {
onClickPill(e);
}, [onClickPill]);
var renderPills = useMemo(function () {
return sideBarItems === null || sideBarItems === void 0 ? void 0 : sideBarItems.map(function (item) {
if ((item === null || item === void 0 ? void 0 : item.id) === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) && disableWhiteLabel) {
return null;
}
return /*#__PURE__*/React.createElement(SideBarPill, {
key: item === null || item === void 0 ? void 0 : item.id,
id: item === null || item === void 0 ? void 0 : item.id,
isSelected: selectedSideBarItem === (item === null || item === void 0 ? void 0 : item.id),
onClick: function onClick() {
return onClickSinglePill(item === null || item === void 0 ? void 0 : item.id);
},
icon: item === null || item === void 0 ? void 0 : item.icon,
text: item === null || item === void 0 ? void 0 : item.text,
languageLocale: languageLocale,
pillActiveColor: styleProps === null || styleProps === void 0 ? void 0 : styleProps.primaryColor
});
});
}, [selectedSideBarItem, onClickSinglePill, languageLocale]);
return /*#__PURE__*/React.createElement(SideBarWrapper$1, null, renderPills);
};
SideBar.propTypes = propTypes$y;
var propTypes$w = {
selectedTab: PropTypes.string,
languageLocale: PropTypes.string,
title: PropTypes.string,
zoomPercentage: PropTypes.number,
onChangeZoomPercentage: PropTypes.func,
editorHeight: PropTypes.number,
editorWidth: PropTypes.number,
onSetBackgroundColor: PropTypes.func,
elements: PropTypes.array,
history: PropTypes.array,
redoStack: PropTypes.array,
onSetBackgroundImage: PropTypes.func,
onUndo: PropTypes.func,
onRedo: PropTypes.func,
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
shapeOpacity: PropTypes.number,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
onSelectElement: PropTypes.func,
stageRef: PropTypes.object,
saveHistory: PropTypes.func,
onChangeBackgroundImageOpacity: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
imageTintColor: PropTypes.string,
imageTintStrength: PropTypes.number,
onChangeImageTintColor: PropTypes.func,
onChangeImageTintStrength: PropTypes.func,
onClearImageTint: PropTypes.func,
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
defaultTextProps: PropTypes.object,
onChangeTextProperty: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
selectedPageSizeLabel: PropTypes.string,
loadingImages: PropTypes.bool,
loadingFonts: PropTypes.bool,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func,
showOutsideBoundaryPreview: PropTypes.bool,
outsideBoundaryPreviewPadding: PropTypes.number
};
var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$8, _templateObject5$5;
var Container$4 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n background-color: ", ";\n background-image: ", ";\n position: relative;\n flex-direction: column;\n overflow: hidden;\n"])), theme.color.white_F7F7F7, function (_ref) {
var selectedTab = _ref.selectedTab;
return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
});
var InnerContainer = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n // display: flex;\n // flex-direction: column;\n // overflow: auto;\n // flex: 1;\n // align-items: center;\n // justify-content: center;\n // flex-grow: 1;\n // background: green;\n // // min-height: 100px;\n\n display: grid;\n place-items: center;\n overflow: auto;\n flex: 1;\n position: relative;\n"])));
var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n overflow: auto;\n flex: 1;\n justify-content: center;\n min-height: ", "px;\n height: ", "px;\n min-width: ", "px;\n width: ", "px;\n"])), function (_ref2) {
var editorHeight = _ref2.editorHeight;
return editorHeight || 500;
}, function (_ref3) {
var editorHeight = _ref3.editorHeight;
return editorHeight || 500;
}, function (_ref4) {
var editorWidth = _ref4.editorWidth;
return editorWidth || 400;
}, function (_ref5) {
var editorWidth = _ref5.editorWidth;
return editorWidth || 400;
});
var Title = styled.p(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n align-self: flex-start;\n font-size: 14px;\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n padding: 0 6px;\n border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
var EditorBox = styled.div(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n height: ", "px;\n width: ", "px;\n min-height: ", "px;\n min-width: ", "px;\n background: ", ";\n box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n // transition: all 0.1s ease-in-out;\n overflow: hidden;\n"])), function (_ref6) {
var editorHeight = _ref6.editorHeight;
return editorHeight || 470;
}, function (_ref7) {
var editorWidth = _ref7.editorWidth;
return editorWidth || 350;
}, function (_ref8) {
var editorHeight = _ref8.editorHeight;
return editorHeight || 470;
}, function (_ref9) {
var editorWidth = _ref9.editorWidth;
return editorWidth || 350;
}, theme.color.gray_25);
var propTypes$v = {
selectedTab: PropTypes.string,
onSetBackgroundColor: PropTypes.func,
canvasBackgroundColor: PropTypes.string,
canvasBackgroundImage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onSetBackgroundImage: PropTypes.func,
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
shapeOpacity: PropTypes.number,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
onChangeBackgroundImageOpacity: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
imageTintColor: PropTypes.string,
imageTintStrength: PropTypes.number,
onChangeImageTintColor: PropTypes.func,
onChangeImageTintStrength: PropTypes.func,
onClearImageTint: PropTypes.func,
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
defaultTextProps: PropTypes.object,
onChangeTextProperty: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
selectedPageSizeLabel: PropTypes.string,
translation: PropTypes.object,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func
};
var _templateObject$q, _templateObject2$k;
var ToolBarWrapper = styled.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n display: flex;\n padding: 10px 30px;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n flex-direction: row;\n opacity: ", ";\n // pointer-events: ", ";\n position: relative;\n // overflow: auto;\n"])), theme.color.gray_EAEAEA, theme.color.white, function (_ref) {
var disabled = _ref.disabled;
return disabled ? 0.5 : 1;
}, function (_ref2) {
var disabled = _ref2.disabled;
return disabled ? 'none' : 'all';
});
var OverlayBlocker = styled.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.1);\n z-index: 100;\n cursor: not-allowed;\n"])));
var propTypes$u = {
onSetBackgroundColor: PropTypes.func,
canvasBackgroundColor: PropTypes.string,
onSetBackgroundImage: PropTypes.func,
backgroundImageOpacity: PropTypes.number,
onChangeBackgroundImageOpacity: PropTypes.func,
onSetPageSize: PropTypes.func,
selectedPageSize: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
selectedPageSizeLabel: PropTypes.string,
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
cuttingGuideStroke: PropTypes.number,
cuttingGuideStrokeColor: PropTypes.string,
onChangeCuttingGuideProp: PropTypes.func
};
var propTypes$t = {
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingBottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
children: PropTypes.node,
marginLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
justifyContent: PropTypes.string,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
onClick: PropTypes.func,
disabled: PropTypes.bool,
tooltip: PropTypes.string,
tooltipPosition: PropTypes.string
};
var _templateObject$p;
var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 8px;\n background-color: ", ";\n height: ", ";\n margin-left: ", ";\n margin-right: ", ";\n display: flex;\n align-items: center;\n justify-content: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n cursor: ", ";\n gap: ", ";\n opacity: ", ";\n pointer-events: ", ";\n position: relative;\n"])), theme.color.gray_200, theme.color.white, function (_ref) {
var _ref$height = _ref.height,
height = _ref$height === void 0 ? 40 : _ref$height;
return "".concat(height, "px");
}, function (_ref2) {
var _ref2$marginLeft = _ref2.marginLeft,
marginLeft = _ref2$marginLeft === void 0 ? 0 : _ref2$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref3) {
var _ref3$marginRight = _ref3.marginRight,
marginRight = _ref3$marginRight === void 0 ? 12 : _ref3$marginRight;
return "".concat(marginRight, "px");
}, function (_ref4) {
var _ref4$justifyContent = _ref4.justifyContent,
justifyContent = _ref4$justifyContent === void 0 ? 'center' : _ref4$justifyContent;
return justifyContent;
}, function (_ref5) {
var _ref5$paddingTop = _ref5.paddingTop,
paddingTop = _ref5$paddingTop === void 0 ? 0 : _ref5$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref6) {
var _ref6$paddingRight = _ref6.paddingRight,
paddingRight = _ref6$paddingRight === void 0 ? 10 : _ref6$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref7) {
var _ref7$paddingBottom = _ref7.paddingBottom,
paddingBottom = _ref7$paddingBottom === void 0 ? 0 : _ref7$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref8) {
var _ref8$paddingLeft = _ref8.paddingLeft,
paddingLeft = _ref8$paddingLeft === void 0 ? 10 : _ref8$paddingLeft;
return "".concat(paddingLeft, "px");
}, function (_ref9) {
var disabled = _ref9.disabled;
return disabled ? 'not-allowed' : 'pointer';
}, function (_ref0) {
var _ref0$gap = _ref0.gap,
gap = _ref0$gap === void 0 ? 0 : _ref0$gap;
return "".concat(gap, "px");
}, function (_ref1) {
var disabled = _ref1.disabled;
return disabled ? 0.5 : 1;
}, function (_ref10) {
var disabled = _ref10.disabled;
return disabled ? 'none' : 'all';
});
var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$7, _templateObject5$4, _templateObject6$2, _templateObject7$2;
var Wrapper = styled.span(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n cursor: ", ";\n"])), function (_ref) {
var disabled = _ref.disabled;
return disabled ? 'not-allowed' : 'pointer';
});
var Floating = styled.div(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n background-color: rgba(0, 0, 0, 0.75);\n color: #fff;\n border-radius: 6px;\n /* wrapping */\n white-space: normal;\n word-break: break-word;\n overflow-wrap: anywhere;\n /* defaults (can be overridden via inline style in component) */\n font-family: ", ";\n font-weight: ", ";\n pointer-events: none;\n box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);\n"])), theme.fonts.primary, theme.fontWeights[400]);
styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n visibility: hidden;\n background-color: rgba(0, 0, 0, 0.7);\n color: white;\n text-align: center;\n padding: 4px 10px;\n border-radius: 4px;\n position: absolute;\n z-index: 9999;\n white-space: nowrap;\n opacity: 0;\n transition: all 0.1s;\n font-size: 13px;\n font-family: ", ";\n font-weight: ", ";\n\n ", "\n ", "\n ", "\n ", "\n\n ", ":hover & {\n visibility: visible;\n opacity: 1;\n }\n"])), theme.fonts.primary, theme.fontWeights[400], function (_ref2) {
var position = _ref2.position;
return position === 'top' && css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n bottom: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
}, function (_ref3) {
var position = _ref3.position;
return position === 'right' && css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n top: 50%;\n left: 105%;\n transform: translateY(-50%);\n "])));
}, function (_ref4) {
var position = _ref4.position;
return position === 'bottom' && css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n top: 110%;\n left: 50%;\n transform: translateX(-50%);\n "])));
}, function (_ref5) {
var position = _ref5.position;
return position === 'left' && css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n top: 50%;\n right: 105%;\n transform: translateY(-50%);\n "])));
}, Wrapper);
var Tooltip = function Tooltip(_ref) {
var text = _ref.text,
_ref$position = _ref.position,
position = _ref$position === void 0 ? 'top' : _ref$position,
children = _ref.children,
disabled = _ref.disabled,
width = _ref.width,
_ref$maxWidth = _ref.maxWidth,
maxWidth = _ref$maxWidth === void 0 ? 260 : _ref$maxWidth,
_ref$fontSize = _ref.fontSize,
fontSize = _ref$fontSize === void 0 ? 12 : _ref$fontSize,
_ref$lineHeight = _ref.lineHeight,
lineHeight = _ref$lineHeight === void 0 ? 1.3 : _ref$lineHeight,
_ref$padding = _ref.padding,
padding = _ref$padding === void 0 ? '6px 10px' : _ref$padding,
_ref$textAlign = _ref.textAlign,
textAlign = _ref$textAlign === void 0 ? 'left' : _ref$textAlign;
var ref = useRef(null);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
rect = _useState2[0],
setRect = _useState2[1];
var show = useCallback(function () {
if (disabled || !ref.current) return;
setRect(ref.current.getBoundingClientRect());
}, [disabled]);
var hide = useCallback(function () {
return setRect(null);
}, []);
return /*#__PURE__*/React.createElement(Wrapper, {
ref: ref,
onMouseEnter: show,
onMouseLeave: hide,
disabled: disabled
}, children, rect && /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(Floating, {
role: "tooltip",
style: _objectSpread2(_objectSpread2({}, calcStyle(rect, position)), {}, {
width: width ? "".concat(width, "px") : undefined,
maxWidth: "".concat(maxWidth, "px"),
fontSize: fontSize,
lineHeight: lineHeight,
padding: padding,
textAlign: textAlign
})
}, text), document.body));
};
var calcStyle = function calcStyle(r, pos) {
var gap = 8;
var s = {
position: 'fixed',
zIndex: 2147483647
};
switch (pos) {
case 'top':
return _objectSpread2(_objectSpread2({}, s), {}, {
left: r.left + r.width / 2,
top: r.top - gap,
transform: 'translate(-50%, -100%)'
});
case 'bottom':
return _objectSpread2(_objectSpread2({}, s), {}, {
left: r.left + r.width / 2,
top: r.bottom + gap,
transform: 'translate(-50%, 0)'
});
case 'left':
return _objectSpread2(_objectSpread2({}, s), {}, {
left: r.left - gap,
top: r.top + r.height / 2,
transform: 'translate(-100%, -50%)'
});
case 'right':
default:
return _objectSpread2(_objectSpread2({}, s), {}, {
left: r.right + gap,
top: r.top + r.height / 2,
transform: 'translate(0, -50%)'
});
}
};
Tooltip.propTypes = {
/** The tooltip content (string, number, or JSX). */
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
/** Tooltip position relative to the trigger. */
position: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
/** Child element(s) that trigger the tooltip on hover. */
children: PropTypes.node.isRequired,
/** Disable tooltip display when true. */
disabled: PropTypes.bool,
/** Fixed width in pixels (forces wrapping). */
width: PropTypes.number,
/** Maximum width before wrapping occurs. */
maxWidth: PropTypes.number,
/** Font size for tooltip text (in px). */
fontSize: PropTypes.number,
/** Line height for tooltip text. */
lineHeight: PropTypes.number,
/** Padding inside tooltip (CSS shorthand string). */
padding: PropTypes.string,
/** Text alignment inside tooltip. */
textAlign: PropTypes.oneOf(['left', 'center', 'right'])
};
var ToolBarButtonWrapper = function ToolBarButtonWrapper(_ref) {
var height = _ref.height,
paddingTop = _ref.paddingTop,
paddingBottom = _ref.paddingBottom,
paddingLeft = _ref.paddingLeft,
paddingRight = _ref.paddingRight,
children = _ref.children,
marginLeft = _ref.marginLeft,
marginRight = _ref.marginRight,
justifyContent = _ref.justifyContent,
gap = _ref.gap,
_onClick = _ref.onClick,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
tooltip = _ref.tooltip,
tooltipPosition = _ref.tooltipPosition;
return /*#__PURE__*/React.createElement(Tooltip, {
text: tooltip,
position: tooltipPosition,
disabled: disabled
}, /*#__PURE__*/React.createElement(StyledContainer$6, {
height: height,
paddingTop: paddingTop,
paddingBottom: paddingBottom,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
marginLeft: marginLeft,
marginRight: marginRight,
justifyContent: justifyContent,
gap: gap,
onClick: function onClick() {
if (disabled) {
return;
}
_onClick && _onClick();
},
disabled: disabled
}, children));
};
ToolBarButtonWrapper.propTypes = propTypes$t;
var propTypes$s = {
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
right: PropTypes.bool,
center: PropTypes.bool,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
paddingRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
list: PropTypes.array,
onSelect: PropTypes.func,
fontPicker: PropTypes.any,
tooltip: PropTypes.string
};
var _templateObject$n, _templateObject2$i, _templateObject3$9, _templateObject4$6;
var DropDownItem = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var IconWrapper$3 = styled.img(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n object-fit: contain;\n"])));
var DropDownList = styled.div(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n position: absolute;\n left: 0;\n top: 50;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n margin-top: 5px;\n z-index: 10;\n width: 100%;\n max-height: 200px;\n overflow-y: auto;\n z-index: 9999;\n"])));
// Individual option in the dropdown
var DropDownOption = styled.div(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n cursor: pointer;\n font-size: 14px;\n color: #333333;\n &:hover {\n background-color: #f0f0f0;\n }\n &:active {\n background-color: #e0e0e0;\n }\n"])));
var DropDown = function DropDown(_ref) {
var left = _ref.left,
right = _ref.right,
center = _ref.center,
gap = _ref.gap,
paddingLeft = _ref.paddingLeft,
paddingRight = _ref.paddingRight,
list = _ref.list,
onSelect = _ref.onSelect,
fontPicker = _ref.fontPicker,
tooltip = _ref.tooltip;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setIsOpen = _useState2[1];
var dropdownRef = useRef(null);
useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
var handleSelect = function handleSelect(item) {
onSelect(item);
setIsOpen(false);
};
return /*#__PURE__*/React.createElement("div", {
ref: dropdownRef,
style: {
position: 'relative'
},
onClick: function onClick() {
setIsOpen(true);
}
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
justifyContent: center ? 'space-between' : 'center',
gap: gap,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
tooltip: tooltip,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(DropDownItem, null, left), /*#__PURE__*/React.createElement(DropDownItem, null, center), /*#__PURE__*/React.createElement(DropDownItem, null, right ? right : /*#__PURE__*/React.createElement(IconWrapper$3, {
src: IconDropDown
}))), isOpen && /*#__PURE__*/React.createElement(DropDownList, null, list === null || list === void 0 ? void 0 : list.map(function (item, index) {
return /*#__PURE__*/React.createElement(DropDownOption, {
key: index,
onClick: function onClick(e) {
handleSelect(item);
e === null || e === void 0 || e.stopPropagation();
},
style: {
padding: '8px 16px',
cursor: 'pointer',
borderBottom: index !== list.length - 1 ? '1px solid #eee' : 'none',
fontFamily: fontPicker ? item : theme.fonts.primary
}
}, item);
})));
};
DropDown.propTypes = propTypes$s;
var _templateObject$m, _templateObject2$h, _templateObject3$8, _templateObject4$5, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8, _templateObject9, _templateObject0, _templateObject1;
var Label$1 = styled.p(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$4 = styled.div(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var RemoveButton = styled.div(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n height: 20px;\n width: 20px;\n border-radius: 20px;\n position: absolute;\n right: -7px;\n top: -7px;\n background: #ff4d4d;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var CustomSizeRow = styled.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n display: flex;\n align-items: flex-end;\n gap: 10px;\n margin-left: 8px;\n margin-right: 12px;\n"])));
var CustomSizeField = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 3px;\n"])));
var CustomSizeFieldLabel = styled.span(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 9px;\n line-height: 11px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_545454, theme.fontWeights[500], theme.fonts.primary);
var CustomSizeInputWrap = styled.div(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n position: relative;\n width: 108px;\n height: 40px;\n border: 1px solid ", ";\n border-radius: 8px;\n background-color: ", ";\n box-sizing: border-box;\n transition: border-color 0.15s ease;\n\n &:focus-within {\n border-color: ", ";\n }\n"])), theme.color.gray_200, theme.color.white, theme.color.primary);
var CustomSizeInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%;\n height: 100%;\n border: none;\n border-radius: 8px;\n padding: 6px 32px 6px 10px;\n box-sizing: border-box;\n background: transparent;\n color: ", ";\n font-size: 14px;\n line-height: 20px;\n font-family: ", ";\n color-scheme: light;\n appearance: textfield;\n\n &:focus {\n outline: none;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n"])), theme.color.gray_700, theme.fonts.primary);
var CustomSizeUnit = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n position: absolute;\n top: 50%;\n right: 10px;\n transform: translateY(-50%);\n color: ", ";\n font-size: 12px;\n line-height: 16px;\n font-family: ", ";\n pointer-events: none;\n"])), theme.color.gray_545454, theme.fonts.primary);
var CustomSizeSeparator = styled.span(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 20px;\n line-height: 20px;\n font-weight: ", ";\n padding-bottom: 8px;\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var CustomSizeError = styled.span(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n color: #d32f2f;\n font-size: 11px;\n margin-left: 4px;\n"])));
var propTypes$r = {
backgroundColor: PropTypes.string,
onChange: PropTypes.func
};
var _templateObject$l;
var Box = styled.input.attrs({
type: 'color'
})(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 22px;\n height: 22px;\n border: none;\n border-radius: 4px;\n border: 1px solid ", ";\n padding: 0;\n cursor: pointer;\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: none;\n border-radius: 4px;\n }\n\n &::-moz-color-swatch {\n border: none;\n border-radius: 4px;\n }\n"])), theme.color.gray_CCC);
var ColorBox = function ColorBox(_ref) {
var backgroundColor = _ref.backgroundColor,
onChange = _ref.onChange;
var _useState = useState(''),
_useState2 = _slicedToArray(_useState, 2),
color = _useState2[0],
setColor = _useState2[1];
useEffect(function () {
var handler = setTimeout(function () {
if (!color) {
return;
}
onChange(color);
}, 200);
return function () {
return clearTimeout(handler);
};
}, [color]);
var onChangeColor = function onChangeColor(e) {
setColor(e.target.value);
};
return /*#__PURE__*/React.createElement(Box, {
value: backgroundColor,
onChange: onChangeColor
});
};
ColorBox.propTypes = propTypes$r;
var _templateObject$k, _templateObject2$g;
var StyledImage = styled.img(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n max-width: ", ";\n max-height: ", ";\n object-fit: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n border-radius: ", ";\n"])), function (_ref) {
var width = _ref.width;
return width + 'px' || 'auto';
}, function (_ref2) {
var height = _ref2.height;
return height + 'px' || 'auto';
}, function (_ref3) {
var maxWidth = _ref3.maxWidth;
return maxWidth + 'px' || 'auto';
}, function (_ref4) {
var maxHeight = _ref4.maxHeight;
return maxHeight + 'px' || 'auto';
}, function (_ref5) {
var objectFit = _ref5.objectFit;
return objectFit || 'contain';
}, function (_ref6) {
var _ref6$marginTop = _ref6.marginTop,
marginTop = _ref6$marginTop === void 0 ? 0 : _ref6$marginTop;
return "".concat(marginTop, "px");
}, function (_ref7) {
var _ref7$marginRight = _ref7.marginRight,
marginRight = _ref7$marginRight === void 0 ? 0 : _ref7$marginRight;
return "".concat(marginRight, "px");
}, function (_ref8) {
var _ref8$marginBottom = _ref8.marginBottom,
marginBottom = _ref8$marginBottom === void 0 ? 0 : _ref8$marginBottom;
return "".concat(marginBottom, "px");
}, function (_ref9) {
var _ref9$marginLeft = _ref9.marginLeft,
marginLeft = _ref9$marginLeft === void 0 ? 0 : _ref9$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref0) {
var _ref0$paddingTop = _ref0.paddingTop,
paddingTop = _ref0$paddingTop === void 0 ? 0 : _ref0$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref1) {
var _ref1$paddingRight = _ref1.paddingRight,
paddingRight = _ref1$paddingRight === void 0 ? 0 : _ref1$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref10) {
var _ref10$paddingBottom = _ref10.paddingBottom,
paddingBottom = _ref10$paddingBottom === void 0 ? 0 : _ref10$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref11) {
var _ref11$paddingLeft = _ref11.paddingLeft,
paddingLeft = _ref11$paddingLeft === void 0 ? 0 : _ref11$paddingLeft;
return "".concat(paddingLeft, "px");
}, function (_ref12) {
var _ref12$borderRadius = _ref12.borderRadius,
borderRadius = _ref12$borderRadius === void 0 ? 0 : _ref12$borderRadius;
return "".concat(borderRadius, "px");
});
var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n font-family: ", ";\n font-size: ", ";\n color: ", ";\n font-weight: ", ";\n line-height: ", ";\n text-align: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n padding-top: ", ";\n padding-right: ", ";\n padding-bottom: ", ";\n padding-left: ", ";\n"])), function (_ref13) {
var fontFamily = _ref13.fontFamily;
return fontFamily || theme.fonts.primary;
}, function (_ref14) {
var _ref14$fontSize = _ref14.fontSize,
fontSize = _ref14$fontSize === void 0 ? 14 : _ref14$fontSize;
return "".concat(fontSize, "px");
}, function (_ref15) {
var color = _ref15.color;
return color || theme.color.gray_700;
}, function (_ref16) {
var _ref16$fontWeight = _ref16.fontWeight,
fontWeight = _ref16$fontWeight === void 0 ? 400 : _ref16$fontWeight;
return fontWeight;
}, function (_ref17) {
var lineHeight = _ref17.lineHeight;
return lineHeight || 'normal';
}, function (_ref18) {
var textAlign = _ref18.textAlign;
return textAlign || 'left';
}, function (_ref19) {
var _ref19$marginTop = _ref19.marginTop,
marginTop = _ref19$marginTop === void 0 ? 0 : _ref19$marginTop;
return "".concat(marginTop, "px");
}, function (_ref20) {
var _ref20$marginRight = _ref20.marginRight,
marginRight = _ref20$marginRight === void 0 ? 0 : _ref20$marginRight;
return "".concat(marginRight, "px");
}, function (_ref21) {
var _ref21$marginBottom = _ref21.marginBottom,
marginBottom = _ref21$marginBottom === void 0 ? 0 : _ref21$marginBottom;
return "".concat(marginBottom, "px");
}, function (_ref22) {
var _ref22$marginLeft = _ref22.marginLeft,
marginLeft = _ref22$marginLeft === void 0 ? 0 : _ref22$marginLeft;
return "".concat(marginLeft, "px");
}, function (_ref23) {
var _ref23$paddingTop = _ref23.paddingTop,
paddingTop = _ref23$paddingTop === void 0 ? 0 : _ref23$paddingTop;
return "".concat(paddingTop, "px");
}, function (_ref24) {
var _ref24$paddingRight = _ref24.paddingRight,
paddingRight = _ref24$paddingRight === void 0 ? 0 : _ref24$paddingRight;
return "".concat(paddingRight, "px");
}, function (_ref25) {
var _ref25$paddingBottom = _ref25.paddingBottom,
paddingBottom = _ref25$paddingBottom === void 0 ? 0 : _ref25$paddingBottom;
return "".concat(paddingBottom, "px");
}, function (_ref26) {
var _ref26$paddingLeft = _ref26.paddingLeft,
paddingLeft = _ref26$paddingLeft === void 0 ? 0 : _ref26$paddingLeft;
return "".concat(paddingLeft, "px");
});
var _excluded = ["image"];
var calculatePercentageValue = function calculatePercentageValue(value, percentage) {
return value * percentage / 100;
};
var pickImage = function pickImage() {
var allowedFormats = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ['png', 'jpg', 'jpeg', 'svg', 'webp'];
return new Promise(function (resolve, reject) {
var formats = (allowedFormats || []).map(function (f) {
return String(f).trim().toLowerCase();
}).filter(Boolean);
var accept = formats.map(function (f) {
return f.startsWith('.') ? f : ".".concat(f);
}).join(',');
var input = document.createElement('input');
input.type = 'file';
input.accept = accept || 'image/*';
input.style.display = 'none';
input.addEventListener('change', function (event) {
if (event.target.files.length > 0) {
resolve(event.target.files[0]);
} else {
reject(new Error('No file selected'));
}
});
input.click();
});
};
var isElementShape = function isElementShape(elem) {
if ((elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.circle) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.arrowRight) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.heart) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.horizontalLine) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.square) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.star) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.triangle) || (elem === null || elem === void 0 ? void 0 : elem.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.verticalLine)) {
return true;
} else {
return false;
}
};
var isElementOfSameType = function isElementOfSameType(elem, type) {
if (elem && (elem === null || elem === void 0 ? void 0 : elem.type) === type) {
return true;
} else {
return false;
}
};
var debounce = function debounce(func, delay) {
var timeoutId;
return function () {
var _this = this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
func.apply(_this, args);
}, delay);
};
};
var sanitizeNumber = function sanitizeNumber(value) {
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var precision = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
var num = parseFloat(value);
if (isNaN(num)) return defaultValue;
return parseFloat(num.toFixed(precision));
};
var loadAllGoogleFonts = function loadAllGoogleFonts() {
var weights = [400, 700];
var italics = [0, 1];
var fontParams = fontFamilies.map(function (font) {
var fontName = font.replace(/ /g, '+');
var variantStr = italics.map(function (ital) {
return weights.map(function (w) {
return "".concat(ital, ",").concat(w);
}).join(';');
}).join(';');
return "family=".concat(fontName, ":ital,wght@").concat(variantStr);
});
var fontURL = "https://fonts.googleapis.com/css2?".concat(fontParams.join('&'), "&display=swap");
return new Promise(function (resolve, reject) {
try {
if (!document.querySelector("link[href=\"".concat(fontURL, "\"]"))) {
var link = document.createElement('link');
link.href = fontURL;
link.rel = 'stylesheet';
document.head.appendChild(link);
}
var loadPromises = [];
fontFamilies.forEach(function (font) {
weights.forEach(function (weight) {
italics.forEach(function (ital) {
loadPromises.push(document.fonts.load("".concat(ital ? 'italic' : 'normal', " ").concat(weight, " 16px \"").concat(font, "\"")));
});
});
});
Promise.all(loadPromises).then(function () {
return resolve("\u2705 All ".concat(fontFamilies === null || fontFamilies === void 0 ? void 0 : fontFamilies.length, " fonts loaded"));
})["catch"](function (err) {
return reject(err);
});
} catch (err) {
reject(err);
}
});
};
var preloadRelevantImages = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var elements,
imagePromises,
_args = arguments;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
elements = _args.length > 0 && _args[0] !== undefined ? _args[0] : [];
imagePromises = elements === null || elements === void 0 ? void 0 : elements.map(function (elem) {
var src = null;
if ((elem === null || elem === void 0 ? void 0 : elem.type) === 'image' || (elem === null || elem === void 0 ? void 0 : elem.type) === 'backgroundImage') {
src = elem === null || elem === void 0 ? void 0 : elem.src;
} else if ((elem === null || elem === void 0 ? void 0 : elem.type) === 'qr') {
src = elem === null || elem === void 0 ? void 0 : elem.qrLogo;
}
if (!src) return null;
return new Promise(function (resolve, reject) {
var img = new Image();
img.onload = function () {
return resolve({
src: src,
success: true
});
};
img.onerror = function () {
return reject({
src: src,
success: false
});
};
img.src = src;
});
}).filter(Boolean);
return _context.a(2, Promise === null || Promise === void 0 ? void 0 : Promise.allSettled(imagePromises).then(function (results) {
var successes = results === null || results === void 0 ? void 0 : results.filter(function (r) {
return (r === null || r === void 0 ? void 0 : r.status) === 'fulfilled';
}).map(function (r) {
return r === null || r === void 0 ? void 0 : r.value;
});
var errors = results === null || results === void 0 ? void 0 : results.filter(function (r) {
return (r === null || r === void 0 ? void 0 : r.status) === 'rejected';
}).map(function (r) {
return r === null || r === void 0 ? void 0 : r.reason;
});
return {
successes: successes,
errors: errors
};
}));
}
}, _callee);
}));
return function preloadRelevantImages() {
return _ref.apply(this, arguments);
};
}();
var removeImageProperty = function removeImageProperty() {
var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
return elements.map(function (elem) {
if ('image' in elem) {
// eslint-disable-next-line no-unused-vars
elem.image;
var rest = _objectWithoutProperties(elem, _excluded);
return rest;
}
return elem;
});
};
var exportStageAsImage = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(stageRef, pageSizeKey) {
var scale,
cropArea,
_args3 = arguments;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
scale = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : 2;
cropArea = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : null;
return _context3.a(2, new Promise(/*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
var stage, canvasOptions, canvas, dataURL, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
_context2.p = 0;
stage = stageRef === null || stageRef === void 0 ? void 0 : stageRef.current;
if (stage) {
_context2.n = 1;
break;
}
return _context2.a(2, reject('Stage is not available'));
case 1:
canvasOptions = {
pixelRatio: scale
};
if (cropArea && Number.isFinite(cropArea.x) && Number.isFinite(cropArea.y) && Number.isFinite(cropArea.width) && Number.isFinite(cropArea.height)) {
canvasOptions.x = cropArea.x;
canvasOptions.y = cropArea.y;
canvasOptions.width = cropArea.width;
canvasOptions.height = cropArea.height;
}
// Create a canvas with the scale factor
_context2.n = 2;
return stage.toCanvas(canvasOptions);
case 2:
canvas = _context2.v;
_context2.n = 3;
return canvas.toDataURL('image/png');
case 3:
dataURL = _context2.v;
// Return the data URL as the resolved value
resolve(dataURL);
_context2.n = 5;
break;
case 4:
_context2.p = 4;
_t = _context2.v;
reject(_t);
case 5:
return _context2.a(2);
}
}, _callee2, null, [[0, 4]]);
}));
return function (_x3, _x4) {
return _ref3.apply(this, arguments);
};
}()));
}
}, _callee3);
}));
return function exportStageAsImage(_x, _x2) {
return _ref2.apply(this, arguments);
};
}();
var validateLocale = function validateLocale(locale) {
if (SUPPPORTED_LOCALES.includes(locale)) {
return locale;
} else {
return 'en';
}
};
var propTypes$q = {
value: PropTypes.number,
onChangeOpacity: PropTypes.func,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
pickerWidth: PropTypes.number,
leftChild: PropTypes.node,
rightChild: PropTypes.node,
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
showLeftChild: PropTypes.bool,
varient: PropTypes.string,
fontFamily: PropTypes.string,
tooltip: PropTypes.string,
tooltipPosition: PropTypes.string
};
var OpacityPicker = function OpacityPicker(_ref) {
var _TEXT_DICTIONARY$lang;
var _ref$value = _ref.value,
value = _ref$value === void 0 ? 1 : _ref$value,
onChangeOpacity = _ref.onChangeOpacity,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 1 : _ref$max,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 0.1 : _ref$step,
_ref$pickerWidth = _ref.pickerWidth,
pickerWidth = _ref$pickerWidth === void 0 ? 100 : _ref$pickerWidth,
leftChild = _ref.leftChild,
rightChild = _ref.rightChild,
_ref$gap = _ref.gap,
gap = _ref$gap === void 0 ? 12 : _ref$gap,
_ref$showLeftChild = _ref.showLeftChild,
showLeftChild = _ref$showLeftChild === void 0 ? true : _ref$showLeftChild,
_ref$varient = _ref.varient,
varient = _ref$varient === void 0 ? 'opacity' : _ref$varient,
_ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? theme.fonts.secondary : _ref$fontFamily,
_ref$languageLocale = _ref.languageLocale,
languageLocale = _ref$languageLocale === void 0 ? 'en' : _ref$languageLocale,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.OPACITY : _ref$tooltip,
_ref$tooltipPosition = _ref.tooltipPosition,
tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition,
toolBarIcon = _ref.toolBarIcon;
var pickerRef = useRef(null);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
opacityPickerVisible = _useState2[0],
setOpacityPickerVisible = _useState2[1];
useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setOpacityPickerVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
ref: pickerRef,
style: {
position: 'relative'
},
onClick: function onClick() {
setOpacityPickerVisible(true);
}
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: gap,
tooltip: tooltip,
tooltipPosition: tooltipPosition
}, showLeftChild && (leftChild ? leftChild : /*#__PURE__*/React.createElement(StyledImage, {
src: varient === 'opacity' ? IconOpacity : toolBarIcon
})), /*#__PURE__*/React.createElement(StyledText, {
fontFamily: fontFamily
}, varient === 'opacity' ? "".concat(Math.round(value * 100), "%") : "".concat(Math.round(value), "px")), rightChild && rightChild), opacityPickerVisible && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
bottom: -50,
background: 'white',
padding: 10,
borderRadius: 5,
border: 'solid 1px rgba(0,0,0,0.1)',
zIndex: 9999
}
}, /*#__PURE__*/React.createElement("input", {
type: "range",
min: min,
max: max,
step: step,
value: value,
onChange: function onChange(e) {
onChangeOpacity(Number(e.target.value));
},
style: {
width: pickerWidth
}
})));
};
OpacityPicker.propTypes = propTypes$q;
var propTypes$p = {
value: PropTypes.number,
strokeColor: PropTypes.string,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
onChangeStrokeWidth: PropTypes.func,
onChangeShapeStrokeColor: PropTypes.func,
pickerWidth: PropTypes.number,
languageLocale: PropTypes.string,
tooltip: PropTypes.string,
leftIcon: PropTypes.elementType
};
var StrokePicker = function StrokePicker(_ref) {
var _TEXT_DICTIONARY$lang;
var value = _ref.value,
strokeColor = _ref.strokeColor,
_ref$min = _ref.min,
min = _ref$min === void 0 ? 0 : _ref$min,
_ref$max = _ref.max,
max = _ref$max === void 0 ? 30 : _ref$max,
_ref$step = _ref.step,
step = _ref$step === void 0 ? 1 : _ref$step,
onChangeStrokeWidth = _ref.onChangeStrokeWidth,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
_ref$pickerWidth = _ref.pickerWidth,
pickerWidth = _ref$pickerWidth === void 0 ? 100 : _ref$pickerWidth,
_ref$languageLocale = _ref.languageLocale,
languageLocale = _ref$languageLocale === void 0 ? 'en' : _ref$languageLocale,
_ref$tooltip = _ref.tooltip,
tooltip = _ref$tooltip === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.STROKE_WIDTH_AND_COLOR : _ref$tooltip,
_ref$leftIcon = _ref.leftIcon,
leftIcon = _ref$leftIcon === void 0 ? IconGrid : _ref$leftIcon;
var pickerRef = useRef(null);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
strokePickerVisible = _useState2[0],
setStrokePickerVisible = _useState2[1];
var _useState3 = useState(''),
_useState4 = _slicedToArray(_useState3, 2),
color = _useState4[0],
setColor = _useState4[1];
useEffect(function () {
var handler = setTimeout(function () {
if (!color) {
return;
}
onChangeShapeStrokeColor(color);
}, 200);
return function () {
return clearTimeout(handler);
};
}, [color]);
var onChangeColor = function onChangeColor(e) {
setColor(e.target.value);
};
useEffect(function () {
var handleClickOutside = function handleClickOutside(event) {
if (pickerRef.current && !pickerRef.current.contains(event.target)) {
setStrokePickerVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return function () {
return document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
},
ref: pickerRef
}, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 12,
tooltip: tooltip,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: leftIcon
}), /*#__PURE__*/React.createElement(StyledText, {
fontFamily: theme.fonts.secondary
// marginRight={10}
,
paddingRight: 10,
onClick: function onClick() {
setStrokePickerVisible(true);
}
}, value), /*#__PURE__*/React.createElement("div", {
style: {
height: 22,
width: 22,
borderRadius: 4,
background: theme.color.gray_EFEFEF,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative'
}
}, /*#__PURE__*/React.createElement("input", {
type: "color",
value: strokeColor,
onChange: onChangeColor,
style: {
width: '100%',
height: '100%',
border: 'none',
cursor: 'pointer',
opacity: 0
}
}), /*#__PURE__*/React.createElement("div", {
style: {
height: 13,
width: 1,
backgroundColor: strokeColor,
transform: 'rotate(38deg)',
position: 'absolute',
pointerEvents: 'none'
}
}))), strokePickerVisible && /*#__PURE__*/React.createElement("div", {
style: {
position: 'absolute',
bottom: -50,
background: 'white',
padding: 10,
borderRadius: 5,
border: 'solid 1px rgba(0,0,0,0.1)',
zIndex: 9999
}
}, /*#__PURE__*/React.createElement("input", {
type: "range",
min: min,
max: max,
step: step,
value: value,
onChange: function onChange(e) {
onChangeStrokeWidth(Number(e.target.value));
},
style: {
width: pickerWidth
}
})));
};
StrokePicker.propTypes = propTypes$p;
var TemplateToolBar = function TemplateToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
var onSetBackgroundColor = _ref.onSetBackgroundColor,
canvasBackgroundColor = _ref.canvasBackgroundColor,
onSetBackgroundImage = _ref.onSetBackgroundImage,
backgroundImageOpacity = _ref.backgroundImageOpacity,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
selectedPageSizeLabel = _ref.selectedPageSizeLabel,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
canvasBackgroundImage = _ref.canvasBackgroundImage,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
_ref$showBackgroundIm = _ref.showBackgroundImagePicker,
showBackgroundImagePicker = _ref$showBackgroundIm === void 0 ? true : _ref$showBackgroundIm,
_ref$showOpacityPicke = _ref.showOpacityPicker,
showOpacityPicker = _ref$showOpacityPicke === void 0 ? true : _ref$showOpacityPicke;
var DEFAULT_CUSTOM_MM = 100;
var _useState = useState(DEFAULT_CUSTOM_MM),
_useState2 = _slicedToArray(_useState, 2),
customWidthMm = _useState2[0],
setCustomWidthMm = _useState2[1];
var _useState3 = useState(DEFAULT_CUSTOM_MM),
_useState4 = _slicedToArray(_useState3, 2),
customHeightMm = _useState4[0],
setCustomHeightMm = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
showCustomSizeInputs = _useState6[0],
setShowCustomSizeInputs = _useState6[1];
var _useState7 = useState(''),
_useState8 = _slicedToArray(_useState7, 2),
customSizeError = _useState8[0],
setCustomSizeError = _useState8[1];
var selectedLabel = selectedPageSizeLabel || (selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.preset) || selectedPageSize;
var sizeOptions = useMemo(function () {
return [].concat(_toConsumableArray(Object.keys(pageSizes)), [CUSTOM_CANVAS_PRESET_KEY]);
}, []);
useEffect(function () {
var isCustom = (selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.mode) === CANVAS_SIZE_MODES.custom;
setShowCustomSizeInputs(Boolean(isCustom));
if (isCustom) {
setCustomWidthMm((selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.widthMm) || DEFAULT_CUSTOM_MM);
setCustomHeightMm((selectedPageSize === null || selectedPageSize === void 0 ? void 0 : selectedPageSize.heightMm) || DEFAULT_CUSTOM_MM);
}
}, [selectedPageSize]);
var applyCustomSize = function applyCustomSize() {
var widthValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : customWidthMm;
var heightValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : customHeightMm;
var showError = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var widthMm = Number(widthValue);
var heightMm = Number(heightValue);
var isValidRange = widthMm >= 10 && widthMm <= 2000 && heightMm >= 10 && heightMm <= 2000;
if (!Number.isFinite(widthMm) || !Number.isFinite(heightMm) || !isValidRange) {
if (showError) setCustomSizeError('10-2000 mm');
return;
}
setCustomSizeError('');
onSetPageSize === null || onSetPageSize === void 0 || onSetPageSize({
mode: CANVAS_SIZE_MODES.custom,
widthMm: widthMm,
heightMm: heightMm
});
};
var handleCustomInputKeyDown = function handleCustomInputKeyDown(e) {
if (e.key !== 'Enter') return;
e.preventDefault();
applyCustomSize(customWidthMm, customHeightMm, true);
};
var handleCustomRowBlur = function handleCustomRowBlur(e) {
if (e.currentTarget.contains(e.relatedTarget)) return;
applyCustomSize(customWidthMm, customHeightMm, true);
};
var selectBackgroundColor = function selectBackgroundColor(e) {
onSetBackgroundColor(e);
};
var handleBackgroundUpload = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var file, imageUrl, reader;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return pickImage();
case 1:
file = _context.v;
if (file) {
_context.n = 2;
break;
}
return _context.a(2);
case 2:
if (!uploadImageCallBack) {
_context.n = 4;
break;
}
setLoadingUploadImage(true);
_context.n = 3;
return uploadImageCallBack(file);
case 3:
imageUrl = _context.v;
onSetBackgroundImage(imageUrl);
setLoadingUploadImage(false);
_context.n = 5;
break;
case 4:
reader = new FileReader();
reader.onload = function () {
onSetBackgroundImage(reader.result);
};
reader.readAsDataURL(file);
case 5:
return _context.a(2);
}
}, _callee);
}));
return function handleBackgroundUpload() {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(RowContainer$4, null, /*#__PURE__*/React.createElement(DropDown, {
gap: 20,
left: /*#__PURE__*/React.createElement(Label$1, null, selectedLabel),
list: sizeOptions,
onSelect: function onSelect(e) {
if (e === CUSTOM_CANVAS_PRESET_KEY) {
setShowCustomSizeInputs(true);
return;
}
setCustomSizeError('');
setShowCustomSizeInputs(false);
onSetPageSize && onSetPageSize(e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PAGE_SIZE
}), showCustomSizeInputs ? /*#__PURE__*/React.createElement(CustomSizeRow, {
onBlur: handleCustomRowBlur
}, /*#__PURE__*/React.createElement(CustomSizeField, null, /*#__PURE__*/React.createElement(CustomSizeFieldLabel, null, "Width"), /*#__PURE__*/React.createElement(CustomSizeInputWrap, null, /*#__PURE__*/React.createElement(CustomSizeInput, {
value: customWidthMm,
onChange: function onChange(e) {
var nextWidth = e.target.value;
setCustomWidthMm(nextWidth);
applyCustomSize(nextWidth, customHeightMm, false);
},
onKeyDown: handleCustomInputKeyDown,
type: "number",
min: 10,
max: 2000
}), /*#__PURE__*/React.createElement(CustomSizeUnit, null, "mm"))), /*#__PURE__*/React.createElement(CustomSizeSeparator, null, "x"), /*#__PURE__*/React.createElement(CustomSizeField, null, /*#__PURE__*/React.createElement(CustomSizeFieldLabel, null, "Height"), /*#__PURE__*/React.createElement(CustomSizeInputWrap, null, /*#__PURE__*/React.createElement(CustomSizeInput, {
value: customHeightMm,
onChange: function onChange(e) {
var nextHeight = e.target.value;
setCustomHeightMm(nextHeight);
applyCustomSize(customWidthMm, nextHeight, false);
},
onKeyDown: handleCustomInputKeyDown,
type: "number",
min: 10,
max: 2000
}), /*#__PURE__*/React.createElement(CustomSizeUnit, null, "mm"))), customSizeError ? /*#__PURE__*/React.createElement(CustomSizeError, null, customSizeError) : null) : null, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 11,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.BACKGROUND_COLOR,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundColor
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: canvasBackgroundColor || theme.color.white,
onChange: selectBackgroundColor
})), showBackgroundImagePicker && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
paddingRight: 17,
paddingLeft: 17,
onClick: handleBackgroundUpload,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.BACKGROUND_IMAGE,
tooltipPosition: 'bottom'
}, canvasBackgroundImage && /*#__PURE__*/React.createElement(RemoveButton, {
onClick: function onClick(e) {
onRemoveBackgroundImage && onRemoveBackgroundImage();
e.stopPropagation();
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCross,
height: 15,
width: 15
})), /*#__PURE__*/React.createElement(StyledImage, {
src: (canvasBackgroundImage === null || canvasBackgroundImage === void 0 ? void 0 : canvasBackgroundImage.src) || IconBackgroundImage,
height: 24,
width: 24
})), showOpacityPicker && /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.BACKGROUND_IMAGE_OPACITY,
gap: 10,
value: backgroundImageOpacity,
onChangeOpacity: onChangeBackgroundImageOpacity,
leftChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundImageOpacity
}),
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDownSmall
})
}), /*#__PURE__*/React.createElement(StrokePicker, {
gap: 10,
value: cuttingGuideStroke,
onChangeStrokeWidth: function onChangeStrokeWidth(e) {
onChangeCuttingGuideProp('cuttingGuideStroke', e);
},
strokeColor: cuttingGuideStrokeColor,
onChangeShapeStrokeColor: function onChangeShapeStrokeColor(e) {
onChangeCuttingGuideProp('cuttingGuideStrokeColor', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.CUTTING_GUIDE,
languageLocale: languageLocale,
leftIcon: IconFrame,
max: 10
}));
};
TemplateToolBar.propTypes = propTypes$u;
var propTypes$o = {
fontFamily: PropTypes.string,
fontSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
color: PropTypes.string,
textDecoration: PropTypes.string,
fontStyle: PropTypes.string,
fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
textAlign: PropTypes.string,
textOpacity: PropTypes.number,
onChangeTextProperty: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$j, _templateObject2$f;
var Label = styled.p(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n width: 100px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n"])), theme.color.gray_700, theme.fontWeights[400], function (_ref) {
var _ref$fontFamily = _ref.fontFamily,
fontFamily = _ref$fontFamily === void 0 ? theme.fonts.primary : _ref$fontFamily;
return fontFamily;
});
var RowContainer$3 = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var propTypes$n = {
tabsData: PropTypes.arrayOf(PropTypes.object),
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
tabPadding: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
marginRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
disabled: PropTypes.bool,
tooltipPosition: PropTypes.string
};
var _templateObject$i, _templateObject2$e;
var TabBarContainer = styled.div(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n height: ", "px;\n margin-right: ", "px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background: ", ";\n opacity: ", ";\n pointer-events: ", ";\n"])), theme.color.gray_200, function (_ref) {
var height = _ref.height;
return height;
}, function (_ref2) {
var _ref2$marginRight = _ref2.marginRight,
marginRight = _ref2$marginRight === void 0 ? 0 : _ref2$marginRight;
return marginRight;
}, theme.color.white, function (_ref3) {
var disabled = _ref3.disabled;
return disabled ? 0.5 : 1;
}, function (_ref4) {
var disabled = _ref4.disabled;
return disabled ? 'none' : 'all';
});
var TabItem = styled.div(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n padding: ", ";\n cursor: ", ";\n border-right: ", ";\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: ", ";\n background: ", ";\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n pointer-events: ", ";\n"])), function (_ref5) {
var tabPadding = _ref5.tabPadding;
return tabPadding;
}, function (_ref6) {
var disabled = _ref6.disabled;
return disabled ? 'not-allowed' : 'pointer';
}, function (_ref7) {
var isLast = _ref7.isLast;
return isLast ? 'none' : "1px solid ".concat(theme.color.gray_200);
}, function (_ref8) {
var disabled = _ref8.disabled;
return disabled ? 0.5 : 1;
}, function (_ref9) {
var _ref9$selected = _ref9.selected,
selected = _ref9$selected === void 0 ? false : _ref9$selected;
return selected ? theme.color.gray_200 : theme.color.white;
}, function (_ref0) {
var isFirst = _ref0.isFirst;
return isFirst ? '5' : '0';
}, function (_ref1) {
var isFirst = _ref1.isFirst;
return isFirst ? '5' : '0';
}, function (_ref10) {
var isLast = _ref10.isLast;
return isLast ? '5' : '0';
}, function (_ref11) {
var isLast = _ref11.isLast;
return isLast ? '5' : '0';
}, function (_ref12) {
var disabled = _ref12.disabled;
return disabled ? 'none' : 'all';
});
var ToolsTabBar = function ToolsTabBar(_ref) {
var _ref$tabsData = _ref.tabsData,
tabsData = _ref$tabsData === void 0 ? [] : _ref$tabsData,
_ref$height = _ref.height,
height = _ref$height === void 0 ? 36 : _ref$height,
_ref$tabPadding = _ref.tabPadding,
tabPadding = _ref$tabPadding === void 0 ? '8px 12px' : _ref$tabPadding,
_ref$marginRight = _ref.marginRight,
marginRight = _ref$marginRight === void 0 ? 0 : _ref$marginRight,
_ref$disabled = _ref.disabled,
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
_ref$tooltipPosition = _ref.tooltipPosition,
tooltipPosition = _ref$tooltipPosition === void 0 ? 'bottom' : _ref$tooltipPosition;
return /*#__PURE__*/React.createElement(TabBarContainer, {
disabled: disabled,
height: height,
marginRight: marginRight
}, tabsData.map(function (item, index) {
return /*#__PURE__*/React.createElement(Tooltip, {
key: index,
position: tooltipPosition,
text: item === null || item === void 0 ? void 0 : item.tooltip,
disabled: item === null || item === void 0 ? void 0 : item.disabled
}, /*#__PURE__*/React.createElement(TabItem, {
key: index,
tabPadding: tabPadding,
isLast: index === tabsData.length - 1,
isFirst: index === 0,
onClick: item === null || item === void 0 ? void 0 : item.onClick,
disabled: item === null || item === void 0 ? void 0 : item.disabled,
selected: item === null || item === void 0 ? void 0 : item.selected
}, item === null || item === void 0 ? void 0 : item.element));
}));
};
ToolsTabBar.propTypes = propTypes$n;
var TextToolBar = function TextToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8, _TEXT_DICTIONARY$lang9, _TEXT_DICTIONARY$lang0, _TEXT_DICTIONARY$lang1, _TEXT_DICTIONARY$lang10;
var fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize,
lineHeight = _ref.lineHeight,
color = _ref.color,
textDecoration = _ref.textDecoration,
fontStyle = _ref.fontStyle,
fontWeight = _ref.fontWeight,
textAlign = _ref.textAlign,
textOpacity = _ref.textOpacity,
onChangeTextProperty = _ref.onChangeTextProperty,
languageLocale = _ref.languageLocale;
var TextTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBold
}),
selected: fontWeight > (theme === null || theme === void 0 ? void 0 : theme.fontWeights[500]) || fontWeight === 'bold',
onClick: function onClick() {
if (fontWeight > (theme === null || theme === void 0 ? void 0 : theme.fontWeights[500]) || fontWeight === 'bold') {
onChangeTextProperty('fontWeight', theme === null || theme === void 0 ? void 0 : theme.fontWeights[400]);
} else {
onChangeTextProperty('fontWeight', theme === null || theme === void 0 ? void 0 : theme.fontWeights[700]);
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.BOLD,
disabled: funkyFonts.includes(fontFamily) ? true : false
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextItalic
}),
selected: fontStyle === 'italic',
onClick: function onClick() {
if (fontStyle === 'italic') {
onChangeTextProperty('fontStyle', 'normal');
} else {
onChangeTextProperty('fontStyle', 'italic');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.ITALIC,
disabled: funkyFonts.includes(fontFamily) ? true : false
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconLineThrough
}),
selected: textDecoration === null || textDecoration === void 0 ? void 0 : textDecoration.includes('line-through'),
onClick: function onClick() {
if (textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through')) {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline') ? 'underline' : 'normal');
} else {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline') ? 'underline line-through' : 'line-through');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.LINE_THROUGH
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextUnderLine
}),
selected: textDecoration === null || textDecoration === void 0 ? void 0 : textDecoration.includes('underline'),
onClick: function onClick() {
if (textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('underline')) {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through') ? 'line-through' : 'normal');
} else {
onChangeTextProperty('textDecoration', textDecoration !== null && textDecoration !== void 0 && textDecoration.includes('line-through') ? 'underline line-through' : 'underline');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UNDERLINE
}];
var AlignmentTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignLeft
}),
selected: textAlign === 'left',
onClick: function onClick() {
if (textAlign !== 'left') {
onChangeTextProperty('textAlign', 'left');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.LEFT_ALIGN
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignCenter
}),
selected: textAlign === 'center',
onClick: function onClick() {
if (textAlign !== 'center') {
onChangeTextProperty('textAlign', 'center');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CENTER_ALIGN
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAlignRight
}),
selected: textAlign === 'right',
onClick: function onClick() {
if (textAlign !== 'right') {
onChangeTextProperty('textAlign', 'right');
}
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.RIGHT_ALIGN
}];
return /*#__PURE__*/React.createElement(RowContainer$3, null, /*#__PURE__*/React.createElement(DropDown, {
gap: 40,
left: /*#__PURE__*/React.createElement(Label, {
fontFamily: fontFamily
}, fontFamily),
fontPicker: true,
list: fontFamilies,
onSelect: function onSelect(e) {
onChangeTextProperty('fontFamily', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang8 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang8 === void 0 ? void 0 : _TEXT_DICTIONARY$lang8.FONT_FAMILY,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
gap: 11,
value: fontSize,
varient: 'size',
fontFamily: theme.fonts.primary,
min: 5,
max: 100,
step: 1,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('fontSize', e);
},
showLeftChild: false,
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDown,
marginLeft: 10
}),
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang9 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang9 === void 0 ? void 0 : _TEXT_DICTIONARY$lang9.TEXT_SIZE,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
gap: 11,
value: lineHeight,
varient: 'size',
fontFamily: theme.fonts.primary,
min: 1,
max: 5,
step: 0.5,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('lineHeight', e);
},
showLeftChild: false,
rightChild: /*#__PURE__*/React.createElement(StyledImage, {
src: IconDropDown,
marginLeft: 10
}),
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang0 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang0 === void 0 ? void 0 : _TEXT_DICTIONARY$lang0.TEXT_LINE_HEIGHT,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 12,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang1 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang1 === void 0 ? void 0 : _TEXT_DICTIONARY$lang1.TEXT_COLOR,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconTextSmall
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: color,
onChange: function onChange(e) {
return onChangeTextProperty('color', e);
}
})), /*#__PURE__*/React.createElement(ToolsTabBar, {
tabsData: TextTabsData,
marginRight: 12,
height: 40,
tabPadding: topTabBarpadding,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(ToolsTabBar, {
tabsData: AlignmentTabsData,
marginRight: 20,
height: 40,
tabPadding: topTabBarpadding,
tooltipPosition: 'bottom'
}), /*#__PURE__*/React.createElement(OpacityPicker, {
value: textOpacity,
onChangeOpacity: function onChangeOpacity(e) {
return onChangeTextProperty('opacity', e);
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang10 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang10 === void 0 ? void 0 : _TEXT_DICTIONARY$lang10.TEXT_OPACITY,
tooltipPosition: 'bottom'
}));
};
TextToolBar.propTypes = propTypes$o;
var propTypes$m = {
imageStrokeWidth: PropTypes.number,
imageStrokeColor: PropTypes.string,
imageOpacity: PropTypes.number,
onChangeImageStrokeWidth: PropTypes.func,
onChangeImageStrokeColor: PropTypes.func,
onChangeImageOpacity: PropTypes.func,
imageTintColor: PropTypes.string,
imageTintStrength: PropTypes.number,
onChangeImageTintColor: PropTypes.func,
onChangeImageTintStrength: PropTypes.func,
onClearImageTint: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string
};
var _templateObject$h, _templateObject2$d;
styled.p(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$2 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var ImageToolBar = function ImageToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _selectedElement$tint, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _selectedElement$tint2, _TEXT_DICTIONARY$lang7;
var imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
imageTintColor = _ref.imageTintColor,
imageTintStrength = _ref.imageTintStrength,
onChangeImageTintColor = _ref.onChangeImageTintColor,
onChangeImageTintStrength = _ref.onChangeImageTintStrength,
onClearImageTint = _ref.onClearImageTint,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale;
var isSelectedImage = isElementOfSameType(selectedElement, elementTypes.image);
return /*#__PURE__*/React.createElement(RowContainer$2, null, /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : imageStrokeWidth,
onChangeStrokeWidth: onChangeImageStrokeWidth,
strokeColor: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : imageStrokeColor,
onChangeShapeStrokeColor: onChangeImageStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.IMAGE_OPACITY,
value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : imageOpacity,
onChangeOpacity: onChangeImageOpacity,
languageLocale: languageLocale
}), isSelectedImage && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 8,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.MONOCHROME_COLOR,
tooltipPosition: 'bottom'
}, /*#__PURE__*/React.createElement(StyledText, {
fontFamily: theme.fonts.secondary
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.MONOCHROME_COLOR), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintColor) || imageTintColor,
onChange: onChangeImageTintColor
})), isSelectedImage && /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.MONOCHROME_STRENGTH,
tooltipPosition: 'bottom',
value: (_selectedElement$tint = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint !== void 0 ? _selectedElement$tint : imageTintStrength,
min: 0,
max: 1,
step: 0.05,
onChangeOpacity: onChangeImageTintStrength,
leftChild: /*#__PURE__*/React.createElement(StyledText, {
fontFamily: theme.fonts.secondary
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.TINT_SHORT)
}), isSelectedImage && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 8,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CLEAR_MONOCHROME,
tooltipPosition: 'bottom',
onClick: onClearImageTint,
disabled: ((_selectedElement$tint2 = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint2 !== void 0 ? _selectedElement$tint2 : 0) <= 0
}, /*#__PURE__*/React.createElement(StyledText, {
fontFamily: theme.fonts.secondary
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.CLEAR_MONOCHROME)));
};
ImageToolBar.propTypes = propTypes$m;
var propTypes$l = {
shapeStrokeColor: PropTypes.string,
shapeStrokeWidth: PropTypes.number,
shapeFillColor: PropTypes.string,
shapeOpacity: PropTypes.number,
onChangeShapeStrokeColor: PropTypes.func,
onChangeShapeStrokeWidth: PropTypes.func,
onChangeShapeFill: PropTypes.func,
onChangeShapeOpacity: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string,
onChangeCornerRadius: PropTypes.func
};
var _templateObject$g, _templateObject2$c;
styled.p(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer$1 = styled.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var ShapeToolBar = function ShapeToolBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3;
var shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale,
onChangeCornerRadius = _ref.onChangeCornerRadius;
return /*#__PURE__*/React.createElement(RowContainer$1, null, /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
gap: 11,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SHAPE_FILL,
tooltipPosition: "bottom"
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconBackgroundColor
}), /*#__PURE__*/React.createElement(ColorBox, {
backgroundColor: isElementShape(selectedElement) && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fill) || shapeFillColor,
onChange: onChangeShapeFill
})), /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : shapeStrokeWidth,
onChangeStrokeWidth: onChangeShapeStrokeWidth,
strokeColor: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : shapeStrokeColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHAPE_OPACITY,
value: isElementShape(selectedElement) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : shapeOpacity,
onChangeOpacity: onChangeShapeOpacity,
languageLocale: languageLocale
}), (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'square' && /*#__PURE__*/React.createElement(OpacityPicker, {
tooltip: (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.CORNER_RADIUS) || 'Corner Radius',
value: selectedElement.cornerRadius || 0,
min: 0,
max: 50,
step: 1,
varient: "radius",
onChangeOpacity: onChangeCornerRadius,
languageLocale: languageLocale,
toolBarIcon: IconRoundedCorner
}));
};
ShapeToolBar.propTypes = propTypes$l;
var propTypes$k = {
qrStrokeWidth: PropTypes.number,
qrStrokeColor: PropTypes.string,
qrOpacity: PropTypes.number,
onChangeQrStrokeWidth: PropTypes.func,
onChangeQrStrokeColor: PropTypes.func,
onChangeQrOpacity: PropTypes.func,
selectedElement: PropTypes.object,
languageLocale: PropTypes.string
};
var _templateObject$f, _templateObject2$b;
styled.p(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 14px;\n font-weight: ", ";\n font-family: ", ";\n"])), theme.color.gray_700, theme.fontWeights[400], theme.fonts.primary);
var RowContainer = styled.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n"])));
var QrToolBar = function QrToolBar(_ref) {
var _TEXT_DICTIONARY$lang;
var qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
selectedElement = _ref.selectedElement,
languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(RowContainer, null, /*#__PURE__*/React.createElement(StrokePicker, {
value: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : qrStrokeWidth,
onChangeStrokeWidth: onChangeQrStrokeWidth,
strokeColor: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.stroke : qrStrokeColor,
onChangeShapeStrokeColor: onChangeQrStrokeColor,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(OpacityPicker, {
value: isElementOfSameType(selectedElement, elementTypes.qr) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : qrOpacity,
onChangeOpacity: onChangeQrOpacity,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.OPACITY,
languageLocale: languageLocale
}));
};
QrToolBar.propTypes = propTypes$k;
var TopToolBar = function TopToolBar(_ref) {
var selectedTab = _ref.selectedTab,
onSetBackgroundColor = _ref.onSetBackgroundColor,
canvasBackgroundColor = _ref.canvasBackgroundColor,
canvasBackgroundImage = _ref.canvasBackgroundImage,
onSetBackgroundImage = _ref.onSetBackgroundImage,
shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
backgroundImageOpacity = _ref.backgroundImageOpacity,
imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
imageTintColor = _ref.imageTintColor,
imageTintStrength = _ref.imageTintStrength,
onChangeImageTintColor = _ref.onChangeImageTintColor,
onChangeImageTintStrength = _ref.onChangeImageTintStrength,
onClearImageTint = _ref.onClearImageTint,
qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
defaultTextProps = _ref.defaultTextProps,
onChangeTextProperty = _ref.onChangeTextProperty,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
selectedPageSizeLabel = _ref.selectedPageSizeLabel,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
changeSelectedElementProperty = _ref.changeSelectedElementProperty;
return /*#__PURE__*/React.createElement(ToolBarWrapper, {
disabled: selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, selectedElement && !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) && /*#__PURE__*/React.createElement(OverlayBlocker, {
onClick: function onClick(e) {
e === null || e === void 0 || e.stopPropagation();
}
}), selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.template) ? /*#__PURE__*/React.createElement(TemplateToolBar, {
onSetBackgroundColor: onSetBackgroundColor,
canvasBackgroundColor: canvasBackgroundColor,
canvasBackgroundImage: canvasBackgroundImage,
onSetBackgroundImage: onSetBackgroundImage,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: backgroundImageOpacity,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
selectedPageSizeLabel: selectedPageSizeLabel,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
cuttingGuideStroke: cuttingGuideStroke,
cuttingGuideStrokeColor: cuttingGuideStrokeColor,
onChangeCuttingGuideProp: onChangeCuttingGuideProp,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextToolBar, {
fontFamily: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
fontSize: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize,
lineHeight: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.lineHeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.lineHeight,
color: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color,
textDecoration: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.textDecoration : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
fontStyle: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontStyle : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
fontWeight: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.fontWeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight,
textAlign: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.textAlign : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textAlign,
selectedElement: selectedElement,
textOpacity: isElementOfSameType(selectedElement, elementTypes.text) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity,
onChangeTextProperty: onChangeTextProperty,
languageLocale: languageLocale
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image) ? /*#__PURE__*/React.createElement(ImageToolBar, {
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
imageTintColor: imageTintColor,
imageTintStrength: imageTintStrength,
onChangeImageTintColor: onChangeImageTintColor,
onChangeImageTintStrength: onChangeImageTintStrength,
onClearImageTint: onClearImageTint,
selectedElement: selectedElement,
languageLocale: languageLocale
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeToolBar, {
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
selectedElement: selectedElement,
languageLocale: languageLocale,
onChangeCornerRadius: function onChangeCornerRadius(val) {
changeSelectedElementProperty('cornerRadius', Number(val));
}
}) : selectedTab === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr) ? /*#__PURE__*/React.createElement(QrToolBar, {
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
selectedElement: selectedElement,
languageLocale: languageLocale
}) : null);
};
TopToolBar.propTypes = propTypes$v;
var propTypes$j = {
selectedTab: PropTypes.string,
zoomPercentage: PropTypes.number,
onChangeZoomPercentage: PropTypes.func,
onUndo: PropTypes.func,
onRedo: PropTypes.func,
disableUndo: PropTypes.bool,
disableRedo: PropTypes.bool,
selectedElement: PropTypes.object,
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
languageLocale: PropTypes.string
};
var propTypes$i = {
zoomLevel: PropTypes.number,
onZoomIn: PropTypes.func,
onZoomOut: PropTypes.func,
translation: PropTypes.object
};
var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$2;
var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n"])));
var ZoomControlWrapper = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n border-radius: 6px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: white;\n"])), theme.color.gray_200);
var ZoomButton = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 14px;\n cursor: pointer;\n"])));
var Divider = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n width: 1px;\n height: 80%;\n background: rgba(77, 98, 119, 0.2);\n"])));
var ZoomPercentage = styled.p(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n padding: 0 14px;\n font-family: ", ";\n font-weight: ", ";\n color: ", ";\n"])), theme.fonts.primary, theme.fontWeights[500], theme.color.icon_gray);
var propTypes$h = {
varient: PropTypes.oneOf(Object.values(ButtonVarients)),
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
text: PropTypes.string,
marginBottom: PropTypes.number,
marginTop: PropTypes.number,
onClick: PropTypes.func
};
var _templateObject$d, _templateObject2$9;
var StyledButton = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n padding: 10px;\n border-radius: 6px;\n border: 1px solid ", ";\n cursor: pointer;\n margin-top: ", "px;\n margin-bottom: ", "px;\n background: ", ";\n"])), theme.color.primary, function (_ref) {
var marginTop = _ref.marginTop;
return marginTop;
}, function (_ref2) {
var marginBottom = _ref2.marginBottom;
return marginBottom;
}, function (_ref3) {
var varient = _ref3.varient;
return varient === ButtonVarients.primary ? theme.color.primary : theme.color.white;
});
var IconWrapper$2 = styled.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n margin-right: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var Button = function Button(_ref) {
var _ref$varient = _ref.varient,
varient = _ref$varient === void 0 ? ButtonVarients.secondary : _ref$varient,
left = _ref.left,
text = _ref.text,
_ref$marginBottom = _ref.marginBottom,
marginBottom = _ref$marginBottom === void 0 ? 0 : _ref$marginBottom,
_ref$marginTop = _ref.marginTop,
marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
onClick = _ref.onClick,
style = _ref.style;
return /*#__PURE__*/React.createElement(StyledButton, {
varient: varient,
marginTop: marginTop,
marginBottom: marginBottom,
onClick: onClick,
style: style
}, left && /*#__PURE__*/React.createElement(IconWrapper$2, null, left), /*#__PURE__*/React.createElement(StyledText, {
fontSize: 14,
fontWeight: theme.fontWeights[600],
color: varient === ButtonVarients.primary ? theme.color.white : theme.color.primary
}, text));
};
Button.propTypes = propTypes$h;
var ZoomControls = function ZoomControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var _ref$zoomLevel = _ref.zoomLevel,
zoomLevel = _ref$zoomLevel === void 0 ? 60 : _ref$zoomLevel,
onZoomIn = _ref.onZoomIn,
onZoomOut = _ref.onZoomOut,
languageLocale = _ref.languageLocale,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText;
return /*#__PURE__*/React.createElement(Container$3, null, showSaveButton && /*#__PURE__*/React.createElement(Button, {
text: saveButtonText || (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SAVE),
varient: ButtonVarients === null || ButtonVarients === void 0 ? void 0 : ButtonVarients.primary,
marginBottom: 10,
style: {
position: 'absolute',
top: -50,
zIndex: 400,
right: 0
},
onClick: onSave
}), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.ZOOM_IN_OUT,
position: "top"
}, /*#__PURE__*/React.createElement(ZoomControlWrapper, null, /*#__PURE__*/React.createElement(ZoomButton, {
onClick: onZoomOut
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconZoomOut
})), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ZoomPercentage, null, zoomLevel, "%"), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(ZoomButton, {
onClick: onZoomIn
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconZoomIn
})))));
};
ZoomControls.propTypes = propTypes$i;
var propTypes$g = {
onDeleteSelectedElement: PropTypes.func,
onCopySelectedElement: PropTypes.func,
onToggleLockElement: PropTypes.func,
selectedElement: PropTypes.object,
bringSelectedElementToFront: PropTypes.func,
sendSelectedElementToBack: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$c;
var ToolBarContainer = styled.div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n display: flex;\n padding: 12px 24px;\n background: ", ";\n gap: 15px;\n border-radius: 10px 10px 0px 0px;\n border: 1px solid ", ";\n border-bottom: none;\n align-items: center;\n"])), theme.color.gray_FDFCFC, theme.color.gray_EDEDED);
var BottomToolBarControls = function BottomToolBarControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
var onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
selectedElement = _ref.selectedElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
languageLocale = _ref.languageLocale;
var BringFrontBackTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconBringFront
}),
onClick: function onClick() {
bringSelectedElementToFront && bringSelectedElementToFront();
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.BRING_FORWARD
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconSentBack
}),
onClick: function onClick() {
sendSelectedElementToBack && sendSelectedElementToBack();
},
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SEND_BACKWARD
}];
return /*#__PURE__*/React.createElement(ToolBarContainer, null, /*#__PURE__*/React.createElement(ToolsTabBar, {
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable),
tabsData: BringFrontBackTabsData,
tooltipPosition: "top"
}), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.LOCK : TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UNLOCK,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onToggleLockElement
}, /*#__PURE__*/React.createElement(StyledImage, {
src: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? IconUnlock : IconLock,
height: 20,
width: 20
})), (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) !== (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.COPY,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onCopySelectedElement,
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCopy
})), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.DELETE,
tooltipPosition: "top",
paddingRight: 14.6,
paddingLeft: 14.6,
height: 36,
marginRight: 0,
onClick: onDeleteSelectedElement,
disabled: !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable)
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconDelete
})));
};
BottomToolBarControls.propTypes = propTypes$g;
var _templateObject$b;
var BottomToolbarWrapper = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: ", ";\n padding-right: 3%;\n padding-left: 5%;\n padding-bottom: ", "px;\n flex-wrap: wrap;\n gap: 5px;\n"])), function (_ref) {
var selectedTab = _ref.selectedTab;
return selectedTab ? 'space-between' : 'flex-end';
}, function (_ref2) {
var selectedTab = _ref2.selectedTab;
return selectedTab ? '6' : '14';
});
var propTypes$f = {
onUndo: PropTypes.func,
onRedo: PropTypes.func,
disableUndo: PropTypes.bool,
disableRedo: PropTypes.bool,
translation: PropTypes.object
};
var UndoRedoControls = function UndoRedoControls(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
disableUndo = _ref.disableUndo,
disableRedo = _ref.disableRedo,
languageLocale = _ref.languageLocale;
var UndeRedoTabsData = [{
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUndo
}),
onClick: function onClick() {
return onUndo();
},
disabled: disableUndo,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.UNDO
}, {
element: /*#__PURE__*/React.createElement(StyledImage, {
src: IconRedo
}),
onClick: function onClick() {
return onRedo();
},
disabled: disableRedo,
tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.REDO
}];
return /*#__PURE__*/React.createElement(ToolsTabBar, {
height: 44,
tabPadding: "12px 17px",
tabsData: UndeRedoTabsData,
tooltipPosition: "top"
});
};
UndoRedoControls.propTypes = propTypes$f;
var BottomToolBar = function BottomToolBar(_ref) {
var selectedTab = _ref.selectedTab,
zoomPercentage = _ref.zoomPercentage,
onChangeZoomPercentage = _ref.onChangeZoomPercentage,
onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
disableUndo = _ref.disableUndo,
disableRedo = _ref.disableRedo,
selectedElement = _ref.selectedElement,
onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
languageLocale = _ref.languageLocale,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText;
var onZoomIn = function onZoomIn() {
if (zoomPercentage < 300) {
onChangeZoomPercentage(zoomPercentage + 10);
}
};
var onZoomOut = function onZoomOut() {
if (zoomPercentage > 20) {
onChangeZoomPercentage(zoomPercentage - 10);
}
};
return /*#__PURE__*/React.createElement(BottomToolbarWrapper, {
selectedTab: selectedTab
}, selectedTab && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UndoRedoControls, {
onUndo: onUndo,
onRedo: onRedo,
disableUndo: disableUndo,
disableRedo: disableRedo,
languageLocale: languageLocale
}), selectedElement ? /*#__PURE__*/React.createElement(BottomToolBarControls, {
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
selectedElement: selectedElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
languageLocale: languageLocale
}) : /*#__PURE__*/React.createElement("div", {
style: {
height: 63
}
})), /*#__PURE__*/React.createElement(ZoomControls, {
zoomLevel: zoomPercentage,
onZoomIn: onZoomIn,
onZoomOut: onZoomOut,
languageLocale: languageLocale,
onSave: onSave,
showSaveButton: showSaveButton,
saveButtonText: saveButtonText
}));
};
BottomToolBar.propTypes = propTypes$j;
var propTypes$e = {
id: PropTypes.string,
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onDragMove: PropTypes.func
};
var CanvasImage = function CanvasImage(_ref) {
var _element$tintStrength;
var id = _ref.id,
element = _ref.element,
_onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
_onTransformEnd = _ref.onTransformEnd,
onDragMove = _ref.onDragMove,
setLoading = _ref.setLoading;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
loaded = _useState2[0],
setLoaded = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
imgEl = _useState4[0],
setImgEl = _useState4[1];
var imageNodeRef = useRef(null);
var tintStrength = Number((_element$tintStrength = element === null || element === void 0 ? void 0 : element.tintStrength) !== null && _element$tintStrength !== void 0 ? _element$tintStrength : 0);
var hasTint = tintStrength > 0;
var _useMemo = useMemo(function () {
var hex = typeof (element === null || element === void 0 ? void 0 : element.tintColor) === 'string' ? element.tintColor.trim() : '#000000';
var safeHex = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex) ? hex : '#000000';
var normalized = safeHex.length === 4 ? "#".concat(safeHex[1]).concat(safeHex[1]).concat(safeHex[2]).concat(safeHex[2]).concat(safeHex[3]).concat(safeHex[3]) : safeHex;
var r = parseInt(normalized.slice(1, 3), 16);
var g = parseInt(normalized.slice(3, 5), 16);
var b = parseInt(normalized.slice(5, 7), 16);
var lerp = function lerp(start, end, t) {
return start + (end - start) * Math.min(Math.max(t, 0), 1);
};
// At 0: keep original grayscale; at 1: fully tint to the picked color.
return {
red: Math.round(lerp(255, r, tintStrength)),
green: Math.round(lerp(255, g, tintStrength)),
blue: Math.round(lerp(255, b, tintStrength))
};
}, [element === null || element === void 0 ? void 0 : element.tintColor, tintStrength]),
red = _useMemo.red,
green = _useMemo.green,
blue = _useMemo.blue;
useEffect(function () {
var cancelled = false;
var objectUrl;
function load() {
return _load.apply(this, arguments);
}
function _load() {
_load = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var res, blob, img, _t;
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
_context.p = 0;
setLoading(true);
// Force a network fetch with CORS, ignoring any stale cached copy
_context.n = 1;
return fetch(element === null || element === void 0 ? void 0 : element.src, {
mode: 'cors',
cache: 'reload'
});
case 1:
res = _context.v;
if (res.ok) {
_context.n = 2;
break;
}
throw new Error("HTTP ".concat(res.status));
case 2:
_context.n = 3;
return res.blob();
case 3:
blob = _context.v;
objectUrl = URL.createObjectURL(blob);
img = new window.Image(); // No need to set crossOrigin for blob URLs (they're same-origin to your page)
img.onload = function () {
if (!cancelled) {
setImgEl(img);
setLoaded(true);
}
URL.revokeObjectURL(objectUrl);
};
img.src = objectUrl;
_context.n = 5;
break;
case 4:
_context.p = 4;
_t = _context.v;
console.error('Failed to load image for canvas:', _t);
case 5:
_context.p = 5;
setLoading(false);
return _context.f(5);
case 6:
return _context.a(2);
}
}, _callee, null, [[0, 4, 5, 6]]);
}));
return _load.apply(this, arguments);
}
setLoaded(false);
setImgEl(null);
if (element !== null && element !== void 0 && element.src) load();
return function () {
cancelled = true;
if (objectUrl) URL.revokeObjectURL(objectUrl);
};
}, [element === null || element === void 0 ? void 0 : element.src]);
useEffect(function () {
if (!(imageNodeRef !== null && imageNodeRef !== void 0 && imageNodeRef.current)) return;
if (hasTint) {
var _imageNodeRef$current;
imageNodeRef.current.cache();
(_imageNodeRef$current = imageNodeRef.current.getLayer()) === null || _imageNodeRef$current === void 0 || _imageNodeRef$current.batchDraw();
} else {
var _imageNodeRef$current2;
imageNodeRef.current.clearCache();
(_imageNodeRef$current2 = imageNodeRef.current.getLayer()) === null || _imageNodeRef$current2 === void 0 || _imageNodeRef$current2.batchDraw();
}
}, [hasTint, red, green, blue]);
if (!loaded || !imgEl) return null;
return /*#__PURE__*/React.createElement(Image$1, _extends({
ref: imageNodeRef,
id: id,
image: imgEl
}, element, {
width: element === null || element === void 0 ? void 0 : element.width,
height: element === null || element === void 0 ? void 0 : element.height,
filters: hasTint ? [Konva.Filters.Grayscale, Konva.Filters.RGB] : undefined,
red: hasTint ? red : undefined,
green: hasTint ? green : undefined,
blue: hasTint ? blue : undefined,
onClick: function onClick() {
return _onClick && _onClick();
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onDragMove: onDragMove,
onTransformEnd: function onTransformEnd(e) {
return _onTransformEnd && _onTransformEnd(e);
},
strokeScaleEnabled: false
}));
};
CanvasImage.propTypes = propTypes$e;
var propTypes$d = {
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onDragMove: PropTypes.func,
LogoTitle: PropTypes.string
};
var QrElement = function QrElement(_ref) {
var element = _ref.element,
_onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
_onTransformEnd = _ref.onTransformEnd,
onDragMove = _ref.onDragMove,
LogoTitle = _ref.LogoTitle;
var innerRectWidth = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.width, 24);
var innerRectHeight = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.height, 24);
var innerRectX = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.width, 38);
var innerRectY = calculatePercentageValue(element === null || element === void 0 ? void 0 : element.height, 38);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
loaded = _useState2[0],
setLoaded = _useState2[1];
var _useState3 = useState(null),
_useState4 = _slicedToArray(_useState3, 2),
logo = _useState4[0],
setLogo = _useState4[1];
var _useState5 = useState(null),
_useState6 = _slicedToArray(_useState5, 2),
image = _useState6[0],
setImage = _useState6[1];
useEffect(function () {
if (!(element !== null && element !== void 0 && element.qrLogo)) {
return;
}
var img = new window.Image();
img.crossOrigin = 'anonymous';
img.src = element === null || element === void 0 ? void 0 : element.qrLogo;
img.onload = function () {
var scaleX = innerRectWidth / img.width;
var scaleY = innerRectHeight / img.height;
var scale = Math.min(scaleX, scaleY);
setLogo({
img: img,
scale: scale
});
};
}, [element]);
var addQR = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
try {
QRCode.toDataURL(element === null || element === void 0 ? void 0 : element.qrText, {
margin: 0,
width: 110
}, function (err, url) {
var img = new window.Image();
img.crossOrigin = 'anonymous';
img.src = url;
img.onload = function () {
var scaleX = (element === null || element === void 0 ? void 0 : element.width) / img.width;
var scaleY = element.height / img.height;
var scale = Math.min(scaleX, scaleY);
setImage({
img: img,
scale: scale
});
setLoaded(true);
};
});
} catch (err) {
console.error('Failed to generate QR code', err);
}
case 1:
return _context.a(2);
}
}, _callee);
}));
return function addQR() {
return _ref2.apply(this, arguments);
};
}();
useEffect(function () {
var cancelled = false;
var objectUrl;
function loadLogo() {
return _loadLogo.apply(this, arguments);
}
function _loadLogo() {
_loadLogo = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var res, blob, img, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
if (element !== null && element !== void 0 && element.qrLogo) {
_context2.n = 1;
break;
}
return _context2.a(2);
case 1:
_context2.p = 1;
_context2.n = 2;
return fetch(element.qrLogo, {
mode: 'cors',
cache: 'reload'
});
case 2:
res = _context2.v;
if (res.ok) {
_context2.n = 3;
break;
}
throw new Error("HTTP ".concat(res.status));
case 3:
_context2.n = 4;
return res.blob();
case 4:
blob = _context2.v;
objectUrl = URL.createObjectURL(blob);
img = new window.Image();
img.onload = function () {
if (cancelled) return;
var scaleX = innerRectWidth / img.width;
var scaleY = innerRectHeight / img.height;
var scale = Math.min(scaleX, scaleY);
setLogo({
img: img,
scale: scale
});
};
img.src = objectUrl;
_context2.n = 6;
break;
case 5:
_context2.p = 5;
_t = _context2.v;
console.error('Failed to load QR logo:', _t);
case 6:
return _context2.a(2);
}
}, _callee2, null, [[1, 5]]);
}));
return _loadLogo.apply(this, arguments);
}
setLogo(null);
loadLogo();
return function () {
cancelled = true;
if (objectUrl) URL.revokeObjectURL(objectUrl);
};
}, [element === null || element === void 0 ? void 0 : element.qrLogo, innerRectWidth, innerRectHeight]);
useEffect(function () {
addQR();
}, [element]);
if (loaded) {
return /*#__PURE__*/React.createElement(Group, _extends({
key: element.id
}, element, {
id: element.id,
onClick: function onClick() {
return _onClick && _onClick();
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onDragMove: onDragMove,
onTransformEnd: function onTransformEnd(e) {
_onTransformEnd && _onTransformEnd(e);
}
}), /*#__PURE__*/React.createElement(Rect, {
width: element === null || element === void 0 ? void 0 : element.width,
height: element === null || element === void 0 ? void 0 : element.height,
fillPatternImage: image === null || image === void 0 ? void 0 : image.img,
fillPatternRepeat: "no-repeat",
fillPatternScale: {
x: (element === null || element === void 0 ? void 0 : element.width) / (image === null || image === void 0 ? void 0 : image.img.width),
y: (element === null || element === void 0 ? void 0 : element.height) / (image === null || image === void 0 ? void 0 : image.img.height)
},
stroke: element === null || element === void 0 ? void 0 : element.stroke,
strokeWidth: element === null || element === void 0 ? void 0 : element.strokeWidth,
opacity: element === null || element === void 0 ? void 0 : element.opacity,
strokeScaleEnabled: false
}), (element === null || element === void 0 ? void 0 : element.logoVisible) && /*#__PURE__*/React.createElement(Group, {
x: innerRectX,
y: innerRectY
}, /*#__PURE__*/React.createElement(Rect, {
width: innerRectWidth,
height: innerRectHeight,
fill: theme.color.white
}), logo ? /*#__PURE__*/React.createElement(Rect, {
width: innerRectWidth,
height: innerRectHeight,
fillPatternImage: logo === null || logo === void 0 ? void 0 : logo.img,
fillPatternRepeat: "no-repeat",
fillPatternScale: {
x: innerRectHeight / (logo === null || logo === void 0 ? void 0 : logo.img.width),
y: innerRectHeight / (logo === null || logo === void 0 ? void 0 : logo.img.height)
}
}) : /*#__PURE__*/React.createElement(Text, {
text: LogoTitle,
fontSize: 8,
fill: theme.color.gray_9DA1A7,
x: 3,
y: innerRectHeight / 2 - 3,
fontFamily: theme.fonts.primary,
fontStyle: theme.fontWeights[600]
})));
} else {
return null;
}
};
QrElement.propTypes = propTypes$d;
var propTypes$c = {
element: PropTypes.object,
onClick: PropTypes.func,
onDragEnd: PropTypes.func,
onTransformEnd: PropTypes.func,
onTransform: PropTypes.func,
onChangeTextContent: PropTypes.func,
onChangeTextProperty: PropTypes.func,
onDragMove: PropTypes.func
};
var TextEditor = function TextEditor(_ref) {
var textNodeRef = _ref.textNodeRef,
value = _ref.value,
onBlur = _ref.onBlur,
_onChange = _ref.onChange,
textWidth = _ref.textWidth;
var textareaRef = useRef(null);
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
styles = _useState2[0],
setStyles = _useState2[1];
useEffect(function () {
var _textNodeRef$attrs, _stg$attrs, _stg$attrs2, _textNodeRef$fontStyl, _textNodeRef$fontVari, _textNodeRef$textDeco;
if (!textNodeRef) return;
// const position = textNodeRef?.absolutePosition();
// const scale = textNodeRef?.getAbsoluteScale();
var stg = textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.getStage().findOne("#".concat(textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$attrs = textNodeRef.attrs) === null || _textNodeRef$attrs === void 0 ? void 0 : _textNodeRef$attrs.id));
var styleObj = {
position: 'absolute',
top: "".concat(stg === null || stg === void 0 || (_stg$attrs = stg.attrs) === null || _stg$attrs === void 0 ? void 0 : _stg$attrs.y, "px"),
left: "".concat(stg === null || stg === void 0 || (_stg$attrs2 = stg.attrs) === null || _stg$attrs2 === void 0 ? void 0 : _stg$attrs2.x, "px"),
width: "".concat(textWidth, "px"),
height: "".concat(textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.getHeight(), "px"),
fontSize: "".concat(textNodeRef.fontSize(), "px"),
fontFamily: textNodeRef.fontFamily(),
lineHeight: textNodeRef.lineHeight(),
color: textNodeRef.fill(),
background: 'transparent',
border: 'none',
padding: '0px',
margin: '0px',
overflow: 'hidden',
outline: 'none',
resize: 'none',
transformOrigin: 'left top',
textAlign: textNodeRef.align(),
transform: "rotateZ(".concat(textNodeRef.rotation(), "deg)"),
minHeight: '1em',
whiteSpace: 'normal',
userSelect: 'text',
fontStyle: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$fontStyl = textNodeRef.fontStyle) === null || _textNodeRef$fontStyl === void 0 ? void 0 : _textNodeRef$fontStyl.call(textNodeRef)) || 'normal',
fontWeight: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$fontVari = textNodeRef.fontVariant) === null || _textNodeRef$fontVari === void 0 ? void 0 : _textNodeRef$fontVari.call(textNodeRef)) || 400,
textDecoration: (textNodeRef === null || textNodeRef === void 0 || (_textNodeRef$textDeco = textNodeRef.textDecoration) === null || _textNodeRef$textDeco === void 0 ? void 0 : _textNodeRef$textDeco.call(textNodeRef)) || 'none'
};
setStyles(styleObj);
}, [textNodeRef === null || textNodeRef === void 0 ? void 0 : textNodeRef.current, value, element]);
useEffect(function () {
setTimeout(function () {
if (textareaRef !== null && textareaRef !== void 0 && textareaRef.current) {
var _textareaRef$current, _textareaRef$current2;
textareaRef === null || textareaRef === void 0 || (_textareaRef$current = textareaRef.current) === null || _textareaRef$current === void 0 || _textareaRef$current.focus();
textareaRef === null || textareaRef === void 0 || (_textareaRef$current2 = textareaRef.current) === null || _textareaRef$current2 === void 0 || _textareaRef$current2.select();
}
}, 200);
}, []);
return /*#__PURE__*/React.createElement(Html, null, /*#__PURE__*/React.createElement("textarea", {
ref: textareaRef,
style: styles,
value: value,
onChange: function onChange(e) {
_onChange(e.target.value);
},
onBlur: onBlur
}));
};
TextEditor.propTypes = propTypes$c;
var EditableText = function EditableText(_ref) {
var element = _ref.element,
trRef = _ref.trRef,
onClick = _ref.onClick,
_onDragEnd = _ref.onDragEnd,
onTransformEnd = _ref.onTransformEnd,
id = _ref.id,
onTransform = _ref.onTransform,
onChangeTextContent = _ref.onChangeTextContent,
onDragMove = _ref.onDragMove;
var textRef = useRef();
var _useState = useState(element === null || element === void 0 ? void 0 : element.width),
_useState2 = _slicedToArray(_useState, 2),
textWidth = _useState2[0],
setTextWidth = _useState2[1];
var _useState3 = useState(element === null || element === void 0 ? void 0 : element.fontSize),
_useState4 = _slicedToArray(_useState3, 2),
textFontSize = _useState4[0],
setTextFontSize = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isEditing = _useState6[0],
setIsEditing = _useState6[1];
var _useState7 = useState(element === null || element === void 0 ? void 0 : element.text),
_useState8 = _slicedToArray(_useState7, 2),
text = _useState8[0],
setText = _useState8[1];
var _useState9 = useState(false),
_useState0 = _slicedToArray(_useState9, 2),
isFontLoaded = _useState0[0],
setIsFontLoaded = _useState0[1];
useEffect(function () {
setIsFontLoaded(false);
setTimeout(function () {
setIsFontLoaded(true);
}, 150);
}, [element === null || element === void 0 ? void 0 : element.fontFamily, element === null || element === void 0 ? void 0 : element.fontWeight, element === null || element === void 0 ? void 0 : element.fontStyle]);
useEffect(function () {
setTextWidth(element === null || element === void 0 ? void 0 : element.width);
setText(element === null || element === void 0 ? void 0 : element.text);
setTextFontSize(element === null || element === void 0 ? void 0 : element.fontSize);
}, [element]);
var tranform = function tranform(e) {
var transformer = trRef.current;
var activeAnchor = transformer.getActiveAnchor();
if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
var node = e.target;
var scaleX = sanitizeNumber(node.scaleX(), 1);
var updatedWidth = sanitizeNumber(node.width() * scaleX, element.width);
var updatedObject = _objectSpread2(_objectSpread2({}, node.attrs), {}, {
width: updatedWidth,
scaleX: 1,
scaleY: 1
});
delete updatedObject['ref'];
setTextWidth(updatedWidth);
onTransform && onTransform(updatedObject);
node.scaleX(1);
node.scaleY(1);
}
};
var handleTransformEnd = function handleTransformEnd(e) {
var transformer = trRef.current;
var activeAnchor = transformer.getActiveAnchor();
if (activeAnchor === 'middle-right' || activeAnchor === 'middle-left') {
onTransformEnd && onTransformEnd(e);
return;
}
var node = textRef.current;
var nodeAttrs = node.attrs;
var scaleX = sanitizeNumber(node.scaleX(), 1);
var newFontSize = nodeAttrs.fontSize * scaleX;
var updatedWidth = sanitizeNumber(node.width() * scaleX, nodeAttrs.width);
node.scaleX(1);
node.scaleY(1);
var updatedObject = _objectSpread2(_objectSpread2({}, nodeAttrs), {}, {
width: updatedWidth,
fontSize: newFontSize
});
setTextFontSize(newFontSize);
setTextWidth(updatedWidth);
delete updatedObject['ref'];
onTransform && onTransform(updatedObject);
onTransformEnd && onTransformEnd(e);
};
var handleTextDblClick = function handleTextDblClick() {
setIsEditing(true);
};
var handleTextChange = function handleTextChange(newText) {
setText(newText);
onChangeTextContent(newText);
};
var onSelect = function onSelect() {
var _textRef$current;
// const node = textRef?.current?.target;
var width = textRef === null || textRef === void 0 || (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.getWidth();
if (width) {
setTextWidth(width);
// onChangeTextProperty('width', width);
}
// const scaleX = sanitizeNumber(node?.scaleX(), 1);
// const updatedWidth = sanitizeNumber(node?.width() * scaleX, element?.width);
// console.error(textRef?.current?.getWidth());
onClick && onClick();
};
if (!isFontLoaded) {
return /*#__PURE__*/React.createElement(Text, _extends({
ref: textRef,
key: id
}, element, {
id: element.id,
fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
align: element === null || element === void 0 ? void 0 : element.textAlign,
width: textWidth,
fontSize: textFontSize,
text: text,
fill: element === null || element === void 0 ? void 0 : element.color,
opacity: 0,
visible: false
}));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, _extends({
ref: textRef,
key: id
}, element, {
id: element.id,
fontVariant: element === null || element === void 0 ? void 0 : element.fontWeight,
align: element === null || element === void 0 ? void 0 : element.textAlign,
width: textWidth,
fontSize: textFontSize,
text: text,
fill: element === null || element === void 0 ? void 0 : element.color,
onClick: function onClick() {
return onSelect();
},
onTransform: function onTransform(e) {
return tranform(e);
},
onDragEnd: function onDragEnd(e) {
return _onDragEnd && _onDragEnd(e);
},
onTransformEnd: function onTransformEnd(e) {
handleTransformEnd(e);
},
onDragMove: onDragMove,
onDblClick: handleTextDblClick,
onDblTap: handleTextDblClick,
visible: !isEditing
})), isEditing && /*#__PURE__*/React.createElement(TextEditor, {
value: text,
textWidth: textWidth,
textNodeRef: textRef === null || textRef === void 0 ? void 0 : textRef.current,
onChange: handleTextChange,
onBlur: function onBlur() {
setIsEditing(false);
// onChangeTextContent(text);
}
}));
};
EditableText.propTypes = propTypes$c;
var useKonvaSnapping = function useKonvaSnapping(params) {
var _params$snapRange, _params$guidelineColo, _params$guidelineDash, _params$showGuideline, _params$guidelineThic, _params$snapToStageCe, _params$snapToStageBo, _params$snapToShapes;
var defaultParams = {
snapRange: (_params$snapRange = params.snapRange) !== null && _params$snapRange !== void 0 ? _params$snapRange : 3,
guidelineColor: (_params$guidelineColo = params.guidelineColor) !== null && _params$guidelineColo !== void 0 ? _params$guidelineColo : 'rgb(0, 161, 255)',
guidelineDash: (_params$guidelineDash = params.guidelineDash) !== null && _params$guidelineDash !== void 0 ? _params$guidelineDash : true,
showGuidelines: (_params$showGuideline = params.showGuidelines) !== null && _params$showGuideline !== void 0 ? _params$showGuideline : true,
guidelineThickness: (_params$guidelineThic = params.guidelineThickness) !== null && _params$guidelineThic !== void 0 ? _params$guidelineThic : 1,
snapToStageCenter: (_params$snapToStageCe = params.snapToStageCenter) !== null && _params$snapToStageCe !== void 0 ? _params$snapToStageCe : true,
snapToStageBorders: (_params$snapToStageBo = params.snapToStageBorders) !== null && _params$snapToStageBo !== void 0 ? _params$snapToStageBo : true,
snapToShapes: (_params$snapToShapes = params.snapToShapes) !== null && _params$snapToShapes !== void 0 ? _params$snapToShapes : true
};
var oppositeAnchors = {
'top-left': 'bottom-right',
'top-right': 'bottom-left',
'bottom-right': 'top-left',
'bottom-left': 'top-right'
};
var getSnappingPoints = function getSnappingPoints(e) {
var snapToStageCenter = defaultParams.snapToStageCenter,
snapToStageBorders = defaultParams.snapToStageBorders,
snapToShapes = defaultParams.snapToShapes;
var stage = e.currentTarget.getStage();
var vertical = [];
var horizontal = [];
if (snapToStageCenter) {
vertical.push(stage.attrs.width / 2);
horizontal.push(stage.attrs.height / 2);
}
if (snapToStageBorders) {
horizontal.push(0, stage.attrs.height);
vertical.push(0, stage.attrs.width);
}
if (snapToShapes) {
var _stage$children;
stage === null || stage === void 0 || (_stage$children = stage.children) === null || _stage$children === void 0 || _stage$children.forEach(function (layer) {
var _layer$children;
layer === null || layer === void 0 || (_layer$children = layer.children) === null || _layer$children === void 0 || _layer$children.forEach(function (layerChild) {
var _layerChild$children;
layerChild === null || layerChild === void 0 || (_layerChild$children = layerChild.children) === null || _layerChild$children === void 0 || _layerChild$children.forEach(function (obj) {
var box = obj.getClientRect();
if (e.target !== obj && obj.getName() !== 'guid-line' && !(obj instanceof Konva.Transformer)) {
vertical.push(box.x, box.x + box.width, box.x + box.width / 2);
horizontal.push(box.y, box.y + box.height, box.y + box.height / 2);
}
});
});
});
}
return {
vertical: vertical,
horizontal: horizontal
};
};
var createLine = function createLine(Layer, isHorizontal, lineX, lineY) {
var guidelineColor = defaultParams.guidelineColor,
showGuidelines = defaultParams.showGuidelines,
guidelineThickness = defaultParams.guidelineThickness,
guidelineDash = defaultParams.guidelineDash;
if (!showGuidelines) return;
var points = isHorizontal ? [-6e3, 0, 6000, 0] : [0, -6e3, 0, 6000];
var line = new Konva.Line({
points: points,
stroke: guidelineColor,
strokeWidth: guidelineThickness,
name: 'guid-line',
dash: guidelineDash ? [4, 6] : [0, 0]
});
Layer.add(line);
line.absolutePosition({
x: lineX,
y: lineY
});
};
function dotProduct(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function vectorProject(a, b) {
var dotAB = dotProduct(a, b);
var dotBB = dotProduct(b, b);
var scalar = dotAB / dotBB;
return {
x: scalar * b.x,
y: scalar * b.y
};
}
function calculateSlope(point1, point2) {
var deltaX = point2.x - point1.x;
if (deltaX === 0) {
throw new Error("Slope is undefined for vertical lines (deltaX is zero). ".concat(point2.x, ", ").concat(point1.x));
}
var deltaY = point2.y - point1.y;
return deltaY / deltaX;
}
var handleDragging = function handleDragging(e) {
var Layer = e.target.parent;
// Clear existing guidelines
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var _getSnappingPoints = getSnappingPoints(e),
horizontal = _getSnappingPoints.horizontal,
vertical = _getSnappingPoints.vertical;
var newPos = {
x: e.target.absolutePosition().x,
y: e.target.absolutePosition().y
};
var guideLinesX = [];
var guideLinesY = [];
var snapRange = defaultParams.snapRange;
// Snap vertically
vertical.forEach(function (breakPoint) {
if (Math.abs(e.target.getClientRect().x - breakPoint) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x;
guideLinesX.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().x - breakPoint + e.target.getClientRect().width / 2) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x - e.target.getClientRect().width / 2;
guideLinesX.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().x - breakPoint + e.target.getClientRect().width) <= snapRange) {
newPos.x = breakPoint + e.target.absolutePosition().x - e.target.getClientRect().x - e.target.getClientRect().width;
guideLinesX.push(breakPoint);
}
});
e.target.absolutePosition(newPos);
guideLinesX.forEach(function (line) {
if (Math.round(e.target.getClientRect().x - line) === 0 || Math.round(e.target.getClientRect().x - line + e.target.getClientRect().width / 2) === 0 || Math.round(e.target.getClientRect().x - line + e.target.getClientRect().width) === 0) {
createLine(Layer, false, line, 0);
}
});
// Snap horizontally
horizontal.forEach(function (breakPoint) {
if (Math.abs(e.target.getClientRect().y - breakPoint) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y;
guideLinesY.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().y - breakPoint + e.target.getClientRect().height) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y - e.target.getClientRect().height;
guideLinesY.push(breakPoint);
}
if (Math.abs(e.target.getClientRect().y - breakPoint + e.target.getClientRect().height / 2) <= snapRange) {
newPos.y = breakPoint + e.target.absolutePosition().y - e.target.getClientRect().y - e.target.getClientRect().height / 2;
guideLinesY.push(breakPoint);
}
});
e.target.absolutePosition(newPos);
guideLinesY.forEach(function (line) {
if (Math.round(e.target.getClientRect().y - line) === 0 || Math.round(e.target.getClientRect().y - line + e.target.getClientRect().height) === 0 || Math.round(e.target.getClientRect().y - line + e.target.getClientRect().height / 2) === 0) {
createLine(Layer, true, 0, line);
}
});
};
var handleResizing = function handleResizing(e) {
var Layer = e.target.parent;
var snapRange = defaultParams.snapRange;
var _getSnappingPoints2 = getSnappingPoints(e),
horizontal = _getSnappingPoints2.horizontal,
vertical = _getSnappingPoints2.vertical;
if (!e.currentTarget.keepRatio() || e.currentTarget.keepRatio() && !!!oppositeAnchors[e.currentTarget._movingAnchorName]) {
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newAbsPos) {
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var bounds = {
x: newAbsPos.x,
y: newAbsPos.y
};
//console.log(Konva.Util.haveIntersection(e.target.getClientRect(),breakPoint))
if (e.currentTarget.getActiveAnchor() === 'rotater') return bounds;
var _iterator = _createForOfIteratorHelper(vertical),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var breakPoint = _step.value;
if (Math.abs(newAbsPos.x - breakPoint) <= snapRange && Math.abs(oldAbsPos.x - breakPoint) <= snapRange + 1) {
bounds.x = breakPoint;
createLine(Layer, false, breakPoint, 0);
break;
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
var _iterator2 = _createForOfIteratorHelper(horizontal),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var _breakPoint = _step2.value;
if (Math.abs(newAbsPos.y - _breakPoint) <= snapRange && Math.abs(oldAbsPos.y - _breakPoint) <= snapRange + 1) {
bounds.y = _breakPoint;
createLine(Layer, true, 0, _breakPoint);
break;
}
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return bounds;
});
} else {
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newPos) {
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
var currentAnchorName = e.currentTarget._movingAnchorName;
var oppositeAnchorName = oppositeAnchors[currentAnchorName];
var movingAnchor = e.currentTarget.findOne(".".concat(currentAnchorName));
// Capture the anchor's starting absolute position:
var anchorStartPosition = movingAnchor.getAbsolutePosition();
// Do nothing for the rotater anchor.
if (currentAnchorName === 'rotater') {
return newPos;
}
var oppositeElement = e.currentTarget.findOne(".".concat(oppositeAnchorName));
if (!oppositeElement) return newPos;
var oppositePoint = oppositeElement.getAbsolutePosition();
var slope = calculateSlope(anchorStartPosition, oppositePoint);
// Calculate the vector from the starting anchor position to the opposite anchor.
var transformVector = {
x: anchorStartPosition.x - oppositePoint.x,
y: anchorStartPosition.y - oppositePoint.y
};
// Compute the movement delta from the starting position.
var delta = {
x: newPos.x - anchorStartPosition.x,
y: newPos.y - anchorStartPosition.y
};
// Project the delta onto the transform vector.
var projectedDelta = vectorProject(delta, transformVector);
// Compute the candidate new position (before snapping).
var nextPos = {
x: anchorStartPosition.x + projectedDelta.x,
y: anchorStartPosition.y + projectedDelta.y
};
var _iterator3 = _createForOfIteratorHelper(horizontal),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var breakPoint = _step3.value;
if (Math.abs(nextPos.y - breakPoint) <= snapRange) {
nextPos.y = breakPoint;
nextPos.x = anchorStartPosition.x + (breakPoint - anchorStartPosition.y) / slope;
createLine(Layer, true, 0, breakPoint);
break;
}
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
var _iterator4 = _createForOfIteratorHelper(vertical),
_step4;
try {
for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
var _breakPoint2 = _step4.value;
if (Math.abs(nextPos.x - _breakPoint2) <= snapRange) {
nextPos.x = _breakPoint2;
nextPos.y = anchorStartPosition.y + slope * (_breakPoint2 - anchorStartPosition.x);
createLine(Layer, false, _breakPoint2, 0);
break;
}
}
} catch (err) {
_iterator4.e(err);
} finally {
_iterator4.f();
}
return nextPos;
});
}
};
var handleResizeEnd = function handleResizeEnd(e) {
var Layer = e.target.parent;
e.currentTarget.anchorDragBoundFunc(function (oldAbsPos, newPos) {
return newPos;
});
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
};
var handleDragEnd = function handleDragEnd(e) {
var Layer = e.target.parent;
Layer.find('.guid-line').forEach(function (line) {
return line.destroy();
});
};
return {
handleDragging: handleDragging,
handleResizing: handleResizing,
handleResizeEnd: handleResizeEnd,
handleDragEnd: handleDragEnd
};
};
var Editor = function Editor(_ref) {
var _TEXT_DICTIONARY$lang;
var setLoading = _ref.setLoading,
selectedTab = _ref.selectedTab,
languageLocale = _ref.languageLocale,
_ref$title = _ref.title,
title = _ref$title === void 0 ? TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TITLE : _ref$title,
zoomPercentage = _ref.zoomPercentage,
onChangeZoomPercentage = _ref.onChangeZoomPercentage,
editorHeight = _ref.editorHeight,
editorWidth = _ref.editorWidth,
onSetBackgroundColor = _ref.onSetBackgroundColor,
elements = _ref.elements,
history = _ref.history,
redoStack = _ref.redoStack,
onSetBackgroundImage = _ref.onSetBackgroundImage,
onUndo = _ref.onUndo,
onRedo = _ref.onRedo,
shapeStrokeColor = _ref.shapeStrokeColor,
shapeStrokeWidth = _ref.shapeStrokeWidth,
shapeFillColor = _ref.shapeFillColor,
onChangeShapeStrokeColor = _ref.onChangeShapeStrokeColor,
onChangeShapeStrokeWidth = _ref.onChangeShapeStrokeWidth,
onChangeShapeFill = _ref.onChangeShapeFill,
shapeOpacity = _ref.shapeOpacity,
onChangeShapeOpacity = _ref.onChangeShapeOpacity,
selectedElement = _ref.selectedElement,
onSelectElement = _ref.onSelectElement,
stageRef = _ref.stageRef,
saveHistory = _ref.saveHistory,
onChangeBackgroundImageOpacity = _ref.onChangeBackgroundImageOpacity,
backgroundImageOpacity = _ref.backgroundImageOpacity,
onDeleteSelectedElement = _ref.onDeleteSelectedElement,
onCopySelectedElement = _ref.onCopySelectedElement,
onToggleLockElement = _ref.onToggleLockElement,
bringSelectedElementToFront = _ref.bringSelectedElementToFront,
sendSelectedElementToBack = _ref.sendSelectedElementToBack,
imageStrokeWidth = _ref.imageStrokeWidth,
imageStrokeColor = _ref.imageStrokeColor,
imageOpacity = _ref.imageOpacity,
onChangeImageStrokeWidth = _ref.onChangeImageStrokeWidth,
onChangeImageStrokeColor = _ref.onChangeImageStrokeColor,
onChangeImageOpacity = _ref.onChangeImageOpacity,
imageTintColor = _ref.imageTintColor,
imageTintStrength = _ref.imageTintStrength,
onChangeImageTintColor = _ref.onChangeImageTintColor,
onChangeImageTintStrength = _ref.onChangeImageTintStrength,
onClearImageTint = _ref.onClearImageTint,
qrStrokeWidth = _ref.qrStrokeWidth,
qrStrokeColor = _ref.qrStrokeColor,
qrOpacity = _ref.qrOpacity,
onChangeQrStrokeWidth = _ref.onChangeQrStrokeWidth,
onChangeQrStrokeColor = _ref.onChangeQrStrokeColor,
onChangeQrOpacity = _ref.onChangeQrOpacity,
defaultTextProps = _ref.defaultTextProps,
onChangeTextProperty = _ref.onChangeTextProperty,
onSetPageSize = _ref.onSetPageSize,
selectedPageSize = _ref.selectedPageSize,
selectedPageSizeLabel = _ref.selectedPageSizeLabel,
loadingImages = _ref.loadingImages,
loadingFonts = _ref.loadingFonts,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
cuttingGuideStroke = _ref.cuttingGuideStroke,
cuttingGuideStrokeColor = _ref.cuttingGuideStrokeColor,
onChangeCuttingGuideProp = _ref.onChangeCuttingGuideProp,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
onSetSelectedTab = _ref.onSetSelectedTab,
saveButtonText = _ref.saveButtonText,
onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
changeSelectedElementProperty = _ref.changeSelectedElementProperty,
_ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
_ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 80 : _ref$outsideBoundaryP;
var transformerRef = useRef(null);
var previewPadding = useMemo(function () {
return showOutsideBoundaryPreview ? Math.max(0, Number(outsideBoundaryPreviewPadding) || 0) : 0;
}, [showOutsideBoundaryPreview, outsideBoundaryPreviewPadding]);
var stageWidth = useMemo(function () {
return editorWidth + previewPadding * 2;
}, [editorWidth, previewPadding]);
var stageHeight = useMemo(function () {
return editorHeight + previewPadding * 2;
}, [editorHeight, previewPadding]);
var pageOffsetX = previewPadding;
var pageOffsetY = previewPadding;
useEffect(function () {
if (transformerRef !== null && transformerRef !== void 0 && transformerRef.current) {
var _stageRef$current;
var selectedNode = stageRef === null || stageRef === void 0 || (_stageRef$current = stageRef.current) === null || _stageRef$current === void 0 ? void 0 : _stageRef$current.findOne("#".concat(selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id));
if (selectedNode) {
transformerRef === null || transformerRef === void 0 || transformerRef.current.nodes([selectedNode]);
transformerRef === null || transformerRef === void 0 || transformerRef.current.getLayer().batchDraw();
} else {
transformerRef === null || transformerRef === void 0 || transformerRef.current.nodes([]);
}
}
}, [selectedElement]);
var _useKonvaSnapping = useKonvaSnapping({
guidelineColor: 'blue',
guidelineDash: true,
snapToStageCenter: true,
snapRange: 5,
guidelineThickness: 1,
showGuidelines: true,
snapToShapes: true,
snapToStageBorders: true
}),
handleDragging = _useKonvaSnapping.handleDragging,
handleDragEnd = _useKonvaSnapping.handleDragEnd,
handleResizing = _useKonvaSnapping.handleResizing,
handleResizeEnd = _useKonvaSnapping.handleResizeEnd;
// console.error({ selectedElement });
var canvasBackgroundColor = useMemo(function () {
var backgroundColor;
var backgroundIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor);
});
if (backgroundIndex > -1) {
var _elements$backgroundI;
backgroundColor = elements === null || elements === void 0 || (_elements$backgroundI = elements[backgroundIndex]) === null || _elements$backgroundI === void 0 ? void 0 : _elements$backgroundI.color;
}
return backgroundColor;
}, [elements]);
var canvasBackgroundImage = useMemo(function () {
var backgroundImage;
var backgroundImageIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
backgroundImage = elements === null || elements === void 0 ? void 0 : elements[backgroundImageIndex];
}
return backgroundImage;
}, [elements]);
var handleTransform = function handleTransform(id, newAttrs) {
var newAttributes = _objectSpread2({}, newAttrs);
delete newAttributes['ref'];
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === id ? _objectSpread2(_objectSpread2({}, el), newAttributes) : el;
});
saveHistory(updatedElements);
onSelectElement(_objectSpread2({}, newAttributes));
};
var handleSelect = function handleSelect(elem) {
onSelectElement(elem);
};
var debouncedTransform = debounce(function (id, attrs) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === id ? _objectSpread2(_objectSpread2({}, el), attrs) : el;
});
saveHistory(updatedElements);
onSelectElement(_objectSpread2({}, attrs));
}, 100);
var debouncedChangeText = debounce(function (e) {
onChangeTextProperty('text', e);
}, 300);
var handleTextTransform = function handleTextTransform(id, attrs) {
debouncedTransform(id, attrs);
};
var onChangeTextContent = function onChangeTextContent(e) {
debouncedChangeText(e);
};
var renderElements = useCallback(function (el) {
var _TEXT_DICTIONARY$lang2;
switch (el.type) {
case elementTypes.circle:
return /*#__PURE__*/React.createElement(Circle, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.square:
return /*#__PURE__*/React.createElement(Rect, _extends({
key: el.id
}, el, {
id: el.id,
cornerRadius: el.cornerRadius || 0,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.arrowRight:
return /*#__PURE__*/React.createElement(Arrow, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.triangle:
return /*#__PURE__*/React.createElement(RegularPolygon, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.heart:
return /*#__PURE__*/React.createElement(Path, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.star:
return /*#__PURE__*/React.createElement(Star, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.horizontalLine:
return /*#__PURE__*/React.createElement(Line, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.verticalLine:
return /*#__PURE__*/React.createElement(Line, _extends({
key: el.id
}, el, {
id: el.id,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
strokeScaleEnabled: false
}));
case elementTypes.image:
return /*#__PURE__*/React.createElement(CanvasImage, {
key: el.id,
id: el.id,
element: _objectSpread2({}, el),
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
setLoading: setLoading
});
case elementTypes.qr:
return /*#__PURE__*/React.createElement(QrElement, {
key: el.id,
element: el,
onClick: function onClick() {
return handleSelect(el);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onTransformEnd: function onTransformEnd(e) {
handleTransform(el.id, e.target.attrs);
},
onDragMove: handleDragging,
languageLocale: languageLocale,
LogoTitle: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.LOGO
});
case elementTypes.text:
return /*#__PURE__*/React.createElement(EditableText, {
trRef: transformerRef,
key: el.id,
id: el.id,
element: el,
onClick: function onClick() {
return handleSelect(el);
},
onTransform: function onTransform(e) {
return handleTextTransform(el.id, e);
},
onDragEnd: function onDragEnd(e) {
handleTransform(el.id, e.target.attrs);
handleDragEnd(e);
},
onDragMove: handleDragging,
onChangeTextContent: onChangeTextContent
});
default:
return null;
}
}, [elements, selectedElement, languageLocale]);
return /*#__PURE__*/React.createElement(Container$4, {
selectedTab: selectedTab
}, selectedTab && selectedTab !== (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) && /*#__PURE__*/React.createElement(TopToolBar, {
selectedTab: selectedTab,
onSetBackgroundColor: onSetBackgroundColor,
elements: elements,
canvasBackgroundColor: canvasBackgroundColor,
onSetBackgroundImage: onSetBackgroundImage,
canvasBackgroundImage: canvasBackgroundImage,
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
selectedElement: selectedElement,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: backgroundImageOpacity,
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
imageTintColor: imageTintColor,
imageTintStrength: imageTintStrength,
onChangeImageTintColor: onChangeImageTintColor,
onChangeImageTintStrength: onChangeImageTintStrength,
onClearImageTint: onClearImageTint,
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
defaultTextProps: defaultTextProps,
onChangeTextProperty: onChangeTextProperty,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
selectedPageSizeLabel: selectedPageSizeLabel,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
cuttingGuideStroke: cuttingGuideStroke,
cuttingGuideStrokeColor: cuttingGuideStrokeColor,
onChangeCuttingGuideProp: onChangeCuttingGuideProp,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker,
changeSelectedElementProperty: changeSelectedElementProperty
}), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
editorHeight: stageHeight + 50,
editorWidth: stageWidth
}, title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(EditorBox, {
editorHeight: stageHeight,
editorWidth: stageWidth
}, !loadingImages && !loadingFonts && /*#__PURE__*/React.createElement(Stage, {
width: stageWidth,
height: stageHeight,
ref: stageRef,
onMouseDown: function onMouseDown(e) {
if (e.target === e.target.getStage()) {
onSelectElement(null);
onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
}
}
}, /*#__PURE__*/React.createElement(Layer, {
onClick: function onClick() {
onSelectElement(null);
onSetSelectedTab === null || onSetSelectedTab === void 0 || onSetSelectedTab(sideBarpillsList.template);
},
listening: false
}, /*#__PURE__*/React.createElement(Rect, {
x: pageOffsetX,
y: pageOffsetY,
width: editorWidth,
height: editorHeight,
fill: canvasBackgroundColor || theme.color.white
}), canvasBackgroundImage && /*#__PURE__*/React.createElement(CanvasImage, {
element: _objectSpread2(_objectSpread2({}, canvasBackgroundImage), {}, {
x: pageOffsetX,
y: pageOffsetY,
width: editorWidth,
height: editorHeight
})
})), /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(Group, {
x: pageOffsetX,
y: pageOffsetY,
scaleX: zoomPercentage / 100,
scaleY: zoomPercentage / 100
}, elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return renderElements(el);
}), selectedElement && /*#__PURE__*/React.createElement(Transformer, {
ref: transformerRef,
onTransform: handleResizing,
onTransformEnd: handleResizeEnd,
enabledAnchors: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text) ? ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right'] : ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'middle-left', 'middle-right', 'top-center', 'bottom-center'] : [],
borderStroke: theme.color.primary,
borderStrokeWidth: 2
// add anchors
,
anchorFill: theme.color.white,
anchorStroke: theme.color.primary,
anchorStrokeWidth: 2,
anchorSize: 8,
rotateEnabled: selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable ? true : false
// make all anchors look like circles
// anchorCornerRadius={50}
,
boundBoxFunc: function boundBoxFunc(oldBox, newBox) {
// limit resize
if (!(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable) ||
// Handle element flliping
newBox.width < 1 || newBox.height < 1) {
return oldBox;
}
return newBox;
}
}))), showOutsideBoundaryPreview && previewPadding > 0 ? /*#__PURE__*/React.createElement(Layer, {
listening: false
}, /*#__PURE__*/React.createElement(Rect, {
listening: false,
x: 0,
y: 0,
width: stageWidth,
height: pageOffsetY,
fill: "rgba(0, 0, 0, 0.14)"
}), /*#__PURE__*/React.createElement(Rect, {
listening: false,
x: 0,
y: pageOffsetY,
width: pageOffsetX,
height: editorHeight,
fill: "rgba(0, 0, 0, 0.14)"
}), /*#__PURE__*/React.createElement(Rect, {
listening: false,
x: pageOffsetX + editorWidth,
y: pageOffsetY,
width: stageWidth - (pageOffsetX + editorWidth),
height: editorHeight,
fill: "rgba(0, 0, 0, 0.14)"
}), /*#__PURE__*/React.createElement(Rect, {
listening: false,
x: 0,
y: pageOffsetY + editorHeight,
width: stageWidth,
height: stageHeight - (pageOffsetY + editorHeight),
fill: "rgba(0, 0, 0, 0.14)"
})) : null, /*#__PURE__*/React.createElement(Layer, {
listening: false
}, /*#__PURE__*/React.createElement(Rect, {
listening: false,
x: pageOffsetX,
y: pageOffsetY,
width: editorWidth,
height: editorHeight,
stroke: cuttingGuideStrokeColor,
strokeWidth: cuttingGuideStroke,
strokeScaleEnabled: false,
fill: 'transparent',
dash: [10, 5] // [dash length, gap length]
})))))), /*#__PURE__*/React.createElement(BottomToolBar, {
disableUndo: history.length === 0,
disableRedo: redoStack.length === 0,
selectedTab: selectedTab,
zoomPercentage: zoomPercentage,
onChangeZoomPercentage: onChangeZoomPercentage,
onUndo: onUndo,
onRedo: onRedo,
selectedElement: selectedElement,
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
languageLocale: languageLocale,
onSave: onSave,
showSaveButton: showSaveButton,
saveButtonText: saveButtonText
}));
};
Editor.propTypes = propTypes$w;
var propTypes$b = {
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
helperSideBarVisible: PropTypes.bool,
onCollapse: PropTypes.func,
onAddShape: PropTypes.func,
defaultImagesList: PropTypes.array,
customImagesList: PropTypes.array,
onAddCustomImageToList: PropTypes.func,
onAddImageToCanvas: PropTypes.func,
toggleQr: PropTypes.func,
qrPresent: PropTypes.bool,
toggleQrLogo: PropTypes.func,
addQrLogo: PropTypes.func,
elements: PropTypes.array,
qrLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
onAddTextToCanvas: PropTypes.func,
oncreateNewTemplate: PropTypes.func,
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array,
templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst']),
askDeleteConfirmation: PropTypes.bool,
styleProps: PropTypes.object
};
var propTypes$a = {
onCollapse: PropTypes.func,
selectedSideBarItem: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
languageLocale: PropTypes.string
};
var _templateObject$a, _templateObject2$8;
var Container$2 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n height: 55px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-left: 17px;\n background: ", ";\n border-bottom: 1px solid ", ";\n"])), theme.color.gray_FBFBFB, theme.color.gray_EDEDED);
var IconWrapper$1 = styled.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n height: 100%;\n padding: 0px 17px;\n display: flex;\n align-items: center;\n cursor: pointer;\n"])));
var SideBarHeader = function SideBarHeader(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7;
var _ref$onCollapse = _ref.onCollapse,
onCollapse = _ref$onCollapse === void 0 ? function () {} : _ref$onCollapse,
selectedSideBarItem = _ref.selectedSideBarItem,
languageLocale = _ref.languageLocale;
var sideBarpillsText = {
Template: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.TEMPLATE,
Text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.TEXT,
Image: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.IMAGE,
Shape: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.SHAPE,
QR: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.QR_CODE,
'White-label': TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.BRANDING
};
return /*#__PURE__*/React.createElement(Container$2, null, /*#__PURE__*/React.createElement(StyledText, {
fontWeight: theme.fontWeights[600],
color: theme.color.gray_545454,
fontSize: 16
}, sideBarpillsText === null || sideBarpillsText === void 0 ? void 0 : sideBarpillsText[selectedSideBarItem]), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.COLLAPSE,
position: "left"
}, /*#__PURE__*/React.createElement(IconWrapper$1, {
onClick: onCollapse
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconChevronLeft
}))));
};
SideBarHeader.propTypes = propTypes$a;
var _templateObject$9, _templateObject2$7;
var SideBarWrapper = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n width: ", "px;\n display: flex;\n flex-direction: column;\n background: ", ";\n border-left: 1px solid ", ";\n transition: width 0.3s ease-in-out;\n overflow: hidden;\n"])), function (_ref) {
var _ref$visible = _ref.visible,
visible = _ref$visible === void 0 ? true : _ref$visible;
return visible ? helperSideBarWidth : 0;
}, theme.color.gray_FBFBFB, theme.color.gray_F5F6F6);
var SideBarContainer = styled.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n flex: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n width: ", "px;\n"])), helperSideBarWidth);
var propTypes$9 = {
oncreateNewTemplate: PropTypes.func,
languageLocale: PropTypes.string,
defaultTemplatesList: PropTypes.array,
customTemplatesList: PropTypes.array,
templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst']),
askDeleteConfirmation: PropTypes.bool
};
var propTypes$8 = {
title: PropTypes.string,
left: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
hideIcon: PropTypes.bool,
marginTop: PropTypes.number,
marginBottom: PropTypes.number,
content: PropTypes.node
};
var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$3, _templateObject5$1;
var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-top: ", "px;\n margin-bottom: ", "px;\n"])), function (_ref) {
var marginTop = _ref.marginTop;
return marginTop;
}, function (_ref2) {
var marginBottom = _ref2.marginBottom;
return marginBottom;
});
var CollapsableHeader = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n cursor: pointer;\n justify-content: flex-start;\n align-self: flex-start;\n margin-bottom: 14px;\n"])));
var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n margin-right: 6px;\n display: flex;\n align-items: center;\n"])));
var IconWrapper = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-top: 3px;\n"])));
var CollapsableContent = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n display: ", ";\n"])), function (_ref3) {
var visible = _ref3.visible;
return visible ? 'flex' : 'none';
});
var Collapsable = function Collapsable(_ref) {
var title = _ref.title,
left = _ref.left,
_ref$hideIcon = _ref.hideIcon,
hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
_ref$marginTop = _ref.marginTop,
marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop,
_ref$marginBottom = _ref.marginBottom,
marginBottom = _ref$marginBottom === void 0 ? 30 : _ref$marginBottom,
content = _ref.content;
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var toggleVisibility = useCallback(function () {
if (hideIcon) return;
setVisible(!visible);
}, [visible, setVisible]);
return /*#__PURE__*/React.createElement(CollapsableContainer, {
marginTop: marginTop,
marginBottom: marginBottom
}, /*#__PURE__*/React.createElement(CollapsableHeader, {
onClick: toggleVisibility
}, left && /*#__PURE__*/React.createElement(LeftIconWrapper, null, left), /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6
}, title), !hideIcon && /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement(StyledImage, {
src: IconCheveronDown
}))), /*#__PURE__*/React.createElement(CollapsableContent, {
visible: visible
}, content));
};
Collapsable.propTypes = propTypes$8;
var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$2, _templateObject5, _templateObject6, _templateObject7;
var TemplatesContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 10px;\n align-items: flex-start;\n"])));
var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n position: relative;\n gap: 6px;\n overflow: hidden;\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.2);\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: 1;\n pointer-events: none;\n }\n\n &:hover::before {\n opacity: 1;\n }\n"])));
var StyledDeleteButton = styled.button(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 24px;\n width: 24px;\n padding: 0;\n border-radius: 6px;\n background: #fff;\n border: 1px solid #e7e7e7;\n flex-shrink: 0;\n z-index: 3;\n cursor: pointer;\n position: absolute;\n top: 6px;\n right: 6px;\n opacity: 0;\n pointer-events: none;\n transform: translateY(-4px);\n transition:\n border-color 0.2s ease,\n background-color 0.2s ease,\n opacity 0.2s ease,\n transform 0.2s ease;\n\n ", ":hover &,\n ", ":focus-within & {\n opacity: 1;\n pointer-events: auto;\n transform: translateY(0);\n }\n\n img {\n height: 14px;\n }\n\n &:hover {\n border-color: #d91919;\n background: #fff5f5;\n }\n\n &:focus {\n outline: 2px solid #d91919;\n outline-offset: 1px;\n }\n"])), TemplateItem, TemplateItem);
var TemplateFooter = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n width: 115px;\n display: flex;\n align-items: center;\n gap: 6px;\n"])));
var TemplateTitle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: #a1a1a1;\n font-size: 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n min-width: 0;\n line-height: 1.2;\n padding-bottom: 2px;\n"])));
var TemplatePreview = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n width: 115px;\n height: 125px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n overflow: hidden;\n\n img {\n border-radius: 6px;\n }\n"])));
var StyledContainer$5 = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var propTypes$7 = {
text: PropTypes.string,
onToggle: PropTypes.func,
isActive: PropTypes.bool,
disabled: PropTypes.bool
};
var _templateObject$6, _templateObject2$4, _templateObject3$4, _templateObject4$1;
var ToggleContainer = styled.div(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n width: 44px;\n height: 24px;\n background-color: ", ";\n border-radius: 25px;\n display: flex;\n align-items: center;\n padding: 2px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n position: relative;\n"])), function (_ref) {
var isActive = _ref.isActive;
return isActive ? theme.color.green_80D965 : theme.color.gray_E8E8E8;
});
var ToggleCircle = styled.div(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n width: 20px;\n height: 20px;\n background-color: white;\n border-radius: 50%;\n position: absolute;\n left: ", ";\n transition:\n left 0.3s ease,\n box-shadow 0.3s ease;\n box-shadow: ", ";\n"])), function (_ref2) {
var isActive = _ref2.isActive;
return isActive ? 'calc(100% - 24px)' : '4px';
}, function (_ref3) {
var isActive = _ref3.isActive;
return isActive ? '2px 2px 5px rgba(0, 0, 0, 0.2)' : '-2px 2px 5px rgba(0, 0, 0, 0.2)';
});
var Container$1 = styled.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n padding: 10px 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n"])));
var InfoContainer = styled.div(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n"])));
var RadioSection = function RadioSection(_ref) {
var text = _ref.text,
onToggle = _ref.onToggle,
isActive = _ref.isActive,
disabled = _ref.disabled;
var renderText = function renderText() {
if (/*#__PURE__*/React.isValidElement(text)) {
// If it's JSX, render directly
return text;
}
// Otherwise treat as string
return /*#__PURE__*/React.createElement(StyledText, {
marginLeft: 6,
color: theme.color.black,
fontSize: 12,
fontWeight: theme.fontWeights[500]
}, text);
};
return /*#__PURE__*/React.createElement(Container$1, null, /*#__PURE__*/React.createElement(InfoContainer, null, renderText()), /*#__PURE__*/React.createElement(ToggleContainer, {
isActive: isActive,
onClick: function onClick() {
if (disabled) {
return;
}
onToggle && onToggle();
}
}, /*#__PURE__*/React.createElement(ToggleCircle, {
isActive: isActive
})));
};
RadioSection.propTypes = propTypes$7;
var TemplateSideBar = function TemplateSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8;
var oncreateNewTemplate = _ref.oncreateNewTemplate,
languageLocale = _ref.languageLocale,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
defaultTemplatesList = _ref.defaultTemplatesList,
customTemplatesList = _ref.customTemplatesList,
_ref$templatesDisplay = _ref.templatesDisplayOrder,
templatesDisplayOrder = _ref$templatesDisplay === void 0 ? 'defaultFirst' : _ref$templatesDisplay,
onTemplateSelect = _ref.onTemplateSelect,
isLocationTextActive = _ref.isLocationTextActive,
onToggleLocationText = _ref.onToggleLocationText,
showQrIdToggle = _ref.showQrIdToggle,
isQrIdTextActive = _ref.isQrIdTextActive,
onToggleQrIdText = _ref.onToggleQrIdText,
_ref$askDeleteConfirm = _ref.askDeleteConfirmation,
askDeleteConfirmation = _ref$askDeleteConfirm === void 0 ? true : _ref$askDeleteConfirm;
var renderDefaultContent = useMemo(function () {
return /*#__PURE__*/React.createElement(TemplatesContainer, null, defaultTemplatesList === null || defaultTemplatesList === void 0 ? void 0 : defaultTemplatesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(TemplateItem, {
key: index,
onClick: function onClick() {
oncreateNewTemplate(item === null || item === void 0 ? void 0 : item.elements);
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
}
}
}, /*#__PURE__*/React.createElement(TemplatePreview, null, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.image,
maxHeight: 125,
maxWidth: 115,
borderRadius: 6
})), /*#__PURE__*/React.createElement(TemplateFooter, null, /*#__PURE__*/React.createElement(TemplateTitle, null, item === null || item === void 0 ? void 0 : item.title)));
}));
}, []);
var renderCustomContent = useMemo(function () {
return /*#__PURE__*/React.createElement(TemplatesContainer, null, customTemplatesList === null || customTemplatesList === void 0 ? void 0 : customTemplatesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(TemplateItem, {
key: index,
onClick: function onClick() {
oncreateNewTemplate(item === null || item === void 0 ? void 0 : item.elements);
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
}
}
}, /*#__PURE__*/React.createElement(TemplatePreview, null, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.image,
maxHeight: 125,
maxWidth: 115,
borderRadius: 6
}), /*#__PURE__*/React.createElement(StyledDeleteButton, {
"aria-label": "Delete ".concat((item === null || item === void 0 ? void 0 : item.title) || 'template'),
onClick: function onClick(e) {
e.stopPropagation();
var shouldDelete = !askDeleteConfirmation || window.confirm("Delete \"".concat((item === null || item === void 0 ? void 0 : item.title) || 'this template', "\"?"));
if (shouldDelete) {
onDeleteCustomTemplate === null || onDeleteCustomTemplate === void 0 || onDeleteCustomTemplate(item);
}
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconDelete
}))), /*#__PURE__*/React.createElement(TemplateFooter, null, /*#__PURE__*/React.createElement(TemplateTitle, null, item === null || item === void 0 ? void 0 : item.title)));
}));
}, []);
return /*#__PURE__*/React.createElement(StyledContainer$5, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.NEW_TEMPLATE,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAdd
}),
marginBottom: 20,
onClick: function onClick() {
return oncreateNewTemplate();
}
}), /*#__PURE__*/React.createElement("div", {
style: {
display: 'grid',
gap: 12,
marginBottom: 18
}
}, /*#__PURE__*/React.createElement(RadioSection, {
text: /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
marginRight: '16px'
}
}, /*#__PURE__*/React.createElement(StyledText, null, (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHOW_PROPERTY_LOCATION) || 'Show Property Label'), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.LOCATION_HELPER,
position: "top"
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconInfo
}))),
isActive: !!isLocationTextActive,
onToggle: onToggleLocationText,
disabled: false
}), showQrIdToggle ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioSection, {
text: /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex',
alignItems: 'center',
gap: '8px',
marginRight: '16px'
}
}, /*#__PURE__*/React.createElement(StyledText, null, (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.SHOW_QR_ID) || 'Show QR Id'), /*#__PURE__*/React.createElement(Tooltip, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.QR_ID_HELPER,
position: "top"
}, /*#__PURE__*/React.createElement(StyledImage, {
src: IconInfo
}))),
isActive: !!isQrIdTextActive,
onToggle: onToggleQrIdText,
disabled: false
})) : null), templatesDisplayOrder === 'customFirst' && customTemplatesList.length > 0 ? /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CUSTOM_TEMPLATES,
content: renderCustomContent
}) : null, /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.DEFAULT,
content: renderDefaultContent
}), templatesDisplayOrder !== 'customFirst' && customTemplatesList.length > 0 ? /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang8 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang8 === void 0 ? void 0 : _TEXT_DICTIONARY$lang8.CUSTOM_TEMPLATES,
content: renderCustomContent
}) : null);
};
TemplateSideBar.propTypes = propTypes$9;
var propTypes$6 = {
onAddTextToCanvas: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$5, _templateObject2$3, _templateObject3$3;
var StyledContainer$4 = styled.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var Container = styled.div(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n"])));
var ItemWrapper = styled.div(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n margin-bottom: 18px;\n cursor: pointer;\n transition: background-color 0.1s ease;\n padding: 5px;\n &:hover {\n background-color: ", ";\n }\n"])), theme.color.gray_F0F2F7);
var TextSideBar = function TextSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2;
var onAddTextToCanvas = _ref.onAddTextToCanvas,
languageLocale = _ref.languageLocale,
defaultText = _ref.defaultText;
var renderTextListContent = function renderTextListContent() {
return /*#__PURE__*/React.createElement(Container, null, textList === null || textList === void 0 ? void 0 : textList.map(function (item, index) {
return /*#__PURE__*/React.createElement(ItemWrapper, {
key: index,
onClick: function onClick() {
onAddTextToCanvas(_objectSpread2(_objectSpread2({}, item), {}, {
text: defaultText || (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 ? void 0 : TEXT_DICTIONARY[languageLocale][item.text]) || (item === null || item === void 0 ? void 0 : item.text)
}));
}
}, /*#__PURE__*/React.createElement(StyledText, {
color: item === null || item === void 0 ? void 0 : item.color,
fontFamily: item === null || item === void 0 ? void 0 : item.fontFamily,
fontWeight: item === null || item === void 0 ? void 0 : item.fontWeight,
fontSize: item === null || item === void 0 ? void 0 : item.fontSize
}, defaultText || (TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 ? void 0 : TEXT_DICTIONARY[languageLocale][item.text]) || (item === null || item === void 0 ? void 0 : item.text)));
}));
};
return /*#__PURE__*/React.createElement(StyledContainer$4, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.ADD_TEXT,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconAddText
}),
marginBottom: 38,
onClick: function onClick() {
return onAddTextToCanvas(null);
}
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.HELP_TEXT,
content: renderTextListContent()
// left={<StyledImage src={IconInfo} />}
}));
};
TextSideBar.propTypes = propTypes$6;
var propTypes$5 = {
defaultImagesList: PropTypes.array,
customImagesList: PropTypes.array,
onAddCustomImageToList: PropTypes.func,
onAddImageToCanvas: PropTypes.func,
languageLocale: PropTypes.string,
uploadImageCallBack: PropTypes.func,
setLoadingUploadImage: PropTypes.func
};
var _templateObject$4, _templateObject2$2, _templateObject3$2, _templateObject4;
var StyledContainer$3 = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var ImagesContainer = styled.div(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n gap: 20px;\n align-items: flex-start;\n"])));
var SingleItem$1 = styled.div(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n width: ", ";\n"])), function () {
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'calc(50% - 20px)';
return width;
});
var AllowedFormats = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin: 0 0 16px;\n font-size: 12px;\n color: #555555;\n"])));
var ImageSideBar = function ImageSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5;
var defaultImagesList = _ref.defaultImagesList,
customImagesList = _ref.customImagesList,
onAddCustomImageToList = _ref.onAddCustomImageToList,
onAddImageToCanvas = _ref.onAddImageToCanvas,
languageLocale = _ref.languageLocale,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
allowedFormats = _ref.allowedFormats;
var renderDefaultContent = /*#__PURE__*/React.createElement(ImagesContainer, null, (defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
fontSize: 10,
color: theme.color.gray_535354
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PLEASE_ADD_IMAGES), defaultImagesList === null || defaultImagesList === void 0 ? void 0 : defaultImagesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem$1, {
key: index,
width: 'auto',
onClick: function onClick() {
onAddImageToCanvas(item);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item,
maxHeight: 100,
maxWidth: 100
}));
}));
var renderCustomImages = /*#__PURE__*/React.createElement(ImagesContainer, null, (customImagesList === null || customImagesList === void 0 ? void 0 : customImagesList.length) === 0 && /*#__PURE__*/React.createElement(StyledText, {
fontSize: 10,
color: theme.color.gray_535354
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.PLEASE_ADD_IMAGES), customImagesList === null || customImagesList === void 0 ? void 0 : customImagesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem$1, {
key: index,
onClick: function onClick() {
onAddImageToCanvas(item);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item,
maxHeight: 100,
maxWidth: 100
}));
}));
var addImageToList = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var file, imageUrl, reader;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return pickImage(allowedFormats);
case 1:
file = _context.v;
if (file) {
_context.n = 2;
break;
}
return _context.a(2);
case 2:
if (!uploadImageCallBack) {
_context.n = 4;
break;
}
setLoadingUploadImage(true);
_context.n = 3;
return uploadImageCallBack(file);
case 3:
imageUrl = _context.v;
onAddCustomImageToList(imageUrl);
setLoadingUploadImage(false);
_context.n = 5;
break;
case 4:
reader = new FileReader();
reader.onload = function () {
onAddCustomImageToList(reader.result);
};
reader.readAsDataURL(file);
case 5:
return _context.a(2);
}
}, _callee);
}));
return function addImageToList() {
return _ref2.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(StyledContainer$3, null, /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.ADD_IMAGE,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUpload
}),
marginBottom: 8,
onClick: addImageToList
}), allowedFormats && function () {
var formats = (allowedFormats || []).map(function (f) {
return String(f).trim().toLowerCase();
}).filter(Boolean);
var accept = formats.map(function (f) {
return f.startsWith('.') ? f : ".".concat(f);
}).join(', ');
return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
}(), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.DEFAULT,
content: renderDefaultContent
}), /*#__PURE__*/React.createElement(Collapsable, {
title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.CUSTOM_IMAGES,
content: renderCustomImages
}));
};
ImageSideBar.propTypes = propTypes$5;
var propTypes$4 = {
onAddShape: PropTypes.func,
languageLocale: PropTypes.string
};
var _templateObject$3, _templateObject2$1, _templateObject3$1;
var StyledContainer$2 = styled.div(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var ShapesContainer = styled.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n gap: 15px;\n align-items: flex-start;\n"])));
var SingleItem = styled.div(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n cursor: pointer;\n align-items: center;\n justify-content: center;\n width: 71px;\n height: 71px;\n transition: background-color 0.1s ease;\n &:hover {\n background-color: ", ";\n }\n"])), theme.color.gray_F0F2F7);
var ShapeSideBar = function ShapeSideBar(_ref) {
var _TEXT_DICTIONARY$lang;
var onAddShape = _ref.onAddShape,
languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(StyledContainer$2, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 15
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.ADD_SHAPES), /*#__PURE__*/React.createElement(ShapesContainer, null, shapesList.map(function (item, index) {
return /*#__PURE__*/React.createElement(SingleItem, {
key: index,
onClick: function onClick() {
return onAddShape(item === null || item === void 0 ? void 0 : item.shape);
}
}, /*#__PURE__*/React.createElement(StyledImage, {
src: item === null || item === void 0 ? void 0 : item.icon
}));
})));
};
ShapeSideBar.propTypes = propTypes$4;
var propTypes$3 = {
toggleQr: PropTypes.func,
qrPresent: PropTypes.bool,
toggleQrLogo: PropTypes.func,
addQrLogo: PropTypes.func,
elements: PropTypes.array,
qrLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
languageLocale: PropTypes.string
};
var _templateObject$2;
var StyledContainer$1 = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var QrSideBar = function QrSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4;
var toggleQr = _ref.toggleQr,
qrPresent = _ref.qrPresent,
toggleQrLogo = _ref.toggleQrLogo,
addQrLogo = _ref.addQrLogo,
elements = _ref.elements,
qrLogo = _ref.qrLogo,
languageLocale = _ref.languageLocale,
allowedFormats = _ref.allowedFormats;
var logoVisible = useMemo(function () {
var _elements$index;
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if (index < 0) {
return false;
}
return elements === null || elements === void 0 || (_elements$index = elements[index]) === null || _elements$index === void 0 ? void 0 : _elements$index.logoVisible;
}, [elements]);
return /*#__PURE__*/React.createElement(StyledContainer$1, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 17
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.SETTINGS), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHOW_QR_CODE,
isActive: qrPresent,
onToggle: toggleQr
}), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.SHOW_LOGO_IN_QR,
isActive: qrPresent && logoVisible,
onToggle: toggleQrLogo,
disabled: !qrPresent
}), /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.ADD_LOGO,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconUpload
}),
marginBottom: 8,
marginTop: 24,
onClick: addQrLogo
}), allowedFormats && function () {
var formats = (allowedFormats || []).map(function (f) {
return String(f).trim().toLowerCase();
}).filter(Boolean);
var accept = formats.map(function (f) {
return f.startsWith('.') ? f : ".".concat(f);
}).join(', ');
return /*#__PURE__*/React.createElement(AllowedFormats, null, accept);
}(), qrLogo && /*#__PURE__*/React.createElement(StyledImage, {
src: qrLogo,
height: 89,
width: 89
}));
};
QrSideBar.propTypes = propTypes$3;
var propTypes$2 = {
translation: PropTypes.object
};
var _templateObject$1;
var StyledContainer = styled.div(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 20px 18px;\n overflow: auto;\n"])));
var WhiteLabelSideBar = function WhiteLabelSideBar(_ref) {
var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4;
var languageLocale = _ref.languageLocale;
return /*#__PURE__*/React.createElement(StyledContainer, null, /*#__PURE__*/React.createElement(StyledText, {
color: theme.color.gray_646464,
fontWeight: theme.fontWeights[500],
marginRight: 6,
marginBottom: 17
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang === void 0 ? void 0 : _TEXT_DICTIONARY$lang.PREMIUM_SETTINGS), /*#__PURE__*/React.createElement(RadioSection, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.SHOW_BRANDING
}), /*#__PURE__*/React.createElement(StyledText, {
fontSize: 12,
color: theme.color.gray_333,
marginTop: 16,
marginBottom: 30,
lineHeight: '20px'
}, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.UNLOCK_PREMIUM_FEATURE_PARAGRAPH), /*#__PURE__*/React.createElement(Button, {
text: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.UPGRADE_PLAN,
left: /*#__PURE__*/React.createElement(StyledImage, {
src: IconGraph
}),
varient: ButtonVarients.primary
}));
};
WhiteLabelSideBar.propTypes = propTypes$2;
var HelperSideBar = function HelperSideBar(_ref) {
var selectedSideBarItem = _ref.selectedSideBarItem,
helperSideBarVisible = _ref.helperSideBarVisible,
_ref$onCollapse = _ref.onCollapse,
onCollapse = _ref$onCollapse === void 0 ? function () {} : _ref$onCollapse,
onAddShape = _ref.onAddShape,
defaultImagesList = _ref.defaultImagesList,
customImagesList = _ref.customImagesList,
onAddCustomImageToList = _ref.onAddCustomImageToList,
onAddImageToCanvas = _ref.onAddImageToCanvas,
toggleQr = _ref.toggleQr,
qrPresent = _ref.qrPresent,
toggleQrLogo = _ref.toggleQrLogo,
addQrLogo = _ref.addQrLogo,
elements = _ref.elements,
qrLogo = _ref.qrLogo,
onAddTextToCanvas = _ref.onAddTextToCanvas,
oncreateNewTemplate = _ref.oncreateNewTemplate,
uploadImageCallBack = _ref.uploadImageCallBack,
setLoadingUploadImage = _ref.setLoadingUploadImage,
defaultTemplatesList = _ref.defaultTemplatesList,
customTemplatesList = _ref.customTemplatesList,
templatesDisplayOrder = _ref.templatesDisplayOrder,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
styleProps = _ref.styleProps,
defaultText = _ref.defaultText,
languageLocale = _ref.languageLocale,
onTemplateSelect = _ref.onTemplateSelect,
allowedFormats = _ref.allowedFormats,
isLocationTextActive = _ref.isLocationTextActive,
onToggleLocationText = _ref.onToggleLocationText,
showQrIdToggle = _ref.showQrIdToggle,
isQrIdTextActive = _ref.isQrIdTextActive,
onToggleQrIdText = _ref.onToggleQrIdText,
askDeleteConfirmation = _ref.askDeleteConfirmation;
return /*#__PURE__*/React.createElement(SideBarWrapper, {
visible: selectedSideBarItem && helperSideBarVisible
}, /*#__PURE__*/React.createElement(SideBarHeader, {
onCollapse: onCollapse,
selectedSideBarItem: selectedSideBarItem,
languageLocale: languageLocale
}), /*#__PURE__*/React.createElement(SideBarContainer, {
visible: selectedSideBarItem && helperSideBarVisible
}, selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.template) ? /*#__PURE__*/React.createElement(TemplateSideBar, {
oncreateNewTemplate: oncreateNewTemplate,
languageLocale: languageLocale,
onDeleteCustomTemplate: onDeleteCustomTemplate,
defaultTemplatesList: defaultTemplatesList,
customTemplatesList: customTemplatesList,
templatesDisplayOrder: templatesDisplayOrder,
onTemplateSelect: onTemplateSelect,
styleProps: styleProps,
isLocationTextActive: isLocationTextActive,
onToggleLocationText: onToggleLocationText,
showQrIdToggle: showQrIdToggle,
isQrIdTextActive: isQrIdTextActive,
onToggleQrIdText: onToggleQrIdText,
askDeleteConfirmation: askDeleteConfirmation
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text) ? /*#__PURE__*/React.createElement(TextSideBar, {
onAddTextToCanvas: onAddTextToCanvas,
languageLocale: languageLocale,
styleProps: styleProps,
defaultText: defaultText
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image) ? /*#__PURE__*/React.createElement(ImageSideBar, {
defaultImagesList: defaultImagesList,
customImagesList: customImagesList,
onAddCustomImageToList: onAddCustomImageToList,
onAddImageToCanvas: onAddImageToCanvas,
languageLocale: languageLocale,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
styleProps: styleProps,
allowedFormats: allowedFormats
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape) ? /*#__PURE__*/React.createElement(ShapeSideBar, {
onAddShape: onAddShape,
languageLocale: languageLocale
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr) ? /*#__PURE__*/React.createElement(QrSideBar, {
toggleQr: toggleQr,
qrPresent: qrPresent,
toggleQrLogo: toggleQrLogo,
addQrLogo: addQrLogo,
elements: elements,
qrLogo: qrLogo,
languageLocale: languageLocale,
styleProps: styleProps,
allowedFormats: allowedFormats
}) : selectedSideBarItem === (sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.whiteLabel) ? /*#__PURE__*/React.createElement(WhiteLabelSideBar, {
languageLocale: languageLocale,
styleProps: styleProps
}) : null));
};
HelperSideBar.propTypes = propTypes$b;
var propTypes$1 = {
children: PropTypes.node,
backgroundColor: PropTypes.string
};
var Overlay = function Overlay(_ref) {
var children = _ref.children,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? theme.color.black_transparent : _ref$backgroundColor;
return /*#__PURE__*/React.createElement("div", {
style: {
height: '100%',
width: '100%',
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
background: backgroundColor,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 99999
}
}, children);
};
Overlay.propTypes = propTypes$1;
var propTypes = {
size: PropTypes.string,
color: PropTypes.string,
borderWidth: PropTypes.string
};
var _templateObject, _templateObject2, _templateObject3;
var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n to {\n transform: rotate(360deg);\n }\n"])));
var SpinnerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
var Spinner = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n border: ", " solid\n ", ";\n border-top-color: ", ";\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"])), function (props) {
return props.size || '40px';
}, function (props) {
return props.size || '40px';
}, function (props) {
return props.borderWidth || '4px';
}, function (props) {
return props.color + '33' || 'rgba(0, 123, 255, 0.2)';
}, function (props) {
return props.color || '#007bff';
}, spin);
var LoadingSpinner = function LoadingSpinner(_ref) {
var _ref$size = _ref.size,
size = _ref$size === void 0 ? '40px' : _ref$size,
_ref$color = _ref.color,
color = _ref$color === void 0 ? '#007bff' : _ref$color,
_ref$borderWidth = _ref.borderWidth,
borderWidth = _ref$borderWidth === void 0 ? '4px' : _ref$borderWidth;
return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
size: size,
color: color,
borderWidth: borderWidth
}));
};
LoadingSpinner.propTypes = propTypes;
function memoize(fn) {
var cache = Object.create(null);
return function (arg) {
if (cache[arg] === undefined) cache[arg] = fn(arg);
return cache[arg];
};
}
// eslint-disable-next-line no-undef
var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
var isPropValid = /* #__PURE__ */memoize(function (prop) {
return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111
/* o */
&& prop.charCodeAt(1) === 110
/* n */
&& prop.charCodeAt(2) < 91;
}
/* Z+1 */
);
/**
* @typedef {Object} StudioProps
* @property {string} [title]
* @property {string} [defaultQrLogo]
* @property {string} [languageLocale]
* @property {Array} [elementsList]
* @property {Array} [customImages]
* @property {Array} [defaultImages]
* @property {boolean} [disableWhiteLabel]
* @property {Array} [defaultTemplatesList]
* @property {Array} [customTemplatesList]
* @property {'defaultFirst'|'customFirst'} [templatesDisplayOrder]
* @property {boolean} [showOutsideBoundaryPreview]
* @property {number} [outsideBoundaryPreviewPadding]
* @property {string} [qrLink]
* @property {Object} [styleProps]
* @property {string} [defaultText]
* @property {Function} onSave
* @property {string} [saveButtonText]
* @property {'en'|'ru'|'pl'|'de'|'es'|'fr'|'it'} [locale]
* @property {Function} [onCreateNewTemplate] - called when user creates a new template, passes new canvas elements
* @property {Function} [onTemplateSelect] - called when a template is selected, passes template id
* @property {Function} [uploadQRLogoImage]
* - Optional callback to upload the QR logo image. Should return a string or an object with `{ url }`
* @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
* @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
* @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
* @property {Array} [allowedFormats] - Allowed formats for image uploading functions
* @property {boolean} showQrIdToggle (boolean, default false) → controls visibility of the QR ID toggle
* @property {string | number} qrId (string | number | null, default null) → the value to render when toggled on
* @property {boolean} [askDeleteConfirmation]
* @property {{ mode: 'preset' | 'custom', preset?: string, widthMm?: number, heightMm?: number }} [canvasSize]
* @property {Function} [onCanvasSizeChange]
*/
/**
* @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
*/
var Studio = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _elements$elements$fi, _elements$find, _elements$find2, _elements$find3;
var _ref$title = _ref.title,
title = _ref$title === void 0 ? '' : _ref$title,
_ref$defaultQrLogo = _ref.defaultQrLogo,
defaultQrLogo = _ref$defaultQrLogo === void 0 ? null : _ref$defaultQrLogo,
_ref$elementsList = _ref.elementsList,
elementsList = _ref$elementsList === void 0 ? defaultElements : _ref$elementsList,
uploadImageCallBack = _ref.uploadImageCallBack,
customImages = _ref.customImages,
_ref$defaultImages = _ref.defaultImages,
defaultImages = _ref$defaultImages === void 0 ? defaultSideBarImagesList : _ref$defaultImages,
disableWhiteLabel = _ref.disableWhiteLabel,
_ref$defaultTemplates = _ref.defaultTemplatesList,
defaultTemplatesList = _ref$defaultTemplates === void 0 ? [] : _ref$defaultTemplates,
_ref$customTemplatesL = _ref.customTemplatesList,
customTemplatesList = _ref$customTemplatesL === void 0 ? [] : _ref$customTemplatesL,
_ref$templatesDisplay = _ref.templatesDisplayOrder,
templatesDisplayOrder = _ref$templatesDisplay === void 0 ? 'defaultFirst' : _ref$templatesDisplay,
_ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
_ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 80 : _ref$outsideBoundaryP,
onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
_ref$qrLink = _ref.qrLink,
qrLink = _ref$qrLink === void 0 ? 'www.google.com' : _ref$qrLink,
_ref$styleProps = _ref.styleProps,
styleProps = _ref$styleProps === void 0 ? {} : _ref$styleProps,
defaultText = _ref.defaultText,
onSave = _ref.onSave,
showSaveButton = _ref.showSaveButton,
saveButtonText = _ref.saveButtonText,
_ref$locale = _ref.locale,
locale = _ref$locale === void 0 ? 'en' : _ref$locale,
onCreateNewTemplate = _ref.onCreateNewTemplate,
onTemplateSelect = _ref.onTemplateSelect,
showBackgroundImagePicker = _ref.showBackgroundImagePicker,
showOpacityPicker = _ref.showOpacityPicker,
uploadQRLogoImage = _ref.uploadQRLogoImage,
zoomLevel = _ref.zoomLevel,
_ref$allowedFormats = _ref.allowedFormats,
allowedFormats = _ref$allowedFormats === void 0 ? ['png', 'jpg', 'jpeg', 'svg', 'webp'] : _ref$allowedFormats,
_ref$showQrIdToggle = _ref.showQrIdToggle,
showQrIdToggle = _ref$showQrIdToggle === void 0 ? false : _ref$showQrIdToggle,
_ref$qrId = _ref.qrId,
qrId = _ref$qrId === void 0 ? null : _ref$qrId,
_ref$askDeleteConfirm = _ref.askDeleteConfirmation,
askDeleteConfirmation = _ref$askDeleteConfirm === void 0 ? true : _ref$askDeleteConfirm,
canvasSize = _ref.canvasSize,
onCanvasSizeChange = _ref.onCanvasSizeChange;
var stageRef = useRef(null);
var elementCacheRef = useRef({});
var qrIdActiveRef = useRef(false);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
copiedElement = _useState2[0],
setCopiedElement = _useState2[1];
var _useState3 = useState(sideBarpillsList.template),
_useState4 = _slicedToArray(_useState3, 2),
selectedTab = _useState4[0],
setSelectedTab = _useState4[1];
var _useState5 = useState(validateLocale(locale)),
_useState6 = _slicedToArray(_useState5, 2),
languageLocale = _useState6[0],
setLanguageLocale = _useState6[1];
var _useState7 = useState(true),
_useState8 = _slicedToArray(_useState7, 2),
loadingFonts = _useState8[0],
setLoadingFonts = _useState8[1];
var _useState9 = useState(true),
_useState0 = _slicedToArray(_useState9, 2),
loadingImages = _useState0[0],
setLoadingImages = _useState0[1];
var _useState1 = useState(false),
_useState10 = _slicedToArray(_useState1, 2),
loading = _useState10[0],
setLoading = _useState10[1];
var _useState11 = useState(false),
_useState12 = _slicedToArray(_useState11, 2),
loadingUploadImage = _useState12[0],
setLoadingUploadImage = _useState12[1];
var _useState13 = useState(true),
_useState14 = _slicedToArray(_useState13, 2),
helperSideBarVisible = _useState14[0],
setHelperSideBarVisible = _useState14[1];
var _useState15 = useState(zoomLevel !== null && zoomLevel !== void 0 ? zoomLevel : 100),
_useState16 = _slicedToArray(_useState15, 2),
zoomPercentage = _useState16[0],
setZoomPercentage = _useState16[1];
var _useState17 = useState(elementsList),
_useState18 = _slicedToArray(_useState17, 2),
elements = _useState18[0],
setElements = _useState18[1];
var elementsRef = useRef(elements);
var _useState19 = useState(1),
_useState20 = _slicedToArray(_useState19, 2),
backgroundImageOpacity = _useState20[0],
setBackgroundImageOpacity = _useState20[1];
var _useState21 = useState([]),
_useState22 = _slicedToArray(_useState21, 2),
history = _useState22[0],
setHistory = _useState22[1];
var _useState23 = useState([]),
_useState24 = _slicedToArray(_useState23, 2),
redoStack = _useState24[0],
setRedoStack = _useState24[1];
var _useState25 = useState(theme.color.white),
_useState26 = _slicedToArray(_useState25, 2),
shapeFillColor = _useState26[0],
setShapeFillColor = _useState26[1];
var _useState27 = useState(1),
_useState28 = _slicedToArray(_useState27, 2),
shapeStrokeWidth = _useState28[0],
setShapeStrokeWidth = _useState28[1];
var _useState29 = useState(theme.color.black),
_useState30 = _slicedToArray(_useState29, 2),
shapeStrokeColor = _useState30[0],
setShapeStrokeColor = _useState30[1];
var _useState31 = useState(1),
_useState32 = _slicedToArray(_useState31, 2),
shapeOpacity = _useState32[0],
setShapeOpacity = _useState32[1];
var _useState33 = useState(0),
_useState34 = _slicedToArray(_useState33, 2),
imageStrokeWidth = _useState34[0],
setImageStrokeWidth = _useState34[1];
var _useState35 = useState(theme.color.black),
_useState36 = _slicedToArray(_useState35, 2),
imageStrokeColor = _useState36[0],
setImageStrokeColor = _useState36[1];
var _useState37 = useState(1),
_useState38 = _slicedToArray(_useState37, 2),
imageOpacity = _useState38[0],
setImageOpacity = _useState38[1];
var _useState39 = useState(theme.color.black),
_useState40 = _slicedToArray(_useState39, 2),
imageTintColor = _useState40[0],
setImageTintColor = _useState40[1];
var _useState41 = useState(0),
_useState42 = _slicedToArray(_useState41, 2),
imageTintStrength = _useState42[0],
setImageTintStrength = _useState42[1];
var _useState43 = useState(2),
_useState44 = _slicedToArray(_useState43, 2),
qrStrokeWidth = _useState44[0],
setQrStrokeWidth = _useState44[1];
var _useState45 = useState(theme.color.black),
_useState46 = _slicedToArray(_useState45, 2),
qrStrokeColor = _useState46[0],
setQrStrokeColor = _useState46[1];
var _useState47 = useState(1),
_useState48 = _slicedToArray(_useState47, 2),
qrOpacity = _useState48[0],
setQrOpacity = _useState48[1];
var _useState49 = useState(null),
_useState50 = _slicedToArray(_useState49, 2),
selectedElement = _useState50[0],
setSelectedElement = _useState50[1];
var _useState51 = useState(customImages || []),
_useState52 = _slicedToArray(_useState51, 2),
customImagesList = _useState52[0],
setCustomImagesList = _useState52[1];
var _useState53 = useState(defaultQrLogo),
_useState54 = _slicedToArray(_useState53, 2),
qrLogo = _useState54[0],
setQrLogo = _useState54[1];
var _useState55 = useState(basicTextProps),
_useState56 = _slicedToArray(_useState55, 2),
defaultTextProps = _useState56[0],
setDefaultTextProps = _useState56[1];
var _useState57 = useState(qrId),
_useState58 = _slicedToArray(_useState57, 2),
currentQrId = _useState58[0],
setCurrentQrId = _useState58[1];
var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
var getPageSizeElement = useCallback(function () {
var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
return base === null || base === void 0 ? void 0 : base.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
});
}, [elements]);
var getNormalizedCanvasSize = useCallback(function () {
var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
var canvasSizeInput = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : canvasSize;
if (canvasSizeInput) {
return normalizeCanvasSize(canvasSizeInput, pageSizes.A4);
}
var pageSizeElem = base === null || base === void 0 ? void 0 : base.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
});
return normalizeCanvasSize(pageSizeElem, pageSizes.A4);
}, [elements, canvasSize]);
var getPageDims = useCallback(function () {
var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
var normalized = getNormalizedCanvasSize(base);
return {
width: normalized.widthPx,
height: normalized.heightPx
};
}, [elements, getNormalizedCanvasSize]);
var findById = useCallback(function (id) {
var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : elements;
return base.find(function (e) {
return e.id === id;
});
}, [elements]);
/**
* Compute the QR-ID frame:
* - If LOCATION_ELEMENT_ID exists: center-align above it
* - Otherwise: center of page
*/
var computeQrIdFrame = useCallback(function () {
var _ref2, _loc$fontSize, _loc$x, _loc$width, _loc$y, _ref3, _loc$color, _loc$fontFamily;
var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
var _getPageDims = getPageDims(base),
Cw = _getPageDims.width,
Ch = _getPageDims.height;
var loc = findById(LOCATION_ELEMENT_ID, base);
var fs = Math.max(14, Math.min(28, (_ref2 = (_loc$fontSize = loc === null || loc === void 0 ? void 0 : loc.fontSize) !== null && _loc$fontSize !== void 0 ? _loc$fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize) !== null && _ref2 !== void 0 ? _ref2 : 16));
var GAP = 8; // vertical gap above location text line
var width = Number.isFinite(loc === null || loc === void 0 ? void 0 : loc.width) ? loc.width : 240;
// center horizontally over location text (or page)
var x = loc ? Math.max(0, ((_loc$x = loc.x) !== null && _loc$x !== void 0 ? _loc$x : 0) + (((_loc$width = loc.width) !== null && _loc$width !== void 0 ? _loc$width : width) - width) / 2) : Math.max(0, (Cw - width) / 2);
// place just above location text line (or vertical center)
var y = loc ? Math.max(0, ((_loc$y = loc.y) !== null && _loc$y !== void 0 ? _loc$y : 0) - fs - GAP) : Math.max(0, (Ch - fs) / 2);
var color = (_ref3 = (_loc$color = loc === null || loc === void 0 ? void 0 : loc.color) !== null && _loc$color !== void 0 ? _loc$color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color) !== null && _ref3 !== void 0 ? _ref3 : '#111';
var fontFamily = (_loc$fontFamily = loc === null || loc === void 0 ? void 0 : loc.fontFamily) !== null && _loc$fontFamily !== void 0 ? _loc$fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily;
return {
x: x,
y: y,
width: width,
textAlign: 'center',
fontSize: fs,
color: color,
fontFamily: fontFamily
};
}, [getPageDims, findById, defaultTextProps]);
var undo = useCallback(function () {
if (history.length > 0) {
setSelectedElement(null);
var previousState = history[history.length - 1];
setRedoStack([elements].concat(_toConsumableArray(redoStack)));
setHistory(history.slice(0, -1));
setElements(previousState);
}
}, [history, elements, redoStack, setRedoStack, setHistory, setElements]);
var redo = useCallback(function () {
if (redoStack.length > 0) {
setSelectedElement(null);
var nextState = redoStack[0];
setHistory([].concat(_toConsumableArray(history), [elements]));
setRedoStack(redoStack.slice(1));
setElements(nextState);
}
}, [history, elements, redoStack, setHistory, setRedoStack, setElements]);
useImperativeHandle(ref, function () {
return {
onSave: function () {
var _onSave = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
var processedElements, dataURL;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
setLoading(true);
setSelectedElement(null);
_context.n = 1;
return new Promise(function (resolve) {
return setTimeout(resolve, 100);
});
case 1:
processedElements = removeImageProperty(elements);
_context.n = 2;
return exportStageAsImage(stageRef, null, 2, exportCropArea);
case 2:
dataURL = _context.v;
setLoading(false);
return _context.a(2, {
elements: processedElements,
image: dataURL
});
}
}, _callee);
}));
function onSave() {
return _onSave.apply(this, arguments);
}
return onSave;
}(),
loading: overallLoading,
setLoading: setLoading,
undoCount: history.length,
hasChanges: history.length > 0,
redoCount: redoStack.length,
updateQrId: function updateQrId(newId) {
setCurrentQrId(newId);
var idx = elements.findIndex(function (e) {
return e.id === QRID_ELEMENT_ID;
});
if (idx > -1) {
var frame = computeQrIdFrame(elements);
var newElements = _toConsumableArray(elements);
newElements[idx] = _objectSpread2(_objectSpread2({}, newElements[idx]), {}, {
text: String(newId)
}, frame);
saveHistory(newElements);
if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === QRID_ELEMENT_ID) setSelectedElement(newElements[idx]);
}
},
reflowQrId: function reflowQrId() {
var idx = elements.findIndex(function (e) {
return e.id === QRID_ELEMENT_ID;
});
if (idx === -1) return;
var frame = computeQrIdFrame(elements);
var copy = _toConsumableArray(elements);
copy[idx] = _objectSpread2(_objectSpread2({}, copy[idx]), frame);
saveHistory(copy);
}
};
});
useEffect(function () {
if (selectedElement && !elements.some(function (e) {
return e.id === selectedElement.id;
})) {
setSelectedElement(null);
}
}, [elements, selectedElement]);
useEffect(function () {
if (typeof zoomLevel === 'number') {
setZoomPercentage(zoomLevel);
}
}, [zoomLevel]);
useEffect(function () {
var handleKeyDown = function handleKeyDown(e) {
var isMac = navigator.platform.toUpperCase().includes('MAC');
var ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
var shiftKey = e.shiftKey;
var activeElement = document.activeElement;
var isTypingTarget = ['INPUT', 'TEXTAREA'].includes(activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.isContentEditable);
var isDeleteKey = e.key === 'Delete' || e.key === 'Del';
var isBackspaceKey = e.key === 'Backspace';
// Delete selected element with Delete (Win) or Backspace (Mac)
if ((isDeleteKey || isBackspaceKey) && selectedElement && !isTypingTarget) {
e.preventDefault();
onDeleteSelectedElement();
}
// Copy
if (ctrlOrCmd && e.key.toLowerCase() === 'c') {
if (selectedElement) {
e.preventDefault();
var copied = _objectSpread2({}, selectedElement);
delete copied.ref;
setCopiedElement(copied);
}
}
// Paste
if (ctrlOrCmd && e.key.toLowerCase() === 'v') {
if (copiedElement) {
e.preventDefault();
var newElement = _objectSpread2(_objectSpread2({}, copiedElement), {}, {
id: "element".concat(Date.now()),
x: copiedElement.x + 10,
y: copiedElement.y + 10,
draggable: true
});
addElement(newElement);
setSelectedElement(newElement);
}
}
// Undo: Ctrl/Cmd + Z
if (ctrlOrCmd && !shiftKey && e.key.toLowerCase() === 'z') {
e.preventDefault();
undo();
}
// Redo: Ctrl/Cmd + Shift + Z or Ctrl + Y
if (ctrlOrCmd && shiftKey && e.key.toLowerCase() === 'z' || ctrlOrCmd && e.key.toLowerCase() === 'y') {
e.preventDefault();
redo();
}
};
window.addEventListener('keydown', handleKeyDown);
return function () {
window.removeEventListener('keydown', handleKeyDown);
};
}, [selectedElement, copiedElement, undo, redo]);
// console.log(isPropValid('onClick'));
useEffect(function () {
setLanguageLocale(validateLocale(locale));
}, [locale]);
useEffect(function () {
setCustomImagesList(customImages || []);
}, [customImages]);
useEffect(function () {
setLoadingFonts(true);
loadAllGoogleFonts().then(function () {
// console.log(msg);
})["catch"](function (err) {
console.error('❌ Error loading fonts:', err);
})["finally"](function () {
setTimeout(function () {
setLoadingFonts(false);
}, 1000);
console.log('🎉 Font loading complete!');
});
}, []);
useEffect(function () {
var incomingPageSizeElem = elementsList === null || elementsList === void 0 ? void 0 : elementsList.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
});
var nextCanvasSize = canvasSize ? normalizeCanvasSize(canvasSize, pageSizes.A4) : normalizeCanvasSize(incomingPageSizeElem, pageSizes.A4);
var nextElements = elementsList.map(function (elem) {
if (elem.type !== elementTypes.pageSize) return elem;
var nextPageSize = _objectSpread2({}, elem);
if (nextCanvasSize.mode === CANVAS_SIZE_MODES.custom) {
delete nextPageSize.size;
nextPageSize.mode = CANVAS_SIZE_MODES.custom;
nextPageSize.widthMm = nextCanvasSize.widthMm;
nextPageSize.heightMm = nextCanvasSize.heightMm;
} else {
delete nextPageSize.mode;
delete nextPageSize.widthMm;
delete nextPageSize.heightMm;
nextPageSize.size = nextCanvasSize.preset;
}
return nextPageSize;
});
if (!nextElements.some(function (elem) {
return elem.type === elementTypes.pageSize;
})) {
var injectedPageSize = {
type: elementTypes.pageSize,
id: "element".concat(Date.now()),
size: nextCanvasSize.preset || pageSizes.A4,
cuttingGuideStroke: 0,
cuttingGuideStrokeColor: theme.color.black
};
if (nextCanvasSize.mode === CANVAS_SIZE_MODES.custom) {
delete injectedPageSize.size;
injectedPageSize.mode = CANVAS_SIZE_MODES.custom;
injectedPageSize.widthMm = nextCanvasSize.widthMm;
injectedPageSize.heightMm = nextCanvasSize.heightMm;
}
nextElements.unshift(injectedPageSize);
}
LoadImages(nextElements);
setElements(nextElements);
var foundLoc = nextElements === null || nextElements === void 0 ? void 0 : nextElements.find(function (e) {
return e.id === LOCATION_ELEMENT_ID && e.type === elementTypes.text;
});
if (foundLoc) {
// store a clean copy (no runtime refs)
var _ref4 = foundLoc || {},
rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
elementCacheRef.current[LOCATION_ELEMENT_ID] = _objectSpread2({}, rest);
}
}, [canvasSize].concat(_toConsumableArray(elementsList)));
var LoadImages = function LoadImages(elems) {
setLoadingImages(true);
preloadRelevantImages(elems).then(function (_ref5) {
var errors = _ref5.errors;
// console.log('✅ Loaded images:', successes);
if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
console.log('❌ Failed images:', errors);
}
})["catch"](function (err) {
console.error('Something went really wrong:', err);
})["finally"](function () {
setLoadingImages(false);
});
};
var editorHeight = useMemo(function () {
var _getPageDims2 = getPageDims(elements),
height = _getPageDims2.height;
return calculatePercentageValue(height, zoomPercentage);
}, [zoomPercentage, elements, getPageDims]);
var editorWidth = useMemo(function () {
var _getPageDims3 = getPageDims(elements),
width = _getPageDims3.width;
return calculatePercentageValue(width, zoomPercentage);
}, [zoomPercentage, elements, getPageDims]);
var normalizedOutsidePreviewPadding = useMemo(function () {
return Math.max(0, Number(outsideBoundaryPreviewPadding) || 0);
}, [outsideBoundaryPreviewPadding]);
var exportCropArea = useMemo(function () {
if (!showOutsideBoundaryPreview) return null;
return {
x: normalizedOutsidePreviewPadding,
y: normalizedOutsidePreviewPadding,
width: editorWidth,
height: editorHeight
};
}, [showOutsideBoundaryPreview, normalizedOutsidePreviewPadding, editorWidth, editorHeight]);
var selectedPageSize = useMemo(function () {
return getNormalizedCanvasSize(elements);
}, [elements, getNormalizedCanvasSize]);
var selectedPageSizeLabel = useMemo(function () {
return getCanvasSizeLabel(selectedPageSize);
}, [selectedPageSize]);
var hasLocationText = useMemo(function () {
return elements.some(function (e) {
return e.type === elementTypes.text && e.id === LOCATION_ELEMENT_ID;
});
}, [elements]);
var hasQrIdText = useMemo(function () {
return elements.some(function (e) {
return e.type === elementTypes.text && e.id === QRID_ELEMENT_ID;
});
}, [elements]);
useEffect(function () {
qrIdActiveRef.current = hasQrIdText; // keep this in sync
}, [hasQrIdText]);
var removeElementById = function removeElementById(id) {
var idx = elements.findIndex(function (e) {
return e.id === id;
});
if (idx > -1) {
var snapshot = _objectSpread2({}, elements[idx]);
delete snapshot.ref;
// cache latest props before removing
if (id !== QRID_ELEMENT_ID) {
elementCacheRef.current[id] = snapshot; // never cache QR-ID
}
var next = elements.slice();
next.splice(idx, 1);
if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === id) setSelectedElement(null);
saveHistory(next);
}
};
var addElementFromCache = function addElementFromCache(id, fallbackFactory) {
var cached = elementCacheRef.current[id];
var toAdd = cached ? _objectSpread2(_objectSpread2({}, cached), {}, {
id: id
}) : fallbackFactory === null || fallbackFactory === void 0 ? void 0 : fallbackFactory(id);
if (!toAdd) return; // nothing to add (no cache + no fallback)
// Make sure required fields are sane
if (!toAdd.type) toAdd.type = elementTypes.text;
if (typeof toAdd.draggable !== 'boolean') toAdd.draggable = true;
saveHistory([].concat(_toConsumableArray(elements), [toAdd]));
setSelectedElement(toAdd);
};
var addQrIdText = function addQrIdText() {
var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
if (!currentQrId || base.some(function (e) {
return e.id === QRID_ELEMENT_ID;
})) return;
var frame = computeQrIdFrame(base);
var textProps = _objectSpread2({
id: QRID_ELEMENT_ID,
type: elementTypes.text,
draggable: true,
text: String(currentQrId),
fontWeight: '700',
// always bold
textAlign: 'center',
opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
}, frame);
var next = [].concat(_toConsumableArray(base), [textProps]);
saveHistory(next);
setSelectedElement(textProps);
};
var toggleLocationText = function toggleLocationText() {
if (hasLocationText) {
removeElementById(LOCATION_ELEMENT_ID);
} else {
// If first-time and no cache, create a sensible fallback
addElementFromCache(LOCATION_ELEMENT_ID, function (id) {
// fallback only used if the element was never seen before
return {
id: id,
type: elementTypes.text,
draggable: true,
// a neutral default; you likely won’t hit this after first toggle
x: 24,
y: 24,
text: 'Property location',
opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity,
fontSize: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize,
fontFamily: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
color: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color,
textDecoration: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
fontStyle: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
fontWeight: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight,
textAlign: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textAlign
};
});
}
};
var toggleQrIdText = function toggleQrIdText() {
hasQrIdText ? removeElementById(QRID_ELEMENT_ID) : addQrIdText();
};
var onSelectedTab = useCallback(function (tab) {
setSelectedElement(null);
setSelectedTab(tab);
setHelperSideBarVisible(true);
}, [setSelectedTab]);
var onCollapseHelperSideBar = useCallback(function () {
setHelperSideBarVisible(false);
}, [setHelperSideBarVisible]);
var onChangeZoomPercentage = function onChangeZoomPercentage(percentage) {
setZoomPercentage(percentage);
};
var saveHistory = function saveHistory(newElements) {
setHistory([].concat(_toConsumableArray(history), [elements]));
setRedoStack([]);
setElements(newElements);
};
var onSetBackgroundColor = function onSetBackgroundColor(color) {
if (!color) {
return;
}
var newElement;
var elemClone = _toConsumableArray(elements);
var backgroundColorIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor);
});
if (backgroundColorIndex > -1) {
elemClone.splice(backgroundColorIndex, 1);
}
newElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundColor,
id: "element".concat(Date.now()),
color: color
};
saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
};
var onSetPageSize = function onSetPageSize(newSize) {
if (!newSize) return;
var oldDims = getNormalizedCanvasSize(elements);
var newDims = normalizeCanvasSize(newSize, pageSizes.A4);
var scaleX = newDims.widthPx / oldDims.widthPx;
var scaleY = newDims.heightPx / oldDims.heightPx;
var pageSizeElem = getPageSizeElement(elements);
var pageSizeId = (pageSizeElem === null || pageSizeElem === void 0 ? void 0 : pageSizeElem.id) || "element".concat(Date.now());
var scaledElements = elements.map(function (elem) {
if (elem.type === elementTypes.pageSize) {
var nextPageElem = _objectSpread2(_objectSpread2({}, elem), {}, {
id: pageSizeId
});
if (newDims.mode === CANVAS_SIZE_MODES.custom) {
delete nextPageElem.size;
nextPageElem.mode = CANVAS_SIZE_MODES.custom;
nextPageElem.widthMm = newDims.widthMm;
nextPageElem.heightMm = newDims.heightMm;
} else {
delete nextPageElem.mode;
delete nextPageElem.widthMm;
delete nextPageElem.heightMm;
nextPageElem.size = newDims.preset;
}
return nextPageElem;
}
var scaled = _objectSpread2({}, elem);
// Scale common position and size props
if (typeof scaled.x === 'number') scaled.x *= scaleX;
if (typeof scaled.y === 'number') scaled.y *= scaleY;
if (typeof scaled.width === 'number') scaled.width *= scaleX;
if (typeof scaled.height === 'number') scaled.height *= scaleY;
if (typeof scaled.radius === 'number') scaled.radius *= Math.min(scaleX, scaleY); // for circles, stars
if (typeof scaled.fontSize === 'number') scaled.fontSize *= Math.min(scaleX, scaleY);
// Special case: QR codes or icons that have scale or size props
if (scaled.points && Array.isArray(scaled.points)) {
scaled.points = scaled.points.map(function (val, idx) {
return idx % 2 === 0 ? val * scaleX : val * scaleY;
});
}
return scaled;
});
if (!scaledElements.some(function (elem) {
return elem.type === elementTypes.pageSize;
})) {
var newPageElement = {
type: elementTypes.pageSize,
id: pageSizeId,
size: newDims.preset || pageSizes.A4,
cuttingGuideStroke: 0,
cuttingGuideStrokeColor: theme.color.black
};
if (newDims.mode === CANVAS_SIZE_MODES.custom) {
delete newPageElement.size;
newPageElement.mode = CANVAS_SIZE_MODES.custom;
newPageElement.widthMm = newDims.widthMm;
newPageElement.heightMm = newDims.heightMm;
}
scaledElements.unshift(newPageElement);
}
saveHistory(removeImageProperty(scaledElements));
if (typeof onCanvasSizeChange === 'function') {
if (newDims.mode === CANVAS_SIZE_MODES.custom) {
onCanvasSizeChange({
mode: CANVAS_SIZE_MODES.custom,
widthMm: newDims.widthMm,
heightMm: newDims.heightMm
});
} else {
onCanvasSizeChange({
mode: CANVAS_SIZE_MODES.preset,
preset: newDims.preset
});
}
}
};
var _onChangeCuttingGuideProp = function onChangeCuttingGuideProp(type, value) {
var elemClone = JSON.parse(JSON.stringify(elements));
var sizeIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
});
if (sizeIndex > -1) {
elemClone[sizeIndex][type] = value;
} else {
var sizeElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize,
id: "element".concat(Date.now())
};
sizeElement[type] = value;
elemClone.push(sizeElement);
}
saveHistory(removeImageProperty(elemClone));
};
var addElement = function addElement(elem) {
saveHistory([].concat(_toConsumableArray(elements), [elem]));
setSelectedElement(elem);
};
var addShape = function addShape(type) {
var shapeProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
fill: shapeFillColor,
stroke: shapeStrokeColor,
strokeWidth: shapeStrokeWidth,
opacity: shapeOpacity,
type: type,
draggable: true
};
if (type === elementTypes.circle) {
shapeProps['radius'] = 70;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.square) {
shapeProps['height'] = 100;
shapeProps['width'] = 100;
shapeProps['name'] = elementTypes.square;
shapeProps['cornerRadius'] = 0;
addElement(shapeProps);
} else if (type === elementTypes.arrowRight) {
shapeProps['points'] = [0, 0, 100, 0];
shapeProps['pointerLength'] = 20;
shapeProps['pointerWidth'] = 20;
shapeProps['strokeWidth'] = 4;
shapeProps['fill'] = shapeStrokeColor;
addElement(shapeProps);
} else if (type === elementTypes.triangle) {
shapeProps['sides'] = 3;
shapeProps['radius'] = 60;
shapeProps['rotation'] = 0;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.heart) {
shapeProps['data'] = "M 50,20 \n C 20,-10 -30,40 50,90 \n C 130,40 80,-10 50,20 Z";
shapeProps['scale'] = {
x: 1,
y: 1
};
addElement(shapeProps);
} else if (type === elementTypes.star) {
shapeProps['numPoints'] = 5;
shapeProps['innerRadius'] = 30;
shapeProps['outerRadius'] = 70;
shapeProps['x'] = editorWidth / 2;
shapeProps['y'] = editorHeight / 2;
addElement(shapeProps);
} else if (type === elementTypes.horizontalLine) {
var centerY = editorHeight / 2;
shapeProps['points'] = [50, centerY, editorWidth - 50, centerY];
shapeProps['x'] = 0;
shapeProps['y'] = 0;
shapeProps['strokeWidth'] = 4;
addElement(shapeProps);
} else if (type === elementTypes.verticalLine) {
var centerX = editorWidth / 2;
shapeProps['points'] = [centerX, 50, centerX, editorHeight - 50];
shapeProps['x'] = 0;
shapeProps['y'] = 0;
shapeProps['strokeWidth'] = 4;
addElement(shapeProps);
}
// console.error(type);
};
var onSetBackgroundImage = function onSetBackgroundImage(img) {
var newElement;
var elemClone = _toConsumableArray(elements);
var backgroundImageIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
elemClone.splice(backgroundImageIndex, 1);
}
newElement = {
type: elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage,
id: "element".concat(Date.now()),
src: img,
opacity: backgroundImageOpacity
};
saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
};
var onRemoveBackgroundImage = function onRemoveBackgroundImage() {
var elemClone = JSON.parse(JSON.stringify(elements));
var backgroundImageIndex = elemClone.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
elemClone.splice(backgroundImageIndex, 1);
saveHistory(elemClone);
}
};
var onChangeBackgroundImageOpacity = function onChangeBackgroundImageOpacity(val) {
var backgroundImageIndex = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
});
if (backgroundImageIndex > -1) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage) ? _objectSpread2(_objectSpread2({}, el), {}, {
opacity: val
}) : el;
});
saveHistory(updatedElements);
}
setBackgroundImageOpacity(val);
};
var onSelectElement = function onSelectElement(element) {
if (isElementShape(element)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.shape);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.image);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.qr);
} else if (isElementOfSameType(element, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text)) {
setSelectedTab(sideBarpillsList === null || sideBarpillsList === void 0 ? void 0 : sideBarpillsList.text);
}
if (element) {
var elem = element;
delete elem['ref'];
setSelectedElement(_objectSpread2({}, elem));
setHelperSideBarVisible(true);
} else {
setSelectedElement(null);
}
};
var changeSelectedElementProperty = function changeSelectedElementProperty(key, value) {
var selectedElementCopy = _objectSpread2({}, selectedElement);
selectedElementCopy[key] = value;
delete selectedElementCopy['ref'];
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.id === (selectedElementCopy === null || selectedElementCopy === void 0 ? void 0 : selectedElementCopy.id) ? _objectSpread2({}, selectedElementCopy) : el;
});
saveHistory(updatedElements);
setSelectedElement(selectedElementCopy);
};
var onChangeShapeFill = function onChangeShapeFill(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('fill', e);
} else {
setShapeFillColor(e);
}
};
var onChangeShapeStrokeWidth = function onChangeShapeStrokeWidth(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setShapeStrokeWidth(e);
}
};
var onChangeShapeStrokeColor = function onChangeShapeStrokeColor(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('stroke', e);
} else {
setShapeStrokeColor(e);
}
};
var onChangeShapeOpacity = function onChangeShapeOpacity(e) {
if (selectedElement && isElementShape(selectedElement)) {
changeSelectedElementProperty('opacity', e);
} else {
setShapeOpacity(e);
}
};
var onDeleteSelectedElement = function onDeleteSelectedElement() {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (e) {
return (e === null || e === void 0 ? void 0 : e.id) === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index < 0) {
return;
}
var copy = _toConsumableArray(elements);
copy.splice(index, 1);
setSelectedElement(null);
saveHistory(_toConsumableArray(copy));
};
var onCopySelectedElement = function onCopySelectedElement() {
var copyElement = _objectSpread2({}, selectedElement);
copyElement['id'] = "element".concat(Date.now());
copyElement['x'] = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.x) + 10;
copyElement['y'] = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.y) + 10;
copyElement['draggable'] = true;
addElement(copyElement);
};
var onToggleLockElement = function onToggleLockElement() {
changeSelectedElementProperty('draggable', !(selectedElement !== null && selectedElement !== void 0 && selectedElement.draggable));
// setSelectedElement(null);
};
var bringSelectedElementToFront = function bringSelectedElementToFront() {
var copyElements = _toConsumableArray(elements);
var index = copyElements === null || copyElements === void 0 ? void 0 : copyElements.findIndex(function (elem) {
return elem.id === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index === -1) {
return;
}
var _copyElements$splice = copyElements === null || copyElements === void 0 ? void 0 : copyElements.splice(index, 1),
_copyElements$splice2 = _slicedToArray(_copyElements$splice, 1),
selectedElem = _copyElements$splice2[0];
copyElements === null || copyElements === void 0 || copyElements.push(selectedElem);
saveHistory(_toConsumableArray(copyElements));
};
var createNewTemplate = function createNewTemplate() {
var _elementsRef$current;
var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [].concat(_toConsumableArray(defaultElements), [{
type: elementTypes.qr,
id: "element".concat(Date.now() + 1),
width: 110,
height: 110,
x: 194.5,
y: 280,
fill: theme.color.green_80D965,
stroke: theme.color.black,
strokeWidth: 2,
draggable: true,
qrLogo: null,
qrText: qrLink,
opacity: 1,
logoVisible: false
}]);
var prevHadQrId = (_elementsRef$current = elementsRef.current) === null || _elementsRef$current === void 0 ? void 0 : _elementsRef$current.some(function (e) {
return e.id === QRID_ELEMENT_ID;
});
var next = _toConsumableArray(elems);
// If toggle was ON before and current template doesn’t include QR-ID, re-add it above Location (or center)
if (prevHadQrId && !next.some(function (e) {
return e.id === QRID_ELEMENT_ID;
}) && showQrIdToggle && currentQrId) {
var frame = computeQrIdFrame(next);
next.push(_objectSpread2({
id: QRID_ELEMENT_ID,
type: elementTypes.text,
draggable: true,
text: String(currentQrId),
fontWeight: '700',
textAlign: 'center',
opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
}, frame));
}
setElements(_toConsumableArray(elems));
setHistory([]);
setRedoStack([]);
if (typeof onCreateNewTemplate === 'function') {
onCreateNewTemplate(elems);
}
// Clear selected template ID
if (typeof onTemplateSelect === 'function') {
onTemplateSelect(null);
}
};
useEffect(function () {
elementsRef.current = elements;
}, [elements]);
var sendSelectedElementToBack = function sendSelectedElementToBack() {
var copyElements = _toConsumableArray(elements);
var index = copyElements === null || copyElements === void 0 ? void 0 : copyElements.findIndex(function (elem) {
return elem.id === (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id);
});
if (index === -1) {
return;
}
var _copyElements$splice3 = copyElements === null || copyElements === void 0 ? void 0 : copyElements.splice(index, 1),
_copyElements$splice4 = _slicedToArray(_copyElements$splice3, 1),
selectedElem = _copyElements$splice4[0];
copyElements === null || copyElements === void 0 || copyElements.unshift(selectedElem);
saveHistory(_toConsumableArray(copyElements));
};
var onChangeImageStrokeWidth = function onChangeImageStrokeWidth(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setImageStrokeWidth(e);
}
};
var onChangeImageStrokeColor = function onChangeImageStrokeColor(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('stroke', e);
} else {
setImageStrokeColor(e);
}
};
var onChangeImageOpacity = function onChangeImageOpacity(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('opacity', e);
} else {
setImageOpacity(e);
}
};
var onChangeImageTintColor = function onChangeImageTintColor(color) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('tintColor', color);
}
setImageTintColor(color);
};
var onChangeImageTintStrength = function onChangeImageTintStrength(value) {
var nextStrength = Math.max(0, Math.min(1, value));
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('tintStrength', nextStrength);
} else {
setImageTintStrength(nextStrength);
}
};
var onClearImageTint = function onClearImageTint() {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.image)) {
changeSelectedElementProperty('tintStrength', 0);
}
setImageTintStrength(0);
};
var addCustomImageToList = function addCustomImageToList(img) {
// console.error({img});
setCustomImagesList([].concat(_toConsumableArray(customImagesList), [img]));
};
var addImageToCanvas = function addImageToCanvas(img) {
var imgProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
stroke: imageStrokeColor,
strokeWidth: imageStrokeWidth,
opacity: imageOpacity,
tintColor: imageTintColor,
tintStrength: imageTintStrength,
type: elementTypes.image,
draggable: true,
// width: 100,
// height: 100,
src: img
};
addElement(imgProps);
};
var addTextToCanvas = function addTextToCanvas(e) {
var text = e ? e : defaultTextProps;
var textProps = {
id: "element".concat(Date.now()),
x: editorWidth / 2 - 100,
y: editorHeight / 2,
opacity: (text === null || text === void 0 ? void 0 : text.opacity) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity),
type: elementTypes.text,
draggable: true,
text: (text === null || text === void 0 ? void 0 : text.text) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.text),
fontSize: (text === null || text === void 0 ? void 0 : text.fontSize) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize),
fontFamily: (text === null || text === void 0 ? void 0 : text.fontFamily) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily),
color: (text === null || text === void 0 ? void 0 : text.color) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color),
textDecoration: (text === null || text === void 0 ? void 0 : text.textDecoration) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration),
fontStyle: (text === null || text === void 0 ? void 0 : text.fontStyle) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle),
fontWeight: (text === null || text === void 0 ? void 0 : text.fontWeight) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight),
textAlign: (text === null || text === void 0 ? void 0 : text.textAlign) || (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textAlign)
};
if (text !== null && text !== void 0 && text.width) {
textProps['width'] = text === null || text === void 0 ? void 0 : text.width;
}
addElement(textProps);
};
var addQrCode = function addQrCode() {
var qrProps = {
id: "element".concat(Date.now()),
type: elementTypes.qr,
height: 110,
width: 110,
x: editorWidth / 2 - 50,
y: editorHeight / 2 - 50,
fill: theme.color.green_80D965,
stroke: qrStrokeColor,
strokeWidth: qrStrokeWidth,
draggable: true,
qrLogo: null,
qrText: qrLink,
opacity: qrOpacity,
logoVisible: false
};
addElement(qrProps);
};
var removeQrCode = function removeQrCode() {
var copy = elements === null || elements === void 0 ? void 0 : elements.filter(function (el) {
return el.type !== (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
setSelectedElement(null);
}
saveHistory(_toConsumableArray(copy));
};
var onChangeQrStrokeWidth = function onChangeQrStrokeWidth(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('strokeWidth', e);
} else {
setQrStrokeWidth(e);
}
};
var onChangeQrStrokeColor = function onChangeQrStrokeColor(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('stroke', e);
} else {
setQrStrokeColor(e);
}
};
var onChangeQrOpacity = function onChangeQrOpacity(e) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr)) {
changeSelectedElementProperty('opacity', e);
} else {
setQrOpacity(e);
}
};
var toggleQr = function toggleQr() {
if ((elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})) > -1) {
removeQrCode();
} else {
addQrCode();
}
};
var turnLogoVisibiltyOn = function turnLogoVisibiltyOn() {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
logoVisible: true,
qrLogo: (el === null || el === void 0 ? void 0 : el.qrLogo) || qrLogo
}) : el;
});
saveHistory(updatedElements);
};
var turnLogoVisibiltyOff = function turnLogoVisibiltyOff() {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
logoVisible: false
}) : el;
});
saveHistory(updatedElements);
};
var toggleQrLogo = function toggleQrLogo() {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
if (index > -1) {
var _elements$index;
setSelectedElement(null);
if (elements !== null && elements !== void 0 && (_elements$index = elements[index]) !== null && _elements$index !== void 0 && _elements$index.logoVisible) {
turnLogoVisibiltyOff();
} else {
turnLogoVisibiltyOn();
}
}
};
var addQrLogo = /*#__PURE__*/function () {
var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var file, result, imageUrl, reader, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
_context2.n = 1;
return pickImage();
case 1:
file = _context2.v;
if (file) {
_context2.n = 2;
break;
}
return _context2.a(2);
case 2:
if (!uploadQRLogoImage) {
_context2.n = 8;
break;
}
_context2.p = 3;
setLoadingUploadImage(true);
_context2.n = 4;
return uploadQRLogoImage(file);
case 4:
result = _context2.v;
imageUrl = typeof result === 'string' ? result : result === null || result === void 0 ? void 0 : result.url;
if (imageUrl) {
addLogo(imageUrl);
} else {
console.warn('uploadQRLogoImage did not return a valid image URL');
}
_context2.n = 6;
break;
case 5:
_context2.p = 5;
_t = _context2.v;
console.error('Error uploading QR logo image:', _t);
case 6:
_context2.p = 6;
setLoadingUploadImage(false);
return _context2.f(6);
case 7:
_context2.n = 9;
break;
case 8:
reader = new FileReader();
reader.onload = function () {
addLogo(reader.result);
};
reader.readAsDataURL(file);
case 9:
return _context2.a(2);
}
}, _callee2, null, [[3, 5, 6, 7]]);
}));
return function addQrLogo() {
return _ref6.apply(this, arguments);
};
}();
var addLogo = function addLogo(url) {
var index = elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
});
setQrLogo(url);
if (index > -1) {
// if (elements[index]?.logoVisible) {
var updatedElements = elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
return el.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr) ? _objectSpread2(_objectSpread2({}, el), {}, {
qrLogo: url
}) : el;
});
saveHistory(updatedElements);
// }
}
};
var onChangeTextProperty = function onChangeTextProperty(key, value) {
if (isElementOfSameType(selectedElement, elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.text)) {
changeSelectedElementProperty(key, value);
} else {
var copyDefultProps = _objectSpread2({}, defaultTextProps);
copyDefultProps[key] = value;
setDefaultTextProps(_objectSpread2({}, copyDefultProps));
}
};
var onSaveProgress = /*#__PURE__*/function () {
var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
var processedElements, dataURL;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
if (onSave) {
_context3.n = 1;
break;
}
return _context3.a(2);
case 1:
setLoading(true);
setSelectedElement(null);
_context3.n = 2;
return new Promise(function (resolve) {
return setTimeout(resolve, 100);
});
case 2:
processedElements = removeImageProperty(elements);
_context3.n = 3;
return exportStageAsImage(stageRef, null, 2, exportCropArea);
case 3:
dataURL = _context3.v;
setLoading(false);
onSave({
elements: processedElements,
image: dataURL
});
case 4:
return _context3.a(2);
}
}, _callee3);
}));
return function onSaveProgress() {
return _ref7.apply(this, arguments);
};
}();
return /*#__PURE__*/React.createElement(StyleSheetManager, {
shouldForwardProp: isPropValid
}, /*#__PURE__*/React.createElement(StudioWrapper, null, /*#__PURE__*/React.createElement(SideBar, {
selectedSideBarItem: selectedTab,
onClickPill: onSelectedTab,
languageLocale: languageLocale,
disableWhiteLabel: disableWhiteLabel,
styleProps: styleProps
}), /*#__PURE__*/React.createElement(HelperSideBar, {
selectedSideBarItem: selectedTab,
onCollapse: onCollapseHelperSideBar,
helperSideBarVisible: helperSideBarVisible,
onAddShape: addShape,
defaultImagesList: defaultImages,
customImagesList: customImagesList,
onAddCustomImageToList: addCustomImageToList,
onAddImageToCanvas: addImageToCanvas,
onAddTextToCanvas: addTextToCanvas,
toggleQr: toggleQr,
qrPresent: (elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})) > -1,
toggleQrLogo: toggleQrLogo,
addQrLogo: addQrLogo,
qrLogo: (elements === null || elements === void 0 || (_elements$elements$fi = elements[elements === null || elements === void 0 ? void 0 : elements.findIndex(function (elem) {
return elem.type === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.qr);
})]) === null || _elements$elements$fi === void 0 ? void 0 : _elements$elements$fi.qrLogo) || qrLogo,
elements: elements,
oncreateNewTemplate: createNewTemplate,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
defaultTemplatesList: defaultTemplatesList,
customTemplatesList: customTemplatesList,
templatesDisplayOrder: templatesDisplayOrder,
onDeleteCustomTemplate: onDeleteCustomTemplate,
askDeleteConfirmation: askDeleteConfirmation,
styleProps: styleProps,
defaultText: defaultText,
languageLocale: languageLocale,
onTemplateSelect: onTemplateSelect,
allowedFormats: allowedFormats,
isLocationTextActive: hasLocationText,
onToggleLocationText: toggleLocationText,
showQrIdToggle: !!showQrIdToggle,
isQrIdTextActive: hasQrIdText,
onToggleQrIdText: toggleQrIdText
}), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
setLoading: setLoading,
cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find === void 0 ? void 0 : _elements$find.cuttingGuideStroke) || 0,
cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find2 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
})) === null || _elements$find2 === void 0 ? void 0 : _elements$find2.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
onChangeCuttingGuideProp: function onChangeCuttingGuideProp(type, value) {
_onChangeCuttingGuideProp(type, value);
},
editorHeight: editorHeight,
editorWidth: editorWidth,
selectedTab: selectedTab,
title: title,
zoomPercentage: zoomPercentage,
onChangeZoomPercentage: onChangeZoomPercentage,
onSetBackgroundColor: onSetBackgroundColor,
elements: elements,
history: history,
redoStack: redoStack,
onSetBackgroundImage: onSetBackgroundImage,
onUndo: undo,
onRedo: redo,
shapeStrokeColor: shapeStrokeColor,
shapeStrokeWidth: shapeStrokeWidth,
shapeFillColor: shapeFillColor,
imageStrokeWidth: imageStrokeWidth,
imageStrokeColor: imageStrokeColor,
imageOpacity: imageOpacity,
imageTintColor: imageTintColor,
imageTintStrength: imageTintStrength,
onChangeImageStrokeWidth: onChangeImageStrokeWidth,
onChangeImageStrokeColor: onChangeImageStrokeColor,
onChangeImageOpacity: onChangeImageOpacity,
onChangeImageTintColor: onChangeImageTintColor,
onChangeImageTintStrength: onChangeImageTintStrength,
onClearImageTint: onClearImageTint,
onChangeShapeStrokeColor: onChangeShapeStrokeColor,
onChangeShapeStrokeWidth: onChangeShapeStrokeWidth,
onChangeShapeFill: onChangeShapeFill,
shapeOpacity: shapeOpacity,
onChangeShapeOpacity: onChangeShapeOpacity,
qrStrokeWidth: qrStrokeWidth,
qrStrokeColor: qrStrokeColor,
qrOpacity: qrOpacity,
onChangeQrStrokeWidth: onChangeQrStrokeWidth,
onChangeQrStrokeColor: onChangeQrStrokeColor,
onChangeQrOpacity: onChangeQrOpacity,
selectedElement: selectedElement,
onSelectElement: onSelectElement,
stageRef: stageRef,
saveHistory: saveHistory,
onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find3 = elements.find(function (e) {
return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
})) === null || _elements$find3 === void 0 ? void 0 : _elements$find3.opacity) || backgroundImageOpacity,
onDeleteSelectedElement: onDeleteSelectedElement,
onCopySelectedElement: onCopySelectedElement,
onToggleLockElement: onToggleLockElement,
bringSelectedElementToFront: bringSelectedElementToFront,
sendSelectedElementToBack: sendSelectedElementToBack,
defaultTextProps: defaultTextProps,
onChangeTextProperty: onChangeTextProperty,
onSetPageSize: onSetPageSize,
selectedPageSize: selectedPageSize,
selectedPageSizeLabel: selectedPageSizeLabel,
loadingImages: loadingImages,
loadingFonts: loadingFonts,
uploadImageCallBack: uploadImageCallBack,
setLoadingUploadImage: setLoadingUploadImage,
onSave: onSave && onSaveProgress,
showSaveButton: showSaveButton,
onSetSelectedTab: onSelectedTab,
saveButtonText: saveButtonText,
languageLocale: languageLocale,
onRemoveBackgroundImage: onRemoveBackgroundImage,
showBackgroundImagePicker: showBackgroundImagePicker,
showOpacityPicker: showOpacityPicker,
changeSelectedElementProperty: changeSelectedElementProperty,
showOutsideBoundaryPreview: showOutsideBoundaryPreview,
outsideBoundaryPreviewPadding: normalizedOutsidePreviewPadding
}), overallLoading && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
size: "60px",
color: theme.color.secondary
}))));
});
Studio.propTypes = propTypes$z;
Studio.displayName = 'Studio';
export { Studio };
//# sourceMappingURL=index.js.map