Wukong

.vscode/settings.json

@@ -4,8 +4,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "svelte.enable-ts-plugin": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
-    "source.addMissingImports": true
+    "source.fixAll": "explicit",
+    "source.addMissingImports": "explicit"
   },
   "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "svelte"],
   "typescript.tsdk": "node_modules/typescript/lib",

package.json

@@ -4,7 +4,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
-    "@netless/window-manager": "0.4.27",
+    "@netless/window-manager": "^0.4.75",
     "@sveltejs/vite-plugin-svelte": "1.0.0-next.48",
     "@tsconfig/svelte": "^3.0.0",
     "@types/node": "^17.0.41",
@@ -38,5 +38,8 @@
     "build-all:dev": "pnpm -r build:dev",
     "build-all:ci": "pnpm --aggregate-output -r build:dev",
     "dev": "pnpm -F playground dev"
+  },
+  "overrides": {
+    "@netless/window-manager": "0.4.75"
   }
 }

packages/app-talkative/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-talkative",
-  "version": "0.1.0",
+  "version": "0.1.2-test.7",
   "main": "dist/main.cjs.js",
   "module": "dist/main.es.js",
   "types": "./dist/index.d.ts",
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/app-shared": "workspace:*",
+    "@netless/app-shared": "^0.1.2",
     "side-effect-manager": "^1.1.0"
   }
 }

packages/app-talkative/src/connect.ts

@@ -9,6 +9,7 @@ export interface ConnectParams {
   postMessage: (message: string) => void;
   onRatioChanged: (ratio: number) => void;
   isSentBySelf: (source: MessageEventSource | null) => boolean;
+  onLocalMessage?:(appId: string, event: Record<string, unknown>) => void;
 }
 
 export function connect({ context, logger, ...callbacks }: ConnectParams): () => void {
@@ -35,6 +36,11 @@ export function connect({ context, logger, ...callbacks }: ConnectParams): () =>
       // send first page jump message
       callbacks.postMessage(JSON.stringify({ method: "onJumpPage", toPage: page }));
     },
+    onLocalMessage(event: Record<string, unknown>) {
+      if (context.getIsWritable()) {
+        callbacks?.onLocalMessage&& callbacks.onLocalMessage(context.appId, event);
+      }
+    },
 
     onFileMessage(event: Record<string, unknown>) {
       if (context.getIsWritable()) {

packages/app-talkative/src/hardcode.ts

@@ -0,0 +1,2 @@
+export const width = 630;
+export const height = 350;

packages/app-talkative/src/index.ts

@@ -1,10 +1,11 @@
-import type { NetlessApp } from "@netless/window-manager";
+import type { AnimationMode, NetlessApp } from "@netless/window-manager";
 import { Logger } from "@netless/app-shared";
 import { SideEffectManager } from "side-effect-manager";
 import { appendQuery, getUserPayload, nextTick } from "./utils";
 import { Renderer } from "./renderer";
 import { Footer } from "./footer";
 import { connect } from "./connect";
+import { height } from "./hardcode";
 
 export interface TalkativeAttributes {
   /** (required) courseware url */
@@ -24,6 +25,7 @@ export interface MagixEventPayloads {
 
 export interface TalkativeOptions {
   debug?: boolean;
+  onLocalMessage?: (appId:string, event: Record<string, unknown>) => void;
 }
 
 const Talkative: NetlessApp<TalkativeAttributes, MagixEventPayloads, TalkativeOptions> = {
@@ -36,14 +38,38 @@ const Talkative: NetlessApp<TalkativeAttributes, MagixEventPayloads, TalkativeOp
       pageNum: 1,
       lastMsg: "",
     });
+    const ClickThroughAppliances = new Set(["clicker", "hand"]);
 
-    const debug = (context.getAppOptions() || {}).debug;
+    // const debug = (context.getAppOptions() || {}).debug;
+    const {onLocalMessage, debug} = (context.getAppOptions() || {}) as TalkativeOptions;
     const logger = new Logger("Talkative", debug);
-    const { uid, memberId, nickName } = getUserPayload(context);
+    const { uid, userId, nickName } = getUserPayload(context);
     const sideEffect = new SideEffectManager();
+    const view = context.getView();
+    const room = context.getRoom();
 
     logger.log("my uid", uid);
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    let toggleClickThrough: (enable?: boolean) => void = () => {};
+    const shouldClickThrough = (tool: string) => {
+      return ClickThroughAppliances.has(tool);
+    };
+    const setPage = (page: unknown): void => {
+      if (!view) {
+        logger.warn("SetPage: page api is only available with 'scenePath' options enabled.");
+      } else {
+        const scenePath = context.getInitScenePath();
+        if (typeof page === "string" && context.getIsWritable() && scenePath && room) {
+          const fullScenePath = [scenePath, page].join("/");
+          if (room.scenePathType(fullScenePath) === "none") {
+            room.putScenes(scenePath, [{ name: page }]);
+          }
+          context.setScenePath(fullScenePath);
+          context.updateAttributes(["page"], page);
+        }
+      }
+    };
     const onPrevPage = () => {
       const { page } = context.storage.state;
       if (context.getIsWritable() && page > 1) {
@@ -70,6 +96,7 @@ const Talkative: NetlessApp<TalkativeAttributes, MagixEventPayloads, TalkativeOp
         postMessage,
         onRatioChanged: renderer.ratio.set.bind(renderer.ratio),
         isSentBySelf: source => source === renderer.$iframe.contentWindow,
+        onLocalMessage,
       })
     );
 
@@ -86,13 +113,64 @@ const Talkative: NetlessApp<TalkativeAttributes, MagixEventPayloads, TalkativeOp
       })
     );
 
