Pan and Pinch Conflict

[4piu]

I have a component that I want to recognize gestures on horizontal axis: 1. drag 2. two finger drag 3. pinch

const mc = new Hammer.Manager(document.getElementById('touch'));
mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, pointers: 0, threshold: 5 }));
mc.add(new Hammer.Pinch({threshold: 0.2, pointers: 2}));

Whatever threshold values I set, two finger drag and pinch won't work well with each other. One gesture always been recognized with high error.

Besides, If the pinch is recognized as two-finger drag, or vice versa, the gesture will not correct "on-the-fly". Eg. if your gesture is mistakenly recognized as drag, no matter how much your finger pinches, it stays in the drag mode (which is expected, but I would like a larger threshold before hammer.js makes the decision)

Please refer to the JSFiddle for demo