fix(业务代码): 修复多区块填色晕染动画覆盖问题

修复快速点击多个填色区块时，前一个区块晕染动画可能无法完成的问题；
同时移除全局点击监听，避免文档点击逻辑干扰填色交互。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/base/Triangle.ts

@@ -2,19 +2,14 @@ import { Animator } from "./Animator";
 import { Layer, LayerAB, Scene } from "./Scene";
 import { createProgram, createShader } from "./utils";
 
-
-
-
 export class Triangle extends LayerAB {
-
-
   private vertexShaderCode = /*glsl*/ `
     attribute vec2 a_position;
     uniform mat4 u_matrix; 
     void main() {
       gl_Position = u_matrix * vec4(a_position, 0, 1);
     }
-  `
+  `;
 
   private fragmentShaderCode = /*glsl*/ `
     precision mediump float;
@@ -24,72 +19,67 @@ export class Triangle extends LayerAB {
       gl_FragColor = vec4(1, 0, 0, u_alpha);
     }
   
-  `
+  `;
 
   program: WebGLProgram;
 
-  positionLoc: number
-  uMatrixLoc: WebGLUniformLocation
-  uAlphaLoc: WebGLUniformLocation
-
+  positionLoc: number;
+  uMatrixLoc: WebGLUniformLocation;
+  uAlphaLoc: WebGLUniformLocation;
 
-  positionBuffer: WebGLBuffer
+  positionBuffer: WebGLBuffer;
 
   constructor(private scene: Scene) {
-    super()
+    super();
 
-    const gl = scene.gl
-    this.program = createProgram(gl,
+    const gl = scene.gl;
+    this.program = createProgram(
+      gl,
       createShader(gl, gl.VERTEX_SHADER, this.vertexShaderCode)!,
-      createShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderCode)!)!
-
+      createShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderCode)!,
+    )!;
 
-    this.positionLoc = gl.getAttribLocation(this.program, 'a_position');
+    this.positionLoc = gl.getAttribLocation(this.program, "a_position");
     this.uMatrixLoc = gl.getUniformLocation(this.program, "u_matrix")!!;
-    this.uAlphaLoc = gl.getUniformLocation(this.program, 'u_alpha')!!;
+    this.uAlphaLoc = gl.getUniformLocation(this.program, "u_alpha")!!;
 
     this.positionBuffer = gl.createBuffer()!;
     gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-      0, 0,
-      0, 100,
-      100, 0,
-      100, 0,
-      0, 100,
-      100, 100
-    ]), gl.STATIC_DRAW);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([0, 0, 0, 100, 100, 0, 100, 0, 0, 100, 100, 100]),
+      gl.STATIC_DRAW,
+    );
   }
 
+  private colorAnimator: Animator | null = null;
 
-
-  private colorAnimator: Animator | null = null
-
-  private alpha: number = 1
-
+  private alpha: number = 1;
 
   override tap(cx: number, cy: number, sx: number, sy: number): void {
-    this.colorAnimator?.cancel()
-
-    this.colorAnimator = new Animator(1000, (ani) => {
-      this.alpha = 1 - ani.progress
-    }, () => {
-      this.alpha = 1
-    })
-    this.scene.addAnimator(this.colorAnimator)
+    this.colorAnimator?.cancel();
+    this.colorAnimator = new Animator(
+      1000,
+      (ani) => {
+        this.alpha = 1 - ani.progress;
+      },
+      () => {
+        this.alpha = 1;
+      },
+    );
+    this.scene.addAnimator(this.colorAnimator);
   }
 
-
   draw() {
-    const gl = this.scene.gl
-    gl.useProgram(this.program)
-    gl.enableVertexAttribArray(this.positionLoc)
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
-    gl.vertexAttribPointer(this.positionLoc, 2, gl.FLOAT, false, 0, 0)
+    const gl = this.scene.gl;
+    gl.useProgram(this.program);
+    gl.enableVertexAttribArray(this.positionLoc);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+    gl.vertexAttribPointer(this.positionLoc, 2, gl.FLOAT, false, 0, 0);
 
-    gl.uniformMatrix4fv(this.uMatrixLoc, false, this.scene.drawMatrix)
-    gl.uniform1f(this.uAlphaLoc, this.alpha)
+    gl.uniformMatrix4fv(this.uMatrixLoc, false, this.scene.drawMatrix);
+    gl.uniform1f(this.uAlphaLoc, this.alpha);
 
     gl.drawArrays(gl.TRIANGLES, 0, 6);
   }
