refactor(ags): separate drag n drop code from main.js

config/ags/js/overview/dragndrop.js

@@ -0,0 +1,57 @@
+const { Gtk, Gdk } = imports.gi;
+const { EventBox } = ags.Widget;
+const { execAsync } = ags.Utils;
+const { getWindow } = ags.App;
+import Cairo from 'cairo';
+
+import { Button } from '../misc/cursorbox.js';
+
+
+const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
+
+function createSurfaceFromWidget(widget) {
+  const alloc = widget.get_allocation();
+  const surface = new Cairo.ImageSurface(
+    Cairo.Format.ARGB32,
+    alloc.width,
+    alloc.height,
+  );
+  const cr = new Cairo.Context(surface);
+  cr.setSourceRGBA(255, 255, 255, 0);
+  cr.rectangle(0, 0, alloc.width, alloc.height);
+  cr.fill();
+  widget.draw(cr);
+
+  return surface;
+};
+
+export const WorkspaceDrop = ({id, ...params} = {}) => EventBox({
+  ...params,
+  tooltipText: `Workspace: ${id}`,
+  setup: eventbox => {
+    eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
+    eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => {
+      execAsync(`hyprctl dispatch movetoworkspacesilent ${id},address:${data.get_text()}`)
+        .catch(print);
+    });
+  },
+});
+
+export const WindowButton = ({address, ...params} = {}) => Button({
+  ...params,
+  setup: button => {
+    button.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
+    button.connect('drag-data-get', (_w, _c, data) => {
+      data.set_text(address, address.length);
+    });
+    button.connect('drag-begin', (_, context) => {
+      Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(button));
+      button.get_parent().revealChild = false;
+    });
+    button.connect('drag-end', () => {
+      button.get_parent().destroy();
+      let mainBox = getWindow('overview').child.child;
+      mainBox._updateApps(mainBox);
+    });
+  },
+});

config/ags/js/overview/main.js

@@ -1,12 +1,11 @@
-const { Window, Box, CenterBox, Icon, Revealer, EventBox } = ags.Widget;
+const { Window, Box, CenterBox, Icon, Revealer } = ags.Widget;
 const { closeWindow } = ags.App;
 const { execAsync } = ags.Utils;
 const { Hyprland } = ags.Service;
-const { Gtk, Gdk } = imports.gi;
+const { Gtk } = imports.gi;
-import Cairo from 'cairo';
 
-import { Button } from '../misc/cursorbox.js';
 import { PopUp } from '../misc/popup.js';
+import { WorkspaceDrop, WindowButton } from './dragndrop.js';
 
 const WORKSPACE_PER_ROW = 6;
 const SCALE = 0.11;
@@ -28,24 +27,6 @@ const IconStyle = app => `min-width: ${app.size[0] * SCALE - MARGIN}px;
                             app.size[1] * SCALE - MARGIN) * ICON_SCALE}px;`;
 Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1) };
 
-const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
-
-export function createSurfaceFromWidget(widget) {
-    const alloc = widget.get_allocation();
-    const surface = new Cairo.ImageSurface(
-        Cairo.Format.ARGB32,
-        alloc.width,
-        alloc.height,
-    );
-    const cr = new Cairo.Context(surface);
-    cr.setSourceRGBA(255, 255, 255, 0);
-    cr.rectangle(0, 0, alloc.width, alloc.height);
-    cr.fill();
-    widget.draw(cr);
-
-    return surface;
-}
-
 const WorkspaceRow = (className, i) => Revealer({
   transition: 'slide_down',
   connections: [[Hyprland, rev => {
@@ -131,19 +112,12 @@ const OverviewWidget = Box({
               box.child.child.toggleClassName('active', active);
               box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active;
             }]],
-            child: EventBox({
+            child: WorkspaceDrop({
-              tooltipText: `Workspace: ${ws.id}`,
+              id: ws.id,
               child: Box({
                 className: 'workspace',
                 style: `min-width: ${SCREEN.X * SCALE}px;
                         min-height: ${SCREEN.Y * SCALE}px;`,
-                setup: eventbox => {
-                  eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
-                  eventbox.connect('drag-data-received', (_w, _c, _x, _y, data) => {
-                    execAsync(`hyprctl dispatch movetoworkspacesilent ${ws.id},address:${data.get_text()}`)
-                      .catch(print);
-                  });
-                },
                 child: ags.Widget({
                   type: Gtk.Fixed,
                 }),
@@ -209,7 +183,8 @@ const OverviewWidget = Box({
                     ['address', app.address],
                     ['toDestroy', false]
                   ],
-                  child: Button({
+                  child: WindowButton({
+                    address: app.address,
                     onSecondaryClickRelease: () => {
                       execAsync(`hyprctl dispatch closewindow address:${address}`)
                         .catch(print)
@@ -224,15 +199,6 @@ const OverviewWidget = Box({
                           .then(() => closeWindow('overview'))
                           .catch(print);
                     },
-                    setup: button => {
-                      button.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
-                      button.connect('drag-data-get', (_w, _c, data) => data.set_text(app.address, app.address.length));
-                      button.connect('drag-begin', (_, context) => {
-                        Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(button));
-                        button.get_parent().revealChild = false;
-                      });
-                      button.connect('drag-end', () => button.get_parent().revealChild = true);
-                    },
                     child: Icon({
                       className: `window ${active}`,
                       style: IconStyle(app),