deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Рефакторинг

Browse Source
This commit is contained in:
Book Pauk
2019-01-20 20:51:47 +07:00
parent d74cc08218
commit f7f9f4d51e
2 changed files with 34 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/components/Reader/TextPage/TextPage.vue
View File

@@ -21,7 +21,7 @@ export default @Component({
watch: { watch: {
bookPos: function(newValue) { bookPos: function(newValue) {
this.debouncedEmitPosChange(newValue); this.debouncedEmitPosChange(newValue);
this.drawPage(); this.draw();
}, },
}, },
}) })
@@ -50,7 +50,6 @@ class TextPage extends Vue {
mounted() { mounted() {
this.canvas = this.$refs.canvas; this.canvas = this.$refs.canvas;
this.context = this.canvas.getContext('2d');
} }
hex2rgba(hex, alpha = 1) { hex2rgba(hex, alpha = 1) {
@@ -59,6 +58,8 @@ class TextPage extends Vue {
} }
async calcDrawProps() { async calcDrawProps() {
this.contextMain = this.canvas.getContext('2d');
this.realWidth = this.$refs.main.clientWidth; this.realWidth = this.$refs.main.clientWidth;
this.realHeight = this.$refs.main.clientHeight; this.realHeight = this.$refs.main.clientHeight;
@@ -68,31 +69,28 @@ class TextPage extends Vue {
this.canvas.height = this.realHeight*ratio; this.canvas.height = this.realHeight*ratio;
this.canvas.style.width = this.$refs.main.clientWidth + 'px'; this.canvas.style.width = this.$refs.main.clientWidth + 'px';
this.canvas.style.height = this.$refs.main.clientHeight + 'px'; this.canvas.style.height = this.$refs.main.clientHeight + 'px';
this.context.scale(ratio, ratio); this.contextMain.scale(ratio, ratio);
} else { } else {
this.canvas.width = this.realWidth; this.canvas.width = this.realWidth;
this.canvas.height = this.realHeight; this.canvas.height = this.realHeight;
} }
//this.offscreen = new OffscreenCanvas(256, 256);
this.contextMain.textAlign = 'left';
this.contextMain.textBaseline = 'bottom';
this.w = this.realWidth - 2*this.indent; this.w = this.realWidth - 2*this.indent;
this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0); this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0);
this.lineHeight = this.fontSize + this.lineInterval; this.lineHeight = this.fontSize + this.lineInterval;
this.pageLineCount = Math.floor(this.h/this.lineHeight); this.pageLineCount = Math.floor(this.h/this.lineHeight);
this.context.textAlign = 'left';
this.context.textBaseline = 'bottom';
if (this.parsed) { if (this.parsed) {
this.parsed.p = this.p; this.parsed.p = this.p;
this.parsed.w = this.w;// px, ширина текста this.parsed.w = this.w;// px, ширина текста
this.parsed.font = this.font; this.parsed.font = this.font;
this.parsed.wordWrap = this.wordWrap; this.parsed.wordWrap = this.wordWrap;
this.measureText = (text, style) => {// eslint-disable-line no-unused-vars this.parsed.context = this.contextMain;
if (style) this.parsed.fontByStyle = this.fontByStyle;
this.context.font = this.fontByStyle(style);
return this.context.measureText(text).width;
};
this.parsed.measureText = this.measureText;
} }
this.statusBarColor = this.hex2rgba(this.textColor, 0.5); this.statusBarColor = this.hex2rgba(this.textColor, 0.5);
@@ -145,7 +143,7 @@ class TextPage extends Vue {
this.statusBarHeight = 20;// px this.statusBarHeight = 20;// px
this.calcDrawProps(); this.calcDrawProps();
this.drawPage();// пока не загрузили, очистим канвас this.draw();// пока не загрузили, очистим канвас
if (this.lastBook) { if (this.lastBook) {
(async() => { (async() => {
@@ -173,14 +171,14 @@ class TextPage extends Vue {
await this.loadFonts(); await this.loadFonts();
this.drawPage(); this.draw();
})(); })();
} }
} }
onResize() { onResize() {
this.calcDrawProps(); this.calcDrawProps();
this.drawPage(); this.draw(true);
} }
get font() { get font() {
@@ -191,12 +189,14 @@ class TextPage extends Vue {
return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`; return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`;
} }
drawPage() { draw(immediate) {
this.drawPage(this.contextMain);
}
drawPage(context) {
if (!this.lastBook) if (!this.lastBook)
return; return;
const context = this.context;
context.fillStyle = this.backgroundColor; context.fillStyle = this.backgroundColor;
context.fillRect(0, 0, this.realWidth, this.realHeight); context.fillRect(0, 0, this.realWidth, this.realHeight);
@@ -216,7 +216,7 @@ class TextPage extends Vue {
*/ */
context.font = this.font; context.font = this.font;
context.fillStyle = this.textColor; context.fillStyle = this.textColor;
const spaceWidth = this.context.measureText(' ').width; const spaceWidth = context.measureText(' ').width;
const lines = this.parsed.getLines(this.bookPos, this.pageLineCount + 1); const lines = this.parsed.getLines(this.bookPos, this.pageLineCount + 1);
this.linesUp = this.parsed.getLines(this.bookPos, -(this.pageLineCount + 1)); this.linesUp = this.parsed.getLines(this.bookPos, -(this.pageLineCount + 1));
@@ -267,7 +267,7 @@ class TextPage extends Vue {
for (let i = 0; i < partWords.length; i++) { for (let i = 0; i < partWords.length; i++) {
let word = partWords[i]; let word = partWords[i];
context.fillText(word, x, y); context.fillText(word, x, y);
x += this.measureText(word) + (i < partWords.length - 1 ? space : 0); x += context.measureText(word).width + (i < partWords.length - 1 ? space : 0);
} }
} }
filled = true; filled = true;
@@ -281,7 +281,7 @@ class TextPage extends Vue {
let text = part.text; let text = part.text;
context.font = this.fontByStyle(part.style); context.font = this.fontByStyle(part.style);
context.fillText(text, x, y); context.fillText(text, x, y);
x += this.measureText(text); x += context.measureText(text).width;
} }
} }
} }

