@netless/app-presentation 0.1.8 → 0.1.9-beta.0

package/src/scrollbar/index.ts

@@ -0,0 +1,205 @@
+import './style.scss?inline';
+import type { View, AnimationMode } from "@netless/window-manager";
+import { makeDraggable } from "./Draggable";
+
+export interface ScrollbarOption {
+    getPageSize: () => {
+        width: number;
+        height: number;
+    };
+    getWritable: () => boolean;
+    syncView: () => void;
+}
+
+export class Scrollbar {
+    readonly namespace = "netless-app-presentation"
+    private container: HTMLElement;
+    private scrollContainer: HTMLDivElement = document.createElement('div');
+    private option: ScrollbarOption = {
+        getPageSize: () => {
+            return {
+                width: 0,
+                height: 0
+            }
+        },      
+        getWritable: () => false,
+        syncView: () => void 0
+    };
+    private view: View;
+    private scrollbarContainerX?: HTMLDivElement;
+    private scrollbarContainerY?: HTMLDivElement;
+    private scrollbarX?: HTMLDivElement;
+    private scrollbarY?: HTMLDivElement;
+    private draggableX?: { destroy: () => void };
+    private draggableY?: { destroy: () => void };
+    private cameraCache?: {
+        centerX: number;
+        centerY: number;
+        scale: number;
+    };
+    constructor(container: HTMLElement, option: ScrollbarOption, view: View) {
+        this.scrollContainer.className = this.c('scrollbar-container');
+        this.container = container;
+        this.option = option;
+        this.view = view;
+        this.init();
+        this.view.callbacks.on('onCameraUpdated', this.onCameraUpdated);
+    }
+    private c(className: string): string {
+        return `${this.namespace}-${className}`
+    }
+
+    private getOriginScale() {
+        const { size } = this.view;
+        const { width, height } = this.option.getPageSize();
+        return Math.min(size.height / height, size.width / width);
+    }
+
+    onCameraUpdated = () => {
+        const { scale, centerX, centerY } = this.view.camera;
+        const originScale = this.getOriginScale();
+        const ratio = Math.round(originScale / scale * 1000) / 1000;
+        const scrollX = Math.round(centerX * originScale);
+        const scrollY = Math.round(centerY * originScale);
+        if (this.scrollbarX) {
+            this.scrollbarX.style.width = `${ratio * 100}%`;
+            this.scrollbarX.style.display = ratio === 1 ? 'none' : 'block';
+            this.scrollbarX.style.transform = `translateX(${scrollX}px)`;
+        }
+        if (this.scrollbarY) {
+            this.scrollbarY.style.height = `${ratio * 100}%`;
+            this.scrollbarY.style.display = ratio === 1 ? 'none' : 'block';
+            this.scrollbarY.style.transform = `translateY(${scrollY}px)`;
+        }
+    }
+    
+
+    onDragStart = () => {
+        const camera = this.view.camera;
+        this.cameraCache = {
+            centerX: camera.centerX,
+            centerY: camera.centerY,
+            scale: camera.scale,
+        }
+    }
+
+    getScrollXRange(camera: {scale: number}) {
+        const { width } = this.option.getPageSize();
+        const originScale = this.getOriginScale();
+        const scale = camera.scale;
+        const ratio = Math.round(originScale / scale * 1000) / 1000;
+        const scrollWidth = width * (1-ratio);
+        const minX = -scrollWidth / 2;
+        const maxX = scrollWidth / 2;
+        return { minX, maxX };
+    }
+
+    getScrollYRange(camera: {scale: number}) {
+        const { height } = this.option.getPageSize();
+        const originScale = this.getOriginScale();
+        const scale = camera.scale;
+        const ratio = Math.round(originScale / scale * 1000) / 1000;
+        const scrollHeight = height * (1-ratio);
+        const minY = -scrollHeight / 2;
+        const maxY = scrollHeight / 2;
+        return { minY, maxY };
+    }
+
+    onDragX = (transformedDrag: {x: number, y: number}) => {
+        if (this.cameraCache) {
+            const {x} = transformedDrag;
+            const originScale = this.getOriginScale();
+            const { minX, maxX } = this.getScrollXRange(this.cameraCache);
+            const scrollX = Math.round(x / originScale);
+            let centerX = scrollX + this.cameraCache.centerX;
+            if (centerX < minX) {
+                centerX = minX;
+            } else if (centerX > maxX) {
+                centerX = maxX;
+            }
+            this.view.moveCamera({
+                centerX,
+                animationMode: 'immediately' as AnimationMode
+            })
+        }
+    }
+
+    onDragY = (transformedDrag: {x: number, y: number}) => {
+        if(this.cameraCache){
+            const {y} = transformedDrag;
+            const originScale = this.getOriginScale();
+            const { minY, maxY } = this.getScrollYRange(this.cameraCache);
+            const scrollY = Math.round(y / originScale);
+            let centerY = scrollY + this.cameraCache.centerY;
+            if (centerY < minY) {
+                centerY = minY;
+            } else if (centerY > maxY) {
+                centerY = maxY;
+            }
+            this.view.moveCamera({
+                centerY,
+                animationMode: 'immediately' as AnimationMode
+            }) 
+        }
+    }
+
+    onDragEnd = () => {
+        this.cameraCache = undefined
+        this.option.syncView();
+    }
+
+    private init() {
+        this.scrollbarX = document.createElement('div');
+        this.scrollbarX.classList.add(this.c('scrollbar-x'));
+        if (this.option.getWritable()) {
+            this.draggableX = makeDraggable(this.scrollbarX, {
+                direction: 'x',
+                onDrag: this.onDragX,
+                onDragEnd: this.onDragEnd,
+                onDragStart: this.onDragStart,
+            })
+        }
+        Object.assign(this.scrollbarX.style, {
+            width: '100%',
+            display: 'none'
+        });
+        this.scrollbarContainerX = document.createElement('div');
+        this.scrollbarContainerX.classList.add(this.c('scrollbar-container-x'));
+        this.scrollbarContainerX.appendChild(this.scrollbarX);
+
+        this.scrollbarY = document.createElement('div');
+        this.scrollbarY.classList.add(this.c('scrollbar-y'));
+        if (this.option.getWritable()) {
+            this.draggableY = makeDraggable(this.scrollbarY, {
+                direction: 'y',
+                onDrag: this.onDragY,
+                onDragEnd: this.onDragEnd,
+                onDragStart: this.onDragStart,
+            })
+        }
+        Object.assign(this.scrollbarY.style, {
+            height: '100%',
+            display: 'none'
+        });
+        this.scrollbarContainerY = document.createElement('div');
+        this.scrollbarContainerY.classList.add(this.c('scrollbar-container-y'));
+        this.scrollbarContainerY.appendChild(this.scrollbarY);
+
+        this.scrollContainer.append(this.scrollbarContainerX, this.scrollbarContainerY);
+        this.container.appendChild(this.scrollContainer);
+    }
+
+    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;
+    }
+
+}

