importing PDF as image

Gruntfile.js

@@ -39,6 +39,9 @@ module.exports = function(grunt) {
                     'dev/zoom-handler.js',
                     'dev/file-selector.js',
                     'dev/image-handler.js',
+                    'dev/pdf-handler.js',
+
+                    'dev/data-uris.js',
 
                     'dev/decorator.js',
                     'dev/events-handler.js',
@@ -115,6 +118,15 @@ module.exports = function(grunt) {
                 pushTo: 'upstream',
                 gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d'
             }
+        },
+        watch: {
+          scripts: {
+            files: ['dev/*.js'],
+            tasks: ['concat', 'jsbeautifier', 'uglify'],
+            options: {
+              spawn: false,
+            },
+          },
         }
     });
 
@@ -123,4 +135,5 @@ module.exports = function(grunt) {
     // set default tasks to run when grunt is called without parameters
     // http://gruntjs.com/api/grunt.task
     grunt.registerTask('default', ['concat', 'jsbeautifier', 'uglify']);
+    grunt.loadNpmTasks('grunt-contrib-watch');
 };

README.md

@@ -2,11 +2,11 @@
 
 ## Demo: https://www.webrtc-experiment.com/Canvas-Designer/
 
-## Dashboard Demo: [demos/dashboard.html](https://rtcmulticonnection.herokuapp.com/demos/dashboard.html)
+## Advance Demo: [demos/dashboard.html](https://rtcmulticonnection.herokuapp.com/demos/dashboard.html)
 
 Multiple designers demo: https://www.webrtc-experiment.com/Canvas-Designer/multiple.html
 
-### YouTube video
+### YouTube video:
 
 * https://www.youtube.com/watch?v=pvAj5l_v3cM
 
@@ -53,6 +53,11 @@ You can use [`designer.setSelected`](https://github.com/muaz-khan/Canvas-Designe
 11. `image` --- add external images
 12. `arrow` --- draw arrow lines
 13. `marker` --- draw markers
+14. `lineWidth` --- set line width
+15. `colorsPicker` --- background and foreground colors picker
+16. `extraOptions` --- extra options eg. lineCap, lineJoin, globalAlpha, globalCompositeOperation etc.
+17. `pdf` --- to import PDF
+18. `code` --- to enable/disable code view
 
 The correct name for `dragSingle` should be: `drag-move-resize last-selected-shape`.
 
@@ -271,7 +276,12 @@ designer.setTools({
     quadratic: true,
     text: true,
     image: true,
-    zoom: true
+    pdf: true,
+    zoom: true,
+    lineWidth: true,
+    colorsPicker: true,
+    extraOptions: true,
+    code: true
 });
 ```
 

canvas-designer-widget.js

@@ -25,7 +25,13 @@ function CanvasDesigner() {
         quadratic: true,
         text: true,
         image: true,
-        marker: true
+        pdf: true,
+        marker: true,
+        zoom: true,
+        lineWidth: true,
+        colorsPicker: true,
+        extraOptions: true,
+        code: true
     };
 
     var selectedIcon = 'pencil';

dev/common.js

@@ -12,11 +12,12 @@ var is = {
     isEraser: false,
     isText: false,
     isImage: false,
+    isPdf: false,
 
     set: function(shape) {
         var cache = this;
 
-        cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isMarker = cache.isEraser = cache.isText = cache.isImage = false;
+        cache.isLine = cache.isArrow = cache.isArc = cache.isDragLastPath = cache.isDragAllPaths = cache.isRectangle = cache.isQuadraticCurve = cache.isBezierCurve = cache.isPencil = cache.isMarker = cache.isEraser = cache.isText = cache.isImage = cache.isPdf = false;
         cache['is' + shape] = true;
     }
 };
@@ -49,7 +50,7 @@ var points = [],
     textarea = find('code-text'),
     lineWidth = 2,
     strokeStyle = '#6c96c8',
-    fillStyle = 'transparent',
+    fillStyle = 'rgba(0,0,0,0)',
     globalAlpha = 1,
     globalCompositeOperation = 'source-over',
     lineCap = 'round',
@@ -488,7 +489,7 @@ function drawArrow(mx, my, lx, ly, options) {
         return [
             opt.lineWidth || 2,
             opt.strokeStyle || '#6c96c8',
-            opt.fillStyle || 'transparent',
+            opt.fillStyle || 'rgba(0,0,0,0)',
             opt.globalAlpha || 1,
             opt.globalCompositeOperation || 'source-over',
             opt.lineCap || 'round',