update fix delete item effect

TRUONG
1 parent bf9639e8ab
Showing 4 changed files with 34 additions and 1 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/tshirt-design.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,
         };
@@ -146,6 +146,7 @@
 		}
  
 		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 @@
 		}
  
 		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() {
@@ -753,6 +753,18 @@
   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*/
@@ -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>
...	...	@@ -47,7 +47,7 @@
47	47	<script src="bower_components/json3/lib/json3.min.js"></script>
48	48	<![endif]-->
49	49	<script type="text/javascript">
50		- var VERSION = '24-11_05';
	50	+ var VERSION = '24-11_06';
51	51	var require = {
52	52	urlArgs: "ver="+VERSION,
53	53	};
...	...	@@ -146,6 +146,7 @@
146	146	}
147	147
148	148	function onIllustrationModifield(options){
	149	+ $('.object-border').hide();
149	150	//
150	151	var pointer = canvas.getPointer(options.e);
151	152	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
152	153
...	...	@@ -197,12 +198,28 @@
197	198	}
198	199
199	200	function onIllustrationMoving(options) {
	201	+ var object = options.target;
200	202	var pointer = canvas.getPointer(options.e);
201	203	if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
202	204	$('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
203	205	}else{
204	206	$('.design-content .trash-design img').attr({'src':'images/trash.png'});
205	207	}
	208	+
	209	+ console.log(object.oCoords,object.originalState);
	210	+ object.setCoords();
	211	+ var Coords = object.oCoords;
	212	+ var diffX = 55, diffY=50;
	213	+ $('#object-border-left').css({'height':object.originalState.height*object.scaleY, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
	214	+ $('#object-border-right').css({'height':object.originalState.height*object.scaleY, top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
	215	+ $('#object-border-top').css({'width':object.originalState.width*object.scaleX, top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
	216	+ $('#object-border-bottom').css({'width':object.originalState.width*object.scaleX, top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
	217	+ $('.object-border').css({
	218	+ '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
	219	+ '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
	220	+ 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
	221	+ });
	222	+ $('.object-border').show();
206	223	}
207	224
208	225	function onObjectOut() {
...	...	@@ -753,6 +753,18 @@
753	753	opacity: 0.5;
754	754	}
755	755
	756	+.object-border{
	757	+ position: absolute;
	758	+ background-color: rgb(0, 108, 255);
	759	+ border: 0;
	760	+ display:none;
	761	+}
	762	+#object-border-top, #object-border-bottom{
	763	+ height: 2px;
	764	+}
	765	+#object-border-right, #object-border-left{
	766	+ width: 2px;
	767	+}
756	768
757	769
758	770	/FOOTER/
...	...	@@ -54,6 +54,10 @@
54	54	<div class="design-content " id="main-design-content">
55	55	<!--<button ng-click="objectDone()" >OK</button>-->
56	56	<div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
	57	+ <div class="object-border" id="object-border-top"></div>
	58	+ <div class="object-border" id="object-border-right"></div>
	59	+ <div class="object-border" id="object-border-bottom"></div>
	60	+ <div class="object-border" id="object-border-left"></div>
57	61	<canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
58	62	</canvas>
59	63	</div>