♻️ Refactor label color assign

src/components/image-labelling/image-labelling-object-detection/bounding-box-canvas.service.ts

@@ -457,13 +457,6 @@ export class BoundingBoxCanvasService {
                 }
             }
             if (this.currentClickedBox.box === -1 && this.currentSelectedBndBox === -1) {
-                boundingBoxes = boundingBoxes.map((box) => ({
-                    ...box,
-                    color: labelColorList.get(box.label) as string,
-                }));
-                for (const boundingBox of boundingBoxes) {
-                    this.drawEachBoxOn(labelList, boundingBox, context, false);
-                }
                 const { x1, x2, y1, y2 } = this.currentDrawing;
                 this.tmpbox = this.generateNewBox(x1, x2, y1, y2);
                 this.tmpbox && this.drawEachBoxOn(labelList, this.tmpbox, context, true);

src/components/image-labelling/image-labelling-object-detection/image-labelling-object-detection.component.ts

@@ -78,10 +78,13 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
     @Input() _selectMetadata!: BboxMetadata;
     @Input() _imgSrc: string = '';
     @Input() _tabStatus: TabsProps<CompleteMetadata>[] = [];
+    @Input() _refreshAllLabelColor!: boolean;
+    @Input() _projectName!: string;
     @Output() _onChangeMetadata: EventEmitter<BboxMetadata> = new EventEmitter();
     @Output() _onChangeAnnotationLabel: EventEmitter<ChangeAnnotationLabel> = new EventEmitter();
     @Output() _onEnterLabel: EventEmitter<Omit<SelectedLabelProps, 'selectedLabel'>> = new EventEmitter();
     @Output() _clickAbilityToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() _onRefresh: EventEmitter<void> = new EventEmitter();
 
     constructor(
         private _ref: ChangeDetectorRef,
@@ -181,6 +184,12 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
                 }
             }
         }
+
+        if (changes._refreshAllLabelColor) {
+            if (this._refreshAllLabelColor) {
+                setTimeout(() => this.updateColor());
+            }
+        }
     }
 
     initializeCanvas(width: string = '80%') {
@@ -433,6 +442,11 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
         try {
             if (this.boundingBoxState.draw && this.mousedown) {
                 this.finishDrawBoundingBox(event);
+                this._selectMetadata.bnd_box = this._selectMetadata.bnd_box.map((box) => ({
+                    ...box,
+                    color: this.labelColorList.get(box.label) as string,
+                }));
+                this.emitMetadata();
             }
             if (this._boundingBoxCanvas.mouseClickWithinPointPath(this._selectMetadata, event)) {
                 if (this.boundingBoxState.drag && this.mousedown) {
@@ -614,6 +628,11 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
             this.crossV.nativeElement.style.visibility = 'hidden';
             if (this.boundingBoxState.draw && this.mousedown) {
                 this.finishDrawBoundingBox(event);
+                this._selectMetadata.bnd_box = this._selectMetadata.bnd_box.map((box) => ({
+                    ...box,
+                    color: this.labelColorList.get(box.label) as string,
+                }));
+                this.emitMetadata();
             }
             if (
                 ((event.target as Element).className === 'canvasstyle' ||
@@ -695,7 +714,7 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
             }
             this.sortingLabelList(this.labelList, annotationList);
         }
-        this.labelColorList = this._labelColorService.getLabelColorList();
+        this.labelColorList = this._labelColorService.getLabelColorList(this._projectName);
         this._boundingBoxCanvas.drawAllBoxOn(
             this.labelList,
             this._selectMetadata.bnd_box,
@@ -807,6 +826,16 @@ export class ImageLabellingObjectDetectionComponent implements OnInit, OnChanges
         this._clickAbilityToggle.emit(false);
     }
 
+    updateColor() {
+        this._selectMetadata.bnd_box = this._selectMetadata.bnd_box.map((box) => ({
+            ...box,
+            color: this.labelColorList.get(box.label) as string,
+        }));
+        this.redrawImage(this._selectMetadata);
+        this.emitMetadata();
+        this._onRefresh.emit();
+    }
+
     ngOnDestroy(): void {
         this._annotateSelectState.setState();
         this.unsubscribe$.next();

src/components/image-labelling/image-labelling-project/image-labelling-project.component.ts

@@ -53,6 +53,7 @@ export class ImageLabellingProjectComponent implements OnInit, OnChanges, OnDest
     @Input() _thumbnailList: CompleteMetadata[] = [];
     @Input() _tabStatus: TabsProps<CompleteMetadata>[] = [];
     @Input() _changeClickAbilityToggleStatus!: boolean;
+    @Input() _projectName!: string;
     @Output() _onClose: EventEmitter<TabsProps> = new EventEmitter();
     @Output() _onClickThumbnail: EventEmitter<EventEmitter_ThumbnailDetails> = new EventEmitter();
     @Output() _onClickLabel: EventEmitter<SelectedLabelProps> = new EventEmitter();
@@ -63,6 +64,7 @@ export class ImageLabellingProjectComponent implements OnInit, OnChanges, OnDest
     @Output() _onRenameImage: EventEmitter<CompleteMetadata> = new EventEmitter();
     @Output() _onDeleteImage: EventEmitter<CompleteMetadata> = new EventEmitter();
     @Output() _clickAbilityToggleStatus: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() _refreshLabelColor: EventEmitter<void> = new EventEmitter();
     action: number = -1;
     displayInputLabel: boolean = false;
     inputLabel: string = '';
@@ -106,12 +108,11 @@ export class ImageLabellingProjectComponent implements OnInit, OnChanges, OnDest
                     })[0];
                     this.selectedLabel = resultLabel?.label ?? '';
                 });
-
-        this.pickRandomColorForLabel();
     }
 
     updateLabelList = () => {
         this.labelList = this._tabStatus[1].label_list ? this._tabStatus[1].label_list : [];
+        this.pickRandomColorForLabel();
     };
 
     onClose = (tab: TabsProps): void => {
@@ -191,8 +192,7 @@ export class ImageLabellingProjectComponent implements OnInit, OnChanges, OnDest
                 action: 0,
             });
         }
