Merge pull request #71 from thinreports/fix_row_height_has_different_values_for_each_environment

Line-height calculation result will be different values ​​depending on the environment

Author: hidakatsuya

CHANGELOG.md

@@ -1,3 +1,9 @@
+## master
+
+### Bugfixes
+
+ * Fixed: the line-height property returns different calculation results depending on environment (#71)
+
 ## 0.10.0
 
 ### Released as an Electron based desktop application

app/editor/core/abstracttextgroup.js

@@ -40,6 +40,12 @@ thin.core.AbstractTextGroup = function(element, layout) {
    * @private
    */
   this.textStyle_ = new thin.core.TextStyle();
+
+  /**
+   * @type {Object?}
+   * @private
+   */
+  this.rawFormat_ = null
 };
 goog.inherits(thin.core.AbstractTextGroup, thin.core.AbstractBoxGroup);
 
@@ -117,6 +123,76 @@ thin.core.AbstractTextGroup.prototype.setVerticalAlign = function(valign) {
 };
 
 
+/**
+ * @param {Object} rawFormat
+ */
+thin.core.AbstractTextGroup.prototype.setRawFormat = function (rawFormat) {
+  this.rawFormat_ = rawFormat;
+};
+
+
+/**
+ * @return {Object?}
+ * @private
+ */
+thin.core.AbstractTextGroup.prototype.getRawStyle_ = function () {
+  return this.rawFormat_ && this.rawFormat_['style'];
+};
+
+
+/**
+ * @return {number|string?}
+ */
+thin.core.AbstractTextGroup.prototype.getRawLineHeight = function () {
+  var rawStyle = this.getRawStyle_();
+  var lineHeight;
+
+  if (rawStyle) {
+    lineHeight = rawStyle['line-height'];
+
+    if (lineHeight === thin.core.TextStyle.DEFAULT_LINEHEIGHT) {
+      return lineHeight;
+    } else {
+      return Number(lineHeight);
+    }
+  } else {
+    return null;
+  }
+};
+
+
+/**
+ * @param {number} fontSize
+ * @param {string} fontFamily
+ * @param {number} lineHeightRatio
+ * @return {boolean}
+ * @private
+ */
+thin.core.AbstractTextGroup.prototype.hasLineHeightChanged_ = function (fontSize, fontFamily, lineHeightRatio) {
+  var fontSizeChanged = false;
+  var lineHeightRatioChanged = false;
+  var fontFamilyChanged = false;
+
+  var rawStyles = this.getRawStyle_();
+
+  var rawFontSize, rawLineHeightRatio, rawFontFamily;
+
+  if (rawStyles) {
+    rawFontSize = /** @type {number} */ (Number(rawStyles['font-size']));
+    rawLineHeightRatio = /** @type {number} */ (Number(rawStyles['line-height-ratio']));
+    rawFontFamily = /** @type {string} */ (rawStyles['font-family'][0]);
+
+    fontSizeChanged = rawFontSize !== Number(fontSize);
+    lineHeightRatioChanged = rawLineHeightRatio !== Number(lineHeightRatio);
+    fontFamilyChanged = rawFontFamily !== fontFamily;
+
+    return fontSizeChanged || lineHeightRatioChanged || fontFamilyChanged;
+  } else {
+    return true;
+  }
+};
+
+
 /**
  * @param {string} ratio
  */
@@ -129,10 +205,17 @@ thin.core.AbstractTextGroup.prototype.setTextLineHeightRatio = function(ratio) {
   } else {
     var layout = this.getLayout();
     var numRatio = Number(ratio);
-    var heightAt = thin.Font.getHeight(this.getFontFamily(), this.getFontSize());
+
+    var lineHeight;
+
+    if (this.hasLineHeightChanged_(this.getFontSize(), this.getFontFamily(), numRatio)) {
+      lineHeight = thin.Font.getHeight(this.getFontFamily(), this.getFontSize()) * numRatio;
+    } else {
+      lineHeight = this.getRawLineHeight();
+    }
 
     layout.setElementAttributes(element, {
-      'x-line-height': heightAt * numRatio
+      'x-line-height': lineHeight
     });
     layout.setElementAttributes(element, {
       'x-line-height-ratio': numRatio
@@ -386,6 +469,7 @@ thin.core.AbstractTextGroup.prototype.updateToolbarUI = function() {
 thin.core.AbstractTextGroup.prototype.disposeInternal = function() {
   goog.base(this, 'disposeInternal');
 
+  delete this.rawFormat_;
   delete this.fontStyle_;
   delete this.textStyle_;
 };

app/editor/core/layout.js

@@ -137,6 +137,7 @@ thin.core.Layout.prototype.drawShape = function(item, opt_sectionShape) {
 
     case 'text-block':
       shape = this.createTblockShape();
+      shape.setRawFormat(item);
       break;
 
     case 'page-number':
@@ -145,6 +146,7 @@ thin.core.Layout.prototype.drawShape = function(item, opt_sectionShape) {
 
     case 'text':
       shape = this.createTextShape();
+      shape.setRawFormat(item);
       break;
 
     case 'image':