Space key and move tool #628

Activity

1. brauliodiez

   added this to QuickMockon Dec 23, 2024
2. brauliodiez

   moved this to Backlog in QuickMockon Dec 23, 2024
3. borxdev commented on Jan 2, 2025

   

   borxdev

   on Jan 2, 2025

   More actions

   Superb feature!
4. borxdev commented on Jan 10, 2025

   

   borxdev

   on Jan 10, 2025

   Last edited by borxdev

   More actions

   In plain JavaScript maybe it can be something like this:

   It would be necessary to disable the eventListeners that are listening and may conflict, such as the selection of elements...

   class CanvasPanner {
     constructor(container) {
       this.container = container;
       this.isDragging = false;
       this.isSpacePressed = false;
       this.startX = 0;
       this.startY = 0;
       this.scrollLeft = 0;
       this.scrollTop = 0;
   
       this.initEvents();
     }
   
     initEvents() {
       document.addEventListener('keydown', (e) => this.handleKeyDown(e));
       document.addEventListener('keyup', (e) => this.handleKeyUp(e));
   
       this.container.addEventListener('mousedown', (e) => this.startDrag(e));
       this.container.addEventListener('mousemove', (e) => this.doDrag(e));
       this.container.addEventListener('mouseup', () => this.stopDrag());
       this.container.addEventListener('mouseleave', () => this.stopDrag());
     }
   
     handleKeyDown(e) {
       if (e.code === 'Space') {
         e.preventDefault();
         if (!this.isSpacePressed) {
           this.isSpacePressed = true;
           this.container.style.cursor = 'grab';
         }
       }
     }
   
     handleKeyUp(e) {
       if (e.code === 'Space') {
         this.isSpacePressed = false;
         this.container.style.cursor = 'default';
       }
     }
   
     startDrag(e) {
       if (this.isSpacePressed) {
         e.preventDefault();
         this.isDragging = true;
         this.container.style.cursor = 'grabbing';
         this.startX = e.clientX;
         this.startY = e.clientY;
         this.scrollLeft = this.container.scrollLeft;
         this.scrollTop = this.container.scrollTop;
       }
     }
   
     doDrag(e) {
       if (this.isDragging) {
         const dx = e.clientX - this.startX;
         const dy = e.clientY - this.startY;
         this.container.scrollLeft = this.scrollLeft - dx;
         this.container.scrollTop = this.scrollTop - dy;
       }
     }
   
     stopDrag() {
       if (this.isDragging) {
         this.isDragging = false;
         this.container.style.cursor = 'grab';
       }
     }
   }
   
   
   const container = $0; // put the right selector here. Use $0 by selecting the container in the DOM to try with devtools.
   const canvasPanner = new CanvasPanner(container);