🚧 field positions

This commit is contained in:
Timur Ercan
2023-02-14 12:28:33 +01:00
parent 3bca832720
commit 8f17f18d0a
3 changed files with 14 additions and 7 deletions

View File

@ -10,6 +10,8 @@ type FieldPropsType = {
color: string;
type: string;
position: any;
positionX: number;
positionY: number;
id: string;
recipient: string;
};
@ -18,9 +20,10 @@ type FieldPropsType = {
export default function Field(props: FieldPropsType) {
const [field, setField]: any = useState(props.field);
const [position, setPosition]: any = useState(
props.field.position || { x: 0, y: -842 }
);
const [position, setPosition]: any = useState({
x: props.field.positionX,
y: props.field.positionY,
});
const nodeRef = React.createRef<HTMLDivElement>();
const onControlledDrag = (e: any, position: any) => {
const { x, y } = position;
@ -41,11 +44,12 @@ export default function Field(props: FieldPropsType) {
position={position}
onDrag={onControlledDrag}
onStop={onDragStop}
defaultPosition={{ x: 0, y: 0 }}
>
<div
ref={nodeRef}
style={{ background: stc(props.field.recipient) }}
className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute"
className="cursor-move opacity-80 p-2 m-auto w-auto flex-row-reverse text-lg font-bold text-center absolute top-0 left-0"
>
<div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
{/* todo icons */}