From 3ff102b22807aedced7f4840cabcf9a746290a4c Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Thu, 5 Jan 2017 00:05:18 -0500 Subject: [PATCH] initial particle test --- frontend/src/Metamaps/DataModel/Mapping.js | 18 ++++----- frontend/src/Metamaps/DataModel/Topic.js | 1 + frontend/src/Metamaps/DataModel/index.js | 5 +++ frontend/src/Metamaps/Engine.js | 45 ++++++++++++++++++++++ frontend/src/Metamaps/JIT.js | 2 + frontend/src/Metamaps/Map/index.js | 2 + frontend/src/Metamaps/Topic.js | 5 ++- frontend/src/Metamaps/Visualize.js | 18 +++++++-- frontend/src/Metamaps/index.js | 2 + 9 files changed, 85 insertions(+), 13 deletions(-) create mode 100644 frontend/src/Metamaps/Engine.js diff --git a/frontend/src/Metamaps/DataModel/Mapping.js b/frontend/src/Metamaps/DataModel/Mapping.js index 2cd2b0b8..2987a2a5 100644 --- a/frontend/src/Metamaps/DataModel/Mapping.js +++ b/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) + } } }) diff --git a/frontend/src/Metamaps/DataModel/Topic.js b/frontend/src/Metamaps/DataModel/Topic.js index f9c07678..b62ab413 100644 --- a/frontend/src/Metamaps/DataModel/Topic.js +++ b/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' diff --git a/frontend/src/Metamaps/DataModel/index.js b/frontend/src/Metamaps/DataModel/index.js index 6d41e19f..eb40ab37 100644 --- a/frontend/src/Metamaps/DataModel/index.js +++ b/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) + }) } } diff --git a/frontend/src/Metamaps/Engine.js b/frontend/src/Metamaps/Engine.js new file mode 100644 index 00000000..567e4749 --- /dev/null +++ b/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 diff --git a/frontend/src/Metamaps/JIT.js b/frontend/src/Metamaps/JIT.js index d91a2a93..1625111f 100644 --- a/frontend/src/Metamaps/JIT.js +++ b/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) { diff --git a/frontend/src/Metamaps/Map/index.js b/frontend/src/Metamaps/Map/index.js index 51038b87..5d04414c 100644 --- a/frontend/src/Metamaps/Map/index.js +++ b/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') } }, diff --git a/frontend/src/Metamaps/Topic.js b/frontend/src/Metamaps/Topic.js index 7cdcf3a7..8c70e6eb 100644 --- a/frontend/src/Metamaps/Topic.js +++ b/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, diff --git a/frontend/src/Metamaps/Visualize.js b/frontend/src/Metamaps/Visualize.js index 577c5418..7f58ed11 100644 --- a/frontend/src/Metamaps/Visualize.js +++ b/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) } diff --git a/frontend/src/Metamaps/index.js b/frontend/src/Metamaps/index.js index 61f5e18a..a0ea5683 100644 --- a/frontend/src/Metamaps/index.js +++ b/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