JSXGraph 1.11.0beta1 Reference

JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class JXG.Board

      ↳ JXG.Board

JXG.Board controls all properties and methods used to manage a geonext board like managing geometric elements, managing mouse and touch events, etc. You probably don't want to use this constructor directly. Please use JXG.JSXGraph.initBoard to initialize a board.

Defined in: board.js.

See:

JXG.CoordsElement#moveAlong

JXG.CoordsElement#moveTo

JXG.CoordsElement#visit

Default Value:

35

Default Value:

false

var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5, 5, 5, -5],
        axis: true
    });

See:

JXG.Board#maxBoundingBox

JXG.Board#keepAspectRatio

Default Value:

[-5, 5, 5, -5]

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5], axis: true,
    pan: {
        enabled: true,
        needTwoFingers: true,
    },
    browserPan: true,
    zoom: {
        enabled: false
    }
});

var p1 = board.create('point', [1, -1]);
var p2 = board.create('point', [2.5, -2]);
var li1 = board.create('line', [p1, p2]);

See:

JXG.Board#pan

Default Value:

false

See:

JXG.Board#dblClickSuppressClick

Default Value:

600

See:

JXG.Board#clickDelay

Default Value:

false

const board = JXG.JSXGraph.initBoard('id', {
    boundingbox: [-5, 5, 5, -5], axis:true,
    defaultAxes: {
        x: {
          name: 'Distance (mi)',
          withLabel: true,
          label: {
            position: 'rt',
            offset: [-5, 15],
            anchorX: 'right'
          }
        },
        y: {
          withLabel: true,
          name: 'Y',
          label: {
            position: 'rt',
            offset: [-20, -5],
            anchorY: 'top'
          }
        }
    }
});

 // Display ticks labels as fractions
 var board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-1.2, 2.3, 1.2, -2.3],
     axis: true,
     defaultAxes: {
         x: {
             ticks: {
                 label: {
                     useMathJax: true,
                     display: 'html',
                     toFraction: true
                 }
             }
         },
         y: {
             ticks: {
                 label: {
                     useMathJax: true,
                     display: 'html',
                     toFraction: true
                 }
             }
         }
     }
 });

Default Value:

{x: {name:'x'}, y: {name: 'y'}}

See:

JXG.Board#title

Default Value:

''

Default Value:

false (meaning window.document)

drag: {
  enabled: true   // Allow dragging
}

Default Value:

{enabled: true}

var board = JXG.JSXGraph.initBoard('35bec5a2-fd4d-11e8-ab14-901b0e1b8723',
            {boundingbox: [-8, 8, 8,-8], axis: true,
            showcopyright: false,
            showFullscreen: true,
            fullscreen: {
                 symbol: '\u22c7',
                 scale: 0.95
             }
            });
var pol = board.create('polygon', [[0, 1], [3,4], [1,-4]], {fillColor: 'yellow'});

See:

JXG.Board#showFullscreen

JXG.AbstractRenderer#drawNavigationBar

Default Value:

svg code

Default Value:

true

// Set the board-wide locale and use individual
// options for a text.
const board = JXG.JSXGraph.initBoard(BOARDID, {
    axis: true,
    intl: {
        enabled: true,
        locale: 'de-DE'
    },
    boundingbox:[-0.5, 0.5, 0.5, -0.5]
});

var t = board.create('text', [0.05, 0.2, -Math.PI*100], {
        digits: 2,
        intl: {
                enabled: true,
                options: {
                    style: 'unit',
                    unit: 'celsius'
                }
            }
    });

// Here, locale is disabled in general, but enabled for the horizontal
// axis and the infobox.
const board = JXG.JSXGraph.initBoard(BOARDID, {
    boundingbox: [-0.5, 0.5, 0.5, -0.5],
    intl: {
        enabled: false,
        locale: 'de-DE'
    },
    keepaspectratio: true,
    axis: true,
    defaultAxes: {
        x: {
            ticks: {
                intl: {
                        enabled: true,
                        options: {
                            style: 'unit',
                            unit: 'kilometer-per-hour',
                            unitDisplay: 'narrow'
                        }
                }
            }
        },
        y: {
            ticks: {
            }
        }
    },
    infobox: {
        fontSize: 12,
        intl: {
            enabled: true,
            options: {
                minimumFractionDigits: 4,
                maximumFractionDigits: 5
            }
        }
    }
});

