diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7f605ec..df59f7d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -33,9 +33,15 @@ module.exports = { 'func-style': ['error', 'declaration'], 'space-before-function-paren': ['error', 'never'], 'max-len': ['error', { 'code': 120 }], + 'max-depth': ['error', 4], + 'function-paren-newline': ['error', 'multiline-arguments'], + 'multiline-ternary': ['error', 'always'], // Import/export 'import/no-default-export': 'error', + 'import/no-duplicates': 'error', + 'import/newline-after-import': 'error', + 'import/order': 'error', // Typescript overload indent: 'off', diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index 08fcbad..593dbf0 100644 --- a/src/Components/API/api.test.tsx +++ b/src/Components/API/api.test.tsx @@ -2,14 +2,14 @@ import { describe, it, expect } from 'vitest'; import { AddMethod } from '../../Enums/AddMethod'; import { PositionReference } from '../../Enums/PositionReference'; -import { IAction } from '../../Interfaces/IAction'; -import { IAvailableContainer } from '../../Interfaces/IAvailableContainer'; -import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol'; -import { ICategory } from '../../Interfaces/ICategory'; -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IPattern } from '../../Interfaces/IPattern'; +import { type IAction } from '../../Interfaces/IAction'; +import { type IAvailableContainer } from '../../Interfaces/IAvailableContainer'; +import { type IAvailableSymbol } from '../../Interfaces/IAvailableSymbol'; +import { type ICategory } from '../../Interfaces/ICategory'; +import { type IConfiguration } from '../../Interfaces/IConfiguration'; +import { type IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel'; +import { type IHistoryState } from '../../Interfaces/IHistoryState'; +import { type IPattern } from '../../Interfaces/IPattern'; import { DEFAULT_DIMENSION_OPTION, DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default'; import { FetchConfiguration } from './api'; @@ -95,9 +95,7 @@ describe.concurrent('Models test suite', () => { expect(res4).toBe(true); }); - const mainContainer = new ContainerModel( - DEFAULT_MAINCONTAINER_PROPS - ); + const mainContainer = new ContainerModel(DEFAULT_MAINCONTAINER_PROPS); const containers = new Map(); const historyState: IHistoryState = { @@ -244,7 +242,12 @@ describe.concurrent('Models test suite', () => { 'container', 0, null, - 0, 0, 0, 0, availableContainerModel); + 0, + 0, + 0, + 0, + availableContainerModel + ); it('ContainerModel', async() => { const model: IContainerModel = { diff --git a/src/Components/API/api.ts b/src/Components/API/api.ts index fd91133..492a289 100644 --- a/src/Components/API/api.ts +++ b/src/Components/API/api.ts @@ -1,6 +1,6 @@ -import { IConfiguration } from '../../Interfaces/IConfiguration'; -import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest'; -import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse'; +import { type IConfiguration } from '../../Interfaces/IConfiguration'; +import { type ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest'; +import { type ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse'; import { GetCircularReplacer } from '../../utils/saveload'; /** @@ -9,16 +9,14 @@ import { GetCircularReplacer } from '../../utils/saveload'; */ export async function FetchConfiguration(): Promise { const url = import.meta.env.VITE_API_FETCH_URL; - // The test library cannot use the Fetch API - // @ts-expect-error + // @ts-expect-error The test library cannot use the Fetch API // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (window.fetch) { return await fetch(url, { method: 'POST' }) .then(async(response) => - await response.json() - ) as IConfiguration; + await response.json()) as IConfiguration; } return await new Promise((resolve) => { const xhr = new XMLHttpRequest(); @@ -33,11 +31,13 @@ export async function FetchConfiguration(): Promise { }); } -export async function SetContainerList(request: ISetContainerListRequest, configurationUrl?: string): Promise { +export async function SetContainerList( + request: ISetContainerListRequest, + configurationUrl?: string +): Promise { const url = configurationUrl ?? import.meta.env.VITE_API_SET_CONTAINER_LIST_URL; const dataParsed = JSON.stringify(request, GetCircularReplacer()); - // The test library cannot use the Fetch API - // @ts-expect-error + // @ts-expect-error The test library cannot use the Fetch API // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (window.fetch) { return await fetch(url, { @@ -49,8 +49,7 @@ export async function SetContainerList(request: ISetContainerListRequest, config body: dataParsed }) .then(async(response) => - await response.json() - ) as ISetContainerListResponse; + await response.json()) as ISetContainerListResponse; } return await new Promise((resolve) => { const xhr = new XMLHttpRequest(); diff --git a/src/Components/App/Actions/Load.ts b/src/Components/App/Actions/Load.ts index 6543052..356c23a 100644 --- a/src/Components/App/Actions/Load.ts +++ b/src/Components/App/Actions/Load.ts @@ -1,6 +1,6 @@ -import { Dispatch, SetStateAction } from 'react'; +import { type Dispatch, type SetStateAction } from 'react'; import { AppState } from '../../../Enums/AppState'; -import { IEditorState } from '../../../Interfaces/IEditorState'; +import { type IEditorState } from '../../../Interfaces/IEditorState'; import { Revive } from '../../../utils/saveload'; export function LoadState( diff --git a/src/Components/App/Actions/MenuActions.ts b/src/Components/App/Actions/MenuActions.ts index 9f7da32..2a42a0c 100644 --- a/src/Components/App/Actions/MenuActions.ts +++ b/src/Components/App/Actions/MenuActions.ts @@ -1,10 +1,10 @@ -import { Dispatch, SetStateAction } from 'react'; -import { IConfiguration } from '../../../Interfaces/IConfiguration'; +import { type Dispatch, type SetStateAction } from 'react'; +import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { FetchConfiguration } from '../../API/api'; -import { IEditorState } from '../../../Interfaces/IEditorState'; -import { LoadState } from './Load'; +import { type IEditorState } from '../../../Interfaces/IEditorState'; import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default'; -import { AppState } from '../../../Enums/AppState'; +import { type AppState } from '../../../Enums/AppState'; +import { LoadState } from './Load'; export function NewEditor( editorState: IEditorState, diff --git a/src/Components/App/App.test.tsx b/src/Components/App/App.test.tsx index fd49185..32213d5 100644 --- a/src/Components/App/App.test.tsx +++ b/src/Components/App/App.test.tsx @@ -2,16 +2,14 @@ import * as React from 'react'; import { beforeEach, describe, it } from 'vitest'; import { AppState } from '../../Enums/AppState'; import { FAST_BOOT } from '../../utils/default'; -import { fireEvent, render, RenderResult } from '../../utils/test-utils'; +import { fireEvent, render, type RenderResult } from '../../utils/test-utils'; import { App } from './App'; describe.concurrent('App', () => { let app: RenderResult; beforeEach(() => { - app = render( - - ); + app = render(); }); it('New editor', async() => { diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index 886e29c..d2b312d 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -1,15 +1,15 @@ -import React, { Dispatch, SetStateAction, useContext, useEffect, useRef, useState } from 'react'; +import React, { type Dispatch, type SetStateAction, useContext, useEffect, useRef, useState } from 'react'; import { UseCustomEvents } from '../../Events/AppEvents'; import { MainMenu } from '../MainMenu/MainMenu'; -import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel'; +import { ContainerModel, type IContainerModel } from '../../Interfaces/IContainerModel'; import { Editor } from '../Editor/Editor'; -import { IEditorState } from '../../Interfaces/IEditorState'; -import { LoadState } from './Actions/Load'; -import { LoadEditor, NewEditor } from './Actions/MenuActions'; +import { type IEditorState } from '../../Interfaces/IEditorState'; import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default'; import { AppState } from '../../Enums/AppState'; import { Loader } from '../Loader/Loader'; import { LanguageContext } from '../LanguageProvider/LanguageProvider'; +import { LoadEditor, NewEditor } from './Actions/MenuActions'; +import { LoadState } from './Actions/Load'; // App will never have props // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -49,9 +49,7 @@ export function App(props: IAppProps): JSX.Element { const appRef = useRef(null); const languageContext = useContext(LanguageContext); - const defaultMainContainer = new ContainerModel( - DEFAULT_MAINCONTAINER_PROPS - ); + const defaultMainContainer = new ContainerModel(DEFAULT_MAINCONTAINER_PROPS); const containers = new Map(); containers.set(defaultMainContainer.properties.id, defaultMainContainer); @@ -116,15 +114,17 @@ export function App(props: IAppProps): JSX.Element { setAppState(AppState.Loading); NewEditor( editorState, - (newEditor) => setEditorState(newEditor), - () => setAppState(AppState.Loaded) + (newEditor) => { setEditorState(newEditor); }, + () => { setAppState(AppState.Loaded); } + ); + }} + loadEditor={(files: FileList | null) => { + LoadEditor( + files, + setEditorState, + setAppState ); }} - loadEditor={(files: FileList | null) => LoadEditor( - files, - setEditorState, - setAppState - )} /> ); diff --git a/src/Components/Bar/Bar.tsx b/src/Components/Bar/Bar.tsx index a693fc2..f3b3636 100644 --- a/src/Components/Bar/Bar.tsx +++ b/src/Components/Bar/Bar.tsx @@ -13,8 +13,8 @@ import { EnvelopeIcon as EnvolopeIconS, Cog8ToothIcon as Cog8ToothIconS } from '@heroicons/react/24/solid'; -import { BarIcon } from './BarIcon'; import { Text } from '../Text/Text'; +import { BarIcon } from './BarIcon'; interface IBarProps { className: string @@ -38,7 +38,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleComponents()}> + onClick={() => { props.toggleComponents(); }}> { props.isComponentsOpen ? @@ -48,7 +48,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleSymbols()}> + onClick={() => { props.toggleSymbols(); }}> { props.isSymbolsOpen ? @@ -58,7 +58,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleMessages()}> + onClick={() => { props.toggleMessages(); }}> { props.isMessagesOpen ? @@ -69,7 +69,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleTimeline()}> + onClick={() => { props.toggleTimeline(); }}> { props.isHistoryOpen ? @@ -79,7 +79,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleSettings()}> + onClick={() => { props.toggleSettings(); }}> { props.isSettingsOpen ? diff --git a/src/Components/Bar/BarIcon.tsx b/src/Components/Bar/BarIcon.tsx index 9324dc0..0a2dc56 100644 --- a/src/Components/Bar/BarIcon.tsx +++ b/src/Components/Bar/BarIcon.tsx @@ -8,12 +8,14 @@ interface IBarIconProps { } export function BarIcon(props: IBarIconProps): JSX.Element { - const isActiveClasses = props.isActive ? 'border-l-4 border-blue-500 bg-slate-200' : ''; + const isActiveClasses = props.isActive + ? 'border-l-4 border-blue-500 bg-slate-200' + : ''; return ( diff --git a/src/Components/FloatingButton/MenuButton.tsx b/src/Components/FloatingButton/MenuButton.tsx index ce8ca3c..7375e9c 100644 --- a/src/Components/FloatingButton/MenuButton.tsx +++ b/src/Components/FloatingButton/MenuButton.tsx @@ -1,19 +1,23 @@ import * as React from 'react'; import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'; +import { type IUIProps } from '../UI/UI'; import { FloatingButton } from './FloatingButton'; -import { IUIProps } from '../UI/UI'; export function MenuButton(props: IUIProps): JSX.Element { return diff --git a/src/Components/Menu/Menu.tsx b/src/Components/Menu/Menu.tsx index 57c3445..ed1f622 100644 --- a/src/Components/Menu/Menu.tsx +++ b/src/Components/Menu/Menu.tsx @@ -1,6 +1,6 @@ import useSize from '@react-hook/size'; import * as React from 'react'; -import { IPoint } from '../../Interfaces/IPoint'; +import { type IPoint } from '../../Interfaces/IPoint'; import { MenuItem } from './MenuItem'; interface IMenuProps { @@ -97,15 +97,22 @@ export function Menu(props: IMenuProps): JSX.Element { AddUniversalActions(props, children, count, target); } - const visible = isOpen && children.length > 0 ? 'visible opacity-1' : 'invisible opacity-0'; + const visible = isOpen && children.length > 0 + ? 'visible opacity-1' + : 'invisible opacity-0'; const isOutOfBoundHorizontally = contextMenuPosition.x + menuWidth > window.innerWidth; const isOutOfBoundVertically = contextMenuPosition.y + menuHeight > window.innerHeight; - const finalHorizontalPosition = isOutOfBoundHorizontally ? contextMenuPosition.x - menuWidth : contextMenuPosition.x; - const finalVerticalPosition = isOutOfBoundVertically ? contextMenuPosition.y - menuWidth : contextMenuPosition.y; + const finalHorizontalPosition = isOutOfBoundHorizontally + ? contextMenuPosition.x - menuWidth + : contextMenuPosition.x; + const finalVerticalPosition = isOutOfBoundVertically + ? contextMenuPosition.y - menuWidth + : contextMenuPosition.y; return (
action.action(target)} />); + onClick={() => { action.action(target); }} />); }); children.push(
); } @@ -156,7 +163,7 @@ function AddUniversalActions(props: IMenuProps, children: JSX.Element[], count: text={action.text} title={action.title} shortcut={action.shortcut} - onClick={() => action.action(target)} />); + onClick={() => { action.action(target); }} />); }); } diff --git a/src/Components/Menu/MenuItem.tsx b/src/Components/Menu/MenuItem.tsx index ac21d10..1c0eede 100644 --- a/src/Components/Menu/MenuItem.tsx +++ b/src/Components/Menu/MenuItem.tsx @@ -13,7 +13,7 @@ export function MenuItem(props: IMenuItemProps): JSX.Element { diff --git a/src/Components/Messages/Messages.tsx b/src/Components/Messages/Messages.tsx index 7e71d62..9326403 100644 --- a/src/Components/Messages/Messages.tsx +++ b/src/Components/Messages/Messages.tsx @@ -2,8 +2,8 @@ import { TrashIcon } from '@heroicons/react/24/outline'; import * as React from 'react'; import { FixedSizeList as List } from 'react-window'; import { MessageType } from '../../Enums/MessageType'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IMessage } from '../../Interfaces/IMessage'; +import { type IHistoryState } from '../../Interfaces/IHistoryState'; +import { type IMessage } from '../../Interfaces/IMessage'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar'; import { Text } from '../Text/Text'; @@ -14,7 +14,7 @@ interface IMessagesProps { } export function Messages(props: IMessagesProps): JSX.Element { - function Row({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element { + function Row({ index, style }: { index: number, style: React.CSSProperties }): JSX.Element { const reversedIndex = (props.messages.length - 1) - index; const message = props.messages[reversedIndex]; let classType = ''; diff --git a/src/Components/RadioGroupButtons/PositionReferenceSelector.tsx b/src/Components/RadioGroupButtons/PositionReferenceSelector.tsx index cdecd69..e045cf3 100644 --- a/src/Components/RadioGroupButtons/PositionReferenceSelector.tsx +++ b/src/Components/RadioGroupButtons/PositionReferenceSelector.tsx @@ -1,5 +1,11 @@ import React from 'react'; -import { Bars3BottomLeftIcon, Bars3CenterLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars2Icon } from '@heroicons/react/24/outline'; +import { + Bars3BottomLeftIcon, + Bars3CenterLeftIcon, + Bars3Icon, + Bars3BottomRightIcon, + Bars2Icon +} from '@heroicons/react/24/outline'; import { PositionReference } from '../../Enums/PositionReference'; import { RadioGroupButtons } from './RadioGroupButtons'; diff --git a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx index 751da23..d27496e 100644 --- a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx +++ b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IInputGroup } from '../../Interfaces/IInputGroup'; +import { type IInputGroup } from '../../Interfaces/IInputGroup'; interface IRadioGroupButtonsProps { name: string diff --git a/src/Components/SVG/Elements/Container.tsx b/src/Components/SVG/Elements/Container.tsx index ac01ed0..784bd1e 100644 --- a/src/Components/SVG/Elements/Container.tsx +++ b/src/Components/SVG/Elements/Container.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { Interweave, Node } from 'interweave'; -import { IContainerModel } from '../../../Interfaces/IContainerModel'; -import { IContainerProperties } from '../../../Interfaces/IContainerProperties'; +import { Interweave, type Node } from 'interweave'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type IContainerProperties } from '../../../Interfaces/IContainerProperties'; import { Camelize } from '../../../utils/stringtools'; import { SHOW_TEXT } from '../../../utils/default'; import { FindContainerById } from '../../../utils/itertools'; @@ -19,23 +19,22 @@ interface IContainerProps { * @returns Render the container */ export function Container(props: IContainerProps): JSX.Element { - const containersElements = props.model.children.map( - childId => { - const child = FindContainerById(props.containers, childId); + const containersElements = props.model.children.map(childId => { + const child = FindContainerById(props.containers, childId); - if (child === undefined) { - return <>; - } + if (child === undefined) { + return <>; + } - return ; - }); + return ; + }); const width: number = props.model.properties.width; const height: number = props.model.properties.height; @@ -67,7 +66,7 @@ export function Container(props: IContainerProps): JSX.Element { width={width} height={height} style={style} - onClick={() => props.selectContainer(props.model.properties.id)} + onClick={() => { props.selectContainer(props.model.properties.id); }} > ); @@ -108,7 +107,7 @@ function CreateReactCustomSVG(customSVG: string, properties: IContainerPropertie function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode { const supportedTags = ['line', 'path', 'rect']; if (supportedTags.includes(node.tagName.toLowerCase())) { - const attributes: { [att: string]: string | object | null } = {}; + const attributes: Record = {}; node.getAttributeNames().forEach(attName => { const attributeValue = node.getAttribute(attName); if (attributeValue === null) { diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 8d62702..f1c468a 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -11,9 +11,9 @@ import { } from '../../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { TransformX, TransformY } from '../../../utils/svg'; -import { Dimension } from './Dimension'; import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { Dimension } from './Dimension'; interface IDimensionLayerProps { containers: Map @@ -160,7 +160,8 @@ function Dimensions({ containers, symbols, root, scale }: IDimensionLayerProps): return dimensions; } -function AddHorizontalSymbolDimension(symbol: ISymbolModel, +function AddHorizontalSymbolDimension( + symbol: ISymbolModel, dimensions: React.ReactNode[], scale: number, depth: number @@ -173,22 +174,21 @@ function AddHorizontalSymbolDimension(symbol: ISymbolModel, const text = width .toFixed(0) .toString(); - dimensions.push( - - ); + dimensions.push(); } } -function AddVerticalSymbolDimension(symbol: ISymbolModel, +function AddVerticalSymbolDimension( + symbol: ISymbolModel, dimensions: React.ReactNode[], scale: number, depth: number @@ -201,18 +201,16 @@ function AddVerticalSymbolDimension(symbol: ISymbolModel, const text = height .toFixed(0) .toString(); - dimensions.push( - - ); + dimensions.push(); } } @@ -249,12 +247,16 @@ function AddHorizontalChildrenDimension( return; } - let xChildrenStart = TransformX(lastChild.properties.x, + let xChildrenStart = TransformX( + lastChild.properties.x, lastChild.properties.width, - lastChild.properties.positionReference); - let xChildrenEnd = TransformX(lastChild.properties.x, + lastChild.properties.positionReference + ); + let xChildrenEnd = TransformX( + lastChild.properties.x, lastChild.properties.width, - lastChild.properties.positionReference); + lastChild.properties.positionReference + ); // Find the min and max for (let i = container.children.length - 2; i >= 0; i--) { @@ -316,12 +318,16 @@ function AddVerticalChildrenDimension( return; } - let yChildrenStart = TransformY(lastChild.properties.y, + let yChildrenStart = TransformY( + lastChild.properties.y, lastChild.properties.height, - lastChild.properties.positionReference); - let yChildrenEnd = TransformY(lastChild.properties.y, + lastChild.properties.positionReference + ); + let yChildrenEnd = TransformY( + lastChild.properties.y, lastChild.properties.height, - lastChild.properties.positionReference); + lastChild.properties.positionReference + ); // Find the min and max for (let i = container.children.length - 2; i >= 0; i--) { @@ -398,9 +404,7 @@ function AddHorizontalBorrowerDimension( const restoredX = x + childCurrentTransform[0]; - marks.push( - restoredX - ); + marks.push(restoredX); } const restoredX = container.properties.x + currentTransform[0]; @@ -458,9 +462,7 @@ function AddVerticalBorrowerDimension( const restoredy = y + childCurrentTransform[1]; - marks.push( - restoredy - ); + marks.push(restoredy); } const restoredY = container.properties.y + currentTransform[1]; @@ -515,18 +517,16 @@ function AddVerticalSelfDimension( [yStart, yEnd] = [yEnd, yStart]; } - dimensions.push( - - ); + dimensions.push(); } function AddHorizontalSelfDimension( @@ -544,18 +544,16 @@ function AddHorizontalSelfDimension( const text = width .toFixed(0) .toString(); - dimensions.push( - - ); + dimensions.push(); } function AddHorizontalSelfMarginsDimension( @@ -574,18 +572,16 @@ function AddHorizontalSelfMarginsDimension( const text = left .toFixed(0) .toString(); - dimensions.push( - - ); + dimensions.push(); } const right = container.properties.margin.right; @@ -596,18 +592,16 @@ function AddHorizontalSelfMarginsDimension( const text = right .toFixed(0) .toString(); - dimensions.push( - - ); + dimensions.push(); } } @@ -633,18 +627,16 @@ function AddVerticalSelfMarginsDimension( [yStart, yEnd] = [yEnd, yStart]; } - dimensions.push( - - ); + dimensions.push(); } const bottom = container.properties.margin.bottom; if (bottom != null && bottom > 0) { @@ -659,17 +651,15 @@ function AddVerticalSelfMarginsDimension( [yStart, yEnd] = [yEnd, yStart]; } - dimensions.push( - - ); + dimensions.push(); } } diff --git a/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx b/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx index c2ad3e2..4665169 100644 --- a/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx +++ b/src/Components/SVG/Elements/SelectorContainer/SelectorContainer.tsx @@ -26,7 +26,11 @@ export function SelectorContainer(props: ISelectorContainerProps): JSX.Element { props.selected.properties.height ]; - ({ x, y, width, height } = RemoveMargin(x, y, width, height, + ({ x, y, width, height } = RemoveMargin( + x, + y, + width, + height, props.selected.properties.margin.left, props.selected.properties.margin.bottom, props.selected.properties.margin.top, diff --git a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx index 22f4800..d61b4aa 100644 --- a/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx +++ b/src/Components/SVG/Elements/SelectorSymbol/SelectorSymbol.tsx @@ -1,6 +1,6 @@ import '../Selector.scss'; import * as React from 'react'; -import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../../utils/default'; +import { SYMBOL_MARGIN } from '../../../../utils/default'; import { type ISymbolModel } from '../../../../Interfaces/ISymbolModel'; import { Selector } from '../Selector/Selector'; diff --git a/src/Components/SVG/Elements/SymbolLayer.tsx b/src/Components/SVG/Elements/SymbolLayer.tsx index 8969550..8610e7f 100644 --- a/src/Components/SVG/Elements/SymbolLayer.tsx +++ b/src/Components/SVG/Elements/SymbolLayer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { Symbol } from './Symbol'; interface ISymbolLayerProps { @@ -10,13 +10,11 @@ interface ISymbolLayerProps { export function SymbolLayer(props: ISymbolLayerProps): JSX.Element { const symbols: JSX.Element[] = []; props.symbols.forEach((symbol) => { - symbols.push( - - ); + symbols.push(); }); return ( diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index f3f9df1..86d3895 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,13 +1,13 @@ import * as React from 'react'; import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value, ALIGN_CENTER } from 'react-svg-pan-zoom'; +import { MAX_FRAMERATE } from '../../utils/default'; +import { type DrawParams } from '../Viewer/Viewer'; import { Container } from './Elements/Container'; import { SelectorContainer } from './Elements/SelectorContainer/SelectorContainer'; -import { MAX_FRAMERATE } from '../../utils/default'; import { SymbolLayer } from './Elements/SymbolLayer'; import { DimensionLayer } from './Elements/DimensionLayer'; import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol'; import { type IToolbarProps, Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar'; -import { type DrawParams } from '../Viewer/Viewer'; interface ISVGProps { className?: string diff --git a/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar-button.tsx b/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar-button.tsx index 91fed61..e606a70 100644 --- a/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar-button.tsx +++ b/src/Components/SVG/SVGReactPanZoom/ui-toolbar/toolbar-button.tsx @@ -47,8 +47,12 @@ export class ToolbarButton extends React.Component +