mirror
/
mysticsymbolic.github.io
kopia lustrzana https://github.com/mysticsymbolic/mysticsymbolic.github.io
1
0
Forkuj 0
Kod Zgłoszenia Projekty Wydania Wiki Aktywność

Make 'padding' in AutoSizingSvg optional.

pull/78/head
Atul Varma 2021-04-04 16:40:48 -04:00
rodzic 24eead10f8
commit 1fb7be9f95
1 zmienionych plików z 3 dodań i 2 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

5
lib/auto-sizing-svg.tsx
Wyświetl plik

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
type AutoSizingSvgProps = { type AutoSizingSvgProps = {
padding: number; padding?: number;
bgColor?: string; bgColor?: string;
sizeToElement?: React.RefObject<HTMLElement>; sizeToElement?: React.RefObject<HTMLElement>;
children: JSX.Element | JSX.Element[]; children: JSX.Element | JSX.Element[];
@ -25,7 +25,7 @@ function useResizeHandler(onResize: () => void) {
*/ */
export const AutoSizingSvg = React.forwardRef( export const AutoSizingSvg = React.forwardRef(
(props: AutoSizingSvgProps, ref: React.ForwardedRef<SVGSVGElement>) => { (props: AutoSizingSvgProps, ref: React.ForwardedRef<SVGSVGElement>) => {
const { bgColor, padding, sizeToElement } = props; const { bgColor, sizeToElement } = props;
const [x, setX] = useState(0); const [x, setX] = useState(0);
const [y, setY] = useState(0); const [y, setY] = useState(0);
const [width, setWidth] = useState(1); const [width, setWidth] = useState(1);
@ -50,6 +50,7 @@ export const AutoSizingSvg = React.forwardRef(
const svgEl = gRef.current; const svgEl = gRef.current;
if (svgEl) { if (svgEl) {
const bbox = svgEl.getBBox(); const bbox = svgEl.getBBox();
const padding = props.padding || 0;
setX(bbox.x - padding); setX(bbox.x - padding);
setY(bbox.y - padding); setY(bbox.y - padding);
setWidth(bbox.width + padding * 2); setWidth(bbox.width + padding * 2);