File size: 3,367 Bytes
4d70170 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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,
},
]
|