--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/src/components/cutout/Cutout.vue	Fri Aug 19 19:04:26 2016 +0200
@@ -0,0 +1,170 @@
+<script>
+
+	import svgboard from './svgboard'
+	import Typeahead from '../typeahead/Typeahead.vue'
+	import Zoomview from '../zoomview/Zoomview.vue'
+
+	export default {
+
+		el: '#drawing-zone',
+		MODE_RECT: 'RECT',
+		MODE_FREE: 'FREE',
+		ZOOM_IN: 'in',
+		ZOOM_OUT: 'out',
+
+		components: {typeahead: Typeahead, zoomview: Zoomview},
+		data: { 
+			mode:"",
+			isRect: true,
+			normalizePath: "",
+			readOnly: false,
+			formView: true,
+			useClipPath: false,
+			transformMatrix: "",
+			fragmentPath: "",
+			canZoom: true,
+			displayMask: false
+		},
+
+		mounted () {
+			var self = this;
+			this.initialDrawingMode = null;
+			this.drawingComponent = svgboard.init({ 
+				wrapperId: '#iconolab-image-wrapper',
+					actionWrapper: '#action-wrapper',
+					readOnly: false,
+					onDrawingModeChange: function (mode) {
+						self.setDrawingMode(mode, false);
+					}
+			});
+			this.$refs.zoomview.setZoomTarget(this.drawingComponent.getPaper());
+			this.showEditor();
+			this.drawingComponent.createTestHandler(10,20, 50);
+		},
+
+		methods: {
+
+			computeCentreredViewBox: function () {
+				var zoomSvg = this.$refs.zoomSvg;
+				var viewBox = [];
+				var imageWidth = zoomSvg.getAttribute("width"); 
+				var imageHeight = zoomSvg.getAttribute("height");
+
+				/* normalize */
+				var xRatio = imageWidth / 100 ;
+				var yRatio = imageHeight / 100;
+
+				var zTarget = this.drawingComponent.getShapeBBox(); 
+				viewBox = [(zTarget.x - 1) * xRatio, (zTarget.y - 1) * yRatio, (zTarget.w + 2) * xRatio, (zTarget.h + 2) * yRatio];
+				return viewBox.join(" ");
+
+			},
+
+			computeZoomedViewBox: function () {
+				var viewBoxArray = [];
+				var zoomSvg = this.$refs.zoomSvg;
+				var shapeBBox = this.drawingComponent.getShapeBBox();
+				var imageWidth = zoomSvg.getAttribute("width");
+				var imageHeight = zoomSvg.getAttribute("height");
+				var xRatio = imageWidth / 100;
+				var yRatio = imageHeight / 100;
+				/* denormalize coordonate, max is imageX * 100x = imageHeigth*/
+				shapeBBox.x = shapeBBox.x * xRatio;
+				shapeBBox.y = shapeBBox.y * yRatio;
+
+				shapeBBox.w = shapeBBox.w * xRatio;
+				shapeBBox.h = shapeBBox.h * yRatio;
+
+	        	var imgRatio = imageWidth / imageHeight;
+		        if (shapeBBox.w > shapeBBox.h) {
+		            shapeBBox.y = Math.max(0, shapeBBox.y - (((shapeBBox.w * imgRatio) - shapeBBox.h) / 2));
+		            shapeBBox.h = shapeBBox.w * imgRatio;
+		        }
+		       	else {
+		       		shapeBBox.x = Math.max(0, shapeBBox.x - (((shapeBBox.h / imgRatio) - shapeBBox.w) / 2));
+		            shapeBBox.w = shapeBBox.h / imgRatio;
+		       	}
+		       	viewBoxArray = [shapeBBox.x, shapeBBox.y, shapeBBox.w, shapeBBox.h];
+
+				if (!shapeBBox) { return false; }
+			
+				return viewBoxArray.join(" ");
+			},
+
+			zoom: function (direction) {
+
+				var mainSvgWrapper = this.$refs.smallSvgWrapper;
+				if (this.$options.ZOOM_OUT === direction) {
+					var defaultViewBox = [0, 0, mainSvgWrapper.getAttribute("width"), mainSvgWrapper.getAttribute("height")];
+					mainSvgWrapper.setAttribute("viewBox", defaultViewBox.join(" "));
+					this.canZoom = true;
+				}
+
+				if (this.$options.ZOOM_IN === direction) { 
+					mainSvgWrapper.setAttribute("viewBox", this.computeCentreredViewBox());//this.computeZoomedViewBox());//
+					this.canZoom = false; 
+				}
+			},
+
+			setDrawingMode: function (mode, updateComponent) {
+				if (!this.initialDrawingMode) {
+					this.initialDrawingMode = mode;//useful for cancel
+				}
+				var updateComponent = (typeof updateComponent === "boolean") ? updateComponent: true;
+				this.mode = this.$options['MODE_' + mode];
+				this.isRect = (this.mode === this.$options.MODE_RECT) ? true: false;
+				if (updateComponent) {
+					this.drawingComponent.setDrawingMode(this.mode);
+				}
+			},
+			
+			cancel: function () {
+				this.formView = true;
+				var currentPath = this.$refs.currentPath.getAttribute("d");
+				if (!currentPath.length || !this.initialDrawingMode) { return; } {
+					currentPath += ";" + this.initialDrawingMode; 
+					this.drawingComponent.setPath(currentPath);
+				}
+			},
+
+			highLightZone: function () {
+				if (!this.displayMask) {
+					this.displayMask = true;
+				}
+				else {
+					this.displayMask = false;
+				}
+			},
+
+			displayEditedPath: function () {
+				var normalizePath = this.drawingComponent.getPath();
+			},
+			
+			resetZoom: function () {
+				this.zoom(this.$options.ZOOM_OUT);
+			},
+
+			showEditor: function () {
+				this.formView = true;
+				this.resetZoom();
+				/* on edit mode reset*/
+			},
+
+			showForm: function () {
+				this.normalizePath = this.drawingComponent.getPath();
+				var smallImage = this.$refs.smallImage;
+				this.formView = true;
+				var xRatio = smallImage.getAttribute("width") / 100;
+				var yRatio = smallImage.getAttribute("height") / 100;
+				var transformMatrix = [xRatio, 0, 0, yRatio, 0, 0].join(',');
+				this.transformMatrix ="matrix(" + transformMatrix + ")";
+				this.fragmentPath = this.normalizePath.split(';')[0];
+			},
+
+			clear: function () {
+				this.drawingComponent.clear();
+			}
+		}
+	}
+</script>
+