@taskctrl/canvas-timeline 0.6.0 → 0.7.0

package/dist/canvas-timeline.es.js

@@ -1,6 +1,6 @@
-import { jsx as le, jsxs as Ve, Fragment as Qt } from "react/jsx-runtime";
-import me, { useRef as U, useMemo as ee, useCallback as oe, useEffect as ce, forwardRef as Ci, useState as Ze, useImperativeHandle as Ei } from "react";
-import { flushSync as Hi } from "react-dom";
+import { jsx as le, jsxs as Ve, Fragment as ei } from "react/jsx-runtime";
+import me, { useRef as U, useMemo as ee, useCallback as oe, useEffect as ce, forwardRef as Ei, useState as Ze, useImperativeHandle as Hi } from "react";
+import { flushSync as Di } from "react-dom";
 import We from "dayjs";
 const He = {
   primary: "#269bf7",
@@ -143,7 +143,7 @@ class yt {
     return this.groupYOffsets[this.groupCount] ?? 0;
   }
 }
-class Di {
+class Ii {
   constructor() {
     Object.defineProperty(this, "root", {
       enumerable: !0,
@@ -188,7 +188,7 @@ class Di {
     }
   }
 }
-class Ii {
+class Ri {
   constructor(e, t) {
     Object.defineProperty(this, "lineHeight", {
       enumerable: !0,
@@ -281,7 +281,7 @@ class Ii {
     return ((this.groupMaxStack.get(e) ?? 0) + 1) * this.lineHeight;
   }
 }
-class Ri {
+class Oi {
   constructor() {
     Object.defineProperty(this, "parentToChildren", {
       enumerable: !0,
@@ -405,7 +405,7 @@ class Ri {
     }
   }
 }
-function Oi(i, e, t, n, o, d) {
+function Pi(i, e, t, n, o, d) {
   const { x: s, y: c, width: a, height: b } = t, H = d.primary;
   i.globalAlpha = 0.15, i.fillStyle = H, i.fillRect(s, c, a, b), i.globalAlpha = 1, i.strokeStyle = H, i.lineWidth = 1.5, i.strokeRect(s, c, a, b);
   const p = Math.min(b * 0.5, 6), f = c + b / 2;
@@ -450,6 +450,9 @@ function Gt(i, e, t, n = 6) {
   const o = t.timeToX(e.start_time), d = t.timeToX(e.end_time);
   return i - o <= n ? "left" : d - i <= n ? "right" : "body";
 }
+function Nt(i, e) {
+  return i.canResize ?? e;
+}
 function St(i, e, t) {
   const n = window.devicePixelRatio || 1, o = Math.round(e * n), d = Math.round(t * n);
   (i.width !== o || i.height !== d) && (i.width = o, i.height = d, i.style.width = `${e}px`, i.style.height = `${t}px`);
@@ -460,7 +463,7 @@ function Mt(i, e) {
   const t = window.devicePixelRatio || 1;
   i.clearRect(0, 0, e.width / t, e.height / t);
 }
-class Pi {
+class Xi {
   constructor(e) {
     Object.defineProperty(this, "dirty", {
       enumerable: !0,
@@ -500,7 +503,7 @@ var lt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : t
 function at(i) {
   return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
-var ei = { exports: {} };
+var ti = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
@@ -572,10 +575,10 @@ var ei = { exports: {} };
       };
     };
   });
-})(ei);
-var Xi = ei.exports;
-const $i = /* @__PURE__ */ at(Xi);
-var ti = { exports: {} };
+})(ti);
+var $i = ti.exports;
+const Fi = /* @__PURE__ */ at($i);
+var ii = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
@@ -635,15 +638,15 @@ var ti = { exports: {} };
       };
     };
   });
-})(ti);
-var Fi = ti.exports;
-const Yi = /* @__PURE__ */ at(Fi);
-We.extend($i);
-We.extend(Yi);
+})(ii);
+var Yi = ii.exports;
+const _i = /* @__PURE__ */ at(Yi);
+We.extend(Fi);
+We.extend(_i);
 function Te(i, e) {
   return e ? We(i).tz(e) : We(i);
 }
-class _i {
+class Wi {
   draw(e, t, n, o, d, s, c, a) {
     const { firstVisible: b, lastVisible: H } = t.getVisibleGroupRange();
     for (let y = b; y <= H; y++) {
@@ -705,8 +708,8 @@ class _i {
       }
   }
 }
-const Nt = '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-function ii(i, e) {
+const Zt = '500 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+function ni(i, e) {
   return {
     /**
      * Draws a filled rounded rectangle.
@@ -721,7 +724,7 @@ function ii(i, e) {
      * and appends '...' so it fits within maxWidth.
      */
     fillText(t, n, o, d) {
-      if (i.font = Nt, d !== void 0 && i.measureText(t).width > d) {
+      if (i.font = Zt, d !== void 0 && i.measureText(t).width > d) {
         let s = 0, c = t.length;
         for (; s < c; ) {
           const a = Math.ceil((s + c) / 2), b = t.slice(0, a) + "...";
@@ -770,13 +773,13 @@ function ii(i, e) {
      * Draws a pill-shaped badge with centered white text on a colored background.
      */
     badge(t, n, o, d) {
-      i.save(), i.font = Nt;
+      i.save(), i.font = Zt;
       const c = i.measureText(t).width, a = 8, H = 12 + 3 * 2, p = c + a * 2, f = H / 2;
       i.fillStyle = d, i.beginPath(), i.roundRect(n, o, p, H, f), i.fill(), i.fillStyle = "#ffffff", i.textAlign = "center", i.textBaseline = "middle", i.fillText(t, n + p / 2, o + H / 2), i.restore();
     }
   };
 }
-class Wi {
+class Bi {
   draw(e, t, n, o, d, s, c, a, b, H, p, f, M, T) {
     const h = (t.visibleTimeEnd - t.visibleTimeStart) * 0.1, E = t.visibleTimeStart - h, P = t.visibleTimeEnd + h, W = d.query(E, P), y = /* @__PURE__ */ new Map();
     for (let I = 0; I < n.length; I++)
@@ -801,7 +804,7 @@ class Wi {
         filtered: I.filtered !== !1
       };
       e.save();
-      const qe = ii(e, Me);
+      const qe = ni(e, Me);
       let De;
       M && (T != null && T.isParent(I.id)) ? De = M : a && (I.type === "control_area_group" || I.type === "construction_train") ? De = a : De = c, De(e, I, Me, Xe, qe), e.restore();
     }
@@ -841,7 +844,7 @@ class Wi {
     }
   }
 }
-class Bi {
+class Li {
   draw(e, t, n, o) {
     const { cursorX: d, snapX: s, markers: c, interaction: a } = o;
     if (c)
@@ -857,17 +860,17 @@ class Bi {
       }
     if (d != null && (e.strokeStyle = n.marker.cursor, e.lineWidth = 1, e.beginPath(), e.moveTo(d, 0), e.lineTo(d, t.canvasHeight), e.stroke()), s != null && (e.strokeStyle = n.primary, e.lineWidth = 1, e.setLineDash([4, 4]), e.beginPath(), e.moveTo(s, 0), e.lineTo(s, t.canvasHeight), e.stroke(), e.setLineDash([])), a) {
       a.groupChanged && a.targetGroupY !== void 0 && (e.fillStyle = "rgba(59, 130, 246, 0.08)", e.fillRect(0, a.targetGroupY, t.canvasWidth, t.lineHeight)), e.save(), e.globalAlpha = 0.5;
-      const b = ii(e, a.bounds);
+      const b = ni(e, a.bounds);
       a.renderer(e, a.item, a.bounds, { selected: !1, hovered: !1, dragging: !0, filtered: !0 }, b), e.restore();
     }
   }
 }
-const Zt = 120;
-function Li(i) {
+const Ut = 120;
+function zi(i) {
   let e = i.deltaY || i.deltaX;
-  return i.deltaMode === 1 ? e *= 15 : i.deltaMode === 2 && (e *= 800), Math.max(-Zt, Math.min(Zt, e));
+  return i.deltaMode === 1 ? e *= 15 : i.deltaMode === 2 && (e *= 800), Math.max(-Ut, Math.min(Ut, e));
 }
-class zi {
+class xi {
   constructor(e, t, n, o, d) {
     Object.defineProperty(this, "onZoom", {
       enumerable: !0,
@@ -900,15 +903,15 @@ class zi {
     this.visibleTimeStart = e, this.visibleTimeEnd = t;
   }
   handleWheelZoom(e, t) {
-    const n = Li(e), o = e.ctrlKey ? 10 : e.metaKey ? 3 : 1, d = n > 0 ? 1 + o * n / 500 : 1 / (1 + o * -n / 500), s = this.visibleTimeEnd - this.visibleTimeStart;
+    const n = zi(e), o = e.ctrlKey ? 10 : e.metaKey ? 3 : 1, d = n > 0 ? 1 + o * n / 500 : 1 / (1 + o * -n / 500), s = this.visibleTimeEnd - this.visibleTimeStart;
     let c = Math.round(s * d);
     c = Math.max(this.minZoom, Math.min(this.maxZoom, c));
     const a = Math.round(this.visibleTimeStart + (s - c) * t), b = a + c;
     this.onZoom(a, b);
   }
 }
-const xi = 4;
-class Ai {
+const Ai = 4;
+class ji {
   constructor(e) {
     Object.defineProperty(this, "state", {
       enumerable: !0,
@@ -941,7 +944,7 @@ class Ai {
     }, this.activated = !1;
   }
   update(e, t) {
-    this.state && (this.state.currentX = e, this.state.currentY = t, this.state.deltaX = e - this.state.startX, !this.activated && Math.abs(this.state.deltaX) >= xi && (this.activated = !0));
+    this.state && (this.state.currentX = e, this.state.currentY = t, this.state.deltaX = e - this.state.startX, !this.activated && Math.abs(this.state.deltaX) >= Ai && (this.activated = !0));
   }
   setCurrentGroup(e) {
     this.state && (this.state.currentGroup = e);
@@ -991,7 +994,7 @@ function st(i, e, t, n, o) {
   }
   return s <= t ? d : null;
 }
-var ni = { exports: {} };
+var ri = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
@@ -1017,10 +1020,10 @@ var ni = { exports: {} };
       };
     };
   });
-})(ni);
-var ji = ni.exports;
-const Gi = /* @__PURE__ */ at(ji), Ut = 200;
-function Vt({ groups: i, width: e, lineHeight: t, groupHeights: n, scrollTop: o, canvasHeight: d, theme: s, groupRenderer: c, onScroll: a }) {
+})(ri);
+var Gi = ri.exports;
+const Ni = /* @__PURE__ */ at(Gi), Vt = 200;
+function qt({ groups: i, width: e, lineHeight: t, groupHeights: n, scrollTop: o, canvasHeight: d, theme: s, groupRenderer: c, onScroll: a }) {
   var y;
   const b = U(null), H = U(!1), p = ee(() => {
     const D = new Array(i.length + 1);
@@ -1039,7 +1042,7 @@ function Vt({ groups: i, width: e, lineHeight: t, groupHeights: n, scrollTop: o,
       p[B + 1] > D ? $ = B : w = B + 1;
     }
     return w;
-  }, [i.length, p, f]), h = T(o - Ut), E = T(o + d + Ut), P = oe((D) => {
+  }, [i.length, p, f]), h = T(o - Vt), E = T(o + d + Vt), P = oe((D) => {
     H.current || a(D.currentTarget.scrollTop);
   }, [a]);
   ce(() => {
@@ -1075,21 +1078,21 @@ function Vt({ groups: i, width: e, lineHeight: t, groupHeights: n, scrollTop: o,
     backgroundColor: s.sidebar.bg
   }, children: le("div", { style: { height: f, position: "relative" }, children: W }) });
 }
-function Ni(i) {
+function Zi(i) {
   return null;
 }
-Ni.displayName = "TodayMarker";
-function qt(i) {
+Zi.displayName = "TodayMarker";
+function Kt(i) {
   return { date: Math.floor(Date.now() / 6e4) * 6e4, color: i.color ?? "#FD7171", width: i.width ?? 6, label: i.label };
 }
-function Zi(i) {
+function Ui(i) {
   return i.interval ?? 1e4;
 }
-function Ui(i) {
+function Vi(i) {
   return null;
 }
-Ui.displayName = "CustomMarker";
-function Kt(i) {
+Vi.displayName = "CustomMarker";
+function Jt(i) {
   return {
     date: i.date,
     color: i.color ?? "#3B82F6",
@@ -1097,8 +1100,8 @@ function Kt(i) {
     label: i.label
   };
 }
-We.extend(Gi);
-function Vi(i) {
+We.extend(Ni);
+function qi(i) {
   return i ? {
     ...He,
     ...i,
@@ -1110,20 +1113,20 @@ function Vi(i) {
     header: { ...He.header, ...i.header }
   } : He;
 }
-const Jt = 32, cn = me.memo(Ci(function(e, t) {
-  const { groups: n, items: o, defaultTimeStart: d, defaultTimeEnd: s, sidebarWidth: c, lineHeight: a, itemHeightRatio: b, stackItems: H, canMove: p, canChangeGroup: f, canResize: M, dragSnap: T, minZoom: h, maxZoom: E, theme: P, dayStyle: W, rowStyle: y, showCursorLine: D, itemRenderer: w, groupRenderer: $, sidebarGroupRenderer: B, dependencies: I, highlights: A, onItemClick: F, onItemDoubleClick: se, onItemContextMenu: K, onItemMove: te, onItemResize: be, moveResizeValidator: Se, onItemHover: Me, onCanvasDoubleClick: Xe, onCanvasContextMenu: qe, onTimeChange: De, onZoom: kt, selected: Ct = [], rightSidebarWidth: ut, rightSidebarGroupRenderer: Et, onReady: Ke, maxHeight: Be, timezone: Je, devBadge: oi, children: ke } = e, we = ee(() => Vi(P), [P]), Ht = oe((r, l) => {
+const Qt = 32, dn = me.memo(Ei(function(e, t) {
+  const { groups: n, items: o, defaultTimeStart: d, defaultTimeEnd: s, sidebarWidth: c, lineHeight: a, itemHeightRatio: b, stackItems: H, canMove: p, canChangeGroup: f, canResize: M, dragSnap: T, minZoom: h, maxZoom: E, theme: P, dayStyle: W, rowStyle: y, showCursorLine: D, itemRenderer: w, groupRenderer: $, sidebarGroupRenderer: B, dependencies: I, highlights: A, onItemClick: F, onItemDoubleClick: se, onItemContextMenu: K, onItemMove: te, onItemResize: be, moveResizeValidator: Se, onItemHover: Me, onCanvasDoubleClick: Xe, onCanvasContextMenu: qe, onTimeChange: De, onZoom: kt, selected: Ct = [], rightSidebarWidth: ut, rightSidebarGroupRenderer: Et, onReady: Ke, maxHeight: Be, timezone: Je, devBadge: si, children: ke } = e, we = ee(() => qi(P), [P]), Ht = oe((r, l) => {
     for (let m = 0; m < l.length; m++)
       if (l[m].id === r)
         return m;
     return 0;
-  }, []), si = Ct.join(","), ct = ee(() => Ct, [si]), Dt = U(null), It = U(null), Rt = U(null), Le = U(null), Ot = U(null), Pt = U(null), [li, ai] = Ze(800), [ui, ci] = Ze(null);
+  }, []), li = Ct.join(","), ct = ee(() => Ct, [li]), Dt = U(null), It = U(null), Rt = U(null), Le = U(null), Ot = U(null), Pt = U(null), [ai, ui] = Ze(800), [ci, di] = Ze(null);
   ce(() => {
     const r = Ot.current;
     if (!r)
       return;
     const l = new ResizeObserver((m) => {
       const g = m[0];
-      g && ai(g.contentRect.width);
+      g && ui(g.contentRect.width);
     });
     return l.observe(r), () => l.disconnect();
   }, []), ce(() => {
@@ -1132,20 +1135,20 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       return;
     const l = new ResizeObserver((m) => {
       const g = m[0];
-      g && ci(g.contentRect.height);
+      g && di(g.contentRect.height);
     });
     return l.observe(r), () => l.disconnect();
   }, [Be]);
-  const Ce = Math.max(0, li - c - (ut ?? 0)), Ie = ee(() => {
-    const r = new Ri();
+  const Ce = Math.max(0, ai - c - (ut ?? 0)), Ie = ee(() => {
+    const r = new Oi();
     return r.rebuild(o), r;
   }, [o]), dt = ee(() => {
-    const r = new Di();
+    const r = new Ii();
     return r.buildFromItems(o, (l) => Ie.getEffectiveSpan(l.id).start, (l) => Ie.getEffectiveSpan(l.id).end), r;
   }, [o, Ie]), ze = ee(() => {
-    const r = new Ii(a, b);
+    const r = new Ri(a, b);
     return r.computeLayout(o, H, Ie), r;
-  }, [o, a, b, H, Ie]), Re = ee(() => n.map((r) => ze.getGroupHeight(r.id)), [n, ze]), Qe = ee(() => Re.reduce((r, l) => r + l, 0), [Re]), Xt = typeof Be == "number" ? Be : ui, ye = Xt ? Math.min(Qe, Xt) : Qe, L = U(new yt({
+  }, [o, a, b, H, Ie]), Re = ee(() => n.map((r) => ze.getGroupHeight(r.id)), [n, ze]), Qe = ee(() => Re.reduce((r, l) => r + l, 0), [Re]), Xt = typeof Be == "number" ? Be : ci, ye = Xt ? Math.min(Qe, Xt) : Qe, L = U(new yt({
     visibleTimeStart: e.visibleTimeStart ?? d,
     visibleTimeEnd: e.visibleTimeEnd ?? s,
     canvasWidth: Ce,
@@ -1156,25 +1159,25 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     buffer: e.buffer ?? 3,
     scrollTop: 0,
     groupHeights: Re
-  })), ft = U(null), xe = U(void 0), ve = U(null), Oe = U(!1), $t = 4, [Ft, di] = Ze(e.visibleTimeStart ?? d), [Yt, fi] = Ze(e.visibleTimeEnd ?? s), [_t, et] = Ze(0), Ae = U(null), $e = oe(() => {
+  })), ft = U(null), xe = U(void 0), ve = U(null), Oe = U(!1), $t = 4, [Ft, fi] = Ze(e.visibleTimeStart ?? d), [Yt, hi] = Ze(e.visibleTimeEnd ?? s), [_t, et] = Ze(0), Ae = U(null), $e = oe(() => {
     const r = L.current;
-    di(r.visibleTimeStart), fi(r.visibleTimeEnd), et(r.scrollTop), Ae.current = null;
+    fi(r.visibleTimeStart), hi(r.visibleTimeEnd), et(r.scrollTop), Ae.current = null;
   }, []), ht = oe(() => {
-    Ae.current === null && (Ae.current = setTimeout($e, Jt));
+    Ae.current === null && (Ae.current = setTimeout($e, Qt));
   }, [$e]);
   ce(() => () => {
     Ae.current !== null && clearTimeout(Ae.current);
   }, []);
   const Wt = ee(() => e.summaryRenderer ? e.summaryRenderer : (r, l, m, g, u) => {
-    Oi(r, l, m, g, u, we);
-  }, [e.summaryRenderer, we]), Fe = ee(() => new _i(), []), Ye = ee(() => new Wi(), []), _e = ee(() => new Bi(), []), ie = ee(() => new Ai(T), [T]), tt = ee(() => {
+    Pi(r, l, m, g, u, we);
+  }, [e.summaryRenderer, we]), Fe = ee(() => new Wi(), []), Ye = ee(() => new Bi(), []), _e = ee(() => new Li(), []), ie = ee(() => new ji(T), [T]), tt = ee(() => {
     const r = [];
     return me.Children.forEach(ke, (l) => {
       var g;
       if (!me.isValidElement(l))
         return;
       const m = (g = l.type) == null ? void 0 : g.displayName;
-      m === "TodayMarker" ? r.push(qt(l.props)) : m === "CustomMarker" && r.push(Kt(l.props));
+      m === "TodayMarker" ? r.push(Kt(l.props)) : m === "CustomMarker" && r.push(Jt(l.props));
     }), r;
   }, [ke]), it = ee(() => tt.map((r) => `${r.date}|${r.color}|${r.width}|${r.label ?? ""}`).join(";"), [tt]), je = U(tt);
   je.current = tt;
@@ -1184,7 +1187,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       var g;
       if (!me.isValidElement(l))
         return;
-      ((g = l.type) == null ? void 0 : g.displayName) === "TodayMarker" && (r = Zi(l.props));
+      ((g = l.type) == null ? void 0 : g.displayName) === "TodayMarker" && (r = Ui(l.props));
     }), r;
   }, [ke]), x = U({
     groups: n,
@@ -1262,13 +1265,13 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     hierarchyEngine: Ie,
     timezone: Je
   };
-  const hi = oe(() => {
+  const mi = oe(() => {
     const r = Dt.current;
     if (!r)
       return;
     const l = x.current, m = St(r, l.canvasWidth, l.canvasHeight);
     Mt(m, r), Fe.draw(m, L.current, l.groups, l.theme, l.dayStyle, l.rowStyle, l.highlights, l.timezone);
-  }, [Fe]), mi = oe(() => {
+  }, [Fe]), gi = oe(() => {
     const r = It.current;
     if (!r)
       return;
@@ -1285,7 +1288,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     }
     const ne = m === "resize-right" ? r.end_time + k : r.start_time + k, z = Math.round(ne / u.dragSnap) * u.dragSnap;
     return g.timeToX(z);
-  }, []), gi = oe(() => {
+  }, []), pi = oe(() => {
     const r = Rt.current;
     if (!r)
       return;
@@ -1314,8 +1317,8 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       interaction: v
     });
   }, [_e, ie, Bt, Ht]), gt = U(null);
-  gt.current || (gt.current = new Pi((r) => {
-    r.grid && hi(), r.items && mi(), r.overlay && gi();
+  gt.current || (gt.current = new Xi((r) => {
+    r.grid && mi(), r.items && gi(), r.overlay && pi();
   }));
   const O = gt.current;
   ce(() => () => O.dispose(), [O]), ce(() => {
@@ -1328,7 +1331,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
         if (!me.isValidElement(m))
           return;
         const g = (u = m.type) == null ? void 0 : u.displayName;
-        g === "TodayMarker" ? l.push(qt(m.props)) : g === "CustomMarker" && l.push(Kt(m.props));
+        g === "TodayMarker" ? l.push(Kt(m.props)) : g === "CustomMarker" && l.push(Jt(m.props));
       }), je.current = l, O.markDirty("overlay");
     }, mt);
     return () => clearInterval(r);
@@ -1363,12 +1366,12 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       Ge.current = null;
       const l = L.current, m = x.current;
       r === "zoom" ? (g = m.onZoom) == null || g.call(m, l.visibleTimeStart, l.visibleTimeEnd) : (u = m.onTimeChange) == null || u.call(m, l.visibleTimeStart, l.visibleTimeEnd);
-    }, Jt));
+    }, Qt));
   }, []);
   ce(() => () => {
     Ge.current !== null && clearTimeout(Ge.current);
   }, []);
-  const rt = U(null), vt = ee(() => new zi((r, l) => {
+  const rt = U(null), vt = ee(() => new xi((r, l) => {
     var m;
     L.current.update({ visibleTimeStart: r, visibleTimeEnd: l }), (m = rt.current) == null || m.updateBounds(r, l), O.markAllDirty(), ht(), pt("zoom");
   }, d, s, h, E), []);
@@ -1379,7 +1382,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
   }, [O]), Ne = oe((r) => {
     var k, R, X;
     const l = L.current, m = l.canvasWidth / (l.visibleTimeEnd - l.visibleTimeStart), g = r / m, u = l.visibleTimeStart + g, v = l.visibleTimeEnd + g;
-    l.update({ visibleTimeStart: u, visibleTimeEnd: v }), (k = rt.current) == null || k.updateBounds(u, v), O.markAllDirty(), Hi(() => $e()), (X = (R = x.current).onTimeChange) == null || X.call(R, u, v);
+    l.update({ visibleTimeStart: u, visibleTimeEnd: v }), (k = rt.current) == null || k.updateBounds(u, v), O.markAllDirty(), Di(() => $e()), (X = (R = x.current).onTimeChange) == null || X.call(R, u, v);
   }, [O, $e]);
   ce(() => {
     const r = Le.current;
@@ -1427,7 +1430,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       r.removeEventListener("touchstart", g), r.removeEventListener("touchmove", u), r.removeEventListener("touchend", v);
     };
   }, [O, ht, pt]);
-  const pi = oe((r) => {
+  const vi = oe((r) => {
     var X;
     const l = r.currentTarget, m = l.getBoundingClientRect(), g = r.clientX - m.left, u = r.clientY - m.top;
     if (ft.current = g, ve.current) {
@@ -1452,19 +1455,19 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     x.current.showCursorLine && O.markDirty("overlay");
     const v = x.current, k = Ue(g, u, L.current, v.intervalTree, v.layoutEngine, v.groups), R = k == null ? void 0 : k.id;
     if (R !== xe.current && (xe.current = R, O.markDirty("items"), (X = v.onItemHover) == null || X.call(v, R ?? null, r.nativeEvent)), k) {
-      const Y = Gt(g, k, L.current), N = v.canResize;
+      const Y = Gt(g, k, L.current), N = Nt(k, v.canResize);
       Y === "left" && (N === "left" || N === "both") || Y === "right" && (N === "right" || N === "both") ? l.style.cursor = "col-resize" : v.canMove ? l.style.cursor = "grab" : l.style.cursor = "default";
     } else
       l.style.cursor = "default";
-  }, [ie, O, Ne, ot]), vi = oe((r) => {
+  }, [ie, O, Ne, ot]), bi = oe((r) => {
     const l = x.current, m = r.currentTarget.getBoundingClientRect(), g = r.clientX - m.left, u = r.clientY - m.top, v = Ue(g, u, L.current, l.intervalTree, l.layoutEngine, l.groups);
     if (!v) {
       ve.current = { startX: r.clientX, startY: r.clientY, lastX: r.clientX, lastY: r.clientY }, Oe.current = !1;
       return;
     }
-    const k = Gt(g, v, L.current), R = l.canResize;
+    const k = Gt(g, v, L.current), R = Nt(v, l.canResize);
     k === "left" && (R === "left" || R === "both") ? ie.startInteraction(v, "resize-left", g, u) : k === "right" && (R === "right" || R === "both") ? ie.startInteraction(v, "resize-right", g, u) : l.canMove && ie.startInteraction(v, "move", g, u);
-  }, [ie]), bi = oe((r) => {
+  }, [ie]), yi = oe((r) => {
     var k, R, X, Y, N, ne;
     const l = r.currentTarget;
     if (ve.current) {
@@ -1512,7 +1515,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     ie.isPending() && ie.cancel();
     const m = l.getBoundingClientRect(), g = r.clientX - m.left, u = r.clientY - m.top, v = Ue(g, u, L.current, x.current.intervalTree, x.current.layoutEngine, x.current.groups);
     v && ((ne = (N = x.current).onItemClick) == null || ne.call(N, v.id, r.nativeEvent));
-  }, [ie, O]), yi = oe((r) => {
+  }, [ie, O]), Ti = oe((r) => {
     var k, R;
     const l = r.currentTarget.getBoundingClientRect(), m = r.clientX - l.left, g = r.clientY - l.top, u = x.current, v = Ue(m, g, L.current, u.intervalTree, u.layoutEngine, u.groups);
     if (v)
@@ -1521,7 +1524,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       const X = Tt(g, L.current, u.groups), Y = L.current.xToTime(m);
       X && ((R = u.onCanvasDoubleClick) == null || R.call(u, X.id, Y));
     }
-  }, []), Ti = oe((r) => {
+  }, []), Si = oe((r) => {
     var k, R;
     r.preventDefault();
     const l = r.currentTarget.getBoundingClientRect(), m = r.clientX - l.left, g = r.clientY - l.top, u = x.current, v = Ue(m, g, L.current, u.intervalTree, u.layoutEngine, u.groups);
@@ -1531,10 +1534,10 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
       const X = Tt(g, L.current, u.groups), Y = L.current.xToTime(m);
       X && ((R = u.onCanvasContextMenu) == null || R.call(u, X.id, Y, r.nativeEvent));
     }
-  }, []), Si = oe(() => {
+  }, []), Mi = oe(() => {
     var r, l;
     ve.current = null, Oe.current = !1, ft.current = null, Le.current && (Le.current.style.cursor = "default"), xe.current !== void 0 && (xe.current = void 0, O.markDirty("items"), (l = (r = x.current).onItemHover) == null || l.call(r, null, new PointerEvent("pointerleave"))), x.current.showCursorLine && O.markDirty("overlay");
-  }, [O]), Mi = ee(() => {
+  }, [O]), wi = ee(() => {
     const r = [];
     return me.Children.forEach(ke, (l) => {
       var g;
@@ -1559,7 +1562,7 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
   }, [ke, Ft, Yt, Ce, c, we, Je, O, $e]), jt = U(!1);
   ce(() => {
     jt.current || (jt.current = !0, O.markAllDirty());
-  }, [O]), Ei(t, () => ({
+  }, [O]), Hi(t, () => ({
     captureToCanvas({ timeStart: r, timeEnd: l, scale: m, sidebarWidth: g }) {
       const u = x.current, v = 28, k = v * 3, R = u.groups.map((j) => u.layoutEngine.getGroupHeight(j.id)), X = [0];
       for (let j = 0; j < R.length; j++)
@@ -1627,8 +1630,8 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
           const ae = re.type ?? "";
           let fe = 8, pe = "400", Pe = 11;
           ae === "project" ? (pe = "700", Pe = 12) : ae === "control_area_group" ? pe = "600" : ae === "control_area" && (fe = 24), S.fillStyle = "#374151", S.font = `${pe} ${Pe}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`, S.textBaseline = "middle";
-          const ki = typeof re.title == "string" ? re.title : String(re.title);
-          S.fillText(ki, fe, G + V / 2, u - fe - 8);
+          const Ci = typeof re.title == "string" ? re.title : String(re.title);
+          S.fillText(Ci, fe, G + V / 2, u - fe - 8);
         }
         S.strokeStyle = "#E5E7EB", S.lineWidth = 1, S.beginPath(), S.moveTo(u, 0), S.lineTo(u, Z), S.stroke(), S.restore(), S.save(), S.beginPath(), S.rect(u, 0, q, R), S.clip();
         const ge = m - l, j = [
@@ -1666,14 +1669,14 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     };
     Ke == null || Ke(r);
   }, [Ke, Fe, Ye, _e]);
-  const wi = {
+  const ki = {
     position: "relative",
     width: Ce,
     height: ye,
     overflow: "hidden",
     cursor: "default"
   }, bt = { position: "absolute", top: 0, left: 0 };
-  return Ve("div", { ref: Ot, style: { display: "flex", flexDirection: "column", width: "100%", position: "relative" }, children: [oi ? Ve("div", { style: {
+  return Ve("div", { ref: Ot, style: { display: "flex", flexDirection: "column", width: "100%", position: "relative" }, children: [si ? Ve("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -1687,13 +1690,13 @@ const Jt = 32, cn = me.memo(Ci(function(e, t) {
     borderBottomRightRadius: 4,
     pointerEvents: "none",
     userSelect: "none"
-  }, children: ["v", "0.6.0", " · ", "06:59:26"] }) : null, Mi, Ve("div", { ref: Pt, style: { display: "flex", overflow: "hidden", maxHeight: Be ?? void 0 }, children: [le(Vt, { groups: n, width: c, lineHeight: a, groupHeights: Re, scrollTop: _t, canvasHeight: ye, theme: we, groupRenderer: B, onScroll: (r) => {
+  }, children: ["v", "0.7.0", " · ", "07:45:36"] }) : null, wi, Ve("div", { ref: Pt, style: { display: "flex", overflow: "hidden", maxHeight: Be ?? void 0 }, children: [le(qt, { groups: n, width: c, lineHeight: a, groupHeights: Re, scrollTop: _t, canvasHeight: ye, theme: we, groupRenderer: B, onScroll: (r) => {
     L.current.update({ scrollTop: r }), O.markDirty("grid"), O.markDirty("items"), O.markDirty("overlay"), et(r);
-  } }), Ve("div", { ref: Le, style: wi, onPointerMove: pi, onPointerDown: vi, onPointerUp: bi, onDoubleClick: yi, onContextMenu: Ti, onPointerLeave: Si, children: [le("canvas", { ref: Dt, style: { ...bt, zIndex: 0 } }), le("canvas", { ref: It, style: { ...bt, zIndex: 1 } }), le("canvas", { ref: Rt, style: { ...bt, zIndex: 2 } })] }), ut && Et ? le(Vt, { groups: n, width: ut, lineHeight: a, groupHeights: Re, scrollTop: _t, canvasHeight: ye, theme: we, groupRenderer: Et, onScroll: (r) => {
+  } }), Ve("div", { ref: Le, style: ki, onPointerMove: vi, onPointerDown: bi, onPointerUp: yi, onDoubleClick: Ti, onContextMenu: Si, onPointerLeave: Mi, children: [le("canvas", { ref: Dt, style: { ...bt, zIndex: 0 } }), le("canvas", { ref: It, style: { ...bt, zIndex: 1 } }), le("canvas", { ref: Rt, style: { ...bt, zIndex: 2 } })] }), ut && Et ? le(qt, { groups: n, width: ut, lineHeight: a, groupHeights: Re, scrollTop: _t, canvasHeight: ye, theme: we, groupRenderer: Et, onScroll: (r) => {
     L.current.update({ scrollTop: r }), O.markDirty("grid"), O.markDirty("items"), O.markDirty("overlay"), et(r);
   } }) : null] })] });
 }));
-function qi({ children: i, theme: e, className: t, classNames: n, style: o, visibleTimeStart: d, visibleTimeEnd: s, canvasWidth: c, sidebarWidth: a = 0, onZoomToInterval: b, timezone: H }) {
+function Ki({ children: i, theme: e, className: t, classNames: n, style: o, visibleTimeStart: d, visibleTimeEnd: s, canvasWidth: c, sidebarWidth: a = 0, onZoomToInterval: b, timezone: H }) {
   const p = me.Children.map(i, (f) => {
     var T;
     if (!me.isValidElement(f))
@@ -1723,8 +1726,8 @@ function qi({ children: i, theme: e, className: t, classNames: n, style: o, visi
     ...o
   }, children: p });
 }
-qi.displayName = "TimelineHeaders";
-var ri = { exports: {} };
+Ki.displayName = "TimelineHeaders";
+var oi = { exports: {} };
 (function(i, e) {
   (function(t, n) {
     i.exports = n();
@@ -1746,22 +1749,22 @@ var ri = { exports: {} };
       };
     };
   });
-})(ri);
-var Ki = ri.exports;
-const Ji = /* @__PURE__ */ at(Ki);
-We.extend(Ji);
-const Qi = {
+})(oi);
+var Ji = oi.exports;
+const Qi = /* @__PURE__ */ at(Ji);
+We.extend(Qi);
+const en = {
   year: 30,
   month: 30,
   week: 20,
   day: 15,
   hour: 30
 };
-function en({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWidth: n = 0, theme: o, height: d = 28, className: s, labelFormat: c, onIntervalClick: a, minCellWidth: b, onZoomToInterval: H, timezone: p }) {
+function tn({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWidth: n = 0, theme: o, height: d = 28, className: s, labelFormat: c, onIntervalClick: a, minCellWidth: b, onZoomToInterval: H, timezone: p }) {
   const f = ee(() => {
     if (!e || !t || !n)
       return [];
-    const T = t - e, h = b ?? Qi[i];
+    const T = t - e, h = b ?? en[i];
     if (h > 0) {
       const y = Te(e, p).startOf(i);
       if ((y.add(1, i).valueOf() - y.valueOf()) / T * n < h)
@@ -1771,7 +1774,7 @@ function en({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWid
     let P = Te(e, p).startOf(i).subtract(1, i);
     const W = Te(t, p).add(2, i).valueOf();
     for (; P.valueOf() < W; ) {
-      const y = P.add(1, i), D = P.valueOf(), w = y.valueOf(), $ = (D - e) / T * n, B = (w - D) / T * n, I = tn(P, y, i, c);
+      const y = P.add(1, i), D = P.valueOf(), w = y.valueOf(), $ = (D - e) / T * n, B = (w - D) / T * n, I = nn(P, y, i, c);
       E.push({ start: D, end: w, label: I, left: $, width: B }), P = y;
     }
     return E;
@@ -1799,11 +1802,11 @@ function en({ unit: i, visibleTimeStart: e = 0, visibleTimeEnd: t = 0, canvasWid
     boxSizing: "border-box"
   }, children: le("span", { children: T.label }) }, T.start)) });
 }
-en.displayName = "DateHeader";
-function tn(i, e, t, n, o) {
-  return typeof n == "function" ? n(i.toDate(), e.toDate(), t) : typeof n == "string" ? i.format(n) : nn(i, t);
+tn.displayName = "DateHeader";
+function nn(i, e, t, n, o) {
+  return typeof n == "function" ? n(i.toDate(), e.toDate(), t) : typeof n == "string" ? i.format(n) : rn(i, t);
 }
-function nn(i, e) {
+function rn(i, e) {
   switch (e) {
     case "year":
       return i.format("YYYY");
@@ -1817,24 +1820,24 @@ function nn(i, e) {
       return i.format("HH:mm");
   }
 }
-function rn({ width: i, children: e, style: t }) {
+function on({ width: i, children: e, style: t }) {
   const n = () => ({ style: { width: i, ...t } });
-  return e ? le(Qt, { children: e({ getRootProps: n }) }) : le("div", { style: { width: i } });
+  return e ? le(ei, { children: e({ getRootProps: n }) }) : le("div", { style: { width: i } });
 }
-rn.displayName = "SidebarHeader";
-function on({ children: i }) {
-  return le(Qt, { children: i });
+on.displayName = "SidebarHeader";
+function sn({ children: i }) {
+  return le(ei, { children: i });
 }
-on.displayName = "CustomHeader";
+sn.displayName = "CustomHeader";
 export {
-  cn as CanvasTimeline,
-  on as CustomHeader,
-  Ui as CustomMarker,
+  dn as CanvasTimeline,
+  sn as CustomHeader,
+  Vi as CustomMarker,
   He as DEFAULT_THEME,
-  en as DateHeader,
-  Ri as HierarchyEngine,
-  rn as SidebarHeader,
-  qi as TimelineHeaders,
-  Ni as TodayMarker
+  tn as DateHeader,
+  Oi as HierarchyEngine,
+  on as SidebarHeader,
+  Ki as TimelineHeaders,
+  Zi as TodayMarker
 };
 //# sourceMappingURL=canvas-timeline.es.js.map