cropper.ts

    import { html } from '@polymer/polymer/lib/utils/html-tag';
    import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners';
    import { PolymerElement } from '@polymer/polymer/polymer-element';
    import { dom } from '@fortawesome/fontawesome-svg-core/index.es';
    import { ImageDTO } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.DTO';
    import '../../../helper/stylesheetHelper.js';
    import { checkSecurityAnswerCode } from '../../checkAnswerCode';
    import { UUID } from '../../../libs/uuid/uuid';
    import { cropperScriptName } from '../../../externalScripNames';
    import { MccImage } from '../../mcc-image';
    import { MccImageType, ImageFormat, ServiceType } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.Enum';
    import { MccEntityState } from '../../../api/typescripttypes/MCC.Common.ServiceInterfaces.DTO.Base';
    import { commonClient } from '../../../commonClient/commonClient';
    import { MccDialog } from '../../../mccDialogHandler';
    import { MaterialDTO } from '../../../api/typescripttypes/MCC.WMS.ServiceInterfaces.DTO';
    import { closeDialog } from '../../../mainHandler';
    import { ICloseableView } from '../../../interfaces/ICloseableView';
    import type Cropper from 'cropperjs';
    import { LazyLoader } from '@node-projects/base-custom-webcomponent';

    export class KardexImageCrop extends GestureEventListeners(PolymerElement) implements ICloseableView {
        image: MccImage;
        _cropper: Cropper;
        _sy: number;
        _sx: number;
        file: any;
        item: MaterialDTO;
        parentType: string;
        parent: any;
        saveCallback: (image: ImageDTO) => void;
        imageDto: ImageDTO;
        imageType: MccImageType;
        static get template() {
            return html`
                <style include="cropper"></style>
                <div id="root" style="display: flex; padding: 3px; flex-direction: column; height: 100%; width: 100%; box-sizing: border-box;">
                    <div style="display: flex">
                        <paper-button
                            id="tapLoad"
                            style="border-right: 1px white solid; border-bottom: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 30px; width: 50%; display: flex; align-items: center; justify-content: center;"
                            on-tap="_tapLoad"
                        >
                            <span style="font-size: 20px;color: white;">
                                <i style="width:20px; height: 20px;" class="fa fa-images" aria-hidden="true"></i>
                                <t-t>Load</t-t>
                            </span>
                        </paper-button>
                        <paper-button
                            id="tapCam"
                            style="border-left: 1px white solid; border-bottom: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 30px; width: 50%; display: flex; align-items: center; justify-content: center;"
                            on-tap="_tapCamera"
                        >
                            <span style="font-size: 20px;color: white;">
                                <i style="width:20px; height: 20px;" class="fa fa-images" aria-hidden="true"></i>
                                <t-t>Camera</t-t>
                            </span>
                        </paper-button>
                        <paper-button
                            id="tapCamSelect"
                            style="border-left: 1px white solid; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0 0 1px 0; height: 29px; width: 50%; display: none; align-items: center; justify-content: center; font-size: 20px; color: white;"
                        >
                            <select
                                id="selectNew"
                                style="border-left: 1px white solid; padding: 0; background-color: var(--kx-dark); border: 0; border-radius: 0; margin: 0 0 1px 0; height: 29px; width: 100%; text-align-last: center; justify-content: center; font-size: 20px; color: white;"
                                on-change="_changeCam"
                            ></select>
                        </paper-button>
                    </div>
                    <div style="display: flex; box-sizing: border-box; flex-direction: row; width: 100%; height: 100%; margin-top: 2px;">
                        <input type="file" id="fileInput" on-change="_fileChange" hidden="" accept="image/x-png, image/gif, image/jpeg" />
                        <div id="usrImg" style="display: flex; align-items:center; height: 100%; width: 100%;">
                            <img id="container" style="width: 100%; height: 100%; display: none" />
                            <video id="video" style="width:100%; height: 100%; display:none;"></video>
                        </div>
                        <div style="width: 40px; display: flex; flex-direction: column;">
                            <!--<paper-button style="font-size: 1px; padding: 0; background-color: rgb(0, 141, 76); border-radius: 0; margin: 0; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;" on-tap="_tapMove">
                            <span style="font-size: 20px;color: white;"><i class="fa fa-arrows" aria-hidden="true"></i></span>
                        </paper-button>-->
                            <paper-button
                                style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                                on-tap="_tapRl"
                            >
                                <span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-undo" aria-hidden="true"></i></span>
                            </paper-button>
                            <paper-button
                                style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                                on-tap="_tapRr"
                            >
                                <span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-redo" aria-hidden="true"></i></span>
                            </paper-button>
                            <paper-button
                                style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                                on-tap="_tapFh"
                            >
                                <span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-arrows-alt-h" aria-hidden="true"></i></span>
                            </paper-button>
                            <paper-button
                                style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
                                on-tap="_tapFv"
                            >
                                <span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-arrows-alt-v" aria-hidden="true"></i></span>
                            </paper-button>
                            <paper-button
                                id="btnSnap"
                                style="font-size: 1px;padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 0; margin-top: 1px; height: 40px; width: 40px; display: none; align-items: center; justify-content: center;"
                                on-tap="_tapSnap"
                            >
                                <span style="font-size: 20px;color: white;"><i style="width:20px; height: 20px;" class="fa fa-camera" aria-hidden="true"></i></span>
                            </paper-button>
                        </div>
                    </div>
                    <div style="display:flex; flex-direction:row;">
                        <paper-button
                            style="flex-grow: 1; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 1px 1px 0 0; height: 30px; display: flex; align-items: center; justify-content: center;"
                            on-tap="_tapCancel"
                        >
                            <span style="font-size: 20px;color: white;">
                                <i style="width:20px; height: 20px;" class="fa fa-times" aria-hidden="true"></i>
                                <t-t>Cancel</t-t>
                            </span>
                        </paper-button>
                        <paper-button
                            style="flex-grow: 1; padding: 0; background-color: var(--kx-dark); border-radius: 0; margin: 1px 0 0 1px; height: 30px; display: flex; align-items: center; justify-content: center;"
                            on-tap="_tapSave"
                        >
                            <span style="font-size: 20px;color: white;">
                                <i style="width:20px; height: 20px;" class="fa fa-check" aria-hidden="true"></i>
                                <t-t>Save</t-t>
                            </span>
                        </paper-button>
                    </div>
                </div>
            `;
        }
        constructor(parent: any, parentType: string, item?: MaterialDTO) {
            super();
            this.parentType = parentType;
            this.parent = parent;
            if (item) {
                this.item = item;
            }
        }
        static get is() {
            return 'kardex-image-crop';
        }

        static get properties() {
            return {
                image: {
                    type: Object,
                    notify: true,
                },
                file: {
                    type: String,
                    value: null,
                },
                dto: {
                    type: Object,
                    value: null,
                },
                imageType: String,
            };
        }

        ready() {
            super.ready();
            if (this._cropper) {
                this._cropper.destroy();
                //@ts-ignore
                this.$.container.style.display = 'none';
            }
            dom.i2svg({ node: this.$.root });
            if (this.parent) {
                (<HTMLElement>this.$.tapLoad).style.display = 'none';
                (<HTMLElement>this.$.tapCam).style.display = 'none';
                (<HTMLElement>this.$.tapCam).style.width = '100%';
                (<HTMLElement>this.$.tapCamSelect).style.width = '100%';
                this._tapCamera();
            }
        }

        viewClosed() {
            this.toggleCamera(false);
        }

        setImage(image: MccImage) {
            if (image != null) {
                this._setImageFile(image.getImageAsBase64());
            }
            this.image = image;
        }

        _tapLoad() {
            const elem = this.$.fileInput; // extract extension
            //@ts-ignore
            if (this.$.btnSnap.style.display != 'none') {
                this.toggleCamBtn();
            }
            //@ts-ignore
            this.$.video.style.display = 'none';
            if (elem && document.createEvent) {
                const evt = document.createEvent('MouseEvents');
                evt.initEvent('click', true, false);
                elem.dispatchEvent(evt);
            }
        }

        _tapCamera() {
            const vid = <HTMLVideoElement>this.$.video;
            const _select = this.$.selectNew;
            if (this._cropper) {
                this._cropper.destroy();
                (<HTMLElement>this.$.container).style.display = 'none';
            }
            vid.autoplay = true;
            vid.style.display = 'block';
            this.toggleCamBtn();
            this.toggleCamera(true, localStorage.getItem('lastCamIdSelected'));
            //@ts-ignore
            navigator.mediaDevices.enumerateDevices().then((mediaDevices) => {
                _select.innerHTML = '';
                let count = 1;
                mediaDevices.forEach((devices) => {
                    //@ts-ignore
                    if (devices.kind == 'videoinput') {
                        const option = document.createElement('option');
                        option.value = devices.deviceId;
                        if (localStorage.getItem('lastCamIdSelected')) {
                            option.selected = false;
                            if (option.value == localStorage.getItem('lastCamIdSelected')) {
                                option.selected = true;
                            }
                        }
                        const textNode = document.createTextNode(devices.label || `Camera ${count++}`);
                        option.appendChild(textNode);
                        _select.appendChild(option);
                    }
                });
            });
        }

        toggleCamBtn() {
            const btnSnap = <HTMLButtonElement>this.$.btnSnap;
            const tapCamSelect = <HTMLButtonElement>this.$.tapCamSelect;
            const tapCam = <HTMLButtonElement>this.$.tapCam;
            const tapLoad = <HTMLButtonElement>this.$.tapLoad;
            if (btnSnap.style.display == 'none') {
                btnSnap.style.display = 'flex';
                tapCamSelect.style.display = 'flex';
                tapCam.style.display = 'none';
            } else {
                btnSnap.style.display = 'none';
                tapCamSelect.style.display = 'none';
                tapCam.style.display = 'flex';
                tapLoad.style.display = 'flex';
            }
        }

        toggleCamera(onOff: boolean, deviceId?: string) {
            const vid = <HTMLVideoElement>this.$.video;
            const _this = this;
            'use strict';
            if (onOff == true) {
                if (navigator.mediaDevices.getUserMedia) {
                    let contraints;
                    if (deviceId) {
                        contraints = { video: { deviceId: { exact: deviceId } } };
                    } else {
                        contraints = { video: true };
                    }
                    navigator.mediaDevices
                        .getUserMedia(contraints)
                        .then((stream) => {
                            vid.srcObject = stream;
                        })
                        .catch((err) => {
                            switch (err.name) {
                                case 'NotFoundError':
                                    alert('Kamera nicht gefunden!');
                                    break;
                                default:
                                    alert(err);
                            }
                            _this.toggleCamBtn();
                        });
                }
            } else {
                //@ts-ignore
                const stream: any = vid.srcObject;
                if (stream) {
                    const tracks = stream.getTracks();
                    for (let i = 0; i < tracks.length; i++) {
                        const track = tracks[i];
                        track.stop();
                    }
                }
                vid.style.display = 'none';
                vid.srcObject = null;
            }
        }

        _changeCam() {
            if (this._cropper) {
                this._cropper.destroy();
                (<HTMLElement>this.$.container).style.display = 'none';
            }
            const vid = <HTMLVideoElement>this.$.video;
            const stream: any = vid.srcObject;
            if (stream) {
                const tracks = stream.getTracks();
                for (let i = 0; i < tracks.length; i++) {
                    const track = tracks[i];
                    track.stop();
                }
            }
            let dId = '';
            for (let i = 0; i < this.$.selectNew.getElementsByTagName('option').length; i++) {
                if (this.$.selectNew.getElementsByTagName('option')[i].selected) {
                    dId = this.$.selectNew.getElementsByTagName('option')[i].value;
                }
            }
            localStorage.setItem('lastCamIdSelected', dId);
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices
                    .getUserMedia({ video: { deviceId: { exact: dId } } })
                    .then((stream) => {
                        vid.srcObject = stream;
                    })
                    .catch((err0r) => {
                        alert(err0r);
                    });
            }
        }

        _tapSnap() {
            const canvas = document.createElement('canvas');
            const vid = <HTMLVideoElement>this.$.video;
            const elem = this.$.container as HTMLElement;
            canvas.width = vid.clientWidth;
            canvas.height = vid.clientHeight;
            canvas.getContext('2d').drawImage(vid, 0, 0, canvas.width, canvas.height);
            this._setImageFile(canvas.toDataURL());
            elem.style.display = 'block';
            vid.style.display = 'none';
            this.toggleCamera(false);
            this.toggleCamBtn();
        }

        _tapMove() {
            this._cropper.setDragMode('move');
        }

        _tapRl() {
            this._cropper.rotate(-90);
        }

        _tapRr() {
            this._cropper.rotate(90);
        }

        _tapFh() {
            this._sx == -1 ? (this._sx = 1) : (this._sx = -1);
            this._cropper.scale(this._sx, this._sy);
        }

        _tapFv() {
            this._sy == -1 ? (this._sy = 1) : (this._sy = -1);
            this._cropper.scale(this._sx, this._sy);
        }

        _fileChange(e) {
            const file = e.target.files[0];
            this.file = file;
            const data = URL.createObjectURL(file);
            this._setImageFile(data);
        }

        async _setImageFile(data: string) {
            this._sx = 1;
            this._sy = 1;
            if (this._cropper) {
                this._cropper.destroy();
            }
            const img = this.$.container as HTMLImageElement;
            img.src = data;
            await LazyLoader.LoadJavascript(cropperScriptName);
            //@ts-ignore
            this._cropper = new Cropper(img, {
                dragMode: 'crop',
            });
        }

        _tapCancel() {
            if ((<HTMLButtonElement>this.$.btnSnap).style.display != 'none') {
                this.toggleCamBtn();
            }
            this.toggleCamera(false);
            if (this.parent) {
                if (this.parentType == 'handheld') {
                    this.parent.back();
                    (<HTMLElement>this.parent.$.openCam).style.display = 'flex';
                } else if (this.parentType == 'reflectionApi') {
                    closeDialog(this);
                }
            } else {
                this.parentElement.style.display = 'none';
            }
        }

        _tapSave() {
            this._cropper.getCroppedCanvas().toBlob((blob) => {
                this.imageDto = new ImageDTO();
                const d = new Date();
                this.imageDto.Id = UUID.genV1().toString();
                (this.imageDto.Name = 'MccImage_' + d.getFullYear() + '_' + (d.getMonth() + 1) + '_' + d.getDate() + '_' + d.getHours() + '_' + d.getMinutes() + '_' + d.getSeconds()), (this.imageDto.LanguageId = null);
                if (this.item || this.parentType == 'reflectionApi') {
                    this.imageDto.MccImageType = MccImageType.WMS_MaterialImage;
                } else {
                    this.imageDto.MccImageType = this.imageType;
                }
                (this.imageDto.ImageFormat = this._getUpperCaseType(blob)), (this.imageDto.MccEntityState = MccEntityState.Added);
                const fileReader = new FileReader();
                fileReader.onload = () => {
                    // @ts-ignore
                    const fileReaderStrings = fileReader.result.split(',', 2);
                    this.imageDto.Data = fileReaderStrings[1];
                    const retVal = commonClient.commitObjectT(ImageDTO, this.imageDto, null, ServiceType.CommonService);
                    checkSecurityAnswerCode(retVal, () => {
                        if (this.saveCallback) {
                            this.saveCallback(this.imageDto);
                            MccDialog.confirm({
                                title: 'Common_Successful',
                                message: 'Bild wurde geändert.',
                                //Übersetzung fehlt noch
                            });
                        } else if (this.item) {
                            this.item.ImageName = this.imageDto.Name;
                            if (this.item.MccEntityState != MccEntityState.Added) {
                                this.item.MccEntityState = MccEntityState.Modified;
                            }
                            const retVal = commonClient.commitObjectT(MaterialDTO, this.item, null, ServiceType.WMSService);
                            checkSecurityAnswerCode(retVal, () => {
                                MccDialog.confirm({
                                    title: 'Common_Successful',
                                    message: 'Bild wurde geändert.',
                                    //Übersetzung fehlt noch
                                });
                                this.item.MccEntityState = MccEntityState.Unchanged;
                            });
                        }
                        this._tapCancel();
                    });
                };
                fileReader.readAsDataURL(blob);
            });
        }

        _getUpperCaseType(blob): ImageFormat {
            const typeString = blob.type.split('/')[1];
            return typeString.charAt(0).toUpperCase() + typeString.slice(1);
        }
    }

    //@ts-ignore
    customElements.define(KardexImageCrop.is, KardexImageCrop);