Index

• Overview
• Demo1: Comprehensive example
• Demo2: Bus route Map
• Demo3: Integration with other plug-ins

Overview

The flow edge plug-in can adds a flow effect in ht.Shape and ht.Edge that supports internal flow elements or custom flow elements along the path, and does not introduce new classes, just extend some methods or styles in ht.Shape, ht.Edge and ht.graph.GraphView and are therefore very easy to use. To use this plug-in, simply introduce ht-flow.js files:

<script src="ht.js"></script> <!--Introduce ht.js file first-->
<script src="ht-flow.js"></script>

This plug-in expands some styles to control the flow effect in ht.Shape and ht.Edge class that users can operate these styles by ht.Shape#setStyle and ht.edge#setStyle is described as follows:

• flow The value is true or false to control whether this ht.Shape or ht.Edge can flow, default value is false
• flow.reverse The value is true or false, controls reverse flows and defaults to false
• flow.autoreverse The value is true or false, positive and reverse flows are alternating, and the default value is false
• flow.count Controls the number of flowing groups, the default is 1
• flow.step Controls the movement of the stepper, the default is 3
• flow.element.count Number of elements in each flowing group, the default is 10
• flow.element.background The background color of elements in the flowing group, the default is rgba(255, 255, 114, 0.4)
• flow.element.max Size of the largest element in the flowing group, the default is 7
• flow.element.min The size of the smallest element in the flowing group, the default is 0; the size of the elements in each flowing group is decremented from flow.element.max to flow.element.min and if you want the element size to be consistent, set the two parameters to be consistent.
• flow.element.space The interval between the elements in the flowing group, the default is 3.5
• flow.element.autorotate The value is true or false to control whether the element in the flowing group is consistent with the direction of the path, and the default is false
• flow.element.image String type, specifies the picture of the element in the flowing group, and the picture needs to be registered in ht.Default.setImage in advance
• flow.element.shadow.visible The value is true or false to control whether elements in the flowing group show a gradient shadow and the default is true
• flow.element.shadow.begincolor String type that represents the central color of the gradient shadow of an element in the flowing group, and the default is rgba(255, 255, 0, 0.3)
• flow.element.shadow.endcolor String type that represents the edge color of the gradient shadow of an element in the flowing group, and the default is rgba(255, 255, 0, 0)
• flow.element.shadow.max Represents the size of the gradient shadow of the largest element in the flowing group, the default is 22
• flow.element.shadow.min Represents the size of the gradient shadow of the smallest element in the flowing group, the default is 4

The API extended on ht.graph.GraphView is as follows:

• enableFlow(interval) Enable the flow, defaults to false, interval represents the time interval of flow
• disableFlow() Disable flowing
• flowInterval Control the time interval of flow by operating setFlowInterval(interval) and getFlowInterval() to

As you can see from the above illustration, the time interval of all Data flows on the topology is the same, and if you need to create different effects of different Data flows, you can modify the flow.step style for the relevant Data.

Demo1: Comprehensive example

You can verify this plug-in by manipulating the following example:

The example above shows how to use the flow style, and you can view the implementation principle through source code.

Demo2: Bus route Map

You can drag the bus station to adjust the line. The bus station realized by ht.Node, the bus uses the flowing picture to display, because the bus station and the line are different nodes, in order to avoid the bus on the line is blocked by the bus station, uses two Shape to simulate the line and the bus:

• busLanePath Shows the bus, the bus flow on it, it has no width, so it is invisible, displayed in the top painter
• busLane Show lines, displayed in the bottom painter

Bus station node fixed on the busLane through setHost(busLane), and then fixed to busLanePath through setLayer(1) that can realize the effect that the bus flows in the line and the bus station.

In addition, drag and drop bus station will adjust busLanePath and busLane, so need to listen to the location of the bus station information changes, and then modify the line of points, because the site is adsorbed on the line, modify the line points need to call ht.Default.getInternal().setIsolating(true); to avoid the impact of bus stops and lines.

Demo3: Integration with other plug-ins

No need to do additional processing, in accordance with the original way to use the plug-ins' own API, the following example uses the EdgeType plug-in, automatic layout plug-in and Painter mechanism:

This example uses the global default style configuration:

<script type="text/javascript">
    htconfig = {
         Style: {
             'edge.color': "black",
             'flow': true,
             'edge.offset': 0,
             'flow.element.background': "rgb(41, 249, 47)",
             'flow.element.count': 1,
             'flow.count': 2,
             'flow.element.max': 10,
             'flow.element.shadow.visible': false
         }
     };
 </script>

The details of this syntactic structure can be referenced Theme Manual