@flourish/pocket-knife - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

package.json

 {
   "name": "@flourish/pocket-knife",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Flourish module with handy tools",
@@ -5,0 +5,0 @@ "main": "pocket-knife.js",

README.md

@@ -31,2 +31,10 @@ # Flourish pocket knife
 ### isPale(color_value)
-Returns if color is pale or not
+Returns if color is pale or not
+
+
+### wrapStringToLines(label, label_styles, text_max_lines, max_width)
+Takes a string, and returns an array of strings where each string is one lines worth of text.
+- Label is a string, that you want to be broken up into lines
+- label_styles is a string that can include  font weight, font size and font family in the structure: 'bold 48px serif'. it is what is given to the canvas context font method, and is used to measure the text.
+- text_max_lines is a number that says the maximum amount of lines you want (if you dont have a maximum you can give it null)
+- max_width is a number that states in px the maximum width for the label.

RELEASE_NOTES.md

@@ -0,1 +1,4 @@
+### 0.7.0
+* Add `wrapStringToLines()`
+
 ### 0.6.0
@@ -2,0 +5,0 @@ * Add `isPale()`

src/index.js

@@ -46,2 +46,65 @@ import { color } from "d3-color";
 
-export { getTextWidth, isImage, isPale, isUrl, hexToColor, hexToRgba };
+function wrapStringToLines(text, font_styles, text_max_lines, max_width) {
+	var lines = [];
+	var max_line_width = 0;
+
+	// TODO. Should this be just one canvas rather than one per label
+	var canvas = document.createElement("canvas");
+	var ctx = canvas.getContext("2d");
+	ctx.font = font_styles;
+
+	//  if everything fits in one line, so leave as a single string
+	var text_width = ctx.measureText(text).width;
+	if (text_width <= max_width) {
+		lines.push(text);
+		max_line_width = text_width;
+	}
+
+	// Otherwise…
+	else {
+		// Create array of words
+		var words = text.trim().split(/\s+/g);
+		// Loop through the words, adding them until they won't fit
+		var current_line = "";
+		for (var i = 0; i < words.length; i++) {
+			var word = words[i];
+			var string = current_line + (current_line ? " " : "") + word;
+			var string_width = ctx.measureText(string).width;
+			// If the string including the next word fits, update the
+			// current_line and the max_width
+			if (string_width <= max_width) {
+				current_line = string;
+				max_line_width = Math.max(max_line_width, string_width);
+			}
+			// If we reach this point, the text has overflowed,
+			// so should always result in a truncation or a new line
+			else {
+				var last_line = lines.length + 1 == text_max_lines;
+				if (!last_line && current_line) {
+					lines.push(current_line);
+					var word_width = ctx.measureText(word).width;
+					if (word_width <= max_width) {
+						current_line = word;
+						continue;
+					}
+				}
+				// Truncate
+				var remove_counter = 1;
+				var truncated_string = string;
+				do {
+					truncated_string = string.substring(0, string.length - remove_counter) + "…";
+					string_width = ctx.measureText(truncated_string).width;
+				}
+				while ((string_width > max_width) && (++remove_counter < string.length));
+				max_line_width = Math.max(max_line_width, string_width);
+				current_line = truncated_string;
+				break;
+			}
+		}
+		lines.push(current_line);
+	}
+	lines.widest_line = max_line_width;
+	return lines;
+}
+
+export { getTextWidth, isImage, isPale, isUrl, hexToColor, hexToRgba, wrapStringToLines };

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7069

increased by61.69%

Lines of code

126

increased by88.06%

Number of lines in readme file

39

increased by25.81%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes