File

projects/angular-cesium/src/lib/angular-cesium-widgets/components/hippodrome-editor/hippodrome-editor.component.ts

Implements

OnDestroy

Metadata

changeDetection ChangeDetectionStrategy.OnPush
providers CoordinateConverter HippodromeManagerService
selector hippodrome-editor
template
  <ac-layer #editHippodromesLayer acFor="let hippodrome of editHippodromes$" [context]="this">
      <ac-corridor-desc props="{
        positions: hippodrome.getRealPositionsCallbackProperty(),
        cornerType: Cesium.CornerType.ROUNDED,
        material: hippodrome.hippodromeProps.material,
        width : hippodrome.hippodromeProps.width,
        outline: hippodrome.hippodromeProps.outline,
        outlineColor: hippodrome.hippodromeProps.outlineColor,
        outlineWidth: hippodrome.hippodromeProps.outlineWidth,
        height: 0,
        classificationType: hippodrome.hippodromeProps.classificationType,
        zIndex: hippodrome.hippodromeProps.zIndex,
        shadows: hippodrome.hippodromeProps.shadows,
}">
      </ac-corridor-desc>

      <ac-array-desc acFor="let label of hippodrome.labels" [idGetter]="getLabelId">
          <ac-label-primitive-desc props="{
        position: label.position,
        backgroundColor: label.backgroundColor,
        backgroundPadding: label.backgroundPadding,
        distanceDisplayCondition: label.distanceDisplayCondition,
        eyeOffset: label.eyeOffset,
        fillColor: label.fillColor,
        font: label.font,
        heightReference: label.heightReference,
        horizontalOrigin: label.horizontalOrigin,
        outlineColor: label.outlineColor,
        outlineWidth: label.outlineWidth,
        pixelOffset: label.pixelOffset,
        pixelOffsetScaleByDistance: label.pixelOffsetScaleByDistance,
        scale: label.scale,
        scaleByDistance: label.scaleByDistance,
        show: label.show,
        showBackground: label.showBackground,
        style: label.style,
        text: label.text,
        translucencyByDistance: label.translucencyByDistance,
        verticalOrigin: label.verticalOrigin,
        disableDepthTestDistance: label.disableDepthTestDistance,
    }">
          </ac-label-primitive-desc>
      </ac-array-desc>
  </ac-layer>

  <ac-layer #editPointsLayer acFor="let point of editPoints$" [context]="this">
      <ac-point-desc props="{
     position: point.getPositionCallbackProperty(),
     pixelSize: getPointSize(point),
     color: point.props.color,
     outlineColor: point.props.outlineColor,
     outlineWidth: point.props.outlineWidth,
     show: getPointShow(point),
     disableDepthTestDistance: point.props.disableDepthTestDistance,
     heightReference: point.props.heightReference,
}">
      </ac-point-desc>
  </ac-layer>

Index

Properties
Methods

Constructor

constructor(hippodromesEditor: HippodromeEditorService, coordinateConverter: CoordinateConverter, mapEventsManager: MapEventsManagerService, cameraService: CameraService, hippodromesManager: HippodromeManagerService)
Parameters :
Name Type Optional
hippodromesEditor HippodromeEditorService No
coordinateConverter CoordinateConverter No
mapEventsManager MapEventsManagerService No
cameraService CameraService No
hippodromesManager HippodromeManagerService No

Methods

getLabelId
getLabelId(element: any, index: number)
Parameters :
Name Type Optional
element any No
index number No
Returns : string
getPointShow
getPointShow(point: EditPoint)
Parameters :
Name Type Optional
point EditPoint No
Returns : any
getPointSize
getPointSize(point: EditPoint)
Parameters :
Name Type Optional
point EditPoint No
Returns : any
handleCreateUpdates
handleCreateUpdates(update: HippodromeEditUpdate)
Parameters :
Name Type Optional
update HippodromeEditUpdate No
Returns : void
handleEditUpdates
handleEditUpdates(update: HippodromeEditUpdate)
Parameters :
Name Type Optional
update HippodromeEditUpdate No
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
removeEditLabels
removeEditLabels(hippodrome: EditableHippodrome)
Parameters :
Name Type Optional
hippodrome EditableHippodrome No
Returns : void
renderEditLabels
renderEditLabels(hippodrome: EditableHippodrome, update: HippodromeEditUpdate, labels?: LabelProps[])
Parameters :
Name Type Optional
hippodrome EditableHippodrome No
update HippodromeEditUpdate No
labels LabelProps[] Yes
Returns : void
Private startListeningToEditorUpdates
startListeningToEditorUpdates()
Returns : void

Properties

