Class Biojs.AreaSelector

Version 1.0.0.

Extends Biojs.

Defined in: Biojs.AreaSelector.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	Biojs.AreaSelector(options) This component visualize a div in a upper layer that can be used to select an area of other component.

Field Summary
Field Attributes	Field Name and Description
<inner>	eventTypes Array containing the supported event names
<inner>	opt Default values for the options

Method Summary
Method Attributes	Method Name and Description
	constructor(options)
	getCoveredArea() get the current value of the area
	setCoveredArea(area) set the value of the area

Methods borrowed from class Biojs:: addListener, extend, getId, listen, raiseEvent, setEventHandlers, setOptions

Event Summary
Event Attributes	Event Name and Description
	onRegionChanged(actionPerformed)

Class Detail

Biojs.AreaSelector(options)

This component visualize a div in a upper layer that can be used to select an area of other component. Although is not biological related component, it is generic enough to be used in other components, that require to select a region, see chromosome example. Just one selector can be used for a HTML component.

WARNING: The CSS value for the position will be changed to relative.

Author: Gustavo A. Salazar.

	var instance = new Biojs.AreaSelector({
		target: "YourOwnDivId",
		area: [10,10,40,40]
	});

Parameters:
{Object} options: An object with the options for the Chromosome component.

Options detailed:
{string} target: Identifier of the DIV tag where the component should be displayed.
{boolean} resize_left: to indicate if the selector can be resizable from the left side. default value: true
{boolean} resize_right: to indicate if the selector can be resizable from the right side. default value: true
{boolean} resize_top: to indicate if the selector can be resizable from the top side. default value: true
{boolean} resize_bottom: to indicate if the selector can be resizable from the bottom side. default value: true
{array} area: an array with 4 elements(integers) to indicate the start position of the area selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.

Requires:: jQuery Core 1.7.2; jQuery UI 1.8.2; jQuery UI CSS 1.8.2; jquery.watcher.js; Selector CSS

Field Detail

<inner> eventTypes

Array containing the supported event names

<inner> opt

Default values for the options

Method Detail

constructor(options)

Parameters:
options

getCoveredArea()

get the current value of the area

var area = instance.getCoveredArea();
alert("The current area is from the point [" + area.region[0] + "," + area.region[1] + "] to the point [" + area.region[2] + "," + area.region[3] + "] ");

setCoveredArea(area)

set the value of the area

instance.setCoveredArea([ 20,20,50,50]);

Parameters:
{string} area: A 4-element array indicating the position to locate the selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.

Event Detail

onRegionChanged(actionPerformed)

	instance.onRegionChanged(function( objEvent ) {
		alert("The current area is from the point [" + objEvent.region[0] + "," + objEvent.region[1] + "] to the point [" + objEvent.region[2] + "," + objEvent.region[3] + "] "); 
	});

Parameters:
{function} actionPerformed: A function which receives an Biojs.Event object as argument. It gets activated when the covered area has changed

Event object data:
{Object} source: The component which did triggered the event.
{string} type: The name of the event.
{array} region: A 4-element array indicating the current position of the selector. The first two elements indicate the X and Y position of the top-left corner, the last 2 elements indicate the bottom-right position. The position are relative to the target element.

Classes

Class Biojs.AreaSelector