@tldraw/utils
Version:
tldraw infinite canvas SDK (private utilities).
8 lines (7 loc) • 4.76 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/lib/PerformanceTracker.ts"],
"sourcesContent": ["import { PERFORMANCE_COLORS, PERFORMANCE_PREFIX_COLOR } from './perf'\n\n/**\n * A utility class for measuring and tracking frame rate performance during operations.\n * Provides visual feedback in the browser console with color-coded FPS indicators.\n *\n * @example\n * ```ts\n * const tracker = new PerformanceTracker()\n *\n * tracker.start('render')\n * renderShapes()\n * tracker.stop() // Logs performance info to console\n *\n * // Check if tracking is active\n * if (tracker.isStarted()) {\n * console.log('Still tracking performance')\n * }\n * ```\n *\n * @public\n */\nexport class PerformanceTracker {\n\tprivate startTime = 0\n\tprivate name = ''\n\tprivate frames = 0\n\tprivate started = false\n\tprivate frame: number | null = null\n\n\t/**\n\t * Records animation frames to calculate frame rate.\n\t * Called automatically during performance tracking.\n\t */\n\t// eslint-disable-next-line local/prefer-class-methods\n\trecordFrame = () => {\n\t\tthis.frames++\n\t\tif (!this.started) return\n\t\t// eslint-disable-next-line no-restricted-globals\n\t\tthis.frame = requestAnimationFrame(this.recordFrame)\n\t}\n\n\t/**\n\t * Starts performance tracking for a named operation.\n\t *\n\t * @param name - A descriptive name for the operation being tracked\n\t *\n\t * @example\n\t * ```ts\n\t * tracker.start('canvas-render')\n\t * // ... perform rendering operations\n\t * tracker.stop()\n\t * ```\n\t */\n\tstart(name: string) {\n\t\tthis.name = name\n\t\tthis.frames = 0\n\t\tthis.started = true\n\t\tif (this.frame !== null) cancelAnimationFrame(this.frame)\n\t\t// eslint-disable-next-line no-restricted-globals\n\t\tthis.frame = requestAnimationFrame(this.recordFrame)\n\t\tthis.startTime = performance.now()\n\t}\n\n\t/**\n\t * Stops performance tracking and logs results to the console.\n\t *\n\t * Displays the operation name, frame rate, and uses color coding:\n\t * - Green background: \\> 55 FPS (good performance)\n\t * - Yellow background: 30-55 FPS (moderate performance)\n\t * - Red background: \\< 30 FPS (poor performance)\n\t *\n\t * @example\n\t * ```ts\n\t * tracker.start('interaction')\n\t * handleUserInteraction()\n\t * tracker.stop() // Logs: \"Perf Interaction 60 fps\"\n\t * ```\n\t */\n\tstop() {\n\t\tthis.started = false\n\t\tif (this.frame !== null) cancelAnimationFrame(this.frame)\n\t\tconst duration = (performance.now() - this.startTime) / 1000\n\t\tconst fps = duration === 0 ? 0 : Math.floor(this.frames / duration)\n\t\tconst background =\n\t\t\tfps > 55\n\t\t\t\t? PERFORMANCE_COLORS.Good\n\t\t\t\t: fps > 30\n\t\t\t\t\t? PERFORMANCE_COLORS.Mid\n\t\t\t\t\t: PERFORMANCE_COLORS.Poor\n\t\tconst color = background === PERFORMANCE_COLORS.Mid ? 'black' : 'white'\n\t\tconst capitalized = this.name[0].toUpperCase() + this.name.slice(1)\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.debug(\n\t\t\t`%cPerf%c ${capitalized} %c${fps}%c fps`,\n\t\t\t`color: white; background: ${PERFORMANCE_PREFIX_COLOR};padding: 2px;border-radius: 3px;`,\n\t\t\t'font-weight: normal',\n\t\t\t`font-weight: bold; padding: 2px; background: ${background};color: ${color};`,\n\t\t\t'font-weight: normal'\n\t\t)\n\t}\n\n\t/**\n\t * Checks whether performance tracking is currently active.\n\t *\n\t * @returns True if tracking is in progress, false otherwise\n\t *\n\t * @example\n\t * ```ts\n\t * if (!tracker.isStarted()) {\n\t * tracker.start('new-operation')\n\t * }\n\t * ```\n\t */\n\tisStarted() {\n\t\treturn this.started\n\t}\n}\n"],
"mappings": "AAAA,SAAS,oBAAoB,gCAAgC;AAsBtD,MAAM,mBAAmB;AAAA,EACvB,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO/B,cAAc,MAAM;AACnB,SAAK;AACL,QAAI,CAAC,KAAK,QAAS;AAEnB,SAAK,QAAQ,sBAAsB,KAAK,WAAW;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,MAAM,MAAc;AACnB,SAAK,OAAO;AACZ,SAAK,SAAS;AACd,SAAK,UAAU;AACf,QAAI,KAAK,UAAU,KAAM,sBAAqB,KAAK,KAAK;AAExD,SAAK,QAAQ,sBAAsB,KAAK,WAAW;AACnD,SAAK,YAAY,YAAY,IAAI;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBA,OAAO;AACN,SAAK,UAAU;AACf,QAAI,KAAK,UAAU,KAAM,sBAAqB,KAAK,KAAK;AACxD,UAAM,YAAY,YAAY,IAAI,IAAI,KAAK,aAAa;AACxD,UAAM,MAAM,aAAa,IAAI,IAAI,KAAK,MAAM,KAAK,SAAS,QAAQ;AAClE,UAAM,aACL,MAAM,KACH,mBAAmB,OACnB,MAAM,KACL,mBAAmB,MACnB,mBAAmB;AACxB,UAAM,QAAQ,eAAe,mBAAmB,MAAM,UAAU;AAChE,UAAM,cAAc,KAAK,KAAK,CAAC,EAAE,YAAY,IAAI,KAAK,KAAK,MAAM,CAAC;AAElE,YAAQ;AAAA,MACP,YAAY,WAAW,MAAM,GAAG;AAAA,MAChC,6BAA6B,wBAAwB;AAAA,MACrD;AAAA,MACA,gDAAgD,UAAU,WAAW,KAAK;AAAA,MAC1E;AAAA,IACD;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,YAAY;AACX,WAAO,KAAK;AAAA,EACb;AACD;",
"names": []
}