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

Compare commits

base: Siklos:a0870cf25cfd254b9c3db0c86e4e6141b31ac17c
Branches Tags
Siklos:master
Siklos:dev
Siklos:tauri
Siklos:docs
Siklos:dev.tests
..
compare: Siklos:4c10b0f8d77bfbf876130304f12541e3fd7a4f59
Branches Tags
Siklos:master
Siklos:dev
Siklos:tauri
Siklos:docs
Siklos:dev.tests

No commits in common. "a0870cf25cfd254b9c3db0c86e4e6141b31ac17c" and "4c10b0f8d77bfbf876130304f12541e3fd7a4f59" have entirely different histories.
a0870cf25c ... 4c10b0f8d7

2 changed files with 6 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -87,41 +87,12 @@ 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!');
@ -203,7 +174,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 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'; : 'bg-slate-300/60 hover:bg-slate-300';
containerRows.push( containerRows.push(
<motion.button <motion.button
@ -215,16 +186,14 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
duration: 0.150 duration: 0.150
}} }}
className={ 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}` 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)}
onDragLeave={(event) => handleDragLeave(event)} onClick={() => this.props.SelectContainer(container)}>
onClick={() => this.props.SelectContainer(container)}
>
{ text } { text }
</motion.button> </motion.button>
); );
@ -251,14 +220,3 @@ 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);
}

8
src/Editor.tsx
View file

@ -248,11 +248,9 @@ class Editor extends React.Component<IEditorProps> {
} }
let x = 0; let x = 0;
if (index !== 0) { const lastChild: IContainerModel | undefined = parentClone.children.at(-1);
const lastChild: IContainerModel | undefined = parentClone.children.at(index - 1); if (lastChild !== undefined) {
if (lastChild !== undefined) { x = lastChild.properties.x + Number(lastChild.properties.width);
x = lastChild.properties.x + Number(lastChild.properties.width);
}
} }
// Create the container // Create the container