72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import './Selector.scss';
|
|
import * as React from 'react';
|
|
import { IContainerModel } from '../../../../Interfaces/IContainerModel';
|
|
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
|
|
import { GetAbsolutePosition } from '../../../../utils/itertools';
|
|
import { RemoveMargin } from '../../../../utils/svg';
|
|
|
|
interface ISelectorProps {
|
|
selected?: IContainerModel
|
|
scale?: number
|
|
}
|
|
|
|
export function Selector(props: ISelectorProps): JSX.Element {
|
|
if (props.selected === undefined || props.selected === null) {
|
|
return (
|
|
<rect visibility={'hidden'}>
|
|
</rect>
|
|
);
|
|
}
|
|
|
|
const scale = (props.scale ?? 1);
|
|
let [x, y] = GetAbsolutePosition(props.selected);
|
|
let [width, height] = [
|
|
props.selected.properties.width,
|
|
props.selected.properties.height
|
|
];
|
|
|
|
({ x, y, width, height } = RemoveMargin(x, y, width, height,
|
|
props.selected.properties.margin.left,
|
|
props.selected.properties.margin.bottom,
|
|
props.selected.properties.margin.top,
|
|
props.selected.properties.margin.right
|
|
));
|
|
|
|
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'
|
|
};
|
|
|
|
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'
|
|
}}
|
|
>
|
|
{props.selected.properties.displayedText}
|
|
</text>
|
|
: null}
|
|
</>
|
|
);
|
|
}
|