a button to repaint

images/gear.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+<defs>
+    <clipPath id="center">
+        <circle cx="50" cy="50" r="20"/>
+    </clipPath>
+</defs>
+<g id="group0" transform="rotate(10 50 50)" fill="none">
+    <path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+    M 44 0 L 56 0
+          L 59.65 13.65
+          L 69.12 17.27
+    L 81.12 10.4 L 89.6 18.88
+          L 82.73 30.91
+          L 86.64 40.35
+    L 100 44 L 100 56
+          L 86.64 59.65
+          L 82.73 69.69
+    L 89.6 81.12 L 81.12 89.6
+          L 69.09 82.73
+          L 59.65 86.64
+    L 56 100 L 44 100
+          L 40.35 86.84
+          L 30.51 82.73
+    L 18.88 89.6 L 10.4 81.12
+          L 17.27 69.09
+          L 13.36 59.65
+    L 0 56 L 0 44
+          L 13.36 40.35
+          L 17.27 30.91
+    L 10.4 18.88 L 18.88 10.4
+          L 30.91 17.27
+          L 40.35 13.65z
+    M 50 30
+          A 20 20 0 1 0 70 50
+          A 20 20 0 0 0 50 30z
+    "/>
+</g>
+</svg>

images/paint.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Created using Karbon, part of Calligra: http://www.calligra.org/karbon -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
+<defs/>
+<g id="layer0">
+    <path id="shape0" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+          M 0 100 L 0 70 L 30 100 z
+    "/>
+    <path id="shape1" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+          M 70 0 L 100 30 L 90 40 L 60 10 z
+    "/>
+    <path id="shape2" fill="#DEDEDD" stroke="#ffffff" stroke-linecap="butt" stroke-linejoin="miter" d="
+          M 55 15 L 5 65 L 35 95 L 85 45 z
+    "/>
+ </g>
+</svg>

main.js

@@ -1,21 +1,33 @@
 import factory from "./painting/factory.js";
 import Canvas from "./painting/canvas.js";
 import Shape from "./painting/shape.js";
+import Button from "./ui/button.js";
 
 document.body.innerHTML = "";
 
 Shape.setBounding(window.innerWidth, window.innerHeight);
 let canvas = new Canvas(window.innerWidth, window.innerHeight);
+
+let repaint = new Button("paint");
+repaint.addHandler(canvas.clear.bind(canvas));
+repaint.addHandler(paint);
+repaint.setPosition(50, 50);
+
+window.addEventListener("resize", onWindowResize, false);
+
 document.body.appendChild(canvas.element);
+document.body.appendChild(repaint.element);
 
-let amount = Math.floor(Math.random() * 100 + 50);
-
-for (let i = 0; i < amount; ++i) {
-    let shape = factory.createRandomShape();
-    canvas.draw(shape);
-}
-
-window.addEventListener("resize", function(e) {
+function onWindowResize(e) {
     Shape.setBounding(window.innerWidth, window.innerHeight);
     canvas.resize(window.innerWidth, window.innerHeight);
-}, false);
+}
+
+function paint() {
+    let amount = Math.floor(Math.random() * 100 + 50);
+
+    for (let i = 0; i < amount; ++i) {
+        let shape = factory.createRandomShape();
+        canvas.draw(shape);
+    }
+}

painting/canvas.js

@@ -6,6 +6,12 @@ class Canvas {
         this.element.width = width;
         this.element.height = height;
         this._ctx = this.element.getContext("2d");
+        this._width = width;
+        this._height = height;
+    }
+    clear() {
+        this.resetStyle();
+        this._ctx.clearRect(0, 0, this._width, this._height);
     }
     setFillColor(color) {
         this._ctx.fillStyle = color.rgba();
@@ -21,6 +27,8 @@ class Canvas {
     resize(width, height) {
         this.element.width = width;
         this.element.height = height;
+        this._width = width;
+        this._height = height;
     }
 }
 

style.css

@@ -1,4 +1,16 @@
 body {
     margin: 0;
     overflow: hidden;
+}
+
+button {
+    overflow: hidden;
+    background-color: aqua;
+    border: none;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
 }

ui/button.js

@@ -0,0 +1,31 @@
+class Button {
+    constructor(image) {
+        this.element = document.createElement("button");
+        this.element.style.backgroundImage = "url(images/" + image + ".svg)";
+        this._boundClick = this._onClick.bind(this);
+        this.element.addEventListener("click", this._boundClick, false);
+        this._handlers = [];
+    }
+    destructor() {
+        this.element.removeEventListener("click", this._boundClick);
+        delete this._boundClick;
+        delete this._handlers;
+        delete this.element;
+    }
+    addHandler(handler) {
+        this._handlers.push(handler);
+    }
+    setPosition(x, y) {
+        this.element.style.position = "absolute";
+        this.element.style.top = y + "px";
+        this.element.style.left = x + "px";
+    }
+    _onClick(e) {
+        for (let i = 0; i < this._handlers.length; ++i) {
+            this._handlers[i](e);
+        }
+    }
+
+}
+
+export default Button;