From 054860cec3fc0ce7686f0b5e33fcf7fc11ec251b Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Thu, 14 Mar 2024 23:45:17 +0700 Subject: [PATCH] booru widget: no more lag --- .config/ags/modules/sideleft/apis/booru.js | 158 ++++++++++++--------- .config/ags/scss/_sidebars.scss | 16 ++- 2 files changed, 102 insertions(+), 72 deletions(-) diff --git a/.config/ags/modules/sideleft/apis/booru.js b/.config/ags/modules/sideleft/apis/booru.js index a4929928c..722462c0b 100644 --- a/.config/ags/modules/sideleft/apis/booru.js +++ b/.config/ags/modules/sideleft/apis/booru.js @@ -117,36 +117,91 @@ const BooruPage = (taglist) => { onClicked: action, setup: setupCursorHover, }) - const PreviewImage = (data) => { - return Overlay({ - child: Box({ - className: 'sidebar-booru-image', - css: `background-image: url('${data.preview_url}');`, - // setup: (self) => { - // Utils.timeout(1000, () => { - // self.css = `background-image: url('${data.preview_url}');`; - // }) - // } - }), - overlays: [ - Box({ - vpack: 'start', - className: 'sidebar-booru-image-actions spacing-h-3', - children: [ - Box({ hexpand: true }), - ImageAction({ - name: 'Go to file url', - icon: 'file_open', - action: () => execAsync(['xdg-open', `${data.file_url}`]).catch(print), - }), - ImageAction({ - name: 'Go to source', - icon: 'open_in_new', - action: () => execAsync(['xdg-open', `${data.source}`]).catch(print), - }), - ] - }) + const PreviewImage = (data, delay = 0) => { + const imageArea = Widget.DrawingArea({ + className: 'sidebar-booru-image-drawingarea', + }); + const imageBox = Box({ + className: 'sidebar-booru-image', + // css: `background-image: url('${data.preview_url}');`, + attribute: { + 'update': (self, data, force = false) => { + const imagePath = `${USER_CACHE_DIR}/ags/media/waifus/${data.md5}.${data.file_ext}`; + const widgetStyleContext = imageArea.get_style_context(); + const widgetWidth = widgetStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL); + const widgetHeight = widgetStyleContext.get_property('min-height', Gtk.StateFlags.NORMAL); + imageArea.set_size_request(widgetWidth, widgetHeight); + const showImage = () => { + const imageDimensionsStr = exec(`identify -format {\\"w\\":%w,\\"h\\":%h} '${imagePath}'`) + const imageDimensionsJson = JSON.parse(imageDimensionsStr); + let imageWidth = imageDimensionsJson.w; + let imageHeight = imageDimensionsJson.h; + + // Fill + const scale = imageWidth / imageHeight; + if (imageWidth > imageHeight) { + imageWidth = widgetHeight * scale; + imageHeight = widgetHeight; + } else { + imageHeight = widgetWidth / scale; + imageWidth = widgetWidth; + } + + // const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(imagePath, widgetWidth, widgetHeight); + const pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_scale(imagePath, imageWidth, imageHeight, false); + imageArea.connect("draw", (widget, cr) => { + const borderRadius = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL); + + // Draw a rounded rectangle + cr.arc(borderRadius, borderRadius, borderRadius, Math.PI, 1.5 * Math.PI); + cr.arc(widgetWidth - borderRadius, borderRadius, borderRadius, 1.5 * Math.PI, 2 * Math.PI); + cr.arc(widgetWidth - borderRadius, widgetHeight - borderRadius, borderRadius, 0, 0.5 * Math.PI); + cr.arc(borderRadius, widgetHeight - borderRadius, borderRadius, 0.5 * Math.PI, Math.PI); + cr.closePath(); + cr.clip(); + + // Paint image as bg + Gdk.cairo_set_source_pixbuf(cr, pixbuf, (widgetWidth - imageWidth) / 2, (widgetHeight - imageHeight) / 2); + cr.paint(); + }); + self.queue_draw(); + } + // Show + // const downloadCommand = `wget -O '${imagePath}' '${data.preview_url}'`; + const downloadCommand = `curl -L -o '${imagePath}' '${data.preview_url}'`; + // console.log(downloadCommand) + if (!force && fileExists(imagePath)) showImage(); + else Utils.timeout(delay, () => Utils.execAsync(['bash', '-c', downloadCommand]) + .then(showImage) + .catch(print) + ); + }, + }, + child: imageArea, + setup: (self) => { + Utils.timeout(1000, () => self.attribute.update(self, data)); + } + }); + const imageActions = Box({ + vpack: 'start', + className: 'sidebar-booru-image-actions spacing-h-3', + children: [ + Box({ hexpand: true }), + ImageAction({ + name: 'Go to file url', + icon: 'file_open', + action: () => execAsync(['xdg-open', `${data.file_url}`]).catch(print), + }), + ImageAction({ + name: 'Go to source', + icon: 'open_in_new', + action: () => execAsync(['xdg-open', `${data.source}`]).catch(print), + }), ] + }); + return Overlay({ + child: imageBox, + overlays: [imageActions] }) } const colorIndicator = Box({ @@ -188,39 +243,9 @@ const BooruPage = (taglist) => { downloadIndicator, ] }); - const pageActions = Revealer({ - transition: 'crossfade', - revealChild: false, - child: Box({ - vertical: true, - children: [ - Box({ - className: 'sidebar-waifu-image-actions spacing-h-3', - children: [ - Box({ hexpand: true }), - ImageAction({ - name: 'Go to source', - icon: 'link', - action: () => execAsync(['xdg-open', `${thisPage.attribute.imageData.source}`]).catch(print), - }), - ImageAction({ - name: 'Hoard', - icon: 'save', - action: () => execAsync(['bash', '-c', `mkdir -p ~/Pictures/homework${thisPage.attribute.isNsfw ? '/🌶️' : ''} && cp ${thisPage.attribute.imagePath} ~/Pictures/homework${thisPage.attribute.isNsfw ? '/🌶️/' : ''}`]).catch(print), - }), - ImageAction({ - name: 'Open externally', - icon: 'open_in_new', - action: () => execAsync([IMAGE_VIEWER_APP, `${thisPage.attribute.imagePath}`]).catch(print), - }), - ] - }) - ], - }) - }) const pageImageGrid = Grid({ - columnHomogeneous: true, - rowHomogeneous: true, + // columnHomogeneous: true, + // rowHomogeneous: true, className: 'sidebar-waifu-image', // css: 'min-height: 90px;' }); @@ -248,9 +273,11 @@ const BooruPage = (taglist) => { // Add stuff for (let i = 0; i < imageRows; i++) { for (let j = 0; j < imageColumns; j++) { - if (i * imageColumns + j >= userOptions.sidebar.imageBooruCount) break; - // if (i * imageColumns + j >= data.length) break; - pageImageGrid.attach(PreviewImage(data[i * imageColumns + j]), j, i, 1, 1); + if (i * imageColumns + j >= Math.min(userOptions.sidebar.imageBooruCount, data.length)) break; + pageImageGrid.attach( + PreviewImage(data[i * imageColumns + j]), + j, i, 1, 1 + ); } } pageImageGrid.show_all(); @@ -259,9 +286,6 @@ const BooruPage = (taglist) => { Utils.timeout(IMAGE_REVEAL_DELAY, () => pageImageRevealer.revealChild = true ); - Utils.timeout(IMAGE_REVEAL_DELAY + pageImageRevealer.transitionDuration, - () => pageActions.revealChild = true - ); downloadIndicator.attribute.hide(); }, }, diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss index dad80e962..bd56dfccf 100644 --- a/.config/ags/scss/_sidebars.scss +++ b/.config/ags/scss/_sidebars.scss @@ -853,14 +853,20 @@ $waifu_image_overlay_transparency: 0.7; .sidebar-booru-image { @include small-rounding; margin: 0.273rem; - min-width: 12.818rem; - min-height: 12.818rem; - background-size: cover; - background-repeat: no-repeat; - background-position: center; + min-width: 11.932rem; + min-height: 11.932rem; + // background-color: rgba(100, 200, 0, 0.3); +} + +.sidebar-booru-image-drawingarea { + // background-color: rgba(200, 100, 0, 0.3); + @include small-rounding; + min-width: 12.273rem; + min-height: 12.273rem; } .sidebar-booru-image-actions { + // background-color: rgba(100, 100, 0, 0.3); @include element_decel; margin: 0.545rem; } \ No newline at end of file