TextPage.vue 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331
  1. <template>
  2. <div ref="main" class="main">
  3. <canvas ref="canvas" class="canvas" @click="canvasClick"></canvas>
  4. </div>
  5. </template>
  6. <script>
  7. //-----------------------------------------------------------------------------
  8. import Vue from 'vue';
  9. import Component from 'vue-class-component';
  10. import _ from 'lodash';
  11. import bookManager from '../share/bookManager';
  12. export default @Component({
  13. watch: {
  14. bookPos: function(newValue) {
  15. this.debouncedEmitPosChange(newValue);
  16. this.drawPage();
  17. },
  18. },
  19. })
  20. class TextPage extends Vue {
  21. lastBook = null;
  22. bookPos = 0;
  23. //убрать
  24. meta = null;
  25. items = null;
  26. created() {
  27. this.commit = this.$store.commit;
  28. this.dispatch = this.$store.dispatch;
  29. this.config = this.$store.state.config;
  30. this.reader = this.$store.state.reader;
  31. this.debouncedEmitPosChange = _.debounce((newValue) => {
  32. this.$emit('book-pos-changed', {bookPos: newValue});
  33. }, 100);
  34. this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
  35. }
  36. mounted() {
  37. this.canvas = this.$refs.canvas;
  38. this.context = this.canvas.getContext('2d');
  39. }
  40. async calcDrawProps() {
  41. this.canvas.width = this.$refs.main.clientWidth;
  42. this.canvas.height = this.$refs.main.clientHeight;
  43. this.lineHeight = this.fontSize + this.lineInterval;
  44. this.pageLineCount = Math.floor(this.canvas.height/this.lineHeight);
  45. this.w = this.canvas.width - 2*this.indent;
  46. this.h = this.canvas.height;
  47. this.context.textAlign = 'left';
  48. this.context.textBaseline = 'bottom';
  49. if (this.parsed) {
  50. this.parsed.p = this.p;
  51. this.parsed.w = this.w;// px, ширина текста
  52. this.parsed.font = this.font;
  53. this.parsed.wordWrap = this.wordWrap;
  54. this.measureText = (text, style) => {// eslint-disable-line no-unused-vars
  55. if (style)
  56. this.context.font = this.fontByStyle(style);
  57. return this.context.measureText(text).width;
  58. };
  59. this.parsed.measureText = this.measureText;
  60. }
  61. }
  62. async loadFonts() {
  63. let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font)));
  64. if (loaded.some(r => !r)) {
  65. loaded = await Promise.all(this.fontList.map(font => document.fonts.load(font)));
  66. if (loaded.some(r => !r.length))
  67. throw new Error('some font not loaded');
  68. }
  69. }
  70. showBook() {
  71. this.$refs.main.focus();
  72. this.book = null;
  73. this.meta = null;
  74. this.fb2 = null;
  75. this.parsed = null;
  76. this.linesUp = null;
  77. this.linesDown = null;
  78. //preloaded fonts
  79. this.fontList = ['12px ReaderDefault', '12px Arial', '12px ComicSansMS', '12px OpenSans', '12px Roboto', '12px ArialNarrow',
  80. '12px Georgia', '12px Tahoma', '12px Helvetica', '12px CenturySchoolbook'];
  81. //draw props
  82. this.textColor = 'black';
  83. this.backgroundColor = '#478355';
  84. this.fontStyle = '';// 'bold','italic'
  85. this.fontSize = 40;// px
  86. this.fontName = 'Arial';
  87. this.lineInterval = 15;// px, межстрочный интервал
  88. this.textAlignJustify = true;// выравнивание по ширине
  89. this.p = 60;// px, отступ параграфа
  90. this.indent = 20;// px, отступ всего текста слева и справа
  91. this.wordWrap = true;
  92. this.calcDrawProps();
  93. this.drawPage();// пока не загрузили, очистим канвас
  94. if (this.lastBook) {
  95. (async() => {
  96. const isParsed = await bookManager.hasBookParsed(this.lastBook);
  97. if (!isParsed) {
  98. return;
  99. }
  100. this.book = await bookManager.getBook(this.lastBook);
  101. this.meta = bookManager.metaOnly(this.book);
  102. this.fb2 = this.meta.fb2;
  103. this.$root.$emit('set-app-title', _.compact([
  104. this.fb2.lastName,
  105. this.fb2.middleName,
  106. this.fb2.firstName,
  107. '-',
  108. this.fb2.bookTitle
  109. ]).join(' '));
  110. const parsed = this.book.parsed;
  111. this.parsed = parsed;
  112. this.calcDrawProps();
  113. await this.loadFonts();
  114. this.drawPage();
  115. })();
  116. }
  117. }
  118. onResize() {
  119. this.calcDrawProps();
  120. this.drawPage();
  121. }
  122. get font() {
  123. return `${this.fontStyle} ${this.fontSize}px ${this.fontName}`;
  124. }
  125. fontByStyle(style) {
  126. return `${style.italic ? 'italic' : ''} ${style.bold ? 'bold' : ''} ${this.fontSize}px ${this.fontName}`;
  127. }
  128. drawPage() {
  129. if (!this.lastBook)
  130. return;
  131. //пустой канвас
  132. const canvas = this.canvas;
  133. const context = this.context;
  134. context.fillStyle = this.backgroundColor;
  135. context.fillRect(0, 0, canvas.width, canvas.height);
  136. if (!this.book)
  137. return;
  138. context.font = this.font;
  139. context.fillStyle = this.textColor;
  140. const spaceWidth = this.context.measureText(' ').width;
  141. const lines = this.parsed.getLines(this.bookPos, this.pageLineCount + 1);
  142. let len = lines.length;
  143. len = (len > this.pageLineCount ? len = this.pageLineCount : len);
  144. let y = -this.lineInterval/2 + (this.h - this.pageLineCount*this.lineHeight)/2;
  145. for (let i = 0; i < len; i++) {
  146. const line = lines[i];
  147. /* line:
  148. {
  149. begin: Number,
  150. end: Number,
  151. first: Boolean,
  152. last: Boolean,
  153. parts: array of {
  154. style: {bold: Boolean, italic: Boolean}
  155. text: String,
  156. }
  157. }*/
  158. let indent = this.indent + (line.first ? this.p : 0);
  159. y += this.lineHeight;
  160. let filled = false;
  161. if (this.textAlignJustify && !line.last) {
  162. let lineText = '';
  163. for (const part of line.parts) {
  164. lineText += part.text;
  165. }
  166. const words = lineText.split(' ');
  167. if (words.length > 1) {
  168. const spaceCount = words.length - 1;
  169. const space = (this.w - line.width + spaceWidth*spaceCount)/spaceCount;
  170. let x = indent;
  171. for (const part of line.parts) {
  172. context.font = this.fontByStyle(part.style);
  173. let partWords = part.text.split(' ');
  174. for (let i = 0; i < partWords.length; i++) {
  175. let word = partWords[i];
  176. context.fillText(word, x, y);
  177. x += this.measureText(word, part.style) + (i < partWords.length - 1 ? space : 0);
  178. }
  179. }
  180. filled = true;
  181. }
  182. }
  183. if (!filled) {
  184. let x = indent;
  185. for (const part of line.parts) {
  186. let text = part.text;
  187. context.font = this.fontByStyle(part.style);
  188. context.fillText(text, x, y);
  189. x += this.measureText(text, part.style);
  190. }
  191. }
  192. }
  193. this.linesUp = this.parsed.getLines(this.bookPos, -(this.pageLineCount + 1));
  194. this.linesDown = lines;
  195. }
  196. doDown() {
  197. if (this.linesDown && this.linesDown.length > 1) {
  198. this.bookPos = this.linesDown[1].begin;
  199. }
  200. }
  201. doUp() {
  202. if (this.linesUp && this.linesUp.length > 1) {
  203. this.bookPos = this.linesUp[1].begin;
  204. }
  205. }
  206. doPageDown() {
  207. if (this.linesDown) {
  208. let i = this.pageLineCount;
  209. i--;
  210. if (i >= 0 && this.linesDown.length > i) {
  211. this.bookPos = this.linesDown[i].begin;
  212. }
  213. }
  214. }
  215. doPageUp() {
  216. if (this.linesUp) {
  217. let i = this.pageLineCount;
  218. i--;
  219. i = (i > this.linesUp.length - 1 ? this.linesUp.length - 1 : i);
  220. if (i >= 0 && this.linesUp.length > i) {
  221. this.bookPos = this.linesUp[i].begin;
  222. }
  223. }
  224. }
  225. doHome() {
  226. this.bookPos = 0;
  227. }
  228. doEnd() {
  229. if (this.parsed.para.length) {
  230. const lastPara = this.parsed.para[this.parsed.para.length - 1];
  231. this.bookPos = lastPara.offset + lastPara.length - 1;
  232. }
  233. }
  234. keyHook(event) {
  235. if (event.type == 'keydown') {
  236. switch (event.code) {
  237. case 'ArrowDown':
  238. this.doDown();
  239. break;
  240. case 'ArrowUp':
  241. this.doUp();
  242. break;
  243. case 'PageDown':
  244. case 'ArrowRight':
  245. case 'Enter':
  246. case 'Space':
  247. this.doPageDown();
  248. break;
  249. case 'PageUp':
  250. case 'ArrowLeft':
  251. case 'Backspace':
  252. this.doPageUp();
  253. break;
  254. case 'Home':
  255. this.doHome();
  256. break;
  257. case 'End':
  258. this.doEnd();
  259. break;
  260. }
  261. }
  262. }
  263. canvasClick(event) {
  264. console.log(event);
  265. this.$emit('tool-bar-toggle');
  266. }
  267. }
  268. //-----------------------------------------------------------------------------
  269. </script>
  270. <style scoped>
  271. .main {
  272. flex: 1;
  273. margin: 0;
  274. padding: 0;
  275. overflow: hidden;
  276. }
  277. .canvas {
  278. margin: 0;
  279. padding: 0;
  280. }
  281. </style>