@univerjs/drawing-ui 0.20.1 → 0.21.0

package/lib/es/index.js

@@ -1 +1,2892 @@
-import{ArrangeTypeEnum as e,CommandType as t,Disposable as n,DrawingTypeEnum as r,ICommandService as i,IConfigService as a,IURLImageService as o,IUniverInstanceService as s,ImageSourceType as c,Inject as l,Injector as u,LocaleService as d,Plugin as f,UniverInstanceType as p,checkIfMove as m,debounce as h,generateRandomId as g,merge as _,toDisposable as v}from"@univerjs/core";import{IDrawingManagerService as y,IImageIoService as b,ImageSourceType as x,SetDrawingSelectedOperation as S,getDrawingShapeKeyByDrawingSearch as C}from"@univerjs/drawing";import{CURSOR_TYPE as w,Canvas as T,DRAWING_OBJECT_LAYER_INDEX as E,DrawingGroupObject as D,Group as O,IRenderManagerService as k,Image as A,RENDER_CLASS_TYPE as j,Rect as M,Shape as N,Vector2 as P,degToRad as F,getGroupState as ee,precisionTo as I,transformObjectOutOfGroup as te}from"@univerjs/engine-render";import{AutofillDoubleIcon as ne,BottomIcon as re,CreateCopyIcon as ie,GroupIcon as ae,MoreDownIcon as oe,MoveDownIcon as se,MoveUpIcon as ce,TopmostIcon as le,UngroupIcon as ue}from"@univerjs/icons";import{ComponentManager as de,ContextMenuGroup as fe,ContextMenuPosition as pe,IDialogService as me,IGalleryService as he,IMenuManagerService as ge,IMessageService as _e,MenuItemType as L,useDependency as R,useObservable as ve}from"@univerjs/ui";import{BehaviorSubject as ye,Observable as be,bufferTime as xe,filter as Se,map as Ce,of as we,switchMap as Te}from"rxjs";import{Button as z,Checkbox as Ee,DropdownMenu as De,InputNumber as Oe,MessageType as ke,Select as Ae,borderClassName as je,clsx as B}from"@univerjs/design";import{useEffect as Me,useRef as Ne,useState as V}from"react";import{Fragment as Pe,jsx as H,jsxs as U}from"react/jsx-runtime";let W=function(e){return e.default=`0`,e.left=`1`,e.center=`2`,e.right=`3`,e.top=`4`,e.middle=`5`,e.bottom=`6`,e.horizon=`7`,e.vertical=`8`,e}({});const G={id:`sheet.operation.set-image-align`,type:t.OPERATION,handler:(e,t)=>!0},Fe={id:`sheet.operation.set-drawing-align-left`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.left})},Ie={id:`sheet.operation.set-drawing-align-center`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.center})},Le={id:`sheet.operation.set-drawing-align-right`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.right})},Re={id:`sheet.operation.set-drawing-align-top`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.top})},ze={id:`sheet.operation.set-drawing-align-middle`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.middle})},Be={id:`sheet.operation.set-drawing-align-bottom`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.bottom})},Ve={id:`sheet.operation.set-drawing-align-horizon`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.horizon})},He={id:`sheet.operation.set-drawing-align-vertical`,type:t.OPERATION,handler:e=>e.get(i).syncExecuteCommand(G.id,{alignType:W.vertical})},K={id:`drawing.operation.set-drawing-arrange`,type:t.OPERATION,handler:(e,t)=>{let n=e.get(y),{arrangeType:r}=t,i=t.drawings||n.getFocusDrawings(),{unitId:a,subUnitId:o}=i[0],s=i.map(e=>e.drawingId);return n.featurePluginOrderUpdateNotification({unitId:a,subUnitId:o,drawingIds:s,arrangeType:r}),!0}},Ue={id:`drawing.operation.set-drawing-arrange-front`,type:t.OPERATION,handler:t=>t.get(i).syncExecuteCommand(K.id,{arrangeType:e.front})},We={id:`drawing.operation.set-drawing-arrange-forward`,type:t.OPERATION,handler:t=>t.get(i).syncExecuteCommand(K.id,{arrangeType:e.forward})},Ge={id:`drawing.operation.set-drawing-arrange-back`,type:t.OPERATION,handler:t=>t.get(i).syncExecuteCommand(K.id,{arrangeType:e.back})},Ke={id:`drawing.operation.set-drawing-arrange-backward`,type:t.OPERATION,handler:t=>t.get(i).syncExecuteCommand(K.id,{arrangeType:e.backward})},qe=[r.DRAWING_IMAGE,r.DRAWING_SHAPE,r.DRAWING_GROUP],Je={id:`drawing.operation.set-drawing-group`,type:t.OPERATION,handler:(e,t)=>{let n=e.get(y),i=t.drawings||n.getFocusDrawings();if(i.length<2||!i.every(e=>qe.includes(e.drawingType)))return!1;let{unitId:a,subUnitId:o}=i[0],s=g(10),c=ee(0,0,i.map(e=>e.transform||{})),l={unitId:a,subUnitId:o,drawingId:s,drawingType:r.DRAWING_GROUP,transform:c,groupBaseBound:{left:c.left,top:c.top,width:c.width,height:c.height}},u=i.map(e=>{let t=e.transform||{left:0,top:0},{unitId:n,subUnitId:r,drawingId:i}=e;return{unitId:n,subUnitId:r,drawingId:i,transform:{...t},groupId:s}});return n.featurePluginGroupUpdateNotification([{parent:l,children:u}]),!0}},Ye={id:`drawing.operation.cancel-drawing-group`,type:t.OPERATION,handler:(e,t)=>{let n=e.get(y),i=(t.drawings||n.getFocusDrawings()).map(e=>{if(e.drawingType!==r.DRAWING_GROUP)return null;let{unitId:t,subUnitId:i,drawingId:a,transform:o={width:0,height:0},groupBaseBound:s}=e;if(o===null)return null;let c=n.getDrawingsByGroup({unitId:t,subUnitId:i,drawingId:a});return c.length===0?null:{parent:e,children:c.map(e=>{let{transform:t}=e,{unitId:n,subUnitId:r,drawingId:i}=e,a=te(t||{},o,o.width||0,o.height||0,s);return{unitId:n,subUnitId:r,drawingId:i,transform:{...t,...a},groupId:void 0}})}}).filter(e=>e!==null);return i.length===0?!1:(n.featurePluginUngroupUpdateNotification(i),!0)}},Xe={id:`sheet.operation.open-image-crop`,type:t.OPERATION,handler:(e,t)=>!0},q={id:`sheet.operation.close-image-crop`,type:t.OPERATION,handler:(e,t)=>!0};let J=function(e){return e.FREE=`0`,e.R1_1=`1`,e.R16_9=`2`,e.R9_16=`3`,e.R5_4=`4`,e.R4_5=`5`,e.R4_3=`6`,e.R3_4=`7`,e.R3_2=`8`,e.R2_3=`9`,e}({});const Ze={id:`sheet.operation.Auto-image-crop`,type:t.OPERATION,handler:(e,t)=>!0},Qe={id:`sheet.operation.image-reset-size`,type:t.OPERATION,handler:(e,t)=>!0};function $e(e,t,n,r){let i=r.getDrawingByParam(e);if(i==null)return;let a=C(e),o=n.getObjectIncludeInGroup(a);if(o&&!(o instanceof O))return;if(o!=null){let e=o.getObjects();for(let n of e)if(n.oKey===t.oKey)return;o.addObject(t);return}let s=new D(a);n.addObject(s,E).attachTransformerTo(s),s.addObject(t);let{transform:c,groupBaseBound:l}=i;l&&s.setBaseBound(l),i.groupId&&(s.isInGroup=!0,$e({drawingId:i.groupId,unitId:e.unitId,subUnitId:e.subUnitId},s,n,r)),c&&s.transformByState({left:c.left,top:c.top,angle:c.angle,width:c.width,height:c.height})}function et(e,t){let n=t?e.getUnit(t):e.getFocusedUnit();if(n==null)return;let r=n.getUnitId(),i;if(n.type===p.UNIVER_SHEET){var a;i=(a=n.getActiveSheet())==null?void 0:a.getSheetId()}else (n.type===p.UNIVER_DOC||n.type===p.UNIVER_SLIDE)&&(i=r);return{unitId:r,subUnitId:i,current:n}}var tt=`@univerjs/drawing-ui`,nt=`0.20.1`;const rt=`drawing-ui.config`;Symbol(rt);const it={},at=e=>{let t=e.get(y);return new be(e=>{let n=t=>{if(!t||t.length===0||t.length<2)return e.next(!0);e.next(!1)},r=t.focus$.subscribe(t=>{if(!t||t.length===0)return e.next(!0);n(t)});return n(t.getFocusDrawings()),()=>r.unsubscribe()})},ot=`contextMenu.drawing-align`;function st(e){return{id:ot,type:L.SUBITEMS,icon:`HorizontallyIcon`,title:`image-panel.align.title`,hidden$:at(e)}}function ct(){return{id:Fe.id,type:L.BUTTON,icon:`LeftJustifyingIcon`,title:`image-panel.align.left`}}function lt(){return{id:Ie.id,type:L.BUTTON,icon:`HorizontallyIcon`,title:`image-panel.align.center`}}function ut(){return{id:Le.id,type:L.BUTTON,icon:`RightJustifyingIcon`,title:`image-panel.align.right`}}function dt(){return{id:Re.id,type:L.BUTTON,icon:`AlignTopIcon`,title:`image-panel.align.top`}}function ft(){return{id:ze.id,type:L.BUTTON,icon:`VerticalCenterIcon`,title:`image-panel.align.middle`}}function pt(){return{id:Be.id,type:L.BUTTON,icon:`AlignBottomIcon`,title:`image-panel.align.bottom`}}function mt(){return{id:Ve.id,type:L.BUTTON,icon:`HorizontallyIcon`,title:`image-panel.align.horizon`}}function ht(){return{id:He.id,type:L.BUTTON,icon:`VerticalCenterIcon`,title:`image-panel.align.vertical`}}const gt=`contextMenu.drawing-arrange`;function _t(){return{id:gt,type:L.SUBITEMS,icon:`TopmostIcon`,title:`image-panel.arrange.title`}}function vt(){return{id:Ue.id,type:L.BUTTON,icon:`TopmostIcon`,title:`image-panel.arrange.front`}}function yt(){return{id:We.id,type:L.BUTTON,icon:`MoveUpIcon`,title:`image-panel.arrange.forward`}}function bt(){return{id:Ge.id,type:L.BUTTON,icon:`BottomIcon`,title:`image-panel.arrange.back`}}function xt(){return{id:Ke.id,type:L.BUTTON,icon:`MoveDownIcon`,title:`image-panel.arrange.backward`}}const St=(e,t)=>{let n=e.get(y);return new be(e=>{let i=n=>{if(!n||n.length===0)return e.next(!0);if(t===`group`){if(n.length<2||!n.every(e=>qe.includes(e.drawingType)))return e.next(!0)}else if(t===`unGroup`){if(n.filter(e=>e.drawingType===r.DRAWING_GROUP).length===0)return e.next(!0)}else if(!n.every(e=>qe.includes(e.drawingType)))return e.next(!0);e.next(!1)},a=n.focus$.subscribe(t=>{if(!t||t.length===0)return e.next(!0);i(t)});return i(n.getFocusDrawings()),()=>a.unsubscribe()})},Ct=`contextMenu.drawing-group`;function wt(e){return{id:Ct,type:L.SUBITEMS,icon:`GroupIcon`,title:`image-panel.group.title`,hidden$:St(e)}}function Tt(e){return{id:Je.id,type:L.BUTTON,icon:`GroupIcon`,title:`image-panel.group.group`,disabled$:St(e,`group`)}}function Et(e){return{id:Ye.id,type:L.BUTTON,icon:`UngroupIcon`,title:`image-panel.group.unGroup`,disabled$:St(e,`unGroup`)}}const Dt={[pe.DRAWING]:{[fe.OTHERS]:{[Ct]:{order:1,menuItemFactory:wt,[Je.id]:{order:0,menuItemFactory:Tt},[Ye.id]:{order:1,menuItemFactory:Et}},[gt]:{order:2,menuItemFactory:_t,[Ue.id]:{order:0,menuItemFactory:vt},[We.id]:{order:1,menuItemFactory:yt},[Ge.id]:{order:2,menuItemFactory:bt},[Ke.id]:{order:3,menuItemFactory:xt}},[ot]:{order:3,menuItemFactory:st,[Fe.id]:{order:0,menuItemFactory:ct},[Ie.id]:{order:1,menuItemFactory:lt},[Le.id]:{order:2,menuItemFactory:ut},[Re.id]:{order:3,menuItemFactory:dt},[ze.id]:{order:4,menuItemFactory:ft},[Be.id]:{order:5,menuItemFactory:pt},[Ve.id]:{order:6,menuItemFactory:mt},[He.id]:{order:7,menuItemFactory:ht}}}}},Ot=`COMPONENT_IMAGE_POPUP_MENU`;function kt(e){var t;let{popup:n}=e,r=n==null||(t=n.extraProps)==null?void 0:t.menuItems;if(!r)return null;let a=R(i),o=R(d),[s,c]=V(!1),[l,u]=V(!1),f=()=>{u(!0)},p=()=>{u(!1)},m=e=>{c(e)},h=e=>{a.executeCommand(e.commandId,e.commandParams),c(!1)},g=s||l;return H(`div`,{onMouseEnter:f,onMouseLeave:p,children:H(De,{align:`start`,items:r.map(e=>({type:`item`,children:o.t(e.label),disabled:e.disable,onSelect:()=>h(e)})),open:s,onOpenChange:m,children:U(`div`,{className:B(`univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800`,je,{"univer-bg-gray-100 dark:!univer-bg-gray-800":s,"univer-bg-white dark:!univer-bg-gray-900":!s}),children:[H(ne,{className:`univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white`}),g&&H(oe,{className:`dark:!univer-text-white`})]})})})}function Y(e,t){return function(n,r){t(n,r,e)}}function X(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let At=class extends n{constructor(e,t,n){super(),this._componentManager=e,this._commandService=t,this._menuManagerService=n,this._init()}_init(){this._initMenus(),this._initCommands(),this._initComponents()}_initMenus(){this._menuManagerService.mergeMenu(Dt)}_initCommands(){[Xe,q,Qe,G,Fe,Ie,Le,Re,ze,Be,Ve,He,Ze,Je,Ye,K,Ue,We,Ge,Ke].forEach(e=>this.disposeWithMe(this._commandService.registerCommand(e)))}_initComponents(){[[Ot,kt],[`BottomIcon`,re],[`GroupIcon`,ae],[`MoveDownIcon`,se],[`MoveUpIcon`,ce],[`TopmostIcon`,le],[`UngroupIcon`,ue]].forEach(([e,t])=>{this.disposeWithMe(this._componentManager.register(e,t))})}};At=X([Y(0,l(de)),Y(1,i),Y(2,ge)],At);function jt(e,t){let n=[];return e.forEach(e=>{let{oKey:i,left:a,top:o,height:s,width:c,angle:l}=e,u=t.getDrawingOKey(i);if(u==null)return n.push(null),!0;let{unitId:d,subUnitId:f,drawingId:p,drawingType:m}=u,h={unitId:d,subUnitId:f,drawingId:p,drawingType:m,transform:{left:a,top:o,height:s,width:c,angle:l}};m===r.DRAWING_IMAGE&&(h.srcRect=e.srcRect),n.push(h)}),n}function Mt(e){"@babel/helpers - typeof";return Mt=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},Mt(e)}function Nt(e,t){if(Mt(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(Mt(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Pt(e){var t=Nt(e,`string`);return Mt(t)==`symbol`?t:t+``}function Z(e,t,n){return(t=Pt(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}let Ft=class extends n{constructor(e,t,n,r){super(),this._currentUniverService=e,this._commandService=t,this._renderManagerService=n,this._drawingManagerService=r,Z(this,`_sceneListenerOnDrawingMap`,new WeakSet),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(){let e=this._drawingManagerService.drawingManagerData,t=et(this._currentUniverService);if(t==null)return;let{unitId:n,subUnitId:r}=t;Object.keys(e).forEach(t=>{Object.keys(e[t]).forEach(i=>{let a=e[t][i].data;a==null||t!==n||i!==r||Object.keys(a).forEach(e=>{a[e]&&this._insertDrawing([{unitId:t,subUnitId:i,drawingId:e}])})})})}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id===G.id){let t=e.params;if(t==null)return;this._drawingAlign(t)}}))}_drawingGroupListener(){this.disposeWithMe(this._drawingManagerService.group$.subscribe(e=>{this._groupDrawings(e)})),this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe(e=>{this._ungroupDrawings(e)}))}_getSceneAndTransformerByDrawingSearch(e){if(e==null)return;let t=this._renderManagerService.getRenderById(e),n=t==null?void 0:t.scene;return n==null?null:{scene:n,transformer:n.getTransformerByCreate()}}_groupDrawings(e){e.forEach(e=>{this._groupDrawing(e)})}_groupDrawing(e){let{parent:t,children:n}=e,{unitId:r,subUnitId:i,drawingId:a}=t,o=this._getSceneAndTransformerByDrawingSearch(t.unitId);if(o==null)return;let{scene:s,transformer:c}=o;this._commandService.syncExecuteCommand(q.id);let l=[];if(n.forEach(e=>{let t=C(e),n=s.getObjectIncludeInGroup(t);if(n==null||l.includes(n))return;l.push(n);let{transform:r}=e;r!=null&&(n.classType===j.GROUP?n.transformByState({left:r.left,top:r.top}):n.transformByState(r))}),l.length===0)return;let u=new D(C({unitId:r,subUnitId:i,drawingId:a}));s.addObject(u,E).attachTransformerTo(u),u.addObjects(...l),t.groupBaseBound&&u.setBaseBound(t.groupBaseBound),t.groupId&&(u.isInGroup=!0,$e({drawingId:t.groupId,unitId:r,subUnitId:i},u,s,this._drawingManagerService)),t.transform&&u.transformByState({left:t.transform.left,top:t.transform.top,width:t.transform.width,height:t.transform.height,angle:t.transform.angle}),c.clearSelectedObjects(),c.setSelectedControl(u)}_ungroupDrawings(e){e.forEach(e=>{this._ungroupDrawing(e)})}_ungroupDrawing(e){let{parent:t,children:n}=e,r=this._getSceneAndTransformerByDrawingSearch(t.unitId);if(r==null)return;let{scene:i,transformer:a}=r;n.forEach(e=>{let t=C(e),n=i.getObjectIncludeInGroup(t);if(n==null)return!0;if(n==null)return;let{transform:r}=e;r!=null&&(n.classType===j.GROUP?n.transformByState({left:r.left,top:r.top}):n.transformByState(r))});let o=C(t),s=i.getObject(o),{width:c,height:l}=s;s.getObjects().forEach(e=>{s.removeSelfObjectAndTransform(e.oKey,c,l)}),s.dispose(),a.clearSelectedObjects()}_drawingAlign(e){let{alignType:t}=e,n=e.drawings||this._drawingManagerService.getFocusDrawings();if(t===W.default)return;let r=[],i=1/0,a=1/0,o=-1/0,s=-1/0,c=0;n.forEach(e=>{let{unitId:t,subUnitId:n,drawingId:l,drawingType:u}=e,d=this._drawingManagerService.getDrawingByParam({unitId:t,subUnitId:n,drawingId:l});if(d==null||d.transform==null)return;r.push({unitId:t,subUnitId:n,drawingId:l,drawingType:u,transform:d.transform});let{left:f=0,top:p=0,width:m=0,height:h=0}=d.transform;i=Math.min(i,f),a=Math.min(a,p),o=Math.max(o,f+m),s=Math.max(s,p+h),c++}),c!==0&&(this._sortDrawingTransform(r,t),this._applyAlignType(r,t,i,a,o,s,c))}_applyAlignType(e,t,n,r,i,a,o){let s=Math.round((i-n)/o*10)/10,c=Math.round((a-r)/o*10)/10,l=[],u=this._getSceneAndTransformerByDrawingSearch(e[0].unitId);if(u==null)return;let{scene:d,transformer:f}=u;e.forEach((e,o)=>{let{unitId:u,subUnitId:d,drawingId:f,transform:p,drawingType:m}=e,{left:h=0,top:g=0,width:_=0,height:v=0}=p,y=h,b=g;switch(t){case W.left:y=n;break;case W.center:y=n+(i-n)/2-_/2;break;case W.right:y=i-_;break;case W.top:b=r;break;case W.middle:b=r+(a-r)/2-v/2;break;case W.bottom:b=a-v;break;case W.horizon:y=n+s*o;break;case W.vertical:b=r+c*o;break;default:break}(y!==h||b!==g)&&l.push({unitId:u,subUnitId:d,drawingId:f,drawingType:m,transform:{left:y,top:b}})}),this._drawingManagerService.featurePluginUpdateNotification(l),f.refreshControls().changeNotification()}_sortDrawingTransform(e,t){e.sort((e,n)=>{let r=e.transform,i=n.transform,{left:a=0,top:o=0,width:s=0,height:c=0}=r,{left:l=0,top:u=0,width:d=0,height:f=0}=i;switch(t){case W.left:return a-l;case W.center:return a+s/2-(l+d/2);case W.right:return a+s-(l+d);case W.top:return o-u;case W.middle:return o+c/2-(u+f/2);case W.bottom:return o+c-(u+f);case W.horizon:return a+s/2-(l+d/2);case W.vertical:return o+c/2-(u+f/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(e=>{this._drawingArrange(e)}))}_drawingArrange(e){let{unitId:t,subUnitId:n,drawingIds:r}=e,i=this._getSceneAndTransformerByDrawingSearch(t);if(i==null)return;let{scene:a}=i;r.forEach(e=>{let r=C({unitId:t,subUnitId:n,drawingId:e}),i=a.fuzzyMathObjects(r,!0);if(i==null||i.length===0)return;let o=this._drawingManagerService.getDrawingOrder(t,n).indexOf(e);for(let e of i)e.setProps({zIndex:o}),e.makeDirty()})}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(e=>{this._insertDrawing(e)}))}_insertDrawing(e){let t=[];e.forEach(e=>{let{unitId:n}=e;if(this._drawingManagerService.getDrawingByParam(e)==null)return;let r=this._getSceneAndTransformerByDrawingSearch(n);if(r==null)return;let{scene:i}=r;t.includes(i)||t.push(i)}),t.forEach(e=>{this._sceneListenerOnDrawingMap.has(e)||(this._addListenerOnDrawing(e),this._sceneListenerOnDrawingMap.add(e))})}_drawingRemoveListener(){this.disposeWithMe(this._drawingManagerService.remove$.subscribe(e=>{e.forEach(e=>{let{unitId:t,subUnitId:n,drawingId:r}=e,i=this._getSceneAndTransformerByDrawingSearch(t);if(i==null)return;let{scene:a}=i,o=C({unitId:t,subUnitId:n,drawingId:r}),s=a.fuzzyMathObjects(o,!0);if(s.length>0){var c;for(let e of s)e.dispose();(c=a.getTransformer())==null||c.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(e=>{e.forEach(e=>{var t;let{unitId:n,subUnitId:r,drawingId:i}=e,a=this._drawingManagerService.getDrawingByParam(e);if(a==null)return;let{transform:o,drawingType:s}=a,c=this._getSceneAndTransformerByDrawingSearch(n);if(c==null)return;let{scene:l,transformer:u}=c;if(o==null)return!0;let{left:d=0,top:f=0,width:p=0,height:m=0,angle:h=0,flipX:g=!1,flipY:_=!1,skewX:v=0,skewY:y=0}=o,b=C({unitId:n,subUnitId:r,drawingId:i}),x=l.getObject(b);if(x==null)return!0;x.transformByState({left:d,top:f,width:p,height:m,angle:h,flipX:g,flipY:_,skewX:v,skewY:y}),(t=l.getTransformer())==null||t.debounceRefreshControls()})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(e=>{e.forEach(e=>{let{unitId:t,subUnitId:n,drawingId:r}=e,i=this._getSceneAndTransformerByDrawingSearch(t);if(i==null)return;let a=this._drawingManagerService.getDrawingByParam(e);if(a==null)return;let{transform:o}=a,{scene:s}=i,c=C({unitId:t,subUnitId:n,drawingId:r}),l=s.getObject(c);if(l==null||o==null)return!0;let{left:u=0,top:d=0,width:f=0,height:p=0,angle:m=0,flipX:h=!1,flipY:g=!1,skewX:_=0,skewY:v=0}=o;l.transformByState({left:u,top:d,width:f,height:p,angle:m,flipX:h,flipY:g,skewX:_,skewY:v})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(e=>{e.forEach(e=>{let{unitId:t,subUnitId:n,drawingId:r,visible:i}=e,a=this._getSceneAndTransformerByDrawingSearch(t);if(a==null)return;let{scene:o}=a,s=C({unitId:t,subUnitId:n,drawingId:r}),c=o.getObject(s);if(c==null)return!0;i?c.show():c.hide()})}))}_filterUpdateParams(e,t){return e.filter((e,n)=>{if(e==null)return!1;let{transform:r}=e;return m(r,t==null?void 0:t[n])})}_addListenerOnDrawing(e){let t=e.getTransformerByCreate(),n=null;this.disposeWithMe(v(t.changeStart$.subscribe(e=>{let{objects:t}=e,r=Array.from(t.values()),i=[];n=r.map(e=>{let{left:t,top:n,height:r,width:a,angle:o,oKey:s,isInGroup:c}=e,l=this._drawingManagerService.getDrawingOKey(s);if(c||e instanceof O){let t=e.ancestorGroup;if(t==null&&e instanceof O&&(t=e),t==null)return null;let n=this._drawingManagerService.getDrawingOKey(t.oKey);if(n){let{unitId:e,subUnitId:r,drawingId:a}=n;i.push({unitId:e,subUnitId:r,drawingId:a});let{left:o,top:s,height:c,width:l,angle:u}=t;return{left:o,top:s,height:c,width:l,angle:u}}}else if(l!=null){let{unitId:e,subUnitId:s,drawingId:c}=l;return i.push({unitId:e,subUnitId:s,drawingId:c}),{left:t,top:n,height:r,width:a,angle:o}}return null}).filter(e=>e!=null),i.length>0?this._commandService.syncExecuteCommand(S.id,i):this._commandService.syncExecuteCommand(S.id,[])}))),this.disposeWithMe(v(t.changeEnd$.subscribe(e=>{let{objects:t}=e,r=this._filterUpdateParams(jt(t,this._drawingManagerService),n);r.length>0&&this._drawingManagerService.featurePluginUpdateNotification(r)})))}};Ft=X([Y(0,s),Y(1,i),Y(2,k),Y(3,y)],Ft);var It=function(e){return e[e.RECT=0]=`RECT`,e[e.PATH=1]=`PATH`,e}(It||{}),Lt=class extends N{constructor(e,t){t==null&&(t={}),t.transformerConfig={keepRatio:!1,isCropper:!0,anchorFill:`rgb(0, 0, 0)`,anchorStroke:`rgb(255, 255, 255)`,anchorSize:24},super(e,t),Z(this,`_srcRect`,void 0),Z(this,`_prstGeom`,void 0),Z(this,`_applyTransform`,void 0),Z(this,`_dragPadding`,8),Z(this,`_cacheCanvas`,void 0),t!=null&&t.srcRect&&(this._srcRect=t.srcRect),t!=null&&t.prstGeom&&(this._prstGeom=t.prstGeom),t!=null&&t.applyTransform&&(this._applyTransform=t.applyTransform),t!=null&&t.dragPadding&&(this._dragPadding=t.dragPadding),this._applyProps()}refreshSrcRect(e,t){this._srcRect=e,this._applyTransform=t,this._applyProps()}get srcRect(){return this._srcRect}dispose(){var e;super.dispose(),(e=this._cacheCanvas)==null||e.dispose(),this._srcRect=null}isHit(e){let t=this.getInverseCoord(e);return t.x>=-this.strokeWidth/2&&t.x<=this.width+this.strokeWidth/2&&t.y>=-this.strokeWidth/2&&t.y<=this.height+this.strokeWidth/2&&!this._inSurround(t)}_inSurround(e){let t=this._dragPadding;return e.x>=t-this.strokeWidth/2&&e.x<=this.width+this.strokeWidth/2-t&&e.y>=t-this.strokeWidth/2&&e.y<=this.height+this.strokeWidth/2-t}render(e,t){return this.visible?(e.save(),this._draw(e),e.restore(),this.makeDirty(!1),this):(this.makeDirty(!1),this)}_draw(e){var t,n;let{width:r,height:i}=this.getScene().getEngine();this._initialCacheCanvas(),(t=this._cacheCanvas)==null||t.clear();let a=(n=this._cacheCanvas)==null?void 0:n.getContext();a!=null&&(a.save(),M.drawWith(a,{left:0,top:0,width:r,height:i,fill:`rgba(0, 0, 0, 0.5)`}),a.setTransform(e.getTransform()),this._clipForApplyObject(a),this._applyCache(e),a.restore())}_clipForApplyObject(e){let t=It.RECT;if(this._prstGeom!=null&&(t=It.PATH),e.globalCompositeOperation=`destination-out`,e.beginPath(),t===It.RECT){let t=this.transform.getMatrix();e.transform(t[0],t[1],t[2],t[3],t[4],t[5]),e.rect(0,0,this.width,this.height),e.fill()}}_applyProps(){if(this._applyTransform==null)return;let e=0,t=0,n=0,r=0,{left:i=0,top:a=0,width:o=0,height:s=0,angle:c}=this._applyTransform;if(this._srcRect!=null){let{left:i=0,top:a=0,right:o=0,bottom:s=0}=this._srcRect;e=i,t=a,n=o,r=s}let l=i+e,u=a+t;this.transformByState({left:l,top:u,width:i+o-n-l,height:a+s-r-u,angle:c})}_applyCache(e){if(!e||this._cacheCanvas==null)return;let t=this._cacheCanvas.getContext();t.save(),e.save(),e.setTransform(1,0,0,1,0,0),t.setTransform(1,0,0,1,0,0),e.drawImage(this._cacheCanvas.getCanvasEle(),0,0),e.restore(),t.restore()}_initialCacheCanvas(){if(this._cacheCanvas!=null)return;let e=this.getScene();if(e==null)return;this._cacheCanvas=new T;let t=e.getEngine();this._cacheCanvas.setSize(t.width,t.height),t.onTransformChange$.subscribeEvent(()=>{var e;(e=this._cacheCanvas)==null||e.setSize(t.width,t.height),this.makeDirty(!0)})}};let Rt=class extends n{constructor(e,t,n,r,i,a){super(),this._commandService=e,this._drawingManagerService=t,this._renderManagerService=n,this._univerInstanceService=r,this._messageService=i,this._localeService=a,Z(this,`_sceneListenerOnImageMap`,new WeakSet),this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==Ze.id)return;let t=e.params;if(t==null)return;let{cropType:n}=t,r=this._drawingManagerService.getFocusDrawings();if(r.length!==1)return;let{unitId:i,subUnitId:a,drawingId:o}=r[0],s=this._renderManagerService.getRenderById(i),c=s==null?void 0:s.scene;if(c==null)return!0;this._searchCropObject(c)!=null&&this._commandService.syncExecuteCommand(q.id,{isAuto:!0});let l=C({unitId:i,subUnitId:a,drawingId:o}),u=c.getObject(l);if(!(u instanceof A)){this._messageService.show({type:ke.Error,content:this._localeService.t(`image-cropper.error`)});return}u!=null&&(this._updateCropperObject(n,u),this._commandService.executeCommand(Xe.id,{unitId:i,subUnitId:a,drawingId:o}))}))}_calculateSrcRectByRatio(e,t,n,r,i,a){let o=n/r,s=i/a,c=n,l=r;o>s?c=r*s:l=n/s;let u=(n-c)/2,d=(r-l)/2;return{left:I(u,1),top:I(d,1),right:I(n-(u+c),1),bottom:I(r-(d+l),1)}}_updateCropperObject(e,t){let{left:n,top:r,width:i,height:a}=t.calculateTransformWithSrcRect(),o;switch(e){case J.R1_1:o=this._calculateSrcRectByRatio(n,r,i,a,1,1);break;case J.R16_9:o=this._calculateSrcRectByRatio(n,r,i,a,16,9);break;case J.R9_16:o=this._calculateSrcRectByRatio(n,r,i,a,9,16);break;case J.R5_4:o=this._calculateSrcRectByRatio(n,r,i,a,5,4);break;case J.R4_5:o=this._calculateSrcRectByRatio(n,r,i,a,4,5);break;case J.R4_3:o=this._calculateSrcRectByRatio(n,r,i,a,4,3);break;case J.R3_4:o=this._calculateSrcRectByRatio(n,r,i,a,3,4);break;case J.R3_2:o=this._calculateSrcRectByRatio(n,r,i,a,3,2);break;case J.R2_3:o=this._calculateSrcRectByRatio(n,r,i,a,2,3);break;case J.FREE:default:break}if(o==null)return;t.setSrcRect(o);let{left:s=0,top:c=0,bottom:l=0,right:u=0}=o;t.transformByStateCloseCropper({left:n+s,top:r+c,width:i-u-s,height:a-l-c})}_initOpenCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==Xe.id)return;let t=e.params;if(t==null)return;let{unitId:n,subUnitId:r,drawingId:i}=t,a=this._renderManagerService.getRenderById(n),o=a==null?void 0:a.scene;if(o==null)return!0;if(this._sceneListenerOnImageMap.has(o)||(this._addListenerOnImage(o),this._sceneListenerOnImageMap.add(o)),this._drawingManagerService.getDrawingByParam({unitId:n,subUnitId:r,drawingId:i})==null)return;let s=C({unitId:n,subUnitId:r,drawingId:i}),c=o.getObject(s);if(c==null)return;if(!(c instanceof A)){this._messageService.show({type:ke.Error,content:this._localeService.t(`image-cropper.error`)});return}let l=o.getTransformer();l==null||l.clearControls();let u=new Lt(`${s}-crop`,{srcRect:c.srcRect,prstGeom:c.prstGeom,applyTransform:c.calculateTransformWithSrcRect()});o.addObject(u,c.getLayerIndex()+1).attachTransformerTo(u),l==null||l.createControlForCopper(u),this._addHoverForImageCopper(u),c.openRenderByCropper(),l==null||l.refreshControls(),u.makeDirty(!0),this._commandService.syncExecuteCommand(S.id,[{unitId:n,subUnitId:r,drawingId:i}])}))}_searchCropObject(e){let t=e.getAllObjectsByOrder();for(let e of t)if(e instanceof Lt)return e}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==q.id)return;let t=this._univerInstanceService.getFocusedUnit();if(t==null)return;let n=t.getUnitId(),r=this._renderManagerService.getRenderById(n),i=r==null?void 0:r.scene;if(i==null)return!0;let a=this._searchCropObject(i);if(a==null)return;let o=this._getApplyObjectByCropObject(a);if(o==null)return;let s=i.getTransformerByCreate();s.detachFrom(a),s.clearCopperControl();let c=this._getSrcRectByTransformState(o,a),l=this._drawingManagerService.getDrawingOKey(o.oKey);if(l!=null){let{left:e,top:t,height:n,width:r}=a;this._drawingManagerService.featurePluginUpdateNotification([{...l,transform:{...l.transform,left:e,top:t,height:n,width:r},srcRect:c.srcRectAngle}])}o.setSrcRect({...c.srcRectAngle}),o.closeRenderByCropper(),o.makeDirty(!0),a==null||a.dispose()}));let e=this._univerInstanceService.getCurrentTypeOfUnit$(p.UNIVER_SHEET).pipe(Te(e=>e?e.activeSheet$:we(null)));this.disposeWithMe(e.subscribe(()=>{this._commandService.syncExecuteCommand(q.id)}))}_getApplyObjectByCropObject(e){let t=e.oKey,n=t.slice(0,t.length-5),r=e.getScene();if(!r)return null;let i=r.getObject(n);return i==null?null:i}_addListenerOnImage(e){let t=e.getTransformerByCreate(),n=null;this.disposeWithMe(t.changeStart$.subscribe(e=>{let{objects:r}=e,i=r.values().next().value;if(i==null||!(i instanceof Lt))return;let{left:a,top:o,height:s,width:c,angle:l}=i;n={left:a,top:o,height:s,width:c,angle:l},t.clearCopperControl()})),this.disposeWithMe(t.changeEnd$.subscribe(e=>{let{objects:r}=e,i=r.values().next().value;if(i==null||!(i instanceof Lt))return;let{left:a,top:o,height:s,width:c,angle:l}=i;if(!m({left:a,top:o,height:s,width:c,angle:l},n))return;let u=this._getApplyObjectByCropObject(i);if(u==null)return;let d=this._getSrcRectByTransformState(u,i);i.refreshSrcRect(d.srcRect,u.getState()),t.createControlForCopper(i)})),this._endCropListener(e)}_addHoverForImageCopper(e){this.disposeWithMe(e.onPointerEnter$.subscribeEvent(()=>{e.cursor=w.MOVE})),this.disposeWithMe(e.onPointerLeave$.subscribeEvent(()=>{e.cursor=w.DEFAULT}))}_endCropListener(e){let t=e.getTransformerByCreate();this.disposeWithMe(t.clearControl$.subscribe(e=>{e===!0&&this._commandService.syncExecuteCommand(q.id)}))}_getSrcRectByTransformState(e,t){let{left:n,top:r,height:i,width:a,strokeWidth:o,angle:s}=t,{left:c,top:l,width:u,height:d,angle:f,strokeWidth:p}=e,m=n-c,h=r-l,g={left:m,top:h,right:u-m-a,bottom:d-h-i},_={...g};if(f!==0){let e=new P(n+a/2,r+i/2),t=new P(u/2+c,d/2+l),o=new P(c,l);o.rotateByPoint(F(f),t);let s=o.clone();s.rotateByPoint(F(-f),e);let p=n-s.x,m=r-s.y;_.left=p,_.top=m,_.right=u-p-a,_.bottom=d-m-i}return{srcRect:g,srcRectAngle:_}}};Rt=X([Y(0,i),Y(1,y),Y(2,k),Y(3,s),Y(4,_e),Y(5,l(d))],Rt);const zt=`sheet.image-clip.shape.picker.component`;var Bt=class extends n{constructor(){super(),Z(this,`_clipDelegate`,null),Z(this,`_canUseShapeClip$`,new ye(!1)),Z(this,`canUseShapeClip$`,this._canUseShapeClip$.asObservable())}setCanUseShapeClip(e){this._canUseShapeClip$.next(e)}registerClipDelegate(e){return this._clipDelegate=e,v(()=>{this._clipDelegate===e&&(this._clipDelegate=null)})}applyShapeClip(e,t,n,r,i){return this._clipDelegate?this._clipDelegate(e,t,n,r,i):!1}dispose(){this._clipDelegate=null,this._canUseShapeClip$.complete(),super.dispose()}};let Q=class{constructor(e,t,n,r,i,a){this._drawingManagerService=e,this._imageIoService=t,this._galleryService=n,this._urlImageService=r,this._univerInstanceService=i,this._drawingImageClipService=a}async renderImages(e,t){let{transform:n,drawingType:i,source:a,imageSourceType:o,srcRect:s,prstGeom:c,groupId:l,unitId:u,subUnitId:d,drawingId:f,isMultiTransform:m,transforms:h,adjustValues:g}=e;if(i!==r.DRAWING_IMAGE||!this._drawingManagerService.getDrawingVisible()||this._univerInstanceService.getUnitType(u)===p.UNIVER_SHEET&&d!==this._getActiveSheetId()||n==null)return;let _=m&&h?h:[n],v=[];for(let e of _){let{left:n,top:r,width:i,height:p,angle:h,flipX:y,flipY:b,skewX:S,skewY:w}=e,T=_.indexOf(e),D=C({unitId:u,subUnitId:d,drawingId:f},m?T:void 0),O=t.getObject(D);if(O!=null){O.transformByState({left:n,top:r,width:i,height:p,angle:h,flipX:y,flipY:b,skewX:S,skewY:w});continue}let k=this._drawingManagerService.getDrawingOrder(u,d),j=k.indexOf(f),M={...e,zIndex:j===-1?k.length-1:j},N=this._imageIoService.getImageSourceCache(a,o),P=!1;if(N!=null)M.image=N;else if(o===x.UUID)try{M.url=await this._imageIoService.getImage(a)}catch(e){console.error(e);continue}else if(o===x.URL){try{M.url=await this._urlImageService.getImage(a)}catch(e){console.error(e),M.url=a}P=!0}else M.url=a,P=!0;if(t.getObject(D))continue;M.printable=!0;let F=new A(D,M);F.setClipService(this._drawingImageClipService),P&&this._imageIoService.addImageSourceCache(a,o,F.getNative()),t.addObject(F,E),this._drawingManagerService.getDrawingEditable()&&t.attachTransformerTo(F),l&&$e({drawingId:l,unitId:u,subUnitId:d},F,t,this._drawingManagerService),c!=null&&F.setPrstGeom(c),g!=null&&F.setPrstGeomAdjValues(g),s!=null&&F.setSrcRect(s),v.push(F)}return v}_getActiveSheetId(){var e;return(e=this._univerInstanceService.getCurrentUnitOfType(p.UNIVER_SHEET))==null||(e=e.getActiveSheet())==null?void 0:e.getSheetId()}renderFloatDom(e,t){let{transform:n,drawingType:i,groupId:a,unitId:o,subUnitId:s,drawingId:c,isMultiTransform:l,transforms:u}=e;if(i!==r.DRAWING_DOM||!this._drawingManagerService.getDrawingVisible()||n==null)return;let d=l&&u?u:[n],f=[];for(let n of d){let{left:r,top:i,width:u,height:p,angle:m,flipX:h,flipY:g,skewX:_,skewY:v}=n,y=d.indexOf(n),b=C({unitId:o,subUnitId:s,drawingId:c},l?y:void 0),x=t.getObject(b);if(x!=null){x.transformByState({left:r,top:i,width:u,height:p,angle:m,flipX:h,flipY:g,skewX:_,skewY:v});continue}let S=this._drawingManagerService.getDrawingOrder(o,s),w=S.indexOf(c),T={...n,zIndex:w===-1?S.length-1:w};if(t.getObject(b))continue;T.printable=!1;let D=new M(b,T);this._drawingManagerService.getDrawingVisible()&&(t.addObject(D,E),this._drawingManagerService.getDrawingEditable()&&e.allowTransform!==!1&&t.attachTransformerTo(D),a&&$e({drawingId:a,unitId:o,subUnitId:s},D,t,this._drawingManagerService),f.push(D))}return f}renderDrawing(e,t){let n=this._drawingManagerService.getDrawingByParam(e);if(n!=null)switch(n.drawingType){case r.DRAWING_IMAGE:return this.renderImages(n,t);default:}}previewImage(e,t,n,r){this._galleryService.open({images:[t],onOpenChange:e=>{e||this._galleryService.close()}})}_adjustImageSize(e,t,n,r){if(e<=n&&t<=r)return{width:e,height:t};let i=n/e,a=r/t,o=Math.min(i,a);return{width:Math.floor(e*o),height:Math.floor(t*o)}}};Q=X([Y(0,y),Y(1,b),Y(2,he),Y(3,o),Y(4,s),Y(5,l(Bt))],Q);let Vt=class extends n{constructor(e,t,n,r,i,a,o){super(),this._commandService=e,this._renderManagerService=t,this._drawingManagerService=n,this._dialogService=r,this._imageIoService=i,this._currentUniverService=a,this._drawingRenderService=o,this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddListener(),this._commandExecutedListener(),this._imageUpdateListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id===Qe.id){let t=e.params;if(t==null)return;this._resetImageSize(t)}}))}_getSceneAndTransformerByDrawingSearch(e){if(e==null)return;let t=this._renderManagerService.getRenderById(e),n=t==null?void 0:t.scene;return n==null?null:{scene:n,transformer:n.getTransformerByCreate()}}_resetImageSize(e){let t=[],n=[];e.forEach(e=>{let{unitId:i,subUnitId:a,drawingId:o}=e,s=this._getSceneAndTransformerByDrawingSearch(i);if(s==null)return;let{scene:c}=s,l=C({unitId:i,subUnitId:a,drawingId:o}),u=c.getObject(l);if(u==null)return!0;let d=this._drawingManagerService.getDrawingByParam(e);if(d==null)return!0;if(d.drawingType!==r.DRAWING_IMAGE)return;u.resetSize();let{width:f,height:p}=u.getNativeSize();n.includes(c)===!1&&n.push(c),t.push({...d,transform:{...d.transform,height:p,width:f,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(t),n.forEach(e=>{e.getTransformerByCreate().refreshControls().changeNotification()}),this._commandService.syncExecuteCommand(S.id,e)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.pipe(xe(33),Se(e=>e.length>0),Ce(e=>e.flat()),Ce(e=>{let t=new Map;for(let n of e)t.set(`${n.unitId}|${n.subUnitId}|${n.drawingId}`,n);return[...t.values()]}),Se(e=>e.length>0)).subscribe(e=>{this._insertImages(e)}))}_insertImages(e){e.forEach(async e=>{var t;let{unitId:n,subUnitId:r}=e,i=this._getSceneAndTransformerByDrawingSearch(n),a=(t=et(this._currentUniverService,n))==null?void 0:t.subUnitId;if(i==null||a!==r)return;let o=this._drawingManagerService.getDrawingByParam(e);if(o==null)return;let s=await this._drawingRenderService.renderImages(o,i.scene);if(this._drawingManagerService.refreshTransform([o]),!(s==null||s.length===0))for(let e of s)this._addHoverForImage(e),this._addDialogForImage(e)})}_imageUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(e=>{e.forEach(e=>{let{unitId:t,subUnitId:n,drawingId:i}=e,a=this._drawingManagerService.getDrawingByParam(e);if(a==null)return;let{transform:o,drawingType:s,srcRect:l,prstGeom:u,source:d,imageSourceType:f}=a;if(s!==r.DRAWING_IMAGE)return;let p=this._getSceneAndTransformerByDrawingSearch(t);if(p==null)return;let{scene:m,transformer:h}=p;if(o==null)return!0;let g=C({unitId:t,subUnitId:n,drawingId:i}),_=m.getObject(g);if(_==null)return!0;_.setSrcRect(l),_.setPrstGeom(u),d!=null&&d.length>0&&(f===c.BASE64||f===c.URL)&&_.changeSource(d)})}))}_addHoverForImage(e){this.disposeWithMe(v(e.onPointerEnter$.subscribeEvent(()=>{e.cursor=w.GRAB}))),this.disposeWithMe(v(e.onPointerLeave$.subscribeEvent(()=>{e.cursor=w.DEFAULT})))}_addDialogForImage(e){this.disposeWithMe(v(e.onDblclick$.subscribeEvent(()=>{let t=`${e.oKey}-viewer-dialog`;this._drawingRenderService.previewImage(t,e.getNative().src,e.getNativeSize().width,e.getNativeSize().height)})))}};Vt=X([Y(0,i),Y(1,k),Y(2,y),Y(3,me),Y(4,b),Y(5,s),Y(6,l(Q))],Vt);let $=class extends f{constructor(e=it,t,n){super(),this._config=e,this._injector=t,this._configService=n;let{menu:r,...i}=_({},it,this._config);r&&this._configService.setConfig(`menu`,r,{merge:!0}),this._configService.setConfig(rt,i)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(Ft),this._injector.get(At),this._injector.get(Rt),this._injector.get(Vt)}_initDependencies(){[[Bt],[Q],[Ft],[At],[Rt],[Vt]].forEach(e=>this._injector.add(e))}};Z($,`pluginName`,`UNIVER_DRAWING_UI_PLUGIN`),Z($,`packageName`,tt),Z($,`version`,nt),$=X([Y(1,l(u)),Y(2,a)],$);const Ht=e=>{let t=R(i),n=R(d),{drawings:r,alignShow:a}=e,[o,s]=V(W.default),c=[{label:n.t(`image-panel.align.default`),value:W.default},{options:[{label:n.t(`image-panel.align.left`),value:W.left},{label:n.t(`image-panel.align.center`),value:W.center},{label:n.t(`image-panel.align.right`),value:W.right}]},{options:[{label:n.t(`image-panel.align.top`),value:W.top},{label:n.t(`image-panel.align.middle`),value:W.middle},{label:n.t(`image-panel.align.bottom`),value:W.bottom}]},{options:[{label:n.t(`image-panel.align.horizon`),value:W.horizon},{label:n.t(`image-panel.align.vertical`),value:W.vertical}]}];function l(e){s(e),t.executeCommand(G.id,{alignType:e,drawings:r})}return U(`div`,{className:B(`univer-relative univer-w-full`,{"univer-hidden":!a}),children:[H(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:H(`div`,{children:n.t(`image-panel.align.title`)})}),H(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:H(`div`,{className:`univer-w-full univer-text-gray-900 dark:!univer-text-white`,children:H(Ae,{value:o,options:c,onChange:l})})})]})},Ut=t=>{let{arrangeShow:n,drawings:r}=t,a=R(d),o=R(y),s=R(i),c=R(de),l=c.get(`MoveUpIcon`),u=c.get(`MoveDownIcon`),f=c.get(`TopmostIcon`),p=c.get(`BottomIcon`),[m,h]=V(r);Me(()=>{let e=o.focus$.subscribe(e=>{h(e)});return()=>{e.unsubscribe()}},[]);let g=e=>{s.syncExecuteCommand(K.id,{arrangeType:e,drawings:m})};return U(`div`,{className:B(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!n}),children:[H(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:H(`div`,{children:a.t(`image-panel.arrange.title`)})}),U(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2`,children:[U(z,{onClick:()=>{g(e.forward)},children:[H(l,{}),a.t(`image-panel.arrange.forward`)]}),U(z,{onClick:()=>{g(e.backward)},children:[H(u,{}),a.t(`image-panel.arrange.backward`)]}),U(z,{onClick:()=>{g(e.front)},children:[H(f,{}),a.t(`image-panel.arrange.front`)]}),U(z,{onClick:()=>{g(e.back)},children:[H(p,{}),a.t(`image-panel.arrange.back`)]})]})]})},Wt=e=>{let t=R(d),n=R(k),a=R(y),o=R(i),s=R(de),{hasGroup:c,drawings:l}=e,u=s.get(`GroupIcon`),f=s.get(`UngroupIcon`),[p,m]=V(!1),[h,g]=V(!0),[_,v]=V(!0),b=()=>{o.syncExecuteCommand(Je.id,{drawings:l})},x=()=>{o.syncExecuteCommand(Ye.id,{drawings:l})};return Me(()=>{let e=l[0];if(e==null)return;let{unitId:t}=e,i=n.getRenderById(t),o=i==null?void 0:i.scene;if(o==null)return;let s=o.getTransformerByCreate(),c=s.clearControl$.subscribe(e=>{e===!0&&m(!1)}),u=s.changeStart$.subscribe(e=>{let{objects:t}=e,n=jt(t,a),i=n.filter(e=>(e==null?void 0:e.drawingType)===r.DRAWING_GROUP),o=!1,s=!1;n.length>1&&(o=!0),i.length>0&&(s=!0),m(o||s),g(o),v(s)});return()=>{u.unsubscribe(),c.unsubscribe()}},[]),U(`div`,{className:B(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":c===!0&&p===!1||c===!1}),children:[H(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:H(`div`,{children:t.t(`image-panel.group.title`)})}),U(`div`,{className:`univer-flex univer-items-center univer-justify-center univer-gap-2`,children:[U(z,{className:B({"univer-hidden":!h}),onClick:b,children:[H(u,{}),t.t(`image-panel.group.group`)]}),U(z,{className:B({"univer-hidden":!_}),onClick:x,children:[H(f,{}),t.t(`image-panel.group.unGroup`)]})]})]})},Gt=[-360,360],Kt=e=>{var t;let n=R(d),r=R(y),i=R(k),{drawings:a,transformShow:o}=e,s=a[0];if(s==null)return;let c=s.transform;if(c==null)return;let{unitId:l,subUnitId:u,drawingId:f,drawingType:p}=s,m=i.getRenderById(l),g=m==null?void 0:m.scene;if(g==null)return;let _=(t=g.getEngine())==null?void 0:t.activeScene;if(_==null)return;let v=g.getTransformerByCreate(),{width:b=0,height:x=0,left:S=0,top:C=0,angle:w=0}=c,[T,E]=V(b),[D,O]=V(x),[A,j]=V(S),[M,N]=V(C),[P,F]=V(w),[ee,I]=V(v.keepRatio),te=(e,t,n,r)=>{let{width:i,height:a}=_,{ancestorLeft:o,ancestorTop:s}=g,c=e,l=t,u=n,d=r;return e+o<0&&(c=-o),t+s<0&&(l=-s),u=i-c-o,u<20&&(u=20),d=a-l-s,d<20&&(d=20),e+u+o>i&&(c=i-n-o),t+d+s>a&&(l=a-r-s),{limitLeft:c,limitTop:l,limitWidth:u,limitHeight:d}},ne=e=>{let{objects:t}=e,n=jt(t,r);if(n.length!==1)return;let i=n[0];if(i==null)return;let{transform:a}=i;if(a==null)return;let{width:o,height:s,left:c,top:l,angle:u}=a;o!=null&&E(o),s!=null&&O(s),c!=null&&j(c),l!=null&&N(l),u!=null&&F(u)};Me(()=>{let e=[v.changeStart$.subscribe(e=>{ne(e)}),v.changing$.subscribe(e=>{ne(e)}),v.changeEnd$.subscribe(e=>{ne(e)}),r.focus$.subscribe(e=>{if(e.length!==1)return;let t=r.getDrawingByParam(e[0]);if(t==null)return;let n=t.transform;if(n==null)return;let{width:i,height:a,left:o,top:s,angle:c}=n;i!=null&&E(i),a!=null&&O(a),o!=null&&j(o),s!=null&&N(s),c!=null&&F(c)})];return()=>{e.forEach(e=>e.unsubscribe())}},[]);let re=h(e=>{if(e==null)return;let{limitWidth:t,limitHeight:n}=te(A,M,e,D);e=Math.min(e,t);let i={unitId:l,subUnitId:u,drawingId:f,drawingType:p,transform:{width:e}};if(ee){let t=e/T*D;if(t=Math.max(t,20),t>n)return;O(t),i.transform.height=t}E(e),r.featurePluginUpdateNotification([i]),v.refreshControls().changeNotification()},300),ie=h(e=>{if(e==null)return;let{limitHeight:t,limitWidth:n}=te(A,M,T,e);e=Math.min(e,t);let i={unitId:l,subUnitId:u,drawingId:f,drawingType:p,transform:{height:e}};if(ee){let t=e/D*T;if(t=Math.max(t,20),t>n)return;E(t),i.transform.width=t}O(e),r.featurePluginUpdateNotification([i]),v.refreshControls().changeNotification()},300),ae=h(e=>{if(e==null)return;let{limitLeft:t}=te(e,M,T,D);e=t;let n={unitId:l,subUnitId:u,drawingId:f,drawingType:p,transform:{left:e}};j(e),r.featurePluginUpdateNotification([n]),v.refreshControls().changeNotification()},300),oe=h(e=>{if(e==null)return;let{limitTop:t}=te(A,e,T,D);e=t;let n={unitId:l,subUnitId:u,drawingId:f,drawingType:p,transform:{top:e}};N(e),r.featurePluginUpdateNotification([n]),v.refreshControls().changeNotification()},300),se=e=>{if(e==null)return;let t={unitId:l,subUnitId:u,drawingId:f,drawingType:p,transform:{angle:e}};F(e),r.featurePluginUpdateNotification([t]),v.refreshControls().changeNotification()},ce=e=>{I(e),v.keepRatio=e};return U(`div`,{className:B(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!o}),children:[H(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:H(`div`,{children:n.t(`image-panel.transform.title`)})}),U(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.width`)}),H(Oe,{precision:1,value:T,min:20,onChange:e=>{re(e)}})]}),U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.height`)}),H(Oe,{precision:1,value:D,min:20,onChange:e=>{ie(e)}})]}),U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.lock`)}),H(`div`,{className:`univer-text-center`,children:H(Ee,{checked:ee,onChange:ce})})]})]}),U(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.x`)}),H(Oe,{precision:1,value:A,onChange:e=>{ae(e)}})]}),U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.y`)}),H(Oe,{precision:1,value:M,onChange:e=>{oe(e)}})]}),U(`div`,{children:[H(`span`,{children:n.t(`image-panel.transform.rotate`)}),H(Oe,{precision:1,value:P,min:Gt[0],max:Gt[1],onChange:se})]})]})]})},qt=e=>{let t=R(i),n=R(d),r=R(Bt),a=R(de),o=ve(r.canUseShapeClip$,!1),{drawings:s,cropperShow:c}=e;if(s[0]==null)return;let[l,u]=V(J.FREE),f=Ne(!1),p=[{label:n.t(`image-panel.crop.mode`),value:J.FREE},{label:`1:1`,value:J.R1_1},{label:`16:9`,value:J.R16_9},{label:`9:16`,value:J.R9_16},{label:`5:4`,value:J.R5_4},{label:`4:5`,value:J.R4_5},{label:`4:3`,value:J.R4_3},{label:`3:4`,value:J.R3_4},{label:`3:2`,value:J.R3_2},{label:`2:3`,value:J.R2_3}];Me(()=>{let e=t.onCommandExecuted(e=>{if(e.id===q.id){let t=e.params;t!=null&&t.isAuto||(f.current=!1)}});return()=>{e==null||e.dispose()}},[]);function m(e){u(e),f.current&&t.executeCommand(Ze.id,{cropType:e})}let h=e=>{t.executeCommand(Ze.id,{cropType:e}),f.current=!0};return U(`div`,{className:B(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!c}),children:[H(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:H(`div`,{children:n.t(`image-panel.crop.title`)})}),U(`div`,{className:`univer-flex univer-items-center univer-justify-center univer-gap-2`,children:[U(z,{onClick:()=>{h(l)},children:[H(ie,{}),n.t(`image-panel.crop.start`)]}),H(Ae,{value:l,options:p,onChange:m})]}),o&&(()=>{let e=a.get(`sheet.image-clip.shape.picker.component`);return e?H(e,{}):null})()]})},Jt=e=>{let t=R(y),n=R(k),r=R(d),{drawings:i,hasArrange:a=!0,hasTransform:o=!0,hasAlign:s=!0,hasCropper:c=!0,hasGroup:l=!0}=e,u=i[0];if(u==null)return;let{unitId:f}=u,p=n.getRenderById(f),m=p==null?void 0:p.scene;if(m==null)return;let h=m.getTransformerByCreate(),[g,_]=V(!0),[v,b]=V(!0),[x,S]=V(!1),[C,w]=V(!0),[T,E]=V(!1);return Me(()=>{let e=h.clearControl$.subscribe(e=>{e===!0&&(_(!1),b(!1),S(!1),w(!1),E(!0))}),n=h.changeStart$.subscribe(e=>{let{objects:n}=e,r=jt(n,t);r.length===0?(_(!1),b(!1),S(!1),w(!1),E(!0)):r.length===1?(_(!0),b(!0),S(!1),w(!0),E(!1)):(_(!0),b(!1),S(!0),w(!1),E(!1))}),r=t.focus$.subscribe(e=>{e.length===0?(_(!1),b(!1),S(!1),w(!1),E(!0)):e.length===1?(_(!0),b(!0),S(!1),w(!0),E(!1)):(_(!0),b(!1),S(!0),w(!1),E(!1))});return()=>{n.unsubscribe(),e.unsubscribe(),r.unsubscribe()}},[]),U(Pe,{children:[H(`div`,{className:B(`univer-h-full`,{"univer-hidden":!T}),children:H(`div`,{className:`univer-flex univer-h-full univer-items-center univer-justify-center`,children:H(`span`,{children:r.t(`image-panel.null`)})})}),H(Ut,{arrangeShow:a===!0?g:!1,drawings:i}),H(Kt,{transformShow:o===!0?v:!1,drawings:i}),H(Ht,{alignShow:s===!0?x:!1,drawings:i}),H(qt,{cropperShow:c===!0?C:!1,drawings:i}),H(Wt,{hasGroup:l,drawings:i})]})};export{Ze as AutoImageCropOperation,Ot as COMPONENT_IMAGE_POPUP_MENU,Ye as CancelDrawingGroupOperation,q as CloseImageCropOperation,qe as DRAWING_GROUP_TYPES,Jt as DrawingCommonPanel,Bt as DrawingImageClipService,Q as DrawingRenderService,zt as IMAGE_CLIP_SHAPE_PICKER_COMPONENT,Lt as ImageCropperObject,kt as ImagePopupMenu,Qe as ImageResetSizeOperation,Xe as OpenImageCropOperation,G as SetDrawingAlignOperation,K as SetDrawingArrangeOperation,Je as SetDrawingGroupOperation,$ as UniverDrawingUIPlugin,et as getCurrentUnitInfo,jt as getUpdateParams,$e as insertGroupObject};
+import { ArrangeTypeEnum, CommandType, Disposable, DrawingTypeEnum, ICommandService, IConfigService, IURLImageService, IUniverInstanceService, ImageSourceType, Inject, Injector, LocaleService, Plugin, UniverInstanceType, checkIfMove, debounce, generateRandomId, merge, toDisposable } from "@univerjs/core";
+import { IDrawingManagerService, IImageIoService, ImageSourceType as ImageSourceType$1, SetDrawingSelectedOperation, getDrawingShapeKeyByDrawingSearch } from "@univerjs/drawing";
+import { CURSOR_TYPE, Canvas, DRAWING_OBJECT_LAYER_INDEX, DrawingGroupObject, Group, IRenderManagerService, Image, RENDER_CLASS_TYPE, Rect, Shape, Vector2, degToRad, getGroupState, precisionTo, transformObjectOutOfGroup } from "@univerjs/engine-render";
+import { AutofillDoubleIcon, BottomIcon, CreateCopyIcon, GroupIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, TopmostIcon, UngroupIcon } from "@univerjs/icons";
+import { ComponentManager, ContextMenuGroup, ContextMenuPosition, IDialogService, IGalleryService, IMenuManagerService, IMessageService, MenuItemType, useDependency, useObservable } from "@univerjs/ui";
+import { BehaviorSubject, Observable, bufferTime, filter, map, of, switchMap } from "rxjs";
+import { Button, Checkbox, DropdownMenu, InputNumber, MessageType, Select, borderClassName, clsx } from "@univerjs/design";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/commands/operations/drawing-align.operation.ts
+let AlignType = /* @__PURE__ */ function(AlignType) {
+	AlignType["default"] = "0";
+	AlignType["left"] = "1";
+	AlignType["center"] = "2";
+	AlignType["right"] = "3";
+	AlignType["top"] = "4";
+	AlignType["middle"] = "5";
+	AlignType["bottom"] = "6";
+	AlignType["horizon"] = "7";
+	AlignType["vertical"] = "8";
+	return AlignType;
+}({});
+/**
+* Set drawing align operation, including left, center, right, top, middle, bottom, horizon and vertical align.
+*/
+const SetDrawingAlignOperation = {
+	id: "sheet.operation.set-image-align",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const SetDrawingAlignLeftOperation = {
+	id: "sheet.operation.set-drawing-align-left",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.left });
+	}
+};
+const SetDrawingAlignCenterOperation = {
+	id: "sheet.operation.set-drawing-align-center",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.center });
+	}
+};
+const SetDrawingAlignRightOperation = {
+	id: "sheet.operation.set-drawing-align-right",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.right });
+	}
+};
+const SetDrawingAlignTopOperation = {
+	id: "sheet.operation.set-drawing-align-top",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.top });
+	}
+};
+const SetDrawingAlignMiddleOperation = {
+	id: "sheet.operation.set-drawing-align-middle",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.middle });
+	}
+};
+const SetDrawingAlignBottomOperation = {
+	id: "sheet.operation.set-drawing-align-bottom",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.bottom });
+	}
+};
+const SetDrawingAlignHorizonOperation = {
+	id: "sheet.operation.set-drawing-align-horizon",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.horizon });
+	}
+};
+const SetDrawingAlignVerticalOperation = {
+	id: "sheet.operation.set-drawing-align-vertical",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.vertical });
+	}
+};
+
+//#endregion
+//#region src/commands/operations/drawing-arrange.operation.ts
+/**
+* Set the layer of the drawing, including forward, backward, front, and back
+*/
+const SetDrawingArrangeOperation = {
+	id: "drawing.operation.set-drawing-arrange",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		const { arrangeType } = params;
+		const drawings = params.drawings || drawingManagerService.getFocusDrawings();
+		const { unitId, subUnitId } = drawings[0];
+		const drawingIds = drawings.map((drawing) => drawing.drawingId);
+		drawingManagerService.featurePluginOrderUpdateNotification({
+			unitId,
+			subUnitId,
+			drawingIds,
+			arrangeType
+		});
+		return true;
+	}
+};
+const SetDrawingArrangeFrontOperation = {
+	id: "drawing.operation.set-drawing-arrange-front",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.front });
+	}
+};
+const SetDrawingArrangeForwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-forward",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.forward });
+	}
+};
+const SetDrawingArrangeBackOperation = {
+	id: "drawing.operation.set-drawing-arrange-back",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.back });
+	}
+};
+const SetDrawingArrangeBackwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-backward",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: ArrangeTypeEnum.backward });
+	}
+};
+
+//#endregion
+//#region src/commands/operations/drawing-group.operation.ts
+/**
+* Now only support grouping images, shapes, and groups.
+*/
+const DRAWING_GROUP_TYPES = [
+	DrawingTypeEnum.DRAWING_IMAGE,
+	DrawingTypeEnum.DRAWING_SHAPE,
+	DrawingTypeEnum.DRAWING_GROUP
+];
+/**
+* Group the selected drawings into a new group. The selected drawings must be of type image, shape, or group, and there must be at least 2 drawings selected.
+*/
+const SetDrawingGroupOperation = {
+	id: "drawing.operation.set-drawing-group",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		const drawings = params.drawings || drawingManagerService.getFocusDrawings();
+		if (drawings.length < 2) return false;
+		if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return false;
+		const { unitId, subUnitId } = drawings[0];
+		const groupId = generateRandomId(10);
+		const groupTransform = getGroupState(0, 0, drawings.map((o) => o.transform || {}));
+		const groupParam = {
+			unitId,
+			subUnitId,
+			drawingId: groupId,
+			drawingType: DrawingTypeEnum.DRAWING_GROUP,
+			transform: groupTransform,
+			groupBaseBound: {
+				left: groupTransform.left,
+				top: groupTransform.top,
+				width: groupTransform.width,
+				height: groupTransform.height
+			}
+		};
+		const children = drawings.map((drawing) => {
+			const transform = drawing.transform || {
+				left: 0,
+				top: 0
+			};
+			const { unitId, subUnitId, drawingId } = drawing;
+			return {
+				unitId,
+				subUnitId,
+				drawingId,
+				transform: { ...transform },
+				groupId
+			};
+		});
+		drawingManagerService.featurePluginGroupUpdateNotification([{
+			parent: groupParam,
+			children
+		}]);
+		return true;
+	}
+};
+/**
+* Ungroup the selected groups. The selected drawings must be at least 1 group selected.
+*/
+const CancelDrawingGroupOperation = {
+	id: "drawing.operation.cancel-drawing-group",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(IDrawingManagerService);
+		const groupParams = (params.drawings || drawingManagerService.getFocusDrawings()).map((drawing) => {
+			if (drawing.drawingType !== DrawingTypeEnum.DRAWING_GROUP) return null;
+			const { unitId, subUnitId, drawingId, transform: groupTransform = {
+				width: 0,
+				height: 0
+			}, groupBaseBound } = drawing;
+			if (groupTransform === null) return null;
+			const objects = drawingManagerService.getDrawingsByGroup({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			if (objects.length === 0) return null;
+			return {
+				parent: drawing,
+				children: objects.map((object) => {
+					const { transform } = object;
+					const { unitId, subUnitId, drawingId } = object;
+					const newTransform = transformObjectOutOfGroup(transform || {}, groupTransform, groupTransform.width || 0, groupTransform.height || 0, groupBaseBound);
+					return {
+						unitId,
+						subUnitId,
+						drawingId,
+						transform: {
+							...transform,
+							...newTransform
+						},
+						groupId: void 0
+					};
+				})
+			};
+		}).filter((o) => o !== null);
+		if (groupParams.length === 0) return false;
+		drawingManagerService.featurePluginUngroupUpdateNotification(groupParams);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/image-crop.operation.ts
+const OpenImageCropOperation = {
+	id: "sheet.operation.open-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const CloseImageCropOperation = {
+	id: "sheet.operation.close-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+let CropType = /* @__PURE__ */ function(CropType) {
+	CropType["FREE"] = "0";
+	CropType["R1_1"] = "1";
+	CropType["R16_9"] = "2";
+	CropType["R9_16"] = "3";
+	CropType["R5_4"] = "4";
+	CropType["R4_5"] = "5";
+	CropType["R4_3"] = "6";
+	CropType["R3_4"] = "7";
+	CropType["R3_2"] = "8";
+	CropType["R2_3"] = "9";
+	return CropType;
+}({});
+const AutoImageCropOperation = {
+	id: "sheet.operation.Auto-image-crop",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/image-reset-size.operation.ts
+const ImageResetSizeOperation = {
+	id: "sheet.operation.image-reset-size",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+
+//#endregion
+//#region src/controllers/utils.ts
+function insertGroupObject(objectParam, object, scene, drawingManagerService) {
+	const groupParam = drawingManagerService.getDrawingByParam(objectParam);
+	if (groupParam == null) return;
+	const groupKey = getDrawingShapeKeyByDrawingSearch(objectParam);
+	const groupObject = scene.getObjectIncludeInGroup(groupKey);
+	if (groupObject && !(groupObject instanceof Group)) return;
+	if (groupObject != null) {
+		const objects = groupObject.getObjects();
+		for (const obj of objects) if (obj.oKey === object.oKey) return;
+		groupObject.addObject(object);
+		return;
+	}
+	const group = new DrawingGroupObject(groupKey);
+	scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
+	group.addObject(object);
+	const { transform, groupBaseBound } = groupParam;
+	if (groupBaseBound) group.setBaseBound(groupBaseBound);
+	if (groupParam.groupId) {
+		group.isInGroup = true;
+		insertGroupObject({
+			drawingId: groupParam.groupId,
+			unitId: objectParam.unitId,
+			subUnitId: objectParam.subUnitId
+		}, group, scene, drawingManagerService);
+	}
+	transform && group.transformByState({
+		left: transform.left,
+		top: transform.top,
+		angle: transform.angle,
+		width: transform.width,
+		height: transform.height
+	});
+}
+function getCurrentUnitInfo(currentUniverService, propUnitId) {
+	const current = propUnitId ? currentUniverService.getUnit(propUnitId) : currentUniverService.getFocusedUnit();
+	if (current == null) return;
+	const unitId = current.getUnitId();
+	let subUnitId;
+	if (current.type === UniverInstanceType.UNIVER_SHEET) {
+		var _getActiveSheet;
+		subUnitId = (_getActiveSheet = current.getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
+	} else if (current.type === UniverInstanceType.UNIVER_DOC) subUnitId = unitId;
+	else if (current.type === UniverInstanceType.UNIVER_SLIDE) subUnitId = unitId;
+	return {
+		unitId,
+		subUnitId,
+		current
+	};
+}
+
+//#endregion
+//#region package.json
+var name = "@univerjs/drawing-ui";
+var version = "0.21.0";
+
+//#endregion
+//#region src/config/config.ts
+const DRAWING_UI_PLUGIN_CONFIG_KEY = "drawing-ui.config";
+const configSymbol = Symbol(DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/menu/align.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$$1 = (accessor) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (drawings.length < 2) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+};
+const DRAWING_ALIGN_CONTEXT_MENU_ID = "contextMenu.drawing-align";
+function DrawingAlignContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_ALIGN_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
+	};
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "image-panel.align.left"
+	};
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.center"
+	};
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "image-panel.align.right"
+	};
+}
+function SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "image-panel.align.top"
+	};
+}
+function SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "image-panel.align.middle"
+	};
+}
+function SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "image-panel.align.bottom"
+	};
+}
+function SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.horizon"
+	};
+}
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "image-panel.align.vertical"
+	};
+}
+
+//#endregion
+//#region src/menu/arrange.menu.ts
+const DRAWING_ARRANGE_CONTEXT_MENU_ID = "contextMenu.drawing-arrange";
+function DrawingArrangeContextMenuItemFactory() {
+	return {
+		id: DRAWING_ARRANGE_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "TopmostIcon",
+		title: "image-panel.arrange.title"
+	};
+}
+function SetDrawingArrangeFrontMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeFrontOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "TopmostIcon",
+		title: "image-panel.arrange.front"
+	};
+}
+function SetDrawingArrangeForwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeForwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveUpIcon",
+		title: "image-panel.arrange.forward"
+	};
+}
+function SetDrawingArrangeBackMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "BottomIcon",
+		title: "image-panel.arrange.back"
+	};
+}
+function SetDrawingArrangeBackwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackwardOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "MoveDownIcon",
+		title: "image-panel.arrange.backward"
+	};
+}
+
+//#endregion
+//#region src/menu/group.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$ = (accessor, type) => {
+	const drawingManagerService = accessor.get(IDrawingManagerService);
+	return new Observable((subscriber) => {
+		const update = (drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			if (type === "group") {
+				if (drawings.length < 2) return subscriber.next(true);
+				if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			} else if (type === "unGroup") {
+				if (drawings.filter((drawing) => drawing.drawingType === DrawingTypeEnum.DRAWING_GROUP).length === 0) return subscriber.next(true);
+			} else if (!drawings.every((drawing) => DRAWING_GROUP_TYPES.includes(drawing.drawingType))) return subscriber.next(true);
+			subscriber.next(false);
+		};
+		const subscription = drawingManagerService.focus$.subscribe((drawings) => {
+			if (!drawings || drawings.length === 0) return subscriber.next(true);
+			update(drawings);
+		});
+		update(drawingManagerService.getFocusDrawings());
+		return () => subscription.unsubscribe();
+	});
+};
+const DRAWING_GROUP_CONTEXT_MENU_ID = "contextMenu.drawing-group";
+function DrawingGroupContextMenuItemFactory(accessor) {
+	return {
+		id: DRAWING_GROUP_CONTEXT_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "GroupIcon",
+		title: "image-panel.group.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
+	};
+}
+function SetDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: SetDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "GroupIcon",
+		title: "image-panel.group.group",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
+	};
+}
+function CancelDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: CancelDrawingGroupOperation.id,
+		type: MenuItemType.BUTTON,
+		icon: "UngroupIcon",
+		title: "image-panel.group.unGroup",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [ContextMenuPosition.DRAWING]: { [ContextMenuGroup.OTHERS]: {
+	[DRAWING_GROUP_CONTEXT_MENU_ID]: {
+		order: 1,
+		menuItemFactory: DrawingGroupContextMenuItemFactory,
+		[SetDrawingGroupOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingGroupMenuItemFactory
+		},
+		[CancelDrawingGroupOperation.id]: {
+			order: 1,
+			menuItemFactory: CancelDrawingGroupMenuItemFactory
+		}
+	},
+	[DRAWING_ARRANGE_CONTEXT_MENU_ID]: {
+		order: 2,
+		menuItemFactory: DrawingArrangeContextMenuItemFactory,
+		[SetDrawingArrangeFrontOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingArrangeFrontMenuItemFactory
+		},
+		[SetDrawingArrangeForwardOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingArrangeForwardMenuItemFactory
+		},
+		[SetDrawingArrangeBackOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingArrangeBackMenuItemFactory
+		},
+		[SetDrawingArrangeBackwardOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingArrangeBackwardMenuItemFactory
+		}
+	},
+	[DRAWING_ALIGN_CONTEXT_MENU_ID]: {
+		order: 3,
+		menuItemFactory: DrawingAlignContextMenuItemFactory,
+		[SetDrawingAlignLeftOperation.id]: {
+			order: 0,
+			menuItemFactory: SetDrawingAlignLeftMenuItemFactory
+		},
+		[SetDrawingAlignCenterOperation.id]: {
+			order: 1,
+			menuItemFactory: SetDrawingAlignCenterMenuItemFactory
+		},
+		[SetDrawingAlignRightOperation.id]: {
+			order: 2,
+			menuItemFactory: SetDrawingAlignRightMenuItemFactory
+		},
+		[SetDrawingAlignTopOperation.id]: {
+			order: 3,
+			menuItemFactory: SetDrawingAlignTopMenuItemFactory
+		},
+		[SetDrawingAlignMiddleOperation.id]: {
+			order: 4,
+			menuItemFactory: SetDrawingAlignMiddleMenuItemFactory
+		},
+		[SetDrawingAlignBottomOperation.id]: {
+			order: 5,
+			menuItemFactory: SetDrawingAlignBottomMenuItemFactory
+		},
+		[SetDrawingAlignHorizonOperation.id]: {
+			order: 6,
+			menuItemFactory: SetDrawingAlignHorizonMenuItemFactory
+		},
+		[SetDrawingAlignVerticalOperation.id]: {
+			order: 7,
+			menuItemFactory: SetDrawingAlignVerticalMenuItemFactory
+		}
+	}
+} } };
+
+//#endregion
+//#region src/views/image-popup-menu/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const COMPONENT_IMAGE_POPUP_MENU = "COMPONENT_IMAGE_POPUP_MENU";
+
+//#endregion
+//#region src/views/image-popup-menu/ImagePopupMenu.tsx
+function ImagePopupMenu(props) {
+	var _popup$extraProps;
+	const { popup } = props;
+	const menuItems = popup === null || popup === void 0 || (_popup$extraProps = popup.extraProps) === null || _popup$extraProps === void 0 ? void 0 : _popup$extraProps.menuItems;
+	if (!menuItems) return null;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(DropdownMenu, {
+			align: "start",
+			items: menuItems.map((item) => ({
+				type: "item",
+				children: localeService.t(item.label),
+				disabled: item.disable,
+				onSelect: () => handleClick(item)
+			})),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/controllers/drawing-ui.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let DrawingUIController = class DrawingUIController extends Disposable {
+	constructor(_componentManager, _commandService, _menuManagerService) {
+		super();
+		this._componentManager = _componentManager;
+		this._commandService = _commandService;
+		this._menuManagerService = _menuManagerService;
+		this._init();
+	}
+	_init() {
+		this._initMenus();
+		this._initCommands();
+		this._initComponents();
+	}
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+	_initCommands() {
+		[
+			OpenImageCropOperation,
+			CloseImageCropOperation,
+			ImageResetSizeOperation,
+			SetDrawingAlignOperation,
+			SetDrawingAlignLeftOperation,
+			SetDrawingAlignCenterOperation,
+			SetDrawingAlignRightOperation,
+			SetDrawingAlignTopOperation,
+			SetDrawingAlignMiddleOperation,
+			SetDrawingAlignBottomOperation,
+			SetDrawingAlignHorizonOperation,
+			SetDrawingAlignVerticalOperation,
+			AutoImageCropOperation,
+			SetDrawingGroupOperation,
+			CancelDrawingGroupOperation,
+			SetDrawingArrangeOperation,
+			SetDrawingArrangeFrontOperation,
+			SetDrawingArrangeForwardOperation,
+			SetDrawingArrangeBackOperation,
+			SetDrawingArrangeBackwardOperation
+		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+	}
+	_initComponents() {
+		[
+			[COMPONENT_IMAGE_POPUP_MENU, ImagePopupMenu],
+			["BottomIcon", BottomIcon],
+			["GroupIcon", GroupIcon],
+			["MoveDownIcon", MoveDownIcon],
+			["MoveUpIcon", MoveUpIcon],
+			["TopmostIcon", TopmostIcon],
+			["UngroupIcon", UngroupIcon]
+		].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
+	}
+};
+DrawingUIController = __decorate([
+	__decorateParam(0, Inject(ComponentManager)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IMenuManagerService)
+], DrawingUIController);
+
+//#endregion
+//#region src/utils/get-update-params.ts
+function getUpdateParams(objects, drawingManagerService) {
+	const params = [];
+	objects.forEach((object) => {
+		const { oKey, left, top, height, width, angle } = object;
+		const searchParam = drawingManagerService.getDrawingOKey(oKey);
+		if (searchParam == null) {
+			params.push(null);
+			return true;
+		}
+		const { unitId, subUnitId, drawingId, drawingType } = searchParam;
+		const param = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: {
+				left,
+				top,
+				height,
+				width,
+				angle
+			}
+		};
+		if (drawingType === DrawingTypeEnum.DRAWING_IMAGE) param.srcRect = object.srcRect;
+		params.push(param);
+	});
+	return params;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region src/controllers/drawing-update.controller.ts
+let DrawingUpdateController = class DrawingUpdateController extends Disposable {
+	constructor(_currentUniverService, _commandService, _renderManagerService, _drawingManagerService) {
+		super();
+		this._currentUniverService = _currentUniverService;
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._drawingManagerService = _drawingManagerService;
+		_defineProperty(this, "_sceneListenerOnDrawingMap", /* @__PURE__ */ new WeakSet());
+		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 drawingList = this._drawingManagerService.drawingManagerData;
+		const info = getCurrentUnitInfo(this._currentUniverService);
+		if (info == null) return;
+		const { unitId: currentUnitId, subUnitId: currentSubUnitId } = info;
+		Object.keys(drawingList).forEach((unitId) => {
+			Object.keys(drawingList[unitId]).forEach((subUnitId) => {
+				const drawingMap = drawingList[unitId][subUnitId].data;
+				if (drawingMap == null || unitId !== currentUnitId || subUnitId !== currentSubUnitId) return;
+				Object.keys(drawingMap).forEach((drawingId) => {
+					if (drawingMap[drawingId]) this._insertDrawing([{
+						unitId,
+						subUnitId,
+						drawingId
+					}]);
+				});
+			});
+		});
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === SetDrawingAlignOperation.id) {
+				const params = command.params;
+				if (params == null) return;
+				this._drawingAlign(params);
+			}
+		}));
+	}
+	_drawingGroupListener() {
+		this.disposeWithMe(this._drawingManagerService.group$.subscribe((params) => {
+			this._groupDrawings(params);
+		}));
+		this.disposeWithMe(this._drawingManagerService.ungroup$.subscribe((params) => {
+			this._ungroupDrawings(params);
+		}));
+	}
+	_getSceneAndTransformerByDrawingSearch(unitId) {
+		if (unitId == null) return;
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return null;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate()
+		};
+	}
+	_groupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._groupDrawing(drawing);
+		});
+	}
+	_groupDrawing(params) {
+		const { parent, children } = params;
+		const { unitId, subUnitId, drawingId } = parent;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		const objects = [];
+		children.forEach((drawing) => {
+			const drawingShapeKey = getDrawingShapeKeyByDrawingSearch(drawing);
+			const object = scene.getObjectIncludeInGroup(drawingShapeKey);
+			if (object == null || objects.includes(object)) return;
+			objects.push(object);
+			const { transform } = drawing;
+			if (transform == null) return;
+			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
+		});
+		if (objects.length === 0) return;
+		const group = new DrawingGroupObject(getDrawingShapeKeyByDrawingSearch({
+			unitId,
+			subUnitId,
+			drawingId
+		}));
+		scene.addObject(group, DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(group);
+		group.addObjects(...objects);
+		if (parent.groupBaseBound) group.setBaseBound(parent.groupBaseBound);
+		if (parent.groupId) {
+			group.isInGroup = true;
+			insertGroupObject({
+				drawingId: parent.groupId,
+				unitId,
+				subUnitId
+			}, group, scene, this._drawingManagerService);
+		}
+		parent.transform && group.transformByState({
+			left: parent.transform.left,
+			top: parent.transform.top,
+			width: parent.transform.width,
+			height: parent.transform.height,
+			angle: parent.transform.angle
+		});
+		transformer.clearSelectedObjects();
+		transformer.setSelectedControl(group);
+	}
+	_ungroupDrawings(drawings) {
+		drawings.forEach((drawing) => {
+			this._ungroupDrawing(drawing);
+		});
+	}
+	_ungroupDrawing(drawing) {
+		const { parent, children } = drawing;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(parent.unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		children.forEach((drawing) => {
+			const drawingKey = getDrawingShapeKeyByDrawingSearch(drawing);
+			const object = scene.getObjectIncludeInGroup(drawingKey);
+			if (object == null) return true;
+			if (object == null) return;
+			const { transform } = drawing;
+			if (transform == null) return;
+			if (object.classType === RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
+		});
+		const groupKey = getDrawingShapeKeyByDrawingSearch(parent);
+		const group = scene.getObject(groupKey);
+		const { width, height } = group;
+		group.getObjects().forEach((object) => {
+			group.removeSelfObjectAndTransform(object.oKey, width, height);
+		});
+		group.dispose();
+		transformer.clearSelectedObjects();
+	}
+	_drawingAlign(params) {
+		const { alignType } = params;
+		const drawings = params.drawings || this._drawingManagerService.getFocusDrawings();
+		if (alignType === AlignType.default) return;
+		const drawingTransformCaches = [];
+		let minLeft = Number.POSITIVE_INFINITY;
+		let minTop = Number.POSITIVE_INFINITY;
+		let maxRight = Number.NEGATIVE_INFINITY;
+		let maxBottom = Number.NEGATIVE_INFINITY;
+		let drawingCount = 0;
+		drawings.forEach((drawing) => {
+			const { unitId, subUnitId, drawingId, drawingType } = drawing;
+			const drawingParam = this._drawingManagerService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			if (drawingParam == null || drawingParam.transform == null) return;
+			drawingTransformCaches.push({
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType,
+				transform: drawingParam.transform
+			});
+			const { left = 0, top = 0, width = 0, height = 0 } = drawingParam.transform;
+			minLeft = Math.min(minLeft, left);
+			minTop = Math.min(minTop, top);
+			maxRight = Math.max(maxRight, left + width);
+			maxBottom = Math.max(maxBottom, top + height);
+			drawingCount++;
+		});
+		if (drawingCount === 0) return;
+		this._sortDrawingTransform(drawingTransformCaches, alignType);
+		this._applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount);
+	}
+	_applyAlignType(drawingTransformCaches, alignType, minLeft, minTop, maxRight, maxBottom, drawingCount) {
+		const averageHorizon = Math.round((maxRight - minLeft) / drawingCount * 10) / 10;
+		const averageVertical = Math.round((maxBottom - minTop) / drawingCount * 10) / 10;
+		const updateParams = [];
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(drawingTransformCaches[0].unitId);
+		if (renderObject == null) return;
+		const { scene, transformer } = renderObject;
+		drawingTransformCaches.forEach((drawingTransformCache, index) => {
+			const { unitId, subUnitId, drawingId, transform, drawingType } = drawingTransformCache;
+			const { left = 0, top = 0, width = 0, height = 0 } = transform;
+			let newLeft = left;
+			let newTop = top;
+			switch (alignType) {
+				case AlignType.left:
+					newLeft = minLeft;
+					break;
+				case AlignType.center:
+					newLeft = minLeft + (maxRight - minLeft) / 2 - width / 2;
+					break;
+				case AlignType.right:
+					newLeft = maxRight - width;
+					break;
+				case AlignType.top:
+					newTop = minTop;
+					break;
+				case AlignType.middle:
+					newTop = minTop + (maxBottom - minTop) / 2 - height / 2;
+					break;
+				case AlignType.bottom:
+					newTop = maxBottom - height;
+					break;
+				case AlignType.horizon:
+					newLeft = minLeft + averageHorizon * index;
+					break;
+				case AlignType.vertical:
+					newTop = minTop + averageVertical * index;
+					break;
+				default: break;
+			}
+			if (newLeft !== left || newTop !== top) updateParams.push({
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType,
+				transform: {
+					left: newLeft,
+					top: newTop
+				}
+			});
+		});
+		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
+		transformer.refreshControls().changeNotification();
+	}
+	_sortDrawingTransform(drawingTransformCaches, alignType) {
+		drawingTransformCaches.sort((a, b) => {
+			const aTransform = a.transform;
+			const bTransform = b.transform;
+			const { left: aLeft = 0, top: aTop = 0, width: aWidth = 0, height: aHeight = 0 } = aTransform;
+			const { left: bLeft = 0, top: bTop = 0, width: bWidth = 0, height: bHeight = 0 } = bTransform;
+			switch (alignType) {
+				case AlignType.left: return aLeft - bLeft;
+				case AlignType.center: return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case AlignType.right: return aLeft + aWidth - (bLeft + bWidth);
+				case AlignType.top: return aTop - bTop;
+				case AlignType.middle: return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				case AlignType.bottom: return aTop + aHeight - (bTop + bHeight);
+				case AlignType.horizon: return aLeft + aWidth / 2 - (bLeft + bWidth / 2);
+				case AlignType.vertical: return aTop + aHeight / 2 - (bTop + bHeight / 2);
+				default: return 0;
+			}
+		});
+	}
+	_drawingArrangeListener() {
+		this.disposeWithMe(this._drawingManagerService.order$.subscribe((params) => {
+			this._drawingArrange(params);
+		}));
+	}
+	_drawingArrange(params) {
+		const { unitId, subUnitId, drawingIds } = params;
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+		if (renderObject == null) return;
+		const { scene } = renderObject;
+		drawingIds.forEach((drawingId) => {
+			const oKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const drawingShapes = scene.fuzzyMathObjects(oKey, true);
+			if (drawingShapes == null || drawingShapes.length === 0) return;
+			const index = this._drawingManagerService.getDrawingOrder(unitId, subUnitId).indexOf(drawingId);
+			for (const shape of drawingShapes) {
+				shape.setProps({ zIndex: index });
+				shape.makeDirty();
+			}
+		});
+	}
+	_drawingAddListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.subscribe((params) => {
+			this._insertDrawing(params);
+		}));
+	}
+	_insertDrawing(params) {
+		const sceneList = [];
+		params.forEach((param) => {
+			const { unitId } = param;
+			if (this._drawingManagerService.getDrawingByParam(param) == null) return;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (renderObject == null) return;
+			const { scene } = renderObject;
+			if (!sceneList.includes(scene)) sceneList.push(scene);
+		});
+		sceneList.forEach((scene) => {
+			if (this._sceneListenerOnDrawingMap.has(scene)) return;
+			this._addListenerOnDrawing(scene);
+			this._sceneListenerOnDrawingMap.add(scene);
+		});
+	}
+	_drawingRemoveListener() {
+		this.disposeWithMe(this._drawingManagerService.remove$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId } = param;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene } = renderObject;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShapes = scene.fuzzyMathObjects(drawingShapeKey, true);
+				if (drawingShapes.length > 0) {
+					var _scene$getTransformer;
+					for (const drawingShape of drawingShapes) drawingShape.dispose();
+					(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.clearSelectedObjects();
+				}
+			});
+		}));
+	}
+	_drawingUpdateListener() {
+		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
+			params.forEach((param) => {
+				var _scene$getTransformer2;
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType } = drawingParam;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null) return true;
+				drawingShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				(_scene$getTransformer2 = scene.getTransformer()) === null || _scene$getTransformer2 === void 0 || _scene$getTransformer2.debounceRefreshControls();
+			});
+		}));
+	}
+	_drawingRefreshListener() {
+		this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId } = param;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform } = drawingParam;
+				const { scene } = renderObject;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null || transform == null) return true;
+				const { left = 0, top = 0, width = 0, height = 0, angle = 0, flipX = false, flipY = false, skewX = 0, skewY = 0 } = transform;
+				drawingShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+			});
+		}));
+	}
+	_drawingVisibleListener() {
+		this.disposeWithMe(this._drawingManagerService.visible$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId, visible } = param;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene } = renderObject;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const drawingShape = scene.getObject(drawingShapeKey);
+				if (drawingShape == null) return true;
+				if (visible) drawingShape.show();
+				else drawingShape.hide();
+			});
+		}));
+	}
+	_filterUpdateParams(params, startTransforms) {
+		return params.filter((param, index) => {
+			if (param == null) return false;
+			const { transform } = param;
+			return checkIfMove(transform, startTransforms === null || startTransforms === void 0 ? void 0 : startTransforms[index]);
+		});
+	}
+	_addListenerOnDrawing(scene) {
+		const transformer = scene.getTransformerByCreate();
+		let startTransforms = null;
+		this.disposeWithMe(toDisposable(transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const objectArray = Array.from(objects.values());
+			const drawings = [];
+			startTransforms = objectArray.map((object) => {
+				const { left, top, height, width, angle, oKey, isInGroup } = object;
+				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+				if (isInGroup || object instanceof Group) {
+					let group = object.ancestorGroup;
+					if (group == null && object instanceof Group) group = object;
+					if (group == null) return null;
+					const groupDrawing = this._drawingManagerService.getDrawingOKey(group.oKey);
+					if (groupDrawing) {
+						const { unitId, subUnitId, drawingId } = groupDrawing;
+						drawings.push({
+							unitId,
+							subUnitId,
+							drawingId
+						});
+						const { left, top, height, width, angle } = group;
+						return {
+							left,
+							top,
+							height,
+							width,
+							angle
+						};
+					}
+				} else if (drawing != null) {
+					const { unitId, subUnitId, drawingId } = drawing;
+					drawings.push({
+						unitId,
+						subUnitId,
+						drawingId
+					});
+					return {
+						left,
+						top,
+						height,
+						width,
+						angle
+					};
+				}
+				return null;
+			}).filter((transform) => transform != null);
+			if (drawings.length > 0) this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, drawings);
+			else this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, []);
+		})));
+		this.disposeWithMe(toDisposable(transformer.changeEnd$.subscribe((state) => {
+			const { objects } = state;
+			const params = this._filterUpdateParams(getUpdateParams(objects, this._drawingManagerService), startTransforms);
+			if (params.length > 0) this._drawingManagerService.featurePluginUpdateNotification(params);
+		})));
+	}
+};
+DrawingUpdateController = __decorate([
+	__decorateParam(0, IUniverInstanceService),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IDrawingManagerService)
+], DrawingUpdateController);
+
+//#endregion
+//#region src/views/crop/image-cropper-object.ts
+var ImageCropperObjectType = /* @__PURE__ */ function(ImageCropperObjectType) {
+	ImageCropperObjectType[ImageCropperObjectType["RECT"] = 0] = "RECT";
+	ImageCropperObjectType[ImageCropperObjectType["PATH"] = 1] = "PATH";
+	return ImageCropperObjectType;
+}(ImageCropperObjectType || {});
+var ImageCropperObject = class extends Shape {
+	constructor(key, props) {
+		if (props == null) props = {};
+		props.transformerConfig = {
+			keepRatio: false,
+			isCropper: true,
+			anchorFill: "rgb(0, 0, 0)",
+			anchorStroke: "rgb(255, 255, 255)",
+			anchorSize: 24
+		};
+		super(key, props);
+		_defineProperty(this, "_srcRect", void 0);
+		_defineProperty(this, "_prstGeom", void 0);
+		_defineProperty(this, "_applyTransform", void 0);
+		_defineProperty(this, "_dragPadding", 8);
+		_defineProperty(this, "_cacheCanvas", void 0);
+		if (props === null || props === void 0 ? void 0 : props.srcRect) this._srcRect = props.srcRect;
+		if (props === null || props === void 0 ? void 0 : props.prstGeom) this._prstGeom = props.prstGeom;
+		if (props === null || props === void 0 ? void 0 : props.applyTransform) this._applyTransform = props.applyTransform;
+		if (props === null || props === void 0 ? void 0 : props.dragPadding) this._dragPadding = props.dragPadding;
+		this._applyProps();
+	}
+	refreshSrcRect(value, transform) {
+		this._srcRect = value;
+		this._applyTransform = transform;
+		this._applyProps();
+	}
+	get srcRect() {
+		return this._srcRect;
+	}
+	dispose() {
+		var _this$_cacheCanvas;
+		super.dispose();
+		(_this$_cacheCanvas = this._cacheCanvas) === null || _this$_cacheCanvas === void 0 || _this$_cacheCanvas.dispose();
+		this._srcRect = null;
+	}
+	isHit(coord) {
+		const oCoord = this.getInverseCoord(coord);
+		if (oCoord.x >= -this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 && oCoord.y >= -this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 && !this._inSurround(oCoord)) return true;
+		return false;
+	}
+	_inSurround(oCoord) {
+		const padding = this._dragPadding;
+		if (oCoord.x >= padding - this.strokeWidth / 2 && oCoord.x <= this.width + this.strokeWidth / 2 - padding && oCoord.y >= padding - this.strokeWidth / 2 && oCoord.y <= this.height + this.strokeWidth / 2 - padding) return true;
+		return false;
+	}
+	render(mainCtx, bounds) {
+		if (!this.visible) {
+			this.makeDirty(false);
+			return this;
+		}
+		mainCtx.save();
+		this._draw(mainCtx);
+		mainCtx.restore();
+		this.makeDirty(false);
+		return this;
+	}
+	_draw(ctx) {
+		var _this$_cacheCanvas2, _this$_cacheCanvas3;
+		const { width: engineWidth, height: engineHeight } = this.getScene().getEngine();
+		this._initialCacheCanvas();
+		(_this$_cacheCanvas2 = this._cacheCanvas) === null || _this$_cacheCanvas2 === void 0 || _this$_cacheCanvas2.clear();
+		const cacheCtx = (_this$_cacheCanvas3 = this._cacheCanvas) === null || _this$_cacheCanvas3 === void 0 ? void 0 : _this$_cacheCanvas3.getContext();
+		if (cacheCtx == null) return;
+		cacheCtx.save();
+		Rect.drawWith(cacheCtx, {
+			left: 0,
+			top: 0,
+			width: engineWidth,
+			height: engineHeight,
+			fill: "rgba(0, 0, 0, 0.5)"
+		});
+		cacheCtx.setTransform(ctx.getTransform());
+		this._clipForApplyObject(cacheCtx);
+		this._applyCache(ctx);
+		cacheCtx.restore();
+	}
+	_clipForApplyObject(cacheCtx) {
+		let objectType = ImageCropperObjectType.RECT;
+		if (this._prstGeom != null) objectType = ImageCropperObjectType.PATH;
+		cacheCtx.globalCompositeOperation = "destination-out";
+		cacheCtx.beginPath();
+		if (objectType === ImageCropperObjectType.RECT) {
+			const m = this.transform.getMatrix();
+			cacheCtx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+			cacheCtx.rect(0, 0, this.width, this.height);
+			cacheCtx.fill();
+		}
+	}
+	_applyProps() {
+		if (this._applyTransform == null) return;
+		let cropLeft = 0;
+		let cropTop = 0;
+		let cropRight = 0;
+		let cropBottom = 0;
+		const { left: applyLeft = 0, top: applyTop = 0, width: applyWidth = 0, height: applyHeight = 0, angle } = this._applyTransform;
+		if (this._srcRect != null) {
+			const { left = 0, top = 0, right = 0, bottom = 0 } = this._srcRect;
+			cropLeft = left;
+			cropTop = top;
+			cropRight = right;
+			cropBottom = bottom;
+		}
+		const left = applyLeft + cropLeft;
+		const top = applyTop + cropTop;
+		this.transformByState({
+			left,
+			top,
+			width: applyLeft + applyWidth - cropRight - left,
+			height: applyTop + applyHeight - cropBottom - top,
+			angle
+		});
+	}
+	_applyCache(ctx) {
+		if (!ctx || this._cacheCanvas == null) return;
+		const cacheCtx = this._cacheCanvas.getContext();
+		cacheCtx.save();
+		ctx.save();
+		ctx.setTransform(1, 0, 0, 1, 0, 0);
+		cacheCtx.setTransform(1, 0, 0, 1, 0, 0);
+		ctx.drawImage(this._cacheCanvas.getCanvasEle(), 0, 0);
+		ctx.restore();
+		cacheCtx.restore();
+	}
+	_initialCacheCanvas() {
+		if (this._cacheCanvas != null) return;
+		const scene = this.getScene();
+		if (scene == null) return;
+		this._cacheCanvas = new Canvas();
+		const engine = scene.getEngine();
+		this._cacheCanvas.setSize(engine.width, engine.height);
+		engine.onTransformChange$.subscribeEvent(() => {
+			var _this$_cacheCanvas4;
+			(_this$_cacheCanvas4 = this._cacheCanvas) === null || _this$_cacheCanvas4 === void 0 || _this$_cacheCanvas4.setSize(engine.width, engine.height);
+			this.makeDirty(true);
+		});
+	}
+};
+
+//#endregion
+//#region src/controllers/image-cropper.controller.ts
+let ImageCropperController = class ImageCropperController extends Disposable {
+	constructor(_commandService, _drawingManagerService, _renderManagerService, _univerInstanceService, _messageService, _localeService) {
+		super();
+		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._messageService = _messageService;
+		this._localeService = _localeService;
+		_defineProperty(this, "_sceneListenerOnImageMap", /* @__PURE__ */ new WeakSet());
+		this._init();
+	}
+	_init() {
+		this._initOpenCrop();
+		this._initCloseCrop();
+		this._initAutoCrop();
+	}
+	_initAutoCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== AutoImageCropOperation.id) return;
+			const params = command.params;
+			if (params == null) return;
+			const { cropType } = params;
+			const drawingParams = this._drawingManagerService.getFocusDrawings();
+			if (drawingParams.length !== 1) return;
+			const { unitId, subUnitId, drawingId } = drawingParams[0];
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			if (this._searchCropObject(scene) != null) this._commandService.syncExecuteCommand(CloseImageCropOperation.id, { isAuto: true });
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (!(imageShape instanceof Image)) {
+				this._messageService.show({
+					type: MessageType.Error,
+					content: this._localeService.t("image-cropper.error")
+				});
+				return;
+			}
+			if (imageShape == null) return;
+			this._updateCropperObject(cropType, imageShape);
+			this._commandService.executeCommand(OpenImageCropOperation.id, {
+				unitId,
+				subUnitId,
+				drawingId
+			});
+		}));
+	}
+	_calculateSrcRectByRatio(left, top, width, height, numerator, denominator) {
+		const srcRatio = width / height;
+		const ratio = numerator / denominator;
+		let newWidth = width;
+		let newHeight = height;
+		if (srcRatio > ratio) newWidth = height * ratio;
+		else newHeight = width / ratio;
+		const newLeft = (width - newWidth) / 2;
+		const newTop = (height - newHeight) / 2;
+		return {
+			left: precisionTo(newLeft, 1),
+			top: precisionTo(newTop, 1),
+			right: precisionTo(width - (newLeft + newWidth), 1),
+			bottom: precisionTo(height - (newTop + newHeight), 1)
+		};
+	}
+	_updateCropperObject(cropType, imageShape) {
+		const { left, top, width, height } = imageShape.calculateTransformWithSrcRect();
+		let newSrcRect;
+		switch (cropType) {
+			case CropType.R1_1:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 1, 1);
+				break;
+			case CropType.R16_9:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 16, 9);
+				break;
+			case CropType.R9_16:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 9, 16);
+				break;
+			case CropType.R5_4:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 5, 4);
+				break;
+			case CropType.R4_5:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 5);
+				break;
+			case CropType.R4_3:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 4, 3);
+				break;
+			case CropType.R3_4:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 4);
+				break;
+			case CropType.R3_2:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 3, 2);
+				break;
+			case CropType.R2_3:
+				newSrcRect = this._calculateSrcRectByRatio(left, top, width, height, 2, 3);
+				break;
+			case CropType.FREE:
+			default: break;
+		}
+		if (newSrcRect == null) return;
+		imageShape.setSrcRect(newSrcRect);
+		const { left: newLeft = 0, top: newTop = 0, bottom: newBottom = 0, right: newRight = 0 } = newSrcRect;
+		imageShape.transformByStateCloseCropper({
+			left: left + newLeft,
+			top: top + newTop,
+			width: width - newRight - newLeft,
+			height: height - newBottom - newTop
+		});
+	}
+	_initOpenCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== OpenImageCropOperation.id) return;
+			const params = command.params;
+			if (params == null) return;
+			const { unitId, subUnitId, drawingId } = params;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			if (!this._sceneListenerOnImageMap.has(scene)) {
+				this._addListenerOnImage(scene);
+				this._sceneListenerOnImageMap.add(scene);
+			}
+			if (this._drawingManagerService.getDrawingByParam({
+				unitId,
+				subUnitId,
+				drawingId
+			}) == null) return;
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape == null) return;
+			if (!(imageShape instanceof Image)) {
+				this._messageService.show({
+					type: MessageType.Error,
+					content: this._localeService.t("image-cropper.error")
+				});
+				return;
+			}
+			const transformer = scene.getTransformer();
+			transformer === null || transformer === void 0 || transformer.clearControls();
+			const imageCropperObject = new ImageCropperObject(`${imageShapeKey}-crop`, {
+				srcRect: imageShape.srcRect,
+				prstGeom: imageShape.prstGeom,
+				applyTransform: imageShape.calculateTransformWithSrcRect()
+			});
+			scene.addObject(imageCropperObject, imageShape.getLayerIndex() + 1).attachTransformerTo(imageCropperObject);
+			transformer === null || transformer === void 0 || transformer.createControlForCopper(imageCropperObject);
+			this._addHoverForImageCopper(imageCropperObject);
+			imageShape.openRenderByCropper();
+			transformer === null || transformer === void 0 || transformer.refreshControls();
+			imageCropperObject.makeDirty(true);
+			this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, [{
+				unitId,
+				subUnitId,
+				drawingId
+			}]);
+		}));
+	}
+	_searchCropObject(scene) {
+		const objects = scene.getAllObjectsByOrder();
+		for (const object of objects) if (object instanceof ImageCropperObject) return object;
+	}
+	_initCloseCrop() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== CloseImageCropOperation.id) return;
+			const currentUnit = this._univerInstanceService.getFocusedUnit();
+			if (currentUnit == null) return;
+			const unitId = currentUnit.getUnitId();
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return true;
+			const imageCropperObject = this._searchCropObject(scene);
+			if (imageCropperObject == null) return;
+			const imageShape = this._getApplyObjectByCropObject(imageCropperObject);
+			if (imageShape == null) return;
+			const transformer = scene.getTransformerByCreate();
+			transformer.detachFrom(imageCropperObject);
+			transformer.clearCopperControl();
+			const srcRect = this._getSrcRectByTransformState(imageShape, imageCropperObject);
+			const drawingParam = this._drawingManagerService.getDrawingOKey(imageShape.oKey);
+			if (drawingParam != null) {
+				const { left, top, height, width } = imageCropperObject;
+				this._drawingManagerService.featurePluginUpdateNotification([{
+					...drawingParam,
+					transform: {
+						...drawingParam.transform,
+						left,
+						top,
+						height,
+						width
+					},
+					srcRect: srcRect.srcRectAngle
+				}]);
+			}
+			imageShape.setSrcRect({ ...srcRect.srcRectAngle });
+			imageShape.closeRenderByCropper();
+			imageShape.makeDirty(true);
+			imageCropperObject === null || imageCropperObject === void 0 || imageCropperObject.dispose();
+		}));
+		const sheetUnit$ = this._univerInstanceService.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SHEET).pipe(switchMap((workbook) => workbook ? workbook.activeSheet$ : of(null)));
+		this.disposeWithMe(sheetUnit$.subscribe(() => {
+			this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		}));
+	}
+	_getApplyObjectByCropObject(cropObject) {
+		const cropOKey = cropObject.oKey;
+		const applyOKey = cropOKey.slice(0, cropOKey.length - 5);
+		const scene = cropObject.getScene();
+		if (!scene) return null;
+		const applyObject = scene.getObject(applyOKey);
+		if (applyObject == null) return null;
+		return applyObject;
+	}
+	_addListenerOnImage(scene) {
+		const transformer = scene.getTransformerByCreate();
+		let startTransform = null;
+		this.disposeWithMe(transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const cropObject = objects.values().next().value;
+			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
+			const { left, top, height, width, angle } = cropObject;
+			startTransform = {
+				left,
+				top,
+				height,
+				width,
+				angle
+			};
+			transformer.clearCopperControl();
+		}));
+		this.disposeWithMe(transformer.changeEnd$.subscribe((state) => {
+			const { objects } = state;
+			const cropObject = objects.values().next().value;
+			if (cropObject == null || !(cropObject instanceof ImageCropperObject)) return;
+			const { left, top, height, width, angle } = cropObject;
+			if (!checkIfMove({
+				left,
+				top,
+				height,
+				width,
+				angle
+			}, startTransform)) return;
+			const applyObject = this._getApplyObjectByCropObject(cropObject);
+			if (applyObject == null) return;
+			const srcRect = this._getSrcRectByTransformState(applyObject, cropObject);
+			cropObject.refreshSrcRect(srcRect.srcRect, applyObject.getState());
+			transformer.createControlForCopper(cropObject);
+		}));
+		this._endCropListener(scene);
+	}
+	_addHoverForImageCopper(o) {
+		this.disposeWithMe(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.MOVE;
+		}));
+		this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.DEFAULT;
+		}));
+	}
+	_endCropListener(scene) {
+		const transformer = scene.getTransformerByCreate();
+		this.disposeWithMe(transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) this._commandService.syncExecuteCommand(CloseImageCropOperation.id);
+		}));
+	}
+	_getSrcRectByTransformState(applyObject, imageCropperObject) {
+		const { left, top, height, width, strokeWidth, angle: copperAngle } = imageCropperObject;
+		const { left: applyLeft, top: applyTop, width: applyWidth, height: applyHeight, angle: applyAngle, strokeWidth: applyStrokeWidth } = applyObject;
+		const newLeft = left - applyLeft;
+		const newTop = top - applyTop;
+		const srcRect = {
+			left: newLeft,
+			top: newTop,
+			right: applyWidth - newLeft - width,
+			bottom: applyHeight - newTop - height
+		};
+		const srcRectAngle = { ...srcRect };
+		if (applyAngle !== 0) {
+			const centerPoint = new Vector2(left + width / 2, top + height / 2);
+			const newCenterPoint = new Vector2(applyWidth / 2 + applyLeft, applyHeight / 2 + applyTop);
+			const vertexPoint = new Vector2(applyLeft, applyTop);
+			vertexPoint.rotateByPoint(degToRad(applyAngle), newCenterPoint);
+			const applyFinalPoint = vertexPoint.clone();
+			applyFinalPoint.rotateByPoint(degToRad(-applyAngle), centerPoint);
+			const newAngleLeft = left - applyFinalPoint.x;
+			const newAngleTop = top - applyFinalPoint.y;
+			srcRectAngle.left = newAngleLeft;
+			srcRectAngle.top = newAngleTop;
+			srcRectAngle.right = applyWidth - newAngleLeft - width;
+			srcRectAngle.bottom = applyHeight - newAngleTop - height;
+		}
+		return {
+			srcRect,
+			srcRectAngle
+		};
+	}
+};
+ImageCropperController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IDrawingManagerService),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IUniverInstanceService),
+	__decorateParam(4, IMessageService),
+	__decorateParam(5, Inject(LocaleService))
+], ImageCropperController);
+
+//#endregion
+//#region src/services/drawing-image-clip.service.ts
+const IMAGE_CLIP_SHAPE_PICKER_COMPONENT = "sheet.image-clip.shape.picker.component";
+/**
+* Bridge service that enables shape-based image clipping.
+* This service lives in the open-source drawing-ui package and delegates
+* to a registered clip implementation (provided by pro engine-shape package).
+*
+* When no delegate is registered, applyShapeClip returns false and images render normally without shape clipping.
+*/
+var DrawingImageClipService = class extends Disposable {
+	constructor() {
+		super();
+		_defineProperty(this, "_clipDelegate", null);
+		_defineProperty(this, "_canUseShapeClip$", new BehaviorSubject(false));
+		_defineProperty(this, "canUseShapeClip$", this._canUseShapeClip$.asObservable());
+	}
+	setCanUseShapeClip(canUse) {
+		this._canUseShapeClip$.next(canUse);
+	}
+	/**
+	* Register a clip delegate that knows how to build shape clip paths.
+	* Typically called by the pro-side plugin with a ShapeModel-based implementation.
+	* @returns IDisposable to unregister the delegate
+	*/
+	registerClipDelegate(delegate) {
+		this._clipDelegate = delegate;
+		return toDisposable(() => {
+			if (this._clipDelegate === delegate) this._clipDelegate = null;
+		});
+	}
+	applyShapeClip(ctx, prstGeom, width, height, adjustValues) {
+		if (this._clipDelegate) return this._clipDelegate(ctx, prstGeom, width, height, adjustValues);
+		return false;
+	}
+	dispose() {
+		this._clipDelegate = null;
+		this._canUseShapeClip$.complete();
+		super.dispose();
+	}
+};
+
+//#endregion
+//#region src/services/drawing-render.service.ts
+let DrawingRenderService = class DrawingRenderService {
+	constructor(_drawingManagerService, _imageIoService, _galleryService, _urlImageService, _univerInstanceService, _drawingImageClipService) {
+		this._drawingManagerService = _drawingManagerService;
+		this._imageIoService = _imageIoService;
+		this._galleryService = _galleryService;
+		this._urlImageService = _urlImageService;
+		this._univerInstanceService = _univerInstanceService;
+		this._drawingImageClipService = _drawingImageClipService;
+	}
+	async renderImages(imageParam, scene) {
+		const { transform: singleTransform, drawingType, source, imageSourceType, srcRect, prstGeom, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms, adjustValues } = imageParam;
+		if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (this._univerInstanceService.getUnitType(unitId) === UniverInstanceType.UNIVER_SHEET && subUnitId !== this._getActiveSheetId()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const images = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const imageConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			const imageNativeCache = this._imageIoService.getImageSourceCache(source, imageSourceType);
+			let shouldBeCache = false;
+			if (imageNativeCache != null) imageConfig.image = imageNativeCache;
+			else if (imageSourceType === ImageSourceType$1.UUID) try {
+				imageConfig.url = await this._imageIoService.getImage(source);
+			} catch (error) {
+				console.error(error);
+				continue;
+			}
+			else if (imageSourceType === ImageSourceType$1.URL) {
+				try {
+					imageConfig.url = await this._urlImageService.getImage(source);
+				} catch (error) {
+					console.error(error);
+					imageConfig.url = source;
+				}
+				shouldBeCache = true;
+			} else {
+				imageConfig.url = source;
+				shouldBeCache = true;
+			}
+			if (scene.getObject(imageShapeKey)) continue;
+			imageConfig.printable = true;
+			const image = new Image(imageShapeKey, imageConfig);
+			image.setClipService(this._drawingImageClipService);
+			if (shouldBeCache) this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative());
+			scene.addObject(image, DRAWING_OBJECT_LAYER_INDEX);
+			if (this._drawingManagerService.getDrawingEditable()) scene.attachTransformerTo(image);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, image, scene, this._drawingManagerService);
+			if (prstGeom != null) image.setPrstGeom(prstGeom);
+			if (adjustValues != null) image.setPrstGeomAdjValues(adjustValues);
+			if (srcRect != null) image.setSrcRect(srcRect);
+			images.push(image);
+		}
+		return images;
+	}
+	_getActiveSheetId() {
+		var _this$_univerInstance;
+		return (_this$_univerInstance = this._univerInstanceService.getCurrentUnitOfType(UniverInstanceType.UNIVER_SHEET)) === null || _this$_univerInstance === void 0 || (_this$_univerInstance = _this$_univerInstance.getActiveSheet()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetId();
+	}
+	renderFloatDom(param, scene) {
+		const { transform: singleTransform, drawingType, groupId, unitId, subUnitId, drawingId, isMultiTransform, transforms: multiTransforms } = param;
+		if (drawingType !== DrawingTypeEnum.DRAWING_DOM) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (singleTransform == null) return;
+		const transforms = isMultiTransform && multiTransforms ? multiTransforms : [singleTransform];
+		const rects = [];
+		for (const transform of transforms) {
+			const { left, top, width, height, angle, flipX, flipY, skewX, skewY } = transform;
+			const index = transforms.indexOf(transform);
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			}, isMultiTransform ? index : void 0);
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape != null) {
+				imageShape.transformByState({
+					left,
+					top,
+					width,
+					height,
+					angle,
+					flipX,
+					flipY,
+					skewX,
+					skewY
+				});
+				continue;
+			}
+			const orders = this._drawingManagerService.getDrawingOrder(unitId, subUnitId);
+			const zIndex = orders.indexOf(drawingId);
+			const rectConfig = {
+				...transform,
+				zIndex: zIndex === -1 ? orders.length - 1 : zIndex
+			};
+			if (scene.getObject(imageShapeKey)) continue;
+			rectConfig.printable = false;
+			const rect = new Rect(imageShapeKey, rectConfig);
+			if (!this._drawingManagerService.getDrawingVisible()) continue;
+			scene.addObject(rect, DRAWING_OBJECT_LAYER_INDEX);
+			if (this._drawingManagerService.getDrawingEditable() && param.allowTransform !== false) scene.attachTransformerTo(rect);
+			groupId && insertGroupObject({
+				drawingId: groupId,
+				unitId,
+				subUnitId
+			}, rect, scene, this._drawingManagerService);
+			rects.push(rect);
+		}
+		return rects;
+	}
+	renderDrawing(param, scene) {
+		const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+		if (drawingParam == null) return;
+		switch (drawingParam.drawingType) {
+			case DrawingTypeEnum.DRAWING_IMAGE: return this.renderImages(drawingParam, scene);
+			default:
+		}
+	}
+	previewImage(key, src, width, height) {
+		this._galleryService.open({
+			images: [src],
+			onOpenChange: (open) => {
+				if (!open) this._galleryService.close();
+			}
+		});
+	}
+	_adjustImageSize(nativeWidth, nativeHeight, screenWidth, screenHeight) {
+		if (nativeWidth <= screenWidth && nativeHeight <= screenHeight) return {
+			width: nativeWidth,
+			height: nativeHeight
+		};
+		const widthRatio = screenWidth / nativeWidth;
+		const heightRatio = screenHeight / nativeHeight;
+		const scale = Math.min(widthRatio, heightRatio);
+		return {
+			width: Math.floor(nativeWidth * scale),
+			height: Math.floor(nativeHeight * scale)
+		};
+	}
+};
+DrawingRenderService = __decorate([
+	__decorateParam(0, IDrawingManagerService),
+	__decorateParam(1, IImageIoService),
+	__decorateParam(2, IGalleryService),
+	__decorateParam(3, IURLImageService),
+	__decorateParam(4, IUniverInstanceService),
+	__decorateParam(5, Inject(DrawingImageClipService))
+], DrawingRenderService);
+
+//#endregion
+//#region src/controllers/image-update.controller.ts
+let ImageUpdateController = class ImageUpdateController extends Disposable {
+	constructor(_commandService, _renderManagerService, _drawingManagerService, _dialogService, _imageIoService, _currentUniverService, _drawingRenderService) {
+		super();
+		this._commandService = _commandService;
+		this._renderManagerService = _renderManagerService;
+		this._drawingManagerService = _drawingManagerService;
+		this._dialogService = _dialogService;
+		this._imageIoService = _imageIoService;
+		this._currentUniverService = _currentUniverService;
+		this._drawingRenderService = _drawingRenderService;
+		this._initialize();
+	}
+	dispose() {
+		super.dispose();
+	}
+	_initialize() {
+		this._drawingAddListener();
+		this._commandExecutedListener();
+		this._imageUpdateListener();
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === ImageResetSizeOperation.id) {
+				const params = command.params;
+				if (params == null) return;
+				this._resetImageSize(params);
+			}
+		}));
+	}
+	_getSceneAndTransformerByDrawingSearch(unitId) {
+		if (unitId == null) return;
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return null;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate()
+		};
+	}
+	_resetImageSize(params) {
+		const updateParams = [];
+		const sceneList = [];
+		params.forEach((param) => {
+			const { unitId, subUnitId, drawingId } = param;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (renderObject == null) return;
+			const { scene } = renderObject;
+			const imageShapeKey = getDrawingShapeKeyByDrawingSearch({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape == null) return true;
+			const imageData = this._drawingManagerService.getDrawingByParam(param);
+			if (imageData == null) return true;
+			if (imageData.drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+			imageShape.resetSize();
+			const { width, height } = imageShape.getNativeSize();
+			if (sceneList.includes(scene) === false) sceneList.push(scene);
+			updateParams.push({
+				...imageData,
+				transform: {
+					...imageData.transform,
+					height,
+					width,
+					angle: 0
+				},
+				srcRect: null,
+				prstGeom: null
+			});
+		});
+		this._drawingManagerService.featurePluginUpdateNotification(updateParams);
+		sceneList.forEach((scene) => {
+			scene.getTransformerByCreate().refreshControls().changeNotification();
+		});
+		this._commandService.syncExecuteCommand(SetDrawingSelectedOperation.id, params);
+	}
+	_drawingAddListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.pipe(bufferTime(33), filter((batches) => batches.length > 0), map((batches) => batches.flat()), map((items) => {
+			const map = /* @__PURE__ */ new Map();
+			for (const it of items) map.set(`${it.unitId}|${it.subUnitId}|${it.drawingId}`, it);
+			return [...map.values()];
+		}), filter((items) => items.length > 0)).subscribe((uniqueParams) => {
+			this._insertImages(uniqueParams);
+		}));
+	}
+	_insertImages(params) {
+		params.forEach(async (param) => {
+			var _getCurrentUnitInfo;
+			const { unitId, subUnitId } = param;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			const currentSubUnitId = (_getCurrentUnitInfo = getCurrentUnitInfo(this._currentUniverService, unitId)) === null || _getCurrentUnitInfo === void 0 ? void 0 : _getCurrentUnitInfo.subUnitId;
+			if (renderObject == null || currentSubUnitId !== subUnitId) return;
+			const imageParam = this._drawingManagerService.getDrawingByParam(param);
+			if (imageParam == null) return;
+			const images = await this._drawingRenderService.renderImages(imageParam, renderObject.scene);
+			this._drawingManagerService.refreshTransform([imageParam]);
+			if (images == null || images.length === 0) return;
+			for (const image of images) {
+				this._addHoverForImage(image);
+				this._addDialogForImage(image);
+			}
+		});
+	}
+	_imageUpdateListener() {
+		this.disposeWithMe(this._drawingManagerService.update$.subscribe((params) => {
+			params.forEach((param) => {
+				const { unitId, subUnitId, drawingId } = param;
+				const drawingParam = this._drawingManagerService.getDrawingByParam(param);
+				if (drawingParam == null) return;
+				const { transform, drawingType, srcRect, prstGeom, source, imageSourceType } = drawingParam;
+				if (drawingType !== DrawingTypeEnum.DRAWING_IMAGE) return;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = getDrawingShapeKeyByDrawingSearch({
+					unitId,
+					subUnitId,
+					drawingId
+				});
+				const imageShape = scene.getObject(drawingShapeKey);
+				if (imageShape == null) return true;
+				imageShape.setSrcRect(srcRect);
+				imageShape.setPrstGeom(prstGeom);
+				if (source != null && source.length > 0 && (imageSourceType === ImageSourceType.BASE64 || imageSourceType === ImageSourceType.URL)) imageShape.changeSource(source);
+			});
+		}));
+	}
+	_addHoverForImage(o) {
+		this.disposeWithMe(toDisposable(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.GRAB;
+		})));
+		this.disposeWithMe(toDisposable(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = CURSOR_TYPE.DEFAULT;
+		})));
+	}
+	_addDialogForImage(o) {
+		this.disposeWithMe(toDisposable(o.onDblclick$.subscribeEvent(() => {
+			const dialogId = `${o.oKey}-viewer-dialog`;
+			this._drawingRenderService.previewImage(dialogId, o.getNative().src, o.getNativeSize().width, o.getNativeSize().height);
+		})));
+	}
+};
+ImageUpdateController = __decorate([
+	__decorateParam(0, ICommandService),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, IDrawingManagerService),
+	__decorateParam(3, IDialogService),
+	__decorateParam(4, IImageIoService),
+	__decorateParam(5, IUniverInstanceService),
+	__decorateParam(6, Inject(DrawingRenderService))
+], ImageUpdateController);
+
+//#endregion
+//#region src/plugin.ts
+let UniverDrawingUIPlugin = class UniverDrawingUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(DRAWING_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		this._initDependencies();
+	}
+	onRendered() {
+		this._injector.get(DrawingUpdateController);
+		this._injector.get(DrawingUIController);
+		this._injector.get(ImageCropperController);
+		this._injector.get(ImageUpdateController);
+	}
+	_initDependencies() {
+		[
+			[DrawingImageClipService],
+			[DrawingRenderService],
+			[DrawingUpdateController],
+			[DrawingUIController],
+			[ImageCropperController],
+			[ImageUpdateController]
+		].forEach((dependency) => this._injector.add(dependency));
+	}
+};
+_defineProperty(UniverDrawingUIPlugin, "pluginName", "UNIVER_DRAWING_UI_PLUGIN");
+_defineProperty(UniverDrawingUIPlugin, "packageName", name);
+_defineProperty(UniverDrawingUIPlugin, "version", version);
+UniverDrawingUIPlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverDrawingUIPlugin);
+
+//#endregion
+//#region src/views/panel/DrawingAlign.tsx
+const DrawingAlign = (props) => {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const { drawings, alignShow } = props;
+	const [alignValue, setAlignValue] = useState(AlignType.default);
+	const alignOptions = [
+		{
+			label: localeService.t("image-panel.align.default"),
+			value: AlignType.default
+		},
+		{ options: [
+			{
+				label: localeService.t("image-panel.align.left"),
+				value: AlignType.left
+			},
+			{
+				label: localeService.t("image-panel.align.center"),
+				value: AlignType.center
+			},
+			{
+				label: localeService.t("image-panel.align.right"),
+				value: AlignType.right
+			}
+		] },
+		{ options: [
+			{
+				label: localeService.t("image-panel.align.top"),
+				value: AlignType.top
+			},
+			{
+				label: localeService.t("image-panel.align.middle"),
+				value: AlignType.middle
+			},
+			{
+				label: localeService.t("image-panel.align.bottom"),
+				value: AlignType.bottom
+			}
+		] },
+		{ options: [{
+			label: localeService.t("image-panel.align.horizon"),
+			value: AlignType.horizon
+		}, {
+			label: localeService.t("image-panel.align.vertical"),
+			value: AlignType.vertical
+		}] }
+	];
+	function handleAlignChange(value) {
+		setAlignValue(value);
+		commandService.executeCommand(SetDrawingAlignOperation.id, {
+			alignType: value,
+			drawings
+		});
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-relative univer-w-full", { "univer-hidden": !alignShow }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.align.title") })
+		}), /* @__PURE__ */ jsx("div", {
+			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-w-full univer-text-gray-900 dark:!univer-text-white",
+				children: /* @__PURE__ */ jsx(Select, {
+					value: alignValue,
+					options: alignOptions,
+					onChange: handleAlignChange
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingArrange.tsx
+const DrawingArrange = (props) => {
+	const { arrangeShow, drawings: focusDrawings } = props;
+	const localeService = useDependency(LocaleService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const commandService = useDependency(ICommandService);
+	const componentManager = useDependency(ComponentManager);
+	const MoveUpIcon = componentManager.get("MoveUpIcon");
+	const MoveDownIcon = componentManager.get("MoveDownIcon");
+	const TopmostIcon = componentManager.get("TopmostIcon");
+	const BottomIcon = componentManager.get("BottomIcon");
+	const [drawings, setDrawings] = useState(focusDrawings);
+	useEffect(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
+		};
+	}, []);
+	const onArrangeBtnClick = (arrangeType) => {
+		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
+			arrangeType,
+			drawings
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !arrangeShow }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.arrange.title") })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-grid univer-grid-cols-2 univer-gap-2",
+			children: [
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.forward);
+					},
+					children: [/* @__PURE__ */ jsx(MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.backward);
+					},
+					children: [/* @__PURE__ */ jsx(MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.front);
+					},
+					children: [/* @__PURE__ */ jsx(TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+				}),
+				/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onArrangeBtnClick(ArrangeTypeEnum.back);
+					},
+					children: [/* @__PURE__ */ jsx(BottomIcon, {}), localeService.t("image-panel.arrange.back")]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingGroup.tsx
+const DrawingGroup = (props) => {
+	const localeService = useDependency(LocaleService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const commandService = useDependency(ICommandService);
+	const componentManager = useDependency(ComponentManager);
+	const { hasGroup, drawings } = props;
+	const GroupIcon = componentManager.get("GroupIcon");
+	const UngroupIcon = componentManager.get("UngroupIcon");
+	const [groupShow, setGroupShow] = useState(false);
+	const [groupBtnShow, setGroupBtnShow] = useState(true);
+	const [ungroupBtnShow, setUngroupBtnShow] = useState(true);
+	const onGroupBtnClick = () => {
+		commandService.syncExecuteCommand(SetDrawingGroupOperation.id, { drawings });
+	};
+	const onUngroupBtnClick = () => {
+		commandService.syncExecuteCommand(CancelDrawingGroupOperation.id, { drawings });
+	};
+	useEffect(() => {
+		const drawingParam = drawings[0];
+		if (drawingParam == null) return;
+		const { unitId } = drawingParam;
+		const renderObject = renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return;
+		const transformer = scene.getTransformerByCreate();
+		const onClearControlObserver = transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) setGroupShow(false);
+		});
+		const onChangeStartObserver = transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const params = getUpdateParams(objects, drawingManagerService);
+			const groupParams = params.filter((o) => (o === null || o === void 0 ? void 0 : o.drawingType) === DrawingTypeEnum.DRAWING_GROUP);
+			let groupBtnShow = false;
+			let ungroupBtnShow = false;
+			if (params.length > 1) groupBtnShow = true;
+			if (groupParams.length > 0) ungroupBtnShow = true;
+			setGroupShow(groupBtnShow || ungroupBtnShow);
+			setGroupBtnShow(groupBtnShow);
+			setUngroupBtnShow(ungroupBtnShow);
+		});
+		return () => {
+			onChangeStartObserver.unsubscribe();
+			onClearControlObserver.unsubscribe();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
+		children: [/* @__PURE__ */ jsx("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.group.title") })
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: clsx({ "univer-hidden": !groupBtnShow }),
+				onClick: onGroupBtnClick,
+				children: [/* @__PURE__ */ jsx(GroupIcon, {}), localeService.t("image-panel.group.group")]
+			}), /* @__PURE__ */ jsxs(Button, {
+				className: clsx({ "univer-hidden": !ungroupBtnShow }),
+				onClick: onUngroupBtnClick,
+				children: [/* @__PURE__ */ jsx(UngroupIcon, {}), localeService.t("image-panel.group.unGroup")]
+			})]
+		})]
+	});
+};
+
+//#endregion
+//#region src/utils/config.ts
+const RANGE_DRAWING_ROTATION_LIMIT = [-360, 360];
+
+//#endregion
+//#region src/views/panel/DrawingTransform.tsx
+const INPUT_DEBOUNCE_TIME = 300;
+const DrawingTransform = (props) => {
+	var _scene$getEngine;
+	const localeService = useDependency(LocaleService);
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const { drawings, transformShow } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const transform = drawingParam.transform;
+	if (transform == null) return;
+	const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+	const renderObject = renderManagerService.getRenderById(unitId);
+	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+	if (scene == null) return;
+	const topScene = (_scene$getEngine = scene.getEngine()) === null || _scene$getEngine === void 0 ? void 0 : _scene$getEngine.activeScene;
+	if (topScene == null) return;
+	const transformer = scene.getTransformerByCreate();
+	const { width: originWidth = 0, height: originHeight = 0, left: originX = 0, top: originY = 0, angle: originRotation = 0 } = transform;
+	const [width, setWidth] = useState(originWidth);
+	const [height, setHeight] = useState(originHeight);
+	const [xPosition, setXPosition] = useState(originX);
+	const [yPosition, setYPosition] = useState(originY);
+	const [rotation, setRotation] = useState(originRotation);
+	const [lockRatio, setLockRatio] = useState(transformer.keepRatio);
+	const checkMoveBoundary = (left, top, width, height) => {
+		const { width: topSceneWidth, height: topSceneHeight } = topScene;
+		const { ancestorLeft, ancestorTop } = scene;
+		let limitLeft = left;
+		let limitTop = top;
+		let limitWidth = width;
+		let limitHeight = height;
+		if (left + ancestorLeft < 0) limitLeft = -ancestorLeft;
+		if (top + ancestorTop < 0) limitTop = -ancestorTop;
+		limitWidth = topSceneWidth - limitLeft - ancestorLeft;
+		if (limitWidth < 20) limitWidth = 20;
+		limitHeight = topSceneHeight - limitTop - ancestorTop;
+		if (limitHeight < 20) limitHeight = 20;
+		if (left + limitWidth + ancestorLeft > topSceneWidth) limitLeft = topSceneWidth - width - ancestorLeft;
+		if (top + limitHeight + ancestorTop > topSceneHeight) limitTop = topSceneHeight - height - ancestorTop;
+		return {
+			limitLeft,
+			limitTop,
+			limitWidth,
+			limitHeight
+		};
+	};
+	const changeObs = (state) => {
+		const { objects } = state;
+		const params = getUpdateParams(objects, drawingManagerService);
+		if (params.length !== 1) return;
+		const drawingParam = params[0];
+		if (drawingParam == null) return;
+		const { transform } = drawingParam;
+		if (transform == null) return;
+		const { width: originWidth, height: originHeight, left: originX, top: originY, angle: originRotation } = transform;
+		if (originWidth != null) setWidth(originWidth);
+		if (originHeight != null) setHeight(originHeight);
+		if (originX != null) setXPosition(originX);
+		if (originY != null) setYPosition(originY);
+		if (originRotation != null) setRotation(originRotation);
+	};
+	useEffect(() => {
+		const subscriptions = [
+			transformer.changeStart$.subscribe((state) => {
+				changeObs(state);
+			}),
+			transformer.changing$.subscribe((state) => {
+				changeObs(state);
+			}),
+			transformer.changeEnd$.subscribe((state) => {
+				changeObs(state);
+			}),
+			drawingManagerService.focus$.subscribe((drawings) => {
+				if (drawings.length !== 1) return;
+				const drawingParam = drawingManagerService.getDrawingByParam(drawings[0]);
+				if (drawingParam == null) return;
+				const transform = drawingParam.transform;
+				if (transform == null) return;
+				const { width: originWidth, height: originHeight, left: originX, top: originY, angle: originRotation } = transform;
+				if (originWidth != null) setWidth(originWidth);
+				if (originHeight != null) setHeight(originHeight);
+				if (originX != null) setXPosition(originX);
+				if (originY != null) setYPosition(originY);
+				if (originRotation != null) setRotation(originRotation);
+			})
+		];
+		return () => {
+			subscriptions.forEach((sub) => sub.unsubscribe());
+		};
+	}, []);
+	const handleWidthChange = debounce((val) => {
+		if (val == null) return;
+		const { limitWidth, limitHeight } = checkMoveBoundary(xPosition, yPosition, val, height);
+		val = Math.min(val, limitWidth);
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { width: val }
+		};
+		if (lockRatio) {
+			let heightFix = val / width * height;
+			heightFix = Math.max(heightFix, 20);
+			if (heightFix > limitHeight) return;
+			setHeight(heightFix);
+			updateParam.transform.height = heightFix;
+		}
+		setWidth(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleHeightChange = debounce((val) => {
+		if (val == null) return;
+		const { limitHeight, limitWidth } = checkMoveBoundary(xPosition, yPosition, width, val);
+		val = Math.min(val, limitHeight);
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { height: val }
+		};
+		if (lockRatio) {
+			let widthFix = val / height * width;
+			widthFix = Math.max(widthFix, 20);
+			if (widthFix > limitWidth) return;
+			setWidth(widthFix);
+			updateParam.transform.width = widthFix;
+		}
+		setHeight(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleXChange = debounce((val) => {
+		if (val == null) return;
+		const { limitLeft } = checkMoveBoundary(val, yPosition, width, height);
+		val = limitLeft;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { left: val }
+		};
+		setXPosition(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleYChange = debounce((val) => {
+		if (val == null) return;
+		const { limitTop } = checkMoveBoundary(xPosition, val, width, height);
+		val = limitTop;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { top: val }
+		};
+		setYPosition(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	}, INPUT_DEBOUNCE_TIME);
+	const handleRotationChange = (val) => {
+		if (val == null) return;
+		const updateParam = {
+			unitId,
+			subUnitId,
+			drawingId,
+			drawingType,
+			transform: { angle: val }
+		};
+		setRotation(val);
+		drawingManagerService.featurePluginUpdateNotification([updateParam]);
+		transformer.refreshControls().changeNotification();
+	};
+	const handleLockRatioChange = (val) => {
+		setLockRatio(val);
+		transformer.keepRatio = val;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !transformShow }),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.transform.title") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: width,
+						min: 20,
+						onChange: (val) => {
+							handleWidthChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: height,
+						min: 20,
+						onChange: (val) => {
+							handleHeightChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.lock") }), /* @__PURE__ */ jsx("div", {
+						className: "univer-text-center",
+						children: /* @__PURE__ */ jsx(Checkbox, {
+							checked: lockRatio,
+							onChange: handleLockRatioChange
+						})
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: xPosition,
+						onChange: (val) => {
+							handleXChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: yPosition,
+						onChange: (val) => {
+							handleYChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: rotation,
+						min: RANGE_DRAWING_ROTATION_LIMIT[0],
+						max: RANGE_DRAWING_ROTATION_LIMIT[1],
+						onChange: handleRotationChange
+					})] })
+				]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/views/panel/ImageCropper.tsx
+const ImageCropper = (props) => {
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const clipService = useDependency(DrawingImageClipService);
+	const componentManager = useDependency(ComponentManager);
+	const canUseShapeClip = useObservable(clipService.canUseShapeClip$, false);
+	const { drawings, cropperShow } = props;
+	if (drawings[0] == null) return;
+	const [cropValue, setCropValue] = useState(CropType.FREE);
+	const cropStateRef = useRef(false);
+	const cropOptions = [
+		{
+			label: localeService.t("image-panel.crop.mode"),
+			value: CropType.FREE
+		},
+		{
+			label: "1:1",
+			value: CropType.R1_1
+		},
+		{
+			label: "16:9",
+			value: CropType.R16_9
+		},
+		{
+			label: "9:16",
+			value: CropType.R9_16
+		},
+		{
+			label: "5:4",
+			value: CropType.R5_4
+		},
+		{
+			label: "4:5",
+			value: CropType.R4_5
+		},
+		{
+			label: "4:3",
+			value: CropType.R4_3
+		},
+		{
+			label: "3:4",
+			value: CropType.R3_4
+		},
+		{
+			label: "3:2",
+			value: CropType.R3_2
+		},
+		{
+			label: "2:3",
+			value: CropType.R2_3
+		}
+	];
+	useEffect(() => {
+		const onChangeStartObserver = commandService.onCommandExecuted((command) => {
+			if (command.id === CloseImageCropOperation.id) {
+				const params = command.params;
+				if (!(params === null || params === void 0 ? void 0 : params.isAuto)) cropStateRef.current = false;
+			}
+		});
+		return () => {
+			onChangeStartObserver === null || onChangeStartObserver === void 0 || onChangeStartObserver.dispose();
+		};
+	}, []);
+	function handleCropChange(value) {
+		setCropValue(value);
+		if (cropStateRef.current) commandService.executeCommand(AutoImageCropOperation.id, { cropType: value });
+	}
+	const onCropperBtnClick = (val) => {
+		commandService.executeCommand(AutoImageCropOperation.id, { cropType: val });
+		cropStateRef.current = true;
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !cropperShow }),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.crop.title") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+				children: [/* @__PURE__ */ jsxs(Button, {
+					onClick: () => {
+						onCropperBtnClick(cropValue);
+					},
+					children: [/* @__PURE__ */ jsx(CreateCopyIcon, {}), localeService.t("image-panel.crop.start")]
+				}), /* @__PURE__ */ jsx(Select, {
+					value: cropValue,
+					options: cropOptions,
+					onChange: handleCropChange
+				})]
+			}),
+			canUseShapeClip && (() => {
+				const ShapeClipPicker = componentManager.get("sheet.image-clip.shape.picker.component");
+				return ShapeClipPicker ? /* @__PURE__ */ jsx(ShapeClipPicker, {}) : null;
+			})()
+		]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingCommonPanel.tsx
+const DrawingCommonPanel = (props) => {
+	const drawingManagerService = useDependency(IDrawingManagerService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const localeService = useDependency(LocaleService);
+	const { drawings, hasArrange = true, hasTransform = true, hasAlign = true, hasCropper = true, hasGroup = true } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const { unitId } = drawingParam;
+	const renderObject = renderManagerService.getRenderById(unitId);
+	const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+	if (scene == null) return;
+	const transformer = scene.getTransformerByCreate();
+	const [arrangeShow, setArrangeShow] = useState(true);
+	const [transformShow, setTransformShow] = useState(true);
+	const [alignShow, setAlignShow] = useState(false);
+	const [cropperShow, setCropperShow] = useState(true);
+	const [nullShow, setNullShow] = useState(false);
+	useEffect(() => {
+		const clearControlSub = transformer.clearControl$.subscribe((changeSelf) => {
+			if (changeSelf === true) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			}
+		});
+		const changeStartSub = transformer.changeStart$.subscribe((state) => {
+			const { objects } = state;
+			const params = getUpdateParams(objects, drawingManagerService);
+			if (params.length === 0) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			} else if (params.length === 1) {
+				setArrangeShow(true);
+				setTransformShow(true);
+				setAlignShow(false);
+				setCropperShow(true);
+				setNullShow(false);
+			} else {
+				setArrangeShow(true);
+				setTransformShow(false);
+				setAlignShow(true);
+				setCropperShow(false);
+				setNullShow(false);
+			}
+		});
+		const focusSub = drawingManagerService.focus$.subscribe((drawings) => {
+			if (drawings.length === 0) {
+				setArrangeShow(false);
+				setTransformShow(false);
+				setAlignShow(false);
+				setCropperShow(false);
+				setNullShow(true);
+			} else if (drawings.length === 1) {
+				setArrangeShow(true);
+				setTransformShow(true);
+				setAlignShow(false);
+				setCropperShow(true);
+				setNullShow(false);
+			} else {
+				setArrangeShow(true);
+				setTransformShow(false);
+				setAlignShow(true);
+				setCropperShow(false);
+				setNullShow(false);
+			}
+		});
+		return () => {
+			changeStartSub.unsubscribe();
+			clearControlSub.unsubscribe();
+			focusSub.unsubscribe();
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: clsx("univer-h-full", { "univer-hidden": !nullShow }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "univer-flex univer-h-full univer-items-center univer-justify-center",
+				children: /* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.null") })
+			})
+		}),
+		/* @__PURE__ */ jsx(DrawingArrange, {
+			arrangeShow: hasArrange === true ? arrangeShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingTransform, {
+			transformShow: hasTransform === true ? transformShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingAlign, {
+			alignShow: hasAlign === true ? alignShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(ImageCropper, {
+			cropperShow: hasCropper === true ? cropperShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ jsx(DrawingGroup, {
+			hasGroup,
+			drawings
+		})
+	] });
+};
+
+//#endregion
+export { AutoImageCropOperation, COMPONENT_IMAGE_POPUP_MENU, CancelDrawingGroupOperation, CloseImageCropOperation, DRAWING_GROUP_TYPES, DrawingCommonPanel, DrawingImageClipService, DrawingRenderService, IMAGE_CLIP_SHAPE_PICKER_COMPONENT, ImageCropperObject, ImagePopupMenu, ImageResetSizeOperation, OpenImageCropOperation, SetDrawingAlignOperation, SetDrawingArrangeOperation, SetDrawingGroupOperation, UniverDrawingUIPlugin, getCurrentUnitInfo, getUpdateParams, insertGroupObject };