Replace react-mosaic with mirador-mosaic

Author: cbeer

__tests__/src/components/Workspace.test.js

@@ -1,6 +1,5 @@
 import { shallow } from 'enzyme';
 import Typography from '@material-ui/core/Typography';
-import WorkspaceMosaic from '../../../src/containers/WorkspaceMosaic';
 import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
 import { Workspace } from '../../../src/components/Workspace';
@@ -17,7 +16,7 @@ function createWrapper(props) {
       isWorkspaceControlPanelVisible
       windowIds={['1', '2']}
       workspaceId="foo"
-      workspaceType="mosaic"
+      workspaceType="elastic"
       t={k => k}
       {...props}
     />,
@@ -39,20 +38,6 @@ describe('Workspace', () => {
       )).toBe(true);
     });
   });
-  describe('if workspace type is mosaic', () => {
-    it('should render <WorkspaceMosaic/> properly', () => {
-      const wrapper = createWrapper();
-
-      expect(wrapper.matchesElement(
-        <IIIFDropTarget>
-          <div className="mirador-workspace-viewport mirador-workspace-with-control-panel">
-            <Typography>miradorViewer</Typography>
-            <WorkspaceMosaic />
-          </div>
-        </IIIFDropTarget>,
-      )).toBe(true);
-    });
-  });
   describe('if workspace type is unknown', () => {
     it('should render <Window/> components as list', () => {
       const wrapper = createWrapper({ workspaceType: 'bubu' });

__tests__/src/components/WorkspaceMosaic.test.js

@@ -47,21 +47,21 @@
     "jss-rtl": "^0.3.0",
     "lodash": "^4.17.11",
     "manifesto.js": "^4.2.0",
+    "mirador-mosaic": "^0.0.1",
     "normalize-url": "^4.5.0",
     "openseadragon": "^2.4.2 || ^3.0.0 || ^4.0.0",
     "prop-types": "^15.6.2",
     "re-reselect": "^4.0.0",
     "react-aria-live": "^2.0.5",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-multi-backend": "^5.0.0",
-    "react-dnd-touch-backend": "^10.0.2",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dnd-multi-backend": "^8.0.0",
+    "react-dnd-touch-backend": "^16.0.1",
     "react-full-screen": "^1.1.1",
     "react-i18next": "^11.7.0 || ^12.0.0",
     "react-image": "^4.0.1",
     "react-intersection-observer": "^9.0.0",
-    "react-mosaic-component": "^4.0.1",
     "react-redux": "^7.1.0 || ^8.0.0",
     "react-resize-observer": "^1.1.1",
     "react-rnd": "^10.1",
@@ -115,8 +115,9 @@
     "jsdom": "^21.0.0",
     "puppeteer": "^19.0.0",
     "raf": "^3.4.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "rdndmb-html5-to-touch": "^8.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-refresh": "^0.14.0",
     "redux-mock-store": "^1.5.1",
     "redux-saga-test-plan": "^4.0.0-rc.3",
@@ -126,7 +127,7 @@
     "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   }
 }

package.json

@@ -7,8 +7,8 @@ import {
   ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
-import MultiBackend from 'react-dnd-multi-backend';
-import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
+import { MultiBackend } from 'react-dnd-multi-backend';
+import { HTML5toTouch } from 'rdndmb-html5-to-touch';
 import { create } from 'jss';
 import rtl from 'jss-rtl';
 import createI18nInstance from '../i18n';

src/components/AppProviders.js

@@ -2,7 +2,6 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import Paper from '@material-ui/core/Paper';
-import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
 import WindowTopBar from '../containers/WindowTopBar';
 import PrimaryWindow from '../containers/PrimaryWindow';
@@ -35,24 +34,19 @@ export class Window extends Component {
    */
   wrappedTopBar() {
     const {
-      windowId, workspaceType, windowDraggable,
+      dragHandle, windowId, workspaceType, windowDraggable,
     } = this.props;
 
     const topBar = (
-      <div>
+      <div ref={dragHandle}>
         <WindowTopBar
           windowId={windowId}
           windowDraggable={windowDraggable}
+          dragHandle={dragHandle}
         />
         <IIIFAuthentication windowId={windowId} />
       </div>
     );
-    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,
@@ -138,6 +134,7 @@ Window.propTypes = {
 
 Window.defaultProps = {
   classes: {},
+  dragHandle: null,
   focusWindow: () => {},
   isFetching: false,
   label: null,

src/components/Window.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 <WorkspaceElastic />;
-      case 'mosaic':
-        return <WorkspaceMosaic />;
+      case 'grid':
+        return <WorkspaceGrid />;
       default:
         return windowIds.map(windowId => (
           <Window

src/components/Workspace.js

@@ -0,0 +1,48 @@
+import { Component, useContext, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { DndContext } from 'react-dnd';
+import { Grid, GridContext, GridDispatchContext } from 'mirador-mosaic';
+import Window from '../containers/Window';
+import { useDispatch } from 'react-redux'
+
+/**
+ * Represents a work area that contains any number of windows
+ * @memberof Workspace
+ * @private
+ */
+const WorkspaceGrid = ({ gridTemplate, windowIds }) => {
+  const dndContext = useContext(DndContext);
+  const dispatch = useDispatch();
+
+  const wrappedDispatch = useCallback((action) => {
+    dispatch({ ...action, type: `mirador/grid/${action.type}` });
+  }, [dispatch]);
+
+  return (
+    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+      <GridContext.Provider value={gridTemplate}>
+        <GridDispatchContext.Provider value={wrappedDispatch}>
+          <Grid dragAndDropManager={dndContext.dragDropManager}>
+            {
+              windowIds.map(windowId => (
+                <Window
+                  id={windowId}
+                  key={windowId}
+                  windowId={windowId}
+                />
+              ))
+            }
+          </Grid>
+        </GridDispatchContext.Provider>
+      </GridContext.Provider>
+    </div>
+  );
+}
+
+
+WorkspaceGrid.propTypes = {
+  gridTemplate: PropTypes.object,
+  windowIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default WorkspaceGrid;