fix: DEV-1200: Reanimate tag style parameters (#365)

* [fix] Fix getting style-affecting parameters from control tag

* [fix] Allow to use opacity parameter instead of fillOpacity

Co-authored-by: Nick Skriabin <[email protected]>
Co-authored-by: niklub <[email protected]>
Co-authored-by: Max Tkachenko <[email protected]>

Author: 4 people

src/core/Constants.js

@@ -1,9 +1,8 @@
 export const defaultStyle = {
   fillcolor: "#666",
-  fillopacity: 0.2,
+  opacity: 0.2,
   strokecolor: "#666",
   strokewidth: 1,
-  opacity: 0.6,
 };
 
 export default {

src/hooks/useRegionColor.js

@@ -3,9 +3,10 @@ import { observe } from "mobx";
 import { useContext, useEffect, useMemo, useState } from "react";
 import { ImageViewContext } from "../components/ImageView/ImageViewContext";
 import Constants, { defaultStyle } from "../core/Constants";
+import { isDefined } from "../utils/utilities";
 
 const defaultStyles = {
-  defaultFillOpacity: defaultStyle.fillopacity,
+  defaultOpacity: defaultStyle.opacity,
   defaultFillColor: defaultStyle.fillcolor,
   defaultStrokeColor: defaultStyle.strokecolor,
   defaultStrokeColorHighlighted: Constants.HIGHLIGHTED_STROKE_COLOR,
@@ -17,7 +18,7 @@ const defaultStyles = {
 export const useRegionStyles = (region, {
   includeFill = false,
   useStrokeAsFill = false,
-  defaultFillOpacity = defaultStyle.fillopacity,
+  defaultOpacity = defaultStyle.opacity,
   defaultFillColor = defaultStyle.fillcolor,
   defaultStrokeColor = defaultStyle.strokecolor,
   defaultStrokeColorHighlighted = Constants.HIGHLIGHTED_STROKE_COLOR,
@@ -35,13 +36,17 @@ export const useRegionStyles = (region, {
   }, [region.inSelection, highlighted]);
 
   const fillColor = useMemo(() => {
+    // @todo fillopacity should be deprecated and will be removed in future
+    const fillopacity = style?.fillopacity;
+    const opacity = isDefined(fillopacity) ? fillopacity : style?.opacity;
+
     return shouldFill ? (
       chroma((useStrokeAsFill ? style?.strokecolor : style?.fillcolor) ?? defaultFillColor)
         .darken(0.3)
-        .alpha(+(style?.fillopacity ?? defaultFillOpacity ?? 0.5))
+        .alpha(+(opacity ?? defaultOpacity ?? 0.5))
         .css()
     ) : null;
-  }, [shouldFill, style, defaultFillColor, defaultFillOpacity]);
+  }, [shouldFill, style, defaultFillColor, defaultOpacity]);
 
   const strokeColor = useMemo(() => {
     if (selected) {

src/mixins/AreaMixin.js

@@ -90,7 +90,13 @@ export const AreaMixin = types
       }
       const emptyStyled = self.results.find(r => r.emptyStyle);
 
-      return emptyStyled && emptyStyled.emptyStyle;
+      if (emptyStyled && emptyStyled.emptyStyle) {
+        return emptyStyled.emptyStyle;
+      }
+
+      const controlStyled = self.results.find(r => self.type.startsWith(r.type));
+
+      return controlStyled && controlStyled.controlStyle;
     },
 
     // @todo may be slow, consider to add some code to annotation (un)select* methods

src/regions/KeyPointRegion.js

@@ -167,7 +167,7 @@ const HtxKeyPointView = ({ item }) => {
     includeFill: true,
     defaultFillColor: "#000",
     defaultStrokeColor: "#fff",
-    defaultFillOpacity: (item.style ?? item.tag) ? 0.6 : 1,
+    defaultOpacity: (item.style ?? item.tag) ? 0.6 : 1,
     defaultStrokeWidth: 2,
   });
 

src/regions/Result.js

@@ -198,6 +198,14 @@ const Result = types
 
       return { strokecolor, strokewidth, fillcolor, fillopacity, opacity };
     },
+
+    get controlStyle() {
+      if (!self.from_name) return null;
+
+      const { fillcolor, strokecolor, strokewidth, fillopacity, opacity } = self.from_name;
+
+      return { strokecolor, strokewidth, fillcolor, fillopacity, opacity };
+    },
   }))
   .volatile(() => ({
     pid: "",

src/tags/control/Ellipse.js

@@ -34,12 +34,12 @@ const TagAttrs = types.model({
   name: types.identifier,
   toname: types.maybeNull(types.string),
 
-  opacity: types.optional(customTypes.range(), "1"),
+  opacity: types.optional(customTypes.range(), "0.2"),
   fillcolor: types.optional(customTypes.color, "#f48a42"),
 
   strokewidth: types.optional(types.string, "1"),
   strokecolor: types.optional(customTypes.color, "#f48a42"),
-  fillopacity: types.optional(customTypes.range(), "0.2"),
+  fillopacity: types.maybeNull(customTypes.range()),
 
   canrotate: types.optional(types.boolean, true),
 });

src/tags/control/Labels/Labels.js

@@ -53,12 +53,12 @@ const TagAttrs = types.model({
   // TODO this will move away from here
   groupdepth: types.maybeNull(types.string),
 
-  opacity: types.optional(customTypes.range(), "1"),
+  opacity: types.optional(customTypes.range(), "0.2"),
   fillcolor: types.optional(customTypes.color, "#f48a42"),
 
   strokewidth: types.optional(types.string, "1"),
   strokecolor: types.optional(customTypes.color, "#f48a42"),
-  fillopacity: types.optional(customTypes.range(), "0.2"),
+  fillopacity: types.maybeNull(customTypes.range()),
   allowempty: types.optional(types.boolean, false),
 });
 

src/tags/control/Rectangle.js

@@ -34,12 +34,12 @@ const TagAttrs = types.model({
   name: types.identifier,
   toname: types.maybeNull(types.string),
 
-  opacity: types.optional(customTypes.range(), "1"),
+  opacity: types.optional(customTypes.range(), "0.2"),
   fillcolor: types.optional(customTypes.color, "#f48a42"),
 
   strokewidth: types.optional(types.string, "1"),
   strokecolor: types.optional(customTypes.color, "#f48a42"),
-  fillopacity: types.optional(customTypes.range(), "0.2"),
+  fillopacity: types.maybeNull(customTypes.range()),
 
   canrotate: types.optional(types.boolean, true),
 });