Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of contents

Table of Contents
exclude.*Table of contents|.*Quick navigation

Quick navigation

Child pages (Children Display)
alltrue
pageUtilities & predifined organs


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.


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

NameTypeDefaultDescription
labelstring"notset"short name to be shown in the application
descriptionstring
description of what the Application button do
buttonCfgObject
Object configuration of the Application button
buttonCfg.iconstring"tab"can be a font-awsome or material icon string
buttonCfg.icon_typestring"in"Where to place the icon in the `md-icon`. Should be one of theses `class`, `in`, `src`
buttonCfg.backgroundColorstring"0000FF"backgroud color of the button
buttonCfg.fontColorstring"FFFFFF"font color of the button
badgeCfgObject
Object configuration of the Application button badge
badgeCfg.labelstring
string shown in a badge; if empty it's not shown
badgeCfg.backgroundColorstring"FF0000"backgroud color of the badge
badgeCfg.fontColorstring"FFFFFF"font color of the badge


Usage:

To use the Spinal Context Menu Service, you must :

  • Install :


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


  • Import and instantiate

Code Block
titleImport 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");
  }
}
  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 parameter are in the table of introduction
  3. Return a promise. This promise have to be resolved and never reject.
  4. 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)

ParamTypeDefault
HookName String
SpinalContextAppInstanceSpinalContextApp


Code Block
languagejs
titleregisterApp
linenumberstrue
spinalContextMenuService.registerApp("myHookName", new SpinalContextAppTest());



Get your buttons list

Afterwards interfaces of apps get the buttons list with `getApps` methods.

The getApps function call 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
languagejs
linenumberstrue
// 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 : []
  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

GlobalBar Graph Manager

HookName : GraphManagerGlobalBar

ViewerBar

HookName : viewerBar