API Docs for: 0.99.4
Show:

Group Class

PSEUDO

Extends JXG.Group
Defined in: src/base/group.js:874
Module: JXG

This element combines a given set of JXG.Point elements to a group. The elements of the group and dependent elements can be translated, rotated and scaled by dragging one of the group elements.

Constructor

Group

(
  • board
  • parents
  • attributes
)
JXG.Group

Parameters:

  • board JXG.Board

    The board the points are on.

  • parents Array

    Array of points to group.

  • attributes Object

    Visual properties (unused).

Returns:

Example:

// Create some free points. e.g. A, B, C, D
        // Create a group
        
        var p, col, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        g = board.create('group', p);
        
<
// Create some free points. e.g. A, B, C, D
        // Create a group
        // If the points define a polygon and the polygon has the attribute hasInnerPoints:true,
        // the polygon can be dragged around.
        
        var p, col, pol, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        
        pol = board.create('polygon', p, {hasInnerPoints: true});
        g = board.create('group', p);
        
// Allow rotations:
        // Define a center of rotation and declare points of the group as "rotation points".
        
        var p, col, pol, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        
        pol = board.create('polygon', p, {hasInnerPoints: true});
        g = board.create('group', p);
        g.setRotationCenter(p[0]);
        g.setRotationPoints([p[1], p[2]]);
        
// Allow rotations:
        // As rotation center, arbitrary points, coordinate arrays,
        // or functions returning coordinate arrays can be given.
        // Another possibility is to use the predefined string 'centroid'.
        
        // The methods to define the rotation points can be chained.
        
        var p, col, pol, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        
        pol = board.create('polygon', p, {hasInnerPoints: true});
        g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[1], p[2]]);
        
// Allow scaling:
        // As for rotation one can declare points of the group to trigger a scaling operation.
        // For this, one has to define a scaleCenter, in analogy to rotations.
        
        // Here, the yellow  point enables scaling, the red point a rotation.
        
        var p, col, pol, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        
        pol = board.create('polygon', p, {hasInnerPoints: true});
        g = board.create('group', p).setRotationCenter('centroid').setRotationPoints([p[2]]);
        g.setScaleCenter(p[0]).setScalePoints(p[1]);
        
// Allow Translations:
        // By default, every point of a group triggers a translation.
        // There may be situations, when this is not wanted.
        
        // In this example, E triggers nothing, but itself is rotation center
        // and is translated, if other points are moved around.
        
        var p, q, col, pol, g;
        col = 'blue';
        p = [];
        p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
        p.push(board.create('point',[2, -1 ], {size: 5, strokeColor:'yellow', fillColor:'yellow'}));
        p.push(board.create('point',[2, 1 ], {size: 5, strokeColor:'red', fillColor:'red'}));
        p.push(board.create('point',[-2, 1], {size: 5, strokeColor:col, fillColor:col}));
        q = board.create('point',[0, 0], {size: 5, strokeColor:col, fillColor:col});
        
        pol = board.create('polygon', p, {hasInnerPoints: true});
        g = board.create('group', p.concat(q)).setRotationCenter('centroid').setRotationPoints([p[2]]);
        g.setScaleCenter(p[0]).setScalePoints(p[1]);
        g.removeTranslationPoint(q);
        

Methods

_addActionPoint

(
  • action
  • point
)
JXG.Group private chainable

Generic method for undefined and undefined

Parameters:

  • action String

    Type of action, 'rotation', 'scale', 'translation'

  • point JXG.Point

    JXG.Point

Returns:

JXG.Group:

returns this group

_removeActionPoint

(
  • action
  • point
)
JXG.Group private chainable

Generic method for undefined and undefined

Parameters:

  • action String

    Type of action, 'rotation', 'scale', 'translation'

  • point JXG.Point

    JXG.Point

Returns:

JXG.Group:

returns this group

_setActionPoints

(
  • action
  • objects
)
JXG.Group private chainable

Generic method for undefined and undefined

Parameters:

  • action String

    Type of action, 'rotation', 'scale', 'translation'

  • objects Array | JXG.Point

    Array of JXG.Point or JXG.Point

Returns:

JXG.Group:

returns this group

_update_apply_transformation

() JXG.Group private chainable

Apply the transformation to all elements of the group

Returns:

JXG.Group:

returns this group

_update_centroid_center

() Array private

Determine the Euclidean coordinates of the centroid of the group.

Returns:

Array:

array of length two,

_update_find_drag_type

() Object private

Determine what the dragging of a group element should do: rotation, translation, scaling or nothing.

Returns:

Object:

Object of the form

{
                        'action': String
                        'id': String
                        'changed': true/false
                    }

add Group

(
  • group
)
JXG.Group chainable

Adds all points in a group to this group.

Parameters:

  • group JXG.Group

    The group added to this group.

Returns:

JXG.Group:

returns this group

addParents

(
  • parents
)
JXG.Object chainable

Adds ids of elements to the array this.parents. This is a copy of undefined.

Parameters:

  • parents Array

    Array of elements or ids of elements. Alternatively, one can give a list of objects as parameters.

Returns:

JXG.Object:

reference to the object itself.

addPoint

(
  • object
)
JXG.Group chainable

Adds a point to this group.

Parameters:

  • object JXG.Point

    The point added to the group.

Returns:

JXG.Group:

returns this group

addPoints

(
  • objects
)
JXG.Group chainable

Adds multiple points to this group.

Parameters:

  • objects Array

    An array of points to add to the group.

Returns:

JXG.Group:

returns this group

addRotationPoint

(
  • point
)
JXG.Group chainable

