Effector 6.3 developer manual

XML reference 6.3

Effector Studio 6.3 summary

Effector Studio 6.3 manual

Effector 6.2 developer manual

XML reference 6.0

Effector Studio 3.2 summary

Effector Studio 3.2 manual

GraphDisplay

The GraphDisplay type of view is used basically to display Effector cards in a graph-like fashion. Unlike in other cases, the configuration of this display needs two DataDefinitions for an easier description of the relationships among cards. One of the DataDefinitions defines the data needed to display the cards, while the other describes the connections.

The files are located in the GraphDisplay directory of the XML package and they mandatorily start with GD.

Available functions

  • Display of graphs using Effector cards
  • Zoom out/zoom in
  • Workspace movement
  • Snap-to-grid

Configuration of cards

The appearance of the cards can be set with the \GraphDisplay\Element\TemplateURL node. The value of the node is the path to the HTML template that defines the cards. Here it is not possible to use the old CardViewHTML based (direct) card definition.

For a more flexible parametrization in the template, the current level of magnification can be reached by a card.scale reference.

Example

project_card.html

<div class="event" style="height:100%; background-color: #fff;border: 2px solid #ccd; padding: 4px 6px;">
    <a chainlistnode='Description' ng-if="card.scale>0.5">{{card.data.Description}}</a>
</div>

More information about the CardTemplateURL can be found on the Tables and ControPanel Controls / CardView TemplateURL page.

The data pertaining to the cards can be defined by the DataDefinition referenced in the GraphDisplay/Element/DataDefinition node. The GraphDisplay/Element/IDColumn node indicates the name of the column that is used as a unique identifier. This setting is mandatory.

Position

The size and position of the cards can be also defined with this DDO. The columns to be interpreted as positions can be given in the GraphDisplay/Element/PositionXColumn (according to horizontal coordinates) and the GraphDisplay/Element/PositionYColumn (according to vertical coordinates) nodes.

Size

The size of cards is regulated by the columns given in the GraphDisplay/Element/WidthColumn and the GraphDisplay/Element/HeightColumn nodes, which define the width and the height respectively.

Configuration of arrows (connections)

The data pertaining to the arrows is provided by the DataDefinition given in the GraphDisplay/Connection/DataDefinition node, based on a one row one arrow arrangement.

This DataDefiniton must contain two columns, that define the cards at the two ends of the arrow. The column in the GraphDisplay/Connection/SourceIDColumn node defines the source of the arrow while the column in the \GraphDisplay\Link\TargetIDColumn node defines the end of the arrow.

With this, we are referencing the values contained by the card identifying column, that has been set in the GraphDisplay/Element/IDColumn node.

Arrow caption

Optionally we can add a caption to the arrows using the columns given in the GraphDisplay/Connection/LabelTextColumn and the GraphDisplay/Connection/LabelPositionColumn nodes. The first determines the caption, while the second determines the position of the caption in percentage of the arrow’s size.

Zoom

The zoom settings can be specified in the GraphDisplay/ScaleSettings node.