var p = board.create('point', [0.1, 0.1], {});

See:

Integral#label

Slider#intl

Text#intl

Ticks#intl

JXG.Board.infobox

Default Value:

{enabled: false}

See:

JXG.Board#boundingBox

JXG.Board#maxBoundingBox

JXG.Board#setBoundingBox

Default Value:

false

var board = JXG.JSXGraph.initBoard("jxgbox", {boundingbox: [-5,5,5,-5],
    axis: true,
    showCopyright:true,
    showNavigation:true,
    keyboard: {
        enabled: true,
        dy: 30,
        panShift: true,
        panCtrl: false
    }
});

See:

JXG.Board#keyDownListener

JXG.Board#keyFocusInListener

JXG.Board#keyFocusOutListener

Default Value:

{enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}

var board = JXG.JSXGraph.initBoard(BOARDID,
         {
             boundingbox: [-8, 8, 8,-8],
             axis: true,
             logging: {enabled: true},
             showcopyright: false,
             shownavigation: false
         });
var A = board.create('point', [-4, 0], { name: 'A' });
var B = board.create('point', [1, 2], { name: 'B' });
var showUserLog = function() {
    var txt = '';

    for (let i = 0; i < board.userLog.length; i++) {
        txt += JSON.stringify(board.userLog[i]) + '\n';
    }
    alert(txt);
};
var but = board.create('button', [4, 4, 'Show user log', showUserLog]);

See:

JXG.Board#userLog

Default Value:

{enabled: false}

var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingBox: [-5, 5, 5, -5],
        maxBoundingBox: [-8, 8, 8, -8],
        pan: {enabled: true},
        axis: true
    });

See:

JXG.Board#boundingBox

Default Value:

[-Infinity, Infinity, Infinity, -Infinity]

Default Value:

40

See:

JXG.Board#generateName

Default Value:

1

Default Value:

'none'

board.setAttribute({moveTarget: null});
board.removeEventHandlers();
board.addEventHandlers();

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5,5,5,-5],
        axis: true,
        moveTarget: document
    });

Default Value:

null

See:

JXG.Board#offsetY

Default Value:

0

See:

JXG.Board#offsetX

Default Value:

0

pan: {
  enabled: true   // Allow panning
  needTwoFingers: false, // panning is done with two fingers on touch devices
  needShift: true, // mouse panning needs pressing of the shift key
}

See:

JXG.Board#browserPan

 {
    fullscreen: true / false,
    keyboard: true / false,
    pointer: true / false,
    resize: true / false,
    wheel: true / false
 }

See:

JXG.Board#keyboard

JXG.Board.registerResizeEvent

JXG.Board.registerFullscreenEvent

Default Value:

true

Default Value:

'auto'

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-5,5,5,-5],
        keepAspectRatio: true,
        axis: true,
        resize: {enabled: true, throttle: 200}
    });

See:

JXG.Board#startResizeObserver

JXG.Board#resizeListener

Default Value:

{enabled: true, throttle: 10}

selection: {
  enabled: false,
  name: 'selectionPolygon',
  needShift: false,  // mouse selection needs pressing of the shift key
  needCtrl: true,    // mouse selection needs pressing of the shift key
  fillColor: '#ffff00'
}

board.on('stopselecting', function(){
    var box = board.stopSelectionMode(),
    // bbox has the coordinates of the selectionr rectangle.
    // Attention: box[i].usrCoords have the form [1, x, y], i.e.
    // are homogeneous coordinates.
    bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));
    // Set a new bounding box
    board.setBoundingBox(bbox, false);
});

See:

JXG.Board#startSelectionMode

JXG.Board#stopSelectionMode

See:

JXG.AbstractRenderer#drawNavigationBar

Default Value:

false

Default Value:

true

See:

JXG.Board#fullscreen

JXG.AbstractRenderer#drawNavigationBar

JXG.AbstractRenderer#drawNavigationBar

