@netless/app-slide 0.3.0-canary.2 → 0.3.0-canary.5

package/dist/typings.d.ts

@@ -1,4 +1,4 @@
-import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+import type { ISlideRenderOptions, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
 import type { RegisterParams } from "@netless/window-manager";
 export declare type SlideState = Slide["slideState"];
 export declare type AddHooks = NonNullable<RegisterParams["addHooks"]>;
@@ -13,19 +13,6 @@ export interface Attributes {
 export interface MagixEvents {
     [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
-export interface AppOptions {
-    /** show debug controller */
+export interface AppOptions extends ISlideRenderOptions {
     debug?: boolean;
-    /** scale */
-    resolution?: number;
-    /** background color for slide animations */
-    bgColor?: string;
-    /** minimal fps  (default: 25) */
-    minFPS?: number;
-    /** maximal fps  (default: 30) */
-    maxFPS?: number;
-    /** automatically decrease fps  (default: true) */
-    autoFPS?: boolean;
-    /** whether to re-scale automatically (default: true) */
-    autoResolution?: boolean;
 }

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.2",
-  "main": "dist/main.cjs.js",
-  "module": "dist/main.es.js",
+  "version": "0.3.0-canary.5",
+  "main": "dist/main.js",
+  "module": "dist/main.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist",
     "README-zh.md"
   ],
+  "dependencies": {
+    "@netless/slide": "^0.5.10"
+  },
   "devDependencies": {
-    "@netless/slide": "^0.4.7",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
-    "side-effect-manager": "^1.1.0",
-    "value-enhancer": "^1.3.0",
-    "vanilla-lazyload": "^17.8.2"
+    "side-effect-manager": "^1.1.1",
+    "value-enhancer": "^1.3.2",
+    "vanilla-lazyload": "^17.8.3"
   },
   "scripts": {
     "types": "cross-env NODE_ENV=production tsc --declaration --emitDeclarationOnly --outDir dist",

package/src/SlideViewer.ts

@@ -176,8 +176,8 @@ function create_sidebar() {
     }
   }
 
-  function set_page_index(page_index_: number) {
-    if (page_index !== page_index_) {
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
       page_index = page_index_;
       const $page = $preview.querySelector<HTMLElement>(
         `.${wrap_class(`preview-page-${page_index}`)}`
@@ -292,9 +292,6 @@ function create_footer() {
   const $pageNumberInput = h("input");
   set_class($pageNumberInput, "page-number-input");
   $pageNumberInput.value = String(page_index + 1);
-  $pageNumberInput.onfocus = function on_focus_page_number_input() {
-    $pageNumberInput.select();
-  };
   $pageNumberInput.onchange = function on_change_page_number_input() {
     if (readonly) return;
     if ($pageNumberInput.value) {
@@ -329,8 +326,8 @@ function create_footer() {
     }
   }
 
-  function set_page_index(page_index_: number) {
-    if (page_index !== page_index_) {
+  function set_page_index(page_index_: number, force = false) {
+    if (force || page_index !== page_index_) {
       page_index = page_index_;
       $pageNumberInput.value = String(page_index + 1);
     }
@@ -414,6 +411,8 @@ export class SlideViewer {
     const on_new_page_index = (index: number) => {
       if (this._ready && index >= 0 && index < this._slideCount) {
         this.slide.renderSlide(index + 1);
+      } else {
+        this.setPage(this.slide.slideState.currentSlideIndex);
       }
     };
     this.sidebar.on_new_page_index(on_new_page_index);
@@ -429,6 +428,11 @@ export class SlideViewer {
 
     this.sideEffect.addDisposer(this.sidebar.destroy);
     this.sideEffect.addDisposer(() => this.slide.destroy());
+    this.sideEffect.addDisposer(() => {
+      this.$content.parentElement && this.$content.remove();
+      this.$footer.parentElement && this.$footer.remove();
+      this.$slide.parentElement && this.$slide.remove();
+    });
 
     let saved_is_frozen = false;
     this.sideEffect.addDisposer(
@@ -528,30 +532,23 @@ export class SlideViewer {
   }
 
   setPage(page: number) {
-    this.sidebar.set_page_index(page - 1);
-    this.footer.set_page_index(page - 1);
+    this.sidebar.set_page_index(page - 1, true);
+    this.footer.set_page_index(page - 1, true);
   }
 
   private _isFrozen = false;
-  private _freezePromise: Promise<void> | null = null;
 
   freeze() {
     if (this._destroyed) return;
     this._isFrozen = true;
-    if (!this._ready || this._freezePromise) return;
-    this._freezePromise = this.slide.frozen().then(() => {
-      this._freezePromise = null;
-      if (!this._isFrozen) this.unfreeze();
-    });
+    if (!this._ready) return;
+    this.slide.frozen();
   }
 
   unfreeze() {
     if (this._destroyed) return;
     this._isFrozen = false;
-    if (!this._ready || this._freezePromise) return;
-    this._freezePromise = this.slide.release().then(() => {
-      this._freezePromise = null;
-      if (this._isFrozen) this.freeze();
-    });
+    if (!this._ready) return;
+    this.slide.release();
   }
 }

package/src/index.ts

@@ -23,7 +23,6 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
     }
 
     const options = context.getAppOptions() || {};
-    const debug = Boolean(options.debug);
     const logger = make_logger(context);
     logger.info("[Slide] setup @ " + __APP_VERSION__);
 
@@ -35,7 +34,6 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
       mode: "interactive",
       resize: true,
       enableGlobalClick: true,
-      controller: debug,
       timestamp: make_timestamp(context),
       logger,
       renderOptions: {
@@ -44,7 +42,8 @@ const SlideApp: NetlessApp<Attributes, MagixEvents, AppOptions, void> = {
         autoFPS: options.autoFPS ?? true,
         autoResolution: options.autoResolution ?? true,
         resolution: options.resolution,
-        transactionBgColor: options.bgColor || make_bg_color(context.box.$content),
+        maxResolutionLevel: options.maxResolutionLevel,
+        transactionBgColor: options.transactionBgColor || make_bg_color(context.box.$content),
       },
 
       taskId: context.storage.state.taskId,
@@ -92,6 +91,11 @@ export function previewSlide(options: SlideViewerOptions & { container: HTMLElem
   return viewer;
 }
 
+if (import.meta.env.DEV) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (window as any).previewSlide = previewSlide;
+}
+
 function make_timestamp(context: AppContext): () => number {
   const room = context.room;
   const player = context.displayer as Player;
@@ -166,7 +170,8 @@ function connect({ context, viewer, sideEffect, logger }: ConnectParams) {
   viewer.prepare(({ width, height, slideCount }) => {
     if (context.destroyed) return;
     width && context.box.setStageRatio(height / width);
-    whiteboard = context.createWhiteBoardView(slideCount);
+    whiteboard = context.createWhiteBoardView({ size: slideCount });
+    whiteboard.setBaseRect({ width, height });
     kick_start();
   });
 

package/src/style.scss

@@ -1,5 +1,13 @@
 @import "./fancy-scrollbar.scss";
 
+@mixin no-user-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 $namespace: "netless-app-slide";
 
 .#{$namespace}-content {
@@ -11,12 +19,13 @@ $namespace: "netless-app-slide";
 .#{$namespace}-slide {
   width: 100%;
   height: 100%;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-mask {
   display: none;
   position: absolute;
-  z-index: 6000;
+  z-index: 10200;
   top: 0;
   left: 0;
   width: 100%;
@@ -28,7 +37,7 @@ $namespace: "netless-app-slide";
   flex-direction: column;
   align-items: center;
   position: absolute;
-  z-index: 6100;
+  z-index: 10300;
   top: 0;
   left: 0;
   width: 33%;
@@ -39,6 +48,7 @@ $namespace: "netless-app-slide";
   background: rgba(237, 237, 240, 0.9);
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.11);
   transition: transform 0.4s;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-active {
@@ -62,7 +72,7 @@ $namespace: "netless-app-slide";
   border: 7px solid transparent;
   border-radius: 4px;
   transition: border-color 0.3s;
-  user-select: none;
+  @include no-user-select;
 
   &:hover,
   &.#{$namespace}-preview-page-active {
@@ -88,7 +98,7 @@ $namespace: "netless-app-slide";
   text-align: right;
   font-size: 12px;
   color: #5f5f5f;
-  user-select: none;
+  @include no-user-select;
 }
 
 .#{$namespace}-footer {
@@ -98,7 +108,8 @@ $namespace: "netless-app-slide";
   align-items: center;
   padding: 0 16px;
   border-top: 1px solid #eeeef7;
-  color: #191919;
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 .#{$namespace}-float-footer {
@@ -126,7 +137,7 @@ $namespace: "netless-app-slide";
   background: transparent;
   transition: background 0.4s;
   cursor: pointer;
-  user-select: none;
+  @include no-user-select;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &:hover {
@@ -171,11 +182,15 @@ $namespace: "netless-app-slide";
 }
 
 .#{$namespace}-page-number {
+  display: flex;
+  align-items: center;
+  height: 26px;
   margin-left: auto;
   font-size: 13px;
-  user-select: none;
+  @include no-user-select;
   white-space: nowrap;
   word-break: keep-all;
+  font-variant-numeric: tabular-nums;
 }
 
 .#{$namespace}-page-number-input {
@@ -183,7 +198,7 @@ $namespace: "netless-app-slide";
   outline: none;
   width: 3em;
   margin: 0;
-  padding: 0 2px;
+  padding: 0 0.5em 0 2px;
   text-align: right;
   font-size: 13px;
   line-height: 1;
@@ -191,14 +206,17 @@ $namespace: "netless-app-slide";
   font-family: inherit;
   border-radius: 2px;
   color: currentColor;
+  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans",
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   background: transparent;
   transition: background 0.4s;
-  user-select: text;
+  font-variant-numeric: tabular-nums;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &:hover,
   &:focus,
   &:active {
+    user-select: text;
     background: #fff;
     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
   }
@@ -234,17 +252,13 @@ $namespace: "netless-app-slide";
 }
 
 .telebox-color-scheme-dark {
-  .#{$namespace}-page-number-input {
-    color: #a6a6a8;
-  }
   .#{$namespace}-page-number-input:active,
   .#{$namespace}-page-number-input:focus,
   .#{$namespace}-page-number-input:hover {
-    color: #222;
+    color: currentColor;
+    background: #25282e;
   }
   .#{$namespace}-footer {
-    color: #a6a6a8;
-    background: #2d2d33;
     border-top: none;
   }
   .#{$namespace}-footer-btn:hover {

package/src/typings.ts

@@ -1,4 +1,4 @@
-import type { Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
+import type { ISlideRenderOptions, Slide, SLIDE_EVENTS, SyncEvent } from "@netless/slide";
 import type { RegisterParams } from "@netless/window-manager";
 
 export type SlideState = Slide["slideState"];
@@ -18,19 +18,6 @@ export interface MagixEvents {
   [SLIDE_EVENTS.syncDispatch]: SyncEvent;
 }
 
-export interface AppOptions {
-  /** show debug controller */
+export interface AppOptions extends ISlideRenderOptions {
   debug?: boolean;
-  /** scale */
-  resolution?: number;
-  /** background color for slide animations */
-  bgColor?: string;
-  /** minimal fps  (default: 25) */
-  minFPS?: number;
-  /** maximal fps  (default: 30) */
-  maxFPS?: number;
-  /** automatically decrease fps  (default: true) */
-  autoFPS?: boolean;
-  /** whether to re-scale automatically (default: true) */
-  autoResolution?: boolean;
 }