+    if (room) {
+      sideEffect.add(() => {
+        const onRoomStateChanged = (e: { memberState: { currentApplianceName: string; }; }) => {
+          if (e.memberState) {
+            toggleClickThrough(shouldClickThrough(e.memberState.currentApplianceName));
+          }
+        };
+        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+        return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+      });
+    }
+
     const on_ready = () => {
       sideEffect.addDisposer(renderer.mount());
       sideEffect.addDisposer(footer.mount());
 
       const role = context.storage.state.uid === uid ? 0 : 2;
-      const query = `userid=${memberId}&role=${role}&name=${nickName}`;
+      const query = `userid=${userId}&role=${role}&name=${nickName}`;
       renderer.$iframe.src = appendQuery(context.storage.state.src, query);
+
+      renderer.role.set(role);
+      footer.role.set(role);
+      const { page, pageNum } = context.storage.state;
+      footer.text.set(`${page}/${pageNum}`);
+      setPage(`${page}`);
+      if (view) {
+        // 添加一个 viewBox，用于添加绘制白板
+        const viewBox = document.createElement("div");
+        Object.assign(viewBox.style, {
+          width: "100%",
+          height: "100%",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          overflow: "hidden",
+        });
+        renderer.$content.appendChild(viewBox);
+        context.mountView(viewBox);
+        view.disableCameraTransform = true;
+        sideEffect.add(() => {
+          const onResize = () => {
+            const clientRect = renderer.$content.getBoundingClientRect();
+            const scale = clientRect.height / height;
+            view.moveCamera({ scale, animationMode: "immediately" as AnimationMode });
+          };
+          const observer = new ResizeObserver(onResize);
+          observer.observe(renderer.$content);
+          return () => observer.disconnect();
+        });
+
+        toggleClickThrough = (enable?: boolean) => {
+          viewBox.style.pointerEvents = enable ? "none" : "auto";
+        };
+
+        if (room?.state.memberState.currentApplianceName) {
+          toggleClickThrough(shouldClickThrough(room?.state.memberState.currentApplianceName));
+        }
+      }
     };
 
     // if there's no uid, wait for it to exist

packages/app-talkative/src/style.css

@@ -16,10 +16,6 @@
 }
 
 .app-talkative-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;

packages/app-talkative/src/utils.ts

@@ -3,6 +3,7 @@ import type { AppContext } from "@netless/window-manager";
 export interface UserPayload {
   memberId: number;
   uid: string;
+  userId: string;
   nickName: string;
 }
 
@@ -13,9 +14,10 @@ export function getUserPayload(context: AppContext): UserPayload {
   const userPayload = displayer.state.roomMembers.find(
     member => member.memberId === memberId
   )?.payload;
-  const uid = room?.uid || userPayload?.uid || "";
+  const uid = userPayload?.uid || room?.uid || "";
   const nickName = userPayload?.nickName || uid;
-  return { memberId, uid, nickName };
+  const userId = userPayload?.userId || uid;
+  return { memberId, uid, userId, nickName };
 }
 
 // from @polka/url (https://github.com/lukeed/polka, MIT license)

packages/create-app/standalone/template-vanilla/package.json

@@ -14,7 +14,7 @@
     "white-web-sdk": "*"
   },
   "devDependencies": {
-    "@netless/window-manager": "^0.4.27",
+    "@netless/window-manager": "^0.4.75",
     "@types/node": "^17.0.41",
     "vite": "^2.9.10",
     "white-web-sdk": "2.16.24"