Vertical Layout Directive

Add to ngt-group to vertically position child controls based on their height. This avoids the need to use absolute positioning.

    <ngt-group vertical-layout [margin]="[0, 0.02, 0]" [position]="[-0.95, 0.75, 0.002]">

      <ngt-group horizontal-layout>
        <flat-ui-label [text]="'radio'" [width]="0.6"></flat-ui-label>
      </ngt-group>

      <ngt-group horizontal-layout>
        <flat-ui-label [text]="'slider'" [width]="0.6"></flat-ui-label>
      </ngt-group>

      <ngt-group horizontal-layout>
        <flat-ui-label [text]="'string'" [width]="0.6"></flat-ui-label>
      </ngt-group>
   </ngt-group>

Always wrap controls with ngt-group to guarantee the order. Otherwise, async loaded controls will appear at the end since they are added last as children of the layout group.

During layout, LAYOUT_EVENT is dispatched to each visible child object. All flat-ui controls listen for this event and return their width and height

    this.mesh.addEventListener(LAYOUT_EVENT, (e: any) => {
      e.width = this.width;
      e.height = this.height;
      e.updated = true;
    });

Layout uses this to calculate the child object's y position relative to previous controls.

Vertical layout supports a NgtVector3 margin. Use this to add extra space to the top and bottom of each control.

Layout listens for HEIGHT_CHANGED_EVENT events. All ng3-flat-ui dispatch this event when their height changes.

  set height(newvalue: number) {
    this._height = newvalue;
    if (this.mesh) {
      this.mesh.dispatchEvent({ type: HEIGHT_CHANGED_EVENT });
    }
  }

Vertical layout adds HEIGHT_CHANGED_EVENT event listeners for any new controls added to the group.

Vertical layout checks if updates are needed 60 times a second.

vertical-layout.ts