@web-atoms/web-controls 2.4.41 → 2.4.43

package/src/basic/ZoomView.tsx

@@ -0,0 +1,270 @@
+import Bind from "@web-atoms/core/dist/core/Bind";
+import { BindableProperty } from "@web-atoms/core/dist/core/BindableProperty";
+import XNode, { isTemplateSymbol } from "@web-atoms/core/dist/core/XNode";
+import { AtomControl } from "@web-atoms/core/dist/web/controls/AtomControl";
+
+import "./styles/zoom-view-style";
+
+const center = (ev: TouchEvent) => {
+    const touch = ev.touches[0];
+    if (touch) {
+        return {
+            x: touch.clientX,
+            y: touch.clientY
+        }
+    }
+    return {
+        x: 0,
+        y: 0
+    };
+}
+
+const distance = (first: Touch, second: Touch) => {
+    return Math.hypot(first.pageX - second.pageX, first.pageY - second.pageY);
+};
+
+export interface IZoom {
+    anchorX: number;
+    anchorY: number;
+    x: number;
+    y: number;
+    scale: number;
+}
+
+export default class ZoomView extends AtomControl {
+
+    @BindableProperty
+    public zoom: IZoom;
+
+    @BindableProperty
+    public source: string;
+
+    @BindableProperty
+    private loading: boolean;
+
+    private image: HTMLImageElement;
+
+    private scrollDiv: HTMLDivElement;
+
+    private imageContainer: HTMLDivElement;
+
+    protected preCreate() {
+
+        this.element.title = "Use mouse wheel to zoom";
+
+        this.loading = false;
+        this.zoom = {
+            scale: 0,
+            anchorX: 0,
+            anchorY: 0,
+            x: 0,
+            y: 0
+        };
+
+        this.element.setAttribute("data-zoom-view", "zoom-view");
+
+        this.element.draggable = false;
+
+        this.render(<div>
+            <div class="scroll">
+                <img
+                    class="image-container"
+                    src={Bind.oneWay(() => this.getSource(this.source))}
+                    style-opacity={Bind.oneWay(() => this.loading ? "0.3" : "1")}
+                    event-load={() => {
+                        this.loading = false;
+                        this.updateZoom(this.zoom);
+                    }}
+                    />
+            </div>
+            <i class={Bind.oneWay(() => this.loading ? "spinner fa-duotone fa-spinner fa-spin" : "hide")}/>
+            <i
+                event-click={() => this.updateZoom()}
+                class={Bind.oneWay(() => this.zoom.scale ? "scale" : "hide")}
+                title="Display entire image"/>
+        </div>);
+        this.scrollDiv = this.element.firstElementChild as HTMLDivElement;
+        this.imageContainer = this.scrollDiv.firstElementChild as HTMLDivElement;
+        this.image = this.imageContainer as HTMLImageElement;
+
+        const scrollView = this.element;
+
+        let previous: {x: number, y: number};
+
+        let touchMoveDisposable;
+        let touchEndDisposable;
+
+        this.bindEvent(scrollView, "touchstart", (evs: TouchEvent) => {
+
+            previous = center(evs);
+            let previousDistance = undefined;
+            
+
+            touchMoveDisposable ??= this.bindEvent(scrollView, "touchmove", (ev: TouchEvent) => {
+
+
+                let { x, y, anchorX, anchorY, scale } = this.zoom;
+
+                if (ev.touches.length === 2) {
+
+                    ev.preventDefault();
+                    ev.stopImmediatePropagation();
+                    
+                    const rect = this.element.getBoundingClientRect();
+                    const first = ev.touches[0];
+                    const second = ev.touches[1];
+                    anchorX = ((first.clientX + second.clientX) / 2) - rect.left;
+                    anchorY = ((first.clientY + second.clientY) / 2) - rect.top;
+                    const newScale = distance(first, second);
+                    if (previousDistance === void 0) {
+                        previousDistance = newScale;
+                        return;
+                    }
+                    if (previousDistance === newScale) {
+                        return;
+                    }
+
+                    scale += newScale - previousDistance;
+                    previousDistance = newScale;
+                    this.updateZoom({
+                        anchorX,
+                        anchorY,
+                        x,
+                        y,
+                        scale
+                    });
+                    
+                    return;
+                }
+
+            });
+
+            touchEndDisposable ??= this.bindEvent(scrollView, "touchend", (ev: TouchEvent) => {
+                // ev.preventDefault();
+                // ev.stopImmediatePropagation?.();
+
+                touchMoveDisposable?.dispose();
+                touchEndDisposable?.dispose();
+                touchMoveDisposable = undefined;
+                touchEndDisposable = undefined;
+                previousDistance = undefined;
+            });
+        });
+
+        let mouseMoveDisposable;
+        let mouseUpDisposable;
+
+        this.bindEvent(scrollView, "dragstart", (ev: DragEvent) => {
+            ev.preventDefault();
+            ev.stopImmediatePropagation();
+        });
+
+        this.bindEvent(scrollView, "mousedown", (ev: MouseEvent) => {
+            this.element.dataset.state = "grabbing";
+            previous = {
+                x: ev.clientX,
+                y: ev.clientY
+            };
+
+            mouseMoveDisposable ??= this.bindEvent(scrollView, "mousemove", (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopImmediatePropagation?.();
+                const cp = { x: e.clientX, y: e.clientY };
+                const diffX = previous.x - cp.x;
+                const diffY = previous.y - cp.y;
+                previous = cp;
+                this.scrollDiv.scrollBy(diffX, diffY);
+            });
+            mouseUpDisposable ??= this.bindEvent(scrollView, "mouseup", (e: MouseEvent) => {
+                e.preventDefault();
+                e.stopImmediatePropagation?.();
+
+                this.element.dataset.state = "";
+                previous = null;
+                mouseMoveDisposable.dispose();
+                mouseUpDisposable.dispose();
+                mouseMoveDisposable = undefined;
+                mouseUpDisposable = undefined;
+            });
+
+        });
+
+        this.bindEvent(scrollView, "wheel", (ev: WheelEvent) => {
+
+            ev.preventDefault();
+            ev.stopImmediatePropagation?.();
+
+            const newScale = this.zoom.scale - (ev.deltaY < 0 ? -50 : 50);
+
+            const anchorX = ev.offsetX;
+            const anchorY = ev.offsetY;
+            const { x, y } = this.zoom;
+            this.updateZoom({
+                anchorX,
+                anchorY,
+                x,
+                y,
+                scale: newScale < 0 ? 0 : newScale
+            });
+
+        }, undefined, {
+            passive: false
+        });
+    }
+
+    private getSource(text: string) {
+        if (text) {
+            this.loading = true;
+        }
+        return text;
+    }
+
+    private updateZoom(zoom: IZoom = {
+        x: 0,
+        y: 0,
+        anchorX: 0,
+        anchorY: 0,
+        scale: 0
+    }) {
+        const { anchorX, anchorY, x, y } = zoom;
+        let { scale } = zoom;
+        // console.log(zoom);
+        this.zoom = zoom;
+        const image = this.image;
+        if (!image.naturalHeight) {
+            return;
+        }
+        const maxHeight = this.element.clientWidth > this.element.clientHeight;
+        const s = maxHeight
+            ? this.element.clientWidth / image.naturalWidth
+            : this.element.clientHeight / image.naturalHeight ;
+
+        if (scale <= 0) {
+            scale = 0;
+        }
+
+        const { clientWidth, clientHeight } = this.element;
+
+
+        if (scale <= 0) {
+            this.element.scrollTo(0,0);
+            this.imageContainer.style.transform = ``;
+            return;
+        }
+
+        const scaleFactor = (clientWidth + scale) / clientWidth;
+
+        this.imageContainer.style.transformOrigin = `${anchorX}px ${anchorY}px`;
+        this.imageContainer.style.transform = `scale(${scaleFactor})`;
+
+
+        const e = this.imageContainer.getBoundingClientRect();
+        // console.log([e.left, e.top]);
+        const left = -e.left;
+        const top = -e.top;
+        this.imageContainer.style.transformOrigin = "0 0";
+        const de = this.imageContainer.getBoundingClientRect();
+        // console.log([de.left, de.top]);
+        this.scrollDiv.scrollTo({ left: left + de.left, top: top + de.top , behavior: "instant" });
+    }
+}

