static/js/pages.js

class Pages {
  constructor() {
    this.pages = [{}]; // Initially one empty page
    this.currentPage = 0;
    this.drawing = false; // Whether the user is currently drawing
    this.lastX = 0;
    this.lastY = 0;
    this.ctx = null; // Canvas context
    this.setupControls();
    this.setupCanvas();
    this.setupColorPicker();
    this.setupBrushSize();
  }

  getAllPages() {
    return this.pages; // Simply return all pages in the array
  }

  setPageContent(states) {
    const currentPageData = this.pages[this.currentPage];
    if (states.length > 0) {
      currentPageData.drawing = states[states.length - 1].imageData;  // Store only the latest state
    }
  }

  setupControls() {
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const pageInfo = document.getElementById('pageInfo');

    prevBtn.addEventListener('click', () => this.previousPage());
    nextBtn.addEventListener('click', () => this.nextPage());

    this.updatePageInfo();
  }

  setupCanvas() {
    const canvas = document.getElementById('whiteboard');
    this.ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth - 40;
    canvas.height = window.innerHeight - 100;
    this.clearCanvas();

    // Event listeners for drawing
    canvas.addEventListener('mousedown', (e) => this.startDrawing(e));
    canvas.addEventListener('mousemove', (e) => this.draw(e));
    canvas.addEventListener('mouseup', () => this.stopDrawing());
    canvas.addEventListener('mouseout', () => this.stopDrawing());
  }

  getPageContent() {
    return this.pages[this.currentPage].drawing;  // Return the latest drawing state (imageData)
  }

  startDrawing(e) {
    this.drawing = true;
    const mousePos = getMousePos(this.ctx.canvas, e);
    this.lastX = mousePos.x;
    this.lastY = mousePos.y;
  }

  draw(e) {
    if (!this.drawing) return;
    const mousePos = getMousePos(this.ctx.canvas, e);
    this.ctx.beginPath();
    this.ctx.moveTo(this.lastX, this.lastY);
    this.ctx.lineTo(mousePos.x, mousePos.y);
    this.ctx.strokeStyle = this.pages[this.currentPage].color || '#000000'; // Default black if no color set
    this.ctx.lineWidth = this.pages[this.currentPage].brushSize || 2; // Default brush size
    this.ctx.stroke();
    this.lastX = mousePos.x;
    this.lastY = mousePos.y;
  }

  stopDrawing() {
    this.drawing = false;
  }

  setupColorPicker() {
    const colorPicker = document.getElementById('colorPicker');
    colorPicker.addEventListener('input', (event) => {
      this.pages[this.currentPage].color = event.target.value; // Store color for current page
    });
  }

  setupBrushSize() {
    const brushSizeInput = document.getElementById('brushSize');
    brushSizeInput.addEventListener('input', (event) => {
      this.pages[this.currentPage].brushSize = event.target.value; // Store brush size for current page
    });
  }

  getCurrentPage() {
    return this.currentPage;
  }

  getPageCount() {
    return this.pages.length;
  }

  addPage() {
    this.pages.push({}); // Add a new empty page
    this.currentPage = this.pages.length - 1;
    this.clearCanvas(); // Clear the canvas for the new page
    this.updatePageInfo();
  }

  previousPage() {
    if (this.currentPage > 0) {
      this.pages[this.currentPage].drawing = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); // Save current page's content
  
      this.currentPage--;
      this.loadPageData(); // Load the content of the previous page
      this.updatePageInfo();
    }
  }
  
  nextPage() {
    if (this.pages[this.currentPage]) {
      // Save content of current page to its storage
      this.pages[this.currentPage].drawing = this.ctx.getImageData(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
    }
  
    // Add new page and clear canvas
    if (this.pages[this.currentPage].drawing !== null) {
      // Add new page only if current page is not empty
      this.pages.push({ drawing: null });
      this.currentPage++;
    }
    
    this.clearCanvas(); // Clear the canvas for the new page
    this.loadPageData(); // Load the newly added page's data
    this.updatePageInfo();
  }

  updatePageInfo() {
    const pageInfo = document.getElementById('pageInfo');
    pageInfo.textContent = `Page ${this.currentPage + 1}`;
  }

  clearCanvas() {
    this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
  }

  loadPageData() {
    const pageData = this.pages[this.currentPage];
    
    // If there is saved content for this page, restore it
    if (pageData.drawing) {
      this.ctx.putImageData(pageData.drawing, 0, 0);
    } else {
      this.clearCanvas(); // If no content, clear canvas (empty page)
    }
    
    // You can add any additional settings here (color picker, brush size, etc.)
    if (pageData.color) {
      document.getElementById('colorPicker').value = pageData.color;
    }
    if (pageData.brushSize) {
      document.getElementById('brushSize').value = pageData.brushSize;
    }
  }
}

function getMousePos(canvas, evt) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top,
  };

}