Adding Aspirator, Shaker, and Magnetic Block Components to Library

index.html

@@ -327,6 +327,24 @@
                     <i class="material-icons">settings</i>
                 </button>
             </div>
+            <div class="button_row">
+                <a id="aspirator_button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised feature-button">Aspirator</a>
+                <button id="aspirator_params_button" class="params-button mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">settings</i>
+                </button>
+            </div>
+            <div class="button_row">
+                <a id="shaker_button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised feature-button">Shaker</a>
+                <button id="shaker_params_button" class="params-button mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">settings</i>
+                </button>
+            </div>
+            <div class="button_row">
+                <a id="magneticblock_button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised feature-button">Magnetic Block</a>
+                <button id="magneticblock_params_button" class="params-button mdl-button mdl-js-button mdl-button--icon">
+                    <i class="material-icons">settings</i>
+                </button>
+            </div>
         </nav>
         <span class="mdl-layout-title">Distribute</span>
 

src/app/featureSets/featureSet.js

@@ -46,6 +46,9 @@ import Node from "../library/node";
 import DropletGeneratorT from "../library/dropletGeneratorT";
 import DropletGeneratorFlowFocus from "../library/dropletGeneratorFlowFocus";
 import LogicArray from "../library/logicArray";
+import Aspirator from "../library/aspirator";
+import Shaker from "../library/shaker";
+import MagneticBlock from "../library/magneticBlock";
 
 export default class FeatureSet {
     constructor(definitions, tools, render2D, render3D, setString) {
@@ -123,7 +126,10 @@ 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" },
+            Aspirator: { object: new Aspirator(), key: null },
+            Shaker: { object: new Shaker(), key: null },
+            MagneticBlock: { object: new MagneticBlock(), key: null }
         };
 
         // this.__checkDefinitions();

src/app/library/aspirator.js

@@ -0,0 +1,117 @@
+import Template from "./template";
+import paper from "paper";
+import ComponentPort from "../core/componentPort";
+
+export default class Aspirator extends Template {
+    constructor() {
+        super();
+    }
+
+    __setupDefinitions() {
+        this.__unique = {
+            position: "Point"
+        };
+
+        this.__heritable = {
+            componentSpacing: "Float",
+            length: "Float",
+            width: "Float",
+            rotation: "Float",
+            height: "Float"
+        };
+
+        this.__defaults = {
+            componentSpacing: 1000,
+            length: 5000,
+            width: 4000,
+            rotation: 0,
+            height: 250
+        };
+
+        this.__units = {
+            componentSpacing: "μm",
+            length: "μm",
+            width: "μm",
+            rotation: "°",
+            height: "μm"
+        };
+
+        this.__minimum = {
+            componentSpacing: 0,
+            length: 10,
+            width: 10,
+            rotation: 0,
+            height: 10
+        };
+
+        this.__maximum = {
+            componentSpacing: 10000,
+            length: 10000,
+            width: 8000,
+            rotation: 360,
+            height: 1200
+        };
+
+        this.__placementTool = "componentPositionTool";
+
+        this.__toolParams = {
+            cursorPosition: "position"
+        };
+
+        this.__featureParams = {
+            componentSpacing: "componentSpacing",
+            position: "position",
+            length: "length",
+            width: "width",
+            height: "height",
+            rotation: "rotation"
+        };
+
+        this.__targetParams = {
+            componentSpacing: "componentSpacing",
+            length: "length",
+            width: "width",
+            height: "height",
+            rotation: "rotation",
+            position: "position"
+        };
+
+        this.__renderKeys = ["FLOW"];
+
+        this.__mint = "ASPIRATOR";
+    }
+
+    render2D(params, key) {
+        let position = params["position"];
+        let px = position[0];
+        let py = position[1];
+        let l = params["length"];
+        let w = params["width"];
+        let rotation = params["rotation"];
+        let color = params["color"];
+
+        let rendered = new paper.CompoundPath();
+
+        let recBody = new paper.Path.Rectangle({
+            point: new paper.Point(px - w, py - l),
+            size: [w, l],
+        });
+
+        let recSpout = new paper.Path.Rectangle({
+            point: new paper.Point(px - w * 0.75, py - 1.5 * l),
+            size: [w / 2, l / 2],
+        });
+
+        rendered.addChild(recBody);
+        rendered.addChild(recSpout);
+
+        rendered.fillColor = color;
+        return rendered.rotate(rotation, px, py);
+    }
+
+    render2DTarget(key, params) {
+        let render = this.render2D(params, key);
+        render.fillColor.alpha = 0.5;
+        return render;
+    }
+}

src/app/library/magneticBlock.js

@@ -0,0 +1,117 @@
+import Template from "./template";
+import paper from "paper";
+import ComponentPort from "../core/componentPort";
+
+export default class MagneticBlock extends Template {
+    constructor() {
+        super();
+    }
+
+    __setupDefinitions() {
+        this.__unique = {
+            position: "Point"
+        };
+
+        this.__heritable = {
+            componentSpacing: "Float",
+            length: "Float",
+            width: "Float",
+            rotation: "Float",
+            height: "Float"
+        };
+
+        this.__defaults = {
+            componentSpacing: 1000,
+            length: 5000,
+            width: 4000,
+            rotation: 0,
+            height: 250
+        };
+
+        this.__units = {
+            componentSpacing: "μm",
+            length: "μm",
+            width: "μm",
+            rotation: "°",
+            height: "μm"
+        };
+
+        this.__minimum = {
+            componentSpacing: 0,
+            length: 10,
+            width: 10,
+            rotation: 0,
+            height: 10
+        };
+
+        this.__maximum = {
+            componentSpacing: 10000,
+            length: 10000,
+            width: 8000,
+            rotation: 360,
+            height: 1200
+        };
+
+        this.__placementTool = "componentPositionTool";
+
+        this.__toolParams = {
+            cursorPosition: "position"
+        };
+
+        this.__featureParams = {
+            componentSpacing: "componentSpacing",
+            position: "position",
+            length: "length",
+            width: "width",
+            height: "height",
+            rotation: "rotation"
+        };
+
+        this.__targetParams = {
+            componentSpacing: "componentSpacing",
+            length: "length",
+            width: "width",
+            height: "height",
+            rotation: "rotation",
+            position: "position"
+        };
+
+        this.__renderKeys = ["FLOW"];
+
+        this.__mint = "MAGNETICBLOCK";
+    }
+
+    render2D(params, key) {
+        let position = params["position"];
+        let px = position[0];
+        let py = position[1];
+        let l = params["length"];
+        let w = params["width"];
+        let rotation = params["rotation"];
+        let color = params["color"];
+
+        let rendered = new paper.CompoundPath();
+
+        let recBody = new paper.Path.Rectangle({
+            point: new paper.Point(px - w, py - l),
+            size: [w, l],
+        });
+
+        let recSpout = new paper.Path.Rectangle({
+            point: new paper.Point(px - w * 0.75, py - l),
+            size: [w / 2, l * 2],
+        });
+
+        rendered.addChild(recBody);
+        rendered.addChild(recSpout);
+
+        rendered.fillColor = color;
+        return rendered.rotate(rotation, px, py);
+    }
+
+    render2DTarget(key, params) {
+        let render = this.render2D(params, key);
+        render.fillColor.alpha = 0.5;
+        return render;
+    }
+}