48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
|
import { SHOW_SELECTOR_TEXT } from '../../utils/default';
|
|
import { GetAbsolutePosition } from '../../utils/itertools';
|
|
import { RemoveMargin } from '../../utils/svg';
|
|
|
|
interface ISelectorProps {
|
|
containers: Map<string, IContainerModel>
|
|
selected?: IContainerModel
|
|
scale?: number
|
|
}
|
|
|
|
export function RenderSelector(ctx: CanvasRenderingContext2D, frameCount: number, props: ISelectorProps): void {
|
|
if (props.selected === undefined || props.selected === null) {
|
|
return;
|
|
}
|
|
|
|
const scale = (props.scale ?? 1);
|
|
let [x, y] = GetAbsolutePosition(props.containers, 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;
|
|
|
|
ctx.strokeStyle = '#3B82F6';
|
|
ctx.lineWidth = 4 / scale;
|
|
ctx.globalAlpha = (Math.sin(frameCount * 0.0450) ** 2);
|
|
ctx.strokeRect(x, y, width, height);
|
|
ctx.globalAlpha = 1;
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = 'black';
|
|
|
|
if (SHOW_SELECTOR_TEXT) {
|
|
ctx.font = `${16 / scale}px Verdana`;
|
|
ctx.textAlign = 'center';
|
|
ctx.fillText(props.selected.properties.displayedText, xText, yText);
|
|
ctx.textAlign = 'left';
|
|
}
|
|
}
|