tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-30 17:25:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Visual Console Client: Improved the color cloud resizing

Browse Source 
Former-commit-id: 4f6131a8368ea1af973527388ed641f104381fe6
This commit is contained in:
Alejandro Gallardo Escobar 2019-03-01 09:27:58 +01:00
parent b0052577a4
commit 850045f791
1 changed files with 2 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
visual_console/src/items/ColorCloud.ts
View File

@ -63,9 +63,8 @@ export default class ColorCloud extends VisualConsoleItem<ColorCloudProps> {
const gradientId = `grad_${this.props.id}`; const gradientId = `grad_${this.props.id}`;
// SVG container. // SVG container.
const svg = document.createElementNS(svgNS, "svg"); const svg = document.createElementNS(svgNS, "svg");
// Resize SVG. Use only the width, cause this element only needs a diameter. // Auto resize SVG using the view box magic: https://css-tricks.com/scale-svg/
svg.setAttribute("width", `${this.props.width}px`); svg.setAttribute("viewBox", "0 0 100 100");
svg.setAttribute("height", `${this.props.width}px`);
// Defs. // Defs.
const defs = document.createElementNS(svgNS, "defs"); const defs = document.createElementNS(svgNS, "defs");
@ -104,22 +103,4 @@ export default class ColorCloud extends VisualConsoleItem<ColorCloudProps> {
return svg; return svg;
} }
/**
* @override VisualConsoleItem.resize
* To resize the item.
* @param diameter Diameter.
*/
public resize(diameter: number): void {
// Resize parent. Use the diameter as width and height.
super.resize(diameter, diameter);
// Get SVG element.
const svgElement = this.elementRef.getElementsByTagName("svg").item(0);
if (svgElement === null) return;
// Resize SVG. Use only the width, cause this element only needs a diameter.
svgElement.setAttribute("width", `${this.props.width}px`);
svgElement.setAttribute("height", `${this.props.width}px`);
}
} }