TransactionSettingListItem

import * as bjs from 'babylonjs'
import * as bjsgui from 'babylonjs-gui'
import { HorizontalAlignment, VerticalAlignment, GLSGColor } from '@/modules/SceneGraph/Enums'
import { TextMeshString } from '@/modules/SceneGraph/TextMeshString'
import { Scene } from '@/modules/SceneGraph/Scene'
import { SceneElement } from '@/modules/SceneGraph/SceneElement'
import { SimpleEventDispatcher } from 'strongly-typed-events'
import { TransactionSetting } from '../../TransactionSettingRepository'

export class TransactionSettingListItem extends SceneElement
{
  private imagePlane : bjs.Mesh;
  private imageMaterial : bjs.StandardMaterial = new bjs.StandardMaterial("Item Image");
  private imageTexture : bjs.Texture = new bjs.Texture("")

  label : TextMeshString

  private buttonPlane : bjs.Mesh
  private buttonTexture : bjsgui.AdvancedDynamicTexture;
  private button : bjsgui.Button;

  protected _onItemClicked = new SimpleEventDispatcher<TransactionSettingListItem>()
  public get onItemClicked() {
    return this._onItemClicked.asEvent()
  }

  constructor(public name: string,
    public x: number,
    public y: number,
    public z: number,
    public scene: Scene,
    public transactionSetting : TransactionSetting
  ) {
    super(name, x, y, z, scene)
    this.create()
  }

  async onCreate()
  {
    this.imagePlane = bjs.MeshBuilder.CreatePlane("Asset Logo", {width : 1.5, height:1.5  })
    this.imagePlane.position.x = -3
    this.imagePlane.position.y = 0
    this.imagePlane.position.z = -0.5
    this.imagePlane.parent = this;
    this.imageTexture = new bjs.Texture(this.transactionSetting.logoUrl);
    this.imageMaterial.diffuseTexture = this.imageTexture;
    this.imageMaterial.opacityTexture = this.imageTexture
    this.imageMaterial.emissiveTexture = this.imageTexture;
    this.imageMaterial.useAlphaFromDiffuseTexture
    this.imagePlane.hasVertexAlpha = true;
    this.imagePlane.material = this.imageMaterial
    this.imagePlane.isPickable = false

    this.label = new TextMeshString("Label",
    -2,
    0,
    -0.15,
    this.scene,
    this.transactionSetting.name.toUpperCase(),
    0.7,
    HorizontalAlignment.Left,
    VerticalAlignment.Middle,
    bjs.Mesh.BILLBOARDMODE_NONE,
    false);

    this.addChild(this.label);
    this.label.parent = this;
    this.label.scaling = new bjs.Vector3(0.8,1,1);
    this.label.setColor(GLSGColor.Complementary);

     //Add Button
     this.buttonPlane = bjs.MeshBuilder.CreatePlane("Button Plane", {height:2,width:8})
     this.buttonPlane.parent = this
     this.buttonPlane.position = new bjs.Vector3(-0.26,0,-0.1)
     this.buttonTexture = bjsgui.AdvancedDynamicTexture.CreateForMesh(this.buttonPlane);
     this.button = bjsgui.Button.CreateSimpleButton("Button", "");
     this.button.color = GLSGColor.FirstPrimary
     this.button.cornerRadius = 25
     this.button.background = GLSGColor.FirstPrimary
     this.button.highlightColor = GLSGColor.Complementary
     this.button.top = 0
     this.button.fontFamily = "Conthrax Sb"
     this.button.shadowOffsetX = 20
     this.button.shadowOffsetY = 40
     this.button.shadowBlur = 20
     this.button.shadowColor = 'white'
     this.button.alpha = 1
     this.button.isHitTestVisible = true

     this.button.onPointerEnterObservable.add(()=>{


     })

     this.button.onPointerOutObservable.add(()=>{

     })

     this.button.onPointerDownObservable.add(()=>{
       this._onItemClicked.dispatch(this)

     })

     this.button.onPointerUpObservable.add(()=>{
     })

     this.button.onPointerClickObservable.add(()=>{


     })

     this.buttonTexture.addControl(this.button)


  }

  public destroy(): void {
    this.imagePlane.dispose()
    this.buttonPlane.dispose()
    this.label.destroy()
    this.imageTexture.dispose()
    this.dispose()
  }
}