-
-}
+}

src/filler/AnimatableMask.ts

@@ -4,10 +4,7 @@ import { m4 } from "../base/m4";
 import { Disposable, Scene } from "../base/Scene";
 import { createProgram, createShader } from "../base/utils";
 import { Area, Color } from "./common";
-import { FillerData } from "./FillerData"
-
-
-
+import { FillerData } from "./FillerData";
 
 export class AnimatingArea {
   constructor(
@@ -15,16 +12,10 @@ export class AnimatingArea {
     readonly x: number,
     readonly y: number,
     public progress: number,
-  ) { }
+  ) {}
 }
 
-
-
-
-
-
 export class AnimatableMask implements Disposable {
-
   private vertexShaderCode = /*glsl*/ `
     attribute vec2 a_position;
     attribute vec2 a_texCoord;
@@ -123,109 +114,106 @@ export class AnimatableMask implements Disposable {
         }
     }
   
-  `
-
-
-
-  program: WebGLProgram
-
+  `;
 
-  aPositionLoc: number
-  aTexcoordLoc: number
-  aAreaIdLoc: number
-  aCenterLoc: number
-  aProgressLoc: number
-  aMaxRadiusLoc: number
-  uMatrixLoc: WebGLUniformLocation
+  program: WebGLProgram;
 
-  positionBuffer: WebGLBuffer
-  texCoordBuffer: WebGLBuffer
-  areaIdBuffer: WebGLBuffer
-  centerBuffer: WebGLBuffer
-  progressBuffer: WebGLBuffer
-  maxRadiusBuffer: WebGLBuffer
+  aPositionLoc: number;
+  aTexcoordLoc: number;
+  aAreaIdLoc: number;
+  aCenterLoc: number;
+  aProgressLoc: number;
+  aMaxRadiusLoc: number;
+  uMatrixLoc: WebGLUniformLocation;
 
+  positionBuffer: WebGLBuffer;
+  texCoordBuffer: WebGLBuffer;
+  areaIdBuffer: WebGLBuffer;
+  centerBuffer: WebGLBuffer;
+  progressBuffer: WebGLBuffer;
+  maxRadiusBuffer: WebGLBuffer;
 
   dispose(): void {
-    let gl = this.scene.gl
-
-    gl.deleteBuffer(this.positionBuffer)
-    gl.deleteBuffer(this.texCoordBuffer)
-    gl.deleteBuffer(this.areaIdBuffer)
-    gl.deleteBuffer(this.centerBuffer)
-    gl.deleteBuffer(this.progressBuffer)
-    gl.deleteBuffer(this.maxRadiusBuffer)
-    gl.deleteProgram(this.program)
-
+    let gl = this.scene.gl;
+
+    gl.deleteBuffer(this.positionBuffer);
+    gl.deleteBuffer(this.texCoordBuffer);
+    gl.deleteBuffer(this.areaIdBuffer);
+    gl.deleteBuffer(this.centerBuffer);
+    gl.deleteBuffer(this.progressBuffer);
+    gl.deleteBuffer(this.maxRadiusBuffer);
+    gl.deleteProgram(this.program);
   }
 
+  positionArray: Float32Array;
+  texCoordArray: Float32Array;
+  areaIdArray: Float32Array;
+  centerArray: Float32Array;
+  progressArray: Float32Array;
+  maxRadiusArray: Float32Array;
 
+  matrix: m4.Matrix4;
 
-  positionArray: Float32Array
-  texCoordArray: Float32Array
-  areaIdArray: Float32Array
-  centerArray: Float32Array
-  progressArray: Float32Array
-  maxRadiusArray: Float32Array
-
-
-  matrix: m4.Matrix4
-
+  texture: WebGLTexture;
+  fb: WebGLFramebuffer;
 
-  texture: WebGLTexture
-  fb: WebGLFramebuffer
-
-  private animatingAreas: Array<AnimatingArea> = []
-
-  get width(): number { return this.fillerData.width }
-  get height(): number { return this.fillerData.height }
+  private animatingAreas: Array<AnimatingArea> = [];
 
+  get width(): number {
+    return this.fillerData.width;
+  }
+  get height(): number {
+    return this.fillerData.height;
+  }
 
-  maxCount: number
+  maxCount: number;
 
   constructor(
     private scene: Scene,
     private fillerData: FillerData,
-
   ) {
+    const gl = scene.gl;
 
-    const gl = scene.gl
-
-
-    this.program = createProgram(gl,
+    this.program = createProgram(
+      gl,
       createShader(gl, gl.VERTEX_SHADER, this.vertexShaderCode)!,
-      createShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderCode)!)!
-
-    this.aPositionLoc = gl.getAttribLocation(this.program, "a_position")
-    this.aTexcoordLoc = gl.getAttribLocation(this.program, "a_texCoord")
-    this.aAreaIdLoc = gl.getAttribLocation(this.program, "a_areaId")
-    this.aCenterLoc = gl.getAttribLocation(this.program, "a_center")
-    this.aProgressLoc = gl.getAttribLocation(this.program, "a_progress")
-    this.aMaxRadiusLoc = gl.getAttribLocation(this.program, "a_maxRadius")
-    this.uMatrixLoc = gl.getUniformLocation(this.program, "u_matrix")!
-
-
-
-    this.maxCount = fillerData.data.maxAreaCountOfGroup
-
-
-    this.positionBuffer = gl.createBuffer()!
-    this.texCoordBuffer = gl.createBuffer()!
-    this.areaIdBuffer = gl.createBuffer()!
-    this.centerBuffer = gl.createBuffer()!
-    this.progressBuffer = gl.createBuffer()!
-    this.maxRadiusBuffer = gl.createBuffer()!
-
-
-
-
-
-    this.matrix = m4.projectionNoflipY(fillerData.width, fillerData.height)
-
-
-    this.texture = gl.createTexture()!
-    gl.bindTexture(gl.TEXTURE_2D, this.texture)
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.fillerData.width, this.fillerData.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null)
+      createShader(gl, gl.FRAGMENT_SHADER, this.fragmentShaderCode)!,
+    )!;
+
+    this.aPositionLoc = gl.getAttribLocation(this.program, "a_position");
+    this.aTexcoordLoc = gl.getAttribLocation(this.program, "a_texCoord");
+    this.aAreaIdLoc = gl.getAttribLocation(this.program, "a_areaId");
+    this.aCenterLoc = gl.getAttribLocation(this.program, "a_center");
+    this.aProgressLoc = gl.getAttribLocation(this.program, "a_progress");
+    this.aMaxRadiusLoc = gl.getAttribLocation(this.program, "a_maxRadius");
+    this.uMatrixLoc = gl.getUniformLocation(this.program, "u_matrix")!;
+
+    // 此处maxCount 等于分组最大区块数并不合理，假设每个颜色分组都是一个区块， 此处maxCount会等于1， 如果用户快速点击多个区块，会造成上一个区块的晕染无法完成
+    // this.maxCount = fillerData.data.maxAreaCountOfGroup;
+    this.maxCount = 5;
+
+    this.positionBuffer = gl.createBuffer()!;
+    this.texCoordBuffer = gl.createBuffer()!;
+    this.areaIdBuffer = gl.createBuffer()!;
+    this.centerBuffer = gl.createBuffer()!;
+    this.progressBuffer = gl.createBuffer()!;
+    this.maxRadiusBuffer = gl.createBuffer()!;
+
+    this.matrix = m4.projectionNoflipY(fillerData.width, fillerData.height);
+
+    this.texture = gl.createTexture()!;
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.texImage2D(
+      gl.TEXTURE_2D,
+      0,
+      gl.RGBA,
+      this.fillerData.width,
+      this.fillerData.height,
+      0,
+      gl.RGBA,
+      gl.UNSIGNED_BYTE,
+      null,
+    );
     //gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, this.fillerData.width, this.fillerData.height, 0, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, null)
 
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -233,135 +221,143 @@ export class AnimatableMask implements Disposable {
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 
-
-    this.fb = gl.createFramebuffer()!
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fb)
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture, 0)
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-
-
-    this.positionArray = new Float32Array(this.maxCount * 12)
-    this.texCoordArray = new Float32Array(this.maxCount * 12)
-    this.areaIdArray = new Float32Array(this.maxCount * 24)
-    this.centerArray = new Float32Array(this.maxCount * 12)
-    this.progressArray = new Float32Array(this.maxCount * 6)
-    this.maxRadiusArray = new Float32Array(this.maxCount * 6)
-
+    this.fb = gl.createFramebuffer()!;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fb);
+    gl.framebufferTexture2D(
+      gl.FRAMEBUFFER,
+      gl.COLOR_ATTACHMENT0,
+      gl.TEXTURE_2D,
+      this.texture,
+      0,
+    );
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+    this.positionArray = new Float32Array(this.maxCount * 12);
+    this.texCoordArray = new Float32Array(this.maxCount * 12);
+    this.areaIdArray = new Float32Array(this.maxCount * 24);
+    this.centerArray = new Float32Array(this.maxCount * 12);
+    this.progressArray = new Float32Array(this.maxCount * 6);
+    this.maxRadiusArray = new Float32Array(this.maxCount * 6);
   }
 
-
-
-
-
   addArea(area: Area, cx: number, cy: number, duration = 800) {
-    let aa = new AnimatingArea(area, cx, cy, 0)
-    let animator = new Animator(duration, () => {
-      aa.progress = animator.value()
-    }, () => {
-
-    })
-    this.scene.addAnimator(animator)
+    let aa = new AnimatingArea(area, cx, cy, 0);
+    let animator = new Animator(
+      duration,
+      () => {
+        aa.progress = animator.value();
+      },
+      () => {},
+    );
+    this.scene.addAnimator(animator);
     this.animatingAreas.push(aa);
   }
 
-
-
-
-  fillPoint(arr: Float32Array, offset: number, x: number, y: number, count: number) {
+  fillPoint(
+    arr: Float32Array,
+    offset: number,
+    x: number,
+    y: number,
+    count: number,
+  ) {
     for (var i = 0; i < count; i++) {
-      arr[offset + i * 2] = x
-      arr[offset + i * 2 + 1] = y
+      arr[offset + i * 2] = x;
+      arr[offset + i * 2 + 1] = y;
     }
   }
 
-
   fillNumber(arr: Float32Array, offset: number, n: number, count: number) {
     for (var i = 0; i < count; i++) {
-      arr[offset + i] = n
+      arr[offset + i] = n;
     }
   }
 
-
   flush() {
-    // console.log('animationAreas.length=', this.animatingAreas.length)
+    console.log("animationAreas.length=", this.animatingAreas.length);
 
-    if (this.animatingAreas.length <= 0) return
+    if (this.animatingAreas.length <= 0) return;
 
-    var vertexOffset = 0
-    var colorOffset = 0
-    var nOffset = 0
+    var vertexOffset = 0;
+    var colorOffset = 0;
+    var nOffset = 0;
 
-    const width = this.fillerData.width
-    const height = this.fillerData.height
+    const width = this.fillerData.width;
+    const height = this.fillerData.height;
 
     for (var i = 0; i < this.animatingAreas.length; i++) {
-
-      var aa = this.animatingAreas[i]
-      var area = aa.area
-
-      fillRectangle(this.positionArray, vertexOffset, area.rect.x, area.rect.y, area.rect.width, area.rect.height)
-      fillRectangle(this.texCoordArray, vertexOffset, area.rect.x / width, area.rect.y / height, area.rect.width / width, area.rect.height / height)
-      this.fillPoint(this.centerArray, vertexOffset, aa.x, aa.y, 6)
-
-      var color = new Color(area.id)
-      color.fillFloatArray(this.areaIdArray, colorOffset, 6)
-
-      var maxRadius = coverRadius(area.rect, aa.x, aa.y)
+      var aa = this.animatingAreas[i];
+      var area = aa.area;
+
+      fillRectangle(
+        this.positionArray,
+        vertexOffset,
+        area.rect.x,
+        area.rect.y,
+        area.rect.width,
+        area.rect.height,
+      );
+      fillRectangle(
+        this.texCoordArray,
+        vertexOffset,
+        area.rect.x / width,
+        area.rect.y / height,
+        area.rect.width / width,
+        area.rect.height / height,
+      );
+      this.fillPoint(this.centerArray, vertexOffset, aa.x, aa.y, 6);
+
+      var color = new Color(area.id);
+      color.fillFloatArray(this.areaIdArray, colorOffset, 6);
+
+      var maxRadius = coverRadius(area.rect, aa.x, aa.y);
       // console.log('rect=', area.rect, maxRadius, aa.x, aa.y);
-      //maxRadius = 
+      //maxRadius =
 
-      this.fillNumber(this.progressArray, nOffset, aa.progress, 6)
-      this.fillNumber(this.maxRadiusArray, nOffset, maxRadius, 6)
+      this.fillNumber(this.progressArray, nOffset, aa.progress, 6);
+      this.fillNumber(this.maxRadiusArray, nOffset, maxRadius, 6);
 
-      vertexOffset += 12
-      colorOffset += 24
-      nOffset += 6
+      vertexOffset += 12;
+      colorOffset += 24;
+      nOffset += 6;
     }
 
     //console.log('areaIdArray', this.areaIdArray)
 
+    const gl = this.scene.gl;
 
-    const gl = this.scene.gl
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
-    gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW)
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW);
 
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer)
-    gl.bufferData(gl.ARRAY_BUFFER, this.texCoordArray, gl.STATIC_DRAW)
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.texCoordArray, gl.STATIC_DRAW);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, this.areaIdBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.areaIdArray, gl.STATIC_DRAW)
+    gl.bufferData(gl.ARRAY_BUFFER, this.areaIdArray, gl.STATIC_DRAW);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.centerArray, gl.STATIC_DRAW)
-
+    gl.bufferData(gl.ARRAY_BUFFER, this.centerArray, gl.STATIC_DRAW);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, this.progressBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.progressArray, gl.STATIC_DRAW)
-
+    gl.bufferData(gl.ARRAY_BUFFER, this.progressArray, gl.STATIC_DRAW);
 
     gl.bindBuffer(gl.ARRAY_BUFFER, this.maxRadiusBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.maxRadiusArray, gl.STATIC_DRAW)
-
+    gl.bufferData(gl.ARRAY_BUFFER, this.maxRadiusArray, gl.STATIC_DRAW);
 
-    this.draw(this.animatingAreas.length * 6)
-
-    this.animatingAreas = this.animatingAreas.filter(aa => aa.progress < 1)
+    this.draw(this.animatingAreas.length * 6);
 
+    this.animatingAreas = this.animatingAreas.filter((aa) => aa.progress < 1);
   }
 
-
   private draw(n: number) {
     const gl = this.scene.gl;
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fb)
+    gl.bindFramebuffer(gl.FRAMEBUFFER, this.fb);
 
     //console.log('fb=', this.progressArray)
 
     gl.useProgram(this.program);
 
-    gl.viewport(0, 0, this.fillerData.width, this.fillerData.height)
-
+    gl.viewport(0, 0, this.fillerData.width, this.fillerData.height);
 
     gl.enableVertexAttribArray(this.aPositionLoc);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
@@ -375,7 +371,6 @@ export class AnimatableMask implements Disposable {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.areaIdBuffer);
     gl.vertexAttribPointer(this.aAreaIdLoc, 4, gl.FLOAT, false, 0, 0);
 
-
     gl.enableVertexAttribArray(this.aCenterLoc);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
     gl.vertexAttribPointer(this.aCenterLoc, 2, gl.FLOAT, false, 0, 0);
@@ -384,92 +379,79 @@ export class AnimatableMask implements Disposable {
     gl.bindBuffer(gl.ARRAY_BUFFER, this.progressBuffer);
     gl.vertexAttribPointer(this.aProgressLoc, 1, gl.FLOAT, false, 0, 0);
 
-
     gl.enableVertexAttribArray(this.aMaxRadiusLoc);
     gl.bindBuffer(gl.ARRAY_BUFFER, this.maxRadiusBuffer);
     gl.vertexAttribPointer(this.aMaxRadiusLoc, 1, gl.FLOAT, false, 0, 0);
 
+    gl.uniformMatrix4fv(this.uMatrixLoc, false, this.matrix);
 
-    gl.uniformMatrix4fv(this.uMatrixLoc, false, this.matrix)
-
-
-    gl.activeTexture(gl.TEXTURE0)
-    gl.bindTexture(gl.TEXTURE_2D, this.fillerData.mapTexure)
-
-    gl.drawArrays(gl.TRIANGLES, 0, n)
-
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null)
-
-
-
-
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.fillerData.mapTexure);
 
+    gl.drawArrays(gl.TRIANGLES, 0, n);
 
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
   }
 
-
   // 恢复上次已填色的部分
   initTask() {
     let taskLisk = this.fillerData.taskList;
 
-    const width = this.fillerData.width
-    const height = this.fillerData.height
+    const width = this.fillerData.width;
+    const height = this.fillerData.height;
 
     for (let task of taskLisk) {
       let area = this.fillerData.data.areaHash.get(task);
       if (area) {
-        fillRectangle(this.positionArray, 0, area.rect.x, area.rect.y, area.rect.width, area.rect.height)
-        fillRectangle(this.texCoordArray, 0, area.rect.x / width, area.rect.y / height, area.rect.width / width, area.rect.height / height)
-        this.fillPoint(this.centerArray, 0, area.center.x, area.center.y, 6)
-
-        var color = new Color(area.id)
-        color.fillFloatArray(this.areaIdArray, 0, 6)
-
-        var maxRadius = coverRadius(area.rect, area.center.x, area.center.y)
+        fillRectangle(
+          this.positionArray,
+          0,
+          area.rect.x,
+          area.rect.y,
+          area.rect.width,
+          area.rect.height,
+        );
+        fillRectangle(
+          this.texCoordArray,
+          0,
+          area.rect.x / width,
+          area.rect.y / height,
+          area.rect.width / width,
+          area.rect.height / height,
+        );
+        this.fillPoint(this.centerArray, 0, area.center.x, area.center.y, 6);
+
+        var color = new Color(area.id);
+        color.fillFloatArray(this.areaIdArray, 0, 6);
+
+        var maxRadius = coverRadius(area.rect, area.center.x, area.center.y);
         // console.log('rect=', area.rect, maxRadius, area.center.x, area.center.y);
 
-        this.fillNumber(this.progressArray, 0, 1, 6)
-        this.fillNumber(this.maxRadiusArray, 0, maxRadius, 6)
-
+        this.fillNumber(this.progressArray, 0, 1, 6);
+        this.fillNumber(this.maxRadiusArray, 0, maxRadius, 6);
 
-        const gl = this.scene.gl
+        const gl = this.scene.gl;
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer)
-        gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, this.positionArray, gl.STATIC_DRAW);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer)
-        gl.bufferData(gl.ARRAY_BUFFER, this.texCoordArray, gl.STATIC_DRAW)
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.texCoordBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, this.texCoordArray, gl.STATIC_DRAW);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.areaIdBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, this.areaIdArray, gl.STATIC_DRAW)
+        gl.bufferData(gl.ARRAY_BUFFER, this.areaIdArray, gl.STATIC_DRAW);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.centerBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, this.centerArray, gl.STATIC_DRAW)
-
+        gl.bufferData(gl.ARRAY_BUFFER, this.centerArray, gl.STATIC_DRAW);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.progressBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, this.progressArray, gl.STATIC_DRAW)
-
+        gl.bufferData(gl.ARRAY_BUFFER, this.progressArray, gl.STATIC_DRAW);
 
         gl.bindBuffer(gl.ARRAY_BUFFER, this.maxRadiusBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, this.maxRadiusArray, gl.STATIC_DRAW)
-
-
-        this.draw(6)
+        gl.bufferData(gl.ARRAY_BUFFER, this.maxRadiusArray, gl.STATIC_DRAW);
 
+        this.draw(6);
       }
     }
-
   }
-
-
-
-
 }
-
-
-
-
-
-
-

src/filler/index.ts

@@ -100,14 +100,6 @@ async function init() {
   };
 
   window.addEventListener("resize", () => syncCanvasSize());
-  document
-    .querySelector("#toggleTestLayer")
-    ?.addEventListener("click", () => scene.toggleTestLayer());
-
-  document.addEventListener("click", (e: MouseEvent) => onDocumentClick(e));
-  document.addEventListener("touchstart", (e: TouchEvent) =>
-    onDocumentClick(e),
-  );
 
   let resource = await loadResource();
 
@@ -579,19 +571,6 @@ function confetti() {
   jsConfetti.addConfetti();
 }
 
-// 点击其他区域，隐藏action-sheet
-function onDocumentClick(evt: Event) {
-  let elem = evt.target as HTMLElement;
-  let setting = document.getElementById("setting") as HTMLDivElement;
-  if (setting == elem || setting.contains(elem)) {
-    return;
-  }
-  let actionSheet = document.getElementById("action-sheet") as HTMLDivElement;
-  if (actionSheet.style.bottom == "0px") {
-    actionSheet.style.bottom = "-1000px";
-  }
-}
-
 function onActionSheetClick(evt: Event) {
   evt.stopPropagation();
 }