initial particle test

frontend/src/Metamaps/DataModel/Mapping.js

@@ -21,16 +21,16 @@ const Mapping = Backbone.Model.extend({
       })
     }
   },
-  getMap: function() {
-    return Map.get(this.get('map_id'))
+  getMap: function(callback) {
+    Map.get(this.get('map_id'), callback)
   },
-  getTopic: function() {
-    if (this.get('mappable_type') !== 'Topic') return false
-    return Topic.get(this.get('mappable_id'))
-  },
-  getSynapse: function() {
-    if (this.get('mappable_type') !== 'Synapse') return false
-    return Synapse.get(this.get('mappable_id'))
+  getMappable: function(callback) {
+    if (this.get('mappable_type') === 'Topic') {
+      Topic.get(this.get('mappable_id'), callback)
+    }
+    else if (this.get('mappable_type') === 'Synapse') {
+      Synapse.get(this.get('mappable_id'), callback)
+    }
   }
 })
 

frontend/src/Metamaps/DataModel/Topic.js

@@ -5,6 +5,7 @@ import Backbone from 'backbone'
 try { Backbone.$ = window.$ } catch (err) {}
 
 import Active from '../Active'
+import Engine from '../Engine'
 import Filter from '../Filter'
 import JIT from '../JIT'
 import Realtime from '../Realtime'

frontend/src/Metamaps/DataModel/index.js

@@ -1,4 +1,5 @@
 import Active from '../Active'
+import Engine from '../Engine'
 import Filter from '../Filter'
 import { InfoBox } from '../Map'
 
@@ -116,6 +117,10 @@ const DataModel = {
       Filter.checkMetacodes()
       Filter.checkMappers()
     })
+    DataModel.Mappings.on('remove', function(mapping) {
+      console.log('removed', mapping)
+      if (mapping.get('mappable_type') === 'Topic') Engine.removeTopic(mapping)
+    })
   }
 }
 

frontend/src/Metamaps/Engine.js

@@ -0,0 +1,45 @@
+import Matter, { World, Composite, Runner, Common, Body, Bodies, Events } from 'matter-js'
+
+import $jit from '../patched/JIT'
+
+import DataModel from './DataModel'
+import Visualize from './Visualize'
+
+const Engine = {
+  init: () => {
+    Engine.engine = Matter.Engine.create() 
+    Events.on(Engine.engine, 'afterUpdate', Engine.callUpdate)
+    Engine.engine.world.gravity.scale = 0
+  },
+  run: init => {
+    if (init) DataModel.Mappings.each(Engine.addTopic) 
+    Engine.runner = Matter.Runner.run(Engine.engine)
+  },
+  endActiveMap: () => {
+    Runner.stop(Engine.runner)
+    Matter.Engine.clear(Engine.engine)
+  },
+  setTopicPos: (id, x, y) => {
+    const body = Composite.get(Engine.engine.world, id, 'body')
+    Body.setPosition(body, { x, y }) 
+  },
+  addTopic: mapping => {
+    let body = Bodies.circle(mapping.get('xloc'), mapping.get('yloc'), 25)
+    body.topic_id = mapping.get('mappable_id')
+    DataModel.Topics.get(body.topic_id).get('node').setData('body_id', body.id)
+    World.addBody(Engine.engine.world, body)
+  },
+  removeTopic: mapping => { 
+
+  },
+  callUpdate: () => {
+    Engine.engine.world.bodies.forEach(b => {
+      const node = DataModel.Topics.get(b.topic_id).get('node')
+      const newPos = new $jit.Complex(b.position.x, b.position.y)
+      node.setPos(newPos, 'current')
+    })
+    Visualize.mGraph.plot()
+  }
+}
+
+export default Engine

frontend/src/Metamaps/JIT.js

@@ -9,6 +9,7 @@ import Active from './Active'
 import Control from './Control'
 import Create from './Create'
 import DataModel from './DataModel'
+import Engine from './Engine'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
 import Map from './Map'
