How to use @swim/view - 10 common examples

// limitations under the License.

import {AnyColor, Color} from "@swim/color";
import {MemberAnimator} from "@swim/view";
import {MapGraphicView} from "@swim/map";
import {AgencyMapViewController} from "./AgencyMapViewController";

export class AgencyMapView extends MapGraphicView {
  /** @hidden */
  _viewController: AgencyMapViewController | null;

  get viewController(): AgencyMapViewController | null {
    return this._viewController;
  }

  @MemberAnimator(Color, "inherit")
  agencyMarkerColor: MemberAnimator;

  @MemberAnimator(Color, "inherit")
  vehicleMarkerColor: MemberAnimator;

  protected onAnimate(t: number): void {
    // don't compute auto hitBounds
  }

  // protected onCull(): void {
  //   super.onCull();
  //   if (this._hitBounds === null) {
  //     this.setCulled(true);
  //   }
  // }

protected layoutChildView(childView: View): void {
    if (RenderView.is(childView)) {
      let bounds = this._bounds;
      let anchor = this._anchor;
      const x = bounds.x;
      const y = bounds.y;
      if (bounds.x !== 0 || bounds.y !== 0) {
        // transform bounds into layer coordinates
        const width = bounds.width;
        const height = bounds.height;
        bounds = new BoxR2(0, 0, width, height);
      }
      if (x !== 0 || y !== 0) {
        // transform anchor into layer coordinates
        anchor = new PointR2(anchor.x - x, anchor.y - y);
      }
      childView.setBounds(bounds);
      childView.setAnchor(anchor);

return this._viewController;
  }

  @MemberAnimator(Length)
  innerRadius: MemberAnimator;

  @MemberAnimator(Length)
  outerRadius: MemberAnimator;

  @MemberAnimator(Angle)
  startAngle: MemberAnimator;

  @MemberAnimator(Angle)
  sweepAngle: MemberAnimator;

  @MemberAnimator(Angle)
  padAngle: MemberAnimator;

  @MemberAnimator(Length)
  padRadius: MemberAnimator;

  @MemberAnimator(Length)
  cornerRadius: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

_viewController: GraphicViewController | null;

  constructor(x: Length = Length.zero(), y: Length = Length.zero(),
              width: Length = Length.zero(), height: Length = Length.zero()) {
    super();
    this.x.setState(x);
    this.y.setState(y);
    this.width.setState(width);
    this.height.setState(height);
  }

  get viewController(): GraphicViewController | null {
    return this._viewController;
  }

  @MemberAnimator(Length)
  x: MemberAnimator;

  @MemberAnimator(Length)
  y: MemberAnimator;

  @MemberAnimator(Length)
  width: MemberAnimator;

  @MemberAnimator(Length)
  height: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

@MemberAnimator(Length)
  outerRadius: MemberAnimator;

  @MemberAnimator(Angle)
  startAngle: MemberAnimator;

  @MemberAnimator(Angle)
  sweepAngle: MemberAnimator;

  @MemberAnimator(Angle)
  padAngle: MemberAnimator;

  @MemberAnimator(Length)
  padRadius: MemberAnimator;

  @MemberAnimator(Length)
  cornerRadius: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

  get value(): Arc {
    return new Arc(this.innerRadius.value!, this.outerRadius.value!, this.startAngle.value!,
                   this.sweepAngle.value!, this.padAngle.value!, this.padRadius.value!,
                   this.cornerRadius.value!);
  }

@MemberAnimator(Angle)
  sweepAngle: MemberAnimator;

  @MemberAnimator(Angle)
  padAngle: MemberAnimator;

  @MemberAnimator(Length)
  padRadius: MemberAnimator;

  @MemberAnimator(Length)
  cornerRadius: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

  get value(): Arc {
    return new Arc(this.innerRadius.value!, this.outerRadius.value!, this.startAngle.value!,
                   this.sweepAngle.value!, this.padAngle.value!, this.padRadius.value!,
                   this.cornerRadius.value!);
  }

  get state(): Arc {
    return new Arc(this.innerRadius.state!, this.outerRadius.state!, this.startAngle.state!,
                   this.sweepAngle.state!, this.padAngle.state!, this.padRadius.state!,
                   this.cornerRadius.state!);
  }

insertCoord(index: number, coord: AnyLngLat): void {
    coord = LngLat.fromAny(coord);
    this._coords.splice(index, 0, new AnyMemberAnimator(LngLat, this, coord as LngLat));
    this._points.splice(index, 0, PointR2.origin());
    this.requireUpdate(View.NeedsAnimate | MapView.NeedsProject);
  }

  removeCoord(index: number): void {
    this._coords.splice(index, 1);
    this._points.splice(index, 1);
  }

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

  protected onAnimate(viewContext: MapViewContext): void {
    const t = viewContext.updateTime;
    let moved = false;
    const coords = this._coords;
    for (let i = 0, n = coords.length; i < n; i += 1) {
      const point = coords[i];
      const oldPoint = point.value!;
      point.onFrame(t);
      const newPoint = point.value!;
      if (oldPoint !== newPoint) {
        moved = true;

return this._viewController;
  }

  @MemberAnimator(Length)
  x: MemberAnimator;

  @MemberAnimator(Length)
  y: MemberAnimator;

  @MemberAnimator(Length)
  width: MemberAnimator;

  @MemberAnimator(Length)
  height: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

  get value(): Rect {
    return new Rect(this.x.value!, this.y.value!, this.width.value!, this.height.value!);
  }

  get state(): Rect {
    return new Rect(this.x.state!, this.y.state!, this.width.state!, this.height.state!);
  }

constructor(text: string = "") {
    super();
    this.text.setState(text);
  }

  get viewController(): GraphicViewController | null {
    return this._viewController;
  }

  @MemberAnimator(String)
  text: MemberAnimator;

  @MemberAnimator(Font, {inherit: true})
  font: MemberAnimator;

  @MemberAnimator(String, {inherit: true})
  textAlign: MemberAnimator;

  @MemberAnimator(String, {inherit: true})
  textBaseline: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  textColor: MemberAnimator;

  get value(): TextRun {
    return new TextRun(this.text.value!, this.font.value!, this.textAlign.value!,
                       this.textBaseline.value!, this.textColor.value!);
  }

  get state(): TextRun {
    return new TextRun(this.text.state!, this.font.state!, this.textAlign.state!,
                       this.textBaseline.state!, this.textColor.state!);

this._points.splice(index, 0, PointR2.origin());
    this.requireUpdate(View.NeedsAnimate | MapView.NeedsProject);
  }

  removeCoord(index: number): void {
    this._coords.splice(index, 1);
    this._points.splice(index, 1);
  }

  @MemberAnimator(Color, {inherit: true})
  fill: MemberAnimator;

  @MemberAnimator(Color, {inherit: true})
  stroke: MemberAnimator;

  @MemberAnimator(Length, {inherit: true})
  strokeWidth: MemberAnimator;

  protected onAnimate(viewContext: MapViewContext): void {
    const t = viewContext.updateTime;
    let moved = false;
    const coords = this._coords;
    for (let i = 0, n = coords.length; i < n; i += 1) {
      const point = coords[i];
      const oldPoint = point.value!;
      point.onFrame(t);
      const newPoint = point.value!;
      if (oldPoint !== newPoint) {
        moved = true;
      }
    }
    this.fill.onFrame(t);