fix: DEV-2577: keep keypoints the same size (#690)

* fix: DEV-2577: keep keypoints the same size

They shouldn't grow when user zoom in

* don't change keypoint size on select

previously selected and highlighted keypoint had strokeWidth=2

* fix selected keypoint size via hook option

Author: hlomzik

src/hooks/useRegionColor.ts

@@ -22,13 +22,15 @@ type StyleOptions = (typeof defaultStyles) & {
   suggestion?: boolean,
   includeFill?: boolean,
   useStrokeAsFill?: boolean,
+  sameStrokeWidthForSelected?: boolean,
 }
 
 export const getRegionStyles = ({
   region,
   highlighted = false,
   shouldFill = false,
   useStrokeAsFill = false,
+  sameStrokeWidthForSelected = false,
   suggestion = false,
   defaultOpacity = defaultStyle.opacity,
   defaultFillColor = defaultStyle.fillcolor,
@@ -59,7 +61,7 @@ export const getRegionStyles = ({
   const strokeWidth = (() => {
     if (suggestion) {
       return defaultSuggestionWidth;
-    } else if (selected) {
+    } else if (selected && !sameStrokeWidthForSelected) {
       return defaultStrokeWidthHighlighted;
     } else {
       return +(style?.strokewidth ?? defaultStrokeWidth);

src/regions/KeyPointRegion.js

@@ -174,7 +174,8 @@ const HtxKeyPointView = ({ item }) => {
     defaultFillColor: "#000",
     defaultStrokeColor: "#fff",
     defaultOpacity: (item.style ?? item.tag) ? 0.6 : 1,
-    defaultStrokeWidth: 2,
+    // avoid size glitching when user select/unselect region
+    sameStrokeWidthForSelected: true,
   });
 
   const props = {
@@ -193,11 +194,13 @@ const HtxKeyPointView = ({ item }) => {
       <Circle
         x={x}
         y={y}
-        radius={Math.max(item.width, 2)}
+        // keypoint should always be the same visual size
+        radius={Math.max(item.width, 2) / item.parent.zoomScale}
         // fixes performance, but opactity+borders might look not so good
         perfectDrawEnabled={false}
-        scaleX={1 / item.parent.zoomScale}
-        scaleY={1 / item.parent.zoomScale}
+        // for some reason this scaling doesn't work, so moved this to radius
+        // scaleX={1 / item.parent.zoomScale}
+        // scaleY={1 / item.parent.zoomScale}
         name={`${item.id} _transformable`}
         onDragStart={e => {
           if (item.parent.getSkipInteractions()) {