AnnotationDrawing.js

/* eslint-disable require-jsdoc */
import React, {
  useEffect, useState, useLayoutEffect,
} from 'react';
import ReactDOM from 'react-dom';
import PropTypes, { object } from 'prop-types';
import { Stage } from 'react-konva';
import { v4 as uuidv4 } from 'uuid';
// eslint-disable-next-line import/no-extraneous-dependencies
import { OSDReferences } from 'mirador/dist/es/src/plugins/OSDReferences';
// eslint-disable-next-line import/no-extraneous-dependencies
import { VideosReferences } from 'mirador/dist/es/src/plugins/VideosReferences';
import ParentComponent from './AnnotationFormOverlay/KonvaDrawing/shapes/ParentComponent';
import { SHAPES_TOOL } from '../AnnotationCreationUtils';
/** All the stuff to draw on the canvas */
function AnnotationDrawing({ drawingState, setDrawingState, ...props }) {
  const { height, width } = props.mediaVideo ? props.mediaVideo.ref.current : 0;

  useEffect(() => {
    const overlay = props.mediaVideo ? props.mediaVideo.ref.current : null;
    if (overlay) {
      props.updateScale(overlay.containerWidth / overlay.canvasWidth);
    }
  }, [{ height, width }]);

  useEffect(() => {
    // TODO clean
    if (!props.imageEvent) return;
    if (!props.imageEvent.id) return;
    const shape = {
      id: uuidv4(),
      rotation: 0,
      scaleX: 1,
      scaleY: 1,
      type: 'image',
      url: props.imageEvent.id,
      x: 0,
      y: 0,
    };

    setDrawingState({
      ...drawingState,
      currentShape: shape,
      shapes: [...drawingState.shapes, shape],
    });
  }, [props.imageEvent]);

  const { fillColor, strokeColor, strokeWidth } = props;

  /** */
  /*  useEffect(() => {
    /!*if (!isDrawing) {
      const newCurrentShape = shapes[shapes.length - 1];
      // get latest shape in the list
      if (newCurrentShape) {
        setCurrentShape(newCurrentShape);
      }
    }
    props.updateShapes([...shapes]);*!/
  }, [shapes]); */

  useEffect(() => {
    // Perform an action when fillColor, strokeColor, or strokeWidth change
    // update current shape
    if (drawingState.currentShape) {
      drawingState.currentShape.fill = fillColor;
      drawingState.currentShape.stroke = strokeColor;
      drawingState.currentShape.strokeWidth = strokeWidth;
      updateCurrentShapeInShapes(drawingState.currentShape);
    }