feat(HideAnnotation): Hide button added to annotations to make them q…

src/os/annotation/annotationui.js

@@ -58,7 +58,12 @@ os.annotation.UI_TEMPLATE_ =
  '<path ng-style="{ fill: ctrl.options.showDescription ? ctrl.options.bodyBG : ctrl.options.headerBG}" />' +
  '</svg>' +
  '<div class="c-annotation__controls position-absolute text-right w-100" ng-if="ctrl.options.editable">' +
- '<button class="btn btn-sm btn-outline-secondary border-0 bg-transparent animate-fade u-hover-show"' +
+ '<button class="btn btn-sm btn-outline-secondary border-0 bg-transparent animate-fade u-hover-show"' +
+ 'title="Hide Annotation"' +
+ 'ng-click="ctrl.hideAnnotation()">' +
+ '<i class="fa fa-eye-slash"></i>' +
+ '</button>' +
+ '<button class="btn btn-sm btn-outline-secondary border-0 bg-transparent animate-fade u-hover-show"' +
  'title="Edit annotation"' +
  'ng-click="ctrl.editAnnotation()">' +
  '<i class="fa fa-pencil"></i>' +
@@ -256,6 +261,20 @@ os.annotation.AnnotationCtrl.prototype.editAnnotation = function() {
  }
 };
 
+/**
+ * Edit the annotation.
+ * @export
+ */
+os.annotation.AnnotationCtrl.prototype.hideAnnotation = function() {
+ if (this.feature) {
+ this['options'].show = false;
+ var source = /** @type {plugin.file.kml.KMLSource} */ (os.dataManager.getSource(plugin.places.ID));
+ var node = source.getFeatureNode(this.feature);
+ node.clearAnnotations();
+ node.dispatchEvent(new os.events.PropertyChangeEvent('icons'));
+ }
+};
+
 
 /**
  * Update the title from the feature.

src/plugin/file/kml/ui/kmlnode.js

@@ -256,6 +256,9 @@ plugin.file.kml.ui.KMLNode.prototype.loadAnnotation = function() {
  this.feature_.get(os.annotation.OPTIONS_FIELD));
  if (annotationOptions && annotationOptions.show) {
  this.annotation_ = new os.annotation.FeatureAnnotation(this.feature_);
+
+ // set initial visibility based on the tree/animation state
+ this.setAnnotationVisibility_(this.getState() === os.structs.TriState.ON && this.animationState_);
  }
  }
 };

src/plugin/file/kml/ui/kmlnodeui.js

@@ -1,6 +1,7 @@
 goog.provide('plugin.file.kml.ui.KMLNodeUICtrl');
 goog.provide('plugin.file.kml.ui.kmlNodeUIDirective');
 
+goog.require('os.events');
 goog.require('os.ui.Module');
 goog.require('os.ui.slick.AbstractNodeUICtrl');
 goog.require('plugin.file.kml.cmd.KMLNodeRemove');
@@ -22,6 +23,10 @@ plugin.file.kml.ui.kmlNodeUIDirective = function() {
  '<span ng-if="nodeUi.canEdit()" ng-click="nodeUi.edit()">' +
  '<i class="fa fa-pencil fa-fw c-glyph" ' +
  'title="Edit the {{nodeUi.isFolder() ? \'folder\' : \'place\'}}"></i></span>' +
+ '<span ng-if="!nodeUi.isFolder() && nodeUi.hasAnnotation()" ng-click="nodeUi.removeAnnotation()">' +
+ '<i class="fa fa-comment fa-fw c-glyph" title="Remove Annotation"></i></span>' +
+ '<span ng-if="!nodeUi.isFolder() && !nodeUi.hasAnnotation()" ng-click="nodeUi.showAnnotation()">' +
+ '<i class="fa fa-comment-o fa-fw c-glyph" title="Show Annotation"></i></span>' +
 
  '<span ng-if="nodeUi.canRemove()" ng-click="nodeUi.tryRemove()">' +
  '<i class="fa fa-times fa-fw c-glyph" ' +
@@ -186,3 +191,65 @@ plugin.file.kml.ui.KMLNodeUICtrl.prototype.edit = function() {
  }
  }
 };
+
+
+/**
+ * If there is an annotation or not
+ * @return {boolean}
+ * @export
+ */
+plugin.file.kml.ui.KMLNodeUICtrl.prototype.hasAnnotation = function() {
+ var node = /** @type {plugin.file.kml.ui.KMLNode} */ (this.scope['item']);
+ if (node) {
+ var feature = node.getFeature();
+ if (feature) {
+ var options = /** @type {osx.annotation.Options|undefined} */ (feature.get(os.annotation.OPTIONS_FIELD));
+ return options != null && options.show;
+ }
+ }
+ return false;
+};
+
+/**
+ * Removes annotation
+ * @export
+ */
+plugin.file.kml.ui.KMLNodeUICtrl.prototype.removeAnnotation = function() {
+ var node = /** @type {plugin.file.kml.ui.KMLNode} */ (this.scope['item']);
+ if (node) {
+ var feature = node.getFeature();
+ if (feature) {
+ node.clearAnnotations();
+
+ var options = /** @type {osx.annotation.Options|undefined} */ (feature.get(os.annotation.OPTIONS_FIELD));
+ if (options) {
+ options.show = false;
+ node.dispatchEvent(new os.events.PropertyChangeEvent('icons'));
+ }
+ }
+ }
+};
+
+/**
+ * Shows annotation
+ * @export
+ */
+plugin.file.kml.ui.KMLNodeUICtrl.prototype.showAnnotation = function() {
+ var node = /** @type {plugin.file.kml.ui.KMLNode} */ (this.scope['item']);
+ if (node) {
+ var feature = node.getFeature();
+ if (feature) {
+ var options = /** @type {osx.annotation.Options|undefined} */ (feature.get(os.annotation.OPTIONS_FIELD));
+ if (!options) {
+ options = os.object.unsafeClone(os.annotation.DEFAULT_OPTIONS);
+ feature.set(os.annotation.OPTIONS_FIELD, options);
+ }
+
+ options.show = true;
+
+ node.loadAnnotation();
+ node.dispatchEvent(new os.events.PropertyChangeEvent('icons'));
+ }
+ }
+};
+