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

pixi buttons

added pixi buttons to the nodes
parent a958dbf9
No related branches found
No related tags found
No related merge requests found
......@@ -13,6 +13,11 @@ export default {
name: 'ConnectionsLayer',
computed: mapState({
configConnections: (state) => state.configConnections,
configPositions: (state) => state.configPositions,
myNodes: (state) => state.myNodes,
otherNodes: (state) => state.otherNodes,
toolmode: (state) => state.ui.mode,
connectionstate: (state) => state.connectionstate,
}),
watch: {
......@@ -20,79 +25,62 @@ export default {
deep: true,
handler() {
this.drawPixi()
this.connectionsDraw()
this.buttonsDraw()
},
},
},
methods: {
drawPixi() {
buttonsDraw() {
var i
var j
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
//let line = new PIXI.Graphics()
graphics.lineStyle(8, 0xcab6ff)
// FIXME: removes connections probably need to be own function
// for (i = 0; i < Object.keys(this.configConnections).length; i++) {
// // static circle - needs to be same place as buttons
// graphics.lineStyle(0)
// graphics.beginFill(0xde3249, 1)
// graphics.drawCircle(100, 250, 50)
// graphics.endFill()
// stage.addChild(graphics)
// }
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,
this.configConnections[i].y_pos_end
)
let buttons = new PIXI.Graphics()
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) {
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 (var j = stage.children.length - 1; j >= 0; j--) {
stage.removeChild(stage.children[j])
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.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()
}
}
}
stage.addChild(graphics)
},
//FIXME : this is a sketch of the final code for connection buttons
// Eventually can move this all from nodes layers as well (which make sense)
connectingDraw() {
var i
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let circle = new PIXI.Graphics()
let line = new PIXI.Graphics()
circle.lineStyle(8, 0xcab6ff)
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
// static circle - needs to be same place as buttons
circle.lineStyle(0)
circle.beginFill(0xde3249, 1)
circle.drawCircle(100, 250, 50)
circle.endFill()
stage.addChild(circle)
}
// connection on move
var initialMoveTo
// Opt-in to interactivity
circle.interactive = true
buttons.interactive = true
// Shows hand cursor
circle.buttonMode = true
buttons.buttonMode = true
circle
buttons
.on('pointerdown', onDragStart)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
......@@ -131,6 +119,39 @@ export default {
lines[0].lineTo(mouseX, mouseY)
}
}
stage.addChild(buttons)
},
connectionsDraw() {
var i
this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let graphics = new PIXI.Graphics()
//let line = new PIXI.Graphics()
graphics.lineStyle(8, 0xcab6ff)
// move the lines to start and end pos based on if to_node == node_id
// or from_id == node_id
// this will put them in the same place as buttons
for (i = 0; i < Object.keys(this.configConnections).length; i++) {
//start
graphics.moveTo(
this.configConnections[i].x_pos_start,
this.configConnections[i].y_pos_start
)
//end
graphics.lineTo(
this.configConnections[i].x_pos_end,
this.configConnections[i].y_pos_end
)
}
for (var l = stage.children.length - 1; l >= 0; l--) {
stage.removeChild(stage.children[l])
}
stage.addChild(graphics)
},
},
mounted() {
......@@ -142,8 +163,10 @@ export default {
transparent: true,
view: canvas,
})
this.drawPixi()
this.connectingDraw()
this.connectionsDraw()
this.buttonsDraw()
// FIXME: code OLD
// this.connectingDraw()
},
}
</script>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment