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

Merged PR 167: Add Flex and fix bugs (read desc)

Browse source 
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 2022-08-25 13:28:32 +00:00
parent ec3fddec9d
commit 7f3f6a489a
43 changed files with 1127 additions and 453 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -5,10 +5,10 @@ import { IContainerModel } from '../../Interfaces/IContainerModel';
import { getDepth, MakeIterator } from '../../utils/itertools';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
import { handleDragLeave, handleDragOver, handleLeftClick, handleOnDrop, handleRightClick, useMouseEvents } from './MouseEventHandlers';
import { useMouseEvents } from './MouseEventHandlers';
import { IPoint } from '../../Interfaces/IPoint';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { Dispatch, RefObject, SetStateAction } from 'react';
import { PropertyType } from '../../Enums/PropertyType';
interface IElementsSidebarProps {
MainContainer: IContainerModel
@ -16,16 +16,23 @@ interface IElementsSidebarProps {
isOpen: boolean
isHistoryOpen: boolean
SelectedContainer: IContainerModel | undefined
OnPropertyChange: (key: string, value: string | number | boolean, isStyle?: boolean) => void
OnPropertyChange: (
key: string,
value: string | number | boolean,
type?: PropertyType
) => void
SelectContainer: (containerId: string) => void
DeleteContainer: (containerid: string) => void
AddContainer: (index: number, type: string, parent: string) => void
}
export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElementsSidebarProps): JSX.Element => {
export const ElementsSidebar: React.FC<IElementsSidebarProps> = (
props: IElementsSidebarProps
): JSX.Element => {
// States
const [isContextMenuOpen, setIsContextMenuOpen] = React.useState<boolean>(false);
const [onClickContainerId, setOnClickContainerId] = React.useState<string>('');
const [isContextMenuOpen, setIsContextMenuOpen] =
React.useState<boolean>(false);
const [onClickContainerId, setOnClickContainerId] =
React.useState<string>('');
const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
x: 0,
y: 0
@ -45,71 +52,78 @@ export const ElementsSidebar: React.FC<IElementsSidebarProps> = (props: IElement
// Render
let isOpenClasses = '-right-64';
if (props.isOpen) {
isOpenClasses = props.isHistoryOpen
? 'right-64'
: 'right-0';
isOpenClasses = props.isHistoryOpen ? 'right-64' : 'right-0';
}
const it = MakeIterator(props.MainContainer);
const containers = [...it];
const Row = ({ index, style }: {index: number, style: React.CSSProperties}): JSX.Element => {
const Row = ({
index,
style
}: {
index: number
style: React.CSSProperties
}): JSX.Element => {
const container = containers[index];
const depth: number = getDepth(container);
const key = container.properties.id.toString();
const text = container.properties.displayedText === key
? `${'|\t'.repeat(depth)} ${key}`
: `${'|\t'.repeat(depth)} ${container.properties.displayedText} (${key})`;
const selectedClass: string = props.SelectedContainer !== undefined &&
props.SelectedContainer !== null &&
props.SelectedContainer.properties.id === container.properties.id
? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300';
const text =
container.properties.displayedText === key
? `${'|\t'.repeat(depth)} ${key}`
: `${'|\t'.repeat(depth)} ${
container.properties.displayedText
} (${key})`;
const selectedClass: string =
props.SelectedContainer !== undefined &&
props.SelectedContainer !== null &&
props.SelectedContainer.properties.id === container.properties.id
? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300';
return (
<button
className={
`w-full border-blue-500 elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`
}
className={`w-full border-blue-500 elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}`}
id={key}
key={key}
style={style}
onDrop={(event) => handleOnDrop(event, props.MainContainer, props.AddContainer)}
onDragOver={(event) => handleDragOver(event, props.MainContainer)}
onDragLeave={(event) => handleDragLeave(event)}
onClick={() => props.SelectContainer(container.properties.id)}
>
{ text }
{text}
</button>
);
};
return (
<div className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
<div className='bg-slate-100 font-bold sidebar-title'>
Elements
</div>
<div ref={elementRef} className='h-96 text-gray-800'>
<div
className={`fixed flex flex-col bg-slate-100 text-gray-800 transition-all h-full w-64 overflow-y-auto z-20 ${isOpenClasses}`}
>
<div className="bg-slate-100 font-bold sidebar-title">Elements</div>
<div ref={elementRef} className="h-96 text-gray-800">
<List
className='List divide-y divide-black'
className="List divide-y divide-black"
itemCount={containers.length}
itemSize={35}
height={384}
width={256}
>
{ Row }
{Row}
</List>
</div>
<Menu
className='transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl'
className="transition-opacity rounded bg-slate-200 py-1 drop-shadow-xl"
x={contextMenuPosition.x}
y={contextMenuPosition.y}
isOpen={isContextMenuOpen}
>
<MenuItem className='contextmenu-item' text='Delete' onClick={() => {
setIsContextMenuOpen(false);
props.DeleteContainer(onClickContainerId);
}} />
<MenuItem
className="contextmenu-item"
text="Delete"
onClick={() => {
setIsContextMenuOpen(false);
props.DeleteContainer(onClickContainerId);
}}
/>
</Menu>
<Properties
properties={props.SelectedContainer?.properties}