public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin][RM7187] ERD Image png 0 bytes 4+ messages / 3 participants [nested] [flat]
* [pgAdmin][RM7187] ERD Image png 0 bytes @ 2022-04-06 12:31 Aditya Toshniwal <[email protected]> 0 siblings, 2 replies; 4+ messages in thread From: Aditya Toshniwal @ 2022-04-06 12:31 UTC (permalink / raw) To: pgadmin-hackers 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] -- 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.patch (1.6K, 4-RM7187.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..8b7d77aee 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 it cut to maximum limit of 32767 x 32767 pixels. This happens when the ERD dimension size has exceeded the maximum limit.')); + } }); }, 1000); } ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM7187] ERD Image png 0 bytes @ 2022-04-06 12:36 Dave Page <[email protected]> parent: Aditya Toshniwal <[email protected]> 1 sibling, 1 reply; 4+ messages in thread From: Dave Page @ 2022-04-06 12:36 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers 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. -- Dave Page Blog: https://pgsnake.blogspot.com Twitter: @pgsnake EDB: https://www.enterprisedb.com Attachments: [image/png] image.png (74.9K, 3-image.png) download | view image ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM7187] ERD Image png 0 bytes @ 2022-04-07 04:45 Aditya Toshniwal <[email protected]> parent: Dave Page <[email protected]> 0 siblings, 0 replies; 4+ messages in thread From: Aditya Toshniwal @ 2022-04-07 04:45 UTC (permalink / raw) To: Dave Page <[email protected]>; +Cc: pgadmin-hackers 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); } ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin][RM7187] ERD Image png 0 bytes @ 2022-04-07 09:50 Akshay Joshi <[email protected]> parent: Aditya Toshniwal <[email protected]> 1 sibling, 0 replies; 4+ messages in thread From: Akshay Joshi @ 2022-04-07 09:50 UTC (permalink / raw) To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers Thanks, the patch applied. On Wed, Apr 6, 2022 at 6:02 PM 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] > > > -- > Thanks, > Aditya Toshniwal > pgAdmin Hacker | Software Architect | *edbpostgres.com* > <http://edbpostgres.com; > "Don't Complain about Heat, Plant a TREE" > -- *Thanks & Regards* *Akshay Joshi* *pgAdmin Hacker | Principal Software Architect* *EDB Postgres <http://edbpostgres.com>* *Mobile: +91 976-788-8246* Attachments: [image/png] image.png (74.9K, 3-image.png) download | view image ^ permalink raw reply [nested|flat] 4+ messages in thread
end of thread, other threads:[~2022-04-07 09:50 UTC | newest] Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2022-04-06 12:31 [pgAdmin][RM7187] ERD Image png 0 bytes Aditya Toshniwal <[email protected]> 2022-04-06 12:36 ` Dave Page <[email protected]> 2022-04-07 04:45 ` Aditya Toshniwal <[email protected]> 2022-04-07 09:50 ` Akshay Joshi <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox