Skip to content

Positional element editor

Jump to bottom
Damiano Di Vincenzo edited this page Apr 26, 2020 · 9 revisions

How the expression evaluation works

First of all the typings: Point holds "x" and "y" records with values in pixel coordinates. Size holds "x", "y", "w" ("short" for "width") and "h" (shorthand for "height") with values in pixel coordinates. GraphPoint and GraphSize holds the same records and methods using graph coordinates that are zoom-indipendent, they only differ in semantic meaning. [$todo: explaining image]

The syntax is the same as javascript, with the addiction of some built-in variables. To get the full list of the variables, open the text editor and write "this.", the autocomplete will generate suggestions. the position variables and methods (width, height, vertexSize, documentPos, relativeVPos, relativePos...) needs some additional explaination.

  • width: number is the width in pixels of the node being selected on the style editor, holding the layouting rule.

  • height: number is the height in pixels of the node being selected on the style editor, holding the layouting rule.

  • relativePos: GraphPoint is the position of the node, in zoom-indipendent graph coordinates, relative to the first node matched by the css++ selector inserted in the input labelled "Rel. target selector" if present, null otherwise.

  • relativeVPos: GraphPoint contains the position of this layouting node relative to the top-left corner of the vertex holding it.

  • absoluteGPos: GraphPoint contains the position of the node holding the rule, expressed in zoom-indipendent graph's coordinates.

  • absoluteDocPos: Point contains the position of the node holding the rule, expressed in document's coordinates, they indirectly change as the graph is being panned or zoomed.

  • vertexSize: Size is the size in zoom-indipendent graph coordinates of the vertex holding this layout element.

  • graphSize: Size is the size in pixels of the entire graph environment as an html node. Will change while resizing the window or the toolbars.

  • documentSize: is the size in pixel of the document node.

Those variables should never be modified directly, to modify the use the this.setVariableName functions (eg: setAbsoluteGPosX(3); or setAbsoluteGPos(x, y)); Once one of those function is called, everyone of those built-in variables are updated to be coherent with the latest change. for example setAbsoluteGPosX() will indirectly change the values of "relativePos.x", "relativeVPos.x", "absoluteGPos.x" and "absoluteDocPos.x" to keep the built-in variables coherent.

See also Positional element transactions to see what happen if the user code generate a run-time exception.

Clone this wiki locally