+
);
- if (workspaceType === 'mosaic' && windowDraggable) {
- const { mosaicWindowActions } = this.context;
- return mosaicWindowActions.connectDragSource(
- topBar,
- );
- }
return topBar;
}
@@ -119,10 +113,12 @@ export class Window extends Component {
}
}
-Window.contextType = MosaicWindowContext;
-
Window.propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
+ dragHandle: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+ ]),
focusWindow: PropTypes.func,
isFetching: PropTypes.bool,
label: PropTypes.string,
@@ -133,11 +129,11 @@ Window.propTypes = {
view: PropTypes.string,
windowDraggable: PropTypes.bool,
windowId: PropTypes.string.isRequired,
- workspaceType: PropTypes.string,
};
Window.defaultProps = {
classes: {},
+ dragHandle: null,
focusWindow: () => {},
isFetching: false,
label: null,
@@ -146,5 +142,4 @@ Window.defaultProps = {
sideBarOpen: false,
view: undefined,
windowDraggable: null,
- workspaceType: null,
};
diff --git a/src/components/Workspace.js b/src/components/Workspace.js
index f99f61d4e4..f72dad24b2 100644
--- a/src/components/Workspace.js
+++ b/src/components/Workspace.js
@@ -4,8 +4,8 @@ import classNames from 'classnames';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Window from '../containers/Window';
-import WorkspaceMosaic from '../containers/WorkspaceMosaic';
import WorkspaceElastic from '../containers/WorkspaceElastic';
+import WorkspaceGrid from '../containers/WorkspaceGrid';
import ns from '../config/css-ns';
import { IIIFDropTarget } from './IIIFDropTarget';
@@ -45,8 +45,8 @@ export class Workspace extends Component {
switch (workspaceType) {
case 'elastic':
return
;
- case 'mosaic':
- return
;
+ case 'grid':
+ return
;
default:
return windowIds.map(windowId => (
{
+ const { dragDropManager } = useContext(DndContext);
+ const dispatch = useDispatch();
+
+ const wrappedDispatch = useCallback((action) => {
+ dispatch({ ...action, type: `mirador/grid/${action.type}` });
+ }, [dispatch]);
+
+ return (
+
+
+
+
+ {
+ windowIds.map(windowId => (
+
+ ))
+ }
+
+
+
+
+ );
+};
+
+WorkspaceGrid.propTypes = {
+ gridTemplate: PropTypes.shape({
+ areas: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+ columns: PropTypes.arrayOf(PropTypes.number),
+ rows: PropTypes.arrayOf(PropTypes.number),
+ }).isRequired,
+ windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default WorkspaceGrid;
diff --git a/src/components/WorkspaceMosaic.js b/src/components/WorkspaceMosaic.js
deleted file mode 100644
index 620a8f6015..0000000000
--- a/src/components/WorkspaceMosaic.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import {
- MosaicWithoutDragDropContext, MosaicWindow, getLeaves, createBalancedTreeFromLeaves,
-} from 'react-mosaic-component';
-import difference from 'lodash/difference';
-import isEqual from 'lodash/isEqual';
-import classNames from 'classnames';
-import MosaicRenderPreview from '../containers/MosaicRenderPreview';
-import Window from '../containers/Window';
-import MosaicLayout from '../lib/MosaicLayout';
-
-/**
- * Represents a work area that contains any number of windows
- * @memberof Workspace
- * @private
- */
-export class WorkspaceMosaic extends 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 = ;
- this.windowPaths = {};
- this.toolbarControls = [];
- this.additionalControls = [];
- }
-
- /** */
- componentDidMount() {
- const { updateWorkspaceMosaicLayout } = this.props;
-
- const newLayout = this.determineWorkspaceLayout();
- if (newLayout) updateWorkspaceMosaicLayout(newLayout);
- }
-
- /** */
- componentDidUpdate(prevProps) {
- const { windowIds, layout, updateWorkspaceMosaicLayout } = this.props;
- const prevWindows = prevProps.windowIds;
- // Handles when Windows are added (not via Add Resource UI) Could be a workspace import
- if (!windowIds.every(e => prevWindows.includes(e))) {
- const newLayout = this.determineWorkspaceLayout();
- if (!isEqual(newLayout, layout)) updateWorkspaceMosaicLayout(newLayout);
- return;
- }
-
- // Handles when Windows are removed from the state
- if (!prevWindows.every(e => windowIds.includes(e))) {
- // There are no more remaining Windows, just return an empty layout
- if (windowIds.length === 0) {
- updateWorkspaceMosaicLayout(null);
- return;
- }
-
- const removedWindows = difference(prevWindows, windowIds);
- const newLayout = new MosaicLayout(layout);
- newLayout.removeWindows(removedWindows, this.windowPaths);
- updateWorkspaceMosaicLayout(newLayout.layout);
- }
- }
-
- /**
- * bookkeepPath - used to book keep Window's path's
- * @param {String} windowId [description]
- * @param {Array} path [description]
- */
- bookkeepPath(windowId, path) {
- this.windowPaths[windowId] = path;
- }
-
- /**
- * Used to determine whether or not a "new" layout should be autogenerated.
- */
- determineWorkspaceLayout() {
- const { windowIds, layout } = this.props;
- const leaveKeys = getLeaves(layout);
- // Windows were added
- if (!windowIds.every(e => leaveKeys.includes(e))) {
- // No current layout, so just generate a new one
- if (leaveKeys.length < 2) {
- return createBalancedTreeFromLeaves(windowIds);
- }
- // Add new windows to layout
- const addedWindows = difference(windowIds, leaveKeys);
- const newLayout = new MosaicLayout(layout);
- newLayout.addWindows(addedWindows);
- return newLayout.layout;
- }
- // Windows were removed (perhaps in a different Workspace). We don't have a
- // way to reconfigure.. so we have to random generate
- if (!leaveKeys.every(e => windowIds.includes(e))) {
- return createBalancedTreeFromLeaves(windowIds);
- }
- return layout;
- }
-
- /** */
- static renderPreview(mosaicProps) {
- return (
-
-
-
- );
- }
-
- /**
- * Render a tile (Window) in the Mosaic.
- */
- tileRenderer(id, path) {
- const { windowIds, workspaceId } = this.props;
- if (!windowIds.includes(id)) return null;
- this.bookkeepPath(id, path);
- return (
-
-
-
- );
- }
-
- /**
- * Update the redux store when the Mosaic is changed.
- */
- mosaicChange(newLayout) {
- const { updateWorkspaceMosaicLayout } = this.props;
- updateWorkspaceMosaicLayout(newLayout);
- }
-
- /**
- */
- render() {
- const { layout, classes } = this.props;
- return (
-
- );
- }
-}
-
-WorkspaceMosaic.propTypes = {
- classes: PropTypes.objectOf(PropTypes.string).isRequired,
- layout: PropTypes.oneOfType(
- [PropTypes.object, PropTypes.string],
- ), // eslint-disable-line react/forbid-prop-types
- updateWorkspaceMosaicLayout: PropTypes.func.isRequired,
- windowIds: PropTypes.arrayOf(PropTypes.string),
- workspaceId: PropTypes.string.isRequired,
-};
-
-WorkspaceMosaic.defaultProps = {
- layout: undefined,
- windowIds: [],
-};
diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js
index 839c227efe..9e2351a5fc 100644
--- a/src/components/WorkspaceSelectionDialog.js
+++ b/src/components/WorkspaceSelectionDialog.js
@@ -119,6 +119,28 @@ export class WorkspaceSelectionDialog extends Component {