Making history items being rendered with LaTeX (e.g. positions and properties) asynchronous.
This commit is contained in:
parent
8d6891c4f0
commit
70f1c03cb6
4 changed files with 73 additions and 25 deletions
LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter
|
@ -116,10 +116,23 @@ Button {
|
|||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: !hidden
|
||||
font.pixelSize: 14
|
||||
text: historyAction.getHTMLString().replace(/\$\{tag_color\}/g, clr)
|
||||
text: ""
|
||||
textFormat: Text.RichText
|
||||
clip: true
|
||||
wrapMode: Text.WordWrap
|
||||
|
||||
Component.onCompleted: function() {
|
||||
// Render HTML, might be string, but could also be a promise
|
||||
const html = historyAction.getHTMLString()
|
||||
if(typeof html === "string") {
|
||||
label.text = html.replace(/\$\{tag_color\}/g, clr)
|
||||
} else {
|
||||
// Promise! We need to way to wait for it to be completed.
|
||||
html.then(rendered => {
|
||||
label.text = rendered.replace(/\$\{tag_color\}/g, clr)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
|
@ -109,24 +109,28 @@ export class Action {
|
|||
* Renders a LaTeX-formatted string to an image and wraps it in an HTML tag in a string.
|
||||
*
|
||||
* @param {string} latexString - Source string of the latex.
|
||||
* @returns {string}
|
||||
* @returns {Promise<string>}
|
||||
*/
|
||||
renderLatexAsHtml(latexString) {
|
||||
if(!Latex.enabled)
|
||||
throw new Error("Cannot render an item as LaTeX when LaTeX is disabled.")
|
||||
return new Promise(resolve => {
|
||||
let imgDepth = Modules.History.imageDepth
|
||||
let { source, width, height } = Latex.renderSync(
|
||||
Latex.requestAsyncRender(
|
||||
latexString,
|
||||
imgDepth * (Modules.History.fontSize + 2),
|
||||
Modules.History.themeTextColor
|
||||
)
|
||||
return `<img src="${source}" width="${width/imgDepth}" height="${height/imgDepth}" style="vertical-align: middle"/>`
|
||||
).then((imgData) => {
|
||||
const { source, width, height } = imgData
|
||||
resolve(`<img src="${source}" width="${width/imgDepth}" height="${height/imgDepth}" style="vertical-align: middle"/>`)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a string with the HTML-formatted description of the action.
|
||||
*
|
||||
* @returns {string}
|
||||
* @returns {string|Promise<string>}
|
||||
*/
|
||||
getHTMLString() {
|
||||
return this.getReadableString()
|
||||
|
|
|
@ -85,8 +85,9 @@ export default class EditedProperty extends Action {
|
|||
}
|
||||
|
||||
setReadableValues() {
|
||||
this.prevString = "";
|
||||
this.nextString = "";
|
||||
this.prevString = ""
|
||||
this.nextString = ""
|
||||
this._renderPromises = []
|
||||
if(this.propertyType instanceof Object) {
|
||||
switch(this.propertyType.type) {
|
||||
case "Enum":
|
||||
|
@ -118,8 +119,11 @@ export default class EditedProperty extends Action {
|
|||
this.prevHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+this.prevString+' </tt>'
|
||||
this.nextHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+this.nextString+' </tt>'
|
||||
if(Latex.enabled && typeof this.propertyType == 'object' && this.propertyType.type === "Expression") {
|
||||
this.prevHTML= this.renderLatexAsHtml(this.previousValue.latexMarkup)
|
||||
this.nextHTML= this.renderLatexAsHtml(this.newValue.latexMarkup)
|
||||
// Store promises so that querying can wait for them to finish.
|
||||
this._renderPromises = [
|
||||
this.renderLatexAsHtml(this.previousValue.latexMarkup).then(prev => this.prevHTML = prev),
|
||||
this.renderLatexAsHtml(this.newValue.latexMarkup).then(next => this.nextHTML = prev)
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -131,10 +135,21 @@ export default class EditedProperty extends Action {
|
|||
}
|
||||
|
||||
getHTMLString() {
|
||||
return qsTr('%1 of %2 changed from %3 to %4.')
|
||||
return new Promise(resolve => {
|
||||
const translation = qsTr('%1 of %2 changed from %3 to %4.')
|
||||
.arg(this.targetPropertyReadable)
|
||||
.arg('<b style="font-size: 15px;"> ' + this.targetName + ' </b>')
|
||||
.arg(this.prevHTML)
|
||||
.arg(this.nextHTML)
|
||||
// Check if we need to wait for LaTeX HTML to be rendered.
|
||||
if(this.prevHTML !== undefined && this.nextHTML !== undefined)
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
else
|
||||
Promise.all(this._renderPromises).then((rendered) => {
|
||||
// Rendered are (potentially) two HTML strings which are defined during rendering
|
||||
this.prevHTML = this.prevHTML ?? rendered[0]
|
||||
this.nextHTML = this.prevHTML ?? rendered[1]
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
@ -61,10 +61,15 @@ export default class EditedPosition extends Action {
|
|||
setReadableValues() {
|
||||
this.prevString = `(${this.previousXValue.toString()},${this.previousYValue.toString()})`
|
||||
this.nextString = `(${this.newXValue.toString()},${this.newYValue.toString()})`
|
||||
this._renderPromises = []
|
||||
// Render as LaTeX
|
||||
if(Latex.enabled) {
|
||||
this.prevHTML = this.renderLatexAsHtml(`\\left(${this.previousXValue.latexMarkup},${this.previousYValue.latexMarkup}\\right)`)
|
||||
this.nextHTML = this.renderLatexAsHtml(`\\left(${this.newXValue.latexMarkup},${this.newYValue.latexMarkup}\\right)`)
|
||||
const prevMarkup = `\\left(${this.previousXValue.latexMarkup},${this.previousYValue.latexMarkup}\\right)`
|
||||
const nextMarkup = `\\left(${this.newXValue.latexMarkup},${this.newYValue.latexMarkup}\\right)`
|
||||
this._renderPromises = [ // Will be taken in promise.all
|
||||
this.renderLatexAsHtml(prevMarkup),
|
||||
this.renderLatexAsHtml(nextMarkup)
|
||||
]
|
||||
} else {
|
||||
this.prevHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+escapeHTML(this.prevString)+' </tt>'
|
||||
this.nextHTML = '<tt style="background: rgba(128,128,128,0.1);"> '+escapeHTML(this.nextString)+' </tt>'
|
||||
|
@ -85,9 +90,20 @@ export default class EditedPosition extends Action {
|
|||
}
|
||||
|
||||
getHTMLString() {
|
||||
return qsTr('Position of %1 set from %2 to %3.')
|
||||
return new Promise(resolve => {
|
||||
const translation = qsTr('Position of %1 set from %2 to %3.')
|
||||
.arg('<b style="font-size: 15px;"> ' + this.targetName + ' </b>')
|
||||
.arg(this.prevHTML)
|
||||
.arg(this.nextHTML)
|
||||
// Check if we need to wait for LaTeX HTML to be rendered.
|
||||
if(this.prevHTML !== undefined && this.nextHTML !== undefined)
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
else
|
||||
Promise.all(this._renderPromises).then((rendered) => {
|
||||
// Rendered are (potentially) two HTML strings which are defined during rendering
|
||||
this.prevHTML = this.prevHTML ?? rendered[0]
|
||||
this.nextHTML = this.prevHTML ?? rendered[1]
|
||||
resolve(translation.arg(this.prevHTML).arg(this.nextHTML))
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue