wip...

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);
-    }
+   
   };
 
   /** */

src/annotationForm/KonvaDrawing/Surface.js → src/annotationForm/AnnotationFormOverlay/KonvaDrawing/Surface.js

@@ -17,9 +17,7 @@ function Surface({
     }
   }, [tabView]);
 
-//   const handleClick = () => {
-//     onShapeClick(shape);
-//   };
+
 
   return (
     <Layer

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

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;

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"