Commit 6bb5e172 authored by bbaer's avatar bbaer
Browse files

trying to get it in qfq namespace

parent e59a80e0
......@@ -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.