feat: add basic tool as an example

Author: jasoniangreen

src/LiterallyCanvas.js

@@ -2,6 +2,7 @@ import actions from "./actions";
 import bindEvents from "./bindEvents";
 import { JSONToShape, shapeToJSON } from "./shapes";
 import { renderShapeToContext } from "./canvasRenderer";
+import defaultOptions from "./defaultOptions";
 import renderSnapshotToImage from "./renderSnapshotToImage";
 import renderSnapshotToSVG from "./renderSnapshotToSVG";
 import {
@@ -637,5 +638,6 @@ class LiterallyCanvas {
     }
 }
 
+LiterallyCanvas.defaultOptions = defaultOptions;
 
 export default LiterallyCanvas;

src/defaultOptions.js

@@ -1,3 +1,5 @@
+import Pencil from "./tools/Pencil";
+
 const defaultOptions = {
     imageURLPrefix: "lib/img",
     primaryColor: "hsla(0, 0%, 0%, 1)",
@@ -16,6 +18,7 @@ const defaultOptions = {
     zoomStep: 0.2,
     snapshot: null,
     onInit: (() => {}),
+    tools: [Pencil],
 };
 
-export default defaultOptions;
+export default defaultOptions;

src/tools/Pencil.js

@@ -0,0 +1,40 @@
+import { ToolWithStroke } from "./base";
+import { createShape } from "../shapes";
+
+
+class Pencil extends ToolWithStroke {
+
+    begin(x, y, lc) {
+        this.color = lc.getColor("primary");
+        this.currentShape = this.makeShape();
+        this.currentShape.addPoint(this.makePoint(x, y, lc));
+        this.lastEventTime = Date.now();
+    }
+
+    continue(x, y, lc) {
+        const timeDiff = Date.now() - this.lastEventTime;
+
+        if (timeDiff > this.eventTimeThreshold) {
+            this.lastEventTime += timeDiff;
+            this.currentShape.addPoint(this.makePoint(x, y, lc));
+            lc.drawShapeInProgress(this.currentShape);
+        }
+    }
+
+    end(x, y, lc) {
+        lc.saveShape(this.currentShape);
+        this.currentShape = undefined;
+    }
+
+    makePoint(x, y, lc) {
+        return createShape("Point", {x, y, size: this.strokeWidth, color: this.color});
+    }
+    makeShape() { return createShape("LinePath") }
+}
+
+Pencil.prototype.name = "Pencil";
+Pencil.prototype.iconName = "pencil";
+Pencil.prototype.eventTimeThreshold = 10;
+
+
+export default Pencil;

src/tools/base.js

@@ -0,0 +1,50 @@
+class Tool {
+    constructor() {}
+
+    // called when the user starts dragging
+    begin(x, y, lc) {}
+
+    // called when the user moves while dragging
+    continue(x, y, lc) {}
+
+    // called when the user finishes dragging
+    end(x, y, lc) {}
+
+    didBecomeActive(lc) {}
+    willBecomeInactive(lc) {}
+}
+
+Tool.prototype.name = null;  // for debugging
+Tool.prototype.iconName = null;  // {imageURLPrefix}/{iconName}.png
+Tool.prototype.usesSimpleAPI = true;
+Tool.prototype.optionsStyle = null;  // kind of options GUI to display
+
+
+class ToolWithStroke extends Tool {
+    constructor(lc) {
+        super();
+        this.strokeWidth = lc.opts.defaultStrokeWidth;
+    }
+
+    didBecomeActive(lc) {
+        const unsubscribeFuncs = [];
+        this.unsubscribe = () => {
+            unsubscribeFuncs.map((func) => func());
+        };
+
+        unsubscribeFuncs.push(lc.on("setStrokeWidth", strokeWidth => {
+            this.strokeWidth = strokeWidth;
+            lc.trigger("toolDidUpdateOptions");
+        })
+        );
+    }
+
+    willBecomeInactive(lc) {
+        this.unsubscribe();
+    }
+}
+
+ToolWithStroke.prototype.optionsStyle = "stroke-width";
+
+
+export { Tool, ToolWithStroke };