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

wip shape creation gestures

parent b3824ca8
No related branches found
No related tags found
1 merge request!10Draft: MigratingAnnotationCreation to MUI5.
Pipeline #1717 failed
Stage: test
Show whitespace changes
Inline Side-by-side
src/AnnotationDrawing.js
+ 171
− 148
View file @ 5b1ad5cb
......@@ -10,7 +10,6 @@ import {
, Ellipse, Transformer, Shape
} from 'react-konva';
import { exportStageSVG } from 'react-konva-to-svg';
......@@ -29,11 +28,8 @@ class AnnotationDrawing extends Component {
constructor(props) {
super(props);
this.paper = null;
// this.addPath = this.addPath.bind(this);
this.drawKonvas = this.drawKonvas.bind(this);
this.state = {
......@@ -41,33 +37,11 @@ class AnnotationDrawing extends Component {
newShape: null,
currentShape: null,
isDrawing: false,
svg: async () => {
// stage is the one with same windowId
const stage = window.Konva.stages.find((stage) => stage.attrs.id === this.props.windowId);
const svg = await exportStageSVG(stage);
console.log('svg',svg);
return svg;
},
};
this.shapeRefs = {};
this.transformerRefs = {};
}
......@@ -91,6 +65,17 @@ class AnnotationDrawing extends Component {
// get selected shape
const { selectedShapeId } = this.state;
// if delete is pressed we whant to delete the shape
if (e.key === 'Delete') {
console.log('delete key pressed');
const { shapes } = this.state;
const index = shapes.findIndex((shape) => shape.id === selectedShapeId);
shapes.splice(index, 1);
this.setState({ shapes: shapes, selectedShapeId: null });
return;
}
console.log('selected shape id', selectedShapeId);
if (!selectedShapeId) {
return;
......@@ -150,66 +135,40 @@ class AnnotationDrawing extends Component {
}
//on dbl click
handleKonvasDblClick = (e) => {
handleMouseDown = (e) => {
try{
const pos = e.target.getStage().getPointerPosition();
console.log('mouse down', this.props.activeTool);
let shape = null;
console.log('dbl click', this.props.activeTool);
switch (this.props.activeTool) {
case 'rectangle':
shape = {
type: 'rectangle', x: pos.x, y: pos.y, width: 0, height: 0,
strokeColor: this.props.strokeColor,
strokeWidth: this.props.strokeWidth,
fill: this.props.fillColor,
id: uuidv4(),
};
case 'ellipse':
this.setState({
selectedShapeId: shape.id,
newShape: shape,
currentShape: shape,
});
break;
case "ellipse":
shape = {
type: 'ellipse', x: pos.x, y: pos.y, width: 0, height: 0,
isDrawing: true,
currentShape: {
type: this.props.activeTool,
x: pos.x,
y: pos.y,
width: 0,
height: 0,
stroke: this.props.strokeColor,
strokeWidth: this.props.strokeWidth,
fill: this.props.fillColor,
id: uuidv4(),
};
this.setState({
selectedShape: shape,
selectedShapeId: shape.id,
newShape: shape,
currentShape: shape,
},
});
break;
// case "polygon":
// this.setState({ newShape: { type: 'circle', x: pos.x, y: pos.y, width: 0, height: 0 } });
// break;
// case "freehand":
// this.setState({ newShape: { type: 'freehand', x: pos.x, y: pos.y, width: 0, height: 0 } });
// break;
case "text":
shape = {
type: 'text',
x: pos.x,
y: pos.y,
fontSize: 20,
fill: this.props.fillColor,
text: 'text',
id: uuidv4(),
};
......@@ -220,15 +179,17 @@ class AnnotationDrawing extends Component {
});
this.setState({
shapes: [...this.state.shapes, shape],
selectedShape: shape,
selectedShapeId: shape.id,
newShape: shape,
currentShape: shape,
});
console.log('text', shape);
break;
case "freehand":
const points = [pos.x, pos.y];
shape = {
......@@ -237,47 +198,26 @@ class AnnotationDrawing extends Component {
y: pos.y,
with:1920,
height:1080,
fill: this.props.fillColor,
points: points,
id: uuidv4(),
};
// this.setState({ newShape: shape }, () => {
// // Add global key press event listener
// window.addEventListener('keydown', this.handleKeyPress);
// });
this.setState({
shapes: [...this.state.shapes, shape],
selectedShape: shape,
selectedShapeId: shape.id,
newShape: shape,
currentShape: shape,
});
// Add cases for other shapes here
default:
break;
// other cases
}
const { newShape, shapes, currentShape } = this.state;
if (newShape) {
this.setState({
shapes: [...shapes, newShape],
currentShape: newShape,
newShape: null,
});
}
};
handleMouseDown = (e) => {
if( this.state.currentShape===null ) return;
// Check if the current shape is a freehand object
if (this.state.selectedShapeId && this.state.currentShape.type === 'freehand') {
// Start drawing
......@@ -288,23 +228,79 @@ class AnnotationDrawing extends Component {
: shape)
});
}
}catch(e){
console.log('error',e);
}
};
// handleMouseMove = (e) => {
// // Check if we're currently drawing
// if (!this.state.isDrawing) return;
// // Add the new point to the current shape
// };
handleMouseMove = (e) => {
// Check if we're currently drawing
try{
console.log('mouse move', this.props.activeTool);
if (!this.state.isDrawing) return;
// Add the new point to the current shape
if(this.state.currentShape===null ) return;
const pos = e.target.getStage().getPointerPosition();
switch (this.props.activeTool) {
case 'rectangle':
case 'ellipse':
this.setState({
currentShape: {
...this.state.currentShape,
width: pos.x - this.state.currentShape.x,
height: pos.y - this.state.currentShape.y,
},
});
break;
case "freehand":
this.setState({
shapes: this.state.shapes.map(shape => shape.id === this.state.selectedShapeId
? { ...shape, points: [...shape.points, e.evt.clientX, e.evt.clientY] }
: shape)
});
break;
default:
break;
}
}catch(e){
console.log('error',e);
}
};
handleMouseUp = () => {
// Stop drawing
this.setState({ isDrawing: false });
try{
console.log('mouse up', this.props.activeTool);
if (!this.state.isDrawing) return;
if (!this.state.currentShape) return;
this.setState((prevState) => ({
isDrawing: false,
shapes: [...prevState.shapes, prevState.currentShape],
currentShape: null,
}));
}
catch(e){
console.log('error',e);
}
};
......@@ -317,7 +313,7 @@ class AnnotationDrawing extends Component {
const { shapes, newShape } = this.state;
const { shapes, currentShape, newShape, isDrawing } = this.state;
const { windowId } = this.props;
......@@ -332,7 +328,7 @@ class AnnotationDrawing extends Component {
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
onMouseMove={this.handleMouseMove}
onDblClick={this.handleKonvasDblClick}
// onDblClick={this.handleKonvasDblClick}
id={windowId}
......@@ -340,11 +336,38 @@ class AnnotationDrawing extends Component {
>
<ParentComponent shapes={shapes}
{ <ParentComponent shapes={shapes}
onShapeClick={this.onShapeClick}
activeTool={this.props.activeTool}
selectedShapeId={this.state.selectedShapeId}
/> }
<Layer>
{isDrawing && currentShape && (
currentShape.type === 'rectangle' ? (
<Rect
x={currentShape.x}
y={currentShape.y}
width={currentShape.width}
height={currentShape.height}
fill={this.props.fillColor}
stroke={this.props.strokeColor}
// other props
/>
) : (
<Ellipse
x={currentShape.x}
y={currentShape.y}
radiusX={currentShape.width / 2}
radiusY={currentShape.height / 2}
fill={this.props.fillColor}
stroke={this.props.strokeColor}
// other props
/>
)
)}
</Layer>
</Stage>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment