From d7aae10e26f87b1795e78b97680498f6c01013e2 Mon Sep 17 00:00:00 2001
From: root <mr.truongld@gmail.com>
Date: Thu, 24 Nov 2016 11:57:24 +0000
Subject: [PATCH] update fix delete item effect

---
 app/index.html                          |  2 +-
 app/scripts/controllers/tshirtdesign.js | 17 +++++++++++++++++
 app/styles/main.css                     | 12 ++++++++++++
 app/views/tshirt-design.html            |  4 ++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/app/index.html b/app/index.html
index 84e4d59..6c94814 100644
--- a/app/index.html
+++ b/app/index.html
@@ -47,7 +47,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '24-11_05';
+        var VERSION = '24-11_06';
         var require = {
           urlArgs: "ver="+VERSION,
         };
diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index e84dcf2..10e0d05 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -146,6 +146,7 @@ define(['app'], function (app) {
 		}
 		
 		function onIllustrationModifield(options){
+			$('.object-border').hide();
 			//
 		    var pointer = canvas.getPointer(options.e);
 			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
@@ -197,12 +198,28 @@ define(['app'], function (app) {
 		}
 		
 		function onIllustrationMoving(options) {
+			var object = options.target;
 			var pointer = canvas.getPointer(options.e);
 			if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
 				$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
 			}else{
 				$('.design-content .trash-design img').attr({'src':'images/trash.png'});
 			}
+			
+			console.log(object.oCoords,object.originalState);
+			object.setCoords();
+			var Coords = object.oCoords;
+			var diffX = 55, diffY=50;
+			$('#object-border-left').css({'height':object.originalState.height*object.scaleY, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
+			$('#object-border-right').css({'height':object.originalState.height*object.scaleY, top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
+			$('#object-border-top').css({'width':object.originalState.width*object.scaleX, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
+			$('#object-border-bottom').css({'width':object.originalState.width*object.scaleX, top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
+			$('.object-border').css({
+				'-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
+    			'-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
+    			'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
+			});
+			$('.object-border').show();
 		}
 
 		function onObjectOut() {
diff --git a/app/styles/main.css b/app/styles/main.css
index 75b2e19..8353823 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -753,6 +753,18 @@ aside .step .finish-design button{
   opacity: 0.5;
 }
 
+.object-border{
+  position: absolute;
+  background-color: rgb(0, 108, 255);
+  border: 0;
+  display:none;
+}
+#object-border-top, #object-border-bottom{
+  height: 2px;
+}
+#object-border-right, #object-border-left{
+  width: 2px;
+}
 
 
 /*FOOTER*/
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html
index 24d27e6..f27cbab 100644
--- a/app/views/tshirt-design.html
+++ b/app/views/tshirt-design.html
@@ -54,6 +54,10 @@
                         <div class="design-content " id="main-design-content">
                             <!--<button ng-click="objectDone()" >OK</button>-->
                             <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
+                                <div class="object-border" id="object-border-top"></div>
+                                <div class="object-border" id="object-border-right"></div>
+                                <div class="object-border" id="object-border-bottom"></div>
+                                <div class="object-border" id="object-border-left"></div>
                                 <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
                                 </canvas>
                             </div>
-- 
1.8.5.3