Home

Integration of geppetto-ui

1. Need to configure a theme because some components rely on it.

Example

let theme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: { main: orange[500] },
    secondary: { main: blue[500] },
    button: { main: '#fc6320' },
    toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
  },
});

...
<MuiThemeProvider theme={theme}>
  <App />
</MuiThemeProvider>
...

2. Some components rely on geppetto-core's model functionality. In order to use them you have to initialize the GEPPETTO global script.

export const initGeppetto = () => {
  window.GEPPETTO = {};
  const GEPPETTO = window.GEPPETTO;

  GEPPETTO.Resources = require('@metacell/geppetto-meta-core/Resources').default;
  require('@metacell/geppetto-meta-client/pages/geppetto/GEPPETTO.Events').default(
    GEPPETTO
  );

  const Manager = require('@metacell/geppetto-meta-client/common/Manager').default;
  GEPPETTO.Manager = new Manager();

  GEPPETTO.Utility = {};
  GEPPETTO.Utility.extractMethodsFromObject = () => [];
  GEPPETTO.trigger = evt => console.log(evt, 'triggered');

  console.warn = () => null;
  GEPPETTO.CommandController = {
    log: console.log,
    createTags: (a, b) => null,
  };
  GEPPETTO.ComponentFactory = { addExistingComponent: console.log, };
  GEPPETTO.on = console.log;
  GEPPETTO.off = console.log;
}

Integration of geppetto-client

This is about using the LayoutManager + FlexLayout + Redux.

FlexLayout

Layout structure

• The root node must have id "root"

Import/Export Session

• Only supported for Class Component that implement the WidgetComponent interface