Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merged PR 182: Implement Scale for text, Selector and Dimension

Browse source
This commit is contained in:
Eric Nguyen 2022-09-09 16:00:13 +00:00
parent b8d3e9f1e9
commit 063467fb58
7 changed files with 75 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Components/SVG/Elements/Selector/Selector.tsx
View file

@ -7,6 +7,7 @@ import { RemoveMargin } from '../../../../utils/svg';
interface ISelectorProps {
selected?: IContainerModel
scale?: number
}
export function Selector(props: ISelectorProps): JSX.Element {
@ -17,6 +18,7 @@ export function Selector(props: ISelectorProps): JSX.Element {
);
}
const scale = (props.scale ?? 1);
let [x, y] = GetAbsolutePosition(props.selected);
let [width, height] = [
props.selected.properties.width,
@ -35,7 +37,7 @@ export function Selector(props: ISelectorProps): JSX.Element {
const style: React.CSSProperties = {
stroke: '#3B82F6',
strokeWidth: 4,
strokeWidth: 4 / scale,
fillOpacity: 0,
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
@ -57,6 +59,10 @@ export function Selector(props: ISelectorProps): JSX.Element {
? <text
x={xText}
y={yText}
style={{
transform: `scale(${1 / scale}) translateX(-50%)`,
transformBox: 'fill-box'
}}
>
{props.selected.properties.displayedText}
</text>