Adds a point to the set of rotation points of the group. Dragging at one of these points results into a rotation of the whole group around the rotation center of the group {@see JXG.Group#setRotationCenter}.

Parameters:

Returns:

JXG.Group:

returns this group

addScalePoint

(
  • point
  • direction
)
JXG.Group chainable

Adds a point to the set of the scale points of the group. Dragging at one of these points results into a scaling of the whole group.

Parameters:

  • point JXG.Point

    {@link JXG.Point} element.

  • direction String

    Restricts the directions to be scaled. Possible values are 'x', 'y', 'xy'. Default value is 'xy'.

Returns:

JXG.Group:

returns this group

addTranslationPoint

(
  • point
)
JXG.Group chainable

Adds a point to the set of the translation points of the group. Dragging at one of these points results into a translation of the whole group.

Parameters:

Returns:

JXG.Group:

returns this group

getParents

() Array

List of the element ids resp. values used as parents in JXG.Board#create.

Returns:

removePoint

(
  • point
)
JXG.Group chainable

Removes a point from the group.

Parameters:

Returns:

JXG.Group:

returns this group

removeRotationPoint

(
  • point
)
JXG.Group chainable

Removes the rotation property from a point of the group.

Parameters:

Returns:

JXG.Group:

returns this group

removeScalePoint

(
  • point
)
JXG.Group chainable

Removes the scaling property from a point of the group.

Parameters:

Returns:

JXG.Group:

returns this group

removeTranslationPoint

(
  • point
)
JXG.Group chainable

Removes the translation property from a point of the group.

Parameters:

Returns:

JXG.Group:

returns this group

setAttribute

(
  • attributes
)
chainable

Sets an arbitrary number of attributes.

Parameters:

  • attributes Object

    An object with attributes.

setParents

(
  • parents
)
JXG.Object chainable

Sets ids of elements to the array this.parents. This is a copy of undefined First, this.parents is cleared. See undefined.

Parameters:

  • parents Array

    Array of elements or ids of elements. Alternatively, one can give a list of objects as parameters.

Returns:

JXG.Object:

reference to the object itself.

setProperty

() deprecated

Use setAttribute

setRotationCenter

(
  • object
)
JXG.Group chainable

Sets the center of rotation for the group. This is either a point or the centroid of the group.

Parameters:

  • object JXG.Point | String

    A point which will be the center of rotation, the string "centroid", or an array of length two, or a function returning an array of length two.

Returns:

JXG.Group:

returns this group

setRotationPoints

(
  • objects
)
JXG.Group chainable

Sets the rotation points of the group. Dragging at one of these points results into a rotation of the whole group around the rotation center of the group {@see JXG.Group#setRotationCenter}.

Parameters:

  • objects Array | JXG.Point

    Array of {@link JXG.Point} or arbitrary number of {@link JXG.Point} elements.

Returns:

JXG.Group:

returns this group

setScaleCenter

(
  • object
)
JXG.Group chainable

Sets the center of scaling for the group. This is either a point or the centroid of the group.

Parameters:

  • object JXG.Point | String

    A point which will be the center of scaling, the string "centroid", or an array of length two, or a function returning an array of length two.

Returns:

JXG.Group:

returns this group

setScalePoints

(
  • objects
  • direction
)
JXG.Group chainable

Sets the scale points of the group. Dragging at one of these points results into a scaling of the whole group. By default, all points of the group are translation points.

Parameters:

  • objects Array | JXG.Point

    Array of {@link JXG.Point} or arbitrary number of {@link JXG.Point} elements.

  • direction String

    Restricts the directions to be scaled. Possible values are 'x', 'y', 'xy'. Default value is 'xy'.

Returns:

JXG.Group:

returns this group

setTranslationPoints

(
  • objects
)
JXG.Group chainable

Sets the translation points of the group. Dragging at one of these points results into a translation of the whole group.

By default, all points of the group are translation points.

Parameters:

  • objects Array | JXG.Point

    Array of {@link JXG.Point} or arbitrary number of {@link JXG.Point} elements.

Returns:

JXG.Group:

returns this group

ungroup

() JXG.Group chainable

Releases all elements of this group.

Returns:

JXG.Group:

returns this (empty) group

update

(
  • drag
)
JXG.Group chainable

Sends an update to all group members. This method is called from the points' coords object event listeners and not by the board.

Parameters:

Returns:

JXG.Group:

returns this group

Properties

board

JXG.Board

Reference to the board associated with the group.

coords

Object protected

Object (dictionary) containg the coords of all group elements. Needed for update sequence.

elementClass

Number final

Default: `JXG.OBJECT_CLASS_POINT`

id

String

Id of group

objects

Object

Object (dictionary) containing the group's elements. Key is the id of the element.

parents

Array private

Parent elements of the group

rotationCenter

String | JXG.Point

Center of rotation of this group. If there are rotation points defined for the group and the user drags a rotation point, the group is rotated about it's rotation center. Possible values are centroid or JXG.Point.

Default: 'centroid'

rotationPoints

Array

Set of group elements which trigger a rotation when dragged.

scaleCenter

String | JXG.Point

Scaling center of this group. If there are scale points defined for the group and the user drags a scale point, the group is scaled in relation to it's scale center. Possible values are centroid or JXG.Point.

Default: null

scaleDirections

Object

List of scale directions for each element of scalePoints. Possible values are 'x', 'y', and 'xy'. Default value is 'xy'.

scalePoints

Array

Set of group elements which trigger a scale operation when dragged.

translationPoints

Array

Set of group elements which trigger a translation when dragged.