This page contains more technical details about Diagramatics.
Diagram Class
the Diagram class is the main class of Diagramatics.
The Diagram class contains the following properties
type : DiagramType // 'polygon', 'curve', 'text', 'image', 'diagram'
children : Diagram[] // Diagrams can have children
path : Path | undefined // Polygon and Curve have a path
origin : Vector2 // position of the origin of the diagram
mutable : boolean
tags : string[]
style : DiagramStyle
textdata : TextData
imgdata : ImageData
User should not directly creating objects of Diagram class and modify their properties. Instead, use the functions and methods provided by Diagramatics.
Mutability
By default, Diagrams are immutable. The users should interact with the Diagram object in a functional way.
The Diagram object is immutable in the sense that the Diagram object itself will not be modified by the functions and methods provided by Diagramatics. Instead, the functions and methods will return a new Diagram object with the desired properties. The hope of this design is to make the Diagram object easier to reason about.
But there are performance cost to this design. Since javascript is not a functional language, the languange doesn't really optimize it well.
Because of that, Diagramatics also provide a way to make the Diagram object mutable.
This is useful when the diagrams is complex and performance is a concern.
*Techincally, since we're using javascript, the object is not really immutable. But methods and functions provided by Diagramatics by default will act as if the object is immutable to the user.
You can set the mutability of a Diagram object by using
Diagram.mut
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.translate(V2(5,5));
draw(sq0, sq1); // sq0 == sq1
Diagram.mut (
)
:
Diagram
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.translate(V2(5,5));
draw(sq0, sq1); // sq0 == sq1
// compare to this where sq, sq0, sq1 is different objects
let sq = square(10);
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.translate(V2(5,5));
draw(sq0, sq1);
// compare to this where sq, sq0, sq1 is different objects
let sq = square(10);
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.translate(V2(5,5));
draw(sq0, sq1);
// for a mutable object, you don't need to assign it to a variable
let sq = square(10).mut();
sq.stroke('grey').strokedasharray([5]);
sq.fill('lightblue');
draw(sq);
// for a mutable object, you don't need to assign it to a variable
let sq = square(10).mut();
sq.stroke('grey').strokedasharray([5]);
sq.fill('lightblue');
draw(sq);
You can turn back the diagram to immutable by using
Diagram.immut()
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.immut().fill('lightblue').translate(V2(5,5));
draw(sq0, sq1);
Diagram.immut (
)
:
Diagram
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.stroke('grey').strokedasharray([5]);
let sq1 = sq.immut().fill('lightblue').translate(V2(5,5));
draw(sq0, sq1);
If you need a copy of a mutable diagram, you can also use
Diagram.copy()
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.copy().stroke('grey').strokedasharray([5]);
let sq1 = sq.copy().translate(V2(5,5));
draw(sq0, sq1);
Diagram.copy (
)
:
Diagram
// here, sq, sq0, sq1 is the same object
let sq = square(10).mut();
let sq0 = sq.copy().stroke('grey').strokedasharray([5]);
let sq1 = sq.copy().translate(V2(5,5));
draw(sq0, sq1);
