Mudanças entre as edições de "Widget:MapaViewer"
Ir para navegação
Ir para pesquisar
| (Uma revisão intermediária pelo mesmo usuário não está sendo mostrada) | |||
| Linha 1: | Linha 1: | ||
<includeonly> | <includeonly> | ||
<div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div> | <div id="mapa-viewer-<!--{$id|escape:'quotes'|default:'mapa-default'}-->" style="width: <!--{$largura|escape:'quotes'|default:'100%'}-->; height: <!--{$altura|escape:'quotes'|default:'500px'}-->;"></div> | ||
<script> | <script> | ||
class MapaViewer { | class MapaViewer { | ||
| Linha 478: | Linha 477: | ||
this.viewport.scrollLeft = Math.max(0, targetScrollX); | this.viewport.scrollLeft = Math.max(0, targetScrollX); | ||
this.viewport.scrollTop = Math.max(0, targetScrollY); | this.viewport.scrollTop = Math.max(0, targetScrollY); | ||
} | this.showTemporaryHighlight(x, y); | ||
} | |||
showTemporaryHighlight(x, y) { | |||
const highlight = document.createElement('div'); | |||
highlight.style.cssText = ` | |||
position: absolute; | |||
width: 60px; | |||
height: 60px; | |||
left: ${(x + (this.currentFloor?.offsetX || 0)) * this.currentZoom}px; | |||
top: ${(y + (this.currentFloor?.offsetY || 0)) * this.currentZoom}px; | |||
transform: translate(-50%, -50%); | |||
background: radial-gradient(circle, rgba(255,215,0,0.8) 0%, rgba(255,215,0,0) 70%); | |||
border-radius: 50%; | |||
pointer-events: none; | |||
z-index: 200; | |||
animation: mapa-highlight-pulse 0.6s ease-out 3; | |||
`; | |||
this.layersContainer.appendChild(highlight); | |||
setTimeout(() => { | |||
highlight.remove(); | |||
}, 1800); | |||
} | |||
setupKeyboardShortcuts() { | setupKeyboardShortcuts() { | ||
const handler = (e) => { | const handler = (e) => { | ||