feat: text input for drawing motions

Author: nicholaswmin

bin/pointerdriver.js

@@ -1,12 +1,45 @@
 #!/usr/bin/env node
 
 import { createServer } from 'node:http'
+import { execFile } from 'node:child_process'
 import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
+import { setTimeout as wait } from 'node:timers/promises'
 import { fileURLToPath } from 'node:url'
+import { formatWithOptions, promisify } from 'node:util'
 
 const root = fileURLToPath(new URL('..', import.meta.url))
 
+const release = (port, {
+  timeout = 3000,
+  poll: { interval = 50 } = {}
+} = {}) =>
+  Promise.resolve(port)
+    .then(port => Number.isFinite(port) && port >= 1 && port <= 65535
+      ? port
+      : Promise.reject(new RangeError(`port: ${port}, must be 1 - 65535`)))
+    .then(port => promisify(execFile)('lsof', ['-ti', `tcp:${port}`, '-sTCP:LISTEN']))
+    .then(({ stdout }) => stdout.trim().split('\n').map(Number).filter(Boolean))
+    .then(pids => pids.map(pid => (process.kill(pid, 'SIGTERM'), pid)))
+    .then(function poll(pids, start = Date.now()) {
+      const live = pids.filter(pid => {
+        try { return process.kill(pid, 0), true }
+        catch (err) {
+          if (err.code === 'ESRCH') return false
+          throw err
+        }
+      })
+
+      return !live.length ? pids :
+        Date.now() - start >= timeout
+          ? (live.forEach(pid => process.kill(pid, 'SIGKILL')), pids)
+          : wait(Math.max(10, interval)).then(() => poll(pids, start))
+    })
+    .catch(err => err.code === 1 ? [] : Promise.reject(err))
+
+const log = (...args) =>
+  console.log(formatWithOptions({ colors: true }, ...args))
+
 const aliases = {
   '-p': '--port',
   '-H': '--host',
@@ -115,11 +148,15 @@ if ('help' in args) {
       const pathname = url.pathname
 
       const request =
-        pathname === '/pointerdriver.js'
-          ? { file: 'index.js' }
-          : pathname.match(/^\/src\/[\w-]+\/index\.js$/)
-            ? { file: pathname.slice(1) }
-            : null
+        pathname === '/'
+          ? { file: 'bin/skill.md', type: 'text/markdown; charset=utf-8' }
+          : pathname === '/pointerdriver.js'
+            ? { file: 'index.js', type: 'text/javascript; charset=utf-8' }
+            : pathname.match(/^\/src\/[\w-]+\/index\.js$/)
+              ? { file: pathname.slice(1), type: 'text/javascript; charset=utf-8' }
+              : pathname.match(/^\/fonts\/[\w-]+\.svg$/)
+                ? { file: pathname.slice(1), type: 'image/svg+xml' }
+                : null
 
       if (!request)
         return send(req, res, 404, {
@@ -128,11 +165,14 @@ if ('help' in args) {
         }, 'Not found')
 
       const path = resolve(root, request.file)
-      const body = await js(path)
+
+      const body = request.type.startsWith('text/javascript')
+        ? await js(path)
+        : await readFile(path, 'utf8')
 
       return send(req, res, 200, {
         ...cors,
-        'Content-Type': 'text/javascript; charset=utf-8',
+        'Content-Type': request.type,
         'Cache-Control': 'no-store',
         'X-Content-Type-Options': 'nosniff',
       }, body)
@@ -157,10 +197,18 @@ if ('help' in args) {
     }
   })
 
+  log('starting server ...')
+  log('checking port %d ...', port)
+
+  const released = await release(port)
+
+  if (released.length)
+    log('killed: %s to free up port: %d', released.join(', '), port)
+
   const logHost = host.includes(':') ? `[${host}]` : host
 
   server.listen(port, host, () =>
-    console.log(`http://${logHost}:${port}/pointerdriver.js`))
+    log('listening: http://%s:%d/', logHost, port))
 
   const shutdown = () => server.close()
 

bin/skill.md

@@ -35,6 +35,7 @@ Motions are the public API.
    const {
      DragMotion, GlideMotion, StrokeMotion,
      PinchMotion, TwistMotion, SwipeMotion,
+     Font, Glass,
    } = await import('http://127.0.0.1:5619/pointerdriver.js')
    ```
 
@@ -49,6 +50,15 @@ Motions are the public API.
    ]).perform()
    ```
 
+4. `Glass` is an optional overlay that visualizes dispatched events
+   as colored dots.
+   - Wrap a motion callback in `new Glass(fn)` to enable it.
+   - Always include it by default. It only logs `isTrusted: false`
+     events so it only captures synthetic input.
+   - If the user asks to remove the glass/overlay/visualization,
+     just run motions directly without wrapping them in `Glass`.
+   - To tear down manually, call `glass.remove()` when done.
+
 ## Motions
 
 Available motions exported from `pointerdriver.js`:
@@ -139,6 +149,35 @@ Constraints:
 - `separation` must be finite and `> 0`.
 - `steps` must be a positive integer.
 
+## Writing text
+
+Pass a string instead of a points array to write text
+as the target device.
+
+```js
+await new StrokeMotion(el, 'hello', {
+  x: 100, y: 200, size: 30
+}).perform()
+```
+
+- `size` — text height in pixels (required).
+- `x`, `y` — starting position in viewport coordinates (required).
+- `font` — URL string to an SVG font, or a `Font` instance.
+  Defaults to bundled Hershey Script.
+
+Loading a custom font:
+
+```js
+const font = await Font.load('https://example.com/font.svg')
+
+await new StrokeMotion(el, 'hello', {
+  font, x: 100, y: 200, size: 30
+}).perform()
+```
+
+Multi-stroke glyphs (letters with pen lifts like "i", "t")
+dispatch separate down-move-up cycles per stroke.
+
 ## Coordinates, hit-testing, and common failures
 
 All hit-testing is based on `document.elementFromPoint(x, y)`.
@@ -261,8 +300,10 @@ For HTTPS pages, prefer the Cloudflare Tunnel method instead of raw LAN HTTP.
 ## What pointerdriver does not do
 
 - It does not synthesize browser default actions.
-  There is no `click` event synthesis, scrolling, text input, or focus behavior.
-- It does not bypass CSP, cross-origin iframes, or browser security policies.
+  There is no `click` event synthesis, scrolling, text input,
+  or focus behavior.
+- It does not bypass CSP, cross-origin iframes,
+  or browser security policies.
 
 ## Reference