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.
Constructor Attributes | Constructor Name and Description |
---|---|
JXG.Board(container, renderer, id, origin, zoomX, zoomY, unitX, unitY, canvasWidth, canvasHeight, attributes)
Constructs a new Board object.
|
Field Attributes | Field Name and Description |
---|---|
Time (in msec) between two animation steps.
|
|
Show default axis.
|
|
Bounding box of the visible area in user coordinates.
|
|
Enable browser scrolling on touch interfaces if the user double taps into an empty region
of the board.
|
|
Maximum time delay (in msec) between two clicks to be considered
as double click.
|
|
If false (default), JSXGraph follows the JavaScript standard and fires before a dblclick event two
click events.
|
|
Attributes for the default axes in case of the attribute
axis:true in JXG.JSXGraph#initBoard.
|
|
Description string for the board.
|
|
Supply the document object.
|
|
Control the possibilities for dragging objects.
|
|
Attribute(s) to control the fullscreen icon.
|
|
If set true and
hasPoint() is true for both an element and it's label,
the element (and not the label) is taken as drag element.
|
|
Support for internationalization of number formatting.
|
|
If set to true, the ratio between horizontal and vertical unit sizes
stays constant - independent of size changes of the hosting HTML div element.
|
|
Control using the keyboard to change the construction.
|
|
If enabled, user activities are logged in array "board.userLog".
|
|
Maximal bounding box of the visible area in user coordinates.
|
|
Maximum frame rate of the board, i.e.
|
|
Maximum number of digits in automatic label generation.
|
|
Change redraw strategy in SVG rendering engine.
|
|
Element which listens to move events of the pointing device.
|
|
A number that will be added to the absolute position of the board used in mouse coordinate
calculations in JXG.Board#getCoordsTopLeftCorner.
|
|
A number that will be added to the absolute position of the board used in mouse coordinate
calculations in JXG.Board#getCoordsTopLeftCorner.
|
|
Control the possibilities for panning interaction (i.e.
|
|
Allow user interaction by registering pointer events (including mouse and
touch events), fullscreen, keyboard, resize, and zoom events.
|
|
Default rendering engine.
|
|
Control if JSXGraph reacts to resizing of the JSXGraph container element
by the user / browser.
|
|
Attributes to control the screenshot function.
|
|
Control the possibilities for a selection rectangle.
|
|
Show a button which allows to clear all traces of a board.
|
|
Show copyright string in canvas.
|
|
Show a button in the navigation bar to start fullscreen mode.
|
|
If true, the infobox is shown on mouse/pen over for all points
which have set their attribute showInfobox to 'inherit'.
|
|
Display of navigation arrows and zoom buttons in the navigation bar.
|
|
Show a button in the navigation bar to force reload of a construction.
|
|
Show a button in the navigation bar to enable screenshots.
|
|
Display of zoom buttons in the navigation bar.
|
|
If true the first element of the set JXG.board.objects having hasPoint==true is taken as drag element.
|
|
If true, when read from a file or string - the size of the div can be changed by the construction text.
|
|
Set a visual theme for a board.
|
|
Title string for the board.
|
|
Set a viewport of the board.
|
|
Control the possibilities for zoom interaction.
|
|
Zoom factor in horizontal direction.
|
|
Zoom factor in vertical direction.
|
Field Attributes | Field Name and Description |
---|---|
<private> |
Keeps a list of pointer devices which are currently touching the screen.
|
<private> |
Offset for large coords elements like images
|
<private> |
Stores the input device used in the last down or move event.
|
<private> |
A flag which tells us if a resize is in process
|
<private> |
A flag which tells us if the user is scrolling the viewport
|
Alias of JXG.Board.on.
|
|
Stores all the objects that are currently running an animation.
|
|
Board attributes
|
|
<constant> |
Board is in drag mode, objects aren't highlighted on mouse over and the object referenced in
JXG.Board#mouse is updated on mouse movement.
|
<constant> |
In this mode a mouse move changes the origin's screen coordinates.
|
<constant> |
Board is in no special mode, objects are highlighted on mouse over and objects may be
clicked to start drag&drop.
|
<constant> |
Update is made with high quality, e.g.
|
<constant> |
Update is made with high quality, e.g.
|
<constant> |
Update is made with low quality, e.g.
|
<private> |
Canvas Height
|
<private> |
Canvas width.
|
The html-id of the html element containing the board.
|
|
Pointer to the html element containing the board.
|
|
Cached result of getCoordsTopLeftCorner for touch/mouseMove-Events to save some DOM operations.
|
|
The current color blindness deficiency is stored in this property.
|
|
An array containing all other boards that are updated after this board has been updated.
|
|
Dimension of the board.
|
|
Collects all elements that triggered a mouse down event.
|
|
The distance from the mouse to the dragged object in x direction when the user clicked the mouse button.
|
|
The distance from the mouse to the dragged object in y direction when the user clicked the mouse button.
|
|
The last position where a drag event has been fired.
|
|
An associative array / dictionary to store the objects of the board by name.
|
|
Collects all elements that have keyboard focus.
|
|
If GEONExT constructions are displayed, then this property should be set to true.
|
|
<private> |
Grids keeps track of all grids attached to this board.
|
An associative array containing all groups belonging to the board.
|
|
A flag which tells if the board registers mouse events.
|
|
A flag which tells if the board the JXG.Board#mouseUpListener is currently registered.
|
|
A flag which stores if the board registered pointer events.
|
|
A flag which tells us if the board has a pointerUp event registered at the moment.
|
|
A flag which tells if the board the JXG.Board#touchEndListener is currently registered.
|
|
A flag which tells if the board registers touch events.
|
|
A flag which stores if the board registered zoom events, i.e.
|
|
An associative array containing all highlighted elements belonging to the board.
|
|
ID of the board
|
|
During the update process this is set to false to prevent an endless loop.
|
|
A flag which tells us if the user is selecting
|
|
If true updates are skipped.
|
|
<private> |
Keep aspect ratio if bounding box is set and the width/height ratio differs from the
width/height ratio of the canvas.
|
The board mode the board is currently in.
|
|
References to the object that is dragged with the mouse on the board.
|
|
Full updates are needed after zoom and axis translates.
|
|
Number of objects ever created on this board.
|
|
An associative array containing all geometric objects belonging to the board.
|
|
An array containing all geometric objects on the board in the order of construction.
|
|
Copy of the default options
|
|
<private> |
Coordinates of the boards origin.
|
Contains the last time (epoch, msec) since the last getCoordsTopLeftCorner call which was not thrown away.
|
|
If reducedUpdate is set to true then only the dragged element and few (e.g.
|
|
Alias of JXG.Board.off.
|
|
Array containing the events related to resizing that have event listeners.
|
|
A bounding box for the selection
|
|
A flag which tells us if the board is in the selecting mode
|
|
Keeps track on touched elements, like JXG.Board#mouse does for mouse events.
|
|
Contains the last time (epoch, msec) since the last touchMove event which was not thrown away or since
touchStart because Android's Webkit browser fires too much of them.
|
|
Contains the pointerId of the last touchMove event which was not thrown away or since
touchStart because Android's Webkit browser fires too much of them.
|
|
<private> |
The number of pixels which represent one unit in user-coordinates in x direction.
|
<private> |
The number of pixels which represent one unit in user-coordinates in y direction.
|
The update quality of the board.
|
|
Array to log user activity.
|
|
A string containing the XML text of the construction.
|
Method Attributes | Method Name and Description |
---|---|
<private> |
_createSelectionPolygon(attr)
Create the internal selection polygon, which will be available as board.selectionPolygon.
|
<private> |
Determine which input device is used for this action.
|
<private> |
_handleClicks(evt, evtArray)
Internal handling of click events for pointers and mouse.
|
<private> |
_handleDblClicks(evt, evtArray)
Internal handling of dblclick events for pointers and mouse.
|
<private> |
_isPointerRegistered(evt)
Check if pointer event is already registered in JXG.Board#_board_touches.
|
<private> |
_isRequiredKeyPressed(evt, action)
Test if the required key combination is pressed for wheel zoom, move origin and
selection
|
<private> |
_moveSelecting(pos)
Update the selection rectangle during a move event.
|
<private> |
_pointerClearTouches(pId)
Remove all registered fingers from JXG.Board#_board_touches.
|
<private> |
Deregisters a pointer event in JXG.Board#_board_touches.
|
<private> |
Store the position of a pointer event.
|
<private> |
_removeObj(object, saveMethod)
Inner, recursive method of removeObject.
|
<private> |
_set(key, value)
Sets the value of attribute key to value.
|
<private> |
Update the Selection rectangle.
|
<private> |
_startSelecting(pos)
Start the selection of a region.
|
<private> |
_stopSelecting(evt)
Update the selection rectangle during an up event.
|
<private> |
_testForSelection(evt)
Test if a down event should start a selection.
|
addAnimation(element)
Adds an animation.
|
|
addChild(board)
Adds a dependent board to this board.
|
|
addConditions(str)
Add conditional updates to the elements.
|
|
Add all possible event handlers to the board object
that move objects, i.e.
|
|
Add fullscreen events which update the CSS transformation matrix to correct
the mouse/touch/pointer positions in case of CSS transformations.
|
|
addGrid()
Adds a grid to the board according to the settings given in board.options.
|
|
addHook(hook, m, context)
Please use JXG.Board.on instead.
|
|
Register keyboard event handlers.
|
|
addLogEntry(type, obj, pos)
Add user activity to the array 'board.userLog'.
|
|
Registers mouse move, down and wheel event handlers.
|
|
Registers pointer event handlers.
|
|
Add resize related event handlers
|
|
addTouchEventHandlers(appleGestures)
Register touch start and move and gesture start and change event handlers.
|
|
Registers pointer event handlers.
|
|
animate()
General purpose animation function.
|
|
Apply update on all objects with the new zoom-factors.
|
|
Calculates adequate snap sizes.
|
|
<private> |
checkFrameRate(evt)
Returns false if the event has been triggered faster than the maximum frame rate.
|
Delete the elements drawn as part of a trace of an element.
|
|
Handler for click on down arrow in the navigation bar
|
|
Handler for click on left arrow in the navigation bar
|
|
Handler for click on right arrow in the navigation bar
|
|
Handler for click on up arrow in the navigation bar
|
|
create(elementType, parents, attributes)
Creates a new geometric element of type elementType.
|
|
Deprecated name for JXG.Board.create.
|
|
createRoulette(c1, c2, start_c1, stepsize, direction, time, pointlist)
Function to animate a curve rolling on another curve.
|
|
Remove highlighting of all elements.
|
|
displayInfobox(val)
Set infobox visible / invisible.
|
|
emulateColorblindness(deficiency)
Initializes color blindness simulation.
|
|
finalizeAdding(obj)
After construction of the object the visibility is set
and the label is constructed if necessary.
|
|
fullscreenListener(evt)
If fullscreen mode is toggled, the possible CSS transformations
which are applied to the JSXGraph canvas have to be reread.
|
|
Runs through all elements and calls their update() method and update the conditions.
|
|
Generates unique id for a board.
|
|
generateName(object)
Generates an unique name for the given object.
|
|
Triggered on iOS/Safari while the user inputs a gesture (e.g.
|
|
gestureStartListener(evt)
Called by iOS/Safari as soon as the user starts a gesture.
|
|
Collects all elements under current mouse position.
|
|
getAllUnderMouse(evt)
Collects all elements under current mouse position plus current user coordinates of mouse cursor.
|
|
Get the bounding box of the board.
|
|
Calculates mouse coordinates relative to the boards container.
|
|
getMousePosition(e, i)
Get the position of the pointing device in screen coordinates, relative to the upper left corner
of the host tag.
|
|
<private> |
getScrCoordsOfMouse(x, y)
Returns the input parameters in an array.
|
getUsrCoordsOfMouse(evt)
This method calculates the user coords of the current mouse coordinates.
|
|
hasPoint(x, y)
Checks if the given point is inside the boundingbox.
|
|
highlightCustomInfobox(text, el)
Changes the text of the info box to what is provided via text.
|
|
highlightInfobox(x, y, el)
Changes the text of the info box to show the given coordinates.
|
|
Initialize some objects which are contained in every GEONExT construction by default,
but are not contained in the gxt files.
|
|
initInfobox(attributes)
Initialize the info box object which is used to display
the coordinates of points near the mouse pointer,
|
|
initMoveObject(x, y, evt, type)
Collects all elements below the current mouse pointer and fulfilling the following constraints:
|
|
initMoveOrigin(x, y)
Initiate moving the origin.
|
|
keyDownListener(evt)
Allow moving of JSXGraph elements with arrow keys.
|
|
keyFocusInListener(evt)
Event listener for SVG elements getting focus.
|
|
keyFocusOutListener(evt)
Event listener for SVG elements losing focus.
|
|
migratePoint(src, dest, copyName)
Migrate the dependency properties of the point src
to the point dest and delete the point src.
|
|
mouseClickListener(evt)
This method is called by the browser when the mouse device clicks on the screen.
|
|
This method is called by the browser when the mouse device double clicks on the screen.
|
|
mouseDownListener(evt)
This method is called by the browser when the mouse button is clicked.
|
|
mouseMoveListener(evt)
This method is called by the browser when the mouse is moved.
|
|
mouseUpListener(evt)
This method is called by the browser when the mouse button is released.
|
|
mouseWheelListener(evt)
Handler for mouse wheel events.
|
|
moveObject(x, y, o, evt, type)
Moves an object.
|
|
moveOrigin(x, y, diff)
Moves the origin and initializes an update of all elements.
|
|
<private> |
Stop moving the origin with one finger
|
pointerClickListener(evt)
This method is called by the browser when a pointer device clicks on the screen.
|
|
This method is called by the browser when a pointer device double clicks on the screen.
|
|
pointerDownListener(evt, object, allowDefaultEventHandling)
This method is called by the browser when a pointing device is pressed on the screen.
|
|
pointerLeaveListener(evt)
Triggered by the pointerleave event.
|
|
pointerMoveListener(evt)
Called periodically by the browser while the user moves a pointing device across the screen.
|
|
pointerUpListener(evt)
Triggered as soon as the user stops touching the device with at least one finger.
|
|
Sets for all objects the needsUpdate flag to 'true'.
|
|
printListener(evt)
Update the container before and after printing.
|
|
printListenerMatch(mql)
Wrapper for printListener to be used in mediaQuery matches.
|
|
removeAncestors(object)
Removes the ancestors of an object an the object itself from board and renderer.
|
|
removeChild(board)
Deletes a board from the list of dependent boards.
|
|
Remove all event handlers from the board object
|
|
Remove all registered event handlers regarding fullscreen mode.
|
|
Removes all grids assigned to this board.
|
|
removeHook(id)
Please use JXG.Board.off instead.
|
|
Remove all registered touch event handlers.
|
|
De-register mouse event handlers.
|
|
removeObject(object, saveMethod)
Removes object from board and renderer.
|
|
Remove MSPointer* Event handlers.
|
|
Remove resize related event handlers
|
|
Remove all registered touch event handlers.
|
|
resizeContainer(canvasWidth, canvasHeight, dontset, dontSetBoundingBox)
Change the height and width of the board's container.
|
|
Fallback solutions if there is no resizeObserver available in the browser.
|
|
<private> |
saveStartPos(obj, targets)
Helper function which returns a reasonable starting point for the object being dragged.
|
scrollListener(evt)
Listener to watch for scroll events.
|
|
select(str, onlyByIdOrName)
Select a single or multiple elements at once.
|
|
setAttribute(attributes)
Sets an arbitrary number of attributes.
|
|
setBoundingBox(bbox, keepaspectratio, setZoom)
Set the bounding box of the board.
|
|
setId(obj, type)
Composes an id for an element.
|
|
setZoom(fX, fY)
Sets the zoom level to fX resp fY.
|
|
Lists the dependencies graph in a new HTML-window.
|
|
showXML()
Lists the XML code of the construction in a new HTML-window.
|
|
<private> |
Start resize observer to handle
orientation changes in fullscreen mode.
|
Watch for changes of the visibility of the JSXGraph container element.
|
|
Start observer which reacts to size changes of the JSXGraph
container div element.
|
|
Start selection mode.
|
|
Cancels all running animations.
|
|
<private> |
Remove resize observer to handle orientation changes in fullscreen mode.
|
Stop the intersection observer
|
|
Stops the resize observer.
|
|
Finalize the selection: disable selection mode and return the coordinates
of the selection rectangle.
|
|
Suppresses the default event handling.
|
|
Stop updates of the board.
|
|
toFullscreen(id)
Expand the JSXGraph construction to fullscreen.
|
|
touchEndListener(evt)
Triggered as soon as the user stops touching the device with at least one finger.
|
|
touchMoveListener(evt)
Called periodically by the browser while the user moves his fingers across the device.
|
|
<private> |
touchOriginMove(evt)
Move the origin with one finger
|
touchStartListener(evt)
This method is called by the browser when a finger touches the surface of the touch-device.
|
|
<private> |
Start moving the origin with one finger.
|
twoFingerMove(p1, p2, o, evt)
Moves elements in multitouch mode.
|
|
twoFingerTouchObject(tar, drag, id)
Moves, rotates and scales a line or polygon with two fingers.
|
|
Enable updates of the board.
|
|
update(drag)
Runs through most elements and calls their update() method and update the conditions.
|
|
updateConditions()
|
|
updateContainerDims(width, height)
Update the width and height of the JSXGraph container div element.
|
|
Update the coords object of all elements which possess this
property.
|
|
Update CSS transformations of type scaling.
|
|
updateElements(drag)
Runs through all elements and calls their update() method.
|
|
updateHooks(m)
Runs through all hooked functions and calls them.
|
|
updateInfobox(el)
Updates and displays a little info box to show coordinates of current selected points.
|
|
Runs through all elements and calls their update() method.
|
|
Runs through all elements and calls their update() method.
|
|
zoom100()
Reset the zoom level to the original zoom level from initBoard();
Additionally, if the board as been initialized with a boundingBox (which is the default),
restore the viewport to the original viewport during initialization.
|
|
Zooms the board so every visible point is shown.
|
|
zoomElements(elements)
Reset the bounding box and the zoom level to 100% such that a given set of elements is
within the board's viewport.
|
|
zoomIn(x, y)
Zooms into the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom.
|
|
zoomOut(x, y)
Zooms out of the board by the factors board.attr.zoom.factorX and board.attr.zoom.factorY and applies the zoom.
|
Event Attributes | Event Name and Description |
---|---|
attribute(e)
Whenever the JXG.Board#setAttribute is called.
|
|
The bounding box of the board has changed.
|
|
click(e)
Whenever the user clicks on the board.
|
|
dblclick(e)
Whenever the user double clicks on the board.
|
|
down(e)
Whenever the user starts to touch or click the board.
|
|
hit(e, el, target)
Whenever an element is highlighted this event is fired.
|
|
keymove(e, mode)
This event is fired whenever the user is moving an element over the board by
pressing arrow keys on a keyboard.
|
|
mouseclick(e)
Whenever the user clicks on the board with a mouse device.
|
|
Whenever the user double clicks on the board with a mouse device.
|
|
mousedown(e)
Whenever the user starts to click on the board.
|
|
mousehit(e, el, target)
Whenever an element is highlighted this event is fired.
|
|
mousemove(e, mode)
This event is fired whenever the user is moving the mouse over the board.
|
|
A move event while selecting of a region is active
from a device sending mouse events.
|
|
Select a region is started during a down event
from a device sending mouse events or by calling
JXG.Board.startSelectionMode.
|
|
Selection of a region is stopped during an up event
from a device sending mouse events.
|
|
mouseup(e)
Whenever the user releases the mousebutton over the board.
|
|
move(e, mode)
This event is fired whenever the user is moving the finger or mouse pointer over the board.
|
|
A move event while selecting of a region is active.
|
|
pendown(e)
Whenever the user taps the pen on the board.
|
|
penmove(e, mode)
This event is fired whenever the user is moving the pen over the board.
|
|
pointerclick(e)
Whenever the user clicks on the board with a pointer device.
|
|
Whenever the user double clicks on the board with a pointer device.
|
|
pointerdown(e)
Whenever the user starts to click on the board with a
device sending pointer events.
|
|
pointermove(e, mode)
This event is fired whenever the user is moving the mouse over the board with a
device sending pointer events.
|
|
Select a region is started during a down event
from a device sending mouse events.
|
|
Select a region is started during a down event
from a device sending pointer events or by calling
JXG.Board.startSelectionMode.
|
|
Selection of a region is stopped during an up event
from a device sending pointer events.
|
|
pointerup(e)
Whenever the user releases the mousebutton over the board with a
device sending pointer events.
|
|
Select a region is started during a down event or by calling
JXG.Board.startSelectionMode
|
|
Selection of a region is stopped during an up event.
|
|
touchend(e)
Whenever the user stops touching the board.
|
|
touchmove(e, mode)
This event is fired whenever the user is moving the finger over the board.
|
|
Select a region is started during a down event
from a device sending touch events.
|
|
touchstart(e)
Whenever the user starts to touch the board.
|
|
Select a region is started during a down event
from a device sending touch events or by calling
JXG.Board.startSelectionMode.
|
|
Selection of a region is stopped during an up event
from a device sending touch events.
|
|
up(e)
Whenever the user stops to touch or click the board.
|
|
update()
This board is updated.
|
- Parameters:
- {String|Object} container
- The id of or reference to the HTML DOM element the board is drawn in. This is usually a HTML div. If it is the reference to an HTML element and this element does not have an attribute "id", this attribute "id" is set to a random value.
- {JXG.AbstractRenderer} renderer
- The reference of a renderer.
- {String} id
- Unique identifier for the board, may be an empty string or null or even undefined.
- {JXG.Coords} origin
- The coordinates where the origin is placed, in user coordinates.
- {Number} zoomX
- Zoom factor in x-axis direction
- {Number} zoomY
- Zoom factor in y-axis direction
- {Number} unitX
- Units in x-axis direction
- {Number} unitY
- Units in y-axis direction
- {Number} canvasWidth
- The width of canvas
- {Number} canvasHeight
- The height of canvas
- {Object} attributes
- The attributes object given to JXG.JSXGraph.initBoard
Defined in: options.js.
- Default Value:
- 35
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true });
- Default Value:
- [-5, 5, 5, -5]
- Implemented for pointer touch devices - not with mouse, pen or old iOS touch.
- It only works if browserPan:true
- One finger action by the settings "pan.enabled:true" and "pan.needTwoFingers:false" has priority
Defined in: options.js.
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
In case of JXG.Board#dblClickSuppressClick being false, this attribute is used to clear the list of clicked elements after the time specified by this attribute.
Recommendation: if JXG.Board#dblClickSuppressClick is true, use a value of approx. 300,
otherwise stay with the default 600.
Defined in: options.js.
- Default Value:
- 600
If true, the click events are suppressed if there is a dblclick event.
The consequence is that in this case any click event is fired with a delay specified by
JXG.Board#clickDelay.
Defined in: options.js.
- See:
- JXG.Board#clickDelay
- Default Value:
- false
Defined in: options.js.
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'}}
Defined in: options.js.
- See:
- JXG.Board#title
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- false (meaning window.document)
drag: { enabled: true // Allow dragging }
Defined in: options.js.
- Default Value:
- {enabled: true}
- symbol (String): Unicode symbol which is shown in the navigation bar. Default: svg code for '\u26f6', other possibilities are the unicode symbols '\u26f6' and '\u25a1'. However, '\u26f6' is not supported by MacOS and iOS.
- scale (number between 0 and 1): Relative size of the larger side of the JSXGraph board in the fullscreen window. 1.0 gives full width or height. Default value is 0.85.
- id (String): Id of the HTML element which is brought to full screen or null if the JSXgraph div is taken. It may be an outer div element, e.g. if the old aspect ratio trick is used. Default: null, i.e. use the JSXGraph div.
Defined in: options.js.
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'});
- Default Value:
- svg code
If set false and hasPoint() is true for both an element and it's label, the label is taken (if it is on a higher layer than the element)
Meanwhile, this feature might be irrelevant.
Defined in: options.js.
- Default Value:
- true
- axis labels
- infobox
- texts consisting of numbers only
- smartlabel elements
- slider labels
- tapemeasure elements
- integral element labels
User generated texts consisting of texts AND numbers have to be internationalized by the user, see
Text#intl.
Language locale and options can be individually controlled for each element by its intl attribute.
If no locale is set, the default language of the browser is used.
Defined in: options.js.
// 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], {});
- Default Value:
- {enabled: false}
If the aspect ration of the hosting div changes, JSXGraphs will change the user supplied bounding box accordingly. This is necessary if circles should look like circles and not like ellipses. It is recommended to set keepAspectRatio = true for geometric applets.
For function plotting keepAspectRatio = false
might be the better choice.
Defined in: options.js.
- Default Value:
- false
- enabled: true / false
- dx: horizontal shift amount per key press
- dy: vertical shift amount per key press
- panShift: zoom if shift key is pressed
- panCtrl: zoom if ctrl key is pressed
Defined in: options.js.
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 } });
- Default Value:
- {enabled: true, dx: 10, dy:10, panShift: true, panCtrl: false}
Defined in: options.js.
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}
Defined in: options.js.
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingBox: [-5, 5, 5, -5], maxBoundingBox: [-8, 8, 8, -8], pan: {enabled: true}, axis: true });
- Default Value:
- [-Infinity, Infinity, Infinity, -Infinity]
Defined in: options.js.
- Default Value:
- 40
Defined in: options.js.
- Default Value:
- 1
This optimization seems to be obsolete in newer browsers (from 2021 on, at least) and even slow down the constructions. Therefore, the default is set to 'none' since v1.2.4.
If set to 'svg', before every redrawing of the JSXGraph construction
the SVG sub-tree of the DOM tree is taken out of the DOM.
If set to 'all', before every redrawing of the JSXGraph construction the
complete DOM tree is taken out of the DOM.
If set to 'none' the redrawing is done in-place.
Using 'svg' or 'all' speeds up the update process considerably. The risk
is that if there is an exception, only a white div or window is left.
Defined in: options.js.
- Default Value:
- 'none'
A situation where dragging outside of the board is uncritical is for example if only sliders are used to interact with the construction.
Possible values for this attributes are:
- an element specified by document.getElementById('some id');
- null: to use the JSXGraph container div element
- document
Since the introduction of this attribute "moveTarget", the value "document" has become sort of default on touch devices like smartphones. However, it is no longer the case that the document listens to move events, but there is the new feature "setPointerCapture", which is also implicitly enabled on certain devices. In future versions, JSXGraph may adopt this new standard and distinguish only two cases:
- null: no pointerCapture
- document: use pointerCapture
This attribute is immutable.
It can be changed as follows:
HTML node or document
Defined in: options.js.
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
Defined in: options.js.
- See:
- JXG.Board#offsetY
- Default Value:
- 0
Defined in: options.js.
- 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 }
Defined in: options.js.
- See:
- JXG.Board#browserPan
Using a Boolean value turns on all events (or not), supplying an object of the form
{ fullscreen: true / false, keyboard: true / false, pointer: true / false, resize: true / false, wheel: true / false }activates individual event handlers. If an event is NOT given, it will be activated.
This attribute is immutable. Please use
JXG.Board#addEventHandlers() and
JXG.Board#removeEventHandlers() directly.
Defined in: options.js.
- See:
- JXG.Board#keyboard
- JXG.Board#registerResizeEvent
- JXG.Board#registerFullscreenEvent
- Default Value:
- true
In case of 'canvas' it is advisable to call 'board.update()' after all elements have been constructed. This ensures that all elements are drawn with their intended visual appearance.
This attribute is immutable.
Defined in: options.js.
- Default Value:
- 'auto'
Attention: if the JSXGraph container has no CSS property like width or height and max-width or max-height set, but
has a property like boxsizing:box-content, then the interplay between CSS and the resize attribute may result in an
infinite loop with ever increasing JSXgraph container.
Defined in: options.js.
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5,5,5,-5], keepAspectRatio: true, axis: true, resize: {enabled: true, throttle: 200} });
- Default Value:
- {enabled: true, throttle: 10}
- scale: scaling factor (default=1.0)
- type: format of the screenshot image. Default: png
- symbol: Unicode symbol which is shown in the navigation bar. Default: '\u2318'
- css: CSS rules to format the div element containing the screen shot image
- cssButton: CSS rules to format the close button of the div element containing the screen shot image
Defined in: options.js.
So far it works in SVG renderer only.
Possible sub-attributes with default values are:
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 events triggered by selection manipulation:
'startselecting', 'stopselecting', 'mousestartselecting', 'mousestopselecting',
'pointerstartselecting', 'pointerstopselecting', 'touchstartselecting', 'touchstopselecting'.
Defined in: options.js.
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); });
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
- Default Value:
- true
Defined in: options.js.
- See:
- JXG.Board#fullscreen
- JXG.AbstractRenderer#drawNavigationBar
- JXG.AbstractRenderer#drawNavigationBar
- Default Value:
- false
Defined in: options.js.
- See:
- Point#showInfobox
- Default Value:
- true
The navigation bar has the
the ID "{board_id}_navigation" and the CSS class
JXG_navigation".
The individual buttons can be accessed by JavaScript or CSS with
the ID "{board_id}_navigation_button_{type}" or by the CSS classes
JXG_navigation_button" or
JXG_navigation_button_{type}", where {type}
is one of left, right, or up, down,
in, 100, or out,
fullscreen, screenshot, cleartraces, reload.
Defined in: options.js.
- Default Value:
- true
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
- Default Value:
- false
The individual buttons can be accessed by JavaScript or CSS with
the ID "{board_id}_navigation_button_{type}" or by the CSS classes
JXG_navigation_button" or
JXG_navigation_button_{type}", where {type}
is in, 100, or out.
Defined in: options.js.
- Default Value:
- true
Defined in: options.js.
- Default Value:
- false
Defined in: options.js.
- Default Value:
- false
- 'default'
- 'mono_thin': a black / white theme using thin strokes. Restricted to 2D.
Defined in: options.js.
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'
Defined in: options.js.
- Default Value:
- ''
Defined in: options.js.
- Default Value:
- [0, 0, 0, 0]
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. }If the zoom buttons are visible, zooming by clicking the buttons is still possible, regardless of zoom.enabled:true/false. If this should be prevented, set showZoom:false. Deprecated: zoom.eps which is superseded by zoom.min
Defined in: options.js.
- See:
- JXG.Board#showZoom
- Default Value:
- See above
Defined in: options.js.
- See:
- JXG.Board#zoomY
- Default Value:
- 1.0
Defined in: options.js.
- See:
- JXG.Board#zoomX
- Default Value:
- 1.0
- Default Value:
- [0, 0]
- Default Value:
- 'mouse'
- Default Value:
- false
- Default Value:
- false
- 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
- JXG.Board.BOARD_MODE_NONE
- JXG.Board.BOARD_MODE_DRAG
- JXG.Board.BOARD_MODE_MOVE_ORIGIN
- 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
- BOARD_QUALITY_LOW
- BOARD_QUALITY_HIGH
- See:
- JXG.Board#mode
'start' and 'end' contain the amount of milliseconds elapsed between 1 January 1970 00:00:00 UTC and the time the event happened.
For the time being (i.e. v1.5.0) the only supported type is 'drag'.
- 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.
- 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.
- 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.
- 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.
- 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.
- Parameters:
- {Event} evt
- Event object containing the mouse coordinates.
- Returns:
- {Array} Coordinates [x, y] of the mouse in user coordinates.
- 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
- isDraggable
- visible
- not fixed
- not frozen
- 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
Panning of the construction is done with arrow keys if the pan key (shift or ctrl - depending on the board attributes) is pressed.
Zooming is triggered with the keys +, o, -, if the pan key (shift or ctrl - depending on the board attributes) is pressed.
Keyboard control (move, pan, and zoom) is disabled if an HTML element of type input or textarea has received focus.
- Parameters:
- {Event} evt
- The browser's event object
- Parameters:
- {Event} evt
- The browser's event object
- Parameters:
- {Event} evt
- The browser's event object
- 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
Performance hints: It is recommended to use the object's id. If many elements are removed, it is best to call board.suspendUpdate() before looping through the elements to be removed and call board.unsuspendUpdate() after the loop. Further, it is advisable to loop in reverse order, i.e. remove the object in reverse order of their creation time.
- 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
- 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
- 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; });
- object: {key1:value1,key2:value2,...}
- string: 'key:value'
- array: ['key', value]
- 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#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
- 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
The wrapping div has the CSS class 'jxgbox_wrap_private' which is defined in the file 'jsxgraph.css'
This feature is not available on iPhones (as of December 2021).
- 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>
<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>
- 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.
If one vertex of the polygon snaps to the grid or to points or is not draggable, two-finger-movement is cancelled.
- 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
If necessary, also call setBoundingBox().
- 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
- 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.
- 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.