20
client/components/Reader/share/BookParser.js
View File

@@ -8,9 +8,15 @@ export default class BookParser {
this.w = 300;// px, ширина страницы this.w = 300;// px, ширина страницы
this.wordWrap = false;// перенос по слогам this.wordWrap = false;// перенос по слогам
// заглушка
this.measureText = (text, style) => {// eslint-disable-line no-unused-vars this.measureText = (text, style) => {// eslint-disable-line no-unused-vars
return text.length*10; if (this.context) {
this.context.save();
this.context.font = this.fontByStyle(style);
const w = this.context.measureText(text).width;
this.context.restore();
return w;
} else
return 0;
}; };
} }
@@ -340,12 +346,12 @@ export default class BookParser {
let prevStr = ''; let prevStr = '';
let prevW = 0; let prevW = 0;
let j = 0;//номер строки let j = 0;//номер строки
let style = {};
let ofs = -1; let ofs = -1;
// тут начинается самый замес, перенос по слогам и стилизация // тут начинается самый замес, перенос по слогам и стилизация
for (const part of parts) { for (const part of parts) {
const words = part.text.split(' '); const words = part.text.split(' ');
const style = part.style; style = part.style;
let sp1 = ''; let sp1 = '';
let sp2 = ''; let sp2 = '';
@@ -396,7 +402,7 @@ export default class BookParser {
let t = line.parts[line.parts.length - 1].text; let t = line.parts[line.parts.length - 1].text;
if (t[t.length - 1] == ' ') { if (t[t.length - 1] == ' ') {
line.parts[line.parts.length - 1].text = t.trimRight(); line.parts[line.parts.length - 1].text = t.trimRight();
prevW -= this.measureText(' '); prevW -= this.measureText(' ', style);
} }
} }
line.end = para.offset + ofs - wordTail.length - 1; line.end = para.offset + ofs - wordTail.length - 1;
@@ -425,9 +431,9 @@ export default class BookParser {
if (line.parts.length) {//корявенько, коррекция при переносе if (line.parts.length) {//корявенько, коррекция при переносе
let t = line.parts[line.parts.length - 1].text; let t = line.parts[line.parts.length - 1].text;
if (t.trimRight() != t) { if (t[t.length - 1] == ' ') {
line.parts[line.parts.length - 1].text = t.trimRight(); line.parts[line.parts.length - 1].text = t.trimRight();
prevW -= this.measureText(' '); prevW -= this.measureText(' ', style);
} }
} }
line.end = para.offset + para.length - 1; line.end = para.offset + para.length - 1;