@@ -1067,6 +1068,7 @@ const JIT = {
         n.pos.setp(theta, rho)
       } else {
         n.pos.setc(x, y)
+        Engine.setTopicPos(n.getData('body_id'), x, y)
       }
 
       if (Active.Map) {

frontend/src/Metamaps/Map/index.js

@@ -8,6 +8,7 @@ import AutoLayout from '../AutoLayout'
 import Create from '../Create'
 import DataModel from '../DataModel'
 import DataModelMap from '../DataModel/Map'
+import Engine from '../Engine'
 import Filter from '../Filter'
 import GlobalUI from '../GlobalUI'
 import JIT from '../JIT'
@@ -148,6 +149,7 @@ const Map = {
       Filter.close()
       InfoBox.close()
       Realtime.endActiveMap()
+      Engine.endActiveMap()
       $('.viewOnly').removeClass('isViewOnly')
     }
   },

frontend/src/Metamaps/Topic.js

@@ -6,6 +6,7 @@ import Active from './Active'
 import AutoLayout from './AutoLayout'
 import Create from './Create'
 import DataModel from './DataModel'
+import Engine from './Engine'
 import Filter from './Filter'
 import GlobalUI from './GlobalUI'
 import JIT from './JIT'
@@ -223,6 +224,7 @@ const Topic = {
         })
       }
     } else {
+      Engine.run()
       Visualize.mGraph.loadJSON(newnode)
       nodeOnViz = Visualize.mGraph.graph.getNode(newnode.id)
       topic.set('node', nodeOnViz, {silent: true})
@@ -249,6 +251,7 @@ const Topic = {
     }
     var topicSuccessCallback = function(topicModel, response) {
       if (Active.Map) {
+        Engine.addTopic(mapping)
         mapping.save({ mappable_id: topicModel.id }, {
           success: function(model, response) {
             mappingSuccessCallback(model, response, topicModel)
@@ -302,7 +305,7 @@ const Topic = {
     DataModel.Topics.add(topic)
 
     if (Create.newTopic.pinned) {
-      var nextCoords = AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
+      var nextCoords = { x: 0, y: 0 } // AutoLayout.getNextCoord({ mappings: DataModel.Mappings })
     }
     var mapping = new DataModel.Mapping({
       xloc: nextCoords ? nextCoords.x : Create.newTopic.x,

frontend/src/Metamaps/Visualize.js

@@ -1,11 +1,13 @@
 /* global $ */
 
 import _ from 'lodash'
+import Matter from 'matter-js'
 
 import $jit from '../patched/JIT'
 
 import Active from './Active'
 import DataModel from './DataModel'
+import Engine from './Engine'
 import JIT from './JIT'
 import Loading from './Loading'
 import Router from './Router'
@@ -94,10 +96,14 @@ const Visualize = {
           }
         })
 
-        const startPos = new $jit.Complex(0, 0)
+        //const startPos = new $jit.Complex(0, 0)
         const endPos = new $jit.Complex(mapping.get('xloc'), mapping.get('yloc'))
-        n.setPos(startPos, 'start')
+        //n.setPos(startPos, 'start')
+        //n.setPos(endPos, 'end')
+        n.setPos(endPos, 'current')
         n.setPos(endPos, 'end')
+        n.setData('dim', 1, 'start')
+        n.setData('dim', 25, 'end')
       })
     } else if (self.type === 'ForceDirected3D') {
       self.mGraph.compute()
@@ -170,7 +176,13 @@ 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.animate(JIT.ForceDirected.animateSavedLayout)
+          //self.mGraph.fx.animate({
+          //  modes: ['node-property:dim'],
+          //  duration: 3000
+          //})
+          self.mGraph.plot()
+          Engine.run(true)
         } else if (self.type === 'ForceDirected3D') {
           self.mGraph.animate(JIT.ForceDirected.animateFDLayout)
         }

frontend/src/Metamaps/index.js

@@ -7,6 +7,7 @@ import Control from './Control'
 import Create from './Create'
 import DataModel from './DataModel'
 import Debug from './Debug'
+import Engine from './Engine'
 import Filter from './Filter'
 import GlobalUI, {
   Search, CreateMap, ImportDialog, Account as GlobalUIAccount,
@@ -44,6 +45,7 @@ Metamaps.Control = Control
 Metamaps.Create = Create
 Metamaps.DataModel = DataModel
 Metamaps.Debug = Debug
+Metamaps.Engine = Engine
 Metamaps.Filter = Filter
 Metamaps.GlobalUI = GlobalUI
 Metamaps.GlobalUI.Search = Search