Description

using Acceleration

Description

In the context, animationEnd means that it ends animation.

But sometimes it _animateParam is alive(=not null) on animationEnd.

I think animationEnd must be fired after _animateParam is initialized.( _animateParam = null).

Steps to check or reproduce

Grab(hold) movable area while it is animating.
It triggers _animationHandlers::_grab and this makes above issues.

@sculove commented on Tue Dec 22 2015

MovableCoord uses only animation timer.

Description

There's report that only one input type(TouchInput) is working although the device is supporting both Touch and Mouse at the same time. So MouseInput is not working.

Test Environment

• PC: Dell XPS 15 (which has Touch Display)
• OS: Windows 10
• Browser : Chrome, Firefox

I think It should support PointerEvent on devices like above.

Currently Axes uses Touch or Mouse as a default Input Type.

Description

The below code block, it's trying to destroy hammer instance, but when seeing the condition, it's within else clause which means there's possibility being null value of this.hammer.

It should be preventing by checking the instance as this.hammer && this.hammer.destroy();

AS-IS

        var axes = new eg.Axes({
		axis: {
			panX: {
				range: [0, gridWidth - 100],
				bounce: 50
			},
			panY: {
				range: [0, gridWidth/2 - 100],
				bounce: 50
			}
		}
	}).setTo({panX: 0, panY: 0});

TO-BE

        var axes = new eg.Axes({
		axis: {
			panX: {
				range: [0, gridWidth - 100],
				bounce: 50
			},
			panY: {
				range: [0, gridWidth/2 - 100],
				bounce: 50
			}
		}
	}, {panX: 0, panY: 0});

Description

