+ return (
+ ;
export const ExportFormatData: ExportFormatDataMap = {
[LabelType.RECT]: [
+ {
+ type: AnnotationFormatType.JSON,
+ label: 'A .zip package containing files in Custom JSON format.'
+ },
{
type: AnnotationFormatType.YOLO,
label: 'A .zip package containing files in YOLO format.'
@@ -51,4 +55,4 @@ export const ExportFormatData: ExportFormatDataMap = {
label: 'Single JSON file.'
}
]
-}
+};
diff --git a/src/data/ImportFormatData.ts b/src/data/ImportFormatData.ts
index 46cc6ca1..9d04417c 100644
--- a/src/data/ImportFormatData.ts
+++ b/src/data/ImportFormatData.ts
@@ -2,10 +2,14 @@ import {LabelType} from './enums/LabelType';
import {ILabelFormatData} from '../interfaces/ILabelFormatData';
import {AnnotationFormatType} from './enums/AnnotationFormatType';
-export type ImportFormatDataMap = Record
+export type ImportFormatDataMap = Record;
export const ImportFormatData: ImportFormatDataMap = {
[LabelType.RECT]: [
+ {
+ type: AnnotationFormatType.MJ,
+ label: 'Multiple files in MJ JSON format.'
+ },
{
type: AnnotationFormatType.COCO,
label: 'Single file in COCO JSON format.'
@@ -24,4 +28,4 @@ export const ImportFormatData: ImportFormatDataMap = {
}
],
[LabelType.IMAGE_RECOGNITION]: []
-}
+};
diff --git a/src/data/ImporterSpecData.ts b/src/data/ImporterSpecData.ts
index c2cd3fb2..23f6b8af 100644
--- a/src/data/ImporterSpecData.ts
+++ b/src/data/ImporterSpecData.ts
@@ -2,9 +2,12 @@ import {AnnotationFormatType} from './enums/AnnotationFormatType';
import {AnnotationImporter} from '../logic/import/AnnotationImporter';
import {COCOImporter} from '../logic/import/coco/COCOImporter';
import {YOLOImporter} from '../logic/import/yolo/YOLOImporter';
+import {MJImporter} from '../logic/import/MJ/MJImporter';
-export type ImporterSpecDataMap = Record;
-
+export type ImporterSpecDataMap = Record<
+ AnnotationFormatType,
+ typeof AnnotationImporter
+>;
export const ImporterSpecData: ImporterSpecDataMap = {
[AnnotationFormatType.COCO]: COCOImporter,
@@ -12,5 +15,6 @@ export const ImporterSpecData: ImporterSpecDataMap = {
[AnnotationFormatType.JSON]: undefined,
[AnnotationFormatType.VGG]: undefined,
[AnnotationFormatType.VOC]: undefined,
- [AnnotationFormatType.YOLO]: YOLOImporter
-}
+ [AnnotationFormatType.YOLO]: YOLOImporter,
+ [AnnotationFormatType.MJ]: MJImporter
+};
diff --git a/src/data/enums/AnnotationFormatType.ts b/src/data/enums/AnnotationFormatType.ts
index 2e98b248..f3199fbc 100644
--- a/src/data/enums/AnnotationFormatType.ts
+++ b/src/data/enums/AnnotationFormatType.ts
@@ -4,5 +4,6 @@ export enum AnnotationFormatType {
CSV = 'CSV',
JSON = 'JSON',
VOC = 'VOC',
- VGG = 'VGG'
-}
\ No newline at end of file
+ VGG = 'VGG',
+ MJ = 'MJ'
+}
diff --git a/src/data/enums/ContextType.ts b/src/data/enums/ContextType.ts
index c806707c..baf22012 100644
--- a/src/data/enums/ContextType.ts
+++ b/src/data/enums/ContextType.ts
@@ -1,7 +1,8 @@
export enum ContextType {
- EDITOR = "EDITOR",
- LEFT_NAVBAR = "LEFT_NAVBAR",
- RIGHT_NAVBAR = "RIGHT_NAVBAR",
- POPUP = "POPUP",
- DROPDOWN = "DROPDOWN"
-}
\ No newline at end of file
+ EDITOR = 'EDITOR',
+ LEFT_NAVBAR = 'LEFT_NAVBAR',
+ GUIDE_NAVBAR = 'GUIDE_NAVBAR',
+ RIGHT_NAVBAR = 'RIGHT_NAVBAR',
+ POPUP = 'POPUP',
+ DROPDOWN = 'DROPDOWN'
+}
diff --git a/src/data/enums/ItemType.ts b/src/data/enums/ItemType.ts
new file mode 100644
index 00000000..71867ff2
--- /dev/null
+++ b/src/data/enums/ItemType.ts
@@ -0,0 +1,494 @@
+import _ from 'lodash';
+
+export enum ATTRIBUTE_TYPE {
+ GENDER = 'GENDER',
+ SOURCE = 'SOURCE',
+ FASHION_STYLE = 'FASHION_STYLE',
+ MAIN_CATEGORY = 'MAIN_CATEGORY',
+ SUB_CATEGORY = 'SUB_CATEGORY',
+ ITEM_COLOR = 'ITEM_COLOR',
+ ITEM_PATTERN = 'ITEM_PATTERN',
+ HUMAN_ID = 'HUMAN_ID'
+}
+
+export const GENDER = {
+ MAN: 1,
+ WOMAN: 2,
+ UNKNOWN: -1
+};
+
+export const GENDER_CODE = {
+ '1': 'MAN',
+ '2': 'WOMAN',
+ '-1': 'UNKNOWN'
+};
+
+export const SOURCE = {
+ HUMAN: 0,
+ MANNEQUIN: 1,
+ STYLEBOOK: 2,
+ UNKNOWN: -1
+};
+
+export const SOURCE_CODE = {
+ 0: 'HUMAN',
+ 1: 'MANNEQUIN',
+ 2: 'STYLEBOOK',
+ '-1': 'UNKNOWN'
+};
+
+export const FASHION_STYLE = [
+ {
+ seq: 18,
+ name: 'Basic',
+ slug: 'basic',
+ gender: 'A',
+ status: 'A',
+ m: 10,
+ f: 13
+ },
+ {
+ seq: 19,
+ name: 'Elegance',
+ slug: 'elegance',
+ gender: 'F',
+ status: 'A',
+ f: 2
+ },
+ {
+ seq: 20,
+ name: 'Office',
+ slug: 'office',
+ gender: 'F',
+ status: 'A',
+ f: 1
+ },
+ {
+ seq: 21,
+ name: 'Minimalist',
+ slug: 'minimalist',
+ gender: 'A',
+ status: 'A',
+ m: 3,
+ f: 4
+ },
+ {
+ seq: 22,
+ name: 'Vacation',
+ slug: 'vacation',
+ gender: 'A',
+ status: 'A',
+ m: 4,
+ f: 5
+ },
+ {
+ seq: 23,
+ name: 'Street',
+ slug: 'street',
+ gender: 'A',
+ status: 'A',
+ m: 8,
+ f: 11
+ },
+ {
+ seq: 24,
+ name: 'Sporty',
+ slug: 'sporty',
+ gender: 'A',
+ status: 'A',
+ m: 5,
+ f: 8
+ },
+ {
+ seq: 25,
+ name: 'Girly',
+ slug: 'girly',
+ gender: 'F',
+ status: 'A',
+ f: 6
+ },
+ {
+ seq: 26,
+ name: 'Sexy',
+ slug: 'sexy',
+ gender: 'F',
+ status: 'A',
+ f: 7
+ },
+ {
+ seq: 27,
+ name: 'Gentleman',
+ slug: 'gentleman',
+ gender: 'M',
+ status: 'A',
+ m: 1
+ },
+ {
+ seq: 28,
+ name: 'Punk',
+ slug: 'punk',
+ gender: 'A',
+ status: 'A',
+ m: 9,
+ f: 12
+ },
+ {
+ seq: 29,
+ name: 'Tech',
+ slug: 'techwear',
+ gender: 'A',
+ status: 'A',
+ m: 6,
+ f: 9
+ },
+ {
+ seq: 30,
+ name: 'Retro',
+ slug: 'retro',
+ gender: 'A',
+ status: 'A',
+ m: 7,
+ f: 10
+ },
+ {
+ seq: 31,
+ name: 'Bohemian',
+ slug: 'bohemian',
+ gender: 'A',
+ status: 'A',
+ m: 2,
+ f: 3
+ },
+ {
+ seq: -1,
+ name: 'Unknown',
+ slug: 'unknown',
+ gender: 'A',
+ status: 'A',
+ m: -1,
+ f: -1
+ }
+];
+
+export const FASHION_STYLE_MAN = FASHION_STYLE.filter(
+ (item) => item.gender === 'A' || item.gender === 'M'
+);
+
+export const FASHION_STYLE_WOMAN = FASHION_STYLE.filter(
+ (item) => item.gender === 'A' || item.gender === 'F'
+);
+
+export enum FASHION_STYLE_CODE_FOR_MAN {
+ GENTLEMAN = 1,
+ BOHEMIAN = 2,
+ MINIMALIST = 3,
+ VACATION = 4,
+ SPORTY = 5,
+ TECH = 6,
+ RETRO = 7,
+ STREET = 8,
+ PUNK = 9,
+ BASIC = 10,
+ UNKNOWN = -1
+}
+
+export enum FASHION_STYLE_CODE_FOR_WOMAN {
+ BASIC = 18,
+ ELEGANCE = 19,
+ OFFICE = 20,
+ MINIMALIST = 21,
+ VACATION = 22,
+ STREET = 23,
+ SPORTY = 24,
+ GIRLY = 25,
+ SEXY = 26,
+ PUNK = 28,
+ TECH = 29,
+ RETRO = 30,
+ BOHEMIAN = 31,
+ UNKNOWN = -1
+}
+
+export enum MAIN_CATEGORY_CODE {
+ OUTER = 1,
+ TOP,
+ PANTS,
+ SKIRT,
+ DRESSES,
+ SWIMWEAR,
+ UNDERWEAR,
+ SHOES,
+ BAG,
+ CAP_HAT,
+ FASHION_ACC,
+ EYEWEAR,
+ UNKNOWN = -1
+}
+
+export enum SUB_CATEGORY_CODE {
+ JACKET = 1,
+ COAT,
+ JUMPER,
+ PADDING_COAT,
+ VEST,
+ CARDIGAN,
+ HOOD_ZIPUP,
+ CASUAL_TOP,
+ SLEEVELESS,
+ SWEATSHIRT,
+ HOODED_TSHIRT,
+ SHIRTS_BLOUSE,
+ KNIT_SWEATER,
+ SHORTS,
+ SLACKS_COTTON_PANTS_CHINO,
+ WIDE_PANTS,
+ JEANS,
+ CARGO_PANTS,
+ LEGGINGS,
+ JOGGER_PANTS,
+ OVERALLS,
+ MINI_SKIRT,
+ SKIRT,
+ MINI_DRESS,
+ DRESS,
+ BIKINI,
+ RASH_GUARD,
+ ONE_PIECE_SWIMSUIT,
+ BEACH_TOPS,
+ BEACH_PANTS,
+ BRA,
+ PANTIES_UNDERWEAR,
+ PAJAMAS_HOMEWEAR,
+ SLIP,
+ BATHROBE,
+ CORRECTION_UNDERWEAR,
+ SHOES_LOERFERS,
+ HEELS,
+ SPORTS_SHOES_SNEAKERS,
+ BOOTS,
+ SANDALS_SLIPPERS,
+ CROSS_BAG,
+ SHOULDER_BAG,
+ TOTE_BAG,
+ BREIF_CASE,
+ WAIST_BAG,
+ CANVAS_BAG,
+ CLUTCH_BAG,
+ BACKPACK,
+ POUCH,
+ WALLET,
+ LUGGAGE,
+ BALLCAP,
+ BUCKET_HAT,
+ FEDORA_HAT,
+ BEANIE_HAT_WATCH_CAP,
+ PHONE_CASE,
+ SOCKS,
+ WATCH,
+ BELT,
+ SCARF,
+ TIGHTS_STOCKINGS,
+ GLOVES,
+ GLASSES,
+ SUNGLASSES,
+ UNKNOWN = -1
+}
+
+export const ITEM_CATEGORY = {
+ OUTER: [
+ SUB_CATEGORY_CODE.JACKET,
+ SUB_CATEGORY_CODE.COAT,
+ SUB_CATEGORY_CODE.JUMPER,
+ SUB_CATEGORY_CODE.PADDING_COAT,
+ SUB_CATEGORY_CODE.VEST,
+ SUB_CATEGORY_CODE.CARDIGAN,
+ SUB_CATEGORY_CODE.HOOD_ZIPUP
+ ],
+ TOP: [
+ SUB_CATEGORY_CODE.CASUAL_TOP,
+ SUB_CATEGORY_CODE.SLEEVELESS,
+ SUB_CATEGORY_CODE.SWEATSHIRT,
+ SUB_CATEGORY_CODE.HOODED_TSHIRT,
+ SUB_CATEGORY_CODE.SHIRTS_BLOUSE,
+ SUB_CATEGORY_CODE.KNIT_SWEATER
+ ],
+ PANTS: [
+ SUB_CATEGORY_CODE.SHORTS,
+ SUB_CATEGORY_CODE.SLACKS_COTTON_PANTS_CHINO,
+ SUB_CATEGORY_CODE.WIDE_PANTS,
+ SUB_CATEGORY_CODE.JEANS,
+ SUB_CATEGORY_CODE.CARGO_PANTS,
+ SUB_CATEGORY_CODE.LEGGINGS,
+ SUB_CATEGORY_CODE.JOGGER_PANTS,
+ SUB_CATEGORY_CODE.OVERALLS
+ ],
+ SKIRT: [SUB_CATEGORY_CODE.MINI_SKIRT, SUB_CATEGORY_CODE.SKIRT],
+ DRESSES: [SUB_CATEGORY_CODE.MINI_DRESS, SUB_CATEGORY_CODE.DRESS],
+ SWIMWEAR: [
+ SUB_CATEGORY_CODE.BIKINI,
+ SUB_CATEGORY_CODE.RASH_GUARD,
+ SUB_CATEGORY_CODE.ONE_PIECE_SWIMSUIT,
+ SUB_CATEGORY_CODE.BEACH_TOPS,
+ SUB_CATEGORY_CODE.BEACH_PANTS
+ ],
+ UNDERWEAR: [
+ SUB_CATEGORY_CODE.BRA,
+ SUB_CATEGORY_CODE.PANTIES_UNDERWEAR,
+ SUB_CATEGORY_CODE.PAJAMAS_HOMEWEAR,
+ SUB_CATEGORY_CODE.SLIP,
+ SUB_CATEGORY_CODE.BATHROBE,
+ SUB_CATEGORY_CODE.CORRECTION_UNDERWEAR
+ ],
+ SHOES: [
+ SUB_CATEGORY_CODE.SHOES_LOERFERS,
+ SUB_CATEGORY_CODE.HEELS,
+ SUB_CATEGORY_CODE.SPORTS_SHOES_SNEAKERS,
+ SUB_CATEGORY_CODE.BOOTS,
+ SUB_CATEGORY_CODE.SANDALS_SLIPPERS
+ ],
+ BAG: [
+ SUB_CATEGORY_CODE.CROSS_BAG,
+ SUB_CATEGORY_CODE.SHOULDER_BAG,
+ SUB_CATEGORY_CODE.TOTE_BAG,
+ SUB_CATEGORY_CODE.BREIF_CASE,
+ SUB_CATEGORY_CODE.WAIST_BAG,
+ SUB_CATEGORY_CODE.CANVAS_BAG,
+ SUB_CATEGORY_CODE.CLUTCH_BAG,
+ SUB_CATEGORY_CODE.BACKPACK,
+ SUB_CATEGORY_CODE.POUCH,
+ SUB_CATEGORY_CODE.WALLET,
+ SUB_CATEGORY_CODE.LUGGAGE
+ ],
+ CAP_HAT: [
+ SUB_CATEGORY_CODE.BALLCAP,
+ SUB_CATEGORY_CODE.BUCKET_HAT,
+ SUB_CATEGORY_CODE.FEDORA_HAT,
+ SUB_CATEGORY_CODE.BEANIE_HAT_WATCH_CAP
+ ],
+ FASHION_ACC: [
+ SUB_CATEGORY_CODE.PHONE_CASE,
+ SUB_CATEGORY_CODE.SOCKS,
+ SUB_CATEGORY_CODE.WATCH,
+ SUB_CATEGORY_CODE.BELT,
+ SUB_CATEGORY_CODE.SCARF,
+ SUB_CATEGORY_CODE.TIGHTS_STOCKINGS,
+ SUB_CATEGORY_CODE.GLOVES
+ ],
+ EYEWEAR: [SUB_CATEGORY_CODE.GLASSES, SUB_CATEGORY_CODE.SUNGLASSES]
+};
+
+export const SUB_CATEGORY_TO_MAIN = {
+ JACKET: MAIN_CATEGORY_CODE.OUTER,
+ COAT: MAIN_CATEGORY_CODE.OUTER,
+ JUMPER: MAIN_CATEGORY_CODE.OUTER,
+ PADDING_COAT: MAIN_CATEGORY_CODE.OUTER,
+ VEST: MAIN_CATEGORY_CODE.OUTER,
+ CARDIGAN: MAIN_CATEGORY_CODE.OUTER,
+ HOOD_ZIPUP: MAIN_CATEGORY_CODE.OUTER,
+ CASUAL_TOP: MAIN_CATEGORY_CODE.TOP,
+ SLEEVELESS: MAIN_CATEGORY_CODE.TOP,
+ SWEATSHIRT: MAIN_CATEGORY_CODE.TOP,
+ HOODED_TSHIRT: MAIN_CATEGORY_CODE.TOP,
+ SHIRTS_BLOUSE: MAIN_CATEGORY_CODE.TOP,
+ KNIT_SWEATER: MAIN_CATEGORY_CODE.TOP,
+ SHORTS: MAIN_CATEGORY_CODE.PANTS,
+ SLACKS_COTTON_PANTS_CHINO: MAIN_CATEGORY_CODE.PANTS,
+ WIDE_PANTS: MAIN_CATEGORY_CODE.PANTS,
+ JEANS: MAIN_CATEGORY_CODE.PANTS,
+ CARGO_PANTS: MAIN_CATEGORY_CODE.PANTS,
+ LEGGINGS: MAIN_CATEGORY_CODE.PANTS,
+ JOGGER_PANTS: MAIN_CATEGORY_CODE.PANTS,
+ OVERALLS: MAIN_CATEGORY_CODE.PANTS,
+ MINI_SKIRT: MAIN_CATEGORY_CODE.SKIRT,
+ SKIRT: MAIN_CATEGORY_CODE.SKIRT,
+ MINI_DRESS: MAIN_CATEGORY_CODE.DRESSES,
+ DRESS: MAIN_CATEGORY_CODE.DRESSES,
+ BIKINI: MAIN_CATEGORY_CODE.SWIMWEAR,
+ RASH_GUARD: MAIN_CATEGORY_CODE.SWIMWEAR,
+ ONE_PIECE_SWIMSUIT: MAIN_CATEGORY_CODE.SWIMWEAR,
+ BEACH_TOPS: MAIN_CATEGORY_CODE.SWIMWEAR,
+ BEACH_PANTS: MAIN_CATEGORY_CODE.SWIMWEAR,
+ BRA: MAIN_CATEGORY_CODE.UNDERWEAR,
+ PANTIES_UNDERWEAR: MAIN_CATEGORY_CODE.UNDERWEAR,
+ PAJAMAS_HOMEWEAR: MAIN_CATEGORY_CODE.UNDERWEAR,
+ SLIP: MAIN_CATEGORY_CODE.UNDERWEAR,
+ BATHROBE: MAIN_CATEGORY_CODE.UNDERWEAR,
+ CORRECTION_UNDERWEAR: MAIN_CATEGORY_CODE.UNDERWEAR,
+ SHOES_LOERFERS: MAIN_CATEGORY_CODE.SHOES,
+ HEELS: MAIN_CATEGORY_CODE.SHOES,
+ SPORTS_SHOES_SNEAKERS: MAIN_CATEGORY_CODE.SHOES,
+ BOOTS: MAIN_CATEGORY_CODE.SHOES,
+ SANDALS_SLIPPERS: MAIN_CATEGORY_CODE.SHOES,
+ CROSS_BAG: MAIN_CATEGORY_CODE.BAG,
+ SHOULDER_BAG: MAIN_CATEGORY_CODE.BAG,
+ TOTE_BAG: MAIN_CATEGORY_CODE.BAG,
+ BREIF_CASE: MAIN_CATEGORY_CODE.BAG,
+ WAIST_BAG: MAIN_CATEGORY_CODE.BAG,
+ CANVAS_BAG: MAIN_CATEGORY_CODE.BAG,
+ CLUTCH_BAG: MAIN_CATEGORY_CODE.BAG,
+ BACKPACK: MAIN_CATEGORY_CODE.BAG,
+ POUCH: MAIN_CATEGORY_CODE.BAG,
+ WALLET: MAIN_CATEGORY_CODE.BAG,
+ LUGGAGE: MAIN_CATEGORY_CODE.BAG,
+ BALLCAP: MAIN_CATEGORY_CODE.CAP_HAT,
+ BUCKET_HAT: MAIN_CATEGORY_CODE.CAP_HAT,
+ FEDORA_HAT: MAIN_CATEGORY_CODE.CAP_HAT,
+ BEANIE_HAT_WATCH_CAP: MAIN_CATEGORY_CODE.CAP_HAT,
+ PHONE_CASE: MAIN_CATEGORY_CODE.FASHION_ACC,
+ SOCKS: MAIN_CATEGORY_CODE.FASHION_ACC,
+ WATCH: MAIN_CATEGORY_CODE.FASHION_ACC,
+ BELT: MAIN_CATEGORY_CODE.FASHION_ACC,
+ SCARF: MAIN_CATEGORY_CODE.FASHION_ACC,
+ TIGHTS_STOCKINGS: MAIN_CATEGORY_CODE.FASHION_ACC,
+ GLOVES: MAIN_CATEGORY_CODE.FASHION_ACC,
+ GLASSES: MAIN_CATEGORY_CODE.EYEWEAR,
+ SUNGLASSES: MAIN_CATEGORY_CODE.EYEWEAR
+};
+
+export enum ITEM_COLOR {
+ BLACK = 1,
+ WHITE,
+ GREY,
+ RED,
+ PINK,
+ ORANGE,
+ BEIGE,
+ BROWN,
+ YELLOW,
+ GREEN,
+ KHAKI,
+ MINT,
+ BLUE,
+ NAVY,
+ SKYBLUE,
+ PURPLE,
+ LAVENDER,
+ WINE,
+ NEON,
+ GOLD,
+ SILVER,
+ CYAN,
+ UNKNOWN = -1
+}
+
+export enum ITEM_PATTERN {
+ CHECK = 1,
+ STRIPE,
+ ZIGZAG,
+ LEOPARD,
+ ZEBRA,
+ DOT,
+ CAMOUFLAGE,
+ PAISLEY,
+ ARGYLE,
+ FLORAL,
+ LETTERING,
+ SKULL,
+ GRADATION,
+ SOLID,
+ GRAPHIC,
+ HOUNDS_TOOTH,
+ COLOR_BLOCK,
+ MESH,
+ UNKNOWN = -1
+}
diff --git a/src/data/enums/JSONUploadStatus.ts b/src/data/enums/JSONUploadStatus.ts
new file mode 100644
index 00000000..f233f621
--- /dev/null
+++ b/src/data/enums/JSONUploadStatus.ts
@@ -0,0 +1,6 @@
+export enum JSONUploadStatus {
+ NEED_UPLOAD = 'NEED_UPLOAD',
+ UPLOADING = 'UPLOADING',
+ UPLOADED = 'UPLOADED',
+ FAILED = 'FAILED'
+}
diff --git a/src/data/enums/LabelStatus.ts b/src/data/enums/LabelStatus.ts
index de06ee29..0e2810f1 100644
--- a/src/data/enums/LabelStatus.ts
+++ b/src/data/enums/LabelStatus.ts
@@ -1,5 +1,5 @@
export enum LabelStatus {
- ACCEPTED = "ACCEPTED",
- REJECTED = "REJECTED",
- UNDECIDED = "UNDECIDED"
-}
\ No newline at end of file
+ ACCEPTED = 'ACCEPTED',
+ REJECTED = 'REJECTED',
+ UNDECIDED = 'UNDECIDED'
+}
diff --git a/src/data/enums/LabelType.ts b/src/data/enums/LabelType.ts
index 87be4c62..6fbc7984 100644
--- a/src/data/enums/LabelType.ts
+++ b/src/data/enums/LabelType.ts
@@ -4,4 +4,9 @@ export enum LabelType {
RECT = 'RECT',
POLYGON = 'POLYGON',
LINE = 'LINE'
-}
\ No newline at end of file
+}
+
+export enum LabelModeType {
+ HUMAN = 'HUMAN',
+ ITEM = 'ITEM'
+}
diff --git a/src/data/enums/PopupWindowType.ts b/src/data/enums/PopupWindowType.ts
index 46be29ea..a8aa1c82 100644
--- a/src/data/enums/PopupWindowType.ts
+++ b/src/data/enums/PopupWindowType.ts
@@ -8,5 +8,10 @@ export enum PopupWindowType {
IMPORT_ANNOTATIONS = 'IMPORT_ANNOTATIONS',
INSERT_LABEL_NAMES = 'INSERT_LABEL_NAMES',
EXIT_PROJECT = 'EXIT_PROJECT',
- LOADER = 'LOADER'
+ LOADER = 'LOADER',
+ LABEL_INFO = 'LABEL_INFO',
+ LOGIN = 'LOGIN',
+ LOGOUT = 'LOGOUT',
+ DELETE_CONFIRM = 'DELETE_CONFIRM',
+ PERFORMANCE = 'PERFORMANCE'
}
diff --git a/src/data/info/DropDownMenuData.ts b/src/data/info/DropDownMenuData.ts
index 1fa011d4..08ec8a32 100644
--- a/src/data/info/DropDownMenuData.ts
+++ b/src/data/info/DropDownMenuData.ts
@@ -1,89 +1,153 @@
-import {updateActivePopupType} from '../../store/general/actionCreators';
+import {
+ updateActivePopupType,
+ updateProjectData
+} from '../../store/general/actionCreators';
import {PopupWindowType} from '../enums/PopupWindowType';
import {store} from '../../index';
+import {updateAuthData} from '../../store/auth/actionCreators';
+import {
+ updateActiveImageIndex,
+ updateActiveLabelNameId,
+ updateFirstLabelCreatedFlag,
+ updateImageData,
+ updateLabelNames
+} from '../../store/labels/actionCreators';
+import {PopupActions} from '../../logic/actions/PopupActions';
export type DropDownMenuNode = {
- name: string
- description?: string
- imageSrc: string
- imageAlt: string
- disabled: boolean
- onClick?: () => void
- children?: DropDownMenuNode[]
-}
+ name: string;
+ description?: string;
+ imageSrc: string;
+ imageAlt: string;
+ disabled: boolean;
+ onClick?: () => void;
+ children?: DropDownMenuNode[];
+};
export const DropDownMenuData: DropDownMenuNode[] = [
+ // {
+ // name: 'Hành động(Actions)',
+ // imageSrc: 'ico/actions.png',
+ // imageAlt: 'actions',
+ // disabled: false,
+ // children: [
+ // // {
+ // // name: 'Sửa Nhãn(Edit Labels)',
+ // // description: 'Sửa danh sách nhãn(Modify labels list)',
+ // // imageSrc: 'ico/tags.png',
+ // // imageAlt: 'labels',
+ // // disabled: false,
+ // // onClick: () =>
+ // // store.dispatch(
+ // // updateActivePopupType(PopupWindowType.UPDATE_LABEL)
+ // // )
+ // // },
+ // // {
+ // // name: 'Nhập hình ảnh(Import Images)',
+ // // description: 'Tải thêm hình ảnh(Load more images)',
+ // // imageSrc: 'ico/camera.png',
+ // // imageAlt: 'images',
+ // // disabled: false,
+ // // onClick: () =>
+ // // store.dispatch(
+ // // updateActivePopupType(PopupWindowType.IMPORT_IMAGES)
+ // // )
+ // // },
+ // // {
+ // // name: 'Nhập chú thích(Import Annotations)',
+ // // description:
+ // // 'Nhập chú thích từ tệp(Import annotations from file)',
+ // // imageSrc: 'ico/import-labels.png',
+ // // imageAlt: 'import-labels',
+ // // disabled: false,
+ // // onClick: () =>
+ // // store.dispatch(
+ // // updateActivePopupType(
+ // // PopupWindowType.IMPORT_ANNOTATIONS
+ // // )
+ // // )
+ // // },
+ // // {
+ // // name: 'Xuất chú thích(Export Annotations)',
+ // // description:
+ // // 'Xuất chú thích sang tệp(Export annotations to file)',
+ // // imageSrc: 'ico/export-labels.png',
+ // // imageAlt: 'export-labels',
+ // // disabled: false,
+ // // onClick: () =>
+ // // store.dispatch(
+ // // updateActivePopupType(
+ // // PopupWindowType.EXPORT_ANNOTATIONS
+ // // )
+ // // )
+ // // },
+ // // {
+ // // name: 'Tải mô hình AI(Load AI Model)',
+ // // description:
+ // // 'Tải mô hình AI được đào tạo trước(Load our pre-trained annotation models)',
+ // // imageSrc: 'ico/ai.png',
+ // // imageAlt: 'load-ai-model',
+ // // disabled: false,
+ // // onClick: () =>
+ // // store.dispatch(
+ // // updateActivePopupType(PopupWindowType.LOAD_AI_MODEL)
+ // // )
+ // // }
+ // ]
+ // },
{
- name: 'Actions',
- imageSrc: 'ico/actions.png',
- imageAlt: 'actions',
+ name: 'Người dùng (User)',
+ imageSrc: 'ico/user.png',
+ imageAlt: 'user',
disabled: false,
children: [
{
- name: 'Edit Labels',
- description: 'Modify labels list',
- imageSrc: 'ico/tags.png',
- imageAlt: 'labels',
+ name: `Đăng xuất (Logout)`,
+ description:
+ 'Xóa xác thực hiện tại(Clear current authentication)',
+ imageSrc: 'ico/user.png',
+ imageAlt: 'logout',
disabled: false,
- onClick: () => store.dispatch(updateActivePopupType(PopupWindowType.UPDATE_LABEL))
- },
- {
- name: 'Import Images',
- description: 'Load more images',
- imageSrc: 'ico/camera.png',
- imageAlt: 'images',
- disabled: false,
- onClick: () => store.dispatch(updateActivePopupType(PopupWindowType.IMPORT_IMAGES))
- },
- {
- name: 'Import Annotations',
- description: 'Import annotations from file',
- imageSrc: 'ico/import-labels.png',
- imageAlt: 'import-labels',
- disabled: false,
- onClick: () => store.dispatch(updateActivePopupType(PopupWindowType.IMPORT_ANNOTATIONS))
- },
- {
- name: 'Export Annotations',
- description: 'Export annotations to file',
- imageSrc: 'ico/export-labels.png',
- imageAlt: 'export-labels',
- disabled: false,
- onClick: () => store.dispatch(updateActivePopupType(PopupWindowType.EXPORT_ANNOTATIONS))
- },
- {
- name: 'Load AI Model',
- description: 'Load our pre-trained annotation models',
- imageSrc: 'ico/ai.png',
- imageAlt: 'load-ai-model',
- disabled: false,
- onClick: () => store.dispatch(updateActivePopupType(PopupWindowType.LOAD_AI_MODEL))
- },
- ]
- },
- {
- name: 'Community',
- imageSrc: 'ico/plant.png',
- imageAlt: 'community',
- disabled: false,
- children: [
- {
- name: 'Documentation',
- description: 'Read more about Make Sense',
- imageSrc: 'ico/documentation.png',
- imageAlt: 'documentation',
- disabled: false,
- onClick: () => window.open('https://skalskip.github.io/make-sense', '_blank')
- },
- {
- name: 'Bugs and Features',
- description: 'Report a bug or propose a new feature',
- imageSrc: 'ico/bug.png',
- imageAlt: 'bug',
- disabled: false,
- onClick: () => window.open('https://github.com/SkalskiP/make-sense/issues', '_blank')
+ onClick: () => {
+ store.dispatch(
+ updateActivePopupType(PopupWindowType.LOGOUT)
+ );
+ }
}
]
}
-]
-
+ // {
+ // name: 'Cộng đồng(Community)',
+ // imageSrc: 'ico/plant.png',
+ // imageAlt: 'community',
+ // disabled: false,
+ // children: [
+ // {
+ // name: 'Tài liệu(Documentation)',
+ // description:
+ // 'Đọc thêm về Make Sense(Read more about Make Sense)',
+ // imageSrc: 'ico/documentation.png',
+ // imageAlt: 'documentation',
+ // disabled: false,
+ // onClick: () =>
+ // window.open(
+ // 'https://skalskip.github.io/make-sense',
+ // '_blank'
+ // )
+ // },
+ // {
+ // name: 'Lỗi và Chức năng(Bugs and Features)',
+ // description:
+ // 'Báo cáo lỗi hoặc đề xuất một chức năng mới(Report a bug or propose a new feature)',
+ // imageSrc: 'ico/bug.png',
+ // imageAlt: 'bug',
+ // disabled: false,
+ // onClick: () =>
+ // window.open(
+ // 'https://github.com/SkalskiP/make-sense/issues',
+ // '_blank'
+ // )
+ // }
+ // ]
+ // }
+];
diff --git a/src/index.scss b/src/index.scss
index f0545272..38991dc0 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,25 +1,27 @@
body {
- height: 100vh;
- width: 100vw;
- margin: 0;
- padding: 0;
+ height: 100vh;
+ width: 100vw;
+ margin: 0;
+ padding: 0;
- font-family: 'Saira Semi Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
+ font-family: 'Saira Semi Condensed', -apple-system, BlinkMacSystemFont,
+ 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+ 'Droid Sans', 'Helvetica Neue', sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
- overflow-x: hidden;
- overflow-y: hidden;
+ overflow-x: hidden;
+ overflow-y: hidden;
+
+ user-select: none;
}
#root {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
\ No newline at end of file
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/src/lang.ts b/src/lang.ts
new file mode 100644
index 00000000..e7ef877d
--- /dev/null
+++ b/src/lang.ts
@@ -0,0 +1,163 @@
+export const vi = {
+ GENDER: {
+ MAN: 'NAM',
+ WOMAN: 'NỮ',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ SOURCE: {
+ HUMAN: 'NHÂN LOẠI',
+ MANNEQUIN: 'MA NƠ CANH',
+ STYLEBOOK: 'SÁCH PHONG CÁCH',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ FASHION_STYLE: {
+ basic: 'Đơn giản',
+ elegance: 'Thanh lịch',
+ office: 'Công sở',
+ minimalist: 'Tối giản',
+ vacation: 'Nghỉ dưỡng',
+ street: 'Đường phố',
+ sporty: 'Thể thao',
+ girly: 'Nữ tính',
+ sexy: 'Gợi cảm',
+ gentleman: 'Quý ông',
+ punk: 'Punk',
+ techwear: 'Techwear',
+ retro: 'Cổ điển',
+ bohemian: 'Bohemian',
+ unknown: 'KHÔNG XÁC ĐỊNH'
+ },
+ MAIN_CATEGORY: {
+ OUTER: 'Áo khoác',
+ TOP: 'Áo',
+ PANTS: 'Quần',
+ SKIRT: 'Váy',
+ DRESSES: 'Đầm',
+ SWIMWEAR: 'Đồ bơi',
+ UNDERWEAR: 'Đồ lót',
+ SHOES: 'Giày',
+ BAG: 'Túi',
+ CAP_HAT: 'Mũ/Nón',
+ FASHION_ACC: 'Phụ kiện',
+ EYEWEAR: 'Mắt kính',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ SUB_CATEGORY: {
+ JACKET: 'áo khoác ngắn',
+ COAT: 'áo khoác ngoài',
+ JUMPER: 'áo khoác bomber',
+ PADDING_COAT: 'áo khoác phao',
+ VEST: 'áo gile (mặc phía trong)',
+ CARDIGAN: 'áo len đan cài trước',
+ HOOD_ZIPUP: 'áo khoác dây kéo có nón',
+ CASUAL_TOP: 'áo thun',
+ SLEEVELESS: '(áo) không tay',
+ SWEATSHIRT: 'áo nỉ dài tay (tròng đầu)',
+ HOODED_TSHIRT: 'áo có nón',
+ SHIRTS_BLOUSE: 'áo sơ mi / áo kiểu nữ',
+ KNIT_SWEATER: 'áo len đan',
+ SHORTS: 'quần ngắn',
+ SLACKS_COTTON_PANTS_CHINO: 'quần tây / quần kaki',
+ WIDE_PANTS: 'quần ống rộng',
+ JEANS: 'quần jeans',
+ CARGO_PANTS: 'quần túi hộp',
+ LEGGINGS: 'quần leggings',
+ JOGGER_PANTS: 'quần jogger',
+ OVERALLS: 'quần yếm',
+ MINI_SKIRT: 'váy ngắn',
+ SKIRT: 'chân váy',
+ MINI_DRESS: 'đầm ngắn',
+ DRESS: 'đầm',
+ BIKINI: 'đồ tắm 2 mảnh',
+ RASH_GUARD: 'đồ bơi bảo vệ',
+ ONE_PIECE_SWIMSUIT: 'đồ tắm 1 mảnh',
+ BEACH_TOPS: 'áo mặc đi biển',
+ BEACH_PANTS: 'quần mặc đi biển',
+ BRA: 'áo ngực/ áo lót',
+ PANTIES_UNDERWEAR: 'quần lót',
+ PAJAMAS_HOMEWEAR: 'đồ mặc nhà',
+ SLIP: 'đầm ngủ',
+ BATHROBE: 'áo choàng tắm',
+ CORRECTION_UNDERWEAR: 'đồ lót định hình cơ thể',
+ SHOES_LOERFERS: 'giày lười',
+ HEELS: 'giày cao gót',
+ SPORTS_SHOES_SNEAKERS: 'giày thể thao',
+ BOOTS: 'bốt (giày cao cổ)',
+ SANDALS_SLIPPERS: 'dép xăng đan/ dép xỏ ngón',
+ CROSS_BAG: 'túi đeo chéo',
+ SHOULDER_BAG: 'túi đeo vai',
+ TOTE_BAG: 'túi vải (kích thước lớn)',
+ BREIF_CASE: 'cặp (túi xách) đựng tài liệu',
+ WAIST_BAG: 'túi đeo hông',
+ CANVAS_BAG: 'túi vải bố',
+ CLUTCH_BAG: 'ví cầm tay',
+ BACKPACK: 'ba lô',
+ POUCH: 'túi nhỏ',
+ WALLET: 'ví',
+ LUGGAGE: 'vali',
+ BALLCAP: 'nón lưỡi trai',
+ BUCKET_HAT: 'nón vành',
+ FEDORA_HAT: 'mũ phớt',
+ BEANIE_HAT_WATCH_CAP: 'mũ len Beanie',
+ PHONE_CASE: 'ốp lưng điện thoại',
+ SOCKS: 'vớ / tất',
+ WATCH: 'đồng hồ đeo tay',
+ BELT: 'dây thắt lưng',
+ SCARF: 'khăn choàng cổ',
+ TIGHTS_STOCKINGS: 'quần tất / vớ da',
+ GLOVES: 'găng tay',
+ GLASSES: 'kính cận',
+ SUNGLASSES: 'kính mát',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ ITEM_COLOR: {
+ BLACK: 'màu đen',
+ WHITE: 'màu trắng',
+ GREY: 'màu xám',
+ RED: 'màu đỏ',
+ PINK: 'màu hồng',
+ ORANGE: 'màu cam',
+ BEIGE: 'màu be',
+ BROWN: 'màu nâu',
+ YELLOW: 'màu vàng',
+ GREEN: 'màu xanh lá',
+ KHAKI: 'màu xanh rêu',
+ MINT: 'màu xanh bạc hà',
+ BLUE: 'màu xanh ',
+ NAVY: 'màu xanh đen',
+ SKYBLUE: 'màu xanh da trời',
+ PURPLE: 'màu tím',
+ LAVENDER: 'màu tím nhạt',
+ WINE: 'màu đỏ rượu',
+ NEON: 'màu xanh neon',
+ GOLD: 'màu vàng đồng',
+ SILVER: 'màu bạc',
+ CYAN: 'xanh ngọc',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ ITEM_PATTERN: {
+ CHECK: 'họa tiết kẻ caro',
+ STRIPE: 'họa tiết kẻ sọc',
+ ZIGZAG: 'họa tiết kẻ zigzag',
+ LEOPARD: 'họa tiết da báo',
+ ZEBRA: 'họa tiết ngựa vằn',
+ DOT: 'họa tiết chấm bi',
+ CAMOUFLAGE: 'họa tiết ngụy trang, quân đội',
+ PAISLEY: 'họa tiết giọt lệ xoắn',
+ ARGYLE: 'họa tiết hình kim cương',
+ FLORAL: 'họa tiết in hoa',
+ LETTERING: 'họa tiết chữ cái',
+ SKULL: 'họa tiết đầu lâu',
+ GRADATION: 'họa tiết chuyển màu',
+ SOLID: 'họa tiết trơn (1 màu)',
+ GRAPHIC: 'họa tiết đồ họa',
+ HOUNDS_TOOTH: 'họa tiết răng sói',
+ COLOR_BLOCK: 'hình khối màu sắc ',
+ MESH: 'vải lưới',
+ UNKNOWN: 'KHÔNG XÁC ĐỊNH'
+ },
+ ALERT: {
+ SELECT_ONE_STYLE:
+ 'Vui lòng chỉ chọn một phong cách!\nPlease choose only one style !\n하나의 스타일만 선택해주세요!'
+ }
+};
diff --git a/src/logic/actions/AIObjectDetectionActions.ts b/src/logic/actions/AIObjectDetectionActions.ts
index 093c9dad..f33d42d1 100644
--- a/src/logic/actions/AIObjectDetectionActions.ts
+++ b/src/logic/actions/AIObjectDetectionActions.ts
@@ -1,7 +1,7 @@
import {DetectedObject} from '@tensorflow-models/coco-ssd';
import {ImageData, LabelName, LabelRect} from '../../store/labels/types';
import {LabelsSelector} from '../../store/selectors/LabelsSelector';
-import { v4 as uuidv4 } from 'uuid';
+import {v4 as uuidv4} from 'uuid';
import {store} from '../../index';
import {updateImageDataById} from '../../store/labels/actionCreators';
import {ObjectDetector} from '../../ai/ObjectDetector';
@@ -17,31 +17,52 @@ import {AIActions} from './AIActions';
export class AIObjectDetectionActions {
public static detectRectsForActiveImage(): void {
const activeImageData: ImageData = LabelsSelector.getActiveImageData();
- AIObjectDetectionActions.detectRects(activeImageData.id, ImageRepository.getById(activeImageData.id))
+ AIObjectDetectionActions.detectRects(
+ activeImageData.id,
+ ImageRepository.getById(activeImageData.id)
+ );
}
public static detectRects(imageId: string, image: HTMLImageElement): void {
- if (LabelsSelector.getImageDataById(imageId).isVisitedByObjectDetector || !AISelector.isAIObjectDetectorModelLoaded())
+ if (
+ LabelsSelector.getImageDataById(imageId)
+ .isVisitedByObjectDetector ||
+ !AISelector.isAIObjectDetectorModelLoaded()
+ )
return;
store.dispatch(updateActivePopupType(PopupWindowType.LOADER));
ObjectDetector.predict(image, (predictions: DetectedObject[]) => {
- const suggestedLabelNames = AIObjectDetectionActions.extractNewSuggestedLabelNames(LabelsSelector.getLabelNames(), predictions);
- const rejectedLabelNames = AISelector.getRejectedSuggestedLabelList();
- const newlySuggestedNames = AIActions.excludeRejectedLabelNames(suggestedLabelNames, rejectedLabelNames);
+ const suggestedLabelNames =
+ AIObjectDetectionActions.extractNewSuggestedLabelNames(
+ LabelsSelector.getLabelNames(),
+ predictions
+ );
+ const rejectedLabelNames =
+ AISelector.getRejectedSuggestedLabelList();
+ const newlySuggestedNames = AIActions.excludeRejectedLabelNames(
+ suggestedLabelNames,
+ rejectedLabelNames
+ );
if (newlySuggestedNames.length > 0) {
store.dispatch(updateSuggestedLabelList(newlySuggestedNames));
- store.dispatch(updateActivePopupType(PopupWindowType.SUGGEST_LABEL_NAMES));
+ store.dispatch(
+ updateActivePopupType(PopupWindowType.SUGGEST_LABEL_NAMES)
+ );
} else {
store.dispatch(updateActivePopupType(null));
}
AIObjectDetectionActions.saveRectPredictions(imageId, predictions);
- })
+ });
}
- public static saveRectPredictions(imageId: string, predictions: DetectedObject[]) {
+ public static saveRectPredictions(
+ imageId: string,
+ predictions: DetectedObject[]
+ ) {
const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
- const predictedLabels: LabelRect[] = AIObjectDetectionActions.mapPredictionsToRectLabels(predictions);
+ const predictedLabels: LabelRect[] =
+ AIObjectDetectionActions.mapPredictionsToRectLabels(predictions);
const nextImageData: ImageData = {
...imageData,
labelRects: imageData.labelRects.concat(predictedLabels),
@@ -50,7 +71,9 @@ export class AIObjectDetectionActions {
store.dispatch(updateImageDataById(imageData.id, nextImageData));
}
- private static mapPredictionsToRectLabels(predictions: DetectedObject[]): LabelRect[] {
+ private static mapPredictionsToRectLabels(
+ predictions: DetectedObject[]
+ ): LabelRect[] {
return predictions.map((prediction: DetectedObject) => {
return {
id: uuidv4(),
@@ -60,34 +83,46 @@ export class AIObjectDetectionActions {
x: prediction.bbox[0],
y: prediction.bbox[1],
width: prediction.bbox[2],
- height: prediction.bbox[3],
+ height: prediction.bbox[3]
},
isCreatedByAI: true,
status: LabelStatus.UNDECIDED,
suggestedLabel: prediction.class
- }
- })
+ };
+ });
}
- public static extractNewSuggestedLabelNames(labels: LabelName[], predictions: DetectedObject[]): string[] {
- return predictions.reduce((acc: string[], prediction: DetectedObject) => {
- if (!acc.includes(prediction.class) && !findLast(labels, {name: prediction.class})) {
- acc.push(prediction.class)
- }
- return acc;
- }, [])
+ public static extractNewSuggestedLabelNames(
+ labels: LabelName[],
+ predictions: DetectedObject[]
+ ): string[] {
+ return predictions.reduce(
+ (acc: string[], prediction: DetectedObject) => {
+ if (
+ !acc.includes(prediction.class) &&
+ !findLast(labels, {name: prediction.class})
+ ) {
+ acc.push(prediction.class);
+ }
+ return acc;
+ },
+ []
+ );
}
public static acceptAllSuggestedRectLabels(imageData: ImageData) {
const newImageData: ImageData = {
...imageData,
labelRects: imageData.labelRects.map((labelRect: LabelRect) => {
- const labelName: LabelName = findLast(LabelsSelector.getLabelNames(), {name: labelRect.suggestedLabel});
+ const labelName: LabelName = findLast(
+ LabelsSelector.getLabelNames(),
+ {name: labelRect.suggestedLabel}
+ );
return {
...labelRect,
status: LabelStatus.ACCEPTED,
labelId: !!labelName ? labelName.id : labelRect.labelId
- }
+ };
})
};
store.dispatch(updateImageDataById(newImageData.id, newImageData));
@@ -96,7 +131,10 @@ export class AIObjectDetectionActions {
public static rejectAllSuggestedRectLabels(imageData: ImageData) {
const newImageData: ImageData = {
...imageData,
- labelRects: imageData.labelRects.filter((labelRect: LabelRect) => labelRect.status === LabelStatus.ACCEPTED)
+ labelRects: imageData.labelRects.filter(
+ (labelRect: LabelRect) =>
+ labelRect.status === LabelStatus.ACCEPTED
+ )
};
store.dispatch(updateImageDataById(newImageData.id, newImageData));
}
diff --git a/src/logic/actions/LabelActions.ts b/src/logic/actions/LabelActions.ts
index c59d1422..e54f6fb5 100644
--- a/src/logic/actions/LabelActions.ts
+++ b/src/logic/actions/LabelActions.ts
@@ -1,9 +1,23 @@
import {LabelsSelector} from '../../store/selectors/LabelsSelector';
-import {ImageData, LabelLine, LabelName, LabelPoint, LabelPolygon, LabelRect} from '../../store/labels/types';
+import {
+ HumanInfo,
+ ImageData,
+ ItemInfo,
+ LabelLine,
+ LabelName,
+ LabelPoint,
+ LabelPolygon,
+ LabelRect
+} from '../../store/labels/types';
import {filter} from 'lodash';
import {store} from '../../index';
-import {updateImageData, updateImageDataById} from '../../store/labels/actionCreators';
-import {LabelType} from '../../data/enums/LabelType';
+import {
+ updateActiveLabelMode,
+ updateImageData,
+ updateImageDataById
+} from '../../store/labels/actionCreators';
+import {LabelType, LabelModeType} from '../../data/enums/LabelType';
+import {JSONUploadStatus} from '../../data/enums/JSONUploadStatus';
export class LabelActions {
public static deleteActiveLabel() {
@@ -27,12 +41,25 @@ export class LabelActions {
}
public static deleteRectLabelById(imageId: string, labelRectId: string) {
+ // console.log('labelRectId: ', labelRectId);
const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
- const newImageData = {
+ const newImageData: ImageData = {
...imageData,
- labelRects: filter(imageData.labelRects, (currentLabel: LabelRect) => {
- return currentLabel.id !== labelRectId;
- })
+ labelRects: filter(
+ imageData.labelRects,
+ (currentLabel: LabelRect) => {
+ return currentLabel.id !== labelRectId;
+ }
+ ),
+ humans: filter(
+ imageData.humans,
+ (human: HumanInfo) => human.uuid !== labelRectId
+ ),
+ items: filter(
+ imageData.items,
+ (item: ItemInfo) => item.uuid !== labelRectId
+ ),
+ uploadStatus: JSONUploadStatus.NEED_UPLOAD
};
store.dispatch(updateImageDataById(imageData.id, newImageData));
}
@@ -41,9 +68,12 @@ export class LabelActions {
const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
const newImageData = {
...imageData,
- labelPoints: filter(imageData.labelPoints, (currentLabel: LabelPoint) => {
- return currentLabel.id !== labelPointId;
- })
+ labelPoints: filter(
+ imageData.labelPoints,
+ (currentLabel: LabelPoint) => {
+ return currentLabel.id !== labelPointId;
+ }
+ )
};
store.dispatch(updateImageDataById(imageData.id, newImageData));
}
@@ -52,33 +82,50 @@ export class LabelActions {
const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
const newImageData = {
...imageData,
- labelLines: filter(imageData.labelLines, (currentLabel: LabelLine) => {
- return currentLabel.id !== labelLineId;
- })
+ labelLines: filter(
+ imageData.labelLines,
+ (currentLabel: LabelLine) => {
+ return currentLabel.id !== labelLineId;
+ }
+ )
};
store.dispatch(updateImageDataById(imageData.id, newImageData));
}
- public static deletePolygonLabelById(imageId: string, labelPolygonId: string) {
+ public static deletePolygonLabelById(
+ imageId: string,
+ labelPolygonId: string
+ ) {
const imageData: ImageData = LabelsSelector.getImageDataById(imageId);
const newImageData = {
...imageData,
- labelPolygons: filter(imageData.labelPolygons, (currentLabel: LabelPolygon) => {
- return currentLabel.id !== labelPolygonId;
- })
+ labelPolygons: filter(
+ imageData.labelPolygons,
+ (currentLabel: LabelPolygon) => {
+ return currentLabel.id !== labelPolygonId;
+ }
+ )
};
store.dispatch(updateImageDataById(imageData.id, newImageData));
}
public static removeLabelNames(labelNamesIds: string[]) {
const imagesData: ImageData[] = LabelsSelector.getImagesData();
- const newImagesData: ImageData[] = imagesData.map((imageData: ImageData) => {
- return LabelActions.removeLabelNamesFromImageData(imageData, labelNamesIds);
- });
- store.dispatch(updateImageData(newImagesData))
+ const newImagesData: ImageData[] = imagesData.map(
+ (imageData: ImageData) => {
+ return LabelActions.removeLabelNamesFromImageData(
+ imageData,
+ labelNamesIds
+ );
+ }
+ );
+ store.dispatch(updateImageData(newImagesData));
}
- private static removeLabelNamesFromImageData(imageData: ImageData, labelNamesIds: string[]): ImageData {
+ private static removeLabelNamesFromImageData(
+ imageData: ImageData,
+ labelNamesIds: string[]
+ ): ImageData {
return {
...imageData,
labelRects: imageData.labelRects.map((labelRect: LabelRect) => {
@@ -86,9 +133,9 @@ export class LabelActions {
return {
...labelRect,
id: null
- }
+ };
} else {
- return labelRect
+ return labelRect;
}
}),
labelPoints: imageData.labelPoints.map((labelPoint: LabelPoint) => {
@@ -96,31 +143,39 @@ export class LabelActions {
return {
...labelPoint,
id: null
- }
+ };
} else {
- return labelPoint
+ return labelPoint;
}
}),
- labelPolygons: imageData.labelPolygons.map((labelPolygon: LabelPolygon) => {
- if (labelNamesIds.includes(labelPolygon.id)) {
- return {
- ...labelPolygon,
- id: null
+ labelPolygons: imageData.labelPolygons.map(
+ (labelPolygon: LabelPolygon) => {
+ if (labelNamesIds.includes(labelPolygon.id)) {
+ return {
+ ...labelPolygon,
+ id: null
+ };
+ } else {
+ return labelPolygon;
}
- } else {
- return labelPolygon
}
- }),
- labelNameIds: imageData.labelNameIds.filter((labelNameId: string) => {
- return !labelNamesIds.includes(labelNameId)
- })
- }
+ ),
+ labelNameIds: imageData.labelNameIds.filter(
+ (labelNameId: string) => {
+ return !labelNamesIds.includes(labelNameId);
+ }
+ )
+ };
}
public static labelExistsInLabelNames(label: string): boolean {
const labelNames: LabelName[] = LabelsSelector.getLabelNames();
return labelNames
.map((labelName: LabelName) => labelName.name)
- .includes(label)
+ .includes(label);
+ }
+
+ public static selectLabelMode(mode: LabelModeType) {
+ store.dispatch(updateActiveLabelMode(mode));
}
}
diff --git a/src/logic/export/RectLabelsExporter.ts b/src/logic/export/RectLabelsExporter.ts
index 2a77786e..68929e9c 100644
--- a/src/logic/export/RectLabelsExporter.ts
+++ b/src/logic/export/RectLabelsExporter.ts
@@ -1,8 +1,14 @@
import {AnnotationFormatType} from '../../data/enums/AnnotationFormatType';
-import {ImageData, LabelName, LabelRect} from '../../store/labels/types';
+import {
+ HumanInfo,
+ ImageData,
+ LabelName,
+ LabelRect,
+ RectJSON
+} from '../../store/labels/types';
import {ImageRepository} from '../imageRepository/ImageRepository';
import JSZip from 'jszip';
-import { saveAs } from 'file-saver';
+import {saveAs} from 'file-saver';
import {LabelsSelector} from '../../store/selectors/LabelsSelector';
import {XMLSanitizerUtil} from '../../utils/XMLSanitizerUtil';
import {ExporterUtil} from '../../utils/ExporterUtil';
@@ -11,6 +17,8 @@ import {findIndex, findLast} from 'lodash';
import {ISize} from '../../interfaces/ISize';
import {NumberUtil} from '../../utils/NumberUtil';
import {RectUtil} from '../../utils/RectUtil';
+import {IRect} from '../../interfaces/IRect';
+import {AuthSelector} from '../../store/selectors/AuthSelector';
export class RectLabelsExporter {
public static export(exportFormatType: AnnotationFormatType): void {
@@ -24,6 +32,9 @@ export class RectLabelsExporter {
case AnnotationFormatType.CSV:
RectLabelsExporter.exportAsCSV();
break;
+ case AnnotationFormatType.JSON:
+ RectLabelsExporter.exportAsJSON();
+ break;
default:
return;
}
@@ -31,53 +42,74 @@ export class RectLabelsExporter {
private static exportAsYOLO(): void {
const zip = new JSZip();
- LabelsSelector.getImagesData()
- .forEach((imageData: ImageData) => {
- const fileContent: string = RectLabelsExporter.wrapRectLabelsIntoYOLO(imageData);
- if (fileContent) {
- const fileName : string = imageData.fileData.name.replace(/\.[^/.]+$/, '.txt');
- try {
- zip.file(fileName, fileContent);
- } catch (error) {
- // TODO
- throw new Error(error as string);
- }
+ LabelsSelector.getImagesData().forEach((imageData: ImageData) => {
+ const fileContent: string =
+ RectLabelsExporter.wrapRectLabelsIntoYOLO(imageData);
+ if (fileContent) {
+ const fileName: string = imageData.fileData.name.replace(
+ /\.[^/.]+$/,
+ '.txt'
+ );
+ try {
+ zip.file(fileName, fileContent);
+ } catch (error) {
+ // TODO
+ throw new Error(error as string);
}
- });
+ }
+ });
try {
- zip.generateAsync({type:'blob'})
- .then((content: Blob) => {
- saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
- });
+ zip.generateAsync({type: 'blob'}).then((content: Blob) => {
+ saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
+ });
} catch (error) {
// TODO
throw new Error(error as string);
}
}
- public static wrapRectLabelIntoYOLO(labelRect: LabelRect, labelNames: LabelName[], imageSize: ISize): string {
- const snapAndFix = (value: number) => NumberUtil.snapValueToRange(value,0, 1).toFixed(6)
- const classIdx: string = findIndex(labelNames, {id: labelRect.labelId}).toString()
- const rectCenter = RectUtil.getCenter(labelRect.rect)
- const rectSize = RectUtil.getSize(labelRect.rect)
+ public static wrapRectLabelIntoYOLO(
+ labelRect: LabelRect,
+ labelNames: LabelName[],
+ imageSize: ISize
+ ): string {
+ const snapAndFix = (value: number) =>
+ NumberUtil.snapValueToRange(value, 0, 1).toFixed(6);
+ const classIdx: string = findIndex(labelNames, {
+ id: labelRect.labelId
+ }).toString();
+ const rectCenter = RectUtil.getCenter(labelRect.rect);
+ const rectSize = RectUtil.getSize(labelRect.rect);
const rawBBox: number[] = [
rectCenter.x / imageSize.width,
rectCenter.y / imageSize.height,
rectSize.width / imageSize.width,
rectSize.height / imageSize.height
- ]
+ ];
- let [x, y, width, height] = rawBBox.map((value: number) => parseFloat(snapAndFix(value)))
+ let [x, y, width, height] = rawBBox.map((value: number) =>
+ parseFloat(snapAndFix(value))
+ );
- if (x + width / 2 > 1) { width = 2 * (1 - x) }
- if (x - width / 2 < 0) { width = 2 * x }
- if (y + height / 2 > 1) { height = 2 * (1 - y) }
- if (y - height / 2 < 0) { height = 2 * y }
+ if (x + width / 2 > 1) {
+ width = 2 * (1 - x);
+ }
+ if (x - width / 2 < 0) {
+ width = 2 * x;
+ }
+ if (y + height / 2 > 1) {
+ height = 2 * (1 - y);
+ }
+ if (y - height / 2 < 0) {
+ height = 2 * y;
+ }
- const processedBBox = [x, y, width, height].map((value: number) => snapAndFix(value))
+ const processedBBox = [x, y, width, height].map((value: number) =>
+ snapAndFix(value)
+ );
- return [classIdx, ...processedBBox].join(' ')
+ return [classIdx, ...processedBBox].join(' ');
}
private static wrapRectLabelsIntoYOLO(imageData: ImageData): string {
@@ -86,33 +118,42 @@ export class RectLabelsExporter {
const labelNames: LabelName[] = LabelsSelector.getLabelNames();
const image: HTMLImageElement = ImageRepository.getById(imageData.id);
- const imageSize: ISize = {width: image.width, height: image.height}
- const labelRectsString: string[] = imageData.labelRects.map((labelRect: LabelRect) => {
- return RectLabelsExporter.wrapRectLabelIntoYOLO(labelRect, labelNames, imageSize)
- });
+ const imageSize: ISize = {width: image.width, height: image.height};
+ const labelRectsString: string[] = imageData.labelRects.map(
+ (labelRect: LabelRect) => {
+ return RectLabelsExporter.wrapRectLabelIntoYOLO(
+ labelRect,
+ labelNames,
+ imageSize
+ );
+ }
+ );
return labelRectsString.join('\n');
}
private static exportAsVOC(): void {
const zip = new JSZip();
LabelsSelector.getImagesData().forEach((imageData: ImageData) => {
- const fileContent: string = RectLabelsExporter.wrapImageIntoVOC(imageData);
- if (fileContent) {
- const fileName : string = imageData.fileData.name.replace(/\.[^/.]+$/, '.xml');
- try {
- zip.file(fileName, fileContent);
- } catch (error) {
- // TODO
- throw new Error(error as string);
- }
+ const fileContent: string =
+ RectLabelsExporter.wrapImageIntoVOC(imageData);
+ if (fileContent) {
+ const fileName: string = imageData.fileData.name.replace(
+ /\.[^/.]+$/,
+ '.xml'
+ );
+ try {
+ zip.file(fileName, fileContent);
+ } catch (error) {
+ // TODO
+ throw new Error(error as string);
}
- });
+ }
+ });
try {
- zip.generateAsync({type:'blob'})
- .then(function(content) {
- saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
- });
+ zip.generateAsync({type: 'blob'}).then(function (content) {
+ saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
+ });
} catch (error) {
// TODO
throw new Error(error as string);
@@ -124,33 +165,48 @@ export class RectLabelsExporter {
return null;
const labelNamesList: LabelName[] = LabelsSelector.getLabelNames();
- const labelRectsString: string[] = imageData.labelRects.map((labelRect: LabelRect) => {
- const labelName: LabelName = findLast(labelNamesList, {id: labelRect.labelId});
- const labelFields = !!labelName ? [
- `\t`
- ] : [];
- return labelFields.join('\n')
- });
+ const labelRectsString: string[] = imageData.labelRects.map(
+ (labelRect: LabelRect) => {
+ const labelName: LabelName = findLast(labelNamesList, {
+ id: labelRect.labelId
+ });
+ const labelFields = !!labelName
+ ? [
+ `\t`
+ ]
+ : [];
+ return labelFields.join('\n');
+ }
+ );
return labelRectsString.join('\n');
}
private static wrapImageIntoVOC(imageData: ImageData): string {
- const labels: string = RectLabelsExporter.wrapRectLabelsIntoVOC(imageData);
- const projectName: string = XMLSanitizerUtil.sanitize(GeneralSelector.getProjectName());
+ const labels: string =
+ RectLabelsExporter.wrapRectLabelsIntoVOC(imageData);
+ const projectName: string = XMLSanitizerUtil.sanitize(
+ GeneralSelector.getProjectName()
+ );
if (labels) {
- const image: HTMLImageElement = ImageRepository.getById(imageData.id);
+ const image: HTMLImageElement = ImageRepository.getById(
+ imageData.id
+ );
return [
``,
`\t${projectName} `,
@@ -170,14 +226,102 @@ export class RectLabelsExporter {
}
return null;
}
+ private static exportAsJSON(): void {
+ const zip = new JSZip();
+ LabelsSelector.getImagesData().forEach((imageData: ImageData) => {
+ const content =
+ RectLabelsExporter.wrapRectLabelsIntoJSON(imageData);
+ if (content) {
+ const fileName: string = imageData.fileData.name.replace(
+ /\.[^/.]+$/,
+ '.json'
+ );
+ try {
+ zip.file(fileName, JSON.stringify(content));
+ } catch (error) {
+ // TODO
+ throw new Error(error as string);
+ }
+ }
+ });
+ try {
+ zip.generateAsync({type: 'blob'}).then((content: Blob) => {
+ saveAs(content, `${ExporterUtil.getExportFileName()}.zip`);
+ });
+ } catch (error) {
+ // TODO
+ throw new Error(error as string);
+ }
+ }
+ public static wrapRectLabelsIntoJSON(imageData: ImageData): RectJSON {
+ if (imageData.labelRects.length === 0 || !imageData.loadStatus)
+ return null;
+
+ const convertRect = (rect: IRect) => ({
+ lt_x: Math.round(rect.x),
+ lt_y: Math.round(rect.y),
+ rb_x: Math.round(rect.x + rect.width),
+ rb_y: Math.round(rect.y + rect.height)
+ });
+
+ const convertHumanId = (humanId: string) => {
+ const human = imageData.humans.find(
+ (human) => human.uuid === humanId
+ );
+ const humanIndex = imageData.humans.findIndex(
+ (human) => human.uuid === humanId
+ );
+ return `${humanIndex}:${human.gender}:${human.type}`;
+ };
+
+ const getHumanIndex = (uuid: string) =>
+ imageData.humans.findIndex((human) => human.uuid === uuid);
+
+ const json: RectJSON = {
+ //@ts-ignore
+ img_path: imageData.fileData.path,
+ writer_id: AuthSelector.getUserID(),
+ version: 1,
+ human_info: imageData.humans.map((human) => ({
+ human_id: convertHumanId(human.uuid),
+ bounding_box: convertRect(
+ imageData.labelRects.find(
+ (labelRect) => labelRect.id === human.uuid
+ ).rect
+ ),
+ style: human.styles,
+ qc_status: human.qc_status,
+ qc_comment: human.qc_comment,
+ })),
+ item_info: imageData.items.map((item) => ({
+ item_id: `${getHumanIndex(item.humanId)}:${item.gender}:${
+ item.mainCategory
+ }:${item.subCategory}:${item.uuid}:${item.color}:${
+ item.pattern
+ }`,
+
+ bounding_box: convertRect(
+ imageData.labelRects.find(
+ (labelRect) => labelRect.id === item.uuid
+ ).rect
+ ),
+ style: item.styles,
+ qc_status: item.qc_status,
+ qc_comment: item.qc_comment,
+ }))
+ };
+ return json;
+ }
private static exportAsCSV(): void {
const content: string = LabelsSelector.getImagesData()
.map((imageData: ImageData) => {
- return RectLabelsExporter.wrapRectLabelsIntoCSV(imageData)})
+ return RectLabelsExporter.wrapRectLabelsIntoCSV(imageData);
+ })
.filter((imageLabelData: string) => {
- return !!imageLabelData})
+ return !!imageLabelData;
+ })
.join('\n');
const fileName: string = `${ExporterUtil.getExportFileName()}.csv`;
ExporterUtil.saveAs(content, fileName);
@@ -189,20 +333,26 @@ export class RectLabelsExporter {
const image: HTMLImageElement = ImageRepository.getById(imageData.id);
const labelNames: LabelName[] = LabelsSelector.getLabelNames();
- const labelRectsString: string[] = imageData.labelRects.map((labelRect: LabelRect) => {
- const labelName: LabelName = findLast(labelNames, {id: labelRect.labelId});
- const labelFields = !!labelName ? [
- labelName.name,
- Math.round(labelRect.rect.x).toString(),
- Math.round(labelRect.rect.y).toString(),
- Math.round(labelRect.rect.width).toString(),
- Math.round(labelRect.rect.height).toString(),
- imageData.fileData.name,
- image.width.toString(),
- image.height.toString()
- ] : [];
- return labelFields.join(',')
- });
+ const labelRectsString: string[] = imageData.labelRects.map(
+ (labelRect: LabelRect) => {
+ const labelName: LabelName = findLast(labelNames, {
+ id: labelRect.labelId
+ });
+ const labelFields = !!labelName
+ ? [
+ labelName.name,
+ Math.round(labelRect.rect.x).toString(),
+ Math.round(labelRect.rect.y).toString(),
+ Math.round(labelRect.rect.width).toString(),
+ Math.round(labelRect.rect.height).toString(),
+ imageData.fileData.name,
+ image.width.toString(),
+ image.height.toString()
+ ]
+ : [];
+ return labelFields.join(',');
+ }
+ );
return labelRectsString.join('\n');
}
}
diff --git a/src/logic/imageRepository/ImageRepository.ts b/src/logic/imageRepository/ImageRepository.ts
index fa819ef2..666b7840 100644
--- a/src/logic/imageRepository/ImageRepository.ts
+++ b/src/logic/imageRepository/ImageRepository.ts
@@ -1,6 +1,6 @@
-import {zip} from "lodash";
+import {zip} from 'lodash';
-export type ImageMap = { [s: string]: HTMLImageElement; };
+export type ImageMap = {[s: string]: HTMLImageElement};
export class ImageRepository {
private static repository: ImageMap = {};
@@ -12,10 +12,15 @@ export class ImageRepository {
public static storeImages(ids: string[], images: HTMLImageElement[]) {
zip(ids, images).forEach((pair: [string, HTMLImageElement]) => {
ImageRepository.storeImage(...pair);
- })
+ });
}
public static getById(uuid: string): HTMLImageElement {
+ // console.log(
+ // 'ImageRepository.repository = ',
+ // ImageRepository.repository
+ // );
+
return ImageRepository.repository[uuid];
}
-}
\ No newline at end of file
+}
diff --git a/src/logic/import/MJ/MJErrors.ts b/src/logic/import/MJ/MJErrors.ts
new file mode 100644
index 00000000..6bc1c02b
--- /dev/null
+++ b/src/logic/import/MJ/MJErrors.ts
@@ -0,0 +1,40 @@
+export class MJAnnotationsLoadingError extends Error {
+ constructor(message) {
+ super(message);
+ this.name = 'MJAnnotationsLoadingError';
+ }
+}
+
+export class MJLabelsReadingError extends MJAnnotationsLoadingError {
+ constructor() {
+ super(
+ 'Unexpected error occurred during reading label names from labels.txt file'
+ );
+ this.name = 'MJLabelsLoadingError';
+ }
+}
+
+export class NoLabelNamesFileProvidedError extends MJAnnotationsLoadingError {
+ constructor() {
+ super(
+ 'For MJ labels to be loaded correctly, labels.txt file is required'
+ );
+ this.name = 'NoLabelNamesFileProvidedError';
+ }
+}
+
+export class LabelNamesNotUniqueError extends MJAnnotationsLoadingError {
+ constructor() {
+ super('Label names listed in labels.txt file should be unique');
+ this.name = 'LabelNamesNotUniqueError';
+ }
+}
+
+export class AnnotationsParsingError extends MJAnnotationsLoadingError {
+ constructor(imageName: string) {
+ super(
+ `Unexpected error occurred during parsing of ${imageName} annotations file`
+ );
+ this.name = 'AnnotationsParsingError';
+ }
+}
diff --git a/src/logic/import/MJ/MJImporter.ts b/src/logic/import/MJ/MJImporter.ts
new file mode 100644
index 00000000..005662f5
--- /dev/null
+++ b/src/logic/import/MJ/MJImporter.ts
@@ -0,0 +1,178 @@
+import {AnnotationImporter} from '../AnnotationImporter';
+import {ImageData, LabelName} from '../../../store/labels/types';
+import {FileUtil} from '../../../utils/FileUtil';
+import {ArrayUtil} from '../../../utils/ArrayUtil';
+import {NoLabelNamesFileProvidedError} from './MJErrors';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {MJUtils} from './MJUtils';
+import {ImageDataUtil} from '../../../utils/ImageDataUtil';
+import {zip, find} from 'lodash';
+import {ImageRepository} from '../../imageRepository/ImageRepository';
+
+export type MJFilesSpec = {
+ labelNameFile: File;
+ annotationFiles: File[];
+};
+
+export class MJImporter extends AnnotationImporter {
+ private static labelsFileName: string = 'labels.txt';
+
+ public import(
+ filesData: File[],
+ onSuccess: (imagesData: ImageData[], labelNames: LabelName[]) => any,
+ onFailure: (error?: Error) => any
+ ): void {
+ try {
+ const sourceImagesData = LabelsSelector.getImagesData().map(
+ (i: ImageData) => ImageDataUtil.cleanAnnotations(i)
+ );
+ const {labelNameFile, annotationFiles} = MJImporter.filterFilesData(
+ filesData,
+ sourceImagesData
+ );
+ const [relevantImageData, relevantAnnotations] =
+ MJImporter.matchImagesWithAnnotations(
+ sourceImagesData,
+ annotationFiles
+ );
+ const labelNamesPromise: Promise = Promise.resolve([]);
+ // Cause we do not use label name in mj import
+ // FileUtil.readFile(
+ // labelNameFile
+ // ).then((fileContent: string) =>
+ // MJUtils.parseLabelsNamesFromString(fileContent)
+ // );
+ const missingImagesPromise: Promise =
+ ImageDataUtil.loadMissingImages(relevantImageData);
+ const annotationFilesPromise: Promise =
+ FileUtil.readFiles(relevantAnnotations);
+ Promise.all([
+ labelNamesPromise,
+ missingImagesPromise,
+ annotationFilesPromise
+ ])
+ .then((values: [LabelName[], void, string[]]) => {
+ const [labelNames, , annotationsRaw] = values;
+ const resultImageData = zip(
+ relevantImageData,
+ annotationsRaw
+ ).map((pair: [ImageData, string]) =>
+ MJImporter.applyAnnotations(
+ pair[0],
+ pair[1],
+ labelNames
+ )
+ );
+ onSuccess(
+ MJImporter.injectImageDataWithAnnotations(
+ sourceImagesData,
+ resultImageData
+ ),
+ labelNames
+ );
+ })
+ .catch((error: Error) => onFailure(error));
+ } catch (error) {
+ onFailure(error as Error);
+ }
+ }
+
+ public static filterFilesData(
+ filesData: File[],
+ imagesData: ImageData[]
+ ): MJFilesSpec {
+ const functionalityPartitionResult = ArrayUtil.partition(
+ filesData,
+ (i: File) => i.name === MJImporter.labelsFileName
+ );
+ // if (functionalityPartitionResult.pass.length !== 1) {
+ // throw new NoLabelNamesFileProvidedError();
+ // }
+ const imageIdentifiers: string[] = imagesData
+ .map((i: ImageData) => i.fileData.name)
+ .map((i: string) => FileUtil.extractFileName(i));
+ const matchingPartitionResult = ArrayUtil.partition(
+ filesData,
+ (i: File) =>
+ imageIdentifiers.includes(FileUtil.extractFileName(i.name))
+ );
+ return {
+ labelNameFile: functionalityPartitionResult.pass[0],
+ annotationFiles: matchingPartitionResult.pass
+ };
+ }
+
+ public static matchImagesWithAnnotations(
+ images: ImageData[],
+ annotations: File[]
+ ): [ImageData[], File[]] {
+ const predicate = (image: ImageData, annotation: File) => {
+ return (
+ FileUtil.extractFileName(image.fileData.name) ===
+ FileUtil.extractFileName(annotation.name)
+ );
+ };
+ return ArrayUtil.unzip(
+ ArrayUtil.match(images, annotations, predicate)
+ );
+ }
+
+ public static applyAnnotations(
+ imageData: ImageData,
+ rawAnnotations: string,
+ labelNames: LabelName[]
+ ): ImageData {
+ // console.log('rawAnnotation = ', rawAnnotations);
+
+ const image: HTMLImageElement = ImageRepository.getById(imageData.id);
+
+ const {labelRects, humans, items} = MJUtils.parseMJAnnotationsFromJSON(
+ rawAnnotations,
+ labelNames,
+ {
+ //@ts-ignore
+ width: imageData.fileData.width,
+ //@ts-ignore
+ height: imageData.fileData.height
+ },
+ imageData.fileData.name
+ );
+ imageData.labelRects = labelRects;
+ imageData.humans = humans;
+ imageData.items = items;
+
+ console.log('imageData = ', imageData);
+ return imageData;
+ }
+ public static applyAnnotationsFromFile(
+ imageData: ImageData,
+ rawAnnotations: string,
+ labelNames: LabelName[]
+ ): ImageData {
+ // console.log('rawAnnotation = ', rawAnnotations);
+
+ const image: HTMLImageElement = ImageRepository.getById(imageData.id);
+
+ const {labelRects, humans, items} = MJUtils.parseMJAnnotationsFromJSON(
+ rawAnnotations,
+ labelNames,
+ {width: image.width, height: image.height},
+ imageData.fileData.name
+ );
+ imageData.labelRects = labelRects;
+ imageData.humans = humans;
+ imageData.items = items;
+
+ console.log('imageData = ', imageData);
+ return imageData;
+ }
+ public static injectImageDataWithAnnotations(
+ sourceImageData: ImageData[],
+ annotatedImageData: ImageData[]
+ ): ImageData[] {
+ return sourceImageData.map((i: ImageData) => {
+ const result = find(annotatedImageData, {id: i.id});
+ return !!result ? result : i;
+ });
+ }
+}
diff --git a/src/logic/import/MJ/MJUtils.ts b/src/logic/import/MJ/MJUtils.ts
new file mode 100644
index 00000000..9d3b1ae3
--- /dev/null
+++ b/src/logic/import/MJ/MJUtils.ts
@@ -0,0 +1,182 @@
+import {
+ HumanInfo,
+ ItemInfo,
+ LabelName,
+ LabelRect,
+ RectJSON
+} from '../../../store/labels/types';
+import {LabelUtil} from '../../../utils/LabelUtil';
+import {AnnotationsParsingError, LabelNamesNotUniqueError} from './MJErrors';
+import {ISize} from '../../../interfaces/ISize';
+import _, {uniq} from 'lodash';
+import {v4 as uuidv4} from 'uuid';
+import {LabelModeType} from '../../../data/enums/LabelType';
+import {LabelStatus} from '../../../data/enums/LabelStatus';
+
+export class MJUtils {
+ public static parseLabelsNamesFromString(content: string): LabelName[] {
+ return [];
+ // const labelNames: string[] = content
+ // .split(/[\r\n]/)
+ // .filter(Boolean)
+ // .map((name: string) => name.replace(/\s/g, ''));
+
+ // if (uniq(labelNames).length !== labelNames.length) {
+ // throw new LabelNamesNotUniqueError();
+ // }
+
+ // return labelNames.map((name: string) =>
+ // LabelUtil.createLabelName(name)
+ // );
+ }
+
+ public static loadLabelsList(
+ fileData: File,
+ onSuccess: (labels: LabelName[]) => any,
+ onFailure: () => any
+ ) {
+ const reader = new FileReader();
+ reader.onloadend = function (evt: any) {
+ const content: string = evt.target.result;
+ const labelNames = MJUtils.parseLabelsNamesFromString(content);
+ onSuccess(labelNames);
+ };
+ reader.onerror = () => onFailure();
+ reader.readAsText(fileData);
+ }
+
+ public static parseMJAnnotationsFromJSON(
+ rawAnnotation: string | object,
+ labelNames: LabelName[],
+ imageSize: ISize,
+ imageName: string
+ ): {labelRects: LabelRect[]; humans: HumanInfo[]; items: ItemInfo[]} {
+ let annotation = rawAnnotation as RectJSON;
+ if (typeof rawAnnotation === 'string') {
+ annotation = JSON.parse(rawAnnotation) as RectJSON;
+ }
+ // console.log(131231, annotation)
+
+ const humansLabelRects: LabelRect[] = annotation.human_info.map(
+ (human) => {
+ const {lt_x, lt_y, rb_x, rb_y} = human.bounding_box;
+ const rectX: number = lt_x;
+ const rectY: number = lt_y;
+ const rectWidth: number = Math.abs(rb_x - lt_x);
+ const rectHeight: number = Math.abs(rb_y - lt_y);
+ const qc_status: string = human.qc_status
+ const qc_comment: string = human.qc_comment
+ // console.log('rect = ', rectX, rectY, rectWidth, rectHeight);
+ const rect = {
+ x: rectX,
+ y: rectY,
+ width: rectWidth,
+ height: rectHeight,
+ };
+ const aLabel = LabelUtil.createLabelRect(human.style[0], rect);
+ aLabel.mode = LabelModeType.HUMAN;
+ aLabel.qc_status = qc_status
+ aLabel.qc_comment = qc_comment
+ return aLabel;
+ }
+ );
+ const itemsLabelRects: LabelRect[] = annotation.item_info.map(
+ (item) => {
+ const {lt_x, lt_y, rb_x, rb_y} = item.bounding_box;
+ const rectX: number = lt_x;
+ const rectY: number = lt_y;
+ const rectWidth: number = Math.abs(rb_x - lt_x);
+ const rectHeight: number = Math.abs(rb_y - lt_y);
+ const qc_status: string = item.qc_status
+ const qc_comment: string = item.qc_comment
+ // console.log('rect = ', rectX, rectY, rectWidth, rectHeight);
+ const rect = {
+ x: rectX,
+ y: rectY,
+ width: rectWidth,
+ height: rectHeight
+ };
+
+ const aLabel = LabelUtil.createLabelRect(item.style[0], rect);
+ const [, , , , uuid, ,] = item.item_id.split(':');
+ aLabel.mode = LabelModeType.ITEM;
+ aLabel.id = uuid;
+ aLabel.qc_status = qc_status
+ aLabel.qc_comment = qc_comment
+ return aLabel;
+ }
+ );
+
+ const humans = annotation.human_info.map((human, humanIndex) => {
+ const [id, gender, type] = human.human_id.split(':');
+
+ return {
+ uuid: humansLabelRects[humanIndex].id,
+ id: parseInt(id),
+ gender: parseInt(gender),
+ type: parseInt(type),
+ styles: human.style,
+ qc_comment: human.qc_comment,
+ qc_status: human.qc_status
+ };
+ });
+ const items = annotation.item_info.map((item, itemIdx) => {
+ const [
+ humanIdx,
+ gender,
+ mainCategory,
+ subCategory,
+ uuid,
+ color,
+ pattern
+ ] = item.item_id.split(':');
+ return {
+ uuid,
+ id: itemIdx,
+ humanId:
+ humans.find((human) => human.id === parseInt(humanIdx))
+ ?.uuid || '-1',
+ gender: parseInt(gender),
+ mainCategory: parseInt(mainCategory),
+ subCategory: parseInt(subCategory),
+ color: parseInt(color),
+ pattern: parseInt(pattern),
+ styles: item.style,
+ qc_comment: item.qc_comment,
+ qc_status: item.qc_status
+ };
+ });
+
+ return {
+ labelRects: [...humansLabelRects, ...itemsLabelRects],
+ humans,
+ items
+ };
+ }
+
+ public static validateMJAnnotationComponents(
+ components: RectJSON,
+ labelNamesCount: number
+ ): boolean {
+ // const validateCoordinateValue = (rawValue: string): boolean => {
+ // const floatValue: number = Number(rawValue);
+ // return !isNaN(floatValue) && 0.0 <= floatValue && floatValue <= 1.0;
+ // };
+ // const validateLabelIdx = (rawValue: string): boolean => {
+ // const intValue: number = parseInt(rawValue);
+ // return (
+ // !isNaN(intValue) && 0 <= intValue && intValue < labelNamesCount
+ // );
+ // };
+
+ // return [
+ // components.length === 5,
+ // validateLabelIdx(components[0]),
+ // validateCoordinateValue(components[1]),
+ // validateCoordinateValue(components[2]),
+ // validateCoordinateValue(components[3]),
+ // validateCoordinateValue(components[4])
+ // ].every(Boolean);
+ return true;
+ }
+}
diff --git a/src/logic/render/BaseRenderEngine.ts b/src/logic/render/BaseRenderEngine.ts
index 1f07b9ae..c251011a 100644
--- a/src/logic/render/BaseRenderEngine.ts
+++ b/src/logic/render/BaseRenderEngine.ts
@@ -41,22 +41,40 @@ export abstract class BaseRenderEngine {
abstract isInProgress(): boolean;
- protected static resolveLabelLineColor(labelId: string, isActive: boolean): string {
- const perClassColor: boolean = GeneralSelector.getEnablePerClassColorationStatus();
+ protected static resolveLabelLineColor(
+ labelId: string,
+ isActive: boolean
+ ): string {
+ const perClassColor: boolean =
+ GeneralSelector.getEnablePerClassColorationStatus();
if (perClassColor) {
- const labelName: LabelName | null = LabelsSelector.getLabelNameById(labelId);
- return labelName ? labelName.color : RenderEngineSettings.DEFAULT_LINE_COLOR;
+ const labelName: LabelName | null =
+ LabelsSelector.getLabelNameById(labelId);
+ return labelName
+ ? labelName.color
+ : RenderEngineSettings.DEFAULT_LINE_COLOR;
} else {
- return isActive ? RenderEngineSettings.ACTIVE_LINE_COLOR : RenderEngineSettings.INACTIVE_LINE_COLOR;
+ return isActive
+ ? RenderEngineSettings.ACTIVE_LINE_COLOR
+ : RenderEngineSettings.INACTIVE_LINE_COLOR;
}
}
protected static resolveLabelAnchorColor(isActive: boolean): string {
- const perClassColor: boolean = GeneralSelector.getEnablePerClassColorationStatus();
+ const perClassColor: boolean =
+ GeneralSelector.getEnablePerClassColorationStatus();
if (perClassColor) {
return RenderEngineSettings.DEFAULT_ANCHOR_COLOR;
} else {
- return isActive ? RenderEngineSettings.ACTIVE_ANCHOR_COLOR : RenderEngineSettings.INACTIVE_ANCHOR_COLOR;
+ return isActive
+ ? RenderEngineSettings.ACTIVE_ANCHOR_COLOR
+ : RenderEngineSettings.INACTIVE_ANCHOR_COLOR;
}
}
+
+ protected static resolveLineColorByMode(mode: string): string {
+ return mode === 'HUMAN'
+ ? RenderEngineSettings.DEFAULT_HUMAN_LINE_COLOR
+ : RenderEngineSettings.DEFAULT_ITEM_LINE_COLOR;
+ }
}
diff --git a/src/logic/render/RectRenderEngine.ts b/src/logic/render/RectRenderEngine.ts
index 0a6b8e21..ec8f4b92 100644
--- a/src/logic/render/RectRenderEngine.ts
+++ b/src/logic/render/RectRenderEngine.ts
@@ -3,8 +3,14 @@ import {IRect} from '../../interfaces/IRect';
import {RectUtil} from '../../utils/RectUtil';
import {DrawUtil} from '../../utils/DrawUtil';
import {store} from '../..';
-import {ImageData, LabelRect} from '../../store/labels/types';
import {
+ HumanInfo,
+ ImageData,
+ ItemInfo,
+ LabelRect
+} from '../../store/labels/types';
+import {
+ updateActiveHumanID,
updateActiveLabelId,
updateFirstLabelCreatedFlag,
updateHighlightedLabelId,
@@ -19,14 +25,14 @@ import {LabelsSelector} from '../../store/selectors/LabelsSelector';
import {EditorData} from '../../data/EditorData';
import {BaseRenderEngine} from './BaseRenderEngine';
import {RenderEngineUtil} from '../../utils/RenderEngineUtil';
-import {LabelType} from '../../data/enums/LabelType';
+import {LabelModeType, LabelType} from '../../data/enums/LabelType';
import {EditorActions} from '../actions/EditorActions';
import {GeneralSelector} from '../../store/selectors/GeneralSelector';
import {LabelStatus} from '../../data/enums/LabelStatus';
import {LabelUtil} from '../../utils/LabelUtil';
+import {JSONUploadStatus} from '../../data/enums/JSONUploadStatus';
export class RectRenderEngine extends BaseRenderEngine {
-
// =================================================================================================================
// STATE
// =================================================================================================================
@@ -44,24 +50,49 @@ export class RectRenderEngine extends BaseRenderEngine {
// =================================================================================================================
public mouseDownHandler = (data: EditorData) => {
- const isMouseOverImage: boolean = RenderEngineUtil.isMouseOverImage(data);
- const isMouseOverCanvas: boolean = RenderEngineUtil.isMouseOverCanvas(data);
+ const isMouseOverImage: boolean =
+ RenderEngineUtil.isMouseOverImage(data);
+ const isMouseOverCanvas: boolean =
+ RenderEngineUtil.isMouseOverCanvas(data);
if (isMouseOverCanvas) {
const rectUnderMouse: LabelRect = this.getRectUnderMouse(data);
if (!!rectUnderMouse) {
- const rect: IRect = this.calculateRectRelativeToActiveImage(rectUnderMouse.rect, data);
- const anchorUnderMouse: RectAnchor = this.getAnchorUnderMouseByRect(rect, data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
- if (!!anchorUnderMouse && rectUnderMouse.status === LabelStatus.ACCEPTED) {
+ const rect: IRect = this.calculateRectRelativeToActiveImage(
+ rectUnderMouse.rect,
+ data
+ );
+ const anchorUnderMouse: RectAnchor =
+ this.getAnchorUnderMouseByRect(
+ rect,
+ data.mousePositionOnViewPortContent,
+ data.viewPortContentImageRect
+ );
+ if (
+ !!anchorUnderMouse &&
+ rectUnderMouse.status === LabelStatus.ACCEPTED
+ ) {
store.dispatch(updateActiveLabelId(rectUnderMouse.id));
+ store.dispatch(updateActiveHumanID(rectUnderMouse.id));
this.startRectResize(anchorUnderMouse);
} else {
- if (!!LabelsSelector.getHighlightedLabelId())
- store.dispatch(updateActiveLabelId(LabelsSelector.getHighlightedLabelId()));
- else
- this.startRectCreation(data.mousePositionOnViewPortContent);
+ if (!!LabelsSelector.getHighlightedLabelId()) {
+ store.dispatch(
+ updateActiveLabelId(
+ LabelsSelector.getHighlightedLabelId()
+ )
+ );
+ store.dispatch(
+ updateActiveHumanID(
+ LabelsSelector.getHighlightedLabelId()
+ )
+ );
+ } else {
+ this.startRectCreation(
+ data.mousePositionOnViewPortContent
+ );
+ }
}
} else if (isMouseOverImage) {
-
this.startRectCreation(data.mousePositionOnViewPortContent);
}
}
@@ -69,57 +100,110 @@ export class RectRenderEngine extends BaseRenderEngine {
public mouseUpHandler = (data: EditorData) => {
if (!!data.viewPortContentImageRect) {
- const mousePositionSnapped: IPoint = RectUtil.snapPointToRect(data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
- const activeLabelRect: LabelRect = LabelsSelector.getActiveRectLabel();
-
- if (!!this.startCreateRectPoint && !PointUtil.equals(this.startCreateRectPoint, mousePositionSnapped)) {
-
- const minX: number = Math.min(this.startCreateRectPoint.x, mousePositionSnapped.x);
- const minY: number = Math.min(this.startCreateRectPoint.y, mousePositionSnapped.y);
- const maxX: number = Math.max(this.startCreateRectPoint.x, mousePositionSnapped.x);
- const maxY: number = Math.max(this.startCreateRectPoint.y, mousePositionSnapped.y);
-
- const rect = {x: minX, y: minY, width: maxX - minX, height: maxY - minY};
- this.addRectLabel(RenderEngineUtil.transferRectFromImageToViewPortContent(rect, data));
+ const mousePositionSnapped: IPoint = RectUtil.snapPointToRect(
+ data.mousePositionOnViewPortContent,
+ data.viewPortContentImageRect
+ );
+ const activeLabelRect: LabelRect =
+ LabelsSelector.getActiveRectLabel();
+
+ if (
+ !!this.startCreateRectPoint &&
+ !PointUtil.equals(
+ this.startCreateRectPoint,
+ mousePositionSnapped
+ )
+ ) {
+ const minX: number = Math.min(
+ this.startCreateRectPoint.x,
+ mousePositionSnapped.x
+ );
+ const minY: number = Math.min(
+ this.startCreateRectPoint.y,
+ mousePositionSnapped.y
+ );
+ const maxX: number = Math.max(
+ this.startCreateRectPoint.x,
+ mousePositionSnapped.x
+ );
+ const maxY: number = Math.max(
+ this.startCreateRectPoint.y,
+ mousePositionSnapped.y
+ );
+
+ const rect = {
+ x: minX,
+ y: minY,
+ width: maxX - minX,
+ height: maxY - minY
+ };
+ this.addRectLabel(
+ RenderEngineUtil.transferRectFromImageToViewPortContent(
+ rect,
+ data
+ )
+ );
}
if (!!this.startResizeRectAnchor && !!activeLabelRect) {
- const rect: IRect = this.calculateRectRelativeToActiveImage(activeLabelRect.rect, data);
- const startAnchorPosition: IPoint = PointUtil.add(this.startResizeRectAnchor.position,
- data.viewPortContentImageRect);
- const delta: IPoint = PointUtil.subtract(mousePositionSnapped, startAnchorPosition);
- const resizeRect: IRect = RectUtil.resizeRect(rect, this.startResizeRectAnchor.type, delta);
- const scale: number = RenderEngineUtil.calculateImageScale(data);
+ const rect: IRect = this.calculateRectRelativeToActiveImage(
+ activeLabelRect.rect,
+ data
+ );
+ const startAnchorPosition: IPoint = PointUtil.add(
+ this.startResizeRectAnchor.position,
+ data.viewPortContentImageRect
+ );
+ const delta: IPoint = PointUtil.subtract(
+ mousePositionSnapped,
+ startAnchorPosition
+ );
+ const resizeRect: IRect = RectUtil.resizeRect(
+ rect,
+ this.startResizeRectAnchor.type,
+ delta
+ );
+ const scale: number =
+ RenderEngineUtil.calculateImageScale(data);
const scaledRect: IRect = RectUtil.scaleRect(resizeRect, scale);
const imageData = LabelsSelector.getActiveImageData();
- imageData.labelRects = imageData.labelRects.map((labelRect: LabelRect) => {
- if (labelRect.id === activeLabelRect.id) {
- return {
- ...labelRect,
- rect: scaledRect
- };
+ imageData.labelRects = imageData.labelRects.map(
+ (labelRect: LabelRect) => {
+ if (labelRect.id === activeLabelRect.id) {
+ return {
+ ...labelRect,
+ rect: scaledRect
+ };
+ }
+ return labelRect;
}
- return labelRect;
- });
+ );
+ imageData.uploadStatus = JSONUploadStatus.NEED_UPLOAD;
store.dispatch(updateImageDataById(imageData.id, imageData));
}
}
- this.endRectTransformation()
+ this.endRectTransformation();
};
public mouseMoveHandler = (data: EditorData) => {
- if (!!data.viewPortContentImageRect && !!data.mousePositionOnViewPortContent) {
- const isOverImage: boolean = RenderEngineUtil.isMouseOverImage(data);
+ if (
+ !!data.viewPortContentImageRect &&
+ !!data.mousePositionOnViewPortContent
+ ) {
+ const isOverImage: boolean =
+ RenderEngineUtil.isMouseOverImage(data);
if (isOverImage && !this.startResizeRectAnchor) {
const labelRect: LabelRect = this.getRectUnderMouse(data);
if (!!labelRect && !this.isInProgress()) {
- if (LabelsSelector.getHighlightedLabelId() !== labelRect.id) {
- store.dispatch(updateHighlightedLabelId(labelRect.id))
+ if (
+ LabelsSelector.getHighlightedLabelId() !== labelRect.id
+ ) {
+ store.dispatch(updateHighlightedLabelId(labelRect.id));
}
} else {
if (LabelsSelector.getHighlightedLabelId() !== null) {
- store.dispatch(updateHighlightedLabelId(null))
+ store.dispatch(updateHighlightedLabelId(null));
}
}
}
@@ -133,84 +217,189 @@ export class RectRenderEngine extends BaseRenderEngine {
public render(data: EditorData) {
const activeLabelId: string = LabelsSelector.getActiveLabelId();
const imageData: ImageData = LabelsSelector.getActiveImageData();
+ if (!data.realImageSize) return null;
if (imageData) {
imageData.labelRects.forEach((labelRect: LabelRect) => {
- if (labelRect.status === LabelStatus.ACCEPTED && labelRect.id === activeLabelId) {
- this.drawActiveRect(labelRect, data)
+ if (
+ labelRect.status === LabelStatus.ACCEPTED &&
+ labelRect.id === activeLabelId
+ ) {
+ this.drawActiveRect(labelRect, data);
} else {
this.drawInactiveRect(labelRect, data);
}
});
- this.drawCurrentlyCreatedRect(data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
+ this.drawCurrentlyCreatedRect(
+ data.mousePositionOnViewPortContent,
+ data.viewPortContentImageRect
+ );
this.updateCursorStyle(data);
}
}
private drawCurrentlyCreatedRect(mousePosition: IPoint, imageRect: IRect) {
if (!!this.startCreateRectPoint) {
- const mousePositionSnapped: IPoint = RectUtil.snapPointToRect(mousePosition, imageRect);
+ const mousePositionSnapped: IPoint = RectUtil.snapPointToRect(
+ mousePosition,
+ imageRect
+ );
const activeRect: IRect = {
x: this.startCreateRectPoint.x,
y: this.startCreateRectPoint.y,
width: mousePositionSnapped.x - this.startCreateRectPoint.x,
height: mousePositionSnapped.y - this.startCreateRectPoint.y
};
- const activeRectBetweenPixels = RenderEngineUtil.setRectBetweenPixels(activeRect);
- const lineColor: string = BaseRenderEngine.resolveLabelLineColor(null, true)
- DrawUtil.drawRect(this.canvas, activeRectBetweenPixels, lineColor, RenderEngineSettings.LINE_THICKNESS);
+ const activeRectBetweenPixels =
+ RenderEngineUtil.setRectBetweenPixels(activeRect);
+ const lineColor: string = BaseRenderEngine.resolveLabelLineColor(
+ null,
+ true
+ );
+ DrawUtil.drawRect(
+ this.canvas,
+ activeRectBetweenPixels,
+ lineColor,
+ RenderEngineSettings.LINE_THICKNESS
+ );
}
}
private drawInactiveRect(labelRect: LabelRect, data: EditorData) {
- const rectOnImage: IRect = RenderEngineUtil.transferRectFromViewPortContentToImage(labelRect.rect, data)
- const highlightedLabelId: string = LabelsSelector.getHighlightedLabelId()
- const displayAsActive: boolean = labelRect.status === LabelStatus.ACCEPTED && labelRect.id === highlightedLabelId;
- const lineColor: string = BaseRenderEngine.resolveLabelLineColor(labelRect.labelId, displayAsActive)
- const anchorColor: string = BaseRenderEngine.resolveLabelAnchorColor(displayAsActive);
- this.renderRect(rectOnImage, displayAsActive, lineColor, anchorColor);
+ const rectOnImage: IRect =
+ RenderEngineUtil.transferRectFromViewPortContentToImage(
+ labelRect.rect,
+ data
+ );
+ const highlightedLabelId: string =
+ LabelsSelector.getHighlightedLabelId();
+ const displayAsActive: boolean =
+ labelRect.status === LabelStatus.ACCEPTED &&
+ labelRect.id === highlightedLabelId;
+ const lineColor: string = BaseRenderEngine.resolveLineColorByMode(
+ labelRect.mode
+ );
+ const anchorColor: string =
+ BaseRenderEngine.resolveLabelAnchorColor(displayAsActive);
+ this.renderRect(
+ rectOnImage,
+ displayAsActive,
+ lineColor,
+ anchorColor,
+ GeneralSelector.getFillMode()
+ );
}
private drawActiveRect(labelRect: LabelRect, data: EditorData) {
- let rect: IRect = this.calculateRectRelativeToActiveImage(labelRect.rect, data);
+ let rect: IRect = this.calculateRectRelativeToActiveImage(
+ labelRect.rect,
+ data
+ );
if (!!this.startResizeRectAnchor) {
- const startAnchorPosition: IPoint = PointUtil.add(this.startResizeRectAnchor.position, data.viewPortContentImageRect);
- const endAnchorPositionSnapped: IPoint = RectUtil.snapPointToRect(data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
- const delta = PointUtil.subtract(endAnchorPositionSnapped, startAnchorPosition);
- rect = RectUtil.resizeRect(rect, this.startResizeRectAnchor.type, delta);
+ const startAnchorPosition: IPoint = PointUtil.add(
+ this.startResizeRectAnchor.position,
+ data.viewPortContentImageRect
+ );
+ const endAnchorPositionSnapped: IPoint = RectUtil.snapPointToRect(
+ data.mousePositionOnViewPortContent,
+ data.viewPortContentImageRect
+ );
+ const delta = PointUtil.subtract(
+ endAnchorPositionSnapped,
+ startAnchorPosition
+ );
+ rect = RectUtil.resizeRect(
+ rect,
+ this.startResizeRectAnchor.type,
+ delta
+ );
}
- const rectOnImage: IRect = RectUtil.translate(rect, data.viewPortContentImageRect);
- const lineColor: string = BaseRenderEngine.resolveLabelLineColor(labelRect.labelId, true)
- const anchorColor: string = BaseRenderEngine.resolveLabelAnchorColor(true);
- this.renderRect(rectOnImage, true, lineColor, anchorColor);
+ const rectOnImage: IRect = RectUtil.translate(
+ rect,
+ data.viewPortContentImageRect
+ );
+ const lineColor: string = BaseRenderEngine.resolveLabelLineColor(
+ labelRect.labelId,
+ true
+ );
+ const anchorColor: string =
+ BaseRenderEngine.resolveLabelAnchorColor(true);
+ this.renderRect(
+ rectOnImage,
+ true,
+ lineColor,
+ anchorColor,
+ GeneralSelector.getFillMode()
+ );
}
- private renderRect(rectOnImage: IRect, isActive: boolean, lineColor: string, anchorColor: string) {
- const rectBetweenPixels = RenderEngineUtil.setRectBetweenPixels(rectOnImage);
- DrawUtil.drawRectWithFill(this.canvas, rectBetweenPixels, DrawUtil.hexToRGB(lineColor, 0.2));
- DrawUtil.drawRect(this.canvas, rectBetweenPixels, lineColor, RenderEngineSettings.LINE_THICKNESS);
+ private renderRect(
+ rectOnImage: IRect,
+ isActive: boolean,
+ lineColor: string,
+ anchorColor: string,
+ fillMode: boolean
+ ) {
+ const rectBetweenPixels =
+ RenderEngineUtil.setRectBetweenPixels(rectOnImage);
+ if (fillMode) {
+ DrawUtil.drawRectWithFill(
+ this.canvas,
+ rectBetweenPixels,
+ DrawUtil.hexToRGB(lineColor, 0.2)
+ );
+ }
+ DrawUtil.drawRect(
+ this.canvas,
+ rectBetweenPixels,
+ lineColor,
+ RenderEngineSettings.LINE_THICKNESS
+ );
if (isActive) {
- const handleCenters: IPoint[] = RectUtil.mapRectToAnchors(rectOnImage).map((rectAnchor: RectAnchor) => rectAnchor.position);
+ const handleCenters: IPoint[] = RectUtil.mapRectToAnchors(
+ rectOnImage
+ ).map((rectAnchor: RectAnchor) => rectAnchor.position);
handleCenters.forEach((center: IPoint) => {
- const handleRect: IRect = RectUtil.getRectWithCenterAndSize(center, RenderEngineSettings.anchorSize);
- const handleRectBetweenPixels: IRect = RenderEngineUtil.setRectBetweenPixels(handleRect);
- DrawUtil.drawRectWithFill(this.canvas, handleRectBetweenPixels, anchorColor);
- })
+ const handleRect: IRect = RectUtil.getRectWithCenterAndSize(
+ center,
+ RenderEngineSettings.anchorSize
+ );
+ const handleRectBetweenPixels: IRect =
+ RenderEngineUtil.setRectBetweenPixels(handleRect);
+ DrawUtil.drawRectWithFill(
+ this.canvas,
+ handleRectBetweenPixels,
+ anchorColor
+ );
+ });
}
}
private updateCursorStyle(data: EditorData) {
- if (!!this.canvas && !!data.mousePositionOnViewPortContent && !GeneralSelector.getImageDragModeStatus()) {
+ if (
+ !!this.canvas &&
+ !!data.mousePositionOnViewPortContent &&
+ !GeneralSelector.getImageDragModeStatus()
+ ) {
const rectUnderMouse: LabelRect = this.getRectUnderMouse(data);
- const rectAnchorUnderMouse: RectAnchor = this.getAnchorUnderMouse(data);
- if ((!!rectAnchorUnderMouse && rectUnderMouse && rectUnderMouse.status === LabelStatus.ACCEPTED) || !!this.startResizeRectAnchor) {
+ const rectAnchorUnderMouse: RectAnchor =
+ this.getAnchorUnderMouse(data);
+ if (
+ (!!rectAnchorUnderMouse &&
+ rectUnderMouse &&
+ rectUnderMouse.status === LabelStatus.ACCEPTED) ||
+ !!this.startResizeRectAnchor
+ ) {
store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MOVE));
return;
- }
- else if (RenderEngineUtil.isMouseOverCanvas(data)) {
- if (!RenderEngineUtil.isMouseOverImage(data) && !!this.startCreateRectPoint)
- store.dispatch(updateCustomCursorStyle(CustomCursorStyle.MOVE));
- else
- RenderEngineUtil.wrapDefaultCursorStyleInCancel(data);
+ } else if (RenderEngineUtil.isMouseOverCanvas(data)) {
+ if (
+ !RenderEngineUtil.isMouseOverImage(data) &&
+ !!this.startCreateRectPoint
+ )
+ store.dispatch(
+ updateCustomCursorStyle(CustomCursorStyle.MOVE)
+ );
+ else RenderEngineUtil.wrapDefaultCursorStyleInCancel(data);
this.canvas.style.cursor = 'none';
} else {
this.canvas.style.cursor = 'default';
@@ -226,16 +415,48 @@ export class RectRenderEngine extends BaseRenderEngine {
return !!this.startCreateRectPoint || !!this.startResizeRectAnchor;
}
- private calculateRectRelativeToActiveImage(rect: IRect, data: EditorData):IRect {
+ private calculateRectRelativeToActiveImage(
+ rect: IRect,
+ data: EditorData
+ ): IRect {
const scale: number = RenderEngineUtil.calculateImageScale(data);
- return RectUtil.scaleRect(rect, 1/scale);
+ return RectUtil.scaleRect(rect, 1 / scale);
}
private addRectLabel = (rect: IRect) => {
const activeLabelId = LabelsSelector.getActiveLabelNameId();
const imageData: ImageData = LabelsSelector.getActiveImageData();
- const labelRect: LabelRect = LabelUtil.createLabelRect(activeLabelId, rect);
+ const labelRect: LabelRect = LabelUtil.createLabelRect(
+ activeLabelId,
+ rect
+ );
+ if (LabelsSelector.getActiveLabelMode() === LabelModeType.HUMAN) {
+ const humanInfo: HumanInfo = {
+ uuid: labelRect.id,
+ id: imageData.humans.length,
+ gender: LabelsSelector.getActiveGender(),
+ type: LabelsSelector.getActiveHumanType(),
+ styles: LabelsSelector.getActiveStyles()
+ };
+ imageData.humans.push(humanInfo);
+ store.dispatch(updateActiveHumanID(labelRect.id));
+ } else {
+ const itemInfo: ItemInfo = {
+ uuid: labelRect.id,
+ id: imageData.items.length,
+ humanId: LabelsSelector.getActiveHumanID(),
+ gender: LabelsSelector.getActiveGender(),
+ mainCategory: LabelsSelector.getActiveMainCategory(),
+ subCategory: LabelsSelector.getActiveSubCategory(),
+ color: LabelsSelector.getActiveColor(),
+ pattern: LabelsSelector.getActivePattern(),
+ styles: LabelsSelector.getActiveStyles()
+ };
+ imageData.items.push(itemInfo);
+ }
imageData.labelRects.push(labelRect);
+ imageData.uploadStatus = JSONUploadStatus.NEED_UPLOAD;
+
store.dispatch(updateImageDataById(imageData.id, imageData));
store.dispatch(updateFirstLabelCreatedFlag(true));
store.dispatch(updateActiveLabelId(labelRect.id));
@@ -243,11 +464,15 @@ export class RectRenderEngine extends BaseRenderEngine {
private getRectUnderMouse(data: EditorData): LabelRect {
const activeRectLabel: LabelRect = LabelsSelector.getActiveRectLabel();
- if (!!activeRectLabel && this.isMouseOverRectEdges(activeRectLabel.rect, data)) {
+ if (
+ !!activeRectLabel &&
+ this.isMouseOverRectEdges(activeRectLabel.rect, data)
+ ) {
return activeRectLabel;
}
- const labelRects: LabelRect[] = LabelsSelector.getActiveImageData().labelRects;
+ const labelRects: LabelRect[] =
+ LabelsSelector.getActiveImageData().labelRects;
for (let i = 0; i < labelRects.length; i++) {
if (this.isMouseOverRectEdges(labelRects[i].rect, data)) {
return labelRects[i];
@@ -258,7 +483,9 @@ export class RectRenderEngine extends BaseRenderEngine {
private isMouseOverRectEdges(rect: IRect, data: EditorData): boolean {
const rectOnImage: IRect = RectUtil.translate(
- this.calculateRectRelativeToActiveImage(rect, data), data.viewPortContentImageRect);
+ this.calculateRectRelativeToActiveImage(rect, data),
+ data.viewPortContentImageRect
+ );
const outerRectDelta: IPoint = {
x: RenderEngineSettings.anchorHoverSize.width / 2,
@@ -267,20 +494,41 @@ export class RectRenderEngine extends BaseRenderEngine {
const outerRect: IRect = RectUtil.expand(rectOnImage, outerRectDelta);
const innerRectDelta: IPoint = {
- x: - RenderEngineSettings.anchorHoverSize.width / 2,
- y: - RenderEngineSettings.anchorHoverSize.height / 2
+ x: -RenderEngineSettings.anchorHoverSize.width / 2,
+ y: -RenderEngineSettings.anchorHoverSize.height / 2
};
const innerRect: IRect = RectUtil.expand(rectOnImage, innerRectDelta);
- return (RectUtil.isPointInside(outerRect, data.mousePositionOnViewPortContent) &&
- !RectUtil.isPointInside(innerRect, data.mousePositionOnViewPortContent));
+ return (
+ RectUtil.isPointInside(
+ outerRect,
+ data.mousePositionOnViewPortContent
+ ) &&
+ !RectUtil.isPointInside(
+ innerRect,
+ data.mousePositionOnViewPortContent
+ )
+ );
}
- private getAnchorUnderMouseByRect(rect: IRect, mousePosition: IPoint, imageRect: IRect): RectAnchor {
+ private getAnchorUnderMouseByRect(
+ rect: IRect,
+ mousePosition: IPoint,
+ imageRect: IRect
+ ): RectAnchor {
const rectAnchors: RectAnchor[] = RectUtil.mapRectToAnchors(rect);
for (let i = 0; i < rectAnchors.length; i++) {
- const anchorRect: IRect = RectUtil.translate(RectUtil.getRectWithCenterAndSize(rectAnchors[i].position, RenderEngineSettings.anchorHoverSize), imageRect);
- if (!!mousePosition && RectUtil.isPointInside(anchorRect, mousePosition)) {
+ const anchorRect: IRect = RectUtil.translate(
+ RectUtil.getRectWithCenterAndSize(
+ rectAnchors[i].position,
+ RenderEngineSettings.anchorHoverSize
+ ),
+ imageRect
+ );
+ if (
+ !!mousePosition &&
+ RectUtil.isPointInside(anchorRect, mousePosition)
+ ) {
return rectAnchors[i];
}
}
@@ -288,10 +536,18 @@ export class RectRenderEngine extends BaseRenderEngine {
}
private getAnchorUnderMouse(data: EditorData): RectAnchor {
- const labelRects: LabelRect[] = LabelsSelector.getActiveImageData().labelRects;
+ const labelRects: LabelRect[] =
+ LabelsSelector.getActiveImageData().labelRects;
for (let i = 0; i < labelRects.length; i++) {
- const rect: IRect = this.calculateRectRelativeToActiveImage(labelRects[i].rect, data);
- const rectAnchor = this.getAnchorUnderMouseByRect(rect, data.mousePositionOnViewPortContent, data.viewPortContentImageRect);
+ const rect: IRect = this.calculateRectRelativeToActiveImage(
+ labelRects[i].rect,
+ data
+ );
+ const rectAnchor = this.getAnchorUnderMouseByRect(
+ rect,
+ data.mousePositionOnViewPortContent,
+ data.viewPortContentImageRect
+ );
if (!!rectAnchor) return rectAnchor;
}
return null;
diff --git a/src/services/API.ts b/src/services/API.ts
new file mode 100644
index 00000000..7a2075e5
--- /dev/null
+++ b/src/services/API.ts
@@ -0,0 +1,125 @@
+import {string} from '@tensorflow/tfjs-core';
+import axios from 'axios';
+import {Settings} from '../settings/Settings';
+import {AuthSelector} from '../store/selectors/AuthSelector';
+
+export class APIService {
+ private static token = null;
+
+ public static login = async ({
+ email,
+ password
+ }: {
+ email: string;
+ password: string;
+ }) => {
+ return await axios({
+ method: 'post',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ url: `${Settings.API_PREFIX}/login`,
+ data: {id: email, password}
+ });
+ };
+
+ public static fetchImages = async ({
+ offset,
+ limit
+ }: {
+ offset: number;
+ limit: number;
+ }) => {
+ const token = AuthSelector.getToken();
+ if (!token) {
+ throw Error('Token is required');
+ }
+ return await axios({
+ method: 'get',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ url: `${Settings.API_PREFIX}/labeler/images`,
+ params: {limit, offset}
+ });
+ };
+
+ public static updateImage = async ({
+ imageId,
+ json
+ }: {
+ imageId: string;
+ json: string;
+ }) => {
+ const token = AuthSelector.getToken();
+ // console.log('token = ', token);
+ console.log('json = ', json);
+ console.log('imageId = ', imageId);
+ if (!token) {
+ throw Error('Token is required');
+ }
+ if (!imageId) {
+ throw Error('ImageId is required');
+ }
+ if (!json) {
+ throw Error('JSON is required');
+ }
+ return await axios({
+ method: 'put',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ url: `${Settings.API_PREFIX}/labeler/images/${imageId}`,
+ data: {
+ json
+ }
+ });
+ };
+
+ public static getTasks = async () => {
+ const token = AuthSelector.getToken();
+ if (!token) {
+ throw Error('Token is required');
+ }
+ return await axios({
+ method: 'get',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ url: `${Settings.API_PREFIX}/labeler/tasks`
+ });
+ };
+
+ public static getTaskStatus = async () => {
+ const token = AuthSelector.getToken();
+ if (!token) {
+ throw Error('Token is required');
+ }
+ return await axios({
+ method: 'get',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ url: `${Settings.API_PREFIX}/labeler/taskStatus`
+ });
+ };
+
+ public static getSummary = async () => {
+ const token = AuthSelector.getToken();
+ if (!token) {
+ throw Error('Token is required');
+ }
+ return await axios({
+ method: 'get',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`
+ },
+ url: `${Settings.API_PREFIX}/labeler/common_summary`
+ });
+ };
+}
diff --git a/src/services/types.ts b/src/services/types.ts
new file mode 100644
index 00000000..4a9846ab
--- /dev/null
+++ b/src/services/types.ts
@@ -0,0 +1,12 @@
+export type APIImageData = {
+ image_id: string;
+ image_url: string;
+ style_list: {
+ seq: string;
+ name: string;
+ }[];
+ labeling_json?: string;
+ image_width: string;
+ image_height: string;
+ image_status: string;
+};
diff --git a/src/settings/RenderEngineSettings.ts b/src/settings/RenderEngineSettings.ts
index 91c05c4e..68359931 100644
--- a/src/settings/RenderEngineSettings.ts
+++ b/src/settings/RenderEngineSettings.ts
@@ -20,13 +20,19 @@ export class RenderEngineSettings {
height: 100
};
public static readonly defaultAnchorColor: string = '#ffffff';
- public static readonly inactiveAnchorColor: string = Settings.DARK_THEME_SECOND_COLOR;
+ public static readonly inactiveAnchorColor: string =
+ Settings.DARK_THEME_SECOND_COLOR;
public static readonly DEFAULT_ANCHOR_COLOR: string = '#ffffff';
- public static readonly ACTIVE_ANCHOR_COLOR: string = Settings.SECONDARY_COLOR;
- public static readonly INACTIVE_ANCHOR_COLOR: string = Settings.DARK_THEME_SECOND_COLOR;
+ public static readonly ACTIVE_ANCHOR_COLOR: string =
+ Settings.SECONDARY_COLOR;
+ public static readonly INACTIVE_ANCHOR_COLOR: string =
+ Settings.DARK_THEME_SECOND_COLOR;
- public static readonly DEFAULT_LINE_COLOR: string = '#ffffff';
+ public static readonly DEFAULT_LINE_COLOR: string = '#00ff00';
public static readonly ACTIVE_LINE_COLOR: string = Settings.PRIMARY_COLOR;
public static readonly INACTIVE_LINE_COLOR: string = '#ffffff';
+
+ public static readonly DEFAULT_HUMAN_LINE_COLOR: string = '#0000cc';
+ public static readonly DEFAULT_ITEM_LINE_COLOR: string = '#cc0000';
}
diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts
index 891560aa..e8be4ebe 100644
--- a/src/settings/Settings.ts
+++ b/src/settings/Settings.ts
@@ -1,19 +1,33 @@
-import {PopupWindowType} from '../data/enums/PopupWindowType';
+import { PopupWindowType } from '../data/enums/PopupWindowType';
export class Settings {
public static readonly GITHUB_URL: string = 'https://github.com/SkalskiP';
- public static readonly MEDIUM_URL: string = 'https://medium.com/@piotr.skalski92';
- public static readonly PATREON_URL: string = 'https://www.patreon.com/make_sense';
+ public static readonly MEDIUM_URL: string =
+ 'https://medium.com/@piotr.skalski92';
+ public static readonly PATREON_URL: string =
+ 'https://www.patreon.com/make_sense';
public static readonly TOP_NAVIGATION_BAR_HEIGHT_PX: number = 35;
- public static readonly EDITOR_BOTTOM_NAVIGATION_BAR_HEIGHT_PX: number = 40 + 1;
+ public static readonly EDITOR_BOTTOM_NAVIGATION_BAR_HEIGHT_PX: number =
+ 40 + 1;
public static readonly EDITOR_TOP_NAVIGATION_BAR_HEIGHT_PX: number = 40 + 1;
public static readonly SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX: number = 23 + 1;
- public static readonly SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX: number = Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX + 300 + 1;
+ public static readonly SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX: number =
+ Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX + 200 + 1;
+ public static readonly GUIDE_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX: number =
+ 23 + 1;
+ public static readonly GUIDE_SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX: number =
+ Settings.GUIDE_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX + 200 + 1;
+
+ public static readonly LABEL_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX: number =
+ 23 + 1;
+ public static readonly LABEL_SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX: number =
+ Settings.GUIDE_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX + 300 + 1;
+
public static readonly TOOLKIT_TAB_HEIGHT_PX: number = 40;
public static readonly TOOLBOX_PANEL_WIDTH_PX: number = 50 + 1;
- public static readonly EDITOR_MIN_WIDTH: number = 900;
+ public static readonly EDITOR_MIN_WIDTH: number = 400;
public static readonly EDITOR_MIN_HEIGHT: number = 500;
public static readonly PRIMARY_COLOR: string = '#2af598';
@@ -59,5 +73,12 @@ export class Settings {
'#cb38ff',
'#ff95c8',
'#ff37c7'
- ]
+ ];
+
+ public static readonly API_PREFIX =
+ process.env.REACT_APP_API_URL || 'https://dev.ocmg.vn/showniq/api/backoffice'
+ // 'https://dev.ocmg.vn/fs-app/api/backoffice';
+
+ public static readonly UNKNOWN_URL = 'guides/icons/unknown.png';
+ public static readonly UNKNOWN_S_URL = 'guides/icons/unknown_s.png';
}
diff --git a/src/settings/_Settings.scss b/src/settings/_Settings.scss
index 73c71b48..0b592f40 100644
--- a/src/settings/_Settings.scss
+++ b/src/settings/_Settings.scss
@@ -5,11 +5,15 @@ $darkThemeForthColor: #262c2f;
$primaryColor: #2af598;
$secondaryColor: #009efd;
-
+$dangerColor: #FF0006;
+$lightSuccess: #00ff21;
+$successColor: #2DBBA6;
$topNavigationBarHeight: 35px;
$stateBarHeight: 2px;
$sideNavigationBarCompanionWidth: 23px;
-$sideNavigationBarContentWidth: 300px;
+$sideNavigationBarContentWidth: 200px;
+$sideNavigationBarContentWidthForGuide: 200px;
+$sideNavigationBarContentWidthForLabel: 300px;
$editorBottomNavigationBarHeight: 40px;
$editorTopNavigationBarHeight: 40px;
-$toolboxWidth: 50px;
\ No newline at end of file
+$toolboxWidth: 50px;
diff --git a/src/store/Actions.ts b/src/store/Actions.ts
index c5c10e43..8f36e19f 100644
--- a/src/store/Actions.ts
+++ b/src/store/Actions.ts
@@ -17,6 +17,7 @@ export enum Action {
UPDATE_CROSS_HAIR_VISIBLE_STATUS = '@@UPDATE_CROSS_HAIR_VISIBLE_STATUS',
UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS = '@@UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS',
UPDATE_ZOOM = '@@UPDATE_ZOOM',
+ UPDATE_FILL_MODE = '@@UPDATE_FILL_MODE',
// LABELS
UPDATE_ACTIVE_IMAGE_INDEX = '@@UPDATE_ACTIVE_IMAGE_INDEX',
@@ -30,7 +31,26 @@ export enum Action {
UPDATE_LABEL_NAMES = '@@UPDATE_LABEL_NAMES',
UPDATE_FIRST_LABEL_CREATED_FLAG = '@@UPDATE_FIRST_LABEL_CREATED_FLAG',
+ // LABEL MODE
+ UPDATE_ACTIVE_LABEL_MODE = '@@UPDATE_ACTIVE_LABEL_MODE',
+ UPDATE_ACTIVE_GENDER = '@@UPDATE_ACTIVE_GENDER',
+ UPDATE_ACTIVE_HUMAN_TYPE = '@@UPDATE_ACTIVE_HUMAN_TYPE',
+ UPDATE_ACTIVE_STYLES = '@@UPDATE_ACTIVE_STYLES',
+ UPDATE_ACTIVE_HUMAN_ID = '@@UPDATE_ACTIVE_HUMAN_ID',
+ UPDATE_ACTIVE_MAIN_CATEGORY = '@@UPDATE_ACTIVE_MAIN_CATEGORY',
+ UPDATE_ACTIVE_SUB_CATEGORY = '@@UPDATE_ACTIVE_SUB_CATEGORY',
+ UPDATE_ACTIVE_COLOR = '@@UPDATE_ACTIVE_COLOR',
+ UPDATE_ACTIVE_PATTERN = '@@UPDATE_ACTIVE_PATTERN',
+
// NOTIFICATIONS
SUBMIT_NEW_NOTIFICATION = '@@SUBMIT_NEW_NOTIFICATION',
- DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID'
+ DELETE_NOTIFICATION_BY_ID = '@@DELETE_NOTIFICATION_BY_ID',
+
+ // AUTH
+ UPDATE_AUTH_DATA = '@@UPDATE_AUTH_DATA',
+
+ // PERFORMANCE
+ UPDATE_TASK_STATUS_DATA = '@@UPDATE_TASK_STATUS_DATA',
+ UPDATE_TASKS_DATA = '@@UPDATE_TASKS_DATA',
+ UPDATE_COMMON_SUMMARY_DATA = '@@UPDATE_COMMON_SUMMARY_DATA'
}
diff --git a/src/store/auth/actionCreators.ts b/src/store/auth/actionCreators.ts
new file mode 100644
index 00000000..5da429e0
--- /dev/null
+++ b/src/store/auth/actionCreators.ts
@@ -0,0 +1,11 @@
+import {AuthActionTypes, AuthData} from './types';
+import {Action} from '../Actions';
+
+export function updateAuthData(authData: AuthData): AuthActionTypes {
+ return {
+ type: Action.UPDATE_AUTH_DATA,
+ payload: {
+ authData
+ }
+ };
+}
diff --git a/src/store/auth/reducer.ts b/src/store/auth/reducer.ts
new file mode 100644
index 00000000..eff72c14
--- /dev/null
+++ b/src/store/auth/reducer.ts
@@ -0,0 +1,27 @@
+import {AuthActionTypes, AuthState} from './types';
+import {Action} from '../Actions';
+
+const initialState: AuthState = {
+ authData: {
+ displayName: null,
+ role: null,
+ email: null,
+ authToken: null
+ }
+};
+
+export function authReducer(
+ state = initialState,
+ action: AuthActionTypes
+): AuthState {
+ switch (action.type) {
+ case Action.UPDATE_AUTH_DATA: {
+ return {
+ ...state,
+ authData: action.payload.authData
+ };
+ }
+ default:
+ return state;
+ }
+}
diff --git a/src/store/auth/types.ts b/src/store/auth/types.ts
new file mode 100644
index 00000000..5efc8190
--- /dev/null
+++ b/src/store/auth/types.ts
@@ -0,0 +1,21 @@
+import {Action} from '../Actions';
+
+export type AuthData = {
+ displayName: string;
+ email: string;
+ role: string;
+ authToken: string;
+};
+
+export type AuthState = {
+ authData: AuthData;
+};
+
+interface UpdateAuthData {
+ type: typeof Action.UPDATE_AUTH_DATA;
+ payload: {
+ authData: AuthData;
+ };
+}
+
+export type AuthActionTypes = UpdateAuthData;
diff --git a/src/store/general/actionCreators.ts b/src/store/general/actionCreators.ts
index c182e78d..ecdc9284 100644
--- a/src/store/general/actionCreators.ts
+++ b/src/store/general/actionCreators.ts
@@ -9,71 +9,94 @@ export function updateWindowSize(windowSize: ISize): GeneralActionTypes {
return {
type: Action.UPDATE_WINDOW_SIZE,
payload: {
- windowSize,
- },
+ windowSize
+ }
};
}
-export function updateActivePopupType(activePopupType: PopupWindowType): GeneralActionTypes {
+export function updateActivePopupType(
+ activePopupType: PopupWindowType
+): GeneralActionTypes {
return {
type: Action.UPDATE_ACTIVE_POPUP_TYPE,
payload: {
- activePopupType,
+ activePopupType
}
- }
+ };
}
-export function updateCustomCursorStyle(customCursorStyle: CustomCursorStyle): GeneralActionTypes {
+export function updateCustomCursorStyle(
+ customCursorStyle: CustomCursorStyle
+): GeneralActionTypes {
return {
type: Action.UPDATE_CUSTOM_CURSOR_STYLE,
payload: {
- customCursorStyle,
+ customCursorStyle
}
- }
+ };
}
-export function updateActiveContext(activeContext: ContextType): GeneralActionTypes {
+export function updateActiveContext(
+ activeContext: ContextType
+): GeneralActionTypes {
return {
type: Action.UPDATE_CONTEXT,
payload: {
- activeContext,
- },
+ activeContext
+ }
};
}
-export function updatePreventCustomCursorStatus(preventCustomCursor: boolean): GeneralActionTypes {
+export function updatePreventCustomCursorStatus(
+ preventCustomCursor: boolean
+): GeneralActionTypes {
return {
type: Action.UPDATE_PREVENT_CUSTOM_CURSOR_STATUS,
payload: {
- preventCustomCursor,
- },
+ preventCustomCursor
+ }
};
}
-export function updateImageDragModeStatus(imageDragMode: boolean): GeneralActionTypes {
+export function updateImageDragModeStatus(
+ imageDragMode: boolean
+): GeneralActionTypes {
return {
type: Action.UPDATE_IMAGE_DRAG_MODE_STATUS,
payload: {
- imageDragMode,
- },
+ imageDragMode
+ }
};
}
-export function updateCrossHairVisibleStatus(crossHairVisible: boolean): GeneralActionTypes {
+export function updateCrossHairVisibleStatus(
+ crossHairVisible: boolean
+): GeneralActionTypes {
return {
type: Action.UPDATE_CROSS_HAIR_VISIBLE_STATUS,
payload: {
- crossHairVisible,
- },
+ crossHairVisible
+ }
+ };
+}
+
+export function updateFillMode(fillMode: boolean): GeneralActionTypes {
+ return {
+ type: Action.UPDATE_FILL_MODE,
+ payload: {
+ fillMode
+ }
};
}
-export function updateProjectData(projectData: ProjectData): GeneralActionTypes {
+export function updateProjectData(
+ projectData: ProjectData
+): GeneralActionTypes {
return {
type: Action.UPDATE_PROJECT_DATA,
payload: {
- projectData,
- },
+ projectData
+ }
};
}
@@ -81,16 +104,18 @@ export function updateZoom(zoom: number): GeneralActionTypes {
return {
type: Action.UPDATE_ZOOM,
payload: {
- zoom,
- },
+ zoom
+ }
};
}
-export function updatePerClassColorationStatus(enablePerClassColoration: boolean): GeneralActionTypes {
+export function updatePerClassColorationStatus(
+ enablePerClassColoration: boolean
+): GeneralActionTypes {
return {
type: Action.UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS,
payload: {
- enablePerClassColoration,
- },
+ enablePerClassColoration
+ }
};
}
diff --git a/src/store/general/reducer.ts b/src/store/general/reducer.ts
index 4efc9fcf..ba111793 100644
--- a/src/store/general/reducer.ts
+++ b/src/store/general/reducer.ts
@@ -2,6 +2,7 @@ import {GeneralActionTypes, GeneralState} from './types';
import {Action} from '../Actions';
import {CustomCursorStyle} from '../../data/enums/CustomCursorStyle';
import {ViewPointSettings} from '../../settings/ViewPointSettings';
+import {PopupWindowType} from '../../data/enums/PopupWindowType';
const initialState: GeneralState = {
windowSize: null,
@@ -14,9 +15,10 @@ const initialState: GeneralState = {
enablePerClassColoration: true,
projectData: {
type: null,
- name: 'my-project-name',
+ name: 'my-project-name'
},
- zoom: ViewPointSettings.MIN_ZOOM
+ zoom: ViewPointSettings.MIN_ZOOM,
+ fillMode: true
};
export function generalReducer(
@@ -28,61 +30,68 @@ export function generalReducer(
return {
...state,
windowSize: action.payload.windowSize
- }
+ };
}
case Action.UPDATE_ACTIVE_POPUP_TYPE: {
return {
...state,
activePopupType: action.payload.activePopupType
- }
+ };
}
case Action.UPDATE_CUSTOM_CURSOR_STYLE: {
return {
...state,
customCursorStyle: action.payload.customCursorStyle
- }
+ };
}
case Action.UPDATE_CONTEXT: {
return {
...state,
activeContext: action.payload.activeContext
- }
+ };
}
case Action.UPDATE_PREVENT_CUSTOM_CURSOR_STATUS: {
return {
...state,
preventCustomCursor: action.payload.preventCustomCursor
- }
+ };
}
case Action.UPDATE_IMAGE_DRAG_MODE_STATUS: {
return {
...state,
imageDragMode: action.payload.imageDragMode
- }
+ };
}
case Action.UPDATE_CROSS_HAIR_VISIBLE_STATUS: {
return {
...state,
crossHairVisible: action.payload.crossHairVisible
- }
+ };
}
case Action.UPDATE_PROJECT_DATA: {
return {
...state,
projectData: action.payload.projectData
- }
+ };
}
case Action.UPDATE_ZOOM: {
return {
...state,
zoom: action.payload.zoom
- }
+ };
}
case Action.UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS: {
return {
...state,
- enablePerClassColoration: action.payload.enablePerClassColoration
- }
+ enablePerClassColoration:
+ action.payload.enablePerClassColoration
+ };
+ }
+ case Action.UPDATE_FILL_MODE: {
+ return {
+ ...state,
+ fillMode: action.payload.fillMode
+ };
}
default:
return state;
diff --git a/src/store/general/types.ts b/src/store/general/types.ts
index ec97a9b1..bdae1ddd 100644
--- a/src/store/general/types.ts
+++ b/src/store/general/types.ts
@@ -7,8 +7,8 @@ import {ProjectType} from '../../data/enums/ProjectType';
export type ProjectData = {
type: ProjectType;
- name: string,
-}
+ name: string;
+};
export type GeneralState = {
windowSize: ISize;
@@ -21,79 +21,88 @@ export type GeneralState = {
activeContext: ContextType;
projectData: ProjectData;
zoom: number;
-}
+ fillMode: boolean;
+};
interface UpdateProjectData {
type: typeof Action.UPDATE_PROJECT_DATA;
payload: {
projectData: ProjectData;
- }
+ };
}
interface UpdateWindowSize {
type: typeof Action.UPDATE_WINDOW_SIZE;
payload: {
windowSize: ISize;
- }
+ };
}
interface UpdateActivePopupType {
type: typeof Action.UPDATE_ACTIVE_POPUP_TYPE;
payload: {
activePopupType: PopupWindowType;
- }
+ };
}
interface UpdateCustomCursorStyle {
type: typeof Action.UPDATE_CUSTOM_CURSOR_STYLE;
payload: {
customCursorStyle: CustomCursorStyle;
- }
+ };
}
interface UpdateActiveContext {
type: typeof Action.UPDATE_CONTEXT;
payload: {
activeContext: ContextType;
- }
+ };
}
interface UpdatePreventCustomCursorStatus {
type: typeof Action.UPDATE_PREVENT_CUSTOM_CURSOR_STATUS;
payload: {
preventCustomCursor: boolean;
- }
+ };
}
interface UpdateImageDragModeStatus {
type: typeof Action.UPDATE_IMAGE_DRAG_MODE_STATUS;
payload: {
imageDragMode: boolean;
- }
+ };
}
interface UpdateCrossHairVisibleStatus {
type: typeof Action.UPDATE_CROSS_HAIR_VISIBLE_STATUS;
payload: {
crossHairVisible: boolean;
- }
+ };
}
interface UpdateZoom {
- type: typeof Action.UPDATE_ZOOM,
+ type: typeof Action.UPDATE_ZOOM;
payload: {
zoom: number;
- }
+ };
}
interface UpdatePerClassColoration {
- type: typeof Action.UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS,
+ type: typeof Action.UPDATE_ENABLE_PER_CLASS_COLORATION_STATUS;
payload: {
enablePerClassColoration: boolean;
- }
+ };
+}
+
+interface UpdateFillMode {
+ type: typeof Action.UPDATE_FILL_MODE;
+ payload: {
+ fillMode: boolean;
+ };
}
-export type GeneralActionTypes = UpdateProjectData
+export type GeneralActionTypes =
+ | UpdateProjectData
| UpdateWindowSize
| UpdateActivePopupType
| UpdateCustomCursorStyle
@@ -103,3 +112,4 @@ export type GeneralActionTypes = UpdateProjectData
| UpdateCrossHairVisibleStatus
| UpdateZoom
| UpdatePerClassColoration
+ | UpdateFillMode;
diff --git a/src/store/index.ts b/src/store/index.ts
index 458650b7..e02b09f5 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,14 +1,18 @@
-import { combineReducers } from 'redux';
+import {combineReducers} from 'redux';
import {labelsReducer} from './labels/reducer';
import {generalReducer} from './general/reducer';
import {aiReducer} from './ai/reducer';
import {notificationsReducer} from './notifications/reducer';
+import {authReducer} from './auth/reducer';
+import {performanceReducer} from './performance/reducer';
export const rootReducer = combineReducers({
general: generalReducer,
labels: labelsReducer,
ai: aiReducer,
- notifications: notificationsReducer
+ notifications: notificationsReducer,
+ auth: authReducer,
+ performance: performanceReducer
});
export type AppState = ReturnType;
diff --git a/src/store/labels/actionCreators.ts b/src/store/labels/actionCreators.ts
index b66f87df..e4db86c3 100644
--- a/src/store/labels/actionCreators.ts
+++ b/src/store/labels/actionCreators.ts
@@ -1,22 +1,26 @@
import {LabelsActionTypes, ImageData, LabelName} from './types';
import {Action} from '../Actions';
-import {LabelType} from '../../data/enums/LabelType';
+import {LabelType, LabelModeType} from '../../data/enums/LabelType';
-export function updateActiveImageIndex(activeImageIndex: number): LabelsActionTypes {
+export function updateActiveImageIndex(
+ activeImageIndex: number
+): LabelsActionTypes {
return {
type: Action.UPDATE_ACTIVE_IMAGE_INDEX,
payload: {
- activeImageIndex,
- },
+ activeImageIndex
+ }
};
}
-export function updateActiveLabelNameId(activeLabelNameId: string): LabelsActionTypes {
+export function updateActiveLabelNameId(
+ activeLabelNameId: string
+): LabelsActionTypes {
return {
type: Action.UPDATE_ACTIVE_LABEL_NAME_ID,
payload: {
- activeLabelNameId,
- },
+ activeLabelNameId
+ }
};
}
@@ -24,36 +28,43 @@ export function updateActiveLabelId(activeLabelId: string): LabelsActionTypes {
return {
type: Action.UPDATE_ACTIVE_LABEL_ID,
payload: {
- activeLabelId,
- },
+ activeLabelId
+ }
};
}
-export function updateHighlightedLabelId(highlightedLabelId: string): LabelsActionTypes {
+export function updateHighlightedLabelId(
+ highlightedLabelId: string
+): LabelsActionTypes {
return {
type: Action.UPDATE_HIGHLIGHTED_LABEL_ID,
payload: {
- highlightedLabelId,
- },
+ highlightedLabelId
+ }
};
}
-export function updateActiveLabelType(activeLabelType: LabelType): LabelsActionTypes {
+export function updateActiveLabelType(
+ activeLabelType: LabelType
+): LabelsActionTypes {
return {
type: Action.UPDATE_ACTIVE_LABEL_TYPE,
payload: {
- activeLabelType,
- },
+ activeLabelType
+ }
};
}
-export function updateImageDataById(id: string, newImageData: ImageData): LabelsActionTypes {
+export function updateImageDataById(
+ id: string,
+ newImageData: ImageData
+): LabelsActionTypes {
return {
type: Action.UPDATE_IMAGE_DATA_BY_ID,
payload: {
id,
newImageData
- },
+ }
};
}
@@ -61,8 +72,8 @@ export function addImageData(imageData: ImageData[]): LabelsActionTypes {
return {
type: Action.ADD_IMAGES_DATA,
payload: {
- imageData,
- },
+ imageData
+ }
};
}
@@ -70,8 +81,8 @@ export function updateImageData(imageData: ImageData[]): LabelsActionTypes {
return {
type: Action.UPDATE_IMAGES_DATA,
payload: {
- imageData,
- },
+ imageData
+ }
};
}
@@ -81,14 +92,101 @@ export function updateLabelNames(labels: LabelName[]): LabelsActionTypes {
payload: {
labels
}
- }
+ };
}
-export function updateFirstLabelCreatedFlag(firstLabelCreatedFlag: boolean): LabelsActionTypes {
+export function updateFirstLabelCreatedFlag(
+ firstLabelCreatedFlag: boolean
+): LabelsActionTypes {
return {
type: Action.UPDATE_FIRST_LABEL_CREATED_FLAG,
payload: {
firstLabelCreatedFlag
}
- }
+ };
+}
+
+export function updateActiveLabelMode(mode: LabelModeType): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_LABEL_MODE,
+ payload: {
+ mode
+ }
+ };
+}
+
+export function updateActiveGender(gender: number): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_GENDER,
+ payload: {
+ gender
+ }
+ };
+}
+
+export function updateActiveHumanType(humanType: number): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_HUMAN_TYPE,
+ payload: {
+ humanType
+ }
+ };
+}
+
+export function updateActiveStyles(styles: string[]): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_STYLES,
+ payload: {
+ styles
+ }
+ };
+}
+
+export function updateActiveHumanID(humanId: string): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_HUMAN_ID,
+ payload: {
+ humanId
+ }
+ };
+}
+
+export function updateActiveMainCategory(
+ mainCategory: number
+): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_MAIN_CATEGORY,
+ payload: {
+ mainCategory
+ }
+ };
+}
+
+export function updateActiveSubCategory(
+ subCategory: number
+): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_SUB_CATEGORY,
+ payload: {
+ subCategory
+ }
+ };
+}
+
+export function updateActiveColor(color: number): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_COLOR,
+ payload: {
+ color
+ }
+ };
+}
+
+export function updateActivePattern(pattern: number): LabelsActionTypes {
+ return {
+ type: Action.UPDATE_ACTIVE_PATTERN,
+ payload: {
+ pattern
+ }
+ };
}
diff --git a/src/store/labels/reducer.ts b/src/store/labels/reducer.ts
index 3bd08657..93fc19f9 100644
--- a/src/store/labels/reducer.ts
+++ b/src/store/labels/reducer.ts
@@ -1,5 +1,12 @@
import {LabelsActionTypes, LabelsState, ImageData} from './types';
import {Action} from '../Actions';
+import {LabelModeType} from '../../data/enums/LabelType';
+import {
+ GENDER,
+ ITEM_COLOR,
+ ITEM_PATTERN,
+ SOURCE
+} from '../../data/enums/ItemType';
const initialState: LabelsState = {
activeImageIndex: null,
@@ -9,7 +16,16 @@ const initialState: LabelsState = {
highlightedLabelId: null,
imagesData: [],
firstLabelCreatedFlag: false,
- labels: []
+ labels: [],
+ activeLabelMode: LabelModeType.HUMAN,
+ activeGender: GENDER.UNKNOWN,
+ activeHumanType: SOURCE.UNKNOWN,
+ activeColor: ITEM_COLOR.UNKNOWN,
+ activePattern: ITEM_PATTERN.UNKNOWN,
+ activeStyles: [],
+ activeHumanID: null,
+ activeMainCategory: -1,
+ activeSubCategory: -1
};
export function labelsReducer(
@@ -21,63 +37,119 @@ export function labelsReducer(
return {
...state,
activeImageIndex: action.payload.activeImageIndex
- }
+ };
}
case Action.UPDATE_ACTIVE_LABEL_NAME_ID: {
return {
...state,
activeLabelNameId: action.payload.activeLabelNameId
- }
+ };
}
case Action.UPDATE_ACTIVE_LABEL_ID: {
return {
...state,
activeLabelId: action.payload.activeLabelId
- }
+ };
}
case Action.UPDATE_HIGHLIGHTED_LABEL_ID: {
return {
...state,
highlightedLabelId: action.payload.highlightedLabelId
- }
+ };
}
case Action.UPDATE_ACTIVE_LABEL_TYPE: {
return {
...state,
activeLabelType: action.payload.activeLabelType
- }
+ };
}
case Action.UPDATE_IMAGE_DATA_BY_ID: {
return {
...state,
imagesData: state.imagesData.map((imageData: ImageData) =>
- imageData.id === action.payload.id ? action.payload.newImageData : imageData
+ imageData.id === action.payload.id
+ ? action.payload.newImageData
+ : imageData
)
- }
+ };
}
case Action.ADD_IMAGES_DATA: {
return {
...state,
imagesData: state.imagesData.concat(action.payload.imageData)
- }
+ };
}
case Action.UPDATE_IMAGES_DATA: {
return {
...state,
imagesData: action.payload.imageData
- }
+ };
}
case Action.UPDATE_LABEL_NAMES: {
return {
...state,
labels: action.payload.labels
- }
+ };
}
case Action.UPDATE_FIRST_LABEL_CREATED_FLAG: {
return {
...state,
firstLabelCreatedFlag: action.payload.firstLabelCreatedFlag
- }
+ };
+ }
+ case Action.UPDATE_ACTIVE_LABEL_MODE: {
+ return {
+ ...state,
+ activeLabelMode: action.payload.mode
+ };
+ }
+ case Action.UPDATE_ACTIVE_GENDER: {
+ return {
+ ...state,
+ activeGender: action.payload.gender
+ };
+ }
+ case Action.UPDATE_ACTIVE_HUMAN_TYPE: {
+ return {
+ ...state,
+ activeHumanType: action.payload.humanType
+ };
+ }
+ case Action.UPDATE_ACTIVE_STYLES: {
+ return {
+ ...state,
+ activeStyles: action.payload.styles
+ };
+ }
+ case Action.UPDATE_ACTIVE_HUMAN_ID: {
+ return {
+ ...state,
+ activeHumanID: action.payload.humanId
+ };
+ }
+ case Action.UPDATE_ACTIVE_MAIN_CATEGORY: {
+ return {
+ ...state,
+ activeMainCategory: action.payload.mainCategory
+ };
+ }
+ case Action.UPDATE_ACTIVE_SUB_CATEGORY: {
+ return {
+ ...state,
+ activeSubCategory: action.payload.subCategory
+ };
+ }
+ case Action.UPDATE_ACTIVE_COLOR: {
+ return {
+ ...state,
+ activeColor: action.payload.color
+ };
+ }
+ case Action.UPDATE_ACTIVE_PATTERN: {
+ return {
+ ...state,
+ activePattern: action.payload.pattern
+ };
}
default:
return state;
diff --git a/src/store/labels/types.ts b/src/store/labels/types.ts
index d49139df..5ec07e52 100644
--- a/src/store/labels/types.ts
+++ b/src/store/labels/types.ts
@@ -1,9 +1,11 @@
import {IRect} from '../../interfaces/IRect';
import {Action} from '../Actions';
-import {LabelType} from '../../data/enums/LabelType';
+import {LabelType, LabelModeType} from '../../data/enums/LabelType';
import {IPoint} from '../../interfaces/IPoint';
import {LabelStatus} from '../../data/enums/LabelStatus';
import {ILine} from '../../interfaces/ILine';
+import {GENDER} from '../../data/enums/ItemType';
+import {JSONUploadStatus} from '../../data/enums/JSONUploadStatus';
export type LabelRect = {
// GENERAL
@@ -11,11 +13,16 @@ export type LabelRect = {
labelId: string;
rect: IRect;
+ // Custom by mj
+ mode?: LabelModeType;
+
// AI
isCreatedByAI: boolean;
status: LabelStatus;
suggestedLabel: string;
-}
+ qc_status?: string;
+ qc_comment?: string
+};
export type LabelPoint = {
// GENERAL
@@ -27,27 +34,54 @@ export type LabelPoint = {
isCreatedByAI: boolean;
status: LabelStatus;
suggestedLabel: string;
-}
+};
export type LabelPolygon = {
id: string;
labelId: string;
vertices: IPoint[];
-}
+};
export type LabelLine = {
id: string;
labelId: string;
- line: ILine
-}
+ line: ILine;
+};
export type LabelName = {
name: string;
id: string;
color: string;
-}
+};
+
+export type HumanInfo = {
+ uuid: string;
+ id: number;
+ gender: number;
+ type: number;
+ styles: string[];
+ qc_status?: string;
+ qc_comment?: string
+};
+
+export type ItemInfo = {
+ uuid: string;
+ id: number;
+ humanId: string;
+ gender: number;
+ mainCategory: number;
+ subCategory: number;
+ color: number;
+ pattern: number;
+ styles: string[];
+ qc_status?: string;
+ qc_comment?: string;
+};
export type ImageData = {
+ image_status?: any;
+ qc_status? : string;
+ qc_comment?: string;
id: string;
fileData: File;
loadStatus: boolean;
@@ -56,13 +90,47 @@ export type ImageData = {
labelLines: LabelLine[];
labelPolygons: LabelPolygon[];
labelNameIds: string[];
+ humans: HumanInfo[];
+ items: ItemInfo[];
+ guideStyles?: {seq: string; name: string}[];
+ uploadStatus?: JSONUploadStatus;
// SSD
isVisitedByObjectDetector: boolean;
// POSE NET
isVisitedByPoseDetector: boolean;
-}
+};
+
+export type RectJSON = {
+ img_path: string;
+ writer_id: string;
+ version: number;
+ human_info: {
+ human_id: string;
+ bounding_box: {
+ lt_x: number;
+ lt_y: number;
+ rb_x: number;
+ rb_y: number;
+ };
+ style: string[];
+ qc_status?: string;
+ qc_comment?: string;
+ }[];
+ item_info: {
+ item_id: string;
+ bounding_box: {
+ lt_x: number;
+ lt_y: number;
+ rb_x: number;
+ rb_y: number;
+ };
+ style: string[];
+ qc_status?: string;
+ qc_comment?: string;
+ }[];
+};
export type LabelsState = {
activeImageIndex: number;
@@ -73,41 +141,50 @@ export type LabelsState = {
imagesData: ImageData[];
firstLabelCreatedFlag: boolean;
labels: LabelName[];
-}
+ activeLabelMode: LabelModeType;
+ activeGender: number;
+ activeHumanType: number;
+ activeStyles?: string[];
+ activeHumanID?: string;
+ activeMainCategory?: number;
+ activeSubCategory?: number;
+ activeColor?: number;
+ activePattern?: number;
+};
interface UpdateActiveImageIndex {
type: typeof Action.UPDATE_ACTIVE_IMAGE_INDEX;
payload: {
activeImageIndex: number;
- }
+ };
}
interface UpdateActiveLabelNameId {
type: typeof Action.UPDATE_ACTIVE_LABEL_NAME_ID;
payload: {
activeLabelNameId: string;
- }
+ };
}
interface UpdateActiveLabelId {
type: typeof Action.UPDATE_ACTIVE_LABEL_ID;
payload: {
activeLabelId: string;
- }
+ };
}
interface UpdateHighlightedLabelId {
type: typeof Action.UPDATE_HIGHLIGHTED_LABEL_ID;
payload: {
highlightedLabelId: string;
- }
+ };
}
interface UpdateActiveLabelType {
type: typeof Action.UPDATE_ACTIVE_LABEL_TYPE;
payload: {
activeLabelType: LabelType;
- }
+ };
}
interface UpdateImageDataById {
@@ -115,38 +192,102 @@ interface UpdateImageDataById {
payload: {
id: string;
newImageData: ImageData;
- }
+ };
}
interface AddImageData {
type: typeof Action.ADD_IMAGES_DATA;
payload: {
imageData: ImageData[];
- }
+ };
}
interface UpdateImageData {
type: typeof Action.UPDATE_IMAGES_DATA;
payload: {
imageData: ImageData[];
- }
+ };
}
interface UpdateLabelNames {
type: typeof Action.UPDATE_LABEL_NAMES;
payload: {
labels: LabelName[];
- }
+ };
}
interface UpdateFirstLabelCreatedFlag {
type: typeof Action.UPDATE_FIRST_LABEL_CREATED_FLAG;
payload: {
firstLabelCreatedFlag: boolean;
- }
+ };
+}
+
+interface UpdateActiveLabelMode {
+ type: typeof Action.UPDATE_ACTIVE_LABEL_MODE;
+ payload: {
+ mode: LabelModeType;
+ };
+}
+
+interface UpdateActiveGender {
+ type: typeof Action.UPDATE_ACTIVE_GENDER;
+ payload: {
+ gender: number;
+ };
+}
+
+interface UpdateActiveHumanType {
+ type: typeof Action.UPDATE_ACTIVE_HUMAN_TYPE;
+ payload: {
+ humanType: number;
+ };
}
-export type LabelsActionTypes = UpdateActiveImageIndex
+interface UpdateActiveStyles {
+ type: typeof Action.UPDATE_ACTIVE_STYLES;
+ payload: {
+ styles: string[];
+ };
+}
+
+interface UpdateActiveHumanID {
+ type: typeof Action.UPDATE_ACTIVE_HUMAN_ID;
+ payload: {
+ humanId: string;
+ };
+}
+
+interface UpdateActiveMainCategory {
+ type: typeof Action.UPDATE_ACTIVE_MAIN_CATEGORY;
+ payload: {
+ mainCategory: number;
+ };
+}
+
+interface UpdateActiveSubCategory {
+ type: typeof Action.UPDATE_ACTIVE_SUB_CATEGORY;
+ payload: {
+ subCategory: number;
+ };
+}
+
+interface UpdateActiveColor {
+ type: typeof Action.UPDATE_ACTIVE_COLOR;
+ payload: {
+ color: number;
+ };
+}
+
+interface UpdateActivePattern {
+ type: typeof Action.UPDATE_ACTIVE_PATTERN;
+ payload: {
+ pattern: number;
+ };
+}
+
+export type LabelsActionTypes =
+ | UpdateActiveImageIndex
| UpdateActiveLabelNameId
| UpdateActiveLabelType
| UpdateImageDataById
@@ -156,4 +297,12 @@ export type LabelsActionTypes = UpdateActiveImageIndex
| UpdateActiveLabelId
| UpdateHighlightedLabelId
| UpdateFirstLabelCreatedFlag
-
+ | UpdateActiveLabelMode
+ | UpdateActiveGender
+ | UpdateActiveHumanType
+ | UpdateActiveStyles
+ | UpdateActiveHumanID
+ | UpdateActiveMainCategory
+ | UpdateActiveSubCategory
+ | UpdateActiveColor
+ | UpdateActivePattern;
diff --git a/src/store/performance/actionCreators.ts b/src/store/performance/actionCreators.ts
new file mode 100644
index 00000000..5738beca
--- /dev/null
+++ b/src/store/performance/actionCreators.ts
@@ -0,0 +1,29 @@
+import {Action} from '../Actions';
+import {CommonSummary, Task, TaskStatus} from './types';
+
+export function updateTaskStatus(taskStatus: TaskStatus) {
+ return {
+ type: Action.UPDATE_TASK_STATUS_DATA,
+ payload: {
+ taskStatus
+ }
+ };
+}
+
+export function updateTasks(tasks: Task[]) {
+ return {
+ type: Action.UPDATE_TASKS_DATA,
+ payload: {
+ tasks
+ }
+ };
+}
+
+export function updateCommonSummary(commonSummary: CommonSummary) {
+ return {
+ type: Action.UPDATE_COMMON_SUMMARY_DATA,
+ payload: {
+ commonSummary
+ }
+ };
+}
diff --git a/src/store/performance/reducer.ts b/src/store/performance/reducer.ts
new file mode 100644
index 00000000..0d4312b3
--- /dev/null
+++ b/src/store/performance/reducer.ts
@@ -0,0 +1,56 @@
+import {Action} from 'store/Actions';
+import {PerformanceActionTypes, PerformanceState} from './types';
+
+const initialState: PerformanceState = {
+ taskStatus: {
+ averageTPD: 0,
+ currentAverageTPD: 0,
+ highestRanker: {
+ displayName: '',
+ tpd: 0
+ },
+ me: {
+ displayName: '',
+ tpd: 0
+ }
+ },
+ tasks: [],
+ commonSummary: {
+ images: {
+ total: 0,
+ labeled: 0,
+ unchecked: 0,
+ waitingQC: 0,
+ passed: 0,
+ rejected: 0
+ }
+ }
+};
+
+export function performanceReducer(
+ state = initialState,
+ action: PerformanceActionTypes
+): PerformanceState {
+ switch (action.type) {
+ case Action.UPDATE_TASK_STATUS_DATA: {
+ return {
+ ...state,
+ taskStatus: action.payload.taskStatus
+ };
+ }
+ case Action.UPDATE_TASKS_DATA: {
+ return {
+ ...state,
+ tasks: action.payload.tasks
+ };
+ }
+ case Action.UPDATE_COMMON_SUMMARY_DATA: {
+ return {
+ ...state,
+ commonSummary: action.payload.commonSummary
+ };
+ }
+ default:
+ return state;
+ }
+}
diff --git a/src/store/performance/types.ts b/src/store/performance/types.ts
new file mode 100644
index 00000000..fba70ccf
--- /dev/null
+++ b/src/store/performance/types.ts
@@ -0,0 +1,68 @@
+import {Action} from '../Actions';
+
+export type PerformanceState = {
+ taskStatus: TaskStatus;
+ tasks: Task[];
+ commonSummary: CommonSummary;
+};
+
+export type TaskStatus = {
+ averageTPD: number;
+ currentAverageTPD: number;
+ highestRanker: {
+ displayName: string;
+ tpd: number;
+ };
+ me: {
+ displayName: string;
+ tpd: number;
+ };
+};
+
+export type Task = {
+ name: string;
+ imagesTPD: number;
+ imagesTPH: number;
+ averageTimePerImage: number;
+ labeledTPD: number;
+ labeledTPH: number;
+ averageTimePerLabeled: number;
+ note?: string;
+};
+
+export type CommonSummary = {
+ images: {
+ total: number;
+ labeled: number;
+ unchecked: number;
+ waitingQC: number;
+ passed: number;
+ rejected: number;
+ };
+};
+
+interface UpdateTaskStatusData {
+ type: typeof Action.UPDATE_TASK_STATUS_DATA;
+ payload: {
+ taskStatus: TaskStatus;
+ };
+}
+
+interface UpdateTasksData {
+ type: typeof Action.UPDATE_TASKS_DATA;
+ payload: {
+ tasks: Task[];
+ };
+}
+
+interface UpdateCommonSummaryData {
+ type: typeof Action.UPDATE_COMMON_SUMMARY_DATA;
+ payload: {
+ commonSummary: CommonSummary;
+ };
+}
+
+export type PerformanceActionTypes =
+ | UpdateTaskStatusData
+ | UpdateTasksData
+ | UpdateCommonSummaryData;
diff --git a/src/store/selectors/AuthSelector.ts b/src/store/selectors/AuthSelector.ts
new file mode 100644
index 00000000..7ecae7a7
--- /dev/null
+++ b/src/store/selectors/AuthSelector.ts
@@ -0,0 +1,14 @@
+import {store} from '../..';
+import {AuthData} from '../auth/types';
+
+export class AuthSelector {
+ public static getToken(): string {
+ return store.getState().auth.authData.authToken;
+ }
+ public static getAuthData(): AuthData {
+ return store.getState().auth.authData;
+ }
+ public static getUserID(): string {
+ return store.getState().auth.authData.email;
+ }
+}
diff --git a/src/store/selectors/GeneralSelector.ts b/src/store/selectors/GeneralSelector.ts
index e7d066ce..58b657b7 100644
--- a/src/store/selectors/GeneralSelector.ts
+++ b/src/store/selectors/GeneralSelector.ts
@@ -42,6 +42,10 @@ export class GeneralSelector {
}
public static getEnablePerClassColorationStatus(): boolean {
- return store.getState().general.enablePerClassColoration
+ return store.getState().general.enablePerClassColoration;
+ }
+
+ public static getFillMode(): boolean {
+ return store.getState().general.fillMode;
}
}
diff --git a/src/store/selectors/LabelsSelector.ts b/src/store/selectors/LabelsSelector.ts
index a1549452..f48e7c3d 100644
--- a/src/store/selectors/LabelsSelector.ts
+++ b/src/store/selectors/LabelsSelector.ts
@@ -1,7 +1,14 @@
import {store} from '../..';
-import {ImageData, LabelLine, LabelName, LabelPoint, LabelPolygon, LabelRect} from '../labels/types';
+import {
+ ImageData,
+ LabelLine,
+ LabelName,
+ LabelPoint,
+ LabelPolygon,
+ LabelRect
+} from '../labels/types';
import {find} from 'lodash';
-import {LabelType} from '../../data/enums/LabelType';
+import {LabelType, LabelModeType} from '../../data/enums/LabelType';
export class LabelsSelector {
public static getLabelNames(): LabelName[] {
@@ -9,7 +16,7 @@ export class LabelsSelector {
}
public static getLabelNameById(id: string): LabelName | undefined {
- const labelName: LabelName[] = LabelsSelector.getLabelNames()
+ const labelName: LabelName[] = LabelsSelector.getLabelNames();
return find(labelName, {id});
}
@@ -30,10 +37,10 @@ export class LabelsSelector {
}
public static getActiveImageData(): ImageData | null {
- const activeImageIndex: number | null = LabelsSelector.getActiveImageIndex();
+ const activeImageIndex: number | null =
+ LabelsSelector.getActiveImageIndex();
- if (activeImageIndex === null)
- return null;
+ if (activeImageIndex === null) return null;
return LabelsSelector.getImageDataByIndex(activeImageIndex);
}
@@ -59,36 +66,69 @@ export class LabelsSelector {
public static getActiveRectLabel(): LabelRect | null {
const activeLabelId: string | null = LabelsSelector.getActiveLabelId();
- if (activeLabelId === null)
- return null;
+ if (activeLabelId === null) return null;
- return find(LabelsSelector.getActiveImageData().labelRects, {id: activeLabelId});
+ return find(LabelsSelector.getActiveImageData().labelRects, {
+ id: activeLabelId
+ });
}
public static getActivePointLabel(): LabelPoint | null {
const activeLabelId: string | null = LabelsSelector.getActiveLabelId();
- if (activeLabelId === null)
- return null;
+ if (activeLabelId === null) return null;
- return find(LabelsSelector.getActiveImageData().labelPoints, {id: activeLabelId});
+ return find(LabelsSelector.getActiveImageData().labelPoints, {
+ id: activeLabelId
+ });
}
public static getActivePolygonLabel(): LabelPolygon | null {
const activeLabelId: string | null = LabelsSelector.getActiveLabelId();
- if (activeLabelId === null)
- return null;
+ if (activeLabelId === null) return null;
- return find(LabelsSelector.getActiveImageData().labelPolygons, {id: activeLabelId});
+ return find(LabelsSelector.getActiveImageData().labelPolygons, {
+ id: activeLabelId
+ });
}
public static getActiveLineLabel(): LabelLine | null {
const activeLabelId: string | null = LabelsSelector.getActiveLabelId();
- if (activeLabelId === null)
- return null;
+ if (activeLabelId === null) return null;
- return find(LabelsSelector.getActiveImageData().labelLines, {id: activeLabelId});
+ return find(LabelsSelector.getActiveImageData().labelLines, {
+ id: activeLabelId
+ });
+ }
+
+ public static getActiveLabelMode(): LabelModeType | null {
+ return store.getState().labels.activeLabelMode;
+ }
+
+ public static getActiveGender(): number | null {
+ return store.getState().labels.activeGender;
+ }
+ public static getActiveHumanType(): number | null {
+ return store.getState().labels.activeHumanType;
+ }
+ public static getActiveStyles(): string[] | null {
+ return store.getState().labels.activeStyles;
+ }
+ public static getActiveHumanID(): string | null {
+ return store.getState().labels.activeHumanID;
+ }
+ public static getActiveMainCategory(): number | null {
+ return store.getState().labels.activeMainCategory;
+ }
+ public static getActiveSubCategory(): number | null {
+ return store.getState().labels.activeSubCategory;
+ }
+ public static getActiveColor(): number | null {
+ return store.getState().labels.activeColor;
+ }
+ public static getActivePattern(): number | null {
+ return store.getState().labels.activePattern;
}
}
diff --git a/src/utils/FileUtil.ts b/src/utils/FileUtil.ts
index 0a4613df..e803fcab 100644
--- a/src/utils/FileUtil.ts
+++ b/src/utils/FileUtil.ts
@@ -1,19 +1,29 @@
export class FileUtil {
+ public static loadImageFromURL(url: string): Promise {
+ return new Promise((resolve, reject) => {
+ const image = new Image();
+ image.src = url;
+ image.onload = () => resolve(image);
+ image.onerror = reject;
+ });
+ }
+
public static loadImage(fileData: File): Promise {
- return new Promise((resolve, reject) => {
- const url = URL.createObjectURL(fileData);
+ return new Promise((resolve, reject) => {
+ const url = URL.createObjectURL(fileData);
const image = new Image();
- image.src = url;
- image.onload = () => resolve(image);
- image.onerror = reject;
- })
+ image.src = url;
+ image.onload = () => resolve(image);
+ image.onerror = reject;
+ });
}
public static loadImages(fileData: File[]): Promise {
return new Promise((resolve, reject) => {
- const promises: Promise[] = fileData.map((fileData: File) => FileUtil.loadImage(fileData))
- Promise
- .all(promises)
+ const promises: Promise[] = fileData.map(
+ (fileData: File) => FileUtil.loadImage(fileData)
+ );
+ Promise.all(promises)
.then((values: HTMLImageElement[]) => resolve(values))
.catch((error) => reject(error));
});
@@ -27,30 +37,31 @@ export class FileUtil {
};
reader.onerror = reject;
reader.readAsText(fileData);
- })
+ });
}
public static readFiles(fileData: File[]): Promise {
return new Promise((resolve, reject) => {
- const promises: Promise[] = fileData.map((fileData: File) => FileUtil.readFile(fileData))
- Promise
- .all(promises)
+ const promises: Promise[] = fileData.map((fileData: File) =>
+ FileUtil.readFile(fileData)
+ );
+ Promise.all(promises)
.then((values: string[]) => resolve(values))
.catch((error) => reject(error));
});
}
public static extractFileExtension(name: string): string | null {
- const parts = name.split(".");
+ const parts = name.split('.');
return parts.length > 1 ? parts[parts.length - 1] : null;
}
public static extractFileName(name: string): string | null {
- const splitPath = name.split(".");
- let fName = "";
- for(const idx of Array(splitPath.length - 1).keys()){
- if(fName === "") fName += splitPath[idx];
- else fName += "." + splitPath[idx];
+ const splitPath = name.split('.');
+ let fName = '';
+ for (const idx of Array(splitPath.length - 1).keys()) {
+ if (fName === '') fName += splitPath[idx];
+ else fName += '.' + splitPath[idx];
}
return fName;
}
diff --git a/src/utils/ImageDataUtil.ts b/src/utils/ImageDataUtil.ts
index 0881a692..7a7a0582 100644
--- a/src/utils/ImageDataUtil.ts
+++ b/src/utils/ImageDataUtil.ts
@@ -1,7 +1,9 @@
import {ImageData} from '../store/labels/types';
-import { v4 as uuidv4 } from 'uuid';
+import {v4 as uuidv4} from 'uuid';
import {FileUtil} from './FileUtil';
import {ImageRepository} from '../logic/imageRepository/ImageRepository';
+import {APIImageData} from '../services/types';
+import {MJImporter} from '../logic/import/MJ/MJImporter';
export class ImageDataUtil {
public static createImageDataFromFileData(fileData: File): ImageData {
@@ -15,8 +17,40 @@ export class ImageDataUtil {
labelPolygons: [],
labelNameIds: [],
isVisitedByObjectDetector: false,
- isVisitedByPoseDetector: false
- }
+ isVisitedByPoseDetector: false,
+ humans: [],
+ items: [],
+ image_status: ""
+ };
+ }
+ public static createImageDataFromAPIData(apiData: APIImageData): ImageData {
+
+ const data: ImageData = {
+ id: apiData.image_id,
+ fileData: {
+ //@ts-ignore
+ path: apiData.image_url,
+ width: parseInt(apiData.image_width),
+ height: parseInt(apiData.image_height)
+ },
+ loadStatus: false,
+ labelRects: [],
+ labelPoints: [],
+ labelLines: [],
+ labelPolygons: [],
+ labelNameIds: [],
+ isVisitedByObjectDetector: false,
+ isVisitedByPoseDetector: false,
+ humans: [],
+ items: [],
+ guideStyles: apiData.style_list,
+ image_status: apiData.image_status || ""
+ };
+
+ // if labeling_json data is available, apply annotations
+ return apiData.labeling_json
+ ? MJImporter.applyAnnotations(data, apiData.labeling_json, [])
+ : data;
}
public static cleanAnnotations(item: ImageData): ImageData {
@@ -26,24 +60,36 @@ export class ImageDataUtil {
labelPoints: [],
labelLines: [],
labelPolygons: [],
- labelNameIds: []
- }
+ labelNameIds: [],
+ humans: [],
+ items: []
+ };
}
- public static arrange(items: ImageData[], idArrangement: string[]): ImageData[] {
+ public static arrange(
+ items: ImageData[],
+ idArrangement: string[]
+ ): ImageData[] {
return items.sort((a: ImageData, b: ImageData) => {
- return idArrangement.indexOf(a.id) - idArrangement.indexOf(b.id)
- })
+ return idArrangement.indexOf(a.id) - idArrangement.indexOf(b.id);
+ });
}
public static loadMissingImages(images: ImageData[]): Promise {
return new Promise((resolve, reject) => {
- const missingImages = images.filter((i: ImageData) => !i.loadStatus);
- const missingImagesFiles = missingImages.map((i: ImageData) => i.fileData);
+ const missingImages = images.filter(
+ (i: ImageData) => !i.loadStatus
+ );
+ const missingImagesFiles = missingImages.map(
+ (i: ImageData) => i.fileData
+ );
FileUtil.loadImages(missingImagesFiles)
- .then((htmlImageElements:HTMLImageElement[]) => {
- ImageRepository.storeImages(missingImages.map((i: ImageData) => i.id), htmlImageElements);
- resolve()
+ .then((htmlImageElements: HTMLImageElement[]) => {
+ ImageRepository.storeImages(
+ missingImages.map((i: ImageData) => i.id),
+ htmlImageElements
+ );
+ resolve();
})
.catch((error: Error) => reject(error));
});
diff --git a/src/utils/LabelUtil.ts b/src/utils/LabelUtil.ts
index ef5c483a..79978f10 100644
--- a/src/utils/LabelUtil.ts
+++ b/src/utils/LabelUtil.ts
@@ -1,11 +1,17 @@
-import {LabelName, LabelPolygon, LabelRect} from '../store/labels/types';
-import { v4 as uuidv4 } from 'uuid';
+import {
+ HumanInfo,
+ LabelName,
+ LabelPolygon,
+ LabelRect
+} from '../store/labels/types';
+import {v4 as uuidv4} from 'uuid';
import {find} from 'lodash';
import {IRect} from '../interfaces/IRect';
import {LabelStatus} from '../data/enums/LabelStatus';
import {IPoint} from '../interfaces/IPoint';
-import { sample } from 'lodash';
+import {sample} from 'lodash';
import {Settings} from '../settings/Settings';
+import {LabelsSelector} from '../store/selectors/LabelsSelector';
export class LabelUtil {
public static createLabelName(name: string): LabelName {
@@ -13,7 +19,7 @@ export class LabelUtil {
id: uuidv4(),
name,
color: sample(Settings.LABEL_COLORS_PALETTE)
- }
+ };
}
public static createLabelRect(labelId: string, rect: IRect): LabelRect {
@@ -23,24 +29,35 @@ export class LabelUtil {
rect,
isCreatedByAI: false,
status: LabelStatus.ACCEPTED,
- suggestedLabel: null
- }
+ suggestedLabel: null,
+ mode: LabelsSelector.getActiveLabelMode(),
+
+ };
}
- public static createLabelPolygon(labelId: string, vertices: IPoint[]): LabelPolygon {
+ public static createLabelPolygon(
+ labelId: string,
+ vertices: IPoint[]
+ ): LabelPolygon {
return {
id: uuidv4(),
labelId,
vertices
- }
+ };
}
- public static labelNamesIdsDiff(oldLabelNames: LabelName[], newLabelNames: LabelName[]): string[] {
- return oldLabelNames.reduce((missingIds: string[], labelName: LabelName) => {
- if (!find(newLabelNames, { 'id': labelName.id })) {
- missingIds.push(labelName.id);
- }
- return missingIds
- }, [])
+ public static labelNamesIdsDiff(
+ oldLabelNames: LabelName[],
+ newLabelNames: LabelName[]
+ ): string[] {
+ return oldLabelNames.reduce(
+ (missingIds: string[], labelName: LabelName) => {
+ if (!find(newLabelNames, {id: labelName.id})) {
+ missingIds.push(labelName.id);
+ }
+ return missingIds;
+ },
+ []
+ );
}
}
diff --git a/src/utils/RenderEngineUtil.ts b/src/utils/RenderEngineUtil.ts
index dd9d1231..ad87f3bc 100644
--- a/src/utils/RenderEngineUtil.ts
+++ b/src/utils/RenderEngineUtil.ts
@@ -1,14 +1,14 @@
-import {EditorData} from "../data/EditorData";
-import {RectUtil} from "./RectUtil";
-import {store} from "../index";
-import {CustomCursorStyle} from "../data/enums/CustomCursorStyle";
-import {updateCustomCursorStyle} from "../store/general/actionCreators";
-import {IPoint} from "../interfaces/IPoint";
-import {PointUtil} from "./PointUtil";
-import {IRect} from "../interfaces/IRect";
-import {ILine} from "../interfaces/ILine";
-import {LineUtil} from "./LineUtil";
-import {ISize} from "../interfaces/ISize";
+import {EditorData} from '../data/EditorData';
+import {RectUtil} from './RectUtil';
+import {store} from '../index';
+import {CustomCursorStyle} from '../data/enums/CustomCursorStyle';
+import {updateCustomCursorStyle} from '../store/general/actionCreators';
+import {IPoint} from '../interfaces/IPoint';
+import {PointUtil} from './PointUtil';
+import {IRect} from '../interfaces/IRect';
+import {ILine} from '../interfaces/ILine';
+import {LineUtil} from './LineUtil';
+import {ISize} from '../interfaces/ISize';
export class RenderEngineUtil {
public static calculateImageScale(data: EditorData): number {
@@ -16,62 +16,128 @@ export class RenderEngineUtil {
}
public static isMouseOverImage(data: EditorData): boolean {
- return RectUtil.isPointInside(data.viewPortContentImageRect, data.mousePositionOnViewPortContent);
+ return RectUtil.isPointInside(
+ data.viewPortContentImageRect,
+ data.mousePositionOnViewPortContent
+ );
}
public static isMouseOverCanvas(data: EditorData): boolean {
- return RectUtil.isPointInside({x: 0, y: 0, ...data.viewPortContentSize}, data.mousePositionOnViewPortContent);
+ return RectUtil.isPointInside(
+ {x: 0, y: 0, ...data.viewPortContentSize},
+ data.mousePositionOnViewPortContent
+ );
}
- public static transferPointFromImageToViewPortContent(point: IPoint, data: EditorData): IPoint {
+ public static transferPointFromImageToViewPortContent(
+ point: IPoint,
+ data: EditorData
+ ): IPoint {
const scale = RenderEngineUtil.calculateImageScale(data);
- return PointUtil.add(PointUtil.multiply(point, 1/scale), data.viewPortContentImageRect);
- }
-
- public static transferPolygonFromImageToViewPortContent(polygon: IPoint[], data: EditorData): IPoint[] {
- return polygon.map((point: IPoint) => RenderEngineUtil.transferPointFromImageToViewPortContent(point, data));
- }
-
- public static transferLineFromImageToViewPortContent(line: ILine, data: EditorData): ILine {
+ return PointUtil.add(
+ PointUtil.multiply(point, 1 / scale),
+ data.viewPortContentImageRect
+ );
+ }
+
+ public static transferPolygonFromImageToViewPortContent(
+ polygon: IPoint[],
+ data: EditorData
+ ): IPoint[] {
+ return polygon.map((point: IPoint) =>
+ RenderEngineUtil.transferPointFromImageToViewPortContent(
+ point,
+ data
+ )
+ );
+ }
+
+ public static transferLineFromImageToViewPortContent(
+ line: ILine,
+ data: EditorData
+ ): ILine {
return {
- start: RenderEngineUtil.transferPointFromImageToViewPortContent(line.start, data),
- end: RenderEngineUtil.transferPointFromImageToViewPortContent(line.end, data)
- }
+ start: RenderEngineUtil.transferPointFromImageToViewPortContent(
+ line.start,
+ data
+ ),
+ end: RenderEngineUtil.transferPointFromImageToViewPortContent(
+ line.end,
+ data
+ )
+ };
}
- public static transferPointFromViewPortContentToImage(point: IPoint, data: EditorData): IPoint {
+ public static transferPointFromViewPortContentToImage(
+ point: IPoint,
+ data: EditorData
+ ): IPoint {
const scale = RenderEngineUtil.calculateImageScale(data);
- return PointUtil.multiply(PointUtil.subtract(point, data.viewPortContentImageRect), scale);
- }
-
- public static transferPolygonFromViewPortContentToImage(polygon: IPoint[], data: EditorData): IPoint[] {
- return polygon.map((point: IPoint) => RenderEngineUtil.transferPointFromViewPortContentToImage(point, data));
- }
-
- public static transferLineFromViewPortContentToImage(line: ILine, data: EditorData): ILine {
+ return PointUtil.multiply(
+ PointUtil.subtract(point, data.viewPortContentImageRect),
+ scale
+ );
+ }
+
+ public static transferPolygonFromViewPortContentToImage(
+ polygon: IPoint[],
+ data: EditorData
+ ): IPoint[] {
+ return polygon.map((point: IPoint) =>
+ RenderEngineUtil.transferPointFromViewPortContentToImage(
+ point,
+ data
+ )
+ );
+ }
+
+ public static transferLineFromViewPortContentToImage(
+ line: ILine,
+ data: EditorData
+ ): ILine {
return {
- start: RenderEngineUtil.transferPointFromViewPortContentToImage(line.start, data),
- end: RenderEngineUtil.transferPointFromViewPortContentToImage(line.end, data)
- }
+ start: RenderEngineUtil.transferPointFromViewPortContentToImage(
+ line.start,
+ data
+ ),
+ end: RenderEngineUtil.transferPointFromViewPortContentToImage(
+ line.end,
+ data
+ )
+ };
}
- public static transferRectFromViewPortContentToImage(rect: IRect, data: EditorData): IRect {
+ public static transferRectFromViewPortContentToImage(
+ rect: IRect,
+ data: EditorData
+ ): IRect {
const scale = RenderEngineUtil.calculateImageScale(data);
- return RectUtil.translate(RectUtil.scaleRect(rect, 1/scale), data.viewPortContentImageRect);
+ return RectUtil.translate(
+ RectUtil.scaleRect(rect, 1 / scale),
+ data.viewPortContentImageRect
+ );
}
- public static transferRectFromImageToViewPortContent(rect: IRect, data: EditorData): IRect {
+ public static transferRectFromImageToViewPortContent(
+ rect: IRect,
+ data: EditorData
+ ): IRect {
const scale = RenderEngineUtil.calculateImageScale(data);
const translation: IPoint = {
- x: - data.viewPortContentImageRect.x,
- y: - data.viewPortContentImageRect.y
+ x: -data.viewPortContentImageRect.x,
+ y: -data.viewPortContentImageRect.y
};
return RectUtil.scaleRect(RectUtil.translate(rect, translation), scale);
}
public static wrapDefaultCursorStyleInCancel(data: EditorData) {
- if (RectUtil.isPointInside(data.viewPortContentImageRect, data.mousePositionOnViewPortContent)) {
+ if (
+ RectUtil.isPointInside(
+ data.viewPortContentImageRect,
+ data.mousePositionOnViewPortContent
+ )
+ ) {
store.dispatch(updateCustomCursorStyle(CustomCursorStyle.DEFAULT));
} else {
store.dispatch(updateCustomCursorStyle(CustomCursorStyle.CANCEL));
@@ -86,7 +152,7 @@ export class RenderEngineUtil {
return {
x: RenderEngineUtil.setValueBetweenPixels(point.x),
y: RenderEngineUtil.setValueBetweenPixels(point.y)
- }
+ };
}
public static setRectBetweenPixels(rect: IRect): IRect {
@@ -98,29 +164,46 @@ export class RenderEngineUtil {
x: rect.x + rect.width,
y: rect.y + rect.height
};
- const topLeftBetweenPixels = RenderEngineUtil.setPointBetweenPixels(topLeft);
- const bottomRightBetweenPixels = RenderEngineUtil.setPointBetweenPixels(bottomRight);
+ const topLeftBetweenPixels =
+ RenderEngineUtil.setPointBetweenPixels(topLeft);
+ const bottomRightBetweenPixels =
+ RenderEngineUtil.setPointBetweenPixels(bottomRight);
return {
x: topLeftBetweenPixels.x,
y: topLeftBetweenPixels.y,
width: bottomRightBetweenPixels.x - topLeftBetweenPixels.x,
height: bottomRightBetweenPixels.y - topLeftBetweenPixels.y
- }
+ };
}
- public static isMouseOverLine(mouse: IPoint, l: ILine, radius: number): boolean {
+ public static isMouseOverLine(
+ mouse: IPoint,
+ l: ILine,
+ radius: number
+ ): boolean {
const minX: number = Math.min(l.start.x, l.end.x);
const maxX: number = Math.max(l.start.x, l.end.x);
const minY: number = Math.min(l.start.y, l.end.y);
const maxY: number = Math.max(l.start.y, l.end.y);
- return (minX - radius <= mouse.x && maxX + radius >= mouse.x) &&
- (minY - radius <= mouse.y && maxY + radius >= mouse.y) &&
- LineUtil.getDistanceFromLine(l, mouse) < radius;
+ return (
+ minX - radius <= mouse.x &&
+ maxX + radius >= mouse.x &&
+ minY - radius <= mouse.y &&
+ maxY + radius >= mouse.y &&
+ LineUtil.getDistanceFromLine(l, mouse) < radius
+ );
}
- public static isMouseOverAnchor(mouse: IPoint, anchor: IPoint, size: ISize): boolean {
+ public static isMouseOverAnchor(
+ mouse: IPoint,
+ anchor: IPoint,
+ size: ISize
+ ): boolean {
if (!mouse || !anchor) return null;
- return RectUtil.isPointInside(RectUtil.getRectWithCenterAndSize(anchor, size), mouse);
+ return RectUtil.isPointInside(
+ RectUtil.getRectWithCenterAndSize(anchor, size),
+ mouse
+ );
}
-}
\ No newline at end of file
+}
diff --git a/src/utils/URIUtil.ts b/src/utils/URIUtil.ts
new file mode 100644
index 00000000..67eb72eb
--- /dev/null
+++ b/src/utils/URIUtil.ts
@@ -0,0 +1,58 @@
+export class URIUtil {
+ public static loadImage(uri: string): Promise {
+ return new Promise((resolve, reject) => {
+ const image = new Image();
+ image.src = uri;
+ image.onload = () => resolve(image);
+ image.onerror = reject;
+ });
+ }
+
+ public static loadImages(fileData: File[]): Promise {
+ return new Promise((resolve, reject) => {
+ const promises: Promise[] = fileData.map(
+ //@ts-ignore
+ (fileData: File) => URIUtil.loadImage(fileData.path)
+ );
+ Promise.all(promises)
+ .then((values: HTMLImageElement[]) => resolve(values))
+ .catch((error) => reject(error));
+ });
+ }
+
+ // public static readFile(fileData: File): Promise {
+ // return new Promise((resolve, reject) => {
+ // let reader = new FileReader();
+ // reader.onloadend = (event: any) => {
+ // resolve(event.target.result);
+ // };
+ // reader.onerror = reject;
+ // reader.readAsText(fileData);
+ // })
+ // }
+
+ // public static readFiles(fileData: File[]): Promise {
+ // return new Promise((resolve, reject) => {
+ // const promises: Promise[] = fileData.map((fileData: File) => FileUtil.readFile(fileData))
+ // Promise
+ // .all(promises)
+ // .then((values: string[]) => resolve(values))
+ // .catch((error) => reject(error));
+ // });
+ // }
+
+ // public static extractFileExtension(name: string): string | null {
+ // const parts = name.split(".");
+ // return parts.length > 1 ? parts[parts.length - 1] : null;
+ // }
+
+ // public static extractFileName(name: string): string | null {
+ // const splitPath = name.split(".");
+ // let fName = "";
+ // for(const idx of Array(splitPath.length - 1).keys()){
+ // if(fName === "") fName += splitPath[idx];
+ // else fName += "." + splitPath[idx];
+ // }
+ // return fName;
+ // }
+}
diff --git a/src/views/Common/AttributeSelect/AttributeSelect.scss b/src/views/Common/AttributeSelect/AttributeSelect.scss
new file mode 100644
index 00000000..b9c94da7
--- /dev/null
+++ b/src/views/Common/AttributeSelect/AttributeSelect.scss
@@ -0,0 +1,14 @@
+.AttributeSelect {
+ display: flex;
+}
+
+.IconItem {
+ display: flex;
+ flex: 1;
+ // justify-content: center;
+ align-items: center;
+
+ .ItemTitle {
+ margin-left: 1em;
+ }
+}
diff --git a/src/views/Common/AttributeSelect/AttributeSelect.tsx b/src/views/Common/AttributeSelect/AttributeSelect.tsx
new file mode 100644
index 00000000..29fceb89
--- /dev/null
+++ b/src/views/Common/AttributeSelect/AttributeSelect.tsx
@@ -0,0 +1,333 @@
+import * as React from 'react';
+import './AttributeSelect.scss';
+import classNames from 'classnames';
+import {
+ ATTRIBUTE_TYPE,
+ FASHION_STYLE,
+ FASHION_STYLE_CODE_FOR_MAN,
+ FASHION_STYLE_MAN,
+ FASHION_STYLE_WOMAN,
+ GENDER,
+ GENDER_CODE,
+ ITEM_CATEGORY,
+ ITEM_COLOR,
+ ITEM_PATTERN,
+ MAIN_CATEGORY_CODE,
+ SOURCE,
+ SOURCE_CODE,
+ SUB_CATEGORY_CODE
+} from '../../../data/enums/ItemType';
+import Select from 'react-select';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {vi as lang} from '../../../lang';
+import {Settings} from '../../../settings/Settings';
+import _ from 'lodash';
+
+interface IProps {
+ key?: string;
+ type: ATTRIBUTE_TYPE;
+ value?: any;
+ onSelect: (selectedItem: any, type: ATTRIBUTE_TYPE) => any;
+ style?: React.CSSProperties;
+ isActive?: boolean;
+ isDisabled?: boolean;
+ externalClassName?: string;
+ mainCategory?: number;
+ gender?: number;
+ isMulti?: boolean;
+ setPreview?: (url: string) => any;
+}
+
+export const AttributeSelect = (props: IProps) => {
+ const {
+ key,
+ type,
+ value,
+ onSelect,
+ style,
+ isActive,
+ isDisabled,
+ externalClassName,
+ mainCategory,
+ gender,
+ isMulti,
+ setPreview
+ } = props;
+
+ const getClassNamesName = () => {
+ return classNames('AttributeSelect', externalClassName, {
+ active: isActive,
+ disabled: isDisabled
+ });
+ };
+
+ const renderItem = (item: {url: string; title: string}) => {
+ const {url, title} = item;
+ return (
+ = ({
+ taskStatus,
+ updateTaskStatusAction,
+ updateActivePopupTypeAction
+}) => {
+ React.useEffect(() => {
+ const loadData = async () => {
+ const {data} = await APIService.getTaskStatus();
+ updateTaskStatusAction(data.data);
+ };
+ loadData();
+ }, []);
+
+ const {averageTPD, currentAverageTPD, me, highestRanker} = taskStatus;
+
+ const getPercent = (value: number, margin: number = 0) =>
+ `calc(${Math.min(value / averageTPD, 1) * 100}% - ${margin}px`;
+
+ const getPercentInverse = (value: number, margin: number = 0) =>
+ `calc(${100 - Math.min(value / averageTPD, 1) * 100}% + ${margin}px`;
+
+ const overHalf = (value: number) =>
+ Math.min(value / averageTPD, 1) * 100 > 50;
+
+ const cropPercent = (value: number, crop: number = 25) => {
+ const progress = Math.min(value / averageTPD, 1) * 100;
+ return progress < crop || progress > 100 - crop;
+ };
+
+ const openPopup = () =>
+ updateActivePopupTypeAction(PopupWindowType.PERFORMANCE);
+
+ return (
+
+ ) => {
+ event.stopPropagation();
+ if (onClick) {
+ onClick();
+ }
+ };
+
+ return (
+
)
};
diff --git a/src/views/EditorView/Editor/Editor.scss b/src/views/EditorView/Editor/Editor.scss
index a0c97f76..e9f2601c 100644
--- a/src/views/EditorView/Editor/Editor.scss
+++ b/src/views/EditorView/Editor/Editor.scss
@@ -1,86 +1,96 @@
@import '../../../settings/Settings';
.Editor {
- align-self: stretch;
- flex: 1;
- position: relative;
-
- .ViewPortContent {
+ align-self: stretch;
+ flex: 1;
position: relative;
- .track-horizontal {
- cursor: none;
- }
+ .ViewPortContent {
+ position: relative;
- .track-vertical {
- cursor: none;
- }
+ .track-horizontal {
+ cursor: none;
+ }
+
+ .track-vertical {
+ cursor: none;
+ }
- .ImageCanvas {
- position: absolute;
- top: 0;
- left: 0;
- cursor: none;
+ .ImageCanvas {
+ position: absolute;
+ top: 0;
+ left: 0;
+ cursor: none;
- &:hover {
- cursor: none;
- }
+ &:hover {
+ cursor: none;
+ }
+ }
}
- }
- .MousePositionIndicator {
- position: absolute;
- color: white;
- font-size: 12px;
- background-color: $darkThemeThirdColor;
- opacity: 0.6;
- padding: 5px;
- user-select: none;
- pointer-events: none;
- z-index: 100;
- width: fit-content;
- }
+ .MousePositionIndicator {
+ position: absolute;
+ color: white;
+ font-size: 12px;
+ background-color: $darkThemeThirdColor;
+ opacity: 0.6;
+ padding: 5px;
+ user-select: none;
+ pointer-events: none;
+ z-index: 100;
+ width: fit-content;
+ }
- .Cursor {
- position: absolute;
- width: 6px;
- height: 6px;
- transition: width 0.05s ease-out, height 0.05s ease-out, background-color 0.05s ease-in;
- transform: translate(-50%, -50%);
- border-radius: 50%;
- pointer-events: none;
- border: 2px solid white;
- background-color: white;
- z-index: 100000;
+ .Cursor {
+ position: absolute;
+ width: 6px;
+ height: 6px;
+ transition: width 0.05s ease-out, height 0.05s ease-out,
+ background-color 0.05s ease-in;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ pointer-events: none;
+ border: 2px solid white;
+ background-color: white;
+ z-index: 100000;
- > img {
- position: absolute;
- max-width: 20px;
- max-height: 20px;
- filter: brightness(0) invert(1);
- bottom: calc(50% + 10px);
- left: calc(50% + 10px);
- display: none;
- user-select: none;
- }
+ > img {
+ position: absolute;
+ max-width: 20px;
+ max-height: 20px;
+ filter: brightness(0) invert(1);
+ bottom: calc(50% + 10px);
+ left: calc(50% + 10px);
+ display: none;
+ user-select: none;
+ }
- &.move, &.add, &.resize, &.close {
- width: 24px;
- height: 24px;
- background-color: transparent;
- }
+ &.move,
+ &.add,
+ &.resize,
+ &.close {
+ width: 24px;
+ height: 24px;
+ background-color: transparent;
+ }
- &.grabbing {
- width: 18px;
- height: 18px;
- background-color: rgba(255, 255, 255, 0.5);
- border: 2px solid transparent;
- }
+ &.grabbing {
+ width: 18px;
+ height: 18px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border: 2px solid transparent;
+ }
- &.move, &.add, &.resize, &.close, &.cancel, &.grab, &.grabbing {
- > img {
- display: block;
- }
+ &.move,
+ &.add,
+ &.resize,
+ &.close,
+ &.cancel,
+ &.grab,
+ &.grabbing {
+ > img {
+ display: block;
+ }
+ }
}
- }
-}
\ No newline at end of file
+}
diff --git a/src/views/EditorView/Editor/Editor.tsx b/src/views/EditorView/Editor/Editor.tsx
index 530dc6d1..60c3107a 100644
--- a/src/views/EditorView/Editor/Editor.tsx
+++ b/src/views/EditorView/Editor/Editor.tsx
@@ -26,7 +26,7 @@ import LabelControlPanel from '../LabelControlPanel/LabelControlPanel';
import {IPoint} from '../../../interfaces/IPoint';
import {RenderEngineUtil} from '../../../utils/RenderEngineUtil';
import {LabelStatus} from '../../../data/enums/LabelStatus';
-import {isEqual} from 'lodash';
+import _, {isEqual} from 'lodash';
import {AIActions} from '../../../logic/actions/AIActions';
interface IProps {
@@ -42,18 +42,17 @@ interface IProps {
}
interface IState {
- viewPortSize: ISize
+ viewPortSize: ISize;
}
class Editor extends React.Component
{selectRoute()}
-
- );
+ );
+};
+
+const mapDispatchToProps = {
+ updateAuthDataAction: updateAuthData,
+ updateActivePopupTypeAction: updateActivePopupType
};
const mapStateToProps = (state: AppState) => ({
projectType: state.general.projectData.type,
windowSize: state.general.windowSize,
ObjectDetectorLoaded: state.ai.isObjectDetectorLoaded,
- PoseDetectionLoaded: state.ai.isPoseDetectorLoaded
+ PoseDetectionLoaded: state.ai.isPoseDetectorLoaded,
+ authData: state.auth.authData
});
-export default connect(
- mapStateToProps
-)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);
diff --git a/src/assets/icons/LogoLogin.svg b/src/assets/icons/LogoLogin.svg
new file mode 100644
index 00000000..bb751c4b
--- /dev/null
+++ b/src/assets/icons/LogoLogin.svg
@@ -0,0 +1,66 @@
+
diff --git a/src/assets/icons/MoveIcon.svg b/src/assets/icons/MoveIcon.svg
new file mode 100644
index 00000000..d67400f1
--- /dev/null
+++ b/src/assets/icons/MoveIcon.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/icons/TextLogin.svg b/src/assets/icons/TextLogin.svg
new file mode 100644
index 00000000..e227929a
--- /dev/null
+++ b/src/assets/icons/TextLogin.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/bi_eye.svg b/src/assets/icons/bi_eye.svg
new file mode 100644
index 00000000..8bb2f53e
--- /dev/null
+++ b/src/assets/icons/bi_eye.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/icons/chevron-right-black.svg b/src/assets/icons/chevron-right-black.svg
new file mode 100644
index 00000000..5704297c
--- /dev/null
+++ b/src/assets/icons/chevron-right-black.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/chevron-right-white.svg b/src/assets/icons/chevron-right-white.svg
new file mode 100644
index 00000000..b60acb8a
--- /dev/null
+++ b/src/assets/icons/chevron-right-white.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/icons/codicon_account.svg b/src/assets/icons/codicon_account.svg
new file mode 100644
index 00000000..380bae5d
--- /dev/null
+++ b/src/assets/icons/codicon_account.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/assets/icons/index.js b/src/assets/icons/index.js
new file mode 100644
index 00000000..0ca70328
--- /dev/null
+++ b/src/assets/icons/index.js
@@ -0,0 +1,9 @@
+export { ReactComponent as IconLogo } from "./logo.svg";
+export { ReactComponent as LogoLogin } from './LogoLogin.svg'
+export { ReactComponent as TextLogin } from './TextLogin.svg'
+export { ReactComponent as CodiconAccount } from './codicon_account.svg'
+export { ReactComponent as Eye } from './bi_eye.svg'
+export { ReactComponent as MoveIcon } from './MoveIcon.svg'
+export { ReactComponent as Package } from './package.svg'
+export { ReactComponent as ChevronRightBlack } from './chevron-right-black.svg'
+export { ReactComponent as ChevronRightWhite } from './chevron-right-white.svg'
\ No newline at end of file
diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg
new file mode 100644
index 00000000..0a5e0cc5
--- /dev/null
+++ b/src/assets/icons/logo.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/icons/package.svg b/src/assets/icons/package.svg
new file mode 100644
index 00000000..ec3985cd
--- /dev/null
+++ b/src/assets/icons/package.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/img/backgroundImage.png b/src/assets/img/backgroundImage.png
new file mode 100644
index 00000000..e1a7f5c8
Binary files /dev/null and b/src/assets/img/backgroundImage.png differ
diff --git a/src/assets/img/groupPeople.png b/src/assets/img/groupPeople.png
new file mode 100644
index 00000000..95e3c561
Binary files /dev/null and b/src/assets/img/groupPeople.png differ
diff --git a/src/components/WrapperLogin/index.scss b/src/components/WrapperLogin/index.scss
new file mode 100644
index 00000000..fa222797
--- /dev/null
+++ b/src/components/WrapperLogin/index.scss
@@ -0,0 +1,27 @@
+
+.login {
+ &__container{
+ height: 100vh ;
+ width: 100%;
+ }
+
+ &__logoLogin{
+ position: absolute;
+ top: 70px;
+ left: 147px;
+ }
+ &__textImageLogin{
+ position: absolute;
+ left: 147px;
+ top: 236px;
+ }
+
+
+
+ @media screen and (max-width: 768px) {
+ &__parent {
+ min-width: 100%;
+ }
+ }
+}
+
diff --git a/src/components/WrapperLogin/index.tsx b/src/components/WrapperLogin/index.tsx
new file mode 100644
index 00000000..28c73da2
--- /dev/null
+++ b/src/components/WrapperLogin/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { TextLogin, LogoLogin } from "../../assets/icons"
+import GroupImageSrc from "../../assets/img/groupPeople.png"
+import "./index.scss"
+function WrapperLogin(props) {
+ const { children } = props
+ return (
+ <>
+
+ {children}
+ 
+
+
+ );
+}
+export default WrapperLogin;
diff --git a/src/data/ExportFormatData.ts b/src/data/ExportFormatData.ts
index 540536a5..2c618128 100644
--- a/src/data/ExportFormatData.ts
+++ b/src/data/ExportFormatData.ts
@@ -6,6 +6,10 @@ export type ExportFormatDataMap = Record setPreview(url.replace('_s.png', '.png'))}
+ onMouseLeave={() => setPreview(null)}>
+ 
+ {title}
+
+ );
+ };
+
+ const renderGenderItem = (gender: number) => {
+ const genderCode = GENDER_CODE[gender.toString()];
+ const url =
+ gender === GENDER.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/genders/${gender}_s.png`;
+ return {
+ value: gender,
+ label: renderItem({
+ url,
+ title: `${lang.GENDER[genderCode]} (${genderCode})`
+ })
+ };
+ };
+
+ const renderSourceItem = (source: number) => {
+ const sourceCode = SOURCE_CODE[source.toString()];
+ const url =
+ source === SOURCE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/sources/${source}_s.png`;
+ return {
+ value: source,
+ label: renderItem({
+ url,
+ title: `${lang.SOURCE[sourceCode]} (${sourceCode})`
+ })
+ };
+ };
+
+ const renderMainCategory = (mainCategory: any) => {
+ const index = Object.values(MAIN_CATEGORY_CODE).indexOf(mainCategory);
+ const mainCategoryCode = Object.keys(MAIN_CATEGORY_CODE)[index];
+ const url =
+ mainCategory === MAIN_CATEGORY_CODE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/main_cats/${mainCategory}_s.png`;
+ return {
+ value: mainCategory,
+ label: renderItem({
+ url,
+ title: `${lang.MAIN_CATEGORY[mainCategoryCode]} (${mainCategoryCode})`
+ })
+ };
+ };
+
+ const renderSubCategory = (subCategory: any) => {
+ const index = Object.values(SUB_CATEGORY_CODE).indexOf(subCategory);
+ const subCategoryCode = Object.keys(SUB_CATEGORY_CODE)[index];
+ const url =
+ subCategory === SUB_CATEGORY_CODE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/sub_cats/${subCategory}_s.png`;
+
+ return {
+ value: subCategory,
+ label: renderItem({
+ url,
+ title: `${lang.SUB_CATEGORY[subCategoryCode]} (${subCategoryCode})`
+ })
+ };
+ };
+
+ const renderColor = (color: any) => {
+ const index = Object.values(ITEM_COLOR).indexOf(color);
+ const colorCode = Object.keys(ITEM_COLOR)[index];
+ const url =
+ color === ITEM_COLOR.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/colors/${color}_s.png`;
+
+ return {
+ value: color,
+ label: renderItem({
+ url,
+ title: `${lang.ITEM_COLOR[colorCode]} (${colorCode})`
+ })
+ };
+ };
+
+ const renderPattern = (pattern: any) => {
+ const index = Object.values(ITEM_PATTERN).indexOf(pattern);
+ const patternCode = Object.keys(ITEM_PATTERN)[index];
+ const url =
+ pattern === ITEM_PATTERN.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/patterns/${pattern}_s.png`;
+
+ return {
+ value: pattern,
+ label: renderItem({
+ url,
+ title: `${lang.ITEM_PATTERN[patternCode]} (${patternCode})`
+ })
+ };
+ };
+
+ const renderStyle = (style: any) => {
+ const url =
+ style.seq === -1
+ ? Settings.UNKNOWN_URL
+ : gender === GENDER.MAN
+ ? `guides/icons/man_style/${style.m}_s.png`
+ : `guides/icons/woman_style/${style.f}_s.png`;
+
+ return {
+ value: style.name.toUpperCase(),
+ label: renderItem({
+ url,
+ title: `${lang.FASHION_STYLE[style.slug]} (${style.slug})`
+ })
+ };
+ };
+
+ const renderHumanId = (uuid: any) => {
+ const imageData = LabelsSelector.getActiveImageData();
+ const index = _.findIndex(imageData.humans, {uuid});
+ return uuid === '-1'
+ ? {value: '-1', label: UNKNOWN
}
+ : {
+ value: uuid,
+ label: {index.toString()}
+ };
+ };
+
+ const selectOptions = () => {
+ switch (type) {
+ case ATTRIBUTE_TYPE.GENDER:
+ return Object.values(GENDER).map((gender) =>
+ renderGenderItem(gender)
+ );
+ case ATTRIBUTE_TYPE.SOURCE:
+ return Object.values(SOURCE).map((source) =>
+ renderSourceItem(source)
+ );
+ case ATTRIBUTE_TYPE.MAIN_CATEGORY:
+ return Object.values(MAIN_CATEGORY_CODE)
+ .filter((v) => typeof v === 'number' && v !== -1)
+ .map((value) => renderMainCategory(value));
+ case ATTRIBUTE_TYPE.SUB_CATEGORY: {
+ const subCategoryCodes =
+ mainCategory > 0
+ ? ITEM_CATEGORY[MAIN_CATEGORY_CODE[mainCategory]]
+ : Object.values(SUB_CATEGORY_CODE).filter(
+ (value) =>
+ typeof value === 'number' && value !== -1
+ );
+
+ console.log('subCategoryCodes = ', subCategoryCodes);
+ return subCategoryCodes.map((subcategory) =>
+ renderSubCategory(subcategory)
+ );
+ }
+ case ATTRIBUTE_TYPE.ITEM_COLOR:
+ return Object.values(ITEM_COLOR)
+ .filter((value) => typeof value === 'number')
+ .map((value) => renderColor(value));
+ case ATTRIBUTE_TYPE.ITEM_PATTERN:
+ return Object.values(ITEM_PATTERN)
+ .filter((value) => typeof value === 'number')
+ .map((value) => renderPattern(value));
+
+ case ATTRIBUTE_TYPE.FASHION_STYLE: {
+ console.log('gender = ', gender);
+ const styles =
+ gender === GENDER.MAN
+ ? FASHION_STYLE_MAN
+ : FASHION_STYLE_WOMAN;
+ return styles.map((style) => renderStyle(style));
+ }
+ case ATTRIBUTE_TYPE.HUMAN_ID: {
+ const imageData = LabelsSelector.getActiveImageData();
+ return [
+ ...imageData.humans.map((human) =>
+ renderHumanId(human.uuid)
+ ),
+ {value: '-1', label: UNKNOWN
}
+ ];
+ }
+ default:
+ return [];
+ }
+ };
+
+ const options = React.useMemo(
+ () => selectOptions(),
+ [type, gender, mainCategory]
+ );
+
+ const renderValue = (value, type) => {
+ switch (type) {
+ case ATTRIBUTE_TYPE.GENDER:
+ return renderGenderItem(value);
+ case ATTRIBUTE_TYPE.SOURCE:
+ return renderSourceItem(value);
+ case ATTRIBUTE_TYPE.MAIN_CATEGORY:
+ return renderMainCategory(value);
+ case ATTRIBUTE_TYPE.SUB_CATEGORY:
+ return renderSubCategory(value);
+ case ATTRIBUTE_TYPE.ITEM_COLOR:
+ return renderColor(value);
+ case ATTRIBUTE_TYPE.ITEM_PATTERN:
+ return renderPattern(value);
+ case ATTRIBUTE_TYPE.FASHION_STYLE:
+ return value.map((style) => renderStyle(style));
+ case ATTRIBUTE_TYPE.HUMAN_ID:
+ return renderHumanId(value);
+ default:
+ return null;
+ }
+ };
+
+ const handleOnSelect = (selectedItem: any) => {
+ switch (type) {
+ case ATTRIBUTE_TYPE.FASHION_STYLE:
+ onSelect(
+ FASHION_STYLE.filter((style) =>
+ selectedItem
+ .map((item) => item.value)
+ .includes(style.name.toUpperCase())
+ ),
+ type
+ );
+ return;
+ default:
+ onSelect(selectedItem.value, type);
+ }
+ };
+
+ return (
+
+
+ );
+};
diff --git a/src/views/Common/ImageButton/ImageButton.scss b/src/views/Common/ImageButton/ImageButton.scss
index 8f21ac21..b96974a8 100644
--- a/src/views/Common/ImageButton/ImageButton.scss
+++ b/src/views/Common/ImageButton/ImageButton.scss
@@ -1,31 +1,31 @@
.ImageButton {
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- align-content: center;
- align-items: center;
- border-radius: 50%;
- box-sizing: border-box;
- transition: background-color 0.7s ease;
- margin: 5px 2px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-content: center;
+ align-items: center;
+ border-radius: 50%;
+ box-sizing: border-box;
+ transition: background-color 0.7s ease;
+ margin: 5px 2px;
- > img {
- user-select: none;
- }
+ > img {
+ user-select: none;
+ }
- &:hover ~ .Cursor {
- width: 20px;
- height: 20px;
- border-color: transparent;
- background-color: rgba(0, 0, 0, 0.2);
- }
+ &:hover ~ .Cursor {
+ width: 20px;
+ height: 20px;
+ border-color: transparent;
+ background-color: rgba(0, 0, 0, 0.2);
+ }
}
.ImageButton:not(.disabled):hover {
- cursor: pointer;
+ cursor: pointer;
}
.ImageButton:hover {
- background-color: rgba(255, 255, 255, 0.3);
-}
\ No newline at end of file
+ background-color: rgba(255, 255, 255, 0.3);
+}
diff --git a/src/views/Common/PerformanceProgress/PerformanceProgress.scss b/src/views/Common/PerformanceProgress/PerformanceProgress.scss
new file mode 100644
index 00000000..30f8ce8f
--- /dev/null
+++ b/src/views/Common/PerformanceProgress/PerformanceProgress.scss
@@ -0,0 +1,70 @@
+@import '../../../settings/Settings';
+
+.PerformanceProgress {
+ display: flex;
+ flex: 1;
+ height: 100%;
+ align-items: flex-end;
+ margin-bottom: 8px;
+ margin-left: 74px;
+ margin-right: 230px;
+ position: relative;
+ .Progress {
+ position: relative;
+ display: flex;
+ flex: 1;
+ border-radius: 10px;
+ height: 10px;
+ overflow-y: hidden;
+ background-color: $darkThemeThirdColor;
+ color: white;
+ font-size: 0.5em;
+ }
+ .Filler {
+ height: 100%;
+ background-color: $secondaryColor;
+ min-width: 10px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ transition: width 1s ease-in-out;
+ }
+ .AverageLabel {
+ margin-right: -25px;
+ }
+ .Me {
+ position: absolute;
+ top: 1px;
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ background-color: white;
+ opacity: 0.9;
+ transition: left 1s ease-in-out;
+ }
+ .Name {
+ display: flex;
+ flex-direction: row;
+ top: 0;
+ position: absolute;
+ font-size: 8px;
+ transition: left right 1s ease-in-out;
+ }
+ .Reverse {
+ flex-direction: row-reverse;
+ }
+ .FlipV {
+ display: inline-block;
+ transform: scale(-1, 1);
+ }
+ .Ranker {
+ position: absolute;
+ top: 1px;
+ width: 8px;
+ height: 8px;
+ border-radius: 4px;
+ border: 1px solid white;
+ background-color: red;
+ transition: left 1s ease-in-out;
+ }
+}
diff --git a/src/views/Common/PerformanceProgress/PerformanceProgress.tsx b/src/views/Common/PerformanceProgress/PerformanceProgress.tsx
new file mode 100644
index 00000000..88f6fe9b
--- /dev/null
+++ b/src/views/Common/PerformanceProgress/PerformanceProgress.tsx
@@ -0,0 +1,116 @@
+import * as React from 'react';
+import {connect} from 'react-redux';
+import {APIService} from 'services/API';
+import {AppState} from 'store';
+import {updateTaskStatus} from 'store/performance/actionCreators';
+import {TaskStatus} from 'store/performance/types';
+import './PerformanceProgress.scss';
+import arrowDownLeft from './images/arrow-down-left.png';
+import classNames from 'classnames';
+
+import menuIcon from './images/dots-horizontal-circle.png';
+import {updateActivePopupType} from 'store/general/actionCreators';
+import {PopupWindowType} from 'data/enums/PopupWindowType';
+
+interface IProps {
+ taskStatus: TaskStatus;
+ updateTaskStatusAction: (taskStatus: TaskStatus) => any;
+ updateActivePopupTypeAction: (popupType: PopupWindowType) => any;
+}
+
+const PerformanceProgress: React.FC
+ 
+
+ );
+};
+
+const mapDispatchToProps = {
+ updateTaskStatusAction: updateTaskStatus,
+ updateActivePopupTypeAction: updateActivePopupType
+};
+
+const mapStateToProps = (state: AppState) => ({
+ taskStatus: state.performance.taskStatus
+});
+
+export default connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(PerformanceProgress);
diff --git a/src/views/Common/PerformanceProgress/images/arrow-down-left.png b/src/views/Common/PerformanceProgress/images/arrow-down-left.png
new file mode 100644
index 00000000..d9c98479
Binary files /dev/null and b/src/views/Common/PerformanceProgress/images/arrow-down-left.png differ
diff --git a/src/views/Common/PerformanceProgress/images/dots-horizontal-circle.png b/src/views/Common/PerformanceProgress/images/dots-horizontal-circle.png
new file mode 100644
index 00000000..de42bbda
Binary files /dev/null and b/src/views/Common/PerformanceProgress/images/dots-horizontal-circle.png differ
diff --git a/src/views/Common/TagButton/TagButton.scss b/src/views/Common/TagButton/TagButton.scss
new file mode 100644
index 00000000..6f7a6c0d
--- /dev/null
+++ b/src/views/Common/TagButton/TagButton.scss
@@ -0,0 +1,34 @@
+@import '../../../settings/Settings';
+
+.TagButton {
+ display: block;
+ cursor: pointer;
+ user-select: none;
+ line-height: 0;
+ word-wrap: break-word;
+ padding: 10px 15px;
+ text-decoration: none;
+ box-shadow: black 0 0 0 2px inset;
+ color: black;
+ margin: initial;
+ border-radius: 12px;
+ transition: 0.3s ease-in-out;
+ background: transparent;
+ font-weight: 700;
+
+ > a {
+ text-decoration: none;
+ color: black;
+ }
+
+ &:hover {
+ box-shadow: inherit;
+ color: white;
+ background-color: black;
+
+ > a {
+ text-decoration: none;
+ color: white;
+ }
+ }
+}
diff --git a/src/views/Common/TagButton/TagButton.tsx b/src/views/Common/TagButton/TagButton.tsx
new file mode 100644
index 00000000..2cf8bda2
--- /dev/null
+++ b/src/views/Common/TagButton/TagButton.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import './TagButton.scss';
+import classNames from 'classnames';
+
+interface IProps {
+ key?: string;
+ label: string;
+ onClick?: () => any;
+ style?: React.CSSProperties;
+ isActive?: boolean;
+ isDisabled?: boolean;
+ externalClassName?: string;
+}
+
+export const TagButton = (props: IProps) => {
+ const {
+ key,
+ label,
+ onClick,
+ style,
+ isActive,
+ isDisabled,
+ externalClassName
+ } = props;
+
+ const getClassName = () => {
+ return classNames('TagButton', externalClassName, {
+ active: isActive,
+ disabled: isDisabled
+ });
+ };
+
+ const onClickHandler = (
+ event: React.MouseEvent
+
+
+ {cropPercent(currentAverageTPD, 10) ? null : (
+ average speed
+ )}
+
+
+
+
+ 
+ {me.displayName}
+
+
+ {label}
+
+ );
+};
diff --git a/src/views/Common/TextButton/TextButton.tsx b/src/views/Common/TextButton/TextButton.tsx
index 09ed9ad4..06c1c20f 100644
--- a/src/views/Common/TextButton/TextButton.tsx
+++ b/src/views/Common/TextButton/TextButton.tsx
@@ -10,10 +10,11 @@ interface IProps {
isActive?:boolean;
isDisabled?:boolean;
externalClassName?:string;
+ icon?: any
}
export const TextButton = (props:IProps) => {
- const { key, label, onClick, style, isActive, isDisabled, externalClassName} = props;
+ const { key, label, onClick, style, isActive, isDisabled, externalClassName, icon} = props;
const getClassName = () => {
return classNames(
@@ -40,7 +41,7 @@ export const TextButton = (props:IProps) => {
key={key}
style={style}
>
- {label}
+ {label} {icon || ""}
EditorModel.editor = ref}
- draggable={false}
- >
+ className="Editor"
+ ref={(ref) => (EditorModel.editor = ref)}
+ draggable={false}>
EditorModel.viewPortScrollbars = ref}
- renderTrackHorizontal={props => }
- renderTrackVertical={props => }
- onUpdate={this.onScrollbarsUpdate}
- >
-
+ ref={(ref) => (EditorModel.viewPortScrollbars = ref)}
+ renderTrackHorizontal={(props) => (
+
+ )}
+ renderTrackVertical={(props) => (
+
+ )}
+ onUpdate={this.onScrollbarsUpdate}>
+
= (
- {
- windowSize,
- activeImageIndex,
- imagesData,
- activeContext,
- projectType
- }) => {
+const EditorContainer: React.FC = ({
+ windowSize,
+ activeImageIndex,
+ imagesData,
+ activeContext,
+ projectType
+}) => {
const [leftTabStatus, setLeftTabStatus] = useState(true);
const [rightTabStatus, setRightTabStatus] = useState(true);
+ const [guideTabStatus, setGuideTabStatus] = useState(true);
const calculateEditorSize = (): ISize => {
if (windowSize) {
- const leftTabWidth = leftTabStatus ? Settings.SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX : Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX;
- const rightTabWidth = rightTabStatus ? Settings.SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX : Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX;
+ const leftTabWidth = leftTabStatus
+ ? Settings.SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX
+ : Settings.SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX;
+ const rightTabWidth = rightTabStatus
+ ? Settings.LABEL_SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX
+ : Settings.LABEL_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX;
+ const guideTabWidth = guideTabStatus
+ ? Settings.GUIDE_SIDE_NAVIGATION_BAR_WIDTH_OPEN_PX
+ : Settings.GUIDE_SIDE_NAVIGATION_BAR_WIDTH_CLOSED_PX;
return {
- width: windowSize.width - leftTabWidth - rightTabWidth,
- height: windowSize.height - Settings.TOP_NAVIGATION_BAR_HEIGHT_PX
- - Settings.EDITOR_BOTTOM_NAVIGATION_BAR_HEIGHT_PX - Settings.EDITOR_TOP_NAVIGATION_BAR_HEIGHT_PX,
- }
- }
- else
- return null;
+ width:
+ windowSize.width -
+ leftTabWidth -
+ rightTabWidth -
+ guideTabWidth,
+ height:
+ windowSize.height -
+ Settings.TOP_NAVIGATION_BAR_HEIGHT_PX -
+ Settings.EDITOR_BOTTOM_NAVIGATION_BAR_HEIGHT_PX -
+ Settings.EDITOR_TOP_NAVIGATION_BAR_HEIGHT_PX
+ };
+ } else return null;
};
const leftSideBarButtonOnClick = () => {
- if (!leftTabStatus)
- ContextManager.switchCtx(ContextType.LEFT_NAVBAR);
+ if (!leftTabStatus) ContextManager.switchCtx(ContextType.LEFT_NAVBAR);
else if (leftTabStatus && activeContext === ContextType.LEFT_NAVBAR)
ContextManager.restoreCtx();
@@ -60,24 +79,25 @@ const EditorContainer: React.FC = (
};
const leftSideBarCompanionRender = () => {
- return <>
- = (
};
const rightSideBarCompanionRender = () => {
- return <>
- = (
renderContent={leftSideBarRender}
key="left-side-navigation-bar"
/>
-
EditorModel.mousePositionIndicator = ref}
+ className="MousePositionIndicator"
+ ref={(ref) => (EditorModel.mousePositionIndicator = ref)}
draggable={false}
/>
@@ -281,7 +352,4 @@ const mapStateToProps = (state: AppState) => ({
zoom: state.general.zoom
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(Editor);
+export default connect(mapStateToProps, mapDispatchToProps)(Editor);
diff --git a/src/views/EditorView/EditorContainer/EditorContainer.scss b/src/views/EditorView/EditorContainer/EditorContainer.scss
index 8ffbe61d..955e33ad 100644
--- a/src/views/EditorView/EditorContainer/EditorContainer.scss
+++ b/src/views/EditorView/EditorContainer/EditorContainer.scss
@@ -1,26 +1,35 @@
@import '../../../settings/Settings';
.EditorContainer {
- align-self: stretch;
- flex: 0 0 calc(100% - #{$topNavigationBarHeight});
- height: calc(100% - #{$topNavigationBarHeight});
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- .EditorWrapper {
align-self: stretch;
- flex: 1;
- min-width: 0;
+ flex: 0 0 calc(100% - #{$topNavigationBarHeight});
+ height: calc(100% - #{$topNavigationBarHeight});
+
display: flex;
- flex-direction: column;
+ flex-direction: row;
flex-wrap: nowrap;
- justify-content: center;
+ justify-content: flex-start;
align-items: center;
- align-content: center;
- }
-}
\ No newline at end of file
+ align-content: flex-start;
+
+ .EditorWrapper {
+ align-self: stretch;
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
+ .styleLabel {
+ color: white;
+ background-color: $secondaryColor;
+ height: 3em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding-top: 1.5em;
+ padding-left: 0.5em;
+ }
+}
diff --git a/src/views/EditorView/EditorContainer/EditorContainer.tsx b/src/views/EditorView/EditorContainer/EditorContainer.tsx
index ccfda6df..4d1f2666 100644
--- a/src/views/EditorView/EditorContainer/EditorContainer.tsx
+++ b/src/views/EditorView/EditorContainer/EditorContainer.tsx
@@ -1,22 +1,30 @@
import React, {useState} from 'react';
-import {connect} from "react-redux";
-import {Direction} from "../../../data/enums/Direction";
-import {ISize} from "../../../interfaces/ISize";
-import {Settings} from "../../../settings/Settings";
-import {AppState} from "../../../store";
-import {ImageData} from "../../../store/labels/types";
-import ImagesList from "../SideNavigationBar/ImagesList/ImagesList";
-import LabelsToolkit from "../SideNavigationBar/LabelsToolkit/LabelsToolkit";
-import {SideNavigationBar} from "../SideNavigationBar/SideNavigationBar";
-import {VerticalEditorButton} from "../VerticalEditorButton/VerticalEditorButton";
+import {connect} from 'react-redux';
+import {Direction} from '../../../data/enums/Direction';
+import {ISize} from '../../../interfaces/ISize';
+import {Settings} from '../../../settings/Settings';
+import {AppState} from '../../../store';
+import {ImageData} from '../../../store/labels/types';
+import ImagesList from '../SideNavigationBar/ImagesList/ImagesList';
+import LabelsToolkit from '../SideNavigationBar/LabelsToolkit/LabelsToolkit';
+import {SideNavigationBar} from '../SideNavigationBar/SideNavigationBar';
+import {VerticalEditorButton} from '../VerticalEditorButton/VerticalEditorButton';
import './EditorContainer.scss';
-import Editor from "../Editor/Editor";
-import {ContextManager} from "../../../logic/context/ContextManager";
-import {ContextType} from "../../../data/enums/ContextType";
-import EditorBottomNavigationBar from "../EditorBottomNavigationBar/EditorBottomNavigationBar";
-import EditorTopNavigationBar from "../EditorTopNavigationBar/EditorTopNavigationBar";
-import {ProjectType} from "../../../data/enums/ProjectType";
-
+import Editor from '../Editor/Editor';
+import {ContextManager} from '../../../logic/context/ContextManager';
+import {ContextType} from '../../../data/enums/ContextType';
+import EditorBottomNavigationBar from '../EditorBottomNavigationBar/EditorBottomNavigationBar';
+import EditorTopNavigationBar from '../EditorTopNavigationBar/EditorTopNavigationBar';
+import {ProjectType} from '../../../data/enums/ProjectType';
+import {
+ FASHION_STYLE,
+ FASHION_STYLE_CODE_FOR_MAN,
+ FASHION_STYLE_CODE_FOR_WOMAN,
+ GENDER
+} from '../../../data/enums/ItemType';
+import _ from 'lodash';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {vi as lang} from '../../../lang';
interface IProps {
windowSize: ISize;
activeImageIndex: number;
@@ -25,34 +33,45 @@ interface IProps {
projectType: ProjectType;
}
-const EditorContainer: React.FC EditorModel.cursor = ref}
- draggable={false}
- >
+ className={EditorUtil.getCursorStyle(
+ this.props.customCursorStyle
+ )}
+ ref={(ref) => (EditorModel.cursor = ref)}
+ draggable={false}>
})
+ {activeImageData.guideStyles
+ .map((guide) => {
+ if (guide?.seq) {
+ return parseInt(guide.seq);
+ } else {
+ return activeGender === GENDER.WOMAN
+ ? FASHION_STYLE_CODE_FOR_WOMAN.BASIC
+ : FASHION_STYLE_CODE_FOR_MAN.GENTLEMAN;
+ }
+ })
+ .filter((style) => style !== 0)
+ .map((style) => {
+ // console.log('style == ', style);
+ const images = _.range(5).map((i) => {
+ const st = _.find(FASHION_STYLE, {seq: style});
+ const folderName =
+ st.gender === 'M'
+ ? 2
+ : st.gender === 'F'
+ ? 3
+ : activeGender + 1;
+ const src = `guides/${folderName}/${folderName}_${style}/${
+ i + 1
+ }.jpg`;
+ // console.log('src', src);
+
+ return (
+ 
+ );
+ });
+
+ const {name: styleString = 'unknown'} = _.find(
+ activeImageData.guideStyles,
+ {seq: `${style}`}
+ ) as {seq: string; name: string};
+ return (
+
+ );
+ } else {
+ return ;
+ }
};
return (
@@ -110,13 +230,22 @@ const EditorContainer: React.FC
+
+ );
+ })}
+
+ {
+ lang.FASHION_STYLE[
+ styleString.toLowerCase()
+ ]
+ }
+ ({styleString})
+
+ {images}
+ renderGuide()}
+ key="guide-navigation-bar"
+ />
+
ContextManager.switchCtx(ContextType.EDITOR)}
- key="editor-wrapper"
- >
- {projectType === ProjectType.OBJECT_DETECTION && = (
({
projectType: state.general.projectData.type
});
-export default connect(
- mapStateToProps
-)(EditorContainer);
\ No newline at end of file
+export default connect(mapStateToProps)(EditorContainer);
diff --git a/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.scss b/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.scss
index d27b1ed2..6f7a0b6d 100644
--- a/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.scss
+++ b/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.scss
@@ -1,26 +1,12 @@
@import '../../../settings/Settings';
.EditorTopNavigationBar {
- align-self: stretch;
- height: $editorTopNavigationBarHeight;
- border-bottom: solid 1px $darkThemeFirstColor;
- background-color: $darkThemeSecondColor;
- user-select: none;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- padding: 0 5px;
-
- &.with-context {
- background-color: $darkThemeForthColor;
- }
-
- .ButtonWrapper {
+ align-self: stretch;
+ height: $editorTopNavigationBarHeight;
+ border-bottom: solid 1px $darkThemeFirstColor;
+ background-color: $darkThemeSecondColor;
+ user-select: none;
+
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@@ -28,29 +14,43 @@
align-items: center;
align-content: flex-start;
- &:not(:last-child) {
- padding-right: 5px;
- margin-right: 5px;
- border-right: solid 1px $darkThemeFirstColor;
- }
- }
-
- .ImageButton {
- transition: transform 0.3s;
- margin: 0 2px;
+ padding: 0 5px;
- img {
- filter: brightness(0) invert(1);
+ &.with-context {
+ background-color: $darkThemeForthColor;
}
- &:hover {
- border-radius: 3px;
- background-color: rgba(0, 0, 0, 0.2);
+ .ButtonWrapper {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+
+ &:not(:last-child) {
+ padding-right: 5px;
+ margin-right: 5px;
+ border-right: solid 1px $darkThemeFirstColor;
+ }
}
- &.active {
- border-radius: 3px;
- background-color: rgba(0, 0, 0, 0.4);
+ .ImageButton {
+ transition: transform 0.3s;
+ margin: 0 2px;
+
+ img {
+ filter: brightness(0) invert(1);
+ }
+
+ &:hover {
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+
+ &.active {
+ border-radius: 3px;
+ background-color: $secondaryColor;
+ }
}
- }
-}
\ No newline at end of file
+}
diff --git a/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.tsx b/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.tsx
index 468cf373..8f4a9d8d 100644
--- a/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.tsx
+++ b/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.tsx
@@ -4,7 +4,11 @@ import React from 'react';
import classNames from 'classnames';
import {AppState} from '../../../store';
import {connect} from 'react-redux';
-import {updateCrossHairVisibleStatus, updateImageDragModeStatus} from '../../../store/general/actionCreators';
+import {
+ updateCrossHairVisibleStatus,
+ updateFillMode,
+ updateImageDragModeStatus
+} from '../../../store/general/actionCreators';
import {GeneralSelector} from '../../../store/selectors/GeneralSelector';
import {ViewPointSettings} from '../../../settings/ViewPointSettings';
import {ImageButton} from '../../Common/ImageButton/ImageButton';
@@ -21,7 +25,7 @@ import Fade from '@material-ui/core/Fade';
const BUTTON_SIZE: ISize = {width: 30, height: 30};
const BUTTON_PADDING: number = 10;
-const StyledTooltip = withStyles(theme => ({
+const StyledTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: '#171717',
color: '#ffffff',
@@ -29,7 +33,7 @@ const StyledTooltip = withStyles(theme => ({
fontSize: 12,
maxWidth: 200,
textAlign: 'center'
- },
+ }
}))(Tooltip);
const getButtonWithTooltip = (
@@ -38,181 +42,194 @@ const getButtonWithTooltip = (
imageSrc: string,
imageAlt: string,
isActive: boolean,
- href?:string,
- onClick?:() => any
+ href?: string,
+ onClick?: () => any
): React.ReactElement => {
- return
-
-}
+ return (
+
+
+ );
+};
interface IProps {
activeContext: ContextType;
updateImageDragModeStatusAction: (imageDragMode: boolean) => any;
updateCrossHairVisibleStatusAction: (crossHairVisible: boolean) => any;
+ updateFillModeAction: (fillMode: boolean) => any;
imageDragMode: boolean;
crossHairVisible: boolean;
+ fillMode: boolean;
activeLabelType: LabelType;
}
-const EditorTopNavigationBar: React.FC = (
- {
- activeContext,
- updateImageDragModeStatusAction,
- updateCrossHairVisibleStatusAction,
- imageDragMode,
- crossHairVisible,
- activeLabelType
- }) => {
+const EditorTopNavigationBar: React.FC = ({
+ activeContext,
+ updateImageDragModeStatusAction,
+ updateCrossHairVisibleStatusAction,
+ updateFillModeAction,
+ imageDragMode,
+ crossHairVisible,
+ fillMode,
+ activeLabelType
+}) => {
const getClassName = () => {
- return classNames(
- 'EditorTopNavigationBar',
- {
- 'with-context': activeContext === ContextType.EDITOR
- }
- );
+ return classNames('EditorTopNavigationBar', {
+ 'with-context': activeContext === ContextType.EDITOR
+ });
};
const imageDragOnClick = () => {
if (imageDragMode) {
updateImageDragModeStatusAction(!imageDragMode);
- }
- else if (GeneralSelector.getZoom() !== ViewPointSettings.MIN_ZOOM) {
+ } else if (GeneralSelector.getZoom() !== ViewPointSettings.MIN_ZOOM) {
updateImageDragModeStatusAction(!imageDragMode);
}
};
const crossHairOnClick = () => {
updateCrossHairVisibleStatusAction(!crossHairVisible);
- }
+ };
+
+ const fillOnClick = () => {
+ updateFillModeAction(!fillMode);
+ };
return (
-
-
+
+
-
- {
- getButtonWithTooltip(
- 'zoom-in',
- 'zoom in',
- 'ico/zoom-in.png',
- 'zoom-in',
- false,
- undefined,
- () => ViewPortActions.zoomIn()
- )
- }
- {
- getButtonWithTooltip(
- 'zoom-out',
- 'zoom out',
- 'ico/zoom-out.png',
- 'zoom-out',
- false,
- undefined,
- () => ViewPortActions.zoomOut()
- )
- }
- {
- getButtonWithTooltip(
- 'zoom-fit',
- 'fit image to available space',
- 'ico/zoom-fit.png',
- 'zoom-fit',
- false,
- undefined,
- () => ViewPortActions.setDefaultZoom()
- )
- }
- {
- getButtonWithTooltip(
- 'zoom-max',
- 'maximum allowed image zoom',
- 'ico/zoom-max.png',
- 'zoom-max',
- false,
- undefined,
- () => ViewPortActions.setOneForOneZoom()
- )
- }
+ = ({activePopupType}) => {
-
const getClassName = () => {
- return classNames(
- 'EditorView',
- {
- 'withPopup': !!activePopupType
- }
- );
+ return classNames('EditorView', {
+ withPopup:
+ !!activePopupType &&
+ activePopupType !== PopupWindowType.LABEL_INFO
+ });
};
return (
- {
super(props);
this.state = {
- size: null,
- }
+ size: null
+ };
}
public componentDidMount(): void {
@@ -44,8 +44,7 @@ class ImagesList extends React.Component {
}
private updateListSize = () => {
- if (!this.imagesListRef)
- return;
+ if (!this.imagesListRef) return;
const listBoundingBox = this.imagesListRef.getBoundingClientRect();
this.setState({
@@ -53,63 +52,79 @@ class ImagesList extends React.Component {
width: listBoundingBox.width,
height: listBoundingBox.height
}
- })
+ });
};
- private isImageChecked = (index:number): boolean => {
- const imageData = this.props.imagesData[index]
+ private isImageChecked = (index: number): boolean => {
+ const imageData = this.props.imagesData[index];
switch (this.props.activeLabelType) {
case LabelType.LINE:
- return imageData.labelLines.length > 0
+ return imageData.labelLines.length > 0;
case LabelType.IMAGE_RECOGNITION:
- return imageData.labelNameIds.length > 0
+ return imageData.labelNameIds.length > 0;
case LabelType.POINT:
- return imageData.labelPoints
- .filter((labelPoint: LabelPoint) => labelPoint.status === LabelStatus.ACCEPTED)
- .length > 0
+ return (
+ imageData.labelPoints.filter(
+ (labelPoint: LabelPoint) =>
+ labelPoint.status === LabelStatus.ACCEPTED
+ ).length > 0
+ );
case LabelType.POLYGON:
- return imageData.labelPolygons.length > 0
+ return imageData.labelPolygons.length > 0;
case LabelType.RECT:
- return imageData.labelRects
- .filter((labelRect: LabelRect) => labelRect.status === LabelStatus.ACCEPTED)
- .length > 0
+ return (
+ imageData.labelRects.filter(
+ (labelRect: LabelRect) =>
+ labelRect.status === LabelStatus.ACCEPTED
+ ).length > 0
+ );
}
};
private onClickHandler = (index: number) => {
- ImageActions.getImageByIndex(index)
+ ImageActions.getImageByIndex(index);
};
- private renderImagePreview = (index: number, isScrolling: boolean, isVisible: boolean, style: React.CSSProperties) => {
- return this.onClickHandler(index)}
- isSelected={this.props.activeImageIndex === index}
- />
+ private renderImagePreview = (
+ index: number,
+ isScrolling: boolean,
+ isVisible: boolean,
+ style: React.CSSProperties
+ ) => {
+ return (
+ this.onClickHandler(index)}
+ isSelected={this.props.activeImageIndex === index}
+ />
+ );
};
public render() {
- const { size } = this.state;
- return(
+ const {size} = this.state;
+ return (
{
this.state = {
animate: false,
isOpen: false
- }
+ };
}
public componentDidMount(): void {
requestAnimationFrame(() => {
- this.setState({ animate: true });
+ this.setState({animate: true});
});
}
private getClassName() {
- return classNames(
- "LabelInputField",
- {
- "loaded": this.state.animate,
- "active": this.props.isActive,
- "highlighted": this.props.isHighlighted
- }
- );
+ return classNames('LabelInputField', {
+ loaded: this.state.animate,
+ active: this.props.isActive,
+ highlighted: this.props.isHighlighted
+ });
}
private openDropdown = () => {
@@ -88,29 +96,44 @@ class LabelInputField extends React.Component {
if (!RectUtil.isPointInside(dropDownRect, mousePosition)) {
this.setState({isOpen: false});
- window.removeEventListener(EventType.MOUSE_DOWN, this.closeDropdown)
+ window.removeEventListener(
+ EventType.MOUSE_DOWN,
+ this.closeDropdown
+ );
}
};
- private getDropdownStyle = ():React.CSSProperties => {
+ private getDropdownStyle = (): React.CSSProperties => {
const clientRect = this.dropdownLabel.getBoundingClientRect();
- const height: number = Math.min(this.props.options.length, this.dropdownOptionCount) * this.dropdownOptionHeight;
+ const height: number =
+ Math.min(this.props.options.length, this.dropdownOptionCount) *
+ this.dropdownOptionHeight;
const style = {
width: clientRect.width,
height: height,
left: clientRect.left
};
- if (window.innerHeight * 2/3 < clientRect.top)
- return Object.assign(style, {top: clientRect.top - this.dropdownMargin - height});
+ if ((window.innerHeight * 2) / 3 < clientRect.top)
+ return Object.assign(style, {
+ top: clientRect.top - this.dropdownMargin - height
+ });
else
- return Object.assign(style, {top: clientRect.bottom + this.dropdownMargin});
+ return Object.assign(style, {
+ top: clientRect.bottom + this.dropdownMargin
+ });
};
private getDropdownOptions = () => {
- const onClick = (id: string, event: React.MouseEvent) => {
+ const onClick = (
+ id: string,
+ event: React.MouseEvent
+ ) => {
this.setState({isOpen: false});
- window.removeEventListener(EventType.MOUSE_DOWN, this.closeDropdown);
+ window.removeEventListener(
+ EventType.MOUSE_DOWN,
+ this.closeDropdown
+ );
this.props.onSelectLabel(this.props.id, id);
this.props.updateHighlightedLabelId(null);
this.props.updateActiveLabelId(this.props.id);
@@ -118,99 +141,125 @@ class LabelInputField extends React.Component {
};
return this.props.options.map((option: LabelName) => {
- return
+ {getButtonWithTooltip(
+ 'zoom-in',
+ 'zoom in',
+ 'ico/zoom-in.png',
+ 'zoom-in',
+ false,
+ undefined,
+ () => ViewPortActions.zoomIn()
+ )}
+ {getButtonWithTooltip(
+ 'zoom-out',
+ 'zoom out',
+ 'ico/zoom-out.png',
+ 'zoom-out',
+ false,
+ undefined,
+ () => ViewPortActions.zoomOut()
+ )}
+ {getButtonWithTooltip(
+ 'zoom-fit',
+ 'fit image to available space',
+ 'ico/zoom-fit.png',
+ 'zoom-fit',
+ false,
+ undefined,
+ () => ViewPortActions.setDefaultZoom()
+ )}
+ {getButtonWithTooltip(
+ 'zoom-max',
+ 'maximum allowed image zoom',
+ 'ico/zoom-max.png',
+ 'zoom-max',
+ false,
+ undefined,
+ () => ViewPortActions.setOneForOneZoom()
+ )}
-
- {
- getButtonWithTooltip(
- 'image-drag-mode',
- imageDragMode ? 'turn-off image drag mode' : 'turn-on image drag mode - works only when image is zoomed',
- 'ico/hand.png',
- 'image-drag-mode',
- imageDragMode,
- undefined,
- imageDragOnClick
- )
- }
- {
- getButtonWithTooltip(
- 'cursor-cross-hair',
- crossHairVisible ? 'turn-off cursor cross-hair' : 'turn-on cursor cross-hair',
- 'ico/cross-hair.png',
- 'cross-hair',
- crossHairVisible,
- undefined,
- crossHairOnClick
- )
- }
+
- )
+ );
};
const mapDispatchToProps = {
updateImageDragModeStatusAction: updateImageDragModeStatus,
- updateCrossHairVisibleStatusAction: updateCrossHairVisibleStatus
+ updateCrossHairVisibleStatusAction: updateCrossHairVisibleStatus,
+ updateFillModeAction: updateFillMode
};
const mapStateToProps = (state: AppState) => ({
activeContext: state.general.activeContext,
imageDragMode: state.general.imageDragMode,
crossHairVisible: state.general.crossHairVisible,
+ fillMode: state.general.fillMode,
activeLabelType: state.labels.activeLabelType
});
diff --git a/src/views/EditorView/EditorView.tsx b/src/views/EditorView/EditorView.tsx
index c016720b..ad7efd49 100644
--- a/src/views/EditorView/EditorView.tsx
+++ b/src/views/EditorView/EditorView.tsx
@@ -12,23 +12,18 @@ interface IProps {
}
const EditorView: React.FC
+ {getButtonWithTooltip(
+ 'image-drag-mode',
+ imageDragMode
+ ? 'turn-off image drag mode'
+ : 'turn-on image drag mode - works only when image is zoomed',
+ 'ico/hand.png',
+ 'image-drag-mode',
+ imageDragMode,
+ undefined,
+ imageDragOnClick
+ )}
+ {getButtonWithTooltip(
+ 'cursor-cross-hair',
+ crossHairVisible
+ ? 'turn-off cursor cross-hair'
+ : 'turn-on cursor cross-hair',
+ 'ico/cross-hair.png',
+ 'cross-hair',
+ crossHairVisible,
+ undefined,
+ crossHairOnClick
+ )}
+ {getButtonWithTooltip(
+ 'fill-off',
+ fillMode ? 'fill-off' : 'fill-on',
+ 'ico/outline-off.png',
+ 'outline-off',
+ !fillMode,
+ undefined,
+ fillOnClick
+ )}
- {((activeLabelType === LabelType.RECT && AISelector.isAIObjectDetectorModelLoaded()) ||
- (activeLabelType === LabelType.POINT && AISelector.isAIPoseDetectorModelLoaded())) &&
- {
- getButtonWithTooltip(
+ {((activeLabelType === LabelType.RECT &&
+ AISelector.isAIObjectDetectorModelLoaded()) ||
+ (activeLabelType === LabelType.POINT &&
+ AISelector.isAIPoseDetectorModelLoaded())) && (
+
+ )}
+ {getButtonWithTooltip(
'accept-all',
'accept all proposed detections',
'ico/accept-all.png',
'accept-all',
false,
undefined,
- () => AIActions.acceptAllSuggestedLabels(LabelsSelector.getActiveImageData())
- )
- }
- {
- getButtonWithTooltip(
+ () =>
+ AIActions.acceptAllSuggestedLabels(
+ LabelsSelector.getActiveImageData()
+ )
+ )}
+ {getButtonWithTooltip(
'reject-all',
'reject all proposed detections',
'ico/reject-all.png',
'reject-all',
false,
undefined,
- () => AIActions.rejectAllSuggestedLabels(LabelsSelector.getActiveImageData())
- )
- }
-
}
+ () =>
+ AIActions.rejectAllSuggestedLabels(
+ LabelsSelector.getActiveImageData()
+ )
+ )}
+
- {
super(props);
this.state = {
- image: null,
- }
+ image: null
+ };
}
public componentDidMount(): void {
- ImageLoadManager.addAndRun(this.loadImage(this.props.imageData, this.props.isScrolling));
+ ImageLoadManager.addAndRun(
+ this.loadAPIImage(this.props.imageData, this.props.isScrolling)
+ );
}
- public componentWillUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): void {
+ public componentWillUpdate(
+ nextProps: Readonly,
+ nextState: Readonly,
+ nextContext: any
+ ): void {
if (this.props.imageData.id !== nextProps.imageData.id) {
if (nextProps.imageData.loadStatus) {
- ImageLoadManager.addAndRun(this.loadImage(nextProps.imageData, nextProps.isScrolling));
- }
- else {
- this.setState({ image: null });
+ ImageLoadManager.addAndRun(
+ this.loadAPIImage(
+ nextProps.imageData,
+ nextProps.isScrolling
+ )
+ );
+ } else {
+ this.setState({image: null});
}
}
if (this.props.isScrolling && !nextProps.isScrolling) {
- ImageLoadManager.addAndRun(this.loadImage(nextProps.imageData, false));
+ ImageLoadManager.addAndRun(
+ this.loadAPIImage(nextProps.imageData, false)
+ );
}
}
- shouldComponentUpdate(nextProps: Readonly, nextState: Readonly, nextContext: any): boolean {
+ shouldComponentUpdate(
+ nextProps: Readonly,
+ nextState: Readonly,
+ nextContext: any
+ ): boolean {
return (
this.props.imageData.id !== nextProps.imageData.id ||
this.state.image !== nextState.image ||
this.props.isSelected !== nextProps.isSelected ||
this.props.isChecked !== nextProps.isChecked
- )
+ );
}
private loadImage = async (imageData: ImageData, isScrolling: boolean) => {
if (imageData.loadStatus) {
const image = ImageRepository.getById(imageData.id);
if (this.state.image !== image) {
- this.setState({ image });
+ this.setState({image});
}
- }
- else if (!isScrolling || !this.isLoading) {
+ } else if (!isScrolling || !this.isLoading) {
this.isLoading = true;
- const saveLoadedImagePartial = (image: HTMLImageElement) => this.saveLoadedImage(image, imageData);
+ const saveLoadedImagePartial = (image: HTMLImageElement) =>
+ this.saveLoadedImage(image, imageData);
FileUtil.loadImage(imageData.fileData)
- .then((image: HTMLImageElement) => saveLoadedImagePartial(image))
- .catch((error) => this.handleLoadImageError())
+ .then((image: HTMLImageElement) =>
+ saveLoadedImagePartial(image)
+ )
+ .catch((error) => this.handleLoadImageError());
+ }
+ };
+ private loadAPIImage = async (
+ imageData: ImageData,
+ isScrolling: boolean
+ ) => {
+ if (imageData.loadStatus) {
+ const image = ImageRepository.getById(imageData.id);
+ if (this.state.image !== image) {
+ this.setState({image});
+ }
+ } else if (!isScrolling || !this.isLoading) {
+ this.isLoading = true;
+ const saveLoadedImagePartial = (image: HTMLImageElement) =>
+ this.saveLoadedImage(image, imageData);
+ //@ts-ignore
+ URIUtil.loadImage(imageData.fileData.path)
+ .then((image: HTMLImageElement) =>
+ saveLoadedImagePartial(image)
+ )
+ .catch((error) => this.handleLoadImageError());
}
};
- private saveLoadedImage = (image: HTMLImageElement, imageData: ImageData) => {
+ private saveLoadedImage = (
+ image: HTMLImageElement,
+ imageData: ImageData
+ ) => {
+ // console.log('saveLoadedImage: ', image, imageData);
imageData.loadStatus = true;
this.props.updateImageDataById(imageData.id, imageData);
ImageRepository.storeImage(imageData.id, image);
if (imageData.id === this.props.imageData.id) {
- this.setState({ image });
+ this.setState({image});
this.isLoading = false;
}
};
private getStyle = () => {
- const { size } = this.props;
+ const {size} = this.props;
const containerRect: IRect = {
- x: 0.15 * size.width,
- y: 0.15 * size.height,
- width: 0.7 * size.width,
- height: 0.7 * size.height
+ x: 0.05 * size.width,
+ y: 0.05 * size.height,
+ width: 0.8 * size.width,
+ height: 0.8 * size.height
};
const imageRect: IRect = {
@@ -112,73 +156,72 @@ class ImagePreview extends React.Component {
};
const imageRatio = RectUtil.getRatio(imageRect);
- const imagePosition: IRect = RectUtil.fitInsideRectWithRatio(containerRect, imageRatio);
+ const imagePosition: IRect = RectUtil.fitInsideRectWithRatio(
+ containerRect,
+ imageRatio
+ );
return {
width: imagePosition.width,
height: imagePosition.height,
left: imagePosition.x,
top: imagePosition.y
- }
+ };
};
- private handleLoadImageError = () => { };
+ private handleLoadImageError = () => {};
private getClassName = () => {
- return classNames(
- "ImagePreview",
- {
- "selected": this.props.isSelected,
- }
- );
+ return classNames('ImagePreview', {
+ selected: this.props.isSelected
+ });
};
public render() {
- const {
- isChecked,
- style,
- onClick
- } = this.props;
-
+ const {isChecked, style, onClick, imageData} = this.props;
+
return (
+ );
}
}
@@ -188,7 +231,4 @@ const mapDispatchToProps = {
const mapStateToProps = (state: AppState) => ({});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(ImagePreview);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(ImagePreview);
diff --git a/src/views/EditorView/SideNavigationBar/ImagesList/ImagesList.tsx b/src/views/EditorView/SideNavigationBar/ImagesList/ImagesList.tsx
index eb425014..79ba716d 100644
--- a/src/views/EditorView/SideNavigationBar/ImagesList/ImagesList.tsx
+++ b/src/views/EditorView/SideNavigationBar/ImagesList/ImagesList.tsx
@@ -1,17 +1,17 @@
import React from 'react';
-import {connect} from "react-redux";
-import {LabelType} from "../../../../data/enums/LabelType";
-import {ISize} from "../../../../interfaces/ISize";
-import {AppState} from "../../../../store";
-import {ImageData, LabelPoint, LabelRect} from "../../../../store/labels/types";
-import {VirtualList} from "../../../Common/VirtualList/VirtualList";
-import ImagePreview from "../ImagePreview/ImagePreview";
+import {connect} from 'react-redux';
+import {LabelType} from '../../../../data/enums/LabelType';
+import {ISize} from '../../../../interfaces/ISize';
+import {AppState} from '../../../../store';
+import {ImageData, LabelPoint, LabelRect} from '../../../../store/labels/types';
+import {VirtualList} from '../../../Common/VirtualList/VirtualList';
+import ImagePreview from '../ImagePreview/ImagePreview';
import './ImagesList.scss';
-import {ContextManager} from "../../../../logic/context/ContextManager";
-import {ContextType} from "../../../../data/enums/ContextType";
-import {ImageActions} from "../../../../logic/actions/ImageActions";
-import {EventType} from "../../../../data/enums/EventType";
-import {LabelStatus} from "../../../../data/enums/LabelStatus";
+import {ContextManager} from '../../../../logic/context/ContextManager';
+import {ContextType} from '../../../../data/enums/ContextType';
+import {ImageActions} from '../../../../logic/actions/ImageActions';
+import {EventType} from '../../../../data/enums/EventType';
+import {LabelStatus} from '../../../../data/enums/LabelStatus';
interface IProps {
activeImageIndex: number;
@@ -30,8 +30,8 @@ class ImagesList extends React.Component
+
);
};
@@ -37,6 +32,4 @@ const mapStateToProps = (state: AppState) => ({
activePopupType: state.general.activePopupType
});
-export default connect(
- mapStateToProps
-)(EditorView);
+export default connect(mapStateToProps)(EditorView);
diff --git a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss
index f1161bfa..9cf366b4 100644
--- a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss
+++ b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss
@@ -1,70 +1,85 @@
@import '../../../../settings/Settings';
.ImagePreview {
- position: absolute;
- cursor: pointer;
+ position: absolute;
+ cursor: pointer;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
- border-bottom: solid 1px $darkThemeFirstColor;
- &:nth-child(odd) {
- border-right: solid 1px $darkThemeFirstColor;
- }
+ border-bottom: solid 1px $darkThemeFirstColor;
+ &:nth-child(odd) {
+ border-right: solid 1px $darkThemeFirstColor;
+ }
- .Foreground {
- position: absolute;
- z-index: 100;
- transition: transform 0.3s;
+ .Foreground {
+ position: absolute;
+ z-index: 100;
+ transition: transform 0.3s;
+
+ .Image {
+ position: absolute;
+ left: 0;
+ top: 0;
+ border: solid 1px $darkThemeSecondColor;
+ user-select: none;
+ }
- .Image {
- position: absolute;
- left: 0;
- top: 0;
- border: solid 1px $darkThemeSecondColor;
- user-select: none;
+ .CheckBox {
+ position: absolute;
+ z-index: 1000;
+ max-width: 20px;
+ max-height: 20px;
+ bottom: -5px;
+ left: -5px;
+ filter: invert(1) brightness(35%) sepia(100%) hue-rotate(172deg)
+ saturate(2000%); // fallback if new css variables are not supported by browser
+ filter: invert(1) brightness(35%) sepia(100%)
+ hue-rotate(var(--hue-value)) saturate(2000%);
+ }
}
- .CheckBox {
- position: absolute;
- z-index: 1000;
- max-width: 20px;
- max-height: 20px;
- bottom: -10px;
- left: -10px;
- filter: invert(1) brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
- filter: invert(1) brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
+ .Background {
+ position: absolute;
+ z-index: 0;
+ background-color: $darkThemeThirdColor;
+ transition: background-color 0.3s ease-in-out, transform 0.3s;
}
- }
- .Background {
- position: absolute;
- z-index: 0;
- background-color: $darkThemeThirdColor;
- transition: background-color 0.3s ease-in-out, transform 0.3s;
- }
+
- &.selected {
- .Foreground {
- transform: translate(-2px, 2px);
- }
- .Background {
- transform: translate(2px, -2px);
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
+ &.selected {
+ .Foreground {
+ transform: translate(-2px, 2px);
+ }
+ .Background {
+ transform: translate(2px, -2px);
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ // background-color: var(--leading-color);
+ }
+
}
- }
- &:hover {
- .Foreground {
- transform: translate(-2px, 2px);
+
+
+ &:hover {
+ .Foreground {
+ transform: translate(-2px, 2px);
+ }
+ .Background {
+ transform: translate(2px, -2px);
+ }
}
- .Background {
+ .Background.danger {
+ background-color: $dangerColor;
transform: translate(2px, -2px);
}
+
+ .Foreground.danger {
+ transform: translate(-2px, 2px);
}
-}
\ No newline at end of file
+}
diff --git a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx
index 36f573d2..6eb5909b 100644
--- a/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx
+++ b/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.tsx
@@ -1,18 +1,19 @@
-import classNames from "classnames";
+import classNames from 'classnames';
import React from 'react';
-import { connect } from "react-redux";
-import { ClipLoader } from "react-spinners";
-import { ImageLoadManager } from "../../../../logic/imageRepository/ImageLoadManager";
-import { IRect } from "../../../../interfaces/IRect";
-import { ISize } from "../../../../interfaces/ISize";
-import { ImageRepository } from "../../../../logic/imageRepository/ImageRepository";
-import { AppState } from "../../../../store";
-import { updateImageDataById } from "../../../../store/labels/actionCreators";
-import { ImageData } from "../../../../store/labels/types";
-import { FileUtil } from "../../../../utils/FileUtil";
-import { RectUtil } from "../../../../utils/RectUtil";
+import {connect} from 'react-redux';
+import {ClipLoader} from 'react-spinners';
+import {ImageLoadManager} from '../../../../logic/imageRepository/ImageLoadManager';
+import {IRect} from '../../../../interfaces/IRect';
+import {ISize} from '../../../../interfaces/ISize';
+import {ImageRepository} from '../../../../logic/imageRepository/ImageRepository';
+import {AppState} from '../../../../store';
+import {updateImageDataById} from '../../../../store/labels/actionCreators';
+import {ImageData} from '../../../../store/labels/types';
+import {FileUtil} from '../../../../utils/FileUtil';
+import {RectUtil} from '../../../../utils/RectUtil';
import './ImagePreview.scss';
-import { CSSHelper } from "../../../../logic/helpers/CSSHelper";
+import {CSSHelper} from '../../../../logic/helpers/CSSHelper';
+import {URIUtil} from '../../../../utils/URIUtil';
interface IProps {
imageData: ImageData;
@@ -36,72 +37,115 @@ class ImagePreview extends React.Component
- {(!!this.state.image) ?
+ onClick={onClick ? onClick : undefined}>
+ {!!this.state.image ? (
[
)
+ />
+ )}
+
+ className={`Foreground ${imageData?.image_status === 'R' ? "danger": ""}`}
+ key={'Foreground'}
+ style={this.getStyle()}>
- {isChecked && ![{"checkbox"}]({"ico/ok.png"})
}
+ {isChecked && (
+ 
+ )}
,
- ] :
+ ]
+ ) : (
- {isChecked && }
+ {isChecked && (
+
+ )}
this.imagesListRef = ref}
- onClick={() => ContextManager.switchCtx(ContextType.LEFT_NAVBAR)}
- >
- {!!size &&
- )
+ );
}
}
@@ -121,7 +136,4 @@ const mapStateToProps = (state: AppState) => ({
activeLabelType: state.labels.activeLabelType
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(ImagesList);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(ImagesList);
diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss
index 5c98039c..030cceb0 100644
--- a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss
+++ b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.scss
@@ -1,61 +1,15 @@
@import '../../../../settings/Settings';
.LabelInputField {
- background-color: transparent;
- position: relative;
- overflow: hidden;
- cursor: pointer;
-
- .LabelInputFieldWrapper {
- position: absolute;
- left: calc(-100% - 5px);
- transition: left 0.3s ease-in-out;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
- align-content: space-between;
-
- .Marker {
- width: 5px;
- height: calc(100% - 4px);
- background-color: $darkThemeThirdColor;
- }
-
- .Content {
- flex: 1;
- height: 100%;
- padding: 0 10px;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
- align-content: space-between;
+ background-color: transparent;
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
- .ContentWrapper {
- align-self: stretch;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
- }
-
- .DropdownLabel {
- position: relative;
- font-size: 14px;
- cursor: pointer;
- user-select: none;
- min-width: 160px;
- height: 30px;
- padding: 0 5px;
- color: white;
+ .LabelInputFieldWrapper {
+ position: absolute;
+ left: calc(-100% - 5px);
+ transition: left 0.3s ease-in-out;
display: flex;
flex-direction: row;
@@ -64,108 +18,188 @@
align-items: center;
align-content: space-between;
- &:hover {
- background-color: rgba(0, 0, 0, 0.05);
-
- &::after {
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
- }
- }
-
- &::after {
- background: $darkThemeThirdColor;
- width: 100%;
- position: absolute;
- bottom: 0;
- height: 1px; // <- adjust
- left: 0;
- z-index: 100;
- display: block;
- content: "";
- }
- }
-
- .Dropdown {
- position: fixed;
- z-index: 1000;
- background-color: $darkThemeFirstColor;
-
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
-
- .DropdownOption {
- align-self: stretch;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- font-size: 14px;
- cursor: pointer;
- user-select: none;
- padding: 0 5px;
- color: white;
-
- &:hover {
+ .Marker {
+ width: 5px;
+ height: calc(100% - 4px);
background-color: $darkThemeThirdColor;
- }
}
- }
-
- .ImageButton {
- transition: transform 0.3s;
-
- img {
- filter: brightness(0) invert(1);
+ .Mode {
+ margin-top: 6px;
+ margin-left: 10px;
+ width: 20px;
+ img {
+ filter: brightness(0) invert(1);
+ width: 20px;
+ height: 20px;
+ }
}
- &:hover {
- background-color: transparent;
+ .Content {
+ flex: 1;
+ height: 100%;
+ padding: 0 10px;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ align-content: space-between;
+
+ .ContentWrapper {
+ align-self: stretch;
+ flex: 1;
+ border: 1 solid $secondaryColor;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ .DescriptionText {
+ flex: 1;
+ color: $secondaryColor;
+ font-size: smaller;
+ }
+ }
+
+ .DropdownLabel {
+ position: relative;
+ font-size: 14px;
+ cursor: pointer;
+ user-select: none;
+ min-width: 160px;
+ height: 30px;
+ padding: 0 5px;
+ color: white;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ align-content: space-between;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+
+ &::after {
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
+ }
+
+ &::after {
+ background: $darkThemeThirdColor;
+ width: 100%;
+ position: absolute;
+ bottom: 0;
+ height: 1px; // <- adjust
+ left: 0;
+ z-index: 100;
+ display: block;
+ content: '';
+ }
+ }
+
+ .Dropdown {
+ position: fixed;
+ z-index: 1000;
+ background-color: $darkThemeFirstColor;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+
+ .DropdownOption {
+ align-self: stretch;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+
+ font-size: 14px;
+ cursor: pointer;
+ user-select: none;
+ padding: 0 5px;
+ color: white;
+
+ &:hover {
+ background-color: $darkThemeThirdColor;
+ }
+ }
+ }
+
+ .ImageButton {
+ transition: transform 0.3s;
+
+ img {
+ filter: brightness(0) invert(1);
+ }
+
+ &:hover {
+ background-color: transparent;
+ }
+
+ &.trash:not(.disabled):hover {
+ filter: brightness(35%) sepia(100%) hue-rotate(172deg)
+ saturate(2000%); // fallback if new css variables are not supported by browser
+ filter: brightness(35%) sepia(100%)
+ hue-rotate(var(--hue-value)) saturate(2000%);
+ }
+ &.info:not(.disabled):hover {
+ filter: brightness(35%) sepia(100%) hue-rotate(172deg)
+ saturate(2000%); // fallback if new css variables are not supported by browser
+ filter: brightness(35%) sepia(100%)
+ hue-rotate(var(--hue-value)) saturate(2000%);
+ }
+ &.info.danger {
+ filter: brightness(35%) sepia(100%)
+ hue-rotate(var(--red-value)) saturate(2000%);
+ }
+
+ &.info.success {
+ filter: brightness(35%) sepia(100%)
+ hue-rotate(var(--green-value)) saturate(2000%);
+ }
+ }
}
- &.trash:not(.disabled):hover {
- filter: brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
- filter: brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+ .Marker {
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
}
- }
}
- &:hover {
- background-color: rgba(0, 0, 0, 0.05);
- .Marker {
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
- }
- }
- }
-
- &.active {
- background-color: rgba(0, 0, 0, 0.05);
- .Marker {
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
+ &.active {
+ background-color: rgba(0, 0, 0, 0.05);
+ .Marker {
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
}
- }
- &.loaded {
- .LabelInputFieldWrapper {
- left: 0;
+ &.loaded {
+ .LabelInputFieldWrapper {
+ left: 0;
+ }
}
- }
- &.highlighted {
- background-color: rgba(0, 0, 0, 0.05);
- .Marker {
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
+ &.highlighted {
+ background-color: rgba(0, 0, 0, 0.05);
+ .Marker {
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
}
- }
-}
\ No newline at end of file
+}
diff --git a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx
index f1970f78..6e88656e 100644
--- a/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx
+++ b/src/views/EditorView/SideNavigationBar/LabelInputField/LabelInputField.tsx
@@ -1,20 +1,24 @@
-import React from 'react';
-import {ISize} from "../../../../interfaces/ISize";
+import React, {ReactNode} from 'react';
+import {ISize} from '../../../../interfaces/ISize';
import './LabelInputField.scss';
-import classNames from "classnames";
-import {ImageButton} from "../../../Common/ImageButton/ImageButton";
-import {IRect} from "../../../../interfaces/IRect";
-import {IPoint} from "../../../../interfaces/IPoint";
-import {RectUtil} from "../../../../utils/RectUtil";
-import {AppState} from "../../../../store";
-import {connect} from "react-redux";
-import {updateActiveLabelId, updateHighlightedLabelId} from "../../../../store/labels/actionCreators";
-import Scrollbars from 'react-custom-scrollbars';
-import {EventType} from "../../../../data/enums/EventType";
-import {LabelName} from "../../../../store/labels/types";
-import {LabelsSelector} from "../../../../store/selectors/LabelsSelector";
-import {PopupWindowType} from "../../../../data/enums/PopupWindowType";
-import {updateActivePopupType} from "../../../../store/general/actionCreators";
+import classNames from 'classnames';
+import {ImageButton} from '../../../Common/ImageButton/ImageButton';
+import {IRect} from '../../../../interfaces/IRect';
+import {IPoint} from '../../../../interfaces/IPoint';
+import {RectUtil} from '../../../../utils/RectUtil';
+import {AppState} from '../../../../store';
+import {connect} from 'react-redux';
+import {
+ updateActiveLabelId,
+ updateHighlightedLabelId,
+ updateActiveHumanID
+} from '../../../../store/labels/actionCreators';
+import {EventType} from '../../../../data/enums/EventType';
+import {LabelName} from '../../../../store/labels/types';
+import {LabelsSelector} from '../../../../store/selectors/LabelsSelector';
+import {PopupWindowType} from '../../../../data/enums/PopupWindowType';
+import {updateActivePopupType} from '../../../../store/general/actionCreators';
+import {LabelModeType} from '../../../../data/enums/LabelType';
interface IProps {
size: ISize;
@@ -23,11 +27,18 @@ interface IProps {
id: string;
value: LabelName;
options: LabelName[];
+ mode?: LabelModeType;
+ description?: string | ReactNode;
onDelete: (id: string) => any;
onSelectLabel: (labelRectId: string, labelNameId: string) => any;
+ onSelectInfo?: (labelRectId: string) => any;
updateHighlightedLabelId: (highlightedLabelId: string) => any;
updateActiveLabelId: (highlightedLabelId: string) => any;
updateActivePopupType: (activePopupType: PopupWindowType) => any;
+ updateActiveHumanID: (humanId: string) => any;
+ imageStatus?: string ;
+ qcStatus?: string;
+ qcComment?: string
}
interface IState {
@@ -47,24 +58,21 @@ class LabelInputField extends React.Component onClick(option.id, event)}
- >
- {option.name}
-
- })
+ return (
+ onClick(option.id, event)}>
+ {option.name}
+
+ );
+ });
};
private mouseEnterHandler = () => {
this.props.updateHighlightedLabelId(this.props.id);
};
- private mouseLeaveHandler =() => {
+ private mouseLeaveHandler = () => {
this.props.updateHighlightedLabelId(null);
};
private onClickHandler = () => {
this.props.updateActiveLabelId(this.props.id);
+ if (this.props.mode === LabelModeType.HUMAN) {
+ // console.log('this.props.id', this.props.id);
+ this.props.updateActiveHumanID(this.props.id);
+ }
};
public render() {
- const {size, id, value, onDelete} = this.props;
- return(
+ const {size, id, value, onDelete, onSelectInfo, mode, description, qcStatus} =
+ this.props;
+
+ return (
+ onClick={this.onClickHandler}>
+
+ );
+};
interface IProps {
- activeImageIndex:number,
+ activeImageIndex: number;
activeLabelType: LabelType;
+ activeLabelMode: LabelModeType;
imagesData: ImageData[];
projectType: ProjectType;
updateImageDataById: (id: string, newImageData: ImageData) => any;
@@ -42,21 +100,22 @@ class LabelsToolkit extends React.Component {
super(props);
this.state = {
- size: null,
+ size: null
};
- this.tabs = props.projectType === ProjectType.IMAGE_RECOGNITION ?
- [
- LabelType.IMAGE_RECOGNITION
- ] :
- [
- LabelType.RECT,
- LabelType.POINT,
- LabelType.LINE,
- LabelType.POLYGON
- ];
-
- const activeTab: LabelType = props.activeLabelType ? props.activeLabelType : this.tabs[0];
+ this.tabs =
+ props.projectType === ProjectType.IMAGE_RECOGNITION
+ ? [LabelType.IMAGE_RECOGNITION]
+ : [
+ LabelType.RECT
+ // LabelType.POINT,
+ // LabelType.LINE,
+ // LabelType.POLYGON
+ ];
+
+ const activeTab: LabelType = props.activeLabelType
+ ? props.activeLabelType
+ : this.tabs[0];
props.updateActiveLabelType(activeTab);
}
@@ -70,8 +129,7 @@ class LabelsToolkit extends React.Component {
}
private updateToolkitSize = () => {
- if (!this.labelsToolkitRef)
- return;
+ if (!this.labelsToolkitRef) return;
const listBoundingBox = this.labelsToolkitRef.getBoundingClientRect();
this.setState({
@@ -79,7 +137,7 @@ class LabelsToolkit extends React.Component {
width: listBoundingBox.width,
height: listBoundingBox.height
}
- })
+ });
};
private headerClickHandler = (activeTab: LabelType) => {
@@ -89,103 +147,141 @@ class LabelsToolkit extends React.Component {
private renderChildren = () => {
const {size} = this.state;
- const {activeImageIndex, imagesData, activeLabelType} = this.props;
- return this.tabs.reduce((children, labelType: LabelType, index: number) => {
- const isActive: boolean = labelType === activeLabelType;
- const tabData: ILabelToolkit = find(LabelToolkitData, {labelType});
- const activeTabContentHeight: number = size.height - this.tabs.length * Settings.TOOLKIT_TAB_HEIGHT_PX;
- const getClassName = (baseClass: string) => classNames(
- baseClass,
- {
- "active": isActive,
- }
- );
-
- const header =
-
-
+ height: size.height
+ }}>
+
+
- )
+ );
}
}
const mapDispatchToProps = {
updateHighlightedLabelId,
updateActiveLabelId,
- updateActivePopupType
+ updateActivePopupType,
+ updateActiveHumanID
};
const mapStateToProps = (state: AppState) => ({});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(LabelInputField);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(LabelInputField);
diff --git a/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.scss b/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.scss
index 6ea3e220..28e3a3a0 100644
--- a/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.scss
+++ b/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.scss
@@ -1,101 +1,134 @@
@import '../../../../settings/Settings';
.LabelsToolkit {
- align-self: stretch;
- flex: 1;
- overflow: hidden;
-
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- .Header {
- position: relative;
align-self: stretch;
- box-sizing: border-box;
- padding: 0 25px;
- color: white;
- font-size: 14px;
- user-select: none;
- cursor: pointer;
+ flex: 1;
+ overflow: hidden;
display: flex;
- flex-direction: row;
+ flex-direction: column;
flex-wrap: nowrap;
- justify-content: space-between;
+ justify-content: flex-start;
align-items: center;
- align-content: space-between;
+ align-content: flex-start;
- .HeaderGroupWrapper {
- align-self: stretch;
+ .ButtonWrapper {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
+ &:not(:last-child) {
+ padding-right: 5px;
+ margin-right: 5px;
+ border-right: solid 1px $darkThemeFirstColor;
+ }
}
- .Marker {
- position: absolute;
- height: calc(100% - 4px);
- width: 5px;
- top: 2px;
- left: -5px;
- background-color: $darkThemeThirdColor;
- transition: background-color 0.3s ease-in-out, transform 0.3s;
- }
+ .ImageButton {
+ transition: transform 0.3s;
+ margin: 0 2px;
- .Ico {
- max-width: 20px;
- max-height: 20px;
- margin-right: 20px;
- filter: brightness(0) invert(1);
- }
+ img {
+ filter: brightness(0) invert(1);
+ }
- .Arrow {
- max-width: 12px;
- max-height: 12px;
- filter: brightness(0) invert(1);
- }
+ &:hover {
+ border-radius: 3px;
+ background-color: rgba(0, 0, 0, 0.2);
+ }
- &:hover {
- .Marker {
- transform: translate(5px);
- }
+ &.active {
+ border-radius: 3px;
+ background-color: $secondaryColor;
+ }
}
- &.active {
- background-color: rgba(0, 0, 0, 0.1);
- .Marker {
- transform: translate(5px);
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
- }
-
- .Arrow {
- transform: rotate(180deg);
- }
+ .Header {
+ position: relative;
+ align-self: stretch;
+ box-sizing: border-box;
+ padding: 0 25px;
+ color: white;
+ font-size: 14px;
+ user-select: none;
+ cursor: pointer;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ align-content: space-between;
+
+ .HeaderGroupWrapper {
+ align-self: stretch;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
+
+ .Marker {
+ position: absolute;
+ height: calc(100% - 4px);
+ width: 5px;
+ top: 2px;
+ left: -5px;
+ background-color: $darkThemeThirdColor;
+ transition: background-color 0.3s ease-in-out, transform 0.3s;
+ }
+
+ .Ico {
+ max-width: 20px;
+ max-height: 20px;
+ margin-right: 20px;
+ filter: brightness(0) invert(1);
+ }
+
+ .Arrow {
+ max-width: 12px;
+ max-height: 12px;
+ filter: brightness(0) invert(1);
+ }
+
+ &:hover {
+ .Marker {
+ transform: translate(5px);
+ }
+ }
+
+ &.active {
+ background-color: rgba(0, 0, 0, 0.1);
+ .Marker {
+ transform: translate(5px);
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
+
+ .Arrow {
+ transform: rotate(180deg);
+ }
+ }
}
- }
- .Content {
- align-self: stretch;
- box-sizing: border-box;
- height: 0;
- transition: height 0.3s ease-in-out;
- overflow: hidden;
+ .Content {
+ align-self: stretch;
+ box-sizing: border-box;
+ height: 0;
+ transition: height 0.3s ease-in-out;
+ overflow: hidden;
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
- }
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
}
-
diff --git a/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.tsx b/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.tsx
index 5e6b8b1a..4e87746b 100644
--- a/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.tsx
+++ b/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.tsx
@@ -1,28 +1,86 @@
-import React from "react";
+import React from 'react';
import './LabelsToolkit.scss';
-import {ImageData} from "../../../../store/labels/types";
-import {updateActiveLabelId, updateActiveLabelType, updateImageDataById} from "../../../../store/labels/actionCreators";
-import {AppState} from "../../../../store";
-import {connect} from "react-redux";
-import {LabelType} from "../../../../data/enums/LabelType";
-import {ProjectType} from "../../../../data/enums/ProjectType";
-import {ISize} from "../../../../interfaces/ISize";
-import classNames from "classnames";
-import {find} from "lodash";
-import {ILabelToolkit, LabelToolkitData} from "../../../../data/info/LabelToolkitData";
-import {Settings} from "../../../../settings/Settings";
-import RectLabelsList from "../RectLabelsList/RectLabelsList";
-import PointLabelsList from "../PointLabelsList/PointLabelsList";
-import PolygonLabelsList from "../PolygonLabelsList/PolygonLabelsList";
-import {ContextManager} from "../../../../logic/context/ContextManager";
-import {ContextType} from "../../../../data/enums/ContextType";
-import {EventType} from "../../../../data/enums/EventType";
-import LineLabelsList from "../LineLabelsList/LineLabelsList";
-import TagLabelsList from "../TagLabelsList/TagLabelsList";
+import {ImageData} from '../../../../store/labels/types';
+import {
+ updateActiveLabelId,
+ updateActiveLabelType,
+ updateImageDataById
+} from '../../../../store/labels/actionCreators';
+import {AppState} from '../../../../store';
+import {connect} from 'react-redux';
+import {LabelType, LabelModeType} from '../../../../data/enums/LabelType';
+import {ProjectType} from '../../../../data/enums/ProjectType';
+import {ISize} from '../../../../interfaces/ISize';
+import classNames from 'classnames';
+import {find} from 'lodash';
+import {
+ ILabelToolkit,
+ LabelToolkitData
+} from '../../../../data/info/LabelToolkitData';
+import {Settings} from '../../../../settings/Settings';
+import RectLabelsList from '../RectLabelsList/RectLabelsList';
+import PointLabelsList from '../PointLabelsList/PointLabelsList';
+import PolygonLabelsList from '../PolygonLabelsList/PolygonLabelsList';
+import {ContextManager} from '../../../../logic/context/ContextManager';
+import {ContextType} from '../../../../data/enums/ContextType';
+import {EventType} from '../../../../data/enums/EventType';
+import LineLabelsList from '../LineLabelsList/LineLabelsList';
+import TagLabelsList from '../TagLabelsList/TagLabelsList';
+import {ImageButton} from '../../../Common/ImageButton/ImageButton';
+import {Fade, Tooltip} from '@material-ui/core';
+import withStyles from '@material-ui/core/styles/withStyles';
+import {LabelActions} from '../../../../logic/actions/LabelActions';
+
+const BUTTON_SIZE: ISize = {width: 30, height: 30};
+const BUTTON_PADDING: number = 10;
+
+const StyledTooltip = withStyles((theme) => ({
+ tooltip: {
+ backgroundColor: '#171717',
+ color: '#ffffff',
+ boxShadow: theme.shadows[1],
+ fontSize: 12,
+ maxWidth: 200,
+ textAlign: 'center'
+ }
+}))(Tooltip);
+
+const getButtonWithTooltip = (
+ key: string,
+ tooltipMessage: string,
+ imageSrc: string,
+ imageAlt: string,
+ isActive: boolean,
+ href?: string,
+ onClick?: () => any
+): React.ReactElement => {
+ return (
+
+ {mode === LabelModeType.HUMAN ? (
+ 
+ ) : (
+ 
+ )}
+
+ ) : (
+
+ )}
+
-
-
onDelete(id)}
+ onClick={() => onSelectInfo(id)}
+ />
+ {
+ this.props.updateActiveLabelId(id);
+ this.props.updateActivePopupType(
+ PopupWindowType.DELETE_CONFIRM
+ );
+ // onDelete(id);
+ }}
/>
this.dropdownLabel = ref}
- onClick={this.openDropdown}
- >
- {value ? value.name : "Select label"}
+ {/*
*/}
+
+ {this.state.isOpen && (
+ (this.dropdownLabel = ref)}
+ onClick={this.openDropdown}>
+ {value ? value.name : 'Select label'}
- {this.state.isOpen && this.dropdown = ref}
- >
- }
- >
-
-
-
}
-
- {this.getDropdownOptions()}
-
- (this.dropdown = ref)}>
+ (
+
+ )}>
+
+
+ )}
+ {this.getDropdownOptions()}
+ {description}
+
+
+ this.headerClickHandler(labelType)}
- style={{height: Settings.TOOLKIT_TAB_HEIGHT_PX}}
- >
-
- = (props) => {
+ const {authData} = useSelector((state: RootStateOrAny) => state.auth);
+ const [isLoading, setIsLoading] = useState(false);
const onFocus = (event: React.FocusEvent) => {
event.target.setSelectionRange(0, event.target.value.length);
};
const onChange = (event: React.ChangeEvent) => {
- const value = event.target.value
- .toLowerCase()
- .replace(' ', '-');
+ const value = event.target.value.toLowerCase().replace(' ', '-');
props.updateProjectDataAction({
...props.projectData,
name: value
- })
+ });
};
- const closePopup = () => props.updateActivePopupTypeAction(PopupWindowType.EXIT_PROJECT)
+ const closePopup = () =>
+ props.updateActivePopupTypeAction(PopupWindowType.EXIT_PROJECT);
+
+ const uploadJson = async () => {
+ const itemsNeedToUpload = LabelsSelector.getImagesData().filter(
+ (imageData) =>
+ imageData.uploadStatus === JSONUploadStatus.NEED_UPLOAD
+ );
+
+ try {
+ setIsLoading(true);
+ for await (const imageData of itemsNeedToUpload) {
+ try {
+ updateImageDataById(imageData.id, {
+ ...imageData,
+ uploadStatus: JSONUploadStatus.UPLOADING
+ });
+ const content =
+ RectLabelsExporter.wrapRectLabelsIntoJSON(imageData);
+ const json = content ? JSON.stringify(content) : null;
+ await APIService.updateImage({
+ imageId: imageData.id,
+ json
+ });
+ updateImageDataById(imageData.id, {
+ ...imageData,
+ uploadStatus: JSONUploadStatus.UPLOADED
+ });
+ const {data} = await APIService.getTaskStatus();
+ setTimeout(
+ () => props.updateTaskStatusAction(data.data),
+ 1000
+ );
+ } catch (error) {
+ updateImageDataById(imageData.id, {
+ ...imageData,
+ uploadStatus: JSONUploadStatus.FAILED
+ });
+ }
+ }
+ } catch (error) {
+ console.error('Failed to updateImage: ', error);
+ alert('Failed to upload');
+ } finally {
+ setIsLoading(false);
+ }
+ };
return (
-
- 
- {tabData.headerText}
+ const {activeImageIndex, imagesData, activeLabelType, activeLabelMode} =
+ this.props;
+ return this.tabs.reduce(
+ (children, labelType: LabelType, index: number) => {
+ const isActive: boolean = labelType === activeLabelType;
+ const tabData: ILabelToolkit = find(LabelToolkitData, {
+ labelType
+ });
+ const activeTabContentHeight: number =
+ size.height -
+ this.tabs.length * Settings.TOOLKIT_TAB_HEIGHT_PX;
+ const getClassName = (baseClass: string) =>
+ classNames(baseClass, {
+ active: isActive
+ });
+
+ const header = (
+
+ 
+
+ );
+};
interface IProps {
size: ISize;
@@ -25,9 +78,20 @@ interface IProps {
updateActiveLabelNameId: (activeLabelId: string) => any;
labelNames: LabelName[];
updateActiveLabelId: (activeLabelId: string) => any;
+ updateActivePopupTypeAction: (popupType: PopupWindowType) => any;
}
-const RectLabelsList: React.FC = ({size, imageData, updateImageDataById, labelNames, updateActiveLabelNameId, activeLabelId, highlightedLabelId, updateActiveLabelId}) => {
+const RectLabelsList: React.FC = ({
+ size,
+ imageData,
+ updateImageDataById,
+ labelNames,
+ updateActiveLabelNameId,
+ activeLabelId,
+ highlightedLabelId,
+ updateActiveLabelId,
+ updateActivePopupTypeAction
+}) => {
const labelInputFieldHeight = 40;
const listStyle: React.CSSProperties = {
width: size.width,
@@ -45,16 +109,15 @@ const RectLabelsList: React.FC = ({size, imageData, updateImageDataById,
const updateRectLabel = (labelRectId: string, labelNameId: string) => {
const newImageData = {
...imageData,
- labelRects: imageData.labelRects
- .map((labelRect: LabelRect) => {
+ labelRects: imageData.labelRects.map((labelRect: LabelRect) => {
if (labelRect.id === labelRectId) {
return {
...labelRect,
labelId: labelNameId,
status: LabelStatus.ACCEPTED
- }
+ };
} else {
- return labelRect
+ return labelRect;
}
})
};
@@ -62,51 +125,257 @@ const RectLabelsList: React.FC = ({size, imageData, updateImageDataById,
updateActiveLabelNameId(labelNameId);
};
+ const showInfo = (labelRectId: string) => {
+ updateActiveLabelId(labelRectId);
+ updateActivePopupTypeAction(PopupWindowType.LABEL_INFO);
+ };
+
const onClickHandler = () => {
updateActiveLabelId(null);
};
+ const getDescription = (labelRect: LabelRect) => {
+ if (labelRect.mode === LabelModeType.HUMAN) {
+ const found = _.find(imageData.humans, {uuid: labelRect.id});
+ if (found) {
+ return `${found.styles
+ .map(
+ (style) => lang.FASHION_STYLE[style.toLocaleLowerCase()]
+ )
+ .join('_')}_${lang.GENDER[GENDER_CODE[found.gender]]}`;
+ }
+ } else {
+ const found = _.find(imageData.items, {uuid: labelRect.id});
+ if (found) {
+ console.log('found.gender', found.gender);
+ return `${found.styles
+ .map(
+ (style) => lang.FASHION_STYLE[style.toLocaleLowerCase()]
+ )
+ .filter((style) => style !== undefined)
+ .join('_')}_${lang.GENDER[GENDER_CODE[found.gender]]}_${
+ lang.MAIN_CATEGORY[MAIN_CATEGORY_CODE[found.mainCategory]]
+ }_${lang.SUB_CATEGORY[SUB_CATEGORY_CODE[found.subCategory]]}_${
+ lang.ITEM_COLOR[ITEM_COLOR[found.color]]
+ }_${lang.ITEM_PATTERN[ITEM_PATTERN[found.pattern]]}
+ `;
+ }
+ }
+ return '';
+ };
+
+ const getDescriptionIcon = (labelRect: LabelRect) => {
+ if (labelRect.mode === LabelModeType.HUMAN) {
+ const found = _.find(imageData.humans, {uuid: labelRect.id});
+ if (found) {
+ return (
+ = ({size, imageData, updateImageDataById,
const mapDispatchToProps = {
updateImageDataById,
updateActiveLabelNameId,
- updateActiveLabelId
+ updateActiveLabelId,
+ updateActivePopupTypeAction: updateActivePopupType
};
const mapStateToProps = (state: AppState) => ({
activeLabelId: state.labels.activeLabelId,
+ activeLabelMode: state.labels.activeLabelMode,
highlightedLabelId: state.labels.highlightedLabelId,
- labelNames : state.labels.labels
+ labelNames: state.labels.labels
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(RectLabelsList);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(RectLabelsList);
diff --git a/src/views/EditorView/SideNavigationBar/SideNavigationBar.scss b/src/views/EditorView/SideNavigationBar/SideNavigationBar.scss
index 7f387ad5..26f33676 100644
--- a/src/views/EditorView/SideNavigationBar/SideNavigationBar.scss
+++ b/src/views/EditorView/SideNavigationBar/SideNavigationBar.scss
@@ -1,72 +1,94 @@
@import '../../../settings/Settings';
.SideNavigationBar {
- align-self: stretch;
- background-color: $darkThemeSecondColor;
-
- display: flex;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- &.with-context {
- .NavigationBarContentWrapper {
- background-color: $darkThemeForthColor;
- }
- }
-
- .CompanionBar {
align-self: stretch;
- min-width: $sideNavigationBarCompanionWidth;
- width: $sideNavigationBarCompanionWidth;
+ background-color: $darkThemeSecondColor;
+
display: flex;
- flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
- }
+ scrollbar-color: $primaryColor $secondaryColor;
- .NavigationBarContentWrapper {
- align-self: stretch;
- min-width: $sideNavigationBarContentWidth;
- width: $sideNavigationBarContentWidth;
- flex-direction: column;
- display: flex;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
- align-content: flex-end;
- }
+ ::-webkit-scrollbar {
+ width: 6px;
+ // border-left: 1px solid #e6ecf8;
+ }
+ ::-webkit-scrollbar-thumb {
+ background-color: $secondaryColor;
+ }
+ &.with-context {
+ .NavigationBarContentWrapper {
+ background-color: $darkThemeForthColor;
+ }
+ }
+
+ &.is-guide {
+ .NavigationBarContentWrapper {
+ min-width: $sideNavigationBarContentWidthForGuide;
+ width: $sideNavigationBarContentWidthForGuide;
+ }
+ }
- &.left {
- flex-direction: row;
- border-right: solid 1px $darkThemeFirstColor;
+ &.is-label {
+ .NavigationBarContentWrapper {
+ min-width: $sideNavigationBarContentWidthForLabel;
+ width: $sideNavigationBarContentWidthForLabel;
+ }
+ }
.CompanionBar {
- border-right: solid 1px $darkThemeFirstColor;
+ align-self: stretch;
+ min-width: $sideNavigationBarCompanionWidth;
+ width: $sideNavigationBarCompanionWidth;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ }
+
+ .NavigationBarContentWrapper {
+ align-self: stretch;
+ min-width: $sideNavigationBarContentWidth;
+ width: $sideNavigationBarContentWidth;
+ flex-direction: column;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: center;
+ align-content: flex-end;
+ }
+
+ &.left {
+ flex-direction: row;
+ border-right: solid 1px $darkThemeFirstColor;
- .VerticalEditorButton {
- transform: rotate(-90deg) translateY(-2px);
- }
+ .CompanionBar {
+ border-right: solid 1px $darkThemeFirstColor;
+
+ .VerticalEditorButton {
+ transform: rotate(-90deg) translateY(-2px);
+ }
+ }
}
- }
- &.right {
- flex-direction: row-reverse;
- border-left: solid 1px $darkThemeFirstColor;
+ &.right {
+ flex-direction: row-reverse;
+ border-left: solid 1px $darkThemeFirstColor;
- .CompanionBar {
- border-left: solid 1px $darkThemeFirstColor;
+ .CompanionBar {
+ border-left: solid 1px $darkThemeFirstColor;
- .VerticalEditorButton {
- transform: rotate(-90deg) translateY(-1px);
- }
+ .VerticalEditorButton {
+ transform: rotate(-90deg) translateY(-1px);
+ }
+ }
}
- }
- &.closed {
- border: none;
- }
+ &.closed {
+ border: none;
+ }
}
diff --git a/src/views/EditorView/SideNavigationBar/SideNavigationBar.tsx b/src/views/EditorView/SideNavigationBar/SideNavigationBar.tsx
index e8de5c7e..29c8fb38 100644
--- a/src/views/EditorView/SideNavigationBar/SideNavigationBar.tsx
+++ b/src/views/EditorView/SideNavigationBar/SideNavigationBar.tsx
@@ -1,29 +1,38 @@
import React from 'react';
import classNames from 'classnames';
import './SideNavigationBar.scss';
-import {Direction} from "../../../data/enums/Direction";
+import {Direction} from '../../../data/enums/Direction';
interface IProps {
- direction: Direction
+ direction: Direction;
isOpen: boolean;
isWithContext?: boolean;
+ isGuide?: boolean;
+ isLabel?: boolean;
renderCompanion?: () => any;
renderContent?: () => any;
}
export const SideNavigationBar: React.FC = (props) => {
- const {direction, isOpen, isWithContext, renderContent, renderCompanion} = props;
+ const {
+ direction,
+ isOpen,
+ isWithContext,
+ isGuide,
+ isLabel,
+ renderContent,
+ renderCompanion
+ } = props;
const getClassName = () => {
- return classNames(
- "SideNavigationBar",
- {
- "left": direction === Direction.LEFT,
- "right": direction === Direction.RIGHT,
- "with-context": isWithContext,
- "closed": !isOpen
- }
- );
+ return classNames('SideNavigationBar', {
+ left: direction === Direction.LEFT,
+ right: direction === Direction.RIGHT,
+ 'with-context': isWithContext,
+ closed: !isOpen,
+ 'is-guide': isGuide,
+ 'is-label': isLabel
+ });
};
return (
@@ -31,9 +40,11 @@ export const SideNavigationBar: React.FC = (props) => {
);
-};
\ No newline at end of file
+};
diff --git a/src/views/EditorView/TopNavigationBar/TopNavigationBar.scss b/src/views/EditorView/TopNavigationBar/TopNavigationBar.scss
index 26265cbf..c0c27741 100644
--- a/src/views/EditorView/TopNavigationBar/TopNavigationBar.scss
+++ b/src/views/EditorView/TopNavigationBar/TopNavigationBar.scss
@@ -1,127 +1,128 @@
@import '../../../settings/Settings';
.TopNavigationBar {
- align-self: stretch;
- min-height: $topNavigationBarHeight;
- background-color: $darkThemeFirstColor;
- box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
-
- display: flex;
- flex: 0 0 $topNavigationBarHeight;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: flex-start;
- align-items: center;
- align-content: flex-start;
-
- .TopNavigationBarWrapper {
- padding: 0 $sideNavigationBarCompanionWidth;
- color: white;
align-self: stretch;
- flex: 1;
- height: calc(#{$topNavigationBarHeight} - #{$stateBarHeight});
+ min-height: $topNavigationBarHeight;
+ background-color: $darkThemeFirstColor;
+ box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
+
display: flex;
+ flex: 0 0 $topNavigationBarHeight;
+ flex-direction: column;
flex-wrap: nowrap;
- justify-content: space-between;
+ justify-content: flex-start;
align-items: center;
- align-content: space-between;
-
- .NavigationBarGroupWrapper {
- margin: 4px 0;
-
- align-self: stretch;
- display: flex;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
-
- &.middle {
- flex: auto;
- }
-
- &:not(:last-child) {
- padding-right: 10px;
- margin-right: 10px;
- border-right: solid 1px $darkThemeForthColor;
- }
- }
+ align-content: flex-start;
+
+ .TopNavigationBarWrapper {
+ padding: 0 $sideNavigationBarCompanionWidth;
+ color: white;
+ align-self: stretch;
+ flex: 1;
+ height: calc(#{$topNavigationBarHeight} - #{$stateBarHeight});
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ align-content: space-between;
+
+ .NavigationBarGroupWrapper {
+ margin: 4px 0;
+
+ align-self: stretch;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+
+ &.middle {
+ flex: auto;
+ }
+
+ &:not(:last-child) {
+ padding-right: 10px;
+ margin-right: 10px;
+ border-right: solid 1px $darkThemeForthColor;
+ }
+ }
- .ProjectName {
- font-weight: 700;
- margin-right: 10px;
- user-select: none;
- }
+ .ProjectName {
+ font-weight: 700;
+ margin-right: 10px;
+ user-select: none;
+ }
- .ImageButton {
- transition: transform 0.3s;
+ .ImageButton {
+ transition: transform 0.3s;
- img {
- filter: brightness(0) invert(1);
- user-select: none;
- }
+ img {
+ filter: brightness(0) invert(1);
+ user-select: none;
+ }
- &:hover {
- background-color: transparent;
- }
+ &:hover {
+ background-color: transparent;
+ }
- &:not(.disabled):hover {
- filter: brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
- filter: brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
- }
- }
+ &:not(.disabled):hover {
+ filter: brightness(35%) sepia(100%) hue-rotate(172deg)
+ saturate(2000%); // fallback if new css variables are not supported by browser
+ filter: brightness(35%) sepia(100%) hue-rotate(var(--hue-value))
+ saturate(2000%);
+ }
+ }
- .TextInput {
- max-width: 200px;
- height: 25px;
+ .TextInput {
+ max-width: 200px;
+ height: 25px;
- &:hover {
- background-color: rgba(0, 0, 0, 0.06);
- }
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.06);
+ }
- > input {
- padding-top: 3.5px;
+ > input {
+ padding-top: 3.5px;
- &:focus {
- outline: none;
- color: $secondaryColor; // fallback if new css variables are not supported by browser
- color: var(--leading-color);
+ &:focus {
+ outline: none;
+ color: $secondaryColor; // fallback if new css variables are not supported by browser
+ color: var(--leading-color);
- ~ .Bar {
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
- }
- }
- }
+ ~ .Bar {
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ }
+ }
+ }
- .Bar {
- height: 0;
- }
- }
+ .Bar {
+ height: 0;
+ }
+ }
- .Header {
- align-self: stretch;
- display: flex;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
- cursor: pointer;
- margin-right: 10px;
-
- > img {
- width: 25px;
- height: 25px;
- margin-right: 5px;
- user-select: none;
- }
-
- font-weight: 900;
- user-select: none;
- }
+ .Header {
+ align-self: stretch;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ cursor: pointer;
+ margin-right: 10px;
+
+ > img {
+ max-width: 110px;
+ margin-right: 5px;
+ user-select: none;
+ }
+
+ font-weight: 900;
+ user-select: none;
+ }
- .DropDownMenuWrapper {
- align-self: stretch;
+ .DropDownMenuWrapper {
+ align-self: stretch;
+ }
}
- }
}
diff --git a/src/views/EditorView/TopNavigationBar/TopNavigationBar.tsx b/src/views/EditorView/TopNavigationBar/TopNavigationBar.tsx
index eefefeef..e4e8db13 100644
--- a/src/views/EditorView/TopNavigationBar/TopNavigationBar.tsx
+++ b/src/views/EditorView/TopNavigationBar/TopNavigationBar.tsx
@@ -1,76 +1,137 @@
-import React from 'react';
+import React, {useState} from 'react';
import './TopNavigationBar.scss';
import StateBar from '../StateBar/StateBar';
import {PopupWindowType} from '../../../data/enums/PopupWindowType';
import {AppState} from '../../../store';
-import {connect} from 'react-redux';
-import {updateActivePopupType, updateProjectData} from '../../../store/general/actionCreators';
+import {connect, RootStateOrAny, useSelector} from 'react-redux';
+import {
+ updateActivePopupType,
+ updateProjectData
+} from '../../../store/general/actionCreators';
import TextInput from '../../Common/TextInput/TextInput';
import {ImageButton} from '../../Common/ImageButton/ImageButton';
import {Settings} from '../../../settings/Settings';
import {ProjectData} from '../../../store/general/types';
import DropDownMenu from './DropDownMenu/DropDownMenu';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {RectLabelsExporter} from '../../../logic/export/RectLabelsExporter';
+import {ImageData} from '../../../store/labels/types';
+import {APIService} from '../../../services/API';
+import {ClipLoader} from 'react-spinners';
+import {CSSHelper} from '../../../logic/helpers/CSSHelper';
+import {JSONUploadStatus} from '../../../data/enums/JSONUploadStatus';
+import {updateImageDataById} from '../../../store/labels/actionCreators';
+import PerformanceProgress from 'views/Common/PerformanceProgress/PerformanceProgress';
+import {updateTaskStatus} from 'store/performance/actionCreators';
+import {TaskStatus} from 'store/performance/types';
interface IProps {
updateActivePopupTypeAction: (activePopupType: PopupWindowType) => any;
updateProjectDataAction: (projectData: ProjectData) => any;
+ updateImageDataByIdAction: (id: string, newImageData: ImageData) => any;
+ updateTaskStatusAction: (taskStatus: TaskStatus) => any;
projectData: ProjectData;
}
const TopNavigationBar: React.FC this.headerClickHandler(labelType)}
+ style={{height: Settings.TOOLKIT_TAB_HEIGHT_PX}}>
+
+
-
+
+ {tabData.headerText}
+
+
+ 
+
+
- ![{"down_arrow"}]({"ico/down.png"})
+ );
+
+ const content = (
+
;
-
- const content =
-
+ );
+
+ const content = (
+
+ {labelType === LabelType.RECT && (
+
-
- {labelType === LabelType.RECT &&
;
-
- children.push([header, content]);
- return children;
- }, [])
+ );
+
+ children.push([header, content]);
+ return children;
+ },
+ []
+ );
};
public render() {
- return(
+ const {activeLabelMode} = this.props;
+ return (
this.labelsToolkitRef = ref}
- onClick={() => ContextManager.switchCtx(ContextType.RIGHT_NAVBAR)}
- >
+ ref={(ref) => (this.labelsToolkitRef = ref)}
+ onClick={() =>
+ ContextManager.switchCtx(ContextType.RIGHT_NAVBAR)
+ }>
+
- )
+ );
}
}
@@ -198,11 +294,9 @@ const mapDispatchToProps = {
const mapStateToProps = (state: AppState) => ({
activeImageIndex: state.labels.activeImageIndex,
activeLabelType: state.labels.activeLabelType,
+ activeLabelMode: state.labels.activeLabelMode,
imagesData: state.labels.imagesData,
- projectType: state.general.projectData.type,
+ projectType: state.general.projectData.type
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(LabelsToolkit);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(LabelsToolkit);
diff --git a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.scss b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.scss
index f9c792a6..37c24c0b 100644
--- a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.scss
+++ b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.scss
@@ -1,17 +1,34 @@
.RectLabelsList {
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
-
- .RectLabelsListContent {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
- justify-content: flex-start;
+ justify-content: center;
align-items: center;
- align-content: flex-start;
- }
-}
\ No newline at end of file
+ align-content: center;
+
+ .RectLabelsListContent {
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ }
+ .ItemContainer {
+ display: flex;
+ flex-direction: row;
+ // justify-content: center;
+ align-items: center;
+ margin-left: 5px;
+ }
+ .Item {
+ align-self: center;
+ }
+ .ItemIcon {
+ width: 24px;
+ height: 24px;
+ // border-radius: 20%;
+ margin-left: 2px;
+ margin-right: 2px;
+ }
+}
diff --git a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx
index 09502693..3e034163 100644
--- a/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx
+++ b/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.tsx
@@ -1,20 +1,73 @@
import React from 'react';
-import {ISize} from "../../../../interfaces/ISize";
+import {ISize} from '../../../../interfaces/ISize';
import Scrollbars from 'react-custom-scrollbars';
-import {ImageData, LabelName, LabelRect} from "../../../../store/labels/types";
+import {ImageData, LabelName, LabelRect} from '../../../../store/labels/types';
import './RectLabelsList.scss';
import {
updateActiveLabelId,
updateActiveLabelNameId,
updateImageDataById
-} from "../../../../store/labels/actionCreators";
-import {AppState} from "../../../../store";
-import {connect} from "react-redux";
-import LabelInputField from "../LabelInputField/LabelInputField";
-import EmptyLabelList from "../EmptyLabelList/EmptyLabelList";
-import {LabelActions} from "../../../../logic/actions/LabelActions";
-import {LabelStatus} from "../../../../data/enums/LabelStatus";
-import {findLast} from "lodash";
+} from '../../../../store/labels/actionCreators';
+import {AppState} from '../../../../store';
+import {connect} from 'react-redux';
+import LabelInputField from '../LabelInputField/LabelInputField';
+import EmptyLabelList from '../EmptyLabelList/EmptyLabelList';
+import {LabelActions} from '../../../../logic/actions/LabelActions';
+import {LabelStatus} from '../../../../data/enums/LabelStatus';
+import {findLast} from 'lodash';
+import {updateActivePopupType} from '../../../../store/general/actionCreators';
+import {PopupWindowType} from '../../../../data/enums/PopupWindowType';
+import {LabelModeType} from '../../../../data/enums/LabelType';
+import _ from 'lodash';
+import {vi as lang} from '../../../../lang';
+import {
+ FASHION_STYLE,
+ FASHION_STYLE_MAN,
+ FASHION_STYLE_WOMAN,
+ GENDER,
+ GENDER_CODE,
+ ITEM_COLOR,
+ ITEM_PATTERN,
+ MAIN_CATEGORY_CODE,
+ SOURCE,
+ SOURCE_CODE,
+ SUB_CATEGORY_CODE
+} from '../../../../data/enums/ItemType';
+import {Settings} from '../../../../settings/Settings';
+import {Fade, Tooltip, withStyles} from '@material-ui/core';
+import {ImageButton} from '../../../Common/ImageButton/ImageButton';
+
+const BUTTON_SIZE: ISize = {width: 30, height: 30};
+const BUTTON_PADDING: number = 10;
+
+const StyledTooltip = withStyles((theme) => ({
+ tooltip: {
+ backgroundColor: '#171717',
+ color: '#ffffff',
+ boxShadow: theme.shadows[1],
+ fontSize: 12,
+ maxWidth: 200,
+ textAlign: 'center'
+ }
+}))(Tooltip);
+
+const getButtonWithTooltip = (
+ key: string,
+ tooltipMessage: string,
+ imageSrc: string
+): React.ReactElement => {
+ return (
+
+ {getButtonWithTooltip(
+ 'human',
+ 'human select mode',
+ 'ico/user.png',
+ 'human select mode',
+ activeLabelMode === LabelModeType.HUMAN,
+ undefined,
+ () => LabelActions.selectLabelMode(LabelModeType.HUMAN)
+ )}
+ {getButtonWithTooltip(
+ 'item',
+ 'item select mode',
+ 'ico/box.png',
+ 'item select mode',
+ activeLabelMode === LabelModeType.ITEM,
+ undefined,
+ () => LabelActions.selectLabelMode(LabelModeType.ITEM)
+ )}
+
{this.state.size && this.renderChildren()}
+ {found.styles.map((styleString) => {
+ const style = _.find(
+ found.gender === GENDER.MAN
+ ? FASHION_STYLE_MAN
+ : FASHION_STYLE_WOMAN,
+ (item) =>
+ item.name.toUpperCase() ===
+ styleString.toUpperCase()
+ );
+
+ return getButtonWithTooltip(
+ `${found.uuid}_${style.name}`,
+ lang.FASHION_STYLE[
+ styleString.toLocaleLowerCase()
+ ],
+ style.seq === -1
+ ? Settings.UNKNOWN_URL
+ : found.gender === GENDER.MAN
+ ? `guides/icons/man_style/${style.m}_s.png`
+ : `guides/icons/woman_style/${style.f}_s.png`
+ );
+ })}
+ {getButtonWithTooltip(
+ `${found.uuid}_gender`,
+ `${lang.GENDER[GENDER_CODE[found.gender]]} (${
+ GENDER_CODE[found.gender]
+ })`,
+ found.gender === GENDER.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/genders/${found.gender}_s.png`
+ )}
+ {getButtonWithTooltip(
+ `${found.uuid}_source`,
+ `${lang.SOURCE[SOURCE_CODE[found.type]]} (${
+ SOURCE_CODE[found.type]
+ })`,
+ found.type === SOURCE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/sources/${found.type}_s.png`
+ )}
+
+ );
+ }
+ } else {
+ const found = _.find(imageData.items, {uuid: labelRect.id});
+ if (found) {
+ return (
+
+ {found.styles.map((styleString) => {
+ const style = _.find(
+ FASHION_STYLE,
+ // to fix https://github.com/choipd/make-sense/issues/9
+ // found.gender === GENDER.MAN
+ // ? FASHION_STYLE_MAN
+ // : FASHION_STYLE_WOMAN,
+ (item) =>
+ item.name.toUpperCase() ===
+ styleString.toUpperCase()
+ );
+
+ return getButtonWithTooltip(
+ `${found.uuid}_${style?.name}`,
+ `${
+ lang.FASHION_STYLE[
+ styleString.toLocaleLowerCase()
+ ]
+ } (${styleString.toUpperCase()})`,
+ style?.seq === -1
+ ? Settings.UNKNOWN_URL
+ : found.gender === GENDER.MAN
+ ? `guides/icons/man_style/${style?.m}_s.png`
+ : `guides/icons/woman_style/${style?.f}_s.png`
+ );
+ })}
+
+ {getButtonWithTooltip(
+ `${found.uuid}_gender`,
+ `${lang.GENDER[GENDER_CODE[found.gender]]} (${
+ GENDER_CODE[found.gender]
+ })`,
+ found.gender === GENDER.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/genders/${found.gender}_s.png`
+ )}
+
+ {/* ![{`${lang.GENDER[GENDER_CODE[found.gender]]}]({)
*/}
+ {/* {getButtonWithTooltip(
+ `${found.uuid}_main`,
+ `${
+ lang.MAIN_CATEGORY[
+ MAIN_CATEGORY_CODE[found.mainCategory]
+ ]
+ } (${MAIN_CATEGORY_CODE[found.mainCategory]})`,
+ found.mainCategory === MAIN_CATEGORY_CODE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/main_cats/${found.mainCategory}_s.png`
+ )} */}
+ {getButtonWithTooltip(
+ `${found.uuid}_sub`,
+ `${
+ lang.MAIN_CATEGORY[
+ MAIN_CATEGORY_CODE[found.mainCategory]
+ ]
+ } (${MAIN_CATEGORY_CODE[found.mainCategory]}) > ${
+ lang.SUB_CATEGORY[
+ SUB_CATEGORY_CODE[found.subCategory]
+ ]
+ } (${SUB_CATEGORY_CODE[found.subCategory]})`,
+ found.subCategory === SUB_CATEGORY_CODE.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/sub_cats/${found.subCategory}_s.png`
+ )}
+ {getButtonWithTooltip(
+ `${found.uuid}_color`,
+ `${lang.ITEM_COLOR[ITEM_COLOR[found.color]]} (${
+ ITEM_COLOR[found.color]
+ })`,
+ found.color === ITEM_COLOR.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/colors/${found.color}_s.png`
+ )}
+ {getButtonWithTooltip(
+ `${found.uuid}_pattern`,
+ `${
+ lang.ITEM_PATTERN[ITEM_PATTERN[found.pattern]]
+ } (${ITEM_PATTERN[found.pattern]})`,
+ found.pattern === ITEM_PATTERN.UNKNOWN
+ ? Settings.UNKNOWN_URL
+ : `guides/icons/patterns/${found.pattern}_s.png`
+ )}
+
+ );
+ }
+ }
+ return null;
+ };
+
const getChildren = () => {
return imageData.labelRects
- .filter((labelRect: LabelRect) => labelRect.status === LabelStatus.ACCEPTED)
+ .filter(
+ (labelRect: LabelRect) =>
+ labelRect.status === LabelStatus.ACCEPTED
+ )
.map((labelRect: LabelRect) => {
- return
- {imageData.labelRects.filter((labelRect: LabelRect) => labelRect.status === LabelStatus.ACCEPTED).length === 0 ?
+ onClickCapture={onClickHandler}>
+ {imageData.labelRects.filter(
+ (labelRect: LabelRect) =>
+ labelRect.status === LabelStatus.ACCEPTED
+ ).length === 0 ? (
- }
+ )}
);
};
@@ -114,16 +383,15 @@ const RectLabelsList: React.FC
+ style={listStyleContent}>
{getChildren()}
{renderCompanion && renderCompanion()}
- {isOpen &&
- {renderContent && renderContent()}
-
}
+ {isOpen && (
+
+ {renderContent && renderContent()}
+
+ )}
-
-
-
+
+
+
+
- Make Sense
-
- Make Sense
- = (props) => {
const mapDispatchToProps = {
updateActivePopupTypeAction: updateActivePopupType,
- updateProjectDataAction: updateProjectData
+ updateProjectDataAction: updateProjectData,
+ updateImageDataByIdAction: updateImageDataById,
+ updateTaskStatusAction: updateTaskStatus
};
const mapStateToProps = (state: AppState) => ({
projectData: state.general.projectData
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(TopNavigationBar);
+export default connect(mapStateToProps, mapDispatchToProps)(TopNavigationBar);
diff --git a/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx b/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx
index a45cf10d..11bf669f 100644
--- a/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx
+++ b/src/views/MainView/ImagesDropZone/ImagesDropZone.tsx
@@ -1,18 +1,24 @@
import React, {PropsWithChildren} from 'react';
import './ImagesDropZone.scss';
-import {useDropzone,DropzoneOptions} from 'react-dropzone';
+import {useDropzone, DropzoneOptions} from 'react-dropzone';
import {TextButton} from '../../Common/TextButton/TextButton';
import {ImageData} from '../../../store/labels/types';
import {connect} from 'react-redux';
-import {addImageData, updateActiveImageIndex} from '../../../store/labels/actionCreators';
+import {
+ addImageData,
+ updateActiveImageIndex
+} from '../../../store/labels/actionCreators';
import {AppState} from '../../../store';
import {ProjectType} from '../../../data/enums/ProjectType';
import {PopupWindowType} from '../../../data/enums/PopupWindowType';
-import {updateActivePopupType, updateProjectData} from '../../../store/general/actionCreators';
+import {
+ updateActivePopupType,
+ updateProjectData
+} from '../../../store/general/actionCreators';
import {AcceptedFileType} from '../../../data/enums/AcceptedFileType';
import {ProjectData} from '../../../store/general/types';
import {ImageDataUtil} from '../../../utils/ImageDataUtil';
-import { sortBy } from 'lodash';
+import {sortBy} from 'lodash';
interface IProps {
updateActiveImageIndexAction: (activeImageIndex: number) => any;
@@ -29,62 +35,77 @@ const ImagesDropZone: React.FC = (props: PropsWithChildren) => {
const startEditor = (projectType: ProjectType) => {
if (acceptedFiles.length > 0) {
- const files = sortBy(acceptedFiles, (item: File) => item.name)
+ const files = sortBy(acceptedFiles, (item: File) => item.name);
props.updateProjectDataAction({
...props.projectData,
type: projectType
});
props.updateActiveImageIndexAction(0);
- props.addImageDataAction(files.map((file:File) => ImageDataUtil
- .createImageDataFromFileData(file)));
- props.updateActivePopupTypeAction(PopupWindowType.INSERT_LABEL_NAMES);
+ props.addImageDataAction(
+ files.map((file: File) =>
+ ImageDataUtil.createImageDataFromFileData(file)
+ )
+ );
+ props.updateActivePopupTypeAction(
+ PopupWindowType.INSERT_LABEL_NAMES
+ );
}
};
const getDropZoneContent = () => {
if (acceptedFiles.length === 0)
- return <>
-
- 
-
+ 
-
+
-
+
+
-
-
@@ -79,14 +140,13 @@ const TopNavigationBar: React.FCProject Name:
-
+ {/*
- {authData.email}
*/}
+
-
+ {isLoading ? (
+
- Drop images
-or
-Click here to select them
- ; + return ( + <> + +
+ Drop images
+or
+Click here to select them
+ + ); else if (acceptedFiles.length === 1) - return <> -
- 1 image loaded
- ; + return ( + <> +
+ 1 image loaded
+ + ); else - return <> - -
- {acceptedFiles.length} images loaded
- ; + return ( + <> + +
+ + {acceptedFiles.length} images loaded +
+ + ); }; - const startEditorWithObjectDetection = () => startEditor(ProjectType.OBJECT_DETECTION) - const startEditorWithImageRecognition = () => startEditor(ProjectType.IMAGE_RECOGNITION) + const startEditorWithObjectDetection = () => + startEditor(ProjectType.OBJECT_DETECTION); + const startEditorWithImageRecognition = () => + startEditor(ProjectType.IMAGE_RECOGNITION); - return( -
+ return (
+
= (props: PropsWithChildren) => {
+ const [acceptedImages, setAcceptedImages] = useState([]);
+ const [offset, setOffset] = useState(0);
+ const [limit, setLimit] = useState(10);
+ const [isLoading, setIsLoading] = useState(false);
+ const { goBack } = props
+
+ const loadImages = async () => {
+ try {
+ setIsLoading(true);
+ const {data} = await APIService.fetchImages({offset, limit});
+ // console.log('data.data = ', data.data);
+ setAcceptedImages(data.data.image_list);
+ } catch (error) {
+ console.error('Failed to loadImages: ', error);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const startEditor = (projectType: ProjectType) => {
+ if (acceptedImages.length > 0) {
+ const files = acceptedImages;
+ props.updateProjectDataAction({
+ ...props.projectData,
+ type: projectType
+ });
+ props.updateActiveImageIndexAction(0);
+ props.addImageDataAction(
+ files.map((file: APIImageData) =>
+ ImageDataUtil.createImageDataFromAPIData(file)
+ )
+ );
+ }
+ };
+
+ const getImageFetcherContent = () => {
+ if (acceptedImages.length === 0)
+ return (
+ <>
+
+
+
+
+ setOffset(parseInt(e.target.value))
+ }
+ />
+
+
+
+ setLimit(parseInt(e.target.value))}
+ />
+
+ = ({
+ authData,
+ updateActivePopupTypeAction,
+ updateActiveLabelNameId,
+ updateActiveImageIndex,
+ updateFirstLabelCreatedFlag,
+ updateAuthDataAction
+}) => {
const [projectInProgress, setProjectInProgress] = useState(false);
const [projectCanceled, setProjectCanceled] = useState(false);
@@ -22,118 +57,102 @@ const MainView: React.FC = () => {
const endProject = () => {
setProjectInProgress(false);
setProjectCanceled(true);
+ updateActivePopupTypeAction(PopupWindowType.LOGIN);
+ updateAuthDataAction({
+ email: null,
+ displayName: null,
+ authToken: null,
+ role: null
+ });
+ window.localStorage.removeItem('@@auth');
+ updateActiveLabelNameId(null);
+ updateActiveImageIndex(null);
+ updateFirstLabelCreatedFlag(false);
+ PopupActions.close();
};
const getClassName = () => {
- return classNames(
- 'MainView', {
- 'InProgress': projectInProgress,
- 'Canceled': !projectInProgress && projectCanceled
- }
- );
+ return classNames('MainView', {
+ InProgress: projectInProgress,
+ Canceled: !projectInProgress && projectCanceled
+ });
};
- const DarkTooltip = withStyles(theme => ({
+ const DarkTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: '#171717',
color: '#ffffff',
boxShadow: theme.shadows[1],
fontSize: 11,
maxWidth: 120
- },
+ }
}))(Tooltip);
- const getSocialMediaButtons = (size:ISize) => {
- return SocialMediaData.map((data:ISocialMedia, index: number) => {
- return
-
+ const getSocialMediaButtons = (size: ISize) => {
+ return SocialMediaData.map((data: ISocialMedia, index: number) => {
+ return (
+
+
+ );
});
};
const getEditorFeatureTiles = () => {
- return EditorFeatureData.map((data:IEditorFeature) => {
- return
{getDropZoneContent()}
-
+
= (props: PropsWithChildren) => {
/>
- )
+ );
};
const mapDispatchToProps = {
@@ -111,7 +132,4 @@ const mapStateToProps = (state: AppState) => ({
projectData: state.general.projectData
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(ImagesDropZone);
+export default connect(mapStateToProps, mapDispatchToProps)(ImagesDropZone);
diff --git a/src/views/MainView/ImagesFetcher/ImagesFetcher.scss b/src/views/MainView/ImagesFetcher/ImagesFetcher.scss
new file mode 100644
index 00000000..cd82a88d
--- /dev/null
+++ b/src/views/MainView/ImagesFetcher/ImagesFetcher.scss
@@ -0,0 +1,130 @@
+.ImagesDropZone {
+ opacity: 0;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+
+ .DropZone {
+ user-select: none;
+ // width: 400px;
+ // height: 250px;
+ // box-shadow: black 0 0 0 2px inset;
+ // border-radius: 4px;
+ // margin-bottom: 6px;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-items: center;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ outline: none;
+
+ > img {
+ max-width: 60px;
+ max-height: 60px;
+ margin-bottom: 10px;
+ user-select: none;
+ }
+
+ > input {
+ outline: none;
+ }
+
+ > p {
+ margin-top: 2px;
+ margin-bottom: 0;
+
+ &.extraBold {
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+ }
+
+ .DropZoneButtons {
+ align-self: stretch;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 5px;
+ &__active{
+
+ background: #000000;
+ border-radius: 6px;
+ color: #fff;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 22px;
+ padding: 10px 12px;
+ width: 100% !important;
+ border: 1px solid #000000;
+ max-width: 304px;
+ margin-right: 5px;
+
+ &:hover{
+
+ border-radius: 6px;
+ background-color: #FFFFFF;
+ color: #000000;
+ svg{
+ path {
+ stroke: #000000;
+ }
+ }
+ }
+
+ }
+ &__goback{
+ background: transparent;
+ border-radius: 6px;
+ border: 1px solid #000000 !important;
+ color: #000000;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 22px;
+ padding: 10px 12px;
+ box-shadow: unset;
+ margin-right: 5px;
+ min-width: 123px;
+ display: flex;
+ align-items: center;
+ justify-items: center;
+ &:hover{
+ background: #000000;
+ color: #fff;
+ svg{
+ path {
+ stroke: #fff;
+ }
+ }
+ }
+ }
+ .TextButton {
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+
+ &.disabled {
+ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 2px inset;
+ color: rgba(0, 0, 0, 0.2);
+ cursor: default;
+
+ &:hover {
+ box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 2px inset;
+ color: rgba(0, 0, 0, 0.2);
+ background-color: transparent;
+ }
+ }
+ }
+ }
+}
diff --git a/src/views/MainView/ImagesFetcher/ImagesFetcher.tsx b/src/views/MainView/ImagesFetcher/ImagesFetcher.tsx
new file mode 100644
index 00000000..397bad2a
--- /dev/null
+++ b/src/views/MainView/ImagesFetcher/ImagesFetcher.tsx
@@ -0,0 +1,175 @@
+import React, {PropsWithChildren, useState} from 'react';
+import './ImagesFetcher.scss';
+import {TextButton} from '../../Common/TextButton/TextButton';
+import {ImageData} from '../../../store/labels/types';
+import {connect} from 'react-redux';
+import {
+ addImageData,
+ updateActiveImageIndex
+} from '../../../store/labels/actionCreators';
+import {AppState} from '../../../store';
+import {ProjectType} from '../../../data/enums/ProjectType';
+import {PopupWindowType} from '../../../data/enums/PopupWindowType';
+import {
+ updateActivePopupType,
+ updateProjectData
+} from '../../../store/general/actionCreators';
+import {ProjectData} from '../../../store/general/types';
+import {ImageDataUtil} from '../../../utils/ImageDataUtil';
+import {sortBy} from 'lodash';
+import {APIImageData} from '../../../services/types';
+import {Button, FormControl, Input, InputLabel} from '@material-ui/core';
+import {APIService} from '../../../services/API';
+import {ClipLoader} from 'react-spinners';
+import {CSSHelper} from '../../../logic/helpers/CSSHelper';
+import {Package, ChevronRightBlack, ChevronRightWhite} from "../../../assets/icons"
+interface IProps {
+ updateActiveImageIndexAction: (activeImageIndex: number) => any;
+ addImageDataAction: (imageData: ImageData[]) => any;
+ updateProjectDataAction: (projectData: ProjectData) => any;
+ updateActivePopupTypeAction: (activePopupType: PopupWindowType) => any;
+ projectData: ProjectData;
+ goBack: () => any
+}
+
+const ImagesFetcher: React.FC1 image loaded
+ + ); + else + return ( + <> ++ {acceptedImages.length} images loaded +
+ + ); + }; + + const startEditorWithObjectDetection = () => + startEditor(ProjectType.OBJECT_DETECTION); + const startEditorWithImageRecognition = () => + startEditor(ProjectType.IMAGE_RECOGNITION); + + return ( +
+
+ );
+};
+
+const mapDispatchToProps = {
+ updateActiveImageIndexAction: updateActiveImageIndex,
+ addImageDataAction: addImageData,
+ updateProjectDataAction: updateProjectData,
+ updateActivePopupTypeAction: updateActivePopupType
+};
+
+const mapStateToProps = (state: AppState) => ({
+ projectData: state.general.projectData
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(ImagesFetcher);
diff --git a/src/views/MainView/MainView.scss b/src/views/MainView/MainView.scss
index 12339205..324cffb2 100644
--- a/src/views/MainView/MainView.scss
+++ b/src/views/MainView/MainView.scss
@@ -2,8 +2,10 @@
.MainView {
position: absolute;
- height: 100vh;
- width: 100vw;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
margin: 0;
padding: 0;
@@ -35,11 +37,42 @@
}
.RightColumn {
+ label + .MuiInput-formControl{
+ margin-top: unset;
+ }
.ImagesDropZone {
animation-duration: 1.5s;
animation-name: cssAnimationShow;
animation-fill-mode: forwards;
}
+ .MuiFormControl-root{
+ width: 100%;
+ margin-bottom: 12px;
+ }
+ .MuiInputBase-input {
+ background: #FFFF;
+ border-radius: 9.73271px;
+ height: 65px ;
+ max-height: 65px;
+ width: 100%;
+ padding: 0px 19px;
+ color: #000000 !important;
+ &::placeholder{
+ color: #BABABA;
+ font-weight: 400;
+ font-size: 14.5991px;
+ line-height: 18px;
+ }
+ }
+ .MuiInput-underline{
+ &::after{
+ display: none !important;
+ }
+ &::before{
+ display: none !important;
+ }
+ }
+
}
.LeftColumn {
@@ -144,18 +177,18 @@
}
.RightColumn {
- padding: 20px;
- align-self: stretch;
- flex: 1;
- min-width: 200px;
- z-index: 100;
-
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: space-between;
- align-items: center;
- align-content: center;
+ // padding: 20px;
+ // align-self: stretch;
+ // flex: 1;
+ // min-width: 200px;
+ // z-index: 100;
+
+ // display: flex;
+ // flex-direction: row;
+ // flex-wrap: nowrap;
+ // justify-content: center;
+ // align-items: center;
+ // align-content: center;
.TextButton {
box-shadow: black 0 0 0 2px inset;
@@ -280,4 +313,21 @@
100% {
background-position: 0 50%;
}
+}
+
+.loginShowniq{
+ background-image: url("../../assets/img/backgroundImage.png");
+ background-size: cover;
+ background-repeat: no-repeat;
+ height: 100vh;
+ background-color: #00dafe;
+ background-position: center center;
+ width: 100%;
+ &__content{
+ margin-top: auto;
+ @media screen and (max-width: 1500px) {
+ background: rgba(0, 120, 147, 0.55) !important;
+ position: fixed;
+ }
+ }
}
\ No newline at end of file
diff --git a/src/views/MainView/MainView.tsx b/src/views/MainView/MainView.tsx
index 57d10e55..e9ff1e4e 100644
--- a/src/views/MainView/MainView.tsx
+++ b/src/views/MainView/MainView.tsx
@@ -1,17 +1,52 @@
import React, {useState} from 'react';
import './MainView.scss';
-import {TextButton} from '../Common/TextButton/TextButton';
import classNames from 'classnames';
import {ISize} from '../../interfaces/ISize';
import {ImageButton} from '../Common/ImageButton/ImageButton';
import {ISocialMedia, SocialMediaData} from '../../data/info/SocialMediaData';
-import {EditorFeatureData, IEditorFeature} from '../../data/info/EditorFeatureData';
+import {
+ EditorFeatureData,
+ IEditorFeature
+} from '../../data/info/EditorFeatureData';
+import {
+ updateActiveImageIndex,
+ updateActiveLabelNameId,
+ updateFirstLabelCreatedFlag,
+ updateImageData,
+ updateLabelNames
+} from '../../store/labels/actionCreators';
+import {PopupActions} from '../../logic/actions/PopupActions';
import {Tooltip} from '@material-ui/core';
import Fade from '@material-ui/core/Fade';
import withStyles from '@material-ui/core/styles/withStyles';
-import ImagesDropZone from './ImagesDropZone/ImagesDropZone';
+import {updateAuthData} from '../../store/auth/actionCreators';
+import ImagesFetcher from './ImagesFetcher/ImagesFetcher';
+import {connect} from 'react-redux';
+import {updateActivePopupType, updateProjectData} from '../../store/general/actionCreators';
+import {PopupWindowType} from '../../data/enums/PopupWindowType';
+import {AppState} from '../../store';
+import {AuthData} from '../../store/auth/types';
+import WrapperLogin from "../../components/WrapperLogin/index"
-const MainView: React.FC = () => {
+interface IProps {
+ authData: AuthData;
+ updateActivePopupTypeAction: (type: PopupWindowType) => void;
+ updateActiveImageIndex: (activeImageIndex: number) => any;
+ updateActiveLabelNameId: (activeLabelId: string) => any;
+ //updateImageData: (imageData: ImageData[]) => any;
+ updateFirstLabelCreatedFlag: (firstLabelCreatedFlag: boolean) => any;
+ updateAuthDataAction: (authData: AuthData) => any;
+
+}
+
+const MainView: React.FC{getImageFetcherContent()}
+
+ {
+ acceptedImages.length ? (
+
+
-
-
+
+
-
- 
-
- {data.displayText}
+ return EditorFeatureData.map((data: IEditorFeature) => {
+ return (
+
+ );
});
};
return (
-
+
-
+
+
+ {data.displayText}
+
-
-
-
-
-
-
-
- = ({size}) => {
const getClassName = () => {
return classNames('MobileTopNavigationBar', {
Hide: scrollPosition < scrollPositionThreshold,
- Show: scrollPosition >= scrollPositionThreshold,
- })
+ Show: scrollPosition >= scrollPositionThreshold
+ });
};
const onScroll = (value) => {
@@ -29,105 +32,116 @@ const MobileMainView: React.FC = ({size}) => {
};
const getEditorFeatureTiles = (features: IEditorFeature[]) => {
- return features.map((data:IEditorFeature) => {
- return
-
+
);
};
+const mapDispatchToProps = {
+ updateActivePopupTypeAction: updateActivePopupType,
+ updateActiveLabelNameId,
+ updateLabelNames,
+ updateProjectData,
+ updateActiveImageIndex,
+ updateImageData,
+ updateFirstLabelCreatedFlag,
+ updateAuthDataAction: updateAuthData,
+};
+const mapStateToProps = (state: AppState) => ({
+ authData: state.auth.authData
+});
-export default MainView;
+export default connect(mapStateToProps, mapDispatchToProps)(MainView);
diff --git a/src/views/MobileMainView/MobileMainView.tsx b/src/views/MobileMainView/MobileMainView.tsx
index e2484687..a84e1d47 100644
--- a/src/views/MobileMainView/MobileMainView.tsx
+++ b/src/views/MobileMainView/MobileMainView.tsx
@@ -1,13 +1,16 @@
import React, {useState} from 'react';
import './MobileMainView.scss';
import Scrollbars from 'react-custom-scrollbars';
-import {ISize} from "../../interfaces/ISize";
-import {AppState} from "../../store";
-import {connect} from "react-redux";
-import classNames from 'classnames'
-import {EditorFeatureData, IEditorFeature} from "../../data/info/EditorFeatureData";
-import {ISocialMedia, SocialMediaData} from "../../data/info/SocialMediaData";
-import {ImageButton} from "../Common/ImageButton/ImageButton";
+import {ISize} from '../../interfaces/ISize';
+import {AppState} from '../../store';
+import {connect} from 'react-redux';
+import classNames from 'classnames';
+import {
+ EditorFeatureData,
+ IEditorFeature
+} from '../../data/info/EditorFeatureData';
+import {ISocialMedia, SocialMediaData} from '../../data/info/SocialMediaData';
+import {ImageButton} from '../Common/ImageButton/ImageButton';
interface IProps {
size: ISize;
@@ -20,8 +23,8 @@ const MobileMainView: React.FC
+
+
-
-
+ {/*
-
-
-
- 
-
-
-
- {getEditorFeatureTiles()}
-
-
-
-
- {projectInProgress &&
-
-
+
- {getSocialMediaButtons({width: 30, height: 30})}
-
- {!projectInProgress &&
-
-
-
- {data.displayText}
+ return features.map((data: IEditorFeature) => {
+ return (
+
+ );
});
};
- const getSocialMediaButtons = (size:ISize) => {
- return SocialMediaData.map((data:ISocialMedia, index: number) => {
- return
+
-
+
+
+ {data.displayText}
+
-
-
- ![{"make-sense"}]({"/make-sense-ico-transparent.png"})
- Make Sense
+
+ const topNavigationBar = (
+
;
-
- const firstStage =
- Make Sense
+
+ const topNavigationBar = (
+
+
-
+
+
+
+ SHOWNIQ Platforms
+
+
+ SHOWNIQ Platforms
+
+
-
-
-
- ![{"main-logo"}]({"ico/main-image-color.png"})
-
;
+ );
- const secondStage =
-
-
-
-
- {getEditorFeatureTiles(EditorFeatureData.slice(0, 3))}
-
;
+ const firstStage = (
+
+
+
+ );
- const thirdStage =
+
+
+
+
- {getEditorFeatureTiles(EditorFeatureData.slice(3, 6))}
-
-
+ const secondStage = (
+
+ {getEditorFeatureTiles(EditorFeatureData.slice(0, 3))}
-
-
+ );
+
+ const thirdStage = (
+
;
+ );
- const fourthStage =
+ {getEditorFeatureTiles(EditorFeatureData.slice(3, 6))}
+
-
+
+
+
+
+
-
- Due to the small size of the screen we do not support our editor on mobile devices. Check what you missed and visit us from a desktop.
+ const fourthStage = (
+ = (props) => {
+ const {} = props;
+
+ const renderContent = () => {
+ return (
+ = (props) => {
@@ -31,26 +36,29 @@ const ExitProjectPopup: React.FC = (props) => {
updateActiveImageIndex,
updateImageData,
updateFirstLabelCreatedFlag,
- updateProjectData
+ updateProjectData,
+ updateActiveContext
} = props;
const renderContent = () => {
- return(
+ return (
- )
+ );
};
const onAccept = () => {
updateActiveLabelNameId(null);
updateLabelNames([]);
- updateProjectData({type: null, name: "my-project-name"});
+ updateProjectData({type: null, name: 'my-project-name'});
updateActiveImageIndex(null);
updateImageData([]);
updateFirstLabelCreatedFlag(false);
+ ContextManager.switchCtx(null);
PopupActions.close();
};
@@ -58,15 +66,18 @@ const ExitProjectPopup: React.FC = (props) => {
PopupActions.close();
};
- return(
+ return (
+
= (
}
return(
+
= (
rejectLabel={rejectLabel}
onReject={() => onReject(labelType)}
/>
+
);
};
diff --git a/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.scss b/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.scss
index 7232882c..aad95f3e 100644
--- a/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.scss
+++ b/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.scss
@@ -1,90 +1,79 @@
@import '../../../settings/Settings';
.GenericYesNoPopup {
- max-height: 600px;
- max-width: 500px;
- width: 50%;
- border-radius: 5px;
- user-select: none;
- box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.02);
-
- display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
- overflow: hidden;
-
- .Header {
- align-self: stretch;
- height: 40px;
- box-shadow: 0px 2px 15px 0px rgba(0,0,0,0.4);
- color: white;
- font-weight: 900;
- font-size: 18px;
- background-color: $darkThemeFirstColor;
-
+ margin-top: auto;
+ margin-bottom: -22px;
+ padding: 41px 70px;
display: flex;
- flex-direction: column;
- flex-wrap: nowrap;
justify-content: center;
- align-items: center;
- align-content: center;
- }
-
- .Content {
- align-self: stretch;
- font-size: 14px;
- background-color: $darkThemeSecondColor;
- flex: 1;
-
+ background: rgba(255, 255, 255, 0.58);
+ border-radius: 11.0791px;
+ max-width: 575.58px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
- justify-content: center;
- align-items: center;
- align-content: center;
- }
+ overflow: hidden;
- .Footer {
- padding: 0 40px;
- height: 80px;
- align-self: stretch;
- background-color: $darkThemeSecondColor;
- border-top: solid 1px $darkThemeFirstColor;
+ .Content {
+ align-self: stretch;
+ font-size: 14px;
+
+ flex: 1;
- display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
- justify-content: flex-end;
- align-items: center;
- align-content: flex-end;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
+
+ .Footer {
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: center;
+ align-content: flex-end;
- .TextButton {
- margin-left: 20px;
- box-shadow: $secondaryColor 0 0 0 2px inset; // fallback if new css variables are not supported by browser
- box-shadow: var(--leading-color) 0 0 0 2px inset;
- background-color: $secondaryColor; // fallback if new css variables are not supported by browser
- background-color: var(--leading-color);
- color: white; // fallback if new css variables are not supported by browser
- color: var(--button-text-color);
+ .TextButton {
+ margin-left: 20px;
+ background: #FF7DA9;
+ border-radius: 9.23261px;
+ color: #FFFFFF;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18.4652px;
+ line-height: 22px;
+ min-width: 210px;
+ text-align: center;
+ padding: 12px;
+ box-shadow: unset;
+ border: 1px solid #FF7DA9;
+ &:hover {
+ background: #FFFFFF !important;
+ color: #000000 !important;
+ border: 1px solid #000000 !important;
+ }
- &:hover {
- background-color: transparent;
- color: $secondaryColor; // fallback if new css variables are not supported by browser
- color: var(--leading-color);
- }
+ &.disabled {
+ box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
+ background-color: $darkThemeThirdColor;
+ cursor: default;
+ opacity: 0.6;
- &.disabled {
- box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
- background-color: $darkThemeThirdColor;
- cursor: default;
- opacity: 0.6;
+ &:hover {
+ box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
+ background-color: $darkThemeThirdColor;
+ color: white;
+ }
+ }
+ }
- &:hover {
- box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
- background-color: $darkThemeThirdColor;
- color: white;
+ .TextButton.reject{
+ background: #26D7FF;
+ border: 1px solid #26D7FF;
}
- }
}
- }
-}
\ No newline at end of file
+}
diff --git a/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.tsx b/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.tsx
index ffae6d7f..d13aad6b 100644
--- a/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.tsx
+++ b/src/views/PopupView/GenericYesNoPopup/GenericYesNoPopup.tsx
@@ -40,7 +40,7 @@ export const GenericYesNoPopup: React.FC = (
}, [status]);
return (
-
+
-
+ Due to the small size of the screen we do not support our editor
+ on mobile devices. Check what you missed and visit us from a
+ desktop.
+
+
+ {getSocialMediaButtons({width: 40, height: 40})}
+
- {getSocialMediaButtons({width: 40, height: 40})}
+ );
+
+ return (
+
;
-
- return(
+ {topNavigationBar}
+
+
-
+ {firstStage}
+ {secondStage}
+ {thirdStage}
+ {fourthStage}
+
+
- {topNavigationBar}
-
-
-
)
+ );
};
const mapDispatchToProps = {};
@@ -136,7 +150,4 @@ const mapStateToProps = (state: AppState) => ({
size: state.general.windowSize
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(MobileMainView);
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(MobileMainView);
diff --git a/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.scss b/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.scss
new file mode 100644
index 00000000..c4505867
--- /dev/null
+++ b/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.scss
@@ -0,0 +1,20 @@
+@import '../../../settings/Settings';
+
+.DeleteConfirmPopupContent {
+ align-self: stretch;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ padding-top: 30px;
+
+ .Message {
+ align-self: stretch;
+ color: white;
+ font-size: 15px;
+ padding: 0 40px 30px 40px;
+ }
+}
diff --git a/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.tsx b/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.tsx
new file mode 100644
index 00000000..6478f2da
--- /dev/null
+++ b/src/views/PopupView/DeleteConfirmPopup/DeleteConfirmPopup.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import './DeleteConfirmPopup.scss';
+import {GenericYesNoPopup} from '../GenericYesNoPopup/GenericYesNoPopup';
+import {AppState} from '../../../store';
+import {connect} from 'react-redux';
+import {PopupActions} from '../../../logic/actions/PopupActions';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {LabelActions} from '../../../logic/actions/LabelActions';
+
+interface IProps {}
+
+const DeleteConfirmPopup: React.FC
- {firstStage}
- {secondStage}
- {thirdStage}
- {fourthStage}
-
-
+
+ );
+ };
+
+ const onAccept = () => {
+ PopupActions.close();
+ const {id: labelId} = LabelsSelector.getActiveRectLabel();
+ const {id: imageId} = LabelsSelector.getActiveImageData();
+ console.log('imageId = ', imageId);
+ console.log('labelId = ', labelId);
+ LabelActions.deleteRectLabelById(imageId, labelId);
+ };
+
+ const onReject = () => {
+ PopupActions.close();
+ };
+
+ return (
+ Are you sure you want to Delete?
+
+
+ );
+};
+
+const mapDispatchToProps = {};
+
+const mapStateToProps = (state: AppState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DeleteConfirmPopup);
diff --git a/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.tsx b/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.tsx
index 70157f8f..f697f74e 100644
--- a/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.tsx
+++ b/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.tsx
@@ -1,19 +1,23 @@
-import React from 'react'
-import './ExitProjectPopup.scss'
-import {GenericYesNoPopup} from "../GenericYesNoPopup/GenericYesNoPopup";
+import React from 'react';
+import './ExitProjectPopup.scss';
+import {GenericYesNoPopup} from '../GenericYesNoPopup/GenericYesNoPopup';
import {
updateActiveImageIndex,
updateActiveLabelNameId,
updateFirstLabelCreatedFlag,
updateImageData,
updateLabelNames
-} from "../../../store/labels/actionCreators";
-import {AppState} from "../../../store";
-import {connect} from "react-redux";
-import {ImageData, LabelName} from "../../../store/labels/types";
-import {PopupActions} from "../../../logic/actions/PopupActions";
-import {ProjectData} from "../../../store/general/types";
-import {updateProjectData} from "../../../store/general/actionCreators";
+} from '../../../store/labels/actionCreators';
+import {updateActiveContext} from '../../../store/general/actionCreators';
+
+import {AppState} from '../../../store';
+import {connect} from 'react-redux';
+import {ImageData, LabelName} from '../../../store/labels/types';
+import {PopupActions} from '../../../logic/actions/PopupActions';
+import {ProjectData} from '../../../store/general/types';
+import {updateProjectData} from '../../../store/general/actionCreators';
+import {ContextType} from '../../../data/enums/ContextType';
+import {ContextManager} from '../../../logic/context/ContextManager';
interface IProps {
updateActiveImageIndex: (activeImageIndex: number) => any;
@@ -22,6 +26,7 @@ interface IProps {
updateImageData: (imageData: ImageData[]) => any;
updateFirstLabelCreatedFlag: (firstLabelCreatedFlag: boolean) => any;
updateProjectData: (projectData: ProjectData) => any;
+ updateActiveContext: (activeContext: ContextType) => any;
}
const ExitProjectPopup: React.FC
- Are you sure you want to leave the editor? You will permanently lose all your progress.
+ Are you sure you want to leave the editor? You will
+ permanently lose all your progress.
+
= (
{!skipAcceptButton &&
diff --git a/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.scss b/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.scss
new file mode 100644
index 00000000..2acbd373
--- /dev/null
+++ b/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.scss
@@ -0,0 +1,146 @@
+@import '../../../settings/Settings';
+
+.GenericYesNoPopupDraggable {
+ max-height: 800px;
+ max-width: 700px;
+
+ // width: 50%;
+ border-radius: 5px;
+ user-select: none;
+ box-shadow: 0px 0px 10px 3px rgba(255, 255, 255, 0.02);
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ overflow: hidden;
+
+ .Header {
+ align-self: stretch;
+ height: 40px;
+ box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.4);
+ color: white;
+ font-weight: 900;
+ font-size: 18px;
+ background-color: $darkThemeFirstColor;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
+
+ .Content {
+ align-self: stretch;
+ font-size: 14px;
+ background-color: $darkThemeSecondColor;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ }
+
+ .Footer {
+ padding: 0 40px;
+ height: 80px;
+ align-self: stretch;
+ background-color: $darkThemeSecondColor;
+ border-top: solid 1px $darkThemeFirstColor;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-items: center;
+ align-content: flex-end;
+
+ .TextButton {
+ box-shadow: $secondaryColor 0 0 0 2px inset; // fallback if new css variables are not supported by browser
+ box-shadow: var(--leading-color) 0 0 0 2px inset;
+ background-color: $secondaryColor; // fallback if new css variables are not supported by browser
+ background-color: var(--leading-color);
+ color: white; // fallback if new css variables are not supported by browser
+ color: var(--button-text-color);
+
+ &:hover {
+ background-color: transparent;
+ color: $secondaryColor; // fallback if new css variables are not supported by browser
+ color: var(--leading-color);
+ }
+
+ &.disabled {
+ box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
+ background-color: $darkThemeThirdColor;
+ cursor: default;
+ opacity: 0.6;
+
+ &:hover {
+ box-shadow: $darkThemeThirdColor 0 0 0 2px inset;
+ background-color: $darkThemeThirdColor;
+ color: white;
+ }
+ }
+ }
+ }
+}
+
+.flexible-modal {
+ position: absolute;
+ z-index: 1;
+ border: 1px solid #ccc;
+ background: white;
+}
+.flexible-modal-mask {
+ position: fixed;
+ height: 100%;
+ background: rgba(0, 0, 0, 0) !important;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+.flexible-modal-resizer {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ cursor: se-resize;
+ margin: 5px;
+ border-bottom: solid 2px #333;
+ border-right: solid 2px #333;
+}
+.flexible-modal-drag-area {
+ background: rgba(255, 0, 0, 0) !important;
+ height: 30px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ cursor: move;
+}
+.flexible-modal-drag-area-left {
+ background: rgba(255, 0, 0, 0);
+ height: 30px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ cursor: move;
+}
+.flexible-modal-drag-area-right {
+ background: rgba(255, 0, 0, 0);
+ height: 30px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ cursor: move;
+}
+
+.text-success{
+ color: $lightSuccess;
+}
+
+.text-fail{
+ color: $dangerColor;
+}
\ No newline at end of file
diff --git a/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.tsx b/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.tsx
new file mode 100644
index 00000000..20343f5b
--- /dev/null
+++ b/src/views/PopupView/GenericYesNoPopupDraggable/GenericYesNoPopupDraggable.tsx
@@ -0,0 +1,75 @@
+import React, {useEffect, useState} from 'react';
+import './GenericYesNoPopupDraggable.scss';
+import {TextButton} from '../../Common/TextButton/TextButton';
+import {ContextManager} from '../../../logic/context/ContextManager';
+import {ContextType} from '../../../data/enums/ContextType';
+import ReactModal from 'react-modal-resizable-draggable';
+
+interface IProps {
+ title: string;
+ renderContent: () => any;
+ acceptLabel?: string;
+ onAccept?: () => any;
+ skipAcceptButton?: boolean;
+ disableAcceptButton?: boolean;
+ rejectLabel?: string;
+ onReject?: () => any;
+ skipRejectButton?: boolean;
+ disableRejectButton?: boolean;
+}
+
+export const GenericYesNoPopupDraggable: React.FC = ({
+ title,
+ renderContent,
+ acceptLabel,
+ onAccept,
+ skipAcceptButton,
+ disableAcceptButton,
+ rejectLabel,
+ onReject,
+ skipRejectButton,
+ disableRejectButton
+}) => {
+ const [status, setMountStatus] = useState(false);
+ useEffect(() => {
+ if (!status) {
+ ContextManager.switchCtx(ContextType.POPUP);
+ setMountStatus(true);
+ }
+
+ // console.log('viewPortSize = ', window.innerWidth);
+ }, [status]);
+
+ return (
+ console.log('on focused')}
+ isOpen={true}
+ isMinimised={false}
+ onRequestClose={() => console.group('on request close')}>
+
+ );
+};
diff --git a/src/views/PopupView/ImportLabelPopup/ImportLabelPopup.tsx b/src/views/PopupView/ImportLabelPopup/ImportLabelPopup.tsx
index c0fae3d5..02b90d5d 100644
--- a/src/views/PopupView/ImportLabelPopup/ImportLabelPopup.tsx
+++ b/src/views/PopupView/ImportLabelPopup/ImportLabelPopup.tsx
@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
-import './ImportLabelPopup.scss'
+import React, {useState} from 'react';
+import './ImportLabelPopup.scss';
import {LabelType} from '../../../data/enums/LabelType';
import {PopupActions} from '../../../logic/actions/PopupActions';
import GenericLabelTypePopup from '../GenericLabelTypePopup/GenericLabelTypePopup';
@@ -10,32 +10,39 @@ import {connect} from 'react-redux';
import {useDropzone} from 'react-dropzone';
import {AcceptedFileType} from '../../../data/enums/AcceptedFileType';
import {ImageData, LabelName} from '../../../store/labels/types';
-import {updateActiveLabelType, updateImageData, updateLabelNames} from '../../../store/labels/actionCreators';
+import {
+ updateActiveLabelType,
+ updateImageData,
+ updateLabelNames
+} from '../../../store/labels/actionCreators';
import {ImporterSpecData} from '../../../data/ImporterSpecData';
import {AnnotationFormatType} from '../../../data/enums/AnnotationFormatType';
import {ILabelFormatData} from '../../../interfaces/ILabelFormatData';
interface IProps {
- activeLabelType: LabelType,
- updateImageDataAction: (imageData: ImageData[]) => any,
- updateLabelNamesAction: (labels: LabelName[]) => any,
- updateActiveLabelTypeAction: (activeLabelType: LabelType) => any
+ activeLabelType: LabelType;
+ updateImageDataAction: (imageData: ImageData[]) => any;
+ updateLabelNamesAction: (labels: LabelName[]) => any;
+ updateActiveLabelTypeAction: (activeLabelType: LabelType) => any;
}
-const ImportLabelPopup: React.FC = (
- {
- activeLabelType,
- updateImageDataAction,
- updateLabelNamesAction,
- updateActiveLabelTypeAction
- }) => {
+const ImportLabelPopup: React.FC = ({
+ activeLabelType,
+ updateImageDataAction,
+ updateLabelNamesAction,
+ updateActiveLabelTypeAction
+}) => {
const resolveFormatType = (labelType: LabelType): AnnotationFormatType => {
- const possibleImportFormats = ImportFormatData[labelType]
- return possibleImportFormats.length === 1 ? possibleImportFormats[0].type : null
- }
+ const possibleImportFormats = ImportFormatData[labelType];
+ return possibleImportFormats.length === 1
+ ? possibleImportFormats[0].type
+ : null;
+ };
const [labelType, setLabelType] = useState(activeLabelType);
- const [formatType, setFormatType] = useState(resolveFormatType(activeLabelType));
+ const [formatType, setFormatType] = useState(
+ resolveFormatType(activeLabelType)
+ );
const [loadedLabelNames, setLoadedLabelNames] = useState([]);
const [loadedImageData, setLoadedImageData] = useState([]);
const [annotationsLoadedError, setAnnotationsLoadedError] = useState(null);
@@ -44,33 +51,40 @@ const ImportLabelPopup: React.FC = (
accept: [AcceptedFileType.JSON, AcceptedFileType.TEXT],
multiple: true,
onDrop: (acceptedFiles) => {
- const importer = new (ImporterSpecData[formatType])([labelType])
- importer.import(acceptedFiles, onAnnotationLoadSuccess, onAnnotationsLoadFailure);
+ const importer = new ImporterSpecData[formatType]([labelType]);
+ importer.import(
+ acceptedFiles,
+ onAnnotationLoadSuccess,
+ onAnnotationsLoadFailure
+ );
}
});
const onLabelTypeChange = (labelType: LabelType) => {
setLabelType(labelType);
- setFormatType(resolveFormatType(labelType))
+ setFormatType(resolveFormatType(labelType));
setLoadedLabelNames([]);
setLoadedImageData([]);
setAnnotationsLoadedError(null);
- }
+ };
- const onAnnotationLoadSuccess = (imagesData: ImageData[], labelNames: LabelName[]) => {
+ const onAnnotationLoadSuccess = (
+ imagesData: ImageData[],
+ labelNames: LabelName[]
+ ) => {
setLoadedLabelNames(labelNames);
setLoadedImageData(imagesData);
setAnnotationsLoadedError(null);
- }
+ };
- const onAnnotationsLoadFailure = (error?:Error) => {
+ const onAnnotationsLoadFailure = (error?: Error) => {
setLoadedLabelNames([]);
setLoadedImageData([]);
setAnnotationsLoadedError(error);
};
const onAccept = (labelType: LabelType) => {
- if (loadedLabelNames.length !== 0 && loadedImageData.length !== 0) {
+ if (loadedImageData.length !== 0) {
updateImageDataAction(loadedImageData);
updateLabelNamesAction(loadedLabelNames);
updateActiveLabelTypeAction(labelType);
@@ -84,90 +98,102 @@ const ImportLabelPopup: React.FC = (
const onAnnotationFormatChange = (format: AnnotationFormatType) => {
setFormatType(format);
- }
+ };
const getDropZoneContent = () => {
if (!!annotationsLoadedError) {
- return <>
-
-
-
-
+
+
-
+
{title}
@@ -51,13 +51,13 @@ export const GenericYesNoPopup: React.FC{title}
+ {renderContent()}
+
+ {!skipAcceptButton && (
+
+
- Annotation import was unsuccessful
- {annotationsLoadedError.message} -Try again
- ; - } else if (loadedImageData.length !== 0 && loadedLabelNames.length !== 0) { - return <> -
- Annotation ready for import
- After import you will lose - all your current annotations - ; + return ( + <> + +
+ + Annotation import was unsuccessful +
+ {annotationsLoadedError.message} +Try again
+ + ); + } else if (loadedImageData.length !== 0) { + return ( + <> +
+ Annotation ready for import
+ After import you will lose all your current annotations + + ); } else { - return <> - -
- {`Drop ${formatType} annotations`}
-or
-Click here to select them
- ; + return ( + <> + +
+ {`Drop ${formatType} annotations`}
+or
+Click here to select them
+ + ); } }; const getOptions = (exportFormatData: ILabelFormatData[]) => { return exportFormatData.map((entry: ILabelFormatData) => { - return onAnnotationFormatChange(entry.type)}
- key={entry.type}
- >
- {entry.type === formatType ?
- 
:
- 
}
- {entry.label}
-
- })
+ return (
+ :
- }
- {entry.label}
- onAnnotationFormatChange(entry.type)}
+ key={entry.type}>
+ {entry.type === formatType ? (
+
+ ) : (
+
+ )}
+ {entry.label}
+
+ );
+ });
};
const renderInternalContent = (labelType: LabelType) => {
if (!formatType && ImportFormatData[labelType].length !== 0) {
return [
-
+ ) : (
+
+ )}
+ {entry.label}
+
+
Select file format you would like to use to import labels.
,
-
+ = (
acceptLabel={'Import'}
onAccept={onAccept}
skipAcceptButton={ImportFormatData[labelType].length === 0}
- disableAcceptButton={loadedImageData.length === 0 || loadedLabelNames.length === 0 || !!annotationsLoadedError}
+ disableAcceptButton={
+ loadedImageData.length === 0 || !!annotationsLoadedError
+ }
rejectLabel={'Cancel'}
onReject={onReject}
renderInternalContent={renderInternalContent}
/>
- )
+ );
};
const mapDispatchToProps = {
@@ -190,10 +218,7 @@ const mapDispatchToProps = {
};
const mapStateToProps = (state: AppState) => ({
- activeLabelType: state.labels.activeLabelType,
+ activeLabelType: state.labels.activeLabelType
});
-export default connect(
- mapStateToProps,
- mapDispatchToProps
-)(ImportLabelPopup);
+export default connect(mapStateToProps, mapDispatchToProps)(ImportLabelPopup);
diff --git a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx
index e9cf0862..d7ee391d 100644
--- a/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx
+++ b/src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx
@@ -256,6 +256,7 @@ const InsertLabelNamesPopup: React.FC = (
};
return (
+
= (
onAccept={isUpdate ? safeOnUpdateAcceptCallback : safeOnCreateAcceptCallback}
rejectLabel={isUpdate ? 'Cancel' : 'Load labels from file'}
onReject={isUpdate ? onUpdateRejectCallback : onCreateRejectCallback}
- />)
+
+ />
+
+ )
+
};
const mapDispatchToProps = {
diff --git a/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.scss b/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.scss
new file mode 100644
index 00000000..f2e0f31c
--- /dev/null
+++ b/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.scss
@@ -0,0 +1,58 @@
+@import '../../../settings/Settings';
+
+.LabelInfoPopupContent {
+ align-self: stretch;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ min-height: 300px;
+}
+
+.AttributeContainer {
+ display: flex;
+ align-self: stretch;
+ max-height: 5em;
+ flex-direction: row;
+}
+
+.AttributeName {
+ display: flex;
+ flex: 1;
+ align-self: stretch;
+ color: white;
+ font-size: 15px;
+ padding: 0 40px 30px 40px;
+ border-bottom: solid 1px $darkThemeFirstColor;
+}
+
+.AttributeSelector {
+ display: flex;
+ flex: 2;
+ align-self: stretch;
+ flex-wrap: wrap;
+ max-height: 28px;
+ .title {
+ color: white;
+ }
+}
+.SampleImage {
+ position: absolute;
+ bottom: 1em;
+ left: 1em;
+ max-width: 230px;
+ max-height: 230px;
+}
+.IconItem {
+ display: flex;
+ flex: 1;
+ // justify-content: center;
+ align-items: center;
+
+ .ItemTitle {
+ margin-left: 1em;
+ }
+}
diff --git a/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.tsx b/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.tsx
new file mode 100644
index 00000000..467da422
--- /dev/null
+++ b/src/views/PopupView/LabelInfoPopup/LabelInfoPopup.tsx
@@ -0,0 +1,499 @@
+/* eslint-disable jsx-a11y/alt-text */
+import React, {useEffect, useState} from 'react';
+import './LabelInfoPopup.scss';
+import {AppState} from '../../../store';
+import {connect} from 'react-redux';
+import {HumanInfo, ImageData, ItemInfo} from '../../../store/labels/types';
+import {GenericYesNoPopup} from '../GenericYesNoPopup/GenericYesNoPopup';
+import {updateActivePopupType} from '../../../store/general/actionCreators';
+import {PopupWindowType} from '../../../data/enums/PopupWindowType';
+import {LabelsSelector} from '../../../store/selectors/LabelsSelector';
+import {TagButton} from '../../Common/TagButton/TagButton';
+import {
+ ATTRIBUTE_TYPE,
+ FASHION_STYLE,
+ FASHION_STYLE_MAN,
+ FASHION_STYLE_WOMAN,
+ GENDER,
+ ITEM_COLOR,
+ ITEM_PATTERN,
+ MAIN_CATEGORY_CODE,
+ SOURCE,
+ SUB_CATEGORY_CODE,
+ SUB_CATEGORY_TO_MAIN
+} from '../../../data/enums/ItemType';
+import {LabelModeType} from '../../../data/enums/LabelType';
+import {AttributeSelect} from '../../Common/AttributeSelect/AttributeSelect';
+import _ from 'lodash';
+import {
+ updateActiveColor,
+ updateActiveGender,
+ updateActiveHumanID,
+ updateActiveHumanType,
+ updateActiveMainCategory,
+ updateActivePattern,
+ updateActiveStyles,
+ updateActiveSubCategory,
+ updateImageDataById
+} from '../../../store/labels/actionCreators';
+
+import {vi as lang} from '../../../lang';
+import {GenericYesNoPopupDraggable} from '../GenericYesNoPopupDraggable/GenericYesNoPopupDraggable';
+import {JSONUploadStatus} from '../../../data/enums/JSONUploadStatus';
+import {Settings} from '../../../settings/Settings';
+
+interface IProps {
+ labelRectId: string;
+ imageData: ImageData;
+ updateActivePopupTypeAction: (popupType: PopupWindowType) => any;
+ updateImageDataByIdAction: (id: string, newImageData: ImageData) => any;
+ updateActiveGenderAction: (gender: number) => any;
+ updateActiveHumanTypeAction: (humanType: number) => any;
+ updateActiveStylesAction: (styles: string[]) => any;
+ updateActiveHumanIDAction: (humanId: string) => any;
+ updateActiveMainCategoryAction: (mainCategory: number) => any;
+ updateActiveSubCategoryAction: (subCategory: number) => any;
+ updateActiveColorAction: (color: number) => any;
+ updateActivePatternAction: (pattern: number) => any;
+}
+
+interface ISelectedItem {
+ [key: string]: any;
+}
+
+const LabelInfoPopup: React.FC = ({
+ labelRectId,
+ imageData,
+ updateActivePopupTypeAction,
+ updateImageDataByIdAction,
+ updateActiveGenderAction,
+ updateActiveHumanTypeAction,
+ updateActiveStylesAction,
+ updateActiveHumanIDAction,
+ updateActiveMainCategoryAction,
+ updateActiveSubCategoryAction,
+ updateActiveColorAction,
+ updateActivePatternAction
+}) => {
+ const labelRect = LabelsSelector.getActiveRectLabel();
+ const {id, mode} = labelRect;
+ const [humanInfo, setHumanInfo] = useState();
+ const [itemInfo, setItemInfo] = useState();
+ const [selectedItems, setSelectedItems] = useState({});
+ const [gender, setGender] = useState();
+ const [image, setImage] = useState();
+ const [isFollowHumanSetting, setFollowHumanSetting] = useState(false);
+
+ useEffect(() => {
+ if (mode === LabelModeType.HUMAN) {
+ const found = _.find(imageData.humans, {uuid: id});
+ const foundGender = gender ? gender : found?.gender;
+ const genderStyles =
+ foundGender === GENDER.MAN
+ ? FASHION_STYLE_MAN
+ : FASHION_STYLE_WOMAN;
+ setHumanInfo(found);
+ setSelectedItems({
+ [ATTRIBUTE_TYPE.SOURCE]: found.type,
+ [ATTRIBUTE_TYPE.GENDER]: foundGender,
+ [ATTRIBUTE_TYPE.FASHION_STYLE]:
+ found.styles.length > 0
+ ? genderStyles.filter((style) =>
+ found.styles.includes(style.name.toUpperCase())
+ )
+ : genderStyles.filter((style) =>
+ imageData.guideStyles
+ .map((gs) => parseInt(gs.seq))
+ .includes(style.seq)
+ )
+ });
+ } else {
+ const found = _.find(imageData.items, {uuid: id});
+ setItemInfo(found);
+ const foundHuman = imageData.humans.find(
+ (human) => human.uuid === found.humanId
+ );
+ setHumanInfo(foundHuman ? foundHuman : null);
+ const foundGender = gender
+ ? gender
+ : foundHuman?.gender
+ ? foundHuman.gender
+ : found?.gender;
+
+ const genderStyles =
+ foundGender === GENDER.MAN
+ ? FASHION_STYLE_MAN
+ : FASHION_STYLE_WOMAN;
+
+ setSelectedItems({
+ [ATTRIBUTE_TYPE.HUMAN_ID]: found.humanId,
+ [ATTRIBUTE_TYPE.GENDER]: foundGender,
+ [ATTRIBUTE_TYPE.MAIN_CATEGORY]: found.mainCategory,
+ [ATTRIBUTE_TYPE.SUB_CATEGORY]: found.subCategory,
+ [ATTRIBUTE_TYPE.ITEM_COLOR]: found.color,
+ [ATTRIBUTE_TYPE.ITEM_PATTERN]: found.pattern,
+ [ATTRIBUTE_TYPE.FASHION_STYLE]:
+ (foundHuman ? foundHuman : found).styles.length > 0
+ ? genderStyles.filter((style) =>
+ found.styles.includes(style.name.toUpperCase())
+ )
+ : genderStyles.filter((style) =>
+ imageData.guideStyles
+ .map((gs) => parseInt(gs.seq))
+ .includes(style.seq)
+ )
+ });
+ }
+
+ return () => {
+ // nothing
+ };
+ }, [mode, gender]);
+
+ useEffect(() => {
+ console.log('humanInfo = ', humanInfo);
+ setFollowHumanSetting(Boolean(humanInfo));
+ }, [humanInfo]);
+
+ const onSelect = (item: any, type: ATTRIBUTE_TYPE) => {
+ // const imageURL = item.label?.props?.children[0]?.props?.src;
+ setImage(null);
+
+ switch (type) {
+ case ATTRIBUTE_TYPE.HUMAN_ID: {
+ const human = imageData.humans.find(
+ (human) => human.uuid === item
+ );
+
+ let composedGender;
+ let selectiveStyles;
+
+ if (item === '-1' || !human) {
+ setHumanInfo(null);
+ composedGender = LabelsSelector.getActiveGender();
+ selectiveStyles = LabelsSelector.getActiveStyles();
+ } else {
+ setHumanInfo(human);
+ composedGender = human.gender;
+ selectiveStyles = human.styles;
+ }
+
+ const genderStyles =
+ composedGender === GENDER.MAN
+ ? FASHION_STYLE_MAN
+ : FASHION_STYLE_WOMAN;
+
+ const composedStyles =
+ selectiveStyles.length > 0
+ ? genderStyles.filter((style) =>
+ selectiveStyles.includes(style.name.toUpperCase())
+ )
+ : genderStyles.filter((style) =>
+ imageData.guideStyles
+ .map((gs) => parseInt(gs.seq))
+ .includes(style.seq)
+ );
+
+ setSelectedItems({
+ ...selectedItems,
+ [type]: item,
+ [ATTRIBUTE_TYPE.GENDER]: composedGender,
+ [ATTRIBUTE_TYPE.FASHION_STYLE]: composedStyles
+ });
+ break;
+ }
+ case ATTRIBUTE_TYPE.GENDER: {
+ setGender(item);
+ setSelectedItems({...selectedItems, [type]: item});
+ break;
+ }
+ case ATTRIBUTE_TYPE.MAIN_CATEGORY: {
+ setSelectedItems({
+ ...selectedItems,
+ [ATTRIBUTE_TYPE.MAIN_CATEGORY]: item,
+ [ATTRIBUTE_TYPE.SUB_CATEGORY]: SUB_CATEGORY_CODE.UNKNOWN
+ });
+ break;
+ }
+ case ATTRIBUTE_TYPE.SUB_CATEGORY: {
+ setSelectedItems({
+ ...selectedItems,
+ [ATTRIBUTE_TYPE.SUB_CATEGORY]: item
+ });
+ break;
+ }
+ default: {
+ setSelectedItems({...selectedItems, [type]: item});
+ }
+ }
+ };
+
+ const save = () => {
+ if (selectedItems[ATTRIBUTE_TYPE.FASHION_STYLE]?.length !== 1) {
+ alert(lang.ALERT.SELECT_ONE_STYLE);
+ return;
+ }
+ imageData.uploadStatus = JSONUploadStatus.NEED_UPLOAD;
+
+ if (mode === LabelModeType.HUMAN) {
+ const updatedHumanInfo = {
+ ...humanInfo,
+ gender: selectedItems[ATTRIBUTE_TYPE.GENDER],
+ type: selectedItems[ATTRIBUTE_TYPE.SOURCE],
+ styles: selectedItems[ATTRIBUTE_TYPE.FASHION_STYLE].map(
+ (style) => style.name.toUpperCase()
+ )
+ };
+ // update active*
+ updateActiveGenderAction(updatedHumanInfo.gender);
+ updateActiveHumanTypeAction(updatedHumanInfo.type);
+ updateActiveStylesAction(updatedHumanInfo.styles);
+
+ // update imageData
+ imageData.humans = imageData.humans.map((human) =>
+ human.uuid === humanInfo.uuid ? updatedHumanInfo : human
+ );
+ // console.log('next = ', updatedHumanInfo, imageData);
+ updateImageDataByIdAction(imageData.id, imageData);
+ }
+ if (mode === LabelModeType.ITEM) {
+ // console.log('selectedItems', selectedItems);
+ const updateItemInfo: ItemInfo = {
+ ...itemInfo,
+ humanId: selectedItems[ATTRIBUTE_TYPE.HUMAN_ID],
+ gender: selectedItems[ATTRIBUTE_TYPE.GENDER],
+ mainCategory: selectedItems[ATTRIBUTE_TYPE.MAIN_CATEGORY],
+ subCategory: selectedItems[ATTRIBUTE_TYPE.SUB_CATEGORY],
+ color: selectedItems[ATTRIBUTE_TYPE.ITEM_COLOR],
+ pattern: selectedItems[ATTRIBUTE_TYPE.ITEM_PATTERN],
+ styles: selectedItems[ATTRIBUTE_TYPE.FASHION_STYLE].map(
+ (style) => style.name.toUpperCase()
+ )
+ };
+
+ // update active*
+ updateActiveGenderAction(updateItemInfo.gender);
+ updateActiveMainCategoryAction(updateItemInfo.mainCategory);
+ updateActiveSubCategoryAction(updateItemInfo.subCategory);
+ updateActiveColorAction(updateItemInfo.color);
+ updateActivePatternAction(updateItemInfo.pattern);
+ updateActiveStylesAction(updateItemInfo.styles);
+ updateActiveHumanIDAction(updateItemInfo.humanId);
+
+ // update imageData
+ imageData.items = imageData.items.map((item) =>
+ item.uuid === itemInfo.uuid ? updateItemInfo : item
+ );
+ updateImageDataByIdAction(imageData.id, imageData);
+ }
+ updateActivePopupTypeAction(null);
+ };
+
+ const renderComment = () =>{
+ const {qc_comment, qc_status} = itemInfo || humanInfo
+
+ if(qc_comment) {
+ return (
+ updateActivePopupTypeAction(null)}
+ />
+ );
+};
+
+const mapDispatchToProps = {
+ updateActivePopupTypeAction: updateActivePopupType,
+ updateImageDataByIdAction: updateImageDataById,
+ updateActiveGenderAction: updateActiveGender,
+ updateActiveHumanTypeAction: updateActiveHumanType,
+ updateActiveStylesAction: updateActiveStyles,
+ updateActiveHumanIDAction: updateActiveHumanID,
+ updateActiveMainCategoryAction: updateActiveMainCategory,
+ updateActiveSubCategoryAction: updateActiveSubCategory,
+ updateActiveColorAction: updateActiveColor,
+ updateActivePatternAction: updateActivePattern
+};
+
+const mapStateToProps = (state: AppState) => ({
+ imageData: state.labels.imagesData[state.labels.activeImageIndex],
+ labelRectId: state.labels.activeLabelId
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LabelInfoPopup);
diff --git a/src/views/PopupView/LoadLabelNamesPopup/LoadLabelNamesPopup.tsx b/src/views/PopupView/LoadLabelNamesPopup/LoadLabelNamesPopup.tsx
index 6810ccaa..3a556707 100644
--- a/src/views/PopupView/LoadLabelNamesPopup/LoadLabelNamesPopup.tsx
+++ b/src/views/PopupView/LoadLabelNamesPopup/LoadLabelNamesPopup.tsx
@@ -107,6 +107,7 @@ const LoadLabelNamesPopup: React.FC = ({updateActivePopupType, updateLab
};
return(
+
= ({updateActivePopupType, updateLab
rejectLabel={"Create labels list"}
onReject={onReject}
/>
+
);
};
diff --git a/src/views/PopupView/LoadModelPopup/LoadModelPopup.tsx b/src/views/PopupView/LoadModelPopup/LoadModelPopup.tsx
index 71d62e46..fb2877a7 100644
--- a/src/views/PopupView/LoadModelPopup/LoadModelPopup.tsx
+++ b/src/views/PopupView/LoadModelPopup/LoadModelPopup.tsx
@@ -124,6 +124,7 @@ export const LoadModelPopup: React.FC = () => {
};
return (
+
{
onReject={onReject}
disableRejectButton={modelIsLoadingStatus}
/>
+
);
};
\ No newline at end of file
diff --git a/src/views/PopupView/LoadMoreImagesPopup/LoadMoreImagesPopup.tsx b/src/views/PopupView/LoadMoreImagesPopup/LoadMoreImagesPopup.tsx
index d9273ea2..b1cbfbe9 100644
--- a/src/views/PopupView/LoadMoreImagesPopup/LoadMoreImagesPopup.tsx
+++ b/src/views/PopupView/LoadMoreImagesPopup/LoadMoreImagesPopup.tsx
@@ -73,6 +73,7 @@ const LoadMoreImagesPopup: React.FC = ({addImageData}) => {
};
return(
+
= ({addImageData}) => {
rejectLabel={"Cancel"}
onReject={onReject}
/>
+
);
};
diff --git a/src/views/PopupView/LoginPopup/LoginPopup.scss b/src/views/PopupView/LoginPopup/LoginPopup.scss
new file mode 100644
index 00000000..e5d17039
--- /dev/null
+++ b/src/views/PopupView/LoginPopup/LoginPopup.scss
@@ -0,0 +1,89 @@
+@import '../../../settings//Settings';
+@keyframes mymove {
+ from { left: 0px; opacity: 0.8; }
+ to { right: 0px; }
+ }
+.LoginPopupContent {
+ align-self: stretch;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ min-height: 100px;
+ width: 100%;
+ &__parent{
+ position: relative;
+ }
+ &__move{
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ animation: mymove 1s ease-in;
+ z-index: 100;
+
+ }
+ &__icon{
+ position: absolute;
+ top: 22px;
+ left: 20px;
+ z-index: 100;
+ }
+ .MuiInputBase-input {
+ background: #FFFF;
+ border-radius: 9.73271px;
+ height: 65px ;
+ max-height: 65px;
+ width: 100%;
+ padding: 0px 50px;
+ color: #000000 !important;
+ &::placeholder{
+ color: #BABABA;
+ font-weight: 400;
+ font-size: 14.5991px;
+ line-height: 18px;
+ }
+ }
+ .MuiInput-underline{
+ &::after{
+ display: none !important;
+ }
+ &::before{
+ display: none !important;
+ }
+ }
+
+ &__label{
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16.2212px;
+ line-height: 20px;
+ color: #000000;
+ margin-bottom: 12px;
+ }
+}
+
+.LoginPopupInputContainer {
+ width: 100%;
+ padding-bottom: 25px;
+
+}
+
+.LoginPopupInput {
+ color: white;
+}
+.LoginPopupMessage {
+ color: white;
+}
+
+.LoginPopupInputName {
+ display: flex;
+ flex: 1;
+ align-self: stretch;
+ color: white;
+ font-size: 15px;
+ padding: 0 40px 30px 40px;
+ border-bottom: solid 1px $darkThemeFirstColor;
+}
diff --git a/src/views/PopupView/LoginPopup/LoginPopup.tsx b/src/views/PopupView/LoginPopup/LoginPopup.tsx
new file mode 100644
index 00000000..93fb3741
--- /dev/null
+++ b/src/views/PopupView/LoginPopup/LoginPopup.tsx
@@ -0,0 +1,136 @@
+import React, {useEffect, useState} from 'react';
+import './LoginPopup.scss';
+import {Input} from '@material-ui/core';
+import {connect} from 'react-redux';
+import {AppState} from '../../../store';
+import {updateAuthData} from '../../../store/auth/actionCreators';
+import {updateActivePopupType} from '../../../store/general/actionCreators';
+import {GenericYesNoPopup} from '../GenericYesNoPopup/GenericYesNoPopup';
+import {AuthData} from '../../../store/auth/types';
+import {ClipLoader} from 'react-spinners';
+import {CSSHelper} from '../../../logic/helpers/CSSHelper';
+import {APIService} from '../../../services/API';
+import {PopupWindowType} from '../../../data/enums/PopupWindowType';
+import WrapperLogin from "../../../components/WrapperLogin/index"
+import {CodiconAccount, Eye, MoveIcon} from "../../../assets/icons"
+
+interface IProps {
+ updateAuthDataAction: (authData: AuthData) => any;
+ updateActivePopupTypeAction: (type: PopupWindowType) => any;
+}
+
+const LoginPopup: React.FC = ({
+ updateAuthDataAction,
+ updateActivePopupTypeAction
+}) => {
+ const [isLoadingStatus, setIsLoadingStatus] = useState(false);
+ const [email, setEmail] = useState();
+ const [password, setPassword] = useState();
+ const [message, setMessage] = useState();
+
+ useEffect(() => {
+ setMessage('');
+
+ return () => {
+ // do nothing
+ };
+ }, [email, password]);
+
+ const renderContent = () => (
+ = (props) => {
+ const {
+ updateActiveLabelNameId,
+ updateLabelNames,
+ updateActiveImageIndex,
+ updateImageData,
+ updateFirstLabelCreatedFlag,
+ updateProjectData,
+ updateAuthDataAction
+ } = props;
+
+ const renderContent = () => {
+ return (
+ = ({
+ tasks,
+ commonSummary,
+ updateTasksDataAction,
+ updateActivePopupTypeAction,
+ updateCommonSummaryAction
+}) => {
+ useEffect(() => {
+ loadTasks();
+ loadSummary();
+ }, []);
+
+ const loadTasks = async () => {
+ try {
+ const {data} = await APIService.getTasks();
+ updateTasksDataAction(data.tasks);
+ } catch (error) {
+ console.error('failed to loadTasks: ', error);
+ }
+ };
+
+ const loadSummary = async () => {
+ try {
+ const {data} = await APIService.getSummary();
+ const {
+ total_images: total,
+ labeled_images: labeled,
+ unchecked_images: unchecked,
+ waiting_qc_images: waitingQC,
+ passed_images: passed,
+ rejected_images: rejected
+ } = data.data;
+
+ const commonSummary: CommonSummary = {
+ images: {
+ total,
+ labeled,
+ unchecked,
+ waitingQC,
+ passed,
+ rejected
+ }
+ };
+ updateCommonSummaryAction(commonSummary);
+ } catch (error) {
+ console.error('failed to loadSummary: ', error);
+ }
+ };
+
+ const renderContent = () => {
+ const {
+ images: {total, labeled, unchecked, waitingQC, passed, rejected}
+ } = commonSummary;
+
+ return (
+ {
+ loadTasks();
+ loadSummary();
+ }}
+ rejectLabel="Close"
+ onReject={() => updateActivePopupTypeAction(null)}
+ />
+ );
+};
+
+const mapDispatchToProps = {
+ updateActivePopupTypeAction: updateActivePopupType,
+ updateTasksDataAction: updateTasks,
+ updateCommonSummaryAction: updateCommonSummary
+};
+
+const mapStateToProps = (state: AppState) => ({
+ tasks: state.performance.tasks,
+ commonSummary: state.performance.commonSummary
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(PerformancePopup);
diff --git a/src/views/PopupView/PopupView.tsx b/src/views/PopupView/PopupView.tsx
index 700b47b5..076b78cd 100644
--- a/src/views/PopupView/PopupView.tsx
+++ b/src/views/PopupView/PopupView.tsx
@@ -1,27 +1,35 @@
import React from 'react';
import './PopupView.scss';
-import { PopupWindowType } from "../../data/enums/PopupWindowType";
-import { AppState } from "../../store";
-import { connect } from "react-redux";
-import LoadLabelsPopup from "./LoadLabelNamesPopup/LoadLabelNamesPopup";
-import InsertLabelNamesPopup from "./InsertLabelNamesPopup/InsertLabelNamesPopup";
-import ExitProjectPopup from "./ExitProjectPopup/ExitProjectPopup";
-import LoadMoreImagesPopup from "./LoadMoreImagesPopup/LoadMoreImagesPopup";
-import { LoadModelPopup } from "./LoadModelPopup/LoadModelPopup";
-import SuggestLabelNamesPopup from "./SuggestLabelNamesPopup/SuggestLabelNamesPopup";
-import { CSSHelper } from "../../logic/helpers/CSSHelper";
-import { ClipLoader } from "react-spinners";
-import ImportLabelPopup from "./ImportLabelPopup/ImportLabelPopup";
-import ExportLabelPopup from "./ExportLabelsPopup/ExportLabelPopup";
+import {PopupWindowType} from '../../data/enums/PopupWindowType';
+import {AppState} from '../../store';
+import {connect} from 'react-redux';
+import LoadLabelsPopup from './LoadLabelNamesPopup/LoadLabelNamesPopup';
+import InsertLabelNamesPopup from './InsertLabelNamesPopup/InsertLabelNamesPopup';
+import ExitProjectPopup from './ExitProjectPopup/ExitProjectPopup';
+import LoadMoreImagesPopup from './LoadMoreImagesPopup/LoadMoreImagesPopup';
+import {LoadModelPopup} from './LoadModelPopup/LoadModelPopup';
+import SuggestLabelNamesPopup from './SuggestLabelNamesPopup/SuggestLabelNamesPopup';
+import {CSSHelper} from '../../logic/helpers/CSSHelper';
+import {ClipLoader} from 'react-spinners';
+import ImportLabelPopup from './ImportLabelPopup/ImportLabelPopup';
+import ExportLabelPopup from './ExportLabelsPopup/ExportLabelPopup';
+import LabelInfoPopup from './LabelInfoPopup/LabelInfoPopup';
+import LoginPopup from './LoginPopup/LoginPopup';
+import LogoutPopup from './LogoutPopup/LogoutPopup';
+import DeleteConfirmPopup from './DeleteConfirmPopup/DeleteConfirmPopup';
+import PerformancePopup from './PerformancePopup/PerformancePopup';
interface IProps {
activePopupType: PopupWindowType;
}
-const PopupView: React.FC = ({ activePopupType }) => {
-
+const PopupView: React.FC = ({activePopupType}) => {
const selectPopup = () => {
switch (activePopupType) {
+ case PopupWindowType.LOGIN:
+ return = ({ activePopupType }) => {
case PopupWindowType.IMPORT_ANNOTATIONS:
return = ({ activePopupType }) => {
return = (
};
return(
+
= (
rejectLabel={'Reject'}
onReject={onReject}
/>
+
);
};
diff --git a/tsconfig.json b/tsconfig.json
index d082ce90..b1b7e087 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
- "target": "es5",
+ "target": "ES6",
+ "baseUrl": "src",
"downlevelIteration": true,
"lib": [
"dom",
@@ -28,6 +29,6 @@
"noFallthroughCasesInSwitch": true
},
"include": [
- "src"
+ "src",
]
-}
+}
\ No newline at end of file
diff --git a/tslint.json b/tslint.json
index a6b9d34e..8937c684 100644
--- a/tslint.json
+++ b/tslint.json
@@ -14,3 +14,4 @@
]
}
}
+∏
\ No newline at end of file
{getOptions(ImportFormatData[labelType])}
- ]
+ ];
}
const importFormatData = ImportFormatData[labelType];
- return importFormatData.length === 0 ?
-
{getDropZoneContent()}
- }
+ );
+ };
- return(
+ return (
+
+ )
+ }
+ return null
+ }
+
+ const renderContent = () => {
+ // console.log('humanInfo', humanInfo);
+ // console.log('itemInfo', itemInfo);
+ // console.log('selectedItems', selectedItems);
+ if (!humanInfo && !itemInfo) {
+ return null;
+ }
+ console.log('follow? ', isFollowHumanSetting);
+ return mode === LabelModeType.HUMAN ? (
+ {qc_comment}
+
+ {renderComment()}
+
+ ) : (
+
+
+ Gender
+
+
+
+
+ Human type
+
+
+
+
+ {image ? (
+ Styles
+
+
+
+ 
+
+ ) : null}
+
+
+ {renderComment()}
+
+ );
+ };
+
+ return (
+
+
+
+ Item UUID
+
+
+ {labelRectId}
+
+
+ Linked Human ID
+
+
+
+
+ Gender
+
+
+
+
+ Main Category
+
+
+
+
+ Sub Category
+
+
+
+
+ Color
+
+
+
+
+
+ Pattern
+
+
+
+
+ {image ? (
+ Styles
+
+
+
+
+
+ ) : null}
+
+
+
+ );
+
+ const doLogin = async () => {
+ try {
+ setIsLoadingStatus(true);
+ const {data} = await APIService.login({email, password});
+ // console.log('result.data', data);
+ if (data.code === 200) {
+ const {displayName, role, token: authToken} = data.data;
+ updateAuthDataAction({
+ email,
+ displayName,
+ authToken,
+ role
+ });
+ window.localStorage.setItem(
+ '@@auth',
+ JSON.stringify({email, displayName, authToken, role})
+ );
+ setTimeout(() => {
+ window.location.href = `${process.env.REACT_APP_API_ROOT || "/labeler"}`
+ }, 1000)
+ } else if (data.errors) {
+ setMessage(data.errors.map((error) => error.error['en']).join('\n'));
+ }
+ } catch (error) {
+ console.error('failed to login: ', error);
+ } finally {
+ setIsLoadingStatus(false);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {isLoadingStatus ? (
+
+
+
+ alert('Login required!')}
+ />
+
+
+ );
+};
+
+const mapDispatchToProps = {
+ updateAuthDataAction: updateAuthData,
+ updateActivePopupTypeAction: updateActivePopupType
+};
+
+const mapStateToProps = (state: AppState) => ({
+ authData: state.auth.authData
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LoginPopup);
diff --git a/src/views/PopupView/LogoutPopup/LogoutPopup.scss b/src/views/PopupView/LogoutPopup/LogoutPopup.scss
new file mode 100644
index 00000000..508544df
--- /dev/null
+++ b/src/views/PopupView/LogoutPopup/LogoutPopup.scss
@@ -0,0 +1,20 @@
+@import '../../../settings/Settings';
+
+.LogoutPopupContent {
+ align-self: stretch;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: center;
+ align-content: flex-start;
+ padding-top: 30px;
+
+ .Message {
+ align-self: stretch;
+ color: white;
+ font-size: 15px;
+ padding: 0 40px 30px 40px;
+ }
+}
diff --git a/src/views/PopupView/LogoutPopup/LogoutPopup.tsx b/src/views/PopupView/LogoutPopup/LogoutPopup.tsx
new file mode 100644
index 00000000..f20fc487
--- /dev/null
+++ b/src/views/PopupView/LogoutPopup/LogoutPopup.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import './LogoutPopup.scss';
+import {GenericYesNoPopup} from '../GenericYesNoPopup/GenericYesNoPopup';
+import {
+ updateActiveImageIndex,
+ updateActiveLabelNameId,
+ updateFirstLabelCreatedFlag,
+ updateImageData,
+ updateLabelNames
+} from '../../../store/labels/actionCreators';
+import {AppState} from '../../../store';
+import {connect} from 'react-redux';
+import {ImageData, LabelName} from '../../../store/labels/types';
+import {PopupActions} from '../../../logic/actions/PopupActions';
+import {ProjectData} from '../../../store/general/types';
+import {
+ updateActivePopupType,
+ updateProjectData
+} from '../../../store/general/actionCreators';
+import {updateAuthData} from '../../../store/auth/actionCreators';
+import {AuthData} from '../../../store/auth/types';
+import {PopupWindowType} from '../../../data/enums/PopupWindowType';
+import WrapperLogin from "../../../components/WrapperLogin/index"
+interface IProps {
+ updateActiveImageIndex: (activeImageIndex: number) => any;
+ updateActiveLabelNameId: (activeLabelId: string) => any;
+ updateLabelNames: (labelNames: LabelName[]) => any;
+ updateImageData: (imageData: ImageData[]) => any;
+ updateFirstLabelCreatedFlag: (firstLabelCreatedFlag: boolean) => any;
+ updateProjectData: (projectData: ProjectData) => any;
+ updateAuthDataAction: (authData: AuthData) => any;
+ updateActivePopupType: (type: PopupWindowType) => any;
+}
+
+const LogoutPopup: React.FC
+
+ );
+ };
+
+ const onAccept = () => {
+ updateAuthDataAction({
+ email: null,
+ displayName: null,
+ authToken: null,
+ role: null
+ });
+ window.localStorage.removeItem('@@auth');
+ updateActiveLabelNameId(null);
+ updateLabelNames([]);
+ updateProjectData({type: null, name: 'my-project-name'});
+ updateActiveImageIndex(null);
+ updateImageData([]);
+ updateFirstLabelCreatedFlag(false);
+ PopupActions.close();
+ };
+
+ const onReject = () => {
+ PopupActions.close();
+ };
+
+ return (
+
+ Are you sure you want to logout? You will permanently lose
+ all your progress.
+
+
+
+ );
+};
+
+const mapDispatchToProps = {
+ updateActiveLabelNameId,
+ updateLabelNames,
+ updateProjectData,
+ updateActiveImageIndex,
+ updateImageData,
+ updateFirstLabelCreatedFlag,
+ updateAuthDataAction: updateAuthData,
+ updateActivePopupType
+};
+
+const mapStateToProps = (state: AppState) => ({});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LogoutPopup);
diff --git a/src/views/PopupView/PerformancePopup/PerformancePopup.scss b/src/views/PopupView/PerformancePopup/PerformancePopup.scss
new file mode 100644
index 00000000..de22356b
--- /dev/null
+++ b/src/views/PopupView/PerformancePopup/PerformancePopup.scss
@@ -0,0 +1,33 @@
+@import '../../../settings/Settings';
+
+.PerformancePopupContent {
+ display: flex;
+ padding: 10px;
+ color: white;
+ width: 100%;
+ justify-content: flex-start;
+ flex-direction: column;
+ overflow: auto;
+}
+
+table {
+ width: 100%;
+}
+
+th {
+ background-color: rgba($color: yellow, $alpha: 0.7);
+ color: $darkThemeFirstColor;
+ border: 1px solid $darkThemeFirstColor;
+ text-align: center;
+}
+tr,
+td {
+ border: 1px solid lightgray;
+ text-align: center;
+}
+
+.Title {
+ text-align: center;
+ font-size: 1.5em;
+ font-weight: bold;
+}
diff --git a/src/views/PopupView/PerformancePopup/PerformancePopup.tsx b/src/views/PopupView/PerformancePopup/PerformancePopup.tsx
new file mode 100644
index 00000000..3c3bcdc8
--- /dev/null
+++ b/src/views/PopupView/PerformancePopup/PerformancePopup.tsx
@@ -0,0 +1,170 @@
+import {PopupWindowType} from 'data/enums/PopupWindowType';
+import React, {useEffect} from 'react';
+import {connect} from 'react-redux';
+import {APIService} from 'services/API';
+import {AppState} from 'store';
+import {updateActivePopupType} from 'store/general/actionCreators';
+import {
+ updateCommonSummary,
+ updateTasks
+} from 'store/performance/actionCreators';
+import {CommonSummary, Task} from 'store/performance/types';
+import {GenericYesNoPopupDraggable} from '../GenericYesNoPopupDraggable/GenericYesNoPopupDraggable';
+import './PerformancePopup.scss';
+
+interface IProps {
+ tasks: Task[];
+ commonSummary: CommonSummary;
+ updateTasksDataAction: (data: Task[]) => any;
+ updateActivePopupTypeAction: (popupType: PopupWindowType) => any;
+ updateCommonSummaryAction: (data: CommonSummary) => any;
+}
+
+const PerformancePopup: React.FC
+
+ );
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ Tasks
+ | Display Name | +Images | +Labels | +||||
|---|---|---|---|---|---|---|
| 8H | +1H | +Min | +8H | +1H | +Min | +|
| {task.name} | +{task.imagesTPD} | +{task.imagesTPH} | +{task.averageTimePerImage} | +{task.labeledTPD} | +{task.labeledTPH} | +{task.averageTimePerLabeled} | +
+ Summary
+
+ | Number of Images | +|||||
|---|---|---|---|---|---|
| total | +labeled | +unchecked | +waitingQC | +passed | +rejected | +
| {total} | +{labeled} | +{unchecked} | +{waitingQC} | +{passed} | +{rejected} | +
- {selectPopup()}
-
- );
+ return activePopupType && {selectPopup()}
;
};
const mapStateToProps = (state: AppState) => ({
activePopupType: state.general.activePopupType
});
-export default connect(
- mapStateToProps
-)(PopupView);
\ No newline at end of file
+export default connect(mapStateToProps)(PopupView);
diff --git a/src/views/PopupView/SuggestLabelNamesPopup/SuggestLabelNamesPopup.tsx b/src/views/PopupView/SuggestLabelNamesPopup/SuggestLabelNamesPopup.tsx
index faeb566b..46e73a84 100644
--- a/src/views/PopupView/SuggestLabelNamesPopup/SuggestLabelNamesPopup.tsx
+++ b/src/views/PopupView/SuggestLabelNamesPopup/SuggestLabelNamesPopup.tsx
@@ -185,6 +185,7 @@ const SuggestLabelNamesPopup: React.FC