@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.
Files changed (111) hide show
  1. package/README.md +30 -6
  2. package/dist/index.js +13539 -0
  3. package/dist/index.mjs +13536 -0
  4. package/dist/index.umd.js +13534 -46
  5. package/dist/{App → src/App}/AppContext.d.ts +16 -14
  6. package/dist/{App → src/App}/AppPageStateImpl.d.ts +0 -0
  7. package/dist/{App → src/App}/AppProxy.d.ts +30 -11
  8. package/dist/{App → src/App}/MagixEvent/index.d.ts +0 -0
  9. package/dist/src/App/WhiteboardView.d.ts +27 -0
  10. package/dist/{App → src/App}/index.d.ts +1 -0
  11. package/dist/src/App/type.d.ts +21 -0
  12. package/dist/{AppListener.d.ts → src/AppListener.d.ts} +2 -2
  13. package/dist/{AppManager.d.ts → src/AppManager.d.ts} +11 -6
  14. package/dist/{AttributesDelegate.d.ts → src/AttributesDelegate.d.ts} +5 -2
  15. package/dist/{BoxEmitter.d.ts → src/BoxEmitter.d.ts} +0 -0
  16. package/dist/{BoxManager.d.ts → src/BoxManager.d.ts} +12 -6
  17. package/dist/{BuiltinApps.d.ts → src/BuiltinApps.d.ts} +3 -0
  18. package/dist/{Cursor → src/Cursor}/Cursor.d.ts +0 -0
  19. package/dist/{Cursor → src/Cursor}/icons.d.ts +0 -0
  20. package/dist/{Cursor → src/Cursor}/index.d.ts +4 -3
  21. package/dist/{Helper.d.ts → src/Helper.d.ts} +4 -8
  22. package/dist/{InternalEmitter.d.ts → src/InternalEmitter.d.ts} +1 -4
  23. package/dist/{Page → src/Page}/PageController.d.ts +2 -1
  24. package/dist/{Page → src/Page}/index.d.ts +0 -0
  25. package/dist/{PageState.d.ts → src/PageState.d.ts} +0 -0
  26. package/dist/{ReconnectRefresher.d.ts → src/ReconnectRefresher.d.ts} +0 -0
  27. package/dist/{RedoUndo.d.ts → src/RedoUndo.d.ts} +0 -0
  28. package/dist/{Register → src/Register}/index.d.ts +4 -2
  29. package/dist/{Register → src/Register}/loader.d.ts +1 -1
  30. package/dist/src/Register/storage.d.ts +11 -0
  31. package/dist/{Utils → src/Utils}/AppCreateQueue.d.ts +0 -0
  32. package/dist/{Utils → src/Utils}/Common.d.ts +0 -0
  33. package/dist/{Utils → src/Utils}/Reactive.d.ts +1 -1
  34. package/dist/{Utils → src/Utils}/RoomHacker.d.ts +0 -0
  35. package/dist/{Utils → src/Utils}/error.d.ts +1 -1
  36. package/dist/{Utils → src/Utils}/log.d.ts +0 -0
  37. package/dist/src/View/CameraSynchronizer.d.ts +20 -0
  38. package/dist/{View → src/View}/MainView.d.ts +18 -7
  39. package/dist/src/View/ScrollMode.d.ts +32 -0
  40. package/dist/{View → src/View}/ViewManager.d.ts +0 -0
  41. package/dist/src/View/ViewSync.d.ts +32 -0
  42. package/dist/{callback.d.ts → src/callback.d.ts} +13 -1
  43. package/dist/{constants.d.ts → src/constants.d.ts} +12 -5
  44. package/dist/src/image.d.ts +19 -0
  45. package/dist/{index.d.ts → src/index.d.ts} +66 -17
  46. package/dist/src/shim.d.ts +11 -0
  47. package/dist/src/storage.d.ts +7 -0
  48. package/dist/{typings.d.ts → src/typings.d.ts} +18 -8
  49. package/dist/style.css +810 -1
  50. package/docs/api.md +10 -0
  51. package/docs/app-context.md +155 -27
  52. package/docs/mirgrate-to-1.0.md +68 -0
  53. package/package.json +27 -22
  54. package/playwright.config.ts +29 -0
  55. package/pnpm-lock.yaml +3141 -4483
  56. package/src/App/AppContext.ts +81 -46
  57. package/src/App/AppProxy.ts +249 -139
  58. package/src/App/WhiteboardView.ts +38 -14
  59. package/src/App/index.ts +1 -0
  60. package/src/App/type.ts +22 -0
  61. package/src/AppListener.ts +21 -21
  62. package/src/AppManager.ts +84 -43
  63. package/src/AttributesDelegate.ts +6 -3
  64. package/src/BoxManager.ts +76 -38
  65. package/src/BuiltinApps.ts +9 -8
  66. package/src/Cursor/Cursor.svelte +6 -2
  67. package/src/Cursor/Cursor.ts +16 -5
  68. package/src/Cursor/icons.ts +6 -0
  69. package/src/Cursor/index.ts +13 -10
  70. package/src/Helper.ts +25 -7
  71. package/src/InternalEmitter.ts +1 -4
  72. package/src/Page/PageController.ts +2 -1
  73. package/src/PageState.ts +1 -1
  74. package/src/ReconnectRefresher.ts +6 -2
  75. package/src/Register/index.ts +36 -14
  76. package/src/Register/loader.ts +20 -9
  77. package/src/Register/storage.ts +26 -5
  78. package/src/Utils/Common.ts +3 -0
  79. package/src/Utils/Reactive.ts +29 -27
  80. package/src/Utils/RoomHacker.ts +3 -0
  81. package/src/Utils/error.ts +2 -2
  82. package/src/View/CameraSynchronizer.ts +52 -37
  83. package/src/View/MainView.ts +118 -76
  84. package/src/View/ScrollMode.ts +239 -0
  85. package/src/View/ViewSync.ts +139 -6
  86. package/src/callback.ts +9 -1
  87. package/src/constants.ts +11 -3
  88. package/src/image/pencil-eraser-1.svg +3 -0
  89. package/src/image/pencil-eraser-2.svg +3 -0
  90. package/src/image/pencil-eraser-3.svg +3 -0
  91. package/src/index.ts +202 -58
  92. package/src/storage.ts +15 -0
  93. package/src/style.css +18 -47
  94. package/src/typings.ts +21 -7
  95. package/vite.config.js +12 -7
  96. package/dist/App/AppViewSync.d.ts +0 -11
  97. package/dist/App/Storage/StorageEvent.d.ts +0 -8
  98. package/dist/App/Storage/index.d.ts +0 -39
  99. package/dist/App/Storage/typings.d.ts +0 -22
  100. package/dist/App/Storage/utils.d.ts +0 -5
  101. package/dist/App/WhiteboardView.d.ts +0 -21
  102. package/dist/Register/storage.d.ts +0 -8
  103. package/dist/View/CameraSynchronizer.d.ts +0 -17
  104. package/dist/View/ViewSync.d.ts +0 -7
  105. package/dist/index.cjs.js +0 -46
  106. package/dist/index.es.js +0 -16159
  107. package/src/App/AppViewSync.ts +0 -68
  108. package/src/App/Storage/StorageEvent.ts +0 -21
  109. package/src/App/Storage/index.ts +0 -295
  110. package/src/App/Storage/typings.ts +0 -23
  111. package/src/App/Storage/utils.ts +0 -17
@@ -1,10 +1,143 @@
1
- import type { Camera, Size } from "white-web-sdk";
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
- export interface ViewSync {
5
- readonly camera: Camera;
6
- readonly size: Size;
20
+ stageRect$: ReadonlyVal<TeleBoxRect>;
7
21
 
8
- setCamera: (camera: Camera) => void;
9
- setSize: (size: Size) => void;
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;
@@ -0,0 +1,3 @@
1
+ <svg width="18" height="26" viewBox="0 0 18 26" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="17" height="25" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="26" height="34" viewBox="0 0 26 34" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="25" height="33" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg width="34" height="50" viewBox="0 0 34 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <rect x="0.5" y="0.5" width="33" height="49" rx="3.5" fill="black" fill-opacity="0.35" stroke="white"/>
3
+ </svg>