Commit 4bb5fc1f authored by Adam Procter's avatar Adam Procter

Merge branch 'sharedlocations2'

parents 8bedae6e 3640269d
Pipeline #225 failed with stages
in 1 minute and 3 seconds
......@@ -23,15 +23,21 @@ export default {
components: {
styledviewer: styledviewer
},
data: function() {
return {
// data: [],
id: null,
xpos: null,
ypos: null,
isShowing: false
};
},
methods: {
...mapGetters(["allObjects"])
...mapGetters(["allObjects"]),
...mapGetters(["allPositions"])
},
props: {
//object: Object
},
......@@ -39,13 +45,19 @@ export default {
// SVG UI next
var draw = SVG("user-interface").size(600, 300);
var data = [];
var data2 = [];
let objects = this.allObjects();
//console.log(objects)
objects.forEach(element => {
data.push(element.__ob__.value.doc);
});
//console.log(data)
let positions = this.allPositions();
//console.log(positions)
positions.forEach(element => {
data2.push(element.__ob__.value.doc);
});
var links = draw.group();
var markers = draw.group();
......@@ -53,13 +65,44 @@ export default {
var index = 0;
var colours = ["red", "green", "blue", "yellow", "cyan"];
var objectsProcessed = 0;
// when fired loops through applying all the positions if id matches
// needs to be running this update in Realtime to update moves
// maybe in watch: { } ??? function ???
// 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 => {
//index = index + 20
knowledgeObj = nodes
.group()
.draggy({ minX: 0, minY: 0, maxX: 600, maxY: 300 });
// assigns group <g id="id" of the unique id in database
knowledgeObj.node.id = element._id;
if (element.type == "projecttxt") {
knowledgeObj.rect(60, 40).attr({
......@@ -70,59 +113,56 @@ 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)]
});
}
objectsProcessed++;
if (objectsProcessed === data.length) {
nodes.fire("startyourpositions");
console.log("fire...");
}
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);
// OLD Visualising whats in the couch
// var type = knowledgeObj.text(element.type);
// var title = knowledgeObj.text(element.title);
// var uniqueid = knowledgeObj.text(element._id);
// title.move(0, 40);
// uniqueid.move(0, 80);
// rect_1.connectable({
// container: links,
// markers: markers
// }, rect_2).setLineColor("#000000");
});
// rect_1.connectable({
// container: links,
// markers: markers
// }, rect_2).setLineColor("#000000");
// 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");
});
// mouseup is where we capture position of objects after they have been moved
// FIXME: determine unique ID of the node that has been moved
// FIXME: associate each node with a knowledge object in the db
// so we have a mapping to record these movements
//nodes.mouseup(node => {
// this logs out the final id in the array it doesnt know which one I moved...
// node.clientX and Y is fine different thing
// console.log(currentTarget)
// just gets the last id in the list not the one dragged
// console.log(knowledgeObj.native().id)
//this.fill({ color: '#f06' })
//knowledgeObj.fill({ color: '#f06' })
// console.log("x: "+node.clientX)
// console.log("y: "+node.clientY)
//node.first().remove()
// })
nodes.mouseup(event => {
// mouse coordinates
console.log(event.clientX, event.clientY);
// 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.clientX);
console.log(event.clientY);
// the svgjs object
//console.log(SVG.adopt(event.target))
// the id
//console.log(SVG.adopt(event.target).id())
});
nodes.dblclick(node => {
......
......@@ -23,6 +23,7 @@ export default new Vuex.Store({
state: {
// should this be here now
allobjects: [],
allpositions:[],
database: null,
isLoggedIn: !!localStorage.getItem("token")
},
......@@ -69,7 +70,7 @@ export default new Vuex.Store({
SHOW_KNOWLEDGE_OBJECTS(state, payload) {
var ids = [];
var knowledge = [];
//var knowledge = [];
state.allobjects.forEach(payload => {
ids.push(payload.id);
......@@ -77,6 +78,18 @@ export default new Vuex.Store({
if (!ids.includes(payload.id)) {
state.allobjects.push(payload);
}
},
GET_KNOWLEDGE_POSITIONS(state, payload) {
var ids = [];
state.allpositions.forEach(payload => {
ids.push(payload.id);
});
if (!ids.includes(payload.id)) {
state.allpositions.push(payload);
}
},
ADD_KNOWLEDGE_OBJECT(data, payload) {
......@@ -95,10 +108,36 @@ 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");
},
// FIXME called on mouse up but not always heard..
UPDATE_KNOWLEDGE_POSITION(data, payload) {
console.log(payload.id);
var id = payload.id;
id.toString();
positions_db.get(id).then(function(updater) {
(updater.xpos = payload.xpos),
(updater.ypos = payload.ypos),
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");
});
});
}
},
actions: {
db_init({ commit }) {
commit("DB_INIT");
......@@ -119,12 +158,31 @@ export default new Vuex.Store({
commit("SHOW_KNOWLEDGE_OBJECTS", element);
});
});
},
getKnowledgePositions({ commit }) {
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) {
commit("ADD_KNOWLEDGE_OBJECT", payload);
},
updateKnowledgePosition({ commit }, payload) {
commit("UPDATE_KNOWLEDGE_POSITION", payload);
},
login({ commit }, payload) {
commit(LOGIN, payload);
......@@ -136,6 +194,7 @@ export default new Vuex.Store({
}, 1000);
});
},
logout({ commit }) {
localStorage.removeItem("token");
commit(LOGOUT);
......@@ -148,6 +207,9 @@ export default new Vuex.Store({
},
allObjects: state => {
return state.allobjects;
},
allPositions: state => {
return state.allpositions;
}
}
});
......@@ -31,6 +31,7 @@ export default {
// FIXME what should the store do here
// this.$store.state.count
this.$store.dispatch("showKnowledgeObjects");
this.$store.dispatch("getKnowledgePositions");
//this.$store.getters.allObjects
//return this.$store.getters.allObjects
......
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