public inbox for [email protected]  
help / color / mirror / Atom feed
From: Aditya Toshniwal <[email protected]>
To: Dave Page <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM7187] ERD Image png 0 bytes
Date: Thu, 7 Apr 2022 10:15:35 +0530
Message-ID: <CAM9w-_mk8_aoQzYpRo+Kx-uE95kpX73sLZWp1OMdxwa6WHjhxA@mail.gmail.com> (raw)
In-Reply-To: <CA+OCxox7x3UvxhfkqTQrTBSCxt5kqSHKNx5COrWW7afvsrNHPQ@mail.gmail.com>
References: <CAM9w-_ku2EQJ3zcPBSJZUObkHdOPgM=JZuVWXT=64c-S6iZfTQ@mail.gmail.com>
	<CA+OCxox7x3UvxhfkqTQrTBSCxt5kqSHKNx5COrWW7afvsrNHPQ@mail.gmail.com>

Hi Dave/Hackers,

Attached is the updated patch to change the message.

On Wed, Apr 6, 2022 at 6:07 PM Dave Page <[email protected]> wrote:

> Hi
>
> On Wed, 6 Apr 2022 at 13:32, Aditya Toshniwal <
> [email protected]> wrote:
>
>> Hi Hackers,
>>
>> Due to the limitations of HTML Canvas, if the image exceeds max
>> width/height of 32767 then the image becomes empty.
>> To fix this, I have set the max limit of width and height to 32767. The
>> ERD diagram will be cut if it exceeds the limit. The ERD tool will also
>> throw an alert to inform the user in that case.
>> Please review.
>>
>> [image: image.png]
>>
>
> "The downloaded image has exceeded the maximum size of 32767 x 32767
> pixels, and has been cropped to that size."
>
> Can we similarly limit the size of the design canvas? 32767 x 32767 is
> huge.
>
There are just too many tables to fit in. I tried to create an SVG image
instead of PNG and it went 200MB.
I will see if we can limit the size of canvas as well.

>
> --
> Dave Page
> Blog: https://pgsnake.blogspot.com
> Twitter: @pgsnake
>
> EDB: https://www.enterprisedb.com
>
>

-- 
Thanks,
Aditya Toshniwal
pgAdmin Hacker | Software Architect | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"


Attachments:

  [image/png] image.png (74.9K, 3-image.png)
  download | view image

  [application/octet-stream] RM7187_v2.patch (1.6K, 4-RM7187_v2.patch)
  download | inline diff:
diff --git a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
index 2b598d808..f1eefe903 100644
--- a/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
+++ b/web/pgadmin/tools/erd/static/js/erd_tool/ui_components/BodyWidget.jsx
@@ -657,11 +657,24 @@ export default class BodyWidget extends React.Component {
     };
 
     setTimeout(()=>{
+      let width = this.canvasEle.scrollWidth + 10;
+      let height = this.canvasEle.scrollHeight + 10;
+      let isCut = false;
+      /* Canvas limitation - https://html2canvas.hertzen.com/faq */
+      if(width >= 32767){
+        width = 32766;
+        isCut = true;
+      }
+      if(height >= 32767){
+        height = 32766;
+        isCut = true;
+      }
       html2canvas(this.canvasEle, {
-        width: this.canvasEle.scrollWidth + 10,
-        height: this.canvasEle.scrollHeight + 10,
+        width: width,
+        height: height,
         scrollX: 0,
         scrollY: 0,
+        scale: 1,
         useCORS: true,
         allowTaint: true,
         backgroundColor: window.getComputedStyle(this.canvasEle).backgroundColor,
@@ -691,6 +704,10 @@ export default class BodyWidget extends React.Component {
           ele.style.transform = prevTransform;
         });
         this.setLoading(null);
+        if(isCut) {
+          Notify.alert(gettext('Maximum image size limit'),
+            gettext('The downloaded image has exceeded the maximum size of 32767 x 32767 pixels, and has been cropped to that size.'));
+        }
       });
     }, 1000);
   }


view thread (4+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected]
  Subject: Re: [pgAdmin][RM7187] ERD Image png 0 bytes
  In-Reply-To: <CAM9w-_mk8_aoQzYpRo+Kx-uE95kpX73sLZWp1OMdxwa6WHjhxA@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox