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/** 19 * Checker board the range [leftPx, rightPx]. 20 */ 21export function checkerboard( 22 ctx: CanvasRenderingContext2D, 23 heightPx: number, 24 leftPx: number, 25 rightPx: number): void { 26 const widthPx = rightPx - leftPx; 27 ctx.font = '12px Roboto Condensed'; 28 ctx.fillStyle = '#eee'; 29 ctx.fillRect(leftPx, 0, widthPx, heightPx); 30 ctx.fillStyle = '#666'; 31 const oldBaseline = ctx.textBaseline; 32 ctx.textBaseline = 'middle'; 33 if (LOADING_TEXT_WIDTH === 0) { 34 LOADING_TEXT_WIDTH = ctx.measureText(LOADING_TEXT).width; 35 } 36 ctx.fillText( 37 LOADING_TEXT, 38 leftPx + widthPx / 2 - LOADING_TEXT_WIDTH, 39 heightPx / 2, 40 widthPx); 41 ctx.textBaseline = oldBaseline; 42} 43 44/** 45 * Checker board everything between [startPx, endPx] except [leftPx, rightPx]. 46 */ 47export function checkerboardExcept( 48 ctx: CanvasRenderingContext2D, 49 heightPx: number, 50 startPx: number, 51 endPx: number, 52 leftPx: number, 53 rightPx: number): 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