Commit 59f24b17 authored by Adam Procter's avatar Adam Procter

positions

updating of data
parent 8936b528
Pipeline #231 failed with stages
...@@ -21,7 +21,7 @@ export default { ...@@ -21,7 +21,7 @@ export default {
// knowledgeobject, // knowledgeobject,
humaninterface humaninterface
}, },
computed: mapState(["allobjects"]) computed: mapState(["accounts_db", "knowledge_db", "positions_db"])
}; };
</script> </script>
......
...@@ -12,18 +12,25 @@ import SVG from "svg.js"; ...@@ -12,18 +12,25 @@ import SVG from "svg.js";
import draggy from "svg.draggy.js"; import draggy from "svg.draggy.js";
import connectable from "svg.connectable.js"; import connectable from "svg.connectable.js";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { mapState } from "vuex"
import styledviewer from "@/components/styled-viewer.vue"; import styledviewer from "@/components/styled-viewer.vue";
var knowledgeObj; var knowledgeObj;
var knowledgeObjid; var knowledgeObjid;
var canvasX = 600;
var canvasY = 300;
var xOffset = 0;
var yOffset = -370;
export default { export default {
name: "human-interface", name: "human-interface",
components: { components: {
styledviewer: styledviewer styledviewer: styledviewer
}, },
computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
data: function() { data: function() {
return { return {
id: null, id: null,
...@@ -43,20 +50,20 @@ export default { ...@@ -43,20 +50,20 @@ export default {
}, },
mounted: function() { mounted: function() {
// SVG UI next // SVG UI next
var draw = SVG("human-interface").size(600, 300); var draw = SVG("human-interface").size(canvasX, canvasY);
var data = []; var objects = [];
var data2 = []; var positions = [];
let objects = this.allObjects(); //FIXME Iterate over contents of state.knowlege_db instead
//console.log(objects) console.log('NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue')
objects.forEach(element => { console.log(this.$store.state.knowledge_db.allDocs());
data.push(element.__ob__.value.doc); // this.$store.state.knowledge_db.allDocs().forEach(element => {
this.allObjects().forEach(element => {
objects.push(element.__ob__.value.doc);
}); });
let positions = this.allPositions(); this.allPositions().forEach(element => {
//console.log(positions) positions.push(element.__ob__.value.doc);
positions.forEach(element => {
data2.push(element.__ob__.value.doc);
}); });
var links = draw.group(); var links = draw.group();
...@@ -73,54 +80,46 @@ export default { ...@@ -73,54 +80,46 @@ export default {
// FIXMEneed to make arrow function // FIXMEneed to make arrow function
nodes.on("startyourpositions", event => { nodes.on("startyourpositions", event => {
console.log("hit"); 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 // loops through all the objects and renders them
data.forEach(element => { objects.forEach(object => {
//index = index + 20 //index = index + 20
knowledgeObj = nodes knowledgeObj = nodes
.group() .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 // 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({ 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>') //.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({ 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 { } else {
knowledgeObj.ellipse(20, 50).attr({ 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++; objectsProcessed++;
if (objectsProcessed === data.length) { if (objectsProcessed === objects.length) {
nodes.fire("startyourpositions"); nodes.fire("startyourpositions");
console.log("fire..."); console.log("fire...");
...@@ -145,7 +144,7 @@ export default { ...@@ -145,7 +144,7 @@ export default {
// mousedown is capturing a single mouse press // mousedown is capturing a single mouse press
// possibly useful for drawing connections between objects // possibly useful for drawing connections between objects
nodes.mousedown(node => { nodes.mousedown(node => {
//console.log("start connect"); console.log("start connect");
}); });
nodes.mouseup(event => { nodes.mouseup(event => {
...@@ -155,14 +154,13 @@ export default { ...@@ -155,14 +154,13 @@ export default {
// the id of the g object of the clicked svg object // the id of the g object of the clicked svg object
//console.log(SVG.adopt(event.target.parentNode).id()) //console.log(SVG.adopt(event.target.parentNode).id())
this.id = SVG.adopt(event.target.parentNode).id(); this.id = SVG.adopt(event.target.parentNode).id();
this.xpos = event.clientX;
this.ypos = event.clientY; var pos = new Object();
this.$store.dispatch("updateKnowledgePosition", this); pos['id'] = this.id;
// the node which was clicked pos['xpos'] = event.clientX + xOffset;
console.log(event.clientX); pos['ypos'] = event.clientY + yOffset;
console.log(event.clientY);
// the svgjs object this.$store.dispatch("updateKnowledgePosition", pos);
//console.log(SVG.adopt(event.target))
}); });
nodes.dblclick(node => { nodes.dblclick(node => {
......
...@@ -5,10 +5,6 @@ import pouchdb from "pouchdb"; ...@@ -5,10 +5,6 @@ import pouchdb from "pouchdb";
// server admin has to create DB first and CORS allows specific domains. // server admin has to create DB first and CORS allows specific domains.
//https://nn.adamprocter.co.uk/accounts etc //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 //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_accounts_db = new pouchdb('https://nn.adamprocter.co.uk/accounts');
//var remote_knowledge_db = new pouchdb('https://nn.adamprocter.co.uk/knowledge'); //var remote_knowledge_db = new pouchdb('https://nn.adamprocter.co.uk/knowledge');
...@@ -24,14 +20,18 @@ export default new Vuex.Store({ ...@@ -24,14 +20,18 @@ export default new Vuex.Store({
// should this be here now // should this be here now
allobjects: [], allobjects: [],
allpositions:[], allpositions:[],
database: null, accounts_db: null,
knowledge_db: null,
positions_db: null,
isLoggedIn: !!localStorage.getItem("token") isLoggedIn: !!localStorage.getItem("token")
}, },
mutations: { mutations: {
// FIXME this is not right - data is undefined at this moment // FIXME this is not right - data is undefined at this moment
DB_INIT(state, data) { DB_INIT(state) {
state.database = data.database; state.accounts_db = new pouchdb("accounts");
state.knowledge_db = new pouchdb("knowledge");
state.positions_db = new pouchdb("positions");
}, },
LOGIN(state) { LOGIN(state) {
...@@ -45,7 +45,7 @@ export default new Vuex.Store({ ...@@ -45,7 +45,7 @@ export default new Vuex.Store({
state.isLoggedIn = false; state.isLoggedIn = false;
}, },
REGISTER_ACCOUNT(data, payload) { REGISTER_ACCOUNT(state, payload) {
var uniqueid = var uniqueid =
Math.random() Math.random()
.toString(36) .toString(36)
...@@ -81,6 +81,17 @@ export default new Vuex.Store({ ...@@ -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) { GET_KNOWLEDGE_POSITIONS(state, payload) {
var ids = []; var ids = [];
...@@ -92,7 +103,7 @@ export default new Vuex.Store({ ...@@ -92,7 +103,7 @@ export default new Vuex.Store({
} }
}, },
ADD_KNOWLEDGE_OBJECT(data, payload) { ADD_KNOWLEDGE_OBJECT(state, payload) {
var uniqueid = var uniqueid =
Math.random() Math.random()
.toString(36) .toString(36)
...@@ -100,7 +111,7 @@ export default new Vuex.Store({ ...@@ -100,7 +111,7 @@ export default new Vuex.Store({
Math.random() Math.random()
.toString(36) .toString(36)
.substring(2, 15); .substring(2, 15);
knowledge_db.put({ state.knowledge_db.put({
_id: uniqueid, _id: uniqueid,
type: payload.type, type: payload.type,
author: localStorage.getItem("token"), author: localStorage.getItem("token"),
...@@ -109,7 +120,7 @@ export default new Vuex.Store({ ...@@ -109,7 +120,7 @@ export default new Vuex.Store({
metadata: payload.metadata metadata: payload.metadata
}); });
//first time created //first time created
positions_db.put({ state.positions_db.put({
_id: uniqueid, _id: uniqueid,
id: uniqueid, id: uniqueid,
author: localStorage.getItem("token"), author: localStorage.getItem("token"),
...@@ -123,14 +134,13 @@ export default new Vuex.Store({ ...@@ -123,14 +134,13 @@ export default new Vuex.Store({
}, },
// FIXME called on mouse up but not always heard.. // FIXME called on mouse up but not always heard..
UPDATE_KNOWLEDGE_POSITION(data, payload) { UPDATE_KNOWLEDGE_POSITION(state, payload) {
console.log(payload.id);
var id = payload.id; var id = payload.id;
id.toString(); id.toString();
positions_db.get(id).then(function(updater) { state.positions_db.get(id).then(function(updater) {
(updater.xpos = payload.xpos), (updater.xpos = payload.xpos),
(updater.ypos = payload.ypos), (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 // 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"); pouchdb.sync("positions", "https://nn.adamprocter.co.uk/positions");
}); });
...@@ -148,7 +158,7 @@ export default new Vuex.Store({ ...@@ -148,7 +158,7 @@ export default new Vuex.Store({
}, },
showKnowledgeObjects({ commit }) { showKnowledgeObjects({ commit }) {
knowledge_db this.state.knowledge_db
.allDocs({ .allDocs({
include_docs: true, include_docs: true,
attachments: true attachments: true
...@@ -161,18 +171,30 @@ export default new Vuex.Store({ ...@@ -161,18 +171,30 @@ export default new Vuex.Store({
}, },
getKnowledgePositions({ commit }) { getKnowledgeObjects({ commit }) {
positions_db this.state.knowledge_db
.allDocs({ .allDocs({
include_docs: true, include_docs: true,
attachments: true attachments: true
}) })
.then(result => { .then(result => {
Array.from(result.rows.values()).forEach(element => { Array.from(result.rows.values()).forEach(element => {
commit("GET_KNOWLEDGE_POSITIONS", 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) { addKnowledgeObject({ commit }, payload) {
......
...@@ -591,21 +591,21 @@ ...@@ -591,21 +591,21 @@
lodash "^4.17.10" lodash "^4.17.10"
to-fast-properties "^2.0.0" to-fast-properties "^2.0.0"
"@fortawesome/fontawesome-common-types@^0.2.14": "@fortawesome/fontawesome-common-types@^0.2.15":
version "0.2.14" version "0.2.15"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.14.tgz#0eb86a77ac88e8c12c48591735283f0bf0ea5606" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz#16af950653083d1e3064061de9f8e5e3b579f688"
"@fortawesome/fontawesome-svg-core@^1.2.2": "@fortawesome/fontawesome-svg-core@^1.2.2":
version "1.2.14" version "1.2.15"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.14.tgz#48fde5fbfa223cffd5fac9c0402cfbe87605a7d0" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz#368f9fc7e8e8d8636495dc7483f97510f920ba97"
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.14" "@fortawesome/fontawesome-common-types" "^0.2.15"
"@fortawesome/free-solid-svg-icons@^5.2.0": "@fortawesome/free-solid-svg-icons@^5.2.0":
version "5.7.1" version "5.7.2"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.1.tgz#df41b8643383862a2af93456e7129e5ffc0fb7ae" resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.7.2.tgz#9ec2ed353d630092a8e19cc8aae2f716572963e5"
dependencies: dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.14" "@fortawesome/fontawesome-common-types" "^0.2.15"
"@fortawesome/vue-fontawesome@^0.1.1": "@fortawesome/vue-fontawesome@^0.1.1":
version "0.1.5" version "0.1.5"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment