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 {
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<IElementsSidebarProps>
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(
<motion.button
@ -215,16 +186,14 @@ export class ElementsSidebar extends React.PureComponent<IElementsSidebarProps>
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 }
</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;
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