Default Value:

false

See:

Point#showInfobox

Default Value:

true

See:

JXG.AbstractRenderer#drawNavigationBar

Default Value:

true

See:

JXG.AbstractRenderer#drawNavigationBar

Default Value:

false

See:

JXG.AbstractRenderer#drawNavigationBar

Default Value:

false

See:

JXG.AbstractRenderer#drawNavigationBar

Default Value:

true

Default Value:

false

Default Value:

false

 const board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-5, 5, 5, -5], axis: true,
     theme: 'mono_thin'
 });

 var a = board.create('slider', [[1, 4], [3, 4], [-10, 1, 10]]);
 var p1 = board.create('point', [1, 2]);
 var ci1 = board.create('circle', [p1, 0.7]);
 var cu = board.create('functiongraph', ['x^2']);
 var l1 = board.create('line', [2, 3, -1]);
 var l2 = board.create('line', [-5, -3, -1], { dash: 2 });
 var i1 = board.create('intersection', [l1, l2]);
 var pol = board.create('polygon', [[1, 0], [4, 0], [3.5, 1]]);
 var an = board.create('angle', [pol.vertices[1], pol.vertices[0], pol.vertices[2]]);
 var se = board.create('sector', [pol.vertices[1], pol.vertices[2], pol.vertices[0]]);
 var ci1 = board.create('circle', [[-3, -3], 0.7], { center: { visible: true } });

Default Value:

'default'

See:

JXG.Board#description

Default Value:

''

zoom: {
  enabled: true,  // turns off zooming completely, if set to false.
  factorX: 1.25,  // horizontal zoom factor (multiplied to JXG.Board#zoomX)
  factorY: 1.25,  // vertical zoom factor (multiplied to JXG.Board#zoomY)
  wheel: true,    // allow zooming by mouse wheel
  needShift: true,  // mouse wheel zooming needs pressing of the shift key
  min: 0.001,       // minimal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomOut
  max: 1000.0,      // maximal values of JXG.Board#zoomX and JXG.Board#zoomY, limits zoomIn
  center: 'auto',   // 'auto': the center of zoom is at the position of the mouse or at the midpoint of two fingers
                    // 'board': the center of zoom is at the board's center
  pinch: true,      // pinch-to-zoom gesture for proportional zoom
  pinchHorizontal: true, // Horizontal pinch-to-zoom zooms horizontal axis. Only available if keepaspectratio:false
  pinchVertical: true,   // Vertical pinch-to-zoom zooms vertical axis only. Only available if keepaspectratio:false
  pinchSensitivity: 7    // Sensitivity (in degrees) for recognizing horizontal or vertical pinch-to-zoom gestures.
}

See:

JXG.Board#showZoom

Default Value:

See above

See:

JXG.Board#zoomY

Default Value:

1.0

See:

JXG.Board#zoomX

Default Value:

1.0

Default Value:

false

Default Value:

[0, 0]

Default Value:

'mouse'

See:

JXG.Board#resizeListener

Default Value:

false

See:

JXG.Board#scrollListener

Default Value:

false

See:

JXG.Board#updateQuality

See:

JXG.Board#updateQuality

See:

JXG.Board#updateQuality

See:

JXG.Board#addChild

JXG.Board#removeChild

Default Value:

2

See:

JXG.Board#drag_dy

See:

JXG.Board#drag_dx

See:

JXG.Board#moveObject

See:

JXG.GeonextReader.readGeonext

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

Default Value:

false

See:

JXG.Board#touches

Default Value:

false

Default Value:

false

Default Value:

[]

Default Value:

[ [0,0], [0,0] ]

Default Value:

false

See:

JXG.Board#mouse

See:

JXG.Board#mode

Parameters:

{Object} attr

board attributes, e.g. the subobject board.attr.

Returns:

{Object} pointer to the board to enable chaining.

Parameters:

{Event} evt

The browsers event object.

Returns:

{String} 'mouse', 'pen', or 'touch'

See:

JXG.Board#pointerDownListener

JXG.Board#pointerMoveListener

JXG.Board#initMoveObject

JXG.Board#moveObject

