Buttons getting generated now

javascript/src/Plugins/qfq.fabric.js

@@ -17,6 +17,7 @@ $(function (n) {
         this.canvas.on('mouse:move', function (e) { qFabric.defaultMouseMoveEvent(e) });
         this.canvas.on('mouse:out', function (e) { qFabric.defaultMouseOutEvent(e) });
         this.canvas.on('after:render', function(){ this.calcOffset(); });
+        this.modeButtons;
         this.saveOne = false;
         this.saveTwo = false;
         this.saveThree = false;
@@ -36,29 +37,53 @@ $(function (n) {
         this.origY = 0;
 
         function ModeSettings() {
+            this.qFabric = qFabric;
+            this.myButtons = [];
             this.myModes = {modes: [], currentMode: ""};
         }
 
         ModeSettings.prototype.getMyModes = function (uri) {
             var that = this;
             $.getJSON(uri, function(data) {
-                console.log("done");
                 that.setMyModes(data);
             });
         };
 
+        ModeSettings.prototype.setUpButtons = function() {
+            var $controlWrapper = $("#fabric-controls");
+            var that = this;
+            this.myModes.modes.forEach(function(o) {
+                var $button = $("<button>", {
+                    type: 'button',
+                    id: o.selector,
+                    class: 'btn btn-default'
+                });
+                var $symbol = $("<span>", {
+                    class: 'glyphicon ' + o.icon
+                });
+                $button.append($symbol);
+                if (o.name === that.myModes.currentMode) {
+                    $button.removeClass("btn-default");
+                    $button.addClass("btn-primary");
+                }
+                that.myButtons.push($button);
+                $controlWrapper.append($button);
+                var modePressed = o.name;
+                $button.on("click", function() {
+                    that.qFabric.buttonPress(modePressed, $button)
+                });
+            });
+        };
+
         ModeSettings.prototype.setMyModes = function (data) {
-            console.log(data);
             this.myModes = data;
+            this.setUpButtons();
         };
 
-        ModeSettings.prototype.activateMode = function (modeName) {
+        ModeSettings.prototype.activateMode = function (modeName, $button) {
             this.myModes.currentMode = modeName;
             var that = this;
-            console.log(this.myModes);
-            console.log(n.fabric.modeSettings.myModes);
             $.each(this.myModes.modes, function(i, o) {
-                console.log(i + " " + o.name);
                 if (o.name == that.myModes.currentMode) {
                     if (o.requiresDrawing) {
                         n.fabric.canvas.isDrawingMode = true;
@@ -72,8 +97,8 @@ $(function (n) {
                         n.fabric.canvas.selection = false;
                     }
                     if (o.isToggle) {
-                        $(o.selector).removeClass("btn-default");
-                        $(o.selector).addClass("btn-primary");
+                        $button.removeClass("btn-default");
+                        $button.addClass("btn-primary");
                     }
                 } else {
                     that.deactivateMode(o);
@@ -84,12 +109,37 @@ $(function (n) {
 
         ModeSettings.prototype.deactivateMode = function (o) {
             if (o.isToggle) {
-                $(o.selector).removeClass("btn-primary");
-                $(o.selector).addClass("btn-default");
+                var $button = this.getButtonById(o.selector);
+                $button.removeClass("btn-primary");
+                $button.addClass("btn-default");
                 n.fabric[o.toggle] = false;
             }
         };
 
+        ModeSettings.prototype.getButtonById = function (needle) {
+            var needleInHaystack = {};
+            this.myButtons.forEach(function (haystack) {
+                if (haystack[0].id === needle) {
+                    needleInHaystack = haystack;
+                    return true;
+                }
+            });
+            if (needleInHaystack === {}) {
+                console.error("Button not found, id: " + string);
+            } else {
+                return needleInHaystack;
+            }
+        };
+
+        ModeSettings.prototype.getModeByName = function (string) {
+            $.each(this.myModes.modes, function(i, o) {
+                if (o.name == string) {
+                    return o;
+                }
+            });
+            console.error("Couldn't find mode with name: " + string);
+        };
+
         this.modeSettings = new ModeSettings();
         this.modeSettings.getMyModes('mockData/fabric.modes.json');
 
@@ -114,14 +164,14 @@ $(function (n) {
     };
 
     n.Fabric.prototype.deactivatePanning = function () {
-        panning = false;
+        this.panning = false;
     };
 
     n.Fabric.prototype.deactivateRectangleDrawing = function() {
         this.drawRectangleMode = false;
         this.drawTextBoxMode = false;
         this.isDown = false;
-        var rect = canvas.getActiveObject();
+        var rect = this.canvas.getActiveObject();
         rect.hasControls = true;
         this.canvas.selection = true;
         this.canvas.discardActiveObject();
@@ -161,54 +211,55 @@ $(function (n) {
 
     n.Fabric.prototype.freeDrawRectangleStart = function(o) {
         this.isDown = true;
+        var that = this;
         var pointer = this.canvas.getPointer(o.e);
         this.origX = pointer.x;
         this.origY = pointer.y;
-        var colorFill = getActiveRGBA(0.4);
-        var colorBorder = getActiveRGBA(1);
+        var colorFill = this.getActiveRGBA(0.4);
+        var colorBorder = this.getActiveRGBA(1);
         this.pointer = this.canvas.getPointer(o.e);
         var rect = new fabric.Rect({
-            left: origX,
-            top: origY,
+            left: that.origX,
+            top: that.origY,
             originX: 'left',
             originY: 'top',
-            width: pointer.x-origX,
-            height: pointer.y-origY,
+            width: pointer.x - that.origX,
+            height: pointer.y - that.origY,
             angle: 0,
             fill: colorFill,
-            strokeWidth: borderSize,
+            strokeWidth: this.borderSize,
             stroke: colorBorder,
             selectable: true,
             borderScaleFactor: 0,
             hasControls: 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 that = this;
         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,
+        var textBox = new fabric.Textbox(this.userText, {
+            left: that.origX,
+            top: that.origY,
             originX: 'left',
             originY: 'top',
-            width: pointer.x - origX,
-            height: pointer.y - origY,
+            width: pointer.x - that.origX,
+            height: pointer.y - that.origY,
             angle: 0,
             backgroundColor: colorFill,
             padding: 5,
             editable: true
         });
         this.canvas.add(textBox);
-        this.canvas.discardActiveObject();
         this.canvas.setActiveObject(textBox);
         this.canvas.selection = false;
     };
@@ -282,19 +333,33 @@ $(function (n) {
         }
     };
 
-    n.fabric = new n.Fabric();
-    n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
-
-    // Custom Mouse / Touch Events on Canvas
-
-
-    n.fabric.canvas.onkeyup = function(e) {
-        if(e.keyCode == 46) {
-            this.deleteActiveGroup();
+    n.Fabric.prototype.buttonPress = function(string, $button) {
+        this.modeSettings.activateMode(string, $button);
+        switch(string) {
+            case "draw":
+                console.log("totally Drawing now");
+                break;
+            case "highlight":
+                console.log("highlighting now");
+                break;
+            case "write":
+                console.log("writing my disertation");
+                break;
+            case "rectangle":
+                console.log("Oh yeah");
+                break;
+            case "move":
+                console.log("moving arround");
+                break;
+            default:
+                console.error("unrecognized mode");
+                break;
         }
-        console.log(e.keyCode);
     };
 
+    n.fabric = new n.Fabric();
+    n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
+
     // Button Events
 
     $("#clear-canvas").on( "click", function() {
@@ -309,7 +374,6 @@ $(function (n) {
 
     $("#drawing-mode").on( "click", function() {
         n.fabric.isDrawingMode = !n.fabric.isDrawingMode;
-        console.log("Button pressed");
         if (n.fabric.isDrawingMode) {
             n.fabric.modeSettings.activateMode("draw");
             n.fabric.activeColor.opacity = 0.8;
@@ -325,7 +389,6 @@ $(function (n) {
 
     $("#highlight-mode").on( "click", function() {
         n.fabric.isHighlightMode = !n.fabric.isHighlightMode;
-        console.log("Button pressed");
         if (n.fabric.isHighlightMode) {
             n.fabric.modeSettings.activateMode("highlight");
             n.fabric.activeColor.opacity = 0.4;
@@ -340,9 +403,9 @@ $(function (n) {
     });
 
     $("#move-mode").on("click", function() {
-        moveMode = !moveMode;
-        if (moveMode) {
-            modeSettings.activateMode("move");
+        n.fabric.moveMode = !n.fabric.moveMode;
+        if (n.fabric.moveMode) {
+            n.fabric.modeSettings.activateMode("move");
         }
     });
 
@@ -355,6 +418,8 @@ $(function (n) {
         n.fabric.drawRectangleMode = !n.fabric.drawRectangleMode;
         if (n.fabric.drawRectangleMode) {
             n.fabric.modeSettings.activateMode("rectangle");
+        } else {
+            n.fabric.modeSettings.deactivateMode(n.fabric.modeSettings.getModeByName("rectangle"));
         }
     });
 
@@ -385,7 +450,6 @@ $(function (n) {
     $("#export-svg").on("click", function() {
         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);
 

mockup/fabric.html

@@ -38,7 +38,10 @@
     </div>
     <div class="row">
         <div class="col-md-4">
-            <div class="form-group">
+            <div id="fabric-controls">
+
+            </div>
+            <div class="form-group" id>
                 <button class="btn btn-primary" id="drawing-mode"><span class="glyphicon glyphicon-pencil"></span></button>
                 <button class="btn btn-default" id="highlight-mode"><span class="glyphicon glyphicon-pencil"></span></button>
                 <button class="btn btn-default" id="add-text"><span class="glyphicon glyphicon-text-height"></span></button>

mockup/mockData/fabric.modes.json

@@ -2,56 +2,68 @@
     "modes": [
         {
             "name": "draw",
-            "selector": "#drawing-mode",
+            "selector": "drawing-mode",
             "requiresDrawing": true,
             "requiresSelection": false,
             "isToggle": true,
             "toggle": "isDrawingMode",
+            "hasToggleElement": false,
+            "toggleElement": "",
             "icon": "glyphicon-pencil"
         },
         {
             "name": "highlight",
-            "selector": "#highlight-mode",
+            "selector": "highlight-mode",
             "requiresDrawing": true,
             "requiresSelection": false,
             "isToggle": true,
             "toggle": "isHighlightMode",
+            "hasToggleElement": false,
+            "toggleElement": "",
             "icon": "glyphicon-pencil"
         },
         {
             "name": "write",
-            "selector": "#add-text",
+            "selector": "add-text",
             "requiresDrawing": false,
             "requiresSelection": false,
             "isToggle": true,
-            "toggle": "isHighlightMode",
+            "toggle": "drawTextBoxMode",
+            "hasToggleElement": true,
+            "toggleElement": "#user-text-control",
             "icon": "glyphicon-text-height"
         },
         {
             "name": "rectangle",
-            "selector": "#add-rect",
+            "selector": "add-rect",
             "requiresDrawing": false,
             "requiresSelection": false,
             "isToggle": true,
-            "toggle": "isHighlightMode",
+            "toggle": "drawRectangleMode",
+            "hasToggleElement": false,
+            "toggleElement": "",
             "icon": "glyphicon-stop"
         },
         {
             "name": "move",
-            "selector": "#move-mode",
+            "selector": "move-mode",
             "requiresDrawing": false,
             "requiresSelection": false,
             "isToggle": true,
             "toggle": "isHighlightMode",
+            "hasToggleElement": false,
+            "toggleElement": "",
             "icon": "glyphicon-move"
         },
         {
             "name": "delete",
-            "selector": "#clear-canvas",
+            "selector": "clear-canvas",
             "requiresDrawing": false,
             "requiresSelection": false,
             "isToggle": false,
             "toggle": "",
+            "hasToggleElement": false,
+            "toggleElement": "",
             "icon": "glyphicon-trash"
         }
     ],