Add existing to tracked

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

@@ -0,0 +1,16 @@
+.cesium-performance-watchdog-message-area {
+  position: relative;
+  background-color: yellow;
+  color: black;
+  padding: 10px;
+}
+
+.cesium-performance-watchdog-message {
+  margin-right: 30px;
+}
+
+.cesium-performance-watchdog-message-dismiss {
+  position: absolute;
+  right: 0;
+  margin: 0 10px 0 0;
+}

node_modules/@cesium/widgets/Source/PerformanceWatchdog/PerformanceWatchdog.js

@@ -0,0 +1,108 @@
+import {
+  defined,
+  destroyObject,
+  DeveloperError,
+  getElement,
+} from "@cesium/engine";
+import knockout from "../ThirdParty/knockout.js";
+import PerformanceWatchdogViewModel from "./PerformanceWatchdogViewModel.js";
+
+/**
+ * Monitors performance of the application and displays a message if poor performance is detected.
+ *
+ * @alias PerformanceWatchdog
+ * @constructor
+ *
+ * @param {object} [options] Object with the following properties:
+ * @param {Element|string} options.container The DOM element or ID that will contain the widget.
+ * @param {Scene} options.scene The {@link Scene} for which to monitor performance.
+ * @param {string} [options.lowFrameRateMessage='This application appears to be performing poorly on your system.  Please try using a different web browser or updating your video drivers.'] The
+ *        message to display when a low frame rate is detected.  The message is interpeted as HTML, so make sure
+ *        it comes from a trusted source so that your application is not vulnerable to cross-site scripting attacks.
+ */
+function PerformanceWatchdog(options) {
+  //>>includeStart('debug', pragmas.debug);
+  if (!defined(options) || !defined(options.container)) {
+    throw new DeveloperError("options.container is required.");
+  }
+  if (!defined(options.scene)) {
+    throw new DeveloperError("options.scene is required.");
+  }
+  //>>includeEnd('debug');
+
+  const container = getElement(options.container);
+
+  const viewModel = new PerformanceWatchdogViewModel(options);
+
+  const element = document.createElement("div");
+  element.className = "cesium-performance-watchdog-message-area";
+  element.setAttribute("data-bind", "visible: showingLowFrameRateMessage");
+
+  const dismissButton = document.createElement("button");
+  dismissButton.setAttribute("type", "button");
+  dismissButton.className = "cesium-performance-watchdog-message-dismiss";
+  dismissButton.innerHTML = "×";
+  dismissButton.setAttribute("data-bind", "click: dismissMessage");
+  element.appendChild(dismissButton);
+
+  const message = document.createElement("div");
+  message.className = "cesium-performance-watchdog-message";
+  message.setAttribute("data-bind", "html: lowFrameRateMessage");
+  element.appendChild(message);
+
+  container.appendChild(element);
+
+  knockout.applyBindings(viewModel, element);
+
+  this._container = container;
+  this._viewModel = viewModel;
+  this._element = element;
+}
+
+Object.defineProperties(PerformanceWatchdog.prototype, {
+  /**
+   * Gets the parent container.
+   * @memberof PerformanceWatchdog.prototype
+   *
+   * @type {Element}
+   */
+  container: {
+    get: function () {
+      return this._container;
+    },
+  },
+
+  /**
+   * Gets the view model.
+   * @memberof PerformanceWatchdog.prototype
+   *
+   * @type {PerformanceWatchdogViewModel}
+   */
+  viewModel: {
+    get: function () {
+      return this._viewModel;
+    },
+  },
+});
+
+/**
+ * @memberof PerformanceWatchdog
+ * @returns {boolean} true if the object has been destroyed, false otherwise.
+ */
+PerformanceWatchdog.prototype.isDestroyed = function () {
+  return false;
+};
+
+/**
+ * Destroys the widget.  Should be called if permanently
+ * removing the widget from layout.
+ * @memberof PerformanceWatchdog
+ */
+PerformanceWatchdog.prototype.destroy = function () {
+  this._viewModel.destroy();
+  knockout.cleanNode(this._element);
+  this._container.removeChild(this._element);
+
+  return destroyObject(this);
+};
+export default PerformanceWatchdog;

