()
| 324 | } |
| 325 | |
| 326 | private updateRangesPane(): void { |
| 327 | const clientHeight = window.innerHeight; |
| 328 | const rangesIsHidden = this.ranges.style.visibility === "hidden"; |
| 329 | const resizerSize = rangesIsHidden ? 0 : this.RESIZER_SIZE; |
| 330 | const sepRangesHeight = rangesIsHidden ? clientHeight : this.sepRangesHeight; |
| 331 | const sepRangesX = rangesIsHidden ? this.sepRight : this.sepRangesX; |
| 332 | |
| 333 | this.snapper.rangesUpdate(this.snapper.rangesShowHide.dataset.expanded === "1"); |
| 334 | |
| 335 | const inLandscapeMode = this.isRangesInLandscapeMode(); |
| 336 | const rangeHeight = inLandscapeMode ? clientHeight - sepRangesHeight : clientHeight; |
| 337 | this.ranges.style.height = `${rangeHeight}px`; |
| 338 | const panelWidth = this.sepRight - this.sepLeft - (2 * resizerSize); |
| 339 | const rangeWidth = inLandscapeMode ? panelWidth : this.sepRight - sepRangesX; |
| 340 | this.ranges.style.width = `${rangeWidth}px`; |
| 341 | const multiview = document.getElementById(C.MULTIVIEW_ID); |
| 342 | if (multiview && multiview.style) { |
| 343 | multiview.style.height = |
| 344 | `${(inLandscapeMode ? sepRangesHeight - resizerSize : clientHeight)}px`; |
| 345 | const midWidth = inLandscapeMode ? panelWidth : sepRangesX - this.sepLeft - (3 * resizerSize); |
| 346 | multiview.style.width = `${midWidth}px`; |
| 347 | if (inLandscapeMode) { |
| 348 | this.middle.classList.remove("display-inline-flex"); |
| 349 | } else { |
| 350 | this.middle.classList.add("display-inline-flex"); |
| 351 | } |
| 352 | } |
| 353 | |
| 354 | // Resize the range grid and labels. |
| 355 | const rangeGrid = (this.ranges.getElementsByClassName("range-grid")[0] as HTMLElement); |
| 356 | if (rangeGrid) { |
| 357 | const yAxis = (this.ranges.getElementsByClassName("range-y-axis")[0] as HTMLElement); |
| 358 | const rangeHeader = (this.ranges.getElementsByClassName("range-header")[0] as HTMLElement); |
| 359 | const rangeTitle = (this.ranges.getElementsByClassName("range-title-div")[0] as HTMLElement); |
| 360 | |
| 361 | let gridWidth = rangeWidth - yAxis.clientWidth; |
| 362 | |
| 363 | if (this.ranges.classList.contains("flipped")) { |
| 364 | const rangeRegisters = |
| 365 | (this.ranges.getElementsByClassName("range-registers")[0] as HTMLElement); |
| 366 | if (rangeRegisters.offsetWidth + C.FLIPPED_REGISTER_WIDTH_BUFFER < gridWidth) { |
| 367 | gridWidth = Math.floor(rangeRegisters.offsetWidth + rangeGrid.offsetWidth |
| 368 | - rangeGrid.clientWidth + C.FLIPPED_REGISTER_WIDTH_BUFFER); |
| 369 | } |
| 370 | } |
| 371 | |
| 372 | rangeTitle.style.width = `${rangeWidth}px`; |
| 373 | rangeGrid.style.width = `${gridWidth - 1}px`; |
| 374 | // Take live ranges' right scrollbar into account. |
| 375 | rangeHeader.style.width = |
| 376 | `${(gridWidth - rangeGrid.offsetWidth + rangeGrid.clientWidth - 1)}px`; |
| 377 | this.resizerRanges.style("width", inLandscapeMode ? `${rangeWidth}px` : `${resizerSize}px`); |
| 378 | this.resizerRanges.style("height", |
| 379 | inLandscapeMode ? `${resizerSize}px` : `${clientHeight}px`); |
| 380 | |
| 381 | const rangeHeaderLabel = |
| 382 | (this.ranges.getElementsByClassName("range-header-label-x")[0] as HTMLElement); |
| 383 | const gridHeight = rangeHeight - rangeHeader.clientHeight |
no test coverage detected