实现 Accessor

1
2
3
4
5
6
7
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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 '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

// 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`, for example to be able to use the `watch` method.
export const EventedMixin = <TBase extends Constructor<Accessor>>(Base: TBase) => {

  @subclass("custom.EventedMixin")
  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 '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

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

@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
18
19
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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
35
36
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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
22
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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: firstName,
      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 '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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 '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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
30
31
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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);
      this.set("fullName", null);

      return;
    }

    let [firstName, lastName] = value.split(" ");
    this.set("firstName", firstName);
    this.set("lastName", lastName);
    this.set("fullName", value);
  }
} 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import Accessor from '@geoscene/core/core/Accessor';
import { subclass } from "@geoscene/core/core/accessorSupport/decorators";

@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
16
17
import Graphic from '@geoscene/core/Graphic';
import Accessor from '@geoscene/core/core/Accessor';
import Collection from '@geoscene/core/core/Collection';
import { subclass, property } from "@geoscene/core/core/accessorSupport/decorators";

@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
34
import Accessor from '@geoscene/core/core/Accessor';
import { subclass, property, cast } from "@geoscene/core/core/accessorSupport/decorators";

 @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));
   }
 }