1// Copyright (C) 2018 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15const LOADING_TEXT = 'Loading...'; 16let LOADING_TEXT_WIDTH = 0; 17 18// Checker board the range [leftPx, rightPx]. 19export function checkerboard( 20 ctx: CanvasRenderingContext2D, 21 heightPx: number, 22 leftPx: number, 23 rightPx: number, 24): void { 25 const widthPx = rightPx - leftPx; 26 ctx.font = '12px Roboto Condensed'; 27 ctx.fillStyle = '#eee'; 28 ctx.fillRect(leftPx, 0, widthPx, heightPx); 29 ctx.fillStyle = '#666'; 30 const oldBaseline = ctx.textBaseline; 31 ctx.textBaseline = 'middle'; 32 if (LOADING_TEXT_WIDTH === 0) { 33 LOADING_TEXT_WIDTH = ctx.measureText(LOADING_TEXT).width; 34 } 35 if (LOADING_TEXT_WIDTH <= widthPx) { 36 ctx.fillText( 37 LOADING_TEXT, 38 leftPx + widthPx / 2 - LOADING_TEXT_WIDTH / 2, 39 heightPx / 2, 40 ); 41 } 42 ctx.textBaseline = oldBaseline; 43} 44 45// Checker board everything between [startPx, endPx] except [leftPx, rightPx]. 46export function checkerboardExcept( 47 ctx: CanvasRenderingContext2D, 48 heightPx: number, 49 startPx: number, 50 endPx: number, 51 leftPx: number, 52 rightPx: number, 53): void { 54 // [leftPx, rightPx] doesn't overlap [startPx, endPx] at all: 55 if (rightPx <= startPx || leftPx >= endPx) { 56 checkerboard(ctx, heightPx, startPx, endPx); 57 return; 58 } 59 60 // Checkerboard [startPx, leftPx]: 61 if (leftPx > startPx) { 62 checkerboard(ctx, heightPx, startPx, leftPx); 63 } 64 65 // Checkerboard [rightPx, endPx]: 66 if (rightPx < endPx) { 67 checkerboard(ctx, heightPx, rightPx, endPx); 68 } 69} 70