Commit df6ebe19 authored by Olivier Masson's avatar Olivier Masson
Browse files

Update TranscriptionModal.vue

parent 9dcd558d
......@@ -280,6 +280,69 @@ export default Vue.extend({
}
},
methods: {
convertRemToPixels(rem) { // convert rem into px
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
},
css( element, property ) { // return property without explicit defined css style
return window.getComputedStyle( element, null ).getPropertyValue( property );
},
measureTextHeight(fontSizeFace,content) { // compute the height of the text line regarding regarding actual font, size and weight
// create a temp canvas
var width=1000;
var height=60;
var canvas=document.createElement("canvas");
canvas.width=width;
canvas.height=height;
var ctx=canvas.getContext("2d");
// Draw the entire a-z/A-Z alphabet in the canvas
//var text="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
var text=content; // to adapt with any loaded content
if(text == '')
text="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
ctx.save();
ctx.font=fontSizeFace;
ctx.clearRect(0,0,width,height);
ctx.fillText(text, 0, 40);
ctx.restore();
// Get the pixel data from the canvas
var data = ctx.getImageData(0,0,width,height).data,
first = false,
last = false,
r = height,
c = 0;
// Find the last line with a non-transparent pixel
while(!last && r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
last = r;
break;
}
}
}
// Find the first line with a non-transparent pixel
while(r) {
r--;
for(c = 0; c < width; c++) {
if(data[r * width * 4 + c * 4 + 3]) {
first = r;
break;
}
}
// If we've got it then return the height
if(first != r) return last - first;
}
// error condition if we get here
return 0;
},
close() {
$(this.$refs.transModal).modal('hide');
},
......@@ -378,7 +441,7 @@ export default Vue.extend({
let left = -(bbox.left*ratio - context);
// if text direction is rtl and the line doesn't take all the space,
// align it to the right
// justify it to the right:
if (modalImgContainer.clientWidth - 2*context > bbox.width*ratio
&& this.$store.state.document.defaultTextDirection == 'rtl') {
left += modalImgContainer.clientWidth - 2*context - bbox.width*ratio;
......@@ -444,6 +507,30 @@ export default Vue.extend({
if(this.$store.state.document.mainTextDirection != 'ttb'){
input.style.fontSize = fontSize+'px';
input.style.height = Math.round(fontSize*1.1)+'px';
// get input font properties:
let textFont = this.css( input, "font-family" );
let textWeight = this.css( input, "font-weight" );
let textSize = this.css( input, "font-size" );
let fontSizeFace = textWeight + ' ' + textSize + ' ' + textFont;
let borderWidth = 1; // input border defined from css
let lineHeight = this.css( input, "line-height" );
lineHeight = parseFloat(lineHeight.split('px')[0]); // convert line-height style to number
let lineHeightRatio = lineHeight/input.clientHeight;
let computedHeight = Math.round(this.measureTextHeight(fontSizeFace,input.value)*lineHeightRatio);
if(computedHeight != 0)
{
input.style.height = String(computedHeight+2*borderWidth) + 'px';
}else{ // maybe for some font issue, some text arent well computed
// try to compute again with a standard characters set:
computedHeight = Math.round(this.measureTextHeight(fontSizeFace,'')*lineHeightRatio);
if(computedHeight != 0){ // when no error only: apply the new height style:
input.style.height = String(computedHeight+2*borderWidth) + 'px';
}
}
}else{
verticalTextInput.style.fontSize = fontSize+'px';
verticalTextInput.style.width = Math.round(fontSize*1.1)+'px';
......@@ -474,13 +561,9 @@ export default Vue.extend({
if (content) {
let lineWidth = bbox.height*ratio;
var scaleY = Math.min(5, lineWidth / ruler.clientHeight);
//var scaleY = Math.min(5, lineWidth / modalImgContainer.clientHeight);
//var scaleY = Math.min(5, modalImgContainer.clientHeight / ruler.clientHeight);
//var scaleY = Math.min(5, modalImgContainer.clientHeight / textInputWrapper.clientHeight) * 0.7;
scaleY = Math.max(0.2, scaleY);
verticalTextInput.style.transformOrigin = 'top';
verticalTextInput.style.transform = 'scaleY('+ scaleY +')';
//document.getElementById('vertical_text_input').style.height = 100/scaleY + '%'; // not needed here
} else {
verticalTextInput.style.transform = 'none';
verticalTextInput.style.height = modalImgContainer.clientHeight + 'px';
......@@ -488,7 +571,6 @@ export default Vue.extend({
textInputWrapper.style.height = modalImgContainer.clientHeight + 'px';
// simulate an input field border to fix it to the actual size of the image
textInputBorderWrapper.style.width = verticalTextInput.clientWidth+'px';
//textInputBorderWrapper.style.width = verticalTextInput.offsetWidth+'px';
textInputBorderWrapper.style.height = modalImgContainer.clientHeight+'px';
}
container.removeChild(ruler); // done its job
......@@ -500,11 +582,8 @@ export default Vue.extend({
Modifies input font size and height to match the image
*/
let modalImgContainer = this.$refs.modalImgContainer;
let bbox = this.getRotatedLineBBox();
let hContext = 0.3; // vertical context added around the line, in percentage
//
let ratio = 1;
let lineHeight = 150;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment