time_table 0.1.3 → 0.1.4

data/app/assets/javascript/time_table/controllers/time_table_controller_old.js

@@ -0,0 +1,569 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="dropdown"
+export default class extends Controller {
+  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp"]
+
+  // static SCOPE = {
+  //   days: Symbol("days"),
+  //   hours: Symbol("hours"),
+  //   minutes: Symbol("minutes"),
+  //   seconds: Symbol("seconds")
+  // }
+
+  static UNITS = {
+    hours: 3_600_000,
+    minutes: 60_000,
+    seconds: 1_000
+  }
+
+  connect() {
+    this.startTime = new Date(this.element.dataset.timetableStartTime);
+    this.endTime = new Date(this.element.dataset.timetableEndTime);
+    this.extendedStartTime = this.startTime;
+    this.extendedEndTime = this.endTime;
+    this.duration = (this.endTime - this.startTime) / 1000;
+    this.clipSize = this.element.dataset.timetableClipSize;
+    this.scrollHeight = this.element.scrollHeight - 20; // -20 because of the padding
+    this.dragging = false;
+    this.dragEvent = {};
+    this.scrollEvent = {};
+    // this.setScope(this.constructor.SCOPE.hours);
+    this.timeScope = this.constructor.UNITS.hours;
+    this.timeMetric = this.constructor.UNITS.minutes;
+    this.metricConversion = this.timeScope / this.timeMetric;
+
+    this.scale = 60;
+
+    this.eventTargets.forEach((event) => {
+      this.#setSpecialClasses(event);
+    });
+  }
+
+  startDragEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.dragging = true;
+
+    // this.dragEvent.reset();
+
+    this.dragEvent.type = event.params.dragEvent;
+    this.dragEvent.frame = this.element.getBoundingClientRect();
+    this.dragEvent.originScrollY = this.#relativeCursorPosition(event).y;
+    this.dragEvent.originScrollYTime = this.#timeAtPosition(this.dragEvent.originScrollY);
+    this.dragEvent.currentScrollY = this.dragEvent.originScrollY;
+    this.dragEvent.currentScrollYTime = this.dragEvent.originScrollYTime;
+
+    this.dragEvent.originFrameY = event.clientY - this.dragEvent.frame.top;
+    this.dragEvent.currentFrameY = this.dragEvent.originFrameY;
+
+    this.#setDragEventTarget(event.currentTarget.closest(".event"));
+    this.#setDragEventListeners();
+  }
+
+  stopDragEvent(event) {
+    event.preventDefault();
+
+    this.dragging = false;
+    this.dragEvent = {};
+
+    this.stopScroll();
+    this.#removeDragEventListeners();
+  }
+
+  drag(event) {
+    // this.dragging = true; // For test purposes only
+    if(this.dragging) {
+      this.dragEvent.frame = this.element.getBoundingClientRect();
+      this.dragEvent.previousScrollY = this.dragEvent.currentScrollY;
+      this.dragEvent.currentScrollY = this.#relativeCursorPosition(event).y; 
+      this.dragEvent.currentScrollYTime = this.#timeAtPosition(this.dragEvent.currentScrollY);
+      this.dragEvent.currentFrameY = event.clientY - this.dragEvent.frame.top;
+      this.dragEvent.event = event;
+
+      this.#invokeDragMethodFor(this.dragEvent.type); // calls dragCreate, dragMove or dragResize
+
+      if(this.dragEvent.type != undefined && this.dragEvent.type != "rescale") {
+        this.checkScroll();
+      }
+    }
+  }
+
+  //////////////////
+  // Drag Methods //
+  //////////////////
+
+  dragCreate(event) {
+    let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentScrollYTime.clipped, this.dragEvent.originScrollYTime.clipped);
+    let eventDiv = this.#createEventDiv(timeBoundaries.start, timeBoundaries.end);
+    this.#setDragEventTarget(eventDiv);
+    this.dragEvent.type = "resize";
+  }
+
+  dragResize(event) {
+    let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentScrollYTime.clipped, this.dragEvent.originEventStartTime.real);
+    this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
+  }
+
+  dragMove(event) {
+    let timeChange = (this.dragEvent.currentScrollYTime.clipped - this.dragEvent.originScrollYTime.clipped);
+    let updatedStartTime = new Date(this.dragEvent.originEventStartTime.real.getTime() + timeChange)
+    let updatedEndTime = new Date(this.dragEvent.originEventEndTime.real.getTime() + timeChange);
+
+    let timeBoundaries = this.#timeBoundaries(updatedStartTime, updatedEndTime);
+
+    this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
+  }
+
+  dragRescale(event) {
+    let delta = this.dragEvent.previousScrollY - this.dragEvent.currentScrollY;
+    // let currentScale = this.element.style.getPropertyValue("--hour-scale");
+    let newScale = Math.max(30, Math.min(300, this.scale - (delta)));
+    this.element.style.setProperty("--hour-scale", newScale);
+    let scaleChange = newScale / this.scale;
+
+    this.scrollHeight = this.element.scrollHeight - 20;
+    this.scale = newScale;
+    this.setClipSize(newScale);
+
+    this.eventTargets.forEach((event) => {
+      event.style.setProperty("height", `${event.offsetHeight * (scaleChange)}px`);
+      event.style.setProperty("top", `${event.offsetTop * (scaleChange)}px`);
+      this.#setSpecialClasses(event);
+    });
+  }
+
+  ////////////////////
+  // Scroll Methods //
+  ////////////////////
+
+  checkScroll() {
+    // TODO - Refactor
+    if(this.dragEvent.currentFrameY < 30) {
+      let distance = Math.abs(this.dragEvent.currentFrameY - 30);
+      let direction = -1;
+      this.setScroll(distance, direction);
+    } else if (this.dragEvent.currentFrameY > this.dragEvent.frame.height - 30) {
+      let distance = Math.abs(this.dragEvent.currentFrameY - (this.dragEvent.frame.height - 30));
+      let direction = +1;
+      this.setScroll(distance, direction);
+    } else {
+      this.stopScroll();
+    }
+  }
+
+  static SCROLL_SPEEDS = [
+    { max: 30, speed: 1 },
+    { max: 50, speed: 2 },
+    { max: 100, speed: 3 },
+    { max: 150, speed: 5 }, 
+    { max: 250, speed: 10 },
+    { max: Infinity, speed: 15}
+  ]
+
+  setScroll(distance, direction) {
+    this.scrollEvent.step = (this.constructor.SCROLL_SPEEDS.find(range => distance < range.max)?.speed || 10) * direction;
+
+    // if(distance < 30) {
+    //   this.scrollEvent.step = 1 * direction;
+    // } else if(distance < 50) {
+    //   this.scrollEvent.step = 2 * direction;
+    // } else if(distance < 70) {
+    //   this.scrollEvent.step = 3 * direction;
+    // }
+
+    if(!this.scrollEvent.timeout) {
+      this.scroll();
+    }
+  }
+
+  scroll() {
+    this.scrollEvent.timeout = setTimeout(() => {
+      this.element.scrollTop += this.scrollEvent.step;
+      if(this.element.scrollTop == 0) {
+        this.insertTimestampAbove();
+      }
+
+      if(this.element.scrollTop + this.element.clientHeight >= this.scrollHeight) {
+        this.insertTimestampBelow();
+      }
+
+      this.scroll();
+      this.drag(this.dragEvent.event);
+    }, 1);
+  }
+
+  insertTimestampAbove() {
+  }
+
+  insertTimestampBelow() {
+    // this.dragEvent.inserting = true;
+    // Add 1 hour
+    let time = new Date(this.endTime.getTime());
+    time.setHours(time.getHours() + 1);
+    this.endTime = time;
+    let timestampDiv = this.timestamp(time);
+    console.log(timestampDiv);
+    this.element.querySelector(".timestamps").appendChild(timestampDiv);
+    this.scrollHeight = this.element.scrollHeight - 20;
+  }
+
+  timestamp(time) {
+    let timestampDiv = document.createElement("div");
+    timestampDiv.classList.add("timestamp");
+    timestampDiv.classList.add("out-of-bounds");
+    timestampDiv.setAttribute("data-time-table-target", "timestamp");
+    timestampDiv.setAttribute("data-action", "mousedown->time-table#startDragEvent");
+    timestampDiv.setAttribute("data-time-table-drag-event-param", "rescale");
+
+    timestampDiv.innerHTML = `
+      <div class="label" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="rescale">
+        ${this.#timeString(time, "short")}
+      </div>
+    `;
+
+    return timestampDiv;
+  }
+
+  stopScroll() {
+    if(this.scrollEvent.timeout) {
+      clearTimeout(this.scrollEvent.timeout);
+      this.scrollEvent = {};
+    }
+  }
+
+  /////////////////////
+  // Time & Position //
+  /////////////////////
+
+  #relativeCursorPosition(event) {
+    return { 
+      x: event.clientX - this.dragEvent.frame.left,
+      y: (event.clientY - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+    };
+  }
+
+  #relativeElementPosition(element) {
+    let rect = element.getBoundingClientRect();
+    return { 
+      x: rect.left - this.dragEvent.frame.left,
+      y: (rect.top - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+    };
+  }
+
+  #timeBoundaries(timeA, timeB) {
+    let startTime = new Date(Math.min(timeA, timeB));
+    let endTime = new Date(Math.max(timeA, timeB));
+
+    if (endTime - startTime < this.clipSize * 60 * 1000) {
+      endTime = new Date(startTime.getTime() + (this.clipSize * 60 * 1000));
+    }
+
+    return { start: startTime, end: endTime };
+  }
+
+  #oldTimeAtPosition(y) {
+    let realSecond = ((y / this.scrollHeight) * this.duration) + 1;
+    let clippedSecond = (Math.floor((realSecond / 60).toFixed(0) / this.clipSize) * this.clipSize) * 60;
+
+    // No need for seconds and minutes, should convert to one unit only, probably seconds or milliseconds
+    return {
+      real: new Date(this.startTime.getTime() + (realSecond * 1000)), // For some reason 1 second is added to real each time you change it.
+      clipped: new Date(this.startTime.getTime() + (clippedSecond * 1000)),
+    }
+  }
+
+  #timeAtPosition(y) {
+    let scopeOrdinal = Math.trunc(y / this.scale); // Eg "Hours from start"
+    let positionInScope = (y % this.scale) / this.scale;
+    let scopeMeasure = Math.trunc(positionInScope * this.metricConversion)
+    let clippedScopeMeasure = Math.floor(scopeMeasure / this.clipSize) * this.clipSize;
+    let millisecondsFromStart = (scopeOrdinal * this.timeScope) + (scopeMeasure * this.timeMetric);
+    let clippedMillisecondsFromStart = (scopeOrdinal * this.timeScope) + (clippedScopeMeasure * this.timeMetric);
+
+    return {
+      real: new Date(this.startTime.getTime() + millisecondsFromStart), // For some reason 1 second is added to real each time you change it.
+      clipped: new Date(this.startTime.getTime() + clippedMillisecondsFromStart),
+    }
+  }
+
+  #positionOfTime(time) {
+    let timeFromStart = time - this.startTime;
+    let scopeFromStart = Math.floor(timeFromStart / this.timeScope);
+    let metricFromScope = Math.floor((timeFromStart % this.timeScope) / this.timeMetric);
+    let pixelsFromStart = (scopeFromStart * this.scale) + (metricFromScope * this.scale / this.metricConversion);
+    return pixelsFromStart;
+  }
+  
+  #oldPositionOfTime(time) {
+    let positionInDuration = (time - this.startTime) / (this.endTime - this.startTime + 1000);
+    let positionInCanvas = (positionInDuration * this.scrollHeight)
+    return positionInCanvas;
+  }
+
+  /////////////////////////////////////////
+  // Event Methods                       //
+  // (eventually switch to use template) //
+  /////////////////////////////////////////
+
+  #createEventDiv(startTime, endTime){
+    const eventDiv = document.createElement("div");
+
+    eventDiv.classList.add("event");
+    eventDiv.setAttribute("data-time-table-target", "event");
+    eventDiv.setAttribute("data-action", "mousedown->time-table#startDragEvent");
+    eventDiv.setAttribute("data-time-table-drag-event-param", "move");
+
+    eventDiv.innerHTML = `
+      <div class="event-name"><span style="font-weight: 400; color: gray;">(No Title)</span></div>
+      <div class="event-time" data-action="mousedown->time-table#startDragEvent" data-time-table-drag-event-param="resize">
+        ${ this.#durationString(startTime, endTime) }
+      </div>
+    `;
+
+    this.#updateEventDiv(eventDiv, startTime, endTime);
+    this.eventsListTarget.appendChild(eventDiv);
+
+    return eventDiv;
+  }
+
+  #updateEventDiv(target, startTime, endTime) {
+    let startLocation = this.#positionOfTime(startTime);
+    let endLocation = this.#positionOfTime(endTime);
+
+    target.style.setProperty("top", `${startLocation}px`); 
+    target.style.setProperty("height", `${endLocation - startLocation}px`);
+
+    this.#setSpecialClasses(target);
+
+    target.querySelector(".event-time").innerHTML = this.#durationString(startTime, endTime);
+  }
+
+  #setSpecialClasses(eventDiv) {
+    eventDiv.classList.toggle("tiny", eventDiv.offsetHeight < 15);
+    eventDiv.classList.toggle("small", eventDiv.offsetHeight < 45);
+  }
+
+  /////////////////////
+  // Time Formatters //
+  /////////////////////
+
+  #timeString(date, format = "long") {
+    let hours = date.getUTCHours();
+    let minutes = date.getUTCMinutes();
+    let ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+
+    minutes = minutes < 10 ? '0' + minutes : minutes;
+    if(format == "long") {
+      return hours + ':' + minutes + ' ' + ampm;
+    } else if (format == "short") {
+      return hours + ampm
+    }
+  }
+
+  #durationString(startTime, endTime) {  
+    return `${this.#timeString(startTime)} - ${this.#timeString(endTime)}`;
+  }
+
+  ////////////////
+  // Invokation //
+  ////////////////
+
+  #invokeDragMethodFor(type) {
+    if(!type) {
+      // console.error("No drag type provided");
+      return;
+    }
+    let capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
+
+    if (this[`drag${capitalizedType}`]) {
+      this[`drag${capitalizedType}`]();
+    } else {
+      console.error(`No drag method found for type: ${type}`);
+    }
+  }
+
+  /////////////
+  // Helpers //
+  /////////////
+
+  static SCALE_RANGES = [
+    { max: 40, clipSize: 60 },
+    { max: 50, clipSize: 30 },
+    { max: 150, clipSize: 15 },
+    { max: 280, clipSize: 5 },
+    { max: Infinity, clipSize: 1}
+  ]
+
+  setClipSize(scale) {
+    this.clipSize = this.constructor.SCALE_RANGES.find(range => scale < range.max)?.clipSize || 15;
+  }
+
+  #setDragEventTarget(target) {
+    if(target) {
+      this.dragEvent.target = target;
+      this.dragEvent.originEventPosition = this.#relativeElementPosition(target);
+      this.dragEvent.originEventStartTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y);
+      this.dragEvent.originEventEndTime = this.#timeAtPosition(this.dragEvent.originEventPosition.y + target.offsetHeight);
+    }
+  }
+
+  #setDragEventListeners() {
+    document.addEventListener("mousemove", this.drag.bind(this));
+    document.addEventListener("mouseup", this.stopDragEvent.bind(this));
+    document.addEventListener("mouseleave", this.stopDragEvent.bind(this));
+  }
+
+  #removeDragEventListeners() {
+    document.removeEventListener("mousemove", this.drag.bind(this));
+    document.removeEventListener("mouseup", this.stopDragEvent.bind(this));
+    document.removeEventListener("mouseleave", this.stopDragEvent.bind(this));
+  }
+}
+
+// this.dragEvent = new DragEvent();
+// this.scrollFrame = new ScrollFrame(this.element);
+
+
+// class DragHandler {
+//   constructor() {
+//     this.dragging = false;
+//     this.dragEvent = {};
+//   }
+
+//   startDrag(event) {
+//     event.preventDefault();
+//     event.stopPropagation();
+
+//     this.dragging = true;
+//     this.dragEvent.reset();
+//     this.dragEvent.type = event.params.dragEvent;
+//   }
+
+//   stopDrag(event) {
+//     event.preventDefault();
+//     this.dragging = false;
+//     this.dragEvent = {};
+//   }
+
+// }
+
+
+// this.scrollFrame = new ScrollFrame(this.element);
+// this.scrollFrame.startBoundary = 0;
+
+// Major Purpose - Calculate position of of a coordinate on screen and convert it to position relative to frame and scroll of element.
+class ScrollFrame {
+  constructor(element, { origin = 0 }) {
+    this.element = element;
+    this.updateFrame();
+    this.origin = origin;
+    // this.endBoundary = this.element.scrollHeight;
+  }
+
+  get frame() {
+    return this.element.getBoundingClientRect();
+  }
+
+  updateFrame() {
+    // console.log("Updating frame");
+    this.frame = this.element.getBoundingClientRect();
+  }
+
+  relativeCursorPosition(event) {
+    return this.relativePosition(event.clientX, event.clientY);
+  }
+
+  relativePosition(x, y) {
+    return {
+      x: this.relativeXPosition(x),
+      y: this.relativeYPosition(y)
+    }
+  }
+
+  relativeScrollPosition(x, y) {
+    return {
+      x: this.relativeXScrollPosition(x),
+      y: this.relativeYScrollPosition(y)
+    }
+  }
+
+  relativeFramePosition(x, y) {
+    return {
+      x: this.relativeXFramePosition(x),
+      y: this.relativeYFramePosition(y)
+    }
+  }
+
+  relativeYPosition(y) {
+    return {
+      inFrame: this.relativeYFramePosition(y),
+      inScroll: this.relativeYScrollPosition(y)
+    }
+  }
+
+  relativeXPosition(x) {
+    return {
+      inFrame: this.relativeXFramePosition(x),
+      inScroll: this.relativeXScrollPosition(x)
+    }
+  }
+
+  relativeYFramePosition(y) {
+    return y - this.frame.top;
+  }
+
+  relativeYScrollPosition(y) {
+    return (this.relativeYFramePosition(y) - this.origin) + this.element.scrollTop;
+  }
+
+  relativeXFramePosition(x) {
+    return x - this.frame.left;
+  }
+
+  relativeXScrollPosition(x) {
+    return this.relativeXFramePosition(x) + this.element.scrollLeft;
+  }
+
+  #relativeYPosition(y) {
+    // return {
+    //   frame: 
+    // }
+  }
+
+  #relativePosition(x, y) {
+    // return 
+  }
+
+
+  #relativeCursorPosition(event) {
+    this.updateFrame();
+    return { 
+      x: event.clientX - this.dragEvent.frame.left,
+      y: (event.clientY - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+    };
+  }
+
+  #relativeElementPosition(element) {
+    this.updateFrame();
+    let rect = element.getBoundingClientRect();
+    return { 
+      x: rect.left - this.dragEvent.frame.left,
+      y: (rect.top - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+    };
+  }
+}
+
+// relativePosition = {
+//   frame: {
+//     x: event.clientX - this.dragEvent.frame.left,
+//     y: (event.clientY - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+//   },
+//   scroll: {
+//     x: event.clientX - this.dragEvent.frame.left,
+//     y: (event.clientY - this.dragEvent.frame.top - 20) + this.element.scrollTop 
+//   }
+// }