feat(tools): Line, Eraser, Ellipse, Eyedropper, Pan, Rectangle, SelectShape, Text, Polygon

Author: Planck-Ho

demo/simple.html

@@ -33,18 +33,44 @@
     <button onclick="demoLC.trigger('setStrokeWidth', 10)">10px</button>
     <button onclick="demoLC.trigger('setStrokeWidth', 20)">20px</button>
     <button onclick="demoLC.trigger('setStrokeWidth', 30)">30px</button>
+    <br>
+    <button onclick="demoLC.setTool(Pencil)">Pencil</button>
+    <button onclick="demoLC.setTool(Line)">Line</button>
+    <button onclick="demoLC.setTool(Eraser)">Eraser</button>
+    <button onclick="demoLC.setTool(Ellipse)">Ellipse</button>
+    <button onclick="demoLC.setTool(Pan)">Pan</button>
+    <button onclick="demoLC.setTool(Rectangle)">Rectangle</button>
+    <button onclick="demoLC.setTool(SelectShape)">SelectShape</button>
+    <button onclick="demoLC.setTool(Text)">Text</button>
+    <button onclick="demoLC.setTool(Eyedropper)">Eyedropper</button>
+    <button onclick="demoLC.setTool(Polygon)">Polygon</button>
 
     <script src="../dist/bundle.js"></script>
 
     <script type="text/javascript">
+      
       const LiterallyCanvas = LC.LiterallyCanvas;
+      console.log(LC, '=====LiterallyCanvas')
       const mainDiv = document.querySelector('.literally');
       const lc = new LiterallyCanvas(mainDiv, {
         ...LC.defaultOptions,
         defaultStrokeWidth: 10,
         backgroundColor: '#FFF',
+        tools:[LC.Pencil,LC.Line,LC.Eraser]
       });
+      console.log(lc)
       window.demoLC = lc;
