Added rudimentary add and remove layer. Still can't change layer order

web/page/bspaint.js

@@ -282,8 +282,20 @@ function createDrawArea(canvas = blankCanvas()) {
         ctx.restore();
       }
       this.composite();
+    },
+    removeLayer(layer=this.activeLayer) {
+      const i = layers.indexOf(layer);
+      if (i !==-1) {
+        layers.splice(i,1);
+        if (layer === this.activeLayer) {
+          this.activeLayer = layers[Math.min(layers.length-1,i)];
+        }
+      }
+    },
+    addEmptyLayer() {
+      layers.push( new Layer("new layer", canvas));
+
     }
-  
   }
   eventOverlay.pic = result;
   sidebar.addEventListener("mousedown",_=>  setExportPic(result))
@@ -731,7 +743,9 @@ function poulateLayerControl() {
     <div class="layer_list">
   
     </div> 
-    <div class="layer_actions">    
+    <div class="layer_actions">
+      <div class="add_layer"></div>
+      <div class="remove_layer"></div>
     </div>
   `)
 
@@ -751,6 +765,14 @@ function poulateLayerControl() {
     updateLayerList();
   });
 
+  $(".add_layer").on("click",_=>{
+    activePic.addEmptyLayer();
+    updateLayerList();
+  });
+  $(".remove_layer").on("click",_=>{
+    activePic.removeLayer(activePic.activeLayer)
+    updateLayerList();
+  });
 }
 
 function updateLayerList() {
@@ -800,7 +822,7 @@ function updateLayerList() {
   while(layer_list.firstChild) layer_list.removeChild(layer_list.firstChild)
 
   if (!activePic) return;
-  
+
   const newControls = activePic.layers.map(makeLayerWidget);
 
   newControls.reverse().forEach(element=>layer_list.appendChild(element))  

web/page/style.css

@@ -260,10 +260,17 @@ input[type="color"] {
 }
 
 #layer_control {
+  --control-height :400px;
   bottom:0px;
-  height:400px;
+  height:var(--control-height);
 }
 
+.layer_list {
+  height:calc(var(--control-height) - 100px);
+  overflow-y: auto;
+}
+
+
 .layer-attributes {
   position:relative;
 }
@@ -346,6 +353,39 @@ input[type="color"] {
   height:24px;
 }
 
+.layer_actions {
+  position: absolute;
+  bottom: 2px;
+  border: 1px solid black;
+  height: 26px;
+  left: 0px;
+  right: 0px;
+}
+.layer_actions .remove_layer {
+  position:absolute;
+
+  width:24px;
+  height:24px;
+  right:0px;
+  bottom:0px;
+  box-sizing: border-box;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -12 24 24'%3E%3Cpath d='M 0 7 L -1 -6 L 13 -6 L 12 7 Z M 3 4 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 Z M 6.5 4 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 Z M 10 3.8 v -7 a 1 1 0 0 0 -1 0 v 7 a 1 1 0 0 0 1 0 m 4 -10 h -16 a 1 0.2 0 0 1 16 0 m -9 -1.3 h 2 a 1 1 0 0 0 -2 0' fill='%2300000080'/%3E%3C/svg%3E");
+}
+
+.layer_actions .add_layer {
+  position:absolute;
+
+  width:24px;
+  height:24px;
+  left:0px;
+  bottom:0px;
+  box-sizing: border-box;
+
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cpath d='M -1 7 H 1 V 1 H 7 V -1 H 1 V -7 H -1 V -1 H -7 V 1 H -1' fill='%2300000080'/%3E%3C/svg%3E")
+}
+
+
 input.maskColor {
   display:inline-block;
   position:absolute;
@@ -368,3 +408,4 @@ input.maskColor {
   width: 100%;
   text-align: center;
 }
+