Upgrades the create tool - can now set the alphabet, including to symbol type. Fixes an issue introduced in The Refactor where tool selection did not collectly set node dragability.

Author: MatthewHepburn

FSM/Source/create.html

@@ -14,23 +14,36 @@
   data-links='[]'
   data-question='{"type":"none", "alphabet":["a", "b", "ε"], "alphabetType":"char"}'
   data-options='{"constrainRename":true}'
-  data-iconaddress = 'http://homepages.inf.ed.ac.uk/s1020995/img/Icons/'>
-      <div class="menu">
-    	<a href='index.html' class='pure-button'>Home</a>
-    	<a href="about.html" class='pure-button'>About</a>
-    	<a href="help.html" class='pure-button'>Help</a>
-	</div>
-  	<div class="createtools">
-	  	<label for="traceform">Input</label>
-		<input type="text" class="qform" ,="" id="traceform" value="aab">
-		<button id="traceform-button" class="pure-button" type="submit">Test</button>
-  	</div>
-    <svg id="main-svg" width="960" height="500" class="active">
-      <defs>
-        <marker id="end-arrow" viewBox="0 -10 20 20" refX="7" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-10L20,0L0,10" fill="#000"></path></marker>
-        <marker id="highlight-arrow" viewBox="0 -10 20 20" refX="7" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-10L20,0L0,10" fill="green"></path></marker>
-      </defs>
-    </svg>
+  data-iconaddress = 'http://homepages.inf.ed.ac.uk/s1020995/stable/img/Icons/'>
+    <div class="maindiv" style="width:85%">
+        <div class="menu">
+      	<a href='index.html' class='pure-button'>Home</a>
+      	<a href="about.html" class='pure-button'>About</a>
+      	<a href="help.html" class='pure-button'>Help</a>
+        </div>
+    	<div class="createtools pure-form-aligned" style="margin-top:10px;">
+        <fieldset style="border-style:none;">
+          <div class="pure-control-group">
+            <label for="setalphabet">Alphabet</label>
+            <input type="text" class ="qform" id="setalphabet" value='["a", "b"]'>
+            <button id="setalphabet-button" class="pure-button" type="submit" style="margin-left:5px;" >Set</button>
+            <p id="alphabeterror" style="display:inline; margin-left:10px"></p>
+          </div>
+
+          <div class="pure-control-group">
+      	  	<label for="traceform">Input</label>
+        		<input type="text" class="qform" id="traceform" value="aab">
+        		<button id="traceform-button" class="pure-button" type="submit" style="margin-left:5px;">Test</button>
+          </div>
+        </fieldset>
+    	</div>
+      <svg id="main-svg" width="960" height="500" class="active">
+        <defs>
+          <marker id="end-arrow" viewBox="0 -10 20 20" refX="7" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-10L20,0L0,10" fill="#000"></path></marker>
+          <marker id="highlight-arrow" viewBox="0 -10 20 20" refX="7" markerWidth="5" markerHeight="5" orient="auto"><path d="M0,-10L20,0L0,10" fill="green"></path></marker>
+        </defs>
+      </svg>
+    </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
     <script src="fsm.js"></script>
     <script type="text/javascript" src="create.js"></script>

FSM/Source/create.js

@@ -1,7 +1,8 @@
-create = {
+var create = {
     setup: function() {
         // Setup the creation environment.
         create.registerTraceButtonListener();
+        create.registerAlphabetButtonListener();
     },
     registerTraceButtonListener:function(){
         d3.select("#traceform-button")
@@ -10,8 +11,58 @@ create = {
                 display.showTrace(input);
                 console.log(input);
             });
+    },
+    registerAlphabetButtonListener:function(){
+        d3.select("#setalphabet-button")
+            .on("click", function(){
+                var alphabet = document.querySelector("#setalphabet").value;
+                create.setalphabet(alphabet);
+                console.log(alphabet);
+            });
+    },
+    setalphabet: function(string){
+        try{
+            var alphabet = JSON.parse(string);
+            document.querySelector("#alphabeterror").innerHTML = "";
+            if(alphabet.constructor !== Array){
+                throw new Error("alphabet must be an array.");
+            }
+            if (alphabet.indexOf("ε") == -1){
+                alphabet.push("ε");
+            }
+            var alphabetType = "char";
+            for (i = 0; i < alphabet.length; i++){
+                if(alphabet[i].length > 1){
+                    alphabetType = "symbol";
+                }
+            }
+            model.question.alphabetType = alphabetType;
+            model.question.alphabet = alphabet;
+            var purgeAlphabet = function(link){
+                var newAlphabet = alphabet;
+                link.input = link.input.filter(function(symbol){
+                    return newAlphabet.indexOf(symbol) != -1;
+                });
+            };
+            for(var i = 0; i < model.links.length; i++){
+                purgeAlphabet(model.links[i]);
+                display.updateLinkLabel(model.links[i].id);
+            }
+            setTimeout(restart, 250);
+             // Reinstate draggable nodes if they are allowed by the current tool:
+            if(global.toolsWithDragAllowed.indexOf(model.toolMode) != -1){
+                // Need to wait, otherwise this doesn't work
+                window.setTimeout(function(){
+                    global.circle.call(global.force.drag);
+                }, 300);
+            }
+        }
+        catch(e){
+            document.querySelector("#alphabeterror").innerHTML = 'Parse error - enter alphabet in form ["a", "b"]';
+        }
+
     }
-}
+};
 
 // Start create mode here
-create.setup()
+create.setup();

FSM/Source/fsm.js

@@ -2553,7 +2553,7 @@ var eventHandler = {
         controller.renameSubmit();
 
         // Reinstate drag-to-move if previous mode did not allow it.
-        if(global.toolsWithDragAllowed.indexOf(model.toolMode) != -1){
+        if(global.toolsWithDragAllowed.indexOf(model.toolMode) == -1){
             global.circle.call(global.force.drag);
         }
         // If current mode is the same as the new mode, deselect it:
@@ -2566,7 +2566,7 @@ var eventHandler = {
                 .attr("fill", "url(#Gradient1)");
         }
         //  disable node dragging if needed by new mode:
-        if (newMode == "linetool" || newMode == "texttool" || newMode == "acceptingtool" || newMode == "deletetool" || newMode == "nodetool"){
+        if (global.toolsWithDragAllowed.indexOf(newMode) == -1){
             global.circle
                 .on("mousedown.drag", null)
                 .on("touchstart.drag", null);