@wordpress/components
Version:
UI components for WordPress.
8 lines (7 loc) • 6.87 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../src/angle-picker-control/angle-circle.tsx", "../../src/angle-picker-control/style.module.scss"],
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __experimentalUseDragging as useDragging } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.module.scss';\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nfunction AngleCircle({\n value,\n onChange,\n className,\n ...props\n}) {\n const angleCircleRef = useRef(null);\n const angleCircleCenterRef = useRef(undefined);\n const previousCursorValueRef = useRef(undefined);\n const setAngleCircleCenter = () => {\n if (angleCircleRef.current === null) {\n return;\n }\n const rect = angleCircleRef.current.getBoundingClientRect();\n angleCircleCenterRef.current = {\n x: rect.x + rect.width / 2,\n y: rect.y + rect.height / 2\n };\n };\n const changeAngleToPosition = event => {\n if (event === undefined) {\n return;\n }\n\n // Prevent (drag) mouse events from selecting and accidentally\n // triggering actions from other elements.\n event.preventDefault();\n // Input control needs to lose focus and by preventDefault above, it doesn't.\n event.target?.focus();\n if (angleCircleCenterRef.current !== undefined && onChange !== undefined) {\n const {\n x: centerX,\n y: centerY\n } = angleCircleCenterRef.current;\n onChange(getAngle(centerX, centerY, event.clientX, event.clientY));\n }\n };\n const {\n startDrag,\n isDragging\n } = useDragging({\n onDragStart: event => {\n setAngleCircleCenter();\n changeAngleToPosition(event);\n },\n onDragMove: changeAngleToPosition,\n onDragEnd: changeAngleToPosition\n });\n useEffect(() => {\n if (isDragging) {\n if (previousCursorValueRef.current === undefined) {\n previousCursorValueRef.current = document.body.style.cursor;\n }\n document.body.style.cursor = 'grabbing';\n } else {\n document.body.style.cursor = previousCursorValueRef.current || '';\n previousCursorValueRef.current = undefined;\n }\n }, [isDragging]);\n return (\n /*#__PURE__*/\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n _jsx(\"div\", {\n ref: angleCircleRef,\n onMouseDown: startDrag,\n className: clsx('components-angle-picker-control__angle-circle', styles['circle-root'], className),\n ...props,\n children: /*#__PURE__*/_jsx(\"div\", {\n style: value ? {\n transform: `rotate(${value}deg)`\n } : undefined,\n className: clsx('components-angle-picker-control__angle-circle-indicator-wrapper', styles['circle-indicator-wrapper']),\n tabIndex: -1,\n children: /*#__PURE__*/_jsx(\"div\", {\n className: clsx('components-angle-picker-control__angle-circle-indicator', styles['circle-indicator'])\n })\n })\n })\n );\n}\nfunction getAngle(centerX, centerY, pointX, pointY) {\n const y = pointY - centerY;\n const x = pointX - centerX;\n const angleInRadians = Math.atan2(y, x);\n const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;\n if (angleInDeg < 0) {\n return 360 + angleInDeg;\n }\n return angleInDeg;\n}\nexport default AngleCircle;", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='e91ec3f005']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"e91ec3f005\");\n\tstyle.appendChild(document.createTextNode(\"._8f57b8d483c51fbe__circle-root{border:1px solid var(--wp-components-color-gray-600,#949494);border-radius:50%;box-sizing:border-box;cursor:grab;height:32px;overflow:hidden;width:32px}._8f57b8d483c51fbe__circle-root:active{cursor:grabbing}.b1bae984ac10fcc3__circle-indicator-wrapper{box-sizing:border-box;height:100%;position:relative;width:100%}.b1bae984ac10fcc3__circle-indicator-wrapper:focus-visible{outline:none}._6d2fe0a2cbb31bf0__circle-indicator{background:var(--wp-components-color-accent,var(--wp-admin-theme-color,#3858e9));border-radius:50%;box-sizing:border-box;display:block;height:6px;left:50%;position:absolute;top:4px;transform:translateX(-50%);width:6px}\"));\n\tdocument.head.appendChild(style);\n}\nexport default {\"circle-root\":\"_8f57b8d483c51fbe__circle-root\",\"circle-indicator-wrapper\":\"b1bae984ac10fcc3__circle-indicator-wrapper\",\"circle-indicator\":\"_6d2fe0a2cbb31bf0__circle-indicator\"};\n"],
"mappings": "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",
"names": ["useDragging", "_jsx", "clsx"]
}