Axes

class Axes extends eg.Component

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.

Properties

Methods

Events

holding

connect
disconnect
get
setTo
setBy
setOptions
setAxis
stopAnimation
updateAnimation
isBounceArea
destroy

hold
release
change
animationStart
animationEnd
finish

constructor

new Axes(axis, options, startPos)

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
axis	Object<string, AxisOption>			Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.
options	AxesOption	✔️	{}	The option object of the eg.Axes module
startPos	Object<string, number>	✔️	{}	The coordinates to be moved when creating an instance. It is applied with higher priority than startPos of axisOption.

// 1. Initialize eg.Axes
const axes = new eg.Axes({
 something1: {
   range: [0, 150],
   bounce: 50
 },
 something2: {
   range: [0, 200],
   bounce: 100
 },
 somethingN: {
   range: [1, 10],
 }
}, {
 deceleration : 0.0024
});

// 2. attach event handler
axes.on({
 "hold" : function(evt) {
 },
 "release" : function(evt) {
 },
 "animationStart" : function(evt) {
 },
 "animationEnd" : function(evt) {
 },
 "change" : function(evt) {
 }
});

// 3. Initialize inputTypes
const panInputArea = new eg.Axes.PanInput("#area", {
 scale: [0.5, 1]
});
const panInputHmove = new eg.Axes.PanInput("#hmove");
const panInputVmove = new eg.Axes.PanInput("#vmove");
const pinchInputArea = new eg.Axes.PinchInput("#area", {
 scale: 1.5
});

// 4. Connect eg.Axes and InputTypes
// [PanInput] When the mouse or touchscreen is down and moved.
// Connect the 'something2' axis to the mouse or touchscreen x position and
// connect the 'somethingN' axis to the mouse or touchscreen y position.
axes.connect(["something2", "somethingN"], panInputArea); // or axes.connect("something2 somethingN", panInputArea);

// Connect only one 'something1' axis to the mouse or touchscreen x position.
axes.connect(["something1"], panInputHmove); // or axes.connect("something1", panInputHmove);

// Connect only one 'something2' axis to the mouse or touchscreen y position.
axes.connect(["", "something2"], panInputVmove); // or axes.connect(" something2", panInputVmove);

// [PinchInput] Connect 'something2' axis when two pointers are moving toward (zoom-in) or away from each other (zoom-out).
axes.connect("something2", pinchInputArea);

Properties

holding

readonly

Returns true if at least one input is in progress.

Type: boolean

const axes = new eg.Axes({
 x: {
   range: [0, 100],
 },
});

axes.holding

Methods

connect

Connect the axis of eg.Axes to the inputType.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
axes	Array<String> \| String			The name of the axis to associate with inputType
inputType	Object			The inputType instance to associate with the axis of eg.Axes

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

axes.connect("x", new eg.Axes.PanInput("#area1"))
   .connect("x xOther", new eg.Axes.PanInput("#area2"))
   .connect(" xOther", new eg.Axes.PanInput("#area3"))
   .connect(["x"], new eg.Axes.PanInput("#area4"))
   .connect(["xOther", "x"], new eg.Axes.PanInput("#area5"))
   .connect(["", "xOther"], new eg.Axes.PanInput("#area6"));

disconnect

Disconnect the axis of eg.Axes from the inputType.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
inputType	Object	✔️		An inputType instance associated with the axis of eg.Axes

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  }
});

const input1 = new eg.Axes.PanInput("#area1");
const input2 = new eg.Axes.PanInput("#area2");
const input3 = new eg.Axes.PanInput("#area3");

axes.connect("x", input1);
   .connect("x xOther", input2)
   .connect(["xOther", "x"], input3);

axes.disconnect(input1); // disconnects input1
axes.disconnect(); // disconnects all of them

get

Returns the current position of the coordinates.

Returns: Object<string, number>

Axis coordinate information

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
axes	Object	✔️		The names of the axis

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.get(); // {"x": 0, "xOther": -100, "zoom": 50}
axes.get(["x", "zoom"]); // {"x": 0, "zoom": 50}

setTo

Moves an axis to specific coordinates.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
pos	Object<string, number>			The coordinate to move to
duration	Number	✔️	0	Duration of the animation (unit: ms)

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setTo({"x": 30, "zoom": 60});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setTo({"x": 100, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": 60, "zoom": 60}

setBy

Moves an axis from the current coordinates to specific coordinates.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
pos	Object<string, number>			The coordinate to move to
duration	Number	✔️	0	Duration of the animation (unit: ms)

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.setBy({"x": 30, "zoom": 10});
axes.get(); // {"x": 30, "xOther": -100, "zoom": 60}

axes.setBy({"x": 70, "xOther": 60}, 1000); // animatation

// after 1000 ms
axes.get(); // {"x": 100, "xOther": -40, "zoom": 60}

setOptions

Change the options of Axes instance.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
options	AxesOption			Axes options to change

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
}, {
  round: 10,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 50}

axes.setOptions({
  round: 1,
});

axes.setTo({"x": 48});
axes.get(); // {"x": 48}

setAxis

Change the information of an existing axis.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
axis	Object<string, AxisOption>			Axis options to change

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 100}

axes.setAxis({
  "x": {
     range: [0, 200]
  },
});

axes.setTo({"x": 150});
axes.get(); // {"x": 150}

