Merged PR 167: Add Flex and fix bugs (read desc)
Note: The branch name does not fit the new features. - Implement Flex with simplex - Enable rigid body by default (removed IsRigidBody property) <=== possibly a bad idea - Sort children in add and update properties - Implement MaxWidth - Add more docs Fixes : - .env.production url - Symbols: not blocking the linked container when the parent is moving
This commit is contained in:
Eric Nguyen
parent
ec3fddec9d
commit
7f3f6a489a
43 changed files with 1127 additions and 453 deletions
|
|
@ -1,9 +1,10 @@
|
|||
import { MenuAlt2Icon, MenuAlt3Icon, MenuIcon } from '@heroicons/react/outline';
|
||||
import * as React from 'react';
|
||||
import { PropertyType } from '../../Enums/PropertyType';
|
||||
import { XPositionReference } from '../../Enums/XPositionReference';
|
||||
import IContainerProperties from '../../Interfaces/IContainerProperties';
|
||||
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { restoreX, transformX } from '../../utils/svg';
|
||||
import { ApplyWidthMargin, ApplyXMargin, RemoveWidthMargin, RemoveXMargin, restoreX, transformX } from '../../utils/svg';
|
||||
import { InputGroup } from '../InputGroup/InputGroup';
|
||||
import { RadioGroupButtons } from '../RadioGroupButtons/RadioGroupButtons';
|
||||
import { Select } from '../Select/Select';
|
||||
|
|
@ -11,12 +12,12 @@ import { Select } from '../Select/Select';
|
|||
interface IContainerFormProps {
|
||||
properties: IContainerProperties
|
||||
symbols: Map<string, ISymbolModel>
|
||||
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
|
||||
onChange: (key: string, value: string | number | boolean, type?: PropertyType) => void
|
||||
}
|
||||
|
||||
const getCSSInputs = (
|
||||
properties: IContainerProperties,
|
||||
onChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
|
||||
onChange: (key: string, value: string | number | boolean, type: PropertyType) => void
|
||||
): JSX.Element[] => {
|
||||
const groupInput: JSX.Element[] = [];
|
||||
for (const key in properties.style) {
|
||||
|
|
@ -28,7 +29,7 @@ const getCSSInputs = (
|
|||
inputClassName=''
|
||||
type='string'
|
||||
value={(properties.style as any)[key]}
|
||||
onChange={(event) => onChange(key, event.target.value, true)}
|
||||
onChange={(event) => onChange(key, event.target.value, PropertyType.STYLE)}
|
||||
/>);
|
||||
}
|
||||
return groupInput;
|
||||
|
|
@ -52,7 +53,16 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.parentId?.toString()}
|
||||
value={props.properties.parentId}
|
||||
isDisabled={true}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Type'
|
||||
inputKey='type'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='string'
|
||||
value={props.properties.type}
|
||||
isDisabled={true}
|
||||
/>
|
||||
<InputGroup
|
||||
|
|
@ -71,8 +81,18 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
isDisabled={props.properties.linkedSymbolId !== ''}
|
||||
value={transformX(props.properties.x, props.properties.width, props.properties.XPositionReference).toString()}
|
||||
onChange={(event) => props.onChange('x', restoreX(Number(event.target.value), props.properties.width, props.properties.XPositionReference))}
|
||||
value={transformX(RemoveXMargin(props.properties.x, props.properties.margin.left), props.properties.width, props.properties.XPositionReference).toString()}
|
||||
onChange={(event) => props.onChange(
|
||||
'x',
|
||||
ApplyXMargin(
|
||||
restoreX(
|
||||
Number(event.target.value),
|
||||
props.properties.width,
|
||||
props.properties.XPositionReference
|
||||
),
|
||||
props.properties.margin.left
|
||||
)
|
||||
)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='y'
|
||||
|
|
@ -80,8 +100,8 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
value={props.properties.y.toString()}
|
||||
onChange={(event) => props.onChange('y', Number(event.target.value))}
|
||||
value={(props.properties.y - (props.properties.margin?.top ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('y', Number(event.target.value) + (props.properties.margin?.top ?? 0))}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Minimum width'
|
||||
|
|
@ -93,6 +113,16 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
value={props.properties.minWidth.toString()}
|
||||
onChange={(event) => props.onChange('minWidth', Number(event.target.value))}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Maximum width'
|
||||
inputKey='maxWidth'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={1}
|
||||
value={props.properties.maxWidth.toString()}
|
||||
onChange={(event) => props.onChange('maxWidth', Number(event.target.value))}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Width'
|
||||
inputKey='width'
|
||||
|
|
@ -100,8 +130,9 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
min={props.properties.minWidth}
|
||||
value={props.properties.width.toString()}
|
||||
onChange={(event) => props.onChange('width', Number(event.target.value))}
|
||||
value={(RemoveWidthMargin(props.properties.width, props.properties.margin.left, props.properties.margin.right)).toString()}
|
||||
onChange={(event) => props.onChange('width', ApplyWidthMargin(Number(event.target.value), props.properties.margin.left, props.properties.margin.right))}
|
||||
isDisabled={props.properties.isFlex}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Height'
|
||||
|
|
@ -110,17 +141,57 @@ const ContainerForm: React.FunctionComponent<IContainerFormProps> = (props) => {
|
|||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={props.properties.height.toString()}
|
||||
onChange={(event) => props.onChange('height', Number(event.target.value))}
|
||||
value={(props.properties.height + (props.properties.margin?.top ?? 0) + (props.properties.margin?.bottom ?? 0)).toString()}
|
||||
onChange={(event) => props.onChange('height', Number(event.target.value) - (props.properties.margin?.top ?? 0) - (props.properties.margin?.bottom ?? 0))}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Rigid'
|
||||
inputKey='isRigidBody'
|
||||
labelText='Margin left'
|
||||
inputKey='left'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.left ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('left', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Margin bottom'
|
||||
inputKey='bottom'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.bottom ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('bottom', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Margin top'
|
||||
inputKey='top'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.top ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('top', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Margin right'
|
||||
inputKey='right'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='number'
|
||||
min={0}
|
||||
value={(props.properties.margin.right ?? 0).toString()}
|
||||
onChange={(event) => props.onChange('right', Number(event.target.value), PropertyType.MARGIN)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Flex'
|
||||
inputKey='isFlex'
|
||||
labelClassName=''
|
||||
inputClassName=''
|
||||
type='checkbox'
|
||||
checked={props.properties.isRigidBody}
|
||||
onChange={(event) => props.onChange('isRigidBody', event.target.checked)}
|
||||
checked={props.properties.isFlex}
|
||||
onChange={(event) => props.onChange('isFlex', event.target.checked)}
|
||||
/>
|
||||
<InputGroup
|
||||
labelText='Anchor'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue