Adding in font-family for text

assets/help/help.json

@@ -32,6 +32,7 @@
             "text": {
                 "type": "Sets the text type. The text may be automatically generated depending of the setting.",
                 "text_content": "Sets the text to display, when allowed.",
+                "font_family": "Sets the font family of the text",
                 "font_size": "Sets the font size in pixels.",
                 "decoration": "Respectively toggle italic, bold, underline, overline, and line through on the text.",
                 "text_align": "Sets how the text should align itself in the container."

docs/save.md

@@ -771,6 +771,7 @@ This is documented from a created save with default values. For more information
     "visual_object_type": "text",
     "text_type": "any",
     "text_content": "text",
+    "font_family" : "verdana",
     "font_size": 20,
     "color": "#ffffff",
     "text_decoration": {
@@ -1014,6 +1015,10 @@ This is documented from a created save with default values. For more information
         - **type:** String
         - **allowed values:** Any string without any "\".
         - **description:** Text content displayed by the object.
+    - `font_family`:
+        - **type:** String
+        - **allowed values:** serif, sans-serif, monospace, cursive, fantasy...
+        - **description:** Font family of the displayed text.        
     - `font_size`:
         - **type:** integer
         - **allowed values:** value >= 0

js/index.js

@@ -421,6 +421,7 @@ class SaveHandler {
             object.svg_filter = old_object.svg_filters;
             object.text_type = old_object.type;
             object.text_content = old_object.text;
+            object.font_family = old_object.font_family;
             object.font_size = old_object.font_size;
             object.color = old_object.color;
             object.text_decoration = {

js/visual_objects/visual_object.js

@@ -316,6 +316,7 @@ export class VText extends VisualObject {
 
         this._properties["text_type"] = new property.VPTextType(this._save_handler, this);
         this._properties["text_content"] = new property.VPTextContent(this._save_handler, this);
+	this._properties["font_family"] = new property.VPFontFamily(this._save_handler, this);
         this._properties["font_size"] = new property.VPFontSize(this._save_handler, this);
         this._properties["color"] = new property.VPColor(this._save_handler, this);
         this._properties["text_decoration"] = new property.VPTextDecoration(this._save_handler, this);
@@ -345,6 +346,10 @@ export class VText extends VisualObject {
             this._element.innerHTML = value;
         });
 
+	this._properties["font_family"].subscribeToEvent("value_changed", (value) => {
+            this._element.style.fontFamily = value;
+        });
+
         this._properties["font_size"].subscribeToEvent("value_changed", (value) => {
             this._element.style.fontSize = value + "px";
         });
@@ -1815,4 +1820,4 @@ export class VShape extends VisualObject {
         return true;
     }
 
-}
+}

js/visual_objects/visual_object_property.js

@@ -48,6 +48,7 @@ const DEFAULTS = {
 
     TEXT_TYPE: "any",
     TEXT_CONTENT: "text",
+    FONT_FAMILY: "verdana",
     FONT_SIZE: 20,
     TEXT_DECORATION: {
         italic: false,
@@ -1332,7 +1333,65 @@ export class VPTextContent extends VisualObjectProperty {
     }
 }
 
+/**
+ * font family property, font family for the object.
+ *
+ * @export
+ * @class VPFontFamily
+ * @extends {VisualObjectProperty}
+ */
+export class VPFontFamily extends VisualObjectProperty {
+    /**
+     * Creates an instance of VPFontFamily.
+     * @param {SaveHandler} save_handler The SaveHandler to read and write from.
+     * @param {object.VisualObject} visual_object The VisualObject that it manipulates.
+     * @memberof VPFontFamily
+     */
+    constructor(save_handler, visual_object) {
+        super(save_handler, visual_object, "font_family");
+
+        // create associated UI        
+        if (!this._save_handler.owner_project.export_mode) {
+            this._ui_parameter = new ui_components.UIParameterString(
+                this._visual_object.parameter_rack,
+                "Font family",
+                this.getCurrentValue(),
+                () => {
+                    this.setSaveUISafe(this._ui_parameter.value);
+                }
+            );
+            this._ui_parameter.help_string = help.parameter.object.text.font_family;
+        }
+    }
+
+    /**
+     * Get the default value of the visual object property.
+     * If it is undefined, assign a value.
+     *
+     * @memberof VPFontFamily
+     * @override
+     * @return {String}
+     */
+    getDefaultValue() {
+        if (this._default_value) return this._default_value;
+        else {
+            this._default_value = DEFAULTS.FONT_FAMILY;
+            return this._default_value;
+        };
+    }
 
+    /**
+     * Only checking for \ like the text_content. Could possibly add validation to state if the font exists. 
+     *
+     * @override
+     * @param {*} value
+     * @return {Boolean} is valid
+     * @memberof VPFontFamily
+     */
+    hasValidValue(value) {
+        return (!utils.IsUndefined(value) && utils.IsAString(value) && !(value.indexOf("\\") > -1));
+    }
+}
 
 /**
  * Visual property to set the font size of a text based object