1 

     2 <template src='./template.html'></template>

     3 

     4 <script>

     5 

     6 import {eventEmitter, computeElementSize} from '../utils'

     7 import ZoomHandler from '../cutout/snapsvg-zoom'

     8 

     9 import Snap from 'snapsvg'

    10 

    11 export default {

    12 

    13 	props: ['image-url', 'image-width', 'image-height', 'zoomTarget', 'main-image-id'],

    14 	

    15 	mounted () {

    16 		this.root = new Snap(this.$refs['root-svg']);

    17 		this.handler = this.root.select('#zoom-handler');

    18 		this.image = this.root.select('#small-image');

    19 		this.root.attr({width: 101, height: 101});

    20 		var imageWidth = parseInt(this.image.attr("width"));

    21 		var imageHeight = parseInt(this.image.attr("height"));

    22 		/* center image in the viewport */

    23 		this.root.attr({viewBox: [0, 0, imageWidth, imageHeight]});

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

    25 

    26 		this.handlerSize = 20;

    27 		this.handler.attr({'width': this.handlerSize, 'height': this.handlerSize});

    28 		this.currentViewBox  = null;

    29 		this.currentViewport = null;

    30 		this.updateFunction = null;

    31 		var target = document.getElementById('zoomTarget');

    32 

    33 		if (target) {

    34 			this.setZoomTarget(target);

    35 		}

    36 		this.handleEvents();

    37 	},

    38 

    39 	data () {

    40 		return {

    41 			showHandler: false

    42 		}

    43 	},

    44 	methods: {

    45 		

    46 		setZoomTarget: function (zoomtarget) {

    47 			

    48 			if (zoomtarget.hasOwnProperty("type") && zoomtarget.type === 'svg') {

    49 				this.paper = zoomtarget; 	

    50 			} else {

    51 

    52 				this.paper = new Snap(zoomtarget);

    53 				var mainImage = this.paper.select("#" + this.mainImageId);

    54 				if (!mainImage) { throw new Error("A main image wasn't found."); };

    55 			}

    56 

    57 			this.zoomHandler =  ZoomHandler.enable_zoom(this.paper);

    58 		},

    59 

    60 		incraseDrawingZoom: function () {

    61 			this.zoomHandler.zoomIn();

    62 		},

    63 

    64 		resetDrawingZoom: function () {

    65 			this.zoomHandler.reset();

    66 		},

    67 

    68 		decreaseDrawingZoom: function () {

    69 			this.zoomHandler.zoomOut();

    70 		},

    71 		

    72 		handleEvents: function () {

    73 			eventEmitter.on('zoomChanged', this.handleZoomChanged.bind(this));

    74 			var self = this;

    75 			

    76 			this.handler.drag(function (dx, dy) {

    77 				var bbox = this.getBBox();

    78 				var startX = this.data("startPosition").x;

    79 				var startY = this.data("startPosition").y;

    80 				var imageWidth = parseInt(self.image.attr('width'));

    81 				var imageHeight = parseInt(self.image.attr('height'));

    82 

    83 				/* New X */

    84 				var newX = startX + dx;

    85 				var newY = startY + dy;

    86 				

    87 				/* XBound */

    88 				if (newX + bbox.w >= imageWidth) {

    89 					newX = imageWidth - bbox.w; 

    90 				}

    91 				/* YBound */

    92 				if (newY + bbox.h >= imageHeight) {

    93 					newY = imageHeight - bbox.h;

    94 				}

    95 

    96 				newX = newX < 0 ? 0: newX;

    97 				newY = newY < 0 ? 0: newY;

    98 

    99 				var transformedValue = "T" + [newX, newY];

   100 				this.attr("transform", transformedValue);

   101 				self.notifyMove(this.getBBox().x, this.getBBox().y);

   102 

   103 			}, function () {

   104 				this.data("startPosition", {x: this.getBBox().x, y: this.getBBox().y});

   105 				this.data("origTransform", this.transform().local);

   106 			}, function () {});

   107 		},

   108 

   109 		moveHandlerToCenter: function (x, c) {

   110 			cx = cx ? cx : this.width / 2;

   111 			cy = cy ? cy : this.height / 2;

   112 			var moveX = cx - this.handler.getBBox().w / 2;

   113 			var moveY = cy - this.handler.getBBox().h / 2;

   114 			this.handler.transform( "T" + [moveX, moveY]);

   115 		},

   116 		

   117 		notifyMove: function (x, y) {

   118 			eventEmitter.emit("moveZoomHandler", {

   119 				x: x,

   120 			 	y: y, 

   121 			 viewport: {

   122 			 	width: this.image.attr("width"),

   123 			 	height: this.image.attr("height")

   124 			 }});

   125 

   126 			if (!this.currentViewBox || !this.currentViewport || typeof this.updateFunction !== 'function') { return false; }

   127 

   128 			/*longueur image=> longueur viewbox */

   129 			var xRatio = this.currentImageSize.width / this.image.attr('width');

   130 			var yRatio = this.currentImageSize.height / this.image.attr('height');

   131 			var newX = x * xRatio;

   132 			var newY = y * yRatio;

   133 			this.currentViewBox[0] = newX;

   134 			this.currentViewBox[1] = newY;

   135 			this.updateFunction(this.currentViewBox);

   136 		},

   137 

   138 		handleZoomChanged: function (zoomInfos) {

   139 			

   140 			if (zoomInfos.currentScale === 1) { 

   141 				this.showHandler = false;

   142 				return; 

   143 			}

   144 

   145 			this.showHandler = true;

   146 

   147 			this.currentViewport = zoomInfos.viewport;

   148 			this.currentViewBox = zoomInfos.currentViewBox;

   149 			this.currentImageSize = zoomInfos.imageSize; 

   150 			this.updateFunction = zoomInfos.updateFunction;

   151 			var handlerSize = zoomInfos.currentViewBox[2] * this.imgMinSize / zoomInfos.minSize;

   152 			

   153 			this.handler.attr("width", handlerSize);

   154 			this.handler.attr("height", handlerSize);

   155 

   156 			/*compute handler x, y */

   157 			var x = zoomInfos.currentViewBox[0] * this.image.attr("width") / zoomInfos.imageSize.width;

   158 			var y = zoomInfos.currentViewBox[1] * this.image.attr("height")/ zoomInfos.imageSize.height;

   159 			this.handler.transform( "T" + [x, y]);

   160 		} 

   161 	}

   162 }

   163 

   164 </script>