Throttle redraw requests fired from pointer events











up vote
0
down vote

favorite
1












I am working on a photo editor, which displays a preview to the user on a canvas. At various points in the app, the user may use sliders to adjust properties of the photo, such as scaling, rotation, etc. The preview needs to be updated in real time, as the user drags the slider.



As I understand, pointer events are fired much more rapidly than the browser window is repainted. Because of this, it would be wasteful to update the preview directly from the pointer event handlers, since most of those updates would have no visible effect. Instead, I wanted to separate the actions of updating the preview state based on the most recent pointer event, and redrawing the preview based on the latest update since the last redraw.



To this end, I wrote a small helper function called throttleRedraw(), which I'd appreciate if you could review. Is it properly optimized? Is it even necessary? There's probably a library for it, but I wanted to make sure I understand the principle at the core.



Here's a snippet containing the function itself, and a simple example that draws a rectangle on a canvas when you click and drag with the pointer:






function throttleRedraw(target, props) {

  const {

    onstart,

    onmove,

    onend,

    ondraw,

    absolute,

  } = props;



  let frameReq = 0;

  let lastX = 0;

  let lastY = 0;

  let isTouch = false;

  let enabled = true;



  // This is the callback we will be passing to requestAnimationFrame().

  // It's just a proxy for the ondraw() function passed in the props object.

  const frameHandler = (now) => {

    if (ondraw) ondraw(now);

    frameReq = 0;

  };



  // The callback for the mousemove/touchmove events,

  // which in turn calls props.onmove() if it was specified.

  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;

  // otherwise, it receives the delta since the last update.

  const moveHandler = (event) => {

    if (onmove) {

      const newX = isTouch ? event.touches[0].clientX : event.clientX;

      const newY = isTouch ? event.touches[0].clientY : event.clientY;

      onmove(

        absolute ? newX : newX - lastX,

        absolute ? newY : newY - lastY,

        event

      );

      lastX = newX;

      lastY = newY;

    }



    // If we have not yet requested an animation frame since the last, do it now.

    if (!frameReq) {

      frameReq = window.requestAnimationFrame(frameHandler);

    }

  };



  // The callback for the mouseup/touchend events,

  // which in turn calls props.onend() if it was specified.

  const upHandler = (event) => {

    if (onend) onend(event);

    

    // Remove the event handlers we set at the start.

    if (!isTouch) {

      window.removeEventListener('mousemove', moveHandler);

      window.removeEventListener('mouseup', upHandler);

    }

    else {

      window.removeEventListener('touchmove', moveHandler);

      window.removeEventListener('touchend', upHandler);

      window.removeEventListener('touchcancel', upHandler);

    }

  };



  // Set the mousedown/touchstart event listeners on the target.

  // They're mostly the same, except for how the coordinates are obtained

  // from the event, and what additional event handlers need to be set.



  target.addEventListener('mousedown', (event) => {

    if (!enabled) return true;



    isTouch = false;

    event.preventDefault();

    lastX = event.clientX;

    lastY = event.clientY;

    if (onstart) onstart(lastX, lastY, event);



    window.addEventListener('mousemove', moveHandler);

    window.addEventListener('mouseup', upHandler);

  });



  target.addEventListener('touchstart', (event) => {

    if (!enabled) return true;



    isTouch = true;

    event.preventDefault();

    lastX = event.touches[0].clientX;

    lastY = event.touches[0].clientY;

    if (onstart) onstart(lastX, lastY, event);



    window.addEventListener('touchmove', moveHandler);

    window.addEventListener('touchend', upHandler);

    window.addEventListener('touchcancel', upHandler);

  });



  // Return an object that allows us to enable or disable listening for events,

  // and query the current enabled state.

  return {

    isEnabled: () => enabled,

    enable: (value) => { enabled = value; },

  };

}



const canvas = document.querySelector('canvas');

const rect = canvas.getBoundingClientRect();

const ctx = canvas.getContext('2d');



let x0, y0, x1, y1;



throttleRedraw(canvas, {

  absolute: true,



  onstart: (x, y) => {

    x0 = x - rect.left;

    y0 = y - rect.top;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'red';

  },

  onmove: (x, y) => {

    x1 = x - rect.left;

    y1 = y - rect.top;

  },

  ondraw: () => {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillRect(

      Math.min(x0, x1),

      Math.min(y0, y1),

      Math.abs(x1 - x0),

      Math.abs(y1 - y0)

    );

  },

});

<canvas width="400" height="400" style="border: 2px solid #888"></canvas>





Thanks in advance.






javascript reinventing-the-wheel event-handling







