lib-sketch-tool/fesm2015/lib-sketch-tool.js

## Installing with npm $ npm install --save lib-sketch-tool

import { __decorate, __metadata, __awaiter } from 'tslib';
import { Injectable, EventEmitter, ViewChild, Input, Output, Component, NgModule } from '@angular/core';
import { fabric } from 'fabric';
import { TranslateService } from '@ngx-translate/core';
import { ActionSheetController, IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';

var AvailableGeometricShape;
(function (AvailableGeometricShape) {
    AvailableGeometricShape[AvailableGeometricShape["Rectangle"] = 0] = "Rectangle";
    AvailableGeometricShape[AvailableGeometricShape["Circle"] = 1] = "Circle";
    AvailableGeometricShape[AvailableGeometricShape["Triangle"] = 2] = "Triangle";
    AvailableGeometricShape[AvailableGeometricShape["Line"] = 3] = "Line";
    AvailableGeometricShape[AvailableGeometricShape["Cross"] = 4] = "Cross";
})(AvailableGeometricShape || (AvailableGeometricShape = {}));

const SHAPE_DATA = {
    width: 200,
    height: 200,
    left: 50,
    top: 50,
    radius: 100,
    stroke: 10,
    freeDrawingBrushWidth: 10,
    cornerSize: 20
};

let CanvasManagerService = class CanvasManagerService {
    constructor() {
        this.canvasId = 'canvas';
        this.mousePosition = { x: 0, y: 0 };
        this.left = 0;
    }
    get canvasObjects() {
        return this.canvas.getObjects();
    }
    get canvasBackgroundImage() {
        return this.canvas.backgroundImage;
    }
    get activeObject() {
        return this.canvas.getActiveObject();
    }
    get activeGroup() {
        return this.canvas.getActiveObjects();
    }
    get divCanvasContainer() {
        let collection = document.getElementsByClassName('div-canvas-container');
        return collection[collection.length - 1];
    }
    createCanvas(canvasId) {
        this.canvasId = canvasId;
        this.canvas = new fabric.Canvas(this.canvasId);
    }
    emptyCanvas() {
        if (this.canvas) {
            this.canvas.dispose();
        }
        this.canvas = new fabric.Canvas(this.canvasId);
        this.canvas.clear();
        this.canvas.remove(this.canvas.getObjects());
    }
    loadNewImage(backgroundImageURL) {
        this.emptyCanvas();
        if (backgroundImageURL) {
            this.setBackgroundFromURL(backgroundImageURL);
        }
    }
    renderCanvas() {
        this.markSelectedObjectsDirty();
        this.canvas.renderAll();
    }
    addGeometricShape(strokeColor, fillColor, shape) {
        switch (shape) {
            case AvailableGeometricShape.Rectangle:
                this.addRectangle(strokeColor, fillColor);
                break;
            case AvailableGeometricShape.Circle:
                this.addCircle(strokeColor, fillColor);
                break;
            case AvailableGeometricShape.Triangle:
                this.addTriangle(strokeColor, fillColor);
                break;
            case AvailableGeometricShape.Line:
                this.addHorizontalLine(strokeColor, fillColor);
                break;
            case AvailableGeometricShape.Cross:
                this.addCross(strokeColor, fillColor);
                break;
        }
    }
    addRectangle(strokeColor, fillColor) {
        this.canvas.add(new fabric.Rect({
            width: SHAPE_DATA.width,
            height: SHAPE_DATA.height,
            left: SHAPE_DATA.left,
            top: SHAPE_DATA.top,
            fill: fillColor,
            stroke: strokeColor,
            strokeWidth: SHAPE_DATA.stroke,
            cornerSize: SHAPE_DATA.cornerSize
        }));
    }
    addCircle(strokeColor, fillColor) {
        this.canvas.add(new fabric.Circle({
            left: SHAPE_DATA.left,
            top: SHAPE_DATA.top,
            radius: SHAPE_DATA.radius,
            stroke: strokeColor,
            strokeWidth: SHAPE_DATA.stroke,
            fill: fillColor,
            cornerSize: SHAPE_DATA.cornerSize
        }));
    }
    addTriangle(strokeColor, fillColor) {
        this.canvas.add(new fabric.Triangle({
            width: SHAPE_DATA.width,
            height: SHAPE_DATA.height,
            left: SHAPE_DATA.left,
            top: SHAPE_DATA.top,
            fill: fillColor,
            stroke: strokeColor,
            strokeWidth: SHAPE_DATA.stroke,
            cornerSize: SHAPE_DATA.cornerSize
        }));
    }
    addHorizontalLine(strokeColor, fillColor) {
        this.canvas.add(this.createHorizontalLine(strokeColor));
    }
    createHorizontalLine(strokeColor) {
        const line = new fabric.Line([100, 150, 200, 150], {
            left: 50,
            top: 100,
            stroke: strokeColor,
            strokeWidth: 5,
            cornerSize: SHAPE_DATA.cornerSize
        });
        line.setControlsVisibility({
            bl: false,
            br: false,
            tl: false,
            tr: false,
            mt: false,
            mb: false
        });
        return line;
    }
    createVerticalLine(strokeColor) {
        const line = new fabric.Line([150, 100, 150, 200], {
            left: 100,
            top: 50,
            stroke: strokeColor,
            strokeWidth: 5,
            cornerSize: SHAPE_DATA.cornerSize
        });
        line.setControlsVisibility({
            bl: false,
            br: false,
            tl: false,
            tr: false,
            ml: false,
            mr: false
        });
        return line;
    }
    addCross(strokeColor, fillColor) {
        const horizontalLine = this.createHorizontalLine(strokeColor);
        const verticalLine = this.createVerticalLine(strokeColor);
        this.canvas.add(horizontalLine);
        this.canvas.add(verticalLine);
    }
    toggleFreeDrawing() {
        this.canvas.isDrawingMode = !this.canvas.isDrawingMode;
    }
    setFreeDrawingBrushColor(color) {
        this.canvas.freeDrawingBrush.color = color;
        this.setFreeDrawingBrushWidthFromZoom(this.canvas.getZoom());
    }
    setFreeDrawingBrushWidthFromZoom(zoom) {
        this.canvas.freeDrawingBrush.width = SHAPE_DATA.freeDrawingBrushWidth * (1 / zoom);
    }
    addText(color, inputText) {
        const text = new fabric.IText('text', {
            fontFamily: 'arial black',
            fontStyle: 'bold',
            left: SHAPE_DATA.left,
            top: SHAPE_DATA.top,
            cornerSize: SHAPE_DATA.cornerSize
        });
        text.setColor(color);
        this.canvas.add(text);
    }
    addImage(imageURL) {
        return new Promise((resolve, reject) => {
            const canvas = this.canvas;
            const image = new Image();
            image.onload = function (img) {
                const fabricImage = new fabric.Image(image, {
                    angle: 0,
                    width: image.width,
                    height: image.height,
                    left: SHAPE_DATA.left,
                    top: SHAPE_DATA.top,
                    scaleX: 1,
                    scaleY: 1,
                    cornerSize: SHAPE_DATA.cornerSize
                });
                canvas.add(fabricImage);
                resolve();
            };
            image.src = imageURL;
        });
    }
    setBackgroundFromURL(backgroundImageURL) {
        const container = this.divCanvasContainer;
        this.setCanvasSize(container.clientWidth, container.clientHeight);
        return new Promise((resolve, reject) => {
            if (backgroundImageURL == null) {
                return reject();
            }
            const image = new Image();
            image.onload = () => {
                const f_img = new fabric.Image(image, {});
                const scaleData = this.computeScaleFactor(f_img, this.canvas);
                this.canvas.setBackgroundImage(f_img, this.canvas.renderAll.bind(this.canvas), {
                    scaleX: scaleData.scaleFactor,
                    scaleY: scaleData.scaleFactor
                });
                this.setCanvasSize(f_img.width * scaleData.scaleFactor, f_img.height * scaleData.scaleFactor);
                this.canvas.renderAll();
                resolve();
            };
            image.src = backgroundImageURL;
        });
    }
    computeScaleFactor(f_img, canvas) {
        const container = this.divCanvasContainer;
        const canvasAspect = container.clientWidth / container.clientHeight;
        const imgAspect = f_img.width / f_img.height;
        let left, top, scaleFactor;
        if (canvasAspect <= imgAspect) {
            scaleFactor = container.clientWidth / f_img.width;
            left = 0;
            top = -(f_img.height * scaleFactor - container.clientHeight) / 2;
        }
        else {
            scaleFactor = container.clientHeight / f_img.height;
            top = 0;
            left = -(f_img.width * scaleFactor - container.clientWidth) / 2;
        }
        this.left = left;
        return { scaleFactor: scaleFactor, left: left, top: top };
    }
    onOrientationChange() {
        this.mousePosition = { x: this.canvas.getWidth, y: this.canvas.getHeight };
        this.cropImage();
    }
    changeSelectedObjectsFillColor(color) {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                object.setColor(color);
                this.canvas.renderAll();
            }
        }
    }
    changeSelectedObjectsStrokeColor(color) {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                if (object.type === 'i-text') {
                    object.setColor(color);
                }
                else {
                    object.stroke = color;
                    object.set('dirty', true);
                }
            }
            this.canvas.renderAll();
        }
    }
    deleteSelectedObjects() {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                this.canvas.remove(object);
            }
            this.canvas.discardActiveObject();
            this.canvas.renderAll();
        }
    }
    bringSelectedObjectsToFront() {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                this.canvas.bringToFront(object);
            }
        }
    }
    sendSelectedObjectsToBack() {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                this.canvas.sendToBack(object);
            }
        }
    }
    jsonFromCanvas() {
        return this.canvas.toJSON(['width', 'height']);
    }
    loadfromJson(json) {
        const container = this.divCanvasContainer;
        this.setCanvasSize(container.clientWidth, container.clientHeight);
        return new Promise((resolve, reject) => {
            this.adjustCanvas(json);
            this.canvas.loadFromJSON(json, this.canvas.renderAll.bind(this.canvas));
            this.canvas.renderAll();
            resolve();
        });
    }
    adjustCanvas(json) {
        const backgroundImage = json['backgroundImage'];
        const container = this.divCanvasContainer;
        const width = json['width'];
        const height = json['height'];
        const canvasWidth = container.clientWidth;
        const canvasHeight = container.clientHeight;
        const canvasAspect = canvasWidth / canvasHeight;
        const imgAspect = width / height;
        let scaleFactor, left;
        if (canvasAspect <= imgAspect) {
            scaleFactor = canvasWidth / width;
            left = 0;
        }
        else {
            scaleFactor = canvasHeight / height;
            left = -(width * scaleFactor - container.clientWidth) / 2;
        }
        this.left = left;
        backgroundImage['scaleX'] *= scaleFactor;
        backgroundImage['scaleY'] *= scaleFactor;
        this.setCanvasSize(width * scaleFactor, height * scaleFactor);
        const objects = json['objects'];
        for (let i = 0; i < objects.length; i++) {
            objects[i]['left'] *= scaleFactor;
            objects[i]['top'] *= scaleFactor;
            objects[i]['scaleX'] *= scaleFactor;
            objects[i]['scaleY'] *= scaleFactor;
        }
    }
    exportImageAsDataURL() {
        return this.canvas.toDataURL('image/png');
    }
    selectItem(itemNumber) {
        this.canvas.setActiveObject(this.canvas.item(itemNumber));
    }
    getIndexOf(activeObject) {
        return this.canvas.getObjects().indexOf(activeObject);
    }
    markSelectedObjectsDirty() {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            for (const object of activeObjects) {
                object.set('dirty', true);
            }
        }
    }
    addSelectionRectangle() {
        this.cropRectangle = new fabric.Rect({
            fill: 'transparent',
            originX: 'left',
            originY: 'top',
            stroke: '#ccc',
            strokeDashArray: [2, 2],
            opacity: 1,
            width: 0,
            height: 0
        });
        this.cropRectangle.visible = false;
        this.canvas.add(this.cropRectangle);
    }
    ajustCropRectangleFromMouse(event) {
        const x = Math.min(event.offsetX, this.mousePosition.x), y = Math.min(event.offsetY, this.mousePosition.y), w = Math.abs(event.offsetX - this.mousePosition.x), h = Math.abs(event.offsetY - this.mousePosition.y);
        if (!w || !h) {
            return false;
        }
        this.cropRectangle
            .set('top', y)
            .set('left', x)
            .set('width', w)
            .set('height', h);
        this.canvas.renderAll();
        return true;
    }
    startSelectingCropRectangleFromMouse(event) {
        this.cropRectangle.left = event.offsetX;
        this.cropRectangle.top = event.offsetY;
        this.cropRectangle.setCoords();
        this.mousePosition = { x: event.offsetX, y: event.offsetY };
        this.cropRectangle.visible = true;
        this.canvas.bringToFront(this.cropRectangle);
    }
    cropImage() {
        const left = this.cropRectangle.left;
        const top = this.cropRectangle.top;
        const width = this.cropRectangle.width;
        const height = this.cropRectangle.height;
        const container = this.divCanvasContainer;
        const canvasWidth = container.clientWidth;
        const canvasHeight = container.clientHeight;
        const canvasAspect = canvasWidth / canvasHeight;
        const imgAspect = width / height;
        let scaleFactor;
        if (canvasAspect <= imgAspect) {
            scaleFactor = canvasWidth / width;
        }
        else {
            scaleFactor = canvasHeight / height;
        }
        this.setCanvasSize(width * scaleFactor, height * scaleFactor);
        this.canvas.backgroundImage.scaleX *= scaleFactor;
        this.canvas.backgroundImage.scaleY *= scaleFactor;
        this.canvas.backgroundImage.left -= left;
        this.canvas.backgroundImage.left *= scaleFactor;
        this.canvas.backgroundImage.top -= top - scaleFactor;
        this.canvas.backgroundImage.top *= scaleFactor;
        this.moveAllObjectsInCanvas(-1 * left, -1 * top, scaleFactor);
        this.enableSlection();
        this.cropRectangle.visible = false;
        this.canvas.remove(this.cropRectangle);
        this.canvas.renderAll();
    }
    enableSlection() {
        this.canvas.selectable = true;
        this.canvas.selection = true;
    }
    ajustCropRectangle(event) {
        const touch = event.touches[0];
        const rect = event.target.getBoundingClientRect();
        const x = Math.min(touch.clientX - rect.left, this.mousePosition.x), y = Math.min(touch.clientY - rect.top, this.mousePosition.y), w = Math.abs(touch.clientX - rect.left - this.mousePosition.x), h = Math.abs(touch.clientY - rect.top - this.mousePosition.y);
        if (!w || !h) {
            return false;
        }
        this.cropRectangle
            .set('left', x)
            .set('top', y)
            .set('width', w)
            .set('height', h);
        this.canvas.renderAll();
        return true;
    }
    startSelectingCropRectangle(event) {
        const touch = event.touches[0];
        const rect = event.target.getBoundingClientRect();
        this.cropRectangle.left = touch.clientX - rect.left;
        this.cropRectangle.top = touch.clientY - rect.top;
        this.cropRectangle.setCoords();
        this.mousePosition = { x: touch.clientX - rect.left, y: touch.clientY - rect.top };
        this.canvas.renderAll();
        this.cropRectangle.visible = true;
        this.canvas.bringToFront(this.cropRectangle);
    }
    disableSelection() {
        this.canvas.selection = false;
    }
    moveAllObjectsInCanvas(x, y, scaleFactor) {
        const objects = this.canvas.getObjects();
        for (const obj of objects) {
            obj.left += x;
            obj.left *= scaleFactor;
            obj.scaleX *= scaleFactor;
            obj.top += y;
            obj.scaleY *= scaleFactor;
            obj.top *= scaleFactor;
            obj.setCoords();
        }
    }
    groupSelectedObjects() {
        const activeObjects = this.canvas.getActiveObjects();
        if (activeObjects) {
            const objects = [];
            for (const object of activeObjects) {
                objects.push(object);
            }
            this.deleteSelectedObjects();
            const group = new fabric.Group(objects);
            this.canvas.add(group);
            group.setCoords();
            this.canvas.setActiveObject(group);
            this.canvas.renderAll();
        }
    }
    setLastPanPosition(event) {
        this.lastPanPosition = new fabric.Point(event.touches[0].clientX, event.touches[0].clientY);
    }
    panCanvas(event) {
        const delta = new fabric.Point(event.touches[0].clientX - this.lastPanPosition.x, event.touches[0].clientY - this.lastPanPosition.y);
        this.canvas.relativePan(delta);
        this.preventPanOutsideCanvas();
        this.canvas.renderAll();
        this.setLastPanPosition(event);
    }
    preventPanOutsideCanvas() {
        const canvasViewPort = this.canvas.viewportTransform;
        const bottomEndPoint = this.canvas.height * (canvasViewPort[0] - 1);
        if (canvasViewPort[5] >= 0 || -bottomEndPoint > canvasViewPort[5]) {
            canvasViewPort[5] = (canvasViewPort[5] >= 0) ? 0 : -bottomEndPoint;
        }
        const rightEndPoint = this.canvas.width * (canvasViewPort[0] - 1);
        if (canvasViewPort[4] >= 0 || -rightEndPoint > canvasViewPort[4]) {
            canvasViewPort[4] = (canvasViewPort[4] >= 0) ? 0 : -rightEndPoint;
        }
    }
    zoom(event) {
        if (Math.abs(event.overallVelocity) > 0.005) {
            const point = new fabric.Point(event.center.x, event.center.y);
            let zoom = this.canvas.getZoom();
            zoom = zoom + (event.scale - zoom) / 20;
            if (zoom < 1) {
                zoom = 1;
                this.canvas.zoomToPoint(new fabric.Point(0, 0), zoom);
                this.canvas.absolutePan(new fabric.Point(0, 0));
            }
            else {
                if (zoom > 10) {
                    zoom = 10;
                }
                this.canvas.zoomToPoint(point, zoom);
            }
            this.setFreeDrawingBrushWidthFromZoom(zoom);
            this.canvas.renderAll();
        }
    }
    setCanvasSize(width, height) {
        this.canvas.setWidth(width);
        this.canvas.setHeight(height);
    }
    resetZoom() {
        this.canvas.zoomToPoint(new fabric.Point(0, 0), 1);
        this.canvas.absolutePan(new fabric.Point(0, 0));
    }
};
CanvasManagerService = __decorate([
    Injectable(),
    __metadata("design:paramtypes", [])
], CanvasManagerService);

