What changed? oh, everything

index.html

@@ -40,9 +40,6 @@
       <button id="mlp-reset-btn" class="btn btn-yellow" type="button">
         Reset Coordinates
       </button>
-      <button id="toggle-layers-locks" class="btn btn-blue" type="button">
-        Lock Layers
-      </button>
 
       <button id="mlp-delete-btn" class="btn btn-rose" type="button">
         Delete
@@ -211,15 +208,17 @@
 
     <script src="js/draggable.js"></script>
 
-    <script src="js/Draw/Minors/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/CanvasButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/ImageButton.js"></script>
+    <script src="js/Draw/Minors/Buttons/TextButton.js"></script>
     <script src="js/Draw/Minors/Dot.js"></script>
     <script src="js/Draw/Minors/Line.js"></script>
 
-    <script src="js/Draw/Layer/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/LayerView.js"></script>
+    <script src="js/Draw/Layer/BaseLayers/IOLayer.js"></script>
     <script src="js/Draw/Layer/HiddenLayer.js"></script>
-
-    <script src="js/Draw/InputView.js"></script>
-    <script src="js/Draw/OutputView.js"></script>
+    <script src="js/Draw/Layer/InputLayer.js"></script>
+    <script src="js/Draw/Layer/OutputLayer.js"></script>
 
     <script src="js/Draw/NeuronView.js"></script>
 

js/Draw/Layer/BaseLayers/IOLayer.js

@@ -0,0 +1,64 @@
+class IOLayer extends LayerView {
+  constructor(name, data, _x, _y) {
+    const { x, y } = iManager.getAbsoluteCoordinates(_x, _y);
+    super(x, y, 300, 300);
+    this.name = name;
+    this.data = data;
+  }
+
+  isInput() {
+    return this.outputDot !== null;
+  }
+
+  getDot() {
+    return this.inputDot ?? this.outputDot;
+  }
+
+  updateNeuronsCoordinates() {
+    this.neurons.forEach((n, i) => {
+      const x = this.x - 25 + (this.isInput() ? this.w : 50);
+      n.updateCoordinates(x, this.y + 30 + i * 50);
+    });
+    this.updateBorders();
+  }
+
+  updateBorders() {
+    this.h = this.neurons[this.neurons.length - 1].y - this.y + 30;
+    this.getDot().updateCoordinates();
+  }
+
+  reInitializeNeurons() {
+    const varNum = this.data[0].length;
+    for (let i = 0; i < varNum; i++) {
+      const neuron = new NeuronView();
+      this.neurons.push(neuron);
+    }
+    this.updateNeuronsCoordinates();
+  }
+
+  pressed() {
+    iManager.checkRollout(this);
+    this.getDot().handlePressed();
+  }
+
+  setCoordinates(x, y) {
+    super.setCoordinates(x, y);
+  }
+
+  createColCommand(text, x, y) {
+    return {
+      func: "text",
+      args: [text, this.x + 25 + x, this.y + 25 + y, this.w, this.h],
+    };
+  }
+
+  doubleClicked() {}
+
+  draw() {
+    this.isEditModeOpen() && this.getDot().draw();
+    const commands = [...this.outerCommands(), ...this.dataCommands()];
+    executeDrawingCommands(commands);
+
+    this.neurons.forEach((n) => n.draw());
+  }
+}

js/Draw/Layer/LayerView.js → js/Draw/Layer/BaseLayers/LayerView.js

