项目初始化

Houjie

2025-04-11 1bf977929dd324f3ac64b70debd8a79443c54392

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
 * @fileoverview
 * File for camera zooming UI.
 * 
 * @author mebjas <minhazav@gmail.com>
 * 
 * The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
 * http://www.denso-wave.com/qrcode/faqpatent-e.html
 */
 
 import {
    BaseUiElementFactory,
    PublicUiElementIdAndClasses
} from "./base";
 
import { Html5QrcodeScannerStrings } from "../../strings";
 
/** Callback when zoom value changes with the slider UI. */
export type OnCameraZoomValueChangeCallback = (zoomValue: number) => void;
 
/** Class for creating and managing zoom slider UI. */
export class CameraZoomUi {
 
    private zoomElementContainer: HTMLDivElement;
    private rangeInput: HTMLInputElement;
    private rangeText: HTMLSpanElement;
 
    private onChangeCallback: OnCameraZoomValueChangeCallback | null = null;
 
    private constructor() {
        this.zoomElementContainer = document.createElement("div");
        this.rangeInput = BaseUiElementFactory.createElement<HTMLInputElement>(
            "input", PublicUiElementIdAndClasses.ZOOM_SLIDER_ID);
        this.rangeInput.type = "range";
 
        this.rangeText = document.createElement("span");
 
        // default values.
        this.rangeInput.min = "1";
        this.rangeInput.max = "5";
        this.rangeInput.value = "1";
        this.rangeInput.step = "0.1";
    }
 
    private render(
        parentElement: HTMLElement,
        renderOnCreate: boolean) {
        // Style for the range slider.
        this.zoomElementContainer.style.display
            = renderOnCreate ? "block" : "none";
        this.zoomElementContainer.style.padding = "5px 10px";
        this.zoomElementContainer.style.textAlign = "center";
        parentElement.appendChild(this.zoomElementContainer);
 
        this.rangeInput.style.display = "inline-block";
        this.rangeInput.style.width = "50%";
        this.rangeInput.style.height = "5px";
        this.rangeInput.style.background = "#d3d3d3";
        this.rangeInput.style.outline = "none";
        this.rangeInput.style.opacity = "0.7";
 
        let zoomString = Html5QrcodeScannerStrings.zoom();
        this.rangeText.innerText = `${this.rangeInput.value}x ${zoomString}`;
        this.rangeText.style.marginRight = "10px";
 
        // Bind values.
        let $this = this;
        this.rangeInput.addEventListener("input", () => $this.onValueChange());
        this.rangeInput.addEventListener("change", () => $this.onValueChange());
 
        this.zoomElementContainer.appendChild(this.rangeInput);
        this.zoomElementContainer.appendChild(this.rangeText);
    }
 
    private onValueChange() {
        let zoomString = Html5QrcodeScannerStrings.zoom();
        this.rangeText.innerText = `${this.rangeInput.value}x ${zoomString}`;
        if (this.onChangeCallback) {
            this.onChangeCallback(parseFloat(this.rangeInput.value));
        }
    }
 
    //#region Public APIs
    public setValues(
        minValue: number,
        maxValue: number,
        defaultValue: number,
        step: number) {
        this.rangeInput.min = minValue.toString();
        this.rangeInput.max = maxValue.toString();
        this.rangeInput.step = step.toString();
        this.rangeInput.value = defaultValue.toString();
 
        this.onValueChange();
    }
 
    public show() {
        this.zoomElementContainer.style.display = "block";
    }
 
    public hide() {
        this.zoomElementContainer.style.display = "none";
    }
 
    public setOnCameraZoomValueChangeCallback(
        onChangeCallback: OnCameraZoomValueChangeCallback) {
        this.onChangeCallback = onChangeCallback;
    }
 
    public removeOnCameraZoomValueChangeCallback() {
        this.onChangeCallback = null;
    }
    //#endregion
 
    /**
     * Creates and renders the zoom slider if {@code renderOnCreate} is 
     * {@code true}.
     */
    public static create(
        parentElement: HTMLElement,
        renderOnCreate: boolean): CameraZoomUi {
        let cameraZoomUi = new CameraZoomUi();
        cameraZoomUi.render(parentElement, renderOnCreate);
        return cameraZoomUi;
    }
}