Add existing to tracked

node_modules/@cesium/widgets/Source/Timeline/Timeline.css

@@ -0,0 +1,114 @@
+.cesium-timeline-main {
+  position: relative;
+  left: 0;
+  bottom: 0;
+  overflow: hidden;
+  border: solid 1px #888;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cesium-timeline-trackContainer {
+  width: 100%;
+  overflow: auto;
+  border-top: solid 1px #888;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.cesium-timeline-tracks {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.cesium-timeline-needle {
+  position: absolute;
+  left: 0;
+  top: 1.7em;
+  bottom: 0;
+  width: 1px;
+  background: #f00;
+}
+
+.cesium-timeline-bar {
+  position: relative;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  cursor: pointer;
+  width: 100%;
+  height: 1.7em;
+  background: linear-gradient(
+    to bottom,
+    rgba(116, 117, 119, 0.8) 0%,
+    rgba(58, 68, 82, 0.8) 11%,
+    rgba(46, 50, 56, 0.8) 46%,
+    rgba(53, 53, 53, 0.8) 81%,
+    rgba(53, 53, 53, 0.8) 100%
+  );
+}
+
+.cesium-timeline-ruler {
+  /* NOTE: The label and the ruler must use the same font/size */
+  visibility: hidden;
+  white-space: nowrap;
+  font-size: 80%;
+  z-index: -200;
+}
+
+.cesium-timeline-highlight {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: #08f;
+}
+
+.cesium-timeline-ticLabel {
+  position: absolute;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  font-size: 80%;
+  color: #eee;
+}
+
+.cesium-timeline-ticMain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 50%;
+  background: #eee;
+}
+
+.cesium-timeline-ticSub {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 33%;
+  background: #aaa;
+}
+
+.cesium-timeline-ticTiny {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 25%;
+  background: #888;
+}
+
+.cesium-timeline-icon16 {
+  display: block;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  background-image: url("../Images/TimelineIcons.png");
+  background-repeat: no-repeat;
+}

node_modules/@cesium/widgets/Source/Timeline/TimelineHighlightRange.js

@@ -0,0 +1,66 @@
+import { JulianDate } from "@cesium/engine";
+
+/**
+ * @private
+ */
+function TimelineHighlightRange(color, heightInPx, base) {
+  this._color = color;
+  this._height = heightInPx;
+  this._base = base ?? 0;
+}
+
+TimelineHighlightRange.prototype.getHeight = function () {
+  return this._height;
+};
+
+TimelineHighlightRange.prototype.getBase = function () {
+  return this._base;
+};
+
+TimelineHighlightRange.prototype.getStartTime = function () {
+  return this._start;
+};
+
+TimelineHighlightRange.prototype.getStopTime = function () {
+  return this._stop;
+};
+
+TimelineHighlightRange.prototype.setRange = function (start, stop) {
+  this._start = start;
+  this._stop = stop;
+};
+
+TimelineHighlightRange.prototype.render = function (renderState) {
+  let range = "";
+  if (this._start && this._stop && this._color) {
+    const highlightStart = JulianDate.secondsDifference(
+      this._start,
+      renderState.epochJulian,
+    );
+    let highlightLeft = Math.round(
+      renderState.timeBarWidth * renderState.getAlpha(highlightStart),
+    );
+    const highlightStop = JulianDate.secondsDifference(
+      this._stop,
+      renderState.epochJulian,
+    );
+    let highlightWidth =
+      Math.round(
+        renderState.timeBarWidth * renderState.getAlpha(highlightStop),
+      ) - highlightLeft;
+    if (highlightLeft < 0) {
+      highlightWidth += highlightLeft;
+      highlightLeft = 0;
+    }
+    if (highlightLeft + highlightWidth > renderState.timeBarWidth) {
+      highlightWidth = renderState.timeBarWidth - highlightLeft;
+    }
+    if (highlightWidth > 0) {
+      range = `<span class="cesium-timeline-highlight" style="left: ${highlightLeft.toString()}px; width: ${highlightWidth.toString()}px; bottom: ${this._base.toString()}px; height: ${
+        this._height
+      }px; background-color: ${this._color};"></span>`;
+    }
+  }
+  return range;
+};
+export default TimelineHighlightRange;

node_modules/@cesium/widgets/Source/Timeline/TimelineTrack.js

@@ -0,0 +1,74 @@
+import { Color, defined, JulianDate } from "@cesium/engine";
+
+/**
+ * @private
+ */
+function TimelineTrack(interval, pixelHeight, color, backgroundColor) {
+  this.interval = interval;
+  this.height = pixelHeight;
+  this.color = color || new Color(0.5, 0.5, 0.5, 1.0);
+  this.backgroundColor = backgroundColor || new Color(0.0, 0.0, 0.0, 0.0);
+}
+
+TimelineTrack.prototype.render = function (context, renderState) {
+  const startInterval = this.interval.start;
+  const stopInterval = this.interval.stop;
+
+  const spanStart = renderState.startJulian;
+  const spanStop = JulianDate.addSeconds(
+    renderState.startJulian,
+    renderState.duration,
+    new JulianDate(),
+  );
+
+  if (
+    JulianDate.lessThan(startInterval, spanStart) &&
+    JulianDate.greaterThan(stopInterval, spanStop)
+  ) {
+    //The track takes up the entire visible span.
+    context.fillStyle = this.color.toCssColorString();
+    context.fillRect(0, renderState.y, renderState.timeBarWidth, this.height);
+  } else if (
+    JulianDate.lessThanOrEquals(startInterval, spanStop) &&
+    JulianDate.greaterThanOrEquals(stopInterval, spanStart)
+  ) {
+    //The track only takes up some of the visible span, compute that span.
+    let x;
+    let start, stop;
+    for (x = 0; x < renderState.timeBarWidth; ++x) {
+      const currentTime = JulianDate.addSeconds(
+        renderState.startJulian,
+        (x / renderState.timeBarWidth) * renderState.duration,
+        new JulianDate(),
+      );
+      if (
+        !defined(start) &&
+        JulianDate.greaterThanOrEquals(currentTime, startInterval)
+      ) {
+        start = x;
+      } else if (
+        !defined(stop) &&
+        JulianDate.greaterThanOrEquals(currentTime, stopInterval)
+      ) {
+        stop = x;
+      }
+    }
+
+    context.fillStyle = this.backgroundColor.toCssColorString();
+    context.fillRect(0, renderState.y, renderState.timeBarWidth, this.height);
+
+    if (defined(start)) {
+      if (!defined(stop)) {
+        stop = renderState.timeBarWidth;
+      }
+      context.fillStyle = this.color.toCssColorString();
+      context.fillRect(
+        start,
+        renderState.y,
+        Math.max(stop - start, 1),
+        this.height,
+      );
+    }
+  }
+};
+export default TimelineTrack;

node_modules/@cesium/widgets/Source/Timeline/lighter.css

@@ -0,0 +1,20 @@
+.cesium-lighter .cesium-timeline-bar {
+  background: linear-gradient(to bottom, #eeeeee 0%, #ffffff 50%, #fafafa 100%);
+}
+
+.cesium-lighter .cesium-timeline-ticLabel {
+  color: #000;
+}
+
+.cesium-lighter .cesium-timeline-ticMain {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  height: 50%;
+  background: #000;
+}
+
+.cesium-lighter .cesium-timeline-ticSub {
+  background: #444;
+}