Добавил fontVertShift в настройки, местами рефакторинг

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -7,6 +7,7 @@
                 </template>
 
                 <el-tabs class="tabs" type="border-card" tab-position="left" v-model="selectedTab">
+                    <!--------------------------------------------------------------------------->
                     <el-tab-pane label="Вид">
 
                         <el-form :model="form" size="small" label-width="120px">
@@ -59,6 +60,16 @@
                             <el-form-item label="Размер">
                                 <el-input-number v-model="fontSize" :min="5" :max="100"></el-input-number>
                             </el-form-item>
+                            <el-form-item label="Сдвиг">
+                                        <el-tooltip :open-delay="500" effect="light">
+                                            <template slot="content">
+                                                Сдвиг шрифта по вертикали в процентах от размера.<br>
+                                                Отрицательное значение сдвигает вверх, положительное -<br>
+                                                вниз
+                                            </template>
+                                            <el-input-number v-model="vertShift" :min="-100" :max="100"></el-input-number>
+                                        </el-tooltip>
+                            </el-form-item>
 
                             <el-form-item label="Стиль">
                                 <el-col :span="8">
@@ -121,6 +132,8 @@
                             </el-form-item>
                         </el-form>
                     </el-tab-pane>
+
+                    <!--------------------------------------------------------------------------->
                     <el-tab-pane label="Листание">
                         <el-form :model="form" size="mini" label-width="120px">
                             <div class="partHeader">Анимация</div>
@@ -149,7 +162,8 @@
                         </el-form>
                         
                     </el-tab-pane>
-                    <el-tab-pane label="Другое">
+                    <!--------------------------------------------------------------------------->
+                    <el-tab-pane label="Прочее">
                         <el-form :model="form" size="mini" label-width="120px">
                             <el-form-item label="URL">
                                 <el-tooltip :open-delay="500" effect="light">
@@ -199,6 +213,19 @@ export default @Component({
         fontItalic: function(newValue) {
             this.fontStyle = (newValue ? 'italic' : '');
         },
+        vertShift: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : this.fontName);
+            this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
+            this.fontVertShift = newValue;
+        },
+        fontName: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : newValue);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
+        webFontName: function(newValue) {
+            const font = (newValue ? newValue : this.fontName);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
     },
 })
 class SettingsPage extends Vue {
@@ -206,6 +233,7 @@ class SettingsPage extends Vue {
     form = {};
     fontBold = false;
     fontItalic = false;
+    vertShift = 0;
 
     webFonts = [];
     fonts = [];
@@ -214,11 +242,11 @@ class SettingsPage extends Vue {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
 
-        this.form = this.settings;
+        this.form = Object.assign({}, this.settings);
         for (let prop in rstore.settingDefaults) {
             this[prop] = this.form[prop];
             this.$watch(prop, (newValue) => {
-                this.form = Object.assign({}, this.form, {[prop]: newValue})
+                this.form = Object.assign({}, this.form, {[prop]: newValue});
             });
         }
         this.fontBold = (this.fontWeight == 'bold');
@@ -226,6 +254,8 @@ class SettingsPage extends Vue {
 
         this.fonts = rstore.fonts;
         this.webFonts = rstore.webFonts;
+        const font = (this.webFontName ? this.webFontName : this.fontName);
+        this.vertShift = this.fontShifts[font] || 0;
     }
 
     get settings() {

client/components/Reader/TextPage/TextPage.vue

@@ -42,7 +42,7 @@ export default @Component({
             this.draw();
         },
         settings: function() {
-            this.loadSettings();
+            this.debouncedLoadSettings();
         },
     },
 })
@@ -88,13 +88,13 @@ class TextPage extends Vue {
             this.drawStatusBar();
         }, 60);        
 
+        this.debouncedLoadSettings = _.throttle(() => {
+            this.loadSettings();
+        }, 50);
+
         this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
         this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 
-        this.fontShifts = {};
-        for (const font of rstore.fonts) {
-            this.fontShifts[font.name] = font.fontVertShift;
-        }
 /*
         const settings = Object.assign({}, this.settings);
         let updated = false;
@@ -120,11 +120,7 @@ class TextPage extends Vue {
 
     calcDrawProps() {
         //preloaded fonts
-        if (!this.fontShifts.hasOwnProperty(this.fontName))
-            this.fontShifts[this.fontName] = this.fontVertShift;
-        this.fontList = [];
-        for (let fontName in this.fontShifts)
-            this.fontList.push(`12px ${fontName}`);
+        this.fontList = [`12px ${this.fontName}`];
 
         //widths
         this.realWidth = this.$refs.main.clientWidth;
@@ -162,7 +158,7 @@ class TextPage extends Vue {
         this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha);
         this.currentTransition = '';
         this.pageChangeDirectionDown = true;
-        this.fontShift = (this.fontShifts[this.fontName] ? this.fontShifts[this.fontName] : 0)/100;
+        this.fontShift = this.fontVertShift/100;
 
         //drawHelper
         this.drawHelper.realWidth = this.realWidth;
@@ -247,7 +243,7 @@ class TextPage extends Vue {
         if (wf && i >= 0) {
             this.fontName = wf;
             this.fontCssUrl = rstore.webFonts[i].css;
-            this.fontVertShift = rstore.webFonts[i].fontVertShift;
+            this.fontVertShift = settings.fontShifts[wf] || 0;
         }
     }