package/src/basic/styles/pinch-zoom-view-style.ts

@@ -1,4 +1,8 @@
-import styled from "@web-atoms/core/dist/style/styled";
+
+import styled, { svgAsCssDataUrl } from "@web-atoms/core/dist/style/styled";
+
+const svg = svgAsCssDataUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/></svg>`);
+
 
     styled.css `
         position: relative;
@@ -18,6 +22,12 @@ import styled from "@web-atoms/core/dist/style/styled";
             background-color: white;
             padding: 4px;
             color: black;
+            width: 30px;
+            height: 30px;
+            background-image: ${svg};
+            background-position: 2px 2px;
+            background-size: 20px 20px;
+            background-repeat: no-repeat;
         }
 
         & > .image-container {

package/src/basic/styles/zoom-view-style.ts

@@ -0,0 +1,73 @@
+
+import styled, { svgAsCssDataUrl } from "@web-atoms/core/dist/style/styled";
+
+const svg = svgAsCssDataUrl(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M502.6 54.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L336 130.7 336 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 128c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-50.7 0L502.6 54.6zM80 272c-17.7 0-32 14.3-32 32s14.3 32 32 32l50.7 0L9.4 457.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L176 381.3l0 50.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-128c0-17.7-14.3-32-32-32L80 272z"/></svg>`);
+
+
+    styled.css `
+        position: relative;
+        cursor: grab;
+        overflow: hidden;
+
+        &[data-state=grabbing] {
+            cursor: grabbing;
+        }
+
+        & > div {
+
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            scrollbar-width: none;
+            overflow: auto;
+
+            
+            & > .image-container {
+                position: absolute;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+                overflow: hidden;
+                object-fit: contain;
+                width: 100%;
+                height: 100%;
+            }
+
+        }
+
+        & > .scale {
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            border: solid 2px darkgray;
+            border-radius: 4px;
+            background-color: white;
+            padding: 4px;
+            color: black;
+            width: 30px;
+            height: 30px;
+            background-image: ${svg};
+            background-position: 2px 2px;
+            background-size: 20px 20px;
+            background-repeat: no-repeat;
+        }
+
+        & > .spinner {
+            position: absolute;
+            left: 0;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            display: inline-grid;
+            align-items: center;
+            justify-items: center;
+            z-index: 10;
+        }
+
+        & > .hide {
+            display: none;
+        }
+    `.installGlobal("div[data-zoom-view]");