`<stickyGroup>`

Constrains group members to attract to each other when nearby

<stickyGroup> is a Graphical component that groups other graphical objects (typically <polygon>s, <polyline>s, and <point>s) so they snap to each other when their vertices or edges are nearby. Vertices snap together within threshold distance, and edges of rigid polygons can rotate to align with neighboring edges within angleThreshold radians.

Children of a <stickyGroup> are rendered exactly as they would be outside it; only the dragging behavior is changed.

Attributes and Properties

Attributes for `<stickyGroup>`

Labels (1)

labelIsName

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (5)

angleThreshold

number. Default value: 0.09424777960769379. Angular distance within which group members snap together.

applyStyleToLabel

boolean. Default value: false. Whether to apply this component's selected style to its label.

layer

integer. Default value: 0. Z-order layer index used to stack graphical components (higher values render on top).

relativeToGraphScales

boolean. Default value: false. Whether the snapping threshold is interpreted relative to graph scales.

threshold

number. Distance threshold within which group members snap together.

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 `<stickyGroup name="s">`

Labels (2)

$s.label

label. The label rendered with this component.

$s.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (10)

$s.angleThreshold

number. Angular distance within which group members snap together.

$s.applyStyleToLabel

boolean. Whether to apply this component's selected style to its label.

$s.disabled

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

$s.fixed

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

$s.fixLocation

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

$s.hidden

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

$s.layer

integer. Z-order layer index used to stack graphical components (higher values render on top).

$s.relativeToGraphScales

boolean. Whether the snapping threshold is interpreted relative to graph scales.

$s.scales

number. The graph axis scales (x and y) used when applying this constraint.

$s.threshold

number. Distance within which group members attract each other.

Common to all components (4)

$s.doenetML

text. The DoenetML source code that produced this component.

$s.hide

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

$s.isResponse

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

$s.styleNumber

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

Examples

Example: Two polygons that snap together

Drag either polygon close to the other. When a vertex or edge comes within the default snap threshold, the polygon snaps so the matching vertices coincide or the edges align.

Example: Snapping a point to a polygon

When dragged close enough, the point first attracts to a triangle vertex, and otherwise to the nearest point on a triangle edge.

Attribute Examples

Attribute Example: threshold

threshold controls how close vertices or edges must be (in graph units) before they snap. The default is $0.5$ , or $0.02$ when relativeToGraphScales is set.

Attribute Example: angleThreshold

angleThreshold (in radians) sets how close two rigid polygon edges must already be in orientation before they rotate to align. The default is roughly $0.094$ rad (about $5.4°$ ); increasing it makes edges snap together over a wider range of angles.

Attribute Example: relativeToGraphScales

When the $x$ and $y$ axes use very different scales, relativeToGraphScales measures snap distances relative to the axis scales rather than as raw mathematical distances. This keeps the snap behavior matching what the user sees on screen.

Property Examples

Property Example: threshold

The threshold attribute is also available as a property of a named <stickyGroup>.

statement styleDefinition

<stickyGroup>