Introduction:
SpinalGraph is a data schema for grouping together a set of informations and modeling the links between these informations. This data schema works on the "context" layer of the pyramid of informations.
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.
See https://material.io/tools/icons/?style=baseline for material icons
Name | Type | Default | Description |
---|---|---|---|
label | string | "notset" | 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 theses `class`, `in`, `src` |
buttonCfg.backgroundColor | string | "0000FF" | 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 :
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 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 parameter are in the table of introduction
- Return a promise. This promise have to be resolved and never reject.
- function executed on click
Register Application button
Now we have to register the app to a HookName.
Below you have a the list of HookName referenced by SpinalCom.
For example, there is 3 HookName example
- "circularMenu"
- "GraphManagerSideBar"
- "GraphManagerGlobalBar"
SpinalContextMenuService.registerApp(HookName, SpinalContextAppInstance)
Param | Type | Default |
---|---|---|
HookName | String | |
SpinalContextAppInstance | SpinalContextApp |
spinalContextMenuService.registerApp("myHookName", new SpinalContextAppTest());
Get your button list
Afterwards the apps get the list with the `getApps` methods
// 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 : []
All these function get the list of button with a HookName.
- Success
- filter
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
Hook : viewerBar