Fix controls scope to only the current image (#6710)

* de-dupe method

* there can be only one... input per label

* there can be only one... id but we need none

* there can be only one... input

* create test and add multiple images to display

* WIP test written but not passing

* fix test

* Update e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* Update e2e/tests/functional/plugins/imagery/exampleImagery.e2e.spec.js

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

* remove await from synchronous code

* linting

---------

Co-authored-by: Jesse Mazzella <ozyx@users.noreply.github.com>

src/plugins/imagery/components/ImageControls.vue

@@ -137,7 +137,7 @@ export default {
     imageUrl(newUrl, oldUrl) {
       // reset image pan/zoom if newUrl only if not locked
       if (newUrl && !this.panZoomLocked) {
-        this.$emit('resetImage');
+        this.handleResetImage();
       }
     },
     cursorStates(states) {

src/plugins/imagery/components/LayerSettings.vue

@@ -27,20 +27,14 @@
     <div class="c-checkbox-list js-checkbox-menu c-menu--to-left c-menu--has-close-btn">
       <ul @click="$event.stopPropagation()">
         <li v-for="(layer, index) in layers" :key="index">
-          <input
-            v-if="layer.visible"
-            :id="index + 'LayerControl'"
-            checked
-            type="checkbox"
-            @change="toggleLayerVisibility(index)"
-          />
-          <input
-            v-else
-            :id="index + 'LayerControl'"
-            type="checkbox"
-            @change="toggleLayerVisibility(index)"
-          />
-          <label :for="index + 'LayerControl'">{{ layer.name }}</label>
+          <label>
+            <input
+              :checked="layer.visible"
+              type="checkbox"
+              @change="toggleLayerVisibility(index)"
+            />
+            {{ layer.name }}
+          </label>
         </li>
       </ul>
     </div>