JSONCanvas gestures for touch inputs

Changes

1 changed files (+122/-0)

• page_builder/default_theme/pages/json_canvas.tsx
  • @@ -90,6 +90,7 @@ position: absolute;
    inset: 0; overflow: auto; + touch-action: none; z-index: 1; }
  • @@ -121,6 +122,10 @@ let vx = 0;
    let vy = 0; let vw = 0; let vh = 0; + const TOUCH_NONE = 0; + const TOUCH_PAN = 1; + const TOUCH_ZOOM = 2; + let touchState = { type: TOUCH_NONE }; for (const child of document.getElementsByClassName("${c.scrollableChild}")) { if (child.scrollHeight !== child.clientHeight) {
  • @@ -129,6 +134,17 @@ if (!ev.ctrlKey) {
    ev.stopPropagation(); } }); + child.addEventListener("touchstart", ev => { + ev.stopPropagation(); + }); + child.addEventListener("touchmove", ev => { + ev.stopPropagation(); + }); + child.addEventListener("touchend", ev => { + ev.stopPropagation(); + }); + } else { + child.style.touchAction = "none"; } }
  • @@ -217,6 +233,112 @@ }
    applyTransformToCanvas(); }, { passive: false }); + + container.addEventListener("touchstart", ev => { + const firstTouch = ev.touches.item(0); + if (!firstTouch) { + return; + } + + if (ev.touches.length >= 2) { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + touchState = { + type: TOUCH_ZOOM, + initialScale: scale, + initialDist: dist, + }; + return; + } + + touchState = { + type: TOUCH_PAN, + initialTouch: firstTouch, + initialX: tx, + initialY: ty, + }; + }); + + container.addEventListener("touchend", ev => { + switch (ev.touches.length) { + case 0: + touchState = { type: TOUCH_NONE }; + return; + case 1: + touchState = { + type: TOUCH_PAN, + initialTouch: ev.touches.item(0), + initialX: tx, + initialY: ty, + }; + return; + case 2: { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + + touchState = { + type: TOUCH_ZOOM, + initialScale: scale, + initialDist: dist, + }; + return; + } + } + }); + + container.addEventListener("touchcancel", ev => { + touchState = { type: TOUCH_NONE }; + }); + + container.addEventListener("touchmove", ev => { + switch (touchState.type) { + case TOUCH_PAN: { + const touch = ev.touches.item(0); + tx = touchState.initialX + (touch.clientX - touchState.initialTouch.clientX) / scale; + ty = touchState.initialY + (touch.clientY - touchState.initialTouch.clientY) / scale; + applyTransformToCanvas(); + return; + } + case TOUCH_ZOOM: { + const dist = getAvgTouchDist(ev.touches); + if (dist === null) { + return; + } + + scale = Math.min(SCALE_MAX, Math.max(SCALE_MIN, touchState.initialScale * (dist / touchState.initialDist))); + applyTransformToCanvas(); + return; + } + } + }); + } + + function getAvgTouchDist(touches) { + let px = null; + let py = null; + let tx = 0; + let ty = 0; + + for (let i = 0, touch; touch = touches.item(i); i++) { + if (px === null || py === null) { + px = touch.clientX; + py = touch.clientY; + } + + tx += touch.clientX; + ty += touch.clientY; + } + + const l = touches.length; + if (px === null || py === null || !l) { + return null; + } + + return Math.sqrt(Math.pow(px - tx / l, 2) + Math.pow(py - ty / l, 2)); } function syncCursor() {