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,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));
|
||||
}} />;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue