104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
import {RESOLUTION} from '@/util/constants.js';
|
|
|
|
import styles from './dialogue-caret.module.css';
|
|
|
|
const CARET_SIZE = 18;
|
|
|
|
export default function DialogueCaret({
|
|
camera,
|
|
dialogue,
|
|
dimensions,
|
|
scale,
|
|
}) {
|
|
const origin = 'function' === typeof dialogue.origin
|
|
? dialogue.origin()
|
|
: dialogue.origin || {x: 0, y: 0};
|
|
let position = 'function' === typeof dialogue.position
|
|
? dialogue.position()
|
|
: dialogue.position || {x: 0, y: 0};
|
|
position = {
|
|
x: position.x + dialogue.offset.x,
|
|
y: position.y + dialogue.offset.y,
|
|
};
|
|
const bounds = {
|
|
x: dimensions.w / (2 * scale),
|
|
y: dimensions.h / (2 * scale),
|
|
};
|
|
const left = Math.max(
|
|
Math.min(
|
|
position.x * scale,
|
|
RESOLUTION.x - bounds.x * scale - 16 + camera.x,
|
|
),
|
|
bounds.x * scale + 16 + camera.x,
|
|
);
|
|
const top = Math.max(
|
|
Math.min(
|
|
position.y * scale - dimensions.h / 2,
|
|
RESOLUTION.y - bounds.y * scale - 16 + camera.y,
|
|
),
|
|
bounds.y * scale + 16 + camera.y,
|
|
);
|
|
const offsetPosition = {
|
|
x: ((position.x * scale) - left) / scale,
|
|
y: ((position.y * scale) - top) / scale,
|
|
};
|
|
const difference = {
|
|
x: origin.x - position.x + offsetPosition.x,
|
|
y: origin.y - position.y + offsetPosition.y,
|
|
};
|
|
const within = {
|
|
x: Math.abs(difference.x) < bounds.x,
|
|
y: Math.abs(difference.y) < bounds.y,
|
|
};
|
|
const caretPosition = {
|
|
x: Math.max(-bounds.x, Math.min(origin.x - position.x + offsetPosition.x, bounds.x)),
|
|
y: Math.max(-bounds.y, Math.min(origin.y - position.y + offsetPosition.y, bounds.y)),
|
|
};
|
|
let caretRotation = Math.atan2(
|
|
difference.y - caretPosition.y,
|
|
difference.x - caretPosition.x,
|
|
);
|
|
caretRotation += Math.PI * 1.5;
|
|
if (within.x) {
|
|
caretPosition.y = bounds.y * Math.sign(difference.y);
|
|
if (within.y) {
|
|
if (Math.sign(difference.y) > 0) {
|
|
caretRotation = Math.PI;
|
|
}
|
|
else {
|
|
caretRotation = 0;
|
|
}
|
|
}
|
|
}
|
|
else if (within.y) {
|
|
caretPosition.x = bounds.x * Math.sign(difference.x);
|
|
}
|
|
// const corner = {
|
|
// x: (bounds.x - Math.abs(caretPosition.x)) * Math.sign(caretPosition.x),
|
|
// y: (bounds.y - Math.abs(caretPosition.y)) * Math.sign(caretPosition.y),
|
|
// };
|
|
caretPosition.x *= scale;
|
|
caretPosition.y *= scale;
|
|
caretPosition.x += -Math.sin(caretRotation) * (CARET_SIZE / 2);
|
|
caretPosition.y += Math.cos(caretRotation) * (CARET_SIZE / 2);
|
|
return (
|
|
<svg
|
|
className={styles.caret}
|
|
viewBox="0 0 24 24"
|
|
width={CARET_SIZE}
|
|
height={CARET_SIZE}
|
|
style={{
|
|
transform: `
|
|
translate(
|
|
calc(-50% + ${caretPosition.x}px),
|
|
calc(-50% + ${caretPosition.y}px)
|
|
)
|
|
rotate(${caretRotation}rad)
|
|
`,
|
|
}}
|
|
>
|
|
<polygon points="12 0, 18 10, 12 23, 23 10, 20 0" />
|
|
</svg>
|
|
);
|
|
}
|