По ширине
Перенос по слогам
@@ -163,39 +182,12 @@ import Component from 'vue-class-component';
import Window from '../../share/Window.vue';
import rstore from '../../../store/modules/reader';
-const propsData = {
- textColor: '#000000',
- backgroundColor: '#EBE2C9',
- fontStyle: '',// 'italic'
- fontWeight: '',// 'bold'
- fontSize: 20,// px
- fontName: 'ReaderDefault',
- webFontName: '',
-
- lineInterval: 3,// px, межстрочный интервал
- textAlignJustify: true,// выравнивание по ширине
- p: 25,// px, отступ параграфа
- indent: 15,// px, отступ всего текста слева и справа
- wordWrap: true,//перенос по слогам
- keepLastToFirst: true,// перенос последней строки в первую при листании
-
- showStatusBar: true,
- statusBarTop: false,// top, bottom
- statusBarHeight: 19,// px
- statusBarColorAlpha: 0.4,
-
- pageChangeTransition: '',// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание
- pageChangeTransitionSpeed: 50, //0-100%
-
- allowUrlParamBookPos: true,
-};
-
export default @Component({
components: {
Window,
},
data: function() {
- return Object.assign({}, propsData);
+ return Object.assign({}, rstore.settingDefaults);
},
watch: {
form: function(newValue) {
@@ -223,7 +215,7 @@ class SettingsPage extends Vue {
this.reader = this.$store.state.reader;
this.form = this.settings;
- for (let prop in propsData) {
+ for (let prop in rstore.settingDefaults) {
this[prop] = this.form[prop];
this.$watch(prop, (newValue) => {
this.form = Object.assign({}, this.form, {[prop]: newValue})
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 87e4d849..fb462404 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -95,6 +95,18 @@ class TextPage extends Vue {
for (const font of rstore.fonts) {
this.fontShifts[font.name] = font.fontVertShift;
}
+/*
+ const settings = Object.assign({}, this.settings);
+ let updated = false;
+ for (let prop in rstore.settingDefaults) {
+ if (!settings.hasOwnProperty(prop)) {
+ settings[prop] = rstore.settingDefaults[prop];
+ updated = true;
+ }
+ }
+ if (updated)
+ this.commit('reader/setSettings', settings);
+*/
}
mounted() {
@@ -121,8 +133,8 @@ 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.indent;
- this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0);
+ this.w = this.realWidth - 2*this.indentLR;
+ this.h = this.realHeight - (this.showStatusBar ? this.statusBarHeight : 0) - 2*this.indentTB;
this.lineHeight = this.fontSize + this.lineInterval;
this.pageLineCount = Math.floor(this.h/this.lineHeight);
@@ -226,35 +238,17 @@ class TextPage extends Vue {
getSettings() {
const settings = this.settings;
- this.textColor = settings.textColor;
- this.backgroundColor = settings.backgroundColor;
- this.fontStyle = settings.fontStyle;// 'italic'
- this.fontWeight = settings.fontWeight;// 'bold'
- this.fontSize = settings.fontSize;// px
- this.fontName = settings.fontName;
+ for (let prop in rstore.settingDefaults) {
+ this[prop] = settings[prop];
+ }
- const wf = settings.webFontName;
+ const wf = this.webFontName;
const i = _.findIndex(rstore.webFonts, ['name', wf]);
if (wf && i >= 0) {
this.fontName = wf;
this.fontCssUrl = rstore.webFonts[i].css;
this.fontVertShift = rstore.webFonts[i].fontVertShift;
}
-
- this.lineInterval = settings.lineInterval;// px, межстрочный интервал
- this.textAlignJustify = settings.textAlignJustify;// выравнивание по ширине
- this.p = settings.p;// px, отступ параграфа
- this.indent = settings.indent;// px, отступ всего текста слева и справа
- this.wordWrap = settings.wordWrap;
- this.keepLastToFirst = settings.keepLastToFirst;// перенос последней строки в первую при листании
-
- this.showStatusBar = settings.showStatusBar;
- this.statusBarTop = settings.statusBarTop;// top, bottom
- this.statusBarHeight = settings.statusBarHeight;// px
- this.statusBarColorAlpha = settings.statusBarColorAlpha;
-
- this.pageChangeTransition = settings.pageChangeTransition;// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание
- this.pageChangeTransitionSpeed = settings.pageChangeTransitionSpeed; //0-100%
}
async calcPropsAndLoadFonts(omitLoadFonts) {
@@ -397,8 +391,8 @@ class TextPage extends Vue {
}
drawPage(bookPos, nextChangeLines) {
- if (!this.lastBook)
- return;
+ if (!this.lastBook || this.pageLineCount < 1)
+ return '';
let out = ``;
@@ -419,75 +413,77 @@ class TextPage extends Vue {
this.linesUpNext = this.parsed.getLines(bookPos, -2*this.pageLineCount);
}
- let y = -this.lineInterval/2 + (this.h - this.pageLineCount*this.lineHeight)/2 + this.fontSize*this.fontShift;
- if (this.showStatusBar)
- y += this.statusBarHeight*(this.statusBarTop ? 1 : 0);
+ if (lines) {
+ let y = this.indentTB - this.lineInterval/2 + (this.h - this.pageLineCount*this.lineHeight)/2 + this.fontSize*this.fontShift;
+ if (this.showStatusBar)
+ y += this.statusBarHeight*(this.statusBarTop ? 1 : 0);
- let len = lines.length;
- len = (len > this.pageLineCount ? len = this.pageLineCount : 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}
- text: String,
- }
- }*/
-
- let indent = this.indent + (line.first ? this.p : 0);
-
- let lineText = '';
- let center = false;
- let centerStyle = {};
- for (const part of line.parts) {
- lineText += part.text;
- center = center || part.style.center;
- if (part.style.center)
- centerStyle = part.style.center;
- }
-
- let filled = false;
- // если выравнивание по ширине включено
- if (this.textAlignJustify && !line.last && !center) {
- const words = lineText.split(' ');
-
- if (words.length > 1) {
- const spaceCount = words.length - 1;
-
- const space = (this.w - line.width + spaceWidth*spaceCount)/spaceCount;
-
- let x = indent;
- for (const part of line.parts) {
- const font = this.fontByStyle(part.style);
- let partWords = part.text.split(' ');
-
- for (let i = 0; i < partWords.length; i++) {
- let word = partWords[i];
- out += this.drawHelper.fillText(word, x, y, font);
- x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
- }
+ let len = lines.length;
+ len = (len > this.pageLineCount ? len = this.pageLineCount : 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}
+ text: String,
}
- filled = true;
- }
- }
+ }*/
- // просто выводим текст
- if (!filled) {
- let x = indent;
- x = (center ? this.indent + (this.w - this.measureText(lineText, centerStyle))/2 : x);
+ let indent = this.indentLR + (line.first ? this.p : 0);
+
+ let lineText = '';
+ let center = false;
+ let centerStyle = {};
for (const part of line.parts) {
- let text = part.text;
- const font = this.fontByStyle(part.style);
- out += this.drawHelper.fillText(text, x, y, font);
- x += this.measureText(text, part.style);
+ lineText += part.text;
+ center = center || part.style.center;
+ if (part.style.center)
+ centerStyle = part.style.center;
}
+
+ let filled = false;
+ // если выравнивание по ширине включено
+ if (this.textAlignJustify && !line.last && !center) {
+ const words = lineText.split(' ');
+
+ if (words.length > 1) {
+ const spaceCount = words.length - 1;
+
+ const space = (this.w - line.width + spaceWidth*spaceCount)/spaceCount;
+
+ let x = indent;
+ for (const part of line.parts) {
+ const font = this.fontByStyle(part.style);
+ let partWords = part.text.split(' ');
+
+ for (let i = 0; i < partWords.length; i++) {
+ let word = partWords[i];
+ out += this.drawHelper.fillText(word, x, y, font);
+ x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
+ }
+ }
+ filled = true;
+ }
+ }
+
+ // просто выводим текст
+ if (!filled) {
+ let x = indent;
+ x = (center ? this.indent + (this.w - this.measureText(lineText, centerStyle))/2 : x);
+ for (const part of line.parts) {
+ let text = part.text;
+ const font = this.fontByStyle(part.style);
+ out += this.drawHelper.fillText(text, x, y, font);
+ x += this.measureText(text, part.style);
+ }
+ }
+ y += this.lineHeight;
}
- y += this.lineHeight;
}
out += '
';
@@ -500,7 +496,7 @@ class TextPage extends Vue {
return;
}
- if (this.showStatusBar && this.linesDown) {
+ if (this.showStatusBar && this.linesDown && this.pageLineCount > 0) {
const lines = this.linesDown;
let i = this.pageLineCount;
if (this.keepLastToFirst)
@@ -514,6 +510,8 @@ class TextPage extends Vue {
lines[i].end, this.parsed.textLength, message);
this.bookPosSeen = lines[i].end;
}
+ } else {
+ this.statusBar = '';
}
}
@@ -543,7 +541,7 @@ class TextPage extends Vue {
prepareNextPage() {
// подготовка следующей страницы заранее
- if (!this.book || !this.parsed.textLength || !this.linesDown)
+ if (!this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1)
return;
if (!this.preparing) {
@@ -576,19 +574,19 @@ class TextPage extends Vue {
}
doDown() {
- if (this.linesDown && this.linesDown.length > this.pageLineCount) {
+ if (this.linesDown && this.linesDown.length > this.pageLineCount && this.pageLineCount > 0) {
this.bookPos = this.linesDown[1].begin;
}
}
doUp() {
- if (this.linesUp && this.linesUp.length > 1) {
+ if (this.linesUp && this.linesUp.length > 1 && this.pageLineCount > 0) {
this.bookPos = this.linesUp[1].begin;
}
}
doPageDown() {
- if (this.linesDown) {
+ if (this.linesDown && this.pageLineCount > 0) {
let i = this.pageLineCount;
if (this.keepLastToFirst)
i--;
@@ -602,7 +600,7 @@ class TextPage extends Vue {
}
doPageUp() {
- if (this.linesUp) {
+ if (this.linesUp && this.pageLineCount > 0) {
let i = this.pageLineCount;
if (this.keepLastToFirst)
i--;
@@ -620,13 +618,15 @@ class TextPage extends Vue {
}
doEnd() {
- if (this.parsed.para.length) {
+ if (this.parsed.para.length && this.pageLineCount > 0) {
let i = this.parsed.para.length - 1;
let lastPos = this.parsed.para[i].offset + this.parsed.para[i].length - 1;
const lines = this.parsed.getLines(lastPos, -this.pageLineCount);
- i = this.pageLineCount - 1;
- i = (i > lines.length - 1 ? lines.length - 1 : i);
- this.bookPos = lines[i].begin;
+ if (lines) {
+ i = this.pageLineCount - 1;
+ i = (i > lines.length - 1 ? lines.length - 1 : i);
+ this.bookPos = lines[i].begin;
+ }
}
}
diff --git a/client/components/Reader/share/BookParser.js b/client/components/Reader/share/BookParser.js
index eccdcd66..e7d0449b 100644
--- a/client/components/Reader/share/BookParser.js
+++ b/client/components/Reader/share/BookParser.js
@@ -598,6 +598,8 @@ export default class BookParser {
}
}
+ if (!result.length)
+ result = null;
return result;
}
}
\ No newline at end of file
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index 6c10f6ac..70c6ad30 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -18,11 +18,7 @@ const webFonts = [
];
-// initial state
-const state = {
- toolBarActive: true,
- openedBook: {},
- settings: {
+const settingDefaults = {
textColor: '#000000',
backgroundColor: '#EBE2C9',
fontStyle: '',// 'italic'
@@ -34,7 +30,8 @@ const state = {
lineInterval: 3,// px, межстрочный интервал
textAlignJustify: true,// выравнивание по ширине
p: 25,// px, отступ параграфа
- indent: 15,// px, отступ всего текста слева и справа
+ indentLR: 15,// px, отступ всего текста слева и справа
+ indentTB: 0,// px, отступ всего текста сверху и снизу
wordWrap: true,//перенос по слогам
keepLastToFirst: true,// перенос последней строки в первую при листании
@@ -47,7 +44,13 @@ const state = {
pageChangeTransitionSpeed: 50, //0-100%
allowUrlParamBookPos: false,
- },
+};
+
+// initial state
+const state = {
+ toolBarActive: true,
+ openedBook: {},
+ settings: Object.assign({}, settingDefaults),
};
// getters
@@ -112,6 +115,8 @@ const mutations = {
export default {
fonts,
webFonts,
+ settingDefaults,
+
namespaced: true,
state,
getters,