blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases 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; color: string;
type: string; type: string;
position: any; position: any;
positionX: number;
positionY: number;
id: string; id: string;
recipient: string; recipient: string;
}; };
@@ -18,9 +20,10 @@ type FieldPropsType = {
export default function Field(props: FieldPropsType) { export default function Field(props: FieldPropsType) {
const [field, setField]: any = useState(props.field); const [field, setField]: any = useState(props.field);
const [position, setPosition]: any = useState( const [position, setPosition]: any = useState({
props.field.position || { x: 0, y: -842 } x: props.field.positionX,
); y: props.field.positionY,
});
const nodeRef = React.createRef<HTMLDivElement>(); const nodeRef = React.createRef<HTMLDivElement>();
const onControlledDrag = (e: any, position: any) => { const onControlledDrag = (e: any, position: any) => {
const { x, y } = position; const { x, y } = position;
@@ -41,11 +44,12 @@ export default function Field(props: FieldPropsType) {
position={position} position={position}
onDrag={onControlledDrag} onDrag={onControlledDrag}
onStop={onDragStop} onStop={onDragStop}
defaultPosition={{ x: 0, y: 0 }}
> >
<div <div
ref={nodeRef} ref={nodeRef}
style={{ background: stc(props.field.recipient) }} 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"> <div className="m-auto w-auto flex-row-reverse text-lg font-bold text-center">
{/* todo icons */} {/* 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) { export default function PDFEditor(props: any) {
const [selectedValue, setSelectedValue] = useState(""); const [selectedValue, setSelectedValue] = useState("");
const [fields, setFields] = useState<any[]>([]); const [fields, setFields] = useState<any[]>(props.document.Field);
const router = useRouter(); const router = useRouter();
function onPositionChangedHandler(position: any, id: any) { function onPositionChangedHandler(position: any, id: any) {
if (!position) return; if (!position) return;
const newFields = [...fields]; 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 // no instant redraw neccessary, postion information for saving or later rerender is enough
// setFields(newFields); // setFields(newFields);
@@ -53,7 +54,8 @@ export default function PDFEditor(props: any) {
id: short.generate().toString(), id: short.generate().toString(),
page: 0, page: 0,
type: "signature", type: "signature",
position: { x: 0, y: -842 }, positionX: 0,
positionY: 0,
recipient: selectedValue, recipient: selectedValue,
}) })
); );

1
packages/lib/query/getDocument.ts
View File

@@ -19,6 +19,7 @@ export const getDocument = async (
}, },
include: { include: {
Recipient: true, Recipient: true,
Field: true,
}, },
}); });