fix: correct safari bug

.babelrc

@@ -1,3 +0,0 @@
-{
-    "presets": ["env"]
-}

dist/frappe-gantt.js

@@ -281,7 +281,7 @@ class C {
       height: this.height,
       rx: this.corner_radius,
       ry: this.corner_radius,
-      class: "bar",
+      class: "bar" + (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !this.task.important ? " safari" : ""),
       append_to: this.bar_group
     }), S(this.$bar, "width", 0, this.width), this.invalid && this.$bar.classList.add("bar-invalid");
   }

index.html

@@ -31,7 +31,7 @@
             <h2 class="heading">
                 Interactive Gantt Chart entirely made in SVG!
             </h2>
-            <div class="gantt-target dark"></div>
+            <div class="gantt-target"></div>
         </div>
         <script type="module">
             import Gantt from "/dist/frappe-gantt.js";

src/bar.js

@@ -31,8 +31,8 @@ export default class Bar {
         this.width = this.gantt.options.column_width * this.duration;
         this.progress_width =
             this.gantt.options.column_width *
-                this.duration *
+            this.duration *
-                (this.task.progress / 100) || 0;
+            (this.task.progress / 100) || 0;
         this.group = createSVG('g', {
             class:
                 'bar-wrapper' +
@@ -72,8 +72,8 @@ export default class Bar {
         this.compute_expected_progress();
         this.expected_progress_width =
             this.gantt.options.column_width *
-                this.duration *
+            this.duration *
-                (this.expected_progress / 100) || 0;
+            (this.expected_progress / 100) || 0;
     }
 
     draw() {
@@ -92,6 +92,7 @@ export default class Bar {
     }
 
     draw_bar() {
+
         this.$bar = createSVG('rect', {
             x: this.x,
             y: this.y,
@@ -99,7 +100,7 @@ export default class Bar {
             height: this.height,
             rx: this.corner_radius,
             ry: this.corner_radius,
-            class: 'bar',
+            class: 'bar' + (/^((?!chrome|android).)*safari/i.test(navigator.userAgent) && !this.task.important ? ' safari' : ''),
             append_to: this.bar_group,
         });
 
@@ -267,16 +268,16 @@ export default class Bar {
 
             bar_progress.getEndX(),
             bar_progress.getY() +
-                bar_progress.getHeight() / 2 -
+            bar_progress.getHeight() / 2 -
-                icon_height / 2,
+            icon_height / 2,
 
             bar_progress.getEndX() + icon_width / 2,
             bar_progress.getY() + bar_progress.getHeight() / 2,
 
             bar_progress.getEndX(),
             bar_progress.getY() +
-                bar_progress.getHeight() / 2 +
+            bar_progress.getHeight() / 2 +
-                icon_height / 2,
+            icon_height / 2,
 
             bar_progress.getEndX() - icon_width / 2,
             bar_progress.getY() + bar_progress.getHeight() / 2,
@@ -304,12 +305,12 @@ export default class Bar {
             this.group,
             'mouseenter',
             (e) =>
-                (timeout = setTimeout(() => {
+            (timeout = setTimeout(() => {
-                    this.show_popup(e.offsetX);
+                this.show_popup(e.offsetX);
-                    document.querySelector(
+                document.querySelector(
-                        `#${task_id}-highlight`,
+                    `#${task_id}-highlight`,
-                    ).style.display = 'block';
+                ).style.display = 'block';
-                }, 200)),
+            }, 200)),
         );
 
         $.on(this.group, 'mouseleave', () => {
@@ -570,8 +571,8 @@ export default class Bar {
         this.$expected_bar_progress.setAttribute(
             'width',
             this.gantt.options.column_width *
-                this.duration *
+            this.duration *
-                (this.expected_progress / 100) || 0,
+            (this.expected_progress / 100) || 0,
         );
     }
 

src/gantt.css

@@ -74,7 +74,7 @@
     & .lower-text,
     & .upper-text {
         text-anchor: middle;
-        color: var(--text-light);
+        color: var(--text-dark);
     }
 
     & .upper-header {
@@ -270,7 +270,7 @@
 
     & .bar-wrapper {
         cursor: pointer;
-        outline: none;
+
 
         &.active {
             & .handle {
@@ -285,6 +285,10 @@
             border-radius: 3px;
         }
 
+        & .bar.safari {
+            outline: 1px solid black;
+        }
+
         &:hover {
             .bar {
                 transition: transform 0.3s ease;

vite.config.js

@@ -23,5 +23,6 @@ export default defineConfig({
             // preserveEntrySignatures: "allow-extension"
         },
     },
-    output: { interop: 'auto' }
+    output: { interop: 'auto' },
+    server: { watch: { include: ['dist/*', 'src/*'] } }
 });