#448 feat: Allow toolbar customization on connectivity component

MetaCell · Dec 28, 2022 · e540f0f · e540f0f
1 parent 6d50266
commit e540f0f
Show file tree

Hide file tree

Showing 4 changed files with 327 additions and 278 deletions.
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);