Add profiling with Remotery

vis/Code/TimelineMarkers.js

@@ -0,0 +1,186 @@
+
+function GetTimeText(seconds)
+{
+    if (seconds < 0)
+    {
+        return "";
+    }
+
+    var text = "";
+
+    // Add any contributing hours
+    var h = Math.floor(seconds / 3600);
+    seconds -= h * 3600;
+    if (h)
+    {
+        text += h + "h ";
+    }
+
+    // Add any contributing minutes
+    var m = Math.floor(seconds / 60);
+    seconds -= m * 60;
+    if (m)
+    {
+        text += m + "m ";
+    }
+
+    // Add any contributing seconds or always add seconds when hours or minutes have no contribution
+    // This ensures the 0s marker displays
+    var s = Math.floor(seconds);
+    seconds -= s;
+    if (s || text == "")
+    {
+        text += s + "s ";
+    }
+    
+    // Add remaining milliseconds
+    var ms = Math.floor(seconds * 1000);
+    if (ms)
+    {
+        text += ms + "ms";
+    }
+    
+    return text;
+}
+
+
+class TimelineMarkers
+{
+    constructor(timeline)
+    {
+        this.timeline = timeline;
+
+        // Need a 2D drawing context
+        this.markerContainer = timeline.Window.AddControlNew(new WM.Container(10, 10, 10, 10));
+        this.markerCanvas = document.createElement("canvas");
+        this.markerContainer.Node.appendChild(this.markerCanvas);
+        this.markerContext = this.markerCanvas.getContext("2d");
+    }
+
+    Draw(time_range)
+    {
+        let ctx = this.markerContext;
+
+        ctx.clearRect(0, 0, this.markerCanvas.width, this.markerCanvas.height);
+
+            // Setup render state for the time line markers
+        ctx.strokeStyle = "#BBB";
+        ctx.fillStyle = "#BBB";
+        ctx.lineWidth = 1;
+        ctx.font = "9px LocalFiraCode";
+
+        // A list of all supported units of time (measured in seconds) that require markers
+        let units = [ 0.001, 0.01, 0.1, 1, 10, 60, 60 * 5, 60 * 60, 60 * 60 * 24 ];
+
+        // Given the current pixel size of a second, calculate the spacing for each unit marker
+        let second_pixel_size = time_range.PixelSize(1000 * 1000);
+        let sizeof_units = [ ];
+        for (let unit of units)
+        {
+            sizeof_units.push(unit * second_pixel_size);
+        }
+
+        // Calculate whether each unit marker is visible at the current zoom level
+        var show_unit = [ ];
+        for (let sizeof_unit of sizeof_units)
+        {
+            show_unit.push(Math.max(Math.min((sizeof_unit - 4) * 0.25, 1), 0));
+        }
+
+        // Find the first visible unit
+        for (let i = 0; i < units.length; i++)
+        {
+            if (show_unit[i] > 0)
+            {
+                // Cut out unit information for the first set of units not visible
+                units = units.slice(i);
+                sizeof_units = sizeof_units.slice(i);
+                show_unit = show_unit.slice(i);
+                break;
+            }
+        }
+
+        let timeline_end = this.markerCanvas.width;
+        for (let i = 0; i < 3; i++)
+        {
+            // Round the start time up to the next visible unit
+            let time_start = time_range.Start_us / (1000 * 1000);
+            let unit_time_start = Math.ceil(time_start / units[i]) * units[i];
+
+            // Calculate the canvas offset required to step to the first visible unit
+            let pre_step_x = time_range.PixelOffset(unit_time_start * (1000 * 1000));
+
+            // Draw lines for every unit at this level, keeping tracking of the seconds
+            var seconds = unit_time_start;
+            for (let x = pre_step_x; x <= timeline_end; x += sizeof_units[i])
+            {
+                // For the first two units, don't draw the units above it to prevent
+                // overdraw and the visual errors that causes
+                // The last unit always draws
+                if (i > 1 || (seconds % units[i + 1]))
+                {
+                    // Only the first two units scale with unit visibility
+                    // The last unit maintains its size
+                    let height = Math.min(i * 4 + 4 * show_unit[i], 16);
+
+                    // Draw the line on an integer boundary, shifted by 0.5 to get an un-anti-aliased 1px line
+                    let ix = Math.floor(x);
+                    ctx.beginPath();
+                    ctx.moveTo(ix + 0.5, 1);
+                    ctx.lineTo(ix + 0.5, 1 + height);
+                    ctx.stroke();
+                }
+
+                seconds += units[i];
+            }
+
+            if (i == 1)
+            {
+                // Draw text labels for the second unit, fading them out as they slowly
+                // become the first unit
+                ctx.globalAlpha = show_unit[0];
+                var seconds = unit_time_start;
+                for (let x = pre_step_x; x <= timeline_end; x += sizeof_units[i])
+                {
+                    if (seconds % units[2])
+                    {
+                        this.DrawTimeText(seconds, x, 16);
+                    }
+                    seconds += units[i];
+                }
+
+                // Restore alpha
+                ctx.globalAlpha = 1;
+            }
+
+            else if (i == 2)
+            {
+                // Draw text labels for the third unit with no fade
+                var seconds = unit_time_start;
+                for (let x = pre_step_x; x <= timeline_end; x += sizeof_units[i])
+                {
+                    this.DrawTimeText(seconds, x, 16);
+                    seconds += units[i];
+                }
+            }
+        }
+    }
+
+    DrawTimeText(seconds, x, y)
+    {
+        // Use text measuring to centre the text horizontally on the input x
+        var text = GetTimeText(seconds);
+        var width = this.markerContext.measureText(text).width;
+        this.markerContext.fillText(text, Math.floor(x) - width / 2, y);
+    }
+
+    Resize(x, y, w, h)
+    {
+		this.markerContainer.SetPosition(x, y);
+		this.markerContainer.SetSize(w, h);
+
+        // Match canvas size to container
+		this.markerCanvas.width = this.markerContainer.Node.clientWidth;
+		this.markerCanvas.height = this.markerContainer.Node.clientHeight;
+    }
+}