Base Class Renaming and Default Style Adjustments

src/arrow/assault-direction.ts

@@ -1,6 +1,7 @@
 import FineArrow from './fine-arrow';
 import * as Utils from '../utils';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
 export default class AssaultDirection extends FineArrow {
   points: Cartesian3[] = [];
@@ -13,8 +14,8 @@ export default class AssaultDirection extends FineArrow {
   neckAngle: number;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+  constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer, {});
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.tailWidthFactor = 0.08;

src/arrow/attack-arrow.ts

@@ -1,8 +1,9 @@
-import Draw from '../draw';
+import Base from '../base';
 import * as Utils from '../utils';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class AttackArrow extends Draw {
+export default class AttackArrow extends Base {
   points: Cartesian3[] = [];
   headHeightFactor: number;
   headWidthFactor: number;
@@ -11,8 +12,8 @@ export default class AttackArrow extends Draw {
   headTailFactor: number;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.headHeightFactor = 0.18;

src/arrow/curved-arrow.ts

@@ -1,16 +1,17 @@
 import * as Utils from '../utils';
-import Draw from '../draw';
+import Base from '../base';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class CurvedArrow extends Draw {
+export default class CurvedArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 3000000;
   type: 'polygon' | 'line';
   t: number;
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'line';
     this.t = 0.3;

src/arrow/double-arrow.ts

@@ -1,9 +1,10 @@
-import Draw from '../draw';
+import Base from '../base';
 import * as Utils from '../utils';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 type Position = [number, number];
 
-export default class DoubleArrow extends Draw {
+export default class DoubleArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 2;
@@ -15,8 +16,8 @@ export default class DoubleArrow extends Draw {
   connPoint: Position;
   tempPoint4: Position;
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.headHeightFactor = 0.25;

src/arrow/fine-arrow.ts

@@ -1,8 +1,9 @@
-import Draw from '../draw';
+import Base from '../base';
 import * as Utils from '../utils';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class FineArrow extends Draw {
+export default class FineArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 2;
@@ -13,8 +14,8 @@ export default class FineArrow extends Draw {
   neckAngle: number;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.tailWidthFactor = 0.1;

src/arrow/squad-combat.ts

@@ -1,6 +1,7 @@
 import * as Utils from '../utils';
 import AttackArrow from './attack-arrow';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
 export default class SquadCombat extends AttackArrow {
   points: Cartesian3[] = [];
@@ -11,8 +12,8 @@ export default class SquadCombat extends AttackArrow {
   tailWidthFactor: number;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer, {});
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.headHeightFactor = 0.18;

src/arrow/straight-arrow.ts

@@ -1,15 +1,16 @@
 import * as Utils from '../utils';
-import Draw from '../draw';
+import Base from '../base';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class StraightArrow extends Draw {
+export default class StraightArrow extends Base {
   points: Cartesian3[] = [];
   arrowLengthScale: number = 5;
   maxArrowLength: number = 3000000;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'line';
     this.setState('drawing');

src/arrow/swallowtail-attack-arrow.ts

@@ -1,6 +1,7 @@
 import * as Utils from '../utils';
 import AttackArrow from './attack-arrow';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
 export default class SwallowtailAttackArrow extends AttackArrow {
   points: Cartesian3[] = [];
@@ -14,8 +15,8 @@ export default class SwallowtailAttackArrow extends AttackArrow {
   swallowTailPnt: [number, number];
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer, {});
+    super(cesium, viewer, style);
 
     this.cesium = cesium;
     this.type = 'polygon';

src/arrow/swallowtail-squad-combat.ts

@@ -1,6 +1,7 @@
 import * as Utils from '../utils';
 import SquadCombat from './squad-combat';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
 export default class SwallowtailSquadCombat extends SquadCombat {
   points: Cartesian3[] = [];
@@ -12,8 +13,8 @@ export default class SwallowtailSquadCombat extends SquadCombat {
   swallowTailFactor: number;
   type: 'polygon' | 'line';
 
-  constructor(cesium: any, viewer: any, style: any) {
+    constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer, {});
+    super(cesium, viewer, style);
 
     this.cesium = cesium;
     this.type = 'polygon';

src/base.ts

@@ -1,7 +1,7 @@
 import * as CesiumTypeOnly from '@examples/cesium';
-import { State } from './interface';
+import { State, GeometryStyle, PolygonStyle, LineStyle } from './interface';
 
-export default class Draw {
+export default class Base {
   cesium: typeof CesiumTypeOnly;
   viewer: CesiumTypeOnly.Viewer;
   eventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
@@ -13,11 +13,13 @@ export default class Draw {
   lineEntity: CesiumTypeOnly.Entity;
   type!: 'polygon' | 'line';
   freehand!: boolean;
+  style: GeometryStyle;
+  outlineEntity: CesiumTypeOnly.Entity;
 
-  constructor(cesium: typeof CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer) {
+  constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style: GeometryStyle) {
     this.cesium = cesium;
     this.viewer = viewer;
-
+    this.style = style;
     this.cartesianToLnglat = this.cartesianToLnglat.bind(this);
     this.pixelToCartesian = this.pixelToCartesian.bind(this);
     this.onClick();
@@ -139,14 +141,28 @@ export default class Draw {
       return new this.cesium.PolygonHierarchy(this.geometryPoints);
     };
     if (!this.polygonEntity) {
+      const style = this.style as PolygonStyle;
       this.polygonEntity = this.viewer.entities.add({
         polygon: new this.cesium.PolygonGraphics({
           hierarchy: new this.cesium.CallbackProperty(callback, false),
           show: true,
           // fill: true,
           // material: this.cesium.Color.LIGHTSKYBLUE.withAlpha(0.8),
+          material: style.fillColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
         }),
       });
+
+      // Due to limitations in PolygonGraphics outlining, a separate line style is drawn.
+      this.outlineEntity = this.viewer.entities.add({
+        polyline: {
+          positions: new this.cesium.CallbackProperty(() => {
+            return [...this.geometryPoints, this.geometryPoints[0]];
+          }, false),
+          width: style.outlineWidth || 2,
+          material: style.outlineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          clampToGround: true,
+        },
+      });
     }
   }
 
@@ -156,7 +172,7 @@ export default class Draw {
         polyline: {
           positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
           width: 2,
-          // material: this.cesium.Color.RED,
+          material: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
           clampToGround: true,
         },
       });

src/interface.ts

@@ -1 +1,15 @@
+import * as CesiumTypeOnly from '@examples/cesium';
+
+export type PolygonStyle = {
+  fillColor?: CesiumTypeOnly.Color;
+  outlineWidth?: number;
+  outlineColor?: CesiumTypeOnly.Color;
+};
+
+export type LineStyle = {
+  color?: CesiumTypeOnly.Color;
+  lineWidth?: number;
+};
+
 export type State = 'drawing' | 'edit' | 'static';
+export type GeometryStyle = PolygonStyle | LineStyle;

src/line/freehand-line.ts

@@ -1,13 +1,14 @@
-import Draw from '../draw';
+import Base from '../base';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class FreehandLine extends Draw {
+export default class FreehandLine extends Base {
   points: Cartesian3[] = [];
   type: 'polygon' | 'line';
   freehand: boolean;
 
-  constructor(cesium: any, viewer: any, style: any) {
+  constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'line';
     this.freehand = true;

src/polygon/freehand-polygon.ts

@@ -1,13 +1,14 @@
-import Draw from '../draw';
+import Base from '../base';
 import { Cartesian3 } from '@examples/cesium';
+import { PolygonStyle } from '../interface';
 
-export default class FreehandPolygon extends Draw {
+export default class FreehandPolygon extends Base {
   points: Cartesian3[] = [];
   type: 'polygon' | 'line';
   freehand: boolean;
 
-  constructor(cesium: any, viewer: any, style: any) {
+  constructor(cesium: any, viewer: any, style: PolygonStyle) {
-    super(cesium, viewer);
+    super(cesium, viewer, style);
     this.cesium = cesium;
     this.type = 'polygon';
     this.freehand = true;