Merge pull request #76 from clavierpaul/master

Created arrow tool

Author: tbolis

examples/main.jsx

@@ -393,6 +393,7 @@ class SketchFieldDemo extends React.Component {
                         <MenuItem value={Tools.Select} key="Select">Select</MenuItem>
                         <MenuItem value={Tools.Pencil} key="Pencil">Pencil</MenuItem>
                         <MenuItem value={Tools.Line} key="Line">Line</MenuItem>
+                        <MenuItem value={Tools.Arrow} key="Arrow">Arrow</MenuItem>
                         <MenuItem value={Tools.Rectangle} key="Rectangle">Rectangle</MenuItem>
                         <MenuItem value={Tools.Circle} key="Circle">Circle</MenuItem>
                         <MenuItem value={Tools.Pan} key="Pan">Pan</MenuItem>

src/SketchField.jsx

@@ -7,6 +7,7 @@ import {uuid4} from './utils';
 import Select from './select';
 import Pencil from './pencil';
 import Line from './line';
+import Arrow from './arrow';
 import Rectangle from './rectangle';
 import Circle from './circle';
 import Pan from './pan';
@@ -81,6 +82,7 @@ class SketchField extends PureComponent {
     this._tools[Tool.Select] = new Select(fabricCanvas);
     this._tools[Tool.Pencil] = new Pencil(fabricCanvas);
     this._tools[Tool.Line] = new Line(fabricCanvas);
+    this._tools[Tool.Arrow] = new Arrow(fabricCanvas);
     this._tools[Tool.Rectangle] = new Rectangle(fabricCanvas);
     this._tools[Tool.Circle] = new Circle(fabricCanvas);
     this._tools[Tool.Pan] = new Pan(fabricCanvas)

src/arrow.js

@@ -0,0 +1,83 @@
+/*eslint no-unused-vars: 0*/
+
+import FabricCanvasTool from './fabrictool'
+
+const fabric = require('fabric').fabric;
+
+class Arrow extends FabricCanvasTool {
+
+  configureCanvas(props) {
+    let canvas = this._canvas;
+    canvas.isDrawingMode = canvas.selection = false;
+    canvas.forEachObject((o) => o.selectable = o.evented = false);
+    this._width = props.lineWidth;
+    this._color = props.lineColor;
+  }
+
+  doMouseDown(o) {
+    this.isDown = true;
+    let canvas = this._canvas;
+    var pointer = canvas.getPointer(o.e);
+    var points = [pointer.x, pointer.y, pointer.x, pointer.y];
+    this.line = new fabric.Line(points, {
+      strokeWidth: this._width,
+      fill: this._color,
+      stroke: this._color,
+      originX: 'center',
+      originY: 'center',
+      selectable: false,
+      evented: false
+    });
+
+    this.head = new fabric.Triangle({
+      fill: this._color,
+      left: pointer.x,
+      top: pointer.y,
+      originX: 'center',
+      originY: 'center',
+      height: 3 * this._width,
+      width: 3 * this._width,
+      selectable: false,
+      evented: false,
+      angle: 90
+    });
+
+    canvas.add(this.line);
+    canvas.add(this.head);
+  }
+
+  doMouseMove(o) {
+    if (!this.isDown) return;
+    let canvas = this._canvas;
+    var pointer = canvas.getPointer(o.e);
+    this.line.set({ x2: pointer.x, y2: pointer.y });
+    this.line.setCoords();
+
+    let x_delta = pointer.x - this.line.x1;
+    let y_delta = pointer.y - this.line.y1;
+
+    this.head.set({ 
+      left: pointer.x, 
+      top: pointer.y, 
+      angle: 90 + Math.atan2(y_delta, x_delta) * 180/Math.PI 
+    });
+
+    canvas.renderAll();
+  }
+
+  doMouseUp(o) {
+    this.isDown = false;
+    let canvas = this._canvas;
+
+    canvas.remove(this.line);
+    canvas.remove(this.head);
+    let arrow = new fabric.Group([this.line, this.head]);
+    canvas.add(arrow);
+  }
+
+  doMouseOut(o) {
+    this.isDown = false;
+  }
+}
+
+export default Arrow;

src/tools.js

@@ -1,6 +1,7 @@
 export default {
   Circle: 'circle',
   Line: 'line',
+  Arrow: 'arrow',
   Pencil: 'pencil',
   Rectangle: 'rectangle',
   Select: 'select',