Skip to content

Commit

Permalink
Merge pull request #201 from CertifaiAI/amal_fix
Browse files Browse the repository at this point in the history 
Add guiding cross line, add delete project confirmation, fix undo-redo button & fix grammar
  • Loading branch information
@devenyantis
devenyantis authored Jul 30, 2021
2 parents fdfd4eb + 8c401d7 commit f5d24f5
Show file tree
Hide file tree
Showing 17 changed files with 278 additions and 75 deletions.
2 changes: 2 additions & 0 deletions src/assets/i18n/data-set-page-cn.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
"projectPath": "项目路径"
},
"deleteMsg": "删除 ",
"deleteConfirmation": "确定要删除吗",
"confirm": "确认",
"success": "成功",
"renameMsg": "名称更新 ",
"renameSuccess": "名称更新成功!",
Expand Down
2 changes: 2 additions & 0 deletions src/assets/i18n/data-set-page-en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@
"projectPath": "Project Path"
},
"deleteMsg": "deleted ",
"deleteConfirmation": "Are you sure you want to delete",
"confirm": "Confirm",
"renameMsg": "renamed ",
"success": "successfully",
"deleteProject": "Delete Project",
Expand Down
4 changes: 3 additions & 1 deletion src/assets/i18n/data-set-page-ms.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@
"projectPath": "Lokasi Projek"
},
"deleteMsg": "dipadam ",
"success": "berjaya",
"deleteConfirmation": "Adakah anda pasti untuk memadam imej",
"confirm": "Teruskan",
"success": "dengan jayanya",
"renameMsg": "dinamakan semula",
"renameSuccess": "telah berjaya dinamakan semula!",
"deleteProject": "Padam Projek",
Expand Down
1 change: 1 addition & 0 deletions src/assets/icons/indicator_on.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/components/image-labelling/image-labelling-action.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const initialValue: ActionState = {
isActiveModal: false,
save: false,
keyInfo: false,
crossLine: false
};

