shikix/GS13NG
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TG update for PaperSheet.js

Browse Source 
Co-authored-by: Ghom <42542238+Ghommie@users.noreply.github.com>
This commit is contained in:
Artur
2021-11-26 10:26:57 +02:00
parent 5451e5d4d7
commit c308485ce1
1 changed files with 99 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/packages/tgui/interfaces/PaperSheet.js
+99 -60
View File
@@ -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 "<span style=\""
+ "color:'" + color + "';"
+ "color:" + color + ";"
+ "font-family:'" + font + "';"
+ ((bold)
? "font-weight: bold;"
@@ -55,7 +55,7 @@ const createInputField = (length, width, font,
+ "type=\"text\" "
+ "style=\""
+ "font:'" + fontsize + "x " + font + "';"
+ "color:'" + color + "';"
+ "color:" + color + ";"
+ "min-width:" + width + ";"
+ "max-width:" + width + ";"
+ "\" "
@@ -236,7 +236,6 @@ const PaperSheetView = (props, context) => {
height="100%" >
<Box
className="Paper__Page"
color="black"
fillPositionedParent
width="100%"
height="100%"
@@ -345,7 +344,7 @@ class PaperSheetStamper extends Component {
rotate: this.state.rotate,
};
return (
<Fragment>
<>
<PaperSheetView
readOnly
value={value}
@@ -353,11 +352,57 @@ class PaperSheetStamper extends Component {
<Stamp
active_stamp
opacity={0.5} image={current_pos} />
</Fragment>
</>
);
}
}
// 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 (<b> 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 (<b> 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 (
<PaperSheetView
value={text}
value={values.text}
stamps={stamp_list}
readOnly />
);
case 1:
return (
<PaperSheetEdit
value={text}
value={values.text}
counter={values.field_counter}
textColor={pen_color}
fontFamily={pen_font}
stamps={stamp_list}
@@ -592,7 +632,7 @@ export const PaperSheet = (props, context) => {
case 2:
return (
<PaperSheetStamper
value={text}
value={values.text}
stamps={stamp_list}
stamp_class={stamp_class} />
);
@@ -605,8 +645,7 @@ export const PaperSheet = (props, context) => {
title={name}
theme="paper"
width={sizeX || 400}
height={sizeY || 500}
resizable>
height={sizeY || 500}>
<Window.Content
backgroundColor={paper_color}
scrollable>