Introduction:
SpinalGraph is a data schema for grouping together a set of information and modeling the links between these informations. This data schema works on the "context" layer of the pyramid of information.
To get more information about SpinalGraph data architecture, please read /wiki/spaces/SIS/pages/174293044SpinalGraph 0.2 Model description.
It is a service that allows you to save buttons according to keywords (HookName) as applications.
Interfaces get buttons associated to a HookName
See https://material.io/tools/icons/?style=baseline for material icons
Name | Type | Default | Description |
---|---|---|---|
label | string | "notset" | a short name to be shown in the application |
description | string | description of what the Application button do | |
buttonCfg | Object | Object configuration of the Application button | |
buttonCfg.icon | string | "tab" | can be a font-awsome or material icon string |
buttonCfg.icon_type | string | "in" | Where to place the icon in the `md-icon`. Should be one of these `class`, `in`, `src` |
buttonCfg.backgroundColor | string | "0000FF" | the backgroud color of the button |
buttonCfg.fontColor | string | "FFFFFF" | font color of the button |
badgeCfg | Object | Object configuration of the Application button badge | |
badgeCfg.label | string | string shown in a badge; if empty it's not shown | |
badgeCfg.backgroundColor | string | "FF0000" | backgroud color of the badge |
badgeCfg.fontColor | string | "FFFFFF" | font color of the badge |
Usage:
To use the Spinal Context Menu Service, you must :
Install :
Code Block | ||||
---|---|---|---|---|
| ||||
npm install --save https://github.com/spinalcom/spinal-env-viewer-context-menu-service.git |
Import and instantiate
Code Block | ||
---|---|---|
| ||
const { spinalContextMenuService, SpinalContextApp } = require("spinal-env-viewer-context-menu-service"); // 1 class SpinalContextAppTest extends SpinalContextApp { constructor() { // 2 super("testlabel", "test description", { icon: "add", icon_type: "in", backgroundColor: "000000", fontColor: "FFFFFF" }); } //3 isShown(option) { if (option.testsFail === true) return Promise.resolve(-1); return Promise.resolve(true); } //4 action(option) { console.log("action clicked"); } } |
- Extends the class `SpinalContextApp` and define custom `isShown` and `action` methods.
- Call the constructor of 'SpinalContextApp' with super, with the following parameters
- Button's tooltip/label
- Button's description
- ... other parameters are in the table in the introduction
- Return a promise. This promise has to be resolved and never reject.
- the function executed on click
Register Application button
Now we have to register the app to a HookName.
Below you have the list of HookName referenced by SpinalCom.
For example, there is 3 HookName example
- "circularMenu"
- "GraphManagerSideBar"
- "GraphManagerGlobalBarGraphManagerTopBar"
SpinalContextMenuService.registerApp(HookName, SpinalContextAppInstance)
Param | Type | Default |
---|---|---|
HookName | String |
|
SpinalContextAppInstance | SpinalContextApp |
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
spinalContextMenuService.registerApp("myHookName", new SpinalContextAppTest()); |
Get your buttons list
Afterwards, interfaces of apps get the buttons list with `getApps` methods.
The getApps function calls the method "isShown" of all the Application registered in the HookName.
If the Promise is resolved with -1 the application is not shown.
Code Block | ||||
---|---|---|---|---|
| ||||
// 1 spinalContextMenuService .getApps("myHookName", { testsFail: false }) .then(console.log.bind(null, "test1 :")); // test1 : [ SpinalContextAppTest { // label: 'testlabel', // description: 'test description', // buttonCfg: // { icon: 'add', // icon_type: 'in', // backgroundColor: '000000', // fontColor: 'FFFFFF' }, // badgeCfg: // { label: '', backgroundColor: 'FF0000', fontColor: 'FFFFFF' } } ] // 2 spinalContextMenuService .getApps("myHookName", { testsFail: true }) .then(console.log.bind(null, "test2 :")); // test2 : [] |
- Exemple 1: The app SpinalContextAppTest in the array returned.
- Exemple 2 : The Method SpinalContextAppTest.isShown(...) is resolved with -1. So SpinalContextAppTest is not present in the returned array.
CircularMenu
HookName : circularMenu
SideBar Graph Manager
HookName : GraphManagerSideBar
GlobalBarTopBar Graph Manager
HookName : GraphManagerGlobalBarGraphManagerTopBar
ViewerBar
HookName : viewerBar