42 | {selectRoute()}
43 |
45 | );
46 | };
47 |
48 | const mapStateToProps = (state: AppState) => ({
49 | projectType: state.general.projectData.type,
50 | windowSize: state.general.windowSize,
51 | ObjectDetectorLoaded: state.ai.isObjectDetectorLoaded,
52 | PoseDetectionLoaded: state.ai.isPoseDetectorLoaded
53 | });
54 |
55 | export default connect(
56 | mapStateToProps
57 | )(App);
58 |
--------------------------------------------------------------------------------
/src/__test__/custom-test-env.js:
--------------------------------------------------------------------------------
1 | const Environment = require('jest-environment-jsdom');
2 |
3 | /**
4 | * A custom environment to set the TextEncoder that is required by TensorFlow.js.
5 | */
6 | module.exports = class CustomTestEnvironment extends Environment {
7 | async setup() {
8 | await super.setup();
9 | const { TextEncoder } = require('util');
10 | this.global.TextEncoder = TextEncoder;
11 | }
12 | }
--------------------------------------------------------------------------------
/src/ai/ObjectDetector.ts:
--------------------------------------------------------------------------------
1 | import * as cocoSsd from '@tensorflow-models/coco-ssd';
2 | import {DetectedObject, ObjectDetection} from '@tensorflow-models/coco-ssd';
3 | import {store} from "../index";
4 | import {updateObjectDetectorStatus} from "../store/ai/actionCreators";
5 | import {LabelType} from "../data/enums/LabelType";
6 | import {LabelsSelector} from "../store/selectors/LabelsSelector";
7 | import {AIObjectDetectionActions} from "../logic/actions/AIObjectDetectionActions";
8 | import {updateActiveLabelType} from "../store/labels/actionCreators";
9 |
10 | export class ObjectDetector {
11 | private static model: ObjectDetection;
12 |
13 | public static loadModel(callback?: () => any) {
14 | cocoSsd
15 | .load()
16 | .then((model: ObjectDetection) => {
17 | ObjectDetector.model = model;
18 | store.dispatch(updateObjectDetectorStatus(true));
19 | store.dispatch(updateActiveLabelType(LabelType.RECT));
20 | const activeLabelType: LabelType = LabelsSelector.getActiveLabelType();
21 | activeLabelType === LabelType.RECT && AIObjectDetectionActions.detectRectsForActiveImage();
22 | callback && callback();
23 | })
24 | .catch((error) => {
25 | // TODO
26 | throw new Error(error);
27 | })
28 | }
29 |
30 | public static predict(image: HTMLImageElement, callback?: (predictions: DetectedObject[]) => any) {
31 | if (!ObjectDetector.model) return;
32 |
33 | ObjectDetector.model
34 | .detect(image)
35 | .then((predictions: DetectedObject[]) => {
36 | callback && callback(predictions)
37 | })
38 | .catch((error) => {
39 | // TODO
40 | throw new Error(error);
41 | })
42 | }
43 | }
--------------------------------------------------------------------------------
/src/ai/PoseDetector.ts:
--------------------------------------------------------------------------------
1 | import * as posenet from '@tensorflow-models/posenet';
2 | import {PoseNet} from "@tensorflow-models/posenet";
3 | import {Pose} from "@tensorflow-models/posenet";
4 | import {store} from "../index";
5 | import {updatePoseDetectorStatus} from "../store/ai/actionCreators";
6 | import {AIPoseDetectionActions} from "../logic/actions/AIPoseDetectionActions";
7 | import {LabelType} from "../data/enums/LabelType";
8 | import {LabelsSelector} from "../store/selectors/LabelsSelector";
9 | import {updateActiveLabelType} from "../store/labels/actionCreators";
10 |
11 | export class PoseDetector {
12 | private static model: PoseNet;
13 |
14 | public static loadModel(callback?: () => any) {
15 | posenet
16 | .load({
17 | architecture: 'ResNet50',
18 | outputStride: 32,
19 | inputResolution: 257,
20 | quantBytes: 2
21 | })
22 | .then((model: PoseNet) => {
23 | PoseDetector.model = model;
24 | store.dispatch(updatePoseDetectorStatus(true));
25 | store.dispatch(updateActiveLabelType(LabelType.POINT));
26 | const activeLabelType: LabelType = LabelsSelector.getActiveLabelType();
27 | activeLabelType === LabelType.POINT && AIPoseDetectionActions.detectPoseForActiveImage();
28 | callback && callback();
29 | })
30 | .catch((error) => {
31 | // TODO
32 | throw new Error(error);
33 | })
34 | }
35 |
36 | public static predict(image: HTMLImageElement, callback?: (predictions: Pose[]) => any) {
37 | if (!PoseDetector.model) return;
38 |
39 | PoseDetector.model
40 | .estimateMultiplePoses(image)
41 | .then((predictions: Pose[]) => {
42 | callback && callback(predictions)
43 | })
44 | .catch((error) => {
45 | // TODO
46 | throw new Error(error);
47 | })
48 | }
49 | }
--------------------------------------------------------------------------------
/src/configureStore.ts:
--------------------------------------------------------------------------------
1 | import { createStore } from 'redux';
2 | import { rootReducer } from './store';
3 |
4 | export default function configureStore() {
5 | return createStore(
6 | rootReducer,
7 | // @ts-ignore
8 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
9 | );
10 | }
--------------------------------------------------------------------------------
/src/data/EditorData.ts:
--------------------------------------------------------------------------------
1 | import {IPoint} from "../interfaces/IPoint";
2 | import {IRect} from "../interfaces/IRect";
3 | import {ISize} from "../interfaces/ISize";
4 |
5 | export interface EditorData {
6 | viewPortContentSize: ISize,
7 | mousePositionOnViewPortContent: IPoint,
8 | activeKeyCombo: string[],
9 | event?: Event
10 | zoom: number,
11 | viewPortSize: ISize,
12 | defaultRenderImageRect: IRect,
13 | realImageSize: ISize,
14 | viewPortContentImageRect: IRect,
15 | absoluteViewPortContentScrollPosition: IPoint
16 | }
--------------------------------------------------------------------------------
/src/data/ExportFormatData.ts:
--------------------------------------------------------------------------------
1 | import {ILabelFormatData} from "../interfaces/ILabelFormatData";
2 | import {LabelType} from "./enums/LabelType";
3 | import {AnnotationFormatType} from "./enums/AnnotationFormatType";
4 |
5 | export type ExportFormatDataMap = { [s in LabelType]: ILabelFormatData[]; };
6 |
7 | export const ExportFormatData: ExportFormatDataMap = {
8 | "RECT": [
9 | {
10 | type: AnnotationFormatType.YOLO,
11 | label: "A .zip package containing files in YOLO format."
12 | },
13 | {
14 | type: AnnotationFormatType.VOC,
15 | label: "A .zip package containing files in VOC XML format."
16 | },
17 | {
18 | type: AnnotationFormatType.CSV,
19 | label: "Single CSV file."
20 | }
21 | ],
22 | "POINT": [
23 | {
24 | type: AnnotationFormatType.CSV,
25 | label: "Single CSV file."
26 | }
27 | ],
28 | "LINE": [
29 | {
30 | type: AnnotationFormatType.CSV,
31 | label: "Single CSV file."
32 | }
33 | ],
34 | "POLYGON": [
35 | {
36 | type: AnnotationFormatType.VGG,
37 | label: "Single file in VGG JSON format."
38 | },
39 | {
40 | type: AnnotationFormatType.COCO,
41 | label: "Single file in COCO JSON format."
42 | }
43 | ],
44 | "IMAGE RECOGNITION": [
45 | {
46 | type: AnnotationFormatType.CSV,
47 | label: "Single CSV file."
48 | },
49 | {
50 | type: AnnotationFormatType.JSON,
51 | label: "Single JSON file."
52 | }
53 | ]
54 | }
--------------------------------------------------------------------------------
/src/data/HotKeyAction.ts:
--------------------------------------------------------------------------------
1 | export type HotKeyAction = {
2 | keyCombo: string[];
3 | action: (event: KeyboardEvent) => any;
4 | }
--------------------------------------------------------------------------------
/src/data/ImportFormatData.ts:
--------------------------------------------------------------------------------
1 | import {LabelType} from "./enums/LabelType";
2 | import {ILabelFormatData} from "../interfaces/ILabelFormatData";
3 | import {AnnotationFormatType} from "./enums/AnnotationFormatType";
4 |
5 | export type ImportFormatDataMap = Record
58 | {!!href &&
59 | 
65 | }
66 | {!href && }
72 |
73 | );
74 | });
--------------------------------------------------------------------------------
/src/views/Common/TextButton/TextButton.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .TextButton {
4 | display: block;
5 | cursor: pointer;
6 | user-select: none;
7 | line-height: 0;
8 | word-wrap: break-word;
9 | padding: 20px 30px;
10 | text-decoration: none;
11 | box-shadow: black 0 0 0 2px inset;
12 | color: black;
13 | margin: initial;
14 | border-radius: 2px;
15 | transition: 0.3s ease-in-out;
16 | background: transparent;
17 | font-weight: 700;
18 |
19 | > a {
20 | text-decoration: none;
21 | color: black;
22 | }
23 |
24 | &:hover {
25 | box-shadow: inherit;
26 | color: white;
27 | background-color: black;
28 |
29 | > a {
30 | text-decoration: none;
31 | color: white;
32 | }
33 | }
34 | }
--------------------------------------------------------------------------------
/src/views/Common/TextButton/TextButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import './TextButton.scss';
3 | import classNames from "classnames";
4 |
5 | interface IProps {
6 | key?:string;
7 | label:string;
8 | onClick?:() => any;
9 | style?:React.CSSProperties;
10 | isActive?:boolean;
11 | isDisabled?:boolean;
12 | externalClassName?:string;
13 | }
14 |
15 | export const TextButton = (props:IProps) => {
16 | const { key, label, onClick, style, isActive, isDisabled, externalClassName} = props;
17 |
18 | const getClassName = () => {
19 | return classNames(
20 | "TextButton",
21 | externalClassName,
22 | {
23 | "active": isActive,
24 | "disabled": isDisabled
25 | }
26 | );
27 | };
28 |
29 | const onClickHandler = (event: React.MouseEvent
41 | {label}
42 |
43 | )
44 | };
--------------------------------------------------------------------------------
/src/views/Common/TextInput/TextInput.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | $secondary-color: white;
4 | $main-color: transparent;
5 | $width: 320px;
6 |
7 | * {
8 | box-sizing: border-box;
9 | }
10 |
11 | .TextInput {
12 | height: $width/6;
13 | overflow: hidden;
14 | position: relative;
15 | }
16 |
17 | label {
18 | position: absolute;
19 | top: $width/15;
20 | color: white;
21 | font: 400 $width/15;
22 | cursor: text;
23 | transition: .25s ease;
24 | }
25 |
26 | input {
27 | display: block;
28 | width: 100%;
29 | padding-top: $width/15;
30 | border: none;
31 | border-radius: 0; // For iOS
32 | color: white;
33 | background: $main-color;
34 | font-size: $width/20;
35 | transition: .3s ease;
36 | &:valid {
37 | ~label {
38 | top: 0;
39 | font: 700 $width/25;
40 | color: white;
41 | }
42 | }
43 | &:focus {
44 | outline: none;
45 | ~label {
46 | top: 0;
47 | font: 700 $width/25;
48 | color: $secondaryColor; // fallback if new css variables are not supported by browser
49 | color: var(--leading-color);
50 | }
51 |
52 | ~ .Bar {
53 | height: 2px;
54 | }
55 | }
56 |
57 | // Stop Chrome's hideous pale yellow background on auto-fill
58 |
59 | &:-webkit-autofill {
60 | -webkit-box-shadow: 0 0 0px 1000px $main-color inset;
61 | -webkit-text-fill-color: white !important;
62 | }
63 | }
64 |
65 | .Bar {
66 | background: white;
67 | content: '';
68 | width: $width;
69 | height: 1px;
70 | transition: .3s ease;
71 | position: relative;
72 | }
73 |
74 | ::selection {
75 | background: rgba($secondaryColor, .3);
76 | background: rgba(var(--leading-color), .3);
77 | }
--------------------------------------------------------------------------------
/src/views/Common/TextInput/TextInput.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './TextInput.scss';
3 |
4 | interface IProps {
5 | key: string;
6 | label?: string;
7 | isPassword: boolean;
8 | onChange?: (event: React.ChangeEvent
38 |
48 | {!!label && }
54 |
58 |
59 | );
60 | };
61 |
62 | export default TextInput;
--------------------------------------------------------------------------------
/src/views/Common/UnderlineTextButton/UnderlineTextButton.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .UnderlineTextButton {
4 | position: relative;
5 | font-size: 14px;
6 | font-weight: 700;
7 | cursor: pointer;
8 | user-select: none;
9 | width: fit-content;
10 | line-height: 0;
11 | word-wrap: break-word;
12 | height: 3px; // <- adjust
13 | padding: 15px 0; // <- adjust
14 | margin: 0 10px;
15 | text-decoration: none;
16 | color: white;
17 |
18 | &:hover,
19 | &.active {
20 | color: $secondaryColor; // fallback if new css variables are not supported by browser
21 | color: var(--leading-color);
22 | }
23 |
24 | &.over::before {
25 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
26 | background-color: var(--leading-color);
27 | width: 100%;
28 | position: absolute;
29 | top: 0;
30 | height: 2px; // <- adjust
31 | left: 0;
32 | z-index: 100;
33 | display: block;
34 | }
35 |
36 | &.under::after {
37 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
38 | background-color: var(--leading-color);
39 | width: 100%;
40 | position: absolute;
41 | bottom: 0;
42 | height: 2px; // <- adjust
43 | left: 0;
44 | z-index: 100;
45 | display: block;
46 | }
47 |
48 | &.over:hover::before,
49 | &.over.active::before {
50 | content: '';
51 | }
52 |
53 | &.under:hover::after,
54 | &.under.active::after {
55 | content: '';
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/views/Common/UnderlineTextButton/UnderlineTextButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classNames from 'classnames'
3 | import './UnderlineTextButton.scss'
4 |
5 | interface IProps {
6 | under?: boolean
7 | over?: boolean
8 | active?: boolean
9 | key?: string
10 | label: string
11 | onClick?: () => any
12 | style?: React.CSSProperties
13 | }
14 |
15 | export const UnderlineTextButton = (props: IProps) => {
16 | const { under, over, active, key, label, onClick, style } = props;
17 |
18 | const getClassName = () => {
19 | return classNames('UnderlineTextButton', {
20 | under: under,
21 | over: over,
22 | active: active,
23 | })
24 | };
25 |
26 | return (
27 |
33 | {label}
34 |
35 | )
36 | };
37 |
--------------------------------------------------------------------------------
/src/views/EditorView/Editor/Editor.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .Editor {
4 | align-self: stretch;
5 | flex: 1;
6 | position: relative;
7 |
8 | .ViewPortContent {
9 | position: relative;
10 |
11 | .track-horizontal {
12 | cursor: none;
13 | }
14 |
15 | .track-vertical {
16 | cursor: none;
17 | }
18 |
19 | .ImageCanvas {
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | cursor: none;
24 |
25 | &:hover {
26 | cursor: none;
27 | }
28 | }
29 | }
30 |
31 | .MousePositionIndicator {
32 | position: absolute;
33 | color: white;
34 | font-size: 12px;
35 | background-color: $darkThemeThirdColor;
36 | opacity: 0.6;
37 | padding: 5px;
38 | user-select: none;
39 | pointer-events: none;
40 | z-index: 100;
41 | width: fit-content;
42 | }
43 |
44 | .Cursor {
45 | position: absolute;
46 | width: 6px;
47 | height: 6px;
48 | transition: width 0.05s ease-out, height 0.05s ease-out, background-color 0.05s ease-in;
49 | transform: translate(-50%, -50%);
50 | border-radius: 50%;
51 | pointer-events: none;
52 | border: 2px solid white;
53 | background-color: white;
54 | z-index: 100000;
55 |
56 | > img {
57 | position: absolute;
58 | max-width: 20px;
59 | max-height: 20px;
60 | filter: brightness(0) invert(1);
61 | bottom: calc(50% + 10px);
62 | left: calc(50% + 10px);
63 | display: none;
64 | user-select: none;
65 | }
66 |
67 | &.move, &.add, &.resize, &.close {
68 | width: 24px;
69 | height: 24px;
70 | background-color: transparent;
71 | }
72 |
73 | &.grabbing {
74 | width: 18px;
75 | height: 18px;
76 | background-color: rgba(255, 255, 255, 0.5);
77 | border: 2px solid transparent;
78 | }
79 |
80 | &.move, &.add, &.resize, &.close, &.cancel, &.grab, &.grabbing {
81 | > img {
82 | display: block;
83 | }
84 | }
85 | }
86 | }
--------------------------------------------------------------------------------
/src/views/EditorView/EditorBottomNavigationBar/EditorBottomNavigationBar.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .EditorBottomNavigationBar {
4 | align-self: stretch;
5 | height: $editorBottomNavigationBarHeight;
6 | border-top: solid 1px $darkThemeFirstColor;
7 | background-color: $darkThemeSecondColor;
8 | user-select: none;
9 |
10 | display: flex;
11 | flex-direction: row;
12 | flex-wrap: nowrap;
13 | justify-content: center;
14 | align-items: center;
15 | align-content: center;
16 |
17 | &.with-context {
18 | background-color: $darkThemeForthColor;
19 | }
20 |
21 | .ImageButton {
22 | transition: transform 0.3s;
23 |
24 | img {
25 | filter: brightness(0) invert(1);
26 | user-select: none;
27 | }
28 |
29 | &:hover {
30 | background-color: transparent;
31 | }
32 |
33 | &:not(.disabled):hover {
34 | filter: brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
35 | filter: brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
36 | &.right {
37 | transform: translate(2px);
38 | }
39 | &.left {
40 | transform: translate(-2px);
41 | }
42 | }
43 |
44 | &.disabled {
45 | img {
46 | filter: invert(1) opacity(25%);
47 | user-select: none;
48 | }
49 | }
50 | }
51 |
52 | .CurrentImageName {
53 | min-width: 200px;
54 | padding: 0 20px;
55 | color: white;
56 | font-size: 14px;
57 |
58 | display: flex;
59 | flex-direction: row;
60 | flex-wrap: nowrap;
61 | justify-content: center;
62 | align-items: center;
63 | align-content: center;
64 | }
65 |
66 | .CurrentImageCount {
67 | min-width: 80px;
68 | padding: 0 20px;
69 | color: white;
70 |
71 | display: flex;
72 | flex-direction: row;
73 | flex-wrap: nowrap;
74 | justify-content: center;
75 | align-items: center;
76 | align-content: center;
77 | }
78 | }
--------------------------------------------------------------------------------
/src/views/EditorView/EditorBottomNavigationBar/EditorBottomNavigationBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './EditorBottomNavigationBar.scss';
3 | import {ImageData} from "../../../store/labels/types";
4 | import {AppState} from "../../../store";
5 | import {connect} from "react-redux";
6 | import {ImageButton} from "../../Common/ImageButton/ImageButton";
7 | import {ISize} from "../../../interfaces/ISize";
8 | import {ContextType} from "../../../data/enums/ContextType";
9 | import classNames from "classnames";
10 | import {ImageActions} from "../../../logic/actions/ImageActions";
11 |
12 | interface IProps {
13 | size: ISize;
14 | imageData: ImageData;
15 | totalImageCount: number;
16 | activeImageIndex: number;
17 | activeContext: ContextType;
18 | }
19 |
20 | const EditorBottomNavigationBar: React.FC
38 | ImageActions.getPreviousImage()}
43 | isDisabled={activeImageIndex === 0}
44 | externalClassName={"left"}
45 | />
46 | {size.width > minWidth ?
47 | ImageActions.getNextImage()}
55 | isDisabled={activeImageIndex === totalImageCount - 1}
56 | externalClassName={"right"}
57 | />
58 |
59 | );
60 | };
61 |
62 | const mapDispatchToProps = {};
63 |
64 | const mapStateToProps = (state: AppState) => ({
65 | activeImageIndex: state.labels.activeImageIndex,
66 | activeContext: state.general.activeContext
67 | });
68 |
69 | export default connect(
70 | mapStateToProps,
71 | mapDispatchToProps
72 | )(EditorBottomNavigationBar);
73 |
--------------------------------------------------------------------------------
/src/views/EditorView/EditorContainer/EditorContainer.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .EditorContainer {
4 | align-self: stretch;
5 | flex: 0 0 calc(100% - #{$topNavigationBarHeight});
6 | height: calc(100% - #{$topNavigationBarHeight});
7 |
8 | display: flex;
9 | flex-direction: row;
10 | flex-wrap: nowrap;
11 | justify-content: flex-start;
12 | align-items: center;
13 | align-content: flex-start;
14 |
15 | .EditorWrapper {
16 | align-self: stretch;
17 | flex: 1;
18 | min-width: 0;
19 | display: flex;
20 | flex-direction: column;
21 | flex-wrap: nowrap;
22 | justify-content: center;
23 | align-items: center;
24 | align-content: center;
25 | }
26 | }
--------------------------------------------------------------------------------
/src/views/EditorView/EditorTopNavigationBar/EditorTopNavigationBar.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .EditorTopNavigationBar {
4 | align-self: stretch;
5 | height: $editorTopNavigationBarHeight;
6 | border-bottom: solid 1px $darkThemeFirstColor;
7 | background-color: $darkThemeSecondColor;
8 | user-select: none;
9 |
10 | display: flex;
11 | flex-direction: row;
12 | flex-wrap: nowrap;
13 | justify-content: flex-start;
14 | align-items: center;
15 | align-content: flex-start;
16 |
17 | padding: 0 5px;
18 |
19 | &.with-context {
20 | background-color: $darkThemeForthColor;
21 | }
22 |
23 | .ButtonWrapper {
24 | display: flex;
25 | flex-direction: row;
26 | flex-wrap: nowrap;
27 | justify-content: flex-start;
28 | align-items: center;
29 | align-content: flex-start;
30 |
31 | &:not(:last-child) {
32 | padding-right: 5px;
33 | margin-right: 5px;
34 | border-right: solid 1px $darkThemeFirstColor;
35 | }
36 | }
37 |
38 | .ImageButton {
39 | transition: transform 0.3s;
40 | margin: 0 2px;
41 |
42 | img {
43 | filter: brightness(0) invert(1);
44 | }
45 |
46 | &:hover {
47 | border-radius: 3px;
48 | background-color: rgba(0, 0, 0, 0.2);
49 | }
50 |
51 | &.active {
52 | border-radius: 3px;
53 | background-color: rgba(0, 0, 0, 0.4);
54 | }
55 | }
56 | }
--------------------------------------------------------------------------------
/src/views/EditorView/EditorView.scss:
--------------------------------------------------------------------------------
1 | @import '../../settings/_Settings';
2 |
3 | .EditorView {
4 | position: absolute;
5 | height: 100vh;
6 | width: 100vw;
7 | margin: 0;
8 | padding: 0;
9 |
10 | background-color: $darkThemeThirdColor;
11 |
12 | display: flex;
13 | flex-direction: column;
14 | flex-wrap: nowrap;
15 | justify-content: flex-start;
16 | align-items: center;
17 | align-content: flex-start;
18 |
19 | &.withPopup {
20 | filter: blur(2px) brightness(0.3);
21 | pointer-events: none;
22 | }
23 | }
--------------------------------------------------------------------------------
/src/views/EditorView/EditorView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './EditorView.scss';
3 | import EditorContainer from "./EditorContainer/EditorContainer";
4 | import {PopupWindowType} from "../../data/enums/PopupWindowType";
5 | import {AppState} from "../../store";
6 | import {connect} from "react-redux";
7 | import classNames from "classnames";
8 | import TopNavigationBar from "./TopNavigationBar/TopNavigationBar";
9 |
10 | interface IProps {
11 | activePopupType: PopupWindowType;
12 | }
13 |
14 | const EditorView: React.FC {imageData.fileData.name}
:
48 | {getImageCounter()}
49 | }
50 |
30 |
33 | );
34 | };
35 |
36 | const mapStateToProps = (state: AppState) => ({
37 | activePopupType: state.general.activePopupType
38 | });
39 |
40 | export default connect(
41 | mapStateToProps
42 | )(EditorView);
--------------------------------------------------------------------------------
/src/views/EditorView/FeatureInProgress/FeatureInProgress.scss:
--------------------------------------------------------------------------------
1 | .FeatureInProgress {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 | text-align: center;
9 | width: 150px;
10 | color: white;
11 | font-size: 16px;
12 | user-select: none;
13 |
14 | > img {
15 | filter: brightness(0) invert(1);
16 | max-width: 100px;
17 | max-height: 100px;
18 | user-select: none;
19 | margin: 20px;
20 | }
21 |
22 | > p {
23 | &.extraBold {
24 | font-size: 18px;
25 | font-weight: 600;
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/views/EditorView/FeatureInProgress/FeatureInProgress.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './FeatureInProgress.scss';
3 |
4 | export const FeatureInProgress: React.FC = () => {
5 | return(
6 |
9 | ![{"take_off"}]({"ico/take-off.png"})
14 |
16 | )
17 | };
--------------------------------------------------------------------------------
/src/views/EditorView/LabelControlPanel/LabelControlPanel.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .LabelControlPanel {
4 | position: absolute;
5 | cursor: pointer;
6 |
7 | display: flex;
8 | flex-direction: row;
9 | flex-wrap: nowrap;
10 | justify-content: center;
11 | align-items: center;
12 | align-content: center;
13 |
14 | .ImageButton {
15 | transition: transform 0.3s;
16 |
17 | img {
18 | filter: brightness(0) invert(1);
19 | user-select: none;
20 | }
21 |
22 | &:hover {
23 | background-color: transparent;
24 | }
25 |
26 | &:not(.disabled):hover {
27 | filter: brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
28 | filter: brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
29 |
30 | &.right {
31 | transform: translate(2px);
32 | }
33 |
34 | &.left {
35 | transform: translate(-2px);
36 | }
37 | }
38 |
39 | &.disabled {
40 | img {
41 | filter: invert(1) opacity(25%);
42 | user-select: none;
43 | }
44 | }
45 | }
46 |
47 | .SuggestedLabel {
48 | align-self: stretch;
49 |
50 | justify-content: center;
51 | align-items: center;
52 | align-content: center;
53 |
54 | padding: 0 10px 0 15px;
55 | color: white;
56 | }
57 |
58 | $randomNumber: random(5);
59 |
60 | &.is-active {
61 | background-color: $darkThemeSecondColor;
62 | border: solid 1px $primaryColor;
63 | animation: brColor 5s infinite linear;
64 | animation-delay: $randomNumber + s;
65 | transform: translate(-15px, -15px);
66 | border-radius: 3px;
67 | min-width: 30px;
68 | height: 30px;
69 | z-index: 1000;
70 | }
71 |
72 | &:not(.is-active) {
73 | background-color: $primaryColor;
74 | animation: bgColor 5s infinite linear;
75 | animation-delay: $randomNumber + s;
76 | transform: translate(-6px, -6px);
77 | border-radius: 6px;
78 | width: 12px;
79 | height: 12px;
80 | z-index: 1;
81 | }
82 | }
83 |
84 | @keyframes bgColor {
85 | 50% {
86 | background-color: $secondaryColor;
87 | }
88 | 100% {
89 | background-color: $primaryColor;
90 | }
91 | }
92 |
93 | @keyframes brColor {
94 | 50% {
95 | border-color: $secondaryColor;
96 | }
97 | 100% {
98 | border-color: $primaryColor;
99 | }
100 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/EmptyLabelList/EmptyLabelList.scss:
--------------------------------------------------------------------------------
1 | .EmptyLabelList {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 | text-align: center;
9 | width: 150px;
10 | color: white;
11 | font-size: 16px;
12 | user-select: none;
13 |
14 | > img {
15 | filter: brightness(0) invert(1);
16 | max-width: 80px;
17 | max-height: 80px;
18 | margin-bottom: 20px;
19 | user-select: none;
20 | }
21 |
22 | > p {
23 | &.extraBold {
24 | font-size: 16px;
25 | font-weight: 600;
26 | }
27 | }
28 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/EmptyLabelList/EmptyLabelList.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './EmptyLabelList.scss';
3 | import {AppState} from "../../../../store";
4 | import {connect} from "react-redux";
5 |
6 | interface IProps {
7 | firstLabelCreatedFlag: boolean;
8 | labelBefore: string;
9 | labelAfter: string;
10 | }
11 |
12 | const EmptyLabelList: React.FC
14 | new feature
coming soon...
![{"lets_start"}]({"ico/rocket.png"})
19 | {labelBefore}
20 | ; 21 | 22 | const after = <> 23 |![{"no_labels"}]({"ico/box-opened.png"})
28 | {labelAfter}
29 | ; 30 | 31 | return(
32 | {!firstLabelCreatedFlag ? before : after}
33 |
)
34 | };
35 |
36 | const mapDispatchToProps = {};
37 |
38 | const mapStateToProps = (state: AppState) => ({
39 | firstLabelCreatedFlag: state.labels.firstLabelCreatedFlag
40 | });
41 |
42 | export default connect(
43 | mapStateToProps,
44 | mapDispatchToProps
45 | )(EmptyLabelList);
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/ImagePreview/ImagePreview.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../settings/Settings';
2 |
3 | .ImagePreview {
4 | position: absolute;
5 | cursor: pointer;
6 |
7 | display: flex;
8 | flex-direction: row;
9 | flex-wrap: nowrap;
10 | justify-content: center;
11 | align-items: center;
12 | align-content: center;
13 |
14 | border-bottom: solid 1px $darkThemeFirstColor;
15 | &:nth-child(odd) {
16 | border-right: solid 1px $darkThemeFirstColor;
17 | }
18 |
19 | .Foreground {
20 | position: absolute;
21 | z-index: 100;
22 | transition: transform 0.3s;
23 |
24 | .Image {
25 | position: absolute;
26 | left: 0;
27 | top: 0;
28 | border: solid 1px $darkThemeSecondColor;
29 | user-select: none;
30 | }
31 |
32 | .CheckBox {
33 | position: absolute;
34 | z-index: 1000;
35 | max-width: 20px;
36 | max-height: 20px;
37 | bottom: -10px;
38 | left: -10px;
39 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
40 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
41 | }
42 | }
43 |
44 | .Background {
45 | position: absolute;
46 | z-index: 0;
47 | background-color: $darkThemeThirdColor;
48 | transition: background-color 0.3s ease-in-out, transform 0.3s;
49 | }
50 |
51 | &.selected {
52 | .Foreground {
53 | transform: translate(-2px, 2px);
54 | }
55 | .Background {
56 | transform: translate(2px, -2px);
57 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
58 | background-color: var(--leading-color);
59 | }
60 | }
61 |
62 | &:hover {
63 | .Foreground {
64 | transform: translate(-2px, 2px);
65 | }
66 | .Background {
67 | transform: translate(2px, -2px);
68 | }
69 | }
70 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/ImagesList/ImagesList.scss:
--------------------------------------------------------------------------------
1 | .ImagesList {
2 | align-self: stretch;
3 | flex: 1;
4 | overflow: hidden;
5 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/LabelsToolkit/LabelsToolkit.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../settings/Settings';
2 |
3 | .LabelsToolkit {
4 | align-self: stretch;
5 | flex: 1;
6 | overflow: hidden;
7 |
8 | display: flex;
9 | flex-direction: column;
10 | flex-wrap: nowrap;
11 | justify-content: flex-start;
12 | align-items: center;
13 | align-content: flex-start;
14 |
15 | .Header {
16 | position: relative;
17 | align-self: stretch;
18 | box-sizing: border-box;
19 | padding: 0 25px;
20 | color: white;
21 | font-size: 14px;
22 | user-select: none;
23 | cursor: pointer;
24 |
25 | display: flex;
26 | flex-direction: row;
27 | flex-wrap: nowrap;
28 | justify-content: space-between;
29 | align-items: center;
30 | align-content: space-between;
31 |
32 | .HeaderGroupWrapper {
33 | align-self: stretch;
34 |
35 | display: flex;
36 | flex-direction: row;
37 | flex-wrap: nowrap;
38 | justify-content: center;
39 | align-items: center;
40 | align-content: center;
41 | }
42 |
43 | .Marker {
44 | position: absolute;
45 | height: calc(100% - 4px);
46 | width: 5px;
47 | top: 2px;
48 | left: -5px;
49 | background-color: $darkThemeThirdColor;
50 | transition: background-color 0.3s ease-in-out, transform 0.3s;
51 | }
52 |
53 | .Ico {
54 | max-width: 20px;
55 | max-height: 20px;
56 | margin-right: 20px;
57 | filter: brightness(0) invert(1);
58 | }
59 |
60 | .Arrow {
61 | max-width: 12px;
62 | max-height: 12px;
63 | filter: brightness(0) invert(1);
64 | }
65 |
66 | &:hover {
67 | .Marker {
68 | transform: translate(5px);
69 | }
70 | }
71 |
72 | &.active {
73 | background-color: rgba(0, 0, 0, 0.1);
74 | .Marker {
75 | transform: translate(5px);
76 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
77 | background-color: var(--leading-color);
78 | }
79 |
80 | .Arrow {
81 | transform: rotate(180deg);
82 | }
83 | }
84 | }
85 |
86 | .Content {
87 | align-self: stretch;
88 | box-sizing: border-box;
89 | height: 0;
90 | transition: height 0.3s ease-in-out;
91 | overflow: hidden;
92 |
93 | display: flex;
94 | flex-direction: column;
95 | flex-wrap: nowrap;
96 | justify-content: center;
97 | align-items: center;
98 | align-content: center;
99 | }
100 | }
101 |
102 |
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/LineLabelsList/LineLabelsList.scss:
--------------------------------------------------------------------------------
1 | .LineLabelsList {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 |
9 | .LineLabelsListContent {
10 | display: flex;
11 | flex-direction: column;
12 | flex-wrap: nowrap;
13 | justify-content: flex-start;
14 | align-items: center;
15 | align-content: flex-start;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/PointLabelsList/PointLabelsList.scss:
--------------------------------------------------------------------------------
1 | .PointLabelsList {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 |
9 | .PointLabelsListContent {
10 | display: flex;
11 | flex-direction: column;
12 | flex-wrap: nowrap;
13 | justify-content: flex-start;
14 | align-items: center;
15 | align-content: flex-start;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/PolygonLabelsList/PolygonLabelsList.scss:
--------------------------------------------------------------------------------
1 | .PolygonLabelsList {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 |
9 | .PolygonLabelsListContent {
10 | display: flex;
11 | flex-direction: column;
12 | flex-wrap: nowrap;
13 | justify-content: flex-start;
14 | align-items: center;
15 | align-content: flex-start;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/RectLabelsList/RectLabelsList.scss:
--------------------------------------------------------------------------------
1 | .RectLabelsList {
2 | display: flex;
3 | flex-direction: column;
4 | flex-wrap: nowrap;
5 | justify-content: center;
6 | align-items: center;
7 | align-content: center;
8 |
9 | .RectLabelsListContent {
10 | display: flex;
11 | flex-direction: column;
12 | flex-wrap: nowrap;
13 | justify-content: flex-start;
14 | align-items: center;
15 | align-content: flex-start;
16 | }
17 | }
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/SideNavigationBar.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .SideNavigationBar {
4 | align-self: stretch;
5 | background-color: $darkThemeSecondColor;
6 |
7 | display: flex;
8 | flex-wrap: nowrap;
9 | justify-content: flex-start;
10 | align-items: center;
11 | align-content: flex-start;
12 |
13 | &.with-context {
14 | .NavigationBarContentWrapper {
15 | background-color: $darkThemeForthColor;
16 | }
17 | }
18 |
19 | .CompanionBar {
20 | align-self: stretch;
21 | min-width: $sideNavigationBarCompanionWidth;
22 | width: $sideNavigationBarCompanionWidth;
23 | display: flex;
24 | flex-direction: column;
25 | flex-wrap: nowrap;
26 | justify-content: flex-start;
27 | align-items: center;
28 | align-content: flex-start;
29 | }
30 |
31 | .NavigationBarContentWrapper {
32 | align-self: stretch;
33 | min-width: $sideNavigationBarContentWidth;
34 | width: $sideNavigationBarContentWidth;
35 | flex-direction: column;
36 | display: flex;
37 | flex-wrap: nowrap;
38 | justify-content: flex-end;
39 | align-items: center;
40 | align-content: flex-end;
41 | }
42 |
43 | &.left {
44 | flex-direction: row;
45 | border-right: solid 1px $darkThemeFirstColor;
46 |
47 | .CompanionBar {
48 | border-right: solid 1px $darkThemeFirstColor;
49 |
50 | .VerticalEditorButton {
51 | transform: rotate(-90deg) translateY(-2px);
52 | }
53 | }
54 | }
55 |
56 | &.right {
57 | flex-direction: row-reverse;
58 | border-left: solid 1px $darkThemeFirstColor;
59 |
60 | .CompanionBar {
61 | border-left: solid 1px $darkThemeFirstColor;
62 |
63 | .VerticalEditorButton {
64 | transform: rotate(-90deg) translateY(-1px);
65 | }
66 | }
67 | }
68 |
69 | &.closed {
70 | border: none;
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/SideNavigationBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import './SideNavigationBar.scss';
4 | import {Direction} from "../../../data/enums/Direction";
5 |
6 | interface IProps {
7 | direction: Direction
8 | isOpen: boolean;
9 | isWithContext?: boolean;
10 | renderCompanion?: () => any;
11 | renderContent?: () => any;
12 | }
13 |
14 | export const SideNavigationBar: React.FC
31 |
38 | );
39 | };
--------------------------------------------------------------------------------
/src/views/EditorView/SideNavigationBar/TagLabelsList/TagLabelsList.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../settings/Settings';
2 |
3 | .TagLabelsList {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 |
11 | .EmptyLabelList {
12 | display: flex;
13 | flex-direction: column;
14 | flex-wrap: nowrap;
15 | justify-content: center;
16 | align-items: center;
17 | align-content: center;
18 | text-align: center;
19 | width: 150px;
20 | color: white;
21 | font-size: 16px;
22 | user-select: none;
23 |
24 | > img {
25 | filter: brightness(0) invert(1);
26 | max-width: 80px;
27 | max-height: 80px;
28 | margin-bottom: 20px;
29 | user-select: none;
30 | }
31 |
32 | > p {
33 | &.extraBold {
34 | font-size: 16px;
35 | font-weight: 600;
36 | }
37 | }
38 | }
39 |
40 | .TagLabelsListContent {
41 | display: flex;
42 | flex-direction: row;
43 | flex-wrap: wrap;
44 | justify-content: flex-start;
45 | align-items: center;
46 | align-content: flex-start;
47 | flex: 1 1 auto;
48 | }
49 |
50 | .TagItem {
51 | margin-right: 10px;
52 | margin-bottom: 10px;
53 | padding: 5px 20px;
54 | border-radius: 3px;
55 | background-color: rgba(0, 0, 0, 0.2);
56 | font-size: 14px;
57 | font-weight: 700;
58 | cursor: pointer;
59 | user-select: none;
60 | text-decoration: none;
61 | color: white;
62 |
63 | &:hover {
64 | background-color: rgba(0, 0, 0, 0.4);
65 | }
66 |
67 | &.active {
68 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
69 | background-color: var(--leading-color);
70 | }
71 | }
72 |
73 | .ImageButton {
74 | margin: 0 0 10px 0;
75 | border-radius: 3px;
76 | background-color: rgba(0, 0, 0, 0.2);
77 |
78 | img {
79 | filter: brightness(0) invert(1);
80 | user-select: none;
81 | width: 16px;
82 | height: 16px;
83 | }
84 |
85 | &:hover {
86 | background-color: rgba(0, 0, 0, 0.4);
87 | }
88 | }
89 | }
--------------------------------------------------------------------------------
/src/views/EditorView/StateBar/StateBar.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .StateBar {
4 | align-self: stretch;
5 | height: $stateBarHeight;
6 | background-color: $darkThemeFirstColor;
7 |
8 | display: flex;
9 | flex-direction: row;
10 | flex-wrap: nowrap;
11 | justify-content: flex-start;
12 | align-items: center;
13 | align-content: flex-start;
14 |
15 | .done {
16 | align-self: stretch;
17 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
18 | background-color: var(--leading-color);
19 | transition: width 0.4s ease-out;
20 | }
21 | }
--------------------------------------------------------------------------------
/src/views/EditorView/StateBar/StateBar.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './StateBar.scss';
3 | import {ImageData} from "../../../store/labels/types";
4 | import {AppState} from "../../../store";
5 | import {connect} from "react-redux";
6 | import {LabelType} from "../../../data/enums/LabelType";
7 |
8 | interface IProps {
9 | imagesData: ImageData[];
10 | activeLabelType: LabelType;
11 | }
12 |
13 | const StateBar: React.FC
32 | {renderCompanion && renderCompanion()}
33 |
34 | {isOpen &&
35 | {renderContent && renderContent()}
36 |
}
37 |
54 |
58 |
59 | );
60 | };
61 |
62 | const mapDispatchToProps = {};
63 |
64 | const mapStateToProps = (state: AppState) => ({
65 | imagesData: state.labels.imagesData,
66 | activeLabelType: state.labels.activeLabelType
67 | });
68 |
69 | export default connect(
70 | mapStateToProps,
71 | mapDispatchToProps
72 | )(StateBar);
--------------------------------------------------------------------------------
/src/views/EditorView/TopNavigationBar/DropDownMenu/DropDownMenu.scss:
--------------------------------------------------------------------------------
1 | @import '../../../../settings/Settings';
2 |
3 | .DropDownMenuWrapper {
4 | align-self: stretch;
5 | display: flex;
6 | flex-wrap: nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 |
11 | .DropDownMenuContent {
12 | z-index: 10000;
13 | position: absolute;
14 | background-color: $darkThemeSecondColor;
15 | width: 250px;
16 | border-bottom-left-radius: 3px;
17 | border-bottom-right-radius: 3px;
18 | border-bottom: solid 1px $darkThemeFirstColor;
19 | border-left: solid 1px $darkThemeFirstColor;
20 | border-right: solid 1px $darkThemeFirstColor;
21 | box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
22 |
23 | display: flex;
24 | flex-direction: column;
25 | flex-wrap: nowrap;
26 | justify-content: flex-start;
27 | align-items: flex-start;
28 | align-content: flex-start;
29 |
30 | .DropDownMenuContentOption {
31 | display: flex;
32 | flex-direction: row;
33 | flex-wrap: nowrap;
34 | justify-content: flex-start;
35 | align-items: center;
36 | align-content: center;
37 | cursor: pointer;
38 | align-self: stretch;
39 | height: 40px;
40 |
41 | .Marker {
42 | height: 36px;
43 | width: 5px;
44 | background-color: transparent;
45 | transition: background-color 0.3s ease-in-out, transform 0.3s;
46 | }
47 |
48 | img {
49 | max-width: 18px;
50 | max-height: 18px;
51 | margin: 0 20px;
52 | filter: brightness(0) invert(1);
53 | }
54 |
55 | &:hover {
56 | background-color: rgba(0, 0, 0, 0.1);
57 |
58 | .Marker {
59 | background-color: $darkThemeThirdColor;
60 | }
61 |
62 | &.active {
63 | .Marker {
64 | background-color: $secondaryColor;
65 | }
66 | }
67 | }
68 | }
69 | }
70 |
71 | .DropDownMenuTab {
72 | display: flex;
73 | flex-wrap: nowrap;
74 | justify-content: center;
75 | align-items: center;
76 | align-content: center;
77 | padding: 0 10px;
78 | border-radius: 3px;
79 | align-self: stretch;
80 | cursor: pointer;
81 | font-weight: 700;
82 | transition: 0.3s ease-in-out;
83 |
84 | &:not(:last-child) {
85 | margin-right: 4px;
86 | }
87 |
88 | img {
89 | width: 15px;
90 | height: 15px;
91 | margin-right: 10px;
92 | user-select: none;
93 | filter: brightness(0) invert(1);
94 | }
95 |
96 | &:hover {
97 | border-radius: 3px;
98 | background-color: rgba(0, 0, 0, 0.5);
99 | }
100 |
101 | &.active {
102 | border-radius: 3px;
103 | background-color: rgba(0, 0, 0, 1.0);
104 | }
105 | }
106 | }
--------------------------------------------------------------------------------
/src/views/EditorView/VerticalEditorButton/VerticalEditorButton.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .VerticalEditorButton {
4 | height: $sideNavigationBarCompanionWidth;
5 | width: 80px;
6 | background-color: transparent;
7 | transition: 0.3s ease-in-out;
8 | transform: rotate(-90deg);
9 | transform-origin: 55px 25px;
10 | margin-bottom: 60px;
11 | user-select: none;
12 | cursor: pointer;
13 |
14 | display: flex;
15 | flex-direction: row;
16 | flex-wrap: nowrap;
17 | justify-content: center;
18 | align-items: center;
19 | align-content: center;
20 |
21 | color: white;
22 | font-size: 13px;
23 |
24 | img {
25 | width: 15px;
26 | height: 15px;
27 | filter: brightness(0) invert(1);
28 | margin-right: 5px;
29 | user-select: none;
30 | }
31 |
32 | &:hover {
33 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
34 | background-color: var(--leading-color);
35 | }
36 |
37 | &.active {
38 | background-color: $secondaryColor; // fallback if new css variables are not supported by browser
39 | background-color: var(--leading-color);
40 | }
41 | }
--------------------------------------------------------------------------------
/src/views/EditorView/VerticalEditorButton/VerticalEditorButton.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 | import classNames from "classnames";
3 | import './VerticalEditorButton.scss';
4 |
5 | interface IProps {
6 | key?:string;
7 | label:string;
8 | onClick?:() => any;
9 | style?:React.CSSProperties;
10 | isActive?:boolean;
11 | isDisabled?:boolean;
12 | image?:string,
13 | imageAlt?:string,
14 | }
15 |
16 | export const VerticalEditorButton = (props:IProps) => {
17 |
18 | const { key, label, onClick, style, isActive, isDisabled, image, imageAlt} = props;
19 |
20 | const getClassName = () => {
21 | return classNames(
22 | "VerticalEditorButton",
23 | {
24 | "active": isActive,
25 | "disabled": isDisabled
26 | }
27 | );
28 | };
29 |
30 | return(
31 |
37 | {image && }
42 | {label}
43 |
44 | )
45 | };
--------------------------------------------------------------------------------
/src/views/MainView/ImagesDropZone/ImagesDropZone.scss:
--------------------------------------------------------------------------------
1 | .ImagesDropZone {
2 | opacity: 0;
3 | display: flex;
4 | flex-direction: column;
5 | flex-wrap: nowrap;
6 | justify-content: center;
7 | align-items: center;
8 |
9 | .DropZone {
10 | user-select: none;
11 | width: 400px;
12 | height: 250px;
13 | box-shadow: black 0 0 0 2px inset;
14 | border-radius: 4px;
15 | margin-bottom: 6px;
16 |
17 | display: flex;
18 | flex-direction: column;
19 | justify-items: center;
20 | justify-content: center;
21 | align-items: center;
22 | cursor: pointer;
23 | outline: none;
24 |
25 | > img {
26 | max-width: 60px;
27 | max-height: 60px;
28 | margin-bottom: 10px;
29 | user-select: none;
30 | }
31 |
32 | > input {
33 | outline: none;
34 | }
35 |
36 | > p {
37 | margin-top: 2px;
38 | margin-bottom: 0;
39 |
40 | &.extraBold {
41 | font-size: 18px;
42 | font-weight: 600;
43 | }
44 | }
45 | }
46 |
47 | .DropZoneButtons {
48 | align-self: stretch;
49 | display: flex;
50 | flex-direction: row;
51 | flex-wrap: nowrap;
52 | justify-content: space-between;
53 | align-items: center;
54 |
55 | .TextButton {
56 | width: calc(50% - 3px);
57 | display: flex;
58 | flex-direction: row;
59 | flex-wrap: nowrap;
60 | justify-content: center;
61 | align-items: center;
62 |
63 | &.disabled {
64 | box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 2px inset;
65 | color: rgba(0, 0, 0, 0.2);
66 | cursor: default;
67 |
68 | &:hover {
69 | box-shadow: rgba(0, 0, 0, 0.2) 0 0 0 2px inset;
70 | color: rgba(0, 0, 0, 0.2);
71 | background-color: transparent;
72 | }
73 | }
74 | }
75 | }
76 | }
--------------------------------------------------------------------------------
/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .ExitProjectPopupContent {
4 | align-self: stretch;
5 | flex: 1;
6 | display: flex;
7 | flex-direction: column;
8 | flex-wrap: nowrap;
9 | justify-content: flex-start;
10 | align-items: center;
11 | align-content: flex-start;
12 | padding-top: 30px;
13 |
14 | .Message {
15 | align-self: stretch;
16 | color: white;
17 | font-size: 15px;
18 | padding: 0 40px 30px 40px;
19 | }
20 | }
--------------------------------------------------------------------------------
/src/views/PopupView/ExitProjectPopup/ExitProjectPopup.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import './ExitProjectPopup.scss'
3 | import {GenericYesNoPopup} from "../GenericYesNoPopup/GenericYesNoPopup";
4 | import {
5 | updateActiveImageIndex,
6 | updateActiveLabelNameId,
7 | updateFirstLabelCreatedFlag,
8 | updateImageData,
9 | updateLabelNames
10 | } from "../../../store/labels/actionCreators";
11 | import {AppState} from "../../../store";
12 | import {connect} from "react-redux";
13 | import {ImageData, LabelName} from "../../../store/labels/types";
14 | import {PopupActions} from "../../../logic/actions/PopupActions";
15 | import {ProjectData} from "../../../store/general/types";
16 | import {updateProjectData} from "../../../store/general/actionCreators";
17 |
18 | interface IProps {
19 | updateActiveImageIndex: (activeImageIndex: number) => any;
20 | updateActiveLabelNameId: (activeLabelId: string) => any;
21 | updateLabelNames: (labelNames: LabelName[]) => any;
22 | updateImageData: (imageData: ImageData[]) => any;
23 | updateFirstLabelCreatedFlag: (firstLabelCreatedFlag: boolean) => any;
24 | updateProjectData: (projectData: ProjectData) => any;
25 | }
26 |
27 | const ExitProjectPopup: React.FC
40 |
44 | )
45 | };
46 |
47 | const onAccept = () => {
48 | updateActiveLabelNameId(null);
49 | updateLabelNames([]);
50 | updateProjectData({type: null, name: "my-project-name"});
51 | updateActiveImageIndex(null);
52 | updateImageData([]);
53 | updateFirstLabelCreatedFlag(false);
54 | PopupActions.close();
55 | };
56 |
57 | const onReject = () => {
58 | PopupActions.close();
59 | };
60 |
61 | return(
62 |
41 | Are you sure you want to leave the editor? You will permanently lose all your progress.
42 |
43 |
44 |
65 | )
66 | };
--------------------------------------------------------------------------------
/src/views/PopupView/ImportLabelPopup/ImportLabelPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .GenericLabelTypePopupContent {
4 |
5 | .RightContainer {
6 | display: flex;
7 | flex-direction: column;
8 | flex-wrap: nowrap;
9 | justify-content: flex-start;
10 | align-items: center;
11 | align-content: flex-start;
12 |
13 | .FeatureInProgress {
14 | flex: 1;
15 | }
16 |
17 | .DropZone {
18 | user-select: none;
19 | align-self: stretch;
20 | border-radius: 4px;
21 | flex: 1;
22 | color: white;
23 |
24 | display: flex;
25 | flex-direction: column;
26 | justify-items: center;
27 | justify-content: center;
28 | align-items: center;
29 | cursor: pointer;
30 | outline: none;
31 |
32 | &:hover {
33 | background-color: rgba(0, 0, 0, 0.03);
34 | }
35 |
36 | > img {
37 | max-width: 60px;
38 | max-height: 60px;
39 | margin-bottom: 30px;
40 | filter: brightness(0) invert(1);
41 | user-select: none;
42 | }
43 |
44 | > input {
45 | outline: none;
46 | }
47 |
48 | > p {
49 | margin-top: 2px;
50 | margin-bottom: 0;
51 |
52 | &.extraBold {
53 | font-size: 18px;
54 | font-weight: 600;
55 | }
56 | }
57 | }
58 | }
59 | }
--------------------------------------------------------------------------------
/src/views/PopupView/LoadLabelNamesPopup/LoadLabelNamesPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .LoadLabelsPopupContent {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 | padding-top: 30px;
11 | flex: 1;
12 | min-height: 450px;
13 |
14 | .Message {
15 | align-self: stretch;
16 | color: white;
17 | font-size: 15px;
18 | padding: 0 40px 30px 40px;
19 | border-bottom: solid 1px $darkThemeFirstColor;
20 | }
21 |
22 | .DropZone {
23 | user-select: none;
24 | align-self: stretch;
25 | border-radius: 4px;
26 | flex: 1;
27 | color: white;
28 |
29 | display: flex;
30 | flex-direction: column;
31 | justify-items: center;
32 | justify-content: center;
33 | align-items: center;
34 | cursor: pointer;
35 | outline: none;
36 |
37 | &:hover {
38 | background-color: rgba(0, 0, 0, 0.03);
39 | }
40 |
41 | > img {
42 | max-width: 60px;
43 | max-height: 60px;
44 | margin-bottom: 30px;
45 | filter: brightness(0) invert(1);
46 | user-select: none;
47 | }
48 |
49 | > input {
50 | outline: none;
51 | }
52 |
53 | > p {
54 | margin-top: 2px;
55 | margin-bottom: 0;
56 |
57 | &.extraBold {
58 | font-size: 18px;
59 | font-weight: 600;
60 | }
61 | }
62 | }
63 | }
--------------------------------------------------------------------------------
/src/views/PopupView/LoadModelPopup/LoadModelPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .LoadModelPopupContent {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 | padding-top: 30px;
11 | flex: 1;
12 |
13 | .Message {
14 | align-self: stretch;
15 | color: white;
16 | font-size: 15px;
17 | padding: 0 40px 30px 40px;
18 | }
19 |
20 | .Companion {
21 | align-self: stretch;
22 | padding-bottom: 30px;
23 | display: flex;
24 | flex-direction: column;
25 | flex-wrap: nowrap;
26 | justify-content: center;
27 | align-items: center;
28 | align-content: center;
29 | height: 150px;
30 |
31 | .Options {
32 | align-self: stretch;
33 | flex: 1;
34 | padding: 0 40px;
35 |
36 | .OptionsItem {
37 | display: flex;
38 | flex-direction: row;
39 | flex-wrap: nowrap;
40 | justify-content: flex-start;
41 | align-items: center;
42 | align-content: flex-start;
43 | color: white;
44 |
45 | cursor: pointer;
46 | user-select: none;
47 | font-size: 15px;
48 | padding: 5px 0;
49 |
50 | > img {
51 | max-width: 20px;
52 | max-height: 20px;
53 | margin-right: 10px;
54 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
55 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
56 | user-select: none;
57 | }
58 | }
59 | }
60 | }
61 | }
--------------------------------------------------------------------------------
/src/views/PopupView/LoadMoreImagesPopup/LoadMoreImagesPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .LoadMoreImagesPopupContent {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: nowrap;
7 | justify-content: center;
8 | align-items: center;
9 | align-content: center;
10 | flex: 1;
11 | min-height: 300px;
12 | align-self: stretch;
13 |
14 | .DropZone {
15 | user-select: none;
16 | align-self: stretch;
17 | border-radius: 4px;
18 | flex: 1;
19 | color: white;
20 |
21 | display: flex;
22 | flex-direction: column;
23 | justify-items: center;
24 | justify-content: center;
25 | align-items: center;
26 | cursor: pointer;
27 | outline: none;
28 |
29 | &:hover {
30 | background-color: rgba(0, 0, 0, 0.03);
31 | }
32 |
33 | > img {
34 | max-width: 60px;
35 | max-height: 60px;
36 | margin-bottom: 30px;
37 | filter: brightness(0) invert(1);
38 | user-select: none;
39 | }
40 |
41 | > input {
42 | outline: none;
43 | }
44 |
45 | > p {
46 | margin-top: 2px;
47 | margin-bottom: 0;
48 |
49 | &.extraBold {
50 | font-size: 18px;
51 | font-weight: 600;
52 | }
53 | }
54 | }
55 | }
--------------------------------------------------------------------------------
/src/views/PopupView/PopupView.scss:
--------------------------------------------------------------------------------
1 | @import '../../settings/_Settings';
2 |
3 | .PopupView {
4 | position: absolute;
5 | height: 100vh;
6 | width: 100vw;
7 | margin: 0;
8 | padding: 0;
9 | z-index: 1000;
10 |
11 | display: flex;
12 | flex-direction: column;
13 | flex-wrap: nowrap;
14 | justify-content: center;
15 | align-items: center;
16 | align-content: center;
17 | }
--------------------------------------------------------------------------------
/src/views/PopupView/PopupView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './PopupView.scss';
3 | import { PopupWindowType } from "../../data/enums/PopupWindowType";
4 | import { AppState } from "../../store";
5 | import { connect } from "react-redux";
6 | import LoadLabelsPopup from "./LoadLabelNamesPopup/LoadLabelNamesPopup";
7 | import InsertLabelNamesPopup from "./InsertLabelNamesPopup/InsertLabelNamesPopup";
8 | import ExitProjectPopup from "./ExitProjectPopup/ExitProjectPopup";
9 | import LoadMoreImagesPopup from "./LoadMoreImagesPopup/LoadMoreImagesPopup";
10 | import { LoadModelPopup } from "./LoadModelPopup/LoadModelPopup";
11 | import SuggestLabelNamesPopup from "./SuggestLabelNamesPopup/SuggestLabelNamesPopup";
12 | import { CSSHelper } from "../../logic/helpers/CSSHelper";
13 | import { ClipLoader } from "react-spinners";
14 | import ImportLabelPopup from "./ImportLabelPopup/ImportLabelPopup";
15 | import ExportLabelPopup from "./ExportLabelsPopup/ExportLabelPopup";
16 |
17 | interface IProps {
18 | activePopupType: PopupWindowType;
19 | }
20 |
21 | const PopupView: React.FC
45 | {title}
46 |
47 |
48 | {renderContent()}
49 |
50 |
51 | {!skipAcceptButton &&
64 |
60 | {selectPopup()}
61 |
62 | );
63 | };
64 |
65 | const mapStateToProps = (state: AppState) => ({
66 | activePopupType: state.general.activePopupType
67 | });
68 |
69 | export default connect(
70 | mapStateToProps
71 | )(PopupView);
--------------------------------------------------------------------------------
/src/views/PopupView/SuggestLabelNamesPopup/SuggestLabelNamesPopup.scss:
--------------------------------------------------------------------------------
1 | @import '../../../settings/Settings';
2 |
3 | .SuggestLabelNamesPopupContent {
4 | display: flex;
5 | flex-direction: column;
6 | flex-wrap: nowrap;
7 | justify-content: flex-start;
8 | align-items: center;
9 | align-content: flex-start;
10 | padding-top: 30px;
11 | flex: 1;
12 | min-height: 350px;
13 |
14 | .Message {
15 | align-self: stretch;
16 | color: white;
17 | font-size: 15px;
18 | padding: 0 40px 0 40px;
19 | }
20 |
21 | .OptionsItem {
22 | display: flex;
23 | flex-direction: row;
24 | flex-wrap: nowrap;
25 | justify-content: flex-start;
26 | align-items: center;
27 | align-content: flex-start;
28 | color: white;
29 |
30 | cursor: pointer;
31 | user-select: none;
32 | font-size: 15px;
33 | padding: 5px 0;
34 |
35 | > img {
36 | max-width: 20px;
37 | max-height: 20px;
38 | margin-right: 10px;
39 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(172deg) saturate(2000%); // fallback if new css variables are not supported by browser
40 | filter: invert(1) brightness(35%) sepia(100%) hue-rotate(var(--hue-value)) saturate(2000%);
41 | user-select: none;
42 | }
43 | }
44 |
45 | .AllToggle {
46 | align-self: stretch;
47 | color: white;
48 | font-size: 15px;
49 | padding: 10px 40px 20px 40px;
50 | border-bottom: solid 1px $darkThemeFirstColor;
51 | }
52 |
53 | .LabelNamesContainer {
54 | align-self: stretch;
55 | flex: 1;
56 |
57 | display: flex;
58 | flex-direction: column;
59 | flex-wrap: nowrap;
60 | justify-content: flex-start;
61 | align-items: center;
62 | align-content: flex-start;
63 |
64 | color: white;
65 |
66 | .LabelNamesContent {
67 | margin-left: 40px;
68 | margin-right: 10px;
69 | margin-top: 20px;
70 |
71 | display: flex;
72 | flex-direction: column;
73 | flex-wrap: nowrap;
74 | justify-content: flex-start;
75 | align-items: flex-start;
76 | align-content: flex-start;
77 | }
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/src/views/SizeItUpView/SizeItUpView.scss:
--------------------------------------------------------------------------------
1 | @import '../../settings/_Settings';
2 |
3 | .SizeItUpView {
4 | position: absolute;
5 | height: 100vh;
6 | width: 100vw;
7 | margin: 0;
8 | padding: 0;
9 |
10 | background-color: $darkThemeSecondColor;
11 |
12 | display: flex;
13 | flex-direction: column;
14 | flex-wrap: nowrap;
15 | justify-content: center;
16 | align-items: center;
17 | align-content: center;
18 |
19 | text-align: center;
20 | color: white;
21 | font-size: 18px;
22 | user-select: none;
23 |
24 | > img {
25 | filter: brightness(0) invert(1);
26 | max-width: 100px;
27 | max-height: 100px;
28 | user-select: none;
29 | margin: 25px;
30 | }
31 |
32 | > p {
33 | &.extraBold {
34 | font-size: 18px;
35 | font-weight: 600;
36 | }
37 | }
38 | }
--------------------------------------------------------------------------------
/src/views/SizeItUpView/SizeItUpView.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './SizeItUpView.scss';
3 | import {Settings} from "../../settings/Settings";
4 |
5 | export const SizeItUpView: React.FC = () => {
6 | return(
7 | ![{"small_window"}]({"ico/small_window.png"})
13 |
)
15 | };
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "downlevelIteration": true,
5 | "lib": [
6 | "dom",
7 | "dom.iterable",
8 | "esnext"
9 | ],
10 | "allowJs": true,
11 | "skipLibCheck": true,
12 | "esModuleInterop": true,
13 | "allowSyntheticDefaultImports": true,
14 | "strict": true,
15 | "forceConsistentCasingInFileNames": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "preserve",
22 | "strictNullChecks": false,
23 | "noImplicitReturns": true,
24 | "noImplicitThis": true,
25 | "suppressImplicitAnyIndexErrors": true,
26 | "noImplicitAny": false,
27 | "strictPropertyInitialization": false
28 | },
29 | "include": [
30 | "src"
31 | ]
32 | }
33 |
--------------------------------------------------------------------------------
Ops... This window is to tight for me!
8 |
13 | Please... make it at least {Settings.EDITOR_MIN_WIDTH} x {Settings.EDITOR_MIN_HEIGHT} px.
14 |