Public Cesium
Cesium:
Default value : Cesium
Public editHippodromes$
editHippodromes$:
Default value : new Subject<AcNotification>()
Private editHippodromesLayer
editHippodromesLayer: AcLayerComponent
Type : AcLayerComponent
Decorators :
@ViewChild('editHippodromesLayer')
Private editLabelsRenderFn
editLabelsRenderFn: function
Type : function
Public editPoints$
editPoints$:
Default value : new Subject<AcNotification>()
Private editPointsLayer
editPointsLayer: AcLayerComponent
Type : AcLayerComponent
Decorators :
@ViewChild('editPointsLayer')
import { ChangeDetectionStrategy, Component, OnDestroy, ViewChild } from '@angular/core';
import { EditModes } from '../../models/edit-mode.enum';
import { AcNotification } from '../../../angular-cesium/models/ac-notification';
import { EditActions } from '../../models/edit-actions.enum';
import { AcLayerComponent } from '../../../angular-cesium/components/ac-layer/ac-layer.component';
import { CoordinateConverter } from '../../../angular-cesium/services/coordinate-converter/coordinate-converter.service';
import { MapEventsManagerService } from '../../../angular-cesium/services/map-events-mananger/map-events-manager';
import { Subject } from 'rxjs';
import { CameraService } from '../../../angular-cesium/services/camera/camera.service';
import { EditPoint } from '../../models/edit-point';
import { HippodromeManagerService } from '../../services/entity-editors/hippodrome-editor/hippodrome-manager.service';
import { HippodromeEditorService } from '../../services/entity-editors/hippodrome-editor/hippodrome-editor.service';
import { HippodromeEditUpdate } from '../../models/hippodrome-edit-update';
import { LabelProps } from '../../models/label-props';
import { EditableHippodrome } from '../../models/editable-hippodrome';

