feat: add setViewLocalScenePathChange

hqer927 · hqer927 · commit 166133c4e39c · 2025-12-04T15:09:44.000+08:00
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@netless/window-manager": "^0.4.75",
+    "@netless/window-manager": "^1.0.9",
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.48",
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^17.0.41",
@@ -29,7 +29,8 @@
     "typescript": "^4.7.3",
     "typings": "workspace:*",
     "vite": "^2.9.10",
-    "white-web-sdk": "2.16.52"
+    "white-web-sdk": "2.16.53",
+    "@netless/appliance-plugin": "1.1.27-beta.1"
   },
   "scripts": {
     "create-app": "node ./packages/create-app",
@@ -42,8 +43,9 @@
     "dev": "pnpm -F playground dev"
   },
   "overrides": {
-    "@netless/window-manager": "^0.4.75",
-    "white-web-sdk": "2.16.52",
+    "@netless/appliance-plugin": "1.1.27-beta.1",
+    "@netless/window-manager": "^1.0.9",
+    "white-web-sdk": "2.16.53",
     "sass": "1.79.3"
   }
 }
diff --git a/packages/app-slide/src/SlideController/helpers.ts b/packages/app-slide/src/SlideController/helpers.ts
@@ -3,6 +3,8 @@ import type { ScenePathType } from "white-web-sdk";
 import type { Slide } from "@netless/slide";
 import type { DocsViewerPage } from "../DocsViewer";
 import type { Attributes } from "../typings";
+import type { AppliancePluginInstance } from "@netless/appliance-plugin";
+import { log, warn } from "../utils/logger";
 
 export function createDocsViewerPages(slide: Slide, previewUrls: string[] = []): DocsViewerPage[] {
   const { width, height, slideCount, slideState } = slide;
@@ -54,3 +56,51 @@ export function syncSceneWithSlide(
     context.setScenePath(scenePath);
   }
 }
+
+export function renderSceneWithSlide(
+  room: Room,
+  context: AppContext<Attributes>,
+  slide: Slide,
+  baseScenePath: string,
+  appliancePlugin: AppliancePluginInstance,
+  needCount: boolean,
+  count: number = 1000
+) {
+  if (needCount && count <= 0) {
+    warn('[Slide] renderSceneWithSlide count <= 0', count);
+    return;
+  }
+  const page = slide.slideState.currentSlideIndex;
+  if (!(page > 0)) return;
+  const scenePath = [baseScenePath, page].join("/");
+  // 只有打开ppt用户，并且场景路径不是页面(未被其它用户创建出页面)，则需要同步场景
+  let isFirstRender = false;
+  if ((needCount && count === 100 || !needCount) && context.isAddApp && context.getIsWritable() && room.scenePathType(scenePath) !== ("page" as ScenePathType.Page)) {
+    room.removeScenes(baseScenePath);
+    const count = slide.slideCount;
+    const scenes: { name: string }[] = [];
+    for (let i = 1; i <= count; ++i) scenes.push({ name: `${i}` });
+    room.putScenes(baseScenePath, scenes);
+    isFirstRender = true;
+  }
+
+  let currentScenePath: string;
+  if (context.getBox().focus) {
+    currentScenePath = room.state.sceneState.scenePath;
+  } else {
+    currentScenePath = context.getView()?.focusScenePath || "";
+  }
+  if (currentScenePath !== scenePath && room.scenePathType(scenePath) === ("page" as ScenePathType.Page)) {
+    context.setScenePath(scenePath);
+  }
+
+  const view = appliancePlugin.currentManager?.viewContainerManager.getView(context.appId);
+  if (view) {
+    needCount && log('[Slide] setViewLocalScenePathChange count', count);
+    appliancePlugin.setViewLocalScenePathChange(scenePath, context.appId);
+  } else if(needCount) {
+    requestAnimationFrame(() => {
+      renderSceneWithSlide(room, context, slide, baseScenePath, appliancePlugin, needCount, count - 1);
+    });
+  }
+}
diff --git a/packages/app-slide/src/index.ts b/packages/app-slide/src/index.ts
@@ -18,6 +18,7 @@ import { SlideDocsViewer } from "./SlideDocsViewer";
 import { apps, FreezerLength, addHooks, useFreezer } from "./utils/freezer";
 import { log, logger } from "./utils/logger";
 import styles from "./style.scss?inline";
+import { renderSceneWithSlide } from "./SlideController/helpers";
 
 export type { PreviewParams } from "./SlidePreviewer";
 export { SlidePreviewer, default as previewSlide } from "./SlidePreviewer";
@@ -133,14 +134,19 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
     const baseScenePath = context.getInitScenePath() as string;
 
     let docsViewer: SlideDocsViewer | null = null;
