@netless/fastboard-core 0.3.8-alpha.0 → 0.3.9

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { Size, SceneDefinition, ConvertedFile, RoomPhase as RoomPhase$1, ApplianceNames, ShapeType, MemberState, RoomState, Camera, AnimationMode, Rectangle, Color, ConversionResponse, WhiteWebSdkConfiguration, JoinRoomParams, RoomCallbacks, WhiteWebSdk, Room, HotKeys, ViewCallbacks, PlayerPhase as PlayerPhase$1, PlayerState, PlayerSeekingResult, ReplayRoomParams, PlayerCallbacks, Player, View } from 'white-web-sdk';
+import { Size, SceneDefinition, ConvertedFile, RoomPhase as RoomPhase$1, ApplianceNames, ShapeType, MemberState, RoomState, Camera, AnimationMode, Rectangle, Color, ConversionResponse, WhiteWebSdkConfiguration, JoinRoomParams, RoomCallbacks, WhiteWebSdk, Room, HotKeys, PlayerPhase as PlayerPhase$1, PlayerState, PlayerSeekingResult, ReplayRoomParams, PlayerCallbacks, Player, ViewCallbacks, View } from 'white-web-sdk';
 export { AnimationMode, ApplianceNames, Camera, Color, ConversionResponse, HotKey, HotKeys, JoinRoomParams, MemberState, PlayerSeekingResult, Rectangle, Room, RoomCallbacks, RoomState, SceneDefinition, ShapeType, ViewCallbacks, WhiteWebSdk, WhiteWebSdkConfiguration } from 'white-web-sdk';
-import { AddPageParams, MountParams, NetlessApp, WindowManager, PublicEvent, RegisterParams } from '@netless/window-manager';
+import { AddPageParams, MountParams, NetlessApp, WindowManager, RegisterParams, PublicEvent } from '@netless/window-manager';
 export { AddPageParams, MountParams, NetlessApp, PublicEvent, WindowManager } from '@netless/window-manager';
 import { SyncedStore } from '@netless/synced-store';
 export { Diff, DiffOne, Storage, SyncedStore } from '@netless/synced-store';
