Revert "Run eslint src --fix
"
This commit is contained in:
parent
67678c0f3a
commit
9bbdac088e
82 changed files with 342 additions and 363 deletions
|
@ -2,14 +2,14 @@
|
|||
import { describe, it, expect } from 'vitest';
|
||||
import { AddMethod } from '../../Enums/AddMethod';
|
||||
import { PositionReference } from '../../Enums/PositionReference';
|
||||
import { type IAction } from '../../Interfaces/IAction';
|
||||
import { type IAvailableContainer } from '../../Interfaces/IAvailableContainer';
|
||||
import { type IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
|
||||
import { type ICategory } from '../../Interfaces/ICategory';
|
||||
import { type IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { type IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { type IPattern } from '../../Interfaces/IPattern';
|
||||
import { IAction } from '../../Interfaces/IAction';
|
||||
import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
|
||||
import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
|
||||
import { ICategory } from '../../Interfaces/ICategory';
|
||||
import { IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { IContainerModel, ContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IPattern } from '../../Interfaces/IPattern';
|
||||
import { DEFAULT_MAINCONTAINER_PROPS, GetDefaultContainerProps } from '../../utils/default';
|
||||
import { FetchConfiguration } from './api';
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { type IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { type ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest';
|
||||
import { type ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse';
|
||||
import { IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { ISetContainerListRequest } from '../../Interfaces/ISetContainerListRequest';
|
||||
import { ISetContainerListResponse } from '../../Interfaces/ISetContainerListResponse';
|
||||
import { GetCircularReplacer } from '../../utils/saveload';
|
||||
|
||||
/**
|
||||
|
@ -9,7 +9,8 @@ import { GetCircularReplacer } from '../../utils/saveload';
|
|||
*/
|
||||
export async function FetchConfiguration(): Promise<IConfiguration> {
|
||||
const url = import.meta.env.VITE_API_FETCH_URL;
|
||||
// @ts-expect-error The test library cannot use the Fetch AP
|
||||
// The test library cannot use the Fetch API
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
||||
if (window.fetch) {
|
||||
return await fetch(url, {
|
||||
|
@ -35,7 +36,8 @@ export async function FetchConfiguration(): Promise<IConfiguration> {
|
|||
export async function SetContainerList(request: ISetContainerListRequest, configurationUrl?: string): Promise<ISetContainerListResponse> {
|
||||
const url = configurationUrl ?? import.meta.env.VITE_API_SET_CONTAINER_LIST_URL;
|
||||
const dataParsed = JSON.stringify(request, GetCircularReplacer());
|
||||
// @ts-expect-error The test library cannot use the Fetch API
|
||||
// The test library cannot use the Fetch API
|
||||
// @ts-expect-error
|
||||
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
||||
if (window.fetch) {
|
||||
return await fetch(url, {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { type Dispatch, type SetStateAction } from 'react';
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
import { AppState } from '../../../Enums/AppState';
|
||||
import { type IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { Revive } from '../../../utils/saveload';
|
||||
|
||||
export function LoadState(
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
import { type Dispatch, type SetStateAction } from 'react';
|
||||
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
import { IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { FetchConfiguration } from '../../API/api';
|
||||
import { type IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { LoadState } from './Load';
|
||||
import { DISABLE_API, GetDefaultEditorState } from '../../../utils/default';
|
||||
import { type AppState } from '../../../Enums/AppState';
|
||||
import { AppState } from '../../../Enums/AppState';
|
||||
|
||||
export function NewEditor(
|
||||
editorState: IEditorState,
|
||||
|
|
|
@ -2,7 +2,7 @@ import * as React from 'react';
|
|||
import { beforeEach, describe, it } from 'vitest';
|
||||
import { AppState } from '../../Enums/AppState';
|
||||
import { FAST_BOOT } from '../../utils/default';
|
||||
import { fireEvent, render, type RenderResult } from '../../utils/test-utils';
|
||||
import { fireEvent, render, RenderResult } from '../../utils/test-utils';
|
||||
import { App } from './App';
|
||||
|
||||
describe.concurrent('App', () => {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import React, { type Dispatch, type SetStateAction, useContext, useEffect, useRef, useState } from 'react';
|
||||
import React, { Dispatch, SetStateAction, useContext, useEffect, useRef, useState } from 'react';
|
||||
import { UseCustomEvents } from '../../Events/AppEvents';
|
||||
import { MainMenu } from '../MainMenu/MainMenu';
|
||||
import { ContainerModel, type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { ContainerModel, IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { Editor } from '../Editor/Editor';
|
||||
import { type IEditorState } from '../../Interfaces/IEditorState';
|
||||
import { IEditorState } from '../../Interfaces/IEditorState';
|
||||
import { LoadState } from './Actions/Load';
|
||||
import { LoadEditor, NewEditor } from './Actions/MenuActions';
|
||||
import { DEFAULT_CONFIG, DEFAULT_MAINCONTAINER_PROPS, FAST_BOOT } from '../../utils/default';
|
||||
|
@ -116,17 +116,15 @@ export function App(props: IAppProps): JSX.Element {
|
|||
setAppState(AppState.Loading);
|
||||
NewEditor(
|
||||
editorState,
|
||||
(newEditor) => { setEditorState(newEditor); },
|
||||
() => { setAppState(AppState.Loaded); }
|
||||
(newEditor) => setEditorState(newEditor),
|
||||
() => setAppState(AppState.Loaded)
|
||||
);
|
||||
}}
|
||||
loadEditor={(files: FileList | null) => {
|
||||
LoadEditor(
|
||||
loadEditor={(files: FileList | null) => LoadEditor(
|
||||
files,
|
||||
setEditorState,
|
||||
setAppState
|
||||
);
|
||||
}}
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -37,7 +37,7 @@ export function Bar(props: IBarProps): JSX.Element {
|
|||
<BarIcon
|
||||
isActive={props.isComponentsOpen}
|
||||
title={Text({ textId: '@Components' })}
|
||||
onClick={() => { props.toggleComponents(); }}>
|
||||
onClick={() => props.toggleComponents()}>
|
||||
{
|
||||
props.isComponentsOpen
|
||||
? <CubeIconS className='heroicon' />
|
||||
|
@ -47,7 +47,7 @@ export function Bar(props: IBarProps): JSX.Element {
|
|||
<BarIcon
|
||||
isActive={props.isSymbolsOpen}
|
||||
title={Text({ textId: '@Symbols' })}
|
||||
onClick={() => { props.toggleSymbols(); }}>
|
||||
onClick={() => props.toggleSymbols()}>
|
||||
{
|
||||
props.isSymbolsOpen
|
||||
? <LinkIconS className='heroicon' />
|
||||
|
@ -57,7 +57,7 @@ export function Bar(props: IBarProps): JSX.Element {
|
|||
<BarIcon
|
||||
isActive={props.isMessagesOpen}
|
||||
title={Text({ textId: '@Messages' })}
|
||||
onClick={() => { props.toggleMessages(); }}>
|
||||
onClick={() => props.toggleMessages()}>
|
||||
{
|
||||
props.isMessagesOpen
|
||||
? <EnvolopeIconS className='heroicon' />
|
||||
|
@ -68,7 +68,7 @@ export function Bar(props: IBarProps): JSX.Element {
|
|||
<BarIcon
|
||||
isActive={props.isHistoryOpen}
|
||||
title={Text({ textId: '@Timeline' })}
|
||||
onClick={() => { props.toggleTimeline(); }}>
|
||||
onClick={() => props.toggleTimeline()}>
|
||||
{
|
||||
props.isHistoryOpen
|
||||
? <ClockIconS className='heroicon' />
|
||||
|
@ -78,7 +78,7 @@ export function Bar(props: IBarProps): JSX.Element {
|
|||
<BarIcon
|
||||
isActive={props.isSettingsOpen}
|
||||
title={Text({ textId: '@Settings' })}
|
||||
onClick={() => { props.toggleSettings(); }}>
|
||||
onClick={() => props.toggleSettings()}>
|
||||
{
|
||||
props.isSettingsOpen
|
||||
? <Cog8ToothIconS className='heroicon' />
|
||||
|
|
|
@ -13,7 +13,7 @@ export function BarIcon(props: IBarIconProps): JSX.Element {
|
|||
<button type="button"
|
||||
className={`bar-btn group ${isActiveClasses}`}
|
||||
title={props.title}
|
||||
onClick={() => { props.onClick(); }}
|
||||
onClick={() => props.onClick()}
|
||||
>
|
||||
<span className='sidebar-tooltip group-hover:scale-100'>{props.title}</span>
|
||||
{props.children}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import { type IPoint } from '../../Interfaces/IPoint';
|
||||
import { IPoint } from '../../Interfaces/IPoint';
|
||||
import { BAR_WIDTH } from '../Bar/Bar';
|
||||
|
||||
interface ICanvasProps {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Orientation } from '../../Enums/Orientation';
|
||||
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 { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../utils/svg';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { SHOW_SELECTOR_TEXT } from '../../utils/default';
|
||||
import { GetAbsolutePosition } from '../../utils/itertools';
|
||||
import { RemoveMargin } from '../../utils/svg';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { DIMENSION_MARGIN } from '../../utils/default';
|
||||
|
||||
const IMAGE_CACHE = new Map<string, HTMLImageElement>();
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import React, { useState } from 'react';
|
||||
import { type ICategory } from '../../Interfaces/ICategory';
|
||||
import { ICategory } from '../../Interfaces/ICategory';
|
||||
import { TruncateString } from '../../utils/stringtools';
|
||||
|
||||
interface ICategoryProps {
|
||||
|
@ -27,7 +27,7 @@ export function Category(props: ICategoryProps): JSX.Element {
|
|||
>
|
||||
<div
|
||||
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' : ''}`}>
|
||||
{TruncateString(categoryDisplayedText, 25)}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
|
||||
import * as React from 'react';
|
||||
import { type IAvailableContainer } from '../../Interfaces/IAvailableContainer';
|
||||
import { type ICategory } from '../../Interfaces/ICategory';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IAvailableContainer } from '../../Interfaces/IAvailableContainer';
|
||||
import { ICategory } from '../../Interfaces/ICategory';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { TruncateString } from '../../utils/stringtools';
|
||||
import { Category } from '../Category/Category';
|
||||
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'
|
||||
id={componentOption.Type}
|
||||
title={componentOption.Type}
|
||||
onClick={() => { props.buttonOnClick(componentOption.Type); }}
|
||||
onClick={() => props.buttonOnClick(componentOption.Type)}
|
||||
draggable={true}
|
||||
onDragStart={(event) => { HandleDragStart(event); }}
|
||||
onDragStart={(event) => HandleDragStart(event)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{TruncateString(componentOption.DisplayedText ?? componentOption.Type, 25)}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import {
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
SHOW_CHILDREN_DIMENSIONS,
|
||||
|
@ -46,7 +46,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.displayedText?.toString()}
|
||||
onChange={(value) => { props.onChange('displayedText', value); }}/>
|
||||
onChange={(value) => props.onChange('displayedText', value)}/>
|
||||
<OrientationSelector
|
||||
id='orientation'
|
||||
name='Orientation'
|
||||
|
@ -117,8 +117,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
props.properties.width,
|
||||
props.properties.positionReference
|
||||
).toString()}
|
||||
onChange={(value) => {
|
||||
props.onChange(
|
||||
onChange={(value) => props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
RestoreX(
|
||||
|
@ -128,8 +127,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
);
|
||||
}}/>
|
||||
)}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-y`}
|
||||
labelText={Text({ textId: '@ContainerY' })}
|
||||
|
@ -142,8 +140,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
props.properties.height,
|
||||
props.properties.positionReference
|
||||
).toString()}
|
||||
onChange={(value) => {
|
||||
props.onChange(
|
||||
onChange={(value) => props.onChange(
|
||||
'y',
|
||||
ApplyXMargin(
|
||||
RestoreY(
|
||||
|
@ -153,8 +150,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
),
|
||||
props.properties.margin.top
|
||||
)
|
||||
);
|
||||
}}/>
|
||||
)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -175,7 +171,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minWidth.toString()}
|
||||
onChange={(value) => { props.onChange('minWidth', Number(value)); }}/>
|
||||
onChange={(value) => props.onChange('minWidth', Number(value))}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-width`}
|
||||
labelText={Text({ textId: '@ContainerWidth' })}
|
||||
|
@ -186,7 +182,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
min={props.properties.minWidth}
|
||||
max={props.properties.maxWidth}
|
||||
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}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-maxWidth`}
|
||||
|
@ -197,7 +193,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
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>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-minHeight`}
|
||||
|
@ -208,7 +204,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.minHeight.toString()}
|
||||
onChange={(value) => { props.onChange('minHeight', Number(value)); }}/>
|
||||
onChange={(value) => props.onChange('minHeight', Number(value))}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-height`}
|
||||
labelText={Text({ textId: '@ContainerHeight' })}
|
||||
|
@ -219,7 +215,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
min={props.properties.minHeight}
|
||||
max={props.properties.maxHeight}
|
||||
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}
|
||||
/>
|
||||
<TextInputGroup
|
||||
|
@ -231,7 +227,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={1}
|
||||
value={props.properties.maxHeight.toString()}
|
||||
onChange={(value) => { props.onChange('maxHeight', Number(value)); }}/>
|
||||
onChange={(value) => props.onChange('maxHeight', Number(value))}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -251,7 +247,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mb`}
|
||||
labelText={Text({ textId: '@ContainerMarginBottom' })}
|
||||
|
@ -261,7 +257,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mt`}
|
||||
labelText={Text({ textId: '@ContainerMarginTop' })}
|
||||
|
@ -271,7 +267,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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
|
||||
id={`${props.properties.id}-mr`}
|
||||
labelText={Text({ textId: '@ContainerMarginRight' })}
|
||||
|
@ -281,7 +277,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
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>
|
||||
</Category>
|
||||
|
||||
|
@ -299,7 +295,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='ml-auto mr-auto block'
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.isFlex}
|
||||
onChange={(event) => { props.onChange('isFlex', event.target.checked); }}
|
||||
onChange={(event) => props.onChange('isFlex', event.target.checked)}
|
||||
/>
|
||||
<ToggleButton
|
||||
labelText={Text({ textId: '@ContainerAnchor' })}
|
||||
|
@ -308,7 +304,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='ml-auto mr-auto block'
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.isAnchor}
|
||||
onChange={(event) => { props.onChange('isAnchor', event.target.checked); }}/>
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -338,7 +334,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
value: symbol.id
|
||||
}))}
|
||||
value={props.properties.linkedSymbolId ?? ''}
|
||||
onChange={(event) => { props.onChange('linkedSymbolId', event.target.value); }}/>
|
||||
onChange={(event) => props.onChange('linkedSymbolId', event.target.value)}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
@ -358,7 +354,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
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
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
|
@ -367,7 +363,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='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>
|
||||
}
|
||||
{
|
||||
|
@ -379,7 +375,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowSelfMarginsDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
|
||||
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
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
|
@ -388,7 +384,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='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>
|
||||
}
|
||||
{
|
||||
|
@ -400,7 +396,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
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
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
|
@ -409,7 +405,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='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>
|
||||
}
|
||||
{
|
||||
|
@ -421,7 +417,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionOptions); }}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
|
@ -431,7 +427,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
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
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
|
@ -440,7 +436,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='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>
|
||||
</>
|
||||
}
|
||||
|
@ -463,7 +459,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.stroke ?? 'black'}
|
||||
onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }}
|
||||
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
|
@ -476,7 +472,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
max={1}
|
||||
step={0.01}
|
||||
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
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
|
@ -486,7 +482,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
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
|
||||
id={`${props.properties.id}-fill`}
|
||||
|
@ -496,7 +492,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.fill ?? 'black'}
|
||||
onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }}
|
||||
onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
|
@ -509,7 +505,7 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
max={1}
|
||||
step={0.01}
|
||||
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>
|
||||
</Category>
|
||||
|
|
|
@ -2,7 +2,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
|
|||
import * as React from 'react';
|
||||
import { expect, describe, it, vi } from 'vitest';
|
||||
import { PositionReference } from '../../Enums/PositionReference';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { Orientation } from '../../Enums/Orientation';
|
||||
import { ContainerProperties } from './ContainerProperties';
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ContainerForm } from './ContainerForm';
|
||||
|
||||
interface IPropertiesProps {
|
||||
|
|
|
@ -3,12 +3,12 @@
|
|||
*/
|
||||
|
||||
import { AddMethod } from '../../../Enums/AddMethod';
|
||||
import { type IAvailableContainer } from '../../../Interfaces/IAvailableContainer';
|
||||
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { type IPattern, GetPattern, type ContainerOrPattern } from '../../../Interfaces/IPattern';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { IAvailableContainer } from '../../../Interfaces/IAvailableContainer';
|
||||
import { IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { IPattern, GetPattern, ContainerOrPattern } from '../../../Interfaces/IPattern';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { GetDefaultContainerProps } from '../../../utils/default';
|
||||
import { FindContainerById } from '../../../utils/itertools';
|
||||
|
@ -308,8 +308,8 @@ function InitializeChildrenWithPattern(
|
|||
return;
|
||||
}
|
||||
|
||||
const configs = new Map<string, IAvailableContainer>(configuration.AvailableContainers.map(config => [config.Type, config]));
|
||||
const patterns = new Map<string, IPattern>(configuration.Patterns.map(pattern => [pattern.id, pattern]));
|
||||
const configs: Map<string, IAvailableContainer> = new Map(configuration.AvailableContainers.map(config => [config.Type, config]));
|
||||
const patterns: Map<string, IPattern> = new Map(configuration.Patterns.map(pattern => [pattern.id, pattern]));
|
||||
const containerOrPattern = GetPattern(patternId, configs, patterns);
|
||||
|
||||
if (containerOrPattern === undefined) {
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { FindContainerById, MakeDFSIterator } from '../../../utils/itertools';
|
||||
import { GetCurrentHistory } from '../Editor';
|
||||
import { ApplyBehaviors, ApplyBehaviorsOnSiblings, ApplyBehaviorsOnSiblingsChildren } from '../Behaviors/Behaviors';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import Swal from 'sweetalert2';
|
||||
import { PropertyType } from '../../../Enums/PropertyType';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
|
|
|
@ -1,16 +1,16 @@
|
|||
import Swal from 'sweetalert2';
|
||||
import { type Dispatch, type SetStateAction } from 'react';
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
import { AddMethod } from '../../../Enums/AddMethod';
|
||||
import { type IAction } from '../../../Interfaces/IAction';
|
||||
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { type ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
|
||||
import { type ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
|
||||
import { IAction } from '../../../Interfaces/IAction';
|
||||
import { IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { ISetContainerListRequest } from '../../../Interfaces/ISetContainerListRequest';
|
||||
import { ISetContainerListResponse } from '../../../Interfaces/ISetContainerListResponse';
|
||||
import { DISABLE_API } from '../../../utils/default';
|
||||
import { FindContainerById } from '../../../utils/itertools';
|
||||
import { SetContainerList } from '../../API/api';
|
||||
import { type IMenuAction } from '../../Menu/Menu';
|
||||
import { IMenuAction } from '../../Menu/Menu';
|
||||
import { GetCurrentHistoryState } from '../Editor';
|
||||
import { AddContainers } from './AddContainer';
|
||||
import { DeleteContainer } from './ContainerOperations';
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { GetCircularReplacer } from '../../../utils/saveload';
|
||||
import { ID } from '../../SVG/SVG';
|
||||
import { type IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { IEditorState } from '../../../Interfaces/IEditorState';
|
||||
import { SHOW_SELECTOR_TEXT } from '../../../utils/default';
|
||||
|
||||
export function SaveEditorAsJSON(
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { type Dispatch, type SetStateAction } from 'react';
|
||||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { Dispatch, SetStateAction } from 'react';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { ENABLE_SHORTCUTS } from '../../../utils/default';
|
||||
|
||||
export function OnKey(
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { type IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { IConfiguration } from '../../../Interfaces/IConfiguration';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../../Interfaces/IHistoryState';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { GetDefaultSymbolModel } from '../../../utils/default';
|
||||
import { FindContainerById } from '../../../utils/itertools';
|
||||
import { RestoreX } from '../../../utils/svg';
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
* 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 { ConstraintBodyInsideUnallocatedWidth } from './RigidBodyBehaviors';
|
||||
import { FindContainerById } from '../../../utils/itertools';
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { APPLY_BEHAVIORS_ON_CHILDREN, ENABLE_RIGID, ENABLE_SWAP } from '../../../utils/default';
|
||||
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';
|
||||
import { ApplyAnchor, GetOverlappingContainers } from './AnchorBehaviors';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Simplex } from '../../../utils/simplex';
|
||||
import { ApplyWidthMargin, ApplyXMargin } from '../../../utils/svg';
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { MakeChildrenIterator, ReversePairwise } from '../../../utils/itertools';
|
||||
import { Flex } from './FlexBehaviors';
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
* If the contraints fails, an error message will be returned
|
||||
*/
|
||||
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type ISizePointer } from '../../../Interfaces/ISizePointer';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { ISizePointer } from '../../../Interfaces/ISizePointer';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { ENABLE_HARD_RIGID } from '../../../utils/default';
|
||||
import { FindContainerById, MakeChildrenIterator } from '../../../utils/itertools';
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
* 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 { GetHorizontallyOverlappingContainers, GetVerticallyOverlappingContainers } from './AnchorBehaviors';
|
||||
import { MakeChildrenIterator } from '../../../utils/itertools';
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { ApplyParentTransform, FindContainerById } from '../../../utils/itertools';
|
||||
import { RestoreX, TransformX } from '../../../utils/svg';
|
||||
|
||||
|
|
|
@ -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 { type IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IConfiguration } from '../../Interfaces/IConfiguration';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { UI } from '../UI/UI';
|
||||
import { SelectContainer, DeleteContainer, OnPropertyChange } from './Actions/ContainerOperations';
|
||||
import { SaveEditorAsJSON, SaveEditorAsSVG } from './Actions/Save';
|
||||
|
@ -29,7 +29,7 @@ function UseShortcuts(
|
|||
): void {
|
||||
useEffect(() => {
|
||||
function OnKeyUp(event: KeyboardEvent): void {
|
||||
OnKey(
|
||||
return OnKey(
|
||||
event,
|
||||
history,
|
||||
historyCurrentStep,
|
||||
|
@ -120,31 +120,25 @@ export function Editor(props: IEditorProps): JSX.Element {
|
|||
history,
|
||||
historyCurrentStep
|
||||
}}
|
||||
selectContainer={(container) => {
|
||||
setNewHistory(
|
||||
selectContainer={(container) => setNewHistory(
|
||||
SelectContainer(
|
||||
container,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
deleteContainer={(containerId: string) => {
|
||||
setNewHistory(
|
||||
))}
|
||||
deleteContainer={(containerId: string) => setNewHistory(
|
||||
DeleteContainer(
|
||||
containerId,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
onPropertyChange={(key, value, type) => {
|
||||
setNewHistory(
|
||||
))}
|
||||
onPropertyChange={(key, value, type) => setNewHistory(
|
||||
OnPropertyChange(
|
||||
key, value, type,
|
||||
selected,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
))}
|
||||
addContainer={(type) => {
|
||||
if (selected === null || selected === undefined) {
|
||||
return;
|
||||
|
@ -158,8 +152,7 @@ export function Editor(props: IEditorProps): JSX.Element {
|
|||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
addContainerAt={(index, type, parent) => {
|
||||
setNewHistory(
|
||||
addContainerAt={(index, type, parent) => setNewHistory(
|
||||
AddContainer(
|
||||
index,
|
||||
type,
|
||||
|
@ -168,50 +161,39 @@ export function Editor(props: IEditorProps): JSX.Element {
|
|||
history,
|
||||
historyCurrentStep
|
||||
)
|
||||
);
|
||||
}}
|
||||
addSymbol={(type) => {
|
||||
setNewHistory(
|
||||
)}
|
||||
addSymbol={(type) => setNewHistory(
|
||||
AddSymbol(
|
||||
type,
|
||||
configuration,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
onSymbolPropertyChange={(key, value) => {
|
||||
setNewHistory(
|
||||
))}
|
||||
onSymbolPropertyChange={(key, value) => setNewHistory(
|
||||
OnSymbolPropertyChange(
|
||||
key, value,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
selectSymbol={(symbolId) => {
|
||||
setNewHistory(
|
||||
))}
|
||||
selectSymbol={(symbolId) => setNewHistory(
|
||||
SelectSymbol(
|
||||
symbolId,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
deleteSymbol={(symbolId) => {
|
||||
setNewHistory(
|
||||
))}
|
||||
deleteSymbol={(symbolId) => setNewHistory(
|
||||
DeleteSymbol(
|
||||
symbolId,
|
||||
history,
|
||||
historyCurrentStep
|
||||
));
|
||||
}}
|
||||
saveEditorAsJSON={() => {
|
||||
SaveEditorAsJSON(
|
||||
))}
|
||||
saveEditorAsJSON={() => SaveEditorAsJSON(
|
||||
history,
|
||||
historyCurrentStep,
|
||||
configuration
|
||||
);
|
||||
}}
|
||||
saveEditorAsSVG={() => { SaveEditorAsSVG(); }}
|
||||
loadState={(move) => { setHistoryCurrentStep(move); }}
|
||||
)}
|
||||
saveEditorAsSVG={() => SaveEditorAsSVG()}
|
||||
loadState={(move) => setHistoryCurrentStep(move)}
|
||||
/>
|
||||
<Menu
|
||||
getListener={() => editorRef.current}
|
||||
|
|
|
@ -4,10 +4,10 @@ import useSize from '@react-hook/size';
|
|||
import { FixedSizeList as List } from 'react-window';
|
||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
import { ContainerProperties } from '../ContainerProperties/ContainerProperties';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
|
||||
import { Text } from '../Text/Text';
|
||||
|
||||
|
@ -229,10 +229,10 @@ function ElementsListRow(
|
|||
key={key}
|
||||
style={style}
|
||||
title={container.properties.warning}
|
||||
onClick={() => { selectContainer(container.properties.id); }}
|
||||
onDrop={(event) => { HandleOnDrop(event, containers, mainContainer, addContainer); }}
|
||||
onDragOver={(event) => { HandleDragOver(event, mainContainer); }}
|
||||
onDragLeave={(event) => { HandleDragLeave(event); }}
|
||||
onClick={() => selectContainer(container.properties.id)}
|
||||
onDrop={(event) => HandleOnDrop(event, containers, mainContainer, addContainer)}
|
||||
onDragOver={(event) => HandleDragOver(event, mainContainer)}
|
||||
onDragLeave={(event) => HandleDragLeave(event)}
|
||||
>
|
||||
{verticalBars}
|
||||
{text}
|
||||
|
|
|
@ -26,7 +26,7 @@ export function FloatingButton(props: IFloatingButtonProps): JSX.Element {
|
|||
<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'}
|
||||
title='Open menu'
|
||||
onClick={() => { ToggleState(isHidden, setHidden); }}
|
||||
onClick={() => ToggleState(isHidden, setHidden)}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { CameraIcon, ArrowUpOnSquareIcon } from '@heroicons/react/24/outline';
|
||||
import { FloatingButton } from './FloatingButton';
|
||||
import { type IUIProps } from '../UI/UI';
|
||||
import { IUIProps } from '../UI/UI';
|
||||
|
||||
export function MenuButton(props: IUIProps): JSX.Element {
|
||||
return <FloatingButton className={'fixed z-10 flex flex-col gap-2 items-center bottom-12 right-12'}>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
|
||||
|
||||
interface IHistoryProps {
|
||||
|
@ -23,7 +23,7 @@ export function History(props: IHistoryProps): JSX.Element {
|
|||
<button type="button"
|
||||
key={reversedIndex}
|
||||
style={style}
|
||||
onClick={() => { props.jumpTo(reversedIndex); }}
|
||||
onClick={() => props.jumpTo(reversedIndex)}
|
||||
title={step.lastAction}
|
||||
className={`w-full elements-sidebar-row border-blue-500 whitespace-pre overflow-hidden
|
||||
text-left text-sm font-medium transition-all ${selectedClass}`}
|
||||
|
|
|
@ -53,7 +53,7 @@ export function TextInputGroup(props: ITextInputGroupProps): JSX.Element {
|
|||
className={`${className} ${props.inputClassName} ${warningClass}`}
|
||||
type={props.type}
|
||||
value={value}
|
||||
onChange={(event) => { setValue(event.target.value); }}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
onKeyUp={OnKeyUp}
|
||||
min={props.min}
|
||||
max={props.max}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import * as React 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 { DEFAULT_LANGUAGE } from '../../utils/default';
|
||||
|
||||
|
|
|
@ -45,7 +45,7 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
|
|||
</label>
|
||||
</form>
|
||||
<button type="button"
|
||||
onClick={() => { setWindowState(WindowState.Main); }}
|
||||
onClick={() => setWindowState(WindowState.Main)}
|
||||
className='normal-btn block
|
||||
mt-8 '
|
||||
>
|
||||
|
@ -70,7 +70,7 @@ export function MainMenu(props: IMainMenuProps): JSX.Element {
|
|||
<button
|
||||
type="button"
|
||||
className='mainmenu-btn'
|
||||
onClick={() => { setWindowState(WindowState.Load); }}
|
||||
onClick={() => setWindowState(WindowState.Load)}
|
||||
>
|
||||
{Text({ textId: '@LoadConfigFile' })}
|
||||
</button>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import useSize from '@react-hook/size';
|
||||
import * as React from 'react';
|
||||
import { type IPoint } from '../../Interfaces/IPoint';
|
||||
import { IPoint } from '../../Interfaces/IPoint';
|
||||
import { MenuItem } from './MenuItem';
|
||||
|
||||
interface IMenuProps {
|
||||
|
@ -136,7 +136,7 @@ function AddClassSpecificActions(
|
|||
text={action.text}
|
||||
title={action.title}
|
||||
shortcut={action.shortcut}
|
||||
onClick={() => { action.action(target); }} />);
|
||||
onClick={() => action.action(target)} />);
|
||||
});
|
||||
children.push(<hr key={`contextmenu-hr-${count}`} className='border-slate-400' />);
|
||||
};
|
||||
|
@ -155,7 +155,7 @@ function AddUniversalActions(props: IMenuProps, children: JSX.Element[], count:
|
|||
text={action.text}
|
||||
title={action.title}
|
||||
shortcut={action.shortcut}
|
||||
onClick={() => { action.action(target); }} />);
|
||||
onClick={() => action.action(target)} />);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@ export function MenuItem(props: IMenuItemProps): JSX.Element {
|
|||
<button type="button"
|
||||
className={`flex place-content-between ${props.className ?? ''}`}
|
||||
title={props.title}
|
||||
onClick={() => { props.onClick(); }}>
|
||||
onClick={() => props.onClick()}>
|
||||
{props.text}
|
||||
<span dangerouslySetInnerHTML={{ __html: props.shortcut ?? '' }} />
|
||||
</button>
|
||||
|
|
|
@ -2,8 +2,8 @@ import { TrashIcon } from '@heroicons/react/24/outline';
|
|||
import * as React from 'react';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { MessageType } from '../../Enums/MessageType';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { type IMessage } from '../../Interfaces/IMessage';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IMessage } from '../../Interfaces/IMessage';
|
||||
import { TITLE_BAR_HEIGHT } from '../Sidebar/Sidebar';
|
||||
import { Text } from '../Text/Text';
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { type IInputGroup } from '../../Interfaces/IInputGroup';
|
||||
import { IInputGroup } from '../../Interfaces/IInputGroup';
|
||||
|
||||
interface IRadioGroupButtonsProps {
|
||||
name: string
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { Interweave, type Node } from 'interweave';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { type IContainerProperties } from '../../../Interfaces/IContainerProperties';
|
||||
import { Interweave, Node } from 'interweave';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IContainerProperties } from '../../../Interfaces/IContainerProperties';
|
||||
import { Camelize } from '../../../utils/stringtools';
|
||||
import { SHOW_TEXT } from '../../../utils/default';
|
||||
import { FindContainerById } from '../../../utils/itertools';
|
||||
|
@ -67,7 +67,7 @@ export function Container(props: IContainerProps): JSX.Element {
|
|||
width={width}
|
||||
height={height}
|
||||
style={style}
|
||||
onClick={() => { props.selectContainer(props.model.properties.id); }}
|
||||
onClick={() => props.selectContainer(props.model.properties.id)}
|
||||
>
|
||||
</rect>);
|
||||
|
||||
|
@ -108,7 +108,7 @@ function CreateReactCustomSVG(customSVG: string, properties: IContainerPropertie
|
|||
function Transform(node: HTMLElement, children: Node[], properties: IContainerProperties): React.ReactNode {
|
||||
const supportedTags = ['line', 'path', 'rect'];
|
||||
if (supportedTags.includes(node.tagName.toLowerCase())) {
|
||||
const attributes: Record<string, string | object | null> = {};
|
||||
const attributes: { [att: string]: string | object | null } = {};
|
||||
node.getAttributeNames().forEach(attName => {
|
||||
const attributeValue = node.getAttribute(attName);
|
||||
if (attributeValue === null) {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN } from '../../../utils/default';
|
||||
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
|
||||
import { TransformX } from '../../../utils/svg';
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Position } from '../../../Enums/Position';
|
||||
import { type IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import {
|
||||
DIMENSION_MARGIN,
|
||||
SHOW_BORROWER_DIMENSIONS,
|
||||
|
@ -12,7 +12,7 @@ import {
|
|||
import { FindContainerById, MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
import { TransformX, TransformY } from '../../../utils/svg';
|
||||
import { Dimension } from './Dimension';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
|
||||
interface IDimensionLayerProps {
|
||||
containers: Map<string, IContainerModel>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import './Selector.scss';
|
||||
import * as React from 'react';
|
||||
import { type IContainerModel } from '../../../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../../../Interfaces/IContainerModel';
|
||||
import { SHOW_SELECTOR_TEXT } from '../../../../utils/default';
|
||||
import { GetAbsolutePosition } from '../../../../utils/itertools';
|
||||
import { RemoveMargin } from '../../../../utils/svg';
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { Interweave } from 'interweave';
|
||||
import * as React from 'react';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { DIMENSION_MARGIN, SYMBOL_MARGIN } from '../../../utils/default';
|
||||
|
||||
interface ISymbolProps {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { type ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../../Interfaces/ISymbolModel';
|
||||
import { Symbol } from './Symbol';
|
||||
|
||||
interface ISymbolLayerProps {
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
import * as React from 'react';
|
||||
import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom';
|
||||
import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
|
||||
import { Container } from './Elements/Container';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { Selector } from './Elements/Selector/Selector';
|
||||
import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
|
||||
import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
|
||||
import { SymbolLayer } from './Elements/SymbolLayer';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { DimensionLayer } from './Elements/DimensionLayer';
|
||||
|
||||
interface ISVGProps {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { type IInputGroup } from '../../Interfaces/IInputGroup';
|
||||
import { IInputGroup } from '../../Interfaces/IInputGroup';
|
||||
|
||||
interface ISelectProps {
|
||||
labelKey?: string
|
||||
|
|
|
@ -13,7 +13,7 @@ export function ToggleSideBar({ title, checked, onChange }: IToggleSidebarProps)
|
|||
<button
|
||||
className={'w-full py-2'}
|
||||
type='button'
|
||||
onClick={() => { onChange(!checked); }}
|
||||
onClick={() => onChange(!checked)}
|
||||
>
|
||||
<p className='text-vertical'>{title}
|
||||
</p>
|
||||
|
|
|
@ -1,9 +1,10 @@
|
|||
import * as React from 'react';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { RestoreX, TransformX } from '../../utils/svg';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
import { Text } from '../Text/Text';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { ToggleButton } from '../ToggleButton/ToggleButton';
|
||||
|
||||
interface ISymbolFormProps {
|
||||
|
@ -31,7 +32,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={props.symbol.displayedText}
|
||||
onChange={(value) => { props.onChange('displayedText', value); }} />
|
||||
onChange={(value) => props.onChange('displayedText', value)} />
|
||||
<TextInputGroup
|
||||
id='x'
|
||||
labelText={Text({ textId: '@SymbolX' })}
|
||||
|
@ -40,7 +41,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
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
|
||||
id='height'
|
||||
labelText={Text({ textId: '@SymbolHeight' })}
|
||||
|
@ -50,7 +51,7 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={props.symbol.height.toString()}
|
||||
onChange={(value) => { props.onChange('height', Number(value)); }} />
|
||||
onChange={(value) => props.onChange('height', Number(value))} />
|
||||
<TextInputGroup
|
||||
id='width'
|
||||
labelText={Text({ textId: '@SymbolWidth' })}
|
||||
|
@ -60,14 +61,14 @@ export function SymbolForm(props: ISymbolFormProps): JSX.Element {
|
|||
type='number'
|
||||
min={0}
|
||||
value={props.symbol.width.toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value)); }} />
|
||||
onChange={(value) => props.onChange('width', Number(value))} />
|
||||
<ToggleButton
|
||||
labelText={Text({ textId: '@ShowDimension' })}
|
||||
inputKey='showDimension'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
checked={props.symbol.showDimension}
|
||||
onChange={(e) => { props.onChange('showDimension', e.target.checked); }}/>
|
||||
onChange={(e) => props.onChange('showDimension', e.target.checked)}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { SymbolForm } from './SymbolForm';
|
||||
|
||||
interface ISymbolPropertiesProps {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from 'react';
|
||||
import { type IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
|
||||
import { IAvailableSymbol } from '../../Interfaces/IAvailableSymbol';
|
||||
import { TruncateString } from '../../utils/stringtools';
|
||||
|
||||
interface ISymbolsProps {
|
||||
|
@ -20,9 +20,9 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
|
|||
key={componentOption.Name}
|
||||
id={componentOption.Name}
|
||||
title={componentOption.Name}
|
||||
onClick={() => { props.buttonOnClick(componentOption.Name); }}
|
||||
onClick={() => props.buttonOnClick(componentOption.Name)}
|
||||
draggable={true}
|
||||
onDragStart={(event) => { HandleDragStart(event); }}
|
||||
onDragStart={(event) => HandleDragStart(event)}
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
|
@ -41,9 +41,9 @@ export function Symbols(props: ISymbolsProps): JSX.Element {
|
|||
key={componentOption.Name}
|
||||
id={componentOption.Name}
|
||||
title={componentOption.Name}
|
||||
onClick={() => { props.buttonOnClick(componentOption.Name); }}
|
||||
onClick={() => props.buttonOnClick(componentOption.Name)}
|
||||
draggable={true}
|
||||
onDragStart={(event) => { HandleDragStart(event); }}
|
||||
onDragStart={(event) => HandleDragStart(event)}
|
||||
>
|
||||
|
||||
{TruncateString(componentOption.Name, 5)}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import useSize from '@react-hook/size';
|
||||
import { FixedSizeList as List } from 'react-window';
|
||||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { SymbolProperties } from '../SymbolProperties/SymbolProperties';
|
||||
import { ToggleSideBar } from '../Sidebar/ToggleSideBar/ToggleSideBar';
|
||||
import { Text } from '../Text/Text';
|
||||
|
@ -39,7 +39,7 @@ export function SymbolsSidebar(props: ISymbolsSidebarProps): JSX.Element {
|
|||
id={key}
|
||||
key={key}
|
||||
style={style}
|
||||
onClick={() => { props.selectSymbol(key); }}
|
||||
onClick={() => props.selectSymbol(key)}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
|
|
|
@ -4,17 +4,17 @@ import { History } from '../History/History';
|
|||
import { Bar, BAR_WIDTH } from '../Bar/Bar';
|
||||
import { Symbols } from '../Symbols/Symbols';
|
||||
import { SymbolsSidebar } from '../SymbolsList/SymbolsSidebar';
|
||||
import { type PropertyType } from '../../Enums/PropertyType';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { Messages } from '../Messages/Messages';
|
||||
import { Sidebar } from '../Sidebar/Sidebar';
|
||||
import { Components } from '../Components/Components';
|
||||
import { Viewer } from '../Viewer/Viewer';
|
||||
import { Settings } from '../Settings/Settings';
|
||||
import { type IMessage } from '../../Interfaces/IMessage';
|
||||
import { IMessage } from '../../Interfaces/IMessage';
|
||||
import { DISABLE_API } from '../../utils/default';
|
||||
import { UseWorker, UseAsync } from './UseWorker';
|
||||
import { FindContainerById } from '../../utils/itertools';
|
||||
import { type IEditorState } from '../../Interfaces/IEditorState';
|
||||
import { IEditorState } from '../../Interfaces/IEditorState';
|
||||
import { GetCurrentHistoryState } from '../Editor/Editor';
|
||||
import { Text } from '../Text/Text';
|
||||
|
||||
|
@ -116,7 +116,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.ComponentsExpanded); } }
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.ComponentsExpanded) }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.ComponentsExpanded:
|
||||
|
@ -137,7 +137,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
selectContainer={methods.selectContainer}
|
||||
addContainer={methods.addContainerAt}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.Components); } }
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.Components) }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.Symbols:
|
||||
|
@ -153,7 +153,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={false}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.SymbolsExpanded); } }
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.SymbolsExpanded) }
|
||||
/>;
|
||||
break;
|
||||
case SidebarType.SymbolsExpanded:
|
||||
|
@ -169,7 +169,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
onPropertyChange={methods.onSymbolPropertyChange}
|
||||
selectSymbol={methods.selectSymbol}
|
||||
isExpanded ={true}
|
||||
onExpandChange={() => { setOrToggleSidebar(SidebarType.Symbols); }}
|
||||
onExpandChange={() => setOrToggleSidebar(SidebarType.Symbols)}
|
||||
/>;
|
||||
break;
|
||||
|
||||
|
@ -187,7 +187,7 @@ export function UI({ editorState, ...methods }: IUIProps): JSX.Element {
|
|||
leftChildren = <Messages
|
||||
historyState={current}
|
||||
messages={messages}
|
||||
clearMessage={() => { setMessages([]); }}
|
||||
clearMessage={() => setMessages([])}
|
||||
/>;
|
||||
break;
|
||||
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import * as React from 'react';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { type IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
|
||||
import { type IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
|
||||
import { type IMessage } from '../../Interfaces/IMessage';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IGetFeedbackRequest } from '../../Interfaces/IGetFeedbackRequest';
|
||||
import { IGetFeedbackResponse } from '../../Interfaces/IGetFeedbackResponse';
|
||||
import { IMessage } from '../../Interfaces/IMessage';
|
||||
import { GetCircularReplacer } from '../../utils/saveload';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { type IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { type IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { type IPoint } from '../../Interfaces/IPoint';
|
||||
import { IContainerModel } from '../../Interfaces/IContainerModel';
|
||||
import { IHistoryState } from '../../Interfaces/IHistoryState';
|
||||
import { IPoint } from '../../Interfaces/IPoint';
|
||||
import { DIMENSION_MARGIN, USE_EXPERIMENTAL_CANVAS_API } from '../../utils/default';
|
||||
import { FindContainerById, MakeRecursionDFSIterator } from '../../utils/itertools';
|
||||
import { BAR_WIDTH } from '../Bar/Bar';
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { useEffect } from 'react';
|
||||
import { AppState } from '../Enums/AppState';
|
||||
import { type IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { type IEditorState } from '../Interfaces/IEditorState';
|
||||
import { type IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { type ILanguage } from '../Interfaces/ILanguage';
|
||||
import { IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { IEditorState } from '../Interfaces/IEditorState';
|
||||
import { IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { ILanguage } from '../Interfaces/ILanguage';
|
||||
import { languageOptions, translations } from '../Translations/Translations';
|
||||
import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default';
|
||||
import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
|
||||
|
@ -49,7 +49,7 @@ export function UseCustomEvents(
|
|||
const funcs = new Map<string, () => void>();
|
||||
for (const event of events) {
|
||||
function Func(eventInitDict?: CustomEventInit): void {
|
||||
event.func({
|
||||
return event.func({
|
||||
root,
|
||||
languageContext,
|
||||
setEditor,
|
||||
|
|
|
@ -3,9 +3,9 @@ import { AddContainer as AddContainerAction, AddContainerToSelectedContainer as
|
|||
import { DeleteContainer as DeleteContainerAction, SelectContainer as SelectContainerAction } from '../Components/Editor/Actions/ContainerOperations';
|
||||
import { AddSymbol as AddSymbolAction, DeleteSymbol as DeleteSymbolAction, SelectSymbol as SelectSymbolAction } from '../Components/Editor/Actions/SymbolOperations';
|
||||
import { GetCurrentHistory } from '../Components/Editor/Editor';
|
||||
import { type IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { type IEditorState } from '../Interfaces/IEditorState';
|
||||
import { type IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { IEditorState } from '../Interfaces/IEditorState';
|
||||
import { IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { FindContainerById } from '../utils/itertools';
|
||||
import { GetCircularReplacer } from '../utils/saveload';
|
||||
|
||||
|
@ -61,7 +61,7 @@ export function UseCustomEvents(
|
|||
|
||||
for (const event of events) {
|
||||
function Func(eventInitDict?: CustomEventInit): void {
|
||||
event.func({
|
||||
return event.func({
|
||||
root,
|
||||
editorState,
|
||||
setNewHistory,
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type AddMethod } from '../Enums/AddMethod';
|
||||
import { type IImage } from './IImage';
|
||||
import { AddMethod } from '../Enums/AddMethod';
|
||||
import { IImage } from './IImage';
|
||||
|
||||
export interface IAction {
|
||||
Id: string
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type AddMethod } from '../Enums/AddMethod';
|
||||
import { type PositionReference } from '../Enums/PositionReference';
|
||||
import { type IAction } from './IAction';
|
||||
import { type IMargin } from './IMargin';
|
||||
import { type Orientation } from '../Enums/Orientation';
|
||||
import { type IKeyValue } from './IKeyValue';
|
||||
import { type IStyle } from './IStyle';
|
||||
import { type IDimensions } from './IDimensions';
|
||||
import { AddMethod } from '../Enums/AddMethod';
|
||||
import { PositionReference } from '../Enums/PositionReference';
|
||||
import { IAction } from './IAction';
|
||||
import { IMargin } from './IMargin';
|
||||
import { Orientation } from '../Enums/Orientation';
|
||||
import { IKeyValue } from './IKeyValue';
|
||||
import { IStyle } from './IStyle';
|
||||
import { IDimensions } from './IDimensions';
|
||||
|
||||
/** Model of available container used in application configuration */
|
||||
export interface IAvailableContainer {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type PositionReference } from '../Enums/PositionReference';
|
||||
import { type IAvailableContainer } from './IAvailableContainer';
|
||||
import { type IImage } from './IImage';
|
||||
import { PositionReference } from '../Enums/PositionReference';
|
||||
import { IAvailableContainer } from './IAvailableContainer';
|
||||
import { IImage } from './IImage';
|
||||
|
||||
/**
|
||||
* Model of available symbol to configure the application */
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type IAPIConfiguration } from './IAPIConfiguration';
|
||||
import { type IAvailableContainer } from './IAvailableContainer';
|
||||
import { type IAvailableSymbol } from './IAvailableSymbol';
|
||||
import { type ICategory } from './ICategory';
|
||||
import { type IPattern } from './IPattern';
|
||||
import { IAPIConfiguration } from './IAPIConfiguration';
|
||||
import { IAvailableContainer } from './IAvailableContainer';
|
||||
import { IAvailableSymbol } from './IAvailableSymbol';
|
||||
import { ICategory } from './ICategory';
|
||||
import { IPattern } from './IPattern';
|
||||
|
||||
/** Model of configuration for the application to configure it */
|
||||
export interface IConfiguration {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IContainerProperties } from './IContainerProperties';
|
||||
import { IContainerProperties } from './IContainerProperties';
|
||||
|
||||
export interface IContainerModel {
|
||||
children: string[]
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
import { type PositionReference } from '../Enums/PositionReference';
|
||||
import { type IMargin } from './IMargin';
|
||||
import { type Orientation } from '../Enums/Orientation';
|
||||
import { type IKeyValue } from './IKeyValue';
|
||||
import { type IStyle } from './IStyle';
|
||||
import { type IDimensions } from './IDimensions';
|
||||
import { PositionReference } from '../Enums/PositionReference';
|
||||
import { IMargin } from './IMargin';
|
||||
import { Orientation } from '../Enums/Orientation';
|
||||
import { IKeyValue } from './IKeyValue';
|
||||
import { IStyle } from './IStyle';
|
||||
import { IDimensions } from './IDimensions';
|
||||
|
||||
/**
|
||||
* Properties of a container
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type Position } from '../Enums/Position';
|
||||
import { Position } from '../Enums/Position';
|
||||
|
||||
export interface IDimensionOptions {
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import { type IDimensionOptions } from './IDimensionOptions';
|
||||
import { type Orientation } from '../Enums/Orientation';
|
||||
import { IDimensionOptions } from './IDimensionOptions';
|
||||
import { Orientation } from '../Enums/Orientation';
|
||||
|
||||
export interface IDimensions {
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { type IConfiguration } from './IConfiguration';
|
||||
import { type IHistoryState } from './IHistoryState';
|
||||
import { IConfiguration } from './IConfiguration';
|
||||
import { IHistoryState } from './IHistoryState';
|
||||
|
||||
export interface IEditorState {
|
||||
history: IHistoryState[]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type IHistoryState } from './IHistoryState';
|
||||
import { IHistoryState } from './IHistoryState';
|
||||
|
||||
export interface IGetFeedbackRequest {
|
||||
/** Current application state */
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
|
||||
import { type IMessage } from './IMessage';
|
||||
import { IMessage } from './IMessage';
|
||||
|
||||
export interface IGetFeedbackResponse {
|
||||
messages: IMessage[]
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { type IContainerModel } from './IContainerModel';
|
||||
import { type ISymbolModel } from './ISymbolModel';
|
||||
import { IContainerModel } from './IContainerModel';
|
||||
import { ISymbolModel } from './ISymbolModel';
|
||||
|
||||
export interface IHistoryState {
|
||||
/** Last editor action */
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import type React from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export interface IInputGroup {
|
||||
key: string
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type MessageType } from '../Enums/MessageType';
|
||||
import { MessageType } from '../Enums/MessageType';
|
||||
|
||||
export interface IMessage {
|
||||
text: string
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IAvailableContainer } from './IAvailableContainer';
|
||||
import { IAvailableContainer } from './IAvailableContainer';
|
||||
|
||||
export interface IPattern {
|
||||
/**
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { type IAction } from './IAction';
|
||||
import { type IContainerModel } from './IContainerModel';
|
||||
import { type IHistoryState } from './IHistoryState';
|
||||
import { IAction } from './IAction';
|
||||
import { IContainerModel } from './IContainerModel';
|
||||
import { IHistoryState } from './IHistoryState';
|
||||
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
export interface ISetContainerListRequest {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type AddMethod } from '../Enums/AddMethod';
|
||||
import { type IAvailableContainer } from './IAvailableContainer';
|
||||
import { AddMethod } from '../Enums/AddMethod';
|
||||
import { IAvailableContainer } from './IAvailableContainer';
|
||||
|
||||
export interface ISetContainerListResponse {
|
||||
Containers: IAvailableContainer[]
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { type IAvailableSymbol } from './IAvailableSymbol';
|
||||
import { IAvailableSymbol } from './IAvailableSymbol';
|
||||
|
||||
export interface ISymbolModel {
|
||||
/** Identifier */
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import { PositionReference } from '../Enums/PositionReference';
|
||||
import { type IAvailableContainer } from '../Interfaces/IAvailableContainer';
|
||||
import { type IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
|
||||
import { type IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { ContainerModel, type IContainerModel } from '../Interfaces/IContainerModel';
|
||||
import { type IContainerProperties } from '../Interfaces/IContainerProperties';
|
||||
import { type IEditorState } from '../Interfaces/IEditorState';
|
||||
import { type ISymbolModel } from '../Interfaces/ISymbolModel';
|
||||
import { IAvailableContainer } from '../Interfaces/IAvailableContainer';
|
||||
import { IAvailableSymbol } from '../Interfaces/IAvailableSymbol';
|
||||
import { IConfiguration } from '../Interfaces/IConfiguration';
|
||||
import { ContainerModel, IContainerModel } from '../Interfaces/IContainerModel';
|
||||
import { IContainerProperties } from '../Interfaces/IContainerProperties';
|
||||
import { IEditorState } from '../Interfaces/IEditorState';
|
||||
import { ISymbolModel } from '../Interfaces/ISymbolModel';
|
||||
import { Orientation } from '../Enums/Orientation';
|
||||
import { AppState } from '../Enums/AppState';
|
||||
|
||||
|
|
|
@ -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> {
|
||||
for (const childId of childrenIds) {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { type IEditorState } from '../Interfaces/IEditorState';
|
||||
import { type IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { type IContainerModel } from '../Interfaces/IContainerModel';
|
||||
import { type ISymbolModel } from '../Interfaces/ISymbolModel';
|
||||
import { IEditorState } from '../Interfaces/IEditorState';
|
||||
import { IHistoryState } from '../Interfaces/IHistoryState';
|
||||
import { IContainerModel } from '../Interfaces/IContainerModel';
|
||||
import { ISymbolModel } from '../Interfaces/ISymbolModel';
|
||||
|
||||
/**
|
||||
* Revive the Editor state
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/* eslint-disable import/export */
|
||||
import type * as React from 'react';
|
||||
import { cleanup, render, type RenderResult } from '@testing-library/react';
|
||||
import * as React from 'react';
|
||||
import { cleanup, render, RenderResult } from '@testing-library/react';
|
||||
import { afterEach } from 'vitest';
|
||||
|
||||
afterEach(() => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue