Textbox events with BBCode Text events

[dtturcotte]

First off, I love these text plugins. Great job!

I'm using ui-textbox and BBCode to display dynamic text in a typewriter speech bubble-like fashion.

The issue is, I need both the TextBox pointerdown and BBCode areadown events to work simultaneously, but it seems that the TextBox setInteractive events override the BBCode setInteractive events.

I'm attempting to call the areadown event within pointerdown via something like this.getElement('text')._events.areadown.fn() but this obviously won't work— it's just an example of what I'm trying to accomplish.

Really, what I need is the individual text wrapped in area tags, such as ... [area=ABC]this text here[/area] ..., but also to take advantage of the TextBox click events.

Do you know how I can accomplish this?

Example (full code here)

var textBox = scene.rexUI.add.textBox({
   ...
   text: getBBcodeText(scene, wrapWidth, fixedWidth, fixedHeight),
   ...
})

textBox.getElement('text')
      .setInteractive()
      .on('areadown', function(key) {
          console.log('KEY: ', key);
      }, textBox) 

textBox
        .setInteractive()
        .on('pointerdown', function () {
            var text = this.getElement('text')
            var areadown = text._events.areadown.fn() // attempting to call it here
            ...
       })

NOTE: I found elsewhere in the discussion thread that top-only should do the trick. I've tried it and both events register (top-only set to false), however I need the area clicked on the text to only output what the tagged text is, and not propagate upwards to the textbox click handler. Do you have an e.stopPropagation() equivalent function?

[rexrainbow]

I add event in last parameter of area touch event, might use event.stopPropagation() to cancel remaining touched events.
This changing is on github and minify file of BBCodeText plugin, npm package will upgrade at end of this month.

[dtturcotte]

Thank you!!

[dtturcotte]

@rexrainbow event.stopPropagation() doesn't seem to be working.

I'm loading via scene.load.plugin('rexbbcodetextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexbbcodetextplugin.min.js', true);

Full code here.

var content = `[area=areakey]Phaser is a fast[/area], free, and fun...`

scene.input.setTopOnly(false)
textBox.getElement('text')
  .setInteractive()
    .on('areadown', function(key, pointer, localX, localY, event) {
      event.stopPropagation()
      console.log('text areadown: ', key)
  }, textBox)

textBox
    .setInteractive()
    .on('pointerdown', function () {
        console.log('textbox pointerdown')
        ...
    })

Output:

"textbox pointerdown: "
"text areadown: " "areakey"

Any thoughts?

[rexrainbow]

Since bbcodeText is created before textbox, the order of touching objects are textbox then bbcodeText, you can move up bbcodeText by setting depth, or try this textbox.moveDepthAbove(bbcodeText) ( Move game object above this container and all children )