@cutting/svg 4.52.1 → 4.52.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +1 -1
- package/CHANGELOG.md +7 -0
- package/demo/index.html +1 -1
- package/demo/src/App.tsx +18 -22
- package/demo/src/global.css.ts +6 -8
- package/dist/esm/components/ParentsizeSVG/ParentsizeSVG.d.ts +2 -4
- package/dist/esm/components/ParentsizeSVG/ParentsizeSVG.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/types.d.ts +1 -1
- package/dist/esm/types/types.d.ts.map +1 -1
- package/package.json +4 -2
- package/src/components/ParentsizeSVG/ParentSizeSVG.test.tsx +0 -16
- package/src/components/ParentsizeSVG/ParentsizeSVG.tsx +4 -34
- package/src/types/types.ts +1 -1
package/.turbo/turbo-build.log
CHANGED
package/CHANGELOG.md
CHANGED
package/demo/index.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
7
7
|
<meta name="theme-color" content="#000000">
|
|
8
8
|
<link rel="shortcut icon" href="/favicon.ico">
|
|
9
|
-
<title>@cutting/
|
|
9
|
+
<title>@cutting/svg</title>
|
|
10
10
|
</head>
|
|
11
11
|
|
|
12
12
|
<body>
|
package/demo/src/App.tsx
CHANGED
|
@@ -1,34 +1,30 @@
|
|
|
1
|
-
|
|
2
1
|
import * as styles from './global.css';
|
|
3
2
|
import '@cutting/component-library/styles.css';
|
|
4
|
-
import { useRef } from 'react';
|
|
3
|
+
import { useMemo, useRef } from 'react';
|
|
5
4
|
import { ApplicationLayout } from '@cutting/component-library';
|
|
6
|
-
import {
|
|
5
|
+
import { ResponsiveSVG } from '../../src/components/ResponsiveSVG/ResponsiveSVG';
|
|
6
|
+
import { useParentSize } from '@cutting/use-get-parent-size';
|
|
7
|
+
import { scaleLinear } from 'd3-scale';
|
|
7
8
|
|
|
8
9
|
export function App(): JSX.Element {
|
|
9
10
|
const ref = useRef<HTMLDivElement>(null);
|
|
11
|
+
const { width, height } = useParentSize(ref);
|
|
12
|
+
|
|
13
|
+
const { radius } = useMemo(() => {
|
|
14
|
+
const xScale = scaleLinear().domain([0, 20]).range([0, width]);
|
|
15
|
+
const yScale = scaleLinear().domain([0, 20]).range([height, 0]);
|
|
16
|
+
|
|
17
|
+
const radius = yScale(12);
|
|
18
|
+
|
|
19
|
+
return { radius, xScale, yScale };
|
|
20
|
+
}, [width, height]);
|
|
21
|
+
|
|
10
22
|
return (
|
|
11
23
|
<ApplicationLayout heading="@cutting/svg" theme="salesTheme">
|
|
12
24
|
<div className={styles.container} ref={ref}>
|
|
13
|
-
<
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
y="0"
|
|
17
|
-
width={'50%'}
|
|
18
|
-
height={'50%'}
|
|
19
|
-
rx="0"
|
|
20
|
-
style={{ fill: '#ff0000', stroke: '#000000', strokeWidth: '2px' }}
|
|
21
|
-
/>
|
|
22
|
-
|
|
23
|
-
<rect
|
|
24
|
-
x="0"
|
|
25
|
-
y="0"
|
|
26
|
-
width={'50%'}
|
|
27
|
-
height={'50%'}
|
|
28
|
-
rx="40"
|
|
29
|
-
style={{ fill: '#0000ff', stroke: '#000000', strokeWidth: '2px', fillOpacity: 0.7 }}
|
|
30
|
-
/>
|
|
31
|
-
</ParentsizeSVG>
|
|
25
|
+
<ResponsiveSVG width={width} height={height}>
|
|
26
|
+
<circle cx={width / 2} cy={height / 2} r={radius} />
|
|
27
|
+
</ResponsiveSVG>
|
|
32
28
|
</div>
|
|
33
29
|
</ApplicationLayout>
|
|
34
30
|
);
|
package/demo/src/global.css.ts
CHANGED
|
@@ -3,17 +3,15 @@ import { globalStyle, style } from '@vanilla-extract/css';
|
|
|
3
3
|
export const container = style({
|
|
4
4
|
background: 'grey',
|
|
5
5
|
color: 'white',
|
|
6
|
-
overflow: 'hidden',
|
|
7
6
|
resize: 'both',
|
|
8
|
-
width: '
|
|
9
|
-
height: '
|
|
10
|
-
fontWeight: 'bold',
|
|
11
|
-
justifyContent: 'center',
|
|
12
|
-
alignItems: 'center',
|
|
13
|
-
margin: '0 auto',
|
|
14
|
-
marginBottom: '10rem',
|
|
7
|
+
width: '100%',
|
|
8
|
+
height: '100%',
|
|
15
9
|
});
|
|
16
10
|
|
|
17
11
|
globalStyle('svg', {
|
|
18
12
|
border: '1px solid royalblue;',
|
|
19
13
|
});
|
|
14
|
+
|
|
15
|
+
globalStyle('circle', {
|
|
16
|
+
stroke: '#000000',
|
|
17
|
+
});
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PropsWithChildren, RefObject } from 'react';
|
|
2
2
|
import type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';
|
|
3
3
|
import type { UseParentSizeOptions } from '@cutting/use-get-parent-size';
|
|
4
4
|
type Align = 'none' | 'center';
|
|
5
5
|
export type ParentsizeSVGProps<E extends HTMLElement = HTMLElement> = {
|
|
6
6
|
parentRef: RefObject<E>;
|
|
7
|
-
style?: CSSProperties;
|
|
8
7
|
align?: Align;
|
|
9
8
|
scale?: number;
|
|
10
9
|
options?: Partial<UseParentSizeOptions>;
|
|
11
10
|
} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;
|
|
12
|
-
export declare
|
|
13
|
-
export declare function ParentsizeSVG<E extends HTMLElement>({ parentRef, children, style, scale, align, options: { debounceDelay, ...optionsRest }, ...rest }: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null;
|
|
11
|
+
export declare function ParentsizeSVG<E extends HTMLElement>({ parentRef, children, options, ...rest }: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null;
|
|
14
12
|
export {};
|
|
15
13
|
//# sourceMappingURL=ParentsizeSVG.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParentsizeSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ParentsizeSVG/ParentsizeSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"ParentsizeSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ParentsizeSVG/ParentsizeSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIzE,KAAK,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/B,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACpE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;CACzC,GAAG,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC;AAExE,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,EAAE,EACnD,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAQ/D"}
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e}from"react/jsx-runtime";import{
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useParentSize as i}from"@cutting/use-get-parent-size";import t from"classnames";function r({height:i,width:t,children:r,origin:n={x:0,y:0},preserveAspectRatio:s="xMaxYMid meet",innerRef:a,className:o,...c}){const l=Math.ceil(t/(0===i?1:t/i));return e("div",{"data-testid":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:e("svg",{style:{overflow:"visible"},className:o,preserveAspectRatio:s,viewBox:`${n.x} ${n.y} ${t} ${l}`,ref:a,...c,children:r})})}function n({parentRef:t,children:n,options:s,...a}){const{width:o,height:c}=i(t,s);return e(r,{width:o,height:c,...a,children:n})}function s({y:i=0,x:r=0,transform:n,className:s,children:a,innerRef:o,...c}){return e("g",{ref:o,className:t("visx-group",s),transform:n||`translate(${r}, ${i})`,...c,children:a})}function a({from:i={x:0,y:0},to:r={x:1,y:1},fill:n="transparent",className:s,innerRef:a,...o}){const c=i.x===r.x||i.y===r.y;return e("line",{ref:a,className:t("visx-line",s),x1:i.x,y1:i.y,x2:r.x,y2:r.y,fill:n,shapeRendering:c?"crispEdges":"auto",...o})}export{s as Group,a as Line,n as ParentsizeSVG,r as ResponsiveSVG};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { PreserveAspectRatio, SVGAttributes } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport type ResponsiveSVGProps = SVGAttributes<{\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n children: ReactNode;\n}>;\n\nexport function ResponsiveSVG({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n ...props\n}: ResponsiveSVGProps): JSX.Element {\n const aspect = height === 0 ? 1 : width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-testid=\"cutting-svg-container\"\n style={{\n position: 'relative',\n overflow: 'visible',\n height: '1px',\n }}\n >\n <svg\n style={{ overflow: 'visible' }}\n className={className}\n preserveAspectRatio={preserveAspectRatio}\n viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n ref={innerRef}\n {...props}\n >\n {children}\n </svg>\n </div>\n );\n}\n","import type {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { PreserveAspectRatio, SVGAttributes } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport type ResponsiveSVGProps = SVGAttributes<{\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n children: ReactNode;\n}>;\n\nexport function ResponsiveSVG({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n ...props\n}: ResponsiveSVGProps): JSX.Element {\n const aspect = height === 0 ? 1 : width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-testid=\"cutting-svg-container\"\n style={{\n position: 'relative',\n overflow: 'visible',\n height: '1px',\n }}\n >\n <svg\n style={{ overflow: 'visible' }}\n className={className}\n preserveAspectRatio={preserveAspectRatio}\n viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n ref={innerRef}\n {...props}\n >\n {children}\n </svg>\n </div>\n );\n}\n","import type { PropsWithChildren, RefObject } from 'react';\nimport type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement = HTMLElement> = {\n parentRef: RefObject<E>;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n parentRef,\n children,\n options,\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(parentRef, options);\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n {children}\n </ResponsiveSVG>\n );\n}\n","import cx from 'classnames';\n\ntype GroupOnlyProps = {\n /** Top offset applied to `<g/>`. */\n y?: number;\n /** Left offset applied to `<g/>`. */\n x?: number;\n /** Override `x` and `y` to provide the entire `transform` string. */\n transform?: string;\n className?: string;\n children?: React.ReactNode;\n innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport function Group({\n y = 0,\n x = 0,\n transform,\n className,\n children,\n innerRef,\n ...restProps\n}: GroupProps): JSX.Element {\n return (\n <g\n ref={innerRef}\n className={cx('visx-group', className)}\n transform={transform || `translate(${x}, ${y})`}\n {...restProps}\n >\n {children}\n </g>\n );\n}\n","import cx from 'classnames';\nimport type { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n className?: string;\n innerRef?: React.Ref<SVGLineElement>;\n fill?: string;\n /** Starting x,y point of the line. */\n from?: Point;\n /** Ending x,y point of the line. */\n to?: Point;\n};\n\nexport function Line({\n from = { x: 0, y: 0 },\n to = { x: 1, y: 1 },\n fill = 'transparent',\n className,\n innerRef,\n ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element {\n const isRectilinear = from.x === to.x || from.y === to.y;\n\n return (\n <line\n ref={innerRef}\n className={cx('visx-line', className)}\n x1={from.x}\n y1={from.y}\n x2={to.x}\n y2={to.y}\n fill={fill}\n shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n {...restProps}\n />\n );\n}\n"],"names":["ResponsiveSVG","height","width","children","origin","x","y","preserveAspectRatio","innerRef","className","props","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","ParentsizeSVG","parentRef","options","rest","useParentSize","Group","transform","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"+HAmBgB,SAAAA,GAAcC,OAC5BA,EAAMC,MACNA,EAAKC,SACLA,EAAQC,OACRA,EAAS,CAAEC,EAAG,EAAGC,EAAG,GAAGC,oBACvBA,EAAsB,gBAAeC,SACrCA,EAAQC,UACRA,KACGC,IAEH,MAEMC,EAAiBC,KAAKC,KAAKX,GAFP,IAAXD,EAAe,EAAIC,EAAQD,IAI1C,OACEa,EAAA,MAAA,CAAA,cACc,wBACZC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVhB,OAAQ,OACTE,SAEDW,SACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,QAAS,GAAGd,EAAOC,KAAKD,EAAOE,KAAKJ,KAASS,IAC7CQ,IAAKX,KACDE,EAAKP,SAERA,KAIT,CCvCgB,SAAAiB,GAAqCC,UACnDA,EAASlB,SACTA,EAAQmB,QACRA,KACGC,IAEH,MAAMrB,MAAEA,EAAKD,OAAEA,GAAWuB,EAAcH,EAAWC,GAEnD,OACER,EAACd,EAAc,CAAAE,MAAOA,EAAOD,OAAQA,KAAYsB,WAC9CpB,GAGP,CCZM,SAAUsB,GAAMnB,EACpBA,EAAI,EAACD,EACLA,EAAI,EAACqB,UACLA,EAASjB,UACTA,EAASN,SACTA,EAAQK,SACRA,KACGmB,IAEH,OACEb,EAAA,IAAA,CACEK,IAAKX,EACLC,UAAWmB,EAAG,aAAcnB,GAC5BiB,UAAWA,GAAa,aAAarB,MAAMC,QACvCqB,EAASxB,SAEZA,GAGP,UCtBgB0B,GAAKC,KACnBA,EAAO,CAAEzB,EAAG,EAAGC,EAAG,GAAGyB,GACrBA,EAAK,CAAE1B,EAAG,EAAGC,EAAG,GAAG0B,KACnBA,EAAO,cAAavB,UACpBA,EAASD,SACTA,KACGmB,IAEH,MAAMM,EAAgBH,EAAKzB,IAAM0B,EAAG1B,GAAKyB,EAAKxB,IAAMyB,EAAGzB,EAEvD,OACEQ,EACE,OAAA,CAAAK,IAAKX,EACLC,UAAWmB,EAAG,YAAanB,GAC3ByB,GAAIJ,EAAKzB,EACT8B,GAAIL,EAAKxB,EACT8B,GAAIL,EAAG1B,EACPgC,GAAIN,EAAGzB,EACP0B,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,UAC3CN,GAGV"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { SVGAttributes as SvgAttributes } from 'react';
|
|
2
2
|
export type PreserveAspectRatioAlignment = 'xMinYMin' | 'xMidYMin' | 'xMaxYMin' | 'xMinYMid' | 'xMidYMid' | 'xMaxYMid' | 'xMinYMax' | 'xMidYMax' | 'xMaxYMax';
|
|
3
3
|
export type MeetOrSlice = 'meet' | 'slice';
|
|
4
|
-
export type PreserveAspectRatio = `${PreserveAspectRatioAlignment} ${MeetOrSlice}
|
|
4
|
+
export type PreserveAspectRatio = `${PreserveAspectRatioAlignment} ${MeetOrSlice}` | 'none';
|
|
5
5
|
export type AddSVGProps<Props, Element extends SVGElement> = Props & Omit<React.SVGProps<Element>, keyof Props>;
|
|
6
6
|
export interface Point {
|
|
7
7
|
x: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,4BAA4B,GACpC,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG,GAAG,4BAA4B,IAAI,WAAW,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,IAAI,aAAa,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,MAAM,4BAA4B,GACpC,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,GACV,UAAU,CAAC;AAEf,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG,GAAG,4BAA4B,IAAI,WAAW,EAAE,GAAG,MAAM,CAAC;AAE5F,MAAM,MAAM,WAAW,CAAC,KAAK,EAAE,OAAO,SAAS,UAAU,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC;AAEhH,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,GAC9B,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,qBAAqB,GAAG,WAAW,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cutting/svg",
|
|
3
|
-
"version": "4.52.
|
|
3
|
+
"version": "4.52.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/dagda1/cuttingedge.git"
|
|
@@ -18,18 +18,20 @@
|
|
|
18
18
|
"@cutting/util": "4.57.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
+
"@testing-library/dom": "^9.0.0",
|
|
21
22
|
"@testing-library/react": "^14.0.0",
|
|
22
23
|
"@testing-library/user-event": "14.4.3",
|
|
23
24
|
"@types/react": "18.0.28",
|
|
24
25
|
"@types/react-dom": "18.0.11",
|
|
25
26
|
"@vanilla-extract/css": "^1.9.5",
|
|
26
27
|
"@vanilla-extract/sprinkles": "1.5.1",
|
|
28
|
+
"d3-scale": "4.0.2",
|
|
27
29
|
"assert-ts": "0.3.4",
|
|
28
30
|
"eslint": "8.34.0",
|
|
29
31
|
"react": "18.2.0",
|
|
30
32
|
"react-dom": "18.2.0",
|
|
31
33
|
"typescript": "4.9.5",
|
|
32
|
-
"@cutting/component-library": "5.36.
|
|
34
|
+
"@cutting/component-library": "5.36.3",
|
|
33
35
|
"@cutting/devtools": "4.62.0",
|
|
34
36
|
"@cutting/eslint-config": "4.43.1",
|
|
35
37
|
"@cutting/tsconfig": "4.39.0",
|
|
@@ -28,20 +28,4 @@ describe('useParentSize', () => {
|
|
|
28
28
|
|
|
29
29
|
screen.getByTestId('cutting-svg-container');
|
|
30
30
|
});
|
|
31
|
-
|
|
32
|
-
it('should render a transform attribute when not aligned', () => {
|
|
33
|
-
wrap();
|
|
34
|
-
|
|
35
|
-
const svg = document.querySelector('svg') as SVGElement;
|
|
36
|
-
|
|
37
|
-
expect(svg.querySelector('g') as SVGGElement).toHaveAttribute('transform', 'translate(0,0) scale(1)');
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
it('should render a transform attribute when aligned', () => {
|
|
41
|
-
wrap({ align: 'center' });
|
|
42
|
-
|
|
43
|
-
const svg = document.querySelector('svg') as SVGElement;
|
|
44
|
-
|
|
45
|
-
expect(svg.querySelector('g') as SVGGElement).toHaveAttribute('transform', 'translate(0,-20) scale(1)');
|
|
46
|
-
});
|
|
47
31
|
});
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { PropsWithChildren, RefObject } from 'react';
|
|
2
2
|
import type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';
|
|
3
3
|
import type { UseParentSizeOptions } from '@cutting/use-get-parent-size';
|
|
4
|
-
import { useEffect } from 'react';
|
|
5
4
|
import { useParentSize } from '@cutting/use-get-parent-size';
|
|
6
5
|
import { ResponsiveSVG } from '../ResponsiveSVG/ResponsiveSVG';
|
|
7
6
|
|
|
@@ -9,51 +8,22 @@ type Align = 'none' | 'center';
|
|
|
9
8
|
|
|
10
9
|
export type ParentsizeSVGProps<E extends HTMLElement = HTMLElement> = {
|
|
11
10
|
parentRef: RefObject<E>;
|
|
12
|
-
style?: CSSProperties;
|
|
13
11
|
align?: Align;
|
|
14
12
|
scale?: number;
|
|
15
13
|
options?: Partial<UseParentSizeOptions>;
|
|
16
14
|
} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;
|
|
17
15
|
|
|
18
|
-
export const DefaultStyle: CSSProperties = {
|
|
19
|
-
display: 'flex',
|
|
20
|
-
flexDirection: 'column',
|
|
21
|
-
flexGrow: 1,
|
|
22
|
-
flexShrink: 1,
|
|
23
|
-
flexBasis: '0%',
|
|
24
|
-
overflow: 'hidden',
|
|
25
|
-
} as const;
|
|
26
|
-
|
|
27
16
|
export function ParentsizeSVG<E extends HTMLElement>({
|
|
28
17
|
parentRef,
|
|
29
18
|
children,
|
|
30
|
-
|
|
31
|
-
scale = 1,
|
|
32
|
-
align = 'none',
|
|
33
|
-
options: { debounceDelay = 50, ...optionsRest } = {},
|
|
19
|
+
options,
|
|
34
20
|
...rest
|
|
35
21
|
}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {
|
|
36
|
-
const { width, height } = useParentSize(parentRef,
|
|
37
|
-
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (!parentRef.current) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
for (const [key, value] of Object.entries(style)) {
|
|
44
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
45
|
-
parentRef.current.style[key as any] = value;
|
|
46
|
-
}
|
|
47
|
-
}, [parentRef, style]);
|
|
48
|
-
|
|
49
|
-
const transform =
|
|
50
|
-
align === 'center'
|
|
51
|
-
? `translate(${width / 2},${height / 2 - 20}) scale(${scale})`
|
|
52
|
-
: `translate(0,0) scale(${scale})`;
|
|
22
|
+
const { width, height } = useParentSize(parentRef, options);
|
|
53
23
|
|
|
54
24
|
return (
|
|
55
25
|
<ResponsiveSVG width={width} height={height} {...rest}>
|
|
56
|
-
|
|
26
|
+
{children}
|
|
57
27
|
</ResponsiveSVG>
|
|
58
28
|
);
|
|
59
29
|
}
|
package/src/types/types.ts
CHANGED
|
@@ -13,7 +13,7 @@ export type PreserveAspectRatioAlignment =
|
|
|
13
13
|
|
|
14
14
|
export type MeetOrSlice = 'meet' | 'slice';
|
|
15
15
|
|
|
16
|
-
export type PreserveAspectRatio = `${PreserveAspectRatioAlignment} ${MeetOrSlice}
|
|
16
|
+
export type PreserveAspectRatio = `${PreserveAspectRatioAlignment} ${MeetOrSlice}` | 'none';
|
|
17
17
|
|
|
18
18
|
export type AddSVGProps<Props, Element extends SVGElement> = Props & Omit<React.SVGProps<Element>, keyof Props>;
|
|
19
19
|
|