Parameters:

{Event} evt

The browsers event object.

{Array} evtArray

list of event names

Parameters:

{Event} evt

The browsers event object.

{Array} evtArray

list of event names

Parameters:

{Object} evt

Event object

Returns:

{Boolean} true if down event has already been sent.

Parameters:

{Object} evt

Mouse or pen event

{String} action

String containing the action: 'zoom', 'pan', 'selection'. Corresponds to the attribute subobject.

Returns:

{Boolean} true or false.

Parameters:

{Array} pos

Screen coordiates of the move event

Parameters:

pId

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} evt

Event object

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} evt

Event object

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.GeometryElement|Array} object

The object to remove or array of objects to be removed. The element(s) is/are given by name, id or a reference.

{Boolean} saveMethod Optional, Default: false

If saveMethod=true, the algorithm runs through all elements and tests if the element to be deleted is a child element. If this is the case, it will be removed from the list of child elements. If saveMethod=false (default), the element is removed from the lists of child elements of all its ancestors. The latter should be much faster.

Returns:

{JXG.Board} Reference to the board

Parameters:

{String} key

The attribute's name.

value

The new value

Parameters:

{Array} pos

Screen coordiates of the upper left corner of the selection rectangle.

Parameters:

{Object} evt

Event object

Parameters:

{Object} evt

Event object

Parameters:

{JXG.GeometryElement} element

The element which is to be animated.

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.Board} board

A reference to board which will be updated after an update of this board occurred.

Returns:

{JXG.Board} Reference to the board

Parameters:

{String} str

String containing conditional update in geonext syntax

Returns:

{JXG.Board} Reference to the board.

Parameters:

{Function} hook

A function to be called by the board after an update occurred.

{String} m Optional, Default: 'update'

When the hook is to be called. Possible values are mouseup, mousedown and update.

{Object} context Optional, Default: board

Determines the execution context the hook is called. This parameter is optional, default is the board object the hook is attached to.

Returns:

{Number} Id of the hook, required to remove the hook from the board.

Parameters:

{String} type

Event type, e.g. 'drag'

{Object} obj

JSXGraph element object

pos

Returns:

{JXG.Board} Reference to the board

See:

JXG.Board#userLog

Parameters:

{Boolean} appleGestures

If set to false the gesturestart and gesturechange event handlers will not be registered. Since iOS 13, touch events were abandoned in favour of pointer events

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board.

Returns:

{JXG.Board} Reference to the board.

Parameters:

{Event} evt

Event object given by the browser (unused)

Returns:

{Boolean} If the event has been triggered faster than the maximum frame rate, false is returned.

See:

JXG.Board#pointerMoveListener

JXG.Board#touchMoveListener

JXG.Board#mouseMoveListener

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Parameters:

{String} elementType

Type of the element to be constructed given as a string e.g. 'point' or 'circle'.

{Array} parents

Array of parent elements needed to construct the element e.g. coordinates for a point or two points to construct a line. This highly depends on the elementType that is constructed. See the corresponding JXG.create* methods for a list of possible parameters.

{Object} attributes Optional

An object containing the attributes to be set. This also depends on the elementType. Common attributes are name, visible, strokeColor.

Returns:

{Object} Reference to the created element. This is usually a GeometryElement, but can be an array containing two or more elements.

Parameters:

{Curve} c1

JSXGraph curve building the floor where c2 rolls

{Curve} c2

JSXGraph curve which rolls on c1.

{number} start_c1

The parameter t such that c1(t) touches c2. This is the start position of the rolling process

{Number} stepsize

Increase in t in each step for the curve c1

{Number} direction

{Number} time

Delay time for setInterval()

{Array} pointlist

Array of points which are rolled in each step. This list should contain all points which define c2 and gliders on c2.

Examples:

