@evercam/ui 0.0.55-beta.9 → 0.0.56

package/dist/attributes.json

@@ -345,7 +345,7 @@
     "description": "",
     "default": false
   },
-  "ETimeline/fit-markers-transition-duration": {
+  "ETimeline/zoom-to-interval-transition-duration": {
     "type": "number",
     "description": "",
     "default": 800
@@ -373,5 +373,14 @@
     "type": "string",
     "description": "",
     "default": "#ddd"
+  },
+  "ETimeline/focused-interval": {
+    "type": "object|any",
+    "description": ""
+  },
+  "ETimeline/locked": {
+    "type": "boolean",
+    "description": "",
+    "default": false
   }
 }

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import Ve from "vue";
 import * as I from "d3";
 import Ke from "moment-timezone";
-var Y = /* @__PURE__ */ ((s) => (s.dot = "dot", s.xs = "xs", s.sm = "sm", s.md = "base", s.base = "base", s.lg = "lg", s.xl = "xl", s["2xl"] = "2xl", s["3xl"] = "3xl", s["4xl"] = "4xl", s["5xl"] = "5xl", s["6xl"] = "6xl", s["7xl"] = "7xl", s["8xl"] = "8xl", s["9xl"] = "9xl", s))(Y || {}), ge = /* @__PURE__ */ ((s) => (s.warning = "warning", s.error = "error", s.info = "info", s.success = "success", s.primary = "primary", s.brand = "brand", s.default = "default", s))(ge || {}), kt = /* @__PURE__ */ ((s) => (s.overview = "overview", s.detailed = "detailed", s.detailedBackground = "detailedBackground", s))(kt || {}), Ae = /* @__PURE__ */ ((s) => (s.bars = "bars", s.dots = "dots", s.lineGraph = "lineGraph", s.barChart = "barGraph", s.milestones = "milestones", s.exclusion = "exclusion", s))(Ae || {}), Pt = /* @__PURE__ */ ((s) => (s.zoom = "zoom", s.autoPan = "autoPan", s.initial = "initial", s))(Pt || {});
+var Y = /* @__PURE__ */ ((s) => (s.dot = "dot", s.xs = "xs", s.sm = "sm", s.md = "base", s.base = "base", s.lg = "lg", s.xl = "xl", s["2xl"] = "2xl", s["3xl"] = "3xl", s["4xl"] = "4xl", s["5xl"] = "5xl", s["6xl"] = "6xl", s["7xl"] = "7xl", s["8xl"] = "8xl", s["9xl"] = "9xl", s))(Y || {}), ge = /* @__PURE__ */ ((s) => (s.warning = "warning", s.error = "error", s.info = "info", s.success = "success", s.primary = "primary", s.brand = "brand", s.default = "default", s))(ge || {}), kt = /* @__PURE__ */ ((s) => (s.overview = "overview", s.detailed = "detailed", s.detailedBackground = "detailedBackground", s))(kt || {}), Ae = /* @__PURE__ */ ((s) => (s.bars = "bars", s.dots = "dots", s.lineGraph = "lineGraph", s.barChart = "barGraph", s.milestones = "milestones", s))(Ae || {}), Pt = /* @__PURE__ */ ((s) => (s.zoom = "zoom", s.autoPan = "autoPan", s.initial = "initial", s))(Pt || {});
 const ma = Ve.extend({
   name: "EBadge",
   props: {
@@ -21580,7 +21580,7 @@ const Ah = {
     },
     {
       precision: K._2_year,
-      interval: I.utcYear.every(2),
+      interval: I.utcYear.every(1),
       format: "%Y"
     },
     {
@@ -21708,7 +21708,7 @@ const Ah = {
     {
       precision: K._2_year,
       interval: I.utcMonth.every(6),
-      format: "%Y"
+      format: "Q%q"
     },
     {
       precision: K._5_years,
@@ -22294,7 +22294,7 @@ const Ih = _h.exports, G = {
       type: Boolean,
       default: !1
     },
-    fitMarkersTransitionDuration: {
+    zoomToIntervalTransitionDuration: {
       type: Number,
       default: 800
     },
@@ -22317,6 +22317,14 @@ const Ih = _h.exports, G = {
     forbiddenIntervalColor: {
       type: String,
       default: "#ddd"
+    },
+    focusedInterval: {
+      type: [Object, void 0],
+      default: void 0
+    },
+    locked: {
+      type: Boolean,
+      default: !1
     }
   },
   data() {
@@ -22367,7 +22375,9 @@ const Ih = _h.exports, G = {
       initialMarkerDragMouseOffset: 0,
       selectedMilestoneId: null,
       isInitialized: !1,
-      lastValidTransform: I.zoomIdentity
+      lastValidTransform: I.zoomIdentity,
+      lastPanTransform: I.zoomIdentity,
+      isZoomingInterval: !1
     };
   },
   computed: {
@@ -22568,13 +22578,16 @@ const Ih = _h.exports, G = {
         this.isHoveringTimeline = !1;
     },
     selectedDate(s) {
-      s && this.panToTimestamp(s);
+      s && !this.locked && this.panToTimestamp(s);
     },
     groupsVisibility() {
       this.updateAndRedrawTimeline();
     },
     forbiddenIntervals() {
       this.updateForbiddenIntervals(!0);
+    },
+    focusedInterval(s) {
+      s && (s != null && s.startDate) && (s != null && s.endDate) && this.zoomToTargetInterval(s.startDate, s.endDate);
     }
   },
   created() {
@@ -22670,27 +22683,33 @@ const Ih = _h.exports, G = {
     },
     zoomToFitMarkers() {
       const s = this.markers.map(
-        (u) => new Date(u.timestamp).getTime()
+        (i) => new Date(i.timestamp).getTime()
       );
       if (s.length < 2)
         return;
-      const e = Math.min(...s), t = Math.max(...s), i = this.initialTimeScale.domain().map((u) => u.getTime()), r = i[1] - i[0], n = t - e, a = 0.1 * n, o = n + 2 * a;
-      let l = r / o;
-      const c = this.zoomBehavior.scaleExtent();
-      l = Math.min(
-        Math.max(l, c[0]),
-        c[1]
-      ), this.svg.transition().duration(this.fitMarkersTransitionDuration / 2).call(this.zoomBehavior.scaleTo, l).on(
-        "end",
-        () => this.translateMarkersIntoView(e, t, l)
-      );
+      const e = Math.min(...s), t = Math.max(...s);
+      this.zoomToTargetInterval(e, t);
     },
-    translateMarkersIntoView(s, e, t) {
+    zoomToTargetInterval(s, e) {
+      if (!s || !e)
+        return;
+      this.isZoomingInterval = !0;
+      const t = new Date(s).getTime(), i = new Date(e).getTime(), r = this.initialTimeScale.domain().map((h) => h.getTime()), n = r[1] - r[0], a = i - t, o = 0.1 * a, l = a + 2 * o;
+      let c = n / l;
+      const u = this.zoomBehavior.scaleExtent();
+      c = Math.min(
+        Math.max(c, u[0]),
+        u[1]
+      ), this.svg.transition().duration(this.zoomToIntervalTransitionDuration / 2).call(this.zoomBehavior.scaleTo, c).on("end", () => this.translateIntervalIntoView(t, i, c));
+    },
+    translateIntervalIntoView(s, e, t) {
       const i = this.timeScale(new Date(s)), r = this.timeScale(new Date(e)), n = (i + r) / 2, o = this.svg.node().getBoundingClientRect().width / 2 - n, l = I.zoomTransform(this.svg.node());
-      this.svg.transition().duration(this.fitMarkersTransitionDuration / 2).call(
+      this.svg.transition().duration(this.zoomToIntervalTransitionDuration / 2).call(
         this.zoomBehavior.transform,
         I.zoomIdentity.translate(l.x + o, l.y).scale(t)
-      );
+      ).on("end", () => {
+        this.isZoomingInterval = !1;
+      });
     },
     initSelectedTimestampCursor() {
       this.svg.append("line").attr("class", G.selectedTimestampCursor).style("stroke", "red").style("stroke-width", "1px").style("opacity", 0).attr("x1", 0).attr("x2", 0).attr("y1", 0), this.repositionSelectedTimestampCursor();
@@ -22861,12 +22880,15 @@ const Ih = _h.exports, G = {
       );
     },
     isZoomAllowed(s) {
+      if (this.isZoomingInterval)
+        return !0;
       const e = this.initialTimeScale.copy(), t = s.transform.rescaleX(e).domain(), i = this.minDate ? this.tzStringToDate(this.minDate) : void 0, r = this.maxDate ? this.tzStringToDate(this.maxDate) : void 0;
       return (!i || t[0] >= i) && (!r || t[1] <= r);
     },
     handleZoom(s) {
+      var i;
       if (!this.isZoomAllowed(s)) {
-        s.sourceEvent.preventDefault(), this.svg.call(this.zoomBehavior.transform, this.lastValidTransform);
+        (i = s == null ? void 0 : s.sourceEvent) == null || i.preventDefault(), this.svg.call(this.zoomBehavior.transform, this.lastValidTransform);
         return;
       }
       this.lastValidTransform = s.transform;
@@ -22877,16 +22899,27 @@ const Ih = _h.exports, G = {
         scale: t,
         translation: s.transform.x - this.lastTransform.x
       }, this.lastTransform = { ...s.transform };
-      for (const i in this.xAxes)
-        this.rescaleAxis(i, e), this.translateTicksText(i);
+      for (const r in this.xAxes)
+        this.rescaleAxis(r, e), this.translateTicksText(r);
       this.updateEventsBars(), this.updateLineGraphs(), this.updateBarChart(), this.updateLineGraphHoverZones(), this.updateMilestonesPositions(), this.repositionSelectedTimestampCursor(), this.updateForbiddenIntervals(), this.updateMarkers(), this.emitVisibleInterval(Pt.zoom), this.curtains && this.emitCurtainChange();
     },
     panToTimestamp(s) {
-      const e = this.tzStringToDate(s), t = this.timeScale(e), i = I.zoomTransform(this.svg.node()), r = i.x - t + this.timeline.offsetWidth / 2;
-      this.svg.transition().duration(this.panTransitionDuration).call(
+      const e = this.tzStringToDate(s), t = this.timeScale(e), i = I.zoomTransform(this.svg.node()), r = i.x - t + this.timeline.offsetWidth / 2, n = this.timeScale.invert(
+        -r / i.k
+      ), a = this.timeScale.invert(
+        (this.timeline.offsetWidth - r) / i.k
+      ), o = this.minDate ? this.tzStringToDate(this.minDate) : void 0, l = this.maxDate ? this.tzStringToDate(this.maxDate) : void 0;
+      if (o && n < o || l && a > l) {
+        console.log("Pan operation would exceed bounds. Operation cancelled.");
+        return;
+      }
+      const u = i.k / this.lastPanTransform.k < 10 ? this.panTransitionDuration : 0;
+      this.lastPanTransform = { ...i }, this.svg.transition().duration(u).call(
         this.zoomBehavior.transform,
         I.zoomIdentity.translate(r, 0).scale(i.k)
-      ), this.emitVisibleInterval(Pt.autoPan);
+      ).on("end", () => {
+        this.emitVisibleInterval(Pt.autoPan);
+      });
     },
     emitCurtainChange() {
       const { startDate: s, endDate: e } = this.calculateDateRangeFromCurtains();
@@ -23216,7 +23249,7 @@ const Ih = _h.exports, G = {
         yPosition: m,
         height: y
       }), t || i) {
-        const T = i ? 0.5 : 2, x = m + y / 2;
+        const T = i ? 1 : 2, x = m + y / 2;
         v.append("line").classed(je.milestoneLine, !0).attr("x1", 0).attr("x2", this.timeline.offsetWidth).attr("y1", x).attr("y2", x).style("stroke", a).style("stroke-width", T);
       }
       this.drawBars({
@@ -23371,7 +23404,7 @@ const Ih = _h.exports, G = {
       n && (d = a), e.selectAll(G.eventRect).data(s).enter().append("rect").attr(
         "class",
         (f) => G.eventRect + (n ? ` ${G.eventRect}--dot` : "") + (f.className ? ` ${f.className}` : "")
-      ).attr("x", this.getEventRectX).attr("y", u + h).attr("ry", n ? a : l).attr("rx", n ? a : l).attr("width", n ? a : this.getEventRectWidth).attr("height", d).attr("stroke-width", 5).attr("cursor", "pointer").attr("stroke", "#0000").style("fill", (f) => f.color || i).on("mouseover", function(f, m) {
+      ).attr("x", this.getEventRectX).attr("y", u + h).attr("ry", n ? a : l).attr("rx", n ? a : l).attr("width", n ? a : this.getEventRectWidth).attr("height", d).attr("stroke-width", n ? a / 10 : 5).attr("cursor", "pointer").attr("stroke", (f) => n ? I.color(f.color || i).brighter(1).toString() : "#0000").style("fill", (f) => f.color || i).on("mouseover", function(f, m) {
         I.select(this).classed(G.eventRectHovered, !0), c.handleBarMouseOver(f, m, r);
       }).on("mouseout", function() {
         I.select(this).classed(G.eventRectHovered, !1), c.handleBarMouseOut();