54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import '../Selector.scss';
|
|
import * as React from 'react';
|
|
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
|
|
|
|
interface ISelectorProps {
|
|
text: string
|
|
x: number
|
|
y: number
|
|
width: number
|
|
height: number
|
|
scale: number
|
|
style?: React.CSSProperties
|
|
}
|
|
|
|
export function Selector({ text, x, y, width, height, scale, style: overrideStyle }: ISelectorProps): JSX.Element {
|
|
const xText = x + width / 2;
|
|
const yText = y + height / 2;
|
|
|
|
const style: React.CSSProperties = {
|
|
stroke: '#3B82F6',
|
|
strokeWidth: 4 / scale,
|
|
fillOpacity: 0,
|
|
transitionProperty: 'all',
|
|
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
transitionDuration: '150ms',
|
|
animation: 'fadein 750ms ease-in alternate infinite',
|
|
...overrideStyle
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<rect
|
|
x={x}
|
|
y={y}
|
|
width={width}
|
|
height={height}
|
|
style={style}
|
|
>
|
|
</rect>
|
|
{SHOW_SELECTOR_TEXT
|
|
? <text
|
|
x={xText}
|
|
y={yText}
|
|
style={{
|
|
transform: `scale(${1 / scale}) translateX(-50%)`,
|
|
transformBox: 'fill-box'
|
|
}}
|
|
>
|
|
{ text }
|
|
</text>
|
|
: null}
|
|
</>
|
|
);
|
|
}
|