SoftwareBrothers/fabricjs-viewport

edit mode don't work with touch device

trippo opened this issue · 1 comments

edit mode don't work with touch device but in the original fabricjs work fine

I used this workaround: convert touch events into mouse event. Revision of http://stackoverflow.com/questions/1517924/javascript-mapping-touch-events-to-mouse-events?answertab=active#tab-top

            //TOUCH EVENT TO MOUSE EVENT
            function touchHandler(event) {
                var touches = event.changedTouches,
                    first = touches[0],
                    type = "";
                switch (event.type) {
                case "touchstart":
                    type = "mousedown";
                    break;
                case "touchmove":
                    type = "mousemove";
                    break;
                case "touchend":
                    type = "mouseup";
                    break;
                default:
                    return;
                }

                //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
                //           screenX, screenY, clientX, clientY, ctrlKey, 
                //           altKey, shiftKey, metaKey, button, relatedTarget);

                var simulatedEvent = document.createEvent("MouseEvent");
                simulatedEvent.initMouseEvent(type, true, true, window, 1,
                    first.screenX, first.screenY,
                    first.clientX, first.clientY, false,
                    false, false, false, 0 /*left*/, null);

                first.target.dispatchEvent(simulatedEvent);
                event.preventDefault();
            }


            var lista_canvas = document.getElementsByClassName("upper-canvas");
            for (var can = 1; can <= 1; can++) {
                lista_canvas[can].addEventListener("touchstart", touchHandler, true);
                lista_canvas[can].addEventListener("touchmove", touchHandler, true);
                lista_canvas[can].addEventListener("touchend", touchHandler, true);
                lista_canvas[can].addEventListener("touchcancel", touchHandler, true);
            }