fix(annotation): Die klassenbasierte Struktur wurde entfernt und die Methode createSignature in die Methode createAnnotations integriert.
This commit is contained in:
Developer 02
@@ -1,32 +1,8 @@
|
||||
class Annotation {
|
||||
static async createAnnotations(document, instance) {
|
||||
const signatures = []
|
||||
|
||||
async function createAnnotations(document, instance) {
|
||||
const signatures = [];
|
||||
|
||||
for (var element of document.elements) {
|
||||
const [annotation, formField, annotation_date, formFieldDate, annotation_city, formFieldCity, annotation_position, formFieldPosition, annotation_date_label, formFieldDateLabel, annotation_city_label, formFieldCityLabel, annotation_position_label, formFieldPositionLabel] = await Annotation.createSignature(element)
|
||||
signatures.push(annotation)
|
||||
signatures.push(formField)
|
||||
signatures.push(annotation_date)
|
||||
signatures.push(formFieldDate)
|
||||
signatures.push(annotation_city)
|
||||
signatures.push(formFieldCity)
|
||||
signatures.push(annotation_position)
|
||||
signatures.push(formFieldPosition)
|
||||
|
||||
signatures.push(annotation_date_label)
|
||||
signatures.push(formFieldDateLabel)
|
||||
|
||||
signatures.push(annotation_city_label)
|
||||
signatures.push(formFieldCityLabel)
|
||||
|
||||
signatures.push(annotation_position_label)
|
||||
signatures.push(formFieldPositionLabel)
|
||||
}
|
||||
|
||||
await instance.create(signatures)
|
||||
}
|
||||
|
||||
static async createSignature(element) {
|
||||
for(var element of document.elements) {
|
||||
const annotParams = await getAnnotationParams(element.left, element.top);
|
||||
const page = element.page - 1
|
||||
|
||||
@@ -179,167 +155,148 @@
|
||||
readOnly: true
|
||||
})
|
||||
|
||||
return [annotation, formField, annotation_date, formFieldDate, annotation_city, formFieldCity, annotation_position, formFieldPosition, annotation_date_label, formFieldDateLabel, annotation_city_label, formFieldCityLabel, annotation_position_label, formFieldPositionLabel]
|
||||
signatures.push(annotation)
|
||||
signatures.push(formField)
|
||||
signatures.push(annotation_date)
|
||||
signatures.push(formFieldDate)
|
||||
signatures.push(annotation_city)
|
||||
signatures.push(formFieldCity)
|
||||
signatures.push(annotation_position)
|
||||
signatures.push(formFieldPosition)
|
||||
|
||||
signatures.push(annotation_date_label)
|
||||
signatures.push(formFieldDateLabel)
|
||||
|
||||
signatures.push(annotation_city_label)
|
||||
signatures.push(formFieldCityLabel)
|
||||
|
||||
signatures.push(annotation_position_label)
|
||||
signatures.push(formFieldPositionLabel)
|
||||
}
|
||||
|
||||
static createTextBox(element) {
|
||||
const id = PSPDFKit.generateInstantId()
|
||||
const width = Annotation.inchToPoint(element.width)
|
||||
const height = Annotation.inchToPoint(element.height)
|
||||
const top = Annotation.inchToPoint(element.top) - height / 2
|
||||
const left = Annotation.inchToPoint(element.left) - width / 2
|
||||
const page = element.page - 1
|
||||
await instance.create(signatures);
|
||||
}
|
||||
|
||||
//shift
|
||||
top += height + 10
|
||||
|
||||
const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
|
||||
id: id,
|
||||
pageIndex: page,
|
||||
formFieldName: id,
|
||||
backgroundColor: PSPDFKit.Color.YELLOW,
|
||||
blendMode: 'multiply',
|
||||
boundingBox: new PSPDFKit.Geometry.Rect({
|
||||
width,
|
||||
height,
|
||||
top,
|
||||
left,
|
||||
}),
|
||||
})
|
||||
|
||||
const formField = new PSPDFKit.FormFields.SignatureFormField({
|
||||
name: id,
|
||||
annotationIds: PSPDFKit.Immutable.List([annotation.id]),
|
||||
})
|
||||
|
||||
return [annotation, formField]
|
||||
}
|
||||
|
||||
static async getAnnotations(instance) {
|
||||
const array = await Promise.all(
|
||||
Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
|
||||
instance.getAnnotations(pageIndex)
|
||||
)
|
||||
async function getAnnotations(instance) {
|
||||
const array = await Promise.all(
|
||||
Array.from({ length: instance.totalPageCount }).map((_, pageIndex) =>
|
||||
instance.getAnnotations(pageIndex)
|
||||
)
|
||||
)
|
||||
|
||||
return array.flatMap((annotations) =>
|
||||
annotations.reduce((acc, annotation) => acc.concat(annotation), [])
|
||||
)
|
||||
}
|
||||
return array.flatMap((annotations) =>
|
||||
annotations.reduce((acc, annotation) => acc.concat(annotation), [])
|
||||
)
|
||||
}
|
||||
|
||||
static async deleteAnnotations(instance) {
|
||||
const allAnnotations = await Annotation.getAnnotations(instance)
|
||||
const pageAnnotations = allAnnotations.filter(Annotation.isSignature)
|
||||
//deleting all Annotations
|
||||
return await instance.delete(pageAnnotations)
|
||||
}
|
||||
async function deleteAnnotations(instance) {
|
||||
const allAnnotations = await getAnnotations(instance)
|
||||
const pageAnnotations = allAnnotations.filter(isSignature)
|
||||
//deleting all Annotations
|
||||
return await instance.delete(pageAnnotations)
|
||||
}
|
||||
|
||||
static async validateAnnotations(instance) {
|
||||
const allAnnotations = await Annotation.getAnnotations(instance)
|
||||
const pageAnnotations = allAnnotations
|
||||
.map((annotation) => {
|
||||
return annotation
|
||||
})
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
static isSignature(annotation) {
|
||||
return !!annotation.isSignature || annotation.description == 'FRAME'
|
||||
}
|
||||
|
||||
static createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
|
||||
const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
|
||||
pageIndex: pageIndex,
|
||||
isSignature: false,
|
||||
readOnly: true,
|
||||
locked: true,
|
||||
lockedContents: true,
|
||||
contentType: 'image/png',
|
||||
imageAttachmentId,
|
||||
description: 'FRAME',
|
||||
boundingBox: boundingBox,
|
||||
async function validateAnnotations(instance) {
|
||||
const allAnnotations = await getAnnotations(instance)
|
||||
const pageAnnotations = allAnnotations
|
||||
.map((annotation) => {
|
||||
return annotation
|
||||
})
|
||||
return frameAnnotation
|
||||
}
|
||||
|
||||
static async createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) {
|
||||
Comp.SignatureProgress.SignedCount += 1;
|
||||
const canvas = document.createElement('canvas')
|
||||
const scale = 4
|
||||
const fontSize = 10
|
||||
return true
|
||||
}
|
||||
|
||||
canvas.width = width * scale
|
||||
canvas.height = height * scale
|
||||
function isSignature(annotation) {
|
||||
return !!annotation.isSignature || annotation.description == 'FRAME'
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
// This supposedly makes the lines and text less blurry
|
||||
// See: https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
|
||||
ctx.translate(0.5, 0.5)
|
||||
function createImageAnnotation(boundingBox, pageIndex, imageAttachmentId) {
|
||||
const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
|
||||
pageIndex: pageIndex,
|
||||
isSignature: false,
|
||||
readOnly: true,
|
||||
locked: true,
|
||||
lockedContents: true,
|
||||
contentType: 'image/png',
|
||||
imageAttachmentId,
|
||||
description: 'FRAME',
|
||||
boundingBox: boundingBox,
|
||||
})
|
||||
return frameAnnotation
|
||||
}
|
||||
|
||||
// This also should make the lines and text less blurry
|
||||
ctx.textRendering = "geometricPrecision"
|
||||
async function createAnnotationFrameBlob(receiverName, receiverSignature, timestamp, width, height) {
|
||||
Comp.SignatureProgress.SignedCount += 1;
|
||||
const canvas = document.createElement('canvas')
|
||||
const scale = 4
|
||||
const fontSize = 10
|
||||
|
||||
const date = timestamp
|
||||
const dateString = date.toLocaleString('de-DE')
|
||||
canvas.width = width * scale
|
||||
canvas.height = height * scale
|
||||
|
||||
const signatureLength = 100 * scale
|
||||
const signatureString = receiverSignature.substring(0, 15) + "…"
|
||||
const ctx = canvas.getContext('2d')
|
||||
// This supposedly makes the lines and text less blurry
|
||||
// See: https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
|
||||
ctx.translate(0.5, 0.5)
|
||||
|
||||
ctx.beginPath()
|
||||
// This also should make the lines and text less blurry
|
||||
ctx.textRendering = "geometricPrecision"
|
||||
|
||||
ctx.moveTo(30 * scale, 10 * scale)
|
||||
ctx.lineTo(signatureLength, 10 * scale)
|
||||
const date = timestamp
|
||||
const dateString = date.toLocaleString('de-DE')
|
||||
|
||||
ctx.moveTo(30 * scale, 10 * scale)
|
||||
ctx.arcTo(10 * scale, 10 * scale, 10 * scale, 30 * scale, 20 * scale)
|
||||
const signatureLength = 100 * scale
|
||||
const signatureString = receiverSignature.substring(0, 15) + "…"
|
||||
|
||||
ctx.moveTo(10 * scale, 30 * scale)
|
||||
ctx.arcTo(10 * scale, 50 * scale, 30 * scale, 50 * scale, 20 * scale)
|
||||
ctx.beginPath()
|
||||
|
||||
ctx.moveTo(30 * scale, 50 * scale)
|
||||
ctx.lineTo(signatureLength, 50 * scale)
|
||||
ctx.moveTo(30 * scale, 10 * scale)
|
||||
ctx.lineTo(signatureLength, 10 * scale)
|
||||
|
||||
ctx.strokeStyle = 'darkblue'
|
||||
ctx.stroke()
|
||||
ctx.moveTo(30 * scale, 10 * scale)
|
||||
ctx.arcTo(10 * scale, 10 * scale, 10 * scale, 30 * scale, 20 * scale)
|
||||
|
||||
ctx.fillStyle = 'black'
|
||||
ctx.font = `${fontSize * scale}px sans-serif`
|
||||
ctx.fillText('Signed by', 15 * scale, 10 * scale)
|
||||
ctx.fillText(receiverName, 15 * scale, 60 * scale)
|
||||
ctx.fillText(signatureString, 15 * scale, 70 * scale)
|
||||
ctx.moveTo(10 * scale, 30 * scale)
|
||||
ctx.arcTo(10 * scale, 50 * scale, 30 * scale, 50 * scale, 20 * scale)
|
||||
|
||||
return new Promise((resolve) => {
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
resolve(url)
|
||||
})
|
||||
ctx.moveTo(30 * scale, 50 * scale)
|
||||
ctx.lineTo(signatureLength, 50 * scale)
|
||||
|
||||
ctx.strokeStyle = 'darkblue'
|
||||
ctx.stroke()
|
||||
|
||||
ctx.fillStyle = 'black'
|
||||
ctx.font = `${fontSize * scale}px sans-serif`
|
||||
ctx.fillText('Signed by', 15 * scale, 10 * scale)
|
||||
ctx.fillText(receiverName, 15 * scale, 60 * scale)
|
||||
ctx.fillText(signatureString, 15 * scale, 70 * scale)
|
||||
|
||||
return new Promise((resolve) => {
|
||||
canvas.toBlob((blob) => {
|
||||
const url = URL.createObjectURL(blob)
|
||||
resolve(url)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static inchToPoint(inch) {
|
||||
return inch * 72
|
||||
}
|
||||
//required
|
||||
requiredFieldNames = new Array()
|
||||
|
||||
//required
|
||||
static #requiredFieldNames = new Array()
|
||||
function markFieldAsRequired(formField) {
|
||||
requiredFieldNames.push(formField.name)
|
||||
}
|
||||
|
||||
static markFieldAsRequired(formField) {
|
||||
this.#requiredFieldNames.push(formField.name)
|
||||
}
|
||||
function isFieldRequired(formField) {
|
||||
return requiredFieldNames.includes(formField.name)
|
||||
}
|
||||
|
||||
static isFieldRequired(formField) {
|
||||
return this.#requiredFieldNames.includes(formField.name)
|
||||
}
|
||||
//city
|
||||
cityFieldNames = new Array()
|
||||
|
||||
//city
|
||||
static #cityFieldNames = new Array()
|
||||
function markFieldAsCity(formField) {
|
||||
cityFieldNames.push(formField.name)
|
||||
}
|
||||
|
||||
static markFieldAsCity(formField) {
|
||||
this.#cityFieldNames.push(formField.name)
|
||||
}
|
||||
|
||||
static isCityField(formField) {
|
||||
return this.#cityFieldNames.includes(formField.name)
|
||||
}
|
||||
function isCityField(formField) {
|
||||
return cityFieldNames.includes(formField.name)
|
||||
}
|
||||
Reference in New Issue
Block a user