improve devtools-host btn

CrimsonChi · Apr 11, 2024 · 746a300 · 746a300
1 parent 41ba2c8
commit 746a300
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 9 deletions.
diff --git a/packages/devtools-host/src/App.tsx b/packages/devtools-host/src/App.tsx
@@ -1,11 +1,29 @@
+import { useEffect as __devtoolsUseEffect } from "kaioken"
 import { __useDevtoolsStore } from "./store"
 
+function __devtoolsHandleDragOver(e: DragEvent) {
+  const dragging = __useDevtoolsStore.getState().dragging
+  if (!dragging) return
+  e.preventDefault()
+  e.stopPropagation()
+  e.dataTransfer && (e.dataTransfer.dropEffect = "move")
+}
+
 export default function __DevtoolsApp() {
   const {
-    value: { popupWindow },
+    value: { popupWindow, dragging },
     setPopupWindow,
+    setCorner,
+    setDragging,
   } = __useDevtoolsStore()
 
+  __devtoolsUseEffect(() => {
+    document.body.addEventListener("dragover", __devtoolsHandleDragOver)
+    return () => {
+      document.body.removeEventListener("dragover", __devtoolsHandleDragOver)
+    }
+  }, [])
+
   function handleOpen() {
     if (popupWindow) return popupWindow.focus()
     const features = `popup,width=${Math.floor(window.screen.width / 2)},height=${Math.floor(window.screen.height / 2)};`
@@ -22,16 +40,53 @@ export default function __DevtoolsApp() {
     }
   }
 
+  function handleDragStart() {
+    __useDevtoolsStore.setState((prev) => ({
+      ...prev,
+      dragging: true,
+    }))
+  }
+
+  function handleDrag(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+
+    let isLeft = true,
+      isTop = true
+    if (e.pageX > window.innerWidth / 2) isLeft = false
+    if (e.pageY > window.innerHeight / 2) isTop = false
+
+    const corner = isTop ? (isLeft ? "tl" : "tr") : isLeft ? "bl" : "br"
+    setCorner(corner)
+  }
+
+  function handleDragEnd(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragging(false)
+  }
+
   return (
     <>
-      <button onclick={handleOpen}>
+      <button
+        draggable
+        onclick={handleOpen}
+        ondragstart={handleDragStart}
+        ondrag={handleDrag}
+        ondragend={handleDragEnd}
+        tabIndex={-1}
+        style={
+          "background:crimson;margin:0.5rem;border-radius:50%;padding:0.25rem;" +
+          (dragging ? "opacity: 0.5;" : "")
+        }
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width={30}
-          height={30}
+          width={20}
+          height={20}
           viewBox="0 0 24 24"
           fill="none"
-          stroke="crimson"
+          stroke="white"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"

diff --git a/packages/devtools-host/src/index.ts b/packages/devtools-host/src/index.ts
@@ -1,14 +1,33 @@
 import { mount as __devtoolsMount } from "kaioken"
 import __DevtoolsApp from "./App"
-import { __useDevtoolsStore } from "./store"
+import { type AnchorCorner, __useDevtoolsStore } from "./store"
+
+function __devtoolsGetCornerStyle(corner: AnchorCorner) {
+  switch (corner) {
+    case "br":
+      return "bottom:0;right:0;"
+    case "bl":
+      return "bottom:0;left:0;"
+    case "tl":
+      return "top:0;left:0;"
+    case "tr":
+      return "top:0;right:0;"
+  }
+}
 
 if ("window" in globalThis) {
   const __devtoolsRoot = Object.assign(document.createElement("div"), {
     id: "devtools-root",
   })
-  __devtoolsRoot.setAttribute("style", "position:fixed;bottom:0;right:0;")
+  const style = __devtoolsGetCornerStyle(__useDevtoolsStore.getState().corner)
+  __devtoolsRoot.setAttribute("style", "position:fixed;" + style)
   document.body.appendChild(__devtoolsRoot)
 
+  __useDevtoolsStore.subscribe((state) => {
+    const style = __devtoolsGetCornerStyle(state.corner)
+    __devtoolsRoot.setAttribute("style", "position:fixed;" + style)
+  })
+
   __devtoolsMount(__DevtoolsApp, {
     root: __devtoolsRoot,
     name: "kaioken.devtools",

diff --git a/packages/devtools-host/src/store.ts b/packages/devtools-host/src/store.ts
@@ -1,10 +1,28 @@
 import { createStore as __devtoolsCreateStore } from "kaioken"
 
+export type AnchorCorner = "br" | "bl" | "tl" | "tr"
+
+const __devtoolsInitialCorner =
+  localStorage.getItem("kaioken.devtools.anchorCorner") ?? "br"
+
 export const __useDevtoolsStore = __devtoolsCreateStore(
   {
     popupWindow: null as Window | null,
+    corner: __devtoolsInitialCorner as AnchorCorner,
+    dragging: false,
   },
-  (set) => ({
-    setPopupWindow: (popupWindow: WindowProxy | null) => set({ popupWindow }),
+  (set, get) => ({
+    setPopupWindow: (popupWindow: WindowProxy | null) => {
+      set((prev) => ({ ...prev, popupWindow }))
+    },
+    setCorner(corner: AnchorCorner) {
+      set((prev) => ({ ...prev, corner }))
+    },
+    setDragging(dragging: boolean) {
+      set((prev) => ({ ...prev, dragging }))
+      if (!dragging) {
+        localStorage.setItem("kaioken.devtools.anchorCorner", get().corner)
+      }
+    },
   })
 )