stopAnimation

Stop an animation in progress.

Returns: eg.Axes

An instance of a module itself

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
});

axes.setTo({"x": 10}, 1000); // start animatation

// after 500 ms
axes.stopAnimation(); // stop animation during movement.

updateAnimation

Change the destination of an animation in progress.

Returns: eg.Axes

An instance of a module itself

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
pos	UpdateAnimationOption			The coordinate to move to

const axes = new eg.Axes({
  "x": {
     range: [0, 200]
  },
  "y": {
     range: [0, 200]
  }
});

axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 500 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}}); // animation will end after 500 ms, at {"x": 100, "y": 100}

// after 500 ms
axes.setTo({"x": 50, "y": 50}, 1000); // trigger animation by setTo

// after 700 ms
axes.updateAnimation({destPos: {"x": 100, "y": 100}, duration: 1500, restart: true}); // this works same as axes.setTo({"x": 100, "y": 100}, 800) since restart is true.

isBounceArea

Returns whether there is a coordinate in the bounce area of the target axis.

Returns: Boolen

Whether the bounce area exists.

PARAMETER	TYPE	OPTIONAL	DEFAULT	DESCRIPTION
axes	Object	✔️		The names of the axis

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "xOther": {
     range: [-100, 100]
  },
   "zoom": {
     range: [50, 30]
  }
});

axes.isBounceArea(["x"]);
axes.isBounceArea(["x", "zoom"]);
axes.isBounceArea();

destroy

Destroys properties, and events used in a module and disconnect all connections to inputTypes.

Events

hold

This event is fired when a user holds an element on the screen of the device.

Type: object

PROPERTY	TYPE	DESCRIPTION
pos	Object<string, number>	coordinate
input	Object	The instance of inputType where the event occurred
inputEvent	Object	The event object received from inputType
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("hold", function(event) {
  // event.pos
  // event.input
  // event.inputEvent
  // isTrusted
});

release

This event is fired when a user release an element on the screen of the device.

Type: object

PROPERTY	TYPE	DESCRIPTION
depaPos	Object<string, number>	The coordinates when releasing an element
destPos	Object<string, number>	The coordinates to move to after releasing an element
delta	Object<string, number>	The movement variation of coordinate
bounceRatio	Object<string, number>	If the coordinates at the time of release are in the bounce area, the current bounce value divided by the maximum bounce value
inputEvent	Object	The event object received from inputType
input	Object	The instance of inputType where the event occurred
setTo	setTo	Specifies the animation coordinates to move after the event
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'release' event.
  event.setTo({x: 10}, 2000);
});

change

This event is fired when coordinate changes.

Type: object

PROPERTY	TYPE	DESCRIPTION
pos	Object<string, number>	The coordinate
delta	Object<string, number>	The movement variation of coordinate
bounceRatio	Object<string, number>	If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value
holding	Boolean	Indicates whether a user holds an element on the screen of the device.
input	Object	The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEvent	Object	The event object received from inputType. If the value is changed by animation, it returns 'null'.
set	set	Specifies the coordinates to move after the event. It works when the holding value is true
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("change", function(event) {
  // event.pos
  // event.delta
  // event.input
  // event.inputEvent
  // event.holding
  // event.set
  // event.isTrusted

  // if you want to change the coordinates to move after the 'change' event.
  // it works when the holding value of the change event is true.
  event.holding && event.set({x: 10});
});

animationStart

This event is fired when animation starts.

Type: object

PROPERTY	TYPE	DESCRIPTION
depaPos	Object<string, number>	The coordinates when animation starts
destPos	Object<string, number>	The coordinates to move to. If you change this value, you can run the animation
delta	Object<string, number>	The movement variation of coordinate
duration	Number	Duration of the animation (unit: ms). If you change this value, you can control the animation duration time.
input	Object	The instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEvent	Object	The event object received from inputType
setTo	setTo	Specifies the animation coordinates to move after the event
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("release", function(event) {
  // event.depaPos
  // event.destPos
  // event.delta
  // event.input
  // event.inputEvent
  // event.setTo
  // event.isTrusted

  // if you want to change the animation coordinates to move after the 'animationStart' event.
  event.setTo({x: 10}, 2000);
});

animationEnd

This event is fired when animation ends.

Type: object

PROPERTY	TYPE	DESCRIPTION
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("animationEnd", function(event) {
  // event.isTrusted
});

finish

This event is fired when all actions have been completed.

Type: object

PROPERTY	TYPE	DESCRIPTION
isTrusted	Boolean	Returns true if an event was generated by the user action, or false if it was caused by a script or API call

const axes = new eg.Axes({
  "x": {
     range: [0, 100]
  },
  "zoom": {
     range: [50, 30]
  }
}).on("finish", function(event) {
  // event.isTrusted
});

constructor​

Properties​

holding​

Methods​

connect​

disconnect​

get​

setTo​

setBy​

setOptions​

setAxis​

stopAnimation​

updateAnimation​

isBounceArea​

destroy​

Events​

hold​

release​

change​

animationStart​

animationEnd​

finish​

constructor

Properties

holding

Methods

connect

disconnect

get

setTo

setBy

setOptions

setAxis

stopAnimation

updateAnimation

isBounceArea

destroy

Events

hold

release

change

animationStart

animationEnd

finish