1 line
26 KiB
JSON
1 line
26 KiB
JSON
|
{"ast":null,"code":"\"use client\";\n\nimport _toConsumableArray from \"@babel/runtime/helpers/esm/toConsumableArray\";\nimport React, { useEffect } from 'react';\nimport { useMutateObserver } from '@rc-component/mutate-observer';\nimport classNames from 'classnames';\nimport { useEvent } from 'rc-util';\nimport { useToken } from '../theme/internal';\nimport WatermarkContext from './context';\nimport useClips, { FontGap } from './useClips';\nimport useRafDebounce from './useRafDebounce';\nimport useWatermark from './useWatermark';\nimport { getPixelRatio, reRendering } from './utils';\n/**\n * Only return `next` when size changed.\n * This is only used for elements compare, not a shallow equal!\n */\nfunction getSizeDiff(prev, next) {\n return prev.size === next.size ? prev : next;\n}\nconst DEFAULT_GAP_X = 100;\nconst DEFAULT_GAP_Y = 100;\nconst fixedStyle = {\n position: 'relative',\n overflow: 'hidden'\n};\nconst Watermark = props => {\n var _a, _b;\n const {\n /**\n * The antd content layer zIndex is basically below 10\n * https://github.com/ant-design/ant-design/blob/6192403b2ce517c017f9e58a32d58774921c10cd/components/style/themes/default.less#L335\n */\n zIndex = 9,\n rotate = -22,\n width,\n height,\n image,\n content,\n font = {},\n style,\n className,\n rootClassName,\n gap = [DEFAULT_GAP_X, DEFAULT_GAP_Y],\n offset,\n children,\n inherit = true\n } = props;\n const mergedStyle = Object.assign(Object.assign({}, fixedStyle), style);\n const [, token] = useToken();\n const {\n color = token.colorFill,\n fontSize = token.fontSizeLG,\n fontWeight = 'normal',\n fontStyle = 'normal',\n fontFamily = 'sans-serif',\n textAlign = 'center'\n } = font;\n const [gapX = DEFAULT_GAP_X, gapY = DEFAULT_GAP_Y] = gap;\n const gapXCenter = gapX / 2;\n const gapYCenter = gapY / 2;\n const offsetLeft = (_a = offset === null || offset === void 0 ? void 0 : offset[0]) !== null && _a !== void 0 ? _a : gapXCenter;\n const offsetTop = (_b = offset === null || offset === void 0 ? void 0 : offset[1]) !== null && _b !== void 0 ? _b : gapYCenter;\n const markStyle = React.useMemo(() => {\n const mergedMarkStyle = {\n zIndex,\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n pointerEvents: 'none',\n backgroundRepeat: 'repeat'\n };\n /** Calculate the style of the offset */\n let positionLeft = offsetLeft - gapXCenter;\n let positionTop = offsetTop - gapYCenter;\n if (positionLeft > 0) {\n mergedMarkStyle.left = `${positionLeft}px`;\n mergedMarkStyle.width = `calc(100% - ${positionLeft}px)`;\n positionLeft = 0;\n }\n if (positionTop > 0) {\n mergedMarkStyle.top = `${positionTop}px`;\n mergedMarkStyle.height = `calc(100% - ${positionTop}px)`;\n positionTop = 0;\n }\n mergedMarkStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`;\n return mergedMarkStyle;\n }, [zIndex, offsetLeft, gapXCenter, offsetTop, gapYCenter]);\n const [container, setContainer] = React.useState();\n // Used for nest case like Modal, Drawer\n const [subElements, setSubElements] = React.useState(new Set());\n // Nest elements should also support watermark\n const targetElements = React.useMemo(() => {\n const list = container ? [container] : [];\n return [].concat(list, _toConsumableArray(Array.from(subElements)));\n }, [container, subElements]);\n // ============================ Content =============================\n /**\n * Get the width and height of the watermark. The default values are as follows\n * Image: [120, 64]; Content: It's calculated by content;\n */\n const getMarkSize = ctx => {\n let defaultWidth = 120;\n let defaultHeight = 64;\n if (!image && ctx.measureText) {\n ctx.font = `${Number(fontSize)}px ${fontFamily}`;\n const contents = Array.isArray(content) ? content : [content];\n const sizes = contents.map(item => {\n const metrics = ctx.measureText(item);\n return
|