| /* |
| * Copyright (C) 2013 Apple Inc. All rights reserved. |
| * |
| * Redistribution and use in source and binary forms, with or without |
| * modification, are permitted provided that the following conditions |
| * are met: |
| * 1. Redistributions of source code must retain the above copyright |
| * notice, this list of conditions and the following disclaimer. |
| * 2. Redistributions in binary form must reproduce the above copyright |
| * notice, this list of conditions and the following disclaimer in the |
| * documentation and/or other materials provided with the distribution. |
| * |
| * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' |
| * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, |
| * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR |
| * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS |
| * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
| * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
| * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
| * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN |
| * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) |
| * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF |
| * THE POSSIBILITY OF SUCH DAMAGE. |
| */ |
| |
| WI.TimelineRuler = class TimelineRuler extends WI.View |
| { |
| constructor() |
| { |
| super(); |
| |
| this.element.classList.add("timeline-ruler"); |
| |
| this._headerElement = document.createElement("div"); |
| this._headerElement.classList.add("header"); |
| this.element.appendChild(this._headerElement); |
| |
| this._markersElement = document.createElement("div"); |
| this._markersElement.classList.add("markers"); |
| this.element.appendChild(this._markersElement); |
| |
| this._zeroTime = 0; |
| this._startTime = 0; |
| this._endTime = 0; |
| this._duration = NaN; |
| this._secondsPerPixel = 0; |
| this._selectionStartTime = 0; |
| this._selectionEndTime = Number.MAX_VALUE; |
| this._endTimePinned = false; |
| this._snapInterval = 0; |
| this._allowsClippedLabels = false; |
| this._allowsTimeRangeSelection = false; |
| this._minimumSelectionDuration = 0.01; |
| this._formatLabelCallback = null; |
| this._timeRangeSelectionChanged = false; |
| this._enabled = true; |
| |
| this._scannerMarker = null; |
| this._markerElementMap = new Map; |
| this._cachedClientWidth = 0; |
| } |
| |
| // Public |
| |
| get enabled() |
| { |
| return this._enabled; |
| } |
| |
| set enabled(x) |
| { |
| if (this._enabled === x) |
| return; |
| |
| this._enabled = x; |
| this.element.classList.toggle(WI.TreeElementStatusButton.DisabledStyleClassName, !this._enabled); |
| } |
| |
| get allowsClippedLabels() |
| { |
| return this._allowsClippedLabels; |
| } |
| |
| set allowsClippedLabels(x) |
| { |
| x = !!x; |
| |
| if (this._allowsClippedLabels === x) |
| return; |
| |
| this._allowsClippedLabels = x; |
| |
| this.needsLayout(); |
| } |
| |
| set formatLabelCallback(x) |
| { |
| console.assert(typeof x === "function" || !x, x); |
| |
| x = x || null; |
| |
| if (this._formatLabelCallback === x) |
| return; |
| |
| this._formatLabelCallback = x; |
| |
| this.needsLayout(); |
| } |
| |
| get allowsTimeRangeSelection() |
| { |
| return this._allowsTimeRangeSelection; |
| } |
| |
| set allowsTimeRangeSelection(x) |
| { |
| x = !!x; |
| |
| if (this._allowsTimeRangeSelection === x) |
| return; |
| |
| this._allowsTimeRangeSelection = x; |
| |
| if (x) { |
| this._clickEventListener = this._handleClick.bind(this); |
| this._doubleClickEventListener = this._handleDoubleClick.bind(this); |
| this._mouseDownEventListener = this._handleMouseDown.bind(this); |
| this.element.addEventListener("click", this._clickEventListener); |
| this.element.addEventListener("dblclick", this._doubleClickEventListener); |
| this.element.addEventListener("mousedown", this._mouseDownEventListener); |
| |
| this._leftShadedAreaElement = document.createElement("div"); |
| this._leftShadedAreaElement.classList.add("shaded-area"); |
| this._leftShadedAreaElement.classList.add("left"); |
| |
| this._rightShadedAreaElement = document.createElement("div"); |
| this._rightShadedAreaElement.classList.add("shaded-area"); |
| this._rightShadedAreaElement.classList.add("right"); |
| |
| this._leftSelectionHandleElement = document.createElement("div"); |
| this._leftSelectionHandleElement.classList.add("selection-handle"); |
| this._leftSelectionHandleElement.classList.add("left"); |
| this._leftSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this)); |
| |
| this._rightSelectionHandleElement = document.createElement("div"); |
| this._rightSelectionHandleElement.classList.add("selection-handle"); |
| this._rightSelectionHandleElement.classList.add("right"); |
| this._rightSelectionHandleElement.addEventListener("mousedown", this._handleSelectionHandleMouseDown.bind(this)); |
| |
| this._selectionDragElement = document.createElement("div"); |
| this._selectionDragElement.classList.add("selection-drag"); |
| |
| this._needsSelectionLayout(); |
| } else { |
| this.element.removeEventListener("click", this._clickEventListener); |
| this.element.removeEventListener("dblclick", this._doubleClickEventListener); |
| this.element.removeEventListener("mousedown", this._mouseDownEventListener); |
| this._clickEventListener = null; |
| this._doubleClickEventListener = null; |
| this._mouseDownEventListener = null; |
| |
| this._leftShadedAreaElement.remove(); |
| this._rightShadedAreaElement.remove(); |
| this._leftSelectionHandleElement.remove(); |
| this._rightSelectionHandleElement.remove(); |
| this._selectionDragElement.remove(); |
| |
| delete this._leftShadedAreaElement; |
| delete this._rightShadedAreaElement; |
| delete this._leftSelectionHandleElement; |
| delete this._rightSelectionHandleElement; |
| delete this._selectionDragElement; |
| } |
| } |
| |
| get minimumSelectionDuration() |
| { |
| return this._minimumSelectionDuration; |
| } |
| |
| set minimumSelectionDuration(x) |
| { |
| this._minimumSelectionDuration = x; |
| } |
| |
| get zeroTime() |
| { |
| return this._zeroTime; |
| } |
| |
| set zeroTime(x) |
| { |
| x = x || 0; |
| |
| if (this._zeroTime === x) |
| return; |
| |
| if (this.entireRangeSelected) |
| this.selectionStartTime = x; |
| |
| this._zeroTime = x; |
| |
| this.needsLayout(); |
| } |
| |
| get startTime() |
| { |
| return this._startTime; |
| } |
| |
| set startTime(x) |
| { |
| x = x || 0; |
| |
| if (this._startTime === x) |
| return; |
| |
| this._startTime = x; |
| |
| if (!isNaN(this._duration)) |
| this._endTime = this._startTime + this._duration; |
| |
| this._currentDividers = null; |
| |
| this.needsLayout(); |
| } |
| |
| get duration() |
| { |
| if (!isNaN(this._duration)) |
| return this._duration; |
| return this.endTime - this.startTime; |
| } |
| |
| get endTime() |
| { |
| if (!this._endTimePinned && this.layoutPending) |
| this._recalculate(); |
| return this._endTime; |
| } |
| |
| set endTime(x) |
| { |
| x = x || 0; |
| |
| if (this._endTime === x) |
| return; |
| |
| this._endTime = x; |
| this._endTimePinned = true; |
| |
| this.needsLayout(); |
| } |
| |
| get secondsPerPixel() |
| { |
| if (this.layoutPending) |
| this._recalculate(); |
| return this._secondsPerPixel; |
| } |
| |
| set secondsPerPixel(x) |
| { |
| x = x || 0; |
| |
| if (this._secondsPerPixel === x) |
| return; |
| |
| this._secondsPerPixel = x; |
| this._endTimePinned = false; |
| this._currentDividers = null; |
| this._currentSliceTime = 0; |
| |
| this.needsLayout(); |
| } |
| |
| get snapInterval() |
| { |
| return this._snapInterval; |
| } |
| |
| set snapInterval(x) |
| { |
| if (this._snapInterval === x) |
| return; |
| |
| this._snapInterval = x; |
| } |
| |
| get selectionStartTime() |
| { |
| return this._selectionStartTime; |
| } |
| |
| set selectionStartTime(x) |
| { |
| x = this._snapValue(x) || 0; |
| |
| if (this._selectionStartTime === x) |
| return; |
| |
| this._selectionStartTime = x; |
| this._timeRangeSelectionChanged = true; |
| |
| this._needsSelectionLayout(); |
| } |
| |
| get selectionEndTime() |
| { |
| return this._selectionEndTime; |
| } |
| |
| set selectionEndTime(x) |
| { |
| x = this._snapValue(x) || 0; |
| |
| if (this._selectionEndTime === x) |
| return; |
| |
| this._selectionEndTime = x; |
| this._timeRangeSelectionChanged = true; |
| |
| this._needsSelectionLayout(); |
| } |
| |
| get entireRangeSelected() |
| { |
| return this._selectionStartTime === this._zeroTime && this._selectionEndTime === Number.MAX_VALUE; |
| } |
| |
| selectEntireRange() |
| { |
| this.selectionStartTime = this._zeroTime; |
| this.selectionEndTime = Number.MAX_VALUE; |
| } |
| |
| addMarker(marker) |
| { |
| console.assert(marker instanceof WI.TimelineMarker); |
| |
| if (this._markerElementMap.has(marker)) |
| return; |
| |
| marker.addEventListener(WI.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this); |
| |
| let markerTime = marker.time - this._startTime; |
| let markerElement = document.createElement("div"); |
| markerElement.classList.add(marker.type, "marker"); |
| |
| switch (marker.type) { |
| case WI.TimelineMarker.Type.LoadEvent: |
| markerElement.title = WI.UIString("Load \u2014 %s").format(Number.secondsToString(markerTime)); |
| break; |
| case WI.TimelineMarker.Type.DOMContentEvent: |
| markerElement.title = WI.UIString("DOM Content Loaded \u2014 %s").format(Number.secondsToString(markerTime)); |
| break; |
| case WI.TimelineMarker.Type.TimeStamp: |
| if (marker.details) |
| markerElement.title = WI.UIString("%s \u2014 %s").format(marker.details, Number.secondsToString(markerTime)); |
| else |
| markerElement.title = WI.UIString("Timestamp \u2014 %s").format(Number.secondsToString(markerTime)); |
| break; |
| } |
| |
| this._markerElementMap.set(marker, markerElement); |
| |
| this._needsMarkerLayout(); |
| } |
| |
| clearMarkers() |
| { |
| for (let [marker, markerElement] of this._markerElementMap) { |
| marker.removeEventListener(WI.TimelineMarker.Event.TimeChanged, this._timelineMarkerTimeChanged, this); |
| markerElement.remove(); |
| } |
| |
| this._markerElementMap.clear(); |
| |
| this._scannerMarker = null; |
| } |
| |
| elementForMarker(marker) |
| { |
| return this._markerElementMap.get(marker) || null; |
| } |
| |
| showScanner(time) |
| { |
| if (!this._scannerMarker) { |
| this._scannerMarker = new WI.TimelineMarker(time, WI.TimelineMarker.Type.Scanner); |
| this.addMarker(this._scannerMarker); |
| } |
| |
| this._scannerMarker.time = time; |
| } |
| |
| hideScanner() |
| { |
| if (this._scannerMarker) |
| this._scannerMarker.time = -1; |
| } |
| |
| updateLayoutIfNeeded(layoutReason) |
| { |
| // If a layout is pending we can let the base class handle it and return, since that will update |
| // markers and the selection at the same time. |
| if (this.layoutPending) { |
| super.updateLayoutIfNeeded(layoutReason); |
| return; |
| } |
| |
| let visibleWidth = this._recalculate(); |
| if (visibleWidth <= 0) |
| return; |
| |
| if (this._scheduledMarkerLayoutUpdateIdentifier) |
| this._updateMarkers(visibleWidth, this.duration); |
| |
| if (this._scheduledSelectionLayoutUpdateIdentifier) |
| this._updateSelection(visibleWidth, this.duration); |
| } |
| |
| needsLayout(layoutReason) |
| { |
| if (this.layoutPending) |
| return; |
| |
| if (this._scheduledMarkerLayoutUpdateIdentifier) { |
| cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier); |
| this._scheduledMarkerLayoutUpdateIdentifier = undefined; |
| } |
| |
| if (this._scheduledSelectionLayoutUpdateIdentifier) { |
| cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier); |
| this._scheduledSelectionLayoutUpdateIdentifier = undefined; |
| } |
| |
| super.needsLayout(layoutReason); |
| } |
| |
| // Protected |
| |
| layout() |
| { |
| let visibleWidth = this._recalculate(); |
| if (visibleWidth <= 0) |
| return; |
| |
| let duration = this.duration; |
| let pixelsPerSecond = visibleWidth / duration; |
| |
| // Calculate a divider count based on the maximum allowed divider density. |
| let dividerCount = Math.round(visibleWidth / WI.TimelineRuler.MinimumDividerSpacing); |
| let sliceTime; |
| if (this._endTimePinned || !this._currentSliceTime) { |
| // Calculate the slice time based on the rough divider count and the time span. |
| sliceTime = duration / dividerCount; |
| |
| // Snap the slice time to a nearest number (e.g. 0.1, 0.2, 0.5, 1, 2, 5, 10, 20, 50, etc.) |
| sliceTime = Math.pow(10, Math.ceil(Math.log(sliceTime) / Math.LN10)); |
| if (sliceTime * pixelsPerSecond >= 5 * WI.TimelineRuler.MinimumDividerSpacing) |
| sliceTime = sliceTime / 5; |
| if (sliceTime * pixelsPerSecond >= 2 * WI.TimelineRuler.MinimumDividerSpacing) |
| sliceTime = sliceTime / 2; |
| |
| this._currentSliceTime = sliceTime; |
| } else { |
| // Reuse the last slice time since the time duration does not scale to fit when the end time isn't pinned. |
| sliceTime = this._currentSliceTime; |
| } |
| |
| // Calculate the divider count now based on the final slice time. |
| dividerCount = Math.floor(visibleWidth * this.secondsPerPixel / sliceTime); |
| |
| let firstDividerTime = (Math.ceil((this._startTime - this._zeroTime) / sliceTime) * sliceTime) + this._zeroTime; |
| let lastDividerTime = firstDividerTime + sliceTime * dividerCount; |
| |
| // Make an extra divider in case the last one is partially visible. |
| if (!this._endTimePinned) |
| ++dividerCount; |
| |
| let dividerData = { |
| count: dividerCount, |
| firstTime: firstDividerTime, |
| lastTime: lastDividerTime, |
| }; |
| |
| if (Object.shallowEqual(dividerData, this._currentDividers)) { |
| this._updateMarkers(visibleWidth, duration); |
| this._updateSelection(visibleWidth, duration); |
| return; |
| } |
| |
| this._currentDividers = dividerData; |
| |
| let markerDividers = this._markersElement.querySelectorAll("." + WI.TimelineRuler.DividerElementStyleClassName); |
| let dividerElement = this._headerElement.firstChild; |
| |
| for (var i = 0; i <= dividerCount; ++i) { |
| if (!dividerElement) { |
| dividerElement = document.createElement("div"); |
| dividerElement.className = WI.TimelineRuler.DividerElementStyleClassName; |
| this._headerElement.appendChild(dividerElement); |
| |
| let labelElement = document.createElement("div"); |
| labelElement.className = WI.TimelineRuler.DividerLabelElementStyleClassName; |
| dividerElement.appendChild(labelElement); |
| } |
| |
| let markerDividerElement = markerDividers[i]; |
| if (!markerDividerElement) { |
| markerDividerElement = document.createElement("div"); |
| markerDividerElement.className = WI.TimelineRuler.DividerElementStyleClassName; |
| this._markersElement.appendChild(markerDividerElement); |
| } |
| |
| let dividerTime = firstDividerTime + (sliceTime * i); |
| let newPosition = (dividerTime - this._startTime) / duration; |
| |
| if (!this._allowsClippedLabels) { |
| // Don't allow dividers under 0% where they will be completely hidden. |
| if (newPosition < 0) |
| continue; |
| |
| // When over 100% it is time to stop making/updating dividers. |
| if (newPosition > 1) |
| break; |
| |
| // Don't allow the left-most divider spacing to be so tight it clips. |
| if ((newPosition * visibleWidth) < WI.TimelineRuler.MinimumLeftDividerSpacing) |
| continue; |
| } |
| |
| let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left"; |
| this._updatePositionOfElement(dividerElement, newPosition, visibleWidth, property); |
| this._updatePositionOfElement(markerDividerElement, newPosition, visibleWidth, property); |
| |
| console.assert(dividerElement.firstChild.classList.contains(WI.TimelineRuler.DividerLabelElementStyleClassName)); |
| |
| dividerElement.firstChild.textContent = isNaN(dividerTime) ? "" : this._formatDividerLabelText(dividerTime - this._zeroTime); |
| dividerElement = dividerElement.nextSibling; |
| } |
| |
| // Remove extra dividers. |
| while (dividerElement) { |
| let nextDividerElement = dividerElement.nextSibling; |
| dividerElement.remove(); |
| dividerElement = nextDividerElement; |
| } |
| |
| for (; i < markerDividers.length; ++i) |
| markerDividers[i].remove(); |
| |
| this._updateMarkers(visibleWidth, duration); |
| this._updateSelection(visibleWidth, duration); |
| } |
| |
| sizeDidChange() |
| { |
| this._cachedClientWidth = this.element.clientWidth; |
| } |
| |
| // Private |
| |
| _needsMarkerLayout() |
| { |
| // If layout is scheduled, abort since markers will be updated when layout happens. |
| if (this.layoutPending) |
| return; |
| |
| if (this._scheduledMarkerLayoutUpdateIdentifier) |
| return; |
| |
| this._scheduledMarkerLayoutUpdateIdentifier = requestAnimationFrame(() => { |
| this._scheduledMarkerLayoutUpdateIdentifier = undefined; |
| |
| let visibleWidth = this._cachedClientWidth; |
| if (visibleWidth <= 0) |
| return; |
| |
| this._updateMarkers(visibleWidth, this.duration); |
| }); |
| } |
| |
| _needsSelectionLayout() |
| { |
| if (!this._allowsTimeRangeSelection) |
| return; |
| |
| // If layout is scheduled, abort since the selection will be updated when layout happens. |
| if (this.layoutPending) |
| return; |
| |
| if (this._scheduledSelectionLayoutUpdateIdentifier) |
| return; |
| |
| this._scheduledSelectionLayoutUpdateIdentifier = requestAnimationFrame(() => { |
| this._scheduledSelectionLayoutUpdateIdentifier = undefined; |
| |
| let visibleWidth = this._cachedClientWidth; |
| if (visibleWidth <= 0) |
| return; |
| |
| this._updateSelection(visibleWidth, this.duration); |
| }); |
| } |
| |
| _recalculate() |
| { |
| let visibleWidth = this._cachedClientWidth; |
| if (visibleWidth <= 0) |
| return 0; |
| |
| let duration; |
| if (this._endTimePinned) |
| duration = this._endTime - this._startTime; |
| else |
| duration = visibleWidth * this._secondsPerPixel; |
| |
| this._secondsPerPixel = duration / visibleWidth; |
| |
| if (!this._endTimePinned) |
| this._endTime = this._startTime + (visibleWidth * this._secondsPerPixel); |
| |
| return visibleWidth; |
| } |
| |
| _updatePositionOfElement(element, newPosition, visibleWidth, property) |
| { |
| newPosition *= this._endTimePinned ? 100 : visibleWidth; |
| |
| let newPositionAprox = Math.round(newPosition * 100); |
| let currentPositionAprox = Math.round(parseFloat(element.style[property]) * 100); |
| if (currentPositionAprox !== newPositionAprox) |
| element.style[property] = (newPositionAprox / 100) + (this._endTimePinned ? "%" : "px"); |
| } |
| |
| _updateMarkers(visibleWidth, duration) |
| { |
| if (this._scheduledMarkerLayoutUpdateIdentifier) { |
| cancelAnimationFrame(this._scheduledMarkerLayoutUpdateIdentifier); |
| this._scheduledMarkerLayoutUpdateIdentifier = undefined; |
| } |
| |
| for (let [marker, markerElement] of this._markerElementMap) { |
| if (marker.time < 0) { |
| markerElement.remove(); |
| continue; |
| } |
| |
| let newPosition = (marker.time - this._startTime) / duration; |
| let property = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left"; |
| this._updatePositionOfElement(markerElement, newPosition, visibleWidth, property); |
| |
| if (!markerElement.parentNode) |
| this._markersElement.appendChild(markerElement); |
| } |
| } |
| |
| _updateSelection(visibleWidth, duration) |
| { |
| if (this._scheduledSelectionLayoutUpdateIdentifier) { |
| cancelAnimationFrame(this._scheduledSelectionLayoutUpdateIdentifier); |
| this._scheduledSelectionLayoutUpdateIdentifier = undefined; |
| } |
| |
| this.element.classList.toggle("allows-time-range-selection", this._allowsTimeRangeSelection); |
| |
| if (!this._allowsTimeRangeSelection) |
| return; |
| |
| this.element.classList.toggle("selection-hidden", this.entireRangeSelected); |
| |
| if (this.entireRangeSelected) { |
| this._dispatchTimeRangeSelectionChangedEvent(); |
| return; |
| } |
| |
| let startTimeClamped = this._selectionStartTime < this._startTime || this._selectionStartTime > this._endTime; |
| let endTimeClamped = this._selectionEndTime < this._startTime || this._selectionEndTime > this._endTime; |
| |
| this.element.classList.toggle("both-handles-clamped", startTimeClamped && endTimeClamped); |
| |
| let formattedStartTimeText = this._formatDividerLabelText(this._selectionStartTime - this._zeroTime); |
| let formattedEndTimeText = this._formatDividerLabelText(this._selectionEndTime - this._zeroTime); |
| |
| let startProperty = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "right" : "left"; |
| let newStartPosition = Number.constrain((this._selectionStartTime - this._startTime) / duration, 0, 1); |
| this._updatePositionOfElement(this._leftShadedAreaElement, newStartPosition, visibleWidth, "width"); |
| this._updatePositionOfElement(this._leftSelectionHandleElement, newStartPosition, visibleWidth, startProperty); |
| this._updatePositionOfElement(this._selectionDragElement, newStartPosition, visibleWidth, startProperty); |
| |
| this._leftSelectionHandleElement.classList.toggle("clamped", startTimeClamped); |
| this._leftSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionStartTime < this._startTime); |
| this._leftSelectionHandleElement.title = formattedStartTimeText; |
| |
| let endProperty = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL ? "left" : "right"; |
| let newEndPosition = 1 - Number.constrain((this._selectionEndTime - this._startTime) / duration, 0, 1); |
| this._updatePositionOfElement(this._rightShadedAreaElement, newEndPosition, visibleWidth, "width"); |
| this._updatePositionOfElement(this._rightSelectionHandleElement, newEndPosition, visibleWidth, endProperty); |
| this._updatePositionOfElement(this._selectionDragElement, newEndPosition, visibleWidth, endProperty); |
| |
| this._rightSelectionHandleElement.classList.toggle("clamped", endTimeClamped); |
| this._rightSelectionHandleElement.classList.toggle("hidden", startTimeClamped && endTimeClamped && this._selectionEndTime > this._endTime); |
| this._rightSelectionHandleElement.title = formattedEndTimeText; |
| |
| if (!this._selectionDragElement.parentNode) { |
| this.element.appendChild(this._selectionDragElement); |
| this.element.appendChild(this._leftShadedAreaElement); |
| this.element.appendChild(this._leftSelectionHandleElement); |
| this.element.appendChild(this._rightShadedAreaElement); |
| this.element.appendChild(this._rightSelectionHandleElement); |
| } |
| |
| this._dispatchTimeRangeSelectionChangedEvent(); |
| } |
| |
| _formatDividerLabelText(value) |
| { |
| if (this._formatLabelCallback) |
| return this._formatLabelCallback(value); |
| |
| return Number.secondsToString(value, true); |
| } |
| |
| _snapValue(value) |
| { |
| if (!value || !this.snapInterval) |
| return value; |
| |
| return Math.round(value / this.snapInterval) * this.snapInterval; |
| } |
| |
| _dispatchTimeRangeSelectionChangedEvent() |
| { |
| if (!this._timeRangeSelectionChanged) |
| return; |
| |
| this._timeRangeSelectionChanged = false; |
| |
| this.dispatchEventToListeners(WI.TimelineRuler.Event.TimeRangeSelectionChanged); |
| } |
| |
| _timelineMarkerTimeChanged() |
| { |
| this._needsMarkerLayout(); |
| } |
| |
| _shouldIgnoreMicroMovement(event) |
| { |
| if (this._mousePassedMicroMovementTest) |
| return false; |
| |
| let pixels = Math.abs(event.pageX - this._mouseStartX); |
| if (pixels <= 4) |
| return true; |
| |
| this._mousePassedMicroMovementTest = true; |
| return false; |
| } |
| |
| _handleClick(event) |
| { |
| if (!this._enabled) |
| return; |
| |
| if (this._mouseMoved) |
| return; |
| |
| for (let newTarget of document.elementsFromPoint(event.pageX, event.pageY)) { |
| if (!newTarget || typeof newTarget.click !== "function") |
| continue; |
| if (this.element.contains(newTarget)) |
| continue; |
| |
| // Clone the event to dispatch it on the new element. |
| let newEvent = new event.constructor(event.type, event); |
| newTarget.dispatchEvent(newEvent); |
| if (newEvent.__timelineRecordClickEventHandled) |
| event.stop(); |
| return; |
| } |
| } |
| |
| _handleDoubleClick(event) |
| { |
| if (this.entireRangeSelected) |
| return; |
| |
| this.selectEntireRange(); |
| } |
| |
| _handleMouseDown(event) |
| { |
| // Only handle left mouse clicks. |
| if (event.button !== 0 || event.ctrlKey) |
| return; |
| |
| this._selectionIsMove = event.target === this._selectionDragElement; |
| this._rulerBoundingClientRect = this.element.getBoundingClientRect(); |
| |
| if (this._selectionIsMove) { |
| this._lastMousePosition = event.pageX; |
| var selectionDragElementRect = this._selectionDragElement.getBoundingClientRect(); |
| this._moveSelectionMaximumLeftOffset = this._rulerBoundingClientRect.left + (event.pageX - selectionDragElementRect.left); |
| this._moveSelectionMaximumRightOffset = this._rulerBoundingClientRect.right - (selectionDragElementRect.right - event.pageX); |
| } else { |
| if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) |
| this._mouseDownPosition = this._rulerBoundingClientRect.right - event.pageX; |
| else |
| this._mouseDownPosition = event.pageX - this._rulerBoundingClientRect.left; |
| } |
| |
| this._mouseMoved = false; |
| |
| this._mousePassedMicroMovementTest = false; |
| this._mouseStartX = event.pageX; |
| |
| this._mouseMoveEventListener = this._handleMouseMove.bind(this); |
| this._mouseUpEventListener = this._handleMouseUp.bind(this); |
| |
| // Register these listeners on the document so we can track the mouse if it leaves the ruler. |
| document.addEventListener("mousemove", this._mouseMoveEventListener); |
| document.addEventListener("mouseup", this._mouseUpEventListener); |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| |
| _handleMouseMove(event) |
| { |
| console.assert(event.button === 0); |
| |
| if (this._shouldIgnoreMicroMovement(event)) |
| return; |
| |
| this._mouseMoved = true; |
| |
| let isRTL = WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL; |
| |
| let currentMousePosition; |
| if (this._selectionIsMove) { |
| currentMousePosition = Math.max(this._moveSelectionMaximumLeftOffset, Math.min(this._moveSelectionMaximumRightOffset, event.pageX)); |
| |
| let positionDelta = 0; |
| if (isRTL) |
| positionDelta = this._lastMousePosition - currentMousePosition; |
| else |
| positionDelta = currentMousePosition - this._lastMousePosition; |
| |
| let offsetTime = positionDelta * this.secondsPerPixel; |
| let selectionDuration = this.selectionEndTime - this.selectionStartTime; |
| let oldSelectionStartTime = this.selectionStartTime; |
| |
| this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime + offsetTime, this.endTime - selectionDuration)); |
| this.selectionEndTime = this.selectionStartTime + selectionDuration; |
| |
| if (this.snapInterval) { |
| // When snapping we need to check the mouse position delta relative to the last snap, rather than the |
| // last mouse move. If a snap occurs we adjust for the amount the cursor drifted, so that the mouse |
| // position relative to the selection remains constant. |
| let snapOffset = this.selectionStartTime - oldSelectionStartTime; |
| if (!snapOffset) |
| return; |
| |
| let positionDrift = (offsetTime - snapOffset * this.snapInterval) / this.secondsPerPixel; |
| currentMousePosition -= positionDrift; |
| } |
| |
| this._lastMousePosition = currentMousePosition; |
| } else { |
| if (isRTL) |
| currentMousePosition = this._rulerBoundingClientRect.right - event.pageX; |
| else |
| currentMousePosition = event.pageX - this._rulerBoundingClientRect.left; |
| |
| this.selectionStartTime = Math.max(this.startTime, this.startTime + (Math.min(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel)); |
| this.selectionEndTime = Math.min(this.startTime + (Math.max(currentMousePosition, this._mouseDownPosition) * this.secondsPerPixel), this.endTime); |
| |
| // Turn on col-resize cursor style once dragging begins, rather than on the initial mouse down. |
| this.element.classList.add(WI.TimelineRuler.ResizingSelectionStyleClassName); |
| } |
| |
| this._updateSelection(this._cachedClientWidth, this.duration); |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| |
| _handleMouseUp(event) |
| { |
| console.assert(event.button === 0); |
| |
| if (!this._selectionIsMove) { |
| this.element.classList.remove(WI.TimelineRuler.ResizingSelectionStyleClassName); |
| |
| if (this.selectionEndTime - this.selectionStartTime < this.minimumSelectionDuration) { |
| // The section is smaller than allowed, grow in the direction of the drag to meet the minumum. |
| let currentMousePosition = 0; |
| if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) |
| currentMousePosition = this._rulerBoundingClientRect.right - event.pageX; |
| else |
| currentMousePosition = event.pageX - this._rulerBoundingClientRect.left; |
| |
| if (currentMousePosition > this._mouseDownPosition) { |
| this.selectionEndTime = Math.min(this.selectionStartTime + this.minimumSelectionDuration, this.endTime); |
| this.selectionStartTime = this.selectionEndTime - this.minimumSelectionDuration; |
| } else { |
| this.selectionStartTime = Math.max(this.startTime, this.selectionEndTime - this.minimumSelectionDuration); |
| this.selectionEndTime = this.selectionStartTime + this.minimumSelectionDuration; |
| } |
| } |
| } |
| |
| this._dispatchTimeRangeSelectionChangedEvent(); |
| |
| document.removeEventListener("mousemove", this._mouseMoveEventListener); |
| document.removeEventListener("mouseup", this._mouseUpEventListener); |
| |
| delete this._mouseMoveEventListener; |
| delete this._mouseUpEventListener; |
| delete this._mouseDownPosition; |
| delete this._lastMousePosition; |
| delete this._selectionIsMove; |
| delete this._rulerBoundingClientRect; |
| delete this._moveSelectionMaximumLeftOffset; |
| delete this._moveSelectionMaximumRightOffset; |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| |
| _handleSelectionHandleMouseDown(event) |
| { |
| // Only handle left mouse clicks. |
| if (event.button !== 0 || event.ctrlKey) |
| return; |
| |
| this._dragHandleIsStartTime = event.target === this._leftSelectionHandleElement; |
| |
| if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) |
| this._mouseDownPosition = this.element.totalOffsetRight - event.pageX; |
| else |
| this._mouseDownPosition = event.pageX - this.element.totalOffsetLeft; |
| |
| this._selectionHandleMouseMoveEventListener = this._handleSelectionHandleMouseMove.bind(this); |
| this._selectionHandleMouseUpEventListener = this._handleSelectionHandleMouseUp.bind(this); |
| |
| // Register these listeners on the document so we can track the mouse if it leaves the ruler. |
| document.addEventListener("mousemove", this._selectionHandleMouseMoveEventListener); |
| document.addEventListener("mouseup", this._selectionHandleMouseUpEventListener); |
| |
| this.element.classList.add(WI.TimelineRuler.ResizingSelectionStyleClassName); |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| |
| _handleSelectionHandleMouseMove(event) |
| { |
| console.assert(event.button === 0); |
| |
| let currentMousePosition = 0; |
| if (WI.resolvedLayoutDirection() === WI.LayoutDirection.RTL) |
| currentMousePosition = this.element.totalOffsetRight - event.pageX; |
| else |
| currentMousePosition = event.pageX - this.element.totalOffsetLeft; |
| |
| let currentTime = this.startTime + (currentMousePosition * this.secondsPerPixel); |
| if (this.snapInterval) |
| currentTime = this._snapValue(currentTime); |
| |
| if (event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) { |
| // Resize the selection on both sides when the Option keys is held down. |
| if (this._dragHandleIsStartTime) { |
| let timeDifference = currentTime - this.selectionStartTime; |
| this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration)); |
| this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, this.selectionEndTime - timeDifference), this.endTime); |
| } else { |
| let timeDifference = currentTime - this.selectionEndTime; |
| this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime); |
| this.selectionStartTime = Math.max(this.startTime, Math.min(this.selectionStartTime - timeDifference, this.selectionEndTime - this.minimumSelectionDuration)); |
| } |
| } else { |
| // Resize the selection on side being dragged. |
| if (this._dragHandleIsStartTime) |
| this.selectionStartTime = Math.max(this.startTime, Math.min(currentTime, this.selectionEndTime - this.minimumSelectionDuration)); |
| else |
| this.selectionEndTime = Math.min(Math.max(this.selectionStartTime + this.minimumSelectionDuration, currentTime), this.endTime); |
| } |
| |
| this._updateSelection(this._cachedClientWidth, this.duration); |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| |
| _handleSelectionHandleMouseUp(event) |
| { |
| console.assert(event.button === 0); |
| |
| this.element.classList.remove(WI.TimelineRuler.ResizingSelectionStyleClassName); |
| |
| document.removeEventListener("mousemove", this._selectionHandleMouseMoveEventListener); |
| document.removeEventListener("mouseup", this._selectionHandleMouseUpEventListener); |
| |
| delete this._selectionHandleMouseMoveEventListener; |
| delete this._selectionHandleMouseUpEventListener; |
| delete this._dragHandleIsStartTime; |
| delete this._mouseDownPosition; |
| |
| event.preventDefault(); |
| event.stopPropagation(); |
| } |
| }; |
| |
| WI.TimelineRuler.MinimumLeftDividerSpacing = 48; |
| WI.TimelineRuler.MinimumDividerSpacing = 64; |
| |
| WI.TimelineRuler.ResizingSelectionStyleClassName = "resizing-selection"; |
| WI.TimelineRuler.DividerElementStyleClassName = "divider"; |
| WI.TimelineRuler.DividerLabelElementStyleClassName = "label"; |
| |
| WI.TimelineRuler.Event = { |
| TimeRangeSelectionChanged: "time-ruler-time-range-selection-changed" |
| }; |
