Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-14 00:32:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

🚧 field positions

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/components/editor/field.tsx
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 */}

8
apps/web/components/editor/pdf-editor.tsx
View File

@ -12,13 +12,14 @@ const PDFViewer = dynamic(() => import("./pdf-viewer"), {
export default function PDFEditor(props: any) {
const [selectedValue, setSelectedValue] = useState("");
const [fields, setFields] = useState<any[]>([]);
const [fields, setFields] = useState<any[]>(props.document.Field);
const router = useRouter();
function onPositionChangedHandler(position: any, id: any) {
if (!position) return;
const newFields = [...fields];
fields.find((e) => e.id == id).position = position;
fields.find((e) => e.id == id).positionX = position.x;
fields.find((e) => e.id == id).positionY = position.y;
// no instant redraw neccessary, postion information for saving or later rerender is enough
// setFields(newFields);
@ -53,7 +54,8 @@ export default function PDFEditor(props: any) {
id: short.generate().toString(),
page: 0,
type: "signature",
position: { x: 0, y: -842 },
positionX: 0,
positionY: 0,
recipient: selectedValue,
})
);