import World from 'newton-lib/src/world/World.js'

public class | source

World

The World class handles the canvas and the drawing of elements. It manages all touch and mouse events, as well as the scaling and axis settings. All elements drawn to the canvas must go through a World object.

Constructor Summary

Public Constructor
public	constructor(id: string, drawCallback: function, resizeCallback: function)

Member Summary

Public Members
public	axis: Axis Axis object used to draw the main axis.
public	background: Renderer Background renderer object.
public	canvas: object HTML canvas created for the world.
public	color: string Simple background color for the canvas.
public	container: object jQuery reference to the div container of the canvas.
public	ctx: object Context of the created canvas for the world.
public	destroyed: boolean Flag that stops the execution of the drawing loop.
public	elements: WorldElement[] Array of elements added to the world.
public	height: number Height of the canvas in pixels.
public	mouse: object Mouse object containing all mouse properties and values.
public	onDraw: function Callback function for when the elements are drawn to the canvas.
public	onMouseMove: function Callback function for when the mouse moves over the canvas.
public	onResize: function Callback function for when the canvas gets resized.
public	prevWidth: number Width before resizing the canvas to the new width.
public	pxRatio: number Pixel ratio of the device.
public	scaleX: Scale Scale object for the -x axis.
public	scaleY: Scale Scale object for the -y axis.
public	started: number Request id number from the requestAnimationFrame.
public	width: number Width of the canvas in pixels.

Method Summary

Public Methods
public	add(args: ...WorldElement) Adds a WorldElement to the world.
public	export() Creates a screenshot of the canvas and saves it as sc.png in the same folder as the main file from the simulation.
public	fit(xMin: number, xMax: number, yMin: number, yMax: number, scale: number) Makes sure that a box of width (xMin + xMax) and height {yMin + yMax} fits in the canvas.
public	remove(args: ...WorldElement) Remove a WorldElement from the world.
public	setCursor(cursor: string) Sets a new cursor for when the mouse is over the canvas.

Private Methods
private	bindEventListeners(destroy: *) Binds a callback function to the mouse, touch and resize event listeners.
private	destroy() Removes all event listeners used by the canvas.
private	draw() Main draw function.
private	getMousePosition(e: *) Obtain the mouse or touch coordinates from the event data obtained from the callback.
private	isMouseOverElement() Find if the mouse is over an element.
private	moveElements() Once it has been determined that the mouse is over an element and a dragging process has begun, the position of the object must be updated to follow the mouse.
private	resize() Callback function for the resize event.
private	start() Starts the animation loop of 60fps.

Public Constructors

public constructor(id: string, drawCallback: function, resizeCallback: function) source

Params:

Name	Type	Attribute	Description
id	string		HTML id of the div where the World will be initiated.
drawCallback	function		Function called every 60fps to draw animations.
resizeCallback	function		Function called every time the canvas gets resized.

Public Members

public axis: Axis source

Axis object used to draw the main axis.

public background: Renderer source

Background renderer object. It is disabled by default.

public canvas: object source

HTML canvas created for the world. Important to note is that the canvas does not have an alpha channel. This is done to optimize the framerate.

public color: string source

Simple background color for the canvas. If set to ther value than COLORS.WHITE the canvas will draw a rectangle with the new color at the beginning of every draw cycle. When the background renderer is enabled, the color value is no more relevant.

public container: object source

jQuery reference to the div container of the canvas.

public ctx: object source

Context of the created canvas for the world.

public destroyed: boolean source

Flag that stops the execution of the drawing loop.

public elements: WorldElement[] source

Array of elements added to the world.

public height: number source

Height of the canvas in pixels.

public mouse: object source

Mouse object containing all mouse properties and values.

Properties:

Name	Type	Attribute	Description
x	number		Current -x position of the mouse in pixels.
y	number		Current -y position of the mouse in pixels.
px	number		Previous -x position of the mouse in pixels.
py	number		Previous -y position of the mouse in pixels.
dx	number		Change in the -x direction in pixels.
dy	number		Change in the -y direction in pixels.
rx	number		Real -x position of the mouse with respect to the axis in units.
ry	number		Real -y position of the mouse with respect to the axis in units.
down	boolean		Flag for when the mouse is pressed down over the canvas.
inCanvas	boolean		Flag for when the mouse is over the canvas.
dragging	object		Contains the currently dragged WorldElement. If no element is dragged then the value is equal to DRAG_NOTHING.
over	object		Contains the element that the mouse is currently over. If no element is under the mouse then the value is equal to OVER_NOTHING.
cursor	string		Current cursor of the canvas. Changes depending if it is over an element.