share|improve this question


























    up vote
    0
    down vote

    favorite
    1












    I am working on a photo editor, which displays a preview to the user on a canvas. At various points in the app, the user may use sliders to adjust properties of the photo, such as scaling, rotation, etc. The preview needs to be updated in real time, as the user drags the slider.



    As I understand, pointer events are fired much more rapidly than the browser window is repainted. Because of this, it would be wasteful to update the preview directly from the pointer event handlers, since most of those updates would have no visible effect. Instead, I wanted to separate the actions of updating the preview state based on the most recent pointer event, and redrawing the preview based on the latest update since the last redraw.



    To this end, I wrote a small helper function called throttleRedraw(), which I'd appreciate if you could review. Is it properly optimized? Is it even necessary? There's probably a library for it, but I wanted to make sure I understand the principle at the core.



    Here's a snippet containing the function itself, and a simple example that draws a rectangle on a canvas when you click and drag with the pointer:






    function throttleRedraw(target, props) {
    
  const {
    
    onstart,
    
    onmove,
    
    onend,
    
    ondraw,
    
    absolute,
    
  } = props;
    

    
  let frameReq = 0;
    
  let lastX = 0;
    
  let lastY = 0;
    
  let isTouch = false;
    
  let enabled = true;
    

    
  // This is the callback we will be passing to requestAnimationFrame().
    
  // It's just a proxy for the ondraw() function passed in the props object.
    
  const frameHandler = (now) => {
    
    if (ondraw) ondraw(now);
    
    frameReq = 0;
    
  };
    

    
  // The callback for the mousemove/touchmove events,
    
  // which in turn calls props.onmove() if it was specified.
    
  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;
    
  // otherwise, it receives the delta since the last update.
    
  const moveHandler = (event) => {
    
    if (onmove) {
    
      const newX = isTouch ? event.touches[0].clientX : event.clientX;
    
      const newY = isTouch ? event.touches[0].clientY : event.clientY;
    
      onmove(
    
        absolute ? newX : newX - lastX,
    
        absolute ? newY : newY - lastY,
    
        event
    
      );
    
      lastX = newX;
    
      lastY = newY;
    
    }
    

    
    // If we have not yet requested an animation frame since the last, do it now.
    
    if (!frameReq) {
    
      frameReq = window.requestAnimationFrame(frameHandler);
    
    }
    
  };
    

    
  // The callback for the mouseup/touchend events,
    
  // which in turn calls props.onend() if it was specified.
    
  const upHandler = (event) => {
    
    if (onend) onend(event);
    
    
    
    // Remove the event handlers we set at the start.
    
    if (!isTouch) {
    
      window.removeEventListener('mousemove', moveHandler);
    
      window.removeEventListener('mouseup', upHandler);
    
    }
    
    else {
    
      window.removeEventListener('touchmove', moveHandler);
    
      window.removeEventListener('touchend', upHandler);
    
      window.removeEventListener('touchcancel', upHandler);
    
    }
    
  };
    

    
  // Set the mousedown/touchstart event listeners on the target.
    
  // They're mostly the same, except for how the coordinates are obtained
    
  // from the event, and what additional event handlers need to be set.
    

    
  target.addEventListener('mousedown', (event) => {
    
    if (!enabled) return true;
    

    
    isTouch = false;
    
    event.preventDefault();
    
    lastX = event.clientX;
    
    lastY = event.clientY;
    
    if (onstart) onstart(lastX, lastY, event);
    

    
    window.addEventListener('mousemove', moveHandler);
    
    window.addEventListener('mouseup', upHandler);
    
  });
    

    
  target.addEventListener('touchstart', (event) => {
    
    if (!enabled) return true;
    

    
    isTouch = true;
    
    event.preventDefault();
    
    lastX = event.touches[0].clientX;
    
    lastY = event.touches[0].clientY;
    
    if (onstart) onstart(lastX, lastY, event);
    

    
    window.addEventListener('touchmove', moveHandler);
    
    window.addEventListener('touchend', upHandler);
    
    window.addEventListener('touchcancel', upHandler);
    
  });
    

    
  // Return an object that allows us to enable or disable listening for events,
    
  // and query the current enabled state.
    
  return {
    
    isEnabled: () => enabled,
    
    enable: (value) => { enabled = value; },
    
  };
    
}
    

    
const canvas = document.querySelector('canvas');
    
const rect = canvas.getBoundingClientRect();
    
const ctx = canvas.getContext('2d');
    

    
let x0, y0, x1, y1;
    

    
throttleRedraw(canvas, {
    
  absolute: true,
    

    
  onstart: (x, y) => {
    
    x0 = x - rect.left;
    
    y0 = y - rect.top;
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = 'red';
    
  },
    
  onmove: (x, y) => {
    
    x1 = x - rect.left;
    
    y1 = y - rect.top;
    
  },
    
  ondraw: () => {
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillRect(
    
      Math.min(x0, x1),
    
      Math.min(y0, y1),
    
      Math.abs(x1 - x0),
    
      Math.abs(y1 - y0)
    
    );
    
  },
    
});

    <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





    Thanks in advance.






    javascript reinventing-the-wheel event-handling







    share|improve this question
























      up vote
      0
      down vote

      favorite
      1









      up vote
      0
      down vote

      favorite
      1






      1





      I am working on a photo editor, which displays a preview to the user on a canvas. At various points in the app, the user may use sliders to adjust properties of the photo, such as scaling, rotation, etc. The preview needs to be updated in real time, as the user drags the slider.



      As I understand, pointer events are fired much more rapidly than the browser window is repainted. Because of this, it would be wasteful to update the preview directly from the pointer event handlers, since most of those updates would have no visible effect. Instead, I wanted to separate the actions of updating the preview state based on the most recent pointer event, and redrawing the preview based on the latest update since the last redraw.



      To this end, I wrote a small helper function called throttleRedraw(), which I'd appreciate if you could review. Is it properly optimized? Is it even necessary? There's probably a library for it, but I wanted to make sure I understand the principle at the core.



      Here's a snippet containing the function itself, and a simple example that draws a rectangle on a canvas when you click and drag with the pointer:






      function throttleRedraw(target, props) {
      
  const {
      
    onstart,
      
    onmove,
      
    onend,
      
    ondraw,
      
    absolute,
      
  } = props;
      

      
  let frameReq = 0;
      
  let lastX = 0;
      
  let lastY = 0;
      
  let isTouch = false;
      
  let enabled = true;
      

      
  // This is the callback we will be passing to requestAnimationFrame().
      
  // It's just a proxy for the ondraw() function passed in the props object.
      
  const frameHandler = (now) => {
      
    if (ondraw) ondraw(now);
      
    frameReq = 0;
      
  };
      

      
  // The callback for the mousemove/touchmove events,
      
  // which in turn calls props.onmove() if it was specified.
      
  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;
      
  // otherwise, it receives the delta since the last update.
      
  const moveHandler = (event) => {
      
    if (onmove) {
      
      const newX = isTouch ? event.touches[0].clientX : event.clientX;
      
      const newY = isTouch ? event.touches[0].clientY : event.clientY;
      
      onmove(
      
        absolute ? newX : newX - lastX,
      
        absolute ? newY : newY - lastY,
      
        event
      
      );
      
      lastX = newX;
      
      lastY = newY;
      
    }
      

      
    // If we have not yet requested an animation frame since the last, do it now.
      
    if (!frameReq) {
      
      frameReq = window.requestAnimationFrame(frameHandler);
      
    }
      
  };
      

      
  // The callback for the mouseup/touchend events,
      
  // which in turn calls props.onend() if it was specified.
      
  const upHandler = (event) => {
      
    if (onend) onend(event);
      
    
      
    // Remove the event handlers we set at the start.
      
    if (!isTouch) {
      
      window.removeEventListener('mousemove', moveHandler);
      
      window.removeEventListener('mouseup', upHandler);
      
    }
      
    else {
      
      window.removeEventListener('touchmove', moveHandler);
      
      window.removeEventListener('touchend', upHandler);
      
      window.removeEventListener('touchcancel', upHandler);
      
    }
      
  };
      

      
  // Set the mousedown/touchstart event listeners on the target.
      
  // They're mostly the same, except for how the coordinates are obtained
      
  // from the event, and what additional event handlers need to be set.
      

      
  target.addEventListener('mousedown', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = false;
      
    event.preventDefault();
      
    lastX = event.clientX;
      
    lastY = event.clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('mousemove', moveHandler);
      
    window.addEventListener('mouseup', upHandler);
      
  });
      

      
  target.addEventListener('touchstart', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = true;
      
    event.preventDefault();
      
    lastX = event.touches[0].clientX;
      
    lastY = event.touches[0].clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('touchmove', moveHandler);
      
    window.addEventListener('touchend', upHandler);
      
    window.addEventListener('touchcancel', upHandler);
      
  });
      

      
  // Return an object that allows us to enable or disable listening for events,
      
  // and query the current enabled state.
      
  return {
      
    isEnabled: () => enabled,
      
    enable: (value) => { enabled = value; },
      
  };
      
}
      

      
const canvas = document.querySelector('canvas');
      
