time_table 0.1.5 → 0.1.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 37cadc0ccd49e70a955ee8a7ce0da2cec2dd07addc3753dbd0dc86254ddc502b
-  data.tar.gz: 597c585023837f77e79863fa2f8e0ebf0836463dfc6f67b95f7121511ec089e5
+  metadata.gz: ad81747930738c0300910d879c6501a22b748cabbd021b391d16740a8e3743a3
+  data.tar.gz: 3df16ab3010a7e728d42ca28aaddd4a5b83e3091aae029885f27880478815271
 SHA512:
-  metadata.gz: 017310be8ccce3c0b4d64ee97de60329515fb1e58a1d01d83f9d3eac3ac40b53b5bd40f6c301a5afe77815d9e0ffe249adfa23a84fafbbe2ec619acdfb7051ec
-  data.tar.gz: 210f906e47ce4d2ccb088c216e3b856bab10163439628e3ee74e7b1adc72c289ac59809f1ac4958f659b31c0334f21d0500737a24da62686d2b810264f863660
+  metadata.gz: 7d24f58faced0563345d0fb8d74dd06753bf9bf7624929d6603004a102d867fc366ed1d642f1ef7211cf07e82ed9a05b6ac8672a55fe6ff22b07fa5efbb85008
+  data.tar.gz: 3fc45b3a4bd35dd0602f973281a01962bd23883dbf13cd772c57428a24c7901a6dbb4b2beb4b6d5fbc40d96c55778a9f5e30011489113d33dd3629043e706972

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

@@ -6,7 +6,7 @@ import { application } from "./application"
 // import EngineController from "./engine_controller"
 // application.register("engine", EngineController)
 
-const controllers = ["time_table"];
+const controllers = ["timetable",];
 
 controllers.forEach((controller) => {
   import(`./${controller}_controller.js`).then(( { default: module }) => {

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

@@ -1,42 +1,29 @@
 import { Controller } from "@hotwired/stimulus"
+import ScrollFrame from "../helpers/scroll_frame.js"
+import TimeKeeper from "../helpers/time_keeper.js"
+import DragEventState from "../helpers/drag_event_state.js"
+import TimeTableRenderer from "../helpers/time_table_renderer.js"
 
-// 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.timeKeeper = new TimeKeeper({
+      start: new Date(this.element.dataset.timetableStartTime),
+      end: new Date(this.element.dataset.timetableEndTime),
+      scope: this.element.dataset.timetableScope,
+      scale: this.element.dataset.timetableScale,
+      clip: this.element.dataset.timetableClipSize
+    });
+
+    let topPadding = parseInt(window.getComputedStyle(this.element).paddingTop, 10);
+
+    this.scrollFrame = new ScrollFrame(this.element, { origin: topPadding });
+
+    this.dragEvent = null;
 
     this.eventTargets.forEach((event) => {
-      this.#setSpecialClasses(event);
+      TimeTableRenderer.setSpecialClasses(event);
     });
   }
 
@@ -44,155 +31,135 @@ export default class extends Controller {
     event.preventDefault();
     event.stopPropagation();
 
-    this.dragging = true;
+    console.log(event.params.dragEvent);
 
-    // this.dragEvent.reset();
+    if(event.params.dragEvent != "rescale" && this.element.dataset.timetableFrozenParam == "true") {
+      return;
+    }
 
-    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 = new DragEventState({
+      type: event.params.dragEvent,
+      scrollFrame: this.scrollFrame,
+      timeKeeper: this.timeKeeper,
+      target: event.currentTarget.closest(".event")
+    });
 
-    this.dragEvent.originFrameY = event.clientY - this.dragEvent.frame.top;
-    this.dragEvent.currentFrameY = this.dragEvent.originFrameY;
+    this.dragEvent.captureOriginSnapshot(event);
 
-    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;
+    if(this.dragEvent) {
 
-      this.#invokeDragMethodFor(this.dragEvent.type); // calls dragCreate, dragMove or dragResize
+      this.dragEvent.captureSnapshot(event);
+
+      // Calls dragResize, dragMove, dragCreate, etc.
+      this.#invokeDragMethodFor(this.dragEvent.type); 
 
       if(this.dragEvent.type != undefined && this.dragEvent.type != "rescale") {
-        this.checkScroll();
+        this.scrollFrame.checkForScroll(this.dragEvent.current.position, this.handleScroll.bind(this));
       }
     }
   }
 
+  stopDragEvent(event) {
+    event.preventDefault();
+
+    this.dragEvent = null;
+
+    this.scrollFrame.stopScrolling();
+    this.#removeDragEventListeners();
+  }
+
+
   //////////////////
   // 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";
+    let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.time.clipped);
+    let eventElement = TimeTableRenderer.createEventElement(timeBoundaries);
+
+    this.eventsListTarget.appendChild(eventElement);
+
+    this.dragEvent.shift({ type: "resize", target: eventElement });
+    this.handleOverlap(eventElement);
   }
 
   dragResize(event) {
-    let timeBoundaries = this.#timeBoundaries(this.dragEvent.currentScrollYTime.clipped, this.dragEvent.originEventStartTime.real);
-    this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
-  }
+    let timeBoundaries = this.timeKeeper.timeBoundaries(this.dragEvent.current.time.clipped, this.dragEvent.origin.target.startTime.real);
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.handleOverlap(this.dragEvent.target);
+  } 
 
   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 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);