-
-        this._labelColorService.resetLabelColorList();
+        this._refreshLabelColor.emit();
     };
 
     onClickLabel = (label: string) => {
@@ -294,7 +294,7 @@ export class ImageLabellingProjectComponent implements OnInit, OnChanges, OnDest
     }
 
     pickRandomColorForLabel(): void {
-        this._labelColorService.setLabelColors(this.labelList);
+        this._labelColorService.setLabelColors(this.labelList, this._projectName);
     }
 
     ngOnDestroy(): void {

src/components/image-labelling/image-labelling-segmentation/image-labelling-segmentation.component.ts

@@ -83,9 +83,12 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
     @Input() _selectMetadata!: PolyMetadata;
     @Input() _imgSrc: string = '';
     @Input() _tabStatus: TabsProps<CompleteMetadata>[] = [];
+    @Input() _projectName!: string;
+    @Input() _refreshAllLabelColor!: boolean;
     @Output() _onChangeMetadata: EventEmitter<PolyMetadata> = new EventEmitter();
     @Output() _onChangeAnnotationLabel: EventEmitter<ChangeAnnotationLabel> = new EventEmitter();
     @Output() _clickAbilityToggle: EventEmitter<boolean> = new EventEmitter<boolean>();
+    @Output() _onCompleteRefresh: EventEmitter<boolean> = new EventEmitter();
     @Output() _onEnterLabel: EventEmitter<Omit<SelectedLabelProps, 'selectedLabel'>> = new EventEmitter();
     @ViewChild('crossH') crossH!: ElementRef<HTMLDivElement>;
     @ViewChild('crossV') crossV!: ElementRef<HTMLDivElement>;
@@ -182,6 +185,12 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
                 }
             }
         }
+
+        if (changes._refreshAllLabelColor) {
+            if (this._refreshAllLabelColor) {
+                setTimeout(() => this.updateLabelColor());
+            }
+        }
     }
 
     initializeCanvas() {
@@ -263,7 +272,7 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
             const annotationList = this._tabStatus[2].annotation ? this._tabStatus[2].annotation[0].polygons ?? [] : [];
             this.sortingLabelList(this.labelList, annotationList);
         }
-        this.labelColorList = this._labelColorListService.getLabelColorList();
+        this.labelColorList = this._labelColorListService.getLabelColorList(this._projectName);
         this._segCanvasService.drawAllPolygon(
             this._selectMetadata,
             this.canvasContext,
@@ -905,6 +914,21 @@ export class ImageLabellingSegmentationComponent implements OnInit, OnChanges, O
         this._clickAbilityToggle.emit(false);
     }
 
