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

Merged PR 16: Transform every single class components into functional component
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source 
This improve greatly the performance and the code cleaning.
It allows us to separate the inseparable class methods into modules functions
This commit is contained in:
Eric Nguyen 2022-08-09 15:15:56 +00:00
parent 1fc11adbaa
commit d9e06537e8
33 changed files with 1298 additions and 1261 deletions
Download patch file Download diff file Expand all files Collapse all files

122
src/Components/SVG/Elements/Container.tsx
View file

@ -9,70 +9,68 @@ export interface IContainerProps {
const GAP = 50;
export class Container extends React.PureComponent<IContainerProps> {
/**
* Render the container
* @returns Render the container
*/
public render(): React.ReactNode {
const containersElements = this.props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
const xText = Number(this.props.model.properties.width) / 2;
const yText = Number(this.props.model.properties.height) / 2;
const transform = `translate(${Number(this.props.model.properties.x)}, ${Number(this.props.model.properties.y)})`;
/**
* Render the container
* @returns Render the container
*/
export const Container: React.FC<IContainerProps> = (props: IContainerProps) => {
const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
const xText = Number(props.model.properties.width) / 2;
const yText = Number(props.model.properties.height) / 2;
const transform = `translate(${Number(props.model.properties.x)}, ${Number(props.model.properties.y)})`;
// g style
const defaultStyle: React.CSSProperties = {
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDuration: '150ms'
};
// g style
const defaultStyle: React.CSSProperties = {
transitionProperty: 'all',
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
transitionDuration: '150ms'
};
// Rect style
const style = Object.assign(
JSON.parse(JSON.stringify(defaultStyle)),
this.props.model.properties
);
style.x = 0;
style.y = 0;
delete style.height;
delete style.width;
// Rect style
const style = Object.assign(
JSON.parse(JSON.stringify(defaultStyle)),
props.model.properties
);
style.x = 0;
style.y = 0;
delete style.height;
delete style.width;
// Dimension props
const id = `dim-${this.props.model.properties.id}`;
const xStart: number = 0;
const xEnd = Number(this.props.model.properties.width);
const y = -(GAP * (getDepth(this.props.model) + 1));
const strokeWidth = 1;
const text = (this.props.model.properties.width ?? 0).toString();
// Dimension props
const id = `dim-${props.model.properties.id}`;
const xStart: number = 0;
const xEnd = Number(props.model.properties.width);
const y = -(GAP * (getDepth(props.model) + 1));
const strokeWidth = 1;
const text = (props.model.properties.width ?? 0).toString();
return (
<g
style={defaultStyle}
transform={transform}
key={`container-${this.props.model.properties.id}`}
return (
<g
style={defaultStyle}
transform={transform}
key={`container-${props.model.properties.id}`}
>
<Dimension
id={id}
xStart={xStart}
xEnd={xEnd}
y={y}
strokeWidth={strokeWidth}
text={text}
/>
<rect
width={props.model.properties.width}
height={props.model.properties.height}
style={style}
>
<Dimension
id={id}
xStart={xStart}
xEnd={xEnd}
y={y}
strokeWidth={strokeWidth}
text={text}
/>
<rect
width={this.props.model.properties.width}
height={this.props.model.properties.height}
style={style}
>
</rect>
<text
x={xText}
y={yText}
>
{this.props.model.properties.id}
</text>
{ containersElements }
</g>
);
}
}
</rect>
<text
x={xText}
y={yText}
>
{props.model.properties.id}
</text>
{ containersElements }
</g>
);
};