Implementing Accessor

1
2
3
4
5
6
7
8
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass } from "@arcgis/core/core/accessorSupport/decorators.js";

// declaredClass is "custom.Color"
@subclass("custom.Color")
class Color extends Accessor {
  // ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass } from "@arcgis/core/core/accessorSupport/decorators.js";

// A type to represent a constructor function
type Constructor<T = object> = new (...args: any[]) => T;

// A type to represent a mixin function
// See for more details https://www.bryntum.com/blog/the-mixin-pattern-in-typescript-all-you-need-to-know/
type Mixin<T extends (...input: any[]) => any> = InstanceType<ReturnType<T>>;

// TBase extends Constructor<Accessor> indicating that `EventedMixin`
// expects the base class to extend `Accessor`.
export const EventedMixin = <TBase extends Constructor<Accessor>>(Base: TBase) => {

  @subclass("custom.EventedMixin")
  return class Evented extends Base {

    // A first function defined by the mixin
    emit(type: string, event?: any): boolean {
      // ...
    }

    // Another function defined by the mixin
    on(type: string, listener: (event: any) => void): IHandle {
      // ...
    }
  }
}

// define the type of the mixin. This is useful to type properties that extends this mixin
// eg: `myProperty: EventedMixin;`
export type EventedMixinType = Mixin<typeof EventedMixin>;

1
2
3
4
5
6
7
8
9
10
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass } from "@arcgis/core/core/accessorSupport/decorators";

// import the newly created custom mixin
import { EventedMixin } from "custom/EventedMixin.ts";

@subclass("custom.Collection")
export class Collection extends EventedMixin(Accessor) {
  // Collection extends a super class composed of Accessor and EventedMixin.
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass("custom.Color")
class Color extends Accessor {
  @property()
  r: number = 255;

  @property()
  g: number = 255;

  @property()
  b: number = 255;

  @property()
  a: number = 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass("custom.Collection")
class Collection extends Accessor {
  private _items: any[] = [];

  // Example: Define a custom property getter.
  //   Accessor caches the values returned by the getters.
  //   At this point `length` will never change.
  //   See the "Notify a property change" section
  @property()
  get length(): number {
    return this._items.length;
  }

  set length(value: number) {
    // Example: perform  validation
    if (value <= 0) {
      throw new Error(`value of length not valid: ${value}`);
    }

    // internally you can access the cached value of `length` using `_get`.
    const oldValue = this._get<number>("length");

    if (oldValue !== value) {
      // a setter has to update the value from the cache
      this._set("length", value);

      // Example: perform additional work when the length changes
      this._items.length = value;
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass("custom.Person")
class Person extends Accessor {
  // Example: read-only property may not be externally set
  @property({ readOnly: true })
  firstName: string;

  @property({ readOnly: true })
  lastName: string;

  updateName(firstName: string, lastName: string): void {
    // We may still update the read-only property internally, which will change
    // the property and notify changes to watchers
    this._set({
      firstName,
      lastName
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Accessor from "@arcgis/core/core/Accessor.js";
import Collection from "@arcgis/core/core/Collection.js";
import { subclass, property, aliasOf } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass("custom.GroupLayer")
class GroupLayer extends Accessor {
  @property()
  sublayers: Collection = new Collection();

  // Define a property that reflects one in another object.
  @property({ aliasOf: "sublayers.length" })
  length: number;

  // Alternatively you can use the `@aliasOf` decorator
  //  @aliasOf
  //  length: number

  // You can also proxy a method from another object.
  @aliasOf("sublayers.add")
  add: (item: any) => void;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass()
class Person extends Accessor {
  @property()
  firstName: string;

  @property()
  lastName: string;

  @property({
    readOnly: true
  })
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass()
class Person extends Accessor {
  @property()
  firstName: string;

  @property()
  lastName: string;

  @property()
  get fullName(): string {
    return `${this.firstName} ${this.lastName}`;
  }

  set fullName(value: string) {
    if (value === "") {
      this._set("firstName", null);
      this._set("lastName", null);

      return;
    }

    const [firstName, lastName] = value.split(" ");
    this._set("firstName", firstName);
    this._set("lastName", lastName);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass("custom.Collection")
class Collection extends Accessor {
  private _items: any[] = [];

  @property({
    readOnly: true
  })
  get length(): number {
    return this._items.length;
  }

  add(item: any): void {
    this._items.push(item);

    // We know the value of `length` is changed.
    // Notify so that at next access, the getter will be invoked
    this.notifyChange("length");
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Graphic from "@arcgis/core/Graphic.js";
import Accessor from "@arcgis/core/core/Accessor.js";
import Collection from "@arcgis/core/core/Collection.js";
import { subclass, property } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass()
class GraphicsLayer extends Accessor {
  @property({
    // Define the type of the collection of Graphics
    // When the property is set with an array,
    // the collection constructor will automatically be called
    type: Collection.ofType(Graphic)
  })
  graphics: Collection<Graphic>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import Accessor from "@arcgis/core/core/Accessor.js";
import { subclass, property, cast } from "@arcgis/core/core/accessorSupport/decorators.js";

@subclass()
class Color extends Accessor {
  @property()
  r: number = 0;

  @property()
  g: number = 0;

  @property()
  b: number = 0;

  @property()
  a: number = 1;

  @cast("r")
  @cast("g")
  @cast("b")
  protected castComponent(value: number): number {
    // cast method to clamp the value that
    // will be set on r, g or b between 0 and 255
    return Math.max(0, Math.min(255, value));
  }

  @cast("a")
  protected castAlpha(value: number): number {
    // cast method to clamp the value that
    // will be set on a between 0 and 1
    return Math.max(0, Math.min(1, value));
  }
}