diff --git a/src/components/LabelControls.vue b/src/components/LabelControls.vue
index 7c656155..c5e671ee 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"
/>
diff --git a/src/components/ToolLabelEditor.vue b/src/components/ToolLabelEditor.vue
index 9415e0d0..c1e72c30 100644
--- a/src/components/ToolLabelEditor.vue
+++ b/src/components/ToolLabelEditor.vue
@@ -1,5 +1,8 @@
@@ -37,6 +56,7 @@ defineProps({
:model-value="name"
@update:model-value="$emit('update:name', $event)"
@keydown.stop.enter="done"
+ :rules="[uniqueNameRule]"
/>
(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;
};
@@ -74,7 +79,7 @@ export const useLabels = (newLabelDefault: Props) => {
};
/*
- * If new label have the same name as existing label, overwrite existing label.
+ * If input label has the same name as existing label, update existing label with input label properties.
*
* param label: label to merge
* param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared
@@ -93,7 +98,7 @@ export const useLabels = (newLabelDefault: Props) => {
};
/*
- * If new label have the same name as existing label, overwrite existing label.
+ * If new label have the same name as existing label, update label with input label properties.
*
* param newLabels: each key is the label name
* param clearDefault: if true, clear initial labels, do nothing if initial labels already cleared