I am trying to run a method whenever the screenX or screenY position of a rendered window changes. I have set up a a default value for these positions in my data section here:

data() {
    return {
      initialX: window.screenX,
      initialY: window.screenY
    };
  },

I have computed properties here:

currentPopupX() {
      return window.screenX;
    },
    currentPopupY() {
      return window.screenY;
    }
  },

Finally, I have a watch set up here:

 watch: {
    currentPopupX() {
      if (this.currentPopupX !== this.initialX) {
        movePopup(this.popup, this.currentPopupX, this.currentPopupY);
      }
    },
    currentPopupY() {
      if (this.currentPopupY !== this.initialY) {
        movePopup(this.popup, this.currentPopupX, this.currentPopupY);
      }
    },

However the computed property seems to only return on initial render and does not update after that. Is there something I am missing?

I have tried comparing initial data to computed properties in the watch expecting for the method to be executed on change, however it never changes.

Note: The rendered window is a popup notification. A user wants to drag that notification to a new location (currently it renders in the center of the screen) and have that popup render in the position they dragged it to the next time it is rendered. For additional context, I'm trying to grab the new positions to pass them along to an IPC event.

CodePudding user response：

At my opinion, you have to use an interval to detect the browser position since there's no window move event.

if the browser position.x or the browser position.y change, you may dispatch a custom event.

The event here when you move the window will change the color of the text from black to red.

const event = new CustomEvent("browserMove",{ detail: "browserPosition" });
window.addEventListener("browserMove", onBrowserMove);
let moveTimer=null;
let content=null;
let oldX = 0;
let oldY = 0;
document.addEventListener("DOMContentLoaded",onReady);
  function onReady(e){
    content = document.getElementById("content");
    oldX = window.screenX;
    oldY = window.screenY;
    moveTimer = setInterval(detectBrowserMove,200);
  }
  function detectBrowserMove(){
    let r = browserPosition();
    if(r.x !== oldX || r.y !== oldY){
        // dispatch an event here
        window.dispatchEvent(event);
        oldX = window.screenX;
        oldY = window.screenY;
    }
    content.innerHTML = ("browser.x = "   r.x   ", browser.y = "   r.y);
  }
  function browserPosition() {
    let position={};
    position = {x:window.screenX, y:window.screenY};
    return(position);
  }
  function onBrowserMove(e){
    // write your code here
    let x = window.screenX;
    let y = window.screenY;
    content.style.color="#ff0000";
  }

<div id="content">
            
</div>

CodePudding user response：

If I catch your problem correctly, you are saying that-

A notification window will open in the center by default. The user can drag it anywhere and when next time the notification window will appear, it should pop up at the position where the user last dragged it.

If we take the problem in some other way, you need the last dragged position of the window to send to the API for the next time opening. So, instead of checking the window's position every time why not check for only the last/latest position before it closes?

What I mean is-

1. Let the notification window open.
2. Attach a unload listener to it.
3. Drag it anywhere you want multiple times.
4. When the window is about to close, look into the listener, and grab the latest position.

Here is how you can do it in Vue-

1. Create a window data variable in your Vue and assign your newly opened window object to it-

data() {
  return {
     // Save notification window object to this data property
     vue_window: null;
  }
}

2. Apply a watcher that when vue_window has some value, set a listener to it-

watch: {
    vue_window(newVal) {
      // Only if vue_window variable has some value
      if (newVal) {
       // this will fire when the window is about to close
        newVal.onunload = () => {
          // Here are the latest screen positions of the window
          console.log(this.vue_window.screenX, this.vue_window.screenY);
        };
      }
    },
  },

That's it. When the window will be about to close, you will have the last and latest position of the window which you can save wherever you want.

Here is the demo of this logic- CodeSandBox Link

I couldn't create a snippet because the window is not opening in the snippet environment. I will add the snippet if found any solution to work with the window obj.