Merge pull request #497 from MetaCell/features/442_448

Features/442 448
MetaCell · Jun 30, 2023 · c4057d1 · c4057d1
2 parents 27cf035 + bfb5eac
commit c4057d1
Show file tree

Hide file tree

Showing 12 changed files with 228 additions and 108 deletions.
diff --git a/geppetto-showcase/src/App.js b/geppetto-showcase/src/App.js
@@ -22,8 +22,6 @@ export default class App extends Component {
         type: 'dark',
         primary: { main: orange[500] },
         secondary: { main: blue[500] },
-        button: { main: '#fc6320' },
-        toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
       },
     });
     theme = responsiveFontSizes(theme);

diff --git a/geppetto-showcase/src/components/showcase/Code.jsx b/geppetto-showcase/src/components/showcase/Code.jsx
@@ -15,7 +15,7 @@ const styles = theme => ({
   button: {
     padding: theme.spacing(1),
     top: theme.spacing(0),
-    color: theme.palette.button.main,
+    color: theme.palette.primary,
   },
   code: {
     paddingTop: theme.spacing(0),

diff --git a/geppetto-showcase/src/examples/3d-canvas/SimpleInstancesExample.js b/geppetto-showcase/src/examples/3d-canvas/SimpleInstancesExample.js
@@ -69,7 +69,7 @@ class SimpleInstancesExample extends Component {
         baseZoom: 1,
         cameraControls: {
           instance: CameraControls,
-          props: { wireframeButtonEnabled: false },
+          props: { wireframeButtonEnabled: false, buttonStyles: { color: '#ff0000', } },
         },
         initialFlip: ['y', 'z'],
         reset: false,
@@ -128,7 +128,7 @@ class SimpleInstancesExample extends Component {
     const captureOptions = {
       captureControls: {
         instance: CaptureControls,
-        props: {}
+        props: { buttonStyles: { color: '#0000ff', } }
       },
       recorderOptions: {
         mediaRecorderOptions: { mimeType: 'video/webm', },

diff --git a/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js b/geppetto-showcase/src/examples/connectivity-viewer/ConnectivityShowcaseForce.js
@@ -30,37 +30,48 @@ class ConnectivityShowcaseForce extends Component {
     )[0].getId();
   }
 
-  matrixHandler = () => {
-    console.warn('Mock call to SceneController')
-    console.trace()
-  }
+    matrixHandler = () => {
+      console.warn('Mock call to SceneController')
+      console.trace()
+    }
 
-  render () {
-    const data = Instances[0];
-    const layout = new Force();
-    const colors = ['#cb0000', '#003398'];
-    const names = ['pyramidals_48', 'baskets_12'];
-    const { classes } = this.props;
+    render () {
+      const data = Instances[0];
+      const layout = new Force();
+      const colors = ['#cb0000', '#003398'];
+      const themeColor = '#145365'
+      const names = ['pyramidals_48', 'baskets_12'];
+      const { classes } = this.props;
 
-    return (
-      <div className={classes.connectivity}>
-        <ConnectivityComponent
-          id="ConnectivityContainerForce"
-          data={data}
-          colors={colors}
-          names={names}
-          layout={layout}
-          modelFactory={ModelFactory}
-          resources={Resources}
-          matrixOnClickHandler={this.matrixHandler}
-          nodeType={null}
-          linkWeight={null}
-          linkType={this.linkType}
-          library={null}
-        />
-      </div>
-    );
-  }
+      return (
+        <div className={classes.connectivity}>
+          <ConnectivityComponent
+            id="ConnectivityContainerForce"
+            data={data}
+            colors={colors}
+            names={names}
+            layout={layout}
+            modelFactory={ModelFactory}
+            resources={Resources}
+            matrixOnClickHandler={this.matrixHandler}
+            nodeType={null}
+            linkWeight={null}
+            linkType={this.linkType}
+            library={null}
+            toolbarOptions={{
+              menuButtonStyles: { color: themeColor, },
+              deckStyles: { color: themeColor },
+              innerDivStyles: { backgroundColor: 'rgb(0,0,0,0);' },
+              buttonStyles: {
+                padding: 8,
+                top: 0,
+                color: themeColor
+              }
+            }}
+          />
+        </div>
+      );
+    }
 }
 
 export default withStyles(styles)(ConnectivityShowcaseForce);
diff --git a/geppetto.js/geppetto-ui/src/3d-canvas/Canvas.js b/geppetto.js/geppetto-ui/src/3d-canvas/Canvas.js
@@ -336,8 +336,8 @@ class Canvas extends Component {
       captureInstance = captureControls && captureControls.instance ? (
         <captureControls.instance
           ref={this.captureControlsRef}
-          captureControlsHandler={captureControlsHandler}
           {...captureControls.props}
+          captureControlsHandler={captureControlsHandler}
         />
       )
         : null;
@@ -348,8 +348,8 @@ class Canvas extends Component {
           {
             <cameraControls.instance
               ref={this.cameraControls}
-              cameraControlsHandler={cameraControlsHandler}
               {...cameraControls.props}
+              cameraControlsHandler={cameraControlsHandler}
             />
           }
           {captureInstance}
@@ -380,7 +380,7 @@ Canvas.defaultProps = {
     },
     cameraControls: {
       instance: CameraControls,
-      props: { wireframeButtonEnabled: false, },
+      props: { wireframeButtonEnabled: false, cameraControlsHandler: null, buttonStyles: { color: '#fc6320', }},
       incrementsPan: {
         x: 0.05,
         y: 0.05,
@@ -402,7 +402,7 @@ Canvas.defaultProps = {
   captureOptions: {
     captureControls: {
       instance: null,
-      props: {},
+      props: { captureControlsHandler: null, buttonStyles: { color: '#fc6320', }},
       incrementPan: {
         x: 0.01,
         y: 0.01
@@ -523,7 +523,20 @@ Canvas.propTypes = {
       /**
        * CameraControls props
        */
-      props: PropTypes.shape({ wireframeButtonEnabled: PropTypes.bool, }),
+      props: PropTypes.shape({
+          /**
+           * Boolean to enable/disable wireframe button
+           */
+          wireframeButtonEnabled: PropTypes.bool,
+          /**
+           * Function to callback on camera controls changes
+           */
+          cameraControlsHandler: PropTypes.func,
+          /**
+           * Styles to apply on the icon button elements
+           */
+          buttonStyles: PropTypes.any
+      }),
       /**
        * Value for pan increment
        */
@@ -582,7 +595,16 @@ Canvas.propTypes = {
       /**
        * Component props
        */
-      props: PropTypes.shape({})
+      props: PropTypes.shape({
+          /**
+           * Styles to apply on the icon button elements
+           */
+          buttonStyles: PropTypes.any,
+          /**
+           * Function to callback on capture controls changes
+           */
+          captureControlsHandler: PropTypes.func,
+      })
     }),
     /**
      * Recorder Options

diff --git a/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js b/geppetto.js/geppetto-ui/src/camera-controls/CameraControls.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import IconButtonWithTooltip from '../common/IconButtonWithTooltip';
-import { withStyles } from '@material-ui/core';
 import {
   faChevronLeft,
   faChevronUp,
@@ -35,7 +34,6 @@ export const cameraControlsActions = {
   WIREFRAME: 'wireframe',
 };
 
-const styles = theme => ({ button: { color: theme.palette.button.main, }, });
 
 class CameraControls extends Component {
   constructor (props) {
@@ -44,9 +42,9 @@ class CameraControls extends Component {
 
   render () {
     const {
-      classes,
       cameraControlsHandler,
       wireframeButtonEnabled,
+      buttonStyles
     } = this.props;
     const buttons = [
       {
@@ -143,14 +141,20 @@ class CameraControls extends Component {
         icon: null,
       });
     }
+
+    const defaultButtonStyles = { color: '#fc6320', }
+    const iconButtonStyles = buttonStyles ? buttonStyles : defaultButtonStyles
+
+
     return (
       <div className="position-toolbar">
         {buttons.map((value, index) => (
           <IconButtonWithTooltip
             key={index}
             disabled={false}
             onClick={() => cameraControlsHandler(value.action)}
-            className={`${classes.button} ${value.className} squareB`}
+            className={`${value.className} squareB`}
+            style={iconButtonStyles}
             tooltip={value.tooltip}
             icon={value.icon}
           />
@@ -172,6 +176,11 @@ CameraControls.propTypes = {
    * Boolean to enable/disable wireframe button
    */
   wireframeButtonEnabled: PropTypes.bool,
+
+  /**
+   * Styles to apply on the icon button elements
+   */
+  buttonStyles: PropTypes.any,
 };
 
-export default withStyles(styles)(CameraControls);
+export default CameraControls;
diff --git a/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js b/geppetto.js/geppetto-ui/src/capture-controls/CaptureControls.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import IconButtonWithTooltip from '../common/IconButtonWithTooltip';
-import { withStyles } from '@material-ui/core';
 import { faCamera, faDotCircle, faDownload, faStop } from '@fortawesome/free-solid-svg-icons';
 
 import './CaptureControls.less';
@@ -29,8 +28,6 @@ export const captureControlsActionsDownloadScreenshot = (filename => ({
 }));
 
 
-const styles = theme => ({ button: { color: theme.palette.button.main, }, });
-
 class CaptureControls extends Component {
   constructor (props) {
     super(props);
@@ -49,14 +46,18 @@ class CaptureControls extends Component {
   }
 
   render () {
-    const { classes, captureControlsHandler } = this.props;
+    const { buttonStyles, captureControlsHandler } = this.props;
     const { isRecording, hasRecorded } = this.state;
 
+    const defaultButtonStyles = { color: '#fc6320', }
+    const iconButtonStyles = buttonStyles ? buttonStyles : defaultButtonStyles
+
     const recordButton = !isRecording ? (
       <IconButtonWithTooltip
         disabled={false}
         onClick={this.handleClickRecord}
-        className={`${classes.button} start squareB`}
+        className={`start squareB`}
+        style={iconButtonStyles}
         tooltip={"Start Recording"}
         icon={faDotCircle}
       />
@@ -65,7 +66,8 @@ class CaptureControls extends Component {
         <IconButtonWithTooltip
           disabled={false}
           onClick={this.handleClickRecord}
-          className={`${classes.button} stop squareB`}
+          className={`stop squareB`}
+          style={iconButtonStyles}
           tooltip={"Stop recording"}
           icon={faStop}
         />
@@ -78,14 +80,16 @@ class CaptureControls extends Component {
         && <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadVideo())}
-          className={`${classes.button} download squareB`}
+          className={`download squareB`}
+          style={iconButtonStyles}
           tooltip={"Download"}
           icon={faDownload}/>
         }
         <IconButtonWithTooltip
           disabled={false}
           onClick={() => captureControlsHandler(captureControlsActionsDownloadScreenshot())}
-          className={`${classes.button} screenshot squareB`}
+          className={`screenshot squareB`}
+          style={iconButtonStyles}
           tooltip={"Screenshot"}
           icon={faCamera}/>
       </div>
@@ -100,7 +104,11 @@ CaptureControls.propTypes = {
    * Function to callback on capture controls changes
    */
   captureControlsHandler: PropTypes.func.isRequired,
+  /**
+   * Styles to apply on the icon button elements
+   */
+  buttonStyles: PropTypes.any,
 
 };
 
-export default withStyles(styles)(CaptureControls);
+export default CaptureControls;
diff --git a/geppetto.js/geppetto-ui/src/common/CustomToolbar.js b/geppetto.js/geppetto-ui/src/common/CustomToolbar.js
@@ -18,15 +18,17 @@ class CustomToolbar extends Component {
 
   render () {
     const { classes, theme, buttons, elements, containerStyles, toolBarClassName, innerDivStyles, buttonStyles } = this.props;
+    const defaultButtonColor = '#fc6320'
+    const defaultBackgroundColor = 'rgb(0,0,0,0.5)'
     const customButtons = buttons ? buttons : [];
     const customElements = elements ? elements : [];
     const cStyles = containerStyles != null ? containerStyles : {}
     const tbClassName = toolBarClassName != null ? toolBarClassName : classes.toolbar
-    const dStyles = innerDivStyles != null ? innerDivStyles : { backgroundColor: theme.palette.toolbarBackground.main }
+    const dStyles = innerDivStyles != null ? innerDivStyles : { backgroundColor: defaultBackgroundColor }
     const bStyles = buttonStyles != null ? buttonStyles : {
       padding: theme.spacing(1),
       top: theme.spacing(0),
-      color: theme.palette.button.main
+      color: defaultButtonColor
     }
     return (
         <div style={cStyles}>