visual fixes

main.js

@@ -1,10 +1,12 @@
 import factory from "./painting/factory.js";
-import Canvas from "./painting/canvas.js";
 import Shape from "./painting/shape.js";
+
+import Canvas from "./ui/canvas.js";
 import Button from "./ui/button.js";
 import Panel from "./ui/panel.js";
 
 document.body.innerHTML = "";
+const maxPanelWidth = 300;
 
 Shape.setBounding(window.innerWidth, window.innerHeight);
 let canvas = new Canvas(window.innerWidth, window.innerHeight);
@@ -14,12 +16,12 @@ repaint.addHandler(canvas.clear.bind(canvas));
 repaint.addHandler(paint);
 repaint.setPosition(25, 25);
 
-let panel = new Panel(300, window.innerHeight - 10);
+let panel = new Panel(Math.min(maxPanelWidth ,window.innerWidth - 20), window.innerHeight - 20);
-panel.setPosition(5, 5);
+panel.setPosition(10, 10);
 
 let settings = new Button("gear");
 settings.addHandler(panel.toggle.bind(panel));
-settings.setPosition(75, 25);
+settings.setPosition(100, 25);
 
 window.addEventListener("resize", onWindowResize, false);
 
@@ -30,7 +32,8 @@ document.body.appendChild(settings.element);
 
 function onWindowResize(e) {
     Shape.setBounding(window.innerWidth, window.innerHeight);
-    canvas.resize(window.innerWidth, window.innerHeight);
+    canvas.setSize(window.innerWidth, window.innerHeight);
+    panel.setSize(Math.min(maxPanelWidth ,window.innerWidth - 20), window.innerHeight - 20)
 }
 
 function paint() {

style.css

@@ -9,8 +9,6 @@ button {
     background-color: #00b6ff;
     border: none;
     border-radius: 50%;
-    width: 50px;
-    height: 50px;
     background-size: 66%;
     background-position: center;
     background-repeat: no-repeat;

ui/button.js

@@ -1,6 +1,9 @@
-class Button {
+import UI from "./ui";
+
+class Button extends UI {
     constructor(image) {
-        this.element = document.createElement("button");
+        super(document.createElement("button"), 50, 50);
+
         this.element.classList.add("shadow");
         this.element.style.backgroundImage = "url(images/" + image + ".svg)";
         this._boundClick = this._onClick.bind(this);
@@ -11,7 +14,8 @@ class Button {
         this.element.removeEventListener("click", this._boundClick);
         delete this._boundClick;
         delete this._handlers;
-        delete this.element;
+
+        super.destructor();
     }
     addHandler(handler) {
         this._handlers.push(handler);

ui/canvas.js

@@ -1,13 +1,9 @@
-import Color from "./color.js";
+import UI from "./ui.js";
 
-class Canvas {
+class Canvas extends UI {
     constructor(width, height) {
-        this.element = document.createElement("canvas");
+        super(document.createElement("canvas"), width, height);
-        this.element.width = width;
-        this.element.height = height;
         this._ctx = this.element.getContext("2d");
-        this._width = width;
-        this._height = height;
     }
     clear() {
         this.resetStyle();
@@ -24,11 +20,11 @@ class Canvas {
         shape.draw(this._ctx);
         this.resetStyle();
     }
-    resize(width, height) {
+    setSize(width, height) {
+        super.setSize(width, height);
+
         this.element.width = width;
         this.element.height = height;
-        this._width = width;
-        this._height = height;
     }
 }
 

ui/panel.js

@@ -1,19 +1,14 @@
-class Panel {
+import UI from "./ui";
+
+class Panel extends UI {
     constructor(width, height) {
-        this._width = width;
+        super(document.createElement("div"), width, height);
-        this._height = height;
+
         this._hidden = true;
-        this.element = document.createElement("div");
         this.element.classList.add("shadow");
         this.element.classList.add("hidden");
     }
 
-    setPosition(x, y) {
-        this.element.style.position = "absolute";
-        this.element.style.top = y + "px";
-        this.element.style.left = x + "px";
-    }
-
     toggle() {
         if (this._hidden) {
             this.show();

ui/ui.js

@@ -0,0 +1,24 @@
+class UI {
+    constructor(el, width, height) {
+        this.element = el;
+        this.setSize(width, height);
+    }
+    destructor() {
+        delete this.element;
+    }
+
+    setPosition(x, y) {
+        this.element.style.position = "absolute";
+        this.element.style.top = y + "px";
+        this.element.style.left = x + "px";
+    }
+
+    setSize(width, height) {
+        this._width = width;
+        this._height = height;
+        this.element.style.width = width + "px";
+        this.element.style.height = height + "px";
+    }
+}
+
+export default UI;