From c434e39d4da38cbec9344790c14fa7039eb93d26 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Tue, 31 Dec 2024 19:39:37 +0800
Subject: [PATCH] chore: normalize event name

---
 src/box-model/index.ts           | 2 +-
 src/color-picker/index.ts        | 2 +-
 src/console/index.ts             | 2 +-
 src/cropper/index.ts             | 2 +-
 src/data-grid/index.ts           | 2 +-
 src/dom-highlighter/index.ts     | 2 +-
 src/image-viewer/index.ts        | 2 +-
 src/log/index.ts                 | 2 +-
 src/logcat/index.ts              | 2 +-
 src/markdown-viewer/index.ts     | 2 +-
 src/mask-editor/index.ts         | 8 ++++----
 src/modal/index.ts               | 2 +-
 src/object-viewer/index.ts       | 2 +-
 src/painter/index.ts             | 8 ++++----
 src/painter/tools/Brush.ts       | 2 +-
 src/painter/tools/Eraser.ts      | 2 +-
 src/painter/tools/Pencil.ts      | 2 +-
 src/painter/tools/Tool.ts        | 2 +-
 src/painter/tools/Zoom.ts        | 2 +-
 src/performance-monitor/index.ts | 2 +-
 src/setting/index.ts             | 2 +-
 src/shader-toy-player/index.ts   | 2 +-
 src/share/Component.ts           | 4 ++--
 src/syntax-highlighter/index.ts  | 2 +-
 src/tab/index.ts                 | 2 +-
 src/text-viewer/index.ts         | 2 +-
 src/window/index.ts              | 2 +-
 27 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/box-model/index.ts b/src/box-model/index.ts
index 58e26b0..bbbc302 100644
--- a/src/box-model/index.ts
+++ b/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()
diff --git a/src/color-picker/index.ts b/src/color-picker/index.ts
index cd8f3f9..67fcd5e 100644
--- a/src/color-picker/index.ts
+++ b/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)
diff --git a/src/console/index.ts b/src/console/index.ts
index a1aa51f..1e8bcd4 100644
--- a/src/console/index.ts
+++ b/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':
diff --git a/src/cropper/index.ts b/src/cropper/index.ts
index 055ae8f..5750ee5 100644
--- a/src/cropper/index.ts
+++ b/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) {
diff --git a/src/data-grid/index.ts b/src/data-grid/index.ts
index aff94f1..4532dcd 100644
--- a/src/data-grid/index.ts
+++ b/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':
diff --git a/src/dom-highlighter/index.ts b/src/dom-highlighter/index.ts
index bfbb315..e863454 100644
--- a/src/dom-highlighter/index.ts
+++ b/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
diff --git a/src/image-viewer/index.ts b/src/image-viewer/index.ts
index 05272f0..5b562a5 100644
--- a/src/image-viewer/index.ts
+++ b/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)
diff --git a/src/log/index.ts b/src/log/index.ts
index bb2e743..932b2fd 100644
--- a/src/log/index.ts
+++ b/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))
diff --git a/src/logcat/index.ts b/src/logcat/index.ts
index afbfa09..fea8378 100644
--- a/src/logcat/index.ts
+++ b/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) {
diff --git a/src/markdown-viewer/index.ts b/src/markdown-viewer/index.ts
index b9e1275..03fe8ef 100644
--- a/src/markdown-viewer/index.ts
+++ b/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()
diff --git a/src/mask-editor/index.ts b/src/mask-editor/index.ts
index 0338e32..c2153f0 100644
--- a/src/mask-editor/index.ts
+++ b/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()
diff --git a/src/modal/index.ts b/src/modal/index.ts
index 7d30ca5..7dacb7f 100644
--- a/src/modal/index.ts
+++ b/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
diff --git a/src/object-viewer/index.ts b/src/object-viewer/index.ts
index 7df3baa..b09f0cd 100644
--- a/src/object-viewer/index.ts
+++ b/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)
diff --git a/src/painter/index.ts b/src/painter/index.ts
index 0e70587..49d8e40 100644
--- a/src/painter/index.ts
+++ b/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':
diff --git a/src/painter/tools/Brush.ts b/src/painter/tools/Brush.ts
index 9ab1cee..29037f3 100644
--- a/src/painter/tools/Brush.ts
+++ b/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)
       }
diff --git a/src/painter/tools/Eraser.ts b/src/painter/tools/Eraser.ts
index fc1835f..5a2f0d4 100644
--- a/src/painter/tools/Eraser.ts
+++ b/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)
       }
diff --git a/src/painter/tools/Pencil.ts b/src/painter/tools/Pencil.ts
index 7873d34..ba21fc6 100644
--- a/src/painter/tools/Pencil.ts
+++ b/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)
       }
diff --git a/src/painter/tools/Tool.ts b/src/painter/tools/Tool.ts
index f40eb00..a7688b9 100644
--- a/src/painter/tools/Tool.ts
+++ b/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()
diff --git a/src/painter/tools/Zoom.ts b/src/painter/tools/Zoom.ts
index 863d021..305f3d6 100644
--- a/src/painter/tools/Zoom.ts
+++ b/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
diff --git a/src/performance-monitor/index.ts b/src/performance-monitor/index.ts
index 44f0005..d4aa56a 100644
--- a/src/performance-monitor/index.ts
+++ b/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') {
diff --git a/src/setting/index.ts b/src/setting/index.ts
index bc231dd..b1ae8cf 100644
--- a/src/setting/index.ts
+++ b/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()
diff --git a/src/shader-toy-player/index.ts b/src/shader-toy-player/index.ts
index 236aa39..8287f76 100644
--- a/src/shader-toy-player/index.ts
+++ b/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)
       }
diff --git a/src/share/Component.ts b/src/share/Component.ts
index e4c3bd8..53ecd41 100644
--- a/src/share/Component.ts
+++ b/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) {
diff --git a/src/syntax-highlighter/index.ts b/src/syntax-highlighter/index.ts
index 1929cfb..886b2ce 100644
--- a/src/syntax-highlighter/index.ts
+++ b/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)
diff --git a/src/tab/index.ts b/src/tab/index.ts
index 6d68c2b..97ae618 100644
--- a/src/tab/index.ts
+++ b/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()
diff --git a/src/text-viewer/index.ts b/src/text-viewer/index.ts
index 5e00758..4f23d41 100644
--- a/src/text-viewer/index.ts
+++ b/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()
diff --git a/src/window/index.ts b/src/window/index.ts
index f63b829..6aba5b7 100644
--- a/src/window/index.ts
+++ b/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()