`<constrainToInterior>`

Constrains a graphical component's position to lie inside a region

<constrainToInterior> is a Graphical component that constrains a <point> to lie inside a referenced graphical region (such as a <polygon>, a <circle>, or a <rectangle>). When the point is dragged outside the region, it is moved to the nearest point on the region’s boundary.

Attributes and Properties

Attributes for `<constrainToInterior>`

Other (1)

relativeToGraphScales

boolean. Default value: false. Whether the constraint is interpreted relative to the enclosing graph's scales.

Common to all components (9)

copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for `<constrainToInterior name="c">`

Other (5)

$c.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$c.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$c.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$c.hidden

boolean. Whether this component is hidden from the rendered output.

$c.relativeToGraphScales

boolean. Whether the constraint is interpreted relative to the enclosing graph's scales.

Common to all components (4)

$c.doenetML

text. The DoenetML source code that produced this component.

$c.hide

boolean. Whether to hide this component from the rendered output.

$c.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$c.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Constrain a `<point>` to the interior of a `<polygon>`

The point starts outside the triangle and is immediately pulled to the nearest boundary point. Drag it: it is free to move anywhere inside the triangle, and is held against the boundary when pushed out.

Example: Constrain a `<point>` to the interior of a `<circle>`

The point cannot leave the disk. Released outside the circle, it snaps to the nearest point on the circumference.

Example: Constrain a `<point>` to the interior of a `<rectangle>`

Any rectangle works as a “drag boundary” for a point.

Attribute Examples

Attribute Example: relativeToGraphScales

When the graph’s $x$ and $y$ axes use very different scales, relativeToGraphScales measures distance to the boundary in pixel-like units rather than mathematical units, so the “nearest” point matches what the user sees. Compare to omitting the attribute, where the nearest-point calculation uses raw mathematical distance.

constrainToGrid constraintUnion

<constrainToInterior>

Attributes and Properties

Attributes for <constrainToInterior>

Properties for <constrainToInterior name="c">