Horizontal Layout Directive - IRobot1/ng3-vr-examples GitHub Wiki

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

<ngt-group horizontal-layout [margin]="[0.01, 0, 0]">
  <flat-ui-label [text]="'icon button'" [width]="0.6"></flat-ui-label>
  <flat-ui-icon-button [svg]="svg" [enabled]="false" (pressed)="clicked($event)" [selectable]="selectable"></flat-ui-icon-button>
  <flat-ui-icon-button [url]="'assets/webgl.svg'" [iconcolor]="'#990000'" [selectable]="selectable" (pressed)="clicked($event)"></flat-ui-icon-button>
</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 x position relative to previous controls.

Horizontal layout supports a NgtVector3 margin. Use this to add extra space to the left and right of each control.

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

  set width(newvalue: number) {
    this._width = newvalue;
    if (this.mesh) {
      this.mesh.dispatchEvent({ type: WIDTH_CHANGED_EVENT });
    }
  }

Horizontal layout adds WIDTH_CHANGED_EVENT event listeners for any new controls added to the group.

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

horiztonal-layout.ts