Skip to content
Snippets Groups Projects
Select Git revision
  • 7af2d10f8d34c07117d2d37319229687a6a3934c
  • demo_ci_gitlab_pages default
  • demo_gitlab_ci
  • 5-images-in-annotations
  • 5-final-images
  • 5-chpk-images-in-annot
  • tetras-main protected
  • 5-rebase-images-in-annot
  • 5-wip-images-in-annot
  • tmp
  • 1-edit-annotations-on-videos
  • 5-old-images-in-annotations
  • old_demo_ci_gitlab_pages
  • images_annotations
  • wip
  • devsetup
  • wip-annot-video-ui
  • wip-annotations-on-videos
  • master
  • v0.4.0_react16
  • wip-debugging-annotations
21 results

miradorAnnotationPlugin.js

Blame
  • Forked from IIIF / Mirador / Mirador annotations
    351 commits behind the upstream repository.
    miradorAnnotationPlugin.js 4.74 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import * as actions from 'mirador/dist/es/src/state/actions';
    import { getWindowViewType } from 'mirador/dist/es/src/state/selectors';
    import AddBoxIcon from '@material-ui/icons/AddBox';
    import GetAppIcon from '@material-ui/icons/GetApp';
    import { MiradorMenuButton } from 'mirador/dist/es/src/components/MiradorMenuButton';
    import { getVisibleCanvases } from 'mirador/dist/es/src/state/selectors/canvases';
    import SingleCanvasDialog from '../SingleCanvasDialog';
    import AnnotationExportDialog from '../AnnotationExportDialog';
    import LocalStorageAdapter from '../LocalStorageAdapter';
    
    /** */
    class MiradorAnnotation extends Component {
      /** */
      constructor(props) {
        super(props);
        this.state = {
          annotationExportDialogOpen: false,
          singleCanvasDialogOpen: false,
        };
        this.openCreateAnnotationCompanionWindow = this.openCreateAnnotationCompanionWindow.bind(this);
        this.toggleCanvasExportDialog = this.toggleCanvasExportDialog.bind(this);
        this.toggleSingleCanvasDialogOpen = this.toggleSingleCanvasDialogOpen.bind(this);
      }
    
      /** */
      openCreateAnnotationCompanionWindow(e) {
        const {
          addCompanionWindow,
        } = this.props;
    
        addCompanionWindow('annotationCreation', {
          position: 'right',
        });
      }
    
      /** */
      toggleSingleCanvasDialogOpen() {
        const { singleCanvasDialogOpen } = this.state;
        this.setState({
          singleCanvasDialogOpen: !singleCanvasDialogOpen,
        });
      }
    
      /** */
      toggleCanvasExportDialog(e) {
        const { annotationExportDialogOpen } = this.state;
        const newState = {
          annotationExportDialogOpen: !annotationExportDialogOpen,
        };
        this.setState(newState);
      }
    
      /** */
      render() {
        const {
          canvases,
          config,
          switchToSingleCanvasView,
          TargetComponent,
          targetProps,
          windowViewType,
        } = this.props;
        const { annotationExportDialogOpen, singleCanvasDialogOpen } = this.state;
        const storageAdapter = config.annotation && config.annotation.adapter('poke');
        const offerExportDialog = config.annotation && storageAdapter instanceof LocalStorageAdapter
          && config.annotation.exportLocalStorageAnnotations;
        return (
          <div>
            <TargetComponent
              {...targetProps} // eslint-disable-line react/jsx-props-no-spreading
            />
            <MiradorMenuButton
              aria-label="Create new annotation"
              onClick={windowViewType === 'single' ? this.openCreateAnnotationCompanionWindow : this.toggleSingleCanvasDialogOpen}
              size="small"
            >
              <AddBoxIcon />
            </MiradorMenuButton>
            { singleCanvasDialogOpen && (
              <SingleCanvasDialog
                open={singleCanvasDialogOpen}
                handleClose={this.toggleSingleCanvasDialogOpen}
                switchToSingleCanvasView={switchToSingleCanvasView}
              />
            )}
            { offerExportDialog && (
              <MiradorMenuButton
                aria-label="Export local annotations for visible items"
                onClick={this.toggleCanvasExportDialog}
                size="small"
              >
                <GetAppIcon />
              </MiradorMenuButton>
            )}
            { offerExportDialog && (
              <AnnotationExportDialog
                canvases={canvases}
                config={config}
                handleClose={this.toggleCanvasExportDialog}
                open={annotationExportDialogOpen}
              />
            )}
          </div>
        );
      }
    }
    
    MiradorAnnotation.propTypes = {
      addCompanionWindow: PropTypes.func.isRequired,
      canvases: PropTypes.arrayOf(
        PropTypes.shape({ id: PropTypes.string, index: PropTypes.number }),
      ).isRequired,
      config: PropTypes.shape({
        annotation: PropTypes.shape({
          adapter: PropTypes.func,
          exportLocalStorageAnnotations: PropTypes.bool,
        }),
      }).isRequired,
      switchToSingleCanvasView: PropTypes.func.isRequired,
      TargetComponent: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.node,
      ]).isRequired,
      targetProps: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
      windowViewType: PropTypes.string.isRequired,
    };
    
    /** */
    const mapDispatchToProps = (dispatch, props) => ({
      addCompanionWindow: (content, additionalProps) => dispatch(
        actions.addCompanionWindow(props.targetProps.windowId, { content, ...additionalProps }),
      ),
      switchToSingleCanvasView: () => dispatch(
        actions.setWindowViewType(props.targetProps.windowId, 'single'),
      ),
    });
    
    /** */
    const mapStateToProps = (state, { targetProps: { windowId } }) => ({
      canvases: getVisibleCanvases(state, { windowId }),
      config: state.config,
      windowViewType: getWindowViewType(state, { windowId }),
    });
    
    export default {
      component: MiradorAnnotation,
      mapDispatchToProps,
      mapStateToProps,
      mode: 'wrap',
      target: 'AnnotationSettings',
    };