building shared positions

a bunch of work!

src/components/user-interface.vue

@@ -23,15 +23,26 @@ export default {
   components: {
     styledviewer: styledviewer
   },
+
   data: function() {
     return {
       // data: [],
+      // id:1
+      // mode:"shared"
+      id:null,
+      xpos:null,
+      ypos:null,
       isShowing: false
     };
   },
+
+
   methods: {
     ...mapGetters(["allObjects"])
   },
+
+
+
   props: {
     //object: Object
   },
@@ -70,17 +81,23 @@ export default {
         knowledgeObj.circle(30, 30).attr({
           fill: colours[Math.floor(Math.random() * colours.length)]
         });
+
+      } else {
+         knowledgeObj.ellipse(20, 50).attr({
+          fill: colours[Math.floor(Math.random() * colours.length)]
+        });
       }
-      var type = knowledgeObj.text(element.type);
-      var title = knowledgeObj.text(element.title);
-      var uniqueid = knowledgeObj.text(element._id);
+    //  var type = knowledgeObj.text(element.type);
+    //  var title = knowledgeObj.text(element.title);
+    //  var uniqueid = knowledgeObj.text(element._id);
       // assign node id to the unique id in database
       knowledgeObj.node.id = element._id;
 
-      console.log(knowledgeObj.node.id);
+      //console.log(knowledgeObj.node.id);
+    //  parentNode
 
-      title.move(0, 40);
-      uniqueid.move(0, 80);
+      // title.move(0, 40);
+      // uniqueid.move(0, 80);
 
       //  rect_1.connectable({
       //    container: links,
@@ -112,17 +129,21 @@ export default {
     //  })
 
     nodes.mouseup(event => {
-      // mouse coordinates
+      // FIX ME : we know the id and the locations to
+      // object coordinates
       console.log(event.clientX, event.clientY);
-
+      // the id of the g object of the clicked svg object
+      //console.log(SVG.adopt(event.target.parentNode).id())
+      this.id = SVG.adopt(event.target.parentNode).id();
+      this.xpos = event.clientX;
+      this.ypos = event.clientY;
+      this.$store.dispatch("updateKnowledgePosition", this);
       // the node which was clicked
-      console.log(event.target);
+      //console.log(event.target);
 
       // the svgjs object
       //console.log(SVG.adopt(event.target))
 
-      // the id
-      //console.log(SVG.adopt(event.target).id())
     });
 
     nodes.dblclick(node => {

src/store.js

@@ -95,10 +95,39 @@ export default new Vuex.Store({
         connections: payload.connections,
         metadata: payload.metadata
       });
+      //first time created
+      positions_db.put({
+        _id: uniqueid,
+        id: uniqueid,
+        author: localStorage.getItem("token"),
+        mode: "shared",
+        xpos: 0,
+        ypos: 0
+      });
       // FIXME this does sync but does it pass the changes we want to capture via VUEX STORE
       pouchdb.sync("knowledge", "https://nn.adamprocter.co.uk/knowledge");
-    }
-  },
+      pouchdb.sync("positions", "https://nn.adamprocter.co.uk/positions");
+    },
+
+    UPDATE_KNOWLEDGE_POSITION(data, payload) {
+      console.log(payload.id)
+      var id = payload.id
+      id.toString()
+      positions_db.get(id).then(function (charlie) {
+      
+      positions_db.put({
+        _id:id,
+        xpos: payload.xpos,
+        ypos: payload.ypos
+      }).then(function(){
+   // FIXME this does sync but does it pass the changes we want to capture via VUEX STORE
+   pouchdb.sync("positions", "https://nn.adamprocter.co.uk/positions");
+      });
+    })
+  }
+
+},
+
   actions: {
     db_init({ commit }) {
       commit("DB_INIT");
@@ -125,6 +154,10 @@ export default new Vuex.Store({
       commit("ADD_KNOWLEDGE_OBJECT", payload);
     },
 
+    updateKnowledgePosition({ commit }, payload) {
+      commit("UPDATE_KNOWLEDGE_POSITION", payload);
+    },
+
     login({ commit }, payload) {
       commit(LOGIN, payload);
 
@@ -136,6 +169,7 @@ export default new Vuex.Store({
         }, 1000);
       });
     },
+
     logout({ commit }) {
       localStorage.removeItem("token");
       commit(LOGOUT);