minor improvements

.gitattributes

@@ -0,0 +1,2 @@
+# Set the default behavior for line endings.
+* text=auto eol=lf

src/modules/view/divCanvas/divCanvas.css

@@ -1,8 +1,15 @@
+.canvas {
+  display: flex;
+  flex-direction: column;
+}
+
 .row {
+  flex: 1;
+
   display: flex;
 }
 
-.border {
+.cell {
   flex: 1;
 }
 

src/modules/view/divCanvas/divCanvas.html

@@ -1,7 +1,7 @@
 <template>
     <div class="canvas" style={canvasStyle}>
-        <div for:each={canvas} for:item="row" key={row.key} class="row" style={rowHeight}>
-            <div for:each={row} for:item="pixel" key={pixel.key} class="border" style={border}>
+        <div for:each={canvas} for:item="row" key={row.key} class="row">
+            <div for:each={row} for:item="pixel" key={pixel.key} class="cell" style={cellBorder}>
                 <div class="pixel"
                     style={pixel.style}
                     data-x={pixel.x} data-y={pixel.y}

src/modules/view/divCanvas/divCanvas.js

@@ -2,29 +2,24 @@ import { LightningElement, api } from "lwc";
 
 export default class DivCanvas extends LightningElement {
     @api canvas = [];
-    @api scale = 20;
+    @api scale;
     @api background;
-    _border;
+    @api border;
 
-    @api set border(value) {
-        this._border = 'border: ' + value;
+    get cellBorder() {
+        return 'border: ' + this.border;
     }
 
-    get border() {
-        return this._border;
+    get canvasStyle() {
+        return `
+        width: ${this.canvas.width * this.scale}px;
+        height: ${this.canvas.height * this.scale}px;
+        background: ${this.background}`;
     }
 
     dispatchClick({target: {dataset: {x, y}}}) {
         x = Number(x);
         y = Number(y);
         this.dispatchEvent(new CustomEvent('pixelclick', {detail: {x, y}}))
     }
-
-    get canvasStyle() {
-        return `width: ${this.scale * this.canvas.width}px; background: ${this.background}`;
-    }
-
-    get rowHeight() {
-        return `height: ${this.scale}px`;
-    }
 }

src/modules/view/divCanvas/model/canvas.js

@@ -1,7 +1,8 @@
 export default class Canvas extends Array {
+    static get [Symbol.species]() { return Array; }
+
     constructor(width, height, color) {
-        super();
-        array(height).forEach((y) => this.push(new Row(y, color, width)));
+        super(...array(height).map((y) => new Row(y, color, width)));
     }
 
     draw(x, y, shape, color) {
@@ -86,18 +87,17 @@ class Row extends Array {
     }
 }
 
-function newPixel(x, y, color) {
+function newPixel(x, y, initial) {
     return {
-        x, y, color,
+        x, y, initial,
         key: y + '_' + x,
-        default: color,
-        style: 'background-color: ' + color,
-        paint: function(color = this.default) {
+        paint: function(color = initial) {
             this.color = color;
-            this.style = 'background-color: ' + color;
+            this.style = color ? 'background-color: ' + color : undefined;
+            return this;
         },
-        get empty() { return this.color === this.default; }
-    };
+        get empty() { return this.color === this.initial; }
+    }.paint();
 }
 
 function array(n) {

src/modules/view/divCanvas/model/shape.js

@@ -1,4 +1,5 @@
 export default class Shape extends Array {
+    static get [Symbol.species]() { return Array; }
 
     clone() {
         return new Shape(...this);