Skip to content
Snippets Groups Projects
Select Git revision
  • ab9e6df39f36f4097eac2672ea02d8078289875c
  • mui5-tetras-main-stable default protected
  • mui5-tetras-main-old-stable
  • preprod protected
  • 75-dernieres-ameliorations-avant-workshop-du-7-02
  • wip-fix-xywh
  • wip-positionement-annot
  • wip-surface-transformer
  • uploads-file
  • 69-la-video-demare-quand-on-fait-glisser-le-slider-et-le-clic-creer-un-decalage-entre-le-player
  • 61-recettage-des-outils-d-annotation
  • gestion_multiple_ouverture_pannel_annotation
  • autorisation_un_pannel_annotation
  • autorisation_un_pannel_edition_annotation
  • récupération_temps_video
  • save-shapes-and-position
  • fix-error-create-annotation-pannel
  • time-saving-on-annotation
  • tetras-main protected
  • fix-poc-mirador
  • tetras-antho-test
21 results

CanvasListItem.js

Blame
  • CanvasListItem.js 3.97 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import DeleteIcon from '@material-ui/icons/DeleteForever';
    import EditIcon from '@material-ui/icons/Edit';
    import ToggleButton from '@material-ui/lab/ToggleButton';
    import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
    import flatten from 'lodash/flatten';
    import AnnotationActionsContext from './AnnotationActionsContext';
    
    /** */
    class CanvasListItem extends Component {
      /** */
      constructor(props) {
        super(props);
    
        this.state = {
          isHovering: false,
        };
    
        this.handleMouseHover = this.handleMouseHover.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
      }
    
      /** */
      handleDelete() {
        const { canvases, receiveAnnotation, storageAdapter } = this.context;
        const { annotationid } = this.props;
        canvases.forEach((canvas) => {
          const adapter = storageAdapter(canvas.id);
          adapter.delete(annotationid).then((annoPage) => {
            receiveAnnotation(canvas.id, adapter.annotationPageId, annoPage);
          });
        });
      }
    
      /** */
      handleEdit() {
        const {
          addCompanionWindow, canvases, annotationsOnCanvases,
        } = this.context;
        const { annotationid } = this.props;
        let annotation;
        canvases.some((canvas) => {
          if (annotationsOnCanvases[canvas.id]) {
            Object.entries(annotationsOnCanvases[canvas.id]).forEach(([key, value], i) => {
              if (value.json && value.json.items) {
                annotation = value.json.items.find((anno) => anno.id === annotationid);
              }
            });
          }
          return (annotation);
        });
        addCompanionWindow('annotationCreation', {
          annotationid,
          position: 'right',
        });
      }
    
      /** */
      handleMouseHover() {
        this.setState((prevState) => ({
          isHovering: !prevState.isHovering,
        }));
      }
    
      /** */
      editable() {
        const { annotationsOnCanvases, canvases } = this.context;
        const { annotationid } = this.props;
        const annoIds = canvases.map((canvas) => {
          if (annotationsOnCanvases[canvas.id]) {
            return flatten(Object.entries(annotationsOnCanvases[canvas.id]).map(([key, value], i) => {
              if (value.json && value.json.items) {
                return value.json.items.map((item) => item.id);
              }
              return [];
            }));
          }
          return [];
        });
        return flatten(annoIds).includes(annotationid);
      }
    
      /** */
      render() {
        const { children } = this.props;
        const { isHovering } = this.state;
        const { windowViewType, toggleSingleCanvasDialogOpen } = this.context;
        return (
          <div
            onMouseEnter={this.handleMouseHover}
            onMouseLeave={this.handleMouseHover}
          >
            {isHovering && this.editable() && (
              <div
                style={{
                  position: 'relative',
                  top: -20,
                  zIndex: 10000,
                }}
              >
                <ToggleButtonGroup
                  aria-label="annotation tools"
                  size="small"
                  style={{
                    position: 'absolute',
                    right: 0,
                  }}
                >
                  <ToggleButton
                    aria-label="Edit"
                    onClick={windowViewType === 'single' ? this.handleEdit : toggleSingleCanvasDialogOpen}
                    value="edit"
                  >
                    <EditIcon />
                  </ToggleButton>
                  <ToggleButton aria-label="Delete" onClick={this.handleDelete} value="delete">
                    <DeleteIcon />
                  </ToggleButton>
                </ToggleButtonGroup>
              </div>
            )}
            <li
              {...this.props} // eslint-disable-line react/jsx-props-no-spreading
            >
              {children}
            </li>
          </div>
        );
      }
    }
    
    CanvasListItem.propTypes = {
      annotationid: PropTypes.string.isRequired,
      children: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.node,
      ]).isRequired,
    };
    
    CanvasListItem.contextType = AnnotationActionsContext;
    
    export default CanvasListItem;