lib-sketch-tool
Version:
1,474 lines (1,436 loc) • 45.8 kB
JavaScript
import { Directive, Output, HostListener, EventEmitter, Injectable, Component, Input } from '@angular/core';
import { fabric } from 'fabric';
import { ActionSheetController } from 'ionic-angular';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class CanvasClickDirective {
constructor() {
this.mouseUp = new EventEmitter();
this.mouseDown = new EventEmitter();
this.mouseMove = new EventEmitter();
}
/**
* @param {?} event
* @return {?}
*/
onMouseUp(event) {
this.mouseUp.emit(event);
}
/**
* @param {?} event
* @return {?}
*/
onMouseDown(event) {
this.mouseDown.emit(event);
}
/**
* @param {?} event
* @return {?}
*/
onMouseMouve(event) {
this.mouseMove.emit(event);
}
}
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'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
const 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";
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const SHAPE_DATA = {
width: 50,
height: 50,
left: 50,
top: 50,
radius: 25,
stroke: 3,
freeDrawingBrushWidth: 10,
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class CanvasManagerService {
constructor() {
this.emptyCanvas();
this.mouse = [0, 0];
this.pos = [0, 0];
}
/**
* @return {?}
*/
get backgroundImage() {
return this.canvas;
}
/**
* @return {?}
*/
emptyCanvas() {
if (this.canvas) {
this.canvas.dispose();
}
this.canvas = new fabric.Canvas('canvas');
this.canvas.clear();
this.canvas.remove(this.canvas.getObjects());
}
/**
* @param {?=} backgroundImageURL
* @return {?}
*/
loadNewImage(backgroundImageURL) {
this.emptyCanvas();
if (backgroundImageURL) {
this.setBackgroundFromURL(backgroundImageURL);
}
}
/**
* @return {?}
*/
renderCanvas() {
this.markSelectedObjectsDirty();
this.canvas.renderAll();
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @param {?} shape
* @return {?}
*/
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;
}
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @return {?}
*/
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
}));
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @return {?}
*/
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
}));
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @return {?}
*/
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
}));
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @return {?}
*/
addHorizontalLine(strokeColor, fillColor) {
this.canvas.add(this.createHorizontalLine(strokeColor));
}
/**
* @param {?} strokeColor
* @return {?}
*/
createHorizontalLine(strokeColor) {
const /** @type {?} */ 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;
}
/**
* @param {?} strokeColor
* @return {?}
*/
createVerticalLine(strokeColor) {
const /** @type {?} */ 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;
}
/**
* @param {?} strokeColor
* @param {?} fillColor
* @return {?}
*/
addCross(strokeColor, fillColor) {
const /** @type {?} */ horizontalLine = this.createHorizontalLine(strokeColor);
const /** @type {?} */ verticalLine = this.createVerticalLine(strokeColor);
this.canvas.add(horizontalLine);
this.canvas.add(verticalLine);
}
/**
* @return {?}
*/
toggleFreeDrawing() {
this.canvas.isDrawingMode = !this.canvas.isDrawingMode;
}
/**
* @param {?} color
* @return {?}
*/
setFreeDrawingBrushColor(color) {
this.canvas.freeDrawingBrush.color = color;
this.canvas.freeDrawingBrush.width = SHAPE_DATA.freeDrawingBrushWidth;
}
/**
* @param {?} color
* @param {?} inputText
* @return {?}
*/
addText(color, inputText) {
const /** @type {?} */ 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();
}
/**
* @param {?} imageURL
* @return {?}
*/
addImage(imageURL) {
return new Promise((resolve, reject) => {
const /** @type {?} */ canvas = this.canvas;
const /** @type {?} */ image = new Image();
image.onload = function (img) {
const /** @type {?} */ 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;
});
}
/**
* @param {?} backgroundImageURL
* @return {?}
*/
setBackgroundFromURL(backgroundImageURL) {
const /** @type {?} */ canvas = this.canvas;
const /** @type {?} */ resize = this.resizeCanvasAndComputeScaleFactor;
return new Promise((resolve, reject) => {
if (backgroundImageURL == null) {
return reject();
}
const /** @type {?} */ image = new Image();
image.onload = function () {
const /** @type {?} */ f_img = new fabric.Image(image, {});
const /** @type {?} */ scaleData = resize(f_img, canvas);
/* f_img.scaleX = scaleData.scaleFactor;
f_img.scaleY = scaleData.scaleFactor; */
canvas.setBackgroundImage(f_img, canvas.renderAll.bind(canvas), {
scaleX: scaleData.scaleFactor,
scaleY: scaleData.scaleFactor
});
/* canvas.setWidth(f_img.width * scaleData.scaleFactor);
canvas.setHeight(f_img.height * scaleData.scaleFactor); */
canvas.renderAll();
resolve();
};
image.src = backgroundImageURL;
});
}
/**
* @param {?} f_img
* @param {?} canvas
* @return {?}
*/
resizeCanvasAndComputeScaleFactor(f_img, canvas) {
/* const container = document.getElementsByClassName(
'div-canvas-container'
)[0];
canvas.setWidth(container.clientWidth);
canvas.setHeight(container.clientHeight); */
const /** @type {?} */ canvasWidth = canvas.getWidth();
const /** @type {?} */ canvasHeight = canvas.getHeight();
const /** @type {?} */ canvasAspect = canvasWidth / canvasHeight;
const /** @type {?} */ imgAspect = f_img.width / f_img.height;
let /** @type {?} */ left, /** @type {?} */ top, /** @type {?} */ 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 };
}
/**
* @param {?} color
* @return {?}
*/
changeSelectedObjectsFillColor(color) {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
object.setColor(color);
this.canvas.renderAll();
}
}
}
/**
* @param {?} color
* @return {?}
*/
changeSelectedObjectsStrokeColor(color) {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
if (object.type === 'i-text') {
object.setColor(color);
}
else {
object.stroke = color;
object.set('dirty', true);
}
}
this.canvas.renderAll();
}
}
/**
* @return {?}
*/
deleteSelectedObjects() {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
this.canvas.remove(object);
}
this.canvas.discardActiveObject();
this.canvas.renderAll();
}
}
/**
* @return {?}
*/
bringSelectedObjectsToFront() {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
this.canvas.bringToFront(object);
}
}
}
/**
* @return {?}
*/
sendSelectedObjectsToBack() {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
this.canvas.sendToBack(object);
}
}
}
/**
* @return {?}
*/
exportImageAsDataURL() {
return this.canvas.toDataURL('image/png');
}
/**
* @return {?}
*/
get canvasObjects() {
return this.canvas.getObjects();
}
/**
* @return {?}
*/
get canvasBackgroundImage() {
return this.canvas.backgroundImage;
}
/**
* @param {?} itemNumber
* @return {?}
*/
selectItem(itemNumber) {
this.canvas.setActiveObject(this.canvas.item(itemNumber));
}
/**
* @return {?}
*/
get activeObject() {
return this.canvas.getActiveObject();
}
/**
* @param {?} activeObject
* @return {?}
*/
getIndexOf(activeObject) {
return this.canvas.getObjects().indexOf(activeObject);
}
/**
* @return {?}
*/
jsonFromCanvas() {
return this.canvas.toJSON();
}
/**
* @param {?} json
* @return {?}
*/
loadfromJson(json) {
return new Promise((resolve, reject) => {
this.canvas.loadFromJSON(json, this.canvas.renderAll.bind(this.canvas));
resolve();
});
}
/**
* @return {?}
*/
selectLastObject() {
const /** @type {?} */ itemNumber = this.canvas.getObjects().length - 1;
const /** @type {?} */ object = this.canvas.item(itemNumber);
this.canvas.setActiveObject(object);
object.enterEditing();
}
/**
* @return {?}
*/
markSelectedObjectsDirty() {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
for (const /** @type {?} */ object of activeObjects) {
object.set('dirty', true);
}
}
}
/**
* @return {?}
*/
addSelectionRectangle() {
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);
}
/**
* @param {?} event
* @return {?}
*/
ajustCropRectanglFromMouse(event) {
const /** @type {?} */ x = Math.min(event.layerX, this.mouse[0]), /** @type {?} */
y = Math.min(event.layerY, this.mouse[1]), /** @type {?} */
w = Math.abs(event.layerX - this.mouse[0]), /** @type {?} */
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;
}
/**
* @param {?} event
* @return {?}
*/
startSelectingCropRectangleFromMouse(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);
}
/**
* @return {?}
*/
cropImage() {
const /** @type {?} */ left = this.cropRectangle.left;
const /** @type {?} */ top = this.cropRectangle.top;
const /** @type {?} */ width = this.cropRectangle.width;
const /** @type {?} */ height = this.cropRectangle.height;
const /** @type {?} */ container = document.getElementsByClassName('div-canvas-container')[0];
const /** @type {?} */ canvasWidth = container.clientWidth;
const /** @type {?} */ canvasHeight = container.clientHeight;
const /** @type {?} */ canvasAspect = canvasWidth / canvasHeight;
const /** @type {?} */ imgAspect = width / height;
let /** @type {?} */ 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();
}
/**
* @param {?} event
* @return {?}
*/
ajustCropRectangle(event) {
const /** @type {?} */ touch = event.touches[0];
const /** @type {?} */ rect = event.target.getBoundingClientRect();
const /** @type {?} */ x = Math.min(touch.clientX - rect.left, this.mouse[0]), /** @type {?} */
y = Math.min(touch.clientY - rect.top, this.mouse[1]), /** @type {?} */
w = Math.abs(touch.clientX - rect.left - this.mouse[0]), /** @type {?} */
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;
}
/**
* @param {?} event
* @return {?}
*/
startSelectingCropRectangle(event) {
this.pos[0] = this.canvas.left;
this.pos[1] = this.canvas.top;
const /** @type {?} */ touch = event.touches[0];
const /** @type {?} */ 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);
}
/**
* @return {?}
*/
disableSelection() {
this.canvas.selection = false;
}
/**
* @param {?} x
* @param {?} y
* @param {?} scaleFactor
* @return {?}
*/
moveAllObjectsInCanvas(x, y, scaleFactor) {
const /** @type {?} */ objects = this.canvas.getObjects();
for (const /** @type {?} */ obj of objects) {
obj.left += x;
obj.left *= scaleFactor;
obj.scaleX *= scaleFactor;
obj.top += y;
obj.scaleY *= scaleFactor;
obj.top *= scaleFactor;
obj.setCoords();
}
}
/**
* @return {?}
*/
groupSelectedObjects() {
const /** @type {?} */ activeObjects = this.canvas.getActiveObjects();
if (activeObjects) {
const /** @type {?} */ objects = [];
for (const /** @type {?} */ object of activeObjects) {
objects.push(object);
}
this.deleteSelectedObjects();
const /** @type {?} */ group = new fabric.Group(objects);
this.canvas.add(group);
group.setCoords();
this.canvas.setActiveObject(group);
this.canvas.renderAll();
}
}
}
CanvasManagerService.decorators = [
{ type: Injectable },
];
/** @nocollapse */
CanvasManagerService.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const Black = '#000000';
const Transparent = '#FF000000';
class MobileSketchToolComponent {
/**
* @param {?} actionSheetCtrl
* @param {?} canvasManagerService
*/
constructor(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;
}
/**
* @return {?}
*/
ngOnInit() {
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;
}
/**
* @return {?}
*/
ngOnChanges() {
if (this.isLoaded && this.previousImageData !== this.imageData) {
this.canvasManagerService.emptyCanvas();
this.canvasManagerService.setBackgroundFromURL(this.imageData);
this.computeJson();
this.previousImageData = this.imageData;
}
}
/**
* @return {?}
*/
get hasPictograms() {
return !this.icons;
}
/**
* @return {?}
*/
addText() {
this.canvasManagerService.addText(this.strokeColor, ' ');
this.computeJson();
}
/**
* @param {?} shape
* @return {?}
*/
addShape(shape) {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
this.computeJson();
}
/**
* @param {?} source
* @return {?}
*/
addImage(source) {
this.canvasManagerService.addImage(this.iconsPath + source);
this.computeJson();
}
/**
* @return {?}
*/
changeStrokeColor() {
this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
this.computeJson();
}
/**
* @return {?}
*/
bringFoward() {
this.canvasManagerService.bringSelectedObjectsToFront();
}
/**
* @return {?}
*/
sendToBack() {
this.canvasManagerService.sendSelectedObjectsToBack();
}
/**
* @return {?}
*/
saveImage() {
const /** @type {?} */ dataURL = this.canvasManagerService.exportImageAsDataURL();
const /** @type {?} */ link = document.createElement('a');
link.download = 'image';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* @return {?}
*/
crop() {
this.isCropping = true;
this.canvasManagerService.disableSelection();
this.canvasManagerService.addSelectionRectangle();
this.computeJson();
this.isUndoAvailable = true;
}
/**
* @return {?}
*/
deleteSelection() {
this.canvasManagerService.deleteSelectedObjects();
this.computeJson();
}
/**
* @param {?} event
* @return {?}
*/
mouseUp(event) {
if (this.isCropping) {
this.isCropping = false;
this.canvasManagerService.cropImage();
}
this.computeJson();
}
/**
* @param {?} event
* @return {?}
*/
mouseMove(event) {
if (this.isCropping) {
this.canvasManagerService.ajustCropRectangle(event);
}
}
/**
* @param {?} event
* @return {?}
*/
mouseDown(event) {
if (this.isCropping) {
this.canvasManagerService.startSelectingCropRectangle(event);
}
}
/**
* @return {?}
*/
group() {
this.canvasManagerService.groupSelectedObjects();
}
/**
* @return {?}
*/
undo() {
this.canvasManagerService.loadfromJson(this.previousJson).then(() => {
this.computeJson();
});
}
/**
* @return {?}
*/
computeJson() {
this.previousJson = this.currentJson;
this.currentJson = this.canvasManagerService.jsonFromCanvas();
this.json.emit(JSON.stringify(this.currentJson));
this.isUndoAvailable = false;
}
/**
* @return {?}
*/
presentShapeActionSheet() {
const /** @type {?} */ actionSheet = this.actionSheetCtrl.create({
title: 'Ajouter une forme',
buttons: [
{
text: '\uf0c8 Rectangle',
handler: () => {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Rectangle);
}
},
{
text: '\uf0d8 Triangle',
handler: () => {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Triangle);
}
},
{
text: '\uf111 Cercle',
handler: () => {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Circle);
}
},
{
text: '\uf068 Ligne',
handler: () => {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Line);
}
},
{
text: '\uf067 Croix',
handler: () => {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape.Cross);
}
},
{
text: '\uf031 Texte',
handler: () => {
this.canvasManagerService.addText(this.strokeColor, '');
}
}
]
});
actionSheet.present();
}
/**
* @return {?}
*/
presentEditActionSheet() {
const /** @type {?} */ actionSheet = this.actionSheetCtrl.create({
title: 'Édition',
buttons: [
{
text: '\uf125 \u0020 Rogner',
handler: () => {
this.crop();
}
},
{
text: '\uf247 Grouper',
handler: () => {
this.group();
}
},
{
text: '\uf0de Avancer',
handler: () => {
this.bringFoward();
}
},
{
text: '\uf0dd Reculer',
handler: () => {
this.sendToBack();
}
},
{
text: '\uf1f8 Supprimer',
handler: () => {
this.deleteSelection();
}
}
]
});
actionSheet.present();
}
/**
* @return {?}
*/
presentPictogramsActionSheet() {
let /** @type {?} */ buttons = [];
let /** @type {?} */ actionSheetStyles = [];
let /** @type {?} */ images = this.icons;
for (let /** @type {?} */ i = 0; i < images.length; i++) {
let /** @type {?} */ style = document.createElement('style');
style.type = 'text/css';
style.innerHTML =
'.customCSSClass' +
i +
'{background: url(' +
"'" +
this.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: () => {
this.addImage(images[i]);
}
});
}
let /** @type {?} */ actionSheet = this.actionSheetCtrl.create({
title: 'Ajouter un pictogramme',
buttons: buttons
});
actionSheet.onDidDismiss(() => {
// Don't forget to delete css styles on close of actionSheet:
for (let /** @type {?} */ i = 0; i < actionSheetStyles.length; i++) {
if (actionSheetStyles[i].parentNode != null)
actionSheetStyles[i].parentNode.removeChild(actionSheetStyles[i]);
}
});
actionSheet.present();
}
/**
* @return {?}
*/
onColorClicked() {
this.isSelectingColor = true;
}
/**
* @param {?} color
* @return {?}
*/
setColor(color) {
this.strokeColor = color;
this.changeStrokeColor();
this.isSelectingColor = false;
}
}
MobileSketchToolComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-mobile-sketch-tool',
template: `<div
class="div-canvas-container"
(touchstart)="mouseDown($event)"
(touchmove)="mouseMove($event)"
(touchend)="mouseUp($event)"
(mousedown)="mouseDown($event)"
(mousemove)="mouseMove($event)"
(mouseup)="mouseUp($event)"
>
<canvas id="canvas" width="680" height="680"></canvas>
<div class="color-picker" *ngIf="isSelectingColor">
<ion-grid>
<ion-row></ion-row>
<ion-row></ion-row>
<ion-row>
<ion-col style="background:#660000" (tap)="setColor('#660000')"> </ion-col>
<ion-col style="background:#663300" (tap)="setColor('#663300')"> </ion-col>
<ion-col style="background:#666600" (tap)="setColor('#666600')"> </ion-col>
<ion-col style="background:#006600" (tap)="setColor('#006600')"> </ion-col>
<ion-col style="background:#000066" (tap)="setColor('#000066')"> </ion-col>
<ion-col style="background:#660066" (tap)="setColor('#660066')"> </ion-col>
<ion-col style="background:#000000" (tap)="setColor('#000000')"> </ion-col>
</ion-row>
<ion-row>
<ion-col style="background:#CC0000" (tap)="setColor('#CC0000')"> </ion-col>
<ion-col style="background:#CC6600" (tap)="setColor('#CC6600')"> </ion-col>
<ion-col style="background:#CCCC00" (tap)="setColor('#CCCC00')"> </ion-col>
<ion-col style="background:#00CC00" (tap)="setColor('#00CC00')"> </ion-col>
<ion-col style="background:#0000CC" (tap)="setColor('#0000CC')"> </ion-col>
<ion-col style="background:#CC00CC" (tap)="setColor('#CC00CC')"> </ion-col>
<ion-col style="background:#606060" (tap)="setColor('#606060')"> </ion-col>
</ion-row>
<ion-row>
<ion-col style="background:#FF0000" (tap)="setColor('#FF0000')"> </ion-col>
<ion-col style="background:#FF8000" (tap)="setColor('#FF8000')"> </ion-col>
<ion-col style="background:#FFFF00" (tap)="setColor('#FFFF00')"> </ion-col>
<ion-col style="background:#00FF00" (tap)="setColor('#00FF00')"> </ion-col>
<ion-col style="background:#0000FF" (tap)="setColor('#0000FF')"> </ion-col>
<ion-col style="background:#FF00FF" (tap)="setColor('#FF00FF')"> </ion-col>
<ion-col style="background:#808080" (tap)="setColor('#808080')"> </ion-col>
</ion-row>
<ion-row>
<ion-col style="background:#FF6666" (tap)="setColor('#FF6666')"> </ion-col>
<ion-col style="background:#FFB266" (tap)="setColor('#FFB266')"> </ion-col>
<ion-col style="background:#FFFF66" (tap)="setColor('#FFFF66')"> </ion-col>
<ion-col style="background:#66FF66" (tap)="setColor('#66FF66')"> </ion-col>
<ion-col style="background:#6666FF" (tap)="setColor('#6666FF')"> </ion-col>
<ion-col style="background:#FF66FF" (tap)="setColor('#FF66FF')"> </ion-col>
<ion-col style="background:#C0C0C0" (tap)="setColor('#C0C0C0')"> </ion-col>
</ion-row>
<ion-row>
<ion-col style="background:#FF9999" (tap)="setColor('#FF9999')"> </ion-col>
<ion-col style="background:#FFCC99" (tap)="setColor('#FFCC99')"> </ion-col>
<ion-col style="background:#FFFF99" (tap)="setColor('#FFFF99')"> </ion-col>
<ion-col style="background:#99FF99" (tap)="setColor('#99FF99')"> </ion-col>
<ion-col style="background:#9999FF" (tap)="setColor('#9999FF')"> </ion-col>
<ion-col style="background:#FF99FF" (tap)="setColor('#FF99FF')"> </ion-col>
<ion-col style="background:#FFFFFF" (tap)="setColor('#FFFFFF')"> </ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<ion-toolbar>
<div class="div-edit-toolbar">
<button
ion-button
large
[clear]="true"
(click)="presentShapeActionSheet()"
>
<i
class="fa fa-square"
id="icon"
></i>
</button>
<button
ion-button
large
[clear]="true"
(click)="presentPictogramsActionSheet()"
>
<i
class="fa fa-image"
id="icon"
></i>
</button>
<button
ion-button
large
[clear]="true"
(click)="presentEditActionSheet()"
>
<i
class="fa fa-edit"
id="icon"
></i>
</button>
<button
ion-button
large
[clear]="true"
(click)="onColorClicked()"
>
<i
class="fa fa-paint-brush"
id="icon"
></i>
</button>
<button
ion-button
large
[clear]="true"
(click)="undo()"
*ngIf="isUndoAvailable"
>
<i
class="fa fa-undo"
id="icon"
></i>
</button>
</div>
</ion-toolbar>
`,
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]
},] },
];
/** @nocollapse */
MobileSketchToolComponent.ctorParameters = () => [
{ type: ActionSheetController },
{ type: CanvasManagerService }
];
MobileSketchToolComponent.propDecorators = {
imageData: [{ type: Input }],
loadedJson: [{ type: Input }],
iconsPath: [{ type: Input }],
icons: [{ type: Input }],
json: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/** @enum {number} */
const KEY_CODE = {
DELETE: 46,
BACKSPACE: 8,
};
KEY_CODE[KEY_CODE.DELETE] = "DELETE";
KEY_CODE[KEY_CODE.BACKSPACE] = "BACKSPACE";
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
const Black$1 = '#000000';
class WebSketchToolComponent {
/**
* @param {?} canvasManagerService
*/
constructor(canvasManagerService) {
this.canvasManagerService = canvasManagerService;
this.availableGeometricShapes = AvailableGeometricShape;
this.strokeColor = Black$1;
this.isDrawing = false;
this.isCropping = false;
this.isLastImage = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.canvasManagerService.emptyCanvas();
this.canvasManagerService.setBackgroundFromURL(this.imgUrl);
this.isDrawing = false;
}
/**
* @return {?}
*/
addText() {
this.canvasManagerService.addText(this.strokeColor, ' ');
}
/**
* @param {?} shape
* @return {?}
*/
addShape(shape) {
this.canvasManagerService.addGeometricShape(this.strokeColor, this.fillColor, AvailableGeometricShape[shape]);
}
/**
* @param {?} source
* @return {?}
*/
addImage(source) {
if (!this.isDrawing) {
}
}
/**
* @return {?}
*/
changeFillColor() {
this.canvasManagerService.changeSelectedObjectsFillColor(this.fillColor);
}
/**
* @return {?}
*/
changeStrokeColor() {
this.canvasManagerService.changeSelectedObjectsStrokeColor(this.strokeColor);
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
}
/**
* @return {?}
*/
bringFoward() {
this.canvasManagerService.bringSelectedObjectsToFront();
}
/**
* @return {?}
*/
sendToBack() {
this.canvasManagerService.sendSelectedObjectsToBack();
}
/**
* @return {?}
*/
draw() {
this.isDrawing = !this.isDrawing;
this.canvasManagerService.toggleFreeDrawing();
this.canvasManagerService.setFreeDrawingBrushColor(this.strokeColor);
}
/**
* @return {?}
*/
saveImage() {
const /** @type {?} */ dataURL = this.canvasManagerService.exportImageAsDataURL();
const /** @type {?} */ link = document.createElement('a');
link.download = 'image';
link.href = dataURL;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* @return {?}
*/
crop() {
this.isCropping = true;
this.canvasManagerService.disableSelection();
this.canvasManagerService.addSelectionRectangle();
}
/**
* @param {?} event
* @return {?}
*/
keyEvent(event) {
if (event.keyCode === KEY_CODE.DELETE) {
this.deleteSelection();
}
}
/**
* @return {?}
*/
deleteSelection() {
this.canvasManagerService.deleteSelectedObjects();
}
/**
* @param {?} event
* @return {?}
*/
mouseUp(event) {
if (this.isCropping) {
this.canvasManagerService.cropImage();
this.isCropping = false;
}
}
/**
* @param {?} event
* @return {?}
*/
mouseMove(event) {
if (this.isCropping) {
this.canvasManagerService.ajustCropRectangle(event);
}
}
/**
* @param {?} event
* @return {?}
*/
mouseDown(event) {
if (this.isCropping) {
this.canvasManagerService.startSelectingCropRectangle(event);
}
}
/**
* @return {?}
*/
group() {
this.canvasManagerService.groupSelectedObjects();
}
}
WebSketchToolComponent.decorators = [
{ type: Component, args: [{
selector: 'lib-web-sketch-tool',
template: `<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="row">
<div class="column">
<form>
<button
color="accent"
(click)="crop()"
[disabled]="isDrawing"
>
<i class="fa fa-crop"></i>
</button>
<button
(click)="addShape('Rectangle')"
[disabled]="isDrawing"
>
<i class="fa fa-square"></i>
</button>
<button
(click)="addShape('Circle')"
[disabled]="isDrawing"
>
<i class="fa fa-circle"></i>
</button>
<button
(click)="addShape('Line')"
[disabled]="isDrawing"
>
<i class="fa fa-minus"></i>
</button>
<button
(click)="addText()"
[disabled]="isDrawing"
>
<i class="fa fa-font"></i>
</button>
<button
color="accent"
(click)="bringFoward()"
[disabled]="isDrawing"
>
<i class="fa fa-angle-up"></i>
</button>
<div class="separator"></div>
<button (click)="saveImage()">
<i class="fa fa-download"></i>
</button>
</form>
</div>
<div class="column">
<form>
<button (click)="draw()">
<i class="fa fa-pencil"></i>
</button>
<button
(click)="addShape('Triangle')"
[disabled]="isDrawing"
>
<i class="fa fa-caret-up"></i>
</button>
<button
(click)="group()"
[disabled]="isDrawing"
>
<i class="fa fa-object-group"></i>
</button>
<button
(click)="addShape('Cross')"
[disabled]="isDrawing"
>
<i class="fa fa-plus"></i>
</button>
<button
(click)="deleteSelection()"
[disabled]="isDrawing"
>
<i class="fa fa-trash"></i>
</button>
<button
color="accent"
(click)="sendToBack()"
[disabled]="isDrawing"
>
<i class="fa fa-angle-down"></i>
</button>
<div class="separator"></div>
</form>
</div>
<div
class="column"
appCanvasDirective
(mouseDown)="mouseDown($event)"
(mouseMove)="mouseMove($event)"
(mouseUp)="mouseUp($event)"
>
<canvas id="canvas"></canvas>
</div>
</div>
`,
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]
},] },
];
/** @nocollapse */
WebSketchToolComponent.ctorParameters = () => [
{ type: CanvasManagerService }
];
WebSketchToolComponent.propDecorators = {
imgUrl: [{ type: Input }],
keyEvent: [{ type: HostListener, args: ['window:keyup', ['$event'],] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { CanvasClickDirective as ɵa, MobileSketchToolComponent as ɵd, CanvasManagerService as ɵc, WebSketchToolComponent as ɵb };
//# sourceMappingURL=lib-sketch-tool.js.map