@univerjs/docs-drawing-ui 0.1.13-nightly.202406041140

package/lib/es/index.js

@@ -0,0 +1,963 @@
+var Be = Object.defineProperty;
+var $e = (e, n, t) => n in e ? Be(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
+var V = (e, n, t) => ($e(e, typeof n != "symbol" ? n + "" : n, t), t);
+import { CommandType as C, ICommandService as _, IUndoRedoService as x, LocaleService as Q, RxDisposable as He, UniverInstanceType as b, toDisposable as ee, FOCUSING_COMMON_DRAWINGS as Y, OnLifecycle as ie, LifecycleStages as re, IUniverInstanceService as he, IContextService as Ie, Direction as P, FOCUSING_UNIVER_EDITOR as Ke, Disposable as ve, PositionedObjectLayoutType as ze, ObjectRelativeFromH as Ze, ObjectRelativeFromV as qe, Plugin as Ye } from "@univerjs/core";
+import { Inject as R, Injector as _e } from "@wendellhu/redi";
+import { IRenderManagerService as X, getGroupState as Qe, transformObjectOutOfGroup as Xe, Liquid as Je } from "@univerjs/engine-render";
+import { ImageCropperObject as en, COMPONENT_IMAGE_POPUP_MENU as nn, OpenImageCropOperation as tn, ImageResetSizeOperation as rn, DrawingCommonPanel as on } from "@univerjs/drawing-ui";
+import { takeUntil as ce } from "rxjs";
+import { DocCanvasPopManagerService as an, transformToDocDrawingPosition as we, docDrawingPositionToTransform as de } from "@univerjs/docs-ui";
+import { IDrawingManagerService as L, DRAWING_IMAGE_ALLOW_IMAGE_LIST as sn, ArrangeTypeEnum as B, DrawingTypeEnum as oe, DRAWING_IMAGE_COUNT_LIMIT as ue, ImageUploadStatusType as ne, DRAWING_IMAGE_ALLOW_SIZE as cn, getImageSize as dn, DRAWING_IMAGE_WIDTH_LIMIT as me, DRAWING_IMAGE_HEIGHT_LIMIT as le, IImageIoService as un } from "@univerjs/drawing";
+import { IDocDrawingService as y, SetDocDrawingApplyMutation as h, DocDrawingApplyType as I } from "@univerjs/docs-drawing";
+import { ISidebarService as mn, MenuItemType as Se, MenuPosition as ln, MenuGroup as gn, getMenuHiddenObservable as Ce, KeyCode as A, ComponentManager as pn, IMenuService as fn, IShortcutService as hn, IMessageService as In } from "@univerjs/ui";
+import { useDependency as N } from "@wendellhu/redi/react-bindings";
+import M, { forwardRef as De, useRef as Me, createElement as Oe, useState as te, useEffect as ye } from "react";
+import $ from "clsx";
+import { MessageType as H } from "@univerjs/design";
+import { TextSelectionManagerService as vn, DocSkeletonManagerService as _n } from "@univerjs/docs";
+const S = {
+  id: "sheet.operation.clear-drawing-transformer",
+  type: C.MUTATION,
+  handler: (e, n) => {
+    const t = e.get(X);
+    return n.forEach((i) => {
+      var r, o;
+      (o = (r = t.getRenderById(i)) == null ? void 0 : r.scene.getTransformer()) == null || o.debounceRefreshControls();
+    }), !0;
+  }
+}, ae = {
+  id: "doc.command.remove-doc-image",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x), r = e.get(y);
+    if (!n)
+      return !1;
+    const { drawings: o } = n, a = [];
+    o.forEach((p) => {
+      const { unitId: f } = p;
+      a.push(f);
+    });
+    const s = r.getBatchRemoveOp(o), { unitId: c, subUnitId: d, undo: m, redo: u, objects: l } = s;
+    return t.syncExecuteCommand(h.id, { unitId: c, subUnitId: d, op: u, objects: l, type: I.REMOVE }) ? (i.pushUndoRedo({
+      unitID: c,
+      undoMutations: [
+        { id: h.id, params: { unitId: c, subUnitId: d, op: m, objects: l, type: I.INSERT } },
+        { id: S.id, params: a }
+      ],
+      redoMutations: [
+        { id: h.id, params: { unitId: c, subUnitId: d, op: u, objects: l, type: I.REMOVE } },
+        { id: S.id, params: a }
+      ]
+    }), !0) : !1;
+  }
+}, Ee = "COMPONENT_DOC_DRAWING_PANEL", Pe = {
+  id: "sidebar.operation.doc-image",
+  type: C.COMMAND,
+  handler: async (e, n) => {
+    const t = e.get(mn), i = e.get(Q), r = e.get(L);
+    switch (n.value) {
+      case "open":
+        t.open({
+          header: { title: i.t("docImage.panel.title") },
+          children: { label: Ee },
+          onClose: () => {
+            r.focusDrawing(null);
+          },
+          width: 360
+        });
+        break;
+      case "close":
+      default:
+        t.close();
+        break;
+    }
+    return !0;
+  }
+}, Re = {
+  id: "sheet.operation.edit-sheet-image",
+  type: C.OPERATION,
+  handler: (e, n) => {
+    const t = e.get(L), i = e.get(_);
+    return n == null ? !1 : (t.focusDrawing([n]), i.executeCommand(Pe.id, { value: "open" }), !0);
+  }
+};
+var wn = (e, n, t, i) => {
+  for (var r = n, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = a(r) || r);
+  return r;
+}, j = (e, n) => (t, i) => n(t, i, e);
+let z = class extends He {
+  constructor(n, t, i, r, o) {
+    super();
+    V(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+    this._drawingManagerService = n, this._canvasPopManagerService = t, this._renderManagerService = i, this._univerInstanceService = r, this._contextService = o, this._init();
+  }
+  _init() {
+    this._univerInstanceService.getCurrentTypeOfUnit$(b.UNIVER_DOC).pipe(ce(this.dispose$)).subscribe((n) => this._create(n)), this._univerInstanceService.getTypeOfUnitDisposed$(b.UNIVER_DOC).pipe(ce(this.dispose$)).subscribe((n) => this._dispose(n)), this._univerInstanceService.getAllUnitsForType(b.UNIVER_DOC).forEach((n) => this._create(n));
+  }
+  _dispose(n) {
+    const t = n.getUnitId();
+    this._renderManagerService.removeRender(t);
+  }
+  _create(n) {
+    if (!n)
+      return;
+    const t = n.getUnitId();
+    this._renderManagerService.has(t) && !this._initImagePopupMenu.has(t) && (this._popupMenuListener(t), this._initImagePopupMenu.add(t));
+  }
+  _hasCropObject(n) {
+    const t = n.getAllObjects();
+    for (const i of t)
+      if (i instanceof en)
+        return !0;
+    return !1;
+  }
+  _popupMenuListener(n) {
+    var o;
+    const t = (o = this._renderManagerService.getRenderById(n)) == null ? void 0 : o.scene;
+    if (!t)
+      return;
+    const i = t.getTransformerByCreate();
+    if (!i)
+      return;
+    const r = [];
+    this.disposeWithMe(
+      ee(
+        i.onCreateControlObservable.add(() => {
+          if (this._hasCropObject(t))
+            return;
+          const a = i.getSelectedObjectMap();
+          if (a.size > 1) {
+            r.forEach((g) => g.dispose());
+            return;
+          }
+          const s = a.values().next().value;
+          if (!s)
+            return;
+          const c = s.oKey, d = this._drawingManagerService.getDrawingOKey(c);
+          if (!d)
+            return;
+          const { unitId: m, subUnitId: u, drawingId: l } = d;
+          r.push(this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(s, {
+            componentKey: nn,
+            direction: "horizontal",
+            offset: [2, 0],
+            extraProps: {
+              menuItems: this._getImageMenuItems(m, u, l)
+            }
+          }))), this._drawingManagerService.focusDrawing([{
+            unitId: m,
+            subUnitId: u,
+            drawingId: l
+          }]);
+        })
+      )
+    ), this.disposeWithMe(
+      ee(
+        i.onClearControlObservable.add(() => {
+          r.forEach((a) => a.dispose()), this._contextService.setContextValue(Y, !1), this._drawingManagerService.focusDrawing(null);
+        })
+      )
+    ), this.disposeWithMe(
+      ee(
+        i.onChangingObservable.add(() => {
+          r.forEach((a) => a.dispose());
+        })
+      )
+    );
+  }
+  _getImageMenuItems(n, t, i) {
+    return [
+      {
+        label: "image-popup.edit",
+        index: 0,
+        commandId: Re.id,
+        commandParams: { unitId: n, subUnitId: t, drawingId: i },
+        disable: !1
+      },
+      {
+        label: "image-popup.delete",
+        index: 1,
+        commandId: ae.id,
+        commandParams: { unitId: n, drawings: [{ unitId: n, subUnitId: t, drawingId: i }] },
+        disable: !1
+      },
+      {
+        label: "image-popup.crop",
+        index: 2,
+        commandId: tn.id,
+        commandParams: { unitId: n, subUnitId: t, drawingId: i },
+        disable: !1
+      },
+      {
+        label: "image-popup.reset",
+        index: 3,
+        commandId: rn.id,
+        commandParams: [{ unitId: n, subUnitId: t, drawingId: i }],
+        disable: !1
+      }
+    ];
+  }
+};
+z = wn([
+  ie(re.Rendered, z),
+  j(0, L),
+  j(1, R(an)),
+  j(2, X),
+  j(3, he),
+  j(4, Ie)
+], z);
+var w = function() {
+  return w = Object.assign || function(e) {
+    for (var n, t = 1, i = arguments.length; t < i; t++) {
+      n = arguments[t];
+      for (var r in n)
+        Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+    }
+    return e;
+  }, w.apply(this, arguments);
+}, Sn = function(e, n) {
+  var t = {};
+  for (var i in e)
+    Object.prototype.hasOwnProperty.call(e, i) && n.indexOf(i) < 0 && (t[i] = e[i]);
+  if (e != null && typeof Object.getOwnPropertySymbols == "function")
+    for (var r = 0, i = Object.getOwnPropertySymbols(e); r < i.length; r++)
+      n.indexOf(i[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, i[r]) && (t[i[r]] = e[i[r]]);
+  return t;
+}, be = De(function(e, n) {
+  var t = e.icon, i = e.id, r = e.className, o = e.extend, a = Sn(e, ["icon", "id", "className", "extend"]), s = "univerjs-icon univerjs-icon-".concat(i, " ").concat(r || "").trim(), c = Me("_".concat(Mn()));
+  return Ue(t, "".concat(i), { defIds: t.defIds, idSuffix: c.current }, w({ ref: n, className: s }, a), o);
+});
+function Ue(e, n, t, i, r) {
+  return Oe(e.tag, w(w({ key: n }, Cn(e, t, r)), i), (Dn(e, t).children || []).map(function(o, a) {
+    return Ue(o, "".concat(n, "-").concat(e.tag, "-").concat(a), t, void 0, r);
+  }));
+}
+function Cn(e, n, t) {
+  var i = w({}, e.attrs);
+  t != null && t.colorChannel1 && i.fill === "colorChannel1" && (i.fill = t.colorChannel1);
+  var r = n.defIds;
+  return !r || r.length === 0 || (e.tag === "use" && i["xlink:href"] && (i["xlink:href"] = i["xlink:href"] + n.idSuffix), Object.entries(i).forEach(function(o) {
+    var a = o[0], s = o[1];
+    typeof s == "string" && (i[a] = s.replace(/url\(#(.*)\)/, "url(#$1".concat(n.idSuffix, ")")));
+  })), i;
+}
+function Dn(e, n) {
+  var t, i = n.defIds;
+  return !i || i.length === 0 ? e : e.tag === "defs" && (!((t = e.children) === null || t === void 0) && t.length) ? w(w({}, e), { children: e.children.map(function(r) {
+    return typeof r.attrs.id == "string" && i && i.indexOf(r.attrs.id) > -1 ? w(w({}, r), { attrs: w(w({}, r.attrs), { id: r.attrs.id + n.idSuffix }) }) : r;
+  }) }) : e;
+}
+function Mn() {
+  return Math.random().toString(36).substring(2, 8);
+}
+be.displayName = "UniverIcon";
+var On = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M2.2498 3.65005C2.2498 2.87685 2.87661 2.25005 3.64981 2.25005H7.9998C8.33118 2.25005 8.5998 1.98142 8.5998 1.65005C8.5998 1.31868 8.33118 1.05005 7.9998 1.05005H3.64981C2.21387 1.05005 1.0498 2.21411 1.0498 3.65005V12.35C1.0498 13.786 2.21386 14.95 3.6498 14.95H12.3498C13.7857 14.95 14.9498 13.786 14.9498 12.3501V8.00005C14.9498 7.66868 14.6812 7.40005 14.3498 7.40005C14.0184 7.40005 13.7498 7.66868 13.7498 8.00005V9.23974L12.2385 8.1063C11.7252 7.72129 11.0068 7.7723 10.5531 8.22605L9.00869 9.77041L6.73916 7.8251C6.24387 7.40055 5.5095 7.41278 5.02864 7.85359L2.2498 10.4009V3.65005ZM2.2498 12.0287V12.35C2.2498 13.1232 2.87661 13.75 3.6498 13.75H12.3498C13.123 13.75 13.7498 13.1232 13.7498 12.3501V10.7397L11.5186 9.06631C11.4829 9.03956 11.433 9.04314 11.4016 9.07458L9.92249 10.5537L11.1015 11.5642C11.3531 11.7799 11.3822 12.1587 11.1666 12.4103C10.9509 12.6619 10.5721 12.691 10.3205 12.4753L5.9582 8.7362C5.92384 8.70674 5.87288 8.70758 5.83952 8.73816L2.2498 12.0287Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M11.8097 1.14783C12.1411 1.14783 12.4097 1.41646 12.4097 1.74783V3.297H14.1541C14.4855 3.297 14.7541 3.56563 14.7541 3.897C14.7541 4.22837 14.4855 4.497 14.1541 4.497H12.4097V6.24167C12.4097 6.57304 12.1411 6.84167 11.8097 6.84167C11.4783 6.84167 11.2097 6.57304 11.2097 6.24167V4.497H9.6603C9.32893 4.497 9.0603 4.22837 9.0603 3.897C9.0603 3.56563 9.32893 3.297 9.6603 3.297H11.2097V1.74783C11.2097 1.41646 11.4783 1.14783 11.8097 1.14783Z" } }] }, Te = De(function(e, n) {
+  return Oe(be, Object.assign({}, e, {
+    id: "add-image-single",
+    ref: n,
+    icon: On
+  }));
+});
+Te.displayName = "AddImageSingle";
+const J = {
+  id: "doc.operation.insert-float-image",
+  type: C.OPERATION,
+  handler: (e, n) => !0
+}, yn = "univer-upload-file-menu", En = "univer-upload-file-menu-input", ge = {
+  uploadFileMenu: yn,
+  uploadFileMenuInput: En
+}, Pn = () => {
+  const e = N(_), n = Me(null), t = () => {
+    var o;
+    (o = n.current) == null || o.click();
+  }, i = sn.map((o) => `.${o.replace("image/", "")}`).join(","), r = (o) => {
+    const a = o.target.files;
+    if (a == null)
+      return;
+    const s = Array.from(a);
+    e.executeCommand(J.id, { files: s }), n.current && (n.current.value = "");
+  };
+  return /* @__PURE__ */ M.createElement("div", { onClick: t, className: ge.uploadFileMenu }, /* @__PURE__ */ M.createElement(
+    "input",
+    {
+      type: "file",
+      className: ge.uploadFileMenuInput,
+      ref: n,
+      onChange: r,
+      accept: i,
+      multiple: !0
+    }
+  ));
+}, Ne = "COMPONENT_DOC_UPLOAD_FILE_MENU", Ae = "addition-and-subtraction-single", xe = "doc.menu.image";
+function Rn(e) {
+  return {
+    id: xe,
+    type: Se.SUBITEMS,
+    positions: [ln.TOOLBAR_START],
+    group: gn.TOOLBAR_LAYOUT,
+    icon: Ae,
+    tooltip: "docImage.title",
+    hidden$: Ce(e, b.UNIVER_DOC)
+  };
+}
+function bn(e) {
+  return {
+    id: J.id,
+    title: "docImage.upload.float",
+    type: Se.SELECTOR,
+    label: {
+      name: Ne
+    },
+    positions: [xe],
+    hidden$: Ce(e, b.UNIVER_DOC)
+  };
+}
+const Un = "univer-image-common-panel", Tn = "univer-image-common-panel-grid", Nn = "univer-image-common-panel-border", An = "univer-image-common-panel-title", xn = "univer-image-common-panel-row", Ln = "univer-image-common-panel-row-vertical", Gn = "univer-image-common-panel-column", jn = "univer-image-common-panel-column-center", Wn = "univer-image-common-panel-inline", kn = "univer-image-common-panel-span2", Fn = "univer-image-common-panel-span3", Vn = "univer-image-common-panel-input", Bn = "univer-sheet-image-menu", $n = "univer-sheet-image-menu-input", E = {
+  imageCommonPanel: Un,
+  imageCommonPanelGrid: Tn,
+  imageCommonPanelBorder: Nn,
+  imageCommonPanelTitle: An,
+  imageCommonPanelRow: xn,
+  imageCommonPanelRowVertical: Ln,
+  imageCommonPanelColumn: Gn,
+  imageCommonPanelColumnCenter: jn,
+  imageCommonPanelInline: Wn,
+  imageCommonPanelSpan2: kn,
+  imageCommonPanelSpan3: Fn,
+  imageCommonPanelInput: Vn,
+  sheetImageMenu: Bn,
+  sheetImageMenuInput: $n
+}, se = {
+  id: "doc.command.set-doc-image",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x), r = e.get(y);
+    if (!n)
+      return !1;
+    const { drawings: o } = n, a = r.getBatchUpdateOp(o), { unitId: s, subUnitId: c, undo: d, redo: m, objects: u } = a;
+    return t.syncExecuteCommand(h.id, { unitId: s, subUnitId: c, op: m, objects: u, type: I.UPDATE }) ? (i.pushUndoRedo({
+      unitID: s,
+      undoMutations: [
+        { id: h.id, params: { unitId: s, subUnitId: c, op: d, objects: u, type: I.UPDATE } },
+        { id: S.id, params: [s] }
+      ],
+      redoMutations: [
+        { id: h.id, params: { unitId: s, subUnitId: c, op: m, objects: u, type: I.UPDATE } },
+        { id: S.id, params: [s] }
+      ]
+    }), !0) : !1;
+  }
+}, Hn = (e) => {
+  N(_);
+  const n = N(Q), t = N(L), i = N(X), { drawings: r } = e, o = r[0];
+  if (o == null)
+    return;
+  const { unitId: a } = o, s = i.getRenderById(a), c = s == null ? void 0 : s.scene;
+  if (c == null)
+    return;
+  const d = c.getTransformerByCreate(), [m, u] = te(!0);
+  te("");
+  function l(p, f) {
+    const v = [];
+    return p.forEach((O) => {
+      const { oKey: U } = O;
+      if (f.getDrawingOKey(U) == null)
+        return v.push(null), !0;
+    }), v;
+  }
+  ye(() => {
+    const p = d.onClearControlObservable.add((v) => {
+      v === !0 && u(!1);
+    }), f = d.onChangeStartObservable.add((v) => {
+      const { objects: O } = v;
+      l(O, t);
+    });
+    return () => {
+      f == null || f.dispose(), p == null || p.dispose();
+    };
+  }, []);
+  const g = (p) => p ? "block" : "none";
+  return /* @__PURE__ */ M.createElement("div", { className: $(E.imageCommonPanelGrid, E.imageCommonPanelBorder), style: { display: g(m) } }, /* @__PURE__ */ M.createElement("div", { className: E.imageCommonPanelRow }, /* @__PURE__ */ M.createElement("div", { className: $(E.imageCommonPanelColumn, E.imageCommonPanelTitle) }, /* @__PURE__ */ M.createElement("div", null, n.t("drawing-anchor.title")))), /* @__PURE__ */ M.createElement("div", { className: $(E.imageCommonPanelRow) }, /* @__PURE__ */ M.createElement("div", { className: $(E.imageCommonPanelColumn) })));
+}, Kn = () => {
+  const e = N(L), n = e.getFocusDrawings();
+  if (n == null || n.length === 0)
+    return;
+  const [t, i] = te(n);
+  return ye(() => {
+    const r = e.focus$.subscribe((o) => {
+      i(o);
+    });
+    return () => {
+      r.unsubscribe();
+    };
+  }, []), /* @__PURE__ */ M.createElement("div", { className: E.imageCommonPanel }, /* @__PURE__ */ M.createElement(on, { drawings: t }), /* @__PURE__ */ M.createElement(Hn, { drawings: t }));
+}, k = {
+  id: "doc.command.move-drawing",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(y), { direction: r } = n, o = i.getFocusDrawings();
+    if (o.length === 0)
+      return !1;
+    const a = o[0].unitId, s = o.map((d) => {
+      const { transform: m } = d;
+      if (m == null)
+        return null;
+      const u = { ...m }, { left: l = 0, top: g = 0 } = m;
+      return r === P.UP ? u.top = g - 1 : r === P.DOWN ? u.top = g + 1 : r === P.LEFT ? u.left = l - 1 : r === P.RIGHT && (u.left = l + 1), {
+        ...d,
+        transform: u,
+        docTransform: we(u)
+      };
+    }).filter((d) => d != null);
+    return t.syncExecuteCommand(se.id, {
+      unitId: a,
+      drawings: s
+    }) ? (t.syncExecuteCommand(S.id, [a]), !0) : !1;
+  }
+}, Le = {
+  id: "doc.command.delete-drawing",
+  type: C.COMMAND,
+  handler: (e) => {
+    const n = e.get(_), i = e.get(y).getFocusDrawings();
+    if (i.length === 0)
+      return !1;
+    const r = i[0].unitId, o = i.map((a) => {
+      const { unitId: s, subUnitId: c, drawingId: d, drawingType: m } = a;
+      return {
+        unitId: s,
+        subUnitId: c,
+        drawingId: d,
+        drawingType: m
+      };
+    });
+    return n.executeCommand(ae.id, {
+      unitId: r,
+      drawings: o
+    });
+  }
+}, Ge = {
+  id: "doc.command.set-drawing-arrange",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x);
+    if (!n)
+      return !1;
+    const r = e.get(y), { unitId: o, subUnitId: a, drawingIds: s, arrangeType: c } = n, d = { unitId: o, subUnitId: a, drawingIds: s };
+    let m;
+    if (c === B.forward ? m = r.getForwardDrawingsOp(d) : c === B.backward ? m = r.getBackwardDrawingOp(d) : c === B.front ? m = r.getFrontDrawingsOp(d) : c === B.back && (m = r.getBackDrawingsOp(d)), m == null)
+      return !1;
+    const { objects: u, redo: l, undo: g } = m;
+    return t.syncExecuteCommand(h.id, { op: l, unitId: o, subUnitId: a, objects: u, type: I.ARRANGE }) ? (i.pushUndoRedo({
+      unitID: o,
+      undoMutations: [
+        { id: h.id, params: { op: g, unitId: o, subUnitId: a, objects: u, type: I.ARRANGE } }
+      ],
+      redoMutations: [
+        { id: h.id, params: { op: l, unitId: o, subUnitId: a, objects: u, type: I.ARRANGE } }
+      ]
+    }), !0) : !1;
+  }
+};
+function zn(e) {
+  const n = [];
+  return e.forEach((t) => {
+    const { parent: i, children: r } = t, { unitId: o, subUnitId: a, drawingId: s } = i, c = Qe(0, 0, r.map((u) => u.transform || {})), d = r.map((u) => {
+      const l = u.transform || { left: 0, top: 0 }, { unitId: g, subUnitId: p, drawingId: f } = u;
+      return {
+        unitId: g,
+        subUnitId: p,
+        drawingId: f,
+        transform: {
+          ...l,
+          left: l.left - c.left,
+          top: l.top - c.top
+        },
+        groupId: s
+      };
+    }), m = {
+      unitId: o,
+      subUnitId: a,
+      drawingId: s,
+      drawingType: oe.DRAWING_GROUP,
+      transform: c
+    };
+    n.push({
+      parent: m,
+      children: d
+    });
+  }), n;
+}
+function Zn(e) {
+  const n = [];
+  return e.forEach((t) => {
+    const { parent: i, children: r } = t, { unitId: o, subUnitId: a, drawingId: s, transform: c = { width: 0, height: 0 } } = i;
+    if (c == null)
+      return;
+    const d = r.map((u) => {
+      const { transform: l } = u, { unitId: g, subUnitId: p, drawingId: f } = u, v = Xe(l || {}, c, c.width || 0, c.height || 0);
+      return {
+        unitId: g,
+        subUnitId: p,
+        drawingId: f,
+        transform: v,
+        groupId: void 0
+      };
+    }), m = {
+      unitId: o,
+      subUnitId: a,
+      drawingId: s,
+      drawingType: oe.DRAWING_GROUP,
+      transform: {
+        left: 0,
+        top: 0
+      }
+    };
+    n.push({
+      parent: m,
+      children: d
+    });
+  }), n;
+}
+const je = {
+  id: "doc.command.ungroup-doc-image",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x), r = e.get(y);
+    if (!n)
+      return !1;
+    const o = [];
+    n.forEach(({ parent: g, children: p }) => {
+      o.push(g.unitId), p.forEach((f) => {
+        o.push(f.unitId);
+      });
+    });
+    const a = r.getUngroupDrawingOp(n), { unitId: s, subUnitId: c, undo: d, redo: m, objects: u } = a;
+    return t.syncExecuteCommand(h.id, { op: m, unitId: s, subUnitId: c, objects: u, type: I.UNGROUP }) ? (i.pushUndoRedo({
+      unitID: s,
+      undoMutations: [
+        { id: h.id, params: { op: d, unitId: s, subUnitId: c, objects: zn(u), type: I.GROUP } },
+        { id: S.id, params: o }
+      ],
+      redoMutations: [
+        { id: h.id, params: { op: m, unitId: s, subUnitId: c, objects: u, type: I.UNGROUP } },
+        { id: S.id, params: o }
+      ]
+    }), !0) : !1;
+  }
+}, We = {
+  id: "doc.command.group-doc-image",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x), r = e.get(y);
+    if (!n)
+      return !1;
+    const o = [];
+    n.forEach(({ parent: g, children: p }) => {
+      o.push(g.unitId), p.forEach((f) => {
+        o.push(f.unitId);
+      });
+    });
+    const a = r.getGroupDrawingOp(n), { unitId: s, subUnitId: c, undo: d, redo: m, objects: u } = a;
+    return t.syncExecuteCommand(h.id, { op: m, unitId: s, subUnitId: c, objects: u, type: I.GROUP }) ? (i.pushUndoRedo({
+      unitID: s,
+      undoMutations: [
+        { id: h.id, params: { op: d, unitId: s, subUnitId: c, objects: Zn(u), type: I.UNGROUP } },
+        { id: S.id, params: o }
+      ],
+      redoMutations: [
+        { id: h.id, params: { op: m, unitId: s, subUnitId: c, objects: u, type: I.GROUP } },
+        { id: S.id, params: o }
+      ]
+    }), !0) : !1;
+  }
+}, ke = {
+  id: "doc.command.insert-doc-image",
+  type: C.COMMAND,
+  handler: (e, n) => {
+    const t = e.get(_), i = e.get(x), r = e.get(y);
+    if (!n)
+      return !1;
+    const o = n.drawings, a = o.map((p) => p.unitId), s = r.getBatchAddOp(o), { unitId: c, subUnitId: d, undo: m, redo: u, objects: l } = s;
+    return t.syncExecuteCommand(h.id, { op: u, unitId: c, subUnitId: d, objects: l, type: I.INSERT }) ? (i.pushUndoRedo({
+      unitID: c,
+      undoMutations: [
+        { id: h.id, params: { op: m, unitId: c, subUnitId: d, objects: l, type: I.REMOVE } },
+        { id: S.id, params: a }
+      ],
+      redoMutations: [
+        { id: h.id, params: { op: u, unitId: c, subUnitId: d, objects: l, type: I.INSERT } },
+        { id: S.id, params: a }
+      ]
+    }), !0) : !1;
+  }
+};
+function F(e) {
+  return !e.getContextValue(Ke) && e.getContextValue(Y);
+}
+const qn = {
+  id: k.id,
+  description: "shortcut.doc.drawing-move-down",
+  group: "4_doc-drawing-view",
+  binding: A.ARROW_DOWN,
+  priority: 100,
+  preconditions: F,
+  staticParameters: {
+    direction: P.DOWN
+  }
+}, Yn = {
+  id: k.id,
+  description: "shortcut.doc.drawing-move-up",
+  group: "4_doc-drawing-view",
+  binding: A.ARROW_UP,
+  priority: 100,
+  preconditions: F,
+  staticParameters: {
+    direction: P.UP
+  }
+}, Qn = {
+  id: k.id,
+  description: "shortcut.doc.drawing-move-left",
+  group: "4_doc-drawing-view",
+  binding: A.ARROW_LEFT,
+  priority: 100,
+  preconditions: F,
+  staticParameters: {
+    direction: P.LEFT
+  }
+}, Xn = {
+  id: k.id,
+  description: "shortcut.doc.drawing-move-right",
+  group: "4_doc-drawing-view",
+  binding: A.ARROW_RIGHT,
+  priority: 100,
+  preconditions: F,
+  staticParameters: {
+    direction: P.RIGHT
+  }
+}, Jn = {
+  id: Le.id,
+  description: "shortcut.doc.drawing-delete",
+  group: "4_doc-drawing-view",
+  // when focusing on any other input tag do not trigger this shortcut
+  preconditions: F,
+  binding: A.DELETE,
+  mac: A.BACKSPACE
+};
+var et = (e, n, t, i) => {
+  for (var r = n, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = a(r) || r);
+  return r;
+}, W = (e, n) => (t, i) => n(t, i, e);
+let Z = class extends ve {
+  constructor(e, n, t, i, r) {
+    super(), this._injector = e, this._componentManager = n, this._menuService = t, this._commandService = i, this._shortcutService = r, this._init();
+  }
+  _initCustomComponents() {
+    const e = this._componentManager;
+    this.disposeWithMe(e.register(Ae, Te)), this.disposeWithMe(e.register(Ne, Pn)), this.disposeWithMe(e.register(Ee, Kn));
+  }
+  _initMenus() {
+    [
+      Rn,
+      bn
+    ].forEach((e) => {
+      this.disposeWithMe(this._menuService.addMenuItem(this._injector.invoke(e), {}));
+    });
+  }
+  _initCommands() {
+    [
+      J,
+      ke,
+      ae,
+      se,
+      Pe,
+      S,
+      Re,
+      We,
+      je,
+      k,
+      Le,
+      Ge
+    ].forEach((e) => this.disposeWithMe(this._commandService.registerCommand(e)));
+  }
+  _initShortcuts() {
+    [
+      // sheet drawing shortcuts
+      qn,
+      Yn,
+      Qn,
+      Xn,
+      Jn
+    ].forEach((e) => {
+      this.disposeWithMe(this._shortcutService.registerShortcut(e));
+    });
+  }
+  _init() {
+    this._initCommands(), this._initCustomComponents(), this._initMenus(), this._initShortcuts();
+  }
+};
+Z = et([
+  ie(re.Ready, Z),
+  W(0, R(_e)),
+  W(1, R(pn)),
+  W(2, fn),
+  W(3, _),
+  W(4, hn)
+], Z);
+var nt = (e, n, t, i) => {
+  for (var r = n, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = a(r) || r);
+  return r;
+}, D = (e, n) => (t, i) => n(t, i, e);
+let q = class extends ve {
+  constructor(e, n, t, i, r, o, a, s, c, d, m) {
+    super(), this._commandService = e, this._univerInstanceService = n, this._textSelectionManagerService = t, this._imageIoService = i, this._sheetDrawingService = r, this._drawingManagerService = o, this._contextService = a, this._messageService = s, this._localeService = c, this._docSkeletonManagerService = d, this._renderManagerService = m, this._init();
+  }
+  _init() {
+    this._initCommandListeners(), this._updateDrawingListener(), this._updateOrderListener(), this._groupDrawingListener(), this._focusDrawingListener();
+  }
+  /**
+   * Upload image to cell or float image
+   */
+  _initCommandListeners() {
+    this.disposeWithMe(
+      this._commandService.onCommandExecuted(async (e) => {
+        if (e.id === J.id) {
+          const n = e.params;
+          if (n.files == null)
+            return;
+          const t = n.files.length;
+          if (t > ue) {
+            this._messageService.show({
+              type: H.Error,
+              content: this._localeService.t("update-status.exceedMaxCount", String(ue))
+            });
+            return;
+          }
+          this._imageIoService.setWaitCount(t), n.files.forEach(async (i) => {
+            await this._insertFloatImage(i);
+          });
+        }
+      })
+    );
+  }
+  async _insertFloatImage(e) {
+    var U;
+    let n;
+    try {
+      n = await this._imageIoService.saveImage(e);
+    } catch (G) {
+      const T = G.message;
+      T === ne.ERROR_EXCEED_SIZE ? this._messageService.show({
+        type: H.Error,
+        content: this._localeService.t("update-status.exceedMaxSize", String(cn / (1024 * 1024)))
+      }) : T === ne.ERROR_IMAGE_TYPE ? this._messageService.show({
+        type: H.Error,
+        content: this._localeService.t("update-status.invalidImageType")
+      }) : T === ne.ERROR_IMAGE && this._messageService.show({
+        type: H.Error,
+        content: this._localeService.t("update-status.invalidImage")
+      });
+    }
+    if (n == null)
+      return;
+    const t = this._getUnitInfo();
+    if (t == null)
+      return;
+    const { unitId: i, subUnitId: r } = t, { imageId: o, imageSourceType: a, source: s, base64Cache: c } = n, { width: d, height: m, image: u } = await dn(c || ""), l = this._renderManagerService.getRenderById(i);
+    if (l == null)
+      return;
+    const { width: g, height: p } = l.scene;
+    this._imageIoService.addImageSourceCache(o, a, u);
+    let f = 1;
+    if (d > me || m > le) {
+      const G = me / d, T = le / m;
+      f = Math.max(G, T);
+    }
+    const v = this._getImagePosition(d * f, m * f, g, p);
+    if (v == null)
+      return;
+    const O = {
+      unitId: i,
+      subUnitId: r,
+      drawingId: o,
+      drawingType: oe.DRAWING_IMAGE,
+      imageSourceType: a,
+      source: s,
+      transform: de(v),
+      docTransform: v,
+      title: "",
+      description: "",
+      layoutType: ze.WRAP_SQUARE
+    };
+    this._commandService.executeCommand(ke.id, {
+      unitId: i,
+      drawings: [O]
+    }), (U = this._docSkeletonManagerService.getCurrent()) == null || U.skeleton.calculate();
+  }
+  _getUnitInfo() {
+    const e = this._univerInstanceService.getCurrentUnitForType(b.UNIVER_DOC);
+    if (e == null)
+      return;
+    const n = e.getUnitId();
+    return {
+      unitId: n,
+      subUnitId: n
+    };
+  }
+  _getImagePosition(e, n, t, i) {
+    const r = this._textSelectionManagerService.getActiveTextRange(), o = (r == null ? void 0 : r.getAbsolutePosition()) || {
+      left: 0,
+      top: 0
+    };
+    return {
+      size: {
+        width: e,
+        height: n
+      },
+      positionH: {
+        relativeFrom: Ze.MARGIN,
+        posOffset: o.left
+      },
+      positionV: {
+        relativeFrom: qe.PAGE,
+        posOffset: o.top
+      },
+      angle: 0
+    };
+  }
+  _updateOrderListener() {
+    this._drawingManagerService.featurePluginOrderUpdate$.subscribe((e) => {
+      const { unitId: n, subUnitId: t, drawingIds: i, arrangeType: r } = e;
+      this._commandService.executeCommand(Ge.id, {
+        unitId: n,
+        subUnitId: t,
+        drawingIds: i,
+        arrangeType: r
+      });
+    });
+  }
+  _updateDrawingListener() {
+    this._drawingManagerService.featurePluginUpdate$.subscribe((e) => {
+      const n = [];
+      e.length !== 0 && (e.forEach((t) => {
+        const { unitId: i, subUnitId: r, drawingId: o, drawingType: a, transform: s } = t;
+        if (s == null)
+          return;
+        const c = this._sheetDrawingService.getDrawingByParam({ unitId: i, subUnitId: r, drawingId: o });
+        if (c == null)
+          return;
+        const d = we({ ...c.transform, ...s });
+        if (d == null)
+          return;
+        const m = {
+          ...t,
+          transform: { ...s, ...de(d) },
+          docTransform: { ...d }
+        };
+        n.push(m);
+      }), n.length > 0 && (this._commandService.syncExecuteCommand(se.id, {
+        unitId: e[0].unitId,
+        drawings: n
+      }), this._refreshDocSkeleton()));
+    });
+  }
+  _getDocsOffsetInfo() {
+    const e = this._docSkeletonManagerService.getCurrent();
+    if (e == null)
+      return {
+        pageMarginCache: /* @__PURE__ */ new Map(),
+        docsLeft: 0,
+        docsTop: 0
+      };
+    const { unitId: n, skeleton: t } = e, i = this._renderManagerService.getRenderById(n), r = t == null ? void 0 : t.getSkeletonData();
+    if (i == null || !r)
+      return {
+        pageMarginCache: /* @__PURE__ */ new Map(),
+        docsLeft: 0,
+        docsTop: 0
+      };
+    const { mainComponent: o } = i, a = o, { left: s, top: c, pageLayoutType: d, pageMarginLeft: m, pageMarginTop: u } = a, { pages: l } = r, g = new Je(), p = /* @__PURE__ */ new Map();
+    for (let f = 0, v = l.length; f < v; f++) {
+      const O = l[f], { skeDrawings: U, marginLeft: G, marginTop: T } = O;
+      g.translatePagePadding(O), U.forEach((Fe) => {
+        const { aLeft: rt, aTop: ot, height: at, width: st, drawingId: Ve, drawingOrigin: ct } = Fe;
+        p.set(Ve, {
+          marginLeft: g.x,
+          marginTop: g.y
+        });
+      }), g.restorePagePadding(O), g.translatePage(O, d, m, u);
+    }
+    return { pageMarginCache: p, docsLeft: s, docsTop: c };
+  }
+  _refreshDocSkeleton() {
+    const e = this._docSkeletonManagerService.getCurrent();
+    if (e == null)
+      return;
+    const { unitId: n, skeleton: t } = e, i = this._renderManagerService.getRenderById(n);
+    if (i == null)
+      return;
+    const { mainComponent: r } = i;
+    t == null || t.calculate(), r == null || r.makeDirty();
+  }
+  _groupDrawingListener() {
+    this._drawingManagerService.featurePluginGroupUpdate$.subscribe((e) => {
+      this._commandService.executeCommand(We.id, e);
+    }), this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((e) => {
+      this._commandService.executeCommand(je.id, e);
+    });
+  }
+  _focusDrawingListener() {
+    this.disposeWithMe(
+      this._drawingManagerService.focus$.subscribe((e) => {
+        e == null || e.length === 0 ? (this._contextService.setContextValue(Y, !1), this._sheetDrawingService.focusDrawing([])) : (this._contextService.setContextValue(Y, !0), this._sheetDrawingService.focusDrawing(e));
+      })
+    );
+  }
+};
+q = nt([
+  ie(re.Rendered, q),
+  D(0, _),
+  D(1, he),
+  D(2, R(vn)),
+  D(3, un),
+  D(4, y),
+  D(5, L),
+  D(6, Ie),
+  D(7, In),
+  D(8, R(Q)),
+  D(9, R(_n)),
+  D(10, X)
+], q);
+var tt = (e, n, t, i) => {
+  for (var r = n, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (r = a(r) || r);
+  return r;
+}, pe = (e, n) => (t, i) => n(t, i, e);
+const it = "Docs_Drawing_UI_PLUGIN";
+var K;
+let fe = (K = class extends Ye {
+  constructor(e, n, t) {
+    super(), this._injector = n, this._localeService = t;
+  }
+  onStarting(e) {
+    this._initDependencies(e);
+  }
+  _initDependencies(e) {
+    [
+      // services
+      // controllers
+      [Z],
+      [q],
+      [z]
+    ].forEach((t) => e.add(t));
+  }
+}, V(K, "type", b.UNIVER_DOC), V(K, "pluginName", it), K);
+fe = tt([
+  pe(1, R(_e)),
+  pe(2, R(Q))
+], fe);
+export {
+  fe as UniverDocsDrawingUIPlugin
+};