@@ -22,7 +22,7 @@ interface Writable<T> extends Readable<T> {
 declare function readable<T>(value: T, start?: StartStopNotifier<T>): Readable<T>;
 declare function writable<T>(value: T, start: StartStopNotifier<T> | undefined, set: Subscriber<T>): Writable<T>;
 
-declare function getImageSize(url: string, fallback: Size): Promise<Size>;
+declare function getImageSize(url: string, fallback: Size, crossOrigin?: boolean | string): Promise<Size>;
 declare function makeSlideParams(scenes: SceneDefinition[]): {
     scenes: SceneDefinition[];
     taskId: string;
@@ -45,10 +45,6 @@ declare class FastboardAppBase<TEventData extends Record<string, any> = any> {
     readonly syncedStore: SyncedStore<TEventData>;
     constructor(sdk: WhiteWebSdk, room: Room, manager: WindowManager, hotKeys: Partial<HotKeys>, syncedStore: SyncedStore<TEventData>);
     protected _destroyed: boolean;
-    protected _assertNotDestroyed(): void;
-    protected _addRoomListener<K extends keyof RoomCallbacks>(name: K, listener: RoomCallbacks[K]): () => void;
-    protected _addManagerListener<K extends keyof PublicEvent>(name: K, listener: (value: PublicEvent[K]) => void): () => void;
-    protected _addMainViewListener<K extends keyof ViewCallbacks>(name: K, listener: ViewCallbacks[K]): () => void;
     /**
      * Destroy fastboard (disconnect from the whiteboard room).
      */
@@ -223,6 +219,14 @@ declare class FastboardApp<TEventData extends Record<string, any> = any> extends
      * setTextColor([0x66, 0xcc, 0xff])
      */
     setTextColor(textColor: Color): void;
+    /**
+     * Toggle dotted line effect on pencil.
+     */
+    toggleDottedLine(force?: boolean): void;
+    /**
+     * Set pencil eraser size.
+     */
+    setPencilEraserSize(size: number): void;
     /**
      * Goto previous page (the main whiteboard view).
      */
@@ -251,10 +255,12 @@ declare class FastboardApp<TEventData extends Record<string, any> = any> extends
     /**
      * Insert an image to the main view.
      *
+     * @param crossOrigin Whether to load the image with CORS enabled, default is `true`.
+     *
      * @example
      * insertImage("https://i.imgur.com/CzXTtJV.jpg")
      */
-    insertImage(url: string): Promise<void>;
+    insertImage(url: string, crossOrigin?: boolean | string): Promise<void>;
     /**
      * Insert PDF/PPTX from conversion result.
      * @param status https://developer.netless.link/server-en/home/server-conversion#get-query-task-conversion-progress
@@ -330,10 +336,6 @@ declare class FastboardPlayerBase<TEventData extends Record<string, any> = any>
     readonly syncedStore: SyncedStore<TEventData>;
     constructor(sdk: WhiteWebSdk, player: Player, manager: WindowManager, syncedStore: SyncedStore<TEventData>);
     protected _destroyed: boolean;
-    protected _assertNotDestroyed(): void;
-    protected _addPlayerListener<K extends keyof PlayerCallbacks>(name: K, listener: PlayerCallbacks[K]): () => void;
-    protected _addManagerListener<K extends keyof PublicEvent>(name: K, listener: (value: PublicEvent[K]) => void): () => void;
-    protected _addMainViewListener<K extends keyof ViewCallbacks>(name: K, listener: ViewCallbacks[K]): () => void;
     destroy(): void;
 }
 type PlayerPhase = `${PlayerPhase$1}`;

package/dist/index.js

@@ -5,6 +5,10 @@ var windowManager = require('@netless/window-manager');
 var syncedStore = require('@netless/synced-store');
 var SlideApp = require('@netless/app-slide');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var SlideApp__default = /*#__PURE__*/_interopDefault(SlideApp);
+
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
@@ -105,20 +109,43 @@ function writable(value, start = noop, set) {
     reaction: internal.reaction,
     set,
     update(fn) {
-      set(fn(value));
+      set(fn(internal.value));
     }
   };
 }
 
 // src/utils/misc.ts
-function getImageSize(url, fallback) {
+function getImageSize(url, fallback, crossOrigin) {
   return new Promise((resolve) => {
     const img = new Image();
+    applyCrossOrigin(img, url, crossOrigin);
     img.onload = () => resolve(img);
     img.onerror = () => resolve(fallback);
     img.src = url;
   });
 }
+function applyCrossOrigin(image, src, crossOrigin) {
+  if (crossOrigin === void 0 && !src.startsWith("data:")) {
+    image.crossOrigin = determineCrossOrigin(src);
+  } else if (crossOrigin !== false) {
+    image.crossOrigin = typeof crossOrigin === "string" ? crossOrigin : "anonymous";
+  }
+}
+function determineCrossOrigin(src) {
+  if (src.startsWith("data:") || typeof window === "undefined" || !window.location) {
+    return "";
+  }
+  const loc = window.location;
+  try {
+    const parsedUrl = new URL(src, document.baseURI);
+    if (parsedUrl.hostname !== loc.hostname || parsedUrl.port !== loc.port || parsedUrl.protocol !== loc.protocol) {
+      return "anonymous";
+    }
+    return "";
+  } catch (e) {
+    return "";
+  }
+}
 function makeSlideParams(scenes) {
   const emptyScenes = [];
   let taskId = "";
@@ -205,7 +232,7 @@ var DefaultApps = {
 windowManager.WindowManager.register({
   kind: "Slide",
   appOptions: { debug: false },
-  src: SlideApp,
+  src: SlideApp__default.default,
   addHooks: SlideApp.addHooks
 });
 for (const kind in DefaultApps) {
@@ -215,7 +242,7 @@ for (const kind in DefaultApps) {
   }
 }
 var register = windowManager.WindowManager.register.bind(windowManager.WindowManager);
-var version = "0.3.8-alpha.0";
+var version = "0.3.9";
 if (typeof window !== "undefined") {
   let str = window.__netlessUA || "";
   str += ` ${"@netless/fastboard"}@${version} `;
@@ -232,26 +259,33 @@ var FastboardAppBase = class {
     this.syncedStore = syncedStore;
     __publicField(this, "_destroyed", false);
   }
+  /** @internal */
   _assertNotDestroyed() {
     if (this._destroyed) {
       throw new Error("FastboardApp has been destroyed");
     }
   }
+  /** @internal */
   _addRoomListener(name, listener) {
     this._assertNotDestroyed();
     this.room.callbacks.on(name, listener);
     return () => this.room.callbacks.off(name, listener);
   }
+  /** @internal */
   _addManagerListener(name, listener) {
     this._assertNotDestroyed();
     this.manager.emitter.on(name, listener);
     return () => this.manager.emitter.off(name, listener);
   }
+  /** @internal */
   _addMainViewListener(name, listener) {
     this._assertNotDestroyed();
     this.manager.mainView.callbacks.on(name, listener);
     return () => this.manager.mainView.callbacks.off(name, listener);
   }
+  /**
+   * Destroy fastboard (disconnect from the whiteboard room).
+   */
   destroy() {
     this._destroyed = true;
     this.manager.destroy();
@@ -261,6 +295,9 @@ var FastboardAppBase = class {
 var FastboardApp = class extends FastboardAppBase {
   constructor() {
     super(...arguments);
+    /**
+     * Is current room writable?
+     */
     __publicField(this, "writable", writable(
       this.room.isWritable,
       (set) => {
@@ -269,34 +306,63 @@ var FastboardApp = class extends FastboardAppBase {
       },
       this.room.setWritable.bind(this.room)
     ));
+    /**
+     * Is current room online?
+     */
     __publicField(this, "phase", readable(this.room.phase, (set) => {
       set(this.room.phase);
       return this._addRoomListener("onPhaseChanged", set);
     }));
+    /**
+     * Current window-manager's windows' state (is it maximized?).
+     */
     __publicField(this, "boxState", readable(this.manager.boxState, (set) => {
       set(this.manager.boxState);
       return this._addManagerListener("boxStateChange", set);
     }));
+    /**
+     * Current window-manager's focused app's id.
+     * @example "HelloWorld-1A2b3C4d"
+     */
     __publicField(this, "focusedApp", readable(this.manager.focused, (set) => {
       set(this.manager.focused);
       return this._addManagerListener("focusedChange", set);
     }));
+    /**
+     * How many times can I call `app.redo()`?
+     */
     __publicField(this, "canRedoSteps", readable(this.manager.canRedoSteps, (set) => {
       set(this.manager.canRedoSteps);
       return this._addManagerListener("canRedoStepsChange", set);
     }));
+    /**
+     * How many times can I call `app.undo()`?
+     */
     __publicField(this, "canUndoSteps", readable(this.manager.canUndoSteps, (set) => {
       set(this.manager.canUndoSteps);
       return this._addManagerListener("canUndoStepsChange", set);
     }));
+    /**
+     * Current camera information of main view.
+     *
+     * Change the camera position by `app.moveCamera()`.
+     */
     __publicField(this, "camera", readable(this.manager.camera, (set) => {
       set(this.manager.camera);
       return this._addMainViewListener("onCameraUpdated", set);
     }));
+    /**
+     * Current tool's info, like "is using pencil?", "what color?".
+     *
+     * Change the tool by `app.setAppliance()`.
+     */
     __publicField(this, "memberState", readable(this.room.state.memberState, (set) => {
       set(this.room.state.memberState);
       return this._addRoomListener("onRoomStateChanged", ({ memberState: m }) => m && set(m));
     }));
+    /**
+     * 0..n-1, current index of main view scenes.
+     */
     __publicField(this, "sceneIndex", writable(
       this.manager.mainViewSceneIndex,
       (set) => {
@@ -305,11 +371,18 @@ var FastboardApp = class extends FastboardAppBase {
       },
       this.manager.setMainViewSceneIndex.bind(this.manager)
     ));
+    /**
+     * How many pages are in the main view?
+     */
     __publicField(this, "sceneLength", readable(this.manager.mainViewScenesLength, (set) => {
       set(this.manager.mainViewScenesLength);
       return this._addManagerListener("mainViewScenesLengthChange", set);
     }));
+    /** @internal */
     __publicField(this, "_appsStatus", {});
+    /**
+     * Apps status.
+     */
     __publicField(this, "appsStatus", readable(
       {},
       (set) => this._addManagerListener("loadApp", ({ kind, status, reason }) => {
@@ -318,34 +391,58 @@ var FastboardApp = class extends FastboardAppBase {
       })
     ));
   }
+  /**
+   * Render this app to some DOM.
+   */
   bindContainer(container) {
     this._assertNotDestroyed();
     this.manager.bindContainer(container);
   }
+  /**
+   * Move window-manager's collector to some place.
+   */
   bindCollector(container) {
     this._assertNotDestroyed();
     this.manager.bindCollectorContainer(container);
   }
+  /**
+   * Undo a step on main view.
+   */
   undo() {
     this._assertNotDestroyed();
     this.manager.undo();
   }
+  /**
+   * Redo a step on main view.
+   */
   redo() {
     this._assertNotDestroyed();
     this.manager.redo();
   }
+  /**
+   * Move current main view's camera position.
+   */
   moveCamera(camera) {
     this._assertNotDestroyed();
     this.manager.moveCamera(camera);
   }
+  /**
+   * Move current main view's camera to include a rectangle.
+   */
   moveCameraToContain(rectangle) {
     this._assertNotDestroyed();
     this.manager.moveCameraToContain(rectangle);
   }
+  /**
+   * Delete all things on the main view.
+   */
   cleanCurrentScene() {
     this._assertNotDestroyed();
     this.manager.cleanCurrentScene();
   }
+  /**
+   * Set current tool, like "pencil".
+   */
   setAppliance(appliance, shape) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({
@@ -353,39 +450,97 @@ var FastboardApp = class extends FastboardAppBase {
       shapeType: shape
     });
   }
+  /**
+   * Set pencil and shape's thickness.
+   */
   setStrokeWidth(strokeWidth) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({ strokeWidth });
   }
+  /**
+   * Set pencil and shape's color.
+   */
   setStrokeColor(strokeColor) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({ strokeColor });
   }
+  /**
+   * Set text size. Default is 16.
+   */
   setTextSize(textSize) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({ textSize });
   }
+  /**
+   * Set text color.
+   *
+   * @example
+   * setTextColor([0x66, 0xcc, 0xff])
+   */
   setTextColor(textColor) {
     this._assertNotDestroyed();
     this.manager.mainView.setMemberState({ textColor });
   }
+  /**
+   * Toggle dotted line effect on pencil.
+   */
+  toggleDottedLine(force) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ dottedLine: force != null ? force : !this.memberState.value.dottedLine });
+  }
+  /**
+   * Set pencil eraser size.
+   */
+  setPencilEraserSize(size) {
+    this._assertNotDestroyed();
+    this.manager.mainView.setMemberState({ pencilEraserSize: size });
+  }
+  /**
+   * Goto previous page (the main whiteboard view).
+   */
   prevPage() {
     this._assertNotDestroyed();
     return this.manager.prevPage();
   }
+  /**
+   * Goto next page (the main whiteboard view).
+   */
   nextPage() {
     this._assertNotDestroyed();
     return this.manager.nextPage();
   }
+  /**
+   * Add one page to the main whiteboard view.
+   *
+   * @example
+   * addPage({ after: true }) // add one page right after current one.
+   * nextPage() // then, goto that page.
+   */
   addPage(params) {
     this._assertNotDestroyed();
     return this.manager.addPage(params);
   }
+  /**
+   * Remove one page at given index or current page (by default).
+   *
+   * Requires `@netless/window-manager` >= 0.4.30.
+   *
+   * @example
+   * removePage() // remove current page
+   */
   removePage(index) {
     this._assertNotDestroyed();
     return this.manager.removePage(index);
   }
-  async insertImage(url) {
+  /**
+   * Insert an image to the main view.
+   *
+   * @param crossOrigin Whether to load the image with CORS enabled, default is `true`.
+   *
+   * @example
+   * insertImage("https://i.imgur.com/CzXTtJV.jpg")
+   */
+  async insertImage(url, crossOrigin) {
     this._assertNotDestroyed();
     await this.manager.switchMainViewToWriter();
     const { divElement } = this.manager.mainView;
@@ -394,13 +549,21 @@ var FastboardApp = class extends FastboardAppBase {
       height: (divElement == null ? void 0 : divElement.scrollHeight) || window.innerHeight
     };
     const maxWidth = containerSize.width * 0.8;
-    let { width, height } = await getImageSize(url, containerSize);
+    let { width, height } = await getImageSize(url, containerSize, crossOrigin);
     const scale = Math.min(maxWidth / width, 1);
     const uuid = genUID();
     const { centerX, centerY } = this.manager.camera;
     width *= scale;
     height *= scale;
-    this.manager.mainView.insertImage({ uuid, centerX, centerY, width, height, locked: false });
+    this.manager.mainView.insertImage({
+      uuid,
+      centerX,
+      centerY,
+      width,
+      height,
+      locked: false,
+      crossOrigin
+    });
     this.manager.mainView.completeImageUpload(uuid, url);
     width /= 0.8;
     height /= 0.8;
@@ -443,6 +606,7 @@ var FastboardApp = class extends FastboardAppBase {
       throw new Error("Invalid input: not found 'progress', 'prefix' nor 'images'");
     }
   }
+  /** @internal */
   _insertDocsImpl(_a) {
     var _b = _a, { fileType, scenePath, title, scenes } = _b, attributes = __objRest(_b, ["fileType", "scenePath", "title", "scenes"]);
     this._assertNotDestroyed();
@@ -463,6 +627,9 @@ var FastboardApp = class extends FastboardAppBase {
         });
     }
   }
+  /**
+   * Insert the Media Player app.
+   */
   insertMedia(title, src) {
     this._assertNotDestroyed();
     return this.manager.addApp({
@@ -471,6 +638,10 @@ var FastboardApp = class extends FastboardAppBase {
       attributes: { src }
     });
   }
+  /**
+   * Insert the Monaco Code Editor app.
+   * @deprecated Use `app.manager.addApp({ kind: 'Monaco' })` instead.
+   */
   insertCodeEditor() {
     this._assertNotDestroyed();
     return this.manager.addApp({
@@ -478,6 +649,10 @@ var FastboardApp = class extends FastboardAppBase {
       options: { title: "Code Editor" }
     });
   }
+  /**
+   * Insert the Countdown app.
+   * @deprecated Use `app.manager.addApp({ kind: 'Countdown' })` instead.
+   */
   insertCountdown() {
     this._assertNotDestroyed();
     return this.manager.addApp({
@@ -485,6 +660,10 @@ var FastboardApp = class extends FastboardAppBase {
       options: { title: "Countdown" }
     });
   }
+  /**
+   * Insert the GeoGebra app.
+   * @deprecated Use `app.manager.addApp({ kind: 'GeoGebra' })` instead.
+   */
   insertGeoGebra() {
     this._assertNotDestroyed();
     return this.manager.addApp({
@@ -552,21 +731,25 @@ var FastboardPlayerBase = class {
     this.syncedStore = syncedStore;
     __publicField(this, "_destroyed", false);
   }
+  /** @internal */
   _assertNotDestroyed() {
     if (this._destroyed) {
       throw new Error("FastboardApp has been destroyed");
     }
   }
+  /** @internal */
   _addPlayerListener(name, listener) {
     this._assertNotDestroyed();
     this.player.callbacks.on(name, listener);
     return () => this.player.callbacks.off(name, listener);
   }
+  /** @internal */
   _addManagerListener(name, listener) {
     this._assertNotDestroyed();
     this.manager.emitter.on(name, listener);
     return () => this.manager.emitter.off(name, listener);
   }
+  /** @internal */
   _addMainViewListener(name, listener) {
     this._assertNotDestroyed();
     this.manager.mainView.callbacks.on(name, listener);
@@ -581,6 +764,9 @@ var FastboardPlayerBase = class {
 var FastboardPlayer = class extends FastboardPlayerBase {
   constructor() {
     super(...arguments);
+    /**
+     * Player current time in milliseconds.
+     */
     __publicField(this, "currentTime", writable(
       this.player.progressTime,
       (set) => {
@@ -589,15 +775,25 @@ var FastboardPlayer = class extends FastboardPlayerBase {
       },
       this.player.seekToProgressTime.bind(this.player)
     ));
+    /**
+     * Player state, like "is it playing?".
+     */
     __publicField(this, "phase", readable(this.player.phase, (set) => {
       set(this.player.phase);
       return this._addPlayerListener("onPhaseChanged", set);
     }));
+    /**
+     * Will become true after buffering.
+     */
     __publicField(this, "canplay", readable(this.player.isPlayable, (set) => {
       set(this.player.isPlayable);
       return this._addPlayerListener("onIsPlayableChanged", set);
     }));
+    /** @internal */
     __publicField(this, "_setPlaybackRate");
+    /**
+     * Playback speed, default `1`.
+     */
     __publicField(this, "playbackRate", writable(
       this.player.playbackSpeed,
       (set) => {
@@ -609,38 +805,65 @@ var FastboardPlayer = class extends FastboardPlayerBase {
         this._setPlaybackRate(value);
       }
     ));
+    /**
+     * Playback duration in milliseconds.
+     */
     __publicField(this, "duration", readable(this.player.timeDuration, (set) => {
       set(this.player.timeDuration);
     }));
+    /**
+     * Get state of room at that time, like "who was in the room?".
+     */
     __publicField(this, "state", readable(this.player.state, (set) => {
       set(this.player.state);
       return this._addPlayerListener("onPlayerStateChanged", () => set(this.player.state));
     }));
   }
+  /**
+   * Render this player to some DOM.
+   */
   bindContainer(container) {
     this._assertNotDestroyed();
     this.manager.bindContainer(container);
   }
+  /**
+   * Move window-manager's collector to some place.
+   */
   bindCollector(container) {
     this._assertNotDestroyed();
     this.manager.bindCollectorContainer(container);
   }
+  /**
+   * Seek to some time in milliseconds.
+   */
   seek(timestamp) {
     this._assertNotDestroyed();
     return this.player.seekToProgressTime(timestamp);
   }
+  /**
+   * Change player state to playing.
+   */
   play() {
     this._assertNotDestroyed();
     this.player.play();
   }
+  /**
+   * Change player state to paused.
+   */
   pause() {
     this._assertNotDestroyed();
     this.player.pause();
   }
+  /**
+   * Change player state to stopped.
+   */
   stop() {
     this._assertNotDestroyed();
     this.player.stop();
   }
+  /**
+   * Set playback speed, a shortcut for `speed.set(x)`.
+   */
   setPlaybackRate(value) {
     this._assertNotDestroyed();
     this.playbackRate.set(value);
@@ -773,7 +996,10 @@ function dispatchDocsEvent(fastboard, event, options = {}) {
   }
 }
 
-exports.SlideApp = SlideApp;
+Object.defineProperty(exports, 'SlideApp', {
+  enumerable: true,
+  get: function () { return SlideApp__default.default; }
+});
 Object.defineProperty(exports, 'addSlideHooks', {
   enumerable: true,
   get: function () { return SlideApp.addHooks; }
@@ -804,5 +1030,4 @@ exports.replayFastboard = replayFastboard;
 exports.version = version;
 exports.warn = warn;
 exports.writable = writable;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map