// Line which will be the floor to roll upon.
var line = board.create('curve', [function (t) { return t;}, function (t){ return 1;}], {strokeWidth:6});
// Center of the rolling circle
var C = board.create('point',[0,2],{name:'C'});
// Starting point of the rolling circle
var P = board.create('point',[0,1],{name:'P', trace:true});
// Circle defined as a curve. The circle 'starts' at P, i.e. circle(0) = P
var circle = board.create('curve',[
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.X()+d*Math.cos(t);
          },
          function (t){var d = P.Dist(C),
                          beta = JXG.Math.Geometry.rad([C.X()+1,C.Y()],C,P);
                      t += beta;
                      return C.Y()+d*Math.sin(t);
          },
          0,2*Math.PI],
          {strokeWidth:6, strokeColor:'green'});

// Point on circle
var B = board.create('glider',[0,2,circle],{name:'B', color:'blue',trace:false});
var roll = board.createRoulette(line, circle, 0, Math.PI/20, 1, 100, [C,P,B]);
roll.start() // Start the rolling, to be stopped by roll.stop()

Returns:

{JXG.Board} Reference to the board.

Parameters:

{Boolean} val

true for visible, false for invisible

Returns:

{JXG.Board} Reference to the board.

See:

JXG.Board#updateInfobox

Parameters:

{String} deficiency

Describes the color blindness deficiency which is simulated. Accepted values are 'protanopia', 'deuteranopia', and 'tritanopia'.

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} obj

The object to add.

Parameters:

{Object} evt

fullscreen event object (unused)

Returns:

{JXG.Board} Reference to the board

Returns:

{String} Unique id for a board.

Parameters:

{Object} object

Reference of an JXG.GeometryElement that is to be named.

Returns:

{String} Unique name for the object.

Parameters:

{Event} evt

Browser event object

Returns:

{Boolean}

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Event} evt

Event object containing the mouse coordinates.

Returns:

{Array} Array of elements at the current mouse position.

See:

JXG.Board#getAllUnderMouse

Parameters:

{Event} evt

Event object containing the mouse coordinates.

Returns:

{Array} Array of elements at the current mouse position plus current user coordinates of mouse.

See:

JXG.Board#getUsrCoordsOfMouse

JXG.Board#getAllObjectsUnderMouse

Returns:

{Array} bounding box [x1,y1,x2,y2] upper left corner, lower right corner

Returns:

{Array} Array of coordinates relative the boards container top left corner.

Parameters:

{Event} e

Event object given by the browser.

{Number} i Optional

Only use in case of touch events. This determines which finger to use and should not be set for mouseevents.

Returns:

{Array} Contains the mouse coordinates in screen coordinates, ready for JXG.Coords

Parameters:

{Number} x

X coordinate in screen coordinates

{Number} y

Y coordinate in screen coordinates

Returns:

{Array} Coordinates [x, y] of the mouse in screen coordinates.

See:

JXG.Board#getUsrCoordsOfMouse

Parameters:

{Event} evt

Event object containing the mouse coordinates.

Returns:

{Array} Coordinates [x, y] of the mouse in user coordinates.

See:

JXG.Board#getScrCoordsOfMouse

JXG.Board#getAllUnderMouse

Examples:

board.on('up', function (evt) {
        var a = board.getUsrCoordsOfMouse(evt),
            x = a[0],
            y = a[1],
            somePoint = board.create('point', [x,y], {name:'SomePoint',size:4});
            // Shorter version:
            //somePoint = board.create('point', a, {name:'SomePoint',size:4});
        });

Parameters:

{Number|JXG.Coords} x

User coordinate or JXG.Coords object.

{Number} y Optional

User coordinate. May be omitted in case x is a JXG.Coords object.

Returns:

{Boolean}

Parameters:

{String} text

{JXG.GeometryElement} el Optional

Returns:

{JXG.Board} Reference to the board.

Parameters:

{Number} x

{Number} y

{JXG.GeometryElement} el Optional

The element the mouse is pointing at

Returns:

{JXG.Board} Reference to the board.

Returns:

{JXG.Board} Reference to the board

Parameters:

attributes

Returns:

{JXG.Board} Reference to the board

Parameters:

{Number} x

Current mouse/touch coordinates

{Number} y

current mouse/touch coordinates

{Object} evt

An event object

{String} type

What type of event? 'touch', 'mouse' or 'pen'.

Returns:

{Array} A list of geometric elements.

Parameters:

{Number} x

Current mouse/touch coordinates

