Component Architecture

[boehlke]

Overview

The purpose of react-pdf-workflows is to support creating applications involving PDF workflows like electronic contract signing. A given PDF is rendered into a canvas. Actions elements like buttons can be added for the user to interact with. The action elements will be rendered in the canvas on top of the PDF. The source PDF will not be changed but just augmented.

The component should work well in a redux setup, so it should have the least possible local state.

Example of a two-page document which is in a state where some action elements are all pinned (neither movable nor resizable), some are movable and one of the <SignHere> is shown to the user to be signed:

<PdfWorkflow
    onLoadSuccess={onDocumentLoadSuccess}
    file="document.pdf">
   <WorkflowPage pageNumber="1">
     <Approve top="5cm" left="5cm"
       removable="true"
       onRemove={removeElement}
       onResize={resize}
       onDrag={move}
       value={approveValue} draggable="true" resizable="true">
     <SignHere top="27cm" left="5cm" value={signer1}
       readonly="true"
       draggable="false" resizable="false"/>
   </WorkflowPage>
   <WorkflowPage pageNumber="2">
     <SignHere top="27cm" left="19cm"
        onClick={signHereClicked}
        info="Please sign here"
        draggable="false" resizable="false"/>
   </WorkflowPage>
</PdfWorkflow>

Issues/Ideas:

• The action elements <SignHere> etc. are rendered SVG fragments converted to canvas using CanVG (https://github.com/canvg/canvg).
• Can DnD/Resize be done with events potentially going through
  • SVG generation (DOM should not change in most cases, so no rendering here),
  • SVG-to-Canvas rendering
  • coordinate system transformation: Event pixel coordinates has to be translated to PDF-relative coordinates and back (for example 20cm <-> 400px, depending on PDF viewport size) ?
• Support load callback with onDocumentLoadSuccess (seee https://github.com/wojtekmaj/react-pdf/blob/master/sample/webpack/Sample.jsx)
• Support for remove (render remove icon like here https://cdn0.iconfinder.com/data/icons/classic-icons/512/076.png)

Links:

• https://github.com/wojtekmaj/react-pdf
• https://www.createjs.com/tutorials/Mouse%20Interaction/
• Canvas Resize: https://jsfiddle.net/wiany11/p7hxjmsj/14/ http://jsfiddle.net/Cpvxf/128/
• Render SVG into Canvas: https://github.com/canvg/canvg
• Redux-style canvas drawing: https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b
• Creating SVG DOM with React: https://www.smashingmagazine.com/2015/12/generating-svg-with-react/