@netless/app-slide 0.3.0-canary.4 → 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,6 +1,6 @@
 {
   "name": "@netless/app-slide",
-  "version": "0.3.0-canary.4",
+  "version": "0.3.0-canary.5",
   "main": "dist/main.js",
   "module": "dist/main.mjs",
   "types": "dist/index.d.ts",
@@ -9,13 +9,15 @@
     "dist",
     "README-zh.md"
   ],
+  "dependencies": {
+    "@netless/slide": "^0.5.10"
+  },
   "devDependencies": {
-    "@netless/slide": "^0.5.3",
     "@types/color-string": "^1.5.2",
     "color-string": "^1.9.1",
     "side-effect-manager": "^1.1.1",
-    "value-enhancer": "^1.3.0",
-    "vanilla-lazyload": "^17.8.2"
+    "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);
@@ -533,8 +532,8 @@ 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;

package/src/index.ts

@@ -42,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,

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,6 +19,7 @@ $namespace: "netless-app-slide";
 .#{$namespace}-slide {
   width: 100%;
   height: 100%;
+  @include no-user-select;
 }
 
 .#{$namespace}-preview-mask {
@@ -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 {
@@ -127,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 {
@@ -177,7 +187,7 @@ $namespace: "netless-app-slide";
   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;
@@ -200,13 +210,13 @@ $namespace: "netless-app-slide";
     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;
   }

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;
 }