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

Revert "Run eslint src --fix"

Browse source
This commit is contained in:
Eric Nguyen 2023-02-17 09:34:48 +00:00
parent 67678c0f3a
commit 9bbdac088e
82 changed files with 342 additions and 363 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/Components/API/api.test.tsx
View file

@ -2,14 +2,14 @@
import { describe, it, expect } from 'vitest'; import { describe, it, expect } from 'vitest';
import { AddMethod } from '../../Enums/AddMethod'; import { AddMethod } from '../../Enums/AddMethod';
import { PositionReference } from '../../Enums/PositionReference'; import { PositionReference } from '../../Enums/PositionReference';
import { type IAction } from '../../Interfaces/IAction'; import { IAction } from '../../Interfaces/IAction';
import { type IAvailableContainer } from '../../Interfaces/IAvailableContainer'; import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
import { type IAvailableSymbol } from '../../Interfaces/IAvailableSymbol'; import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
import { type ICategory } from '../../Interfaces/ICategory'; import { ICategory } from '../../Interfaces/ICategory';
import { type IConfiguration } from '../../Interfaces/IConfiguration'; import { IConfiguration } from '../../Interfaces/IConfiguration';
import { type IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { type IPattern } from '../../Interfaces/IPattern'; import { IPattern } from '../../Interfaces/IPattern';
import { DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default'; import { DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default';
import { FetchConfiguration } from './api'; import { FetchConfiguration } from './api';

12
src/Components/API/api.ts
View file

@ -1,6 +1,6 @@
import { type IConfiguration } from '../../Interfaces/IConfiguration'; import { IConfiguration } from '../../Interfaces/IConfiguration';
import { type ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest'; import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest';
import { type ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse'; import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse';
import { GetCircularReplacer } from '../../utils/saveload'; import { GetCircularReplacer } from '../../utils/saveload';
/** /**
@ -9,7 +9,8 @@ import { GetCircularReplacer } from '../../utils/saveload';
*/ */
export async function FetchConfiguration(): Promise<IConfiguration> { export async function FetchConfiguration(): Promise<IConfiguration> {
const url = import.meta.env.VITE_API_FETCH_URL; 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 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.fetch) { if (window.fetch) {
return await fetch(url, { return await fetch(url, {
@ -35,7 +36,8 @@ export async function FetchConfiguration(): Promise<IConfiguration> {
export async function SetContainerList(request: ISetContainerListRequest, configurationUrl?: string): Promise<ISetContainerListResponse> { export async function SetContainerList(request: ISetContainerListRequest, configurationUrl?: string): Promise<ISetContainerListResponse> {
const url = configurationUrl ?? import.meta.env.VITE_API_SET_CONTAINER_LIST_URL; const url = configurationUrl ?? import.meta.env.VITE_API_SET_CONTAINER_LIST_URL;
const dataParsed = JSON.stringify(request, GetCircularReplacer()); 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 // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
if (window.fetch) { if (window.fetch) {
return await fetch(url, { return await fetch(url, {

4
src/Components/App/Actions/Load.ts
View file

@ -1,6 +1,6 @@
import { type Dispatch, type SetStateAction } from 'react'; import { Dispatch, SetStateAction } from 'react';
import { AppState } from '../../../Enums/AppState'; import { AppState } from '../../../Enums/AppState';
import { type IEditorState } from '../../../Interfaces/IEditorState'; import { IEditorState } from '../../../Interfaces/IEditorState';
import { Revive } from '../../../utils/saveload'; import { Revive } from '../../../utils/saveload';
export function LoadState( export function LoadState(

8
src/Components/App/Actions/MenuActions.ts
View file

@ -1,10 +1,10 @@
import { type Dispatch, type SetStateAction } from 'react'; import { Dispatch, SetStateAction } from 'react';
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { FetchConfiguration } from '../../API/api'; import { FetchConfiguration } from '../../API/api';
import { type IEditorState } from '../../../Interfaces/IEditorState'; import { IEditorState } from '../../../Interfaces/IEditorState';
import { LoadState } from './Load'; import { LoadState } from './Load';
import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default'; import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
import { type AppState } from '../../../Enums/AppState'; import { AppState } from '../../../Enums/AppState';
export function NewEditor( export function NewEditor(
editorState: IEditorState, editorState: IEditorState,

2
src/Components/App/App.test.tsx
View file

@ -2,7 +2,7 @@ import * as React from 'react';
import { beforeEach, describe, it } from 'vitest'; import { beforeEach, describe, it } from 'vitest';
import { AppState } from '../../Enums/AppState'; import { AppState } from '../../Enums/AppState';
import { FAST_BOOT } from '../../utils/default'; 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'; import { App } from './App';
describe.concurrent('App', () => { describe.concurrent('App', () => {

16
src/Components/App/App.tsx
View file

@ -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 { UseCustomEvents } from '../../Events/AppEvents';
import { MainMenu } from '../MainMenu/MainMenu'; import { MainMenu } from '../MainMenu/MainMenu';
import { ContainerModel, type IContainerModel } from '../../Interfaces/IContainerModel'; import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
import { Editor } from '../Editor/Editor'; import { Editor } from '../Editor/Editor';
import { type IEditorState } from '../../Interfaces/IEditorState'; import { IEditorState } from '../../Interfaces/IEditorState';
import { LoadState } from './Actions/Load'; import { LoadState } from './Actions/Load';
import { LoadEditor, NewEditor } from './Actions/MenuActions'; import { LoadEditor, NewEditor } from './Actions/MenuActions';
import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default'; 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); setAppState(AppState.Loading);
NewEditor( NewEditor(
editorState, editorState,
(newEditor) => { setEditorState(newEditor); }, (newEditor) => setEditorState(newEditor),
() => { setAppState(AppState.Loaded); } () => setAppState(AppState.Loaded)
); );
}} }}
loadEditor={(files: FileList | null) => { loadEditor={(files: FileList | null) => LoadEditor(
LoadEditor(
files, files,
setEditorState, setEditorState,
setAppState setAppState
); )}
}}
/> />
</div> </div>
); );

10
src/Components/Bar/Bar.tsx
View file

@ -37,7 +37,7 @@ export function Bar(props: IBarProps): JSX.Element {
<BarIcon <BarIcon
isActive={props.isComponentsOpen} isActive={props.isComponentsOpen}
title={Text({ textId: '@Components' })} title={Text({ textId: '@Components' })}
onClick={() => { props.toggleComponents(); }}> onClick={() => props.toggleComponents()}>
{ {
props.isComponentsOpen props.isComponentsOpen
? <CubeIconS className='heroicon' /> ? <CubeIconS className='heroicon' />
@ -47,7 +47,7 @@ export function Bar(props: IBarProps): JSX.Element {
<BarIcon <BarIcon
isActive={props.isSymbolsOpen} isActive={props.isSymbolsOpen}
title={Text({ textId: '@Symbols' })} title={Text({ textId: '@Symbols' })}
onClick={() => { props.toggleSymbols(); }}> onClick={() => props.toggleSymbols()}>
{ {
props.isSymbolsOpen props.isSymbolsOpen
? <LinkIconS className='heroicon' /> ? <LinkIconS className='heroicon' />
@ -57,7 +57,7 @@ export function Bar(props: IBarProps): JSX.Element {
<BarIcon <BarIcon
isActive={props.isMessagesOpen} isActive={props.isMessagesOpen}
title={Text({ textId: '@Messages' })} title={Text({ textId: '@Messages' })}
onClick={() => { props.toggleMessages(); }}> onClick={() => props.toggleMessages()}>
{ {
props.isMessagesOpen props.isMessagesOpen
? <EnvolopeIconS className='heroicon' /> ? <EnvolopeIconS className='heroicon' />
@ -68,7 +68,7 @@ export function Bar(props: IBarProps): JSX.Element {
<BarIcon <BarIcon
isActive={props.isHistoryOpen} isActive={props.isHistoryOpen}
title={Text({ textId: '@Timeline' })} title={Text({ textId: '@Timeline' })}
onClick={() => { props.toggleTimeline(); }}> onClick={() => props.toggleTimeline()}>
{ {
props.isHistoryOpen props.isHistoryOpen
? <ClockIconS className='heroicon' /> ? <ClockIconS className='heroicon' />
@ -78,7 +78,7 @@ export function Bar(props: IBarProps): JSX.Element {
<BarIcon <BarIcon
isActive={props.isSettingsOpen} isActive={props.isSettingsOpen}
title={Text({ textId: '@Settings' })} title={Text({ textId: '@Settings' })}
onClick={() => { props.toggleSettings(); }}> onClick={() => props.toggleSettings()}>
{ {
props.isSettingsOpen props.isSettingsOpen
? <Cog8ToothIconS className='heroicon' /> ? <Cog8ToothIconS className='heroicon' />

2
src/Components/Bar/BarIcon.tsx
View file

@ -13,7 +13,7 @@ export function BarIcon(props: IBarIconProps): JSX.Element {
<button type="button" <button type="button"
className={`bar-btn group ${isActiveClasses}`} className={`bar-btn group ${isActiveClasses}`}
title={props.title} title={props.title}
onClick={() => { props.onClick(); }} onClick={() => props.onClick()}
> >
<span className='sidebar-tooltip group-hover:scale-100'>{props.title}</span> <span className='sidebar-tooltip group-hover:scale-100'>{props.title}</span>
{props.children} {props.children}

2
src/Components/Canvas/Canvas.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useRef } from 'react';
import { type IPoint } from '../../Interfaces/IPoint'; import { IPoint } from '../../Interfaces/IPoint';
import { BAR_WIDTH } from '../Bar/Bar'; import { BAR_WIDTH } from '../Bar/Bar';
interface ICanvasProps { interface ICanvasProps {

2
src/Components/Canvas/DimensionLayer.ts
View file

@ -1,6 +1,6 @@
import { Orientation } from '../../Enums/Orientation'; import { Orientation } from '../../Enums/Orientation';
import { Position } from '../../Enums/Position'; import { Position } from '../../Enums/Position';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS } from '../../utils/default'; import { SHOW_SELF_DIMENSIONS, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS } from '../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools';
import { TransformX, TransformY } from '../../utils/svg'; import { TransformX, TransformY } from '../../utils/svg';

2
src/Components/Canvas/Selector.ts
View file

@ -1,4 +1,4 @@
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { SHOW_SELECTOR_TEXT } from '../../utils/default'; import { SHOW_SELECTOR_TEXT } from '../../utils/default';
import { GetAbsolutePosition } from '../../utils/itertools'; import { GetAbsolutePosition } from '../../utils/itertools';
import { RemoveMargin } from '../../utils/svg'; import { RemoveMargin } from '../../utils/svg';

2
src/Components/Canvas/Symbol.ts
View file

@ -1,4 +1,4 @@
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { DIMENSION_MARGIN } from '../../utils/default'; import { DIMENSION_MARGIN } from '../../utils/default';
const IMAGE_CACHE = new Map<string, HTMLImageElement>(); const IMAGE_CACHE = new Map<string, HTMLImageElement>();

4
src/Components/Category/Category.tsx
View file

@ -1,6 +1,6 @@
import { ChevronRightIcon } from '@heroicons/react/24/outline'; import { ChevronRightIcon } from '@heroicons/react/24/outline';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { type ICategory } from '../../Interfaces/ICategory'; import { ICategory } from '../../Interfaces/ICategory';
import { TruncateString } from '../../utils/stringtools'; import { TruncateString } from '../../utils/stringtools';
interface ICategoryProps { interface ICategoryProps {
@ -27,7 +27,7 @@ export function Category(props: ICategoryProps): JSX.Element {
> >
<div <div
className={`flex flex-row group cursor-pointer ${heightClass}`} className={`flex flex-row group cursor-pointer ${heightClass}`}
onClick={() => { setIsOpen(!isOpen); }} onClick={() => setIsOpen(!isOpen)}
> >
<span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}> <span className={`transition-all flex-1 h-full justify-center sidebar-component-left ${isOpen ? 'rounded-b-none bg-slate-400/80 group-hover:bg-blue-600' : ''}`}>
{TruncateString(categoryDisplayedText, 25)} {TruncateString(categoryDisplayedText, 25)}

10
src/Components/Components/Components.tsx
View file

@ -1,8 +1,8 @@
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'; import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
import * as React from 'react'; import * as React from 'react';
import { type IAvailableContainer } from '../../Interfaces/IAvailableContainer'; import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
import { type ICategory } from '../../Interfaces/ICategory'; import { ICategory } from '../../Interfaces/ICategory';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { TruncateString } from '../../utils/stringtools'; import { TruncateString } from '../../utils/stringtools';
import { Category } from '../Category/Category'; import { Category } from '../Category/Category';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@ -72,9 +72,9 @@ export function Components(props: IComponentsProps): JSX.Element {
className='w-full justify-center h-16 transition-all sidebar-component' className='w-full justify-center h-16 transition-all sidebar-component'
id={componentOption.Type} id={componentOption.Type}
title={componentOption.Type} title={componentOption.Type}
onClick={() => { props.buttonOnClick(componentOption.Type); }} onClick={() => props.buttonOnClick(componentOption.Type)}
draggable={true} draggable={true}
onDragStart={(event) => { HandleDragStart(event); }} onDragStart={(event) => HandleDragStart(event)}
disabled={disabled} disabled={disabled}
> >
{TruncateString(componentOption.DisplayedText ?? componentOption.Type, 25)} {TruncateString(componentOption.DisplayedText ?? componentOption.Type, 25)}

72
src/Components/ContainerProperties/ContainerForm.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { PropertyType } from '../../Enums/PropertyType'; import { PropertyType } from '../../Enums/PropertyType';
import { type IContainerProperties } from '../../Interfaces/IContainerProperties'; import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { import {
SHOW_BORROWER_DIMENSIONS, SHOW_BORROWER_DIMENSIONS,
SHOW_CHILDREN_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS,
@ -46,7 +46,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='string' type='string'
value={props.properties.displayedText?.toString()} value={props.properties.displayedText?.toString()}
onChange={(value) => { props.onChange('displayedText', value); }}/> onChange={(value) => props.onChange('displayedText', value)}/>
<OrientationSelector <OrientationSelector
id='orientation' id='orientation'
name='Orientation' name='Orientation'
@ -117,8 +117,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
props.properties.width, props.properties.width,
props.properties.positionReference props.properties.positionReference
).toString()} ).toString()}
onChange={(value) => { onChange={(value) => props.onChange(
props.onChange(
'x', 'x',
ApplyXMargin( ApplyXMargin(
RestoreX( RestoreX(
@ -128,8 +127,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
), ),
props.properties.margin.left props.properties.margin.left
) )
); )}/>
}}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-y`} id={`${props.properties.id}-y`}
labelText={Text({ textId: '@ContainerY' })} labelText={Text({ textId: '@ContainerY' })}
@ -142,8 +140,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
props.properties.height, props.properties.height,
props.properties.positionReference props.properties.positionReference
).toString()} ).toString()}
onChange={(value) => { onChange={(value) => props.onChange(
props.onChange(
'y', 'y',
ApplyXMargin( ApplyXMargin(
RestoreY( RestoreY(
@ -153,8 +150,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
), ),
props.properties.margin.top props.properties.margin.top
) )
); )}/>
}}/>
</div> </div>
</Category> </Category>
@ -175,7 +171,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.minWidth.toString()} value={props.properties.minWidth.toString()}
onChange={(value) => { props.onChange('minWidth', Number(value)); }}/> onChange={(value) => props.onChange('minWidth', Number(value))}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-width`} id={`${props.properties.id}-width`}
labelText={Text({ textId: '@ContainerWidth' })} labelText={Text({ textId: '@ContainerWidth' })}
@ -186,7 +182,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
min={props.properties.minWidth} min={props.properties.minWidth}
max={props.properties.maxWidth} max={props.properties.maxWidth}
value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()} value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
onChange={(value) => { props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right)); }} onChange={(value) => props.onChange('width', ApplyWidthMargin(Number(value), props.properties.margin.left, props.properties.margin.right))}
isDisabled={props.properties.isFlex}/> isDisabled={props.properties.isFlex}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-maxWidth`} id={`${props.properties.id}-maxWidth`}
@ -197,7 +193,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.maxWidth.toString()} value={props.properties.maxWidth.toString()}
onChange={(value) => { props.onChange('maxWidth', Number(value)); }}/> onChange={(value) => props.onChange('maxWidth', Number(value))}/>
<div className='col-span-5 p-3'></div> <div className='col-span-5 p-3'></div>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-minHeight`} id={`${props.properties.id}-minHeight`}
@ -208,7 +204,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.minHeight.toString()} value={props.properties.minHeight.toString()}
onChange={(value) => { props.onChange('minHeight', Number(value)); }}/> onChange={(value) => props.onChange('minHeight', Number(value))}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-height`} id={`${props.properties.id}-height`}
labelText={Text({ textId: '@ContainerHeight' })} labelText={Text({ textId: '@ContainerHeight' })}
@ -219,7 +215,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
min={props.properties.minHeight} min={props.properties.minHeight}
max={props.properties.maxHeight} max={props.properties.maxHeight}
value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()} value={(RemoveWidthMargin(props.properties.height, props.properties.margin.top, props.properties.margin.bottom)).toString()}
onChange={(value) => { props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom)); }} onChange={(value) => props.onChange('height', ApplyWidthMargin(Number(value), props.properties.margin.top, props.properties.margin.bottom))}
isDisabled={props.properties.isFlex} isDisabled={props.properties.isFlex}
/> />
<TextInputGroup <TextInputGroup
@ -231,7 +227,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={1} min={1}
value={props.properties.maxHeight.toString()} value={props.properties.maxHeight.toString()}
onChange={(value) => { props.onChange('maxHeight', Number(value)); }}/> onChange={(value) => props.onChange('maxHeight', Number(value))}/>
</div> </div>
</Category> </Category>
@ -251,7 +247,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.left ?? 0).toString()} value={(props.properties.margin.left ?? 0).toString()}
onChange={(value) => { props.onChange('left', Number(value), PropertyType.Margin); }}/> onChange={(value) => props.onChange('left', Number(value), PropertyType.Margin)}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mb`} id={`${props.properties.id}-mb`}
labelText={Text({ textId: '@ContainerMarginBottom' })} labelText={Text({ textId: '@ContainerMarginBottom' })}
@ -261,7 +257,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.bottom ?? 0).toString()} value={(props.properties.margin.bottom ?? 0).toString()}
onChange={(value) => { props.onChange('bottom', Number(value), PropertyType.Margin); }}/> onChange={(value) => props.onChange('bottom', Number(value), PropertyType.Margin)}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mt`} id={`${props.properties.id}-mt`}
labelText={Text({ textId: '@ContainerMarginTop' })} labelText={Text({ textId: '@ContainerMarginTop' })}
@ -271,7 +267,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.top ?? 0).toString()} value={(props.properties.margin.top ?? 0).toString()}
onChange={(value) => { props.onChange('top', Number(value), PropertyType.Margin); }}/> onChange={(value) => props.onChange('top', Number(value), PropertyType.Margin)}/>
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-mr`} id={`${props.properties.id}-mr`}
labelText={Text({ textId: '@ContainerMarginRight' })} labelText={Text({ textId: '@ContainerMarginRight' })}
@ -281,7 +277,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={(props.properties.margin.right ?? 0).toString()} value={(props.properties.margin.right ?? 0).toString()}
onChange={(value) => { props.onChange('right', Number(value), PropertyType.Margin); }}/> onChange={(value) => props.onChange('right', Number(value), PropertyType.Margin)}/>
</div> </div>
</Category> </Category>
@ -299,7 +295,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='ml-auto mr-auto block' inputClassName='ml-auto mr-auto block'
type={ToggleType.Full} type={ToggleType.Full}
checked={props.properties.isFlex} checked={props.properties.isFlex}
onChange={(event) => { props.onChange('isFlex', event.target.checked); }} onChange={(event) => props.onChange('isFlex', event.target.checked)}
/> />
<ToggleButton <ToggleButton
labelText={Text({ textId: '@ContainerAnchor' })} labelText={Text({ textId: '@ContainerAnchor' })}
@ -308,7 +304,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='ml-auto mr-auto block' inputClassName='ml-auto mr-auto block'
type={ToggleType.Full} type={ToggleType.Full}
checked={props.properties.isAnchor} checked={props.properties.isAnchor}
onChange={(event) => { props.onChange('isAnchor', event.target.checked); }}/> onChange={(event) => props.onChange('isAnchor', event.target.checked)}/>
</div> </div>
</Category> </Category>
@ -338,7 +334,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
value: symbol.id value: symbol.id
}))} }))}
value={props.properties.linkedSymbolId ?? ''} value={props.properties.linkedSymbolId ?? ''}
onChange={(event) => { props.onChange('linkedSymbolId', event.target.value); }}/> onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/>
</div> </div>
</Category> </Category>
@ -358,7 +354,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
name='ShowSelfDimensions' name='ShowSelfDimensions'
labelText={Text({ textId: '@ContainerShowDimension' })} labelText={Text({ textId: '@ContainerShowDimension' })}
value={props.properties.dimensionOptions.selfDimensions.positions} value={props.properties.dimensionOptions.selfDimensions.positions}
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfDimension); }} onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@Color' })}
@ -367,7 +363,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.selfDimensions.color} value={props.properties.dimensionOptions.selfDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimension); }}/> onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
</div> </div>
} }
{ {
@ -379,7 +375,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
name='ShowSelfMarginsDimensions' name='ShowSelfMarginsDimensions'
labelText={Text({ textId: '@ContainerShowMarginsDimension' })} labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
value={props.properties.dimensionOptions.selfMarginsDimensions.positions} value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfMarginDimension); }} onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@Color' })}
@ -388,7 +384,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.selfMarginsDimensions.color} value={props.properties.dimensionOptions.selfMarginsDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimension); }}/> onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
</div> </div>
} }
{ {
@ -400,7 +396,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
name='ShowChildrenDimensions' name='ShowChildrenDimensions'
labelText={Text({ textId: '@ContainerShowChildrenDimension' })} labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
value={props.properties.dimensionOptions.childrenDimensions.positions} value={props.properties.dimensionOptions.childrenDimensions.positions}
onChange={(key, value) => { props.onChange(key, value, PropertyType.ChildrenDimensions); }} onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@Color' })}
@ -409,7 +405,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.childrenDimensions.color} value={props.properties.dimensionOptions.childrenDimensions.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensions); }}/> onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
</div> </div>
} }
{ {
@ -421,7 +417,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
name='MarkPosition' name='MarkPosition'
value={props.properties.dimensionOptions.markPosition} value={props.properties.dimensionOptions.markPosition}
labelText={Text({ textId: '@ContainerMarkPosition' })} labelText={Text({ textId: '@ContainerMarkPosition' })}
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionOptions); }} onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
/> />
</div> </div>
<div className='grid grid-cols-1 gap-2'> <div className='grid grid-cols-1 gap-2'>
@ -431,7 +427,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
name='ShowDimensionWithMarks' name='ShowDimensionWithMarks'
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })} labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
value={props.properties.dimensionOptions.dimensionWithMarks.positions} value={props.properties.dimensionOptions.dimensionWithMarks.positions}
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionWithMarks); }} onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
/> />
<InputGroup <InputGroup
labelText={Text({ textId: '@Color' })} labelText={Text({ textId: '@Color' })}
@ -440,7 +436,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='color' type='color'
value={props.properties.dimensionOptions.dimensionWithMarks.color} value={props.properties.dimensionOptions.dimensionWithMarks.color}
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarks); }}/> onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
</div> </div>
</> </>
} }
@ -463,7 +459,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='string'
value={props.properties.style.stroke ?? 'black'} value={props.properties.style.stroke ?? 'black'}
onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }} onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
/> />
<InputGroup <InputGroup
labelKey={`${props.properties.id}-strokeOpacity`} labelKey={`${props.properties.id}-strokeOpacity`}
@ -476,7 +472,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
max={1} max={1}
step={0.01} step={0.01}
value={(props.properties.style.strokeOpacity ?? 1).toString()} value={(props.properties.style.strokeOpacity ?? 1).toString()}
onChange={(event) => { props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style); }} onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
/> />
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-strokeWidth`} id={`${props.properties.id}-strokeWidth`}
@ -486,7 +482,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='col-span-3' inputClassName='col-span-3'
type='number' type='number'
value={(props.properties.style.strokeWidth ?? 1).toString()} value={(props.properties.style.strokeWidth ?? 1).toString()}
onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }} onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
/> />
<TextInputGroup <TextInputGroup
id={`${props.properties.id}-fill`} id={`${props.properties.id}-fill`}
@ -496,7 +492,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
inputClassName='col-span-3' inputClassName='col-span-3'
type='string' type='string'
value={props.properties.style.fill ?? 'black'} value={props.properties.style.fill ?? 'black'}
onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }} onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
/> />
<InputGroup <InputGroup
labelKey={`${props.properties.id}-fillOpacity`} labelKey={`${props.properties.id}-fillOpacity`}
@ -509,7 +505,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
max={1} max={1}
step={0.01} step={0.01}
value={(props.properties.style.fillOpacity ?? 1).toString()} value={(props.properties.style.fillOpacity ?? 1).toString()}
onChange={(event) => { props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style); }} onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
/> />
</div> </div>
</Category> </Category>

2
src/Components/ContainerProperties/ContainerProperties.test.tsx
View file

@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
import * as React from 'react'; import * as React from 'react';
import { expect, describe, it, vi } from 'vitest'; import { expect, describe, it, vi } from 'vitest';
import { PositionReference } from '../../Enums/PositionReference'; import { PositionReference } from '../../Enums/PositionReference';
import { type IContainerProperties } from '../../Interfaces/IContainerProperties'; import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { Orientation } from '../../Enums/Orientation'; import { Orientation } from '../../Enums/Orientation';
import { ContainerProperties } from './ContainerProperties'; import { ContainerProperties } from './ContainerProperties';

6
src/Components/ContainerProperties/ContainerProperties.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { type PropertyType } from '../../Enums/PropertyType'; import { PropertyType } from '../../Enums/PropertyType';
import { type IContainerProperties } from '../../Interfaces/IContainerProperties'; import { IContainerProperties } from '../../Interfaces/IContainerProperties';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { ContainerForm } from './ContainerForm'; import { ContainerForm } from './ContainerForm';
interface IPropertiesProps { interface IPropertiesProps {

16
src/Components/Editor/Actions/AddContainer.ts
View file

@ -3,12 +3,12 @@
*/ */
import { AddMethod } from '../../../Enums/AddMethod'; import { AddMethod } from '../../../Enums/AddMethod';
import { type IAvailableContainer } from '../../../Interfaces/IAvailableContainer'; import { IAvailableContainer } from '../../../Interfaces/IAvailableContainer';
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IPattern, GetPattern, type ContainerOrPattern } from '../../../Interfaces/IPattern'; import { IPattern, GetPattern, ContainerOrPattern } from '../../../Interfaces/IPattern';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { GetDefaultContainerProps } from '../../../utils/default'; import { GetDefaultContainerProps } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools'; import { FindContainerById } from '../../../utils/itertools';
@ -308,8 +308,8 @@ function InitializeChildrenWithPattern(
return; return;
} }
const configs = new Map<string, IAvailableContainer>(configuration.AvailableContainers.map(config => [config.Type, config])); const configs: Map<string, IAvailableContainer> = new Map(configuration.AvailableContainers.map(config => [config.Type, config]));
const patterns = new Map<string, IPattern>(configuration.Patterns.map(pattern => [pattern.id, pattern])); const patterns: Map<string, IPattern> = new Map(configuration.Patterns.map(pattern => [pattern.id, pattern]));
const containerOrPattern = GetPattern(patternId, configs, patterns); const containerOrPattern = GetPattern(patternId, configs, patterns);
if (containerOrPattern === undefined) { if (containerOrPattern === undefined) {

6
src/Components/Editor/Actions/ContainerOperations.ts
View file

@ -1,9 +1,9 @@
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { FindContainerById, MakeDFSIterator } from '../../../utils/itertools'; import { FindContainerById, MakeDFSIterator } from '../../../utils/itertools';
import { GetCurrentHistory } from '../Editor'; import { GetCurrentHistory } from '../Editor';
import { ApplyBehaviors, ApplyBehaviorsOnSiblings, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors'; import { ApplyBehaviors, ApplyBehaviorsOnSiblings, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import { PropertyType } from '../../../Enums/PropertyType'; import { PropertyType } from '../../../Enums/PropertyType';
import { TransformX, TransformY } from '../../../utils/svg'; import { TransformX, TransformY } from '../../../utils/svg';

16
src/Components/Editor/Actions/ContextMenuActions.ts
View file

@ -1,16 +1,16 @@
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import { type Dispatch, type SetStateAction } from 'react'; import { Dispatch, SetStateAction } from 'react';
import { AddMethod } from '../../../Enums/AddMethod'; import { AddMethod } from '../../../Enums/AddMethod';
import { type IAction } from '../../../Interfaces/IAction'; import { IAction } from '../../../Interfaces/IAction';
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest'; import { ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
import { type ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse'; import { ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
import { DISABLE_API } from '../../../utils/default'; import { DISABLE_API } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools'; import { FindContainerById } from '../../../utils/itertools';
import { SetContainerList } from '../../API/api'; import { SetContainerList } from '../../API/api';
import { type IMenuAction } from '../../Menu/Menu'; import { IMenuAction } from '../../Menu/Menu';
import { GetCurrentHistoryState } from '../Editor'; import { GetCurrentHistoryState } from '../Editor';
import { AddContainers } from './AddContainer'; import { AddContainers } from './AddContainer';
import { DeleteContainer } from './ContainerOperations'; import { DeleteContainer } from './ContainerOperations';

6
src/Components/Editor/Actions/Save.ts
View file

@ -1,8 +1,8 @@
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { GetCircularReplacer } from '../../../utils/saveload'; import { GetCircularReplacer } from '../../../utils/saveload';
import { ID } from '../../SVG/SVG'; import { ID } from '../../SVG/SVG';
import { type IEditorState } from '../../../Interfaces/IEditorState'; import { IEditorState } from '../../../Interfaces/IEditorState';
import { SHOW_SELECTOR_TEXT } from '../../../utils/default'; import { SHOW_SELECTOR_TEXT } from '../../../utils/default';
export function SaveEditorAsJSON( export function SaveEditorAsJSON(

4
src/Components/Editor/Actions/Shortcuts.ts
View file

@ -1,5 +1,5 @@
import { type Dispatch, type SetStateAction } from 'react'; import { Dispatch, SetStateAction } from 'react';
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { ENABLE_SHORTCUTS } from '../../../utils/default'; import { ENABLE_SHORTCUTS } from '../../../utils/default';
export function OnKey( export function OnKey(

8
src/Components/Editor/Actions/SymbolOperations.ts
View file

@ -1,7 +1,7 @@
import { type IConfiguration } from '../../../Interfaces/IConfiguration'; import { IConfiguration } from '../../../Interfaces/IConfiguration';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../../Interfaces/IHistoryState'; import { IHistoryState } from '../../../Interfaces/IHistoryState';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { GetDefaultSymbolModel } from '../../../utils/default'; import { GetDefaultSymbolModel } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools'; import { FindContainerById } from '../../../utils/itertools';
import { RestoreX } from '../../../utils/svg'; import { RestoreX } from '../../../utils/svg';

2
src/Components/Editor/Behaviors/AnchorBehaviors.ts
View file

@ -13,7 +13,7 @@
* or make them lose their property as a rigid body * or make them lose their property as a rigid body
*/ */
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { ConstraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors'; import { ConstraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
import { FindContainerById } from '../../../utils/itertools'; import { FindContainerById } from '../../../utils/itertools';

4
src/Components/Editor/Behaviors/Behaviors.ts
View file

@ -1,5 +1,5 @@
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default'; import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default';
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools'; import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';
import { ApplyAnchor, GetOverlappingContainers } from './AnchorBehaviors'; import { ApplyAnchor, GetOverlappingContainers } from './AnchorBehaviors';

2
src/Components/Editor/Behaviors/FlexBehaviors.ts
View file

@ -1,4 +1,4 @@
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { Simplex } from '../../../utils/simplex'; import { Simplex } from '../../../utils/simplex';
import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg'; import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';

2
src/Components/Editor/Behaviors/PushBehaviors.ts
View file

@ -1,4 +1,4 @@
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { MakeChildrenIterator, ReversePairwise } from '../../../utils/itertools'; import { MakeChildrenIterator, ReversePairwise } from '../../../utils/itertools';
import { Flex } from './FlexBehaviors'; import { Flex } from './FlexBehaviors';

4
src/Components/Editor/Behaviors/RigidBodyBehaviors.ts
View file

@ -6,8 +6,8 @@
* If the contraints fails, an error message will be returned * If the contraints fails, an error message will be returned
*/ */
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISizePointer } from '../../../Interfaces/ISizePointer'; import { ISizePointer } from '../../../Interfaces/ISizePointer';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { ENABLE_HARD_RIGID } from '../../../utils/default'; import { ENABLE_HARD_RIGID } from '../../../utils/default';
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools'; import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';

2
src/Components/Editor/Behaviors/SwapBehaviors.ts
View file

@ -2,7 +2,7 @@
* Swap two flex container when one is overlapping another * Swap two flex container when one is overlapping another
*/ */
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { GetHorizontallyOverlappingContainers, GetVerticallyOverlappingContainers } from './AnchorBehaviors'; import { GetHorizontallyOverlappingContainers, GetVerticallyOverlappingContainers } from './AnchorBehaviors';
import { MakeChildrenIterator } from '../../../utils/itertools'; import { MakeChildrenIterator } from '../../../utils/itertools';

4
src/Components/Editor/Behaviors/SymbolBehaviors.ts
View file

@ -1,5 +1,5 @@
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools'; import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools';
import { RestoreX, TransformX } from '../../../utils/svg'; import { RestoreX, TransformX } from '../../../utils/svg';

66
src/Components/Editor/Editor.tsx
View file

@ -1,7 +1,7 @@
import React, { type Dispatch, type SetStateAction, useEffect, useRef } from 'react'; import React, { Dispatch, SetStateAction, useEffect, useRef } from 'react';
import './Editor.scss'; import './Editor.scss';
import { type IConfiguration } from '../../Interfaces/IConfiguration'; import { IConfiguration } from '../../Interfaces/IConfiguration';
import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { UI } from '../UI/UI'; import { UI } from '../UI/UI';
import { SelectContainer, DeleteContainer, OnPropertyChange } from './Actions/ContainerOperations'; import { SelectContainer, DeleteContainer, OnPropertyChange } from './Actions/ContainerOperations';
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save'; import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
@ -29,7 +29,7 @@ function UseShortcuts(
): void { ): void {
useEffect(() => { useEffect(() => {
function OnKeyUp(event: KeyboardEvent): void { function OnKeyUp(event: KeyboardEvent): void {
OnKey( return OnKey(
event, event,
history, history,
historyCurrentStep, historyCurrentStep,
@ -120,31 +120,25 @@ export function Editor(props: IEditorProps): JSX.Element {
history, history,
historyCurrentStep historyCurrentStep
}} }}
selectContainer={(container) => { selectContainer={(container) => setNewHistory(
setNewHistory(
SelectContainer( SelectContainer(
container, container,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} deleteContainer={(containerId: string) => setNewHistory(
deleteContainer={(containerId: string) => {
setNewHistory(
DeleteContainer( DeleteContainer(
containerId, containerId,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} onPropertyChange={(key, value, type) => setNewHistory(
onPropertyChange={(key, value, type) => {
setNewHistory(
OnPropertyChange( OnPropertyChange(
key, value, type, key, value, type,
selected, selected,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}}
addContainer={(type) => { addContainer={(type) => {
if (selected === null || selected === undefined) { if (selected === null || selected === undefined) {
return; return;
@ -158,8 +152,7 @@ export function Editor(props: IEditorProps): JSX.Element {
historyCurrentStep historyCurrentStep
)); ));
}} }}
addContainerAt={(index, type, parent) => { addContainerAt={(index, type, parent) => setNewHistory(
setNewHistory(
AddContainer( AddContainer(
index, index,
type, type,
@ -168,50 +161,39 @@ export function Editor(props: IEditorProps): JSX.Element {
history, history,
historyCurrentStep historyCurrentStep
) )
); )}
}} addSymbol={(type) => setNewHistory(
addSymbol={(type) => {
setNewHistory(
AddSymbol( AddSymbol(
type, type,
configuration, configuration,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} onSymbolPropertyChange={(key, value) => setNewHistory(
onSymbolPropertyChange={(key, value) => {
setNewHistory(
OnSymbolPropertyChange( OnSymbolPropertyChange(
key, value, key, value,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} selectSymbol={(symbolId) => setNewHistory(
selectSymbol={(symbolId) => {
setNewHistory(
SelectSymbol( SelectSymbol(
symbolId, symbolId,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} deleteSymbol={(symbolId) => setNewHistory(
deleteSymbol={(symbolId) => {
setNewHistory(
DeleteSymbol( DeleteSymbol(
symbolId, symbolId,
history, history,
historyCurrentStep historyCurrentStep
)); ))}
}} saveEditorAsJSON={() => SaveEditorAsJSON(
saveEditorAsJSON={() => {
SaveEditorAsJSON(
history, history,
historyCurrentStep, historyCurrentStep,
configuration configuration
); )}
}} saveEditorAsSVG={() => SaveEditorAsSVG()}
saveEditorAsSVG={() => { SaveEditorAsSVG(); }} loadState={(move) => setHistoryCurrentStep(move)}
loadState={(move) => { setHistoryCurrentStep(move); }}
/> />
<Menu <Menu
getListener={() => editorRef.current} getListener={() => editorRef.current}

14
src/Components/ElementsList/ElementsSideBar.tsx
View file

@ -4,10 +4,10 @@ import useSize from '@react-hook/size';
import { FixedSizeList as List } from 'react-window'; import { FixedSizeList as List } from 'react-window';
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'; import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
import { ContainerProperties } from '../ContainerProperties/ContainerProperties'; import { ContainerProperties } from '../ContainerProperties/ContainerProperties';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { type PropertyType } from '../../Enums/PropertyType'; import { PropertyType } from '../../Enums/PropertyType';
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar'; import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@ -229,10 +229,10 @@ function ElementsListRow(
key={key} key={key}
style={style} style={style}
title={container.properties.warning} title={container.properties.warning}
onClick={() => { selectContainer(container.properties.id); }} onClick={() => selectContainer(container.properties.id)}
onDrop={(event) => { HandleOnDrop(event, containers, mainContainer, addContainer); }} onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
onDragOver={(event) => { HandleDragOver(event, mainContainer); }} onDragOver={(event) => HandleDragOver(event, mainContainer)}
onDragLeave={(event) => { HandleDragLeave(event); }} onDragLeave={(event) => HandleDragLeave(event)}
> >
{verticalBars} {verticalBars}
{text} {text}

2
src/Components/FloatingButton/FloatingButton.tsx
View file

@ -26,7 +26,7 @@ export function FloatingButton(props: IFloatingButtonProps): JSX.Element {
<button type="button" <button type="button"
className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'} className={'transition-all w-14 h-14 p-2 align-middle items-center justify-center rounded-full bg-blue-500 hover:bg-blue-800'}
title='Open menu' title='Open menu'
onClick={() => { ToggleState(isHidden, setHidden); }} onClick={() => ToggleState(isHidden, setHidden)}
> >
{icon} {icon}
</button> </button>

2
src/Components/FloatingButton/MenuButton.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline'; import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
import { FloatingButton } from './FloatingButton'; import { FloatingButton } from './FloatingButton';
import { type IUIProps } from '../UI/UI'; import { IUIProps } from '../UI/UI';
export function MenuButton(props: IUIProps): JSX.Element { export function MenuButton(props: IUIProps): JSX.Element {
return <FloatingButton className={'fixed z-10 flex flex-col gap-2 items-center bottom-12 right-12'}> return <FloatingButton className={'fixed z-10 flex flex-col gap-2 items-center bottom-12 right-12'}>

4
src/Components/History/History.tsx
View file

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { FixedSizeList as List } from 'react-window'; 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'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
interface IHistoryProps { interface IHistoryProps {
@ -23,7 +23,7 @@ export function History(props: IHistoryProps): JSX.Element {
<button type="button" <button type="button"
key={reversedIndex} key={reversedIndex}
style={style} style={style}
onClick={() => { props.jumpTo(reversedIndex); }} onClick={() => props.jumpTo(reversedIndex)}
title={step.lastAction} title={step.lastAction}
className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden
text-left text-sm font-medium transition-all ${selectedClass}`} text-left text-sm font-medium transition-all ${selectedClass}`}

2
src/Components/InputGroup/TextInputGroup.tsx
View file

@ -53,7 +53,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
className={`${className} ${props.inputClassName} ${warningClass}`} className={`${className} ${props.inputClassName} ${warningClass}`}
type={props.type} type={props.type}
value={value} value={value}
onChange={(event) => { setValue(event.target.value); }} onChange={(event) => setValue(event.target.value)}
onKeyUp={OnKeyUp} onKeyUp={OnKeyUp}
min={props.min} min={props.min}
max={props.max} max={props.max}

2
src/Components/LanguageProvider/LanguageProvider.tsx
View file

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { createContext, useState } from 'react'; import { createContext, useState } from 'react';
import { type ILanguage } from '../../Interfaces/ILanguage'; import { ILanguage } from '../../Interfaces/ILanguage';
import { languageOptions, translations } from '../../Translations/Translations'; import { languageOptions, translations } from '../../Translations/Translations';
import { DEFAULT_LANGUAGE } from '../../utils/default'; import { DEFAULT_LANGUAGE } from '../../utils/default';

4
src/Components/MainMenu/MainMenu.tsx
View file

@ -45,7 +45,7 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
</label> </label>
</form> </form>
<button type="button" <button type="button"
onClick={() => { setWindowState(WindowState.Main); }} onClick={() => setWindowState(WindowState.Main)}
className='normal-btn block className='normal-btn block
mt-8 ' mt-8 '
> >
@ -70,7 +70,7 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
<button <button
type="button" type="button"
className='mainmenu-btn' className='mainmenu-btn'
onClick={() => { setWindowState(WindowState.Load); }} onClick={() => setWindowState(WindowState.Load)}
> >
{Text({ textId: '@LoadConfigFile' })} {Text({ textId: '@LoadConfigFile' })}
</button> </button>

6
src/Components/Menu/Menu.tsx
View file

@ -1,6 +1,6 @@
import useSize from '@react-hook/size'; import useSize from '@react-hook/size';
import * as React from 'react'; import * as React from 'react';
import { type IPoint } from '../../Interfaces/IPoint'; import { IPoint } from '../../Interfaces/IPoint';
import { MenuItem } from './MenuItem'; import { MenuItem } from './MenuItem';
interface IMenuProps { interface IMenuProps {
@ -136,7 +136,7 @@ function AddClassSpecificActions(
text={action.text} text={action.text}
title={action.title} title={action.title}
shortcut={action.shortcut} shortcut={action.shortcut}
onClick={() => { action.action(target); }} />); onClick={() => action.action(target)} />);
}); });
children.push(<hr key={`contextmenu-hr-${count}`} className='border-slate-400' />); children.push(<hr key={`contextmenu-hr-${count}`} className='border-slate-400' />);
}; };
@ -155,7 +155,7 @@ function AddUniversalActions(props: IMenuProps, children: JSX.Element[], count:
text={action.text} text={action.text}
title={action.title} title={action.title}
shortcut={action.shortcut} shortcut={action.shortcut}
onClick={() => { action.action(target); }} />); onClick={() => action.action(target)} />);
}); });
} }

2
src/Components/Menu/MenuItem.tsx
View file

@ -13,7 +13,7 @@ export function MenuItem(props: IMenuItemProps): JSX.Element {
<button type="button" <button type="button"
className={`flex place-content-between ${props.className ?? ''}`} className={`flex place-content-between ${props.className ?? ''}`}
title={props.title} title={props.title}
onClick={() => { props.onClick(); }}> onClick={() => props.onClick()}>
{props.text} {props.text}
<span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} /> <span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} />
</button> </button>

6
src/Components/Messages/Messages.tsx
View file

@ -2,8 +2,8 @@ import { TrashIcon } from '@heroicons/react/24/outline';
import * as React from 'react'; import * as React from 'react';
import { FixedSizeList as List } from 'react-window'; import { FixedSizeList as List } from 'react-window';
import { MessageType } from '../../Enums/MessageType'; import { MessageType } from '../../Enums/MessageType';
import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { type IMessage } from '../../Interfaces/IMessage'; import { IMessage } from '../../Interfaces/IMessage';
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar'; import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@ -14,7 +14,7 @@ interface IMessagesProps {
} }
export function Messages(props: IMessagesProps): JSX.Element { 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 reversedIndex = (props.messages.length - 1) - index;
const message = props.messages[reversedIndex]; const message = props.messages[reversedIndex];
let classType = ''; let classType = '';

2
src/Components/RadioGroupButtons/RadioGroupButtons.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type IInputGroup } from '../../Interfaces/IInputGroup'; import { IInputGroup } from '../../Interfaces/IInputGroup';
interface IRadioGroupButtonsProps { interface IRadioGroupButtonsProps {
name: string name: string

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

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { Interweave, type Node } from 'interweave'; import { Interweave, Node } from 'interweave';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { type IContainerProperties } from '../../../Interfaces/IContainerProperties'; import { IContainerProperties } from '../../../Interfaces/IContainerProperties';
import { Camelize } from '../../../utils/stringtools'; import { Camelize } from '../../../utils/stringtools';
import { SHOW_TEXT } from '../../../utils/default'; import { SHOW_TEXT } from '../../../utils/default';
import { FindContainerById } from '../../../utils/itertools'; import { FindContainerById } from '../../../utils/itertools';
@ -67,7 +67,7 @@ export function Container(props: IContainerProps): JSX.Element {
width={width} width={width}
height={height} height={height}
style={style} style={style}
onClick={() => { props.selectContainer(props.model.properties.id); }} onClick={() => props.selectContainer(props.model.properties.id)}
> >
</rect>); </rect>);
@ -108,7 +108,7 @@ function CreateReactCustomSVG(customSVG: string, properties: IContainerPropertie
function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode { function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode {
const supportedTags = ['line', 'path', 'rect']; const supportedTags = ['line', 'path', 'rect'];
if (supportedTags.includes(node.tagName.toLowerCase())) { if (supportedTags.includes(node.tagName.toLowerCase())) {
const attributes: Record<string, string | object | null> = {}; const attributes: { [att: string]: string | object | null } = {};
node.getAttributeNames().forEach(attName => { node.getAttributeNames().forEach(attName => {
const attributeValue = node.getAttribute(attName); const attributeValue = node.getAttribute(attName);
if (attributeValue === null) { if (attributeValue === null) {

2
src/Components/SVG/Elements/DepthDimensionLayer.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { DIMENSION_MARGIN } from '../../../utils/default'; import { DIMENSION_MARGIN } from '../../../utils/default';
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools'; import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
import { TransformX } from '../../../utils/svg'; import { TransformX } from '../../../utils/svg';

4
src/Components/SVG/Elements/DimensionLayer.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { Orientation } from '../../../Enums/Orientation'; import { Orientation } from '../../../Enums/Orientation';
import { Position } from '../../../Enums/Position'; import { Position } from '../../../Enums/Position';
import { type IContainerModel } from '../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../Interfaces/IContainerModel';
import { import {
DIMENSION_MARGIN, DIMENSION_MARGIN,
SHOW_BORROWER_DIMENSIONS, SHOW_BORROWER_DIMENSIONS,
@ -12,7 +12,7 @@ import {
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
import { TransformX, TransformY } from '../../../utils/svg'; import { TransformX, TransformY } from '../../../utils/svg';
import { Dimension } from './Dimension'; import { Dimension } from './Dimension';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
interface IDimensionLayerProps { interface IDimensionLayerProps {
containers: Map<string, IContainerModel> containers: Map<string, IContainerModel>

2
src/Components/SVG/Elements/Selector/Selector.tsx
View file

@ -1,6 +1,6 @@
import './Selector.scss'; import './Selector.scss';
import * as React from 'react'; import * as React from 'react';
import { type IContainerModel } from '../../../../Interfaces/IContainerModel'; import { IContainerModel } from '../../../../Interfaces/IContainerModel';
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default'; import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
import { GetAbsolutePosition } from '../../../../utils/itertools'; import { GetAbsolutePosition } from '../../../../utils/itertools';
import { RemoveMargin } from '../../../../utils/svg'; import { RemoveMargin } from '../../../../utils/svg';

2
src/Components/SVG/Elements/Symbol.tsx
View file

@ -1,6 +1,6 @@
import { Interweave } from 'interweave'; import { Interweave } from 'interweave';
import * as React from 'react'; import * as React from 'react';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default'; import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
interface ISymbolProps { interface ISymbolProps {

2
src/Components/SVG/Elements/SymbolLayer.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
import { Symbol } from './Symbol'; import { Symbol } from './Symbol';
interface ISymbolLayerProps { interface ISymbolLayerProps {

6
src/Components/SVG/SVG.tsx
View file

@ -1,12 +1,12 @@
import * as React from 'react'; 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 { Container } from './Elements/Container';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { Selector } from './Elements/Selector/Selector'; import { Selector } from './Elements/Selector/Selector';
import { DepthDimensionLayer } from './Elements/DepthDimensionLayer'; import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default'; import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
import { SymbolLayer } from './Elements/SymbolLayer'; import { SymbolLayer } from './Elements/SymbolLayer';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { DimensionLayer } from './Elements/DimensionLayer'; import { DimensionLayer } from './Elements/DimensionLayer';
interface ISVGProps { interface ISVGProps {

2
src/Components/Select/Select.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type IInputGroup } from '../../Interfaces/IInputGroup'; import { IInputGroup } from '../../Interfaces/IInputGroup';
interface ISelectProps { interface ISelectProps {
labelKey?: string labelKey?: string

2
src/Components/Sidebar/ToggleSideBar/ToggleSideBar.tsx
View file

@ -13,7 +13,7 @@ export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps)
<button <button
className={'w-full py-2'} className={'w-full py-2'}
type='button' type='button'
onClick={() => { onChange(!checked); }} onClick={() => onChange(!checked)}
> >
<p className='text-vertical'>{title} <p className='text-vertical'>{title}
</p> </p>

13
src/Components/SymbolProperties/SymbolForm.tsx
View file

@ -1,9 +1,10 @@
import * as React from 'react'; import * as React from 'react';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { RestoreX, TransformX } from '../../utils/svg'; import { RestoreX, TransformX } from '../../utils/svg';
import { InputGroup } from '../InputGroup/InputGroup'; import { InputGroup } from '../InputGroup/InputGroup';
import { TextInputGroup } from '../InputGroup/TextInputGroup'; import { TextInputGroup } from '../InputGroup/TextInputGroup';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
import { PropertyType } from '../../Enums/PropertyType';
import { ToggleButton } from '../ToggleButton/ToggleButton'; import { ToggleButton } from '../ToggleButton/ToggleButton';
interface ISymbolFormProps { interface ISymbolFormProps {
@ -31,7 +32,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='string' type='string'
value={props.symbol.displayedText} value={props.symbol.displayedText}
onChange={(value) => { props.onChange('displayedText', value); }} /> onChange={(value) => props.onChange('displayedText', value)} />
<TextInputGroup <TextInputGroup
id='x' id='x'
labelText={Text({ textId: '@SymbolX' })} labelText={Text({ textId: '@SymbolX' })}
@ -40,7 +41,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
inputClassName='' inputClassName=''
type='number' type='number'
value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()} value={TransformX(props.symbol.x, props.symbol.width, props.symbol.config.PositionReference).toString()}
onChange={(value) => { props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference)); }} /> onChange={(value) => props.onChange('x', RestoreX(Number(value), props.symbol.width, props.symbol.config.PositionReference))} />
<TextInputGroup <TextInputGroup
id='height' id='height'
labelText={Text({ textId: '@SymbolHeight' })} labelText={Text({ textId: '@SymbolHeight' })}
@ -50,7 +51,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={props.symbol.height.toString()} value={props.symbol.height.toString()}
onChange={(value) => { props.onChange('height', Number(value)); }} /> onChange={(value) => props.onChange('height', Number(value))} />
<TextInputGroup <TextInputGroup
id='width' id='width'
labelText={Text({ textId: '@SymbolWidth' })} labelText={Text({ textId: '@SymbolWidth' })}
@ -60,14 +61,14 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
type='number' type='number'
min={0} min={0}
value={props.symbol.width.toString()} value={props.symbol.width.toString()}
onChange={(value) => { props.onChange('width', Number(value)); }} /> onChange={(value) => props.onChange('width', Number(value))} />
<ToggleButton <ToggleButton
labelText={Text({ textId: '@ShowDimension' })} labelText={Text({ textId: '@ShowDimension' })}
inputKey='showDimension' inputKey='showDimension'
labelClassName='' labelClassName=''
inputClassName='' inputClassName=''
checked={props.symbol.showDimension} checked={props.symbol.showDimension}
onChange={(e) => { props.onChange('showDimension', e.target.checked); }}/> onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
</div> </div>
); );
} }

2
src/Components/SymbolProperties/SymbolProperties.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolForm } from './SymbolForm'; import { SymbolForm } from './SymbolForm';
interface ISymbolPropertiesProps { interface ISymbolPropertiesProps {

10
src/Components/Symbols/Symbols.tsx
View file

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { type IAvailableSymbol } from '../../Interfaces/IAvailableSymbol'; import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
import { TruncateString } from '../../utils/stringtools'; import { TruncateString } from '../../utils/stringtools';
interface ISymbolsProps { interface ISymbolsProps {
@ -20,9 +20,9 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
key={componentOption.Name} key={componentOption.Name}
id={componentOption.Name} id={componentOption.Name}
title={componentOption.Name} title={componentOption.Name}
onClick={() => { props.buttonOnClick(componentOption.Name); }} onClick={() => props.buttonOnClick(componentOption.Name)}
draggable={true} draggable={true}
onDragStart={(event) => { HandleDragStart(event); }} onDragStart={(event) => HandleDragStart(event)}
> >
<div> <div>
<img <img
@ -41,9 +41,9 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
key={componentOption.Name} key={componentOption.Name}
id={componentOption.Name} id={componentOption.Name}
title={componentOption.Name} title={componentOption.Name}
onClick={() => { props.buttonOnClick(componentOption.Name); }} onClick={() => props.buttonOnClick(componentOption.Name)}
draggable={true} draggable={true}
onDragStart={(event) => { HandleDragStart(event); }} onDragStart={(event) => HandleDragStart(event)}
> >
{TruncateString(componentOption.Name, 5)} {TruncateString(componentOption.Name, 5)}

4
src/Components/SymbolsList/SymbolsSidebar.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import useSize from '@react-hook/size'; import useSize from '@react-hook/size';
import { FixedSizeList as List } from 'react-window'; import { FixedSizeList as List } from 'react-window';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel'; import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { SymbolProperties } from '../SymbolProperties/SymbolProperties'; import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar'; import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@ -39,7 +39,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
id={key} id={key}
key={key} key={key}
style={style} style={style}
onClick={() => { props.selectSymbol(key); }} onClick={() => props.selectSymbol(key)}
> >
{text} {text}
</button> </button>

16
src/Components/UI/UI.tsx
View file

@ -4,17 +4,17 @@ import { History } from '../History/History';
import { Bar, BAR_WIDTH } from '../Bar/Bar'; import { Bar, BAR_WIDTH } from '../Bar/Bar';
import { Symbols } from '../Symbols/Symbols'; import { Symbols } from '../Symbols/Symbols';
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar'; import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
import { type PropertyType } from '../../Enums/PropertyType'; import { PropertyType } from '../../Enums/PropertyType';
import { Messages } from '../Messages/Messages'; import { Messages } from '../Messages/Messages';
import { Sidebar } from '../Sidebar/Sidebar'; import { Sidebar } from '../Sidebar/Sidebar';
import { Components } from '../Components/Components'; import { Components } from '../Components/Components';
import { Viewer } from '../Viewer/Viewer'; import { Viewer } from '../Viewer/Viewer';
import { Settings } from '../Settings/Settings'; import { Settings } from '../Settings/Settings';
import { type IMessage } from '../../Interfaces/IMessage'; import { IMessage } from '../../Interfaces/IMessage';
import { DISABLE_API } from '../../utils/default'; import { DISABLE_API } from '../../utils/default';
import { UseWorker, UseAsync } from './UseWorker'; import { UseWorker, UseAsync } from './UseWorker';
import { FindContainerById } from '../../utils/itertools'; import { FindContainerById } from '../../utils/itertools';
import { type IEditorState } from '../../Interfaces/IEditorState'; import { IEditorState } from '../../Interfaces/IEditorState';
import { GetCurrentHistoryState } from '../Editor/Editor'; import { GetCurrentHistoryState } from '../Editor/Editor';
import { Text } from '../Text/Text'; import { Text } from '../Text/Text';
@ -116,7 +116,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectContainer={methods.selectContainer} selectContainer={methods.selectContainer}
addContainer={methods.addContainerAt} addContainer={methods.addContainerAt}
isExpanded ={false} isExpanded ={false}
onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } } onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) }
/>; />;
break; break;
case SidebarType.ComponentsExpanded: case SidebarType.ComponentsExpanded:
@ -137,7 +137,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
selectContainer={methods.selectContainer} selectContainer={methods.selectContainer}
addContainer={methods.addContainerAt} addContainer={methods.addContainerAt}
isExpanded ={true} isExpanded ={true}
onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } } onExpandChange={() => setOrToggleSidebar(SidebarType.Components) }
/>; />;
break; break;
case SidebarType.Symbols: case SidebarType.Symbols:
@ -153,7 +153,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange} onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol} selectSymbol={methods.selectSymbol}
isExpanded ={false} isExpanded ={false}
onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } } onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) }
/>; />;
break; break;
case SidebarType.SymbolsExpanded: case SidebarType.SymbolsExpanded:
@ -169,7 +169,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
onPropertyChange={methods.onSymbolPropertyChange} onPropertyChange={methods.onSymbolPropertyChange}
selectSymbol={methods.selectSymbol} selectSymbol={methods.selectSymbol}
isExpanded ={true} isExpanded ={true}
onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }} onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)}
/>; />;
break; break;
@ -187,7 +187,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
leftChildren = <Messages leftChildren = <Messages
historyState={current} historyState={current}
messages={messages} messages={messages}
clearMessage={() => { setMessages([]); }} clearMessage={() => setMessages([])}
/>; />;
break; break;

8
src/Components/UI/UseWorker.tsx
View file

@ -1,8 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { type IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest'; import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
import { type IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse'; import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
import { type IMessage } from '../../Interfaces/IMessage'; import { IMessage } from '../../Interfaces/IMessage';
import { GetCircularReplacer } from '../../utils/saveload'; import { GetCircularReplacer } from '../../utils/saveload';
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

6
src/Components/Viewer/Viewer.tsx
View file

@ -1,7 +1,7 @@
import * as React from 'react'; import * as React from 'react';
import { type IContainerModel } from '../../Interfaces/IContainerModel'; import { IContainerModel } from '../../Interfaces/IContainerModel';
import { type IHistoryState } from '../../Interfaces/IHistoryState'; import { IHistoryState } from '../../Interfaces/IHistoryState';
import { type IPoint } from '../../Interfaces/IPoint'; import { IPoint } from '../../Interfaces/IPoint';
import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default'; import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools'; import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
import { BAR_WIDTH } from '../Bar/Bar'; import { BAR_WIDTH } from '../Bar/Bar';

10
src/Events/AppEvents.ts
View file

@ -1,9 +1,9 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { AppState } from '../Enums/AppState'; import { AppState } from '../Enums/AppState';
import { type IConfiguration } from '../Interfaces/IConfiguration'; import { IConfiguration } from '../Interfaces/IConfiguration';
import { type IEditorState } from '../Interfaces/IEditorState'; import { IEditorState } from '../Interfaces/IEditorState';
import { type IHistoryState } from '../Interfaces/IHistoryState'; import { IHistoryState } from '../Interfaces/IHistoryState';
import { type ILanguage } from '../Interfaces/ILanguage'; import { ILanguage } from '../Interfaces/ILanguage';
import { languageOptions, translations } from '../Translations/Translations'; import { languageOptions, translations } from '../Translations/Translations';
import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default'; import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default';
import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload'; import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
@ -49,7 +49,7 @@ export function UseCustomEvents(
const funcs = new Map<string, () => void>(); const funcs = new Map<string, () => void>();
for (const event of events) { for (const event of events) {
function Func(eventInitDict?: CustomEventInit): void { function Func(eventInitDict?: CustomEventInit): void {
event.func({ return event.func({
root, root,
languageContext, languageContext,
setEditor, setEditor,

8
src/Events/EditorEvents.ts
View file

@ -3,9 +3,9 @@ import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as
import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations'; 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 { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations';
import { GetCurrentHistory } from '../Components/Editor/Editor'; import { GetCurrentHistory } from '../Components/Editor/Editor';
import { type IConfiguration } from '../Interfaces/IConfiguration'; import { IConfiguration } from '../Interfaces/IConfiguration';
import { type IEditorState } from '../Interfaces/IEditorState'; import { IEditorState } from '../Interfaces/IEditorState';
import { type IHistoryState } from '../Interfaces/IHistoryState'; import { IHistoryState } from '../Interfaces/IHistoryState';
import { FindContainerById } from '../utils/itertools'; import { FindContainerById } from '../utils/itertools';
import { GetCircularReplacer } from '../utils/saveload'; import { GetCircularReplacer } from '../utils/saveload';
@ -61,7 +61,7 @@ export function UseCustomEvents(
for (const event of events) { for (const event of events) {
function Func(eventInitDict?: CustomEventInit): void { function Func(eventInitDict?: CustomEventInit): void {
event.func({ return event.func({
root, root,
editorState, editorState,
setNewHistory, setNewHistory,

4
src/Interfaces/IAction.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type AddMethod } from '../Enums/AddMethod'; import { AddMethod } from '../Enums/AddMethod';
import { type IImage } from './IImage'; import { IImage } from './IImage';
export interface IAction { export interface IAction {
Id: string Id: string

16
src/Interfaces/IAvailableContainer.ts
View file

@ -1,12 +1,12 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type AddMethod } from '../Enums/AddMethod'; import { AddMethod } from '../Enums/AddMethod';
import { type PositionReference } from '../Enums/PositionReference'; import { PositionReference } from '../Enums/PositionReference';
import { type IAction } from './IAction'; import { IAction } from './IAction';
import { type IMargin } from './IMargin'; import { IMargin } from './IMargin';
import { type Orientation } from '../Enums/Orientation'; import { Orientation } from '../Enums/Orientation';
import { type IKeyValue } from './IKeyValue'; import { IKeyValue } from './IKeyValue';
import { type IStyle } from './IStyle'; import { IStyle } from './IStyle';
import { type IDimensions } from './IDimensions'; import { IDimensions } from './IDimensions';
/** Model of available container used in application configuration */ /** Model of available container used in application configuration */
export interface IAvailableContainer { export interface IAvailableContainer {

6
src/Interfaces/IAvailableSymbol.ts
View file

@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type PositionReference } from '../Enums/PositionReference'; import { PositionReference } from '../Enums/PositionReference';
import { type IAvailableContainer } from './IAvailableContainer'; import { IAvailableContainer } from './IAvailableContainer';
import { type IImage } from './IImage'; import { IImage } from './IImage';
/** /**
* Model of available symbol to configure the application */ * Model of available symbol to configure the application */

10
src/Interfaces/IConfiguration.ts
View file

@ -1,9 +1,9 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type IAPIConfiguration } from './IAPIConfiguration'; import { IAPIConfiguration } from './IAPIConfiguration';
import { type IAvailableContainer } from './IAvailableContainer'; import { IAvailableContainer } from './IAvailableContainer';
import { type IAvailableSymbol } from './IAvailableSymbol'; import { IAvailableSymbol } from './IAvailableSymbol';
import { type ICategory } from './ICategory'; import { ICategory } from './ICategory';
import { type IPattern } from './IPattern'; import { IPattern } from './IPattern';
/** Model of configuration for the application to configure it */ /** Model of configuration for the application to configure it */
export interface IConfiguration { export interface IConfiguration {

2
src/Interfaces/IContainerModel.ts
View file

@ -1,4 +1,4 @@
import { type IContainerProperties } from './IContainerProperties'; import { IContainerProperties } from './IContainerProperties';
export interface IContainerModel { export interface IContainerModel {
children: string[] children: string[]

12
src/Interfaces/IContainerProperties.ts
View file

@ -1,9 +1,9 @@
import { type PositionReference } from '../Enums/PositionReference'; import { PositionReference } from '../Enums/PositionReference';
import { type IMargin } from './IMargin'; import { IMargin } from './IMargin';
import { type Orientation } from '../Enums/Orientation'; import { Orientation } from '../Enums/Orientation';
import { type IKeyValue } from './IKeyValue'; import { IKeyValue } from './IKeyValue';
import { type IStyle } from './IStyle'; import { IStyle } from './IStyle';
import { type IDimensions } from './IDimensions'; import { IDimensions } from './IDimensions';
/** /**
* Properties of a container * Properties of a container

2
src/Interfaces/IDimensionOptions.ts
View file

@ -1,4 +1,4 @@
import { type Position } from '../Enums/Position'; import { Position } from '../Enums/Position';
export interface IDimensionOptions { export interface IDimensionOptions {

4
src/Interfaces/IDimensions.ts
View file

@ -1,6 +1,6 @@
import { type IDimensionOptions } from './IDimensionOptions'; import { IDimensionOptions } from './IDimensionOptions';
import { type Orientation } from '../Enums/Orientation'; import { Orientation } from '../Enums/Orientation';
export interface IDimensions { export interface IDimensions {

4
src/Interfaces/IEditorState.ts
View file

@ -1,5 +1,5 @@
import { type IConfiguration } from './IConfiguration'; import { IConfiguration } from './IConfiguration';
import { type IHistoryState } from './IHistoryState'; import { IHistoryState } from './IHistoryState';
export interface IEditorState { export interface IEditorState {
history: IHistoryState[] history: IHistoryState[]

2
src/Interfaces/IGetFeedbackRequest.ts
View file

@ -1,5 +1,5 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type IHistoryState } from './IHistoryState'; import { IHistoryState } from './IHistoryState';
export interface IGetFeedbackRequest { export interface IGetFeedbackRequest {
/** Current application state */ /** Current application state */

2
src/Interfaces/IGetFeedbackResponse.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type IMessage } from './IMessage'; import { IMessage } from './IMessage';
export interface IGetFeedbackResponse { export interface IGetFeedbackResponse {
messages: IMessage[] messages: IMessage[]

4
src/Interfaces/IHistoryState.ts
View file

@ -1,5 +1,5 @@
import { type IContainerModel } from './IContainerModel'; import { IContainerModel } from './IContainerModel';
import { type ISymbolModel } from './ISymbolModel'; import { ISymbolModel } from './ISymbolModel';
export interface IHistoryState { export interface IHistoryState {
/** Last editor action */ /** Last editor action */

2
src/Interfaces/IInputGroup.ts
View file

@ -1,4 +1,4 @@
import type React from 'react'; import React from 'react';
export interface IInputGroup { export interface IInputGroup {
key: string key: string

2
src/Interfaces/IMessage.ts
View file

@ -1,4 +1,4 @@
import { type MessageType } from '../Enums/MessageType'; import { MessageType } from '../Enums/MessageType';
export interface IMessage { export interface IMessage {
text: string text: string

2
src/Interfaces/IPattern.ts
View file

@ -1,4 +1,4 @@
import { type IAvailableContainer } from './IAvailableContainer'; import { IAvailableContainer } from './IAvailableContainer';
export interface IPattern { export interface IPattern {
/** /**

6
src/Interfaces/ISetContainerListRequest.ts
View file

@ -1,6 +1,6 @@
import { type IAction } from './IAction'; import { IAction } from './IAction';
import { type IContainerModel } from './IContainerModel'; import { IContainerModel } from './IContainerModel';
import { type IHistoryState } from './IHistoryState'; import { IHistoryState } from './IHistoryState';
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
export interface ISetContainerListRequest { export interface ISetContainerListRequest {

4
src/Interfaces/ISetContainerListResponse.ts
View file

@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type AddMethod } from '../Enums/AddMethod'; import { AddMethod } from '../Enums/AddMethod';
import { type IAvailableContainer } from './IAvailableContainer'; import { IAvailableContainer } from './IAvailableContainer';
export interface ISetContainerListResponse { export interface ISetContainerListResponse {
Containers: IAvailableContainer[] Containers: IAvailableContainer[]

2
src/Interfaces/ISymbolModel.ts
View file

@ -1,4 +1,4 @@
import { type IAvailableSymbol } from './IAvailableSymbol'; import { IAvailableSymbol } from './IAvailableSymbol';
export interface ISymbolModel { export interface ISymbolModel {
/** Identifier */ /** Identifier */

14
src/utils/default.ts
View file

@ -1,11 +1,11 @@
import { PositionReference } from '../Enums/PositionReference'; import { PositionReference } from '../Enums/PositionReference';
import { type IAvailableContainer } from '../Interfaces/IAvailableContainer'; import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol'; import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
import { type IConfiguration } from '../Interfaces/IConfiguration'; import { IConfiguration } from '../Interfaces/IConfiguration';
import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel'; import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel';
import { type IContainerProperties } from '../Interfaces/IContainerProperties'; import { IContainerProperties } from '../Interfaces/IContainerProperties';
import { type IEditorState } from '../Interfaces/IEditorState'; import { IEditorState } from '../Interfaces/IEditorState';
import { type ISymbolModel } from '../Interfaces/ISymbolModel'; import { ISymbolModel } from '../Interfaces/ISymbolModel';
import { Orientation } from '../Enums/Orientation'; import { Orientation } from '../Enums/Orientation';
import { AppState } from '../Enums/AppState'; import { AppState } from '../Enums/AppState';

2
src/utils/itertools.ts
View file

@ -1,4 +1,4 @@
import { type IContainerModel } from '../Interfaces/IContainerModel'; import { IContainerModel } from '../Interfaces/IContainerModel';
export function * MakeChildrenIterator(containers: Map<string, IContainerModel>, childrenIds: string[]): Generator<IContainerModel, void, unknown> { export function * MakeChildrenIterator(containers: Map<string, IContainerModel>, childrenIds: string[]): Generator<IContainerModel, void, unknown> {
for (const childId of childrenIds) { for (const childId of childrenIds) {

8
src/utils/saveload.ts
View file

@ -1,8 +1,8 @@
/* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/naming-convention */
import { type IEditorState } from '../Interfaces/IEditorState'; import { IEditorState } from '../Interfaces/IEditorState';
import { type IHistoryState } from '../Interfaces/IHistoryState'; import { IHistoryState } from '../Interfaces/IHistoryState';
import { type IContainerModel } from '../Interfaces/IContainerModel'; import { IContainerModel } from '../Interfaces/IContainerModel';
import { type ISymbolModel } from '../Interfaces/ISymbolModel'; import { ISymbolModel } from '../Interfaces/ISymbolModel';
/** /**
* Revive the Editor state * Revive the Editor state

4
src/utils/test-utils.tsx
View file

@ -1,6 +1,6 @@
/* eslint-disable import/export */ /* eslint-disable import/export */
import type * as React from 'react'; import * as React from 'react';
import { cleanup, render, type RenderResult } from '@testing-library/react'; import { cleanup, render, RenderResult } from '@testing-library/react';
import { afterEach } from 'vitest'; import { afterEach } from 'vitest';
afterEach(() => { afterEach(() => {