diff --git a/src/annotationForm/AnnotationDrawing.js b/src/annotationForm/AnnotationDrawing.js
index cadceacfef87c979cbcdbbb7b066500bca9975ab..ee571675ac1e15d0b6f414cc8184a4f89fd9bd48 100644
--- a/src/annotationForm/AnnotationDrawing.js
+++ b/src/annotationForm/AnnotationDrawing.js
@@ -13,6 +13,7 @@ import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
import ParentComponent from './AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent';
import { SHAPES_TOOL } from '../AnnotationCreationUtils';
+import Surface from './AnnotationFormOverlay/KonvaDrawing/Surface';
/** All the stuff to draw on the canvas */
function AnnotationDrawing(props) {
const [shapes, setShapes] = useState([]);
@@ -127,22 +128,35 @@ function AnnotationDrawing(props) {
/** */
const onShapeClick = async (shp) => {
+
+// retrn if we are not in edit or cursor mode
+
+
+ if (props.activeTool !== 'edit' && props.activeTool !== 'cursor' && props.activeTool !== 'delete') {
+ return;
+ }
+
+ console.log('shape clicked', shp);
+
const shape = shapes.find((s) => s.id === shp.id);
+ console.log('shape', shape);
+
if (props.activeTool === 'delete') {
const newShapes = shapes.filter((s) => s.id !== shape.id);
setShapes(newShapes);
return;
}
- setCurrentShape(shape);
+ setCurrentShape({...shape});
+ console.log('currentShape', currentShape);
props.setShapeProperties(shape); // TODO Check that code ?
- props.setColorToolFromCurrentShape(
- {
- fillColor: shape.fill,
- strokeColor: shape.stroke,
- strokeWidth: shape.strokeWidth,
- },
- );
+ // props.setColorToolFromCurrentShape(
+ // {
+ // fillColor: shape.fill,
+ // strokeColor: shape.stroke,
+ // strokeWidth: shape.strokeWidth,
+ // },
+ // );
};
const onTransform = (evt) => {
@@ -344,6 +358,7 @@ function AnnotationDrawing(props) {
setCurrentShape(shape);
break;
case SHAPES_TOOL.ARROW:
+
setIsDrawing(true);
shape = {
fill: props.fillColor,
@@ -351,6 +366,8 @@ function AnnotationDrawing(props) {
pointerLength: 20,
pointerWidth: 20,
points: [pos.x, pos.y, pos.x, pos.y],
+ x: 0,
+ y: 0,
rotation: 0,
scaleX: 1,
scaleY: 1,
@@ -371,6 +388,7 @@ function AnnotationDrawing(props) {
/** */
const handleMouseMove = (e) => {
+
try {
if (!isDrawing) {
return;
@@ -445,6 +463,7 @@ function AnnotationDrawing(props) {
arrowShape.strokeWidth = props.strokeWidth;
setCurrentShape(arrowShape);
updateCurrentShapeInShapes();
+ setIsDrawing(true);
break;
default:
break;
@@ -456,18 +475,11 @@ function AnnotationDrawing(props) {
/** Stop drawing */
const handleMouseUp = (e) => {
- const pos = e.target.getStage().getRelativePointerPosition();
- pos.x /= props.scale;
- pos.y /= props.scale;
- try {
- if (!currentShape) {
- return;
- }
- // For these cases, the action is similar: stop drawing and add the shape
+
+
+
setIsDrawing(false);
- } catch (error) {
- console.error('error', error);
- }
+
};
/** */
diff --git a/src/annotationForm/KonvaDrawing/Surface.js b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/Surface.js
similarity index 51%
rename from src/annotationForm/KonvaDrawing/Surface.js
rename to src/annotationForm/AnnotationFormOverlay/KonvaDrawing/Surface.js
index 27c96ac8fb30bcbcf10b9fd93eb5938876487169..7623aa6bdb41b47e684d141856632dd3ec02dc5f 100644
--- a/src/annotationForm/KonvaDrawing/Surface.js
+++ b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/Surface.js
@@ -1,11 +1,11 @@
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
-import {Layer, Rect, Transformer } from 'react-konva';
+import { Layer, Rect, Transformer } from 'react-konva';
function Surface({
- shape, activeTool, tabView,
- onTransform, handleDrag,trview,
- width, height, scale,
+ shape, activeTool, tabView,
+ onTransform, handleDrag, trview,
+ width, height, scale,
}) {
const shapeRef = useRef();
const trRef = useRef();
@@ -17,49 +17,47 @@ function Surface({
}
}, [tabView]);
-// const handleClick = () => {
-// onShapeClick(shape);
-// };
+
return (
-<Layer
-
- scaleX={scale}
- scaleY={scale}
-
-
->
- <>
- <Rect
- ref={shapeRef}
- x={shape.x }
- y={shape.y }
- scaleX={shape.scaleX}
- scaleY={shape.scaleY}
-
- width={shape.width}
- height={shape.height }
- fill={"transparent"}
- stroke={"#1967d2"}
-
- strokeWidth={ 1}
-
- draggable={trview}
- onTransform={onTransform}
- onDrag={handleDrag}
- onDragEnd={handleDrag}
- dash={[10, 5]}
- />
-
- <Transformer
- ref={trRef}
- visible={trview}
- rotateEnabled={false}
- borderEnabled={false}
-
-
- />
- </>
+ <Layer
+
+ scaleX={scale}
+ scaleY={scale}
+
+
+ >
+ <>
+ <Rect
+ ref={shapeRef}
+ x={shape.x}
+ y={shape.y}
+ scaleX={shape.scaleX}
+ scaleY={shape.scaleY}
+
+ width={shape.width}
+ height={shape.height}
+ fill={"transparent"}
+ stroke={"#1967d2"}
+
+ strokeWidth={1}
+
+ draggable={trview}
+ onTransform={onTransform}
+ onDrag={handleDrag}
+ onDragEnd={handleDrag}
+ dash={[10, 5]}
+ />
+
+ <Transformer
+ ref={trRef}
+ visible={trview}
+ rotateEnabled={false}
+ borderEnabled={false}
+
+
+ />
+ </>
</Layer>
);
}
diff --git a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/LineNode.js b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/LineNode.js
index 072b502b24293ab988130d8f50bca3bfca24dba4..b11864ea507fbde6b9cf7c81b645f3daad548989 100644
--- a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/LineNode.js
+++ b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/LineNode.js
@@ -34,6 +34,7 @@ function LineNode({
closed={false}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
onClick={handleClick}
+ onMousedown={handleClick}
/>
<Transformer
diff --git a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent.js b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent.js
index d4ad210c4d8e11a2250d7a3bd59dcc3207e17ddb..7d42e0b1b229eea4025641ff5f1a6cf5c5c411a0 100644
--- a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent.js
+++ b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent.js
@@ -12,8 +12,9 @@ import ImageShape from './Image';
/** Loads Konva and display in function of their type */
function ParentComponent({
isMouseOverSave,
- scale, width, height, onTransform, handleDragEnd,
+ scale, onTransform, handleDragEnd,
shapes, onShapeClick, selectedShapeId, activeTool,
+ trview,
}) {
// TODO Simplify these state
const [selectedShape, setSelectedShape] = useState(null);
@@ -44,6 +45,9 @@ function ParentComponent({
scaleY={scale}
>
{shapes.map((shape, i) => {
+
+
+
const isSelected = selectedShapeId === shape.id && isMouseOverSave === false && trview === true;
switch (shape.type) {
case 'rectangle':
@@ -154,13 +158,12 @@ function ParentComponent({
ParentComponent.propTypes = {
activeTool: PropTypes.string.isRequired,
handleDragEnd: PropTypes.func.isRequired,
- height: PropTypes.number.isRequired,
isMouseOverSave: PropTypes.bool.isRequired,
onShapeClick: PropTypes.func.isRequired,
onTransform: PropTypes.func.isRequired,
scale: PropTypes.number.isRequired,
- selectedShapeId: PropTypes.string.isRequired,
- shapes: PropTypes.arrayOf(PropTypes.object).isRequired,
- width: PropTypes.number.isRequired,
+ selectedShapeId: PropTypes.string,
+ shapes: PropTypes.arrayOf(PropTypes.object).isRequired
+
};
export default ParentComponent;
diff --git a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Polygon.js b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Polygon.js
index 9f8df644996bf31c82e1608d519e3117ed3617b8..e3b14c9ecd5e2ca97834ed7cf2631ef788e7d403 100644
--- a/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Polygon.js
+++ b/src/annotationForm/AnnotationFormOverlay/KonvaDrawing/shapes/Polygon.js
@@ -37,8 +37,9 @@ function Polygon({
lineCap="round"
lineJoin="round"
closed={false}
- onClick={handleClick}
+
onMousedown={handleClick}
+ onClick={handleClick}
fill={shape.fill}
draggable={activeTool === 'cursor' || activeTool === 'edit'}
globalCompositeOperation="source-over"