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

Implement drag-drop feedback
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source
This commit is contained in:
Siklos 2022-08-09 12:05:47 +02:00
parent 581f1ca77e
commit a0870cf25c
1 changed files with 45 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -87,12 +87,41 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
public handleDragOver(event: React.DragEvent): void { public handleDragOver(event: React.DragEvent): void {
event.preventDefault(); event.preventDefault();
const target: HTMLButtonElement = event.target as HTMLButtonElement;
const rect = target.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element.
if (this.props.MainContainer === null) {
throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!');
}
if (target.id === this.props.MainContainer.properties.id) {
target.classList.add('border-8');
target.classList.remove('border-t-8');
target.classList.remove('border-b-8');
return;
}
if (y < 12) {
target.classList.add('border-t-8');
target.classList.remove('border-b-8');
target.classList.remove('border-8');
} else if (y < 24) {
target.classList.add('border-8');
target.classList.remove('border-t-8');
target.classList.remove('border-b-8');
} else {
target.classList.add('border-b-8');
target.classList.remove('border-8');
target.classList.remove('border-t-8');
}
} }
public handleOnDrop(event: React.DragEvent): void { public handleOnDrop(event: React.DragEvent): void {
event.preventDefault(); event.preventDefault();
const type = event.dataTransfer.getData('type'); const type = event.dataTransfer.getData('type');
const target: HTMLButtonElement = event.target as HTMLButtonElement; const target: HTMLButtonElement = event.target as HTMLButtonElement;
removeBorderClasses(target);
if (this.props.MainContainer === null) { if (this.props.MainContainer === null) {
throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!'); throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!');
@ -174,7 +203,7 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
const selectedClass: string = this.props.SelectedContainer !== undefined && const selectedClass: string = this.props.SelectedContainer !== undefined &&
this.props.SelectedContainer !== null && this.props.SelectedContainer !== null &&
this.props.SelectedContainer.properties.id === container.properties.id this.props.SelectedContainer.properties.id === container.properties.id
? 'border-l-4 border-blue-500 bg-slate-400/60 hover:bg-slate-400' ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400'
: 'bg-slate-300/60 hover:bg-slate-300'; : 'bg-slate-300/60 hover:bg-slate-300';
containerRows.push( containerRows.push(
<motion.button <motion.button
@ -186,14 +215,16 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
duration: 0.150 duration: 0.150
}} }}
className={ className={
`w-full elements-sidebar-row whitespace-pre `w-full border-blue-500 elements-sidebar-row whitespace-pre
text-left text-sm font-medium transition-all ${selectedClass}` text-left text-sm font-medium transition-all ${selectedClass}`
} }
id={key} id={key}
key={key} key={key}
onDrop={(event) => this.handleOnDrop(event)} onDrop={(event) => this.handleOnDrop(event)}
onDragOver={(event) => this.handleDragOver(event)} onDragOver={(event) => this.handleDragOver(event)}
onClick={() => this.props.SelectContainer(container)}> onDragLeave={(event) => handleDragLeave(event)}
onClick={() => this.props.SelectContainer(container)}
>
{ text } { text }
</motion.button> </motion.button>
); );
@ -220,3 +251,14 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
); );
} }
} }
function removeBorderClasses(target: HTMLButtonElement): void {
target.classList.remove('border-t-8');
target.classList.remove('border-8');
target.classList.remove('border-b-8');
}
function handleDragLeave(event: React.DragEvent): void {
const target: HTMLButtonElement = event.target as HTMLButtonElement;
removeBorderClasses(target);
}