@univerjs/slides-ui 0.2.4-alpha.0 → 0.2.4

package/lib/cjs/index.js

@@ -1,4 +1,4 @@
-"use strict";var w=Object.defineProperty;var A=(t,e,r)=>e in t?w(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var g=(t,e,r)=>A(t,typeof e!="symbol"?e+"":e,r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@univerjs/core"),h=require("@univerjs/ui"),d=require("react"),N=require("clsx"),L=require("@univerjs/design"),V=require("@univerjs/engine-render"),y=require("@univerjs/slides");var E={exports:{}},f={};/**
+"use strict";var N=Object.defineProperty;var L=(t,e,r)=>e in t?N(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r;var h=(t,e,r)=>L(t,typeof e!="symbol"?e+"":e,r);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@univerjs/core"),S=require("@wendellhu/redi"),O=require("@univerjs/ui"),v=require("@wendellhu/redi/react-bindings"),d=require("react"),q=require("clsx"),V=require("@univerjs/design"),$=require("@univerjs/engine-render"),U=require("@univerjs/slides");var j={exports:{}},g={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var $=d,q=Symbol.for("react.element"),F=Symbol.for("react.fragment"),M=Object.prototype.hasOwnProperty,W=$.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,G={key:!0,ref:!0,__self:!0,__source:!0};function B(t,e,r){var n,i={},a=null,c=null;r!==void 0&&(a=""+r),e.key!==void 0&&(a=""+e.key),e.ref!==void 0&&(c=e.ref);for(n in e)M.call(e,n)&&!G.hasOwnProperty(n)&&(i[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)i[n]===void 0&&(i[n]=e[n]);return{$$typeof:q,type:t,key:a,ref:c,props:i,_owner:W.current}}f.Fragment=F;f.jsx=B;f.jsxs=B;E.exports=f;var l=E.exports;const O={id:"slide.operation.activate-slide",type:s.CommandType.OPERATION,handler:(t,e)=>(t.get(y.CanvasView).activePage(e.id),!0)},U={id:"slide.operation.set-slide-page-thumb",type:s.CommandType.OPERATION,handler:t=>(t.get(y.CanvasView).createThumbs(),!0)},J="univer-slide-bar",Y="univer-slide-bar-content",z="univer-slide-bar-item",H="univer-slide-bar-box",K="univer-slide-bar-item-active",Q="univer-slide-add-button",u={slideBar:J,slideBarContent:Y,slideBarItem:z,slideBarBox:H,slideBarItemActive:K,slideAddButton:Q};function X(){const t=s.useDependency(s.IUniverInstanceService),e=s.useDependency(s.ICommandService),r=s.useDependency(V.IRenderManagerService),n=s.useDependency(y.CanvasView),i=d.useRef(null),a=h.useObservable(()=>t.getCurrentTypeOfUnit$(s.UniverInstanceType.UNIVER_SLIDE),void 0,void 0,[]),c=a==null?void 0:a.getPages(),S=a==null?void 0:a.getPageOrder();if(!c||!S)return null;const v=S.map(o=>c[o]),[p,j]=d.useState([]),[R,x]=d.useState(S[0]);d.useEffect(()=>{j(v.map(o=>d.createRef()))},[v]),d.useEffect(()=>{n.activePageId$.subscribe(o=>{x(o)})},[]),d.useEffect(()=>{p.forEach((o,m)=>{var b;if(o.current){const T=v[m];(b=r.getRenderById(T.id))==null||b.engine.setContainer(o.current)}}),p.length>0&&e.syncExecuteCommand(U.id)},[p]);const D=d.useCallback(o=>{e.syncExecuteCommand(O.id,{id:o})},[e]);return l.jsx("div",{className:u.slideBar,ref:i,children:l.jsx(L.Scrollbar,{children:l.jsx("div",{className:u.slideBarContent,children:v.map((o,m)=>l.jsxs("div",{className:N(u.slideBarItem,{[u.slideBarItemActive]:o.id===R}),onClick:()=>D(o.id),children:[l.jsx("span",{children:m+1}),l.jsx("div",{ref:p[m],className:u.slideBarBox})]},o.id))})})})}var Z=Object.defineProperty,k=Object.getOwnPropertyDescriptor,ee=(t,e,r,n)=>{for(var i=n>1?void 0:n?k(e,r):e,a=t.length-1,c;a>=0;a--)(c=t[a])&&(i=(n?c(e,r,i):c(i))||i);return n&&i&&Z(e,r,i),i},P=(t,e)=>(r,n)=>e(r,n,t);let I=class extends s.Disposable{constructor(t,e,r){super(),this._injector=t,this._uiPartsService=e,this._commandService=r,this._initCommands(),this._initUIComponents()}_initCommands(){[O,U].forEach(t=>this.disposeWithMe(this._commandService.registerCommand(t)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(h.BuiltInUIPart.LEFT_SIDEBAR,()=>s.connectInjector(X,this._injector)))}};I=ee([s.OnLifecycle(s.LifecycleStages.Ready,I),P(0,s.Inject(s.Injector)),P(1,h.IUIPartsService),P(2,s.ICommandService)],I);var te=Object.defineProperty,re=Object.getOwnPropertyDescriptor,ne=(t,e,r,n)=>{for(var i=n>1?void 0:n?re(e,r):e,a=t.length-1,c;a>=0;a--)(c=t[a])&&(i=(n?c(e,r,i):c(i))||i);return n&&i&&te(e,r,i),i},C=(t,e)=>(r,n)=>e(r,n,t);const ie="SLIDE_UI";var _;exports.UniverSlidesUIPlugin=(_=class extends s.Plugin{constructor(e,r,n){super(),this._injector=r,this._univerInstanceService=n}onStarting(e){[[I]].forEach(r=>e.add(r))}onRendered(){this._markSlideAsFocused()}_markSlideAsFocused(){const e=this._univerInstanceService;try{const r=e.getCurrentUnitForType(s.UniverInstanceType.UNIVER_SLIDE);e.focusUnit(r.getUnitId())}catch{}}},g(_,"pluginName",ie),g(_,"type",s.UniverInstanceType.UNIVER_SLIDE),_);exports.UniverSlidesUIPlugin=ne([C(1,s.Inject(s.Injector)),C(2,s.IUniverInstanceService)],exports.UniverSlidesUIPlugin);exports.ActivateSlidePageOperation=O;exports.SetSlidePageThumbOperation=U;
+ */var F=d,M=Symbol.for("react.element"),W=Symbol.for("react.fragment"),G=Object.prototype.hasOwnProperty,J=F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,Y={key:!0,ref:!0,__self:!0,__source:!0};function R(t,e,r){var n,i={},s=null,a=null;r!==void 0&&(s=""+r),e.key!==void 0&&(s=""+e.key),e.ref!==void 0&&(a=e.ref);for(n in e)G.call(e,n)&&!Y.hasOwnProperty(n)&&(i[n]=e[n]);if(t&&t.defaultProps)for(n in e=t.defaultProps,e)i[n]===void 0&&(i[n]=e[n]);return{$$typeof:M,type:t,key:s,ref:a,props:i,_owner:J.current}}g.Fragment=W;g.jsx=R;g.jsxs=R;j.exports=g;var l=j.exports;const b={id:"slide.operation.activate-slide",type:o.CommandType.OPERATION,handler:(t,e)=>(t.get(U.CanvasView).activePage(e.id),!0)},C={id:"slide.operation.set-slide-page-thumb",type:o.CommandType.OPERATION,handler:t=>(t.get(U.CanvasView).createThumbs(),!0)},z="univer-slide-bar",H="univer-slide-bar-content",K="univer-slide-bar-item",Q="univer-slide-bar-box",X="univer-slide-bar-item-active",Z="univer-slide-add-button",u={slideBar:z,slideBarContent:H,slideBarItem:K,slideBarBox:Q,slideBarItemActive:X,slideAddButton:Z};function k(){const t=v.useDependency(o.IUniverInstanceService),e=v.useDependency(o.ICommandService),r=v.useDependency($.IRenderManagerService),n=v.useDependency(U.CanvasView),i=d.useRef(null),s=O.useObservable(()=>t.getCurrentTypeOfUnit$(o.UniverInstanceType.UNIVER_SLIDE),void 0,void 0,[]),a=s==null?void 0:s.getPages(),P=s==null?void 0:s.getPageOrder();if(!a||!P)return null;const p=P.map(c=>a[c]),[m,x]=d.useState([]),[D,T]=d.useState(P[0]);d.useEffect(()=>{x(p.map(c=>d.createRef()))},[p]),d.useEffect(()=>{n.activePageId$.subscribe(c=>{T(c)})},[]),d.useEffect(()=>{m.forEach((c,_)=>{var E;if(c.current){const A=p[_];(E=r.getRenderById(A.id))==null||E.engine.setContainer(c.current)}}),m.length>0&&e.syncExecuteCommand(C.id)},[m]);const w=d.useCallback(c=>{e.syncExecuteCommand(b.id,{id:c})},[e]);return l.jsx("div",{className:u.slideBar,ref:i,children:l.jsx(V.Scrollbar,{children:l.jsx("div",{className:u.slideBarContent,children:p.map((c,_)=>l.jsxs("div",{className:q(u.slideBarItem,{[u.slideBarItemActive]:c.id===D}),onClick:()=>w(c.id),children:[l.jsx("span",{children:_+1}),l.jsx("div",{ref:m[_],className:u.slideBarBox})]},c.id))})})})}var ee=Object.defineProperty,te=Object.getOwnPropertyDescriptor,re=(t,e,r,n)=>{for(var i=n>1?void 0:n?te(e,r):e,s=t.length-1,a;s>=0;s--)(a=t[s])&&(i=(n?a(e,r,i):a(i))||i);return n&&i&&ee(e,r,i),i},y=(t,e)=>(r,n)=>e(r,n,t);let f=class extends o.Disposable{constructor(t,e,r){super(),this._injector=t,this._uiPartsService=e,this._commandService=r,this._initCommands(),this._initUIComponents()}_initCommands(){[b,C].forEach(t=>this.disposeWithMe(this._commandService.registerCommand(t)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(O.BuiltInUIPart.LEFT_SIDEBAR,()=>v.connectInjector(k,this._injector)))}};f=re([o.OnLifecycle(o.LifecycleStages.Ready,f),y(0,S.Inject(S.Injector)),y(1,O.IUIPartsService),y(2,o.ICommandService)],f);var ne=Object.defineProperty,ie=Object.getOwnPropertyDescriptor,se=(t,e,r,n)=>{for(var i=n>1?void 0:n?ie(e,r):e,s=t.length-1,a;s>=0;s--)(a=t[s])&&(i=(n?a(e,r,i):a(i))||i);return n&&i&&ne(e,r,i),i},B=(t,e)=>(r,n)=>e(r,n,t);const ae="SLIDE_UI";var I;exports.UniverSlidesUIPlugin=(I=class extends o.Plugin{constructor(e,r,n){super(),this._injector=r,this._univerInstanceService=n}onStarting(e){[[f]].forEach(r=>e.add(r))}onRendered(){this._markSlideAsFocused()}_markSlideAsFocused(){const e=this._univerInstanceService;try{const r=e.getCurrentUnitForType(o.UniverInstanceType.UNIVER_SLIDE);e.focusUnit(r.getUnitId())}catch{}}},h(I,"pluginName",ae),h(I,"type",o.UniverInstanceType.UNIVER_SLIDE),I);exports.UniverSlidesUIPlugin=se([B(1,S.Inject(S.Injector)),B(2,o.IUniverInstanceService)],exports.UniverSlidesUIPlugin);exports.ActivateSlidePageOperation=b;exports.SetSlidePageThumbOperation=C;

package/lib/es/index.js

@@ -1,8 +1,10 @@
 var W = Object.defineProperty;
 var q = (t, e, r) => e in t ? W(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var h = (t, e, r) => q(t, typeof e != "symbol" ? e + "" : e, r);
-import { CommandType as x, useDependency as u, IUniverInstanceService as C, ICommandService as R, UniverInstanceType as P, Disposable as G, connectInjector as J, OnLifecycle as Y, LifecycleStages as z, Inject as j, Injector as U, Plugin as H } from "@univerjs/core";
-import { useObservable as K, BuiltInUIPart as Q, IUIPartsService as X } from "@univerjs/ui";
+import { CommandType as x, IUniverInstanceService as C, ICommandService as R, UniverInstanceType as P, Disposable as G, OnLifecycle as J, LifecycleStages as Y, Plugin as z } from "@univerjs/core";
+import { Inject as j, Injector as U } from "@wendellhu/redi";
+import { useObservable as H, BuiltInUIPart as K, IUIPartsService as Q } from "@univerjs/ui";
+import { useDependency as u, connectInjector as X } from "@wendellhu/redi/react-bindings";
 import D, { useRef as Z, useState as B, useEffect as S, useCallback as k } from "react";
 import ee from "clsx";
 import { Scrollbar as te } from "@univerjs/design";
@@ -18,13 +20,13 @@ var N = { exports: {} }, f = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ie = D, se = Symbol.for("react.element"), ne = Symbol.for("react.fragment"), ae = Object.prototype.hasOwnProperty, oe = ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, ce = { key: !0, ref: !0, __self: !0, __source: !0 };
+var ie = D, se = Symbol.for("react.element"), ne = Symbol.for("react.fragment"), oe = Object.prototype.hasOwnProperty, ae = ie.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, ce = { key: !0, ref: !0, __self: !0, __source: !0 };
 function w(t, e, r) {
-  var i, s = {}, n = null, a = null;
-  r !== void 0 && (n = "" + r), e.key !== void 0 && (n = "" + e.key), e.ref !== void 0 && (a = e.ref);
-  for (i in e) ae.call(e, i) && !ce.hasOwnProperty(i) && (s[i] = e[i]);
+  var i, s = {}, n = null, o = null;
+  r !== void 0 && (n = "" + r), e.key !== void 0 && (n = "" + e.key), e.ref !== void 0 && (o = e.ref);
+  for (i in e) oe.call(e, i) && !ce.hasOwnProperty(i) && (s[i] = e[i]);
   if (t && t.defaultProps) for (i in e = t.defaultProps, e) s[i] === void 0 && (s[i] = e[i]);
-  return { $$typeof: se, type: t, key: n, ref: a, props: s, _owner: oe.current };
+  return { $$typeof: se, type: t, key: n, ref: o, props: s, _owner: ae.current };
 }
 f.Fragment = ne;
 f.jsx = w;
@@ -48,51 +50,51 @@ const A = {
   slideAddButton: pe
 };
 function _e() {
-  const t = u(C), e = u(R), r = u(re), i = u(y), s = Z(null), n = K(
+  const t = u(C), e = u(R), r = u(re), i = u(y), s = Z(null), n = H(
     () => t.getCurrentTypeOfUnit$(P.UNIVER_SLIDE),
     void 0,
     void 0,
     []
-  ), a = n == null ? void 0 : n.getPages(), I = n == null ? void 0 : n.getPageOrder();
-  if (!a || !I)
+  ), o = n == null ? void 0 : n.getPages(), I = n == null ? void 0 : n.getPageOrder();
+  if (!o || !I)
     return null;
-  const l = I.map((o) => a[o]), [v, T] = B([]), [$, V] = B(I[0]);
+  const l = I.map((a) => o[a]), [v, T] = B([]), [$, V] = B(I[0]);
   S(() => {
-    T(l.map((o) => D.createRef()));
+    T(l.map((a) => D.createRef()));
   }, [l]), S(() => {
-    i.activePageId$.subscribe((o) => {
-      V(o);
+    i.activePageId$.subscribe((a) => {
+      V(a);
     });
   }, []), S(() => {
-    v.forEach((o, m) => {
+    v.forEach((a, m) => {
       var O;
-      if (o.current) {
+      if (a.current) {
         const M = l[m];
-        (O = r.getRenderById(M.id)) == null || O.engine.setContainer(o.current);
+        (O = r.getRenderById(M.id)) == null || O.engine.setContainer(a.current);
       }
     }), v.length > 0 && e.syncExecuteCommand(L.id);
   }, [v]);
-  const F = k((o) => {
-    e.syncExecuteCommand(A.id, { id: o });
+  const F = k((a) => {
+    e.syncExecuteCommand(A.id, { id: a });
   }, [e]);
-  return /* @__PURE__ */ c.jsx("div", { className: d.slideBar, ref: s, children: /* @__PURE__ */ c.jsx(te, { children: /* @__PURE__ */ c.jsx("div", { className: d.slideBarContent, children: l.map((o, m) => /* @__PURE__ */ c.jsxs(
+  return /* @__PURE__ */ c.jsx("div", { className: d.slideBar, ref: s, children: /* @__PURE__ */ c.jsx(te, { children: /* @__PURE__ */ c.jsx("div", { className: d.slideBarContent, children: l.map((a, m) => /* @__PURE__ */ c.jsxs(
     "div",
     {
       className: ee(d.slideBarItem, {
-        [d.slideBarItemActive]: o.id === $
+        [d.slideBarItemActive]: a.id === $
       }),
-      onClick: () => F(o.id),
+      onClick: () => F(a.id),
       children: [
         /* @__PURE__ */ c.jsx("span", { children: m + 1 }),
         /* @__PURE__ */ c.jsx("div", { ref: v[m], className: d.slideBarBox })
       ]
     },
-    o.id
+    a.id
   )) }) }) });
 }
 var fe = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, he = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? Ie(e, r) : e, n = t.length - 1, a; n >= 0; n--)
-    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  for (var s = i > 1 ? void 0 : i ? Ie(e, r) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
   return i && s && fe(e, r, s), s;
 }, g = (t, e) => (r, i) => e(r, i, t);
 let _ = class extends G {
@@ -107,24 +109,24 @@ let _ = class extends G {
   }
   _initUIComponents() {
     this.disposeWithMe(
-      this._uiPartsService.registerComponent(Q.LEFT_SIDEBAR, () => J(_e, this._injector))
+      this._uiPartsService.registerComponent(K.LEFT_SIDEBAR, () => X(_e, this._injector))
     );
   }
 };
 _ = he([
-  Y(z.Ready, _),
+  J(Y.Ready, _),
   g(0, j(U)),
-  g(1, X),
+  g(1, Q),
   g(2, R)
 ], _);
 var Se = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, Pe = (t, e, r, i) => {
-  for (var s = i > 1 ? void 0 : i ? ge(e, r) : e, n = t.length - 1, a; n >= 0; n--)
-    (a = t[n]) && (s = (i ? a(e, r, s) : a(s)) || s);
+  for (var s = i > 1 ? void 0 : i ? ge(e, r) : e, n = t.length - 1, o; n >= 0; n--)
+    (o = t[n]) && (s = (i ? o(e, r, s) : o(s)) || s);
   return i && s && Se(e, r, s), s;
 }, E = (t, e) => (r, i) => e(r, i, t);
 const ye = "SLIDE_UI";
 var p;
-let b = (p = class extends H {
+let b = (p = class extends z {
   constructor(t, e, r) {
     super(), this._injector = e, this._univerInstanceService = r;
   }

package/lib/types/controllers/slide-ui.controller.d.ts

@@ -1,5 +1,6 @@
-import { Disposable, ICommandService, Injector } from '@univerjs/core';
+import { Disposable, ICommandService } from '@univerjs/core';
 import { IUIPartsService } from '@univerjs/ui';
+import { Injector } from '@wendellhu/redi';
 
 /**
  * This controller registers UI parts of slide workbench to the base-ui workbench.

package/lib/types/slides-ui-plugin.d.ts

@@ -1,4 +1,5 @@
-import { Injector, IUniverInstanceService, Plugin, UniverInstanceType } from '@univerjs/core';
+import { IUniverInstanceService, Plugin, UniverInstanceType } from '@univerjs/core';
+import { Injector } from '@wendellhu/redi';
 
 export declare const SLIDE_UI_PLUGIN_NAME = "SLIDE_UI";
 export declare class UniverSlidesUIPlugin extends Plugin {

package/lib/umd/index.js

@@ -1,4 +1,4 @@
-(function(r,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("@univerjs/core"),require("@univerjs/ui"),require("react"),require("clsx"),require("@univerjs/design"),require("@univerjs/engine-render"),require("@univerjs/slides")):typeof define=="function"&&define.amd?define(["exports","@univerjs/core","@univerjs/ui","react","clsx","@univerjs/design","@univerjs/engine-render","@univerjs/slides"],n):(r=typeof globalThis<"u"?globalThis:r||self,n(r.UniverSlidesUi={},r.UniverCore,r.UniverUi,r.React,r.clsx,r.UniverDesign,r.UniverEngineRender,r.UniverSlides))})(this,function(r,n,l,v,x,b,D,g){"use strict";var k=Object.defineProperty;var $=(r,n,l)=>n in r?k(r,n,{enumerable:!0,configurable:!0,writable:!0,value:l}):r[n]=l;var B=(r,n,l)=>$(r,typeof n!="symbol"?n+"":n,l);var I;var C={exports:{}},m={};/**
+(function(t,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("@univerjs/core"),require("@wendellhu/redi"),require("@univerjs/ui"),require("@wendellhu/redi/react-bindings"),require("react"),require("clsx"),require("@univerjs/design"),require("@univerjs/engine-render"),require("@univerjs/slides")):typeof define=="function"&&define.amd?define(["exports","@univerjs/core","@wendellhu/redi","@univerjs/ui","@wendellhu/redi/react-bindings","react","clsx","@univerjs/design","@univerjs/engine-render","@univerjs/slides"],s):(t=typeof globalThis<"u"?globalThis:t||self,s(t.UniverSlidesUi={},t.UniverCore,t["@wendellhu/redi"],t.UniverUi,t["@wendellhu/redi/react-bindings"],t.React,t.clsx,t.UniverDesign,t.UniverEngineRender,t.UniverSlides))})(this,function(t,s,l,U,p,v,w,D,T,y){"use strict";var ee=Object.defineProperty;var ne=(t,s,l)=>s in t?ee(t,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[s]=l;var B=(t,s,l)=>ne(t,typeof s!="symbol"?s+"":s,l);var _;var E={exports:{}},f={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,4 +6,4 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var T=v,A=Symbol.for("react.element"),w=Symbol.for("react.fragment"),N=Object.prototype.hasOwnProperty,L=T.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,V={key:!0,ref:!0,__self:!0,__source:!0};function O(s,e,t){var i,a={},d=null,c=null;t!==void 0&&(d=""+t),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(c=e.ref);for(i in e)N.call(e,i)&&!V.hasOwnProperty(i)&&(a[i]=e[i]);if(s&&s.defaultProps)for(i in e=s.defaultProps,e)a[i]===void 0&&(a[i]=e[i]);return{$$typeof:A,type:s,key:d,ref:c,props:a,_owner:L.current}}m.Fragment=w,m.jsx=O,m.jsxs=O,C.exports=m;var u=C.exports;const P={id:"slide.operation.activate-slide",type:n.CommandType.OPERATION,handler:(s,e)=>(s.get(g.CanvasView).activePage(e.id),!0)},U={id:"slide.operation.set-slide-page-thumb",type:n.CommandType.OPERATION,handler:s=>(s.get(g.CanvasView).createThumbs(),!0)},p={slideBar:"univer-slide-bar",slideBarContent:"univer-slide-bar-content",slideBarItem:"univer-slide-bar-item",slideBarBox:"univer-slide-bar-box",slideBarItemActive:"univer-slide-bar-item-active",slideAddButton:"univer-slide-add-button"};function F(){const s=n.useDependency(n.IUniverInstanceService),e=n.useDependency(n.ICommandService),t=n.useDependency(D.IRenderManagerService),i=n.useDependency(g.CanvasView),a=v.useRef(null),d=l.useObservable(()=>s.getCurrentTypeOfUnit$(n.UniverInstanceType.UNIVER_SLIDE),void 0,void 0,[]),c=d==null?void 0:d.getPages(),j=d==null?void 0:d.getPageOrder();if(!c||!j)return null;const _=j.map(o=>c[o]),[S,H]=v.useState([]),[K,Q]=v.useState(j[0]);v.useEffect(()=>{H(_.map(o=>v.createRef()))},[_]),v.useEffect(()=>{i.activePageId$.subscribe(o=>{Q(o)})},[]),v.useEffect(()=>{S.forEach((o,h)=>{var R;if(o.current){const Z=_[h];(R=t.getRenderById(Z.id))==null||R.engine.setContainer(o.current)}}),S.length>0&&e.syncExecuteCommand(U.id)},[S]);const X=v.useCallback(o=>{e.syncExecuteCommand(P.id,{id:o})},[e]);return u.jsx("div",{className:p.slideBar,ref:a,children:u.jsx(b.Scrollbar,{children:u.jsx("div",{className:p.slideBarContent,children:_.map((o,h)=>u.jsxs("div",{className:x(p.slideBarItem,{[p.slideBarItemActive]:o.id===K}),onClick:()=>X(o.id),children:[u.jsx("span",{children:h+1}),u.jsx("div",{ref:S[h],className:p.slideBarBox})]},o.id))})})})}var M=Object.defineProperty,W=Object.getOwnPropertyDescriptor,G=(s,e,t,i)=>{for(var a=i>1?void 0:i?W(e,t):e,d=s.length-1,c;d>=0;d--)(c=s[d])&&(a=(i?c(e,t,a):c(a))||a);return i&&a&&M(e,t,a),a},y=(s,e)=>(t,i)=>e(t,i,s);let f=class extends n.Disposable{constructor(s,e,t){super(),this._injector=s,this._uiPartsService=e,this._commandService=t,this._initCommands(),this._initUIComponents()}_initCommands(){[P,U].forEach(s=>this.disposeWithMe(this._commandService.registerCommand(s)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(l.BuiltInUIPart.LEFT_SIDEBAR,()=>n.connectInjector(F,this._injector)))}};f=G([n.OnLifecycle(n.LifecycleStages.Ready,f),y(0,n.Inject(n.Injector)),y(1,l.IUIPartsService),y(2,n.ICommandService)],f);var J=Object.defineProperty,Y=Object.getOwnPropertyDescriptor,q=(s,e,t,i)=>{for(var a=i>1?void 0:i?Y(e,t):e,d=s.length-1,c;d>=0;d--)(c=s[d])&&(a=(i?c(e,t,a):c(a))||a);return i&&a&&J(e,t,a),a},E=(s,e)=>(t,i)=>e(t,i,s);const z="SLIDE_UI";r.UniverSlidesUIPlugin=(I=class extends n.Plugin{constructor(e,t,i){super(),this._injector=t,this._univerInstanceService=i}onStarting(e){[[f]].forEach(t=>e.add(t))}onRendered(){this._markSlideAsFocused()}_markSlideAsFocused(){const e=this._univerInstanceService;try{const t=e.getCurrentUnitForType(n.UniverInstanceType.UNIVER_SLIDE);e.focusUnit(t.getUnitId())}catch{}}},B(I,"pluginName",z),B(I,"type",n.UniverInstanceType.UNIVER_SLIDE),I),r.UniverSlidesUIPlugin=q([E(1,n.Inject(n.Injector)),E(2,n.IUniverInstanceService)],r.UniverSlidesUIPlugin),r.ActivateSlidePageOperation=P,r.SetSlidePageThumbOperation=U,Object.defineProperty(r,Symbol.toStringTag,{value:"Module"})});
+ */var A=v,N=Symbol.for("react.element"),L=Symbol.for("react.fragment"),V=Object.prototype.hasOwnProperty,F=A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,M={key:!0,ref:!0,__self:!0,__source:!0};function R(r,e,i){var n,a={},d=null,c=null;i!==void 0&&(d=""+i),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(c=e.ref);for(n in e)V.call(e,n)&&!M.hasOwnProperty(n)&&(a[n]=e[n]);if(r&&r.defaultProps)for(n in e=r.defaultProps,e)a[n]===void 0&&(a[n]=e[n]);return{$$typeof:N,type:r,key:d,ref:c,props:a,_owner:F.current}}f.Fragment=L,f.jsx=R,f.jsxs=R,E.exports=f;var u=E.exports;const g={id:"slide.operation.activate-slide",type:s.CommandType.OPERATION,handler:(r,e)=>(r.get(y.CanvasView).activePage(e.id),!0)},j={id:"slide.operation.set-slide-page-thumb",type:s.CommandType.OPERATION,handler:r=>(r.get(y.CanvasView).createThumbs(),!0)},m={slideBar:"univer-slide-bar",slideBarContent:"univer-slide-bar-content",slideBarItem:"univer-slide-bar-item",slideBarBox:"univer-slide-bar-box",slideBarItemActive:"univer-slide-bar-item-active",slideAddButton:"univer-slide-add-button"};function W(){const r=p.useDependency(s.IUniverInstanceService),e=p.useDependency(s.ICommandService),i=p.useDependency(T.IRenderManagerService),n=p.useDependency(y.CanvasView),a=v.useRef(null),d=U.useObservable(()=>r.getCurrentTypeOfUnit$(s.UniverInstanceType.UNIVER_SLIDE),void 0,void 0,[]),c=d==null?void 0:d.getPages(),O=d==null?void 0:d.getPageOrder();if(!c||!O)return null;const S=O.map(o=>c[o]),[h,Q]=v.useState([]),[X,Z]=v.useState(O[0]);v.useEffect(()=>{Q(S.map(o=>v.createRef()))},[S]),v.useEffect(()=>{n.activePageId$.subscribe(o=>{Z(o)})},[]),v.useEffect(()=>{h.forEach((o,P)=>{var b;if(o.current){const $=S[P];(b=i.getRenderById($.id))==null||b.engine.setContainer(o.current)}}),h.length>0&&e.syncExecuteCommand(j.id)},[h]);const k=v.useCallback(o=>{e.syncExecuteCommand(g.id,{id:o})},[e]);return u.jsx("div",{className:m.slideBar,ref:a,children:u.jsx(D.Scrollbar,{children:u.jsx("div",{className:m.slideBarContent,children:S.map((o,P)=>u.jsxs("div",{className:w(m.slideBarItem,{[m.slideBarItemActive]:o.id===X}),onClick:()=>k(o.id),children:[u.jsx("span",{children:P+1}),u.jsx("div",{ref:h[P],className:m.slideBarBox})]},o.id))})})})}var q=Object.defineProperty,G=Object.getOwnPropertyDescriptor,J=(r,e,i,n)=>{for(var a=n>1?void 0:n?G(e,i):e,d=r.length-1,c;d>=0;d--)(c=r[d])&&(a=(n?c(e,i,a):c(a))||a);return n&&a&&q(e,i,a),a},C=(r,e)=>(i,n)=>e(i,n,r);let I=class extends s.Disposable{constructor(r,e,i){super(),this._injector=r,this._uiPartsService=e,this._commandService=i,this._initCommands(),this._initUIComponents()}_initCommands(){[g,j].forEach(r=>this.disposeWithMe(this._commandService.registerCommand(r)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(U.BuiltInUIPart.LEFT_SIDEBAR,()=>p.connectInjector(W,this._injector)))}};I=J([s.OnLifecycle(s.LifecycleStages.Ready,I),C(0,l.Inject(l.Injector)),C(1,U.IUIPartsService),C(2,s.ICommandService)],I);var Y=Object.defineProperty,z=Object.getOwnPropertyDescriptor,H=(r,e,i,n)=>{for(var a=n>1?void 0:n?z(e,i):e,d=r.length-1,c;d>=0;d--)(c=r[d])&&(a=(n?c(e,i,a):c(a))||a);return n&&a&&Y(e,i,a),a},x=(r,e)=>(i,n)=>e(i,n,r);const K="SLIDE_UI";t.UniverSlidesUIPlugin=(_=class extends s.Plugin{constructor(e,i,n){super(),this._injector=i,this._univerInstanceService=n}onStarting(e){[[I]].forEach(i=>e.add(i))}onRendered(){this._markSlideAsFocused()}_markSlideAsFocused(){const e=this._univerInstanceService;try{const i=e.getCurrentUnitForType(s.UniverInstanceType.UNIVER_SLIDE);e.focusUnit(i.getUnitId())}catch{}}},B(_,"pluginName",K),B(_,"type",s.UniverInstanceType.UNIVER_SLIDE),_),t.UniverSlidesUIPlugin=H([x(1,l.Inject(l.Injector)),x(2,s.IUniverInstanceService)],t.UniverSlidesUIPlugin),t.ActivateSlidePageOperation=g,t.SetSlidePageThumbOperation=j,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@univerjs/slides-ui",
-  "version": "0.2.4-alpha.0",
+  "version": "0.2.4",
   "private": false,
   "description": "Univer normal ui-plugin-slides",
   "author": "DreamNum <developer@univer.ai>",
@@ -50,16 +50,18 @@
     "lib"
   ],
   "peerDependencies": {
+    "@wendellhu/redi": "0.16.0",
     "clsx": ">=2.0.0",
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "@univerjs/core": "0.2.4-alpha.0",
-    "@univerjs/design": "0.2.4-alpha.0",
-    "@univerjs/engine-render": "0.2.4-alpha.0",
-    "@univerjs/slides": "0.2.4-alpha.0",
-    "@univerjs/ui": "0.2.4-alpha.0"
+    "@univerjs/core": "0.2.4",
+    "@univerjs/design": "0.2.4",
+    "@univerjs/engine-render": "0.2.4",
+    "@univerjs/slides": "0.2.4",
+    "@univerjs/ui": "0.2.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
+    "@wendellhu/redi": "0.16.0",
     "clsx": "^2.1.1",
     "less": "^4.2.0",
     "react": "18.3.1",
@@ -67,12 +69,12 @@
     "typescript": "^5.5.3",
     "vite": "^5.3.4",
     "vitest": "^2.0.3",
-    "@univerjs/core": "0.2.4-alpha.0",
-    "@univerjs/engine-render": "0.2.4-alpha.0",
-    "@univerjs/shared": "0.2.4-alpha.0",
-    "@univerjs/design": "0.2.4-alpha.0",
-    "@univerjs/slides": "0.2.4-alpha.0",
-    "@univerjs/ui": "0.2.4-alpha.0"
+    "@univerjs/design": "0.2.4",
+    "@univerjs/core": "0.2.4",
+    "@univerjs/shared": "0.2.4",
+    "@univerjs/engine-render": "0.2.4",
+    "@univerjs/slides": "0.2.4",
+    "@univerjs/ui": "0.2.4"
   },
   "univerSpace": {
     ".": {