Merged PR 170: Add new eslint rules
- naming-convention - prefer-arrow-callback - func-style - import/no-default-export
This commit is contained in:
Eric Nguyen
parent
3f58c5ba5e
commit
ad126c6c28
65 changed files with 781 additions and 784 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
import * as React from 'react';
|
||||
import { ContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN } from '../../../utils/default';
|
||||
import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
import { transformX } from '../../../utils/svg';
|
||||
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
import { TransformX } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
roots: ContainerModel | ContainerModel[] | null
|
||||
}
|
||||
|
||||
const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
|
||||
function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
|
||||
const it = MakeBFSIterator(root);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
let currentDepth = 0;
|
||||
|
|
@ -25,8 +25,8 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
|
|||
max = -Infinity;
|
||||
}
|
||||
|
||||
const absoluteX = getAbsolutePosition(container)[0];
|
||||
const x = transformX(absoluteX, container.properties.width, container.properties.XPositionReference);
|
||||
const absoluteX = GetAbsolutePosition(container)[0];
|
||||
const x = TransformX(absoluteX, container.properties.width, container.properties.xPositionReference);
|
||||
lastY = container.properties.y + container.properties.height;
|
||||
if (x < min) {
|
||||
min = x;
|
||||
|
|
@ -40,28 +40,28 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
|
|||
AddNewDimension(currentDepth, min, max, lastY, dimensions);
|
||||
|
||||
return dimensions;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export const DepthDimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
|
||||
export function DepthDimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
let dimensions: React.ReactNode[] = [];
|
||||
if (Array.isArray(props.roots)) {
|
||||
props.roots.forEach(child => {
|
||||
dimensions.concat(getDimensionsNodes(child));
|
||||
dimensions.concat(GetDimensionsNodes(child));
|
||||
});
|
||||
} else if (props.roots !== null) {
|
||||
dimensions = getDimensionsNodes(props.roots);
|
||||
dimensions = GetDimensionsNodes(props.roots);
|
||||
}
|
||||
return (
|
||||
<g>
|
||||
{ dimensions }
|
||||
{dimensions}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, dimensions: React.ReactNode[]): void {
|
||||
const id = `dim-depth-${currentDepth}`;
|
||||
|
|
|
|||
|
|
@ -20,9 +20,11 @@ interface IDimensionProps {
|
|||
* @param vx Transform vector
|
||||
* @returns Returns a new coordinate from the origin coordinate
|
||||
*/
|
||||
const applyParametric = (x0: number, t: number, vx: number): number => x0 + t * vx;
|
||||
function ApplyParametric(x0: number, t: number, vx: number): number {
|
||||
return x0 + t * vx;
|
||||
}
|
||||
|
||||
export const Dimension: React.FC<IDimensionProps> = (props: IDimensionProps) => {
|
||||
export function Dimension(props: IDimensionProps): JSX.Element {
|
||||
const style: React.CSSProperties = {
|
||||
stroke: 'black'
|
||||
};
|
||||
|
|
@ -39,15 +41,15 @@ export const Dimension: React.FC<IDimensionProps> = (props: IDimensionProps) =>
|
|||
const [perpVecX, perpVecY] = [unitY, -unitX];
|
||||
|
||||
// Use the parametric function to get the coordinates (x = x0 + t * v.x)
|
||||
const startTopX = applyParametric(props.xStart, NOTCHES_LENGTH, perpVecX);
|
||||
const startTopY = applyParametric(props.yStart, NOTCHES_LENGTH, perpVecY);
|
||||
const startBottomX = applyParametric(props.xStart, -NOTCHES_LENGTH, perpVecX);
|
||||
const startBottomY = applyParametric(props.yStart, -NOTCHES_LENGTH, perpVecY);
|
||||
const startTopX = ApplyParametric(props.xStart, NOTCHES_LENGTH, perpVecX);
|
||||
const startTopY = ApplyParametric(props.yStart, NOTCHES_LENGTH, perpVecY);
|
||||
const startBottomX = ApplyParametric(props.xStart, -NOTCHES_LENGTH, perpVecX);
|
||||
const startBottomY = ApplyParametric(props.yStart, -NOTCHES_LENGTH, perpVecY);
|
||||
|
||||
const endTopX = applyParametric(props.xEnd, NOTCHES_LENGTH, perpVecX);
|
||||
const endTopY = applyParametric(props.yEnd, NOTCHES_LENGTH, perpVecY);
|
||||
const endBottomX = applyParametric(props.xEnd, -NOTCHES_LENGTH, perpVecX);
|
||||
const endBottomY = applyParametric(props.yEnd, -NOTCHES_LENGTH, perpVecY);
|
||||
const endTopX = ApplyParametric(props.xEnd, NOTCHES_LENGTH, perpVecX);
|
||||
const endTopY = ApplyParametric(props.yEnd, NOTCHES_LENGTH, perpVecY);
|
||||
const endBottomX = ApplyParametric(props.xEnd, -NOTCHES_LENGTH, perpVecX);
|
||||
const endBottomY = ApplyParametric(props.yEnd, -NOTCHES_LENGTH, perpVecY);
|
||||
|
||||
return (
|
||||
<g key={props.id}>
|
||||
|
|
@ -57,24 +59,21 @@ export const Dimension: React.FC<IDimensionProps> = (props: IDimensionProps) =>
|
|||
x2={startBottomX}
|
||||
y2={startBottomY}
|
||||
strokeWidth={props.strokeWidth}
|
||||
style={style}
|
||||
/>
|
||||
style={style} />
|
||||
<line
|
||||
x1={props.xStart}
|
||||
y1={props.yStart}
|
||||
x2={props.xEnd}
|
||||
y2={props.yEnd}
|
||||
strokeWidth={props.strokeWidth}
|
||||
style={style}
|
||||
/>
|
||||
style={style} />
|
||||
<line
|
||||
x1={endTopX}
|
||||
y1={endTopY}
|
||||
x2={endBottomX}
|
||||
y2={endBottomY}
|
||||
strokeWidth={props.strokeWidth}
|
||||
style={style}
|
||||
/>
|
||||
style={style} />
|
||||
<text
|
||||
x={(props.xStart + props.xEnd) / 2}
|
||||
y={props.yStart}
|
||||
|
|
@ -83,4 +82,4 @@ export const Dimension: React.FC<IDimensionProps> = (props: IDimensionProps) =>
|
|||
</text>
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
import * as React from 'react';
|
||||
import { ContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN } from '../../../utils/default';
|
||||
import { getAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
import { Dimension } from './Dimension';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
roots: ContainerModel | ContainerModel[] | null
|
||||
}
|
||||
|
||||
const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
|
||||
function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
|
||||
const it = MakeBFSIterator(root);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
for (const { container, depth } of it) {
|
||||
const width = container.properties.width;
|
||||
const id = `dim-${container.properties.id}`;
|
||||
const xStart = getAbsolutePosition(container)[0];
|
||||
const xStart = GetAbsolutePosition(container)[0];
|
||||
const xEnd = xStart + width;
|
||||
const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1));
|
||||
const strokeWidth = 1;
|
||||
|
|
@ -28,30 +28,29 @@ const getDimensionsNodes = (root: ContainerModel): React.ReactNode[] => {
|
|||
xEnd={xEnd}
|
||||
yEnd={y}
|
||||
strokeWidth={strokeWidth}
|
||||
text={text}
|
||||
/>
|
||||
text={text} />
|
||||
);
|
||||
}
|
||||
return dimensions;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export const DimensionLayer: React.FC<IDimensionLayerProps> = (props: IDimensionLayerProps) => {
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
let dimensions: React.ReactNode[] = [];
|
||||
if (Array.isArray(props.roots)) {
|
||||
props.roots.forEach(child => {
|
||||
dimensions.concat(getDimensionsNodes(child));
|
||||
dimensions.concat(GetDimensionsNodes(child));
|
||||
});
|
||||
} else if (props.roots !== null) {
|
||||
dimensions = getDimensionsNodes(props.roots);
|
||||
dimensions = GetDimensionsNodes(props.roots);
|
||||
}
|
||||
return (
|
||||
<g>
|
||||
{ dimensions }
|
||||
{dimensions}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ import './Selector.scss';
|
|||
import * as React from 'react';
|
||||
import { IContainerModel } from '../../../../Interfaces/IContainerModel';
|
||||
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
|
||||
import { getAbsolutePosition } from '../../../../utils/itertools';
|
||||
import { GetAbsolutePosition } from '../../../../utils/itertools';
|
||||
import { RemoveMargin } from '../../../../utils/svg';
|
||||
|
||||
interface ISelectorProps {
|
||||
selected?: IContainerModel
|
||||
}
|
||||
|
||||
export const Selector: React.FC<ISelectorProps> = (props) => {
|
||||
export function Selector(props: ISelectorProps): JSX.Element {
|
||||
if (props.selected === undefined || props.selected === null) {
|
||||
return (
|
||||
<rect visibility={'hidden'}>
|
||||
|
|
@ -17,7 +17,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
|
|||
);
|
||||
}
|
||||
|
||||
let [x, y] = getAbsolutePosition(props.selected);
|
||||
let [x, y] = GetAbsolutePosition(props.selected);
|
||||
let [width, height] = [
|
||||
props.selected.properties.width,
|
||||
props.selected.properties.height
|
||||
|
|
@ -34,7 +34,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
|
|||
const yText = y + height / 2;
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
stroke: '#3B82F6', // tw blue-500
|
||||
stroke: '#3B82F6',
|
||||
strokeWidth: 4,
|
||||
fillOpacity: 0,
|
||||
transitionProperty: 'all',
|
||||
|
|
@ -63,4 +63,4 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
|
|||
: null}
|
||||
</>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ interface ISymbolProps {
|
|||
model: ISymbolModel
|
||||
}
|
||||
|
||||
export const Symbol: React.FC<ISymbolProps> = (props) => {
|
||||
export function Symbol(props: ISymbolProps): JSX.Element {
|
||||
const href = props.model.config.Image.Base64Image ?? props.model.config.Image.Url;
|
||||
const hasSVG = props.model.config.Image.Svg !== undefined &&
|
||||
props.model.config.Image.Svg !== null;
|
||||
|
|
@ -21,8 +21,7 @@ export const Symbol: React.FC<ISymbolProps> = (props) => {
|
|||
noWrap={true}
|
||||
disableLineBreaks={true}
|
||||
content={props.model.config.Image.Svg}
|
||||
allowElements={true}
|
||||
/>
|
||||
allowElements={true} />
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
|
@ -33,7 +32,6 @@ export const Symbol: React.FC<ISymbolProps> = (props) => {
|
|||
x={props.model.x}
|
||||
y={-DIMENSION_MARGIN}
|
||||
height={props.model.height}
|
||||
width={props.model.width}
|
||||
/>
|
||||
width={props.model.width} />
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ interface ISymbolLayerProps {
|
|||
symbols: Map<string, ISymbolModel>
|
||||
}
|
||||
|
||||
export const SymbolLayer: React.FC<ISymbolLayerProps> = (props) => {
|
||||
export function SymbolLayer(props: ISymbolLayerProps): JSX.Element {
|
||||
const symbols: JSX.Element[] = [];
|
||||
props.symbols.forEach((symbol) => {
|
||||
symbols.push(
|
||||
|
|
@ -15,9 +15,7 @@ export const SymbolLayer: React.FC<ISymbolLayerProps> = (props) => {
|
|||
});
|
||||
return (
|
||||
<g>
|
||||
{
|
||||
symbols
|
||||
}
|
||||
{symbols}
|
||||
</g>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ interface Viewer {
|
|||
|
||||
export const ID = 'svg';
|
||||
|
||||
function resizeViewBox(
|
||||
function ResizeViewBox(
|
||||
setViewer: React.Dispatch<React.SetStateAction<Viewer>>
|
||||
): void {
|
||||
setViewer({
|
||||
|
|
@ -34,26 +34,28 @@ function resizeViewBox(
|
|||
});
|
||||
}
|
||||
|
||||
function useSVGAutoResizer(
|
||||
function UseSVGAutoResizer(
|
||||
setViewer: React.Dispatch<React.SetStateAction<Viewer>>
|
||||
): void {
|
||||
React.useEffect(() => {
|
||||
const onResize = (): void => resizeViewBox(setViewer);
|
||||
window.addEventListener('resize', onResize);
|
||||
function OnResize(): void {
|
||||
return ResizeViewBox(setViewer);
|
||||
}
|
||||
window.addEventListener('resize', OnResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', onResize);
|
||||
window.removeEventListener('resize', OnResize);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
|
||||
export function SVG(props: ISVGProps): JSX.Element {
|
||||
const [viewer, setViewer] = React.useState<Viewer>({
|
||||
viewerWidth: window.innerWidth - BAR_WIDTH,
|
||||
viewerHeight: window.innerHeight
|
||||
});
|
||||
|
||||
useSVGAutoResizer(setViewer);
|
||||
UseSVGAutoResizer(setViewer);
|
||||
|
||||
const xmlns = '<http://www.w3.org/2000/svg>';
|
||||
const properties = {
|
||||
|
|
@ -64,9 +66,9 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
|
|||
|
||||
let children: React.ReactNode | React.ReactNode[] = [];
|
||||
if (Array.isArray(props.children)) {
|
||||
children = props.children.map(child => <Container key={`container-${child.properties.id}`} model={child}/>);
|
||||
children = props.children.map(child => <Container key={`container-${child.properties.id}`} model={child} />);
|
||||
} else if (props.children !== null) {
|
||||
children = <Container key={`container-${props.children.properties.id}`} model={props.children}/>;
|
||||
children = <Container key={`container-${props.children.properties.id}`} model={props.children} />;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -84,16 +86,14 @@ export const SVG: React.FC<ISVGProps> = (props: ISVGProps) => {
|
|||
}}
|
||||
>
|
||||
<svg {...properties}>
|
||||
{ children }
|
||||
{
|
||||
SHOW_DIMENSIONS_PER_DEPTH
|
||||
? <DepthDimensionLayer roots={props.children}/>
|
||||
: null
|
||||
}
|
||||
{children}
|
||||
{SHOW_DIMENSIONS_PER_DEPTH
|
||||
? <DepthDimensionLayer roots={props.children} />
|
||||
: null}
|
||||
<SymbolLayer symbols={props.symbols} />
|
||||
<Selector selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
|
||||
</svg>
|
||||
</UncontrolledReactSVGPanZoom>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue