DrawHelper.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. import {sleep} from '../../../share/utils';
  2. export default class DrawHelper {
  3. fontBySize(size) {
  4. return `${size}px ${this.fontName}`;
  5. }
  6. fontByStyle(style) {
  7. return `${style.italic ? 'italic' : this.fontStyle} ${style.bold ? 'bold' : this.fontWeight} ${this.fontSize}px ${this.fontName}`;
  8. }
  9. measureText(text, style) {// eslint-disable-line no-unused-vars
  10. this.context.font = this.fontByStyle(style);
  11. return this.context.measureText(text).width;
  12. }
  13. measureTextFont(text, font) {// eslint-disable-line no-unused-vars
  14. this.context.font = font;
  15. return this.context.measureText(text).width;
  16. }
  17. drawPage(lines, isScrolling) {
  18. if (!this.lastBook || this.pageLineCount < 1 || !this.book || !lines || !this.parsed.textLength)
  19. return '';
  20. const font = this.fontByStyle({});
  21. const justify = (this.textAlignJustify ? 'text-align: justify; text-align-last: justify;' : '');
  22. let out = `<div style="width: ${this.w}px; height: ${this.h}px;` +
  23. ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
  24. ` line-height: ${this.lineHeight}px;">`;
  25. let imageDrawn = new Set();
  26. let len = lines.length;
  27. const lineCount = this.pageLineCount + (isScrolling ? 1 : 0);
  28. len = (len > lineCount ? lineCount : len);
  29. for (let i = 0; i < len; i++) {
  30. const line = lines[i];
  31. /* line:
  32. {
  33. begin: Number,
  34. end: Number,
  35. first: Boolean,
  36. last: Boolean,
  37. parts: array of {
  38. style: {bold: Boolean, italic: Boolean, center: Boolean},
  39. image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
  40. text: String,
  41. }
  42. }*/
  43. let sel = new Set();
  44. //поиск
  45. if (i == 0 && this.searching) {
  46. let pureText = '';
  47. for (const part of line.parts) {
  48. pureText += part.text;
  49. }
  50. pureText = pureText.toLowerCase();
  51. let j = 0;
  52. while (1) {// eslint-disable-line no-constant-condition
  53. j = pureText.indexOf(this.needle, j);
  54. if (j >= 0) {
  55. for (let k = 0; k < this.needle.length; k++) {
  56. sel.add(j + k);
  57. }
  58. } else
  59. break;
  60. j++;
  61. }
  62. }
  63. let lineText = '';
  64. let center = false;
  65. let space = false;
  66. let j = 0;
  67. //формируем строку
  68. for (const part of line.parts) {
  69. let tOpen = (part.style.bold ? '<b>' : '');
  70. tOpen += (part.style.italic ? '<i>' : '');
  71. let tClose = (part.style.italic ? '</i>' : '');
  72. tClose += (part.style.bold ? '</b>' : '');
  73. let text = '';
  74. if (i == 0 && this.searching) {
  75. for (let k = 0; k < part.text.length; k++) {
  76. text += (sel.has(j) ? `<ins>${part.text[k]}</ins>` : part.text[k]);
  77. j++;
  78. }
  79. } else
  80. text = part.text;
  81. if (text.trim() == '')
  82. text = `<span style="white-space: pre">${text}</span>`;
  83. lineText += `${tOpen}${text}${tClose}`;
  84. center = center || part.style.center;
  85. space = space || part.style.space;
  86. //избражения
  87. //image: {local: Boolean, inline: Boolean, id: String, imageLine: Number, lineCount: Number, paraIndex: Number},
  88. const img = part.image;
  89. if (img && img.id && !img.inline && !imageDrawn.has(img.paraIndex)) {
  90. if (img.local) {
  91. const bin = this.parsed.binary[img.id];
  92. let imgH = img.lineCount*this.lineHeight;
  93. imgH = (imgH <= bin.h ? imgH : bin.h);
  94. let imgW = bin.w;
  95. let resize = '';
  96. if (bin.h > imgH) {
  97. resize = `height: ${imgH}px`;
  98. imgW = imgW*imgH/bin.h;
  99. }
  100. const left = (this.w - imgW)/2;
  101. const top = ((img.lineCount*this.lineHeight - imgH)/2) + (i - img.imageLine)*this.lineHeight;
  102. lineText += `<img src="data:${bin.type};base64,${bin.data}" style="position: absolute; left: ${left}px; top: ${top}px; ${resize}"/>`;
  103. } else {
  104. //
  105. }
  106. imageDrawn.add(img.paraIndex);
  107. }
  108. }
  109. const centerStyle = (center ? `text-align: center; text-align-last: center; width: ${this.w}px` : '')
  110. if ((line.first || space) && !center) {
  111. let p = (line.first ? this.p : 0);
  112. p = (space ? p + this.p : p);
  113. lineText = `<span style="display: inline-block; margin-left: ${p}px"></span>${lineText}`;
  114. }
  115. if (line.last || center)
  116. lineText = `<span style="display: inline-block; ${centerStyle}">${lineText}</span>`;
  117. out += (i > 0 ? '<br>' : '') + lineText;
  118. }
  119. out += '</div>';
  120. return out;
  121. }
  122. drawPercentBar(x, y, w, h, font, fontSize, bookPos, textLength) {
  123. const pad = 3;
  124. const fh = h - 2*pad;
  125. const fh2 = fh/2;
  126. const t1 = `${Math.floor((bookPos + 1)/1000)}k/${Math.floor(textLength/1000)}k`;
  127. const w1 = this.measureTextFont(t1, font) + fh2;
  128. const read = (bookPos + 1)/textLength;
  129. const t2 = `${(read*100).toFixed(2)}%`;
  130. const w2 = this.measureTextFont(t2, font);
  131. let w3 = w - w1 - w2;
  132. let out = '';
  133. if (w1 + w2 <= w)
  134. out += this.fillTextShift(t1, x, y, font, fontSize);
  135. if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) {
  136. const barWidth = w - w1 - w2 - fh2;
  137. out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarColor);
  138. out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarColor);
  139. }
  140. if (w1 <= w)
  141. out += this.fillTextShift(t2, x + w1 + w3, y, font, fontSize);
  142. return out;
  143. }
  144. drawStatusBar(statusBarTop, statusBarHeight, bookPos, textLength, title) {
  145. let out = `<div class="layout" style="` +
  146. `width: ${this.realWidth}px; height: ${statusBarHeight}px; ` +
  147. `color: ${this.statusBarColor}">`;
  148. const fontSize = statusBarHeight*0.75;
  149. const font = 'bold ' + this.fontBySize(fontSize);
  150. out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarColor);
  151. const date = new Date();
  152. const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
  153. const timeW = this.measureTextFont(time, font);
  154. out += this.fillTextShift(time, this.realWidth - timeW - fontSize, 2, font, fontSize);
  155. out += this.fillTextShift(this.fittingString(title, this.realWidth/2 - fontSize - 3, font), fontSize, 2, font, fontSize);
  156. out += this.drawPercentBar(this.realWidth/2, 2, this.realWidth/2 - timeW - 2*fontSize, statusBarHeight, font, fontSize, bookPos, textLength);
  157. out += '</div>';
  158. return out;
  159. }
  160. statusBarClickable(statusBarTop, statusBarHeight) {
  161. return `<div class="layout" style="position: absolute; ` +
  162. `left: 0px; top: ${statusBarTop ? 1 : this.realHeight - statusBarHeight + 1}px; ` +
  163. `width: ${this.realWidth/2}px; height: ${statusBarHeight}px; cursor: pointer"></div>`;
  164. }
  165. fittingString(str, maxWidth, font) {
  166. let w = this.measureTextFont(str, font);
  167. const ellipsis = '…';
  168. const ellipsisWidth = this.measureTextFont(ellipsis, font);
  169. if (w <= maxWidth || w <= ellipsisWidth) {
  170. return str;
  171. } else {
  172. let len = str.length;
  173. while (w >= maxWidth - ellipsisWidth && len-- > 0) {
  174. str = str.substring(0, len);
  175. w = this.measureTextFont(str, font);
  176. }
  177. return str + ellipsis;
  178. }
  179. }
  180. fillTextShift(text, x, y, font, size, css) {
  181. return this.fillText(text, x, y + size*this.fontShift, font, css);
  182. }
  183. fillText(text, x, y, font, css) {
  184. css = (css ? css : '');
  185. return `<div style="position: absolute; white-space: pre; left: ${x}px; top: ${y}px; font: ${font}; ${css}">${text}</div>`;
  186. }
  187. fillRect(x, y, w, h, color) {
  188. return `<div style="position: absolute; left: ${x}px; top: ${y}px; ` +
  189. `width: ${w}px; height: ${h}px; background-color: ${color}"></div>`;
  190. }
  191. strokeRect(x, y, w, h, color) {
  192. return `<div style="position: absolute; left: ${x}px; top: ${y}px; ` +
  193. `width: ${w}px; height: ${h}px; box-sizing: border-box; border: 1px solid ${color}"></div>`;
  194. }
  195. async doPageAnimationThaw(page1, page2, duration, isDown, animation1Finish) {
  196. page1.style.animation = `page1-animation-thaw ${duration}ms ease-in 1`;
  197. page2.style.animation = `page2-animation-thaw ${duration}ms ease-in 1`;
  198. await animation1Finish(duration);
  199. }
  200. async doPageAnimationBlink(page1, page2, duration, isDown, animation1Finish, animation2Finish) {
  201. page1.style.opacity = '0';
  202. page2.style.opacity = '0';
  203. page2.style.animation = `page2-animation-thaw ${duration/2}ms ease-out 1`;
  204. await animation2Finish(duration/2);
  205. page1.style.opacity = '1';
  206. page1.style.animation = `page1-animation-thaw ${duration/2}ms ease-in 1`;
  207. await animation1Finish(duration/2);
  208. page2.style.opacity = '1';
  209. }
  210. async doPageAnimationRightShift(page1, page2, duration, isDown, animation1Finish) {
  211. const s = this.w + this.fontSize;
  212. if (isDown) {
  213. page1.style.transform = `translateX(${s}px)`;
  214. await sleep(30);
  215. page1.style.transition = `${duration}ms ease-in-out`;
  216. page1.style.transform = `translateX(0px)`;
  217. page2.style.transition = `${duration}ms ease-in-out`;
  218. page2.style.transform = `translateX(-${s}px)`;
  219. await animation1Finish(duration);
  220. } else {
  221. page1.style.transform = `translateX(-${s}px)`;
  222. await sleep(30);
  223. page1.style.transition = `${duration}ms ease-in-out`;
  224. page1.style.transform = `translateX(0px)`;
  225. page2.style.transition = `${duration}ms ease-in-out`;
  226. page2.style.transform = `translateX(${s}px)`;
  227. await animation1Finish(duration);
  228. }
  229. }
  230. async doPageAnimationDownShift(page1, page2, duration, isDown, animation1Finish) {
  231. const s = this.h + this.fontSize/2;
  232. if (isDown) {
  233. page1.style.transform = `translateY(${s}px)`;
  234. await sleep(30);
  235. page1.style.transition = `${duration}ms ease-in-out`;
  236. page1.style.transform = `translateY(0px)`;
  237. page2.style.transition = `${duration}ms ease-in-out`;
  238. page2.style.transform = `translateY(-${s}px)`;
  239. await animation1Finish(duration);
  240. } else {
  241. page1.style.transform = `translateY(-${s}px)`;
  242. await sleep(30);
  243. page1.style.transition = `${duration}ms ease-in-out`;
  244. page1.style.transform = `translateY(0px)`;
  245. page2.style.transition = `${duration}ms ease-in-out`;
  246. page2.style.transform = `translateY(${s}px)`;
  247. await animation1Finish(duration);
  248. }
  249. }
  250. }