react-design-editor
Version:
Design Editor Tools with React.js + ant.design + fabric.js
365 lines (364 loc) • 15.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const fabric_1 = require("fabric");
const uuidv4_1 = require("uuidv4");
const objects_1 = require("../objects");
class DrawingHandler {
constructor(handler) {
this.polygon = {
init: () => {
this.handler.interactionHandler.drawing('polygon');
this.handler.pointArray = [];
this.handler.lineArray = [];
this.handler.activeLine = null;
this.handler.activeShape = null;
},
finish: () => {
this.handler.pointArray.forEach(point => {
this.handler.canvas.remove(point);
});
this.handler.lineArray.forEach(line => {
this.handler.canvas.remove(line);
});
this.handler.canvas.remove(this.handler.activeLine);
this.handler.canvas.remove(this.handler.activeShape);
this.handler.pointArray = [];
this.handler.lineArray = [];
this.handler.activeLine = null;
this.handler.activeShape = null;
this.handler.canvas.renderAll();
this.handler.interactionHandler.selection();
},
addPoint: (opt) => {
const { e, absolutePointer } = opt;
const { x, y } = absolutePointer;
const circle = new fabric_1.fabric.Circle({
radius: 1,
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 0.5,
left: x,
top: y,
selectable: false,
hasBorders: false,
hasControls: false,
originX: 'center',
originY: 'center',
hoverCursor: 'pointer',
});
circle.set({
id: (0, uuidv4_1.uuid)(),
});
if (!this.handler.pointArray.length) {
circle.set({
fill: 'red',
});
}
const points = [x, y, x, y];
const line = new fabric_1.fabric.Line(points, {
strokeWidth: 1,
fill: '#999999',
stroke: '#999999',
originX: 'center',
originY: 'center',
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
});
line.set({
class: 'line',
});
if (this.handler.activeShape) {
const position = this.handler.canvas.getPointer(e);
const activeShapePoints = this.handler.activeShape.get('points');
activeShapePoints.push({
x: position.x,
y: position.y,
});
const polygon = new fabric_1.fabric.Polygon(activeShapePoints, {
stroke: '#333333',
strokeWidth: 1,
fill: '#cccccc',
opacity: 0.1,
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
});
this.handler.canvas.remove(this.handler.activeShape);
this.handler.canvas.add(polygon);
this.handler.activeShape = polygon;
this.handler.canvas.renderAll();
}
else {
const polyPoint = [{ x, y }];
const polygon = new fabric_1.fabric.Polygon(polyPoint, {
stroke: '#333333',
strokeWidth: 1,
fill: '#cccccc',
opacity: 0.1,
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
});
this.handler.activeShape = polygon;
this.handler.canvas.add(polygon);
}
this.handler.activeLine = line;
this.handler.pointArray.push(circle);
this.handler.lineArray.push(line);
this.handler.canvas.add(line);
this.handler.canvas.add(circle);
},
generate: (pointArray) => {
const points = [];
const id = (0, uuidv4_1.uuid)();
pointArray.forEach(point => {
points.push({
x: point.left,
y: point.top,
});
this.handler.canvas.remove(point);
});
this.handler.lineArray.forEach(line => {
this.handler.canvas.remove(line);
});
this.handler.canvas.remove(this.handler.activeShape).remove(this.handler.activeLine);
const option = {
id,
points,
type: 'polygon',
stroke: 'rgba(0, 0, 0, 1)',
strokeWidth: 1,
fill: 'rgba(0, 0, 0, 0.25)',
opacity: 1,
objectCaching: !this.handler.editable,
name: 'New polygon',
superType: 'drawing',
};
this.handler.add(option, false);
this.handler.pointArray = [];
this.handler.activeLine = null;
this.handler.activeShape = null;
this.handler.interactionHandler.selection();
},
// TODO... polygon resize
// createResize: (target, points) => {
// points.forEach((point, index) => {
// const { x, y } = point;
// const circle = new fabric.Circle({
// name: index,
// radius: 3,
// fill: '#ffffff',
// stroke: '#333333',
// strokeWidth: 0.5,
// left: x,
// top: y,
// hasBorders: false,
// hasControls: false,
// originX: 'center',
// originY: 'center',
// hoverCursor: 'pointer',
// parentId: target.id,
// });
// this.handler.pointArray.push(circle);
// });
// const group = [target].concat(this.pointArray);
// this.handler.canvas.add(new fabric.Group(group, { type: 'polygon', id: uuid() }));
// },
// removeResize: () => {
// if (this.handler.pointArray) {
// this.handler.pointArray.forEach((point) => {
// this.handler.canvas.remove(point);
// });
// this.handler.pointArray = [];
// }
// },
// movingResize: (target, e) => {
// const points = target.diffPoints || target.points;
// const diffPoints = [];
// points.forEach((point) => {
// diffPoints.push({
// x: point.x + e.movementX,
// y: point.y + e.movementY,
// });
// });
// target.set({
// diffPoints,
// });
// this.handler.canvas.renderAll();
// },
};
this.line = {
init: () => {
this.handler.interactionHandler.drawing('line');
this.handler.pointArray = [];
this.handler.activeLine = null;
},
finish: () => {
this.handler.pointArray.forEach(point => {
this.handler.canvas.remove(point);
});
this.handler.canvas.remove(this.handler.activeLine);
this.handler.pointArray = [];
this.handler.activeLine = null;
this.handler.canvas.renderAll();
this.handler.interactionHandler.selection();
},
addPoint: (opt) => {
const { absolutePointer } = opt;
const { x, y } = absolutePointer;
const circle = new fabric_1.fabric.Circle({
radius: 3,
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 0.5,
left: x,
top: y,
selectable: false,
hasBorders: false,
hasControls: false,
originX: 'center',
originY: 'center',
hoverCursor: 'pointer',
});
if (!this.handler.pointArray.length) {
circle.set({
fill: 'red',
});
}
const points = [x, y, x, y];
this.handler.activeLine = new objects_1.Line(points, {
strokeWidth: 2,
fill: '#999999',
stroke: '#999999',
originX: 'center',
originY: 'center',
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
});
this.handler.activeLine.set({
class: 'line',
});
this.handler.pointArray.push(circle);
this.handler.canvas.add(this.handler.activeLine);
this.handler.canvas.add(circle);
},
generate: (opt) => {
const { absolutePointer } = opt;
const { x, y } = absolutePointer;
let points = [];
const id = (0, uuidv4_1.uuid)();
this.handler.pointArray.forEach(point => {
points = points.concat(point.left, point.top, x, y);
this.handler.canvas.remove(point);
});
this.handler.canvas.remove(this.handler.activeLine);
const option = {
id,
points,
type: 'line',
stroke: 'rgba(0, 0, 0, 1)',
strokeWidth: 3,
opacity: 1,
objectCaching: !this.handler.editable,
name: 'New line',
superType: 'drawing',
};
this.handler.add(option, false);
this.handler.pointArray = [];
this.handler.activeLine = null;
this.handler.interactionHandler.selection();
},
};
this.arrow = {
init: () => {
this.handler.interactionHandler.drawing('arrow');
this.handler.pointArray = [];
this.handler.activeLine = null;
},
finish: () => {
this.handler.pointArray.forEach(point => {
this.handler.canvas.remove(point);
});
this.handler.canvas.remove(this.handler.activeLine);
this.handler.pointArray = [];
this.handler.activeLine = null;
this.handler.canvas.renderAll();
this.handler.interactionHandler.selection();
},
addPoint: (opt) => {
const { absolutePointer } = opt;
const { x, y } = absolutePointer;
const circle = new fabric_1.fabric.Circle({
radius: 3,
fill: '#ffffff',
stroke: '#333333',
strokeWidth: 0.5,
left: x,
top: y,
selectable: false,
hasBorders: false,
hasControls: false,
originX: 'center',
originY: 'center',
hoverCursor: 'pointer',
});
if (!this.handler.pointArray.length) {
circle.set({
fill: 'red',
});
}
const points = [x, y, x, y];
this.handler.activeLine = new objects_1.Arrow(points, {
strokeWidth: 2,
fill: '#999999',
stroke: '#999999',
class: 'line',
originX: 'center',
originY: 'center',
selectable: false,
hasBorders: false,
hasControls: false,
evented: false,
});
this.handler.pointArray.push(circle);
this.handler.canvas.add(this.handler.activeLine);
this.handler.canvas.add(circle);
},
generate: (opt) => {
const { absolutePointer } = opt;
const { x, y } = absolutePointer;
let points = [];
this.handler.pointArray.forEach(point => {
points = points.concat(point.left, point.top, x, y);
this.handler.canvas.remove(point);
});
this.handler.canvas.remove(this.handler.activeLine);
const option = {
id: (0, uuidv4_1.uuid)(),
points,
type: 'arrow',
stroke: 'rgba(0, 0, 0, 1)',
strokeWidth: 3,
opacity: 1,
objectCaching: !this.handler.editable,
name: 'New line',
superType: 'drawing',
};
this.handler.add(option, false);
this.handler.pointArray = [];
this.handler.activeLine = null;
this.handler.interactionHandler.selection();
},
};
this.orthogonal = {};
this.curve = {};
this.handler = handler;
}
}
exports.default = DrawingHandler;