node_modules/@cesium/widgets/Source/PerformanceWatchdog/PerformanceWatchdogViewModel.js

@@ -0,0 +1,112 @@
+import {
+  defined,
+  destroyObject,
+  DeveloperError,
+  FrameRateMonitor,
+} from "@cesium/engine";
+import knockout from "../ThirdParty/knockout.js";
+import createCommand from "../createCommand.js";
+
+/**
+ * The view model for {@link PerformanceWatchdog}.
+ *
+ * @alias PerformanceWatchdogViewModel
+ * @constructor
+ *
+ * @param {object} [options] Object with the following properties:
+ * @param {Scene} options.scene The Scene instance for which to monitor performance.
+ * @param {string} [options.lowFrameRateMessage='This application appears to be performing poorly on your system.  Please try using a different web browser or updating your video drivers.'] The
+ *        message to display when a low frame rate is detected.  The message is interpeted as HTML, so make sure
+ *        it comes from a trusted source so that your application is not vulnerable to cross-site scripting attacks.
+ */
+function PerformanceWatchdogViewModel(options) {
+  //>>includeStart('debug', pragmas.debug);
+  if (!defined(options) || !defined(options.scene)) {
+    throw new DeveloperError("options.scene is required.");
+  }
+  //>>includeEnd('debug');
+
+  this._scene = options.scene;
+
+  /**
+   * Gets or sets the message to display when a low frame rate is detected.  This string will be interpreted as HTML.
+   * @type {string}
+   */
+  this.lowFrameRateMessage =
+    options.lowFrameRateMessage ??
+    "This application appears to be performing poorly on your system.  Please try using a different web browser or updating your video drivers.";
+
+  /**
+   * Gets or sets a value indicating whether the low frame rate message has previously been dismissed by the user.  If it has
+   * been dismissed, the message will not be redisplayed, no matter the frame rate.
+   * @type {boolean}
+   */
+  this.lowFrameRateMessageDismissed = false;
+
+  /**
+   * Gets or sets a value indicating whether the low frame rate message is currently being displayed.
+   * @type {boolean}
+   */
+  this.showingLowFrameRateMessage = false;
+
+  knockout.track(this, [
+    "lowFrameRateMessage",
+    "lowFrameRateMessageDismissed",
+    "showingLowFrameRateMessage",
+  ]);
+
+  const that = this;
+  this._dismissMessage = createCommand(function () {
+    that.showingLowFrameRateMessage = false;
+    that.lowFrameRateMessageDismissed = true;
+  });
+
+  const monitor = FrameRateMonitor.fromScene(options.scene);
+
+  this._unsubscribeLowFrameRate = monitor.lowFrameRate.addEventListener(
+    function () {
+      if (!that.lowFrameRateMessageDismissed) {
+        that.showingLowFrameRateMessage = true;
+      }
+    },
+  );
+
+  this._unsubscribeNominalFrameRate = monitor.nominalFrameRate.addEventListener(
+    function () {
+      that.showingLowFrameRateMessage = false;
+    },
+  );
+}
+
+Object.defineProperties(PerformanceWatchdogViewModel.prototype, {
+  /**
+   * Gets the {@link Scene} instance for which to monitor performance.
+   * @memberof PerformanceWatchdogViewModel.prototype
+   * @type {Scene}
+   */
+  scene: {
+    get: function () {
+      return this._scene;
+    },
+  },
+
+  /**
+   * Gets a command that dismisses the low frame rate message.  Once it is dismissed, the message
+   * will not be redisplayed.
+   * @memberof PerformanceWatchdogViewModel.prototype
+   * @type {Command}
+   */
+  dismissMessage: {
+    get: function () {
+      return this._dismissMessage;
+    },
+  },
+});
+
+PerformanceWatchdogViewModel.prototype.destroy = function () {
+  this._unsubscribeLowFrameRate();
+  this._unsubscribeNominalFrameRate();
+
+  return destroyObject(this);
+};
+export default PerformanceWatchdogViewModel;