As I see,`setBy' is method for relative movement from current position. But It's not working when target position is out of range on circular mode.

Steps to check or reproduce

For example,

Current status is as follow

• range[0, 359]
• current position: 359

If setBy({angle:10}) is called,

RESULT
It doesn't move.

EXPECTED
position is changed to 9.

Steps to check or reproduce

http://codepen.io/happyhj/pen/zByPjw

The left and the right edge is circular.
When stay mousedown while passing the edge, they pass through the edge.
But make position pass through the side edges while mouse button up. It always stops at the edge.

ref #3

Description

Add MoveKeyInput in Getting Started.

Introduce 4 inputType in animation.
Introduce the demo to each inputType.
Introduce projects with Axes.

Steps to check or reproduce

Description

When making build(eg. npm run build) project which depends on movablecoord 2.0.0-rc.1,
There's error.

Unexpected token punc «(», expected punc «:» [yawpitch.min.js:1880,20]

npm ERR! Darwin 16.5.0
npm ERR! argv "/Users/jongmoon/.nvm/versions/node/v6.6.0/bin/node" "/Users/jongmoon/.nvm/versions/node/v6.6.0/bin/npm" "run" "build"
npm ERR! node v6.6.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! @egjs/[email protected] build: `webpack --env.mode production --config webpack.config.js && webpack --env.mode pkgd --config webpack.
config.js`
npm ERR! Exit status 2

If you change module property, It works!

NOT WORK!

"main": "dist/movablecoord.js",
"module": "src/MovableCoord.js",
"name": "@egjs/movablecoord",

WORK

"main": "dist/movablecoord.js",
"module": "dist/movablecoord.js",//changed!
"name": "@egjs/movablecoord",

Description

startPos param triggers the "change" event and is applied asynchronously.

startPos is litarally start position.

• It should not trigger the "change" event,
• and should applied synchronously.

now coverage is zero.
eg-axes should add test codes.

Description

we can't set options of hammerjs

Description

I think animationEnd event will be fired when depsPos is not equal destPos on release time.
It is reasonable because if there are some change in position, it have to be moved with animation.

but when I slightly move position, animationEnd event wasn't fired.

I found the reason is duration.

when duration is under 100, then value is zero

It's okay if animation was not performed, but It's not okay that information was hided.

Steps to check or reproduce

here are codepen link

• check console
• second information (Object) is delta
• move slightly until delta is not zero
• animationEnd will not be fired

Description

The setTo / setBy method that is called synchronously within the "change" event handler caused by user interaction is not reflected in the axes coordinates. (for example, checking with axes.get ())

Steps to check or reproduce

Description

• create tag
• register npm

Description

axes.disconnect makes script error if it was not connected

Steps to check or reproduce

• axes.disconnect before connect.

Description

Currently user action is only way to change value. But There's 2 required situation to change value manually.

1. Test
2. In the structure in which target(?) is moved by axes. But If you want to provide API to move target manually.

Consider it~

Description

The movableCoord can't apply bind options in runtime.
we need to support new interface about bind options.

provide ts definition.

Description

I want to add user interaction via keystrokes. Especially, move keys (awsd, arrow keys)

Description

MovableCoord supports pointer, mouse, touch using Hammer.js
I proposes the structure supported a number of types
we add some types like orientationChange, keyboard, wheel,...etc.

Description

now, an interruptable option is options of bind.
To support many inputs, an interruptable option is moved to options of MovableCoord.

ref http://naver.github.io/egjs/latest/doc/eg.MovableCoord.html#bind

Description

following code throw runtime error Uncaught TypeError: axes_1.default is not a constructor

import Axes from "@egjs/Axes"

const axes = new Axes(...)

transpiled version references default property, but Axes constructor is axes_1 itself. that means default property is not constructor.

// transpiled version
var axes_1 = __webpack_require__(4);

var axes = new axes_1["default"](...)

Steps to check or reproduce

I changed Axes.d.ts by my self. but not sure it's right.
I can use import * as Axes from "@egjs/axes" with changed definition file;

export = Axes;

export as namespace Axes;

declare class Axes extends Component {
    axis: {
        [key: string]: AxisOption;
    };
    static VERSION: string;
    static PanInput: any;
    static PinchInput: any;
    static WheelInput: any;
    static MoveKeyInput: any;
    static TRANSFORM: string;
    static DIRECTION_NONE: DIRECTION;
    static DIRECTION_LEFT: DIRECTION;
    static DIRECTION_RIGHT: DIRECTION;
    static DIRECTION_UP: DIRECTION;
    static DIRECTION_DOWN: DIRECTION;
    static DIRECTION_HORIZONTAL: DIRECTION;
    static DIRECTION_VERTICAL: DIRECTION;
    static DIRECTION_ALL: DIRECTION;
    options: AxesOption;
    em: EventManager;
    axm: AxisManager;
    itm: InterruptManager;
    am: AnimationManager;
    io: InputObserver;
    private _inputs;
    constructor(axis: {
        [key: string]: AxisOption;
    }, options: AxesOption, startPos?: Axis);
    connect(axes: string[] | string, inputType: IInputType): this;
    disconnect(inputType?: IInputType): this;
    get(axes?: string[]): Axis;
    setTo(pos: Axis, duration?: number): this;
    setBy(pos: Axis, duration?: number): this;
    isBounceArea(axes?: string[]): boolean;
    destroy(): void;
}

declare interface AxesOption {
	easing?: (x: number) => number;
	maximumDuration?: number;
	minimumDuration?: number;
	deceleration?: number;
	interruptable?: boolean;
}

declare namespace Axes {
	export interface AxesOption {
		easing?: (x: number) => number;
		maximumDuration?: number;
		minimumDuration?: number;
		deceleration?: number;
		interruptable?: boolean;
	}
}

@jongmoon commented on Wed Jul 13 2016

Description

It's not a bug. but It is need to be discussed.

current threashold = 0,
But in recent device browsers, browser sends touch offset more correctly(?) . So when moved vertically or horizontally, sometimes Hammer does not recognize it as vertical or horizontal perfectly.

For example when you touches screen vertically on HORIZONTAL mode, Hammer sometimes thinks it as horizontal movement by 1~ 2px.

@sculove commented on Thu Jul 14 2016

@jongmoon Could you give us some information like browser test?

Description

event is not defined in grab it makes firefox error.

AnimationManager.prototype.grab = function (axes, option) {
        if (this._animateParam && axes.length) {
            var orgPos_1 = this.axm.get(axes);
            var pos = this.axm.map(orgPos_1, function (v, k, opt) { return Coordinate_1["default"].getCirculatedPos(v, opt.range, opt.circular); });
            if (!this.axm.every(pos, function (v, k) { return orgPos_1[k] === v; })) {
                this.em.triggerChange(pos, option, !!option);
            }
            this._animateParam = null;
            this._raf && utils_1.cancelAnimationFrame(this._raf);
            this._raf = null;
            this.em.triggerAnimationEnd(!!event); // THIS event is not defiend!!
        }
    };

Description

create basic demos

• one coordinate, and one bind
• one coordinate, and multi binds

Description

make demo using eg.movablecoord like iScroll.

• simple scroll (vertical/horizontal)
• scroll pull-to-refresh

When you use PinchInput and PanInput, face a problem.

holdand release event is fired twice.
so animatation is fired twice.

@sculove commented on Fri Apr 14 2017

Description

• demo page : /test/manual/movableCoord.html
  hammer issue

Steps to check or reproduce

browser : iOS 8.1/8.4.1 on naver app (v7.0.2)

• go to the box of bottom.
• touchs top-right box
  

Description

support z-axis.

min: [0,0,0],
max: [300, 200, 100]

Description

MovableCoord is a raw(?) component.
Threrefore, movablecoord is so extensible. but, movablecoord is so hard to use it.

the Extend plugin is so simple class.
if you want to use scroll UI, you can use like this.

new eg.MovableCoord.Scroll('#wrapper', {
    scrollX : true,
    scrollY : false,
    mouseWheel: true,
    scrollbars: true
});

Goals: supports so simple component.

Description

You can see teleportation when user release touch.

This occurs when deceleration value is high
And high deceleration leads Coordinate.getDuration make duration zero.

Steps to check or reproduce

Here are codepen link. I changed only deceleration value to 0.01 on axes demo.

• check link on mobile size
• move a little bit

I think axes should cancel animation when "hold" event is triggered.

For example, in the case of Pan input type,
if the touch is started again during the animation,
the reaction starts after all the animation ends.
So, the reactivity is not good.

After touch start, I think the animation should be stopped and the reaction should begin immediately.

Is there any method to stop animation when "hold" event is triggered?

@jongmoon commented on Wed Oct 26 2016

Description

I think people cannot imagine what MovableCoord do by its name. It should be the name related with TOUCH.

MovableCoord is very good component but I think Its name makes it difficult for people to approach this component.

It's just my opinion.

@sculove commented on Wed Jun 14 2017

https://en.wikipedia.org/wiki/Cartesian_coordinate_system

@sculove commented on Wed Jun 14 2017

cube

Description

phantomjs is depreacted!
we should remove phantomjs.

Problem

The zoomming UI using pinch gesture can not be implemented correctly using the offset value returned by PinchInputType at present.

Problem Description

The PinchInputType returns the offset value of the difference in scale value provided by the hammer's pinch recognizer.

If the offset given by PinchInputType is cumulatively added, the size and scale of the change will be the same. This scale value is relative value to the value at the pinchstart point.

The coordinate value handled by axes is an absolute value. The problem is to add the relative offset value to the absolute coordinate value.

How to resolve

To solve this problem, the offset value should return the difference of the absolute coordinate value to be changed due to the scale value.

To do this, you can add an item called base to the option property and allocate the absolute coordinate value at the point of pinchstart so that it can be used for offset calculation.

Description

A triggered event is required after all actions have been completed.

Take the snap function of iScroll as an example. Currently, I have to check both animationEnd event handler and release event handler.

// animationEnd
const onAnimationEnd = (event) => {
    snap()
}

// release
const onRelease = (event) => {
    if (event.depaPos === event.pestPos) {
        // animationEnd is not fired. so snap function performed here.
        snap()
    } else {
        // animation will be performed. so animationEnd event will be triggered.
    }
}

I think some event will be helpful in this situation.

const onFinish = (event) => {
    snap()
}

Description

• When using hammer-compatiable, eg-axes should work.

Description

provide isTrusted property on events.

When the event is fired using API method, isTrusted is false
When the event is fired using User action, isTrusted is true

According to the unit test(https://goo.gl/G2kNn6), range param is given as [start, end] and
always start <end. therefore No need to iterate the algorithm in the return statement.

current code

  toDestPos = Math.max(targetRange[0], toDestPos);
  toDestPos = Math.min(targetRange[1], toDestPos);
return +Math.min(targetRange[1], Math.max(targetRange[0], toDestPos)).toFixed(5);

recommand

  toDestPos = Math.max(targetRange[0], toDestPos);
  toDestPos = Math.min(targetRange[1], toDestPos);
return +toDestPos.toFixed(5);

now, when disable input, event is fired.
check it!

eg-axes is not support 'sourceMap'
take a look webpack config files.

Description

https://github.com/naver/egjs-axes/blob/master/src/inputType/WheelInput.ts#L89

const offset = (event.deltaY > 0 ? -1 : 1) * this.options.scale;

• useNormalized: true => -1 / 1
• useNormalized: false => -deltaY

Description

In EventManager, triggerChange access the variable(event) that is undefined.

It(event) was remove by 3afd0c5#diff-8ae8f9b823941c19b97e465a152fa1d2R159 commit.

And related code is not modified.

But error is not occurs on chrome, because it access window.event variable that is not intended.

Steps to check or reproduce

• FireFox trigger script error which

I need to detect which inputType caused the event.
Not currently available

Description

WheelInput should trigger change event while scrolling.
While the user scrolls, you need to be able to apply the change of location.

Description

When multiple jQuery instances on a documnet and input param is jQuery.

utils.$ don't check jQuery instance.

reference https://stackoverflow.com/questions/1853223/check-if-object-is-a-jquery-object/25004941#25004941

we should fix following code.
https://github.com/naver/egjs-movablecoord/blob/master/src/utils.js#L24

HammerInput supports 2-axes. (2d)
if HammerInput supports 3-axes, we can control 3'rd axis.
example. minmap or zoom in-out