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

Merged PR 167: Add Flex and fix bugs (read desc)

Browse source 
Note: The branch name does not fit the new features.

- Implement Flex with simplex
- Enable rigid body by default (removed IsRigidBody property) <=== possibly a bad idea
- Sort children in add and update properties
- Implement MaxWidth
- Add more docs

Fixes :
- .env.production url
- Symbols: not blocking the linked container when the parent is moving
This commit is contained in:
Eric Nguyen 2022-08-25 13:28:32 +00:00
parent ec3fddec9d
commit 7f3f6a489a
43 changed files with 1127 additions and 453 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/Components/ElementsSidebar/MouseEventHandlers.ts
View file

@ -1,7 +1,5 @@
import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { IPoint } from '../../Interfaces/IPoint';
import { findContainerById } from '../../utils/itertools';
export function useMouseEvents(
isContextMenuOpen: boolean,
@ -81,95 +79,3 @@ export function handleLeftClick(
setOnClickContainerId('');
}
export function removeBorderClasses(target: HTMLButtonElement): void {
const bordersClasses = ['border-t-8', 'border-8', 'border-b-8'];
target.classList.remove(...bordersClasses);
}
export function handleDragLeave(event: React.DragEvent): void {
const target: HTMLButtonElement = event.target as HTMLButtonElement;
removeBorderClasses(target);
}
export function handleDragOver(
event: React.DragEvent,
mainContainer: IContainerModel
): 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.
removeBorderClasses(target);
if (target.id === mainContainer.properties.id) {
target.classList.add('border-8');
return;
}
if (y < 12) {
target.classList.add('border-t-8');
} else if (y < 24) {
target.classList.add('border-8');
} else {
target.classList.add('border-b-8');
}
}
export function handleOnDrop(
event: React.DragEvent,
mainContainer: IContainerModel,
addContainer: (index: number, type: string, parent: string) => void
): void {
event.preventDefault();
const type = event.dataTransfer.getData('type');
const target: HTMLButtonElement = event.target as HTMLButtonElement;
removeBorderClasses(target);
const targetContainer: IContainerModel | undefined = findContainerById(
mainContainer,
target.id
);
if (targetContainer === undefined) {
throw new Error('[handleOnDrop] Tried to drop onto a unknown container!');
}
if (targetContainer === mainContainer) {
// if the container is the root, only add type as child
addContainer(
targetContainer.children.length,
type,
targetContainer.properties.id);
return;
}
if (targetContainer.parent === null ||
targetContainer.parent === undefined) {
throw new Error('[handleDrop] Tried to drop into a child container without a parent!');
}
const rect = target.getBoundingClientRect();
const y = event.clientY - rect.top; // y position within the element.
// locate the hitboxes
if (y < 12) {
const index = targetContainer.parent.children.indexOf(targetContainer);
addContainer(
index,
type,
targetContainer.parent.properties.id
);
} else if (y < 24) {
addContainer(
targetContainer.children.length,
type,
targetContainer.properties.id);
} else {
const index = targetContainer.parent.children.indexOf(targetContainer);
addContainer(
index + 1,
type,
targetContainer.parent.properties.id
);
}
}