+      // Tools
+      window.Pencil = new LC.Pencil(lc);
+      window.Line = new LC.Line(lc);
+      window.Eraser = new LC.Eraser(lc);
+      window.Ellipse = new LC.Ellipse(lc);
+      window.Pan  = new LC.Pan(lc);
+      window.Rectangle  = new LC.Rectangle(lc);
+      window.SelectShape  = new LC.SelectShape(lc);
+      window.Eyedropper  = new LC.Eyedropper(lc);
+      window.Text  = new LC.Text(lc);
+      window.Polygon  = new LC.Polygon(lc);
     </script>
   </body>
 </html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "literallycanvas-core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "HTML5 drawing widget - core lib",
   "main": "dist/bundle.js",
   "files": [

src/index.js

@@ -1,5 +1,16 @@
-import * as toolsBase from "./tools/base";
-import Pencil from "./tools/Pencil";
+import {
+    toolsBase,
+    Pencil,
+    Line,
+    Eraser,
+    Ellipse,
+    Eyedropper,
+    Pan,
+    Rectangle,
+    SelectShape,
+    Text,
+    Polygon,
+} from "./tools";
 import * as actions from "./actions";
 import bindEvents from "./bindEvents";
 import * as canvasRenderer from "./canvasRenderer";
@@ -32,6 +43,15 @@ export {
     util,
     toolsBase,
     Pencil,
+    Line,
+    Eraser,
+    Ellipse,
+    Eyedropper,
+    Pan,
+    Rectangle,
+    SelectShape,
+    Text,
+    Polygon,
 };
 
 if (window) {
@@ -52,6 +72,15 @@ if (window) {
         util,
         toolsBase,
         Pencil,
+        Line,
+        Eraser,
+        Ellipse,
+        Eyedropper,
+        Pan,
+        Rectangle,
+        SelectShape,
+        Text,
+        Polygon,
     };
 }
 

src/tools/Ellipse.js

@@ -0,0 +1,29 @@
+import {ToolWithStroke} from "./base";
+import {createShape} from "../shapes";
+
+class Ellipse extends ToolWithStroke {
+    begin(x, y, lc) {
+        return (this.currentShape = createShape("Ellipse", {
+            x: x,
+            y: y,
+            strokeWidth: this.strokeWidth,
+            strokeColor: lc.getColor("primary"),
+            fillColor: lc.getColor("secondary"),
+        }));
+    }
+
+    continue(x, y, lc) {
+        this.currentShape.width = x - this.currentShape.x;
+        this.currentShape.height = y - this.currentShape.y;
+        return lc.drawShapeInProgress(this.currentShape);
+    }
+
+    end(x, y, lc) {
+        return lc.saveShape(this.currentShape);
+    }
+}
+
+Ellipse.prototype.name = "Ellipse";
+Ellipse.prototype.iconName = "ellipse";
+
+export default Ellipse;

src/tools/Eraser.js

@@ -0,0 +1,22 @@
+import Pencil from "./Pencil";
+import {createShape} from "../shapes";
+
+class Eraser extends Pencil {
+    makePoint(x, y, lc) {
+        return createShape("Point", {
+            x: x,
+            y: y,
+            size: this.strokeWidth,
+            color: "#000",
+        });
+    }
+
+    makeShape() {
+        return createShape("ErasedLinePath");
+    }
+}
+
+Eraser.prototype.name = "Eraser";
+Eraser.prototype.iconName = "eraser";
+
+export default Eraser;

src/tools/Eyedropper.js

@@ -0,0 +1,44 @@
+import {Tool} from "./base";
+
+const getPixel = function(ctx, arg) {
+    var pixel, x, y;
+    (x = arg.x), (y = arg.y);
+    pixel = ctx.getImageData(x, y, 1, 1).data;
+    if (pixel[3]) {
+        return "rgb(" + pixel[0] + ", " + pixel[1] + ", " + pixel[2] + ")";
+    } else {
+        return null;
+    }
+};
+
+class Eyedropper extends Tool {
+    readColor(x, y, lc) {
+        var canvas, color, newColor, offset;
+        offset = lc.getDefaultImageRect();
+        canvas = lc.getImage();
+        newColor = getPixel(canvas.getContext("2d"), {
+            x: x - offset.x,
+            y: y - offset.y,
+        });
+        color = newColor || lc.getColor("background");
+        if (this.strokeOrFill === "stroke") {
+            return lc.setColor("primary", newColor);
+        } else {
+            return lc.setColor("secondary", newColor);
+        }
+    }
+
+    begin(x, y, lc) {
+        return this.readColor(x, y, lc);
+    }
+
+    continue(x, y, lc) {
+        return this.readColor(x, y, lc);
+    }
+}
+
+Eyedropper.prototype.name = "Eyedropper";
+Eyedropper.prototype.iconName = "eyedropper";
+Eyedropper.prototype.optionsStyle = "stroke-or-fill";
+
+export default Eyedropper;

src/tools/Line.js

@@ -0,0 +1,40 @@
+import {ToolWithStroke} from "./base";
+import {createShape} from "../shapes";
+
+class Line extends ToolWithStroke {
+    begin(x, y, lc) {
+        return (this.currentShape = createShape("Line", {
+            x1: x,
+            y1: y,
+            x2: x,
+            y2: y,
+            strokeWidth: this.strokeWidth,
+            dash: function() {
+                switch (false) {
+                    case !this.isDashed:
+                        return [this.strokeWidth * 2, this.strokeWidth * 4];
+                    default:
+                        return null;
+                }
+            }.call(this),
+            endCapShapes: this.hasEndArrow ? [null, "arrow"] : null,
+            color: lc.getColor("primary"),
+        }));
+    }
+
+    continue(x, y, lc) {
+        this.currentShape.x2 = x;
+        this.currentShape.y2 = y;
+        return lc.drawShapeInProgress(this.currentShape);
+    }
+
+    end(x, y, lc) {
+        return lc.saveShape(this.currentShape);
+    }
+}
+
+Line.prototype.name = "Line";
+Line.prototype.iconName = "line";
+Line.prototype.optionsStyle = "line-options-and-stroke-width";
+
+export default Line;

src/tools/Pan.js

@@ -0,0 +1,63 @@
+import {Tool} from "./base";
+
+class Pan extends Tool {
+    didBecomeActive(lc) {
+        const unsubscribeFuncs = [];
+        this.unsubscribe = (function(_this) {
+            return function() {
+                let func, i, len, results;
+                results = [];
+                for (i = 0, len = unsubscribeFuncs.length; i < len; i++) {
+                    func = unsubscribeFuncs[i];
+                    results.push(func());
+                }
+                return results;
+            };
+        })(this);
+        unsubscribeFuncs.push(
+            lc.on(
+                "lc-pointerdown",
+                (function(_this) {
+                    return function(arg) {
+                        let rawX, rawY;
+                        (rawX = arg.rawX), (rawY = arg.rawY);
+                        _this.oldPosition = lc.position;
+                        return (_this.pointerStart = {
+                            x: rawX,
+                            y: rawY,
+                        });
+                    };
+                })(this),
+            ),
+        );
+        return unsubscribeFuncs.push(
+            lc.on(
+                "lc-pointerdrag",
+                (function(_this) {
+                    return function(arg) {
+                        let dp, rawX, rawY;
+                        (rawX = arg.rawX), (rawY = arg.rawY);
+                        dp = {
+                            x: (rawX - _this.pointerStart.x) * lc.backingScale,
+                            y: (rawY - _this.pointerStart.y) * lc.backingScale,
+                        };
+                        return lc.setPan(
+                            _this.oldPosition.x + dp.x,
+                            _this.oldPosition.y + dp.y,
+                        );
+                    };
+                })(this),
+            ),
+        );
+    }
+
+    willBecomeInactive(lc) {
+        return this.unsubscribe();
+    }
+}
+
+Pan.prototype.name = "Pan";
+Pan.prototype.iconName = "pan";
+Pan.prototype.usesSimpleAPI = false;
+
+export default Pan;