From 0539f82b9c6c7df23932dd25a25e9e1c3a3780b8 Mon Sep 17 00:00:00 2001
From: windingwind <wyzlshx@foxmail.com>
Date: Sat, 6 May 2023 02:29:09 +0800
Subject: [PATCH] add: drag&drop workspace tab to open in new window

---
 addon/chrome/locale/en-US/addon.properties |  1 +
 addon/chrome/locale/zh-CN/addon.properties |  1 +
 src/modules/workspace/tab.ts               | 80 +++++++++++++++++++++-
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/addon/chrome/locale/en-US/addon.properties b/addon/chrome/locale/en-US/addon.properties
index 5e19c6b..9b8062f 100644
--- a/addon/chrome/locale/en-US/addon.properties
+++ b/addon/chrome/locale/en-US/addon.properties
@@ -33,6 +33,7 @@ templateEditor.reset=Reset
 templateEditor.help=Help
 
 tab.name=Note Workspace
+tab.openInWindow=Drag and drop here to open workspace in new window
 
 workspaceWindow.name=Note Workspace
 
diff --git a/addon/chrome/locale/zh-CN/addon.properties b/addon/chrome/locale/zh-CN/addon.properties
index ebb3a29..df0899a 100644
--- a/addon/chrome/locale/zh-CN/addon.properties
+++ b/addon/chrome/locale/zh-CN/addon.properties
@@ -33,6 +33,7 @@ templateEditor.reset=重置
 templateEditor.help=帮助
 
 tab.name=笔记工作区
+tab.openInWindow=拖放到此处以在新窗口打开
 
 workspaceWindow.name=笔记工作区
 
diff --git a/src/modules/workspace/tab.ts b/src/modules/workspace/tab.ts
index 87aec22..709ee32 100644
--- a/src/modules/workspace/tab.ts
+++ b/src/modules/workspace/tab.ts
@@ -300,7 +300,9 @@ export async function activateWorkspaceTab() {
     });
   });
   // load workspace content
-  addon.hooks.onInitWorkspace(addon.data.workspace.tab.container);
+  const container = addon.data.workspace.tab.container;
+  initWorkspaceTabDragDrop(container, tabElem);
+  addon.hooks.onInitWorkspace(container);
   registerWorkspaceTabPaneObserver();
 }
 
@@ -329,3 +331,79 @@ function setWorkspaceTabStatus(status: boolean) {
   addon.data.workspace.tab.active = status;
   setPref("workspace.tab.active", status);
 }
+
+function initWorkspaceTabDragDrop(
+  container?: XUL.Box,
+  tabElem?: HTMLDivElement
+) {
+  if (!container) {
+    return;
+  }
+  const rect = tabElem?.getBoundingClientRect();
+  ztoolkit.UI.appendElement(
+    {
+      tag: "div",
+      id: "bn-workspace-tab-drop",
+      styles: {
+        background: "#252526",
+        opacity: "0.6",
+        width: "100%",
+        height: "100px",
+        position: "fixed",
+        left: "0px",
+        top: `${rect?.bottom}px`,
+        textAlign: "center",
+        display: "flex",
+        visibility: "hidden",
+        zIndex: "65535",
+      },
+      properties: {
+        hidden: true,
+        ondrop: (ev: DragEvent) => {
+          addon.hooks.onOpenWorkspace("window");
+        },
+        ondragenter: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          dropElem.style.opacity = "0.9";
+          if (ev.dataTransfer) {
+            ev.dataTransfer.dropEffect = "move";
+          }
+        },
+        ondragover: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        },
+        ondragleave: (ev: DragEvent) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+          dropElem.style.opacity = "0.6";
+        },
+      },
+      children: [
+        {
+          tag: "div",
+          styles: {
+            margin: "auto",
+            textAlign: "center",
+            color: "#fff",
+          },
+          properties: {
+            innerHTML: getString("tab.openInWindow"),
+          },
+        },
+      ],
+      enableElementRecord: false,
+    },
+    container
+  );
+  const dropElem = container.querySelector(
+    "#bn-workspace-tab-drop"
+  ) as HTMLDivElement;
+  tabElem?.addEventListener("dragstart", (ev) => {
+    dropElem.style.visibility = "visible";
+  });
+  tabElem?.addEventListener("dragend", (ev) => {
+    dropElem.style.visibility = "hidden";
+  });
+}