diff --git a/assets/help/help.json b/assets/help/help.json index ae3fd656..c80a7134 100644 --- a/assets/help/help.json +++ b/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." diff --git a/docs/save.md b/docs/save.md index 5fa35252..a27aad0f 100644 --- a/docs/save.md +++ b/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 diff --git a/js/index.js b/js/index.js index 78a45c3d..06eb40a3 100644 --- a/js/index.js +++ b/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 = { diff --git a/js/visual_objects/visual_object.js b/js/visual_objects/visual_object.js index b6d78995..e5c7349b 100644 --- a/js/visual_objects/visual_object.js +++ b/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; } -} \ No newline at end of file +} diff --git a/js/visual_objects/visual_object_property.js b/js/visual_objects/visual_object_property.js index 03ea6286..56c5111f 100644 --- a/js/visual_objects/visual_object_property.js +++ b/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