Merged PR 199: Add more Position for the dimensions + rename isDimensionBorrower and MarkPosition... + Refactor components in ContainerForm with Checkboxes and Selector + Add more docs
Add more Position for the dimensions Rename isDimensionBorrower and MarkPosition... Refactor components in ContainerForm with Checkboxes and Selector Add more docs
This commit is contained in:
Eric Nguyen
parent
38666af314
commit
b88539e34d
13 changed files with 494 additions and 314 deletions
|
|
@ -1,17 +1,19 @@
|
|||
import * as React from 'react';
|
||||
import { IInputGroup } from '../../Interfaces/IInputGroup';
|
||||
|
||||
interface ICheckboxGroupButtonsProps {
|
||||
name: string
|
||||
selectedValues: number[]
|
||||
inputClassName: string
|
||||
labelText: string
|
||||
inputGroups: IEnumCheckboxInputGroup[]
|
||||
inputGroups: ICheckboxInputGroup[]
|
||||
colQty: number
|
||||
onChange: (newSelectedValues: number[]) => void
|
||||
}
|
||||
|
||||
interface IEnumCheckboxInputGroup extends Omit<IInputGroup, 'value'> {
|
||||
// TODO: After modeler uses Typescript >= 4.x, extends Omit<IInputGroup, 'value'>
|
||||
interface ICheckboxInputGroup {
|
||||
key: string
|
||||
text: React.ReactNode
|
||||
value: number
|
||||
}
|
||||
|
||||
|
|
@ -32,7 +34,7 @@ const GRID_COLS = [
|
|||
'grid-cols-12'
|
||||
];
|
||||
|
||||
export function EnumCheckboxGroupButtons(props: ICheckboxGroupButtonsProps): JSX.Element {
|
||||
export function CheckboxGroupButtons(props: ICheckboxGroupButtonsProps): JSX.Element {
|
||||
const selectedOptions = new Set<number>(props.selectedValues);
|
||||
const inputGroups = props.inputGroups.map((inputGroup) => (
|
||||
<div key={inputGroup.key}>
|
||||
|
|
@ -69,7 +71,7 @@ export function EnumCheckboxGroupButtons(props: ICheckboxGroupButtonsProps): JSX
|
|||
</>
|
||||
);
|
||||
|
||||
function IsChecked(inputGroup: IEnumCheckboxInputGroup): boolean {
|
||||
function IsChecked(inputGroup: ICheckboxInputGroup): boolean {
|
||||
return selectedOptions.has(inputGroup.value);
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import React from 'react';
|
||||
import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
|
||||
import { CheckboxGroupButtons } from './CheckboxGroupButtons';
|
||||
import { Orientation } from '../../Enums/Orientation';
|
||||
|
||||
interface IOrientationCheckboxesProps {
|
||||
id: string
|
||||
name: string
|
||||
labelText: string
|
||||
value: Orientation[]
|
||||
onChange: (key: string, value: number[]) => void
|
||||
}
|
||||
|
||||
export function OrientationCheckboxes({
|
||||
id,
|
||||
name,
|
||||
labelText,
|
||||
value,
|
||||
onChange
|
||||
}: IOrientationCheckboxesProps): JSX.Element {
|
||||
return <CheckboxGroupButtons
|
||||
key={id}
|
||||
name={name}
|
||||
selectedValues={value}
|
||||
inputClassName='hidden'
|
||||
labelText={labelText}
|
||||
colQty={2}
|
||||
inputGroups={[
|
||||
{
|
||||
key: `${id}-horizontal`,
|
||||
text: (
|
||||
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
|
||||
<ChevronUpDownIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Horizontal
|
||||
},
|
||||
{
|
||||
key: `${id}-vertical`,
|
||||
text: (
|
||||
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
|
||||
<ChevronUpDownIcon className='heroicon rotate-90 p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Vertical
|
||||
}
|
||||
]}
|
||||
onChange={(newSelectedValues) => {
|
||||
onChange(id, newSelectedValues);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
70
src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx
Normal file
70
src/Components/CheckboxGroupButtons/PositionCheckboxes.tsx
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import React from 'react';
|
||||
import { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon } from '@heroicons/react/20/solid';
|
||||
import { Position } from '../../Enums/Position';
|
||||
import { CheckboxGroupButtons } from './CheckboxGroupButtons';
|
||||
|
||||
interface IPositionCheckboxesProps {
|
||||
id: string
|
||||
name: string
|
||||
labelText: string
|
||||
value: Position[]
|
||||
onChange: (key: string, value: number[]) => void
|
||||
}
|
||||
|
||||
export function PositionCheckboxes({
|
||||
id,
|
||||
name,
|
||||
labelText,
|
||||
value,
|
||||
onChange
|
||||
}: IPositionCheckboxesProps): JSX.Element {
|
||||
return <CheckboxGroupButtons
|
||||
key={id}
|
||||
name={name}
|
||||
selectedValues={value}
|
||||
inputClassName='hidden'
|
||||
labelText={labelText}
|
||||
colQty={4}
|
||||
inputGroups={[
|
||||
{
|
||||
key: `${id}-left`,
|
||||
text: (
|
||||
<div title='Left' aria-label='left' className='radio-button-icon'>
|
||||
<ArrowLeftIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Position.Left
|
||||
},
|
||||
{
|
||||
key: `${id}-down`,
|
||||
text: (
|
||||
<div title='Down' aria-label='down' className='radio-button-icon'>
|
||||
<ArrowDownIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Position.Down
|
||||
},
|
||||
{
|
||||
key: `${id}-up`,
|
||||
text: (
|
||||
<div title='Up' aria-label='up' className='radio-button-icon'>
|
||||
<ArrowUpIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Position.Up
|
||||
},
|
||||
{
|
||||
key: `${id}-right`,
|
||||
text: (
|
||||
<div title='Right' aria-label='right' className='radio-button-icon'>
|
||||
<ArrowRightIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Position.Right
|
||||
}
|
||||
]}
|
||||
onChange={(newSelectedValues) => {
|
||||
onChange(id, newSelectedValues);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
|
|
@ -1,19 +1,17 @@
|
|||
import { Bars3BottomLeftIcon, Bars3CenterLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars2Icon } from '@heroicons/react/24/outline';
|
||||
import { FlagIcon, ViewColumnsIcon } from '@heroicons/react/20/solid';
|
||||
import * as React from 'react';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { PositionReference } from '../../Enums/PositionReference';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../utils/default';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, RestoreX, RestoreY, TransformX, TransformY } from '../../utils/svg';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { TextInputGroup } from '../InputGroup/TextInputGroup';
|
||||
import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
|
||||
import { Select } from '../Select/Select';
|
||||
import { ToggleButton, ToggleType } from '../ToggleButton/ToggleButton';
|
||||
import { Orientation } from '../../Enums/Orientation';
|
||||
import { EnumCheckboxGroupButtons } from '../EnumCheckboxGroupButtons/EnumCheckboxGroupButtons';
|
||||
import { PositionReferenceSelector } from '../RadioGroupButtons/PositionReferenceSelector';
|
||||
import { OrientationSelector } from '../RadioGroupButtons/OrientationSelector';
|
||||
import { OrientationCheckboxes } from '../CheckboxGroupButtons/OrientationCheckboxes';
|
||||
import { PositionCheckboxes } from '../CheckboxGroupButtons/PositionCheckboxes';
|
||||
|
||||
interface IContainerFormProps {
|
||||
properties: IContainerProperties
|
||||
|
|
@ -75,7 +73,13 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type='string'
|
||||
value={props.properties.displayedText?.toString()}
|
||||
onChange={(value) => props.onChange('displayedText', value)} />
|
||||
<OrientationSelector {...props} />
|
||||
<OrientationSelector
|
||||
id='orientation'
|
||||
name='Orientation'
|
||||
labelText='Orientation'
|
||||
value={props.properties.orientation}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-x`}
|
||||
labelText='x'
|
||||
|
|
@ -245,8 +249,12 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
type={ToggleType.Full}
|
||||
checked={props.properties.isAnchor}
|
||||
onChange={(event) => props.onChange('isAnchor', event.target.checked)} />
|
||||
<AlignmentSelector
|
||||
{...props}
|
||||
<PositionReferenceSelector
|
||||
id='positionReference'
|
||||
name='PositionReference'
|
||||
labelText='Alignment'
|
||||
value={props.properties.positionReference}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<Select
|
||||
inputKey='linkedSymbolId'
|
||||
|
|
@ -263,206 +271,43 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
{GetCSSInputs(props.properties, props.onChange)}
|
||||
{
|
||||
SHOW_SELF_DIMENSIONS &&
|
||||
<ToggleButton
|
||||
<PositionCheckboxes
|
||||
id='showSelfDimensions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText='Show dimension'
|
||||
inputKey='showSelfDimensions'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.showSelfDimensions}
|
||||
onChange={(event) => props.onChange('showSelfDimensions', event.target.checked)} />
|
||||
value={props.properties.showSelfDimensions}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
}
|
||||
{
|
||||
SHOW_CHILDREN_DIMENSIONS &&
|
||||
<ToggleButton
|
||||
<PositionCheckboxes
|
||||
id='showChildrenDimensions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText='Show overall dimension of its children'
|
||||
inputKey='showChildrenDimensions'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.showChildrenDimensions}
|
||||
onChange={(event) => props.onChange('showChildrenDimensions', event.target.checked)} />
|
||||
value={props.properties.showChildrenDimensions}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
}
|
||||
{
|
||||
SHOW_BORROWER_DIMENSIONS &&
|
||||
<>
|
||||
<MarkPositionOptions {...props} />
|
||||
<ToggleButton
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.markPosition}
|
||||
labelText='Mark the position'
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
<PositionCheckboxes
|
||||
id='showDimensionWithMarks'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText='Show dimension with marked children'
|
||||
inputKey='isDimensionBorrower'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type={ToggleType.Full}
|
||||
checked={props.properties.isDimensionBorrower}
|
||||
onChange={(event) => props.onChange('isDimensionBorrower', event.target.checked)} />
|
||||
value={props.properties.showDimensionWithMarks}
|
||||
onChange={props.onChange}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// TODO: Implement categories in the form
|
||||
|
||||
function MarkPositionOptions(props: IContainerFormProps): JSX.Element {
|
||||
return <EnumCheckboxGroupButtons
|
||||
key='markPosition'
|
||||
name='MarkPosition'
|
||||
selectedValues={props.properties.markPositionToDimensionBorrower}
|
||||
inputClassName='hidden'
|
||||
labelText='Mark the position'
|
||||
colQty={2}
|
||||
inputGroups={[
|
||||
{
|
||||
key: 'mark-position-horizontal',
|
||||
text: (
|
||||
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
|
||||
<FlagIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Horizontal
|
||||
},
|
||||
{
|
||||
key: 'mark-position-vertical',
|
||||
text: (
|
||||
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
|
||||
<FlagIcon className='heroicon rotate-90 p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Vertical
|
||||
}
|
||||
]}
|
||||
onChange={(newSelectedValues) => {
|
||||
props.onChange('markPositionToDimensionBorrower', newSelectedValues);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
|
||||
function OrientationSelector(props: IContainerFormProps): JSX.Element {
|
||||
return <RadioGroupButtons
|
||||
key='orientation'
|
||||
name='Orientation'
|
||||
value={props.properties.orientation.toString()}
|
||||
inputClassName='hidden'
|
||||
labelText='Orientation'
|
||||
colQty={2}
|
||||
inputGroups={[
|
||||
{
|
||||
key: 'orientation-horizontal',
|
||||
text: (
|
||||
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
|
||||
<ViewColumnsIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Horizontal.toString()
|
||||
},
|
||||
{
|
||||
key: 'orientation-vertical',
|
||||
text: (
|
||||
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
|
||||
<ViewColumnsIcon className='heroicon rotate-90 p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Vertical.toString()
|
||||
}
|
||||
]}
|
||||
onChange={(event) => {
|
||||
props.onChange('orientation', Number(event.target.value));
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
|
||||
function AlignmentSelector(props: IContainerFormProps): JSX.Element {
|
||||
return <RadioGroupButtons
|
||||
key='positionReference'
|
||||
name='PositionReference'
|
||||
value={props.properties.positionReference.toString()}
|
||||
inputClassName='hidden'
|
||||
labelText='Alignment'
|
||||
colQty={3}
|
||||
inputGroups={[
|
||||
{
|
||||
key: 'position-reference-tl',
|
||||
text: (
|
||||
<div title='Top Left' aria-label='top left' className='radio-button-icon'>
|
||||
<Bars3BottomLeftIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopLeft.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-tc',
|
||||
text: (
|
||||
<div title='Top Center' aria-label='top center' className='radio-button-icon'>
|
||||
<Bars2Icon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopCenter.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-tr',
|
||||
text: (
|
||||
<div title='Top Right' aria-label='top right' className='radio-button-icon'>
|
||||
<Bars3BottomRightIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopRight.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-cl',
|
||||
text: (
|
||||
<div title='Center Left' aria-label='center left' className='radio-button-icon'>
|
||||
<Bars3CenterLeftIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterLeft.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-cc',
|
||||
text: (
|
||||
<div title='Center Center' aria-label='center center' className='radio-button-icon'>
|
||||
<Bars3Icon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterCenter.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-cr',
|
||||
text: (
|
||||
<div title='Center Right' aria-label='center right' className='radio-button-icon'>
|
||||
<Bars3CenterLeftIcon className='heroicon -scale-x-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterRight.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-bl',
|
||||
text: (
|
||||
<div title='Bottom Left' aria-label='bottom left' className='radio-button-icon'>
|
||||
<Bars3BottomLeftIcon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomLeft.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-bc',
|
||||
text: (
|
||||
<div title='Bottom Center' aria-label='center center' className='radio-button-icon'>
|
||||
<Bars2Icon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomCenter.toString()
|
||||
},
|
||||
{
|
||||
key: 'position-reference-br',
|
||||
text: (
|
||||
<div title='Bottom Right' aria-label='bottom right' className='radio-button-icon'>
|
||||
<Bars3BottomRightIcon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomRight.toString()
|
||||
}
|
||||
]}
|
||||
onChange={(event) => {
|
||||
props.onChange('positionReference', Number(event.target.value));
|
||||
}} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,10 +42,10 @@ describe.concurrent('Properties', () => {
|
|||
isAnchor: false,
|
||||
warning: '',
|
||||
hideChildrenInTreeview: false,
|
||||
showChildrenDimensions: true, // TODO: put the dimension at the top (see pdf)
|
||||
showSelfDimensions: true, // TODO: put the dimension at the bottom (see pdf)
|
||||
isDimensionBorrower: true, // second dimensions from the bottom
|
||||
markPositionToDimensionBorrower: []
|
||||
showChildrenDimensions: [],
|
||||
showSelfDimensions: [],
|
||||
showDimensionWithMarks: [],
|
||||
markPosition: []
|
||||
};
|
||||
|
||||
const handleChange = vi.fn((key, value) => {
|
||||
|
|
|
|||
|
|
@ -110,10 +110,10 @@ describe.concurrent('Elements sidebar', () => {
|
|||
isAnchor: false,
|
||||
warning: '',
|
||||
hideChildrenInTreeview: false,
|
||||
showChildrenDimensions: true,
|
||||
showSelfDimensions: true,
|
||||
isDimensionBorrower: true,
|
||||
markPositionToDimensionBorrower: [],
|
||||
showChildrenDimensions: [],
|
||||
showSelfDimensions: [],
|
||||
showDimensionWithMarks: [],
|
||||
markPosition: [],
|
||||
positionReference: PositionReference.TopLeft
|
||||
},
|
||||
userData: {}
|
||||
|
|
@ -144,10 +144,10 @@ describe.concurrent('Elements sidebar', () => {
|
|||
type: 'type',
|
||||
warning: '',
|
||||
hideChildrenInTreeview: false,
|
||||
showChildrenDimensions: true,
|
||||
showSelfDimensions: true,
|
||||
isDimensionBorrower: true,
|
||||
markPositionToDimensionBorrower: [],
|
||||
showChildrenDimensions: [],
|
||||
showSelfDimensions: [],
|
||||
showDimensionWithMarks: [],
|
||||
markPosition: [],
|
||||
isAnchor: false
|
||||
},
|
||||
userData: {}
|
||||
|
|
@ -204,10 +204,10 @@ describe.concurrent('Elements sidebar', () => {
|
|||
maxHeight: Infinity,
|
||||
type: 'type',
|
||||
hideChildrenInTreeview: false,
|
||||
showChildrenDimensions: true,
|
||||
showSelfDimensions: true,
|
||||
isDimensionBorrower: true,
|
||||
markPositionToDimensionBorrower: [],
|
||||
showChildrenDimensions: [],
|
||||
showSelfDimensions: [],
|
||||
showDimensionWithMarks: [],
|
||||
markPosition: [],
|
||||
isAnchor: false
|
||||
},
|
||||
userData: {}
|
||||
|
|
|
|||
53
src/Components/RadioGroupButtons/OrientationSelector.tsx
Normal file
53
src/Components/RadioGroupButtons/OrientationSelector.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react';
|
||||
import { ViewColumnsIcon } from '@heroicons/react/20/solid';
|
||||
import { Orientation } from '../../Enums/Orientation';
|
||||
import { RadioGroupButtons } from './RadioGroupButtons';
|
||||
|
||||
// TODO: After modeler uses TypeScript >= 4.x, extends Omit<ISelectorProps, 'value'>
|
||||
interface IOrientationSelectorProps {
|
||||
id: string
|
||||
name: string
|
||||
labelText: string
|
||||
value: Orientation
|
||||
onChange: (key: string, value: number) => void
|
||||
}
|
||||
|
||||
export function OrientationSelector({
|
||||
id,
|
||||
name,
|
||||
labelText,
|
||||
value,
|
||||
onChange
|
||||
}: IOrientationSelectorProps): JSX.Element {
|
||||
return <RadioGroupButtons
|
||||
key={id}
|
||||
name={name}
|
||||
value={value.toString()}
|
||||
inputClassName='hidden'
|
||||
labelText={labelText}
|
||||
colQty={2}
|
||||
inputGroups={[
|
||||
{
|
||||
key: `${id}-horizontal`,
|
||||
text: (
|
||||
<div title='Horizontal' aria-label='horizontal' className='radio-button-icon'>
|
||||
<ViewColumnsIcon className='heroicon p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Horizontal.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-vertical`,
|
||||
text: (
|
||||
<div title='Vertical' aria-label='vertical' className='radio-button-icon'>
|
||||
<ViewColumnsIcon className='heroicon rotate-90 p-1' />
|
||||
</div>
|
||||
),
|
||||
value: Orientation.Vertical.toString()
|
||||
}
|
||||
]}
|
||||
onChange={(event) => {
|
||||
onChange(id, Number(event.target.value));
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
114
src/Components/RadioGroupButtons/PositionReferenceSelector.tsx
Normal file
114
src/Components/RadioGroupButtons/PositionReferenceSelector.tsx
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
import React from 'react';
|
||||
import { Bars3BottomLeftIcon, Bars3CenterLeftIcon, Bars3Icon, Bars3BottomRightIcon, Bars2Icon } from '@heroicons/react/24/outline';
|
||||
import { PositionReference } from '../../Enums/PositionReference';
|
||||
import { RadioGroupButtons } from './RadioGroupButtons';
|
||||
|
||||
interface IPositionReferenceSelectorProps {
|
||||
id: string
|
||||
name: string
|
||||
labelText: string
|
||||
value: PositionReference
|
||||
onChange: (key: string, value: number) => void
|
||||
}
|
||||
|
||||
export function PositionReferenceSelector({
|
||||
id,
|
||||
name,
|
||||
labelText,
|
||||
value,
|
||||
onChange
|
||||
}: IPositionReferenceSelectorProps): JSX.Element {
|
||||
return <RadioGroupButtons
|
||||
key={id}
|
||||
name={name}
|
||||
value={value.toString()}
|
||||
inputClassName='hidden'
|
||||
labelText={labelText}
|
||||
colQty={3}
|
||||
inputGroups={[
|
||||
{
|
||||
key: `${id}-tl`,
|
||||
text: (
|
||||
<div title='Top Left' aria-label='top left' className='radio-button-icon'>
|
||||
<Bars3BottomLeftIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopLeft.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-tc`,
|
||||
text: (
|
||||
<div title='Top Center' aria-label='top center' className='radio-button-icon'>
|
||||
<Bars2Icon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopCenter.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-tr`,
|
||||
text: (
|
||||
<div title='Top Right' aria-label='top right' className='radio-button-icon'>
|
||||
<Bars3BottomRightIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.TopRight.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-cl`,
|
||||
text: (
|
||||
<div title='Center Left' aria-label='center left' className='radio-button-icon'>
|
||||
<Bars3CenterLeftIcon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterLeft.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-cc`,
|
||||
text: (
|
||||
<div title='Center Center' aria-label='center center' className='radio-button-icon'>
|
||||
<Bars3Icon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterCenter.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-cr`,
|
||||
text: (
|
||||
<div title='Center Right' aria-label='center right' className='radio-button-icon'>
|
||||
<Bars3CenterLeftIcon className='heroicon -scale-x-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.CenterRight.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-bl`,
|
||||
text: (
|
||||
<div title='Bottom Left' aria-label='bottom left' className='radio-button-icon'>
|
||||
<Bars3BottomLeftIcon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomLeft.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-bc`,
|
||||
text: (
|
||||
<div title='Bottom Center' aria-label='center center' className='radio-button-icon'>
|
||||
<Bars2Icon className='heroicon' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomCenter.toString()
|
||||
},
|
||||
{
|
||||
key: `${id}-br`,
|
||||
text: (
|
||||
<div title='Bottom Right' aria-label='bottom right' className='radio-button-icon'>
|
||||
<Bars3BottomRightIcon className='heroicon -scale-y-100' />
|
||||
</div>
|
||||
),
|
||||
value: PositionReference.BottomRight.toString()
|
||||
}
|
||||
]}
|
||||
onChange={(event) => {
|
||||
onChange(id, Number(event.target.value));
|
||||
}} />;
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { Orientation } from '../../../Enums/Orientation';
|
||||
import { Position } from '../../../Enums/Position';
|
||||
import { ContainerModel, IContainerModel } from '../../../Interfaces/IContainerModel';
|
||||
import { DIMENSION_MARGIN, SHOW_BORROWER_DIMENSIONS, SHOW_CHILDREN_DIMENSIONS, SHOW_SELF_DIMENSIONS } from '../../../utils/default';
|
||||
import { MakeRecursionDFSIterator, Pairwise } from '../../../utils/itertools';
|
||||
|
|
@ -13,6 +14,43 @@ interface IDimensionLayerProps {
|
|||
|
||||
const MODULE_STROKE_WIDTH = 1;
|
||||
|
||||
/**
|
||||
* Fonction that call another function given the positions
|
||||
* @param dimMapped Position mapped depending on the Position enum in order:
|
||||
* [0:left, 1:bottom, 2:up, 3:right]
|
||||
* @param positions List of positions
|
||||
* @param horizontalAction Action called when a left or right position is present
|
||||
* @param verticalAction Action called when a down or up position is present
|
||||
* @param params Params for the actions
|
||||
* (the two actions must have the same number of params, and in the same order)
|
||||
*/
|
||||
function ActionByPosition(
|
||||
dimMapped: number[],
|
||||
positions: Position[],
|
||||
horizontalAction: (dim: number, ...params: any[]) => void,
|
||||
verticalAction: (dim: number, ...params: any[]) => void,
|
||||
params: any[]
|
||||
): void {
|
||||
positions.forEach((position: Position) => {
|
||||
const dim = dimMapped[position];
|
||||
switch (position) {
|
||||
case Position.Left:
|
||||
case Position.Right:
|
||||
verticalAction(dim, ...params);
|
||||
break;
|
||||
case Position.Down:
|
||||
case Position.Up:
|
||||
horizontalAction(dim, ...params);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns a list of dimensions of all containers in root
|
||||
* @param param0 Object with the root container and the scale of the svg
|
||||
* @returns A list of dimensions
|
||||
*/
|
||||
function Dimensions({ root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
||||
const it = MakeRecursionDFSIterator(root, 0, [0, 0]);
|
||||
const dimensions: React.ReactNode[] = [];
|
||||
|
|
@ -30,39 +68,71 @@ function Dimensions({ root, scale }: IDimensionLayerProps): React.ReactNode[] {
|
|||
const containerTopDim = topDim - (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerBottomDim = bottomDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
const containerRightDim = rightDim + (DIMENSION_MARGIN * (depth + 1)) / scale;
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions) {
|
||||
AddSelfDimension(container, currentTransform, containerTopDim, containerLeftDim, scale, dimensions);
|
||||
const dimMapped = [containerLeftDim, containerBottomDim, containerTopDim, containerRightDim];
|
||||
if (SHOW_SELF_DIMENSIONS && container.properties.showSelfDimensions.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showSelfDimensions,
|
||||
AddHorizontalSelfDimension,
|
||||
AddVerticalSelfDimension,
|
||||
[container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.isDimensionBorrower) {
|
||||
AddBorrowerDimension(containerBottomDim, containerRightDim, depth, scale, container, currentTransform, dimensions);
|
||||
if (SHOW_BORROWER_DIMENSIONS && container.properties.showDimensionWithMarks.length > 0) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showDimensionWithMarks,
|
||||
AddHorizontalBorrowerDimension,
|
||||
AddVerticalBorrowerDimension,
|
||||
[container,
|
||||
depth,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions && container.children.length > 1) {
|
||||
AddChildrenDimension(container, currentTransform, dimensions, containerBottomDim, containerRightDim, scale);
|
||||
if (SHOW_CHILDREN_DIMENSIONS && container.properties.showChildrenDimensions.length > 0 && container.children.length > 1) {
|
||||
ActionByPosition(
|
||||
dimMapped,
|
||||
container.properties.showChildrenDimensions,
|
||||
AddHorizontalChildrenDimension,
|
||||
AddVerticalChildrenDimension,
|
||||
[container,
|
||||
currentTransform,
|
||||
dimensions,
|
||||
scale]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return dimensions;
|
||||
}
|
||||
|
||||
function AddChildrenDimension(
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerBottomDim: number,
|
||||
containerRightDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
AddHorizontalChildrenDimension(container, currentTransform, dimensions, containerBottomDim, scale);
|
||||
AddVerticalChildrenDimension(container, currentTransform, dimensions, containerRightDim, scale);
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
return (
|
||||
<g>
|
||||
{ Dimensions(props) }
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
/// Dimensions Actions ///
|
||||
|
||||
function AddHorizontalChildrenDimension(
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerBottomDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-children-${container.properties.id}`;
|
||||
|
|
@ -94,18 +164,18 @@ function AddHorizontalChildrenDimension(
|
|||
id={childrenId}
|
||||
xStart={xChildrenStart + offset}
|
||||
xEnd={xChildrenEnd + offset}
|
||||
yStart={containerBottomDim}
|
||||
yEnd={containerBottomDim}
|
||||
yStart={yDim}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
scale={scale} />);
|
||||
}
|
||||
|
||||
function AddVerticalChildrenDimension(
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
containerRightDim: number,
|
||||
scale: number
|
||||
): void {
|
||||
const childrenId = `dim-v-children-${container.properties.id}`;
|
||||
|
|
@ -135,9 +205,9 @@ function AddVerticalChildrenDimension(
|
|||
dimensions.push(<Dimension
|
||||
key={childrenId}
|
||||
id={childrenId}
|
||||
xStart={containerRightDim}
|
||||
xStart={xDim}
|
||||
yStart={yChildrenStart + offset}
|
||||
xEnd={containerRightDim}
|
||||
xEnd={xDim}
|
||||
yEnd={yChildrenEnd + offset}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textChildren}
|
||||
|
|
@ -145,34 +215,20 @@ function AddVerticalChildrenDimension(
|
|||
/>);
|
||||
}
|
||||
|
||||
function AddBorrowerDimension(
|
||||
bottomDim: number,
|
||||
rightDim: number,
|
||||
depth: number,
|
||||
scale: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[]
|
||||
): void {
|
||||
AddHorizontalBorrowerDimension(bottomDim, container, depth, currentTransform, dimensions, scale);
|
||||
AddVerticalBorrowerDimension(rightDim, container, depth, currentTransform, dimensions, scale);
|
||||
}
|
||||
|
||||
function AddHorizontalBorrowerDimension(
|
||||
bottomDim: number,
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
const yDim = bottomDim;
|
||||
const it = MakeRecursionDFSIterator(container, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
container: childContainer, currentTransform: childCurrentTransform
|
||||
} of it) {
|
||||
const isHidden = !childContainer.properties.markPositionToDimensionBorrower.includes(Orientation.Horizontal);
|
||||
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Horizontal);
|
||||
if (isHidden) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -212,20 +268,19 @@ function AddHorizontalBorrowerDimension(
|
|||
}
|
||||
|
||||
function AddVerticalBorrowerDimension(
|
||||
rightDim: number,
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
depth: number,
|
||||
currentTransform: [number, number],
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
const xDim = rightDim;
|
||||
const it = MakeRecursionDFSIterator(container, depth, currentTransform);
|
||||
const marks = []; // list of vertical lines for the dimension
|
||||
for (const {
|
||||
container: childContainer, currentTransform: childCurrentTransform
|
||||
} of it) {
|
||||
const isHidden = !childContainer.properties.markPositionToDimensionBorrower.includes(Orientation.Vertical);
|
||||
const isHidden = !childContainer.properties.markPosition.includes(Orientation.Vertical);
|
||||
if (isHidden) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -264,24 +319,17 @@ function AddVerticalBorrowerDimension(
|
|||
}
|
||||
}
|
||||
|
||||
function AddSelfDimension(
|
||||
function AddVerticalSelfDimension(
|
||||
xDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
leftDim: number,
|
||||
scale: number,
|
||||
dimensions: React.ReactNode[]
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
AddHorizontalSelfDimension(container, currentTransform, topDim, dimensions, scale);
|
||||
AddVerticalSelfDimension(container, currentTransform, leftDim, dimensions, scale);
|
||||
}
|
||||
|
||||
function AddVerticalSelfDimension(container: IContainerModel, currentTransform: [number, number], leftDim: number, dimensions: React.ReactNode[], scale: number): void {
|
||||
const height = container.properties.height;
|
||||
const idVert = `dim-v-${container.properties.id}`;
|
||||
const yStart = container.properties.y + currentTransform[1];
|
||||
const yEnd = yStart + height;
|
||||
const x = leftDim;
|
||||
const textVert = height
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
|
@ -289,9 +337,9 @@ function AddVerticalSelfDimension(container: IContainerModel, currentTransform:
|
|||
<Dimension
|
||||
key={idVert}
|
||||
id={idVert}
|
||||
xStart={x}
|
||||
xStart={xDim}
|
||||
yStart={yStart}
|
||||
xEnd={x}
|
||||
xEnd={xDim}
|
||||
yEnd={yEnd}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={textVert}
|
||||
|
|
@ -300,9 +348,9 @@ function AddVerticalSelfDimension(container: IContainerModel, currentTransform:
|
|||
}
|
||||
|
||||
function AddHorizontalSelfDimension(
|
||||
yDim: number,
|
||||
container: IContainerModel,
|
||||
currentTransform: [number, number],
|
||||
topDim: number,
|
||||
dimensions: React.ReactNode[],
|
||||
scale: number
|
||||
): void {
|
||||
|
|
@ -310,7 +358,6 @@ function AddHorizontalSelfDimension(
|
|||
const id = `dim-${container.properties.id}`;
|
||||
const xStart = container.properties.x + currentTransform[0];
|
||||
const xEnd = xStart + width;
|
||||
const y = topDim;
|
||||
const text = width
|
||||
.toFixed(0)
|
||||
.toString();
|
||||
|
|
@ -319,24 +366,11 @@ function AddHorizontalSelfDimension(
|
|||
key={id}
|
||||
id={id}
|
||||
xStart={xStart}
|
||||
yStart={y}
|
||||
yStart={yDim}
|
||||
xEnd={xEnd}
|
||||
yEnd={y}
|
||||
yEnd={yDim}
|
||||
strokeWidth={MODULE_STROKE_WIDTH}
|
||||
text={text}
|
||||
scale={scale} />
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A layer containing all dimension
|
||||
* @param props
|
||||
* @returns
|
||||
*/
|
||||
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
|
||||
return (
|
||||
<g>
|
||||
{ Dimensions(props) }
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue