Skip to content
Snippets Groups Projects
Select Git revision
  • d13df2d9a1b2757e34701978d04d99650f09d8a3
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

withPlugins.js

Blame
  • WorkspaceMosaic.js 3.03 KiB
    import React from 'react';
    import PropTypes from 'prop-types';
    import {
      Mosaic, getLeaves, createBalancedTreeFromLeaves,
    } from 'react-mosaic-component';
    import 'react-mosaic-component/react-mosaic-component.css';
    import Window from '../containers/Window';
    
    /**
     * Represents a work area that contains any number of windows
     * @memberof Workspace
     * @private
     */
    class WorkspaceMosaic extends React.Component {
      /**
       */
      constructor(props) {
        super(props);
    
        this.tileRenderer = this.tileRenderer.bind(this);
        this.mosaicChange = this.mosaicChange.bind(this);
        this.determineWorkspaceLayout = this.determineWorkspaceLayout.bind(this);
        this.zeroStateView = <div />;
      }
    
      /** */
      componentDidMount() {
        const { updateWorkspaceMosaicLayout } = this.props;
    
        const newLayout = this.determineWorkspaceLayout();
        if (newLayout) updateWorkspaceMosaicLayout(newLayout);
      }
    
      /** */
      componentDidUpdate(prevProps) {
        const { windows, workspace, updateWorkspaceMosaicLayout } = this.props;
        if (prevProps.windows !== windows || prevProps.workspace !== workspace) {
          const newLayout = this.determineWorkspaceLayout();
          if (newLayout) updateWorkspaceMosaicLayout(newLayout);
        }
      }
    
      /**
       * Used to determine whether or not a "new" layout should be autogenerated.
       * If a Window is added or removed, generate that new layout and use that for
       * this render. When the Mosaic changes, that will trigger a new store update.
       */
      determineWorkspaceLayout() {
        const { windows, workspace } = this.props;
        const windowKeys = Object.keys(windows).sort();
        const leaveKeys = getLeaves(workspace.layout);
        // Check every window is in the layout, and all layout windows are present
        // in store
        if (!windowKeys.every(e => leaveKeys.includes(e))
        || !leaveKeys.every(e => windowKeys.includes(e))) {
          const newLayout = createBalancedTreeFromLeaves(windowKeys);
    
          return newLayout;
        }
    
        return null;
      }
    
      /**
       * Render a tile (Window) in the Mosaic.
       */
      tileRenderer(id, path) {
        const { windows } = this.props;
        const window = windows[id];
        if (!window) return null;
        return (
          <Window
            key={window.id}
            window={window}
          />
        );
      }
    
      /**
       * Update the redux store when the Mosaic is changed.
       */
      mosaicChange(newLayout) {
        const { updateWorkspaceMosaicLayout } = this.props;
        updateWorkspaceMosaicLayout(newLayout);
      }
    
      /**
       */
      render() {
        const { workspace } = this.props;
        return (
          <Mosaic
            renderTile={this.tileRenderer}
            initialValue={workspace.layout || this.determineWorkspaceLayout()}
            onChange={this.mosaicChange}
            className="mirador-mosaic"
            zeroStateView={this.zeroStateView}
          />
        );
      }
    }
    
    
    WorkspaceMosaic.propTypes = {
      updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
      windows: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
      workspace: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
    };
    
    export default WorkspaceMosaic;