It is possible to set the maximum zoom value (GraphDisplay/ScaleSettings), the minimum zoom value (GraphDisplay/ScaleSettings/Min), the step size ((GraphDisplay/ScaleSettings/Step), and the default zoom value (GraphDisplay/ScaleSettings/Default).

Snap-to-grid

The movement unit of the cards can be set by the GraphDisplay/GridSize node.

ControlPanel Control, Link

The ControlPanel Control and the Link functions are the same as the operation realized on the “DisplayDefinition”. For more on this, please refer to DisplayDefinition and ControlPanel Control types.

Developing unique display logic

Attention! The next part assumes familiarity with basic AngularJS (1) knowledge.

A unique Angular View can be given with the GraphDisplay/TemplateURL node. This can be used to supplement the client side of the display.

Controller Inheritance

Our unique controllers – in order to preserve the basic functions provided by the platform – need to be initialized with a special method that loads the controller originally used by the platform as well (EffectorGraphDisplayCtrl). This can be done with the $controller service, by the transferring the dependencies of the controller.

// loading of parent control
$controller('EffectorGraphDisplayCtrl', {
    $scope: $scope,
    $q: $q, 
    $rootScope: $rootScope, 
    $location: $location, 
    $timeout: $timeout, 
    effectorCoreService: effectorCoreService, 
    EffectorCoreFilter: EffectorCoreFilter, 
    effectorCoreEnums: effectorCoreEnums, 
    GraphDisplayCoreService: GraphDisplayCoreService, 
    effectorDGVCService: effectorDGVCService, 
    effectorCoreRuleValue: effectorCoreRuleValue, 
    bootboxFactory: bootboxFactory, 
    effectorPSearchesService: effectorPSearchesService, 
    effectorCoreBusService: effectorCoreBusService, 
    effectorViewmenuService: effectorViewmenuService, 
    cacheFactory: cacheFactory, 
    $compile: $compile, 
    $interval: $interval
});

Built in events – exit points

The display provides the possibility to add a unique logic at the most important points using the $scope events. These events are the following:

  • GRAPHDISPLAY:BEFORE_ELEMENTS_CREATED

    Runs directly before the generation of card view objects. Special care needs to be taken because the cards and connections given in the parameters are not preprocessed (they go straight to the display layer). (For example, our unique code is needed to ensure that the size of the snap-to-grid is considered. The currently configured size can be found in the $scope.gridSize variable.)

    Event parameters

    • data.ElementsToRender: Array - array containing the cards to be displayed
    • data.LinksToRender: Array - array containing the arrows to be displayed
  • GRAPHDISPLAY:ELEMENT_CREATED

    Runs directly after generating the card view object (card by card). Here the generated JOINTJS object (card) can be set.

    Event Parameters

    -data.JointElement: effector.effectorElementBase the card object that has been created. (Already added to the cards to be displayed.)

    • data.ElementsToRender: Array - array containing the cards to be displayed
    • data.LinksToRender: Array - array containing the arrows to be displayed
  • GRAPHDISPLAY:BEFORE_LINKS_CREATED

    The LinksToRender list doesn`t contain anymore the arrows that point to a non-existing card.

    Event parameters

    • data.ElementsToRender: Array - array containing the cards to be displayed
    • data.LinksToRender: Array - array containing the arrows to be displayed. Here the arrows are still in the dataset form received from the server, whose DDORecord attribute contains the relevant DataDefinition` row.
  • GRAPHDISPLAY:LINK_CREATED

    Runs directly after generating the arrow view object (arrow by arrow). Here it is possible to set the generated JOINTJS arrow.

    *Event Parameters

    -data.JointLink: effector.effectorLinkBase the arrow object that has been created. (Already added to the arrows to be displayed.)

    • data.ElementsToRender: Array - array containing the cards to be displayed
    • data.LinksToRender: Array - array containing the arrows to be displayed
  • GRAPHDISPLAY:BEFORE_RENDER

    Runs directly before rendering. (Before the created card and the arrow view-objects get transferred to the display layer)

    Event parameters

    data.ElementsToRender: Array -Array containg the cards to be displayed

    • data.LinksToRender: Array - Array containing the arrows to be displayed.
  • GRAPHDISPLAY:AFTER_RENDER

    Runs after rendering. At this point the created objects have all been transferred to the display layer.

    Event parameters

    -data.ElementsToRender: Array -Array containing the cards to be displayed

    • data.LinksToRender: Array - Array containing the arrows to be displayed.

      Example

      $scope.$on("GRAPHDISPLAY:ELEMENT_CREATED", function (event, data) {

        var JointElement = data.JointElement,
        LinksToRender = data.LinksToRender,
        StepsToRender = data.ElementsToRender;
      
        /* Unique logic here..*/
      

      }

Creating cards and arrows from unique code

In the unique code, if we need to dynamically create more arrows/cards in addition to those defined in DataDefinition, it is suggested to use the built-in methods used by the platform. These are the following:

  • GraphDisplayCoreService.CreateElement(item, scope): effector.effectorElementBase

    Here item is a JSON object with a { position: {x: <x>, y: <y>}, DDORecord: <DDORecord>} form.

The value of the scope parameter is always the scope of the controller (usually $scope).

  • GraphDisplayCoreService.CreateLink(link, scope): effector.effectorLinkBase

    Herelink is a JSON object with the { target: <target>, source: <source>, DDORecord: <DDORecord>} form.

In this case <target> and <source> are either an object with a {id: <id>} form where <id> is the technical identifier of a card, or a point on the canvas with the {x <x>:, y: <y>} form (in this case this end of the arrow is free and points to the given point).

The value of the scope parameter is always the scope of the controller (usually $scope).

By deriving from the effector.effectorElementBase, and effector.effectorLinkBase, classes we can realize the operation of a unique card or arrow.

Examples

var card1 = GraphDisplayCoreService.CreateElement({
position: {x: 10, y: 10},
DDORecord: {EventID: 1234, Description: "sample event description"}
}, $scope);
var connection = GraphDisplayCoreService.CreateLink({
source: { id: card1.id },
target: { id: card2.id },
DDORecord: {
LinkProperties: null,
DisplayType: "effector.effectorLinkBase"
}}, $scope);

  • Last update: 2 weeks 5 days ago
  • Effector