Mudanças entre as edições de "Widget:MapaViewer"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
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>
<div style="margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap;">
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.zoomIn()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">🔍 Zoom +</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.zoomOut()" style="padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">🔍 Zoom -</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.resetView()" style="padding: 8px 16px; background: #6b7280; color: white; border: none; border-radius: 6px; cursor: pointer;">🔄 Resetar</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.prevFloor()" style="padding: 8px 16px; background: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;">⬆️ Andar Anterior</button>
    <button onclick="window.mapaViewer_<!--{$id|escape:'quotes'|default:'mapa-default'}-->.nextFloor()" style="padding: 8px 16px; background: #8b5cf6; color: white; border: none; border-radius: 6px; cursor: pointer;">⬇️ Próximo Andar</button>
</div>


<script>
<script>
Linha 485: 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) => {

Edição atual tal como às 17h15min de 11 de abril de 2026