Cesium: Gallery::Imagery Layers Split

[pasu]

Hi,
A little suggestion:
https://pasu.github.io/ExamplesforCesium/examples/examples.html#Visualization-Planet
I make this demo Imagery Layers Split, which is similiar with Cesiums'.
One day I browsed this demo and found it did not support touch event
Here is my modification and I tested it was fine:

document.getElementById('slider').addEventListener('mousedown', mouseDown, false);
document.getElementById('slider').addEventListener('touchstart', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
window.addEventListener('touchend', mouseUp, false);

function mouseUp() {
  window.removeEventListener('mousemove', sliderMove, true);
  window.removeEventListener('touchmove', sliderMove, true);
}

function mouseDown(e) {
  var slider = document.getElementById('slider');
  var nPos = e.clientX != undefined?e.clientX:e.changedTouches[0].clientX;
  dragStartX = nPos - slider.offsetLeft;
  window.addEventListener('mousemove', sliderMove, true);
  window.addEventListener('touchmove', sliderMove, true);
}

function sliderMove(e) {
  var slider = document.getElementById('slider');
  var nPos = e.clientX != undefined?e.clientX:e.changedTouches[0].clientX;
  var splitPosition = (nPos - dragStartX) / slider.parentElement.offsetWidth;
  slider.style.left = 100.0 * splitPosition + "%";
  viewer.scene.imagerySplitPosition = splitPosition;
}

[ggetz]

Good suggestion, thanks @pasu!

[emackey]

The above update doesn't support PointerEvents. Maybe use ScreenSpaceEventHandler instead?

[pasu]

Well, I will try and test this idea later, thanks @emackey

[pasu]

I got this new skill, @emackey
Here is my update and I test it in Chrome, iPhone 6s and Android(Huawei P9)
it is ok.

var handler = new Cesium.ScreenSpaceEventHandler(slider);
var bMoveActive = false;
function move(movement){
    if(!bMoveActive)
        return;
    var nMove = movement.endPosition.x ;//- movement.startPosition.x;
    var splitPosition = (slider.offsetLeft + nMove) / slider.parentElement.offsetWidth;
    slider.style.left = 100.0 * splitPosition + "%";
    viewer.scene.imagerySplitPosition = splitPosition;
}
handler.setInputAction(function(movement) {
    bMoveActive = true;
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);
handler.setInputAction(function(movement) {
    bMoveActive = true;
}, Cesium.ScreenSpaceEventType.PINCH_START);
handler.setInputAction(function(movement) {
    move(movement);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
handler.setInputAction(function(movement) {
    move(movement);
}, Cesium.ScreenSpaceEventType.PINCH_MOVE);
handler.setInputAction(function(movement) {
    bMoveActive = false;
}, Cesium.ScreenSpaceEventType.LEFT_UP);
handler.setInputAction(function(movement) {
    bMoveActive = false;
}, Cesium.ScreenSpaceEventType.PINCH_END);

[emackey]

@pasu Awesome! Would you be willing to contribute this back to the Sandcastle demo for us? We would need a CLA (unless you work for a company that already signed a Cesium CLA).

[ggetz]

We have a CLA from @pasu already 😄

[pasu]

Yes, I registered CLA:smile:
Now, I am pulling another request #5780 .
When I committed this html page, it would cause errors for the CI test, so I had to rollback the code for the Reviewers. And I largely believe there is nothing wrong with my code.
So would you like to commit this for me or when cesium close the current request #5780, I promise to commit it later. Either is OK to me. I really hope to make more contributions to this great team.
Attachment is Imagery Layers Split.html.
Imagery Layers Split.html.txt

[emackey]

I think the Sandcastle cleanup could be separate from #5780. Sounds like it should wait for that one to get merged first.

[pjcozzi]

Fixed in #5781. Thanks @pasu!

[NaderCHASER]

Unrelated to this issue:
@pasu Any chance you're looking to PR that Vector Tile stuff? I'd be glad to assist if so. :)