const rect = canvas.getBoundingClientRect();
      
const ctx = canvas.getContext('2d');
      

      
let x0, y0, x1, y1;
      

      
throttleRedraw(canvas, {
      
  absolute: true,
      

      
  onstart: (x, y) => {
      
    x0 = x - rect.left;
      
    y0 = y - rect.top;
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillStyle = 'red';
      
  },
      
  onmove: (x, y) => {
      
    x1 = x - rect.left;
      
    y1 = y - rect.top;
      
  },
      
  ondraw: () => {
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillRect(
      
      Math.min(x0, x1),
      
      Math.min(y0, y1),
      
      Math.abs(x1 - x0),
      
      Math.abs(y1 - y0)
      
    );
      
  },
      
});

      <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





      Thanks in advance.






      javascript reinventing-the-wheel event-handling







      share|improve this question













      I am working on a photo editor, which displays a preview to the user on a canvas. At various points in the app, the user may use sliders to adjust properties of the photo, such as scaling, rotation, etc. The preview needs to be updated in real time, as the user drags the slider.



      As I understand, pointer events are fired much more rapidly than the browser window is repainted. Because of this, it would be wasteful to update the preview directly from the pointer event handlers, since most of those updates would have no visible effect. Instead, I wanted to separate the actions of updating the preview state based on the most recent pointer event, and redrawing the preview based on the latest update since the last redraw.



      To this end, I wrote a small helper function called throttleRedraw(), which I'd appreciate if you could review. Is it properly optimized? Is it even necessary? There's probably a library for it, but I wanted to make sure I understand the principle at the core.



      Here's a snippet containing the function itself, and a simple example that draws a rectangle on a canvas when you click and drag with the pointer:






      function throttleRedraw(target, props) {
      
  const {
      
    onstart,
      
    onmove,
      
    onend,
      
    ondraw,
      
    absolute,
      
  } = props;
      

      
  let frameReq = 0;
      
  let lastX = 0;
      
  let lastY = 0;
      
  let isTouch = false;
      
  let enabled = true;
      

      
  // This is the callback we will be passing to requestAnimationFrame().
      
  // It's just a proxy for the ondraw() function passed in the props object.
      
  const frameHandler = (now) => {
      
    if (ondraw) ondraw(now);
      
    frameReq = 0;
      
  };
      

      
  // The callback for the mousemove/touchmove events,
      
  // which in turn calls props.onmove() if it was specified.
      
  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;
      
  // otherwise, it receives the delta since the last update.
      
  const moveHandler = (event) => {
      
    if (onmove) {
      
      const newX = isTouch ? event.touches[0].clientX : event.clientX;
      
      const newY = isTouch ? event.touches[0].clientY : event.clientY;
      
      onmove(
      
        absolute ? newX : newX - lastX,
      
        absolute ? newY : newY - lastY,
      
        event
      
      );
      
      lastX = newX;
      
      lastY = newY;
      
    }
      

      
    // If we have not yet requested an animation frame since the last, do it now.
      
    if (!frameReq) {
      
      frameReq = window.requestAnimationFrame(frameHandler);
      
    }
      
  };
      

      
  // The callback for the mouseup/touchend events,
      
  // which in turn calls props.onend() if it was specified.
      
  const upHandler = (event) => {
      
    if (onend) onend(event);
      
    
      
    // Remove the event handlers we set at the start.
      
    if (!isTouch) {
      
      window.removeEventListener('mousemove', moveHandler);
      
      window.removeEventListener('mouseup', upHandler);
      
    }
      
    else {
      
      window.removeEventListener('touchmove', moveHandler);
      
      window.removeEventListener('touchend', upHandler);
      
      window.removeEventListener('touchcancel', upHandler);
      
    }
      
  };
      

      
  // Set the mousedown/touchstart event listeners on the target.
      
  // They're mostly the same, except for how the coordinates are obtained
      
  // from the event, and what additional event handlers need to be set.
      

      
  target.addEventListener('mousedown', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = false;
      
    event.preventDefault();
      
    lastX = event.clientX;
      
    lastY = event.clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('mousemove', moveHandler);
      
    window.addEventListener('mouseup', upHandler);
      
  });
      

      
  target.addEventListener('touchstart', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = true;
      
    event.preventDefault();
      
    lastX = event.touches[0].clientX;
      
    lastY = event.touches[0].clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('touchmove', moveHandler);
      
    window.addEventListener('touchend', upHandler);
      
    window.addEventListener('touchcancel', upHandler);
      
  });
      

      
  // Return an object that allows us to enable or disable listening for events,
      
  // and query the current enabled state.
      
  return {
      
    isEnabled: () => enabled,
      
    enable: (value) => { enabled = value; },
      
  };
      
}
      

      
const canvas = document.querySelector('canvas');
      
