Commit 86bd692e authored by Adam Procter's avatar Adam Procter

double click data thing

parent 61a2eefe
Pipeline #247 canceled with stages
......@@ -2,7 +2,7 @@
<div id="human-interface">
<!-- the SVG.js stuff appears here -->
<transition name="fade">
<styledviewer v-show="isShowing"></styledviewer>
<styledviewer v-show="isShowing" :object="this.object"></styledviewer>
</transition>
</div>
</template>
......@@ -13,8 +13,8 @@ import SVG from "svg.js";
// next two libraries used within SVG.js
import draggy from "svg.draggy.js";
import connectable from "svg.connectable.js";
import { mapGetters } from "vuex";
import { mapState } from "vuex"
import { mapGetters, mapActions, mapState } from "vuex";
import { state } from "vuex";
import styledviewer from "@/components/styled-viewer.vue";
......@@ -32,10 +32,11 @@ export default {
styledviewer: styledviewer
},
computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
// computed: mapState(["accounts_db", "knowledge_db", "positions_db"]),
data: function() {
return {
id: null,
object: null,
xpos: null,
ypos: null,
isShowing: false
......@@ -43,8 +44,14 @@ export default {
},
methods: {
...mapGetters(["allObjects"]),
...mapGetters(["allPositions"])
...mapGetters(["allObjects", "allPositions"]),
...mapGetters(["accounts_db", "knowledge_db", "positions_db"]),
...mapActions([
"showKnowledgeObjects",
"getKnowledgeObjects",
"getKnowledgePositions"
]),
...mapActions(["addKnowledgeObject", "updateKnowledgePosition"])
},
props: {
......@@ -52,14 +59,16 @@ export default {
},
mounted: function() {
// SVG UI next
console.log("inside human-interface mounted()");
console.log(this.knowledge_db());
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 => {
console.log("NEXT OUTPUT IS KNOWLEDGE_DB FROM INSIDE human-interface.vue");
console.log(this.getKnowledgeObjects());
// this.$store.state.knowledge_db.allDocs().forEach(element => {
this.allObjects().forEach(element => {
objects.push(element.__ob__.value.doc);
});
......@@ -87,14 +96,14 @@ console.log(this.$store.state.knowledge_db.allDocs());
objects.forEach(object => {
//index = index + 20
knowledgeObj = nodes
.group()
.draggy();
//.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY });
knowledgeObj = nodes.group().draggy();
//.draggy({ minX: 0, minY: 0, maxX: canvasX, maxY: canvasY });
// assigns group <g id="id" of the unique id in database
knowledgeObj.node.id = object._id;
var pos = positions.filter(position => position.id == knowledgeObj.node.id);
var pos = positions.filter(
position => position.id == knowledgeObj.node.id
);
var x = pos[0].xpos || 0;
var y = pos[0].ypos || 0;
......@@ -102,26 +111,25 @@ console.log(this.$store.state.knowledge_db.allDocs());
knowledgeObj.rect(60, 40).attr({
fill: colours[Math.floor(Math.random() * colours.length)],
x: x,
y: y,
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 (object.type == "slidedeck") {
knowledgeObj.circle(30, 30).attr({
fill: colours[Math.floor(Math.random() * colours.length)],
cx: x,
cy: y,
cy: y
});
} else {
knowledgeObj.ellipse(20, 50).attr({
fill: colours[Math.floor(Math.random() * colours.length)],
cx: x,
cy: y,
cy: y
});
}
}
objectsProcessed++;
if (objectsProcessed === objects.length) {
nodes.fire("startyourpositions");
console.log("fire...");
}
......@@ -155,16 +163,25 @@ console.log(this.$store.state.knowledge_db.allDocs());
// 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();
var obj;
this.allObjects().forEach(obj => {
if (obj.id == this.id) {
this.object = obj;
}
});
console.log("ths object");
console.log(this.object);
var pos = new Object();
pos['id'] = this.id;
pos['xpos'] = event.clientX + xOffset;
pos['ypos'] = event.clientY + yOffset;
pos["id"] = this.id;
pos["xpos"] = event.clientX + xOffset;
pos["ypos"] = event.clientY + yOffset;
this.$store.dispatch("updateKnowledgePosition", pos);
});
nodes.dblclick(node => {
this.id = SVG.adopt(node.target.parentNode).id();
// isShowing = true
// component styled-viewer
if (this.isShowing == false) {
......
<template>
<div class="logo">
<h1>node<span>noggin</span>
<h1>node
<span>noggin</span>
<!-- <img src="../assets/img/icon.png" alt="Logo for project codename nodenoggin"> -->
</h1>
</div>
......
<template>
<div class="viewer">
<h2>STYLISH</h2>
<p>This is some dummy text, no real data yet. </p>
<h2>{{object.id}}</h2>
<p>{{object.doc.title}}</p>
</div>
</template>
<script>
export default {
name: "styled-viewer",
props: {}
// methods: {
// getobjecttitle: function(object_id) {
// console.log("object id: " + this.object_id);
// }
// },
props: ["object"]
};
</script>
......
......@@ -12,7 +12,7 @@ export default new Vuex.Store({
state: {
// should this be here now
allobjects: [],
allpositions:[],
allpositions: [],
accounts_db: null,
knowledge_db: null,
positions_db: null,
......@@ -70,12 +70,11 @@ export default new Vuex.Store({
if (!ids.includes(payload.id)) {
state.allobjects.push(payload);
}
},
GET_KNOWLEDGE_OBJECTS(state, payload) {
GET_KNOWLEDGE_OBJECTS(state, payload) {
var ids = [];
state.allobjects.forEach(payload => {
ids.push(payload.id);
});
......@@ -84,9 +83,9 @@ export default new Vuex.Store({
}
},
GET_KNOWLEDGE_POSITIONS(state, payload) {
GET_KNOWLEDGE_POSITIONS(state, payload) {
var ids = [];
state.allpositions.forEach(payload => {
ids.push(payload.id);
});
......@@ -159,34 +158,33 @@ export default new Vuex.Store({
commit("SHOW_KNOWLEDGE_OBJECTS", 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);
.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);
.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);
......@@ -223,6 +221,15 @@ export default new Vuex.Store({
},
allPositions: state => {
return state.allpositions;
},
knowledge_db: state => {
return state.knowledge_db;
},
accounts_db: state => {
return state.accounts_db;
},
positions_db: state => {
return state.positions_db;
}
}
});
......@@ -25,6 +25,7 @@ export default {
created() {
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