From 69ec87f468e7f2ecfcbb30a7966a7e8bcc86b1cb Mon Sep 17 00:00:00 2001
From: Juck <juckz@foxmail.com>
Date: Mon, 8 May 2023 08:27:01 +0800
Subject: [PATCH] =?UTF-8?q?fix:=201.=E8=A7=A3=E5=86=B3=E7=AA=97=E5=8F=A3?=
 =?UTF-8?q?=E6=8B=96=E5=8A=A8=E9=97=AE=E9=A2=98=202.=E4=BF=AE=E6=AD=A3?=
 =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=89=B9=E6=95=88=E4=BD=8D=E7=BD=AE=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/render/CursorEffects.ts | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/render/CursorEffects.ts b/src/render/CursorEffects.ts
index 43ecfe4..1da8d52 100644
--- a/src/render/CursorEffects.ts
+++ b/src/render/CursorEffects.ts
@@ -22,12 +22,14 @@ import {
     // An elasticish trail of cursors that will nip to wherever your mouse is
     trailingCursor,
 } from 'cursor-effects';
+import { debounce } from 'lodash-es';
 import { randomColor } from '@/utils/common';
 import { EditorUtils } from '@/utils/editor';
 import type { SettingModel } from 'model/settings';
 
 const cursorEffects: any[] = [];
-
+let oldCursorEffects: any[] = [];
+let newCanvas: HTMLCanvasElement;
 function enableCursorEffect(effectName) {
     const canvasesBefore = Array.from(document.querySelectorAll('canvas'));
     let emo;
@@ -70,19 +72,41 @@ function enableCursorEffect(effectName) {
     }
     cursorEffects.push(emo);
     const canvasesAfter = Array.from(document.querySelectorAll('canvas'));
-    const newCanvas = canvasesAfter.find(canvas => !canvasesBefore.includes(canvas)) as unknown as HTMLCanvasElement;
+    newCanvas = canvasesAfter.find(canvas => !canvasesBefore.includes(canvas)) as unknown as HTMLCanvasElement;
     // 调整特效层级，解决在侧边栏和设置弹窗时不可见的问题
     newCanvas.style.zIndex = '9999';
-    // newCanvas.style.height = Number.parseFloat(newCanvas?.style.height) + EditorUtils.getTitleBarHeight() + 'px';
-    // BUG 特效位置不正确
-    newCanvas.style.top = EditorUtils.getTitleBarHeight() + 'px';
 }
 
 export function toggleCursorEffects(target: string) {
+    const appendHandle = debounce(() => {
+        if (!document.body.contains(newCanvas)) {
+            document.body.appendChild(newCanvas);
+        }
+    }, 500);
+
+    const appendCanvas = (event: MouseEvent) => {
+        appendHandle();
+    };
+    const removeCanvas = (event: MouseEvent) => {
+        if (document.body.contains(newCanvas)) {
+            document.body.removeChild(newCanvas);
+        }
+    };
+    oldCursorEffects = [...cursorEffects];
+    const titlebarEleList = document.querySelectorAll('.titlebar, .workspace-tab-header-container');
     if (target != 'none') {
         disableCursorEffect();
+        // mouseenter无法完成该效果
+        titlebarEleList.forEach(ele => {
+            ele.addEventListener('mouseenter', removeCanvas);
+            ele.addEventListener('mouseleave', appendCanvas);
+        });
         enableCursorEffect(target);
     } else {
+        titlebarEleList.forEach(ele => {
+            ele.removeEventListener('mouseenter', removeCanvas);
+            ele.removeEventListener('mouseleave', appendCanvas);
+        });
         disableCursorEffect();
     }
 }