From 8b1840d633e94d94e91eda3256dc60e99ed0f493 Mon Sep 17 00:00:00 2001 From: Nico Rehwaldt Date: Fri, 11 Apr 2014 17:11:10 +0200 Subject: [PATCH] feat(zoomscroll): add zoom scroll util We can now zoom / scroll the diagram via the newly created zoomScroll service. Closes #14 --- lib/Modeler.js | 3 +- lib/Viewer.js | 9 ++-- lib/feature/zoomscroll/Service.js | 64 +++++++++++++++++++++++++++ lib/feature/zoomscroll/mousewheel.js | 8 ++++ package.json | 3 +- resources/bpmnjs.png | Bin 1414 -> 633 bytes 6 files changed, 81 insertions(+), 6 deletions(-) create mode 100644 lib/feature/zoomscroll/Service.js create mode 100644 lib/feature/zoomscroll/mousewheel.js diff --git a/lib/Modeler.js b/lib/Modeler.js index 9f786aa0..d51a88f3 100644 --- a/lib/Modeler.js +++ b/lib/Modeler.js @@ -4,6 +4,7 @@ var bpmnModule = require('./di').defaultModule, Viewer = require('./Viewer'); require('./draw/BpmnRenderer'); +require('./feature/zoomscroll/Service'); require('diagram-js/lib/features/dnd/Visuals'); require('diagram-js/lib/features/selection/Visuals'); @@ -27,7 +28,7 @@ Modeler.prototype.createDiagram = function() { return new Diagram({ canvas: { container: this.container }, modules: [ bpmnModule ], - components: [ 'selectionVisuals', 'dragVisuals' ] + components: [ 'selectionVisuals', 'dragVisuals', 'zoomScroll' ] }); }; diff --git a/lib/Viewer.js b/lib/Viewer.js index 622bf73f..3e45d63d 100644 --- a/lib/Viewer.js +++ b/lib/Viewer.js @@ -10,6 +10,8 @@ var Importer = require('./import/Importer'), var bpmnModule = require('./di').defaultModule; require('./draw/BpmnRenderer'); +require('./feature/zoomscroll/Service'); + require('diagram-js/lib/features/selection/Visuals'); @@ -56,12 +58,11 @@ function Viewer(options) { var logoData = fs.readFileSync('resources/bpmnjs.png', 'base64'); - var a = $('').css({ + var a = $('').css({ position: 'absolute', bottom: 15, right: 15, - 'z-index': 100, - opacity: 0.8 + zIndex: 100 }); var logo = $('').attr('src', 'data:image/png;base64,' + logoData).appendTo(a); @@ -163,7 +164,7 @@ Viewer.prototype.createDiagram = function() { return new Diagram({ canvas: { container: this.container }, modules: [ bpmnModule ], - components: [ 'selectionVisuals' ] + components: [ 'selectionVisuals', 'zoomScroll' ] }); }; diff --git a/lib/feature/zoomscroll/Service.js b/lib/feature/zoomscroll/Service.js new file mode 100644 index 00000000..581c0284 --- /dev/null +++ b/lib/feature/zoomscroll/Service.js @@ -0,0 +1,64 @@ +var mousewheel = require('./mousewheel'); + +var bpmnModule = require('../../di').defaultModule; + +function ZoomScroll(events, canvas) { + + var RANGE = { min: 0.2, max: 4 }; + + var ZOOM_OFFSET = 5; + var SCROLL_OFFSET = 50; + + function cap(scale) { + return Math.max(RANGE.min, Math.min(RANGE.max, scale)); + } + + function zoom(direction, position) { + + var currentZoom = canvas.zoom(); + var factor = 1 + (direction / ZOOM_OFFSET); + + canvas.zoom(cap(currentZoom * factor), position); + } + + + function initMouseWheel(element) { + + mousewheel(element).on('mousewheel', function(event) { + + var shift = event.shiftKey, + ctrl = event.ctrlKey; + + var x = event.deltaX, + y = event.deltaY; + + if (shift || ctrl) { + var delta = {}; + + if (ctrl) { + delta.dx = SCROLL_OFFSET * x; + } else { + delta.dy = SCROLL_OFFSET * x; + } + + canvas.scroll(delta); + } else { + zoom(y, { x: event.offsetX, y: event.offsetY }); + } + + event.preventDefault(); + }); + } + + events.on('canvas.init', function(e) { + initMouseWheel(e.paper.node); + }); + + // API + this.zoom = zoom; +} + + +bpmnModule.type('zoomScroll', [ 'eventBus', 'canvas', ZoomScroll ]); + +module.exports = ZoomScroll; \ No newline at end of file diff --git a/lib/feature/zoomscroll/mousewheel.js b/lib/feature/zoomscroll/mousewheel.js new file mode 100644 index 00000000..1200e2ec --- /dev/null +++ b/lib/feature/zoomscroll/mousewheel.js @@ -0,0 +1,8 @@ +var $ = require('jquery'); + +// init mouse wheel plugin +require('jquery-mousewheel')($); + +module.exports = function(element) { + return $(element); +}; \ No newline at end of file diff --git a/package.json b/package.json index e37b423c..d5a4de70 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "peerDependencies": { "lodash": "~2.4.0", "didi": "~0.0.4", - "jquery": "~2.1.0" + "jquery": "~2.1.0", + "jquery-mousewheel": "^3.1.11" } } diff --git a/resources/bpmnjs.png b/resources/bpmnjs.png index 380704acac5378445ff7cd70b4270eb523338bce..2bc56c71356bfe52d511af3f1823acc0525f8a39 100644 GIT binary patch delta 607 zcmV-l0-*hd3;6^giBL{Q4GJ0x0000DNk~Le0000q0000q2m=5B0P?2m*^wb9e*iF0 zOjJdP%U<;Q@RiYUea26!+Ktof#K`BhT(~2?;-_-LKxe%&>Gk2>@YDbQ|5CIS|Ns9R zY|Z!p000nlQchF<|NsC0|NsC0|NsC0|Nj8sBV8E)00F~EL_t(|+Ps!Yl7%1)KuMSd z{P(|YGt0LVtai~^SS9gAGJ^QLe-QBjJXvw62so71N^EZ_Wk`^pBOdutzfpE9TGb&S znIr2$wG4h;_ppIf-^q>Xl=zSk49MR#vid}NG#Et%hk?4s2`uF<17(#ikfT(Fh0e23 zWD4;Cl9WPjpt3#tFVLIq*~kS#u@KgpFqA4Xkk`E;{*v5X85y=B!k{E!e~*K3+W zK##eo4u}}`DlizH{DeyE%zNVOAA<+*j73h$Psm* z9w0~6IM^)|EZI(K3lYtSoE9tujY%4-j^O`xNuYyG~497!jP*)lLM<-P1`}QX4HDHQQO_=-in%8cb tD<^l47;~k~Yx6Zr>4P;xFXTsn0RU2Zi3KN$_&@*v002ovPDHLkV1jUZ8x{Zn delta 1394 zcmV-&1&#Xo1cnPCiBL{Q4GJ0x0000DNk~Le0000r0000q2nGNE04ln0)sZ15e+4K> zL_t(|+T2<_OjA)5zK@haNWf?)4uUjM2Ow&KQ522BrglIF>tg&F)B#-lVZnbEMH8bA z>HxY~2E+t3E>NQqHJXT_3^LG&1Gd2k2{1@f-}mG;_uY5jAKcqUPl8SR+WYQz&pF>Y z=X(CzBF8G* zgx7{A-;#mvPe^=nkfi3uEeEk>)gDs6`VcA1FE(9Er_(Y0rBMerr7<2#$OeSXw`_h) z64S%v!^8^`|2b%Uesf1Z2^CkHzB@KGOgcweGv9GrHyk=iBJ0obmoDp|f39eZmtwL# zvU_!eG;h3X**p(uVEhTW_vN(j^(%_1$ko~&)@unJR47knm_^oEPEr~m1Hp8hTzuC^ zW`0j)aN?gll|&FMD0lo0ytY_CEUIZ80Da%U)zm8CNwN8 z=Y*wzx`Di(cy754+LmcJpycc~wV*4+4X)VhhuLFxCR zYbpoj1Xi{s7uL)QC@^6*Ei0gs3cQkYP^teBlqmer;z+;G%I)ewl`JbG=W8AbM+|h@ zvYY4Xm33-C?W;IJZtd(RTUYHBcO0dAq}~r*yYlcu=giMMtf4PFe<)~p7we^P=!AMu zy<-pDyLf#bl95|Y8}FD7P-&ZlvBJ$T4=n{)(}p{i5LZeRw7)}Bi~g@8-b(HcHCw_I z!2ISILJlNUUv@|=ym*;>u>hYVm}A^(5WIky$892p0eIioL&xr&j`GMMem`hvOAFU% z0k0<`VzHo3*>0eCe?YL<_o)8ca*M`*d*Bb7LvzY^BB(=@wnYOcreKqrPYVep0!#WgD29#SDU1j6)l7cc@ zFT##hUNhLqDc_uGncwz^nh}0zWB!UD&6ym)W}yZ_Yp}a9f8zUo!zUvLdi4Yc+u_9U z+m@Qg8RZDzuYWvZI?ca_DLyQ$Hz4pL4ndUL{5l5vrPFDH{Xo6Y6+%VTLaKB#{2stW z3Mx%x78n>+v`HKQ#1s+p;SfcKeE8*BW9{y6O3UMG#__7QMFFC}2i=Np3a{}^EEtX# zW+2Fj0MUXTe`N#~mMGYJnmpyC&&7Yf)x%=kkdSGffhe59lV9WPn+D-E)GYu;IG^gT zaV-;&tqb#uj1Wa+u-}KL96{j(K)s?`!*2@tXGg>E22>@t%_6+`yt6AYc54Atz-|-Z zeY-FaQ7Rq)pyr4|*GuO?!%M~_9S{LRLc4iKv>`~ye>3w_rr9PJmM3B!zkpcl9JyfW z&QY&&1`3;zAq97gw3=8AxrV&U38?63yR=yf#aQL|?gPNB~qGy9aFO|71Ojavw zg7k7;hZAYrb~>D$*-2j#3=X;69Zo&Nn?C{!07n>IS83z2&Hw-a07*qoM6N<$f*N|2 Ae*gdg