@univerjs/slides-ui 0.1.17 → 0.2.0

package/lib/cjs/index.js

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

package/lib/index.css

@@ -1 +1 @@
-.univer-slide-bar{display:flex;flex-direction:column;height:100%;background:#f5f7f9;border-right:1px solid #eaecf0;width:260px;overflow-x:hidden;overflow-y:auto}.univer-slide-bar .univer-slide-bar-content{padding:0 15px}.univer-slide-bar .univer-slide-bar-content::-webkit-scrollbar{width:5px}.univer-slide-bar .univer-slide-bar-content::-webkit-scrollbar-thumb{background:#eaecf0;border-radius:5px}.univer-slide-bar .univer-slide-bar-content::-webkit-scrollbar-track{background:#f5f7f9}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item{display:flex;margin:15px 0}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item span{width:15px;font-size:12px}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box{position:relative;width:212px;height:120px;margin-left:5px;background:#fff;border:2px solid #c0c0c0}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box:hover{border:2px solid #d66a2b}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active span{color:#d66a2b}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active .univer-slide-bar-box{border:2px solid #d66a2b}.univer-slide-bar .univer-slide-add-button{padding:10px 0;text-align:center}.univer-slide-bar .univer-slide-add-button button{width:45px;height:auto;font-size:24px;line-height:1;border-radius:10px}
+.univer-slide-bar{display:flex;flex-direction:column;height:100%;background:#f5f7f9;border-right:1px solid #eaecf0;width:260px;overflow-x:hidden;overflow-y:auto}.univer-slide-bar .univer-slide-bar-content{padding:0 15px}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item{display:flex;margin:15px 0}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item span{width:15px;font-size:12px}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box{position:relative;width:212px;height:120px;margin-left:5px;background:#fff;border:2px solid #c0c0c0}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item .univer-slide-bar-box:hover{border:2px solid #d66a2b}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active span{color:#d66a2b}.univer-slide-bar .univer-slide-bar-content .univer-slide-bar-item-active .univer-slide-bar-box{border:2px solid #d66a2b}.univer-slide-bar .univer-slide-add-button{padding:10px 0;text-align:center}.univer-slide-bar .univer-slide-add-button button{width:45px;height:auto;font-size:24px;line-height:1;border-radius:10px}

package/lib/types/index.d.ts

@@ -13,4 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export * from './slides-ui-plugin';
+export { UniverSlidesUIPlugin } from './slides-ui-plugin';
+export { ActivateSlidePageOperation } from './commands/operations/activate.operation';
+export { SetSlidePageThumbOperation } from './commands/operations/set-thumb.operation';

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

@@ -1,14 +1,13 @@
-import { IUniverInstanceService, LocaleService, Plugin, UniverInstanceType } from '@univerjs/core';
+import { IUniverInstanceService, Plugin, UniverInstanceType } from '@univerjs/core';
 import { Injector } from '@wendellhu/redi';
 
-export declare const SLIDE_UI_PLUGIN_NAME = "slides-ui";
+export declare const SLIDE_UI_PLUGIN_NAME = "SLIDE_UI";
 export declare class UniverSlidesUIPlugin extends Plugin {
     readonly _injector: Injector;
-    private readonly _localeService;
     private readonly _univerInstanceService;
     static pluginName: string;
     static type: UniverInstanceType;
-    constructor(_config: unknown, _injector: Injector, _localeService: LocaleService, _univerInstanceService: IUniverInstanceService);
+    constructor(_config: unknown, _injector: Injector, _univerInstanceService: IUniverInstanceService);
     onStarting(injector: Injector): void;
     onRendered(): void;
     private _markSlideAsFocused;

package/lib/umd/index.js

@@ -1,4 +1,4 @@
-(function(a,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("@univerjs/core"),require("@wendellhu/redi"),require("@univerjs/ui"),require("@wendellhu/redi/react-bindings"),require("react"),require("clsx"),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/engine-render","@univerjs/slides"],t):(a=typeof globalThis<"u"?globalThis:a||self,t(a.UniverSlidesUi={},a.UniverCore,a["@wendellhu/redi"],a.UniverUi,a["@wendellhu/redi/react-bindings"],a.React,a.clsx,a.UniverEngineRender,a.UniverSlides))})(this,function(a,t,o,y,_,u,w,T,B){"use strict";var X=Object.defineProperty;var Z=(a,t,o)=>t in a?X(a,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[t]=o;var g=(a,t,o)=>Z(a,typeof t!="symbol"?t+"":t,o);var h;var C={exports:{}},f={};/**
+(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 D=u,N=Symbol.for("react.element"),A=Symbol.for("react.fragment"),L=Object.prototype.hasOwnProperty,V=D.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,M={key:!0,ref:!0,__self:!0,__source:!0};function E(s,e,r){var i,n={},d=null,c=null;r!==void 0&&(d=""+r),e.key!==void 0&&(d=""+e.key),e.ref!==void 0&&(c=e.ref);for(i in e)L.call(e,i)&&!M.hasOwnProperty(i)&&(n[i]=e[i]);if(s&&s.defaultProps)for(i in e=s.defaultProps,e)n[i]===void 0&&(n[i]=e[i]);return{$$typeof:N,type:s,key:d,ref:c,props:n,_owner:V.current}}f.Fragment=A,f.jsx=E,f.jsxs=E,C.exports=f;var v=C.exports;const O={id:"slide.operation.activate-slide",type:t.CommandType.OPERATION,handler:(s,e)=>(s.get(B.CanvasView).activePage(e.id),!0)},R={id:"slide.operation.set-slide-page-thumb",type:t.CommandType.OPERATION,handler:s=>(s.get(B.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 F(){const s=_.useDependency(t.IUniverInstanceService),e=_.useDependency(t.ICommandService),r=_.useDependency(T.IRenderManagerService),i=u.useRef(null),n=y.useObservable(()=>s.getCurrentTypeOfUnit$(t.UniverInstanceType.UNIVER_SLIDE),void 0,void 0,[]),d=n==null?void 0:n.getPages(),c=n==null?void 0:n.getPageOrder();if(!d||!c)return null;const S=c.map(l=>d[l]),[U,H]=u.useState([]);u.useEffect(()=>{H(S.map(l=>u.createRef()))},[S.length]),u.useEffect(()=>{U.forEach((l,p)=>{var b;if(l.current){const Q=S[p];(b=r.getRenderById(Q.id))==null||b.engine.setContainer(l.current)}}),U.length>0&&e.syncExecuteCommand(R.id)},[U]);const K=u.useCallback(l=>{e.syncExecuteCommand(O.id,{id:l})},[e]);return v.jsx("div",{className:m.slideBar,ref:i,children:v.jsx("div",{className:m.slideBarContent,children:S.map((l,p)=>v.jsxs("div",{className:w(m.slideBarItem,{[m.slideBarItemActive]:!1}),onClick:()=>K(l.id),children:[v.jsx("span",{children:p+1}),v.jsx("div",{ref:U[p],className:m.slideBarBox})]},p))})})}var q=Object.defineProperty,W=Object.getOwnPropertyDescriptor,G=(s,e,r,i)=>{for(var n=i>1?void 0:i?W(e,r):e,d=s.length-1,c;d>=0;d--)(c=s[d])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&q(e,r,n),n},P=(s,e)=>(r,i)=>e(r,i,s);let I=class extends t.Disposable{constructor(s,e,r){super(),this._injector=s,this._uiPartsService=e,this._commandService=r,this._initCommands(),this._initUIComponents()}_initCommands(){[O,R].forEach(s=>this.disposeWithMe(this._commandService.registerCommand(s)))}_initUIComponents(){this.disposeWithMe(this._uiPartsService.registerComponent(y.BuiltInUIPart.LEFT_SIDEBAR,()=>_.connectInjector(F,this._injector)))}};I=G([t.OnLifecycle(t.LifecycleStages.Ready,I),P(0,o.Inject(o.Injector)),P(1,y.IUIPartsService),P(2,t.ICommandService)],I);var J=Object.defineProperty,Y=Object.getOwnPropertyDescriptor,z=(s,e,r,i)=>{for(var n=i>1?void 0:i?Y(e,r):e,d=s.length-1,c;d>=0;d--)(c=s[d])&&(n=(i?c(e,r,n):c(n))||n);return i&&n&&J(e,r,n),n},j=(s,e)=>(r,i)=>e(r,i,s);const x="slides-ui";a.UniverSlidesUIPlugin=(h=class extends t.Plugin{constructor(e,r,i,n){super(),this._injector=r,this._localeService=i,this._univerInstanceService=n}onStarting(e){[[I]].forEach(r=>e.add(r))}onRendered(){this._markSlideAsFocused()}_markSlideAsFocused(){const e=this._univerInstanceService;try{const r=e.getCurrentUnitForType(t.UniverInstanceType.UNIVER_SLIDE);e.focusUnit(r.getUnitId())}catch{}}},g(h,"pluginName",x),g(h,"type",t.UniverInstanceType.UNIVER_SLIDE),h),a.UniverSlidesUIPlugin=z([j(1,o.Inject(o.Injector)),j(2,o.Inject(t.LocaleService)),j(3,t.IUniverInstanceService)],a.UniverSlidesUIPlugin),a.SLIDE_UI_PLUGIN_NAME=x,Object.defineProperty(a,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.1.17",
+  "version": "0.2.0",
   "private": false,
   "description": "Univer normal ui-plugin-slides",
   "author": "DreamNum <developer@univer.ai>",
@@ -50,30 +50,31 @@
     "lib"
   ],
   "peerDependencies": {
-    "@wendellhu/redi": "0.15.4",
+    "@wendellhu/redi": "0.15.5",
     "clsx": ">=2.0.0",
     "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "@univerjs/core": "0.1.17",
-    "@univerjs/engine-render": "0.1.17",
-    "@univerjs/slides": "0.1.17",
-    "@univerjs/ui": "0.1.17"
+    "@univerjs/core": "0.2.0",
+    "@univerjs/design": "0.2.0",
+    "@univerjs/engine-render": "0.2.0",
+    "@univerjs/ui": "0.2.0",
+    "@univerjs/slides": "0.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
-    "@wendellhu/redi": "0.15.4",
+    "@wendellhu/redi": "0.15.5",
     "clsx": "^2.1.1",
     "less": "^4.2.0",
     "react": "18.3.1",
     "rxjs": "^7.8.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.3.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.3.3",
     "vitest": "^1.6.0",
-    "@univerjs/design": "0.1.17",
-    "@univerjs/engine-render": "0.1.17",
-    "@univerjs/ui": "0.1.17",
-    "@univerjs/slides": "0.1.17",
-    "@univerjs/shared": "0.1.17",
-    "@univerjs/core": "0.1.17"
+    "@univerjs/core": "0.2.0",
+    "@univerjs/design": "0.2.0",
+    "@univerjs/shared": "0.2.0",
+    "@univerjs/engine-render": "0.2.0",
+    "@univerjs/slides": "0.2.0",
+    "@univerjs/ui": "0.2.0"
   },
   "univerSpace": {
     ".": {