Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(whiteboard): adjust location of collectorContainer element #903

Merged
merged 1 commit into from
Aug 31, 2021
Merged

fix(whiteboard): adjust location of collectorContainer element #903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion desktop/renderer-app/package.json
View file
Open in desktop
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
Open in desktop
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
BlackHole1 marked this conversation as resolved.
Show resolved Hide resolved
[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<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
Open in desktop
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
Open in desktop
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
Open in desktop
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, 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<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
Open in desktop
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
Open in desktop
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