diff --git a/docs/latest/assets/img/extensions-panel.gif b/docs/latest/assets/img/extensions-panel.gif new file mode 100644 index 000000000..fd173bd70 Binary files /dev/null and b/docs/latest/assets/img/extensions-panel.gif differ diff --git a/docs/latest/extensions/modules/panel.md b/docs/latest/extensions/modules/panel.md index 77de01541..2b7ef7ac2 100644 --- a/docs/latest/extensions/modules/panel.md +++ b/docs/latest/extensions/modules/panel.md @@ -1,6 +1,19 @@ # Module: Panel -... +The panel module provides the ability to define `menuOptions` and `components` +that can be used by the consuming application. `components` are React Components +that can be displayed in the consuming application's "Panel" Component. + +![Panel Extension](../assets/img/extensions-panel.gif) + +
A panel extension example
+ +The `menuOptions`'s `target` key points to a registered `components`'s `id`. A +`defaultContext` is applied to all `menuOption`s; however, each `menuOption` can +optional provide it's own `context` value. + +The `getPanelModule` receives an object containing the `ExtensionManager`'s +associated `ServicesManager` and `CommandsManager`. ```js import MyComponent from './MyComponent.js'; @@ -10,15 +23,24 @@ export default { /** * @param {object} params - * @param {object} params.servicesManager + * @param {ServicesManager} params.servicesManager + * @param {CommandsManager} params.commandsManager */ - getPanelModule({ servicesManager }) { + getPanelModule({ servicesManager, commandsManager }) { return { menuOptions: [ { + // A suggested icon + // Available icons determined by consuming app icon: 'list', + // A suggested label label: 'Magic', + // 'right' or 'left' + from: 'right', + // The target component to toggle open/close target: 'target-component-id', + // Overrides `defaultContext`, if specified + context: ['ACTIVE_VIEWPORT:MAGIC'], }, ], components: [ @@ -27,7 +49,7 @@ export default { component: MyComponent, }, ], - defaultContext: ['VIEWER'], + defaultContext: ['ROUTE:VIEWER'], }; }, };