Skip to content
Snippets Groups Projects
Commit ba3bfedb authored by Adam Procter's avatar Adam Procter
Browse files

adding in connections pouch logic

parent f689a3fd
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
app/src/experimental/layers/ConnectionsLayer.vue 0 → 100644
+ 140
− 0
View file @ ba3bfedb
<template>
<svg
v-bind:viewBox="`0 0 ${width} ${height}`"
:width="width"
:height="height"
>
<template v-for="group in groups">
<path
v-on:click="(e) => onClick(curve, e)"
v-for="curve in group.connections"
v-bind:key="curve.id"
v-bind:d="curve.path"
v-bind:stroke="getPalette(curve.color, 'dark')"
v-bind:stroke-dasharray="
curve.lineDash
? curve.lineDash.join(' ')
: defaultConnectionProps.lineDash.join(' ')
"
v-bind:stroke-width="
curve.lineWidth || defaultConnectionProps.lineWidth
"
/>
</template>
<path
v-bind:stroke="getPalette('blue', 'dark')"
v-bind:stroke-width="defaultConnectionProps.lineWidth"
v-if="newConnection && newConnection.target"
v-bind:d="getCurve(newConnection)"
/>
<circle
v-bind:cx="newConnection.target.x"
v-bind:cy="newConnection.target.y"
r="10"
v-bind:fill="getPalette('blue', 'dark')"
v-if="newConnection && newConnection.target"
/>
</svg>
</template>
<script>
import { getPalette } from '@/experimental/constants/color'
// import { generateConnectionHandles } from '@/utils/nodes'
// import { generateBezierCurve, makeBezier } from '@/utils/svg'
//import { generateConnectionHandles } from '@/utils/nodes'
import { generateBezierCurve } from '@/experimental/utils/svg'
import { groupBy } from '@/experimental/utils/helpers'
const groupByFrom = groupBy('from')
export default {
props: {
width: {
type: Number,
},
height: {
type: Number,
},
nodes: {
type: Array,
},
connections: {
type: Array,
},
newConnection: {
type: Object,
},
onClickConnection: {
type: Function,
},
},
data() {
return {
getPalette,
defaultConnectionProps: {
hue: 'dark',
tension: 0.25,
lineWidth: 5,
lineDash: [0, 0],
},
}
},
computed: {
groups() {
const grouped = groupByFrom(this.connections)
return Object.keys(grouped).map((id) => {
return {
id,
connections: grouped[id].map((connection) => {
const fromNode = this.findNode(connection.from)
const toNode = this.findNode(connection.to)
return {
...connection,
path: generateBezierCurve(
fromNode,
toNode,
this.defaultConnectionProps.tension
),
}
}),
}
})
},
},
methods: {
getCurve(connection) {
const fromNode = this.findNode(connection.from)
const toNode = { ...connection.target, width: 1, height: 1 }
const r = generateBezierCurve(fromNode, toNode, 0.1)
return r
},
onClick(connection) {
this.onClickConnection(
[connection.id],
!!event.shiftKey || !!event.metaKey
)
},
findNode(id) {
return [...this.nodes].find((pt) => pt.id === id)
},
},
}
</script>
<style scoped>
svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
path {
fill: none;
transition: stroke-width 0.05s ease-in-out;
}
path:hover {
stroke-width: 10px;
}
</style>
app/src/store/index.js
+ 206
− 80
View file @ ba3bfedb
...@@ -66,7 +66,7 @@ const store = new Vuex.Store({ ...@@ -66,7 +66,7 @@ const store = new Vuex.Store({
], ],
configEmoji: [ configEmoji: [
//{} //{}
] ],
}, },
mutations: { mutations: {
CREATE_MICROCOSM(state, doc) { CREATE_MICROCOSM(state, doc) {
...@@ -97,7 +97,7 @@ const store = new Vuex.Store({ ...@@ -97,7 +97,7 @@ const store = new Vuex.Store({
pouchdb pouchdb
.allDocs({ .allDocs({
include_docs: true, include_docs: true,
attachments: true attachments: true,
}) })
.then(function (doc) { .then(function (doc) {
state.microcosm = microcosm state.microcosm = microcosm
...@@ -130,7 +130,7 @@ const store = new Vuex.Store({ ...@@ -130,7 +130,7 @@ const store = new Vuex.Store({
if (state.allNodes[i].doc.nodes[j].deleted != true) { if (state.allNodes[i].doc.nodes[j].deleted != true) {
const newNode = { const newNode = {
node_id: state.allNodes[i].doc.nodes[j].node_id, node_id: state.allNodes[i].doc.nodes[j].node_id,
node_text: state.allNodes[i].doc.nodes[j].node_text node_text: state.allNodes[i].doc.nodes[j].node_text,
} }
state.otherNodes.push(newNode) state.otherNodes.push(newNode)
...@@ -167,12 +167,8 @@ const store = new Vuex.Store({ ...@@ -167,12 +167,8 @@ const store = new Vuex.Store({
.catch(function (err) { .catch(function (err) {
if (err.status == 404) { if (err.status == 404) {
var uniqueid = var uniqueid =
Math.random() Math.random().toString(36).substring(2, 15) +
.toString(36) Math.random().toString(36).substring(2, 15)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15)
return pouchdb.put({ return pouchdb.put({
_id: state.myclient, _id: state.myclient,
_attachments: {}, _attachments: {},
...@@ -187,9 +183,9 @@ const store = new Vuex.Store({ ...@@ -187,9 +183,9 @@ const store = new Vuex.Store({
content_type: 'sheet', content_type: 'sheet',
// NOTE: first node is hidden due to no position // NOTE: first node is hidden due to no position
deleted: true, deleted: true,
attachment_name: '' attachment_name: '',
} },
] ],
}) })
} }
}) })
...@@ -206,12 +202,119 @@ const store = new Vuex.Store({ ...@@ -206,12 +202,119 @@ const store = new Vuex.Store({
if (err.status == 404) { if (err.status == 404) {
return pouchdb.put({ return pouchdb.put({
_id: state.global_pos_name, _id: state.global_pos_name,
positions: [] positions: [],
})
}
})
},
GET_CONNECTIONS(state) {
pouchdb
.get(state.global_con_name)
.then(function (doc) {
state.configConnections = doc.connections
})
.catch(function (err) {
console.log(err)
if (err.status == 404) {
return pouchdb.put({
_id: state.global_con_name,
connections: [],
})
}
})
},
MAKE_CONNECT(state, e) {
// console.log(state.connections[1].connection.id)
//add the new info connection here
//console.log(e)
//var first = e.e
//var second = e.f
var connectid =
Math.random().toString(36).substring(2, 15) +
Math.random().toString(36).substring(2, 15)
state.configConnections.push({
connectid: connectid,
startid: e.e,
endid: e.f,
startx: e.startx,
starty: e.starty,
endx: e.endx,
endy: e.endy,
connected: e.connected,
})
pouchdb
.get(state.global_con_name)
.then(function (doc) {
// put the store into pouchdb
return pouchdb.bulkDocs([
{
_id: state.global_con_name,
_rev: doc._rev,
connections: state.configConnections,
},
])
})
.then(function () {
return pouchdb.get(state.global_con_name).then(function (doc) {
state.configConnections = doc.connections
})
}) })
.catch(function (err) {
if (err.status == 404) {
// pouchdb.put({ })
} }
}) })
}, },
// UPDATE_CONNECT(state, e) {
// localnodeid = e.nodeid
// connectid = e.connectid
// var i
// for (i = 0; i < Object.keys(state.configConnections).length; i++) {
// //
// // if endid matches update endx and endy else if startid matchs update startx /y
// if (localnodeid == state.configConnections[i].startid) {
// state.configConnections[i].startx = e.xpos
// state.configConnections[i].starty = e.ypos
// //state.connections[i].connected = e.connected
// // console.log(state.connections)
// } else if (localnodeid == state.configConnections[i].endid) {
// state.configConnections[i].endx = e.xpos
// state.configConnections[i].endy = e.ypos
// //state.connections[i].connected = e.connected
// } else {
// //empty
// }
// }
// pouchdb
// .get(state.glo_con)
// .then(function (doc) {
// return pouchdb.bulkDocs([
// {
// _id: state.global_con_name,
// _rev: doc._rev,
// connections: state.configConnections,
// },
// ])
// })
// .then(function () {
// return pouchdb.get(state.global_con_name).then(function (doc) {
// state.connections = doc.connections
// })
// })
// .catch(function (err) {
// if (err.status == 404) {
// // pouchdb.put({ })
// }
// })
// },
MOVE_POS(state, e) { MOVE_POS(state, e) {
var i var i
for (i = 0; i < Object.keys(state.configPositions).length; i++) { for (i = 0; i < Object.keys(state.configPositions).length; i++) {
...@@ -233,8 +336,8 @@ const store = new Vuex.Store({ ...@@ -233,8 +336,8 @@ const store = new Vuex.Store({
{ {
_id: state.global_pos_name, _id: state.global_pos_name,
_rev: doc._rev, _rev: doc._rev,
positions: state.configPositions positions: state.configPositions,
} },
]) ])
}) })
.then(function () { .then(function () {
...@@ -257,12 +360,8 @@ const store = new Vuex.Store({ ...@@ -257,12 +360,8 @@ const store = new Vuex.Store({
ADD_NODE(state, e) { ADD_NODE(state, e) {
var uniqueid = var uniqueid =
Math.random() Math.random().toString(36).substring(2, 15) +
.toString(36) Math.random().toString(36).substring(2, 15)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15)
state.localnodeid = uniqueid state.localnodeid = uniqueid
pouchdb.get(state.myclient).then(function (doc) { pouchdb.get(state.myclient).then(function (doc) {
...@@ -273,7 +372,7 @@ const store = new Vuex.Store({ ...@@ -273,7 +372,7 @@ const store = new Vuex.Store({
node_owner: state.myclient, node_owner: state.myclient,
content_type: 'sheet', content_type: 'sheet',
deleted: false, deleted: false,
attachment_name: e attachment_name: e,
}) })
} }
...@@ -282,7 +381,7 @@ const store = new Vuex.Store({ ...@@ -282,7 +381,7 @@ const store = new Vuex.Store({
_id: state.myclient, _id: state.myclient,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments, _attachments: doc._attachments,
nodes: doc.nodes nodes: doc.nodes,
}) })
.then(function () { .then(function () {
return pouchdb.get(state.myclient).then(function (doc) { return pouchdb.get(state.myclient).then(function (doc) {
...@@ -290,7 +389,7 @@ const store = new Vuex.Store({ ...@@ -290,7 +389,7 @@ const store = new Vuex.Store({
var end = Object.keys(state.myNodes).length - 1 var end = Object.keys(state.myNodes).length - 1
const newNode = { const newNode = {
nodeid: state.myNodes[end].id, nodeid: state.myNodes[end].id,
nodetext: state.myNodes[end].text nodetext: state.myNodes[end].text,
// content_type: state.notes[end].content_type // content_type: state.notes[end].content_type
} }
state.activeNode = newNode state.activeNode = newNode
...@@ -309,13 +408,13 @@ const store = new Vuex.Store({ ...@@ -309,13 +408,13 @@ const store = new Vuex.Store({
y_pos: 50, y_pos: 50,
width: 200, width: 200,
height: 275, height: 275,
z_index: 1 z_index: 1,
}) })
return pouchdb return pouchdb
.put({ .put({
_id: state.global_pos_name, _id: state.global_pos_name,
_rev: doc._rev, _rev: doc._rev,
positions: doc.positions positions: doc.positions,
}) })
.catch(function (err) { .catch(function (err) {
console.log(err) console.log(err)
...@@ -340,8 +439,8 @@ const store = new Vuex.Store({ ...@@ -340,8 +439,8 @@ const store = new Vuex.Store({
_id: state.myclient, _id: state.myclient,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments, _attachments: doc._attachments,
nodes: state.myNodes nodes: state.myNodes,
} },
]) ])
}) })
.then(function () { .then(function () {
...@@ -372,8 +471,8 @@ const store = new Vuex.Store({ ...@@ -372,8 +471,8 @@ const store = new Vuex.Store({
_id: state.myclient, _id: state.myclient,
_rev: doc._rev, _rev: doc._rev,
_attachments: doc._attachments, _attachments: doc._attachments,
nodes: state.myNodes nodes: state.myNodes,
} },
]) ])
}) })
.then(function () { .then(function () {
...@@ -399,36 +498,32 @@ const store = new Vuex.Store({ ...@@ -399,36 +498,32 @@ const store = new Vuex.Store({
if (err.status == 404) { if (err.status == 404) {
return pouchdb.put({ return pouchdb.put({
_id: state.global_emoji_name, _id: state.global_emoji_name,
emojis: [] emojis: [],
}) })
} }
}) })
}, },
ADD_EMOJI(state, e) { ADD_EMOJI(state, e) {
var uniqueid = var uniqueid =
Math.random() Math.random().toString(36).substring(2, 15) +
.toString(36) Math.random().toString(36).substring(2, 15)
.substring(2, 15) +
Math.random()
.toString(36)
.substring(2, 15)
pouchdb.get(state.global_emoji_name).then(function (doc) { pouchdb.get(state.global_emoji_name).then(function (doc) {
doc.emojis.push({ doc.emojis.push({
emoji_id: uniqueid, emoji_id: uniqueid,
node_id: e.nodeid, node_id: e.nodeid,
emoji_text: e.emojitext emoji_text: e.emojitext,
}) })
return pouchdb return pouchdb
.put({ .put({
_id: state.global_emoji_name, _id: state.global_emoji_name,
_rev: doc._rev, _rev: doc._rev,
emojis: doc.emojis emojis: doc.emojis,
}) })
.catch(function (err) { .catch(function (err) {
console.log(err) console.log(err)
}) })
}) })
} },
}, },
actions: { actions: {
...@@ -443,6 +538,7 @@ const store = new Vuex.Store({ ...@@ -443,6 +538,7 @@ const store = new Vuex.Store({
store.commit('GET_ALL_NODES') store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES') store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS') store.commit('GET_POSITIONS')
store.commit('GET_CONNECTIONS')
store.commit('GET_EMOJI') store.commit('GET_EMOJI')
// turn on two-way, continuous, retriable sync // turn on two-way, continuous, retriable sync
pouchdb pouchdb
...@@ -452,6 +548,7 @@ const store = new Vuex.Store({ ...@@ -452,6 +548,7 @@ const store = new Vuex.Store({
store.commit('GET_ALL_NODES') store.commit('GET_ALL_NODES')
store.commit('GET_MY_NODES') store.commit('GET_MY_NODES')
store.commit('GET_POSITIONS') store.commit('GET_POSITIONS')
store.commit('GET_CONNECTIONS')
store.commit('GET_EMOJI') store.commit('GET_EMOJI')
}) })
.on('paused', function () { .on('paused', function () {
...@@ -492,6 +589,35 @@ const store = new Vuex.Store({ ...@@ -492,6 +589,35 @@ const store = new Vuex.Store({
commit('EDIT_NODE', { nodeid, nodetext }) commit('EDIT_NODE', { nodeid, nodetext })
}, },
startConnect: (
{ commit },
{ connectid, e, f, startx, starty, endx, endy, connected }
) => {
commit('MAKE_CONNECT', {
connectid,
e,
f,
startx,
starty,
endx,
endy,
connected,
})
},
updateConnect: (
{ commit },
{ connectid, nodeid, xpos, ypos, connected }
) => {
commit('UPDATE_CONNECT', {
connectid,
nodeid,
xpos,
ypos,
connected,
})
},
shortcutState: ({ commit }, e) => { shortcutState: ({ commit }, e) => {
commit('SHORTCUT_STATE', e) commit('SHORTCUT_STATE', e)
}, },
...@@ -502,13 +628,13 @@ const store = new Vuex.Store({ ...@@ -502,13 +628,13 @@ const store = new Vuex.Store({
addEmoji: ({ commit }, { nodeid, emojitext }) => { addEmoji: ({ commit }, { nodeid, emojitext }) => {
commit('ADD_EMOJI', { commit('ADD_EMOJI', {
nodeid, nodeid,
emojitext emojitext,
}) })
} },
}, },
modules: { modules: {
ui: uiStore ui: uiStore,
} },
}) })
export default store export default store
......
app/src/views/Sandbox.vue
+ 8
− 0
View file @ ba3bfedb
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
v-bind:nodetext="value.node_text" v-bind:nodetext="value.node_text"
/> />
<NodesLayer <NodesLayer
@editTrue="(e) => editTrue(e)"
v-for="value in myNodes" v-for="value in myNodes"
v-bind:key="value.node_id" v-bind:key="value.node_id"
v-bind:nodeid="value.node_id" v-bind:nodeid="value.node_id"
...@@ -27,11 +28,13 @@ ...@@ -27,11 +28,13 @@
/> --> /> -->
<ModeToolbar /> <ModeToolbar />
<ViewToolbar /> <ViewToolbar />
<ConnectionsLayer />
</div> </div>
</template> </template>
<script> <script>
import PanZoomContainer from '@/experimental/PanZoomContainer' import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/experimental/layers/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer' import NodesLayer from '@/components/NodesLayer'
import OtherNodeslayer from '@/components/OtherNodeslayer.vue' import OtherNodeslayer from '@/components/OtherNodeslayer.vue'
import ModeToolbar from '@/experimental/ModeToolbar' import ModeToolbar from '@/experimental/ModeToolbar'
...@@ -95,6 +98,10 @@ export default { ...@@ -95,6 +98,10 @@ export default {
this.elementHeight = offsetHeight this.elementHeight = offsetHeight
}, },
editTrue(e) {
this.$store.dispatch('shortcutState', e)
},
// This is here to support the shortcuts // This is here to support the shortcuts
addNode() { addNode() {
this.$store.dispatch('addNode') this.$store.dispatch('addNode')
...@@ -107,6 +114,7 @@ export default { ...@@ -107,6 +114,7 @@ export default {
// SelectionLayer, // SelectionLayer,
NodesLayer, NodesLayer,
OtherNodeslayer, OtherNodeslayer,
ConnectionsLayer,
}, },
} }
</script> </script>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment