1 /* enable zoom */

     2 import { eventEmitter } from '../utils'

     3 

     4 class ZoomHandler {

     5 

     6 	constructor (params) {

     7 		this.zoomFactor = 0.1 || params.zoomFactor;

     8 		this.paper = params.paper;

     9 		this.MIN_SIZE = 40;

    10 		this.imageWidth = parseInt(this.paper.select(".main-image").attr("width"));

    11 		this.imageHeight = parseInt(this.paper.select(".main-image").attr("height"));

    12 		

    13 		this.viewport = {

    14 			width: parseInt(this.paper.attr("width")),

    15 			height: parseInt(this.paper.attr("height"))

    16 		};

    17 

    18 		this.scale = 1;

    19 		this.paper.attr({stroke: 2, "fill": "blue" });

    20 		this.disableDrag = false;

    21 		this.imgMinSize = Math.min(this.imageWidth, this.imageHeight);

    22 		this.lastPosition = []; 

    23 		this.updateViewBox([0 , 0, this.imageWidth, this.imageHeight]);

    24 	}

    25 

    26 	testShowCenter (cx, cy) {

    27 	

    28 		if (this.center) {

    29 			this.center.remove();

    30 		}

    31 		this.center = this.paper.rect(cx - 3, cy - 3, 20, 20);

    32 		this.center.attr({"fill" : "red"});

    33 	}

    34 	

    35 	drawTestRectangle (cx, cy, w, h) {

    36 		var x = cx - w / 2;

    37 		var y = cy - h / 2;

    38 		this.paper.rect(x, y, w, h);

    39 	}

    40 

    41 	zoomIn () {

    42 

    43 		/* current center */

    44 		if ( this.scale === 9) { this.scale--; return; }

    45 		var currentCenterX = this.currentViewBox[0] + (this.currentViewBox[2] / 2);

    46 		var currentCenterY = this.currentViewBox[1] + (this.currentViewBox[3] / 2);

    47 		var scaleFactor = this.zoomFactor * this.scale;

    48 		var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);  

    49 		var viewBoxH = viewBoxW;

    50 		

    51 		this.currentViewBox[0] = currentCenterX - viewBoxW / 2;

    52 		this.currentViewBox[1] = currentCenterY - viewBoxH / 2;

    53 

    54 		this.currentViewBox[2] = viewBoxW;

    55 		this.currentViewBox[3] = viewBoxH;

    56 		this.scale ++;

    57 		this.updateViewBox();

    58 	}

    59 	

    60 	updateViewBox (currentViewBox, notify) {

    61 		notify = (typeof notify === "boolean") ? notify : true;

    62 

    63 		if (currentViewBox && currentViewBox.length != 4) { throw new Error("Provided currentViewBox is not valid!"); }

    64 		if (currentViewBox) {

    65 			this.currentViewBox = currentViewBox;

    66 		}

    67 		

    68 		this.paper.attr({"viewBox": this.currentViewBox});

    69 

    70 		if (!notify) { return false; }

    71 

    72 		var self = this;		

    73 		eventEmitter.emit("zoomChanged", {

    74 			updateFunction: function (updatedViewBox) {

    75 				self.updateViewBox(updatedViewBox, false);

    76 			},

    77 			"zoomFactor": this.getZoomFactor(),

    78 			"viewport": this.viewport,

    79 			"currentScale": this.scale,

    80 			"imageSize": {width: this.imageWidth, height: this.imageHeight}, 

    81 			"minSize": Math.min(this.imageWidth, this.imageHeight),

    82 			"currentViewBox": this.currentViewBox.slice()

    83 		});

    84 	}

    85 	

    86 	getZoomFactor () {

    87 		return {

    88 			x: this.viewport.width / this.currentViewBox[2],

    89 			y: this.viewport.height / this.currentViewBox[3]	

    90 		};

    91 	}

    92 

    93 	onStart (x, y, e) {

    94 		

    95 		this.lastPosition[0] = this.currentViewBox[0];

    96 		this.lastPosition[1] = this.currentViewBox[1];

    97 

    98 		if (e.target.className.baseVal === "drawingHandler") {

    99 			this.disableDrag = true;

   100 		}

   101 	}

   102 

   103 	canDrag () {

   104 		return !this.disableDrag;

   105 	}

   106 

   107 	onStop () {

   108 		this.disableDrag = false;

   109 	}

   110 

   111 	onDrag (dx, dy, x, y, event) {

   112 

   113 		if (!this.canDrag()) { return true; }

   114 

   115 		var newX = this.lastPosition[0] - dx;

   116 		var newY = this.lastPosition[1] - dy;

   117 

   118 		/* maxX bound */

   119 		if (newX + this.currentViewBox[2] >= this.viewport.width) {

   120 			newX = this.viewport.width - this.currentViewBox[2];

   121 		}

   122 

   123 		/* maxY bound */

   124 		if (newY + this.currentViewBox[3] >= this.viewport.height) {

   125 			newY = this.viewport.height - this.currentViewBox[3];

   126 		}

   127 

   128 		if (newX <= 0) { newX = 0; }

   129 

   130 		if(newY <= 0) { newY = 0; }

   131 

   132 		this.currentViewBox[0] = newX;

   133 		this.currentViewBox[1] = newY;

   134 

   135 		this.updateViewBox();

   136 	}

   137 

   138 	reset () {

   139 		this.scale = 1;

   140 		this.currentViewBox = [0, 0, this.imageWidth, this.imageHeight];

   141 		this.updateViewBox();

   142 	}

   143 

   144 	zoomOut () {

   145 		if (this.scale == 1) { 

   146 			return false; 

   147 		}

   148 

   149 		var currentCenterX = this.currentViewBox[0] + (this.currentViewBox[2] / 2);

   150 		var currentCenterY = this.currentViewBox[1] + (this.currentViewBox[3] / 2);

   151 		var scaleFactor = this.zoomFactor * (this.scale - 1);

   152 

   153 		var viewBoxW = this.imgMinSize - (this.imgMinSize * scaleFactor);

   154 		var viewBoxH = viewBoxW;

   155 

   156 		var topX = currentCenterX - viewBoxW / 2;

   157 		var topY = currentCenterY - viewBoxH / 2;

   158 

   159 		this.currentViewBox[0] = topX; //deal with X and Y

   160 		this.currentViewBox[1] = topY; 

   161 		this.currentViewBox[2] = viewBoxW;

   162 		this.currentViewBox[3] = viewBoxH;

   163 		this.updateViewBox();

   164 		this.scale--;

   165 	}

   166 }

   167 

   168 export default {

   169 

   170 	enable_zoom: function (params) {

   171 		return new ZoomHandler(params);

   172 	}

   173 }