Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Reset Class Properties to separate css style into a property

Browse source
This commit is contained in:
Eric NGUYEN 2022-08-16 10:11:16 +02:00
parent 3d7baafc17
commit 706f9624cc
6 changed files with 17 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/Components/App/MenuActions.ts
View file

@ -24,8 +24,10 @@ export function NewEditor(
height: Number(configuration.MainContainer.Height), height: Number(configuration.MainContainer.Height),
isRigidBody: false, isRigidBody: false,
isAnchor: false, isAnchor: false,
fillOpacity: 0, style: {
stroke: 'black' fillOpacity: 0,
stroke: 'black'
}
} }
); );

6
src/Components/Editor/ContainerOperations.ts
View file

@ -209,7 +209,6 @@ export function AddContainer(
x = ApplyAddMethod(index, containerConfig, parentClone, x); x = ApplyAddMethod(index, containerConfig, parentClone, x);
const defaultProperties: IProperties = { const defaultProperties: IProperties = {
...containerConfig.Style,
id: `${type}-${count}`, id: `${type}-${count}`,
parentId: parentClone.properties.id, parentId: parentClone.properties.id,
x, x,
@ -218,7 +217,8 @@ export function AddContainer(
height, height,
isRigidBody: false, isRigidBody: false,
isAnchor: false, isAnchor: false,
XPositionReference: containerConfig.XPositionReference xPositionReference: containerConfig.XPositionReference,
style: containerConfig.Style
}; };
// Create the container // Create the container
@ -270,7 +270,7 @@ function ApplyAddMethod(index: number, containerConfig: IAvailableContainer, par
lastChild.properties.x, lastChild.properties.x,
lastChild.properties.y, lastChild.properties.y,
lastChild.properties.width, lastChild.properties.width,
lastChild.properties.XPositionReference lastChild.properties.xPositionReference
); );
x += transformedX + lastChild.properties.width; x += transformedX + lastChild.properties.width;

8
src/Components/SVG/Elements/Container.tsx
View file

@ -22,7 +22,7 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
props.model.properties.x, props.model.properties.x,
props.model.properties.y, props.model.properties.y,
props.model.properties.width, props.model.properties.width,
props.model.properties.XPositionReference props.model.properties.xPositionReference
); );
const transform = `translate(${transformedX}, ${transformedY})`; const transform = `translate(${transformedX}, ${transformedY})`;
@ -36,12 +36,8 @@ export const Container: React.FC<IContainerProps> = (props: IContainerProps) =>
// Rect style // Rect style
const style = Object.assign( const style = Object.assign(
JSON.parse(JSON.stringify(defaultStyle)), JSON.parse(JSON.stringify(defaultStyle)),
props.model.properties props.model.properties.style
); );
style.x = 0;
style.y = 0;
delete style.height;
delete style.width;
// Dimension props // Dimension props
const depth = getDepth(props.model); const depth = getDepth(props.model);

2
src/Components/SVG/Elements/Selector.tsx
View file

@ -20,7 +20,7 @@ export const Selector: React.FC<ISelectorProps> = (props) => {
x, x,
y, y,
props.selected.properties.width, props.selected.properties.width,
props.selected.properties.XPositionReference props.selected.properties.xPositionReference
); );
const [width, height] = [ const [width, height] = [
props.selected.properties.width, props.selected.properties.width,

5
src/Interfaces/IProperties.ts
View file

@ -10,7 +10,7 @@ import { XPositionReference } from '../Enums/XPositionReference';
* @property isRigidBody if true apply rigid body behaviors * @property isRigidBody if true apply rigid body behaviors
* @property isAnchor if true apply anchor behaviors * @property isAnchor if true apply anchor behaviors
*/ */
export default interface IProperties extends Omit<React.CSSProperties, 'width' | 'height'> { export default interface IProperties {
id: string id: string
parentId: string | null parentId: string | null
x: number x: number
@ -19,5 +19,6 @@ export default interface IProperties extends Omit<React.CSSProperties, 'width' |
height: number height: number
isRigidBody: boolean isRigidBody: boolean
isAnchor: boolean isAnchor: boolean
XPositionReference?: XPositionReference xPositionReference?: XPositionReference
style?: React.CSSProperties
} }

6
src/utils/default.ts
View file

@ -34,8 +34,10 @@ export const DEFAULT_MAINCONTAINER_PROPS: IProperties = {
height: Number(DEFAULT_CONFIG.MainContainer.Height), height: Number(DEFAULT_CONFIG.MainContainer.Height),
isRigidBody: false, isRigidBody: false,
isAnchor: false, isAnchor: false,
fillOpacity: 0, style: {
stroke: 'black' stroke: 'black',
fillOpacity: 0
}
}; };
export const DIMENSION_MARGIN = 50; export const DIMENSION_MARGIN = 50;