@Component({
  selector: 'hippodrome-editor',
  template: /*html*/ `
      <ac-layer #editHippodromesLayer acFor="let hippodrome of editHippodromes$" [context]="this">
          <ac-corridor-desc props="{
            positions: hippodrome.getRealPositionsCallbackProperty(),
            cornerType: Cesium.CornerType.ROUNDED,
            material: hippodrome.hippodromeProps.material,
            width : hippodrome.hippodromeProps.width,
            outline: hippodrome.hippodromeProps.outline,
            outlineColor: hippodrome.hippodromeProps.outlineColor,
            outlineWidth: hippodrome.hippodromeProps.outlineWidth,
            height: 0,
            classificationType: hippodrome.hippodromeProps.classificationType,
            zIndex: hippodrome.hippodromeProps.zIndex,
            shadows: hippodrome.hippodromeProps.shadows,
    }">
          </ac-corridor-desc>

          <ac-array-desc acFor="let label of hippodrome.labels" [idGetter]="getLabelId">
              <ac-label-primitive-desc props="{
            position: label.position,
            backgroundColor: label.backgroundColor,
            backgroundPadding: label.backgroundPadding,
            distanceDisplayCondition: label.distanceDisplayCondition,
            eyeOffset: label.eyeOffset,
            fillColor: label.fillColor,
            font: label.font,
            heightReference: label.heightReference,
            horizontalOrigin: label.horizontalOrigin,
            outlineColor: label.outlineColor,
            outlineWidth: label.outlineWidth,
            pixelOffset: label.pixelOffset,
            pixelOffsetScaleByDistance: label.pixelOffsetScaleByDistance,
            scale: label.scale,
            scaleByDistance: label.scaleByDistance,
            show: label.show,
            showBackground: label.showBackground,
            style: label.style,
            text: label.text,
            translucencyByDistance: label.translucencyByDistance,
            verticalOrigin: label.verticalOrigin,
            disableDepthTestDistance: label.disableDepthTestDistance,
        }">
              </ac-label-primitive-desc>
          </ac-array-desc>
      </ac-layer>

      <ac-layer #editPointsLayer acFor="let point of editPoints$" [context]="this">
          <ac-point-desc props="{
         position: point.getPositionCallbackProperty(),
         pixelSize: getPointSize(point),
         color: point.props.color,
         outlineColor: point.props.outlineColor,
         outlineWidth: point.props.outlineWidth,
         show: getPointShow(point),
         disableDepthTestDistance: point.props.disableDepthTestDistance,
         heightReference: point.props.heightReference,
    }">
          </ac-point-desc>
      </ac-layer>
  `,
  providers: [CoordinateConverter, HippodromeManagerService],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HippodromeEditorComponent implements OnDestroy {
  private editLabelsRenderFn: (update: HippodromeEditUpdate, labels: LabelProps[]) => LabelProps[];
  public Cesium = Cesium;
  public editPoints$ = new Subject<AcNotification>();
  public editHippodromes$ = new Subject<AcNotification>();

  @ViewChild('editPointsLayer') private editPointsLayer: AcLayerComponent;
  @ViewChild('editHippodromesLayer') private editHippodromesLayer: AcLayerComponent;

  constructor(
    private hippodromesEditor: HippodromeEditorService,
    private coordinateConverter: CoordinateConverter,
    private mapEventsManager: MapEventsManagerService,
    private cameraService: CameraService,
    private hippodromesManager: HippodromeManagerService,
  ) {
    this.hippodromesEditor.init(this.mapEventsManager, this.coordinateConverter, this.cameraService, hippodromesManager);
    this.startListeningToEditorUpdates();
  }

  private startListeningToEditorUpdates() {
    this.hippodromesEditor.onUpdate().subscribe((update: HippodromeEditUpdate) => {
      if (update.editMode === EditModes.CREATE || update.editMode === EditModes.CREATE_OR_EDIT) {
        this.handleCreateUpdates(update);
      } else if (update.editMode === EditModes.EDIT) {
        this.handleEditUpdates(update);
      }
    });
  }

  getLabelId(element: any, index: number): string {
    return index.toString();
  }

  renderEditLabels(hippodrome: EditableHippodrome, update: HippodromeEditUpdate, labels?: LabelProps[]) {
    update.positions = hippodrome.getRealPositions();
    update.points = hippodrome.getRealPoints();

    if (labels) {
      hippodrome.labels = labels;
      this.editHippodromesLayer.update(hippodrome, hippodrome.getId());
      return;
    }

    if (!this.editLabelsRenderFn) {
      return;
    }

    hippodrome.labels = this.editLabelsRenderFn(update, hippodrome.labels);
    this.editHippodromesLayer.update(hippodrome, hippodrome.getId());
  }

  removeEditLabels(hippodrome: EditableHippodrome) {
    hippodrome.labels = [];
    this.editHippodromesLayer.update(hippodrome, hippodrome.getId());
  }

  handleCreateUpdates(update: HippodromeEditUpdate) {
    switch (update.editAction) {
      case EditActions.INIT: {
        this.hippodromesManager.createEditableHippodrome(
          update.id,
          this.editPointsLayer,
          this.editHippodromesLayer,
          this.coordinateConverter,
          update.hippodromeOptions,
        );
        break;
      }
      case EditActions.MOUSE_MOVE: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (update.updatedPosition) {
          hippodrome.moveTempMovingPoint(update.updatedPosition);
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.ADD_POINT: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (update.updatedPosition) {
          hippodrome.moveTempMovingPoint(update.updatedPosition);
          hippodrome.addPoint(update.updatedPosition);
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.DISPOSE: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome) {
          hippodrome.dispose();
          this.removeEditLabels(hippodrome);
        }
        break;
      }
      case EditActions.SET_EDIT_LABELS_RENDER_CALLBACK: {
        const hippodrome = this.hippodromesManager.get(update.id);
        this.editLabelsRenderFn = update.labelsRenderFn;
        this.renderEditLabels(hippodrome, update);
        break;
      }
      case EditActions.UPDATE_EDIT_LABELS: {
        const hippodrome = this.hippodromesManager.get(update.id);
        this.renderEditLabels(hippodrome, update, update.updateLabels);
        break;
      }
      case EditActions.SET_MANUALLY: {
        const hippodrome = this.hippodromesManager.get(update.id);
        this.renderEditLabels(hippodrome, update, update.updateLabels);
        break;
      }
      default: {
        return;
      }
    }
  }

  handleEditUpdates(update: HippodromeEditUpdate) {
    switch (update.editAction) {
      case EditActions.INIT: {
        this.hippodromesManager.createEditableHippodrome(
          update.id,
          this.editPointsLayer,
          this.editHippodromesLayer,
          this.coordinateConverter,
          update.hippodromeOptions,
          update.positions,
        );
        break;
      }
      case EditActions.DRAG_POINT: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome && hippodrome.enableEdit) {
          hippodrome.movePoint(update.updatedPosition, update.updatedPoint);
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.DRAG_POINT_FINISH: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome && hippodrome.enableEdit) {
          hippodrome.endMovePoint();
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.DISABLE: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome) {
          hippodrome.enableEdit = false;
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.ENABLE: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome) {
          hippodrome.enableEdit = true;
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      case EditActions.DRAG_SHAPE: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome && hippodrome.enableEdit) {
          hippodrome.moveShape(update.draggedPosition, update.updatedPosition);
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }

      case EditActions.DRAG_SHAPE_FINISH: {
        const hippodrome = this.hippodromesManager.get(update.id);
        if (hippodrome && hippodrome.enableEdit) {
          hippodrome.endMoveShape();
          this.renderEditLabels(hippodrome, update);
        }
        break;
      }
      default: {
        return;
      }
    }
  }

  ngOnDestroy(): void {
    this.hippodromesManager.clear();
  }

  getPointSize(point: EditPoint) {
    return point.isVirtualEditPoint() ? point.props.virtualPointPixelSize : point.props.pixelSize;
  }

  getPointShow(point: EditPoint) {
    return point.show && (point.isVirtualEditPoint() ? point.props.showVirtual : point.props.show);
  }
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""