From 25cb0d14f7b3f2a35ba53af3042ce4350e82159d Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 10 Feb 2023 16:29:10 +0100 Subject: [PATCH 1/5] Run `eslint src --fix` --- src/Components/API/api.test.tsx | 16 +- src/Components/API/api.ts | 12 +- src/Components/App/Actions/Load.ts | 4 +- src/Components/App/Actions/MenuActions.ts | 8 +- src/Components/App/App.test.tsx | 2 +- src/Components/App/App.tsx | 22 +-- src/Components/Bar/Bar.tsx | 10 +- src/Components/Bar/BarIcon.tsx | 2 +- src/Components/Canvas/Canvas.tsx | 2 +- src/Components/Canvas/DimensionLayer.ts | 2 +- src/Components/Canvas/Selector.ts | 2 +- src/Components/Canvas/Symbol.ts | 2 +- src/Components/Category/Category.tsx | 4 +- src/Components/Components/Components.tsx | 10 +- .../ContainerProperties/ContainerForm.tsx | 108 ++++++------- .../ContainerProperties.test.tsx | 2 +- .../ContainerProperties.tsx | 6 +- src/Components/Editor/Actions/AddContainer.ts | 16 +- .../Editor/Actions/ContainerOperations.ts | 6 +- .../Editor/Actions/ContextMenuActions.ts | 16 +- src/Components/Editor/Actions/Save.ts | 6 +- src/Components/Editor/Actions/Shortcuts.ts | 4 +- .../Editor/Actions/SymbolOperations.ts | 8 +- .../Editor/Behaviors/AnchorBehaviors.ts | 2 +- src/Components/Editor/Behaviors/Behaviors.ts | 4 +- .../Editor/Behaviors/FlexBehaviors.ts | 2 +- .../Editor/Behaviors/PushBehaviors.ts | 2 +- .../Editor/Behaviors/RigidBodyBehaviors.ts | 4 +- .../Editor/Behaviors/SwapBehaviors.ts | 2 +- .../Editor/Behaviors/SymbolBehaviors.ts | 4 +- src/Components/Editor/Editor.tsx | 146 ++++++++++-------- .../ElementsList/ElementsSideBar.tsx | 14 +- .../FloatingButton/FloatingButton.tsx | 2 +- src/Components/FloatingButton/MenuButton.tsx | 2 +- src/Components/History/History.tsx | 4 +- src/Components/InputGroup/TextInputGroup.tsx | 2 +- .../LanguageProvider/LanguageProvider.tsx | 2 +- src/Components/MainMenu/MainMenu.tsx | 4 +- src/Components/Menu/Menu.tsx | 6 +- src/Components/Menu/MenuItem.tsx | 2 +- src/Components/Messages/Messages.tsx | 6 +- .../RadioGroupButtons/RadioGroupButtons.tsx | 2 +- src/Components/SVG/Elements/Container.tsx | 10 +- .../SVG/Elements/DepthDimensionLayer.tsx | 2 +- .../SVG/Elements/DimensionLayer.tsx | 4 +- .../SVG/Elements/Selector/Selector.tsx | 2 +- src/Components/SVG/Elements/Symbol.tsx | 2 +- src/Components/SVG/Elements/SymbolLayer.tsx | 2 +- src/Components/SVG/SVG.tsx | 6 +- src/Components/Select/Select.tsx | 2 +- .../Sidebar/ToggleSideBar/ToggleSideBar.tsx | 2 +- .../SymbolProperties/SymbolForm.tsx | 13 +- .../SymbolProperties/SymbolProperties.tsx | 2 +- src/Components/Symbols/Symbols.tsx | 10 +- src/Components/SymbolsList/SymbolsSidebar.tsx | 4 +- src/Components/UI/UI.tsx | 16 +- src/Components/UI/UseWorker.tsx | 8 +- src/Components/Viewer/Viewer.tsx | 6 +- src/Events/AppEvents.ts | 10 +- src/Events/EditorEvents.ts | 8 +- src/Interfaces/IAction.ts | 4 +- src/Interfaces/IAvailableContainer.ts | 16 +- src/Interfaces/IAvailableSymbol.ts | 6 +- src/Interfaces/IConfiguration.ts | 10 +- src/Interfaces/IContainerModel.ts | 2 +- src/Interfaces/IContainerProperties.ts | 12 +- src/Interfaces/IDimensionOptions.ts | 2 +- src/Interfaces/IDimensions.ts | 4 +- src/Interfaces/IEditorState.ts | 4 +- src/Interfaces/IGetFeedbackRequest.ts | 2 +- src/Interfaces/IGetFeedbackResponse.ts | 2 +- src/Interfaces/IHistoryState.ts | 4 +- src/Interfaces/IInputGroup.ts | 2 +- src/Interfaces/IMessage.ts | 2 +- src/Interfaces/IPattern.ts | 2 +- src/Interfaces/ISetContainerListRequest.ts | 6 +- src/Interfaces/ISetContainerListResponse.ts | 4 +- src/Interfaces/ISymbolModel.ts | 2 +- src/utils/default.ts | 14 +- src/utils/itertools.ts | 2 +- src/utils/saveload.ts | 8 +- src/utils/test-utils.tsx | 4 +- 82 files changed, 363 insertions(+), 342 deletions(-) diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index 53f3ae0..17804f2 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_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default'; import { FetchConfiguration } from './api'; diff --git a/src/Components/API/api.ts b/src/Components/API/api.ts index fd91133..aa14686 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,8 +9,7 @@ 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 AP // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (window.fetch) { return await fetch(url, { @@ -36,8 +35,7 @@ export async function FetchConfiguration(): 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, { 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..6535170 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 { type IEditorState } from '../../../Interfaces/IEditorState'; import { LoadState } from './Load'; import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default'; -import { AppState } from '../../../Enums/AppState'; +import { type AppState } from '../../../Enums/AppState'; export function NewEditor( editorState: IEditorState, diff --git a/src/Components/App/App.test.tsx b/src/Components/App/App.test.tsx index fd49185..3f0e07c 100644 --- a/src/Components/App/App.test.tsx +++ b/src/Components/App/App.test.tsx @@ -2,7 +2,7 @@ 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', () => { diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index 886e29c..a139c4c 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -1,9 +1,9 @@ -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 { type IEditorState } from '../../Interfaces/IEditorState'; import { LoadState } from './Actions/Load'; import { LoadEditor, NewEditor } from './Actions/MenuActions'; import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default'; @@ -116,15 +116,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 8f28635..cb41f2d 100644 --- a/src/Components/Bar/Bar.tsx +++ b/src/Components/Bar/Bar.tsx @@ -37,7 +37,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleComponents()}> + onClick={() => { props.toggleComponents(); }}> { props.isComponentsOpen ? @@ -47,7 +47,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleSymbols()}> + onClick={() => { props.toggleSymbols(); }}> { props.isSymbolsOpen ? @@ -57,7 +57,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleMessages()}> + onClick={() => { props.toggleMessages(); }}> { props.isMessagesOpen ? @@ -68,7 +68,7 @@ export function Bar(props: IBarProps): JSX.Element { props.toggleTimeline()}> + onClick={() => { props.toggleTimeline(); }}> { props.isHistoryOpen ? @@ -78,7 +78,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..2f20296 100644 --- a/src/Components/Bar/BarIcon.tsx +++ b/src/Components/Bar/BarIcon.tsx @@ -13,7 +13,7 @@ export function BarIcon(props: IBarIconProps): JSX.Element { diff --git a/src/Components/FloatingButton/MenuButton.tsx b/src/Components/FloatingButton/MenuButton.tsx index ce8ca3c..787931e 100644 --- a/src/Components/FloatingButton/MenuButton.tsx +++ b/src/Components/FloatingButton/MenuButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'; import { FloatingButton } from './FloatingButton'; -import { IUIProps } from '../UI/UI'; +import { type IUIProps } from '../UI/UI'; export function MenuButton(props: IUIProps): JSX.Element { return diff --git a/src/Components/History/History.tsx b/src/Components/History/History.tsx index e0be834..c93e7ec 100644 --- a/src/Components/History/History.tsx +++ b/src/Components/History/History.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { FixedSizeList as List } from 'react-window'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; +import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar'; interface IHistoryProps { @@ -23,7 +23,7 @@ export function History(props: IHistoryProps): JSX.Element { diff --git a/src/Components/Menu/Menu.tsx b/src/Components/Menu/Menu.tsx index a0fbc03..a91eb43 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 { @@ -136,7 +136,7 @@ function AddClassSpecificActions( text={action.text} title={action.title} shortcut={action.shortcut} - onClick={() => action.action(target)} />); + onClick={() => { action.action(target); }} />); }); children.push(
); }; @@ -155,7 +155,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/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..8afdf81 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'; @@ -67,7 +67,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 +108,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/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx index f4bff37..ac47f09 100644 --- a/src/Components/SVG/Elements/DepthDimensionLayer.tsx +++ b/src/Components/SVG/Elements/DepthDimensionLayer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { DIMENSION_MARGIN } from '../../../utils/default'; import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools'; import { TransformX } from '../../../utils/svg'; diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 62d8bef..7fb81ca 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Orientation } from '../../../Enums/Orientation'; import { Position } from '../../../Enums/Position'; -import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, @@ -12,7 +12,7 @@ import { import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { TransformX, TransformY } from '../../../utils/svg'; import { Dimension } from './Dimension'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; interface IDimensionLayerProps { containers: Map diff --git a/src/Components/SVG/Elements/Selector/Selector.tsx b/src/Components/SVG/Elements/Selector/Selector.tsx index c7baf92..4f3cfee 100644 --- a/src/Components/SVG/Elements/Selector/Selector.tsx +++ b/src/Components/SVG/Elements/Selector/Selector.tsx @@ -1,6 +1,6 @@ import './Selector.scss'; import * as React from 'react'; -import { IContainerModel } from '../../../../Interfaces/IContainerModel'; +import { type IContainerModel } from '../../../../Interfaces/IContainerModel'; import { SHOW_SELECTOR_TEXT } from '../../../../utils/default'; import { GetAbsolutePosition } from '../../../../utils/itertools'; import { RemoveMargin } from '../../../../utils/svg'; diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 09a19f9..8269557 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -1,6 +1,6 @@ import { Interweave } from 'interweave'; import * as React from 'react'; -import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default'; interface ISymbolProps { diff --git a/src/Components/SVG/Elements/SymbolLayer.tsx b/src/Components/SVG/Elements/SymbolLayer.tsx index 8969550..95a6463 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 { diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index cdb11de..485f344 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom'; +import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom'; import { Container } from './Elements/Container'; -import { IContainerModel } from '../../Interfaces/IContainerModel'; +import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { Selector } from './Elements/Selector/Selector'; import { DepthDimensionLayer } from './Elements/DepthDimensionLayer'; import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default'; import { SymbolLayer } from './Elements/SymbolLayer'; -import { ISymbolModel } from '../../Interfaces/ISymbolModel'; +import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { DimensionLayer } from './Elements/DimensionLayer'; interface ISVGProps { diff --git a/src/Components/Select/Select.tsx b/src/Components/Select/Select.tsx index 5add140..5a94107 100644 --- a/src/Components/Select/Select.tsx +++ b/src/Components/Select/Select.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IInputGroup } from '../../Interfaces/IInputGroup'; +import { type IInputGroup } from '../../Interfaces/IInputGroup'; interface ISelectProps { labelKey?: string diff --git a/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx b/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx index 61a35d9..decbd81 100644 --- a/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx +++ b/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx @@ -13,7 +13,7 @@ export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps) diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx index f85b63c..cc7e772 100644 --- a/src/Components/UI/UI.tsx +++ b/src/Components/UI/UI.tsx @@ -4,17 +4,17 @@ import { History } from '../History/History'; import { Bar, BAR_WIDTH } from '../Bar/Bar'; import { Symbols } from '../Symbols/Symbols'; import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar'; -import { PropertyType } from '../../Enums/PropertyType'; +import { type PropertyType } from '../../Enums/PropertyType'; import { Messages } from '../Messages/Messages'; import { Sidebar } from '../Sidebar/Sidebar'; import { Components } from '../Components/Components'; import { Viewer } from '../Viewer/Viewer'; import { Settings } from '../Settings/Settings'; -import { IMessage } from '../../Interfaces/IMessage'; +import { type IMessage } from '../../Interfaces/IMessage'; import { DISABLE_API } from '../../utils/default'; import { UseWorker, UseAsync } from './UseWorker'; import { FindContainerById } from '../../utils/itertools'; -import { IEditorState } from '../../Interfaces/IEditorState'; +import { type IEditorState } from '../../Interfaces/IEditorState'; import { GetCurrentHistoryState } from '../Editor/Editor'; import { Text } from '../Text/Text'; @@ -116,7 +116,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { selectContainer={methods.selectContainer} addContainer={methods.addContainerAt} isExpanded ={false} - onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) } + onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } } />; break; case SidebarType.ComponentsExpanded: @@ -137,7 +137,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { selectContainer={methods.selectContainer} addContainer={methods.addContainerAt} isExpanded ={true} - onExpandChange={() => setOrToggleSidebar(SidebarType.Components) } + onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } } />; break; case SidebarType.Symbols: @@ -153,7 +153,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { onPropertyChange={methods.onSymbolPropertyChange} selectSymbol={methods.selectSymbol} isExpanded ={false} - onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) } + onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } } />; break; case SidebarType.SymbolsExpanded: @@ -169,7 +169,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { onPropertyChange={methods.onSymbolPropertyChange} selectSymbol={methods.selectSymbol} isExpanded ={true} - onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)} + onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }} />; break; @@ -187,7 +187,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { leftChildren = setMessages([])} + clearMessage={() => { setMessages([]); }} />; break; diff --git a/src/Components/UI/UseWorker.tsx b/src/Components/UI/UseWorker.tsx index c4584af..9f7b775 100644 --- a/src/Components/UI/UseWorker.tsx +++ b/src/Components/UI/UseWorker.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest'; -import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; -import { IMessage } from '../../Interfaces/IMessage'; +import { type IHistoryState } from '../../Interfaces/IHistoryState'; +import { type IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest'; +import { type IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; +import { type IMessage } from '../../Interfaces/IMessage'; import { GetCircularReplacer } from '../../utils/saveload'; // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions diff --git a/src/Components/Viewer/Viewer.tsx b/src/Components/Viewer/Viewer.tsx index cdf630e..bd6d0ab 100644 --- a/src/Components/Viewer/Viewer.tsx +++ b/src/Components/Viewer/Viewer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { IContainerModel } from '../../Interfaces/IContainerModel'; -import { IHistoryState } from '../../Interfaces/IHistoryState'; -import { IPoint } from '../../Interfaces/IPoint'; +import { type IContainerModel } from '../../Interfaces/IContainerModel'; +import { type IHistoryState } from '../../Interfaces/IHistoryState'; +import { type IPoint } from '../../Interfaces/IPoint'; import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools'; import { BAR_WIDTH } from '../Bar/Bar'; diff --git a/src/Events/AppEvents.ts b/src/Events/AppEvents.ts index e2976c9..ec3fd59 100644 --- a/src/Events/AppEvents.ts +++ b/src/Events/AppEvents.ts @@ -1,9 +1,9 @@ import { useEffect } from 'react'; import { AppState } from '../Enums/AppState'; -import { IConfiguration } from '../Interfaces/IConfiguration'; -import { IEditorState } from '../Interfaces/IEditorState'; -import { IHistoryState } from '../Interfaces/IHistoryState'; -import { ILanguage } from '../Interfaces/ILanguage'; +import { type IConfiguration } from '../Interfaces/IConfiguration'; +import { type IEditorState } from '../Interfaces/IEditorState'; +import { type IHistoryState } from '../Interfaces/IHistoryState'; +import { type ILanguage } from '../Interfaces/ILanguage'; import { languageOptions, translations } from '../Translations/Translations'; import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default'; import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload'; @@ -49,7 +49,7 @@ export function UseCustomEvents( const funcs = new Map void>(); for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { - return event.func({ + event.func({ root, languageContext, setEditor, diff --git a/src/Events/EditorEvents.ts b/src/Events/EditorEvents.ts index ff645a3..d4e25e9 100644 --- a/src/Events/EditorEvents.ts +++ b/src/Events/EditorEvents.ts @@ -3,9 +3,9 @@ import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations'; import { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations'; import { GetCurrentHistory } from '../Components/Editor/Editor'; -import { IConfiguration } from '../Interfaces/IConfiguration'; -import { IEditorState } from '../Interfaces/IEditorState'; -import { IHistoryState } from '../Interfaces/IHistoryState'; +import { type IConfiguration } from '../Interfaces/IConfiguration'; +import { type IEditorState } from '../Interfaces/IEditorState'; +import { type IHistoryState } from '../Interfaces/IHistoryState'; import { FindContainerById } from '../utils/itertools'; import { GetCircularReplacer } from '../utils/saveload'; @@ -61,7 +61,7 @@ export function UseCustomEvents( for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { - return event.func({ + event.func({ root, editorState, setNewHistory, diff --git a/src/Interfaces/IAction.ts b/src/Interfaces/IAction.ts index cf0bed6..fc58a2b 100644 --- a/src/Interfaces/IAction.ts +++ b/src/Interfaces/IAction.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { AddMethod } from '../Enums/AddMethod'; -import { IImage } from './IImage'; +import { type AddMethod } from '../Enums/AddMethod'; +import { type IImage } from './IImage'; export interface IAction { Id: string diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index dab4e59..d655ab2 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/src/Interfaces/IAvailableContainer.ts @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { AddMethod } from '../Enums/AddMethod'; -import { PositionReference } from '../Enums/PositionReference'; -import { IAction } from './IAction'; -import { IMargin } from './IMargin'; -import { Orientation } from '../Enums/Orientation'; -import { IKeyValue } from './IKeyValue'; -import { IStyle } from './IStyle'; -import { IDimensions } from './IDimensions'; +import { type AddMethod } from '../Enums/AddMethod'; +import { type PositionReference } from '../Enums/PositionReference'; +import { type IAction } from './IAction'; +import { type IMargin } from './IMargin'; +import { type Orientation } from '../Enums/Orientation'; +import { type IKeyValue } from './IKeyValue'; +import { type IStyle } from './IStyle'; +import { type IDimensions } from './IDimensions'; /** Model of available container used in application configuration */ export interface IAvailableContainer { diff --git a/src/Interfaces/IAvailableSymbol.ts b/src/Interfaces/IAvailableSymbol.ts index e69a996..71861d4 100644 --- a/src/Interfaces/IAvailableSymbol.ts +++ b/src/Interfaces/IAvailableSymbol.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { PositionReference } from '../Enums/PositionReference'; -import { IAvailableContainer } from './IAvailableContainer'; -import { IImage } from './IImage'; +import { type PositionReference } from '../Enums/PositionReference'; +import { type IAvailableContainer } from './IAvailableContainer'; +import { type IImage } from './IImage'; /** * Model of available symbol to configure the application */ diff --git a/src/Interfaces/IConfiguration.ts b/src/Interfaces/IConfiguration.ts index 12b0452..812f5ab 100644 --- a/src/Interfaces/IConfiguration.ts +++ b/src/Interfaces/IConfiguration.ts @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { IAPIConfiguration } from './IAPIConfiguration'; -import { IAvailableContainer } from './IAvailableContainer'; -import { IAvailableSymbol } from './IAvailableSymbol'; -import { ICategory } from './ICategory'; -import { IPattern } from './IPattern'; +import { type IAPIConfiguration } from './IAPIConfiguration'; +import { type IAvailableContainer } from './IAvailableContainer'; +import { type IAvailableSymbol } from './IAvailableSymbol'; +import { type ICategory } from './ICategory'; +import { type IPattern } from './IPattern'; /** Model of configuration for the application to configure it */ export interface IConfiguration { diff --git a/src/Interfaces/IContainerModel.ts b/src/Interfaces/IContainerModel.ts index 42d966b..8a2e7bc 100644 --- a/src/Interfaces/IContainerModel.ts +++ b/src/Interfaces/IContainerModel.ts @@ -1,4 +1,4 @@ -import { IContainerProperties } from './IContainerProperties'; +import { type IContainerProperties } from './IContainerProperties'; export interface IContainerModel { children: string[] diff --git a/src/Interfaces/IContainerProperties.ts b/src/Interfaces/IContainerProperties.ts index 254d6ca..63e18cd 100644 --- a/src/Interfaces/IContainerProperties.ts +++ b/src/Interfaces/IContainerProperties.ts @@ -1,9 +1,9 @@ -import { PositionReference } from '../Enums/PositionReference'; -import { IMargin } from './IMargin'; -import { Orientation } from '../Enums/Orientation'; -import { IKeyValue } from './IKeyValue'; -import { IStyle } from './IStyle'; -import { IDimensions } from './IDimensions'; +import { type PositionReference } from '../Enums/PositionReference'; +import { type IMargin } from './IMargin'; +import { type Orientation } from '../Enums/Orientation'; +import { type IKeyValue } from './IKeyValue'; +import { type IStyle } from './IStyle'; +import { type IDimensions } from './IDimensions'; /** * Properties of a container diff --git a/src/Interfaces/IDimensionOptions.ts b/src/Interfaces/IDimensionOptions.ts index 4c44adf..37bdf4b 100644 --- a/src/Interfaces/IDimensionOptions.ts +++ b/src/Interfaces/IDimensionOptions.ts @@ -1,4 +1,4 @@ -import { Position } from '../Enums/Position'; +import { type Position } from '../Enums/Position'; export interface IDimensionOptions { diff --git a/src/Interfaces/IDimensions.ts b/src/Interfaces/IDimensions.ts index c87bce7..3b4b906 100644 --- a/src/Interfaces/IDimensions.ts +++ b/src/Interfaces/IDimensions.ts @@ -1,6 +1,6 @@ -import { IDimensionOptions } from './IDimensionOptions'; -import { Orientation } from '../Enums/Orientation'; +import { type IDimensionOptions } from './IDimensionOptions'; +import { type Orientation } from '../Enums/Orientation'; export interface IDimensions { diff --git a/src/Interfaces/IEditorState.ts b/src/Interfaces/IEditorState.ts index 495a868..90d01ae 100644 --- a/src/Interfaces/IEditorState.ts +++ b/src/Interfaces/IEditorState.ts @@ -1,5 +1,5 @@ -import { IConfiguration } from './IConfiguration'; -import { IHistoryState } from './IHistoryState'; +import { type IConfiguration } from './IConfiguration'; +import { type IHistoryState } from './IHistoryState'; export interface IEditorState { history: IHistoryState[] diff --git a/src/Interfaces/IGetFeedbackRequest.ts b/src/Interfaces/IGetFeedbackRequest.ts index ff3d665..60919e2 100644 --- a/src/Interfaces/IGetFeedbackRequest.ts +++ b/src/Interfaces/IGetFeedbackRequest.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { IHistoryState } from './IHistoryState'; +import { type IHistoryState } from './IHistoryState'; export interface IGetFeedbackRequest { /** Current application state */ diff --git a/src/Interfaces/IGetFeedbackResponse.ts b/src/Interfaces/IGetFeedbackResponse.ts index 4e19d7d..a8bdb88 100644 --- a/src/Interfaces/IGetFeedbackResponse.ts +++ b/src/Interfaces/IGetFeedbackResponse.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { IMessage } from './IMessage'; +import { type IMessage } from './IMessage'; export interface IGetFeedbackResponse { messages: IMessage[] diff --git a/src/Interfaces/IHistoryState.ts b/src/Interfaces/IHistoryState.ts index e5f0428..8af48a7 100644 --- a/src/Interfaces/IHistoryState.ts +++ b/src/Interfaces/IHistoryState.ts @@ -1,5 +1,5 @@ -import { IContainerModel } from './IContainerModel'; -import { ISymbolModel } from './ISymbolModel'; +import { type IContainerModel } from './IContainerModel'; +import { type ISymbolModel } from './ISymbolModel'; export interface IHistoryState { /** Last editor action */ diff --git a/src/Interfaces/IInputGroup.ts b/src/Interfaces/IInputGroup.ts index bad2922..905ce8a 100644 --- a/src/Interfaces/IInputGroup.ts +++ b/src/Interfaces/IInputGroup.ts @@ -1,4 +1,4 @@ -import React from 'react'; +import type React from 'react'; export interface IInputGroup { key: string diff --git a/src/Interfaces/IMessage.ts b/src/Interfaces/IMessage.ts index 605843e..7cbb8cb 100644 --- a/src/Interfaces/IMessage.ts +++ b/src/Interfaces/IMessage.ts @@ -1,4 +1,4 @@ -import { MessageType } from '../Enums/MessageType'; +import { type MessageType } from '../Enums/MessageType'; export interface IMessage { text: string diff --git a/src/Interfaces/IPattern.ts b/src/Interfaces/IPattern.ts index 27b0ee1..5a1f424 100644 --- a/src/Interfaces/IPattern.ts +++ b/src/Interfaces/IPattern.ts @@ -1,4 +1,4 @@ -import { IAvailableContainer } from './IAvailableContainer'; +import { type IAvailableContainer } from './IAvailableContainer'; export interface IPattern { /** diff --git a/src/Interfaces/ISetContainerListRequest.ts b/src/Interfaces/ISetContainerListRequest.ts index 2a413a7..a26ce7d 100644 --- a/src/Interfaces/ISetContainerListRequest.ts +++ b/src/Interfaces/ISetContainerListRequest.ts @@ -1,6 +1,6 @@ -import { IAction } from './IAction'; -import { IContainerModel } from './IContainerModel'; -import { IHistoryState } from './IHistoryState'; +import { type IAction } from './IAction'; +import { type IContainerModel } from './IContainerModel'; +import { type IHistoryState } from './IHistoryState'; /* eslint-disable @typescript-eslint/naming-convention */ export interface ISetContainerListRequest { diff --git a/src/Interfaces/ISetContainerListResponse.ts b/src/Interfaces/ISetContainerListResponse.ts index 4c147fa..b9f1d0a 100644 --- a/src/Interfaces/ISetContainerListResponse.ts +++ b/src/Interfaces/ISetContainerListResponse.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { AddMethod } from '../Enums/AddMethod'; -import { IAvailableContainer } from './IAvailableContainer'; +import { type AddMethod } from '../Enums/AddMethod'; +import { type IAvailableContainer } from './IAvailableContainer'; export interface ISetContainerListResponse { Containers: IAvailableContainer[] diff --git a/src/Interfaces/ISymbolModel.ts b/src/Interfaces/ISymbolModel.ts index 3a71290..ca0604b 100644 --- a/src/Interfaces/ISymbolModel.ts +++ b/src/Interfaces/ISymbolModel.ts @@ -1,4 +1,4 @@ -import { IAvailableSymbol } from './IAvailableSymbol'; +import { type IAvailableSymbol } from './IAvailableSymbol'; export interface ISymbolModel { /** Identifier */ diff --git a/src/utils/default.ts b/src/utils/default.ts index 632c12a..fe64b39 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -1,11 +1,11 @@ import { PositionReference } from '../Enums/PositionReference'; -import { IAvailableContainer } from '../Interfaces/IAvailableContainer'; -import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; -import { IConfiguration } from '../Interfaces/IConfiguration'; -import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel'; -import { IContainerProperties } from '../Interfaces/IContainerProperties'; -import { IEditorState } from '../Interfaces/IEditorState'; -import { ISymbolModel } from '../Interfaces/ISymbolModel'; +import { type IAvailableContainer } from '../Interfaces/IAvailableContainer'; +import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; +import { type IConfiguration } from '../Interfaces/IConfiguration'; +import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel'; +import { type IContainerProperties } from '../Interfaces/IContainerProperties'; +import { type IEditorState } from '../Interfaces/IEditorState'; +import { type ISymbolModel } from '../Interfaces/ISymbolModel'; import { Orientation } from '../Enums/Orientation'; import { AppState } from '../Enums/AppState'; diff --git a/src/utils/itertools.ts b/src/utils/itertools.ts index 9efef1f..2a696b4 100644 --- a/src/utils/itertools.ts +++ b/src/utils/itertools.ts @@ -1,4 +1,4 @@ -import { IContainerModel } from '../Interfaces/IContainerModel'; +import { type IContainerModel } from '../Interfaces/IContainerModel'; export function * MakeChildrenIterator(containers: Map, childrenIds: string[]): Generator { for (const childId of childrenIds) { diff --git a/src/utils/saveload.ts b/src/utils/saveload.ts index f862901..8f243f4 100644 --- a/src/utils/saveload.ts +++ b/src/utils/saveload.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { IEditorState } from '../Interfaces/IEditorState'; -import { IHistoryState } from '../Interfaces/IHistoryState'; -import { IContainerModel } from '../Interfaces/IContainerModel'; -import { ISymbolModel } from '../Interfaces/ISymbolModel'; +import { type IEditorState } from '../Interfaces/IEditorState'; +import { type IHistoryState } from '../Interfaces/IHistoryState'; +import { type IContainerModel } from '../Interfaces/IContainerModel'; +import { type ISymbolModel } from '../Interfaces/ISymbolModel'; /** * Revive the Editor state diff --git a/src/utils/test-utils.tsx b/src/utils/test-utils.tsx index aec5ae7..29f5f4d 100644 --- a/src/utils/test-utils.tsx +++ b/src/utils/test-utils.tsx @@ -1,6 +1,6 @@ /* eslint-disable import/export */ -import * as React from 'react'; -import { cleanup, render, RenderResult } from '@testing-library/react'; +import type * as React from 'react'; +import { cleanup, render, type RenderResult } from '@testing-library/react'; import { afterEach } from 'vitest'; afterEach(() => { From 67678c0f3a19be33d2810ddb9beda365b84f2d07 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Fri, 17 Feb 2023 09:52:08 +0100 Subject: [PATCH 2/5] Add more rules --- .eslintrc.cjs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 748a5bb..807e39a 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -31,9 +31,12 @@ module.exports = { 'prefer-arrow-callback': 'error', 'func-style': ['error', 'declaration'], 'space-before-function-paren': ['error', 'never'], + 'max-len': ['error', { 'code': 120 }], + 'max-depth': ['error', 4], // Import/export 'import/no-default-export': 'error', + 'import/no-duplicates': 'error', // Typescript overload indent: 'off', From 9bbdac088eec5041ec8b58cdd5b3282df6d7a15c Mon Sep 17 00:00:00 2001 From: Eric Nguyen Date: Fri, 17 Feb 2023 09:34:48 +0000 Subject: [PATCH 3/5] Revert "Run `eslint src --fix`" --- src/Components/API/api.test.tsx | 16 +- src/Components/API/api.ts | 12 +- src/Components/App/Actions/Load.ts | 4 +- src/Components/App/Actions/MenuActions.ts | 8 +- src/Components/App/App.test.tsx | 2 +- src/Components/App/App.tsx | 22 ++- src/Components/Bar/Bar.tsx | 10 +- src/Components/Bar/BarIcon.tsx | 2 +- src/Components/Canvas/Canvas.tsx | 2 +- src/Components/Canvas/DimensionLayer.ts | 2 +- src/Components/Canvas/Selector.ts | 2 +- src/Components/Canvas/Symbol.ts | 2 +- src/Components/Category/Category.tsx | 4 +- src/Components/Components/Components.tsx | 10 +- .../ContainerProperties/ContainerForm.tsx | 108 +++++++------ .../ContainerProperties.test.tsx | 2 +- .../ContainerProperties.tsx | 6 +- src/Components/Editor/Actions/AddContainer.ts | 16 +- .../Editor/Actions/ContainerOperations.ts | 6 +- .../Editor/Actions/ContextMenuActions.ts | 16 +- src/Components/Editor/Actions/Save.ts | 6 +- src/Components/Editor/Actions/Shortcuts.ts | 4 +- .../Editor/Actions/SymbolOperations.ts | 8 +- .../Editor/Behaviors/AnchorBehaviors.ts | 2 +- src/Components/Editor/Behaviors/Behaviors.ts | 4 +- .../Editor/Behaviors/FlexBehaviors.ts | 2 +- .../Editor/Behaviors/PushBehaviors.ts | 2 +- .../Editor/Behaviors/RigidBodyBehaviors.ts | 4 +- .../Editor/Behaviors/SwapBehaviors.ts | 2 +- .../Editor/Behaviors/SymbolBehaviors.ts | 4 +- src/Components/Editor/Editor.tsx | 146 ++++++++---------- .../ElementsList/ElementsSideBar.tsx | 14 +- .../FloatingButton/FloatingButton.tsx | 2 +- src/Components/FloatingButton/MenuButton.tsx | 2 +- src/Components/History/History.tsx | 4 +- src/Components/InputGroup/TextInputGroup.tsx | 2 +- .../LanguageProvider/LanguageProvider.tsx | 2 +- src/Components/MainMenu/MainMenu.tsx | 4 +- src/Components/Menu/Menu.tsx | 6 +- src/Components/Menu/MenuItem.tsx | 2 +- src/Components/Messages/Messages.tsx | 6 +- .../RadioGroupButtons/RadioGroupButtons.tsx | 2 +- src/Components/SVG/Elements/Container.tsx | 10 +- .../SVG/Elements/DepthDimensionLayer.tsx | 2 +- .../SVG/Elements/DimensionLayer.tsx | 4 +- .../SVG/Elements/Selector/Selector.tsx | 2 +- src/Components/SVG/Elements/Symbol.tsx | 2 +- src/Components/SVG/Elements/SymbolLayer.tsx | 2 +- src/Components/SVG/SVG.tsx | 6 +- src/Components/Select/Select.tsx | 2 +- .../Sidebar/ToggleSideBar/ToggleSideBar.tsx | 2 +- .../SymbolProperties/SymbolForm.tsx | 13 +- .../SymbolProperties/SymbolProperties.tsx | 2 +- src/Components/Symbols/Symbols.tsx | 10 +- src/Components/SymbolsList/SymbolsSidebar.tsx | 4 +- src/Components/UI/UI.tsx | 16 +- src/Components/UI/UseWorker.tsx | 8 +- src/Components/Viewer/Viewer.tsx | 6 +- src/Events/AppEvents.ts | 10 +- src/Events/EditorEvents.ts | 8 +- src/Interfaces/IAction.ts | 4 +- src/Interfaces/IAvailableContainer.ts | 16 +- src/Interfaces/IAvailableSymbol.ts | 6 +- src/Interfaces/IConfiguration.ts | 10 +- src/Interfaces/IContainerModel.ts | 2 +- src/Interfaces/IContainerProperties.ts | 12 +- src/Interfaces/IDimensionOptions.ts | 2 +- src/Interfaces/IDimensions.ts | 4 +- src/Interfaces/IEditorState.ts | 4 +- src/Interfaces/IGetFeedbackRequest.ts | 2 +- src/Interfaces/IGetFeedbackResponse.ts | 2 +- src/Interfaces/IHistoryState.ts | 4 +- src/Interfaces/IInputGroup.ts | 2 +- src/Interfaces/IMessage.ts | 2 +- src/Interfaces/IPattern.ts | 2 +- src/Interfaces/ISetContainerListRequest.ts | 6 +- src/Interfaces/ISetContainerListResponse.ts | 4 +- src/Interfaces/ISymbolModel.ts | 2 +- src/utils/default.ts | 14 +- src/utils/itertools.ts | 2 +- src/utils/saveload.ts | 8 +- src/utils/test-utils.tsx | 4 +- 82 files changed, 342 insertions(+), 363 deletions(-) diff --git a/src/Components/API/api.test.tsx b/src/Components/API/api.test.tsx index 17804f2..53f3ae0 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 { 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 { 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 { DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default'; import { FetchConfiguration } from './api'; diff --git a/src/Components/API/api.ts b/src/Components/API/api.ts index aa14686..fd91133 100644 --- a/src/Components/API/api.ts +++ b/src/Components/API/api.ts @@ -1,6 +1,6 @@ -import { type IConfiguration } from '../../Interfaces/IConfiguration'; -import { type ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest'; -import { type ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse'; +import { IConfiguration } from '../../Interfaces/IConfiguration'; +import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest'; +import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse'; import { GetCircularReplacer } from '../../utils/saveload'; /** @@ -9,7 +9,8 @@ import { GetCircularReplacer } from '../../utils/saveload'; */ export async function FetchConfiguration(): Promise { const url = import.meta.env.VITE_API_FETCH_URL; - // @ts-expect-error The test library cannot use the Fetch AP + // The test library cannot use the Fetch API + // @ts-expect-error // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (window.fetch) { return await fetch(url, { @@ -35,7 +36,8 @@ export async function FetchConfiguration(): 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()); - // @ts-expect-error The test library cannot use the Fetch API + // The test library cannot use the Fetch API + // @ts-expect-error // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions if (window.fetch) { return await fetch(url, { diff --git a/src/Components/App/Actions/Load.ts b/src/Components/App/Actions/Load.ts index 356c23a..6543052 100644 --- a/src/Components/App/Actions/Load.ts +++ b/src/Components/App/Actions/Load.ts @@ -1,6 +1,6 @@ -import { type Dispatch, type SetStateAction } from 'react'; +import { Dispatch, SetStateAction } from 'react'; import { AppState } from '../../../Enums/AppState'; -import { type IEditorState } from '../../../Interfaces/IEditorState'; +import { 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 6535170..9f7da32 100644 --- a/src/Components/App/Actions/MenuActions.ts +++ b/src/Components/App/Actions/MenuActions.ts @@ -1,10 +1,10 @@ -import { type Dispatch, type SetStateAction } from 'react'; -import { type IConfiguration } from '../../../Interfaces/IConfiguration'; +import { Dispatch, SetStateAction } from 'react'; +import { IConfiguration } from '../../../Interfaces/IConfiguration'; import { FetchConfiguration } from '../../API/api'; -import { type IEditorState } from '../../../Interfaces/IEditorState'; +import { IEditorState } from '../../../Interfaces/IEditorState'; import { LoadState } from './Load'; import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default'; -import { type AppState } from '../../../Enums/AppState'; +import { AppState } from '../../../Enums/AppState'; export function NewEditor( editorState: IEditorState, diff --git a/src/Components/App/App.test.tsx b/src/Components/App/App.test.tsx index 3f0e07c..fd49185 100644 --- a/src/Components/App/App.test.tsx +++ b/src/Components/App/App.test.tsx @@ -2,7 +2,7 @@ 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, type RenderResult } from '../../utils/test-utils'; +import { fireEvent, render, RenderResult } from '../../utils/test-utils'; import { App } from './App'; describe.concurrent('App', () => { diff --git a/src/Components/App/App.tsx b/src/Components/App/App.tsx index a139c4c..886e29c 100644 --- a/src/Components/App/App.tsx +++ b/src/Components/App/App.tsx @@ -1,9 +1,9 @@ -import React, { type Dispatch, type SetStateAction, useContext, useEffect, useRef, useState } from 'react'; +import React, { Dispatch, SetStateAction, useContext, useEffect, useRef, useState } from 'react'; import { UseCustomEvents } from '../../Events/AppEvents'; import { MainMenu } from '../MainMenu/MainMenu'; -import { ContainerModel, type IContainerModel } from '../../Interfaces/IContainerModel'; +import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel'; import { Editor } from '../Editor/Editor'; -import { type IEditorState } from '../../Interfaces/IEditorState'; +import { IEditorState } from '../../Interfaces/IEditorState'; import { LoadState } from './Actions/Load'; import { LoadEditor, NewEditor } from './Actions/MenuActions'; import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default'; @@ -116,17 +116,15 @@ export function App(props: IAppProps): JSX.Element { setAppState(AppState.Loading); NewEditor( editorState, - (newEditor) => { setEditorState(newEditor); }, - () => { setAppState(AppState.Loaded); } - ); - }} - loadEditor={(files: FileList | null) => { - LoadEditor( - files, - setEditorState, - setAppState + (newEditor) => setEditorState(newEditor), + () => setAppState(AppState.Loaded) ); }} + loadEditor={(files: FileList | null) => LoadEditor( + files, + setEditorState, + setAppState + )} /> ); diff --git a/src/Components/Bar/Bar.tsx b/src/Components/Bar/Bar.tsx index cb41f2d..8f28635 100644 --- a/src/Components/Bar/Bar.tsx +++ b/src/Components/Bar/Bar.tsx @@ -37,7 +37,7 @@ export function Bar(props: IBarProps): JSX.Element { { props.toggleComponents(); }}> + onClick={() => props.toggleComponents()}> { props.isComponentsOpen ? @@ -47,7 +47,7 @@ export function Bar(props: IBarProps): JSX.Element { { props.toggleSymbols(); }}> + onClick={() => props.toggleSymbols()}> { props.isSymbolsOpen ? @@ -57,7 +57,7 @@ export function Bar(props: IBarProps): JSX.Element { { props.toggleMessages(); }}> + onClick={() => props.toggleMessages()}> { props.isMessagesOpen ? @@ -68,7 +68,7 @@ export function Bar(props: IBarProps): JSX.Element { { props.toggleTimeline(); }}> + onClick={() => props.toggleTimeline()}> { props.isHistoryOpen ? @@ -78,7 +78,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 2f20296..9324dc0 100644 --- a/src/Components/Bar/BarIcon.tsx +++ b/src/Components/Bar/BarIcon.tsx @@ -13,7 +13,7 @@ export function BarIcon(props: IBarIconProps): JSX.Element { diff --git a/src/Components/FloatingButton/MenuButton.tsx b/src/Components/FloatingButton/MenuButton.tsx index 787931e..ce8ca3c 100644 --- a/src/Components/FloatingButton/MenuButton.tsx +++ b/src/Components/FloatingButton/MenuButton.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'; import { FloatingButton } from './FloatingButton'; -import { type IUIProps } from '../UI/UI'; +import { IUIProps } from '../UI/UI'; export function MenuButton(props: IUIProps): JSX.Element { return diff --git a/src/Components/History/History.tsx b/src/Components/History/History.tsx index c93e7ec..e0be834 100644 --- a/src/Components/History/History.tsx +++ b/src/Components/History/History.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { FixedSizeList as List } from 'react-window'; -import { type IHistoryState } from '../../Interfaces/IHistoryState'; +import { IHistoryState } from '../../Interfaces/IHistoryState'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar'; interface IHistoryProps { @@ -23,7 +23,7 @@ export function History(props: IHistoryProps): JSX.Element { diff --git a/src/Components/Menu/Menu.tsx b/src/Components/Menu/Menu.tsx index a91eb43..a0fbc03 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 { type IPoint } from '../../Interfaces/IPoint'; +import { IPoint } from '../../Interfaces/IPoint'; import { MenuItem } from './MenuItem'; interface IMenuProps { @@ -136,7 +136,7 @@ function AddClassSpecificActions( text={action.text} title={action.title} shortcut={action.shortcut} - onClick={() => { action.action(target); }} />); + onClick={() => action.action(target)} />); }); children.push(
); }; @@ -155,7 +155,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 1c0eede..ac21d10 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 9326403..7e71d62 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 { type IHistoryState } from '../../Interfaces/IHistoryState'; -import { type IMessage } from '../../Interfaces/IMessage'; +import { IHistoryState } from '../../Interfaces/IHistoryState'; +import { 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/RadioGroupButtons.tsx b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx index d27496e..751da23 100644 --- a/src/Components/RadioGroupButtons/RadioGroupButtons.tsx +++ b/src/Components/RadioGroupButtons/RadioGroupButtons.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { type IInputGroup } from '../../Interfaces/IInputGroup'; +import { 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 8afdf81..ac01ed0 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, type Node } from 'interweave'; -import { type IContainerModel } from '../../../Interfaces/IContainerModel'; -import { type IContainerProperties } from '../../../Interfaces/IContainerProperties'; +import { Interweave, Node } from 'interweave'; +import { IContainerModel } from '../../../Interfaces/IContainerModel'; +import { IContainerProperties } from '../../../Interfaces/IContainerProperties'; import { Camelize } from '../../../utils/stringtools'; import { SHOW_TEXT } from '../../../utils/default'; import { FindContainerById } from '../../../utils/itertools'; @@ -67,7 +67,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 +108,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: Record = {}; + const attributes: { [att: string]: string | object | null } = {}; node.getAttributeNames().forEach(attName => { const attributeValue = node.getAttribute(attName); if (attributeValue === null) { diff --git a/src/Components/SVG/Elements/DepthDimensionLayer.tsx b/src/Components/SVG/Elements/DepthDimensionLayer.tsx index ac47f09..f4bff37 100644 --- a/src/Components/SVG/Elements/DepthDimensionLayer.tsx +++ b/src/Components/SVG/Elements/DepthDimensionLayer.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { type IContainerModel } from '../../../Interfaces/IContainerModel'; +import { IContainerModel } from '../../../Interfaces/IContainerModel'; import { DIMENSION_MARGIN } from '../../../utils/default'; import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools'; import { TransformX } from '../../../utils/svg'; diff --git a/src/Components/SVG/Elements/DimensionLayer.tsx b/src/Components/SVG/Elements/DimensionLayer.tsx index 7fb81ca..62d8bef 100644 --- a/src/Components/SVG/Elements/DimensionLayer.tsx +++ b/src/Components/SVG/Elements/DimensionLayer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Orientation } from '../../../Enums/Orientation'; import { Position } from '../../../Enums/Position'; -import { type IContainerModel } from '../../../Interfaces/IContainerModel'; +import { IContainerModel } from '../../../Interfaces/IContainerModel'; import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, @@ -12,7 +12,7 @@ import { import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { TransformX, TransformY } from '../../../utils/svg'; import { Dimension } from './Dimension'; -import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; interface IDimensionLayerProps { containers: Map diff --git a/src/Components/SVG/Elements/Selector/Selector.tsx b/src/Components/SVG/Elements/Selector/Selector.tsx index 4f3cfee..c7baf92 100644 --- a/src/Components/SVG/Elements/Selector/Selector.tsx +++ b/src/Components/SVG/Elements/Selector/Selector.tsx @@ -1,6 +1,6 @@ import './Selector.scss'; import * as React from 'react'; -import { type IContainerModel } from '../../../../Interfaces/IContainerModel'; +import { IContainerModel } from '../../../../Interfaces/IContainerModel'; import { SHOW_SELECTOR_TEXT } from '../../../../utils/default'; import { GetAbsolutePosition } from '../../../../utils/itertools'; import { RemoveMargin } from '../../../../utils/svg'; diff --git a/src/Components/SVG/Elements/Symbol.tsx b/src/Components/SVG/Elements/Symbol.tsx index 8269557..09a19f9 100644 --- a/src/Components/SVG/Elements/Symbol.tsx +++ b/src/Components/SVG/Elements/Symbol.tsx @@ -1,6 +1,6 @@ import { Interweave } from 'interweave'; import * as React from 'react'; -import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default'; interface ISymbolProps { diff --git a/src/Components/SVG/Elements/SymbolLayer.tsx b/src/Components/SVG/Elements/SymbolLayer.tsx index 95a6463..8969550 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 { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; +import { ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { Symbol } from './Symbol'; interface ISymbolLayerProps { diff --git a/src/Components/SVG/SVG.tsx b/src/Components/SVG/SVG.tsx index 485f344..cdb11de 100644 --- a/src/Components/SVG/SVG.tsx +++ b/src/Components/SVG/SVG.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom'; +import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom'; import { Container } from './Elements/Container'; -import { type IContainerModel } from '../../Interfaces/IContainerModel'; +import { IContainerModel } from '../../Interfaces/IContainerModel'; import { Selector } from './Elements/Selector/Selector'; import { DepthDimensionLayer } from './Elements/DepthDimensionLayer'; import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default'; import { SymbolLayer } from './Elements/SymbolLayer'; -import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; +import { ISymbolModel } from '../../Interfaces/ISymbolModel'; import { DimensionLayer } from './Elements/DimensionLayer'; interface ISVGProps { diff --git a/src/Components/Select/Select.tsx b/src/Components/Select/Select.tsx index 5a94107..5add140 100644 --- a/src/Components/Select/Select.tsx +++ b/src/Components/Select/Select.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { type IInputGroup } from '../../Interfaces/IInputGroup'; +import { IInputGroup } from '../../Interfaces/IInputGroup'; interface ISelectProps { labelKey?: string diff --git a/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx b/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx index decbd81..61a35d9 100644 --- a/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx +++ b/src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx @@ -13,7 +13,7 @@ export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps) diff --git a/src/Components/UI/UI.tsx b/src/Components/UI/UI.tsx index cc7e772..f85b63c 100644 --- a/src/Components/UI/UI.tsx +++ b/src/Components/UI/UI.tsx @@ -4,17 +4,17 @@ import { History } from '../History/History'; import { Bar, BAR_WIDTH } from '../Bar/Bar'; import { Symbols } from '../Symbols/Symbols'; import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar'; -import { type PropertyType } from '../../Enums/PropertyType'; +import { PropertyType } from '../../Enums/PropertyType'; import { Messages } from '../Messages/Messages'; import { Sidebar } from '../Sidebar/Sidebar'; import { Components } from '../Components/Components'; import { Viewer } from '../Viewer/Viewer'; import { Settings } from '../Settings/Settings'; -import { type IMessage } from '../../Interfaces/IMessage'; +import { IMessage } from '../../Interfaces/IMessage'; import { DISABLE_API } from '../../utils/default'; import { UseWorker, UseAsync } from './UseWorker'; import { FindContainerById } from '../../utils/itertools'; -import { type IEditorState } from '../../Interfaces/IEditorState'; +import { IEditorState } from '../../Interfaces/IEditorState'; import { GetCurrentHistoryState } from '../Editor/Editor'; import { Text } from '../Text/Text'; @@ -116,7 +116,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { selectContainer={methods.selectContainer} addContainer={methods.addContainerAt} isExpanded ={false} - onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } } + onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) } />; break; case SidebarType.ComponentsExpanded: @@ -137,7 +137,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { selectContainer={methods.selectContainer} addContainer={methods.addContainerAt} isExpanded ={true} - onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } } + onExpandChange={() => setOrToggleSidebar(SidebarType.Components) } />; break; case SidebarType.Symbols: @@ -153,7 +153,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { onPropertyChange={methods.onSymbolPropertyChange} selectSymbol={methods.selectSymbol} isExpanded ={false} - onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } } + onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) } />; break; case SidebarType.SymbolsExpanded: @@ -169,7 +169,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { onPropertyChange={methods.onSymbolPropertyChange} selectSymbol={methods.selectSymbol} isExpanded ={true} - onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }} + onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)} />; break; @@ -187,7 +187,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element { leftChildren = { setMessages([]); }} + clearMessage={() => setMessages([])} />; break; diff --git a/src/Components/UI/UseWorker.tsx b/src/Components/UI/UseWorker.tsx index 9f7b775..c4584af 100644 --- a/src/Components/UI/UseWorker.tsx +++ b/src/Components/UI/UseWorker.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { type IHistoryState } from '../../Interfaces/IHistoryState'; -import { type IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest'; -import { type IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; -import { type IMessage } from '../../Interfaces/IMessage'; +import { IHistoryState } from '../../Interfaces/IHistoryState'; +import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest'; +import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; +import { IMessage } from '../../Interfaces/IMessage'; import { GetCircularReplacer } from '../../utils/saveload'; // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions diff --git a/src/Components/Viewer/Viewer.tsx b/src/Components/Viewer/Viewer.tsx index bd6d0ab..cdf630e 100644 --- a/src/Components/Viewer/Viewer.tsx +++ b/src/Components/Viewer/Viewer.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; -import { type IContainerModel } from '../../Interfaces/IContainerModel'; -import { type IHistoryState } from '../../Interfaces/IHistoryState'; -import { type IPoint } from '../../Interfaces/IPoint'; +import { IContainerModel } from '../../Interfaces/IContainerModel'; +import { IHistoryState } from '../../Interfaces/IHistoryState'; +import { IPoint } from '../../Interfaces/IPoint'; import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default'; import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools'; import { BAR_WIDTH } from '../Bar/Bar'; diff --git a/src/Events/AppEvents.ts b/src/Events/AppEvents.ts index ec3fd59..e2976c9 100644 --- a/src/Events/AppEvents.ts +++ b/src/Events/AppEvents.ts @@ -1,9 +1,9 @@ import { useEffect } from 'react'; import { AppState } from '../Enums/AppState'; -import { type IConfiguration } from '../Interfaces/IConfiguration'; -import { type IEditorState } from '../Interfaces/IEditorState'; -import { type IHistoryState } from '../Interfaces/IHistoryState'; -import { type ILanguage } from '../Interfaces/ILanguage'; +import { IConfiguration } from '../Interfaces/IConfiguration'; +import { IEditorState } from '../Interfaces/IEditorState'; +import { IHistoryState } from '../Interfaces/IHistoryState'; +import { ILanguage } from '../Interfaces/ILanguage'; import { languageOptions, translations } from '../Translations/Translations'; import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default'; import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload'; @@ -49,7 +49,7 @@ export function UseCustomEvents( const funcs = new Map void>(); for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { - event.func({ + return event.func({ root, languageContext, setEditor, diff --git a/src/Events/EditorEvents.ts b/src/Events/EditorEvents.ts index d4e25e9..ff645a3 100644 --- a/src/Events/EditorEvents.ts +++ b/src/Events/EditorEvents.ts @@ -3,9 +3,9 @@ import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations'; import { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations'; import { GetCurrentHistory } from '../Components/Editor/Editor'; -import { type IConfiguration } from '../Interfaces/IConfiguration'; -import { type IEditorState } from '../Interfaces/IEditorState'; -import { type IHistoryState } from '../Interfaces/IHistoryState'; +import { IConfiguration } from '../Interfaces/IConfiguration'; +import { IEditorState } from '../Interfaces/IEditorState'; +import { IHistoryState } from '../Interfaces/IHistoryState'; import { FindContainerById } from '../utils/itertools'; import { GetCircularReplacer } from '../utils/saveload'; @@ -61,7 +61,7 @@ export function UseCustomEvents( for (const event of events) { function Func(eventInitDict?: CustomEventInit): void { - event.func({ + return event.func({ root, editorState, setNewHistory, diff --git a/src/Interfaces/IAction.ts b/src/Interfaces/IAction.ts index fc58a2b..cf0bed6 100644 --- a/src/Interfaces/IAction.ts +++ b/src/Interfaces/IAction.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type AddMethod } from '../Enums/AddMethod'; -import { type IImage } from './IImage'; +import { AddMethod } from '../Enums/AddMethod'; +import { IImage } from './IImage'; export interface IAction { Id: string diff --git a/src/Interfaces/IAvailableContainer.ts b/src/Interfaces/IAvailableContainer.ts index d655ab2..dab4e59 100644 --- a/src/Interfaces/IAvailableContainer.ts +++ b/src/Interfaces/IAvailableContainer.ts @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type AddMethod } from '../Enums/AddMethod'; -import { type PositionReference } from '../Enums/PositionReference'; -import { type IAction } from './IAction'; -import { type IMargin } from './IMargin'; -import { type Orientation } from '../Enums/Orientation'; -import { type IKeyValue } from './IKeyValue'; -import { type IStyle } from './IStyle'; -import { type IDimensions } from './IDimensions'; +import { AddMethod } from '../Enums/AddMethod'; +import { PositionReference } from '../Enums/PositionReference'; +import { IAction } from './IAction'; +import { IMargin } from './IMargin'; +import { Orientation } from '../Enums/Orientation'; +import { IKeyValue } from './IKeyValue'; +import { IStyle } from './IStyle'; +import { IDimensions } from './IDimensions'; /** Model of available container used in application configuration */ export interface IAvailableContainer { diff --git a/src/Interfaces/IAvailableSymbol.ts b/src/Interfaces/IAvailableSymbol.ts index 71861d4..e69a996 100644 --- a/src/Interfaces/IAvailableSymbol.ts +++ b/src/Interfaces/IAvailableSymbol.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type PositionReference } from '../Enums/PositionReference'; -import { type IAvailableContainer } from './IAvailableContainer'; -import { type IImage } from './IImage'; +import { PositionReference } from '../Enums/PositionReference'; +import { IAvailableContainer } from './IAvailableContainer'; +import { IImage } from './IImage'; /** * Model of available symbol to configure the application */ diff --git a/src/Interfaces/IConfiguration.ts b/src/Interfaces/IConfiguration.ts index 812f5ab..12b0452 100644 --- a/src/Interfaces/IConfiguration.ts +++ b/src/Interfaces/IConfiguration.ts @@ -1,9 +1,9 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type IAPIConfiguration } from './IAPIConfiguration'; -import { type IAvailableContainer } from './IAvailableContainer'; -import { type IAvailableSymbol } from './IAvailableSymbol'; -import { type ICategory } from './ICategory'; -import { type IPattern } from './IPattern'; +import { IAPIConfiguration } from './IAPIConfiguration'; +import { IAvailableContainer } from './IAvailableContainer'; +import { IAvailableSymbol } from './IAvailableSymbol'; +import { ICategory } from './ICategory'; +import { IPattern } from './IPattern'; /** Model of configuration for the application to configure it */ export interface IConfiguration { diff --git a/src/Interfaces/IContainerModel.ts b/src/Interfaces/IContainerModel.ts index 8a2e7bc..42d966b 100644 --- a/src/Interfaces/IContainerModel.ts +++ b/src/Interfaces/IContainerModel.ts @@ -1,4 +1,4 @@ -import { type IContainerProperties } from './IContainerProperties'; +import { IContainerProperties } from './IContainerProperties'; export interface IContainerModel { children: string[] diff --git a/src/Interfaces/IContainerProperties.ts b/src/Interfaces/IContainerProperties.ts index 63e18cd..254d6ca 100644 --- a/src/Interfaces/IContainerProperties.ts +++ b/src/Interfaces/IContainerProperties.ts @@ -1,9 +1,9 @@ -import { type PositionReference } from '../Enums/PositionReference'; -import { type IMargin } from './IMargin'; -import { type Orientation } from '../Enums/Orientation'; -import { type IKeyValue } from './IKeyValue'; -import { type IStyle } from './IStyle'; -import { type IDimensions } from './IDimensions'; +import { PositionReference } from '../Enums/PositionReference'; +import { IMargin } from './IMargin'; +import { Orientation } from '../Enums/Orientation'; +import { IKeyValue } from './IKeyValue'; +import { IStyle } from './IStyle'; +import { IDimensions } from './IDimensions'; /** * Properties of a container diff --git a/src/Interfaces/IDimensionOptions.ts b/src/Interfaces/IDimensionOptions.ts index 37bdf4b..4c44adf 100644 --- a/src/Interfaces/IDimensionOptions.ts +++ b/src/Interfaces/IDimensionOptions.ts @@ -1,4 +1,4 @@ -import { type Position } from '../Enums/Position'; +import { Position } from '../Enums/Position'; export interface IDimensionOptions { diff --git a/src/Interfaces/IDimensions.ts b/src/Interfaces/IDimensions.ts index 3b4b906..c87bce7 100644 --- a/src/Interfaces/IDimensions.ts +++ b/src/Interfaces/IDimensions.ts @@ -1,6 +1,6 @@ -import { type IDimensionOptions } from './IDimensionOptions'; -import { type Orientation } from '../Enums/Orientation'; +import { IDimensionOptions } from './IDimensionOptions'; +import { Orientation } from '../Enums/Orientation'; export interface IDimensions { diff --git a/src/Interfaces/IEditorState.ts b/src/Interfaces/IEditorState.ts index 90d01ae..495a868 100644 --- a/src/Interfaces/IEditorState.ts +++ b/src/Interfaces/IEditorState.ts @@ -1,5 +1,5 @@ -import { type IConfiguration } from './IConfiguration'; -import { type IHistoryState } from './IHistoryState'; +import { IConfiguration } from './IConfiguration'; +import { IHistoryState } from './IHistoryState'; export interface IEditorState { history: IHistoryState[] diff --git a/src/Interfaces/IGetFeedbackRequest.ts b/src/Interfaces/IGetFeedbackRequest.ts index 60919e2..ff3d665 100644 --- a/src/Interfaces/IGetFeedbackRequest.ts +++ b/src/Interfaces/IGetFeedbackRequest.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type IHistoryState } from './IHistoryState'; +import { IHistoryState } from './IHistoryState'; export interface IGetFeedbackRequest { /** Current application state */ diff --git a/src/Interfaces/IGetFeedbackResponse.ts b/src/Interfaces/IGetFeedbackResponse.ts index a8bdb88..4e19d7d 100644 --- a/src/Interfaces/IGetFeedbackResponse.ts +++ b/src/Interfaces/IGetFeedbackResponse.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type IMessage } from './IMessage'; +import { IMessage } from './IMessage'; export interface IGetFeedbackResponse { messages: IMessage[] diff --git a/src/Interfaces/IHistoryState.ts b/src/Interfaces/IHistoryState.ts index 8af48a7..e5f0428 100644 --- a/src/Interfaces/IHistoryState.ts +++ b/src/Interfaces/IHistoryState.ts @@ -1,5 +1,5 @@ -import { type IContainerModel } from './IContainerModel'; -import { type ISymbolModel } from './ISymbolModel'; +import { IContainerModel } from './IContainerModel'; +import { ISymbolModel } from './ISymbolModel'; export interface IHistoryState { /** Last editor action */ diff --git a/src/Interfaces/IInputGroup.ts b/src/Interfaces/IInputGroup.ts index 905ce8a..bad2922 100644 --- a/src/Interfaces/IInputGroup.ts +++ b/src/Interfaces/IInputGroup.ts @@ -1,4 +1,4 @@ -import type React from 'react'; +import React from 'react'; export interface IInputGroup { key: string diff --git a/src/Interfaces/IMessage.ts b/src/Interfaces/IMessage.ts index 7cbb8cb..605843e 100644 --- a/src/Interfaces/IMessage.ts +++ b/src/Interfaces/IMessage.ts @@ -1,4 +1,4 @@ -import { type MessageType } from '../Enums/MessageType'; +import { MessageType } from '../Enums/MessageType'; export interface IMessage { text: string diff --git a/src/Interfaces/IPattern.ts b/src/Interfaces/IPattern.ts index 5a1f424..27b0ee1 100644 --- a/src/Interfaces/IPattern.ts +++ b/src/Interfaces/IPattern.ts @@ -1,4 +1,4 @@ -import { type IAvailableContainer } from './IAvailableContainer'; +import { IAvailableContainer } from './IAvailableContainer'; export interface IPattern { /** diff --git a/src/Interfaces/ISetContainerListRequest.ts b/src/Interfaces/ISetContainerListRequest.ts index a26ce7d..2a413a7 100644 --- a/src/Interfaces/ISetContainerListRequest.ts +++ b/src/Interfaces/ISetContainerListRequest.ts @@ -1,6 +1,6 @@ -import { type IAction } from './IAction'; -import { type IContainerModel } from './IContainerModel'; -import { type IHistoryState } from './IHistoryState'; +import { IAction } from './IAction'; +import { IContainerModel } from './IContainerModel'; +import { IHistoryState } from './IHistoryState'; /* eslint-disable @typescript-eslint/naming-convention */ export interface ISetContainerListRequest { diff --git a/src/Interfaces/ISetContainerListResponse.ts b/src/Interfaces/ISetContainerListResponse.ts index b9f1d0a..4c147fa 100644 --- a/src/Interfaces/ISetContainerListResponse.ts +++ b/src/Interfaces/ISetContainerListResponse.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type AddMethod } from '../Enums/AddMethod'; -import { type IAvailableContainer } from './IAvailableContainer'; +import { AddMethod } from '../Enums/AddMethod'; +import { IAvailableContainer } from './IAvailableContainer'; export interface ISetContainerListResponse { Containers: IAvailableContainer[] diff --git a/src/Interfaces/ISymbolModel.ts b/src/Interfaces/ISymbolModel.ts index ca0604b..3a71290 100644 --- a/src/Interfaces/ISymbolModel.ts +++ b/src/Interfaces/ISymbolModel.ts @@ -1,4 +1,4 @@ -import { type IAvailableSymbol } from './IAvailableSymbol'; +import { IAvailableSymbol } from './IAvailableSymbol'; export interface ISymbolModel { /** Identifier */ diff --git a/src/utils/default.ts b/src/utils/default.ts index fe64b39..632c12a 100644 --- a/src/utils/default.ts +++ b/src/utils/default.ts @@ -1,11 +1,11 @@ import { PositionReference } from '../Enums/PositionReference'; -import { type IAvailableContainer } from '../Interfaces/IAvailableContainer'; -import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; -import { type IConfiguration } from '../Interfaces/IConfiguration'; -import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel'; -import { type IContainerProperties } from '../Interfaces/IContainerProperties'; -import { type IEditorState } from '../Interfaces/IEditorState'; -import { type ISymbolModel } from '../Interfaces/ISymbolModel'; +import { IAvailableContainer } from '../Interfaces/IAvailableContainer'; +import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; +import { IConfiguration } from '../Interfaces/IConfiguration'; +import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel'; +import { IContainerProperties } from '../Interfaces/IContainerProperties'; +import { IEditorState } from '../Interfaces/IEditorState'; +import { ISymbolModel } from '../Interfaces/ISymbolModel'; import { Orientation } from '../Enums/Orientation'; import { AppState } from '../Enums/AppState'; diff --git a/src/utils/itertools.ts b/src/utils/itertools.ts index 2a696b4..9efef1f 100644 --- a/src/utils/itertools.ts +++ b/src/utils/itertools.ts @@ -1,4 +1,4 @@ -import { type IContainerModel } from '../Interfaces/IContainerModel'; +import { IContainerModel } from '../Interfaces/IContainerModel'; export function * MakeChildrenIterator(containers: Map, childrenIds: string[]): Generator { for (const childId of childrenIds) { diff --git a/src/utils/saveload.ts b/src/utils/saveload.ts index 8f243f4..f862901 100644 --- a/src/utils/saveload.ts +++ b/src/utils/saveload.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { type IEditorState } from '../Interfaces/IEditorState'; -import { type IHistoryState } from '../Interfaces/IHistoryState'; -import { type IContainerModel } from '../Interfaces/IContainerModel'; -import { type ISymbolModel } from '../Interfaces/ISymbolModel'; +import { IEditorState } from '../Interfaces/IEditorState'; +import { IHistoryState } from '../Interfaces/IHistoryState'; +import { IContainerModel } from '../Interfaces/IContainerModel'; +import { ISymbolModel } from '../Interfaces/ISymbolModel'; /** * Revive the Editor state diff --git a/src/utils/test-utils.tsx b/src/utils/test-utils.tsx index 29f5f4d..aec5ae7 100644 --- a/src/utils/test-utils.tsx +++ b/src/utils/test-utils.tsx @@ -1,6 +1,6 @@ /* eslint-disable import/export */ -import type * as React from 'react'; -import { cleanup, render, type RenderResult } from '@testing-library/react'; +import * as React from 'react'; +import { cleanup, render, RenderResult } from '@testing-library/react'; import { afterEach } from 'vitest'; afterEach(() => { From 5b3ab651e613dda009889a7426779dd7c90caef3 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 13:54:30 +0100 Subject: [PATCH 4/5] Add more eslint rules --- .eslintrc.cjs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 108a875..df59f7d 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -34,10 +34,14 @@ module.exports = { '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', From 4e41fda93a10d1100d75ce0d5ff3d41a4a30a267 Mon Sep 17 00:00:00 2001 From: Eric NGUYEN Date: Thu, 23 Feb 2023 13:54:38 +0100 Subject: [PATCH 5/5] Fix eslint errors --- src/Components/API/api.test.tsx | 27 ++- src/Components/API/api.ts | 23 +- src/Components/App/Actions/Load.ts | 4 +- src/Components/App/Actions/MenuActions.ts | 10 +- src/Components/App/App.test.tsx | 6 +- src/Components/App/App.tsx | 30 +-- src/Components/Bar/Bar.tsx | 12 +- src/Components/Bar/BarIcon.tsx | 6 +- src/Components/Canvas/Canvas.tsx | 25 +- src/Components/Canvas/Dimension.ts | 2 +- src/Components/Canvas/DimensionLayer.ts | 17 +- src/Components/Canvas/Renderer.ts | 3 +- src/Components/Canvas/SelectorContainer.ts | 6 +- src/Components/Canvas/Symbol.ts | 3 +- src/Components/Category/Category.tsx | 31 ++- .../CheckboxGroupButtons.tsx | 4 +- .../OrientationCheckboxes.tsx | 2 +- src/Components/Components/Components.tsx | 31 +-- .../ContainerProperties/ContainerForm.tsx | 128 ++++++++--- .../ContainerProperties.test.tsx | 4 +- .../ContainerProperties.tsx | 2 +- src/Components/Editor/Actions/AddContainer.ts | 62 +++-- .../Editor/Actions/ContainerOperations.ts | 92 ++++---- .../Editor/Actions/ContextMenuActions.ts | 68 +++--- src/Components/Editor/Actions/Save.ts | 10 +- src/Components/Editor/Actions/Shortcuts.ts | 4 +- .../Editor/Actions/SymbolOperations.ts | 6 +- .../Editor/Behaviors/AnchorBehaviors.ts | 31 +-- src/Components/Editor/Behaviors/Behaviors.ts | 28 ++- .../Editor/Behaviors/FlexBehaviors.ts | 49 +++- .../Editor/Behaviors/PushBehaviors.ts | 2 +- .../Editor/Behaviors/RigidBodyBehaviors.ts | 63 ++--- .../Editor/Behaviors/SwapBehaviors.ts | 17 +- .../Editor/Behaviors/SymbolBehaviors.ts | 27 ++- src/Components/Editor/Editor.tsx | 133 +++++------ .../ElementsSidebar/ElementsSidebar.tsx | 20 +- .../FloatingButton/FloatingButton.tsx | 15 +- src/Components/FloatingButton/MenuButton.tsx | 10 +- src/Components/History/History.tsx | 4 +- src/Components/InputGroup/TextInputGroup.tsx | 6 +- .../LanguageProvider/LanguageProvider.tsx | 10 +- src/Components/MainMenu/MainMenu.tsx | 4 +- src/Components/Menu/Menu.tsx | 21 +- src/Components/Menu/MenuItem.tsx | 2 +- src/Components/Messages/Messages.tsx | 6 +- .../PositionReferenceSelector.tsx | 8 +- .../RadioGroupButtons/RadioGroupButtons.tsx | 2 +- src/Components/SVG/Elements/Container.tsx | 39 ++-- .../SVG/Elements/DimensionLayer.tsx | 216 +++++++++--------- .../SelectorContainer/SelectorContainer.tsx | 6 +- .../SelectorSymbol/SelectorSymbol.tsx | 2 +- src/Components/SVG/Elements/SymbolLayer.tsx | 14 +- src/Components/SVG/SVG.tsx | 4 +- .../ui-toolbar/toolbar-button.tsx | 8 +- .../SVGReactPanZoom/ui-toolbar/toolbar.tsx | 30 ++- src/Components/Select/Select.tsx | 2 +- .../Sidebar/ToggleSideBar/ToggleSideBar.tsx | 4 +- .../SymbolProperties/SymbolForm.tsx | 28 ++- .../SymbolProperties/SymbolProperties.tsx | 2 +- src/Components/Symbols/Symbols.tsx | 10 +- src/Components/UI/UI.tsx | 8 +- src/Components/UI/UseWorker.tsx | 17 +- src/Components/Viewer/Viewer.tsx | 6 +- src/Events/AppEvents.ts | 10 +- src/Events/EditorEvents.ts | 61 +++-- src/Interfaces/IAction.ts | 4 +- src/Interfaces/IAvailableContainer.ts | 2 +- src/Interfaces/IConfiguration.ts | 10 +- src/Interfaces/IContainerModel.ts | 5 +- src/Interfaces/IContainerProperties.ts | 12 +- src/Interfaces/IDimensions.ts | 4 +- src/Interfaces/IEditorState.ts | 4 +- src/Interfaces/IGetFeedbackRequest.ts | 2 +- src/Interfaces/IGetFeedbackResponse.ts | 2 +- src/Interfaces/IHistoryState.ts | 4 +- src/Interfaces/IInputGroup.ts | 2 +- src/Interfaces/IMessage.ts | 2 +- src/Interfaces/IPattern.ts | 2 +- src/Interfaces/ISetContainerListRequest.ts | 6 +- src/Interfaces/ISetContainerListResponse.ts | 4 +- src/main.tsx | 12 +- src/utils/default.ts | 24 +- src/utils/itertools.ts | 29 ++- src/utils/saveload.ts | 13 +- src/utils/simplex.ts | 11 +- src/utils/stringtools.ts | 4 +- src/utils/test-utils.tsx | 4 +- 87 files changed, 1003 insertions(+), 702 deletions(-) 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 35ca740..a22c7bf 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 AddVerticalSelfMarginDimension( [yStart, yEnd] = [yEnd, yStart]; } - dimensions.push( - - ); + dimensions.push(); } const bottom = container.properties.margin.bottom; if (bottom != null && bottom > 0) { @@ -659,17 +651,15 @@ function AddVerticalSelfMarginDimension( [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 2a99c74..5b660b3 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 +