@netless/app-presentation 0.1.9-beta.3 → 0.1.9-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-presentation",
-  "version": "0.1.9-beta.3",
+  "version": "0.1.9-beta.5",
   "description": "Netless App for presentation slides (images)",
   "author": "netless",
   "license": "MIT",

package/src/app-presentation.ts

@@ -72,6 +72,8 @@ export interface PresentationController {
   moveCamera: (camera: { centerX: number, centerY: number, scale: number }) => void;
   /** get the origin scale */
   getOriginScale: () => number;
+  /** get the view scale */
+  getScale: () =>number;
 }
 
 export { styles }
@@ -391,6 +393,10 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       return Math.min(size.height / height, size.width / width);
     }
 
+    const getScale =() => {
+      return view.camera.scale
+    }
+
     const moveCamera = (camera: { centerX: number, centerY: number, scale: number }) => {
       if (context.getIsWritable()) {
         view.moveCamera({...camera, animationMode: 'immediately' as AnimationMode});
@@ -404,6 +410,7 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
     if (options.useScrollbar) {
       dispose.make(() => {
         scrollbar = new Scrollbar(app.contentDOM, { 
+          appId: context.appId,
           getPageSize,
           getOriginScale,
           syncView,
@@ -540,7 +547,7 @@ export const NetlessAppPresentation: NetlessApp<{}, {}, PresentationAppOptions,
       }
     }
 
-    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale }
+    const controller: PresentationController = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log, setDocsViewReadonly, setReadonly, moveCamera, getOriginScale, getScale }
 
     dispose.add(listen(window, 'message', (ev: MessageEvent<"@netless/_presentation_">) => {
       if (ev.data === "@netless/_presentation_") {

package/src/scrollbar/index.ts

@@ -4,6 +4,7 @@ import { makeDraggable } from "./Draggable";
 import { debounce } from 'lodash';
 
 export interface ScrollbarOption {
+    appId: string;
     readonly?: boolean;
     getPageSize: () => {
         width: number;
@@ -20,14 +21,16 @@ export interface ScrollbarEventCallback {
     onScrollbarDragEnd?: () => void;
     onScrollbarDragX?: (x: number) => void;
     onScrollbarDragY?: (y: number) => void;
-    onScrollCameraUpdated?: (originScale: number, scale: number) => void;
-  }
+    onScrollCameraUpdated?: (appid: string, originScale: number, scale: number) => void;
+}
 
 export class Scrollbar {
     readonly namespace = "netless-app-presentation"
+    readonly appId: string;
     private container: HTMLElement;
     private scrollContainer: HTMLDivElement = document.createElement('div');
     private option: ScrollbarOption = {
+        appId: '',
         getPageSize: () => {
             return {
                 width: 0,
@@ -55,6 +58,7 @@ export class Scrollbar {
         this.scrollContainer.className = this.c('scrollbar-container');
         this.container = container;
         this.option = option;
+        this.appId = option.appId;
         this.readonly = option.readonly || false;
         this.view = view;
         this.init();
@@ -65,9 +69,8 @@ export class Scrollbar {
 
     setReadonly(bol: boolean){
         this.readonly = bol;
-        if (this.readonly) {
-            this.destroy()
-        } else {
+        this.destroy()
+        if (!this.readonly) {
             this.init();
         }
     }
@@ -89,7 +92,7 @@ export class Scrollbar {
             this.scrollbarY.style.display = ratio === 1 ? 'none' : 'block';
             this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
         }
-        this.option.scrollbarEventCallback?.onScrollCameraUpdated?.(originScale, scale);
+        this.option.scrollbarEventCallback?.onScrollCameraUpdated?.(this.appId, originScale, scale);
     }, 50)
 
     onDragStart = () => {
@@ -215,15 +218,27 @@ export class Scrollbar {
 
     destroy() {
         this.view.callbacks.off('onCameraUpdated', this.onCameraUpdated);
-        this.scrollbarX?.remove();
-        this.scrollbarY?.remove();
-        this.scrollbarX = undefined;
-        this.scrollbarY = undefined;
-
-        this.draggableX?.destroy();
-        this.draggableY?.destroy();
-        this.draggableX = undefined;
-        this.draggableY = undefined;
+        if (this.scrollbarX && this.scrollbarContainerX) {
+            this.scrollbarContainerX.removeChild(this.scrollbarX);
+            this.scrollbarX.remove();
+            this.scrollbarContainerX.remove();
+            this.scrollbarX = undefined;
+        }
+        if (this.scrollbarY && this.scrollbarContainerY) {
+            this.scrollbarContainerY.removeChild(this.scrollbarY);
+            this.scrollbarY.remove();
+            this.scrollbarContainerY.remove();
+            this.scrollbarY = undefined;
+        }
+        if (this.draggableX) {
+            this.draggableX.destroy();
+            this.draggableX = undefined;
+        }
+        if (this.draggableY) {
+            this.draggableY.destroy();
+            this.draggableY = undefined;
+        }
+
     }
 
 }