截屏悬浮进入编辑副菜单

xushengfeng · Jan 17, 2024 · 3feae09 · 3feae09
1 parent d746521
commit 3feae09
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 128 deletions.
diff --git a/src/ShareTypes.d.ts b/src/ShareTypes.d.ts
@@ -225,19 +225,7 @@ export interface setting {
     插件: { 加载前: string[]; 加载后: string[] };
 }
 
-type 功能 =
-    | "close"
-    | "ocr"
-    | "search"
-    | "QR"
-    | "draw"
-    | "open"
-    | "ding"
-    | "record"
-    | "long"
-    | "copy"
-    | "save"
-    | "screens";
+type 功能 = "close" | "ocr" | "search" | "QR" | "open" | "ding" | "record" | "long" | "copy" | "save" | "screens";
 
 type EditType = {
     select: "rect" | "free" | "draw";

diff --git a/src/renderer/capture.html b/src/renderer/capture.html
@@ -51,7 +51,6 @@
 
         </div>
         <div id="tool_QR" title="QR码"><img src="./assets/icons/scan.svg" class="icon"></div>
-        <div id="tool_draw" title="图像编辑"><img src="./assets/icons/draw.svg" class="icon"></div>
         <div id="tool_open" title="其他应用打开"><img src="./assets/icons/open.svg" class="icon"></div>
         <div id="tool_ding" title="放在屏幕上"><img src="./assets/icons/ding.svg" class="icon"></div>
         <div id="tool_record" title="录屏"><img src="./assets/icons/record.svg" class="icon"></div>

diff --git a/src/renderer/clip/clip_window.ts b/src/renderer/clip/clip_window.ts
@@ -561,7 +561,6 @@ var tool = {
     ocr: () => runOcr(),
     search: () => runSearch(),
     QR: () => runQr(),
-    draw: () => initDraw(),
     open: () => openApp(),
     record: () => initRecord(),
     long: () => startLong(),
@@ -604,7 +603,6 @@ hotkeys(store.get("其他快捷键.关闭"), "normal", tool.close);
 hotkeys(store.get("其他快捷键.OCR"), "normal", tool.ocr);
 hotkeys(store.get("其他快捷键.以图搜图"), "normal", tool.search);
 hotkeys(store.get("其他快捷键.QR码"), "normal", tool.QR);
-hotkeys(store.get("其他快捷键.图像编辑"), "normal", tool.draw);
 hotkeys(store.get("其他快捷键.其他应用打开"), "normal", tool.open);
 hotkeys(store.get("其他快捷键.放在屏幕上"), "normal", tool.ding);
 hotkeys(store.get("其他快捷键.长截屏"), "normal", tool.long);
@@ -744,30 +742,14 @@ function runQr() {
 // 图片编辑
 var drawing = false;
 
-function initDraw() {
-    drawing = drawing ? false : true; // 切换状态
-    drawM(drawing);
-    if (!drawing) {
-        document.querySelectorAll("#draw_main > div").forEach((ei: HTMLDivElement & { show: boolean }) => {
-            ei.show = false;
-        });
-        drawBar.style.width = "var(--bar-size)";
-        for (const ee of document.querySelectorAll("#draw_main > div")) {
-            (<HTMLDivElement>ee).style.backgroundColor = "";
-        }
-    }
-}
-
 function drawM(v: boolean) {
     drawing = v;
     if (v) {
         // 绘画模式
-        document.getElementById("tool_draw").className = "hover_b";
         document.getElementById("clip_photo").style.pointerEvents = "none";
         document.getElementById("clip_wh").style.pointerEvents = "none";
     } else {
         // 裁切模式
-        document.getElementById("tool_draw").className = "";
         document.getElementById("clip_photo").style.pointerEvents = "auto";
         hotkeys.setScope("normal");
         fabricCanvas.discardActiveObject();
@@ -2411,97 +2393,48 @@ var freeWidth = store.get("图像编辑.默认属性.画笔粗细");
 var shadowBlur = 0;
 
 // 编辑栏
+const drawMainBar = document.getElementById("draw_main");
+const drawSideBar = document.getElementById("draw_side");
+showSideBar(false);
 document.querySelectorAll("#draw_main > div").forEach((e: HTMLDivElement & { show: boolean }, index) => {
     // (<HTMLElement>document.querySelectorAll("#draw_side > div")[index]).style.height = "0";
-    e.addEventListener("click", () => {
-        drawM(!e.show);
-        if (e.show) {
-            e.show = !e.show;
-            drawBar.style.width = "var(--bar-size)";
-            resetBarPosi();
-        } else {
-            show();
-        }
-    });
-    function show() {
-        let isShow = bSize * 2 === drawBar.offsetWidth;
-        drawBar.style.width = "calc(var(--bar-size) * 2)";
-        drawBar.style.transition = "var(--transition)";
-        if (drawBarPosi == "right") {
-            if (drawBar.offsetLeft + bSize * 2 > window.innerWidth) {
-                setBarGroup(true);
-            }
-        } else {
-            if (drawBar.offsetLeft - bSize < 0) {
-                setBarGroup(false);
+    let ids = ["draw_select", "draw_free", "draw_shapes", "draw_filters", "draw_color", "draw_position", "draw_操作"];
+    let sises = [1, 1, 2, 3, 1, 1, 1];
+    let Type: (keyof EditType)[] = ["select", "draw", "shape", "filter"];
+    e.addEventListener("mouseenter", () => {
+        document.querySelectorAll("#draw_side > div").forEach((el: HTMLElement, i) => {
+            showSideBar(true);
+            if (index === i) {
+                el.style.display = "";
+                let height = Math.ceil(el.children.length / sises[index]);
+                let x = sises[index];
+                let y = height;
+                el.style.width = x * bSize + "px";
+                let left = bSize * 1;
+                if (drawBar.offsetLeft + bSize + bSize * x > window.innerWidth) left = -bSize * x;
+                drawSideBar.style.left = left + "px";
+                drawSideBar.style.top = bSize * Math.min(i, drawMainBar.children.length - y) + "px";
+                drawSideBar.style.width = bSize * x + "px";
+                drawSideBar.style.height = bSize * y + "px";
             } else {
-                if (!isShow) {
-                    // 已经展开，防止继续位移
-                    beforeBarPosi.draw = drawBar.offsetLeft;
-                    drawBar.style.left = drawBar.offsetLeft - bSize + "px";
-                }
+                el.style.display = "none";
             }
-        }
-        setTimeout(() => {
-            drawBar.style.transition = "";
-        }, 400);
-        document.querySelectorAll("#draw_main > div").forEach((ei: HTMLDivElement & { show: boolean }) => {
-            ei.show = false;
         });
-        e.show = !e.show;
-
-        document.querySelector("#draw_side").scrollTop = (<HTMLDivElement>(
-            document.querySelectorAll("#draw_side > div")[index]
-        )).offsetTop;
-
-        if (!fabricCanvas.isDrawingMode) {
-            if (index == 0) {
-                let m = store.get("图像编辑.记忆.画笔") as typeof mode;
-                if (m) setEditType("draw", m);
-            }
-            if (index == 1) {
-                let s = store.get("图像编辑.记忆.形状") as typeof shape;
-                if (s) setEditType("shape", s);
-            }
-        }
-    }
+    });
+    e.addEventListener("click", () => {
+        setEditType(Type[index], editType[Type[index]]);
+    });
 });
 
-let beforeBarPosi = { tool: NaN, draw: NaN };
-/** 记录展开绘画栏前栏的位置 */
-function setBarGroup(right: boolean) {
-    if (drawBar.offsetWidth == bSize * 2) return; // 已经展开就不记录了
-    toolBar.style.transition = "var(--transition)";
-    beforeBarPosi.tool = toolBar.offsetLeft;
-    beforeBarPosi.draw = drawBar.offsetLeft;
-    if (right) {
-        toolBar.style.left = window.innerWidth - bSize * 3 - barGap + "px";
-        drawBar.style.left = window.innerWidth - bSize * 2 + "px";
+drawBar.onpointerleave = () => {
+    showSideBar(false);
+};
+
+function showSideBar(show: boolean) {
+    if (show) {
+        drawSideBar.classList.remove("draw_side_hide");
     } else {
-        toolBar.style.left = bSize * 2 + barGap + "px";
-        drawBar.style.left = 0 + "px";
-    }
-    setTimeout(() => {
-        toolBar.style.transition = "";
-    }, 400);
-}
-/** 根据以前记录的位置恢复栏位置 */
-function resetBarPosi() {
-    if (beforeBarPosi.draw) {
-        drawBar.style.transition = "var(--transition)";
-        drawBar.style.left = beforeBarPosi.draw + "px";
-        setTimeout(() => {
-            drawBar.style.transition = "";
-        }, 400);
-        beforeBarPosi.draw = NaN;
-    }
-    if (beforeBarPosi.tool) {
-        toolBar.style.transition = "var(--transition)";
-        toolBar.style.left = beforeBarPosi.tool + "px";
-        setTimeout(() => {
-            toolBar.style.transition = "";
-        }, 400);
-        beforeBarPosi.tool = NaN;
+        drawSideBar.classList.add("draw_side_hide");
     }
 }
 

diff --git a/src/renderer/css/clip.css b/src/renderer/css/clip.css
@@ -180,20 +180,17 @@ body {
     left: 80px;
     top: 100px;
     width: var(--bar-size);
-    height: calc(var(--bar-size) * 6);
-    background: var(--bar-bg);
+    height: calc(var(--bar-size) * 7);
     position: fixed;
-    z-index: 98;
-    backdrop-filter: var(--blur);
-    border-radius: calc(var(--bar-size) / 6);
-    overflow-y: scroll;
-    overflow-x: hidden;
+    z-index: 99;
     transition: width var(--transition), opacity var(--transition);
-    box-shadow: var(--shadow);
-    display: flex;
 }
 #draw_bar > div {
     width: var(--bar-size);
+    background: var(--bar-bg);
+    backdrop-filter: var(--blur);
+    border-radius: calc(var(--bar-size) / 6);
+    box-shadow: var(--shadow);
 }
 #draw_main > div,
 .draw_items > div,
@@ -222,13 +219,22 @@ body {
     background-color: var(--hover-color);
     transition: var(--transition);
 }
+#draw_side {
+    position: absolute;
+    top: 0;
+    transition: var(--transition);
+    overflow: hidden;
+}
+.draw_side_hide {
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
 .draw_items {
     transition: var(--transition);
-    overflow: scroll;
+    display: flex;
+    flex-wrap: wrap;
 }
-#draw_side {
-    overflow: scroll;
-    scroll-behavior: smooth;
+.draw_items > div {
     flex-shrink: 0;
 }