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
2021-02-04 15:18:32 +07:00
parent d2167d8605
commit 675e898163
2 changed files with 64 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
client/components/Reader/TextPage/DrawHelper.js
View File

@@ -20,7 +20,20 @@ export default class DrawHelper {
}
drawLine(line, lineIndex, sel, imageDrawn) {
let out = '';
/* line:
{
begin: Number,
end: Number,
first: Boolean,
last: Boolean,
parts: array of {
style: {bold: Boolean, italic: Boolean, center: Boolean},
image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
text: String,
}
}*/
let out = '<div>';
let lineText = '';
let center = false;
@@ -104,7 +117,7 @@ export default class DrawHelper {
if (line.last || center)
lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
out += (lineIndex > 0 ? '<br>' : '') + lineText;
out += lineText + '</div>';
return out;
}
@@ -116,7 +129,8 @@ export default class DrawHelper {
const font = this.fontByStyle({});
const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
let out = `<div style="width: ${this.w}px; height: ${this.h + (isScrolling ? this.lineHeight : 0)}px;` +
const boxH = this.h + (isScrolling ? this.lineHeight : 0);
let out = `<div style="width: ${this.boxW}px; height: ${boxH}px;` +
` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
` line-height: ${this.lineHeight}px; white-space: nowrap;">`;
@@ -125,43 +139,47 @@ export default class DrawHelper {
const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
len = (len > lineCount ? lineCount : len);
for (let i = 0; i < len; i++) {
const line = lines[i];
/* line:
{
begin: Number,
end: Number,
first: Boolean,
last: Boolean,
parts: array of {
style: {bold: Boolean, italic: Boolean, center: Boolean},
image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
text: String,
}
}*/
let sel = new Set();
//поиск
if (i == 0 && this.searching) {
let pureText = '';
for (const part of line.parts) {
pureText += part.text;
}
pureText = pureText.toLowerCase();
let j = 0;
while (1) {// eslint-disable-line no-constant-condition
j = pureText.indexOf(this.needle, j);
if (j >= 0) {
for (let k = 0; k < this.needle.length; k++) {
sel.add(j + k);
}
} else
break;
j++;
}
//поиск
let sel = new Set();
if (len > 0 && this.searching) {
const line = lines[0];
let pureText = '';
for (const part of line.parts) {
pureText += part.text;
}
out += this.drawLine(line, i, sel, imageDrawn);
pureText = pureText.toLowerCase();
let j = 0;
while (1) {// eslint-disable-line no-constant-condition
j = pureText.indexOf(this.needle, j);
if (j >= 0) {
for (let k = 0; k < this.needle.length; k++) {
sel.add(j + k);
}
} else
break;
j++;
}
}
//отрисовка строк
if (!this.dualPageMode) {
for (let i = 0; i < len; i++) {
out += this.drawLine(lines[i], i, sel, imageDrawn);
}
} else {
out += `<div style="width: ${this.w}px; margin: 0 ${this.dualIndentLR}px 0 ${this.dualIndentLR}px; display: inline-block;">`;
const l2 = len/2;
for (let i = 0; i < l2; i++) {
out += this.drawLine(lines[i], i, sel, imageDrawn);
}
out += '</div>';
out += `<div style="width: ${this.w}px; margin: 0 ${this.dualIndentLR}px 0 ${this.dualIndentLR}px; display: inline-block;">`;
for (let i = l2; i < len; i++) {
out += this.drawLine(lines[i], i, sel, imageDrawn);
}
out += '</div>';
}
out += '</div>';

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

@@ -161,16 +161,17 @@ class TextPage extends Vue {
this.$refs.layoutEvents.style.width = this.realWidth + 'px';
this.$refs.layoutEvents.style.height = this.realHeight + 'px';
this.w = this.realWidth - 2*this.indentLR;
const dual = (this.dualPageMode ? 2 : 1);
this.boxW = this.realWidth - 2*this.indentLR;
this.w = this.boxW/dual - (this.dualPageMode ? 2*this.dualIndentLR : 0);
this.scrollHeight = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0);
this.h = this.scrollHeight - 2*this.indentTB;
this.lineHeight = this.fontSize + this.lineInterval;
const pageRowsCount = 1 + Math.floor((this.h - this.lineHeight + this.lineInterval/2)/this.lineHeight);
this.pageLineCount = (this.dualPageMode ? pageRowsCount*2 : pageRowsCount)
this.$refs.scrollingPage1.style.width = this.w + 'px';
this.$refs.scrollingPage2.style.width = this.w + 'px';
//stuff
this.currentAnimation = '';
this.pageChangeDirectionDown = true;
@@ -202,6 +203,7 @@ class TextPage extends Vue {
this.drawHelper.textColor = this.textColor;
this.drawHelper.textShift = this.textShift;
this.drawHelper.p = this.p;
this.drawHelper.boxW = this.boxW;
this.drawHelper.w = this.w;
this.drawHelper.h = this.h;
this.drawHelper.indentLR = this.indentLR;
@@ -266,14 +268,14 @@ class TextPage extends Vue {
page1.perspective = page2.perspective = '3072px';
page1.width = page2.width = this.w + this.indentLR + 'px';
page1.width = page2.width = this.boxW + this.indentLR + 'px';
page1.height = page2.height = this.scrollHeight - (pageSpace > 0 ? pageSpace : 0) + 'px';
page1.top = page2.top = top + 'px';
page1.left = page2.left = this.indentLR + 'px';
page1 = this.$refs.scrollingPage1.style;
page2 = this.$refs.scrollingPage2.style;
page1.width = page2.width = this.w + this.indentLR + 'px';
page1.width = page2.width = this.boxW + this.indentLR + 'px';
page1.height = page2.height = this.scrollHeight + this.lineHeight + 'px';
}