//import { GestureController } from ‘@ionic/core/dist/collection/utils/gesture/gesture-controller’;
const Black = '#000000';
const Transparent = 'transparent';
let MobileSketchToolComponent = class MobileSketchToolComponent {
    constructor(actionSheetCtrl, canvasManagerService, translate) {
        this.actionSheetCtrl = actionSheetCtrl;
        this.canvasManagerService = canvasManagerService;
        this.translate = translate;
        this.canvas = new EventEmitter();
        this.strokeColor = Black;
        this.fillColor = Transparent;
        this.isCropping = false;
        this.isPanning = false;
        this.isLoaded = false;
        this.isUndoAvailable = false;
        this.isSelectingColor = false;
    }
    ngOnInit() {
        if (this.imageData) {
            this.canvasManagerService.emptyCanvas();
            if (this.loadedJson == null || this.loadedJson.length < 10) {
                this.canvasManagerService.setBackgroundFromURL(this.imageData);
            }
            else {
                this.previousJson = JSON.parse(this.loadedJson);
                this.currentJson = this.previousJson;
                this.canvasManagerService
                    .loadfromJson(JSON.parse(this.loadedJson));
            }
            this.isLoaded = true;
            this.previousImageData = this.imageData;
        }
        this.emitCanvas();
    }
    ngOnChanges() {
        if (this.isLoaded) {
            if (this.loadedJson === null || this.loadedJson.length < 10 || this.imageData !== this.previousImageData) {
                this.canvasManagerService.emptyCanvas();
                this.canvasManagerService.setBackgroundFromURL(this.imageData);
                this.previousImageData = this.imageData;
                this.currentJson = null;
            }
            else if (this.loadedJson !== JSON.stringify(this.currentJson)) {
                this.previousJson = JSON.parse(this.loadedJson);
                this.currentJson = this.previousJson;
                this.canvasManagerService
                    .loadfromJson(JSON.parse(this.loadedJson));
            }
        }
        this.emitCanvas();
    }
    ngAfterViewInit() {
        /*this.gesture = new Gesture(this.element.nativeElement);
        this.gesture.listen();
        this.gesture.on('pinch', $event => this.pinch($event));*/
    }
    ngOnDestroy() {
        //this.gesture.destroy();
    }
    get hasPictograms() {
        return !(!this.pictograms);
    }
    addText() {
        this.disableAllStates();
        this.canvasManagerService.addText(this.strokeColor, 'text ');
        this.emitCanvas();
    }
    addShape(shape) {
        this.disableAllStates();
        this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
        this.emitCanvas();
    }
    addImage(source) {
        this.disableAllStates();
        this.canvasManagerService.addImage(this.pictogramsPath + source);
        this.emitCanvas();
    }
    changeStrokeColor() {
        this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
        this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
        this.emitCanvas();
    }
    bringFoward() {
        this.disableAllStates();
        this.canvasManagerService.bringSelectedObjectsToFront();
        this.emitCanvas();
    }
    sendToBack() {
        this.disableAllStates();
        this.canvasManagerService.sendSelectedObjectsToBack();
        this.emitCanvas();
    }
    crop() {
        if (this.isCropping) {
            this.disableCroppping();
        }
        else {
            this.disableAllStates();
            this.isCropping = true;
            this.canvasManagerService.resetZoom();
            this.canvasManagerService.disableSelection();
            this.canvasManagerService.addSelectionRectangle();
            this.isUndoAvailable = true;
            this.previousJson = this.canvasManagerService.jsonFromCanvas();
            this.emitCanvas();
        }
    }
    disableCroppping() {
        this.isCropping = false;
        this.canvasManagerService.enableSlection();
        this.isUndoAvailable = false;
    }
    deleteSelection() {
        this.disableAllStates();
        this.canvasManagerService.deleteSelectedObjects();
        this.emitCanvas();
    }
    mouseUp() {
        if (this.isCropping) {
            this.isCropping = false;
            this.canvasManagerService.cropImage();
            this.isUndoAvailable = true;
            this.emitCanvas();
        }
    }
    mouseMove(event) {
        if (this.isCropping) {
            this.canvasManagerService.ajustCropRectangle(event);
        }
        else if (this.isPanning) {
            this.canvasManagerService.panCanvas(event);
        }
    }
    mouseDown(event) {
        if (this.isCropping) {
            this.canvasManagerService.startSelectingCropRectangle(event);
        }
        else if (this.isPanning) {
            this.canvasManagerService.setLastPanPosition(event);
        }
    }
    pinch(event) {
        event.preventDefault();
        this.disableDrawing();
        this.canvasManagerService.zoom(event);
    }
    group() {
        this.disableAllStates();
        this.canvasManagerService.groupSelectedObjects();
        this.emitCanvas();
    }
    undo() {
        this.canvasManagerService.loadfromJson(this.previousJson);
        this.isUndoAvailable = false;
        this.emitCanvas();
    }
    onColorClicked() {
        this.isSelectingColor = true;
        this.stopPanning();
    }
    onMoveClicked() {
        this.isPanning = !this.isPanning;
        this.disableDrawing();
        if (this.isPanning) {
            this.canvasManagerService.disableSelection();
        }
        else {
            this.canvasManagerService.enableSlection();
        }
    }
    disablePanning() {
        this.isPanning = false;
        this.canvasManagerService.enableSlection();
    }
    disableAllStates() {
        this.disableDrawing();
        this.disablePanning();
    }
    stopPanning() {
        if (this.isPanning) {
            this.isPanning = false;
            this.canvasManagerService.enableSlection();
        }
    }
    setColor(color) {
        this.strokeColor = color;
        this.changeStrokeColor();
        this.isSelectingColor = false;
        this.emitCanvas();
    }
    draw() {
        this.isDrawing = !this.isDrawing;
        this.canvasManagerService.toggleFreeDrawing();
        this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
        if (this.isDrawing) {
            this.isPanning = false;
        }
    }
    disableDrawing() {
        if (this.isDrawing) {
            this.isDrawing = false;
            this.canvasManagerService.toggleFreeDrawing();
        }
    }
    translateShapeButtonsText() {
        const translationArray = [];
        translationArray.push(this.translate.instant('rectangle'));
        translationArray.push(this.translate.instant('triangle'));
        translationArray.push(this.translate.instant('circle'));
        translationArray.push(this.translate.instant('line'));
        translationArray.push(this.translate.instant('cross'));
        translationArray.push(this.translate.instant('text'));
        return translationArray;
    }
    presentShapeActionSheet() {
        return __awaiter(this, void 0, void 0, function* () {
            this.disableDrawing();
            const titleText = this.translate.instant('addGeometricShape');
            const buttonsText = this.translateShapeButtonsText();
            let i = 0;
            const actionSheet = yield this.actionSheetCtrl.create({
                header: titleText,
                buttons: [
                    {
                        text: '\uf0c8   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Rectangle);
                        }
                    },
                    {
                        text: '\uf0d8   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Triangle);
                        }
                    },
                    {
                        text: '\uf111   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Circle);
                        }
                    },
                    {
                        text: '\uf068   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Line);
                        }
                    },
                    {
                        text: '\uf067   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Cross);
                        }
                    },
                    {
                        text: '\uf031   ' + buttonsText[i++],
                        handler: () => {
                            this.canvasManagerService.addText(this.strokeColor, '');
                        }
                    }
                ]
            });
            yield actionSheet.present();
        });
    }
    translateEditButtonsText() {
        const translationArray = [];
        translationArray.push(this.translate.instant('crop'));
        translationArray.push(this.translate.instant('group'));
        translationArray.push(this.translate.instant('bringToFront'));
        translationArray.push(this.translate.instant('sendToBack'));
        translationArray.push(this.translate.instant('delete'));
        return translationArray;
    }
    presentEditActionSheet() {
        return __awaiter(this, void 0, void 0, function* () {
            this.disableDrawing();
            const titleText = this.translate.instant('edition');
            const buttonsText = this.translateEditButtonsText();
            let i = 0;
            const actionSheet = yield this.actionSheetCtrl.create({
                header: titleText,
                buttons: [
                    {
                        text: '\uf125 ' + buttonsText[i++],
                        handler: () => {
                            this.crop();
                        }
                    },
                    {
                        text: '\uf247   ' + buttonsText[i++],
                        handler: () => {
                            this.group();
                        }
                    },
                    {
                        text: '\uf0de   ' + buttonsText[i++],
                        handler: () => {
                            this.bringFoward();
                        }
                    },
                    {
                        text: '\uf0dd   ' + buttonsText[i++],
                        handler: () => {
                            this.sendToBack();
                        }
                    },
                    {
                        text: '\uf1f8   ' + buttonsText[i++],
                        handler: () => {
                            this.deleteSelection();
                        }
                    }
                ]
            });
            yield actionSheet.present();
        });
    }
    presentPictogramsActionSheet() {
        return __awaiter(this, void 0, void 0, function* () {
            this.disableDrawing();
            const buttons = [];
            const actionSheetStyles = [];
            const images = this.pictograms;
            for (let i = 0; i < images.length; i++) {
                const style = document.createElement('style');
                style.type = 'text/css';
                style.innerHTML =
                    '.customCSSClass' +
                        i +
                        '{background: url(' +
                        "'" +
                        this.pictogramsPath +
                        images[i] +
                        "'" +
                        ') no-repeat !important;padding-left:50px !important;height:80px; background-position: left center !important;}';
                document.getElementsByTagName('head')[0].appendChild(style);
                actionSheetStyles.push(style);
                buttons.push({
                    role: 'destructive',
                    text: images[i],
                    cssClass: 'customCSSClass' + i,
                    handler: () => {
                        this.addImage(images[i]);
                    }
                });
            }
            const titleText = this.translate.instant('addPictogram');
            const actionSheet = yield this.actionSheetCtrl.create({
                header: titleText,
                buttons: buttons
            });
            actionSheet.onDidDismiss().then(() => {
                for (let i = 0; i < actionSheetStyles.length; i++) {
                    if (actionSheetStyles[i].parentNode != null) {
                        actionSheetStyles[i].parentNode.removeChild(actionSheetStyles[i]);
                    }
                }
            });
            yield actionSheet.present();
        });
    }
    emitCanvas() {
        this.canvas.emit(this.canvasManagerService.canvas);
    }
};
__decorate([
    ViewChild('pinchElement'),
    __metadata("design:type", Object)
], MobileSketchToolComponent.prototype, "element", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], MobileSketchToolComponent.prototype, "imageData", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], MobileSketchToolComponent.prototype, "loadedJson", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], MobileSketchToolComponent.prototype, "pictogramsPath", void 0);
__decorate([
    Input(),
    __metadata("design:type", Array)
], MobileSketchToolComponent.prototype, "pictograms", void 0);
__decorate([
    Output(),
    __metadata("design:type", Object)
], MobileSketchToolComponent.prototype, "canvas", void 0);
MobileSketchToolComponent = __decorate([
    Component({
        selector: 'lib-mobile-sketch-tool',
        template: "<ion-content>\n  <div class=\"div-canvas-container\" (touchstart)=\"mouseDown($event)\" (touchmove)=\"mouseMove($event)\" (touchend)=\"mouseUp()\"\n    #pinchElement>\n    <canvas id=\"canvas\"></canvas>\n\n    <div class=\"color-picker\" *ngIf=\"isSelectingColor\">\n      <ion-grid fixed>\n        <ion-row>\n          <ion-col style=\"background:#660000\" (tap)=\"setColor('#660000')\">\n          </ion-col>\n          <ion-col style=\"background:#663300\" (tap)=\"setColor('#663300')\">\n          </ion-col>\n          <ion-col style=\"background:#666600\" (tap)=\"setColor('#666600')\">\n          </ion-col>\n          <ion-col style=\"background:#006600\" (tap)=\"setColor('#006600')\">\n          </ion-col>\n          <ion-col style=\"background:#000066\" (tap)=\"setColor('#000066')\">\n          </ion-col>\n          <ion-col style=\"background:#660066\" (tap)=\"setColor('#660066')\">\n          </ion-col>\n\n        </ion-row>\n        <ion-row>\n          <ion-col style=\"background:#CC0000\" (tap)=\"setColor('#CC0000')\">\n          </ion-col>\n          <ion-col style=\"background:#CC6600\" (tap)=\"setColor('#CC6600')\">\n          </ion-col>\n          <ion-col style=\"background:#CCCC00\" (tap)=\"setColor('#CCCC00')\">\n          </ion-col>\n          <ion-col style=\"background:#00CC00\" (tap)=\"setColor('#00CC00')\">\n          </ion-col>\n          <ion-col style=\"background:#0000CC\" (tap)=\"setColor('#0000CC')\">\n          </ion-col>\n          <ion-col style=\"background:#CC00CC\" (tap)=\"setColor('#CC00CC')\">\n          </ion-col>\n\n        </ion-row>\n        <ion-row>\n          <ion-col style=\"background:#FF0000\" (tap)=\"setColor('#FF0000')\">\n          </ion-col>\n          <ion-col style=\"background:#FF8000\" (tap)=\"setColor('#FF8000')\">\n          </ion-col>\n          <ion-col style=\"background:#FFFF00\" (tap)=\"setColor('#FFFF00')\">\n          </ion-col>\n          <ion-col style=\"background:#00FF00\" (tap)=\"setColor('#00FF00')\">\n          </ion-col>\n          <ion-col style=\"background:#0000FF\" (tap)=\"setColor('#0000FF')\">\n          </ion-col>\n          <ion-col style=\"background:#FF00FF\" (tap)=\"setColor('#FF00FF')\">\n          </ion-col>\n\n        </ion-row>\n        <ion-row>\n          <ion-col style=\"background:#FF6666\" (tap)=\"setColor('#FF6666')\">\n          </ion-col>\n          <ion-col style=\"background:#FFB266\" (tap)=\"setColor('#FFB266')\">\n          </ion-col>\n          <ion-col style=\"background:#FFFF66\" (tap)=\"setColor('#FFFF66')\">\n          </ion-col>\n          <ion-col style=\"background:#66FF66\" (tap)=\"setColor('#66FF66')\">\n          </ion-col>\n          <ion-col style=\"background:#6666FF\" (tap)=\"setColor('#6666FF')\">\n          </ion-col>\n          <ion-col style=\"background:#FF66FF\" (tap)=\"setColor('#FF66FF')\">\n          </ion-col>\n\n        </ion-row>\n        <ion-row>\n          <ion-col style=\"background:#FF9999\" (tap)=\"setColor('#FF9999')\">\n          </ion-col>\n          <ion-col style=\"background:#FFCC99\" (tap)=\"setColor('#FFCC99')\">\n          </ion-col>\n          <ion-col style=\"background:#FFFF99\" (tap)=\"setColor('#FFFF99')\">\n          </ion-col>\n          <ion-col style=\"background:#99FF99\" (tap)=\"setColor('#99FF99')\">\n          </ion-col>\n          <ion-col style=\"background:#9999FF\" (tap)=\"setColor('#9999FF')\">\n          </ion-col>\n          <ion-col style=\"background:#FF99FF\" (tap)=\"setColor('#FF99FF')\">\n          </ion-col>\n\n        </ion-row>\n        <ion-row>\n          <ion-col style=\"background:#FFFFFF\" (tap)=\"setColor('#FFFFFF')\">\n          </ion-col>\n          <ion-col style=\"background:#C0C0C0\" (tap)=\"setColor('#C0C0C0')\">\n          </ion-col>\n          <ion-col style=\"background:#808080\" (tap)=\"setColor('#808080')\">\n          </ion-col>\n          <ion-col style=\"background:#606060\" (tap)=\"setColor('#606060')\">\n          </ion-col>\n          <ion-col style=\"background:#303030\" (tap)=\"setColor('#606060')\">\n          </ion-col>\n          <ion-col style=\"background:#000000\" (tap)=\"setColor('#000000')\">\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ion-toolbar>\n    <div class=\"div-edit-toolbar\">\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" fill=\"clear\" (click)=\"presentShapeActionSheet()\">\n        <i class=\"fas fa-shapes\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" fill=\"clear\" (click)=\"presentPictogramsActionSheet()\" *ngIf=\"hasPictograms\">\n        <i class=\"fas fa-images\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" fill=\"clear\" (click)=\"presentEditActionSheet()\">\n        <i class=\"fas fa-edit\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" [fill]=\"!isDrawing ? 'clear' : 'solid'\" (click)=\"draw()\">\n        <i class=\"fas fa-pencil-alt\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" fill=\"clear\" (click)=\"onColorClicked()\">\n        <i class=\"fas fa-palette\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" [fill]=\"!isPanning ? 'clear' : 'solid'\" (click)=\"onMoveClicked()\">\n        <i class=\"fas fa-arrows-alt\" id=\"icon\"></i>\n      </ion-button>\n\n      <ion-button class=\"button-edit-toolbar\" size=\"large\" fill=\"clear\" (click)=\"undo()\" *ngIf=\"isUndoAvailable\">\n        <i class=\"fas fa-undo\" id=\"icon\"></i>\n      </ion-button>\n\n    </div>\n  </ion-toolbar>\n</ion-footer>\n",
        providers: [CanvasManagerService],
        styles: [".div-canvas-container{height:100%;width:100%;-o-object-fit:contain;object-fit:contain;text-align:center;margin:0 auto;padding:0 auto}.scroll-content{padding:0!important;overflow-y:hidden}.div-edit-toolbar{text-align:center}.button-edit-toolbar{padding:4%!important;margin:0!important}.action-sheet-button{font-family:FontAwesome,Arial}.color-picker{position:absolute;width:100%;height:auto;bottom:0;left:0}#icon{color:#b32017}.col{padding:10px}"]
    }),
    __metadata("design:paramtypes", [ActionSheetController,
        CanvasManagerService,
        TranslateService])
], MobileSketchToolComponent);

let SketchToolModule = class SketchToolModule {
};
SketchToolModule = __decorate([
    NgModule({
        imports: [CommonModule, IonicModule],
        declarations: [
            MobileSketchToolComponent,
        ],
        providers: [
            CanvasManagerService,
        ],
        exports: [MobileSketchToolComponent]
    })
], SketchToolModule);

export { CanvasManagerService, MobileSketchToolComponent, SketchToolModule };
//# sourceMappingURL=lib-sketch-tool.js.map