Merged PR 330: Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style
Add DimensionStyle + Refactor dimensionLayer + Add width and dashArray to style Related work items: #7977
This commit is contained in:
Eric Nguyen
parent
c6c4bd1e32
commit
338a2c157c
14 changed files with 475 additions and 324 deletions
|
|
@ -1,7 +1,7 @@
|
|||
import * as React from 'react';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { type IContainerProperties } from '../../Interfaces/IContainerProperties';
|
||||
import { type 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,17 +117,19 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
props.properties.width,
|
||||
props.properties.positionReference
|
||||
).toString()}
|
||||
onChange={(value) => props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
RestoreX(
|
||||
Number(value),
|
||||
props.properties.width,
|
||||
props.properties.positionReference
|
||||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
)}/>
|
||||
onChange={(value) => {
|
||||
props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
RestoreX(
|
||||
Number(value),
|
||||
props.properties.width,
|
||||
props.properties.positionReference
|
||||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
);
|
||||
}}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-y`}
|
||||
labelText={Text({ textId: '@ContainerY' })}
|
||||
|
|
@ -140,17 +142,19 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
props.properties.height,
|
||||
props.properties.positionReference
|
||||
).toString()}
|
||||
onChange={(value) => props.onChange(
|
||||
'y',
|
||||
ApplyXMargin(
|
||||
RestoreY(
|
||||
Number(value),
|
||||
props.properties.height,
|
||||
props.properties.positionReference
|
||||
),
|
||||
props.properties.margin.top
|
||||
)
|
||||
)}/>
|
||||
onChange={(value) => {
|
||||
props.onChange(
|
||||
'y',
|
||||
ApplyXMargin(
|
||||
RestoreY(
|
||||
Number(value),
|
||||
props.properties.height,
|
||||
props.properties.positionReference
|
||||
),
|
||||
props.properties.margin.top
|
||||
)
|
||||
);
|
||||
}}/>
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
|
|
@ -171,7 +175,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' })}
|
||||
|
|
@ -182,7 +186,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`}
|
||||
|
|
@ -193,7 +197,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`}
|
||||
|
|
@ -204,7 +208,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' })}
|
||||
|
|
@ -215,7 +219,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
|
||||
|
|
@ -227,7 +231,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>
|
||||
|
||||
|
|
@ -247,7 +251,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' })}
|
||||
|
|
@ -257,7 +261,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' })}
|
||||
|
|
@ -267,7 +271,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' })}
|
||||
|
|
@ -277,7 +281,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>
|
||||
|
||||
|
|
@ -295,7 +299,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' })}
|
||||
|
|
@ -304,7 +308,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>
|
||||
|
||||
|
|
@ -334,7 +338,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>
|
||||
|
||||
|
|
@ -347,168 +351,244 @@ export function ContainerForm(props: IContainerFormProps): JSX.Element {
|
|||
<div className='grid grid-cols-1 gap-6 prop-category-body'>
|
||||
{
|
||||
SHOW_SELF_DIMENSIONS &&
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.dimensionOptions.selfDimensions.positions}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfDimension)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfDimensions.color}
|
||||
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfDimension)}/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowDimension' })}
|
||||
value={props.properties.dimensionOptions.selfDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfDimension); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfDimensions.style.color}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfDimensionStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='width'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.selfDimensions.style.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfDimensionStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
inputKey='dashArray'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.selfDimensions.style.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfDimensionStyle); }}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
SHOW_SELF_MARGINS_DIMENSIONS &&
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfMarginsDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfMarginsDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.SelfMarginDimension)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.color}
|
||||
onChange={(e) => props.onChange('color', e.target.value, PropertyType.SelfMarginDimension)}/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsSelfMarginsDimensions'
|
||||
attribute='positions'
|
||||
name='ShowSelfMarginsDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowMarginsDimension' })}
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.SelfMarginDimension); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.style.color}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.SelfMarginDimensionStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfMarginsDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='width'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.selfMarginsDimensions.style.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.SelfMarginDimensionStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-selfMarginsDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
inputKey='dashArray'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.selfMarginsDimensions.style.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.SelfMarginDimensionStyle); }}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
SHOW_CHILDREN_DIMENSIONS &&
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsChildrenDimensions'
|
||||
attribute='positions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.dimensionOptions.childrenDimensions.positions}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.ChildrenDimensions)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.childrenDimensions.color}
|
||||
onChange={(e) => props.onChange('color', e.target.value, PropertyType.ChildrenDimensions)}/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsChildrenDimensions'
|
||||
attribute='positions'
|
||||
name='ShowChildrenDimensions'
|
||||
labelText={Text({ textId: '@ContainerShowChildrenDimension' })}
|
||||
value={props.properties.dimensionOptions.childrenDimensions.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.ChildrenDimensions); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.childrenDimensions.style.color}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.ChildrenDimensionsStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-childrenDimensions-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='width'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.childrenDimensions.style.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.ChildrenDimensionsStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-childrenDimensions-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
inputKey='dashArray'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.childrenDimensions.style.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.ChildrenDimensionsStyle); }}/>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
SHOW_BORROWER_DIMENSIONS &&
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionOptions)}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsDimensionWithMarks'
|
||||
attribute='positions'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
|
||||
onChange={(key, value) => props.onChange(key, value, PropertyType.DimensionWithMarks)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@Color' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.color}
|
||||
onChange={(e) => props.onChange('color', e.target.value, PropertyType.DimensionWithMarks)}/>
|
||||
</div>
|
||||
</>
|
||||
<>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<OrientationCheckboxes
|
||||
id='markPosition'
|
||||
name='MarkPosition'
|
||||
value={props.properties.dimensionOptions.markPosition}
|
||||
labelText={Text({ textId: '@ContainerMarkPosition' })}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionOptions); }}
|
||||
/>
|
||||
</div>
|
||||
<div className='grid grid-cols-1 gap-2'>
|
||||
<PositionCheckboxes
|
||||
id='positionsDimensionWithMarks'
|
||||
attribute='positions'
|
||||
name='ShowDimensionWithMarks'
|
||||
labelText={Text({ textId: '@ContainerShowDimensionWithMarks' })}
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.positions}
|
||||
onChange={(key, value) => { props.onChange(key, value, PropertyType.DimensionWithMarks); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText={Text({ textId: '@StyleStrokeColor' })}
|
||||
inputKey='color'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='color'
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.style.color}
|
||||
onChange={(e) => { props.onChange('color', e.target.value, PropertyType.DimensionWithMarksStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-dimensionWithMarks-width`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='width'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.dimensionOptions.dimensionWithMarks.style.width ?? 0).toString()}
|
||||
onChange={(value) => { props.onChange('width', Number(value), PropertyType.DimensionWithMarksStyle); }}/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-dimensionWithMarks-dasharray`}
|
||||
labelText={Text({ textId: '@StyleStrokeDashArray' })}
|
||||
inputKey='dashArray'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='text'
|
||||
value={props.properties.dimensionOptions.dimensionWithMarks.style.dashArray ?? ''}
|
||||
onChange={(value) => { props.onChange('dashArray', value, PropertyType.DimensionWithMarksStyle); }}/>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</Category>
|
||||
|
||||
{props.properties.style !== undefined &&
|
||||
<Category category={{
|
||||
Type: 'Style',
|
||||
DisplayedText: Text({ textId: '@ContainerStyle' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-stroke`}
|
||||
labelText={Text({ textId: '@StyleStroke' })}
|
||||
inputKey='stroke'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.stroke ?? 'black'}
|
||||
onChange={(value) => props.onChange('stroke', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
labelText={Text({ textId: '@StyleStrokeOpacity' })}
|
||||
inputKey='strokeOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.strokeOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='strokeWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
value={(props.properties.style.strokeWidth ?? 1).toString()}
|
||||
onChange={(value) => props.onChange('strokeWidth', Number(value), PropertyType.Style)}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-fill`}
|
||||
labelText={Text({ textId: '@StyleFill' })}
|
||||
inputKey='fill'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.fill ?? 'black'}
|
||||
onChange={(value) => props.onChange('fill', value, PropertyType.Style)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
labelText={Text({ textId: '@StyleFillOpacity' })}
|
||||
inputKey='fillOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.fillOpacity ?? 1).toString()}
|
||||
onChange={(event) => props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style)}
|
||||
/>
|
||||
</div>
|
||||
</Category>
|
||||
<Category category={{
|
||||
Type: 'Style',
|
||||
DisplayedText: Text({ textId: '@ContainerStyle' })
|
||||
}}
|
||||
heightClass={`${categoryHeight}`}
|
||||
>
|
||||
<div className='grid grid-cols-5 gap-6 items-center prop-category-body'>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-stroke`}
|
||||
labelText={Text({ textId: '@StyleStroke' })}
|
||||
inputKey='stroke'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.stroke ?? 'black'}
|
||||
onChange={(value) => { props.onChange('stroke', value, PropertyType.Style); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-strokeOpacity`}
|
||||
labelText={Text({ textId: '@StyleStrokeOpacity' })}
|
||||
inputKey='strokeOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.strokeOpacity ?? 1).toString()}
|
||||
onChange={(event) => { props.onChange('strokeOpacity', Number(event.target.value), PropertyType.Style); }}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-strokeWidth`}
|
||||
labelText={Text({ textId: '@StyleStrokeWidth' })}
|
||||
inputKey='strokeWidth'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='number'
|
||||
value={(props.properties.style.strokeWidth ?? 1).toString()}
|
||||
onChange={(value) => { props.onChange('strokeWidth', Number(value), PropertyType.Style); }}
|
||||
/>
|
||||
<TextInputGroup
|
||||
id={`${props.properties.id}-fill`}
|
||||
labelText={Text({ textId: '@StyleFill' })}
|
||||
inputKey='fill'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='string'
|
||||
value={props.properties.style.fill ?? 'black'}
|
||||
onChange={(value) => { props.onChange('fill', value, PropertyType.Style); }}
|
||||
/>
|
||||
<InputGroup
|
||||
labelKey={`${props.properties.id}-fillOpacity`}
|
||||
labelText={Text({ textId: '@StyleFillOpacity' })}
|
||||
inputKey='fillOpacity'
|
||||
labelClassName='col-span-2'
|
||||
inputClassName='col-span-3'
|
||||
type='range'
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={(props.properties.style.fillOpacity ?? 1).toString()}
|
||||
onChange={(event) => { props.onChange('fillOpacity', Number(event.target.value), PropertyType.Style); }}
|
||||
/>
|
||||
</div>
|
||||
</Category>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue