lib-sketch-tool
Version:
973 lines (970 loc) • 49.7 kB
JavaScript
import { __values } from 'tslib';
import { Directive, Output, HostListener, EventEmitter, Injectable, Component, Input } from '@angular/core';
import { fabric } from 'fabric';
import { ActionSheetController } from 'ionic-angular';
var CanvasClickDirective = (function () {
function CanvasClickDirective() {
this.mouseUp = new EventEmitter();
this.mouseDown = new EventEmitter();
this.mouseMove = new EventEmitter();
}
CanvasClickDirective.prototype.onMouseUp = function (event) {
this.mouseUp.emit(event);
};
CanvasClickDirective.prototype.onMouseDown = function (event) {
this.mouseDown.emit(event);
};
CanvasClickDirective.prototype.onMouseMouve = function (event) {
this.mouseMove.emit(event);
};
return CanvasClickDirective;
}());
CanvasClickDirective.decorators = [
{ type: Directive, args: [{
selector: '[libCanvasClick]'
},] },
];
CanvasClickDirective.propDecorators = {
mouseUp: [{ type: Output }],
mouseDown: [{ type: Output }],
mouseMove: [{ type: Output }],
onMouseUp: [{ type: HostListener, args: ['mouseup', ['$event'],] }],
onMouseDown: [{ type: HostListener, args: ['mousedown', ['$event'],] }],
onMouseMouve: [{ type: HostListener, args: ['mousemove', ['$event'],] }]
};
var AvailableGeometricShape = {
"Rectangle": 0,
"Circle": 1,
"Triangle": 2,
"Line": 3,
"Cross": 4,
};
AvailableGeometricShape[AvailableGeometricShape["Rectangle"]] = "Rectangle";
AvailableGeometricShape[AvailableGeometricShape["Circle"]] = "Circle";
AvailableGeometricShape[AvailableGeometricShape["Triangle"]] = "Triangle";
AvailableGeometricShape[AvailableGeometricShape["Line"]] = "Line";
AvailableGeometricShape[AvailableGeometricShape["Cross"]] = "Cross";
var SHAPE_DATA = {
width: 50,
height: 50,
left: 50,
top: 50,
radius: 25,
stroke: 3,
freeDrawingBrushWidth: 10,
};
var CanvasManagerService = (function () {
function CanvasManagerService() {
this.emptyCanvas();
this.mouse = [0, 0];
this.pos = [0, 0];
}
Object.defineProperty(CanvasManagerService.prototype, "backgroundImage", {
get: function () {
return this.canvas;
},
enumerable: true,
configurable: true
});
CanvasManagerService.prototype.emptyCanvas = function () {
if (this.canvas) {
this.canvas.dispose();
}
this.canvas = new fabric.Canvas('canvas');
this.canvas.clear();
this.canvas.remove(this.canvas.getObjects());
};
CanvasManagerService.prototype.loadNewImage = function (backgroundImageURL) {
this.emptyCanvas();
if (backgroundImageURL) {
this.setBackgroundFromURL(backgroundImageURL);
}
};
CanvasManagerService.prototype.renderCanvas = function () {
this.markSelectedObjectsDirty();
this.canvas.renderAll();
};
CanvasManagerService.prototype.addGeometricShape = function (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;
}
};
CanvasManagerService.prototype.addRectangle = function (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
}));
};
CanvasManagerService.prototype.addCircle = function (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
}));
};
CanvasManagerService.prototype.addTriangle = function (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
}));
};
CanvasManagerService.prototype.addHorizontalLine = function (strokeColor, fillColor) {
this.canvas.add(this.createHorizontalLine(strokeColor));
};
CanvasManagerService.prototype.createHorizontalLine = function (strokeColor) {
var line = new fabric.Line([100, 150, 200, 150], {
left: 50,
top: 100,
stroke: strokeColor,
strokeWidth: 5
});
line.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false,
mt: false,
mb: false
});
return line;
};
CanvasManagerService.prototype.createVerticalLine = function (strokeColor) {
var line = new fabric.Line([150, 100, 150, 200], {
left: 100,
top: 50,
stroke: strokeColor,
strokeWidth: 5
});
line.setControlsVisibility({
bl: false,
br: false,
tl: false,
tr: false,
ml: false,
mr: false
});
return line;
};
CanvasManagerService.prototype.addCross = function (strokeColor, fillColor) {
var horizontalLine = this.createHorizontalLine(strokeColor);
var verticalLine = this.createVerticalLine(strokeColor);
this.canvas.add(horizontalLine);
this.canvas.add(verticalLine);
};
CanvasManagerService.prototype.toggleFreeDrawing = function () {
this.canvas.isDrawingMode = !this.canvas.isDrawingMode;
};
CanvasManagerService.prototype.setFreeDrawingBrushColor = function (color) {
this.canvas.freeDrawingBrush.color = color;
this.canvas.freeDrawingBrush.width = SHAPE_DATA.freeDrawingBrushWidth;
};
CanvasManagerService.prototype.addText = function (color, inputText) {
var text = new fabric.IText(inputText, {
fontFamily: 'arial black',
fontStyle: 'bold',
left: SHAPE_DATA.left,
top: SHAPE_DATA.top
});
text.setColor(color);
this.canvas.add(text);
this.selectLastObject();
};
CanvasManagerService.prototype.addImage = function (imageURL) {
var _this = this;
return new Promise(function (resolve, reject) {
var canvas = _this.canvas;
var image = new Image();
image.onload = function (img) {
var 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
});
canvas.add(fabricImage);
resolve();
};
image.src = imageURL;
});
};
CanvasManagerService.prototype.setBackgroundFromURL = function (backgroundImageURL) {
var canvas = this.canvas;
var resize = this.resizeCanvasAndComputeScaleFactor;
return new Promise(function (resolve, reject) {
if (backgroundImageURL == null) {
return reject();
}
var image = new Image();
image.onload = function () {
var f_img = new fabric.Image(image, {});
var scaleData = resize(f_img, canvas);
canvas.setBackgroundImage(f_img, canvas.renderAll.bind(canvas), {
scaleX: scaleData.scaleFactor,
scaleY: scaleData.scaleFactor
});
canvas.renderAll();
resolve();
};
image.src = backgroundImageURL;
});
};
CanvasManagerService.prototype.resizeCanvasAndComputeScaleFactor = function (f_img, canvas) {
var canvasWidth = canvas.getWidth();
var canvasHeight = canvas.getHeight();
var canvasAspect = canvasWidth / canvasHeight;
var imgAspect = f_img.width / f_img.height;
var left, top, scaleFactor;
if (canvasAspect <= imgAspect) {
scaleFactor = canvasWidth / f_img.width;
left = 0;
top = -(f_img.height * scaleFactor - canvasHeight) / 2;
}
else {
scaleFactor = canvasHeight / f_img.height;
top = 0;
left = -(f_img.width * scaleFactor - canvasWidth) / 2;
}
return { scaleFactor: scaleFactor, left: left, top: top };
};
CanvasManagerService.prototype.changeSelectedObjectsFillColor = function (color) {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_1 = __values(activeObjects), activeObjects_1_1 = activeObjects_1.next(); !activeObjects_1_1.done; activeObjects_1_1 = activeObjects_1.next()) {
var object = activeObjects_1_1.value;
object.setColor(color);
this.canvas.renderAll();
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (activeObjects_1_1 && !activeObjects_1_1.done && (_a = activeObjects_1.return)) _a.call(activeObjects_1);
}
finally { if (e_1) throw e_1.error; }
}
}
var e_1, _a;
};
CanvasManagerService.prototype.changeSelectedObjectsStrokeColor = function (color) {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_2 = __values(activeObjects), activeObjects_2_1 = activeObjects_2.next(); !activeObjects_2_1.done; activeObjects_2_1 = activeObjects_2.next()) {
var object = activeObjects_2_1.value;
if (object.type === 'i-text') {
object.setColor(color);
}
else {
object.stroke = color;
object.set('dirty', true);
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (activeObjects_2_1 && !activeObjects_2_1.done && (_a = activeObjects_2.return)) _a.call(activeObjects_2);
}
finally { if (e_2) throw e_2.error; }
}
this.canvas.renderAll();
}
var e_2, _a;
};
CanvasManagerService.prototype.deleteSelectedObjects = function () {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_3 = __values(activeObjects), activeObjects_3_1 = activeObjects_3.next(); !activeObjects_3_1.done; activeObjects_3_1 = activeObjects_3.next()) {
var object = activeObjects_3_1.value;
this.canvas.remove(object);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (activeObjects_3_1 && !activeObjects_3_1.done && (_a = activeObjects_3.return)) _a.call(activeObjects_3);
}
finally { if (e_3) throw e_3.error; }
}
this.canvas.discardActiveObject();
this.canvas.renderAll();
}
var e_3, _a;
};
CanvasManagerService.prototype.bringSelectedObjectsToFront = function () {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_4 = __values(activeObjects), activeObjects_4_1 = activeObjects_4.next(); !activeObjects_4_1.done; activeObjects_4_1 = activeObjects_4.next()) {
var object = activeObjects_4_1.value;
this.canvas.bringToFront(object);
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (activeObjects_4_1 && !activeObjects_4_1.done && (_a = activeObjects_4.return)) _a.call(activeObjects_4);
}
finally { if (e_4) throw e_4.error; }
}
}
var e_4, _a;
};
CanvasManagerService.prototype.sendSelectedObjectsToBack = function () {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_5 = __values(activeObjects), activeObjects_5_1 = activeObjects_5.next(); !activeObjects_5_1.done; activeObjects_5_1 = activeObjects_5.next()) {
var object = activeObjects_5_1.value;
this.canvas.sendToBack(object);
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (activeObjects_5_1 && !activeObjects_5_1.done && (_a = activeObjects_5.return)) _a.call(activeObjects_5);
}
finally { if (e_5) throw e_5.error; }
}
}
var e_5, _a;
};
CanvasManagerService.prototype.exportImageAsDataURL = function () {
return this.canvas.toDataURL('image/png');
};
Object.defineProperty(CanvasManagerService.prototype, "canvasObjects", {
get: function () {
return this.canvas.getObjects();
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasManagerService.prototype, "canvasBackgroundImage", {
get: function () {
return this.canvas.backgroundImage;
},
enumerable: true,
configurable: true
});
CanvasManagerService.prototype.selectItem = function (itemNumber) {
this.canvas.setActiveObject(this.canvas.item(itemNumber));
};
Object.defineProperty(CanvasManagerService.prototype, "activeObject", {
get: function () {
return this.canvas.getActiveObject();
},
enumerable: true,
configurable: true
});
CanvasManagerService.prototype.getIndexOf = function (activeObject) {
return this.canvas.getObjects().indexOf(activeObject);
};
CanvasManagerService.prototype.jsonFromCanvas = function () {
return this.canvas.toJSON();
};
CanvasManagerService.prototype.loadfromJson = function (json) {
var _this = this;
return new Promise(function (resolve, reject) {
_this.canvas.loadFromJSON(json, _this.canvas.renderAll.bind(_this.canvas));
resolve();
});
};
CanvasManagerService.prototype.selectLastObject = function () {
var itemNumber = this.canvas.getObjects().length - 1;
var object = this.canvas.item(itemNumber);
this.canvas.setActiveObject(object);
object.enterEditing();
};
CanvasManagerService.prototype.markSelectedObjectsDirty = function () {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
try {
for (var activeObjects_6 = __values(activeObjects), activeObjects_6_1 = activeObjects_6.next(); !activeObjects_6_1.done; activeObjects_6_1 = activeObjects_6.next()) {
var object = activeObjects_6_1.value;
object.set('dirty', true);
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (activeObjects_6_1 && !activeObjects_6_1.done && (_a = activeObjects_6.return)) _a.call(activeObjects_6);
}
finally { if (e_6) throw e_6.error; }
}
}
var e_6, _a;
};
CanvasManagerService.prototype.addSelectionRectangle = function () {
this.cropRectangle = new fabric.Rect({
fill: 'transparent',
originX: 'left',
originY: 'top',
stroke: '#ccc',
strokeDashArray: [2, 2],
opacity: 1,
width: 1,
height: 1
});
this.cropRectangle.visible = false;
this.canvas.add(this.cropRectangle);
};
CanvasManagerService.prototype.ajustCropRectanglFromMouse = function (event) {
var x = Math.min(event.layerX, this.mouse[0]), y = Math.min(event.layerY, this.mouse[1]), w = Math.abs(event.layerX - this.mouse[0]), h = Math.abs(event.layerY - this.mouse[1]);
if (!w || !h) {
return false;
}
this.cropRectangle
.set('top', y)
.set('left', x)
.set('width', w)
.set('height', h);
this.canvas.renderAll();
return true;
};
CanvasManagerService.prototype.startSelectingCropRectangleFromMouse = function (event) {
this.pos[0] = this.canvas.left;
this.pos[1] = this.canvas.top;
this.cropRectangle.left = event.layerX;
this.cropRectangle.top = event.layerY;
this.cropRectangle.setCoords();
this.mouse[0] = event.layerX;
this.mouse[1] = event.layerY;
this.canvas.renderAll();
this.cropRectangle.visible = true;
this.canvas.bringToFront(this.cropRectangle);
};
CanvasManagerService.prototype.cropImage = function () {
var left = this.cropRectangle.left;
var top = this.cropRectangle.top;
var width = this.cropRectangle.width;
var height = this.cropRectangle.height;
var container = document.getElementsByClassName('div-canvas-container')[0];
var canvasWidth = container.clientWidth;
var canvasHeight = container.clientHeight;
var canvasAspect = canvasWidth / canvasHeight;
var imgAspect = width / height;
var scaleFactor;
if (canvasAspect <= imgAspect) {
scaleFactor = canvasWidth / width;
}
else {
scaleFactor = canvasHeight / height;
}
this.canvas.setWidth(width * scaleFactor);
this.canvas.setHeight(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.canvas.selectable = true;
this.canvas.selection = true;
this.cropRectangle.visible = false;
this.canvas.remove(this.cropRectangle);
this.canvas.renderAll();
};
CanvasManagerService.prototype.ajustCropRectangle = function (event) {
var touch = event.touches[0];
var rect = event.target.getBoundingClientRect();
var x = Math.min(touch.clientX - rect.left, this.mouse[0]), y = Math.min(touch.clientY - rect.top, this.mouse[1]), w = Math.abs(touch.clientX - rect.left - this.mouse[0]), h = Math.abs(touch.clientY - rect.top - this.mouse[1]);
if (!w || !h) {
return false;
}
this.cropRectangle
.set('top', y)
.set('left', x)
.set('width', w)
.set('height', h);
this.canvas.renderAll();
return true;
};
CanvasManagerService.prototype.startSelectingCropRectangle = function (event) {
this.pos[0] = this.canvas.left;
this.pos[1] = this.canvas.top;
var touch = event.touches[0];
var rect = event.target.getBoundingClientRect();
this.cropRectangle.left = touch.clientX - rect.left;
this.cropRectangle.top = touch.clientY - rect.top;
this.cropRectangle.setCoords();
this.mouse[0] = touch.clientX - rect.left;
this.mouse[1] = touch.clientY - rect.top;
this.canvas.renderAll();
this.cropRectangle.visible = true;
this.canvas.bringToFront(this.cropRectangle);
};
CanvasManagerService.prototype.disableSelection = function () {
this.canvas.selection = false;
};
CanvasManagerService.prototype.moveAllObjectsInCanvas = function (x, y, scaleFactor) {
var objects = this.canvas.getObjects();
try {
for (var objects_1 = __values(objects), objects_1_1 = objects_1.next(); !objects_1_1.done; objects_1_1 = objects_1.next()) {
var obj = objects_1_1.value;
obj.left += x;
obj.left *= scaleFactor;
obj.scaleX *= scaleFactor;
obj.top += y;
obj.scaleY *= scaleFactor;
obj.top *= scaleFactor;
obj.setCoords();
}
}
catch (e_7_1) { e_7 = { error: e_7_1 }; }
finally {
try {
if (objects_1_1 && !objects_1_1.done && (_a = objects_1.return)) _a.call(objects_1);
}
finally { if (e_7) throw e_7.error; }
}
var e_7, _a;
};
CanvasManagerService.prototype.groupSelectedObjects = function () {
var activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
var objects = [];
try {
for (var activeObjects_7 = __values(activeObjects), activeObjects_7_1 = activeObjects_7.next(); !activeObjects_7_1.done; activeObjects_7_1 = activeObjects_7.next()) {
var object = activeObjects_7_1.value;
objects.push(object);
}
}
catch (e_8_1) { e_8 = { error: e_8_1 }; }
finally {
try {
if (activeObjects_7_1 && !activeObjects_7_1.done && (_a = activeObjects_7.return)) _a.call(activeObjects_7);
}
finally { if (e_8) throw e_8.error; }
}
this.deleteSelectedObjects();
var group = new fabric.Group(objects);
this.canvas.add(group);
group.setCoords();
this.canvas.setActiveObject(group);
this.canvas.renderAll();
}
var e_8, _a;
};
return CanvasManagerService;
}());
CanvasManagerService.decorators = [
{ type: Injectable },
];
CanvasManagerService.ctorParameters = function () { return []; };
var Black = '#000000';
var Transparent = '#FF000000';
var MobileSketchToolComponent = (function () {
function MobileSketchToolComponent(actionSheetCtrl, canvasManagerService) {
this.actionSheetCtrl = actionSheetCtrl;
this.canvasManagerService = canvasManagerService;
this.json = new EventEmitter();
this.strokeColor = Black;
this.fillColor = Transparent;
this.isCropping = false;
this.isLoaded = false;
this.isUndoAvailable = false;
this.isSelectingColor = false;
}
MobileSketchToolComponent.prototype.ngOnInit = function () {
this.canvasManagerService.emptyCanvas();
if (this.loadedJson == null) {
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;
};
MobileSketchToolComponent.prototype.ngOnChanges = function () {
if (this.isLoaded && this.previousImageData !== this.imageData) {
this.canvasManagerService.emptyCanvas();
this.canvasManagerService.setBackgroundFromURL(this.imageData);
this.computeJson();
this.previousImageData = this.imageData;
}
};
Object.defineProperty(MobileSketchToolComponent.prototype, "hasPictograms", {
get: function () {
return !this.icons;
},
enumerable: true,
configurable: true
});
MobileSketchToolComponent.prototype.addText = function () {
this.canvasManagerService.addText(this.strokeColor, ' ');
this.computeJson();
};
MobileSketchToolComponent.prototype.addShape = function (shape) {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
this.computeJson();
};
MobileSketchToolComponent.prototype.addImage = function (source) {
this.canvasManagerService.addImage(this.iconsPath + source);
this.computeJson();
};
MobileSketchToolComponent.prototype.changeStrokeColor = function () {
this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
this.computeJson();
};
MobileSketchToolComponent.prototype.bringFoward = function () {
this.canvasManagerService.bringSelectedObjectsToFront();
};
MobileSketchToolComponent.prototype.sendToBack = function () {
this.canvasManagerService.sendSelectedObjectsToBack();
};
MobileSketchToolComponent.prototype.saveImage = function () {
var dataURL = this.canvasManagerService.exportImageAsDataURL();
var link = document.createElement('a');
link.download = 'image';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
MobileSketchToolComponent.prototype.crop = function () {
this.isCropping = true;
this.canvasManagerService.disableSelection();
this.canvasManagerService.addSelectionRectangle();
this.computeJson();
this.isUndoAvailable = true;
};
MobileSketchToolComponent.prototype.deleteSelection = function () {
this.canvasManagerService.deleteSelectedObjects();
this.computeJson();
};
MobileSketchToolComponent.prototype.mouseUp = function (event) {
if (this.isCropping) {
this.isCropping = false;
this.canvasManagerService.cropImage();
}
this.computeJson();
};
MobileSketchToolComponent.prototype.mouseMove = function (event) {
if (this.isCropping) {
this.canvasManagerService.ajustCropRectangle(event);
}
};
MobileSketchToolComponent.prototype.mouseDown = function (event) {
if (this.isCropping) {
this.canvasManagerService.startSelectingCropRectangle(event);
}
};
MobileSketchToolComponent.prototype.group = function () {
this.canvasManagerService.groupSelectedObjects();
};
MobileSketchToolComponent.prototype.undo = function () {
var _this = this;
this.canvasManagerService.loadfromJson(this.previousJson).then(function () {
_this.computeJson();
});
};
MobileSketchToolComponent.prototype.computeJson = function () {
this.previousJson = this.currentJson;
this.currentJson = this.canvasManagerService.jsonFromCanvas();
this.json.emit(JSON.stringify(this.currentJson));
this.isUndoAvailable = false;
};
MobileSketchToolComponent.prototype.presentShapeActionSheet = function () {
var _this = this;
var actionSheet = this.actionSheetCtrl.create({
title: 'Ajouter une forme',
buttons: [
{
text: '\uf0c8 Rectangle',
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Rectangle);
}
},
{
text: '\uf0d8 Triangle',
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Triangle);
}
},
{
text: '\uf111 Cercle',
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Circle);
}
},
{
text: '\uf068 Ligne',
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Line);
}
},
{
text: '\uf067 Croix',
handler: function () {
_this.canvasManagerService.addGeometricShape(_this.strokeColor, _this.fillColor, AvailableGeometricShape.Cross);
}
},
{
text: '\uf031 Texte',
handler: function () {
_this.canvasManagerService.addText(_this.strokeColor, '');
}
}
]
});
actionSheet.present();
};
MobileSketchToolComponent.prototype.presentEditActionSheet = function () {
var _this = this;
var actionSheet = this.actionSheetCtrl.create({
title: 'Édition',
buttons: [
{
text: '\uf125 \u0020 Rogner',
handler: function () {
_this.crop();
}
},
{
text: '\uf247 Grouper',
handler: function () {
_this.group();
}
},
{
text: '\uf0de Avancer',
handler: function () {
_this.bringFoward();
}
},
{
text: '\uf0dd Reculer',
handler: function () {
_this.sendToBack();
}
},
{
text: '\uf1f8 Supprimer',
handler: function () {
_this.deleteSelection();
}
}
]
});
actionSheet.present();
};
MobileSketchToolComponent.prototype.presentPictogramsActionSheet = function () {
var _this = this;
var buttons = [];
var actionSheetStyles = [];
var images = this.icons;
var _loop_1 = function (i) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
'.customCSSClass' +
i +
'{background: url(' +
"'" +
this_1.iconsPath +
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: function () {
_this.addImage(images[i]);
}
});
};
var this_1 = this;
for (var i = 0; i < images.length; i++) {
_loop_1(i);
}
var actionSheet = this.actionSheetCtrl.create({
title: 'Ajouter un pictogramme',
buttons: buttons
});
actionSheet.onDidDismiss(function () {
for (var i = 0; i < actionSheetStyles.length; i++) {
if (actionSheetStyles[i].parentNode != null)
actionSheetStyles[i].parentNode.removeChild(actionSheetStyles[i]);
}
});
actionSheet.present();
};
MobileSketchToolComponent.prototype.onColorClicked = function () {
this.isSelectingColor = true;
};
MobileSketchToolComponent.prototype.setColor = function (color) {
this.strokeColor = color;
this.changeStrokeColor();
this.isSelectingColor = false;
};
return MobileSketchToolComponent;
}());
MobileSketchToolComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-mobile-sketch-tool',
template: "<div\n class=\"div-canvas-container\"\n (touchstart)=\"mouseDown($event)\"\n (touchmove)=\"mouseMove($event)\"\n (touchend)=\"mouseUp($event)\"\n (mousedown)=\"mouseDown($event)\"\n (mousemove)=\"mouseMove($event)\"\n (mouseup)=\"mouseUp($event)\"\n>\n <canvas id=\"canvas\" width=\"680\" height=\"680\"></canvas>\n\n\n <div class=\"color-picker\" *ngIf=\"isSelectingColor\">\n <ion-grid>\n <ion-row></ion-row>\n <ion-row></ion-row>\n <ion-row>\n <ion-col style=\"background:#660000\" (tap)=\"setColor('#660000')\"> </ion-col>\n <ion-col style=\"background:#663300\" (tap)=\"setColor('#663300')\"> </ion-col>\n <ion-col style=\"background:#666600\" (tap)=\"setColor('#666600')\"> </ion-col>\n <ion-col style=\"background:#006600\" (tap)=\"setColor('#006600')\"> </ion-col>\n <ion-col style=\"background:#000066\" (tap)=\"setColor('#000066')\"> </ion-col>\n <ion-col style=\"background:#660066\" (tap)=\"setColor('#660066')\"> </ion-col>\n <ion-col style=\"background:#000000\" (tap)=\"setColor('#000000')\"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style=\"background:#CC0000\" (tap)=\"setColor('#CC0000')\"> </ion-col>\n <ion-col style=\"background:#CC6600\" (tap)=\"setColor('#CC6600')\"> </ion-col>\n <ion-col style=\"background:#CCCC00\" (tap)=\"setColor('#CCCC00')\"> </ion-col>\n <ion-col style=\"background:#00CC00\" (tap)=\"setColor('#00CC00')\"> </ion-col>\n <ion-col style=\"background:#0000CC\" (tap)=\"setColor('#0000CC')\"> </ion-col>\n <ion-col style=\"background:#CC00CC\" (tap)=\"setColor('#CC00CC')\"> </ion-col>\n <ion-col style=\"background:#606060\" (tap)=\"setColor('#606060')\"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style=\"background:#FF0000\" (tap)=\"setColor('#FF0000')\"> </ion-col>\n <ion-col style=\"background:#FF8000\" (tap)=\"setColor('#FF8000')\"> </ion-col>\n <ion-col style=\"background:#FFFF00\" (tap)=\"setColor('#FFFF00')\"> </ion-col>\n <ion-col style=\"background:#00FF00\" (tap)=\"setColor('#00FF00')\"> </ion-col>\n <ion-col style=\"background:#0000FF\" (tap)=\"setColor('#0000FF')\"> </ion-col>\n <ion-col style=\"background:#FF00FF\" (tap)=\"setColor('#FF00FF')\"> </ion-col>\n <ion-col style=\"background:#808080\" (tap)=\"setColor('#808080')\"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style=\"background:#FF6666\" (tap)=\"setColor('#FF6666')\"> </ion-col>\n <ion-col style=\"background:#FFB266\" (tap)=\"setColor('#FFB266')\"> </ion-col>\n <ion-col style=\"background:#FFFF66\" (tap)=\"setColor('#FFFF66')\"> </ion-col>\n <ion-col style=\"background:#66FF66\" (tap)=\"setColor('#66FF66')\"> </ion-col>\n <ion-col style=\"background:#6666FF\" (tap)=\"setColor('#6666FF')\"> </ion-col>\n <ion-col style=\"background:#FF66FF\" (tap)=\"setColor('#FF66FF')\"> </ion-col>\n <ion-col style=\"background:#C0C0C0\" (tap)=\"setColor('#C0C0C0')\"> </ion-col>\n </ion-row>\n <ion-row>\n <ion-col style=\"background:#FF9999\" (tap)=\"setColor('#FF9999')\"> </ion-col>\n <ion-col style=\"background:#FFCC99\" (tap)=\"setColor('#FFCC99')\"> </ion-col>\n <ion-col style=\"background:#FFFF99\" (tap)=\"setColor('#FFFF99')\"> </ion-col>\n <ion-col style=\"background:#99FF99\" (tap)=\"setColor('#99FF99')\"> </ion-col>\n <ion-col style=\"background:#9999FF\" (tap)=\"setColor('#9999FF')\"> </ion-col>\n <ion-col style=\"background:#FF99FF\" (tap)=\"setColor('#FF99FF')\"> </ion-col>\n <ion-col style=\"background:#FFFFFF\" (tap)=\"setColor('#FFFFFF')\"> </ion-col>\n </ion-row>\n </ion-grid>\n </div>\n</div>\n\n<ion-toolbar>\n <div class=\"div-edit-toolbar\">\n <button\n ion-button\n large\n [clear]=\"true\"\n (click)=\"presentShapeActionSheet()\"\n >\n <i\n class=\"fa fa-square\"\n id=\"icon\"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]=\"true\"\n (click)=\"presentPictogramsActionSheet()\"\n >\n <i\n class=\"fa fa-image\"\n id=\"icon\"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]=\"true\"\n (click)=\"presentEditActionSheet()\"\n >\n <i\n class=\"fa fa-edit\"\n id=\"icon\"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]=\"true\"\n (click)=\"onColorClicked()\"\n >\n <i\n class=\"fa fa-paint-brush\"\n id=\"icon\"\n ></i>\n </button>\n\n <button\n ion-button\n large\n [clear]=\"true\"\n (click)=\"undo()\"\n *ngIf=\"isUndoAvailable\"\n >\n <i\n class=\"fa fa-undo\"\n id=\"icon\"\n ></i>\n </button>\n\n </div>\n\n</ion-toolbar>\n",
styles: [".div-canvas-container{width:100%!important;height:80%!important;margin:0 auto;text-align:center}canvas{padding:0;margin:auto;display:block;display:-webkit-box;display:-ms-flexbox;display:flex}.edit-bar{position:absolute;width:100%}.div-edit-toolbar{-ms-flex-line-pack:center!important;align-content:center!important;text-align:center;vertical-align:center}.action-sheet-button{font-family:FontAwesome,Arial!important;text-align:left,right!important}.color-picker{width:100%;height:40%;bottom:0;left:0;position:absolute}#icon{color:#b32017}"],
providers: [CanvasManagerService]
},] },
];
MobileSketchToolComponent.ctorParameters = function () { return [
{ type: ActionSheetController },
{ type: CanvasManagerService }
]; };
MobileSketchToolComponent.propDecorators = {
imageData: [{ type: Input }],
loadedJson: [{ type: Input }],
iconsPath: [{ type: Input }],
icons: [{ type: Input }],
json: [{ type: Output }]
};
var KEY_CODE = {
DELETE: 46,
BACKSPACE: 8,
};
KEY_CODE[KEY_CODE.DELETE] = "DELETE";
KEY_CODE[KEY_CODE.BACKSPACE] = "BACKSPACE";
var Black$1 = '#000000';
var WebSketchToolComponent = (function () {
function WebSketchToolComponent(canvasManagerService) {
this.canvasManagerService = canvasManagerService;
this.availableGeometricShapes = AvailableGeometricShape;
this.strokeColor = Black$1;
this.isDrawing = false;
this.isCropping = false;
this.isLastImage = false;
}
WebSketchToolComponent.prototype.ngOnInit = function () {
this.canvasManagerService.emptyCanvas();
this.canvasManagerService.setBackgroundFromURL(this.imgUrl);
this.isDrawing = false;
};
WebSketchToolComponent.prototype.addText = function () {
this.canvasManagerService.addText(this.strokeColor, ' ');
};
WebSketchToolComponent.prototype.addShape = function (shape) {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
};
WebSketchToolComponent.prototype.addImage = function (source) {
if (!this.isDrawing) {
}
};
WebSketchToolComponent.prototype.changeFillColor = function () {
this.canvasManagerService.changeSelectedObjectsFillColor(this.fillColor);
};
WebSketchToolComponent.prototype.changeStrokeColor = function () {
this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
};
WebSketchToolComponent.prototype.bringFoward = function () {
this.canvasManagerService.bringSelectedObjectsToFront();
};
WebSketchToolComponent.prototype.sendToBack = function () {
this.canvasManagerService.sendSelectedObjectsToBack();
};
WebSketchToolComponent.prototype.draw = function () {
this.isDrawing = !this.isDrawing;
this.canvasManagerService.toggleFreeDrawing();
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
};
WebSketchToolComponent.prototype.saveImage = function () {
var dataURL = this.canvasManagerService.exportImageAsDataURL();
var link = document.createElement('a');
link.download = 'image';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
WebSketchToolComponent.prototype.crop = function () {
this.isCropping = true;
this.canvasManagerService.disableSelection();
this.canvasManagerService.addSelectionRectangle();
};
WebSketchToolComponent.prototype.keyEvent = function (event) {
if (event.keyCode === KEY_CODE.DELETE) {
this.deleteSelection();
}
};
WebSketchToolComponent.prototype.deleteSelection = function () {
this.canvasManagerService.deleteSelectedObjects();
};
WebSketchToolComponent.prototype.mouseUp = function (event) {
if (this.isCropping) {
this.canvasManagerService.cropImage();
this.isCropping = false;
}
};
WebSketchToolComponent.prototype.mouseMove = function (event) {
if (this.isCropping) {
this.canvasManagerService.ajustCropRectangle(event);
}
};
WebSketchToolComponent.prototype.mouseDown = function (event) {
if (this.isCropping) {
this.canvasManagerService.startSelectingCropRectangle(event);
}
};
WebSketchToolComponent.prototype.group = function () {
this.canvasManagerService.groupSelectedObjects();
};
return WebSketchToolComponent;
}());
WebSketchToolComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-web-sketch-tool',
template: "<head>\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\">\n</head>\n\n<div class=\"row\">\n <div class=\"column\">\n <form>\n <button\n color=\"accent\"\n (click)=\"crop()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-crop\"></i>\n </button>\n\n <button\n (click)=\"addShape('Rectangle')\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-square\"></i>\n </button>\n\n <button\n (click)=\"addShape('Circle')\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-circle\"></i>\n </button>\n\n <button\n (click)=\"addShape('Line')\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-minus\"></i>\n </button>\n\n <button\n (click)=\"addText()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-font\"></i>\n </button>\n\n <button\n color=\"accent\"\n (click)=\"bringFoward()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-angle-up\"></i>\n </button>\n\n <div class=\"separator\"></div>\n\n <button (click)=\"saveImage()\">\n <i class=\"fa fa-download\"></i>\n </button>\n\n </form>\n </div>\n\n <div class=\"column\">\n <form>\n <button (click)=\"draw()\">\n <i class=\"fa fa-pencil\"></i>\n </button>\n\n <button\n (click)=\"addShape('Triangle')\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-caret-up\"></i>\n </button>\n\n <button\n (click)=\"group()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-object-group\"></i>\n </button>\n\n <button\n (click)=\"addShape('Cross')\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-plus\"></i>\n </button>\n\n <button\n (click)=\"deleteSelection()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-trash\"></i>\n </button>\n\n <button\n color=\"accent\"\n (click)=\"sendToBack()\"\n [disabled]=\"isDrawing\"\n >\n <i class=\"fa fa-angle-down\"></i>\n </button>\n\n\n <div class=\"separator\"></div>\n\n </form>\n </div>\n\n <div\n class=\"column\"\n appCanvasDirective\n (mouseDown)=\"mouseDown($event)\"\n (mouseMove)=\"mouseMove($event)\"\n (mouseUp)=\"mouseUp($event)\"\n >\n <canvas id=\"canvas\"></canvas>\n </div>\n</div>\n",
styles: [".toolbar-button{font-family:FontAwesome;display:inline-block;width:2em;min-width:0}.column{float:left;width:auto;padding-top:.5em;padding-left:.5em}.row:after{content:\"\";display:table;clear:both}form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}form button{width:40px;height:40px;margin:8px auto 0}ul{padding:0;margin:0}li{list-style-type:none;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;text-decoration:none;float:left;padding:1px}img{width:40px;height:40px;padding:1px;border:1px solid #ddd;border-radius:4px}.separator{padding:10px}i{font-size:1.5em}"],
providers: [CanvasManagerService]
},] },
];
WebSketchToolComponent.ctorParameters = function () { return [
{ type: CanvasManagerService }
]; };
WebSketchToolComponent.propDecorators = {
imgUrl: [{ type: Input }],
keyEvent: [{ type: HostListener, args: ['window:keyup', ['$event'],] }]
};
export { CanvasClickDirective as ɵa, MobileSketchToolComponent as ɵd, CanvasManagerService as ɵc, WebSketchToolComponent as ɵb };
//# sourceMappingURL=lib-sketch-tool.js.map