AnSyn · yairtawil · May 12, 2019
diff --git a/src/app/@ansyn/ansyn/modules/menu-items/tools/actions/tools.actions.ts b/src/app/@ansyn/ansyn/modules/menu-items/tools/actions/tools.actions.ts
@@ -56,7 +56,7 @@ export class StartMouseShadow implements Action {
 export class SetAnnotationMode implements Action {
 	type = ToolsActionsTypes.STORE.SET_ANNOTATION_MODE;
 
-	constructor(public payload?: AnnotationMode) {
+	constructor(public payload: AnnotationMode = null) {
 
 	}
 }

diff --git a/.../modules/menu-items/tools/components/annotations-control/annotations-control.component.ts b/.../modules/menu-items/tools/components/annotations-control/annotations-control.component.ts
@@ -99,7 +99,7 @@ export class AnnotationsControlComponent implements OnInit, OnDestroy {
 	}
 
 	setAnnotationMode(mode?: AnnotationMode) {
-		const dispatchValue = this.mode === mode ? undefined : mode;
+		const dispatchValue = this.mode === mode ? null : mode;
 		if (dispatchValue) {
 			this.store.dispatch(new ClearActiveInteractionsAction({ skipClearFor: [SetAnnotationMode] }));
 		}

diff --git a/...n/ansyn/modules/plugins/openlayers/plugins/layers/openlayers-geoJson-layers.visualizer.ts b/...n/ansyn/modules/plugins/openlayers/plugins/layers/openlayers-geoJson-layers.visualizer.ts
@@ -69,7 +69,6 @@ export class OpenlayersGeoJsonLayersVisualizer extends EntitiesVisualizer {
 		return collection.features.map((feature: Feature<any>): IVisualizerEntity => ({
 			id: feature.properties.id || UUID.UUID(),
 			featureJson: feature,
-			style: feature.properties.style
 		}));
 	}
 

diff --git a/...nsyn/modules/plugins/openlayers/plugins/visualizers/tools/ansyn.annotations.visualizer.ts b/...nsyn/modules/plugins/openlayers/plugins/visualizers/tools/ansyn.annotations.visualizer.ts
@@ -1,9 +1,9 @@
 import { fromCircle } from 'ol/geom/Polygon';
 import { BaseImageryPlugin, ImageryPlugin, IVisualizerEntity, IVisualizerStyle } from '@ansyn/imagery';
-import { uniq } from 'lodash';
+import { groupBy as _groupBy, uniq, isEqual as _isEqual, get as _get } from 'lodash';
 import { select, Store } from '@ngrx/store';
 import { MapFacadeService, selectActiveMapId, selectMapsList } from '@ansyn/map-facade';
-import { combineLatest, Observable } from 'rxjs';
+import { combineLatest, Observable, EMPTY } from 'rxjs';
 import { Inject } from '@angular/core';
 import { distinctUntilChanged, filter, map, mergeMap, tap, withLatestFrom } from 'rxjs/operators';
 import { AutoSubscription } from 'auto-subscriptions';
@@ -118,10 +118,7 @@ export class AnsynAnnotationsVisualizer extends BaseImageryPlugin {
 
 	@AutoSubscription
 	onChangeMode$ = () => this.annotationsVisualizer.events.onChangeMode.pipe(
-		tap((mode) => {
-			const newMode = !Boolean(mode) ? undefined : mode; // prevent infinite loop
-			this.store$.dispatch(new SetAnnotationMode(newMode))
-		})
+		tap((mode) => this.store$.dispatch(new SetAnnotationMode(mode)))
 	);
 
 	@AutoSubscription
@@ -174,18 +171,20 @@ export class AnsynAnnotationsVisualizer extends BaseImageryPlugin {
 		const annotationsLayerEntities = this.annotationsVisualizer.annotationsLayerToEntities(annotationsLayer);
 		this.annotationsVisualizer.getEntities()
 			.filter(({ id }) => !annotationsLayerEntities.some((entity) => id === entity.id))
-			.forEach(({ id }) => this.annotationsVisualizer.removeEntity(id, true));
+			.forEach(({ id }) => this.annotationsVisualizer._removeEntity(id));
 
 		const entitiesToAdd = annotationsLayerEntities
 			.filter((entity) => {
-				const oldEntity = this.annotationsVisualizer.idToEntity.get(entity.id);
+				const oldEntity = _get(this.annotationsVisualizer, `entities[${entity.id}].originalEntity`);
 				if (oldEntity) {
-					const isShowMeasuresDiff = oldEntity.originalEntity.showMeasures !== entity.showMeasures;
-					const isLabelDiff = oldEntity.originalEntity.label !== entity.label;
-					const isFillDiff = oldEntity.originalEntity.style.initial.fill !== entity.style.initial.fill;
-					const isStrokeWidthDiff = oldEntity.originalEntity.style.initial['stroke-width'] !== entity.style.initial['stroke-width'];
-					const isStrokeDiff = oldEntity.originalEntity.style.initial['stroke'] !== entity.style.initial['stroke'];
-					const isOpacityDiff = ['fill-opacity', 'stroke-opacity'].filter((o) => oldEntity.originalEntity.style.initial[o] !== entity.style.initial[o]);
+					const { properties: oldProperties } = oldEntity.featureJson;
+					const { properties } = entity.featureJson;
+					const isShowMeasuresDiff = oldProperties.showMeasures !== properties.showMeasures;
+					const isLabelDiff = oldProperties.label !== properties.label;
+					const isFillDiff = oldProperties.style.initial.fill !== properties.style.initial.fill;
+					const isStrokeWidthDiff = oldProperties.style.initial['stroke-width'] !== properties.style.initial['stroke-width'];
+					const isStrokeDiff = oldProperties.style.initial['stroke'] !== properties.style.initial['stroke'];
+					const isOpacityDiff = ['fill-opacity', 'stroke-opacity'].filter((o) => oldProperties.style.initial[o] !== properties.style.initial[o]);
 					return isShowMeasuresDiff || isLabelDiff || isFillDiff || isStrokeWidthDiff || isStrokeDiff || isOpacityDiff;
 				}
 				return true;

diff --git a/...ansyn/modules/plugins/openlayers/plugins/visualizers/tools/measure-distance.visualizer.ts b/...ansyn/modules/plugins/openlayers/plugins/visualizers/tools/measure-distance.visualizer.ts
@@ -232,7 +232,7 @@ export class MeasureDistanceVisualizer extends EntitiesVisualizer {
 
 		if (calculateCenterOfMass) {
 			const featureId = <string> feature.getId();
-			const entityMap = this.idToEntity.get(featureId);
+			const entityMap = this.entities[featureId];
 			if (entityMap) {
 				const featureGeoJson = <any> this.geoJsonFormat.writeFeatureObject(entityMap.feature);
 				const centroid = getPointByGeometry(featureGeoJson.geometry);

diff --git a/...syn/ansyn/modules/plugins/openlayers/plugins/visualizers/tools/mouse-shadow.visualizer.ts b/...syn/ansyn/modules/plugins/openlayers/plugins/visualizers/tools/mouse-shadow.visualizer.ts
@@ -94,18 +94,18 @@ export class MouseShadowVisualizer extends EntitiesVisualizer {
 		};
 
 		logicalEntitiesCopy.forEach((entity: IVisualizerEntity) => {
-			this.removeEntity(entity.id);
+			this._removeEntity(entity.id);
 			const clonedFeatureJson: any = { ...entity.featureJson, id: entity.id };
 			featuresCollectionToAdd.features.push(clonedFeatureJson);
-			this.idToEntity.set(entity.id, { originalEntity: entity, feature: null });
+			this.entities = { ...this.entities, [entity.id]: { originalEntity: entity, feature: null } };
 		});
 
 		return this.projectionService.projectCollectionApproximatelyToImage<olFeature>(featuresCollectionToAdd, this.iMap.mapObject).pipe(
 			map((features: olFeature[]) => {
 				features.forEach((feature: olFeature) => {
 					const id: string = <string>feature.getId();
-					const existingEntity = this.idToEntity.get(id);
-					this.idToEntity.set(id, { ...existingEntity, feature: feature });
+					const existingEntity = this.entities[id];
+					this.entities = { ...this.entities, [id]: { ...existingEntity, feature: feature } };
 				});
 				this.source.addFeatures(features);
 				return true;

diff --git a/src/app/@ansyn/imagery/model/visualizers/visualizers-entity.ts b/src/app/@ansyn/imagery/model/visualizers/visualizers-entity.ts
@@ -1,11 +1,6 @@
-import { IVisualizerStateStyle } from './visualizer-state';
 import { Feature } from 'geojson';
 
 export interface IVisualizerEntity {
 	id: string;
-	label?: string;
 	featureJson: Feature<any>;
-	type?: string;
-	style?: Partial<IVisualizerStateStyle>;
-	showMeasures?: boolean;
 }
diff --git a/...ns-context-menu/components/annotation-context-menu/annotation-context-menu.component.html b/...ns-context-menu/components/annotation-context-menu/annotation-context-menu.component.html
@@ -1,100 +1,107 @@
-<div class="context-menu-wrapper"
-	 *ngFor="let featureId of selection"
-	 [ngStyle]="calcBoundingRect(featureId)">
-
-	<div class="context-menu" [style.outline-color]="getFeatureProps(featureId)?.style?.initial?.stroke">
-		<ul class="buttons">
-			<li>
-				<button [class.active]="getFeatureProps(featureId)?.showMeasures" (click)="toggleMeasures(featureId)">
-					<i tooltip-value="Measures" tooltip-class="bottom">
-						<svg
-							viewBox="0 0 1024 1024" fill="#fff">
-							<path
-								d="M691.989 213.333l-478.656 474.965 118.721 122.368 478.612-474.988-118.677-122.345zM728.346 375.595l-16.401 16.3-23.902-24.615-15.13 15.057 23.881 24.593-22.524 22.352-36.774-37.897-15.194 15.057 36.796 37.876-16.405 16.277-23.855-24.593-15.155 15.036 23.859 24.614-22.148 21.956-40.657-41.869-15.172 15.057 40.657 41.869-16.405 16.23-27.759-28.582-15.155 15.057 27.742 28.587-22.498 22.327-40.636-41.865-15.172 15.057 40.653 41.869-16.38 16.277-27.738-28.608-15.155 15.057 27.742 28.608-20.791 20.646-40.653-41.916-15.176 15.083 40.656 41.89-16.405 16.23-27.738-28.582-15.131 15.078 27.718 28.587-22.499 22.353-40.655-41.89-15.153 15.057 40.634 41.89-16.425 16.277-27.739-28.608-15.131 15.057 27.74 28.608-20.262 20.092-77.408-79.791 436.577-433.252 77.385 79.767-25.502 25.325-36.774-37.899-15.155 15.035 36.774 37.876z"></path>
-						</svg>
-					</i>
-				</button>
-			</li>
-			<li>
-				<button [class.active]="selectedTab[featureId] === Tabs.Label" (click)="selectTab(featureId, Tabs.Label)">
-					<i tooltip-value="Label" tooltip-class="bottom">
-						<svg viewBox="0 0 1024 1024">
-							<path
-								d="M772.676 213.333h-192.124c-10.001 0-19.802 4.052-26.871 11.119l-329.236 329.263c-14.816 14.818-14.816 38.903 0 53.722l192.124 192.137c7.395 7.394 17.146 11.093 26.87 11.093 9.702 0 19.452-3.699 26.871-11.068l329.237-329.263c7.168-7.194 11.119-16.742 11.119-26.876v-192.135c0-20.946-17.045-37.992-37.99-37.992zM785.314 443.439c0 3.341-1.34 6.609-3.699 8.964l-329.237 329.263c-4.937 4.937-12.966 4.937-17.903 0l-192.124-192.137c-4.939-4.941-4.939-12.971 0-17.907l329.237-329.263c2.355-2.355 5.623-3.698 8.964-3.698h192.098c6.967 0 12.663 5.674 12.663 12.664v192.114z"></path>
-						</svg>
-					</i>
-				</button>
+<ng-container *ngFor="let featureId of selection">
 
-				<form class="annotation-label-edit"
-					  *ngIf="selectedTab[featureId] === Tabs.Label"
-					  (ngSubmit)="labelInput.blur()">
+	<div class="context-menu-wrapper"
+		 *ngIf="annotations?.entities[featureId]"
+		 [ngStyle]="calcBoundingRect(featureId)">
 
-					<mat-form-field class="label-form-field">
-						<input matInput
-							   type="text"
-							   #labelInput
-							   autofocus
-							   placeholder="Label"
-							   name="EditLabel"
-							   [ngModel]="getFeatureProps(featureId)?.label"
-							   (ngModelChange)="updateLabel($event, featureId)">
-					</mat-form-field>
-
-				</form>
-			</li>
-			<li class="expanded-selection line-width-selection">
-				<p>
-					<button [class.active]="selectedTab[featureId] === Tabs.Weight" (click)="selectTab(featureId, Tabs.Weight)">
-						<i tooltip-value="Width" tooltip-class="bottom">
+		<div class="context-menu" [style.outline-color]="getFeatureProps(featureId)?.style?.initial?.stroke">
+			<ul class="buttons">
+				<li>
+					<button [class.active]="getFeatureProps(featureId)?.showMeasures"
+							(click)="toggleMeasures(featureId)">
+						<i tooltip-value="Measures" tooltip-class="bottom">
+							<svg
+								viewBox="0 0 1024 1024" fill="#fff">
+								<path
+									d="M691.989 213.333l-478.656 474.965 118.721 122.368 478.612-474.988-118.677-122.345zM728.346 375.595l-16.401 16.3-23.902-24.615-15.13 15.057 23.881 24.593-22.524 22.352-36.774-37.897-15.194 15.057 36.796 37.876-16.405 16.277-23.855-24.593-15.155 15.036 23.859 24.614-22.148 21.956-40.657-41.869-15.172 15.057 40.657 41.869-16.405 16.23-27.759-28.582-15.155 15.057 27.742 28.587-22.498 22.327-40.636-41.865-15.172 15.057 40.653 41.869-16.38 16.277-27.738-28.608-15.155 15.057 27.742 28.608-20.791 20.646-40.653-41.916-15.176 15.083 40.656 41.89-16.405 16.23-27.738-28.582-15.131 15.078 27.718 28.587-22.499 22.353-40.655-41.89-15.153 15.057 40.634 41.89-16.425 16.277-27.739-28.608-15.131 15.057 27.74 28.608-20.262 20.092-77.408-79.791 436.577-433.252 77.385 79.767-25.502 25.325-36.774-37.899-15.155 15.035 36.774 37.876z"></path>
+							</svg>
+						</i>
+					</button>
+				</li>
+				<li>
+					<button [class.active]="selectedTab[featureId] === Tabs.Label"
+							(click)="selectTab(featureId, Tabs.Label)">
+						<i tooltip-value="Label" tooltip-class="bottom">
 							<svg viewBox="0 0 1024 1024">
 								<path
-									d="M256 645.333h511.94v-53.333h-511.94v53.333zM256 725.333h511.94v-26.667h-511.94v26.667zM256 538.667h511.94v-80h-511.94v80zM256 298.667v106.667h511.94v-106.667h-511.94z"></path>
+									d="M772.676 213.333h-192.124c-10.001 0-19.802 4.052-26.871 11.119l-329.236 329.263c-14.816 14.818-14.816 38.903 0 53.722l192.124 192.137c7.395 7.394 17.146 11.093 26.87 11.093 9.702 0 19.452-3.699 26.871-11.068l329.237-329.263c7.168-7.194 11.119-16.742 11.119-26.876v-192.135c0-20.946-17.045-37.992-37.99-37.992zM785.314 443.439c0 3.341-1.34 6.609-3.699 8.964l-329.237 329.263c-4.937 4.937-12.966 4.937-17.903 0l-192.124-192.137c-4.939-4.941-4.939-12.971 0-17.907l329.237-329.263c2.355-2.355 5.623-3.698 8.964-3.698h192.098c6.967 0 12.663 5.674 12.663 12.664v192.114z"></path>
 							</svg>
 						</i>
 					</button>
-					<ansyn-annotations-weight
-						[show]="selectedTab[featureId] === Tabs.Weight"
-						[properties]="getFeatureProps(featureId)?.style?.initial"
-						(selectLineWidth)="selectLineWidth($event.width, featureId)">
-					</ansyn-annotations-weight>
-				</p>
-			</li>
-			<li>
-				<p>
-					<button [class.active]="selectedTab[featureId] === Tabs.Colors" (click)="selectTab(featureId, Tabs.Colors)">
-						<i tooltip-value="Color" tooltip-class="bottom">
+
+					<form class="annotation-label-edit"
+						  *ngIf="selectedTab[featureId] === Tabs.Label"
+						  (ngSubmit)="labelInput.blur()">
+
+						<mat-form-field class="label-form-field">
+							<input matInput
+								   type="text"
+								   #labelInput
+								   autofocus
+								   placeholder="Label"
+								   name="EditLabel"
+								   [ngModel]="getFeatureProps(featureId)?.label"
+								   (ngModelChange)="updateLabel($event, featureId)">
+						</mat-form-field>
+
+					</form>
+				</li>
+				<li class="expanded-selection line-width-selection">
+					<p>
+						<button [class.active]="selectedTab[featureId] === Tabs.Weight"
+								(click)="selectTab(featureId, Tabs.Weight)">
+							<i tooltip-value="Width" tooltip-class="bottom">
+								<svg viewBox="0 0 1024 1024">
+									<path
+										d="M256 645.333h511.94v-53.333h-511.94v53.333zM256 725.333h511.94v-26.667h-511.94v26.667zM256 538.667h511.94v-80h-511.94v80zM256 298.667v106.667h511.94v-106.667h-511.94z"></path>
+								</svg>
+							</i>
+						</button>
+						<ansyn-annotations-weight
+							[show]="selectedTab[featureId] === Tabs.Weight"
+							[properties]="getFeatureProps(featureId)?.style?.initial"
+							(selectLineWidth)="selectLineWidth($event.width, featureId)">
+						</ansyn-annotations-weight>
+					</p>
+				</li>
+				<li>
+					<p>
+						<button [class.active]="selectedTab[featureId] === Tabs.Colors"
+								(click)="selectTab(featureId, Tabs.Colors)">
+							<i tooltip-value="Color" tooltip-class="bottom">
+								<svg viewBox="0 0 1024 1024">
+									<path
+										d="M370.506 526.251c-52.181 0-94.304 38.11-94.304 85.321 0 37.257-36.464 56.883-62.869 56.883 28.92 34.697 78.272 56.879 125.738 56.879 69.47 0 125.74-50.91 125.74-113.762 0-47.211-42.124-85.321-94.305-85.321zM801.472 259.762l-42.121-38.11c-12.262-11.092-32.064-11.092-44.322 0l-281.655 254.828 86.447 78.212 281.651-254.829c12.258-11.092 12.258-29.009 0-40.101zM213.333 668.454v-21.333h-45.553l29.165 34.991 16.387-13.658zM801.472 259.762v0zM759.351 221.652v0zM715.029 221.652v0zM433.374 476.48l-14.312-15.821-17.485 15.821 17.485 15.817 14.312-15.817zM519.821 554.692l-14.315 15.817 14.315 12.949 14.31-12.949-14.31-15.817zM801.472 299.863v0zM370.506 504.917c-61.904 0-115.637 45.7-115.637 106.654h42.667c0-33.472 30.512-63.987 72.97-63.987v-42.667zM254.869 611.571c0 10.829-5.031 19.204-13.216 25.51-8.667 6.677-19.803 10.039-28.319 10.039v42.667c17.888 0 38.188-6.451 54.353-18.901 16.648-12.826 29.849-32.887 29.849-59.315h-42.667zM196.946 682.112c33.247 39.889 88.769 64.555 142.125 64.555v-42.667c-41.576 0-84.758-19.699-109.35-49.207l-32.775 27.319zM339.071 746.667c79.193 0 147.073-58.5 147.073-135.095h-42.667c0 49.114-44.659 92.429-104.406 92.429v42.667zM486.144 611.571c0-60.954-53.734-106.654-115.638-106.654v42.667c42.458 0 72.972 30.515 72.972 63.987h42.667zM815.787 243.943l-42.125-38.11-28.625 31.639 42.121 38.11 28.629-31.639zM773.662 205.833c-20.386-18.444-52.561-18.444-72.947 0l28.625 31.639c4.134-3.74 11.563-3.74 15.697 0l28.625-31.639zM700.715 205.833l-281.653 254.827 28.627 31.637 281.651-254.825-28.625-31.639zM419.062 492.297l86.444 78.212 28.625-31.637-86.443-78.212-28.627 31.637zM534.131 570.509l281.655-254.826-28.629-31.639-281.651 254.828 28.625 31.637zM815.787 315.683c21.619-19.561 21.619-52.179 0-71.74l-28.629 31.639c1.762 1.593 2.176 3.142 2.176 4.231s-0.414 2.638-2.176 4.231l28.629 31.639zM213.333 832h597.333v-42.667h-597.333v42.667z"></path>
+								</svg>
+							</i>
+						</button>
+						<ansyn-annotations-color
+							[show]="selectedTab[featureId] === Tabs.Colors"
+							[properties]="getFeatureProps(featureId)?.style?.initial"
+							(colorChange)="colorChange($event, featureId)"
+							(activeChange)="activeChange($event, featureId)"
+						></ansyn-annotations-color>
+					</p>
+				</li>
+
+				<li>
+					<button class='removeFeature' (click)="removeFeature(featureId)">
+						<i tooltip-value="Delete" tooltip-class="bottom">
 							<svg viewBox="0 0 1024 1024">
 								<path
-									d="M370.506 526.251c-52.181 0-94.304 38.11-94.304 85.321 0 37.257-36.464 56.883-62.869 56.883 28.92 34.697 78.272 56.879 125.738 56.879 69.47 0 125.74-50.91 125.74-113.762 0-47.211-42.124-85.321-94.305-85.321zM801.472 259.762l-42.121-38.11c-12.262-11.092-32.064-11.092-44.322 0l-281.655 254.828 86.447 78.212 281.651-254.829c12.258-11.092 12.258-29.009 0-40.101zM213.333 668.454v-21.333h-45.553l29.165 34.991 16.387-13.658zM801.472 259.762v0zM759.351 221.652v0zM715.029 221.652v0zM433.374 476.48l-14.312-15.821-17.485 15.821 17.485 15.817 14.312-15.817zM519.821 554.692l-14.315 15.817 14.315 12.949 14.31-12.949-14.31-15.817zM801.472 299.863v0zM370.506 504.917c-61.904 0-115.637 45.7-115.637 106.654h42.667c0-33.472 30.512-63.987 72.97-63.987v-42.667zM254.869 611.571c0 10.829-5.031 19.204-13.216 25.51-8.667 6.677-19.803 10.039-28.319 10.039v42.667c17.888 0 38.188-6.451 54.353-18.901 16.648-12.826 29.849-32.887 29.849-59.315h-42.667zM196.946 682.112c33.247 39.889 88.769 64.555 142.125 64.555v-42.667c-41.576 0-84.758-19.699-109.35-49.207l-32.775 27.319zM339.071 746.667c79.193 0 147.073-58.5 147.073-135.095h-42.667c0 49.114-44.659 92.429-104.406 92.429v42.667zM486.144 611.571c0-60.954-53.734-106.654-115.638-106.654v42.667c42.458 0 72.972 30.515 72.972 63.987h42.667zM815.787 243.943l-42.125-38.11-28.625 31.639 42.121 38.11 28.629-31.639zM773.662 205.833c-20.386-18.444-52.561-18.444-72.947 0l28.625 31.639c4.134-3.74 11.563-3.74 15.697 0l28.625-31.639zM700.715 205.833l-281.653 254.827 28.627 31.637 281.651-254.825-28.625-31.639zM419.062 492.297l86.444 78.212 28.625-31.637-86.443-78.212-28.627 31.637zM534.131 570.509l281.655-254.826-28.629-31.639-281.651 254.828 28.625 31.637zM815.787 315.683c21.619-19.561 21.619-52.179 0-71.74l-28.629 31.639c1.762 1.593 2.176 3.142 2.176 4.231s-0.414 2.638-2.176 4.231l28.629 31.639zM213.333 832h597.333v-42.667h-597.333v42.667z"></path>
+									d="M810.667 273.493l-60.16-60.16-238.507 238.507-238.507-238.507-60.16 60.16 238.507 238.507-238.507 238.507 60.16 60.16 238.507-238.507 238.507 238.507 60.16-60.16-238.507-238.507 238.507-238.507z"></path>
 							</svg>
 						</i>
 					</button>
-					<ansyn-annotations-color
-						[show]="selectedTab[featureId] === Tabs.Colors"
-						[properties]="getFeatureProps(featureId)?.style?.initial"
-						(colorChange)="colorChange($event, featureId)"
-						(activeChange)="activeChange($event, featureId)"
-					></ansyn-annotations-color>
-				</p>
-			</li>
+				</li>
+			</ul>
+		</div>
 
-			<li>
-				<button class='removeFeature' (click)="removeFeature(featureId)">
-					<i tooltip-value="Delete" tooltip-class="bottom">
-						<svg viewBox="0 0 1024 1024">
-							<path
-								d="M810.667 273.493l-60.16-60.16-238.507 238.507-238.507-238.507-60.16 60.16 238.507 238.507-238.507 238.507 60.16 60.16 238.507-238.507 238.507 238.507 60.16-60.16-238.507-238.507 238.507-238.507z"></path>
-						</svg>
-					</i>
-				</button>
-			</li>
-		</ul>
 	</div>
-
-</div>
+</ng-container>
 
 <div class="context-menu-wrapper"
-	 *ngIf="hoverFeatureId"
+	 *ngIf="annotations?.entities[hoverFeatureId]"
 	 [ngStyle]="calcBoundingRect(hoverFeatureId)">
 	<div class="context-menu" [style.outline-color]="getFeatureProps(hoverFeatureId)?.style?.initial?.stroke"></div>
 </div>