@cutting/svg 4.29.1 → 4.30.0

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/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @cutting/svg
2
2
 
3
+ ## 4.30.0
4
+
5
+ ### Minor Changes
6
+
7
+ - Make innerRef Ref
8
+
3
9
  ## 4.29.1
4
10
 
5
11
  ### Patch Changes
@@ -1,4 +1,4 @@
1
- import type { FC, RefObject } from 'react';
1
+ import type { FC, Ref } from 'react';
2
2
  import { PreserveAspectRatio } from '../../types/types';
3
3
  export interface Point {
4
4
  x: number;
@@ -9,7 +9,7 @@ export interface ResponsiveSVGProps {
9
9
  height: number;
10
10
  origin?: Point;
11
11
  preserveAspectRatio?: PreserveAspectRatio;
12
- innerRef?: RefObject<SVGSVGElement>;
12
+ innerRef?: Ref<SVGSVGElement>;
13
13
  className?: string;
14
14
  hide?: boolean;
15
15
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
1
+ {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"svg.cjs.development.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 { FC, RefObject } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: RefObject<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","aspect","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","key","value","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkBaA,aAAa,GAA2B,SAAxCA,aAAwC;MACnDC,cAAAA;MACAC,aAAAA;MACAC,gBAAAA;yBACAC;MAAAA,kCAAS;AAAEC,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE;AAAX;mCACTC;MAAAA,yDAAsB;MACtBC,gBAAAA;MACAC,iBAAAA;AAEA,MAAMC,MAAM,GAAGR,KAAK,GAAGD,MAAvB;AAEA,MAAMU,cAAc,GAAGC,IAAI,CAACC,IAAL,CAAUX,KAAK,GAAGQ,MAAlB,CAAvB;AAEA,SACEI;qBACgB;AACdC,IAAAA,KAAK,EAAE;AACLC,MAAAA,QAAQ,EAAE,UADL;AAELC,MAAAA,QAAQ,EAAE,SAFL;AAGLhB,MAAAA,MAAM,EAAE;AAHH;;cAMPa;AACEC,MAAAA,KAAK,EAAE;AAAEE,QAAAA,QAAQ,EAAE;AAAZ;AACPR,MAAAA,SAAS,EAAEA;AACXF,MAAAA,mBAAmB,EAAEA;AACrBW,MAAAA,OAAO,YAAKd,MAAM,CAACC,CAAZ,cAAiBD,MAAM,CAACE,CAAxB,cAA6BJ,KAA7B,cAAsCS,cAAtC;AACPQ,MAAAA,GAAG,EAAEX;;gBAEJL;;aAhBP;AAoBD;;;;ACpCM,IAAMiB,YAAY,GAAkB;AACzCC,EAAAA,OAAO,EAAE,MADgC;AAEzCC,EAAAA,aAAa,EAAE,QAF0B;AAGzCC,EAAAA,QAAQ,EAAE,CAH+B;AAIzCC,EAAAA,UAAU,EAAE,CAJ6B;AAKzCC,EAAAA,SAAS,EAAE,IAL8B;AAMzCR,EAAAA,QAAQ,EAAE;AAN+B,CAApC;SASSS;MACdC,kBAAAA;MACAxB,gBAAAA;wBACAY;MAAAA,gCAAQK;wBACRQ;MAAAA,gCAAQ;wBACRC;MAAAA,gCAAQ;0BACRC;2CAAkD;;2CAAvCC;MAAAA,mDAAgB;MAAOC;MAC/BC;;AAEH,uBAA0BC,8BAAa,CAACP,UAAD;AAAeI,IAAAA,aAAa,EAAbA;AAAf,KAAiCC,WAAjC,EAAvC;AAAA,MAAQ9B,KAAR,kBAAQA,KAAR;AAAA,MAAeD,MAAf,kBAAeA,MAAf;;AAEAkC,EAAAA,eAAS,CAAC;AACR,QAAI,CAACR,UAAU,CAACS,OAAhB,EAAyB;AACvB;AACD;;AAED,uCAA2BC,MAAM,CAACC,OAAP,CAAevB,KAAf,CAA3B,qCAAkD;AAA7C;AAAA,UAAOwB,GAAP;AAAA,UAAYC,KAAZ;;AACH;AACAb,MAAAA,UAAU,CAACS,OAAX,CAAmBrB,KAAnB,CAAyBwB,GAAzB,IAAuCC,KAAvC;AACD;AACF,GATQ,EASN,CAACb,UAAD,EAAaZ,KAAb,CATM,CAAT;AAWA,MAAM0B,SAAS,GACbZ,KAAK,KAAK,QAAV,uBAAkC3B,KAAK,GAAG,CAA1C,cAA+CD,MAAM,GAAG,CAAT,GAAa,EAA5D,qBAAyE2B,KAAzE,8BAAkGA,KAAlG,MADF;AAGA,SACEd,eAACd;AAAcE,IAAAA,KAAK,EAAEA;AAAOD,IAAAA,MAAM,EAAEA;KAAYgC;cAC/CnB;AAAG2B,MAAAA,SAAS,EAAEA;;gBAAYtC;;aAF9B;AAKD;;;ICrCYuC,KAAK,GAAmB,SAAxBA,KAAwB;oBACnCpC;MAAAA,wBAAI;oBACJD;MAAAA,wBAAI;MACJoC,iBAAAA;MACAhC,iBAAAA;MACAN,gBAAAA;MACAK,gBAAAA;MACGmC;;AAEH,SACE7B;AACEK,IAAAA,GAAG,EAAEX;AACLC,IAAAA,SAAS,EAAEmC,sBAAE,CAAC,YAAD,EAAenC,SAAf;AACbgC,IAAAA,SAAS,EAAEA,SAAS,wBAAiBpC,CAAjB,eAAuBC,CAAvB;KAChBqC;cAEHxC;aAPL;AAUD;;;ICtBY0C,IAAI,GAAkB,SAAtBA,IAAsB;uBACjCC;MAAAA,8BAAO;AAAEzC,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE;AAAX;qBACPyC;MAAAA,0BAAK;AAAE1C,IAAAA,CAAC,EAAE,CAAL;AAAQC,IAAAA,CAAC,EAAE;AAAX;uBACL0C;MAAAA,8BAAO;MACPvC,iBAAAA;MACAD,gBAAAA;MACGmC;;AAEH,MAAMM,aAAa,GAAGH,IAAI,CAACzC,CAAL,KAAW0C,EAAE,CAAC1C,CAAd,IAAmByC,IAAI,CAACxC,CAAL,KAAWyC,EAAE,CAACzC,CAAvD;AAEA,SACEQ;AACEK,IAAAA,GAAG,EAAEX;AACLC,IAAAA,SAAS,EAAEmC,sBAAE,CAAC,WAAD,EAAcnC,SAAd;AACbyC,IAAAA,EAAE,EAAEJ,IAAI,CAACzC;AACT8C,IAAAA,EAAE,EAAEL,IAAI,CAACxC;AACT8C,IAAAA,EAAE,EAAEL,EAAE,CAAC1C;AACPgD,IAAAA,EAAE,EAAEN,EAAE,CAACzC;AACP0C,IAAAA,IAAI,EAAEA;AACNM,IAAAA,cAAc,EAAEL,aAAa,GAAG,YAAH,GAAkB;KAC3CN,mBAVR;AAaD;;;;;;;"}
1
+ {"version":3,"file":"svg.cjs.development.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 { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","aspect","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","key","value","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"svg.cjs.production.min.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 { FC, RefObject } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: RefObject<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"ymBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,gICJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,0BCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,kDFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}
1
+ {"version":3,"file":"svg.cjs.production.min.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 { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"ymBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,gICJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,0BCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,kDFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}
@@ -1,4 +1,4 @@
1
- import type { FC, RefObject } from 'react';
1
+ import type { FC, Ref } from 'react';
2
2
  import { PreserveAspectRatio } from '../../types/types';
3
3
  export interface Point {
4
4
  x: number;
@@ -9,7 +9,7 @@ export interface ResponsiveSVGProps {
9
9
  height: number;
10
10
  origin?: Point;
11
11
  preserveAspectRatio?: PreserveAspectRatio;
12
- innerRef?: RefObject<SVGSVGElement>;
12
+ innerRef?: Ref<SVGSVGElement>;
13
13
  className?: string;
14
14
  hide?: boolean;
15
15
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
1
+ {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"svg.esm.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 { FC, RefObject } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: RefObject<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"6gBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,uCACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,uBACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,mBAGIS,SACdC,IAAAA,WACAxB,IAAAA,aACAY,MAAAA,aAAQK,QACRQ,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,SAC/BC,WAEuBC,EAAcP,KAAcI,cAAAA,GAAkBC,IAAhE9B,IAAAA,MAAOW,IAAAA,OAEfsB,GAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQvB,kBAAQ,iBAEhDY,EAAWS,QAAQrB,oBAEpB,CAACY,EAAYZ,QAEVwB,EACM,WAAVV,sBAAkC3B,EAAQ,cAAKW,EAAS,EAAI,sBAAae,4BAAyBA,cAGlGd,EAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAYoB,YAC/CnB,qBAAGyB,UAAWA,aAAYpC,oFClCnBqC,EAAwB,oBACnClC,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJkC,IAAAA,UACA9B,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGiC,gBAGD3B,qBACEK,IAAKX,EACLC,UAAWiC,EAAG,aAAcjC,GAC5B8B,UAAWA,uBAA0BlC,eAAMC,QACvCmC,YAEHtC,2DCnBMwC,EAAsB,oBACjCC,KAAAA,aAAO,CAAEvC,EAAG,EAAGC,EAAG,SAClBuC,GAAAA,aAAK,CAAExC,EAAG,EAAGC,EAAG,SAChBwC,KAAAA,aAAO,gBACPrC,IAAAA,UACAD,IAAAA,SACGiC,SAEGM,EAAgBH,EAAKvC,IAAMwC,EAAGxC,GAAKuC,EAAKtC,IAAMuC,EAAGvC,SAGrDQ,wBACEK,IAAKX,EACLC,UAAWiC,EAAG,YAAajC,GAC3BuC,GAAIJ,EAAKvC,EACT4C,GAAIL,EAAKtC,EACT4C,GAAIL,EAAGxC,EACP8C,GAAIN,EAAGvC,EACPwC,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CN"}
1
+ {"version":3,"file":"svg.esm.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 { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"6gBAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,uCACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,uBACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,mBAGIS,SACdC,IAAAA,WACAxB,IAAAA,aACAY,MAAAA,aAAQK,QACRQ,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,SAC/BC,WAEuBC,EAAcP,KAAcI,cAAAA,GAAkBC,IAAhE9B,IAAAA,MAAOW,IAAAA,OAEfsB,GAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQvB,kBAAQ,iBAEhDY,EAAWS,QAAQrB,oBAEpB,CAACY,EAAYZ,QAEVwB,EACM,WAAVV,sBAAkC3B,EAAQ,cAAKW,EAAS,EAAI,sBAAae,4BAAyBA,cAGlGd,EAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAYoB,YAC/CnB,qBAAGyB,UAAWA,aAAYpC,oFClCnBqC,EAAwB,oBACnClC,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJkC,IAAAA,UACA9B,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGiC,gBAGD3B,qBACEK,IAAKX,EACLC,UAAWiC,EAAG,aAAcjC,GAC5B8B,UAAWA,uBAA0BlC,eAAMC,QACvCmC,YAEHtC,2DCnBMwC,EAAsB,oBACjCC,KAAAA,aAAO,CAAEvC,EAAG,EAAGC,EAAG,SAClBuC,GAAAA,aAAK,CAAExC,EAAG,EAAGC,EAAG,SAChBwC,KAAAA,aAAO,gBACPrC,IAAAA,UACAD,IAAAA,SACGiC,SAEGM,EAAgBH,EAAKvC,IAAMwC,EAAGxC,GAAKuC,EAAKtC,IAAMuC,EAAGvC,SAGrDQ,wBACEK,IAAKX,EACLC,UAAWiC,EAAG,YAAajC,GAC3BuC,GAAIJ,EAAKvC,EACT4C,GAAIL,EAAKtC,EACT4C,GAAIL,EAAGxC,EACP8C,GAAIN,EAAGvC,EACPwC,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CN"}
@@ -1,4 +1,4 @@
1
- import type { FC, RefObject } from 'react';
1
+ import type { FC, Ref } from 'react';
2
2
  import { PreserveAspectRatio } from '../../types/types';
3
3
  export interface Point {
4
4
  x: number;
@@ -9,7 +9,7 @@ export interface ResponsiveSVGProps {
9
9
  height: number;
10
10
  origin?: Point;
11
11
  preserveAspectRatio?: PreserveAspectRatio;
12
- innerRef?: RefObject<SVGSVGElement>;
12
+ innerRef?: Ref<SVGSVGElement>;
13
13
  className?: string;
14
14
  hide?: boolean;
15
15
  }
@@ -1 +1 @@
1
- {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
1
+ {"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiChD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"svg.umd.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 { FC, RefObject } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: RefObject<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"wkCAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,0HCJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,oBCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,4CFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}
1
+ {"version":3,"file":"svg.umd.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 { FC, Ref } from 'react';\nimport { PreserveAspectRatio } from '../../types/types';\n\nexport interface Point {\n x: number;\n y: number;\n}\n\nexport interface ResponsiveSVGProps {\n width: number;\n height: number;\n origin?: Point;\n preserveAspectRatio?: PreserveAspectRatio;\n innerRef?: Ref<SVGSVGElement>;\n className?: string;\n hide?: boolean;\n}\n\nexport const ResponsiveSVG: FC<ResponsiveSVGProps> = ({\n height,\n width,\n children,\n origin = { x: 0, y: 0 },\n preserveAspectRatio = 'xMaxYMid meet',\n innerRef,\n className,\n}) => {\n const aspect = width / height;\n\n const adjustedHeight = Math.ceil(width / aspect);\n\n return (\n <div\n data-selector=\"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 >\n {children}\n </svg>\n </div>\n );\n};\n","import { CSSProperties, PropsWithChildren, RefObject, useEffect } from 'react';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG, ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement> = {\n elementRef: RefObject<E>;\n style?: CSSProperties;\n align?: Align;\n scale?: number;\n options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: '0%',\n overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n elementRef,\n children,\n style = DefaultStyle,\n scale = 1,\n align = 'none',\n options: { debounceDelay = 50, ...optionsRest } = {},\n ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n const { width, height } = useParentSize(elementRef, { debounceDelay, ...optionsRest });\n\n useEffect(() => {\n if (!elementRef.current) {\n return;\n }\n\n for (const [key, value] of Object.entries(style)) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n elementRef.current.style[key as any] = value;\n }\n }, [elementRef, style]);\n\n const transform =\n align === 'center' ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})` : `0,0) scale(${scale})`;\n\n return (\n <ResponsiveSVG width={width} height={height} {...rest}>\n <g transform={transform}>{children}</g>\n </ResponsiveSVG>\n );\n}\n","import type { FC } from 'react';\nimport 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 const Group: FC<GroupProps> = ({\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 type { FC } from 'react';\nimport cx from 'classnames';\nimport { 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 const Line: FC<LineProps> = ({\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","width","children","origin","x","y","preserveAspectRatio","innerRef","className","adjustedHeight","Math","ceil","height","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","transform","restProps","cx","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering","elementRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","Object","entries"],"mappings":"wkCAkBaA,EAAwC,gBAEnDC,IAAAA,MACAC,IAAAA,aACAC,OAAAA,aAAS,CAAEC,EAAG,EAAGC,EAAG,SACpBC,oBAAAA,aAAsB,kBACtBC,IAAAA,SACAC,IAAAA,UAIMC,EAAiBC,KAAKC,KAAKV,GAFlBA,IARfW,gBAaEC,2CACgB,wBACdC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVJ,OAAQ,kBAGVC,2BACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,kBAAYd,EAAOC,cAAKD,EAAOE,cAAKJ,cAASQ,GAC7CS,IAAKX,aAEJL,yGChCIiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,0HCJyB,oBACnCX,EAAAA,aAAI,QACJD,EAAAA,aAAI,IACJqB,IAAAA,UACAjB,IAAAA,UACAN,IAAAA,SACAK,IAAAA,SACGmB,wBAGDb,yBACEK,IAAKX,EACLC,UAAWmB,UAAG,aAAcnB,GAC5BiB,UAAWA,uBAA0BrB,eAAMC,QACvCqB,YAEHxB,oBCnB4B,oBACjC0B,KAAAA,aAAO,CAAExB,EAAG,EAAGC,EAAG,SAClBwB,GAAAA,aAAK,CAAEzB,EAAG,EAAGC,EAAG,SAChByB,KAAAA,aAAO,gBACPtB,IAAAA,UACAD,IAAAA,SACGmB,iBAEGK,EAAgBH,EAAKxB,IAAMyB,EAAGzB,GAAKwB,EAAKvB,IAAMwB,EAAGxB,SAGrDQ,4BACEK,IAAKX,EACLC,UAAWmB,UAAG,YAAanB,GAC3BwB,GAAIJ,EAAKxB,EACT6B,GAAIL,EAAKvB,EACT6B,GAAIL,EAAGzB,EACP+B,GAAIN,EAAGxB,EACPyB,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,QAC3CL,4CFTRW,IAAAA,WACAnC,IAAAA,aACAY,MAAAA,aAAQK,QACRmB,MAAAA,aAAQ,QACRC,MAAAA,aAAQ,aACRC,wBAAkD,MAAvCC,cAAAA,aAAgB,KAAOC,iBAC/BC,mBAEuBC,gBAAcP,aAAcI,cAAAA,GAAkBC,IAAhEzC,IAAAA,MAAOW,IAAAA,OAEfiC,aAAU,cACHR,EAAWS,sBAIWC,OAAOC,QAAQlC,kBAAQ,yBAEhDuB,EAAWS,QAAQhC,oBAEpB,CAACuB,EAAYvB,QAEVW,EACM,WAAVc,sBAAkCtC,EAAQ,cAAKW,EAAS,EAAI,sBAAa0B,4BAAyBA,cAGlGzB,MAACb,iBAAcC,MAAOA,EAAOW,OAAQA,GAAY+B,YAC/C9B,yBAAGY,UAAWA,aAAYvB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cutting/svg",
3
- "version": "4.29.1",
3
+ "version": "4.30.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/dagda1/cuttingedge.git"
@@ -1,4 +1,4 @@
1
- import type { FC, RefObject } from 'react';
1
+ import type { FC, Ref } from 'react';
2
2
  import { PreserveAspectRatio } from '../../types/types';
3
3
 
4
4
  export interface Point {
@@ -11,7 +11,7 @@ export interface ResponsiveSVGProps {
11
11
  height: number;
12
12
  origin?: Point;
13
13
  preserveAspectRatio?: PreserveAspectRatio;
14
- innerRef?: RefObject<SVGSVGElement>;
14
+ innerRef?: Ref<SVGSVGElement>;
15
15
  className?: string;
16
16
  hide?: boolean;
17
17
  }