stuff with metacodes working well again

app/assets/stylesheets/application.scss.erb

@@ -526,9 +526,9 @@ button.button.btn-no:hover {
 }
 
 .new_topic {
-    /* start it off screen while it initializes the spinner, then it will be hidden with jquery */
+    top: 50%;
-    top: -1000px;
+    left: 50%;
-    left: -1000px;
+    margin-top: -17px;
     display: block;
     position: absolute;
     z-index: 1;
@@ -594,38 +594,18 @@ button.button.btn-no:hover {
     color: #BDBDBD;
 }
 .openMetacodeSwitcher {
-    display: none;
+    display: block;
     height: 16px;
     width: 16px;
     background-image: url(<%= asset_data_uri('metacodesettings_sprite.png') %>);
     position: absolute;
     z-index: 2;
-    top: 20px;
+    top: -16px;
-    left: 16px;
+    left: -16px;
 }
 .openMetacodeSwitcher:hover {
     background-position: -16px 0;
 }
-.pinCarousel {
-    cursor: pointer;
-    display: block;
-    height: 16px;
-    width: 16px;
-    background-image: url(<%= asset_data_uri('pincarousel_sprite.png') %>);
-    position: absolute;
-    z-index: 2;
-    top: -20px;
-    right: -16px;
-}
-.pinCarousel:hover {
-    background-position: 0 -16px;
-}
-.pinCarousel.isPinned {
-    background-position: -16px 0;
-}
-.pinCarousel.isPinned:hover {
-    background-position: -16px -16px;
-}
 #metacodeImg {
     height: 120px;
     width: 380px;

app/assets/stylesheets/metacode-select.scss.erb

@@ -21,8 +21,6 @@
   .metacodeList {
     list-style: none;
     background: #FFF;
-    min-height: 107px;
-    min-width: 100px;
     
     li {
       padding: 8px;

app/models/mapping.rb

@@ -8,10 +8,6 @@ class Mapping < ApplicationRecord
   belongs_to :user
   belongs_to :updated_by, class_name: 'User'
 
-  validates :xloc, presence: true,
-                   unless: proc { |m| m.mappable_type == 'Synapse' }
-  validates :yloc, presence: true,
-                   unless: proc { |m| m.mappable_type == 'Synapse' }
   validates :map, presence: true
   validates :mappable, presence: true
 
@@ -31,7 +27,7 @@ class Mapping < ApplicationRecord
 
   def after_created
     if mappable_type == 'Topic'
-      meta = {'x': xloc, 'y': yloc, 'mapping_id': id}
+      meta = {'mapping_id': id}
       Events::TopicAddedToMap.publish!(mappable, map, user, meta)
       ActionCable.server.broadcast 'map_' + map.id.to_s, type: 'topicAdded', topic: mappable.filtered, mapping_id: id
     elsif mappable_type == 'Synapse'

app/views/layouts/application.html.erb

@@ -47,19 +47,6 @@
             <%= render :partial => 'layouts/lowermapelements' %>
 
             <div id="explore"></div>
-            
-            <div id="instructions">
-              <div class="addTopic">
-                Double-click to<br>add a topic
-              </div>
-              <div class="tabKey">
-                Use Tab & Shift+Tab to select a metacode
-              </div>
-              <div class="enterKey">
-                Press Enter to add the topic
-              </div>
-            </div>
-            
             <div id="infovis"></div>
             <%= render :partial => 'layouts/mobilemenu' %>
             

app/views/maps/_newtopic.html.erb

@@ -1,15 +1,8 @@
-<% @metacodes = user_metacodes() %>
-
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
   <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes">
     <div class="tooltipsAbove">Switch Metacodes</div>
   </div>
 
-  <div class="pinCarousel">
-    <div class="tooltipsAbove helpPin">Pin Open</div>
-    <div class="tooltipsAbove helpUnpin">Unpin</div>
-  </div>
-
   <div id="metacodeImg">
     <% @metacodes = [user_metacode()].concat(user_metacodes()).uniq %>
     <% set = metacodeset() %>
@@ -28,13 +21,11 @@
   <div class="clearfloat"></div>
 <script>
 <% @metacodes.each do |metacode| %>
-  <% if !set %>
   Metamaps.Create.selectedMetacodes.push("<%= metacode.id %>");
   Metamaps.Create.newSelectedMetacodes.push("<%= metacode.id %>");
   Metamaps.Create.selectedMetacodeNames.push("<%= metacode.name %>");
   Metamaps.Create.newSelectedMetacodeNames.push("<%= metacode.name %>");
 <% end %> 
-<% end %> 
 Metamaps.Create.newTopic.metacode = <%= user_metacode().id %>
 <% current_user.recentMetacodes.each do |id| %>
     Metamaps.Create.recentMetacodes.push(<%= id %>);

app/views/shared/_switchmetacodes.html.erb

@@ -93,12 +93,9 @@
     <div id="metacodeSwitchTabsCustom">
         <p class="setDesc">Choose Your Metacodes</p>
         <% @list = '' %>
+        <% metacodesInUse = [user_metacode()].concat(user_metacodes()).uniq %> 
         <% Metacode.order("name").all.each_with_index do |m, index| %>
-          <% if selectedSet == "custom" %>
+          <% mClass = metacodesInUse.index(m) == nil ? "toggledOff" : "" %>
-            <% mClass = metacodes.index(m.id.to_s) == nil ? "toggledOff" : "" %>
-          <% else %>
-            <% mClass = "toggledOff" %>
-          <% end %>
           <% @list += '<li id="' + m.id.to_s + '" data-name="' + m.name + '" class="' + mClass + '"><img src="' + asset_path(m.icon) + '" alt="' + m.name + '" /><p>' + m.name.downcase + '</p><div class="clearfloat"></div></li>' %> 
         <% end %>
 

frontend/src/Metamaps/Create.js

@@ -65,10 +65,11 @@ const Create = {
     if (!custom) {
       codesToSwitchToIds = $('#metacodeSwitchTabs' + set).attr('data-metacodes').split(',')
       $('.customMetacodeList li').addClass('toggledOff')
-      Create.selectedMetacodes = []
+console.log(codesToSwitchToIds)
-      Create.selectedMetacodeNames = []
+      Create.selectedMetacodes = codesToSwitchToIds
-      Create.newSelectedMetacodes = []
+      Create.selectedMetacodeNames = DataModel.Metacodes.filter(m => codesToSwitchToIds.indexOf(m.id) > -1).map(m => m.get('name'))  
-      Create.newSelectedMetacodeNames = []
+      Create.newSelectedMetacodes = codesToSwitchToIds
+      Create.newSelectedMetacodeNames = DataModel.Metacodes.filter(m => codesToSwitchToIds.indexOf(m.id) > -1).map(m => m.get('name'))  
     } else if (custom) {
       // uses .slice to avoid setting the two arrays to the same actual array
       Create.selectedMetacodes = Create.newSelectedMetacodes.slice(0)
@@ -77,9 +78,11 @@ const Create = {
     }
 
     // sort by name
-    for (var i = 0; i < codesToSwitchToIds.length; i++) {
+    codesToSwitchToIds.forEach(id => {
-      metacodeModels.add(DataModel.Metacodes.get(codesToSwitchToIds[i]))
+      const metacode = DataModel.Metacodes.get(id)
-    }
+      metacodeModels.add(metacode)
+      $('.customMetacodeList #' + id).removeClass('toggledOff')
+    })
     metacodeModels.sort()
 
     $('#metacodeImg').removeData('cloudcarousel')
@@ -97,6 +100,8 @@ const Create = {
       bringToFront: true
     })
 
+    Create.newTopic.setMetacode(metacodeModels.models[0].id)
+
     GlobalUI.closeLightbox()
     $('#topic_name').focus()
 
@@ -123,13 +128,7 @@ const Create = {
     var self = Create
     self.isSwitchingSet = false
 
-    if (self.selectedMetacodeSet !== 'metacodeset-custom') {
+    if (self.selectedMetacodeSet === 'metacodeset-custom') {
-      $('.customMetacodeList li').addClass('toggledOff')
-      self.selectedMetacodes = []
-      self.selectedMetacodeNames = []
-      self.newSelectedMetacodes = []
-      self.newSelectedMetacodeNames = []
-    } else { // custom set is selected
       // reset it to the current actual selection
       $('.customMetacodeList li').addClass('toggledOff')
       for (var i = 0; i < self.selectedMetacodes.length; i++) {
@@ -168,16 +167,6 @@ const Create = {
       
       Create.newTopic.initSelector()
       
-      $('.pinCarousel').click(function() {
-        if (Create.newTopic.pinned) {
-          $('.pinCarousel').removeClass('isPinned')
-          Create.newTopic.pinned = false
-        } else {
-          $('.pinCarousel').addClass('isPinned')
-          Create.newTopic.pinned = true
-        }
-      })
-
       var topicBloodhound = new Bloodhound({
         datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
         queryTokenizer: Bloodhound.tokenizers.whitespace,
@@ -229,7 +218,6 @@ const Create = {
         speed: 0.3,
         bringToFront: true
       })
-      $('.new_topic').hide()
       $('#new_topic').attr('oncontextmenu', 'return false') // prevents the mouse up event from opening the default context menu on this element
     },
     name: null,
@@ -253,7 +241,7 @@ const Create = {
             Create.newTopic.hideSelector()
             $('#topic_name').focus()
           },
-          metacodes: DataModel.Metacodes.models
+          metacodes: DataModel.Metacodes.filter(m => Create.selectedMetacodes.indexOf(m.id.toString()) > -1)
         }),
         document.getElementById('metacodeSelector')
       )
@@ -287,30 +275,16 @@ const Create = {
         }
       })
     },
-    open: function () {
-      $('#new_topic').fadeIn('fast', function () {
-        $('#topic_name').focus()
-      })
-      Create.newTopic.beingCreated = true
-      Create.newTopic.name = ''
-      GlobalUI.hideDiv('#instructions')
-    },
-    hide: function(force) {
-      if (force || !Create.newTopic.pinned) {
-        $('#new_topic').fadeOut('fast')
-      }
-      if (force) {
-        $('.pinCarousel').removeClass('isPinned')
-        Create.newTopic.pinned = false
-      }
-      if (DataModel.Topics.length === 0) {
-        GlobalUI.showDiv('#instructions')
-      }
-      Create.newTopic.beingCreated = false
-    },
     reset: function() {
       $('#topic_name').typeahead('val', '')
       Create.newTopic.hideSelector()
+    },
+    position: function() {
+      const pixels = Util.coordsToPixels(Visualize.mGraph, Mouse.newNodeCoords)
+      $('#new_topic').css({
+        left: pixels.x,
+        top: pixels.y
+      })
     }
   },
   newSynapse: {
@@ -403,6 +377,7 @@ const Create = {
         }
       })
     },
