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

Merged PR 170: Add new eslint rules

Browse source 
- naming-convention
- prefer-arrow-callback
- func-style
- import/no-default-export
This commit is contained in:
Eric Nguyen 2022-08-26 16:13:21 +00:00
parent 3f58c5ba5e
commit ad126c6c28
65 changed files with 781 additions and 784 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,11 +2,11 @@ import * as React from 'react';
import { Interweave, Node } from 'interweave';
import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { DIMENSION_MARGIN, SHOW_CHILDREN_DIMENSIONS, SHOW_PARENT_DIMENSION, SHOW_TEXT } from '../../../utils/default';
import { getDepth } from '../../../utils/itertools';
import { GetDepth } from '../../../utils/itertools';
import { Dimension } from './Dimension';
import IContainerProperties from '../../../Interfaces/IContainerProperties';
import { transformX } from '../../../utils/svg';
import { camelize } from '../../../utils/stringtools';
import { IContainerProperties } from '../../../Interfaces/IContainerProperties';
import { TransformX } from '../../../utils/svg';
import { Camelize } from '../../../utils/stringtools';
interface IContainerProps {
model: IContainerModel
@ -16,7 +16,7 @@ interface IContainerProps {
* Render the container
* @returns Render the container
*/
export const Container: React.FC<IContainerProps> = (props: IContainerProps) => {
export function Container(props: IContainerProps): JSX.Element {
const containersElements = props.model.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
const width: number = props.model.properties.width;
@ -52,7 +52,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
>
</rect>);
// Dimension props
const depth = getDepth(props.model);
const depth = GetDepth(props.model);
const dimensionMargin = DIMENSION_MARGIN * depth;
const id = `dim-${props.model.properties.id}`;
const xStart: number = 0;
@ -64,11 +64,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
let dimensionChildren: JSX.Element | null = null;
if (props.model.children.length > 1 && SHOW_CHILDREN_DIMENSIONS) {
const {
childrenId,
xChildrenStart,
xChildrenEnd,
yChildren,
textChildren
childrenId, xChildrenStart, xChildrenEnd, yChildren, textChildren
} = GetChildrenDimensionProps(props, dimensionMargin);
dimensionChildren = <Dimension
id={childrenId}
@ -77,8 +73,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
yStart={yChildren}
yEnd={yChildren}
strokeWidth={strokeWidth}
text={textChildren}
/>;
text={textChildren} />;
}
return (
@ -95,10 +90,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
yStart={yDim}
yEnd={yDim}
strokeWidth={strokeWidth}
text={text}
/>
: null
}
text={text} />
: null}
{dimensionChildren}
{svg}
{SHOW_TEXT
@ -112,23 +105,23 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
{containersElements}
</g>
);
};
}
function GetChildrenDimensionProps(props: IContainerProps, dimensionMargin: number): { childrenId: string, xChildrenStart: number, xChildrenEnd: number, yChildren: number, textChildren: string } {
const childrenId = `dim-children-${props.model.properties.id}`;
const lastChild = props.model.children[props.model.children.length - 1];
let xChildrenStart = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
let xChildrenEnd = transformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.XPositionReference);
let xChildrenStart = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.xPositionReference);
let xChildrenEnd = TransformX(lastChild.properties.x, lastChild.properties.width, lastChild.properties.xPositionReference);
// Find the min and max
for (let i = props.model.children.length - 2; i >= 0; i--) {
const child = props.model.children[i];
const left = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
const left = TransformX(child.properties.x, child.properties.width, child.properties.xPositionReference);
if (left < xChildrenStart) {
xChildrenStart = left;
}
const right = transformX(child.properties.x, child.properties.width, child.properties.XPositionReference);
const right = TransformX(child.properties.x, child.properties.width, child.properties.xPositionReference);
if (right > xChildrenEnd) {
xChildrenEnd = right;
}
@ -145,11 +138,11 @@ function CreateReactCustomSVG(customSVG: string, props: IContainerProperties): R
disableLineBreaks={true}
content={customSVG}
allowElements={true}
transform={(node, children) => transform(node, children, props)}
transform={(node, children) => Transform(node, children, props)}
/>;
}
function transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode {
function Transform(node: HTMLElement, children: Node[], props: IContainerProperties): React.ReactNode {
const supportedTags = ['line', 'path', 'rect'];
if (supportedTags.includes(node.tagName.toLowerCase())) {
const attributes: { [att: string]: string | object | null } = {};
@ -170,7 +163,7 @@ function transform(node: HTMLElement, children: Node[], props: IContainerPropert
const prop = Object.entries(props.userData).find(([key]) => `{${key}}` === userDataKey);
if (prop !== undefined) {
attributes[camelize(attName)] = prop[1];
attributes[Camelize(attName)] = prop[1];
return;
}
}
@ -179,16 +172,16 @@ function transform(node: HTMLElement, children: Node[], props: IContainerPropert
// support for object
const stringObject = attributeValue.slice(1, -1);
const object: JSON = JSON.parse(stringObject);
attributes[camelize(attName)] = object;
attributes[Camelize(attName)] = object;
return;
}
const prop = Object.entries(props).find(([key]) => `{${key}}` === attributeValue);
if (prop !== undefined) {
attributes[camelize(attName)] = prop[1];
attributes[Camelize(attName)] = prop[1];
return;
}
attributes[camelize(attName)] = attributeValue;
attributes[Camelize(attName)] = attributeValue;
});
return React.createElement(node.tagName.toLowerCase(), attributes, children);
}