0.4.11: Copy and Paste, added PRE and CLR (active low) inputs to flipflops

README.md

@@ -14,6 +14,11 @@ LZ-String, Copyright 2013 pieroxy under MIT license https://github.com/pieroxy/l
 
 ## Changelog
 
+### 0.4.11
+
+* Copy and Paste, note that Paste in the menu may not work on some browsers because of security permissions, but standard keyboard shortcuts will work.
+* Added !PRE and !CLR to flipflops, these are ACTIVE LOW inputs so you must make them high to use the flipflop.
+
 ### 0.4.10
 
 * Draw optimizations, the drawing loop has been considerably optimized.

index.html

@@ -52,9 +52,9 @@
               <li id="tfm_Undo" value="EditUndo" class="disabled" title="Feature coming soon">Undo</li>
               <li id="tfm_Redo" value="EditRedo" class="disabled" title="Feature coming soon">Redo</li>
               <li class="tfm_seperator"></li>
-              <li id="tfm_Cut" class="disabled" title="Feature coming soon">Cut</li>
+              <li id="tfm_Cut" value="Cut">Cut</li>
-              <li id="tfm_Copy" class="disabled" title="Feature coming soon">Copy</li>
+              <li id="tfm_Copy" value="Copy">Copy</li>
-              <li id="tfm_Paste" class="disabled" title="Feature coming soon">Paste</li>
+              <li id="tfm_Paste" value="Paste">Paste</li>
               <li class="tfm_seperator"></li>
               <li id="tfm_Delete" value="DeleteElements" class="disabled">Delete</li>
               <li id="tfm_Disconnect" value="DisconnectElements" class="disabled">Disconnect</li>

js/elements/BasicElements.js