const rect = canvas.getBoundingClientRect();
      
const ctx = canvas.getContext('2d');
      

      
let x0, y0, x1, y1;
      

      
throttleRedraw(canvas, {
      
  absolute: true,
      

      
  onstart: (x, y) => {
      
    x0 = x - rect.left;
      
    y0 = y - rect.top;
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillStyle = 'red';
      
  },
      
  onmove: (x, y) => {
      
    x1 = x - rect.left;
      
    y1 = y - rect.top;
      
  },
      
  ondraw: () => {
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillRect(
      
      Math.min(x0, x1),
      
      Math.min(y0, y1),
      
      Math.abs(x1 - x0),
      
      Math.abs(y1 - y0)
      
    );
      
  },
      
});

      <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





      Thanks in advance.






      function throttleRedraw(target, props) {
      
  const {
      
    onstart,
      
    onmove,
      
    onend,
      
    ondraw,
      
    absolute,
      
  } = props;
      

      
  let frameReq = 0;
      
  let lastX = 0;
      
  let lastY = 0;
      
  let isTouch = false;
      
  let enabled = true;
      

      
  // This is the callback we will be passing to requestAnimationFrame().
      
  // It's just a proxy for the ondraw() function passed in the props object.
      
  const frameHandler = (now) => {
      
    if (ondraw) ondraw(now);
      
    frameReq = 0;
      
  };
      

      
  // The callback for the mousemove/touchmove events,
      
  // which in turn calls props.onmove() if it was specified.
      
  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;
      
  // otherwise, it receives the delta since the last update.
      
  const moveHandler = (event) => {
      
    if (onmove) {
      
      const newX = isTouch ? event.touches[0].clientX : event.clientX;
      
      const newY = isTouch ? event.touches[0].clientY : event.clientY;
      
      onmove(
      
        absolute ? newX : newX - lastX,
      
        absolute ? newY : newY - lastY,
      
        event
      
      );
      
      lastX = newX;
      
      lastY = newY;
      
    }
      

      
    // If we have not yet requested an animation frame since the last, do it now.
      
    if (!frameReq) {
      
      frameReq = window.requestAnimationFrame(frameHandler);
      
    }
      
  };
      

      
  // The callback for the mouseup/touchend events,
      
  // which in turn calls props.onend() if it was specified.
      
  const upHandler = (event) => {
      
    if (onend) onend(event);
      
    
      
    // Remove the event handlers we set at the start.
      
    if (!isTouch) {
      
      window.removeEventListener('mousemove', moveHandler);
      
      window.removeEventListener('mouseup', upHandler);
      
    }
      
    else {
      
      window.removeEventListener('touchmove', moveHandler);
      
      window.removeEventListener('touchend', upHandler);
      
      window.removeEventListener('touchcancel', upHandler);
      
    }
      
  };
      

      
  // Set the mousedown/touchstart event listeners on the target.
      
  // They're mostly the same, except for how the coordinates are obtained
      
  // from the event, and what additional event handlers need to be set.
      

      
  target.addEventListener('mousedown', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = false;
      
    event.preventDefault();
      
    lastX = event.clientX;
      
    lastY = event.clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('mousemove', moveHandler);
      
    window.addEventListener('mouseup', upHandler);
      
  });
      

      
  target.addEventListener('touchstart', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = true;
      
    event.preventDefault();
      
    lastX = event.touches[0].clientX;
      
    lastY = event.touches[0].clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('touchmove', moveHandler);
      
    window.addEventListener('touchend', upHandler);
      
    window.addEventListener('touchcancel', upHandler);
      
  });
      

      
  // Return an object that allows us to enable or disable listening for events,
      
  // and query the current enabled state.
      
  return {
      
    isEnabled: () => enabled,
      
    enable: (value) => { enabled = value; },
      
  };
      
}
      

      
const canvas = document.querySelector('canvas');
      
const rect = canvas.getBoundingClientRect();
      
const ctx = canvas.getContext('2d');
      

      
let x0, y0, x1, y1;
      

      
throttleRedraw(canvas, {
      
  absolute: true,
      

      
  onstart: (x, y) => {
      
    x0 = x - rect.left;
      
    y0 = y - rect.top;
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillStyle = 'red';
      
  },
      
  onmove: (x, y) => {
      
    x1 = x - rect.left;
      
    y1 = y - rect.top;
      
  },
      
  ondraw: () => {
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillRect(
      
      Math.min(x0, x1),
      
      Math.min(y0, y1),
      
      Math.abs(x1 - x0),
      
      Math.abs(y1 - y0)
      
    );
      
  },
      
});

      <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





      function throttleRedraw(target, props) {
      
  const {
      
    onstart,
      
    onmove,
      
    onend,
      
    ondraw,
      
    absolute,
      
  } = props;
      

      
  let frameReq = 0;
      
  let lastX = 0;
      
  let lastY = 0;
      
  let isTouch = false;
      
  let enabled = true;
      

      
  // This is the callback we will be passing to requestAnimationFrame().
      
  // It's just a proxy for the ondraw() function passed in the props object.
      
  const frameHandler = (now) => {
      
    if (ondraw) ondraw(now);
      
    frameReq = 0;
      
  };
      

      
  // The callback for the mousemove/touchmove events,
      
  // which in turn calls props.onmove() if it was specified.
      
  // If props.absolute is true, props.onmove() receives the x and y coordinates of the pointer;
      
  // otherwise, it receives the delta since the last update.
      
  const moveHandler = (event) => {
      
    if (onmove) {
      
      const newX = isTouch ? event.touches[0].clientX : event.clientX;
      
      const newY = isTouch ? event.touches[0].clientY : event.clientY;
      
      onmove(
      
        absolute ? newX : newX - lastX,
      
        absolute ? newY : newY - lastY,
      
        event
      
      );
      
      lastX = newX;
      
      lastY = newY;
      
    }
      

      
    // If we have not yet requested an animation frame since the last, do it now.
      
    if (!frameReq) {
      
      frameReq = window.requestAnimationFrame(frameHandler);
      
    }
      
  };
      

      
  // The callback for the mouseup/touchend events,
      
  // which in turn calls props.onend() if it was specified.
      
  const upHandler = (event) => {
      
    if (onend) onend(event);
      
    
      
    // Remove the event handlers we set at the start.
      
    if (!isTouch) {
      
      window.removeEventListener('mousemove', moveHandler);
      
      window.removeEventListener('mouseup', upHandler);
      
    }
      
    else {
      
      window.removeEventListener('touchmove', moveHandler);
      
      window.removeEventListener('touchend', upHandler);
      
      window.removeEventListener('touchcancel', upHandler);
      
    }
      
  };
      

      
  // Set the mousedown/touchstart event listeners on the target.
      
  // They're mostly the same, except for how the coordinates are obtained
      
  // from the event, and what additional event handlers need to be set.
      

      
  target.addEventListener('mousedown', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = false;
      
    event.preventDefault();
      
    lastX = event.clientX;
      
    lastY = event.clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('mousemove', moveHandler);
      
    window.addEventListener('mouseup', upHandler);
      
  });
      

      
  target.addEventListener('touchstart', (event) => {
      
    if (!enabled) return true;
      

      
    isTouch = true;
      
    event.preventDefault();
      
    lastX = event.touches[0].clientX;
      
    lastY = event.touches[0].clientY;
      
    if (onstart) onstart(lastX, lastY, event);
      

      
    window.addEventListener('touchmove', moveHandler);
      
    window.addEventListener('touchend', upHandler);
      
    window.addEventListener('touchcancel', upHandler);
      
  });
      

      
  // Return an object that allows us to enable or disable listening for events,
      
  // and query the current enabled state.
      
  return {
      
    isEnabled: () => enabled,
      
    enable: (value) => { enabled = value; },
      
  };
      
}
      

      
const canvas = document.querySelector('canvas');
      
