`<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 (11)

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).

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.

showCoordsWhenDragging

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

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 (18)

$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 length of the line segment.

$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 (2D only).

$l.styleDescription

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

$l.styleDescriptionWithNoun

text. Style description including "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.

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>.

line lorem

<lineSegment>