@univerjs/drawing-ui 0.20.1 → 0.21.0

package/lib/cjs/index.js

@@ -1 +1,2922 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/drawing`),n=require(`@univerjs/engine-render`),r=require(`@univerjs/icons`),i=require(`@univerjs/ui`),a=require(`rxjs`),o=require(`@univerjs/design`),s=require(`react`),c=require(`react/jsx-runtime`),l=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 u={id:`sheet.operation.set-image-align`,type:e.CommandType.OPERATION,handler:(e,t)=>!0},d={id:`sheet.operation.set-drawing-align-left`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.left})},f={id:`sheet.operation.set-drawing-align-center`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.center})},p={id:`sheet.operation.set-drawing-align-right`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.right})},m={id:`sheet.operation.set-drawing-align-top`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.top})},h={id:`sheet.operation.set-drawing-align-middle`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.middle})},g={id:`sheet.operation.set-drawing-align-bottom`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.bottom})},_={id:`sheet.operation.set-drawing-align-horizon`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.horizon})},v={id:`sheet.operation.set-drawing-align-vertical`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(u.id,{alignType:l.vertical})},y={id:`drawing.operation.set-drawing-arrange`,type:e.CommandType.OPERATION,handler:(e,n)=>{let r=e.get(t.IDrawingManagerService),{arrangeType:i}=n,a=n.drawings||r.getFocusDrawings(),{unitId:o,subUnitId:s}=a[0],c=a.map(e=>e.drawingId);return r.featurePluginOrderUpdateNotification({unitId:o,subUnitId:s,drawingIds:c,arrangeType:i}),!0}},b={id:`drawing.operation.set-drawing-arrange-front`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(y.id,{arrangeType:e.ArrangeTypeEnum.front})},x={id:`drawing.operation.set-drawing-arrange-forward`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(y.id,{arrangeType:e.ArrangeTypeEnum.forward})},S={id:`drawing.operation.set-drawing-arrange-back`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(y.id,{arrangeType:e.ArrangeTypeEnum.back})},C={id:`drawing.operation.set-drawing-arrange-backward`,type:e.CommandType.OPERATION,handler:t=>t.get(e.ICommandService).syncExecuteCommand(y.id,{arrangeType:e.ArrangeTypeEnum.backward})},w=[e.DrawingTypeEnum.DRAWING_IMAGE,e.DrawingTypeEnum.DRAWING_SHAPE,e.DrawingTypeEnum.DRAWING_GROUP],T={id:`drawing.operation.set-drawing-group`,type:e.CommandType.OPERATION,handler:(r,i)=>{let a=r.get(t.IDrawingManagerService),o=i.drawings||a.getFocusDrawings();if(o.length<2||!o.every(e=>w.includes(e.drawingType)))return!1;let{unitId:s,subUnitId:c}=o[0],l=(0,e.generateRandomId)(10),u=(0,n.getGroupState)(0,0,o.map(e=>e.transform||{})),d={unitId:s,subUnitId:c,drawingId:l,drawingType:e.DrawingTypeEnum.DRAWING_GROUP,transform:u,groupBaseBound:{left:u.left,top:u.top,width:u.width,height:u.height}},f=o.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:l}});return a.featurePluginGroupUpdateNotification([{parent:d,children:f}]),!0}},E={id:`drawing.operation.cancel-drawing-group`,type:e.CommandType.OPERATION,handler:(r,i)=>{let a=r.get(t.IDrawingManagerService),o=(i.drawings||a.getFocusDrawings()).map(t=>{if(t.drawingType!==e.DrawingTypeEnum.DRAWING_GROUP)return null;let{unitId:r,subUnitId:i,drawingId:o,transform:s={width:0,height:0},groupBaseBound:c}=t;if(s===null)return null;let l=a.getDrawingsByGroup({unitId:r,subUnitId:i,drawingId:o});return l.length===0?null:{parent:t,children:l.map(e=>{let{transform:t}=e,{unitId:r,subUnitId:i,drawingId:a}=e,o=(0,n.transformObjectOutOfGroup)(t||{},s,s.width||0,s.height||0,c);return{unitId:r,subUnitId:i,drawingId:a,transform:{...t,...o},groupId:void 0}})}}).filter(e=>e!==null);return o.length===0?!1:(a.featurePluginUngroupUpdateNotification(o),!0)}},D={id:`sheet.operation.open-image-crop`,type:e.CommandType.OPERATION,handler:(e,t)=>!0},O={id:`sheet.operation.close-image-crop`,type:e.CommandType.OPERATION,handler:(e,t)=>!0};let k=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 A={id:`sheet.operation.Auto-image-crop`,type:e.CommandType.OPERATION,handler:(e,t)=>!0},j={id:`sheet.operation.image-reset-size`,type:e.CommandType.OPERATION,handler:(e,t)=>!0};function M(e,r,i,a){let o=a.getDrawingByParam(e);if(o==null)return;let s=(0,t.getDrawingShapeKeyByDrawingSearch)(e),c=i.getObjectIncludeInGroup(s);if(c&&!(c instanceof n.Group))return;if(c!=null){let e=c.getObjects();for(let t of e)if(t.oKey===r.oKey)return;c.addObject(r);return}let l=new n.DrawingGroupObject(s);i.addObject(l,n.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(l),l.addObject(r);let{transform:u,groupBaseBound:d}=o;d&&l.setBaseBound(d),o.groupId&&(l.isInGroup=!0,M({drawingId:o.groupId,unitId:e.unitId,subUnitId:e.subUnitId},l,i,a)),u&&l.transformByState({left:u.left,top:u.top,angle:u.angle,width:u.width,height:u.height})}function N(t,n){let r=n?t.getUnit(n):t.getFocusedUnit();if(r==null)return;let i=r.getUnitId(),a;if(r.type===e.UniverInstanceType.UNIVER_SHEET){var o;a=(o=r.getActiveSheet())==null?void 0:o.getSheetId()}else (r.type===e.UniverInstanceType.UNIVER_DOC||r.type===e.UniverInstanceType.UNIVER_SLIDE)&&(a=i);return{unitId:i,subUnitId:a,current:r}}var P=`@univerjs/drawing-ui`,F=`0.20.1`;const I=`drawing-ui.config`;Symbol(I);const ee={},L=e=>{let n=e.get(t.IDrawingManagerService);return new a.Observable(e=>{let t=t=>{if(!t||t.length===0||t.length<2)return e.next(!0);e.next(!1)},r=n.focus$.subscribe(n=>{if(!n||n.length===0)return e.next(!0);t(n)});return t(n.getFocusDrawings()),()=>r.unsubscribe()})},R=`contextMenu.drawing-align`;function te(e){return{id:R,type:i.MenuItemType.SUBITEMS,icon:`HorizontallyIcon`,title:`image-panel.align.title`,hidden$:L(e)}}function z(){return{id:d.id,type:i.MenuItemType.BUTTON,icon:`LeftJustifyingIcon`,title:`image-panel.align.left`}}function B(){return{id:f.id,type:i.MenuItemType.BUTTON,icon:`HorizontallyIcon`,title:`image-panel.align.center`}}function ne(){return{id:p.id,type:i.MenuItemType.BUTTON,icon:`RightJustifyingIcon`,title:`image-panel.align.right`}}function re(){return{id:m.id,type:i.MenuItemType.BUTTON,icon:`AlignTopIcon`,title:`image-panel.align.top`}}function ie(){return{id:h.id,type:i.MenuItemType.BUTTON,icon:`VerticalCenterIcon`,title:`image-panel.align.middle`}}function ae(){return{id:g.id,type:i.MenuItemType.BUTTON,icon:`AlignBottomIcon`,title:`image-panel.align.bottom`}}function oe(){return{id:_.id,type:i.MenuItemType.BUTTON,icon:`HorizontallyIcon`,title:`image-panel.align.horizon`}}function se(){return{id:v.id,type:i.MenuItemType.BUTTON,icon:`VerticalCenterIcon`,title:`image-panel.align.vertical`}}const ce=`contextMenu.drawing-arrange`;function le(){return{id:ce,type:i.MenuItemType.SUBITEMS,icon:`TopmostIcon`,title:`image-panel.arrange.title`}}function ue(){return{id:b.id,type:i.MenuItemType.BUTTON,icon:`TopmostIcon`,title:`image-panel.arrange.front`}}function de(){return{id:x.id,type:i.MenuItemType.BUTTON,icon:`MoveUpIcon`,title:`image-panel.arrange.forward`}}function fe(){return{id:S.id,type:i.MenuItemType.BUTTON,icon:`BottomIcon`,title:`image-panel.arrange.back`}}function pe(){return{id:C.id,type:i.MenuItemType.BUTTON,icon:`MoveDownIcon`,title:`image-panel.arrange.backward`}}const me=(n,r)=>{let i=n.get(t.IDrawingManagerService);return new a.Observable(t=>{let n=n=>{if(!n||n.length===0)return t.next(!0);if(r===`group`){if(n.length<2||!n.every(e=>w.includes(e.drawingType)))return t.next(!0)}else if(r===`unGroup`){if(n.filter(t=>t.drawingType===e.DrawingTypeEnum.DRAWING_GROUP).length===0)return t.next(!0)}else if(!n.every(e=>w.includes(e.drawingType)))return t.next(!0);t.next(!1)},a=i.focus$.subscribe(e=>{if(!e||e.length===0)return t.next(!0);n(e)});return n(i.getFocusDrawings()),()=>a.unsubscribe()})},he=`contextMenu.drawing-group`;function ge(e){return{id:he,type:i.MenuItemType.SUBITEMS,icon:`GroupIcon`,title:`image-panel.group.title`,hidden$:me(e)}}function _e(e){return{id:T.id,type:i.MenuItemType.BUTTON,icon:`GroupIcon`,title:`image-panel.group.group`,disabled$:me(e,`group`)}}function ve(e){return{id:E.id,type:i.MenuItemType.BUTTON,icon:`UngroupIcon`,title:`image-panel.group.unGroup`,disabled$:me(e,`unGroup`)}}const ye={[i.ContextMenuPosition.DRAWING]:{[i.ContextMenuGroup.OTHERS]:{[he]:{order:1,menuItemFactory:ge,[T.id]:{order:0,menuItemFactory:_e},[E.id]:{order:1,menuItemFactory:ve}},[ce]:{order:2,menuItemFactory:le,[b.id]:{order:0,menuItemFactory:ue},[x.id]:{order:1,menuItemFactory:de},[S.id]:{order:2,menuItemFactory:fe},[C.id]:{order:3,menuItemFactory:pe}},[R]:{order:3,menuItemFactory:te,[d.id]:{order:0,menuItemFactory:z},[f.id]:{order:1,menuItemFactory:B},[p.id]:{order:2,menuItemFactory:ne},[m.id]:{order:3,menuItemFactory:re},[h.id]:{order:4,menuItemFactory:ie},[g.id]:{order:5,menuItemFactory:ae},[_.id]:{order:6,menuItemFactory:oe},[v.id]:{order:7,menuItemFactory:se}}}}},be=`COMPONENT_IMAGE_POPUP_MENU`;function xe(t){var n;let{popup:a}=t,l=a==null||(n=a.extraProps)==null?void 0:n.menuItems;if(!l)return null;let u=(0,i.useDependency)(e.ICommandService),d=(0,i.useDependency)(e.LocaleService),[f,p]=(0,s.useState)(!1),[m,h]=(0,s.useState)(!1),g=()=>{h(!0)},_=()=>{h(!1)},v=e=>{p(e)},y=e=>{u.executeCommand(e.commandId,e.commandParams),p(!1)},b=f||m;return(0,c.jsx)(`div`,{onMouseEnter:g,onMouseLeave:_,children:(0,c.jsx)(o.DropdownMenu,{align:`start`,items:l.map(e=>({type:`item`,children:d.t(e.label),disabled:e.disable,onSelect:()=>y(e)})),open:f,onOpenChange:v,children:(0,c.jsxs)(`div`,{className:(0,o.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`,o.borderClassName,{"univer-bg-gray-100 dark:!univer-bg-gray-800":f,"univer-bg-white dark:!univer-bg-gray-900":!f}),children:[(0,c.jsx)(r.AutofillDoubleIcon,{className:`univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white`}),b&&(0,c.jsx)(r.MoreDownIcon,{className:`dark:!univer-text-white`})]})})})}function V(e,t){return function(n,r){t(n,r,e)}}function H(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 U=class extends e.Disposable{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(ye)}_initCommands(){[D,O,j,u,d,f,p,m,h,g,_,v,A,T,E,y,b,x,S,C].forEach(e=>this.disposeWithMe(this._commandService.registerCommand(e)))}_initComponents(){[[be,xe],[`BottomIcon`,r.BottomIcon],[`GroupIcon`,r.GroupIcon],[`MoveDownIcon`,r.MoveDownIcon],[`MoveUpIcon`,r.MoveUpIcon],[`TopmostIcon`,r.TopmostIcon],[`UngroupIcon`,r.UngroupIcon]].forEach(([e,t])=>{this.disposeWithMe(this._componentManager.register(e,t))})}};U=H([V(0,(0,e.Inject)(i.ComponentManager)),V(1,e.ICommandService),V(2,i.IMenuManagerService)],U);function W(t,n){let r=[];return t.forEach(t=>{let{oKey:i,left:a,top:o,height:s,width:c,angle:l}=t,u=n.getDrawingOKey(i);if(u==null)return r.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===e.DrawingTypeEnum.DRAWING_IMAGE&&(h.srcRect=t.srcRect),r.push(h)}),r}function G(e){"@babel/helpers - typeof";return G=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},G(e)}function Se(e,t){if(G(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(G(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function Ce(e){var t=Se(e,`string`);return G(t)==`symbol`?t:t+``}function K(e,t,n){return(t=Ce(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}let q=class extends e.Disposable{constructor(e,t,n,r){super(),this._currentUniverService=e,this._commandService=t,this._renderManagerService=n,this._drawingManagerService=r,K(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=N(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===u.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:r,children:i}=e,{unitId:a,subUnitId:o,drawingId:s}=r,c=this._getSceneAndTransformerByDrawingSearch(r.unitId);if(c==null)return;let{scene:l,transformer:u}=c;this._commandService.syncExecuteCommand(O.id);let d=[];if(i.forEach(e=>{let r=(0,t.getDrawingShapeKeyByDrawingSearch)(e),i=l.getObjectIncludeInGroup(r);if(i==null||d.includes(i))return;d.push(i);let{transform:a}=e;a!=null&&(i.classType===n.RENDER_CLASS_TYPE.GROUP?i.transformByState({left:a.left,top:a.top}):i.transformByState(a))}),d.length===0)return;let f=new n.DrawingGroupObject((0,t.getDrawingShapeKeyByDrawingSearch)({unitId:a,subUnitId:o,drawingId:s}));l.addObject(f,n.DRAWING_OBJECT_LAYER_INDEX).attachTransformerTo(f),f.addObjects(...d),r.groupBaseBound&&f.setBaseBound(r.groupBaseBound),r.groupId&&(f.isInGroup=!0,M({drawingId:r.groupId,unitId:a,subUnitId:o},f,l,this._drawingManagerService)),r.transform&&f.transformByState({left:r.transform.left,top:r.transform.top,width:r.transform.width,height:r.transform.height,angle:r.transform.angle}),u.clearSelectedObjects(),u.setSelectedControl(f)}_ungroupDrawings(e){e.forEach(e=>{this._ungroupDrawing(e)})}_ungroupDrawing(e){let{parent:r,children:i}=e,a=this._getSceneAndTransformerByDrawingSearch(r.unitId);if(a==null)return;let{scene:o,transformer:s}=a;i.forEach(e=>{let r=(0,t.getDrawingShapeKeyByDrawingSearch)(e),i=o.getObjectIncludeInGroup(r);if(i==null)return!0;if(i==null)return;let{transform:a}=e;a!=null&&(i.classType===n.RENDER_CLASS_TYPE.GROUP?i.transformByState({left:a.left,top:a.top}):i.transformByState(a))});let c=(0,t.getDrawingShapeKeyByDrawingSearch)(r),l=o.getObject(c),{width:u,height:d}=l;l.getObjects().forEach(e=>{l.removeSelfObjectAndTransform(e.oKey,u,d)}),l.dispose(),s.clearSelectedObjects()}_drawingAlign(e){let{alignType:t}=e,n=e.drawings||this._drawingManagerService.getFocusDrawings();if(t===l.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,u=[],d=this._getSceneAndTransformerByDrawingSearch(e[0].unitId);if(d==null)return;let{scene:f,transformer:p}=d;e.forEach((e,o)=>{let{unitId:d,subUnitId:f,drawingId:p,transform:m,drawingType:h}=e,{left:g=0,top:_=0,width:v=0,height:y=0}=m,b=g,x=_;switch(t){case l.left:b=n;break;case l.center:b=n+(i-n)/2-v/2;break;case l.right:b=i-v;break;case l.top:x=r;break;case l.middle:x=r+(a-r)/2-y/2;break;case l.bottom:x=a-y;break;case l.horizon:b=n+s*o;break;case l.vertical:x=r+c*o;break;default:break}(b!==g||x!==_)&&u.push({unitId:d,subUnitId:f,drawingId:p,drawingType:h,transform:{left:b,top:x}})}),this._drawingManagerService.featurePluginUpdateNotification(u),p.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:u=0,top:d=0,width:f=0,height:p=0}=i;switch(t){case l.left:return a-u;case l.center:return a+s/2-(u+f/2);case l.right:return a+s-(u+f);case l.top:return o-d;case l.middle:return o+c/2-(d+p/2);case l.bottom:return o+c-(d+p);case l.horizon:return a+s/2-(u+f/2);case l.vertical:return o+c/2-(d+p/2);default:return 0}})}_drawingArrangeListener(){this.disposeWithMe(this._drawingManagerService.order$.subscribe(e=>{this._drawingArrange(e)}))}_drawingArrange(e){let{unitId:n,subUnitId:r,drawingIds:i}=e,a=this._getSceneAndTransformerByDrawingSearch(n);if(a==null)return;let{scene:o}=a;i.forEach(e=>{let i=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:n,subUnitId:r,drawingId:e}),a=o.fuzzyMathObjects(i,!0);if(a==null||a.length===0)return;let s=this._drawingManagerService.getDrawingOrder(n,r).indexOf(e);for(let e of a)e.setProps({zIndex:s}),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:n,subUnitId:r,drawingId:i}=e,a=this._getSceneAndTransformerByDrawingSearch(n);if(a==null)return;let{scene:o}=a,s=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:n,subUnitId:r,drawingId:i}),c=o.fuzzyMathObjects(s,!0);if(c.length>0){var l;for(let e of c)e.dispose();(l=o.getTransformer())==null||l.clearSelectedObjects()}})}))}_drawingUpdateListener(){this.disposeWithMe(this._drawingManagerService.update$.subscribe(e=>{e.forEach(e=>{var n;let{unitId:r,subUnitId:i,drawingId:a}=e,o=this._drawingManagerService.getDrawingByParam(e);if(o==null)return;let{transform:s,drawingType:c}=o,l=this._getSceneAndTransformerByDrawingSearch(r);if(l==null)return;let{scene:u,transformer:d}=l;if(s==null)return!0;let{left:f=0,top:p=0,width:m=0,height:h=0,angle:g=0,flipX:_=!1,flipY:v=!1,skewX:y=0,skewY:b=0}=s,x=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:r,subUnitId:i,drawingId:a}),S=u.getObject(x);if(S==null)return!0;S.transformByState({left:f,top:p,width:m,height:h,angle:g,flipX:_,flipY:v,skewX:y,skewY:b}),(n=u.getTransformer())==null||n.debounceRefreshControls()})}))}_drawingRefreshListener(){this.disposeWithMe(this._drawingManagerService.refreshTransform$.subscribe(e=>{e.forEach(e=>{let{unitId:n,subUnitId:r,drawingId:i}=e,a=this._getSceneAndTransformerByDrawingSearch(n);if(a==null)return;let o=this._drawingManagerService.getDrawingByParam(e);if(o==null)return;let{transform:s}=o,{scene:c}=a,l=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:n,subUnitId:r,drawingId:i}),u=c.getObject(l);if(u==null||s==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}=s;u.transformByState({left:d,top:f,width:p,height:m,angle:h,flipX:g,flipY:_,skewX:v,skewY:y})})}))}_drawingVisibleListener(){this.disposeWithMe(this._drawingManagerService.visible$.subscribe(e=>{e.forEach(e=>{let{unitId:n,subUnitId:r,drawingId:i,visible:a}=e,o=this._getSceneAndTransformerByDrawingSearch(n);if(o==null)return;let{scene:s}=o,c=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:n,subUnitId:r,drawingId:i}),l=s.getObject(c);if(l==null)return!0;a?l.show():l.hide()})}))}_filterUpdateParams(t,n){return t.filter((t,r)=>{if(t==null)return!1;let{transform:i}=t;return(0,e.checkIfMove)(i,n==null?void 0:n[r])})}_addListenerOnDrawing(r){let i=r.getTransformerByCreate(),a=null;this.disposeWithMe((0,e.toDisposable)(i.changeStart$.subscribe(e=>{let{objects:r}=e,i=Array.from(r.values()),o=[];a=i.map(e=>{let{left:t,top:r,height:i,width:a,angle:s,oKey:c,isInGroup:l}=e,u=this._drawingManagerService.getDrawingOKey(c);if(l||e instanceof n.Group){let t=e.ancestorGroup;if(t==null&&e instanceof n.Group&&(t=e),t==null)return null;let r=this._drawingManagerService.getDrawingOKey(t.oKey);if(r){let{unitId:e,subUnitId:n,drawingId:i}=r;o.push({unitId:e,subUnitId:n,drawingId:i});let{left:a,top:s,height:c,width:l,angle:u}=t;return{left:a,top:s,height:c,width:l,angle:u}}}else if(u!=null){let{unitId:e,subUnitId:n,drawingId:c}=u;return o.push({unitId:e,subUnitId:n,drawingId:c}),{left:t,top:r,height:i,width:a,angle:s}}return null}).filter(e=>e!=null),o.length>0?this._commandService.syncExecuteCommand(t.SetDrawingSelectedOperation.id,o):this._commandService.syncExecuteCommand(t.SetDrawingSelectedOperation.id,[])}))),this.disposeWithMe((0,e.toDisposable)(i.changeEnd$.subscribe(e=>{let{objects:t}=e,n=this._filterUpdateParams(W(t,this._drawingManagerService),a);n.length>0&&this._drawingManagerService.featurePluginUpdateNotification(n)})))}};q=H([V(0,e.IUniverInstanceService),V(1,e.ICommandService),V(2,n.IRenderManagerService),V(3,t.IDrawingManagerService)],q);var J=function(e){return e[e.RECT=0]=`RECT`,e[e.PATH=1]=`PATH`,e}(J||{}),Y=class extends n.Shape{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),K(this,`_srcRect`,void 0),K(this,`_prstGeom`,void 0),K(this,`_applyTransform`,void 0),K(this,`_dragPadding`,8),K(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,r;let{width:i,height:a}=this.getScene().getEngine();this._initialCacheCanvas(),(t=this._cacheCanvas)==null||t.clear();let o=(r=this._cacheCanvas)==null?void 0:r.getContext();o!=null&&(o.save(),n.Rect.drawWith(o,{left:0,top:0,width:i,height:a,fill:`rgba(0, 0, 0, 0.5)`}),o.setTransform(e.getTransform()),this._clipForApplyObject(o),this._applyCache(e),o.restore())}_clipForApplyObject(e){let t=J.RECT;if(this._prstGeom!=null&&(t=J.PATH),e.globalCompositeOperation=`destination-out`,e.beginPath(),t===J.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 n.Canvas;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 we=class extends e.Disposable{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,K(this,`_sceneListenerOnImageMap`,new WeakSet),this._init()}_init(){this._initOpenCrop(),this._initCloseCrop(),this._initAutoCrop()}_initAutoCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==A.id)return;let r=e.params;if(r==null)return;let{cropType:i}=r,a=this._drawingManagerService.getFocusDrawings();if(a.length!==1)return;let{unitId:s,subUnitId:c,drawingId:l}=a[0],u=this._renderManagerService.getRenderById(s),d=u==null?void 0:u.scene;if(d==null)return!0;this._searchCropObject(d)!=null&&this._commandService.syncExecuteCommand(O.id,{isAuto:!0});let f=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:s,subUnitId:c,drawingId:l}),p=d.getObject(f);if(!(p instanceof n.Image)){this._messageService.show({type:o.MessageType.Error,content:this._localeService.t(`image-cropper.error`)});return}p!=null&&(this._updateCropperObject(i,p),this._commandService.executeCommand(D.id,{unitId:s,subUnitId:c,drawingId:l}))}))}_calculateSrcRectByRatio(e,t,r,i,a,o){let s=r/i,c=a/o,l=r,u=i;s>c?l=i*c:u=r/c;let d=(r-l)/2,f=(i-u)/2;return{left:(0,n.precisionTo)(d,1),top:(0,n.precisionTo)(f,1),right:(0,n.precisionTo)(r-(d+l),1),bottom:(0,n.precisionTo)(i-(f+u),1)}}_updateCropperObject(e,t){let{left:n,top:r,width:i,height:a}=t.calculateTransformWithSrcRect(),o;switch(e){case k.R1_1:o=this._calculateSrcRectByRatio(n,r,i,a,1,1);break;case k.R16_9:o=this._calculateSrcRectByRatio(n,r,i,a,16,9);break;case k.R9_16:o=this._calculateSrcRectByRatio(n,r,i,a,9,16);break;case k.R5_4:o=this._calculateSrcRectByRatio(n,r,i,a,5,4);break;case k.R4_5:o=this._calculateSrcRectByRatio(n,r,i,a,4,5);break;case k.R4_3:o=this._calculateSrcRectByRatio(n,r,i,a,4,3);break;case k.R3_4:o=this._calculateSrcRectByRatio(n,r,i,a,3,4);break;case k.R3_2:o=this._calculateSrcRectByRatio(n,r,i,a,3,2);break;case k.R2_3:o=this._calculateSrcRectByRatio(n,r,i,a,2,3);break;case k.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!==D.id)return;let r=e.params;if(r==null)return;let{unitId:i,subUnitId:a,drawingId:s}=r,c=this._renderManagerService.getRenderById(i),l=c==null?void 0:c.scene;if(l==null)return!0;if(this._sceneListenerOnImageMap.has(l)||(this._addListenerOnImage(l),this._sceneListenerOnImageMap.add(l)),this._drawingManagerService.getDrawingByParam({unitId:i,subUnitId:a,drawingId:s})==null)return;let u=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:i,subUnitId:a,drawingId:s}),d=l.getObject(u);if(d==null)return;if(!(d instanceof n.Image)){this._messageService.show({type:o.MessageType.Error,content:this._localeService.t(`image-cropper.error`)});return}let f=l.getTransformer();f==null||f.clearControls();let p=new Y(`${u}-crop`,{srcRect:d.srcRect,prstGeom:d.prstGeom,applyTransform:d.calculateTransformWithSrcRect()});l.addObject(p,d.getLayerIndex()+1).attachTransformerTo(p),f==null||f.createControlForCopper(p),this._addHoverForImageCopper(p),d.openRenderByCropper(),f==null||f.refreshControls(),p.makeDirty(!0),this._commandService.syncExecuteCommand(t.SetDrawingSelectedOperation.id,[{unitId:i,subUnitId:a,drawingId:s}])}))}_searchCropObject(e){let t=e.getAllObjectsByOrder();for(let e of t)if(e instanceof Y)return e}_initCloseCrop(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==O.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 t=this._univerInstanceService.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,a.switchMap)(e=>e?e.activeSheet$:(0,a.of)(null)));this.disposeWithMe(t.subscribe(()=>{this._commandService.syncExecuteCommand(O.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(t){let n=t.getTransformerByCreate(),r=null;this.disposeWithMe(n.changeStart$.subscribe(e=>{let{objects:t}=e,i=t.values().next().value;if(i==null||!(i instanceof Y))return;let{left:a,top:o,height:s,width:c,angle:l}=i;r={left:a,top:o,height:s,width:c,angle:l},n.clearCopperControl()})),this.disposeWithMe(n.changeEnd$.subscribe(t=>{let{objects:i}=t,a=i.values().next().value;if(a==null||!(a instanceof Y))return;let{left:o,top:s,height:c,width:l,angle:u}=a;if(!(0,e.checkIfMove)({left:o,top:s,height:c,width:l,angle:u},r))return;let d=this._getApplyObjectByCropObject(a);if(d==null)return;let f=this._getSrcRectByTransformState(d,a);a.refreshSrcRect(f.srcRect,d.getState()),n.createControlForCopper(a)})),this._endCropListener(t)}_addHoverForImageCopper(e){this.disposeWithMe(e.onPointerEnter$.subscribeEvent(()=>{e.cursor=n.CURSOR_TYPE.MOVE})),this.disposeWithMe(e.onPointerLeave$.subscribeEvent(()=>{e.cursor=n.CURSOR_TYPE.DEFAULT}))}_endCropListener(e){let t=e.getTransformerByCreate();this.disposeWithMe(t.clearControl$.subscribe(e=>{e===!0&&this._commandService.syncExecuteCommand(O.id)}))}_getSrcRectByTransformState(e,t){let{left:r,top:i,height:a,width:o,strokeWidth:s,angle:c}=t,{left:l,top:u,width:d,height:f,angle:p,strokeWidth:m}=e,h=r-l,g=i-u,_={left:h,top:g,right:d-h-o,bottom:f-g-a},v={..._};if(p!==0){let e=new n.Vector2(r+o/2,i+a/2),t=new n.Vector2(d/2+l,f/2+u),s=new n.Vector2(l,u);s.rotateByPoint((0,n.degToRad)(p),t);let c=s.clone();c.rotateByPoint((0,n.degToRad)(-p),e);let m=r-c.x,h=i-c.y;v.left=m,v.top=h,v.right=d-m-o,v.bottom=f-h-a}return{srcRect:_,srcRectAngle:v}}};we=H([V(0,e.ICommandService),V(1,t.IDrawingManagerService),V(2,n.IRenderManagerService),V(3,e.IUniverInstanceService),V(4,i.IMessageService),V(5,(0,e.Inject)(e.LocaleService))],we);var X=class extends e.Disposable{constructor(){super(),K(this,`_clipDelegate`,null),K(this,`_canUseShapeClip$`,new a.BehaviorSubject(!1)),K(this,`canUseShapeClip$`,this._canUseShapeClip$.asObservable())}setCanUseShapeClip(e){this._canUseShapeClip$.next(e)}registerClipDelegate(t){return this._clipDelegate=t,(0,e.toDisposable)(()=>{this._clipDelegate===t&&(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 Z=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(r,i){let{transform:a,drawingType:o,source:s,imageSourceType:c,srcRect:l,prstGeom:u,groupId:d,unitId:f,subUnitId:p,drawingId:m,isMultiTransform:h,transforms:g,adjustValues:_}=r;if(o!==e.DrawingTypeEnum.DRAWING_IMAGE||!this._drawingManagerService.getDrawingVisible()||this._univerInstanceService.getUnitType(f)===e.UniverInstanceType.UNIVER_SHEET&&p!==this._getActiveSheetId()||a==null)return;let v=h&&g?g:[a],y=[];for(let e of v){let{left:r,top:a,width:o,height:g,angle:b,flipX:x,flipY:S,skewX:C,skewY:w}=e,T=v.indexOf(e),E=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:f,subUnitId:p,drawingId:m},h?T:void 0),D=i.getObject(E);if(D!=null){D.transformByState({left:r,top:a,width:o,height:g,angle:b,flipX:x,flipY:S,skewX:C,skewY:w});continue}let O=this._drawingManagerService.getDrawingOrder(f,p),k=O.indexOf(m),A={...e,zIndex:k===-1?O.length-1:k},j=this._imageIoService.getImageSourceCache(s,c),N=!1;if(j!=null)A.image=j;else if(c===t.ImageSourceType.UUID)try{A.url=await this._imageIoService.getImage(s)}catch(e){console.error(e);continue}else if(c===t.ImageSourceType.URL){try{A.url=await this._urlImageService.getImage(s)}catch(e){console.error(e),A.url=s}N=!0}else A.url=s,N=!0;if(i.getObject(E))continue;A.printable=!0;let P=new n.Image(E,A);P.setClipService(this._drawingImageClipService),N&&this._imageIoService.addImageSourceCache(s,c,P.getNative()),i.addObject(P,n.DRAWING_OBJECT_LAYER_INDEX),this._drawingManagerService.getDrawingEditable()&&i.attachTransformerTo(P),d&&M({drawingId:d,unitId:f,subUnitId:p},P,i,this._drawingManagerService),u!=null&&P.setPrstGeom(u),_!=null&&P.setPrstGeomAdjValues(_),l!=null&&P.setSrcRect(l),y.push(P)}return y}_getActiveSheetId(){var t;return(t=this._univerInstanceService.getCurrentUnitOfType(e.UniverInstanceType.UNIVER_SHEET))==null||(t=t.getActiveSheet())==null?void 0:t.getSheetId()}renderFloatDom(r,i){let{transform:a,drawingType:o,groupId:s,unitId:c,subUnitId:l,drawingId:u,isMultiTransform:d,transforms:f}=r;if(o!==e.DrawingTypeEnum.DRAWING_DOM||!this._drawingManagerService.getDrawingVisible()||a==null)return;let p=d&&f?f:[a],m=[];for(let e of p){let{left:a,top:o,width:f,height:h,angle:g,flipX:_,flipY:v,skewX:y,skewY:b}=e,x=p.indexOf(e),S=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:c,subUnitId:l,drawingId:u},d?x:void 0),C=i.getObject(S);if(C!=null){C.transformByState({left:a,top:o,width:f,height:h,angle:g,flipX:_,flipY:v,skewX:y,skewY:b});continue}let w=this._drawingManagerService.getDrawingOrder(c,l),T=w.indexOf(u),E={...e,zIndex:T===-1?w.length-1:T};if(i.getObject(S))continue;E.printable=!1;let D=new n.Rect(S,E);this._drawingManagerService.getDrawingVisible()&&(i.addObject(D,n.DRAWING_OBJECT_LAYER_INDEX),this._drawingManagerService.getDrawingEditable()&&r.allowTransform!==!1&&i.attachTransformerTo(D),s&&M({drawingId:s,unitId:c,subUnitId:l},D,i,this._drawingManagerService),m.push(D))}return m}renderDrawing(t,n){let r=this._drawingManagerService.getDrawingByParam(t);if(r!=null)switch(r.drawingType){case e.DrawingTypeEnum.DRAWING_IMAGE:return this.renderImages(r,n);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)}}};Z=H([V(0,t.IDrawingManagerService),V(1,t.IImageIoService),V(2,i.IGalleryService),V(3,e.IURLImageService),V(4,e.IUniverInstanceService),V(5,(0,e.Inject)(X))],Z);let Q=class extends e.Disposable{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===j.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(n){let r=[],i=[];n.forEach(n=>{let{unitId:a,subUnitId:o,drawingId:s}=n,c=this._getSceneAndTransformerByDrawingSearch(a);if(c==null)return;let{scene:l}=c,u=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:a,subUnitId:o,drawingId:s}),d=l.getObject(u);if(d==null)return!0;let f=this._drawingManagerService.getDrawingByParam(n);if(f==null)return!0;if(f.drawingType!==e.DrawingTypeEnum.DRAWING_IMAGE)return;d.resetSize();let{width:p,height:m}=d.getNativeSize();i.includes(l)===!1&&i.push(l),r.push({...f,transform:{...f.transform,height:m,width:p,angle:0},srcRect:null,prstGeom:null})}),this._drawingManagerService.featurePluginUpdateNotification(r),i.forEach(e=>{e.getTransformerByCreate().refreshControls().changeNotification()}),this._commandService.syncExecuteCommand(t.SetDrawingSelectedOperation.id,n)}_drawingAddListener(){this.disposeWithMe(this._drawingManagerService.add$.pipe((0,a.bufferTime)(33),(0,a.filter)(e=>e.length>0),(0,a.map)(e=>e.flat()),(0,a.map)(e=>{let t=new Map;for(let n of e)t.set(`${n.unitId}|${n.subUnitId}|${n.drawingId}`,n);return[...t.values()]}),(0,a.filter)(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=N(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(n=>{n.forEach(n=>{let{unitId:r,subUnitId:i,drawingId:a}=n,o=this._drawingManagerService.getDrawingByParam(n);if(o==null)return;let{transform:s,drawingType:c,srcRect:l,prstGeom:u,source:d,imageSourceType:f}=o;if(c!==e.DrawingTypeEnum.DRAWING_IMAGE)return;let p=this._getSceneAndTransformerByDrawingSearch(r);if(p==null)return;let{scene:m,transformer:h}=p;if(s==null)return!0;let g=(0,t.getDrawingShapeKeyByDrawingSearch)({unitId:r,subUnitId:i,drawingId:a}),_=m.getObject(g);if(_==null)return!0;_.setSrcRect(l),_.setPrstGeom(u),d!=null&&d.length>0&&(f===e.ImageSourceType.BASE64||f===e.ImageSourceType.URL)&&_.changeSource(d)})}))}_addHoverForImage(t){this.disposeWithMe((0,e.toDisposable)(t.onPointerEnter$.subscribeEvent(()=>{t.cursor=n.CURSOR_TYPE.GRAB}))),this.disposeWithMe((0,e.toDisposable)(t.onPointerLeave$.subscribeEvent(()=>{t.cursor=n.CURSOR_TYPE.DEFAULT})))}_addDialogForImage(t){this.disposeWithMe((0,e.toDisposable)(t.onDblclick$.subscribeEvent(()=>{let e=`${t.oKey}-viewer-dialog`;this._drawingRenderService.previewImage(e,t.getNative().src,t.getNativeSize().width,t.getNativeSize().height)})))}};Q=H([V(0,e.ICommandService),V(1,n.IRenderManagerService),V(2,t.IDrawingManagerService),V(3,i.IDialogService),V(4,t.IImageIoService),V(5,e.IUniverInstanceService),V(6,(0,e.Inject)(Z))],Q);let $=class extends e.Plugin{constructor(t=ee,n,r){super(),this._config=t,this._injector=n,this._configService=r;let{menu:i,...a}=(0,e.merge)({},ee,this._config);i&&this._configService.setConfig(`menu`,i,{merge:!0}),this._configService.setConfig(I,a)}onStarting(){this._initDependencies()}onRendered(){this._injector.get(q),this._injector.get(U),this._injector.get(we),this._injector.get(Q)}_initDependencies(){[[X],[Z],[q],[U],[we],[Q]].forEach(e=>this._injector.add(e))}};K($,`pluginName`,`UNIVER_DRAWING_UI_PLUGIN`),K($,`packageName`,P),K($,`version`,F),$=H([V(1,(0,e.Inject)(e.Injector)),V(2,e.IConfigService)],$);const Te=t=>{let n=(0,i.useDependency)(e.ICommandService),r=(0,i.useDependency)(e.LocaleService),{drawings:a,alignShow:d}=t,[f,p]=(0,s.useState)(l.default),m=[{label:r.t(`image-panel.align.default`),value:l.default},{options:[{label:r.t(`image-panel.align.left`),value:l.left},{label:r.t(`image-panel.align.center`),value:l.center},{label:r.t(`image-panel.align.right`),value:l.right}]},{options:[{label:r.t(`image-panel.align.top`),value:l.top},{label:r.t(`image-panel.align.middle`),value:l.middle},{label:r.t(`image-panel.align.bottom`),value:l.bottom}]},{options:[{label:r.t(`image-panel.align.horizon`),value:l.horizon},{label:r.t(`image-panel.align.vertical`),value:l.vertical}]}];function h(e){p(e),n.executeCommand(u.id,{alignType:e,drawings:a})}return(0,c.jsxs)(`div`,{className:(0,o.clsx)(`univer-relative univer-w-full`,{"univer-hidden":!d}),children:[(0,c.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,c.jsx)(`div`,{children:r.t(`image-panel.align.title`)})}),(0,c.jsx)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:(0,c.jsx)(`div`,{className:`univer-w-full univer-text-gray-900 dark:!univer-text-white`,children:(0,c.jsx)(o.Select,{value:f,options:m,onChange:h})})})]})},Ee=n=>{let{arrangeShow:r,drawings:a}=n,l=(0,i.useDependency)(e.LocaleService),u=(0,i.useDependency)(t.IDrawingManagerService),d=(0,i.useDependency)(e.ICommandService),f=(0,i.useDependency)(i.ComponentManager),p=f.get(`MoveUpIcon`),m=f.get(`MoveDownIcon`),h=f.get(`TopmostIcon`),g=f.get(`BottomIcon`),[_,v]=(0,s.useState)(a);(0,s.useEffect)(()=>{let e=u.focus$.subscribe(e=>{v(e)});return()=>{e.unsubscribe()}},[]);let b=e=>{d.syncExecuteCommand(y.id,{arrangeType:e,drawings:_})};return(0,c.jsxs)(`div`,{className:(0,o.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!r}),children:[(0,c.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,c.jsx)(`div`,{children:l.t(`image-panel.arrange.title`)})}),(0,c.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2`,children:[(0,c.jsxs)(o.Button,{onClick:()=>{b(e.ArrangeTypeEnum.forward)},children:[(0,c.jsx)(p,{}),l.t(`image-panel.arrange.forward`)]}),(0,c.jsxs)(o.Button,{onClick:()=>{b(e.ArrangeTypeEnum.backward)},children:[(0,c.jsx)(m,{}),l.t(`image-panel.arrange.backward`)]}),(0,c.jsxs)(o.Button,{onClick:()=>{b(e.ArrangeTypeEnum.front)},children:[(0,c.jsx)(h,{}),l.t(`image-panel.arrange.front`)]}),(0,c.jsxs)(o.Button,{onClick:()=>{b(e.ArrangeTypeEnum.back)},children:[(0,c.jsx)(g,{}),l.t(`image-panel.arrange.back`)]})]})]})},De=r=>{let a=(0,i.useDependency)(e.LocaleService),l=(0,i.useDependency)(n.IRenderManagerService),u=(0,i.useDependency)(t.IDrawingManagerService),d=(0,i.useDependency)(e.ICommandService),f=(0,i.useDependency)(i.ComponentManager),{hasGroup:p,drawings:m}=r,h=f.get(`GroupIcon`),g=f.get(`UngroupIcon`),[_,v]=(0,s.useState)(!1),[y,b]=(0,s.useState)(!0),[x,S]=(0,s.useState)(!0),C=()=>{d.syncExecuteCommand(T.id,{drawings:m})},w=()=>{d.syncExecuteCommand(E.id,{drawings:m})};return(0,s.useEffect)(()=>{let t=m[0];if(t==null)return;let{unitId:n}=t,r=l.getRenderById(n),i=r==null?void 0:r.scene;if(i==null)return;let a=i.getTransformerByCreate(),o=a.clearControl$.subscribe(e=>{e===!0&&v(!1)}),s=a.changeStart$.subscribe(t=>{let{objects:n}=t,r=W(n,u),i=r.filter(t=>(t==null?void 0:t.drawingType)===e.DrawingTypeEnum.DRAWING_GROUP),a=!1,o=!1;r.length>1&&(a=!0),i.length>0&&(o=!0),v(a||o),b(a),S(o)});return()=>{s.unsubscribe(),o.unsubscribe()}},[]),(0,c.jsxs)(`div`,{className:(0,o.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":p===!0&&_===!1||p===!1}),children:[(0,c.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,c.jsx)(`div`,{children:a.t(`image-panel.group.title`)})}),(0,c.jsxs)(`div`,{className:`univer-flex univer-items-center univer-justify-center univer-gap-2`,children:[(0,c.jsxs)(o.Button,{className:(0,o.clsx)({"univer-hidden":!y}),onClick:C,children:[(0,c.jsx)(h,{}),a.t(`image-panel.group.group`)]}),(0,c.jsxs)(o.Button,{className:(0,o.clsx)({"univer-hidden":!x}),onClick:w,children:[(0,c.jsx)(g,{}),a.t(`image-panel.group.unGroup`)]})]})]})},Oe=[-360,360],ke=r=>{var a;let l=(0,i.useDependency)(e.LocaleService),u=(0,i.useDependency)(t.IDrawingManagerService),d=(0,i.useDependency)(n.IRenderManagerService),{drawings:f,transformShow:p}=r,m=f[0];if(m==null)return;let h=m.transform;if(h==null)return;let{unitId:g,subUnitId:_,drawingId:v,drawingType:y}=m,b=d.getRenderById(g),x=b==null?void 0:b.scene;if(x==null)return;let S=(a=x.getEngine())==null?void 0:a.activeScene;if(S==null)return;let C=x.getTransformerByCreate(),{width:w=0,height:T=0,left:E=0,top:D=0,angle:O=0}=h,[k,A]=(0,s.useState)(w),[j,M]=(0,s.useState)(T),[N,P]=(0,s.useState)(E),[F,I]=(0,s.useState)(D),[ee,L]=(0,s.useState)(O),[R,te]=(0,s.useState)(C.keepRatio),z=(e,t,n,r)=>{let{width:i,height:a}=S,{ancestorLeft:o,ancestorTop:s}=x,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}},B=e=>{let{objects:t}=e,n=W(t,u);if(n.length!==1)return;let r=n[0];if(r==null)return;let{transform:i}=r;if(i==null)return;let{width:a,height:o,left:s,top:c,angle:l}=i;a!=null&&A(a),o!=null&&M(o),s!=null&&P(s),c!=null&&I(c),l!=null&&L(l)};(0,s.useEffect)(()=>{let e=[C.changeStart$.subscribe(e=>{B(e)}),C.changing$.subscribe(e=>{B(e)}),C.changeEnd$.subscribe(e=>{B(e)}),u.focus$.subscribe(e=>{if(e.length!==1)return;let t=u.getDrawingByParam(e[0]);if(t==null)return;let n=t.transform;if(n==null)return;let{width:r,height:i,left:a,top:o,angle:s}=n;r!=null&&A(r),i!=null&&M(i),a!=null&&P(a),o!=null&&I(o),s!=null&&L(s)})];return()=>{e.forEach(e=>e.unsubscribe())}},[]);let ne=(0,e.debounce)(e=>{if(e==null)return;let{limitWidth:t,limitHeight:n}=z(N,F,e,j);e=Math.min(e,t);let r={unitId:g,subUnitId:_,drawingId:v,drawingType:y,transform:{width:e}};if(R){let t=e/k*j;if(t=Math.max(t,20),t>n)return;M(t),r.transform.height=t}A(e),u.featurePluginUpdateNotification([r]),C.refreshControls().changeNotification()},300),re=(0,e.debounce)(e=>{if(e==null)return;let{limitHeight:t,limitWidth:n}=z(N,F,k,e);e=Math.min(e,t);let r={unitId:g,subUnitId:_,drawingId:v,drawingType:y,transform:{height:e}};if(R){let t=e/j*k;if(t=Math.max(t,20),t>n)return;A(t),r.transform.width=t}M(e),u.featurePluginUpdateNotification([r]),C.refreshControls().changeNotification()},300),ie=(0,e.debounce)(e=>{if(e==null)return;let{limitLeft:t}=z(e,F,k,j);e=t;let n={unitId:g,subUnitId:_,drawingId:v,drawingType:y,transform:{left:e}};P(e),u.featurePluginUpdateNotification([n]),C.refreshControls().changeNotification()},300),ae=(0,e.debounce)(e=>{if(e==null)return;let{limitTop:t}=z(N,e,k,j);e=t;let n={unitId:g,subUnitId:_,drawingId:v,drawingType:y,transform:{top:e}};I(e),u.featurePluginUpdateNotification([n]),C.refreshControls().changeNotification()},300),oe=e=>{if(e==null)return;let t={unitId:g,subUnitId:_,drawingId:v,drawingType:y,transform:{angle:e}};L(e),u.featurePluginUpdateNotification([t]),C.refreshControls().changeNotification()},se=e=>{te(e),C.keepRatio=e};return(0,c.jsxs)(`div`,{className:(0,o.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!p}),children:[(0,c.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,c.jsx)(`div`,{children:l.t(`image-panel.transform.title`)})}),(0,c.jsxs)(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.width`)}),(0,c.jsx)(o.InputNumber,{precision:1,value:k,min:20,onChange:e=>{ne(e)}})]}),(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.height`)}),(0,c.jsx)(o.InputNumber,{precision:1,value:j,min:20,onChange:e=>{re(e)}})]}),(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.lock`)}),(0,c.jsx)(`div`,{className:`univer-text-center`,children:(0,c.jsx)(o.Checkbox,{checked:R,onChange:se})})]})]}),(0,c.jsxs)(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.x`)}),(0,c.jsx)(o.InputNumber,{precision:1,value:N,onChange:e=>{ie(e)}})]}),(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.y`)}),(0,c.jsx)(o.InputNumber,{precision:1,value:F,onChange:e=>{ae(e)}})]}),(0,c.jsxs)(`div`,{children:[(0,c.jsx)(`span`,{children:l.t(`image-panel.transform.rotate`)}),(0,c.jsx)(o.InputNumber,{precision:1,value:ee,min:Oe[0],max:Oe[1],onChange:oe})]})]})]})},Ae=t=>{let n=(0,i.useDependency)(e.ICommandService),a=(0,i.useDependency)(e.LocaleService),l=(0,i.useDependency)(X),u=(0,i.useDependency)(i.ComponentManager),d=(0,i.useObservable)(l.canUseShapeClip$,!1),{drawings:f,cropperShow:p}=t;if(f[0]==null)return;let[m,h]=(0,s.useState)(k.FREE),g=(0,s.useRef)(!1),_=[{label:a.t(`image-panel.crop.mode`),value:k.FREE},{label:`1:1`,value:k.R1_1},{label:`16:9`,value:k.R16_9},{label:`9:16`,value:k.R9_16},{label:`5:4`,value:k.R5_4},{label:`4:5`,value:k.R4_5},{label:`4:3`,value:k.R4_3},{label:`3:4`,value:k.R3_4},{label:`3:2`,value:k.R3_2},{label:`2:3`,value:k.R2_3}];(0,s.useEffect)(()=>{let e=n.onCommandExecuted(e=>{if(e.id===O.id){let t=e.params;t!=null&&t.isAuto||(g.current=!1)}});return()=>{e==null||e.dispose()}},[]);function v(e){h(e),g.current&&n.executeCommand(A.id,{cropType:e})}let y=e=>{n.executeCommand(A.id,{cropType:e}),g.current=!0};return(0,c.jsxs)(`div`,{className:(0,o.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!p}),children:[(0,c.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,c.jsx)(`div`,{children:a.t(`image-panel.crop.title`)})}),(0,c.jsxs)(`div`,{className:`univer-flex univer-items-center univer-justify-center univer-gap-2`,children:[(0,c.jsxs)(o.Button,{onClick:()=>{y(m)},children:[(0,c.jsx)(r.CreateCopyIcon,{}),a.t(`image-panel.crop.start`)]}),(0,c.jsx)(o.Select,{value:m,options:_,onChange:v})]}),d&&(()=>{let e=u.get(`sheet.image-clip.shape.picker.component`);return e?(0,c.jsx)(e,{}):null})()]})},je=r=>{let a=(0,i.useDependency)(t.IDrawingManagerService),l=(0,i.useDependency)(n.IRenderManagerService),u=(0,i.useDependency)(e.LocaleService),{drawings:d,hasArrange:f=!0,hasTransform:p=!0,hasAlign:m=!0,hasCropper:h=!0,hasGroup:g=!0}=r,_=d[0];if(_==null)return;let{unitId:v}=_,y=l.getRenderById(v),b=y==null?void 0:y.scene;if(b==null)return;let x=b.getTransformerByCreate(),[S,C]=(0,s.useState)(!0),[w,T]=(0,s.useState)(!0),[E,D]=(0,s.useState)(!1),[O,k]=(0,s.useState)(!0),[A,j]=(0,s.useState)(!1);return(0,s.useEffect)(()=>{let e=x.clearControl$.subscribe(e=>{e===!0&&(C(!1),T(!1),D(!1),k(!1),j(!0))}),t=x.changeStart$.subscribe(e=>{let{objects:t}=e,n=W(t,a);n.length===0?(C(!1),T(!1),D(!1),k(!1),j(!0)):n.length===1?(C(!0),T(!0),D(!1),k(!0),j(!1)):(C(!0),T(!1),D(!0),k(!1),j(!1))}),n=a.focus$.subscribe(e=>{e.length===0?(C(!1),T(!1),D(!1),k(!1),j(!0)):e.length===1?(C(!0),T(!0),D(!1),k(!0),j(!1)):(C(!0),T(!1),D(!0),k(!1),j(!1))});return()=>{t.unsubscribe(),e.unsubscribe(),n.unsubscribe()}},[]),(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`div`,{className:(0,o.clsx)(`univer-h-full`,{"univer-hidden":!A}),children:(0,c.jsx)(`div`,{className:`univer-flex univer-h-full univer-items-center univer-justify-center`,children:(0,c.jsx)(`span`,{children:u.t(`image-panel.null`)})})}),(0,c.jsx)(Ee,{arrangeShow:f===!0?S:!1,drawings:d}),(0,c.jsx)(ke,{transformShow:p===!0?w:!1,drawings:d}),(0,c.jsx)(Te,{alignShow:m===!0?E:!1,drawings:d}),(0,c.jsx)(Ae,{cropperShow:h===!0?O:!1,drawings:d}),(0,c.jsx)(De,{hasGroup:g,drawings:d})]})};exports.AutoImageCropOperation=A,exports.COMPONENT_IMAGE_POPUP_MENU=be,exports.CancelDrawingGroupOperation=E,exports.CloseImageCropOperation=O,exports.DRAWING_GROUP_TYPES=w,exports.DrawingCommonPanel=je,exports.DrawingImageClipService=X,Object.defineProperty(exports,`DrawingRenderService`,{enumerable:!0,get:function(){return Z}}),exports.IMAGE_CLIP_SHAPE_PICKER_COMPONENT=`sheet.image-clip.shape.picker.component`,exports.ImageCropperObject=Y,exports.ImagePopupMenu=xe,exports.ImageResetSizeOperation=j,exports.OpenImageCropOperation=D,exports.SetDrawingAlignOperation=u,exports.SetDrawingArrangeOperation=y,exports.SetDrawingGroupOperation=T,Object.defineProperty(exports,`UniverDrawingUIPlugin`,{enumerable:!0,get:function(){return $}}),exports.getCurrentUnitInfo=N,exports.getUpdateParams=W,exports.insertGroupObject=M;
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_drawing = require("@univerjs/drawing");
+let _univerjs_engine_render = require("@univerjs/engine-render");
+let _univerjs_icons = require("@univerjs/icons");
+let _univerjs_ui = require("@univerjs/ui");
+let rxjs = require("rxjs");
+let _univerjs_design = require("@univerjs/design");
+let react = require("react");
+let react_jsx_runtime = require("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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const SetDrawingAlignLeftOperation = {
+	id: "sheet.operation.set-drawing-align-left",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.left });
+	}
+};
+const SetDrawingAlignCenterOperation = {
+	id: "sheet.operation.set-drawing-align-center",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.center });
+	}
+};
+const SetDrawingAlignRightOperation = {
+	id: "sheet.operation.set-drawing-align-right",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.right });
+	}
+};
+const SetDrawingAlignTopOperation = {
+	id: "sheet.operation.set-drawing-align-top",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.top });
+	}
+};
+const SetDrawingAlignMiddleOperation = {
+	id: "sheet.operation.set-drawing-align-middle",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.middle });
+	}
+};
+const SetDrawingAlignBottomOperation = {
+	id: "sheet.operation.set-drawing-align-bottom",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.bottom });
+	}
+};
+const SetDrawingAlignHorizonOperation = {
+	id: "sheet.operation.set-drawing-align-horizon",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingAlignOperation.id, { alignType: AlignType.horizon });
+	}
+};
+const SetDrawingAlignVerticalOperation = {
+	id: "sheet.operation.set-drawing-align-vertical",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(_univerjs_drawing.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: _univerjs_core.ArrangeTypeEnum.front });
+	}
+};
+const SetDrawingArrangeForwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-forward",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: _univerjs_core.ArrangeTypeEnum.forward });
+	}
+};
+const SetDrawingArrangeBackOperation = {
+	id: "drawing.operation.set-drawing-arrange-back",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: _univerjs_core.ArrangeTypeEnum.back });
+	}
+};
+const SetDrawingArrangeBackwardOperation = {
+	id: "drawing.operation.set-drawing-arrange-backward",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		return accessor.get(_univerjs_core.ICommandService).syncExecuteCommand(SetDrawingArrangeOperation.id, { arrangeType: _univerjs_core.ArrangeTypeEnum.backward });
+	}
+};
+
+//#endregion
+//#region src/commands/operations/drawing-group.operation.ts
+/**
+* Now only support grouping images, shapes, and groups.
+*/
+const DRAWING_GROUP_TYPES = [
+	_univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
+	_univerjs_core.DrawingTypeEnum.DRAWING_SHAPE,
+	_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(_univerjs_drawing.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 = (0, _univerjs_core.generateRandomId)(10);
+		const groupTransform = (0, _univerjs_engine_render.getGroupState)(0, 0, drawings.map((o) => o.transform || {}));
+		const groupParam = {
+			unitId,
+			subUnitId,
+			drawingId: groupId,
+			drawingType: _univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(_univerjs_drawing.IDrawingManagerService);
+		const groupParams = (params.drawings || drawingManagerService.getFocusDrawings()).map((drawing) => {
+			if (drawing.drawingType !== _univerjs_core.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 = (0, _univerjs_engine_render.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		return true;
+	}
+};
+const CloseImageCropOperation = {
+	id: "sheet.operation.close-image-crop",
+	type: _univerjs_core.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: _univerjs_core.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: _univerjs_core.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 = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)(objectParam);
+	const groupObject = scene.getObjectIncludeInGroup(groupKey);
+	if (groupObject && !(groupObject instanceof _univerjs_engine_render.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 _univerjs_engine_render.DrawingGroupObject(groupKey);
+	scene.addObject(group, _univerjs_engine_render.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 === _univerjs_core.UniverInstanceType.UNIVER_SHEET) {
+		var _getActiveSheet;
+		subUnitId = (_getActiveSheet = current.getActiveSheet()) === null || _getActiveSheet === void 0 ? void 0 : _getActiveSheet.getSheetId();
+	} else if (current.type === _univerjs_core.UniverInstanceType.UNIVER_DOC) subUnitId = unitId;
+	else if (current.type === _univerjs_core.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(_univerjs_drawing.IDrawingManagerService);
+	return new rxjs.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: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$$1(accessor)
+	};
+}
+function SetDrawingAlignLeftMenuItemFactory() {
+	return {
+		id: SetDrawingAlignLeftOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "LeftJustifyingIcon",
+		title: "image-panel.align.left"
+	};
+}
+function SetDrawingAlignCenterMenuItemFactory() {
+	return {
+		id: SetDrawingAlignCenterOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.center"
+	};
+}
+function SetDrawingAlignRightMenuItemFactory() {
+	return {
+		id: SetDrawingAlignRightOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "RightJustifyingIcon",
+		title: "image-panel.align.right"
+	};
+}
+function SetDrawingAlignTopMenuItemFactory() {
+	return {
+		id: SetDrawingAlignTopOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "AlignTopIcon",
+		title: "image-panel.align.top"
+	};
+}
+function SetDrawingAlignMiddleMenuItemFactory() {
+	return {
+		id: SetDrawingAlignMiddleOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "VerticalCenterIcon",
+		title: "image-panel.align.middle"
+	};
+}
+function SetDrawingAlignBottomMenuItemFactory() {
+	return {
+		id: SetDrawingAlignBottomOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "AlignBottomIcon",
+		title: "image-panel.align.bottom"
+	};
+}
+function SetDrawingAlignHorizonMenuItemFactory() {
+	return {
+		id: SetDrawingAlignHorizonOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "HorizontallyIcon",
+		title: "image-panel.align.horizon"
+	};
+}
+function SetDrawingAlignVerticalMenuItemFactory() {
+	return {
+		id: SetDrawingAlignVerticalOperation.id,
+		type: _univerjs_ui.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: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "TopmostIcon",
+		title: "image-panel.arrange.title"
+	};
+}
+function SetDrawingArrangeFrontMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeFrontOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "TopmostIcon",
+		title: "image-panel.arrange.front"
+	};
+}
+function SetDrawingArrangeForwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeForwardOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "MoveUpIcon",
+		title: "image-panel.arrange.forward"
+	};
+}
+function SetDrawingArrangeBackMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "BottomIcon",
+		title: "image-panel.arrange.back"
+	};
+}
+function SetDrawingArrangeBackwardMenuItemFactory() {
+	return {
+		id: SetDrawingArrangeBackwardOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "MoveDownIcon",
+		title: "image-panel.arrange.backward"
+	};
+}
+
+//#endregion
+//#region src/menu/group.menu.ts
+const getMenuStateByDrawingFocusChangedObservable$ = (accessor, type) => {
+	const drawingManagerService = accessor.get(_univerjs_drawing.IDrawingManagerService);
+	return new rxjs.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 === _univerjs_core.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: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "GroupIcon",
+		title: "image-panel.group.title",
+		hidden$: getMenuStateByDrawingFocusChangedObservable$(accessor)
+	};
+}
+function SetDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: SetDrawingGroupOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "GroupIcon",
+		title: "image-panel.group.group",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "group")
+	};
+}
+function CancelDrawingGroupMenuItemFactory(accessor) {
+	return {
+		id: CancelDrawingGroupOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "UngroupIcon",
+		title: "image-panel.group.unGroup",
+		disabled$: getMenuStateByDrawingFocusChangedObservable$(accessor, "unGroup")
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [_univerjs_ui.ContextMenuPosition.DRAWING]: { [_univerjs_ui.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [isHovered, setHovered] = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _univerjs_design.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", _univerjs_design.borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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 _univerjs_core.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", _univerjs_icons.BottomIcon],
+			["GroupIcon", _univerjs_icons.GroupIcon],
+			["MoveDownIcon", _univerjs_icons.MoveDownIcon],
+			["MoveUpIcon", _univerjs_icons.MoveUpIcon],
+			["TopmostIcon", _univerjs_icons.TopmostIcon],
+			["UngroupIcon", _univerjs_icons.UngroupIcon]
+		].forEach(([key, component]) => {
+			this.disposeWithMe(this._componentManager.register(key, component));
+		});
+	}
+};
+DrawingUIController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_ui.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 === _univerjs_core.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 _univerjs_core.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 = (0, _univerjs_drawing.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 === _univerjs_engine_render.RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
+		});
+		if (objects.length === 0) return;
+		const group = new _univerjs_engine_render.DrawingGroupObject((0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+			unitId,
+			subUnitId,
+			drawingId
+		}));
+		scene.addObject(group, _univerjs_engine_render.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 = (0, _univerjs_drawing.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 === _univerjs_engine_render.RENDER_CLASS_TYPE.GROUP) object.transformByState({
+				left: transform.left,
+				top: transform.top
+			});
+			else object.transformByState(transform);
+		});
+		const groupKey = (0, _univerjs_drawing.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 = (0, _univerjs_drawing.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 = (0, _univerjs_drawing.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 = (0, _univerjs_drawing.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 = (0, _univerjs_drawing.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 = (0, _univerjs_drawing.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 (0, _univerjs_core.checkIfMove)(transform, startTransforms === null || startTransforms === void 0 ? void 0 : startTransforms[index]);
+		});
+	}
+	_addListenerOnDrawing(scene) {
+		const transformer = scene.getTransformerByCreate();
+		let startTransforms = null;
+		this.disposeWithMe((0, _univerjs_core.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 _univerjs_engine_render.Group) {
+					let group = object.ancestorGroup;
+					if (group == null && object instanceof _univerjs_engine_render.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(_univerjs_drawing.SetDrawingSelectedOperation.id, drawings);
+			else this._commandService.syncExecuteCommand(_univerjs_drawing.SetDrawingSelectedOperation.id, []);
+		})));
+		this.disposeWithMe((0, _univerjs_core.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, _univerjs_core.IUniverInstanceService),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(3, _univerjs_drawing.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 _univerjs_engine_render.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();
+		_univerjs_engine_render.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 _univerjs_engine_render.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 _univerjs_core.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 = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (!(imageShape instanceof _univerjs_engine_render.Image)) {
+				this._messageService.show({
+					type: _univerjs_design.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: (0, _univerjs_engine_render.precisionTo)(newLeft, 1),
+			top: (0, _univerjs_engine_render.precisionTo)(newTop, 1),
+			right: (0, _univerjs_engine_render.precisionTo)(width - (newLeft + newWidth), 1),
+			bottom: (0, _univerjs_engine_render.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 = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+				unitId,
+				subUnitId,
+				drawingId
+			});
+			const imageShape = scene.getObject(imageShapeKey);
+			if (imageShape == null) return;
+			if (!(imageShape instanceof _univerjs_engine_render.Image)) {
+				this._messageService.show({
+					type: _univerjs_design.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(_univerjs_drawing.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$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => workbook ? workbook.activeSheet$ : (0, rxjs.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 (!(0, _univerjs_core.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 = _univerjs_engine_render.CURSOR_TYPE.MOVE;
+		}));
+		this.disposeWithMe(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = _univerjs_engine_render.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 _univerjs_engine_render.Vector2(left + width / 2, top + height / 2);
+			const newCenterPoint = new _univerjs_engine_render.Vector2(applyWidth / 2 + applyLeft, applyHeight / 2 + applyTop);
+			const vertexPoint = new _univerjs_engine_render.Vector2(applyLeft, applyTop);
+			vertexPoint.rotateByPoint((0, _univerjs_engine_render.degToRad)(applyAngle), newCenterPoint);
+			const applyFinalPoint = vertexPoint.clone();
+			applyFinalPoint.rotateByPoint((0, _univerjs_engine_render.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, _univerjs_core.ICommandService),
+	__decorateParam(1, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(3, _univerjs_core.IUniverInstanceService),
+	__decorateParam(4, _univerjs_ui.IMessageService),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.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 _univerjs_core.Disposable {
+	constructor() {
+		super();
+		_defineProperty(this, "_clipDelegate", null);
+		_defineProperty(this, "_canUseShapeClip$", new rxjs.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 (0, _univerjs_core.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 !== _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE) return;
+		if (!this._drawingManagerService.getDrawingVisible()) return;
+		if (this._univerInstanceService.getUnitType(unitId) === _univerjs_core.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 = (0, _univerjs_drawing.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 === _univerjs_drawing.ImageSourceType.UUID) try {
+				imageConfig.url = await this._imageIoService.getImage(source);
+			} catch (error) {
+				console.error(error);
+				continue;
+			}
+			else if (imageSourceType === _univerjs_drawing.ImageSourceType.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 _univerjs_engine_render.Image(imageShapeKey, imageConfig);
+			image.setClipService(this._drawingImageClipService);
+			if (shouldBeCache) this._imageIoService.addImageSourceCache(source, imageSourceType, image.getNative());
+			scene.addObject(image, _univerjs_engine_render.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(_univerjs_core.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 !== _univerjs_core.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 = (0, _univerjs_drawing.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 _univerjs_engine_render.Rect(imageShapeKey, rectConfig);
+			if (!this._drawingManagerService.getDrawingVisible()) continue;
+			scene.addObject(rect, _univerjs_engine_render.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 _univerjs_core.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, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(1, _univerjs_drawing.IImageIoService),
+	__decorateParam(2, _univerjs_ui.IGalleryService),
+	__decorateParam(3, _univerjs_core.IURLImageService),
+	__decorateParam(4, _univerjs_core.IUniverInstanceService),
+	__decorateParam(5, (0, _univerjs_core.Inject)(DrawingImageClipService))
+], DrawingRenderService);
+
+//#endregion
+//#region src/controllers/image-update.controller.ts
+let ImageUpdateController = class ImageUpdateController extends _univerjs_core.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 = (0, _univerjs_drawing.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 !== _univerjs_core.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(_univerjs_drawing.SetDrawingSelectedOperation.id, params);
+	}
+	_drawingAddListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.pipe((0, rxjs.bufferTime)(33), (0, rxjs.filter)((batches) => batches.length > 0), (0, rxjs.map)((batches) => batches.flat()), (0, rxjs.map)((items) => {
+			const map = /* @__PURE__ */ new Map();
+			for (const it of items) map.set(`${it.unitId}|${it.subUnitId}|${it.drawingId}`, it);
+			return [...map.values()];
+		}), (0, rxjs.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 !== _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE) return;
+				const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+				if (renderObject == null) return;
+				const { scene, transformer } = renderObject;
+				if (transform == null) return true;
+				const drawingShapeKey = (0, _univerjs_drawing.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 === _univerjs_core.ImageSourceType.BASE64 || imageSourceType === _univerjs_core.ImageSourceType.URL)) imageShape.changeSource(source);
+			});
+		}));
+	}
+	_addHoverForImage(o) {
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(o.onPointerEnter$.subscribeEvent(() => {
+			o.cursor = _univerjs_engine_render.CURSOR_TYPE.GRAB;
+		})));
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(o.onPointerLeave$.subscribeEvent(() => {
+			o.cursor = _univerjs_engine_render.CURSOR_TYPE.DEFAULT;
+		})));
+	}
+	_addDialogForImage(o) {
+		this.disposeWithMe((0, _univerjs_core.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, _univerjs_core.ICommandService),
+	__decorateParam(1, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, _univerjs_ui.IDialogService),
+	__decorateParam(4, _univerjs_drawing.IImageIoService),
+	__decorateParam(5, _univerjs_core.IUniverInstanceService),
+	__decorateParam(6, (0, _univerjs_core.Inject)(DrawingRenderService))
+], ImageUpdateController);
+
+//#endregion
+//#region src/plugin.ts
+let UniverDrawingUIPlugin = class UniverDrawingUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { menu, ...rest } = (0, _univerjs_core.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, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(2, _univerjs_core.IConfigService)], UniverDrawingUIPlugin);
+
+//#endregion
+//#region src/views/panel/DrawingAlign.tsx
+const DrawingAlign = (props) => {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const { drawings, alignShow } = props;
+	const [alignValue, setAlignValue] = (0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-relative univer-w-full", { "univer-hidden": !alignShow }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.align.title") })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-w-full univer-text-gray-900 dark:!univer-text-white",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					value: alignValue,
+					options: alignOptions,
+					onChange: handleAlignChange
+				})
+			})
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingArrange.tsx
+const DrawingArrange = (props) => {
+	const { arrangeShow, drawings: focusDrawings } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
+	const MoveUpIcon = componentManager.get("MoveUpIcon");
+	const MoveDownIcon = componentManager.get("MoveDownIcon");
+	const TopmostIcon = componentManager.get("TopmostIcon");
+	const BottomIcon = componentManager.get("BottomIcon");
+	const [drawings, setDrawings] = (0, react.useState)(focusDrawings);
+	(0, react.useEffect)(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
+		};
+	}, []);
+	const onArrangeBtnClick = (arrangeType) => {
+		commandService.syncExecuteCommand(SetDrawingArrangeOperation.id, {
+			arrangeType,
+			drawings
+		});
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !arrangeShow }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.arrange.title") })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-grid univer-grid-cols-2 univer-gap-2",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: () => {
+						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.forward);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: () => {
+						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.backward);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: () => {
+						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.front);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: () => {
+						onArrangeBtnClick(_univerjs_core.ArrangeTypeEnum.back);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BottomIcon, {}), localeService.t("image-panel.arrange.back")]
+				})
+			]
+		})]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingGroup.tsx
+const DrawingGroup = (props) => {
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
+	const { hasGroup, drawings } = props;
+	const GroupIcon = componentManager.get("GroupIcon");
+	const UngroupIcon = componentManager.get("UngroupIcon");
+	const [groupShow, setGroupShow] = (0, react.useState)(false);
+	const [groupBtnShow, setGroupBtnShow] = (0, react.useState)(true);
+	const [ungroupBtnShow, setUngroupBtnShow] = (0, react.useState)(true);
+	const onGroupBtnClick = () => {
+		commandService.syncExecuteCommand(SetDrawingGroupOperation.id, { drawings });
+	};
+	const onUngroupBtnClick = () => {
+		commandService.syncExecuteCommand(CancelDrawingGroupOperation.id, { drawings });
+	};
+	(0, react.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) === _univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": hasGroup === true && groupShow === false || hasGroup === false }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+			className: "univer-text-gray-600 dark:!univer-text-gray-200",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.group.title") })
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+				className: (0, _univerjs_design.clsx)({ "univer-hidden": !groupBtnShow }),
+				onClick: onGroupBtnClick,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupIcon, {}), localeService.t("image-panel.group.group")]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+				className: (0, _univerjs_design.clsx)({ "univer-hidden": !ungroupBtnShow }),
+				onClick: onUngroupBtnClick,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.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] = (0, react.useState)(originWidth);
+	const [height, setHeight] = (0, react.useState)(originHeight);
+	const [xPosition, setXPosition] = (0, react.useState)(originX);
+	const [yPosition, setYPosition] = (0, react.useState)(originY);
+	const [rotation, setRotation] = (0, react.useState)(originRotation);
+	const [lockRatio, setLockRatio] = (0, react.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);
+	};
+	(0, react.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 = (0, _univerjs_core.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 = (0, _univerjs_core.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 = (0, _univerjs_core.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 = (0, _univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !transformShow }),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.transform.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						precision: 1,
+						value: width,
+						min: 20,
+						onChange: (val) => {
+							handleWidthChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						precision: 1,
+						value: height,
+						min: 20,
+						onChange: (val) => {
+							handleHeightChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.lock") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-text-center",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+							checked: lockRatio,
+							onChange: handleLockRatioChange
+						})
+					})] })
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						precision: 1,
+						value: xPosition,
+						onChange: (val) => {
+							handleXChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						precision: 1,
+						value: yPosition,
+						onChange: (val) => {
+							handleYChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const clipService = (0, _univerjs_ui.useDependency)(DrawingImageClipService);
+	const componentManager = (0, _univerjs_ui.useDependency)(_univerjs_ui.ComponentManager);
+	const canUseShapeClip = (0, _univerjs_ui.useObservable)(clipService.canUseShapeClip$, false);
+	const { drawings, cropperShow } = props;
+	if (drawings[0] == null) return;
+	const [cropValue, setCropValue] = (0, react.useState)(CropType.FREE);
+	const cropStateRef = (0, react.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
+		}
+	];
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", { "univer-hidden": !cropperShow }),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.crop.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-items-center univer-justify-center univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+					onClick: () => {
+						onCropperBtnClick(cropValue);
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CreateCopyIcon, {}), localeService.t("image-panel.crop.start")]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					value: cropValue,
+					options: cropOptions,
+					onChange: handleCropChange
+				})]
+			}),
+			canUseShapeClip && (() => {
+				const ShapeClipPicker = componentManager.get("sheet.image-clip.shape.picker.component");
+				return ShapeClipPicker ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShapeClipPicker, {}) : null;
+			})()
+		]
+	});
+};
+
+//#endregion
+//#region src/views/panel/DrawingCommonPanel.tsx
+const DrawingCommonPanel = (props) => {
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.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] = (0, react.useState)(true);
+	const [transformShow, setTransformShow] = (0, react.useState)(true);
+	const [alignShow, setAlignShow] = (0, react.useState)(false);
+	const [cropperShow, setCropperShow] = (0, react.useState)(true);
+	const [nullShow, setNullShow] = (0, react.useState)(false);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-h-full", { "univer-hidden": !nullShow }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-flex univer-h-full univer-items-center univer-justify-center",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.null") })
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawingArrange, {
+			arrangeShow: hasArrange === true ? arrangeShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawingTransform, {
+			transformShow: hasTransform === true ? transformShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawingAlign, {
+			alignShow: hasAlign === true ? alignShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageCropper, {
+			cropperShow: hasCropper === true ? cropperShow : false,
+			drawings
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawingGroup, {
+			hasGroup,
+			drawings
+		})
+	] });
+};
+
+//#endregion
+exports.AutoImageCropOperation = AutoImageCropOperation;
+exports.COMPONENT_IMAGE_POPUP_MENU = COMPONENT_IMAGE_POPUP_MENU;
+exports.CancelDrawingGroupOperation = CancelDrawingGroupOperation;
+exports.CloseImageCropOperation = CloseImageCropOperation;
+exports.DRAWING_GROUP_TYPES = DRAWING_GROUP_TYPES;
+exports.DrawingCommonPanel = DrawingCommonPanel;
+exports.DrawingImageClipService = DrawingImageClipService;
+Object.defineProperty(exports, 'DrawingRenderService', {
+  enumerable: true,
+  get: function () {
+    return DrawingRenderService;
+  }
+});
+exports.IMAGE_CLIP_SHAPE_PICKER_COMPONENT = IMAGE_CLIP_SHAPE_PICKER_COMPONENT;
+exports.ImageCropperObject = ImageCropperObject;
+exports.ImagePopupMenu = ImagePopupMenu;
+exports.ImageResetSizeOperation = ImageResetSizeOperation;
+exports.OpenImageCropOperation = OpenImageCropOperation;
+exports.SetDrawingAlignOperation = SetDrawingAlignOperation;
+exports.SetDrawingArrangeOperation = SetDrawingArrangeOperation;
+exports.SetDrawingGroupOperation = SetDrawingGroupOperation;
+Object.defineProperty(exports, 'UniverDrawingUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverDrawingUIPlugin;
+  }
+});
+exports.getCurrentUnitInfo = getCurrentUnitInfo;
+exports.getUpdateParams = getUpdateParams;
+exports.insertGroupObject = insertGroupObject;