@netless/fastboard-react 0.1.0 → 0.1.1

package/dist/index.js

@@ -640,58 +640,21 @@ function ZoomControl({
 
 // src/components/PageControl/hooks.ts
 var import_react16 = require("react");
-function usePageControl(room, manager) {
-  const [pageIndex, setPageIndex] = (0, import_react16.useState)(0);
-  const [pageCount, setPageCount] = (0, import_react16.useState)(0);
+function usePageControl() {
+  const app = useFastboardApp();
+  const pageIndex = useFastboardValue(app.sceneIndex);
+  const pageCount = useFastboardValue(app.sceneLength);
   const addPage = (0, import_react16.useCallback)(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-  const prevPage = (0, import_react16.useCallback)(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex - 1);
-    } else if (room) {
-      room.pptPreviousStep();
-    }
-  }, [room, manager, pageIndex]);
-  const nextPage = (0, import_react16.useCallback)(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (room) {
-      room.pptNextStep();
-    }
-  }, [room, manager, pageIndex]);
-  (0, import_react16.useEffect)(() => {
-    if (room) {
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-      if (manager) {
-        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
-        return () => {
-          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
-        };
-      } else {
-        const onRoomStateChanged = (modifyState) => {
-          if (modifyState.sceneState) {
-            setPageIndex(modifyState.sceneState.index);
-            setPageCount(modifyState.sceneState.scenes.length);
-          }
-        };
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-        return () => {
-          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        };
-      }
-    }
-  }, [room, manager]);
+    await app.manager.switchMainViewToWriter();
+    app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
+  const prevPage = (0, import_react16.useCallback)(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex - 1);
+  }, [app, pageIndex]);
+  const nextPage = (0, import_react16.useCallback)(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
   return { pageIndex, pageCount, prevPage, nextPage, addPage };
 }
 
@@ -756,11 +719,10 @@ function PageControl({
   nextIcon,
   nextIconDisable
 }) {
-  const app = useFastboardApp();
   theme = useTheme(theme);
   const { t } = useTranslation();
   const writable = useWritable();
-  const _a = usePageControl(app.room, app.manager), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
+  const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
   const disabled = !writable;
   return import_react21.default.createElement("div", {
     className: (0, import_clsx3.default)(name3, theme)
@@ -2059,23 +2021,34 @@ function renderSpeeds({ speed: current, setSpeed }) {
 
 // src/components/Fastboard.tsx
 var import_react70 = __toESM(require("react"));
-function Fastboard(_a) {
-  var _b = _a, { app } = _b, restProps = __objRest(_b, ["app"]);
+var Fastboard = (0, import_react70.forwardRef)(function Fastboard2(_a, ref) {
+  var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
   if (!app) {
-    return import_react70.default.createElement("div", {
-      className: "fastboard-root"
-    });
+    return import_react70.default.createElement("div", __spreadValues({
+      className: "fastboard-root",
+      ref
+    }, restProps));
   }
   return import_react70.default.createElement(FastboardAppContext.Provider, {
     value: app
-  }, import_react70.default.createElement(FastboardInternal, __spreadValues({}, restProps)));
-}
-function FastboardInternal({
-  language,
-  layout = {},
-  theme = "light",
-  children
-}) {
+  }, import_react70.default.createElement(FastboardInternal, __spreadValues(__spreadValues({
+    forwardedRef: ref
+  }, { theme, layout, language }), restProps)));
+});
+function FastboardInternal(_a) {
+  var _b = _a, {
+    forwardedRef,
+    language,
+    layout = {},
+    theme = "light",
+    children
+  } = _b, restProps = __objRest(_b, [
+    "forwardedRef",
+    "language",
+    "layout",
+    "theme",
+    "children"
+  ]);
   const app = useFastboardApp();
   const forceUpdate = useForceUpdate();
   const i18n = useAsyncValue(() => createI18n({ language }));
@@ -2084,8 +2057,12 @@ function FastboardInternal({
       i18n.changeLanguage(language);
     forceUpdate();
   }, [forceUpdate, i18n, language]);
+  (0, import_react70.useEffect)(() => {
+    app.manager.setPrefersColorScheme(theme);
+  }, [app, theme]);
   const useWhiteboard = (0, import_react70.useCallback)((container) => {
-    container && app && app.manager.bindContainer(container);
+    if (container && app)
+      app.manager.bindContainer(container);
   }, [app]);
   const hideControls = useHideControls();
   const showControls = !hideControls;
@@ -2099,9 +2076,10 @@ function FastboardInternal({
     value: theme
   }, import_react70.default.createElement(I18nContext.Provider, {
     value: i18n
-  }, import_react70.default.createElement("div", {
-    className: "fastboard-root"
-  }, import_react70.default.createElement("div", {
+  }, import_react70.default.createElement("div", __spreadProps(__spreadValues({}, restProps), {
+    className: "fastboard-root",
+    ref: forwardedRef
+  }), import_react70.default.createElement("div", {
     className: "fastboard-view",
     ref: useWhiteboard
   }), children ? children : import_react70.default.createElement(import_react70.default.Fragment, null, toolbar && import_react70.default.createElement("div", {