diff --git a/src/App.scss b/src/App.scss index ac9c791..c41aeab 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,4 +4,16 @@ body, svg { height: 100%; width: 100%; +} + +text { + font-size: 18px; + font-weight: 800; + fill: none; + fill-opacity: 0; + stroke: #000000; + stroke-width: 1px; + stroke-linecap: butt; + stroke-linejoin: miter; + stroke-opacity: 1; } \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index da989ac..a9066fb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -218,7 +218,7 @@ class App extends React.Component { onClick={() => this.ToggleSidebar()} buttonOnClick={(type: string) => this.AddContainer(type)} /> - + { onPropertyChange={(key: string, value: string) => this.OnPropertyChange(key, value)} selectContainer={(container: Container) => this.SelectContainer(container)} /> - + { this.state.MainContainer } @@ -243,6 +243,8 @@ class App extends React.Component { export async function fetchConfiguration(): Promise { const url = `${import.meta.env.VITE_API_URL}`; + // The test library cannot use the Fetch API + // @ts-ignore if (window.fetch) { return await fetch(url, { method: 'POST' diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index 907b4af..d5671e2 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -57,12 +57,17 @@ export class Container extends React.Component { public render(): React.ReactNode { const containersElements = this.props.children.map(child => child.render()); + const xText = (this.props.properties.x * 2 + Number(this.props.properties.width)) / 2; + const yText = (this.props.properties.y * 2 + Number(this.props.properties.height)) / 2; + + // g style const defaultStyle = { transitionProperty: 'all', transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', transitionDuration: '150ms' } as React.CSSProperties; + // Rect style const style = Object.assign( JSON.parse(JSON.stringify(defaultStyle)), this.props.properties @@ -72,6 +77,7 @@ export class Container extends React.Component { delete style.height; delete style.width; + // Dimension props const id = `dim-${this.props.properties.id}`; const xStart: number = 0; const xEnd = Number(this.props.properties.width); @@ -99,6 +105,12 @@ export class Container extends React.Component { style={style} > + + {this.props.properties.id} + { containersElements } ); diff --git a/src/index.css b/src/index.scss similarity index 100% rename from src/index.css rename to src/index.scss diff --git a/src/main.tsx b/src/main.tsx index a2bf01b..95b3daf 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,7 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; -import './index.css'; +import './index.scss'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(