chore: normalize event name

src/box-model/index.ts

@@ -32,7 +32,7 @@ export default class BoxModel extends Component<IOptions> {
     this.bindEvent()
   }
   private bindEvent() {
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'element':
           this.render()

src/color-picker/index.ts

@@ -68,7 +68,7 @@ export default class ColorPicker extends Component<IOptions> {
     this.$saturation.on(pointerEvent('down'), this.onSaturationStart)
 
     const updateColor = throttle(this.updateColor, 50)
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'color':
           this.color = new Color(val)

src/console/index.ts

@@ -667,7 +667,7 @@ export default class Console extends Component<IOptions> {
       self.selectLog(this.log)
     })
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       const { logs } = this
       switch (name) {
         case 'maxNum':

src/cropper/index.ts

@@ -181,7 +181,7 @@ export default class Cropper extends Component<IOptions> {
     this.resizeSensor.addListener(this.onResize)
     this.$container.on(pointerEvent('down'), this.onCropStart)
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'preview':
           if (val) {

src/data-grid/index.ts

@@ -455,7 +455,7 @@ export default class DataGrid extends Component<IOptions> {
       self.onResizeColStart(e)
     })
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'minHeight':
         case 'maxHeight':

src/dom-highlighter/index.ts

@@ -400,7 +400,7 @@ export default class DomHighlighter extends Component<IOptions> {
     window.addEventListener('resize', this.redraw)
     window.addEventListener('scroll', this.redraw)
 
-    this.on('optionChange', () => this.redraw())
+    this.on('changeOption', () => this.redraw())
   }
   private reset = () => {
     const viewportWidth = document.documentElement.clientWidth

src/image-viewer/index.ts

@@ -249,7 +249,7 @@ export default class ImageViewer extends Component<IOptions> {
       .on(pointerEvent('down'), this.onMoveStart)
       .on('wheel', this.onWheel)
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'image':
           this.setImage(val)

src/log/index.ts

@@ -50,7 +50,7 @@ export default class Log extends Component<IOptions> {
     this.textViewer.append(ansiToHtml(log))
   }
   private bindEvent() {
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'log':
           this.textViewer.setOption('text', ansiToHtml(val))

src/logcat/index.ts

@@ -228,7 +228,7 @@ export default class Logcat extends Component<IOptions> {
   private bindEvent() {
     const { c } = this
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       const { entries } = this
 
       switch (name) {

src/markdown-viewer/index.ts

@@ -83,7 +83,7 @@ export default class MarkdownViewer extends Component<IOptions> {
   private bindEvent() {
     const { gallery } = this
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'markdown':
           this.render()

src/mask-editor/index.ts

@@ -145,14 +145,14 @@ export default class MaskEditor extends Component<IOptions> {
     const { painter, maskBrush } = this
 
     painter.on(
-      'canvasRender',
+      'renderCanvas',
       debounce(() => {
         this.renderMask()
         this.emit('change', this.canvas)
       }, 20)
     )
 
-    painter.on('foregroundColorChange', (color: string) => {
+    painter.on('changeForegroundColor', (color: string) => {
       const c = new Color(color)
       const rgb = Color.parse(c.toRgb()).val
 
@@ -169,14 +169,14 @@ export default class MaskEditor extends Component<IOptions> {
       painter.renderCanvas()
     })
 
-    maskBrush.on('optionChange', (name, val) => {
+    maskBrush.on('changeOption', (name, val) => {
       if (name === 'layerOpacity') {
         this.drawingLayer.opacity = val
         painter.renderCanvas()
       }
     })
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'image':
           this.loadImage()

src/modal/index.ts

@@ -207,7 +207,7 @@ export default class Modal extends Component<IOptions> {
   }
   private bindEvent() {
     this.$body.on('click', this.c('.icon-close'), () => this.hide())
-    this.on('optionChange', this.render)
+    this.on('changeOption', this.render)
   }
   private render = () => {
     const { options, c, $body } = this

src/object-viewer/index.ts

@@ -318,7 +318,7 @@ export default class ObjectViewer extends Component<IOptions> {
   private bindEvent() {
     this.$container.on('click', 'li', this.onItemClick)
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'object':
           this.set(val)

src/painter/index.ts

@@ -202,7 +202,7 @@ export default class Painter extends Component<IOptions> {
   }
   setForegroundColor(color: string) {
     this.$foregroundColor.val(color)
-    this.emit('foregroundColorChange', color)
+    this.emit('changeForegroundColor', color)
   }
   getBackgroundColor() {
     return this.$backgroundColor.val()
@@ -231,7 +231,7 @@ export default class Painter extends Component<IOptions> {
       ctx.globalCompositeOperation = 'source-over'
     })
 
-    this.emit('canvasRender')
+    this.emit('renderCanvas')
   }
   private resizeCanvas(width: number, height: number) {
     const { canvas } = this
@@ -320,7 +320,7 @@ export default class Painter extends Component<IOptions> {
       })
 
     $foregroundColor.on('change', () => {
-      this.emit('foregroundColorChange', $foregroundColor.val())
+      this.emit('changeForegroundColor', $foregroundColor.val())
     })
 
     this.resizeSensor.addListener(this.onResize)
@@ -333,7 +333,7 @@ export default class Painter extends Component<IOptions> {
       this.resetViewport()
     })
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       const { canvas } = this
       switch (name) {
         case 'width':

src/painter/tools/Brush.ts

@@ -201,7 +201,7 @@ export default class Brush extends Tool {
   private bindEvent() {
     const { cursorCircle, painter } = this
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'size') {
         cursorCircle.setSize(val)
       }

src/painter/tools/Eraser.ts

@@ -93,7 +93,7 @@ export default class Eraser extends Tool {
   private bindEvent() {
     const { cursorCircle, painter } = this
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'size') {
         cursorCircle.setSize(val)
       }

src/painter/tools/Pencil.ts

@@ -163,7 +163,7 @@ export default class Pencil extends Tool {
   private bindEvent() {
     const { cursorCircle } = this
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'size') {
         cursorCircle.setSize(val)
       }

src/painter/tools/Tool.ts

@@ -66,7 +66,7 @@ export default class Tool extends Emitter {
   setOption(name: string, val: any, renderToolbar = true) {
     const oldVal = this.options[name]
     this.options[name] = val
-    this.emit('optionChange', name, val, oldVal)
+    this.emit('changeOption', name, val, oldVal)
 
     if (renderToolbar) {
       this.renderToolbar()

src/painter/tools/Zoom.ts

@@ -226,7 +226,7 @@ export default class Zoom extends Tool {
       }
     })
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'mode') {
         const { c } = this.painter
         const $icon = this.$cursorIcon

src/performance-monitor/index.ts

@@ -141,7 +141,7 @@ export default class PerformanceMonitor extends Component<IOptions> {
     this.resizeSensor.addListener(this.onResize)
     dpr.on('change', this.onResize)
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       if (name === 'color') {
         this.updateColor()
       } else if (name === 'title') {

src/setting/index.ts

@@ -264,7 +264,7 @@ export default class Setting extends Component<IOptions> {
   private bindEvent() {
     const { c } = this
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'filter':
           this.renderSettings()

src/shader-toy-player/index.ts

@@ -186,7 +186,7 @@ export default class ShaderToyPlayer extends Component<IOptions> {
 
     this.$canvas.on(pointerEvent('down'), this.onDragStart)
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'renderPass') {
         this.load(val)
       }

src/share/Component.ts

@@ -43,7 +43,7 @@ export default class Component<
       this.c(`platform-${getPlatform()}`),
     ])
 
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       if (name === 'theme' && val) {
         let t = val
         if (val === 'auto') {
@@ -88,7 +88,7 @@ export default class Component<
       if (val === oldVal) {
         return
       }
-      this.emit('optionChange', name, val, oldVal)
+      this.emit('changeOption', name, val, oldVal)
     })
   }
   getOption(name: string) {

src/syntax-highlighter/index.ts

@@ -78,7 +78,7 @@ export default class SyntaxHighlighter extends Component {
     this.bindEvent()
   }
   private bindEvent() {
-    this.on('optionChange', (name, val) => {
+    this.on('changeOption', (name, val) => {
       switch (name) {
         case 'code':
           val = this.getHighlightCode(val)

src/tab/index.ts

@@ -193,7 +193,7 @@ export default class Tab extends Component<IOptions> {
   private bindEvent() {
     const { tabs, c } = this
 
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'height':
           this.updateHeight()

src/text-viewer/index.ts

@@ -128,7 +128,7 @@ export default class TextViewer extends Component {
     )
   }
   private bindEvent() {
-    this.on('optionChange', (name) => {
+    this.on('changeOption', (name) => {
       switch (name) {
         case 'maxHeight':
           this.updateHeight()

src/window/index.ts

@@ -321,7 +321,7 @@ export default class Window extends Component<IOptions> {
   private bindEvent() {
     const { c } = this
 
-    this.on('optionChange', (name: string) => {
+    this.on('changeOption', (name: string) => {
       switch (name) {
         case 'content':
           this.renderContent()