@univerjs/slides-ui 0.20.1 → 0.21.0

package/lib/cjs/index.js

@@ -1 +1,2744 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/engine-render`),n=require(`@univerjs/slides`),r=require(`@univerjs/drawing`),i=require(`@univerjs/ui`),a=require(`@univerjs/design`),o=require(`@univerjs/icons`),s=require(`react/jsx-runtime`),c=require(`react`),l=require(`@univerjs/docs-ui`),u=require(`rxjs`),d=require(`@univerjs/docs`);function f(e){"@babel/helpers - typeof";return f=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},f(e)}function p(e,t){if(f(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(f(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function m(e){var t=p(e,`string`);return f(t)==`symbol`?t:t+``}function h(e,t,n){return(t=m(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function g(e,t){return function(n,r){t(n,r,e)}}function _(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 v=class extends e.RxDisposable{constructor(t,r,i,a){super(),this._renderContext=t,this._injector=r,this._univerInstanceService=i,this._renderManagerService=a,h(this,`_objectProvider`,null),h(this,`_refreshThumb`,(0,e.debounce)(()=>{this.createThumbs()},300)),this._objectProvider=this._injector.createInstance(n.ObjectProvider),this._addNewRender()}_addNewRender(){let{unitId:e,engine:r,scene:i}=this._renderContext,a=this._getCurrUnitModel();if(!a)return;let o=r.onTransformChange$.subscribeEvent(()=>{this._scrollToCenter(),o==null||o.unsubscribe()});r.onTransformChange$.subscribeEvent(()=>{setTimeout(()=>{this.createThumbs()},300)});let s=new t.Viewport(n.SLIDE_KEY.VIEW,i,{left:0,top:0,bottom:0,right:0,explicitViewportWidthSet:!1,explicitViewportHeightSet:!1,isWheelPreventDefaultX:!0});i.attachControl(),i.onMouseWheel$.subscribeEvent((e,t)=>{let n=e;if(n.ctrlKey){let e=Math.abs(n.deltaX),t=e<40?.2:e<80?.4:.2;t*=n.deltaY>0?-1:1,i.scaleX<1&&(t/=2),i.scaleX+t>4?i.scale(4,4):i.scaleX+t<.1?i.scale(.1,.1):(n.deltaY,n.preventDefault())}else s.onMouseWheel(n,t)}),i.onFileLoaded$.subscribeEvent(()=>{this._refreshThumb()}),t.ScrollBar.attachTo(s);let c=this._createSlide(i);this._renderContext.mainComponent=c,this._createSlidePages(a,c),this.createThumbs(),r.runRenderLoop(()=>{i.render()})}_scrollToCenter(){var e;let t=(e=this._currentRender())==null?void 0:e.scene,r=t==null?void 0:t.getViewport(n.SLIDE_KEY.VIEW),i=this._getCenterPositionViewPort(t);if(!r||!i)return;let{left:a,top:o}=i,{x:s,y:c}=r.transViewportScroll2ScrollValue(a,o);r.scrollToBarPos({x:s,y:c})}_currentRender(){return(0,t.getCurrentTypeOfRenderer)(e.UniverInstanceType.UNIVER_SLIDE,this._univerInstanceService,this._renderManagerService)}_createSlide(r){let i=this._univerInstanceService.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE),{width:a,height:o}=r,{width:s=100,height:c=100}=i.getPageSize(),l=new t.Slide(n.SLIDE_KEY.COMPONENT,{left:(a-s)/2,top:(o-c)/2,width:s,height:c,zIndex:10});return l.enableSelectedClipElement(),r.addObject(l),l}_addBackgroundRect(n,r){let{width:i=0,height:a=0}=this._univerInstanceService.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE).getPageSize(),o=new t.Rect(`canvas`,{left:0,top:0,width:i,height:a,strokeWidth:1,stroke:`rgba(198,198,198,1)`,fill:(0,e.getColorStyle)(r)||`rgba(255,255,255,1)`,zIndex:0,evented:!1});n.addObject(o,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,n){let r=this._renderContext;if(!r||!this._objectProvider)return;let{scene:i,mainComponent:a}=r,o=a,{width:s,height:c}=o,l=new t.Scene(e,o,{width:s,height:c});new t.Viewport(`PageViewer_${e}`,l,{left:0,top:0,bottom:0,right:0,explicitViewportWidthSet:!1,explicitViewportHeightSet:!1}).closeClip();let{pageElements:u,pageBackgroundFill:d}=n,f=this._objectProvider.convertToRenderObjects(u,i);if(!f||!o)return;this._addBackgroundRect(l,d),l.addObjects(f),l.initTransformer(),f.forEach(e=>{l.attachTransformerTo(e)});let p=l.getTransformer();return p==null||p.changeEnd$.subscribe(()=>{this._thumbSceneRender(e,o)}),p==null||p.clearControl$.subscribe(()=>{this._thumbSceneRender(e,o)}),o.addPageScene(l),l}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)}};v=_([g(1,(0,e.Inject)(e.Injector)),g(2,e.IUniverInstanceService),g(3,t.IRenderManagerService)],v);let y=class extends e.RxDisposable{constructor(e){super(),this._renderManagerService=e}_getSlideRenderControllerFromRenderUnit(e){return this._renderManagerService.getRenderById(e).with(v)}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()}};y=_([g(0,t.IRenderManagerService)],y);const b={id:`slide.operation.activate-slide`,type:e.CommandType.OPERATION,handler:(t,n)=>{var r,i;let a=n.unitId,o=t.get(y),s=t.get(e.IUniverInstanceService).getUnit(a),c=s==null||(r=s.getActivePage())==null?void 0:r.id;if(!c)return!1;let l=o.getRenderUnitByPageId(c,a);if(!l)return!1;let u=(i=l.scene)==null?void 0:i.getTransformer();return u&&u.clearControls(),o.activePage(n.id,a),!0}},x={id:`slide.operation.append-slide`,type:e.CommandType.OPERATION,handler:(t,n)=>{let r=n.unitId;return t.get(e.IUniverInstanceService).getUnit(r)?(t.get(y).appendPage(r),!0):!1}},S={id:`slide.operation.delete-element`,type:e.CommandType.OPERATION,handler:(t,n)=>{if(!(n!=null&&n.id))return!1;let r=n.unitId,i=t.get(e.IUniverInstanceService).getUnit(r);if(!i)return!1;let a=i.getActivePage();return delete a.pageElements[n.id],i.updatePage(a.id,a),t.get(y).removeObjectById(n.id,a.id,r),!0}},C={id:`slide.command.insert-float-image`,type:e.CommandType.COMMAND,handler:async(t,n)=>{var a;let o=t.get(e.IUniverInstanceService),s=(a=o.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE))==null?void 0:a.getUnitId();if(!s)return!1;let c=await t.get(i.ILocalFileService).openFile({multiple:!0,accept:r.DRAWING_IMAGE_ALLOW_IMAGE_LIST.map(e=>`.${e.replace(`image/`,``)}`).join(`,`)});if(c.length!==1)return!1;let l=await t.get(r.IImageIoService).saveImage(c[0]);if(!l)return!1;let{imageId:u,imageSourceType:d,source:f,base64Cache:p}=l,{width:m,height:h,image:g}=await(0,r.getImageSize)(p||``),_=o.getUnit(s);if(!_)return!1;let v=_.getActivePage(),b=Object.values(v.pageElements),x={id:u,zIndex:(b!=null&&b.length?Math.max(...b.map(e=>e.zIndex)):20)+1,left:0,top:0,width:m,height:h,title:``,description:``,type:e.PageElementType.IMAGE,image:{imageProperties:{contentUrl:p,imageSourceType:d,source:f,base64Cache:p,image:g}}};v.pageElements[u]=x,_.updatePage(v.id,v);let S=t.get(y),C=S.createObjectToPage(x,v.id,s);return C&&S.setObjectActiveByPage(C,v.id,s),!0}},w={id:`slide.operation.update-element`,type:e.CommandType.OPERATION,handler:(t,n)=>{let{oKey:r,props:i}=n,a=t.get(e.IUniverInstanceService),o=n==null?void 0:n.unitId,s=a.getUnit(o);if(!s)return!1;let c=s.getActivePage();return c.pageElements[r]=(0,e.merge)(c.pageElements[r],i),s.updatePage(c.id,c),!0}};var T=function(e){return e[e.forward=0]=`forward`,e[e.backward=1]=`backward`,e[e.front=2]=`front`,e[e.back=3]=`back`,e}(T||{});function E(t){let{pageId:n,unitId:r}=t,c=(0,i.useDependency)(e.LocaleService),l=(0,i.useDependency)(y),u=(0,i.useDependency)(e.ICommandService),d=l.getRenderUnitByPageId(n,r),f=d==null?void 0:d.scene;if(!f)return null;let p=f.getTransformer();if(!p)return null;let m=p.getSelectedObjectMap().values().next().value;if(!m)return null;let h=e=>{let[t,n]=f.getAllObjects().reduce(([e,t],n)=>{let r=n.zIndex;return[r<e?r:e,r>t?r:t]},[0,0]),i=m.zIndex;e===T.back?i=t-1:e===T.front?i=n+1:e===T.forward?i=m.zIndex+1:e===T.backward&&(i=m.zIndex-1),m.setProps({zIndex:i}),u.executeCommand(w.id,{unitId:r,oKey:m==null?void 0:m.oKey,props:{zIndex:i}})};return(0,s.jsxs)(`div`,{className:`univer-relative univer-w-full`,children:[(0,s.jsx)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:(0,s.jsx)(`div`,{className:`univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,s.jsx)(`div`,{children:c.t(`image-panel.arrange.title`)})})}),(0,s.jsxs)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[(0,s.jsx)(`div`,{className:`univer-w-1/2`,children:(0,s.jsx)(a.Button,{onClick:()=>{h(T.forward)},children:(0,s.jsxs)(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[(0,s.jsx)(o.MoveUpIcon,{}),c.t(`image-panel.arrange.forward`)]})})}),(0,s.jsx)(`div`,{className:`univer-w-1/2`,children:(0,s.jsx)(a.Button,{onClick:()=>{h(T.backward)},children:(0,s.jsxs)(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[(0,s.jsx)(o.MoveDownIcon,{}),c.t(`image-panel.arrange.backward`)]})})})]}),(0,s.jsxs)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[(0,s.jsx)(`div`,{className:`univer-w-1/2`,children:(0,s.jsx)(a.Button,{onClick:()=>{h(T.front)},children:(0,s.jsxs)(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[(0,s.jsx)(o.TopmostIcon,{}),c.t(`image-panel.arrange.front`)]})})}),(0,s.jsx)(`div`,{className:`univer-w-1/2`,children:(0,s.jsx)(a.Button,{onClick:()=>{h(T.back)},children:(0,s.jsxs)(`span`,{className:`univer-flex univer-items-center univer-gap-1`,children:[(0,s.jsx)(o.BottomIcon,{}),c.t(`image-panel.arrange.back`)]})})})]})]})}function D(t){var n,r;let{pageId:l,unitId:u}=t,d=(0,i.useDependency)(e.LocaleService),f=(0,i.useDependency)(y),p=(0,i.useDependency)(e.ICommandService),m=f.getRenderUnitByPageId(l,u),h=m==null?void 0:m.scene;if(!h)return null;let g=h.getTransformer();if(!g)return null;let _=g.getSelectedObjectMap().values().next().value;if(!_)return null;let[v,b]=(0,c.useState)((n=(r=_.fill)==null?void 0:r.toString())==null?``:n);function x(e){_==null||_.setProps({fill:e}),p.executeCommand(w.id,{unitId:u,oKey:_==null?void 0:_.oKey,props:{shape:{shapeProperties:{shapeBackgroundFill:{rgb:e}}}}}),b(e)}return(0,s.jsx)(`div`,{className:(0,a.clsx)(`univer-relative univer-bottom-0 univer-mt-5 univer-w-full`,a.borderTopClassName),children:(0,s.jsxs)(`div`,{className:`univer-relative univer-w-full`,children:[(0,s.jsx)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:(0,s.jsx)(`div`,{className:`univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,s.jsx)(`div`,{children:d.t(`slide.panel.fill.title`)})})}),(0,s.jsx)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:(0,s.jsx)(`div`,{className:`univer-w-1/2`,children:(0,s.jsx)(a.Dropdown,{overlay:(0,s.jsx)(`div`,{className:`univer-rounded-lg univer-p-4`,children:(0,s.jsx)(a.ColorPicker,{value:`#fff`,onChange:x})}),children:(0,s.jsxs)(`a`,{className:`univer-flex univer-cursor-pointer univer-items-center univer-gap-1`,children:[(0,s.jsx)(o.PaintBucketDoubleIcon,{className:`univer-fill-primary-600`}),(0,s.jsx)(o.MoreDownIcon,{})]})})})})]})})}function O(t){let{pageId:n,unitId:r}=t,o=(0,i.useDependency)(e.LocaleService),l=(0,i.useDependency)(y),u=(0,i.useDependency)(e.ICommandService),d=l.getRenderUnitByPageId(n,r),f=d==null?void 0:d.scene;if(!f)return null;let p=f.getTransformer();if(!p)return null;let m=p.getSelectedObjectMap().values().next().value;if(!m)return null;let{width:h=0,height:g=0,left:_=0,top:v=0,angle:b=0}=m,[x,S]=(0,c.useState)(h),[C,T]=(0,c.useState)(g),[E,D]=(0,c.useState)(_),[O,k]=(0,c.useState)(v),[A,j]=(0,c.useState)(b),M=e=>{let{objects:t}=e,{width:n=0,height:r=0,left:i=0,top:a=0,angle:o=0}=t.values().next().value;S(n),T(r),D(i),k(a),j(o)};(0,c.useEffect)(()=>{let e=p.changeStart$.subscribe(e=>{M(e)}),t=p.changing$.subscribe(e=>{M(e)});return()=>{t.unsubscribe(),e.unsubscribe()}},[]);function N(e){!e||!m||(u.executeCommand(w.id,{pageId:n,oKey:m.oKey,props:{width:e}}),m==null||m.resize(e,m.height),S(e),p==null||p.refreshControls())}function P(e){!e||!m||(u.executeCommand(w.id,{pageId:n,oKey:m.oKey,props:{height:e}}),m==null||m.resize(m.width,e),T(e),p==null||p.refreshControls())}function F(e){!e||!m||(u.executeCommand(w.id,{pageId:n,oKey:m.oKey,props:{left:e}}),m==null||m.translate(e,m.top),D(e),p==null||p.refreshControls())}function I(e){!e||!m||(u.executeCommand(w.id,{pageId:n,oKey:m.oKey,props:{right:e}}),m==null||m.translate(m.left,e),k(e),p==null||p.refreshControls())}function L(e){!e||!m||(u.executeCommand(w.id,{pageId:n,oKey:m.oKey,props:{angle:e}}),m==null||m.transformByState({angle:e}),j(e),p==null||p.refreshControls())}return(0,s.jsxs)(`div`,{className:(0,a.clsx)(`univer-grid univer-gap-2 univer-py-2 univer-text-gray-400`,a.borderTopClassName),children:[(0,s.jsx)(`header`,{className:`univer-text-gray-600 dark:!univer-text-gray-200`,children:(0,s.jsx)(`div`,{children:o.t(`image-panel.transform.title`)})}),(0,s.jsxs)(`div`,{className:`univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2`,children:[(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`span`,{children:o.t(`image-panel.transform.width`)}),(0,s.jsx)(a.InputNumber,{min:1,value:x,onChange:e=>{N(e)}})]}),(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`span`,{children:o.t(`image-panel.transform.height`)}),(0,s.jsx)(a.InputNumber,{min:1,value:C,onChange:e=>{P(e)}})]})]}),(0,s.jsxs)(`div`,{className:`univer-relative univer-mt-2.5 univer-flex univer-h-full`,children:[(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`span`,{children:o.t(`image-panel.transform.x`)}),(0,s.jsx)(a.InputNumber,{min:0,precision:1,value:E,onChange:e=>{F(e)}})]}),(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`span`,{children:o.t(`image-panel.transform.y`)}),(0,s.jsx)(a.InputNumber,{min:0,precision:1,value:O,onChange:e=>{I(e)}})]}),(0,s.jsxs)(`div`,{children:[(0,s.jsx)(`span`,{children:o.t(`image-panel.transform.rotate`)}),(0,s.jsx)(a.InputNumber,{precision:1,value:A,onChange:L})]})]})]})}const k=`COMPONENT_SLIDE_SIDEBAR`;function A(){var n,r,a;let o=(0,i.useDependency)(e.IUniverInstanceService),c=(0,i.useDependency)(y),l=o.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE),u=l==null||(n=l.getActivePage())==null?void 0:n.id,d=((r=o.getFocusedUnit())==null?void 0:r.getUnitId())||``;if(!u||!d)return null;let f=(a=c.getRenderUnitByPageId(u,d).scene)==null?void 0:a.getTransformer();if(!f)return null;let p=f.getSelectedObjectMap().values().next().value;return p?(0,s.jsxs)(`section`,{className:`univer-p-2 univer-text-center univer-text-sm`,children:[(0,s.jsx)(E,{pageId:u,unitId:d}),(0,s.jsx)(O,{pageId:u,unitId:d}),p.objectType===t.ObjectType.RECT&&(0,s.jsx)(D,{pageId:u,unitId:d})]}):null}const j={id:`slide.command.insert-float-shape.rectangle`,type:e.CommandType.COMMAND,handler:async t=>{var n;let r=t.get(e.ICommandService),i=(n=t.get(e.IUniverInstanceService).getFocusedUnit())==null?void 0:n.getUnitId();return r.executeCommand(M.id,{unitId:i})}},M={id:`slide.operation.insert-float-shape.rectangle`,type:e.CommandType.OPERATION,handler:async(t,n)=>{let r=(0,e.generateRandomId)(6),i=t.get(e.IUniverInstanceService),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:e.PageElementType.SHAPE,shape:{shapeType:e.BasicShapes.Rect,text:``,shapeProperties:{shapeBackgroundFill:{rgb:`rgb(0,0,255)`}}}};s.pageElements[r]=l,o.updatePage(s.id,s);let u=t.get(y),d=u.createObjectToPage(l,s.id,a);return d&&u.setObjectActiveByPage(d,s.id,a),!0}},N={id:`sidebar.operation.slide-shape`,type:e.CommandType.COMMAND,handler:async(n,r)=>{let{visible:a,objectType:o}=r,s=n.get(i.ISidebarService),c=n.get(e.LocaleService),l=``,u=``;return o===t.ObjectType.RECT?(l=`slide.sidebar.shape`,u=k):o===t.ObjectType.IMAGE?(l=`slide.sidebar.image`,u=k):o===t.ObjectType.RICH_TEXT&&(l=`slide.sidebar.text`,u=k),a?s.open({header:{title:c.t(l)},children:{label:u},onClose:()=>{},width:360}):s.close(),!0}},P={id:`slide.command.insert-float-shape.ellipse`,type:e.CommandType.COMMAND,handler:async t=>{var n;let r=t.get(e.ICommandService),i=(n=t.get(e.IUniverInstanceService).getFocusedUnit())==null?void 0:n.getUnitId();return r.executeCommand(F.id,{unitId:i})}},F={id:`slide.operation.insert-float-shape.ellipse`,type:e.CommandType.OPERATION,handler:async(t,n)=>{let r=(0,e.generateRandomId)(6),i=t.get(e.IUniverInstanceService),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:e.PageElementType.SHAPE,shape:{shapeType:e.BasicShapes.Ellipse,text:``,shapeProperties:{radius:100,shapeBackgroundFill:{rgb:`rgb(0,0,255)`}}}};s.pageElements[r]=l,o.updatePage(s.id,s);let u=t.get(y),d=u.createObjectToPage(l,s.id,a);return d&&u.setObjectActiveByPage(d,s.id,a),!0}},I={id:`slide.command.add-text`,type:e.CommandType.COMMAND,handler:async t=>{var n;let r=t.get(e.ICommandService),i=(n=t.get(e.IUniverInstanceService).getFocusedUnit())==null?void 0:n.getUnitId();return await r.executeCommand(L.id,{unitId:i})}},L={id:`slide.operation.add-text`,type:e.CommandType.OPERATION,handler:async(t,n)=>{let r=n.unitId,i=(0,e.generateRandomId)(6),a=(n==null?void 0:n.text)||`A New Text`,o=t.get(e.IUniverInstanceService).getUnit(r);if(!o)return!1;let s=o.getActivePage(),c=Object.values(s.pageElements),l={id:i,zIndex:(c!=null&&c.length?Math.max(...c.map(e=>e.zIndex)):21)+1,left:230,top:142,width:220,height:40,title:`text`,description:``,type:e.PageElementType.TEXT,richText:{text:a,fs:30,cl:{rgb:`rgb(51, 51, 51)`},bl:1}};s.pageElements[i]=l,o.updatePage(s.id,s);let u=t.get(y),d=u.createObjectToPage(l,s.id,r);return d&&u.setObjectActiveByPage(d,s.id,r),!0}},ee={id:`slide.operation.set-slide-page-thumb`,type:e.CommandType.OPERATION,handler:(e,t)=>(e.get(y).createThumbs(t.unitId),!0)};function te(){var n,r;let o=(0,i.useDependency)(e.IUniverInstanceService),l=(0,i.useDependency)(e.ICommandService),u=(0,i.useDependency)(t.IRenderManagerService),d=(0,i.useDependency)(e.LocaleService),f=(0,c.useRef)(null),p=o.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE),m=p==null?void 0:p.getPages(),h=p==null?void 0:p.getPageOrder();if(!m||!h)return null;let g=h.map(e=>m[e]),[_,v]=(0,c.useState)((n=p==null||(r=p.getActivePage())==null?void 0:r.id)==null?null:n),y=(0,c.useMemo)(()=>g.map(()=>(0,c.createRef)()),[g]);(0,c.useEffect)(()=>{let e=p==null?void 0:p.activePage$.subscribe(e=>{var t;let n=(t=e==null?void 0:e.id)==null?null:t;n&&v(n)});return()=>{e==null||e.unsubscribe()}},[]),(0,c.useEffect)(()=>{y.forEach((e,t)=>{if(e.current){var n;let r=g[t];(n=u.getRenderById(r.id))==null||n.engine.setContainer(e.current)}}),y.length>0&&l.syncExecuteCommand(ee.id,{unitId:p==null?void 0:p.getUnitId()})},[y,g,u,l,p]);let S=(0,c.useCallback)(e=>{l.syncExecuteCommand(b.id,{id:e,unitId:p==null?void 0:p.getUnitId()})},[l,p]),C=(0,c.useCallback)(()=>{l.syncExecuteCommand(x.id,{unitId:p==null?void 0:p.getUnitId()})},[l,p]);return(0,s.jsx)(`aside`,{ref:f,className:(0,a.clsx)(`univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden`,a.scrollbarClassName),children:(0,s.jsxs)(`div`,{className:`univer-px-4`,children:[(0,s.jsx)(`header`,{className:`univer-flex univer-justify-center univer-pt-4`,children:(0,s.jsx)(`a`,{className:(0,a.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`,a.borderClassName),onClick:C,children:d.t(`slide.append`)})}),g.map((e,t)=>(0,s.jsxs)(`div`,{className:(0,a.clsx)(`univer-my-4 univer-flex univer-gap-2`,{"[&>div]:univer-border-primary-600 [&>span]:univer-text-primary-600":e.id===_}),onClick:()=>S(e.id),children:[(0,s.jsx)(`span`,{children:t+1}),(0,s.jsx)(`div`,{ref:y[t],className:(0,a.clsx)(`univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600`,a.borderClassName)})]},e.id))]})})}const R=(0,e.createInternalEditorID)(`SLIDE_EDITOR`),z={id:`slide.operation.edit-arrow`,type:e.CommandType.OPERATION,handler:()=>!0},ne=`COMPONENT_SLIDE_IMAGE_POPUP_MENU`;function re(t){var n;let r=(n=t.popup)==null||(n=n.extraProps)==null?void 0:n.menuItems;if(!r)return null;let l=(0,i.useDependency)(e.ICommandService),u=(0,i.useDependency)(e.LocaleService),[d,f]=(0,c.useState)(!1),[p,m]=(0,c.useState)(!1),h=()=>{m(!0)},g=()=>{m(!1)},_=e=>{f(e)},v=e=>{l.executeCommand(e.commandId,e.commandParams),f(!1)},y=d||p,b=r.filter(e=>!e.disable);return(0,s.jsx)(`div`,{onMouseEnter:h,onMouseLeave:g,children:(0,s.jsx)(a.Dropdown,{align:`start`,overlay:(0,s.jsx)(`ul`,{className:(0,a.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`,a.borderClassName),children:b.map(e=>(0,s.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:()=>v(e),children:(0,s.jsx)(`span`,{className:`univer-px-2 univer-py-1.5 univer-align-middle`,children:u.t(e.label)})},e.index))}),open:d,onOpenChange:_,children:(0,s.jsxs)(`div`,{className:(0,a.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`,a.borderClassName,{"univer-bg-gray-100 dark:!univer-bg-gray-800":d,"univer-bg-white dark:!univer-bg-gray-900":!d}),children:[(0,s.jsx)(o.AutofillDoubleIcon,{className:`univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white`}),y&&(0,s.jsx)(o.MoreDownIcon,{className:`dark:!univer-text-white`})]})})})}const B=`slide.menu.image`;function ie(t){return{id:B,type:i.MenuItemType.SUBITEMS,icon:`AddImageIcon`,tooltip:`slide.image.insert.title`,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}function ae(t){return{id:C.id,title:`slide.image.insert.float`,type:i.MenuItemType.BUTTON,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}const V=`slide.menu.shape`;function oe(t){return{id:V,type:i.MenuItemType.SUBITEMS,icon:`GraphIcon`,tooltip:`slide.shape.insert.title`,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}function se(t){return{id:j.id,title:`slide.shape.insert.rectangle`,type:i.MenuItemType.BUTTON,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}function ce(t){return{id:P.id,title:`slide.shape.insert.ellipse`,type:i.MenuItemType.BUTTON,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}function le(t){return{id:I.id,type:i.MenuItemType.BUTTON,icon:`TextIcon`,tooltip:`slide.text.insert.title`,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SLIDE)}}const ue={[i.RibbonStartGroup.FORMAT]:{[I.id]:{order:0,menuItemFactory:le},[B]:{order:0,menuItemFactory:ie,[C.id]:{order:0,menuItemFactory:ae}},[V]:{order:0,menuItemFactory:oe,[j.id]:{order:0,menuItemFactory:se},[P.id]:{order:0,menuItemFactory:ce}}}};var de=class{constructor(){h(this,`_state`,null),h(this,`_rect`,null),h(this,`_state$`,new u.BehaviorSubject(null)),h(this,`state$`,this._state$.asObservable()),h(this,`_rect$`,new u.BehaviorSubject(null)),h(this,`rect$`,this._rect$.asObservable()),h(this,`_focus`,!1),h(this,`_focus$`,new u.BehaviorSubject(this._focus)),h(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 H=(0,e.createIdentifier)(`univer.slide-editor-manager.service`),U=-1e3,fe={width:0,height:0,top:U,left:U};function pe(){let[n,r]=(0,c.useState)({...fe}),o=(0,i.useDependency)(H),u=(0,i.useDependency)(l.IEditorService),d=(0,i.useDependency)(e.IContextService),f=(0,i.useObservable)(()=>d.subscribeContextValue$(i.DISABLE_AUTO_FOCUS_KEY),!1,void 0,[d,i.DISABLE_AUTO_FOCUS_KEY]);return`${e.DEFAULT_EMPTY_DOCUMENT_VALUE}`,e.DocumentFlavor.UNSPECIFIED,(0,c.useEffect)(()=>{o.state$.subscribe(e=>{if(e==null)return;let{startX:n=U,startY:i=U,endX:a=0,endY:s=0,show:c=!1}=e;if(!c)r({...fe});else{r({width:a-n-t.FIX_ONE_PIXEL_BLUR_OFFSET+2,height:s-i-t.FIX_ONE_PIXEL_BLUR_OFFSET+2,left:n+t.FIX_ONE_PIXEL_BLUR_OFFSET,top:i+t.FIX_ONE_PIXEL_BLUR_OFFSET});let e=u.getEditor(R);if(e==null)return;let{left:c,top:l,width:d,height:f}=e.getBoundingClientRect();o.setRect({left:c,top:l,width:d,height:f})}})},[]),(0,c.useEffect)(()=>{f||o.setFocus(!0)},[f,n]),(0,s.jsx)(`div`,{className:(0,a.clsx)(`univer-absolute univer-z-10 univer-box-border univer-flex`,a.borderClassName),style:{left:n.left,top:n.top,width:n.width,height:n.height}})}function W(t){return t.getContextValue(e.FOCUSING_UNIVER_EDITOR)&&t.getContextValue(e.EDITOR_ACTIVATED)}function me(t){return t.getContextValue(e.FORMULA_EDITOR_ACTIVATED)&&t.getContextValue(e.FOCUSING_UNIVER_EDITOR)}const he=[i.KeyCode.ARROW_DOWN,i.KeyCode.ARROW_UP,i.KeyCode.ARROW_LEFT,i.KeyCode.ARROW_RIGHT];[i.KeyCode.ENTER,i.KeyCode.TAB,...he];function ge(){let e=[];for(let n of he)e.push({id:z.id,binding:n,preconditions:e=>W(e),staticParameters:{visible:!1,eventType:t.DeviceInputEventType.Keyboard,keycode:n,isShift:!1}}),e.push({id:z.id,binding:n|i.MetaKeys.SHIFT,preconditions:e=>W(e),staticParameters:{visible:!1,eventType:t.DeviceInputEventType.Keyboard,keycode:n,isShift:!0}});return e}const _e={id:l.DeleteLeftCommand.id,preconditions:e=>W(e)||me(e),binding:i.KeyCode.BACKSPACE};let G=class extends e.Disposable{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(ue)}_initCustomComponents(){let e=this._componentManager;this.disposeWithMe(e.register(`TextIcon`,o.TextIcon)),this.disposeWithMe(e.register(`GraphIcon`,o.GraphIcon)),this.disposeWithMe(e.register(ne,re)),this.disposeWithMe(e.register(k,A))}_initCommands(){[x,b,ee,C,L,I,P,F,M,j,N,S,w,z].forEach(e=>this.disposeWithMe(this._commandService.registerCommand(e)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(i.BuiltInUIPart.LEFT_SIDEBAR,()=>(0,i.connectInjector)(te,this._injector))),this.disposeWithMe(this._uiPartsService.registerComponent(i.BuiltInUIPart.CONTENT,()=>(0,i.connectInjector)(pe,this._injector)))}_initShortcuts(){[_e,...ge()].forEach(e=>{this.disposeWithMe(this._shortcutService.registerShortcut(e))})}};G=_([g(0,(0,e.Inject)(e.Injector)),g(1,i.IMenuManagerService),g(2,(0,e.Inject)(i.ComponentManager)),g(3,i.IUIPartsService),g(4,e.ICommandService),g(5,i.IShortcutService)],G);var ve=`@univerjs/slides-ui`,ye=`0.20.1`;const be=`slides-ui.config`;Symbol(be);const xe={},K=(0,e.createIdentifier)(`univer.slide-editor-bridge.service`);let q=class extends e.Disposable{constructor(e,n,r){super(),this._editorService=e,this._contextService=n,this._renderManagerService=r,h(this,`_editorUnitId`,R),h(this,`_isForceKeepVisible`,!1),h(this,`_editorIsDirty`,!1),h(this,`_currentEditRectState`,null),h(this,`_currentEditRectState$`,new u.BehaviorSubject(null)),h(this,`currentEditRectState$`,this._currentEditRectState$.asObservable()),h(this,`_visibleParam`,{visible:!1,eventType:t.DeviceInputEventType.Dblclick,unitId:``}),h(this,`_visible$`,new u.BehaviorSubject(this._visibleParam)),h(this,`visible$`,this._visible$.asObservable()),h(this,`_afterVisible$`,new u.BehaviorSubject(this._visibleParam)),h(this,`afterVisible$`,this._afterVisible$.asObservable()),h(this,`endEditing$`,new u.Subject),h(this,`_currentEditRectInfo`,void 0)}dispose(){super.dispose()}getEditorRect(){return this._currentEditRectInfo}setEditorRect(t){this._currentEditRectInfo=t,this._editorService.getFocusEditor()||(this._editorService.focus(R),this._contextService.setContextValue(e.EDITOR_ACTIVATED,!1),this._contextService.setContextValue(e.FOCUSING_EDITOR_STANDALONE,!1),this._contextService.setContextValue(e.FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE,!1));let n=this.getEditRectState();this._currentEditRectState=n,this._currentEditRectState$.next(n)}changeVisible(e){this._visibleParam=e,e.visible&&(this._editorIsDirty=!1),this._visible$.next(this._visibleParam),this._afterVisible$.next(this._visibleParam)}getEditRectState(){let t=R,r=this._currentEditRectInfo,i=r.unitId,a=r.richTextObj.documentData;a.id=t,a.documentStyle={...a.documentStyle,pageSize:{width:r.richTextObj.width,height:1/0}};let o={documentModel:new e.DocumentDataModel(a),fontString:`document`,textRotation:{a:0,v:0},wrapStrategy:0,verticalAlign:e.VerticalAlign.TOP,horizontalAlign:e.HorizontalAlign.LEFT,paddingData:{t:0,b:1,l:2,r:2}},s=r.richTextObj.width,c=r.richTextObj.height,l=r.richTextObj.left,u=r.richTextObj.top,d={left:0,top:0},f=this._renderManagerService.getRenderById(i),p=f==null?void 0:f.scene,m=p==null?void 0:p.getViewport(n.SLIDE_KEY.VIEW),h=p==null?void 0:p.getObject(n.SLIDE_KEY.COMPONENT),g={x:(h==null?void 0:h.left)||0,y:(h==null?void 0:h.top)||0},_=(m==null?void 0:m.viewportScrollX)||0,v=(m==null?void 0:m.viewportScrollY)||0;return d.left=g.x-_,d.top=g.y-v,{position:{startX:l,startY:u,endX:l+s,endY:u+c},scaleX:1,scaleY:1,slideCardOffset:d,unitId:i,editorUnitId:t,documentLayoutObject:o}}changeEditorDirty(e){this._editorIsDirty=e}isVisible(){return this._visibleParam.visible}getEditorDirty(){return this._editorIsDirty}getCurrentEditorId(){return this._editorUnitId}genDocData(t){let n=this.getCurrentEditorId(),r=t.text,i=t.fs;return{id:n,body:{dataStream:`${r}\r\n`,textRuns:[{st:0,ed:r.length}],paragraphs:[{paragraphStyle:{},startIndex:r.length+1}],sectionBreaks:[{startIndex:r.length+2}]},documentStyle:{marginBottom:0,marginLeft:0,marginRight:0,marginTop:0,pageSize:{width:1/0,height:1/0},textStyle:{fs:i},renderConfig:{verticalAlign:e.VerticalAlign.MIDDLE,centerAngle:0,vertexAngle:0,wrapStrategy:0}},drawings:{},drawingsOrder:[],settings:{zoomRatio:1}}}};q=_([g(0,l.IEditorService),g(1,e.IContextService),g(2,t.IRenderManagerService)],q);let J=function(e){return e[e.InitialState=0]=`InitialState`,e[e.StartEditor=1]=`StartEditor`,e[e.CursorChange=2]=`CursorChange`,e}({});const Se=-1e3;let Y=class extends e.Disposable{constructor(n,r,a,o,s,c,l,u,d,f,p,m){super(),this._renderContext=n,this._layoutService=r,this._undoRedoService=a,this._contextService=o,this._instanceSrv=s,this._renderManagerService=c,this._editorBridgeService=l,this._cellEditorManagerService=u,this._textSelectionManagerService=d,this._commandService=f,this._localService=p,this._editorService=m,h(this,`_cursorChange`,J.InitialState),h(this,`_isUnitEditing`,!1),h(this,`_d`,void 0),this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SLIDE).subscribe(e=>{e&&e.getUnitId()===this._renderContext.unitId?this._d=this._init():(this._disposeCurrent(),this._isUnitEditing&&(this._handleEditorInvisible({visible:!1,eventType:t.DeviceInputEventType.Keyboard,keycode:i.KeyCode.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 t=new e.DisposableCollection;return this._subscribeToCurrentCell(t),this._initialKeyboardListener(t),this._initialCursorSync(t),this._listenEditorFocus(t),this._commandExecutedListener(t),setTimeout(()=>{this._cursorStateListener(t)},1e3),t}_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(d.DocSkeletonManagerService).getSkeleton()}_getEditorViewModel(e){var t;return(t=this._renderManagerService.getRenderById(e))==null?void 0:t.with(d.DocSkeletonManagerService).getViewModel()}_initialCursorSync(n){n.add(this._cellEditorManagerService.focus$.pipe((0,u.filter)(e=>!!e)).subscribe(()=>{var n;(n=(0,t.getCurrentTypeOfRenderer)(e.UniverInstanceType.UNIVER_DOC,this._instanceSrv,this._renderManagerService))==null||n.with(l.DocSelectionRenderService).sync()}))}_subscribeToCurrentCell(n){n.add(this._editorBridgeService.currentEditRectState$.subscribe(n=>{var r;if(n==null||this._contextService.getContextValue(e.FOCUSING_EDITOR_STANDALONE)||this._contextService.getContextValue(e.FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE))return;let{position:{startX:i,endX:a},documentLayoutObject:{textRotation:o,wrapStrategy:s,documentModel:c},scaleX:u,editorUnitId:d}=n,{vertexAngle:f}=(0,t.convertTextRotation)(o);c.updateDocumentId(d),s===e.WrapStrategy.WRAP&&f===0&&c.updateDocumentDataPageSize((a-i)/u),this._instanceSrv.changeDoc(d,c),this._contextService.setContextValue(e.FOCUSING_EDITOR_BUT_HIDDEN,!0),this._textSelectionManagerService.replaceTextRanges([{startOffset:0,endOffset:0}]),(r=(0,t.getCurrentTypeOfRenderer)(e.UniverInstanceType.UNIVER_DOC,this._instanceSrv,this._renderManagerService))==null||r.with(l.DocSelectionRenderService).activate(Se,Se)}))}_fitTextSize(t,n,r,i,a=1,o=1){let{startX:s,startY:c,endX:l,endY:u}=t,d=i.documentModel;if(d==null)return;let{actualWidth:f,actualHeight:p}=this._predictingSize(t,n,r,i,a,o),{verticalAlign:m,paddingData:h,fill:g}=i,_=l-s,v=u-c;if(_<f&&(_=f),v<p)v=p,d.updateDocumentDataMargin(h);else{let t=0;t=m===e.VerticalAlign.MIDDLE?(v-p)/2/o:m===e.VerticalAlign.TOP?h.t||0:(v-p)/o-(h.b||0),t=t<(h.t||0)?h.t||0:t,d.updateDocumentDataMargin({t})}r.calculate(),this._editAreaProcessing(_,v,t,n,g,a,o)}_predictingSize(n,r,i,a,o=1,s=1){let{startX:c,endX:l}=n,{textRotation:u,wrapStrategy:d}=a,f=a.documentModel,{vertexAngle:p}=(0,t.convertTextRotation)(u),m=document.body.clientWidth;if(d===e.WrapStrategy.WRAP&&p===0){let{actualWidth:e,actualHeight:t}=i.getActualSize();return{actualWidth:e*o,actualHeight:t*s}}f==null||f.updateDocumentDataPageSize((m-c-r.left)/o),i.calculate();let h=i.getActualSize(),g=l-c;return g<h.actualWidth*o+5*o&&(g=h.actualWidth*o+5*o),f==null||f.updateDocumentDataPageSize(g/o),f==null||f.updateDocumentRenderConfig({horizontalAlign:e.HorizontalAlign.UNSPECIFIED,cellValueType:void 0}),{actualWidth:g,actualHeight:h.actualHeight*s}}_editAreaProcessing(e,n,r,i,a,o=1,s=1){let c=this._getEditorObject();if(c==null)return;function u(e){return Number.parseInt(e.replace(`px`,``))}let d=this._renderContext.engine.getCanvasElement(),f=d.getBoundingClientRect(),p=u(d.style.width),{top:m,left:h,width:g}=f,_=g/p,{startX:v,startY:y}=r;v+=i.left,y+=i.top;let{document:b,scene:x,engine:S}=c,C=x.getViewport(l.VIEWPORT_KEY.VIEW_MAIN),w=document.body.clientHeight-y-i.top-4,T=document.body.clientWidth-v-i.left,E=n,D=C==null?void 0:C.getScrollBar();if(E>w)E=w,D==null?C&&new t.ScrollBar(C,{enableHorizontal:!1,barSize:8}):C==null||C.resetCanvasSizeAndUpdateScroll();else{var O;D=null,C==null||(O=C.getScrollBar())==null||O.dispose()}e+=(D==null?void 0:D.barSize)||0,e=Math.min(e,T),v-=t.FIX_ONE_PIXEL_BLUR_OFFSET,y-=t.FIX_ONE_PIXEL_BLUR_OFFSET,this._addBackground(x,e/o,n/s,a);let{scaleX:k,scaleY:A}=x.getPrecisionScale();x.transformByState({width:e*_/o,height:n*_/s,scaleX:o*_,scaleY:s*_}),b.resize(e/o,n/s),setTimeout(()=>{S.resizeBySize((0,t.fixLineWidthByScale)(e,k),(0,t.fixLineWidthByScale)(E,A))},0);let j=this._layoutService.getContentElement().getBoundingClientRect(),M=d.getBoundingClientRect();v=v*_+(M.left-j.left),y=y*_+(M.top-j.top),this._cellEditorManagerService.setState({startX:v,startY:y,endX:e*_+v,endY:E*_+y,show:!0})}_addBackground(e,n,r,i){let a=`_backgroundRectHelperColor_`,o=e.getObject(a);o==null&&i==null||(o==null?e.addObjects([new t.Rect(a,{width:n,height:r,fill:i,evented:!1})],l.DOCS_COMPONENT_MAIN_LAYER_INDEX):i==null?o.dispose():(o.setProps({fill:i}),o.transformByState({width:n,height:r})))}_handleEditorVisible(n){var r,i;let{eventType:a}=n;this._cursorChange=[t.DeviceInputEventType.PointerDown,t.DeviceInputEventType.Dblclick].includes(a)?J.CursorChange:J.StartEditor;let o=this._editorBridgeService.getEditRectState();if(o==null)return;let{position:s,documentLayoutObject:c,slideCardOffset:u,scaleX:d,scaleY:f,editorUnitId:p,unitId:m}=o,h=this._getEditorObject();if(h==null)return;let{scene:g}=h;this._contextService.setContextValue(e.EDITOR_ACTIVATED,!0);let{documentModel:_}=c,v=this._getEditorSkeleton(p);if(!v||!_)return;this._fitTextSize(s,u,v,c,d,f);let y=_.getBody().dataStream.length-2||0;(r=g.getViewport(l.VIEWPORT_KEY.VIEW_MAIN))==null||r.scrollToViewportPos({viewportScrollX:1/0}),this._textSelectionManagerService.replaceTextRanges([{startOffset:y,endOffset:y}]),(i=this._renderManagerService.getRenderById(m))==null||i.scene.resetCursor()}_resetBodyStyle(t,n=!1){t.dataStream=e.DEFAULT_EMPTY_DOCUMENT_VALUE,t.textRuns!=null&&(t.textRuns.length===1&&!n?(t.textRuns[0].st=0,t.textRuns[0].ed=1):t.textRuns=void 0),t.paragraphs!=null&&(t.paragraphs.length===1?t.paragraphs[0].startIndex=0:t.paragraphs=[{startIndex:0}]),t.sectionBreaks!=null&&(t.sectionBreaks=void 0),t.tables!=null&&(t.tables=void 0),t.customRanges!=null&&(t.customRanges=void 0),t.customBlocks!=null&&(t.customBlocks=void 0)}_initialKeyboardListener(e){}_showEditorByKeyboard(e){}_commandExecutedListener(e){let t=[z.id],n=[d.RichTextEditingMutation.id];e.add(this._commandService.onCommandExecuted(e=>{this._editorService.getFocusId()===R&&(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===J.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 Ce(this._editorBridgeService.getCurrentEditorId(),this._renderManagerService)}async _handleEditorInvisible(e){let{keycode:t}=e;if(this._cursorChange=J.InitialState,this._exitInput(e),this._editorBridgeService.getEditRectState()!=null){if(this._editorBridgeService.getEditorDirty()===!1){this._moveCursor(t);return}this._moveCursor(t)}}_exitInput(t){this._contextService.setContextValue(e.EDITOR_ACTIVATED,!1),this._cellEditorManagerService.setState({show:t.visible});let n=this._editorBridgeService.getCurrentEditorId();n!=null&&this._undoRedoService.clearUndoRedo(n)}_moveCursor(t){if(t!=null)switch(e.Direction.LEFT,t){case i.KeyCode.ENTER:e.Direction.DOWN;break;case i.KeyCode.TAB:e.Direction.RIGHT;break;case i.KeyCode.ARROW_DOWN:e.Direction.DOWN;break;case i.KeyCode.ARROW_UP:e.Direction.UP;break;case i.KeyCode.ARROW_LEFT:e.Direction.LEFT;break;case i.KeyCode.ARROW_RIGHT:e.Direction.RIGHT;break}}_cursorStateListener(t){let n=this._getEditorObject();if(!n)return;let{document:r}=n;t.add((0,e.toDisposable)(r.onPointerDown$.subscribeEvent(()=>{this._cursorChange===J.StartEditor&&(this._cursorChange=J.CursorChange)})))}_moveInEditor(t,n){let r=e.Direction.LEFT;t===i.KeyCode.ARROW_DOWN?r=e.Direction.DOWN:t===i.KeyCode.ARROW_UP?r=e.Direction.UP:t===i.KeyCode.ARROW_RIGHT&&(r=e.Direction.RIGHT),n?this._commandService.executeCommand(l.MoveSelectionOperation.id,{direction:r}):this._commandService.executeCommand(l.MoveCursorOperation.id,{direction:r})}};Y=_([g(1,i.ILayoutService),g(2,e.IUndoRedoService),g(3,e.IContextService),g(4,e.IUniverInstanceService),g(5,t.IRenderManagerService),g(6,K),g(7,H),g(8,(0,e.Inject)(d.DocSelectionManagerService)),g(9,e.ICommandService),g(10,(0,e.Inject)(e.LocaleService)),g(11,l.IEditorService)],Y);function Ce(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(l.DOCS_VIEW_KEY.BACKGROUND),scene:i,engine:a}}let we=class extends e.RxDisposable{constructor(t,n,r,i){super(),this._renderContext=t,this._instanceSrv=n,this._commandService=r,this._editorBridgeService=i,h(this,`setSlideTextEditor$`,new u.Subject),h(this,`_curRichText`,null),h(this,`_d`,void 0),this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SLIDE).subscribe(e=>{e&&e.getUnitId()===this._renderContext.unitId?this._d=this._init():this._disposeCurrent()}))}_init(){let t=new e.DisposableCollection;return this._initEventListener(t),t}_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 n=n=>{let r=n.getTransformer();r&&(e.add(r.clearControl$.subscribe(()=>{this.setEditorVisible(!1),this.pickOtherObjects()})),e.add(r.createControl$.subscribe(()=>{this.setEditorVisible(!1)})),e.add(n.onDblclick$.subscribeEvent(()=>{r.clearControls();let e=r.getSelectedObjectMap().values().next().value;e&&(e.objectType===t.ObjectType.RICH_TEXT?this.startEditing(n.sceneKey,e):this.pickOtherObjects())})),e.add(this._instanceSrv.focused$.subscribe(e=>{this.endEditing()})))},{mainComponent:r}=this._renderContext;r.subSceneChanged$.subscribeEvent(e=>{n(e)});let i=Array.from(r.getSubScenes().values());for(let e=0;e<i.length;e++){let t=i[e];n(t)}}pickOtherObjects(){this.endEditing()}endEditing(){var t;if(!this._curRichText)return;this.setEditorVisible(!1);let n=this._curRichText;if(!this._instanceSrv.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE))return!1;n.refreshDocumentByDocData(),n.resizeToContentSize(),this._editorBridgeService.endEditing$.next(n);let r={bl:1,fs:n.fs,text:n.text},i=(t=n.documentData.body)==null?void 0:t.textRuns;if(i&&i.length){let e=i[0].ts;r.cl=e==null?void 0:e.cl}this._commandService.executeCommand(w.id,{unitId:this._renderContext.unitId,oKey:n==null?void 0:n.oKey,props:{richText:r}}),this._curRichText=null}startEditing(e,t){this._setEditorRect(e,t),this.setEditorVisible(!0)}setEditorVisible(e){if(e){var n;(n=this._curRichText)==null||n.hide()}else{var r;(r=this._curRichText)==null||r.show()}let{unitId:i}=this._renderContext;this._editorBridgeService.changeVisible({visible:e,eventType:t.DeviceInputEventType.PointerDown,unitId:i})}};we=_([g(1,e.IUniverInstanceService),g(2,e.ICommandService),g(3,K)],we);function Te(e,t){let n=Ee(e.left,e.top,t),r=Ee(e.right,e.bottom,t);return{left:n.x,top:n.y,right:r.x,bottom:r.y}}function Ee(e,t,r){let{scaleX:i,scaleY:a}=r.getAncestorScale(),o=r.getViewport(n.SLIDE_KEY.VIEW);if(!o)return{x:e,y:t};let{viewportScrollX:s,viewportScrollY:c}=o;return{x:(e-s)*i,y:(t-c)*a}}let X=class extends e.Disposable{constructor(e,t,n,r){super(),this._globalPopupManagerService=e,this._renderManagerService=t,this._univerInstanceService=n,this._commandService=r}_createObjectPositionObserver(n,r){let i=(()=>{var e,i,a,o;let{scene:s,engine:c}=r,{left:l,top:u,width:d,height:f}=n,p=(s.width-((e=(i=r.mainComponent)==null?void 0:i.width)==null?0:e))/2,m=(s.height-((a=(o=r.mainComponent)==null?void 0:o.height)==null?0:a))/2,h={left:l,right:l+d,top:u,bottom:u+f},g=c.getCanvasElement(),_=g.getBoundingClientRect(),v=(0,t.pxToNum)(g.style.width),{scaleX:y,scaleY:b}=s.getAncestorScale(),x=Te(h,s),{top:S,left:C,width:w}=_,T=w/v;return{left:x.left*T*y+C+p,right:x.right*T*y+C+p,top:x.top*T*b+S+m,bottom:x.bottom*T*b+S+m}})();return{position:i,position$:new u.BehaviorSubject(i),disposable:new e.DisposableCollection}}attachPopupToObject(t,n){let r=this._univerInstanceService.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE).getUnitId(),i=this._renderManagerService.getRenderById(r);if(!i)return{dispose:()=>{}};let{position:a,position$:o,disposable:s}=this._createObjectPositionObserver(t,i),c=this._globalPopupManagerService.addPopup({...n,unitId:r,subUnitId:`default`,anchorRect:a,anchorRect$:o,canvasElement:i.engine.getCanvasElement()});return{dispose:()=>{this._globalPopupManagerService.removePopup(c),o.complete(),s.dispose()}}}};X=_([g(0,(0,e.Inject)(i.ICanvasPopupService)),g(1,t.IRenderManagerService),g(2,e.IUniverInstanceService),g(3,e.ICommandService)],X);let Z=class extends e.RxDisposable{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,h(this,`_initImagePopupMenu`,new Set),this._init()}_init(){this._univerInstanceService.getAllUnitsForType(e.UniverInstanceType.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(t){var n;let r=this._univerInstanceService.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE),i=(n=r==null?void 0:r.getPages())==null?{}:n;Object.keys(i).forEach(n=>{var r;let i=(r=this._canvasView.getRenderUnitByPageId(n,t).scene)==null?void 0:r.getTransformer();if(!i)return;let a;this.disposeWithMe((0,e.toDisposable)(i.createControl$.subscribe(()=>{let e=i.getSelectedObjectMap();if(e.size>1){a==null||a.dispose();return}let n=e.values().next().value;if(!n)return;let r=n.oKey;a==null||a.dispose(),a=this.disposeWithMe(this._canvasPopManagerService.attachPopupToObject(n,{componentKey:ne,direction:`horizontal`,offset:[2,0],extraProps:{menuItems:this._getMenuItemsByObjectType(n.objectType,r,t)}})),this._sidebarService.visible&&this._commandService.executeCommand(N.id,{visible:!0,objectType:n.objectType})}))),this.disposeWithMe(i.clearControl$.subscribe(()=>{a==null||a.dispose(),this._contextService.setContextValue(e.FOCUSING_COMMON_DRAWINGS,!1)})),this.disposeWithMe(i.changing$.subscribe(()=>{a==null||a.dispose();let e=i.getSelectedObjectMap();if(e.size>1){a==null||a.dispose();return}let n=e.values().next().value;n&&this._commandService.executeCommand(w.id,{unitId:t,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:N.id,commandParams:{visible:!0,objectType:e},disable:!1},{label:`slide.popup.delete`,index:5,commandId:S.id,commandParams:{id:t,unitId:n},disable:!1}]}};Z=_([g(0,(0,e.Inject)(X)),g(1,t.IRenderManagerService),g(2,e.IUniverInstanceService),g(3,e.IContextService),g(4,(0,e.Inject)(y)),g(5,i.ISidebarService),g(6,e.ICommandService)],Z);let Q=class extends e.RxDisposable{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$(e.UniverInstanceType.UNIVER_SLIDE).pipe((0,u.takeUntil)(this.dispose$)).subscribe(e=>{this._createRenderer(e==null?void 0:e.getUnitId())}),this._instanceSrv.getAllUnitsForType(e.UniverInstanceType.UNIVER_SLIDE).forEach(e=>{this._createRenderer(e.getUnitId())}),this._instanceSrv.getTypeOfUnitDisposed$(e.UniverInstanceType.UNIVER_SLIDE).pipe((0,u.takeUntil)(this.dispose$)).subscribe(e=>this._disposeRenderer(e))}_createRenderer(t){t!=null&&this._instanceSrv.getUnit(t,e.UniverInstanceType.UNIVER_SLIDE)!=null&&this._renderManagerService.createRender(t)}_disposeRenderer(e){let t=e.getUnitId();this._renderManagerService.removeRender(t)}_initContextListener(){}};Q=_([g(0,e.IContextService),g(1,e.IUniverInstanceService),g(2,t.IRenderManagerService)],Q);let $=class extends e.Plugin{constructor(t=xe,n,r,i,a){super(),this._config=t,this._injector=n,this._renderManagerService=r,this._univerInstanceService=i,this._configService=a;let{menu:o,...s}=(0,e.merge)({},xe,this._config);o&&this._configService.setConfig(`menu`,o,{merge:!0}),this._configService.setConfig(be,s)}onStarting(){(0,e.mergeOverrideWithDependencies)([[Q],[K,{useClass:q}],[H,{useClass:de}],[X]],this._config.override).forEach(e=>this._injector.add(e))}onReady(){[[v]].forEach(t=>{this.disposeWithMe(this._renderManagerService.registerRenderModule(e.UniverInstanceType.UNIVER_SLIDE,t))}),(0,e.mergeOverrideWithDependencies)([[y],[G],[v],[Z]],this._config.override).forEach(e=>{this._injector.add(e)}),this._injector.get(y),this._injector.get(Q)}onRendered(){[[we],[Y]].forEach(t=>{this.disposeWithMe(this._renderManagerService.registerRenderModule(e.UniverInstanceType.UNIVER_SLIDE,t))}),this._markSlideAsFocused(),this._injector.get(G)}onSteady(){this._injector.get(Z)}_markSlideAsFocused(){let t=this._univerInstanceService;try{let n=t.getCurrentUnitForType(e.UniverInstanceType.UNIVER_SLIDE);t.focusUnit(n.getUnitId())}catch{}}};h($,`pluginName`,`UNIVER_SLIDES_UI_PLUGIN`),h($,`packageName`,ve),h($,`version`,ye),h($,`type`,e.UniverInstanceType.UNIVER_SLIDE),$=_([g(1,(0,e.Inject)(e.Injector)),g(2,t.IRenderManagerService),g(3,e.IUniverInstanceService),g(4,e.IConfigService)],$),exports.ActivateSlidePageOperation=b,exports.AppendSlideOperation=x,Object.defineProperty(exports,`CanvasView`,{enumerable:!0,get:function(){return y}}),exports.DeleteSlideElementOperation=S,exports.ISlideEditorBridgeService=K,exports.InsertSlideFloatImageCommand=C,exports.InsertSlideShapeEllipseCommand=P,exports.InsertSlideShapeEllipseOperation=F,exports.InsertSlideShapeRectangleCommand=j,exports.InsertSlideShapeRectangleOperation=M,exports.SHAPE_MENU_ID=V,exports.SLIDES_IMAGE_MENU_ID=B,exports.SLIDE_EDITOR_ID=R,exports.SetSlidePageThumbOperation=ee,exports.SlideAddTextCommand=I,exports.SlideAddTextOperation=L,Object.defineProperty(exports,`SlideCanvasPopMangerService`,{enumerable:!0,get:function(){return X}}),exports.SlideEditorContainer=pe,exports.SlideSideBar=te,Object.defineProperty(exports,`SlidesUIController`,{enumerable:!0,get:function(){return G}}),exports.SlidesUIMenuSchema=ue,Object.defineProperty(exports,`UniverSlidesUIPlugin`,{enumerable:!0,get:function(){return $}}),exports.UpdateSlideElementOperation=w;
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_engine_render = require("@univerjs/engine-render");
+let _univerjs_slides = require("@univerjs/slides");
+let _univerjs_drawing = require("@univerjs/drawing");
+let _univerjs_ui = require("@univerjs/ui");
+let _univerjs_design = require("@univerjs/design");
+let _univerjs_icons = require("@univerjs/icons");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _univerjs_docs_ui = require("@univerjs/docs-ui");
+let rxjs = require("rxjs");
+let _univerjs_docs = require("@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 _univerjs_core.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", (0, _univerjs_core.debounce)(() => {
+			this.createThumbs();
+		}, 300));
+		this._objectProvider = this._injector.createInstance(_univerjs_slides.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 _univerjs_engine_render.Viewport(_univerjs_slides.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();
+		});
+		_univerjs_engine_render.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(_univerjs_slides.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 (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_SLIDE, this._univerInstanceService, this._renderManagerService);
+	}
+	/**
+	* @param mainScene
+	*/
+	_createSlide(mainScene) {
+		const model = this._univerInstanceService.getCurrentUnitForType(_univerjs_core.UniverInstanceType.UNIVER_SLIDE);
+		const { width: sceneWidth, height: sceneHeight } = mainScene;
+		const { width = 100, height = 100 } = model.getPageSize();
+		const slideComponent = new _univerjs_engine_render.Slide(_univerjs_slides.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(_univerjs_core.UniverInstanceType.UNIVER_SLIDE).getPageSize();
+		const page = new _univerjs_engine_render.Rect("canvas", {
+			left: 0,
+			top: 0,
+			width: pageWidth,
+			height: pageHeight,
+			strokeWidth: 1,
+			stroke: "rgba(198,198,198,1)",
+			fill: (0, _univerjs_core.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 _univerjs_engine_render.Scene(pageId, slide, {
+			width,
+			height
+		});
+		new _univerjs_engine_render.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, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_core.IUniverInstanceService),
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService)
+], SlideRenderController);
+
+//#endregion
+//#region src/controllers/canvas-view.ts
+let CanvasView = class CanvasView extends _univerjs_core.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, _univerjs_engine_render.IRenderManagerService)], CanvasView);
+
+//#endregion
+//#region src/commands/operations/activate.operation.ts
+const ActivateSlidePageOperation = {
+	id: "slide.operation.activate-slide",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		var _model$getActivePage, _page$scene;
+		const unitId = params.unitId;
+		const canvasView = accessor.get(CanvasView);
+		const model = accessor.get(_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const unitId = params.unitId;
+		if (!accessor.get(_univerjs_core.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: _univerjs_core.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(_univerjs_core.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: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor, params) => {
+		var _univerInstanceServic;
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const unitId = (_univerInstanceServic = univerInstanceService.getCurrentUnitForType(_univerjs_core.UniverInstanceType.UNIVER_SLIDE)) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId();
+		if (!unitId) return false;
+		const files = await accessor.get(_univerjs_ui.ILocalFileService).openFile({
+			multiple: true,
+			accept: _univerjs_drawing.DRAWING_IMAGE_ALLOW_IMAGE_LIST.map((image) => `.${image.replace("image/", "")}`).join(",")
+		});
+		if (files.length !== 1) return false;
+		const imageParam = await accessor.get(_univerjs_drawing.IImageIoService).saveImage(files[0]);
+		if (!imageParam) return false;
+		const { imageId, imageSourceType, source, base64Cache } = imageParam;
+		const { width, height, image } = await (0, _univerjs_drawing.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: _univerjs_slides.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: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor, params) => {
+		const { oKey, props } = params;
+		const univerInstanceService = accessor.get(_univerjs_core.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] = (0, _univerjs_core.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const canvasView = (0, _univerjs_ui.useDependency)(CanvasView);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-relative univer-w-full",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.arrange.title") })
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.forward);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoveUpIcon, {}), localeService.t("image-panel.arrange.forward")]
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.backward);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoveDownIcon, {}), localeService.t("image-panel.arrange.backward")]
+						})
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.front);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.TopmostIcon, {}), localeService.t("image-panel.arrange.front")]
+						})
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						onClick: () => {
+							onArrangeBtnClick(ArrangeTypeEnum.back);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: "univer-flex univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const canvasView = (0, _univerjs_ui.useDependency)(CanvasView);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.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] = (0, react.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__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _univerjs_design.clsx)("univer-relative univer-bottom-0 univer-mt-5 univer-w-full", _univerjs_design.borderTopClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-relative univer-w-full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-full univer-text-left univer-text-gray-600 dark:!univer-text-gray-200",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("slide.panel.fill.title") })
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-w-1/2",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+						overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-rounded-lg univer-p-4",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+								value: "#fff",
+								onChange: handleChangeColor
+							})
+						}),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+							className: "univer-flex univer-cursor-pointer univer-items-center univer-gap-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PaintBucketDoubleIcon, { className: "univer-fill-primary-600" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+						})
+					})
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/panels/TransformPanel.tsx
+function TransformPanel(props) {
+	const { pageId, unitId } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const canvasView = (0, _univerjs_ui.useDependency)(CanvasView);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.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] = (0, react.useState)(originWidth);
+	const [height, setHeight] = (0, react.useState)(originHeight);
+	const [xPosition, setXPosition] = (0, react.useState)(originX);
+	const [yPosition, setYPosition] = (0, react.useState)(originY);
+	const [rotation, setRotation] = (0, react.useState)(originRotation);
+	const 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);
+	};
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _univerjs_design.clsx)("univer-grid univer-gap-2 univer-py-2 univer-text-gray-400", _univerjs_design.borderTopClassName),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-text-gray-600 dark:!univer-text-gray-200",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: localeService.t("image-panel.transform.title") })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-grid univer-grid-cols-3 univer-gap-2 [&>div]:univer-grid [&>div]:univer-gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.width") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: 1,
+					value: width,
+					onChange: (val) => {
+						handleWidthChange(val);
+					}
+				})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.height") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+					min: 1,
+					value: height,
+					onChange: (val) => {
+						handleHeightChange(val);
+					}
+				})] })]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-relative univer-mt-2.5 univer-flex univer-h-full",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.x") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						min: 0,
+						precision: 1,
+						value: xPosition,
+						onChange: (val) => {
+							handleXChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.y") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						min: 0,
+						precision: 1,
+						value: yPosition,
+						onChange: (val) => {
+							handleYChange(val);
+						}
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("image-panel.transform.rotate") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						precision: 1,
+						value: rotation,
+						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 = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const canvasView = (0, _univerjs_ui.useDependency)(CanvasView);
+	const currentSlide = univerInstanceService.getCurrentUnitForType(_univerjs_core.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__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: "univer-p-2 univer-text-center univer-text-sm",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrangePanel$1, {
+				pageId,
+				unitId
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TransformPanel, {
+				pageId,
+				unitId
+			}),
+			object.objectType === _univerjs_engine_render.ObjectType.RECT && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArrangePanel, {
+				pageId,
+				unitId
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/commands/operations/insert-shape.operation.ts
+const InsertSlideShapeRectangleCommand = {
+	id: "slide.command.insert-float-shape.rectangle",
+	type: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _instanceService$getF;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const unitId = (_instanceService$getF = accessor.get(_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const id = (0, _univerjs_core.generateRandomId)(6);
+		const univerInstanceService = accessor.get(_univerjs_core.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: _univerjs_slides.PageElementType.SHAPE,
+			shape: {
+				shapeType: _univerjs_slides.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: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor, params) => {
+		const { visible, objectType } = params;
+		const sidebarService = accessor.get(_univerjs_ui.ISidebarService);
+		const localeService = accessor.get(_univerjs_core.LocaleService);
+		let title = "";
+		let children = "";
+		if (objectType === _univerjs_engine_render.ObjectType.RECT) {
+			title = "slide.sidebar.shape";
+			children = COMPONENT_SLIDE_SIDEBAR;
+		} else if (objectType === _univerjs_engine_render.ObjectType.IMAGE) {
+			title = "slide.sidebar.image";
+			children = COMPONENT_SLIDE_SIDEBAR;
+		} else if (objectType === _univerjs_engine_render.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: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _instanceService$getF2;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const unitId = (_instanceService$getF2 = accessor.get(_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const id = (0, _univerjs_core.generateRandomId)(6);
+		const univerInstanceService = accessor.get(_univerjs_core.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: _univerjs_slides.PageElementType.SHAPE,
+			shape: {
+				shapeType: _univerjs_slides.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: _univerjs_core.CommandType.COMMAND,
+	handler: async (accessor) => {
+		var _univerInstanceServic;
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const unitId = (_univerInstanceServic = accessor.get(_univerjs_core.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: _univerjs_core.CommandType.OPERATION,
+	handler: async (accessor, params) => {
+		const unitId = params.unitId;
+		const elementId = (0, _univerjs_core.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(_univerjs_core.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: _univerjs_slides.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: _univerjs_core.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const renderManagerService = (0, _univerjs_ui.useDependency)(_univerjs_engine_render.IRenderManagerService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const slideBarRef = (0, react.useRef)(null);
+	const currentSlide = univerInstanceService.getCurrentUnitForType(_univerjs_core.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] = (0, react.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 = (0, react.useMemo)(() => slideList.map(() => (0, react.createRef)()), [slideList]);
+	(0, react.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();
+		};
+	}, []);
+	(0, react.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 = (0, react.useCallback)((page) => {
+		commandService.syncExecuteCommand(ActivateSlidePageOperation.id, {
+			id: page,
+			unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId()
+		});
+	}, [commandService, currentSlide]);
+	const handleAppendSlide = (0, react.useCallback)(() => {
+		commandService.syncExecuteCommand(AppendSlideOperation.id, { unitId: currentSlide === null || currentSlide === void 0 ? void 0 : currentSlide.getUnitId() });
+	}, [commandService, currentSlide]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		ref: slideBarRef,
+		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-w-64 univer-flex-col univer-overflow-y-auto univer-overflow-x-hidden", _univerjs_design.scrollbarClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-px-4",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+				className: "univer-flex univer-justify-center univer-pt-4",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+					className: (0, _univerjs_design.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", _univerjs_design.borderClassName),
+					onClick: handleAppendSlide,
+					children: localeService.t("slide.append")
+				})
+			}), slideList.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("span", { children: index + 1 }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					ref: divRefs[index],
+					className: (0, _univerjs_design.clsx)("univer-relative univer-box-border univer-h-32 univer-w-52 univer-bg-white hover:univer-border-primary-600", _univerjs_design.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 = (0, _univerjs_core.createInternalEditorID)("SLIDE_EDITOR");
+
+//#endregion
+//#region src/commands/operations/text-edit.operation.ts
+const SetTextEditArrowOperation = {
+	id: "slide.operation.edit-arrow",
+	type: _univerjs_core.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 = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [visible, setVisible] = (0, react.useState)(false);
+	const [isHovered, setHovered] = (0, react.useState)(false);
+	const handleMouseEnter = () => {
+		setHovered(true);
+	};
+	const handleMouseLeave = () => {
+		setHovered(false);
+	};
+	const onVisibleChange = (visible) => {
+		setVisible(visible);
+	};
+	const handleClick = (item) => {
+		commandService.executeCommand(item.commandId, item.commandParams);
+		setVisible(false);
+	};
+	const showMore = visible || isHovered;
+	const availableMenu = menuItems.filter((item) => !item.disable);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+			align: "start",
+			overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: (0, _univerjs_design.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", _univerjs_design.borderClassName),
+				children: availableMenu.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _univerjs_design.clsx)("univer-flex univer-items-center univer-gap-2 univer-rounded univer-p-1 hover:univer-bg-gray-100 dark:hover:!univer-bg-gray-800", _univerjs_design.borderClassName, {
+					"univer-bg-gray-100 dark:!univer-bg-gray-800": visible,
+					"univer-bg-white dark:!univer-bg-gray-900": !visible
+				}),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AutofillDoubleIcon, { className: "univer-fill-primary-600 univer-text-gray-900 dark:!univer-text-white" }), showMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, { className: "dark:!univer-text-white" })]
+			})
+		})
+	});
+}
+
+//#endregion
+//#region src/menu/image.menu.ts
+const SLIDES_IMAGE_MENU_ID = "slide.menu.image";
+function SlideImageMenuFactory(accessor) {
+	return {
+		id: SLIDES_IMAGE_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "AddImageIcon",
+		tooltip: "slide.image.insert.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatImageMenuFactory(_accessor) {
+	return {
+		id: InsertSlideFloatImageCommand.id,
+		title: "slide.image.insert.float",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.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: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "GraphIcon",
+		tooltip: "slide.shape.insert.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatRectangleShapeMenuFactory(_accessor) {
+	return {
+		id: InsertSlideShapeRectangleCommand.id,
+		title: "slide.shape.insert.rectangle",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+function UploadSlideFloatEllipseShapeMenuFactory(_accessor) {
+	return {
+		id: InsertSlideShapeEllipseCommand.id,
+		title: "slide.shape.insert.ellipse",
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+
+//#endregion
+//#region src/menu/text.menu.ts
+function SlideAddTextMenuItemFactory(_accessor) {
+	return {
+		id: SlideAddTextCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: "TextIcon",
+		tooltip: "slide.text.insert.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(_accessor, _univerjs_core.UniverInstanceType.UNIVER_SLIDE)
+	};
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [_univerjs_ui.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 rxjs.BehaviorSubject(null));
+		_defineProperty(this, "state$", this._state$.asObservable());
+		_defineProperty(this, "_rect$", new rxjs.BehaviorSubject(null));
+		_defineProperty(this, "rect$", this._rect$.asObservable());
+		_defineProperty(this, "_focus", false);
+		_defineProperty(this, "_focus$", new rxjs.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 = (0, _univerjs_core.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] = (0, react.useState)({ ...EDITOR_DEFAULT_POSITION });
+	const slideEditorManagerService = (0, _univerjs_ui.useDependency)(ISlideEditorManagerService);
+	const editorService = (0, _univerjs_ui.useDependency)(_univerjs_docs_ui.IEditorService);
+	const contextService = (0, _univerjs_ui.useDependency)(_univerjs_core.IContextService);
+	const disableAutoFocus = (0, _univerjs_ui.useObservable)(() => contextService.subscribeContextValue$(_univerjs_ui.DISABLE_AUTO_FOCUS_KEY), false, void 0, [contextService, _univerjs_ui.DISABLE_AUTO_FOCUS_KEY]);
+	`${_univerjs_core.DEFAULT_EMPTY_DOCUMENT_VALUE}`, _univerjs_core.DocumentFlavor.UNSPECIFIED;
+	(0, react.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 - _univerjs_engine_render.FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+					height: endY - startY - _univerjs_engine_render.FIX_ONE_PIXEL_BLUR_OFFSET + 2,
+					left: startX + _univerjs_engine_render.FIX_ONE_PIXEL_BLUR_OFFSET,
+					top: startY + _univerjs_engine_render.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
+				});
+			}
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		if (!disableAutoFocus) slideEditorManagerService.setFocus(true);
+	}, [disableAutoFocus, state]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, _univerjs_design.clsx)("univer-absolute univer-z-10 univer-box-border univer-flex", _univerjs_design.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(_univerjs_core.FOCUSING_UNIVER_EDITOR) && contextService.getContextValue(_univerjs_core.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(_univerjs_core.FORMULA_EDITOR_ACTIVATED) && contextService.getContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR);
+}
+
+//#endregion
+//#region src/controllers/shortcuts/editor.shortcuts.ts
+const ARROW_SELECTION_KEYCODE_LIST = [
+	_univerjs_ui.KeyCode.ARROW_DOWN,
+	_univerjs_ui.KeyCode.ARROW_UP,
+	_univerjs_ui.KeyCode.ARROW_LEFT,
+	_univerjs_ui.KeyCode.ARROW_RIGHT
+];
+const MOVE_SELECTION_KEYCODE_LIST = [
+	_univerjs_ui.KeyCode.ENTER,
+	_univerjs_ui.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: _univerjs_engine_render.DeviceInputEventType.Keyboard,
+				keycode,
+				isShift: false
+			}
+		});
+		shortcutList.push({
+			id: SetTextEditArrowOperation.id,
+			binding: keycode | _univerjs_ui.MetaKeys.SHIFT,
+			preconditions: (contextService) => whenEditorActivated(contextService),
+			staticParameters: {
+				visible: false,
+				eventType: _univerjs_engine_render.DeviceInputEventType.Keyboard,
+				keycode,
+				isShift: true
+			}
+		});
+	}
+	return shortcutList;
+}
+const EditorDeleteLeftShortcut = {
+	id: _univerjs_docs_ui.DeleteLeftCommand.id,
+	preconditions: (contextService) => {
+		return whenEditorActivated(contextService) || whenFormulaEditorFocused(contextService);
+	},
+	binding: _univerjs_ui.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 _univerjs_core.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", _univerjs_icons.TextIcon));
+		this.disposeWithMe(componentManager.register("GraphIcon", _univerjs_icons.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(_univerjs_ui.BuiltInUIPart.LEFT_SIDEBAR, () => (0, _univerjs_ui.connectInjector)(SlideSideBar, this._injector)));
+		this.disposeWithMe(this._uiPartsService.registerComponent(_univerjs_ui.BuiltInUIPart.CONTENT, () => (0, _univerjs_ui.connectInjector)(SlideEditorContainer, this._injector)));
+	}
+	_initShortcuts() {
+		[EditorDeleteLeftShortcut, ...generateArrowSelectionShortCutItem()].forEach((item) => {
+			this.disposeWithMe(this._shortcutService.registerShortcut(item));
+		});
+	}
+};
+SlidesUIController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(1, _univerjs_ui.IMenuManagerService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(3, _univerjs_ui.IUIPartsService),
+	__decorateParam(4, _univerjs_core.ICommandService),
+	__decorateParam(5, _univerjs_ui.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 = (0, _univerjs_core.createIdentifier)("univer.slide-editor-bridge.service");
+let SlideEditorBridgeService = class SlideEditorBridgeService extends _univerjs_core.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 rxjs.BehaviorSubject(null));
+		_defineProperty(this, "currentEditRectState$", this._currentEditRectState$.asObservable());
+		_defineProperty(this, "_visibleParam", {
+			visible: false,
+			eventType: _univerjs_engine_render.DeviceInputEventType.Dblclick,
+			unitId: ""
+		});
+		_defineProperty(this, "_visible$", new rxjs.BehaviorSubject(this._visibleParam));
+		_defineProperty(this, "visible$", this._visible$.asObservable());
+		_defineProperty(this, "_afterVisible$", new rxjs.BehaviorSubject(this._visibleParam));
+		_defineProperty(this, "afterVisible$", this._afterVisible$.asObservable());
+		_defineProperty(this, "endEditing$", new rxjs.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(_univerjs_core.EDITOR_ACTIVATED, false);
+			this._contextService.setContextValue(_univerjs_core.FOCUSING_EDITOR_STANDALONE, false);
+			this._contextService.setContextValue(_univerjs_core.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 _univerjs_core.DocumentDataModel(docData),
+			fontString: "document",
+			textRotation: {
+				a: 0,
+				v: 0
+			},
+			wrapStrategy: 0,
+			verticalAlign: _univerjs_core.VerticalAlign.TOP,
+			horizontalAlign: _univerjs_core.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(_univerjs_slides.SLIDE_KEY.VIEW);
+		const slideMainRect = mainScene === null || mainScene === void 0 ? void 0 : mainScene.getObject(_univerjs_slides.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: _univerjs_core.VerticalAlign.MIDDLE,
+					centerAngle: 0,
+					vertexAngle: 0,
+					wrapStrategy: 0
+				}
+			},
+			drawings: {},
+			drawingsOrder: [],
+			settings: { zoomRatio: 1 }
+		};
+	}
+};
+SlideEditorBridgeService = __decorate([
+	__decorateParam(0, _univerjs_docs_ui.IEditorService),
+	__decorateParam(1, _univerjs_core.IContextService),
+	__decorateParam(2, _univerjs_engine_render.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 _univerjs_core.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$(_univerjs_core.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: _univerjs_engine_render.DeviceInputEventType.Keyboard,
+						keycode: _univerjs_ui.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 _univerjs_core.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(_univerjs_docs.DocSkeletonManagerService).getSkeleton();
+	}
+	_getEditorViewModel(editorId) {
+		var _this$_renderManagerS2;
+		return (_this$_renderManagerS2 = this._renderManagerService.getRenderById(editorId)) === null || _this$_renderManagerS2 === void 0 ? void 0 : _this$_renderManagerS2.with(_univerjs_docs.DocSkeletonManagerService).getViewModel();
+	}
+	_initialCursorSync(d) {
+		d.add(this._cellEditorManagerService.focus$.pipe((0, rxjs.filter)((f) => !!f)).subscribe(() => {
+			var _getCurrentTypeOfRend;
+			(_getCurrentTypeOfRend = (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) === null || _getCurrentTypeOfRend === void 0 || _getCurrentTypeOfRend.with(_univerjs_docs_ui.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(_univerjs_core.FOCUSING_EDITOR_STANDALONE) || this._contextService.getContextValue(_univerjs_core.FOCUSING_UNIVER_EDITOR_STANDALONE_SINGLE_MODE)) return;
+			const { position: { startX, endX }, documentLayoutObject: { textRotation, wrapStrategy, documentModel }, scaleX, editorUnitId } = editCellState;
+			const { vertexAngle: angle } = (0, _univerjs_engine_render.convertTextRotation)(textRotation);
+			documentModel.updateDocumentId(editorUnitId);
+			if (wrapStrategy === _univerjs_core.WrapStrategy.WRAP && angle === 0) documentModel.updateDocumentDataPageSize((endX - startX) / scaleX);
+			this._instanceSrv.changeDoc(editorUnitId, documentModel);
+			this._contextService.setContextValue(_univerjs_core.FOCUSING_EDITOR_BUT_HIDDEN, true);
+			this._textSelectionManagerService.replaceTextRanges([{
+				startOffset: 0,
+				endOffset: 0
+			}]);
+			(_getCurrentTypeOfRend2 = (0, _univerjs_engine_render.getCurrentTypeOfRenderer)(_univerjs_core.UniverInstanceType.UNIVER_DOC, this._instanceSrv, this._renderManagerService)) === null || _getCurrentTypeOfRend2 === void 0 || _getCurrentTypeOfRend2.with(_univerjs_docs_ui.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 === _univerjs_core.VerticalAlign.MIDDLE) offsetTop = (editorHeight - actualHeight) / 2 / scaleY;
+			else if (verticalAlign === _univerjs_core.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 } = (0, _univerjs_engine_render.convertTextRotation)(textRotation);
+		const clientWidth = document.body.clientWidth;
+		if (wrapStrategy === _univerjs_core.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: _univerjs_core.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(_univerjs_docs_ui.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 _univerjs_engine_render.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 -= _univerjs_engine_render.FIX_ONE_PIXEL_BLUR_OFFSET;
+		startY -= _univerjs_engine_render.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((0, _univerjs_engine_render.fixLineWidthByScale)(editorWidth, precisionScaleX), (0, _univerjs_engine_render.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 _univerjs_engine_render.Rect(fillRectKey, {
+			width: editorWidth,
+			height: editorHeight,
+			fill,
+			evented: false
+		})], _univerjs_docs_ui.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 = [_univerjs_engine_render.DeviceInputEventType.PointerDown, _univerjs_engine_render.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(_univerjs_core.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(_univerjs_docs_ui.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 = _univerjs_core.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 = [_univerjs_docs.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(_univerjs_core.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;
+		_univerjs_core.Direction.LEFT;
+		switch (keycode) {
+			case _univerjs_ui.KeyCode.ENTER:
+				_univerjs_core.Direction.DOWN;
+				break;
+			case _univerjs_ui.KeyCode.TAB:
+				_univerjs_core.Direction.RIGHT;
+				break;
+			case _univerjs_ui.KeyCode.ARROW_DOWN:
+				_univerjs_core.Direction.DOWN;
+				break;
+			case _univerjs_ui.KeyCode.ARROW_UP:
+				_univerjs_core.Direction.UP;
+				break;
+			case _univerjs_ui.KeyCode.ARROW_LEFT:
+				_univerjs_core.Direction.LEFT;
+				break;
+			case _univerjs_ui.KeyCode.ARROW_RIGHT:
+				_univerjs_core.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((0, _univerjs_core.toDisposable)(documentComponent.onPointerDown$.subscribeEvent(() => {
+			if (this._cursorChange === CursorChange.StartEditor) this._cursorChange = CursorChange.CursorChange;
+		})));
+	}
+	_moveInEditor(keycode, isShift) {
+		let direction = _univerjs_core.Direction.LEFT;
+		if (keycode === _univerjs_ui.KeyCode.ARROW_DOWN) direction = _univerjs_core.Direction.DOWN;
+		else if (keycode === _univerjs_ui.KeyCode.ARROW_UP) direction = _univerjs_core.Direction.UP;
+		else if (keycode === _univerjs_ui.KeyCode.ARROW_RIGHT) direction = _univerjs_core.Direction.RIGHT;
+		if (isShift) this._commandService.executeCommand(_univerjs_docs_ui.MoveSelectionOperation.id, { direction });
+		else this._commandService.executeCommand(_univerjs_docs_ui.MoveCursorOperation.id, { direction });
+	}
+};
+SlideEditingRenderController = __decorate([
+	__decorateParam(1, _univerjs_ui.ILayoutService),
+	__decorateParam(2, _univerjs_core.IUndoRedoService),
+	__decorateParam(3, _univerjs_core.IContextService),
+	__decorateParam(4, _univerjs_core.IUniverInstanceService),
+	__decorateParam(5, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(6, ISlideEditorBridgeService),
+	__decorateParam(7, ISlideEditorManagerService),
+	__decorateParam(8, (0, _univerjs_core.Inject)(_univerjs_docs.DocSelectionManagerService)),
+	__decorateParam(9, _univerjs_core.ICommandService),
+	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(11, _univerjs_docs_ui.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(_univerjs_docs_ui.DOCS_VIEW_KEY.BACKGROUND),
+		scene,
+		engine
+	};
+}
+
+//#endregion
+//#region src/controllers/slide-editor-bridge.render-controller.ts
+let SlideEditorBridgeRenderController = class SlideEditorBridgeRenderController extends _univerjs_core.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 rxjs.Subject()
+		);
+		_defineProperty(this, "_curRichText", null);
+		_defineProperty(this, "_d", void 0);
+		this.disposeWithMe(this._instanceSrv.getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SLIDE).subscribe((slideDataModel) => {
+			if (slideDataModel && slideDataModel.getUnitId() === this._renderContext.unitId) this._d = this._init();
+			else this._disposeCurrent();
+		}));
+	}
+	_init() {
+		const d = new _univerjs_core.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 !== _univerjs_engine_render.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(_univerjs_core.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: _univerjs_engine_render.DeviceInputEventType.PointerDown,
+			unitId
+		});
+	}
+};
+SlideEditorBridgeRenderController = __decorate([
+	__decorateParam(1, _univerjs_core.IUniverInstanceService),
+	__decorateParam(2, _univerjs_core.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(_univerjs_slides.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 _univerjs_core.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 = (0, _univerjs_engine_render.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 rxjs.BehaviorSubject(position),
+			disposable: new _univerjs_core.DisposableCollection()
+		};
+	}
+	attachPopupToObject(targetObject, popup) {
+		const unitId = this._univerInstanceService.getCurrentUnitForType(_univerjs_core.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, (0, _univerjs_core.Inject)(_univerjs_ui.ICanvasPopupService)),
+	__decorateParam(1, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(2, _univerjs_core.IUniverInstanceService),
+	__decorateParam(3, _univerjs_core.ICommandService)
+], SlideCanvasPopMangerService);
+
+//#endregion
+//#region src/menu/popup-menu.controller.ts
+let SlidePopupMenuController = class SlidePopupMenuController extends _univerjs_core.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(_univerjs_core.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(_univerjs_core.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((0, _univerjs_core.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(_univerjs_core.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, (0, _univerjs_core.Inject)(SlideCanvasPopMangerService)),
+	__decorateParam(1, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(2, _univerjs_core.IUniverInstanceService),
+	__decorateParam(3, _univerjs_core.IContextService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(CanvasView)),
+	__decorateParam(5, _univerjs_ui.ISidebarService),
+	__decorateParam(6, _univerjs_core.ICommandService)
+], SlidePopupMenuController);
+
+//#endregion
+//#region src/services/slide-render.service.ts
+let SlideRenderService = class SlideRenderService extends _univerjs_core.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$(_univerjs_core.UniverInstanceType.UNIVER_SLIDE).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((slideModel) => {
+			this._createRenderer(slideModel === null || slideModel === void 0 ? void 0 : slideModel.getUnitId());
+		});
+		this._instanceSrv.getAllUnitsForType(_univerjs_core.UniverInstanceType.UNIVER_SLIDE).forEach((slideModel) => {
+			this._createRenderer(slideModel.getUnitId());
+		});
+		this._instanceSrv.getTypeOfUnitDisposed$(_univerjs_core.UniverInstanceType.UNIVER_SLIDE).pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((workbook) => this._disposeRenderer(workbook));
+	}
+	_createRenderer(unitId) {
+		if (unitId == null) return;
+		if (this._instanceSrv.getUnit(unitId, _univerjs_core.UniverInstanceType.UNIVER_SLIDE) == null) return;
+		this._renderManagerService.createRender(unitId);
+	}
+	_disposeRenderer(workbook) {
+		const unitId = workbook.getUnitId();
+		this._renderManagerService.removeRender(unitId);
+	}
+	_initContextListener() {}
+};
+SlideRenderService = __decorate([
+	__decorateParam(0, _univerjs_core.IContextService),
+	__decorateParam(1, _univerjs_core.IUniverInstanceService),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService)
+], SlideRenderService);
+
+//#endregion
+//#region src/plugin.ts
+let UniverSlidesUIPlugin = class UniverSlidesUIPlugin extends _univerjs_core.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 } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SLIDES_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		(0, _univerjs_core.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(_univerjs_core.UniverInstanceType.UNIVER_SLIDE, m));
+		});
+		(0, _univerjs_core.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(_univerjs_core.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(_univerjs_core.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", _univerjs_core.UniverInstanceType.UNIVER_SLIDE);
+UniverSlidesUIPlugin = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(3, _univerjs_core.IUniverInstanceService),
+	__decorateParam(4, _univerjs_core.IConfigService)
+], UniverSlidesUIPlugin);
+
+//#endregion
+exports.ActivateSlidePageOperation = ActivateSlidePageOperation;
+exports.AppendSlideOperation = AppendSlideOperation;
+Object.defineProperty(exports, 'CanvasView', {
+  enumerable: true,
+  get: function () {
+    return CanvasView;
+  }
+});
+exports.DeleteSlideElementOperation = DeleteSlideElementOperation;
+exports.ISlideEditorBridgeService = ISlideEditorBridgeService;
+exports.InsertSlideFloatImageCommand = InsertSlideFloatImageCommand;
+exports.InsertSlideShapeEllipseCommand = InsertSlideShapeEllipseCommand;
+exports.InsertSlideShapeEllipseOperation = InsertSlideShapeEllipseOperation;
+exports.InsertSlideShapeRectangleCommand = InsertSlideShapeRectangleCommand;
+exports.InsertSlideShapeRectangleOperation = InsertSlideShapeRectangleOperation;
+exports.SHAPE_MENU_ID = SHAPE_MENU_ID;
+exports.SLIDES_IMAGE_MENU_ID = SLIDES_IMAGE_MENU_ID;
+exports.SLIDE_EDITOR_ID = SLIDE_EDITOR_ID;
+exports.SetSlidePageThumbOperation = SetSlidePageThumbOperation;
+exports.SlideAddTextCommand = SlideAddTextCommand;
+exports.SlideAddTextOperation = SlideAddTextOperation;
+Object.defineProperty(exports, 'SlideCanvasPopMangerService', {
+  enumerable: true,
+  get: function () {
+    return SlideCanvasPopMangerService;
+  }
+});
+exports.SlideEditorContainer = SlideEditorContainer;
+exports.SlideSideBar = SlideSideBar;
+Object.defineProperty(exports, 'SlidesUIController', {
+  enumerable: true,
+  get: function () {
+    return SlidesUIController;
+  }
+});
+exports.SlidesUIMenuSchema = menuSchema;
+Object.defineProperty(exports, 'UniverSlidesUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverSlidesUIPlugin;
+  }
+});
+exports.UpdateSlideElementOperation = UpdateSlideElementOperation;