e8fbfb14c1
Add coexistence checks to all enqueue methods to prevent loading both React and Grid.js assets simultaneously. Changes: - ReactAdmin.php: Only enqueue React assets when ?react=1 - Init.php: Skip Grid.js when React active on admin pages - Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0 - Customer.php, Product.php, License.php: Add coexistence checks Now the toggle between Classic and React versions works correctly. Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
96 lines
2.8 KiB
JavaScript
96 lines
2.8 KiB
JavaScript
import { createElement } from "react";
|
|
/**
|
|
* WordPress dependencies
|
|
*/
|
|
import { useEffect, useRef } from '@wordpress/element';
|
|
import { __experimentalUseDragging as useDragging } from '@wordpress/compose';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { CircleRoot, CircleIndicatorWrapper, CircleIndicator } from './styles/angle-picker-control-styles';
|
|
function AngleCircle({
|
|
value,
|
|
onChange,
|
|
...props
|
|
}) {
|
|
const angleCircleRef = useRef(null);
|
|
const angleCircleCenter = useRef();
|
|
const previousCursorValue = useRef();
|
|
const setAngleCircleCenter = () => {
|
|
if (angleCircleRef.current === null) {
|
|
return;
|
|
}
|
|
const rect = angleCircleRef.current.getBoundingClientRect();
|
|
angleCircleCenter.current = {
|
|
x: rect.x + rect.width / 2,
|
|
y: rect.y + rect.height / 2
|
|
};
|
|
};
|
|
const changeAngleToPosition = event => {
|
|
if (event === undefined) {
|
|
return;
|
|
}
|
|
|
|
// Prevent (drag) mouse events from selecting and accidentally
|
|
// triggering actions from other elements.
|
|
event.preventDefault();
|
|
// Input control needs to lose focus and by preventDefault above, it doesn't.
|
|
event.target?.focus();
|
|
if (angleCircleCenter.current !== undefined && onChange !== undefined) {
|
|
const {
|
|
x: centerX,
|
|
y: centerY
|
|
} = angleCircleCenter.current;
|
|
onChange(getAngle(centerX, centerY, event.clientX, event.clientY));
|
|
}
|
|
};
|
|
const {
|
|
startDrag,
|
|
isDragging
|
|
} = useDragging({
|
|
onDragStart: event => {
|
|
setAngleCircleCenter();
|
|
changeAngleToPosition(event);
|
|
},
|
|
onDragMove: changeAngleToPosition,
|
|
onDragEnd: changeAngleToPosition
|
|
});
|
|
useEffect(() => {
|
|
if (isDragging) {
|
|
if (previousCursorValue.current === undefined) {
|
|
previousCursorValue.current = document.body.style.cursor;
|
|
}
|
|
document.body.style.cursor = 'grabbing';
|
|
} else {
|
|
document.body.style.cursor = previousCursorValue.current || '';
|
|
previousCursorValue.current = undefined;
|
|
}
|
|
}, [isDragging]);
|
|
return createElement(CircleRoot, {
|
|
ref: angleCircleRef,
|
|
onMouseDown: startDrag,
|
|
className: "components-angle-picker-control__angle-circle",
|
|
...props
|
|
}, createElement(CircleIndicatorWrapper, {
|
|
style: value ? {
|
|
transform: `rotate(${value}deg)`
|
|
} : undefined,
|
|
className: "components-angle-picker-control__angle-circle-indicator-wrapper",
|
|
tabIndex: -1
|
|
}, createElement(CircleIndicator, {
|
|
className: "components-angle-picker-control__angle-circle-indicator"
|
|
})));
|
|
}
|
|
function getAngle(centerX, centerY, pointX, pointY) {
|
|
const y = pointY - centerY;
|
|
const x = pointX - centerX;
|
|
const angleInRadians = Math.atan2(y, x);
|
|
const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90;
|
|
if (angleInDeg < 0) {
|
|
return 360 + angleInDeg;
|
|
}
|
|
return angleInDeg;
|
|
}
|
|
export default AngleCircle;
|
|
//# sourceMappingURL=angle-circle.js.map
|