MDN touch-events demo

\n \n","label",[87,68],"pulls","branches","forks","envVars",{"_178":26,"_180":26},"connections",{"_178":26,"_179":26},"count","unfilledCount","emptyCount",{"_33":224,"_13":87,"_66":163,"_43":-5,"_35":36,"_164":40,"_165":94,"_37":225,"_39":26,"_69":226,"_167":-5,"_70":24,"_169":-5,"_192":227,"_17":228},{"_33":162,"_13":68,"_66":67,"_43":163,"_35":36,"_164":76,"_165":94,"_37":221,"_39":40,"_69":21,"_167":168,"_70":24,"_169":-5,"_192":222,"_17":223},{"_33":214,"_13":215,"_66":216,"_43":163,"_35":36,"_164":117,"_165":94,"_37":217,"_39":209,"_69":210,"_167":218,"_70":24,"_169":-5,"_192":219,"_17":220},{"_33":204,"_13":205,"_66":206,"_43":163,"_35":36,"_164":207,"_165":94,"_37":208,"_39":209,"_69":210,"_167":211,"_70":24,"_169":-5,"_192":212,"_17":213},{"_33":195,"_13":196,"_66":197,"_43":-5,"_35":36,"_164":198,"_165":94,"_37":199,"_39":200,"_69":21,"_167":201,"_70":24,"_169":-5,"_192":202,"_17":203},{"_33":187,"_13":188,"_66":92,"_43":-5,"_35":36,"_164":40,"_165":94,"_37":189,"_39":26,"_69":190,"_167":191,"_70":24,"_169":-5,"_192":193,"_17":194},"ef0fc2aa-4548-11f0-b0a7-76b3cceeab13","main.ts",["D",1749483999878],"http","import { serveFile } from \"https://esm.town/v/std/utils@105-main/index.ts\";\n\nconst DIR = \"/public\";\n// ref: https://www.val.town/x/std/utils/code/static/main.tsx\nexport default (req: Request) => {\n const url = new URL(req.url);\n if (url.pathname === \"/\") return serveFile(DIR + \"/index.html\", import.meta.url);\n return serveFile(DIR + url.pathname, import.meta.url);\n};","children",[],[188],"49678c92-4549-11f0-b460-76b3cceeab13","README.md","3f67d0da-4549-11f0-b918-76b3cceeab13",5,["D",1749484151484],3,"# Touch-events demo\n\nSee [MDN docks](https://developer.mozilla.org/docs/Web/API/Touch_events)\n\n## update\n- 2021/12/12 Fix: Use Log function\n- 2021/12/12 Improve: Use HSL instead of color code for colorling",[],[196],"5e9c4d6e-4549-11f0-b918-76b3cceeab13","script.js","5501a128-4549-11f0-8958-76b3cceeab13",9,["D",1749484187062],2,"script","\"use strict\";\nlog(\"notRTS: use sprict-RTS.js\");\nvar ongoingTouches = [];\nvar el, ctx;\nvar mouseClick = false;\n\nfunction startup() {\n el = document.getElementById(\"canvas\");\n // use el for preventDefault\n el.addEventListener(\"touchstart\", handleStart, false);\n el.addEventListener(\"touchend\", handleEnd, false);\n el.addEventListener(\"touchcancel\", handleCancel, false);\n el.addEventListener(\"touchmove\", handleMove, false);\n\n // use document for when mouse gone out of canvas during clicking\n // instead, the default offsetX will be inappropriate\n document.addEventListener(\"mousedown\", handleStartMouse, false);\n document.addEventListener(\"mouseup\", handleEndMouse, false);\n document.addEventListener(\"mousemove\", handleMoveMouse, false);\n\n ctx = el.getContext(\"2d\");\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", startup);\ndocument.getElementById(\"resetbutton\").addEventListener(\"click\", reset);\n\nfunction handleStart(evt) {\n evt.preventDefault();\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n ongoingTouches.push(genOffsetPos(touches[i]));\n }\n}\n\nfunction handleStartMouse(evt) {\n // reset for mouseup during touching\n var idx = ongoingTouchIndexById(-1);\n ongoingTouches.splice(idx, 1); // remove it; we're done\n\n ongoingTouches.push(genOffsetPos(evt));\n mouseClick = true;\n}\n\nfunction handleMove(evt) {\n evt.preventDefault();\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var color = colorForTouch(touches[i]);\n var idx = ongoingTouchIndexById(touches[i].identifier);\n\n if (idx >= 0) {\n drawLine(color, ongoingTouches[idx], genOffsetPos(touches[i]));\n ongoingTouches.splice(idx, 1, genOffsetPos(touches[i])); // swap in the new touch record\n }\n }\n}\n\nfunction handleMoveMouse(evt) {\n evt.preventDefault();\n if (mouseClick) {\n var idx = ongoingTouchIndexById(-1);\n var pos = genOffsetPos(evt);\n\n drawLine(\"#000\", ongoingTouches[idx], pos);\n ongoingTouches.splice(idx, 1, pos);\n }\n}\n\nfunction handleEnd(evt) {\n evt.preventDefault();\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var color = colorForTouch(touches[i]);\n var idx = ongoingTouchIndexById(touches[i].identifier);\n\n if (idx >= 0) {\n drawLine(color, ongoingTouches[idx], genOffsetPos(touches[i]));\n ongoingTouches.splice(idx, 1); // remove it; we're done\n }\n }\n}\n\nfunction handleEndMouse(evt) {\n evt.preventDefault();\n var idx = ongoingTouchIndexById(-1);\n\n drawLine(\"#000\", ongoingTouches[idx], genOffsetPos(evt));\n ongoingTouches.splice(idx, 1);\n mouseClick = false;\n}\n\nfunction handleCancel(evt) {\n evt.preventDefault();\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var idx = ongoingTouchIndexById(touches[i].identifier);\n ongoingTouches.splice(idx, 1); // remove it; we're done\n }\n}\n\nfunction drawLine(color, pastPos, presentPos) {\n ctx.beginPath();\n ctx.strokeStyle = color;\n ctx.lineWidth = 4;\n ctx.moveTo(pastPos.offsetX, pastPos.offsetY);\n ctx.lineTo(presentPos.offsetX, presentPos.offsetY);\n ctx.stroke();\n}\n\nfunction colorForTouch(touch) {\n var hue = (touch.identifier * 48) % 360;\n var color = \"hsl(\" + hue + \", 100%, 50%)\";\n return color;\n}\n\nfunction genOffsetPos({ identifier, pageX, pageY }) {\n return {\n identifier: identifier !== undefined ? identifier : -1,\n offsetX: pageX - el.offsetLeft,\n offsetY: pageY - el.offsetTop,\n };\n}\n\nfunction ongoingTouchIndexById(idToFind) {\n for (var i = 0; i < ongoingTouches.length; i++) {\n var id = ongoingTouches[i].identifier;\n\n if (id == idToFind) return i;\n }\n return -1; // not found\n}\n\nfunction log(msg) {\n var p = document.getElementById(\"log\");\n p.innerHTML = msg + \"\\n\" + p.innerHTML;\n console.log(msg);\n}\n\nfunction reset() {\n var p = document.getElementById(\"log\");\n p.innerHTML = \"\";\n ongoingTouches = [];\n ctx.fillStyle = \"#fff\";\n ctx.fillRect(0, 0, el.width, el.height);\n}",[],[87,205],"6d52a088-4549-11f0-968a-76b3cceeab13","script-RTS.js","61373188-4549-11f0-9589-76b3cceeab13",["D",1749484211745],"\"use strict\";\n\nfunction startup() {\n var el = document.getElementById(\"canvas\");\n el.addEventListener(\"touchstart\", handleStart, false);\n el.addEventListener(\"touchend\", handleEnd, false);\n el.addEventListener(\"touchcancel\", handleCancel, false);\n el.addEventListener(\"touchmove\", handleMove, false);\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", startup);\ndocument.getElementById(\"resetbutton\").addEventListener(\"click\", reset);\n\nvar ongoingTouches = [];\n\nfunction handleStart(evt) {\n evt.preventDefault();\n log(\"touchstart.\");\n var el = document.getElementById(\"canvas\");\n var ctx = el.getContext(\"2d\");\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n log(\"touchstart:\" + i + \"...\");\n ongoingTouches.push(copyTouch(touches[i]));\n var color = colorForTouch(touches[i]);\n ctx.beginPath();\n ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0, 2 * Math.PI, false); // a circle at the start\n ctx.fillStyle = color;\n ctx.fill();\n log(\"touchstart:\" + i + \".\");\n }\n}\n\nfunction handleMove(evt) {\n evt.preventDefault();\n var el = document.getElementById(\"canvas\");\n var ctx = el.getContext(\"2d\");\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var color = colorForTouch(touches[i]);\n var idx = ongoingTouchIndexById(touches[i].identifier);\n\n if (idx >= 0) {\n log(\"continuing touch \" + idx);\n ctx.beginPath();\n log(\"ctx.moveTo(\" + ongoingTouches[idx].pageX + \", \" + ongoingTouches[idx].pageY + \");\");\n ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);\n log(\"ctx.lineTo(\" + touches[i].pageX + \", \" + touches[i].pageY + \");\");\n ctx.lineTo(touches[i].pageX, touches[i].pageY);\n ctx.lineWidth = 4;\n ctx.strokeStyle = color;\n ctx.stroke();\n\n ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record\n log(\".\");\n } else {\n log(\"can't figure out which touch to continue\");\n }\n }\n}\n\nfunction handleEnd(evt) {\n evt.preventDefault();\n log(\"touchend\");\n var el = document.getElementById(\"canvas\");\n var ctx = el.getContext(\"2d\");\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var color = colorForTouch(touches[i]);\n var idx = ongoingTouchIndexById(touches[i].identifier);\n\n if (idx >= 0) {\n ctx.lineWidth = 4;\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);\n ctx.lineTo(touches[i].pageX, touches[i].pageY);\n ctx.fillRect(touches[i].pageX - 4, touches[i].pageY - 4, 8, 8); // and a square at the end\n ongoingTouches.splice(idx, 1); // remove it; we're done\n } else {\n log(\"can't figure out which touch to end\");\n }\n }\n}\n\nfunction handleCancel(evt) {\n evt.preventDefault();\n log(\"touchcancel.\");\n var touches = evt.changedTouches;\n\n for (var i = 0; i < touches.length; i++) {\n var idx = ongoingTouchIndexById(touches[i].identifier);\n ongoingTouches.splice(idx, 1); // remove it; we're done\n }\n}\n\nfunction colorForTouch(touch) {\n var hue = touch.identifier * 48 % 360;\n var color = \"hsl(\" + hue + \", 100%, 50%)\";\n log(\"color for touch with identifier \" + touch.identifier + \" = \" + color);\n return color;\n}\n\nfunction copyTouch({ identifier, pageX, pageY }) {\n return { identifier, pageX, pageY };\n}\n\nfunction ongoingTouchIndexById(idToFind) {\n for (var i = 0; i < ongoingTouches.length; i++) {\n var id = ongoingTouches[i].identifier;\n\n if (id == idToFind) {\n return i;\n }\n }\n return -1; // not found\n}\n\nfunction log(msg) {\n var p = document.getElementById(\"log\");\n p.innerHTML = msg + \"\\n\" + p.innerHTML;\n console.log(msg);\n}\n\nfunction reset() {\n var p = document.getElementById(\"log\");\n p.innerHTML = \"\";\n ongoingTouches = [];\n var el = document.getElementById(\"canvas\");\n var ctx = el.getContext(\"2d\");\n ctx.fillStyle = \"#fff\";\n ctx.fillRect(0, 0, el.width, el.height);\n}",[],[87,215],["D",1749484168128],[],[87,68],"ef0fbfda-4548-11f0-b0a7-76b3cceeab13",["D",1749483999878],"directory",[182,183,184],[87],["D",1749483999878],{"_11":12,"_131":73},{"_11":12,"_127":-5,"_72":73,"_30":71,"_128":129,"_130":24},{"_39":117,"_13":16,"_33":36,"_118":83,"_119":63,"_120":64,"_121":87,"_122":123,"_124":42,"_125":14,"_126":12},"ctx",{"_52":-5,"_152":266,"_267":268,"_269":270,"_271":24,"_272":24,"_273":24,"_274":94,"_275":-5,"_276":-7,"_277":-7,"_278":26,"_279":24,"_280":24,"_281":-5,"_282":24,"_283":24,"_284":24,"_285":-5},"ENV",{"_237":238,"_239":240,"_241":16,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html