[Learning Notes] Hightopo’s HT for Web (3) - Host and Anchor

Before reading this article, we recommend reading: [Learning Notes] Hightopo’s HT for Web (2) - 2D Display, Node, Edge, and Animation

_Host _and _Anchor _are two important concepts within "HT for Web" (HT for short), serving essential roles in interaction and animation implementation.

Host, as the name suggests, is when one node attaches to another node. Like barnacles on a ship's hull, they move along when the ship moves; while the anchor point determines which position serves as the node's coordinate position. Continuing with the ship analogy, the anchor point is where the ship's anchor is located. Except that the anchor point of the ship is usually outside the ship, and the anchor point of the HT node is usually in its center (of course, it can also be outside).

Host

HT supports both 2D and 3D hosting. Let's explain its usage with 2D as an example. Before we begin, here are several methods related to Host:

• getHost() and setHost(host) get and set the host object. When a node is attached to a host node, it will follow when the host moves or rotates
• getAttaches() returns an array of ht.List type containing all nodes attached to itself
• onHostChanged(oldHost, newHost) is a callback function triggered when the host object changes, can be overridden for further handling
• handleHostPropertyChange(event) is a callback function triggered when the host object's properties change, can be overridden for further handling
• isHostOn(node) determines whether the element is attached to the specified node
• isLoopedHostOn(node) determines if there is a circular hosting relationship with the specified node, such as when A hosts B, B hosts C, and C hosts back to A, then elements A, B and C form a mutual circular hosting relationship

In the above example, we created four servers and established connections among them. Additionally, we defined their adsorption relationships as follows:​
Server 4 is adsorbed to Server 3, Server 3 is adsorbed to Server 2, and Server 2 is adsorbed to Server 1.
Consequently, when Server 1 moves, Server 2 will follow suit. Since Server 3 is attached to Server 2, it will also move. Likewise, Server 4 will move in tandem with Server 3.​
The previous two articles have already covered the creation of 2D drawings, nodes, and connections. Here, we primarily focus on configuring the adsorption relationship. The key code is as follows:

/** Create HT nodes separately and add them to the 2d graph view***/

// Create 4 server nodes
const server1 = createServerNode(100, 100, 'Server 1 (Host)', {'label.color': 'red'});
const server2 = createServerNode(300, 100, 'Server 2');
const server3 = createServerNode(100, 300, 'Server 3');
const server4 = createServerNode(300, 300, 'Server 4');

/************* Create Edges ****************/
......
/*********** Edge Animation ***************/
......
/******** Set the adsorption relationship between servers ********/
server2.setHost(server1);
server3.setHost(server2);
server4.setHost(server3);

The key code here is those three setHost(). After setting up the Host node, we can use the host.getAttaches() method to get all nodes that are attached to the Host.

const attaches = server1.getAttaches(); // The length of attaches is 1, which is server2

It's worth noting that although the number of attached nodes retrieved here is 1, due to the recursive nature of node attachments, Server 3 and Server 4 are also indirectly attached to Server 1.

Host Rotation

As mentioned earlier, nodes that are set to be hosted not only follow the Host node's movement, but also rotate according to the Host node's rotation, which is a very useful feature. The logic is implemented internally by "HT for Web", and we can simply call it when needed.

Anchor Point

As shown in the figure above, all 4 servers rotate around a center point, which is Server 1's anchor point. This is also Server 1's coordinate position. In other words: the anchor point affects the node's coordinate position, and simultaneously serves as the center point for node rotation and scaling.

In HT, the anchor point is an important concept for Nodes. While nodes are drawn as rectangular areas, the anchor point determines which position within that rectangle serves as the node's coordinate position.

The anchor point value is expressed as a percentage, where {x:0,y:0} is at the top-left corner of the area, and {x:1,y:1} is at the bottom-right corner. HT defaults to {x:0.5,y:0.5} as the anchor point, which is the center of the element. If a node is configured with values greater than 1 or less than 0, the anchor point will be outside the node's rectangular area. The anchor point can be retrieved and set using node.getAnchor() and node.setAnchor(), or individually accessed and modified using node.getAnchorX(), node.setAnchorX(), node.getAnchorY(), and node.setAnchorY() methods.

• getAnchor() and setAnchor(x, y | {x:0.5,y:0.5}) get and set the element's anchor point, which affects the node's coordinate position and serves as the center point for rotation and scaling

The Hightopo website examples demonstrate the anchor point's functionality from multiple dimensions:

In 3D scenes, the anchor point principle is similar to 2D, except there's an additional dimension. Here are the methods to get and set anchor points:

• getAnchor3d() and setAnchor3d(x, y, z | [x, y, z]) get and set the element's 3D anchor point. Note that to get the anchor point specifically on the Z-axis, you need to use node.getAnchorElevation() **instead of **node.getAnchorZ()

The figure below shows the anchor point position of a hexahedron in a 3D scene. The default anchor point for HT nodes is {x: 0.5, y: 0.5, z: 0.5}. Here we changed it to {x: 0, y: 0, z: 0}, so the coordinate axis is displayed at one corner of the hexahedron instead of the center position.

Summary

In this section, we mainly introduced HT's hosting and anchor point functionality. Node hosting allows nodes to move or rotate together with their host object. Using HT's setHost() method, you can set a node's host object, and the getAttaches() method can retrieve all nodes attached to that host object. Additionally, we covered the center point for node rotation and scaling—the anchor point. The anchor point value is expressed as a percentage, with HT defaulting to {x:0.5,y:0.5} as the anchor point, which is the element's center point. The anchor point can be retrieved and set using methods such as node.getAnchor() and node.setAnchor(x, y | {x:0.5,y:0.5}).

[Learning Notes] Hightopo’s HT for Web (1) - Basic Conceptions
[Learning Notes] Hightopo’s HT for Web (2) - 2D Display, Node, Edge, and Animation