Skip to content

ObjectProfile/HierarchicalVisualizations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Attention

image

WE ARE MOVING

HierarchicalVisualizations

CI/Pharo9

This project provide a small API to build hierarchical visualization using the Pharo programming language. HierarchicalVisualizations uses Roassal.

Install

Execute the following code snippet in a Playground:

[ Metacello new
    baseline: 'HierarchicalVisualizations';
    repository: 'github://ObjectProfile/HierarchicalVisualizations:main';
    load ] on: MCMergeOrLoadWarning do: [:warning | warning load ]

Example

Consider the following code snippet:

node1 := HNode new name: 'Node1'.
node1 color: Color blue translucent.

node2 := HNode new name: 'Node2'.
node2 color: Color green lighter lighter.
subnode1 := HNode new name: 'Sub1'.
subnode2 := HNode new name: 'Sub2'.
subnode3 := HNode new name: 'Sub3'.
subnode4 := HNode new name: 'Sub4'.

node1 addAll: {subnode1. subnode2}.
node2 addAll: {subnode3. subnode4}.
	
rootNode := HNode new name: 'Root'.
rootNode addAll: { node1. node2 }.
subnode3 dependenciesToNodes: { subnode1. subnode2 }.

rootNode open.

The code above defines four nodes in total, structured as a hierarchy. Executing the code should shows: image

Node can be collapsed or expanded:

image

New menu items can be defined by creating a subclass of HAbstractMenuItem. The package Hierarchical-Roassal3-Menu contains many examples on how to define a new menu item.

Roassal's layouts may be set in a HNode, as for example:

node1 := HNode new name: 'Node1'.
node1 layout: RSVerticalLineLayout new.
node2 := HNode new name: 'Node2'.
subnode1 := HNode new name: 'Sub1'.
subnode2 := HNode new name: 'Sub2'.
subnode3 := HNode new name: 'Sub3'.
subnode4 := HNode new name: 'Sub4'.

node1 addAll: {subnode1. subnode2}.
node2 addAll: {subnode3. subnode4}.
	
rootNode := HNode new name: 'Root'.
rootNode addAll: { node1. node2 }.
subnode3 dependenciesToNodes: { subnode1. subnode2 }.

rootNode add: HNode new.

rootNode open.

which produces: image