Show Fake Pointer For Tablet Devices With Stylus-Pen (Mobile Chromium doesn't support mouse-drugging. Only for hovering)

SFP.user.js

// ==UserScript==
// @name        Show Fake Pointer
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0.0
// @author      koumaza
// @description 4TabletDevice
// ==/UserScript==

const showP = true // Enable point-p

window._SFP_DEBUG = true
let pX=0,pY=0, count=10, waiter=null

const styl = (X, Y, S) => { 
  return {
    position: 'fixed',
    left: `${X}px`,
    top: `${Y}px`,
    pointer_events: 'none',
    z_index: 10000,
    visibility: S ? 'visible' : 'hidden',
    // Behavior
    background: '#ff0045',
    width: '8px',
    height: '8px'
  }
}

const getAllCSS = (stylObj) => {
  let stylList = []
  Object.entries(stylObj).map(([key, v]) => {
    stylList.push(`${key.replace('_','-')}:${v};`)
  })
  return stylList.join('')
}

const pElem = document.createElement('div')
pElem.setAttribute('id', 'ShowFakePointer-Container')

/// Point-P
if (showP) {
  const pTextElem = document.createElement('span')
  pTextElem.innerText = 'p'
  pTextElem.style = getAllCSS({
    position: 'relative',
    pointer_events: 'none',
    z_index: 10000,
    top: '-22px',
    left: '10px',
    color: 'skyblue'
  })
  pElem.appendChild(pTextElem)
}

const applyStyl = (elem, X, Y, state) => {
  return elem.style = getAllCSS(styl(X, Y, state))
}

window.top.document.body.appendChild(pElem)


window.addEventListener('mousemove', (e) => {
  pX=e.clientX
  pY=e.clientY
  applyStyl(pElem, pX, pY, true)
  count = 5
  window._SFP_DEBUG && console.debug(pX,pY,getAllCSS(styl(pX, pY, true)))
  
  if(waiter===null) {
    waiter = setInterval(()=>{
      if(count===0) {
        applyStyl(pElem, pX, pY, false)
        window._SFP_DEBUG && console.debug('leaved')
        clearInterval(waiter)
        waiter = null
      } else {
        --count
      }
    },1)
  }
})