diff --git a/src/Components/ElementsSidebar/ElementsSidebar.tsx b/src/Components/ElementsSidebar/ElementsSidebar.tsx index 0159b4d..47a2379 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.tsx +++ b/src/Components/ElementsSidebar/ElementsSidebar.tsx @@ -87,41 +87,12 @@ export class ElementsSidebar extends React.PureComponent public handleDragOver(event: React.DragEvent): void { 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 { event.preventDefault(); const type = event.dataTransfer.getData('type'); const target: HTMLButtonElement = event.target as HTMLButtonElement; - removeBorderClasses(target); if (this.props.MainContainer === null) { throw new Error('[handleOnDrop] Tried to drop into the tree without a required MainContainer!'); @@ -203,7 +174,7 @@ export class ElementsSidebar extends React.PureComponent const selectedClass: string = this.props.SelectedContainer !== undefined && this.props.SelectedContainer !== null && this.props.SelectedContainer.properties.id === container.properties.id - ? 'border-l-4 bg-slate-400/60 hover:bg-slate-400' + ? 'border-l-4 border-blue-500 bg-slate-400/60 hover:bg-slate-400' : 'bg-slate-300/60 hover:bg-slate-300'; containerRows.push( duration: 0.150 }} className={ - `w-full border-blue-500 elements-sidebar-row whitespace-pre + `w-full elements-sidebar-row whitespace-pre text-left text-sm font-medium transition-all ${selectedClass}` } id={key} key={key} onDrop={(event) => this.handleOnDrop(event)} onDragOver={(event) => this.handleDragOver(event)} - onDragLeave={(event) => handleDragLeave(event)} - onClick={() => this.props.SelectContainer(container)} - > + onClick={() => this.props.SelectContainer(container)}> { text } ); @@ -251,14 +220,3 @@ export class ElementsSidebar extends React.PureComponent ); } } - -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); -} diff --git a/src/Editor.tsx b/src/Editor.tsx index b983744..e085355 100644 --- a/src/Editor.tsx +++ b/src/Editor.tsx @@ -248,11 +248,9 @@ class Editor extends React.Component { } let x = 0; - if (index !== 0) { - const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1); - if (lastChild !== undefined) { - x = lastChild.properties.x + Number(lastChild.properties.width); - } + const lastChild: IContainerModel | undefined = parentClone.children.at(-1); + if (lastChild !== undefined) { + x = lastChild.properties.x + Number(lastChild.properties.width); } // Create the container