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

Merged PR 17: Implement rigid body Fix multiple bugs

Browse source 
Implement rigid body

Fix saveload bug: having null elements
Fix events being duplicated and not being removed
This commit is contained in:
Eric Nguyen 2022-08-11 08:43:10 +00:00
parent d2e1d9f0a4
commit 616fe3e9ac
22 changed files with 804 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/Components/ElementsSidebar/ElementsSidebar.test.tsx
View file

@ -16,14 +16,15 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 2000,
height: 100
height: 100,
isRigidBody: false
},
userData: {}
}}
isOpen={true}
isHistoryOpen={false}
SelectedContainer={null}
onPropertyChange={() => {}}
OnPropertyChange={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -44,7 +45,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 2000,
height: 100
height: 100,
isRigidBody: false
},
userData: {}
};
@ -54,7 +56,7 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={MainContainer}
onPropertyChange={() => {}}
OnPropertyChange={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -98,7 +100,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 2000,
height: 100
height: 100,
isRigidBody: false
},
userData: {}
};
@ -113,7 +116,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 0,
height: 0
height: 0,
isRigidBody: false
},
userData: {}
}
@ -129,7 +133,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 0,
height: 0
height: 0,
isRigidBody: false
},
userData: {}
}
@ -140,7 +145,7 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={MainContainer}
onPropertyChange={() => {}}
OnPropertyChange={() => {}}
SelectContainer={() => {}}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -164,7 +169,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 2000,
height: 100
height: 100,
isRigidBody: false
},
userData: {}
};
@ -178,7 +184,8 @@ describe.concurrent('Elements sidebar', () => {
x: 0,
y: 0,
width: 0,
height: 0
height: 0,
isRigidBody: false
},
userData: {}
};
@ -194,7 +201,7 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
onPropertyChange={() => {}}
OnPropertyChange={() => {}}
SelectContainer={selectContainer}
DeleteContainer={() => {}}
AddContainer={() => {}}
@ -217,7 +224,7 @@ describe.concurrent('Elements sidebar', () => {
isOpen={true}
isHistoryOpen={false}
SelectedContainer={SelectedContainer}
onPropertyChange={() => {}}
OnPropertyChange={() => {}}
SelectContainer={selectContainer}
DeleteContainer={() => {}}
AddContainer={() => {}}

54
src/Components/ElementsSidebar/ElementsSidebar.tsx
View file

@ -13,7 +13,7 @@ interface IElementsSidebarProps {
isOpen: boolean
isHistoryOpen: boolean
SelectedContainer: IContainerModel | null
onPropertyChange: (key: string, value: string) => void
OnPropertyChange: (key: string, value: string | number | boolean) => void
SelectContainer: (container: IContainerModel) => void
DeleteContainer: (containerid: string) => void
AddContainer: (index: number, type: string, parent: string) => void
@ -71,40 +71,39 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
// Event listeners
React.useEffect(() => {
const onContextMenu = (event: MouseEvent): void => handleRightClick(
event,
setIsContextMenuOpen,
setOnClickContainerId,
setContextMenuPosition
);
const onLeftClick = (): void => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickContainerId
);
elementRef.current?.addEventListener(
'contextmenu',
(event) => handleRightClick(
event,
setIsContextMenuOpen,
setOnClickContainerId,
setContextMenuPosition
));
onContextMenu
);
window.addEventListener(
'click',
(event) => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickContainerId
));
onLeftClick
);
return () => {
elementRef.current?.addEventListener(
elementRef.current?.removeEventListener(
'contextmenu',
(event) => handleRightClick(
event,
setIsContextMenuOpen,
setOnClickContainerId,
setContextMenuPosition
));
onContextMenu
);
window.removeEventListener(
'click',
(event) => handleLeftClick(
isContextMenuOpen,
setIsContextMenuOpen,
setOnClickContainerId
));
onLeftClick
);
};
}, []);
@ -141,9 +140,12 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
y={contextMenuPosition.y}
isOpen={isContextMenuOpen}
>
<MenuItem className='contextmenu-item' text='Delete' onClick={() => props.DeleteContainer(onClickContainerId)} />
<MenuItem className='contextmenu-item' text='Delete' onClick={() => {
setIsContextMenuOpen(false);
props.DeleteContainer(onClickContainerId);
}} />
</Menu>
<Properties properties={props.SelectedContainer?.properties} onChange={props.onPropertyChange}></Properties>
<Properties properties={props.SelectedContainer?.properties} onChange={props.OnPropertyChange}></Properties>
</div>
);
};