From 3c6b02a3167761a31026f752c7fa98d09591ec34 Mon Sep 17 00:00:00 2001
From: bbaer <bbaer@math.uzh.ch>
Date: Wed, 22 Nov 2017 13:00:20 +0100
Subject: [PATCH] Rightclick to zoom out in zoom mode
---
javascript/src/Plugins/qfq.fabric.js | 20 ++++++++++++++++----
mockup/staticFabric.html | 2 +-
2 files changed, 17 insertions(+), 5 deletions(-)
diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index 18f5e3747..7471713b7 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -49,6 +49,7 @@ $(function (n) {
this.backgroundImage = '';
this.fabricJSON = '';
this.showObject = true;
+ this.mouseInsideCanvas = false;
// Handles button states and generation of said buttons. Should be renamed.
function ModeSettings() {
@@ -350,6 +351,7 @@ $(function (n) {
this.canvas.on('mouse:up', function (e) { that.defaultMouseUpEvent(e) });
this.canvas.on('mouse:down', function (e) { that.defaultMouseDownEvent(e) });
this.canvas.on('mouse:move', function (e) { that.defaultMouseMoveEvent(e) });
+ this.canvas.on('mouse:over', function(e) { that.defaultMouseInEvent(e) });
this.canvas.on('mouse:out', function (e) { that.defaultMouseOutEvent(e) });
this.canvas.on('after:render', function(e) { that.defaultRenderHandler(e) });
this.canvas.on('object:added', function(e) { that.defaultChangeHandler(e) });
@@ -361,6 +363,7 @@ $(function (n) {
this.canvas.on('selection:cleared', function(e) { that.defaultSelectionClearHandler(e) });
window.addEventListener('keydown', function(e) { that.defaultKeyStrokeHandler(e) });
window.addEventListener('dragend', function(e) { that.dragEndEvent(e) });
+ this.parentElement.on('contextmenu', function(e) { that.defaultRightClickHandler(e); if(that.isZoomMode) { return false; } });
$(window).resize(function() { that.resizeCanvas(); });
};
@@ -372,10 +375,9 @@ $(function (n) {
}
};
- n.Fabric.prototype.dndMouseOutEvent = function(e) {
- if (this.dragAndDrop) {
- $('window').mousedown(e);
- }
+ n.Fabric.prototype.defaultMouseInEvent = function(e) {
+ this.mouseInsideCanvas = true;
+ console.log("Mouse entered Canvas");
};
n.Fabric.prototype.resizeCanvas = function () {
@@ -615,7 +617,17 @@ $(function (n) {
}
};
+ n.Fabric.prototype.defaultRightClickHandler = function(e) {
+ if (this.isZoomMode) {
+ this.zoomCanvas(e, -0.1);
+ return false;
+ }
+ };
+
n.Fabric.prototype.defaultMouseOutEvent = function(e) {
+ this.mouseInsideCanvas = false;
+ console.log("Mouse left Canvas");
+
if (this.moveMode) {
this.deactivatePanning();
}
diff --git a/mockup/staticFabric.html b/mockup/staticFabric.html
index 90e5f722b..1a37e3b22 100644
--- a/mockup/staticFabric.html
+++ b/mockup/staticFabric.html
@@ -40,7 +40,7 @@
<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>
--
GitLab