| import type { TimelineLayerOptions } from '@vue/devtools-api' | |
| export const builtinLayers: TimelineLayerOptions[] = [ | |
| { | |
| id: 'mouse', | |
| label: 'Mouse', | |
| color: 0xA451AF, | |
| screenshotOverlayRender(event, { events }) { | |
| const samePositionEvent = events.find(e => e !== event && e.renderMeta.textEl && e.data.x === event.data.x && e.data.y === event.data.y) | |
| if (samePositionEvent) { | |
| const text = document.createElement('div') | |
| text.textContent = event.data.type | |
| samePositionEvent.renderMeta.textEl.appendChild(text) | |
| return false | |
| } | |
| const div = document.createElement('div') | |
| div.style.position = 'absolute' | |
| div.style.left = `${event.data.x - 4}px` | |
| div.style.top = `${event.data.y - 4}px` | |
| div.style.width = '8px' | |
| div.style.height = '8px' | |
| div.style.borderRadius = '100%' | |
| div.style.backgroundColor = 'rgba(164, 81, 175, 0.5)' | |
| const text = document.createElement('div') | |
| text.textContent = event.data.type | |
| text.style.color = '#541e5b' | |
| text.style.fontFamily = 'monospace' | |
| text.style.fontSize = '9px' | |
| text.style.position = 'absolute' | |
| text.style.left = '10px' | |
| text.style.top = '10px' | |
| text.style.padding = '1px' | |
| text.style.backgroundColor = 'rgba(255, 255, 255, 0.9)' | |
| text.style.borderRadius = '3px' | |
| div.appendChild(text) | |
| event.renderMeta.textEl = text | |
| return div | |
| }, | |
| }, | |
| { | |
| id: 'keyboard', | |
| label: 'Keyboard', | |
| color: 0x8151AF, | |
| }, | |
| { | |
| id: 'component-event', | |
| label: 'Component events', | |
| color: 0x41B883, | |
| screenshotOverlayRender: (event, { events }) => { | |
| if (!event.meta.bounds || events.some(e => e !== event && e.layerId === event.layerId && e.renderMeta.drawn && (e.meta.componentId === event.meta.componentId || ( | |
| e.meta.bounds.left === event.meta.bounds.left | |
| && e.meta.bounds.top === event.meta.bounds.top | |
| && e.meta.bounds.width === event.meta.bounds.width | |
| && e.meta.bounds.height === event.meta.bounds.height | |
| )))) { | |
| return false | |
| } | |
| const div = document.createElement('div') | |
| div.style.position = 'absolute' | |
| div.style.left = `${event.meta.bounds.left - 4}px` | |
| div.style.top = `${event.meta.bounds.top - 4}px` | |
| div.style.width = `${event.meta.bounds.width}px` | |
| div.style.height = `${event.meta.bounds.height}px` | |
| div.style.borderRadius = '8px' | |
| div.style.borderStyle = 'solid' | |
| div.style.borderWidth = '4px' | |
| div.style.borderColor = 'rgba(65, 184, 131, 0.5)' | |
| div.style.textAlign = 'center' | |
| div.style.display = 'flex' | |
| div.style.alignItems = 'center' | |
| div.style.justifyContent = 'center' | |
| div.style.overflow = 'hidden' | |
| const text = document.createElement('div') | |
| text.style.color = '#267753' | |
| text.style.fontFamily = 'monospace' | |
| text.style.fontSize = '9px' | |
| text.style.padding = '1px' | |
| text.style.backgroundColor = 'rgba(255, 255, 255, 0.9)' | |
| text.style.borderRadius = '3px' | |
| text.textContent = event.data.event | |
| div.appendChild(text) | |
| event.renderMeta.drawn = true | |
| return div | |
| }, | |
| }, | |
| { | |
| id: 'performance', | |
| label: 'Performance', | |
| color: 0x41B86A, | |
| groupsOnly: true, | |
| skipScreenshots: true, | |
| ignoreNoDurationGroups: true, | |
| }, | |
| ] | |