figureone
    Preparing search index...

    Class default

    FigureElementCollection representing a polyline.

    This object defines a convient and powerful polyline FigureElementCollection that includes a solid or dashed, open or closed polyline, arrows, angle annotations for polyline corners, side annotations for straight lines between points and move pads at polyline points to dynamically adjust the polyline.

    See COL_Polyline for the options that can be used when creating the line.

    Available notifications:

    To test examples below, append them to the boilerplate.

    // Polyline with angle annotations
    figure.add({
      name: 'p',
      make: 'collections.polyline',
      points: [[1, 0], [0, 0], [0.5, 1], [1.5, 1]],
      arrow: 'triangle',
      angle: {
        label: null,
        curve: {
          radius: 0.3,
        },
      }
    });

    // Triangle with unknown angle
    figure.add({
      name: 'p',
      make: 'collections.polyline',
      points: [[1, 1], [1, 0], [0, 0]],
      close: true,
      side: {
        label: null,
      },
      angle: {
        label: {
          text: '?',
          offset: 0.05,
        },
        curve: {
          radius: 0.4,
        },
        show: [1],
      },
    });

    // Dimensioned square
    figure.add({
      name: 'p',
      make: 'collections.polyline',
      points: [[0, 1], [1, 1], [1, 0], [0, 0]],
      close: true,
      side: {
        showLine: true,
        offset: 0.2,
        color: [0, 0, 1, 1],
        arrow: 'barb',
        width: 0.01,
        label: null,
        dash: [0.05, 0.02],
        0: { label: { text: 'a' } },    // Customize side 0
      },
      angle: {
        curve: {
          autoRightAngle: true,
          radius: 0.3,
        },
      },
    });

    // User adjustable polyline
    figure.add({
      name: 'p',
      make: 'collections.polyline',
      points: [[-0.5, 1], [1, 1], [0, 0], [1, -0.5]],
      dash: [0.05, 0.02],
      pad: {
        radius: 0.2,
        color: [1, 0, 0, 0.5],    // make alpha 0 to hide pad
        isMovable: true,
      },
    });

    // Annotations that automatically updates as user changes triangle
    figure.add({
      name: 'p',
      make: 'collections.polyline',
      points: [[-1, 1], [1, 1], [0, 0]],
      close: true,
      makeValid: {
        shape: 'triangle',
        hide: {
          minAngle: Math.PI / 8,
        },
      },
      side: {
        showLine: true,
        offset: 0.2,
        color: [0.3, 0.6, 1, 1],
        arrow: 'barb',
        width: 0.01,
        label: {
          text: null,
        },
      },
      angle: {
        label: null,
        curve: { radius: 0.25 },
      },
      pad: {
        radius: 0.4,
        color: [1, 0, 0, 0.005],
        isMovable: true,
      },
    });

    Hierarchy (View Summary)

    Index

    Methods

    setScene setPosition setRotation setScale setTransform setScenario saveScenario getPath transformPoint spaceTransformMatrix getScale getRotation getPosition setFigurePosition setPositionToElement setTouchable setMove setMovable toggleShow getTransform isMoving toFront toBack add pulse getElement getElements get show hide getBorder setColor setDimColor undim dim getAllPrimitives getAllElements recreateAtlases getChildren isAnimating updatePoints reversePoints setPositionWithoutMoving setRotationWithoutMoving setScaleWithoutMoving hideAngles hideSides showAngles showSides

    Methods

    • Conveniently set the first scale of the element's transform.

      Parameters

      • scaleOrX: number | TypeParsablePoint

        horizontal scale - either define as full x-y point, or as a number. If scaleOrX is a number and y is null, then both x and y will be equally scaled

      • y: number | null = null

        y coordinate if scaleOrX is a number (null)

      • z: number = 1

      Returns void

    • Transform a point between 'draw', 'local', 'figure', 'gl' and 'pixel' spaces.

      plane is only needed when converting from pixel space (a 2D space) to 'figure', 'local' or 'draw' spaces (a 3D space). A ray from the pixel is drawn into the screen and the intersection with the defined plane is returned.

      'pixel' to 'gl' is also a 2D to 3D transformation, but in this case the XY plane at z = 0 is used in gl space.

      Parameters

      • point: TypeParsablePoint
      • fromSpace: "figure" | "pixel" | "gl" | "local" | "draw"

        space to convert point from

      • toSpace: "figure" | "pixel" | "gl" | "local" | "draw"

        space to convert point to

      • toSpacePlane: TypeParsablePlane = ...

      Returns Point

    • Return the first rotation in the element's transform.

      Parameters

      • normalize: "" | "0to360" | "-180to180" = ''

        how to normalize the returned angle where '' returns the raw angle

      Returns number

      scale

    • Get position of element

      By default the first translation of the element's transform is returned. This is effectively the element's location in 'local' coordinates.

      The position of the element relative to its horizontal and vertical bounds can also be returned. Use xAlign to find the x coordinate of the left, center, right or percentage width from left of the element. Use yAlign to find the bottom, middle, top or percentage height from bottom of the element.

      Parameters

      • space: TypeCoordinateSpace = 'local'

        the space to return the position in

      • xAlign: number | "left" | "right" | "center" | "location" = 'location'

        horizontal alignment of position. Use a number to define the horizontal position in percentage width from the left.

      • yAlign: number | "top" | "bottom" | "middle" | "location" = 'location'

        vertical alignment of position. Use a number to define the vertical position in percentage height from the bottom.

      Returns Point

    • Add a figure element to this collection.

      If adding an array of elements, then the added elements will be returned in an array (even if only one element is added). If not adding an array, then that single element will be returned.

      Parameters

      Returns any

      added element, or array of added elements

      // Add name and element
      const collection = figure.add({ make: 'collection' });
      const element = figure.primitives.polygon({ radius: 1 });
      collection.add('name', element);

      // Element only (name will be autogenerated)
      const collection = figure.add({ make: 'collection' });
      const element = figure.primitives.polygon({ radius: 1 });
      collection.add(element);

      // Element definition (if no name is provided, then name will
      // be auto generated)
      const collection = figure.add({ make: 'collection' });
      collection.add({
        make: 'polygon',
        radius: 1,
      });

      // Array of elements
      const collection = figure.add({ make: 'collection' });
      const polygon1 = figure.primitives.polygon({ radius: 1 });
      collection.add([
        polygon1,
        {
          make: 'polygon',
          radius: 0.2,
          color: [0, 0, 1, 1],
        },
      ]);

    • Pulse element.

      An element can be pulsed in scale, a rotation or a translation.

      The scale pulse can either be a single pulse, or a number of copies with a range of scales - which has the effect of making regular polygons thick.

      Either pass in a callback, or an options object defining the pulse and callback.

      Parameters

      • optionsOrElementsOrDone:
            | (string | FigureElement)[]
            | OBJ_Pulse & { elements?: (string | FigureElement)[] }
            | ((arg: any) => void)
            | null
            | undefined = null
      • done: ((arg: any) => void) | null | undefined = null

      Returns void

    • Get element from an element path with '.' separators.

      For instance, if a collection has a child collection 'a', which has a child primitive 'b', then the path would be: 'a.b'.

      Parameters

      Returns any

      element at path. If elementPath is null, then this element is returned. If elementPath is invalid then null is returned.

      element.getElement

      // Get all the elements from a figure
      figure.add(
        {
          name: 'c',
          make: 'collection',
          elements: [
            {
              name: 'tri',
              make: 'triangle',
              height: 0.4,
              width: 0.4,
            },
            {
              name: 'text',
              make: 'text',
              text: 'triangle',
              position: [0, -0.4],
              xAlign: 'center',
            },
          ],
        },
      );

      const c = figure.getElement('c');
      // Elements within collections can be found with dot notation
      const tri = figure.getElement('c.tri');
      // Or the collection can be queried directly
      const text = c.getElement('text');

    • Get the border or touchBorder of a FigureElementCollection in a defined coordinate space.

      Parameters

      • space: Type3DMatrix | TypeCoordinateSpace = 'local'

        ('local)

      • border: "border" | "touchBorder" = 'border'

        ('border')

      • children: (string | FigureElement)[] | null | undefined = null

        choose specific children only - use null for all children (null)

      • shownOnly: boolean = true

        if true then only children that are shown will be used (true)

      Returns any[]

    • Reverse points in the polyline.

      Will publish SUBSCRIPTION_PolylineUpdatePoints unless doNotPublishUpdatePoints is true.

      Parameters

      • doNotPublishUpdatePoints: boolean = true

        if true the updatePoints subscription will not be published.

      Returns void

    • The Collections Polyline is a FigureElementCollection, with a transform that includes a translation, or position, transform element.

      Changing the position element of the transform would normally move everything in the collection. This method instead changes the position without moving everything by updating the polyline points with an offset that is the opposite new position.

      As an example, if a rotation around the second point of a polyline is desired, then setPositionWithoutMoving at the point before rotating.

      Parameters

      • newPositionPointOrX: number | Point
      • newPositionY: number = 0

      Returns void

    • The Collections Polyline is a FigureElementCollection, with a transform that includes a rotation transform element.

      Changing the rotation element of the transform would normally rotate everything in the collection. This method instead changes the rotation without rotating everything by updating the polyline points with a rotation that is the negative of the newRotation.

      Parameters

      • newRotation: number

      Returns void

    • The Collections Polyline is a FigureElementCollection, with a transform that includes a scale transform element.

      Changing the scale element of the transform would normally scale everything in the collection. This method instead changes the scale without scaling everything by updating the polyline points with a scale that is the inverse of the new scale.

      Parameters

      • newScalePointOrX: number | Point
      • newScaleY: number = 0

      Returns void

    Settings

    Member Visibility

    On This Page

    Methods