added qfq.fabric.js to grunt

Gruntfile.js

@@ -10,6 +10,7 @@ module.exports = function (grunt) {
         'javascript/src/Element/*.js',
         'javascript/src/*.js'
     ];
+    var js_plugins = 'javascript/src/Plugins/*.js';
 
     // Project configuration.
     grunt.initConfig({
@@ -385,6 +386,22 @@ module.exports = function (grunt) {
                     }
                 ]
 
+            },
+            qfqPlugins: {
+                files: [
+                    {
+                        src: js_plugins,
+                        expand: true,
+                        dest: "js/",
+                        flatten: true
+                    },
+                    {
+                        src: js_plugins,
+                        expand: true,
+                        dest: typo3_js,
+                        flatten: true
+                    }
+                ]
             }
         },
         uglify: {
@@ -394,6 +411,10 @@ module.exports = function (grunt) {
             build: {
                 src: ['js/<%= pkg.name %>.debug.js'],
                 dest: typo3_js + '<%= pkg.name %>.min.js'
+            },
+            qfqFabric: {
+                src: ['javascript/src/Plugins/qfq.fabric.js'],
+                dest: typo3_js + 'qfq.fabric.min.js'
             }
         },
         jshint: {

javascript/src/Plugins/qfq.fabric.js

+/**
+ * Created by bbaer on 5/5/17.
+ */
+$(function () {
+    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true });
+    var imageURL = "../mockup/mockData/Scan2a.jpeg";
+    var saveOne = false;
+    var saveTwo = false;
+    var saveThree = false;
+    fabric.Object.prototype.transparentCorners = false;
+
+    function setBackground(imagePath) {
+        fabric.Image.fromURL(imageURL, function(img) {
+            img.set({
+                width: canvas.width,
+                height: canvas.height,
+                originX: 'left',
+                originY: 'top'
+            });
+            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+        });
+    }
+
+    function deactivateDrawing() {
+        canvas.isDrawingMode = false;
+        $("#drawing-mode").removeClass("btn-primary");
+        $("#drawing-mode").addClass("btn-default");
+    }
+
+    setBackground(imageURL);
+
+
+    $("#clear-canvas").on( "click", function() {
+        canvas.clear();
+        setBackground(imageURL);
+    });
+
+    $("#drawing-mode").on( "click", function() {
+        canvas.isDrawingMode = !canvas.isDrawingMode;
+        console.log("Button pressed");
+        if (canvas.isDrawingMode) {
+            $(this).removeClass("btn-default");
+            $(this).addClass("btn-primary");
+        }
+        else {
+            $(this).removeClass("btn-primary");
+            $(this).addClass("btn-default");
+        }
+    });
+
+    $("#add-text").on("click", function() {
+        var text = new fabric.IText('type your text here', { left: 100, top: 100, editable: true});
+        canvas.add(text);
+        deactivateDrawing();
+    });
+
+    $("#save1").on("click", function() {
+        if (!saveOne) {
+            saveOne = canvas.toJSON();
+        } else {
+            canvas.loadFromJSON(saveOne);
+        }
+    });
+
+    $("#save2").on("click", function() {
+        if (!saveTwo) {
+            saveTwo = canvas.toJSON();
+        } else {
+            canvas.loadFromJSON(saveTwo);
+        }
+    });
+
+    $("#save3").on("click", function() {
+        if (!saveThree) {
+            saveThree = canvas.toJSON();
+        } else {
+            canvas.loadFromJSON(saveThree);
+        }
+    });
+
+    $("#export-svg").on("click", function() {
+        var svg = canvas.toSVG();
+        console.log(svg);
+       $("#target-svg").html(svg);
+    });
+
+    $('html').keyup(function(e) {
+       if(e.keyCode == 46) {
+           if (canvas.getActiveGroup()) {
+               canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
+               canvas.discardActiveGroup().renderAll();
+           } else {
+               canvas.remove(canvas.getActiveObject());
+           }
+       }
+    });
+});
\ No newline at end of file