+    updateLabelColor() {
+        const labelsId: number[] = [];
+        for (const [_, { id }] of this._selectMetadata.polygons.entries()) {
+            labelsId.push(id);
+        }
+        this._selectMetadata.polygons = this._selectMetadata.polygons.map((poly) => ({
+            ...poly,
+            color: this.labelColorList.get(poly.label) as string,
+            region: String(labelsId.indexOf(poly.id) + 1),
+        }));
+        this.redrawImage(this._selectMetadata);
+        this.emitMetadata();
+        this._onCompleteRefresh.emit();
+    }
+
     ngOnDestroy(): void {
         this._annotateSelectState.setState();
         this.unsubscribe$.next();

src/components/image-labelling/image-labelling-segmentation/segmentation-canvas.service.ts

@@ -329,7 +329,9 @@ export class SegmentationCanvasService {
             this.labelColorList = labelColorList;
             if (this.validatePolygonMetadata(metadata.polygons)) {
                 if (this.selectedPolygonIndex === -1) {
-                    this.assignLabelColorAndDrawPolygon(metadata, context, polyIndex);
+                    this.drawAllPolygonLine(metadata, context);
+                    this.drawAllPolygonsDots(metadata, context, polyIndex, this.radius);
+                    this.plotAllFloatLabel(metadata, context);
                 }
 
                 if (this.selectedPolygonIndex !== -1) {

src/layouts/image-labelling-layout/image-labelling-layout.component.html

@@ -23,21 +23,27 @@
                 [_selectMetadata]="selectedMetaData"
                 [_imgSrc]="imgSrc"
                 [_tabStatus]="tabStatus"
+                [_projectName]="selectedProjectName"
+                [_refreshAllLabelColor]="refreshAllLabelColor"
                 (_onChangeMetadata)="onChangeMetadata($event)"
                 (_onChangeAnnotationLabel)="onChangeAnnotationLabel($event)"
                 (_onEnterLabel)="onProcessLabel($event)"
                 (_clickAbilityToggle)="changeClickAbilityToggleStatus($event)"
+                (_onRefresh)="completeRefreshLabelColor(); refreshAllBndBoxLabelColor()"
             ></image-labelling-object-detection>
         </ng-container>
         <ng-container *ngIf="_router.url.includes('imglabel/seg')">
             <image-labelling-segmentation
                 [_selectMetadata]="selectedMetaData"
                 [_imgSrc]="imgSrc"
                 [_tabStatus]="tabStatus"
+                [_projectName]="selectedProjectName"
+                [_refreshAllLabelColor]="refreshAllLabelColor"
                 (_onChangeMetadata)="onChangeMetadata($event)"
                 (_onChangeAnnotationLabel)="onChangeAnnotationLabel($event)"
-                (_clickAbilityToggle)="changeClickAbilityToggleStatus($event)"
                 (_onEnterLabel)="onProcessLabel($event)"
+                (_clickAbilityToggle)="changeClickAbilityToggleStatus($event)"
+                (_onCompleteRefresh)="completeRefreshLabelColor(); refreshAllPolygonsLabelColorAndRegion()"
             ></image-labelling-segmentation>
         </ng-container>
 
@@ -48,6 +54,7 @@
             [_thumbnailList]="thumbnailList"
             [_tabStatus]="tabStatus"
             [_changeClickAbilityToggleStatus]="clickAbilityToggle"
+            [_projectName]="selectedProjectName"
             (_onClose)="onToggleTab($event)"
             (_onClickThumbnail)="displayImage($event)"
             (_onClickLabel)="onProcessLabel($event)"
@@ -58,6 +65,7 @@
             (_onRenameImage)="onRenameImage($event)"
             (_onDeleteImage)="onDeleteImage($event)"
             (_clickAbilityToggleStatus)="changeClickAbilityToggleStatus($event)"
+            (_refreshLabelColor)="refreshLabelColor()"
         ></image-labelling-project>
         <image-labelling-right-sidebar
             [_onChange]="onChangeSchema"

src/layouts/image-labelling-layout/image-labelling-layout.component.ts

@@ -42,6 +42,7 @@ import {
     SelectedLabelProps,
     ChangeAnnotationLabel,
 } from 'shared/types/image-labelling/image-labelling.model';
+import { LabelColorServices } from '../../shared/services/label-color.services';
 
 @Component({
     selector: 'image-labelling-layout',
@@ -119,6 +120,7 @@ export class ImageLabellingLayoutComponent implements OnInit, OnDestroy {
     totalImage!: number;
     progress: string = '';
     clickAbilityToggle!: boolean;
+    refreshAllLabelColor: boolean = false;
     readonly modalExportOptions = 'modal-export-options';
     readonly modalExportProject = 'modal-export-project';
     readonly modalShortcutKeyInfo = 'modal-shortcut-key-info';
@@ -254,6 +256,7 @@ export class ImageLabellingLayoutComponent implements OnInit, OnDestroy {
         public _languageService: LanguageService,
         private _spinnerService: SpinnerService,
         private _exportSaveFormatService: ExportSaveFormatService,
+        private _labelColorService: LabelColorServices,
     ) {
         const langsArr: string[] = ['image-labelling-en', 'image-labelling-cn', 'image-labelling-ms'];
         this._languageService.initializeLanguage(`image-labelling`, langsArr);
@@ -777,6 +780,13 @@ export class ImageLabellingLayoutComponent implements OnInit, OnDestroy {
                 () => (this.showLoading = false),
             );
         }
+        // if (this.selectedMetaData?.polygons !== undefined) {
+        //     const labelColorList = this._labelColorService.getLabelColorList(this.selectedProjectName);
+        //     this.selectedMetaData.polygons = this.selectedMetaData.polygons.map((poly) => ({
+        //         ...poly,
+        //         color: labelColorList.get(poly.label) as string
+        //     }));
+        // }
     };
 
     onProcessLabel = ({ selectedLabel, label_list, action }: SelectedLabelProps) => {
@@ -801,11 +811,21 @@ export class ImageLabellingLayoutComponent implements OnInit, OnDestroy {
 
     onChangeAnnotationLabel = (changeAnnoLabel: ChangeAnnotationLabel): void => {
         changeAnnoLabel.index = this.currentAnnotationIndex;
+        const labelColorList = this._labelColorService.getLabelColorList(this.selectedProjectName);
         if (this.selectedMetaData) {
             if (this.selectedMetaData.polygons) {
                 this.selectedMetaData.polygons[changeAnnoLabel.index].label = changeAnnoLabel.label;
+                this.selectedMetaData.polygons[changeAnnoLabel.index].color = labelColorList.get(
+                    changeAnnoLabel.label,
+                ) as string;
                 this.currentAnnotationLabel = changeAnnoLabel.label;
             }
+
+            if (this.selectedMetaData.bnd_box) {
+                this.selectedMetaData.bnd_box[changeAnnoLabel.index].color = labelColorList.get(
+                    changeAnnoLabel.label,
+                ) as string;
+            }
         }
         this.tabStatus = this._imgLblLayoutService.changeAnnotationLabel(this.tabStatus, changeAnnoLabel);
         this.updateStateToRenderChild();
@@ -1221,6 +1241,55 @@ export class ImageLabellingLayoutComponent implements OnInit, OnDestroy {
         this.clickAbilityToggle = status;
     }
 
+    refreshLabelColor() {
+        this.refreshAllLabelColor = true;
+    }
+
+    completeRefreshLabelColor() {
+        this.refreshAllLabelColor = false;
+    }
+
+    refreshAllPolygonsLabelColorAndRegion() {
+        const idMap = new Map<number, number[]>();
+        const labelColorList = this._labelColorService.getLabelColorList(this.selectedProjectName);
+
+        for (const [i, { polygons }] of this.thumbnailList.entries()) {
+            if (polygons !== undefined) {
+                let idList: number[] = [];
+                for (const [_, { id }] of polygons.entries()) {
+                    idList.push(id);
+                }
+                idMap.set(i, idList);
+                idList = [];
+            }
+        }
+        for (const [j, { polygons }] of this.thumbnailList.entries()) {
+            if (polygons !== undefined) {
+                const idList = idMap.get(j);
+                if (idList !== undefined) {
+                    this.thumbnailList[j].polygons = polygons.map((poly) => ({
+                        ...poly,
+                        color: labelColorList.get(poly.label) as string,
+                        region: String(idList.indexOf(poly.id) + 1),
+                    }));
+                }
+            }
+        }
+    }
+
+    refreshAllBndBoxLabelColor() {
+        const labelColorList = this._labelColorService.getLabelColorList(this.selectedProjectName);
+
+        for (const [i, { bnd_box }] of this.thumbnailList.entries()) {
+            if (bnd_box !== undefined) {
+                this.thumbnailList[i].bnd_box = bnd_box.map((box) => ({
+                    ...box,
+                    color: labelColorList.get(box.label) as string,
+                }));
+            }
+        }
+    }
+
     shortcutKeyInfo() {
         return [
             {