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 {
// knowledgeobject,
humaninterface
},
computed: mapState(["allobjects"])
computed: mapState(["accounts_db", "knowledge_db", "positions_db"])
};
</script>
......
......@@ -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 => {
......
......@@ -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) {
......
......@@ -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"
......
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