MDN touch-events demo

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_227":228,"_229":230},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_171":-5,"_20":172,"_22":173,"_174":175,"_176":177,"_26":178,"_24":179,"_180":181,"_182":183,"_184":51,"_185":186,"_187":70,"_188":-5,"_189":-5,"_190":191},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","futchitwo","name","f2-mdn-touchevents-demo","branchName","main","version","path","public/index.html","project",{"_36":129,"_13":14,"_38":130,"_49":-5,"_131":51,"_52":53,"_132":53,"_133":-5,"_134":-5,"_135":136,"_137":84,"_138":70,"_139":70,"_140":-5,"_141":34,"_55":56,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":147,"_148":147,"_149":150,"_151":150,"_152":150,"_153":147,"_154":147,"_155":156,"_157":158,"_159":160,"_50":51},"tree",[79,80,81],"file",{"_36":59,"_13":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_38":71,"_17":72,"_73":24,"_74":75,"_76":51,"_77":-5,"_18":78},"contents",[],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":58},"pull","ahead",11,"behind",0,"envVars","id","e85d6f34-439a-11f0-8f9e-76b3cceeab13","createdAt",["D",1749299305090],"updatedAt",["D",1749483756342],"projectId","e85d22e0-439a-11f0-8f9e-76b3cceeab13",39,"forkedBranchId","forkedBranchVersion","lockfileKey","1768879781559-esm.town_v_futchitwo_static-file@39-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","cfc8ae27-214f-422a-b7ec-b505694a4e7d","projectName","static-file","5353a39e-4549-11f0-80b6-76b3cceeab13","index.html","fileId","4ebfacce-ffa4-4bfe-b6ad-7bdd58bc2b99","parentId","89eac6eb-fc9a-46e5-86c0-8ddb0fc8a661","branchId","ef0cff5c-4548-11f0-b0a7-76b3cceeab13","branchVersion",6,"latest",true,["D",1749484168128],1,"fileType","content","\n\n \n \n \n \n\n MDN touch-events demo\n\n \n \n \n \n \n Your browser does not support canvas element.\n \n
\n \n Log:

