Skip to main content

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.

constructor​

new Axes(axis, options, startPos)
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<string, AxisOption>Axis information managed by eg.Axes. The key of the axis specifies the name to use as the logical virtual coordinate system.
optionsAxesOptionβœ”οΈ{}The option object of the eg.Axes module
startPosObject<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);

Methods​

connect​

Connect the axis of eg.Axes to the inputType.

Returns: eg.Axes

  • An instance of a module itself
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesArray<String> | StringThe name of the axis to associate with inputType
inputTypeObjectThe 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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
inputTypeObjectβœ”οΈ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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObjectβœ”οΈ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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumberβœ”οΈ0Duration 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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posObject<string, number>The coordinate to move to
durationNumberβœ”οΈ0Duration 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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
optionsAxesOptionAxes 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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axisObject<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
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
posUpdateAnimationOptionThe 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.
PARAMETERTYPEOPTIONALDEFAULTDESCRIPTION
axesObjectβœ”οΈ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

PROPERTYTYPEDESCRIPTION
posObject<string, number>coordinate
inputObjectThe instance of inputType where the event occurred
inputEventObjectThe event object received from inputType
isTrustedBooleanReturns 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

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when releasing an element
destPosObject<string, number>The coordinates to move to after releasing an element
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<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
inputEventObjectThe event object received from inputType
inputObjectThe instance of inputType where the event occurred
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns 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

PROPERTYTYPEDESCRIPTION
posObject<string, number>The coordinate
deltaObject<string, number>The movement variation of coordinate
bounceRatioObject<string, number>If the current coordinates are in the bounce area, the current bounce value divided by the maximum bounce value
holdingBooleanIndicates whether a user holds an element on the screen of the device.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType. If the value is changed by animation, it returns 'null'.
setsetSpecifies the coordinates to move after the event. It works when the holding value is true
isTrustedBooleanReturns 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

PROPERTYTYPEDESCRIPTION
depaPosObject<string, number>The coordinates when animation starts
destPosObject<string, number>The coordinates to move to. If you change this value, you can run the animation
deltaObject<string, number>The movement variation of coordinate
durationNumberDuration of the animation (unit: ms). If you change this value, you can control the animation duration time.
inputObjectThe instance of inputType where the event occurred. If the value is changed by animation, it returns 'null'.
inputEventObjectThe event object received from inputType
setTosetToSpecifies the animation coordinates to move after the event
isTrustedBooleanReturns 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

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns 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

PROPERTYTYPEDESCRIPTION
isTrustedBooleanReturns 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
});