+    let timeBoundaries = this.timeKeeper.timeBoundaries(updatedStartTime, updatedEndTime);
 
-    this.#updateEventDiv(this.dragEvent.target, timeBoundaries.start, timeBoundaries.end);
+    TimeTableRenderer.updateEventElement(this.dragEvent.target, timeBoundaries);
+    this.handleOverlap(this.dragEvent.target);
   }
 
   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)));
+    let delta = this.dragEvent.previous.position.scroll.y - this.dragEvent.current.position.scroll.y;
+    let newScale = Math.max(30, Math.min(300, this.timeKeeper.scale - (delta)));
     this.element.style.setProperty("--hour-scale", newScale);
-    let scaleChange = newScale / this.scale;
+    let scaleChange = newScale / this.timeKeeper.scale;
 
-    this.scrollHeight = this.element.scrollHeight - 20;
-    this.scale = newScale;
-    this.setClipSize(newScale);
+    this.timeKeeper.rescale(newScale);
 
     this.eventTargets.forEach((event) => {
       event.style.setProperty("height", `${event.offsetHeight * (scaleChange)}px`);
       event.style.setProperty("top", `${event.offsetTop * (scaleChange)}px`);
-      this.#setSpecialClasses(event);
+      TimeTableRenderer.setSpecialClasses(event);
     });
   }
 
+  handleOverlap(element) {
+    let eventTop = element.offsetTop;
+    let eventBottom = eventTop + element.offsetHeight;
+
+    this.eventTargets.forEach((event) => {
+      if(event != element) {
+        let top = event.offsetTop;
+        let bottom = top + event.offsetHeight;
+
+        if(eventTop >= top && eventBottom <= bottom) {
+          element.style.setProperty("left", "50px");
+          event.style.setProperty("right", "20px");
+        } else if(eventTop < bottom && eventBottom > top) {
+          element.style.setProperty("left", "50%");
+          event.style.setProperty("right", "50%");
+        } else {
+          element.style.setProperty("left", "50px");
+          event.style.setProperty("right", "20px");
+        }
+      }
+    });
+  }
+
+
+
   ////////////////////
   // 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();
+  handleScroll(status) {
+    if(status == "ABOVE") {
+      console.log("ABOVE");
+      this.insertTimestampAbove();
+    } else if (status == "BELOW") {
+      console.log("BELOW");
+      this.insertTimestampBelow();
     }
-  }
 
-  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();
-    }
+    this.drag(this.dragEvent.current.event);
   }
 
-  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() {
   }
@@ -200,172 +167,11 @@ export default class extends Controller {
   insertTimestampBelow() {
     // this.dragEvent.inserting = true;
     // Add 1 hour
-    let time = new Date(this.endTime.getTime());
+    let time = new Date(this.timeKeeper.endTime.getTime());
     time.setHours(time.getHours() + 1);
-    this.endTime = time;
-    let timestampDiv = this.timestamp(time);
-    console.log(timestampDiv);
+    this.timeKeeper.endTime = time;
+    let timestampDiv = TimeTableRenderer.timestamp(time);
     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)}`;
   }
 
   ////////////////
@@ -374,7 +180,7 @@ export default class extends Controller {
 
   #invokeDragMethodFor(type) {
     if(!type) {
-      // console.error("No drag type provided");
+      console.error("No drag type provided");
       return;
     }
     let capitalizedType = type.charAt(0).toUpperCase() + type.slice(1);
@@ -390,27 +196,6 @@ export default class extends Controller {
   // 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));
@@ -422,148 +207,4 @@ export default class extends Controller {
     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 
-//   }
-// }
+}