Dynamic naming of graphics and inspecting the canvas

[Adam Procter]

I believe I have used name = to assign a dynamic name to each of my icons. However I am unsure and wanted to inspect the DOM but I couldn’t see a way to do this. I found a chrome browser extension but I don’t really want to have to install chrome. Is there no way to inspect the pixi canvas built in?

Edited September 4, 2020 by Adam Procter

[ZenBlender]

I'm not sure if this works for your use case, but I recently wrote about doing functional testing of the canvas element. This involved attaching arbitrary attributes to the Pixi render tree, and then attaching the Pixi application to the window object. From there you should be able to interactively look into that tree of objects, using your browser's dev tools for example. I'm using react-pixi-fiber but maybe the concepts translate to the particular setup you're using. Here's the post: https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3

[ZenBlender]

Basically, if your PIXI.Application instance is not available in a global scope, or already attached to "window", you'd need to do that in your code when the app initializes. Then, using dev tools, you can navigate to the PIXI.Application's "stage" object, and inside there you'll see "children" arrays that you can traverse through the render tree.

[Adam Procter]

Ok thank you will take a look

[Adam Procter]

this code draw out  a circle in each position no problem but when I use an interaction event to grab the name from each circle I only see to get the last one in the array and so although it is drawing each circle separately I cannot see that it is naming each one separately at all - what am I doing wrong ? Thanks

      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) {
            // THIS SHOULD NAME EACH Circle
            buttons.name = this.myNodes[i].node_id
            buttons.lineStyle(n++)
            buttons.beginFill(0xcab6ff, 1)
                   buttons.drawCircle(
              this.configPositions[j].x_pos + this.configPositions[j].width,
              this.configPositions[j].y_pos +
                this.configPositions[j].height / 2,
              15
            )
            buttons.endFill()

          }
        }
      }

here is the code where I try to see the name of each button / circle

 

buttons.interactive = true
buttons.buttonMode = true
buttons.on('pointerdown', onDragStart)

function onDragStart(event) {
        this.dragging = true
        // returns last name everytime (no matter which button/circle I click on first)
        console.log(this.name)
}

 

Edited September 11, 2020 by Adam Procter

[ZenBlender]

What is the data type of "buttons"? The naming would imply to me that it's an array of buttons rather than a single button. It almost looks like you are drawing all circles within a single interactive element rather than individual elements. In other words, how many onDragStart handlers are being attached?

 

[Adam Procter]

Ah sorry should have shown that piece, im new to pixijs - so maybe I am doing it completely wrong

So I am using one Graphics element ? and one ondragastart

The buttons all appear in the right places - the name just doesnt seem to work in the same way?

buttonsDraw() {
var i
var j
var n = 1
var ref = this

this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let buttons = new PIXI.Graphics()

 

Edited September 14, 2020 by Adam Procter

[Adam Procter]

https://gitlab.adamprocter.co.uk/nn/nodenoggin/-/blob/fixConns/app/src/components/ConnectionsLayer.vue

Might be easier if I shared all the code, linked above, really am a bit stumped on this one - thanks for looking

[ZenBlender]

I really think you want to have "buttons" be an array of Graphics instances. I am also new to PixiJS, but it doesn't make logical sense to me that there would be a single instance that has everything in it, yet with individual properties like names. I'd refactor this so that you loop through all the buttons you want to create, each one its own Graphics instance, and each one having its own drag handlers attached. Based on what you shared, it makes total sense that the last name wins, which was your initial question. In your refactor it might be useful to put the buttons in a Container: https://pixijs.download/dev/docs/PIXI.Container.html

[Adam Procter]

I cant seem to create a number of Graphic files dynamically it complains about buttons = new PIXI.Graphics()

      for (i = 0; i < Object.keys(this.myNodes).length; i++) {
        buttons[i] = [];
        var buttons[i] = new PIXI.Graphics()
        for (j = 0; j < Object.keys(this.configPositions).length; j++) {
          if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
            buttons[i].name = this.myNodes[i].node_id
            //console.log(buttons.name)
            buttons[i].lineStyle(0)
            buttons[i].beginFill(0xcab6ff, 1)
            // x, y, radius

            buttons[i].drawCircle(
              this.configPositions[j].x_pos + this.configPositions[j].width,
              this.configPositions[j].y_pos +
                this.configPositions[j].height / 2,
              15
            )
            buttons[i].endFill()
            // names it the last one only?
          }
        }
      }

 

[jonforum]

make basic 
https://www.pixiplayground.com/
i can help

[ZenBlender]

Your syntax needs a little help. I'd recommend getting up to speed on syntax for working with arrays, and it might be a little clearer how to get this working.

[Adam Procter]

This is the simplest version of what I am trying to do , this would draw 10 unique named and placed graphic circles.

But it doesn't as you cant do

buttons.[i] = new PIXI.Graphics()

https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv

Edited September 15, 2020 by Adam Procter

[jonforum]

On 9/15/2020 at 10:20 AM, Adam Procter said:

This is the simplest version of what I am trying to do , this would draw 10 unique named and placed graphic circles.

But it doesn't as you cant do

buttons.[i] = new PIXI.Graphics()

https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv

Ok sorry for late, i took a few days off.
This was not a pixijs issue but more a js issue.
I think you should take a look on basic js before.
Otherwise you will have difficulty progressing with pixi js.

You have many way to perform this kind of stuff, here fixe version of your demo.
https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv

You also have a plugin for devtool thats help you to debug pixijs (basic only)

https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon

 

 

This is maybe not the best way to learn js, but it should help you.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript

 

hope this help

 

PS: IF YOU NEED find a specific pixijs display.Object, yes use the .name=identity are a good way.
I also use .name for connect some node ref with react app.
Then you can performe somwhere in your app 

const found = container.children.find(el => el.name ===  name);

 

pixijs have also it own search from display.Object
https://pixijs.download/dev/docs/PIXI.Sprite.html#getChildAt

container.getChildAt ()

 container.getChildByName ()

container.getChildIndex ()

Edited September 17, 2020 by jonforum

[Adam Procter]

Thank you this is really helpful am getting close now , the chrome extension wouldnt work on my mac at all - annoyingly as I would love to use that.

      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 (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.addChild(txt)
          button.endFill()
          return button

        }
      )

      console.log(array)
      stage.addChild(...array) 

renders buttons in right places and the array shows all of the graphics named 1, 2,3 etc for length of this.myNodes which is great but cant quite yet get the dynamic name from the data yet it names them all the last node_id - however like you say my javascript skills are very very rusty / weak so am not fully understanding the ... Array yet - but hopefully I will soon  

Edited September 18, 2020 by Adam Procter

[jonforum]

i use Array() for the example only,  in your case this should work 
 

const array =  Object.values(this.myNodes).map( (node, index) => { //stuff... 
// you should have acces to id like this    const id = node.node_id; 

node will be the current obj inside the iteration, and index is the index (number) of the current node inside this.myNodes 

More info about map
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map

 

 

 

 

Edited September 18, 2020 by jonforum

[Adam Procter]

Thanks I have ended up using an Object buttonMap { } like this

 var buttonMap = {}

      for (i = 0; i < Object.keys(this.myNodes).length; i++) {
        buttonMap[i] = new PIXI.Graphics()

...

 

Edited September 19, 2020 by Adam Procter