`<lineSegment>`

A line segment between two endpoints

<lineSegment> is a Graphical component that renders a line segment when nested within a <graph> component.

Attributes and Properties

Attributes for `<lineSegment>`

Number display (5)

avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 3. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 1e-14. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

labelIsName

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

Other (16)

addControls

keyword. Whether to render interactive control handles.

Value	Description
`endpoints` (default)	Show control handles for both endpoints of the segment.
`none`	Show no control handles.

applyStyleToLabel

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

controlOrder

integer. Default value: 0. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

draggable

boolean. Default value: true. Whether the line segment can be dragged on a graph.

endpoints

[ pointList ]. The two endpoints of the line segment.

endpointsDraggable

boolean. Whether the line segment's endpoints can be dragged.

labelPosition

keyword. Where the label sits along this line/curve.

Value	Description
`upperRight`	Place the label above and to the right of the line.
`upperLeft`	Place the label above and to the left of the line.
`lowerRight`	Place the label below and to the right of the line.
`lowerLeft`	Place the label below and to the left of the line.
`center` (default)	Place the label at the midpoint of the line.
`top`	Place the label directly above the line.
`bottom`	Place the label directly below the line.
`left`	Place the label directly to the left of the line.
`right`	Place the label directly to the right of the line.

layer

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

length

number. The signed defining length used with the slope/midpoint parameterization. Negative values flip the relative position of the endpoints.

lineStyle

keyword. Stroke style for lines.

Value	Description
`solid`	Continuous, unbroken stroke.
`dashed`	Stroke composed of evenly-spaced dashes.
`dotted`	Stroke composed of evenly-spaced dots.

lineWidth

number. Stroke width for lines, in pixels.

maskLabel

boolean. Default value: false. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

midpoint

[ point ]. A reference point on the line segment, located at its midpoint by default. Used with slope/length/midpointOffset to position the segment. When midpointOffset is nonzero, this point is offset from the segment's actual midpoint (given by the midpoint property).

midpointOffset

number. Default value: 0. Where the point given by the midpoint attribute sits along the segment (requires midpoint to be set): -1=first endpoint, 0=midpoint, 1=second endpoint. Clamped to [-1, 1].

showCoordsWhenDragging

boolean. Default value: true. Whether to show coordinate labels while dragging.

slope

number. The slope of the line segment in the x-y plane.

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 `<lineSegment name="l">`

Number display (5)

$l.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$l.displayDecimals

integer. Number of decimal places to display when rendering this number.

$l.displayDigits

integer. Number of significant digits to display when rendering this number.

$l.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$l.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (2)

$l.label

label. The label rendered with this component.

$l.labelIsName

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

Other (20)

$l.addControls

text. Whether to render interactive control handles.

$l.applyStyleToLabel

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

$l.controlOrder

integer. Slot order for graph controls (1-indexed; 0 means no explicit slot request).

$l.disabled

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

$l.draggable

boolean. Whether the line segment can be dragged on a graph.

$l.endpoints

[ math ]. The endpoints of the line segment.

$l.endpointsDraggable

boolean. Whether each endpoint can be dragged independently.

$l.fixed

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

$l.fixLocation

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

$l.hidden

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

$l.labelPosition

text. Where the label sits along this line/curve.

$l.layer

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

$l.length

math. The Euclidean length of the line segment (always non-negative).

$l.maskLabel

boolean. Whether to give the label an opaque background so it stays legible when it overlaps an axis, grid line, or another object.

$l.midpoint

[ math ]. The midpoint of the line segment, i.e. the average of its endpoints. When the midpoint attribute is set together with a nonzero midpointOffset, this actual midpoint differs from the point given by the midpoint attribute.

$l.numDimensions

number. Number of dimensions the segment lives in.

$l.showCoordsWhenDragging

boolean. Whether to show coordinate labels while dragging.

$l.slope

number. The slope of the line segment in the x-y plane; returns NaN when the segment is not 2D.

$l.styleDescription

text. A textual description of the line segment's style.

$l.styleDescriptionWithNoun

text. Style description including the noun "line segment".

Common to all components (4)

$l.doenetML

text. The DoenetML source code that produced this component.

$l.hide

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

$l.isResponse

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

$l.styleNumber

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

Examples

Example: Default `<lineSegment>`

Without any attributes, the default <lineSegment> has endpoints $(0,0)$ and $(1,0)$ .

Example: `<lineSegment>` with rendered endpoints

The endpoints property of a named <lineSegment> can be rendered on a <graph> with the reference $name.property.

Example: `<lineSegment>` constrained to a grid

The endpoints of a <lineSegment> are predefined as constrained points, thereby constraining the segment to a grid as well.

Attribute Examples

Attribute Example: endpoints

The endpoints attribute takes as an input a list of two points.

Attribute Example: draggable

The draggable attribute determines whether the <lineSegment> can be dragged around the <graph>. All graphical objects are draggable by default.

Attribute Example: endpointsDraggable

Endpoints are draggable by default. Use the endpointsDraggable attribute set to false to disable users from changing the shape and length of the <lineSegment>. The segment as a whole can still be repositioned on the <graph>.

Attribute Example: showCoordsWhenDragging

By default, a light-grey set of coordinates is shown while the user drags the endpoints of the line segment. To turn off this default behavior, set the showCoordsWhenDragging attribute to false.

Attribute Example: Standard graphical attributes

The uses of the following standard graphical attributes are illustrated: hide, fixLocation, layer, styleNumber, applyStyleToLabel and labelIsName.

Attribute Example: slope and length

When no endpoints are specified, the slope and length attributes define the segment: the first endpoint is placed at the origin and the second is placed a distance length away in the direction determined by slope. A negative length points the segment in the opposite direction.

Attribute Example: midpoint

The midpoint attribute specifies a point that lies on the segment, which is its midpoint by default. Combined with a single endpoints value, the second endpoint is placed so that the given point is the midpoint of the segment: here the endpoint $(1,2)$ and midpoint $(2,3)$ produce a second endpoint at $(3,4)$ . The midpoint can also be paired with slope and length (with no endpoints) to center a segment of a given direction and length on a point.

Attribute Example: midpointOffset

The midpointOffset attribute controls where the midpoint point sits along the segment: 0 (the default) is the midpoint, -1 is the first endpoint, and 1 is the second endpoint. With the point $P=(0,0)$ held fixed and a horizontal segment of length $4$ , an offset of $0$ gives endpoints $(-2,0)$ and $(2,0)$ ; an offset of $-1$ gives $(0,0)$ and $(4,0)$ ; and an offset of $1$ gives $(-4,0)$ and $(0,0)$ .

Property Examples

Property Example: numDimensions

The numDimensions property returns the number of dimesions of the <lineSegment>.

Property Example: length

The length property returns the length of the <lineSegment>.

Property Example: slope

The slope property returns the slope of the <lineSegment>.

Property Example: midpoint

The midpoint property returns the actual midpoint of the <lineSegment>, i.e. the average of its endpoints.

Property Example: midpoint versus the midpoint attribute

The midpoint attribute and the midpoint property are the same point by default, but they differ when midpointOffset is nonzero. Here midpointOffset is 0.5, so the attribute point P $=(0,0)$ sits three-quarters of the way along the segment while the midpoint property reports the segment’s actual midpoint, $(-1,0)$ . Both marked points are draggable: drag either to reposition the segment and watch them stay distinct. They coincide only when midpointOffset returns to 0.

line lorem

<lineSegment>