hippie/source/code/_ui.js

// Creates a div element which is draggable
class NewDiv {
  constructor(x, y, width, height, backgroundColor) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.backgroundColor = backgroundColor;
    this.element = null;
  }

  // Create the div element
  createDiv() {
    this.element = document.createElement('div');
    this.element.style.position = 'absolute';
    this.element.style.left = `${this.x}px`;
    this.element.style.top = `${this.y}px`;
    this.element.style.width = `${this.width}px`;
    this.element.style.height = `${this.height}px`;
    this.element.style.background = this.backgroundColor;
    this.element.style.cursor = 'move';

    // Add event listeners for dragging
    let isDown = false;
    let offset = [0, 0];

    this
      .element
      .addEventListener('mousedown', (event) => {
        if (event.button === 0) { // Left mouse button
          isDown = true;
          offset = [
            this.element.offsetLeft - event.clientX,
            this.element.offsetTop - event.clientY
          ];
        }
      });

    document.addEventListener('mouseup', () => {
      isDown = false;
    });

    document.addEventListener('mousemove', (event) => {
      if (isDown) {
        const maxX = window.innerWidth - this.element.offsetWidth;
        const maxY = window.innerHeight - this.element.offsetHeight;
        let x = event.clientX + offset[0];
        let y = event.clientY + offset[1];

        // Boundary checks
        if (x < 0)
          x = 0;
        if (y < 0)
          y = 0;
        if (x > maxX)
          x = maxX;
        if (y > maxY)
          y = maxY;

        this.element.style.left = `${x}px`;
        this.element.style.top = `${y}px`;
      }
    });

    // Save position and size
    const saveData = () => {
      const data = {
        x: this.element.offsetLeft,
        y: this.element.offsetTop,
        width: this.element.offsetWidth,
        height: this.element.offsetHeight
      };
      // Save data to local storage or a database
      localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
    };

    // Load saved data
    const loadData = () => {
      const data = localStorage.getItem(`divData${this.element.id}`);
      if (data) {
        const parsedData = JSON.parse(data);
        this.element.style.left = `${parsedData.x}px`;
        this.element.style.top = `${parsedData.y}px`;
        this.element.style.width = `${parsedData.width}px`;
        this.element.style.height = `${parsedData.height}px`;
      }
    };

    // Call the save function when the user stops dragging
    document.addEventListener('mouseup', saveData);

    // Load saved data on page load
    loadData();
  }

  // Append the div to the space
  appendToFrame(space) {
    this.element.id = `newDiv${space.children.length}`;
    space.appendChild(this.element);
  }
}

// Function to generate a random color
function getRandomColor() {
  const letters = '0123456789ABCDEF';
  let color = '#';

  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }

  return color;
}