objectprofile / roassal3 Goto Github PK

View Code? Open in Web Editor NEW

95.0 11.0 52.0 46.87 MB

The Roassal Visualization Engine

License: MIT License

Smalltalk 99.95% C 0.05%

pharo pharo-smalltalk roassal visualization smalltalk

roassal3's Introduction

Roassal3

Attention

⚠️ The active development of Roassal3 has been moved to pharo-graphics organization:

Roassal3 => https://github.com/pharo-graphics/Roassal
Roassal3Exporters => https://github.com/pharo-graphics/RoassalExporters
Roassal3Documentation => https://github.com/pharo-graphics/RoassalDocumentation

New repositories:

RoassalLayouts => https://github.com/pharo-graphics/RoassalLayouts

Roassal is part of pharo thats why we want to keep it as part of the pharo ecosystem, thats why we are moving and this repository will be frozen.

Chat with us on #Roassal

Visualize the test coverage of Roassal3

Roassal3 is an agile visualization engine for Pharo. Roassal was created to enable interactive data visualization, it contains a different groups of shapes an lines that you can use to build your projects, also animations, attach points, events, layouts and a basic chart library. Roassal use cairo graphics as backend, in a future will support new backends. Roassal allows to user to extent the presentation of any object thanks to the inspector. Also it has integration with spec and also with morphic world

Sister projects: Roassal3Documentation, Roassal3Exporters.

Pharo Installations

Roassal3 is included from Pharo 9 to 12. This means that you do not need to install anything else. Pharo contains Roassal 0.9.6b. Two installation flavors are available: stable and latest (a.k.a bleeding-edge).

Stable version

If you wish to install Roassal in Pharo, then execute the following code snippet in a Playground:

Metacello new
    baseline: 'Roassal3';
    repository: 'github://ObjectProfile/Roassal3:v1.01';
    load.

Latest version

If you wish to have the lastest release of Roassal, then execute the following code snippet in a Playground, including Mondrian and experimental packages, use:

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

Quick examples

In order to run the following examples they must be loaded by installing the full (bleeding edge) version of Roassal.

Once loaded, you can execute this in a playground:

RSChartExample new example01Markers open

You should see:

An example animation may be seen using:

RSAnimationExamples new example03Atom open

You should see:

RSExamplesBrowser new open

You should see an interactive browser with left right buttons to browse:

RSLayoutStudio new open

You should see a layout editor browser to choose a layout with the current parameters:

Documentation

Visit the documentation github page

A major effort on writing documentation is under way. The wiki pages are yet another source of documentation for Roassal3: https://github.com/ObjectProfile/Roassal3/wiki

Roassal3 as a dependent application

If you wish to set a dependency to Roassal3 in your application, you simply need to add the following in your baseline:

spec baseline: 'Roassal3' with: [ spec repository: 'github://ObjectProfile/Roassal3/src' ].

To depend on a full version of Roassal3, you may use:

