Skip to content
Snippets Groups Projects
Commit 12d9f9a2 authored by Samuel Jugnet's avatar Samuel Jugnet
Browse files

refacto en fichiers

parent cf95c75c
Branches
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1714 failed
Stage: test
Show whitespace changes
Inline Side-by-side
src/AnnotationCreation.js
+ 8
− 4
View file @ 12d9f9a2
...@@ -345,7 +345,7 @@ class AnnotationCreation extends Component { ...@@ -345,7 +345,7 @@ class AnnotationCreation extends Component {
id: (annotation && annotation.id) || `${uuid()}`, id: (annotation && annotation.id) || `${uuid()}`,
image, image,
manifestId: canvas.options.resource.id, manifestId: canvas.options.resource.id,
svg:svg, svg,
tags, tags,
}).toJson(); }).toJson();
...@@ -457,12 +457,16 @@ class AnnotationCreation extends Component { ...@@ -457,12 +457,16 @@ class AnnotationCreation extends Component {
strokeColor={strokeColor} strokeColor={strokeColor}
strokeWidth={strokeWidth} strokeWidth={strokeWidth}
closed={closedMode === 'closed'} closed={closedMode === 'closed'}
svg={svg}
updateGeometry={this.updateGeometry} updateGeometry={this.updateGeometry}
windowId={windowId} windowId={windowId}
player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)} player={mediaIsVideo ? VideosReferences.get(windowId) : OSDReferences.get(windowId)}
width={mediaIsVideo ? VideosReferences.get(windowId).video.videoWidth : OSDReferences.get(windowId).viewer.world.getItemAt(0).source.dimensions.x} /// we need to pass the width and height of the image to the annotation drawing component
height={mediaIsVideo ? VideosReferences.get(windowId).video.videoHeight : OSDReferences.get(windowId).viewer.world.getItemAt(0).source.dimensions.y} width={1920}
height={1080}
/> />
<StyledForm <StyledForm
onSubmit={this.submitForm} onSubmit={this.submitForm}
......
src/AnnotationDrawing.js
+ 1
− 440
View file @ 12d9f9a2
...@@ -12,454 +12,16 @@ import { ...@@ -12,454 +12,16 @@ import {
} from 'react-konva'; } from 'react-konva';
import { exportStageSVG } from 'react-konva-to-svg'; import { exportStageSVG } from 'react-konva-to-svg';
class FreeHand extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool,points,fill } = this.props;
const isSelected = this.props.selected
// will be a custom shape
return (
<React.Fragment>
<Shape
ref={this.shapeRef}
x={0}
y={0}
width={this.props.width || 1920}
height={this.props.height || 1080}
points={this.props.points || [0, 0, 100, 0, 100, 100]}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
sceneFunc={(context, shape) => {
console.log('scene func',points);
for (let i = 0; i < points.length; i += 2) {
context.beginPath();
//draw rect for each point
context.rect(points[i] - 2.5, points[i + 1]- 2.5, 5, 5);
// fill rect with color
context.closePath();
context.fillStrokeShape(shape);
}
// context.beginPath();
// context.moveTo(20, 50);
// context.lineTo(220, 80);
// context.quadraticCurveTo(150, 100, 260, 170);
// context.closePath();
// // (!) Konva specific method, it is very important
// context.fillStrokeShape(shape);
}}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
class EllipseNode extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool } = this.props;
const isSelected = this.props.selected
return (
<React.Fragment>
<Ellipse
// map props to konva
ref={this.shapeRef}
x={this.props.x || 100}
y={this.props.y || 100}
width={this.props.width || 100}
height={this.props.height || 100}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
class TextNode extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
// add event listener for key down
// this.shapeRef.current.addEventListener('keydown', this.handleKeyDown);
}
}
render() {
const { activeTool } = this.props;
const isSelected = this.props.selected
return (
<React.Fragment>
<Text
ref={this.shapeRef}
x={this.props.x}
y={this.props.y}
fontSize={this.props.fontSize}
fill={this.props.fill}
text={this.props.text}
id={this.props._id}
//dragable if tool is cursor or edit
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
// onClick={activeTool === 'cursor' ? null : null}
// onDblClick={acveTool === 'edit' ? this.handleClick : null}ti
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
class Rectangle extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool } = this.props;
const isSelected = this.props.selected
return (
<React.Fragment>
<Rect
// map props to konva
ref={this.shapeRef}
x={this.props.x || 100}
y={this.props.y || 100}
width={this.props.width || 100}
height={this.props.height || 100}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedShapeId: this.props.selectedShapeId,
selectedShape: null,
};
}
handleShapeClick = (shape) => {
this.setState({
selectedShapeId: shape.id,
selectedShape: shape
});
this.props.onShapeClick(shape);
// this.setState({ selectedShapeId: id });
};
import ParentComponent from './shapes/ParentComponent';
render() {
const { shapes
} = this.props;
const { selectedShapeId } = this.state;
let selected = false;
let selid = selectedShapeId;
let selectedShape = null;
//if length is 1 and selected shape is null
if (shapes.length === 1 && !selectedShapeId) {
selected = true;
selid = shapes[0].id;
selectedShape = shapes[0];
}
return (
<Layer>
{shapes.map((shape, i) => {
if (selectedShape?.id === shape.id) {
selected = true;
selectedShape = shape;
}
switch (shape.type) {
case 'rectangle':
return (
<Rectangle
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
selected={selected}
// onShapeClick={this.handleShapeClick}
/>
);
break;
case 'text':
return (
<TextNode
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
fontSize={shape.fontSize}
fill={shape.fill}
text={shape.text}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
case 'ellipse':
return (
<EllipseNode
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
case 'freehand':
return (
<FreeHand
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
points={shape.points}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
}
})}
</Layer>
);
}
}
/** Create a portal with a drawing canvas and a form to fill annotations details */ /** Create a portal with a drawing canvas and a form to fill annotations details */
class AnnotationDrawing extends Component { class AnnotationDrawing extends Component {
...@@ -511,7 +73,6 @@ class AnnotationDrawing extends Component { ...@@ -511,7 +73,6 @@ class AnnotationDrawing extends Component {
onShapeClick = (shape) => { onShapeClick = (shape) => {
this.svg();
this.setState({ selectedShapeId: shape.id }); this.setState({ selectedShapeId: shape.id });
const id = shape.id; const id = shape.id;
// find shape by id // find shape by id
......
src/shapes/EllipseNode.js 0 → 100644
+ 75
− 0
View file @ 12d9f9a2
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import {
Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape
} from 'react-konva';
class EllipseNode extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool } = this.props;
const isSelected = this.props.selectedShapeId === this.props.shape.id
return (
<React.Fragment>
<Ellipse
// map props to konva
ref={this.shapeRef}
x={this.props.x || 100}
y={this.props.y || 100}
width={this.props.width || 100}
height={this.props.height || 100}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
EllipseNode.propTypes = {
onShapeClick: PropTypes.func.isRequired,
shape: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
activeTool: PropTypes.string.isRequired,
selected: PropTypes.bool.isRequired,
};
export default EllipseNode;
src/shapes/FreeHand.js 0 → 100644
+ 123
− 0
View file @ 12d9f9a2
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape
} from 'react-konva';
class FreeHand extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool,points,fill } = this.props;
const isSelected = this.props.selectedShapeId === this.props.shape.id
// will be a custom shape
return (
<React.Fragment>
<Shape
ref={this.shapeRef}
x={0}
y={0}
width={this.props.width || 1920}
height={this.props.height || 1080}
points={this.props.points || [0, 0, 100, 0, 100, 100]}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
sceneFunc={(context, shape) => {
console.log('scene func',points);
for (let i = 0; i < points.length; i += 2) {
context.beginPath();
//draw rect for each point
context.rect(points[i] - 2.5, points[i + 1]- 2.5, 5, 5);
// fill rect with color
context.closePath();
context.fillStrokeShape(shape);
}
// context.beginPath();
// context.moveTo(20, 50);
// context.lineTo(220, 80);
// context.quadraticCurveTo(150, 100, 260, 170);
// context.closePath();
// // (!) Konva specific method, it is very important
// context.fillStrokeShape(shape);
}}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
FreeHand.propTypes = {
activeTool: PropTypes.string.isRequired,
fill: PropTypes.string,
height: PropTypes.number,
onShapeClick: PropTypes.func.isRequired,
points: PropTypes.array,
selected: PropTypes.bool,
shape: PropTypes.object.isRequired,
stroke: PropTypes.string,
strokeWidth: PropTypes.number,
width: PropTypes.number,
};
FreeHand.defaultProps = {
fill: 'red',
height: 1080,
points: [0, 0, 100, 0, 100, 100],
selected: false,
stroke: 'black',
strokeWidth: 1,
width: 1920,
};
export default FreeHand;
\ No newline at end of file
src/shapes/ParentComponent.js 0 → 100644
+ 205
− 0
View file @ 12d9f9a2
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FreeHand from './FreeHand';
import Rectangle from './Rectangle';
import EllipseNode from './EllipseNode';
import TextNode from './TextNode';
import {
Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape
} from 'react-konva';
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
selectedShapeId: this.props.selectedShapeId,
selectedShape: null,
};
}
handleShapeClick = (shape) => {
this.setState({
selectedShapeId: shape.id,
selectedShape: shape
});
this.props.onShapeClick(shape);
// this.setState({ selectedShapeId: id });
};
render() {
const { shapes
} = this.props;
const { selectedShapeId } = this.state;
let selected = false;
let selid = selectedShapeId;
let selectedShape = null;
//if length is 1 and selected shape is null
if (shapes.length === 1 && !selectedShapeId) {
selected = true;
selid = shapes[0].id;
selectedShape = shapes[0];
}
return (
<Layer>
{shapes.map((shape, i) => {
if (selectedShape?.id === shape.id) {
selected = true;
selectedShape = shape;
}
switch (shape.type) {
case 'rectangle':
return (
<Rectangle
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
selected={selected}
// onShapeClick={this.handleShapeClick}
/>
);
break;
case 'text':
return (
<TextNode
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
fontSize={shape.fontSize}
fill={shape.fill}
text={shape.text}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
case 'ellipse':
return (
<EllipseNode
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
width={shape.width}
height={shape.height}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
case 'freehand':
return (
<FreeHand
shape={shape}
selectedShapeId={selid}
selectedShape={selectedShape}
onShapeClick={this.handleShapeClick}
activeTool={this.props.activeTool}
selected={selected}
_id={shape.id}
key={i}
x={shape.x}
y={shape.y}
points={shape.points}
fill={shape.fill}
stroke={shape.strokeColor}
strokeWidth={shape.strokeWidth}
draggable={this.props.activeTool === 'cursor'}
onClick={this.props.activeTool === 'cursor' ? () => this.setState({ currentShape: shape }) : null}
// onDragEnd={this.handleDragEnd(shape.id)} // Add this line
onDblClick={this.handleShapeDblClick}
/>
);
break;
}
})}
</Layer>
);
}
}
ParentComponent.propTypes = {
shapes: PropTypes.arrayOf(PropTypes.object).isRequired,
onShapeClick: PropTypes.func.isRequired,
selectedShapeId: PropTypes.string,
activeTool: PropTypes.string.isRequired,
};
ParentComponent.defaultProps = {
selectedShapeId: null,
};
export default ParentComponent;
\ No newline at end of file
src/shapes/Rectangle.js 0 → 100644
+ 88
− 0
View file @ 12d9f9a2
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape
} from 'react-konva';
class Rectangle extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
}
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
render() {
const { activeTool } = this.props;
const isSelected = this.props.selectedShapeId === this.props.shape.id
console.log('rect props', this.props);
return (
<React.Fragment>
<Rect
// map props to konva
ref={this.shapeRef}
x={this.props.x || 100}
y={this.props.y || 100}
width={this.props.width || 100}
height={this.props.height || 100}
fill={this.props.fill || 'red'}
stroke={this.props.stroke || 'black'}
strokeWidth={this.props.strokeWidth || 1}
id={this.props._id}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
Rectangle.propTypes = {
shape: PropTypes.object.isRequired,
onShapeClick: PropTypes.func.isRequired,
activeTool: PropTypes.string.isRequired,
selected: PropTypes.bool,
};
Rectangle.defaultProps = {
selected: false,
};
export default Rectangle;
\ No newline at end of file
src/shapes/TextNode.js 0 → 100644
+ 81
− 0
View file @ 12d9f9a2
import React, { Component, useState } from 'react';
import PropTypes from 'prop-types';
import {
Stage, Layer, Star, Text, Circle, Rect
, Ellipse, Transformer,Shape
} from 'react-konva';
class TextNode extends React.Component {
constructor(props) {
super(props);
this.shapeRef = React.createRef();
this.trRef = React.createRef();
}
handleClick = () => {
this.props.onShapeClick(this.props.shape);
};
componentDidMount() {
if (this.trRef.current) {
this.trRef.current.nodes([this.shapeRef.current]);
this.trRef.current.getLayer().batchDraw();
// add event listener for key down
// this.shapeRef.current.addEventListener('keydown', this.handleKeyDown);
}
}
render() {
const { activeTool } = this.props;
const isSelected = this.props.selectedShapeId === this.props.shape.id
return (
<React.Fragment>
<Text
ref={this.shapeRef}
x={this.props.x}
y={this.props.y}
fontSize={this.props.fontSize}
fill={this.props.fill}
text={this.props.text}
id={this.props._id}
//dragable if tool is cursor or edit
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={this.handleClick}
onKeyDown={this.handleKeyDown}
// onClick={activeTool === 'cursor' ? null : null}
// onDblClick={acveTool === 'edit' ? this.handleClick : null}ti
/>
<Transformer ref={this.trRef}
visible={activeTool === 'edit' && isSelected}
/>
</React.Fragment>
);
}
}
export default TextNode;
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment