StarUML documentation
v6
v6
  • Introduction
  • User Guide
    • Introduction
    • Basic Concepts
    • Managing Project
    • Managing Diagrams
    • Diagram Editor
    • Editing Elements
    • Formatting Elements
    • Annotation Elements
    • Managing Extensions
    • User Interface
    • CLI (Command Line Interface)
    • Validation Rules
    • Keyboard Shortcuts
    • TouchBar (MacBook)
    • Customization
  • Working with UML Diagrams
    • Class Diagram
    • Package Diagram
    • Composite Structure Diagram
    • Object Diagram
    • Component Diagram
    • Deployment Diagram
    • Use Case Diagram
    • Sequence Diagram
    • Communication Diagram
    • Timing Diagram
    • Interaction Overview Diagram
    • Statechart Diagram
    • Activity Diagram
    • Information Flow Diagram
    • Profile Diagram
  • Working with SysML Diagrams
    • Requirement Diagram
    • Block Definition Diagram
    • Internal Block Diagram
    • Parametric Diagram
  • Working with Additional Diagrams
    • Entity-Relationship Diagram
    • Flowchart Diagram
    • Data Flow Diagram
    • C4 Diagram
    • BPMN Diagram
    • Mindmap Diagram
    • Wireframe Diagram
    • AWS Architecture Diagram
    • GCP Architecture Diagram
  • Developing Extensions
    • Getting Started
    • Commands
    • Menus
    • Keymaps
    • Toolbox
    • Accessing Elements
    • Creating, Deleting and Modifying Elements
    • Working with Selections
    • Defining Preferences
    • Using Dialogs
    • Registering to Extension Registry
Powered by GitBook
On this page
  • Tool Group
  • Tool Item
  • Command
  1. Developing Extensions

Toolbox

If you want to add your tool items in Toolbox, you need to define a toolbox JSON in your extension. The toolbox JSON files should be placed in toolbox/ folder in your extension.

my-extension/
└─ toolbox/
   └─ toolbox.json

Tool Group

The toolbox JSON defines an array of Tool Group definitions as below:

[
  {
    "label": "Tool Group 1",
    "id": "tool-group-1",
    "diagram-types": [ "UMLClassDiagram" ],
    "items": [
      {
        "label": "Tool Item 1",
        "id": "tool-item-1",
        "icon": "icon-UMLClass",
        "rubberband": "rect",
        "command": "my:add-element",
        "command-arg": {
          "id": "UMLClass",
          "stereotype": "my-stereotype"
        }
      },
      ...
    ]
  },
  ...
]
  • label : The tool group title shown in the Toolbox.

  • id : Unique identifier.

  • diagram-types : A list of diagram types. The tool group will be shown only when one of the diagram-types is active. (e.g. "UMLClassDiagram", "UMLUseCaseDiagram", ...)

  • items : A list of tool item definitions.

Tool Item

A tool item represents an element that users can create on a diagram.

  • label : The tool item title shown in the Toolbox

  • id : Unique identifier of the tool item.

  • icon : Icon CSS class name. You can specify already defined icon names (e.g. "icon-UMLClass", "icon-UMLPackage", ...) or your own CSS class name in stylesheets of your extension.

  • rubberband : A type of rubberband. One of "rect"(for sizable node-type elements), "line"(for edge-type elements), "point"(for fixed-size node-type elements).

  • command : A command name to be executed.

  • command-arg : An argument object will be passed to the command.

Command

Toolbox will pass options object to the command. The passed options parameter contains:

  • diagram : The active diagram.

  • id : The identifier of tool item.

  • x1, y1, x2, y2 : The user dragged area on the diagram.

  • ... : command-arg are combined.

main.js
function handleAddElement (options) {
  options = Object.assign(options, {
    'model-init': {
      'stereotype': options.stereotype
    },
    'view-init': {
      'stereotypeDisplay': 'icon',
      'suppressAttributes': true,
      'suppressOperations': true
    }
  })
  return app.factory.createModelAndView(options)
}

app.commands.register('my:add-element', handleAddElement)
PreviousKeymapsNextAccessing Elements

Last updated 1 year ago

A command used for tool item should create an element on a diagram. We strongly recommend to use app.factory.createModelAndView() function to create an element. See the for more detail.

section