public onDraw: function source

Callback function for when the elements are drawn to the canvas.

public onMouseMove: function source

Callback function for when the mouse moves over the canvas.

public onResize: function source

Callback function for when the canvas gets resized.

public prevWidth: number source

Width before resizing the canvas to the new width. Used to determine if a change has occured in the width in order to continue with the resizing process.

public pxRatio: number source

Pixel ratio of the device.

public scaleX: Scale source

Scale object for the -x axis. Default scale is 50px per 1 unit.

public scaleY: Scale source

Scale object for the -y axis. Default scale is 50px per 1 unit.

public started: number source

Request id number from the requestAnimationFrame. Used to determine if the animation has started.

public width: number source

Width of the canvas in pixels.

Public Methods

public add(args: ...WorldElement) source

Adds a WorldElement to the world. Multiple elements can be added in a single add function, they only need to be separated by comma.

Params:

Name	Type	Attribute	Description
args	...WorldElement		Elements to add to the world.

public export() source

Creates a screenshot of the canvas and saves it as sc.png in the same folder as the main file from the simulation. The canvas data is passed to a php file that only runs at localhost.

public fit(xMin: number, xMax: number, yMin: number, yMax: number, scale: number) source

Makes sure that a box of width (xMin + xMax) and height {yMin + yMax} fits in the canvas. This is used when the dimensions of objects changes dynamically.

Params:

Name	Type	Attribute	Description
xMin	number		Minimum x value required to be displayed.
xMax	number		Maximum x value required to be displayed.
yMin	number		Minimum y value required to be displayed.
yMax	number		Maximum y value required to be displayed.
scale	number		Scale given to the range provided. If the scale is > 1 then the bounding box will be larger than the data and thus will result in a better fit.

public remove(args: ...WorldElement) source

Remove a WorldElement from the world. Multiple elements can be removed in a single remove function, they only need to be separated by comma.

Params:

Name	Type	Attribute	Description
args	...WorldElement		Elements to remove from the world.

public setCursor(cursor: string) source

Sets a new cursor for when the mouse is over the canvas.

Params:

Name	Type	Attribute	Description
cursor	string		Valid cursor type.

Private Methods

private bindEventListeners(destroy: *) source

Binds a callback function to the mouse, touch and resize event listeners.

Params:

Name	Type	Attribute	Description
destroy	*

private destroy() source

Removes all event listeners used by the canvas.

private draw() source

Main draw function. Runs at 60fps and can't be stopped once the world is started. Therefore it is constantly drawing to the canvas. This further optimizes the code needed to run simulations. Looks at the background object to check if it's enabled. If so, it draws the prerendered image to the main canvas, thus avoiding to draw the background every time from scratch. The draw method WorldElement.draw is called for every element added to the world.

private getMousePosition(e: *) source

Obtain the mouse or touch coordinates from the event data obtained from the callback. The data is obtained in pixels, howevere it is also converted to real units using the scale provided. It also calcualtes the previous positio and the change in position in both units (pixels and real units).

Params:

Name	Type	Attribute	Description
e	*

private isMouseOverElement() source

Find if the mouse is over an element. It queries the method WorldElement.isMouseOver to check if the mouse is over the bounding box of the element.

private moveElements() source

Once it has been determined that the mouse is over an element and a dragging process has begun, the position of the object must be updated to follow the mouse. The function looks at the value of WorldElement.mouseMoveStyle to determine if the position should be updated in pixels or in real values. The position is updated by adding the change in the mouse's position to the element. This creates a smoother movement. Finally, the callback function WorldElement.onMouseMove is called.

private resize() source

Callback function for the resize event. It recalculates the width of the main canvas as well as all rendered canvases and their elements. It calls the callback function World.onResize.

private start() source

Starts the animation loop of 60fps.