add close annotation pannel function to plugin's context and start implementing some logic

src/CanvasListItem.js

@@ -6,6 +6,7 @@ import ToggleButton from '@mui/material/ToggleButton';
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import flatten from 'lodash/flatten';
 import AnnotationActionsContext from './AnnotationActionsContext';
+import * as actions from "mirador/dist/es/src/state/actions";
 
 /** */
 class CanvasListItem extends Component {
@@ -15,6 +16,9 @@ class CanvasListItem extends Component {
 
     this.state = {
       isHovering: false,
+      isEditAnnotationPanelOpen: false,
+      id: "",
+      payload:{}
     };
 
     this.handleMouseHover = this.handleMouseHover.bind(this);
@@ -37,7 +41,7 @@ class CanvasListItem extends Component {
   /** */
   handleEdit() {
     const {
-      addCompanionWindow, canvases, annotationsOnCanvases,
+      addCompanionWindow, canvases, annotationsOnCanvases,closeCompanionWindow
     } = this.context;
     const { annotationid } = this.props;
     let annotation;
@@ -51,10 +55,28 @@ class CanvasListItem extends Component {
       }
       return (annotation);
     });
-    addCompanionWindow('annotationCreation', {
+    console.log('closeCompanionWindow',closeCompanionWindow)
+    console.log('this props', this.props)
+    console.log('this context', this.context)
+    if(!this.state.isEditAnnotationPanelOpen){
+    const myAnnotationPannel = addCompanionWindow('annotationCreation', {
       annotationid,
       position: 'right',
     });
+    this.setState({isEditAnnotationPanelOpen:true})
+    this.setState({id: myAnnotationPannel.id})
+    this.setState({payload: myAnnotationPannel.payload})
+    }else{
+      closeCompanionWindow(this.state.id)
+      this.setState({creationAnnotationIsOpen: false})
+      const myAnnotationPannel = addCompanionWindow('annotationCreation', {
+        annotationid,
+        position: 'right',
+      });
+      this.setState({isEditAnnotationPanelOpen:true})
+      this.setState({id: myAnnotationPannel.id})
+      this.setState({payload: myAnnotationPannel.payload})
+    }
   }
 
   /** */
@@ -137,8 +159,10 @@ CanvasListItem.propTypes = {
     PropTypes.func,
     PropTypes.node,
   ]).isRequired,
+  closeCompanionWindow: PropTypes.func.isRequired,
 };
 
+
 CanvasListItem.contextType = AnnotationActionsContext;
 
 export default forwardRef((props, ref) => <CanvasListItem {...props} containerRef={ref} />);

src/plugins/canvasAnnotationsPlugin.js

@@ -30,7 +30,7 @@ class CanvasAnnotationsWrapper extends Component {
   render() {
     const {
       addCompanionWindow, annotationsOnCanvases, canvases, config, receiveAnnotation,
-      switchToSingleCanvasView, TargetComponent, targetProps, windowViewType, containerRef,
+      switchToSingleCanvasView, TargetComponent, targetProps, windowViewType, containerRef,closeCompanionWindow
     } = this.props;
     const { singleCanvasDialogOpen } = this.state;
 
@@ -51,6 +51,7 @@ class CanvasAnnotationsWrapper extends Component {
           toggleSingleCanvasDialogOpen: this.toggleSingleCanvasDialogOpen,
           windowId: targetProps.windowId,
           windowViewType,
+          closeCompanionWindow
         }}
       >
         <TargetComponent
@@ -92,6 +93,8 @@ CanvasAnnotationsWrapper.propTypes = {
   ]).isRequired,
   targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   windowViewType: PropTypes.string.isRequired,
+  closeCompanionWindow: PropTypes.func.isRequired,
+
 };
 
 CanvasAnnotationsWrapper.defaultProps = {
@@ -117,6 +120,7 @@ function mapStateToProps(state, { targetProps: { windowId } }) {
     config: state.config,
     windowViewType: getWindowViewType(state, { windowId }),
   };
+
 }
 
 /** */
@@ -130,6 +134,9 @@ const mapDispatchToProps = (dispatch, props) => ({
   switchToSingleCanvasView: () => dispatch(
     actions.setWindowViewType(props.targetProps.windowId, 'single'),
   ),
+  closeCompanionWindow: (id) => dispatch(
+      actions.removeCompanionWindow(props.targetProps.windowId, id),
+  )
 });
 
 export default {