Permalink
Browse files

bugfix #39: Underline text

implement text underline
  • Loading branch information...
div5yesh committed Feb 11, 2019
1 parent 068a598 commit da316d11d3f48bd726f914534503588b678113f9
Showing with 43 additions and 1 deletion.
  1. +1 −0 readme.md
  2. +32 −1 src/canvas/draw.js
  3. +5 −0 src/component/sheet.js
  4. +1 −0 src/component/table.js
  5. +2 −0 src/component/toolbar.js
  6. +1 −0 src/data_proxy.js
  7. +1 −0 src/index.js
@@ -62,6 +62,7 @@ new Spreadsheet("#x-spreadsheet-demo")
textwrap: false,
textDecoration: 'normal',
strikethrough: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',
@@ -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;
@@ -524,6 +524,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);
@@ -52,6 +52,7 @@ function renderCell(rindex, cindex) {
font,
color: style.color,
strikethrough: style.strikethrough,
underline: style.underline,
}, style.textwrap);
}
}
@@ -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);
@@ -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;
@@ -32,6 +32,7 @@ const defaultOptions = {
textwrap: false,
textDecoration: 'normal',
strikethrough: false,
underline: false,
color: '#0a0a0a',
font: {
name: 'Helvetica',

0 comments on commit da316d1

Please sign in to comment.