From e345c272bc8d39d92d89c8c93b15aaf2fba9502d Mon Sep 17 00:00:00 2001 From: cheerchen Date: Tue, 31 Aug 2021 10:34:46 +0800 Subject: [PATCH] fix(whiteboard): adjust location of collectorContainer element --- desktop/renderer-app/package.json | 2 +- .../src/components/Whiteboard.tsx | 34 ++++++++++++++----- .../src/stores/WhiteboardStore.ts | 7 +++- web/flat-web/package.json | 2 +- web/flat-web/src/components/Whiteboard.tsx | 34 ++++++++++++++----- web/flat-web/src/stores/WhiteboardStore.ts | 13 ++++--- yarn.lock | 18 +++++----- 7 files changed, 75 insertions(+), 35 deletions(-) diff --git a/desktop/renderer-app/package.json b/desktop/renderer-app/package.json index 83cd193bbf2..63c8831534e 100644 --- a/desktop/renderer-app/package.json +++ b/desktop/renderer-app/package.json @@ -12,7 +12,7 @@ "@netless/redo-undo": "^0.0.5", "@netless/tool-box": "^0.1.4", "@netless/video-js-plugin": "^0.3.6", - "@netless/window-manager": "^0.1.49", + "@netless/window-manager": "^0.1.51", "@videojs/vhs-utils": "^2.3.0", "agora-rtm-sdk": "^1.4.3", "antd": "^4.15.4", diff --git a/desktop/renderer-app/src/components/Whiteboard.tsx b/desktop/renderer-app/src/components/Whiteboard.tsx index 03885df18aa..c21344608c3 100644 --- a/desktop/renderer-app/src/components/Whiteboard.tsx +++ b/desktop/renderer-app/src/components/Whiteboard.tsx @@ -5,7 +5,7 @@ import RedoUndo from "@netless/redo-undo"; import ToolBox from "@netless/tool-box"; import classNames from "classnames"; import { observer } from "mobx-react-lite"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { WindowManager } from "@netless/window-manager"; import { WhiteboardStore } from "../stores/WhiteboardStore"; import { isSupportedImageType, onDropImage } from "../utils/dnd/image"; @@ -18,12 +18,16 @@ export interface WhiteboardProps { export const Whiteboard = observer(function Whiteboard({ whiteboardStore }) { const { room } = whiteboardStore; - const bindWhiteboard = useCallback( - async (ref: HTMLDivElement | null) => { - if (ref && room) { + const [whiteboardEl, setWhiteboardEl] = useState(null); + const [collectorEl, setCollectorEl] = useState(null); + + useEffect(() => { + const mountWindowManager = async (): Promise => { + if (whiteboardEl && collectorEl && room) { await WindowManager.mount({ room, - container: ref, + container: whiteboardEl, + collectorContainer: collectorEl, /* the containerSizeRatio config limit width and height ratio of windowManager for make sure windowManager sync in whiteboard. */ containerSizeRatio: whiteboardStore.updateWhiteboardResize(), @@ -37,10 +41,23 @@ export const Whiteboard = observer(function Whiteboard({ whiteb whiteboardStore.onMainViewModeChange(); whiteboardStore.onWindowManagerBoxStateChange(); } - }, + }; + + void mountWindowManager(); // eslint-disable-next-line react-hooks/exhaustive-deps - [room], - ); + }, [whiteboardEl, collectorEl, room]); + + const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => { + if (ref) { + setWhiteboardEl(ref); + } + }, []); + + const bindCollector = useCallback((ref: HTMLDivElement | null) => { + if (ref) { + setCollectorEl(ref); + } + }, []); const onDragOver = useCallback( (event: React.DragEvent) => { @@ -103,6 +120,7 @@ export const Whiteboard = observer(function Whiteboard({ whiteb /> +
) diff --git a/desktop/renderer-app/src/stores/WhiteboardStore.ts b/desktop/renderer-app/src/stores/WhiteboardStore.ts index daf803ee4cb..9c149557d42 100644 --- a/desktop/renderer-app/src/stores/WhiteboardStore.ts +++ b/desktop/renderer-app/src/stores/WhiteboardStore.ts @@ -136,8 +136,9 @@ export class WhiteboardStore { if (this.room && this.windowManager) { const currentScene = this.currentSceneIndex + 1; const scenePath = this.room.state.sceneState.scenePath; + const path = this.dirName(scenePath); - this.room.putScenes(scenePath, [{}], currentScene); + this.room.putScenes(path, [{}], currentScene); this.windowManager.setMainViewSceneIndex(this.currentSceneIndex + 1); } }; @@ -373,4 +374,8 @@ export class WhiteboardStore { } console.log(`Whiteboard unloaded: ${globalStore.whiteboardRoomUUID}`); } + + private dirName = (scenePath: string): string => { + return scenePath.slice(0, scenePath.lastIndexOf("/")); + }; } diff --git a/web/flat-web/package.json b/web/flat-web/package.json index 3633d80d5de..9297364d5cf 100644 --- a/web/flat-web/package.json +++ b/web/flat-web/package.json @@ -40,7 +40,7 @@ "@netless/redo-undo": "^0.0.5", "@netless/tool-box": "^0.1.5", "@netless/video-js-plugin": "^0.3.6", - "@netless/window-manager": "^0.1.49", + "@netless/window-manager": "^0.1.51", "@videojs/vhs-utils": "^2.3.0", "@zip.js/zip.js": "^2.3.7", "agora-rtc-sdk-ng": "^4.5.0", diff --git a/web/flat-web/src/components/Whiteboard.tsx b/web/flat-web/src/components/Whiteboard.tsx index 0ce45af27e1..a8cbe2bc0e5 100644 --- a/web/flat-web/src/components/Whiteboard.tsx +++ b/web/flat-web/src/components/Whiteboard.tsx @@ -6,7 +6,7 @@ import ToolBox from "@netless/tool-box"; import { WindowManager } from "@netless/window-manager"; import classNames from "classnames"; import { observer } from "mobx-react-lite"; -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { WhiteboardStore } from "../stores/WhiteboardStore"; import { isSupportedImageType, onDropImage } from "../utils/dnd/image"; import { ScenesController } from "../../../../packages/flat-components/src"; @@ -18,12 +18,16 @@ export interface WhiteboardProps { export const Whiteboard = observer(function Whiteboard({ whiteboardStore }) { const { room } = whiteboardStore; - const bindWhiteboard = useCallback( - async (ref: HTMLDivElement | null) => { - if (ref && room) { + const [whiteboardEl, setWhiteboardEl] = useState(null); + const [collectorEl, setCollectorEl] = useState(null); + + useEffect(() => { + const mountWindowManager = async (): Promise => { + if (whiteboardEl && collectorEl && room) { await WindowManager.mount({ room, - container: ref, + container: whiteboardEl, + collectorContainer: collectorEl, /* the containerSizeRatio config limit width and height ratio of windowManager for make sure windowManager sync in whiteboard. */ containerSizeRatio: whiteboardStore.updateWhiteboardResize(), @@ -37,10 +41,23 @@ export const Whiteboard = observer(function Whiteboard({ whiteb whiteboardStore.onMainViewModeChange(); whiteboardStore.onWindowManagerBoxStateChange(); } - }, + }; + + void mountWindowManager(); // eslint-disable-next-line react-hooks/exhaustive-deps - [room], - ); + }, [whiteboardEl, collectorEl, room]); + + const bindWhiteboard = useCallback((ref: HTMLDivElement | null) => { + if (ref) { + setWhiteboardEl(ref); + } + }, []); + + const bindCollector = useCallback((ref: HTMLDivElement | null) => { + if (ref) { + setCollectorEl(ref); + } + }, []); const onDragOver = useCallback( (event: React.DragEvent) => { @@ -103,6 +120,7 @@ export const Whiteboard = observer(function Whiteboard({ whiteb />
+
) diff --git a/web/flat-web/src/stores/WhiteboardStore.ts b/web/flat-web/src/stores/WhiteboardStore.ts index c44bbeb49ea..31d86994642 100644 --- a/web/flat-web/src/stores/WhiteboardStore.ts +++ b/web/flat-web/src/stores/WhiteboardStore.ts @@ -126,12 +126,6 @@ export class WhiteboardStore { this.isShowPreviewPanel = show; }; - public setWindowReadonlyState = (isReadonly: boolean): void => { - if (this.windowManager) { - this.windowManager.setReadonly(isReadonly); - } - }; - public switchMainViewToWriter = async (): Promise => { if (this.windowManager && this.isFocusWindow) { await this.windowManager.switchMainViewToWriter(); @@ -142,8 +136,9 @@ export class WhiteboardStore { if (this.room && this.windowManager) { const currentScene = this.currentSceneIndex + 1; const scenePath = this.room.state.sceneState.scenePath; + const path = this.dirName(scenePath); - this.room.putScenes(scenePath, [{}], currentScene); + this.room.putScenes(path, [{}], currentScene); this.windowManager.setMainViewSceneIndex(this.currentSceneIndex + 1); } }; @@ -382,4 +377,8 @@ export class WhiteboardStore { private preloadPPTResource = debounce(async (pptSrc: string): Promise => { await coursewarePreloader.preload(pptSrc); }, 2000); + + private dirName = (scenePath: string): string => { + return scenePath.slice(0, scenePath.lastIndexOf("/")); + }; } diff --git a/yarn.lock b/yarn.lock index 91e73cb3517..d1a34feb5e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1870,10 +1870,10 @@ debounce-fn "^5.0.0" vanilla-lazyload "^17.4.0" -"@netless/app-media-player@0.1.0-beta.4": - version "0.1.0-beta.4" - resolved "https://registry.npmjs.org/@netless/app-media-player/-/app-media-player-0.1.0-beta.4.tgz#2283b8a1e0a104bd8d36a5dbe9798309041e262c" - integrity sha512-mwBrhITav9moFRS9lGmsWnLN1jBJhTjEfnQAVyLCjQvrzGGvZl+bakTSLhaazWvmdbo/V9YKoP0JlbytwAMHlg== +"@netless/app-media-player@0.1.0-beta.5": + version "0.1.0-beta.5" + resolved "https://registry.npmjs.org/@netless/app-media-player/-/app-media-player-0.1.0-beta.5.tgz#13ad8680be81503f5dc48c4c4e9848ba15b76e5a" + integrity sha512-q24tZnDGwTM8fvSs97qavuF8w8cXa4Tx3Nl7Xvig5Um4XKrfNijjLK9pI1cdctfuefl9s8wrG8JNCN2C6yqeDw== "@netless/canvas-polyfill@^0.0.4": version "0.0.4" @@ -1937,14 +1937,14 @@ resolved "https://registry.yarnpkg.com/@netless/video-js-plugin/-/video-js-plugin-0.3.7.tgz#6c1f174f20e8a93634e1770e7e535c1302bdf22b" integrity sha512-UG1t9464w1bZT9kzdhxj/K7R6jqI9sqYfqfUQJ2w9JRWsNibL6O16OC81iwBJT6nkGXEVN7z2pqHvNg1OhKppw== -"@netless/window-manager@^0.1.49": - version "0.1.49" - resolved "https://registry.npmjs.org/@netless/window-manager/-/window-manager-0.1.49.tgz#262875d25026d4bd096f24ec969e689b086aac03" - integrity sha512-/yIC+tNqbnx0OmKFfMhoKvVdbMeLyrt9yPnIPoB9J2+2VxY8XOcFG3Z0yRku05GTKSEt5zpehVp9FF7hOes4Tw== +"@netless/window-manager@^0.1.51": + version "0.1.51" + resolved "https://registry.npmjs.org/@netless/window-manager/-/window-manager-0.1.51.tgz#b734dd8ff2d9160d88a0894e4a92d7ff8be117bc" + integrity sha512-bR4YyCBdsruJNtsS0bXHEPRpBJKEvsESGjv2dXk1Fu585y8wD4AgBIbuh4hXSMiQFZRebFESQxcziMm0UZnLNQ== dependencies: "@juggle/resize-observer" "^3.3.1" "@netless/app-docs-viewer" "^0.1.17" - "@netless/app-media-player" "0.1.0-beta.4" + "@netless/app-media-player" "0.1.0-beta.5" "@netless/telebox-insider" "^0.1.15" emittery "^0.9.2" lodash-es "^4.17.21"