feat: BROS-87: Bitmask

docs/source/includes/tags/bitmask.md

@@ -0,0 +1,12 @@
+### Parameters
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | <code>string</code> |  | Name of the element |
+| toName | <code>string</code> |  | Name of the image to label |
+| [choice] | <code>single</code> \| <code>multiple</code> | <code>single</code> | Configure whether the data labeler can select one or multiple labels |
+| [maxUsages] | <code>number</code> |  | Maximum number of times a label can be used per task |
+| [showInline] | <code>boolean</code> | <code>true</code> | Show labels in the same visual line |
+| [smart] | <code>boolean</code> |  | Show smart tool for interactive pre-annotations |
+| [smartOnly] | <code>boolean</code> |  | Only show smart tool for interactive pre-annotations |
+

docs/source/includes/tags/bitmasklabels.md

@@ -0,0 +1,10 @@
+### Parameters
+
+| Param | Type | Default | Description |
+| --- | --- | --- | --- |
+| name | <code>string</code> |  | Name of the element |
+| toName | <code>string</code> |  | Name of the image to label |
+| [choice] | <code>single</code> \| <code>multiple</code> | <code>single</code> | Configure whether the data labeler can select one or multiple labels |
+| [maxUsages] | <code>number</code> |  | Maximum number of times a label can be used per task |
+| [showInline] | <code>boolean</code> | <code>true</code> | Show labels in the same visual line |
+

web/libs/core/src/lib/utils/feature-flags/ff.ts

@@ -1,4 +1,4 @@
-import { FF_SAMPLE_DATASETS } from "./flags";
+import { FF_BITMASK, FF_SAMPLE_DATASETS } from "./flags";
 
 const FEATURE_FLAGS = window.APP_SETTINGS?.feature_flags || {};
 
@@ -12,14 +12,16 @@ const FLAGS_OVERRIDE: Record<string, boolean> = {
   // Add your flags overrides as following:
   // [FF_FLAG_NAME]: boolean
   [FF_SAMPLE_DATASETS]: true,
+  [FF_BITMASK]: true,
 };
 
 /**
  * Checks if the Feature Flag is active or not.
  */
 export const isActive = (id: string) => {
   const defaultValue = window.APP_SETTINGS?.feature_flags_default_value === true;
-  const isSentryOSS = window?.APP_SETTINGS?.sentry_environment === "opensource";
+  const isSentryOSS =
+    window?.APP_SETTINGS?.sentry_environment === "opensource" || process.env.NODE_ENV === "development";
 
   if (isSentryOSS && id in FLAGS_OVERRIDE) return FLAGS_OVERRIDE[id];
   if (id in FEATURE_FLAGS) return FEATURE_FLAGS[id] ?? defaultValue;

web/libs/core/src/lib/utils/feature-flags/flags.ts

@@ -97,3 +97,10 @@ export const FF_MULTICHANNEL_TS = "fflag_feat_front_bros58_timeseries_multichann
  * Enables enterprise email notifications
  */
 export const FF_ENTERPRISE_EMAIL_NOTIFICATIONS = "fflag_feat_front_fit_183_email_notifications_short";
+
+/**
+ * Bitmask is a new image segmentation tool for masking that allows pixel-perfect editing
+ *
+ * @link https://app.launchdarkly.com/projects/default/flags/fflag_front_feat_bros_87_pixel_wise_16062025_short
+ */
+export const FF_BITMASK = "fflag_front_feat_bros_87_pixel_wise_16062025_short";

web/libs/editor/src/components/ImageView/Image.jsx

@@ -5,6 +5,8 @@ import { FF_LSDV_4711, isFF } from "../../utils/feature-flags";
 import messages from "../../utils/messages";
 import { ErrorMessage } from "../ErrorMessage/ErrorMessage";
 import "./Image.scss";
+import { ff } from "@humansignal/core";
+import { FF_BITMASK } from "@humansignal/core/lib/utils/feature-flags";
 
 /**
  * Coordinates in relative mode belong to a data domain consisting of percentages in the range from 0 to 100
@@ -84,7 +86,16 @@ if (isFF(FF_LSDV_4711)) imgDefaultProps.crossOrigin = "anonymous";
 const ImageRenderer = observer(
   forwardRef(({ src, onLoad, imageTransform, isLoaded }, ref) => {
     const imageStyles = useMemo(() => {
-      const style = imageTransform ?? {};
+      // We can't just skip rendering the image because we need its dimensions to be set
+      // so we just hide it with 0x0 dimensions.
+      //
+      // Real dimension will still be available via `naturalWidth` and `naturalHeight`
+      const style = ff.isActive(FF_BITMASK)
+        ? {
+            width: 0,
+            height: 0,
+          }
+        : imageTransform;
 
       return { ...style, maxWidth: "unset", visibility: isLoaded ? "visible" : "hidden" };
     }, [imageTransform, isLoaded]);