ActionsΒΆ
There are cases where you may want to provide users with a way to quickly change a shape’s properties in a particular way. For example, changing the width and height of a rectangle to the same value, changing the border color of a shape to a color with the same hue as the background but darker, etc. The traditional way is for users to do the calculation themselves and change each of the properties to the desired value.
Pencil introduces the Action
tag, in which stencil developers can define a
routine that performs calculations and makes changes to a shape’s properties.
The following example show how an Action is defined to let users quickly change the rectangle to a square:
<Shape id="RoundedRect" displayName="Rectangle" icon="...">
<Properties>
...
</Properties>
<Behaviors>
...
</Behaviors>
<Actions>
<Action id="makeSquares" displayName="Make Squared">
<Impl>
var box = this.getProperty("box");
box.w = Math.max(box.w, box.h);
box.h = box.w;
this.setProperty("box", box);
</Impl>
</Action>
</Actions>
<p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
xmlns="http://www.w3.org/2000/svg">
<rect id="rrRect" x="0" y="0" />
</p:Content>
</Shape>
In the <Action>
, the shape’s properties are modified and will be applied
immediately to objects that refer to these properties. The above code is
simple: box.h
is forced to equal box.w
resulting in the rectangle
becoming a square.
Note
In the context of action execution, the keyword this
is bound to the
shape itself so that you can retrieve and set the property values via it.