@itwin/frontend-devtools 4.0.0-dev.7 → 4.0.0-dev.72

package/lib/esm/widgets/GpuProfiler.js

@@ -1,189 +1,189 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Widgets
- */
-import { saveAs } from "file-saver";
-import { IModelApp } from "@itwin/core-frontend";
-import { createCheckBox } from "../ui/CheckBox";
-const dummyArgs = { 0: 0 }; // Reuse instead of allocating for each entry
-/**
- * @param name Label for the trace event
- * @param start Timestamp in microseconds of when trace event started
- * @param duration Duration in microseconds of trace event
- */
-function createTraceEvent(name, start, duration) {
-    return {
-        pid: 1,
-        ts: start,
-        dur: duration,
-        ph: "X",
-        name,
-        args: dummyArgs,
-    };
-}
-function createTraceFromTimerResults(timerResults) {
-    const traceEvents = [];
-    const addChildren = (startTime, children) => {
-        for (const child of children) {
-            if (child.nanoseconds < 100)
-                continue;
-            const microseconds = child.nanoseconds / 1E3;
-            traceEvents.push(createTraceEvent(child.label, startTime, microseconds));
-            if (child.children)
-                addChildren(startTime, child.children);
-            startTime += microseconds;
-        }
-    };
-    let frameStartTime = 0;
-    let frameNumber = 0;
-    for (const tr of timerResults) {
-        const microseconds = tr.nanoseconds / 1E3;
-        traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));
-        if (tr.children)
-            addChildren(frameStartTime, tr.children);
-        frameStartTime += microseconds;
-        ++frameNumber;
-    }
-    return { traceEvents };
-}
-/** @alpha */
-export class GpuProfiler {
-    constructor(parent) {
-        this._clickRecord = () => {
-            if (!this._isRecording) {
-                this._isRecording = true;
-                this._recordButton.innerText = "Stop Recording";
-                return;
-            }
-            this.stopRecording();
-        };
-        this._resultsCallback = (result) => {
-            if (this._isRecording)
-                this._recordedResults.push(result);
-            const fragment = document.createDocumentFragment();
-            const numSavedFrames = 120;
-            let lastValue;
-            const changedResults = new Array(this._results.length); // default values false
-            const printDepth = (depth, currentRes) => {
-                const index = this._results.findIndex((res) => res.label === currentRes.label);
-                if (index < 0) { // Add brand new entry
-                    const data = {
-                        label: currentRes.label,
-                        paddingLeft: `${depth}em`,
-                        sum: currentRes.nanoseconds,
-                        values: [currentRes.nanoseconds],
-                    };
-                    if (lastValue === undefined) {
-                        this._results.unshift(data);
-                        changedResults.unshift(true);
-                    }
-                    else if (currentRes.label === "Read Pixels") {
-                        this._results.push(data); // Read Pixels should go at the end of the list
-                        changedResults.push(true);
-                    }
-                    else {
-                        const prevIndex = this._results.findIndex((res) => res.label === lastValue);
-                        this._results.splice(prevIndex + 1, 0, data);
-                        changedResults.splice(prevIndex + 1, 0, true);
-                    }
-                }
-                else { // Edit old entry
-                    let oldVal = 0.0;
-                    const savedResults = this._results[index];
-                    if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between
-                        oldVal = savedResults.values.shift();
-                    }
-                    const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise
-                    savedResults.sum += newVal - oldVal;
-                    savedResults.values.push(newVal);
-                    changedResults[index] = true;
-                }
-                lastValue = currentRes.label;
-                if (!currentRes.children)
-                    return;
-                for (const childRes of currentRes.children)
-                    printDepth(depth + 1, childRes);
-            };
-            printDepth(0, result);
-            this._results.forEach((value, index) => {
-                if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.
-                    const oldVal = value.values.length >= numSavedFrames ? value.values.shift() : 0.0;
-                    value.sum -= oldVal;
-                    value.values.push(0.0);
-                }
-                const div = document.createElement("div");
-                div.style.display = "flex";
-                div.style.width = "75%";
-                const textLabel = document.createElement("text");
-                textLabel.innerText = `${value.label}`;
-                textLabel.style.paddingLeft = value.paddingLeft;
-                div.appendChild(textLabel);
-                const divLine = document.createElement("div");
-                divLine.style.flexGrow = "1";
-                divLine.style.borderBottom = "dotted 1px";
-                div.appendChild(divLine);
-                const textValue = document.createElement("text");
-                textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\n`;
-                div.appendChild(textValue);
-                fragment.appendChild(div);
-            });
-            this._resultsDiv.innerHTML = "";
-            this._resultsDiv.appendChild(fragment);
-        };
-        this._debugControl = IModelApp.renderSystem.debugControl;
-        const checkBox = createCheckBox({
-            parent,
-            name: "Profile GPU",
-            id: "gpu-profiler-toggle",
-            handler: (cb) => this.toggleProfileCheckBox(cb.checked),
-        });
-        if (!this._debugControl.isGLTimerSupported) {
-            checkBox.checkbox.disabled = true;
-            checkBox.div.title = "EXT_disjoint_timer_query is not available in this browser";
-        }
-        this._div = document.createElement("div");
-        this._div.style.display = "none";
-        this._recordButton = document.createElement("button");
-        this._recordButton.style.textAlign = "center";
-        this._isRecording = false;
-        this._recordButton.innerText = "Record Profile";
-        this._recordButton.title = "Record a profile to open with chrome://tracing";
-        this._recordedResults = [];
-        this._recordButton.addEventListener("click", this._clickRecord);
-        this._div.appendChild(this._recordButton);
-        this._results = [];
-        this._resultsDiv = document.createElement("div");
-        this._resultsDiv.style.textAlign = "left";
-        this._div.appendChild(this._resultsDiv);
-        parent.appendChild(this._div);
-    }
-    dispose() {
-        this._debugControl.resultsCallback = undefined;
-    }
-    toggleProfileCheckBox(isEnabled) {
-        if (isEnabled) {
-            this._debugControl.resultsCallback = this._resultsCallback;
-            this._resultsDiv.innerHTML = "";
-            this._div.style.display = "block";
-        }
-        else {
-            this._debugControl.resultsCallback = undefined;
-            this._div.style.display = "none";
-            this.stopRecording();
-        }
-    }
-    stopRecording() {
-        this._isRecording = false;
-        this._recordButton.innerText = "Record Profile";
-        if (this._recordedResults.length !== 0) {
-            const chromeTrace = createTraceFromTimerResults(this._recordedResults);
-            const blob = new Blob([JSON.stringify(chromeTrace)], { type: "application/json;charset=utf-8" });
-            saveAs(blob, "gpu-profile.json");
-            this._recordedResults = [];
-        }
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Widgets
+ */
+import { saveAs } from "file-saver";
+import { IModelApp } from "@itwin/core-frontend";
+import { createCheckBox } from "../ui/CheckBox";
+const dummyArgs = { 0: 0 }; // Reuse instead of allocating for each entry
+/**
+ * @param name Label for the trace event
+ * @param start Timestamp in microseconds of when trace event started
+ * @param duration Duration in microseconds of trace event
+ */
+function createTraceEvent(name, start, duration) {
+    return {
+        pid: 1,
+        ts: start,
+        dur: duration,
+        ph: "X",
+        name,
+        args: dummyArgs,
+    };
+}
+function createTraceFromTimerResults(timerResults) {
+    const traceEvents = [];
+    const addChildren = (startTime, children) => {
+        for (const child of children) {
+            if (child.nanoseconds < 100)
+                continue;
+            const microseconds = child.nanoseconds / 1E3;
+            traceEvents.push(createTraceEvent(child.label, startTime, microseconds));
+            if (child.children)
+                addChildren(startTime, child.children);
+            startTime += microseconds;
+        }
+    };
+    let frameStartTime = 0;
+    let frameNumber = 0;
+    for (const tr of timerResults) {
+        const microseconds = tr.nanoseconds / 1E3;
+        traceEvents.push(createTraceEvent(`Frame ${frameNumber}`, frameStartTime, microseconds));
+        if (tr.children)
+            addChildren(frameStartTime, tr.children);
+        frameStartTime += microseconds;
+        ++frameNumber;
+    }
+    return { traceEvents };
+}
+/** @alpha */
+export class GpuProfiler {
+    constructor(parent) {
+        this._clickRecord = () => {
+            if (!this._isRecording) {
+                this._isRecording = true;
+                this._recordButton.innerText = "Stop Recording";
+                return;
+            }
+            this.stopRecording();
+        };
+        this._resultsCallback = (result) => {
+            if (this._isRecording)
+                this._recordedResults.push(result);
+            const fragment = document.createDocumentFragment();
+            const numSavedFrames = 120;
+            let lastValue;
+            const changedResults = new Array(this._results.length); // default values false
+            const printDepth = (depth, currentRes) => {
+                const index = this._results.findIndex((res) => res.label === currentRes.label);
+                if (index < 0) { // Add brand new entry
+                    const data = {
+                        label: currentRes.label,
+                        paddingLeft: `${depth}em`,
+                        sum: currentRes.nanoseconds,
+                        values: [currentRes.nanoseconds],
+                    };
+                    if (lastValue === undefined) {
+                        this._results.unshift(data);
+                        changedResults.unshift(true);
+                    }
+                    else if (currentRes.label === "Read Pixels") {
+                        this._results.push(data); // Read Pixels should go at the end of the list
+                        changedResults.push(true);
+                    }
+                    else {
+                        const prevIndex = this._results.findIndex((res) => res.label === lastValue);
+                        this._results.splice(prevIndex + 1, 0, data);
+                        changedResults.splice(prevIndex + 1, 0, true);
+                    }
+                }
+                else { // Edit old entry
+                    let oldVal = 0.0;
+                    const savedResults = this._results[index];
+                    if (savedResults.values.length >= numSavedFrames) { // keep up to numSavedFrames values to average between
+                        oldVal = savedResults.values.shift();
+                    }
+                    const newVal = currentRes.nanoseconds < 100 ? 0.0 : currentRes.nanoseconds; // high-pass filter, empty queries have some noise
+                    savedResults.sum += newVal - oldVal;
+                    savedResults.values.push(newVal);
+                    changedResults[index] = true;
+                }
+                lastValue = currentRes.label;
+                if (!currentRes.children)
+                    return;
+                for (const childRes of currentRes.children)
+                    printDepth(depth + 1, childRes);
+            };
+            printDepth(0, result);
+            this._results.forEach((value, index) => {
+                if (!changedResults[index]) { // if no data received on this item, add a value of 0.0 to the avg.
+                    const oldVal = value.values.length >= numSavedFrames ? value.values.shift() : 0.0;
+                    value.sum -= oldVal;
+                    value.values.push(0.0);
+                }
+                const div = document.createElement("div");
+                div.style.display = "flex";
+                div.style.width = "75%";
+                const textLabel = document.createElement("text");
+                textLabel.innerText = `${value.label}`;
+                textLabel.style.paddingLeft = value.paddingLeft;
+                div.appendChild(textLabel);
+                const divLine = document.createElement("div");
+                divLine.style.flexGrow = "1";
+                divLine.style.borderBottom = "dotted 1px";
+                div.appendChild(divLine);
+                const textValue = document.createElement("text");
+                textValue.innerText = `${(value.sum / value.values.length / 1.E6).toFixed(3)} ms\n`;
+                div.appendChild(textValue);
+                fragment.appendChild(div);
+            });
+            this._resultsDiv.innerHTML = "";
+            this._resultsDiv.appendChild(fragment);
+        };
+        this._debugControl = IModelApp.renderSystem.debugControl;
+        const checkBox = createCheckBox({
+            parent,
+            name: "Profile GPU",
+            id: "gpu-profiler-toggle",
+            handler: (cb) => this.toggleProfileCheckBox(cb.checked),
+        });
+        if (!this._debugControl.isGLTimerSupported) {
+            checkBox.checkbox.disabled = true;
+            checkBox.div.title = "EXT_disjoint_timer_query is not available in this browser";
+        }
+        this._div = document.createElement("div");
+        this._div.style.display = "none";
+        this._recordButton = document.createElement("button");
+        this._recordButton.style.textAlign = "center";
+        this._isRecording = false;
+        this._recordButton.innerText = "Record Profile";
+        this._recordButton.title = "Record a profile to open with chrome://tracing";
+        this._recordedResults = [];
+        this._recordButton.addEventListener("click", this._clickRecord);
+        this._div.appendChild(this._recordButton);
+        this._results = [];
+        this._resultsDiv = document.createElement("div");
+        this._resultsDiv.style.textAlign = "left";
+        this._div.appendChild(this._resultsDiv);
+        parent.appendChild(this._div);
+    }
+    dispose() {
+        this._debugControl.resultsCallback = undefined;
+    }
+    toggleProfileCheckBox(isEnabled) {
+        if (isEnabled) {
+            this._debugControl.resultsCallback = this._resultsCallback;
+            this._resultsDiv.innerHTML = "";
+            this._div.style.display = "block";
+        }
+        else {
+            this._debugControl.resultsCallback = undefined;
+            this._div.style.display = "none";
+            this.stopRecording();
+        }
+    }
+    stopRecording() {
+        this._isRecording = false;
+        this._recordButton.innerText = "Record Profile";
+        if (this._recordedResults.length !== 0) {
+            const chromeTrace = createTraceFromTimerResults(this._recordedResults);
+            const blob = new Blob([JSON.stringify(chromeTrace)], { type: "application/json;charset=utf-8" });
+            saveAs(blob, "gpu-profile.json");
+            this._recordedResults = [];
+        }
+    }
+}
 //# sourceMappingURL=GpuProfiler.js.map

package/lib/esm/widgets/KeyinField.d.ts

@@ -1,62 +1,62 @@
-import { DataList } from "../ui/DataList";
-import { TextBox } from "../ui/TextBox";
-/** Controls whether localized and/or non-localized key-in strings appear in a KeyinField's auto-completion list.
- * @beta
- */
-export declare enum KeyinFieldLocalization {
-    /** Include only non-localized key-in strings. */
-    NonLocalized = 0,
-    /** Include only localized key-in strings. */
-    Localized = 1,
-    /** Include localized and non-localized strings for each key-in. */
-    Both = 2
-}
-/** Properties controlling how a KeyinField is created.
- * @beta
- */
-export interface KeyinFieldProps {
-    /** If supplied, the keyin field's elements will be added as children of this parent element. */
-    parent?: HTMLElement;
-    /** Required, unique ID prefix used to produce unique IDs for child elements. */
-    baseId: string;
-    /** Default: false. */
-    wantButton?: boolean;
-    /** Default: false. */
-    wantLabel?: boolean;
-    /** The maximum number of submitted key-ins to store in the history.
-     * If greater than zero, pressing up/down while the KeyinField has focus will move backwards/forwards through the history.
-     * Default: zero;
-     */
-    historyLength?: number;
-    /** Controls whether localized and/or non-localized keyin strings appear in the autocompletion list.
-     * Note: the KeyinField will still accept either localized or non-localized strings; this option only controls what is displayed in the auto-completion list.
-     * Default: non-localized
-     */
-    localization?: KeyinFieldLocalization;
-}
-/** A textbox allowing input of key-ins (localized tool names) combined with a drop-down that lists all registered key-ins, filtered by substring match on the current input.
- * Press `enter` or click the Enter button to run the key-in.
- * @beta
- */
-export declare class KeyinField {
-    /** @alpha */
-    readonly autoCompleteList: DataList;
-    readonly textBox: TextBox;
-    readonly keyins: string[];
-    private _historyIndex?;
-    private _historyLength;
-    private readonly _history;
-    private readonly _localization;
-    constructor(props: KeyinFieldProps);
-    focus(): void;
-    loseFocus(): void;
-    selectAll(): void;
-    private handleKeyPress;
-    private handleKeyDown;
-    private resetHistoryIndex;
-    private pushHistory;
-    private submitKeyin;
-    private respondToKeyinFocus;
-    private findKeyins;
-}
+import { DataList } from "../ui/DataList";
+import { TextBox } from "../ui/TextBox";
+/** Controls whether localized and/or non-localized key-in strings appear in a KeyinField's auto-completion list.
+ * @beta
+ */
+export declare enum KeyinFieldLocalization {
+    /** Include only non-localized key-in strings. */
+    NonLocalized = 0,
+    /** Include only localized key-in strings. */
+    Localized = 1,
+    /** Include localized and non-localized strings for each key-in. */
+    Both = 2
+}
+/** Properties controlling how a KeyinField is created.
+ * @beta
+ */
+export interface KeyinFieldProps {
+    /** If supplied, the keyin field's elements will be added as children of this parent element. */
+    parent?: HTMLElement;
+    /** Required, unique ID prefix used to produce unique IDs for child elements. */
+    baseId: string;
+    /** Default: false. */
+    wantButton?: boolean;
+    /** Default: false. */
+    wantLabel?: boolean;
+    /** The maximum number of submitted key-ins to store in the history.
+     * If greater than zero, pressing up/down while the KeyinField has focus will move backwards/forwards through the history.
+     * Default: zero;
+     */
+    historyLength?: number;
+    /** Controls whether localized and/or non-localized keyin strings appear in the autocompletion list.
+     * Note: the KeyinField will still accept either localized or non-localized strings; this option only controls what is displayed in the auto-completion list.
+     * Default: non-localized
+     */
+    localization?: KeyinFieldLocalization;
+}
+/** A textbox allowing input of key-ins (localized tool names) combined with a drop-down that lists all registered key-ins, filtered by substring match on the current input.
+ * Press `enter` or click the Enter button to run the key-in.
+ * @beta
+ */
+export declare class KeyinField {
+    /** @alpha */
+    readonly autoCompleteList: DataList;
+    readonly textBox: TextBox;
+    readonly keyins: string[];
+    private _historyIndex?;
+    private _historyLength;
+    private readonly _history;
+    private readonly _localization;
+    constructor(props: KeyinFieldProps);
+    focus(): void;
+    loseFocus(): void;
+    selectAll(): void;
+    private handleKeyPress;
+    private handleKeyDown;
+    private resetHistoryIndex;
+    private pushHistory;
+    private submitKeyin;
+    private respondToKeyinFocus;
+    private findKeyins;
+}
 //# sourceMappingURL=KeyinField.d.ts.map