@univerjs/slides-ui 0.20.1 → 0.21.0

package/lib/es/index.js

@@ -1 +1,2701 @@
-import{BasicShapes as e,CommandType as t,DEFAULT_EMPTY_DOCUMENT_VALUE as n,Direction as r,Disposable as i,DisposableCollection as a,DocumentDataModel as o,DocumentFlavor as s,EDITOR_ACTIVATED as c,FOCUSING_COMMON_DRAWINGS as l,FOCUSING_EDITOR_BUT_HIDDEN as u,FOCUSING_EDITOR_STANDALONE as d,FOCUSING_UNIVER_EDITOR as f,FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE as p,FORMULA_EDITOR_ACTIVATED as m,HorizontalAlign as h,ICommandService as g,IConfigService as _,IContextService as v,IUndoRedoService as y,IUniverInstanceService as b,Inject as x,Injector as S,LocaleService as C,PageElementType as w,Plugin as T,RxDisposable as E,UniverInstanceType as D,VerticalAlign as O,WrapStrategy as k,createIdentifier as ee,createInternalEditorID as te,debounce as ne,generateRandomId as re,getColorStyle as ie,merge as ae,mergeOverrideWithDependencies as oe,toDisposable as se}from"@univerjs/core";import{DeviceInputEventType as A,FIX_ONE_PIXEL_BLUR_OFFSET as j,IRenderManagerService as M,ObjectType as ce,Rect as le,Scene as ue,ScrollBar as de,Slide as fe,Viewport as pe,convertTextRotation as me,fixLineWidthByScale as he,getCurrentTypeOfRenderer as ge,pxToNum as _e}from"@univerjs/engine-render";import{ObjectProvider as ve,SLIDE_KEY as N}from"@univerjs/slides";import{DRAWING_IMAGE_ALLOW_IMAGE_LIST as ye,IImageIoService as be,getImageSize as xe}from"@univerjs/drawing";import{BuiltInUIPart as Se,ComponentManager as Ce,DISABLE_AUTO_FOCUS_KEY as we,ICanvasPopupService as Te,ILayoutService as Ee,ILocalFileService as De,IMenuManagerService as Oe,IShortcutService as ke,ISidebarService as Ae,IUIPartsService as je,KeyCode as P,MenuItemType as F,MetaKeys as Me,RibbonStartGroup as Ne,connectInjector as Pe,getMenuHiddenObservable as I,useDependency as L,useObservable as Fe}from"@univerjs/ui";import{Button as Ie,ColorPicker as Le,Dropdown as Re,InputNumber as ze,borderClassName as Be,borderTopClassName as Ve,clsx as R,scrollbarClassName as He}from"@univerjs/design";import{AutofillDoubleIcon as Ue,BottomIcon as We,GraphIcon as Ge,MoreDownIcon as Ke,MoveDownIcon as qe,MoveUpIcon as Je,PaintBucketDoubleIcon as Ye,TextIcon as Xe,TopmostIcon as Ze}from"@univerjs/icons";import{jsx as z,jsxs as B}from"react/jsx-runtime";import{createRef as Qe,useCallback as $e,useEffect as V,useMemo as et,useRef as tt,useState as H}from"react";import{DOCS_COMPONENT_MAIN_LAYER_INDEX as nt,DOCS_VIEW_KEY as rt,DeleteLeftCommand as it,DocSelectionRenderService as at,IEditorService as ot,MoveCursorOperation as st,MoveSelectionOperation as ct,VIEWPORT_KEY as lt}from"@univerjs/docs-ui";import{BehaviorSubject as U,Subject as ut,filter as dt,takeUntil as ft}from"rxjs";import{DocSelectionManagerService as pt,DocSkeletonManagerService as mt,RichTextEditingMutation as ht}from"@univerjs/docs";function W(e){"@babel/helpers - typeof";return W=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},W(e)}function gt(e,t){if(W(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(W(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function _t(e){var t=gt(e,`string`);return W(t)==`symbol`?t:t+``}function G(e,t,n){return(t=_t(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function K(e,t){return function(n,r){t(n,r,e)}}function q(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 vt=class extends E{constructor(e,t,n,r){super(),this._renderContext=e,this._injector=t,this._univerInstanceService=n,this._renderManagerService=r,G(this,`_objectProvider`,null),G(this,`_refreshThumb`,ne(()=>{this.createThumbs()},300)),this._objectProvider=this._injector.createInstance(ve),this._addNewRender()}_addNewRender(){let{unitId:e,engine:t,scene:n}=this._renderContext,r=this._getCurrUnitModel();if(!r)return;let i=t.onTransformChange$.subscribeEvent(()=>{this._scrollToCenter(),i==null||i.unsubscribe()});t.onTransformChange$.subscribeEvent(()=>{setTimeout(()=>{this.createThumbs()},300)});let a=new pe(N.VIEW,n,{left:0,top:0,bottom:0,right:0,explicitViewportWidthSet:!1,explicitViewportHeightSet:!1,isWheelPreventDefaultX:!0});n.attachControl(),n.onMouseWheel$.subscribeEvent((e,t)=>{let r=e;if(r.ctrlKey){let e=Math.abs(r.deltaX),t=e<40?.2:e<80?.4:.2;t*=r.deltaY>0?-1:1,n.scaleX<1&&(t/=2),n.scaleX+t>4?n.scale(4,4):n.scaleX+t<.1?n.scale(.1,.1):(r.deltaY,r.preventDefault())}else a.onMouseWheel(r,t)}),n.onFileLoaded$.subscribeEvent(()=>{this._refreshThumb()}),de.attachTo(a);let o=this._createSlide(n);this._renderContext.mainComponent=o,this._createSlidePages(r,o),this.createThumbs(),t.runRenderLoop(()=>{n.render()})}_scrollToCenter(){var e;let t=(e=this._currentRender())==null?void 0:e.scene,n=t==null?void 0:t.getViewport(N.VIEW),r=this._getCenterPositionViewPort(t);if(!n||!r)return;let{left:i,top:a}=r,{x:o,y:s}=n.transViewportScroll2ScrollValue(i,a);n.scrollToBarPos({x:o,y:s})}_currentRender(){return ge(D.UNIVER_SLIDE,this._univerInstanceService,this._renderManagerService)}_createSlide(e){let t=this._univerInstanceService.getCurrentUnitForType(D.UNIVER_SLIDE),{width:n,height:r}=e,{width:i=100,height:a=100}=t.getPageSize(),o=new fe(N.COMPONENT,{left:(n-i)/2,top:(r-a)/2,width:i,height:a,zIndex:10});return o.enableSelectedClipElement(),e.addObject(o),o}_addBackgroundRect(e,t){let{width:n=0,height:r=0}=this._univerInstanceService.getCurrentUnitForType(D.UNIVER_SLIDE).getPageSize(),i=new le(`canvas`,{left:0,top:0,width:n,height:r,strokeWidth:1,stroke:`rgba(198,198,198,1)`,fill:ie(t)||`rgba(255,255,255,1)`,zIndex:0,evented:!1});e.addObject(i,0)}_getCenterPositionViewPort(e){if(!e)return{left:0,top:0};let{width:t,height:n}=e,r=e.getEngine(),i=(r==null?void 0:r.width)||0,a=(r==null?void 0:r.height)||0;return{left:(t-i)/2,top:(n-a)/2}}_thumbSceneRender(e,t){let n=this._renderManagerService.getRenderById(e);if(n==null)return;let{engine:r}=n;if(r==null)return;let{width:i,height:a}=t,{width:o=i,height:s=a}=r,c=r.getCanvas().getContext();t.renderToThumb(c,e,o/i,s/a)}_createSlidePages(e,t){let n=e.getPages(),r=e.getPageOrder();if(!(!n||!r)&&r.length!==0){for(let e=0,t=r.length;e<t;e++){let t=r[e];this.createPageScene(t,n[t]),this._createThumb(t)}t.activeFirstPage()}}_createThumb(e){this._renderManagerService.createRender(e)}_getCurrUnitModel(){return this._renderContext.unit}activePage(e){let t=e,n=this._getCurrUnitModel(),r;if(t)r=n.getPage(t);else{let e=n.getPages(),i=n.getPageOrder();if(i==null||e==null)return;r=e[i[0]],t=r.id}let i=this._currentRender();if(r==null||i==null||i.mainComponent==null)return;let{id:a}=r,o=i.mainComponent;if(n.setActivePage(r),o!=null&&o.hasPage(a)){o.changePage(a);return}this.createPageScene(a,r)}createThumbs(){let e=this._getCurrUnitModel().getPageOrder(),t=this._currentRender();if(!(!e||!t)&&e.length!==0)for(let n=0,r=e.length;n<r;n++){let r=e[n];this._thumbSceneRender(r,t.mainComponent)}}createPageScene(e,t){let n=this._renderContext;if(!n||!this._objectProvider)return;let{scene:r,mainComponent:i}=n,a=i,{width:o,height:s}=a,c=new ue(e,a,{width:o,height:s});new pe(`PageViewer_${e}`,c,{left:0,top:0,bottom:0,right:0,explicitViewportWidthSet:!1,explicitViewportHeightSet:!1}).closeClip();let{pageElements:l,pageBackgroundFill:u}=t,d=this._objectProvider.convertToRenderObjects(l,r);if(!d||!a)return;this._addBackgroundRect(c,u),c.addObjects(d),c.initTransformer(),d.forEach(e=>{c.attachTransformerTo(e)});let f=c.getTransformer();return f==null||f.changeEnd$.subscribe(()=>{this._thumbSceneRender(e,a)}),f==null||f.clearControl$.subscribe(()=>{this._thumbSceneRender(e,a)}),a.addPageScene(c),c}getPageRenderUnit(e){let t=this._renderContext.mainComponent.getSubScenes().get(e),{engine:n,unit:r}=this._renderContext;return{scene:t,engine:n,unit:r}}createObjectToPage(e,t){let{scene:n}=this.getPageRenderUnit(t);if(!n||!this._objectProvider)return;let r=this._objectProvider.convertToRenderObject(e,n);if(r)return n.addObject(r),n.attachTransformerTo(r),n.getLayer().makeDirty(),r}setObjectActiveByPage(e,t){let{scene:n}=this.getPageRenderUnit(t);if(!n)return;let r=n.getTransformer();r==null||r.activeAnObject(e)}removeObjectById(e,t){let{scene:n}=this.getPageRenderUnit(t);if(!n)return;n.removeObject(e);let r=n.getTransformer();r==null||r.clearControls()}appendPage(){let e=this._getCurrUnitModel(),t=e.getBlankPage(),n=this._currentRender();if(t==null||n==null||n.mainComponent==null)return;let{id:r}=t,i=n.mainComponent,a=this.createPageScene(r,t);i&&a&&i.addPageScene(a),e.appendPage(t),e.setActivePage(t)}};vt=q([K(1,x(S)),K(2,b),K(3,M)],vt);let J=class extends E{constructor(e){super(),this._renderManagerService=e}_getSlideRenderControllerFromRenderUnit(e){return this._renderManagerService.getRenderById(e).with(vt)}createThumbs(e){this._getSlideRenderControllerFromRenderUnit(e).createThumbs()}activePage(e,t){this._getSlideRenderControllerFromRenderUnit(t).activePage(e)}getRenderUnitByPageId(e,t){return this._getSlideRenderControllerFromRenderUnit(t).getPageRenderUnit(e)}createObjectToPage(e,t,n){return this._getSlideRenderControllerFromRenderUnit(n).createObjectToPage(e,t)}setObjectActiveByPage(e,t,n){return this._getSlideRenderControllerFromRenderUnit(n).setObjectActiveByPage(e,t)}removeObjectById(e,t,n){this._getSlideRenderControllerFromRenderUnit(n).removeObjectById(e,t)}appendPage(e){this._getSlideRenderControllerFromRenderUnit(e).appendPage()}};J=q([K(0,M)],J);const yt={id:`slide.operation.activate-slide`,type:t.OPERATION,handler:(e,t)=>{var n,r;let i=t.unitId,a=e.get(J),o=e.get(b).getUnit(i),s=o==null||(n=o.getActivePage())==null?void 0:n.id;if(!s)return!1;let c=a.getRenderUnitByPageId(s,i);if(!c)return!1;let l=(r=c.scene)==null?void 0:r.getTransformer();return l&&l.clearControls(),a.activePage(t.id,i),!0}},bt={id:`slide.operation.append-slide`,type:t.OPERATION,handler:(e,t)=>{let n=t.unitId;return e.get(b).getUnit(n)?(e.get(J).appendPage(n),!0):!1}},xt={id:`slide.operation.delete-element`,type:t.OPERATION,handler:(e,t)=>{if(!(t!=null&&t.id))return!1;let n=t.unitId,r=e.get(b).getUnit(n);if(!r)return!1;let i=r.getActivePage();return delete i.pageElements[t.id],r.updatePage(i.id,i),e.get(J).removeObjectById(t.id,i.id,n),!0}},St={id:`slide.command.insert-float-image`,type:t.COMMAND,handler:async(e,t)=>{var n;let r=e.get(b),i=(n=r.getCurrentUnitForType(D.UNIVER_SLIDE))==null?void 0:n.getUnitId();if(!i)return!1;let a=await e.get(De).openFile({multiple:!0,accept:ye.map(e=>`.${e.replace(`image/`,``)}`).join(`,`)});if(a.length!==1)return!1;let o=await e.get(be).saveImage(a[0]);if(!o)return!1;let{imageId:s,imageSourceType:c,source:l,base64Cache:u}=o,{width:d,height:f,image:p}=await xe(u||``),m=r.getUnit(i);if(!m)return!1;let h=m.getActivePage(),g=Object.values(h.pageElements),_={id:s,zIndex:(g!=null&&g.length?Math.max(...g.map(e=>e.zIndex)):20)+1,left:0,top:0,width:d,height:f,title:``,description:``,type:w.IMAGE,image:{imageProperties:{contentUrl:u,imageSourceType:c,source:l,base64Cache:u,image:p}}};h.pageElements[s]=_,m.updatePage(h.id,h);let v=e.get(J),y=v.createObjectToPage(_,h.id,i);return y&&v.setObjectActiveByPage(y,h.id,i),!0}},Y={id:`slide.operation.update-element`,type:t.OPERATION,handler:(e,t)=>{let{oKey:n,props:r}=t,i=e.get(b),a=t==null?void 0:t.unitId,o=i.getUnit(a);if(!o)return!1;let s=o.getActivePage();return s.pageElements[n]=ae(s.pageElements[n],r),o.updatePage(s.id,s),!0}};var X=function(e){return e[e.forward=0]=`forward`,e[e.backward=1]=`backward`,e[e.front=2]=`front`,e[e.back=3]=`back`,e}(X||{});function Ct(e){let{pageId:t,unitId:n}=e,r=L(C),i=L(J),a=L(g),o=i.getRenderUnitByPageId(t,n),s=o==null?void 0:o.scene;if(!s)return null;let c=s.getTransformer();if(!c)return null;let l=c.getSelectedObjectMap().values().next().value;if(!l)return null;let u=e=>{let[t,r]=s.getAllObjects().reduce(([e,t],n)=>{let r=n.zIndex;return[r<e?r:e,r>t?r:t]},[0,0]),i=l.zIndex;e===X.back?i=t-1:e===X.front?i=r+1:e===X.forward?i=l.zIndex+1:e===X.backward&&(i=l.zIndex-1),l.setProps({zIndex:i}),a.executeCommand(Y.id,{unitId:n,oKey:l==null?void 0:l.oKey,props:{zIndex:i}})};return B(`div`,{className:`univer-relative univer-w-full`,children:[z(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:z(`div`,{className:`univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200`,children:z(`div`,{children:r.t(`image-panel.arrange.title`)})})}),B(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[z(`div`,{className:`univer-w-1/2`,children:z(Ie,{onClick:()=>{u(X.forward)},children:B(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[z(Je,{}),r.t(`image-panel.arrange.forward`)]})})}),z(`div`,{className:`univer-w-1/2`,children:z(Ie,{onClick:()=>{u(X.backward)},children:B(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[z(qe,{}),r.t(`image-panel.arrange.backward`)]})})})]}),B(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[z(`div`,{className:`univer-w-1/2`,children:z(Ie,{onClick:()=>{u(X.front)},children:B(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[z(Ze,{}),r.t(`image-panel.arrange.front`)]})})}),z(`div`,{className:`univer-w-1/2`,children:z(Ie,{onClick:()=>{u(X.back)},children:B(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[z(We,{}),r.t(`image-panel.arrange.back`)]})})})]})]})}function wt(e){var t,n;let{pageId:r,unitId:i}=e,a=L(C),o=L(J),s=L(g),c=o.getRenderUnitByPageId(r,i),l=c==null?void 0:c.scene;if(!l)return null;let u=l.getTransformer();if(!u)return null;let d=u.getSelectedObjectMap().values().next().value;if(!d)return null;let[f,p]=H((t=(n=d.fill)==null?void 0:n.toString())==null?``:t);function m(e){d==null||d.setProps({fill:e}),s.executeCommand(Y.id,{unitId:i,oKey:d==null?void 0:d.oKey,props:{shape:{shapeProperties:{shapeBackgroundFill:{rgb:e}}}}}),p(e)}return z(`div`,{className:R(`univer-relative univer-bottom-0 univer-mt-5 univer-w-full`,Ve),children:B(`div`,{className:`univer-relative univer-w-full`,children:[z(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:z(`div`,{className:`univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200`,children:z(`div`,{children:a.t(`slide.panel.fill.title`)})})}),z(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:z(`div`,{className:`univer-w-1/2`,children:z(Re,{overlay:z(`div`,{className:`univer-rounded-lg univer-p-4`,children:z(Le,{value:`#fff`,onChange:m})}),children:B(`a`,{className:`univer-flex univer-cursor-pointer univer-items-center univer-gap-1`,children:[z(Ye,{className:`univer-fill-primary-600`}),z(Ke,{})]})})})})]})})}function Tt(e){let{pageId:t,unitId:n}=e,r=L(C),i=L(J),a=L(g),o=i.getRenderUnitByPageId(t,n),s=o==null?void 0:o.scene;if(!s)return null;let c=s.getTransformer();if(!c)return null;let l=c.getSelectedObjectMap().values().next().value;if(!l)return null;let{width:u=0,height:d=0,left:f=0,top:p=0,angle:m=0}=l,[h,_]=H(u),[v,y]=H(d),[b,x]=H(f),[S,w]=H(p),[T,E]=H(m),D=e=>{let{objects:t}=e,{width:n=0,height:r=0,left:i=0,top:a=0,angle:o=0}=t.values().next().value;_(n),y(r),x(i),w(a),E(o)};V(()=>{let e=c.changeStart$.subscribe(e=>{D(e)}),t=c.changing$.subscribe(e=>{D(e)});return()=>{t.unsubscribe(),e.unsubscribe()}},[]);function O(e){!e||!l||(a.executeCommand(Y.id,{pageId:t,oKey:l.oKey,props:{width:e}}),l==null||l.resize(e,l.height),_(e),c==null||c.refreshControls())}function k(e){!e||!l||(a.executeCommand(Y.id,{pageId:t,oKey:l.oKey,props:{height:e}}),l==null||l.resize(l.width,e),y(e),c==null||c.refreshControls())}function ee(e){!e||!l||(a.executeCommand(Y.id,{pageId:t,oKey:l.oKey,props:{left:e}}),l==null||l.translate(e,l.top),x(e),c==null||c.refreshControls())}function te(e){!e||!l||(a.executeCommand(Y.id,{pageId:t,oKey:l.oKey,props:{right:e}}),l==null||l.translate(l.left,e),w(e),c==null||c.refreshControls())}function ne(e){!e||!l||(a.executeCommand(Y.id,{pageId:t,oKey:l.oKey,props:{angle:e}}),l==null||l.transformByState({angle:e}),E(e),c==null||c.refreshControls())}return B(`div`,{className:R(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,Ve),children:[z(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:z(`div`,{children:r.t(`image-panel.transform.title`)})}),B(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[B(`div`,{children:[z(`span`,{children:r.t(`image-panel.transform.width`)}),z(ze,{min:1,value:h,onChange:e=>{O(e)}})]}),B(`div`,{children:[z(`span`,{children:r.t(`image-panel.transform.height`)}),z(ze,{min:1,value:v,onChange:e=>{k(e)}})]})]}),B(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[B(`div`,{children:[z(`span`,{children:r.t(`image-panel.transform.x`)}),z(ze,{min:0,precision:1,value:b,onChange:e=>{ee(e)}})]}),B(`div`,{children:[z(`span`,{children:r.t(`image-panel.transform.y`)}),z(ze,{min:0,precision:1,value:S,onChange:e=>{te(e)}})]}),B(`div`,{children:[z(`span`,{children:r.t(`image-panel.transform.rotate`)}),z(ze,{precision:1,value:T,onChange:ne})]})]})]})}const Et=`COMPONENT_SLIDE_SIDEBAR`;function Dt(){var e,t,n;let r=L(b),i=L(J),a=r.getCurrentUnitForType(D.UNIVER_SLIDE),o=a==null||(e=a.getActivePage())==null?void 0:e.id,s=((t=r.getFocusedUnit())==null?void 0:t.getUnitId())||``;if(!o||!s)return null;let c=(n=i.getRenderUnitByPageId(o,s).scene)==null?void 0:n.getTransformer();if(!c)return null;let l=c.getSelectedObjectMap().values().next().value;return l?B(`section`,{className:`univer-p-2 univer-text-center univer-text-sm`,children:[z(Ct,{pageId:o,unitId:s}),z(Tt,{pageId:o,unitId:s}),l.objectType===ce.RECT&&z(wt,{pageId:o,unitId:s})]}):null}const Ot={id:`slide.command.insert-float-shape.rectangle`,type:t.COMMAND,handler:async e=>{var t;let n=e.get(g),r=(t=e.get(b).getFocusedUnit())==null?void 0:t.getUnitId();return n.executeCommand(kt.id,{unitId:r})}},kt={id:`slide.operation.insert-float-shape.rectangle`,type:t.OPERATION,handler:async(t,n)=>{let r=re(6),i=t.get(b),a=n.unitId,o=i.getUnit(a);if(!o)return!1;let s=o.getActivePage(),c=Object.values(s.pageElements),l={id:r,zIndex:(c!=null&&c.length?Math.max(...c.map(e=>e.zIndex)):20)+1,left:378,top:142,width:250,height:250,title:r,description:``,type:w.SHAPE,shape:{shapeType:e.Rect,text:``,shapeProperties:{shapeBackgroundFill:{rgb:`rgb(0,0,255)`}}}};s.pageElements[r]=l,o.updatePage(s.id,s);let u=t.get(J),d=u.createObjectToPage(l,s.id,a);return d&&u.setObjectActiveByPage(d,s.id,a),!0}},At={id:`sidebar.operation.slide-shape`,type:t.COMMAND,handler:async(e,t)=>{let{visible:n,objectType:r}=t,i=e.get(Ae),a=e.get(C),o=``,s=``;return r===ce.RECT?(o=`slide.sidebar.shape`,s=Et):r===ce.IMAGE?(o=`slide.sidebar.image`,s=Et):r===ce.RICH_TEXT&&(o=`slide.sidebar.text`,s=Et),n?i.open({header:{title:a.t(o)},children:{label:s},onClose:()=>{},width:360}):i.close(),!0}},jt={id:`slide.command.insert-float-shape.ellipse`,type:t.COMMAND,handler:async e=>{var t;let n=e.get(g),r=(t=e.get(b).getFocusedUnit())==null?void 0:t.getUnitId();return n.executeCommand(Mt.id,{unitId:r})}},Mt={id:`slide.operation.insert-float-shape.ellipse`,type:t.OPERATION,handler:async(t,n)=>{let r=re(6),i=t.get(b),a=n.unitId,o=i.getUnit(a);if(!o)return!1;let s=o.getActivePage(),c=Object.values(s.pageElements),l={id:r,zIndex:(c!=null&&c.length?Math.max(...c.map(e=>e.zIndex)):20)+1,left:378,top:142,width:250,height:250,title:r,description:``,type:w.SHAPE,shape:{shapeType:e.Ellipse,text:``,shapeProperties:{radius:100,shapeBackgroundFill:{rgb:`rgb(0,0,255)`}}}};s.pageElements[r]=l,o.updatePage(s.id,s);let u=t.get(J),d=u.createObjectToPage(l,s.id,a);return d&&u.setObjectActiveByPage(d,s.id,a),!0}},Nt={id:`slide.command.add-text`,type:t.COMMAND,handler:async e=>{var t;let n=e.get(g),r=(t=e.get(b).getFocusedUnit())==null?void 0:t.getUnitId();return await n.executeCommand(Pt.id,{unitId:r})}},Pt={id:`slide.operation.add-text`,type:t.OPERATION,handler:async(e,t)=>{let n=t.unitId,r=re(6),i=(t==null?void 0:t.text)||`A New Text`,a=e.get(b).getUnit(n);if(!a)return!1;let o=a.getActivePage(),s=Object.values(o.pageElements),c={id:r,zIndex:(s!=null&&s.length?Math.max(...s.map(e=>e.zIndex)):21)+1,left:230,top:142,width:220,height:40,title:`text`,description:``,type:w.TEXT,richText:{text:i,fs:30,cl:{rgb:`rgb(51, 51, 51)`},bl:1}};o.pageElements[r]=c,a.updatePage(o.id,o);let l=e.get(J),u=l.createObjectToPage(c,o.id,n);return u&&l.setObjectActiveByPage(u,o.id,n),!0}},Ft={id:`slide.operation.set-slide-page-thumb`,type:t.OPERATION,handler:(e,t)=>(e.get(J).createThumbs(t.unitId),!0)};function It(){var e,t;let n=L(b),r=L(g),i=L(M),a=L(C),o=tt(null),s=n.getCurrentUnitForType(D.UNIVER_SLIDE),c=s==null?void 0:s.getPages(),l=s==null?void 0:s.getPageOrder();if(!c||!l)return null;let u=l.map(e=>c[e]),[d,f]=H((e=s==null||(t=s.getActivePage())==null?void 0:t.id)==null?null:e),p=et(()=>u.map(()=>Qe()),[u]);V(()=>{let e=s==null?void 0:s.activePage$.subscribe(e=>{var t;let n=(t=e==null?void 0:e.id)==null?null:t;n&&f(n)});return()=>{e==null||e.unsubscribe()}},[]),V(()=>{p.forEach((e,t)=>{if(e.current){var n;let r=u[t];(n=i.getRenderById(r.id))==null||n.engine.setContainer(e.current)}}),p.length>0&&r.syncExecuteCommand(Ft.id,{unitId:s==null?void 0:s.getUnitId()})},[p,u,i,r,s]);let m=$e(e=>{r.syncExecuteCommand(yt.id,{id:e,unitId:s==null?void 0:s.getUnitId()})},[r,s]),h=$e(()=>{r.syncExecuteCommand(bt.id,{unitId:s==null?void 0:s.getUnitId()})},[r,s]);return z(`aside`,{ref:o,className:R(`univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden`,He),children:B(`div`,{className:`univer-px-4`,children:[z(`header`,{className:`univer-flex univer-justify-center univer-pt-4`,children:z(`a`,{className:R(`univer-box-border univer-block univer-h-8 univer-w-full univer-cursor-pointer univer-rounded-md univer-bg-white univer-text-center univer-text-sm univer-leading-8 univer-transition-colors`,Be),onClick:h,children:a.t(`slide.append`)})}),u.map((e,t)=>B(`div`,{className:R(`univer-my-4 univer-flex univer-gap-2`,{"[&>div]:univer-border-primary-600 [&>span]:univer-text-primary-600":e.id===d}),onClick:()=>m(e.id),children:[z(`span`,{children:t+1}),z(`div`,{ref:p[t],className:R(`univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600`,Be)})]},e.id))]})})}const Z=te(`SLIDE_EDITOR`),Lt={id:`slide.operation.edit-arrow`,type:t.OPERATION,handler:()=>!0},Rt=`COMPONENT_SLIDE_IMAGE_POPUP_MENU`;function zt(e){var t;let n=(t=e.popup)==null||(t=t.extraProps)==null?void 0:t.menuItems;if(!n)return null;let r=L(g),i=L(C),[a,o]=H(!1),[s,c]=H(!1),l=()=>{c(!0)},u=()=>{c(!1)},d=e=>{o(e)},f=e=>{r.executeCommand(e.commandId,e.commandParams),o(!1)},p=a||s,m=n.filter(e=>!e.disable);return z(`div`,{onMouseEnter:l,onMouseLeave:u,children:z(Re,{align:`start`,overlay:z(`ul`,{className:R(`univer-m-0 univer-box-border univer-grid univer-list-none univer-items-center univer-gap-1 univer-rounded-lg univer-bg-white univer-p-1.5 univer-text-sm univer-shadow-lg`,Be),children:m.map(e=>z(`li`,{className:`univer-relative univer-box-border univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-rounded univer-text-sm univer-transition-colors hover:univer-bg-gray-100`,onClick:()=>f(e),children:z(`span`,{className:`univer-px-2 univer-py-1.5 univer-align-middle`,children:i.t(e.label)})},e.index))}),open:a,onOpenChange:d,children:B(`div`,{className:R(`univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800`,Be,{"univer-bg-gray-100 dark:!univer-bg-gray-800":a,"univer-bg-white dark:!univer-bg-gray-900":!a}),children:[z(Ue,{className:`univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white`}),p&&z(Ke,{className:`dark:!univer-text-white`})]})})})}const Bt=`slide.menu.image`;function Vt(e){return{id:Bt,type:F.SUBITEMS,icon:`AddImageIcon`,tooltip:`slide.image.insert.title`,hidden$:I(e,D.UNIVER_SLIDE)}}function Ht(e){return{id:St.id,title:`slide.image.insert.float`,type:F.BUTTON,hidden$:I(e,D.UNIVER_SLIDE)}}const Ut=`slide.menu.shape`;function Wt(e){return{id:Ut,type:F.SUBITEMS,icon:`GraphIcon`,tooltip:`slide.shape.insert.title`,hidden$:I(e,D.UNIVER_SLIDE)}}function Gt(e){return{id:Ot.id,title:`slide.shape.insert.rectangle`,type:F.BUTTON,hidden$:I(e,D.UNIVER_SLIDE)}}function Kt(e){return{id:jt.id,title:`slide.shape.insert.ellipse`,type:F.BUTTON,hidden$:I(e,D.UNIVER_SLIDE)}}function qt(e){return{id:Nt.id,type:F.BUTTON,icon:`TextIcon`,tooltip:`slide.text.insert.title`,hidden$:I(e,D.UNIVER_SLIDE)}}const Jt={[Ne.FORMAT]:{[Nt.id]:{order:0,menuItemFactory:qt},[Bt]:{order:0,menuItemFactory:Vt,[St.id]:{order:0,menuItemFactory:Ht}},[Ut]:{order:0,menuItemFactory:Wt,[Ot.id]:{order:0,menuItemFactory:Gt},[jt.id]:{order:0,menuItemFactory:Kt}}}};var Yt=class{constructor(){G(this,`_state`,null),G(this,`_rect`,null),G(this,`_state$`,new U(null)),G(this,`state$`,this._state$.asObservable()),G(this,`_rect$`,new U(null)),G(this,`rect$`,this._rect$.asObservable()),G(this,`_focus`,!1),G(this,`_focus$`,new U(this._focus)),G(this,`focus$`,this._focus$.asObservable())}dispose(){this._state$.complete(),this._state=null,this._rect$.complete(),this._rect=null}setState(e){this._state=e,this._refresh(e)}getRect(){return this._rect}setRect(e){this._rect=e,this._rect$.next(e)}getState(){return this._state}setFocus(e=!1){this._focus=e,this._focus$.next(e)}_refresh(e){this._state$.next(e)}};const Xt=ee(`univer.slide-editor-manager.service`),Zt=-1e3,Qt={width:0,height:0,top:Zt,left:Zt};function $t(){let[e,t]=H({...Qt}),r=L(Xt),i=L(ot),a=L(v),o=Fe(()=>a.subscribeContextValue$(we),!1,void 0,[a,we]);return`${n}`,s.UNSPECIFIED,V(()=>{r.state$.subscribe(e=>{if(e==null)return;let{startX:n=Zt,startY:a=Zt,endX:o=0,endY:s=0,show:c=!1}=e;if(!c)t({...Qt});else{t({width:o-n-j+2,height:s-a-j+2,left:n+j,top:a+j});let e=i.getEditor(Z);if(e==null)return;let{left:c,top:l,width:u,height:d}=e.getBoundingClientRect();r.setRect({left:c,top:l,width:u,height:d})}})},[]),V(()=>{o||r.setFocus(!0)},[o,e]),z(`div`,{className:R(`univer-absolute univer-z-10 univer-box-border univer-flex`,Be),style:{left:e.left,top:e.top,width:e.width,height:e.height}})}function en(e){return e.getContextValue(f)&&e.getContextValue(c)}function tn(e){return e.getContextValue(m)&&e.getContextValue(f)}const nn=[P.ARROW_DOWN,P.ARROW_UP,P.ARROW_LEFT,P.ARROW_RIGHT];[P.ENTER,P.TAB,...nn];function rn(){let e=[];for(let t of nn)e.push({id:Lt.id,binding:t,preconditions:e=>en(e),staticParameters:{visible:!1,eventType:A.Keyboard,keycode:t,isShift:!1}}),e.push({id:Lt.id,binding:t|Me.SHIFT,preconditions:e=>en(e),staticParameters:{visible:!1,eventType:A.Keyboard,keycode:t,isShift:!0}});return e}const an={id:it.id,preconditions:e=>en(e)||tn(e),binding:P.BACKSPACE};let on=class extends i{constructor(e,t,n,r,i,a){super(),this._injector=e,this._menuManagerService=t,this._componentManager=n,this._uiPartsService=r,this._commandService=i,this._shortcutService=a,this._initCommands(),this._initCustomComponents(),this._initUIComponents(),this._initMenus(),this._initShortcuts()}_initMenus(){this._menuManagerService.mergeMenu(Jt)}_initCustomComponents(){let e=this._componentManager;this.disposeWithMe(e.register(`TextIcon`,Xe)),this.disposeWithMe(e.register(`GraphIcon`,Ge)),this.disposeWithMe(e.register(Rt,zt)),this.disposeWithMe(e.register(Et,Dt))}_initCommands(){[bt,yt,Ft,St,Pt,Nt,jt,Mt,kt,Ot,At,xt,Y,Lt].forEach(e=>this.disposeWithMe(this._commandService.registerCommand(e)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(Se.LEFT_SIDEBAR,()=>Pe(It,this._injector))),this.disposeWithMe(this._uiPartsService.registerComponent(Se.CONTENT,()=>Pe($t,this._injector)))}_initShortcuts(){[an,...rn()].forEach(e=>{this.disposeWithMe(this._shortcutService.registerShortcut(e))})}};on=q([K(0,x(S)),K(1,Oe),K(2,x(Ce)),K(3,je),K(4,g),K(5,ke)],on);var sn=`@univerjs/slides-ui`,cn=`0.20.1`;const ln=`slides-ui.config`;Symbol(ln);const un={},dn=ee(`univer.slide-editor-bridge.service`);let fn=class extends i{constructor(e,t,n){super(),this._editorService=e,this._contextService=t,this._renderManagerService=n,G(this,`_editorUnitId`,Z),G(this,`_isForceKeepVisible`,!1),G(this,`_editorIsDirty`,!1),G(this,`_currentEditRectState`,null),G(this,`_currentEditRectState$`,new U(null)),G(this,`currentEditRectState$`,this._currentEditRectState$.asObservable()),G(this,`_visibleParam`,{visible:!1,eventType:A.Dblclick,unitId:``}),G(this,`_visible$`,new U(this._visibleParam)),G(this,`visible$`,this._visible$.asObservable()),G(this,`_afterVisible$`,new U(this._visibleParam)),G(this,`afterVisible$`,this._afterVisible$.asObservable()),G(this,`endEditing$`,new ut),G(this,`_currentEditRectInfo`,void 0)}dispose(){super.dispose()}getEditorRect(){return this._currentEditRectInfo}setEditorRect(e){this._currentEditRectInfo=e,this._editorService.getFocusEditor()||(this._editorService.focus(Z),this._contextService.setContextValue(c,!1),this._contextService.setContextValue(d,!1),this._contextService.setContextValue(p,!1));let t=this.getEditRectState();this._currentEditRectState=t,this._currentEditRectState$.next(t)}changeVisible(e){this._visibleParam=e,e.visible&&(this._editorIsDirty=!1),this._visible$.next(this._visibleParam),this._afterVisible$.next(this._visibleParam)}getEditRectState(){let e=Z,t=this._currentEditRectInfo,n=t.unitId,r=t.richTextObj.documentData;r.id=e,r.documentStyle={...r.documentStyle,pageSize:{width:t.richTextObj.width,height:1/0}};let i={documentModel:new o(r),fontString:`document`,textRotation:{a:0,v:0},wrapStrategy:0,verticalAlign:O.TOP,horizontalAlign:h.LEFT,paddingData:{t:0,b:1,l:2,r:2}},a=t.richTextObj.width,s=t.richTextObj.height,c=t.richTextObj.left,l=t.richTextObj.top,u={left:0,top:0},d=this._renderManagerService.getRenderById(n),f=d==null?void 0:d.scene,p=f==null?void 0:f.getViewport(N.VIEW),m=f==null?void 0:f.getObject(N.COMPONENT),g={x:(m==null?void 0:m.left)||0,y:(m==null?void 0:m.top)||0},_=(p==null?void 0:p.viewportScrollX)||0,v=(p==null?void 0:p.viewportScrollY)||0;return u.left=g.x-_,u.top=g.y-v,{position:{startX:c,startY:l,endX:c+a,endY:l+s},scaleX:1,scaleY:1,slideCardOffset:u,unitId:n,editorUnitId:e,documentLayoutObject:i}}changeEditorDirty(e){this._editorIsDirty=e}isVisible(){return this._visibleParam.visible}getEditorDirty(){return this._editorIsDirty}getCurrentEditorId(){return this._editorUnitId}genDocData(e){let t=this.getCurrentEditorId(),n=e.text,r=e.fs;return{id:t,body:{dataStream:`${n}\r\n`,textRuns:[{st:0,ed:n.length}],paragraphs:[{paragraphStyle:{},startIndex:n.length+1}],sectionBreaks:[{startIndex:n.length+2}]},documentStyle:{marginBottom:0,marginLeft:0,marginRight:0,marginTop:0,pageSize:{width:1/0,height:1/0},textStyle:{fs:r},renderConfig:{verticalAlign:O.MIDDLE,centerAngle:0,vertexAngle:0,wrapStrategy:0}},drawings:{},drawingsOrder:[],settings:{zoomRatio:1}}}};fn=q([K(0,ot),K(1,v),K(2,M)],fn);let Q=function(e){return e[e.InitialState=0]=`InitialState`,e[e.StartEditor=1]=`StartEditor`,e[e.CursorChange=2]=`CursorChange`,e}({});const pn=-1e3;let mn=class extends i{constructor(e,t,n,r,i,a,o,s,c,l,u,d){super(),this._renderContext=e,this._layoutService=t,this._undoRedoService=n,this._contextService=r,this._instanceSrv=i,this._renderManagerService=a,this._editorBridgeService=o,this._cellEditorManagerService=s,this._textSelectionManagerService=c,this._commandService=l,this._localService=u,this._editorService=d,G(this,`_cursorChange`,Q.InitialState),G(this,`_isUnitEditing`,!1),G(this,`_d`,void 0),this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(D.UNIVER_SLIDE).subscribe(e=>{e&&e.getUnitId()===this._renderContext.unitId?this._d=this._init():(this._disposeCurrent(),this._isUnitEditing&&(this._handleEditorInvisible({visible:!1,eventType:A.Keyboard,keycode:P.ESC,unitId:this._renderContext.unitId}),this._isUnitEditing=!1))})),this._initEditorVisibilityListener()}dispose(){super.dispose(),this._disposeCurrent()}_disposeCurrent(){var e;(e=this._d)==null||e.dispose(),this._d=null}_init(){let e=new a;return this._subscribeToCurrentCell(e),this._initialKeyboardListener(e),this._initialCursorSync(e),this._listenEditorFocus(e),this._commandExecutedListener(e),setTimeout(()=>{this._cursorStateListener(e)},1e3),e}_initEditorVisibilityListener(){this.disposeWithMe(this._editorBridgeService.visible$.subscribe(e=>{e.visible?(this._isUnitEditing=!0,this._handleEditorVisible(e)):this._isUnitEditing&&(this._handleEditorInvisible(e),this._isUnitEditing=!1)}))}_listenEditorFocus(e){let t=this._getEditorObject();t&&e.add(t.document.onPointerDown$.subscribeEvent(()=>{}))}_getEditorSkeleton(e){var t;return(t=this._renderManagerService.getRenderById(e))==null?void 0:t.with(mt).getSkeleton()}_getEditorViewModel(e){var t;return(t=this._renderManagerService.getRenderById(e))==null?void 0:t.with(mt).getViewModel()}_initialCursorSync(e){e.add(this._cellEditorManagerService.focus$.pipe(dt(e=>!!e)).subscribe(()=>{var e;(e=ge(D.UNIVER_DOC,this._instanceSrv,this._renderManagerService))==null||e.with(at).sync()}))}_subscribeToCurrentCell(e){e.add(this._editorBridgeService.currentEditRectState$.subscribe(e=>{var t;if(e==null||this._contextService.getContextValue(d)||this._contextService.getContextValue(p))return;let{position:{startX:n,endX:r},documentLayoutObject:{textRotation:i,wrapStrategy:a,documentModel:o},scaleX:s,editorUnitId:c}=e,{vertexAngle:l}=me(i);o.updateDocumentId(c),a===k.WRAP&&l===0&&o.updateDocumentDataPageSize((r-n)/s),this._instanceSrv.changeDoc(c,o),this._contextService.setContextValue(u,!0),this._textSelectionManagerService.replaceTextRanges([{startOffset:0,endOffset:0}]),(t=ge(D.UNIVER_DOC,this._instanceSrv,this._renderManagerService))==null||t.with(at).activate(pn,pn)}))}_fitTextSize(e,t,n,r,i=1,a=1){let{startX:o,startY:s,endX:c,endY:l}=e,u=r.documentModel;if(u==null)return;let{actualWidth:d,actualHeight:f}=this._predictingSize(e,t,n,r,i,a),{verticalAlign:p,paddingData:m,fill:h}=r,g=c-o,_=l-s;if(g<d&&(g=d),_<f)_=f,u.updateDocumentDataMargin(m);else{let e=0;e=p===O.MIDDLE?(_-f)/2/a:p===O.TOP?m.t||0:(_-f)/a-(m.b||0),e=e<(m.t||0)?m.t||0:e,u.updateDocumentDataMargin({t:e})}n.calculate(),this._editAreaProcessing(g,_,e,t,h,i,a)}_predictingSize(e,t,n,r,i=1,a=1){let{startX:o,endX:s}=e,{textRotation:c,wrapStrategy:l}=r,u=r.documentModel,{vertexAngle:d}=me(c),f=document.body.clientWidth;if(l===k.WRAP&&d===0){let{actualWidth:e,actualHeight:t}=n.getActualSize();return{actualWidth:e*i,actualHeight:t*a}}u==null||u.updateDocumentDataPageSize((f-o-t.left)/i),n.calculate();let p=n.getActualSize(),m=s-o;return m<p.actualWidth*i+5*i&&(m=p.actualWidth*i+5*i),u==null||u.updateDocumentDataPageSize(m/i),u==null||u.updateDocumentRenderConfig({horizontalAlign:h.UNSPECIFIED,cellValueType:void 0}),{actualWidth:m,actualHeight:p.actualHeight*a}}_editAreaProcessing(e,t,n,r,i,a=1,o=1){let s=this._getEditorObject();if(s==null)return;function c(e){return Number.parseInt(e.replace(`px`,``))}let l=this._renderContext.engine.getCanvasElement(),u=l.getBoundingClientRect(),d=c(l.style.width),{top:f,left:p,width:m}=u,h=m/d,{startX:g,startY:_}=n;g+=r.left,_+=r.top;let{document:v,scene:y,engine:b}=s,x=y.getViewport(lt.VIEW_MAIN),S=document.body.clientHeight-_-r.top-4,C=document.body.clientWidth-g-r.left,w=t,T=x==null?void 0:x.getScrollBar();if(w>S)w=S,T==null?x&&new de(x,{enableHorizontal:!1,barSize:8}):x==null||x.resetCanvasSizeAndUpdateScroll();else{var E;T=null,x==null||(E=x.getScrollBar())==null||E.dispose()}e+=(T==null?void 0:T.barSize)||0,e=Math.min(e,C),g-=j,_-=j,this._addBackground(y,e/a,t/o,i);let{scaleX:D,scaleY:O}=y.getPrecisionScale();y.transformByState({width:e*h/a,height:t*h/o,scaleX:a*h,scaleY:o*h}),v.resize(e/a,t/o),setTimeout(()=>{b.resizeBySize(he(e,D),he(w,O))},0);let k=this._layoutService.getContentElement().getBoundingClientRect(),ee=l.getBoundingClientRect();g=g*h+(ee.left-k.left),_=_*h+(ee.top-k.top),this._cellEditorManagerService.setState({startX:g,startY:_,endX:e*h+g,endY:w*h+_,show:!0})}_addBackground(e,t,n,r){let i=`_backgroundRectHelperColor_`,a=e.getObject(i);a==null&&r==null||(a==null?e.addObjects([new le(i,{width:t,height:n,fill:r,evented:!1})],nt):r==null?a.dispose():(a.setProps({fill:r}),a.transformByState({width:t,height:n})))}_handleEditorVisible(e){var t,n;let{eventType:r}=e;this._cursorChange=[A.PointerDown,A.Dblclick].includes(r)?Q.CursorChange:Q.StartEditor;let i=this._editorBridgeService.getEditRectState();if(i==null)return;let{position:a,documentLayoutObject:o,slideCardOffset:s,scaleX:l,scaleY:u,editorUnitId:d,unitId:f}=i,p=this._getEditorObject();if(p==null)return;let{scene:m}=p;this._contextService.setContextValue(c,!0);let{documentModel:h}=o,g=this._getEditorSkeleton(d);if(!g||!h)return;this._fitTextSize(a,s,g,o,l,u);let _=h.getBody().dataStream.length-2||0;(t=m.getViewport(lt.VIEW_MAIN))==null||t.scrollToViewportPos({viewportScrollX:1/0}),this._textSelectionManagerService.replaceTextRanges([{startOffset:_,endOffset:_}]),(n=this._renderManagerService.getRenderById(f))==null||n.scene.resetCursor()}_resetBodyStyle(e,t=!1){e.dataStream=n,e.textRuns!=null&&(e.textRuns.length===1&&!t?(e.textRuns[0].st=0,e.textRuns[0].ed=1):e.textRuns=void 0),e.paragraphs!=null&&(e.paragraphs.length===1?e.paragraphs[0].startIndex=0:e.paragraphs=[{startIndex:0}]),e.sectionBreaks!=null&&(e.sectionBreaks=void 0),e.tables!=null&&(e.tables=void 0),e.customRanges!=null&&(e.customRanges=void 0),e.customBlocks!=null&&(e.customBlocks=void 0)}_initialKeyboardListener(e){}_showEditorByKeyboard(e){}_commandExecutedListener(e){let t=[Lt.id],n=[ht.id];e.add(this._commandService.onCommandExecuted(e=>{this._editorService.getFocusId()===Z&&(t.includes(e.id)&&this._moveCursorCmdHandler(e),n.includes(e.id)&&this._editorBridgeService.isVisible()&&this._editingChangedHandler())}))}_moveCursorCmdHandler(e){let t=e.params,{keycode:n,isShift:r}=t;n!=null&&this._cursorChange===Q.CursorChange?this._moveInEditor(n,r):this._editorBridgeService.changeVisible(t)}_editingChangedHandler(){let e=this._editorBridgeService.getEditorRect();if(!e)return;let t=e.richTextObj;t.refreshDocumentByDocData(),t.resizeToContentSize();let{unitId:n}=this._renderContext;this._handleEditorVisible({visible:!0,eventType:3,unitId:n})}_getEditorObject(){return hn(this._editorBridgeService.getCurrentEditorId(),this._renderManagerService)}async _handleEditorInvisible(e){let{keycode:t}=e;if(this._cursorChange=Q.InitialState,this._exitInput(e),this._editorBridgeService.getEditRectState()!=null){if(this._editorBridgeService.getEditorDirty()===!1){this._moveCursor(t);return}this._moveCursor(t)}}_exitInput(e){this._contextService.setContextValue(c,!1),this._cellEditorManagerService.setState({show:e.visible});let t=this._editorBridgeService.getCurrentEditorId();t!=null&&this._undoRedoService.clearUndoRedo(t)}_moveCursor(e){if(e!=null)switch(r.LEFT,e){case P.ENTER:r.DOWN;break;case P.TAB:r.RIGHT;break;case P.ARROW_DOWN:r.DOWN;break;case P.ARROW_UP:r.UP;break;case P.ARROW_LEFT:r.LEFT;break;case P.ARROW_RIGHT:r.RIGHT;break}}_cursorStateListener(e){let t=this._getEditorObject();if(!t)return;let{document:n}=t;e.add(se(n.onPointerDown$.subscribeEvent(()=>{this._cursorChange===Q.StartEditor&&(this._cursorChange=Q.CursorChange)})))}_moveInEditor(e,t){let n=r.LEFT;e===P.ARROW_DOWN?n=r.DOWN:e===P.ARROW_UP?n=r.UP:e===P.ARROW_RIGHT&&(n=r.RIGHT),t?this._commandService.executeCommand(ct.id,{direction:n}):this._commandService.executeCommand(st.id,{direction:n})}};mn=q([K(1,Ee),K(2,y),K(3,v),K(4,b),K(5,M),K(6,dn),K(7,Xt),K(8,x(pt)),K(9,g),K(10,x(C)),K(11,ot)],mn);function hn(e,t){if(e==null)return;let n=t.getRenderById(e);if(n==null)return;let{mainComponent:r,scene:i,engine:a,components:o}=n;return{document:r,docBackground:o.get(rt.BACKGROUND),scene:i,engine:a}}let gn=class extends E{constructor(e,t,n,r){super(),this._renderContext=e,this._instanceSrv=t,this._commandService=n,this._editorBridgeService=r,G(this,`setSlideTextEditor$`,new ut),G(this,`_curRichText`,null),G(this,`_d`,void 0),this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(D.UNIVER_SLIDE).subscribe(e=>{e&&e.getUnitId()===this._renderContext.unitId?this._d=this._init():this._disposeCurrent()}))}_init(){let e=new a;return this._initEventListener(e),e}_disposeCurrent(){var e;(e=this._d)==null||e.dispose(),this._d=null}_setEditorRect(e,t){this._curRichText=t;let{scene:n,engine:r}=this._renderContext,i={scene:n,engine:r,unitId:this._renderContext.unitId,pageId:e,richTextObj:t};this._editorBridgeService.setEditorRect(i)}_initEventListener(e){let t=t=>{let n=t.getTransformer();n&&(e.add(n.clearControl$.subscribe(()=>{this.setEditorVisible(!1),this.pickOtherObjects()})),e.add(n.createControl$.subscribe(()=>{this.setEditorVisible(!1)})),e.add(t.onDblclick$.subscribeEvent(()=>{n.clearControls();let e=n.getSelectedObjectMap().values().next().value;e&&(e.objectType===ce.RICH_TEXT?this.startEditing(t.sceneKey,e):this.pickOtherObjects())})),e.add(this._instanceSrv.focused$.subscribe(e=>{this.endEditing()})))},{mainComponent:n}=this._renderContext;n.subSceneChanged$.subscribeEvent(e=>{t(e)});let r=Array.from(n.getSubScenes().values());for(let e=0;e<r.length;e++){let n=r[e];t(n)}}pickOtherObjects(){this.endEditing()}endEditing(){var e;if(!this._curRichText)return;this.setEditorVisible(!1);let t=this._curRichText;if(!this._instanceSrv.getCurrentUnitForType(D.UNIVER_SLIDE))return!1;t.refreshDocumentByDocData(),t.resizeToContentSize(),this._editorBridgeService.endEditing$.next(t);let n={bl:1,fs:t.fs,text:t.text},r=(e=t.documentData.body)==null?void 0:e.textRuns;if(r&&r.length){let e=r[0].ts;n.cl=e==null?void 0:e.cl}this._commandService.executeCommand(Y.id,{unitId:this._renderContext.unitId,oKey:t==null?void 0:t.oKey,props:{richText:n}}),this._curRichText=null}startEditing(e,t){this._setEditorRect(e,t),this.setEditorVisible(!0)}setEditorVisible(e){if(e){var t;(t=this._curRichText)==null||t.hide()}else{var n;(n=this._curRichText)==null||n.show()}let{unitId:r}=this._renderContext;this._editorBridgeService.changeVisible({visible:e,eventType:A.PointerDown,unitId:r})}};gn=q([K(1,b),K(2,g),K(3,dn)],gn);function _n(e,t){let n=vn(e.left,e.top,t),r=vn(e.right,e.bottom,t);return{left:n.x,top:n.y,right:r.x,bottom:r.y}}function vn(e,t,n){let{scaleX:r,scaleY:i}=n.getAncestorScale(),a=n.getViewport(N.VIEW);if(!a)return{x:e,y:t};let{viewportScrollX:o,viewportScrollY:s}=a;return{x:(e-o)*r,y:(t-s)*i}}let yn=class extends i{constructor(e,t,n,r){super(),this._globalPopupManagerService=e,this._renderManagerService=t,this._univerInstanceService=n,this._commandService=r}_createObjectPositionObserver(e,t){let n=(()=>{var n,r,i,a;let{scene:o,engine:s}=t,{left:c,top:l,width:u,height:d}=e,f=(o.width-((n=(r=t.mainComponent)==null?void 0:r.width)==null?0:n))/2,p=(o.height-((i=(a=t.mainComponent)==null?void 0:a.height)==null?0:i))/2,m={left:c,right:c+u,top:l,bottom:l+d},h=s.getCanvasElement(),g=h.getBoundingClientRect(),_=_e(h.style.width),{scaleX:v,scaleY:y}=o.getAncestorScale(),b=_n(m,o),{top:x,left:S,width:C}=g,w=C/_;return{left:b.left*w*v+S+f,right:b.right*w*v+S+f,top:b.top*w*y+x+p,bottom:b.bottom*w*y+x+p}})();return{position:n,position$:new U(n),disposable:new a}}attachPopupToObject(e,t){let n=this._univerInstanceService.getCurrentUnitForType(D.UNIVER_SLIDE).getUnitId(),r=this._renderManagerService.getRenderById(n);if(!r)return{dispose:()=>{}};let{position:i,position$:a,disposable:o}=this._createObjectPositionObserver(e,r),s=this._globalPopupManagerService.addPopup({...t,unitId:n,subUnitId:`default`,anchorRect:i,anchorRect$:a,canvasElement:r.engine.getCanvasElement()});return{dispose:()=>{this._globalPopupManagerService.removePopup(s),a.complete(),o.dispose()}}}};yn=q([K(0,x(Te)),K(1,M),K(2,b),K(3,g)],yn);let bn=class extends E{constructor(e,t,n,r,i,a,o){super(),this._canvasPopManagerService=e,this._renderManagerService=t,this._univerInstanceService=n,this._contextService=r,this._canvasView=i,this._sidebarService=a,this._commandService=o,G(this,`_initImagePopupMenu`,new Set),this._init()}_init(){this._univerInstanceService.getAllUnitsForType(D.UNIVER_SLIDE).forEach(e=>this._create(e))}_create(e){if(!e)return;let t=e.getUnitId();this._renderManagerService.has(t)&&!this._initImagePopupMenu.has(t)&&(this._popupMenuListener(t),this._initImagePopupMenu.add(t))}_hasCropObject(e){}_popupMenuListener(e){var t;let n=this._univerInstanceService.getCurrentUnitForType(D.UNIVER_SLIDE),r=(t=n==null?void 0:n.getPages())==null?{}:t;Object.keys(r).forEach(t=>{var n;let r=(n=this._canvasView.getRenderUnitByPageId(t,e).scene)==null?void 0:n.getTransformer();if(!r)return;let i;this.disposeWithMe(se(r.createControl$.subscribe(()=>{let t=r.getSelectedObjectMap();if(t.size>1){i==null||i.dispose();return}let n=t.values().next().value;if(!n)return;let a=n.oKey;i==null||i.dispose(),i=this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(n,{componentKey:Rt,direction:`horizontal`,offset:[2,0],extraProps:{menuItems:this._getMenuItemsByObjectType(n.objectType,a,e)}})),this._sidebarService.visible&&this._commandService.executeCommand(At.id,{visible:!0,objectType:n.objectType})}))),this.disposeWithMe(r.clearControl$.subscribe(()=>{i==null||i.dispose(),this._contextService.setContextValue(l,!1)})),this.disposeWithMe(r.changing$.subscribe(()=>{i==null||i.dispose();let t=r.getSelectedObjectMap();if(t.size>1){i==null||i.dispose();return}let n=t.values().next().value;n&&this._commandService.executeCommand(Y.id,{unitId:e,oKey:n.oKey,props:{width:n.width,height:n.height,left:n.left,top:n.top}})}))})}_getMenuItemsByObjectType(e,t,n){return[{label:`slide.popup.edit`,index:0,commandId:At.id,commandParams:{visible:!0,objectType:e},disable:!1},{label:`slide.popup.delete`,index:5,commandId:xt.id,commandParams:{id:t,unitId:n},disable:!1}]}};bn=q([K(0,x(yn)),K(1,M),K(2,b),K(3,v),K(4,x(J)),K(5,Ae),K(6,g)],bn);let xn=class extends E{constructor(e,t,n){super(),this._contextService=e,this._instanceSrv=t,this._renderManagerService=n,Promise.resolve().then(()=>this._init())}_init(){this._initSlideDataListener(),this._initContextListener()}_initSlideDataListener(){this._instanceSrv.getTypeOfUnitAdded$(D.UNIVER_SLIDE).pipe(ft(this.dispose$)).subscribe(e=>{this._createRenderer(e==null?void 0:e.getUnitId())}),this._instanceSrv.getAllUnitsForType(D.UNIVER_SLIDE).forEach(e=>{this._createRenderer(e.getUnitId())}),this._instanceSrv.getTypeOfUnitDisposed$(D.UNIVER_SLIDE).pipe(ft(this.dispose$)).subscribe(e=>this._disposeRenderer(e))}_createRenderer(e){e!=null&&this._instanceSrv.getUnit(e,D.UNIVER_SLIDE)!=null&&this._renderManagerService.createRender(e)}_disposeRenderer(e){let t=e.getUnitId();this._renderManagerService.removeRender(t)}_initContextListener(){}};xn=q([K(0,v),K(1,b),K(2,M)],xn);let $=class extends T{constructor(e=un,t,n,r,i){super(),this._config=e,this._injector=t,this._renderManagerService=n,this._univerInstanceService=r,this._configService=i;let{menu:a,...o}=ae({},un,this._config);a&&this._configService.setConfig(`menu`,a,{merge:!0}),this._configService.setConfig(ln,o)}onStarting(){oe([[xn],[dn,{useClass:fn}],[Xt,{useClass:Yt}],[yn]],this._config.override).forEach(e=>this._injector.add(e))}onReady(){[[vt]].forEach(e=>{this.disposeWithMe(this._renderManagerService.registerRenderModule(D.UNIVER_SLIDE,e))}),oe([[J],[on],[vt],[bn]],this._config.override).forEach(e=>{this._injector.add(e)}),this._injector.get(J),this._injector.get(xn)}onRendered(){[[gn],[mn]].forEach(e=>{this.disposeWithMe(this._renderManagerService.registerRenderModule(D.UNIVER_SLIDE,e))}),this._markSlideAsFocused(),this._injector.get(on)}onSteady(){this._injector.get(bn)}_markSlideAsFocused(){let e=this._univerInstanceService;try{let t=e.getCurrentUnitForType(D.UNIVER_SLIDE);e.focusUnit(t.getUnitId())}catch{}}};G($,`pluginName`,`UNIVER_SLIDES_UI_PLUGIN`),G($,`packageName`,sn),G($,`version`,cn),G($,`type`,D.UNIVER_SLIDE),$=q([K(1,x(S)),K(2,M),K(3,b),K(4,_)],$);export{yt as ActivateSlidePageOperation,bt as AppendSlideOperation,J as CanvasView,xt as DeleteSlideElementOperation,dn as ISlideEditorBridgeService,St as InsertSlideFloatImageCommand,jt as InsertSlideShapeEllipseCommand,Mt as InsertSlideShapeEllipseOperation,Ot as InsertSlideShapeRectangleCommand,kt as InsertSlideShapeRectangleOperation,Ut as SHAPE_MENU_ID,Bt as SLIDES_IMAGE_MENU_ID,Z as SLIDE_EDITOR_ID,Ft as SetSlidePageThumbOperation,Nt as SlideAddTextCommand,Pt as SlideAddTextOperation,yn as SlideCanvasPopMangerService,$t as SlideEditorContainer,It as SlideSideBar,on as SlidesUIController,Jt as SlidesUIMenuSchema,$ as UniverSlidesUIPlugin,Y as UpdateSlideElementOperation};
+import { CommandType, DEFAULT_EMPTY_DOCUMENT_VALUE, Direction, Disposable, DisposableCollection, DocumentDataModel, DocumentFlavor, EDITOR_ACTIVATED, FOCUSING_COMMON_DRAWINGS, FOCUSING_EDITOR_BUT_HIDDEN, FOCUSING_EDITOR_STANDALONE, FOCUSING_UNIVER_EDITOR, FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, FORMULA_EDITOR_ACTIVATED, HorizontalAlign, ICommandService, IConfigService, IContextService, IUndoRedoService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RxDisposable, UniverInstanceType, VerticalAlign, WrapStrategy, createIdentifier, createInternalEditorID, debounce, generateRandomId, getColorStyle, merge, mergeOverrideWithDependencies, toDisposable } from "@univerjs/core";
+import { DeviceInputEventType, FIX_ONE_PIXEL_BLUR_OFFSET, IRenderManagerService, ObjectType, Rect, Scene, ScrollBar, Slide, Viewport, convertTextRotation, fixLineWidthByScale, getCurrentTypeOfRenderer, pxToNum } from "@univerjs/engine-render";
+import { BasicShapes, ObjectProvider, PageElementType, SLIDE_KEY } from "@univerjs/slides";
+import { DRAWING_IMAGE_ALLOW_IMAGE_LIST, IImageIoService, getImageSize } from "@univerjs/drawing";
+import { BuiltInUIPart, ComponentManager, DISABLE_AUTO_FOCUS_KEY, ICanvasPopupService, ILayoutService, ILocalFileService, IMenuManagerService, IShortcutService, ISidebarService, IUIPartsService, KeyCode, MenuItemType, MetaKeys, RibbonStartGroup, connectInjector, getMenuHiddenObservable, useDependency, useObservable } from "@univerjs/ui";
+import { Button, ColorPicker, Dropdown, InputNumber, borderClassName, borderTopClassName, clsx, scrollbarClassName } from "@univerjs/design";
+import { AutofillDoubleIcon, BottomIcon, GraphIcon, MoreDownIcon, MoveDownIcon, MoveUpIcon, PaintBucketDoubleIcon, TextIcon, TopmostIcon } from "@univerjs/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DOCS_COMPONENT_MAIN_LAYER_INDEX, DOCS_VIEW_KEY, DeleteLeftCommand, DocSelectionRenderService, IEditorService, MoveCursorOperation, MoveSelectionOperation, VIEWPORT_KEY } from "@univerjs/docs-ui";
+import { BehaviorSubject, Subject, filter, takeUntil } from "rxjs";
+import { DocSelectionManagerService, DocSkeletonManagerService, RichTextEditingMutation } from "@univerjs/docs";
+
+//#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 \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/slide.render-controller.ts
+let SlideRenderController = class SlideRenderController extends RxDisposable {
+	constructor(_renderContext, _injector, _univerInstanceService, _renderManagerService) {
+		super();
+		this._renderContext = _renderContext;
+		this._injector = _injector;
+		this._univerInstanceService = _univerInstanceService;
+		this._renderManagerService = _renderManagerService;
+		_defineProperty(this, "_objectProvider", null);
+		_defineProperty(this, "_refreshThumb", debounce(() => {
+			this.createThumbs();
+		}, 300));
+		this._objectProvider = this._injector.createInstance(ObjectProvider);
+		this._addNewRender();
+	}
+	_addNewRender() {
+		const { unitId, engine, scene } = this._renderContext;
+		const slideDataModel = this._getCurrUnitModel();
+		if (!slideDataModel) return;
+		const observer = engine.onTransformChange$.subscribeEvent(() => {
+			this._scrollToCenter();
+			observer === null || observer === void 0 || observer.unsubscribe();
+		});
+		engine.onTransformChange$.subscribeEvent(() => {
+			setTimeout(() => {
+				this.createThumbs();
+			}, 300);
+		});
+		const viewMain = new Viewport(SLIDE_KEY.VIEW, scene, {
+			left: 0,
+			top: 0,
+			bottom: 0,
+			right: 0,
+			explicitViewportWidthSet: false,
+			explicitViewportHeightSet: false,
+			isWheelPreventDefaultX: true
+		});
+		scene.attachControl();
+		scene.onMouseWheel$.subscribeEvent((evt, state) => {
+			const e = evt;
+			if (e.ctrlKey) {
+				const deltaFactor = Math.abs(e.deltaX);
+				let scrollNum = deltaFactor < 40 ? .2 : deltaFactor < 80 ? .4 : .2;
+				scrollNum *= e.deltaY > 0 ? -1 : 1;
+				if (scene.scaleX < 1) scrollNum /= 2;
+				if (scene.scaleX + scrollNum > 4) scene.scale(4, 4);
+				else if (scene.scaleX + scrollNum < .1) scene.scale(.1, .1);
+				else {
+					e.deltaY;
+					e.preventDefault();
+				}
+			} else viewMain.onMouseWheel(e, state);
+		});
+		scene.onFileLoaded$.subscribeEvent(() => {
+			this._refreshThumb();
+		});
+		ScrollBar.attachTo(viewMain);
+		const slide = this._createSlide(scene);
+		this._renderContext.mainComponent = slide;
+		this._createSlidePages(slideDataModel, slide);
+		this.createThumbs();
+		engine.runRenderLoop(() => {
+			scene.render();
+		});
+	}
+	_scrollToCenter() {
+		var _this$_currentRender;
+		const mainScene = (_this$_currentRender = this._currentRender()) === null || _this$_currentRender === void 0 ? void 0 : _this$_currentRender.scene;
+		const viewMain = mainScene === null || mainScene === void 0 ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW);
+		const getCenterPositionViewPort = this._getCenterPositionViewPort(mainScene);
+		if (!viewMain || !getCenterPositionViewPort) return;
+		const { left: viewPortLeft, top: viewPortTop } = getCenterPositionViewPort;
+		const { x, y } = viewMain.transViewportScroll2ScrollValue(viewPortLeft, viewPortTop);
+		viewMain.scrollToBarPos({
+			x,
+			y
+		});
+	}
+	_currentRender() {
+		return getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_SLIDE, this._univerInstanceService, this._renderManagerService);
+	}
+	/**
+	* @param mainScene
+	*/
+	_createSlide(mainScene) {
+		const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+		const { width: sceneWidth, height: sceneHeight } = mainScene;
+		const { width = 100, height = 100 } = model.getPageSize();
+		const slideComponent = new Slide(SLIDE_KEY.COMPONENT, {
+			left: (sceneWidth - width) / 2,
+			top: (sceneHeight - height) / 2,
+			width,
+			height,
+			zIndex: 10
+		});
+		slideComponent.enableSelectedClipElement();
+		mainScene.addObject(slideComponent);
+		return slideComponent;
+	}
+	_addBackgroundRect(scene, fill) {
+		const { width: pageWidth = 0, height: pageHeight = 0 } = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getPageSize();
+		const page = new Rect("canvas", {
+			left: 0,
+			top: 0,
+			width: pageWidth,
+			height: pageHeight,
+			strokeWidth: 1,
+			stroke: "rgba(198,198,198,1)",
+			fill: getColorStyle(fill) || "rgba(255,255,255,1)",
+			zIndex: 0,
+			evented: false
+		});
+		scene.addObject(page, 0);
+	}
+	_getCenterPositionViewPort(mainScene) {
+		if (!mainScene) return {
+			left: 0,
+			top: 0
+		};
+		const { width, height } = mainScene;
+		const engine = mainScene.getEngine();
+		const canvasWidth = (engine === null || engine === void 0 ? void 0 : engine.width) || 0;
+		const canvasHeight = (engine === null || engine === void 0 ? void 0 : engine.height) || 0;
+		return {
+			left: (width - canvasWidth) / 2,
+			top: (height - canvasHeight) / 2
+		};
+	}
+	_thumbSceneRender(pageId, slide) {
+		const render = this._renderManagerService.getRenderById(pageId);
+		if (render == null) return;
+		const { engine: thumbEngine } = render;
+		if (thumbEngine == null) return;
+		const { width, height } = slide;
+		const { width: pageWidth = width, height: pageHeight = height } = thumbEngine;
+		const thumbContext = thumbEngine.getCanvas().getContext();
+		slide.renderToThumb(thumbContext, pageId, pageWidth / width, pageHeight / height);
+	}
+	/**
+	* CreateScene by pages, and activate first one.
+	* @param slideDataModel
+	* @param slide
+	*/
+	_createSlidePages(slideDataModel, slide) {
+		const pages = slideDataModel.getPages();
+		const pageOrder = slideDataModel.getPageOrder();
+		if (!pages || !pageOrder) return;
+		if (pageOrder.length === 0) return;
+		for (let i = 0, len = pageOrder.length; i < len; i++) {
+			const pageId = pageOrder[i];
+			this.createPageScene(pageId, pages[pageId]);
+			this._createThumb(pageId);
+		}
+		slide.activeFirstPage();
+	}
+	_createThumb(pageId) {
+		this._renderManagerService.createRender(pageId);
+	}
+	/**
+	* SlideDataModel is UnitModel
+	*/
+	_getCurrUnitModel() {
+		return this._renderContext.unit;
+	}
+	activePage(_pageId) {
+		let pageId = _pageId;
+		const model = this._getCurrUnitModel();
+		let page;
+		if (pageId) page = model.getPage(pageId);
+		else {
+			const pageElements = model.getPages();
+			const pageOrder = model.getPageOrder();
+			if (pageOrder == null || pageElements == null) return;
+			page = pageElements[pageOrder[0]];
+			pageId = page.id;
+		}
+		const render = this._currentRender();
+		if (page == null || render == null || render.mainComponent == null) return;
+		const { id } = page;
+		const slide = render.mainComponent;
+		model.setActivePage(page);
+		if (slide === null || slide === void 0 ? void 0 : slide.hasPage(id)) {
+			slide.changePage(id);
+			return;
+		}
+		this.createPageScene(id, page);
+	}
+	createThumbs() {
+		const pageOrder = this._getCurrUnitModel().getPageOrder();
+		const render = this._currentRender();
+		if (!pageOrder || !render) return;
+		if (pageOrder.length === 0) return;
+		for (let i = 0, len = pageOrder.length; i < len; i++) {
+			const pageId = pageOrder[i];
+			this._thumbSceneRender(pageId, render.mainComponent);
+		}
+	}
+	/**
+	* Create scene by page and set to _sceneMap.
+	* @param pageId
+	* @param page
+	*/
+	createPageScene(pageId, page) {
+		const render = this._renderContext;
+		if (!render || !this._objectProvider) return;
+		const { scene: mainScene, mainComponent } = render;
+		const slide = mainComponent;
+		const { width, height } = slide;
+		const pageScene = new Scene(pageId, slide, {
+			width,
+			height
+		});
+		new Viewport(`PageViewer_${pageId}`, pageScene, {
+			left: 0,
+			top: 0,
+			bottom: 0,
+			right: 0,
+			explicitViewportWidthSet: false,
+			explicitViewportHeightSet: false
+		}).closeClip();
+		const { pageElements, pageBackgroundFill } = page;
+		const objects = this._objectProvider.convertToRenderObjects(pageElements, mainScene);
+		if (!objects || !slide) return;
+		this._addBackgroundRect(pageScene, pageBackgroundFill);
+		pageScene.addObjects(objects);
+		pageScene.initTransformer();
+		objects.forEach((object) => {
+			pageScene.attachTransformerTo(object);
+		});
+		const transformer = pageScene.getTransformer();
+		transformer === null || transformer === void 0 || transformer.changeEnd$.subscribe(() => {
+			this._thumbSceneRender(pageId, slide);
+		});
+		transformer === null || transformer === void 0 || transformer.clearControl$.subscribe(() => {
+			this._thumbSceneRender(pageId, slide);
+		});
+		slide.addPageScene(pageScene);
+		return pageScene;
+	}
+	/**
+	* Get pageScene from Slide.
+	* @param pageId
+	* @returns {Scene, Engine, UnitModel} scene & engine & unit from renderContext
+	*/
+	getPageRenderUnit(pageId) {
+		const pageScene = this._renderContext.mainComponent.getSubScenes().get(pageId);
+		const { engine, unit } = this._renderContext;
+		return {
+			scene: pageScene,
+			engine,
+			unit
+		};
+	}
+	createObjectToPage(element, pageID) {
+		const { scene } = this.getPageRenderUnit(pageID);
+		if (!scene || !this._objectProvider) return;
+		const object = this._objectProvider.convertToRenderObject(element, scene);
+		if (object) {
+			scene.addObject(object);
+			scene.attachTransformerTo(object);
+			scene.getLayer().makeDirty();
+			return object;
+		}
+	}
+	setObjectActiveByPage(obj, pageID) {
+		const { scene } = this.getPageRenderUnit(pageID);
+		if (!scene) return;
+		const transformer = scene.getTransformer();
+		transformer === null || transformer === void 0 || transformer.activeAnObject(obj);
+	}
+	removeObjectById(id, pageID) {
+		const { scene } = this.getPageRenderUnit(pageID);
+		if (!scene) return;
+		scene.removeObject(id);
+		const transformer = scene.getTransformer();
+		transformer === null || transformer === void 0 || transformer.clearControls();
+	}
+	appendPage() {
+		const model = this._getCurrUnitModel();
+		const page = model.getBlankPage();
+		const render = this._currentRender();
+		if (page == null || render == null || render.mainComponent == null) return;
+		const { id: pageId } = page;
+		const slide = render.mainComponent;
+		const scene = this.createPageScene(pageId, page);
+		if (slide && scene) slide.addPageScene(scene);
+		model.appendPage(page);
+		model.setActivePage(page);
+	}
+};
+SlideRenderController = __decorate([
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, IRenderManagerService)
+], SlideRenderController);
+
+//#endregion
+//#region src/controllers/canvas-view.ts
+let CanvasView = class CanvasView extends RxDisposable {
+	constructor(_renderManagerService) {
+		super();
+		this._renderManagerService = _renderManagerService;
+	}
+	_getSlideRenderControllerFromRenderUnit(unitId) {
+		return this._renderManagerService.getRenderById(unitId).with(SlideRenderController);
+	}
+	createThumbs(unitId) {
+		this._getSlideRenderControllerFromRenderUnit(unitId).createThumbs();
+	}
+	activePage(pageId, unitId) {
+		this._getSlideRenderControllerFromRenderUnit(unitId).activePage(pageId);
+	}
+	getRenderUnitByPageId(pageId, unitId) {
+		return this._getSlideRenderControllerFromRenderUnit(unitId).getPageRenderUnit(pageId);
+	}
+	createObjectToPage(element, pageID, unitId) {
+		return this._getSlideRenderControllerFromRenderUnit(unitId).createObjectToPage(element, pageID);
+	}
+	setObjectActiveByPage(obj, pageID, unitId) {
+		return this._getSlideRenderControllerFromRenderUnit(unitId).setObjectActiveByPage(obj, pageID);
+	}
+	removeObjectById(id, pageID, unitId) {
+		this._getSlideRenderControllerFromRenderUnit(unitId).removeObjectById(id, pageID);
+	}
+	/**
+	* append blank page
+	*/
+	appendPage(unitId) {
+		this._getSlideRenderControllerFromRenderUnit(unitId).appendPage();
+	}
+};
+CanvasView = __decorate([__decorateParam(0, IRenderManagerService)], CanvasView);
+
+//#endregion
+//#region src/commands/operations/activate.operation.ts
+const ActivateSlidePageOperation = {
+	id: "slide.operation.activate-slide",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		var _model$getActivePage, _page$scene;
+		const unitId = params.unitId;
+		const canvasView = accessor.get(CanvasView);
+		const model = accessor.get(IUniverInstanceService).getUnit(unitId);
+		const pageId = model === null || model === void 0 || (_model$getActivePage = model.getActivePage()) === null || _model$getActivePage === void 0 ? void 0 : _model$getActivePage.id;
+		if (!pageId) return false;
+		const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+		if (!page) return false;
+		const transformer = (_page$scene = page.scene) === null || _page$scene === void 0 ? void 0 : _page$scene.getTransformer();
+		if (transformer) transformer.clearControls();
+		canvasView.activePage(params.id, unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/append-slide.operation.ts
+const AppendSlideOperation = {
+	id: "slide.operation.append-slide",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const unitId = params.unitId;
+		if (!accessor.get(IUniverInstanceService).getUnit(unitId)) return false;
+		accessor.get(CanvasView).appendPage(unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/delete-element.operation.ts
+const DeleteSlideElementOperation = {
+	id: "slide.operation.delete-element",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		if (!(params === null || params === void 0 ? void 0 : params.id)) return false;
+		const unitId = params.unitId;
+		const slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		delete activePage.pageElements[params.id];
+		slideData.updatePage(activePage.id, activePage);
+		accessor.get(CanvasView).removeObjectById(params.id, activePage.id, unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/insert-image.operation.ts
+const InsertSlideFloatImageCommand = {
+	id: "slide.command.insert-float-image",
+	type: CommandType.COMMAND,
+	handler: async (accessor, params) => {
+		var _univerInstanceServic;
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const unitId = (_univerInstanceServic = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
+		if (!unitId) return false;
+		const files = await accessor.get(ILocalFileService).openFile({
+			multiple: true,
+			accept: DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
+		});
+		if (files.length !== 1) return false;
+		const imageParam = await accessor.get(IImageIoService).saveImage(files[0]);
+		if (!imageParam) return false;
+		const { imageId, imageSourceType, source, base64Cache } = imageParam;
+		const { width, height, image } = await getImageSize(base64Cache || "");
+		const slideData = univerInstanceService.getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		const elements = Object.values(activePage.pageElements);
+		const data = {
+			id: imageId,
+			zIndex: ((elements === null || elements === void 0 ? void 0 : elements.length) ? Math.max(...elements.map((element) => element.zIndex)) : 20) + 1,
+			left: 0,
+			top: 0,
+			width,
+			height,
+			title: "",
+			description: "",
+			type: PageElementType.IMAGE,
+			image: { imageProperties: {
+				contentUrl: base64Cache,
+				imageSourceType,
+				source,
+				base64Cache,
+				image
+			} }
+		};
+		activePage.pageElements[imageId] = data;
+		slideData.updatePage(activePage.id, activePage);
+		const canvasView = accessor.get(CanvasView);
+		const sceneObject = canvasView.createObjectToPage(data, activePage.id, unitId);
+		if (sceneObject) canvasView.setObjectActiveByPage(sceneObject, activePage.id, unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/update-element.operation.ts
+const UpdateSlideElementOperation = {
+	id: "slide.operation.update-element",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const { oKey, props } = params;
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const unitId = params === null || params === void 0 ? void 0 : params.unitId;
+		const slideData = univerInstanceService.getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		activePage.pageElements[oKey] = merge(activePage.pageElements[oKey], props);
+		slideData.updatePage(activePage.id, activePage);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/components/panels/ArrangePanel.tsx
+var ArrangeTypeEnum = /* @__PURE__ */ function(ArrangeTypeEnum) {
+	ArrangeTypeEnum[ArrangeTypeEnum["forward"] = 0] = "forward";
+	ArrangeTypeEnum[ArrangeTypeEnum["backward"] = 1] = "backward";
+	ArrangeTypeEnum[ArrangeTypeEnum["front"] = 2] = "front";
+	ArrangeTypeEnum[ArrangeTypeEnum["back"] = 3] = "back";
+	return ArrangeTypeEnum;
+}(ArrangeTypeEnum || {});
+function ArrangePanel$1(props) {
+	const { pageId, unitId } = props;
+	const localeService = useDependency(LocaleService);
+	const canvasView = useDependency(CanvasView);
+	const commandService = useDependency(ICommandService);
+	const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+	const scene = page === null || page === void 0 ? void 0 : page.scene;
+	if (!scene) return null;
+	const transformer = scene.getTransformer();
+	if (!transformer) return null;
+	const object = transformer.getSelectedObjectMap().values().next().value;
+	if (!object) return null;
+	const onArrangeBtnClick = (arrangeType) => {
+		const [minZIndex, maxZIndex] = scene.getAllObjects().reduce(([min, max], obj) => {
+			const zIndex = obj.zIndex;
+			return [zIndex < min ? zIndex : min, zIndex > max ? zIndex : max];
+		}, [0, 0]);
+		let zIndex = object.zIndex;
+		if (arrangeType === ArrangeTypeEnum.back) zIndex = minZIndex - 1;
+		else if (arrangeType === ArrangeTypeEnum.front) zIndex = maxZIndex + 1;
+		else if (arrangeType === ArrangeTypeEnum.forward) zIndex = object.zIndex + 1;
+		else if (arrangeType === ArrangeTypeEnum.backward) zIndex = object.zIndex - 1;
+		object.setProps({ zIndex });
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			unitId,
+			oKey: object === null || object === void 0 ? void 0 : object.oKey,
+			props: { zIndex }
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-relative univer-w-full",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200",
+					children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.arrange.title") })
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.forward);
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ jsx(MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.backward);
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ jsx(MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.front);
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ jsx(TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+						})
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.back);
+						},
+						children: /* @__PURE__ */ jsxs("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ jsx(BottomIcon, {}), localeService.t("image-panel.arrange.back")]
+						})
+					})
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/panels/FillPanel.tsx
+/**
+*
+* @param props
+*/
+function ArrangePanel(props) {
+	var _object$fill$toString, _object$fill;
+	const { pageId, unitId } = props;
+	const localeService = useDependency(LocaleService);
+	const canvasView = useDependency(CanvasView);
+	const commandService = useDependency(ICommandService);
+	const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+	const scene = page === null || page === void 0 ? void 0 : page.scene;
+	if (!scene) return null;
+	const transformer = scene.getTransformer();
+	if (!transformer) return null;
+	const object = transformer.getSelectedObjectMap().values().next().value;
+	if (!object) return null;
+	const [color, setColor] = useState((_object$fill$toString = (_object$fill = object.fill) === null || _object$fill === void 0 ? void 0 : _object$fill.toString()) !== null && _object$fill$toString !== void 0 ? _object$fill$toString : "");
+	/**
+	*
+	* @param color
+	*/
+	function handleChangeColor(color) {
+		object === null || object === void 0 || object.setProps({ fill: color });
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			unitId,
+			oKey: object === null || object === void 0 ? void 0 : object.oKey,
+			props: { shape: { shapeProperties: { shapeBackgroundFill: { rgb: color } } } }
+		});
+		setColor(color);
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-relative univer-bottom-0 univer-mt-5 univer-w-full", borderTopClassName),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "univer-relative univer-w-full",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200",
+					children: /* @__PURE__ */ jsx("div", { children: localeService.t("slide.panel.fill.title") })
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ jsx(Dropdown, {
+						overlay: /* @__PURE__ */ jsx("div", {
+							className: "univer-rounded-lg univer-p-4",
+							children: /* @__PURE__ */ jsx(ColorPicker, {
+								value: "#fff",
+								onChange: handleChangeColor
+							})
+						}),
+						children: /* @__PURE__ */ jsxs("a", {
+							className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ jsx(PaintBucketDoubleIcon, { className: "univer-fill-primary-600" }), /* @__PURE__ */ jsx(MoreDownIcon, {})]
+						})
+					})
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/panels/TransformPanel.tsx
+function TransformPanel(props) {
+	const { pageId, unitId } = props;
+	const localeService = useDependency(LocaleService);
+	const canvasView = useDependency(CanvasView);
+	const commandService = useDependency(ICommandService);
+	const page = canvasView.getRenderUnitByPageId(pageId, unitId);
+	const scene = page === null || page === void 0 ? void 0 : page.scene;
+	if (!scene) return null;
+	const transformer = scene.getTransformer();
+	if (!transformer) return null;
+	const object = transformer.getSelectedObjectMap().values().next().value;
+	if (!object) return null;
+	const { width: originWidth = 0, height: originHeight = 0, left: originX = 0, top: originY = 0, angle: originRotation = 0 } = object;
+	const [width, setWidth] = useState(originWidth);
+	const [height, setHeight] = useState(originHeight);
+	const [xPosition, setXPosition] = useState(originX);
+	const [yPosition, setYPosition] = useState(originY);
+	const [rotation, setRotation] = useState(originRotation);
+	const changeObs = (state) => {
+		const { objects } = state;
+		const { width: originWidth = 0, height: originHeight = 0, left: originX = 0, top: originY = 0, angle: originRotation = 0 } = objects.values().next().value;
+		setWidth(originWidth);
+		setHeight(originHeight);
+		setXPosition(originX);
+		setYPosition(originY);
+		setRotation(originRotation);
+	};
+	useEffect(() => {
+		const changeStartSub = transformer.changeStart$.subscribe((state) => {
+			changeObs(state);
+		});
+		const changingSub = transformer.changing$.subscribe((state) => {
+			changeObs(state);
+		});
+		return () => {
+			changingSub.unsubscribe();
+			changeStartSub.unsubscribe();
+		};
+	}, []);
+	function handleWidthChange(val) {
+		if (!val || !object) return;
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			pageId,
+			oKey: object.oKey,
+			props: { width: val }
+		});
+		object === null || object === void 0 || object.resize(val, object.height);
+		setWidth(val);
+		transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	function handleHeightChange(val) {
+		if (!val || !object) return;
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			pageId,
+			oKey: object.oKey,
+			props: { height: val }
+		});
+		object === null || object === void 0 || object.resize(object.width, val);
+		setHeight(val);
+		transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	function handleXChange(val) {
+		if (!val || !object) return;
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			pageId,
+			oKey: object.oKey,
+			props: { left: val }
+		});
+		object === null || object === void 0 || object.translate(val, object.top);
+		setXPosition(val);
+		transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	function handleYChange(val) {
+		if (!val || !object) return;
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			pageId,
+			oKey: object.oKey,
+			props: { right: val }
+		});
+		object === null || object === void 0 || object.translate(object.left, val);
+		setYPosition(val);
+		transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	function handleChangeRotation(val) {
+		if (!val || !object) return;
+		commandService.executeCommand(UpdateSlideElementOperation.id, {
+			pageId,
+			oKey: object.oKey,
+			props: { angle: val }
+		});
+		object === null || object === void 0 || object.transformByState({ angle: val });
+		setRotation(val);
+		transformer === null || transformer === void 0 || transformer.refreshControls();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", borderTopClassName),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ jsx("div", { children: localeService.t("image-panel.transform.title") })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ jsx(InputNumber, {
+					min: 1,
+					value: width,
+					onChange: (val) => {
+						handleWidthChange(val);
+					}
+				})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ jsx(InputNumber, {
+					min: 1,
+					value: height,
+					onChange: (val) => {
+						handleHeightChange(val);
+					}
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ jsx(InputNumber, {
+						min: 0,
+						precision: 1,
+						value: xPosition,
+						onChange: (val) => {
+							handleXChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ jsx(InputNumber, {
+						min: 0,
+						precision: 1,
+						value: yPosition,
+						onChange: (val) => {
+							handleYChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ jsx(InputNumber, {
+						precision: 1,
+						value: rotation,
+						onChange: handleChangeRotation
+					})] })
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/components/sidebar/Sidebar.tsx
+const COMPONENT_SLIDE_SIDEBAR = "COMPONENT_SLIDE_SIDEBAR";
+function RectSidebar() {
+	var _currentSlide$getActi, _univerInstanceServic, _page$scene;
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const canvasView = useDependency(CanvasView);
+	const currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+	const pageId = currentSlide === null || currentSlide === void 0 || (_currentSlide$getActi = currentSlide.getActivePage()) === null || _currentSlide$getActi === void 0 ? void 0 : _currentSlide$getActi.id;
+	const unitId = ((_univerInstanceServic = univerInstanceService.getFocusedUnit()) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId()) || "";
+	if (!pageId || !unitId) return null;
+	const transformer = (_page$scene = canvasView.getRenderUnitByPageId(pageId, unitId).scene) === null || _page$scene === void 0 ? void 0 : _page$scene.getTransformer();
+	if (!transformer) return null;
+	const object = transformer.getSelectedObjectMap().values().next().value;
+	if (!object) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "univer-p-2 univer-text-center univer-text-sm",
+		children: [
+			/* @__PURE__ */ jsx(ArrangePanel$1, {
+				pageId,
+				unitId
+			}),
+			/* @__PURE__ */ jsx(TransformPanel, {
+				pageId,
+				unitId
+			}),
+			object.objectType === ObjectType.RECT && /* @__PURE__ */ jsx(ArrangePanel, {
+				pageId,
+				unitId
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/commands/operations/insert-shape.operation.ts
+const InsertSlideShapeRectangleCommand = {
+	id: "slide.command.insert-float-shape.rectangle",
+	type: CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _instanceService$getF;
+		const commandService = accessor.get(ICommandService);
+		const unitId = (_instanceService$getF = accessor.get(IUniverInstanceService).getFocusedUnit()) === null || _instanceService$getF === void 0 ? void 0 : _instanceService$getF.getUnitId();
+		return commandService.executeCommand(InsertSlideShapeRectangleOperation.id, { unitId });
+	}
+};
+const InsertSlideShapeRectangleOperation = {
+	id: "slide.operation.insert-float-shape.rectangle",
+	type: CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const id = generateRandomId(6);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const unitId = params.unitId;
+		const slideData = univerInstanceService.getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		const elements = Object.values(activePage.pageElements);
+		const data = {
+			id,
+			zIndex: ((elements === null || elements === void 0 ? void 0 : elements.length) ? Math.max(...elements.map((element) => element.zIndex)) : 20) + 1,
+			left: 378,
+			top: 142,
+			width: 250,
+			height: 250,
+			title: id,
+			description: "",
+			type: PageElementType.SHAPE,
+			shape: {
+				shapeType: BasicShapes.Rect,
+				text: "",
+				shapeProperties: { shapeBackgroundFill: { rgb: "rgb(0,0,255)" } }
+			}
+		};
+		activePage.pageElements[id] = data;
+		slideData.updatePage(activePage.id, activePage);
+		const canvasview = accessor.get(CanvasView);
+		const sceneObject = canvasview.createObjectToPage(data, activePage.id, unitId);
+		if (sceneObject) canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId);
+		return true;
+	}
+};
+const ToggleSlideEditSidebarOperation = {
+	id: "sidebar.operation.slide-shape",
+	type: CommandType.COMMAND,
+	handler: async (accessor, params) => {
+		const { visible, objectType } = params;
+		const sidebarService = accessor.get(ISidebarService);
+		const localeService = accessor.get(LocaleService);
+		let title = "";
+		let children = "";
+		if (objectType === ObjectType.RECT) {
+			title = "slide.sidebar.shape";
+			children = COMPONENT_SLIDE_SIDEBAR;
+		} else if (objectType === ObjectType.IMAGE) {
+			title = "slide.sidebar.image";
+			children = COMPONENT_SLIDE_SIDEBAR;
+		} else if (objectType === ObjectType.RICH_TEXT) {
+			title = "slide.sidebar.text";
+			children = COMPONENT_SLIDE_SIDEBAR;
+		}
+		if (visible) sidebarService.open({
+			header: { title: localeService.t(title) },
+			children: { label: children },
+			onClose: () => {},
+			width: 360
+		});
+		else sidebarService.close();
+		return true;
+	}
+};
+const InsertSlideShapeEllipseCommand = {
+	id: "slide.command.insert-float-shape.ellipse",
+	type: CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _instanceService$getF2;
+		const commandService = accessor.get(ICommandService);
+		const unitId = (_instanceService$getF2 = accessor.get(IUniverInstanceService).getFocusedUnit()) === null || _instanceService$getF2 === void 0 ? void 0 : _instanceService$getF2.getUnitId();
+		return commandService.executeCommand(InsertSlideShapeEllipseOperation.id, { unitId });
+	}
+};
+const InsertSlideShapeEllipseOperation = {
+	id: "slide.operation.insert-float-shape.ellipse",
+	type: CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const id = generateRandomId(6);
+		const univerInstanceService = accessor.get(IUniverInstanceService);
+		const unitId = params.unitId;
+		const slideData = univerInstanceService.getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		const elements = Object.values(activePage.pageElements);
+		const data = {
+			id,
+			zIndex: ((elements === null || elements === void 0 ? void 0 : elements.length) ? Math.max(...elements.map((element) => element.zIndex)) : 20) + 1,
+			left: 378,
+			top: 142,
+			width: 250,
+			height: 250,
+			title: id,
+			description: "",
+			type: PageElementType.SHAPE,
+			shape: {
+				shapeType: BasicShapes.Ellipse,
+				text: "",
+				shapeProperties: {
+					radius: 100,
+					shapeBackgroundFill: { rgb: "rgb(0,0,255)" }
+				}
+			}
+		};
+		activePage.pageElements[id] = data;
+		slideData.updatePage(activePage.id, activePage);
+		const canvasview = accessor.get(CanvasView);
+		const sceneObject = canvasview.createObjectToPage(data, activePage.id, unitId);
+		if (sceneObject) canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/insert-text.operation.ts
+const SlideAddTextCommand = {
+	id: "slide.command.add-text",
+	type: CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _univerInstanceServic;
+		const commandService = accessor.get(ICommandService);
+		const unitId = (_univerInstanceServic = accessor.get(IUniverInstanceService).getFocusedUnit()) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
+		return await commandService.executeCommand(SlideAddTextOperation.id, { unitId });
+	}
+};
+const SlideAddTextOperation = {
+	id: "slide.operation.add-text",
+	type: CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const unitId = params.unitId;
+		const elementId = generateRandomId(6);
+		const defaultWidth = 220;
+		const defaultheight = 40;
+		const left = 230;
+		const top = 142;
+		const textContent = (params === null || params === void 0 ? void 0 : params.text) || "A New Text";
+		const slideData = accessor.get(IUniverInstanceService).getUnit(unitId);
+		if (!slideData) return false;
+		const activePage = slideData.getActivePage();
+		const elements = Object.values(activePage.pageElements);
+		const elementData = {
+			id: elementId,
+			zIndex: ((elements === null || elements === void 0 ? void 0 : elements.length) ? Math.max(...elements.map((element) => element.zIndex)) : 21) + 1,
+			left,
+			top,
+			width: defaultWidth,
+			height: defaultheight,
+			title: "text",
+			description: "",
+			type: PageElementType.TEXT,
+			richText: {
+				text: textContent,
+				fs: 30,
+				cl: { rgb: "rgb(51, 51, 51)" },
+				bl: 1
+			}
+		};
+		activePage.pageElements[elementId] = elementData;
+		slideData.updatePage(activePage.id, activePage);
+		const canvasview = accessor.get(CanvasView);
+		const sceneObject = canvasview.createObjectToPage(elementData, activePage.id, unitId);
+		if (sceneObject) canvasview.setObjectActiveByPage(sceneObject, activePage.id, unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/set-thumb.operation.ts
+const SetSlidePageThumbOperation = {
+	id: "slide.operation.set-slide-page-thumb",
+	type: CommandType.OPERATION,
+	handler: (accessor, params) => {
+		accessor.get(CanvasView).createThumbs(params.unitId);
+		return true;
+	}
+};
+
+//#endregion
+//#region src/components/slide-bar/SlideBar.tsx
+/**
+* This components works as the root component of the left Sidebar of Slide.
+*/
+function SlideSideBar() {
+	var _currentSlide$getActi, _currentSlide$getActi2;
+	const univerInstanceService = useDependency(IUniverInstanceService);
+	const commandService = useDependency(ICommandService);
+	const renderManagerService = useDependency(IRenderManagerService);
+	const localeService = useDependency(LocaleService);
+	const slideBarRef = useRef(null);
+	const currentSlide = univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+	const pages = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPages();
+	const pageOrder = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getPageOrder();
+	if (!pages || !pageOrder) return null;
+	const slideList = pageOrder.map((id) => pages[id]);
+	const [activatePageId, setActivatePageId] = useState((_currentSlide$getActi = currentSlide === null || currentSlide === void 0 || (_currentSlide$getActi2 = currentSlide.getActivePage()) === null || _currentSlide$getActi2 === void 0 ? void 0 : _currentSlide$getActi2.id) !== null && _currentSlide$getActi !== void 0 ? _currentSlide$getActi : null);
+	const divRefs = useMemo(() => slideList.map(() => createRef()), [slideList]);
+	useEffect(() => {
+		const subscriber = currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.activePage$.subscribe((page) => {
+			var _page$id;
+			const id = (_page$id = page === null || page === void 0 ? void 0 : page.id) !== null && _page$id !== void 0 ? _page$id : null;
+			id && setActivatePageId(id);
+		});
+		return () => {
+			subscriber === null || subscriber === void 0 || subscriber.unsubscribe();
+		};
+	}, []);
+	useEffect(() => {
+		divRefs.forEach((ref, index) => {
+			if (ref.current) {
+				var _renderManagerService;
+				const slide = slideList[index];
+				(_renderManagerService = renderManagerService.getRenderById(slide.id)) === null || _renderManagerService === void 0 || _renderManagerService.engine.setContainer(ref.current);
+			}
+		});
+		if (divRefs.length > 0) commandService.syncExecuteCommand(SetSlidePageThumbOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
+	}, [
+		divRefs,
+		slideList,
+		renderManagerService,
+		commandService,
+		currentSlide
+	]);
+	const activatePage = useCallback((page) => {
+		commandService.syncExecuteCommand(ActivateSlidePageOperation.id, {
+			id: page,
+			unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId()
+		});
+	}, [commandService, currentSlide]);
+	const handleAppendSlide = useCallback(() => {
+		commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
+	}, [commandService, currentSlide]);
+	return /* @__PURE__ */ jsx("aside", {
+		ref: slideBarRef,
+		className: clsx("univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden", scrollbarClassName),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "univer-px-4",
+			children: [/* @__PURE__ */ jsx("header", {
+				className: "univer-flex univer-justify-center univer-pt-4",
+				children: /* @__PURE__ */ jsx("a", {
+					className: clsx("univer-box-border univer-block univer-h-8 univer-w-full univer-cursor-pointer univer-rounded-md univer-bg-white univer-text-center univer-text-sm univer-leading-8 univer-transition-colors", borderClassName),
+					onClick: handleAppendSlide,
+					children: localeService.t("slide.append")
+				})
+			}), slideList.map((item, index) => /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-my-4 univer-flex univer-gap-2", { "[&>div]:univer-border-primary-600 [&>span]:univer-text-primary-600": item.id === activatePageId }),
+				onClick: () => activatePage(item.id),
+				children: [/* @__PURE__ */ jsx("span", { children: index + 1 }), /* @__PURE__ */ jsx("div", {
+					ref: divRefs[index],
+					className: clsx("univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600", borderClassName)
+				})]
+			}, item.id))]
+		})
+	});
+}
+
+//#endregion
+//#region src/const.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 SLIDE_EDITOR_ID = createInternalEditorID("SLIDE_EDITOR");
+
+//#endregion
+//#region src/commands/operations/text-edit.operation.ts
+const SetTextEditArrowOperation = {
+	id: "slide.operation.edit-arrow",
+	type: CommandType.OPERATION,
+	handler: () => true
+};
+
+//#endregion
+//#region src/components/image-popup-menu/component-name.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const COMPONENT_SLIDE_IMAGE_POPUP_MENU = "COMPONENT_SLIDE_IMAGE_POPUP_MENU";
+
+//#endregion
+//#region src/components/image-popup-menu/ImagePopupMenu.tsx
+function SlideImagePopupMenu(props) {
+	var _props$popup;
+	const menuItems = (_props$popup = props.popup) === null || _props$popup === void 0 || (_props$popup = _props$popup.extraProps) === null || _props$popup === void 0 ? void 0 : _props$popup.menuItems;
+	if (!menuItems) return null;
+	const commandService = useDependency(ICommandService);
+	const localeService = useDependency(LocaleService);
+	const [visible, setVisible] = useState(false);
+	const [isHovered, setHovered] = useState(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	const availableMenu = menuItems.filter((item) => !item.disable);
+	return /* @__PURE__ */ jsx("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ jsx(Dropdown, {
+			align: "start",
+			overlay: /* @__PURE__ */ jsx("ul", {
+				className: clsx("univer-m-0 univer-box-border univer-grid univer-list-none univer-items-center univer-gap-1 univer-rounded-lg univer-bg-white univer-p-1.5 univer-text-sm univer-shadow-lg", borderClassName),
+				children: availableMenu.map((item) => /* @__PURE__ */ jsx("li", {
+					className: "univer-relative univer-box-border univer-flex univer-h-8 univer-cursor-pointer univer-items-center univer-rounded univer-text-sm univer-transition-colors hover:univer-bg-gray-100",
+					onClick: () => handleClick(item),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "univer-px-2 univer-py-1.5 univer-align-middle",
+						children: localeService.t(item.label)
+					})
+				}, item.index))
+			}),
+			open: visible,
+			onOpenChange: onVisibleChange,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: clsx("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ jsx(AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ jsx(MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/menu/image.menu.ts
+const SLIDES_IMAGE_MENU_ID = "slide.menu.image";
+function SlideImageMenuFactory(accessor) {
+	return {
+		id: SLIDES_IMAGE_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "AddImageIcon",
+		tooltip: "slide.image.insert.title",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatImageMenuFactory(_accessor) {
+	return {
+		id: InsertSlideFloatImageCommand.id,
+		title: "slide.image.insert.float",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+
+//#endregion
+//#region src/menu/shape.menu.ts
+const SHAPE_MENU_ID = "slide.menu.shape";
+function SlideShapeMenuFactory(accessor) {
+	return {
+		id: SHAPE_MENU_ID,
+		type: MenuItemType.SUBITEMS,
+		icon: "GraphIcon",
+		tooltip: "slide.shape.insert.title",
+		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatRectangleShapeMenuFactory(_accessor) {
+	return {
+		id: InsertSlideShapeRectangleCommand.id,
+		title: "slide.shape.insert.rectangle",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatEllipseShapeMenuFactory(_accessor) {
+	return {
+		id: InsertSlideShapeEllipseCommand.id,
+		title: "slide.shape.insert.ellipse",
+		type: MenuItemType.BUTTON,
+		hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+
+//#endregion
+//#region src/menu/text.menu.ts
+function SlideAddTextMenuItemFactory(_accessor) {
+	return {
+		id: SlideAddTextCommand.id,
+		type: MenuItemType.BUTTON,
+		icon: "TextIcon",
+		tooltip: "slide.text.insert.title",
+		hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [RibbonStartGroup.FORMAT]: {
+	[SlideAddTextCommand.id]: {
+		order: 0,
+		menuItemFactory: SlideAddTextMenuItemFactory
+	},
+	[SLIDES_IMAGE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: SlideImageMenuFactory,
+		[InsertSlideFloatImageCommand.id]: {
+			order: 0,
+			menuItemFactory: UploadSlideFloatImageMenuFactory
+		}
+	},
+	[SHAPE_MENU_ID]: {
+		order: 0,
+		menuItemFactory: SlideShapeMenuFactory,
+		[InsertSlideShapeRectangleCommand.id]: {
+			order: 0,
+			menuItemFactory: UploadSlideFloatRectangleShapeMenuFactory
+		},
+		[InsertSlideShapeEllipseCommand.id]: {
+			order: 0,
+			menuItemFactory: UploadSlideFloatEllipseShapeMenuFactory
+		}
+	}
+} };
+
+//#endregion
+//#region src/services/slide-editor-manager.service.ts
+var SlideEditorManagerService = class {
+	constructor() {
+		_defineProperty(this, "_state", null);
+		_defineProperty(this, "_rect", null);
+		_defineProperty(this, "_state$", new BehaviorSubject(null));
+		_defineProperty(this, "state$", this._state$.asObservable());
+		_defineProperty(this, "_rect$", new BehaviorSubject(null));
+		_defineProperty(this, "rect$", this._rect$.asObservable());
+		_defineProperty(this, "_focus", false);
+		_defineProperty(this, "_focus$", new BehaviorSubject(this._focus));
+		_defineProperty(this, "focus$", this._focus$.asObservable());
+	}
+	dispose() {
+		this._state$.complete();
+		this._state = null;
+		this._rect$.complete();
+		this._rect = null;
+	}
+	setState(param) {
+		this._state = param;
+		this._refresh(param);
+	}
+	getRect() {
+		return this._rect;
+	}
+	setRect(param) {
+		this._rect = param;
+		this._rect$.next(param);
+	}
+	getState() {
+		return this._state;
+	}
+	setFocus(param = false) {
+		this._focus = param;
+		this._focus$.next(param);
+	}
+	_refresh(param) {
+		this._state$.next(param);
+	}
+};
+const ISlideEditorManagerService = createIdentifier("univer.slide-editor-manager.service");
+
+//#endregion
+//#region src/views/editor-container/EditorContainer.tsx
+const HIDDEN_EDITOR_POSITION$1 = -1e3;
+const EDITOR_DEFAULT_POSITION = {
+	width: 0,
+	height: 0,
+	top: HIDDEN_EDITOR_POSITION$1,
+	left: HIDDEN_EDITOR_POSITION$1
+};
+/**
+* Floating editor's container.
+*/
+function SlideEditorContainer() {
+	const [state, setState] = useState({ ...EDITOR_DEFAULT_POSITION });
+	const slideEditorManagerService = useDependency(ISlideEditorManagerService);
+	const editorService = useDependency(IEditorService);
+	const contextService = useDependency(IContextService);
+	const disableAutoFocus = useObservable(() => contextService.subscribeContextValue$(DISABLE_AUTO_FOCUS_KEY), false, void 0, [contextService, DISABLE_AUTO_FOCUS_KEY]);
+	`${DEFAULT_EMPTY_DOCUMENT_VALUE}`, DocumentFlavor.UNSPECIFIED;
+	useEffect(() => {
+		slideEditorManagerService.state$.subscribe((param) => {
+			if (param == null) return;
+			const { startX = HIDDEN_EDITOR_POSITION$1, startY = HIDDEN_EDITOR_POSITION$1, endX = 0, endY = 0, show = false } = param;
+			if (!show) setState({ ...EDITOR_DEFAULT_POSITION });
+			else {
+				setState({
+					width: endX - startX - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+					height: endY - startY - FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+					left: startX + FIX_ONE_PIXEL_BLUR_OFFSET,
+					top: startY + FIX_ONE_PIXEL_BLUR_OFFSET
+				});
+				const editor = editorService.getEditor(SLIDE_EDITOR_ID);
+				if (editor == null) return;
+				const { left, top, width, height } = editor.getBoundingClientRect();
+				slideEditorManagerService.setRect({
+					left,
+					top,
+					width,
+					height
+				});
+			}
+		});
+	}, []);
+	useEffect(() => {
+		if (!disableAutoFocus) slideEditorManagerService.setFocus(true);
+	}, [disableAutoFocus, state]);
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("univer-absolute univer-z-10 univer-box-border univer-flex", borderClassName),
+		style: {
+			left: state.left,
+			top: state.top,
+			width: state.width,
+			height: state.height
+		}
+	});
+}
+
+//#endregion
+//#region src/controllers/shortcuts/utils.ts
+function whenEditorActivated(contextService) {
+	return contextService.getContextValue(FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(EDITOR_ACTIVATED);
+}
+/**
+* Requires the currently focused editor is a formula editor.
+* @param contextService
+* @returns If the formula editor is focused.
+*/
+function whenFormulaEditorFocused(contextService) {
+	return contextService.getContextValue(FORMULA_EDITOR_ACTIVATED) && contextService.getContextValue(FOCUSING_UNIVER_EDITOR);
+}
+
+//#endregion
+//#region src/controllers/shortcuts/editor.shortcuts.ts
+const ARROW_SELECTION_KEYCODE_LIST = [
+	KeyCode.ARROW_DOWN,
+	KeyCode.ARROW_UP,
+	KeyCode.ARROW_LEFT,
+	KeyCode.ARROW_RIGHT
+];
+const MOVE_SELECTION_KEYCODE_LIST = [
+	KeyCode.ENTER,
+	KeyCode.TAB,
+	...ARROW_SELECTION_KEYCODE_LIST
+];
+function generateArrowSelectionShortCutItem() {
+	const shortcutList = [];
+	for (const keycode of ARROW_SELECTION_KEYCODE_LIST) {
+		shortcutList.push({
+			id: SetTextEditArrowOperation.id,
+			binding: keycode,
+			preconditions: (contextService) => whenEditorActivated(contextService),
+			staticParameters: {
+				visible: false,
+				eventType: DeviceInputEventType.Keyboard,
+				keycode,
+				isShift: false
+			}
+		});
+		shortcutList.push({
+			id: SetTextEditArrowOperation.id,
+			binding: keycode | MetaKeys.SHIFT,
+			preconditions: (contextService) => whenEditorActivated(contextService),
+			staticParameters: {
+				visible: false,
+				eventType: DeviceInputEventType.Keyboard,
+				keycode,
+				isShift: true
+			}
+		});
+	}
+	return shortcutList;
+}
+const EditorDeleteLeftShortcut = {
+	id: DeleteLeftCommand.id,
+	preconditions: (contextService) => {
+		return whenEditorActivated(contextService) || whenFormulaEditorFocused(contextService);
+	},
+	binding: KeyCode.BACKSPACE
+};
+
+//#endregion
+//#region src/controllers/slide-ui.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let SlidesUIController = class SlidesUIController extends Disposable {
+	constructor(_injector, _menuManagerService, _componentManager, _uiPartsService, _commandService, _shortcutService) {
+		super();
+		this._injector = _injector;
+		this._menuManagerService = _menuManagerService;
+		this._componentManager = _componentManager;
+		this._uiPartsService = _uiPartsService;
+		this._commandService = _commandService;
+		this._shortcutService = _shortcutService;
+		this._initCommands();
+		this._initCustomComponents();
+		this._initUIComponents();
+		this._initMenus();
+		this._initShortcuts();
+	}
+	_initMenus() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+	_initCustomComponents() {
+		const componentManager = this._componentManager;
+		this.disposeWithMe(componentManager.register("TextIcon", TextIcon));
+		this.disposeWithMe(componentManager.register("GraphIcon", GraphIcon));
+		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_IMAGE_POPUP_MENU, SlideImagePopupMenu));
+		this.disposeWithMe(componentManager.register(COMPONENT_SLIDE_SIDEBAR, RectSidebar));
+	}
+	_initCommands() {
+		[
+			AppendSlideOperation,
+			ActivateSlidePageOperation,
+			SetSlidePageThumbOperation,
+			InsertSlideFloatImageCommand,
+			SlideAddTextOperation,
+			SlideAddTextCommand,
+			InsertSlideShapeEllipseCommand,
+			InsertSlideShapeEllipseOperation,
+			InsertSlideShapeRectangleOperation,
+			InsertSlideShapeRectangleCommand,
+			ToggleSlideEditSidebarOperation,
+			DeleteSlideElementOperation,
+			UpdateSlideElementOperation,
+			SetTextEditArrowOperation
+		].forEach((command) => this.disposeWithMe(this._commandService.registerCommand(command)));
+	}
+	_initUIComponents() {
+		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.LEFT_SIDEBAR, () => connectInjector(SlideSideBar, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent(BuiltInUIPart.CONTENT, () => connectInjector(SlideEditorContainer, this._injector)));
+	}
+	_initShortcuts() {
+		[EditorDeleteLeftShortcut, ...generateArrowSelectionShortCutItem()].forEach((item) => {
+			this.disposeWithMe(this._shortcutService.registerShortcut(item));
+		});
+	}
+};
+SlidesUIController = __decorate([
+	__decorateParam(0, Inject(Injector)),
+	__decorateParam(1, IMenuManagerService),
+	__decorateParam(2, Inject(ComponentManager)),
+	__decorateParam(3, IUIPartsService),
+	__decorateParam(4, ICommandService),
+	__decorateParam(5, IShortcutService)
+], SlidesUIController);
+
+//#endregion
+//#region package.json
+var name = "@univerjs/slides-ui";
+var version = "0.21.0";
+
+//#endregion
+//#region src/config/config.ts
+const SLIDES_UI_PLUGIN_CONFIG_KEY = "slides-ui.config";
+const configSymbol = Symbol(SLIDES_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {};
+
+//#endregion
+//#region src/services/slide-editor-bridge.service.ts
+const ISlideEditorBridgeService = createIdentifier("univer.slide-editor-bridge.service");
+let SlideEditorBridgeService = class SlideEditorBridgeService extends Disposable {
+	constructor(_editorService, _contextService, _renderManagerService) {
+		super();
+		this._editorService = _editorService;
+		this._contextService = _contextService;
+		this._renderManagerService = _renderManagerService;
+		_defineProperty(this, "_editorUnitId", SLIDE_EDITOR_ID);
+		_defineProperty(this, "_isForceKeepVisible", false);
+		_defineProperty(this, "_editorIsDirty", false);
+		_defineProperty(this, "_currentEditRectState", null);
+		_defineProperty(this, "_currentEditRectState$", new BehaviorSubject(null));
+		_defineProperty(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
+		_defineProperty(this, "_visibleParam", {
+			visible: false,
+			eventType: DeviceInputEventType.Dblclick,
+			unitId: ""
+		});
+		_defineProperty(this, "_visible$", new BehaviorSubject(this._visibleParam));
+		_defineProperty(this, "visible$", this._visible$.asObservable());
+		_defineProperty(this, "_afterVisible$", new BehaviorSubject(this._visibleParam));
+		_defineProperty(this, "afterVisible$", this._afterVisible$.asObservable());
+		_defineProperty(this, "endEditing$", new Subject());
+		_defineProperty(this, "_currentEditRectInfo", void 0);
+	}
+	dispose() {
+		super.dispose();
+	}
+	getEditorRect() {
+		return this._currentEditRectInfo;
+	}
+	/**
+	* 1st part of startEditing.
+	* @editorInfo editorInfo
+	*/
+	setEditorRect(editorInfo) {
+		this._currentEditRectInfo = editorInfo;
+		if (!this._editorService.getFocusEditor()) {
+			this._editorService.focus(SLIDE_EDITOR_ID);
+			this._contextService.setContextValue(EDITOR_ACTIVATED, false);
+			this._contextService.setContextValue(FOCUSING_EDITOR_STANDALONE, false);
+			this._contextService.setContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE, false);
+		}
+		const editRectState = this.getEditRectState();
+		this._currentEditRectState = editRectState;
+		this._currentEditRectState$.next(editRectState);
+	}
+	changeVisible(param) {
+		/**
+		* Non-sheetEditor and formula selection mode,
+		* double-clicking cannot activate the sheet editor.
+		*/
+		this._visibleParam = param;
+		if (param.visible) this._editorIsDirty = false;
+		this._visible$.next(this._visibleParam);
+		this._afterVisible$.next(this._visibleParam);
+	}
+	/**
+	* get info from _currentEditRectInfo
+	*
+	* invoked by slide-editing.render-controller.ts@_handleEditorVisible
+	* && this@setEditorRect
+	*/
+	getEditRectState() {
+		const editorUnitId = SLIDE_EDITOR_ID;
+		const editorRectInfo = this._currentEditRectInfo;
+		const unitId = editorRectInfo.unitId;
+		const docData = editorRectInfo.richTextObj.documentData;
+		docData.id = editorUnitId;
+		docData.documentStyle = {
+			...docData.documentStyle,
+			pageSize: {
+				width: editorRectInfo.richTextObj.width,
+				height: Infinity
+			}
+		};
+		const documentLayoutObject = {
+			documentModel: new DocumentDataModel(docData),
+			fontString: "document",
+			textRotation: {
+				a: 0,
+				v: 0
+			},
+			wrapStrategy: 0,
+			verticalAlign: VerticalAlign.TOP,
+			horizontalAlign: HorizontalAlign.LEFT,
+			paddingData: {
+				t: 0,
+				b: 1,
+				l: 2,
+				r: 2
+			}
+		};
+		const editorWidth = editorRectInfo.richTextObj.width;
+		const editorHeight = editorRectInfo.richTextObj.height;
+		const left = editorRectInfo.richTextObj.left;
+		const top = editorRectInfo.richTextObj.top;
+		const canvasOffset = {
+			left: 0,
+			top: 0
+		};
+		const renderUnit = this._renderManagerService.getRenderById(unitId);
+		const mainScene = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit.scene;
+		const mainViewport = mainScene === null || mainScene === void 0 ? void 0 : mainScene.getViewport(SLIDE_KEY.VIEW);
+		const slideMainRect = mainScene === null || mainScene === void 0 ? void 0 : mainScene.getObject(SLIDE_KEY.COMPONENT);
+		const slidePos = {
+			x: (slideMainRect === null || slideMainRect === void 0 ? void 0 : slideMainRect.left) || 0,
+			y: (slideMainRect === null || slideMainRect === void 0 ? void 0 : slideMainRect.top) || 0
+		};
+		const scrollX = (mainViewport === null || mainViewport === void 0 ? void 0 : mainViewport.viewportScrollX) || 0;
+		const scrollY = (mainViewport === null || mainViewport === void 0 ? void 0 : mainViewport.viewportScrollY) || 0;
+		canvasOffset.left = slidePos.x - scrollX;
+		canvasOffset.top = slidePos.y - scrollY;
+		return {
+			position: {
+				startX: left,
+				startY: top,
+				endX: left + editorWidth,
+				endY: top + editorHeight
+			},
+			scaleX: 1,
+			scaleY: 1,
+			slideCardOffset: canvasOffset,
+			unitId,
+			editorUnitId,
+			documentLayoutObject
+		};
+	}
+	changeEditorDirty(dirtyStatus) {
+		this._editorIsDirty = dirtyStatus;
+	}
+	isVisible() {
+		return this._visibleParam.visible;
+	}
+	getEditorDirty() {
+		return this._editorIsDirty;
+	}
+	getCurrentEditorId() {
+		return this._editorUnitId;
+	}
+	/**
+	* @deprecated
+	*/
+	genDocData(target) {
+		const editorUnitId = this.getCurrentEditorId();
+		const content = target.text;
+		const fontSize = target.fs;
+		return {
+			id: editorUnitId,
+			body: {
+				dataStream: `${content}\r\n`,
+				textRuns: [{
+					st: 0,
+					ed: content.length
+				}],
+				paragraphs: [{
+					paragraphStyle: {},
+					startIndex: content.length + 1
+				}],
+				sectionBreaks: [{ startIndex: content.length + 2 }]
+			},
+			documentStyle: {
+				marginBottom: 0,
+				marginLeft: 0,
+				marginRight: 0,
+				marginTop: 0,
+				pageSize: {
+					width: Infinity,
+					height: Infinity
+				},
+				textStyle: { fs: fontSize },
+				renderConfig: {
+					verticalAlign: VerticalAlign.MIDDLE,
+					centerAngle: 0,
+					vertexAngle: 0,
+					wrapStrategy: 0
+				}
+			},
+			drawings: {},
+			drawingsOrder: [],
+			settings: { zoomRatio: 1 }
+		};
+	}
+};
+SlideEditorBridgeService = __decorate([
+	__decorateParam(0, IEditorService),
+	__decorateParam(1, IContextService),
+	__decorateParam(2, IRenderManagerService)
+], SlideEditorBridgeService);
+
+//#endregion
+//#region src/type.ts
+let CursorChange = /* @__PURE__ */ function(CursorChange) {
+	CursorChange[CursorChange["InitialState"] = 0] = "InitialState";
+	CursorChange[CursorChange["StartEditor"] = 1] = "StartEditor";
+	CursorChange[CursorChange["CursorChange"] = 2] = "CursorChange";
+	return CursorChange;
+}({});
+
+//#endregion
+//#region src/controllers/slide-editing.render-controller.ts
+const HIDDEN_EDITOR_POSITION = -1e3;
+const EDITOR_INPUT_SELF_EXTEND_GAP = 5;
+const EDITOR_BORDER_SIZE = 2;
+let SlideEditingRenderController = class SlideEditingRenderController extends Disposable {
+	constructor(_renderContext, _layoutService, _undoRedoService, _contextService, _instanceSrv, _renderManagerService, _editorBridgeService, _cellEditorManagerService, _textSelectionManagerService, _commandService, _localService, _editorService) {
+		super();
+		this._renderContext = _renderContext;
+		this._layoutService = _layoutService;
+		this._undoRedoService = _undoRedoService;
+		this._contextService = _contextService;
+		this._instanceSrv = _instanceSrv;
+		this._renderManagerService = _renderManagerService;
+		this._editorBridgeService = _editorBridgeService;
+		this._cellEditorManagerService = _cellEditorManagerService;
+		this._textSelectionManagerService = _textSelectionManagerService;
+		this._commandService = _commandService;
+		this._localService = _localService;
+		this._editorService = _editorService;
+		_defineProperty(this, "_cursorChange", CursorChange.InitialState);
+		_defineProperty(this, "_isUnitEditing", false);
+		_defineProperty(this, "_d", void 0);
+		this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+			if (slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId) this._d = this._init();
+			else {
+				this._disposeCurrent();
+				if (this._isUnitEditing) {
+					this._handleEditorInvisible({
+						visible: false,
+						eventType: DeviceInputEventType.Keyboard,
+						keycode: KeyCode.ESC,
+						unitId: this._renderContext.unitId
+					});
+					this._isUnitEditing = false;
+				}
+			}
+		}));
+		this._initEditorVisibilityListener();
+	}
+	dispose() {
+		super.dispose();
+		this._disposeCurrent();
+	}
+	_disposeCurrent() {
+		var _this$_d;
+		(_this$_d = this._d) === null || _this$_d === void 0 || _this$_d.dispose();
+		this._d = null;
+	}
+	_init() {
+		const d = new DisposableCollection();
+		this._subscribeToCurrentCell(d);
+		this._initialKeyboardListener(d);
+		this._initialCursorSync(d);
+		this._listenEditorFocus(d);
+		this._commandExecutedListener(d);
+		setTimeout(() => {
+			this._cursorStateListener(d);
+		}, 1e3);
+		return d;
+	}
+	_initEditorVisibilityListener() {
+		this.disposeWithMe(this._editorBridgeService.visible$.subscribe((param) => {
+			if (param.visible) {
+				this._isUnitEditing = true;
+				this._handleEditorVisible(param);
+			} else if (this._isUnitEditing) {
+				this._handleEditorInvisible(param);
+				this._isUnitEditing = false;
+			}
+		}));
+	}
+	_listenEditorFocus(d) {
+		const renderConfig = this._getEditorObject();
+		if (!renderConfig) return;
+		d.add(renderConfig.document.onPointerDown$.subscribeEvent(() => {}));
+	}
+	_getEditorSkeleton(editorId) {
+		var _this$_renderManagerS;
+		return (_this$_renderManagerS = this._renderManagerService.getRenderById(editorId)) === null || _this$_renderManagerS === void 0 ? void 0 : _this$_renderManagerS.with(DocSkeletonManagerService).getSkeleton();
+	}
+	_getEditorViewModel(editorId) {
+		var _this$_renderManagerS2;
+		return (_this$_renderManagerS2 = this._renderManagerService.getRenderById(editorId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(DocSkeletonManagerService).getViewModel();
+	}
+	_initialCursorSync(d) {
+		d.add(this._cellEditorManagerService.focus$.pipe(filter((f) => !!f)).subscribe(() => {
+			var _getCurrentTypeOfRend;
+			(_getCurrentTypeOfRend = getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) === null || _getCurrentTypeOfRend === void 0 || _getCurrentTypeOfRend.with(DocSelectionRenderService).sync();
+		}));
+	}
+	/**
+	* Set editorUnitId to curr doc.
+	* @param d DisposableCollection
+	*/
+	_subscribeToCurrentCell(d) {
+		d.add(this._editorBridgeService.currentEditRectState$.subscribe((editCellState) => {
+			var _getCurrentTypeOfRend2;
+			if (editCellState == null) return;
+			if (this._contextService.getContextValue(FOCUSING_EDITOR_STANDALONE) || this._contextService.getContextValue(FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE)) return;
+			const { position: { startX, endX }, documentLayoutObject: { textRotation, wrapStrategy, documentModel }, scaleX, editorUnitId } = editCellState;
+			const { vertexAngle: angle } = convertTextRotation(textRotation);
+			documentModel.updateDocumentId(editorUnitId);
+			if (wrapStrategy === WrapStrategy.WRAP && angle === 0) documentModel.updateDocumentDataPageSize((endX - startX) / scaleX);
+			this._instanceSrv.changeDoc(editorUnitId, documentModel);
+			this._contextService.setContextValue(FOCUSING_EDITOR_BUT_HIDDEN, true);
+			this._textSelectionManagerService.replaceTextRanges([{
+				startOffset: 0,
+				endOffset: 0
+			}]);
+			(_getCurrentTypeOfRend2 = getCurrentTypeOfRenderer(UniverInstanceType.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) === null || _getCurrentTypeOfRend2 === void 0 || _getCurrentTypeOfRend2.with(DocSelectionRenderService).activate(HIDDEN_EDITOR_POSITION, HIDDEN_EDITOR_POSITION);
+		}));
+	}
+	/**
+	* Set size and pos of editing area.
+	* @param positionFromEditRectState
+	* @param canvasOffset
+	* @param documentSkeleton
+	* @param documentLayoutObject
+	* @param scaleX
+	* @param scaleY
+	*/
+	_fitTextSize(positionFromEditRectState, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+		const { startX, startY, endX, endY } = positionFromEditRectState;
+		const documentDataModel = documentLayoutObject.documentModel;
+		if (documentDataModel == null) return;
+		const { actualWidth, actualHeight } = this._predictingSize(positionFromEditRectState, canvasOffset, documentSkeleton, documentLayoutObject, scaleX, scaleY);
+		const { verticalAlign, paddingData, fill } = documentLayoutObject;
+		let editorWidth = endX - startX;
+		let editorHeight = endY - startY;
+		if (editorWidth < actualWidth) editorWidth = actualWidth;
+		if (editorHeight < actualHeight) {
+			editorHeight = actualHeight;
+			documentDataModel.updateDocumentDataMargin(paddingData);
+		} else {
+			let offsetTop = 0;
+			if (verticalAlign === VerticalAlign.MIDDLE) offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
+			else if (verticalAlign === VerticalAlign.TOP) offsetTop = paddingData.t || 0;
+			else offsetTop = (editorHeight - actualHeight) / scaleY - (paddingData.b || 0);
+			offsetTop = offsetTop < (paddingData.t || 0) ? paddingData.t || 0 : offsetTop;
+			documentDataModel.updateDocumentDataMargin({ t: offsetTop });
+		}
+		documentSkeleton.calculate();
+		this._editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX, scaleY);
+	}
+	/**
+	* Mainly used to pre-calculate the width of the editor,
+	* to determine whether it needs to be automatically widened.
+	*/
+	_predictingSize(actualRangeWithCoord, canvasOffset, documentSkeleton, documentLayoutObject, scaleX = 1, scaleY = 1) {
+		const { startX, endX } = actualRangeWithCoord;
+		const { textRotation, wrapStrategy } = documentLayoutObject;
+		const documentDataModel = documentLayoutObject.documentModel;
+		const { vertexAngle: angle } = convertTextRotation(textRotation);
+		const clientWidth = document.body.clientWidth;
+		if (wrapStrategy === WrapStrategy.WRAP && angle === 0) {
+			const { actualWidth, actualHeight } = documentSkeleton.getActualSize();
+			return {
+				actualWidth: actualWidth * scaleX,
+				actualHeight: actualHeight * scaleY
+			};
+		}
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize((clientWidth - startX - canvasOffset.left) / scaleX);
+		documentSkeleton.calculate();
+		const size = documentSkeleton.getActualSize();
+		let editorWidth = endX - startX;
+		if (editorWidth < size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX) editorWidth = size.actualWidth * scaleX + EDITOR_INPUT_SELF_EXTEND_GAP * scaleX;
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentDataPageSize(editorWidth / scaleX);
+		/**
+		* Do not rely on cell layout logic, depend on the document's internal alignment logic.
+		*/
+		documentDataModel === null || documentDataModel === void 0 || documentDataModel.updateDocumentRenderConfig({
+			horizontalAlign: HorizontalAlign.UNSPECIFIED,
+			cellValueType: void 0
+		});
+		return {
+			actualWidth: editorWidth,
+			actualHeight: size.actualHeight * scaleY
+		};
+	}
+	/**
+	* control the size of editing area
+	*/
+	_editAreaProcessing(editorWidth, editorHeight, positionFromEditRectState, canvasOffset, fill, scaleX = 1, scaleY = 1) {
+		const editorObject = this._getEditorObject();
+		if (editorObject == null) return;
+		function pxToNum(width) {
+			return Number.parseInt(width.replace("px", ""));
+		}
+		const canvasElement = this._renderContext.engine.getCanvasElement();
+		const canvasClientRect = canvasElement.getBoundingClientRect();
+		const widthOfCanvas = pxToNum(canvasElement.style.width);
+		const { top, left, width } = canvasClientRect;
+		const scaleAdjust = width / widthOfCanvas;
+		let { startX, startY } = positionFromEditRectState;
+		startX += canvasOffset.left;
+		startY += canvasOffset.top;
+		const { document: documentComponent, scene: editorScene, engine: docEngine } = editorObject;
+		const viewportMain = editorScene.getViewport(VIEWPORT_KEY.VIEW_MAIN);
+		const clientHeight = document.body.clientHeight - startY - canvasOffset.top - EDITOR_BORDER_SIZE * 2;
+		const clientWidth = document.body.clientWidth - startX - canvasOffset.left;
+		let physicHeight = editorHeight;
+		let scrollBar = viewportMain === null || viewportMain === void 0 ? void 0 : viewportMain.getScrollBar();
+		if (physicHeight > clientHeight) {
+			physicHeight = clientHeight;
+			if (scrollBar == null) {
+				if (viewportMain) new ScrollBar(viewportMain, {
+					enableHorizontal: false,
+					barSize: 8
+				});
+			} else viewportMain === null || viewportMain === void 0 || viewportMain.resetCanvasSizeAndUpdateScroll();
+		} else {
+			var _viewportMain$getScro;
+			scrollBar = null;
+			viewportMain === null || viewportMain === void 0 || (_viewportMain$getScro = viewportMain.getScrollBar()) === null || _viewportMain$getScro === void 0 || _viewportMain$getScro.dispose();
+		}
+		editorWidth += (scrollBar === null || scrollBar === void 0 ? void 0 : scrollBar.barSize) || 0;
+		editorWidth = Math.min(editorWidth, clientWidth);
+		startX -= FIX_ONE_PIXEL_BLUR_OFFSET;
+		startY -= FIX_ONE_PIXEL_BLUR_OFFSET;
+		this._addBackground(editorScene, editorWidth / scaleX, editorHeight / scaleY, fill);
+		const { scaleX: precisionScaleX, scaleY: precisionScaleY } = editorScene.getPrecisionScale();
+		editorScene.transformByState({
+			width: editorWidth * scaleAdjust / scaleX,
+			height: editorHeight * scaleAdjust / scaleY,
+			scaleX: scaleX * scaleAdjust,
+			scaleY: scaleY * scaleAdjust
+		});
+		documentComponent.resize(editorWidth / scaleX, editorHeight / scaleY);
+		/**
+		* sometimes requestIdleCallback is invalid, so use setTimeout to ensure the successful execution of the resizeBySize method.
+		* resize canvas
+		* When modifying the selection area for a formula, it is necessary to add a setTimeout to ensure successful updating.
+		*/
+		setTimeout(() => {
+			docEngine.resizeBySize(fixLineWidthByScale(editorWidth, precisionScaleX), fixLineWidthByScale(physicHeight, precisionScaleY));
+		}, 0);
+		const contentBoundingRect = this._layoutService.getContentElement().getBoundingClientRect();
+		const canvasBoundingRect = canvasElement.getBoundingClientRect();
+		startX = startX * scaleAdjust + (canvasBoundingRect.left - contentBoundingRect.left);
+		startY = startY * scaleAdjust + (canvasBoundingRect.top - contentBoundingRect.top);
+		this._cellEditorManagerService.setState({
+			startX,
+			startY,
+			endX: editorWidth * scaleAdjust + startX,
+			endY: physicHeight * scaleAdjust + startY,
+			show: true
+		});
+	}
+	/**
+	* Since the document does not support cell background color, an additional rect needs to be added.
+	*/
+	_addBackground(scene, editorWidth, editorHeight, fill) {
+		const fillRectKey = "_backgroundRectHelperColor_";
+		const rect = scene.getObject(fillRectKey);
+		if (rect == null && fill == null) return;
+		if (rect == null) scene.addObjects([new Rect(fillRectKey, {
+			width: editorWidth,
+			height: editorHeight,
+			fill,
+			evented: false
+		})], DOCS_COMPONENT_MAIN_LAYER_INDEX);
+		else if (fill == null) rect.dispose();
+		else {
+			rect.setProps({ fill });
+			rect.transformByState({
+				width: editorWidth,
+				height: editorHeight
+			});
+		}
+	}
+	/**
+	* Show input area, resize input area and then place input to right place.
+	* @TODO why do resize in show input area?
+	* @param param
+	*/
+	_handleEditorVisible(param) {
+		var _scene$getViewport, _this$_renderManagerS3;
+		const { eventType } = param;
+		this._cursorChange = [DeviceInputEventType.PointerDown, DeviceInputEventType.Dblclick].includes(eventType) ? CursorChange.CursorChange : CursorChange.StartEditor;
+		const editCellState = this._editorBridgeService.getEditRectState();
+		if (editCellState == null) return;
+		const { position, documentLayoutObject, slideCardOffset: canvasOffset, scaleX, scaleY, editorUnitId, unitId } = editCellState;
+		const editorObject = this._getEditorObject();
+		if (editorObject == null) return;
+		const { scene } = editorObject;
+		this._contextService.setContextValue(EDITOR_ACTIVATED, true);
+		const { documentModel: documentDataModel } = documentLayoutObject;
+		const skeleton = this._getEditorSkeleton(editorUnitId);
+		if (!skeleton || !documentDataModel) return;
+		this._fitTextSize(position, canvasOffset, skeleton, documentLayoutObject, scaleX, scaleY);
+		const cursor = documentDataModel.getBody().dataStream.length - 2 || 0;
+		(_scene$getViewport = scene.getViewport(VIEWPORT_KEY.VIEW_MAIN)) === null || _scene$getViewport === void 0 || _scene$getViewport.scrollToViewportPos({ viewportScrollX: Number.POSITIVE_INFINITY });
+		this._textSelectionManagerService.replaceTextRanges([{
+			startOffset: cursor,
+			endOffset: cursor
+		}]);
+		(_this$_renderManagerS3 = this._renderManagerService.getRenderById(unitId)) === null || _this$_renderManagerS3 === void 0 || _this$_renderManagerS3.scene.resetCursor();
+	}
+	_resetBodyStyle(body, removeStyle = false) {
+		body.dataStream = DEFAULT_EMPTY_DOCUMENT_VALUE;
+		if (body.textRuns != null) if (body.textRuns.length === 1 && !removeStyle) {
+			body.textRuns[0].st = 0;
+			body.textRuns[0].ed = 1;
+		} else body.textRuns = void 0;
+		if (body.paragraphs != null) if (body.paragraphs.length === 1) body.paragraphs[0].startIndex = 0;
+		else body.paragraphs = [{ startIndex: 0 }];
+		if (body.sectionBreaks != null) body.sectionBreaks = void 0;
+		if (body.tables != null) body.tables = void 0;
+		if (body.customRanges != null) body.customRanges = void 0;
+		if (body.customBlocks != null) body.customBlocks = void 0;
+	}
+	/**
+	* Should activate the editor when the user inputs text.
+	* @param d DisposableCollection
+	*/
+	_initialKeyboardListener(d) {}
+	_showEditorByKeyboard(config) {
+		if (config == null) {}
+	}
+	_commandExecutedListener(d) {
+		const moveCursorOP = [SetTextEditArrowOperation.id];
+		const editedMutations = [RichTextEditingMutation.id];
+		d.add(this._commandService.onCommandExecuted((command) => {
+			if (this._editorService.getFocusId() !== SLIDE_EDITOR_ID) return;
+			if (moveCursorOP.includes(command.id)) this._moveCursorCmdHandler(command);
+			if (editedMutations.includes(command.id)) {
+				if (this._editorBridgeService.isVisible()) this._editingChangedHandler();
+			}
+		}));
+	}
+	_moveCursorCmdHandler(command) {
+		const params = command.params;
+		const { keycode, isShift } = params;
+		/**
+		* After the user enters the editor and actively moves the editor selection area with the mouse,
+		* the up, down, left, and right keys can no longer switch editing cells,
+		* but move the cursor within the editor instead.
+		*/
+		if (keycode != null && this._cursorChange === CursorChange.CursorChange) this._moveInEditor(keycode, isShift);
+		else this._editorBridgeService.changeVisible(params);
+	}
+	_editingChangedHandler() {
+		const editRect = this._editorBridgeService.getEditorRect();
+		if (!editRect) return;
+		const editingRichText = editRect.richTextObj;
+		editingRichText.refreshDocumentByDocData();
+		editingRichText.resizeToContentSize();
+		const { unitId } = this._renderContext;
+		this._handleEditorVisible({
+			visible: true,
+			eventType: 3,
+			unitId
+		});
+	}
+	_getEditorObject() {
+		return getEditorObject(this._editorBridgeService.getCurrentEditorId(), this._renderManagerService);
+	}
+	async _handleEditorInvisible(param) {
+		const { keycode } = param;
+		this._cursorChange = CursorChange.InitialState;
+		this._exitInput(param);
+		if (this._editorBridgeService.getEditRectState() == null) return;
+		if (this._editorBridgeService.getEditorDirty() === false) {
+			this._moveCursor(keycode);
+			return;
+		}
+		this._moveCursor(keycode);
+	}
+	_exitInput(param) {
+		this._contextService.setContextValue(EDITOR_ACTIVATED, false);
+		this._cellEditorManagerService.setState({ show: param.visible });
+		const editorUnitId = this._editorBridgeService.getCurrentEditorId();
+		if (editorUnitId == null) return;
+		this._undoRedoService.clearUndoRedo(editorUnitId);
+	}
+	_moveCursor(keycode) {
+		if (keycode == null) return;
+		Direction.LEFT;
+		switch (keycode) {
+			case KeyCode.ENTER:
+				Direction.DOWN;
+				break;
+			case KeyCode.TAB:
+				Direction.RIGHT;
+				break;
+			case KeyCode.ARROW_DOWN:
+				Direction.DOWN;
+				break;
+			case KeyCode.ARROW_UP:
+				Direction.UP;
+				break;
+			case KeyCode.ARROW_LEFT:
+				Direction.LEFT;
+				break;
+			case KeyCode.ARROW_RIGHT:
+				Direction.RIGHT;
+				break;
+		}
+	}
+	/**
+	* The user's operations follow the sequence of opening the editor and then moving the cursor.
+	* The logic here predicts the user's first cursor movement behavior based on this rule
+	*/
+	_cursorStateListener(d) {
+		const editorObject = this._getEditorObject();
+		if (!editorObject) return;
+		const { document: documentComponent } = editorObject;
+		d.add(toDisposable(documentComponent.onPointerDown$.subscribeEvent(() => {
+			if (this._cursorChange === CursorChange.StartEditor) this._cursorChange = CursorChange.CursorChange;
+		})));
+	}
+	_moveInEditor(keycode, isShift) {
+		let direction = Direction.LEFT;
+		if (keycode === KeyCode.ARROW_DOWN) direction = Direction.DOWN;
+		else if (keycode === KeyCode.ARROW_UP) direction = Direction.UP;
+		else if (keycode === KeyCode.ARROW_RIGHT) direction = Direction.RIGHT;
+		if (isShift) this._commandService.executeCommand(MoveSelectionOperation.id, { direction });
+		else this._commandService.executeCommand(MoveCursorOperation.id, { direction });
+	}
+};
+SlideEditingRenderController = __decorate([
+	__decorateParam(1, ILayoutService),
+	__decorateParam(2, IUndoRedoService),
+	__decorateParam(3, IContextService),
+	__decorateParam(4, IUniverInstanceService),
+	__decorateParam(5, IRenderManagerService),
+	__decorateParam(6, ISlideEditorBridgeService),
+	__decorateParam(7, ISlideEditorManagerService),
+	__decorateParam(8, Inject(DocSelectionManagerService)),
+	__decorateParam(9, ICommandService),
+	__decorateParam(10, Inject(LocaleService)),
+	__decorateParam(11, IEditorService)
+], SlideEditingRenderController);
+function getEditorObject(unitId, renderManagerService) {
+	if (unitId == null) return;
+	const currentRender = renderManagerService.getRenderById(unitId);
+	if (currentRender == null) return;
+	const { mainComponent, scene, engine, components } = currentRender;
+	return {
+		document: mainComponent,
+		docBackground: components.get(DOCS_VIEW_KEY.BACKGROUND),
+		scene,
+		engine
+	};
+}
+
+//#endregion
+//#region src/controllers/slide-editor-bridge.render-controller.ts
+let SlideEditorBridgeRenderController = class SlideEditorBridgeRenderController extends RxDisposable {
+	constructor(_renderContext, _instanceSrv, _commandService, _editorBridgeService) {
+		super();
+		this._renderContext = _renderContext;
+		this._instanceSrv = _instanceSrv;
+		this._commandService = _commandService;
+		this._editorBridgeService = _editorBridgeService;
+		_defineProperty(
+			this,
+			/**
+			* It is used to distinguish whether the user has actively moved the cursor in the editor, mainly through mouse clicks.
+			*/
+			/** If the corresponding unit is active and prepared for editing. */
+			"setSlideTextEditor$",
+			new Subject()
+		);
+		_defineProperty(this, "_curRichText", null);
+		_defineProperty(this, "_d", void 0);
+		this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+			if (slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId) this._d = this._init();
+			else this._disposeCurrent();
+		}));
+	}
+	_init() {
+		const d = new DisposableCollection();
+		this._initEventListener(d);
+		return d;
+	}
+	_disposeCurrent() {
+		var _this$_d;
+		(_this$_d = this._d) === null || _this$_d === void 0 || _this$_d.dispose();
+		this._d = null;
+	}
+	_setEditorRect(pageId, targetObject) {
+		this._curRichText = targetObject;
+		const { scene, engine } = this._renderContext;
+		const setEditorRect = {
+			scene,
+			engine,
+			unitId: this._renderContext.unitId,
+			pageId,
+			richTextObj: targetObject
+		};
+		this._editorBridgeService.setEditorRect(setEditorRect);
+	}
+	_initEventListener(d) {
+		const listenersForPageScene = (scene) => {
+			const transformer = scene.getTransformer();
+			if (!transformer) return;
+			d.add(transformer.clearControl$.subscribe(() => {
+				this.setEditorVisible(false);
+				this.pickOtherObjects();
+			}));
+			d.add(transformer.createControl$.subscribe(() => {
+				this.setEditorVisible(false);
+			}));
+			d.add(scene.onDblclick$.subscribeEvent(() => {
+				transformer.clearControls();
+				const object = transformer.getSelectedObjectMap().values().next().value;
+				if (!object) return;
+				if (object.objectType !== ObjectType.RICH_TEXT) this.pickOtherObjects();
+				else this.startEditing(scene.sceneKey, object);
+			}));
+			d.add(this._instanceSrv.focused$.subscribe((fc) => {
+				this.endEditing();
+			}));
+		};
+		const { mainComponent } = this._renderContext;
+		mainComponent.subSceneChanged$.subscribeEvent((pageScene) => {
+			listenersForPageScene(pageScene);
+		});
+		const pageSceneList = Array.from(mainComponent.getSubScenes().values());
+		for (let i = 0; i < pageSceneList.length; i++) {
+			const pageScene = pageSceneList[i];
+			listenersForPageScene(pageScene);
+		}
+	}
+	pickOtherObjects() {
+		this.endEditing();
+	}
+	/**
+	* invoked when picking other object.
+	*
+	* save editing state to curr richText.
+	*/
+	endEditing() {
+		var _curRichText$document;
+		if (!this._curRichText) return;
+		this.setEditorVisible(false);
+		const curRichText = this._curRichText;
+		if (!this._instanceSrv.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE)) return false;
+		curRichText.refreshDocumentByDocData();
+		curRichText.resizeToContentSize();
+		this._editorBridgeService.endEditing$.next(curRichText);
+		const richText = {
+			bl: 1,
+			fs: curRichText.fs,
+			text: curRichText.text
+		};
+		const textRuns = (_curRichText$document = curRichText.documentData.body) === null || _curRichText$document === void 0 ? void 0 : _curRichText$document.textRuns;
+		if (textRuns && textRuns.length) {
+			const ts = textRuns[0].ts;
+			richText.cl = ts === null || ts === void 0 ? void 0 : ts.cl;
+		}
+		this._commandService.executeCommand(UpdateSlideElementOperation.id, {
+			unitId: this._renderContext.unitId,
+			oKey: curRichText === null || curRichText === void 0 ? void 0 : curRichText.oKey,
+			props: { richText }
+		});
+		this._curRichText = null;
+	}
+	/**
+	* TODO calling twice ？？？？
+	* editingParam derives from RichText object.
+	*
+	* TODO @lumixraku need scale param
+	* @param target
+	*/
+	startEditing(pageId, target) {
+		this._setEditorRect(pageId, target);
+		this.setEditorVisible(true);
+	}
+	setEditorVisible(visible) {
+		if (visible) {
+			var _this$_curRichText;
+			(_this$_curRichText = this._curRichText) === null || _this$_curRichText === void 0 || _this$_curRichText.hide();
+		} else {
+			var _this$_curRichText2;
+			(_this$_curRichText2 = this._curRichText) === null || _this$_curRichText2 === void 0 || _this$_curRichText2.show();
+		}
+		const { unitId } = this._renderContext;
+		this._editorBridgeService.changeVisible({
+			visible,
+			eventType: DeviceInputEventType.PointerDown,
+			unitId
+		});
+	}
+};
+SlideEditorBridgeRenderController = __decorate([
+	__decorateParam(1, IUniverInstanceService),
+	__decorateParam(2, ICommandService),
+	__decorateParam(3, ISlideEditorBridgeService)
+], SlideEditorBridgeRenderController);
+
+//#endregion
+//#region src/services/slide-popup-manager.service.ts
+function transformBound2OffsetBound(originBound, scene) {
+	const topLeft = transformPosition2Offset(originBound.left, originBound.top, scene);
+	const bottomRight = transformPosition2Offset(originBound.right, originBound.bottom, scene);
+	return {
+		left: topLeft.x,
+		top: topLeft.y,
+		right: bottomRight.x,
+		bottom: bottomRight.y
+	};
+}
+function transformPosition2Offset(x, y, scene) {
+	const { scaleX, scaleY } = scene.getAncestorScale();
+	const viewMain = scene.getViewport(SLIDE_KEY.VIEW);
+	if (!viewMain) return {
+		x,
+		y
+	};
+	const { viewportScrollX: actualScrollX, viewportScrollY: actualScrollY } = viewMain;
+	return {
+		x: (x - actualScrollX) * scaleX,
+		y: (y - actualScrollY) * scaleY
+	};
+}
+let SlideCanvasPopMangerService = class SlideCanvasPopMangerService extends Disposable {
+	constructor(_globalPopupManagerService, _renderManagerService, _univerInstanceService, _commandService) {
+		super();
+		this._globalPopupManagerService = _globalPopupManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+	}
+	_createObjectPositionObserver(targetObject, currentRender) {
+		const calc = () => {
+			var _currentRender$mainCo, _currentRender$mainCo2, _currentRender$mainCo3, _currentRender$mainCo4;
+			const { scene, engine } = currentRender;
+			const { left, top, width, height } = targetObject;
+			const horizontalOffset = (scene.width - ((_currentRender$mainCo = (_currentRender$mainCo2 = currentRender.mainComponent) === null || _currentRender$mainCo2 === void 0 ? void 0 : _currentRender$mainCo2.width) !== null && _currentRender$mainCo !== void 0 ? _currentRender$mainCo : 0)) / 2;
+			const verticalOffset = (scene.height - ((_currentRender$mainCo3 = (_currentRender$mainCo4 = currentRender.mainComponent) === null || _currentRender$mainCo4 === void 0 ? void 0 : _currentRender$mainCo4.height) !== null && _currentRender$mainCo3 !== void 0 ? _currentRender$mainCo3 : 0)) / 2;
+			const bound = {
+				left,
+				right: left + width,
+				top,
+				bottom: top + height
+			};
+			const canvasElement = engine.getCanvasElement();
+			const canvasClientRect = canvasElement.getBoundingClientRect();
+			const widthOfCanvas = pxToNum(canvasElement.style.width);
+			const { scaleX, scaleY } = scene.getAncestorScale();
+			const offsetBound = transformBound2OffsetBound(bound, scene);
+			const { top: topOffset, left: leftOffset, width: domWidth } = canvasClientRect;
+			const scaleAdjust = domWidth / widthOfCanvas;
+			return {
+				left: offsetBound.left * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+				right: offsetBound.right * scaleAdjust * scaleX + leftOffset + horizontalOffset,
+				top: offsetBound.top * scaleAdjust * scaleY + topOffset + verticalOffset,
+				bottom: offsetBound.bottom * scaleAdjust * scaleY + topOffset + verticalOffset
+			};
+		};
+		const position = calc();
+		return {
+			position,
+			position$: new BehaviorSubject(position),
+			disposable: new DisposableCollection()
+		};
+	}
+	attachPopupToObject(targetObject, popup) {
+		const unitId = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE).getUnitId();
+		const currentRender = this._renderManagerService.getRenderById(unitId);
+		if (!currentRender) return { dispose: () => {} };
+		const { position, position$, disposable } = this._createObjectPositionObserver(targetObject, currentRender);
+		const id = this._globalPopupManagerService.addPopup({
+			...popup,
+			unitId,
+			subUnitId: "default",
+			anchorRect: position,
+			anchorRect$: position$,
+			canvasElement: currentRender.engine.getCanvasElement()
+		});
+		return { dispose: () => {
+			this._globalPopupManagerService.removePopup(id);
+			position$.complete();
+			disposable.dispose();
+		} };
+	}
+};
+SlideCanvasPopMangerService = __decorate([
+	__decorateParam(0, Inject(ICanvasPopupService)),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, ICommandService)
+], SlideCanvasPopMangerService);
+
+//#endregion
+//#region src/menu/popup-menu.controller.ts
+let SlidePopupMenuController = class SlidePopupMenuController extends RxDisposable {
+	constructor(_canvasPopManagerService, _renderManagerService, _univerInstanceService, _contextService, _canvasView, _sidebarService, _commandService) {
+		super();
+		this._canvasPopManagerService = _canvasPopManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._contextService = _contextService;
+		this._canvasView = _canvasView;
+		this._sidebarService = _sidebarService;
+		this._commandService = _commandService;
+		_defineProperty(this, "_initImagePopupMenu", /* @__PURE__ */ new Set());
+		this._init();
+	}
+	_init() {
+		this._univerInstanceService.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slide) => this._create(slide));
+	}
+	_create(slide) {
+		if (!slide) return;
+		const unitId = slide.getUnitId();
+		if (this._renderManagerService.has(unitId) && !this._initImagePopupMenu.has(unitId)) {
+			this._popupMenuListener(unitId);
+			this._initImagePopupMenu.add(unitId);
+		}
+	}
+	_hasCropObject(scene) {}
+	_popupMenuListener(unitId) {
+		var _model$getPages;
+		const model = this._univerInstanceService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+		const pages = (_model$getPages = model === null || model === void 0 ? void 0 : model.getPages()) !== null && _model$getPages !== void 0 ? _model$getPages : {};
+		Object.keys(pages).forEach((pageId) => {
+			var _page$scene;
+			const transformer = (_page$scene = this._canvasView.getRenderUnitByPageId(pageId, unitId).scene) === null || _page$scene === void 0 ? void 0 : _page$scene.getTransformer();
+			if (!transformer) return;
+			let singletonPopupDisposer;
+			this.disposeWithMe(toDisposable(transformer.createControl$.subscribe(() => {
+				const selectedObjects = transformer.getSelectedObjectMap();
+				if (selectedObjects.size > 1) {
+					singletonPopupDisposer === null || singletonPopupDisposer === void 0 || singletonPopupDisposer.dispose();
+					return;
+				}
+				const object = selectedObjects.values().next().value;
+				if (!object) return;
+				const oKey = object.oKey;
+				singletonPopupDisposer === null || singletonPopupDisposer === void 0 || singletonPopupDisposer.dispose();
+				singletonPopupDisposer = this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(object, {
+					componentKey: COMPONENT_SLIDE_IMAGE_POPUP_MENU,
+					direction: "horizontal",
+					offset: [2, 0],
+					extraProps: { menuItems: this._getMenuItemsByObjectType(object.objectType, oKey, unitId) }
+				}));
+				if (this._sidebarService.visible) this._commandService.executeCommand(ToggleSlideEditSidebarOperation.id, {
+					visible: true,
+					objectType: object.objectType
+				});
+			})));
+			this.disposeWithMe(transformer.clearControl$.subscribe(() => {
+				singletonPopupDisposer === null || singletonPopupDisposer === void 0 || singletonPopupDisposer.dispose();
+				this._contextService.setContextValue(FOCUSING_COMMON_DRAWINGS, false);
+			}));
+			this.disposeWithMe(transformer.changing$.subscribe(() => {
+				singletonPopupDisposer === null || singletonPopupDisposer === void 0 || singletonPopupDisposer.dispose();
+				const selectedObjects = transformer.getSelectedObjectMap();
+				if (selectedObjects.size > 1) {
+					singletonPopupDisposer === null || singletonPopupDisposer === void 0 || singletonPopupDisposer.dispose();
+					return;
+				}
+				const object = selectedObjects.values().next().value;
+				if (!object) return;
+				this._commandService.executeCommand(UpdateSlideElementOperation.id, {
+					unitId,
+					oKey: object.oKey,
+					props: {
+						width: object.width,
+						height: object.height,
+						left: object.left,
+						top: object.top
+					}
+				});
+			}));
+		});
+	}
+	_getMenuItemsByObjectType(objectType, oKey, unitId) {
+		return [{
+			label: "slide.popup.edit",
+			index: 0,
+			commandId: ToggleSlideEditSidebarOperation.id,
+			commandParams: {
+				visible: true,
+				objectType
+			},
+			disable: false
+		}, {
+			label: "slide.popup.delete",
+			index: 5,
+			commandId: DeleteSlideElementOperation.id,
+			commandParams: {
+				id: oKey,
+				unitId
+			},
+			disable: false
+		}];
+	}
+};
+SlidePopupMenuController = __decorate([
+	__decorateParam(0, Inject(SlideCanvasPopMangerService)),
+	__decorateParam(1, IRenderManagerService),
+	__decorateParam(2, IUniverInstanceService),
+	__decorateParam(3, IContextService),
+	__decorateParam(4, Inject(CanvasView)),
+	__decorateParam(5, ISidebarService),
+	__decorateParam(6, ICommandService)
+], SlidePopupMenuController);
+
+//#endregion
+//#region src/services/slide-render.service.ts
+let SlideRenderService = class SlideRenderService extends RxDisposable {
+	constructor(_contextService, _instanceSrv, _renderManagerService) {
+		super();
+		this._contextService = _contextService;
+		this._instanceSrv = _instanceSrv;
+		this._renderManagerService = _renderManagerService;
+		Promise.resolve().then(() => this._init());
+	}
+	_init() {
+		this._initSlideDataListener();
+		this._initContextListener();
+	}
+	_initSlideDataListener() {
+		this._instanceSrv.getTypeOfUnitAdded$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((slideModel) => {
+			this._createRenderer(slideModel === null || slideModel === void 0 ? void 0 : slideModel.getUnitId());
+		});
+		this._instanceSrv.getAllUnitsForType(UniverInstanceType.UNIVER_SLIDE).forEach((slideModel) => {
+			this._createRenderer(slideModel.getUnitId());
+		});
+		this._instanceSrv.getTypeOfUnitDisposed$(UniverInstanceType.UNIVER_SLIDE).pipe(takeUntil(this.dispose$)).subscribe((workbook) => this._disposeRenderer(workbook));
+	}
+	_createRenderer(unitId) {
+		if (unitId == null) return;
+		if (this._instanceSrv.getUnit(unitId, UniverInstanceType.UNIVER_SLIDE) == null) return;
+		this._renderManagerService.createRender(unitId);
+	}
+	_disposeRenderer(workbook) {
+		const unitId = workbook.getUnitId();
+		this._renderManagerService.removeRender(unitId);
+	}
+	_initContextListener() {}
+};
+SlideRenderService = __decorate([
+	__decorateParam(0, IContextService),
+	__decorateParam(1, IUniverInstanceService),
+	__decorateParam(2, IRenderManagerService)
+], SlideRenderService);
+
+//#endregion
+//#region src/plugin.ts
+let UniverSlidesUIPlugin = class UniverSlidesUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _renderManagerService, _univerInstanceService, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._renderManagerService = _renderManagerService;
+		this._univerInstanceService = _univerInstanceService;
+		this._configService = _configService;
+		const { menu, ...rest } = merge({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SLIDES_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		mergeOverrideWithDependencies([
+			[SlideRenderService],
+			[ISlideEditorBridgeService, { useClass: SlideEditorBridgeService }],
+			[ISlideEditorManagerService, { useClass: SlideEditorManagerService }],
+			[SlideCanvasPopMangerService]
+		], this._config.override).forEach((d) => this._injector.add(d));
+	}
+	onReady() {
+		[[SlideRenderController]].forEach((m) => {
+			this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m));
+		});
+		mergeOverrideWithDependencies([
+			[CanvasView],
+			[SlidesUIController],
+			[SlideRenderController],
+			[SlidePopupMenuController]
+		], this._config.override).forEach((m) => {
+			this._injector.add(m);
+		});
+		this._injector.get(CanvasView);
+		this._injector.get(SlideRenderService);
+	}
+	onRendered() {
+		[[SlideEditorBridgeRenderController], [SlideEditingRenderController]].forEach((m) => {
+			this.disposeWithMe(this._renderManagerService.registerRenderModule(UniverInstanceType.UNIVER_SLIDE, m));
+		});
+		this._markSlideAsFocused();
+		this._injector.get(SlidesUIController);
+	}
+	onSteady() {
+		this._injector.get(SlidePopupMenuController);
+	}
+	_markSlideAsFocused() {
+		const currentService = this._univerInstanceService;
+		try {
+			const slideDataModel = currentService.getCurrentUnitForType(UniverInstanceType.UNIVER_SLIDE);
+			currentService.focusUnit(slideDataModel.getUnitId());
+		} catch (e) {}
+	}
+};
+_defineProperty(UniverSlidesUIPlugin, "pluginName", "UNIVER_SLIDES_UI_PLUGIN");
+_defineProperty(UniverSlidesUIPlugin, "packageName", name);
+_defineProperty(UniverSlidesUIPlugin, "version", version);
+_defineProperty(UniverSlidesUIPlugin, "type", UniverInstanceType.UNIVER_SLIDE);
+UniverSlidesUIPlugin = __decorate([
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IRenderManagerService),
+	__decorateParam(3, IUniverInstanceService),
+	__decorateParam(4, IConfigService)
+], UniverSlidesUIPlugin);
+
+//#endregion
+export { ActivateSlidePageOperation, AppendSlideOperation, CanvasView, DeleteSlideElementOperation, ISlideEditorBridgeService, InsertSlideFloatImageCommand, InsertSlideShapeEllipseCommand, InsertSlideShapeEllipseOperation, InsertSlideShapeRectangleCommand, InsertSlideShapeRectangleOperation, SHAPE_MENU_ID, SLIDES_IMAGE_MENU_ID, SLIDE_EDITOR_ID, SetSlidePageThumbOperation, SlideAddTextCommand, SlideAddTextOperation, SlideCanvasPopMangerService, SlideEditorContainer, SlideSideBar, SlidesUIController, menuSchema as SlidesUIMenuSchema, UniverSlidesUIPlugin, UpdateSlideElementOperation };