Introduction:

SpinalGraph is a data schema for grouping together a set of informations information and modeling the links between these informations. This data schema works on the "context" layer of the pyramid of informationsinformation.

To get more information about SpinalGraph data architecture, please read SpinalGraph 0.2 Model description.

c'est un service qui permet d'enrengistrer sous forme d'applications des boutons en fonction de mot clé.

Avec les mots clés, les interfaces retrouvent/récupère les boutons associés aux applications. 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

Usage:

To use the Spinal Context Menu Service, you must :

• Install :

npm install --save https://github.com/spinalcom/spinal-env-viewer-context-menu-service.git

• Import and instantiate

const {
  spinalContextMenuService,
  SpinalContextApp
} = require("spinal-env-viewer-context-menu-service");


// 1 Extends
the class `SpinalContextApp` and define custom `isShown` and `action` methods.
class SpinalContextAppTest extends SpinalContextApp {
  constructor() {
// 2 testLabel : tooltip of the button  
//   test description : description of the button. it will be an
evolution of the tooltip. 
    super("testlabel", "test description", {
//3
button config       icon: "add",
      icon_type: "in",
      backgroundColor: "000000",
      fontColor: "FFFFFF"
    });
  }
//4 fonction to open panel.3
  isShown(option) {
    if (option.testsFail === true) return Promise.resolve(-1);
    return Promise.resolve(true);
  }
//4
  action(option) {
    console.log("action clicked");
  }
}

1. Extends the class `SpinalContextApp` and define custom `isShown` and `action` methods.
2. Call the constructor of 'SpinalContextApp' with super, with the following parameters
   1. Button's tooltip/label
   2. Button's description
   3. ... other parameters are in the table in the introduction
3. Return a promise. This promise has to be resolved and never reject.
4. 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"
• "GraphManagerTopBar"

SpinalContextMenuService.registerApp(HookName, SpinalContextAppInstance)

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.

// 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
  }

API:

CircularMenu

Hook : circularMenu

Pour ajouter une fonction dans le circular menu il faut réaliser l'ensemble de cette procedure.

SideBar Graph Manager

Hook : sideBar

GlobalBar Graph Manager

Hook : globalBar

ViewerBar

)
  .then(console.log.bind(null, "test2 :"));
// test2 : []

1. Exemple 1: The app SpinalContextAppTest in the array returned.
2. 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

TopBar Graph Manager

HookName : GraphManagerTopBar

ViewerBar

HookName : viewerBar