Fix 'pan event being cancelled by the browser' bug

This commit is contained in:
2025-06-16 22:41:28 -07:00
parent 363b551068
commit 18bb0b885a
3 changed files with 81 additions and 76 deletions

View File

@@ -101,45 +101,6 @@
</p>
</template>
<div id="debug">
<fieldset name="point">
<legend>hex</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="points">
<legend>grid</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map2">
<legend>map2</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map3">
<legend>map3</legend>
<div>
<label>translatex <input name="translateX" type="number" value="0" /></label>
<label>translatey <input name="translateY" type="number" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scale <input name="scale" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
</div>
<div id="map-container">
<div id="toggle-firing-arc-vis">
<div>davion</div>
@@ -147,6 +108,50 @@
<div>liao</div>
<input type="checkbox" data-allegiance="liao" />
</div>
<div id="panel">
<fieldset name="point">
<legend>hex</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="points">
<legend>grid</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map2">
<legend>map2</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
</div>
</fieldset>
<fieldset name="map3">
<legend>map3</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
</div>
</fieldset>
</div>
<svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
<defs>
<polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
@@ -197,8 +202,8 @@
<rect id="background" x="-1" y="-1" width="2287" height="3087" />
<g id="image-maps">
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" x="2" y="2" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="4" y="1564" />
<image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" />
</g>
<g id="firing-arcs">
@@ -217,8 +222,6 @@
<use href="#n2" x="19" y="-40" opacity="0.5" />
<use href="#n3" x="36" y="-40" opacity="0.5" />
<use href="#n4" x="54" y="-40" opacity="0.5" />
<!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
</svg>
<div id="status">