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

updates to connections version 1 

using object{} now... will clean up code but pushing for sake of commented code (just in case)
parent dabd2ca7
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
app/package-lock.json 0 → 100644
+ 18706
− 0
View file @ a04d9a76
This diff is collapsed.
app/package.json
+ 6
− 6
View file @ a04d9a76
......@@ -11,7 +11,7 @@
"dependencies": {
"core-js": "^3.6.5",
"file-loader": "^6.1.0",
"ipfs": "^0.49.1",
"ipfs": "^0.50.0",
"lodash": "^4.17.20",
"marked": "^1.1.1",
"pixi.js": "^5.3.3",
......@@ -24,11 +24,11 @@
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.4",
"@vue/cli-plugin-eslint": "^4.5.4",
"@vue/cli-plugin-router": "^4.5.4",
"@vue/cli-plugin-vuex": "^4.5.4",
"@vue/cli-service": "^4.5.4",
"@vue/cli-plugin-babel": "^4.5.6",
"@vue/cli-plugin-eslint": "^4.5.6",
"@vue/cli-plugin-router": "^4.5.6",
"@vue/cli-plugin-vuex": "^4.5.6",
"@vue/cli-service": "^4.5.6",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^7.8.1",
......
app/src/components/BaseButton.vue
+ 2
− 2
View file @ a04d9a76
......@@ -72,8 +72,8 @@ button.new-link {
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.1);
z-index: 100;
background-color: Transparent;
/* background-color: #cab6ff; */
/* background-color: Transparent; */
background-color: #cab6ff;
outline: none;
}
</style>
app/src/components/ConnectionsLayer.vue
+ 146
− 42
View file @ a04d9a76
......@@ -85,32 +85,148 @@ export default {
buttonsDraw() {
var i
var j
//var n = 1
var ref = this
var buttonMap = {}
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let buttons = new PIXI.Graphics()
// let texts = new PIXI.Text()
// buttonMap['login'] = new PIXI.Graphics();
for (i = 0; i < Object.keys(this.myNodes).length; i++) {
buttonMap[i] = new PIXI.Graphics()
// console.log(buttonMap[i])
for (j = 0; j < Object.keys(this.configPositions).length; j++) {
if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
buttons.name = this.myNodes[i].node_id
buttons.lineStyle(0)
buttons.beginFill(0xcab6ff, 1)
buttonMap[i].name = this.myNodes[i].node_id
// console.log(button_one.name)
buttonMap[i].lineStyle(0)
buttonMap[i].beginFill(0xcab6ff, 1)
// x, y, radius
buttons.drawCircle(
buttonMap[i].drawCircle(
this.configPositions[j].x_pos + this.configPositions[j].width,
this.configPositions[j].y_pos +
this.configPositions[j].height / 2,
15
)
buttons.endFill()
buttonMap[i].endFill()
// names it the last one only?
}
stage.addChild(buttonMap[i])
// Opt-in to interactivity
buttonMap[i].interactive = true
// Shows hand cursor
buttonMap[i].buttonMode = true
buttonMap[i]
.on('pointerdown', onDragStart)
.on('pointerdown', start)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove)
}
}
// const array = [...Array(Object.keys(this.myNodes).length)].map(
// (k, kk) => {
// const button = new PIXI.Graphics()
// button.lineStyle(0)
// button.beginFill(0xcab6ff, 1)
// const txt = new PIXI.Text('name:' + kk)
// button.name = String(kk)
// // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
// // for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
// // button.name = String(this.myNodes[i].node_id)
// // }
// // }
// // }
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// button.drawCircle(
// this.configPositions[j].x_pos + this.configPositions[j].width,
// this.configPositions[j].y_pos +
// this.configPositions[j].height / 2,
// 15
// )
// // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
// // if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
// // // button.name = String(this.myNodes[i].node_id)
// // }
// // }
// }
// // button.position.set(50 * kk)
// button.addChild(txt)
// button.endFill()
// return button
//for (i = 0; i < Object.keys(this.myNodes).length; i++) {
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
// // x, y, radius
// const txt = new PIXI.Text('name:' + kk)
// button.drawCircle(
// this.configPositions[j].x_pos + this.configPositions[j].width,
// this.configPositions[j].y_pos +
// this.configPositions[j].height / 2,
// 15
// )
// button.endFill()
// button.addChild(txt)
// return button
// }
// }
// }
// }
// }
// )
// console.log(array)
// stage.addChild(...array) // we add all instances of graphics from the array in a container.
// const array = [...Array(10)].map((i, ii) => {
// const button = new PIXI.Graphics()
// // const txt = new PIXI.Text('name:' + ii) // just a visual debug help for you
// // yes this is a good way to identify your pixi ref with a node name from DOM
// // btw i prefer use Classes and extends (by context)
// button.name = String(ii)
// button.beginFill(0xde3249).drawRect(0, 0, 100, 100).endFill()
// button.position.set(50 * ii)
// button.blendMode = 1
// // button.addChild(txt)
// return button
// })
// console.log(array)
// stage.addChild(...array) // we add all instances of grafics from the array in a container.
// var buttons = []
// let container = new PIXI.Container()
// for (i = 0; i < Object.keys(this.myNodes).length; i++) {
// buttons = new PIXI.Graphics()
// // console.log(buttons)
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
// buttons.name = this.myNodes[i].node_id
// // console.log(button_one.name)
// buttons.lineStyle(0)
// buttons.beginFill(0xcab6ff, 1)
// // x, y, radius
// buttons.drawCircle(
// this.configPositions[j].x_pos + this.configPositions[j].width,
// this.configPositions[j].y_pos +
// this.configPositions[j].height / 2,
// 15
// )
// buttons.endFill()
// // names it the last one only?
// }
// }
// }
// for (i = 0; i < Object.keys(this.myNodes).length; i++) {
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// if (this.myNodes[i].node_id == this.configPositions[j].node_id) {
......@@ -121,37 +237,28 @@ export default {
// }
// }
for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
for (j = 0; j < Object.keys(this.configPositions).length; j++) {
if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
buttons.name = this.otherNodes[i].node_id
buttons.lineStyle(0)
buttons.beginFill(0xcab6ff, 1)
// x, y, radius
buttons.drawCircle(
this.configPositions[j].x_pos + this.configPositions[j].width,
this.configPositions[j].y_pos +
this.configPositions[j].height / 2,
15
)
buttons.endFill()
}
}
}
// for (i = 0; i < Object.keys(this.otherNodes).length; i++) {
// for (j = 0; j < Object.keys(this.configPositions).length; j++) {
// if (this.configPositions[j].node_id == this.otherNodes[i].node_id) {
// buttons.name = this.otherNodes[i].node_id
// buttons.lineStyle(0)
// buttons.beginFill(0xcab6ff, 1)
// // x, y, radius
// buttons.drawCircle(
// this.configPositions[j].x_pos + this.configPositions[j].width,
// this.configPositions[j].y_pos +
// this.configPositions[j].height / 2,
// 15
// )
// buttons.endFill()
// }
// }
// }
let line = new PIXI.Graphics()
var initialMoveTo
// Opt-in to interactivity
buttons.interactive = true
// Shows hand cursor
buttons.buttonMode = true
buttons
.on('pointerdown', onDragStart)
.on('pointerdown', start)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove)
let lines = []
......@@ -160,9 +267,10 @@ export default {
}
function onDragStart(event) {
console.log(this.name)
this.dragging = true
// returns on the last one in the loop
console.log(this.name)
// console.log(button_one.name)
let mouseX = event.data.global.x
let mouseY = event.data.global.y
......@@ -177,7 +285,7 @@ export default {
}
function onDragEnd() {
// console.log(this.name)
console.log(this.name)
this.dragging = false
stage.removeChild(line)
}
......@@ -192,10 +300,6 @@ export default {
lines[0].lineTo(mouseX, mouseY)
}
}
stage.addChild(buttons)
// stage.addChild(texts)
},
connectionsDraw() {
......
app/src/components/NodesLayer.vue
+ 6
− 1
View file @ a04d9a76
......@@ -13,6 +13,8 @@
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="221"
>
<form>
<div v-if="value.read_mode == false">
......@@ -85,6 +87,8 @@
:draggable="false"
:resizable="false"
style="background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="221"
>
<form>
<div v-if="value.read_mode == false">
......@@ -127,7 +131,6 @@
<BaseButton
buttonClass="new-link"
@mousedown="onClickNewLink(nodeid, value.x_pos, value.y_pos)"
@mouseup="onClickNewLink(nodeid, value.x_pos, value.y_pos)"
></BaseButton>
<div v-if="value.read_mode == true">
......@@ -169,6 +172,8 @@
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
style="background-color: rgb(205, 234, 255)"
:min-width="200"
:min-height="221"
>
<form>
<div v-if="value.read_mode == false">
......
app/src/components/OnBoard.vue
+ 50
− 54
View file @ a04d9a76
......@@ -9,35 +9,33 @@
:z="1"
:draggable="true"
:resizable="false"
style="background-color: #6fcf97;"
style="background-color: #6fcf97"
>
<form>
<div>
<p id="nodeid" :inner-html.prop="nodetext | marked"></p>
<div v-if="name == false">
<input
type="text"
v-model.trim="clientid"
placeholder="name"
autocorrect="off"
autocapitalize="none"
ref="objectname"
v-on:keyup.enter="setClient()"
@focus="editTrue(true)"
@blur="editTrue(false)"
/>
<div class="btn-row">
<BaseButton buttonClass="special" @click="setClient()"
>Store</BaseButton
>
</div>
</div>
<div v-else>
<h4>Saved</h4>
<div>
<p id="nodeid" :inner-html.prop="nodetext | marked"></p>
<div v-if="name == false">
<input
type="text"
v-model.trim="clientid"
placeholder="name"
autocorrect="off"
autocapitalize="none"
ref="objectname"
v-on:keyup.enter="setClient()"
@focus="editTrue(true)"
@blur="editTrue(false)"
/>
<div class="btn-row">
<BaseButton buttonClass="special" @click="setClient()"
>Store</BaseButton
>
</div>
</div>
</form>
<div v-else>
<h4>Saved</h4>
</div>
</div>
</vue-draggable-resizable>
<vue-draggable-resizable
......@@ -49,37 +47,35 @@
:z="1"
:draggable="true"
:resizable="false"
style="background-color: #6fcf97;"
style="background-color: #6fcf97"
>
<form>
<div class="content">
<p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
<div v-if="microcosm == false">
<input
type="text"
v-model.trim="localmicrocosm"
placeholder="microcosm name"
autocorrect="off"
autocapitalize="none"
autofocus
v-on:keyup.enter="createMicrocosm()"
@focus="editTrue(true)"
@blur="editTrue(false)"
/>
<div class="btn-row">
<BaseButton
buttonClass="special"
@click="createMicrocosm(), letsGo()"
>Create or Rejoin a Microcosm</BaseButton
>
</div>
</div>
<div v-else>
<h4>Loading...</h4>
<div class="content">
<p id="nodeid" :inner-html.prop="nodetext2 | marked"></p>
<div v-if="microcosm == false">
<input
type="text"
v-model.trim="localmicrocosm"
placeholder="microcosm name"
autocorrect="off"
autocapitalize="none"
autofocus
@focus="editTrue(true)"
@blur="editTrue(false)"
v-on:keyup.enter="createMicrocosm(), letsGo()"
/>
<div class="btn-row">
<BaseButton
buttonClass="special"
@click="createMicrocosm(), letsGo()"
>Create or Rejoin a Microcosm</BaseButton
>
</div>
</div>
</form>
<div v-else>
<h4>Loading...</h4>
</div>
</div>
</vue-draggable-resizable>
</div>
</template>
......
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