+    focusNode: null,
     beingCreated: false,
     description: null,
     topic1id: null,

frontend/src/Metamaps/Engine.js

@@ -1,22 +1,34 @@
 import Matter, { Vector, Sleeping, World, Constraint, Composite, Runner, Common, Body, Bodies, Events } from 'matter-js'
+import { last, sortBy, values } from 'lodash'
 
 import $jit from '../patched/JIT'
 
 import Create from './Create'
 import DataModel from './DataModel'
+import Mouse from './Mouse'
 import JIT from './JIT'
 import Visualize from './Visualize'
 
 const Engine = {
+  focusBody: null,
+  newNodeConstraint: null,
+  newNodeBody:  Bodies.circle(Mouse.newNodeCoords.x, Mouse.newNodeCoords.y, 1),
   init: () => {
     Engine.engine = Matter.Engine.create() 
     Events.on(Engine.engine, 'afterUpdate', Engine.callUpdate)
-    Engine.engine.world.gravity.scale = 0
+    //Engine.engine.world.gravity.scale = 0
+    Engine.engine.world.gravity.y = 0
+    Engine.engine.world.gravity.x = -1
+    Body.setStatic(Engine.newNodeBody, true)
   },
   run: init => {
     if (init) {
+      World.addBody(Engine.engine.world, Engine.newNodeBody)
       Visualize.mGraph.graph.eachNode(Engine.addNode)
       DataModel.Synapses.each(s => Engine.addEdge(s.get('edge')))
+      if (Object.keys(Visualize.mGraph.graph.nodes).length) {
+        Engine.setFocusNode(Engine.findFocusNode(Visualize.mGraph.graph.nodes))
+      }
     }
     Engine.runner = Matter.Runner.run(Engine.engine)
   },
@@ -48,6 +60,28 @@ const Engine = {
   },
   removeNode: node => { 
 
+  },
+  findFocusNode: nodes => {
+    return last(sortBy(values(nodes), n => new Date(n.getData('topic').get('created_at'))))
+  },
+  setFocusNode: node => {
+    Create.newSynapse.focusNode = node
+    const body = Composite.get(Engine.engine.world, node.getData('body_id'), 'body')
+    Engine.focusBody = body 
+    let constraint
+    if (Engine.newNodeConstraint) {
+      Engine.newNodeConstraint.bodyA = body
+    }
+    else {
+      constraint = Constraint.create({
+        bodyA: body,
+        bodyB: Engine.newNodeBody,
+        length: JIT.ForceDirected.graphSettings.levelDistance,
+        stiffness: 0.2
+      })
+      World.addConstraint(Engine.engine.world, constraint)
+      Engine.newNodeConstraint = constraint
+    }
   },
   addEdge: edge => {
     const bodyA = Composite.get(Engine.engine.world, edge.nodeFrom.getData('body_id'), 'body')   
@@ -70,7 +104,9 @@ const Engine = {
       const newPos = new $jit.Complex(b.position.x, b.position.y)
       node && node.setPos(newPos, 'current')
     })
+    if (Engine.focusBody) Mouse.focusNodeCoords = Engine.focusBody.position
     Create.newSynapse.updateForm() 
+    Create.newTopic.position()
     Visualize.mGraph.plot()
   }
 }

frontend/src/Metamaps/JIT.js

@@ -404,6 +404,7 @@ const JIT = {
             JIT.selectEdgeOnClickHandler(node, e)
           } else if (node && !node.nodeFrom) {
             JIT.selectNodeOnClickHandler(node, e)
+            Engine.setFocusNode(node)
           } else {
             JIT.canvasClickHandler(eventInfo.getPos(), e)
           } // if
@@ -415,7 +416,6 @@ const JIT = {
 
           if (Mouse.boxStartCoordinates) {
             Create.newSynapse.hide()
-            Create.newTopic.hide()
             Visualize.mGraph.busy = false
             Mouse.boxEndCoordinates = eventInfo.getPos()
             JIT.selectWithBox(e)
@@ -432,7 +432,6 @@ const JIT = {
           } else {
             // right click open space
             Create.newSynapse.hide()
-            Create.newTopic.hide()
           }
         }
       },
@@ -721,11 +720,11 @@ const JIT = {
       $('canvas').css('cursor', 'default')
     }
   }, // onMouseMoveHandler
-  enterKeyHandler: function() {
+  enterKeyHandler: function(e) {
     const creatingMap = GlobalUI.lightbox
     if (creatingMap === 'newmap' || creatingMap === 'forkmap') {
       GlobalUI.CreateMap.submit()
-    } else if (Create.newTopic.beingCreated && !Create.newTopic.metacodeSelectorOpen) {
+    } else if (e.target.id === 'topic_name' && !Create.newTopic.metacodeSelectorOpen) {
       Topic.createTopicLocally()
     } else if (Create.newSynapse.beingCreated) {
       Synapse.createSynapseLocally()
@@ -850,7 +849,6 @@ const JIT = {
           JIT.tempNode = node
           JIT.tempInit = true
 
-          Create.newTopic.hide()
           Create.newSynapse.hide()
           Mouse.synapseEndCoordinates = {
             x: pos.x,
@@ -878,15 +876,7 @@ const JIT = {
           Visualize.mGraph.graph.eachNode(function(n) {
             n.setData('dim', 25, 'current')
           })
-          // pop up node creation :)
-          var myX = e.clientX - 110
-          var myY = e.clientY - 30
-          $('#new_topic').css('left', myX + 'px')
-          $('#new_topic').css('top', myY + 'px')
-          Create.newTopic.x = eventInfo.getPos().x
-          Create.newTopic.y = eventInfo.getPos().y
           Visualize.mGraph.plot()
-
           Mouse.synapseEndCoordinates = {
             x: pos.x,
             y: pos.y
@@ -929,12 +919,9 @@ const JIT = {
     self.dragTolerance = 0
 
     if (JIT.tempInit && JIT.tempNode2 === null) {
-      // this means you want to add a new topic, and then a synapse
+      Mouse.synapseEndCoordinates = null
-      Create.newTopic.addSynapse = true
-      Create.newTopic.open()
     } else if (JIT.tempInit && JIT.tempNode2 !== null) {
       // this means you want to create a synapse between two existing topics
-      Create.newTopic.addSynapse = false
       Create.newSynapse.topic1id = JIT.tempNode.getData('topic').id
       Create.newSynapse.topic2id = JIT.tempNode2.getData('topic').id
       Create.newSynapse.node1 = JIT.tempNode
@@ -946,7 +933,6 @@ const JIT = {
       pixelPos = Util.coordsToPixels(Visualize.mGraph, midpoint)
       $('#new_synapse').css('left', pixelPos.x + 'px')
       $('#new_synapse').css('top', pixelPos.y + 'px')
-      Create.newSynapse.alreadyAdded = false
       Create.newSynapse.open()
       JIT.tempNode = null
       JIT.tempNode2 = null
@@ -991,27 +977,12 @@ const JIT = {
     const authorized = Active.Map && Active.Map.authorizeToEdit(Active.Mapper)
 
     if (now - storedTime < Mouse.DOUBLE_CLICK_TOLERANCE && !Mouse.didPan) {
-      if (Active.Map && !authorized) {
-        GlobalUI.notifyUser('Cannot edit Public map.')
-        return
-      } else if (Active.Topic) {
-        GlobalUI.notifyUser('Cannot create in Topic view.')
-        return
-      }
       // DOUBLE CLICK
-      // pop up node creation :)
-      Create.newTopic.addSynapse = false
-      Create.newTopic.x = canvasLoc.x
-      Create.newTopic.y = canvasLoc.y
-      $('#new_topic').css('left', e.clientX + 'px')
-      $('#new_topic').css('top', e.clientY + 'px')
-      Create.newTopic.open()
     } else if (!Mouse.didPan) {
       // SINGLE CLICK, no pan
       Filter.close()
       TopicCard.hideCard()
       SynapseCard.hideCard()
-      Create.newTopic.hide()
       $('.rightclickmenu').remove()
       // reset the draw synapse positions to false
       Mouse.synapseStartCoordinates = []
@@ -1025,7 +996,6 @@ const JIT = {
       }
     } else {
       // SINGLE CLICK, resulting from pan
-      Create.newTopic.hide()
     }
   }, // canvasClickHandler
   updateTopicPositions: function(node, pos) {

frontend/src/Metamaps/Listeners.js

@@ -24,7 +24,7 @@ const Listeners = {
         case 13: // if enter key is pressed
           // prevent topic creation if sending a message
           if (e.target.className !== 'chat-input') {
-            JIT.enterKeyHandler()
+            JIT.enterKeyHandler(e)
           }
           break
         case 27: // if esc key is pressed

frontend/src/Metamaps/Map/index.js

@@ -144,7 +144,7 @@ const Map = {
       $('.rightclickmenu').remove()
       TopicCard.hideCard()
       SynapseCard.hideCard()
-      Create.newTopic.hide(true) // true means force (and override pinned)
+      $('#new_topic').hide()
       Create.newSynapse.hide()
       Filter.close()
       InfoBox.close()

frontend/src/Metamaps/Mouse.js

@@ -6,6 +6,8 @@ const Mouse = {
   edgeHoveringOver: false,
   boxStartCoordinates: false,
   boxEndCoordinates: false,
+  focusNodeCoords: null,
+  newNodeCoords: { x: 100, y: 0 },
   synapseStartCoordinates: [],
   synapseEndCoordinates: null,
   lastNodeClick: 0,

frontend/src/Metamaps/Synapse.js

@@ -44,7 +44,7 @@ const Synapse = {
     synapse.set('edge', edgeOnViz)
     synapse.updateEdge() // links the synapse and the mapping to the edge
 
-    Control.selectEdge(edgeOnViz)
+    //Control.selectEdge(edgeOnViz)
 
     var synapseSuccessCallback = function(synapseModel, response) {
       if (Active.Map) {
@@ -73,7 +73,7 @@ const Synapse = {
       }
     }
   },
-  createSynapseLocally: function() {
+  createSynapseLocally: function(alreadyAdded, topic1id, topic2id) {
     var self = Synapse
     let topic1
     let topic2
@@ -81,43 +81,41 @@ const Synapse = {
     let node2
     let synapse
     let mapping
-
     $(document).trigger(Map.events.editedByActiveMapper)
-
     // for each node in this array we will create a synapse going to the position2 node.
     var synapsesToCreate = []
-
+    if (alreadyAdded) {
+      topic2 = DataModel.Topics.get(topic2id)
+      node2 = topic2.get('node')
+      topic1 = DataModel.Topics.get(topic1id)
+      synapsesToCreate[0] = topic1.get('node')
+    }
+    else {
       topic2 = DataModel.Topics.get(Create.newSynapse.topic2id)
       node2 = topic2.get('node')
-
+      if (Selected.Nodes.length === 0) {
-    var len = Selected.Nodes.length
-    if (len === 0) {
         topic1 = DataModel.Topics.get(Create.newSynapse.topic1id)
         synapsesToCreate[0] = topic1.get('node')
-    } else if (len > 0) {
+      } else {
         synapsesToCreate = Selected.Nodes
       }
-
+    }
-    for (var i = 0; i < synapsesToCreate.length; i++) {
+    synapsesToCreate.forEach(node1 => {
-      node1 = synapsesToCreate[i]
       topic1 = node1.getData('topic')
       synapse = new DataModel.Synapse({
-        desc: Create.newSynapse.description,
+        desc: Create.newSynapse.description || '',
         topic1_id: topic1.isNew() ? topic1.cid : topic1.id,
         topic2_id: topic2.isNew() ? topic2.cid : topic2.id
       })
       DataModel.Synapses.add(synapse)
-
       mapping = new DataModel.Mapping({
         mappable_type: 'Synapse',
         mappable_id: synapse.cid
       })
       DataModel.Mappings.add(mapping)
-
       // this function also includes the creation of the synapse in the database
-      self.renderSynapse(mapping, synapse, node1, node2, true, Create.newSynapse.alreadyAdded)
+      self.renderSynapse(mapping, synapse, node1, node2, true, alreadyAdded)
-    } // for each in synapsesToCreate
+    }) // for each in synapsesToCreate
-
     Create.newSynapse.hide()
   },
   getSynapseFromAutocomplete: function(id) {

frontend/src/Metamaps/Topic.js

@@ -171,63 +171,28 @@ const Topic = {
   // opts is additional options in a hash
   // TODO: move createNewInDB and permitCreateSynapseAfter into opts
   renderTopic: function(mapping, topic, createNewInDB, permitCreateSynapseAfter, opts = {}) {
-    var nodeOnViz, tempPos
+    var nodeOnViz
     var newnode = topic.createNode()
-    var midpoint = {}
+    const connectToId = Create.newSynapse.focusNode.getData('topic').id
-    var pixelPos
 
     if (!$.isEmptyObject(Visualize.mGraph.graph.nodes)) {
-      if (Create.newTopic.addSynapse && permitCreateSynapseAfter) {
+      // this will also add the new node
-        Create.newSynapse.topic1id = JIT.tempNode.getData('topic').id
+      Visualize.mGraph.graph.addAdjacence(Create.newSynapse.focusNode, newnode)
-        Create.newSynapse.node1 = JIT.tempNode
-        // this will also add a new node if the node doesn't exist
-        Visualize.mGraph.graph.addAdjacence(JIT.tempNode, newnode)
-        Create.newSynapse.alreadyAdded = true
-        Mouse.synapseEndCoordinates = null
-      } 
-      else Visualize.mGraph.graph.addNode(newnode)
       nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
-      if (Create.newTopic.addSynapse && permitCreateSynapseAfter) Create.newSynapse.node2 = nodeOnViz
       Engine.addNode(nodeOnViz)
-      if (Create.newTopic.addSynapse && permitCreateSynapseAfter) { 
+      Engine.addEdge(Visualize.mGraph.graph.getAdjacence(Create.newSynapse.focusNode.id, nodeOnViz.id))
-        Engine.addEdge(Visualize.mGraph.graph.getAdjacence(JIT.tempNode.id, nodeOnViz.id))
-      }
       topic.set('node', nodeOnViz, {silent: true})
       topic.updateNode() // links the topic and the mapping to the node
-
+      Engine.setFocusNode(nodeOnViz)
       nodeOnViz.setData('dim', 1, 'start')
       nodeOnViz.setData('dim', 25, 'end')
-      if (Visualize.type === 'RGraph') {
-        tempPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
-        tempPos = tempPos.toPolar()
-        nodeOnViz.setPos(tempPos, 'current')
-        nodeOnViz.setPos(tempPos, 'start')
-        nodeOnViz.setPos(tempPos, 'end')
-      } else if (Visualize.type === 'ForceDirected') {
         nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
         nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'start')
         nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'end')
-      }
-      if (Create.newTopic.addSynapse && permitCreateSynapseAfter) {
-        // show the form
-        //Create.newSynapse.open()
         Visualize.mGraph.fx.animate({
           modes: ['node-property:dim'],
-          duration: 500,
+          duration: 500
-          onComplete: function() {
-            JIT.tempNode = null
-            JIT.tempNode2 = null
-            JIT.tempInit = false
-          }
         })
-      } else {
-        Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
-        Visualize.mGraph.fx.animate({
-          modes: ['node-property:dim'],
-          duration: 500,
-          onComplete: function() {}
-        })
-      }
     } else {
       Engine.run()
       Visualize.mGraph.loadJSON(newnode)
@@ -235,7 +200,7 @@ const Topic = {
       Engine.addNode(nodeOnViz)
       topic.set('node', nodeOnViz, {silent: true})
       topic.updateNode() // links the topic and the mapping to the node
-
+      Engine.setFocusNode(nodeOnViz)
       nodeOnViz.setData('dim', 1, 'start')
       nodeOnViz.setData('dim', 25, 'end')
       nodeOnViz.setPos(new $jit.Complex(mapping.get('xloc'), mapping.get('yloc')), 'current')
@@ -244,8 +209,7 @@ const Topic = {
       Visualize.mGraph.fx.plotNode(nodeOnViz, Visualize.mGraph.canvas)
       Visualize.mGraph.fx.animate({
         modes: ['node-property:dim'],
-        duration: 500,
+        duration: 500
-        onComplete: function() {}
       })
     }
 
@@ -266,11 +230,7 @@ const Topic = {
           }
         })
       }
-
+      Synapse.createSynapseLocally(true, connectToId, topicModel.id)
-      if (Create.newTopic.addSynapse) {
-        Create.newSynapse.topic2id = topicModel.id
-        Synapse.createSynapseLocally()
-      }
     }
 
     if (!Settings.sandbox && createNewInDB) {
@@ -296,9 +256,6 @@ const Topic = {
       return
     }
 
-    // hide the 'double-click to add a topic' message
-    GlobalUI.hideDiv('#instructions')
-
     $(document).trigger(Map.events.editedByActiveMapper)
 
     var metacode = DataModel.Metacodes.get(Create.newTopic.metacode)
@@ -310,34 +267,23 @@ const Topic = {
     })
     DataModel.Topics.add(topic)
 
-    if (Create.newTopic.pinned) {
-      var nextCoords = { x: 0, y: 0 } // AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
-    }
     var mapping = new DataModel.Mapping({
-      xloc: nextCoords ? nextCoords.x : Create.newTopic.x,
+      xloc: Mouse.newNodeCoords.x, 
-      yloc: nextCoords ? nextCoords.y : Create.newTopic.y,
+      yloc: Mouse.newNodeCoords.y,
       mappable_id: topic.cid,
       mappable_type: 'Topic'
     })
     DataModel.Mappings.add(mapping)
 
     // these can't happen until the value is retrieved, which happens in the line above
-    if (!Create.newTopic.pinned) Create.newTopic.hide()
     Create.newTopic.reset()
 
     self.renderTopic(mapping, topic, true, true) // this function also includes the creation of the topic in the database
   },
   getTopicFromAutocomplete: function(id) {
     var self = Topic
-
-    // hide the 'double-click to add a topic' message
-    GlobalUI.hideDiv('#instructions')
-
     $(document).trigger(Map.events.editedByActiveMapper)
-
-    if (!Create.newTopic.pinned) Create.newTopic.hide()
     Create.newTopic.reset()
-
     self.get(id, (topic) => {
       if (Create.newTopic.pinned) {
         var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
@@ -349,10 +295,7 @@ const Topic = {
         mappable_id: topic.id
       })
       DataModel.Mappings.add(mapping)
-
       self.renderTopic(mapping, topic, true, true)
-      // this blocked the enterKeyHandler from creating a new topic as well
-      if (Create.newTopic.pinned) Create.newTopic.beingCreated = true
     })
   },
   getMapFromAutocomplete: function(data) {

frontend/src/Metamaps/Visualize.js

@@ -176,13 +176,10 @@ const Visualize = {
         if (self.type === 'RGraph') {
           self.mGraph.fx.animate(JIT.RGraph.animate)
         } else if (self.type === 'ForceDirected') {
-          //self.mGraph.animate(JIT.ForceDirected.animateSavedLayout)
-          //self.mGraph.fx.animate({
-          //  modes: ['node-property:dim'],
-          //  duration: 3000
-          //})
           self.mGraph.plot()
           Engine.run(true)
+          $('#new_topic').show()
+          $('#topic_name').focus()
         } else if (self.type === 'ForceDirected3D') {
           self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
         }

frontend/src/patched/JIT.js

@@ -7243,6 +7243,13 @@ Graph.Plot = {
         ctx.restore();
     }
 
+    if (Metamaps.Mouse.focusNodeCoords) {
+        ctx.save();
+        Metamaps.JIT.renderMidArrow(Metamaps.Mouse.focusNodeCoords, Metamaps.Mouse.newNodeCoords, 13, false, canvas, 0.3, true);
+        Metamaps.JIT.renderMidArrow(Metamaps.Mouse.focusNodeCoords, Metamaps.Mouse.newNodeCoords, 13, false, canvas, 0.7, true);
+        ctx.restore();
+    }
+
     if (Metamaps.Mouse.boxStartCoordinates && Metamaps.Mouse.boxEndCoordinates) {
       ctx.save();
       ctx.beginPath()