Documentation

Web Code Globe Web Code Globe

Dynamic Shapes

WebCode has a great feature called dynamic shapes. With dynamic shapes, you can define how shapes should behave when they are resized. In case of the JavaScript+Canvas target, this dynamic behavior is also baked in the generated code. This functionality is also partially supported by the CSS+HTML target.

Dynamic Shapes

To make a shape dynamic:

  • draw a frame around the shape
  • define how the shape should behave when the enclosing frame is resized

Of course, a single frame may contain many shapes.

Frames

Bezier

To create a Frame, simply select the “Frame” tool from the toolbar, then click and drag in the canvas.

Frames are not shapes. By themselves, they do not draw anything. However, they affect the generated code. Frames also affect the dynamic behavior of shapes inside them.

In the generated JavaScript+Canvas code, a frame looks like a rectangle variable:

Frame's rectangle variable

Dynamic shapes derive their sizes and coordinates from their enclosing frames.

When you resize a frame in the canvas, all derived shapes are resized/moved around, too. To suppress this behavior, hold down the COMMAND key while resizing the frame.

Resizing Constraints

You can define the resizing behavior of a shape using the resizing constraints in the Inspector:

Constraints

These constraints define the relationship between a shape and its frame. There are six constraints: left, right, top, bottom, width and height.

Constraints in use

When defining the relationship between shape and its frame, horizontal constraints (left, width, right) are entirely independent from vertical constraints (top, height, bottom). For clarity, we will only describe the behavior of horizontal constraints.

Each constraint can be either rigid or flexible.

The left constraint represents the distance between the left side of the shape and the left side of the enclosing frame. When the left constraint is rigid, WebCode will make sure that no matter how you resize the frame, the left side of the shape will maintain a constant distance from the left side of the frame. When the left constraint is flexible, WebCode will try to make the corresponding distance as large as possible, respecting the other two (width, right) constraints.

Width and right constraints work similarly. With specific combinations of rigid/flexible constraints, you can achieve a wide variety of useful behaviors.

Centering a fixed-width shape

Bezier

Making the shape resize proportionally

Making the shape resize proportionally

Shape with a constant margin on both sides

Shape with a constant margin on both sides

Shape that sticks to the right

Shape that sticks to the right

Shape that sticks to the left and resizes proportionally

Shape that sticks to the left and resizes proportionally

Frame & Shape Hierarchy

Nested Frames

  • you can nest multiple frames inside each other
  • frames also have resizing constraints

WebCode creates the frame hierarchy automatically for you, taking the positions and sizes of the frames into account. By default, all shapes that are fully or partially inside a frame belong to that frame.

In some situations, it is desirable that frame only affects shapes that are entirely enclosed by it. You can turn on this behavior by checking the "Apply only to entirely enclosed shapes" checkbox in the frame Inspector:

Apply only ot entirely enclosed shapes checkbox

If a shape belongs to multiple frames, the smallest of these frames is used as the reference frame for the shape.

Dynamic Beziers

For simple shapes such as rectangles and ovals, it is sufficient to specify their resizing behavior with the resizing constraints. However, you need a finer control for beziers.

Configuring a dynamic bezier

The differences are:

  • you can define the resizing constraints for individual controls points of beziers
  • different control points can depend on different frames (there is no single reference frame for a bezier)

Since control points do not have width and height, the constraints control is simpler:

Control Point Constraints Control

You have 4 constraints: left, right, top, bottom. Each of them can be either rigid or flexible.

When the left constraint is rigid, the control point will maintain a constant distance from the left side of its reference frame. Analogously, when the right constraint is rigid, the control point will maintain a constant distance from the right side of its reference frame.

When both left and right constraints are flexible, the control point maintains the same relative position inside the reference frame. For example, imagine the frame is 300 pixels wide and the control point is 100 pixels from the left side of the frame. When you resize the frame to be 600 pixels wide, the control point will be 200 pixels from the left side of the frame.

It is not possible to have both left and right constraints rigid.

It is possible to achieve complex resizing behavior by setting resizing constraints for individual control points. Moreover, since you can use multiple (or even nested) frames, creating many interesting behaviors is simple.

Frames and constraints have much wider range of uses than just a resizing:

Another dynamic bezier example

Groups Example