ngx-editor/esm2020/lib/components/image-view/image-view.component.mjs

Rich Text Editor for angular using ProseMirror

import { Component, EventEmitter, Input, Output, ViewChild, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ImageViewComponent {
    constructor() {
        this.alt = '';
        this.title = '';
        this.outerWidth = '';
        this.selected = false;
        this.imageResize = new EventEmitter();
    }
    startResizing(e, direction) {
        e.preventDefault();
        this.resizeImage(e, direction);
    }
    resizeImage(evt, direction) {
        const startX = evt.pageX;
        const startWidth = this.imgEl.nativeElement.clientWidth;
        const isLeftResize = direction === 'left';
        const { width } = window.getComputedStyle(this.view.dom);
        const editorWidth = parseInt(width, 10);
        const onMouseMove = (e) => {
            const currentX = e.pageX;
            const diffInPx = currentX - startX;
            const computedWidth = isLeftResize ? startWidth - diffInPx : startWidth + diffInPx;
            // prevent image overflow the editor
            // prevent resizng below 20px
            if (computedWidth > editorWidth || computedWidth < 20) {
                return;
            }
            this.outerWidth = `${computedWidth}px`;
        };
        const onMouseUp = (e) => {
            e.preventDefault();
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
            this.imageResize.emit();
        };
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    }
}
ImageViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImageViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ImageViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.5", type: ImageViewComponent, selector: "ngx-image-view", inputs: { src: "src", alt: "alt", title: "title", outerWidth: "outerWidth", selected: "selected", view: "view" }, outputs: { imageResize: "imageResize" }, viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, static: true }], ngImport: i0, template: "<span class=\"NgxEditor__ImageWrapper\" [ngClass]=\"{'NgxEditor__Resizer--Active': selected}\" [style.width]=\"outerWidth\">\n  <span class=\"NgxEditor__ResizeHandle\" *ngIf=\"selected\">\n    <span class=\"NgxEditor__ResizeHandle--TL\"  (mousedown)=\"startResizing($event, 'left')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--TR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--BL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--BR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n  </span>\n  <img [src]=\"src\" [alt]=\"alt\" [title]=\"title\" #imgEl />\n</span>\n", styles: ["*,*:before,*:after{box-sizing:border-box}img{width:100%;height:100%}.NgxEditor__ImageWrapper{position:relative;display:inline-block;line-height:0;padding:2px}.NgxEditor__ImageWrapper.NgxEditor__Resizer--Active{padding:1px;border:1px solid #1a73e8}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle{position:absolute;height:100%;width:100%}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{position:absolute;width:7px;height:7px;background-color:#1a73e8;border:1px solid white}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{bottom:-5px;right:-5px;cursor:se-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR{top:-5px;right:-5px;cursor:ne-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL{top:-5px;left:-5px;cursor:nw-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL{bottom:-5px;left:-5px;cursor:sw-resize}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.5", ngImport: i0, type: ImageViewComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-image-view', template: "<span class=\"NgxEditor__ImageWrapper\" [ngClass]=\"{'NgxEditor__Resizer--Active': selected}\" [style.width]=\"outerWidth\">\n  <span class=\"NgxEditor__ResizeHandle\" *ngIf=\"selected\">\n    <span class=\"NgxEditor__ResizeHandle--TL\"  (mousedown)=\"startResizing($event, 'left')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--TR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--BL\" (mousedown)=\"startResizing($event, 'left')\"></span>\n    <span class=\"NgxEditor__ResizeHandle--BR\" (mousedown)=\"startResizing($event, 'right')\"></span>\n  </span>\n  <img [src]=\"src\" [alt]=\"alt\" [title]=\"title\" #imgEl />\n</span>\n", styles: ["*,*:before,*:after{box-sizing:border-box}img{width:100%;height:100%}.NgxEditor__ImageWrapper{position:relative;display:inline-block;line-height:0;padding:2px}.NgxEditor__ImageWrapper.NgxEditor__Resizer--Active{padding:1px;border:1px solid #1a73e8}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle{position:absolute;height:100%;width:100%}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR,.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{position:absolute;width:7px;height:7px;background-color:#1a73e8;border:1px solid white}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BR{bottom:-5px;right:-5px;cursor:se-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TR{top:-5px;right:-5px;cursor:ne-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--TL{top:-5px;left:-5px;cursor:nw-resize}.NgxEditor__ImageWrapper .NgxEditor__ResizeHandle .NgxEditor__ResizeHandle--BL{bottom:-5px;left:-5px;cursor:sw-resize}\n"] }]
        }], propDecorators: { src: [{
                type: Input
            }], alt: [{
                type: Input
            }], title: [{
                type: Input
            }], outerWidth: [{
                type: Input
            }], selected: [{
                type: Input
            }], view: [{
                type: Input
            }], imageResize: [{
                type: Output
            }], imgEl: [{
                type: ViewChild,
                args: ['imgEl', { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2Utdmlldy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZWRpdG9yL3NyYy9saWIvY29tcG9uZW50cy9pbWFnZS12aWV3L2ltYWdlLXZpZXcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWVkaXRvci9zcmMvbGliL2NvbXBvbmVudHMvaW1hZ2Utdmlldy9pbWFnZS12aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQWMsWUFBWSxFQUNuQyxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsR0FDekIsTUFBTSxlQUFlLENBQUM7OztBQVN2QixNQUFNLE9BQU8sa0JBQWtCO0lBTi9CO1FBUVcsUUFBRyxHQUFHLEVBQUUsQ0FBQztRQUNULFVBQUssR0FBRyxFQUFFLENBQUM7UUFDWCxlQUFVLEdBQUcsRUFBRSxDQUFDO1FBQ2hCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFHaEIsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBNEM1QztJQXhDQyxhQUFhLENBQUMsQ0FBYSxFQUFFLFNBQWlCO1FBQzVDLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUNuQixJQUFJLENBQUMsV0FBVyxDQUFDLENBQUMsRUFBRSxTQUFTLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsV0FBVyxDQUFDLEdBQWUsRUFBRSxTQUFpQjtRQUM1QyxNQUFNLE1BQU0sR0FBRyxHQUFHLENBQUMsS0FBSyxDQUFDO1FBQ3pCLE1BQU0sVUFBVSxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLFdBQVcsQ0FBQztRQUV4RCxNQUFNLFlBQVksR0FBRyxTQUFTLEtBQUssTUFBTSxDQUFDO1FBRTFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN6RCxNQUFNLFdBQVcsR0FBRyxRQUFRLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1FBRXhDLE1BQU0sV0FBVyxHQUFHLENBQUMsQ0FBYSxFQUFFLEVBQUU7WUFDcEMsTUFBTSxRQUFRLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQztZQUN6QixNQUFNLFFBQVEsR0FBRyxRQUFRLEdBQUcsTUFBTSxDQUFDO1lBQ25DLE1BQU0sYUFBYSxHQUFHLFlBQVksQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQyxDQUFDLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztZQUVuRixvQ0FBb0M7WUFDcEMsNkJBQTZCO1lBQzdCLElBQUksYUFBYSxHQUFHLFdBQVcsSUFBSSxhQUFhLEdBQUcsRUFBRSxFQUFFO2dCQUNyRCxPQUFPO2FBQ1I7WUFFRCxJQUFJLENBQUMsVUFBVSxHQUFHLEdBQUcsYUFBYSxJQUFJLENBQUM7UUFDekMsQ0FBQyxDQUFDO1FBRUYsTUFBTSxTQUFTLEdBQUcsQ0FBQyxDQUFhLEVBQUUsRUFBRTtZQUNsQyxDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFFbkIsUUFBUSxDQUFDLG1CQUFtQixDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztZQUN2RCxRQUFRLENBQUMsbUJBQW1CLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1lBRW5ELElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDMUIsQ0FBQyxDQUFDO1FBRUYsUUFBUSxDQUFDLGdCQUFnQixDQUFDLFdBQVcsRUFBRSxXQUFXLENBQUMsQ0FBQztRQUNwRCxRQUFRLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7OytHQW5EVSxrQkFBa0I7bUdBQWxCLGtCQUFrQiwrVENaL0Isa3JCQVNBOzJGREdhLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDRSxnQkFBZ0I7OEJBTWpCLEdBQUc7c0JBQVgsS0FBSztnQkFDRyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUksV0FBVztzQkFBcEIsTUFBTTtnQkFFK0IsS0FBSztzQkFBMUMsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsXG4gIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBFZGl0b3JWaWV3IH0gZnJvbSAncHJvc2VtaXJyb3Itdmlldyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ25neC1pbWFnZS12aWV3JyxcbiAgdGVtcGxhdGVVcmw6ICcuL2ltYWdlLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbWFnZS12aWV3LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuXG5leHBvcnQgY2xhc3MgSW1hZ2VWaWV3Q29tcG9uZW50IHtcbiAgQElucHV0KCkgc3JjOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFsdCA9ICcnO1xuICBASW5wdXQoKSB0aXRsZSA9ICcnO1xuICBASW5wdXQoKSBvdXRlcldpZHRoID0gJyc7XG4gIEBJbnB1dCgpIHNlbGVjdGVkID0gZmFsc2U7XG4gIEBJbnB1dCgpIHZpZXc6IEVkaXRvclZpZXc7XG5cbiAgQE91dHB1dCgpIGltYWdlUmVzaXplID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBWaWV3Q2hpbGQoJ2ltZ0VsJywgeyBzdGF0aWM6IHRydWUgfSkgaW1nRWw6IEVsZW1lbnRSZWY7XG5cbiAgc3RhcnRSZXNpemluZyhlOiBNb3VzZUV2ZW50LCBkaXJlY3Rpb246IHN0cmluZyk6IHZvaWQge1xuICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICB0aGlzLnJlc2l6ZUltYWdlKGUsIGRpcmVjdGlvbik7XG4gIH1cblxuICByZXNpemVJbWFnZShldnQ6IE1vdXNlRXZlbnQsIGRpcmVjdGlvbjogc3RyaW5nKTogdm9pZCB7XG4gICAgY29uc3Qgc3RhcnRYID0gZXZ0LnBhZ2VYO1xuICAgIGNvbnN0IHN0YXJ0V2lkdGggPSB0aGlzLmltZ0VsLm5hdGl2ZUVsZW1lbnQuY2xpZW50V2lkdGg7XG5cbiAgICBjb25zdCBpc0xlZnRSZXNpemUgPSBkaXJlY3Rpb24gPT09ICdsZWZ0JztcblxuICAgIGNvbnN0IHsgd2lkdGggfSA9IHdpbmRvdy5nZXRDb21wdXRlZFN0eWxlKHRoaXMudmlldy5kb20pO1xuICAgIGNvbnN0IGVkaXRvcldpZHRoID0gcGFyc2VJbnQod2lkdGgsIDEwKTtcblxuICAgIGNvbnN0IG9uTW91c2VNb3ZlID0gKGU6IE1vdXNlRXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IGN1cnJlbnRYID0gZS5wYWdlWDtcbiAgICAgIGNvbnN0IGRpZmZJblB4ID0gY3VycmVudFggLSBzdGFydFg7XG4gICAgICBjb25zdCBjb21wdXRlZFdpZHRoID0gaXNMZWZ0UmVzaXplID8gc3RhcnRXaWR0aCAtIGRpZmZJblB4IDogc3RhcnRXaWR0aCArIGRpZmZJblB4O1xuXG4gICAgICAvLyBwcmV2ZW50IGltYWdlIG92ZXJmbG93IHRoZSBlZGl0b3JcbiAgICAgIC8vIHByZXZlbnQgcmVzaXpuZyBiZWxvdyAyMHB4XG4gICAgICBpZiAoY29tcHV0ZWRXaWR0aCA+IGVkaXRvcldpZHRoIHx8IGNvbXB1dGVkV2lkdGggPCAyMCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHRoaXMub3V0ZXJXaWR0aCA9IGAke2NvbXB1dGVkV2lkdGh9cHhgO1xuICAgIH07XG5cbiAgICBjb25zdCBvbk1vdXNlVXAgPSAoZTogTW91c2VFdmVudCkgPT4ge1xuICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpO1xuXG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZW1vdmUnLCBvbk1vdXNlTW92ZSk7XG4gICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgb25Nb3VzZVVwKTtcblxuICAgICAgdGhpcy5pbWFnZVJlc2l6ZS5lbWl0KCk7XG4gICAgfTtcblxuICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlbW92ZScsIG9uTW91c2VNb3ZlKTtcbiAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZXVwJywgb25Nb3VzZVVwKTtcbiAgfVxufVxuIiwiPHNwYW4gY2xhc3M9XCJOZ3hFZGl0b3JfX0ltYWdlV3JhcHBlclwiIFtuZ0NsYXNzXT1cInsnTmd4RWRpdG9yX19SZXNpemVyLS1BY3RpdmUnOiBzZWxlY3RlZH1cIiBbc3R5bGUud2lkdGhdPVwib3V0ZXJXaWR0aFwiPlxuICA8c3BhbiBjbGFzcz1cIk5neEVkaXRvcl9fUmVzaXplSGFuZGxlXCIgKm5nSWY9XCJzZWxlY3RlZFwiPlxuICAgIDxzcGFuIGNsYXNzPVwiTmd4RWRpdG9yX19SZXNpemVIYW5kbGUtLVRMXCIgIChtb3VzZWRvd24pPVwic3RhcnRSZXNpemluZygkZXZlbnQsICdsZWZ0JylcIj48L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJOZ3hFZGl0b3JfX1Jlc2l6ZUhhbmRsZS0tVFJcIiAobW91c2Vkb3duKT1cInN0YXJ0UmVzaXppbmcoJGV2ZW50LCAncmlnaHQnKVwiPjwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cIk5neEVkaXRvcl9fUmVzaXplSGFuZGxlLS1CTFwiIChtb3VzZWRvd24pPVwic3RhcnRSZXNpemluZygkZXZlbnQsICdsZWZ0JylcIj48L3NwYW4+XG4gICAgPHNwYW4gY2xhc3M9XCJOZ3hFZGl0b3JfX1Jlc2l6ZUhhbmRsZS0tQlJcIiAobW91c2Vkb3duKT1cInN0YXJ0UmVzaXppbmcoJGV2ZW50LCAncmlnaHQnKVwiPjwvc3Bhbj5cbiAgPC9zcGFuPlxuICA8aW1nIFtzcmNdPVwic3JjXCIgW2FsdF09XCJhbHRcIiBbdGl0bGVdPVwidGl0bGVcIiAjaW1nRWwgLz5cbjwvc3Bhbj5cbiJdfQ==