From c308485ce15a30f2544a2fccb6da5d7aa191649d Mon Sep 17 00:00:00 2001 From: Artur Date: Fri, 26 Nov 2021 10:26:57 +0200 Subject: [PATCH] TG update for PaperSheet.js Co-authored-by: Ghom <42542238+Ghommie@users.noreply.github.com> --- tgui/packages/tgui/interfaces/PaperSheet.js | 159 ++++++++++++-------- 1 file changed, 99 insertions(+), 60 deletions(-) diff --git a/tgui/packages/tgui/interfaces/PaperSheet.js b/tgui/packages/tgui/interfaces/PaperSheet.js index 06ec7142f3..9878eaab24 100644 --- a/tgui/packages/tgui/interfaces/PaperSheet.js +++ b/tgui/packages/tgui/interfaces/PaperSheet.js @@ -4,11 +4,11 @@ * @author Original WarlockD (https://github.com/warlockd) * @author Changes stylemistake * @author Changes ThePotato97 + * @author Changes Ghommie * @license MIT */ import { classes } from 'common/react'; -import { Fragment } from 'inferno'; import { Component } from 'inferno'; import marked from 'marked'; import { useBackend } from '../backend'; @@ -31,7 +31,7 @@ const textWidth = (text, font, fontsize) => { const setFontinText = (text, font, color, bold=false) => { return " { height="100%" > + <> - + ); } } +// This creates the html from marked text as well as the form fields +const createPreview = ( + value, + text, + do_fields = false, + field_counter, + color, + font, + user_name, + is_crayon = false, +) => { + const out = { text: text }; + // check if we are adding to paper, if not + // we still have to check if someone entered something + // into the fields + value = value.trim(); + if (value.length > 0) { + // First lets make sure it ends in a new line + value += value[value.length] === "\n" ? " \n" : "\n \n"; + // Second, we sanitize the text of html + const sanitized_text = sanitizeText(value); + const signed_text = signDocument(sanitized_text, color, user_name); + // Third we replace the [__] with fields as markedjs fucks them up + const fielded_text = createFields( + signed_text, font, 12, color, field_counter); + // Fourth, parse the text using markup + const formatted_text = run_marked_default(fielded_text.text); + // Fifth, we wrap the created text in the pin color, and font. + // crayon is bold ( tags), maybe make fountain pin italic? + const fonted_text = setFontinText( + formatted_text, font, color, is_crayon); + out.text += fonted_text; + out.field_counter = fielded_text.counter; + } + if (do_fields) { + // finally we check all the form fields to see + // if any data was entered by the user and + // if it was return the data and modify the text + const final_processing = checkAllFields( + out.text, font, color, user_name, is_crayon); + out.text = final_processing.text; + out.form_fields = final_processing.fields; + } + return out; +}; + // ugh. So have to turn this into a full // component too if I want to keep updates // low and keep the weird flashing down @@ -367,58 +412,24 @@ class PaperSheetEdit extends Component { this.state = { previewSelected: "Preview", old_text: props.value || "", + counter: props.counter || 0, textarea_text: "", combined_text: props.value || "", }; } - // This is the main rendering part, this creates the html from marked text - // as well as the form fields - createPreview(value, do_fields = false) { + createPreviewFromData(value, do_fields = false) { const { data } = useBackend(this.context); - const { - text, - pen_color, - pen_font, - is_crayon, - field_counter, - edit_usr, - } = data; - const out = { text: text }; - // check if we are adding to paper, if not - // we still have to check if someone entered something - // into the fields - value = value.trim(); - if (value.length > 0) { - // First lets make sure it ends in a new line - value += value[value.length] === "\n" ? " \n" : "\n \n"; - // Second, we sanitize the text of html - const sanitized_text = sanitizeText(value); - const signed_text = signDocument(sanitized_text, pen_color, edit_usr); - // Third we replace the [__] with fields as markedjs fucks them up - const fielded_text = createFields( - signed_text, pen_font, 12, pen_color, field_counter); - // Fourth, parse the text using markup - const formatted_text = run_marked_default(fielded_text.text); - // Fifth, we wrap the created text in the pin color, and font. - // crayon is bold ( tags), maybe make fountain pin italic? - const fonted_text = setFontinText( - formatted_text, pen_font, pen_color, is_crayon); - out.text += fonted_text; - out.field_counter = fielded_text.counter; - } - if (do_fields) { - // finally we check all the form fields to see - // if any data was entered by the user and - // if it was return the data and modify the text - const final_processing = checkAllFields( - out.text, pen_font, pen_color, edit_usr, is_crayon); - out.text = final_processing.text; - out.form_fields = final_processing.fields; - } - return out; + return createPreview(value, + this.state.old_text, + do_fields, + this.state.counter, + data.pen_color, + data.pen_font, + data.edit_usr, + data.is_crayon, + ); } - onInputHandler(e, value) { if (value !== this.state.textarea_text) { const combined_length = this.state.old_text.length @@ -439,19 +450,21 @@ class PaperSheetEdit extends Component { } this.setState(() => ({ textarea_text: value, - combined_text: this.createPreview(value), + combined_text: this.createPreviewFromData(value), })); } } // the final update send to byond, final upkeep finalUpdate(new_text) { const { act } = useBackend(this.context); - const final_processing = this.createPreview(new_text, true); + const final_processing = this.createPreviewFromData(new_text, true); act('save', final_processing); this.setState(() => { return { textarea_text: "", previewSelected: "save", combined_text: final_processing.text, + old_text: final_processing.text, + counter: final_processing.field_counter, }; }); // byond should switch us to readonly mode from here } @@ -490,7 +503,7 @@ class PaperSheetEdit extends Component { const new_state = { previewSelected: "Preview", textarea_text: this.state.textarea_text, - combined_text: this.createPreview( + combined_text: this.createPreviewFromData( this.state.textarea_text).text, }; return new_state; @@ -516,7 +529,7 @@ class PaperSheetEdit extends Component { const new_state = { previewSelected: "confirm", textarea_text: this.state.textarea_text, - combined_text: this.createPreview( + combined_text: this.createPreviewFromData( this.state.textarea_text).text, }; return new_state; @@ -567,7 +580,33 @@ export const PaperSheet = (props, context) => { sizeX, sizeY, name, + add_text, + add_font, + add_color, + add_sign, + field_counter, } = data; + // some features can add text to a paper sheet outside of this ui + // we need to parse, sanitize and add any of it to the text value. + const values = { text: text, field_counter: field_counter }; + if (add_text) { + for (let index = 0; index < add_text.length; index++) { + const used_color = add_color[index]; + const used_font = add_font[index]; + const used_sign = add_sign[index]; + const processing = createPreview( + add_text[index], + values.text, + false, + values.field_counter, + used_color, + used_font, + used_sign + ); + values.text = processing.text; + values.field_counter = processing.field_counter; + } + } const stamp_list = !stamps ? [] : stamps; @@ -576,14 +615,15 @@ export const PaperSheet = (props, context) => { case 0: return ( ); case 1: return ( { case 2: return ( ); @@ -605,8 +645,7 @@ export const PaperSheet = (props, context) => { title={name} theme="paper" width={sizeX || 400} - height={sizeY || 500} - resizable> + height={sizeY || 500}>