Initial version of logic circuit editor

circuit-editor.js

@@ -0,0 +1,97 @@
+/**
+ * Created by ville on 30/06/14.
+ */
+var JSAVCircuitEditor = function(jsav) {
+  this.jsav = jsav;
+  this.circuit = jsav.logicCircuit({width: $(".jsavcanvas").width() + "px", height: $(".jsavcanvas").height() + "px"});
+  this.initToolbar();
+};
+var editorproto = JSAVCircuitEditor.prototype;
+editorproto.initToolbar = function() {
+  $(".addNot").click(function() {
+    var comp = this.circuit.notComponent();
+    this.setInteractive(comp);
+  }.bind(this));
+  $(".addAnd").click(function() {
+    var comp = this.circuit.andComponent();
+    this.setInteractive(comp);
+  }.bind(this));
+  $(".addNand").click(function() {
+    var comp = this.circuit.nandComponent();
+    this.setInteractive(comp);
+  }.bind(this));
+  $(".addOr").click(function() {
+    var comp = this.circuit.orComponent();
+    this.setInteractive(comp);
+  }.bind(this));
+  $(".addNor").click(function() {
+    var comp = this.circuit.norComponent();
+    this.setInteractive(comp);
+  }.bind(this));
+};
+editorproto.setInteractive = function(comp) {
+  var x, y,
+    self = this;
+  comp.element.draggable({
+    start: function() {
+      self.circuit.clearFeedback();
+    },
+    drag: function() {
+      comp.layout();
+    }
+  });
+  var elemWidth = comp.element.outerWidth(),
+    elemHeight = comp.element.outerHeight(),
+    canvasOffset = $(".jsavcontainer").offset();;
+  console.log(comp, comp._outputElement);
+  comp._outputElement.draggable({
+    revert: true,
+    helper: "clone",
+    start: function(evt, ui) {
+      var offset = comp.element.offset();
+      x = offset.left - canvasOffset.left + elemWidth;
+      y = offset.top - canvasOffset.top + (elemHeight/2.0);
+      self.path = jsav.g.path("M" + x + " " + y + " Q" + x + " " + y + " " + x + " " + y);
+      self.path.addClass("jsav-circuit-connector jsav-circuit-unconnected");
+      self.circuit.clearFeedback();
+    },
+    drag: function(evt, ui) {
+      var newX = ui.offset.left - canvasOffset.left + ui.helper.outerWidth()/2.0,
+        newY = ui.offset.top - canvasOffset.top + ui.helper.outerHeight()/2.0;
+      self.path.path("M" + x + " " + y + // move to the starting point
+        " C" + (x + newX)/2.0 + " " + y + // cubic bezier, first control point
+        " " + (x + newX)/2.0 + " " + newY + // cubic bezier, second control point
+        " " + newX + " " + newY); // cubix bezier, end point
+    },
+    stop: function(evt, ui) {
+      console.log("stopped dragging", self.selected);
+      if (!self.selected) {
+        self.path.element.remove();
+      } else {
+        // connect the components in real life
+        self.selected.inputComponent(self.pos, comp);
+        //comp.outputComponent(selected, path);
+        self.path.clear();
+      }
+      self.path = null;
+      self.selected = null;
+    }.bind(this)});
+  comp.element.find(".jsav-circuit-input").on({
+    mouseover: function() {
+      $(this).addClass("over");
+      console.log($(this).hasClass("over"), self.path);
+      if (self.path) {
+        self.selected = comp;
+        self.pos = $(this).data("pos");
+        self.path.removeClass("jsav-circuit-unconnected");
+      }
+    },
+    mouseout: function() {
+      $(this).removeClass("over");
+      if (self.path) {
+        self.selected = null;
+        self.path.addClass("jsav-circuit-unconnected");
+      }
+    }
+  });
+};

circuits.css

@@ -0,0 +1,112 @@
+.jsav-circuit {
+  width: 100%;
+  height: 100%;
+}
+.jsav-circuit-component {
+  min-width: 150px;
+  min-height: 100px;
+  position: absolute;
+  cursor: move;
+}
+.jsav-circuit-component .jsavlabel {
+  position: absolute;
+  top: 40%;
+  left: 25%;
+  margin: 0;
+}
+.jsav-circuit-output-component .jsavlabel,
+.jsav-circuit-input-component .jsavlabel {
+  font-size: 200%;
+  top: 28%;
+}
+.jsav-circuit-output-component .jsavlabel {
+  left: 48%;
+}
+.jsav-circuit-input-component .jsavlabel {
+  left: 18%;
+}
+
+.jsav-circuit-component path,
+.jsav-circuit-component rect,
+.jsav-circuit-component circle {
+  stroke-width: 3;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.jsav-circuit-input-component,
+.jsav-circuit-output-component {
+  min-width: 80px;
+  min-height: 80px;
+}
+
+.jsav-circuit-input.jsav-circuit-value-false:before,
+.jsav-circuit-input.jsav-circuit-value-true:before,
+.jsav-circuit-output.jsav-circuit-value-false:before,
+.jsav-circuit-output.jsav-circuit-value-true:before {
+  display: block;
+  position: absolute;
+  top: -15px;
+  font-size: 1.2em;
+}
+.jsav-circuit-output.jsav-circuit-value-false:before,
+.jsav-circuit-output.jsav-circuit-value-true:before {
+  right: -15px;
+}
+.jsav-circuit-input.jsav-circuit-value-false:before,
+.jsav-circuit-input.jsav-circuit-value-true:before {
+  left: -15px;
+}
+.jsav-circuit-input.jsav-circuit-value-true:before,
+.jsav-circuit-output.jsav-circuit-value-true:before {
+  content: "1";
+}
+.jsav-circuit-input.jsav-circuit-value-false:before,
+.jsav-circuit-output.jsav-circuit-value-false:before {
+  content: "0";
+}
+.jsav-not.jsavhighlight path.componentbody {
+  fill: yellow;
+}
+.jsavedge {
+  stroke: #333;
+  stroke-width: 1px;
+}
+.jsav-circuit-input, .jsav-circuit-output {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: absolute;
+  border: 2px solid #333;
+  background-color: #fff;
+  z-index: 200;
+}
+.jsav-circuit-output {
+  right: -10px;
+  top: calc(50% - 10px);
+}
+.jsav-circuit-output:hover {
+  cursor: hand;
+}
+.jsav-circuit-input {
+  left: -10px;
+}
+.jsav-circuit-output:hover, .jsav-circuit-input.over {
+  box-shadow: 0 0 10px green;
+}
+.jsav-circuit-input.jsav-circuit-missing {
+  border-color: red;
+  box-shadow: 0 0 10px red;
+}
+.jsav-circuit-output.ui-draggable-dragging {
+  border: none;
+  background-color: transparent;
+  z-index: 0 !important;
+}
+.jsav-circuit-connector {
+  stroke-width: 5px;
+  stroke: #aaf;
+}
+.jsav-circuit-unconnected {
+  stroke: #faa;
+}