{"version":3,"sources":["webpack:///src/views/whitetest/FabricTest.vue","webpack:///src/views/whitetest/components/Header.vue","webpack:///./src/views/whitetest/FabricTest.vue?4aaa","webpack:///./src/views/whitetest/components/Header.vue?7b8f","webpack:///./src/assets/images/delete_icon.png","webpack:///./src/assets/images/history_arrow.png","webpack:///./src/views/whitetest/FabricTest.vue","webpack:///./src/views/whitetest/FabricTest.vue?72a6","webpack:///./src/views/whitetest/FabricTest.vue?69de","webpack:///./src/views/whitetest/components/Header.vue","webpack:///./src/views/whitetest/components/Header.vue?a46e","webpack:///./src/views/whitetest/components/Header.vue?381f"],"names":["components","Header","mixins","data","canvasWidth","canvasHeight","objectList","thumbnailUrl","created","mounted","selection","img","fabric","bgImage","left","top","canvas","backgroundImageOpacity","backgroundImageStretch","width","height","originX","originY","scaleX","scaleY","isDown","origX","origY","rect","angle","fill","stroke","strokeWidth","transparentCorners","objectCaching","lockRotation","lockScalingX","lockScalingY","x","y","offsetY","cursorStyle","mouseUpHandler","render","ctx","obj","setTimeout","xmax","xmin","ymax","ymin","boxes","objects","type","methods","makeParams","props","title","default"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2B4B;AACI;AACa;AAC9B;EACfA;IACAC;EACA;EACAC;EACAC;IACAC;IACAC;IACAC;IACAC;EACA;EACAC;IACA;EACA;EACAC;IACA;MACAC;IACA;IACA;IACA;IACAC;IAEAC;IAEA;IACA;IAEAA;MACAC;MACA;MACA;MACA;MAEA;QACA;QACAC;QACAC;MACA;QACA;QACAA;QACAD;MACA;MAEAE;QACA;QACAC;QACA;QACAC;QACAC;QACAC;QACAC;QACAC;QACAP;QACAD;QACAS;QACAC;MACA;IACA;IAEAR;MACA;QACAS;QACA;QACAC;QACAC;QACA;QACAC;UACAd;UACAC;UACAM;UACAC;UACAH;UACAC;UACAS;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;QACA;QACAzB;UACA0B;UACAC;UACAC;UACAC;UACAC;YACA;YACA;YACA1B;YACAA;UACA;UACA2B;YACA;YACAC;YACAA;YACAA;YACAA;YACAA;UACA;QACA;QACA;QACA;UACA5B;UACAA;QACA;MACA;IACA;IAEAA;MACA;MACA;MACA;QACAY;UAAAd;QAAA;MACA;MACA;QACAc;UAAAb;QAAA;MACA;MACAa;QAAAT;MAAA;MACAS;QAAAR;MAAA;MACAJ;IACA;IAEAA;MACAS;MAEA;MACA;MACA;MACA;QACAT;MACA;MAEA;MACA;MACA;IACA;IAEAA;MACA;MACA;MACA;QACA;MACA;MACA6B;MACA;MACA;QACAA;QACAA;MACA;MACA;MACA;QACAA;QACAA;MACA;IACA;IAEAC;MACA;MACA,aACA;QACAC;QACAC;QACAC;QACAC;MACA,EACA;MACAC;QACAC;UACAC;UACAvC;UACAC;UACAM;UACAC;UACAH;UACAC;UACAS;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;UACAC;QACA;MACA;MAEAzB;QACAA;UACA0B;UACAC;UACAC;UACAC;UACAC;YACA;YACA;YACA1B;YACAA;UACA;UACA2B;YACA;YACAC;YACAA;YACAA;YACAA;YACAA;UACA;QACA;QACA5B;QACA;MACA;IACA;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EACA;EACAsC;IACAC;MACA;MACAjD;QACA;MACA;IACA;EACA;AACA,CAAC,E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrR2B;AACb;EACfkD;IACAC;MAAAJ;MAAAK;IAAA;EACA;EACA1D,aAEA;EACAE;EACAC,cAEA;AACA,CAAC,E;;;;;;;;;;;;ACtCD;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,mCAAmC,YAAY,EAAE;AACtD;AACA,oBAAoB,SAAS,uBAAuB,EAAE;AACtD;AACA;AACA;AACA;AACA,kBAAkB,6CAA6C;AAC/D,SAAS;AACT;AACA;AACA;AACA,aAAa,oCAAoC,aAAa,EAAE;AAChE;AACA;AACA,8BAA8B,2BAA2B;AACzD,wBAAwB,uCAAuC;AAC/D,eAAe;AACf;AACA;AACA,iBAAiB,mCAAmC,aAAa,EAAE;AACnE;AACA;AACA;AACA;AACA;AACA,8BAA8B,4BAA4B;AAC1D,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,4BAA4B;AAC5D,uBAAuB;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AC1FA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK,mCAAmC,+BAA+B,EAAE;AACzE;AACA;AACA;AACA;AACA;AACA,kBAAkB,6CAA6C;AAC/D,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,sBAAsB,uCAAuC;AAC7D,aAAa;AACb;AACA;AACA;AACA,iBAAiB,mCAAmC,eAAe,EAAE;AACrE;AACA;AACA;AACA,qBAAqB,mCAAmC,kBAAkB,EAAE;AAC5E;AACA;AACA;AACA;AACA,wCAAwC,uBAAuB;AAC/D;AACA,iCAAiC,2CAA2C;AAC5E,2BAA2B;AAC3B,yBAAyB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B;AAC/B,sCAAsC,gCAAgC;AACtE,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,mBAAO,CAAC,gFAAmC;AAC1E,yBAAyB;AACzB,uBAAuB;AACvB;AACA;AACA,yBAAyB,mCAAmC,eAAe,EAAE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACrFA,iCAAiC,oyB;;;;;;;;;;;ACAjC,iCAAiC,wyB;;;;;;;;;;;;ACAjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAqG;AACvC;AACL;;;AAGzD;AAC6F;AAC7F,gBAAgB,2GAAU;AAC1B,EAAE,gFAAM;AACR,EAAE,iGAAM;AACR,EAAE,0GAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACsG;AAClD;AACM;AAC1D,oGAAiB,aAAa,uEAAI,CAAC,mFAAU,CAAC;;;AAG9C;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;AC7Cf;AAAA;AAAA,wCAAmS,CAAgB,2UAAG,EAAC,C;;;;;;;;;;;;ACAvT;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;;;;;;;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAiG;AACvC;AACL;;;AAGrD;AACgG;AAChG,gBAAgB,2GAAU;AAC1B,EAAE,4EAAM;AACR,EAAE,6FAAM;AACR,EAAE,sGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACyG;AACrD;AACD;AACC;AACpD,oGAAiB,aAAa,uEAAI,CAAC,sEAAI,CAAC,uEAAI,CAAC;;;AAG7C;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;AC9Cf;AAAA;AAAA,wCAA2S,CAAgB,uUAAG,EAAC,C;;;;;;;;;;;;ACA/T;AAAA;AAAA;AAAA;AAAA;AAAA","file":"js/FabricTest.js","sourcesContent":["<template>\n\t<v-container fluid class=\"ma-0 pa-0\">\n\t\t<Header title=\"Fabric Test\" />\n    <v-col class=\"pa-0\" id=\"main_content_maxwidthset\" cols=\"12\">\n\t\t\t<v-col class=\"ma-0 pa-10\" cols=\"12\">\n\t\t\t\t<!-- <v-row class=\"ma-0 pa-0 mb-3\" align=\"center\">\n\t\t\t\t\t<v-btn width=\"auto\" height=\"auto\" class=\"ma-0 pa-2\" \n\t\t\t\t\t\tid=\"blue_btn\" elevation=\"0\" @click=\"canvasClear\">\n\t\t\t\t\t\t{{'Clear'}}\n\t\t\t\t\t</v-btn>\n\t\t\t\t</v-row> -->\n\t\t\t\t<canvas id=\"c\" width=\"500\" height=\"300\" style=\"border:1px solid #ccc\"></canvas>\n\t\t\t\t<v-col class=\"ma-0 pa-3\" cols=\"12\">\n\t\t\t\t\t<v-col class=\"ma-0 pa-0 pb-2\" cols=\"12\" align=\"left\">\n\t\t\t\t\t\t{{ 'cols = ' + canvasWidth + ', rows = ' + canvasHeight}}\n\t\t\t\t\t</v-col>\n\t\t\t\t\t<v-col class=\"ma-0 pa-0\" cols=\"12\" align=\"left\"\n\t\t\t\t\t\tv-for=\"(item, index) in objectList\" :key=\"index\">\n\t\t\t\t\t\t{{'Object ' + index + ' > ' + 'xmin = ' + item.left + ', xmax = ' + item.width + ', ymin = ' + item.top + ', ymax = ' + item.height}}\n\t\t\t\t\t</v-col>\n\t\t\t\t</v-col>\n\t\t\t</v-col>\n\t\t</v-col>\n\t</v-container>\n</template>\n\n<script>\nimport mixin from '@/mixin';\nimport { fabric } from 'fabric';\nimport Header from './components/Header.vue';\nexport default {\n\tcomponents: {\n\t\tHeader\n\t},\n\tmixins: [mixin.common],\n\tdata: () => ({\n\t\tcanvasWidth: 0,\n\t\tcanvasHeight: 0,\n\t\tobjectList: [],\n\t\tthumbnailUrl: '',\n\t}),\n\tcreated() {\n\t\tthis.thumbnailUrl = this.$route.query.thumbnailUrl;\n\t},\n\tmounted() {\n\t\tvar canvas = new fabric.Canvas('c', {\n\t\t\tselection: false,\n\t\t});\n\t\tvar rect, isDown, origX, origY, bgImage;\n\t\tvar img = document.createElement('img');\n\t\timg.src = require(\"@/assets/images/delete_icon.png\");\n\n\t\tfabric.Object.prototype.transparentCorners = false;\n\n\t\tthis.canvasWidth = canvas.width;\n\t\tthis.canvasHeight = canvas.height;\n\n\t\tfabric.Image.fromURL(this.thumbnailUrl, (backImg) => {\n      bgImage = backImg;\n\t\t\tvar canvasAspect = this.canvasWidth / this.canvasHeight;\n\t\t\tvar imgAspect = bgImage.width / bgImage.height;\n\t\t\tvar left, top, scaleFactor;\n\n\t\t\tif (canvasAspect >= imgAspect) {\n\t\t\t\tvar scaleFactor = this.canvasWidth / bgImage.width;\n\t\t\t\tleft = 0;\n\t\t\t\ttop = -((bgImage.height * scaleFactor) - this.canvasHeight) / 2;\n\t\t\t} else {\n\t\t\t\tvar scaleFactor = this.canvasHeight / bgImage.height;\n\t\t\t\ttop = 0;\n\t\t\t\tleft = -((bgImage.width * scaleFactor) - this.canvasWidth) / 2;\n\t\t\t}\n\n\t\t\tcanvas.setBackgroundImage(this.thumbnailUrl, canvas.renderAll.bind(canvas), {\n\t\t\t\t// Optionally add an opacity lvl to the image\n\t\t\t\tbackgroundImageOpacity: 1,\n\t\t\t\t// should the image be resized to fit the container?\n\t\t\t\tbackgroundImageStretch: false,\n\t\t\t\twidth: canvas.width,\n\t\t\t\theight: canvas.height,\n\t\t\t\toriginX: 'left',\n\t\t\t\toriginY: 'top',\n\t\t\t\ttop: top,\n\t\t\t\tleft: left,\n\t\t\t\tscaleX: scaleFactor,\n\t\t\t\tscaleY: scaleFactor,\n\t\t\t});\n    });\n\n\t\tcanvas.on('mouse:down', function(o){\n\t\t\tif(o.target == null) {\n\t\t\t\tisDown = true;\n\t\t\t\tvar pointer = canvas.getPointer(o.e);\n\t\t\t\torigX = pointer.x;\n\t\t\t\torigY = pointer.y;\n\t\t\t\tvar pointer = canvas.getPointer(o.e);\n\t\t\t\trect = new fabric.Rect({\n\t\t\t\t\tleft: origX,\n\t\t\t\t\ttop: origY,\n\t\t\t\t\toriginX: 'left',\n\t\t\t\t\toriginY: 'top',\n\t\t\t\t\twidth: pointer.x-origX,\n\t\t\t\t\theight: pointer.y-origY,\n\t\t\t\t\tangle: 0,\n\t\t\t\t\tfill: 'rgba(0,141,208,0.24)',\n\t\t\t\t\tstroke: 'rgba(0,141,208,1)',\n\t\t\t\t\tstrokeWidth: 1,\n\t\t\t\t\ttransparentCorners: false,\n\t\t\t\t\tobjectCaching: false,\n\t\t\t\t\tlockRotation: true,\n\t\t\t\t\tlockScalingX: true,\n\t\t\t\t\tlockScalingY: true,\n\t\t\t\t});\n\t\t\t\tfabric.Object.prototype.controls.deleteControl = new fabric.Control({\n\t\t\t\t\tx: 0.5,\n\t\t\t\t\ty: -0.5,\n\t\t\t\t\toffsetY: 0,\n\t\t\t\t\tcursorStyle: 'pointer',\n\t\t\t\t\tmouseUpHandler: (eventData, transform) => {\n\t\t\t\t\t\tvar target = transform.target;\n\t\t\t\t\t\tvar canvas = target.canvas;\n\t\t\t\t\t\tcanvas.remove(target);\n\t\t\t\t\t\tcanvas.requestRenderAll();\n\t\t\t\t\t},\n\t\t\t\t\trender: (ctx, left, top, styleOverride, fabricObject) => {\n\t\t\t\t\t\tvar size = 24;\n\t\t\t\t\t\tctx.save();\n\t\t\t\t\t\tctx.translate(left, top);\n\t\t\t\t\t\tctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n\t\t\t\t\t\tctx.drawImage(img, -size/2, -size/2, size, size);\n\t\t\t\t\t\tctx.restore();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\t// console.log(rect.getBoundingRect());\n\t\t\t\tif(origX > 0 && origY > 0) {\n\t\t\t\t\tcanvas.add(rect);\n\t\t\t\t\tcanvas.setActiveObject(rect);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tcanvas.on('mouse:move', function(o){\n\t\t\tif (!isDown) return;\n\t\t\tvar pointer = canvas.getPointer(o.e);\n\t\t\tif(origX > pointer.x){\n\t\t\t\trect.set({ left: Math.abs(pointer.x) });\n\t\t\t}\n\t\t\tif(origY > pointer.y){\n\t\t\t\trect.set({ top: Math.abs(pointer.y) });\n\t\t\t}\n\t\t\trect.set({ width: Math.abs(origX - pointer.x) });\n\t\t\trect.set({ height: Math.abs(origY - pointer.y) });\n\t\t\tcanvas.renderAll();\n\t\t});\n\n\t\tcanvas.on('mouse:up', (o) => {\n\t\t\tisDown = false;\n\n\t\t\tvar pointer = canvas.getPointer(o.e);\n\t\t\t// console.log(canvas.getActiveObject());\n\t\t\t// console.log(origX, Math.abs(origX - pointer.x));\n\t\t\tif(origX + Math.abs(origX - pointer.x) > 500 || origY, Math.abs(origY - pointer.y) > 300) {\n\t\t\t\tcanvas.remove(canvas.getActiveObject());\n\t\t\t}\n\n\t\t\tvar json = JSON.stringify(canvas);\n\t\t\tconsole.log(canvas._objects); // 확인용\n\t\t\tthis.makeParams(canvas._objects);\n\t\t});\n\n\t\tcanvas.on('object:moving', function (e) {\n      var obj = e.target;\n       // if object is too big ignore\n      if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){\n          return;\n      }        \n      obj.setCoords();        \n      // top-left  corner\n      if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){\n          obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);\n          obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);\n      }\n      // bot-right corner\n      if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){\n          obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);\n          obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);\n      }\n    });\n\n\t\tsetTimeout(() => {\n\t\t\tlet objects = [];\n\t\t\tlet boxes = [\n\t\t\t\t{\n\t\t\t\t\txmax: 447,\n\t\t\t\t\txmin: 137,\n\t\t\t\t\tymax: 271,\n\t\t\t\t\tymin: 31\n\t\t\t\t}\n\t\t\t];\n\t\t\tboxes.forEach((item) => {\n\t\t\t\tobjects.push({\n\t\t\t\t\ttype: 'rect',\n\t\t\t\t\tleft: item.xmin,\n\t\t\t\t\ttop: item.ymin,\n\t\t\t\t\toriginX: 'left',\n\t\t\t\t\toriginY: 'top',\n\t\t\t\t\twidth: item.xmax - item.xmin,\n\t\t\t\t\theight: item.ymax - item.ymin,\n\t\t\t\t\tangle: 0,\n\t\t\t\t\tfill: 'rgba(0,141,208,0.24)',\n\t\t\t\t\tstroke: 'rgba(0,141,208,1)',\n\t\t\t\t\tstrokeWidth: 1,\n\t\t\t\t\ttransparentCorners: false,\n\t\t\t\t\tobjectCaching: false,\n\t\t\t\t\tlockRotation: true,\n\t\t\t\t\tlockScalingX: true,\n\t\t\t\t\tlockScalingY: true,\n\t\t\t\t})\n\t\t\t});\n\n    \tfabric.util.enlivenObjects(objects, (objects) => {\n\t\t\t\tfabric.Object.prototype.controls.deleteControl = new fabric.Control({\n\t\t\t\t\tx: 0.5,\n\t\t\t\t\ty: -0.5,\n\t\t\t\t\toffsetY: 0,\n\t\t\t\t\tcursorStyle: 'pointer',\n\t\t\t\t\tmouseUpHandler: (eventData, transform) => {\n\t\t\t\t\t\tvar target = transform.target;\n\t\t\t\t\t\tvar canvas = target.canvas;\n\t\t\t\t\t\tcanvas.remove(target);\n\t\t\t\t\t\tcanvas.requestRenderAll();\n\t\t\t\t\t},\n\t\t\t\t\trender: (ctx, left, top, styleOverride, fabricObject) => {\n\t\t\t\t\t\tvar size = 24;\n\t\t\t\t\t\tctx.save();\n\t\t\t\t\t\tctx.translate(left, top);\n\t\t\t\t\t\tctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));\n\t\t\t\t\t\tctx.drawImage(img, -size/2, -size/2, size, size);\n\t\t\t\t\t\tctx.restore();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tcanvas.add(...objects);\n\t\t\t\tthis.makeParams(canvas._objects);\n\t\t\t});\n\t\t}, 2000);\n\n\t\t// var edgedetection = 10; //pixels to snap\n\t\t// canvas.on('object:moving', (e) => {\n\t\t// \tvar obj = e.target;\n\t\t// \t// if object is too big ignore\n    //   if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){\n    //     return;\n    //   }        \n    //   obj.setCoords();        \n    //   // top-left  corner\n    //   if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){\n    //     obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);\n    //     obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);\n    //   }\n    //   // bot-right corner\n    //   if(obj.getBoundingRect().top+obj.getBoundingRect().height  > obj.canvas.height || obj.getBoundingRect().left+obj.getBoundingRect().width  > obj.canvas.width){\n    //     obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);\n    //     obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);\n    //   }\n\n\t\t// \tobj.setCoords(); //Sets corner position coordinates based on current angle, width and height\n\t\t// \tcanvas.forEachObject(function (targ) {\n\t\t// \t\tvar activeObject = canvas.getActiveObject();\n\t\t// \t\tif (targ === activeObject) return;\n\t\t// \t\tif (Math.abs(activeObject.oCoords.tr.x - targ.oCoords.tl.x) < edgedetection) {\n\t\t// \t\t\tactiveObject.left = targ.left - activeObject.currentWidth;\n\t\t// \t\t}\n\t\t// \t\tif (Math.abs(activeObject.oCoords.tl.x - targ.oCoords.tr.x) < edgedetection) {\n\t\t// \t\t\tactiveObject.left = targ.left + targ.currentWidth;\n\t\t// \t\t}\n\t\t// \t\tif (Math.abs(activeObject.oCoords.br.y - targ.oCoords.tr.y) < edgedetection) {\n\t\t// \t\t\tactiveObject.top = targ.top - activeObject.currentHeight;\n\t\t// \t\t}\n\t\t// \t\tif (Math.abs(targ.oCoords.br.y - activeObject.oCoords.tr.y) < edgedetection) {\n\t\t// \t\t\tactiveObject.top = targ.top + targ.currentHeight;\n\t\t// \t\t}\n\t\t// \t\tif (activeObject.intersectsWithObject(targ) && targ.intersectsWithObject(activeObject)) {\n\t\t// \t\t\ttarg.strokeWidth = 10;\n\t\t// \t\t\ttarg.stroke = 'red';\n\t\t// \t\t} else {\n\t\t// \t\t\ttarg.strokeWidth = 0;\n\t\t// \t\t\ttarg.stroke = false;\n\t\t// \t\t}\n\t\t// \t\tif (!activeObject.intersectsWithObject(targ)) {\n\t\t// \t\t\tactiveObject.strokeWidth = 0;\n\t\t// \t\t\tactiveObject.stroke = false;\n\t\t// \t\t}\n\t\t// \t});\n\t\t// });\n\t},\n\tmethods: {\n\t\tmakeParams(objectList) {\n\t\t\tthis.objectList = [];\n\t\t\tobjectList.forEach((object, index) => {\n\t\t\t\tthis.objectList.push(object);\n\t\t\t});\n\t\t},\n\t}\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n</style>","<template>\n\t<v-col class=\"ma-0 pa-0\" cols=\"12\" id=\"head_title\">\n\t\t<v-col class=\"pa-0\" cols=\"12\" id=\"main_content_minwidthset\">\n\t\t\t<v-row class=\"ma-0 pa-0 pl-3 pr-3\" align=\"center\" id=\"header_height\">\n\t\t\t\t<v-col class=\"ma-0 pa-0\" cols=\"auto\">\n\t\t\t\t\t<v-row class=\"ma-0 pa-0\" align=\"center\">\n\t\t\t\t\t\t<router-link :to=\"{ path: $routerHistory.previous().path }\"\n\t\t\t\t\t\t\tstyle=\"color:transparent;\">\n\t\t\t\t\t\t\t<v-col class=\"ma-0 pa-0\" cols=\"auto\" align=\"center\"\n\t\t\t\t\t\t\t\tstyle=\"color:#08B0FF;font-size:1rem;text-align:center;\">\n\t\t\t\t\t\t\t\t{{'UI 테스트'}}\n\t\t\t\t\t\t\t</v-col>\n\t\t\t\t\t\t</router-link>\n\t\t\t\t\t\t<v-img max-height=\"50px\" max-width=\"1.5rem\" class=\"ma-0 pa-0 mr-3\"\n\t\t\t\t\t\t\tsrc=\"@/assets/images/history_arrow.png\"></v-img>\n\t\t\t\t\t\t<v-col class=\"ma-0 pa-0\" cols=\"auto\">\n\t\t\t\t\t\t\t{{title}}\n\t\t\t\t\t\t</v-col>\n\t\t\t\t\t</v-row>\n\t\t\t\t</v-col>\n      </v-row>\n\t\t</v-col>\n\t</v-col>\n</template>\n\n<script>\nimport mixin from '@/mixin';\nexport default {\n\tprops: {\n\t\ttitle: { type: String, default: '' }\n\t},\n\tcomponents: {\n\t\t\n\t},\n\tmixins: [mixin.common],\n\tdata: () => ({\n\t\t\n\t}),\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n</style>","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"v-container\",\n    { staticClass: \"ma-0 pa-0\", attrs: { fluid: \"\" } },\n    [\n      _c(\"Header\", { attrs: { title: \"Fabric Test\" } }),\n      _c(\n        \"v-col\",\n        {\n          staticClass: \"pa-0\",\n          attrs: { id: \"main_content_maxwidthset\", cols: \"12\" },\n        },\n        [\n          _c(\n            \"v-col\",\n            { staticClass: \"ma-0 pa-10\", attrs: { cols: \"12\" } },\n            [\n              _c(\"canvas\", {\n                staticStyle: { border: \"1px solid #ccc\" },\n                attrs: { id: \"c\", width: \"500\", height: \"300\" },\n              }),\n              _c(\n                \"v-col\",\n                { staticClass: \"ma-0 pa-3\", attrs: { cols: \"12\" } },\n                [\n                  _c(\n                    \"v-col\",\n                    {\n                      staticClass: \"ma-0 pa-0 pb-2\",\n                      attrs: { cols: \"12\", align: \"left\" },\n                    },\n                    [\n                      _vm._v(\n                        \" \" +\n                          _vm._s(\n                            \"cols = \" +\n                              _vm.canvasWidth +\n                              \", rows = \" +\n                              _vm.canvasHeight\n                          ) +\n                          \" \"\n                      ),\n                    ]\n                  ),\n                  _vm._l(_vm.objectList, function (item, index) {\n                    return _c(\n                      \"v-col\",\n                      {\n                        key: index,\n                        staticClass: \"ma-0 pa-0\",\n                        attrs: { cols: \"12\", align: \"left\" },\n                      },\n                      [\n                        _vm._v(\n                          \" \" +\n                            _vm._s(\n                              \"Object \" +\n                                index +\n                                \" > \" +\n                                \"xmin = \" +\n                                item.left +\n                                \", xmax = \" +\n                                item.width +\n                                \", ymin = \" +\n                                item.top +\n                                \", ymax = \" +\n                                item.height\n                            ) +\n                            \" \"\n                        ),\n                      ]\n                    )\n                  }),\n                ],\n                2\n              ),\n            ],\n            1\n          ),\n        ],\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","var render = function () {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"v-col\",\n    { staticClass: \"ma-0 pa-0\", attrs: { cols: \"12\", id: \"head_title\" } },\n    [\n      _c(\n        \"v-col\",\n        {\n          staticClass: \"pa-0\",\n          attrs: { cols: \"12\", id: \"main_content_minwidthset\" },\n        },\n        [\n          _c(\n            \"v-row\",\n            {\n              staticClass: \"ma-0 pa-0 pl-3 pr-3\",\n              attrs: { align: \"center\", id: \"header_height\" },\n            },\n            [\n              _c(\n                \"v-col\",\n                { staticClass: \"ma-0 pa-0\", attrs: { cols: \"auto\" } },\n                [\n                  _c(\n                    \"v-row\",\n                    { staticClass: \"ma-0 pa-0\", attrs: { align: \"center\" } },\n                    [\n                      _c(\n                        \"router-link\",\n                        {\n                          staticStyle: { color: \"transparent\" },\n                          attrs: {\n                            to: { path: _vm.$routerHistory.previous().path },\n                          },\n                        },\n                        [\n                          _c(\n                            \"v-col\",\n                            {\n                              staticClass: \"ma-0 pa-0\",\n                              staticStyle: {\n                                color: \"#08B0FF\",\n                                \"font-size\": \"1rem\",\n                                \"text-align\": \"center\",\n                              },\n                              attrs: { cols: \"auto\", align: \"center\" },\n                            },\n                            [_vm._v(\" \" + _vm._s(\"UI 테스트\") + \" \")]\n                          ),\n                        ],\n                        1\n                      ),\n                      _c(\"v-img\", {\n                        staticClass: \"ma-0 pa-0 mr-3\",\n                        attrs: {\n                          \"max-height\": \"50px\",\n                          \"max-width\": \"1.5rem\",\n                          src: require(\"@/assets/images/history_arrow.png\"),\n                        },\n                      }),\n                      _c(\n                        \"v-col\",\n                        { staticClass: \"ma-0 pa-0\", attrs: { cols: \"auto\" } },\n                        [_vm._v(\" \" + _vm._s(_vm.title) + \" \")]\n                      ),\n                    ],\n                    1\n                  ),\n                ],\n                1\n              ),\n            ],\n            1\n          ),\n        ],\n        1\n      ),\n    ],\n    1\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAABHNCSVQICAgIfAhkiAAAAgtJREFUSEvFl7FSwkAQhm+BXksbFZ9AKJgJDWqrI8gbaE3hCzAjhYWlPoH4BCiOtGgjmbEgvoFo7Qz2gfVfJJkDQnKI4FUkt9nvdm/v9oeUwbi3rF0mKijmFCuVJKKkfIbfDjF3FZETd92bg5cXJ8odhRnULesYTs88QJQzZn6DTaVg2zfTbAOBD5lMyk0krjGZioIEzUvkfeZi0bZlASNjAijp6xPVMLH6G5j3DaDdGKCHtv2o+xkBDveqOQ9oIiLmPR3qA4dpbM4b2ThQIkV60156fSAKxEG1bf9ldFp6nUKrlZbnAVCqEbDrRcB8n8wneduu/gCzWammzUUC5cjguGyRSaGs5XIqc3GhnPNz9dFoTKxrfX9fpcpl9Vwqqc92e+q6cTmk6S6bvUSYp2HReUCxGYd6MJmLAqKArgj794j924lKp+7Ygwa9C/XD/ESz7J8OeK/X1UY+P/A/LdUBR8QRICI1Hzp0FphH+Beg8ZGYN6Vob6/LL5qlH4ulH/xlXW3gdPKtVvJ/Lu9hx1hYe5LqRKcYyBW/H9YsKxkTFUa0Yn4NRFuiS3z1oY0mGrB8alJA0YhRC+kQunwMFlFK3c4bqUSGjB2FiihvbaJvevF49deSA3vWA8xIJuoJGUqPCt6ZqoEOCqQiUmJa6kOVtx4xhPExZL1U2qofOSLBcxd/A5yE61ZNpP43QL44Hoc3T40AAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAABGCAYAAAAuE6+IAAAABHNCSVQICAgIfAhkiAAAAg1JREFUWEfN2FdOKzEUgOHMFiCQAgGEYBPUUJaOIL3QxCro5TH8js5Ek0lmxvaxEPfl6D7w6XcmxXY0mUwOSqXSUxRFz0zVvwisjLAH1lJJ/HFkAMBDxiPgiwaMsTWQXbC2GpO6I+aDpm5aJpi6boYl6u6pe/VZbhpbB9kB66gxqTtm3vnUzZUJ5l23gCXqbql7c1luFlYB2QLrqjGpO2GOXeqWlglWZTZc6jKxRN0I8N1muUWYqdsE66kxqTtlDgA/isDcMsFqzA2bukJMwCazX1Rni5m6Olg/b6lWWKKuB/iZBbpgdZAq2ECNSd0Zs5tVZ10m2AazklXnhCXqOoBf6eX6YKZuHWyoxqTunNlO1zmXJV67hTovLFHXou47Xq4G2wQpg43UmNRdMK8Bf8z/vcsEazBX4zoVlq4LgZm6FerGakzqLplX/wtj1xlumWCzt4dqmVIV5q2RrFK9aYHCfZzAzNeQ/oMOtPQL0usBSJX+yzGryusBgJmfO/0PClDuD7HTawbWpCpzi2CNSVUtb/PiguVWWT8AqsJtqcCstqKFywSy3iTbYKZqaLN9/7utO0s0Rx79oQLI+TCWd3Yyh1inY2LeEXHb9XidhTlXLf0E8FqFO1aDmcsSr+uIuWUCqS5K0pjqCmeGaavmHkCIa69pWagLuRgLclUYXxPu826/ibfgvtNgQapMwC/x4Dpgtg2mSwAAAABJRU5ErkJggg==\"","import { render, staticRenderFns } from \"./FabricTest.vue?vue&type=template&id=7c738236&scoped=true&\"\nimport script from \"./FabricTest.vue?vue&type=script&lang=js&\"\nexport * from \"./FabricTest.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"7c738236\",\n  null\n  \n)\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VCol,VContainer})\n\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/codebuild/output/src127081106/src/ueyes-front/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('7c738236')) {\n      api.createRecord('7c738236', component.options)\n    } else {\n      api.reload('7c738236', component.options)\n    }\n    module.hot.accept(\"./FabricTest.vue?vue&type=template&id=7c738236&scoped=true&\", function () {\n      api.rerender('7c738236', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/views/whitetest/FabricTest.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FabricTest.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FabricTest.vue?vue&type=script&lang=js&\"","export * from \"-!../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"e5f0efc2-vue-loader-template\\\"}!../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FabricTest.vue?vue&type=template&id=7c738236&scoped=true&\"","import { render, staticRenderFns } from \"./Header.vue?vue&type=template&id=3b1ce1c8&scoped=true&\"\nimport script from \"./Header.vue?vue&type=script&lang=js&\"\nexport * from \"./Header.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"3b1ce1c8\",\n  null\n  \n)\n\n/* vuetify-loader */\nimport installComponents from \"!../../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VImg } from 'vuetify/lib/components/VImg';\nimport { VRow } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VCol,VImg,VRow})\n\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/codebuild/output/src127081106/src/ueyes-front/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('3b1ce1c8')) {\n      api.createRecord('3b1ce1c8', component.options)\n    } else {\n      api.reload('3b1ce1c8', component.options)\n    }\n    module.hot.accept(\"./Header.vue?vue&type=template&id=3b1ce1c8&scoped=true&\", function () {\n      api.rerender('3b1ce1c8', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"src/views/whitetest/components/Header.vue\"\nexport default component.exports","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Header.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Header.vue?vue&type=script&lang=js&\"","export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js?{\\\"cacheDirectory\\\":\\\"node_modules/.cache/vue-loader\\\",\\\"cacheIdentifier\\\":\\\"e5f0efc2-vue-loader-template\\\"}!../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Header.vue?vue&type=template&id=3b1ce1c8&scoped=true&\""],"sourceRoot":""}