new web init

2023-11-22 08:53:20 +08:00
parent a5c241ac02
commit 04c5dfece8
51 changed files with 11603 additions and 0 deletions
--- a/web_app/src/lib/utils.ts
+++ b/web_app/src/lib/utils.ts
@@ -0,0 +1,133 @@
+import { type ClassValue, clsx } from "clsx"
+import { SyntheticEvent } from "react"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function keepGUIAlive() {
+  async function getRequest(url = "") {
+    const response = await fetch(url, {
+      method: "GET",
+      cache: "no-cache",
+    })
+    return response.json()
+  }
+
+  const keepAliveServer = () => {
+    const url = document.location
+    const route = "/flaskwebgui-keep-server-alive"
+    getRequest(url + route).then((data) => {
+      return data
+    })
+  }
+
+  const intervalRequest = 3 * 1000
+  keepAliveServer()
+  setInterval(keepAliveServer, intervalRequest)
+}
+
+export function dataURItoBlob(dataURI: string) {
+  const mime = dataURI.split(",")[0].split(":")[1].split(";")[0]
+  const binary = atob(dataURI.split(",")[1])
+  const array = []
+  for (let i = 0; i < binary.length; i += 1) {
+    array.push(binary.charCodeAt(i))
+  }
+  return new Blob([new Uint8Array(array)], { type: mime })
+}
+
+export function loadImage(image: HTMLImageElement, src: string) {
+  return new Promise((resolve, reject) => {
+    const initSRC = image.src
+    const img = image
+    img.onload = resolve
+    img.onerror = (err) => {
+      img.src = initSRC
+      reject(err)
+    }
+    img.src = src
+  })
+}
+
+export function srcToFile(src: string, fileName: string, mimeType: string) {
+  return fetch(src)
+    .then(function (res) {
+      return res.arrayBuffer()
+    })
+    .then(function (buf) {
+      return new File([buf], fileName, { type: mimeType })
+    })
+}
+
+export async function askWritePermission() {
+  try {
+    // The clipboard-write permission is granted automatically to pages
+    // when they are the active tab. So it's not required, but it's more safe.
+    const { state } = await navigator.permissions.query({
+      name: "clipboard-write" as PermissionName,
+    })
+    return state === "granted"
+  } catch (error) {
+    // Browser compatibility / Security error (ONLY HTTPS) ...
+    return false
+  }
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement, mime: string): Promise<any> {
+  return new Promise((resolve, reject) =>
+    canvas.toBlob(async (d) => {
+      if (d) {
+        resolve(d)
+      } else {
+        reject(new Error("Expected toBlob() to be defined"))
+      }
+    }, mime)
+  )
+}
+
+const setToClipboard = async (blob: any) => {
+  const data = [new ClipboardItem({ [blob.type]: blob })]
+  await navigator.clipboard.write(data)
+}
+
+export function isRightClick(ev: SyntheticEvent) {
+  const mouseEvent = ev.nativeEvent as MouseEvent
+  return mouseEvent.button === 2
+}
+
+export function isMidClick(ev: SyntheticEvent) {
+  const mouseEvent = ev.nativeEvent as MouseEvent
+  return mouseEvent.button === 1
+}
+
+export async function copyCanvasImage(canvas: HTMLCanvasElement) {
+  const blob = await canvasToBlob(canvas, "image/png")
+  try {
+    await setToClipboard(blob)
+  } catch {
+    console.log("Copy image failed!")
+  }
+}
+
+export function downloadImage(uri: string, name: string) {
+  const link = document.createElement("a")
+  link.href = uri
+  link.download = name
+
+  // this is necessary as link.click() does not work on the latest firefox
+  link.dispatchEvent(
+    new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true,
+      view: window,
+    })
+  )
+
+  setTimeout(() => {
+    // For Firefox it is necessary to delay revoking the ObjectURL
+    // window.URL.revokeObjectURL(base64)
+    link.remove()
+  }, 100)
+}