@univerjs/docs-drawing-ui 0.20.1 → 0.21.0

package/lib/cjs/index.js

@@ -1 +1,3506 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/docs-drawing`),n=require(`@univerjs/docs`),r=require(`@univerjs/docs-ui`),i=require(`@univerjs/engine-render`),a=require(`@univerjs/design`),o=require(`@univerjs/drawing`),s=require(`@univerjs/ui`),c=require(`rxjs`),l=require(`@univerjs/drawing-ui`),u=require(`react`),d=require(`react/jsx-runtime`);const f={id:`doc.command.remove-doc-image`,type:e.CommandType.COMMAND,handler:(t,a)=>{var o,s,c;let l=t.get(e.ICommandService),u=t.get(e.IUniverInstanceService),d=t.get(i.IRenderManagerService),f=u.getCurrentUniverDocInstance();if(a==null||f==null)return!1;let p=d.getRenderById(a.unitId).with(r.DocSelectionRenderService),{drawings:m}=a,h=(o=p.getSegment())==null?``:o,g=new e.TextX,_=e.JSONX.getInstance(),v=(s=(c=f.getSelfOrHeaderFooterModel(h).getBody())==null?void 0:c.customBlocks)==null?[]:s,y=m.map(e=>v.find(t=>t.blockId===e.drawingId)).filter(e=>!!e).sort((e,t)=>e.startIndex>t.startIndex?1:-1),b=m[0].unitId,x=new e.MemoryCursor;x.reset();let S=y[0].startIndex,C=[{startOffset:S,endOffset:S}],w={id:n.RichTextEditingMutation.id,params:{unitId:b,actions:[],textRanges:C}},T=[];for(let t of y){let{startIndex:n}=t;n>x.cursor&&g.push({t:e.TextXActionType.RETAIN,len:n-x.cursor}),g.push({t:e.TextXActionType.DELETE,len:1}),x.moveCursorTo(n+1)}let E=(0,r.getRichTextEditPath)(f,h);T.push(_.editOp(g.serialize(),E));for(let e of y){var D;let{blockId:t}=e,n=((D=f.getDrawings())==null?{}:D)[t],r=f.getDrawingsOrder().indexOf(t),i=_.removeOp([`drawings`,t],n),a=_.removeOp([`drawingsOrder`,r],t);T.push(i),T.push(a)}return w.params.actions=T.reduce((t,n)=>e.JSONX.compose(t,n),null),!!l.syncExecuteCommand(w.id,w.params)}},p={id:`doc.command.delete-drawing`,type:e.CommandType.COMMAND,handler:n=>{let r=n.get(e.ICommandService),i=n.get(t.IDocDrawingService).getFocusDrawings();if(i.length===0)return!1;let{unitId:a}=i[0],o=i.map(e=>{let{unitId:t,subUnitId:n,drawingId:r,drawingType:i}=e;return{unitId:t,subUnitId:n,drawingId:r,drawingType:i}});return r.executeCommand(f.id,{unitId:a,drawings:o})}},m={id:`doc.command.group-doc-image`,type:e.CommandType.COMMAND,handler:(e,t)=>!1},h={id:`doc.command.insert-doc-image`,type:e.CommandType.COMMAND,handler:(t,i)=>{var a,o;if(i==null)return!1;let s=t.get(e.ICommandService),c=t.get(n.DocSelectionManagerService),l=t.get(e.IUniverInstanceService),u=c.getActiveTextRange(),d=l.getCurrentUniverDocInstance();if(u==null||d==null)return!1;let f=d.getUnitId(),{drawings:p}=i,{collapsed:m,startOffset:h,segmentId:g}=u,_=d.getSelfOrHeaderFooterModel(g).getBody();if(_==null)return!1;let v=new e.TextX,y=e.JSONX.getInstance(),b=[],x=(a=(o=d.getSnapshot().drawingsOrder)==null?void 0:o.length)==null?0:a,S=0;if(m)h>0&&v.push({t:e.TextXActionType.RETAIN,len:h});else{var C,w;let t=e.BuildTextUtils.selection.delete([u],_,0,null,!1);v.push(...t);let n=(0,r.getCustomBlockIdsInSelections)(_,[u]),i=(C=d.getDrawings())==null?{}:C,a=(w=d.getDrawingsOrder())==null?[]:w,o=n.sort((e,t)=>a.indexOf(e)>a.indexOf(t)?-1:a.indexOf(e)<a.indexOf(t)?1:0);if(o.length>0)for(let e of o){let t=i[e],n=a.indexOf(e);if(t==null||n<0)continue;let r=y.removeOp([`drawings`,e],t),o=y.removeOp([`drawingsOrder`,n],e);b.push(r),b.push(o),S++}}v.push({t:e.TextXActionType.INSERT,body:{dataStream:`\b`.repeat(p.length),customBlocks:p.map((e,t)=>({startIndex:t,blockId:e.drawingId}))},len:p.length});let T=(0,r.getRichTextEditPath)(d,g),E=y.editOp(v.serialize(),T);b.push(E);for(let e of p){let{drawingId:t}=e,n=y.insertOp([`drawings`,t],e),r=y.insertOp([`drawingsOrder`,x-S],t);b.push(n),b.push(r)}let D={id:n.RichTextEditingMutation.id,params:{unitId:f,actions:[],textRanges:[]}};return D.params.actions=b.reduce((t,n)=>e.JSONX.compose(t,n),null),!!s.syncExecuteCommand(D.id,D.params)}},g={id:`doc.command.set-drawing-arrange`,type:e.CommandType.COMMAND,handler:(r,i)=>{let a=r.get(e.ICommandService),o=r.get(t.IDocDrawingService);if(i==null)return!1;let{unitId:s,subUnitId:c,drawingIds:l,arrangeType:u}=i,d={unitId:s,subUnitId:c,drawingIds:l},f;if(u===e.ArrangeTypeEnum.forward?f=o.getForwardDrawingsOp(d):u===e.ArrangeTypeEnum.backward?f=o.getBackwardDrawingOp(d):u===e.ArrangeTypeEnum.front?f=o.getFrontDrawingsOp(d):u===e.ArrangeTypeEnum.back&&(f=o.getBackDrawingsOp(d)),f==null)return!1;let{redo:p}=f;if(p==null)return!1;let m=[],h=e.Tools.deepClone(p);h=h.slice(3),h.unshift(`drawingsOrder`),m.push(h);let g={id:n.RichTextEditingMutation.id,params:{unitId:s,actions:[],textRanges:null}};return g.params.actions=m.reduce((t,n)=>e.JSONX.compose(t,n),null),!!a.syncExecuteCommand(g.id,g.params)}},_={id:`doc.command.ungroup-doc-image`,type:e.CommandType.COMMAND,handler:(e,n)=>{let r=e.get(t.IDocDrawingService);if(!n)return!1;let i=[];n.forEach(({parent:e,children:t})=>{i.push(e.unitId),t.forEach(e=>{i.push(e.unitId)})});let{unitId:a,subUnitId:o,undo:s,redo:c,objects:l}=r.getUngroupDrawingOp(n);return!1}};function v(e){"@babel/helpers - typeof";return v=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},v(e)}function y(e,t){if(v(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(v(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function b(e){var t=y(e,`string`);return v(t)==`symbol`?t:t+``}function x(e,t,n){return(t=b(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var S=class{constructor(){x(this,`_refreshDrawings$`,new c.BehaviorSubject(null)),x(this,`refreshDrawings$`,this._refreshDrawings$.asObservable())}refreshDrawings(e){this._refreshDrawings$.next(e)}};function C(e,t){return function(n,r){t(n,r,e)}}function w(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 T=class extends e.Disposable{constructor(e,t,n,r,i,a,o,s,c,l,u,d,f){super(),this._context=e,this._commandService=t,this._docSelectionManagerService=n,this._renderManagerSrv=r,this._imageIoService=i,this._docDrawingService=a,this._drawingManagerService=o,this._contextService=s,this._messageService=c,this._localeService=l,this._docSelectionRenderService=u,this._docRefreshDrawingsService=d,this._fileOpenerService=f,this._updateOrderListener(),this._groupDrawingListener(),this._focusDrawingListener(),this._transformDrawingListener(),this._editAreaChangeListener()}dispose(){super.dispose(),delete this._context}async insertDocImage(){let e=await this._fileOpenerService.openFile({multiple:!0,accept:o.DRAWING_IMAGE_ALLOW_IMAGE_LIST.map(e=>`.${e.replace(`image/`,``)}`).join(`,`)}),t=e.length;return t>o.DRAWING_IMAGE_COUNT_LIMIT?(this._messageService.show({type:a.MessageType.Error,content:this._localeService.t(`update-status.exceedMaxCount`,String(o.DRAWING_IMAGE_COUNT_LIMIT))}),!1):t===0?!1:(await this._insertFloatImages(e),!0)}async _insertFloatImages(t){let n=[];try{n=await Promise.all(t.map(e=>this._imageIoService.saveImage(e)))}catch(e){let t=e.message,n=``;switch(t){case o.ImageUploadStatusType.ERROR_EXCEED_SIZE:n=this._localeService.t(`update-status.exceedMaxSize`,String(o.DRAWING_IMAGE_ALLOW_SIZE/(1024*1024)));break;case o.ImageUploadStatusType.ERROR_IMAGE_TYPE:n=this._localeService.t(`update-status.invalidImageType`);break;case o.ImageUploadStatusType.ERROR_IMAGE:n=this._localeService.t(`update-status.invalidImage`);break;default:break}this._messageService.show({type:a.MessageType.Error,content:n})}if(n.length===0)return;let{unitId:i}=this._context,s=[];for(let t of n){if(t==null)continue;let{imageId:n,imageSourceType:a,source:c,base64Cache:l}=t,{width:u,height:d,image:f}=await(0,o.getImageSize)(l||``);this._imageIoService.addImageSourceCache(n,a,f);let p=1;if(u>o.DRAWING_IMAGE_WIDTH_LIMIT||d>o.DRAWING_IMAGE_HEIGHT_LIMIT){let e=o.DRAWING_IMAGE_WIDTH_LIMIT/u,t=o.DRAWING_IMAGE_HEIGHT_LIMIT/d;p=Math.min(e,t)}let m=this._getImagePosition(u*p,d*p);if(m==null)return;let h={unitId:i,subUnitId:i,drawingId:n,drawingType:e.DrawingTypeEnum.DRAWING_IMAGE,imageSourceType:a,source:c,transform:(0,r.docDrawingPositionToTransform)(m),docTransform:m,behindDoc:e.BooleanNumber.FALSE,title:``,description:``,layoutType:e.PositionedObjectLayoutType.INLINE,wrapText:e.WrapTextType.BOTH_SIDES,distB:0,distL:0,distR:0,distT:0};this._isInsertInHeaderFooter()&&(h.isMultiTransform=e.BooleanNumber.TRUE,h.transforms=h.transform?[h.transform]:null),s.push(h)}this._commandService.executeCommand(h.id,{unitId:i,drawings:s})}_isInsertInHeaderFooter(){var e;let{unitId:t}=this._context,r=(e=this._renderManagerSrv.getRenderById(t))==null?void 0:e.with(n.DocSkeletonManagerService).getViewModel(),a=r==null?void 0:r.getEditArea();return a===i.DocumentEditArea.HEADER||a===i.DocumentEditArea.FOOTER}_getImagePosition(t,n){let r=this._docSelectionRenderService.getActiveTextRange(),i=(r==null?void 0:r.getAbsolutePosition())||{left:0,top:0};return{size:{width:t,height:n},positionH:{relativeFrom:e.ObjectRelativeFromH.PAGE,posOffset:i.left},positionV:{relativeFrom:e.ObjectRelativeFromV.PARAGRAPH,posOffset:0},angle:0}}_updateOrderListener(){this.disposeWithMe(this._drawingManagerService.featurePluginOrderUpdate$.subscribe(e=>{let{unitId:t,subUnitId:n,drawingIds:r,arrangeType:i}=e;this._commandService.executeCommand(g.id,{unitId:t,subUnitId:n,drawingIds:r,arrangeType:i})}))}_groupDrawingListener(){this.disposeWithMe(this._drawingManagerService.featurePluginGroupUpdate$.subscribe(e=>{this._commandService.executeCommand(m.id,e)})),this.disposeWithMe(this._drawingManagerService.featurePluginUngroupUpdate$.subscribe(e=>{this._commandService.executeCommand(_.id,e)}))}_getCurrentSceneAndTransformer(){let{scene:e,mainComponent:t}=this._context;if(e==null||t==null)return;let n=e.getTransformerByCreate(),{docsLeft:r,docsTop:i}=t.getOffsetConfig();return{scene:e,transformer:n,docsLeft:r,docsTop:i}}_transformDrawingListener(){let e=this._getCurrentSceneAndTransformer();if(e&&e.transformer)this.disposeWithMe(e.transformer.changeEnd$.pipe((0,c.debounceTime)(30)).subscribe(e=>{this._docSelectionManagerService.refreshSelection()}));else throw Error(`transformer is not init`)}_focusDrawingListener(){this.disposeWithMe(this._drawingManagerService.focus$.subscribe(t=>{var n;let{transformer:r,docsLeft:i,docsTop:a}=(n=this._getCurrentSceneAndTransformer())==null?{}:n;if(t==null||t.length===0)this._contextService.setContextValue(e.FOCUSING_COMMON_DRAWINGS,!1),this._docDrawingService.focusDrawing([]),r&&r.resetProps({zeroTop:0,zeroLeft:0});else{this._contextService.setContextValue(e.FOCUSING_COMMON_DRAWINGS,!0),this._docDrawingService.focusDrawing(t),this._setDrawingSelections(t);let n=this._docSelectionRenderService.getSegment(),o=this._findSegmentIdByDrawingId(t[0].drawingId);n!==o&&this._docSelectionRenderService.setSegment(o),r&&r.resetProps({zeroTop:a,zeroLeft:i})}}))}_findSegmentIdByDrawingId(e){var t;let{unit:n}=this._context,{body:r,headers:i={},footers:a={}}=n.getSnapshot();if(((t=r==null?void 0:r.customBlocks)==null?[]:t).some(t=>t.blockId===e))return``;for(let t of Object.keys(i)){var o;if((o=i[t].body.customBlocks)!=null&&o.some(t=>t.blockId===e))return t}for(let t of Object.keys(a)){var s;if((s=a[t].body.customBlocks)!=null&&s.some(t=>t.blockId===e))return t}return``}_updateDrawingsEditStatus(){var t;if(!this._context)return;let{unit:r,scene:a,unitId:s}=this._context,c=(t=this._renderManagerSrv.getRenderById(s))==null?void 0:t.with(n.DocSkeletonManagerService).getViewModel();if(c==null||r==null)return;let{drawings:l={}}=r.getSnapshot(),u=c.getEditArea()===i.DocumentEditArea.BODY;for(let t of Object.keys(l)){let n=l[t],r=(0,o.getDrawingShapeKeyByDrawingSearch)({unitId:s,drawingId:n.drawingId,subUnitId:s}),i=a.fuzzyMathObjects(r,!0);if(i.length)for(let t of i){a.detachTransformerFrom(t);try{t.setOpacity(.5)}catch{}if(u&&n.isMultiTransform!==e.BooleanNumber.TRUE||!u&&n.isMultiTransform===e.BooleanNumber.TRUE){n.allowTransform!==!1&&a.attachTransformerTo(t);try{t.setOpacity(1)}catch{}}}}}_editAreaChangeListener(){var e;let{unitId:t}=this._context,r=(e=this._renderManagerSrv.getRenderById(t))==null?void 0:e.with(n.DocSkeletonManagerService).getViewModel();r!=null&&(this._updateDrawingsEditStatus(),this.disposeWithMe(r.editAreaChange$.subscribe(()=>{this._updateDrawingsEditStatus()})),this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe(e=>{e!=null&&queueMicrotask(()=>{this._updateDrawingsEditStatus()})})),this.disposeWithMe(this._commandService.onCommandExecuted(async e=>{e.id===n.RichTextEditingMutation.id&&queueMicrotask(()=>{this._updateDrawingsEditStatus()})})))}_setDrawingSelections(e){var t,n;let{unit:r}=this._context,i=(t=(n=r.getSnapshot().body)==null?void 0:n.customBlocks)==null?[]:t,a=e.map(e=>{let t=e.drawingId,n=i.find(e=>e.blockId===t);return n?n.startIndex:null}).filter(e=>e!==null).map(e=>({startOffset:e,endOffset:e+1}));this._docSelectionManagerService.replaceDocRanges(a)}};T=w([C(1,e.ICommandService),C(2,(0,e.Inject)(n.DocSelectionManagerService)),C(3,i.IRenderManagerService),C(4,o.IImageIoService),C(5,t.IDocDrawingService),C(6,o.IDrawingManagerService),C(7,e.IContextService),C(8,s.IMessageService),C(9,(0,e.Inject)(e.LocaleService)),C(10,(0,e.Inject)(r.DocSelectionRenderService)),C(11,(0,e.Inject)(S)),C(12,s.ILocalFileService)],T);const E={id:`doc.command.insert-float-image`,type:e.CommandType.COMMAND,handler:t=>{var n,r;let a=t.get(e.IUniverInstanceService),o=t.get(i.IRenderManagerService);return(n=(r=(0,i.getCurrentTypeOfRenderer)(e.UniverInstanceType.UNIVER_DOC,a,o))==null?void 0:r.with(T).insertDocImage())==null?!1:n}};let D=function(e){return e.INLINE=`inline`,e.BEHIND_TEXT=`behindText`,e.IN_FRONT_OF_TEXT=`inFrontOfText`,e.WRAP_SQUARE=`wrapSquare`,e.WRAP_TOP_AND_BOTTOM=`wrapTopAndBottom`,e}({});const O={[D.INLINE]:e.PositionedObjectLayoutType.INLINE,[D.WRAP_SQUARE]:e.PositionedObjectLayoutType.WRAP_SQUARE,[D.WRAP_TOP_AND_BOTTOM]:e.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,[D.IN_FRONT_OF_TEXT]:e.PositionedObjectLayoutType.WRAP_NONE,[D.BEHIND_TEXT]:e.PositionedObjectLayoutType.WRAP_NONE};function k(t,n,i,a,o,s,c){var l;let u=new e.TextX,d=e.JSONX.getInstance(),f=[],p=s.getSelfOrHeaderFooterModel(n).getBody(),m=s.getSelfOrHeaderFooterModel(t).getBody();if(p==null||m==null)return;let h=(l=p.customBlocks)==null||(l=l.find(e=>e.blockId===o))==null?void 0:l.startIndex;if(h!=null){if(a=Math.min(m.dataStream.length-2,a),t===n){if(a<h?(a>0&&u.push({t:e.TextXActionType.RETAIN,len:a}),u.push({t:e.TextXActionType.INSERT,body:{dataStream:`\b`,customBlocks:[{startIndex:0,blockId:o}]},len:1}),u.push({t:e.TextXActionType.RETAIN,len:h-a}),u.push({t:e.TextXActionType.DELETE,len:1})):(h>0&&u.push({t:e.TextXActionType.RETAIN,len:h}),u.push({t:e.TextXActionType.DELETE,len:1}),a-h-1>0&&u.push({t:e.TextXActionType.RETAIN,len:a-h-1}),u.push({t:e.TextXActionType.INSERT,body:{dataStream:`\b`,customBlocks:[{startIndex:0,blockId:o}]},len:1})),a!==h){let e=(0,r.getRichTextEditPath)(s,n),t=d.editOp(u.serialize(),e);f.push(t)}}else{h>0&&u.push({t:e.TextXActionType.RETAIN,len:h}),u.push({t:e.TextXActionType.DELETE,len:1});let l=(0,r.getRichTextEditPath)(s,n),p=d.editOp(u.serialize(),l);f.push(p),u.empty(),a>0&&u.push({t:e.TextXActionType.RETAIN,len:a}),u.push({t:e.TextXActionType.INSERT,body:{dataStream:`\b`,customBlocks:[{startIndex:0,blockId:o}]},len:1}),l=(0,r.getRichTextEditPath)(s,t),p=d.editOp(u.serialize(),l),f.push(p),c.setSegment(t),c.setSegmentPage(i)}return f}}const A={id:`doc.command.update-doc-drawing-wrapping-style`,type:e.CommandType.COMMAND,handler:(t,r)=>{if(r==null)return!1;let{drawings:a,wrappingStyle:o,unitId:s}=r,c=t.get(e.ICommandService),l=t.get(e.IUniverInstanceService),u=t.get(i.IRenderManagerService).getRenderById(s),d=u==null?void 0:u.with(n.DocSkeletonManagerService).getSkeleton().getSkeletonData(),f=u==null?void 0:u.with(n.DocSkeletonManagerService).getViewModel(),p=u==null?void 0:u.scene,m=l.getCurrentUniverDocInstance();if(m==null||d==null||p==null||f==null)return!1;let h=f.getEditArea(),g=p.getTransformerByCreate(),{pages:_,skeHeaders:v,skeFooters:y}=d,b=e.JSONX.getInstance(),x=[],{drawings:S={}}=m.getSnapshot();for(let t of a){let{drawingId:n}=t,r=S[n].layoutType,a=O[o];if(r!==a){let e=b.replaceOp([`drawings`,n,`layoutType`],r,a);x.push(e)}if(o===D.BEHIND_TEXT||o===D.IN_FRONT_OF_TEXT){let t=S[n].behindDoc,r=o===D.BEHIND_TEXT?e.BooleanNumber.TRUE:e.BooleanNumber.FALSE;if(t!==r){let e=b.replaceOp([`drawings`,n,`behindDoc`],t,r);x.push(e)}}if(o===D.INLINE)continue;let s=null,c=0,l=0;for(let e of _){let{headerId:t,footerId:r,marginTop:a,marginLeft:o,marginBottom:u,pageWidth:d,pageHeight:f}=e;switch(h){case i.DocumentEditArea.HEADER:{var C;let e=(C=v.get(t))==null?void 0:C.get(d);e!=null&&e.skeDrawings.has(n)&&(s=e.skeDrawings.get(n),c=e.marginTop,l=o);break}case i.DocumentEditArea.FOOTER:{var w;let e=(w=y.get(r))==null?void 0:w.get(d);e!=null&&e.skeDrawings.has(n)&&(s=e.skeDrawings.get(n),c=f-u+e.marginTop,l=o);break}case i.DocumentEditArea.BODY:e.skeDrawings.has(n)&&(s=e.skeDrawings.get(n),c=a,l=o);break}if(s!=null)break}if(s!=null){let{aTop:t,aLeft:r}=s,i=S[n].docTransform.positionH,a=r;i.relativeFrom===e.ObjectRelativeFromH.MARGIN?a-=l:i.relativeFrom===e.ObjectRelativeFromH.COLUMN&&(a-=s.columnLeft);let o={relativeFrom:i.relativeFrom,posOffset:a};if(i.posOffset!==o.posOffset){let e=b.replaceOp([`drawings`,n,`docTransform`,`positionH`],i,o);x.push(e)}let u=S[n].docTransform.positionV,d=t;u.relativeFrom===e.ObjectRelativeFromV.PAGE?d+=c:u.relativeFrom===e.ObjectRelativeFromV.LINE?d-=s.lineTop:u.relativeFrom===e.ObjectRelativeFromV.PARAGRAPH&&(d-=s.blockAnchorTop);let f={relativeFrom:u.relativeFrom,posOffset:d};if(u.posOffset!==f.posOffset){let e=b.replaceOp([`drawings`,n,`docTransform`,`positionV`],u,f);x.push(e)}}}let T={id:n.RichTextEditingMutation.id,params:{unitId:s,actions:[],textRanges:null}};T.params.actions=x.reduce((t,n)=>e.JSONX.compose(t,n),null);let E=c.syncExecuteCommand(T.id,T.params);return g.refreshControls(),!!E}},j={id:`doc.command.update-doc-drawing-distance`,type:e.CommandType.COMMAND,handler:(t,r)=>{if(r==null)return!1;let i=t.get(e.ICommandService),a=t.get(e.IUniverInstanceService).getCurrentUniverDocInstance();if(a==null)return!1;let{drawings:o,dist:s,unitId:c}=r,l=e.JSONX.getInstance(),u=[],{drawings:d={}}=a.getSnapshot();for(let e of o){let{drawingId:t}=e;for(let[e,n]of Object.entries(s)){let r=d[t][e];if(r!==n){let i=l.replaceOp([`drawings`,t,e],r,n);u.push(i)}}}let f={id:n.RichTextEditingMutation.id,params:{unitId:c,actions:[],textRanges:null}};return f.params.actions=u.reduce((t,n)=>e.JSONX.compose(t,n),null),!!i.syncExecuteCommand(f.id,f.params)}},M={id:`doc.command.update-doc-drawing-wrap-text`,type:e.CommandType.COMMAND,handler:(t,r)=>{if(r==null)return!1;let i=t.get(e.ICommandService),a=t.get(e.IUniverInstanceService).getCurrentUniverDocInstance();if(a==null)return!1;let{drawings:o,wrapText:s,unitId:c}=r,l=e.JSONX.getInstance(),u=[],{drawings:d={}}=a.getSnapshot();for(let e of o){let{drawingId:t}=e,n=d[t].wrapText;if(n!==s){let e=l.replaceOp([`drawings`,t,`wrapText`],n,s);u.push(e)}}let f={id:n.RichTextEditingMutation.id,params:{unitId:c,actions:[],textRanges:null}};return f.params.actions=u.reduce((t,n)=>e.JSONX.compose(t,n),null),!!i.syncExecuteCommand(f.id,f.params)}},N={id:`doc.command.update-drawing-doc-transform`,type:e.CommandType.COMMAND,handler:(t,r)=>{if(r==null)return!1;let a=t.get(e.ICommandService),o=t.get(e.IUniverInstanceService),s=t.get(i.IRenderManagerService).getRenderById(r.unitId),c=s==null?void 0:s.scene;if(c==null)return!1;let l=c.getTransformerByCreate(),u=o.getCurrentUniverDocInstance();if(u==null)return!1;let{drawings:d,unitId:f}=r,p=e.JSONX.getInstance(),m=[],{drawings:h={}}=u.getSnapshot();for(let t of d){let{drawingId:n,key:r,value:i}=t,a=h[n].docTransform[r];if(!e.Tools.diffValue(a,i)){let e=p.replaceOp([`drawings`,n,`docTransform`,r],a,i);m.push(e)}}let g={id:n.RichTextEditingMutation.id,params:{unitId:f,actions:[],textRanges:null,debounce:!0}};g.params.actions=m.reduce((t,n)=>e.JSONX.compose(t,n),null);let _=a.syncExecuteCommand(g.id,g.params);return l.refreshControls(),!!_}},P={id:`doc.command.move-inline-drawing`,type:e.CommandType.COMMAND,handler:(t,a)=>{var o,s;if(a==null)return!1;let c=t.get(i.IRenderManagerService),l=(o=c.getRenderById(a.unitId))==null?void 0:o.with(r.DocSelectionRenderService),u=t.get(S),d=c.getRenderById(a.unitId),f=d==null?void 0:d.scene,p=d==null?void 0:d.with(n.DocSkeletonManagerService).getSkeleton();if(f==null||l==null)return!1;let m=f.getTransformerByCreate(),h=t.get(e.ICommandService),g=t.get(e.IUniverInstanceService).getCurrentUniverDocInstance();if(g==null)return!1;let{drawing:_,unitId:v,offset:y,segmentId:b,segmentPage:x,needRefreshDrawings:C}=a;if(C)return u.refreshDrawings(p),m.refreshControls(),!0;let w=[],{drawingId:T}=_,E=k(b,(s=l.getSegment())==null?``:s,x,y,T,g,l);if(E==null||E.length===0)return u.refreshDrawings(p),m.refreshControls(),!1;w.push(...E);let D={id:n.RichTextEditingMutation.id,params:{unitId:v,actions:[],textRanges:null}};D.params.actions=w.reduce((t,n)=>e.JSONX.compose(t,n),null);let O=h.syncExecuteCommand(D.id,D.params);return m.refreshControls(),!!O}},F={id:`doc.command.transform-non-inline-drawing`,type:e.CommandType.COMMAND,handler:(t,a)=>{var o,s;if(a==null)return!1;let c=t.get(i.IRenderManagerService),l=(o=c.getRenderById(a.unitId))==null?void 0:o.with(r.DocSelectionRenderService),u=c.getRenderById(a.unitId),d=u==null?void 0:u.scene;if(d==null||l==null)return!1;let f=d.getTransformerByCreate(),p=t.get(e.ICommandService),m=t.get(e.IUniverInstanceService).getCurrentUniverDocInstance();if(m==null)return!1;let{drawing:h,unitId:g,offset:_,docTransform:v,segmentId:y,segmentPage:b}=a,x=[],{drawingId:S}=h,C=k(y,(s=l.getSegment())==null?``:s,b,_,S,m,l);if(C==null)return!1;C.length>0&&x.push(...C);let w=e.JSONX.getInstance(),{drawings:T={}}=m.getSnapshot(),{positionH:E,positionV:D,size:O,angle:A}=T[S].docTransform;if(!e.Tools.diffValue(E,v.positionH)){let e=w.replaceOp([`drawings`,S,`docTransform`,`positionH`],E,v.positionH);x.push(e)}if(!e.Tools.diffValue(D,v.positionV)){let e=w.replaceOp([`drawings`,S,`docTransform`,`positionV`],D,v.positionV);x.push(e)}if(!e.Tools.diffValue(O,v.size)){let e=w.replaceOp([`drawings`,S,`docTransform`,`size`],O,v.size);x.push(e)}if(!e.Tools.diffValue(A,v.angle)){let e=w.replaceOp([`drawings`,S,`docTransform`,`angle`],A,v.angle);x.push(e)}let j={id:n.RichTextEditingMutation.id,params:{unitId:g,actions:[],textRanges:null,debounce:!0}};j.params.actions=x.reduce((t,n)=>e.JSONX.compose(t,n),null);let M=p.syncExecuteCommand(j.id,j.params);return f.refreshControls(),!!M}},I={id:`doc.command.move-drawing`,type:e.CommandType.COMMAND,handler:(n,r)=>{let a=n.get(e.ICommandService),o=n.get(t.IDocDrawingService),s=n.get(e.IUniverInstanceService),c=n.get(i.IRenderManagerService),{direction:l}=r,u=o.getFocusDrawings();if(u.length===0)return!1;let d=u[0].unitId,f=c.getRenderById(d),p=f==null?void 0:f.scene;if(p==null)return!1;let m=p.getTransformerByCreate(),h=s.getUniverDocInstance(d),g=u.map(t=>{var n;let{drawingId:r}=t,i=h==null||(n=h.getSnapshot().drawings)==null?void 0:n[r];if(i==null||i.layoutType===e.PositionedObjectLayoutType.INLINE)return null;let{positionH:a,positionV:o}=i.docTransform,s={...a},c={...o};if(l===e.Direction.UP){var u;c.posOffset=((u=c.posOffset)==null?0:u)-2}else if(l===e.Direction.DOWN){var d;c.posOffset=((d=c.posOffset)==null?0:d)+2}else if(l===e.Direction.LEFT){var f;s.posOffset=((f=s.posOffset)==null?0:f)-2}else if(l===e.Direction.RIGHT){var p;s.posOffset=((p=s.posOffset)==null?0:p)+2}return{drawingId:r,key:l===e.Direction.UP||l===e.Direction.DOWN?`positionV`:`positionH`,value:l===e.Direction.UP||l===e.Direction.DOWN?c:s}}).filter(e=>e!=null);if(g.length===0)return!1;let _=a.syncExecuteCommand(N.id,{unitId:d,subUnitId:d,drawings:g});return m.refreshControls(),!!_}},L={id:`doc.operation.clear-drawing-transformer`,type:e.CommandType.MUTATION,handler:(e,t)=>{let n=e.get(i.IRenderManagerService);return t.forEach(e=>{var t;(t=n.getRenderById(e))==null||(t=t.scene.getTransformer())==null||t.debounceRefreshControls()}),!0}},R=`COMPONENT_DOC_DRAWING_PANEL`,z={id:`sidebar.operation.doc-image`,type:e.CommandType.COMMAND,handler:async(t,n)=>{let r=t.get(s.ISidebarService),i=t.get(e.LocaleService),a=t.get(o.IDrawingManagerService);switch(n.value){case`open`:r.open({header:{title:i.t(`docImage.panel.title`)},children:{label:R},onClose:()=>{a.focusDrawing(null)},width:360});break;default:r.close();break}return!0}},B={id:`doc.operation.edit-doc-image`,type:e.CommandType.OPERATION,handler:(t,n)=>{let r=t.get(o.IDrawingManagerService),i=t.get(e.ICommandService);return n==null?!1:(r.focusDrawing([n]),i.executeCommand(z.id,{value:`open`}),!0)}};function V(e,t,n=1,i=0){let{top:a,left:o,bottom:s,right:c}=e,l=c-o,u=s-a,{viewportScrollX:d,viewportScrollY:f}=t.getViewport(r.VIEWPORT_KEY.VIEW_MAIN),{scaleX:p,scaleY:m}=t.getAncestorScale();return{startX:(o-d)*p,startY:(a-f)*m,endX:(o+l-d)*p,endY:(a+u-f)*m,width:l*p,height:u*m,rotate:i,absolute:{left:!1,top:!1},opacity:n==null?1:n}}function H(e,t){let{top:n,left:r,width:i,height:a,angle:o,opacity:s}=e;return V({top:n,left:r,bottom:n+a,right:r+i},t.scene,s,o)}let U=class extends e.Disposable{constructor(e,t,n,r,i,a){super(),this._renderManagerService=e,this._drawingManagerService=t,this._drawingRenderService=n,this._canvasFloatDomService=r,this._univerInstanceService=i,this._commandService=a,x(this,`_domLayerInfoMap`,new Map),this._initialize()}dispose(){super.dispose()}_initialize(){this._drawingAddRemoveListener(),this._initScrollAndZoomEvent()}_getSceneAndTransformerByDrawingSearch(e){if(e==null)return;let t=this._renderManagerService.getRenderById(e);if(t==null)return null;let n=t.scene;return{scene:n,transformer:n.getTransformerByCreate(),renderUnit:t,canvas:t.engine.getCanvasElement()}}_drawingAddRemoveListener(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(e=>{this._insertRects(e)})),this.disposeWithMe(this._drawingManagerService.remove$.subscribe(e=>{e.forEach(e=>{this._removeDom(e.drawingId)})}))}_insertRects(t){t.forEach(async t=>{let{unitId:n}=t;if(!this._univerInstanceService.getUnit(n,e.UniverInstanceType.UNIVER_DOC))return;let r=this._getSceneAndTransformerByDrawingSearch(n);if(r==null)return;let i=this._drawingManagerService.getDrawingByParam(t);if(i==null)return;let a=await this._drawingRenderService.renderFloatDom(i,r.scene);if(!(a==null||a.length===0))for(let t of a){this._addHoverForRect(t);let a=new e.DisposableCollection,o=new c.BehaviorSubject(H(t,r.renderUnit)),s=r.canvas,l=i.data,u={dispose:a,rect:t,position$:o,unitId:n};this._canvasFloatDomService.addFloatDom({position$:o,id:i.drawingId,componentKey:i.componentKey,onPointerDown:e=>{s.dispatchEvent(new PointerEvent(e.type,e))},onPointerMove:e=>{s.dispatchEvent(new PointerEvent(e.type,e))},onPointerUp:e=>{s.dispatchEvent(new PointerEvent(e.type,e))},onWheel:e=>{s.dispatchEvent(new WheelEvent(e.type,e))},data:l,unitId:n});let d=t.onTransformChange$.subscribeEvent(()=>{let e=H(t,r.renderUnit);o.next(e)});a.add(()=>{this._canvasFloatDomService.removeFloatDom(i.drawingId)}),d&&a.add(d),this._domLayerInfoMap.set(i.drawingId,u)}})}_addHoverForRect(t){this.disposeWithMe((0,e.toDisposable)(t.onPointerEnter$.subscribeEvent(()=>{t.cursor=i.CURSOR_TYPE.GRAB}))),this.disposeWithMe((0,e.toDisposable)(t.onPointerLeave$.subscribeEvent(()=>{t.cursor=i.CURSOR_TYPE.DEFAULT})))}_removeDom(e){let t=this._domLayerInfoMap.get(e);if(!t)return;let{unitId:n}=t;this._domLayerInfoMap.delete(e),t.dispose.dispose();let r=this._getSceneAndTransformerByDrawingSearch(n);r&&r.scene.removeObject(t.rect)}_initScrollAndZoomEvent(){let t=e=>{let t=this._getSceneAndTransformerByDrawingSearch(e);t&&this._domLayerInfoMap.forEach(n=>{if(n.unitId!==e)return;let r=H(n.rect,t.renderUnit);n.position$.next(r)})};this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_DOC).pipe((0,c.map)(e=>{if(!e)return null;let t=e.getUnitId(),n=this._renderManagerService.getRenderById(t);return n?{render:n,unitId:t}:null}),(0,c.switchMap)(t=>t?(0,e.fromEventSubject)(t.render.scene.getViewport(r.VIEWPORT_KEY.VIEW_MAIN).onScrollAfter$).pipe((0,c.map)(()=>({unitId:t.unitId}))):(0,c.of)(null))).subscribe(e=>{if(!e)return;let{unitId:n}=e;t(n)})),this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id===r.SetDocZoomRatioOperation.id){let{unitId:n}=e.params;t(n)}}))}insertFloatDom(t,i){var a,o,s;let c=this._univerInstanceService.getCurrentUnitOfType(e.UniverInstanceType.UNIVER_DOC);if(!c)return!1;let l=this._getSceneAndTransformerByDrawingSearch(c.getUnitId());if(!l)return!1;let u=(a=l.renderUnit.with(n.DocSkeletonManagerService).getSkeleton().getSkeletonData())==null?void 0:a.pages[0];if(!u)return!1;let{pageWidth:d,marginLeft:f,marginRight:p}=u,m=d-f-p,g={size:{width:(o=i.width)==null?m:o,height:i.height},positionH:{relativeFrom:e.ObjectRelativeFromH.PAGE,posOffset:0},positionV:{relativeFrom:e.ObjectRelativeFromV.PAGE,posOffset:0},angle:0},_=(s=i.drawingId)==null?(0,e.generateRandomId)():s,v={unitId:c.getUnitId(),drawings:[{drawingId:_,drawingType:e.DrawingTypeEnum.DRAWING_DOM,subUnitId:c.getUnitId(),unitId:c.getUnitId(),...t,title:``,description:``,docTransform:g,layoutType:e.PositionedObjectLayoutType.INLINE,transform:(0,r.docDrawingPositionToTransform)(g)}]};return this._commandService.syncExecuteCommand(h.id,v),_}};U=w([C(0,i.IRenderManagerService),C(1,o.IDrawingManagerService),C(2,(0,e.Inject)(l.DrawingRenderService)),C(3,(0,e.Inject)(s.CanvasFloatDomService)),C(4,e.IUniverInstanceService),C(5,e.ICommandService)],U);const W=`doc.menu.image`,G=E.id,ee=t=>{let r=t.get(n.DocSelectionManagerService),i=t.get(e.IUniverInstanceService);return new c.Observable(e=>{let t=r.textSelection$.subscribe(()=>{let t=r.getActiveTextRange();if(t){var n;let{segmentId:r,startOffset:a,endOffset:o}=t,s=i.getCurrentUniverDocInstance(),c=s==null||(n=s.getSelfOrHeaderFooterModel(r).getBody())==null?void 0:n.tables;if(c&&c.length&&c.some(e=>{let{startIndex:t,endIndex:n}=e;return a>=t&&a<n||o>=t&&o<n})){e.next(!0);return}}else{e.next(!0);return}e.next(!1)});return()=>t.unsubscribe()})};function K(t){return{id:W,type:s.MenuItemType.SUBITEMS,icon:`AddImageIcon`,tooltip:`docImage.title`,disabled$:ee(t),hidden$:(0,s.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_DOC,void 0,e.DOCS_ZEN_EDITOR_UNIT_ID_KEY)}}function te(t){return{id:G,title:`docImage.upload.float`,type:s.MenuItemType.BUTTON,hidden$:(0,s.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_DOC,void 0,e.DOCS_ZEN_EDITOR_UNIT_ID_KEY)}}var ne=`@univerjs/docs-drawing-ui`,re=`0.20.1`;const q=`docs-drawing-ui.config`;Symbol(q);const J={};function Y(t){if(e.JSONX.isNoop(t)||!Array.isArray(t))return null;let n=t.find(e=>Array.isArray(e)&&(e==null?void 0:e[0])===`drawings`);if(n==null||!Array.isArray(n)||n.length<3||typeof n[1]==`string`&&typeof n[2]!=`object`||Array.isArray(n[1])&&typeof n[1][1]!=`object`)return null;let r=[];if(Array.isArray(n==null?void 0:n[1])){for(let e of n)if(Array.isArray(e)){var i,a;r.push({type:!(e==null||(i=e[1])==null)&&i.i?`add`:`remove`,drawingId:e==null?void 0:e[0],drawing:e==null||(a=e[1])==null?void 0:a.i})}}else{var o,s;r.push({type:(o=n[2])!=null&&o.i?`add`:`remove`,drawingId:n[1],drawing:(s=n[2])==null?void 0:s.i})}return r}function ie(e){if(!Array.isArray(e)||e.length<3||e[0]!==`drawingsOrder`)return[];let t=[];for(let n=1;n<e.length;n++){let r=e[n];if(Array.isArray(r)&&typeof r[0]==`number`&&typeof r[1]==`object`)t.push(r[0]);else{t.length=0;break}}return t}let X=class extends e.Disposable{constructor(e,t,n,r,i){super(),this._univerInstanceService=e,this._commandService=t,this._drawingManagerService=n,this._docDrawingService=r,this._renderManagerService=i,this._initialize()}_initialize(){this._commandExecutedListener()}_commandExecutedListener(){this.disposeWithMe(this._commandService.beforeCommandExecuted(e=>{if(e.id!==n.RichTextEditingMutation.id)return;let{unitId:t,actions:r}=e.params,i=Y(r);if(i!=null)for(let{type:e,drawingId:n,drawing:r}of i)e===`add`?this._addDrawings(t,[r]):this._removeDrawings(t,[n])})),this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id!==n.RichTextEditingMutation.id)return;let{unitId:t,actions:r}=e.params;ie(r).length>0&&this._updateDrawingsOrder(t)})),this.disposeWithMe(this._commandService.onCommandExecuted(t=>{var n;if(t.id!==e.UndoCommand.id&&t.id!==e.RedoCommand.id)return;let r=(n=this._univerInstanceService.getCurrentUniverDocInstance())==null?void 0:n.getUnitId(),i=this._drawingManagerService.getFocusDrawings();if(r==null||i.length===0)return;let a=this._renderManagerService.getRenderById(r),o=a==null?void 0:a.scene;if(o==null)return!1;o.getTransformerByCreate().refreshControls()}))}_addDrawings(e,t){let n=this._drawingManagerService,r=this._docDrawingService,{subUnitId:i,redo:a,objects:o}=this._docDrawingService.getBatchAddOp(t);n.applyJson1(e,i,a),r.applyJson1(e,i,a),n.addNotification(o),r.addNotification(o)}_removeDrawings(e,t){let n=this._drawingManagerService,r=this._docDrawingService,{subUnitId:i,redo:a,objects:o}=this._docDrawingService.getBatchRemoveOp(t.map(t=>({unitId:e,subUnitId:e,drawingId:t})));n.applyJson1(e,i,a),r.applyJson1(e,i,a),n.removeNotification(o),r.removeNotification(o)}_updateDrawingsOrder(e){let t=this._univerInstanceService.getUniverDocInstance(e);if(t==null)return;let n=t.getSnapshot().drawingsOrder;if(n==null)return;let r=this._drawingManagerService,i=this._docDrawingService;r.setDrawingOrder(e,e,n),i.setDrawingOrder(e,e,n);let a={unitId:e,subUnitId:e,drawingIds:n};r.orderNotification(a),i.orderNotification(a)}};X=w([C(0,e.IUniverInstanceService),C(1,e.ICommandService),C(2,o.IDrawingManagerService),C(3,t.IDocDrawingService),C(4,i.IRenderManagerService)],X);const ae=e=>{let{floatDomInfos:t,scene:n,offset:r,bound:i}=e,a=i.right-i.left,o=i.bottom-i.top;return(0,d.jsx)(`div`,{className:`univer-absolute univer-left-0 univer-top-0`,children:(0,u.useMemo)(()=>t.map(e=>{let{width:t=0,height:r=0,left:i=0,top:a=0}=e.transform,o=V({left:i,right:i+t,top:a,bottom:a+r},n),s={position$:new c.BehaviorSubject(o),position:o,id:e.drawingId,componentKey:e.componentKey,onPointerMove:()=>{},onPointerDown:()=>{},onPointerUp:()=>{},onWheel:()=>{},unitId:e.unitId,data:e.data};return[e.drawingId,s]}).filter(([e,t])=>!(t.position.endX<0||t.position.endY<0||t.position.startX>a||t.position.startY>o)),[t,n,r,a,o]).map(([e,t])=>(0,d.jsx)(s.PrintFloatDomSingle,{layer:t,id:e,position:t.position},e))})};let Z=class extends e.Disposable{constructor(e,t,n,r,i){super(),this._docPrintInterceptorService=e,this._drawingRenderService=t,this._drawingManagerService=n,this._componetManager=r,this._injector=i,this._initPrinting(),this._initPrintingDom()}_initPrinting(){this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT,{handler:(t,n,r)=>{let{unitId:i,scene:a}=n,o=this._drawingManagerService.getDrawingDataForUnit(i),s=o==null?void 0:o[i];return s&&s.order.forEach(t=>{let n=s.data[t];n.drawingType!==e.DrawingTypeEnum.DRAWING_CHART&&n.drawingType!==e.DrawingTypeEnum.DRAWING_DOM&&this._drawingRenderService.renderDrawing(n,a)}),r()}}))}_initPrintingDom(){this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT,{handler:(t,n,r)=>{let{unitId:i}=n,o=this._drawingManagerService.getDrawingDataForUnit(i),c=o==null?void 0:o[i];if(c){let o=c.order.map(t=>{let n=c.data[t];if(n.drawingType===e.DrawingTypeEnum.DRAWING_CHART)return{...n,componentKey:this._componetManager.get(e.DOC_DRAWING_PRINTING_COMPONENT_KEY)};if(n.drawingType===e.DrawingTypeEnum.DRAWING_DOM){let e=this._docPrintInterceptorService.getPrintComponent(n.componentKey);return{...n,componentKey:this._componetManager.get(e||n.componentKey)}}return null}).filter(Boolean);return(0,a.render)((0,d.jsx)((0,s.connectInjector)(ae,this._injector),{unitId:i,floatDomInfos:o,scene:n.scene,skeleton:n.skeleton,offset:n.offset,bound:n.bound}),n.root),t==null||t.add(()=>{(0,a.unmount)(n.root)}),r(t)}}}))}};Z=w([C(0,(0,e.Inject)(r.DocPrintInterceptorService)),C(1,(0,e.Inject)(l.DrawingRenderService)),C(2,o.IDrawingManagerService),C(3,(0,e.Inject)(s.ComponentManager)),C(4,(0,e.Inject)(e.Injector))],Z);function oe(e){let{path:t}=e;return t.some(e=>e===`cells`)}let se=class extends e.Disposable{constructor(e,t,n,r){super(),this._commandService=e,this._univerInstanceService=t,this._drawingManagerService=n,this._renderManagerService=r,x(this,`_liquid`,new i.Liquid),x(this,`_listenerOnImageMap`,new Set),x(this,`_transformerCache`,new Map),x(this,`_anchorShape`,void 0),this._init()}_init(){this._listenDrawingFocus()}_listenDrawingFocus(){this.disposeWithMe(this._drawingManagerService.add$.subscribe(e=>{if(e.length!==0)for(let t of e){let{unitId:e}=t;this._listenerOnImageMap.has(e)||(this._listenTransformerChange(e),this._listenerOnImageMap.add(e))}}))}_listenTransformerChange(t){var n;let r=(n=this._getSceneAndTransformerByDrawingSearch(t))==null?void 0:n.transformer;if(r==null)return;this.disposeWithMe((0,e.toDisposable)(r.changeStart$.subscribe(t=>{this._transformerCache.clear();let{objects:n}=t;for(let t of n.values()){var r;let{oKey:n,width:i,height:a,left:o,top:s,angle:c}=t,l=this._drawingManagerService.getDrawingOKey(n);if(l==null)continue;let u=this._univerInstanceService.getUniverDocInstance(l.unitId),d=u==null||(r=u.getSnapshot().drawings)==null?void 0:r[l.drawingId];if((d==null?void 0:d.layoutType)===e.PositionedObjectLayoutType.INLINE)try{t.setOpacity(.2)}catch{}d!=null&&this._transformerCache.set(l.drawingId,{drawing:d,top:s,left:o,width:i,height:a,angle:c})}})));let i=(0,e.throttle)(this._updateMultipleDrawingDocTransform.bind(this),50);(0,e.throttle)(this._nonInlineDrawingTransform.bind(this),50),this.disposeWithMe((0,e.toDisposable)(r.changing$.subscribe(t=>{let{objects:n,offsetX:r,offsetY:a}=t;if(n.size>1)i(n);else if(n.size===1){let t=this._transformerCache.values().next().value,{width:i,height:o,top:s,left:c,angle:l}=n.values().next().value;if(t&&i===t.width&&o===t.height&&s===t.top&&c===t.left&&l===t.angle)return;t&&(t.drawing.layoutType,e.PositionedObjectLayoutType.INLINE),t&&t.drawing.layoutType===e.PositionedObjectLayoutType.INLINE&&r!=null&&a!=null&&this._updateInlineDrawingAnchor(t.drawing,r,a)}}))),this.disposeWithMe((0,e.toDisposable)(r.changeEnd$.subscribe(t=>{let{objects:n,offsetX:r,offsetY:i}=t;for(let t of n.values()){let n=this._drawingManagerService.getDrawingOKey(t.oKey);if(n==null)continue;let r=this._transformerCache.get(n==null?void 0:n.drawingId);if((r==null?void 0:r.drawing.layoutType)===e.PositionedObjectLayoutType.INLINE)try{t.setOpacity(1)}catch{}}if(this._anchorShape&&this._anchorShape.hide(),n.size>1)this._updateMultipleDrawingDocTransform(n);else if(n.size===1){let t=this._transformerCache.values().next().value,a=n.values().next().value,{width:o,height:s,top:c,left:l,angle:u}=a;if(t&&o===t.width&&s===t.height&&c===t.top&&l===t.left&&u===t.angle)return;t&&t.drawing.layoutType===e.PositionedObjectLayoutType.INLINE?o!==t.width||s!==t.height||u!==t.angle?this._updateDrawingSize(t,a):r!=null&&i!=null&&this._moveInlineDrawing(t.drawing,r,i):t&&this._nonInlineDrawingTransform(t.drawing,a)}this._transformerCache.clear()})))}_updateMultipleDrawingDocTransform(e){if(e.size<1)return;let t=[],n,r;for(let i of e.values()){let{oKey:e,left:a,top:o,angle:s}=i,{width:c,height:l}=i,u=this._drawingManagerService.getDrawingOKey(e);if(u==null)continue;n==null&&(n=u.unitId),r==null&&(r=u.subUnitId);let d=this._transformerCache.get(u.drawingId);if(d==null)continue;let{drawing:f,top:p,left:m,width:h,height:g,angle:_}=d,{width:v,height:y}=this._getPageContentSize(f);if(c=Math.min(c,v),l=Math.min(l,y),(h!==c||g!==l)&&t.push({drawingId:u.drawingId,key:`size`,value:{width:c,height:l}}),_!==s&&t.push({drawingId:u.drawingId,key:`angle`,value:s}),p!==o||m!==a){let e=o-p,n=a-m;e!==0&&t.push({drawingId:u.drawingId,key:`positionV`,value:{relativeFrom:f.docTransform.positionV.relativeFrom,posOffset:f.docTransform.positionV.posOffset+e}}),n!==0&&t.push({drawingId:u.drawingId,key:`positionH`,value:{relativeFrom:f.docTransform.positionH.relativeFrom,posOffset:f.docTransform.positionH.posOffset+n}})}}t.length>0&&n&&r&&this._commandService.executeCommand(N.id,{unitId:n,subUnitId:r,drawings:t})}_updateDrawingAnchor(e){if(this._transformerCache.size!==1)return;let t=this._transformerCache.values().next().value,n=e.values().next().value;this._getDrawingAnchor(t.drawing,n)}_updateInlineDrawingAnchor(e,t,n){var r;if(this._transformerCache.size!==1)return;let{contentBoxPointGroup:i}=(r=this._getInlineDrawingAnchor(e,t,n))==null?{}:r;i!=null&&this._createOrUpdateInlineAnchor(e.unitId,i)}_getInlineDrawingAnchor(e,t,a){var o,s;let c=this._renderManagerService.getRenderById(e.unitId),l=c==null?void 0:c.with(n.DocSkeletonManagerService).getSkeleton();if(c==null)return;let{mainComponent:u,scene:d}=c,f=u,p=d.getViewports()[0],{pageLayoutType:m=i.PageLayoutType.VERTICAL,pageMarginLeft:h,pageMarginTop:g}=f.getOffsetConfig(),_=null,v=!1,y=-1,b=``,x=this._getTransformCoordForDocumentOffset(f,p,t,a);if(x==null)return;let S=(o=this._renderManagerService.getRenderById(e.unitId))==null?void 0:o.with(r.DocSelectionRenderService);if(S==null)return;let C=l==null?void 0:l.findNodeByCoord(x,m,h,g,{strict:!1,segmentId:S.getSegment(),segmentPage:S.getSegmentPage()});if(C){let{node:e,ratioX:t,segmentPage:n,segmentId:r}=C;v=t<.5,_=e,y=n,b=r}if(_==null)return;let w=l==null?void 0:l.findPositionByGlyph(_,y),T=this._getDocObject();if(w==null||l==null||T==null||oe(w))return;let E={...w,isBack:v},{cursorList:D,contentBoxPointGroup:O}=new r.NodePositionConvertToCursor(T.document.getOffsetConfig(),l).getRangePointData(E,E),{startOffset:k}=(s=(0,r.getOneTextSelectionRange)(D))==null?{}:s;if(k!=null)return{offset:k,contentBoxPointGroup:O,segmentId:b,segmentPage:y}}_getDrawingAnchor(t,a){var o,s,c,l,u;let d=this._renderManagerService.getRenderById(t.unitId),f=d==null?void 0:d.with(n.DocSkeletonManagerService).getSkeleton(),p=f==null?void 0:f.getSkeletonData();if(p==null||d==null)return;let{pages:m,skeHeaders:h,skeFooters:g}=p,{mainComponent:_,scene:v}=d,y=_,b=v.getViewports()[0],{pageLayoutType:x=i.PageLayoutType.VERTICAL,pageMarginLeft:S,pageMarginTop:C,docsLeft:w,docsTop:T}=y.getOffsetConfig(),{left:E,top:D,angle:O}=a,{width:k,height:A}=a,{positionV:j,positionH:M}=t.docTransform,{width:N,height:P}=this._getPageContentSize(t);k=Math.min(k,N),A=Math.min(A,P);let F=null,I=``,L=-1,R={...t.docTransform,size:{width:k,height:A},angle:O},{x:z,y:B}=v.getViewportScrollXY(b),V=this._getTransformCoordForDocumentOffset(y,b,E-z,D-B);if(V==null)return;let H=(o=this._renderManagerService.getRenderById(t.unitId))==null?void 0:o.with(r.DocSelectionRenderService);if(H==null)return;let U=f==null?void 0:f.findNodeByCoord(V,x,S,C,{strict:!1,segmentId:H.getSegment(),segmentPage:H.getSegmentPage()});if(U){let{node:e,segmentPage:t,segmentId:n}=U;F=e,L=t,I=n}if(F==null)return;let W=(s=F.parent)==null?void 0:s.parent,G=W==null?void 0:W.parent,ee=(c=G==null?void 0:G.lines.find(e=>e.paragraphIndex===(W==null?void 0:W.paragraphIndex)&&e.paragraphStart))==null?G==null?void 0:G.lines[0]:c,K=G==null||(l=G.parent)==null?void 0:l.parent;if(W==null||G==null||ee==null||K==null)return;this._liquid.reset();let te=K.type;for(let e of m){let{headerId:t,footerId:n,pageHeight:r,pageWidth:a,marginLeft:o,marginBottom:s}=e,c=m.indexOf(e);if(L>-1&&c===L){switch(te){case i.DocumentSkeletonPageType.HEADER:{var ne;let e=(ne=h.get(t))==null?void 0:ne.get(a);if(e)this._liquid.translatePagePadding({marginTop:e.marginTop,marginLeft:o});else throw Error(`header skeleton not found`);break}case i.DocumentSkeletonPageType.FOOTER:{var re;let e=(re=g.get(n))==null?void 0:re.get(a);if(e)this._liquid.translatePagePadding({marginTop:r-s+e.marginTop,marginLeft:o});else throw Error(`footer skeleton not found`);break}}break}if(this._liquid.translatePagePadding(e),e===K)break;this._liquid.restorePagePadding(e),this._liquid.translatePage(e,x,S,C)}if(j.relativeFrom===e.ObjectRelativeFromV.LINE)F=W.divides[0].glyphGroup[0];else{var q,J;F=(q=(J=ee.divides)==null||(J=J[0])==null||(J=J.glyphGroup)==null?void 0:J[0])==null?F:q}switch(R.positionH={relativeFrom:M.relativeFrom,posOffset:E-this._liquid.x-w},M.relativeFrom){case e.ObjectRelativeFromH.MARGIN:R.positionH.posOffset=E-this._liquid.x-w-K.marginLeft;break;case e.ObjectRelativeFromH.COLUMN:R.positionH.posOffset=E-this._liquid.x-w-G.left;break}switch(R.positionV={relativeFrom:j.relativeFrom,posOffset:D-this._liquid.y-T},j.relativeFrom){case e.ObjectRelativeFromV.PAGE:R.positionV.posOffset=D-this._liquid.y-T-K.marginTop;break;case e.ObjectRelativeFromV.LINE:R.positionV.posOffset=D-this._liquid.y-T-W.top;break;case e.ObjectRelativeFromV.PARAGRAPH:R.positionV.posOffset=D-this._liquid.y-T-ee.top;break}if(F==null)return;let Y=f==null?void 0:f.findPositionByGlyph(F,L),ie=this._getDocObject();if(Y==null||f==null||ie==null||oe(Y))return;let X={...Y,isBack:!1},{cursorList:ae}=new r.NodePositionConvertToCursor(ie.document.getOffsetConfig(),f).getRangePointData(X,X),{startOffset:Z}=(u=(0,r.getOneTextSelectionRange)(ae))==null?{}:u;if(Z!=null)return{offset:Z,docTransform:R,segmentId:I,segmentPage:L}}_updateDrawingSize(e,t){let n=[],{drawing:r,width:i,height:a,angle:o}=e,{unitId:s,subUnitId:c}=r,{width:l,height:u,angle:d}=t,{width:f,height:p}=this._getPageContentSize(r);l=Math.min(f,l),u=Math.min(p,u),(l!==i||u!==a)&&n.push({drawingId:r.drawingId,key:`size`,value:{width:l,height:u}}),d!==o&&n.push({drawingId:r.drawingId,key:`angle`,value:d}),n.length>0&&s&&c&&this._commandService.executeCommand(N.id,{unitId:s,subUnitId:c,drawings:n})}_moveInlineDrawing(e,t,n){let r=this._getInlineDrawingAnchor(e,t,n),{offset:i,segmentId:a,segmentPage:o}=r==null?{}:r;return this._commandService.executeCommand(P.id,{unitId:e.unitId,subUnitId:e.unitId,drawing:e,offset:i,segmentId:a,segmentPage:o,needRefreshDrawings:i==null})}_limitDrawingInPage(t,r){let i=this._renderManagerService.getRenderById(t.unitId),{left:a,top:o,width:s,height:c,angle:l}=r,u=i==null?void 0:i.with(n.DocSkeletonManagerService).getSkeleton(),d=u==null?void 0:u.getSkeletonData(),{pages:f}=d==null?{}:d;if(d==null||i==null||f==null)return{left:a,top:o,width:s,height:c,angle:l};let{mainComponent:p}=i,{top:m,pageLayoutType:h,pageMarginLeft:g,pageMarginTop:_}=p,v=o;this._liquid.reset();for(let t of f){let{marginBottom:n,pageHeight:r}=t,i=f[f.indexOf(t)+1];i!=null&&(e.Tools.hasIntersectionBetweenTwoRanges(o,o+c,this._liquid.y+m+r-n,this._liquid.y+m+r+_+i.marginTop)&&(v=o+c/2<this._liquid.y+m+r+_/2?Math.min(o,this._liquid.y+m+r-n-c):Math.max(o,this._liquid.y+m+r+_+i.marginTop)),this._liquid.translatePage(t,h,g,_))}return{left:a,top:v,width:s,height:c,angle:l}}_nonInlineDrawingTransform(t,n,r=!1){let i=t.isMultiTransform===e.BooleanNumber.TRUE?n:this._limitDrawingInPage(t,n);if(r&&i.top!==n.top)return;let a=this._getDrawingAnchor(t,i),{offset:o,docTransform:s,segmentId:c,segmentPage:l}=a==null?{}:a;return o==null||s==null?this._updateMultipleDrawingDocTransform(new Map([[t.drawingId,n]])):this._commandService.executeCommand(F.id,{unitId:t.unitId,subUnitId:t.unitId,drawing:t,offset:o,docTransform:s,segmentId:c,segmentPage:l})}_getSceneAndTransformerByDrawingSearch(e){if(e==null)return;let t=this._renderManagerService.getRenderById(e),n=t==null?void 0:t.scene;if(n!=null)return{scene:n,transformer:n.getTransformerByCreate()}}_getTransformCoordForDocumentOffset(e,t,n,r){let{documentTransform:a}=e.getOffsetConfig(),o=t.transformVector2SceneCoord(i.Vector2.FromArray([n,r]));if(o)return a.clone().invert().applyPoint(o)}_createOrUpdateInlineAnchor(t,n){let a=this._renderManagerService.getRenderById(t);if(a==null)return;let{mainComponent:o,scene:s}=a,{docsLeft:c,docsTop:l}=o.getOffsetConfig(),{left:u,top:d,height:f}=(0,r.getAnchorBounding)(n),p=u+c,m=d+l;if(this._anchorShape){this._anchorShape.transformByState({left:p,top:m,height:f}),this._anchorShape.show();return}let h=new i.Rect(`__InlineDrawingAnchor__`+(0,e.generateRandomId)(6),{left:p,top:m,height:f,strokeWidth:2,stroke:(0,i.getColor)(e.COLORS.darkgray,1),evented:!1});this._anchorShape=h,s.addObject(h,r.TEXT_RANGE_LAYER_INDEX)}_getDocObject(){return(0,r.getDocObject)(this._univerInstanceService,this._renderManagerService)}_getPageContentSize(e){let t=this._renderManagerService.getRenderById(e.unitId),r=t==null?void 0:t.with(n.DocSkeletonManagerService).getSkeleton(),i=r==null?void 0:r.getSkeletonData();if(i==null||t==null)return{width:500,height:500};let{pages:a}=i,o=null;for(let t of a){let{skeDrawings:n}=t;if(n.has(e.drawingId)){o=t;break}}if(o){let{pageWidth:e,pageHeight:t,marginLeft:n,marginBottom:r,marginRight:i,marginTop:a}=o;return{width:Math.max(500,e-n-i),height:Math.max(500,t-a-r)}}else return{width:500,height:500}}};se=w([C(0,e.ICommandService),C(1,e.IUniverInstanceService),C(2,o.IDrawingManagerService),C(3,i.IRenderManagerService)],se);const ce={[s.RibbonInsertGroup.MEDIA]:{[W]:{order:0,menuItemFactory:K,[G]:{order:0,menuItemFactory:te}}}},le=-1e3,ue=1e3,de=t=>{let c=(0,s.useDependency)(e.ICommandService),l=(0,s.useDependency)(e.LocaleService),f=(0,s.useDependency)(o.IDrawingManagerService),p=(0,s.useDependency)(i.IRenderManagerService),m=(0,s.useDependency)(e.IUniverInstanceService),{drawings:h}=t,g=h[0];if(g==null)return;let{unitId:_}=g,v=m.getUniverDocInstance(_),y=v==null?void 0:v.getSnapshot().documentStyle.documentFlavor,b=p.getRenderById(_),x=b==null?void 0:b.scene;if(x==null)return;let S=x.getTransformerByCreate(),C=[{label:l.t(`image-position.column`),value:String(e.ObjectRelativeFromH.COLUMN)},{label:l.t(`image-position.page`),value:String(e.ObjectRelativeFromH.PAGE)},{label:l.t(`image-position.margin`),value:String(e.ObjectRelativeFromH.MARGIN)}],w=[{label:l.t(`image-position.line`),value:String(e.ObjectRelativeFromV.LINE),disabled:y===e.DocumentFlavor.MODERN},{label:l.t(`image-position.page`),value:String(e.ObjectRelativeFromV.PAGE),disabled:y===e.DocumentFlavor.MODERN},{label:l.t(`image-position.margin`),value:String(e.ObjectRelativeFromV.MARGIN),disabled:y===e.DocumentFlavor.MODERN},{label:l.t(`image-position.paragraph`),value:String(e.ObjectRelativeFromV.PARAGRAPH)}],[T,E]=(0,u.useState)(!0),[D,O]=(0,u.useState)({relativeFrom:e.ObjectRelativeFromH.PAGE,posOffset:0}),[k,A]=(0,u.useState)({relativeFrom:e.ObjectRelativeFromV.PAGE,posOffset:0}),[j,M]=(0,u.useState)(!0),[P,F]=(0,u.useState)(!0);function I(e,t){var n;e===`positionH`?O(t):A(t);let i=f.getFocusDrawings();if(i.length===0)return;let a=i.map(e=>({unitId:e.unitId,subUnitId:e.subUnitId,drawingId:e.drawingId}));c.executeCommand(N.id,{unitId:i[0].unitId,subUnitId:i[0].unitId,drawings:a.map(n=>({drawingId:n.drawingId,key:e,value:t}))});let o=(n=p.getRenderById(_))==null?void 0:n.with(r.DocSelectionRenderService);o&&o.blur(),S.refreshControls()}function L(t){var r;let i=D.relativeFrom,a=D.posOffset,o=Number(t);if(i===o)return;let s=f.getFocusDrawings();if(s.length===0)return;let c=s[0].drawingId,l=s[0].unitId,u=null,d=0,m=(r=p.getRenderById(l))==null?void 0:r.with(n.DocSkeletonManagerService).getSkeleton(),h=m==null?void 0:m.getSkeletonData();if(h==null)return;let{pages:g,skeHeaders:_,skeFooters:v}=h;for(let e of g){var y,b;let{marginLeft:t,skeDrawings:n,headerId:r,footerId:i,pageWidth:a}=e;if(n.has(c)){u=n.get(c),d=t;break}let o=(y=_.get(r))==null?void 0:y.get(a);if(o!=null&&o.skeDrawings.has(c)){u=o==null?void 0:o.skeDrawings.get(c),d=t;break}let s=(b=v.get(i))==null?void 0:b.get(a);if(s!=null&&s.skeDrawings.has(c)){u=s==null?void 0:s.skeDrawings.get(c),d=t;break}}if(u==null)return;let x=0;i===e.ObjectRelativeFromH.COLUMN?x-=u.columnLeft:i===e.ObjectRelativeFromH.MARGIN&&(x-=d),o===e.ObjectRelativeFromH.COLUMN?x+=u.columnLeft:o===e.ObjectRelativeFromH.MARGIN?x+=d:e.ObjectRelativeFromH.PAGE,I(`positionH`,{relativeFrom:o,posOffset:(a==null?0:a)-x})}function R(t){var i,a,o,s,c;let l=k.relativeFrom,u=k.posOffset,d=Number(t);if(l===d)return;let h=f.getFocusDrawings();if(h.length===0)return;let{drawingId:g,unitId:_}=h[0],v=m.getUniverDocInstance(_),y=(i=p.getRenderById(_))==null?void 0:i.with(n.DocSkeletonManagerService).getSkeleton(),b=(a=p.getRenderById(_))==null?void 0:a.with(r.DocSelectionRenderService),x=b==null?void 0:b.getSegment(),S=b==null?void 0:b.getSegmentPage(),C=v==null||(o=v.getSelfOrHeaderFooterModel(x).getBody())==null||(o=o.customBlocks)==null?void 0:o.find(e=>e.blockId===g);if(C==null||y==null||b==null)return;let{startIndex:w}=C,T=y.findNodeByCharIndex(w,x,S),E=T==null||(s=T.parent)==null?void 0:s.parent,D=E==null?void 0:E.parent,O=D==null?void 0:D.lines.find(e=>e.paragraphIndex===(E==null?void 0:E.paragraphIndex)&&e.paragraphStart),A=D==null||(c=D.parent)==null?void 0:c.parent;if(T==null||E==null||O==null||D==null||A==null)return;let j=0;l===e.ObjectRelativeFromV.PARAGRAPH?j-=O.top:l===e.ObjectRelativeFromV.LINE?j-=E.top:l===e.ObjectRelativeFromV.PAGE&&(j+=A.marginTop),d===e.ObjectRelativeFromV.PARAGRAPH?j+=O.top:d===e.ObjectRelativeFromV.LINE?j+=E.top:d===e.ObjectRelativeFromV.PAGE&&(j-=A.marginTop),I(`positionV`,{relativeFrom:d,posOffset:(u==null?0:u)-j})}function z(t){var n;let r=v==null?void 0:v.getSnapshot(),i=r==null||(n=r.drawings)==null?void 0:n[t.drawingId];if(i==null)return;let{layoutType:a}=i,{positionH:o,positionV:s}=i.docTransform;O(o),A(s),E(a===e.PositionedObjectLayoutType.INLINE),M(s.relativeFrom===e.ObjectRelativeFromV.PARAGRAPH||s.relativeFrom===e.ObjectRelativeFromV.LINE)}function B(){let e=f.getFocusDrawings();e.length!==0&&z(e[0])}function V(t){M(t),R(t?String(e.ObjectRelativeFromV.PARAGRAPH):String(e.ObjectRelativeFromV.PAGE))}return(0,u.useEffect)(()=>{B();let e=f.focus$.subscribe(e=>{if(e.length===0){F(!1);return}F(!0),z(e[0])}),t=c.onCommandExecuted(async e=>{e.id===n.RichTextEditingMutation.id&&B()});return()=>{e.unsubscribe(),t.dispose()}},[]),(0,d.jsxs)(`div`,{className:(0,a.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!P}),children:[(0,d.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:l.t(`image-position.title`)})}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:l.t(`image-position.horizontal`)})}),(0,d.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:l.t(`image-position.absolutePosition`)}),(0,d.jsx)(a.InputNumber,{min:le,max:ue,precision:1,disabled:T,value:D.posOffset,onChange:e=>{I(`positionH`,{relativeFrom:D.relativeFrom,posOffset:e})}})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:l.t(`image-position.toTheRightOf`)}),(0,d.jsx)(a.Select,{value:String(D.relativeFrom),disabled:T,options:C,onChange:L})]})]}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:l.t(`image-position.vertical`)})}),(0,d.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:l.t(`image-position.absolutePosition`)}),(0,d.jsx)(a.InputNumber,{min:le,max:ue,precision:1,disabled:T,value:k.posOffset,onChange:e=>{I(`positionV`,{relativeFrom:k.relativeFrom,posOffset:e})}})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:l.t(`image-position.bellow`)}),(0,d.jsx)(a.Select,{disabled:T,value:String(k.relativeFrom),options:w,onChange:R})]})]}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:l.t(`image-position.options`)})}),(0,d.jsx)(`div`,{children:(0,d.jsx)(a.Checkbox,{disabled:T,checked:j,onChange:V,children:l.t(`image-position.moveObjectWithText`)})})]})},fe=t=>{let r=(0,s.useDependency)(e.ICommandService),c=(0,s.useDependency)(e.LocaleService),l=(0,s.useDependency)(o.IDrawingManagerService),f=(0,s.useDependency)(i.IRenderManagerService),p=(0,s.useDependency)(e.IUniverInstanceService),{drawings:m}=t,h=m[0];if(h==null)return null;let{unitId:g}=h,_=p.getUniverDocInstance(g),v=f.getRenderById(g);if((v==null?void 0:v.scene)==null)return null;let[y,b]=(0,u.useState)(!0),[x,S]=(0,u.useState)(!0),[C,w]=(0,u.useState)(!0),[T,E]=(0,u.useState)(D.INLINE),[O,k]=(0,u.useState)(``),[N,P]=(0,u.useState)({distT:0,distL:0,distB:0,distR:0}),[F,I]=(0,u.useState)(!0);function L(e){E(e);let t=l.getFocusDrawings();if(t.length===0)return;let{unitId:n,subUnitId:i}=t[0],a=t.map(({unitId:e,subUnitId:t,drawingId:n})=>({unitId:e,subUnitId:t,drawingId:n}));r.executeCommand(A.id,{unitId:n,subUnitId:i,drawings:a,wrappingStyle:e})}function R(e){k(e);let t=l.getFocusDrawings();if(t.length===0)return;let n=t.map(e=>({unitId:e.unitId,subUnitId:e.subUnitId,drawingId:e.drawingId}));r.executeCommand(M.id,{unitId:t[0].unitId,subUnitId:t[0].unitId,drawings:n,wrapText:e})}function z(e,t){if(e==null)return;P({...N,[t]:e});let n=l.getFocusDrawings();if(n.length===0)return;let i=n.map(e=>({unitId:e.unitId,subUnitId:e.subUnitId,drawingId:e.drawingId}));r.executeCommand(j.id,{unitId:n[0].unitId,subUnitId:n[0].unitId,drawings:i,dist:{[t]:e}})}function B(){let e=l.getFocusDrawings();e.length!==0&&V(e[0])}function V(t){var n;let r=_==null||(n=_.getSnapshot())==null||(n=n.drawings)==null?void 0:n[t.drawingId];if(r==null)return;let{distT:i=0,distL:a=0,distB:o=0,distR:s=0,layoutType:c=e.PositionedObjectLayoutType.INLINE,behindDoc:l=e.BooleanNumber.FALSE,wrapText:u=e.WrapTextType.BOTH_SIDES}=r;if(P({distT:i,distL:a,distB:o,distR:s}),k(u),b(c!==e.PositionedObjectLayoutType.WRAP_SQUARE),c===e.PositionedObjectLayoutType.WRAP_NONE||c===e.PositionedObjectLayoutType.INLINE?S(!0):S(!1),c===e.PositionedObjectLayoutType.WRAP_NONE||c===e.PositionedObjectLayoutType.INLINE||c===e.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM?w(!0):w(!1),c===e.PositionedObjectLayoutType.WRAP_NONE)l===e.BooleanNumber.TRUE?E(D.BEHIND_TEXT):E(D.IN_FRONT_OF_TEXT);else switch(c){case e.PositionedObjectLayoutType.INLINE:E(D.INLINE);break;case e.PositionedObjectLayoutType.WRAP_SQUARE:E(D.WRAP_SQUARE);break;case e.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:E(D.WRAP_TOP_AND_BOTTOM);break;default:throw Error(`Unsupported layout type: ${c}`)}}return(0,u.useEffect)(()=>{B();let e=l.focus$.subscribe(e=>{if(e.length===0){I(!1);return}I(!0),V(e[0])}),t=r.onCommandExecuted(async e=>{e.id===n.RichTextEditingMutation.id&&B()});return()=>{e.unsubscribe(),t.dispose()}},[]),(0,d.jsxs)(`div`,{className:(0,a.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,{"univer-hidden":!F}),children:[(0,d.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:c.t(`image-text-wrap.title`)})}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:c.t(`image-text-wrap.wrappingStyle`)})}),(0,d.jsx)(`div`,{children:(0,d.jsxs)(a.RadioGroup,{value:T,onChange:L,direction:`vertical`,children:[(0,d.jsx)(a.Radio,{value:D.INLINE,children:c.t(`image-text-wrap.inline`)}),(0,d.jsx)(a.Radio,{value:D.WRAP_SQUARE,children:c.t(`image-text-wrap.square`)}),(0,d.jsx)(a.Radio,{value:D.WRAP_TOP_AND_BOTTOM,children:c.t(`image-text-wrap.topAndBottom`)}),(0,d.jsx)(a.Radio,{value:D.BEHIND_TEXT,children:c.t(`image-text-wrap.behindText`)}),(0,d.jsx)(a.Radio,{value:D.IN_FRONT_OF_TEXT,children:c.t(`image-text-wrap.inFrontText`)})]})}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:c.t(`image-text-wrap.wrapText`)})}),(0,d.jsx)(`div`,{children:(0,d.jsxs)(a.RadioGroup,{disabled:y,value:O,onChange:R,direction:`horizontal`,children:[(0,d.jsx)(a.Radio,{value:e.WrapTextType.BOTH_SIDES,children:c.t(`image-text-wrap.bothSide`)}),(0,d.jsx)(a.Radio,{value:e.WrapTextType.LEFT,children:c.t(`image-text-wrap.leftOnly`)}),(0,d.jsx)(a.Radio,{value:e.WrapTextType.RIGHT,children:c.t(`image-text-wrap.rightOnly`)})]})}),(0,d.jsx)(`div`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,d.jsx)(`div`,{children:c.t(`image-text-wrap.distanceFromText`)})}),(0,d.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:c.t(`image-text-wrap.top`)}),(0,d.jsx)(a.InputNumber,{min:0,max:100,disabled:x,precision:1,value:N.distT,onChange:e=>{z(e,`distT`)}})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:c.t(`image-text-wrap.left`)}),(0,d.jsx)(a.InputNumber,{min:0,max:100,disabled:C,precision:1,value:N.distL,onChange:e=>{z(e,`distL`)}})]})]}),(0,d.jsxs)(`div`,{className:`univer-grid univer-grid-cols-2 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:c.t(`image-text-wrap.bottom`)}),(0,d.jsx)(a.InputNumber,{min:0,max:100,disabled:x,precision:1,value:N.distB,onChange:e=>{z(e,`distB`)}})]}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`span`,{children:c.t(`image-text-wrap.right`)}),(0,d.jsx)(a.InputNumber,{min:0,max:100,disabled:C,precision:1,value:N.distR,onChange:e=>{z(e,`distR`)}})]})]})]})},pe=()=>{let e=(0,s.useDependency)(o.IDrawingManagerService),[t,n]=(0,u.useState)(e.getFocusDrawings());return(0,u.useEffect)(()=>{let t=e.focus$.subscribe(e=>{n(e)});return()=>{t.unsubscribe()}},[]),!!(t!=null&&t.length)&&(0,d.jsxs)(`div`,{className:`univer-text-sm`,children:[(0,d.jsx)(l.DrawingCommonPanel,{drawings:t,hasAlign:!1,hasCropper:!1,hasGroup:!1,hasTransform:!1}),(0,d.jsx)(fe,{drawings:t}),(0,d.jsx)(de,{drawings:t})]})};function Q(t){return t.getContextValue(e.FOCUSING_DOC)&&t.getContextValue(e.FOCUSING_UNIVER_EDITOR)&&t.getContextValue(e.FOCUSING_COMMON_DRAWINGS)}const me={id:I.id,description:`shortcut.drawing-move-down`,group:`4_drawing-view`,binding:s.KeyCode.ARROW_DOWN,priority:100,preconditions:Q,staticParameters:{direction:e.Direction.DOWN}},he={id:I.id,description:`shortcut.drawing-move-up`,group:`4_drawing-view`,binding:s.KeyCode.ARROW_UP,priority:100,preconditions:Q,staticParameters:{direction:e.Direction.UP}},ge={id:I.id,description:`shortcut.drawing-move-left`,group:`4_drawing-view`,binding:s.KeyCode.ARROW_LEFT,priority:100,preconditions:Q,staticParameters:{direction:e.Direction.LEFT}},_e={id:I.id,description:`shortcut.drawing-move-right`,group:`4_drawing-view`,binding:s.KeyCode.ARROW_RIGHT,priority:100,preconditions:Q,staticParameters:{direction:e.Direction.RIGHT}},ve={id:p.id,description:`shortcut.drawing-delete`,group:`4_drawing-view`,preconditions:Q,binding:s.KeyCode.DELETE,mac:s.KeyCode.BACKSPACE};let ye=class extends e.Disposable{constructor(e,t,n,r){super(),this._componentManager=e,this._menuManagerService=t,this._commandService=n,this._shortcutService=r,this._init()}_initCustomComponents(){let e=this._componentManager;this.disposeWithMe(e.register(R,pe))}_initMenus(){this._menuManagerService.mergeMenu(ce)}_initCommands(){[E,h,A,j,M,N,P,F,f,z,L,B,m,_,I,p,g].forEach(e=>this.disposeWithMe(this._commandService.registerCommand(e)))}_initShortcuts(){[me,he,ge,_e,ve].forEach(e=>{this.disposeWithMe(this._shortcutService.registerShortcut(e))})}_init(){this._initCommands(),this._initCustomComponents(),this._initMenus(),this._initShortcuts()}};ye=w([C(0,(0,e.Inject)(s.ComponentManager)),C(1,s.IMenuManagerService),C(2,e.ICommandService),C(3,s.IShortcutService)],ye);let be=class extends e.Disposable{constructor(e,t,n,r,a,o,s,c){super(),this._context=e,this._docSkeletonManagerService=t,this._commandService=n,this._editorService=r,this._drawingManagerService=a,this._docRefreshDrawingsService=o,this._univerInstanceService=s,this._lifecycleService=c,x(this,`_liquid`,new i.Liquid),this._initialize(),this._commandExecutedListener()}_initialize(){this._initialRenderRefresh(),this._drawingInitializeListener(),this._initResize()}_initialRenderRefresh(){this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe(e=>{e!=null&&this._refreshDrawing(e)})),this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe(e=>{e!=null&&this._refreshDrawing(e)}))}_commandExecutedListener(){let t=[n.RichTextEditingMutation.id,r.SetDocZoomRatioOperation.id];this.disposeWithMe(this._commandService.onCommandExecuted(n=>{if(t.includes(n.id)){let{unitId:t}=n.params,{unitId:r,mainComponent:i}=this._context;if(t!==r)return;let a=this._docSkeletonManagerService.getSkeleton();if(a==null)return;if(this._editorService.isEditor(r)&&r!==e.DOCS_ZEN_EDITOR_UNIT_ID_KEY){i==null||i.makeDirty();return}this._refreshDrawing(a)}}))}_initResize(){this.disposeWithMe((0,e.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0,c.filter)(e=>e.type===i.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize),(0,c.debounceTime)(16)).subscribe(()=>{var e;let t=this._docSkeletonManagerService.getSkeleton(),{scene:n}=this._context;(e=n.getTransformer())==null||e.refreshControls(),this._refreshDrawing(t)}))}_refreshDrawing(e){let t=e==null?void 0:e.getSkeletonData(),{mainComponent:n,unitId:r}=this._context,i=n;if(!t)return;let{left:a,top:o,pageLayoutType:s,pageMarginLeft:c,pageMarginTop:l}=i,{pages:u,skeHeaders:d,skeFooters:f}=t,p={};this._liquid.reset();for(let e=0,t=u.length;e<t;e++){let t=u[e],{headerId:n,footerId:i,pageWidth:g}=t;if(n){var m;let e=(m=d.get(n))==null?void 0:m.get(g);e&&this._calculateDrawingPosition(r,e,a,o,p,e.marginTop,t.marginLeft)}if(i){var h;let e=(h=f.get(i))==null?void 0:h.get(g);e&&this._calculateDrawingPosition(r,e,a,o,p,t.pageHeight-t.marginBottom+e.marginTop,t.marginLeft)}this._calculateDrawingPosition(r,t,a,o,p,t.marginTop,t.marginLeft),this._liquid.translatePage(t,s,c,l)}let g=Object.values(p),_=g.filter(e=>!e.isMultiTransform),v=g.filter(e=>e.isMultiTransform);_.length>0&&this._drawingManagerService.refreshTransform(_),this._handleMultiDrawingsTransform(v)}_handleMultiDrawingsTransform(t){let{scene:n,unitId:r}=this._context,i=n.getTransformerByCreate();t.forEach(e=>{let t=this._drawingManagerService.getDrawingByParam(e);t!=null&&(t.transform=e.transform,t.transforms=e.transforms,t.isMultiTransform=e.isMultiTransform)});let a=[...i.getSelectedObjectMap().keys()],o=Object.values(this._drawingManagerService.getDrawingData(r,r)).filter(t=>t.isMultiTransform===e.BooleanNumber.TRUE);this._drawingManagerService.removeNotification(o),t.length>0&&this._drawingManagerService.addNotification(t);for(let e of a){let t=n.getObject(e);t&&i.setSelectedControl(t)}}_calculateDrawingPosition(t,n,r,i,a,o,s){let{skeDrawings:c}=n;this._liquid.translatePagePadding({marginTop:o,marginLeft:s}),c.forEach(n=>{let{aLeft:o,aTop:s,height:c,width:l,angle:u,drawingId:d,drawingOrigin:f}=n,p=f.layoutType===e.PositionedObjectLayoutType.WRAP_NONE&&f.behindDoc===e.BooleanNumber.TRUE,{isMultiTransform:m=e.BooleanNumber.FALSE}=f,h={left:o+r+this._liquid.x,top:s+i+this._liquid.y,width:l,height:c,angle:u};a[d]==null?a[d]={unitId:t,subUnitId:t,drawingId:d,behindText:p,transform:h,transforms:[h],isMultiTransform:m}:m===e.BooleanNumber.TRUE&&a[d].transforms.push(h)}),this._liquid.restorePagePadding({marginTop:o,marginLeft:s})}_drawingInitializeListener(){let t=()=>{let e=this._docSkeletonManagerService.getSkeleton();e!=null&&(this._refreshDrawing(e),this._drawingManagerService.initializeNotification(this._context.unitId))};this._lifecycleService.stage>=e.LifecycleStages.Rendered?this._docSkeletonManagerService.getSkeleton()?t():setTimeout(t,500):this.disposeWithMe(this._lifecycleService.lifecycle$.pipe((0,c.filter)(t=>t===e.LifecycleStages.Rendered)).subscribe(t))}};be=w([C(1,(0,e.Inject)(n.DocSkeletonManagerService)),C(2,e.ICommandService),C(3,r.IEditorService),C(4,o.IDrawingManagerService),C(5,(0,e.Inject)(S)),C(6,e.IUniverInstanceService),C(7,(0,e.Inject)(e.LifecycleService))],be);let xe=class extends e.RxDisposable{constructor(e,t,n,r,i){super(),this._drawingManagerService=e,this._canvasPopManagerService=t,this._renderManagerService=n,this._univerInstanceService=r,this._contextService=i,x(this,`_initImagePopupMenu`,new Set),x(this,`_disposePopups`,[]),this._init()}_init(){this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_DOC).pipe((0,c.takeUntil)(this.dispose$)).subscribe(e=>this._create(e))),this.disposeWithMe(this._univerInstanceService.getTypeOfUnitDisposed$(e.UniverInstanceType.UNIVER_DOC).pipe((0,c.takeUntil)(this.dispose$)).subscribe(e=>this._dispose(e))),this._univerInstanceService.getAllUnitsForType(e.UniverInstanceType.UNIVER_DOC).forEach(e=>this._create(e))}_dispose(e){let t=e.getUnitId();this._disposePopups.length&&(this._disposePopups.forEach(e=>e.dispose()),this._disposePopups.length=0),this._renderManagerService.removeRender(t)}_create(t){if(!t)return;let n=t.getUnitId();(0,e.isInternalEditorID)(n)||this._renderManagerService.has(n)&&!this._initImagePopupMenu.has(n)&&(this._popupMenuListener(n),this._initImagePopupMenu.add(n))}_hasCropObject(e){let t=e.getAllObjects();for(let e of t)if(e instanceof l.ImageCropperObject)return!0;return!1}_popupMenuListener(t){var n;let r=(n=this._renderManagerService.getRenderById(t))==null?void 0:n.scene;if(!r)return;let i=r.getTransformerByCreate();if(!i)return;let a=this._disposePopups;this.disposeWithMe(i.createControl$.subscribe(()=>{if(this._hasCropObject(r))return;let t=i.getSelectedObjectMap();if(a.forEach(e=>e.dispose()),a.length=0,t.size>1)return;let n=t.values().next().value;if(!n)return;let o=n.oKey,s=this._drawingManagerService.getDrawingOKey(o);if(!s||s.drawingType===e.DrawingTypeEnum.DRAWING_DOM)return;let{unitId:c,subUnitId:u,drawingId:d,drawingType:f}=s,p=this._canvasPopManagerService.attachPopupToObject(n,{componentKey:l.COMPONENT_IMAGE_POPUP_MENU,direction:`horizontal`,offset:[2,0],extraProps:{menuItems:this._getImageMenuItems(c,u,d,f)}},c);a.push(this.disposeWithMe(p)),!this._drawingManagerService.getFocusDrawings().find(e=>e.unitId===c&&e.subUnitId===u&&e.drawingId===d)&&this._drawingManagerService.focusDrawing([{unitId:c,subUnitId:u,drawingId:d}])})),this.disposeWithMe(i.clearControl$.subscribe(()=>{a.forEach(e=>e.dispose()),a.length=0,this._contextService.setContextValue(e.FOCUSING_COMMON_DRAWINGS,!1),this._drawingManagerService.focusDrawing(null)})),this.disposeWithMe(i.changing$.subscribe(()=>{a.forEach(e=>e.dispose()),a.length=0})),this.disposeWithMe(i.changeStart$.subscribe(()=>{a.forEach(e=>e.dispose()),a.length=0}))}_getImageMenuItems(e,t,n,r){return[{label:`image-popup.edit`,index:0,commandId:B.id,commandParams:{unitId:e,subUnitId:t,drawingId:n},disable:!0},{label:`image-popup.delete`,index:1,commandId:f.id,commandParams:{unitId:e,drawings:[{unitId:e,subUnitId:t,drawingId:n}]},disable:!1},{label:`image-popup.crop`,index:2,commandId:l.OpenImageCropOperation.id,commandParams:{unitId:e,subUnitId:t,drawingId:n},disable:!0},{label:`image-popup.reset`,index:3,commandId:l.ImageResetSizeOperation.id,commandParams:[{unitId:e,subUnitId:t,drawingId:n}],disable:!0}]}};xe=w([C(0,o.IDrawingManagerService),C(1,(0,e.Inject)(r.DocCanvasPopManagerService)),C(2,i.IRenderManagerService),C(3,e.IUniverInstanceService),C(4,e.IContextService)],xe);let $=class extends e.Plugin{constructor(t=J,n,r,i){super(),this._config=t,this._injector=n,this._renderManagerSrv=r,this._configService=i;let{...a}=(0,e.merge)({},J,this._config);this._configService.setConfig(q,a)}onStarting(){[[ye],[xe],[se],[X],[S],[U],[Z]].forEach(e=>this._injector.add(e))}onReady(){[[T],[be]].forEach(t=>this._renderManagerSrv.registerRenderModule(e.UniverInstanceType.UNIVER_DOC,t)),this._injector.get(X),this._injector.get(ye),this._injector.get(se),this._injector.get(Z)}onRendered(){this._injector.get(xe),this._injector.get(U)}};x($,`type`,e.UniverInstanceType.UNIVER_DOC),x($,`pluginName`,`DOC_DRAWING_UI_PLUGIN`),x($,`packageName`,ne),x($,`version`,re),$=w([(0,e.DependentOn)(l.UniverDrawingUIPlugin,o.UniverDrawingPlugin,t.UniverDocsDrawingPlugin,s.UniverUIPlugin),C(1,(0,e.Inject)(e.Injector)),C(2,i.IRenderManagerService),C(3,e.IConfigService)],$),exports.ClearDocDrawingTransformerOperation=L,exports.DOCS_IMAGE_MENU_ID=W,exports.DeleteDocDrawingsCommand=p,Object.defineProperty(exports,`DocFloatDomController`,{enumerable:!0,get:function(){return U}}),exports.EditDocDrawingOperation=B,exports.GroupDocDrawingCommand=m,exports.InsertDocDrawingCommand=h,exports.InsertDocImageCommand=E,exports.MoveDocDrawingsCommand=I,exports.RemoveDocDrawingCommand=f,exports.SetDocDrawingArrangeCommand=g,exports.SidebarDocDrawingOperation=z,exports.UngroupDocDrawingCommand=_,Object.defineProperty(exports,`UniverDocsDrawingUIPlugin`,{enumerable:!0,get:function(){return $}});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_docs_drawing = require("@univerjs/docs-drawing");
+let _univerjs_docs = require("@univerjs/docs");
+let _univerjs_docs_ui = require("@univerjs/docs-ui");
+let _univerjs_engine_render = require("@univerjs/engine-render");
+let _univerjs_design = require("@univerjs/design");
+let _univerjs_drawing = require("@univerjs/drawing");
+let _univerjs_ui = require("@univerjs/ui");
+let rxjs = require("rxjs");
+let _univerjs_drawing_ui = require("@univerjs/drawing-ui");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/commands/commands/remove-doc-drawing.command.ts
+/**
+* The command to remove new sheet image
+*/
+const RemoveDocDrawingCommand = {
+	id: "doc.command.remove-doc-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _docSelectionRenderSe, _documentDataModel$ge, _documentDataModel$ge2;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		if (params == null || documentDataModel == null) return false;
+		const docSelectionRenderService = renderManagerService.getRenderById(params.unitId).with(_univerjs_docs_ui.DocSelectionRenderService);
+		const { drawings: removeDrawings } = params;
+		const segmentId = (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "";
+		const textX = new _univerjs_core.TextX();
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const customBlocks = (_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.customBlocks) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : [];
+		const removeCustomBlocks = removeDrawings.map((drawing) => customBlocks.find((customBlock) => customBlock.blockId === drawing.drawingId)).filter((block) => !!block).sort((a, b) => a.startIndex > b.startIndex ? 1 : -1);
+		const unitId = removeDrawings[0].unitId;
+		const memoryCursor = new _univerjs_core.MemoryCursor();
+		memoryCursor.reset();
+		const cursorIndex = removeCustomBlocks[0].startIndex;
+		const textRanges = [{
+			startOffset: cursorIndex,
+			endOffset: cursorIndex
+		}];
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges
+			}
+		};
+		const rawActions = [];
+		for (const block of removeCustomBlocks) {
+			const { startIndex } = block;
+			if (startIndex > memoryCursor.cursor) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: startIndex - memoryCursor.cursor
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+			memoryCursor.moveCursorTo(startIndex + 1);
+		}
+		const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		rawActions.push(jsonX.editOp(textX.serialize(), path));
+		for (const block of removeCustomBlocks) {
+			var _documentDataModel$ge3;
+			const { blockId } = block;
+			const drawing = ((_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {})[blockId];
+			const drawingIndex = documentDataModel.getDrawingsOrder().indexOf(blockId);
+			const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
+			const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
+			rawActions.push(removeDrawingAction);
+			rawActions.push(removeDrawingOrderAction);
+		}
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+
+//#endregion
+//#region src/commands/commands/delete-doc-drawing.command.ts
+const DeleteDocDrawingsCommand = {
+	id: "doc.command.delete-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor) => {
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const drawings = accessor.get(_univerjs_docs_drawing.IDocDrawingService).getFocusDrawings();
+		if (drawings.length === 0) return false;
+		const { unitId } = drawings[0];
+		const newDrawings = drawings.map((drawing) => {
+			const { unitId, subUnitId, drawingId, drawingType } = drawing;
+			return {
+				unitId,
+				subUnitId,
+				drawingId,
+				drawingType
+			};
+		});
+		return commandService.executeCommand(RemoveDocDrawingCommand.id, {
+			unitId,
+			drawings: newDrawings
+		});
+	}
+};
+
+//#endregion
+//#region src/commands/commands/group-doc-drawing.command.ts
+/**
+* The command to insert new defined name
+*/
+const GroupDocDrawingCommand = {
+	id: "doc.command.group-doc-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		return false;
+	}
+};
+
+//#endregion
+//#region src/commands/commands/insert-doc-drawing.command.ts
+/**
+* The command to insert new drawings
+*/
+const InsertDocDrawingCommand = {
+	id: "doc.command.insert-doc-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _documentDataModel$ge, _documentDataModel$ge2;
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const activeTextRange = docSelectionManagerService.getActiveTextRange();
+		const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		if (activeTextRange == null || documentDataModel == null) return false;
+		const unitId = documentDataModel.getUnitId();
+		const { drawings } = params;
+		const { collapsed, startOffset, segmentId } = activeTextRange;
+		const body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+		if (body == null) return false;
+		const textX = new _univerjs_core.TextX();
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const drawingOrderLength = (_documentDataModel$ge = (_documentDataModel$ge2 = documentDataModel.getSnapshot().drawingsOrder) === null || _documentDataModel$ge2 === void 0 ? void 0 : _documentDataModel$ge2.length) !== null && _documentDataModel$ge !== void 0 ? _documentDataModel$ge : 0;
+		let removeDrawingLen = 0;
+		if (collapsed) {
+			if (startOffset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: startOffset
+			});
+		} else {
+			var _documentDataModel$ge3, _documentDataModel$ge4;
+			const dos = _univerjs_core.BuildTextUtils.selection.delete([activeTextRange], body, 0, null, false);
+			textX.push(...dos);
+			const removedCustomBlockIds = (0, _univerjs_docs_ui.getCustomBlockIdsInSelections)(body, [activeTextRange]);
+			const drawings = (_documentDataModel$ge3 = documentDataModel.getDrawings()) !== null && _documentDataModel$ge3 !== void 0 ? _documentDataModel$ge3 : {};
+			const drawingOrder = (_documentDataModel$ge4 = documentDataModel.getDrawingsOrder()) !== null && _documentDataModel$ge4 !== void 0 ? _documentDataModel$ge4 : [];
+			const sortedRemovedCustomBlockIds = removedCustomBlockIds.sort((a, b) => {
+				if (drawingOrder.indexOf(a) > drawingOrder.indexOf(b)) return -1;
+				else if (drawingOrder.indexOf(a) < drawingOrder.indexOf(b)) return 1;
+				return 0;
+			});
+			if (sortedRemovedCustomBlockIds.length > 0) for (const blockId of sortedRemovedCustomBlockIds) {
+				const drawing = drawings[blockId];
+				const drawingIndex = drawingOrder.indexOf(blockId);
+				if (drawing == null || drawingIndex < 0) continue;
+				const removeDrawingAction = jsonX.removeOp(["drawings", blockId], drawing);
+				const removeDrawingOrderAction = jsonX.removeOp(["drawingsOrder", drawingIndex], blockId);
+				rawActions.push(removeDrawingAction);
+				rawActions.push(removeDrawingOrderAction);
+				removeDrawingLen++;
+			}
+		}
+		textX.push({
+			t: _univerjs_core.TextXActionType.INSERT,
+			body: {
+				dataStream: "\b".repeat(drawings.length),
+				customBlocks: drawings.map((drawing, i) => ({
+					startIndex: i,
+					blockId: drawing.drawingId
+				}))
+			},
+			len: drawings.length
+		});
+		const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		const placeHolderAction = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(placeHolderAction);
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const addDrawingAction = jsonX.insertOp(["drawings", drawingId], drawing);
+			const addDrawingOrderAction = jsonX.insertOp(["drawingsOrder", drawingOrderLength - removeDrawingLen], drawingId);
+			rawActions.push(addDrawingAction);
+			rawActions.push(addDrawingOrderAction);
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: []
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+
+//#endregion
+//#region src/commands/commands/set-drawing-arrange.command.ts
+/**
+* The command to arrange drawings.
+*/
+const SetDocDrawingArrangeCommand = {
+	id: "doc.command.set-drawing-arrange",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docDrawingService = accessor.get(_univerjs_docs_drawing.IDocDrawingService);
+		if (params == null) return false;
+		const { unitId, subUnitId, drawingIds, arrangeType } = params;
+		const drawingOrderMapParam = {
+			unitId,
+			subUnitId,
+			drawingIds
+		};
+		let jsonOp;
+		if (arrangeType === _univerjs_core.ArrangeTypeEnum.forward) jsonOp = docDrawingService.getForwardDrawingsOp(drawingOrderMapParam);
+		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.backward) jsonOp = docDrawingService.getBackwardDrawingOp(drawingOrderMapParam);
+		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.front) jsonOp = docDrawingService.getFrontDrawingsOp(drawingOrderMapParam);
+		else if (arrangeType === _univerjs_core.ArrangeTypeEnum.back) jsonOp = docDrawingService.getBackDrawingsOp(drawingOrderMapParam);
+		if (jsonOp == null) return false;
+		const { redo } = jsonOp;
+		if (redo == null) return false;
+		const rawActions = [];
+		let redoCopy = _univerjs_core.Tools.deepClone(redo);
+		redoCopy = redoCopy.slice(3);
+		redoCopy.unshift("drawingsOrder");
+		rawActions.push(redoCopy);
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+
+//#endregion
+//#region src/commands/commands/ungroup-doc-drawing.command.ts
+/**
+* The command to insert new defined name
+*/
+const UngroupDocDrawingCommand = {
+	id: "doc.command.ungroup-doc-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		const docDrawingService = accessor.get(_univerjs_docs_drawing.IDocDrawingService);
+		if (!params) return false;
+		const unitIds = [];
+		params.forEach(({ parent, children }) => {
+			unitIds.push(parent.unitId);
+			children.forEach((child) => {
+				unitIds.push(child.unitId);
+			});
+		});
+		const { unitId, subUnitId, undo, redo, objects } = docDrawingService.getUngroupDrawingOp(params);
+		return false;
+	}
+};
+
+//#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/services/doc-refresh-drawings.service.ts
+var DocRefreshDrawingsService = class {
+	constructor() {
+		_defineProperty(this, "_refreshDrawings$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "refreshDrawings$", this._refreshDrawings$.asObservable());
+	}
+	refreshDrawings(skeleton) {
+		this._refreshDrawings$.next(skeleton);
+	}
+};
+
+//#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/render-controllers/doc-drawing-update.render-controller.ts
+let DocDrawingUpdateRenderController = class DocDrawingUpdateRenderController extends _univerjs_core.Disposable {
+	constructor(_context, _commandService, _docSelectionManagerService, _renderManagerSrv, _imageIoService, _docDrawingService, _drawingManagerService, _contextService, _messageService, _localeService, _docSelectionRenderService, _docRefreshDrawingsService, _fileOpenerService) {
+		super();
+		this._context = _context;
+		this._commandService = _commandService;
+		this._docSelectionManagerService = _docSelectionManagerService;
+		this._renderManagerSrv = _renderManagerSrv;
+		this._imageIoService = _imageIoService;
+		this._docDrawingService = _docDrawingService;
+		this._drawingManagerService = _drawingManagerService;
+		this._contextService = _contextService;
+		this._messageService = _messageService;
+		this._localeService = _localeService;
+		this._docSelectionRenderService = _docSelectionRenderService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
+		this._fileOpenerService = _fileOpenerService;
+		this._updateOrderListener();
+		this._groupDrawingListener();
+		this._focusDrawingListener();
+		this._transformDrawingListener();
+		this._editAreaChangeListener();
+	}
+	dispose() {
+		super.dispose();
+		delete this._context;
+	}
+	async insertDocImage() {
+		const files = await this._fileOpenerService.openFile({
+			multiple: true,
+			accept: _univerjs_drawing.DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
+		});
+		const fileLength = files.length;
+		if (fileLength > _univerjs_drawing.DRAWING_IMAGE_COUNT_LIMIT) {
+			this._messageService.show({
+				type: _univerjs_design.MessageType.Error,
+				content: this._localeService.t("update-status.exceedMaxCount", String(_univerjs_drawing.DRAWING_IMAGE_COUNT_LIMIT))
+			});
+			return false;
+		} else if (fileLength === 0) return false;
+		await this._insertFloatImages(files);
+		return true;
+	}
+	async _insertFloatImages(files) {
+		let imageParams = [];
+		try {
+			imageParams = await Promise.all(files.map((file) => this._imageIoService.saveImage(file)));
+		} catch (error) {
+			const type = error.message;
+			let content = "";
+			switch (type) {
+				case _univerjs_drawing.ImageUploadStatusType.ERROR_EXCEED_SIZE:
+					content = this._localeService.t("update-status.exceedMaxSize", String(_univerjs_drawing.DRAWING_IMAGE_ALLOW_SIZE / (1024 * 1024)));
+					break;
+				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE_TYPE:
+					content = this._localeService.t("update-status.invalidImageType");
+					break;
+				case _univerjs_drawing.ImageUploadStatusType.ERROR_IMAGE:
+					content = this._localeService.t("update-status.invalidImage");
+					break;
+				default: break;
+			}
+			this._messageService.show({
+				type: _univerjs_design.MessageType.Error,
+				content
+			});
+		}
+		if (imageParams.length === 0) return;
+		const { unitId } = this._context;
+		const docDrawingParams = [];
+		for (const imageParam of imageParams) {
+			if (imageParam == null) continue;
+			const { imageId, imageSourceType, source, base64Cache } = imageParam;
+			const { width, height, image } = await (0, _univerjs_drawing.getImageSize)(base64Cache || "");
+			this._imageIoService.addImageSourceCache(imageId, imageSourceType, image);
+			let scale = 1;
+			if (width > _univerjs_drawing.DRAWING_IMAGE_WIDTH_LIMIT || height > _univerjs_drawing.DRAWING_IMAGE_HEIGHT_LIMIT) {
+				const scaleWidth = _univerjs_drawing.DRAWING_IMAGE_WIDTH_LIMIT / width;
+				const scaleHeight = _univerjs_drawing.DRAWING_IMAGE_HEIGHT_LIMIT / height;
+				scale = Math.min(scaleWidth, scaleHeight);
+			}
+			const docTransform = this._getImagePosition(width * scale, height * scale);
+			if (docTransform == null) return;
+			const docDrawingParam = {
+				unitId,
+				subUnitId: unitId,
+				drawingId: imageId,
+				drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_IMAGE,
+				imageSourceType,
+				source,
+				transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform),
+				docTransform,
+				behindDoc: _univerjs_core.BooleanNumber.FALSE,
+				title: "",
+				description: "",
+				layoutType: _univerjs_core.PositionedObjectLayoutType.INLINE,
+				wrapText: _univerjs_core.WrapTextType.BOTH_SIDES,
+				distB: 0,
+				distL: 0,
+				distR: 0,
+				distT: 0
+			};
+			if (this._isInsertInHeaderFooter()) {
+				docDrawingParam.isMultiTransform = _univerjs_core.BooleanNumber.TRUE;
+				docDrawingParam.transforms = docDrawingParam.transform ? [docDrawingParam.transform] : null;
+			}
+			docDrawingParams.push(docDrawingParam);
+		}
+		this._commandService.executeCommand(InsertDocDrawingCommand.id, {
+			unitId,
+			drawings: docDrawingParams
+		});
+	}
+	_isInsertInHeaderFooter() {
+		var _this$_renderManagerS;
+		const { unitId } = this._context;
+		const viewModel = (_this$_renderManagerS = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
+		const editArea = viewModel === null || viewModel === void 0 ? void 0 : viewModel.getEditArea();
+		return editArea === _univerjs_engine_render.DocumentEditArea.HEADER || editArea === _univerjs_engine_render.DocumentEditArea.FOOTER;
+	}
+	_getImagePosition(imageWidth, imageHeight) {
+		const activeTextRange = this._docSelectionRenderService.getActiveTextRange();
+		const position = (activeTextRange === null || activeTextRange === void 0 ? void 0 : activeTextRange.getAbsolutePosition()) || {
+			left: 0,
+			top: 0
+		};
+		return {
+			size: {
+				width: imageWidth,
+				height: imageHeight
+			},
+			positionH: {
+				relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
+				posOffset: position.left
+			},
+			positionV: {
+				relativeFrom: _univerjs_core.ObjectRelativeFromV.PARAGRAPH,
+				posOffset: 0
+			},
+			angle: 0
+		};
+	}
+	_updateOrderListener() {
+		this.disposeWithMe(this._drawingManagerService.featurePluginOrderUpdate$.subscribe((params) => {
+			const { unitId, subUnitId, drawingIds, arrangeType } = params;
+			this._commandService.executeCommand(SetDocDrawingArrangeCommand.id, {
+				unitId,
+				subUnitId,
+				drawingIds,
+				arrangeType
+			});
+		}));
+	}
+	_groupDrawingListener() {
+		this.disposeWithMe(this._drawingManagerService.featurePluginGroupUpdate$.subscribe((params) => {
+			this._commandService.executeCommand(GroupDocDrawingCommand.id, params);
+		}));
+		this.disposeWithMe(this._drawingManagerService.featurePluginUngroupUpdate$.subscribe((params) => {
+			this._commandService.executeCommand(UngroupDocDrawingCommand.id, params);
+		}));
+	}
+	_getCurrentSceneAndTransformer() {
+		const { scene, mainComponent } = this._context;
+		if (scene == null || mainComponent == null) return;
+		const transformer = scene.getTransformerByCreate();
+		const { docsLeft, docsTop } = mainComponent.getOffsetConfig();
+		return {
+			scene,
+			transformer,
+			docsLeft,
+			docsTop
+		};
+	}
+	_transformDrawingListener() {
+		const res = this._getCurrentSceneAndTransformer();
+		if (res && res.transformer) this.disposeWithMe(res.transformer.changeEnd$.pipe((0, rxjs.debounceTime)(30)).subscribe((params) => {
+			this._docSelectionManagerService.refreshSelection();
+		}));
+		else throw new Error("transformer is not init");
+	}
+	_focusDrawingListener() {
+		this.disposeWithMe(this._drawingManagerService.focus$.subscribe((params) => {
+			var _this$_getCurrentScen;
+			const { transformer, docsLeft, docsTop } = (_this$_getCurrentScen = this._getCurrentSceneAndTransformer()) !== null && _this$_getCurrentScen !== void 0 ? _this$_getCurrentScen : {};
+			if (params == null || params.length === 0) {
+				this._contextService.setContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS, false);
+				this._docDrawingService.focusDrawing([]);
+				if (transformer) transformer.resetProps({
+					zeroTop: 0,
+					zeroLeft: 0
+				});
+			} else {
+				this._contextService.setContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS, true);
+				this._docDrawingService.focusDrawing(params);
+				this._setDrawingSelections(params);
+				const prevSegmentId = this._docSelectionRenderService.getSegment();
+				const segmentId = this._findSegmentIdByDrawingId(params[0].drawingId);
+				if (prevSegmentId !== segmentId) this._docSelectionRenderService.setSegment(segmentId);
+				if (transformer) transformer.resetProps({
+					zeroTop: docsTop,
+					zeroLeft: docsLeft
+				});
+			}
+		}));
+	}
+	_findSegmentIdByDrawingId(drawingId) {
+		var _body$customBlocks;
+		const { unit: DocDataModel } = this._context;
+		const { body, headers = {}, footers = {} } = DocDataModel.getSnapshot();
+		if (((_body$customBlocks = body === null || body === void 0 ? void 0 : body.customBlocks) !== null && _body$customBlocks !== void 0 ? _body$customBlocks : []).some((b) => b.blockId === drawingId)) return "";
+		for (const headerId of Object.keys(headers)) {
+			var _headers$headerId$bod;
+			if ((_headers$headerId$bod = headers[headerId].body.customBlocks) === null || _headers$headerId$bod === void 0 ? void 0 : _headers$headerId$bod.some((b) => b.blockId === drawingId)) return headerId;
+		}
+		for (const footerId of Object.keys(footers)) {
+			var _footers$footerId$bod;
+			if ((_footers$footerId$bod = footers[footerId].body.customBlocks) === null || _footers$footerId$bod === void 0 ? void 0 : _footers$footerId$bod.some((b) => b.blockId === drawingId)) return footerId;
+		}
+		return "";
+	}
+	_updateDrawingsEditStatus() {
+		var _this$_renderManagerS2;
+		if (!this._context) return;
+		const { unit: docDataModel, scene, unitId } = this._context;
+		const viewModel = (_this$_renderManagerS2 = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
+		if (viewModel == null || docDataModel == null) return;
+		const { drawings = {} } = docDataModel.getSnapshot();
+		const isEditBody = viewModel.getEditArea() === _univerjs_engine_render.DocumentEditArea.BODY;
+		for (const key of Object.keys(drawings)) {
+			const drawing = drawings[key];
+			const objectKey = (0, _univerjs_drawing.getDrawingShapeKeyByDrawingSearch)({
+				unitId,
+				drawingId: drawing.drawingId,
+				subUnitId: unitId
+			});
+			const drawingShapes = scene.fuzzyMathObjects(objectKey, true);
+			if (drawingShapes.length) for (const shape of drawingShapes) {
+				scene.detachTransformerFrom(shape);
+				try {
+					shape.setOpacity(.5);
+				} catch (e) {}
+				if (isEditBody && drawing.isMultiTransform !== _univerjs_core.BooleanNumber.TRUE || !isEditBody && drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE) {
+					if (drawing.allowTransform !== false) scene.attachTransformerTo(shape);
+					try {
+						shape.setOpacity(1);
+					} catch (e) {}
+				}
+			}
+		}
+	}
+	_editAreaChangeListener() {
+		var _this$_renderManagerS3;
+		const { unitId } = this._context;
+		const viewModel = (_this$_renderManagerS3 = this._renderManagerSrv.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 ? void 0 : _this$_renderManagerS3.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
+		if (viewModel == null) return;
+		this._updateDrawingsEditStatus();
+		this.disposeWithMe(viewModel.editAreaChange$.subscribe(() => {
+			this._updateDrawingsEditStatus();
+		}));
+		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+			if (skeleton == null) return;
+			queueMicrotask(() => {
+				this._updateDrawingsEditStatus();
+			});
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted(async (command) => {
+			if (command.id === _univerjs_docs.RichTextEditingMutation.id) queueMicrotask(() => {
+				this._updateDrawingsEditStatus();
+			});
+		}));
+	}
+	_setDrawingSelections(params) {
+		var _unit$getSnapshot$bod, _unit$getSnapshot$bod2;
+		const { unit } = this._context;
+		const customBlocks = (_unit$getSnapshot$bod = (_unit$getSnapshot$bod2 = unit.getSnapshot().body) === null || _unit$getSnapshot$bod2 === void 0 ? void 0 : _unit$getSnapshot$bod2.customBlocks) !== null && _unit$getSnapshot$bod !== void 0 ? _unit$getSnapshot$bod : [];
+		const ranges = params.map((item) => {
+			const id = item.drawingId;
+			const block = customBlocks.find((b) => b.blockId === id);
+			if (block) return block.startIndex;
+			return null;
+		}).filter((e) => e !== null).map((offset) => ({
+			startOffset: offset,
+			endOffset: offset + 1
+		}));
+		this._docSelectionManagerService.replaceDocRanges(ranges);
+	}
+};
+DocDrawingUpdateRenderController = __decorate([
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(4, _univerjs_drawing.IImageIoService),
+	__decorateParam(5, _univerjs_docs_drawing.IDocDrawingService),
+	__decorateParam(6, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(7, _univerjs_core.IContextService),
+	__decorateParam(8, _univerjs_ui.IMessageService),
+	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocSelectionRenderService)),
+	__decorateParam(11, (0, _univerjs_core.Inject)(DocRefreshDrawingsService)),
+	__decorateParam(12, _univerjs_ui.ILocalFileService)
+], DocDrawingUpdateRenderController);
+
+//#endregion
+//#region src/commands/commands/insert-image.command.ts
+const InsertDocImageCommand = {
+	id: "doc.command.insert-float-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor) => {
+		var _getCurrentTypeOfRend, _getCurrentTypeOfRend2;
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		return (_getCurrentTypeOfRend = (_getCurrentTypeOfRend2 = (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_DOC, univerInstanceService, renderManagerService)) === null || _getCurrentTypeOfRend2 === void 0 ? void 0 : _getCurrentTypeOfRend2.with(DocDrawingUpdateRenderController).insertDocImage()) !== null && _getCurrentTypeOfRend !== void 0 ? _getCurrentTypeOfRend : false;
+	}
+};
+
+//#endregion
+//#region src/commands/commands/update-doc-drawing.command.ts
+let TextWrappingStyle = /* @__PURE__ */ function(TextWrappingStyle) {
+	TextWrappingStyle["INLINE"] = "inline";
+	TextWrappingStyle["BEHIND_TEXT"] = "behindText";
+	TextWrappingStyle["IN_FRONT_OF_TEXT"] = "inFrontOfText";
+	TextWrappingStyle["WRAP_SQUARE"] = "wrapSquare";
+	TextWrappingStyle["WRAP_TOP_AND_BOTTOM"] = "wrapTopAndBottom";
+	return TextWrappingStyle;
+}({});
+const WRAPPING_STYLE_TO_LAYOUT_TYPE = {
+	[TextWrappingStyle.INLINE]: _univerjs_core.PositionedObjectLayoutType.INLINE,
+	[TextWrappingStyle.WRAP_SQUARE]: _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE,
+	[TextWrappingStyle.WRAP_TOP_AND_BOTTOM]: _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM,
+	[TextWrappingStyle.IN_FRONT_OF_TEXT]: _univerjs_core.PositionedObjectLayoutType.WRAP_NONE,
+	[TextWrappingStyle.BEHIND_TEXT]: _univerjs_core.PositionedObjectLayoutType.WRAP_NONE
+};
+function getDeleteAndInsertCustomBlockActions(segmentId, oldSegmentId, segmentPage, offset, drawingId, documentDataModel, docSelectionRenderManager) {
+	var _oldBody$customBlocks;
+	const textX = new _univerjs_core.TextX();
+	const jsonX = _univerjs_core.JSONX.getInstance();
+	const rawActions = [];
+	const oldBody = documentDataModel.getSelfOrHeaderFooterModel(oldSegmentId).getBody();
+	const body = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody();
+	if (oldBody == null || body == null) return;
+	const oldOffset = (_oldBody$customBlocks = oldBody.customBlocks) === null || _oldBody$customBlocks === void 0 || (_oldBody$customBlocks = _oldBody$customBlocks.find((block) => block.blockId === drawingId)) === null || _oldBody$customBlocks === void 0 ? void 0 : _oldBody$customBlocks.startIndex;
+	if (oldOffset == null) return;
+	offset = Math.min(body.dataStream.length - 2, offset);
+	if (segmentId === oldSegmentId) {
+		if (offset < oldOffset) {
+			if (offset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset - offset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+		} else {
+			if (oldOffset > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: oldOffset
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.DELETE,
+				len: 1
+			});
+			if (offset - oldOffset - 1 > 0) textX.push({
+				t: _univerjs_core.TextXActionType.RETAIN,
+				len: offset - oldOffset - 1
+			});
+			textX.push({
+				t: _univerjs_core.TextXActionType.INSERT,
+				body: {
+					dataStream: "\b",
+					customBlocks: [{
+						startIndex: 0,
+						blockId: drawingId
+					}]
+				},
+				len: 1
+			});
+		}
+		if (offset !== oldOffset) {
+			const path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, oldSegmentId);
+			const action = jsonX.editOp(textX.serialize(), path);
+			rawActions.push(action);
+		}
+	} else {
+		if (oldOffset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: oldOffset
+		});
+		textX.push({
+			t: _univerjs_core.TextXActionType.DELETE,
+			len: 1
+		});
+		let path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, oldSegmentId);
+		let action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		textX.empty();
+		if (offset > 0) textX.push({
+			t: _univerjs_core.TextXActionType.RETAIN,
+			len: offset
+		});
+		textX.push({
+			t: _univerjs_core.TextXActionType.INSERT,
+			body: {
+				dataStream: "\b",
+				customBlocks: [{
+					startIndex: 0,
+					blockId: drawingId
+				}]
+			},
+			len: 1
+		});
+		path = (0, _univerjs_docs_ui.getRichTextEditPath)(documentDataModel, segmentId);
+		action = jsonX.editOp(textX.serialize(), path);
+		rawActions.push(action);
+		docSelectionRenderManager.setSegment(segmentId);
+		docSelectionRenderManager.setSegmentPage(segmentPage);
+	}
+	return rawActions;
+}
+/**
+* The command to update drawing wrapping style.
+*/
+const UpdateDocDrawingWrappingStyleCommand = {
+	id: "doc.command.update-doc-drawing-wrapping-style",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const { drawings, wrappingStyle, unitId } = params;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const renderObject = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderById(unitId);
+		const skeletonData = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton().getSkeletonData();
+		const viewModel = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		if (documentDataModel == null || skeletonData == null || scene == null || viewModel == null) return false;
+		const editArea = viewModel.getEditArea();
+		const transformer = scene.getTransformerByCreate();
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const oldLayoutType = oldDrawings[drawingId].layoutType;
+			const newLayoutType = WRAPPING_STYLE_TO_LAYOUT_TYPE[wrappingStyle];
+			if (oldLayoutType !== newLayoutType) {
+				const updateLayoutTypeAction = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"layoutType"
+				], oldLayoutType, newLayoutType);
+				rawActions.push(updateLayoutTypeAction);
+			}
+			if (wrappingStyle === TextWrappingStyle.BEHIND_TEXT || wrappingStyle === TextWrappingStyle.IN_FRONT_OF_TEXT) {
+				const oldBehindDoc = oldDrawings[drawingId].behindDoc;
+				const newBehindDoc = wrappingStyle === TextWrappingStyle.BEHIND_TEXT ? _univerjs_core.BooleanNumber.TRUE : _univerjs_core.BooleanNumber.FALSE;
+				if (oldBehindDoc !== newBehindDoc) {
+					const updateBehindDocAction = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						"behindDoc"
+					], oldBehindDoc, newBehindDoc);
+					rawActions.push(updateBehindDocAction);
+				}
+			}
+			if (wrappingStyle === TextWrappingStyle.INLINE) continue;
+			let skeDrawing = null;
+			let pageMarginTop = 0;
+			let pageMarginLeft = 0;
+			for (const page of pages) {
+				const { headerId, footerId, marginTop, marginLeft, marginBottom, pageWidth, pageHeight } = page;
+				switch (editArea) {
+					case _univerjs_engine_render.DocumentEditArea.HEADER: {
+						var _skeHeaders$get;
+						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+						if (headerSke != null && headerSke.skeDrawings.has(drawingId)) {
+							skeDrawing = headerSke.skeDrawings.get(drawingId);
+							pageMarginTop = headerSke.marginTop;
+							pageMarginLeft = marginLeft;
+						}
+						break;
+					}
+					case _univerjs_engine_render.DocumentEditArea.FOOTER: {
+						var _skeFooters$get;
+						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+						if (footerSke != null && footerSke.skeDrawings.has(drawingId)) {
+							skeDrawing = footerSke.skeDrawings.get(drawingId);
+							pageMarginTop = pageHeight - marginBottom + footerSke.marginTop;
+							pageMarginLeft = marginLeft;
+						}
+						break;
+					}
+					case _univerjs_engine_render.DocumentEditArea.BODY:
+						if (page.skeDrawings.has(drawingId)) {
+							skeDrawing = page.skeDrawings.get(drawingId);
+							pageMarginTop = marginTop;
+							pageMarginLeft = marginLeft;
+						}
+						break;
+				}
+				if (skeDrawing != null) break;
+			}
+			if (skeDrawing != null) {
+				const { aTop, aLeft } = skeDrawing;
+				const oldPositionH = oldDrawings[drawingId].docTransform.positionH;
+				let posOffsetH = aLeft;
+				if (oldPositionH.relativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) posOffsetH -= pageMarginLeft;
+				else if (oldPositionH.relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) posOffsetH -= skeDrawing.columnLeft;
+				const newPositionH = {
+					relativeFrom: oldPositionH.relativeFrom,
+					posOffset: posOffsetH
+				};
+				if (oldPositionH.posOffset !== newPositionH.posOffset) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						"docTransform",
+						"positionH"
+					], oldPositionH, newPositionH);
+					rawActions.push(action);
+				}
+				const oldPositionV = oldDrawings[drawingId].docTransform.positionV;
+				let posOffsetV = aTop;
+				if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) posOffsetV += pageMarginTop;
+				else if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) posOffsetV -= skeDrawing.lineTop;
+				else if (oldPositionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) posOffsetV -= skeDrawing.blockAnchorTop;
+				const newPositionV = {
+					relativeFrom: oldPositionV.relativeFrom,
+					posOffset: posOffsetV
+				};
+				if (oldPositionV.posOffset !== newPositionV.posOffset) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						"docTransform",
+						"positionV"
+					], oldPositionV, newPositionV);
+					rawActions.push(action);
+				}
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingDistanceCommand = {
+	id: "doc.command.update-doc-drawing-distance",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUniverDocInstance();
+		if (documentDataModel == null) return false;
+		const { drawings, dist, unitId } = params;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			for (const [key, value] of Object.entries(dist)) {
+				const oldValue = oldDrawings[drawingId][key];
+				if (oldValue !== value) {
+					const action = jsonX.replaceOp([
+						"drawings",
+						drawingId,
+						key
+					], oldValue, value);
+					rawActions.push(action);
+				}
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to update drawing wrap text.
+*/
+const UpdateDocDrawingWrapTextCommand = {
+	id: "doc.command.update-doc-drawing-wrap-text",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUniverDocInstance();
+		if (documentDataModel == null) return false;
+		const { drawings, wrapText, unitId } = params;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId } = drawing;
+			const oldWrapText = oldDrawings[drawingId].wrapText;
+			if (oldWrapText !== wrapText) {
+				const action = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"wrapText"
+				], oldWrapText, wrapText);
+				rawActions.push(action);
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		return Boolean(result);
+	}
+};
+/**
+* The command to update drawing position.
+*/
+const UpdateDrawingDocTransformCommand = {
+	id: "doc.command.update-drawing-doc-transform",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		if (params == null) return false;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const renderObject = accessor.get(_univerjs_engine_render.IRenderManagerService).getRenderById(params.unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const documentDataModel = univerInstanceService.getCurrentUniverDocInstance();
+		if (documentDataModel == null) return false;
+		const { drawings, unitId } = params;
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const rawActions = [];
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		for (const drawing of drawings) {
+			const { drawingId, key, value } = drawing;
+			const oldValue = oldDrawings[drawingId].docTransform[key];
+			if (!_univerjs_core.Tools.diffValue(oldValue, value)) {
+				const action = jsonX.replaceOp([
+					"drawings",
+					drawingId,
+					"docTransform",
+					key
+				], oldValue, value);
+				rawActions.push(action);
+			}
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+/**
+* The command to move inline drawing.
+*/
+const IMoveInlineDrawingCommand = {
+	id: "doc.command.move-inline-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService, _docSelectionRenderSe;
+		if (params == null) return false;
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(params.unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const docRefreshDrawingsService = accessor.get(DocRefreshDrawingsService);
+		const renderObject = renderManagerService.getRenderById(params.unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		const skeleton = renderObject === null || renderObject === void 0 ? void 0 : renderObject.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUniverDocInstance();
+		if (documentDataModel == null) return false;
+		const { drawing, unitId, offset, segmentId: newSegmentId, segmentPage, needRefreshDrawings } = params;
+		if (needRefreshDrawings) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return true;
+		}
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe !== void 0 ? _docSelectionRenderSe : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null || actions.length === 0) {
+			docRefreshDrawingsService.refreshDrawings(skeleton);
+			transformer.refreshControls();
+			return false;
+		}
+		rawActions.push(...actions);
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+/**
+* The command to transform non-inline drawing.
+*/
+const ITransformNonInlineDrawingCommand = {
+	id: "doc.command.transform-non-inline-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		var _renderManagerService2, _docSelectionRenderSe2;
+		if (params == null) return false;
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const docSelectionRenderService = (_renderManagerService2 = renderManagerService.getRenderById(params.unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const renderObject = renderManagerService.getRenderById(params.unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null || docSelectionRenderService == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const documentDataModel = accessor.get(_univerjs_core.IUniverInstanceService).getCurrentUniverDocInstance();
+		if (documentDataModel == null) return false;
+		const { drawing, unitId, offset, docTransform, segmentId: newSegmentId, segmentPage } = params;
+		const rawActions = [];
+		const { drawingId } = drawing;
+		const actions = getDeleteAndInsertCustomBlockActions(newSegmentId, (_docSelectionRenderSe2 = docSelectionRenderService.getSegment()) !== null && _docSelectionRenderSe2 !== void 0 ? _docSelectionRenderSe2 : "", segmentPage, offset, drawingId, documentDataModel, docSelectionRenderService);
+		if (actions == null) return false;
+		if (actions.length > 0) rawActions.push(...actions);
+		const jsonX = _univerjs_core.JSONX.getInstance();
+		const { drawings: oldDrawings = {} } = documentDataModel.getSnapshot();
+		const { positionH: oldPositionH, positionV: oldPositionV, size: oldSize, angle: oldAngle } = oldDrawings[drawingId].docTransform;
+		if (!_univerjs_core.Tools.diffValue(oldPositionH, docTransform.positionH)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionH"
+			], oldPositionH, docTransform.positionH);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldPositionV, docTransform.positionV)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"positionV"
+			], oldPositionV, docTransform.positionV);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldSize, docTransform.size)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"size"
+			], oldSize, docTransform.size);
+			rawActions.push(updateAction);
+		}
+		if (!_univerjs_core.Tools.diffValue(oldAngle, docTransform.angle)) {
+			const updateAction = jsonX.replaceOp([
+				"drawings",
+				drawingId,
+				"docTransform",
+				"angle"
+			], oldAngle, docTransform.angle);
+			rawActions.push(updateAction);
+		}
+		const doMutation = {
+			id: _univerjs_docs.RichTextEditingMutation.id,
+			params: {
+				unitId,
+				actions: [],
+				textRanges: null,
+				debounce: true
+			}
+		};
+		doMutation.params.actions = rawActions.reduce((acc, cur) => {
+			return _univerjs_core.JSONX.compose(acc, cur);
+		}, null);
+		const result = commandService.syncExecuteCommand(doMutation.id, doMutation.params);
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+
+//#endregion
+//#region src/commands/commands/move-drawings.command.ts
+const MoveDocDrawingsCommand = {
+	id: "doc.command.move-drawing",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: (accessor, params) => {
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const docDrawingService = accessor.get(_univerjs_docs_drawing.IDocDrawingService);
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		const { direction } = params;
+		const drawings = docDrawingService.getFocusDrawings();
+		if (drawings.length === 0) return false;
+		const unitId = drawings[0].unitId;
+		const renderObject = renderManagerService.getRenderById(unitId);
+		const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+		if (scene == null) return false;
+		const transformer = scene.getTransformerByCreate();
+		const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+		const newDrawings = drawings.map((drawing) => {
+			var _documentDataModel$ge;
+			const { drawingId } = drawing;
+			const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingId];
+			if (drawingData == null || drawingData.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) return null;
+			const { positionH, positionV } = drawingData.docTransform;
+			const newPositionH = { ...positionH };
+			const newPositionV = { ...positionV };
+			if (direction === _univerjs_core.Direction.UP) {
+				var _newPositionV$posOffs;
+				newPositionV.posOffset = ((_newPositionV$posOffs = newPositionV.posOffset) !== null && _newPositionV$posOffs !== void 0 ? _newPositionV$posOffs : 0) - 2;
+			} else if (direction === _univerjs_core.Direction.DOWN) {
+				var _newPositionV$posOffs2;
+				newPositionV.posOffset = ((_newPositionV$posOffs2 = newPositionV.posOffset) !== null && _newPositionV$posOffs2 !== void 0 ? _newPositionV$posOffs2 : 0) + 2;
+			} else if (direction === _univerjs_core.Direction.LEFT) {
+				var _newPositionH$posOffs;
+				newPositionH.posOffset = ((_newPositionH$posOffs = newPositionH.posOffset) !== null && _newPositionH$posOffs !== void 0 ? _newPositionH$posOffs : 0) - 2;
+			} else if (direction === _univerjs_core.Direction.RIGHT) {
+				var _newPositionH$posOffs2;
+				newPositionH.posOffset = ((_newPositionH$posOffs2 = newPositionH.posOffset) !== null && _newPositionH$posOffs2 !== void 0 ? _newPositionH$posOffs2 : 0) + 2;
+			}
+			return {
+				drawingId,
+				key: direction === _univerjs_core.Direction.UP || direction === _univerjs_core.Direction.DOWN ? "positionV" : "positionH",
+				value: direction === _univerjs_core.Direction.UP || direction === _univerjs_core.Direction.DOWN ? newPositionV : newPositionH
+			};
+		}).filter((drawing) => drawing != null);
+		if (newDrawings.length === 0) return false;
+		const result = commandService.syncExecuteCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId,
+			subUnitId: unitId,
+			drawings: newDrawings
+		});
+		transformer.refreshControls();
+		return Boolean(result);
+	}
+};
+
+//#endregion
+//#region src/commands/operations/clear-drawing-transformer.operation.ts
+const ClearDocDrawingTransformerOperation = {
+	id: "doc.operation.clear-drawing-transformer",
+	type: _univerjs_core.CommandType.MUTATION,
+	handler: (accessor, params) => {
+		const renderManagerService = accessor.get(_univerjs_engine_render.IRenderManagerService);
+		params.forEach((unitId) => {
+			var _renderManagerService;
+			(_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 || (_renderManagerService = _renderManagerService.scene.getTransformer()) === null || _renderManagerService === void 0 || _renderManagerService.debounceRefreshControls();
+		});
+		return true;
+	}
+};
+
+//#endregion
+//#region src/views/doc-image-panel/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_DOC_DRAWING_PANEL = "COMPONENT_DOC_DRAWING_PANEL";
+
+//#endregion
+//#region src/commands/operations/open-drawing-panel.operation.ts
+const SidebarDocDrawingOperation = {
+	id: "sidebar.operation.doc-image",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor, params) => {
+		const sidebarService = accessor.get(_univerjs_ui.ISidebarService);
+		const localeService = accessor.get(_univerjs_core.LocaleService);
+		const drawingManagerService = accessor.get(_univerjs_drawing.IDrawingManagerService);
+		switch (params.value) {
+			case "open":
+				sidebarService.open({
+					header: { title: localeService.t("docImage.panel.title") },
+					children: { label: COMPONENT_DOC_DRAWING_PANEL },
+					onClose: () => {
+						drawingManagerService.focusDrawing(null);
+					},
+					width: 360
+				});
+				break;
+			default:
+				sidebarService.close();
+				break;
+		}
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/edit-doc-drawing.operation.ts
+const EditDocDrawingOperation = {
+	id: "doc.operation.edit-doc-image",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const drawingManagerService = accessor.get(_univerjs_drawing.IDrawingManagerService);
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		if (params == null) return false;
+		drawingManagerService.focusDrawing([params]);
+		commandService.executeCommand(SidebarDocDrawingOperation.id, { value: "open" });
+		return true;
+	}
+};
+
+//#endregion
+//#region src/controllers/doc-float-dom.controller.ts
+function calcDocFloatDomPositionByRect(rect, scene, opacity = 1, angle = 0) {
+	const { top, left, bottom, right } = rect;
+	const width = right - left;
+	const height = bottom - top;
+	const { viewportScrollX, viewportScrollY } = scene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN);
+	const { scaleX, scaleY } = scene.getAncestorScale();
+	return {
+		startX: (left - viewportScrollX) * scaleX,
+		startY: (top - viewportScrollY) * scaleY,
+		endX: (left + width - viewportScrollX) * scaleX,
+		endY: (top + height - viewportScrollY) * scaleY,
+		width: width * scaleX,
+		height: height * scaleY,
+		rotate: angle,
+		absolute: {
+			left: false,
+			top: false
+		},
+		opacity: opacity !== null && opacity !== void 0 ? opacity : 1
+	};
+}
+function calcDocFloatDomPosition(object, renderUnit) {
+	const { top, left, width, height, angle, opacity } = object;
+	return calcDocFloatDomPositionByRect({
+		top,
+		left,
+		bottom: top + height,
+		right: left + width
+	}, renderUnit.scene, opacity, angle);
+}
+let DocFloatDomController = class DocFloatDomController extends _univerjs_core.Disposable {
+	constructor(_renderManagerService, _drawingManagerService, _drawingRenderService, _canvasFloatDomService, _univerInstanceService, _commandService) {
+		super();
+		this._renderManagerService = _renderManagerService;
+		this._drawingManagerService = _drawingManagerService;
+		this._drawingRenderService = _drawingRenderService;
+		this._canvasFloatDomService = _canvasFloatDomService;
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		_defineProperty(this, "_domLayerInfoMap", /* @__PURE__ */ new Map());
+		this._initialize();
+	}
+	dispose() {
+		super.dispose();
+	}
+	_initialize() {
+		this._drawingAddRemoveListener();
+		this._initScrollAndZoomEvent();
+	}
+	_getSceneAndTransformerByDrawingSearch(unitId) {
+		if (unitId == null) return;
+		const renderObject = this._renderManagerService.getRenderById(unitId);
+		if (renderObject == null) return null;
+		const scene = renderObject.scene;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate(),
+			renderUnit: renderObject,
+			canvas: renderObject.engine.getCanvasElement()
+		};
+	}
+	_drawingAddRemoveListener() {
+		this.disposeWithMe(this._drawingManagerService.add$.subscribe((params) => {
+			this._insertRects(params);
+		}));
+		this.disposeWithMe(this._drawingManagerService.remove$.subscribe((params) => {
+			params.forEach((param) => {
+				this._removeDom(param.drawingId);
+			});
+		}));
+	}
+	_insertRects(params) {
+		params.forEach(async (param) => {
+			const { unitId } = param;
+			if (!this._univerInstanceService.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_DOC)) return;
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (renderObject == null) return;
+			const rectParam = this._drawingManagerService.getDrawingByParam(param);
+			if (rectParam == null) return;
+			const rects = await this._drawingRenderService.renderFloatDom(rectParam, renderObject.scene);
+			if (rects == null || rects.length === 0) return;
+			for (const rect of rects) {
+				this._addHoverForRect(rect);
+				const disposableCollection = new _univerjs_core.DisposableCollection();
+				const position$ = new rxjs.BehaviorSubject(calcDocFloatDomPosition(rect, renderObject.renderUnit));
+				const canvas = renderObject.canvas;
+				const data = rectParam.data;
+				const info = {
+					dispose: disposableCollection,
+					rect,
+					position$,
+					unitId
+				};
+				this._canvasFloatDomService.addFloatDom({
+					position$,
+					id: rectParam.drawingId,
+					componentKey: rectParam.componentKey,
+					onPointerDown: (evt) => {
+						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
+					},
+					onPointerMove: (evt) => {
+						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
+					},
+					onPointerUp: (evt) => {
+						canvas.dispatchEvent(new PointerEvent(evt.type, evt));
+					},
+					onWheel: (evt) => {
+						canvas.dispatchEvent(new WheelEvent(evt.type, evt));
+					},
+					data,
+					unitId
+				});
+				const listener = rect.onTransformChange$.subscribeEvent(() => {
+					const newPosition = calcDocFloatDomPosition(rect, renderObject.renderUnit);
+					position$.next(newPosition);
+				});
+				disposableCollection.add(() => {
+					this._canvasFloatDomService.removeFloatDom(rectParam.drawingId);
+				});
+				listener && disposableCollection.add(listener);
+				this._domLayerInfoMap.set(rectParam.drawingId, info);
+			}
+		});
+	}
+	_addHoverForRect(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;
+		})));
+	}
+	_removeDom(id) {
+		const info = this._domLayerInfoMap.get(id);
+		if (!info) return;
+		const { unitId } = info;
+		this._domLayerInfoMap.delete(id);
+		info.dispose.dispose();
+		const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+		if (renderObject) renderObject.scene.removeObject(info.rect);
+	}
+	_initScrollAndZoomEvent() {
+		const updateDoc = (unitId) => {
+			const renderObject = this._getSceneAndTransformerByDrawingSearch(unitId);
+			if (!renderObject) return;
+			this._domLayerInfoMap.forEach((floatDomInfo) => {
+				if (floatDomInfo.unitId !== unitId) return;
+				const position = calcDocFloatDomPosition(floatDomInfo.rect, renderObject.renderUnit);
+				floatDomInfo.position$.next(position);
+			});
+		};
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.map)((documentDataModel) => {
+			if (!documentDataModel) return null;
+			const unitId = documentDataModel.getUnitId();
+			const render = this._renderManagerService.getRenderById(unitId);
+			return render ? {
+				render,
+				unitId
+			} : null;
+		}), (0, rxjs.switchMap)((render) => render ? (0, _univerjs_core.fromEventSubject)(render.render.scene.getViewport(_univerjs_docs_ui.VIEWPORT_KEY.VIEW_MAIN).onScrollAfter$).pipe((0, rxjs.map)(() => ({ unitId: render.unitId }))) : (0, rxjs.of)(null))).subscribe((value) => {
+			if (!value) return;
+			const { unitId } = value;
+			updateDoc(unitId);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((commandInfo) => {
+			if (commandInfo.id === _univerjs_docs_ui.SetDocZoomRatioOperation.id) {
+				const { unitId } = commandInfo.params;
+				updateDoc(unitId);
+			}
+		}));
+	}
+	insertFloatDom(floatDom, opts) {
+		var _skeleton$getSkeleton, _opts$width, _opts$drawingId;
+		const currentDoc = this._univerInstanceService.getCurrentUnitOfType(_univerjs_core.UniverInstanceType.UNIVER_DOC);
+		if (!currentDoc) return false;
+		const render = this._getSceneAndTransformerByDrawingSearch(currentDoc.getUnitId());
+		if (!render) return false;
+		const page = (_skeleton$getSkeleton = render.renderUnit.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton().getSkeletonData()) === null || _skeleton$getSkeleton === void 0 ? void 0 : _skeleton$getSkeleton.pages[0];
+		if (!page) return false;
+		const { pageWidth, marginLeft, marginRight } = page;
+		const width = pageWidth - marginLeft - marginRight;
+		const docTransform = {
+			size: {
+				width: (_opts$width = opts.width) !== null && _opts$width !== void 0 ? _opts$width : width,
+				height: opts.height
+			},
+			positionH: {
+				relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
+				posOffset: 0
+			},
+			positionV: {
+				relativeFrom: _univerjs_core.ObjectRelativeFromV.PAGE,
+				posOffset: 0
+			},
+			angle: 0
+		};
+		const drawingId = (_opts$drawingId = opts.drawingId) !== null && _opts$drawingId !== void 0 ? _opts$drawingId : (0, _univerjs_core.generateRandomId)();
+		const params = {
+			unitId: currentDoc.getUnitId(),
+			drawings: [{
+				drawingId,
+				drawingType: _univerjs_core.DrawingTypeEnum.DRAWING_DOM,
+				subUnitId: currentDoc.getUnitId(),
+				unitId: currentDoc.getUnitId(),
+				...floatDom,
+				title: "",
+				description: "",
+				docTransform,
+				layoutType: _univerjs_core.PositionedObjectLayoutType.INLINE,
+				transform: (0, _univerjs_docs_ui.docDrawingPositionToTransform)(docTransform)
+			}]
+		};
+		this._commandService.syncExecuteCommand(InsertDocDrawingCommand.id, params);
+		return drawingId;
+	}
+};
+DocFloatDomController = __decorate([
+	__decorateParam(0, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(1, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_drawing_ui.DrawingRenderService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.CanvasFloatDomService)),
+	__decorateParam(4, _univerjs_core.IUniverInstanceService),
+	__decorateParam(5, _univerjs_core.ICommandService)
+], DocFloatDomController);
+
+//#endregion
+//#region src/menu/image.menu.ts
+const DOCS_IMAGE_MENU_ID = "doc.menu.image";
+const IMAGE_MENU_UPLOAD_FLOAT_ID = InsertDocImageCommand.id;
+const getDisableWhenSelectionInTableObservable = (accessor) => {
+	const docSelectionManagerService = accessor.get(_univerjs_docs.DocSelectionManagerService);
+	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	return new rxjs.Observable((subscriber) => {
+		const observable = docSelectionManagerService.textSelection$.subscribe(() => {
+			const activeRange = docSelectionManagerService.getActiveTextRange();
+			if (activeRange) {
+				var _docDataModel$getSelf;
+				const { segmentId, startOffset, endOffset } = activeRange;
+				const docDataModel = univerInstanceService.getCurrentUniverDocInstance();
+				const tables = docDataModel === null || docDataModel === void 0 || (_docDataModel$getSelf = docDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) === null || _docDataModel$getSelf === void 0 ? void 0 : _docDataModel$getSelf.tables;
+				if (tables && tables.length) {
+					if (tables.some((table) => {
+						const { startIndex, endIndex } = table;
+						return startOffset >= startIndex && startOffset < endIndex || endOffset >= startIndex && endOffset < endIndex;
+					})) {
+						subscriber.next(true);
+						return;
+					}
+				}
+			} else {
+				subscriber.next(true);
+				return;
+			}
+			subscriber.next(false);
+		});
+		return () => observable.unsubscribe();
+	});
+};
+function ImageMenuFactory(accessor) {
+	return {
+		id: DOCS_IMAGE_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "AddImageIcon",
+		tooltip: "docImage.title",
+		disabled$: getDisableWhenSelectionInTableObservable(accessor),
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC, void 0, _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY)
+	};
+}
+function UploadFloatImageMenuFactory(_accessor) {
+	return {
+		id: IMAGE_MENU_UPLOAD_FLOAT_ID,
+		title: "docImage.upload.float",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_DOC, void 0, _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY)
+	};
+}
+
+//#endregion
+//#region package.json
+var name = "@univerjs/docs-drawing-ui";
+var version = "0.21.0";
+
+//#endregion
+//#region src/config/config.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 DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY = "docs-drawing-ui.config";
+const configSymbol = Symbol(DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/controllers/doc-drawing-notification.controller.ts
+function getAddOrRemoveDrawings(actions) {
+	if (_univerjs_core.JSONX.isNoop(actions) || !Array.isArray(actions)) return null;
+	const drawingsOp = actions.find((action) => Array.isArray(action) && (action === null || action === void 0 ? void 0 : action[0]) === "drawings");
+	if (drawingsOp == null || !Array.isArray(drawingsOp) || drawingsOp.length < 3) return null;
+	if (typeof drawingsOp[1] === "string" && typeof drawingsOp[2] !== "object") return null;
+	if (Array.isArray(drawingsOp[1]) && typeof drawingsOp[1][1] !== "object") return null;
+	const drawings = [];
+	if (Array.isArray(drawingsOp === null || drawingsOp === void 0 ? void 0 : drawingsOp[1])) {
+		for (const op of drawingsOp) if (Array.isArray(op)) {
+			var _ref, _ref2;
+			drawings.push({
+				type: (op === null || op === void 0 || (_ref = op[1]) === null || _ref === void 0 ? void 0 : _ref.i) ? "add" : "remove",
+				drawingId: op === null || op === void 0 ? void 0 : op[0],
+				drawing: op === null || op === void 0 || (_ref2 = op[1]) === null || _ref2 === void 0 ? void 0 : _ref2.i
+			});
+		}
+	} else {
+		var _drawingsOp$, _drawingsOp$2;
+		drawings.push({
+			type: ((_drawingsOp$ = drawingsOp[2]) === null || _drawingsOp$ === void 0 ? void 0 : _drawingsOp$.i) ? "add" : "remove",
+			drawingId: drawingsOp[1],
+			drawing: (_drawingsOp$2 = drawingsOp[2]) === null || _drawingsOp$2 === void 0 ? void 0 : _drawingsOp$2.i
+		});
+	}
+	return drawings;
+}
+function getReOrderedDrawings(actions) {
+	if (!Array.isArray(actions) || actions.length < 3 || actions[0] !== "drawingsOrder") return [];
+	const drawingIndexes = [];
+	for (let i = 1; i < actions.length; i++) {
+		const action = actions[i];
+		if (Array.isArray(action) && typeof action[0] === "number" && typeof action[1] === "object") drawingIndexes.push(action[0]);
+		else {
+			drawingIndexes.length = 0;
+			break;
+		}
+	}
+	return drawingIndexes;
+}
+let DocDrawingAddRemoveController = class DocDrawingAddRemoveController extends _univerjs_core.Disposable {
+	constructor(_univerInstanceService, _commandService, _drawingManagerService, _docDrawingService, _renderManagerService) {
+		super();
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		this._drawingManagerService = _drawingManagerService;
+		this._docDrawingService = _docDrawingService;
+		this._renderManagerService = _renderManagerService;
+		this._initialize();
+	}
+	_initialize() {
+		this._commandExecutedListener();
+	}
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const { unitId, actions } = command.params;
+			const addOrRemoveDrawings = getAddOrRemoveDrawings(actions);
+			if (addOrRemoveDrawings != null) for (const { type, drawingId, drawing } of addOrRemoveDrawings) if (type === "add") this._addDrawings(unitId, [drawing]);
+			else this._removeDrawings(unitId, [drawingId]);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id !== _univerjs_docs.RichTextEditingMutation.id) return;
+			const { unitId, actions } = command.params;
+			if (getReOrderedDrawings(actions).length > 0) this._updateDrawingsOrder(unitId);
+		}));
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			var _this$_univerInstance;
+			if (command.id !== _univerjs_core.UndoCommand.id && command.id !== _univerjs_core.RedoCommand.id) return;
+			const unitId = (_this$_univerInstance = this._univerInstanceService.getCurrentUniverDocInstance()) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getUnitId();
+			const focusedDrawings = this._drawingManagerService.getFocusDrawings();
+			if (unitId == null || focusedDrawings.length === 0) return;
+			const renderObject = this._renderManagerService.getRenderById(unitId);
+			const scene = renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene;
+			if (scene == null) return false;
+			scene.getTransformerByCreate().refreshControls();
+		}));
+	}
+	_addDrawings(unitId, drawings) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchAddOp(drawings);
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.addNotification(objects);
+		docDrawingService.addNotification(objects);
+	}
+	_removeDrawings(unitId, drawingIds) {
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		const { subUnitId, redo: op, objects } = this._docDrawingService.getBatchRemoveOp(drawingIds.map((drawingId) => {
+			return {
+				unitId,
+				subUnitId: unitId,
+				drawingId
+			};
+		}));
+		drawingManagerService.applyJson1(unitId, subUnitId, op);
+		docDrawingService.applyJson1(unitId, subUnitId, op);
+		drawingManagerService.removeNotification(objects);
+		docDrawingService.removeNotification(objects);
+	}
+	_updateDrawingsOrder(unitId) {
+		const documentDataModel = this._univerInstanceService.getUniverDocInstance(unitId);
+		if (documentDataModel == null) return;
+		const drawingsOrder = documentDataModel.getSnapshot().drawingsOrder;
+		if (drawingsOrder == null) return;
+		const drawingManagerService = this._drawingManagerService;
+		const docDrawingService = this._docDrawingService;
+		drawingManagerService.setDrawingOrder(unitId, unitId, drawingsOrder);
+		docDrawingService.setDrawingOrder(unitId, unitId, drawingsOrder);
+		const objects = {
+			unitId,
+			subUnitId: unitId,
+			drawingIds: drawingsOrder
+		};
+		drawingManagerService.orderNotification(objects);
+		docDrawingService.orderNotification(objects);
+	}
+};
+DocDrawingAddRemoveController = __decorate([
+	__decorateParam(0, _univerjs_core.IUniverInstanceService),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, _univerjs_docs_drawing.IDocDrawingService),
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+], DocDrawingAddRemoveController);
+
+//#endregion
+//#region src/views/printing-float-dom/index.tsx
+const DocPrintingFloatDom = (props) => {
+	const { floatDomInfos, scene, offset, bound } = props;
+	const width = bound.right - bound.left;
+	const height = bound.bottom - bound.top;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute univer-left-0 univer-top-0",
+		children: (0, react.useMemo)(() => floatDomInfos.map((info) => {
+			const { width = 0, height = 0, left = 0, top = 0 } = info.transform;
+			const domPos = calcDocFloatDomPositionByRect({
+				left,
+				right: left + width,
+				top,
+				bottom: top + height
+			}, scene);
+			const floatDom = {
+				position$: new rxjs.BehaviorSubject(domPos),
+				position: domPos,
+				id: info.drawingId,
+				componentKey: info.componentKey,
+				onPointerMove: () => {},
+				onPointerDown: () => {},
+				onPointerUp: () => {},
+				onWheel: () => {},
+				unitId: info.unitId,
+				data: info.data
+			};
+			return [info.drawingId, floatDom];
+		}).filter(([_, floatDom]) => !(floatDom.position.endX < 0 || floatDom.position.endY < 0 || floatDom.position.startX > width || floatDom.position.startY > height)), [
+			floatDomInfos,
+			scene,
+			offset,
+			width,
+			height
+		]).map(([id, floatDom]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.PrintFloatDomSingle, {
+			layer: floatDom,
+			id,
+			position: floatDom.position
+		}, id))
+	});
+};
+
+//#endregion
+//#region src/controllers/doc-drawing-printing.controller.tsx
+let DocDrawingPrintingController = class DocDrawingPrintingController extends _univerjs_core.Disposable {
+	constructor(_docPrintInterceptorService, _drawingRenderService, _drawingManagerService, _componetManager, _injector) {
+		super();
+		this._docPrintInterceptorService = _docPrintInterceptorService;
+		this._drawingRenderService = _drawingRenderService;
+		this._drawingManagerService = _drawingManagerService;
+		this._componetManager = _componetManager;
+		this._injector = _injector;
+		this._initPrinting();
+		this._initPrintingDom();
+	}
+	_initPrinting() {
+		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_COMPONENT_COLLECT, { handler: (_param, pos, next) => {
+			const { unitId, scene } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			if (subUnitData) subUnitData.order.forEach((id) => {
+				const drawing = subUnitData.data[id];
+				if (drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_CHART && drawing.drawingType !== _univerjs_core.DrawingTypeEnum.DRAWING_DOM) this._drawingRenderService.renderDrawing(drawing, scene);
+			});
+			return next();
+		} }));
+	}
+	_initPrintingDom() {
+		this.disposeWithMe(this._docPrintInterceptorService.interceptor.intercept(this._docPrintInterceptorService.interceptor.getInterceptPoints().PRINTING_DOM_COLLECT, { handler: (disposableCollection, pos, next) => {
+			const { unitId } = pos;
+			const unitData = this._drawingManagerService.getDrawingDataForUnit(unitId);
+			const subUnitData = unitData === null || unitData === void 0 ? void 0 : unitData[unitId];
+			if (subUnitData) {
+				const floatDomInfos = subUnitData.order.map((id) => {
+					const drawing = subUnitData.data[id];
+					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_CHART) return {
+						...drawing,
+						componentKey: this._componetManager.get(_univerjs_core.DOC_DRAWING_PRINTING_COMPONENT_KEY)
+					};
+					if (drawing.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) {
+						const printingComponentKey = this._docPrintInterceptorService.getPrintComponent(drawing.componentKey);
+						return {
+							...drawing,
+							componentKey: this._componetManager.get(printingComponentKey || drawing.componentKey)
+						};
+					}
+					return null;
+				}).filter(Boolean);
+				(0, _univerjs_design.render)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)((0, _univerjs_ui.connectInjector)(DocPrintingFloatDom, this._injector), {
+					unitId,
+					floatDomInfos,
+					scene: pos.scene,
+					skeleton: pos.skeleton,
+					offset: pos.offset,
+					bound: pos.bound
+				}), pos.root);
+				disposableCollection === null || disposableCollection === void 0 || disposableCollection.add(() => {
+					(0, _univerjs_design.unmount)(pos.root);
+				});
+				return next(disposableCollection);
+			}
+		} }));
+	}
+};
+DocDrawingPrintingController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocPrintInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_drawing_ui.DrawingRenderService)),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector))
+], DocDrawingPrintingController);
+
+//#endregion
+//#region src/controllers/doc-drawing-transformer-update.controller.ts
+const INLINE_DRAWING_ANCHOR_KEY_PREFIX = "__InlineDrawingAnchor__";
+function isInTableCell(nodePosition) {
+	const { path } = nodePosition;
+	return path.some((p) => p === "cells");
+}
+let DocDrawingTransformerController = class DocDrawingTransformerController extends _univerjs_core.Disposable {
+	constructor(_commandService, _univerInstanceService, _drawingManagerService, _renderManagerService) {
+		super();
+		this._commandService = _commandService;
+		this._univerInstanceService = _univerInstanceService;
+		this._drawingManagerService = _drawingManagerService;
+		this._renderManagerService = _renderManagerService;
+		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
+		_defineProperty(this, "_listenerOnImageMap", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_transformerCache", /* @__PURE__ */ new Map());
+		_defineProperty(this, "_anchorShape", void 0);
+		this._init();
+	}
+	_init() {
+		this._listenDrawingFocus();
+	}
+	_listenDrawingFocus() {
+		this.disposeWithMe(this._drawingManagerService.add$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) return;
+			for (const drawingParam of drawingParams) {
+				const { unitId } = drawingParam;
+				if (!this._listenerOnImageMap.has(unitId)) {
+					this._listenTransformerChange(unitId);
+					this._listenerOnImageMap.add(unitId);
+				}
+			}
+		}));
+	}
+	_listenTransformerChange(unitId) {
+		var _this$_getSceneAndTra;
+		const transformer = (_this$_getSceneAndTra = this._getSceneAndTransformerByDrawingSearch(unitId)) === null || _this$_getSceneAndTra === void 0 ? void 0 : _this$_getSceneAndTra.transformer;
+		if (transformer == null) return;
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeStart$.subscribe((state) => {
+			this._transformerCache.clear();
+			const { objects } = state;
+			for (const object of objects.values()) {
+				var _documentDataModel$ge;
+				const { oKey, width, height, left, top, angle } = object;
+				const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+				if (drawing == null) continue;
+				const documentDataModel = this._univerInstanceService.getUniverDocInstance(drawing.unitId);
+				const drawingData = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot().drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawing.drawingId];
+				if ((drawingData === null || drawingData === void 0 ? void 0 : drawingData.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
+					object.setOpacity(.2);
+				} catch (e) {}
+				if (drawingData != null) this._transformerCache.set(drawing.drawingId, {
+					drawing: drawingData,
+					top,
+					left,
+					width,
+					height,
+					angle
+				});
+			}
+		})));
+		const throttleMultipleDrawingUpdate = (0, _univerjs_core.throttle)(this._updateMultipleDrawingDocTransform.bind(this), 50);
+		(0, _univerjs_core.throttle)(this._nonInlineDrawingTransform.bind(this), 50);
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changing$.subscribe((state) => {
+			const { objects, offsetX, offsetY } = state;
+			if (objects.size > 1) throttleMultipleDrawingUpdate(objects);
+			else if (objects.size === 1) {
+				const drawingCache = this._transformerCache.values().next().value;
+				const { width, height, top, left, angle } = objects.values().next().value;
+				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
+				if (drawingCache && drawingCache.drawing.layoutType !== _univerjs_core.PositionedObjectLayoutType.INLINE) {}
+				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE && offsetX != null && offsetY != null) this._updateInlineDrawingAnchor(drawingCache.drawing, offsetX, offsetY);
+			}
+		})));
+		this.disposeWithMe((0, _univerjs_core.toDisposable)(transformer.changeEnd$.subscribe((state) => {
+			const { objects, offsetX, offsetY } = state;
+			for (const object of objects.values()) {
+				const drawing = this._drawingManagerService.getDrawingOKey(object.oKey);
+				if (drawing == null) continue;
+				const drawingCache = this._transformerCache.get(drawing === null || drawing === void 0 ? void 0 : drawing.drawingId);
+				if ((drawingCache === null || drawingCache === void 0 ? void 0 : drawingCache.drawing.layoutType) === _univerjs_core.PositionedObjectLayoutType.INLINE) try {
+					object.setOpacity(1);
+				} catch (e) {}
+			}
+			if (this._anchorShape) this._anchorShape.hide();
+			if (objects.size > 1) this._updateMultipleDrawingDocTransform(objects);
+			else if (objects.size === 1) {
+				const drawingCache = this._transformerCache.values().next().value;
+				const object = objects.values().next().value;
+				const { width, height, top, left, angle } = object;
+				if (drawingCache && width === drawingCache.width && height === drawingCache.height && top === drawingCache.top && left === drawingCache.left && angle === drawingCache.angle) return;
+				if (drawingCache && drawingCache.drawing.layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) {
+					if (width !== drawingCache.width || height !== drawingCache.height || angle !== drawingCache.angle) this._updateDrawingSize(drawingCache, object);
+					else if (offsetX != null && offsetY != null) this._moveInlineDrawing(drawingCache.drawing, offsetX, offsetY);
+				} else if (drawingCache) this._nonInlineDrawingTransform(drawingCache.drawing, object);
+			}
+			this._transformerCache.clear();
+		})));
+	}
+	_updateMultipleDrawingDocTransform(objects) {
+		if (objects.size < 1) return;
+		const drawings = [];
+		let unitId;
+		let subUnitId;
+		for (const object of objects.values()) {
+			const { oKey, left, top, angle } = object;
+			let { width, height } = object;
+			const drawing = this._drawingManagerService.getDrawingOKey(oKey);
+			if (drawing == null) continue;
+			if (unitId == null) unitId = drawing.unitId;
+			if (subUnitId == null) subUnitId = drawing.subUnitId;
+			const drawingCache = this._transformerCache.get(drawing.drawingId);
+			if (drawingCache == null) continue;
+			const { drawing: drawingData, top: oldTop, left: oldLeft, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
+			const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawingData);
+			width = Math.min(width, maxWidth);
+			height = Math.min(height, maxHeight);
+			if (oldWidth !== width || oldHeight !== height) drawings.push({
+				drawingId: drawing.drawingId,
+				key: "size",
+				value: {
+					width,
+					height
+				}
+			});
+			if (oldAngle !== angle) drawings.push({
+				drawingId: drawing.drawingId,
+				key: "angle",
+				value: angle
+			});
+			if (oldTop !== top || oldLeft !== left) {
+				const verticalDelta = top - oldTop;
+				const horizontalDelta = left - oldLeft;
+				if (verticalDelta !== 0) drawings.push({
+					drawingId: drawing.drawingId,
+					key: "positionV",
+					value: {
+						relativeFrom: drawingData.docTransform.positionV.relativeFrom,
+						posOffset: drawingData.docTransform.positionV.posOffset + verticalDelta
+					}
+				});
+				if (horizontalDelta !== 0) drawings.push({
+					drawingId: drawing.drawingId,
+					key: "positionH",
+					value: {
+						relativeFrom: drawingData.docTransform.positionH.relativeFrom,
+						posOffset: drawingData.docTransform.positionH.posOffset + horizontalDelta
+					}
+				});
+			}
+		}
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId,
+			subUnitId,
+			drawings
+		});
+	}
+	_updateDrawingAnchor(objects) {
+		if (this._transformerCache.size !== 1) return;
+		const drawingCache = this._transformerCache.values().next().value;
+		const object = objects.values().next().value;
+		this._getDrawingAnchor(drawingCache.drawing, object);
+	}
+	_updateInlineDrawingAnchor(drawing, offsetX, offsetY) {
+		var _this$_getInlineDrawi;
+		if (this._transformerCache.size !== 1) return;
+		const { contentBoxPointGroup } = (_this$_getInlineDrawi = this._getInlineDrawingAnchor(drawing, offsetX, offsetY)) !== null && _this$_getInlineDrawi !== void 0 ? _this$_getInlineDrawi : {};
+		if (contentBoxPointGroup == null) return;
+		this._createOrUpdateInlineAnchor(drawing.unitId, contentBoxPointGroup);
+	}
+	_getInlineDrawingAnchor(drawing, offsetX, offsetY) {
+		var _this$_renderManagerS, _getOneTextSelectionR;
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		if (currentRender == null) return;
+		const { mainComponent, scene } = currentRender;
+		const documentComponent = mainComponent;
+		const activeViewport = scene.getViewports()[0];
+		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop } = documentComponent.getOffsetConfig();
+		let glyphAnchor = null;
+		let isBack = false;
+		let segmentPageIndex = -1;
+		let segmentId = "";
+		const HALF = .5;
+		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, offsetX, offsetY);
+		if (coord == null) return;
+		const docSelectionRenderService = (_this$_renderManagerS = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService == null) return;
+		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
+			strict: false,
+			segmentId: docSelectionRenderService.getSegment(),
+			segmentPage: docSelectionRenderService.getSegmentPage()
+		});
+		if (nodeInfo) {
+			const { node, ratioX, segmentPage, segmentId: nodeSegmentId } = nodeInfo;
+			isBack = ratioX < HALF;
+			glyphAnchor = node;
+			segmentPageIndex = segmentPage;
+			segmentId = nodeSegmentId;
+		}
+		if (glyphAnchor == null) return;
+		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPageIndex);
+		const docObject = this._getDocObject();
+		if (nodePosition == null || skeleton == null || docObject == null) return;
+		if (isInTableCell(nodePosition)) return;
+		const positionWithIsBack = {
+			...nodePosition,
+			isBack
+		};
+		const { cursorList, contentBoxPointGroup } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
+		const { startOffset } = (_getOneTextSelectionR = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR !== void 0 ? _getOneTextSelectionR : {};
+		if (startOffset == null) return;
+		return {
+			offset: startOffset,
+			contentBoxPointGroup,
+			segmentId,
+			segmentPage: segmentPageIndex
+		};
+	}
+	_getDrawingAnchor(drawing, object) {
+		var _this$_renderManagerS2, _glyphAnchor$parent, _column$lines$find, _column$parent, _getOneTextSelectionR2;
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null || currentRender == null) return;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const { mainComponent, scene } = currentRender;
+		const documentComponent = mainComponent;
+		const activeViewport = scene.getViewports()[0];
+		const { pageLayoutType = _univerjs_engine_render.PageLayoutType.VERTICAL, pageMarginLeft, pageMarginTop, docsLeft, docsTop } = documentComponent.getOffsetConfig();
+		const { left, top, angle } = object;
+		let { width, height } = object;
+		const { positionV, positionH } = drawing.docTransform;
+		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+		width = Math.min(width, maxWidth);
+		height = Math.min(height, maxHeight);
+		let glyphAnchor = null;
+		let segmentId = "";
+		let segmentPage = -1;
+		const isBack = false;
+		const docTransform = {
+			...drawing.docTransform,
+			size: {
+				width,
+				height
+			},
+			angle
+		};
+		const { x, y } = scene.getViewportScrollXY(activeViewport);
+		const coord = this._getTransformCoordForDocumentOffset(documentComponent, activeViewport, left - x, top - y);
+		if (coord == null) return;
+		const docSelectionRenderService = (_this$_renderManagerS2 = this._renderManagerService.getRenderById(drawing.unitId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService == null) return;
+		const nodeInfo = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findNodeByCoord(coord, pageLayoutType, pageMarginLeft, pageMarginTop, {
+			strict: false,
+			segmentId: docSelectionRenderService.getSegment(),
+			segmentPage: docSelectionRenderService.getSegmentPage()
+		});
+		if (nodeInfo) {
+			const { node, segmentPage: segmentPageIndex, segmentId: nodeSegmentId } = nodeInfo;
+			glyphAnchor = node;
+			segmentPage = segmentPageIndex;
+			segmentId = nodeSegmentId;
+		}
+		if (glyphAnchor == null) return;
+		const line = (_glyphAnchor$parent = glyphAnchor.parent) === null || _glyphAnchor$parent === void 0 ? void 0 : _glyphAnchor$parent.parent;
+		const column = line === null || line === void 0 ? void 0 : line.parent;
+		const paragraphStartLine = (_column$lines$find = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart)) !== null && _column$lines$find !== void 0 ? _column$lines$find : column === null || column === void 0 ? void 0 : column.lines[0];
+		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
+		if (line == null || column == null || paragraphStartLine == null || page == null) return;
+		this._liquid.reset();
+		const pageType = page.type;
+		for (const p of pages) {
+			const { headerId, footerId, pageHeight, pageWidth, marginLeft, marginBottom } = p;
+			const pIndex = pages.indexOf(p);
+			if (segmentPage > -1 && pIndex === segmentPage) {
+				switch (pageType) {
+					case _univerjs_engine_render.DocumentSkeletonPageType.HEADER: {
+						var _skeHeaders$get;
+						const headerSke = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+						if (headerSke) this._liquid.translatePagePadding({
+							marginTop: headerSke.marginTop,
+							marginLeft
+						});
+						else throw new Error("header skeleton not found");
+						break;
+					}
+					case _univerjs_engine_render.DocumentSkeletonPageType.FOOTER: {
+						var _skeFooters$get;
+						const footerSke = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+						if (footerSke) this._liquid.translatePagePadding({
+							marginTop: pageHeight - marginBottom + footerSke.marginTop,
+							marginLeft
+						});
+						else throw new Error("footer skeleton not found");
+						break;
+					}
+				}
+				break;
+			}
+			this._liquid.translatePagePadding(p);
+			if (p === page) break;
+			this._liquid.restorePagePadding(p);
+			this._liquid.translatePage(p, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		if (positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) glyphAnchor = line.divides[0].glyphGroup[0];
+		else {
+			var _paragraphStartLine$d, _paragraphStartLine$d2;
+			glyphAnchor = (_paragraphStartLine$d = (_paragraphStartLine$d2 = paragraphStartLine.divides) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2[0]) === null || _paragraphStartLine$d2 === void 0 || (_paragraphStartLine$d2 = _paragraphStartLine$d2.glyphGroup) === null || _paragraphStartLine$d2 === void 0 ? void 0 : _paragraphStartLine$d2[0]) !== null && _paragraphStartLine$d !== void 0 ? _paragraphStartLine$d : glyphAnchor;
+		}
+		docTransform.positionH = {
+			relativeFrom: positionH.relativeFrom,
+			posOffset: left - this._liquid.x - docsLeft
+		};
+		switch (positionH.relativeFrom) {
+			case _univerjs_core.ObjectRelativeFromH.MARGIN:
+				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - page.marginLeft;
+				break;
+			case _univerjs_core.ObjectRelativeFromH.COLUMN:
+				docTransform.positionH.posOffset = left - this._liquid.x - docsLeft - column.left;
+				break;
+		}
+		docTransform.positionV = {
+			relativeFrom: positionV.relativeFrom,
+			posOffset: top - this._liquid.y - docsTop
+		};
+		switch (positionV.relativeFrom) {
+			case _univerjs_core.ObjectRelativeFromV.PAGE:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - page.marginTop;
+				break;
+			case _univerjs_core.ObjectRelativeFromV.LINE:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - line.top;
+				break;
+			case _univerjs_core.ObjectRelativeFromV.PARAGRAPH:
+				docTransform.positionV.posOffset = top - this._liquid.y - docsTop - paragraphStartLine.top;
+				break;
+		}
+		if (glyphAnchor == null) return;
+		const nodePosition = skeleton === null || skeleton === void 0 ? void 0 : skeleton.findPositionByGlyph(glyphAnchor, segmentPage);
+		const docObject = this._getDocObject();
+		if (nodePosition == null || skeleton == null || docObject == null) return;
+		if (isInTableCell(nodePosition)) return;
+		const positionWithIsBack = {
+			...nodePosition,
+			isBack
+		};
+		const { cursorList } = new _univerjs_docs_ui.NodePositionConvertToCursor(docObject.document.getOffsetConfig(), skeleton).getRangePointData(positionWithIsBack, positionWithIsBack);
+		const { startOffset } = (_getOneTextSelectionR2 = (0, _univerjs_docs_ui.getOneTextSelectionRange)(cursorList)) !== null && _getOneTextSelectionR2 !== void 0 ? _getOneTextSelectionR2 : {};
+		if (startOffset == null) return;
+		return {
+			offset: startOffset,
+			docTransform,
+			segmentId,
+			segmentPage
+		};
+	}
+	_updateDrawingSize(drawingCache, object) {
+		const drawings = [];
+		const { drawing, width: oldWidth, height: oldHeight, angle: oldAngle } = drawingCache;
+		const { unitId, subUnitId } = drawing;
+		let { width, height, angle } = object;
+		const { width: maxWidth, height: maxHeight } = this._getPageContentSize(drawing);
+		width = Math.min(maxWidth, width);
+		height = Math.min(maxHeight, height);
+		if (width !== oldWidth || height !== oldHeight) drawings.push({
+			drawingId: drawing.drawingId,
+			key: "size",
+			value: {
+				width,
+				height
+			}
+		});
+		if (angle !== oldAngle) drawings.push({
+			drawingId: drawing.drawingId,
+			key: "angle",
+			value: angle
+		});
+		if (drawings.length > 0 && unitId && subUnitId) this._commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId,
+			subUnitId,
+			drawings
+		});
+	}
+	_moveInlineDrawing(drawing, offsetX, offsetY) {
+		const anchor = this._getInlineDrawingAnchor(drawing, offsetX, offsetY);
+		const { offset, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		return this._commandService.executeCommand(IMoveInlineDrawingCommand.id, {
+			unitId: drawing.unitId,
+			subUnitId: drawing.unitId,
+			drawing,
+			offset,
+			segmentId,
+			segmentPage,
+			needRefreshDrawings: offset == null
+		});
+	}
+	_limitDrawingInPage(drawing, object) {
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const { left, top, width, height, angle } = object;
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		const { pages } = skeletonData !== null && skeletonData !== void 0 ? skeletonData : {};
+		if (skeletonData == null || currentRender == null || pages == null) return {
+			left,
+			top,
+			width,
+			height,
+			angle
+		};
+		const { mainComponent } = currentRender;
+		const { top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = mainComponent;
+		let newTop = top;
+		this._liquid.reset();
+		for (const page of pages) {
+			const { marginBottom, pageHeight } = page;
+			const nextPage = pages[pages.indexOf(page) + 1];
+			if (nextPage == null) continue;
+			if (_univerjs_core.Tools.hasIntersectionBetweenTwoRanges(top, top + height, this._liquid.y + docsTop + pageHeight - marginBottom, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop)) if (top + height / 2 < this._liquid.y + docsTop + pageHeight + pageMarginTop / 2) newTop = Math.min(top, this._liquid.y + docsTop + pageHeight - marginBottom - height);
+			else newTop = Math.max(top, this._liquid.y + docsTop + pageHeight + pageMarginTop + nextPage.marginTop);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		return {
+			left,
+			top: newTop,
+			width,
+			height,
+			angle
+		};
+	}
+	_nonInlineDrawingTransform(drawing, object, isMoving = false) {
+		const objectPosition = drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE ? object : this._limitDrawingInPage(drawing, object);
+		if (isMoving && objectPosition.top !== object.top) return;
+		const anchor = this._getDrawingAnchor(drawing, objectPosition);
+		const { offset, docTransform, segmentId, segmentPage } = anchor !== null && anchor !== void 0 ? anchor : {};
+		if (offset == null || docTransform == null) return this._updateMultipleDrawingDocTransform(new Map([[drawing.drawingId, object]]));
+		return this._commandService.executeCommand(ITransformNonInlineDrawingCommand.id, {
+			unitId: drawing.unitId,
+			subUnitId: drawing.unitId,
+			drawing,
+			offset,
+			docTransform,
+			segmentId,
+			segmentPage
+		});
+	}
+	_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;
+		return {
+			scene,
+			transformer: scene.getTransformerByCreate()
+		};
+	}
+	_getTransformCoordForDocumentOffset(document, viewport, evtOffsetX, evtOffsetY) {
+		const { documentTransform } = document.getOffsetConfig();
+		const originCoord = viewport.transformVector2SceneCoord(_univerjs_engine_render.Vector2.FromArray([evtOffsetX, evtOffsetY]));
+		if (!originCoord) return;
+		return documentTransform.clone().invert().applyPoint(originCoord);
+	}
+	_createOrUpdateInlineAnchor(unitId, pointsGroup) {
+		const currentRender = this._renderManagerService.getRenderById(unitId);
+		if (currentRender == null) return;
+		const { mainComponent, scene } = currentRender;
+		const { docsLeft, docsTop } = mainComponent.getOffsetConfig();
+		const { left: boundingLeft, top: boundingTop, height } = (0, _univerjs_docs_ui.getAnchorBounding)(pointsGroup);
+		const left = boundingLeft + docsLeft;
+		const top = boundingTop + docsTop;
+		if (this._anchorShape) {
+			this._anchorShape.transformByState({
+				left,
+				top,
+				height
+			});
+			this._anchorShape.show();
+			return;
+		}
+		const anchor = new _univerjs_engine_render.Rect(INLINE_DRAWING_ANCHOR_KEY_PREFIX + (0, _univerjs_core.generateRandomId)(6), {
+			left,
+			top,
+			height,
+			strokeWidth: 2,
+			stroke: (0, _univerjs_engine_render.getColor)(_univerjs_core.COLORS.darkgray, 1),
+			evented: false
+		});
+		this._anchorShape = anchor;
+		scene.addObject(anchor, _univerjs_docs_ui.TEXT_RANGE_LAYER_INDEX);
+	}
+	_getDocObject() {
+		return (0, _univerjs_docs_ui.getDocObject)(this._univerInstanceService, this._renderManagerService);
+	}
+	_getPageContentSize(drawing) {
+		const currentRender = this._renderManagerService.getRenderById(drawing.unitId);
+		const skeleton = currentRender === null || currentRender === void 0 ? void 0 : currentRender.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const MAX_WIDTH = 500;
+		const MAX_HEIGHT = 500;
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null || currentRender == null) return {
+			width: MAX_WIDTH,
+			height: MAX_HEIGHT
+		};
+		const { pages } = skeletonData;
+		let page = null;
+		for (const p of pages) {
+			const { skeDrawings } = p;
+			if (skeDrawings.has(drawing.drawingId)) {
+				page = p;
+				break;
+			}
+		}
+		if (page) {
+			const { pageWidth, pageHeight, marginLeft, marginBottom, marginRight, marginTop } = page;
+			return {
+				width: Math.max(MAX_WIDTH, pageWidth - marginLeft - marginRight),
+				height: Math.max(MAX_HEIGHT, pageHeight - marginTop - marginBottom)
+			};
+		} else return {
+			width: MAX_WIDTH,
+			height: MAX_HEIGHT
+		};
+	}
+};
+DocDrawingTransformerController = __decorate([
+	__decorateParam(0, _univerjs_core.ICommandService),
+	__decorateParam(1, _univerjs_core.IUniverInstanceService),
+	__decorateParam(2, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
+], DocDrawingTransformerController);
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [_univerjs_ui.RibbonInsertGroup.MEDIA]: { [DOCS_IMAGE_MENU_ID]: {
+	order: 0,
+	menuItemFactory: ImageMenuFactory,
+	[IMAGE_MENU_UPLOAD_FLOAT_ID]: {
+		order: 0,
+		menuItemFactory: UploadFloatImageMenuFactory
+	}
+} } };
+
+//#endregion
+//#region src/views/doc-image-panel/DocDrawingPosition.tsx
+const MIN_OFFSET = -1e3;
+const MAX_OFFSET = 1e3;
+const DocDrawingPosition = (props) => {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	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 univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const { drawings } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return;
+	const { unitId } = drawingParam;
+	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+	const documentFlavor = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot().documentStyle.documentFlavor;
+	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 HORIZONTAL_RELATIVE_FROM = [
+		{
+			label: localeService.t("image-position.column"),
+			value: String(_univerjs_core.ObjectRelativeFromH.COLUMN)
+		},
+		{
+			label: localeService.t("image-position.page"),
+			value: String(_univerjs_core.ObjectRelativeFromH.PAGE)
+		},
+		{
+			label: localeService.t("image-position.margin"),
+			value: String(_univerjs_core.ObjectRelativeFromH.MARGIN)
+		}
+	];
+	const VERTICAL_RELATIVE_FROM = [
+		{
+			label: localeService.t("image-position.line"),
+			value: String(_univerjs_core.ObjectRelativeFromV.LINE),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("image-position.page"),
+			value: String(_univerjs_core.ObjectRelativeFromV.PAGE),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("image-position.margin"),
+			value: String(_univerjs_core.ObjectRelativeFromV.MARGIN),
+			disabled: documentFlavor === _univerjs_core.DocumentFlavor.MODERN
+		},
+		{
+			label: localeService.t("image-position.paragraph"),
+			value: String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH)
+		}
+	];
+	const [disabled, setDisabled] = (0, react.useState)(true);
+	const [hPosition, setHPosition] = (0, react.useState)({
+		relativeFrom: _univerjs_core.ObjectRelativeFromH.PAGE,
+		posOffset: 0
+	});
+	const [vPosition, setVPosition] = (0, react.useState)({
+		relativeFrom: _univerjs_core.ObjectRelativeFromV.PAGE,
+		posOffset: 0
+	});
+	const [followTextMove, setFollowTextMove] = (0, react.useState)(true);
+	const [showPanel, setShowPanel] = (0, react.useState)(true);
+	function handlePositionChange(direction, value) {
+		var _renderManagerService;
+		if (direction === "positionH") setHPosition(value);
+		else setVPosition(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawings = focusDrawings.map((drawing) => {
+			return {
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId
+			};
+		});
+		commandService.executeCommand(UpdateDrawingDocTransformCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings: drawings.map((drawing) => ({
+				drawingId: drawing.drawingId,
+				key: direction,
+				value
+			}))
+		});
+		const docSelectionRenderService = (_renderManagerService = renderManagerService.getRenderById(unitId)) === null || _renderManagerService === void 0 ? void 0 : _renderManagerService.with(_univerjs_docs_ui.DocSelectionRenderService);
+		if (docSelectionRenderService) docSelectionRenderService.blur();
+		transformer.refreshControls();
+	}
+	function handleHorizontalRelativeFromChange(value) {
+		var _renderManagerService2;
+		const prevRelativeFrom = hPosition.relativeFrom;
+		const prevPosOffset = hPosition.posOffset;
+		const relativeFrom = Number(value);
+		if (prevRelativeFrom === relativeFrom) return;
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawingId = focusDrawings[0].drawingId;
+		const unitId = focusDrawings[0].unitId;
+		let drawing = null;
+		let pageMarginLeft = 0;
+		const skeleton = (_renderManagerService2 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService2 === void 0 ? void 0 : _renderManagerService2.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		if (skeletonData == null) return;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		for (const page of pages) {
+			var _skeHeaders$get, _skeFooters$get;
+			const { marginLeft, skeDrawings, headerId, footerId, pageWidth } = page;
+			if (skeDrawings.has(drawingId)) {
+				drawing = skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+			const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+			if (headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.has(drawingId)) {
+				drawing = headerPage === null || headerPage === void 0 ? void 0 : headerPage.skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+			const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+			if (footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.has(drawingId)) {
+				drawing = footerPage === null || footerPage === void 0 ? void 0 : footerPage.skeDrawings.get(drawingId);
+				pageMarginLeft = marginLeft;
+				break;
+			}
+		}
+		if (drawing == null) return;
+		let delta = 0;
+		if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta -= drawing.columnLeft;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta -= pageMarginLeft;
+		if (relativeFrom === _univerjs_core.ObjectRelativeFromH.COLUMN) delta += drawing.columnLeft;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.MARGIN) delta += pageMarginLeft;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromH.PAGE) {}
+		handlePositionChange("positionH", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+		});
+	}
+	function handleVerticalRelativeFromChange(value) {
+		var _renderManagerService3, _renderManagerService4, _documentDataModel$ge, _glyph$parent, _column$parent;
+		const prevRelativeFrom = vPosition.relativeFrom;
+		const prevPosOffset = vPosition.posOffset;
+		const relativeFrom = Number(value);
+		if (prevRelativeFrom === relativeFrom) return;
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const { drawingId, unitId } = focusDrawings[0];
+		const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+		const skeleton = (_renderManagerService3 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService3 === void 0 ? void 0 : _renderManagerService3.with(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+		const docSelectionRenderService = (_renderManagerService4 = renderManagerService.getRenderById(unitId)) === null || _renderManagerService4 === void 0 ? void 0 : _renderManagerService4.with(_univerjs_docs_ui.DocSelectionRenderService);
+		const segmentId = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegment();
+		const segmentPage = docSelectionRenderService === null || docSelectionRenderService === void 0 ? void 0 : docSelectionRenderService.getSegmentPage();
+		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSelfOrHeaderFooterModel(segmentId).getBody()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.customBlocks) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge.find((c) => c.blockId === drawingId);
+		if (drawing == null || skeleton == null || docSelectionRenderService == null) return;
+		const { startIndex } = drawing;
+		const glyph = skeleton.findNodeByCharIndex(startIndex, segmentId, segmentPage);
+		const line = glyph === null || glyph === void 0 || (_glyph$parent = glyph.parent) === null || _glyph$parent === void 0 ? void 0 : _glyph$parent.parent;
+		const column = line === null || line === void 0 ? void 0 : line.parent;
+		const paragraphStartLine = column === null || column === void 0 ? void 0 : column.lines.find((l) => l.paragraphIndex === (line === null || line === void 0 ? void 0 : line.paragraphIndex) && l.paragraphStart);
+		const page = column === null || column === void 0 || (_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : _column$parent.parent;
+		if (glyph == null || line == null || paragraphStartLine == null || column == null || page == null) return;
+		let delta = 0;
+		if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta -= paragraphStartLine.top;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta -= line.top;
+		else if (prevRelativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta += page.marginTop;
+		if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH) delta += paragraphStartLine.top;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE) delta += line.top;
+		else if (relativeFrom === _univerjs_core.ObjectRelativeFromV.PAGE) delta -= page.marginTop;
+		handlePositionChange("positionV", {
+			relativeFrom,
+			posOffset: (prevPosOffset !== null && prevPosOffset !== void 0 ? prevPosOffset : 0) - delta
+		});
+	}
+	function updateState(drawingParam) {
+		var _snapshot$drawings;
+		const snapshot = documentDataModel === null || documentDataModel === void 0 ? void 0 : documentDataModel.getSnapshot();
+		const drawing = snapshot === null || snapshot === void 0 || (_snapshot$drawings = snapshot.drawings) === null || _snapshot$drawings === void 0 ? void 0 : _snapshot$drawings[drawingParam.drawingId];
+		if (drawing == null) return;
+		const { layoutType } = drawing;
+		const { positionH, positionV } = drawing.docTransform;
+		setHPosition(positionH);
+		setVPosition(positionV);
+		setDisabled(layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE);
+		setFollowTextMove(positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.PARAGRAPH || positionV.relativeFrom === _univerjs_core.ObjectRelativeFromV.LINE);
+	}
+	function updateFocusDrawingState() {
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		updateState(focusDrawings[0]);
+	}
+	function handleFollowTextMoveCheck(val) {
+		setFollowTextMove(val);
+		handleVerticalRelativeFromChange(val ? String(_univerjs_core.ObjectRelativeFromV.PARAGRAPH) : String(_univerjs_core.ObjectRelativeFromV.PAGE));
+	}
+	(0, react.useEffect)(() => {
+		updateFocusDrawingState();
+		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) {
+				setShowPanel(false);
+				return;
+			}
+			setShowPanel(true);
+			updateState(drawingParams[0]);
+		});
+		const mutationListener = commandService.onCommandExecuted(async (command) => {
+			if (command.id === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
+		});
+		return () => {
+			subscription.unsubscribe();
+			mutationListener.dispose();
+		};
+	}, []);
+	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": !showPanel }),
+		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-position.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-position.horizontal") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 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-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: hPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionH", {
+							relativeFrom: hPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-position.toTheRightOf") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					value: String(hPosition.relativeFrom),
+					disabled,
+					options: HORIZONTAL_RELATIVE_FROM,
+					onChange: handleHorizontalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-position.vertical") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 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-position.absolutePosition") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_OFFSET,
+					max: MAX_OFFSET,
+					precision: 1,
+					disabled,
+					value: vPosition.posOffset,
+					onChange: (val) => {
+						handlePositionChange("positionV", {
+							relativeFrom: vPosition.relativeFrom,
+							posOffset: val
+						});
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-position.bellow") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+					disabled,
+					value: String(vPosition.relativeFrom),
+					options: VERTICAL_RELATIVE_FROM,
+					onChange: handleVerticalRelativeFromChange
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-position.options") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+				disabled,
+				checked: followTextMove,
+				onChange: handleFollowTextMoveCheck,
+				children: localeService.t("image-position.moveObjectWithText")
+			}) })
+		]
+	});
+};
+
+//#endregion
+//#region src/views/doc-image-panel/DocDrawingTextWrap.tsx
+const MIN_MARGIN = 0;
+const MAX_MARGIN = 100;
+const DocDrawingTextWrap = (props) => {
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	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 univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const { drawings } = props;
+	const drawingParam = drawings[0];
+	if (drawingParam == null) return null;
+	const { unitId } = drawingParam;
+	const documentDataModel = univerInstanceService.getUniverDocInstance(unitId);
+	const renderObject = renderManagerService.getRenderById(unitId);
+	if ((renderObject === null || renderObject === void 0 ? void 0 : renderObject.scene) == null) return null;
+	const [disableWrapText, setDisableWrapText] = (0, react.useState)(true);
+	const [disableDistTB, setDisableDistTB] = (0, react.useState)(true);
+	const [disableDistLR, setDisableDistLR] = (0, react.useState)(true);
+	const [wrappingStyle, setWrappingStyle] = (0, react.useState)(TextWrappingStyle.INLINE);
+	const [wrapText, setWrapText] = (0, react.useState)("");
+	const [distToText, setDistToText] = (0, react.useState)({
+		distT: 0,
+		distL: 0,
+		distB: 0,
+		distR: 0
+	});
+	const [showPanel, setShowPanel] = (0, react.useState)(true);
+	function handleWrappingStyleChange(value) {
+		setWrappingStyle(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const { unitId, subUnitId } = focusDrawings[0];
+		const drawings = focusDrawings.map(({ unitId, subUnitId, drawingId }) => ({
+			unitId,
+			subUnitId,
+			drawingId
+		}));
+		commandService.executeCommand(UpdateDocDrawingWrappingStyleCommand.id, {
+			unitId,
+			subUnitId,
+			drawings,
+			wrappingStyle: value
+		});
+	}
+	function handleWrapTextChange(value) {
+		setWrapText(value);
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawings = focusDrawings.map((drawing) => {
+			return {
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId
+			};
+		});
+		commandService.executeCommand(UpdateDocDrawingWrapTextCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings,
+			wrapText: value
+		});
+	}
+	function handleDistToTextChange(value, direction) {
+		if (value == null) return;
+		setDistToText({
+			...distToText,
+			[direction]: value
+		});
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		const drawings = focusDrawings.map((drawing) => {
+			return {
+				unitId: drawing.unitId,
+				subUnitId: drawing.subUnitId,
+				drawingId: drawing.drawingId
+			};
+		});
+		commandService.executeCommand(UpdateDocDrawingDistanceCommand.id, {
+			unitId: focusDrawings[0].unitId,
+			subUnitId: focusDrawings[0].unitId,
+			drawings,
+			dist: { [direction]: value }
+		});
+	}
+	function updateFocusDrawingState() {
+		const focusDrawings = drawingManagerService.getFocusDrawings();
+		if (focusDrawings.length === 0) return;
+		updateState(focusDrawings[0]);
+	}
+	function updateState(drawingParam) {
+		var _documentDataModel$ge;
+		const drawing = documentDataModel === null || documentDataModel === void 0 || (_documentDataModel$ge = documentDataModel.getSnapshot()) === null || _documentDataModel$ge === void 0 || (_documentDataModel$ge = _documentDataModel$ge.drawings) === null || _documentDataModel$ge === void 0 ? void 0 : _documentDataModel$ge[drawingParam.drawingId];
+		if (drawing == null) return;
+		const { distT = 0, distL = 0, distB = 0, distR = 0, layoutType = _univerjs_core.PositionedObjectLayoutType.INLINE, behindDoc = _univerjs_core.BooleanNumber.FALSE, wrapText = _univerjs_core.WrapTextType.BOTH_SIDES } = drawing;
+		setDistToText({
+			distT,
+			distL,
+			distB,
+			distR
+		});
+		setWrapText(wrapText);
+		setDisableWrapText(layoutType !== _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE) setDisableDistTB(true);
+		else setDisableDistTB(false);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE || layoutType === _univerjs_core.PositionedObjectLayoutType.INLINE || layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM) setDisableDistLR(true);
+		else setDisableDistLR(false);
+		if (layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE) if (behindDoc === _univerjs_core.BooleanNumber.TRUE) setWrappingStyle(TextWrappingStyle.BEHIND_TEXT);
+		else setWrappingStyle(TextWrappingStyle.IN_FRONT_OF_TEXT);
+		else switch (layoutType) {
+			case _univerjs_core.PositionedObjectLayoutType.INLINE:
+				setWrappingStyle(TextWrappingStyle.INLINE);
+				break;
+			case _univerjs_core.PositionedObjectLayoutType.WRAP_SQUARE:
+				setWrappingStyle(TextWrappingStyle.WRAP_SQUARE);
+				break;
+			case _univerjs_core.PositionedObjectLayoutType.WRAP_TOP_AND_BOTTOM:
+				setWrappingStyle(TextWrappingStyle.WRAP_TOP_AND_BOTTOM);
+				break;
+			default: throw new Error(`Unsupported layout type: ${layoutType}`);
+		}
+	}
+	(0, react.useEffect)(() => {
+		updateFocusDrawingState();
+		const subscription = drawingManagerService.focus$.subscribe((drawingParams) => {
+			if (drawingParams.length === 0) {
+				setShowPanel(false);
+				return;
+			}
+			setShowPanel(true);
+			updateState(drawingParams[0]);
+		});
+		const mutationListener = commandService.onCommandExecuted(async (command) => {
+			if (command.id === _univerjs_docs.RichTextEditingMutation.id) updateFocusDrawingState();
+		});
+		return () => {
+			subscription.unsubscribe();
+			mutationListener.dispose();
+		};
+	}, []);
+	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": !showPanel }),
+		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-text-wrap.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-text-wrap.wrappingStyle") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+				value: wrappingStyle,
+				onChange: handleWrappingStyleChange,
+				direction: "vertical",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: TextWrappingStyle.INLINE,
+						children: localeService.t("image-text-wrap.inline")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: TextWrappingStyle.WRAP_SQUARE,
+						children: localeService.t("image-text-wrap.square")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: TextWrappingStyle.WRAP_TOP_AND_BOTTOM,
+						children: localeService.t("image-text-wrap.topAndBottom")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: TextWrappingStyle.BEHIND_TEXT,
+						children: localeService.t("image-text-wrap.behindText")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: TextWrappingStyle.IN_FRONT_OF_TEXT,
+						children: localeService.t("image-text-wrap.inFrontText")
+					})
+				]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-text-wrap.wrapText") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+				disabled: disableWrapText,
+				value: wrapText,
+				onChange: handleWrapTextChange,
+				direction: "horizontal",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.BOTH_SIDES,
+						children: localeService.t("image-text-wrap.bothSide")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.LEFT,
+						children: localeService.t("image-text-wrap.leftOnly")
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+						value: _univerjs_core.WrapTextType.RIGHT,
+						children: localeService.t("image-text-wrap.rightOnly")
+					})
+				]
+			}) }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-text-wrap.distanceFromText") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 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-text-wrap.top") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistTB,
+					precision: 1,
+					value: distToText.distT,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distT");
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-text-wrap.left") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistLR,
+					precision: 1,
+					value: distToText.distL,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distL");
+					}
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-2 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-text-wrap.bottom") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistTB,
+					precision: 1,
+					value: distToText.distB,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distB");
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-text-wrap.right") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: MIN_MARGIN,
+					max: MAX_MARGIN,
+					disabled: disableDistLR,
+					precision: 1,
+					value: distToText.distR,
+					onChange: (val) => {
+						handleDistToTextChange(val, "distR");
+					}
+				})] })]
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/views/doc-image-panel/DocDrawingPanel.tsx
+const DocDrawingPanel = () => {
+	const drawingManagerService = (0, _univerjs_ui.useDependency)(_univerjs_drawing.IDrawingManagerService);
+	const [drawings, setDrawings] = (0, react.useState)(drawingManagerService.getFocusDrawings());
+	(0, react.useEffect)(() => {
+		const focusDispose = drawingManagerService.focus$.subscribe((drawings) => {
+			setDrawings(drawings);
+		});
+		return () => {
+			focusDispose.unsubscribe();
+		};
+	}, []);
+	return !!(drawings === null || drawings === void 0 ? void 0 : drawings.length) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_drawing_ui.DrawingCommonPanel, {
+				drawings,
+				hasAlign: false,
+				hasCropper: false,
+				hasGroup: false,
+				hasTransform: false
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingTextWrap, { drawings }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocDrawingPosition, { drawings })
+		]
+	});
+};
+
+//#endregion
+//#region src/controllers/shortcuts/drawing.shortcut.ts
+function whenDocDrawingFocused(contextService) {
+	return contextService.getContextValue(_univerjs_core.FOCUSING_DOC) && contextService.getContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS);
+}
+const MoveDrawingDownShortcutItem = {
+	id: MoveDocDrawingsCommand.id,
+	description: "shortcut.drawing-move-down",
+	group: "4_drawing-view",
+	binding: _univerjs_ui.KeyCode.ARROW_DOWN,
+	priority: 100,
+	preconditions: whenDocDrawingFocused,
+	staticParameters: { direction: _univerjs_core.Direction.DOWN }
+};
+const MoveDrawingUpShortcutItem = {
+	id: MoveDocDrawingsCommand.id,
+	description: "shortcut.drawing-move-up",
+	group: "4_drawing-view",
+	binding: _univerjs_ui.KeyCode.ARROW_UP,
+	priority: 100,
+	preconditions: whenDocDrawingFocused,
+	staticParameters: { direction: _univerjs_core.Direction.UP }
+};
+const MoveDrawingLeftShortcutItem = {
+	id: MoveDocDrawingsCommand.id,
+	description: "shortcut.drawing-move-left",
+	group: "4_drawing-view",
+	binding: _univerjs_ui.KeyCode.ARROW_LEFT,
+	priority: 100,
+	preconditions: whenDocDrawingFocused,
+	staticParameters: { direction: _univerjs_core.Direction.LEFT }
+};
+const MoveDrawingRightShortcutItem = {
+	id: MoveDocDrawingsCommand.id,
+	description: "shortcut.drawing-move-right",
+	group: "4_drawing-view",
+	binding: _univerjs_ui.KeyCode.ARROW_RIGHT,
+	priority: 100,
+	preconditions: whenDocDrawingFocused,
+	staticParameters: { direction: _univerjs_core.Direction.RIGHT }
+};
+const DeleteDrawingsShortcutItem = {
+	id: DeleteDocDrawingsCommand.id,
+	description: "shortcut.drawing-delete",
+	group: "4_drawing-view",
+	preconditions: whenDocDrawingFocused,
+	binding: _univerjs_ui.KeyCode.DELETE,
+	mac: _univerjs_ui.KeyCode.BACKSPACE
+};
+
+//#endregion
+//#region src/controllers/doc-drawing.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 DocDrawingUIController = class DocDrawingUIController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _menuManagerService, _commandService, _shortcutService) {
+		super();
+		this._componentManager = _componentManager;
+		this._menuManagerService = _menuManagerService;
+		this._commandService = _commandService;
+		this._shortcutService = _shortcutService;
+		this._init();
+	}
+	_initCustomComponents() {
+		const componentManager = this._componentManager;
+		this.disposeWithMe(componentManager.register(COMPONENT_DOC_DRAWING_PANEL, DocDrawingPanel));
+	}
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+	_initCommands() {
+		[
+			InsertDocImageCommand,
+			InsertDocDrawingCommand,
+			UpdateDocDrawingWrappingStyleCommand,
+			UpdateDocDrawingDistanceCommand,
+			UpdateDocDrawingWrapTextCommand,
+			UpdateDrawingDocTransformCommand,
+			IMoveInlineDrawingCommand,
+			ITransformNonInlineDrawingCommand,
+			RemoveDocDrawingCommand,
+			SidebarDocDrawingOperation,
+			ClearDocDrawingTransformerOperation,
+			EditDocDrawingOperation,
+			GroupDocDrawingCommand,
+			UngroupDocDrawingCommand,
+			MoveDocDrawingsCommand,
+			DeleteDocDrawingsCommand,
+			SetDocDrawingArrangeCommand
+		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+	}
+	_initShortcuts() {
+		[
+			MoveDrawingDownShortcutItem,
+			MoveDrawingUpShortcutItem,
+			MoveDrawingLeftShortcutItem,
+			MoveDrawingRightShortcutItem,
+			DeleteDrawingsShortcutItem
+		].forEach((item) => {
+			this.disposeWithMe(this._shortcutService.registerShortcut(item));
+		});
+	}
+	_init() {
+		this._initCommands();
+		this._initCustomComponents();
+		this._initMenus();
+		this._initShortcuts();
+	}
+};
+DocDrawingUIController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(1, _univerjs_ui.IMenuManagerService),
+	__decorateParam(2, _univerjs_core.ICommandService),
+	__decorateParam(3, _univerjs_ui.IShortcutService)
+], DocDrawingUIController);
+
+//#endregion
+//#region src/controllers/render-controllers/doc-drawing-transform-update.controller.ts
+let DocDrawingTransformUpdateController = class DocDrawingTransformUpdateController extends _univerjs_core.Disposable {
+	constructor(_context, _docSkeletonManagerService, _commandService, _editorService, _drawingManagerService, _docRefreshDrawingsService, _univerInstanceService, _lifecycleService) {
+		super();
+		this._context = _context;
+		this._docSkeletonManagerService = _docSkeletonManagerService;
+		this._commandService = _commandService;
+		this._editorService = _editorService;
+		this._drawingManagerService = _drawingManagerService;
+		this._docRefreshDrawingsService = _docRefreshDrawingsService;
+		this._univerInstanceService = _univerInstanceService;
+		this._lifecycleService = _lifecycleService;
+		_defineProperty(this, "_liquid", new _univerjs_engine_render.Liquid());
+		this._initialize();
+		this._commandExecutedListener();
+	}
+	_initialize() {
+		this._initialRenderRefresh();
+		this._drawingInitializeListener();
+		this._initResize();
+	}
+	_initialRenderRefresh() {
+		this.disposeWithMe(this._docSkeletonManagerService.currentSkeleton$.subscribe((documentSkeleton) => {
+			if (documentSkeleton == null) return;
+			this._refreshDrawing(documentSkeleton);
+		}));
+		this.disposeWithMe(this._docRefreshDrawingsService.refreshDrawings$.subscribe((skeleton) => {
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_commandExecutedListener() {
+		const updateCommandList = [_univerjs_docs.RichTextEditingMutation.id, _univerjs_docs_ui.SetDocZoomRatioOperation.id];
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (updateCommandList.includes(command.id)) {
+				const { unitId: commandUnitId } = command.params;
+				const { unitId, mainComponent } = this._context;
+				if (commandUnitId !== unitId) return;
+				const skeleton = this._docSkeletonManagerService.getSkeleton();
+				if (skeleton == null) return;
+				if (this._editorService.isEditor(unitId) && unitId !== _univerjs_core.DOCS_ZEN_EDITOR_UNIT_ID_KEY) {
+					mainComponent === null || mainComponent === void 0 || mainComponent.makeDirty();
+					return;
+				}
+				this._refreshDrawing(skeleton);
+			}
+		}));
+	}
+	_initResize() {
+		this.disposeWithMe((0, _univerjs_core.fromEventSubject)(this._context.engine.onTransformChange$).pipe((0, rxjs.filter)((evt) => evt.type === _univerjs_engine_render.TRANSFORM_CHANGE_OBSERVABLE_TYPE.resize), (0, rxjs.debounceTime)(16)).subscribe(() => {
+			var _scene$getTransformer;
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			const { scene } = this._context;
+			(_scene$getTransformer = scene.getTransformer()) === null || _scene$getTransformer === void 0 || _scene$getTransformer.refreshControls();
+			this._refreshDrawing(skeleton);
+		}));
+	}
+	_refreshDrawing(skeleton) {
+		const skeletonData = skeleton === null || skeleton === void 0 ? void 0 : skeleton.getSkeletonData();
+		const { mainComponent, unitId } = this._context;
+		const documentComponent = mainComponent;
+		if (!skeletonData) return;
+		const { left: docsLeft, top: docsTop, pageLayoutType, pageMarginLeft, pageMarginTop } = documentComponent;
+		const { pages, skeHeaders, skeFooters } = skeletonData;
+		const updateDrawingMap = {};
+		this._liquid.reset();
+		/**
+		* TODO: @DR-Univer We should not refresh all floating elements, but instead make a diff.
+		*/
+		for (let i = 0, len = pages.length; i < len; i++) {
+			const page = pages[i];
+			const { headerId, footerId, pageWidth } = page;
+			if (headerId) {
+				var _skeHeaders$get;
+				const headerPage = (_skeHeaders$get = skeHeaders.get(headerId)) === null || _skeHeaders$get === void 0 ? void 0 : _skeHeaders$get.get(pageWidth);
+				if (headerPage) this._calculateDrawingPosition(unitId, headerPage, docsLeft, docsTop, updateDrawingMap, headerPage.marginTop, page.marginLeft);
+			}
+			if (footerId) {
+				var _skeFooters$get;
+				const footerPage = (_skeFooters$get = skeFooters.get(footerId)) === null || _skeFooters$get === void 0 ? void 0 : _skeFooters$get.get(pageWidth);
+				if (footerPage) this._calculateDrawingPosition(unitId, footerPage, docsLeft, docsTop, updateDrawingMap, page.pageHeight - page.marginBottom + footerPage.marginTop, page.marginLeft);
+			}
+			this._calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, page.marginTop, page.marginLeft);
+			this._liquid.translatePage(page, pageLayoutType, pageMarginLeft, pageMarginTop);
+		}
+		const updateDrawings = Object.values(updateDrawingMap);
+		const nonMultiDrawings = updateDrawings.filter((drawing) => !drawing.isMultiTransform);
+		const multiDrawings = updateDrawings.filter((drawing) => drawing.isMultiTransform);
+		if (nonMultiDrawings.length > 0) this._drawingManagerService.refreshTransform(nonMultiDrawings);
+		this._handleMultiDrawingsTransform(multiDrawings);
+	}
+	_handleMultiDrawingsTransform(multiDrawings) {
+		const { scene, unitId } = this._context;
+		const transformer = scene.getTransformerByCreate();
+		multiDrawings.forEach((updateParam) => {
+			const param = this._drawingManagerService.getDrawingByParam(updateParam);
+			if (param == null) return;
+			param.transform = updateParam.transform;
+			param.transforms = updateParam.transforms;
+			param.isMultiTransform = updateParam.isMultiTransform;
+		});
+		const selectedObjectKeys = [...transformer.getSelectedObjectMap().keys()];
+		const allMultiDrawings = Object.values(this._drawingManagerService.getDrawingData(unitId, unitId)).filter((drawing) => drawing.isMultiTransform === _univerjs_core.BooleanNumber.TRUE);
+		this._drawingManagerService.removeNotification(allMultiDrawings);
+		if (multiDrawings.length > 0) this._drawingManagerService.addNotification(multiDrawings);
+		for (const key of selectedObjectKeys) {
+			const drawingShape = scene.getObject(key);
+			if (drawingShape) transformer.setSelectedControl(drawingShape);
+		}
+	}
+	_calculateDrawingPosition(unitId, page, docsLeft, docsTop, updateDrawingMap, marginTop, marginLeft) {
+		const { skeDrawings } = page;
+		this._liquid.translatePagePadding({
+			marginTop,
+			marginLeft
+		});
+		skeDrawings.forEach((drawing) => {
+			const { aLeft, aTop, height, width, angle, drawingId, drawingOrigin } = drawing;
+			const behindText = drawingOrigin.layoutType === _univerjs_core.PositionedObjectLayoutType.WRAP_NONE && drawingOrigin.behindDoc === _univerjs_core.BooleanNumber.TRUE;
+			const { isMultiTransform = _univerjs_core.BooleanNumber.FALSE } = drawingOrigin;
+			const transform = {
+				left: aLeft + docsLeft + this._liquid.x,
+				top: aTop + docsTop + this._liquid.y,
+				width,
+				height,
+				angle
+			};
+			if (updateDrawingMap[drawingId] == null) updateDrawingMap[drawingId] = {
+				unitId,
+				subUnitId: unitId,
+				drawingId,
+				behindText,
+				transform,
+				transforms: [transform],
+				isMultiTransform
+			};
+			else if (isMultiTransform === _univerjs_core.BooleanNumber.TRUE) updateDrawingMap[drawingId].transforms.push(transform);
+		});
+		this._liquid.restorePagePadding({
+			marginTop,
+			marginLeft
+		});
+	}
+	_drawingInitializeListener() {
+		const init = () => {
+			const skeleton = this._docSkeletonManagerService.getSkeleton();
+			if (skeleton == null) return;
+			this._refreshDrawing(skeleton);
+			this._drawingManagerService.initializeNotification(this._context.unitId);
+		};
+		if (this._lifecycleService.stage >= _univerjs_core.LifecycleStages.Rendered) if (this._docSkeletonManagerService.getSkeleton()) init();
+		else setTimeout(init, 500);
+		else this.disposeWithMe(this._lifecycleService.lifecycle$.pipe((0, rxjs.filter)((stage) => stage === _univerjs_core.LifecycleStages.Rendered)).subscribe(init));
+	}
+};
+DocDrawingTransformUpdateController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs.DocSkeletonManagerService)),
+	__decorateParam(2, _univerjs_core.ICommandService),
+	__decorateParam(3, _univerjs_docs_ui.IEditorService),
+	__decorateParam(4, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(5, (0, _univerjs_core.Inject)(DocRefreshDrawingsService)),
+	__decorateParam(6, _univerjs_core.IUniverInstanceService),
+	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_core.LifecycleService))
+], DocDrawingTransformUpdateController);
+
+//#endregion
+//#region src/menu/drawing-popup-menu.controller.ts
+let DocDrawingPopupMenuController = class DocDrawingPopupMenuController extends _univerjs_core.RxDisposable {
+	constructor(_drawingManagerService, _canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService) {
+		super();
+		this._drawingManagerService = _drawingManagerService;
+		this._canvasPopManagerService = _canvasPopManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._contextService = _contextService;
+		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+		_defineProperty(this, "_disposePopups", []);
+		this._init();
+	}
+	_init() {
+		this.disposeWithMe(this._univerInstanceService.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((documentDataModel) => this._create(documentDataModel)));
+		this.disposeWithMe(this._univerInstanceService.getTypeOfUnitDisposed$(_univerjs_core.UniverInstanceType.UNIVER_DOC).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((documentDataModel) => this._dispose(documentDataModel)));
+		this._univerInstanceService.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_DOC).forEach((documentDataModel) => this._create(documentDataModel));
+	}
+	_dispose(documentDataModel) {
+		const unitId = documentDataModel.getUnitId();
+		if (this._disposePopups.length) {
+			this._disposePopups.forEach((dispose) => dispose.dispose());
+			this._disposePopups.length = 0;
+		}
+		this._renderManagerService.removeRender(unitId);
+	}
+	_create(documentDataModel) {
+		if (!documentDataModel) return;
+		const unitId = documentDataModel.getUnitId();
+		if ((0, _univerjs_core.isInternalEditorID)(unitId)) return;
+		if (this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId)) {
+			this._popupMenuListener(unitId);
+			this._initImagePopupMenu.add(unitId);
+		}
+	}
+	_hasCropObject(scene) {
+		const objects = scene.getAllObjects();
+		for (const object of objects) if (object instanceof _univerjs_drawing_ui.ImageCropperObject) return true;
+		return false;
+	}
+	_popupMenuListener(unitId) {
+		var _this$_renderManagerS;
+		const scene = (_this$_renderManagerS = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.scene;
+		if (!scene) return;
+		const transformer = scene.getTransformerByCreate();
+		if (!transformer) return;
+		const disposePopups = this._disposePopups;
+		this.disposeWithMe(transformer.createControl$.subscribe(() => {
+			if (this._hasCropObject(scene)) return;
+			const selectedObjects = transformer.getSelectedObjectMap();
+			disposePopups.forEach((dispose) => dispose.dispose());
+			disposePopups.length = 0;
+			if (selectedObjects.size > 1) return;
+			const object = selectedObjects.values().next().value;
+			if (!object) return;
+			const oKey = object.oKey;
+			const drawingParam = this._drawingManagerService.getDrawingOKey(oKey);
+			if (!drawingParam || drawingParam.drawingType === _univerjs_core.DrawingTypeEnum.DRAWING_DOM) return;
+			const { unitId, subUnitId, drawingId, drawingType } = drawingParam;
+			const popup = this._canvasPopManagerService.attachPopupToObject(object, {
+				componentKey: _univerjs_drawing_ui.COMPONENT_IMAGE_POPUP_MENU,
+				direction: "horizontal",
+				offset: [2, 0],
+				extraProps: { menuItems: this._getImageMenuItems(unitId, subUnitId, drawingId, drawingType) }
+			}, unitId);
+			disposePopups.push(this.disposeWithMe(popup));
+			if (this._drawingManagerService.getFocusDrawings().find((drawing) => drawing.unitId === unitId && drawing.subUnitId === subUnitId && drawing.drawingId === drawingId)) return;
+			this._drawingManagerService.focusDrawing([{
+				unitId,
+				subUnitId,
+				drawingId
+			}]);
+		}));
+		this.disposeWithMe(transformer.clearControl$.subscribe(() => {
+			disposePopups.forEach((dispose) => dispose.dispose());
+			disposePopups.length = 0;
+			this._contextService.setContextValue(_univerjs_core.FOCUSING_COMMON_DRAWINGS, false);
+			this._drawingManagerService.focusDrawing(null);
+		}));
+		this.disposeWithMe(transformer.changing$.subscribe(() => {
+			disposePopups.forEach((dispose) => dispose.dispose());
+			disposePopups.length = 0;
+		}));
+		this.disposeWithMe(transformer.changeStart$.subscribe(() => {
+			disposePopups.forEach((dispose) => dispose.dispose());
+			disposePopups.length = 0;
+		}));
+	}
+	_getImageMenuItems(unitId, subUnitId, drawingId, drawingType) {
+		return [
+			{
+				label: "image-popup.edit",
+				index: 0,
+				commandId: EditDocDrawingOperation.id,
+				commandParams: {
+					unitId,
+					subUnitId,
+					drawingId
+				},
+				disable: true
+			},
+			{
+				label: "image-popup.delete",
+				index: 1,
+				commandId: RemoveDocDrawingCommand.id,
+				commandParams: {
+					unitId,
+					drawings: [{
+						unitId,
+						subUnitId,
+						drawingId
+					}]
+				},
+				disable: false
+			},
+			{
+				label: "image-popup.crop",
+				index: 2,
+				commandId: _univerjs_drawing_ui.OpenImageCropOperation.id,
+				commandParams: {
+					unitId,
+					subUnitId,
+					drawingId
+				},
+				disable: true
+			},
+			{
+				label: "image-popup.reset",
+				index: 3,
+				commandId: _univerjs_drawing_ui.ImageResetSizeOperation.id,
+				commandParams: [{
+					unitId,
+					subUnitId,
+					drawingId
+				}],
+				disable: true
+			}
+		];
+	}
+};
+DocDrawingPopupMenuController = __decorate([
+	__decorateParam(0, _univerjs_drawing.IDrawingManagerService),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_docs_ui.DocCanvasPopManagerService)),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(3, _univerjs_core.IUniverInstanceService),
+	__decorateParam(4, _univerjs_core.IContextService)
+], DocDrawingPopupMenuController);
+
+//#endregion
+//#region src/plugin.ts
+let UniverDocsDrawingUIPlugin = class UniverDocsDrawingUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _renderManagerSrv, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._renderManagerSrv = _renderManagerSrv;
+		this._configService = _configService;
+		const { ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		this._configService.setConfig(DOCS_DRAWING_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		[
+			[DocDrawingUIController],
+			[DocDrawingPopupMenuController],
+			[DocDrawingTransformerController],
+			[DocDrawingAddRemoveController],
+			[DocRefreshDrawingsService],
+			[DocFloatDomController],
+			[DocDrawingPrintingController]
+		].forEach((dependency) => this._injector.add(dependency));
+	}
+	onReady() {
+		[[DocDrawingUpdateRenderController], [DocDrawingTransformUpdateController]].forEach((m) => this._renderManagerSrv.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_DOC, m));
+		this._injector.get(DocDrawingAddRemoveController);
+		this._injector.get(DocDrawingUIController);
+		this._injector.get(DocDrawingTransformerController);
+		this._injector.get(DocDrawingPrintingController);
+	}
+	onRendered() {
+		this._injector.get(DocDrawingPopupMenuController);
+		this._injector.get(DocFloatDomController);
+	}
+};
+_defineProperty(UniverDocsDrawingUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_DOC);
+_defineProperty(UniverDocsDrawingUIPlugin, "pluginName", "DOC_DRAWING_UI_PLUGIN");
+_defineProperty(UniverDocsDrawingUIPlugin, "packageName", name);
+_defineProperty(UniverDocsDrawingUIPlugin, "version", version);
+UniverDocsDrawingUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_drawing_ui.UniverDrawingUIPlugin, _univerjs_drawing.UniverDrawingPlugin, _univerjs_docs_drawing.UniverDocsDrawingPlugin, _univerjs_ui.UniverUIPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(3, _univerjs_core.IConfigService)
+], UniverDocsDrawingUIPlugin);
+
+//#endregion
+exports.ClearDocDrawingTransformerOperation = ClearDocDrawingTransformerOperation;
+exports.DOCS_IMAGE_MENU_ID = DOCS_IMAGE_MENU_ID;
+exports.DeleteDocDrawingsCommand = DeleteDocDrawingsCommand;
+Object.defineProperty(exports, 'DocFloatDomController', {
+  enumerable: true,
+  get: function () {
+    return DocFloatDomController;
+  }
+});
+exports.EditDocDrawingOperation = EditDocDrawingOperation;
+exports.GroupDocDrawingCommand = GroupDocDrawingCommand;
+exports.InsertDocDrawingCommand = InsertDocDrawingCommand;
+exports.InsertDocImageCommand = InsertDocImageCommand;
+exports.MoveDocDrawingsCommand = MoveDocDrawingsCommand;
+exports.RemoveDocDrawingCommand = RemoveDocDrawingCommand;
+exports.SetDocDrawingArrangeCommand = SetDocDrawingArrangeCommand;
+exports.SidebarDocDrawingOperation = SidebarDocDrawingOperation;
+exports.UngroupDocDrawingCommand = UngroupDocDrawingCommand;
+Object.defineProperty(exports, 'UniverDocsDrawingUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverDocsDrawingUIPlugin;
+  }
+});