package/src/scrollbar/style.scss

@@ -0,0 +1,53 @@
+$namespace: 'netless-app-presentation';
+
+.#{$namespace}-scrollbar-container{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 101;
+}
+.#{$namespace}-scrollbar-container-x,
+.#{$namespace}-scrollbar-container-y {
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.#{$namespace}-scrollbar-container-x {
+  bottom: 0;
+  left: 0;
+  height: 6px;
+  width: 100%;
+  padding-right: 6px;
+}
+
+.#{$namespace}-scrollbar-container-y {
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: 6px;
+}
+
+.#{$namespace}-scrollbar-x,
+.#{$namespace}-scrollbar-y {
+  border-radius: 2px;
+  background-color: rgba(27, 31, 77, .3);
+  pointer-events: auto;
+  cursor: default;
+}
+
+.#{$namespace}-scrollbar-x {
+  height: 6px;
+}
+
+.#{$namespace}-scrollbar-y {
+  width: 6px;
+}

package/src/style.scss

@@ -257,3 +257,54 @@ $namespace: 'netless-app-presentation';
     background: rgba(50, 50, 50, 0.9);
   }
 }
+.#{$namespace}-scrollbar-container{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 101;
+}
+.#{$namespace}-scrollbar-container-x,
+.#{$namespace}-scrollbar-container-y {
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.#{$namespace}-scrollbar-container-x {
+  bottom: 0;
+  left: 0;
+  height: 6px;
+  width: 100%;
+  padding-right: 6px;
+}
+
+.#{$namespace}-scrollbar-container-y {
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  flex-direction: column;
+  padding-bottom: 6px;
+}
+
+.#{$namespace}-scrollbar-x,
+.#{$namespace}-scrollbar-y {
+  border-radius: 2px;
+  background-color: rgba(27, 31, 77, .3);
+  pointer-events: auto;
+  cursor: default;
+}
+
+.#{$namespace}-scrollbar-x {
+  height: 6px;
+}
+
+.#{$namespace}-scrollbar-y {
+  width: 6px;
+}