feat: terminal adds drag-and-drop

packages/terminal-next/src/browser/component/tab.item.tsx

@@ -72,8 +72,46 @@ export const renderInfoItem = (props: ItemProps) => {
     }
   }
 
+  const handleDragStart = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      props.onDragStart?.(e);
+    },
+    [props.onDragStart],
+  );
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      if (ref.current) {
+        ref.current.classList.add('on-drag-over');
+      }
+    },
+    [ref],
+  );
+
+  const handleDragLeave = useCallback(() => {
+    if (ref.current) {
+      ref.current.classList.remove('on-drag-over');
+    }
+  }, [ref]);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      if (ref.current) {
+        ref.current.classList.remove('on-drag-over');
+      }
+      props.onDrop?.(e);
+    },
+    [ref, props.onDrop],
+  );
+
   return (
     <div
+      draggable={props.draggable}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
       ref={ref}
       className={cls({
         [styles_item_container]: true,

packages/terminal-next/src/browser/component/tab.view.tsx

@@ -46,6 +46,17 @@ export default () => {
           <div className={styles_tab_contents}>
             {groups.filter(Boolean).map((group, index) => (
               <TabItem
+                draggable={true}
+                onDragStart={(e) => {
+                  e.dataTransfer.setData('groupIndex', String(index));
+                }}
+                onDrop={(e: React.DragEvent) => {
+                  if (e.dataTransfer.getData('groupIndex')) {
+                    const i = e.dataTransfer.getData('groupIndex');
+                    view.swapGroup(Number(i), index);
+                    view.selectGroup(index);
+                  }
+                }}
                 key={group.id}
                 group={group}
                 selected={currentGroup && currentGroup.id === group.id}

packages/terminal-next/src/browser/terminal.view.ts

@@ -275,6 +275,23 @@ export class TerminalGroupViewService implements ITerminalGroupViewService {
     return this.groups.get()[index];
   }
 
+  swapGroup(i: number, j: number) {
+    const groups = this.groups.get();
+
+    if (i === -1 || j === -1) {
+      return;
+    }
+
+    const newGroups = [...groups];
+    const temp = newGroups[i];
+    newGroups[i] = newGroups[j];
+    newGroups[j] = temp;
+
+    transaction((tx) => {
+      this.groups.set(newGroups, tx);
+    });
+  }
+
   private _doSelectGroup(index: number) {
     const group = this.getGroup(index);
     transaction((tx) => {

packages/terminal-next/src/common/controller.ts

@@ -140,6 +140,8 @@ export interface ITerminalGroupViewService {
   selectGroup(index: number): void;
   removeGroup(index: number): void;
 
+  swapGroup(i: number, j: number): void;
+
   createWidget(group: IWidgetGroup, id?: string, reuse?: boolean, isSimpleWidget?: boolean): IWidget;
   getWidget(id: string): IWidget;
   selectWidget(widgetId: string): void;

packages/terminal-next/src/common/render.ts

@@ -18,8 +18,11 @@ export interface ItemProps {
   onDropdown?: (event: React.MouseEvent<HTMLElement>) => void;
   onContextMenu?: (event: React.MouseEvent<HTMLElement>) => void;
   getKeybinding?: (command: string) => string;
+  onDrop?: (event: React.DragEvent) => void;
+  onDragStart?: (event: React.DragEvent) => void;
   provider: ITerminalRenderProvider;
   theme: ThemeType;
+  draggable?: boolean;
 }
 
 export const ITerminalRenderProvider = Symbol('TerminalRenderProvider');