Merge pull request #50 from div5yesh/master

bugfix #39: Underline text

readme.md

@@ -62,6 +62,7 @@ new Spreadsheet("#x-spreadsheet-demo")
     textwrap: false,
     textDecoration: 'normal',
     strikethrough: false,
+    underline: false,
     color: '#0a0a0a',
     font: {
       name: 'Helvetica',

src/canvas/draw.js

@@ -118,6 +118,28 @@ function drawStrikethrough(tx, ty, align, valign, blheight, blwidth) {
 }
 
 
+function drawUnderline(tx, ty, align, valign, blheight, blwidth) {
+  const floffset = { x: 0, y: 0 };
+  if (valign === 'bottom') {
+    floffset.y = 0;
+  } else if (valign === 'top') {
+    floffset.y = -blheight;
+  } else {
+    floffset.y = -blheight / 2;
+  }
+
+  if (align === 'center') {
+    floffset.x = blwidth / 2;
+  } else if (align === 'right') {
+    floffset.x = blwidth;
+  }
+  this.line(
+    [tx - floffset.x, ty - floffset.y],
+    [tx - floffset.x + blwidth, ty - floffset.y],
+  );
+}
+
+
 class Draw {
   constructor(el, width, height) {
     this.el = el;
@@ -197,7 +219,7 @@ class Draw {
   text(txt, box, attr = {}, textWrap = true) {
     const { ctx } = this;
     const {
-      align, valign, font, color, strikethrough,
+      align, valign, font, color, strikethrough, underline
     } = attr;
     const tx = box.textx(align);
     ctx.save();
@@ -224,6 +246,9 @@ class Draw {
           if (strikethrough) {
             drawStrikethrough.call(this, tx, ty, align, valign, font.size, textLine.len);
           }
+          if (underline) {
+            drawUnderline.call(this, tx, ty, align, valign, font.size, textLine.len);
+          }
           ty += font.size + 2;
           textLine.len = 0;
           textLine.start = i;
@@ -235,12 +260,18 @@ class Draw {
         if (strikethrough) {
           drawStrikethrough.call(this, tx, ty, align, valign, font.size, textLine.len);
         }
+        if (underline) {
+          drawUnderline.call(this, tx, ty, align, valign, font.size, textLine.len);
+        }
       }
     } else {
       this.fillText(txt, tx, ty);
       if (strikethrough) {
         drawStrikethrough.call(this, tx, ty, align, valign, font.size, txtWidth);
       }
+      if (underline) {
+        drawUnderline.call(this, tx, ty, align, valign, font.size, txtWidth);
+      }
     }
     ctx.restore();
     return this;

src/component/sheet.js

@@ -526,6 +526,11 @@ function sheetInitEvents() {
           cut.call(this);
           evt.preventDefault();
           break;
+        case 85:
+          // ctrl + u
+          toolbar.trigger('underline');
+          evt.preventDefault();
+          break;
         case 86:
           // ctrl + v
           paste.call(this, what);

src/component/table.js

@@ -52,6 +52,7 @@ function renderCell(rindex, cindex) {
       font,
       color: style.color,
       strikethrough: style.strikethrough,
+      underline: style.underline,
     }, style.textwrap);
   }
 }

src/component/toolbar.js

@@ -137,6 +137,7 @@ export default class Toolbar {
       buildDivider(),
       this.fontBoldEl = buildButtonWithIcon('Bold (Ctrl+B)', 'bold', () => toggleChange.call(this, 'font-bold')),
       this.fontItalicEl = buildButtonWithIcon('Italic (Ctrl+I)', 'italic', () => toggleChange.call(this, 'font-italic')),
+      this.underlineEl = buildButtonWithIcon('Underline (Ctrl+U)', 'underline', () => toggleChange.call(this, 'underline')),
       this.strikethroughEl = buildButtonWithIcon('Strikethrough', 'strikethrough', () => toggleChange.call(this, 'strikethrough')),
       buildButton('Text color').child(this.ddTextColor.el),
       buildDivider(),
@@ -197,6 +198,7 @@ export default class Toolbar {
     this.ddFontSize.setTitle(font.size);
     this.fontBoldEl.active(font.bold);
     this.fontItalicEl.active(font.italic);
+    this.underlineEl.active(style.underline);
     this.strikethroughEl.active(style.strikethrough);
     this.ddTextColor.setTitle(style.color);
     this.ddFillColor.setTitle(style.bgcolor);

src/data_proxy.js

@@ -592,6 +592,7 @@ export default class DataProxy {
           cstyle.font = Object.assign(cstyle.font || {}, nfont);
           cell.si = this.addStyle(cstyle);
         } else if (property === 'strikethrough' || property === 'textwrap'
+          || property === 'underline'
           || property === 'align' || property === 'valign'
           || property === 'color' || property === 'bgcolor') {
           cstyle[property] = value;

src/index.js

@@ -32,6 +32,7 @@ const defaultOptions = {
     textwrap: false,
     textDecoration: 'normal',
     strikethrough: false,
+    underline: false,
     color: '#0a0a0a',
     font: {
       name: 'Helvetica',