#445 feat: Add ability to customize BigImageViewer toolbar

MetaCell · Dec 12, 2022 · 3230702 · 3230702
1 parent 952a04e
commit 3230702
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js b/geppetto-showcase/src/examples/big-image-viewer/BigImageViewerExample.js
@@ -11,15 +11,17 @@ const styles = {
   },
 };
 
-const data = 'https://s3.amazonaws.com/patient-hm-august-2017/Histology/HM_1243_FLIPPED_DZ_tif.dzi';
+// TODO: Update to a neuroscience example
+const data = 'https://raw.githubusercontent.com/openseadragon/openseadragon/a6792138814d1eff5ae4fca526b989fc917245be/test/data/wide.dzi';
 
 class BigImageViewerExample extends Component {
 
   render () {
     const { classes } = this.props;
     return (
       <div style={{ position: 'relative' }} className={classes.bigImageViewer}>
-        <BigImageViewer id="BigImageViewerContainer" data={data} />
+        <BigImageViewer id="BigImageViewerContainer" data={data}
+          toolbarOptions={{ innerDivStyles: { backgroundColor: 'rgb(0,0,0,0);' } }}/>
       </div>
     );
   }

diff --git a/geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js b/geppetto.js/geppetto-ui/src/big-image-viewer/BigImageViewer.js
@@ -131,12 +131,21 @@ class BigImageViewer extends Component {
   }
 
   render () {
-    const { classes } = this.props;
+    const { classes, toolbarOptions } = this.props;
     const customButtons = this.getCustomButtons();
+    const toolbar = toolbarOptions && toolbarOptions.instance ? (
+      <toolbarOptions.instance
+        buttons={customButtons}
+        {...toolbarOptions.props}
+      />
+    ) : <CustomToolbar buttons={customButtons} containerStyles={toolbarOptions?.containerStyles}
+      toolBarClassName={toolbarOptions?.toolBarClassName}
+      innerDivStyles={toolbarOptions?.innerDivStyles}
+      buttonStyles={toolbarOptions?.buttonStyles}/>;
 
     return (
       <div className={classes.bigImageViewerContainer}>
-        <CustomToolbar buttons={customButtons} />
+        {toolbar}
         <div
           id={this.props.id + '_component'}
           className={classes.bigImageViewerContent}
@@ -146,9 +155,7 @@ class BigImageViewer extends Component {
   }
 }
 
-BigImageViewer.defaultProps = {
-  settings: [],
-}
+BigImageViewer.defaultProps = { settings: [], toolbarOptions: null }
 
 BigImageViewer.propTypes = {
   /**
@@ -163,6 +170,35 @@ BigImageViewer.propTypes = {
    * All required and optional settings for instantiating a new instance of an OpenSeadragon image viewer
    */
   settings: PropTypes.array,
+  /**
+   * Options to customize the toolbar
+   */
+  toolbarOptions: PropTypes.shape({
+    /**
+     * Reference to toolbar component
+     */
+    instance: PropTypes.elementType,
+    /**
+     * Custom toolbar props
+     */
+    props: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the toolbar container
+     */
+    containerStyles: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the toolbar
+     */
+    toolBarClassName: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the inner div
+     */
+    innerDivStyles: PropTypes.shape({}),
+    /**
+     * Styles to be applied to the buttons
+     */
+    buttonStyles: PropTypes.shape({}),
+  }),
 };
 
 export default withStyles(styles)(BigImageViewer);