Custom Vector3 Control for Buckshot

gistfile1.dart

class Vector3 extends Control
{

  FrameworkProperty xProperty;
  FrameworkProperty yProperty;
  FrameworkProperty zProperty;

  final FrameworkEvent<VectorChangedEventArgs> changed =
      new FrameworkEvent<VectorChangedEventArgs>();

  Vector3()
  {
    Browser.appendClass(rawElement, "Vector3");

    _initMenuItemProperties();

    this.registerEvent('changed', changed);
  }

  Vector3.register() : super.register();
  makeMe() => new Vector3();

  void _initMenuItemProperties()
  {
    xProperty = new FrameworkProperty(this, 'x');

    yProperty = new FrameworkProperty(this, 'y');

    zProperty = new FrameworkProperty(this, 'z');

    xProperty.propertyChanging + _valueChanged;
    yProperty.propertyChanging + _valueChanged;
    zProperty.propertyChanging + _valueChanged;

  }

  void _valueChanged(sender, args){

    changed.invokeAsync(this,
        new VectorChangedEventArgs(
            getValue(xProperty), getValue(yProperty), getValue(zProperty)));
  }

  String get defaultControlTemplate {
    return
'''
<controltemplate controlType='${this.templateName}'>
  <template>
    <stack>
      <stack orientation='horizontal'>
         <textblock text='X:' />
         <textbox width='25' text='{template x}' />
      </stack>
      <stack orientation='horizontal'>
         <textblock text='Y:' />
         <textbox width='25' text='{template y}' />
      </stack>
      <stack orientation='horizontal'>
         <textblock text='Z:' />
         <textbox width='25' text='{template z}' />
      </stack>
    </stack>
  </template>
</controltemplate>
''';
  }
}

class VectorChangedEventArgs extends EventArgs
{
  final num x;
  final num y;
  final num z;

  VectorChangedEventArgs(this.x, this.y, this.z);
}