@pdfme/ui 4.2.2 → 4.2.3-dev.4

package/README.md

@@ -1,6 +1,16 @@
 # PDFME
 
-<p>
+<p align="center">
+  <img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
+</p>
+
+<h4 align="center">
+  <a href="https://pdfme.com/">Website</a> |
+  <a href="https://app.pdfme.com/">pdfme Cloud</a> |
+  <a href="https://discord.gg/xWPTJbmgNV">Discord</a>
+</h4>
+
+<p align="center">
   <a href="https://github.com/pdfme/pdfme/blob/master/LICENSE.md">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="pdfme is released under the MIT license." />
   </a>
@@ -13,20 +23,9 @@
   <a href="https://npmcharts.com/compare/@pdfme/ui?minimal=true">
     <img src="https://img.shields.io/npm/dm/@pdfme/ui.svg" alt="Downloads per month on npm." />
   </a>
-  <a href="https://pdfme.com/docs/development-guide#contribution">
-    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
-  </a>
-  <a href="https://twitter.com/intent/tweet?text=Awesome+pdf+library%21&url=https://pdfme.com">
-    <img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social" alt="Tweet" />
-  </a>
 </p>
 
-TypeScript base PDF generator and React base UI.
-Open source, developed by the community, and completely free to use under the MIT license!
-
-<p align="center">
-  <img src="https://raw.githubusercontent.com/pdfme/pdfme/main/website/static/img/logo.svg" width="300"/>
-</p>
+<p align="center">TypeScript base PDF generator and React base UI. Open source, developed by the community, and completely free to use under the MIT license!</p>
 
 ## Features
 
