From 0f8536d718e6a5e441c03181adc45c347df5d144 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Fri, 5 Jan 2018 11:22:41 +0100
Subject: [PATCH] starting to integrate image editor.
---
javascript/src/Plugins/qfq.fabric.js | 116 +++++++++++++++++++--------
mockup/imageEditorFabric.html | 73 +++++++++++++++++
mockup/mockData/fabric.buttons.json | 13 ++-
mockup/staticFabric.html | 4 -
4 files changed, 168 insertions(+), 38 deletions(-)
create mode 100644 mockup/imageEditorFabric.html
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index d71286423..79659c7c1 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -19,9 +19,11 @@ $(function (n) {
n.Fabric = function() {
this.parentElement = {};
this.rotation = 0;
+ this.imageToEdit = 0;
this.controlElement = {};
this.emojiContainer = {};
this.eventEmitter = new EventEmitter();
+ this.QfqForm = n.QfqForm;
this.textContainer = {};
this.userTextInput = {};
this.outputField = {};
@@ -240,7 +242,6 @@ $(function (n) {
})
};
-
fabric.Object.prototype.transparentCorners = false;
};
@@ -249,6 +250,7 @@ $(function (n) {
var jsonEmojis = $fabricElement.data('emojis');
var inputField = $fabricElement.data('control-name');
var viewOnly = $fabricElement.data('view-only') || false;
+ var editImage = $fabricElement.data('edit-image') || false;
this.parentElement = $fabricElement;
this.backgroundImage = $fabricElement.data('background-image') || false;
this.fabricJSON = $fabricElement.data('fabric-json') || false;
@@ -256,6 +258,9 @@ $(function (n) {
if (viewOnly) {
this.getMeta(this.backgroundImage, function(width, height) { that.prepareStaticCanvas(width, height); } );
+ } else if (editImage) {
+ this.getMeta(this.backgroundImage, function(width, height) { that.prepareImageEditor(width, height);});
+ this.modeSettings.initialize(this, jsonButtons);
} else {
this.outputField = $("#" + inputField);
this.modeSettings.initialize(this, jsonButtons);
@@ -273,6 +278,48 @@ $(function (n) {
}
};
+ n.Fabric.prototype.prepareImageEditor = function(width, height) {
+ var ratio = height / width;
+ var canvas = document.createElement('canvas');
+ var that = this;
+ var controlElement = $('<div>', {
+ id: 'qfq-fabric-control'
+ });
+ canvas.width = this.parentElement.innerWidth();
+ canvas.height = canvas.width * ratio;
+ this.parentElement.append(canvas);
+ this.canvas = this.__canvas = new fabric.Canvas(canvas, {
+ isDrawingMode: false,
+ stateful: true,
+ enableRetinaScaling: true
+ });
+ this.controlElement = controlElement;
+
+ fabric.Image.fromURL(this.backgroundImage, function(oImg) {
+ oImg.set({
+ width: canvas.width,
+ height: canvas.height,
+ originX: 'left',
+ originY: 'top',
+ selectable: false,
+ evented: false,
+ lockMovementY: true,
+ lockMovementX: true,
+ lockRotation: true,
+ lockScalingX: true,
+ lockScalingY : true,
+ lockUniScaling: true,
+ hasControls: false,
+ hasBorders: false,
+ centeredRotation: true
+ });
+ that.canvas.add(oImg);
+ that.canvas.centerObject(oImg);
+ that.canvas.renderAll();
+ this.imageToEdit = oImg;
+ })
+ };
+
n.Fabric.prototype.prepareStaticCanvas = function(width, height) {
console.log("prepareStaticCanvas");
this.generateStaticCanvas(width, height);
@@ -799,46 +846,49 @@ $(function (n) {
};
n.Fabric.prototype.defaultKeyStrokeHandler = function(e) {
- // Delete key
- if (e.keyCode == 46) {
- this.delete();
- }
+ if (this.mouseInsideCanvas) {
+ // Delete key
+ if (e.keyCode == 46) {
+ this.delete();
+ }
- // Numpad +
- if (e.keyCode == 107) {
- this.zoomCanvasToCenter(0.1);
- }
+ // Numpad +
+ if (e.keyCode == 107) {
+ this.zoomCanvasToCenter(0.1);
+ }
- // Numpad -
- if (e.keyCode == 109) {
- this.zoomCanvasToCenter(-0.1);
- }
+ // Numpad -
+ if (e.keyCode == 109) {
+ this.zoomCanvasToCenter(-0.1);
+ }
- // Up Arrow
- if (e.keyCode == 38) {
- this.panWithZoom(0, 10);
- e.preventDefault();
- }
+ // Up Arrow
+ if (e.keyCode == 38) {
+ this.panWithZoom(0, 10);
+ e.preventDefault();
+ }
- // Down Arrow
- if (e.keyCode == 40) {
- this.panWithZoom(0, -10);
- e.preventDefault();
- }
+ // Down Arrow
+ if (e.keyCode == 40) {
+ this.panWithZoom(0, -10);
+ e.preventDefault();
+ }
- // Left Arrow
- if (e.keyCode == 37) {
- this.panWithZoom(-10, 0);
- }
+ // Left Arrow
+ if (e.keyCode == 37) {
+ this.panWithZoom(-10, 0);
+ }
- if (e.keyCode == 96) {
- this.resetZoom();
- }
+ // Numpad 0
+ if (e.keyCode == 96) {
+ this.resetZoom();
+ }
- if (e.keyCode == 39) {
- this.panWithZoom(10, 0);
+ // Right Arrow
+ if (e.keyCode == 39) {
+ this.panWithZoom(10, 0);
+ }
}
-
};
n.Fabric.prototype.defaultObjectHoverHandler = function(e) {
diff --git a/mockup/imageEditorFabric.html b/mockup/imageEditorFabric.html
new file mode 100644
index 000000000..4bc41600d
--- /dev/null
+++ b/mockup/imageEditorFabric.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+ <link rel="stylesheet" href="../css/bootstrap.min.css">
+ <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
+ <link rel="stylesheet" href="../css/jqx.base.css">
+ <link rel="stylesheet" href="../css/jqx.bootstrap.css">
+ <link rel="stylesheet" href="../extension/Resources/Public/Css/qfq-bs.css">
+ <title>Input Mode Switcher</title>
+
+</head>
+<body>
+<div class="container-fluid">
+ <div class="row">
+ <div class="col-md-10 ">
+ <div class="btn-toolbar pull-right" role="toolbar">
+ <div class="btn-group" role="group">
+ <button id="save-button" type="button" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-ok"></span></button>
+ <button id="close-button" type="button" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-remove"></span></button>
+ </div>
+ <div class="btn-group" role="group">
+ <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-trash"></span></button>
+ </div>
+ <div class="btn-group" role="group">
+ <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span
+ class="glyphicon glyphicon-plus"></span></a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <div class="col-md-4">
+ <div class="fabric" data-buttons="mockData/fabric.buttons.json" data-edit-image="true" data-background-image="mockData/Scan2a.jpeg"></div>
+ </div>
+ </div>
+</div>
+
+<script src="../js/jquery.min.js"></script>
+<script src="../js/bootstrap.min.js"></script>
+<script src="../js/fabric.min.js"></script>
+<script src="../js/validator.min.js"></script>
+<script src="../js/jqx-all.js"></script>
+<script src="../js/EventEmitter.min.js"></script>
+<script src="../js/qfq.debug.js"></script>
+<script src="../javascript/src/Plugins/qfq.fabric.js"></script>
+
+<script type="text/javascript">
+ $(function () {
+ var qfqPage = new QfqNS.QfqPage({
+ tabsId: 'myTabs',
+ formId: 'myForm',
+ submitTo: 'api/' + $("#submitTo").val(),
+ deleteUrl: 'api/' + $("#deleteUrl").val(),
+ fileUploadTo: 'api/' + $("#uploadTo").val(),
+ fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val()
+ });
+
+ QfqNS.Log.level = 0;
+ // Just for mockup, init() function called from new QfqNS.Plugin class maybe.
+ var qfqFabric = new QfqNS.Fabric();
+ qfqFabric.initialize($(".fabric"));
+ });
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/mockup/mockData/fabric.buttons.json b/mockup/mockData/fabric.buttons.json
index 518a7f02b..d0d767009 100644
--- a/mockup/mockData/fabric.buttons.json
+++ b/mockup/mockData/fabric.buttons.json
@@ -87,7 +87,18 @@
"hasToggleElement": false,
"toggleElement": "",
"icon": "glyphicon-trash"
- }
+ },
+ {
+ "name": "rotateRight",
+ "selector": "turn-right",
+ "requiresDrawing": false,
+ "requiresSelection": false,
+ "isToggle": false,
+ "toggle": "",
+ "hasToggleElement": false,
+ "toggleElement": "",
+ "icon": "glyphicon-repeat"
+ }
],
"currentMode": "draw",
"colors": [
diff --git a/mockup/staticFabric.html b/mockup/staticFabric.html
index 1a37e3b22..e34fb11a4 100644
--- a/mockup/staticFabric.html
+++ b/mockup/staticFabric.html
@@ -38,11 +38,7 @@
<div class="row">
<div class="col-md-4">
-
<div class="fabric" data-fabric-json="{"objects":[{"type":"image","originX":"left","originY":"top","left":494.4,"top":8.56,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":2.37,"scaleY":2.37,"angle":52.59,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f604.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":142,"top":88,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f642.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":275,"top":231,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f641.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":100,"top":198,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60a.svg","filters":[],"resizeFilters":[]},{"type":"image","originX":"left","originY":"top","left":296,"top":24,"width":64,"height":64,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/extension/Resources/Public/Emoji/1f60d.svg","filters":[],"resizeFilters":[]},{"type":"path","originX":"center","originY":"center","left":277.1074807371218,"top":362.5,"width":412.21,"height":3,"fill":null,"stroke":"rgba(0,204,255,0.4)","strokeWidth":14,"strokeDashArray":null,"strokeLineCap":"round","strokeLineJoin":"round","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"pathOffset":{"x":277.1074807371218,"y":362.5},"path":[["M",482.5,364],["Q",482.5,364,483,364],["Q",483.5,364,478.75,364],["Q",474,364,471,364],["Q",468,364,458.5,363.5],["Q",449,363,442,363],["Q",435,363,430,363],["Q",425,363,422.5,363],["Q",420,363,415.5,363],["Q",411,363,409.5,363],["Q",408,363,404.5,363],["Q",401,363,399,363],["Q",397,363,390,362],["Q",383,361,379,361],["Q",375,361,372.5,361],["Q",370,361,366,361.5],["Q",362,362,360,362],["Q",358,362,354.5,362],["Q",351,362,346.5,362],["Q",342,362,340,362],["Q",338,362,331.5,362],["Q",325,362,322,362],["Q",319,362,316.5,362],["Q",314,362,311.5,362],["Q",309,362,308,362],["Q",307,362,303,362],["Q",299,362,291.5,362],["Q",284,362,275.5,362.5],["Q",267,363,260.5,363],["Q",254,363,233.5,363],["Q",213,363,204.5,363],["Q",196,363,191,363],["Q",186,363,183,363],["Q",180,363,172.5,363],["Q",165,363,162,363],["Q",159,363,156,363.5],["Q",153,364,148.5,364],["Q",144,364,142,364],["Q",140,364,139,364],["Q",138,364,135,363.5],["Q",132,363,131,363],["Q",130,363,127,363],["Q",124,363,117,362.5],["Q",110,362,106.5,362],["Q",103,362,100.5,362],["Q",98,362,97,362],["Q",96,362,84,363],["Q",72,364,72,363.5],["Q",72,363,71.5,363],["L",71,363]]}],"backgroundImage":{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":609,"height":788,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"crossOrigin":"","alignX":"none","alignY":"none","meetOrSlice":"meet","src":"http://localhost:63342/qfq/mockup/mockData/Scan2a.jpeg","filters":[],"resizeFilters":[]}}" data-view-only="true" data-background-image="mockData/Scan2a.jpeg"></div>
-
-
-
</div>
</div>
</div>
--
GitLab