Merge pull request #607 from tradingview/606-update-scales-design

Updated scales design

.circleci/config.yml

@@ -74,7 +74,10 @@ commands:
             echo 'export TESTS_REPORT_FILE="test-results/graphics/results.xml"' >> $BASH_ENV
             echo 'export DEVICE_PIXEL_RATIO=<< parameters.devicePixelRatio >>' >> $BASH_ENV
             echo 'export PRODUCTION_BUILD=<< parameters.productionBuild >>' >> $BASH_ENV
-      - run: scripts/run-graphics-tests.sh
+      - run:
+          command: scripts/run-graphics-tests.sh
+          no_output_timeout: 20m
+
       - store_test_results:
           path: test-results/
       - store_artifacts:

.size-limit.js

@@ -4,11 +4,11 @@ module.exports = [
 	{
 		name: 'ESM',
 		path: 'dist/lightweight-charts.esm.production.js',
-		limit: '43.05 KB',
+		limit: '43.8 KB',
 	},
 	{
 		name: 'Standalone',
 		path: 'dist/lightweight-charts.standalone.production.js',
-		limit: '43.62 KB',
+		limit: '44.37 KB',
 	},
 ];

src/api/options/crosshair-options-defaults.ts

@@ -3,20 +3,20 @@ import { LineStyle } from '../../renderers/draw-line';
 
 export const crosshairOptionsDefaults: CrosshairOptions = {
 	vertLine: {
-		color: '#758696',
+		color: '#9598A1',
 		width: 1,
 		style: LineStyle.LargeDashed,
 		visible: true,
 		labelVisible: true,
-		labelBackgroundColor: '#4c525e',
+		labelBackgroundColor: '#131722',
 	},
 	horzLine: {
-		color: '#758696',
+		color: '#9598A1',
 		width: 1,
 		style: LineStyle.LargeDashed,
 		visible: true,
 		labelVisible: true,
-		labelBackgroundColor: '#4c525e',
+		labelBackgroundColor: '#131722',
 	},
 	mode: CrosshairMode.Magnet,
 };

src/api/options/layout-options-defaults.ts

@@ -8,6 +8,6 @@ export const layoutOptionsDefaults: LayoutOptions = {
 		color: '#FFFFFF',
 	},
 	textColor: '#191919',
-	fontSize: 11,
+	fontSize: 12,
 	fontFamily: defaultFontFamily,
 };

src/api/options/price-scale-options-defaults.ts

