0.3.8: LABELS! Now you can add labels

README.md

@@ -12,6 +12,10 @@ To be decided, but at this moment this code is open source and free to use for n
 
 ## Changelog
 
+### 0.3.8
+
+* Added labels!  You can specify the text, size, and color
+
 ### 0.3.7
 
 * Added 4 bit display!  Currently shows hex format

js/baseclasses.js

@@ -177,6 +177,9 @@ class elementContainer {
         case "string":
           contentString += '<input type="text" id="prop_' + this.Selected.Properties[a].Name + '" minlength="' + this.Selected.Properties[a].Minimium + '" maxlength="' + this.Selected.Properties[a].Maximium + '" value="' + this.Selected.Properties[a].CurrentValue + '" onchange="logicEngine.PropertyChange(' + String.fromCharCode(39) + this.Selected.Properties[a].Name +  String.fromCharCode(39) + ');">';
           break;
+        case "color":
+          contentString += '<input type="color" id="prop_' + this.Selected.Properties[a].Name + '" value="' + this.Selected.Properties[a].CurrentValue + '" onchange="logicEngine.PropertyChange(' + String.fromCharCode(39) + this.Selected.Properties[a].Name +  String.fromCharCode(39) + ');">';
+          break;
       }
       contentString += "</td></tr>";
     }

js/elements.js

@@ -6,12 +6,14 @@ let ElementCategory_LOGIC  = new ElementCatalog_Category("Logic" ,"");
 let ElementCategory_FlipFlop  = new ElementCatalog_Category("Flip-Flops" ,"");
 let ElementCategory_Timing = new ElementCatalog_Category("Timing" ,"");
 let ElementCategory_ICs    = new ElementCatalog_Category("ICs" ,"");
+let ElementCategory_Other    = new ElementCatalog_Category("Other" ,"");
 let elementCatalog = new ElementCatalog([ElementCategory_Inputs,
                                                    ElementCategory_Outputs,
                                                    ElementCategory_LOGIC,
                                                    ElementCategory_FlipFlop,
                                                    ElementCategory_Timing,
-                                                   ElementCategory_ICs]);
+                                                   ElementCategory_ICs,
+                                                   ElementCategory_Other]);
 class ElementProperty {
   constructor(name,type,callback,defaultValue,currentValue = false,values=false,min=0,max=12) {
     /*
@@ -396,6 +398,57 @@ class Element extends CanvasTools {
 
 }
 
+class LabelElement extends Element {
+  constructor(RestoreData = null,logicengine) {
+    super(RestoreData,logicengine,0);
+    this.removeProperty("Inputs");
+    this.Name = "Label";
+    this.Font = "48px Console";
+    this.FontStyle = "black";
+    this.Label = this.Name;
+    let LabelProperty = new ElementProperty("Label","string",{CBObject: this,CBFunction: "setLabel"},"Label","Label",false,1,255);
+    this.Properties.push(LabelProperty);
+    let LabelSize = new ElementProperty("Size","int",{CBObject: this,CBFunction: "setSize"},"48","48",false,6,99999);
+    this.Properties.push(LabelSize);
+    let LabelColor = new ElementProperty("Color","color",{CBObject: this,CBFunction: "setColor"},"#000000","#000000",false,0,0);
+    this.Properties.push(LabelColor);
+
+    if (RestoreData) {
+      this.Label = RestoreData.Properties[0].CurrentValue;
+      this.Font = RestoreData.Properties[1].CurrentValue + "px Console";
+      this.FontStyle = RestoreData.Properties[2].CurrentValue;
+    }
+
+    let textWidth = this.textSize(logicengine.Ctx,this.Label,this.Font);
+    this.Width = textWidth.width;
+    this.Height = textWidth.height;
+
+  }
+  setLabel(label) {
+    this.Label = label;
+    this.Properties[0].CurrentValue = label;
+  }
+  setSize(size) {
+    this.Font = size + "px Console";
+    this.Properties[1].CurrentValue = size;
+  }
+
+  setColor(color) {
+    this.FontStyle = color;
+    this.Properties[2].CurrentValue = color;
+  }
+  drawElement(x, y, ctx) {
+    let textWidth = this.textSize(ctx,this.Label,this.Font);
+    this.Width = textWidth.width;
+    this.Height = textWidth.height;
+    this.drawTextCentered(ctx,x,y,textWidth.width,textWidth.height,this.Label,this.Font,this.FontStyle);
+  }
+}
+let ElementCatalog_Label = new ElementCatalog_Element("Label","Allows you to place a label","abc",LabelElement,[]);
+ElementReferenceTable.push(ElementCatalog_Label);
+ElementCategory_Other.addElement(ElementCatalog_Label);
+
+
 class ICInput extends Element {
   setPinName(pinname) {
     // Dont actually need it to do anything

js/main.js

@@ -2,7 +2,7 @@
     MatCat BrowserLogic Simulator
  */
 
-let Version = "0.3.7";
+let Version = "0.3.8";
 let spanVersion = document.getElementById("version");
 spanVersion.innerText = Version;
 // get the canvas and get the engine object going