Formulas

What are formulas?

Formulas are JavaScript expressions attached to Vecta shapes. They can be used to automate certain tasks in your drawing. For example, you can resize a distant shape when resizing the currently selected shape.

Peruse our API to access shapes, stencils and other objects in your drawing to create formulas.

Resize Shape 1 and Shape 2 will follow.
Resize Shape 1 and Shape 2 will follow.

There are a few things about Formulas to take note of:

  • Adding, removing or editing formulas can be done through the Shape Properties dialog or programmatically.
  • Formulas are not removed from the shape when copying and pasting the shape into another drawing, or saved into a stencil as a symbol.

Add, edit or remove formula

Select a shape with the Shape Properties dialog open, and click on the f icon on the right of the dialog to access the Formula mode. In this mode, you can add, edit or remove formulas from the fields shown in the dialog.

Clicking after entering your formula into the text area or pressing the ENTER key saves your formula. Once a formula is added to the field, you can no longer modify the value until the formula is removed. You can remove the formula by emptying the text area.

Remove a formula by emptying the text area
Remove a formula by emptying the text area

For viewing pleasure as you code, click on the dot menu next to either one of the text area in the dialog, and select Edit code to open up a code editor.

Open a code editor through the dot menu
Open a code editor through the dot menu

Examples

Resize a shape and show it's width in textblock

this.widthU('px', '0') + 'px'



Drag to change the shape's color and text

//Add to text field in Shape Properties dialog
Math.floor( this.widthU() / ( this.parent().widthU() / 5)) + 1

//Add to fill field in Shape Properties dialog
switch ( Math.floor( this.widthU() / ( this.parent().widthU() / 5) ) ) { 
  case 0: '#66ff80'; break; 
  case 1: '#d9ff66'; break; 
  case 2: '#fff266'; break; 
  case 3: '#ffb466'; break; 
  case 4: '#ff6666'; break;
}
Last updated September 14, 2018