{Number} y

Current mouse/touch coordinates

Parameters:

{Event} evt

The browser's event object

See:

JXG.Board#keyboard

JXG.Board#keyFocusInListener

JXG.Board#keyFocusOutListener

Parameters:

{Event} evt

The browser's event object

See:

JXG.Board#keyFocusOutListener

JXG.Board#keyDownListener

JXG.Board#keyboard

Parameters:

{Event} evt

The browser's event object

See:

JXG.Board#keyFocusInListener

JXG.Board#keyDownListener

JXG.Board#keyboard

Parameters:

{JXG.Point} src

Original point which will be deleted

{JXG.Point} dest

New point with the dependencies of src.

{Boolean} copyName

Flag which decides if the name of the src element is copied to the dest element.

Returns:

{JXG.Board} Reference to the board

Parameters:

{Event} evt

The browsers event object.

Parameters:

{Event} evt

The browsers event object.

Parameters:

{Event} evt

The browsers event object.

Returns:

{Boolean} True if no element is found under the current mouse pointer, false otherwise.

Parameters:

{Event} evt

The browsers event object.

Parameters:

{Event} evt

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Number} x

Coordinate

{Number} y

Coordinate

{Object} o

The touch object that is dragged: {JXG.Board#mouse} or {JXG.Board#touches}.

{Object} evt

The event object.

{String} type

Mouse or touch event?

Parameters:

{Number} x

{Number} y

{Boolean} diff Optional, Default: false

Returns:

{JXG.Board} Reference to this board.

Returns:

{null} null

Parameters:

{Event} evt

The browsers event object.

Parameters:

{Event} evt

The browsers event object.

Parameters:

{Event} evt

The browsers event object.

{Object} object

If the object to be dragged is already known, it can be submitted via this parameter

{Boolean} allowDefaultEventHandling Optional, Default: false

If true event is not canceled, i.e. prevent call of evt.preventDefault()

Returns:

{Boolean} false if the first finger event is sent twice, or not a browser, or in selection mode. Otherwise returns true.

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Event} evt

Returns:

{Boolean}

Returns:

{JXG.Board} Reference to the board

Parameters:

{Event} evt Optional

Parameters:

{MediaQueryList} mql

Parameters:

{JXG.GeometryElement} object

The object to remove.

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.Board} board

Reference to the board which will be removed.

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board object.

Parameters:

{Number|function} id

The number you got when you added the hook or a reference to the event handler.

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.GeometryElement|Array} object

The object to remove or array of objects to be removed. The element(s) is/are given by name, id or a reference.

{Boolean} saveMethod

If true, the algorithm runs through all elements and tests if the element to be deleted is a child element. If yes, it will be removed from the list of child elements. If false (default), the element is removed from the lists of child elements of all its ancestors. This should be much faster.

Returns:

{JXG.Board} Reference to the board

Parameters:

{Number} canvasWidth

New width of the container.

{Number} canvasHeight

New height of the container.

{Boolean} dontset Optional, Default: false

If true do not set the CSS width and height of the DOM element.

{Boolean} dontSetBoundingBox Optional, Default: false

If true do not call setBoundingBox(), but keep view centered around original visible center.

Returns:

{JXG.Board} Reference to the board

See:

JXG.Board#startResizeObserver

JXG.Board#startIntersectionObserver

Parameters:

{JXG.GeometryElement} obj

The object to be dragged

{Array} targets

Array of targets. It is changed by this function.

Parameters:

{Event} evt

The browser's event object

See:

JXG.Board#startResizeObserver

JXG.Board#resizeListener

Parameters:

{String|Object|function} str

The name, id or a reference to a JSXGraph element on this board. An object will be used as a filter to return multiple elements at once filtered by the properties of the object.

{Boolean} onlyByIdOrName

If true (default:false) elements are only filtered by their id, name or groupId. The advanced filters consisting of objects or functions are ignored.

Returns:

{JXG.GeometryElement|JXG.Composition}

Examples:

// select the element with name A
board.select('A');

// select all elements with strokecolor set to 'red' (but not '#ff0000')
board.select({
  strokeColor: 'red'
});