@@ -302,3 +301,18 @@ const viewer = new Viewer({ domContainer, template, inputs });
 
 If you want to contribute to pdfme, please check the [Development Guide](https://pdfme.com/docs/development-guide) page.  
 We look forward to your contribution!
+
+## Cloud Service Option
+
+While pdfme is a powerful open-source library, we understand that some users might prefer a managed solution. For those looking for a ready-to-use, scalable PDF generation service without the need for setup and maintenance, we offer pdfme Cloud.
+
+**[Try pdfme Cloud - Hassle-free PDF Generation](https://app.pdfme.com/)**
+
+pdfme Cloud provides all the features of the open-source library, plus:
+
+- PDF generation at scale without infrastructure management
+- Hosted WYSIWYG template designer
+- Simple API integration
+- Automatic updates and maintenance
+
+\*pdfme is and will always remain open-source. The cloud service is an optional offering for those who prefer a managed solution.

package/dist/index.es.js

@@ -9307,7 +9307,6 @@ const ColorType = z.enum(["rgb", "cmyk"]).optional();
 z.object({ height: z.number(), width: z.number() });
 const Schema$1 = z.object({
   type: z.string(),
-  icon: z.string().optional(),
   content: z.string().optional(),
   position: z.object({ x: z.number(), y: z.number() }),
   width: z.number(),
@@ -9355,7 +9354,8 @@ CommonProps.extend({
 const UIOptions = CommonOptions.extend({
   lang: Lang.optional(),
   labels: z.record(z.string(), z.string()).optional(),
-  theme: z.record(z.string(), z.unknown()).optional()
+  theme: z.record(z.string(), z.unknown()).optional(),
+  icons: z.record(z.string(), z.string()).optional()
 }), HTMLElementSchema = z.any().refine((a) => a instanceof HTMLElement), UIProps = CommonProps.extend({
   domContainer: HTMLElementSchema,
   options: UIOptions.optional()
@@ -60275,7 +60275,9 @@ const uuid$6 = () => "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (a)
   const tt = (nt = Object.values(_).find(
     (at) => (at == null ? void 0 : at.propPanel.defaultSchema.type) === $
   )) == null ? void 0 : nt.propPanel;
-  Object.assign(a, (tt == null ? void 0 : tt.defaultSchema) || {});
+  Object.keys((tt == null ? void 0 : tt.defaultSchema) || {}).forEach((at) => {
+    a.hasOwnProperty(at) || (a[at] = tt == null ? void 0 : tt.defaultSchema[at]);
+  });
 }, changeSchemas = (a) => {
   const { objs: s, schemas: $, basePdf: _, pluginsRegistry: _e, pageSize: tt, commitSchemas: nt } = a, at = s.reduce((ot, { key: rt, value: st, schemaId: lt }) => {
     const et = ot.find((it) => it.id === lt);
@@ -81843,7 +81845,6 @@ const UseDynamicFontSize = (a) => {
   widgets: { UseDynamicFontSize },
   defaultSchema: {
     type: "text",
-    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>',
     content: "Type Something...",
     position: { x: 0, y: 0 },
     width: 45,
@@ -81968,14 +81969,19 @@ const UseDynamicFontSize = (a) => {
       return "flex-end";
   }
   return "flex-start";
-}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, textSchema = { pdf: pdfRender, ui: uiRender, propPanel }, text = textSchema;
+}, getBackgroundColor = (a, s) => !a || !s.backgroundColor ? "transparent" : s.backgroundColor, textSchema = {
+  pdf: pdfRender,
+  ui: uiRender,
+  propPanel,
+  icon: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-text-cursor-input"><path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1"/><path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5"/><path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1"/><path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7"/><path d="M9 7v10"/></svg>'
+}, text = textSchema;
 textSchema.pdf, textSchema.ui, {
   ...textSchema.propPanel,
   defaultSchema: {
     ...textSchema.propPanel.defaultSchema
   }
 };
-const getBody$1 = (a) => JSON.parse(a || "[]"), getBodyWithRange = (a, s) => {
+const getBody$1 = (a) => typeof a == "string" ? JSON.parse(a || "[]") : a || [], getBodyWithRange = (a, s) => {
   const $ = getBody$1(a);
   return s ? $.slice(s.start, s.end) : $;
 };
@@ -82468,7 +82474,7 @@ const modifyTemplateForTable = async (a) => {
     for (const [rt, st] of Object.entries(at))
       if (st.type === "table") {
         st.__bodyRange = void 0;
-        const lt = JSON.parse(($ == null ? void 0 : $[rt]) || "[]"), et = await createMultiTables(lt, {
+        const lt = getBody$1($ == null ? void 0 : $[rt]), et = await createMultiTables(lt, {
           schema: st,
           basePdf: tt.basePdf,
           options: _,
@@ -82489,7 +82495,7 @@ const modifyTemplateForTable = async (a) => {
                   start: ut.slice(0, dt + 1).reduce((mt, ct) => mt + ct.length, 0),
                   end: ut.slice(0, dt + 2).reduce((mt, ct) => mt + ct.length, 0)
                 },
-                content: $[rt]
+                content: typeof $[rt] != "string" ? JSON.stringify($[rt] || "[]") : $[rt]
               }
             };
             ot[gt] = pt;
@@ -151858,82 +151864,61 @@ const FormRender = withProvider(FormCore, defaultWidgets), svgBaseProp = {
     );
   }) }) });
 }, ButtonGroupWidget$1 = ButtonGroupWidget, { Text: Text$2 } = Typography$1, DetailView = (a) => {
-  const { token: s } = theme.useToken(), { size: $, changeSchemas: _, deselectSchema: _e, activeSchema: tt, activeElements: nt } = a, at = useForm(), ot = reactExports.useContext(I18nContext), rt = reactExports.useContext(PluginsRegistry), st = reactExports.useContext(OptionsContext), [lt, et] = reactExports.useState({});
+  const { token: s } = theme.useToken(), { size: $, changeSchemas: _, deselectSchema: _e, activeSchema: tt } = a, nt = useForm(), at = reactExports.useContext(I18nContext), ot = reactExports.useContext(PluginsRegistry), rt = reactExports.useContext(OptionsContext);
   reactExports.useEffect(() => {
-    const pt = {
-      AlignWidget: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...mt, ...a, options: st }),
-      Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
-      ButtonGroup: (mt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...mt, ...a, options: st })
-    };
-    for (const mt of Object.values(rt)) {
-      const ct = (mt == null ? void 0 : mt.propPanel.widgets) || {};
-      Object.entries(ct).forEach(([vt, At]) => {
-        pt[vt] = (xt) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          WidgetRenderer$1,
-          {
-            ...xt,
-            ...a,
-            options: st,
-            theme: s,
-            i18n: ot,
-            widget: At
-          }
-        );
-      });
+    const dt = { ...tt };
+    dt.x = dt.position.x, dt.y = dt.position.y, delete dt.position, nt.setValues(dt);
+  }, [tt, nt]);
+  const st = (dt) => {
+    const gt = (mt, ct) => typeof mt == "object" ? JSON.stringify(mt) !== JSON.stringify(ct) : mt !== ct;
+    let pt = [];
+    for (let mt in dt) {
+      if (["id", "content"].includes(mt))
+        continue;
+      let ct = dt[mt], vt = !1;
+      ["x", "y"].includes(mt) ? (vt = ct !== tt.position[mt], mt = "position." + mt) : vt = gt(ct, tt[mt]), vt && (ct === null && ["rotate", "opacity"].includes(mt) && (ct = void 0), pt.push({ key: mt, value: ct, schemaId: tt.id }));
     }
-    et(pt);
-  }, [tt, nt, rt, JSON.stringify(st)]), reactExports.useEffect(() => {
-    const pt = { ...tt };
-    pt.x = pt.position.x, pt.y = pt.position.y, delete pt.position, pt.key !== (at.getValues() || {}).key && at.resetFields(), at.setValues(pt);
-  }, [at, tt]);
-  const it = (pt) => {
-    let mt = [];
-    for (let ct in pt)
-      if (!["id", "content"].includes(ct) && (ct === "x" && (ct = "position.x"), ct === "y" && (ct = "position.y"), pt[ct] !== tt[ct])) {
-        let vt = pt[ct];
-        vt === null && ["rotate", "opacity"].includes(ct) && (vt = void 0), mt.push({ key: ct, value: vt, schemaId: tt.id });
-      }
-    mt.length && at.validateFields().then(() => _(mt)).catch((ct) => {
-      ct.errorFields.length && (mt = mt.filter((vt) => !ct.errorFields.find(
-        (At) => At.name.includes(vt.key)
-      ))), mt.length && _(mt);
+    pt.length && nt.validateFields().then(() => _(pt)).catch((mt) => {
+      mt.errorFields.length && (pt = pt.filter((ct) => !mt.errorFields.find(
+        (vt) => vt.name.includes(ct.key)
+      ))), pt.length && _(pt);
     });
-  }, ut = Object.values(rt).find(
-    (pt) => (pt == null ? void 0 : pt.propPanel.defaultSchema.type) === tt.type
-  ), ft = ut == null ? void 0 : ut.propPanel.schema;
-  ft || console.error(`[@pdfme/ui] No propPanel.schema for ${tt.type}.
+  }, lt = Object.values(ot).find(
+    (dt) => (dt == null ? void 0 : dt.propPanel.defaultSchema.type) === tt.type
+  ), et = lt == null ? void 0 : lt.propPanel.schema;
+  et || console.error(`[@pdfme/ui] No propPanel.schema for ${tt.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
-  const ht = Object.entries(rt).map(([pt, mt]) => ({
-    label: pt,
-    value: mt == null ? void 0 : mt.propPanel.defaultSchema.type
-  })), dt = ut.propPanel.defaultSchema, gt = {
+  const it = Object.entries(ot).map(([dt, gt]) => ({
+    label: dt,
+    value: gt == null ? void 0 : gt.propPanel.defaultSchema.type
+  })), ut = lt.propPanel.defaultSchema, ft = {
     type: "object",
     column: 2,
     properties: {
       type: {
-        title: ot("type"),
+        title: at("type"),
         type: "string",
         widget: "select",
-        props: { options: ht },
+        props: { options: it },
         required: !0,
         span: 12
       },
-      key: { title: ot("fieldName"), type: "string", required: !0, span: 12 },
+      key: { title: at("fieldName"), type: "string", required: !0, span: 12 },
       "-": { type: "void", widget: "Divider" },
-      align: { title: ot("align"), type: "void", widget: "AlignWidget" },
+      align: { title: at("align"), type: "void", widget: "AlignWidget" },
       x: { title: "X", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
       y: { title: "Y", type: "number", widget: "inputNumber", required: !0, span: 8, min: 0 },
       rotate: {
-        title: ot("rotate"),
+        title: at("rotate"),
         type: "number",
         widget: "inputNumber",
-        disabled: (dt == null ? void 0 : dt.rotate) === void 0,
+        disabled: (ut == null ? void 0 : ut.rotate) === void 0,
         max: 360,
         props: { min: 0 },
         span: 8
       },
       width: {
-        title: ot("width"),
+        title: at("width"),
         type: "number",
         widget: "inputNumber",
         required: !0,
@@ -151941,7 +151926,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 }
       },
       height: {
-        title: ot("height"),
+        title: at("height"),
         type: "number",
         widget: "inputNumber",
         required: !0,
@@ -151949,35 +151934,56 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         props: { min: 0 }
       },
       opacity: {
-        title: ot("opacity"),
+        title: at("opacity"),
         type: "number",
         widget: "inputNumber",
-        disabled: (dt == null ? void 0 : dt.opacity) === void 0,
+        disabled: (ut == null ? void 0 : ut.opacity) === void 0,
         props: { step: 0.1, min: 0, max: 1 },
         span: 8
       }
     }
   };
-  if (typeof ft == "function") {
-    const pt = ft({
+  if (typeof et == "function") {
+    const dt = et({
       ...a,
-      options: st,
+      options: rt,
       theme: s,
-      i18n: ot
+      i18n: at
     }) || {};
-    gt.properties = {
-      ...gt.properties,
-      ...Object.keys(pt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
-      ...pt
+    ft.properties = {
+      ...ft.properties,
+      ...Object.keys(dt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
+      ...dt
     };
   } else {
-    const pt = ft || {};
-    gt.properties = {
-      ...gt.properties,
-      ...Object.keys(pt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
-      ...pt
+    const dt = et || {};
+    ft.properties = {
+      ...ft.properties,
+      ...Object.keys(dt).length === 0 ? {} : { "--": { type: "void", widget: "Divider" } },
+      ...dt
     };
   }
+  const ht = {
+    AlignWidget: (dt) => /* @__PURE__ */ jsxRuntimeExports.jsx(AlignWidget$1, { ...dt, ...a, options: rt }),
+    Divider: () => /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
+    ButtonGroup: (dt) => /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonGroupWidget$1, { ...dt, ...a, options: rt })
+  };
+  for (const dt of Object.values(ot)) {
+    const gt = (dt == null ? void 0 : dt.propPanel.widgets) || {};
+    Object.entries(gt).forEach(([pt, mt]) => {
+      ht[pt] = (ct) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        WidgetRenderer$1,
+        {
+          ...ct,
+          ...a,
+          options: rt,
+          theme: s,
+          i18n: at,
+          widget: mt
+        }
+      );
+    });
+  }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { height: 40, display: "flex", alignItems: "center" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -151994,7 +152000,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(MenuOutlined$1, {})
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$2, { strong: !0, style: { textAlign: "center", width: "100%" }, children: ot("editField") })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Text$2, { strong: !0, style: { textAlign: "center", width: "100%" }, children: at("editField") })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider$1, { style: { marginTop: s.marginXS, marginBottom: s.marginXS } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -152008,17 +152014,17 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           FormRender,
           {
-            form: at,
-            schema: gt,
-            widgets: lt,
-            watch: { "#": it },
+            form: nt,
+            schema: ft,
+            widgets: ht,
+            watch: { "#": st },
             locale: "en-US"
           }
         )
       }
     )
   ] });
-}, DetailView$1 = DetailView, Sidebar = (a) => {
+}, propsAreUnchanged = (a, s) => JSON.stringify(a.activeSchema) == JSON.stringify(s.activeSchema), DetailView$1 = React$a.memo(DetailView, propsAreUnchanged), Sidebar = (a) => {
   const { sidebarOpen: s, setSidebarOpen: $, activeElements: _, schemas: _e } = a, { token: tt } = theme.useToken(), nt = () => _e.filter((ot) => _.map((rt) => rt.id).includes(ot.id)), at = () => {
     const ot = nt();
     return ot[ot.length - 1];
@@ -152152,15 +152158,15 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: lt ? "hidden" : "visible" }, children: a.children })
   ] });
 }, LeftSidebar = ({ height: a, scale: s, basePdf: $ }) => {
-  const { token: _ } = theme.useToken(), _e = reactExports.useContext(PluginsRegistry), [tt, nt] = reactExports.useState(!1);
+  const { token: _ } = theme.useToken(), _e = reactExports.useContext(PluginsRegistry), tt = reactExports.useContext(OptionsContext), [nt, at] = reactExports.useState(!1);
   return reactExports.useEffect(() => {
-    const at = () => {
-      tt && nt(!1);
+    const ot = () => {
+      nt && at(!1);
     };
-    return document.addEventListener("mouseup", at), () => {
-      document.removeEventListener("mouseup", at);
+    return document.addEventListener("mouseup", ot), () => {
+      document.removeEventListener("mouseup", ot);
     };
-  }, [tt]), /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }, [nt]), /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
       style: {
@@ -152172,28 +152178,34 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
         width: 45,
         background: _.colorBgLayout,
         textAlign: "center",
-        overflow: tt ? "visible" : "auto"
+        overflow: nt ? "visible" : "auto"
       },
-      children: Object.entries(_e).map(([at, ot]) => ot != null && ot.propPanel.defaultSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Draggable$1,
-        {
-          scale: s,
-          basePdf: $,
-          plugin: ot,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$2,
-            {
-              title: at,
-              onMouseDown: () => {
-                nt(!0);
-              },
-              style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
-              children: ot.propPanel.defaultSchema.icon ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: ot.propPanel.defaultSchema.icon } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: at })
-            }
-          )
-        },
-        at
-      ) : null)
+      children: Object.entries(_e).map(([ot, rt]) => {
+        var lt;
+        if (!(rt != null && rt.propPanel.defaultSchema))
+          return null;
+        const st = ((lt = tt.icons) == null ? void 0 : lt[rt.propPanel.defaultSchema.type]) ?? rt.icon;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Draggable$1,
+          {
+            scale: s,
+            basePdf: $,
+            plugin: rt,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Button$2,
+              {
+                title: ot,
+                onMouseDown: () => {
+                  at(!0);
+                },
+                style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
+                children: st ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { dangerouslySetInnerHTML: { __html: st } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: ot })
+              }
+            )
+          },
+          ot
+        );
+      })
     }
   );
 }, LeftSidebar$1 = LeftSidebar, Paper = (a) => {
@@ -162367,7 +162379,7 @@ const Guides$2 = Guides$1, guideStyle = (a, s, $, _) => ({
         var rr, Yt;
         if (!$t.active)
           return;
-        const Pt = $t.active, Dt = ot.current[dt].getBoundingClientRect(), Ut = ((rr = Pt.rect.current.initial) == null ? void 0 : rr.left) || 0, Vt = ((Yt = Pt.rect.current.initial) == null ? void 0 : Yt.top) || 0, Qt = Dt.left - Ut + scaleDragPosAdjustment(20, St), qt = Dt.top - Vt, Zt = ($t.delta.y - qt) / St, ar = ($t.delta.x - Qt) / St, Jt = { x: px2mm(Math.max(0, ar)), y: px2mm(Math.max(0, Zt)) };
+        const Pt = $t.active, Dt = ot.current[dt].getBoundingClientRect(), Ut = ((rr = Pt.rect.current.initial) == null ? void 0 : rr.left) || 0, Vt = ((Yt = Pt.rect.current.initial) == null ? void 0 : Yt.top) || 0, Qt = Dt.left - Ut + scaleDragPosAdjustment(20, St), qt = Dt.top - Vt, Zt = ($t.delta.y - qt) / St, ar = ($t.delta.x - Qt) / St, Jt = { x: round(px2mm(Math.max(0, ar)), 2), y: round(px2mm(Math.max(0, Zt)), 2) };
         kt({ ...Pt.data.current, position: Jt });
       },
       onDragStart: wt,