I need help with surfaceFromPoint and update Hotspot.

[bigbea1r]

I need this code so that I can drag the Hotspot with the mouse over the entire model, and at the same time so that the hotspot is on the surface of the model. And for this, you need the data-surface attribute. I use it when creating a hotspot. but to drag, I need to update. At the moment, the code is able to update the hotspot, but as soon as I start dragging it, the hotspot disappears immediately, but the html code remains unchanged and the element itself remains in html. Please help me figure out what the problem is.
Here is a part of the code:

function startDrag(event) {
  if (editMode) {
    const hotspot = event.target;

    async function onMouseMove(moveEvent) {
      const newSurface = modelViewer.surfaceFromPoint(moveEvent.clientX, moveEvent.clientY);
      if (newSurface) {
        hotspot.setAttribute('data-surface', newSurface);
        console.log(`Updated data-surface: ${newSurface}`);
        await modelViewer.updateComplete;

        const updatedSurface = {
           name: currentSlot,
           position: `${newSur}`
         };
         modelViewer.updateHotspot(updatedSurface);
      }
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      saveButtons(); // Сохранение изменений
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }
}

Here is the code for creating and assigning a hotspot location:

function createHotspot(animationName, surface, text) {
  const hotspot = document.createElement('button');
  const hotspotDiv = document.createElement('div');

  animNameCreate.push(animationName);   
  hotspot.setAttribute('class', 'Hotspot');   
  hotspot.setAttribute('slot', `hotspot-${animNameCreate.length}`);   
  hotspot.setAttribute('data-surface', surface);   
  hotspot.setAttribute('data-visibility-attribute', 'visible');   
  hotspot.setAttribute('data-animation', animationName);   
  hotspotDiv.setAttribute('class', 'HotspotAnnotation');   
  hotspotDiv.textContent = text; 
  hotspot.appendChild(hotspotDiv);

  hotspot.addEventListener('click', async () => {
    if (!editMode) {
      playAnimation(animationName, doorCondition ? -1 : 1);
      doorCondition = !doorCondition;
    } else {
      editDiv(hotspot, hotspotDiv);
    }
  });

  hotspot.addEventListener('mousedown', startDrag);

  modelViewer.appendChild(hotspot);

  saveButtons();
}

I left the whole code just in case:

import Component from './conponent.js';

let editMode = false;
let divNameCreate = []
let animNameCreate = [];
let component = new Component();
const modelViewer = document.querySelector('model-viewer');
const editButton = document.getElementById('edit_button');
const popupOn = document.getElementById('popupOn');
const popupOff = document.getElementById('popupOff');
const popupError = document.getElementById('popupError');
const containerInput = document.getElementById('containerInput');
const divNameInput = document.getElementById('divNameInput');
const animationNameInput = document.getElementById('animationNameInput');
const enterButton = document.getElementById('enter');
const cancelButton = document.getElementById('cancel');

let doorCondition = false;
let hotspotOn = false;
let createButtonOn = false;

async function playAnimation(anim, timeScale) {
  modelViewer.animationName = anim;
  modelViewer.timeScale = timeScale;
  await modelViewer.updateComplete;

  modelViewer.play({
    repetitions: 1,
    pingpong: false,
  });
}

component.visiblePopup(editButton, editMode, popupOn, popupOff)

editButton.addEventListener('click', () => {
  editMode = !editMode;
  if (editMode) {
    popupOn.style.display = 'block';
    setTimeout(() => {
      popupOn.style.display = 'none';
    }, 1000);
  } else {
    popupOff.style.display = 'block';
    setTimeout(() => {
      popupOff.style.display = 'none';
    }, 3000);
  }
});
cancelButton.addEventListener('click', outPopup);

function outPopup() {
  divNameInput.value = '';
  animationNameInput.value = '';
  containerInput.style.display = 'none';
  createButtonOn = true;
}
document.addEventListener('DOMContentLoaded', () =>{
  const buttons = JSON.parse(localStorage.getItem('buttons')) || [];
  console.log(buttons);
  buttons.forEach((button) => {
    createHotspot(button.animation, button.surface, button.text);
  });
})

//======================================================================
modelViewer.ondblclick = (event) => {
  if (editMode) {
      const surface = modelViewer.surfaceFromPoint(event.clientX, event.clientY);

      if (surface !== null && !hotspotOn) {
          containerInput.style.display = 'block';
          enterButton.removeEventListener('click', handleEnterClick);

          function handleEnterClick() {
              const divName = divNameInput.value;
              const anim = animationNameInput.value;
              const animName = modelViewer.availableAnimations;

              if (anim.trim() !== '' && animName.includes(anim)) {
                  createHotspot(anim, surface, divName);
                  saveButtons();
                  outPopup();
              } else {
                  outPopup();
                  popupError.style.display = 'block';
                  setTimeout(() => {
                      popupError.style.display = 'none';
                  }, 1500);
              }

              let allHotspot = document.querySelectorAll('.Hotspot');

              allHotspot.forEach(hotspot => {
                  hotspot.addEventListener('mousedown', startDrag);
              });
          }

          enterButton.addEventListener('click', handleEnterClick, { once: true });
      }
  }
};

//======================================================================
function createHotspot(animationName, surface, text) {
  const hotspot = document.createElement('button');
  const hotspotDiv = document.createElement('div');

  animNameCreate.push(animationName);   
  hotspot.setAttribute('class', 'Hotspot');   
  hotspot.setAttribute('slot', `hotspot-${animNameCreate.length}`);   
  hotspot.setAttribute('data-surface', surface);   
  hotspot.setAttribute('data-visibility-attribute', 'visible');   
  hotspot.setAttribute('data-animation', animationName);   
  hotspotDiv.setAttribute('class', 'HotspotAnnotation');   
  hotspotDiv.textContent = text; 
  hotspot.appendChild(hotspotDiv);

  hotspot.addEventListener('click', async () => {
    if (!editMode) {
      playAnimation(animationName, doorCondition ? -1 : 1);
      doorCondition = !doorCondition;
    } else {
      editDiv(hotspot, hotspotDiv);
    }
  });

  hotspot.addEventListener('mousedown', startDrag);

  modelViewer.appendChild(hotspot);

  saveButtons();
}
//======================================================================

//======================================================================
function editDiv(hotspot, hotspotDiv) {
if (editMode) {
  containerInput.style.display = 'block';
  divNameInput.value = hotspotDiv.textContent;
  animationNameInput.style.display = 'none';

  enterButton.addEventListener('click', function hsEnter() {
    if (editMode) {
      const divName = divNameInput.value;
      hotspotDiv.textContent = divName;
      hotspot.appendChild(hotspotDiv);
      animationNameInput.style.display = 'block';
      outPopup();

      const buttons = JSON.parse(localStorage.getItem('buttons')) || [];
      const buttonIndex = Array.from(modelViewer.querySelectorAll('.Hotspot')).indexOf(hotspot);
      if (buttonIndex !== -1) {
        buttons[buttonIndex].text = divName;
        localStorage.setItem('buttons', JSON.stringify(buttons));
      }
    }
  }, { once: true });
}
}
//======================================================================
function saveButtons() {
  const buttons = [];
  document.querySelectorAll('.Hotspot').forEach(button => {
    buttons.push({
      animation: button.getAttribute('data-animation'),
      surface: button.getAttribute('data-surface'),
      text: button.querySelector('.HotspotAnnotation').textContent,
    });
  });
  localStorage.setItem('buttons', JSON.stringify(buttons));
}
//======================================================================

//======================================================================

function startDrag(event) {
  if (editMode) {
    const hotspot = event.target;

    async function onMouseMove(moveEvent) {
      const newSurface = modelViewer.surfaceFromPoint(moveEvent.clientX, moveEvent.clientY);
      if (newSurface) {
        hotspot.setAttribute('data-surface', newSurface);
        console.log(`Updated data-surface: ${newSurface}`);
        await modelViewer.updateComplete;

        const updatedSurface = {
           name: currentSlot,
           position: `${newSur}`
         };
         modelViewer.updateHotspot(updatedSurface);
      }
    }

    function onMouseUp() {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      saveButtons(); // Сохранение изменений
    }

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  }
}
//======================================================================

containerInput.addEventListener('click', (event) => {
  event.stopPropagation();
});

thank you in advance

[elalish]

Sorry, this looks like HTML/JS debugging, not model-viewer. If you can find a minimal repro of a model-viewer bug, I'll be happy to take a look, but I can't just debug your own website.

[bigbea1r]

Нет, я имею в виду реально развернутый веб-сайт — попробуйте ск��пировать его в Glitch, JSbin или что-то в этом роде.

https://jsbin.com/gucikus/edit?html,css,js,console,output

[bigbea1r]

Нет, я имею в виду реально развернутый веб-сайт — попробуйте скопировать его в Glitch, JSbin или что-то в этом роде.

https://vine-thirsty-quotation.glitch.me
https://glitch.com/edit/#!/vine-thirsty-quotation

[elalish]

Thank you for the clear reproduction example! I found the problem, and it is indeed a MV bug, and I think I can fix it with one line.

[elalish]

Okay, turned out to need a bit more than a one-liner, but our logic is quite a bit more robust now: #4867. I verified that it fixes your Glitch, and improved our automated test. Still has a funny CSS offset, but that shouldn't be hard for you to fix.

[bigbea1r]

Okay, turned out to need a bit more than a one-liner, but our logic is quite a bit more robust now: #4867. I verified that it fixes your Glitch, and improved our automated test. Still has a funny CSS offset, but that shouldn't be hard for you to fix.

Thank you very much in advance. I'm going to try it now