@@ -2,6 +2,7 @@ class LayerView extends Draggable {
   constructor(x, y, w, h, parent) {
     super(x, y, w, h);
     this.parent = parent;
+    this.origin = null;
     this.neurons = [];
     this.inputDot = null;
     this.outputDot = null;
@@ -17,7 +18,7 @@ class LayerView extends Draggable {
   initializeDots() {}
 
   initializeButton() {
-    this.removeButton = new CanvasButton("delete", () => this.handleRemove());
+    this.removeButton = new ImageButton("delete", () => this.handleRemove());
     this.updateButtonCoordinates();
   }
 
@@ -48,9 +49,25 @@ class LayerView extends Draggable {
     this.parent?.updateBorders();
   }
 
+  clearOrigin() {
+    this.neurons.forEach((n) => n.clearOrigin());
+    this.origin = null;
+  }
+
+  setOrigin(obj) {
+    // Thanks to MLP class, we can't get rid of this mess. There is no input layer in original MLP class and all weights belongs to target neurons. Too much work to change. Maybe later.
+    const { prev } = this.parent.getPrevAndNext(this);
+    for (let i = 0; i < this.neurons.length; i++) {
+      for (let j = 0; j < prev.neurons.length; j++) {
+        this.neurons[i].setOrigin(obj.neurons[i]);
+        prev.neurons[j].lines[i].setOrigin(obj.neurons[i].w[j]);
+      }
+    }
+    this.origin = obj;
+  }
+
   setCoordinates(x, y) {
-    this.x = x;
-    this.y = y;
+    super.setCoordinates(x, y);
     this.postUpdateCoordinates();
   }
 
@@ -75,7 +92,7 @@ class LayerView extends Draggable {
   }
 
   pushNeuron() {
-    this.neurons.push(new DrawNeuron());
+    this.neurons.push(new NeuronView());
   }
 
   popNeuron() {
@@ -152,6 +169,7 @@ class LayerView extends Draggable {
     newMlpView.setLayers(newLayers);
     newMlpView.updateBorders();
     parent.updateBorders();
+    parent.checkMlpCompleted();
     mainOrganizer.addMlpView(newMlpView);
   }
 
@@ -168,7 +186,7 @@ class LayerView extends Draggable {
 
   connectNeurons(targetLayer) {
     this.neurons.forEach((n1) => {
-      n1.setLines([]);
+      n1.removeLines();
       targetLayer.neurons.forEach((n2) => {
         n1.addLine(new Line(n1, n2));
       });

js/Draw/Layer/HiddenLayer.js

@@ -18,7 +18,7 @@ class HiddenLayer extends LayerView {
   initializeNeurons() {
     const numOfNeurons = parseInt(Math.random() * 7) + 1;
     for (let i = 0; i < numOfNeurons; i++) {
-      this.neurons.push(new DrawNeuron());
+      this.neurons.push(new NeuronView());
     }
 
     this.setShownNeuronsNum(this.getNeuronNum());

js/Draw/Layer/InputLayer.js

@@ -0,0 +1,37 @@
+class InputLayer extends IOLayer {
+  constructor(name, data) {
+    super(name, data, 300, 300, true);
+    this.initializeDot();
+    this.reInitializeNeurons();
+  }
+
+  initializeDot() {
+    this.outputDot = new Dot(this, true);
+  }
+
+  dataCommands() {
+    let commands = [];
+    this.data.forEach((row, i) => {
+      row.forEach((val, j) => {
+        const a = this.createColCommand(val, i * 50, j * 50);
+        commands.push(a);
+      });
+    });
+    return commands;
+  }
+
+  outerCommands() {
+    const commands = [
+      { func: "rect", args: [this.x, this.y, this.w, this.h, 10, 10] },
+      {
+        func: "text",
+        args: [this.name + " Input", this.x + 5, this.y - 20, this.w, this.h],
+      },
+      {
+        func: "line",
+        args: [this.x + 50, this.y + 15, this.x + 50, this.y + this.h - 15],
+      },
+    ];
+    return commands;
+  }
+}

js/Draw/Layer/OutputLayer.js

@@ -0,0 +1,40 @@
+class OutputLayer extends IOLayer {
+  constructor(name, data) {
+    super(name, data, 800, 300, false);
+    this.initializeDot();
+    this.reInitializeNeurons();
+  }
+
+  initializeDot() {
+    this.inputDot = new Dot(this);
+  }
+
+  dataCommands() {
+    let commands = [];
+    this.data.forEach((val, i) => {
+      const a = this.createColCommand(val, (i + 1) * 50, 0);
+      commands.push(a);
+    });
+    return commands;
+  }
+
+  outerCommands() {
+    const commands = [
+      { func: "rect", args: [this.x, this.y, this.w, this.h, 10, 10] },
+      {
+        func: "text",
+        args: [this.name + " Output", this.x + 5, this.y - 20, this.w, this.h],
+      },
+      {
+        func: "line",
+        args: [
+          this.x + this.w - 50,
+          this.y + 15,
+          this.x + this.w - 50,
+          this.y + this.h - 15,
+        ],
+      },
+    ];
+    return commands;
+  }
+}