From 3feae099bf46326ff9b2d2ffa08419e1b2cd504f Mon Sep 17 00:00:00 2001 From: xushengfeng Date: Wed, 17 Jan 2024 18:35:28 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=AA=E5=B1=8F=20=E6=82=AC=E6=B5=AE?= =?UTF-8?q?=E8=BF=9B=E5=85=A5=E7=BC=96=E8=BE=91=E5=89=AF=E8=8F=9C=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ShareTypes.d.ts | 14 +--- src/renderer/capture.html | 1 - src/renderer/clip/clip_window.ts | 135 ++++++++----------------------- src/renderer/css/clip.css | 32 +++++--- 4 files changed, 54 insertions(+), 128 deletions(-) diff --git a/src/ShareTypes.d.ts b/src/ShareTypes.d.ts index 4d49293a4..0961479c0 100644 --- 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 index da7659b3f..23551973a 100644 --- a/src/renderer/capture.html +++ b/src/renderer/capture.html @@ -51,7 +51,6 @@
-
diff --git a/src/renderer/clip/clip_window.ts b/src/renderer/clip/clip_window.ts index 69b76f83d..591b7f59f 100644 --- 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")) { - (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) => { // (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 = (( - 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 index 5fe16bf78..9441137f2 100644 --- 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; }