trying to get it in qfq namespace

javascript/src/Plugins/qfq.fabric.js

@@ -2,117 +2,171 @@
  * Created by bbaer on 5/5/17.
  */
 
-$(function () {
-    var canvas = this.__canvas = new fabric.Canvas('c', { isDrawingMode: true, stateful: true, enableRetinaScaling: true });
-    var imageURL = "../mockup/mockData/Scan2a.jpeg";
-    var saveOne = false;
-    var saveTwo = false;
-    var saveThree = false;
-    var bgColor = '#fff';
-    var activeColor = {red: 0, green: 0, blue: 0, opacity: 1};
-    var bgOpacity = 1;
-    var fgColor = '#000';
-    var borderColor = '#000';
-    var borderSize = 5;
-    var textSize = 16;
-    var addPositionLeft = 20;
-    var addPositionTop = 20;
-    var panning = false;
-    var moveMode = false;
-    var drawRectangleMode = false;
-    var isDown, origX, origY;
-
-    fabric.Object.prototype.transparentCorners = false;
-
-    canvas.on('after:render', function(){ this.calcOffset(); });
-
-    function setBackground(imagePath) {
-        fabric.Image.fromURL(imageURL, function(img) {
+var QfqNS = QfqNS || {};
+
+$(function (n) {
+    n.fabric = function() {
+        this.canvas = this.__canvas = new fabric.Canvas('c', {
+            isDrawingMode: true,
+            stateful: true,
+            enableRetinaScaling: true
+        });
+        this.imageURL = "../mockup/mockData/Scan2a.jpeg";
+        this.saveOne = false;
+        this.saveTwo = false;
+        this.saveThree = false;
+        this.activeColor = {red: 0, green: 68, blue: 255, opacity: 1};
+        this.brushSize = 2;
+        this.borderSize = 5;
+        this.textSize = 16;
+        this.panning = false;
+        this.moveMode = false;
+        this.userText = "";
+        this.drawRectangleMode = false;
+        this.drawTextBoxMode = false;
+        this.isHighlightMode = false;
+        this.isDrawingMode = true;
+        this.isDown = false;
+        this.origX = 0;
+        this.origY = 0;
+
+        function ModeSettings() {
+            this.myModes = {modes: [], currentMode: ""};
+        }
+
+        ModeSettings.prototype.getMyModes = function (uri) {
+            var that = this;
+            $.getJSON(uri, function(data) {
+                console.log("done");
+                that.setMyModes(data);
+            });
+        };
+
+        ModeSettings.prototype.setMyModes = function (data) {
+            console.log(data);
+            this.myModes = data;
+        };
+
+        ModeSettings.prototype.activateMode = function (modeName) {
+            this.myModes.currentMode = modeName;
+            var that = this;
+            console.log(this.myModes);
+            console.log(modeSettings.myModes);
+            $.each(this.myModes.modes, function(i, o) {
+                console.log(i + " " + o.name);
+                if (o.name == that.myModes.currentMode) {
+                    if (o.requiresDrawing) {
+                        canvas.isDrawingMode = true;
+                    } else {
+                        canvas.isDrawingMode = false;
+                    }
+
+                    if (o.requiresSelection) {
+                        canvas.selection = true;
+                    } else {
+                        canvas.selection = false;
+                    }
+                    if (o.isToggle) {
+                        $(o.selector).removeClass("btn-default");
+                        $(o.selector).addClass("btn-primary");
+                    }
+                } else {
+                    that.deactivateMode(o);
+                }
+            });
+            n.fabric.canvas.renderAll();
+        };
+
+        ModeSettings.prototype.deactivateMode = function (o) {
+            if (o.isToggle) {
+                $(o.selector).removeClass("btn-primary");
+                $(o.selector).addClass("btn-default");
+                this[o.toggle] = false;
+            }
+        };
+
+        this.modeSettings = new ModeSettings();
+        this.modeSettings.getMyModes('mockData/fabric.modes.json');
+
+
+        fabric.Object.prototype.transparentCorners = false;
+
+
+        this.canvas.on('after:render', function(){ this.calcOffset(); });
+    };
+
+
+
+    n.fabric.setBackground = function (imagePath) {
+        fabric.Image.fromURL(this.imageURL, function(img) {
             img.set({
-                width: canvas.width,
-                height: canvas.height,
+                width: this.canvas.width,
+                height: this.canvas.height,
                 originX: 'left',
                 originY: 'top',
                 lockUniScaling: true,
                 centeredScaling: true
             });
-            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
+            this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
+            this.setBrush();
         });
-    }
-
-    function deactivateToggles() {
-        deactivateDrawing();
-        deactivateMove();
-    }
-
-    function deactivateDrawing() {
-        canvas.isDrawingMode = false;
-        canvas.renderAll();
-        $("#drawing-mode").removeClass("btn-primary");
-        $("#drawing-mode").addClass("btn-default");
-    }
-
-    function deactivateMove() {
-        moveMode = false;
-        canvas.renderAll();
-        $("#move-mode").removeClass("btn-primary");
-        $("#move-mode").addClass("btn-default");
-    }
-
-    function deactivatePanning() {
+    };
+
+
+
+    n.fabric.prototype.deactivatePanning = function () {
         panning = false;
-    }
+    };
 
-    function deactivateRectangleDrawing() {
-        drawRectangleMode = false;
-        isDown = false;
+    n.fabric.prototype.deactivateRectangleDrawing = function() {
+        this.drawRectangleMode = false;
+        this.drawTextBoxMode = false;
+        this.isDown = false;
         var rect = canvas.getActiveObject();
         rect.hasControls = true;
-        canvas.selection = true;
-        canvas.discardActiveObject();
-        canvas.remove(rect);
-        canvas.add(rect);
-        canvas.renderAll();
-
-    }
+        this.canvas.selection = true;
+        this.canvas.discardActiveObject();
+        this.canvas.remove(rect);
+        this.canvas.add(rect);
+        this.canvas.renderAll();
 
-    function adjustDefaultPosition() {
-        addPositionLeft += 20;
-        addPositionTop += 20;
-    }
+    };
 
-    function panImage(e) {
-        if (panning && e && e.e) {
+    n.fabric.prototype.panImage = function(e) {
+        if (this.panning && e && e.e) {
             var delta = new fabric.Point(e.e.movementX, e.e.movementY);
-            canvas.relativePan(delta);
+            this.canvas.relativePan(delta);
         }
-    }
+    };
 
-    function getActiveRGBA(changedOpacity) {
-        var opacity = activeColor.opacity;
+    n.fabric.prototype.getActiveRGBA = function(changedOpacity) {
+        var opacity = this.activeColor.opacity;
         if (changedOpacity) {
             opacity = changedOpacity;
         }
-        return "rgba(" + activeColor.red + "," + activeColor.green + "," + activeColor.blue + "," + opacity + ")";
-    }
+        return "rgba(" + this.activeColor.red + ","
+            + this.activeColor.green + ","
+            + this.activeColor.blue + ","
+            + opacity + ")";
+    };
 
-    function deleteActiveGroup() {
+    n.fabric.prototype.deleteActiveGroup = function() {
         if (canvas.getActiveGroup()) {
             canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
             canvas.discardActiveGroup().renderAll();
         } else {
             canvas.remove(canvas.getActiveObject());
         }
-    }
+    };
 
-    function freeDrawRectangleStart(o) {
-        isDown = true;
+    n.fabric.prototype.freeDrawRectangleStart = function(o) {
+        this.isDown = true;
         var pointer = canvas.getPointer(o.e);
-        origX = pointer.x;
-        origY = pointer.y;
+        this.origX = pointer.x;
+        this.origY = pointer.y;
         var colorFill = getActiveRGBA(0.4);
         var colorBorder = getActiveRGBA(1);
-        pointer = canvas.getPointer(o.e);
+        this.pointer = canvas.getPointer(o.e);
         var rect = new fabric.Rect({
             left: origX,
             top: origY,
@@ -128,108 +182,118 @@ $(function () {
             borderScaleFactor: 0,
             hasControls: false
         });
-        canvas.add(rect);
-        canvas.discardActiveObject;
-        canvas.setActiveObject(rect);
-        canvas.selection = false;
-    }
+        this.canvas.add(rect);
+        this.canvas.discardActiveObject();
+        this.canvas.setActiveObject(rect);
+        this.canvas.selection = false;
+    };
+
+    n.fabric.prototype.freeDrawTextBoxStart = function(o) {
+        this.isDown = true;
+        var pointer = this.canvas.getPointer(o.e);
+        this.origX = pointer.x;
+        this.origY = pointer.y;
+        var colorFill = this.getActiveRGBA(1);
+        pointer = this.canvas.getPointer(o.e);
+        var textBox = new fabric.Textbox(userText, {
+            left: origX,
+            top: origY,
+            originX: 'left',
+            originY: 'top',
+            width: pointer.x - origX,
+            height: pointer.y - origY,
+            angle: 0,
+            backgroundColor: colorFill,
+            padding: 5,
+            editable: true
+        });
+        this.canvas.add(textBox);
+        this.canvas.discardActiveObject();
+        this.canvas.setActiveObject(textBox);
+        this.canvas.selection = false;
+    };
 
-    function resizeRectangle(o) {
+    n.fabric.prototype = function(o) {
         if (!isDown) return;
         var rect = canvas.getActiveObject();
         var pointer = canvas.getPointer(o.e);
 
-        if(origX>pointer.x){
-            rect.set({ left: Math.abs(pointer.x) });
+        if(this.origX > pointer.x){
+            rect.set({
+                left: Math.abs(pointer.x)
+            });
         }
-        if(origY>pointer.y){
-            rect.set({ top: Math.abs(pointer.y) });
+        if(this.origY > pointer.y){
+            rect.set({
+                top: Math.abs(pointer.y)
+            });
         }
 
-        rect.set({ width: Math.abs(origX - pointer.x) });
-        rect.set({ height: Math.abs(origY - pointer.y) });
-
-
-        canvas.renderAll();
-    }
-
-    function addText(displayText) {
-        var text = new fabric.Text(displayText, {
-            fontSize: textSize,
-            color: '#000',
-            left: 10,
-            top: 10,
-            editable: true
-        });
-        var rect = new fabric.Rect();
         rect.set({
-            width: text.width + 20,
-            height: text.height + 20,
-            fill: bgColor,
-            opacity: bgOpacity
+            width: Math.abs(this.origX - pointer.x)
         });
-        var group = new fabric.Group([rect, text], {
-            left: addPositionLeft,
-            top: addPositionTop
+        rect.set({
+            height: Math.abs(this.origY - pointer.y)
         });
-        canvas.add(group);
-        adjustDefaultPosition();
-    }
 
-    function setBrush(brushSize) {
+        this.canvas.renderAll();
+    };
+
+    n.fabric.prototype.setBrush = function() {
         var color = getActiveRGBA();
         canvas.freeDrawingBrush.color = color;
-        if (!brushSize) {
-            brushSize = 2;
-        }
         canvas.freeDrawingBrush.width = brushSize;
-    }
+    };
 
     // Custom Mouse / Touch Events on Canvas
 
-    canvas.on('mouse:up', function (e) {
+    n.fabric.canvas.on('mouse:up', function (e) {
         if (moveMode) {
             deactivatePanning();
         }
 
-        if (drawRectangleMode) {
+        if (drawRectangleMode || drawTextBoxMode) {
             deactivateRectangleDrawing();
         }
     });
 
-    canvas.on('mouse:out', function (e) {
+    n.fabric.canvas.on('mouse:out', function (e) {
         if (moveMode) {
             deactivatePanning();
         }
     });
 
-    canvas.on('mouse:down', function (e) {
+    n.fabric.canvas.on('mouse:down', function (e) {
         if (moveMode) {
             panning = true;
         }
         if (drawRectangleMode) {
             freeDrawRectangleStart(e);
         }
+        if (drawTextBoxMode) {
+            freeDrawTextBoxStart(e);
+        }
     });
 
-    canvas.on('mouse:move', function(e) {
+    n.fabric.canvas.on('mouse:move', function(e) {
         if (moveMode) {
             panImage(e);
         }
-        if (drawRectangleMode) {
+        if (drawRectangleMode || drawTextBoxMode) {
             resizeRectangle(e);
         }
     });
 
-    canvas.onkeyup = function(e) {
+    n.fabric.canvas.onkeyup = function(e) {
         if(e.keyCode == 46) {
             deleteActiveGroup();
         }
         console.log(e.keyCode);
     };
 
-    setBackground(imageURL);
+    n.fabric.setBackground(n.fabric.imageURL);
 
+    // Button Events
 
     $("#clear-canvas").on( "click", function() {
         deleteActiveGroup();
@@ -237,132 +301,137 @@ $(function () {
 
     $("#text-bg-submit").on("click", function() {
         deactivateToggles();
-        var userText = $("#text-user-value").val();
-        addText(userText);
+        userText = $("#text-user-value").val();
+        drawTextBoxMode = true;
         $("#text-user-value").val('');
     });
 
     $("#drawing-mode").on( "click", function() {
-        canvas.isDrawingMode = !canvas.isDrawingMode;
+        isDrawingMode = !isDrawingMode;
         console.log("Button pressed");
-        if (canvas.isDrawingMode) {
-            $(this).removeClass("btn-default");
-            $(this).addClass("btn-primary");
-            deactivateMove();
+        if (isDrawingMode) {
+            modeSettings.activateMode("draw");
+            activeColor.opacity = 0.8;
+            brushSize = 2;
+            setBrush();
         }
         else {
+            canvas.isDrawingMode = false;
             $(this).removeClass("btn-primary");
             $(this).addClass("btn-default");
         }
     });
 
-    $("#move-mode").on("click", function() {
-        canvas.selection = !canvas.selection;
-        if (!canvas.selection) {
-            $(this).removeClass("btn-default");
-            $(this).addClass("btn-primary");
-            deactivateDrawing();
-            moveMode = true;
+    $("#highlight-mode").on( "click", function() {
+        isHighlightMode = !isHighlightMode;
+        console.log("Button pressed");
+        if (isHighlightMode) {
+            modeSettings.activateMode("highlight");
+            activeColor.opacity = 0.4;
+            brushSize = 14;
+            setBrush();
         }
         else {
+            canvas.isDrawingMode = false;
             $(this).removeClass("btn-primary");
             $(this).addClass("btn-default");
-            moveMode = false;
+        }
+    });
+
+    $("#move-mode").on("click", function() {
+        moveMode = !moveMode;
+        if (moveMode) {
+            modeSettings.activateMode("move");
         }
     });
 
     $("#add-text").on("click", function() {
         $("#user-text-control").slideToggle();
-        deactivateDrawing();
+        n.fabric.modeSettings.activateMode("write");
     });
 
     $("#add-rect").on("click", function() {
-        drawRectangleMode = true;
-        deactivateDrawing();
+        n.fabric.drawRectangleMode = !n.fabric.drawRectangleMode;
+        if (n.fabric.drawRectangleMode) {
+            n.fabric.modeSettings.activateMode("rectangle");
+        }
     });
 
     $("#save1").on("click", function() {
-        if (!saveOne) {
-            saveOne = canvas.toJSON();
+        if (!n.fabric.saveOne) {
+            n.fabric.saveOne = n.fabric.canvas.toJSON();
         } else {
-            canvas.loadFromJSON(saveOne);
+            n.fabric.canvas.loadFromJSON(saveOne);
         }
     });
 
     $("#save2").on("click", function() {
-        if (!saveTwo) {
-            saveTwo = canvas.toJSON();
+        if (!n.fabric.saveTwo) {
+            n.fabric.saveTwo = n.fabric.canvas.toJSON();
         } else {
-            canvas.loadFromJSON(saveTwo);
+            n.fabric.canvas.loadFromJSON(saveTwo);
         }
     });
 
     $("#save3").on("click", function() {
         if (!saveThree) {
-            saveThree = canvas.toJSON();
+            n.fabric.saveThree = canvas.toJSON();
         } else {
-            canvas.loadFromJSON(saveThree);
+            n.fabric.canvas.loadFromJSON(saveThree);
         }
     });
 
     $("#export-svg").on("click", function() {
-        var svg = canvas.toSVG();
-        var png = canvas.toDataURL('png');
+        var svg = n.fabric.canvas.toSVG();
+        var png = n.fabric.canvas.toDataURL('png');
         console.log(svg);
         $("#target-svg").html(svg);
         $("#target-png").attr("src", png);
 
     });
 
-    $("#text-no-bg").on("click", function() {
-        bgOpacity = 0;
+    $("#draw-blue").on("click", function() {
+        n.fabric.activeColor.red = 0;
+        n.fabric.activeColor.green = 68;
+        n.fabric.activeColor.blue = 255;
+        n.fabric.setBrush();
     });
 
-    $("#text-yellow-bg").on("click", function() {
-        bgOpacity = 1;
-        bgColor = '#ffcc00'
+    $("#draw-light-blue").on("click", function() {
+        n.fabric.activeColor.red = 0;
+        n.fabric.activeColor.green = 204;
+        n.fabric.activeColor.blue = 255;
+        n.fabric.setBrush();
     });
 
-    $("#text-white-bg").on("click", function() {
-        bgOpacity = 1;
-        bgColor = '#fff'
+    $("#draw-red").on("click", function() {
+        n.fabric.activeColor.red = 255;
+        n.fabric.activeColor.green = 0;
+        n.fabric.activeColor.blue = 0;
+        n.fabric.setBrush();
     });
 
-    $("#draw-black").on("click", function() {
-        activeColor.red = 0;
-        activeColor.green = 0;
-        activeColor.blue = 0;
-        activeColor.opacity = 0.8;
-        setBrush();
+    $("#draw-pink").on("click", function() {
+        n.fabric.activeColor.red = 255;
+        n.fabric.activeColor.green = 53;
+        n.fabric.activeColor.blue = 177;
+        n.fabric.setBrush();
     });
 
-    $("#draw-red").on("click", function() {
-        activeColor.red = 255;
-        activeColor.green = 0;
-        activeColor.blue = 0;
-        activeColor.opacity = 0.8;
-        setBrush();
+    $("#draw-green").on("click", function() {
+        n.fabric.activeColor.