release(logcat): v0.1.0

Author: surunzi

README.md

@@ -67,6 +67,7 @@ UI library.
 * [text-viewer](./src/text-viewer/README.md): Text viewer with line number.
 * [toolbar](./src/toolbar/README.md): Application toolbar.
 * [video-player](./src/video-player/README.md): Video player.
+* [virtual-list](./src/virtual-list/README.md): Vertical list with virtual scrolling.
 * [window](./src/window/README.md): HTML5 window manager.
 
 All these components is published individually. You can use any of them by adding traditional scripts and style links or installing npm packages.

index.json

@@ -182,12 +182,12 @@
   },
   "logcat": {
     "react": true,
+    "dependencies": ["virtual-list"],
     "version": "0.5.1",
     "style": true,
     "icon": false,
     "test": true,
-    "install": false,
-    "dependencies": []
+    "install": false
   },
   "lrc-player": {
     "test": false,

src/logcat/index.ts

@@ -13,6 +13,9 @@ import contain from 'licia/contain'
 import dateFormat from 'licia/dateFormat'
 import toNum from 'licia/toNum'
 import omit from 'licia/omit'
+import ResizeSensor from 'licia/ResizeSensor'
+import debounce from 'licia/debounce'
+import LunaVirtualList from 'luna-virtual-list'
 import { exportCjs } from '../share/util'
 
 /** IOptions */
@@ -57,8 +60,6 @@ interface IInnerEntry extends IBaseEntry {
   container: HTMLElement
 }
 
-const MIN_APPEND_INTERVAL = 100
-
 /**
  * Android logcat viewer.
  *
@@ -75,23 +76,31 @@ const MIN_APPEND_INTERVAL = 100
  * })
  */
 export default class Logcat extends Component<IOptions> {
-  private isAtBottom = true
   private render: types.AnyFn
   private entries: Array<IInnerEntry> = []
   private displayEntries: Array<IInnerEntry> = []
-  private appendTimer: NodeJS.Timeout | null = null
   private removeThreshold = 1
-  private frag: DocumentFragment = document.createDocumentFragment()
+  private virtualList: LunaVirtualList
+  private resizeSensor: ResizeSensor
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'logcat' }, options)
 
     this.initOptions(options, {
-      maxNum: 5000,
+      maxNum: 10000,
       view: 'standard',
       entries: [],
       wrapLongLines: false,
     })
 