const rect = canvas.getBoundingClientRect();
      
const ctx = canvas.getContext('2d');
      

      
let x0, y0, x1, y1;
      

      
throttleRedraw(canvas, {
      
  absolute: true,
      

      
  onstart: (x, y) => {
      
    x0 = x - rect.left;
      
    y0 = y - rect.top;
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillStyle = 'red';
      
  },
      
  onmove: (x, y) => {
      
    x1 = x - rect.left;
      
    y1 = y - rect.top;
      
  },
      
  ondraw: () => {
      
    ctx.clearRect(0, 0, canvas.width, canvas.height);
      
    ctx.fillRect(
      
      Math.min(x0, x1),
      
      Math.min(y0, y1),
      
      Math.abs(x1 - x0),
      
      Math.abs(y1 - y0)
      
    );
      
  },
      
});

      <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





      javascript reinventing-the-wheel event-handling




      javascript reinventing-the-wheel event-handling






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Aug 21 at 9:04









      Máté Safranka

      49618




      49618






















          1 Answer
          1






          active

          oldest

          votes

















          up vote
          0
          down vote













          Limiting updates



          You are correct about mouse event rates, I have seen mouse event 2ms appart. However touch events seam to be in sync with the display 60FPS, I have never seen a touch event fire at rates higher than this (but that is a hardware attribute as far as I know)



          But that is besides the point. It is always a good idea to decouple the rendering from random events, be they user input, or from some other source. The display is driven at a fixed rate and to maintain good quality animations and presentation, keeping it tightly synced to that rate is important.



          Some style a code points.




          • window is the default object you don't need to use it. window.removeEventListener is the same as removeEventListener and conversly your function throttleRedraw is the same as window.throttleRedraw


          • It is not good to have statement block without delimiting parenthesis as it can easily be missed when making modifications. if (ondraw) ondraw(now); is better as if (ondraw) { ondraw(now) } the ; is optional as the line has ended in a }


          • You don't have to have a separate event handler for each event type. Many of the event properties are repeated and you end up duplicating code. Create a single handler that handles all the events of similar type.


          • The DOM does it all, but the DOM does it badly, adding and removing event handlers is just adding more work to the DOM and can be more efficiently handled by your JavaScript. Set handlers once and ignore events not needed


          • Too many comments. Comment only code that is not self evident, any other comments are just noise and make the code harder to read.



          Design



          From a design point I would not tie the mouse/touch event handlers so tightly with the rendering functionality. It is likely that there will be additional event like sources that require updated rendering. Completely decoupling the rendering from the pointer like events will make the system more flexible.



          Touch and mouse are abstractly the same, try to reduce the individual abstraction and use a common pointer like abstract to name and define behaviors.



          The flag absolute is an over complication. Just keep a pointer delta that contains the relative pointer motion and let the handling code pick which to use.



          Example



          The example decouples the pointer from the rendering.



          The pointer is created and listens to all relevant events and sets its properties x, y, down... and so on. The pointer also correct the coors to be relative to the target top left.



          The render start up and creates a pointer object setting its target to the canvas The main loop continues to run and will only update if there is a change to the pointer.



          The result is that the rendering becomes more complex, but that is offset by greatly reducing the pointer event handling code.



          This also means that you could add keyboard events, or have running animations (like selection box dash movement) and not be reliant on the mouse event handler to pass appropriate render calls



          Note that it listens to document events and filters out events not triggered by the active element. (THE snippet has modified behavior and does not allow event outside the snippet window. The event handler has the target test commented out to improve it a little, but it is not an accurate representation of how it works on a independent page).






          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>








          share|improve this answer























          • Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
            – Máté Safranka
            Aug 21 at 14:27










          • @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
            – Blindman67
            Aug 21 at 15:24











          Your Answer





          StackExchange.ifUsing("editor", function () {
          return StackExchange.using("mathjaxEditing", function () {
          StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
          StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
          });
          });
          }, "mathjax-editing");

          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "196"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f202110%2fthrottle-redraw-requests-fired-from-pointer-events%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote













          Limiting updates



          You are correct about mouse event rates, I have seen mouse event 2ms appart. However touch events seam to be in sync with the display 60FPS, I have never seen a touch event fire at rates higher than this (but that is a hardware attribute as far as I know)



          But that is besides the point. It is always a good idea to decouple the rendering from random events, be they user input, or from some other source. The display is driven at a fixed rate and to maintain good quality animations and presentation, keeping it tightly synced to that rate is important.



          Some style a code points.




          • window is the default object you don't need to use it. window.removeEventListener is the same as removeEventListener and conversly your function throttleRedraw is the same as window.throttleRedraw


          • It is not good to have statement block without delimiting parenthesis as it can easily be missed when making modifications. if (ondraw) ondraw(now); is better as if (ondraw) { ondraw(now) } the ; is optional as the line has ended in a }


          • You don't have to have a separate event handler for each event type. Many of the event properties are repeated and you end up duplicating code. Create a single handler that handles all the events of similar type.


          • The DOM does it all, but the DOM does it badly, adding and removing event handlers is just adding more work to the DOM and can be more efficiently handled by your JavaScript. Set handlers once and ignore events not needed


          • Too many comments. Comment only code that is not self evident, any other comments are just noise and make the code harder to read.



          Design



          From a design point I would not tie the mouse/touch event handlers so tightly with the rendering functionality. It is likely that there will be additional event like sources that require updated rendering. Completely decoupling the rendering from the pointer like events will make the system more flexible.



          Touch and mouse are abstractly the same, try to reduce the individual abstraction and use a common pointer like abstract to name and define behaviors.



          The flag absolute is an over complication. Just keep a pointer delta that contains the relative pointer motion and let the handling code pick which to use.



          Example



          The example decouples the pointer from the rendering.



          The pointer is created and listens to all relevant events and sets its properties x, y, down... and so on. The pointer also correct the coors to be relative to the target top left.



          The render start up and creates a pointer object setting its target to the canvas The main loop continues to run and will only update if there is a change to the pointer.



          The result is that the rendering becomes more complex, but that is offset by greatly reducing the pointer event handling code.



          This also means that you could add keyboard events, or have running animations (like selection box dash movement) and not be reliant on the mouse event handler to pass appropriate render calls



          Note that it listens to document events and filters out events not triggered by the active element. (THE snippet has modified behavior and does not allow event outside the snippet window. The event handler has the target test commented out to improve it a little, but it is not an accurate representation of how it works on a independent page).






          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>








          share|improve this answer























          • Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
            – Máté Safranka
            Aug 21 at 14:27










          • @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
            – Blindman67
            Aug 21 at 15:24















          up vote
          0
          down vote













          Limiting updates



          You are correct about mouse event rates, I have seen mouse event 2ms appart. However touch events seam to be in sync with the display 60FPS, I have never seen a touch event fire at rates higher than this (but that is a hardware attribute as far as I know)



          But that is besides the point. It is always a good idea to decouple the rendering from random events, be they user input, or from some other source. The display is driven at a fixed rate and to maintain good quality animations and presentation, keeping it tightly synced to that rate is important.



          Some style a code points.




          • window is the default object you don't need to use it. window.removeEventListener is the same as removeEventListener and conversly your function throttleRedraw is the same as window.throttleRedraw


          • It is not good to have statement block without delimiting parenthesis as it can easily be missed when making modifications. if (ondraw) ondraw(now); is better as if (ondraw) { ondraw(now) } the ; is optional as the line has ended in a }


          • You don't have to have a separate event handler for each event type. Many of the event properties are repeated and you end up duplicating code. Create a single handler that handles all the events of similar type.


          • The DOM does it all, but the DOM does it badly, adding and removing event handlers is just adding more work to the DOM and can be more efficiently handled by your JavaScript. Set handlers once and ignore events not needed


          • Too many comments. Comment only code that is not self evident, any other comments are just noise and make the code harder to read.



          Design



          From a design point I would not tie the mouse/touch event handlers so tightly with the rendering functionality. It is likely that there will be additional event like sources that require updated rendering. Completely decoupling the rendering from the pointer like events will make the system more flexible.



          Touch and mouse are abstractly the same, try to reduce the individual abstraction and use a common pointer like abstract to name and define behaviors.



          The flag absolute is an over complication. Just keep a pointer delta that contains the relative pointer motion and let the handling code pick which to use.



          Example



          The example decouples the pointer from the rendering.



          The pointer is created and listens to all relevant events and sets its properties x, y, down... and so on. The pointer also correct the coors to be relative to the target top left.



          The render start up and creates a pointer object setting its target to the canvas The main loop continues to run and will only update if there is a change to the pointer.



          The result is that the rendering becomes more complex, but that is offset by greatly reducing the pointer event handling code.



          This also means that you could add keyboard events, or have running animations (like selection box dash movement) and not be reliant on the mouse event handler to pass appropriate render calls



          Note that it listens to document events and filters out events not triggered by the active element. (THE snippet has modified behavior and does not allow event outside the snippet window. The event handler has the target test commented out to improve it a little, but it is not an accurate representation of how it works on a independent page).






          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>








          share|improve this answer























          • Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
            – Máté Safranka
            Aug 21 at 14:27










          • @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
            – Blindman67
            Aug 21 at 15:24













          up vote
          0
          down vote










          up vote
          0
          down vote









          Limiting updates



          You are correct about mouse event rates, I have seen mouse event 2ms appart. However touch events seam to be in sync with the display 60FPS, I have never seen a touch event fire at rates higher than this (but that is a hardware attribute as far as I know)



          But that is besides the point. It is always a good idea to decouple the rendering from random events, be they user input, or from some other source. The display is driven at a fixed rate and to maintain good quality animations and presentation, keeping it tightly synced to that rate is important.



          Some style a code points.




          • window is the default object you don't need to use it. window.removeEventListener is the same as removeEventListener and conversly your function throttleRedraw is the same as window.throttleRedraw


          • It is not good to have statement block without delimiting parenthesis as it can easily be missed when making modifications. if (ondraw) ondraw(now); is better as if (ondraw) { ondraw(now) } the ; is optional as the line has ended in a }


          • You don't have to have a separate event handler for each event type. Many of the event properties are repeated and you end up duplicating code. Create a single handler that handles all the events of similar type.


          • The DOM does it all, but the DOM does it badly, adding and removing event handlers is just adding more work to the DOM and can be more efficiently handled by your JavaScript. Set handlers once and ignore events not needed


          • Too many comments. Comment only code that is not self evident, any other comments are just noise and make the code harder to read.



          Design



          From a design point I would not tie the mouse/touch event handlers so tightly with the rendering functionality. It is likely that there will be additional event like sources that require updated rendering. Completely decoupling the rendering from the pointer like events will make the system more flexible.



          Touch and mouse are abstractly the same, try to reduce the individual abstraction and use a common pointer like abstract to name and define behaviors.



          The flag absolute is an over complication. Just keep a pointer delta that contains the relative pointer motion and let the handling code pick which to use.



          Example



          The example decouples the pointer from the rendering.



          The pointer is created and listens to all relevant events and sets its properties x, y, down... and so on. The pointer also correct the coors to be relative to the target top left.



          The render start up and creates a pointer object setting its target to the canvas The main loop continues to run and will only update if there is a change to the pointer.



          The result is that the rendering becomes more complex, but that is offset by greatly reducing the pointer event handling code.



          This also means that you could add keyboard events, or have running animations (like selection box dash movement) and not be reliant on the mouse event handler to pass appropriate render calls



          Note that it listens to document events and filters out events not triggered by the active element. (THE snippet has modified behavior and does not allow event outside the snippet window. The event handler has the target test commented out to improve it a little, but it is not an accurate representation of how it works on a independent page).






          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>








          share|improve this answer














          Limiting updates



          You are correct about mouse event rates, I have seen mouse event 2ms appart. However touch events seam to be in sync with the display 60FPS, I have never seen a touch event fire at rates higher than this (but that is a hardware attribute as far as I know)



          But that is besides the point. It is always a good idea to decouple the rendering from random events, be they user input, or from some other source. The display is driven at a fixed rate and to maintain good quality animations and presentation, keeping it tightly synced to that rate is important.



          Some style a code points.




          • window is the default object you don't need to use it. window.removeEventListener is the same as removeEventListener and conversly your function throttleRedraw is the same as window.throttleRedraw


          • It is not good to have statement block without delimiting parenthesis as it can easily be missed when making modifications. if (ondraw) ondraw(now); is better as if (ondraw) { ondraw(now) } the ; is optional as the line has ended in a }


          • You don't have to have a separate event handler for each event type. Many of the event properties are repeated and you end up duplicating code. Create a single handler that handles all the events of similar type.


          • The DOM does it all, but the DOM does it badly, adding and removing event handlers is just adding more work to the DOM and can be more efficiently handled by your JavaScript. Set handlers once and ignore events not needed


          • Too many comments. Comment only code that is not self evident, any other comments are just noise and make the code harder to read.



          Design



          From a design point I would not tie the mouse/touch event handlers so tightly with the rendering functionality. It is likely that there will be additional event like sources that require updated rendering. Completely decoupling the rendering from the pointer like events will make the system more flexible.



          Touch and mouse are abstractly the same, try to reduce the individual abstraction and use a common pointer like abstract to name and define behaviors.



          The flag absolute is an over complication. Just keep a pointer delta that contains the relative pointer motion and let the handling code pick which to use.



          Example



          The example decouples the pointer from the rendering.



          The pointer is created and listens to all relevant events and sets its properties x, y, down... and so on. The pointer also correct the coors to be relative to the target top left.



          The render start up and creates a pointer object setting its target to the canvas The main loop continues to run and will only update if there is a change to the pointer.



          The result is that the rendering becomes more complex, but that is offset by greatly reducing the pointer event handling code.



          This also means that you could add keyboard events, or have running animations (like selection box dash movement) and not be reliant on the mouse event handler to pass appropriate render calls



          Note that it listens to document events and filters out events not triggered by the active element. (THE snippet has modified behavior and does not allow event outside the snippet window. The event handler has the target test commented out to improve it a little, but it is not an accurate representation of how it works on a independent page).






          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>








          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>





          function createPointer(target) {
          
    var currentTarget;
          
    var bounds;
          
    const types = {
          
        mouse: 1, touch: 2, move: 1, up: 2, end: 2, cancel: 2, start: 0, down: 0,
          
        names : "touchcancel,touchend,touchmove,touchstart,mousemove,mousedown,mouseup".split(","),
          
    }
          
    const pointer = {
          
        delta: {x : 0, y : 0},
          
        pos:   {x : 0, y : 0, coord(x,y) { this.x = x; this.y = y }},
          
        last:  {x : 0, y : 0, set from(src) { this.x = src.x; this.y = src.y }},
          
        down : false,
          
        active : false,
          
        changed : false,
          
        set position(coord) {
          
            pointer.last.from = pointer.pos;
          
            pointer.pos.coord(coord.clientX- bounds.left + scrollX, coord.clientY - bounds.top + scrollY);
          
            pointer.delta.x = pointer.pos.x - pointer.last.x;
          
            pointer.delta.y = pointer.pos.y - pointer.last.y;
          
        },
          
        set target(element){
          
            if(!element){
          
                types.names.forEach(event => removeEventListener(event, events) );
          
                currentTarget = undefined;
          
                pointer.active = false;
          
            }else {
          
                if (!currentTarget) { types.names.forEach(event => addEventListener(event, events) ) }
          
                currentTarget = element;
          
                bounds = element.getBoundingClientRect()
          
                pointer.active = true;
          
            }
          
            pointer.down = false;
          
            pointer.changed = true;
          
        }
          
    }
          
    const events = event => {
          
       // if (event.target === currentTarget) {
          
            const type = types[event.type.substring(5)];
          
            pointer.position = types[event.type.substring(0,5)] === types.touch ? event.touches[0] : event;
          
            if (type === types.down) {  pointer.down = true }
          
            else if (type === types.up) { pointer.down = false }
          
            pointer.changed = true;
          
            event.preventDefault();
          
      //  }
          
    }
          
    pointer.target = target;
          
    return pointer;
          
}
          

          

          
const rendering = (()=> {
          
    requestAnimationFrame(mainLoop);
          
    const canvas = document.querySelector('canvas');
          
    const ctx = canvas.getContext('2d');
          
    const pointer = createPointer(canvas);
          
    var update = false;
          
    
          
    function as(src) {  this.x = src.x; this.y = src.y }
          
    const drag = {
          
        active : false,
          
        start : {x : 0, y : 0, as},
          
        end : {x : 0, y : 0, as},
          
        draw() {
          
            ctx.fillStyle = "red";
          
            ctx.fillRect(
          
                Math.min(drag.start.x, drag.end.x), Math.min(drag.start.y, drag.end.y),
          
                Math.abs(drag.start.x - drag.end.x), Math.abs(drag.start.y - drag.end.y),
          
            )
          
        }
          
    }
          
    
          
    function checkPointer() {
          
        if (pointer.changed) {
          
            if (pointer.down) {
          
                if (!drag.active) {
          
                    drag.start.as(pointer.pos);
          
                    drag.active = true;
          
                }
          
                drag.end.as(pointer.pos);
          
                update = true;
          
            } else if (drag.active) {
          
                drag.end.as(pointer.pos);
          
                drag.active = false;
          
                update = true;
          
            }
          
            pointer.changed = false;
          
        }
          
    }
          
    
          
    function mainLoop(time) {
          
        checkPointer();
          
        if (update) {
          
            ctx.clearRect(0,0,canvas.width,canvas.height);
          
            drag.draw();
          
            update = false;
          
        }
          
        requestAnimationFrame(mainLoop);
          
    }
          
})();

          <canvas width="400" height="400" style="border: 2px solid #888"></canvas>






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Aug 21 at 15:27

























          answered Aug 21 at 14:08









          Blindman67

          6,5241521




          6,5241521












          • Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
            – Máté Safranka
            Aug 21 at 14:27










          • @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
            – Blindman67
            Aug 21 at 15:24


















          • Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
            – Máté Safranka
            Aug 21 at 14:27










          • @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
            – Blindman67
            Aug 21 at 15:24
















          Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
          – Máté Safranka
          Aug 21 at 14:27




          Just a quick reply at first glance: "Mouse events on a element have the annoying habit of only hearing events while the mouse is over the element." -- That's actually why I used window.addEventListener, to capture the move/up/cancel events at the highest stage of propagation. document can still be a problem if the page doesn't fill the whole window. I'll look through your example in more detail when I'm not on my phone. Thanks for your answer!
          – Máté Safranka
          Aug 21 at 14:27












          @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
          – Blindman67
          Aug 21 at 15:24




          @MátéSafranka You are absolutely correct, I ran you code and at the time forgot that the snippets messed with the mouse event, and I just presumed. Will change the answer.
          – Blindman67
          Aug 21 at 15:24


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f202110%2fthrottle-redraw-requests-fired-from-pointer-events%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          -

          Popular posts from this blog

          Morgemoulin

          Image
          Morgemoulin — miejscowość i gmina — Państwo   Francja Region Grand Est Departament Moza Okręg Verdun Kod INSEE 55357 Powierzchnia 6,82 km² Populacja  (1990) • liczba ludności 75 • gęstość 11 os./km² Kod pocztowy 55400 Położenie na mapie Francji Morgemoulin 49°14′N   5°35′E / 49,233333   5,583333 Portal Francja Morgemoulin – miejscowość i gmina we Francji, w regionie Grand Est, w departamencie Moza. Według danych na rok 1990 gminę zamieszkiwało 75 osób, a gęstość zaludnienia wynosiła 11 osób/km² (wśród 2335 gmin Lotaryngii Morgemoulin plasuje się na 970. miejscu pod względem liczby ludności, natomiast pod względem powierzchni na miejscu 848.). Bibliografia | Francuski urząd statystyczny ( fr. ) . p   •   d   •   e Gminy okręgu Verdun Abaucourt-Hautecourt • Aincreville • Ambly-sur-Meuse • Amel-sur-l'Étang • Ancemont • Arrancy-sur-Crusne • Aubréville • Autré...
          Read more

          Scott Moir

          Image
          Scott Moir Tessa Virtue i Scott Moir w 2016 r. Reprezentacja   Kanada Data i miejsce urodzenia 2 września 1987 London Wzrost 180 cm Konkurencja Pary taneczne Partner sportowy Tessa Virtue Trener Marie-France Dubreuil, Patrice Lauzon, Romain Haguenauer Poprzednio: Marina Zujewa, Oleg Epstein, Igor Szpilband, Johnny Johns, Carol Moir, Paul MacIntosh, Suzanne Killing Klub Montreal International School of Skating Poprzednio: Arctic Edge FSC Ilderton Skating Club Lokalizacja treningowa Montreal Poprzednio: Canton Kitchener Rekordy życiowe ISU przed sezonem 2018/2019 Nota łączna 206,07 Igrzyska Olimpijskie 2018 Taniec krótki 83,67 Igrzyska Olimpijskie 2018 Taniec dowolny 122,40 Igrzyska Olimpijskie 2018 Dorobek medalowy Reprezentacja   Kanada Igrzyska olimpijskie Złoto Vancouver 2010 pary taneczne Złoto Pjongczang 2018 pary taneczne Złoto Pjongczang 2018 drużynowo Srebro S...
          Read more

          Souastre

          Image
          Souastre — miejscowość i gmina — Herb Państwo   Francja Region Hauts-de-France Departament Pas-de-Calais Okręg Arras Kod INSEE 62800 Powierzchnia 7,18 km² Populacja  (1990) • liczba ludności 352 • gęstość 49 os./km² Kod pocztowy 62111 Położenie na mapie Francji Souastre 50°09′N   2°34′E / 50,150000   2,566667 Portal Francja Souastre – miejscowość i gmina we Francji, w regionie Hauts-de-France, w departamencie Pas-de-Calais. Według danych na rok 1990 gminę zamieszkiwały 352 osoby, a gęstość zaludnienia wynosiła 49 osób/km² (wśród 1549 gmin regionu Nord-Pas-de-Calais Souastre plasuje się na 887. miejscu pod względem liczby ludności, natomiast pod względem powierzchni na miejscu 507.). Bibliografia | Francuski urząd statystyczny ( fr. ) . p   •   d   •   e Gminy okręgu Arras Ablain-Saint-Nazaire Ablainzevelle Acheville Achicourt Achiet-le-Grand Achiet-le-Pe...
          Read more