mirror of
https://github.com/storytold/vectorcraft.git
synced 2026-10-24 09:46:59 -06:00
gniax
51673cd098
Read pen and finger Pointer Events in the web shell (capture phase) instead of eframe's touch handlers, which can't tell a pen from a finger and see every touch twice. The pen drives the pointer with its pressure and hovers; fingers are touch contacts for pinch, two-finger pan and undo/redo taps. Once a pen has been seen (remembered in localStorage), a finger or a resting palm never presses a tool on the canvas, and a pen landing cancels fingers already down. A long press drops the tool press and opens the context menu. The page no longer scrolls, zooms or selects under touch, and the canvas stays inside the safe areas of a full-screen app.
33 lines
1.9 KiB
HTML
33 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-title" content="VectorCraft">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="theme-color" content="#262626">
|
|
<title>VectorCraft</title>
|
|
<link data-trunk rel="rust" data-bin="vectorcraft-web" data-wasm-opt="z" data-weak-refs />
|
|
<style>
|
|
/* iPad: no page scroll, bounce, pinch zoom, text selection or callout; the app takes the gestures. */
|
|
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #262626;
|
|
overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
|
|
-webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
|
|
/* Inside the safe areas (notch, home indicator) of a full-screen app. */
|
|
#vectorcraft_canvas { position: absolute; top: env(safe-area-inset-top, 0); right: env(safe-area-inset-right, 0);
|
|
bottom: env(safe-area-inset-bottom, 0); left: env(safe-area-inset-left, 0);
|
|
width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
|
|
height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
|
|
display: block; touch-action: none; }
|
|
#vectorcraft_loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
color: #b8b8b8; font: 14px system-ui, sans-serif; pointer-events: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="vectorcraft_canvas"></canvas>
|
|
<div id="vectorcraft_loading">Loading VectorCraft…</div>
|
|
</body>
|
|
</html>
|