Skip to content

Commit

Permalink
fix(whiteboard): adjust location of collectorContainer element
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cheerego7
Cheerego7 committed Aug 31, 2021
1 parent 114475b commit 5db6713
Show file tree
Hide file tree
Showing 7 changed files with 75 additions and 35 deletions.
2 changes: 1 addition & 1 deletion desktop/renderer-app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 26 additions & 8 deletions desktop/renderer-app/src/components/Whiteboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -18,12 +18,16 @@ export interface WhiteboardProps {
export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
const { room } = whiteboardStore;

const bindWhiteboard = useCallback(
async (ref: HTMLDivElement | null) => {
if (ref && room) {
const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);

useEffect(() => {
const mountWindowManager = async (): Promise<void> => {
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(),
Expand All @@ -37,10 +41,23 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
whiteboardStore.onMainViewModeChange();
whiteboardStore.onWindowManagerBoxStateChange();
}
},
};

void mountWindowManager();
// eslint-disable-next-line react-hooks/exhaustive-deps
[room],
);
}, [whiteboardEl, collectorEl]);

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<HTMLDivElement>) => {
Expand Down Expand Up @@ -103,6 +120,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
/>
</div>
</div>
<div ref={bindCollector} className="collector-container" />
<div ref={bindWhiteboard} className="whiteboard-box" />
</div>
)
Expand Down
7 changes: 6 additions & 1 deletion desktop/renderer-app/src/stores/WhiteboardStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
};
Expand Down Expand Up @@ -373,4 +374,8 @@ export class WhiteboardStore {
}
console.log(`Whiteboard unloaded: ${globalStore.whiteboardRoomUUID}`);
}

private dirName = (scenePath: string): string => {
return scenePath.slice(0, scenePath.lastIndexOf("/"));
};
}
2 changes: 1 addition & 1 deletion web/flat-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
34 changes: 26 additions & 8 deletions web/flat-web/src/components/Whiteboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -18,12 +18,16 @@ export interface WhiteboardProps {
export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteboardStore }) {
const { room } = whiteboardStore;

const bindWhiteboard = useCallback(
async (ref: HTMLDivElement | null) => {
if (ref && room) {
const [whiteboardEl, setWhiteboardEl] = useState<HTMLElement | null>(null);
const [collectorEl, setCollectorEl] = useState<HTMLElement | null>(null);

useEffect(() => {
const mountWindowManager = async (): Promise<void> => {
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(),
Expand All @@ -37,10 +41,23 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
whiteboardStore.onMainViewModeChange();
whiteboardStore.onWindowManagerBoxStateChange();
}
},
};

void mountWindowManager();
// eslint-disable-next-line react-hooks/exhaustive-deps
[room],
);
}, [whiteboardEl, collectorEl]);

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<HTMLDivElement>) => {
Expand Down Expand Up @@ -103,6 +120,7 @@ export const Whiteboard = observer<WhiteboardProps>(function Whiteboard({ whiteb
/>
</div>
</div>
<div ref={bindCollector} className="collector-container" />
<div ref={bindWhiteboard} className="whiteboard-box" />
</div>
)
Expand Down
13 changes: 6 additions & 7 deletions web/flat-web/src/stores/WhiteboardStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<void> => {
if (this.windowManager && this.isFocusWindow) {
await this.windowManager.switchMainViewToWriter();
Expand All @@ -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);
}
};
Expand Down Expand Up @@ -382,4 +377,8 @@ export class WhiteboardStore {
private preloadPPTResource = debounce(async (pptSrc: string): Promise<void> => {
await coursewarePreloader.preload(pptSrc);
}, 2000);

private dirName = (scenePath: string): string => {
return scenePath.slice(0, scenePath.lastIndexOf("/"));
};
}
18 changes: 9 additions & 9 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 5db6713

Please sign in to comment.