baseline: 'Roassal3' with: [ spec repository: 'github://ObjectProfile/Roassal3/src'; loads: #('Full') ];

Get in touch

Share your enthusiasm by joining the #Roassal channel, in the Pharo discord server: https://pharo.org/community

Roassal3 is free and open source, but backed by Object Profile. Commercial support offerings are available, including training and custom consultancy services. Check RoassalPro for more information.

Acknowledgement

Roassal3 is a community effort, and we are really grateful to a number of people. In no particular order, big thanks to: Stéphane Ducasse, Martin Días, Pavel Krivanek

roassal3's People

Contributors

Stargazers

Watchers

roassal3's Issues

we need pdf exporter

Error are not raised

If I do RSEdgeBuilder line foo I have no error. That cannot be. A does not understand error should be raised

Roassal2 Builders to migrate

Bundle edges
CircularMap
Sunburst
Timeline
Calendar
DependencyStructuralMatrices

Less important:
-Highlighter

Kiviat

Less less important:

Map
OpenStreetMap

RSAlignment has some issues

v := RSView new.
ss := RSShapeBuilder box size: 30; element.
lbl := RSShapeBuilder label elementOn: 'hello'. 

v add: ss.
v add: lbl.

RSAlignment new fixedElement: ss; elements: (TSGroup with: lbl); center.
v open

I would expect the label to be at the center of the fixed element, the box. But this is not the case:

We need the bimetric lines

As we have in Roassal2

QuadTree and Visualization content

We should have two hierarchies: one defining the visualization content (DOM), and another for the rendering structure, based on QuadTree

Add arrow shape to roassal3

Create SVG exporter for roassal3

Arrow shape in UML: make the triangle equilateral

I hope I'm not too picky :)

UML collapse and expand icon: make them vectorial

Inspector on pharo3?

How can we handle the inspector if glamour is going to be obsolete

edges used in a layout

Should an edge be aware of whether it is part of layout or not?

Optionally keep size of borders or arrows independently of camera zoom

Sometimes the size of arrows or borders doesn't represent a metric but only the fact that two nodes are connected with some direction. In these cases, I would like to have borders and arrows with a determined size:

And, even if camera has zoom like here, keep the same size-in-screen:

Still have the problem with edges

v := RSView new.
"v showEncompassingRectangles."
s := RSShapeBuilder composite 
	color: Color blue; 
	interactionDo: #draggable;	
	shapes: [ :cls |
	| ss lbl |
	ss := RSShapeBuilder box
		interactionDo: #popup;
		size: #linesOfCode;
		elementsOn: (cls methods).
	RSGridLayout on: ss.
	
	lbl := RSShapeBuilder label elementOn: cls name.
	"TSConstraint move: lbl above: ss."
	ss, (TSGroup with: lbl)
	]; 
	onElement;
	extent: [ :anElement | anElement extent + (10 @ 10) ];
	elementsOn: (Collection withAllSubclasses).

v addAll: s.

RSEdgeBuilder line
	view: v;
	objects: Collection withAllSubclasses;
	connectFrom: #superclass.

RSGridLayout on: s.

v @ RSControlsView.
v open

Edges get updated only when I drag and drop nesting packages.

How to model Bezier shapes in Trachel?

We have TSLine, we can create subclasses of TSLine

Bug with #padding:

The following code raises an error:

v := RSView new.

classElements := RSShapeBuilder composite
			color: Color blue trans;
			shapes: [ :obj |
				| g |
				g := RSShapeBuilder box elementsOn: obj methods.
				RSGridLayout on: g. 
				g 
			]; padding: 5;
		elementsOn: Collection withAllSubclasses.

RSGridLayout on: classElements.
v addAll: classElements.
v @ RSControlsView.
v open

And it should not apparently. When #padding: is sent, the shapes variable is nil, and we did a shapes: just before!

We need Spy for roassal3

RSLabeled should be highlightable

In Roassal2 we have:

	| v es |
	v := RTView new.

	es := RTBox new size: 20; color: Color blue; elementsOn: #('Hello' 'World').
	v addAll: es.
	RTHorizontalLineLayout on: es.

	es do: [ :e |
		e @ (RTLabeled new color: Color red; setAsHighlightable) ]. 
	es @ RTDraggable.
	v

RSControlsView should support keyboard shortcuts

Roassal3 and sparta

Roassal3 needs to run over sparta.

is Roassal3 going to work over bloc?

RSMenuActivable>>menuDo: should also receive the element

Currently, if I wish to have a menu for an element, I need to do

v := RSView new.

boxes := RSShapeBuilder composite
				color: Color blue trans;
				shapes: [ :nb | 
					TSGroup with: (RSShapeBuilder label elementOn: nb)
					 ]; 
				size: 30;
				elementsOn: (1 to: 100).
v addAll: boxes.
RSGridLayout on: boxes.
boxes do: [ :b |
	b @ (RSMenuActivable new menuDo: [ :menu | menu add: 'Inspect' target: b selector: #inspect argument: #() ])
].
"boxes @ (RSMenuActivable new menuDo: [ :menu | menu add: 'Inspect' target: )"
v @ RSControlsView.
v open

Would be nice to do:

boxes @ (RSMenuActivable new menuDo: [ :menu :element | menu add: 'Inspect' target: element ...

Rotation in Trachel?

How do we handle rotation? At the top, in a matrix in TSShape?
In that case, we would not need to have a TSRotatedLabel

Create minimap for roassal visualizations

Iceberg Roassal powered

We need to have branches...

Review a short way to put events in a shape

Current state

view := RSView new.
....
box when: TSTranslationShapeEvent do: [:evt | ... ].
view when: TSResizeCanvasEvent do: [ :evt | pie view zoomToFit ].

I think that we have long names for these events, may be we can use

box when: #positionChanged do: [:evt | ... ].
view when: #extentChanged do: [ :evt | pie view zoomToFit ].

Error in LegendBuilder

Consider the script:

classes := Collection withAllSubclasses.
v := RSView new.

shape := RSShapeBuilder box
				popup;
				width: [ :cls | cls instVarNames size * 5 max: 5 ];
				height: [ :cls | cls numberOfMethods max: 5 ].
elements := shape elementsOn: classes.
v addAll: elements.

RSEdgeBuilder line 
	view: v;
	objects: classes;
	withVerticalAttachPoint;
	connectFrom: #superclass.

RSTreeLayout on: elements.
RSInspectable reset.
inspectable := RSInspectable new .
highligtable := inspectable highlightable.
highligtable highlightShape color: Color green.
inspectable inspectElementBlock: [ :cls |
	| builder |
	builder := RSUMLClassBuilder new.
	builder classes: { cls }.
	builder build.
	builder open
].

elements @ inspectable.

v @ RSControlsView.
v open

Times to time, the legend raises an error.

UML package: load it in default group

Create a UML class builder for roassal3

Create roassal menu on Tools

Create the roassal3 menu with these items

Report a bug
Script of the day
Live chat
Plugins
Examples
Online documentation
About Roassal

Cannot align the top labels

I created the package Roassal3-DSM, imported from Roassal2.
I cannot have the top labels aligned.
Here is the code:

| dsm |
	dsm := RSDSM new.
	dsm objects: TSShape withAllSubclasses.
	dsm dependency: #dependentClasses.
	dsm build.
	^ dsm open

Make roassal3 comatible with pharo7

UML view (and possibly most views): Set maximum zoom in = 1

The user doesn't need to see more details on a UML class. Also, given inertia zoom in in Mac is tricky...

This requires that also zoomToFit doesn't goo beyond this zoom limit... should i create a separate issue?

Issue with position

	objects := TSShape withAllSubclasses.
	v := RSView new.
	v showEncompassingRectangles.
	n := TSScale category20c.
	shape := RSShapeBuilder box color: n; size: [ : c | c numberOfMethods ].
	es := shape elementsOn: objects.
	v addAll: es.
	RSHorizontalLineLayout new gapSize: 0; on: es.
	RTAlignment new elements: es; bottom.
	v @ RSControlsView.
	v open

RTHighlightable>>withEdges does not work with Bimetric lines

The following example fail with the popup on edges:

packagesRegExp := { 'Calypso*' }.

packages := packagesRegExp flatCollect: [ :regExp | RPackageOrganizer default packages select: [ :p | regExp match: p packageName ] ].

l := RSLabeled new text: [ :e | e model packageName ].
packageElements := RSShapeBuilder composite
							color: Color blue trans;
							addInteraction: l;
							draggable;
							shapes: [ :pak |
								| g lbl |
								g := RSShapeBuilder box
									size: [ :cls | cls numberOfMethods sqrt ];
									elementsOn: pak definedClasses.
								RSGridLayout on: g.
								g
							]; 
							padding: 5;
							elementsOn: packages.
packageElements @ RSHighlightable new withEdges.						
v := RSView new.
v addAll: packageElements.

RSEdgeBuilder bimetricLine
		view: v;
		objects: packages;
		widthFrom:
				[ :edge | (edge key model numberOfDependenciesToward: edge value model) sqrt * 10 ];
		widthTo:
				[ :edge | (edge value model numberOfDependenciesToward: edge key model) sqrt * 10 ];
		paint: Color red trans;
		border: nil;
		withBorderAttachPoint;
		connectFrom: #yourself toAll: #dependentPackages.
		
		
RSWeightedCircleLayout new initialRadius: 300; on: packageElements.
v @ RSControlsView.

v open

complete the code of TSSVGShape

Bezier and flexible control points, follow

How can we have this example from Roassal2

| b lb |
b := RTMondrian new.

b shape circle color: (Color red alpha: 0.4).
b nodes: Collection withAllSubclasses.
b edges connectFrom: #superclass.

b shape bezierLineFollowing: #superclass; color: (Color blue alpha: 0.1).
b edges
	notUseInLayout;
	connectToAll: #dependentClasses.

b normalizer
	normalizeSize: #numberOfMethods min: 5 max: 50.

b layout force.
b build.

lb := RTLegendBuilder new.
lb view: b view.
lb addText: 'Circle = classes, size = number of methods; gray links = inheritance;'.
lb addText: 'blue links = dependencies; layout = force based layout on the inheritance links'.
lb build.

^ b view @ RTZoomableView.

We need UML for package

Bug when drawing lines between TSCompositeShapes

v := RSView new.
v showEncompassingRectangles.
s := RSShapeBuilder composite 
	color: Color blue; 
	interactionDo: #draggable;	
	shapes: [ :cls |
	| ss lbl |
	ss := RSShapeBuilder box
		interactionDo: #popup;
		size: #linesOfCode;
		elementsOn: (cls methods).
	RSGridLayout on: ss.
	
	lbl := RSShapeBuilder label elementOn: cls name.
	"TSConstraint move: lbl above: ss."
	ss, (TSGroup with: lbl)
	]; 
	onElement;
	extent: [ :anElement | anElement extent + (10 @ 10) ];
	elementsOn: (Collection withAllSubclasses).

v addAll: s.

RSEdgeBuilder line
	view: v;
	objects: Collection withAllSubclasses;
	connectFrom: #superclass.

RSTreeLayout on: s.

v @ RSControlsView.
v open

It produces the following:

Add attach points to roassal3

takeKeyboardFocus should be used for the Inspector

How to make the first window keep the focus ?

	| classes v shape elements inspectable highligtable |
	classes := Collection withAllSubclasses.
	v := RSView new.
	shape := RSShapeBuilder box
		popup;
		width: [ :cls | cls instVarNames size * 5 max: 5 ];
		height: [ :cls | cls numberOfMethods max: 5 ].
	elements := shape elementsOn: classes.
	v addAll: elements.
	RSEdgeBuilder line
		view: v;
		objects: classes;
		withVerticalAttachPoint;
		connectFrom: #superclass.
	RSTreeLayout on: elements.
	RSInspectable reset.
	inspectable := RSInspectable new.
	highligtable := inspectable highlightable.
	highligtable highlightShape color: Color green.
	inspectable
		inspectElementBlock: [ :cls | 
			| builder |
			builder := RSUMLClassBuilder new.
			builder classes: {cls}.
			builder build.
			builder open ].
	"inspectable inspectElementBlock: [ :cls | GTInspector openOn: cls ]."
	elements @ inspectable.
	v @ RSControlsView.
	v open