<point>

<point> is a Graphical component that renders a point on a <graph>.

Attributes and Properties

Example: Default <point>

Here a default <point> is illustrated without any additional attributes.

Example: <point> with nested coordinates

The initial coordinates of a <point> may be specified between opening and closing tags.

Example: <point> location specified with attributes

Three different ways to specify the coordinates of a <point> using its attributes are illustrated.

Example: A labeled <point>

Point labels can be created either with the shortcut attribute labelIsName or by giving the <point> a <label> child.

Example: Points of different styles

Points with standard styleNumbers one through six are illustrated. If unspecified, styleNumber = 1 is the default value.

Example: <point> constrained to a grid

Points can take <constraints> as children. Several different types of constraints are possible; in this example, the <constrainToGrid/> and <attractToGrid/> constraints are illustrated.

Example: <point> constrained to a <line>

Points can take <constraints> as children. Several different types of constraints are possible. In this case, the <constrainTo> constraint references a named <line>.

Example: An animated <point>

A <point> is animated by paraterizing its coordinates with respect to the <number> t. The parameter is animated using the <animateFromSequence/> component.

Example: Points that break the universe

Although point C depends on point B which depends on point A which, in turn, depends on point C, Doenet can determine that there is actually no circular dependency in their relationship.

This example also illustrates how one can change a point either by dragging it or by changing a <mathInput/> that is bound to one of its coordinates.

Attribute Example: draggable

<graph size="small">
  <point>(-6,0)
    <label>I'm free!</label>
  </point>
  <point draggable="false" styleNumber="2">
    (6,0)
    <label>I'm stuck!</label>
  </point>
</graph>

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

Attribute Example: x, y

<p><m>p = $p</m></p>
 
<graph size="small">
  <point name="p" x="3" y="2"/>
</graph>

The x and y attributes are used to specify isolated <point> coordinates.

Attribute Example: coords

<p><m>p = $p</m></p>
 
<graph size="small">
  <point name="p" coords="(2,3)"/>
</graph>

The coords attribute specifies the <point> coordinates.

Attribute Example: xs

<p><m>p = $p</m></p>
 
<graph size="small">
  <point name="p" xs="2 3"/>
</graph>

The xs attribute specifies the point’s location as a list of displacements.

Attribute Example: labelPosition

<graph size="small" displayYAxis="false" displayXAxis="false">
  <point name="A" labelPosition="upperleft" coords="(-4,4)" labelIsName/>
  <point name="B" labelPosition="upperright" coords="(4,4)" labelIsName/>
  <point name="C" labelPosition="top" coords="(0,4)" labelIsName/>
  <point name="D" labelPosition="left" coords="(-4,0)" labelIsName/>
  <point name="E" labelPosition="right" coords="(4,0)" labelIsName/>
  <point name="F" labelPosition="lowerleft" coords="(-4,-4)" labelIsName/>
  <point name="G" labelPosition="bottom" coords="(0,-4)" labelIsName/> 
  <point name="H" labelPosition="lowerright" coords="(4,-4)" labelIsName/>
</graph>

The labelPosition attribute specifies the location of the point’s label. Valid values are upperleft, upperright, top, left, right, lowerleft, bottom, lowerright. The default value is upperright.

Attribute Example: showCoordsWhenDragging

<p>Drag each of the points to observe the difference.</p>
<graph size="small">
  <point name="A" coords="(-6,4)">
    <label>Showing</label>
  </point>
  <point name="B" showCoordsWhenDragging="false" coords="(4,4)">
    <label>Not showing</label>
  </point>
</graph>

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

Attribute Example: hideOffGraphIndicator

<p>To see both points A and B, use the (-) button at the bottom of the graph to zoom out.</p>
<graph size="small">
  <point name="A" labelIsName coords="(-15,4)" hideOffGraphIndicator/>
  <point name="B" labelIsName coords="(15,4)"/>
</graph>

By default, when a <point> is dragged outside the extents of the <graph>, or when a point is located outside the extents, an triangle-shaped indicator appears at the edge of the <graph>. The user can either click this indicator to bring the <point> back to the position of the cursor, or zoom out until the <point> is visible again.

In this example, only one indicator appears initially, since point A has the hideOffGraphIndicator attribute specified. The student would not be aware that point A exists, until zooming out sufficiently far on the graph.

Attribute Example: Standard graphical attributes

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

Property Example: Attributes as properties

The above listed <point> attributes are also accessible as properties.

Property Example: numDimensions

The numDimensions property renders the number of dimensions required to define the point.

Property Example: latex

The latex property renders the latex code associated with rendering the coordinates of the <point>.

Property Example: constraintUsed

The constraintUsed property renders the boolean value corresponding to whether the current location of the <point> is utilizing the specified constraint - in this case, an <attractToGrid/> constraint.