Touchscreen do not work

[mallumoSK]

Hi, I not sure why but touchscreen do not work on JS target (notebook with touchscreen)

I rewrite fallows, it is NOT the best solution but works:

// de.fabmax.kool.input.PlatformInputJs

    private fun Event.asTouchEvent(): TouchEvent? {
        return if (this is TouchEvent) this
        else null
    }

 private fun installInputHandlers(canvas: HTMLCanvasElement) {
        var isTouchActive = false

        fun Event.buildTouchPosition(): Vec2d? {
            preventDefault()
            return with(canvas.getBoundingClientRect()) {
                asTouchEvent()?.let { touch ->
                    if (touch.changedTouches.length == 0) null
                    else {
                        val item = touch.changedTouches.item(0)
                        Vec2d(
                            item.elementX * window.devicePixelRatio - left,
                            item.elementY * window.devicePixelRatio - top
                        )
                    }
                }
            }
        }

        fun Event.invokeMoveTouchAsMouse() {
            buildTouchPosition()?.also {
                virtualPointerPos.x = it.x
                virtualPointerPos.y = it.y
                PointerInput.handleMouseMove(virtualPointerPos.x, virtualPointerPos.y)
            }
        }

        canvas.onmousemove = { ev ->
            if (!isTouchActive) {
                val bounds = canvas.getBoundingClientRect()
                if (PointerLockState.hasPointerLock) {
                    // on active pointer lock, mouse event position is constant and only deltas are reported
                    //  -> use deltas to compute a virtual unbounded pointer position
                    virtualPointerPos.x += pointerMovementX(ev)
                    virtualPointerPos.y += pointerMovementY(ev)
                } else {
                    virtualPointerPos.x = (ev.clientX * window.devicePixelRatio - bounds.left)
                    virtualPointerPos.y = (ev.clientY * window.devicePixelRatio - bounds.top)
                }
                PointerInput.handleMouseMove(virtualPointerPos.x, virtualPointerPos.y)
            }
        }

        canvas.addEventListener("touchstart", { ev ->
            ev.preventDefault()
            isTouchActive = true
            ev.invokeMoveTouchAsMouse()
            PointerInput.handleMouseButtonEvent(0, true)
        }, false)

        canvas.addEventListener("touchend", { ev ->
            ev.preventDefault()
            ev.invokeMoveTouchAsMouse()
            PointerInput.handleMouseButtonEvent(0, false)
            isTouchActive = false
        }, false)

        canvas.addEventListener("touchcancel", { ev ->
            ev.preventDefault()
            isTouchActive = false
            ev.invokeMoveTouchAsMouse()
            PointerInput.handleMouseExit()
            isTouchActive = false
        }, false)

        canvas.addEventListener("touchmove", { ev ->
            ev.preventDefault()
            ev.asTouchEvent()?.apply {
                if (changedTouches.length == 1) {
                    ev.invokeMoveTouchAsMouse()
                }
            }
        }, false)

...

These modifications break OrbitInputTransform at touch mode But can be easily fixed by storing initial position at touch start and for camera transform use difference between current and initial position

[fabmax]

Can you make a pull request for this? By copy and pasting code it's really difficult to track the actual changes

[mallumoSK]

Ok but how to do it ... i have no permission to create branch

[fabmax]

You have to fork the repository. Then, you can push your changes to your own fork / copy of the repo. Once you did that github should offer you an option to create a pull request.

[mallumoSK]

thanx, good to known :)

https://github.com/fabmax/kool/pull/61