import {
  h3,
  n1,
  o3
} from "./chunk-POAJ2YNP.js";
import {
  BO,
  Po,
  Xw,
  r_,
  sC,
  um
} from "./chunk-GBYP4PB2.js";
import {
  $,
  A1,
  Y,
  Y1,
  Yx,
  aS,
  aT,
  e7,
  ff,
  ie,
  p1,
  pe,
  pf,
  q3
} from "./chunk-2MK3Q52E.js";
import {
  Ut,
  bn,
  ln
} from "./chunk-QG2HZMYH.js";
import {
  Fe,
  Oa,
  Ot,
  Pt,
  Ra,
  S0,
  SE,
  Vr,
  W0,
  Ze,
  _n,
  ar,
  filter,
  fm,
  gm,
  iC,
  nt,
  nu,
  ot,
  re,
  switchMap,
  vl
} from "./chunk-23V3HWTR.js";
import {
  require_react
} from "./chunk-GNR2UJZM.js";
import {
  __toESM
} from "./chunk-2LSFTFF7.js";

// node_modules/.pnpm/@univerjs+drawing-ui@0.5.5_@grpc+grpc-js@1.13.4_react-dom@18.3.1_react@18.3.1_rxjs@7.8.1_typescript@5.4.5/node_modules/@univerjs/drawing-ui/lib/es/index.js
var import_react = __toESM(require_react());
var Tn = Object.defineProperty;
var Bn = (i, t, n) => t in i ? Tn(i, t, { enumerable: true, configurable: true, writable: true, value: n }) : i[t] = n;
var Q = (i, t, n) => Bn(i, typeof t != "symbol" ? t + "" : t, n);
function et(i, t, n, e) {
  const r = e.getDrawingByParam(i);
  if (r == null)
    return;
  const s = bn(i), a = n.getObject(s);
  if (a && !(a instanceof e7))
    return;
  if (a != null) {
    a.addObject(t);
    return;
  }
  const o = new e7(s);
  n.addObject(o, aS).attachTransformerTo(o), o.addObject(t);
  const { transform: c } = r;
  c && o.transformByState(
    {
      left: c.left,
      top: c.top,
      angle: c.angle
    }
  );
}
function hn(i, t) {
  var s;
  const n = t ? i.getUnit(t) : i.getFocusedUnit();
  if (n == null)
    return;
  const e = n.getUnitId();
  let r;
  return n.type === Fe.UNIVER_SHEET ? r = (s = n.getActiveSheet()) == null ? void 0 : s.getSheetId() : (n.type === Fe.UNIVER_DOC || n.type === Fe.UNIVER_SLIDE) && (r = e), { unitId: e, subUnitId: r, current: n };
}
var fn = "COMPONENT_IMAGE_VIEWER";
var nt2 = Object.defineProperty;
var tt = Object.getOwnPropertyDescriptor;
var rt = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? tt(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && nt2(t, n, r), r;
};
var $e = (i, t) => (n, e) => t(n, e, i);
var nn = 50;
var De = class {
  constructor(i, t, n) {
    this._drawingManagerService = i, this._imageIoService = t, this._dialogService = n;
  }
  // eslint-disable-next-line max-lines-per-function
  async renderImages(i, t) {
    const {
      transform: n,
      drawingType: e,
      source: r,
      imageSourceType: s,
      srcRect: a,
      prstGeom: o,
      groupId: c,
      unitId: g,
      subUnitId: m,
      drawingId: d,
      isMultiTransform: h,
      transforms: f
    } = i;
    if (e !== gm.DRAWING_IMAGE || !this._drawingManagerService.getDrawingVisible() || n == null)
      return;
    const _ = h && f ? f : [n], w = [];
    for (const p of _) {
      const { left: S, top: v, width: j, height: b, angle: N, flipX: P, flipY: I, skewX: y, skewY: x } = p, D = _.indexOf(p), B = bn({ unitId: g, subUnitId: m, drawingId: d }, h ? D : void 0), E = t.getObject(B);
      if (E != null) {
        E.transformByState({ left: S, top: v, width: j, height: b, angle: N, flipX: P, flipY: I, skewX: y, skewY: x });
        continue;
      }
      const re2 = this._drawingManagerService.getDrawingOrder(g, m), W = re2.indexOf(d), q = { ...p, zIndex: W === -1 ? re2.length - 1 : W }, be = this._imageIoService.getImageSourceCache(r, s);
      let ie2 = false;
      if (be != null)
        q.image = be;
      else {
        if (s === vl.UUID)
          try {
            q.url = await this._imageIoService.getImage(r);
          } catch (Ge) {
            console.error(Ge);
            continue;
          }
        else
          q.url = r;
        ie2 = true;
      }
      if (t.getObject(B))
        continue;
      q.printable = true;
      const k = new aT(B, q);
      ie2 && this._imageIoService.addImageSourceCache(r, s, k.getNative()), this._drawingManagerService.getDrawingVisible() && (t.addObject(k, aS), this._drawingManagerService.getDrawingEditable() && t.attachTransformerTo(k), c && et({ drawingId: c, unitId: g, subUnitId: m }, k, t, this._drawingManagerService), o != null && k.setPrstGeom(o), a != null && k.setSrcRect(a), w.push(k));
    }
    return w;
  }
  renderDrawing(i, t) {
    const n = this._drawingManagerService.getDrawingByParam(i);
    if (n != null)
      switch (n.drawingType) {
        case gm.DRAWING_IMAGE:
          return this.renderImages(n, t);
      }
  }
  previewImage(i, t, n, e) {
    const r = `${i}-viewer-dialog`, s = window.innerWidth - nn, a = window.innerHeight - nn, o = this._adjustImageSize(n, e, s, a), c = this._dialogService.open({
      width: Math.max(o.width, 200),
      id: r,
      style: { margin: "0", top: "50%", left: "50%", transform: "translate(-50%, -50%)" },
      children: {
        label: {
          name: fn,
          props: {
            src: t,
            width: o.width,
            height: o.height
          }
        }
      },
      destroyOnClose: true,
      draggable: false,
      onClose: () => {
        this._dialogService.close(r), c.dispose();
      }
    });
  }
  _adjustImageSize(i, t, n, e) {
    if (i <= n && t <= e)
      return {
        width: i,
        height: t
      };
    const r = n / i, s = e / t, a = Math.min(r, s);
    return {
      width: Math.floor(i * a),
      height: Math.floor(t * a)
    };
  }
};
De = rt([
  $e(0, Ut),
  $e(1, Oa),
  $e(2, h3)
], De);
function Ve(i, t) {
  const n = [];
  return i.forEach((e) => {
    const { oKey: r, left: s, top: a, height: o, width: c, angle: g } = e, m = t.getDrawingOKey(r);
    if (m == null)
      return n.push(null), true;
    const { unitId: d, subUnitId: h, drawingId: f, drawingType: _ } = m, w = {
      unitId: d,
      subUnitId: h,
      drawingId: f,
      drawingType: _,
      transform: {
        left: s,
        top: a,
        height: o,
        width: c,
        angle: g
      }
    };
    _ === gm.DRAWING_IMAGE && (w.srcRect = e.srcRect), n.push(w);
  }), n;
}
var ke = { exports: {} };
var pe2 = {};
var tn;
function it() {
  if (tn)
    return pe2;
  tn = 1;
  var i = import_react.default, t = Symbol.for("react.element"), n = Symbol.for("react.fragment"), e = Object.prototype.hasOwnProperty, r = i.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, s = { key: true, ref: true, __self: true, __source: true };
  function a(o, c, g) {
    var m, d = {}, h = null, f = null;
    g !== void 0 && (h = "" + g), c.key !== void 0 && (h = "" + c.key), c.ref !== void 0 && (f = c.ref);
    for (m in c)
      e.call(c, m) && !s.hasOwnProperty(m) && (d[m] = c[m]);
    if (o && o.defaultProps)
      for (m in c = o.defaultProps, c)
        d[m] === void 0 && (d[m] = c[m]);
    return { $$typeof: t, type: o, key: h, ref: f, props: d, _owner: r.current };
  }
  return pe2.Fragment = n, pe2.jsx = a, pe2.jsxs = a, pe2;
}
var rn;
function at() {
  return rn || (rn = 1, ke.exports = it()), ke.exports;
}
var l = at();
function pn(i) {
  var t, n, e = "";
  if (typeof i == "string" || typeof i == "number")
    e += i;
  else if (typeof i == "object")
    if (Array.isArray(i)) {
      var r = i.length;
      for (t = 0; t < r; t++)
        i[t] && (n = pn(i[t])) && (e && (e += " "), e += n);
    } else
      for (n in i)
        i[n] && (e && (e += " "), e += n);
  return e;
}
function O() {
  for (var i, t, n = 0, e = "", r = arguments.length; n < r; n++)
    (i = arguments[n]) && (t = pn(i)) && (e && (e += " "), e += t);
  return e;
}
var R = ((i) => (i.default = "0", i.left = "1", i.center = "2", i.right = "3", i.top = "4", i.middle = "5", i.bottom = "6", i.horizon = "7", i.vertical = "8", i))(R || {});
var Xe = {
  id: "sheet.operation.set-image-align",
  type: ar.OPERATION,
  handler: (i, t) => true
};
var st = "univer-image-common-panel";
var ot2 = "univer-image-common-panel-grid";
var ct = "univer-image-common-panel-border";
var lt = "univer-image-common-panel-title";
var mt = "univer-image-common-panel-subtitle";
var gt = "univer-image-common-panel-row";
var ut = "univer-image-common-panel-row-vertical";
var dt = "univer-image-common-panel-column";
var ht = "univer-image-common-panel-column-center";
var ft = "univer-image-common-panel-inline";
var pt = "univer-image-common-panel-span2";
var Ct = "univer-image-common-panel-span3";
var wt = "univer-image-common-panel-input";
var u = {
  imageCommonPanel: st,
  imageCommonPanelGrid: ot2,
  imageCommonPanelBorder: ct,
  imageCommonPanelTitle: lt,
  imageCommonPanelSubtitle: mt,
  imageCommonPanelRow: gt,
  imageCommonPanelRowVertical: ut,
  imageCommonPanelColumn: dt,
  imageCommonPanelColumnCenter: ht,
  imageCommonPanelInline: ft,
  imageCommonPanelSpan2: pt,
  imageCommonPanelSpan3: Ct,
  imageCommonPanelInput: wt
};
var _t = (i) => {
  const t = W0(Pt), n = W0(Vr), { alignShow: e } = i, [r, s] = (0, import_react.useState)(R.default), a = [
    {
      label: n.t("image-panel.align.default"),
      value: R.default
    },
    {
      options: [
        {
          label: n.t("image-panel.align.left"),
          value: R.left
        },
        {
          label: n.t("image-panel.align.center"),
          value: R.center
        },
        {
          label: n.t("image-panel.align.right"),
          value: R.right
        }
      ]
    },
    {
      options: [
        {
          label: n.t("image-panel.align.top"),
          value: R.top
        },
        {
          label: n.t("image-panel.align.middle"),
          value: R.middle
        },
        {
          label: n.t("image-panel.align.bottom"),
          value: R.bottom
        }
      ]
    },
    {
      options: [
        {
          label: n.t("image-panel.align.horizon"),
          value: R.horizon
        },
        {
          label: n.t("image-panel.align.vertical"),
          value: R.vertical
        }
      ]
    }
  ];
  function o(g) {
    s(g), t.executeCommand(Xe.id, {
      alignType: g
    });
  }
  const c = (g) => g ? "block" : "none";
  return l.jsxs("div", { className: O(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: c(e) }, children: [
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: l.jsx("div", { children: n.t("image-panel.align.title") }) }) }),
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn), children: l.jsx(r_, { value: r, options: a, onChange: o }) }) })
  ] });
};
var $2 = function() {
  return $2 = Object.assign || function(i) {
    for (var t, n = 1, e = arguments.length; n < e; n++) {
      t = arguments[n];
      for (var r in t)
        Object.prototype.hasOwnProperty.call(t, r) && (i[r] = t[r]);
    }
    return i;
  }, $2.apply(this, arguments);
};
var vt = function(i, t) {
  var n = {};
  for (var e in i)
    Object.prototype.hasOwnProperty.call(i, e) && t.indexOf(e) < 0 && (n[e] = i[e]);
  if (i != null && typeof Object.getOwnPropertySymbols == "function")
    for (var r = 0, e = Object.getOwnPropertySymbols(i); r < e.length; r++)
      t.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(i, e[r]) && (n[e[r]] = i[e[r]]);
  return n;
};
var X = (0, import_react.forwardRef)(function(i, t) {
  var n = i.icon, e = i.id, r = i.className, s = i.extend, a = vt(i, ["icon", "id", "className", "extend"]), o = "univerjs-icon univerjs-icon-".concat(e, " ").concat(r || "").trim(), c = (0, import_react.useRef)("_".concat(It()));
  return Cn(n, "".concat(e), { defIds: n.defIds, idSuffix: c.current }, $2({ ref: t, className: o }, a), s);
});
function Cn(i, t, n, e, r) {
  return (0, import_react.createElement)(i.tag, $2($2({ key: t }, St(i, n, r)), e), (bt(i, n).children || []).map(function(s, a) {
    return Cn(s, "".concat(t, "-").concat(i.tag, "-").concat(a), n, void 0, r);
  }));
}
function St(i, t, n) {
  var e = $2({}, i.attrs);
  n != null && n.colorChannel1 && e.fill === "colorChannel1" && (e.fill = n.colorChannel1);
  var r = t.defIds;
  return !r || r.length === 0 || (i.tag === "use" && e["xlink:href"] && (e["xlink:href"] = e["xlink:href"] + t.idSuffix), Object.entries(e).forEach(function(s) {
    var a = s[0], o = s[1];
    typeof o == "string" && (e[a] = o.replace(/url\(#(.*)\)/, "url(#$1".concat(t.idSuffix, ")")));
  })), e;
}
function bt(i, t) {
  var n, e = t.defIds;
  return !e || e.length === 0 ? i : i.tag === "defs" && (!((n = i.children) === null || n === void 0) && n.length) ? $2($2({}, i), { children: i.children.map(function(r) {
    return typeof r.attrs.id == "string" && e && e.indexOf(r.attrs.id) > -1 ? $2($2({}, r), { attrs: $2($2({}, r.attrs), { id: r.attrs.id + t.idSuffix }) }) : r;
  }) }) : i;
}
function It() {
  return Math.random().toString(36).substring(2, 8);
}
X.displayName = "UniverIcon";
var Pt2 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "colorChannel1", d: "M11.0363 12.2367V14.0367C11.0363 14.3681 11.3049 14.6367 11.6363 14.6367C11.9676 14.6367 12.2363 14.3681 12.2363 14.0367V12.2367H14.0364C14.3677 12.2367 14.6364 11.9681 14.6364 11.6367C14.6364 11.3054 14.3677 11.0367 14.0364 11.0367H12.2363V9.23672C12.2363 8.90535 11.9676 8.63672 11.6363 8.63672C11.3049 8.63672 11.0363 8.90535 11.0363 9.23672V11.0367H9.23635C8.90498 11.0367 8.63635 11.3054 8.63635 11.6367C8.63635 11.9681 8.90498 12.2367 9.23635 12.2367H11.0363Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.56365 1.36377C1.90091 1.36377 1.36365 1.90103 1.36365 2.56377V6.16377C1.36365 6.82651 1.90091 7.36377 2.56365 7.36377H6.16365C6.82639 7.36377 7.36365 6.82651 7.36365 6.16377V2.56377C7.36365 1.90103 6.82639 1.36377 6.16365 1.36377H2.56365zM6.16365 2.56377H2.56365L2.56365 6.16377H6.16365V2.56377zM2.56365 8.63647C1.90091 8.63647 1.36365 9.17373 1.36365 9.83647V13.4365C1.36365 14.0992 1.90091 14.6365 2.56365 14.6365H6.16365C6.82639 14.6365 7.36365 14.0992 7.36365 13.4365V9.83647C7.36365 9.17373 6.82639 8.63647 6.16365 8.63647H2.56365zM6.16365 9.83647H2.56365L2.56365 13.4365H6.16365V9.83647zM9.83635 7.36377C9.17361 7.36377 8.63635 6.82651 8.63635 6.16377V2.56377C8.63635 1.90103 9.17361 1.36377 9.83635 1.36377H13.4364C14.0991 1.36377 14.6364 1.90103 14.6364 2.56377V6.16377C14.6364 6.82651 14.0991 7.36377 13.4364 7.36377H9.83635zM9.83635 6.16377V2.56377L13.4364 2.56377V6.16377H9.83635z", fillRule: "evenodd", clipRule: "evenodd" } }] };
var wn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "autofill",
    ref: t,
    icon: Pt2
  }));
});
wn.displayName = "Autofill";
var yt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M14.0045 4.4334C14.8881 4.4334 15.6045 3.71705 15.6045 2.8334 15.6045 1.94974 14.8881 1.2334 14.0045 1.2334H3.70449C2.82084 1.2334 2.10449 1.94974 2.10449 2.8334 2.10449 3.71705 2.82084 4.4334 3.70449 4.4334H14.0045zM14.4045 2.8334C14.4045 3.05431 14.2254 3.2334 14.0045 3.2334H3.70449C3.48358 3.2334 3.30449 3.05431 3.30449 2.8334 3.30449 2.61248 3.48358 2.4334 3.70449 2.4334H14.0045C14.2254 2.4334 14.4045 2.61249 14.4045 2.8334zM14.1544 8.5999C15.038 8.5999 15.7544 7.88356 15.7544 6.9999 15.7544 6.11625 15.038 5.3999 14.1544 5.3999H3.85439C2.97074 5.3999 2.25439 6.11625 2.25439 6.9999 2.25439 7.88356 2.97074 8.5999 3.85439 8.5999H14.1544zM14.5544 6.9999C14.5544 7.22082 14.3753 7.3999 14.1544 7.3999H3.85439C3.63348 7.3999 3.45439 7.22082 3.45439 6.9999 3.45439 6.77899 3.63348 6.5999 3.85439 6.5999H14.1544C14.3753 6.5999 14.5544 6.77899 14.5544 6.9999z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M8.57975 14.5902L6.58023 12.5907C6.34591 12.3564 6.34591 11.9765 6.58023 11.7421 6.81454 11.5078 7.19444 11.5078 7.42876 11.7421L8.40449 12.7179V10.1664C8.40449 9.83504 8.67312 9.56641 9.00449 9.56641 9.33586 9.56641 9.60449 9.83504 9.60449 10.1664V12.7179L10.5802 11.7421C10.8145 11.5078 11.1944 11.5078 11.4288 11.7421 11.6631 11.9765 11.6631 12.3564 11.4288 12.5907L9.42923 14.5902M8.57975 14.5902C8.58121 14.5917 8.58268 14.5931 8.58416 14.5946 8.64077 14.6502 8.70566 14.6923 8.77482 14.7209 8.84557 14.7502 8.92314 14.7664 9.00449 14.7664 9.08585 14.7664 9.16342 14.7502 9.23416 14.7209 9.30332 14.6923 9.36821 14.6502 9.42482 14.5946" } }] };
var _n2 = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "bottom-single",
    ref: t,
    icon: yt
  }));
});
_n2.displayName = "BottomSingle";
var Rt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M5.97705 7.51296C5.97705 7.18159 6.24568 6.91296 6.57705 6.91296H8.48632C8.81769 6.91296 9.08632 7.18159 9.08632 7.51296 9.08632 7.84433 8.81769 8.11296 8.48632 8.11296H6.57705C6.24568 8.11296 5.97705 7.84433 5.97705 7.51296zM6.57705 9.41028C6.24568 9.41028 5.97705 9.67891 5.97705 10.0103 5.97705 10.3416 6.24568 10.6103 6.57705 10.6103H10.8199C11.1512 10.6103 11.4199 10.3416 11.4199 10.0103 11.4199 9.67891 11.1512 9.41028 10.8199 9.41028H6.57705z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M3.51074 2.37063C3.51074 1.48697 4.22709 0.77063 5.11074 0.77063H9.80318L9.81294 0.770708C9.97168 0.768161 10.1311 0.82824 10.2511 0.95055L14.4317 5.21408C14.5165 5.30049 14.5697 5.406 14.5917 5.51645C14.6041 5.5644 14.6106 5.61467 14.6106 5.66648V11.6406C14.6106 12.5243 13.8943 13.2406 13.0106 13.2406H5.11074C4.22709 13.2406 3.51074 12.5243 3.51074 11.6406V2.37063ZM10.4032 4.66648V2.81964L12.6063 5.06648H10.8032C10.5823 5.06648 10.4032 4.88739 10.4032 4.66648ZM5.11074 1.97063C4.88983 1.97063 4.71074 2.14972 4.71074 2.37063V11.6406C4.71074 11.8615 4.88983 12.0406 5.11074 12.0406H13.0106C13.2316 12.0406 13.4106 11.8615 13.4106 11.6406V6.26648H10.8032C9.91953 6.26648 9.20318 5.55013 9.20318 4.66648V1.97063H5.11074Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M2.58916 6.6741C2.58916 6.34273 2.32053 6.0741 1.98916 6.0741C1.65779 6.0741 1.38916 6.34273 1.38916 6.6741V12.6294C1.38916 14.0653 2.55322 15.2294 3.98916 15.2294H9.41408C9.74545 15.2294 10.0141 14.9607 10.0141 14.6294C10.0141 14.298 9.74545 14.0294 9.41408 14.0294H3.98916C3.21596 14.0294 2.58916 13.4026 2.58916 12.6294V6.6741Z" } }] };
var vn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "create-copy-single",
    ref: t,
    icon: Rt
  }));
});
vn.displayName = "CreateCopySingle";
var jt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.38125 1.16211C6.49759 1.16211 5.78125 1.87845 5.78125 2.76211V5.6377H2.87783C1.99418 5.6377 1.27783 6.35404 1.27783 7.2377V13.2377C1.27783 14.1214 1.99418 14.8377 2.87783 14.8377H8.87783C9.76149 14.8377 10.4778 14.1214 10.4778 13.2377V10.3621H13.3813C14.2649 10.3621 14.9813 9.64577 14.9813 8.76211V2.76211C14.9813 1.87845 14.2649 1.16211 13.3813 1.16211H7.38125ZM10.4778 9.16211H13.3813C13.6022 9.16211 13.7812 8.98302 13.7812 8.76211V2.76211C13.7812 2.5412 13.6022 2.36211 13.3813 2.36211H7.38125C7.16034 2.36211 6.98125 2.5412 6.98125 2.76211V5.6377H8.87783C9.76149 5.6377 10.4778 6.35404 10.4778 7.2377V9.16211ZM6.98125 6.8377H8.87783C9.09875 6.8377 9.27783 7.01678 9.27783 7.2377V9.16211H7.38125C7.16034 9.16211 6.98125 8.98302 6.98125 8.76211V6.8377ZM5.78125 6.8377V8.76211C5.78125 9.64577 6.49759 10.3621 7.38125 10.3621H9.27783V13.2377C9.27783 13.4586 9.09875 13.6377 8.87783 13.6377H2.87783C2.65692 13.6377 2.47783 13.4586 2.47783 13.2377V7.2377C2.47783 7.01678 2.65692 6.8377 2.87783 6.8377H5.78125Z", fillRule: "evenodd", clipRule: "evenodd" } }] };
var Sn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "group-single",
    ref: t,
    icon: jt
  }));
});
Sn.displayName = "GroupSingle";
var xt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M11.3536 6.14645C11.5488 6.34171 11.5488 6.65829 11.3536 6.85355L8.35355 9.85355C8.15829 10.0488 7.84171 10.0488 7.64645 9.85355L4.64645 6.85355C4.45118 6.65829 4.45118 6.34171 4.64645 6.14645C4.84171 5.95118 5.15829 5.95118 5.35355 6.14645L8 8.79289L10.6464 6.14645C10.8417 5.95118 11.1583 5.95118 11.3536 6.14645Z", fillRule: "evenodd", clipRule: "evenodd" } }] };
var bn2 = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "more-down-single",
    ref: t,
    icon: xt
  }));
});
bn2.displayName = "MoreDownSingle";
var Mt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 2.96401C1.25 3.84767 1.96634 4.56401 2.85 4.56401H13.15C14.0337 4.56401 14.75 3.84767 14.75 2.96401C14.75 2.08036 14.0337 1.36401 13.15 1.36401H2.85C1.96635 1.36401 1.25 2.08036 1.25 2.96401ZM2.85 3.36401C2.62909 3.36401 2.45 3.18493 2.45 2.96401C2.45 2.7431 2.62909 2.56401 2.85 2.56401H13.15C13.3709 2.56401 13.55 2.7431 13.55 2.96401C13.55 3.18493 13.3709 3.36401 13.15 3.36401H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 11.6118C5.80995 11.3774 6.18985 11.3774 6.42417 11.6118L7.3999 12.5875V6.36951C7.3999 6.03814 7.66853 5.76951 7.9999 5.76951C8.33127 5.76951 8.5999 6.03814 8.5999 6.36951V12.5875L9.57564 11.6118C9.80995 11.3774 10.1899 11.3774 10.4242 11.6118C10.6585 11.8461 10.6585 12.226 10.4242 12.4603L8.4324 14.452C8.32324 14.5655 8.16982 14.6362 7.9999 14.6362C7.82998 14.6362 7.67655 14.5655 7.56739 14.452L5.57564 12.4603C5.34132 12.226 5.34132 11.8461 5.57564 11.6118Z" } }] };
var In = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "move-down-single",
    ref: t,
    icon: Mt
  }));
});
In.displayName = "MoveDownSingle";
var Ot2 = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 16 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M1.25 13.036C1.25 12.1523 1.96634 11.436 2.85 11.436H13.15C14.0337 11.436 14.75 12.1523 14.75 13.036C14.75 13.9196 14.0337 14.636 13.15 14.636H2.85C1.96635 14.636 1.25 13.9196 1.25 13.036ZM2.85 12.636C2.62909 12.636 2.45 12.8151 2.45 13.036C2.45 13.2569 2.62909 13.436 2.85 13.436H13.15C13.3709 13.436 13.55 13.2569 13.55 13.036C13.55 12.8151 13.3709 12.636 13.15 12.636H2.85Z", fillRule: "evenodd", clipRule: "evenodd" } }, { tag: "path", attrs: { fill: "currentColor", d: "M5.57564 4.38825C5.80995 4.62256 6.18985 4.62256 6.42417 4.38825L7.3999 3.41251V9.63049C7.3999 9.96186 7.66853 10.2305 7.9999 10.2305C8.33127 10.2305 8.5999 9.96186 8.5999 9.63049V3.41251L9.57564 4.38825C9.80995 4.62256 10.1899 4.62256 10.4242 4.38825C10.6585 4.15393 10.6585 3.77403 10.4242 3.53972L8.4324 1.54796C8.32324 1.43445 8.16982 1.36382 7.9999 1.36382C7.82998 1.36382 7.67655 1.43446 7.56739 1.54797L5.57564 3.53972C5.34132 3.77403 5.34132 4.15393 5.57564 4.38825Z" } }] };
var Pn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "move-up-single",
    ref: t,
    icon: Ot2
  }));
});
Pn.displayName = "MoveUpSingle";
var Nt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.82994 1.40913C7.88746 1.35161 7.95376 1.30821 8.02453 1.27893C8.09527 1.24959 8.17285 1.2334 8.2542 1.2334C8.33555 1.2334 8.41313 1.24959 8.48387 1.27893C8.55464 1.30821 8.62094 1.35161 8.67846 1.40913L10.6785 3.40913C10.9128 3.64345 10.9128 4.02335 10.6785 4.25766C10.4441 4.49198 10.0642 4.49198 9.82994 4.25766L8.8542 3.28193V5.8334C8.8542 6.16477 8.58557 6.4334 8.2542 6.4334C7.92283 6.4334 7.6542 6.16477 7.6542 5.8334V3.28193L6.67846 4.25766C6.44415 4.49198 6.06425 4.49198 5.82994 4.25766C5.59562 4.02335 5.59562 3.64345 5.82994 3.40913L7.82994 1.40913Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M1.50439 9C1.50439 8.11634 2.22074 7.4 3.10439 7.4H13.4044C14.288 7.4 15.0044 8.11634 15.0044 9 15.0044 9.88366 14.2881 10.6 13.4044 10.6H3.1044C2.22074 10.6 1.50439 9.88366 1.50439 9zM3.10439 8.6C2.88348 8.6 2.70439 8.77909 2.70439 9 2.70439 9.22091 2.88348 9.4 3.1044 9.4H13.4044C13.6253 9.4 13.8044 9.22091 13.8044 9 13.8044 8.77909 13.6253 8.6 13.4044 8.6H3.10439zM1.6543 13.1665C1.6543 12.2828 2.37064 11.5665 3.2543 11.5665H13.5543C14.438 11.5665 15.1543 12.2828 15.1543 13.1665 15.1543 14.0502 14.438 14.7665 13.5543 14.7665H3.2543C2.37064 14.7665 1.6543 14.0502 1.6543 13.1665zM3.2543 12.7665C3.03338 12.7665 2.8543 12.9456 2.8543 13.1665 2.8543 13.3874 3.03338 13.5665 3.2543 13.5665H13.5543C13.7752 13.5665 13.9543 13.3874 13.9543 13.1665 13.9543 12.9456 13.7752 12.7665 13.5543 12.7665H3.2543z", fillRule: "evenodd", clipRule: "evenodd" } }] };
var yn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "topmost-single",
    ref: t,
    icon: Nt
  }));
});
yn.displayName = "TopmostSingle";
var Dt = { tag: "svg", attrs: { fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M7.46855 2.83731C7.46855 2.61639 7.64764 2.4373 7.86855 2.4373H13.8603C14.0812 2.4373 14.2603 2.61639 14.2603 2.8373V9.5049C14.2603 9.72581 14.0812 9.90489 13.8603 9.90489H12.866C12.5346 9.90489 12.266 10.1735 12.266 10.5049C12.266 10.8363 12.5346 11.1049 12.866 11.1049H13.8603C14.7439 11.1049 15.4603 10.3886 15.4603 9.5049V2.8373C15.4603 1.95365 14.7439 1.2373 13.8603 1.2373H7.86855C6.9849 1.2373 6.26855 1.95365 6.26855 2.83731V3.48688C6.26855 3.81825 6.53718 4.08688 6.86855 4.08688C7.19993 4.08688 7.46855 3.81825 7.46855 3.48688V2.83731Z" } }, { tag: "path", attrs: { fill: "currentColor", d: "M3.19888 5.56299C2.31522 5.56299 1.59888 6.27933 1.59888 7.16299V13.163C1.59888 14.0466 2.31522 14.763 3.19888 14.763H9.19888C10.0825 14.763 10.7989 14.0466 10.7989 13.163V7.16299C10.7989 6.27933 10.0825 5.56299 9.19888 5.56299H3.19888ZM2.79888 7.16299C2.79888 6.94207 2.97796 6.76299 3.19888 6.76299H9.19888C9.41979 6.76299 9.59888 6.94207 9.59888 7.16299V13.163C9.59888 13.3839 9.41979 13.563 9.19888 13.563H3.19888C2.97796 13.563 2.79888 13.3839 2.79888 13.163V7.16299Z", fillRule: "evenodd", clipRule: "evenodd" } }] };
var Rn = (0, import_react.forwardRef)(function(i, t) {
  return (0, import_react.createElement)(X, Object.assign({}, i, {
    id: "ungroup-single",
    ref: t,
    icon: Dt
  }));
});
Rn.displayName = "UngroupSingle";
var Et = (i) => {
  const { arrangeShow: t, drawings: n } = i, e = W0(Vr), r = W0(Ut), s = (g) => g ? "block" : "none", [a, o] = (0, import_react.useState)(n);
  (0, import_react.useEffect)(() => {
    const g = r.focus$.subscribe((m) => {
      o(m);
    });
    return () => {
      g.unsubscribe();
    };
  }, []);
  const c = (g) => {
    const m = a[0].unitId, d = a[0].subUnitId, h = a.map((f) => f.drawingId);
    r.featurePluginOrderUpdateNotification({ unitId: m, subUnitId: d, drawingIds: h, arrangeType: g });
  };
  return l.jsxs("div", { className: u.imageCommonPanelGrid, style: { display: s(t) }, children: [
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: l.jsx("div", { children: e.t("image-panel.arrange.title") }) }) }),
    l.jsxs("div", { className: u.imageCommonPanelRow, children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(Po, { size: "small", onClick: () => {
        c(fm.forward);
      }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(Pn, {}),
        e.t("image-panel.arrange.forward")
      ] }) }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(Po, { size: "small", onClick: () => {
        c(fm.backward);
      }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(In, {}),
        e.t("image-panel.arrange.backward")
      ] }) }) })
    ] }),
    l.jsxs("div", { className: u.imageCommonPanelRow, children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(Po, { size: "small", onClick: () => {
        c(fm.front);
      }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(yn, {}),
        e.t("image-panel.arrange.front")
      ] }) }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(Po, { size: "small", onClick: () => {
        c(fm.back);
      }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(_n2, {}),
        e.t("image-panel.arrange.back")
      ] }) }) })
    ] })
  ] });
};
var Tt = (i) => {
  const t = W0(Vr), n = W0(Yx), e = W0(Ut), { hasGroup: r, drawings: s } = i, [a, o] = (0, import_react.useState)(false), [c, g] = (0, import_react.useState)(true), [m, d] = (0, import_react.useState)(true), h = (p) => p ? "block" : "none", f = () => {
    const p = e.getFocusDrawings(), { unitId: S, subUnitId: v } = p[0], j = re.generateRandomId(10), b = pf(0, 0, p.map((I) => I.transform || {})), N = {
      unitId: S,
      subUnitId: v,
      drawingId: j,
      drawingType: gm.DRAWING_GROUP,
      transform: b
    }, P = p.map((I) => {
      const y = I.transform || { left: 0, top: 0 }, { unitId: x, subUnitId: D, drawingId: B } = I;
      return {
        unitId: x,
        subUnitId: D,
        drawingId: B,
        transform: {
          ...y,
          left: y.left - b.left,
          top: y.top - b.top
        },
        groupId: j
      };
    });
    e.featurePluginGroupUpdateNotification([{
      parent: N,
      children: P
    }]);
  }, _ = (p) => {
    if (p.drawingType !== gm.DRAWING_GROUP)
      return;
    const { unitId: S, subUnitId: v, drawingId: j, transform: b = { width: 0, height: 0 } } = p;
    if (b == null)
      return;
    const N = e.getDrawingsByGroup({ unitId: S, subUnitId: v, drawingId: j });
    if (N.length === 0)
      return;
    const P = N.map((I) => {
      const { transform: y } = I, { unitId: x, subUnitId: D, drawingId: B } = I, E = ff(y || {}, b, b.width || 0, b.height || 0);
      return {
        unitId: x,
        subUnitId: D,
        drawingId: B,
        transform: {
          ...y,
          ...E
        },
        groupId: void 0
      };
    });
    return {
      parent: p,
      children: P
    };
  }, w = () => {
    const S = e.getFocusDrawings().map(
      (v) => _(v)
    ).filter((v) => v != null);
    S.length !== 0 && e.featurePluginUngroupUpdateNotification(S);
  };
  return (0, import_react.useEffect)(() => {
    const p = s[0];
    if (p == null)
      return;
    const { unitId: S } = p, v = n.getRenderById(S), j = v == null ? void 0 : v.scene;
    if (j == null)
      return;
    const b = j.getTransformerByCreate(), N = b.clearControl$.subscribe((I) => {
      I === true && o(false);
    }), P = b.changeStart$.subscribe((I) => {
      const { objects: y } = I, x = Ve(y, e), D = x.filter((W) => (W == null ? void 0 : W.drawingType) === gm.DRAWING_GROUP);
      let B = false, E = false;
      x.length > 1 && (B = true), D.length > 0 && (E = true), o(B || E), g(B), d(E);
    });
    return () => {
      P.unsubscribe(), N.unsubscribe();
    };
  }, []), l.jsxs("div", { className: O(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: h(r === true ? a : false) }, children: [
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: l.jsx("div", { children: t.t("image-panel.group.title") }) }) }),
    l.jsxs("div", { className: u.imageCommonPanelRow, children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2, u.imageCommonPanelColumnCenter), children: l.jsx(Po, { size: "small", onClick: () => {
        f();
      }, style: { display: h(c) }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(Sn, {}),
        t.t("image-panel.group.group")
      ] }) }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2, u.imageCommonPanelColumnCenter), children: l.jsx(Po, { size: "small", onClick: () => {
        w();
      }, style: { display: h(m) }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(Rn, {}),
        t.t("image-panel.group.unGroup")
      ] }) }) })
    ] })
  ] });
};
var se = 20;
var Bt = 20;
var Ut2 = [-3600, 3600];
var Re = 300;
var At = (i) => {
  var qe;
  const t = W0(Vr), n = W0(Ut), e = W0(Yx), { drawings: r, transformShow: s } = i, a = r[0];
  if (a == null)
    return;
  const o = a.transform;
  if (o == null)
    return;
  const { unitId: c, subUnitId: g, drawingId: m, drawingType: d } = a, h = e.getRenderById(c), f = h == null ? void 0 : h.scene;
  if (f == null)
    return;
  const _ = (qe = f.getEngine()) == null ? void 0 : qe.activeScene;
  if (_ == null)
    return;
  const w = f.getTransformerByCreate(), {
    width: p = 0,
    height: S = 0,
    left: v = 0,
    top: j = 0,
    angle: b = 0
  } = o, [N, P] = (0, import_react.useState)(p), [I, y] = (0, import_react.useState)(S), [x, D] = (0, import_react.useState)(v), [B, E] = (0, import_react.useState)(j), [re2, W] = (0, import_react.useState)(b), [q, be] = (0, import_react.useState)(w.keepRatio), ie2 = (C, M, A, V) => {
    const { width: U, height: J } = _, { ancestorLeft: z, ancestorTop: F } = f;
    let K = C, ae = M, de = A, he = V;
    return C + z < 0 && (K = -z), M + F < 0 && (ae = -F), de = U - K - z, de < se && (de = se), he = J - ae - F, he < se && (he = se), C + de + z > U && (K = U - A - z), M + he + F > J && (ae = J - V - F), {
      limitLeft: K,
      limitTop: ae,
      limitWidth: de,
      limitHeight: he
    };
  }, k = (C) => {
    const { objects: M } = C, A = Ve(M, n);
    if (A.length !== 1)
      return;
    const V = A[0];
    if (V == null)
      return;
    const { transform: U } = V;
    if (U == null)
      return;
    const {
      width: J,
      height: z,
      left: F,
      top: K,
      angle: ae
    } = U;
    J != null && P(J), z != null && y(z), F != null && D(F), K != null && E(K), ae != null && W(ae);
  };
  (0, import_react.useEffect)(() => {
    const C = [
      w.changeStart$.subscribe((M) => {
        k(M);
      }),
      w.changing$.subscribe((M) => {
        k(M);
      }),
      w.changeEnd$.subscribe((M) => {
        k(M);
      }),
      n.focus$.subscribe((M) => {
        if (M.length !== 1)
          return;
        const A = n.getDrawingByParam(M[0]);
        if (A == null)
          return;
        const V = A.transform;
        if (V == null)
          return;
        const {
          width: U,
          height: J,
          left: z,
          top: F,
          angle: K
        } = V;
        U != null && P(U), J != null && y(J), z != null && D(z), F != null && E(F), K != null && W(K);
      })
    ];
    return () => {
      C.forEach((M) => M.unsubscribe());
    };
  }, []);
  const Ge = S0((C) => {
    if (C == null)
      return;
    C = Math.max(C, se);
    const { limitWidth: M, limitHeight: A } = ie2(x, B, C, I);
    C = Math.min(C, M);
    const V = { unitId: c, subUnitId: g, drawingId: m, drawingType: d, transform: { width: C } };
    if (q) {
      let U = C / N * I;
      if (U = Math.max(U, Bt), U > A)
        return;
      y(U), V.transform.height = U;
    }
    P(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
  }, Re), xn = S0((C) => {
    if (C == null)
      return;
    C = Math.max(C, se);
    const { limitHeight: M, limitWidth: A } = ie2(x, B, N, C);
    C = Math.min(C, M);
    const V = { unitId: c, subUnitId: g, drawingId: m, drawingType: d, transform: { height: C } };
    if (q) {
      let U = C / I * N;
      if (U = Math.max(U, se), U > A)
        return;
      P(U), V.transform.width = U;
    }
    y(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
  }, Re), Mn = S0((C) => {
    if (C == null)
      return;
    const { limitLeft: M } = ie2(C, B, N, I);
    C = M;
    const A = { unitId: c, subUnitId: g, drawingId: m, drawingType: d, transform: { left: C } };
    D(C), n.featurePluginUpdateNotification([A]), w.refreshControls().changeNotification();
  }, Re), On = S0((C) => {
    if (C == null)
      return;
    const { limitTop: M } = ie2(x, C, N, I);
    C = M;
    const A = { unitId: c, subUnitId: g, drawingId: m, drawingType: d, transform: { top: C } };
    E(C), n.featurePluginUpdateNotification([A]), w.refreshControls().changeNotification();
  }, Re), Nn = (C) => {
    if (C == null)
      return;
    const [M, A] = Ut2;
    C < M && (C = M), C > A && (C = A);
    const V = { unitId: c, subUnitId: g, drawingId: m, drawingType: d, transform: { angle: C } };
    W(C), n.featurePluginUpdateNotification([V]), w.refreshControls().changeNotification();
  }, Dn = (C) => {
    be(C), w.keepRatio = C;
  }, En = (C) => C ? "block" : "none";
  return l.jsxs("div", { className: O(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: En(s) }, children: [
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: l.jsx("div", { children: t.t("image-panel.transform.title") }) }) }),
    l.jsxs("div", { className: u.imageCommonPanelRow, children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.width") }) }),
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(BO, { precision: 1, value: N, onChange: (C) => {
          Ge(C);
        }, className: u.imageCommonPanelInput }) }) })
      ] }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.height") }) }),
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(BO, { precision: 1, value: I, onChange: (C) => {
          xn(C);
        }, className: u.imageCommonPanelInput }) }) })
      ] }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.lock") }) }),
        l.jsx("div", { className: O(u.imageCommonPanelRow, u.imageCommonPanelRowVertical), children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(um, { checked: q, onChange: Dn }) }) })
      ] }) })
    ] }),
    l.jsxs("div", { className: u.imageCommonPanelRow, children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.x") }) }),
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(BO, { precision: 1, value: x, onChange: (C) => {
          Mn(C);
        }, className: u.imageCommonPanelInput }) }) })
      ] }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.y") }) }),
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(BO, { precision: 1, value: B, onChange: (C) => {
          On(C);
        }, className: u.imageCommonPanelInput }) }) })
      ] }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan3), children: l.jsxs("label", { children: [
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: t.t("image-panel.transform.rotate") }) }),
        l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: u.imageCommonPanelColumn, children: l.jsx(BO, { precision: 1, value: re2, onChange: Nn, className: u.imageCommonPanelInput }) }) })
      ] }) })
    ] })
  ] });
};
var Ke = {
  id: "sheet.operation.open-image-crop",
  type: ar.OPERATION,
  handler: (i, t) => true
};
var le = {
  id: "sheet.operation.close-image-crop",
  type: ar.OPERATION,
  handler: (i, t) => true
};
var T = ((i) => (i.FREE = "0", i.R1_1 = "1", i.R16_9 = "2", i.R9_16 = "3", i.R5_4 = "4", i.R4_5 = "5", i.R4_3 = "6", i.R3_4 = "7", i.R3_2 = "8", i.R2_3 = "9", i))(T || {});
var Ee = {
  id: "sheet.operation.Auto-image-crop",
  type: ar.OPERATION,
  handler: (i, t) => true
};
var Ht = (i) => {
  const t = W0(Pt), n = W0(Vr), { drawings: e, cropperShow: r } = i;
  if (e[0] == null)
    return;
  const [a, o] = (0, import_react.useState)(T.FREE), c = (0, import_react.useRef)(false), g = [
    {
      label: n.t("image-panel.crop.mode"),
      value: T.FREE
    },
    {
      label: "1:1",
      value: T.R1_1
    },
    {
      label: "16:9",
      value: T.R16_9
    },
    {
      label: "9:16",
      value: T.R9_16
    },
    {
      label: "5:4",
      value: T.R5_4
    },
    {
      label: "4:5",
      value: T.R4_5
    },
    {
      label: "4:3",
      value: T.R4_3
    },
    {
      label: "3:4",
      value: T.R3_4
    },
    {
      label: "3:2",
      value: T.R3_2
    },
    {
      label: "2:3",
      value: T.R2_3
    }
  ];
  (0, import_react.useEffect)(() => {
    const f = t.onCommandExecuted((_) => {
      if (_.id === le.id) {
        const w = _.params;
        w != null && w.isAuto || (c.current = false);
      }
    });
    return () => {
      f == null || f.dispose();
    };
  }, []);
  function m(f) {
    o(f), c.current && t.executeCommand(Ee.id, {
      cropType: f
    });
  }
  const d = (f) => f ? "block" : "none", h = (f) => {
    t.executeCommand(Ee.id, {
      cropType: f
    }), c.current = true;
  };
  return l.jsxs("div", { className: O(u.imageCommonPanelGrid, u.imageCommonPanelBorder), style: { display: d(r) }, children: [
    l.jsx("div", { className: u.imageCommonPanelRow, children: l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelTitle), children: l.jsx("div", { children: n.t("image-panel.crop.title") }) }) }),
    l.jsxs("div", { className: O(u.imageCommonPanelRow, u.imageCommonPanelRowVertical), children: [
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(Po, { size: "small", onClick: () => {
        h(a);
      }, children: l.jsxs("span", { className: u.imageCommonPanelInline, children: [
        l.jsx(vn, {}),
        n.t("image-panel.crop.start")
      ] }) }) }),
      l.jsx("div", { className: O(u.imageCommonPanelColumn, u.imageCommonPanelSpan2), children: l.jsx(r_, { value: a, options: g, onChange: m }) })
    ] })
  ] });
};
var vr = (i) => {
  const t = W0(Ut), n = W0(Yx), e = W0(Vr), { drawings: r, hasArrange: s = true, hasTransform: a = true, hasAlign: o = true, hasCropper: c = true, hasGroup: g = true } = i, m = r[0];
  if (m == null)
    return;
  const { unitId: d } = m, h = n.getRenderById(d), f = h == null ? void 0 : h.scene;
  if (f == null)
    return;
  const _ = f.getTransformerByCreate(), [w, p] = (0, import_react.useState)(true), [S, v] = (0, import_react.useState)(true), [j, b] = (0, import_react.useState)(false), [N, P] = (0, import_react.useState)(true), [I, y] = (0, import_react.useState)(false);
  return (0, import_react.useEffect)(() => {
    const x = _.clearControl$.subscribe((E) => {
      E === true && (p(false), v(false), b(false), P(false), y(true));
    }), D = _.changeStart$.subscribe((E) => {
      const { objects: re2 } = E, W = Ve(re2, t);
      W.length === 0 ? (p(false), v(false), b(false), P(false), y(true)) : W.length === 1 ? (p(true), v(true), b(false), P(true), y(false)) : (p(true), v(false), b(true), P(false), y(false));
    }), B = t.focus$.subscribe((E) => {
      E.length === 0 ? (p(false), v(false), b(false), P(false), y(true)) : E.length === 1 ? (p(true), v(true), b(false), P(true), y(false)) : (p(true), v(false), b(true), P(false), y(false));
    });
    return () => {
      D.unsubscribe(), x.unsubscribe(), B.unsubscribe();
    };
  }, []), l.jsxs(l.Fragment, { children: [
    l.jsx("div", { style: { display: I === true ? "block" : "none", height: "100%" }, children: l.jsx("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", top: "50%", marginTop: "-100px" }, children: l.jsx("span", { children: e.t("image-panel.null") }) }) }),
    l.jsx(Et, { arrangeShow: s === true ? w : false, drawings: r }),
    l.jsx(At, { transformShow: a === true ? S : false, drawings: r }),
    l.jsx(_t, { alignShow: o === true ? j : false, drawings: r }),
    l.jsx(Ht, { cropperShow: c === true ? N : false, drawings: r }),
    l.jsx(Tt, { hasGroup: g, drawings: r })
  ] });
};
var Lt = "univer-image-popup-menu";
var Vt = "univer-image-popup-menu-item";
var Gt = "univer-image-popup-menu-item-icon";
var Wt = "univer-image-popup-menu-item-title";
var $t = "univer-image-popup-menu-item-hide";
var kt = "univer-btn-container";
var zt = "univer-btn-container-expand";
var Ce = {
  imagePopupMenu: Lt,
  imagePopupMenuItem: Vt,
  imagePopupMenuItemIcon: Gt,
  imagePopupMenuItemTitle: Wt,
  imagePopupMenuItemHide: $t,
  btnContainer: kt,
  btnContainerExpand: zt
};
var Ft = (i) => {
  var _, w;
  const t = (w = (_ = i.popup) == null ? void 0 : _.extraProps) == null ? void 0 : w.menuItems;
  if (!t)
    return null;
  const n = W0(Pt), e = W0(Vr), [r, s] = (0, import_react.useState)(false), [a, o] = (0, import_react.useState)(false), c = () => {
    o(true);
  }, g = () => {
    o(false);
  }, m = (p) => {
    s(p);
  }, d = (p) => {
    n.executeCommand(p.commandId, p.commandParams), s(false);
  }, h = r || a, f = t.filter((p) => !p.disable);
  return l.jsx(
    "div",
    {
      onMouseEnter: c,
      onMouseLeave: g,
      children: l.jsx(
        sC,
        {
          placement: "bottomLeft",
          trigger: ["click"],
          overlay: l.jsx("ul", { className: Ce.imagePopupMenu, children: f.map((p) => l.jsx(
            "li",
            {
              onClick: () => d(p),
              className: Ce.imagePopupMenuItem,
              children: l.jsx("span", { className: Ce.imagePopupMenuItemTitle, children: e.t(p.label) })
            },
            p.index
          )) }),
          visible: r,
          onVisibleChange: m,
          children: l.jsxs(
            "div",
            {
              className: O(Ce.btnContainer, {
                [Ce.btnContainerExpand]: r
              }),
              children: [
                l.jsx(
                  wn,
                  {
                    style: { color: "#35322B" },
                    extend: { colorChannel1: "rgb(var(--green-700, #409f11))" }
                  }
                ),
                h && l.jsx(bn2, { style: { color: "#CCCCCC", fontSize: "8px", marginLeft: "8px" } })
              ]
            }
          )
        }
      )
    }
  );
};
var Kt = "COMPONENT_IMAGE_POPUP_MENU";
var Yt = "drawing-ui.config";
var an = {};
var jn = {
  id: "sheet.operation.image-reset-size",
  type: ar.OPERATION,
  handler: (i, t) => true
};
var Zt = (i) => {
  const { src: t } = i;
  return t ? l.jsx("div", { children: l.jsx("img", { src: t, alt: "Univer Image Viewer", style: { width: "100%", height: "100%", position: "relative" } }) }) : null;
};
var Xt = Object.defineProperty;
var qt = Object.getOwnPropertyDescriptor;
var Jt = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? qt(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && Xt(t, n, r), r;
};
var sn = (i, t) => (n, e) => t(n, e, i);
var Te = class extends nt {
  constructor(i, t) {
    super(), this._componentManager = i, this._commandService = t, this._init();
  }
  _initCustomComponents() {
    const i = this._componentManager;
    this.disposeWithMe(i.register(Kt, Ft)), this.disposeWithMe(i.register(fn, Zt));
  }
  _initCommands() {
    [
      Ke,
      le,
      jn,
      Xe,
      Ee
    ].forEach((i) => this.disposeWithMe(this._commandService.registerCommand(i)));
  }
  _init() {
    this._initCommands(), this._initCustomComponents();
  }
};
Te = Jt([
  sn(0, ot(n1)),
  sn(1, Pt)
], Te);
var Qt = Object.defineProperty;
var er = Object.getOwnPropertyDescriptor;
var nr = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? er(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && Qt(t, n, r), r;
};
var je = (i, t) => (n, e) => t(n, e, i);
var Be = class extends nt {
  constructor(t, n, e, r) {
    super();
    Q(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
    this._currentUniverService = t, this._commandService = n, this._renderManagerService = e, this._drawingManagerService = r, this._initialize();
  }
  dispose() {
    super.dispose();
  }
  _initialize() {
    this._recoveryImages(), this._drawingAddListener(), this._drawingRemoveListener(), this._drawingUpdateListener(), this._commandExecutedListener(), this._drawingArrangeListener(), this._drawingGroupListener(), this._drawingRefreshListener(), this._drawingVisibleListener();
  }
  _recoveryImages() {
    const t = this._drawingManagerService.drawingManagerData, n = hn(this._currentUniverService);
    if (n == null)
      return;
    const { unitId: e, subUnitId: r } = n;
    Object.keys(t).forEach((s) => {
      Object.keys(t[s]).forEach((a) => {
        const o = t[s][a].data;
        o == null || s !== e || a !== r || Object.keys(o).forEach((c) => {
          o[c] && this._insertDrawing([{ unitId: s, subUnitId: a, drawingId: c }]);
        });
      });
    });
  }
  _commandExecutedListener() {
    this.disposeWithMe(
      this._commandService.onCommandExecuted((t) => {
        if (t.id === Xe.id) {
          const n = t.params;
          if (n == null)
            return;
          this._drawingAlign(n);
        }
      })
    );
  }
  _drawingGroupListener() {
    this.disposeWithMe(
      this._drawingManagerService.group$.subscribe((t) => {
        this._groupDrawings(t);
      })
    ), this.disposeWithMe(
      this._drawingManagerService.ungroup$.subscribe((t) => {
        this._ungroupDrawings(t);
      })
    );
  }
  // private _drawingGroup(params: ISetImageGroupOperationParams) {
  //     const { groupType } = params;
  //     const drawings = this._drawingManagerService.getFocusDrawings();
  //     if (drawings.length === 0) {
  //         return;
  //     }
  //     switch (groupType) {
  //         case GroupType.group:
  //             this._groupDrawings(drawings);
  //             break;
  //         case GroupType.regroup:
  //             this._regroupDrawings(drawings);
  //             break;
  //         case GroupType.ungroup:
  //             this._ungroupDrawings(drawings);
  //             break;
  //         default:
  //             break;
  //     }
  // }
  _getSceneAndTransformerByDrawingSearch(t) {
    if (t == null)
      return;
    const n = this._renderManagerService.getRenderById(t), e = n == null ? void 0 : n.scene;
    if (e == null)
      return null;
    const r = e.getTransformerByCreate();
    return { scene: e, transformer: r };
  }
  _groupDrawings(t) {
    t.forEach((n) => {
      this._groupDrawing(n);
    });
  }
  _groupDrawing(t) {
    const { parent: n, children: e } = t, { unitId: r, subUnitId: s, drawingId: a } = n, o = this._getSceneAndTransformerByDrawingSearch(n.unitId);
    if (o == null)
      return;
    const { scene: c, transformer: g } = o;
    this._commandService.syncExecuteCommand(le.id);
    const m = [];
    if (e.forEach((f) => {
      const _ = bn(f), w = c.getObjectIncludeInGroup(_);
      if (w == null || m.includes(w))
        return;
      m.push(w);
      const { transform: p } = f;
      p != null && (w.classType === Y.GROUP ? w.transformByState({ left: p.left, top: p.top }) : w.transformByState(p));
    }), m.length === 0)
      return;
    const d = bn({ unitId: r, subUnitId: s, drawingId: a }), h = new e7(d);
    c.addObject(h, aS).attachTransformerTo(h), h.addObjects(...m), n.transform && h.transformByState({ left: n.transform.left, top: n.transform.top }), g.clearSelectedObjects(), g.setSelectedControl(h);
  }
  // private _regroupDrawings(drawings: IDrawingSearch[]) {
  //     const renderObject = this._getSceneAndTransformerByDrawingSearch(drawings[0].unitId);
  //     if (renderObject == null) {
  //         return;
  //     }
  //     const { scene, transformer } = renderObject;
  //     const objects: BaseObject[] = [];
  //     let firstGroup: Nullable<Group> = null;
  //     drawings.forEach((drawing) => {
  //         const imageShapeKey = getDrawingShapeKeyByDrawingSearch(drawing);
  //         const o = scene.getObject(imageShapeKey);
  //         if (o == null) {
  //             return true;
  //         }
  //         const group = o.ancestorGroup as Nullable<Group>;
  //         if (group != null && firstGroup == null) {
  //             firstGroup = group;
  //         } else if (group != null && !objects.includes(group)) {
  //             objects.push(group);
  //         } else if (!objects.includes(o)) {
  //             objects.push(o);
  //         }
  //     });
  //     if (firstGroup == null) {
  //         return;
  //     }
  //     if (objects.length === 0) {
  //         return;
  //     }
  //     (firstGroup as Group).addObjects(...objects);
  //     (firstGroup as Group).reCalculateObjects();
  //     transformer.clearSelectedObjects();
  //     transformer.setSelectedControl(firstGroup);
  // }
  _ungroupDrawings(t) {
    t.forEach((n) => {
      this._ungroupDrawing(n);
    });
  }
  _ungroupDrawing(t) {
    const { parent: n, children: e } = t, r = this._getSceneAndTransformerByDrawingSearch(n.unitId);
    if (r == null)
      return;
    const { scene: s, transformer: a } = r;
    e.forEach((d) => {
      const h = bn(d), f = s.getObjectIncludeInGroup(h);
      if (f == null)
        return true;
      if (f == null)
        return;
      const { transform: _ } = d;
      _ != null && (f.classType === Y.GROUP ? f.transformByState({ left: _.left, top: _.top }) : f.transformByState(_));
    });
    const o = bn(n), c = s.getObject(o), { width: g, height: m } = c;
    c.getObjects().forEach((d) => {
      c.removeSelfObjectAndTransform(d.oKey, g, m);
    }), c.dispose(), a.clearSelectedObjects();
  }
  _drawingAlign(t) {
    const { alignType: n } = t, e = this._drawingManagerService.getFocusDrawings();
    if (n === R.default)
      return;
    const r = [];
    let s = Number.POSITIVE_INFINITY, a = Number.POSITIVE_INFINITY, o = Number.NEGATIVE_INFINITY, c = Number.NEGATIVE_INFINITY, g = 0;
    e.forEach((m) => {
      const { unitId: d, subUnitId: h, drawingId: f, drawingType: _ } = m, w = this._drawingManagerService.getDrawingByParam({ unitId: d, subUnitId: h, drawingId: f });
      if (w == null || w.transform == null)
        return;
      r.push({
        unitId: d,
        subUnitId: h,
        drawingId: f,
        drawingType: _,
        transform: w.transform
      });
      const { left: p = 0, top: S = 0, width: v = 0, height: j = 0 } = w.transform;
      s = Math.min(s, p), a = Math.min(a, S), o = Math.max(o, p + v), c = Math.max(c, S + j), g++;
    }), g !== 0 && (this._sortDrawingTransform(r, n), this._applyAlignType(r, n, s, a, o, c, g));
  }
  _applyAlignType(t, n, e, r, s, a, o) {
    const c = Math.round((s - e) / o * 10) / 10, g = Math.round((a - r) / o * 10) / 10, m = [], d = this._getSceneAndTransformerByDrawingSearch(t[0].unitId);
    if (d == null)
      return;
    const { scene: h, transformer: f } = d;
    t.forEach((_, w) => {
      const { unitId: p, subUnitId: S, drawingId: v, transform: j, drawingType: b } = _, { left: N = 0, top: P = 0, width: I = 0, height: y = 0 } = j;
      let x = N, D = P;
      switch (n) {
        case R.left:
          x = e;
          break;
        case R.center:
          x = e + (s - e) / 2 - I / 2;
          break;
        case R.right:
          x = s - I;
          break;
        case R.top:
          D = r;
          break;
        case R.middle:
          D = r + (a - r) / 2 - y / 2;
          break;
        case R.bottom:
          D = a - y;
          break;
        case R.horizon:
          x = e + c * w;
          break;
        case R.vertical:
          D = r + g * w;
          break;
      }
      (x !== N || D !== P) && m.push({
        unitId: p,
        subUnitId: S,
        drawingId: v,
        drawingType: b,
        transform: {
          left: x,
          top: D
        }
      });
    }), this._drawingManagerService.featurePluginUpdateNotification(m), f.refreshControls().changeNotification();
  }
  _sortDrawingTransform(t, n) {
    t.sort((e, r) => {
      const s = e.transform, a = r.transform, {
        left: o = 0,
        top: c = 0,
        width: g = 0,
        height: m = 0
      } = s, {
        left: d = 0,
        top: h = 0,
        width: f = 0,
        height: _ = 0
      } = a;
      switch (n) {
        case R.left:
          return o - d;
        case R.center:
          return o + g / 2 - (d + f / 2);
        case R.right:
          return o + g - (d + f);
        case R.top:
          return c - h;
        case R.middle:
          return c + m / 2 - (h + _ / 2);
        case R.bottom:
          return c + m - (h + _);
        case R.horizon:
          return o + g / 2 - (d + f / 2);
        case R.vertical:
          return c + m / 2 - (h + _ / 2);
        default:
          return 0;
      }
    });
  }
  _drawingArrangeListener() {
    this.disposeWithMe(
      this._drawingManagerService.order$.subscribe((t) => {
        this._drawingArrange(t);
      })
    );
  }
  _drawingArrange(t) {
    const { unitId: n, subUnitId: e, drawingIds: r } = t, s = this._getSceneAndTransformerByDrawingSearch(n);
    if (s == null)
      return;
    const { scene: a } = s;
    r.forEach((o) => {
      const c = bn({ unitId: n, subUnitId: e, drawingId: o }), g = a.fuzzyMathObjects(c, true);
      if (g == null || g.length === 0)
        return;
      const m = this._drawingManagerService.getDrawingOrder(n, e).indexOf(o);
      for (const d of g)
        d.setProps({ zIndex: m }), d.makeDirty();
    });
  }
  _drawingAddListener() {
    this.disposeWithMe(
      this._drawingManagerService.add$.subscribe((t) => {
        this._insertDrawing(t);
      })
    );
  }
  _insertDrawing(t) {
    const n = [];
    t.forEach((e) => {
      const { unitId: r } = e;
      if (this._drawingManagerService.getDrawingByParam(e) == null)
        return;
      const a = this._getSceneAndTransformerByDrawingSearch(r);
      if (a == null)
        return;
      const { scene: o } = a;
      n.includes(o) || n.push(o);
    }), n.forEach((e) => {
      this._sceneListenerOnDrawingMap.has(e) || (this._addListenerOnDrawing(e), this._sceneListenerOnDrawingMap.add(e));
    });
  }
  _drawingRemoveListener() {
    this.disposeWithMe(
      this._drawingManagerService.remove$.subscribe((t) => {
        t.forEach((n) => {
          var m;
          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
          if (a == null)
            return;
          const { scene: o } = a, c = bn({ unitId: e, subUnitId: r, drawingId: s }), g = o.fuzzyMathObjects(c, true);
          if (g.length > 0) {
            for (const d of g)
              d.dispose();
            (m = o.getTransformer()) == null || m.clearSelectedObjects();
          }
        });
      })
    );
  }
  _drawingUpdateListener() {
    this.disposeWithMe(
      this._drawingManagerService.update$.subscribe((t) => {
        t.forEach((n) => {
          var I;
          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._drawingManagerService.getDrawingByParam(n);
          if (a == null)
            return;
          const { transform: o, drawingType: c } = a, g = this._getSceneAndTransformerByDrawingSearch(e);
          if (g == null)
            return;
          const { scene: m, transformer: d } = g;
          if (o == null)
            return true;
          const { left: h = 0, top: f = 0, width: _ = 0, height: w = 0, angle: p = 0, flipX: S = false, flipY: v = false, skewX: j = 0, skewY: b = 0 } = o, N = bn({ unitId: e, subUnitId: r, drawingId: s }), P = m.getObject(N);
          if (P == null)
            return true;
          P.transformByState({ left: h, top: f, width: _, height: w, angle: p, flipX: S, flipY: v, skewX: j, skewY: b }), (I = m.getTransformer()) == null || I.debounceRefreshControls();
        });
      })
    );
  }
  _drawingRefreshListener() {
    this.disposeWithMe(
      this._drawingManagerService.refreshTransform$.subscribe((t) => {
        t.forEach((n) => {
          const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._getSceneAndTransformerByDrawingSearch(e);
          if (a == null)
            return;
          const o = this._drawingManagerService.getDrawingByParam(n);
          if (o == null)
            return;
          const { transform: c } = o, { scene: g } = a, m = bn({ unitId: e, subUnitId: r, drawingId: s }), d = g.getObject(m);
          if (d == null || c == null)
            return true;
          const {
            left: h = 0,
            top: f = 0,
            width: _ = 0,
            height: w = 0,
            angle: p = 0,
            flipX: S = false,
            flipY: v = false,
            skewX: j = 0,
            skewY: b = 0
          } = c;
          d.transformByState({ left: h, top: f, width: _, height: w, angle: p, flipX: S, flipY: v, skewX: j, skewY: b });
        });
      })
    );
  }
  _drawingVisibleListener() {
    this.disposeWithMe(
      this._drawingManagerService.visible$.subscribe((t) => {
        t.forEach((n) => {
          const { unitId: e, subUnitId: r, drawingId: s, visible: a } = n, o = this._getSceneAndTransformerByDrawingSearch(e);
          if (o == null)
            return;
          const { scene: c } = o, g = bn({ unitId: e, subUnitId: r, drawingId: s }), m = c.getObject(g);
          if (m == null)
            return true;
          a ? m.show() : m.hide();
        });
      })
    );
  }
  _filterUpdateParams(t, n) {
    return t.filter((e, r) => {
      if (e == null)
        return false;
      const { transform: s } = e;
      return iC(s, n == null ? void 0 : n[r]);
    });
  }
  // group?.getObjects().forEach((o) => {
  //     const drawing = this._drawingManagerService.getDrawingOKey(o.oKey);
  //     if (drawing != null) {
  //         const { unitId, subUnitId, drawingId } = drawing;
  //         drawings.push({ unitId, subUnitId, drawingId });
  //     }
  // });
  _addListenerOnDrawing(t) {
    const n = t.getTransformerByCreate();
    let e = null;
    this.disposeWithMe(
      Ze(
        n.changeStart$.subscribe((r) => {
          const { objects: s } = r, a = Array.from(s.values()), o = [];
          e = a.map((c) => {
            const { left: g, top: m, height: d, width: h, angle: f, oKey: _, isInGroup: w } = c, p = this._drawingManagerService.getDrawingOKey(_);
            if (w || c instanceof e7) {
              let S = c.ancestorGroup;
              if (S == null && c instanceof e7 && (S = c), S == null)
                return null;
              const v = this._drawingManagerService.getDrawingOKey(S.oKey);
              if (v) {
                const { unitId: j, subUnitId: b, drawingId: N } = v;
                o.push({ unitId: j, subUnitId: b, drawingId: N });
                const { left: P, top: I, height: y, width: x, angle: D } = S;
                return { left: P, top: I, height: y, width: x, angle: D };
              }
            } else if (p != null) {
              const { unitId: S, subUnitId: v, drawingId: j } = p;
              return o.push({ unitId: S, subUnitId: v, drawingId: j }), { left: g, top: m, height: d, width: h, angle: f };
            }
            return null;
          }).filter((c) => c != null), o.length > 0 ? this._commandService.syncExecuteCommand(ln.id, o) : this._commandService.syncExecuteCommand(ln.id, []);
        })
      )
    ), this.disposeWithMe(
      Ze(
        n.changeEnd$.subscribe((r) => {
          const { objects: s } = r, a = this._filterUpdateParams(Ve(s, this._drawingManagerService), e);
          a.length > 0 && this._drawingManagerService.featurePluginUpdateNotification(a);
        })
      )
    );
  }
};
Be = nr([
  je(0, _n),
  je(1, Pt),
  je(2, Yx),
  je(3, Ut)
], Be);
var xe = class extends q3 {
  constructor(n, e) {
    e == null && (e = {}), e.transformerConfig = {
      keepRatio: false,
      isCropper: true,
      anchorFill: "rgb(0, 0, 0)",
      anchorStroke: "rgb(255, 255, 255)",
      anchorSize: 24
    };
    super(n, e);
    Q(this, "_srcRect");
    Q(this, "_prstGeom");
    Q(this, "_applyTransform");
    Q(this, "_dragPadding", 8);
    Q(this, "_cacheCanvas");
    e != null && e.srcRect && (this._srcRect = e.srcRect), e != null && e.prstGeom && (this._prstGeom = e.prstGeom), e != null && e.applyTransform && (this._applyTransform = e.applyTransform), e != null && e.dragPadding && (this._dragPadding = e.dragPadding), this._applyProps();
  }
  refreshSrcRect(n, e) {
    this._srcRect = n, this._applyTransform = e, this._applyProps();
  }
  get srcRect() {
    return this._srcRect;
  }
  dispose() {
    var n;
    super.dispose(), (n = this._cacheCanvas) == null || n.dispose(), this._srcRect = null;
  }
  isHit(n) {
    const e = this.getInverseCoord(n);
    return e.x >= -this.strokeWidth / 2 && e.x <= this.width + this.strokeWidth / 2 && e.y >= -this.strokeWidth / 2 && e.y <= this.height + this.strokeWidth / 2 && !this._inSurround(e);
  }
  _inSurround(n) {
    const e = this._dragPadding;
    return n.x >= e - this.strokeWidth / 2 && n.x <= this.width + this.strokeWidth / 2 - e && n.y >= e - this.strokeWidth / 2 && n.y <= this.height + this.strokeWidth / 2 - e;
  }
  render(n, e) {
    return this.visible ? (n.save(), this._draw(n), n.restore(), this.makeDirty(false), this) : (this.makeDirty(false), this);
  }
  _draw(n) {
    var c, g;
    const r = this.getScene().getEngine(), { width: s, height: a } = r;
    this._initialCacheCanvas(), (c = this._cacheCanvas) == null || c.clear();
    const o = (g = this._cacheCanvas) == null ? void 0 : g.getContext();
    o != null && (o.save(), A1.drawWith(o, {
      left: 0,
      top: 0,
      width: s,
      height: a,
      fill: "rgba(0, 0, 0, 0.5)"
    }), o.setTransform(n.getTransform()), this._clipForApplyObject(o), this._applyCache(n), o.restore());
  }
  _clipForApplyObject(n) {
    let e = 0;
    if (this._prstGeom != null && (e = 1), n.globalCompositeOperation = "destination-out", n.beginPath(), e === 0) {
      const r = this.transform.getMatrix();
      n.transform(r[0], r[1], r[2], r[3], r[4], r[5]), n.rect(0, 0, this.width, this.height), n.fill();
    }
  }
  _applyProps() {
    if (this._applyTransform == null)
      return;
    let n = 0, e = 0, r = 0, s = 0;
    const { left: a = 0, top: o = 0, width: c = 0, height: g = 0, angle: m } = this._applyTransform;
    if (this._srcRect != null) {
      const { left: f = 0, top: _ = 0, right: w = 0, bottom: p = 0 } = this._srcRect;
      n = f, e = _, r = w, s = p;
    }
    const d = a + n, h = o + e;
    this.transformByState({
      left: d,
      top: h,
      width: a + c - r - d,
      height: o + g - s - h,
      angle: m
    });
  }
  _applyCache(n) {
    if (!n || this._cacheCanvas == null)
      return;
    const e = this._cacheCanvas.getContext();
    e.save(), n.save(), n.setTransform(1, 0, 0, 1, 0, 0), e.setTransform(1, 0, 0, 1, 0, 0), n.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0), n.restore(), e.restore();
  }
  _initialCacheCanvas() {
    if (this._cacheCanvas != null)
      return;
    const n = this.getScene();
    if (n == null)
      return;
    this._cacheCanvas = new pe();
    const e = n.getEngine();
    this._cacheCanvas.setSize(e.width, e.height), e.onTransformChange$.subscribeEvent(() => {
      var r;
      (r = this._cacheCanvas) == null || r.setSize(e.width, e.height), this.makeDirty(true);
    });
  }
};
var tr = Object.defineProperty;
var rr = Object.getOwnPropertyDescriptor;
var ir = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? rr(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && tr(t, n, r), r;
};
var ge = (i, t) => (n, e) => t(n, e, i);
var Ue = class extends nt {
  constructor(t, n, e, r, s, a) {
    super();
    Q(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
    this._commandService = t, this._drawingManagerService = n, this._renderManagerService = e, this._univerInstanceService = r, this._messageService = s, this._localeService = a, this._init();
  }
  _init() {
    this._initOpenCrop(), this._initCloseCrop(), this._initAutoCrop();
  }
  _initAutoCrop() {
    this.disposeWithMe(
      this._commandService.onCommandExecuted((t) => {
        if (t.id !== Ee.id)
          return;
        const n = t.params;
        if (n == null)
          return;
        const { cropType: e } = n, r = this._drawingManagerService.getFocusDrawings();
        if (r.length !== 1)
          return;
        const s = r[0], { unitId: a, subUnitId: o, drawingId: c } = s, g = this._renderManagerService.getRenderById(a), m = g == null ? void 0 : g.scene;
        if (m == null)
          return true;
        this._searchCropObject(m) != null && this._commandService.syncExecuteCommand(le.id, { isAuto: true });
        const h = bn({ unitId: a, subUnitId: o, drawingId: c }), f = m.getObject(h);
        if (!(f instanceof aT)) {
          this._messageService.show({
            type: Xw.Error,
            content: this._localeService.t("image-cropper.error")
          });
          return;
        }
        f != null && (this._updateCropperObject(e, f), this._commandService.executeCommand(Ke.id, { unitId: a, subUnitId: o, drawingId: c }));
      })
    );
  }
  _calculateSrcRectByRatio(t, n, e, r, s, a) {
    const o = e / r, c = s / a;
    let g = e, m = r;
    o > c ? g = r * c : m = e / c;
    const d = (e - g) / 2, h = (r - m) / 2;
    return {
      left: ie(d, 1),
      top: ie(h, 1),
      right: ie(e - (d + g), 1),
      bottom: ie(r - (h + m), 1)
    };
  }
  _updateCropperObject(t, n) {
    const { left: e, top: r, width: s, height: a } = n.calculateTransformWithSrcRect();
    let o;
    switch (t) {
      case T.R1_1:
        o = this._calculateSrcRectByRatio(e, r, s, a, 1, 1);
        break;
      case T.R16_9:
        o = this._calculateSrcRectByRatio(e, r, s, a, 16, 9);
        break;
      case T.R9_16:
        o = this._calculateSrcRectByRatio(e, r, s, a, 9, 16);
        break;
      case T.R5_4:
        o = this._calculateSrcRectByRatio(e, r, s, a, 5, 4);
        break;
      case T.R4_5:
        o = this._calculateSrcRectByRatio(e, r, s, a, 4, 5);
        break;
      case T.R4_3:
        o = this._calculateSrcRectByRatio(e, r, s, a, 4, 3);
        break;
      case T.R3_4:
        o = this._calculateSrcRectByRatio(e, r, s, a, 3, 4);
        break;
      case T.R3_2:
        o = this._calculateSrcRectByRatio(e, r, s, a, 3, 2);
        break;
      case T.R2_3:
        o = this._calculateSrcRectByRatio(e, r, s, a, 2, 3);
        break;
      case T.FREE:
    }
    if (o == null)
      return;
    n.setSrcRect(o);
    const { left: c = 0, top: g = 0, bottom: m = 0, right: d = 0 } = o;
    n.transformByStateCloseCropper({
      left: e + c,
      top: r + g,
      width: s - d - c,
      height: a - m - g
    });
  }
  _initOpenCrop() {
    this.disposeWithMe(
      this._commandService.onCommandExecuted((t) => {
        if (t.id !== Ke.id)
          return;
        const n = t.params;
        if (n == null)
          return;
        const { unitId: e, subUnitId: r, drawingId: s } = n, a = this._renderManagerService.getRenderById(e), o = a == null ? void 0 : a.scene;
        if (o == null)
          return true;
        if (this._sceneListenerOnImageMap.has(o) || (this._addListenerOnImage(o), this._sceneListenerOnImageMap.add(o)), this._drawingManagerService.getDrawingByParam({ unitId: e, subUnitId: r, drawingId: s }) == null)
          return;
        const g = bn({ unitId: e, subUnitId: r, drawingId: s }), m = o.getObject(g);
        if (m == null)
          return;
        if (!(m instanceof aT)) {
          this._messageService.show({
            type: Xw.Error,
            content: this._localeService.t("image-cropper.error")
          });
          return;
        }
        const d = o.getTransformer();
        d == null || d.clearControls();
        const h = new xe(`${g}-crop`, {
          srcRect: m.srcRect,
          prstGeom: m.prstGeom,
          applyTransform: m.calculateTransformWithSrcRect()
        });
        o.addObject(h, m.getLayerIndex() + 1).attachTransformerTo(h), d == null || d.createControlForCopper(h), this._addHoverForImageCopper(h), m.openRenderByCropper(), d == null || d.refreshControls(), h.makeDirty(true), this._commandService.syncExecuteCommand(ln.id, [{ unitId: e, subUnitId: r, drawingId: s }]);
      })
    );
  }
  _searchCropObject(t) {
    const n = t.getAllObjectsByOrder();
    for (const e of n)
      if (e instanceof xe)
        return e;
  }
  _initCloseCrop() {
    this.disposeWithMe(
      this._commandService.onCommandExecuted((n) => {
        if (n.id !== le.id)
          return;
        const e = this._univerInstanceService.getFocusedUnit();
        if (e == null)
          return;
        const r = e.getUnitId(), s = this._renderManagerService.getRenderById(r), a = s == null ? void 0 : s.scene;
        if (a == null)
          return true;
        const o = this._searchCropObject(a);
        if (o == null)
          return;
        const c = this._getApplyObjectByCropObject(o);
        if (c == null)
          return;
        const g = a.getTransformerByCreate();
        g.detachFrom(o), g.clearCopperControl();
        const m = this._getSrcRectByTransformState(c, o), d = this._drawingManagerService.getDrawingOKey(c.oKey);
        if (d != null) {
          const { left: h, top: f, height: _, width: w } = o;
          this._drawingManagerService.featurePluginUpdateNotification([{
            ...d,
            transform: {
              ...d.transform,
              left: h,
              top: f,
              height: _,
              width: w
            },
            srcRect: m.srcRectAngle
          }]);
        }
        c.setSrcRect({ ...m.srcRectAngle }), c.closeRenderByCropper(), c.makeDirty(true), o == null || o.dispose();
      })
    );
    const t = this._univerInstanceService.getCurrentTypeOfUnit$(Fe.UNIVER_SHEET).pipe(
      filter((n) => !!n),
      switchMap((n) => n.activeSheet$)
    );
    this.disposeWithMe(t.subscribe(() => {
      this._commandService.syncExecuteCommand(le.id);
    }));
  }
  _getApplyObjectByCropObject(t) {
    const n = t.oKey, e = n.slice(0, n.length - 5), r = t.getScene();
    if (!r)
      return null;
    const s = r.getObject(e);
    return s == null ? null : s;
  }
  _addListenerOnImage(t) {
    const n = t.getTransformerByCreate();
    let e = null;
    this.disposeWithMe(
      n.changeStart$.subscribe((r) => {
        const { objects: s } = r, a = s.values().next().value;
        if (a == null || !(a instanceof xe))
          return;
        const { left: o, top: c, height: g, width: m, angle: d } = a;
        e = { left: o, top: c, height: g, width: m, angle: d }, n.clearCopperControl();
      })
    ), this.disposeWithMe(
      n.changeEnd$.subscribe((r) => {
        const { objects: s } = r, a = s.values().next().value;
        if (a == null || !(a instanceof xe))
          return;
        const { left: o, top: c, height: g, width: m, angle: d } = a;
        if (!iC({ left: o, top: c, height: g, width: m, angle: d }, e))
          return;
        const h = this._getApplyObjectByCropObject(a);
        if (h == null)
          return;
        const f = this._getSrcRectByTransformState(h, a);
        a.refreshSrcRect(f.srcRect, h.getState()), n.createControlForCopper(a);
      })
    ), this._endCropListener(t);
  }
  _addHoverForImageCopper(t) {
    this.disposeWithMe(
      t.onPointerEnter$.subscribeEvent(() => {
        t.cursor = p1.MOVE;
      })
    ), this.disposeWithMe(
      t.onPointerLeave$.subscribeEvent(() => {
        t.cursor = p1.DEFAULT;
      })
    );
  }
  _endCropListener(t) {
    const n = t.getTransformerByCreate();
    this.disposeWithMe(
      n.clearControl$.subscribe((e) => {
        e === true && this._commandService.syncExecuteCommand(le.id);
      })
    );
  }
  _getSrcRectByTransformState(t, n) {
    const { left: e, top: r, height: s, width: a, strokeWidth: o, angle: c } = n, { left: g, top: m, width: d, height: h, angle: f, strokeWidth: _ } = t, w = e - g, p = r - m, S = {
      left: w,
      top: p,
      right: d - w - a,
      bottom: h - p - s
    }, v = { ...S };
    if (f !== 0) {
      const j = e + a / 2, b = r + s / 2, N = new $(j, b), P = d / 2 + g, I = h / 2 + m, y = new $(P, I), x = new $(g, m);
      x.rotateByPoint(Y1(f), y);
      const D = x.clone();
      D.rotateByPoint(Y1(-f), N);
      const B = e - D.x, E = r - D.y;
      v.left = B, v.top = E, v.right = d - B - a, v.bottom = h - E - s;
    }
    return {
      srcRect: S,
      srcRectAngle: v
    };
  }
};
Ue = ir([
  ge(0, Pt),
  ge(1, Ut),
  ge(2, Yx),
  ge(3, _n),
  ge(4, o3),
  ge(5, ot(Vr))
], Ue);
var ar2 = Object.defineProperty;
var sr = Object.getOwnPropertyDescriptor;
var or = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? sr(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && ar2(t, n, r), r;
};
var oe = (i, t) => (n, e) => t(n, e, i);
var Ae = class extends nt {
  constructor(i, t, n, e, r, s, a) {
    super(), this._commandService = i, this._renderManagerService = t, this._drawingManagerService = n, this._dialogService = e, this._imageIoService = r, this._currentUniverService = s, this._drawingRenderService = a, this._initialize();
  }
  dispose() {
    super.dispose();
  }
  _initialize() {
    this._drawingAddListener(), this._commandExecutedListener(), this._imageUpdateListener();
  }
  _commandExecutedListener() {
    this.disposeWithMe(
      this._commandService.onCommandExecuted((i) => {
        if (i.id === jn.id) {
          const t = i.params;
          if (t == null)
            return;
          this._resetImageSize(t);
        }
      })
    );
  }
  _getSceneAndTransformerByDrawingSearch(i) {
    if (i == null)
      return;
    const t = this._renderManagerService.getRenderById(i), n = t == null ? void 0 : t.scene;
    if (n == null)
      return null;
    const e = n.getTransformerByCreate();
    return { scene: n, transformer: e };
  }
  _resetImageSize(i) {
    const t = [], n = [];
    i.forEach((e) => {
      const { unitId: r, subUnitId: s, drawingId: a } = e, o = this._getSceneAndTransformerByDrawingSearch(r);
      if (o == null)
        return;
      const { scene: c } = o, g = bn({ unitId: r, subUnitId: s, drawingId: a }), m = c.getObject(g);
      if (m == null)
        return true;
      const d = this._drawingManagerService.getDrawingByParam(e);
      if (d == null)
        return true;
      if (d.drawingType !== gm.DRAWING_IMAGE)
        return;
      m.resetSize();
      const { width: h, height: f } = m.getNativeSize();
      n.includes(c) === false && n.push(c), t.push({
        ...d,
        transform: {
          ...d.transform,
          height: f,
          width: h,
          angle: 0
        },
        srcRect: null,
        prstGeom: null
      });
    }), this._drawingManagerService.featurePluginUpdateNotification(t), n.forEach((e) => {
      e.getTransformerByCreate().refreshControls().changeNotification();
    }), this._commandService.syncExecuteCommand(ln.id, i);
  }
  _drawingAddListener() {
    this.disposeWithMe(
      this._drawingManagerService.add$.subscribe((i) => {
        this._insertImages(i);
      })
    );
  }
  _insertImages(i) {
    i.forEach(async (t) => {
      var g;
      const { unitId: n, subUnitId: e, drawingId: r } = t, s = this._getSceneAndTransformerByDrawingSearch(n), a = (g = hn(this._currentUniverService, n)) == null ? void 0 : g.subUnitId;
      if (s == null || a !== e)
        return;
      const o = this._drawingManagerService.getDrawingByParam(t);
      if (o == null)
        return;
      const c = await this._drawingRenderService.renderImages(o, s.scene);
      if (!(c == null || c.length === 0))
        for (const m of c)
          this._addHoverForImage(m), this._addDialogForImage(m);
    });
  }
  _imageUpdateListener() {
    this.disposeWithMe(
      this._drawingManagerService.update$.subscribe((i) => {
        i.forEach((t) => {
          const { unitId: n, subUnitId: e, drawingId: r } = t, s = this._drawingManagerService.getDrawingByParam(t);
          if (s == null)
            return;
          const { transform: a, drawingType: o, srcRect: c, prstGeom: g, source: m, imageSourceType: d } = s;
          if (o !== gm.DRAWING_IMAGE)
            return;
          const h = this._getSceneAndTransformerByDrawingSearch(n);
          if (h == null)
            return;
          const { scene: f, transformer: _ } = h;
          if (a == null)
            return true;
          const w = bn({ unitId: n, subUnitId: e, drawingId: r }), p = f.getObject(w);
          if (p == null)
            return true;
          p.setSrcRect(c), p.setPrstGeom(g);
        });
      })
    );
  }
  _addHoverForImage(i) {
    this.disposeWithMe(
      Ze(
        i.onPointerEnter$.subscribeEvent(() => {
          i.cursor = p1.GRAB;
        })
      )
    ), this.disposeWithMe(
      Ze(
        i.onPointerLeave$.subscribeEvent(() => {
          i.cursor = p1.DEFAULT;
        })
      )
    );
  }
  _addDialogForImage(i) {
    this.disposeWithMe(
      Ze(
        i.onDblclick$.subscribeEvent(() => {
          const t = `${i.oKey}-viewer-dialog`;
          this._drawingRenderService.previewImage(t, i.getNative().src, i.getNativeSize().width, i.getNativeSize().height);
        })
      )
    );
  }
};
Ae = or([
  oe(0, Pt),
  oe(1, Yx),
  oe(2, Ut),
  oe(3, h3),
  oe(4, Oa),
  oe(5, _n),
  oe(6, ot(De))
], Ae);
var cr = Object.defineProperty;
var lr = Object.getOwnPropertyDescriptor;
var mr = (i, t, n, e) => {
  for (var r = e > 1 ? void 0 : e ? lr(t, n) : t, s = i.length - 1, a; s >= 0; s--)
    (a = i[s]) && (r = (e ? a(t, n, r) : a(r)) || r);
  return e && r && cr(t, n, r), r;
};
var on = (i, t) => (n, e) => t(n, e, i);
var gr = "UNIVER_DRAWING_UI_PLUGIN";
var ze;
var cn = (ze = class extends Ra {
  constructor(i = an, t, n) {
    super(), this._config = i, this._injector = t, this._configService = n;
    const { menu: e, ...r } = nu(
      {},
      an,
      this._config
    );
    e && this._configService.setConfig("menu", e, { merge: true }), this._configService.setConfig(Yt, r);
  }
  onStarting() {
    this._initDependencies();
  }
  onRendered() {
    this._injector.get(Be), this._injector.get(Te), this._injector.get(Ue), this._injector.get(Ae);
  }
  _initDependencies() {
    [
      [De],
      [Be],
      [Te],
      [Ue],
      [Ae]
    ].forEach((t) => this._injector.add(t));
  }
}, Q(ze, "pluginName", gr), ze);
cn = mr([
  on(1, ot(Ot)),
  on(2, SE)
], cn);

export {
  De,
  Ve,
  Xe,
  Ke,
  le,
  Ee,
  vr,
  Ft,
  Kt,
  jn,
  xe,
  cn
};
/*! Bundled license information:

@univerjs/drawing-ui/lib/es/index.js:
  (**
   * @license React
   * react-jsx-runtime.production.min.js
   *
   * Copyright (c) Facebook, Inc. and its affiliates.
   *
   * This source code is licensed under the MIT license found in the
   * LICENSE file in the root directory of this source tree.
   *)
*/
//# sourceMappingURL=chunk-AGSU7DWG.js.map