@@ -9,7 +9,7 @@ export const priceScaleOptionsDefaults: PriceScaleOptions = {
 	borderColor: '#2B2B43',
 	entireTextOnly: false,
 	visible: false,
-	ticksVisible: true,
+	ticksVisible: false,
 	scaleMargins: {
 		bottom: 0.1,
 		top: 0.2,

src/api/options/time-scale-options-defaults.ts

@@ -14,5 +14,5 @@ export const timeScaleOptionsDefaults: TimeScaleOptions = {
 	timeVisible: false,
 	secondsVisible: true,
 	shiftVisibleRangeOnNewBar: true,
-	ticksVisible: true,
+	ticksVisible: false,
 };

src/gui/labels-image-cache.ts

@@ -67,11 +67,11 @@ export class LabelsImageCache implements IDestroyable {
 
 			const pixelRatio = getCanvasDevicePixelRatio(ctx.canvas);
 
-			const margin = Math.ceil(this._fontSize / 4.5);
 			const baselineOffset = Math.round(this._fontSize / 10);
 			const textWidth = Math.ceil(this._textWidthCache.measureText(ctx, text));
-			const width = ceiledEven(Math.round(textWidth + margin * 2));
-			const height = ceiledEven(this._fontSize + margin * 2);
+			// small reserve for antialiasing, measureText is not sharp
+			const width = ceiledEven(Math.round(textWidth) + 4);
+			const height = ceiledEven(this._fontSize);
 			const canvas = createPreconfiguredCanvas(document, new Size(width, height));
 
 			// Allocate new
@@ -92,7 +92,7 @@ export class LabelsImageCache implements IDestroyable {
 			drawScaled(ctx, pixelRatio, () => {
 				ctx.font = this._font;
 				ctx.fillStyle = this._color;
-				ctx.fillText(text, 0, height - margin - baselineOffset);
+				ctx.fillText(text, 0, height - baselineOffset);
 			});
 		}
 

src/gui/price-axis-widget.ts

@@ -35,6 +35,10 @@ const enum Constants {
 
 type IPriceAxisViewArray = readonly IPriceAxisView[];
 
+const enum Constants {
+	LabelOffset = 5,
+}
+
 export class PriceAxisWidget implements IDestroyable {
 	private readonly _pane: PaneWidget;
 	private readonly _options: LayoutOptions;
@@ -216,9 +220,11 @@ export class PriceAxisWidget implements IDestroyable {
 			rendererOptions.tickLength +
 			rendererOptions.paddingInner +
 			rendererOptions.paddingOuter +
+			Constants.LabelOffset +
 			resultTickMarksMaxWidth
 		);
-		// make it even
+
+		// make it even, remove this after migration to perfect fancy canvas
 		res += res % 2;
 		return res;
 	}
@@ -448,8 +454,8 @@ export class PriceAxisWidget implements IDestroyable {
 		const rendererOptions = this.rendererOptions();
 
 		const tickMarkLeftX = this._isLeft ?
-			Math.floor((this._size.w - rendererOptions.tickLength) * pixelRatio - rendererOptions.borderSize * pixelRatio) :
-			Math.floor(rendererOptions.borderSize * pixelRatio);
+			Math.floor((this._size.w - rendererOptions.tickLength) * pixelRatio) :
+			0;
 
 		const textLeftX = this._isLeft ?
 			Math.round(tickMarkLeftX - rendererOptions.paddingInner * pixelRatio) :

src/gui/time-axis-widget.ts

@@ -21,7 +21,7 @@ import { PriceAxisStub, PriceAxisStubParams } from './price-axis-stub';
 
 const enum Constants {
 	BorderSize = 1,
-	TickLength = 3,
+	TickLength = 5,
 }
 
 const enum CursorType {
@@ -251,7 +251,8 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 			rendererOptions.tickLength +
 			rendererOptions.fontSize +
 			rendererOptions.paddingTop +
-			rendererOptions.paddingBottom
+			rendererOptions.paddingBottom +
+			rendererOptions.labelBottomOffset
 		);
 	}
 
@@ -338,14 +339,13 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 			rendererOptions.borderSize +
 			rendererOptions.tickLength +
 			rendererOptions.paddingTop +
-			rendererOptions.fontSize -
-			rendererOptions.baselineOffset
+			rendererOptions.fontSize / 2
 		);
 
 		ctx.textAlign = 'center';
+		ctx.textBaseline = 'middle';
 		ctx.fillStyle = this._lineColor();
 
-		const borderSize = Math.floor(this._getRendererOptions().borderSize * pixelRatio);
 		const tickWidth = Math.max(1, Math.floor(pixelRatio));
 		const tickOffset = Math.floor(pixelRatio * 0.5);
 
@@ -355,7 +355,7 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 			const tickLen = Math.round(rendererOptions.tickLength * pixelRatio);
 			for (let index = tickMarks.length; index--;) {
 				const x = Math.round(tickMarks[index].coord * pixelRatio);
-				ctx.rect(x - tickOffset, borderSize, tickWidth, tickLen);
+				ctx.rect(x - tickOffset, 0, tickWidth, tickLen);
 			}
 
 			ctx.fill();
@@ -441,6 +441,7 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 				fontSize: NaN,
 				font: '',
 				widthCache: new TextWidthCache(),
+				labelBottomOffset: 0,
 			};
 		}
 
@@ -451,10 +452,11 @@ export class TimeAxisWidget implements MouseEventHandlers, IDestroyable {
 			const fontSize = this._fontSize();
 			rendererOptions.fontSize = fontSize;
 			rendererOptions.font = newFont;
-			rendererOptions.paddingTop = Math.ceil(fontSize / 2.5);
-			rendererOptions.paddingBottom = rendererOptions.paddingTop;
-			rendererOptions.paddingHorizontal = Math.ceil(fontSize / 2);
-			rendererOptions.baselineOffset = Math.round(this._fontSize() / 5);
+			rendererOptions.paddingTop = 3 * fontSize / 12;
+			rendererOptions.paddingBottom = 3 * fontSize / 12;
+			rendererOptions.paddingHorizontal = 9 * fontSize / 12;
+			rendererOptions.baselineOffset = 0;
+			rendererOptions.labelBottomOffset = 4 * fontSize / 12;
 			rendererOptions.widthCache.reset();
 		}
 

src/helpers/canvas-helpers.ts

@@ -51,6 +51,121 @@ export function clearRect(ctx: CanvasRenderingContext2D, x: number, y: number, w
 	ctx.restore();
 }
 
+export type TopBottomRadii = [number, number];
+export type LeftTopRightTopRightBottomLeftBottomRadii = [number, number, number, number];
+export type DrawRoundRectRadii = number | TopBottomRadii | LeftTopRightTopRightBottomLeftBottomRadii;
+
+function changeBorderRadius(borderRadius: DrawRoundRectRadii, offset: number): typeof borderRadius {
+	if (Array.isArray(borderRadius)) {
+		return borderRadius.map((x: number) => x === 0 ? x : x + offset) as typeof borderRadius;
+	}
+	return borderRadius + offset;
+}
+
+export function drawRoundRect(
+	// eslint:disable-next-line:max-params
+	ctx: CanvasRenderingContext2D,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+	radii: DrawRoundRectRadii
+): void {
+	let radiusLeftTop: number;
+	let radiusRightTop: number;
+	let radiusRightBottom: number;
+	let radiusLeftBottom: number;
+
+	if (!Array.isArray(radii)) {
+		const oneRadius = Math.max(0, radii);
+		radiusLeftTop = oneRadius;
+		radiusRightTop = oneRadius;
+		radiusRightBottom = oneRadius;
+		radiusLeftBottom = oneRadius;
+	} else if (radii.length === 2) {
+		const cornerRadius1 = Math.max(0, radii[0]);
+		const cornerRadius2 = Math.max(0, radii[1]);
+		radiusLeftTop = cornerRadius1;
+		radiusRightTop = cornerRadius1;
+		radiusRightBottom = cornerRadius2;
+		radiusLeftBottom = cornerRadius2;
+	} else if (radii.length === 4) {
+		radiusLeftTop = Math.max(0, radii[0]);
+		radiusRightTop = Math.max(0, radii[1]);
+		radiusRightBottom = Math.max(0, radii[2]);
+		radiusLeftBottom = Math.max(0, radii[3]);
+	} else {
+		throw new Error(`Wrong border radius - it should be like css border radius`);
+	}
+
+	ctx.beginPath();
+	ctx.moveTo(x + radiusLeftTop, y);
+	ctx.lineTo(x + w - radiusRightTop, y);
+	if (radiusRightTop !== 0) {
+		ctx.arcTo(x + w, y, x + w, y + radiusRightTop, radiusRightTop);
+	}
+
+	ctx.lineTo(x + w, y + h - radiusRightBottom);
+	if (radiusRightBottom !== 0) {
+		ctx.arcTo(x + w, y + h, x + w - radiusRightBottom, y + h, radiusRightBottom);
+	}
+
+	ctx.lineTo(x + radiusLeftBottom, y + h);
+	if (radiusLeftBottom !== 0) {
+		ctx.arcTo(x, y + h, x, y + h - radiusLeftBottom, radiusLeftBottom);
+	}
+
+	ctx.lineTo(x, y + radiusLeftTop);
+	if (radiusLeftTop !== 0) {
+		ctx.arcTo(x, y, x + radiusLeftTop, y, radiusLeftTop);
+	}
+}
+
+// eslint-disable-next-line max-params
+export function drawRoundRectWithInnerBorder(
+	ctx: CanvasRenderingContext2D,
+	left: number,
+	top: number,
+	width: number,
+	height: number,
+	backgroundColor: string,
+	borderWidth: number = 0,
+	borderRadius: DrawRoundRectRadii = 0,
+	borderColor: string = ''
+): void {
+	ctx.save();
+
+	if (!borderWidth || !borderColor || borderColor === backgroundColor) {
+		drawRoundRect(ctx, left, top, width, height, borderRadius);
+		ctx.fillStyle = backgroundColor;
+		ctx.fill();
+		ctx.restore();
+		return;
+	}
+
+	const halfBorderWidth = borderWidth / 2;
+
+	// Draw body
+	if (backgroundColor !== 'transparent') {
+		const innerRadii = changeBorderRadius(borderRadius, - borderWidth);
+		drawRoundRect(ctx, left + borderWidth, top + borderWidth, width - borderWidth * 2, height - borderWidth * 2, innerRadii);
+
+		ctx.fillStyle = backgroundColor;
+		ctx.fill();
+	}
+
+	// Draw border
+	if (borderColor !== 'transparent') {
+		const outerRadii = changeBorderRadius(borderRadius, - halfBorderWidth);
+		drawRoundRect(ctx, left + halfBorderWidth, top + halfBorderWidth, width - borderWidth, height - borderWidth, outerRadii);
+
+		ctx.lineWidth = borderWidth;
+		ctx.strokeStyle = borderColor;
+		ctx.closePath();
+		ctx.stroke();
+	}
+}
+
 // eslint-disable-next-line max-params
 export function clearRectWithGradient(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, topColor: string, bottomColor: string): void {
 	ctx.save();

src/model/price-scale.ts

@@ -164,7 +164,7 @@ export interface PriceScaleOptions {
 	/**
 	 * Draw small horizontal line on price axis labels.
 	 *
-	 * @defaultValue `true`
+	 * @defaultValue `false`
 	 */
 	ticksVisible: boolean;
 }