\n \n","deleted","label",[53,60],{"_36":100,"_13":53,"_61":64,"_63":-5,"_65":66,"_67":72,"_69":70,"_38":101,"_17":34,"_73":102,"_74":-5,"_76":51,"_77":-5,"_88":103,"_18":104},{"_36":91,"_13":92,"_61":93,"_63":-5,"_65":66,"_67":94,"_69":70,"_38":95,"_17":96,"_73":24,"_74":97,"_76":51,"_77":-5,"_88":98,"_18":99},{"_36":82,"_13":83,"_61":84,"_63":-5,"_65":66,"_67":72,"_69":70,"_38":85,"_17":34,"_73":86,"_74":87,"_76":51,"_77":-5,"_88":89,"_18":90},"ef0fc2aa-4548-11f0-b0a7-76b3cceeab13","main.ts","10ef0ddf-ab12-4fd6-a3f9-4fdc8125da17",["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",[],[83],"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",[],[92],"ef0fbfda-4548-11f0-b0a7-76b3cceeab13",["D",1749483999878],"directory",[105,106,107],[53],{"_36":59,"_13":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_38":126,"_17":72,"_73":24,"_74":75,"_76":51,"_77":-5,"_88":127,"_18":128},{"_36":118,"_13":119,"_61":120,"_63":64,"_65":66,"_67":121,"_69":70,"_38":122,"_17":113,"_73":114,"_74":123,"_76":51,"_77":-5,"_88":124,"_18":125},{"_36":108,"_13":109,"_61":110,"_63":64,"_65":66,"_67":111,"_69":70,"_38":112,"_17":113,"_73":114,"_74":115,"_76":51,"_77":-5,"_88":116,"_18":117},"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}",[],[53,109],"6d52a088-4549-11f0-968a-76b3cceeab13","script-RTS.js","61373188-4549-11f0-9589-76b3cceeab13",12,["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}",[],[53,119],["D",1749484168128],[],[53,60],"ef0a1cf6-4548-11f0-b0a7-76b3cceeab13",["D",1749483999878],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","d3230e80-439a-11f0-b22e-93f24241c047","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_170":166},"org",{"_11":12,"_164":-5,"_165":166,"_135":136,"_167":168,"_169":51},"branch",{"_17":121,"_13":16,"_36":66,"_42":129,"_45":37,"_46":44,"_161":53,"_162":43,"_163":56,"_57":14,"_54":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeUJEcTJHOTd3eGZyYVg0QkdubXJsRU9RdlUifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":129,"_13":14,"_38":223,"_49":-5,"_131":51,"_52":53,"_132":53,"_133":-5,"_134":-5,"_135":136,"_137":84,"_138":70,"_139":70,"_140":-5,"_141":34,"_55":56,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":147,"_148":147,"_149":150,"_151":150,"_152":150,"_153":147,"_154":147,"_155":224,"_157":225,"_159":226,"_50":51},[205,209,210],"files",[205,206,207,208,209,210],"counts",{"_196":34,"_197":72,"_198":34,"_35":199,"_200":201},[],{"_36":59,"_13":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_38":71,"_17":72,"_73":24,"_74":75,"_76":51,"_77":-5,"_18":195},"upstreamProject",{"_36":43,"_13":58,"_133":-5,"_134":-5,"_52":53,"_155":194},"upstreamBranch",{"_36":37,"_38":192,"_40":193,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1749299305090],["D",1749483756342],{"_11":12,"_170":166},[53,60],"pulls","branches","forks",{"_202":34,"_204":34},"connections",{"_202":34,"_203":34},"count","unfilledCount","emptyCount",{"_36":100,"_13":53,"_61":64,"_63":-5,"_65":66,"_67":72,"_69":70,"_38":101,"_17":34,"_73":102,"_74":-5,"_76":51,"_77":-5,"_88":221,"_18":222},{"_36":59,"_13":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_38":126,"_17":72,"_73":24,"_74":75,"_76":51,"_77":-5,"_88":219,"_18":220},{"_36":118,"_13":119,"_61":120,"_63":64,"_65":66,"_67":121,"_69":70,"_38":122,"_17":113,"_73":114,"_74":123,"_76":51,"_77":-5,"_88":217,"_18":218},{"_36":108,"_13":109,"_61":110,"_63":64,"_65":66,"_67":111,"_69":70,"_38":112,"_17":113,"_73":114,"_74":115,"_76":51,"_77":-5,"_88":215,"_18":216},{"_36":91,"_13":92,"_61":93,"_63":-5,"_65":66,"_67":94,"_69":70,"_38":95,"_17":96,"_73":24,"_74":97,"_76":51,"_77":-5,"_88":213,"_18":214},{"_36":82,"_13":83,"_61":84,"_63":-5,"_65":66,"_67":72,"_69":70,"_38":85,"_17":34,"_73":86,"_74":87,"_76":51,"_77":-5,"_88":211,"_18":212},[],[83],[],[92],[],[53,109],[],[53,119],[],[53,60],[206,207,208],[53],["D",1749483999878],{"_11":12,"_170":166},{"_11":12,"_164":-5,"_165":166,"_135":136,"_167":168,"_169":51},{"_17":121,"_13":16,"_36":66,"_42":129,"_45":37,"_46":44,"_161":53,"_162":43,"_163":56,"_57":14,"_54":12},"ctx",{"_155":-5,"_189":260,"_261":262,"_263":264,"_265":51,"_266":51,"_267":51,"_268":70,"_269":-5,"_270":-7,"_271":-7,"_272":34,"_273":51,"_274":51,"_275":-5,"_276":51,"_277":51,"_278":51,"_279":-5},"ENV",{"_231":232,"_233":234,"_235":16,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259},"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"]