diff --git a/src/renderer/Graphics.ts b/src/renderer/Graphics.ts index 58efb56..cbfba30 100644 --- a/src/renderer/Graphics.ts +++ b/src/renderer/Graphics.ts @@ -88,16 +88,33 @@ export default class Graphics { // number of the line const n = Float.multiply(i, this.spacing); + const n1Width = this.getTextWidth(Graphics.numberToString(n), numberFontSize); + const n2Width = this.getTextWidth(Graphics.numberToString(-n), numberFontSize); + + var x1 = this.center.x - (n1Width / this.ratio + 5) * this.ratio; + var x2 = this.center.x - (n2Width / this.ratio + 5) * this.ratio; + + if(this.center.x - n1Width - 2 * 5 * this.ratio <= 0) { + x1 = 5 * this.ratio; + } + if(this.center.x - n2Width - 2 * 5 * this.ratio <= 0) { + x2 = 5 * this.ratio; + } + if(this.center.x >= this.canvas.width) { + x1 = this.canvas.width - n1Width - 5 * this.ratio; + x2 = this.canvas.width - n2Width - 5 * this.ratio; + } + this.drawNumber( n, - this.center.x - (this.getTextWidth(Graphics.numberToString(n), numberFontSize) / this.ratio + 5) * this.ratio, + x1, y1 + 5 * this.ratio, this.colors.primary, numberFontSize ); this.drawNumber( -n, - this.center.x - (this.getTextWidth(Graphics.numberToString(-n), numberFontSize) / this.ratio + 5) * this.ratio, + x2, y2 + 5 * this.ratio, this.colors.primary, numberFontSize @@ -139,17 +156,29 @@ export default class Graphics { // number of the line const n = Float.multiply(i, this.spacing); + const n1Width = this.getTextWidth(Graphics.numberToString(n), numberFontSize); + const n2Width = this.getTextWidth(Graphics.numberToString(-n), numberFontSize); + const height = this.getTextHeight(Graphics.numberToString(n), numberFontSize); + + var y = this.center.y + 15 * this.ratio; + if(this.center.y <= 0) { + y = 15 * this.ratio; + } + if(this.center.y + height + 2 * (15 * this.ratio - height) >= this.canvas.height) { + y = this.canvas.height - (15 * this.ratio - height); + } + this.drawNumber( n, - x2 - (this.getTextWidth(Graphics.numberToString(n), numberFontSize) / this.ratio / 2) * this.ratio, - this.center.y + 15 * this.ratio, + x2 - (n1Width / this.ratio / 2) * this.ratio, + y, this.colors.primary, numberFontSize ); this.drawNumber( -n, - x1 - (this.getTextWidth(Graphics.numberToString(-n), numberFontSize) / this.ratio / 2) * this.ratio, - this.center.y + 15 * this.ratio, + x1 - (n2Width / this.ratio / 2) * this.ratio, + y, this.colors.primary, numberFontSize ); @@ -318,6 +347,13 @@ export default class Graphics { return this.ctx.measureText(text).width; } + public getTextHeight(text: string, fontSize: number = 20): number { + this.ctx.font = (fontSize * this.ratio) + "px Ubuntu-Regular"; + + var metrics = this.ctx.measureText(text); + return metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; + } + protected pointToCoordinates(point: Point): Point { var unitPx = this.scale; return { diff --git a/src/renderer/Render.ts b/src/renderer/Render.ts index ed8f51d..10a823f 100644 --- a/src/renderer/Render.ts +++ b/src/renderer/Render.ts @@ -379,9 +379,6 @@ export default class Render extends Graphics { // Draw function images for(let i = 0; i < this.displayedPoints.length; i++) { this.drawPoint(this.pointToScreen(this.displayedPoints.get(i)), this.colors.highlight); - // if(i < this.displayedPoints.length - 1) { - // this.drawLine(this.pointToScreen(this.displayedPoints.get(i)), this.pointToScreen(this.displayedPoints.get(i + 1)), this.colors.highlight); - // } } var imageBitmap = this.canvas.transferToImageBitmap();