@netless/window-manager 1.0.0-canary.6 → 1.0.0-canary.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -6
- package/dist/index.js +13539 -0
- package/dist/index.mjs +13536 -0
- package/dist/index.umd.js +13534 -46
- package/dist/{App → src/App}/AppContext.d.ts +16 -14
- package/dist/{App → src/App}/AppPageStateImpl.d.ts +0 -0
- package/dist/{App → src/App}/AppProxy.d.ts +30 -11
- package/dist/{App → src/App}/MagixEvent/index.d.ts +0 -0
- package/dist/src/App/WhiteboardView.d.ts +27 -0
- package/dist/{App → src/App}/index.d.ts +1 -0
- package/dist/src/App/type.d.ts +21 -0
- package/dist/{AppListener.d.ts → src/AppListener.d.ts} +2 -2
- package/dist/{AppManager.d.ts → src/AppManager.d.ts} +11 -6
- package/dist/{AttributesDelegate.d.ts → src/AttributesDelegate.d.ts} +5 -2
- package/dist/{BoxEmitter.d.ts → src/BoxEmitter.d.ts} +0 -0
- package/dist/{BoxManager.d.ts → src/BoxManager.d.ts} +12 -6
- package/dist/{BuiltinApps.d.ts → src/BuiltinApps.d.ts} +3 -0
- package/dist/{Cursor → src/Cursor}/Cursor.d.ts +0 -0
- package/dist/{Cursor → src/Cursor}/icons.d.ts +0 -0
- package/dist/{Cursor → src/Cursor}/index.d.ts +4 -3
- package/dist/{Helper.d.ts → src/Helper.d.ts} +4 -8
- package/dist/{InternalEmitter.d.ts → src/InternalEmitter.d.ts} +1 -4
- package/dist/{Page → src/Page}/PageController.d.ts +2 -1
- package/dist/{Page → src/Page}/index.d.ts +0 -0
- package/dist/{PageState.d.ts → src/PageState.d.ts} +0 -0
- package/dist/{ReconnectRefresher.d.ts → src/ReconnectRefresher.d.ts} +0 -0
- package/dist/{RedoUndo.d.ts → src/RedoUndo.d.ts} +0 -0
- package/dist/{Register → src/Register}/index.d.ts +4 -2
- package/dist/{Register → src/Register}/loader.d.ts +1 -1
- package/dist/src/Register/storage.d.ts +11 -0
- package/dist/{Utils → src/Utils}/AppCreateQueue.d.ts +0 -0
- package/dist/{Utils → src/Utils}/Common.d.ts +0 -0
- package/dist/{Utils → src/Utils}/Reactive.d.ts +1 -1
- package/dist/{Utils → src/Utils}/RoomHacker.d.ts +0 -0
- package/dist/{Utils → src/Utils}/error.d.ts +1 -1
- package/dist/{Utils → src/Utils}/log.d.ts +0 -0
- package/dist/src/View/CameraSynchronizer.d.ts +20 -0
- package/dist/{View → src/View}/MainView.d.ts +18 -7
- package/dist/src/View/ScrollMode.d.ts +32 -0
- package/dist/{View → src/View}/ViewManager.d.ts +0 -0
- package/dist/src/View/ViewSync.d.ts +32 -0
- package/dist/{callback.d.ts → src/callback.d.ts} +13 -1
- package/dist/{constants.d.ts → src/constants.d.ts} +12 -5
- package/dist/src/image.d.ts +19 -0
- package/dist/{index.d.ts → src/index.d.ts} +66 -17
- package/dist/src/shim.d.ts +11 -0
- package/dist/src/storage.d.ts +7 -0
- package/dist/{typings.d.ts → src/typings.d.ts} +18 -8
- package/dist/style.css +810 -1
- package/docs/api.md +10 -0
- package/docs/app-context.md +155 -27
- package/docs/mirgrate-to-1.0.md +68 -0
- package/package.json +27 -22
- package/playwright.config.ts +29 -0
- package/pnpm-lock.yaml +3141 -4483
- package/src/App/AppContext.ts +81 -46
- package/src/App/AppProxy.ts +249 -139
- package/src/App/WhiteboardView.ts +38 -14
- package/src/App/index.ts +1 -0
- package/src/App/type.ts +22 -0
- package/src/AppListener.ts +21 -21
- package/src/AppManager.ts +84 -43
- package/src/AttributesDelegate.ts +6 -3
- package/src/BoxManager.ts +76 -38
- package/src/BuiltinApps.ts +9 -8
- package/src/Cursor/Cursor.svelte +6 -2
- package/src/Cursor/Cursor.ts +16 -5
- package/src/Cursor/icons.ts +6 -0
- package/src/Cursor/index.ts +13 -10
- package/src/Helper.ts +25 -7
- package/src/InternalEmitter.ts +1 -4
- package/src/Page/PageController.ts +2 -1
- package/src/PageState.ts +1 -1
- package/src/ReconnectRefresher.ts +6 -2
- package/src/Register/index.ts +36 -14
- package/src/Register/loader.ts +20 -9
- package/src/Register/storage.ts +26 -5
- package/src/Utils/Common.ts +3 -0
- package/src/Utils/Reactive.ts +29 -27
- package/src/Utils/RoomHacker.ts +3 -0
- package/src/Utils/error.ts +2 -2
- package/src/View/CameraSynchronizer.ts +52 -37
- package/src/View/MainView.ts +118 -76
- package/src/View/ScrollMode.ts +239 -0
- package/src/View/ViewSync.ts +139 -6
- package/src/callback.ts +9 -1
- package/src/constants.ts +11 -3
- package/src/image/pencil-eraser-1.svg +3 -0
- package/src/image/pencil-eraser-2.svg +3 -0
- package/src/image/pencil-eraser-3.svg +3 -0
- package/src/index.ts +202 -58
- package/src/storage.ts +15 -0
- package/src/style.css +18 -47
- package/src/typings.ts +21 -7
- package/vite.config.js +12 -7
- package/dist/App/AppViewSync.d.ts +0 -11
- package/dist/App/Storage/StorageEvent.d.ts +0 -8
- package/dist/App/Storage/index.d.ts +0 -39
- package/dist/App/Storage/typings.d.ts +0 -22
- package/dist/App/Storage/utils.d.ts +0 -5
- package/dist/App/WhiteboardView.d.ts +0 -21
- package/dist/Register/storage.d.ts +0 -8
- package/dist/View/CameraSynchronizer.d.ts +0 -17
- package/dist/View/ViewSync.d.ts +0 -7
- package/dist/index.cjs.js +0 -46
- package/dist/index.es.js +0 -16159
- package/src/App/AppViewSync.ts +0 -68
- package/src/App/Storage/StorageEvent.ts +0 -21
- package/src/App/Storage/index.ts +0 -295
- package/src/App/Storage/typings.ts +0 -23
- package/src/App/Storage/utils.ts +0 -17
package/src/View/ViewSync.ts
CHANGED
@@ -1,10 +1,143 @@
|
|
1
|
-
import
|
1
|
+
import { AnimationMode, ViewMode } from "white-web-sdk";
|
2
|
+
import { CameraSynchronizer } from "./CameraSynchronizer";
|
3
|
+
import { combine, derive } from "value-enhancer";
|
4
|
+
import { isEqual } from "lodash";
|
5
|
+
import { SideEffectManager } from "side-effect-manager";
|
6
|
+
import { Val } from "value-enhancer";
|
7
|
+
import type { Camera, View } from "white-web-sdk";
|
8
|
+
import type { ReadonlyVal } from "value-enhancer";
|
9
|
+
import type { ICamera, ISize } from "../AttributesDelegate";
|
10
|
+
import type { TeleBoxRect } from "@netless/telebox-insider";
|
11
|
+
import type { ManagerViewMode } from "../typings";
|
2
12
|
|
13
|
+
export type ViewSyncContext = {
|
14
|
+
uid: string;
|
15
|
+
// 远端 camera
|
16
|
+
camera$: Val<ICamera | undefined, boolean>;
|
17
|
+
// 远端 size
|
18
|
+
size$: Val<ISize | undefined>;
|
3
19
|
|
4
|
-
|
5
|
-
readonly camera: Camera;
|
6
|
-
readonly size: Size;
|
20
|
+
stageRect$: ReadonlyVal<TeleBoxRect>;
|
7
21
|
|
8
|
-
|
9
|
-
|
22
|
+
viewMode$?: Val<ManagerViewMode>;
|
23
|
+
|
24
|
+
storeCamera: (camera: ICamera) => void;
|
25
|
+
|
26
|
+
storeSize: (size: ISize) => void;
|
27
|
+
|
28
|
+
view$: Val<View | undefined>;
|
29
|
+
};
|
30
|
+
|
31
|
+
export class ViewSync {
|
32
|
+
private sem = new SideEffectManager();
|
33
|
+
private synchronizer: CameraSynchronizer;
|
34
|
+
private needRecoverCamera$?: ReadonlyVal<boolean>;
|
35
|
+
|
36
|
+
constructor(private context: ViewSyncContext) {
|
37
|
+
this.synchronizer = this.createSynchronizer();
|
38
|
+
this.bindView(this.context.view$.value);
|
39
|
+
this.sem.add(() => [
|
40
|
+
this.subscribeView(),
|
41
|
+
this.subscribeCamera(),
|
42
|
+
this.subscribeSize(),
|
43
|
+
this.subscribeStageRect(),
|
44
|
+
]);
|
45
|
+
if (context.viewMode$) {
|
46
|
+
this.needRecoverCamera$ = derive(context.viewMode$, mode => mode !== "scroll");
|
47
|
+
} else {
|
48
|
+
this.needRecoverCamera$ = new Val(true);
|
49
|
+
}
|
50
|
+
const camera$size$ = combine([this.context.camera$, this.context.size$]);
|
51
|
+
camera$size$.reaction(([camera, size]) => {
|
52
|
+
if (camera && size && this.needRecoverCamera$?.value) {
|
53
|
+
this.synchronizer.onRemoteUpdate(camera, size);
|
54
|
+
camera$size$.destroy();
|
55
|
+
}
|
56
|
+
});
|
57
|
+
}
|
58
|
+
|
59
|
+
private get isBroadcastMode() {
|
60
|
+
return this.context.viewMode$?.value === ViewMode.Broadcaster;
|
61
|
+
}
|
62
|
+
|
63
|
+
private createSynchronizer = () => {
|
64
|
+
return new CameraSynchronizer((camera: ICamera) => {
|
65
|
+
this.context.camera$.setValue(camera, true);
|
66
|
+
const notStoreCamera =
|
67
|
+
this.context.viewMode$ && this.context.viewMode$.value === ViewMode.Freedom;
|
68
|
+
if (notStoreCamera) {
|
69
|
+
return;
|
70
|
+
} else {
|
71
|
+
this.context.storeCamera(camera);
|
72
|
+
}
|
73
|
+
});
|
74
|
+
};
|
75
|
+
|
76
|
+
private subscribeView = () => {
|
77
|
+
return this.context.view$.subscribe(view => {
|
78
|
+
const currentCamera = this.context.camera$.value;
|
79
|
+
if (currentCamera && this.context.size$.value && this.needRecoverCamera$?.value) {
|
80
|
+
view?.moveCamera({
|
81
|
+
scale: 1,
|
82
|
+
animationMode: AnimationMode.Immediately,
|
83
|
+
});
|
84
|
+
this.synchronizer.onRemoteUpdate(currentCamera, this.context.size$.value);
|
85
|
+
}
|
86
|
+
this.bindView(view);
|
87
|
+
});
|
88
|
+
};
|
89
|
+
|
90
|
+
private subscribeCamera = () => {
|
91
|
+
return this.context.camera$.subscribe((camera, skipUpdate) => {
|
92
|
+
if (skipUpdate) return;
|
93
|
+
const size = this.context.size$.value;
|
94
|
+
if (camera && size) {
|
95
|
+
this.synchronizer.onRemoteUpdate(camera, size);
|
96
|
+
}
|
97
|
+
});
|
98
|
+
};
|
99
|
+
|
100
|
+
private subscribeSize = () => {
|
101
|
+
return this.context.size$.subscribe(size => {
|
102
|
+
if (size && this.isBroadcastMode) {
|
103
|
+
this.synchronizer.onRemoteSizeUpdate(size);
|
104
|
+
}
|
105
|
+
});
|
106
|
+
};
|
107
|
+
|
108
|
+
private subscribeStageRect = () => {
|
109
|
+
return this.context.stageRect$.subscribe(rect => {
|
110
|
+
if (rect) {
|
111
|
+
this.synchronizer.setRect(rect, this.isBroadcastMode);
|
112
|
+
}
|
113
|
+
});
|
114
|
+
};
|
115
|
+
|
116
|
+
public bindView = (view?: View) => {
|
117
|
+
if (!view) return;
|
118
|
+
this.synchronizer.setView(view);
|
119
|
+
this.sem.flush("view");
|
120
|
+
this.sem.add(() => {
|
121
|
+
view.callbacks.on("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
|
122
|
+
return () =>
|
123
|
+
view.callbacks.off("onCameraUpdatedByDevice", this.onCameraUpdatedByDevice);
|
124
|
+
}, "view");
|
125
|
+
};
|
126
|
+
|
127
|
+
private onCameraUpdatedByDevice = (camera: Camera) => {
|
128
|
+
if (!camera) return;
|
129
|
+
if (!this.isBroadcastMode) return;
|
130
|
+
const { size$, stageRect$, view$ } = this.context;
|
131
|
+
if (size$.value && stageRect$.value && view$.value) {
|
132
|
+
this.synchronizer.onLocalCameraUpdate({ ...camera, id: this.context.uid });
|
133
|
+
const newSize = { ...view$.value.size, id: this.context.uid };
|
134
|
+
if (!isEqual(size$.value, newSize)) {
|
135
|
+
this.context.storeSize(newSize);
|
136
|
+
}
|
137
|
+
}
|
138
|
+
};
|
139
|
+
|
140
|
+
public destroy() {
|
141
|
+
this.sem.flushAll();
|
142
|
+
}
|
10
143
|
}
|
package/src/callback.ts
CHANGED
@@ -1,8 +1,10 @@
|
|
1
1
|
import Emittery from "emittery";
|
2
|
-
import type { TeleBoxColorScheme, TELE_BOX_STATE } from "@netless/telebox-insider";
|
2
|
+
import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@netless/telebox-insider";
|
3
3
|
import type { CameraState, SceneState, ViewVisionMode } from "white-web-sdk";
|
4
4
|
import type { LoadAppEvent } from "./Register";
|
5
5
|
import type { PageState } from "./Page";
|
6
|
+
import type { ICamera, ISize } from "./AttributesDelegate";
|
7
|
+
import type { ScrollState } from "./View/ScrollMode";
|
6
8
|
|
7
9
|
export type PublicEvent = {
|
8
10
|
mainViewModeChange: ViewVisionMode;
|
@@ -20,6 +22,12 @@ export type PublicEvent = {
|
|
20
22
|
ready: undefined; // 所有 APP 创建完毕时触发
|
21
23
|
sceneStateChange: SceneState;
|
22
24
|
pageStateChange: PageState;
|
25
|
+
appClose: { appId: string; kind: string, error?: Error };
|
26
|
+
baseCameraChange: ICamera;
|
27
|
+
baseSizeChange: ISize;
|
28
|
+
fullscreenChange: TeleBoxFullscreen;
|
29
|
+
userScroll: undefined;
|
30
|
+
scrollStateChange: ScrollState;
|
23
31
|
};
|
24
32
|
|
25
33
|
export type CallbacksType = Emittery<PublicEvent>;
|
package/src/constants.ts
CHANGED
@@ -5,18 +5,18 @@ export enum Events {
|
|
5
5
|
AppBoxStateChange = "AppBoxStateChange",
|
6
6
|
GetAttributes = "GetAttributes",
|
7
7
|
UpdateWindowManagerWrapper = "UpdateWindowManagerWrapper",
|
8
|
-
InitReplay = "InitReplay",
|
9
8
|
WindowCreated = "WindowCreated",
|
10
9
|
SetMainViewScenePath = "SetMainViewScenePath",
|
11
10
|
SetMainViewSceneIndex = "SetMainViewSceneIndex",
|
12
11
|
SetAppFocusIndex = "SetAppFocusIndex",
|
13
12
|
SwitchViewsToFreedom = "SwitchViewsToFreedom",
|
14
|
-
MoveCamera = "MoveCamera",
|
15
|
-
MoveCameraToContain = "MoveCameraToContain",
|
16
13
|
CursorMove = "CursorMove",
|
17
14
|
RootDirRemoved = "RootDirRemoved",
|
18
15
|
Refresh = "Refresh",
|
19
16
|
InitMainViewCamera = "InitMainViewCamera",
|
17
|
+
InvokeAttributesUpdateCallback = "InvokeAttributesUpdateCallback",
|
18
|
+
MoveCamera = "MoveCamera",
|
19
|
+
MoveCameraToContain = "moveCameraToContain",
|
20
20
|
}
|
21
21
|
|
22
22
|
export const MagixEventName = "__WindowManger";
|
@@ -27,6 +27,11 @@ export enum AppAttributes {
|
|
27
27
|
Position = "position",
|
28
28
|
SceneIndex = "SceneIndex",
|
29
29
|
ZIndex = "zIndex",
|
30
|
+
Visible = "visible",
|
31
|
+
Ratio = "ratio",
|
32
|
+
StageRatio = "stageRatio",
|
33
|
+
Draggable = "draggable",
|
34
|
+
Resizable = "resizable",
|
30
35
|
}
|
31
36
|
|
32
37
|
export enum AppEvents {
|
@@ -59,3 +64,6 @@ export const INIT_DIR = "/init";
|
|
59
64
|
export const SETUP_APP_DELAY = 50;
|
60
65
|
|
61
66
|
export const MAX_PAGE_SIZE = 500;
|
67
|
+
|
68
|
+
export const SCROLL_MODE_BASE_WIDTH = 1600;
|
69
|
+
export const SCROLL_MODE_BASE_HEIGHT = SCROLL_MODE_BASE_WIDTH * 3;
|