positions

updating of data

src/components/current-instance.vue

@@ -21,7 +21,7 @@ export default {
     // knowledgeobject,
     humaninterface
   },
-  computed: mapState(["allobjects"])
+  computed: mapState(["accounts_db", "knowledge_db", "positions_db"])
 };
 </script>
 

src/components/human-interface.vue

@@ -12,18 +12,25 @@ import SVG from "svg.js";
 import draggy from "svg.draggy.js";
 import connectable from "svg.connectable.js";
 import { mapGetters } from "vuex";
+import { mapState } from "vuex"
 
 import styledviewer from "@/components/styled-viewer.vue";
 
 var knowledgeObj;
 var knowledgeObjid;
 
+var canvasX = 600;
+var canvasY = 300;
+var xOffset = 0;
+var yOffset = -370;
+
 export default {
   name: "human-interface",
   components: {
     styledviewer: styledviewer
   },
 
+  computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
   data: function() {
     return {
       id: null,
@@ -43,20 +50,20 @@ export default {
   },
   mounted: function() {
     // SVG UI next
-    var draw = SVG("human-interface").size(600, 300);
-    var data = [];
-    var data2 = [];
-
-    let objects = this.allObjects();
-    //console.log(objects)
-    objects.forEach(element => {
-      data.push(element.__ob__.value.doc);
+    var draw = SVG("human-interface").size(canvasX, canvasY);
+    var objects = [];
+    var positions = [];
+
+    //FIXME Iterate over contents of state.knowlege_db instead
+    console.log('NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue')
+console.log(this.$store.state.knowledge_db.allDocs());
+//    this.$store.state.knowledge_db.allDocs().forEach(element => {
+    this.allObjects().forEach(element => {
+      objects.push(element.__ob__.value.doc);
     });
 
-    let positions = this.allPositions();
-    //console.log(positions)
-    positions.forEach(element => {
-      data2.push(element.__ob__.value.doc);
+    this.allPositions().forEach(element => {
+      positions.push(element.__ob__.value.doc);
     });
 
     var links = draw.group();
@@ -73,54 +80,46 @@ export default {
     // FIXMEneed to make arrow function
     nodes.on("startyourpositions", event => {
       console.log("hit");
-
-     // if (element.id == SVG.get(element.id)){
-      //   SVG.get(element.id).animate().move(element.xpos,element.ypos)
-      // }
-        
-      data2.forEach(function(element) {
-          if (element.id == SVG.get(element.id)){
-              //console.log(element.id);
-              //console.log(element.xpos);
-              //console.log(element.ypos);
-             // console.log(SVG.get(element.id))
-              var bob = SVG.get(element.id).rect(10,10);
-              //console.log(bob);
-              bob.cx(element.xpos).cy(element.ypos-370)
-          }
-      });
-   
-       
     });
 
     // loops through all the objects and renders them
-    data.forEach(element => {
+    objects.forEach(object => {
       //index = index + 20
 
       knowledgeObj = nodes
         .group()
-        .draggy({ minX: 0, minY: 0, maxX: 600, maxY: 300 });
+        .draggy();
+        //.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY });
       // assigns group <g id="id" of the unique id in database
 
-      knowledgeObj.node.id = element._id;
+      knowledgeObj.node.id = object._id;
+      var pos = positions.filter(position => position.id == knowledgeObj.node.id); 
+      var x = pos[0].xpos || 0;
+      var y = pos[0].ypos || 0;
 
-      if (element.type == "projecttxt") {
+      if (object.type == "projecttxt") {
         knowledgeObj.rect(60, 40).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)]
+          fill: colours[Math.floor(Math.random() * colours.length)],
+          x: x,
+          y: y,
           //.svg('<g id="doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="3" y="0" width="115" height="171"></rect><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="113" height="164"></rect><path d="M23.5,40.5 L95,40.5" id="Line-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,54.25 L96,54.25" id="Line-3-Copy" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,69.25 L96,69.25" id="Line-3-Copy-2" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,86.25 L70,86.25" id="Line-3-Copy-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path></g>')
         });
-      } else if (element.type == "slidedeck") {
+      } else if (object.type == "slidedeck") {
         knowledgeObj.circle(30, 30).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)]
+          fill: colours[Math.floor(Math.random() * colours.length)],
+          cx: x,
+          cy: y,
         });
       } else {
         knowledgeObj.ellipse(20, 50).attr({
-          fill: colours[Math.floor(Math.random() * colours.length)]
+          fill: colours[Math.floor(Math.random() * colours.length)],
+          cx: x,
+          cy: y,
         });
      }
 
       objectsProcessed++;
-      if (objectsProcessed === data.length) {
+      if (objectsProcessed === objects.length) {
         
         nodes.fire("startyourpositions");
         console.log("fire...");
@@ -145,7 +144,7 @@ export default {
     // mousedown is capturing a single mouse press
     // possibly useful for drawing connections between objects
     nodes.mousedown(node => {
-      //console.log("start connect");
+      console.log("start connect");
     });
 
     nodes.mouseup(event => {
@@ -155,14 +154,13 @@ export default {
       // 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.clientX);
-      console.log(event.clientY);
-      // the svgjs object
-      //console.log(SVG.adopt(event.target))
+
+      var pos = new Object();
+      pos['id'] = this.id;
+      pos['xpos'] = event.clientX + xOffset;
+      pos['ypos'] = event.clientY + yOffset;
+
+      this.$store.dispatch("updateKnowledgePosition", pos);
     });
 
     nodes.dblclick(node => {

src/store.js

@@ -5,10 +5,6 @@ import pouchdb from "pouchdb";
 // server admin has to create DB first and CORS allows specific domains.
 //https://nn.adamprocter.co.uk/accounts etc
 
-const accounts_db = new pouchdb("accounts");
-const knowledge_db = new pouchdb("knowledge");
-const positions_db = new pouchdb("positions");
-
 //these vars may no longer needed as far as I know we use pouchdb.sync inline now see FIXME line below
 //var remote_accounts_db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
 //var remote_knowledge_db = new pouchdb('https://nn.adamprocter.co.uk/knowledge');
@@ -24,14 +20,18 @@ export default new Vuex.Store({
     // should this be here now
     allobjects: [],
     allpositions:[],
-    database: null,
+    accounts_db: null,
+    knowledge_db: null,
+    positions_db: null,
     isLoggedIn: !!localStorage.getItem("token")
   },
 
   mutations: {
     // FIXME this is not right - data is undefined at this moment
-    DB_INIT(state, data) {
-      state.database = data.database;
+    DB_INIT(state) {
+      state.accounts_db = new pouchdb("accounts");
+      state.knowledge_db = new pouchdb("knowledge");
+      state.positions_db = new pouchdb("positions");
     },
 
     LOGIN(state) {
@@ -45,7 +45,7 @@ export default new Vuex.Store({
       state.isLoggedIn = false;
     },
 
-    REGISTER_ACCOUNT(data, payload) {
+    REGISTER_ACCOUNT(state, payload) {
       var uniqueid =
         Math.random()
           .toString(36)
@@ -81,6 +81,17 @@ export default new Vuex.Store({
 
     },
 
+   GET_KNOWLEDGE_OBJECTS(state, payload) {
+      var ids = [];
+      
+      state.allobjects.forEach(payload => {
+        ids.push(payload.id);
+      });
+      if (!ids.includes(payload.id)) {
+        state.allobjects.push(payload);
+      }
+    },
+
    GET_KNOWLEDGE_POSITIONS(state, payload) {
       var ids = [];
       
@@ -92,7 +103,7 @@ export default new Vuex.Store({
       }
     },
 
-    ADD_KNOWLEDGE_OBJECT(data, payload) {
+    ADD_KNOWLEDGE_OBJECT(state, payload) {
       var uniqueid =
         Math.random()
           .toString(36)
@@ -100,7 +111,7 @@ export default new Vuex.Store({
         Math.random()
           .toString(36)
           .substring(2, 15);
-      knowledge_db.put({
+      state.knowledge_db.put({
         _id: uniqueid,
         type: payload.type,
         author: localStorage.getItem("token"),
@@ -109,7 +120,7 @@ export default new Vuex.Store({
         metadata: payload.metadata
       });
       //first time created
-      positions_db.put({
+      state.positions_db.put({
         _id: uniqueid,
         id: uniqueid,
         author: localStorage.getItem("token"),
@@ -123,14 +134,13 @@ export default new Vuex.Store({
     },
 
     // FIXME called on mouse up but not always heard..
-    UPDATE_KNOWLEDGE_POSITION(data, payload) {
-      console.log(payload.id);
+    UPDATE_KNOWLEDGE_POSITION(state, payload) {
       var id = payload.id;
       id.toString();
-      positions_db.get(id).then(function(updater) {
+      state.positions_db.get(id).then(function(updater) {
         (updater.xpos = payload.xpos),
           (updater.ypos = payload.ypos),
-          positions_db.put(updater).then(function() {
+          state.positions_db.put(updater).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");
           });
@@ -148,7 +158,7 @@ export default new Vuex.Store({
     },
 
     showKnowledgeObjects({ commit }) {
-      knowledge_db
+      this.state.knowledge_db
         .allDocs({
           include_docs: true,
           attachments: true
@@ -161,18 +171,30 @@ export default new Vuex.Store({
        
     },
 
-    getKnowledgePositions({ commit }) {
-    positions_db
-    .allDocs({
-      include_docs: true,
-      attachments: true
-    })
-    .then(result => {
-      Array.from(result.rows.values()).forEach(element => {
-        commit("GET_KNOWLEDGE_POSITIONS", element);
+    getKnowledgeObjects({ commit }) {
+      this.state.knowledge_db
+      .allDocs({
+        include_docs: true,
+        attachments: true
+      })
+      .then(result => {
+        Array.from(result.rows.values()).forEach(element => {
+          commit("GET_KNOWLEDGE_OBJECTS", element);
+        });
       });
-    });
+    },
 
+    getKnowledgePositions({ commit }) {
+      this.state.positions_db
+      .allDocs({
+        include_docs: true,
+        attachments: true
+      })
+      .then(result => {
+        Array.from(result.rows.values()).forEach(element => {
+          commit("GET_KNOWLEDGE_POSITIONS", element);
+        });
+      });
   },
 
     addKnowledgeObject({ commit }, payload) {

yarn.lock

@@ -591,21 +591,21 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@fortawesome/fontawesome-common-types@^0.2.14":
-  version "0.2.14"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.14.tgz#0eb86a77ac88e8c12c48591735283f0bf0ea5606"
+"@fortawesome/fontawesome-common-types@^0.2.15":
+  version "0.2.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz#16af950653083d1e3064061de9f8e5e3b579f688"
 
 "@fortawesome/fontawesome-svg-core@^1.2.2":
-  version "1.2.14"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.14.tgz#48fde5fbfa223cffd5fac9c0402cfbe87605a7d0"
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz#368f9fc7e8e8d8636495dc7483f97510f920ba97"
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.14"
+    "@fortawesome/fontawesome-common-types" "^0.2.15"
 
 "@fortawesome/free-solid-svg-icons@^5.2.0":
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.1.tgz#df41b8643383862a2af93456e7129e5ffc0fb7ae"
+  version "5.7.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.2.tgz#9ec2ed353d630092a8e19cc8aae2f716572963e5"
   dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.14"
+    "@fortawesome/fontawesome-common-types" "^0.2.15"
 
 "@fortawesome/vue-fontawesome@^0.1.1":
   version "0.1.5"