diff --git a/EnvelopeGenerator.Web/Pages/ShowEnvelope.razor b/EnvelopeGenerator.Web/Pages/ShowEnvelope.razor index fdf74efc..78d6f3a0 100644 --- a/EnvelopeGenerator.Web/Pages/ShowEnvelope.razor +++ b/EnvelopeGenerator.Web/Pages/ShowEnvelope.razor @@ -24,7 +24,7 @@ if (firstRender) { var module = await JS.InvokeAsync("import", "./js/app.js"); - await module.InvokeVoidAsync("App.loadPDFFromUrl", "#container", $"/api/download/{document.Id}"); + await module.InvokeVoidAsync("App.loadPDFFromUrl", "#container", document.Id); } } } diff --git a/EnvelopeGenerator.Web/Scripts/app.ts b/EnvelopeGenerator.Web/Scripts/app.ts index 560f5571..6d7cf052 100644 --- a/EnvelopeGenerator.Web/Scripts/app.ts +++ b/EnvelopeGenerator.Web/Scripts/app.ts @@ -1,48 +1,96 @@ //import PSPDFKit, { Instance } from 'index.d.ts'; import PSPDFKitType from "./index"; -import { Instance } from "./index"; - +import { Instance, WidgetAnnotation } from "./index"; declare const PSPDFKit: typeof PSPDFKitType -export class App { - public static loadPDFFromUrl (container: string, url: string): void { - console.log("Loading PSPDFKit.."); +const { List } = PSPDFKit.Immutable; +const { Rect } = PSPDFKit.Geometry; +const { SignatureFormField } = PSPDFKit.FormFields; +const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode; - fetch(url, { credentials: "include" }) - .then(res => res.arrayBuffer()) - .then(arrayBuffer => App.loadPSPDFKit(arrayBuffer, container)) - .then(instance => { - console.log("PSPDFKit loaded!") - console.log(instance) - }) - .catch(error => { - console.error(error.message); - }); + +export class App { + // This function will be called in the ShowEnvelope.razor page + // and will trigger loading of the Editor Interface + public static async loadPDFFromUrl (container: string, documentId: number) { + console.debug("Loading PSPDFKit.."); + + const arrayBuffer = await App.loadDocument(`/api/download/${documentId}`) + const instance = await App.loadPSPDFKit(arrayBuffer, container) + App.configurePSPDFKit(instance) + + console.debug("PSPDFKit configured!") + + const id = PSPDFKit.generateInstantId() + const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0) + + const formField = new SignatureFormField({ + name: id, + annotationIds: List([annotation.id]) + }) + + console.debug("Annotation created.") + + const [createdAnnotation] = await instance.create([annotation, formField]) + + console.debug(createdAnnotation) } - private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string) { - PSPDFKit.load({ + // Makes a call to the supplied url and fetches the binary response as an array buffer + private static loadDocument(url: string): Promise { + return fetch(url, { credentials: "include" }) + .then(res => res.arrayBuffer()) + } + + // Load the PSPDFKit UI by setting a target element as the container to render in + // and a arraybuffer which represents the document that should be displayed. + private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string): Promise { + const annotationPresets = PSPDFKit.defaultAnnotationPresets; + console.log(annotationPresets) + annotationPresets.ink = { + lineWidth: 10 + }; + + return PSPDFKit.load({ container: container, - document: arrayBuffer + document: arrayBuffer, + annotationPresets, + electronicSignatures: { + creationModes: [TYPE, DRAW] + } }) } + private static configurePSPDFKit(instance: Instance) { + instance.addEventListener("annotations.load", (loadedAnnotations) => { + console.log("annotations loaded", loadedAnnotations.toJS()); + }) + + instance.addEventListener("annotations.change", () => { + console.log("annotations changed") + }) + + instance.addEventListener("annotations.create", (createdAnnotations) => { + console.log("annotations created", createdAnnotations.toJS()); + }) + } + + + private static createSignatureAnnotation(id: string, x: number, y: number, top: number, left: number, pageIndex: number): WidgetAnnotation { + const annotation = new PSPDFKit.Annotations.WidgetAnnotation({ + id: id, + pageIndex: pageIndex, + formFieldName: id, + boundingBox: new Rect({ + width: x, + height: y, + top: top, + left: left + }) + }) + + return annotation + } + } -// This function will be called in the ShowEnvelope.razor page -// and will trigger loading of the Editor Interface -//const loadPDFFromUrl = function (container: string, url: string): void { -// console.log("Loading PSPDFKit.."); - -// fetch(url, { credentials: "include" }) -// .then(res => res.arrayBuffer()) -// .then(arrayBuffer => loadPSPDFKit(arrayBuffer, container)) -// .then(configurePSPDFKit) -// .then(instance => { -// console.log("PSPDFKit loaded!") -// }) -// .catch(error => { -// console.error(error.message); -// }); -//} - diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js b/EnvelopeGenerator.Web/wwwroot/js/app.js index 61acb394..0f1d6eb6 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/app.js +++ b/EnvelopeGenerator.Web/wwwroot/js/app.js @@ -1,41 +1,127 @@ +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; +var __generator = (this && this.__generator) || function (thisArg, body) { + var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; + return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; + function verb(n) { return function (v) { return step([n, v]); }; } + function step(op) { + if (f) throw new TypeError("Generator is already executing."); + while (g && (g = 0, op[0] && (_ = 0)), _) try { + if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; + if (y = 0, t) op = [op[0] & 2, t.value]; + switch (op[0]) { + case 0: case 1: t = op; break; + case 4: _.label++; return { value: op[1], done: false }; + case 5: _.label++; y = op[1]; op = [0]; continue; + case 7: op = _.ops.pop(); _.trys.pop(); continue; + default: + if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } + if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } + if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } + if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } + if (t[2]) _.ops.pop(); + _.trys.pop(); continue; + } + op = body.call(thisArg, _); + } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } + if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; + } +}; +var List = PSPDFKit.Immutable.List; +var Rect = PSPDFKit.Geometry.Rect; +var SignatureFormField = PSPDFKit.FormFields.SignatureFormField; +var _a = PSPDFKit.ElectronicSignatureCreationMode, DRAW = _a.DRAW, TYPE = _a.TYPE; var App = /** @class */ (function () { function App() { } - App.loadPDFFromUrl = function (container, url) { - console.log("Loading PSPDFKit.."); - fetch(url, { credentials: "include" }) - .then(function (res) { return res.arrayBuffer(); }) - .then(function (arrayBuffer) { return App.loadPSPDFKit(arrayBuffer, container); }) - .then(function (instance) { - console.log("PSPDFKit loaded!"); - console.log(instance); - }) - .catch(function (error) { - console.error(error.message); + // This function will be called in the ShowEnvelope.razor page + // and will trigger loading of the Editor Interface + App.loadPDFFromUrl = function (container, documentId) { + return __awaiter(this, void 0, void 0, function () { + var arrayBuffer, instance, id, annotation, formField, createdAnnotation; + return __generator(this, function (_a) { + switch (_a.label) { + case 0: + console.debug("Loading PSPDFKit.."); + return [4 /*yield*/, App.loadDocument("/api/download/".concat(documentId))]; + case 1: + arrayBuffer = _a.sent(); + return [4 /*yield*/, App.loadPSPDFKit(arrayBuffer, container)]; + case 2: + instance = _a.sent(); + App.configurePSPDFKit(instance); + console.debug("PSPDFKit configured!"); + id = PSPDFKit.generateInstantId(); + annotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0); + formField = new SignatureFormField({ + name: id, + annotationIds: List([annotation.id]) + }); + console.debug("Annotation created."); + return [4 /*yield*/, instance.create([annotation, formField])]; + case 3: + createdAnnotation = (_a.sent())[0]; + console.debug(createdAnnotation); + return [2 /*return*/]; + } + }); }); }; + // Makes a call to the supplied url and fetches the binary response as an array buffer + App.loadDocument = function (url) { + return fetch(url, { credentials: "include" }) + .then(function (res) { return res.arrayBuffer(); }); + }; + // Load the PSPDFKit UI by setting a target element as the container to render in + // and a arraybuffer which represents the document that should be displayed. App.loadPSPDFKit = function (arrayBuffer, container) { - PSPDFKit.load({ + var annotationPresets = PSPDFKit.defaultAnnotationPresets; + console.log(annotationPresets); + annotationPresets.ink = { + lineWidth: 10 + }; + return PSPDFKit.load({ container: container, - document: arrayBuffer + document: arrayBuffer, + annotationPresets: annotationPresets, + electronicSignatures: { + creationModes: [TYPE, DRAW] + } }); }; + App.configurePSPDFKit = function (instance) { + instance.addEventListener("annotations.load", function (loadedAnnotations) { + console.log("annotations loaded", loadedAnnotations.toJS()); + }); + instance.addEventListener("annotations.change", function () { + console.log("annotations changed"); + }); + instance.addEventListener("annotations.create", function (createdAnnotations) { + console.log("annotations created", createdAnnotations.toJS()); + }); + }; + App.createSignatureAnnotation = function (id, x, y, top, left, pageIndex) { + var annotation = new PSPDFKit.Annotations.WidgetAnnotation({ + id: id, + pageIndex: pageIndex, + formFieldName: id, + boundingBox: new Rect({ + width: x, + height: y, + top: top, + left: left + }) + }); + return annotation; + }; return App; }()); export { App }; -// This function will be called in the ShowEnvelope.razor page -// and will trigger loading of the Editor Interface -//const loadPDFFromUrl = function (container: string, url: string): void { -// console.log("Loading PSPDFKit.."); -// fetch(url, { credentials: "include" }) -// .then(res => res.arrayBuffer()) -// .then(arrayBuffer => loadPSPDFKit(arrayBuffer, container)) -// .then(configurePSPDFKit) -// .then(instance => { -// console.log("PSPDFKit loaded!") -// }) -// .catch(error => { -// console.error(error.message); -// }); -//} //# sourceMappingURL=app.js.map \ No newline at end of file diff --git a/EnvelopeGenerator.Web/wwwroot/js/app.js.map b/EnvelopeGenerator.Web/wwwroot/js/app.js.map index e94f494b..071a42ba 100644 --- a/EnvelopeGenerator.Web/wwwroot/js/app.js.map +++ b/EnvelopeGenerator.Web/wwwroot/js/app.js.map @@ -1 +1 @@ -{"version":3,"file":"app.js","sourceRoot":"","sources":["../../Scripts/app.ts"],"names":[],"mappings":"AAMA;IAAA;IAuBA,CAAC;IAtBiB,kBAAc,GAA5B,UAA8B,SAAiB,EAAE,GAAW;QACxD,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAElC,KAAK,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;aACjC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,EAAE,EAAjB,CAAiB,CAAC;aAC9B,IAAI,CAAC,UAAA,WAAW,IAAI,OAAA,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAxC,CAAwC,CAAC;aAC7D,IAAI,CAAC,UAAA,QAAQ;YACV,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;YAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QACzB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACR,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACX,CAAC;IAEc,gBAAY,GAA3B,UAA4B,WAAwB,EAAE,SAAiB;QACnE,QAAQ,CAAC,IAAI,CAAC;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,WAAW;SACxB,CAAC,CAAA;IACN,CAAC;IAEL,UAAC;AAAD,CAAC,AAvBD,IAuBC;;AAED,8DAA8D;AAC9D,mDAAmD;AACnD,0EAA0E;AAC1E,wCAAwC;AAExC,4CAA4C;AAC5C,yCAAyC;AACzC,oEAAoE;AACpE,kCAAkC;AAClC,6BAA6B;AAC7B,6CAA6C;AAC7C,YAAY;AACZ,2BAA2B;AAC3B,2CAA2C;AAC3C,aAAa;AACb,GAAG"} \ No newline at end of file +{"version":3,"file":"app.js","sourceRoot":"","sources":["../../Scripts/app.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKQ,IAAA,IAAI,GAAK,QAAQ,CAAC,SAAS,KAAvB,CAAwB;AAC5B,IAAA,IAAI,GAAK,QAAQ,CAAC,QAAQ,KAAtB,CAAuB;AAC3B,IAAA,kBAAkB,GAAK,QAAQ,CAAC,UAAU,mBAAxB,CAAyB;AAC7C,IAAA,KAAiB,QAAQ,CAAC,+BAA+B,EAAvD,IAAI,UAAA,EAAE,IAAI,UAA6C,CAAC;AAGhE;IAAA;IAmFA,CAAC;IAlFG,8DAA8D;IAC9D,mDAAmD;IAC/B,kBAAc,GAAlC,UAAoC,SAAiB,EAAE,UAAkB;;;;;;wBACrE,OAAO,CAAC,KAAK,CAAC,oBAAoB,CAAC,CAAC;wBAEhB,qBAAM,GAAG,CAAC,YAAY,CAAC,wBAAiB,UAAU,CAAE,CAAC,EAAA;;wBAAnE,WAAW,GAAG,SAAqD;wBACxD,qBAAM,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAA;;wBAAzD,QAAQ,GAAG,SAA8C;wBAC/D,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAA;wBAE/B,OAAO,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAA;wBAE/B,EAAE,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAA;wBACjC,UAAU,GAAqB,GAAG,CAAC,yBAAyB,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC,CAAA;wBAEpF,SAAS,GAAG,IAAI,kBAAkB,CAAC;4BACrC,IAAI,EAAE,EAAE;4BACR,aAAa,EAAE,IAAI,CAAC,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;yBACvC,CAAC,CAAA;wBAEF,OAAO,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAA;wBAER,qBAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,CAAC,EAAA;;wBAAnE,iBAAiB,GAAI,CAAA,SAA8C,CAAA,GAAlD;wBAExB,OAAO,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;;;;;KACnC;IAED,sFAAsF;IACvE,gBAAY,GAA3B,UAA4B,GAAW;QACnC,OAAO,KAAK,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;aACxC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,EAAE,EAAjB,CAAiB,CAAC,CAAA;IACvC,CAAC;IAED,iFAAiF;IACjF,4EAA4E;IAC7D,gBAAY,GAA3B,UAA4B,WAAwB,EAAE,SAAiB;QACnE,IAAM,iBAAiB,GAAG,QAAQ,CAAC,wBAAwB,CAAC;QAC5D,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;QAC9B,iBAAiB,CAAC,GAAG,GAAG;YACpB,SAAS,EAAE,EAAE;SAChB,CAAC;QAEF,OAAO,QAAQ,CAAC,IAAI,CAAC;YACjB,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,WAAW;YACrB,iBAAiB,mBAAA;YACjB,oBAAoB,EAAE;gBAClB,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;aAC9B;SACJ,CAAC,CAAA;IACN,CAAC;IAEc,qBAAiB,GAAhC,UAAiC,QAAkB;QAC/C,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,UAAC,iBAAiB;YAC5D,OAAO,CAAC,GAAG,CAAC,oBAAoB,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAC,CAAC;QAChE,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,EAAE;YAC5C,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAA;QACtC,CAAC,CAAC,CAAA;QAEF,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,EAAE,UAAC,kBAAkB;YAC/D,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,kBAAkB,CAAC,IAAI,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC,CAAA;IACN,CAAC;IAGc,6BAAyB,GAAxC,UAAyC,EAAU,EAAE,CAAS,EAAE,CAAS,EAAE,GAAW,EAAE,IAAY,EAAE,SAAiB;QACnH,IAAM,UAAU,GAAG,IAAI,QAAQ,CAAC,WAAW,CAAC,gBAAgB,CAAC;YACzD,EAAE,EAAE,EAAE;YACN,SAAS,EAAE,SAAS;YACpB,aAAa,EAAE,EAAE;YACjB,WAAW,EAAE,IAAI,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,CAAC;gBACT,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,IAAI;aACb,CAAC;SACL,CAAC,CAAA;QAEF,OAAO,UAAU,CAAA;IACrB,CAAC;IAEL,UAAC;AAAD,CAAC,AAnFD,IAmFC"} \ No newline at end of file diff --git a/Visual Studio 2022/Visualizers/attribcache140.bin b/Visual Studio 2022/Visualizers/attribcache140.bin new file mode 100644 index 00000000..30406106 Binary files /dev/null and b/Visual Studio 2022/Visualizers/attribcache140.bin differ