Commit 4e57fba5 authored by bbaer's avatar bbaer
Browse files

Buttons getting generated now

parent 458c8d03
......@@ -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);
......
......@@ -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>
......
......@@ -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"
}
],
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment