| 1 | {"version":3,"file":"Canvas.js","sourceRoot":"","sources":["../src/Canvas.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Platform } from '@unimodules/core';\nimport * as React from 'react';\nimport { findDOMNode } from 'react-dom';\nimport { LayoutChangeEvent, PixelRatio, StyleSheet, View, ViewProps } from 'react-native';\nimport createElement from 'react-native-web/dist/exports/createElement';\n\nfunction getElement(component) {\n try {\n return findDOMNode(component);\n } catch (e) {\n return component;\n }\n}\n\nfunction setRef<T>(refProp: React.Ref<T>, ref: T | null) {\n if (!refProp) return;\n\n if (typeof refProp === 'function') {\n refProp(ref);\n } else if ('current' in refProp) {\n // @ts-ignore\n refProp.current = ref;\n }\n}\n\nconst Canvas = React.forwardRef(\n (props: React.ComponentProps<typeof View>, ref: React.Ref<HTMLCanvasElement>) =>\n createElement('canvas', { ...props, ref })\n);\n\nconst CanvasWrapper: React.FunctionComponent<ViewProps & {\n canvasRef: React.Ref<HTMLCanvasElement>;\n}> = ({ pointerEvents, children, ...props }) => {\n const [size, setSize] = React.useState<{ width: number; height: number } | null>(null);\n\n const ref = React.useRef<View>(null);\n const _canvasRef = React.useRef<HTMLCanvasElement>(null);\n\n function updateCanvasSize(): void {\n const canvas = _canvasRef.current;\n // eslint-disable-next-line no-undef\n if (typeof HTMLCanvasElement !== 'undefined' && canvas instanceof HTMLCanvasElement) {\n const size = getSize();\n const scale = PixelRatio.get();\n\n canvas.style.width = `${size.width}px`;\n canvas.style.height = `${size.height}px`;\n\n canvas.width = size.width * scale;\n canvas.height = size.height * scale;\n }\n }\n\n function getSize(): { width: number; height: number } {\n if (size) {\n return size;\n } else if (!ref.current || !Platform.isDOMAvailable) {\n return { width: 0, height: 0 };\n }\n const element = getElement(ref.current);\n const { offsetWidth: width = 0, offsetHeight: height = 0 } = element;\n return { width, height };\n }\n\n function onLayout(event: LayoutChangeEvent): void {\n const {\n nativeEvent: {\n layout: { width, height },\n },\n } = event;\n\n if (width !== size?.width || height !== size.height) {\n setSize({ width, height });\n\n if (props.onLayout) {\n props.onLayout(event);\n }\n }\n }\n\n React.useEffect(() => {\n if (ref.current != null) {\n setSize(getSize());\n }\n }, [ref]);\n\n React.useEffect(() => {\n updateCanvasSize();\n }, [size]);\n\n React.useEffect(() => {\n const canvas = _canvasRef.current;\n if (canvas) {\n updateCanvasSize();\n }\n setRef(props.canvasRef, canvas);\n }, [_canvasRef]);\n\n return (\n <View {...props} pointerEvents=\"box-none\" ref={ref} onLayout={onLayout}>\n <Canvas ref={_canvasRef} pointerEvents={pointerEvents} style={StyleSheet.absoluteFill} />\n {children}\n </View>\n );\n};\n\nexport default CanvasWrapper;\n"]} |