@Injectable({
Expand Down
36 changes: 33 additions & 3 deletions src/components/image-labelling/image-labelling-info/image-labelling-info.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,15 @@ import {
SimpleChanges,
ChangeDetectionStrategy,
} from '@angular/core';
import { ImgLabelProps, TabsProps, CompleteMetadata, ThumbnailInfoProps } from 'shared/types/image-labelling/image-labelling.model';
import { Router } from '@angular/router';
import { SharedUndoRedoService } from 'shared/services/shared-undo-redo.service';
import {
ImgLabelProps,
TabsProps,
CompleteMetadata,
ThumbnailInfoProps,
ImageLabelUrl,
} from 'shared/types/image-labelling/image-labelling.model';
import { IconSchema } from 'shared/types/icon/icon.model';

@Component({
Expand All @@ -31,6 +39,8 @@ export class ImageLabellingInfoComponent implements OnInit, OnChanges {
jsonSchema!: IconSchema;
isTabStillOpen: boolean = true;

constructor(private _sharedUndoRedoService: SharedUndoRedoService, private router: Router) {}

ngOnInit(): void {
this.bindImagePath();
}
Expand All @@ -56,13 +66,13 @@ export class ImageLabellingInfoComponent implements OnInit, OnChanges {
imgPath: `assets/icons/undo.svg`,
hoverLabel: `labellingInfo.undo`,
alt: `Undo`,
onClick: () => null,
onClick: () => this.undoRedo('UNDO'),
},
{
imgPath: `assets/icons/redo.svg`,
hoverLabel: `labellingInfo.redo`,
alt: `Redo`,
onClick: () => null,
onClick: () => this.undoRedo('REDO'),
},
// {
// imgPath: `assets/icons/zoom_in.svg`,
Expand All @@ -80,6 +90,26 @@ export class ImageLabellingInfoComponent implements OnInit, OnChanges {
};
};

undoRedo(action: string) {
const imageLblType = this.router.url as ImageLabelUrl;
if (action === 'UNDO') {
if (imageLblType === '/imglabel/bndbox') {
this._sharedUndoRedoService.action.next('BBOX_UNDO');
}
if (imageLblType === '/imglabel/seg') {
this._sharedUndoRedoService.action.next('SEG_UNDO');
}
}
if (action === 'REDO') {
if (imageLblType === '/imglabel/bndbox') {
this._sharedUndoRedoService.action.next('BBOX_REDO');
}
if (imageLblType === '/imglabel/seg') {
this._sharedUndoRedoService.action.next('SEG_REDO');
}
}
}

emitParentEvent = ({ url, thumbnailAction }: ThumbnailInfoProps): void => {
this._onClick.emit({ url, thumbnailAction });
};
Expand Down
19 changes: 18 additions & 1 deletion ...ts/image-labelling/image-labelling-left-sidebar/image-labelling-left-sidebar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class ImageLabellingLeftSidebarComponent implements OnInit, OnChanges {
jsonSchema!: IconSchema;
iconIndex!: number;
labelList: string[] = [];
isCrossLineOn: boolean = false;

constructor(
private _imgLabelState: ImageLabellingActionService,
Expand Down Expand Up @@ -93,7 +94,7 @@ export class ImageLabellingLeftSidebarComponent implements OnInit, OnChanges {
toggleable: true,
onClick: () => {
this.resetSelectedAnnotate();
this._imgLabelState.setState({ draw: true, drag: false, scroll: false });
this._imgLabelState.setState({ draw: true, drag: false, scroll: false, crossLine: this.isCrossLineOn });
},
}
: {
Expand Down Expand Up @@ -135,6 +136,19 @@ export class ImageLabellingLeftSidebarComponent implements OnInit, OnChanges {
// hoverLabel: `Key Point`,
// alt: `KeyPoint`,
// },
{
imgPath: this.isCrossLineOn ? `assets/icons/indicator_on.svg` : `assets/icons/indicator.svg`,
hoverLabel: `leftSideBar.info`,
alt: `KeyPoint`,
toggleable: false,
onClick: () => {
this.isCrossLineOn = !this.isCrossLineOn;
this.bindImagePath();
if (this.iconIndex === 2 ) {
this._imgLabelState.setState({ draw: true, drag: false, scroll: false, crossLine: this.isCrossLineOn });
}
},
},
{
imgPath: `assets/icons/eraser.svg`,
hoverLabel: `leftSideBar.eraser`,
Expand Down Expand Up @@ -218,6 +232,9 @@ export class ImageLabellingLeftSidebarComponent implements OnInit, OnChanges {
}

getIndex = (index: number): void => {
if (index === 3) {
return;
}
this.iconIndex = index;
};

Expand Down
4 changes: 4 additions & 0 deletions ...abelling/image-labelling-object-detection/image-labelling-object-detection.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,8 @@
</div>
<!-------------------------- Canvas -------------------------->
<canvas #canvasdrawing class="canvasstyle" [ngStyle]="{ cursor: currentCursor() }"></canvas>

<!-------------------------- Yellow Guideline Cross -------------------------->
<div #crossH id="cross-h" class="crosses"></div>
<div #crossV id="cross-v" class="crosses"></div>
</div>
125 changes: 77 additions & 48 deletions ...abelling/image-labelling-object-detection/image-labelling-object-detection.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,89 +3,89 @@
\*-------------------------------------------*/

.floatdiv {
position: absolute;
z-index: 10000;
position: absolute;
z-index: 10000;
}

/*-------------------------------------------*\
Label Search/ OCR Input
\*-------------------------------------------*/

.lbltypetxt {
width: 11vw;
height: 4vh;
color: snow;
font-size: 2vh;
border: 0.2vw solid gray;
background-color: black;
outline: none;
border-radius: 0.2vh;
border-bottom: none;
padding: 0;
text-indent: 0.4vw;
width: 11vw;
height: 4vh;
color: snow;
font-size: 2vh;
border: 0.2vw solid gray;
background-color: black;
outline: none;
border-radius: 0.2vh;
border-bottom: none;
padding: 0;
text-indent: 0.4vw;
}

.invalidInput {
border: 0.2vw solid red;
border: 0.2vw solid red;
}

.validInput {
border: 0.2vw solid grey;
border: 0.2vw solid grey;
}

/*-------------------------------------------*\
Label List
\*-------------------------------------------*/

.availablelbl {
background-color: black;
width: 11vw;
height: 15vh;
color: snow;
font-size: 2vh;
font-weight: bold;
border: 0.2vw solid gray;
outline: none;
border-radius: 0.2vh;
border-top: 0.1vh dotted snow;
overflow: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
background-color: black;
width: 11vw;
height: 15vh;
color: snow;
font-size: 2vh;
font-weight: bold;
border: 0.2vw solid gray;
outline: none;
border-radius: 0.2vh;
border-top: 0.1vh dotted snow;
overflow: auto;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}

.lblList {
padding: 0 0.2vw;
padding: 0 0.2vw;
}

.lblElement {
list-style-type: none;
margin: 0.3vh 0;
padding: 0;
justify-content: space-between;
display: flex;
&:hover {
background-color: #111;
}
list-style-type: none;
margin: 0.3vh 0;
padding: 0;
justify-content: space-between;
display: flex;
&:hover {
background-color: #111;
}
}

.lblName {
margin-left: 0.2vw;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 0.2vw;
overflow: hidden;
text-overflow: ellipsis;
}

.lblCount {
background-color: #222;
margin-right: 0.2vw;
padding: 0.1vh 0.2vw;
border-radius: 0.2vw;
background-color: #222;
margin-right: 0.2vw;
padding: 0.1vh 0.2vw;
border-radius: 0.2vw;
}

.notExist {
color: #999;
font-size: 1.5vh;
color: #999;
font-size: 1.5vh;
}

/*-------------------------------------------*\
Expand All @@ -104,3 +104,32 @@
outline: none;
border: none;
}

/*-------------------------------------------*\
Yellow Guideline Cross
\*-------------------------------------------*/

#cross-h {
left: 0px;
width: 100%;
height: 1px;
margin-top: -1px;
opacity: 0.4;
}

#cross-v {
top: 0px;
height: 100%;
width: 1px;
margin-left: -1px;
opacity: 0.4;
}

.crosses {
position: fixed;
background-color: #dc1d46;
box-shadow: 0 0 5px rgb(100, 100, 100);
pointer-events: none;
visibility: hidden;
z-index: 100;
}
Loading

0 comments on commit f5d24f5

Please sign in to comment.