time_table 0.1.3 → 0.1.4

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

@@ -0,0 +1,350 @@
+import { Controller } from "@hotwired/stimulus"
+import ScrollFrame from "../helpers/scroll_frame.js"
+import TimeTableRenderer from "../helpers/time_table_renderer.js"
+
+export default class extends Controller {
+  static targets = ["canvas", "eventsList", "event", "eventName", "eventTime", "timestamp"]
+
+  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.clipSize = this.element.dataset.timetableClipSize;
+
+    let topPadding = parseInt(window.getComputedStyle(this.element).paddingTop, 10);
+
+    this.scrollHeight = this.element.scrollHeight - topPadding;
+    this.scrollFrame = new ScrollFrame(this.element, { origin: topPadding });
+
+    this.dragging = false;
+    this.dragEvent = {};
+    this.scrollEvent = {};
+
+    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) => {
+      TimeTableRenderer.setSpecialClasses(event);
+    });
+  }
+
+  dragScreenShot(event) {
+    let relativePosition = this.scrollFrame.relativeCursorPosition(event);
+    
+    return {
+      position: relativePosition,
+      time: this.#timeAtPosition(relativePosition.scroll.y),
+      target: this.targetScreenShot(this.dragEvent.target)
+    }
+  }
+
+  targetScreenShot(target) {
+    if(!target) {
+      return null;
+    }
+    
+    let relativePosition = this.scrollFrame.relativePosition(target.getBoundingClientRect().left, target.getBoundingClientRect().top);
+
+    let height = target.offsetHeight;
+
+    return {
+      height: height, 
+      position: relativePosition,
+      startTime: this.#timeAtPosition(relativePosition.scroll.y),
+      endTime: this.#timeAtPosition(relativePosition.scroll.y + height),
+    }
+  }
+
+  startDragEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.dragging = true;
+
+    this.dragEvent.type = event.params.dragEvent;
+    this.dragEvent.target = event.currentTarget.closest(".event");
+    this.dragEvent.origin = this.dragScreenShot(event);
+    this.dragEvent.current = this.dragEvent.origin;
+
+    // this.dragEventObject = new DragState({
+    //   type: event.params.dragEvent,
+    //   scrollFrame: this.scrollFrame, 
+    //   target: event.currentTarget.closest(".event"), 
+    //   event: event
+    // })
+
+    // console.log(this.dragEventObject);
+
+    // this.dragEvent = new DragEvent({
+    //  scrollFrame: this.scrollFrame, event: event, target: event.currentTarget.closest(".event")});
+
+
+    
+    this.#setDragEventListeners();
+  }
+
+  stopDragEvent(event) {
+    event.preventDefault();
+
+    this.dragging = false;
+    this.dragEvent = {};
+
+    this.stopScroll();
+    this.#removeDragEventListeners();
+  }
+
+  drag(event) {
+    if(this.dragging) {
+      this.dragEvent.previous = this.dragEvent.current;
+      this.dragEvent.current = this.dragScreenShot(event);
+      this.dragEvent.event = event;
+
+      // Calls dragResize, dragMove, dragCreate, etc.
+      this.#invokeDragMethodFor(this.dragEvent.type); 
+
+      if(this.dragEvent.type != undefined && this.dragEvent.type != "rescale") {
+        this.checkScroll();
+      }
+    }
+  }
+
+  //////////////////
+  // Drag Methods //
+  //////////////////
+
+  dragCreate(event) {
+    let timeBoundaries = this.#timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.time.clipped);
+    let eventElement = TimeTableRenderer.createEventElement(timeBoundaries);
+
+    this.eventsListTarget.appendChild(eventElement);
+    this.dragEvent.target = eventElement;
+    this.dragEvent.origin.target = this.targetScreenShot(eventElement);
+    this.dragEvent.current.target = this.dragEvent.origin.target;
+    this.dragEvent.type = "resize";
+  }
+
+  dragResize(event) {
+    let timeBoundaries = this.#timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.target.startTime.real);
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.dragEvent.current.target = this.targetScreenShot(this.dragEvent.target);
+  }
+
+  dragMove(event) {
+    let timeChange = (this.dragEvent.current.time.clipped - this.dragEvent.origin.time.clipped);
+    let updatedStartTime = new Date(this.dragEvent.origin.target.startTime.real.getTime() + timeChange)
+    let updatedEndTime = new Date(this.dragEvent.origin.target.endTime.real.getTime() + timeChange);
+
+    let timeBoundaries = this.#timeBoundaries(updatedStartTime, updatedEndTime);
+
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.dragEvent.current.target = this.targetScreenShot(this.dragEvent.target);
+  }
+
+  dragRescale(event) {
+    let delta = this.dragEvent.previous.position.scroll.y - this.dragEvent.current.position.scroll.y;
+    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`);
+      TimeTableRenderer.setSpecialClasses(event);
+    });
+  }
+
+  ////////////////////
+  // Scroll Methods //
+  ////////////////////
+
+  checkScroll() {
+    // TODO - Refactor
+    let currentFrameY = this.dragEvent.current.position.frame.y;
+    if(currentFrameY < 30) {
+      let distance = Math.abs(currentFrameY - 30);
+      let direction = -1;
+      this.setScroll(distance, direction);
+    } else if (currentFrameY > this.scrollFrame.frame.height - 30) {
+      let distance = Math.abs(currentFrameY - (this.scrollFrame.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(!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 = TimeTableRenderer.timestamp(time);
+    console.log(timestampDiv);
+    this.element.querySelector(".timestamps").appendChild(timestampDiv);
+    this.scrollHeight = this.element.scrollHeight - 20;
+  }
+
+  stopScroll() {
+    if(this.scrollEvent.timeout) {
+      clearTimeout(this.scrollEvent.timeout);
+      this.scrollEvent = {};
+    }
+  }
+
+  /////////////////////
+  // Time & Position //
+  /////////////////////
+
+  #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: { time: startTime, location: this.#positionOfTime(startTime) }, 
+      end: { time: endTime, location: this.#positionOfTime(endTime) }
+    };
+  }
+
+  #timeAtPosition(relativeScrollY) {
+    let scopeOrdinal = Math.trunc(relativeScrollY / this.scale); // Eg "Hours from start"
+    let positionInScope = (relativeScrollY % 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;
+  }
+
+
+  ////////////////
+  // 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 CLIP_SCALES = [
+    { 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.CLIP_SCALES.find(range => scale < range.max)?.clipSize || 15;
+  }
+
+  #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));
+  }
+}
+
+// class DragState {
+//   constructor({ type, scrollFrame, target, event }) {
+//     this.type = type;
+//     this.scrollFrame = scrollFrame;
+//     this.target = target;
+//     this.event = event;
+//     this.captureOriginSnapshot();
+//   }
+
+//   captureOriginSnapshot() {
+//     this.current = this.origin;
+//   }
+
+//   captureSnapshot() {
+//     this.previous = this.current;
+    
+//   }
+// }

data/app/assets/javascript/time_table/helpers/drag_event_state.js

@@ -0,0 +1,53 @@
+export default class DragEventState {
+  constructor({ type, scrollFrame, timeKeeper, target }) {
+    this.type = type;
+    this.scrollFrame = scrollFrame;
+    this.timeKeeper = timeKeeper;
+    this.target = target;
+  }
+
+  captureOriginSnapshot(event) {
+    this.origin = this.snapshot(event);
+    this.current = this.origin;
+  }
+
+  captureSnapshot(event) {
+    this.previous = this.current;
+    this.current = this.snapshot(event);
+  }
+
+  shift({ type, target }) {
+    this.type = type;
+    this.target = target;
+    this.origin.target = this.targetSnapshot(target);
+    this.current.target = this.targetSnapshot(target);
+  }
+
+  snapshot(event) {
+    let relativePosition = this.scrollFrame.relativeCursorPosition(event);
+    return {
+      event: event,
+      position: relativePosition,
+      time: this.timeKeeper.timeAtPosition(relativePosition.scroll.y),
+      target: this.targetSnapshot(this.target)
+    }
+  }
+
+  targetSnapshot(target) {
+    if(!target) {
+      return null;
+    }
+    
+    let targetRect = target.getBoundingClientRect();
+    let relativePosition = this.scrollFrame.relativePosition(targetRect.left, targetRect.top);
+    let height = target.offsetHeight;
+
+    return {
+      height: height,
+      boundaries: targetRect, 
+      position: relativePosition,
+      startTime: this.timeKeeper.timeAtPosition(relativePosition.scroll.y),
+      endTime: this.timeKeeper.timeAtPosition(relativePosition.scroll.y + height),
+    }
+  }
+}

data/app/assets/javascript/time_table/helpers/scroll_frame.js

@@ -0,0 +1,141 @@
+// Major Purpose - Calculate position of of a coordinate on screen and convert it to position relative to frame and scroll of element.
+export default class ScrollFrame {
+  constructor(element, { origin = 0 }) {
+    this.element = element;
+    this.origin = origin;
+    this.scrollEvent = {};
+    // this.endBoundary = this.element.scrollHeight;
+  }
+
+  get frame() {
+    return this.element.getBoundingClientRect();
+  }
+
+  checkForScroll(relativePosition, scrollHandler) {
+    let currentFrameY = relativePosition.frame.y;
+    this.scrollEvent.scrollHandler = scrollHandler;
+    if(currentFrameY < 30) {
+      this.scrollUp(currentFrameY);
+    } else if (currentFrameY > this.frame.height - 30) { 
+      this.scrollDown(currentFrameY);
+    } else {
+      this.stopScrolling();
+    }
+  }
+
+  scrollUp(currentFrameY) {
+    let distance = Math.abs(currentFrameY - 30);
+    // console.log("scrolling up", distance);
+    this.setScroll(distance, -1);
+  }
+
+  scrollDown(currentFrameY) {
+    let distance = Math.abs(currentFrameY - (this.frame.height - 30));
+    // console.log("scrolling down", distance);
+    this.setScroll(distance, +1);
+  }
+
+  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(!this.scrollEvent.timeout) {
+      this.scroll();
+    }
+  }
+
+  scroll() {
+    // TODO - Refactor to use boundaries from ScrollFrame
+    this.scrollEvent.timeout = setTimeout(() => {
+      
+
+      var status = "IN";
+      console.log(this.element.scrollTop + this.element.clientHeight + this.scrollEvent.step, this.element.scrollHeight);
+
+      if(this.element.scrollTop + this.scrollEvent.step <= 0) {
+        status = "ABOVE";
+      }
+
+      if(this.element.scrollTop + this.scrollEvent.step >= this.element.scrollHeight) {
+        status = "BELOW";
+      }
+
+      this.element.scrollTop += this.scrollEvent.step;
+
+      this.scrollEvent.scrollHandler(status);
+
+      this.scroll();
+      // this.drag(this.dragEvent.current.event);
+    }, 1);
+  }
+
+  stopScrolling() {
+    if(this.scrollEvent.timeout) {
+      clearTimeout(this.scrollEvent.timeout);
+      this.scrollEvent = {};
+    }
+  }
+
+  relativeCursorPosition(event) {
+    return this.relativePosition(event.clientX, event.clientY);
+  }
+
+  relativePosition(x, y) {
+    return {
+      frame: this.relativeFramePosition(x, y),
+      scroll: this.relativeScrollPosition(x, 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;
+  }
+}

data/app/assets/javascript/time_table/helpers/time_keeper.js

@@ -0,0 +1,98 @@
+export default class TimeKeeper {
+  static UNITS = {
+    hours: 3_600_000,
+    minutes: 60_000,
+    seconds: 1_000,
+    milliseconds: 1
+  }
+
+  static CLIP_SCALES = [
+    { max: 40, clipSize: 60 },
+    { max: 50, clipSize: 30 },
+    { max: 150, clipSize: 15 },
+    { max: 280, clipSize: 5 },
+    { max: Infinity, clipSize: 1}
+  ]
+
+  // static DEFAULT_SCOPES = {
+  //   hours: { 
+  //     unit: TimeKeeper.UNITS.hours,
+  //     metric: TimeKeeper.UNITS.minutes,
+  //     defaultScale: 60,
+  //     defaultClipSize: 15,
+  //     defaultClipScales: [
+  //       { max: 40, clipSize: 60 },
+  //       { max: 50, clipSize: 30 },
+  //       { max: 150, clipSize: 15 },
+  //       { max: 280, clipSize: 5 },
+  //       { max: Infinity, clipSize: 1}
+  //     ]
+  //   }
+  // }
+
+  constructor({ start, end, scope = "hours", scale = 60, clip = 15}) {
+    this.startTime = start;
+    this.endTime = end;
+    this.scope = this.constructor.UNITS[scope] || this.constructor.UNITS.hours;
+    this.metric = this.metricFor(scope);
+    this.conversion = this.scope / this.metric;
+    this.scale = scale;
+    this.clipSize = clip;
+    // this.extendedStartTime = this.timeKeeper.startTime;
+    // this.extendedEndTime = this.timeKeeper.endTime;
+  }
+
+  metricFor(scope) {
+    switch(scope) {
+      case "hours":
+        return TimeKeeper.UNITS.minutes;
+      case "minutes":
+        return TimeKeeper.UNITS.seconds;
+      case "seconds":
+        return TimeKeeper.UNITS.milliseconds;
+      default:
+        return TimeKeeper.UNITS.minutes;
+    }
+  }
+
+  rescale(scale) {
+    this.scale = scale;
+    this.clipSize = this.constructor.CLIP_SCALES.find(range => scale < range.max)?.clipSize || 15;
+  }
+
+  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: { time: startTime, location: this.positionOfTime(startTime) }, 
+      end: { time: endTime, location: this.positionOfTime(endTime) }
+    };
+  }
+
+  timeAtPosition(relativeScrollY) {
+    let scopeOrdinal = Math.trunc(relativeScrollY / this.scale); // Eg "Hours from start"
+    let positionInScope = (relativeScrollY % this.scale) / this.scale;
+    let scopeMeasure = Math.trunc(positionInScope * this.conversion)
+    let clippedScopeMeasure = Math.floor(scopeMeasure / this.clipSize) * this.clipSize;
+    let millisecondsFromStart = (scopeOrdinal * this.scope) + (scopeMeasure * this.metric);
+    let clippedMillisecondsFromStart = (scopeOrdinal * this.scope) + (clippedScopeMeasure * this.metric);
+
+    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.scope);
+    let metricFromScope = Math.floor((timeFromStart % this.scope) / this.metric);
+    let pixelsFromStart = (scopeFromStart * this.scale) + (metricFromScope * this.scale / this.conversion);
+    return pixelsFromStart;
+  }
+}