Siklos
293af45144
All checks were successful
continuous-integration/drone/push Build is passing
Moved all module functions to separate utils modules Replaced standard with standard with typescript Extracted UI elements to separate component Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/15
42 lines
1 KiB
TypeScript
42 lines
1 KiB
TypeScript
import * as React from 'react';
|
|
import { IContainerModel } from '../../../Interfaces/ContainerModel';
|
|
import { getAbsolutePosition } from '../../../utils/itertools';
|
|
|
|
interface ISelectorProps {
|
|
selected: IContainerModel | null
|
|
}
|
|
|
|
export const Selector: React.FC<ISelectorProps> = (props) => {
|
|
if (props.selected === undefined || props.selected === null) {
|
|
return (
|
|
<rect visibility={'hidden'}>
|
|
</rect>
|
|
);
|
|
}
|
|
|
|
const [x, y] = getAbsolutePosition(props.selected);
|
|
const [width, height] = [
|
|
props.selected.properties.width,
|
|
props.selected.properties.height
|
|
];
|
|
const style: React.CSSProperties = {
|
|
stroke: '#3B82F6', // tw blue-500
|
|
strokeWidth: 4,
|
|
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>
|
|
);
|
|
};
|