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

[Update] Amélioration simple du DragNDrop : correction du bg color sur l'item selected et offset de la dragimage pour ne pas gêner

Browse source
This commit is contained in:
Carl Fuchs 2023-02-08 16:01:32 +01:00 • committed by Eric NGUYEN
parent f0b89ea05e
commit 982a066770
2 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/Components/Components/Components.tsx
View file

@ -19,7 +19,9 @@ interface IComponentsProps {
} }
function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void { function HandleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id); const element = event.target as HTMLButtonElement;
event.dataTransfer.setData('type', element.id);
event.dataTransfer.setDragImage(element, 0, 0);
} }
interface SidebarCategory { interface SidebarCategory {

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

@ -34,6 +34,7 @@ function RemoveBorderClasses(target: HTMLButtonElement, exception: string = ''):
function HandleDragLeave(event: React.DragEvent): void { function HandleDragLeave(event: React.DragEvent): void {
const target: HTMLButtonElement = event.target as HTMLButtonElement; const target: HTMLButtonElement = event.target as HTMLButtonElement;
RemoveBorderClasses(target); RemoveBorderClasses(target);
} }
@ -43,6 +44,7 @@ function HandleDragOver(
): void { ): void {
event.preventDefault(); event.preventDefault();
const target: HTMLButtonElement = event.target as HTMLButtonElement; const target: HTMLButtonElement = event.target as HTMLButtonElement;
const rect = target.getBoundingClientRect(); const rect = target.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element. const y = event.clientY - rect.top; // y position within the element.
@ -193,7 +195,7 @@ export function ElementsSidebar(props: IElementsSidebarProps): JSX.Element {
</div> </div>
<List <List
itemCount={containers.length} itemCount={containers.length}
itemSize={35} itemSize={40}
height={height} height={height}
width={'100%'} width={'100%'}
> >
@ -228,7 +230,7 @@ function ElementsListRow(
} }
const buttonSelectedClass: string = isSelected const buttonSelectedClass: string = isSelected
? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 hover:shadow-blue-500 text-slate-50' ? 'bg-blue-500 shadow-lg shadow-blue-500/60 hover:bg-blue-600 border-blue-600 hover:shadow-blue-500 text-slate-50'
: 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400'; : 'bg-slate-300/60 hover:bg-slate-400 hover:shadow-slate-400';
return <button type="button" return <button type="button"