Created new dilution component

index.html

@@ -47,6 +47,12 @@
             </div>
 
             <div class="button_row">
+                <a id = "dilution_buttom" class = "mdl-button mdl-js-button
+                7 mdl-js-ripple-effect mdl-button--raised feature-button">Mixer</a>
+                <button id = "dilution_params_buttom" class = "params-button-mdl-buttom mdl-js-button mdl-button--icon">
+                    <i class = "material-icons">settings</i>
+                </button>
+
                 <a id="edit_border_button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised feature-button">
                     Edit Border</a>
             </div>

src/app/featureSets/featureSet.js

@@ -46,6 +46,7 @@ import Node from "../library/node";
 import DropletGeneratorT from "../library/dropletGeneratorT";
 import DropletGeneratorFlowFocus from "../library/dropletGeneratorFlowFocus";
 import LogicArray from "../library/logicArray";
+import Dilution from "../library/dilution"; 
 
 export default class FeatureSet {
     constructor(definitions, tools, render2D, render3D, setString) {
@@ -123,7 +124,9 @@ export default class FeatureSet {
             DropletGenFlow: { object: new DropletGeneratorFlowFocus(), key: null },
             LogicArray: { object: new LogicArray(), key: "FLOW" },
             LogicArray_control: { object: new LogicArray(), key: "CONTROL" },
-            LogicArray_cell: { object: new LogicArray(), key: "CELL" }
+            LogicArray_cell: { object: new LogicArray(), key: "CELL" },
+            "Dilution": {object: new Dilution(), key: "FLOW"},
+            "Dilution_control": {object: new Dilution(), key: "CONTROL"}
         };
 
         // this.__checkDefinitions();

src/app/library/dilution.js

@@ -0,0 +1,134 @@
+import Template from "./template"; 
+import paper from "paper"; 
+
+export default class Dilution extends Template{
+    constructor() {
+        super(); 
+    }
+
+    __setupDefinitions() {
+        this.__unique = {
+            position: "Point"
+        }; 
+
+        this.__heritable = {
+            componentSpacing: "Float" ,
+            channelWidth: "Float",
+            length: "Float" ,
+            width: "Float" ,
+            height:  "Float"
+        }
+
+        this.__defaults = {
+            // see if any additional values need to be added 
+            componentSpacing: 1000, 
+            channelWidth: 0.8*1000, 
+            length: 4.92 * 1000, 
+            width: 1.23 * 1000, 
+            height: 250
+        }
+
+        this.__units = {
+            componentSpacing: "μm", 
+            channelWidth: "μm",
+            length: "μm",
+            width: "μm",
+            height: "μm"
+
+        }
+
+        this.__minimum = {
+            componentSpacing: 0,
+            channelWidth: 10,
+            width: 30,
+            length: 120,
+            height: 10
+
+        }
+
+        this.__maximum = {
+            componentSpacing: 10000,
+            channelWidth: 2000,
+            width: 6000,
+            length: 24 * 1000,
+            height: 1200
+
+        }
+
+        this.__placementTool = "componentPositionTool"
+
+        this.__toolParams = {
+            position: "position" 
+        }
+
+        this.__featureParams = {
+            componentSpacing: "componentSpacing",
+            position: "position",
+            channelWidth: "channelWidth",
+            length: "length",
+            width: "width"
+        }
+
+        this.__targetParams = {
+            componentSpacing: "componentSpacing",
+            channelWidth: "channelWidth",
+            length: "length",
+            width: "width",
+
+        }
+
+        this.__renderKeys = ["FLOW"]; 
+
+        this.__mind = "DILUTION"; 
+    }
+
+    getPorts(params) {
+        let length = params["length"]
+        let ports = []; 
+        // idk what needs to be pushed ?? aka size of component ports 
+        ports.push(new ComponentPort(0, - length/2, "1", "FLOW"));
+        ports.push(new ComponentPort(0, length/2, "2", "FLOW"));
+
+        return ports;
+    }
+
+    render2D(params, key) {
+        // drawing, user paper library 
+        let position = params["position"]; 
+        let px = position[0]; 
+        let py = position[1]; 
+        let color = params["color"]; 
+        let cw = params["channelWidth"]; 
+        let l = params["length"]; 
+        let w = params["width"]; 
+        let p0, p1, p2, p3, p4, p5; 
+
+        // create points to add to 2D render 
+        p0 = [px - cw / 2, py - l / 2];
+        p1 = [px + cw / 2, py - l / 2];
+        p2 = [px + w + cw / 2, py];
+        p3 = [px + cw / 2, py + l / 2];
+        p4 = [px - cw / 2, py + l / 2];
+        p5 = [px - cw / 2 - w, py];
+
+        let hex = new paper.Path(); 
+        hex.add(new paper.Point(p0)); 
+        hex.add(new paper.Point(p1)); 
+        hex.add (new paper.Point(p2)); 
+        hex.add (new paper.Point(p3)); 
+        hex.add (new paper.Point(p4)); 
+        hex.add (new paper.Point(p5)); 
+
+        hex.closed = true; 
+        hex.fillColor = color; 
+
+        return hex; 
+    }
+
+    render2DTarget(key, params) {
+        let render = this.render2D(params, key); 
+        render.fillColor.alpha = 0.5; 
+        return render; 
+    }
+
+}

src/app/view/ui/componentToolBar.js

@@ -64,6 +64,7 @@ export default class ComponentToolBar {
         this.__dropletgenTButton = document.getElementById("dropletgenT_button");
         this.__dropletgenFlowButton = document.getElementById("dropletgenFlow_button");
         this.__logicarrayButton = document.getElementById("logicarray_button");
+        this.__dilutionButtom = document.getElementById("dilution_buttom"); 
 
         //Create all the parameter menu buttons
 
@@ -115,6 +116,7 @@ export default class ComponentToolBar {
         this.__dropletgenTParams = document.getElementById("dropletgenT_params_button");
         this.__dropletgenFlowParams = document.getElementById("dropletgenFlow_params_button");
         this.__logicarrayParams = document.getElementById("logicarray_params_button");
+        this.__dilutionParams = document.getElementById("dilution_params_buttom"); 
 
         this.buttons = {
             SelectButton: this.__selectToolButton,
@@ -164,7 +166,8 @@ export default class ComponentToolBar {
             CapacitanceSensor: this.__capacitancesensorButton,
             DropletGenT: this.__dropletgenTButton,
             DropletGenFlow: this.__dropletgenFlowButton,
-            LogicArray: this.__logicarrayButton
+            LogicArray: this.__logicarrayButton,
+            "Dilution": this.__dilutionButton
         };
 
 
@@ -475,6 +478,13 @@ export default class ComponentToolBar {
             ref.setActiveButton("LogicArray");
             ref.__viewManagerDelegate.switchTo2D();
         };
+
+        this.__dilutionButton.onclick = function() {
+            Registry.viewManager.activateTool("dilution"); 
+
+            ref.setActiveButton("dilution"); 
+            ref.__viewManagerDelegate.switchTo2D(); 
+        }; 
     }
 
     setActiveButton(feature) {
@@ -541,6 +551,7 @@ export default class ComponentToolBar {
         this.__dropletgenTParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("DropletGenT", "Basic");
         this.__dropletgenFlowParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("DropletGenFlow", "Basic");
         this.__logicarrayParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("LogicArray", "Basic");
+        this.__dilutionParams.onclick = ComponentToolBar.getParamsWindowCallbackFunction("dilution", "Basic"); 
     }
 
     static getParamsWindowCallbackFunction(typeString, setString, isTranslucent = false) {

src/app/view/viewManager.js

@@ -1292,6 +1292,7 @@ export default class ViewManager {
         this.tools["DropletGenT"] = new ComponentPositionTool("DropletGenT", "Basic");
         this.tools["DropletGenFlow"] = new ComponentPositionTool("DropletGenFlow", "Basic");
         this.tools["LogicArray"] = new ControlCellPositionTool("LogicArray", "Basic");
+        this.tools["dilution"] = new MultilayerPositionTool("dilution", "Basic"); 
     }
 
     /**