From 7ba5ff0cce7431d76c796faeefd4c2f46df9c279 Mon Sep 17 00:00:00 2001
From: kwaroran <amasio1234@proton.me>
Date: Sun, 26 May 2024 04:08:57 +0900
Subject: [PATCH] feat: Add long press functionality to AutoresizeArea
 component

---
 src/lib/ChatScreens/Chat.svelte         |  4 +++-
 src/lib/UI/GUI/TextAreaResizable.svelte |  5 ++++-
 src/ts/gui/longtouch.ts                 | 27 +++++++++++++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/ts/gui/longtouch.ts

diff --git a/src/lib/ChatScreens/Chat.svelte b/src/lib/ChatScreens/Chat.svelte
index e8a0c31f..dec1dd53 100644
--- a/src/lib/ChatScreens/Chat.svelte
+++ b/src/lib/ChatScreens/Chat.svelte
@@ -245,7 +245,9 @@
                 </div>
             {/if}
             {#if editMode}
-                <AutoresizeArea bind:value={message} />
+                <AutoresizeArea bind:value={message} handleLongPress={(e) => {
+                    editMode = false
+                }} />
             {:else if blankMessage}
                 <div class="w-full flex justify-center text-textcolor2 italic mb-12">
                     {language.noMessage}
diff --git a/src/lib/UI/GUI/TextAreaResizable.svelte b/src/lib/UI/GUI/TextAreaResizable.svelte
index 10a31894..1aaeca18 100644
--- a/src/lib/UI/GUI/TextAreaResizable.svelte
+++ b/src/lib/UI/GUI/TextAreaResizable.svelte
@@ -1,10 +1,12 @@
-<script>
+<script lang="ts">
     import { onMount } from 'svelte';
     import { DataBase } from "../../../ts/storage/database";
+    import { longpress } from 'src/ts/gui/longtouch';
 
     let textarea;
     let previousScrollHeight = 0;
     export let value = ''
+    export let handleLongPress = (e:MouseEvent) => {};
 
     function resize() {
         textarea.style.height = '0px'; // Reset the textarea height
@@ -39,6 +41,7 @@
 <textarea
     bind:this={textarea}
     on:input={handleInput}
+    use:longpress={handleLongPress}
     bind:value={value}
     style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
     style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
diff --git a/src/ts/gui/longtouch.ts b/src/ts/gui/longtouch.ts
new file mode 100644
index 00000000..3fb68410
--- /dev/null
+++ b/src/ts/gui/longtouch.ts
@@ -0,0 +1,27 @@
+export function longpress(node:HTMLElement, callback:(e:MouseEvent)=>void) {
+	const TIME_MS = 500;
+	let timeoutPtr: number;
+	function handleMouseDown(e:MouseEvent) {
+		window.addEventListener('mousemove', handleMoveBeforeLong);
+		timeoutPtr = window.setTimeout(() => {
+			window.removeEventListener('mousemove', handleMoveBeforeLong);
+			callback(e);
+		}, TIME_MS);
+	}
+	function handleMoveBeforeLong(e:MouseEvent) {
+		window.clearTimeout(timeoutPtr); 
+		window.removeEventListener('mousemove', handleMoveBeforeLong);
+	}
+	function handleMouseUp(e:MouseEvent) {
+		window.clearTimeout(timeoutPtr); 
+		window.removeEventListener('mousemove', handleMoveBeforeLong);
+	}
+	node.addEventListener('mousedown', handleMouseDown);
+	node.addEventListener('mouseup', handleMouseUp);
+	return {
+		destroy: () => {
+			node.removeEventListener('mousedown', handleMouseDown);
+			node.removeEventListener('mouseup', handleMouseUp);
+		}
+	};
+}
\ No newline at end of file