Settings

import { Viewer } from '@stereograph/teiaviewer';
import { useSetting } from '@stereograph/teiaviewer-viewport-react';

// The config overrides the defaults; only the values changed are saved, under this key.
const viewer = new Viewer(
  {
    engine: {
      meshes: {
        selectionColor: 0xfabd38,
      },
    },
    helpers: {
      showGrid: false,
    },
  },
  {
    settingsStorageKey: 'MyAppSettings',
  },
);

// The engine's settings (rendering, meshes, lighting) are under `settings.engine`.
viewer.settings.engine.renderer.background.value = 0x20232a;

// Each setting tells its changes.
viewer.settings.helpers.showGrid.onChange.connect((shown) => {
  console.info(`Grid ${shown ? 'shown' : 'hidden'}`);
});

/** A button showing or hiding the grid: rendered again when the setting changes, from anywhere. */
export const GridToggle = () => {
  const [showGrid, setShowGrid] = useSetting(viewer.settings.helpers.showGrid);

  return (
    <button onClick={() => setShowGrid(!showGrid)}>
      {showGrid ? 'Hide the grid' : 'Show the grid'}
    </button>
  );
};