diff --git a/src/views/EditorView/Editor/Editor.tsx b/src/views/EditorView/Editor/Editor.tsx index 671c1771b..522292547 100644 --- a/src/views/EditorView/Editor/Editor.tsx +++ b/src/views/EditorView/Editor/Editor.tsx @@ -1,33 +1,34 @@ import React from 'react'; import './Editor.scss'; -import {ISize} from '../../../interfaces/ISize'; -import {ImageData, LabelPoint, LabelRect} from '../../../store/labels/types'; -import {FileUtil} from '../../../utils/FileUtil'; -import {AppState} from '../../../store'; -import {connect} from 'react-redux'; -import {updateImageDataById} from '../../../store/labels/actionCreators'; -import {ImageRepository} from '../../../logic/imageRepository/ImageRepository'; -import {LabelType} from '../../../data/enums/LabelType'; -import {PopupWindowType} from '../../../data/enums/PopupWindowType'; -import {CanvasUtil} from '../../../utils/CanvasUtil'; -import {CustomCursorStyle} from '../../../data/enums/CustomCursorStyle'; -import {ImageLoadManager} from '../../../logic/imageRepository/ImageLoadManager'; -import {EventType} from '../../../data/enums/EventType'; -import {EditorData} from '../../../data/EditorData'; -import {EditorModel} from '../../../staticModels/EditorModel'; -import {EditorActions} from '../../../logic/actions/EditorActions'; -import {EditorUtil} from '../../../utils/EditorUtil'; -import {ContextManager} from '../../../logic/context/ContextManager'; -import {ContextType} from '../../../data/enums/ContextType'; +import { ISize } from '../../../interfaces/ISize'; +import { ImageData, LabelPoint, LabelRect } from '../../../store/labels/types'; +import { FileUtil } from '../../../utils/FileUtil'; +import { AppState } from '../../../store'; +import { connect } from 'react-redux'; +import { updateImageDataById } from '../../../store/labels/actionCreators'; +import { ImageRepository } from '../../../logic/imageRepository/ImageRepository'; +import { LabelType } from '../../../data/enums/LabelType'; +import { PopupWindowType } from '../../../data/enums/PopupWindowType'; +import { CanvasUtil } from '../../../utils/CanvasUtil'; +import { CustomCursorStyle } from '../../../data/enums/CustomCursorStyle'; +import { ImageLoadManager } from '../../../logic/imageRepository/ImageLoadManager'; +import { EventType } from '../../../data/enums/EventType'; +import { EditorData } from '../../../data/EditorData'; +import { EditorModel } from '../../../staticModels/EditorModel'; +import { EditorActions } from '../../../logic/actions/EditorActions'; +import { EditorUtil } from '../../../utils/EditorUtil'; +import { ContextManager } from '../../../logic/context/ContextManager'; +import { ContextType } from '../../../data/enums/ContextType'; import Scrollbars from 'react-custom-scrollbars-2'; -import {ViewPortActions} from '../../../logic/actions/ViewPortActions'; -import {PlatformModel} from '../../../staticModels/PlatformModel'; +import { ViewPortActions } from '../../../logic/actions/ViewPortActions'; +import { PlatformModel } from '../../../staticModels/PlatformModel'; 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 {AIActions} from '../../../logic/actions/AIActions'; +import { IPoint } from '../../../interfaces/IPoint'; +import { RenderEngineUtil } from '../../../utils/RenderEngineUtil'; +import { LabelStatus } from '../../../data/enums/LabelStatus'; +import { isEqual } from 'lodash'; +import { AIActions } from '../../../logic/actions/AIActions'; +import { ImageActions } from '../../../logic/actions/ImageActions'; // YENİ EKLENDİ interface IProps { size: ISize; @@ -64,7 +65,7 @@ class Editor extends React.Component { public componentDidMount(): void { this.mountEventListeners(); - const {imageData, activeLabelType} = this.props; + const { imageData, activeLabelType } = this.props; ContextManager.switchCtx(ContextType.EDITOR); EditorActions.mountRenderEnginesAndHelpers(activeLabelType); @@ -77,7 +78,7 @@ class Editor extends React.Component { } public componentDidUpdate(prevProps: Readonly, prevState: Readonly<{}>, snapshot?: any): void { - const {imageData, activeLabelType} = this.props; + const { imageData, activeLabelType } = this.props; prevProps.imageData.id !== imageData.id && ImageLoadManager.addAndRun(this.loadImage(imageData)); @@ -98,6 +99,7 @@ class Editor extends React.Component { window.addEventListener(EventType.MOUSE_UP, this.update); EditorModel.canvas.addEventListener(EventType.MOUSE_DOWN, this.update); EditorModel.canvas.addEventListener(EventType.MOUSE_WHEEL, this.handleZoom); + window.addEventListener('keydown', this.handleKeyDown); // YENİ EKLENDİ } private unmountEventListeners() { @@ -105,6 +107,7 @@ class Editor extends React.Component { window.removeEventListener(EventType.MOUSE_UP, this.update); EditorModel.canvas.removeEventListener(EventType.MOUSE_DOWN, this.update); EditorModel.canvas.removeEventListener(EventType.MOUSE_WHEEL, this.handleZoom); + window.removeEventListener('keydown', this.handleKeyDown); // YENİ EKLENDİ } // ================================================================================================================= @@ -122,7 +125,7 @@ class Editor extends React.Component { EditorActions.setLoadingStatus(true); const saveLoadedImagePartial = (image: HTMLImageElement) => this.saveLoadedImage(image, imageData); FileUtil.loadImage(imageData.fileData) - .then((image:HTMLImageElement) => saveLoadedImagePartial(image)) + .then((image: HTMLImageElement) => saveLoadedImagePartial(image)) .catch((error) => this.handleLoadImageError()) } } @@ -138,11 +141,24 @@ class Editor extends React.Component { this.updateModelAndRender() }; - private handleLoadImageError = () => {}; + private handleLoadImageError = () => { }; - // ================================================================================================================= - // HELPER METHODS - // ================================================================================================================= + private handleKeyDown = (event: KeyboardEvent) => { + if (this.props.activePopupType) { + return; + } + + switch (event.key) { + case "ArrowLeft": + ImageActions.getPreviousImage(); + break; + case "ArrowRight": + ImageActions.getNextImage(); + break; + default: + break; + } + }; private updateModelAndRender = () => { ViewPortActions.updateViewPortSize(); @@ -185,7 +201,7 @@ class Editor extends React.Component { return this.props.imageData.labelRects .filter((labelRect: LabelRect) => labelRect.isCreatedByAI && labelRect.status !== LabelStatus.ACCEPTED) .map((labelRect: LabelRect) => { - const positionOnImage: IPoint = {x: labelRect.rect.x, y: labelRect.rect.y}; + const positionOnImage: IPoint = { x: labelRect.rect.x, y: labelRect.rect.y }; const positionOnViewPort: IPoint = RenderEngineUtil.transferPointFromImageToViewPortContent(positionOnImage, editorData); return { return this.props.imageData.labelPoints .filter((labelPoint: LabelPoint) => labelPoint.isCreatedByAI && labelPoint.status !== LabelStatus.ACCEPTED) .map((labelPoint: LabelPoint) => { - const positionOnImage: IPoint = {x: labelPoint.point.x, y: labelPoint.point.y}; + const positionOnImage: IPoint = { x: labelPoint.point.x, y: labelPoint.point.y }; const positionOnViewPort: IPoint = RenderEngineUtil.transferPointFromImageToViewPortContent(positionOnImage, editorData); return { else return null; }; - private onScrollbarsUpdate = (scrollbarContent)=>{ + private onScrollbarsUpdate = (scrollbarContent) => { const newViewPortContentSize = { width: scrollbarContent.scrollWidth, height: scrollbarContent.scrollHeight }; - if(!isEqual(newViewPortContentSize, this.state.viewPortSize)) { - this.setState({viewPortSize: newViewPortContentSize}) + if (!isEqual(newViewPortContentSize, this.state.viewPortSize)) { + this.setState({ viewPortSize: newViewPortContentSize }) } }; @@ -231,8 +247,8 @@ class Editor extends React.Component { > EditorModel.viewPortScrollbars = ref} - renderTrackHorizontal={props =>
} - renderTrackVertical={props =>
} + renderTrackHorizontal={props =>
} + renderTrackVertical={props =>
} onUpdate={this.onScrollbarsUpdate} >
({ export default connect( mapStateToProps, mapDispatchToProps -)(Editor); +)(Editor); \ No newline at end of file