From a019c4fe016ae56f34f1b20b61c8997e67d745f0 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Wed, 20 Dec 2023 20:00:21 -0500
Subject: [PATCH] feat(ToolLabelEditor): warn if label name is not unique

Still allows duplicate names if user presses "Done".

New labels are created with unique names suffixed with a number.

New labels loop through the confgi.ts:TOOL_COLORS.
---
 src/components/LabelControls.vue   | 17 ++++++++++++++++-
 src/components/ToolLabelEditor.vue | 30 +++++++++++++++++++++++++-----
 src/store/tools/useLabels.ts       |  5 +++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/LabelControls.vue b/src/components/LabelControls.vue
index 7c6561550..c5e671ee2 100644
--- a/src/components/LabelControls.vue
+++ b/src/components/LabelControls.vue
@@ -42,8 +42,22 @@ const editingLabel = computed(() => {
   return props.labelsStore.labels[editingLabelID.value];
 });
 
+const makeUniqueName = (name: string) => {
+  const existingNames = new Set(
+    Object.values(props.labelsStore.labels).map((label) => label.labelName)
+  );
+  let uniqueName = name;
+  let i = 1;
+  while (existingNames.has(uniqueName)) {
+    uniqueName = `${name} (${i})`;
+    i++;
+  }
+  return uniqueName;
+};
+
 const createLabel = () => {
-  editingLabelID.value = props.labelsStore.addLabel();
+  const labelName = makeUniqueName('New Label');
+  editingLabelID.value = props.labelsStore.addLabel({ labelName });
 };
 
 function startEditing(label: LabelID) {
@@ -114,6 +128,7 @@ function deleteEditingLabel() {
       @delete="deleteEditingLabel"
       @cancel="stopEditing(false)"
       @done="stopEditing(true)"
+      :labelsStore="labelsStore"
     />
   </isolated-dialog>
 </template>
diff --git a/src/components/ToolLabelEditor.vue b/src/components/ToolLabelEditor.vue
index 9415e0d0b..c1e72c307 100644
--- a/src/components/ToolLabelEditor.vue
+++ b/src/components/ToolLabelEditor.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import LabelEditor from '@/src/components/LabelEditor.vue';
+import type { LabelsStore } from '../store/tools/useLabels';
+import type { AnnotationTool } from '../types/annotation-tool';
 
 defineEmits([
   'done',
@@ -10,11 +13,27 @@ defineEmits([
   'update:color',
 ]);
 
-defineProps({
-  name: String,
-  strokeWidth: Number,
-  color: String,
-});
+const props = defineProps<{
+  name: string;
+  strokeWidth: number;
+  color: string;
+  labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
+}>();
+
+const existingNames = computed(
+  () =>
+    new Set(
+      Object.values(props.labelsStore.labels).map((label) => label.labelName)
+    )
+);
+
+function isUniqueEditingName(name: string) {
+  return !existingNames.value.has(name);
+}
+
+function uniqueNameRule(name: string) {
+  return isUniqueEditingName(name) || 'Name is not unique';
+}
 </script>
 
 <template>
@@ -37,6 +56,7 @@ defineProps({
         :model-value="name"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
+        :rules="[uniqueNameRule]"
       />
       <v-text-field
         label="Stroke Width"
diff --git a/src/store/tools/useLabels.ts b/src/store/tools/useLabels.ts
index 148fb285b..12c39c3d2 100644
--- a/src/store/tools/useLabels.ts
+++ b/src/store/tools/useLabels.ts
@@ -27,14 +27,19 @@ export const useLabels = <Props>(newLabelDefault: Props) => {
     activeLabel.value = id;
   };
 
+  let nextToolColorIndex = 0;
+
   const addLabel = (label: ToolLabel = {}) => {
     const id = useIdStore().nextId();
     labels.value[id] = {
       ...labelDefault,
       ...newLabelDefault,
+      color: TOOL_COLORS[nextToolColorIndex],
       ...label,
     };
 
+    nextToolColorIndex = (nextToolColorIndex + 1) % TOOL_COLORS.length;
+
     setActiveLabel(id);
     return id;
   };