@netless/window-manager 1.0.0-canary.62 → 1.0.0-canary.64

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/dist/index.js CHANGED
@@ -238,25 +238,25 @@ function deleteRecord(db2, key) {
238
238
  request.onerror = () => reject();
239
239
  });
240
240
  }
241
- var __defProp$8 = Object.defineProperty;
242
- var __defProps$4 = Object.defineProperties;
243
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
244
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
245
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
246
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
247
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
248
- var __spreadValues$8 = (a, b) => {
241
+ var __defProp$9 = Object.defineProperty;
242
+ var __defProps$5 = Object.defineProperties;
243
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
244
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
245
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
246
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
247
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
248
+ var __spreadValues$9 = (a, b) => {
249
249
  for (var prop in b || (b = {}))
250
- if (__hasOwnProp$8.call(b, prop))
251
- __defNormalProp$8(a, prop, b[prop]);
252
- if (__getOwnPropSymbols$8)
253
- for (var prop of __getOwnPropSymbols$8(b)) {
254
- if (__propIsEnum$8.call(b, prop))
255
- __defNormalProp$8(a, prop, b[prop]);
250
+ if (__hasOwnProp$9.call(b, prop))
251
+ __defNormalProp$9(a, prop, b[prop]);
252
+ if (__getOwnPropSymbols$9)
253
+ for (var prop of __getOwnPropSymbols$9(b)) {
254
+ if (__propIsEnum$9.call(b, prop))
255
+ __defNormalProp$9(a, prop, b[prop]);
256
256
  }
257
257
  return a;
258
258
  };
259
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
259
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
260
260
  var __async$b = (__this, __arguments, generator) => {
261
261
  return new Promise((resolve, reject) => {
262
262
  var fulfilled = (value) => {
@@ -339,7 +339,7 @@ function fetchWithTimeout(resource, options) {
339
339
  const { timeout = 1e4 } = options;
340
340
  const controller = new AbortController();
341
341
  const id = setTimeout(() => controller.abort(), timeout);
342
- const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
342
+ const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
343
343
  signal: controller.signal,
344
344
  headers: {
345
345
  "content-type": "text/plain"
@@ -606,6 +606,25 @@ const isRootDirPage = (scenePath) => {
606
606
  }, 0);
607
607
  return delimiterCount === 1;
608
608
  };
609
+ var __defProp$8 = Object.defineProperty;
610
+ var __defProps$4 = Object.defineProperties;
611
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
612
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
613
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
614
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
615
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
616
+ var __spreadValues$8 = (a, b) => {
617
+ for (var prop in b || (b = {}))
618
+ if (__hasOwnProp$8.call(b, prop))
619
+ __defNormalProp$8(a, prop, b[prop]);
620
+ if (__getOwnPropSymbols$8)
621
+ for (var prop of __getOwnPropSymbols$8(b)) {
622
+ if (__propIsEnum$8.call(b, prop))
623
+ __defNormalProp$8(a, prop, b[prop]);
624
+ }
625
+ return a;
626
+ };
627
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
609
628
  class AppListeners {
610
629
  constructor(manager) {
611
630
  this.manager = manager;
@@ -706,7 +725,13 @@ class AppListeners {
706
725
  }
707
726
  };
708
727
  this.moveCameraHandler = (payload) => {
709
- this.manager.mainView.moveCamera(payload);
728
+ const size$ = this.manager.mainViewProxy.size$;
729
+ if (size$.value) {
730
+ const size = this.manager.mainView.size;
731
+ const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
732
+ const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
733
+ this.manager.mainView.moveCamera(nextCamera);
734
+ }
710
735
  };
711
736
  this.moveCameraToContainHandler = (payload) => {
712
737
  this.manager.mainView.moveCameraToContain(payload);
@@ -848,7 +873,7 @@ class WhiteBoardView {
848
873
  const camera$ = new valueEnhancer.Val(pickCamera(this.view.camera));
849
874
  this.baseRect$ = baseRect$;
850
875
  this.pageState$ = pageState$;
851
- this.baseCamera$ = camera$;
876
+ this.camera$ = camera$;
852
877
  this.appProxy.sideEffectManager.add(() => [
853
878
  appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
854
879
  appProxy.camera$.subscribe((camera) => {
@@ -1252,15 +1277,17 @@ class CameraSynchronizer {
1252
1277
  this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
1253
1278
  }
1254
1279
  };
1255
- this.onRemoteUpdate = lodash.throttle((camera, size) => {
1280
+ this.onRemoteUpdate = lodash.throttle((camera, size, skipUpdate = false) => {
1256
1281
  this.remoteCamera = camera;
1257
1282
  this.remoteSize = size;
1258
- if (this.remoteSize && this.rect) {
1259
- requestAnimationFrame(() => {
1260
- this.moveCameraToContian(size);
1283
+ if (skipUpdate)
1284
+ return;
1285
+ requestAnimationFrame(() => {
1286
+ if (this.remoteSize && this.rect) {
1287
+ this.moveCameraToContian(this.remoteSize);
1261
1288
  this.moveCamera(camera);
1262
- });
1263
- }
1289
+ }
1290
+ });
1264
1291
  }, 32);
1265
1292
  }
1266
1293
  setView(view) {
@@ -1278,8 +1305,10 @@ class CameraSynchronizer {
1278
1305
  width: size.width,
1279
1306
  height: size.height,
1280
1307
  originX: currentCamera.centerX - size.width / 2,
1281
- originY: currentCamera.centerY - size.height / 2
1308
+ originY: currentCamera.centerY - size.height / 2,
1309
+ animationMode: whiteWebSdk.AnimationMode.Immediately
1282
1310
  });
1311
+ this.moveCamera(this.remoteCamera);
1283
1312
  }
1284
1313
  }
1285
1314
  onLocalCameraUpdate(camera) {
@@ -1299,7 +1328,7 @@ class CameraSynchronizer {
1299
1328
  }
1300
1329
  }
1301
1330
  moveCamera(camera) {
1302
- if (!lodash.isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
1331
+ if (!lodash.isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
1303
1332
  if (lodash.isEqual(camera, this.view.camera))
1304
1333
  return;
1305
1334
  const { centerX, centerY, scale: scale2 } = camera;
@@ -1363,11 +1392,9 @@ class ViewSync {
1363
1392
  };
1364
1393
  this.subscribeCamera = () => {
1365
1394
  return this.context.camera$.subscribe((camera, skipUpdate) => {
1366
- if (skipUpdate)
1367
- return;
1368
1395
  const size = this.context.size$.value;
1369
1396
  if (camera && size) {
1370
- this.synchronizer.onRemoteUpdate(camera, size);
1397
+ this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
1371
1398
  }
1372
1399
  });
1373
1400
  };
@@ -2448,6 +2475,10 @@ class MainViewProxy {
2448
2475
  this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
2449
2476
  this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
2450
2477
  };
2478
+ this.saveToCamera$ = () => {
2479
+ const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
2480
+ this.camera$.setValue(camera, true);
2481
+ };
2451
2482
  this.storeCurrentCamera = () => {
2452
2483
  const iCamera = this.view.camera;
2453
2484
  this.storeCamera(__spreadValues$2({
@@ -2529,11 +2560,6 @@ class MainViewProxy {
2529
2560
  }
2530
2561
  }
2531
2562
  }));
2532
- this.camera$.reaction((camera) => {
2533
- if (camera) {
2534
- callbacks.emit("baseCameraChange", camera);
2535
- }
2536
- });
2537
2563
  this.size$.reaction((size) => {
2538
2564
  if (size) {
2539
2565
  callbacks.emit("baseSizeChange", size);
@@ -7331,14 +7357,14 @@ class Cursor {
7331
7357
  var _a2;
7332
7358
  if (this.member) {
7333
7359
  const icons = this.cursorManager.applianceIcons;
7334
- let applianceSrc = icons[whiteWebSdk.ApplianceNames.shape];
7360
+ let applianceSrc;
7335
7361
  if (this.memberApplianceName === whiteWebSdk.ApplianceNames.pencilEraser) {
7336
7362
  const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
7337
7363
  applianceSrc = icons[`${this.memberApplianceName}${size}`];
7338
7364
  } else {
7339
7365
  applianceSrc = icons[this.memberApplianceName || whiteWebSdk.ApplianceNames.shape];
7340
7366
  }
7341
- return applianceSrc;
7367
+ return applianceSrc || icons[whiteWebSdk.ApplianceNames.shape];
7342
7368
  }
7343
7369
  }
7344
7370
  updateMember() {
@@ -7513,7 +7539,8 @@ class CursorManager {
7513
7539
  return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
7514
7540
  }
7515
7541
  updateCursor(event, clientX, clientY) {
7516
- if (this.wrapperRect && this.manager.canOperate) {
7542
+ const self = findMemberByUid(this.manager.room, this.manager.uid);
7543
+ if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
7517
7544
  const view = event.type === "main" ? this.manager.mainView : this.focusView;
7518
7545
  const point = this.getPoint(view, clientX, clientY);
7519
7546
  if (point) {
@@ -12724,7 +12751,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
12724
12751
  const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
12725
12752
  constructor(context) {
12726
12753
  super(context);
12727
- this.version = "1.0.0-canary.62";
12754
+ this.version = "1.0.0-canary.64";
12728
12755
  this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12729
12756
  this.emitter = callbacks;
12730
12757
  this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -12742,14 +12769,19 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
12742
12769
  (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
12743
12770
  };
12744
12771
  this.debouncedStoreCamera = () => {
12745
- const storeCamera = lodash.debounce(() => {
12746
- var _a2, _b;
12747
- (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12748
- (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12749
- this.mainView.callbacks.off("onCameraUpdated", storeCamera);
12750
- }, 200);
12751
- this.mainView.callbacks.on("onCameraUpdated", storeCamera);
12772
+ const cameraListener = lodash.debounce(() => {
12773
+ var _a2;
12774
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
12775
+ this.storeCamera();
12776
+ this.mainView.callbacks.off("onCameraUpdated", cameraListener);
12777
+ }, 50);
12778
+ this.mainView.callbacks.on("onCameraUpdated", cameraListener);
12752
12779
  };
12780
+ this.storeCamera = lodash.debounce(() => {
12781
+ var _a2, _b;
12782
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12783
+ (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12784
+ }, 300);
12753
12785
  _WindowManager.displayer = context.displayer;
12754
12786
  window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12755
12787
  }
@@ -13131,8 +13163,8 @@ const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
13131
13163
  var _a2;
13132
13164
  log("setViewMode", mode);
13133
13165
  const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
13134
- if (mode === whiteWebSdk.ViewMode.Broadcaster) {
13135
- if (this.canOperate) {
13166
+ if (mode === whiteWebSdk.ViewMode.Broadcaster || mode === whiteWebSdk.ViewMode.Follower) {
13167
+ if (this.canOperate && mode === whiteWebSdk.ViewMode.Broadcaster) {
13136
13168
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
13137
13169
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
13138
13170
  }
package/dist/index.mjs CHANGED
@@ -233,25 +233,25 @@ function deleteRecord(db2, key) {
233
233
  request.onerror = () => reject();
234
234
  });
235
235
  }
236
- var __defProp$8 = Object.defineProperty;
237
- var __defProps$4 = Object.defineProperties;
238
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
239
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
240
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
241
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
242
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
243
- var __spreadValues$8 = (a, b) => {
236
+ var __defProp$9 = Object.defineProperty;
237
+ var __defProps$5 = Object.defineProperties;
238
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
239
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
240
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
241
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
242
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
243
+ var __spreadValues$9 = (a, b) => {
244
244
  for (var prop in b || (b = {}))
245
- if (__hasOwnProp$8.call(b, prop))
246
- __defNormalProp$8(a, prop, b[prop]);
247
- if (__getOwnPropSymbols$8)
248
- for (var prop of __getOwnPropSymbols$8(b)) {
249
- if (__propIsEnum$8.call(b, prop))
250
- __defNormalProp$8(a, prop, b[prop]);
245
+ if (__hasOwnProp$9.call(b, prop))
246
+ __defNormalProp$9(a, prop, b[prop]);
247
+ if (__getOwnPropSymbols$9)
248
+ for (var prop of __getOwnPropSymbols$9(b)) {
249
+ if (__propIsEnum$9.call(b, prop))
250
+ __defNormalProp$9(a, prop, b[prop]);
251
251
  }
252
252
  return a;
253
253
  };
254
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
254
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
255
255
  var __async$b = (__this, __arguments, generator) => {
256
256
  return new Promise((resolve, reject) => {
257
257
  var fulfilled = (value) => {
@@ -334,7 +334,7 @@ function fetchWithTimeout(resource, options) {
334
334
  const { timeout = 1e4 } = options;
335
335
  const controller = new AbortController();
336
336
  const id = setTimeout(() => controller.abort(), timeout);
337
- const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
337
+ const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
338
338
  signal: controller.signal,
339
339
  headers: {
340
340
  "content-type": "text/plain"
@@ -601,6 +601,25 @@ const isRootDirPage = (scenePath) => {
601
601
  }, 0);
602
602
  return delimiterCount === 1;
603
603
  };
604
+ var __defProp$8 = Object.defineProperty;
605
+ var __defProps$4 = Object.defineProperties;
606
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
607
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
608
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
609
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
610
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
611
+ var __spreadValues$8 = (a, b) => {
612
+ for (var prop in b || (b = {}))
613
+ if (__hasOwnProp$8.call(b, prop))
614
+ __defNormalProp$8(a, prop, b[prop]);
615
+ if (__getOwnPropSymbols$8)
616
+ for (var prop of __getOwnPropSymbols$8(b)) {
617
+ if (__propIsEnum$8.call(b, prop))
618
+ __defNormalProp$8(a, prop, b[prop]);
619
+ }
620
+ return a;
621
+ };
622
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
604
623
  class AppListeners {
605
624
  constructor(manager) {
606
625
  this.manager = manager;
@@ -701,7 +720,13 @@ class AppListeners {
701
720
  }
702
721
  };
703
722
  this.moveCameraHandler = (payload) => {
704
- this.manager.mainView.moveCamera(payload);
723
+ const size$ = this.manager.mainViewProxy.size$;
724
+ if (size$.value) {
725
+ const size = this.manager.mainView.size;
726
+ const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
727
+ const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
728
+ this.manager.mainView.moveCamera(nextCamera);
729
+ }
705
730
  };
706
731
  this.moveCameraToContainHandler = (payload) => {
707
732
  this.manager.mainView.moveCameraToContain(payload);
@@ -843,7 +868,7 @@ class WhiteBoardView {
843
868
  const camera$ = new Val(pickCamera(this.view.camera));
844
869
  this.baseRect$ = baseRect$;
845
870
  this.pageState$ = pageState$;
846
- this.baseCamera$ = camera$;
871
+ this.camera$ = camera$;
847
872
  this.appProxy.sideEffectManager.add(() => [
848
873
  appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
849
874
  appProxy.camera$.subscribe((camera) => {
@@ -1247,15 +1272,17 @@ class CameraSynchronizer {
1247
1272
  this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
1248
1273
  }
1249
1274
  };
1250
- this.onRemoteUpdate = throttle((camera, size) => {
1275
+ this.onRemoteUpdate = throttle((camera, size, skipUpdate = false) => {
1251
1276
  this.remoteCamera = camera;
1252
1277
  this.remoteSize = size;
1253
- if (this.remoteSize && this.rect) {
1254
- requestAnimationFrame(() => {
1255
- this.moveCameraToContian(size);
1278
+ if (skipUpdate)
1279
+ return;
1280
+ requestAnimationFrame(() => {
1281
+ if (this.remoteSize && this.rect) {
1282
+ this.moveCameraToContian(this.remoteSize);
1256
1283
  this.moveCamera(camera);
1257
- });
1258
- }
1284
+ }
1285
+ });
1259
1286
  }, 32);
1260
1287
  }
1261
1288
  setView(view) {
@@ -1273,8 +1300,10 @@ class CameraSynchronizer {
1273
1300
  width: size.width,
1274
1301
  height: size.height,
1275
1302
  originX: currentCamera.centerX - size.width / 2,
1276
- originY: currentCamera.centerY - size.height / 2
1303
+ originY: currentCamera.centerY - size.height / 2,
1304
+ animationMode: AnimationMode.Immediately
1277
1305
  });
1306
+ this.moveCamera(this.remoteCamera);
1278
1307
  }
1279
1308
  }
1280
1309
  onLocalCameraUpdate(camera) {
@@ -1294,7 +1323,7 @@ class CameraSynchronizer {
1294
1323
  }
1295
1324
  }
1296
1325
  moveCamera(camera) {
1297
- if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
1326
+ if (!isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
1298
1327
  if (isEqual(camera, this.view.camera))
1299
1328
  return;
1300
1329
  const { centerX, centerY, scale: scale2 } = camera;
@@ -1358,11 +1387,9 @@ class ViewSync {
1358
1387
  };
1359
1388
  this.subscribeCamera = () => {
1360
1389
  return this.context.camera$.subscribe((camera, skipUpdate) => {
1361
- if (skipUpdate)
1362
- return;
1363
1390
  const size = this.context.size$.value;
1364
1391
  if (camera && size) {
1365
- this.synchronizer.onRemoteUpdate(camera, size);
1392
+ this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
1366
1393
  }
1367
1394
  });
1368
1395
  };
@@ -2443,6 +2470,10 @@ class MainViewProxy {
2443
2470
  this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
2444
2471
  this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
2445
2472
  };
2473
+ this.saveToCamera$ = () => {
2474
+ const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
2475
+ this.camera$.setValue(camera, true);
2476
+ };
2446
2477
  this.storeCurrentCamera = () => {
2447
2478
  const iCamera = this.view.camera;
2448
2479
  this.storeCamera(__spreadValues$2({
@@ -2524,11 +2555,6 @@ class MainViewProxy {
2524
2555
  }
2525
2556
  }
2526
2557
  }));
2527
- this.camera$.reaction((camera) => {
2528
- if (camera) {
2529
- callbacks.emit("baseCameraChange", camera);
2530
- }
2531
- });
2532
2558
  this.size$.reaction((size) => {
2533
2559
  if (size) {
2534
2560
  callbacks.emit("baseSizeChange", size);
@@ -7326,14 +7352,14 @@ class Cursor {
7326
7352
  var _a2;
7327
7353
  if (this.member) {
7328
7354
  const icons = this.cursorManager.applianceIcons;
7329
- let applianceSrc = icons[ApplianceNames.shape];
7355
+ let applianceSrc;
7330
7356
  if (this.memberApplianceName === ApplianceNames.pencilEraser) {
7331
7357
  const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
7332
7358
  applianceSrc = icons[`${this.memberApplianceName}${size}`];
7333
7359
  } else {
7334
7360
  applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
7335
7361
  }
7336
- return applianceSrc;
7362
+ return applianceSrc || icons[ApplianceNames.shape];
7337
7363
  }
7338
7364
  }
7339
7365
  updateMember() {
@@ -7508,7 +7534,8 @@ class CursorManager {
7508
7534
  return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
7509
7535
  }
7510
7536
  updateCursor(event, clientX, clientY) {
7511
- if (this.wrapperRect && this.manager.canOperate) {
7537
+ const self = findMemberByUid(this.manager.room, this.manager.uid);
7538
+ if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
7512
7539
  const view = event.type === "main" ? this.manager.mainView : this.focusView;
7513
7540
  const point = this.getPoint(view, clientX, clientY);
7514
7541
  if (point) {
@@ -12719,7 +12746,7 @@ const reconnectRefresher = new ReconnectRefresher({ emitter });
12719
12746
  const _WindowManager = class extends InvisiblePlugin {
12720
12747
  constructor(context) {
12721
12748
  super(context);
12722
- this.version = "1.0.0-canary.62";
12749
+ this.version = "1.0.0-canary.64";
12723
12750
  this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12724
12751
  this.emitter = callbacks;
12725
12752
  this.viewMode$ = new Val(ViewMode.Broadcaster);
@@ -12737,14 +12764,19 @@ const _WindowManager = class extends InvisiblePlugin {
12737
12764
  (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
12738
12765
  };
12739
12766
  this.debouncedStoreCamera = () => {
12740
- const storeCamera = debounce(() => {
12741
- var _a2, _b;
12742
- (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12743
- (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12744
- this.mainView.callbacks.off("onCameraUpdated", storeCamera);
12745
- }, 200);
12746
- this.mainView.callbacks.on("onCameraUpdated", storeCamera);
12767
+ const cameraListener = debounce(() => {
12768
+ var _a2;
12769
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
12770
+ this.storeCamera();
12771
+ this.mainView.callbacks.off("onCameraUpdated", cameraListener);
12772
+ }, 50);
12773
+ this.mainView.callbacks.on("onCameraUpdated", cameraListener);
12747
12774
  };
12775
+ this.storeCamera = debounce(() => {
12776
+ var _a2, _b;
12777
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12778
+ (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12779
+ }, 300);
12748
12780
  _WindowManager.displayer = context.displayer;
12749
12781
  window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12750
12782
  }
@@ -13126,8 +13158,8 @@ const _WindowManager = class extends InvisiblePlugin {
13126
13158
  var _a2;
13127
13159
  log("setViewMode", mode);
13128
13160
  const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
13129
- if (mode === ViewMode.Broadcaster) {
13130
- if (this.canOperate) {
13161
+ if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
13162
+ if (this.canOperate && mode === ViewMode.Broadcaster) {
13131
13163
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
13132
13164
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
13133
13165
  }
package/dist/index.umd.js CHANGED
@@ -231,25 +231,25 @@
231
231
  request.onerror = () => reject();
232
232
  });
233
233
  }
234
- var __defProp$8 = Object.defineProperty;
235
- var __defProps$4 = Object.defineProperties;
236
- var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
237
- var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
238
- var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
239
- var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
240
- var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
241
- var __spreadValues$8 = (a, b) => {
234
+ var __defProp$9 = Object.defineProperty;
235
+ var __defProps$5 = Object.defineProperties;
236
+ var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
237
+ var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
238
+ var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
239
+ var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
240
+ var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
241
+ var __spreadValues$9 = (a, b) => {
242
242
  for (var prop in b || (b = {}))
243
- if (__hasOwnProp$8.call(b, prop))
244
- __defNormalProp$8(a, prop, b[prop]);
245
- if (__getOwnPropSymbols$8)
246
- for (var prop of __getOwnPropSymbols$8(b)) {
247
- if (__propIsEnum$8.call(b, prop))
248
- __defNormalProp$8(a, prop, b[prop]);
243
+ if (__hasOwnProp$9.call(b, prop))
244
+ __defNormalProp$9(a, prop, b[prop]);
245
+ if (__getOwnPropSymbols$9)
246
+ for (var prop of __getOwnPropSymbols$9(b)) {
247
+ if (__propIsEnum$9.call(b, prop))
248
+ __defNormalProp$9(a, prop, b[prop]);
249
249
  }
250
250
  return a;
251
251
  };
252
- var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
252
+ var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
253
253
  var __async$b = (__this, __arguments, generator) => {
254
254
  return new Promise((resolve, reject) => {
255
255
  var fulfilled = (value) => {
@@ -332,7 +332,7 @@
332
332
  const { timeout = 1e4 } = options;
333
333
  const controller = new AbortController();
334
334
  const id = setTimeout(() => controller.abort(), timeout);
335
- const response = yield fetch(resource, __spreadProps$4(__spreadValues$8({}, options), {
335
+ const response = yield fetch(resource, __spreadProps$5(__spreadValues$9({}, options), {
336
336
  signal: controller.signal,
337
337
  headers: {
338
338
  "content-type": "text/plain"
@@ -599,6 +599,25 @@
599
599
  }, 0);
600
600
  return delimiterCount === 1;
601
601
  };
602
+ var __defProp$8 = Object.defineProperty;
603
+ var __defProps$4 = Object.defineProperties;
604
+ var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
605
+ var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
606
+ var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
607
+ var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
608
+ var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
609
+ var __spreadValues$8 = (a, b) => {
610
+ for (var prop in b || (b = {}))
611
+ if (__hasOwnProp$8.call(b, prop))
612
+ __defNormalProp$8(a, prop, b[prop]);
613
+ if (__getOwnPropSymbols$8)
614
+ for (var prop of __getOwnPropSymbols$8(b)) {
615
+ if (__propIsEnum$8.call(b, prop))
616
+ __defNormalProp$8(a, prop, b[prop]);
617
+ }
618
+ return a;
619
+ };
620
+ var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
602
621
  class AppListeners {
603
622
  constructor(manager) {
604
623
  this.manager = manager;
@@ -699,7 +718,13 @@
699
718
  }
700
719
  };
701
720
  this.moveCameraHandler = (payload) => {
702
- this.manager.mainView.moveCamera(payload);
721
+ const size$ = this.manager.mainViewProxy.size$;
722
+ if (size$.value) {
723
+ const size = this.manager.mainView.size;
724
+ const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
725
+ const nextCamera = __spreadProps$4(__spreadValues$8({}, payload), { scale: payload.scale * diff });
726
+ this.manager.mainView.moveCamera(nextCamera);
727
+ }
703
728
  };
704
729
  this.moveCameraToContainHandler = (payload) => {
705
730
  this.manager.mainView.moveCameraToContain(payload);
@@ -841,7 +866,7 @@
841
866
  const camera$ = new valueEnhancer.Val(pickCamera(this.view.camera));
842
867
  this.baseRect$ = baseRect$;
843
868
  this.pageState$ = pageState$;
844
- this.baseCamera$ = camera$;
869
+ this.camera$ = camera$;
845
870
  this.appProxy.sideEffectManager.add(() => [
846
871
  appProxy.appEmitter.on("pageStateChange", (pageState) => pageState$.setValue(pageState)),
847
872
  appProxy.camera$.subscribe((camera) => {
@@ -1245,15 +1270,17 @@
1245
1270
  this.onRemoteUpdate(this.remoteCamera, this.remoteSize);
1246
1271
  }
1247
1272
  };
1248
- this.onRemoteUpdate = lodash.throttle((camera, size) => {
1273
+ this.onRemoteUpdate = lodash.throttle((camera, size, skipUpdate = false) => {
1249
1274
  this.remoteCamera = camera;
1250
1275
  this.remoteSize = size;
1251
- if (this.remoteSize && this.rect) {
1252
- requestAnimationFrame(() => {
1253
- this.moveCameraToContian(size);
1276
+ if (skipUpdate)
1277
+ return;
1278
+ requestAnimationFrame(() => {
1279
+ if (this.remoteSize && this.rect) {
1280
+ this.moveCameraToContian(this.remoteSize);
1254
1281
  this.moveCamera(camera);
1255
- });
1256
- }
1282
+ }
1283
+ });
1257
1284
  }, 32);
1258
1285
  }
1259
1286
  setView(view) {
@@ -1271,8 +1298,10 @@
1271
1298
  width: size.width,
1272
1299
  height: size.height,
1273
1300
  originX: currentCamera.centerX - size.width / 2,
1274
- originY: currentCamera.centerY - size.height / 2
1301
+ originY: currentCamera.centerY - size.height / 2,
1302
+ animationMode: whiteWebSdk.AnimationMode.Immediately
1275
1303
  });
1304
+ this.moveCamera(this.remoteCamera);
1276
1305
  }
1277
1306
  }
1278
1307
  onLocalCameraUpdate(camera) {
@@ -1292,7 +1321,7 @@
1292
1321
  }
1293
1322
  }
1294
1323
  moveCamera(camera) {
1295
- if (!lodash.isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
1324
+ if (!lodash.isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
1296
1325
  if (lodash.isEqual(camera, this.view.camera))
1297
1326
  return;
1298
1327
  const { centerX, centerY, scale: scale2 } = camera;
@@ -1356,11 +1385,9 @@
1356
1385
  };
1357
1386
  this.subscribeCamera = () => {
1358
1387
  return this.context.camera$.subscribe((camera, skipUpdate) => {
1359
- if (skipUpdate)
1360
- return;
1361
1388
  const size = this.context.size$.value;
1362
1389
  if (camera && size) {
1363
- this.synchronizer.onRemoteUpdate(camera, size);
1390
+ this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
1364
1391
  }
1365
1392
  });
1366
1393
  };
@@ -2441,6 +2468,10 @@
2441
2468
  this.manager.refresher.add(Fields.MainViewCamera, this.cameraReaction);
2442
2469
  this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
2443
2470
  };
2471
+ this.saveToCamera$ = () => {
2472
+ const camera = __spreadProps$1(__spreadValues$2({}, this.view.camera), { id: this.manager.uid });
2473
+ this.camera$.setValue(camera, true);
2474
+ };
2444
2475
  this.storeCurrentCamera = () => {
2445
2476
  const iCamera = this.view.camera;
2446
2477
  this.storeCamera(__spreadValues$2({
@@ -2522,11 +2553,6 @@
2522
2553
  }
2523
2554
  }
2524
2555
  }));
2525
- this.camera$.reaction((camera) => {
2526
- if (camera) {
2527
- callbacks.emit("baseCameraChange", camera);
2528
- }
2529
- });
2530
2556
  this.size$.reaction((size) => {
2531
2557
  if (size) {
2532
2558
  callbacks.emit("baseSizeChange", size);
@@ -7324,14 +7350,14 @@
7324
7350
  var _a2;
7325
7351
  if (this.member) {
7326
7352
  const icons = this.cursorManager.applianceIcons;
7327
- let applianceSrc = icons[whiteWebSdk.ApplianceNames.shape];
7353
+ let applianceSrc;
7328
7354
  if (this.memberApplianceName === whiteWebSdk.ApplianceNames.pencilEraser) {
7329
7355
  const size = ((_a2 = this.member) == null ? void 0 : _a2.memberState.pencilEraserSize) || 1;
7330
7356
  applianceSrc = icons[`${this.memberApplianceName}${size}`];
7331
7357
  } else {
7332
7358
  applianceSrc = icons[this.memberApplianceName || whiteWebSdk.ApplianceNames.shape];
7333
7359
  }
7334
- return applianceSrc;
7360
+ return applianceSrc || icons[whiteWebSdk.ApplianceNames.shape];
7335
7361
  }
7336
7362
  }
7337
7363
  updateMember() {
@@ -7506,7 +7532,8 @@
7506
7532
  return (_a2 = this.manager.focusApp) == null ? void 0 : _a2.view;
7507
7533
  }
7508
7534
  updateCursor(event, clientX, clientY) {
7509
- if (this.wrapperRect && this.manager.canOperate) {
7535
+ const self2 = findMemberByUid(this.manager.room, this.manager.uid);
7536
+ if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self2)) {
7510
7537
  const view = event.type === "main" ? this.manager.mainView : this.focusView;
7511
7538
  const point = this.getPoint(view, clientX, clientY);
7512
7539
  if (point) {
@@ -12717,7 +12744,7 @@
12717
12744
  const _WindowManager = class extends whiteWebSdk.InvisiblePlugin {
12718
12745
  constructor(context) {
12719
12746
  super(context);
12720
- this.version = "1.0.0-canary.62";
12747
+ this.version = "1.0.0-canary.64";
12721
12748
  this.dependencies = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12722
12749
  this.emitter = callbacks;
12723
12750
  this.viewMode$ = new valueEnhancer.Val(whiteWebSdk.ViewMode.Broadcaster);
@@ -12735,14 +12762,19 @@
12735
12762
  (_a2 = this.appManager) == null ? void 0 : _a2.dispatchInternalEvent(Events.MoveCamera, camera);
12736
12763
  };
12737
12764
  this.debouncedStoreCamera = () => {
12738
- const storeCamera = lodash.debounce(() => {
12739
- var _a2, _b;
12740
- (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12741
- (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12742
- this.mainView.callbacks.off("onCameraUpdated", storeCamera);
12743
- }, 200);
12744
- this.mainView.callbacks.on("onCameraUpdated", storeCamera);
12765
+ const cameraListener = lodash.debounce(() => {
12766
+ var _a2;
12767
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.saveToCamera$();
12768
+ this.storeCamera();
12769
+ this.mainView.callbacks.off("onCameraUpdated", cameraListener);
12770
+ }, 50);
12771
+ this.mainView.callbacks.on("onCameraUpdated", cameraListener);
12745
12772
  };
12773
+ this.storeCamera = lodash.debounce(() => {
12774
+ var _a2, _b;
12775
+ (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy.storeCurrentCamera();
12776
+ (_b = this.appManager) == null ? void 0 : _b.mainViewProxy.storeCurrentSize();
12777
+ }, 300);
12746
12778
  _WindowManager.displayer = context.displayer;
12747
12779
  window.NETLESS_DEPS = { "dependencies": { "@juggle/resize-observer": "^3.3.1", "@netless/synced-store": "^2.0.7", "@netless/telebox-insider": "1.0.0-alpha.37", "emittery": "^0.11.0", "lodash": "^4.17.21", "p-retry": "^4.6.2", "side-effect-manager": "^1.2.1", "uuid": "^7.0.3", "value-enhancer": "^1.3.2" }, "peerDependencies": { "white-web-sdk": "^2.16.0" }, "devDependencies": { "@netless/app-docs-viewer": "^1.0.0-canary.3", "@netless/app-plyr": "^0.2.3", "@playwright/test": "^1.23.2", "@rollup/plugin-commonjs": "^20.0.0", "@rollup/plugin-node-resolve": "^13.0.4", "@rollup/plugin-url": "^6.1.0", "@sveltejs/vite-plugin-svelte": "^1.0.0-next.49", "@tsconfig/svelte": "^2.0.1", "@types/debug": "^4.1.7", "@types/lodash": "^4.14.182", "@types/lodash-es": "^4.17.6", "@types/node": "^18.0.3", "@types/uuid": "^8.3.4", "@typescript-eslint/eslint-plugin": "^4.30.0", "@typescript-eslint/parser": "^4.30.0", "@vitest/ui": "^0.14.2", "cypress": "^8.7.0", "dotenv": "^10.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-svelte3": "^3.2.0", "jsdom": "^19.0.0", "less": "^4.1.3", "prettier": "^2.3.2", "prettier-plugin-svelte": "^2.4.0", "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-styles": "^3.14.1", "svelte": "^3.42.4", "typescript": "^4.5.5", "vite": "^3.1.3", "vite-plugin-dts": "^1.5.0", "vitest": "^0.23.4", "white-web-sdk": "^2.16.35" } };
12748
12780
  }
@@ -13124,8 +13156,8 @@
13124
13156
  var _a2;
13125
13157
  log("setViewMode", mode);
13126
13158
  const mainViewProxy = (_a2 = this.appManager) == null ? void 0 : _a2.mainViewProxy;
13127
- if (mode === whiteWebSdk.ViewMode.Broadcaster) {
13128
- if (this.canOperate) {
13159
+ if (mode === whiteWebSdk.ViewMode.Broadcaster || mode === whiteWebSdk.ViewMode.Follower) {
13160
+ if (this.canOperate && mode === whiteWebSdk.ViewMode.Broadcaster) {
13129
13161
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentCamera();
13130
13162
  mainViewProxy == null ? void 0 : mainViewProxy.storeCurrentSize();
13131
13163
  }
@@ -13,7 +13,7 @@ export declare class WhiteBoardView implements PageController {
13
13
  protected appProxy: AppProxy;
14
14
  ensureSize: (size: number) => void;
15
15
  readonly pageState$: ReadonlyVal<PageState>;
16
- readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
16
+ readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
17
17
  readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
18
18
  constructor(view: View, appContext: AppContext, appProxy: AppProxy, ensureSize: (size: number) => void);
19
19
  get pageState(): PageState;
@@ -12,7 +12,7 @@ export declare class CameraSynchronizer {
12
12
  constructor(saveCamera: SaveCamera);
13
13
  setRect: (rect: TeleBoxRect, updateCamera?: boolean) => void;
14
14
  setView(view: View): void;
15
- onRemoteUpdate: import("lodash").DebouncedFunc<(camera: ICamera, size: ISize) => void>;
15
+ onRemoteUpdate: import("lodash").DebouncedFunc<(camera: ICamera, size: ISize, skipUpdate?: any) => void>;
16
16
  onRemoteSizeUpdate(size: ISize): void;
17
17
  onLocalCameraUpdate(camera: ICamera): void;
18
18
  private moveCameraToContian;
@@ -28,6 +28,7 @@ export declare class MainViewProxy {
28
28
  private get didRelease();
29
29
  start(): void;
30
30
  addCameraReaction: () => void;
31
+ saveToCamera$: () => void;
31
32
  storeCurrentCamera: () => void;
32
33
  storeCurrentSize: () => void;
33
34
  storeCamera: (camera: ICamera) => void;
@@ -3,7 +3,7 @@ import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@net
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";
6
+ import type { ISize } from "./AttributesDelegate";
7
7
  import type { ScrollState } from "./View/ScrollMode";
8
8
  export declare type PublicEvent = {
9
9
  mainViewModeChange: ViewVisionMode;
@@ -26,7 +26,6 @@ export declare type PublicEvent = {
26
26
  kind: string;
27
27
  error?: Error;
28
28
  };
29
- baseCameraChange: ICamera;
30
29
  baseSizeChange: ISize;
31
30
  fullscreenChange: TeleBoxFullscreen;
32
31
  userScroll: undefined;
@@ -248,6 +248,7 @@ export declare class WindowManager extends InvisiblePlugin<WindowMangerAttribute
248
248
  animationMode?: AnimationMode;
249
249
  }>): void;
250
250
  private debouncedStoreCamera;
251
+ private storeCamera;
251
252
  convertToPointInWorld(point: Point): Point;
252
253
  setCameraBound(cameraBound: CameraBound): void;
253
254
  onDestroy(): void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@netless/window-manager",
3
- "version": "1.0.0-canary.62",
3
+ "version": "1.0.0-canary.64",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
package/pnpm-lock.yaml CHANGED
@@ -46,7 +46,7 @@ specifiers:
46
46
 
47
47
  dependencies:
48
48
  '@juggle/resize-observer': 3.3.1
49
- '@netless/synced-store': 2.0.7_white-web-sdk@2.16.35
49
+ '@netless/synced-store': 2.0.7_white-web-sdk@2.16.36
50
50
  '@netless/telebox-insider': 1.0.0-alpha.37
51
51
  emittery: 0.11.0
52
52
  lodash: 4.17.21
@@ -88,7 +88,7 @@ devDependencies:
88
88
  vite: 3.1.3_less@4.1.3
89
89
  vite-plugin-dts: 1.5.0_vite@3.1.3
90
90
  vitest: 0.23.4_d3e3zazviv5held4lo66xldmcm
91
- white-web-sdk: 2.16.35
91
+ white-web-sdk: 2.16.36
92
92
 
93
93
  packages:
94
94
 
@@ -266,7 +266,7 @@ packages:
266
266
  /@netless/canvas-polyfill/0.0.4:
267
267
  resolution: {integrity: sha512-7NzsJrba0R/mq/l10SkIZQwbrNVJyPxZYrjK6xL3Ts732iWAVuS2UB0u3s6iGeUVcqV39A679yva8APWRl4M0A==}
268
268
 
269
- /@netless/synced-store/2.0.7_white-web-sdk@2.16.35:
269
+ /@netless/synced-store/2.0.7_white-web-sdk@2.16.36:
270
270
  resolution: {integrity: sha512-E5ukXMTLa0Mlhlv9Rcy3MJSAM5kwiLoXQy42OCSIFdBR8jf0BKbSUXSjnA8J+FZq6UidNtGaadDWjhwlM1z5MA==}
271
271
  peerDependencies:
272
272
  white-web-sdk: '>= 2.16'
@@ -275,7 +275,7 @@ packages:
275
275
  remitter: 0.2.6
276
276
  side-effect-manager: 1.2.1
277
277
  value-enhancer: 1.3.2
278
- white-web-sdk: 2.16.35
278
+ white-web-sdk: 2.16.36
279
279
  dev: false
280
280
 
281
281
  /@netless/telebox-insider/1.0.0-alpha.37:
@@ -4858,8 +4858,8 @@ packages:
4858
4858
  isexe: 2.0.0
4859
4859
  dev: true
4860
4860
 
4861
- /white-web-sdk/2.16.35:
4862
- resolution: {integrity: sha512-HgpTTPN0np9/4UWDVBFV05bpfEBHyN0mseXKdUjS+31VcjbvLhbeX7kSM3wRAEkh7svmzZAAUhOWwBHD14MACA==}
4861
+ /white-web-sdk/2.16.36:
4862
+ resolution: {integrity: sha512-qmyi6Slkxkbo7+FM3MudieQGhhKRtEztQaTDya1whl7ntD1BRavZzpRBgnJ1NMX2A1wKjILGHXRg9zyZhnAZaA==}
4863
4863
  dependencies:
4864
4864
  '@juggle/resize-observer': 3.3.1
4865
4865
  '@netless/canvas-polyfill': 0.0.4
@@ -15,7 +15,7 @@ export type WhiteBoardViewRect = Omit<ISize, "id">;
15
15
 
16
16
  export class WhiteBoardView implements PageController {
17
17
  public readonly pageState$: ReadonlyVal<PageState>;
18
- public readonly baseCamera$: ReadonlyVal<WhiteBoardViewCamera>;
18
+ public readonly camera$: ReadonlyVal<WhiteBoardViewCamera>;
19
19
  public readonly baseRect$: ReadonlyVal<WhiteBoardViewRect | undefined>;
20
20
 
21
21
  constructor(
@@ -31,7 +31,7 @@ export class WhiteBoardView implements PageController {
31
31
  const camera$ = new Val<WhiteBoardViewCamera>(pickCamera(this.view.camera));
32
32
  this.baseRect$ = baseRect$;
33
33
  this.pageState$ = pageState$;
34
- this.baseCamera$ = camera$;
34
+ this.camera$ = camera$;
35
35
  this.appProxy.sideEffectManager.add(() => [
36
36
  appProxy.appEmitter.on("pageStateChange", pageState => pageState$.setValue(pageState)),
37
37
  appProxy.camera$.subscribe(camera => {
@@ -135,7 +135,13 @@ export class AppListeners {
135
135
  }
136
136
 
137
137
  private moveCameraHandler = (payload: Camera) => {
138
- this.manager.mainView.moveCamera(payload);
138
+ const size$ = this.manager.mainViewProxy.size$;
139
+ if (size$.value) {
140
+ const size = this.manager.mainView.size;
141
+ const diff = Math.max(size.height / size$.value.height, size.width / size$.value.width);
142
+ const nextCamera = { ...payload, scale: payload.scale * diff };
143
+ this.manager.mainView.moveCamera(nextCamera);
144
+ }
139
145
  }
140
146
 
141
147
  private moveCameraToContainHandler = (payload: Rectangle & { animationMode?: AnimationMode }) => {
@@ -164,14 +164,14 @@ export class Cursor {
164
164
  private getIcon() {
165
165
  if (this.member) {
166
166
  const icons = this.cursorManager.applianceIcons;
167
- let applianceSrc = icons[ApplianceNames.shape];
167
+ let applianceSrc;
168
168
  if (this.memberApplianceName === ApplianceNames.pencilEraser) {
169
169
  const size = this.member?.memberState.pencilEraserSize || 1;
170
170
  applianceSrc = icons[`${this.memberApplianceName}${size}`];
171
171
  } else {
172
172
  applianceSrc = icons[this.memberApplianceName || ApplianceNames.shape];
173
173
  }
174
- return applianceSrc;
174
+ return applianceSrc || icons[ApplianceNames.shape];
175
175
  }
176
176
  }
177
177
 
@@ -10,6 +10,7 @@ import type { PositionType } from "../AttributesDelegate";
10
10
  import type { Point, RoomMember, View } from "white-web-sdk";
11
11
  import type { AppManager } from "../AppManager";
12
12
  import { ApplianceMap } from "./icons";
13
+ import { findMemberByUid } from "../Helper";
13
14
 
14
15
  export type EventType = {
15
16
  type: PositionType;
@@ -116,7 +117,8 @@ export class CursorManager {
116
117
  }, 48);
117
118
 
118
119
  private updateCursor(event: EventType, clientX: number, clientY: number) {
119
- if (this.wrapperRect && this.manager.canOperate) {
120
+ const self = findMemberByUid(this.manager.room, this.manager.uid);
121
+ if (this.wrapperRect && this.manager.canOperate && this.canMoveCursor(self)) {
120
122
  const view = event.type === "main" ? this.manager.mainView : this.focusView;
121
123
  const point = this.getPoint(view, clientX, clientY);
122
124
  if (point) {
@@ -83,7 +83,7 @@ export class ReconnectRefresher {
83
83
  this._onReconnected();
84
84
  }
85
85
 
86
- public add(id: string, func: any) {
86
+ public add(id: string, func: any): () => void {
87
87
  const disposer = this.disposers.get(id);
88
88
  if (disposer && isFunction(disposer)) {
89
89
  disposer();
@@ -27,15 +27,16 @@ export class CameraSynchronizer {
27
27
  }
28
28
 
29
29
  // 远端 Camera 或者 size 更新
30
- public onRemoteUpdate = throttle((camera: ICamera, size: ISize) => {
30
+ public onRemoteUpdate = throttle((camera: ICamera, size: ISize, skipUpdate = false) => {
31
31
  this.remoteCamera = camera;
32
32
  this.remoteSize = size;
33
- if (this.remoteSize && this.rect) {
34
- requestAnimationFrame(() => {
35
- this.moveCameraToContian(size);
33
+ if (skipUpdate) return;;
34
+ requestAnimationFrame(() => {
35
+ if (this.remoteSize && this.rect) {
36
+ this.moveCameraToContian(this.remoteSize);
36
37
  this.moveCamera(camera);
37
- });
38
- }
38
+ }
39
+ });
39
40
  }, 32);
40
41
 
41
42
  public onRemoteSizeUpdate(size: ISize) {
@@ -49,7 +50,9 @@ export class CameraSynchronizer {
49
50
  height: size.height,
50
51
  originX: currentCamera.centerX - (size.width / 2),
51
52
  originY: currentCamera.centerY - (size.height / 2),
53
+ animationMode: AnimationMode.Immediately,
52
54
  });
55
+ this.moveCamera(this.remoteCamera);
53
56
  }
54
57
  }
55
58
 
@@ -72,7 +75,7 @@ export class CameraSynchronizer {
72
75
  }
73
76
 
74
77
  private moveCamera(camera: ICamera): void {
75
- if (!isEmpty(camera) && this.view && camera.centerX && camera.centerY) {
78
+ if (!isEmpty(camera) && this.view && camera.centerX != null && camera.centerY != null) {
76
79
  if (isEqual(camera, this.view.camera)) return;
77
80
  const { centerX, centerY, scale } = camera;
78
81
  const needScale = scale * (this.scale || 1);
@@ -49,11 +49,6 @@ export class MainViewProxy {
49
49
  }
50
50
  }
51
51
  }));
52
- this.camera$.reaction(camera => {
53
- if (camera) {
54
- callbacks.emit("baseCameraChange", camera);
55
- }
56
- });
57
52
  this.size$.reaction(size => {
58
53
  if (size) {
59
54
  callbacks.emit("baseSizeChange", size);
@@ -130,6 +125,11 @@ export class MainViewProxy {
130
125
  this.manager.refresher.add(Fields.MainViewSize, this.sizeReaction);
131
126
  };
132
127
 
128
+ public saveToCamera$ = () => {
129
+ const camera = { ...this.view.camera, id: this.manager.uid };
130
+ this.camera$.setValue(camera, true);
131
+ }
132
+
133
133
  public storeCurrentCamera = () => {
134
134
  const iCamera = this.view.camera;
135
135
  this.storeCamera({
@@ -89,10 +89,9 @@ export class ViewSync {
89
89
 
90
90
  private subscribeCamera = () => {
91
91
  return this.context.camera$.subscribe((camera, skipUpdate) => {
92
- if (skipUpdate) return;
93
92
  const size = this.context.size$.value;
94
93
  if (camera && size) {
95
- this.synchronizer.onRemoteUpdate(camera, size);
94
+ this.synchronizer.onRemoteUpdate(camera, size, skipUpdate);
96
95
  }
97
96
  });
98
97
  };
package/src/callback.ts CHANGED
@@ -3,7 +3,7 @@ import type { TeleBoxColorScheme, TeleBoxFullscreen, TELE_BOX_STATE } from "@net
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";
6
+ import type { ISize } from "./AttributesDelegate";
7
7
  import type { ScrollState } from "./View/ScrollMode";
8
8
 
9
9
  export type PublicEvent = {
@@ -23,7 +23,6 @@ export type PublicEvent = {
23
23
  sceneStateChange: SceneState;
24
24
  pageStateChange: PageState;
25
25
  appClose: { appId: string; kind: string, error?: Error };
26
- baseCameraChange: ICamera;
27
26
  baseSizeChange: ISize;
28
27
  fullscreenChange: TeleBoxFullscreen;
29
28
  userScroll: undefined;
package/src/index.ts CHANGED
@@ -627,8 +627,8 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
627
627
  public setViewMode(mode: ManagerViewMode): void {
628
628
  log("setViewMode", mode);
629
629
  const mainViewProxy = this.appManager?.mainViewProxy;
630
- if (mode === ViewMode.Broadcaster) {
631
- if (this.canOperate) {
630
+ if (mode === ViewMode.Broadcaster || mode === ViewMode.Follower) {
631
+ if (this.canOperate && mode === ViewMode.Broadcaster) {
632
632
  mainViewProxy?.storeCurrentCamera();
633
633
  mainViewProxy?.storeCurrentSize();
634
634
  }
@@ -851,13 +851,18 @@ export class WindowManager extends InvisiblePlugin<WindowMangerAttributes, any>
851
851
  }
852
852
 
853
853
  private debouncedStoreCamera = () => {
854
- const storeCamera = debounce(() => {
855
- this.appManager?.mainViewProxy.storeCurrentCamera();
856
- this.appManager?.mainViewProxy.storeCurrentSize();
857
- this.mainView.callbacks.off("onCameraUpdated", storeCamera);
858
- }, 200);
859
- this.mainView.callbacks.on("onCameraUpdated", storeCamera);
860
- }
854
+ const cameraListener = debounce(() => {
855
+ this.appManager?.mainViewProxy.saveToCamera$();
856
+ this.storeCamera();
857
+ this.mainView.callbacks.off("onCameraUpdated", cameraListener);
858
+ }, 50);
859
+ this.mainView.callbacks.on("onCameraUpdated", cameraListener);
860
+ }
861
+
862
+ private storeCamera = debounce(() => {
863
+ this.appManager?.mainViewProxy.storeCurrentCamera();
864
+ this.appManager?.mainViewProxy.storeCurrentSize();
865
+ }, 300);
861
866
 
862
867
  public convertToPointInWorld(point: Point): Point {
863
868
  return this.mainView.convertToPointInWorld(point);