Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 8 Next »

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

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 :

Installation
npm install --save https://github.com/spinalcom/spinal-env-viewer-context-menu-service.git
  • Import and instantiate

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.
  isShown(option) {
    if (option.testsFail === true) return Promise.resolve(-1);
    return Promise.resolve(true);
  }
//5 fonction executed after click
  action(option) {
    console.log("action clicked");
  }
}

Now we have to register the app to a  HookName.

Below you have a the list of HookName.

For example, there is 3 HookName example

  • "circularMenu"
  • "GraphManagerSideBar"
  • "GraphManagerGlobalBar"

registerApp("myHookName", new SpinalContextAppTest())

ParamTypeDefaultElement
type StringSpinalGraphdefault SpinalGraph
elementSpinalNodeModelElement of the node
spinalContextMenuService.registerApp("myHookName", new SpinalContextAppTest());

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


  • No labels