Commit 59d6003e authored by bbaer's avatar bbaer
Browse files

basic implementation into qfq namespace, mode selector now works fine

parent 9c4ca4e8
......@@ -5,7 +5,7 @@
var QfqNS = QfqNS || {};
$(function (n) {
n.fabric = function() {
n.Fabric = function() {
this.canvas = this.__canvas = new fabric.Canvas('c', {
isDrawingMode: true,
stateful: true,
......@@ -51,20 +51,20 @@ $(function (n) {
this.myModes.currentMode = modeName;
var that = this;
console.log(this.myModes);
console.log(modeSettings.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) {
canvas.isDrawingMode = true;
n.fabric.canvas.isDrawingMode = true;
} else {
canvas.isDrawingMode = false;
n.fabric.canvas.isDrawingMode = false;
}
if (o.requiresSelection) {
canvas.selection = true;
n.fabric.canvas.selection = true;
} else {
canvas.selection = false;
n.fabric.canvas.selection = false;
}
if (o.isToggle) {
$(o.selector).removeClass("btn-default");
......@@ -81,7 +81,7 @@ $(function (n) {
if (o.isToggle) {
$(o.selector).removeClass("btn-primary");
$(o.selector).addClass("btn-default");
this[o.toggle] = false;
n.fabric[o.toggle] = false;
}
};
......@@ -90,35 +90,31 @@ $(function (n) {
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) {
n.Fabric.prototype.setBackground = function (imagePath) {
var that = this;
fabric.Image.fromURL(imagePath, function(img) {
img.set({
width: this.canvas.width,
height: this.canvas.height,
width: that.canvas.width,
height: that.canvas.height,
originX: 'left',
originY: 'top',
lockUniScaling: true,
centeredScaling: true
});
this.canvas.setBackgroundImage(img, this.canvas.renderAll.bind(this.canvas));
this.setBrush();
that.canvas.setBackgroundImage(img, that.canvas.renderAll.bind(that.canvas));
that.setBrush();
});
};
n.fabric.prototype.deactivatePanning = function () {
n.Fabric.prototype.deactivatePanning = function () {
panning = false;
};
n.fabric.prototype.deactivateRectangleDrawing = function() {
n.Fabric.prototype.deactivateRectangleDrawing = function() {
this.drawRectangleMode = false;
this.drawTextBoxMode = false;
this.isDown = false;
......@@ -132,14 +128,14 @@ $(function (n) {
};
n.fabric.prototype.panImage = function(e) {
n.Fabric.prototype.panImage = function(e) {
if (this.panning && e && e.e) {
var delta = new fabric.Point(e.e.movementX, e.e.movementY);
this.canvas.relativePan(delta);
}
};
n.fabric.prototype.getActiveRGBA = function(changedOpacity) {
n.Fabric.prototype.getActiveRGBA = function(changedOpacity) {
var opacity = this.activeColor.opacity;
if (changedOpacity) {
opacity = changedOpacity;
......@@ -150,7 +146,7 @@ $(function (n) {
+ opacity + ")";
};
n.fabric.prototype.deleteActiveGroup = function() {
n.Fabric.prototype.deleteActiveGroup = function() {
if (canvas.getActiveGroup()) {
canvas.getActiveGroup().forEachObject(function(o) { canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
......@@ -159,7 +155,7 @@ $(function (n) {
}
};
n.fabric.prototype.freeDrawRectangleStart = function(o) {
n.Fabric.prototype.freeDrawRectangleStart = function(o) {
this.isDown = true;
var pointer = canvas.getPointer(o.e);
this.origX = pointer.x;
......@@ -188,7 +184,7 @@ $(function (n) {
this.canvas.selection = false;
};
n.fabric.prototype.freeDrawTextBoxStart = function(o) {
n.Fabric.prototype.freeDrawTextBoxStart = function(o) {
this.isDown = true;
var pointer = this.canvas.getPointer(o.e);
this.origX = pointer.x;
......@@ -213,7 +209,7 @@ $(function (n) {
this.canvas.selection = false;
};
n.fabric.prototype = function(o) {
n.Fabric.prototype.resizeRectangle = function(o) {
if (!isDown) return;
var rect = canvas.getActiveObject();
var pointer = canvas.getPointer(o.e);
......@@ -239,100 +235,102 @@ $(function (n) {
this.canvas.renderAll();
};
n.fabric.prototype.setBrush = function() {
var color = getActiveRGBA();
canvas.freeDrawingBrush.color = color;
canvas.freeDrawingBrush.width = brushSize;
n.Fabric.prototype.setBrush = function() {
var color = this.getActiveRGBA();
this.canvas.freeDrawingBrush.color = color;
this.canvas.freeDrawingBrush.width = this.brushSize;
};
n.fabric = new n.Fabric();
n.fabric.setBackground("../mockup/mockData/Scan2a.jpeg");
// Custom Mouse / Touch Events on Canvas
n.fabric.canvas.on('mouse:up', function (e) {
if (moveMode) {
deactivatePanning();
if (this.moveMode) {
this.deactivatePanning();
}
if (drawRectangleMode || drawTextBoxMode) {
deactivateRectangleDrawing();
if (this.drawRectangleMode || this.drawTextBoxMode) {
this.deactivateRectangleDrawing();
}
});
n.fabric.canvas.on('mouse:out', function (e) {
if (moveMode) {
deactivatePanning();
if (this.moveMode) {
this.deactivatePanning();
}
});
n.fabric.canvas.on('mouse:down', function (e) {
if (moveMode) {
panning = true;
if (this.moveMode) {
this.panning = true;
}
if (drawRectangleMode) {
freeDrawRectangleStart(e);
if (this.drawRectangleMode) {
this.freeDrawRectangleStart(e);
}
if (drawTextBoxMode) {
freeDrawTextBoxStart(e);
if (this.drawTextBoxMode) {
this.freeDrawTextBoxStart(e);
}
});
n.fabric.canvas.on('mouse:move', function(e) {
if (moveMode) {
panImage(e);
if (this.moveMode) {
this.panImage(e);
}
if (drawRectangleMode || drawTextBoxMode) {
resizeRectangle(e);
if (this.drawRectangleMode || this.drawTextBoxMode) {
this.resizeRectangle(e);
}
});
n.fabric.canvas.onkeyup = function(e) {
if(e.keyCode == 46) {
deleteActiveGroup();
this.deleteActiveGroup();
}
console.log(e.keyCode);
};
n.fabric.setBackground(n.fabric.imageURL);
n.fabric.canvas.on('after:render', function(){ this.calcOffset(); });
// Button Events
$("#clear-canvas").on( "click", function() {
deleteActiveGroup();
n.fabric.deleteActiveGroup();
});
$("#text-bg-submit").on("click", function() {
deactivateToggles();
userText = $("#text-user-value").val();
drawTextBoxMode = true;
n.fabric.userText = $("#text-user-value").val();
n.fabric.drawTextBoxMode = true;
$("#text-user-value").val('');
});
$("#drawing-mode").on( "click", function() {
isDrawingMode = !isDrawingMode;
n.fabric.isDrawingMode = !n.fabric.isDrawingMode;
console.log("Button pressed");
if (isDrawingMode) {
modeSettings.activateMode("draw");
activeColor.opacity = 0.8;
brushSize = 2;
setBrush();
if (n.fabric.isDrawingMode) {
n.fabric.modeSettings.activateMode("draw");
n.fabric.activeColor.opacity = 0.8;
n.fabric.brushSize = 2;
n.fabric.setBrush();
}
else {
canvas.isDrawingMode = false;
n.fabric.canvas.isDrawingMode = false;
$(this).removeClass("btn-primary");
$(this).addClass("btn-default");
}
});
$("#highlight-mode").on( "click", function() {
isHighlightMode = !isHighlightMode;
n.fabric.isHighlightMode = !n.fabric.isHighlightMode;
console.log("Button pressed");
if (isHighlightMode) {
modeSettings.activateMode("highlight");
activeColor.opacity = 0.4;
brushSize = 14;
setBrush();
if (n.fabric.isHighlightMode) {
n.fabric.modeSettings.activateMode("highlight");
n.fabric.activeColor.opacity = 0.4;
n.fabric.brushSize = 14;
n.fabric.setBrush();
}
else {
canvas.isDrawingMode = false;
n.fabric.canvas.isDrawingMode = false;
$(this).removeClass("btn-primary");
$(this).addClass("btn-default");
}
......@@ -432,6 +430,4 @@ $(function (n) {
n.fabric.setBrush();
});
n.fabric = new
})(QfqNS);
\ No newline at end of file
}(QfqNS));
\ No newline at end of file
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