@@ -51,7 +51,7 @@ class LogicNAND extends LogicAND {
   constructor(_Container, RestoreData = null, logicengine,Inputs) {
     super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "NAND";
-    this.Width = this.Width + 10;
+    this.Width = 110;
   }
 
   getOutput(Output=0) {
@@ -162,7 +162,7 @@ class LogicNOR extends LogicOR {
   constructor(_Container, RestoreData = null, logicengine,Inputs) {
     super(_Container, RestoreData,logicengine,Inputs);
     this.Name = "NOR";
-    this.Width = this.Width + 10;
+    this.Width = 110;
   }
   getOutput(Output=0) {
     if (super.getOutput() === 0) return false;
@@ -289,7 +289,7 @@ class LogicXNOR extends Element {
     super(_Container, RestoreData,logicengine,2); // Only 2 inputs on XOR
     this.Name = "XNOR";
     this.removeProperty("Inputs");
-    this.Width += 10;
+    this.Width = 110;
   }
 
   getOutput(Output=0) {
@@ -368,7 +368,7 @@ class LogicNOT extends Element {
     super(_Container, RestoreData,logicengine,1); // Only 1 inputs on NOT
     this.Name = "NOT";
     this.removeProperty("Inputs");
-    this.Width += 10;
+    this.Width = 110;
   }
 
   getOutput(Output=0) {

js/elements/FFElements.js

@@ -1,12 +1,12 @@
 class FlipFlopJK extends Element {
   constructor(_Container, RestoreData = null, logicengine) {
-    super(_Container, RestoreData,logicengine,3);
+    super(_Container, RestoreData,logicengine,5);
     this.Name = "JK-FF";
     this.Outputs = new Array(2);
-    this.InputLabels = new Array("J","CLK","K");
+    this.InputLabels = new Array("J","CLK","K","!PRE", "!CLR");
     this.OutputLabels = new Array("Q","~Q");
     this.removeProperty("Inputs");
-    this.Height = 80;
+    this.Height = 140;
 
     if (RestoreData) {
       this.Outputs = RestoreData.OutputStates;
@@ -43,6 +43,14 @@ class FlipFlopJK extends Element {
         this.Outputs[1] = !this.Outputs[0];
       }
     }
+    if (!this.Inputs[3]) {
+      this.Outputs[0] = true;
+      this.Outputs[1] = false;
+    }
+    if (!this.Inputs[4]) {
+      this.Outputs[0] = false;
+      this.Outputs[1] = true;
+    }
     if (oldOutput != this.getOutput(0) || oldOutput2 != this.getOutput(1)) {
       this.setConnections();
     }
@@ -71,13 +79,13 @@ ElementCategory_FlipFlop.addElement(ElementCatalog_JKFlipFlop);
 
 class FlipFlopSR extends Element {
   constructor(_Container, RestoreData = null, logicengine) {
-    super(_Container, RestoreData,logicengine,3);
+    super(_Container, RestoreData,logicengine,5);
     this.Name = "SR-FF";
     this.Outputs = new Array(2);
-    this.InputLabels = new Array("S","CLK","R");
+    this.InputLabels = new Array("S","CLK","R","!PRE", "!CLR");
     this.OutputLabels = new Array("Q","~Q");
     this.removeProperty("Inputs");
-    this.Height = 80;
+    this.Height = 140;
 
     if (RestoreData) {
       this.Outputs = RestoreData.OutputStates;
@@ -111,6 +119,15 @@ class FlipFlopSR extends Element {
         this.Outputs[1] = false;
       }
     }
+
+    if (!this.Inputs[3]) {
+      this.Outputs[0] = true;
+      this.Outputs[1] = false;
+    }
+    if (!this.Inputs[4]) {
+      this.Outputs[0] = false;
+      this.Outputs[1] = true;
+    }
     if (oldOutput != this.getOutput(0) || oldOutput2 != this.getOutput(1)) {
       this.setConnections();
     }
@@ -139,13 +156,13 @@ ElementCategory_FlipFlop.addElement(ElementCatalog_SRFlipFlop);
 
 class FlipFlopT extends Element {
   constructor(_Container, RestoreData = null, logicengine) {
-    super(_Container, RestoreData,logicengine,2);
+    super(_Container, RestoreData,logicengine,4);
     this.Name = "T-FF";
     this.Outputs = new Array(2);
-    this.InputLabels = new Array("T","CLK");
+    this.InputLabels = new Array("T","CLK","!PRE","!CLR");
     this.OutputLabels = new Array("Q","~Q");
     this.removeProperty("Inputs");
-    this.Height = 80;
+    this.Height = 120;
 
     if (RestoreData) {
       this.Outputs = RestoreData.OutputStates;
@@ -172,6 +189,16 @@ class FlipFlopT extends Element {
       this.Outputs[0] = !this.Outputs[0];
       this.Outputs[1] = !this.Outputs[0];
     }
+
+    if (!this.Inputs[2]) {
+      this.Outputs[0] = true;
+      this.Outputs[1] = false;
+    }
+    if (!this.Inputs[3]) {
+      this.Outputs[0] = false;
+      this.Outputs[1] = true;
+    }
+
     if (oldOutput != this.getOutput(0) || oldOutput2 != this.getOutput(1)) {
       this.setConnections();
     }
@@ -200,13 +227,13 @@ ElementCategory_FlipFlop.addElement(ElementCatalog_TFlipFlop);
 
 class FlipFlopD extends Element {
   constructor(_Container, RestoreData = null, logicengine) {
-    super(_Container, RestoreData,logicengine,2);
+    super(_Container, RestoreData,logicengine,4);
     this.Name = "D-FF";
     this.Outputs = new Array(2);
-    this.InputLabels = new Array("D","CLK");
+    this.InputLabels = new Array("D","CLK","!PRE","!CLR");
     this.OutputLabels = new Array("Q","~Q");
     this.removeProperty("Inputs");
-    this.Height = 80;
+    this.Height = 120;
 
     if (RestoreData) {
       this.Outputs = RestoreData.OutputStates;
@@ -234,6 +261,14 @@ class FlipFlopD extends Element {
       this.Outputs[0] = this.Inputs[0];
       this.Outputs[1] = !this.Outputs[0];
     }
+    if (!this.Inputs[2]) {
+      this.Outputs[0] = true;
+      this.Outputs[1] = false;
+    }
+    if (!this.Inputs[3]) {
+      this.Outputs[0] = false;
+      this.Outputs[1] = true;
+    }
     if (oldOutput != this.getOutput(0) || oldOutput2 != this.getOutput(1)) {
       this.setConnections();
     }

js/elements/ICElements.js

@@ -324,7 +324,7 @@ class ICElement extends Element {
   getOutput(Output = 0) {
     if (super.getOutput() === 0) return false;
     if (this.Outputs.length >= Output) {
-      return this.Outputs[Output].fromElement.getOutput(this.Outputs[Output].Input);
+      return this?.Outputs[Output]?.fromElement?.getOutput(this?.Outputs[Output]?.Input);
     }
     return false;
   }

js/globalfunctions.js

@@ -153,6 +153,24 @@ function KeybindToString(binding) {
   return kbs;
 }
 
+function GetCopyObject() {
+  if (logicEngine?.ActiveContainer?.Selected?.length > 0) {
+    let copyObject = {Paste: true,LogicParts: Version};
+    copyObject.Elements = logicEngine.ActiveContainer.Selected;
+    let copyObjectString = JSON.stringify(copyObject);
+    copyObject = JSON.parse(copyObjectString);
+    for (let a = 0; a < copyObject.Elements.length; a++) {
+      console.log("Adaptering X: " + copyObject.Elements[a].X + " to " + (copyObject.Elements[a].X + logicEngine.Panning.OffsetX));
+      console.log("Adaptering Y: " + copyObject.Elements[a].Y + " to " + (copyObject.Elements[a].Y + logicEngine.Panning.OffsetY));
+      copyObject.Elements[a].X = copyObject.Elements[a].X + logicEngine.Panning.OffsetX;
+      copyObject.Elements[a].Y = copyObject.Elements[a].Y + logicEngine.Panning.OffsetY;
+    }
+    return copyObject;
+  } else {
+    return false;
+  }
+}
+
 function BuildTopMenu() {
   // Make sure settings are set correct
   if (logicEngine.Settings.HideConnections) {
@@ -335,6 +353,116 @@ function download(filename, savestate) {
   document.body.removeChild(element);
 }
 
+function getPastedElementDesignator(map,element) {
+  for (let a = 0; a < map?.length; a++) {
+    if (map[a].Old == element) return map[a].New;
+  }
+  return false;
+}
+
+function loadActiveContainer(Elements) {
+
+  let elementConnections = new Array();
+  let icelementConnections = new Array();
+  let designatorMap = new Array();
+  let selectedObjects = new Array();
+  let lowestX = 9999999999;
+  let lowestY = 9999999999;
+  let highestX = 0;
+  let highestY = 0;
+
+  for (let a = 0; a < Elements.length; a++) {
+    if (Elements[a].IsIC) {
+      let classRef = getElementInfo(Elements[a].Name).Class;
+      if (!classRef) {
+        // We need to add this IC to the toolbox
+        let newIC = createIC(JSON.stringify(Elements[a].ICBlueprint),Elements[a].Name,Elements[a].Description);
+        //console.log("NewIC:" + newIC);
+        if (!newIC) return false;
+      }
+    }
+    let classRef = getElementInfo(Elements[a].Name).Class;
+
+    let newElement = new classRef(logicEngine.ActiveContainer,Elements[a],logicEngine,getElementInfo(Elements[a].Name).Args[0]);
+    if (newElement) selectedObjects.push(newElement);
+
+    logicEngine.ActiveContainer.AddElement(newElement);
+    newElement.X -= logicEngine.Panning.OffsetX;
+    newElement.Y -= logicEngine.Panning.OffsetY;
+
+    if (newElement.X < lowestX) lowestX = newElement.X;
+    if (newElement.X > highestX) highestX = newElement.X;
+    if (newElement.Y < lowestY) lowestY = newElement.Y;
+    if (newElement.Y > highestY) highestY = newElement.Y;
+
+    designatorMap.push({Old: Elements[a].Designator, New: newElement.Designator});
+
+    if (Elements[a].Outputs) {
+      if (Elements[a].Outputs.length > 0) {
+        for (let b=0; b < Elements[a].Outputs.length; b++) {
+          elementConnections.push({
+            FromElement: newElement,
+            Input: Elements[a].Outputs[b].Input,
+            Output: Elements[a].Outputs[b].Output,
+            ToElement: Elements[a].Outputs[b].Element
+          });
+        }
+      }
+    }
+    if (Elements[a].ICOutputs) {
+      if (Elements[a].ICOutputs.length > 0) {
+        for (let b=0; b < Elements[a].ICOutputs.length; b++) {
+          icelementConnections.push({
+            Element: newElement,
+            FromContainer: newElement.Container,
+            FromElement: Elements[a].ICOutputs[b].fromElement,
+            Input: Elements[a].ICOutputs[b].Input,
+            ToElement: Elements[a].ICOutputs[b].toElement
+          });
+        }
+      }
+    }
+  }
+
+  logicEngine.ActiveContainer.Selected = selectedObjects;
+  logicEngine.MovingElement = new Array(logicEngine.ActiveContainer.Selected.length);
+
+  for (let b = 0; b < logicEngine.ActiveContainer.Selected.length; b++) {
+    logicEngine.ActiveContainer.Selected[b].X = (logicEngine.ActiveContainer.Selected[b].X - lowestX) + logicEngine.Mouse.x - ((highestX-lowestX)/2);
+    logicEngine.ActiveContainer.Selected[b].Y = (logicEngine.ActiveContainer.Selected[b].Y - lowestY) + logicEngine.Mouse.y - ((highestY-lowestY)/2);
+    logicEngine.MovingElement[b] = {
+      StartX: logicEngine.ActiveContainer.Selected[b].X,
+      StartY: logicEngine.ActiveContainer.Selected[b].Y
+    };
+    logicEngine.MovingElementMouseStartX = logicEngine.Mouse.x;
+    logicEngine.MovingElementMouseStartY = logicEngine.Mouse.y;
+  }
+  logicEngine.MouseDown = true;
+
+  for (let a = 0; a < elementConnections.length; a++) {
+    let toElement = logicEngine.ActiveContainer.HasElement(getPastedElementDesignator(designatorMap,elementConnections[a].ToElement));
+    if (toElement) {
+      if (elementConnections[a].FromContainer) {
+        let fromElement = elementConnections[a].FromContainer.HasElement(elementConnections[a].fromElement);
+        let newConnection = new ContainerConnection(elementConnections[a].FromContainer,logicEngine.ActiveContainer,fromElement,toElement,elementConnections[a].Input);
+        elementConnections[a].Element.Outputs.push(newConnection);
+
+      } else {
+        let newConnection = new ElementConnection(logicEngine.ActiveContainer, toElement, elementConnections[a].Input, elementConnections[a].Output);
+        if (newConnection) {
+          elementConnections[a].FromElement.addConnection(logicEngine.ActiveContainer,toElement,elementConnections[a].Input, elementConnections[a].Output)
+        } else {
+          console.log("We dont have a new connection!!!");
+          console.log(toElement);
+          console.log(elementConnections[a]);
+        }
+
+      }
+    }
+  }
+
+}
+
 function loadContainer(Elements) {
   let newContainer = new elementContainer();
   let elementConnections = new Array();

js/logicengine.js

@@ -147,9 +147,9 @@ class LogicEngineSettings {
                                              Name:        "Toggle FPS",
                                              Description: "Show / Hide FPS counter",
                                              Category:    "View"},
-                        CreateIC:           {Key:         "c",    // lowercase
+                        CreateIC:           {Key:         "i",    // lowercase
                                              Alt:         false,
-                                             Shift:       false,
+                                             Shift:       true,
                                              Ctrl:        true,
                                              Meta:        false,
                                              Name:        "Create IC",
@@ -162,8 +162,31 @@ class LogicEngineSettings {
                                              Meta:        false,
                                              Name:        "Help Window",
                                              Description: "Opens help window",
-                                             Category:    "Other"}
+                                             Category:    "Other"},
-
+                        Cut:                {Key:         "x",    // lowercase
+                                             Alt:         false,
+                                             Shift:       false,
+                                             Ctrl:        true,
+                                             Meta:        false,
+                                             Name:        "Cut",
+                                             Description: "Cuts selected elements to clipboard",
+                                             Category:    "Invisible"},
+                        Copy:               {Key:         "c",    // lowercase
+                                             Alt:         false,
+                                             Shift:       false,
+                                             Ctrl:        true,
+                                             Meta:        false,
+                                             Name:        "Copy",
+                                             Description: "Copy selected elements to clipboard",
+                                             Category:    "Invisible"},
+                        Paste:              {Key:         "v",    // lowercase
+                                             Alt:         false,
+                                             Shift:       false,
+                                             Ctrl:        true,
+                                             Meta:        false,
+                                             Name:        "Paste",
+                                             Description: "pastes selected elements from clipboard",
+                                             Category:    "Invisible"}
 
                                              /*
                         keybind_name:       {Key:         "",    // lowercase
@@ -237,7 +260,7 @@ class LogicEngine {
   }
 
   Mouse_Down(evt) {
-    if (evt.which === 1) {
+    if (evt.which === 1 && !this.MultiSelectStart.InProgress) {
       let mousePos = getMousePos(this.Canvas, evt);
       this.MouseDownTime = performance.now();
       let element = this.ActiveContainer.checkMouseBounds(mousePos);

js/main.js

@@ -2,7 +2,7 @@
     MatCat BrowserLogic Simulator
  */
 
-let Version = "0.4.10";
+let Version = "0.4.11";
 
 let spanVersion = document.getElementById("version");
 spanVersion.innerText = Version;
@@ -18,6 +18,46 @@ window.addEventListener('resize', function(evt) {
   logicEngine.Resize(evt);
 }, false);
 
+document.addEventListener('copy', function(evt) {
+  evt.preventDefault();
+    let copyObject = GetCopyObject();
+    if (!copyObject) return;
+
+    evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
+    evt.clipboardData.setData('text',JSON.stringify(copyObject));
+});
+
+document.addEventListener('cut', function(evt) {
+  evt.preventDefault();
+  let copyObject = GetCopyObject();
+  if (!copyObject) return;
+
+  evt.clipboardData.setData('logicparts/json',JSON.stringify(copyObject));
+  evt.clipboardData.setData('text',JSON.stringify(copyObject));
+
+  logicEngine.Key_Press({ctrlKey: false, key: "Delete"});
+  disableSelectedRCMs(true);
+});
+
+
+document.addEventListener('paste', function(evt) {
+  evt.preventDefault();
+  if (evt.clipboardData.getData('logicparts/json')) {
+    //console.log(evt.clipboardData.getData('logicparts/json'));
+    loadActiveContainer(JSON.parse(evt.clipboardData.getData('logicparts/json')).Elements);
+  } else {
+    // Lets see if they pasted a proper LogicParts format atleast
+    if (evt.clipboardData.getData('text')) {
+      let jsonObj = JSON.parse(evt.clipboardData.getData('text'));
+      if (jsonObj?.LogicParts && jsonObj?.Paste) {
+        console.log("We got a paste of a general text object that is valid");
+        loadActiveContainer(jsonObj.Elements);
+      }
+    }
+  }
+});
+
+
 window.addEventListener('keydown', function(evt) {
   logicEngine.Key_Press(evt);
 }, false);
@@ -136,6 +176,28 @@ rcm_Delete.addEventListener('click', function(evt) {
   disableSelectedRCMs(true);
 });
 
+let tfm_Cut = document.getElementById("tfm_Cut");
+tfm_Cut.addEventListener('click', function(evt) {
+  document.execCommand('cut');
+  disableSelectedRCMs(true);
+  setTimeout(function(){hideMenus()},10);
+});
+
+let tfm_Copy = document.getElementById("tfm_Copy");
+tfm_Copy.addEventListener('click', function(evt) {
+  document.execCommand('copy');
+  disableSelectedRCMs(true);
+  setTimeout(function(){hideMenus()},10);
+});
+
+let tfm_Paste = document.getElementById("tfm_Paste");
+tfm_Paste.addEventListener('click', function(evt) {
+  document.execCommand('paste');
+  disableSelectedRCMs(true);
+  setTimeout(function(){hideMenus()},10);
+});
+
+
 let tfm_Delete = document.getElementById("tfm_Delete");
 tfm_Delete.addEventListener('click', function(evt) {
   logicEngine.Key_Press({ctrlKey: false, key: "Delete"});