upsetjs import { ISetCombinations , ISetLike , queryOverlap } from '@upsetjs/model' ; import React , { useCallback , useMemo } from 'react' ; import { exportSVG } from '../../exporter' ; import { exportDump , exportSharedLink } from '../../exporter/exportDump' ; import useHandler , { Handlers } from '../../hooks/useHandler' ; import type { UpSetBaseDataProps , UpSetExportOptions , UpSetProps , VennDiagramDataProps , VennDiagramFullProps , } from '../../interfaces' ; import { baseRules } from '../../rules' ; import { generateId } from '../../utils' ; import deriveVennSizeDependent , { VennDiagramSizeInfo } from '../derive/deriveVennSizeDependent' ; import deriveVennStyleDependent , { VennDiagramStyleInfo } from '../derive/deriveVennStyleDependent' ; export function useCreateCommon < T > ( p ) { const { queries = [ ] , fontSizes } = p ; const styleId = useMemo ( ( ) => p . id ? p . id : generateId ( [ p . fontFamily , fontSizes . valueLabel , fontSizes . legend , fontSizes . setLabel , fontSizes . title , fontSizes . exportLabel , fontSizes . description , p . textColor , p . color , p . hasSelectionColor , p . strokeColor , p . valueTextColor , p . selectionColor , p . opacity , p . hasSelectionOpacity , ] ) , [ p . id , p . fontFamily , fontSizes . valueLabel , fontSizes . legend , fontSizes . setLabel , fontSizes . title , fontSizes . exportLabel , fontSizes . description , p . textColor , p . color , p . hasSelectionColor , p . strokeColor , p . valueTextColor , p . selectionColor , p . opacity , p . hasSelectionOpacity , ] ) ; const styleInfo = useMemo ( ( ) => deriveVennStyleDependent ( p . theme , p . styles , p . classNames , styleId , p . selectionColor , p . title , p . description , p . tooltips ) , [ p . theme , p . styles , p . classNames , styleId , p . selectionColor , p . title , p . description , p . tooltips ] ) ; const sizeInfo = useMemo ( ( ) => deriveVennSizeDependent ( p . width , p . height , p . padding , p . id ) , [ p . width , p . height , p . padding , p . id ] ) ; const h = useHandler ( p ) ; const qs = React . useMemo ( ( ) => queries . map ( ( q ) => queryOverlap ( q , 'intersection' , p . toElemKey ) ) , [ queries , p . toElemKey ] ) ; const rulesHelper = baseRules ( styleId , p , p . fontFamily , fontSizes ) ; return { styleId , size : sizeInfo , style : styleInfo , h , qs , rulesHelper , } ; } export declare type CreateCommon = { selectionName ? : string ; styleId : string ; size : VennDiagramSizeInfo ; style : VennDiagramStyleInfo ; h : Handlers ; exportButtons : UpSetExportOptions | boolean ; } ; export function useExportChart ( dataInfo , props , mode ) { return useCallback ( ( evt ) => { const svg = evt . currentTarget . closest ( 'svg' ) as SVGSVGElement ; const type = ( evt . currentTarget . dataset . type || 'png' ) as 'svg' | 'png' | 'dump' | 'share' ; switch ( type ) { case 'dump' : exportDump ( svg , props , dataInfo , mode ) ; break ; case 'share' : exportSharedLink ( props , dataInfo , mode ) ; break ; case 'svg' : case 'png' : exportSVG ( svg , { type , toRemove : `.${ evt . currentTarget . getAttribute ( 'class' ) }` , } ) ; } } , [ dataInfo , props , mode ] ) ; }