fixed: Editor GUI Problems

fixed: README.md Docker installation
fixed: path for hacsfiles to local (no gzip anymore / caching)
fixed: removed unused stuff

README.md

@@ -23,6 +23,14 @@
 
 ### HACS Installation
 
+If you have [HACS](https://hacs.xyz) installed, you can add this repository to HACS as a custom repository.
+Otherwise you can easily install it
+
+```bash
+sudo docker exec -it [dockername] bash
+wget -O - https://get.hacs.xyz | bash -
+```
+
 1. **Add Repository**
 
    Click `HACS` -> `Three Dot Menu upper right` -> `Custom Repository`
@@ -34,26 +42,28 @@
 
 ### From GitHub
 
-1. **Clone the repository or download the JS file**
+1. **Clone the repository**
 
-   First, you need to download the JavaScript file `ha-vpd-chart.js` from GitHub or clone the entire repository.
+   Clone the repository to your local machine
 
-2. **Incorporate the file into Home Assistant**
 
-   Copy `ha-vpd-chart.js` into your `www` directory of Home Assistant, typically located at `<config>/www/`.
+2. **Incorporate the file into Home Assistant Docker**
+    1. Navigate to the directory that is mapped to `/config` in your Docker setup.
+    2. Create 2 new directory's named `www/ha-vpd-chart/` within `/config` folder.
+    3. Copy the contents of the `dist` directory from the repository into the `<config>/www/ha-vpd-chart/` directory.
 
-3. **Add the resource in Home Assistant**
 
-   Add the resource to your `configuration.yaml` or through the Home Assistant UI under `Configuration` -> `Lovelace Dashboards` -> `Resources`:
+3. **Add the resource in Home Assistant**
 
-    ```yaml
-    lovelace:
-      resources:
-        - url: /local/ha-vpd-chart.js
-          type: module
-    ```
+   Add the resource through the Home Assistant UI under `Configuration` -> `Lovelace Dashboards` -> `Resource`\
+   \
+   If you don't have the menu than go to `http://<your_homeassistant_instance:8123>/config/lovelace/resources`\
+   and add the following:\
+   \
+   url: `/local/ha-vpd-chart/ha-vpd-chart.js\`\
+   type: `module`
 
-   **Note:** After adding the resource, you may need to restart Home Assistant.
+**Note:** After adding the resource, you may need to restart Home Assistant.
 
 Follow the steps above to store the file locally and include it as a resource.
 

dist/bar.js

@@ -4,7 +4,7 @@ export const bar = {
             this.innerHTML = `
                 <ha-card class="vpd-bar-view">
                     <style>
-                         @import '/hacsfiles/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}'
+                         @import '/local/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}'
                     </style>
                     <div class="card-content"></div>
                     <div class="highlight mousePointer" style="opacity:0">

dist/chart.js

@@ -7,7 +7,7 @@ export const chart = {
         <ha-card>
             <div class="vpd-chart-view">
                 <style>
-                    @import '/hacsfiles/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}'
+                    @import '/local/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}'
                 </style>
                 <div id="vpd-card-container" class="vpd-card-container"></div>
                 <div id="ghostmap"></div>
@@ -123,13 +123,21 @@ export const chart = {
 
         this.buildMouseTooltip(event, humidity, temperature, vpd);
         if (!this.isPanning) return;
+        // pan the chart with mouse drag
+        this.content.style.cursor = 'grabbing';
+        let offsetX = event.movementX / this.zoomLevel;
+        let offsetY = event.movementY / this.zoomLevel;
+        this.content.scrollLeft -= offsetX;
+        this.content.scrollTop -= offsetY;
 
+
+        /*
         const offsetX = (event.clientX - rect.left) / this.zoomLevel;
         const offsetY = (event.clientY - rect.top) / this.zoomLevel;
         this.content.style.transformOrigin = `${offsetX}px ${offsetY}px`;
         this.sensordom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
         this.ghostmapDom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
-        this.mouseTooltip.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.mouseTooltip.style.transformOrigin = `${offsetX}px ${offsetY}px`;*/
     },
     positionTooltip(tooltip, percentageHumidity) {
         const containerWidth = this.content.offsetWidth;