Răsfoiți Sursa

优化ExcalidrawView显示效果

jerry 1 an în urmă
părinte
comite
e8a4a673be
1 a modificat fișierele cu 19 adăugiri și 13 ștergeri
  1. 19 13
      client/docs/.vitepress/theme/components/ExcalidrawView.vue

+ 19 - 13
client/docs/.vitepress/theme/components/ExcalidrawView.vue

@@ -22,6 +22,7 @@ const showFullView = ref(false);
 
 let excalidrawJson: ExportedDataState | undefined = undefined
 let topCanvas: HTMLCanvasElement | undefined = undefined
+let clickTimer: ReturnType<typeof setTimeout> | null = null;
 
 let scale = 1;
 let origin = { x: 0, y: 0 };
@@ -29,7 +30,12 @@ let lastMouse = { x: 0, y: 0 };
 let dragging = false;
 let hasMoved = false; // 标记是否拖动过
 
-const dblclickCanvasHandler = () => {
+const dblclickCanvasHandler = (e: MouseEvent) => {
+  if (clickTimer) {
+    clearTimeout(clickTimer); // 阻止 click 事件
+    clickTimer = null;
+  }
+
   origin = { x: 0, y: 0 };
   scale = 1;
   updateTransform();
@@ -41,11 +47,7 @@ function showCanvasTop() {
   // 等待 DOM 渲染后复制内容
   nextTick(async () => {
     if (canvasFloating.value && excalidrawJson) {
-      const canvas = await drawCanvas(
-        excalidrawJson, 
-        canvasFloating.value.clientWidth, 
-        canvasFloating.value.clientHeight
-      )
+      const canvas = await drawCanvas(excalidrawJson)
 
       if (canvas) {
         topCanvas = canvas
@@ -73,12 +75,16 @@ function closeFullView() {
   }
 }
 
-function onCloseFloating() {
-  if (hasMoved) {
-    hasMoved = false;
-    return; // 用户拖动过,不关闭
-  }
-  closeFullView()
+function onCloseFloating(e: MouseEvent) {
+  if (clickTimer) clearTimeout(clickTimer);
+  clickTimer = setTimeout(() => {
+    // 这是单击
+    if (hasMoved) {
+      hasMoved = false;
+      return; // 用户拖动过,不关闭
+    }
+    closeFullView()
+  }, 500); // 等待双击事件,如果没有才执行
 }
 
 function onMouseDown(e: MouseEvent) {
@@ -140,7 +146,7 @@ const getExcalidraw = async (path: string): Promise<ExportedDataState | undefine
   return json
 }
 
-const drawCanvas = async (data: ExportedDataState, width: number, height: number): Promise<HTMLCanvasElement> => {
+const drawCanvas = async (data: ExportedDataState, width?: number, height?: number): Promise<HTMLCanvasElement> => {
   // const maxWidthOrHeight = width > height ? height : width
   // 改为只限制宽度,因为渲染前父窗口高度可能为0,导致maxWidthOrHeight不生效
   const maxWidthOrHeight = width