pure-canvas - npm Package Compare versions

Comparing version 0.5.19 to 0.5.20

lib/Text.js

@@ -12,8 +12,30 @@ "use strict";
 }
+function getBounds(x, y, fontStyle, fontVariant, fontWeight, fontSize, fontFamily, textBaseline, textAlign, text) {
+    const width = measureWidth(`${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`, text);
+    let startY = 0;
+    if (textBaseline === 'top' || textBaseline === 'hanging') {
+        startY = 0;
+    }
+    else if (textBaseline === 'middle') {
+        startY = -fontSize / 2;
+    }
+    else if (textBaseline === 'alphabetic' || textBaseline === 'ideographic' || textBaseline === 'bottom') {
+        startY = -fontSize;
+    }
+    let startX = 0;
+    if (textAlign === 'left' || textAlign === 'start') {
+        startX = 0;
+    }
+    else if (textAlign === 'center') {
+        startX = -width / 2;
+    }
+    else if (textAlign === 'right' || textAlign === 'end') {
+        startX = -width;
+    }
+    return { minX: x + startX, minY: y + startY, maxX: x + startX + width, maxY: y + startY + fontSize };
+}
 class Text extends NodeFixedBounds_1.default {
-    constructor({ x = 0, y = 0, fillStyle = 'rgba(0, 0, 0, 1)', fontStyle = 'normal', fontVariant = 'normal', fontWeight = 'normal', fontSize = 10, fontFamily = 'sans-serif', text }) {
-        super({ minX: x, minY: y - fontSize, maxX: x + measureWidth(`${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`, text), maxY: y });
-        /* The following three values are necessary to guarantee correct measurements */
-        this.textBaseline = 'alphabetic';
-        this.textAlign = 'start';
+    constructor({ x = 0, y = 0, fillStyle = 'rgba(0, 0, 0, 1)', fontStyle = 'normal', fontVariant = 'normal', fontWeight = 'normal', fontSize = 10, fontFamily = 'sans-serif', textBaseline = 'alphabetic', textAlign = 'start', text }) {
+        super(getBounds(x, y, fontStyle, fontVariant, fontWeight, fontSize, fontFamily, textBaseline, textAlign, text));
+        /* The following value is necessary to guarantee correct measurements */
         this.direction = 'ltr';
@@ -24,2 +46,4 @@ this.x = x;
         this.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        this.textBaseline = textBaseline;
+        this.textAlign = textAlign;
         this.text = text;
@@ -26,0 +50,0 @@ }

package.json

 {
   "name": "pure-canvas",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "TODO",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/Text.ts

@@ -1,2 +0,2 @@
-import Node, {Point} from './Node';
+import Node, {Bounds, Point} from './Node';
 import NodeFixedBounds from './NodeFixedBounds';
@@ -14,2 +14,23 @@
 
+function getBounds(x: number, y: number, fontStyle: string, fontVariant: string, fontWeight: string, fontSize: number, fontFamily: string, textBaseline: string, textAlign: string, text: string): Bounds {
+    const width = measureWidth(`${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`, text);
+    let startY = 0;
+    if (textBaseline === 'top' || textBaseline === 'hanging') {
+        startY = 0;
+    } else if (textBaseline === 'middle') {
+        startY = -fontSize / 2;
+    } else if (textBaseline === 'alphabetic' || textBaseline === 'ideographic' || textBaseline === 'bottom') {
+        startY = -fontSize;
+    }
+    let startX = 0;
+    if (textAlign === 'left' || textAlign === 'start') {
+        startX = 0;
+    } else if (textAlign === 'center') {
+        startX = -width / 2;
+    } else if (textAlign === 'right' || textAlign === 'end') {
+        startX = -width;
+    }
+    return {minX: x + startX, minY: y + startY, maxX: x + startX + width, maxY: y + startY + fontSize};
+}
+
 export interface TextParameters {
@@ -24,2 +45,4 @@ x?: number;
     fontFamily?: string;
+    textBaseline?: string;
+    textAlign?: string;
     text: string;
@@ -34,9 +57,9 @@ }
     private text: string;
-    /* The following three values are necessary to guarantee correct measurements */
-    private textBaseline: string = 'alphabetic';
-    private textAlign: string = 'start';
+    private textBaseline: string;
+    private textAlign: string;
+    /* The following value is necessary to guarantee correct measurements */
     private direction: string = 'ltr';
 
-    constructor({x = 0, y = 0, fillStyle = 'rgba(0, 0, 0, 1)', fontStyle = 'normal', fontVariant = 'normal', fontWeight = 'normal', fontSize = 10, fontFamily = 'sans-serif', text}: TextParameters) {
-        super({minX: x, minY: y - fontSize, maxX: x + measureWidth(`${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`, text), maxY: y});
+    constructor({x = 0, y = 0, fillStyle = 'rgba(0, 0, 0, 1)', fontStyle = 'normal', fontVariant = 'normal', fontWeight = 'normal', fontSize = 10, fontFamily = 'sans-serif', textBaseline = 'alphabetic', textAlign = 'start', text}: TextParameters) {
+        super(getBounds(x, y, fontStyle, fontVariant, fontWeight, fontSize, fontFamily, textBaseline, textAlign, text));
         this.x = x;
@@ -46,2 +69,4 @@ this.y = y;
         this.font = `${fontStyle} ${fontVariant} ${fontWeight} ${fontSize}px ${fontFamily}`;
+        this.textBaseline = textBaseline;
+        this.textAlign = textAlign;
         this.text = text;
@@ -48,0 +73,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

214748

increased by1.7%

Lines of code

2659

increased by1.88%

No dependency changes