// select all points on or below the x axis and make them black.
board.select({
  elementClass: JXG.OBJECT_CLASS_POINT,
  Y: function (v) {
    return v <= 0;
  }
}).setAttribute({color: 'black'});

// select all elements
board.select(function (el) {
  return true;
});

Parameters:

{Object} attributes

An object with attributes.

Returns:

{JXG.Board} Reference to the board

Examples:

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5],
    keepAspectRatio: false,
    axis:true,
    showFullscreen: true,
    showScreenshot: true,
    showCopyright: false
});

board.setAttribute({
    animationDelay: 10,
    boundingbox: [-10, 5, 10, -5],
    defaultAxes: {
        x: { strokeColor: 'blue', ticks: { strokeColor: 'blue'}}
    },
    description: 'test',
    fullscreen: {
        scale: 0.5
    },
    intl: {
        enabled: true,
        locale: 'de-DE'
    }
});

board.setAttribute({
    selection: {
        enabled: true,
        fillColor: 'blue'
    },
    showInfobox: false,
    zoomX: 0.5,
    zoomY: 2,
    fullscreen: { symbol: 'x' },
    screenshot: { symbol: 'y' },
    showCopyright: true,
    showFullscreen: false,
    showScreenshot: false,
    showZoom: false,
    showNavigation: false
});
board.setAttribute('showCopyright:false');

var p = board.create('point', [1, 1], {size: 10,
    label: {
        fontSize: 24,
        highlightStrokeOpacity: 0.1,
        offset: [5, 0]
    }
});

Parameters:

{Array} bbox

New bounding box [x1,y1,x2,y2]

{Boolean} keepaspectratio Optional, Default: false

If set to true, the aspect ratio will be 1:1, but the resulting viewport may be larger.

{String} setZoom Optional, Default: 'reset'

Reset, keep or update the zoom level of the board. 'reset' sets JXG.Board#zoomX and JXG.Board#zoomY to the start values (or 1.0). 'update' adapts these values accoring to the new bounding box and 'keep' does nothing.

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} obj

Reference of an geometry object that needs an id.

{Number} type

Type of the object.

Returns:

{String} Unique id for an element.

Parameters:

{Number} fX

{Number} fY

Returns:

{JXG.Board} Reference to the board.

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} node

DOM object which is in fullscreen mode. It is the wrapper element around the JSXGraph div.

Returns:

{JXG.Board} Reference to the board

See:

JXG.Board#toFullscreen

See:

JXG.Board#startResizeObserver

JXG.Board#resizeListener

See:

JXG.Board#updateContainerDims

JXG.Board#resizeListener

JXG.Board#scrollListener

JXG.Board#resize

	<button onclick='board.startSelectionMode()'>Start</button>

Examples:

//
// Set a new bounding box from the selection rectangle
//
var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingBox:[-3,2,3,-2],
        keepAspectRatio: false,
        axis:true,
        selection: {
            enabled: true,
            needShift: false,
            needCtrl: true,
            withLines: false,
            vertices: {
                visible: false
            },
            fillColor: '#ffff00',
        }
     });

var f = function f(x) { return Math.cos(x); },
    curve = board.create('functiongraph', [f]);

board.on('stopselecting', function(){
    var box = board.stopSelectionMode(),

        // bbox has the coordinates of the selection rectangle.
        // Attention: box[i].usrCoords have the form [1, x, y], i.e.
        // are homogeneous coordinates.
        bbox = box[0].usrCoords.slice(1).concat(box[1].usrCoords.slice(1));

        // Set a new bounding box
        board.setBoundingBox(bbox, false);
 });

Returns:

{JXG.Board} Reference to the board

Parameters:

{Object} node

DOM object which is in fullscreen mode. It is the wrapper element around the JSXGraph div.

Returns:

{JXG.Board} Reference to the board

See:

JXG.Board#toFullscreen

See:

JXG.Board#startIntersectionObserver

See:

JXG.Board#startResizeObserver

Returns:

{Array} Coordinates of the selection rectangle. The array contains two JXG.Coords objects. One the upper left corner and the second for the lower right corner.

Parameters:

{Event} e