+    this.resizeSensor = new ResizeSensor(container)
+
+    this.initTpl()
+    this.virtualList = new LunaVirtualList(
+      this.find('.virtual-list').get(0) as HTMLElement,
+      { autoScroll: true }
+    )
+    this.addSubComponent(this.virtualList)
+
     const maxNum = this.options.maxNum
     if (maxNum !== 0 && maxNum > 500) {
       this.removeThreshold = Math.round(maxNum / 10)
@@ -111,7 +120,7 @@ export default class Logcat extends Component<IOptions> {
     this.bindEvent()
   }
   destroy() {
-    this.$container.off('scroll', this.onScroll)
+    this.resizeSensor.destroy()
     super.destroy()
   }
   /** Append entry. */
@@ -140,7 +149,7 @@ export default class Logcat extends Component<IOptions> {
         if (entry) {
           if (displayEntries[0] === entry) {
             displayEntries.shift()
-            $(entry.container).remove()
+            this.virtualList.remove(entry.container)
           }
         }
       }
@@ -151,30 +160,17 @@ export default class Logcat extends Component<IOptions> {
 
     if (this.filterEntry(e)) {
       this.displayEntries.push(e)
-      this.frag.appendChild(container)
-      if (!this.appendTimer) {
-        this.appendTimer = setTimeout(this._append, MIN_APPEND_INTERVAL)
-      }
+      this.virtualList.append(container)
     }
   }
   /** Clear all entries. */
   clear() {
-    if (this.appendTimer) {
-      clearTimeout(this.appendTimer)
-      this.appendTimer = null
-      this.frag = document.createDocumentFragment()
-    }
     this.entries = []
-    this.$container.html('')
+    this.virtualList.clear()
   }
   /** Scroll to end. */
   scrollToEnd() {
-    const { container } = this
-    const { scrollHeight, scrollTop, offsetHeight } = container
-    if (scrollTop <= scrollHeight - offsetHeight) {
-      container.scrollTop = 10000000
-      this.isAtBottom = true
-    }
+    this.virtualList.scrollToEnd()
   }
   /** Check if there is any selection. */
   hasSelection() {
@@ -197,14 +193,6 @@ export default class Logcat extends Component<IOptions> {
     const selection = window.getSelection()
     return selection ? selection.toString() : ''
   }
-  private _append = () => {
-    const isAtBottom = this.isAtBottom
-    this.container.appendChild(this.frag)
-    this.appendTimer = null
-    if (isAtBottom) {
-      this.scrollToEnd()
-    }
-  }
   private filterEntry(entry: IBaseEntry) {
     const { filter } = this.options
 
@@ -232,9 +220,16 @@ export default class Logcat extends Component<IOptions> {
 
     return true
   }
+  private initTpl() {
+    this.$container.html(this.c('<div class="virtual-list"></div>'))
+  }
   private bindEvent() {
     const { c } = this
 
+    this.resizeSensor.addListener(
+      debounce(() => this.virtualList.update(), 100)
+    )
+
     this.on('changeOption', (name, val) => {
       const { entries } = this
 
@@ -277,8 +272,6 @@ export default class Logcat extends Component<IOptions> {
     const self = this
 
     this.$container
-      .on('scroll', this.onScroll)
-      .on('click', () => (this.isAtBottom = false))
       .on('contextmenu', c('.entry'), function (this: HTMLDivElement, e) {
         e.stopPropagation()
         const idx = $(this).data('idx')
@@ -295,18 +288,6 @@ export default class Logcat extends Component<IOptions> {
         self.emit('contextmenu', e.origEvent)
       })
   }
-  private onScroll = () => {
-    const { scrollHeight, clientHeight, scrollTop } = this
-      .container as HTMLElement
-
-    let isAtBottom = false
-    if (scrollHeight === clientHeight) {
-      isAtBottom = true
-    } else if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
-      isAtBottom = true
-    }
-    this.isAtBottom = isAtBottom
-  }
   private formatStandard(entry: IInnerEntry) {
     const { c } = this
 
@@ -339,7 +320,6 @@ export default class Logcat extends Component<IOptions> {
   private _render() {
     const { container } = this
     this.$container.html('')
-    this.isAtBottom = true
 
     const frag = document.createDocumentFragment()
     each(this.displayEntries, (entry) => {

src/logcat/package.json

@@ -3,6 +3,9 @@
   "version": "0.5.1",
   "description": "Android logcat viewer",
   "luna": {
-    "react": true
+    "react": true,
+    "dependencies": [
+      "virtual-list"
+    ]
   }
 }

src/logcat/story.js

@@ -2,7 +2,6 @@ import 'luna-logcat.css'
 import Logcat from 'luna-logcat.js'
 import readme from './README.md'
 import story from '../share/story'
-import each from 'licia/each'
 import $ from 'licia/$'
 import random from 'licia/random'
 import randomItem from 'licia/randomItem'
@@ -34,7 +33,7 @@ const def = story(
       if (destroyed) {
         return
       }
-      setTimeout(append, random(10, 100))
+      setTimeout(append, random(100, 500))
     }
     append()
 
@@ -70,7 +69,7 @@ const def = story(
             if (destroyed) {
               return
             }
-            setTimeout(append, random(10, 100))
+            setTimeout(append, random(100, 500))
           }
           append()
         }

src/logcat/style.scss

@@ -4,15 +4,12 @@
 @use 'sass:map';
 
 .luna-logcat {
-  padding-left: #{theme.$padding-x-x-s}px;
   unicode-bidi: embed;
   position: relative;
-  overflow: auto;
   line-height: #{theme.$line-height-l-g}em;
   border: 1px solid theme.$color-border;
   white-space: pre;
-  will-change: transform;
-  transform: translate3d(0, 0, 0);
+  overflow: hidden;
   @include mixin.component();
   & {
     user-select: text;
@@ -28,6 +25,7 @@
 }
 
 .entry {
+  padding-left: #{theme.$padding-x-x-s}px;
   font-size: #{theme.$font-size-s-m}px;
 }
 

src/virtual-list/index.ts

@@ -45,6 +45,7 @@ export default class VirtualList extends Component<IOptions> {
   private updateTimer: NodeJS.Timeout | null = null
   private updateItems: Item[] = []
   private displayItems: Item[] = []
+  private hasScrollbar = false
   private scrollTimer: NodeJS.Timeout | null = null
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'virtual-list' }, options)
@@ -78,7 +79,7 @@ export default class VirtualList extends Component<IOptions> {
   /** Set items. */
   setItems(els: HTMLElement[]) {
     this.updateItems = []
-    each(els, el => this.append(el))
+    each(els, (el) => this.append(el))
   }
   /** Remove item. */
   remove(el: HTMLElement) {
@@ -105,6 +106,15 @@ export default class VirtualList extends Component<IOptions> {
       this._update()
     }
   }
+  /** Scroll to end. */
+  scrollToEnd() {
+    const { container } = this
+    const { scrollTop, scrollHeight, clientHeight } = container
+    if (scrollTop <= scrollHeight - clientHeight) {
+      container.scrollTop = 10000000
+      this.render()
+    }
+  }
   private _update = () => {
     const items = this.updateItems.splice(0, 1000)
     if (isEmpty(items)) {
@@ -115,7 +125,12 @@ export default class VirtualList extends Component<IOptions> {
     const { fakeEl } = this
     const fakeFrag = document.createDocumentFragment()
     for (let i = 0; i < len; i++) {
-      fakeFrag.appendChild(items[i].el)
+      const item = items[i]
+      if (item.el.parentNode === this.el) {
+        item.update()
+      } else {
+        fakeFrag.appendChild(item.el)
+      }
     }
     fakeEl.appendChild(fakeFrag)
     for (let i = 0; i < len; i++) {
@@ -155,7 +170,9 @@ export default class VirtualList extends Component<IOptions> {
     this.space.style.width = width + 'px'
   }
   private bindEvent() {
-    this.$container.on('scroll', this.onScroll)
+    this.$container
+      .on('scroll', this.onScroll)
+      .on('click', () => (this.isAtBottom = false))
   }
   private render = throttle(
     ({ topTolerance = 500, bottomTolerance = 500 } = {}) => {
@@ -164,9 +181,9 @@ export default class VirtualList extends Component<IOptions> {
         return
       }
 
-      const { scrollTop, offsetHeight } = container as HTMLElement
+      const { scrollTop, scrollHeight, clientHeight } = container as HTMLElement
       const top = scrollTop - topTolerance
-      const bottom = scrollTop + offsetHeight + bottomTolerance
+      const bottom = scrollTop + clientHeight + bottomTolerance
 
       const { items } = this
 
@@ -207,6 +224,7 @@ export default class VirtualList extends Component<IOptions> {
       ) {
         return
       }
+      this.displayItems = displayItems
 
       const frag = document.createDocumentFragment()
       for (let i = 0, len = displayItems.length; i < len; i++) {
@@ -216,12 +234,14 @@ export default class VirtualList extends Component<IOptions> {
       el.textContent = ''
       el.appendChild(frag)
 
-      if (this.options.autoScroll) {
-        const { scrollHeight } = container
-        if (this.isAtBottom && scrollTop <= scrollHeight - offsetHeight) {
-          container.scrollTop = 10000000
-          this.render()
-        }
+      if (this.options.autoScroll && this.isAtBottom) {
+        this.scrollToEnd()
+      }
+
+      const hasScrollbar = scrollHeight > clientHeight
+      if (this.hasScrollbar !== hasScrollbar) {
+        this.hasScrollbar = hasScrollbar
+        this.update()
       }
     },
     16

src/virtual-list/style.scss

@@ -5,6 +5,7 @@
   height: 100%;
   position: relative;
   will-change: scroll-position;
+  transform: translate3d(0, 0, 0);
 }
 
 .fake-items {