Demo of FabricJS, PDFJS and PDFLib Integration with Phoenix LiveView

[crockwave]

I created a repo to demonstrate the integration of fabric.js, PDFLib.js and pdf.js with Phoenix LiveView, using a LiveView Hook.

crockwave/fabric_hook: Demonstrates integration of fabric.js, pdf.js and PDFLib.js with Phoenix LiveView (github.com)

Created with Phoenix 1.6.0

It demonstrates the following:

• Fabric.js pdf.js and PDFLib.js LiveView integration
• Fabric.js hook in app.js
• Creates a new default 2 page PDF on page load using PDFLib
• Fabric annotation layer on top of the PDF file viewer
• Using a Fabric brush to draw objects of varying widths and colors
• Uploading a PDF into the viewer
• Selecting, rotating, moving and scaling drawn Fabric objects
• Moving selected Fabric object using arrow keys and Shift-arrow keys
• Deleting selected Fabric object using the Del key
• Maintain layers oriented during window resize events

[ghenry]

Got this error?

[info] Running FabricHookWeb.Endpoint with cowboy 2.9.0 at 127.0.0.1:4000 (http)
[debug] Downloading esbuild from https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.12.18.tgz
[info] Access FabricHookWeb.Endpoint at http://localhost:4000
 > js/app.js:28:23: error: Could not resolve "fabric" (mark it as external to exclude it from the bundle)
    28 │ import { fabric } from "fabric"
       ╵                        ~~~~~~~~

 > js/app.js:29:19: error: Could not resolve "jquery" (mark it as external to exclude it from the bundle)
    29 │ import jQuery from 'jquery'
       ╵                    ~~~~~~~~

2 errors
[watch] build finished, watching for changes...

[ghenry]

Then this? I don’t think this is right?

[crockwave]

Reference the Readme.md. You need to install fabric using npm from your assets folder

JQuery should be picked up by the script reference inside the heex file

fabric_hook/page_fabric.html.heex at master · crockwave/fabric_hook (github.com)

[ivanhercaz]

I will test it as soon as possible! Thank you for share it, @crockwave!

[ghenry]

Ah, I’m used to not doing that and didn’t notice the readme or package.json

[ghenry]

Works now. Really nice! Will help me learn more about Hooks as I’m doing some cal-heatmap things. Thanks for sharing.