Replace image with canvas

Author: jpggvilaca

application/ui/src/features/annotator/annotations/annotation.component.tsx

@@ -4,18 +4,24 @@
 import type { Annotation as AnnotationType } from '../types';
 import { AnnotationContext } from './annotation-context';
 import { AnnotationShapeWithLabels } from './annotation-shape-with-labels.component';
+import { AnnotationShape } from './annotation-shape.component';
 import { EditableAnnotation } from './editable-annotation.component';
 import { SelectableAnnotation } from './selectable-annotation.component';
 
 interface AnnotationProps {
     annotation: AnnotationType;
+    withLabels?: boolean;
 }
-export const Annotation = ({ annotation }: AnnotationProps) => {
+export const Annotation = ({ annotation, withLabels }: AnnotationProps) => {
     return (
         <AnnotationContext.Provider value={annotation}>
             <SelectableAnnotation>
                 <EditableAnnotation>
-                    <AnnotationShapeWithLabels annotation={annotation} />
+                    {withLabels ? (
+                        <AnnotationShapeWithLabels annotation={annotation} />
+                    ) : (
+                        <AnnotationShape annotation={annotation} />
+                    )}
                 </EditableAnnotation>
             </SelectableAnnotation>
         </AnnotationContext.Provider>

application/ui/src/features/annotator/annotations/annotations.component.tsx

@@ -1,9 +1,10 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
-import { MouseEvent } from 'react';
+import { CSSProperties, MouseEvent } from 'react';
 
 import { isEmpty } from 'lodash-es';
+import { useAnnotationVisibility } from 'src/shared/annotator/annotation-visibility-provider.component';
 
 import { useSelectedAnnotations } from '../../../shared/annotator/select-annotation-provider.component';
 import type { Annotation as AnnotationType } from '../types';
@@ -20,6 +21,7 @@ type AnnotationsProps = {
 
 export const Annotations = ({ annotations, width, height, isFocussed }: AnnotationsProps) => {
     const { setSelectedAnnotations } = useSelectedAnnotations();
+    const { isVisible } = useAnnotationVisibility();
 
     // If the user clicks on an empty spot on the canvas, we want to deselect
     // all annotations
@@ -36,19 +38,25 @@ export const Annotations = ({ annotations, width, height, isFocussed }: Annotati
             height={height}
             tabIndex={-1}
             onClick={handleBackgroundClick}
-            style={{
-                position: 'absolute',
-                inset: 0,
-                outline: 'none',
-                overflow: 'visible',
-                ...DEFAULT_ANNOTATION_STYLES,
-            }}
+            style={
+                {
+                    '--annotation-stroke': '1px solid var(--energy-blue)',
+                    '--annotation-fill': 'rgba(0, 199, 253, 0.2)',
+                    position: 'absolute',
+                    inset: 0,
+                    outline: 'none',
+                    overflow: 'visible',
+                    ...DEFAULT_ANNOTATION_STYLES,
+                } as CSSProperties
+            }
         >
-            {!isEmpty(annotations) && (
+            {!isEmpty(annotations) && isVisible && (
                 <MaskAnnotations annotations={annotations} width={width} height={height} isEnabled={isFocussed}>
-                    {annotations.map((annotation) => (
-                        <Annotation annotation={annotation} key={annotation.id} />
-                    ))}
+                    <g aria-label={'annotation list'}>
+                        {annotations.map((annotation) => (
+                            <Annotation annotation={annotation} key={annotation.id} />
+                        ))}
+                    </g>
                 </MaskAnnotations>
             )}
         </svg>

application/ui/src/features/annotator/annotator-canvas.module.scss

@@ -0,0 +1,4 @@
+.image {
+    filter: brightness(var(--image-brightness)) saturate(var(--image-saturation)) contrast(var(--image-contrast));
+    image-rendering: var(--pixel-view);
+}

application/ui/src/features/annotator/annotator-canvas.tsx

@@ -1,10 +1,11 @@
 // Copyright (C) 2025 Intel Corporation
 // SPDX-License-Identifier: Apache-2.0
 
+import { useCallback } from 'react';
+
 import { View } from '@geti/ui';
-import { useProjectIdentifier } from 'hooks/use-project-identifier.hook';
-import { API_BASE_URL } from 'src/api/client';
 import type { DatasetItem } from 'src/constants/shared-types';
+import { useAnnotator } from 'src/shared/annotator/annotator-provider.component';
 
 import { ZoomTransform } from '../../components/zoom/zoom-transform';
 import { useAnnotationActions } from '../../shared/annotator/annotation-actions-provider.component';
@@ -13,19 +14,32 @@ import { useSelectedAnnotations } from '../../shared/annotator/select-annotation
 import { Annotations } from './annotations/annotations.component';
 import { ToolManager } from './tools/tool-manager.component';
 
-const getImageUrl = (projectId: string, itemId: string) => {
-    return `${API_BASE_URL}/api/projects/${projectId}/dataset/items/${itemId}/binary`;
-};
+import styles from './annotator-canvas.module.scss';
 
 type AnnotatorCanvasProps = {
     mediaItem: DatasetItem;
 };
 
 export const AnnotatorCanvas = ({ mediaItem }: AnnotatorCanvasProps) => {
-    const project_id = useProjectIdentifier();
     const { annotations } = useAnnotationActions();
     const { selectedAnnotations } = useSelectedAnnotations();
     const { isFocussed } = useAnnotationVisibility();
+    const { image } = useAnnotator();
+
+    const drawImageOnCanvas = useCallback(
+        (canvasRef: HTMLCanvasElement | null) => {
+            if (!canvasRef) return;
+
+            canvasRef.width = image.width;
+            canvasRef.height = image.height;
+
+            const ctx = canvasRef.getContext('2d');
+            if (ctx) {
+                ctx.putImageData(image, 0, 0);
+            }
+        },
+        [image]
+    );
 
     // Order annotations by selection. Selected annotation should always be on top.
     const orderedAnnotations = [
@@ -38,7 +52,7 @@ export const AnnotatorCanvas = ({ mediaItem }: AnnotatorCanvasProps) => {
     return (
         <ZoomTransform target={size}>
             <View position={'relative'} width={'100%'} height={'100%'}>
-                <img src={getImageUrl(project_id, String(mediaItem.id))} alt='Collected data' />
+                <canvas aria-label='Captured frame' ref={drawImageOnCanvas} className={styles.image} />
 
                 <Annotations
                     annotations={orderedAnnotations}