diff --git a/geppetto-showcase/src/App.js b/geppetto-showcase/src/App.js
index 1dec4f9d5..f99f0e39f 100644
--- a/geppetto-showcase/src/App.js
+++ b/geppetto-showcase/src/App.js
@@ -25,6 +25,20 @@ export default class App extends Component {
button: { main: '#fc6320' },
toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
},
+ overrides: {
+ MuiListItemIcon: {
+ root: {
+ '& i.my-svg-icon': {
+ backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.32911 13.2291L3.85411 9.75414L2.67078 10.9291L7.32911 15.5875L17.3291 5.58748L16.1541 4.41248L7.32911 13.2291Z' fill='%23D6D5D7'/%3E%3C/svg%3E");`,
+ display: 'inline-block',
+ width: '16px',
+ height: '12px',
+ backgroundSize: 'contain',
+ backgroundRepeat: 'no-repeat'
+ }
+ }
+ }
+ }
});
theme = responsiveFontSizes(theme);
diff --git a/geppetto-showcase/src/examples/menu/menuConfiguration.js b/geppetto-showcase/src/examples/menu/menuConfiguration.js
index a167e5195..3bf2eddd1 100644
--- a/geppetto-showcase/src/examples/menu/menuConfiguration.js
+++ b/geppetto-showcase/src/examples/menu/menuConfiguration.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
const toolbarMenu = {
global: {
buttonsStyle: {
@@ -122,7 +124,17 @@ const toolbarMenu = {
},
},
{
- label: 'Feedback',
+ label: (
+ <>
+
+ Feedback
+
+
+ ),
icon: '',
action: {
handlerAction: 'clickFeedback',
@@ -131,7 +143,7 @@ const toolbarMenu = {
},
{
label: 'Social media',
- icon: '',
+ icon: 'my-svg-icon',
position: 'right-start',
action: {
handlerAction: 'submenu',
diff --git a/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js b/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
index 213b62031..4f718364b 100644
--- a/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
+++ b/geppetto.js/geppetto-ui/src/3d-canvas/threeDEngine/ThreeDEngine.js
@@ -245,85 +245,82 @@ export default class ThreeDEngine {
/ this.renderer.domElement.width
) * 2 - 1;
- if (event.button === 0) {
- // only for left click
- if (this.pickingEnabled) {
- const intersects = this.getIntersectedObjects();
-
- if (intersects.length > 0) {
- // sort intersects
- const compare = function (a, b) {
- if (a.distance < b.distance) {
- return -1;
- }
- if (a.distance > b.distance) {
- return 1;
- }
- return 0;
+ if (this.pickingEnabled) {
+ const intersects = this.getIntersectedObjects();
+
+ if (intersects.length > 0) {
+ // sort intersects
+ const compare = function (a, b) {
+ if (a.distance < b.distance) {
+ return -1;
}
- intersects.sort(compare);
+ if (a.distance > b.distance) {
+ return 1;
+ }
+ return 0;
}
+ intersects.sort(compare);
+ }
- let selectedMap = {};
- // Iterate and get the first visible item (they are now ordered by proximity)
- for (let i = 0; i < intersects.length; i++) {
- // figure out if the entity is visible
- let instancePath = '';
- let externalMeshId = null;
- let geometryIdentifier = '';
- if (
- Object.prototype.hasOwnProperty.call(
- intersects[i].object,
- 'instancePath'
- )
- ) {
- instancePath = intersects[i].object.instancePath;
- geometryIdentifier
- = intersects[i].object.geometryIdentifier;
- } else if (Object.prototype.hasOwnProperty.call(
- intersects[i].object.parent,
- 'instancePath'
- )) {
- instancePath = intersects[i].object.parent.instancePath;
- geometryIdentifier
- = intersects[i].object.parent.geometryIdentifier;
- }
- else {
- externalMeshId = intersects[i].object.uuid
- geometryIdentifier = null
- }
+ let selectedMap = {};
+ // Iterate and get the first visible item (they are now ordered by proximity)
+ for (let i = 0; i < intersects.length; i++) {
+ // figure out if the entity is visible
+ let instancePath = '';
+ let externalMeshId = null;
+ let geometryIdentifier = '';
+ if (
+ Object.prototype.hasOwnProperty.call(
+ intersects[i].object,
+ 'instancePath'
+ )
+ ) {
+ instancePath = intersects[i].object.instancePath;
+ geometryIdentifier
+ = intersects[i].object.geometryIdentifier;
+ } else if (Object.prototype.hasOwnProperty.call(
+ intersects[i].object.parent,
+ 'instancePath'
+ )) {
+ instancePath = intersects[i].object.parent.instancePath;
+ geometryIdentifier
+ = intersects[i].object.parent.geometryIdentifier;
+ }
+ else {
+ externalMeshId = intersects[i].object.uuid
+ geometryIdentifier = null
+ }
- if (
- (instancePath != null
- && Object.prototype.hasOwnProperty.call(
- this.meshFactory.meshes,
- instancePath
- ))
- || Object.prototype.hasOwnProperty.call(
- this.meshFactory.splitMeshes,
- instancePath
- )
- ) {
- if (!(instancePath in selectedMap)) {
- selectedMap[instancePath] = {
- ...intersects[i],
- geometryIdentifier: geometryIdentifier,
- distanceIndex: i,
- };
- }
+ if (
+ (instancePath != null
+ && Object.prototype.hasOwnProperty.call(
+ this.meshFactory.meshes,
+ instancePath
+ ))
+ || Object.prototype.hasOwnProperty.call(
+ this.meshFactory.splitMeshes,
+ instancePath
+ )
+ ) {
+ if (!(instancePath in selectedMap)) {
+ selectedMap[instancePath] = {
+ ...intersects[i],
+ geometryIdentifier: geometryIdentifier,
+ distanceIndex: i,
+ };
}
- if (externalMeshId != null) {
- if (!(externalMeshId in selectedMap)) {
- selectedMap[externalMeshId] = {
- ...intersects[i],
- distanceIndex: i,
- };
- }
+ }
+ if (externalMeshId != null) {
+ if (!(externalMeshId in selectedMap)) {
+ selectedMap[externalMeshId] = {
+ ...intersects[i],
+ distanceIndex: i,
+ };
}
}
- this.requestFrame();
- this.onSelection(this.selectionStrategy(selectedMap))
}
+ this.requestFrame();
+ this.onSelection(this.selectionStrategy(selectedMap), event)
}
}
}
diff --git a/geppetto.js/geppetto-ui/src/list-viewer/utils/Griddle.js b/geppetto.js/geppetto-ui/src/list-viewer/utils/Griddle.js
index 58b873a39..6cb566e76 100644
--- a/geppetto.js/geppetto-ui/src/list-viewer/utils/Griddle.js
+++ b/geppetto.js/geppetto-ui/src/list-viewer/utils/Griddle.js
@@ -6,6 +6,7 @@ import {
} from 'redux';
import Griddle, { plugins } from 'griddle-react';
+import init from 'griddle-react/dist/module/utils/initializer';
const { CorePlugin: corePlugin } = plugins