Merge pull request #3 from saliherdemk/main

split logic refactored
saliherdemk · Jul 27, 2024 · 813f326 · 813f326
2 parents 939b8f8 + 383e034
commit 813f326
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 206 deletions.
diff --git a/js/Draw/DrawLayer.js b/js/Draw/DrawLayer.js
@@ -66,7 +66,7 @@ class DrawLayer extends Draggable {
 
   handleRemove() {
     if (this.isIsolated()) {
-      this.destroy();
+      this.parent.destroy();
       return;
     }
     this.isolate();
@@ -77,19 +77,11 @@ class DrawLayer extends Draggable {
   }
 
   isolate() {
-    let parentLayers = this.parent.getLayers();
-    if (this.dots[1].isOccupied()) {
-      const targetLayer = parentLayers[parentLayers.indexOf(this) + 1];
-      targetLayer.dots[0].free();
-      this.splitMLp(targetLayer);
-    }
+    const { prev: prevLayer, next: targetLayer } =
+      this.parent.getPrevAndNext(this);
 
-    parentLayers = this.parent.getLayers();
-    if (this.dots[0].isOccupied()) {
-      const prevLayer = parentLayers[parentLayers.indexOf(this)];
-      this.dots[0].free();
-      prevLayer.splitMLp(this);
-    }
+    targetLayer && this.splitMlp(targetLayer);
+    prevLayer && prevLayer.splitMlp(this);
   }
 
   setShownNeuronsNum(shownNeuronsNum) {
@@ -104,23 +96,20 @@ class DrawLayer extends Draggable {
   setShownNeurons() {
     this.shownNeurons.indexes = [];
     const shownNeuronsNum = this.getShownNeuronsNum();
-    const neuronNum = this.getNeuronNum();
-    this.infoBox.val = neuronNum - shownNeuronsNum;
+    const neuronsNum = this.getNeuronNum();
+    this.infoBox.val = neuronsNum - shownNeuronsNum;
+    const mid =
+      (this.parent ? shownNeuronsNum : Math.min(shownNeuronsNum, 5)) / 2;
 
-    const displayedNeuronsNum = this.parent
-      ? shownNeuronsNum
-      : Math.min(shownNeuronsNum, 5);
-    const mid = displayedNeuronsNum / 2;
-
-    for (let i = 0; i < this.neurons.length; i++) {
-      const neuron = this.neurons[i];
-      if (i < mid || i >= neuronNum - mid) {
+    this.neurons.forEach((neuron, i) => {
+      if (i < mid || i >= neuronsNum - mid) {
         neuron.visible();
         this.shownNeurons.indexes.push(i);
-        continue;
+      } else {
+        neuron.hide();
       }
-      neuron.hide();
-    }
+    });
+
     this.updateNeuronsCoordinates();
   }
 
@@ -148,12 +137,12 @@ class DrawLayer extends Draggable {
     this.dots.forEach((dot) => dot.updateCoordinates());
   }
 
-  splitMLp(targetLayer) {
-    const parentLayers = targetLayer.parent.layers;
-    const splitIndex = parentLayers.indexOf(targetLayer);
-    parentLayers[splitIndex - 1].clearLines();
+  splitMlp(targetLayer) {
+    const parent = targetLayer.parent;
+    const { prev, index: splitIndex } = parent.getPrevAndNext(targetLayer);
+    prev.clearLines(targetLayer);
 
-    const newLayers = parentLayers.splice(0, splitIndex);
+    const newLayers = parent.getLayers().splice(0, splitIndex);
 
     const [x, y] = [newLayers[0].x, newLayers[0].y];
 
@@ -165,19 +154,14 @@ class DrawLayer extends Draggable {
   }
 
   reconnectNeurons() {
-    const layers = this.parent.layers;
-    const index = layers.indexOf(this);
-    const prev = layers[index - 1];
-    const next = layers[index + 1];
+    const parent = this.parent;
+    const { prev, next } = parent.getPrevAndNext(this);
+
+    prev && prev.connectNeurons(this);
+    next && this.connectNeurons(next);
 
-    if (prev) {
-      prev.connectNeurons(this);
-    }
-    if (next) {
-      this.connectNeurons(next);
-    }
     this.updateButtonCoordinates();
-    this.parent.updateBorders();
+    parent.updateBorders();
   }
 
   connectNeurons(targetLayer) {
@@ -192,27 +176,21 @@ class DrawLayer extends Draggable {
   }
 
   connectLayer(targetLayer) {
+    console.log(this, targetLayer);
     if (this.parent === targetLayer.parent) return;
 
     if (targetLayer.dots[0].isOccupied()) {
-      this.splitMLp(targetLayer);
+      this.splitMlp(targetLayer);
     }
 
     this.connectNeurons(targetLayer);
-
-    targetLayer.parent.layers.forEach((layer) => {
-      this.parent.pushLayer(layer);
-    });
-
-    targetLayer.parent.destroy();
-    targetLayer.parent.layers.forEach((layer) => {
-      layer.parent = this.parent;
-    });
+    targetLayer.parent.moveLayers(this.parent);
   }
 
-  clearLines() {
+  clearLines(targetLayer) {
     this.neurons.forEach((neuron) => neuron.removeLines());
     this.dots[1].free();
+    targetLayer.dots[0].free();
   }
 
   destroy() {
@@ -221,7 +199,8 @@ class DrawLayer extends Draggable {
     this.dots.forEach((dot) => dot.destroy());
     this.dots = [];
     this.canvas = null;
-    this.parent = null;
+    this.button?.destroy();
+    this.button = null;
   }
 
   handlePressed() {
@@ -288,14 +267,14 @@ class Dot {
 
   occupy() {
     this.occupied = true;
-    this.parent.button.changeImg(organizer.getImageByKey("brokenLink"));
+    this.parent.button.changeImg("brokenLink");
   }
 
   free() {
     this.occupied = false;
     const allFree = this.parent.dots.every((d) => !d.isOccupied());
 
-    allFree && this.parent.button.changeImg(organizer.getImageByKey("delete"));
+    allFree && this.parent.button.changeImg("delete");
   }
 
   destroy() {
@@ -343,16 +322,18 @@ class Dot {
     if (!this.rollover) return;
 
     const activeLine = organizer.getActiveLine();
+
     if (!activeLine) {
-      organizer.setActiveLine(new Line(this, null, true));
+      !this.isInput && organizer.setActiveLine(new Line(this, null, true));
       return;
     }
 
-    if (activeLine.from === this) {
+    if (activeLine.from === this || !this.isInput) {
       organizer.setActiveLine(null);
-    } else {
-      this.combineSchemas();
+      return;
     }
+
+    this.combineSchemas();
   }
 
   draw() {

diff --git a/js/Draw/Schema.js b/js/Draw/Schema.js
@@ -7,6 +7,12 @@ class Schema extends Draggable {
     this.updateBorders();
   }
 
+  getPrevAndNext(layer) {
+    const layers = this.getLayers();
+    const index = layers.indexOf(layer);
+    return { prev: layers[index - 1], next: layers[index + 1], index: index };
+  }
+
   getLayers() {
     return this.layers;
   }
@@ -18,21 +24,24 @@ class Schema extends Draggable {
     });
   }
 
+  moveLayers(targetSchema) {
+    this.getLayers().forEach((layer) => {
+      targetSchema.pushLayer(layer);
+    });
+    this.setLayers([]);
+    this.destroy();
+  }
+
   destroy() {
-    // this.canvas = null;
+    this.canvas = null;
+    this.getLayers().forEach((l) => l.destroy());
+    this.setLayers([]);
     organizer.removeSchema(this);
   }
 
   pushLayer(layer) {
-    this.layers.push(layer);
-  }
-
-  removeLayer(layer) {
-    const layers = this.layers;
-    const index = layers.indexOf(layer);
-    const prevLayer = layers[index - 1];
-    prevLayer.splitMLp(layer);
-    layers.splice(index, 1);
+    layer.parent = this;
+    this.getLayers().push(layer);
   }
 
   updateBorders() {
@@ -41,8 +50,8 @@ class Schema extends Draggable {
       firstY = height,
       lastY = 0;
 
-    for (let i = 0; i < this.layers.length; i++) {
-      const layer = this.layers[i];
+    for (let i = 0; i < this.getLayers().length; i++) {
+      const layer = this.getLayers()[i];
 
       lastX = Math.max(layer.x, lastX);
       firstX = Math.min(layer.x, firstX);
@@ -56,15 +65,15 @@ class Schema extends Draggable {
   }
 
   handlePressed() {
-    this.layers.forEach((layer) => {
+    this.getLayers().forEach((layer) => {
       layer.handlePressed();
     });
     if (organizer.getDragActive()) return;
     this.pressed();
   }
 
   resetCoordinates() {
-    const layers = this.layers;
+    const layers = this.getLayers();
     const originLayer = layers[0];
 
     layers.forEach((layer, index) => {
@@ -81,14 +90,14 @@ class Schema extends Draggable {
   }
 
   handleReleased() {
-    this.layers.forEach((layer) => {
+    this.getLayers().forEach((layer) => {
       layer.released();
     });
     this.released();
   }
 
   handleDoubleClicked() {
-    this.layers.forEach((layer) => layer.doubleClicked());
+    this.getLayers().forEach((layer) => layer.doubleClicked());
   }
 
   show() {
@@ -101,8 +110,8 @@ class Schema extends Draggable {
   }
 
   draw() {
-    this.layers.forEach((layer) => layer.draw());
-    this.layers.length > 1 && this.show();
+    this.getLayers().forEach((layer) => layer.draw());
+    this.getLayers().length > 1 && this.show();
 
     !organizer.getDragActive() && this.over();
 

diff --git a/js/Draw/canvasButton.js b/js/Draw/canvasButton.js
@@ -9,8 +9,13 @@ class CanvasButton {
     this.img = image;
   }
 
-  changeImg(img) {
-    this.img = img;
+  destroy() {
+    this.onClick = null;
+    this.img = null;
+  }
+
+  changeImg(imgKey) {
+    this.img = organizer.getImageByKey(imgKey);
   }
 
   setCoordinates(x, y) {

diff --git a/js/MLP/Layer.js b/js/MLP/Layer.js
@@ -4,22 +4,6 @@ class Layer {
     this.neurons = Array.from({ length: nout }, () => new Neuron(nin));
   }
 
-  changeNin(nin) {
-    this.nin = nin;
-    this.neurons = Array.from(
-      { length: this.neurons.length },
-      () => new Neuron(nin),
-    );
-  }
-
-  addNeuron() {
-    this.neurons.push(new Neuron(this.nin));
-  }
-
-  popNeuron() {
-    this.neurons.pop();
-  }
-
   call(x) {
     let outs = this.neurons.map((neuron) => neuron.call(x));
     return outs.length === 1 ? outs[0] : outs;

diff --git a/js/MLP/MLP.js b/js/MLP/MLP.js
@@ -1,18 +1,8 @@
 class MLP {
   constructor(layers = []) {
-    this.id = organizer.getNextId();
     this.layers = layers;
   }
 
-  addLayer(layer) {
-    this.layers.push(layer);
-  }
-
-  removeLayer(layer) {
-    let indexToRemove = this.layers.findIndex((l) => l === layer);
-    this.layers.splice(indexToRemove, 1);
-  }
-
   predict(x) {
     let output = x;
     this.layers.forEach((layer) => {

diff --git a/js/MLP/Neuron.js b/js/MLP/Neuron.js
@@ -8,14 +8,6 @@ class Neuron {
     this.act_func = ActivationFunction.TANH;
   }
 
-  addWeight() {
-    this.w.push(new Value(Math.random() * 2 - 1));
-  }
-
-  popWeight() {
-    this.w.pop();
-  }
-
   call(x) {
     let act = this.b;
     for (let i = 0; i < this.w.length; i++) {