-
     const onPageChanged = (page: number) => {
       const room = context.getRoom();
       if (docsViewer && docsViewer.slideController) {
         let synced = false;
-        if (room && context.getIsWritable()) {
-          syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
-          synced = true;
+        if (room) {
+          const windowManager = context.getWindowManager();
+          if (windowManager._appliancePlugin) {
+            renderSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath, windowManager._appliancePlugin, false);
+            synced = true;
+          } else if (context.getIsWritable()) {
+            syncSceneWithSlide(room, context, docsViewer.slideController.slide, baseScenePath);
+            synced = true;
+          }
         }
         log("[Slide] page to", page, synced ? "(synced)" : "");
         docsViewer.viewer.setPageIndex(page - 1);
@@ -171,12 +177,18 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, AppResult> = {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (window as any).slideController = slideController;
       }
-      slideController.readyPromise.then(options.onReady).then(() => {
+      slideController.readyPromise.then(options.onReady).then(async () => {
         const room = context.getRoom();
         let synced = false;
-        if (room && context.getIsWritable()) {
-          syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
-          synced = true;
+        if (room) {
+          const windowManager = context.getWindowManager();
+          if (windowManager._appliancePlugin) {
+            renderSceneWithSlide(room, context, slideController.slide, baseScenePath, windowManager._appliancePlugin, true);
+            synced = true;
+          } else if (context.getIsWritable()) {
+            syncSceneWithSlide(room, context, slideController.slide, baseScenePath);
+            synced = true;
+          }
         }
         const page = slideController.slide.slideState.currentSlideIndex;
         log("[Slide] page to", page, synced ? "(synced)" : "", "(on ready)");
diff --git a/packages/app-slide/src/utils/logger.ts b/packages/app-slide/src/utils/logger.ts
@@ -100,6 +100,7 @@ class Logger {
 
 export const logger = /** @__PURE__ */ new Logger(import.meta.env.DEV);
 export const log = /** @__PURE__ */ logger.log.bind(logger);
+export const warn = /** @__PURE__ */ logger.warn.bind(logger);
 export const verbose = /** @__PURE__ */ logger.verbose.bind(logger);
 export const setRoomLogger = (displayer: Displayer) => {
   logger.roomLogger = (displayer as any).logger;
diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -1,4 +1,5 @@
 import "@netless/window-manager/dist/style.css";
+import "@netless/appliance-plugin/dist/style.css";
 import type { WindowManager } from "@netless/window-manager";
 import type { Room } from "white-web-sdk";
 
diff --git a/packages/playground/src/room.ts b/packages/playground/src/room.ts
@@ -6,6 +6,13 @@ import { ApplianceNames, DeviceType, WhiteWebSdk } from "white-web-sdk";
 
 import { QueryVersion, store, type RoomInfo } from "./common";
 import { clearQueryString, createRoom, persistStore } from "./common";
+import {
+  ApplianceMultiPlugin,
+  AppliancePluginOptions,
+  UseWorkerType,
+} from "@netless/appliance-plugin";
+import fullWorkerString from "@netless/appliance-plugin/dist/fullWorker.js?raw";
+import subWorkerString from "@netless/appliance-plugin/dist/subWorker.js?raw";
 
 export const sdk = new WhiteWebSdk({
   appIdentifier: import.meta.env.VITE_APPID,
@@ -68,7 +75,7 @@ export async function joinRoom(info: RoomInfo): Promise<Room> {
   const room = await sdk.joinRoom({
     ...info,
     uid,
-    invisiblePlugins: [WindowManager],
+    invisiblePlugins: [WindowManager as any, ApplianceMultiPlugin],
     useMultiViews: true,
     disableNewPencil: false,
     disableMagixEventDispatchLimit: true,
@@ -114,22 +121,78 @@ export async function reset({
   }
 }
 
-export function init(container: HTMLElement) {
-  WindowManager.mount({
+export async function init(container: HTMLElement) {
+  const manager = await WindowManager.mount({
     room,
     container,
     chessboard: false,
     cursor: true,
     debug: true,
     prefersColorScheme: "auto",
-  }).then(async manager => {
-    window.manager = manager;
-    await manager.switchMainViewToWriter();
-    const tool = store.getItem("currentApplianceName") as ApplianceNames;
-    if (tool) {
-      manager.mainView.setMemberState({ currentApplianceName: tool });
-    }
+    supportAppliancePlugin: true,
+  })
+  const fullWorkerBlob = new Blob([fullWorkerString], {
+    type: "text/javascript",
+  });
+  const fullWorkerUrl = URL.createObjectURL(fullWorkerBlob);
+  const subWorkerBlob = new Blob([subWorkerString], {
+    type: "text/javascript",
+  });
+  const subWorkerUrl = URL.createObjectURL(subWorkerBlob);
+  const pluginOptions: AppliancePluginOptions = {
+    cdn: {
+      fullWorkerUrl,
+      subWorkerUrl,
+    },
+    extras: {
+      useSimple: true,
+      // useWorker,
+      // canvasOpt: {
+      //   contextType: "2d",
+      // },
+      cursor: {
+        enable: false,
+        expirationTime: 500,
+        moveDelayTime: 300,
+      },
+      syncOpt: {
+        interval: 100,
+        smoothSync: false,
+      },
+      bezier: {
+        enable: false,
+        maxDrawCount: 180,
+      },
+      textEditor: {
+        showFloatBar: false,
+        canSelectorSwitch: false,
+        rightBoundBreak: true,
+        // extendFontFaces: [{fontFamily: "Pacifico", src: "https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2"}]
+        extendFontFaces: [
+          {
+            fontFamily: "Noto Sans SC",
+            src: "https://fonts.gstatic.com/s/opensans/v44/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-mu0SC55I.woff2",
+          },
+        ],
+        loadFontFacesTimeout: 20000,
+      },
+      longDottedStroke: {
+        lineCap: "round",
+        segment: 2,
+        gap: 3,
+      },
+    },
+  };
+  const plugin = await ApplianceMultiPlugin.getInstance(manager as any, {
+    options: pluginOptions,
   });
+  (window as any).appliancePlugin = plugin;
+  window.manager = manager;
+  await manager.switchMainViewToWriter();
+  const tool = store.getItem("currentApplianceName") as ApplianceNames;
+  if (tool) {
+    manager.mainView.setMemberState({ currentApplianceName: tool });
+  }
 }
 
 export const tools = Object.values(ApplianceNames);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import "@netless/window-manager/dist/style.css";`
	`2`	`+import "@netless/appliance-plugin/dist/style.css";`
`2`	`3`	`import type { WindowManager } from "@netless/window-manager";`
`3`	`4`	`import type { Room } from "white-web-sdk";`
`4`	`5`