Returns:

{Boolean} false

Returns:

{JXG.Board} Reference to the board

Parameters:

{String} id

(Optional) id of the div element which is brought to fullscreen. If not provided, this defaults to the JSXGraph div. However, it may be necessary for the aspect ratio trick which using padding-bottom/top and an out div element. Then, the id of the outer div has to be supplied.

Returns:

{JXG.Board} Reference to the board

Examples:

<div id='jxgbox' class='jxgbox' style='width:500px; height:200px;'></div>
<button onClick='board.toFullscreen()'>Fullscreen</button>

<script language='Javascript' type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:true, boundingbox:[-5,5,5,-5]});
var p = board.create('point', [0, 1]);
</script>

Fullscreen

<div id='outer' style='max-width: 500px; margin: 0 auto;'>
<div id='jxgbox' class='jxgbox' style='height: 0; padding-bottom: 100%'></div>
</div>
<button onClick='board.toFullscreen('outer')'>Fullscreen</button>

<script language='Javascript' type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {
    axis:true,
    boundingbox:[-5,5,5,-5],
    fullscreen: { id: 'outer' },
    showFullscreen: true
});
var p = board.create('point', [-2, 3], {});
</script>

Fullscreen

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Event} evt

Returns:

{Boolean}

Parameters:

{Object} evt

Event from touchMoveListener

Returns:

{Boolean} returns if the origin is moved.

Parameters:

{Event} evt

The browsers event object.

Returns:

{Boolean} ...

Parameters:

{Object} evt

Event from touchStartListener

Returns:

{Boolean} returns if the origin is moved.

Parameters:

{Array} p1

x,y coordinates of first touch

{Array} p2

x,y coordinates of second touch

{Object} o

The touch object that is dragged: {JXG.Board#touches}.

{Object} evt

The event object that lead to this movement.

Parameters:

{Array} tar

Array containing touch event objects: {JXG.Board#touches.targets}.

{object} drag

The object that is dragged:

{Number} id

pointerId of the event. In case of old touch event this is emulated.

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.GeometryElement} drag Optional

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

Parameters:

{Number} width Optional, Default: this.containerObj.offsetWidth

Width of the container element

{Number} height Optional, Default: this.containerObj.offsetHeight

Height of the container element

Returns:

See:

JXG.Board#startResizeObserver

JXG.Board#resizeListener

JXG.Board#resizeContainer

JXG.Board#setBoundingBox

Returns:

{JXG.Board} Reference to this board.

Parameters:

{JXG.GeometryElement} drag

Element that caused the update.

Returns:

{JXG.Board} Reference to the board

Parameters:

m

Returns:

{JXG.Board} Reference to the board

Parameters:

{JXG.GeometryElement} el

A GeometryElement

Returns:

{JXG.Board} Reference to the board

See:

JXG.Board#displayInfobox

JXG.Board#showInfobox

Point#showInfobox

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Returns:

{JXG.Board} Reference to the board

Parameters:

{Array} elements

A set of elements given by id, reference, or name.

Returns:

{JXG.Board} Reference to the board.

Parameters:

{Number} x Optional

{Number} y Optional

Returns:

{JXG.Board} Reference to the board

Parameters:

{Number} x Optional

{Number} y Optional

Returns:

{JXG.Board} Reference to the board

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

See:

JXG.Board#clickDelay

Parameters:

{Event} e

The browser's event object.

See:

JXG.Board#clickDelay

JXG.Board#dblClickSuppressClick

Parameters:

{Event} e

The browser's event object.

var c = board.create('circle', [[1, 1], 2]);
board.on('hit', function(evt, el) {
    console.log('Hit element', el);
});

Parameters:

{Event} e

The browser's event object.

{JXG.GeometryElement} el

The hit element.

target

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

See:

JXG.Board#clickDelay

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

{JXG.GeometryElement} el

The hit element.

target

See:

JXG.Board#hit

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

See:

JXG.Board#clickDelay

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.

{Number} mode

The mode the board currently is in

See:

JXG.Board#mode

Parameters:

{Event} e

The browser's event object.

Parameters:

{Event} e

The browser's event object.