@netless/fastboard-core 0.3.8 → 0.3.10

package/dist/index.mjs

@@ -104,20 +104,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 = "";
@@ -214,7 +237,7 @@ for (const kind in DefaultApps) {
   }
 }
 var register = WindowManager.register.bind(WindowManager);
-var version = "0.3.8";
+var version = "0.3.10";
 if (typeof window !== "undefined") {
   let str = window.__netlessUA || "";
   str += ` ${"@netless/fastboard"}@${version} `;
@@ -231,26 +254,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();
@@ -260,6 +290,9 @@ var FastboardAppBase = class {
 var FastboardApp = class extends FastboardAppBase {
   constructor() {
     super(...arguments);
+    /**
+     * Is current room writable?
+     */
     __publicField(this, "writable", writable(
       this.room.isWritable,
       (set) => {
@@ -268,34 +301,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);
     }));
-    __publicField(this, "camera", readable(this.manager.camera, (set) => {
-      set(this.manager.camera);
-      return this._addMainViewListener("onCameraUpdated", set);
+    /**
+     * Current camera information of main view.
+     *
+     * Change the camera position by `app.moveCamera()`.
+     */
+    __publicField(this, "camera", readable(this.manager.cameraState, (set) => {
+      set(this.manager.cameraState);
+      return this._addManagerListener("cameraStateChange", 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) => {
@@ -304,11 +366,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 }) => {
@@ -317,34 +386,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({
@@ -352,39 +445,104 @@ 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();
   }
+  /**
+   * Goto any page (index range: 0..n-1)
+   */
+  jumpPage(index) {
+    this._assertNotDestroyed();
+    return this.manager.jumpPage(index);
+  }
+  /**
+   * 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;
@@ -393,13 +551,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;
@@ -442,6 +608,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();
@@ -462,6 +629,9 @@ var FastboardApp = class extends FastboardAppBase {
         });
     }
   }
+  /**
+   * Insert the Media Player app.
+   */
   insertMedia(title, src) {
     this._assertNotDestroyed();
     return this.manager.addApp({
@@ -470,6 +640,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({
@@ -477,6 +651,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({
@@ -484,6 +662,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({
@@ -551,21 +733,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);
@@ -580,6 +766,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) => {
@@ -588,15 +777,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) => {
@@ -608,38 +807,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,5 +999,4 @@ function dispatchDocsEvent(fastboard, event, options = {}) {
 }
 
 export { FastboardApp, FastboardPlayer, addManagerListener, addPlayerListener, addRoomListener, addViewListener, convertedFileToScene, createFastboard, dispatchDocsEvent, genUID, getImageSize, makeSlideParams, readable, register, replayFastboard, version, warn, writable };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map