Skip to content

Commit

Permalink
Fixed an issue in ERD tool where the downloaded images have a few lin…
Browse files Browse the repository at this point in the history 
…ks cut. #4995
  • Loading branch information
@adityatoshniwal
adityatoshniwal committed Oct 4, 2023
1 parent 9666bd6 commit 5d2ce14
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 132 deletions.
1 change: 1 addition & 0 deletions docs/en_US/release_notes_7_8.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ Housekeeping
Bug fixes
*********

| `Issue #4995 <https://github.com/pgadmin-org/pgadmin4/issues/4995>`_ - Fixed an issue in ERD tool where the downloaded images have a few links cut.
| `Issue #6482 <https://github.com/pgadmin-org/pgadmin4/issues/6482>`_ - Fixed an issue where the wrong message "Current database has been moved or renamed" is displayed when debugging any function.
| `Issue #6674 <https://github.com/pgadmin-org/pgadmin4/issues/6674>`_ - Fix an issue where foreign table column name becomes "none" if the user changes any column data type.
| `Issue #6718 <https://github.com/pgadmin-org/pgadmin4/issues/6718>`_ - Pin the cryptography version to fix PyO3 modules initialisation error.
Expand Down
2 changes: 1 addition & 1 deletion web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@
"dagre": "^0.8.4",
"date-fns": "^2.24.0",
"diff-arrays-of-objects": "^1.1.8",
"html2canvas": "^1.0.0-rc.7",
"html-to-image": "^1.11.11",
"immutability-helper": "^3.0.0",
"insert-if": "^1.1.0",
"ip-address": "^7.1.0",
Expand Down
6 changes: 6 additions & 0 deletions web/pgadmin/tools/erd/static/js/erd_tool/ERDCore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import ForeignKeySchema from '../../../../../browser/server_groups/servers/datab
import diffArray from 'diff-arrays-of-objects';
import TableSchema from '../../../../../browser/server_groups/servers/databases/schemas/tables/static/js/table.ui';
import ColumnSchema from '../../../../../browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui';
import { Polygon } from '@projectstorm/geometry';

export default class ERDCore {
constructor() {
Expand Down Expand Up @@ -175,6 +176,11 @@ export default class ERDCore {

getModel() {return this.getEngine().getModel();}

getBoundingLinksRect() {
return Polygon.boundingBoxFromPolygons(
this.getEngine().getModel().getLinks().map((l)=>l.getBoundingBox()));
}

getNewNode(initData, dataUrl=null) {
return this.getEngine().getNodeFactories().getFactory('table').generateModel({
initialConfig: {
Expand Down
149 changes: 60 additions & 89 deletions web/pgadmin/tools/erd/static/js/erd_tool/components/ERDTool.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import * as React from 'react';
import { CanvasWidget, Action, InputType } from '@projectstorm/react-canvas-core';
import PropTypes from 'prop-types';
import _ from 'lodash';
import html2canvas from 'html2canvas';
import {toPng} from 'html-to-image';

import ERDCore from '../ERDCore';
import ConnectionBar, { STATUS as CONNECT_STATUS } from './ConnectionBar';
Expand Down Expand Up @@ -76,7 +76,7 @@ const styles = ((theme)=>({
diagramContainer: {
position: 'relative',
width: '100%',
height: '100%',
flexGrow: 1,
minHeight: 0,
},
diagramCanvas: {
Expand Down Expand Up @@ -722,66 +722,49 @@ class ERDTool extends React.Component {
* the canvas back to original state.
* Code referred from - zoomToFitNodes function.
*/
let nodesRect = this.diagram.getEngine().getBoundingNodesRect(this.diagram.getModel().getNodes(), 10);
this.diagramContainerRef.current?.classList.add(this.props.classes.html2canvasReset);
const margin = 10;
let nodesRect = this.diagram.getEngine().getBoundingNodesRect(this.diagram.getModel().getNodes());
let linksRect = this.diagram.getBoundingLinksRect();

// Check what is to the most top left - links or nodes?
let topLeftXY = {
x: nodesRect.getTopLeft().x,
y: nodesRect.getTopLeft().y
};
if(topLeftXY.x > linksRect.getTopLeft().x) {
topLeftXY.x = linksRect.getTopLeft().x;
}
if(topLeftXY.y > linksRect.getTopLeft().y) {
topLeftXY.y = linksRect.getTopLeft().y;
}
topLeftXY.x -= margin;
topLeftXY.y -= margin;

let canvasRect = this.canvasEle.getBoundingClientRect();
let canvasTopLeftPoint = {
let canvasTopLeftOnScreen = {
x: canvasRect.left,
y: canvasRect.top
};
let nodeLayerTopLeftPoint = {
x: canvasTopLeftPoint.x + this.diagram.getModel().getOffsetX(),
y: canvasTopLeftPoint.y + this.diagram.getModel().getOffsetY()
x: canvasTopLeftOnScreen.x + this.diagram.getModel().getOffsetX(),
y: canvasTopLeftOnScreen.y + this.diagram.getModel().getOffsetY()
};
let nodesRectTopLeftPoint = {
x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x,
y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y
x: nodeLayerTopLeftPoint.x + topLeftXY.x,
y: nodeLayerTopLeftPoint.y + topLeftXY.y
};

let prevTransform = this.canvasEle.querySelector('div').style.transform;
this.canvasEle.childNodes.forEach((ele)=>{
ele.style.transform = `translate(${nodeLayerTopLeftPoint.x - nodesRectTopLeftPoint.x}px, ${nodeLayerTopLeftPoint.y - nodesRectTopLeftPoint.y}px) scale(1.0)`;
});

/* Change the styles for suiting html2canvas */
this.canvasEle.classList.add(this.props.classes.html2canvasReset);
this.canvasEle.style.width = this.canvasEle.scrollWidth + 'px';
this.canvasEle.style.height = this.canvasEle.scrollHeight + 'px';

/* html2canvas ignores CSS styles, set the CSS styles to inline */
const setSvgInlineStyles = (targetElem) => {
const transformProperties = [
'fill',
'color',
'font-size',
'stroke',
'font',
'display',
];
let svgElems = Array.from(targetElem.getElementsByTagName('svg'));
for (let svgEle of svgElems) {
svgEle.setAttribute('width', svgEle.clientWidth);
svgEle.setAttribute('height', svgEle.clientHeight);
/* Wrap the SVG in a div tag so that transforms are consistent with html */
let wrap = document.createElement('div');
wrap.setAttribute('style', svgEle.getAttribute('style'));
svgEle.setAttribute('style', null);
svgEle.style.display = 'block';
svgEle.parentNode.insertBefore(wrap, svgEle);
wrap.appendChild(svgEle);
recurseElementChildren(svgEle);
}
function recurseElementChildren(node) {
if (!node.style)
return;

let styles = getComputedStyle(node);
for (let transformProperty of transformProperties) {
node.style[transformProperty] = styles[transformProperty];
}
for (let child of Array.from(node.childNodes)) {
recurseElementChildren(child);
}
}
};
// Capture the links beyond the nodes as well.
const linkOutsideWidth = linksRect.getBottomRight().x - nodesRect.getBottomRight().x;
const linkOutsideHeight = linksRect.getBottomRight().y - nodesRect.getBottomRight().y;
this.canvasEle.style.width = this.canvasEle.scrollWidth + (linkOutsideWidth > 0 ? linkOutsideWidth : 0) + margin + 'px';
this.canvasEle.style.height = this.canvasEle.scrollHeight + (linkOutsideHeight > 0 ? linkOutsideHeight : 0) + margin + 'px';

setTimeout(()=>{
let width = this.canvasEle.scrollWidth + 10;
Expand All @@ -796,46 +779,34 @@ class ERDTool extends React.Component {
height = 32766;
isCut = true;
}
html2canvas(this.canvasEle, {
width: width,
height: height,
scrollX: 0,
scrollY: 0,
scale: 1,
useCORS: true,
allowTaint: true,
backgroundColor: window.getComputedStyle(this.canvasEle).backgroundColor,
onclone: (clonedEle)=>{
setSvgInlineStyles(clonedEle.body.querySelector('div[data-test="diagram-container"]'));
return clonedEle;
},
}).then((canvas)=>{
let link = document.createElement('a');
link.setAttribute('href', canvas.toDataURL('image/png'));
link.setAttribute('download', this.getCurrentProjectName() + '.png');
link.click();
link.remove();
}).catch((err)=>{
console.error(err);
let msg = gettext('Unknown error. Check console logs');
if(err.name) {
msg = `${err.name}: ${err.message}`;
}
Notify.alert(gettext('Error'), msg);
}).then(()=>{
/* Revert back to the original CSS styles */
this.canvasEle.classList.remove(this.props.classes.html2canvasReset);
this.canvasEle.style.width = '';
this.canvasEle.style.height = '';
this.canvasEle.childNodes.forEach((ele)=>{
ele.style.transform = prevTransform;
toPng(this.canvasEle)
.then((dataUrl)=>{
let link = document.createElement('a');
link.setAttribute('href', dataUrl);
link.setAttribute('download', this.getCurrentProjectName() + '.png');
link.click();
link.remove();
}).catch((err)=>{
console.error(err);
let msg = gettext('Unknown error. Check console logs');
if(err.name) {
msg = `${err.name}: ${err.message}`;
}
Notify.alert(gettext('Error'), msg);
}).then(()=>{
/* Revert back to the original CSS styles */
this.diagramContainerRef.current.classList.remove(this.props.classes.html2canvasReset);
this.canvasEle.style.width = '';
this.canvasEle.style.height = '';
this.canvasEle.childNodes.forEach((ele)=>{
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.'));
}
});
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);
}

Expand Down Expand Up @@ -959,7 +930,7 @@ class ERDTool extends React.Component {
this.erdDialogs.modal = this.context;

return (
<Box ref={this.containerRef} height="100%">
<Box ref={this.containerRef} height="100%" display="flex" flexDirection="column">
<ConnectionBar status={this.state.conn_status} bgcolor={this.props.params.bgcolor}
fgcolor={this.props.params.fgcolor} title={_.unescape(this.props.params.title)}/>
<MainToolBar preferences={this.state.preferences} eventBus={this.eventBus}
Expand Down
47 changes: 5 additions & 42 deletions web/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3984,13 +3984,6 @@ __metadata:
languageName: node
linkType: hard

"base64-arraybuffer@npm:^1.0.2":
version: 1.0.2
resolution: "base64-arraybuffer@npm:1.0.2"
checksum: 15e6400d2d028bf18be4ed97702b11418f8f8779fb8c743251c863b726638d52f69571d4cc1843224da7838abef0949c670bde46936663c45ad078e89fee5c62
languageName: node
linkType: hard

"base64-js@npm:^1.0.2, base64-js@npm:^1.3.1":
version: 1.5.1
resolution: "base64-js@npm:1.5.1"
Expand Down Expand Up @@ -5238,15 +5231,6 @@ __metadata:
languageName: node
linkType: hard

"css-line-break@npm:^2.1.0":
version: 2.1.0
resolution: "css-line-break@npm:2.1.0"
dependencies:
utrie: ^1.0.2
checksum: 37b1fe632b03be7a287cd394cef8b5285666343443125c510df9cfb6a4734a2c71e154ec8f7bbff72d7c339e1e5872989b1c52d86162aed27d6cc114725bb4d0
languageName: node
linkType: hard

"css-loader@npm:^6.7.2":
version: 6.8.1
resolution: "css-loader@npm:6.8.1"
Expand Down Expand Up @@ -7745,13 +7729,10 @@ __metadata:
languageName: node
linkType: hard

"html2canvas@npm:^1.0.0-rc.7":
version: 1.4.1
resolution: "html2canvas@npm:1.4.1"
dependencies:
css-line-break: ^2.1.0
text-segmentation: ^1.0.3
checksum: c134324af57f3262eecf982e436a4843fded3c6cf61954440ffd682527e4dd350e0c2fafd217c0b6f9a455fe345d0c67b4505689796ab160d4ca7c91c3766739
"html-to-image@npm:^1.11.11":
version: 1.11.11
resolution: "html-to-image@npm:1.11.11"
checksum: b453beca72a697bf06fae4945e5460d1d9b1751e8569a0d721dda9485df1dde093938cc9bd9172b8df5fc23133a53a4d619777b3d22f7211cd8a67e3197ab4e8
languageName: node
linkType: hard

Expand Down Expand Up @@ -13145,7 +13126,7 @@ __metadata:
eslint-plugin-react-hooks: ^4.3.0
exports-loader: ^4.0.0
html-react-parser: ^4.2.0
html2canvas: ^1.0.0-rc.7
html-to-image: ^1.11.11
image-minimizer-webpack-plugin: ^3.8.2
imagemin: ^8.0.1
imagemin-mozjpeg: ^10.0.0
Expand Down Expand Up @@ -14463,15 +14444,6 @@ __metadata:
languageName: node
linkType: hard

"text-segmentation@npm:^1.0.3":
version: 1.0.3
resolution: "text-segmentation@npm:1.0.3"
dependencies:
utrie: ^1.0.2
checksum: 2e24632d59567c55ab49ac324815e2f7a8043e63e26b109636322ac3e30692cee8679a448fd5d0f0598a345f407afd0e34ba612e22524cf576d382d84058c013
languageName: node
linkType: hard

"text-table@npm:^0.2.0":
version: 0.2.0
resolution: "text-table@npm:0.2.0"
Expand Down Expand Up @@ -15056,15 +15028,6 @@ __metadata:
languageName: node
linkType: hard

"utrie@npm:^1.0.2":
version: 1.0.2
resolution: "utrie@npm:1.0.2"
dependencies:
base64-arraybuffer: ^1.0.2
checksum: c96fbb7d4d8855a154327da0b18e39b7511cc70a7e4bcc3658e24f424bb884312d72b5ba777500b8858e34d365dc6b1a921dc5ca2f0d341182519c6b78e280a5
languageName: node
linkType: hard

"uuid@npm:^3.0.1":
version: 3.4.0
resolution: "uuid@npm:3.4.0"
Expand Down

0 comments on commit 5d2ce14

Please sign in to comment.