Miscellaneous tool fixes

src/components/LabelControls.vue

@@ -35,7 +35,7 @@ const mobile = computed(() => display.mobile.value);
 </script>
 
 <template>
-  <v-card>
+  <v-card class="pt-2">
     <v-card-subtitle>Labels</v-card-subtitle>
     <v-container>
       <v-item-group

src/components/ToolStrip.vue

@@ -71,12 +71,7 @@
         :disabled="noCurrentImage"
         @click="toggle"
       >
-        <label-controls
-          :labels="rectangleStore.labels"
-          :set-active-label="rectangleStore.setActiveLabel"
-          :active-label="rectangleStore.activeLabel"
-          class="popup-menu pt-2"
-        />
+        <rectangle-controls />
       </menu-tool-button>
     </groupable-item>
     <groupable-item v-slot:default="{ active, toggle }" :value="Tools.Ruler">
@@ -88,12 +83,7 @@
         :disabled="noCurrentImage"
         @click="toggle"
       >
-        <label-controls
-          :labels="rulerStore.labels"
-          :set-active-label="rulerStore.setActiveLabel"
-          :active-label="rulerStore.activeLabel"
-          class="popup-menu pt-2"
-        />
+        <ruler-controls />
       </menu-tool-button>
     </groupable-item>
 
@@ -124,9 +114,10 @@ import { useToolStore } from '../store/tools';
 import PaintControls from './PaintControls.vue';
 import MenuToolButton from './MenuToolButton.vue';
 import CropControls from './tools/crop/CropControls.vue';
-import LabelControls from './LabelControls.vue';
 import { useRectangleStore } from '../store/tools/rectangles';
 import { useRulerStore } from '../store/tools/rulers';
+import RulerControls from './RulerControls.vue';
+import RectangleControls from './RectangleControls.vue';
 
 export default defineComponent({
   components: {
@@ -136,7 +127,8 @@ export default defineComponent({
     GroupableItem,
     PaintControls,
     CropControls,
-    LabelControls,
+    RulerControls,
+    RectangleControls,
   },
   setup() {
     const dataStore = useDatasetStore();

src/components/tools/ruler/RulerSVG2D.vue

@@ -38,7 +38,7 @@
       :text-anchor="anchor"
       stroke-width="0.75"
       stroke="black"
-      :fill="color"
+      fill="white"
       :font-size="`${textSize}px`"
       font-weight="bold"
     >

src/store/tools/rectangles.ts

@@ -6,13 +6,13 @@ import { RectangleID } from '@/src/types/rectangle';
 
 import { useAnnotationTool } from './useAnnotationTool';
 
-const rectangleDefaults = {
+const rectangleDefaults = () => ({
   firstPoint: [0, 0, 0] as Vector3,
   secondPoint: [0, 0, 0] as Vector3,
   id: '' as RectangleID,
   name: 'Rectangle',
   fillColor: 'transparent',
-};
+});
 
 const newLabelDefault = {
   color: '#ffffff',

src/store/tools/rulers.ts

@@ -8,12 +8,12 @@ import { Manifest, StateFile } from '@/src/io/state-file/schema';
 
 import { useAnnotationTool } from './useAnnotationTool';
 
-const rulerDefaults = {
+const rulerDefaults = () => ({
   firstPoint: [0, 0, 0] as Vector3,
   secondPoint: [0, 0, 0] as Vector3,
   id: '',
   name: 'Ruler',
-};
+});
 
 const newLabelDefault = {
   color: '#ffffff',

src/store/tools/useAnnotationTool.ts

@@ -15,7 +15,7 @@ import { useIdStore } from '@/src/store/id';
 import useViewSliceStore from '../view-configs/slicing';
 import { useLabels, Labels, Label } from './useLabels';
 
-const annotationToolDefaults = {
+const makeAnnotationToolDefaults = () => ({
   frameOfReference: {
     planeOrigin: [0, 0, 0],
     planeNormal: [1, 0, 0],
@@ -25,21 +25,22 @@ const annotationToolDefaults = {
   placing: false,
   color: TOOL_COLORS[0],
   name: 'baseAnnotationTool',
-};
+});
 
 // Must return addTool in consuming Pinia store.
 export const useAnnotationTool = <
-  ToolDefaults,
-  ToolActiveProps extends ToolDefaults & AnnotationTool
+  MakeToolDefaults extends (...args: any) => any,
+  ToolActiveProps extends ReturnType<MakeToolDefaults> & AnnotationTool
 >({
   toolDefaults,
   initialLabels,
   newLabelDefault,
 }: {
-  toolDefaults: ToolDefaults;
+  toolDefaults: MakeToolDefaults;
   initialLabels: Labels<ToolActiveProps>;
   newLabelDefault: Label<ToolActiveProps>;
 }) => {
+  type ToolDefaults = ReturnType<MakeToolDefaults>;
   type Tool = ToolDefaults & AnnotationTool;
   type ToolPatch = Partial<Omit<Tool, 'id'>>;
   type ToolID = Tool['id'];
@@ -75,8 +76,8 @@ export const useAnnotationTool = <
     }
 
     toolByID.value[id] = {
-      ...annotationToolDefaults,
-      ...toolDefaults,
+      ...makeAnnotationToolDefaults(),
+      ...toolDefaults(),
       label: labels.activeLabel.value,
       ...tool,
       // updates label props if changed between sessions

src/utils/color.ts

@@ -11,13 +11,18 @@ export function rgbaToHexa(rgba: number[]) {
 }
 
 /**
+ * Parses a hex color with optional alpha channel.
  *
- * @param hexa a hexa color in the format "#AABBCCDD"
+ * Returns an RGBA array with components scaled to [0,255].
+ *
+ * @param hexa a hexa color in the format "[#]RRGGBB[AA]"
  */
 export function hexaToRGBA(hexa: string) {
-  const rgba = [0, 0, 0, 0];
-  for (let i = 0; i < 4; i++) {
-    rgba[i] = Number.parseInt(hexa.substring(i + 1, i + 3), 16);
+  const values = hexa.startsWith('#') ? hexa.substring(1) : hexa;
+  const rgba = [0, 0, 0, 255];
+  const length = Math.min(4, values.length / 2);
+  for (let i = 0; i < length; i++) {
+    rgba[i] = Number.parseInt(values.substring(2 * i, 2 * i + 2), 16);
   }
   return rgba;
 }