feat(desktop & web): support auto scroll interval setting

package.json

@@ -46,6 +46,7 @@
     "monaco-editor": "^0.25.2",
     "mqtt": "4.3.7",
     "reflect-metadata": "^0.1.13",
+    "rxjs": "6.2.0",
     "sqlite3": "^5.0.4",
     "typedi": "^0.8.0",
     "typeorm": "^0.2.34",
@@ -58,6 +59,7 @@
     "vue-i18n": "^8.11.2",
     "vue-property-decorator": "^8.5.1",
     "vue-router": "^3.4.9",
+    "vue-rx": "6.2.0",
     "vue-virtual-scroller": "^1.0.10",
     "vuex": "^3.0.1",
     "vuex-class": "^0.3.2",
@@ -71,7 +73,7 @@
     "@types/fs-extra": "^8.0.0",
     "@types/lodash": "^4.14.142",
     "@types/mocha": "^5.2.7",
-    "@types/node": "^12.12.6",
+    "@types/node": "^14.16.0",
     "@types/sqlite3": "^3.1.8",
     "@types/ws": "^8.2.1",
     "@typescript-eslint/eslint-plugin": "^3.8.0",

src/background.ts

@@ -104,6 +104,7 @@ async function createWindow() {
       autoCheck: setting.autoCheck,
       autoResub: setting.autoResub,
       autoScroll: setting.autoScroll,
+      autoScrollInterval: setting.autoScrollInterval,
       maxReconnectTimes: setting.maxReconnectTimes,
       syncOsTheme: setting.syncOsTheme,
       multiTopics: setting.multiTopics,

src/database/database.config.ts

@@ -31,6 +31,7 @@ import { syncOsTheme1639730106721 } from './migration/1639730106721-syncOsTheme'
 import { topicDisabled1640846307653 } from './migration/1640846307653-topicDisabled'
 import { reconnectPeriod1642321826532 } from './migration/1642321826532-reconnectPeriod'
 import { multiTopics1659668384878 } from './migration/1659668384878-multiTopics'
+import { autoScrollInterval1668415942736 } from './migration/1668415942736-autoScrollInterval'
 
 const STORE_PATH = getAppDataPath('MQTTX')
 try {
@@ -69,6 +70,7 @@ const ORMConfig = {
     topicDisabled1640846307653,
     reconnectPeriod1642321826532,
     multiTopics1659668384878,
+    autoScrollInterval1668415942736,
   ],
   migrationsTableName: 'temp_migration_table',
   entities: [

src/database/migration/1668415942736-autoScrollInterval.ts

@@ -0,0 +1,110 @@
+import { MigrationInterface, QueryRunner } from 'typeorm'
+
+export class autoScrollInterval1668415942736 implements MigrationInterface {
+  name = 'autoScrollInterval1668415942736'
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            CREATE TABLE "temporary_SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "autoScroll" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1),
+                "autoScrollInterval" integer NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "temporary_SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "autoScroll",
+                    "syncOsTheme",
+                    "multiTopics"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "autoScroll",
+                "syncOsTheme",
+                "multiTopics"
+            FROM "SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "SettingEntity"
+        `)
+    await queryRunner.query(`
+            ALTER TABLE "temporary_SettingEntity"
+                RENAME TO "SettingEntity"
+        `)
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`
+            ALTER TABLE "SettingEntity"
+                RENAME TO "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            CREATE TABLE "SettingEntity" (
+                "id" varchar PRIMARY KEY NOT NULL,
+                "width" integer NOT NULL DEFAULT (1025),
+                "height" integer NOT NULL DEFAULT (749),
+                "autoCheck" boolean NOT NULL DEFAULT (1),
+                "currentLang" varchar CHECK(currentLang IN ('zh', 'en', 'ja', 'tr', 'hu')) NOT NULL DEFAULT ('en'),
+                "currentTheme" varchar CHECK(currentTheme IN ('light', 'dark', 'night')) NOT NULL DEFAULT ('light'),
+                "maxReconnectTimes" integer NOT NULL DEFAULT (10),
+                "autoResub" boolean NOT NULL DEFAULT (1),
+                "autoScroll" boolean NOT NULL DEFAULT (1),
+                "syncOsTheme" boolean NOT NULL DEFAULT (0),
+                "multiTopics" boolean NOT NULL DEFAULT (1)
+            )
+        `)
+    await queryRunner.query(`
+            INSERT INTO "SettingEntity"(
+                    "id",
+                    "width",
+                    "height",
+                    "autoCheck",
+                    "currentLang",
+                    "currentTheme",
+                    "maxReconnectTimes",
+                    "autoResub",
+                    "autoScroll",
+                    "syncOsTheme",
+                    "multiTopics"
+                )
+            SELECT "id",
+                "width",
+                "height",
+                "autoCheck",
+                "currentLang",
+                "currentTheme",
+                "maxReconnectTimes",
+                "autoResub",
+                "autoScroll",
+                "syncOsTheme",
+                "multiTopics"
+            FROM "temporary_SettingEntity"
+        `)
+    await queryRunner.query(`
+            DROP TABLE "temporary_SettingEntity"
+        `)
+  }
+}

src/database/models/SettingEntity.ts

@@ -29,6 +29,9 @@ export default class SettingEntity {
   @Column({ type: 'boolean', default: true })
   autoScroll!: boolean
 
+  @Column({ type: 'integer', default: 1 })
+  autoScrollInterval!: number
+
   @Column({ type: 'boolean', default: false })
   syncOsTheme!: boolean
 

src/lang/settings.ts

@@ -118,6 +118,13 @@ export default {
     ja: '自動スクロール',
     hu: 'Automatikus görgetés',
   },
+  autoScrollInterval: {
+    zh: '自动滚动频率（秒）',
+    en: 'Auto scroll interval (seconds)',
+    tr: 'Otomatik kaydırma aralığı (saniye)',
+    ja: '自動スクロール間隔（秒）',
+    hu: 'Automatikus görgetési időköz (másodperc)',
+  },
   multiTopics: {
     zh: '多主题订阅',
     en: 'Multi topics subscribe',

src/main.ts

@@ -5,6 +5,7 @@ import VueClipboard from 'vue-clipboard2'
 import path from 'path'
 import log4js from 'log4js'
 import VueVirtualScroller from 'vue-virtual-scroller'
+import VueRx from 'vue-rx'
 
 import 'element-ui/lib/theme-chalk/index.css'
 import ElementLocale from 'element-ui/lib/locale'
@@ -36,6 +37,7 @@ ConnectionInit({ doMigrations: false, undoMigrations: false } as initOptionModel
   Vue.use(VueClipboard)
   Vue.use(VueLog4js, config)
   Vue.use(VueVirtualScroller)
+  Vue.use(VueRx)
 
   const locale: Language = store.state.app.currentLang
   const vueI18n: VueI18n = new VueI18n({

src/store/getter.ts

@@ -4,6 +4,7 @@ const getters = {
   autoCheck: (state: State) => state.app.autoCheck,
   autoResub: (state: State) => state.app.autoResub,
   autoScroll: (state: State) => state.app.autoScroll,
+  autoScrollInterval: (state: State) => state.app.autoScrollInterval,
   syncOsTheme: (state: State) => state.app.syncOsTheme,
   maxReconnectTimes: (state: State) => state.app.maxReconnectTimes,
   showSubscriptions: (state: State) => state.app.showSubscriptions,

src/store/modules/app.ts

@@ -7,6 +7,7 @@ const TOGGLE_LANG = 'TOGGLE_LANG'
 const TOGGLE_AUTO_CHECK = 'TOGGLE_AUTO_CHECK'
 const TOGGLE_AUTO_RESUB = 'TOGGLE_AUTO_RESUB'
 const TOGGLE_AUTO_SCROLL = 'TOGGLE_AUTO_SCROLL'
+const SET_AUTO_SCROLL_INTERVAL = 'SET_AUTO_SCROLL_INTERVAL'
 const SET_MAX_RECONNECT_TIMES = 'SET_MAX_RECONNECT_TIMES'
 const CHANGE_ACTIVE_CONNECTION = 'CHANGE_ACTIVE_CONNECTION'
 const REMOVE_ACTIVE_CONNECTION = 'REMOVE_ACTIVE_CONNECTION'
@@ -39,6 +40,7 @@ const app = {
     autoCheck: settingData.autoCheck,
     autoResub: settingData.autoResub,
     autoScroll: settingData.autoScroll,
+    autoScrollInterval: settingData.autoScrollInterval || 1,
     syncOsTheme: settingData.syncOsTheme,
     multiTopics: settingData.multiTopics,
     maxReconnectTimes: settingData.maxReconnectTimes || 10,
@@ -68,6 +70,9 @@ const app = {
     [TOGGLE_AUTO_SCROLL](state: App, autoScroll: boolean) {
       state.autoScroll = autoScroll
     },
+    [SET_AUTO_SCROLL_INTERVAL](state: App, autoScrollInterval: number) {
+      state.autoScrollInterval = autoScrollInterval
+    },
     [TOGGLE_SYNC_OS_THEME](state: App, syncOsTheme: boolean) {
       state.syncOsTheme = syncOsTheme
     },
@@ -168,6 +173,12 @@ const app = {
       settingData.autoScroll = payload.autoScroll
       await settingService.update(payload)
     },
+    async SET_AUTO_SCROLL_INTERVAL({ commit }: any, payload: App) {
+      const { settingService } = useServices()
+      commit(SET_AUTO_SCROLL_INTERVAL, payload.autoScrollInterval)
+      settingData.autoScrollInterval = payload.autoScrollInterval
+      await settingService.update(payload)
+    },
     async TOGGLE_SYNC_OS_THEME({ commit }: any, payload: App) {
       const { settingService } = useServices()
       commit(TOGGLE_SYNC_OS_THEME, payload.syncOsTheme)

src/types/global.d.ts

@@ -91,6 +91,7 @@ declare global {
     autoCheck: boolean
     autoResub: boolean
     autoScroll: boolean
+    autoScrollInterval: number
     showSubscriptions: boolean
     syncOsTheme: boolean
     multiTopics: boolean

src/views/connections/ConnectionsDetail.vue

@@ -282,6 +282,8 @@ import { Getter, Action } from 'vuex-class'
 import { ipcRenderer } from 'electron'
 import { MqttClient, IConnackPacket, IPublishPacket, IClientPublishOptions } from 'mqtt'
 import _ from 'lodash'
+import { Subject } from 'rxjs'
+import { throttleTime } from 'rxjs/operators'
 
 import time from '@/utils/time'
 import matchMultipleSearch from '@/utils/matchMultipleSearch'
@@ -354,6 +356,7 @@ export default class ConnectionsDetail extends Vue {
   @Getter('activeConnection') private activeConnection!: ActiveConnection
   @Getter('showSubscriptions') private showSubscriptions!: boolean
   @Getter('autoScroll') private autoScroll!: boolean
+  @Getter('autoScrollInterval') private autoScrollInterval!: number
   @Getter('maxReconnectTimes') private maxReconnectTimes!: number
   @Getter('currentTheme') private theme!: Theme
   @Getter('showClientInfo') private clientInfoVisibles!: { [id: string]: boolean }
@@ -432,6 +435,7 @@ export default class ConnectionsDetail extends Vue {
   private uptime = ''
   private bytesTimes = 0
   private messagesAddedNewItem: boolean = false
+  private scrollSubject = new Subject()
 
   get titleName() {
     return this.record.name
@@ -1018,6 +1022,10 @@ export default class ConnectionsDetail extends Vue {
   }
 
   // Scroll to page bottom
+  private scrollToBottomThrottle = () => {
+    this.scrollSubject.next()
+  }
+
   private scrollToBottom() {
     if (this.autoScroll === false) {
       return
@@ -1130,7 +1138,7 @@ export default class ConnectionsDetail extends Vue {
         this.unreadMessageIncrement({ id })
         this.$log.info(`ID: ${id} received an unread message`)
       }
-      this.scrollToBottom()
+      this.scrollToBottomThrottle()
     }
   }
   // Set timed message success
@@ -1457,6 +1465,12 @@ export default class ConnectionsDetail extends Vue {
 
   private created() {
     this.getConnectionValue(this.curConnectionId)
+    this.scrollSubject
+      .asObservable()
+      .pipe(throttleTime(this.autoScrollInterval * 1000))
+      .subscribe(() => {
+        this.scrollToBottom()
+      })
     ipcRenderer.on('searchContent', () => {
       this.handleSearchOpen()
     })
@@ -1472,6 +1486,7 @@ export default class ConnectionsDetail extends Vue {
   private beforeDestroy() {
     ipcRenderer.removeAllListeners('searchContent')
     this.removeClinetsMessageListener()
+    this.scrollSubject.unsubscribe()
     this.stopTimedSend()
     window.onresize = null
   }