${game.i18n.localize("SETTINGS.ReloadPromptBody")}
` 104 | }) 105 | if ( !reload ) return 106 | if ( game.user.isGM ) game.socket.emit("reload") 107 | foundry.utils.debouncedReload() 108 | } 109 | 110 | activateListeners(html) { 111 | super.activateListeners(html) 112 | } 113 | } 114 | 115 | export function registerTouchSettings() { 116 | // Overrides 117 | 118 | game.settings.register(MODULE_NAME, CORE_FUNCTIONALITY + "_override", { 119 | name: "Core Functionality", 120 | hint: "Caution: disabling this option will remove all TouchVTT functionality, and other options will be ignored", 121 | scope: "world", 122 | config: false, 123 | type: String, 124 | choices: { 125 | ["on"]: "On", 126 | ["off"]: "Off", 127 | ["override_off"]: "Don't override" 128 | }, 129 | default: "override_off", 130 | }) 131 | 132 | game.settings.register(MODULE_NAME, GESTURE_MODE_SETTING + "_override", { 133 | name: "Zoom / Pan Gestures", 134 | hint: "Select the gesture to use for zooming & panning the game canvas", 135 | scope: "world", 136 | config: false, 137 | type: String, 138 | choices: { 139 | [GESTURE_MODE_COMBINED]: "Zoom & Pan with 2 fingers", 140 | [GESTURE_MODE_SPLIT]: "Zoom with 2 fingers, pan with 3 fingers", 141 | [GESTURE_MODE_OFF]: "No zoom or pan gestures", 142 | ["override_off"]: "Don't override" 143 | }, 144 | default: "override_off", 145 | }) 146 | 147 | game.settings.register(MODULE_NAME, DIRECTIONAL_ARROWS_SETTING + "_override", { 148 | name: "Direction arrows in Token HUD", 149 | hint: "Enables / disables the addition of arrow buttons used to rotate a token in the token's right-click menu", 150 | scope: "world", 151 | config: false, 152 | type: String, 153 | choices: { 154 | [DIRECTIONAL_ARROWS_ON]: "On", 155 | [DIRECTIONAL_ARROWS_OFF]: "Off", 156 | ["override_off"]: "Don't override" 157 | }, 158 | default: "override_off", 159 | }) 160 | 161 | game.settings.register(MODULE_NAME, EASY_TARGET_SETTING + "_override", { 162 | name: "Targeting behavior", 163 | hint: "Controls if and how unowned tokens can be targeted via the touch interface", 164 | scope: "world", 165 | config: false, 166 | type: String, 167 | choices: { 168 | [EASY_TARGET_OFF]: "Disabled", 169 | [EASY_TARGET_SINGLE]: "Allow single target", 170 | [EASY_TARGET_MULTIPLE]: "Allow multiple targets", 171 | ["override_off"]: "Don't override" 172 | }, 173 | default: "override_off", 174 | }) 175 | 176 | game.settings.register(MODULE_NAME, MEASUREMENT_HUD_SETTING + "_override", { 177 | name: "Measurement HUD", 178 | hint: "Shows a UI while measuring distance with the ruler, allowing you to set waypoints or move your token", 179 | scope: "world", 180 | config: false, 181 | type: String, 182 | choices: { 183 | [MEASUREMENT_HUD_OFF]: "Disabled", 184 | [MEASUREMENT_HUD_RIGHT]: "Show right", 185 | [MEASUREMENT_HUD_LEFT]: "Show left", 186 | ["override_off"]: "Don't override" 187 | }, 188 | default: "override_off", 189 | }) 190 | 191 | game.settings.register(MODULE_NAME, LARGE_BUTTONS_SETTING + "_override", { 192 | name: "Enlarge buttons in on-screen UI", 193 | hint: "Increases the size of menu bar buttons to make them easier to use with touch controls", 194 | scope: "world", 195 | config: false, 196 | type: String, 197 | choices: { 198 | ["on"]: "On", 199 | ["off"]: "Off", 200 | ["override_off"]: "Don't override" 201 | }, 202 | default: "override_off", 203 | }) 204 | 205 | game.settings.register(MODULE_NAME, PAUSE_BUTTON_SETTING + "_override", { 206 | name: "Show a play/pause button", 207 | hint: "Adds a play/pause button to the UI controls", 208 | scope: "world", 209 | config: false, 210 | type: String, 211 | choices: { 212 | ["on"]: "On", 213 | ["off"]: "Off", 214 | ["override_off"]: "Don't override" 215 | }, 216 | default: "override_off", 217 | }) 218 | 219 | game.settings.register(MODULE_NAME, REMOVE_HOVER_EFFECTS + "_override", { 220 | name: "Remove hover effects", 221 | hint: "Disable hover effects on touch devices", 222 | scope: "world", 223 | config: false, 224 | type: String, 225 | choices: { 226 | ["on"]: "On", 227 | ["off"]: "Off", 228 | ["override_off"]: "Don't override" 229 | }, 230 | default: "override_off", 231 | }) 232 | 233 | game.settings.register(MODULE_NAME, DISABLE_DBLCLICK + "_override", { 234 | name: "Disable Double Clicks", 235 | hint: "Disable double clicks on the canvas. This might help with accidental opening of actor sheets on IR frames", 236 | scope: "world", 237 | config: false, 238 | type: String, 239 | choices: { 240 | ["on"]: "On", 241 | ["off"]: "Off", 242 | ["override_off"]: "Don't override" 243 | }, 244 | default: "override_off", 245 | }) 246 | 247 | game.settings.register(MODULE_NAME, DISABLE_DRAGDROP + "_override", { 248 | name: "Disable Drag and Drop", 249 | hint: "Disable touch drag and drop. This might help with accidental copying of items", 250 | scope: "world", 251 | config: false, 252 | type: String, 253 | choices: { 254 | ["on"]: "On", 255 | ["off"]: "Off", 256 | ["override_off"]: "Don't override" 257 | }, 258 | default: "override_off", 259 | }) 260 | 261 | game.settings.register(MODULE_NAME, CANVAS_RIGHT_CLICK_TIMEOUT + "_override", { 262 | name: "Canvas right-click timer (ms)", 263 | hint: "How long a touch on the canvas takes to become a right click", 264 | scope: "world", 265 | config: false, 266 | type: String, 267 | choices: { 268 | ["on"]: "On", 269 | ["off"]: "Off", 270 | ["override_off"]: "Don't override" 271 | }, 272 | default: "override_off", 273 | }) 274 | 275 | game.settings.register(MODULE_NAME, CANVAS_LONG_PRESS_TIMEOUT + "_override", { 276 | name: "Canvas ping timer (ms)", 277 | hint: "How long a touch on the canvas takes to become a ping", 278 | scope: "world", 279 | config: false, 280 | type: String, 281 | choices: { 282 | ["on"]: "On", 283 | ["off"]: "Off", 284 | ["override_off"]: "Don't override" 285 | }, 286 | default: "override_off", 287 | }) 288 | 289 | // Client settings 290 | 291 | game.settings.register(MODULE_NAME, CORE_FUNCTIONALITY, { 292 | name: "Core Functionality" + (game.settings.get(MODULE_NAME, CORE_FUNCTIONALITY + "_override") == "override_off" ? "" : " *"), 293 | hint: "Caution: disabling this option will remove all TouchVTT functionality, and other options will be ignored", 294 | scope: "client", 295 | config: true, 296 | requiresReload: true, 297 | type: Boolean, 298 | default: true, 299 | }) 300 | 301 | game.settings.register(MODULE_NAME, GESTURE_MODE_SETTING, { 302 | name: "Zoom / Pan Gestures" + (game.settings.get(MODULE_NAME, GESTURE_MODE_SETTING + "_override") == "override_off" ? "" : " *"), 303 | hint: "Select the gesture to use for zooming & panning the game canvas", 304 | scope: "client", 305 | config: true, 306 | type: String, 307 | choices: { 308 | [GESTURE_MODE_COMBINED]: "Zoom & Pan with 2 fingers", 309 | [GESTURE_MODE_SPLIT]: "Zoom with 2 fingers, pan with 3 fingers", 310 | [GESTURE_MODE_OFF]: "No zoom or pan gestures", 311 | }, 312 | default: GESTURE_MODE_COMBINED, 313 | }) 314 | 315 | game.settings.register(MODULE_NAME, ZOOM_THRESHOLD_SETTING, { 316 | name: "Zoom Sensitivity", 317 | hint: "Sensitivity of the zoom gesture (if enabled)", 318 | scope: "client", 319 | config: false, 320 | type: Number, 321 | range: { 322 | min: 0, 323 | max: 100, 324 | step: 1 325 | }, 326 | default: 100, 327 | }) 328 | 329 | game.settings.register(MODULE_NAME, PAN_THRESHOLD_SETTING, { 330 | name: "Pan Sensitivity", 331 | hint: "Sensitivity of the pan gesture (if enabled)", 332 | scope: "client", 333 | config: false, 334 | type: Number, 335 | range: { 336 | min: 0, 337 | max: 100, 338 | step: 1 339 | }, 340 | default: 100, 341 | }) 342 | 343 | game.settings.register(MODULE_NAME, DIRECTIONAL_ARROWS_SETTING, { 344 | name: "Direction arrows in Token HUD" + (game.settings.get(MODULE_NAME, DIRECTIONAL_ARROWS_SETTING + "_override") == "override_off" ? "" : " *"), 345 | hint: "Enables / disables the addition of arrow buttons used to rotate a token in the token's right-click menu", 346 | scope: "client", 347 | config: true, 348 | type: String, 349 | choices: { 350 | [DIRECTIONAL_ARROWS_ON]: "On", 351 | [DIRECTIONAL_ARROWS_OFF]: "Off", 352 | }, 353 | default: DIRECTIONAL_ARROWS_ON, 354 | }) 355 | 356 | game.settings.register(MODULE_NAME, EASY_TARGET_SETTING, { 357 | name: "Targeting behavior" + (game.settings.get(MODULE_NAME, EASY_TARGET_SETTING + "_override") == "override_off" ? "" : " *"), 358 | hint: "Controls if and how unowned tokens can be targeted via the touch interface", 359 | scope: "client", 360 | config: true, 361 | type: String, 362 | choices: { 363 | [EASY_TARGET_OFF]: "Disabled", 364 | [EASY_TARGET_SINGLE]: "Allow single target", 365 | [EASY_TARGET_MULTIPLE]: "Allow multiple targets", 366 | }, 367 | default: EASY_TARGET_SINGLE, 368 | }) 369 | 370 | game.settings.register(MODULE_NAME, MEASUREMENT_HUD_SETTING, { 371 | name: "Measurement HUD" + (game.settings.get(MODULE_NAME, MEASUREMENT_HUD_SETTING + "_override") == "override_off" ? "" : " *"), 372 | hint: "Shows a UI while measuring distance with the ruler, allowing you to set waypoints or move your token", 373 | scope: "client", 374 | config: true, 375 | type: String, 376 | choices: { 377 | [MEASUREMENT_HUD_OFF]: "Disabled", 378 | [MEASUREMENT_HUD_RIGHT]: "Show right", 379 | [MEASUREMENT_HUD_LEFT]: "Show left", 380 | }, 381 | default: MEASUREMENT_HUD_RIGHT, 382 | }) 383 | 384 | game.settings.register(MODULE_NAME, LARGE_BUTTONS_SETTING, { 385 | name: "Enlarge buttons in on-screen UI" + (game.settings.get(MODULE_NAME, LARGE_BUTTONS_SETTING + "_override") == "override_off" ? "" : " *"), 386 | hint: "Increases the size of menu bar buttons to make them easier to use with touch controls", 387 | scope: "client", 388 | config: true, 389 | type: Boolean, 390 | default: false, 391 | onChange: enabled => updateButtonSize(enabled), 392 | }) 393 | 394 | game.settings.register(MODULE_NAME, PAUSE_BUTTON_SETTING, { 395 | name: "Show a play/pause button" + (game.settings.get(MODULE_NAME, PAUSE_BUTTON_SETTING + "_override") == "override_off" ? "" : " *"), 396 | hint: "Adds a play/pause button to the UI controls", 397 | scope: "client", 398 | config: true, 399 | type: Boolean, 400 | default: true, 401 | onChange: enabled => toggleUtilityControls(enabled), 402 | }) 403 | 404 | game.settings.register(MODULE_NAME, REMOVE_HOVER_EFFECTS, { 405 | name: "Remove hover effects" + (game.settings.get(MODULE_NAME, REMOVE_HOVER_EFFECTS + "_override") == "override_off" ? "" : " *"), 406 | hint: "Disable hover effects on touch devices", 407 | scope: "client", 408 | config: true, 409 | requiresReload: true, 410 | type: Boolean, 411 | default: false, 412 | }) 413 | 414 | game.settings.register(MODULE_NAME, DISABLE_DBLCLICK, { 415 | name: "Disable Double Clicks" + (game.settings.get(MODULE_NAME, DISABLE_DBLCLICK + "_override") == "override_off" ? "" : " *"), 416 | hint: "Disable double clicks on the canvas. This might help with accidental opening of actor sheets on IR frames", 417 | scope: "client", 418 | config: true, 419 | requiresReload: true, 420 | type: Boolean, 421 | default: false, 422 | }) 423 | 424 | game.settings.register(MODULE_NAME, DISABLE_DRAGDROP, { 425 | name: "Disable Drag and Drop" + (game.settings.get(MODULE_NAME, DISABLE_DRAGDROP + "_override") == "override_off" ? "" : " *"), 426 | hint: "Disable touch drag and drop. This might help with accidental copying of items", 427 | scope: "client", 428 | config: true, 429 | requiresReload: true, 430 | type: Boolean, 431 | default: false, 432 | }) 433 | 434 | game.settings.register(MODULE_NAME, CANVAS_RIGHT_CLICK_TIMEOUT, { 435 | name: "Canvas right-click timer (ms)" + (game.settings.get(MODULE_NAME, CANVAS_RIGHT_CLICK_TIMEOUT + "_override") == "override_off" ? "" : " *"), 436 | hint: "How long a touch on the canvas takes to become a right click", 437 | scope: "client", 438 | config: true, 439 | type: Number, 440 | range: { 441 | min: 100, 442 | step: 50, 443 | max: 3000 444 | }, 445 | default: 400, 446 | }) 447 | 448 | game.settings.register(MODULE_NAME, CANVAS_LONG_PRESS_TIMEOUT, { 449 | name: "Canvas ping timer (ms)" + (game.settings.get(MODULE_NAME, CANVAS_LONG_PRESS_TIMEOUT + "_override") == "override_off" ? "" : " *"), 450 | hint: "How long a touch on the canvas takes to become a ping", 451 | scope: "client", 452 | config: true, 453 | type: Number, 454 | range: { 455 | min: 100, 456 | step: 50, 457 | max: 3000 458 | }, 459 | default: 1000, 460 | }) 461 | 462 | game.settings.register(MODULE_NAME, DEBUG_MODE_SETTING, { 463 | name: "Enable Debug Mode", 464 | hint: "Sends additional log messages to the developer console", 465 | scope: "client", 466 | config: true, 467 | requiresReload: true, 468 | type: Boolean, 469 | default: false, 470 | }) 471 | 472 | // Override menu 473 | game.settings.registerMenu(MODULE_NAME, "SettingsOverrideMenu", { 474 | name: "Client Settings Overrides", 475 | label: "Configure Overrides", 476 | hint: "Configure which client settings are forced by the GM.", 477 | icon: "fas fa-bars", 478 | type: SettingsOverrideMenu, 479 | restricted: true 480 | }) 481 | 482 | // Testing new calibration menu 483 | game.settings.registerMenu(MODULE_NAME, "GestureCalibrationMenu", { 484 | name: "Gesture Sensitivity Calibration", 485 | label: "Calibrate Touch Gestures", 486 | hint: "Gesture detection can be influenced by your display size and resolution. Use this tool to calibrate if you have issues with sensitivity.", 487 | icon: "fas fa-wrench", 488 | type: GestureCalibrationMenu, 489 | restricted: false 490 | }) 491 | 492 | // Hook to disable overridden settings 493 | Hooks.on("renderSettingsConfig", (settingsConfig, settingsElem, settingsInfo) => { 494 | var touchVttSettings = settingsInfo.categories.find(c => c.id == MODULE_NAME).settings 495 | let overridePresent = false 496 | touchVttSettings.forEach(setting => { 497 | let overridden = setting.name.endsWith("*") 498 | let input = settingsElem.find(`[name='${setting.id}']`) 499 | input.prop("disabled", overridden) 500 | overridePresent |= overridden 501 | }) 502 | if (overridePresent) { 503 | settingsElem.find(`[data-tab='${MODULE_NAME}'] h2`).after($("").html("Some settings, indicated with an asterisk (*), are being overridden by the GM. The values selected here might not be accurate.")) 504 | } 505 | }) 506 | 507 | } 508 | -------------------------------------------------------------------------------- /src/foundryvtt/FoundryCanvas.js: -------------------------------------------------------------------------------- 1 | import ObjectUtils from '../utils/ObjectUtils.js' 2 | import FoundryUser from './FoundryUser.js' 3 | import FoundryModules from './FoundryModules.js' 4 | 5 | const LOCK_VIEW_KEY = 'LockView' 6 | 7 | class FoundryCanvas { 8 | get raw() { 9 | return canvas 10 | } 11 | 12 | get zoom() { 13 | return this.raw.stage.scale.x 14 | } 15 | 16 | pan({ x, y, zoom }) { 17 | this.raw.pan({ x, y, scale: zoom }) 18 | } 19 | 20 | zoom(scale) { 21 | this.raw.pan({ scale }) 22 | } 23 | 24 | get worldTransform() { 25 | return this.raw.stage.transform.worldTransform 26 | } 27 | 28 | screenToWorld({ x, y }) { 29 | return this.worldTransform.applyInverse({ x, y }) 30 | } 31 | 32 | worldToScreen({ x, y }) { 33 | return this.worldTransform.apply({ x, y }) 34 | } 35 | 36 | worldToScreenLength(length) { 37 | return this.worldTransform.apply({ x: length, y: 0 }).x - this.worldTransform.apply({ x: 0, y: 0 }).x 38 | } 39 | 40 | getWorldTransformWith({ zoom }, { discrete = true } = {}) { 41 | const copy = ObjectUtils.cloneObject(this.worldTransform) 42 | if (discrete) { 43 | zoom = Math.round(zoom * 100) / 100 //< PIXI rounds zoom values to 2 decimals for some reason 44 | } 45 | 46 | // No rotation => we can just assign the zoom level to the matrix' diagonal 47 | copy.a = copy.d = zoom 48 | return copy 49 | } 50 | 51 | get gridSize() { 52 | return this.raw.grid.size 53 | } 54 | 55 | toRelativeCoordinates({ x, y }) { 56 | const size = this.worldSize 57 | return { 58 | x: x / size.x, 59 | y: y / size.y 60 | } 61 | } 62 | 63 | get worldSize() { 64 | return { 65 | x: this.raw.scene.data.width, 66 | y: this.raw.scene.data.height, 67 | } 68 | } 69 | 70 | get worldCenter() { 71 | const size = this.worldSize 72 | return { 73 | x: size.x / 2, 74 | y: size.y / 2, 75 | } 76 | } 77 | 78 | isZoomAllowed() { 79 | if (FoundryUser.isGm) { 80 | return true 81 | } 82 | if (!FoundryModules.isActive(LOCK_VIEW_KEY)) { 83 | return true 84 | } 85 | return !this.raw.scene.getFlag(LOCK_VIEW_KEY, 'lockZoom') 86 | } 87 | 88 | isPanAllowed() { 89 | if (FoundryUser.isGm) { 90 | return true 91 | } 92 | if (!FoundryModules.isActive(LOCK_VIEW_KEY)) { 93 | return true 94 | } 95 | return !this.raw.scene.getFlag(LOCK_VIEW_KEY, 'lockPan') 96 | } 97 | 98 | get ruler() { 99 | const layer = canvas && canvas.controls 100 | return layer && layer.ruler 101 | } 102 | } 103 | 104 | export default new FoundryCanvas() 105 | -------------------------------------------------------------------------------- /src/foundryvtt/FoundryModules.js: -------------------------------------------------------------------------------- 1 | class FoundryModules { 2 | isActive(key) { 3 | const module = game.modules.get(key) 4 | return module != null && module.active 5 | } 6 | } 7 | 8 | export default new FoundryModules() 9 | -------------------------------------------------------------------------------- /src/foundryvtt/FoundryUser.js: -------------------------------------------------------------------------------- 1 | class FoundryUser { 2 | get isGm() { 3 | return this.raw.isGM 4 | } 5 | 6 | get raw() { 7 | return game.user 8 | } 9 | } 10 | 11 | export default new FoundryUser() 12 | -------------------------------------------------------------------------------- /src/logic/AppTouchPointerEventsManager.js: -------------------------------------------------------------------------------- 1 | import TouchPointerEventsManager from './TouchPointerEventsManager.js' 2 | import {dispatchModifiedEvent} from "./FakeTouchEvent.js" 3 | 4 | class AppTouchPointerEventsManager extends TouchPointerEventsManager { 5 | constructor(selector) { 6 | super(selector) 7 | this.selector = selector 8 | this.scrollStart = null 9 | } 10 | 11 | contextMenuCanceler(e) { 12 | e.preventDefault() 13 | e.stopPropagation() 14 | } 15 | 16 | onStartMultiTouch(event) { 17 | dispatchModifiedEvent(event, "pointerup") 18 | } 19 | 20 | handleTouchMove(event) { 21 | this.updateActiveTouch(event) 22 | 23 | switch (this.touchIds.length) { 24 | case 2: 25 | case 3: 26 | case 4: 27 | if (this.gesturesEnabled()) { 28 | this.handleMultiFingerScroll(event) 29 | } 30 | break 31 | default: 32 | } 33 | } 34 | 35 | handleTouchEnd(event) { 36 | this.cleanUpTouch(event) 37 | this.scrollStart = null 38 | document.removeEventListener("contextmenu", this.contextMenuCanceler, true) 39 | } 40 | 41 | handleMultiFingerScroll() { 42 | document.addEventListener("contextmenu", this.contextMenuCanceler, true) 43 | const touchIds = this.touchIds 44 | const firstTouch = this.touches[touchIds[0]] 45 | 46 | const scrollable = this.findFirstScrollableParent(firstTouch.target) 47 | if (scrollable) { 48 | if (!this.scrollStart) { 49 | this.scrollStart = scrollable.scrollTop 50 | } 51 | scrollable.scrollTop = this.scrollStart + firstTouch.start.y - firstTouch.current.y 52 | } 53 | } 54 | 55 | findFirstScrollableParent(element) { 56 | let found = null 57 | while (!found && element?.closest(this.selector)) { 58 | if (element.scrollHeight > element.clientHeight + 50) { 59 | found = element 60 | } 61 | element = element.parentElement 62 | } 63 | return found 64 | } 65 | 66 | } 67 | 68 | AppTouchPointerEventsManager.init = function init(element) { 69 | return new AppTouchPointerEventsManager(element) 70 | } 71 | 72 | export default AppTouchPointerEventsManager 73 | -------------------------------------------------------------------------------- /src/logic/CanvasTouchPointerEventsManager.js: -------------------------------------------------------------------------------- 1 | import {MODULE_DISPLAY_NAME} from '../config/ModuleConstants.js' 2 | import {dispatchCopy, dispatchModifiedEvent} from "./FakeTouchEvent.js" 3 | import Vectors from './Vectors.js' 4 | import FoundryCanvas from '../foundryvtt/FoundryCanvas.js' 5 | import Screen from '../browser/Screen.js' 6 | import {getSetting, DEBUG_MODE_SETTING, ZOOM_THRESHOLD_SETTING, PAN_THRESHOLD_SETTING, GESTURE_MODE_SETTING, GESTURE_MODE_SPLIT, GESTURE_MODE_OFF} from '../config/TouchSettings.js' 7 | import TouchPointerEventsManager from './TouchPointerEventsManager.js' 8 | 9 | // This class is similar in structure to the original CanvasTouchToMouseAdapter, but it doesn't capture/prevent events 10 | // It only hooks into the PointerEvents and tracks them for specific fixes (by dispatching additional events) and multi-touch management 11 | 12 | class CanvasTouchPointerEventsManager extends TouchPointerEventsManager { 13 | constructor(element) { 14 | super(element) 15 | 16 | this._forcedZoomThreshold = null 17 | this._forcedPanThreshold = null 18 | 19 | this.GESTURE_STATUSES = {NONE: 0, WAITING: 1, ACTIVE: 2} 20 | this._zoomGesture = { 21 | status: this.GESTURE_STATUSES.NONE, 22 | initiatingCoords: null, 23 | initiatingWorldCoords: null, 24 | activationCoords: null, 25 | activationWorldCoords: null 26 | } 27 | this._panGesture = { 28 | status: this.GESTURE_STATUSES.NONE, 29 | initiatingCoords: null, 30 | activationCoords: null 31 | } 32 | 33 | // Fix for some trackpads sending pointerdown of type mouse without any previous move event 34 | const trackPadPointerUp = (evt) => { 35 | evt.preventDefault() 36 | evt.stopPropagation() 37 | evt.stopImmediatePropagation() 38 | document.body.removeEventListener("pointerup", trackPadPointerUp) 39 | dispatchModifiedEvent(evt, "pointerup") 40 | return false 41 | }; 42 | document.body.addEventListener("pointerdown", evt => { 43 | if (evt.isTrusted && !evt.pressure && evt.target === element) { 44 | evt.preventDefault() 45 | evt.stopPropagation() 46 | evt.stopImmediatePropagation() 47 | dispatchModifiedEvent(evt, "pointermove") 48 | dispatchModifiedEvent(evt, "pointerdown") 49 | document.body.addEventListener("pointerup", trackPadPointerUp) 50 | return false 51 | } 52 | }, { 53 | capture: true, 54 | passive: false, 55 | }) 56 | 57 | // New v11 fix (started in v2.2.3): we completely block these events as soon as possible. 58 | // We dispatch a pointermove to the location first (not for pointerup), then we dispatch a clone of the original. Except touchstart, that one is gone. 59 | // Chosen to also include v12 on 2025-03-26 to support Image Hover and similar. 60 | if (true || game.release.generation < 12) { 61 | Array("pointerdown", "pointermove", "pointerup", "pointerleave", "touchstart").forEach(e => { 62 | window.addEventListener(e, evt => { 63 | if (evt.isTrusted && (evt instanceof TouchEvent || ["touch", "pen"].includes(evt.pointerType)) && evt.target === element) { 64 | evt.preventDefault() 65 | evt.stopPropagation() 66 | evt.stopImmediatePropagation() 67 | 68 | if (["pointerdown", "pointermove"].includes(evt.type)) { 69 | dispatchModifiedEvent(evt, "pointermove", {button: -1, buttons: 0}) 70 | } 71 | 72 | if (evt.type !== "touchstart" && !(evt.type == "pointerleave" && evt.pointerType != "pen")) { 73 | dispatchCopy(evt) 74 | } 75 | return false 76 | } 77 | }, { 78 | capture: true, 79 | passive: false, 80 | }) 81 | }) 82 | 83 | // Force hover check on every placeable in the active layer on every pointerdown/pointerup 84 | // Also pointermove, but only our own 85 | Array("pointerdown", "pointerup", "pointermove").forEach(e => { 86 | document.body.addEventListener(e, (evt) => { 87 | if (evt.touchvttTrusted || evt.type !== "pointermove" && (evt.isTrusted && (evt instanceof TouchEvent || ["touch", "pen"].includes(evt.pointerType)) && evt.target === element)) { 88 | const mousePos = canvas.mousePosition 89 | // We do all the hoverOuts first 90 | canvas.activeLayer.placeables.forEach(p => { 91 | if (!p.bounds.contains(mousePos.x, mousePos.y)) { 92 | if (p.hover && p.mouseInteractionManager.state < MouseInteractionManager.INTERACTION_STATES.DRAG) { 93 | p._onHoverOut(new PointerEvent("pointerleave", {buttons: 0})) 94 | } 95 | } 96 | }) 97 | canvas.activeLayer.placeables.forEach(p => { 98 | if (p.bounds.contains(mousePos.x, mousePos.y)) { 99 | if (!p.hover) { 100 | p._onHoverIn(new PointerEvent("pointerenter", {buttons: 0})) 101 | } 102 | } 103 | }) 104 | 105 | } 106 | }, true) 107 | }) 108 | 109 | } 110 | } 111 | 112 | onTouchAdded(event) { 113 | if (this.touchIds.length > 1) { 114 | // This is to cancel any drag-style action (usually a selection rectangle) when we start having multiple touches 115 | const cancelEvent = new MouseEvent("contextmenu", {clientX: 0, clientY: 0, bubbles: true, cancelable: true, view: window, button: 2}) 116 | event.target.dispatchEvent(cancelEvent) 117 | canvas.mouseInteractionManager.callback("clearTimeouts"); 118 | } 119 | } 120 | 121 | onTouchRemoved(event) { 122 | if (this.touchIds.length > 0) { 123 | this.disableGestures() 124 | if (getSetting(DEBUG_MODE_SETTING)) { 125 | console.log(MODULE_DISPLAY_NAME + ": disabled gestures") 126 | } 127 | } else { 128 | this.enableGestures() 129 | if (getSetting(DEBUG_MODE_SETTING)) { 130 | console.log(MODULE_DISPLAY_NAME + ": enabled gestures") 131 | } 132 | } 133 | canvas.mouseInteractionManager.callback("clearTimeouts"); 134 | 135 | this._zoomGesture = { 136 | status: this.GESTURE_STATUSES.NONE, 137 | initiatingCoords: null, 138 | initiatingWorldCoords: null, 139 | activationCoords: null, 140 | activationWorldCoords: null 141 | } 142 | this._panGesture = { 143 | status: this.GESTURE_STATUSES.NONE, 144 | initiatingCoords: null, 145 | activationCoords: null 146 | } 147 | } 148 | 149 | handleTouchMove(event) { 150 | this.updateActiveTouch(event) 151 | 152 | switch (this.touchIds.length) { 153 | case 2: 154 | if (this.gesturesEnabled()) { 155 | if (this.useSplitGestures()) { 156 | this.handleTwoFingerZoom() 157 | } else { 158 | this.handleTwoFingerZoomAndPan() 159 | } 160 | } 161 | break 162 | 163 | case 3: 164 | case 4: 165 | if (this.gesturesEnabled()) { 166 | this.handleMultiFingerPan() 167 | } 168 | break 169 | 170 | default: 171 | } 172 | } 173 | 174 | handleTwoFingerZoomAndPan() { 175 | this.handleTwoFingerZoom() 176 | this.handleMultiFingerPan() 177 | } 178 | 179 | handleTwoFingerZoom() { 180 | if (!FoundryCanvas.isZoomAllowed()) { 181 | return 182 | } 183 | 184 | const touchIds = this.touchIds 185 | const firstTouch = this.touches[touchIds[0]] 186 | const secondTouch = this.touches[touchIds[1]] 187 | 188 | if (this._zoomGesture.status == this.GESTURE_STATUSES.NONE) { 189 | this._zoomGesture.initiatingCoords = [{...firstTouch.current}, {...secondTouch.current}] 190 | this._zoomGesture.initiatingWorldCoords = [FoundryCanvas.screenToWorld({...firstTouch.current}), FoundryCanvas.screenToWorld({...secondTouch.current})] 191 | this._zoomGesture.status = this.GESTURE_STATUSES.WAITING 192 | } 193 | const initiatingDistance = Vectors.distance(this._zoomGesture.initiatingCoords[0], this._zoomGesture.initiatingCoords[1]) 194 | const currentDistance = Vectors.distance(firstTouch.current, secondTouch.current) 195 | 196 | if (this._zoomGesture.status < this.GESTURE_STATUSES.ACTIVE) { 197 | if (Math.abs(currentDistance - initiatingDistance) > this.zoomThresholdFunction(this.getZoomThreshold())) { 198 | this._zoomGesture.activationCoords = [{...firstTouch.current}, {...secondTouch.current}] 199 | this._zoomGesture.activationWorldCoords = [FoundryCanvas.screenToWorld({...firstTouch.current}), FoundryCanvas.screenToWorld({...secondTouch.current})] 200 | this._zoomGesture.status = this.GESTURE_STATUSES.ACTIVE 201 | } 202 | } 203 | 204 | if (this._zoomGesture.status == this.GESTURE_STATUSES.ACTIVE) { 205 | FoundryCanvas.zoom(this.calcZoom()) 206 | } 207 | 208 | } 209 | 210 | calcZoom() { 211 | const touchIds = this.touchIds 212 | const initiatingWorldDistance = Vectors.distance(this._zoomGesture.initiatingWorldCoords[0], this._zoomGesture.initiatingWorldCoords[1]) 213 | const activationWorldDistance = Vectors.distance(this._zoomGesture.activationWorldCoords[0], this._zoomGesture.activationWorldCoords[1]) 214 | const newScreenDistance = Vectors.distance(this.touches[touchIds[0]].current, this.touches[touchIds[1]].current) 215 | const newScale = newScreenDistance / ((initiatingWorldDistance + activationWorldDistance) / 2) 216 | return newScale 217 | } 218 | 219 | zoomThresholdFunction(threshold) { 220 | if (threshold == 0) return Infinity 221 | if (threshold > 80) { 222 | return -threshold/2 + 50 223 | } else if (threshold > 30) { 224 | return -threshold + 90 225 | } else { 226 | return -10 * threshold + 360 227 | } 228 | } 229 | 230 | setForcedZoomThreshold(threshold) { 231 | this._forcedZoomThreshold = threshold 232 | } 233 | 234 | unsetForcedZoomThreshold(threshold) { 235 | this._forcedZoomThreshold = null 236 | } 237 | 238 | getZoomThreshold() { 239 | if (this._forcedZoomThreshold !== null) { 240 | return this._forcedZoomThreshold 241 | } 242 | return getSetting(ZOOM_THRESHOLD_SETTING) 243 | } 244 | 245 | setForcedPanThreshold(threshold) { 246 | this._forcedPanThreshold = threshold 247 | } 248 | 249 | unsetForcedPanThreshold(threshold) { 250 | this._forcedPanThreshold = null 251 | } 252 | 253 | getPanThreshold() { 254 | if (this._forcedPanThreshold !== null) { 255 | return this._forcedPanThreshold 256 | } 257 | return getSetting(PAN_THRESHOLD_SETTING) 258 | } 259 | 260 | calcPanCorrection(transform, touch) { 261 | const touchedPointOnWorldAfter = transform.applyInverse(touch.current) 262 | return Vectors.subtract(touchedPointOnWorldAfter, touch.world) 263 | } 264 | 265 | handleMultiFingerPan() { 266 | if (!FoundryCanvas.isPanAllowed()) { 267 | return 268 | } 269 | 270 | const touchIds = this.touchIds 271 | const adjustedTransform = FoundryCanvas.worldTransform 272 | 273 | const firstTouch = this.touches[touchIds[0]] 274 | if (this._panGesture.status == this.GESTURE_STATUSES.NONE) { 275 | this._panGesture.initiatingCoords = {...firstTouch.current} 276 | this._panGesture.status = this.GESTURE_STATUSES.WAITING 277 | } 278 | const currentDistance = Vectors.distance(firstTouch.current, this._panGesture.initiatingCoords) 279 | if (this._panGesture.status < this.GESTURE_STATUSES.ACTIVE) { 280 | if (currentDistance > this.panThresholdFunction(this.getPanThreshold())) { 281 | this._panGesture.status = this.GESTURE_STATUSES.ACTIVE 282 | } 283 | } 284 | 285 | if (this._panGesture.status == this.GESTURE_STATUSES.ACTIVE) { 286 | //let panCorrection 287 | //if (touchIds.length === 2) { 288 | // panCorrection = Vectors.centerBetween( 289 | // this.calcPanCorrection(adjustedTransform, this.touches[touchIds[0]]), 290 | // this.calcPanCorrection(adjustedTransform, this.touches[touchIds[1]]), 291 | // ) 292 | //} else { 293 | // panCorrection = Vectors.centerOf( 294 | // this.calcPanCorrection(adjustedTransform, this.touches[touchIds[0]]), 295 | // this.calcPanCorrection(adjustedTransform, this.touches[touchIds[1]]), 296 | // this.calcPanCorrection(adjustedTransform, this.touches[touchIds[2]]), 297 | // ) 298 | //} 299 | 300 | // It seems to me that panning to the center between the touches is disorienting and creates unwanted movement 301 | // I prefer trying out this version where we anchor to the first touch, I'll leave the existing above in case we want to revert 302 | let panCorrection = this.calcPanCorrection(adjustedTransform, this.touches[touchIds[0]]) 303 | 304 | const centerBefore = FoundryCanvas.screenToWorld(Screen.center) 305 | const worldCenter = Vectors.subtract(centerBefore, panCorrection) 306 | 307 | FoundryCanvas.pan({ x: worldCenter.x, y: worldCenter.y }) 308 | } 309 | } 310 | 311 | panThresholdFunction(threshold) { 312 | if (threshold == 0) return Infinity 313 | if (threshold > 50) { 314 | return -4/5 * threshold + 80 315 | } else if (threshold > 20) { 316 | return -2 * threshold + 140 317 | } else { 318 | return -10 * threshold + 300 319 | } 320 | } 321 | 322 | useSplitGestures() { 323 | return getSetting(GESTURE_MODE_SETTING) === GESTURE_MODE_SPLIT 324 | } 325 | 326 | useNoGestures() { 327 | return getSetting(GESTURE_MODE_SETTING) === GESTURE_MODE_OFF 328 | } 329 | 330 | isTouchPointerEvent(event) { 331 | return super.isTouchPointerEvent(event) || event.touchvttTrusted 332 | } 333 | 334 | gesturesEnabled() { 335 | return this._gesturesEnabled && !this.useNoGestures() 336 | } 337 | 338 | } 339 | 340 | CanvasTouchPointerEventsManager.init = function init(element) { 341 | return new CanvasTouchPointerEventsManager(element) 342 | } 343 | 344 | export default CanvasTouchPointerEventsManager 345 | -------------------------------------------------------------------------------- /src/logic/DirectionalArrows.js: -------------------------------------------------------------------------------- 1 | import {wrapMethod} from '../utils/Injection' 2 | import {getSetting, DIRECTIONAL_ARROWS_ON, DIRECTIONAL_ARROWS_SETTING} from '../config/TouchSettings' 3 | 4 | export function initDirectionalArrows() { 5 | if (tokenHudExists()) { 6 | wrapMethod('TokenHUD.prototype.activateListeners', function (originalMethod, html, ...args) { 7 | const superResult = originalMethod(html, ...args) 8 | if (areDirectionalArrowsEnabled() && !getActiveToken()?.document?.lockRotation) { 9 | injectArrowHtml(html) 10 | } 11 | return superResult 12 | }) 13 | } 14 | } 15 | 16 | function injectArrowHtml(html) { 17 | const leftColumn = html.find('.col.left') 18 | const middleColumn = html.find('.col.middle') 19 | const rightColumn = html.find('.col.right') 20 | 21 | addArrow(middleColumn, 0) 22 | addArrow(rightColumn, 45) 23 | addArrow(rightColumn, 90) 24 | addArrow(rightColumn, 135) 25 | addArrow(middleColumn, 180) 26 | addArrow(leftColumn, 225) 27 | addArrow(leftColumn, 270) 28 | addArrow(leftColumn, 315) 29 | } 30 | 31 | function addArrow(parent, angle) { 32 | const title = game.i18n.localize(`TOUCHVTT.Rotate${angle}`) 33 | const arrow = $( 34 | `` 37 | ) 38 | arrow.on('click', () => { 39 | const activeToken = getActiveToken() 40 | if (canControl(activeToken)) { 41 | activeToken.rotate((angle + 180) % 360) 42 | } 43 | }) 44 | parent.prepend(arrow) 45 | } 46 | 47 | function tokenHudExists() { 48 | return typeof TokenHUD === 'function' && 49 | typeof TokenHUD.prototype === 'object' && 50 | typeof TokenHUD.prototype.activateListeners === 'function' 51 | } 52 | 53 | function getActiveToken() { 54 | return canvas && canvas.hud && canvas.hud.token && canvas.hud.token.object 55 | } 56 | 57 | function areDirectionalArrowsEnabled() { 58 | return getSetting(DIRECTIONAL_ARROWS_SETTING) === DIRECTIONAL_ARROWS_ON 59 | } 60 | 61 | function canControl(token) { 62 | return token != null && 63 | typeof token._canDrag === 'function' && 64 | token._canDrag() 65 | } 66 | -------------------------------------------------------------------------------- /src/logic/EasyTarget.js: -------------------------------------------------------------------------------- 1 | import {getSetting, EASY_TARGET_OFF, EASY_TARGET_SETTING, EASY_TARGET_SINGLE} from '../config/TouchSettings' 2 | 3 | export function callbackForEasyTarget(event, events) { 4 | if (event == "clickLeft") { 5 | const token = events[0].target 6 | if (isEasyTargetEnabled() && isSelectToolActive() && token instanceof Token && isUnownedToken(token.mouseInteractionManager, event)) { 7 | // The user usually cannot click this token => we'll select it 8 | targetToken(token) 9 | } 10 | } 11 | } 12 | 13 | function targetToken(token) { 14 | const releaseOthers = getSettingValue() === EASY_TARGET_SINGLE 15 | token.setTarget(!token.isTargeted, { releaseOthers }) 16 | } 17 | 18 | function getSettingValue() { 19 | return getSetting(EASY_TARGET_SETTING) 20 | } 21 | 22 | function isEasyTargetEnabled() { 23 | return getSettingValue() !== EASY_TARGET_OFF 24 | } 25 | 26 | function isSelectToolActive() { 27 | return game.activeTool === 'select' 28 | } 29 | 30 | function isUnownedToken(mouseInteractionManager, event) { 31 | return typeof mouseInteractionManager.can === 'function' && !mouseInteractionManager.can('clickLeft', event) 32 | } 33 | -------------------------------------------------------------------------------- /src/logic/FakeTouchEvent.js: -------------------------------------------------------------------------------- 1 | // Used to dispatch an artificial PointerEvent based on an original one, with optional customized buttons and position offset 2 | // Starting from v1.13 the original event is not prevented anymore, we only do this as additions where necessary to fix stuff 3 | 4 | export function dispatchModifiedEvent(originalEvent, newEventType = originalEvent.type, {trusted = true, button = originalEvent.button, buttons = originalEvent.buttons} = {}, offset = 0) { 5 | const mouseEventInitProperties = { 6 | clientX: (originalEvent.clientX || originalEvent.touches[0]?.clientX) + offset, 7 | clientY: (originalEvent.clientY || originalEvent.touches[0]?.clientY) + offset, 8 | screenX: (originalEvent.screenX || originalEvent.touches[0]?.screenX) + offset, 9 | screenY: (originalEvent.screenY || originalEvent.touches[0]?.screenY) + offset, 10 | ctrlKey: originalEvent.ctrlKey || false, 11 | altKey: originalEvent.altKey || false, 12 | shiftKey: originalEvent.shiftKey || false, 13 | metaKey: originalEvent.metaKey || false, 14 | button: button, 15 | buttons: buttons, 16 | relatedTarget: originalEvent.relatedTarget || null, 17 | region: originalEvent.region || null, 18 | detail: 0, 19 | view: window, 20 | sourceCapabilities: originalEvent.sourceCapabilities, 21 | bubbles: true, 22 | cancelable: true, 23 | composed: true, 24 | } 25 | 26 | const pointerEventInit = { 27 | pointerId: originalEvent.pointerId, 28 | pointerType: "mouse", 29 | isPrimary: true, 30 | ...mouseEventInitProperties, 31 | } 32 | 33 | var target = originalEvent.nativeEvent ? originalEvent.nativeEvent.target : originalEvent.target 34 | 35 | let pointerEvent 36 | if (newEventType.startsWith("mouse")) { 37 | pointerEvent = new MouseEvent(newEventType, mouseEventInitProperties) 38 | } else { 39 | pointerEvent = new PointerEvent(newEventType, pointerEventInit) 40 | } 41 | 42 | pointerEvent.touchvttTrusted = trusted 43 | 44 | //console.log("dispatching modified", pointerEvent, originalEvent) 45 | target.dispatchEvent(pointerEvent) 46 | } 47 | 48 | export function dispatchCopy(originalEvent) { 49 | let newEventObject = {} 50 | for (let key in originalEvent) { 51 | newEventObject[key] = originalEvent[key] 52 | } 53 | newEventObject.pointerType = "mouse" 54 | let newEvent = new originalEvent.constructor(originalEvent.type, newEventObject) 55 | newEvent.touchvttTrusted = true 56 | var target = originalEvent.nativeEvent ? originalEvent.nativeEvent.target : originalEvent.target 57 | 58 | //console.log("dispatching copied", newEvent, originalEvent) 59 | target.dispatchEvent(newEvent) 60 | } 61 | -------------------------------------------------------------------------------- /src/logic/MouseButton.js: -------------------------------------------------------------------------------- 1 | export default Object.freeze({ 2 | left: 0, 3 | right: 2 4 | }) 5 | -------------------------------------------------------------------------------- /src/logic/Touch.js: -------------------------------------------------------------------------------- 1 | import FoundryCanvas from '../foundryvtt/FoundryCanvas.js' 2 | import TouchContext from './TouchContext.js' 3 | import Vectors from './Vectors.js' 4 | import {idOf} from '../utils/EventUtils.js' 5 | 6 | class Touch { 7 | constructor(event, touch, { context = TouchContext.PRIMARY_CLICK } = {}) { 8 | this.id = idOf(event) 9 | this.start = Object.freeze({ x: touch.clientX, y: touch.clientY }) 10 | this.last = this.start 11 | this.current = this.last 12 | this.context = context 13 | this.clientX = touch.clientX 14 | this.clientY = touch.clientY 15 | this.screenX = touch.screenX 16 | this.screenY = touch.screenY 17 | this.target = event.target 18 | this.latestEvent = event 19 | 20 | if (canvas.app) { 21 | this.world = FoundryCanvas.screenToWorld(this.current) //< Position in the world where the user touched 22 | } 23 | this.movementDistance = 0 24 | this.movement = Vectors.zero 25 | 26 | //// console.log(`New Touch: ${context.name}, ID ${this.id}`) 27 | } 28 | 29 | get identifier() { 30 | return this.id 31 | } 32 | 33 | update(event, touch) { 34 | this.latestEvent = event 35 | this.last = this.current 36 | this.current = Object.freeze({ x: touch.clientX, y: touch.clientY }) 37 | this.movementDistance += Vectors.distance(this.last, this.current) 38 | this.movement = Vectors.add(this.movement, Vectors.subtract(this.current, this.last)) 39 | } 40 | } 41 | 42 | export default Touch 43 | -------------------------------------------------------------------------------- /src/logic/TouchContext.js: -------------------------------------------------------------------------------- 1 | import MouseButton from './MouseButton.js' 2 | 3 | class TouchContext { 4 | constructor({ name, forwardingEvents = [], mouseButton = null, isFinal = true } = {}) { 5 | this.name = name 6 | this.forwardingEvents = forwardingEvents 7 | this.mouseButton = mouseButton 8 | this.isFinal = isFinal 9 | } 10 | 11 | forwardsEvent(event) { 12 | let eventType = event 13 | if (typeof event === 'object' && typeof event.type === 'string') { 14 | eventType = event.type 15 | } 16 | return this.forwardingEvents.indexOf(eventType) !== -1 17 | } 18 | } 19 | 20 | const ALL_EVENTS = [ 21 | 'pointerdown', 'pointermove', 'pointerup', 'pointercancel', 22 | 'touchstart', 'touchmove', 'touchend', 'touchcancel' 23 | ] 24 | 25 | const PRIMARY_CLICK = Object.freeze(new TouchContext({ 26 | name: 'primary-click', 27 | forwardingEvents: ALL_EVENTS, 28 | mouseButton: MouseButton.left, 29 | isFinal: false, 30 | })) 31 | const SECONDARY_CLICK = Object.freeze(new TouchContext({ 32 | name: 'secondary-click', 33 | forwardingEvents: ALL_EVENTS, 34 | mouseButton: MouseButton.right, 35 | })) 36 | const ZOOM_PAN_GESTURE = Object.freeze(new TouchContext({ 37 | name: 'zoom-pan', 38 | })) 39 | 40 | export default Object.freeze({ 41 | PRIMARY_CLICK, 42 | SECONDARY_CLICK, 43 | ZOOM_PAN_GESTURE, 44 | }) 45 | -------------------------------------------------------------------------------- /src/logic/TouchPointerEventsManager.js: -------------------------------------------------------------------------------- 1 | import {MODULE_DISPLAY_NAME} from '../config/ModuleConstants.js' 2 | import {getSetting, DEBUG_MODE_SETTING} from '../config/TouchSettings.js' 3 | import Touch from './Touch.js' 4 | 5 | class TouchPointerEventsManager { 6 | constructor(element) { 7 | this.touches = {} 8 | const touchHandler = this.handleTouch.bind(this) 9 | for (const eventType of this.getListenerEvents()) { 10 | if (element instanceof HTMLElement) { 11 | element.addEventListener(eventType, touchHandler, this.getEventListenerOptions()) 12 | } else { 13 | document.addEventListener(eventType, (event) => { 14 | if (event.target.closest(element)) { 15 | touchHandler(event) 16 | } 17 | }, this.getEventListenerOptions()) 18 | } 19 | } 20 | 21 | this._gesturesEnabled = true 22 | } 23 | 24 | preHandleAll(event) {} 25 | 26 | preHandleTouch(event) {} 27 | 28 | handleTouch(event) { 29 | const preLength = this.touchIds.length 30 | 31 | this.preHandleAll(event) 32 | 33 | if (!this.isTouchPointerEvent(event)) { 34 | return 35 | } 36 | 37 | this.preHandleTouch(event) 38 | 39 | if (this.shouldHandleEvent(event)) { 40 | // shouldHandleEvent excludes our fake events at this time 41 | switch (event.type) { 42 | case 'pointerdown': 43 | this.handleTouchStart(event) 44 | break 45 | 46 | case 'pointermove': 47 | this.handleTouchMove(event) 48 | break 49 | 50 | case 'pointerup': 51 | this.handleTouchEnd(event) 52 | //this.handleEndAll(event) 53 | break 54 | 55 | case 'pointercancel': 56 | this.handleEndAll(event) 57 | break 58 | 59 | default: 60 | console.warn(`Unknown touch event type ${event.type}`) 61 | break 62 | } 63 | } 64 | if (preLength != this.touchIds.length && getSetting(DEBUG_MODE_SETTING)) { 65 | console.log(MODULE_DISPLAY_NAME + ": touches changed: " + preLength + " -> " + this.touchIds.length) 66 | } 67 | } 68 | 69 | onStartMultiTouch(event) { 70 | 71 | } 72 | 73 | onTouchAdded(event) { 74 | 75 | } 76 | 77 | onTouchRemoved(event) { 78 | 79 | } 80 | 81 | handleTouchStart(event) { 82 | const prevTouches = this.touchIds.length 83 | this.updateActiveTouch(event) 84 | if (prevTouches <= 1 && this.touchIds.length > 1) { 85 | this.onStartMultiTouch(event) 86 | } 87 | } 88 | 89 | handleTouchEnd(event) { 90 | this.cleanUpTouch(event) 91 | } 92 | 93 | handleEndAll(event) { 94 | this.cleanUpAll() 95 | } 96 | 97 | handleTouchMove(event) { 98 | this.updateActiveTouch(event) 99 | } 100 | 101 | updateActiveTouch(event) { 102 | var id = event.pointerId 103 | if (this.touches[id] != null) { 104 | this.touches[id].update(event, event) 105 | } else { 106 | if (event.type == "pointerdown" && event.buttons == 1 && event.pointerType != "pen") { 107 | this.touches[id] = new Touch(event, event) 108 | this.onTouchAdded(event) 109 | } 110 | } 111 | } 112 | 113 | cleanUpAll() { 114 | this.touches = {} 115 | this.onTouchRemoved(event) 116 | } 117 | 118 | cleanUpTouch(event) { 119 | delete this.touches[event.pointerId] 120 | this.onTouchRemoved(event) 121 | } 122 | 123 | getEventListenerOptions() { 124 | return { 125 | capture: true, 126 | passive: false, 127 | } 128 | } 129 | 130 | getListenerEvents() { 131 | return ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'] 132 | } 133 | 134 | shouldHandleEvent(event) { 135 | return event.isTrusted || event.touchvttTrusted 136 | } 137 | 138 | isTouchPointerEvent(event) { 139 | return event instanceof PointerEvent && ["touch", "pen"].includes(event.pointerType) 140 | } 141 | 142 | get touchIds() { 143 | return Object.keys(this.touches) 144 | } 145 | 146 | disableGestures() { 147 | this._gesturesEnabled = false 148 | } 149 | 150 | enableGestures() { 151 | this._gesturesEnabled = true 152 | } 153 | 154 | gesturesEnabled() { 155 | return this._gesturesEnabled 156 | } 157 | } 158 | 159 | TouchPointerEventsManager.init = function init(element) { 160 | return new TouchPointerEventsManager(element) 161 | } 162 | 163 | export default TouchPointerEventsManager 164 | -------------------------------------------------------------------------------- /src/logic/TouchVTTMouseInteractionManager.js: -------------------------------------------------------------------------------- 1 | import {MODULE_DISPLAY_NAME} from '../config/ModuleConstants.js' 2 | import {getSetting, DEBUG_MODE_SETTING} from '../config/TouchSettings.js' 3 | 4 | export class TouchVTTMouseInteractionManager { 5 | constructor(object, layer, permissions={}, callbacks={}, options={}) { 6 | this.object = object; 7 | this.layer = layer; 8 | this.permissions = permissions; 9 | this.callbacks = callbacks; 10 | 11 | /** 12 | * Interaction options which configure handling workflows 13 | * @type {{target: PIXI.DisplayObject, dragResistance: number}} 14 | */ 15 | this.options = options; 16 | 17 | /** 18 | * The current interaction state 19 | * @type {number} 20 | */ 21 | if (getSetting(DEBUG_MODE_SETTING)) { 22 | this._state = this.states.NONE; 23 | Object.defineProperty(this, 'state', { 24 | get() { 25 | return this._state; 26 | }, 27 | set(value) { 28 | console.log(MODULE_DISPLAY_NAME + ": " + this.object.constructor.name, this._state + " -> " + value + " (" + (new Error()).stack?.split("\n")[2]?.trim().split(" ")[1] + ")") 29 | this._state = value; 30 | } 31 | }); 32 | } else { 33 | this.state = this.states.NONE; 34 | } 35 | 36 | /** 37 | * Bound interaction data object to populate with custom data. 38 | * @type {Object