From aff3eb043c4767e889cf95ba1ffa596fdaeb60ab Mon Sep 17 00:00:00 2001
From: root <mr.truongld@gmail.com>
Date: Tue, 15 Nov 2016 05:06:54 +0000
Subject: [PATCH] update illustration interactive

---
 app/index.html                          |   2 +-
 app/scripts/controllers/tshirtdesign.js | 154 ++++++++++++++++++++++++--------
 app/styles/main.css                     |  23 +++--
 app/views/tshirt-design.html            |  13 +--
 4 files changed, 143 insertions(+), 49 deletions(-)

diff --git a/app/index.html b/app/index.html
index 579c2c2..5726cdf 100644
--- a/app/index.html
+++ b/app/index.html
@@ -46,7 +46,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '13-11_01';
+        var VERSION = new Date().getTime();
         var require = {
           urlArgs: "ver="+VERSION,
         };
diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index 760efa4..ddb3e39 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -9,11 +9,78 @@ define(['app'], function (app) {
 		canvas.on('after:render', function() {
 		});
 		canvas.on({
+			'object:added': onIllustrationAdded,
 			'object:moving': onIllustrationChange,
 			'object:scaling': onIllustrationChange,
 			'object:rotating': onIllustrationChange,
 			'object:selected': onllustrationSelected,
+			'object:modified': onllustrationModifield
 		});
+		
+		var currentObj;
+		var listObj = [];
+		var stateObj = [];
+		var indexCurr = 0;
+		var indexCurr2 = 0;
+		var actionObj = false;
+		var refreshObj = true;
+		
+		function onIllustrationAdded(options){
+			var object = options.target;
+		    console.log('object:added');
+		
+		    if (actionObj === true) {
+		        stateObj = [stateObj[indexCurr2]];
+		        listObj = [listObj[indexCurr2]];
+		
+		        actionObj = false;
+		        console.log(stateObj);
+		        indexCurr = 1;
+		    }
+		    object.saveState();
+		
+		    console.log(object.originalState);
+		    stateObj[indexCurr] = JSON.stringify(object.originalState);
+		    listObj[indexCurr] = object;
+		    indexCurr++;
+		    indexCurr2 = indexCurr - 1;
+		    refreshObj = true;
+		}
+		
+		function onllustrationModifield(options){
+			var objOffset = canvas.getActiveObject().getBoundingRect();
+			var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
+			console.log(objOffset,canvas.height,canvas.width);
+			if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
+				if (confirm('削除してもよろしいですか')){
+					canvas.getActiveObject().remove();
+				}else{
+					undoCanvas();
+					return;
+				}
+			}
+			
+			var object = options.target;
+		    console.log('object:modified');
+		    if (actionObj === true) {
+		        stateObj = [stateObj[indexCurr2]];
+		        listObj = [listObj[indexCurr2]];
+		
+		        actionObj = false;
+		        console.log(stateObj);
+		        indexCurr = 1;
+		    }
+		
+		    object.saveState();
+		
+		    stateObj[indexCurr] = JSON.stringify(object.originalState);
+		    listObj[indexCurr] = object;
+		    indexCurr++;
+		    indexCurr2 = indexCurr - 1;
+		    console.log(stateObj);
+		    refreshObj = true;
+		}
+		
 		function onIllustrationChange(options) {
 			// options.target.setCoords();
 			// canvas.forEachObject(function(obj) {
@@ -22,10 +89,50 @@ define(['app'], function (app) {
 			// });
 		}
 
-		$scope.currentObject = null;
 		function onllustrationSelected(options){
-			$scope.currentObject = canvas.getActiveObject();
-			console.log(canvas.getActiveObject());
+			//console.log(canvas.getActiveObject());
+		}
+		
+		function undoCanvas() {
+		    if (indexCurr <= 0) {
+		        indexCurr = 0;
+		        return;
+		    }
+		
+		    if (refreshObj === true) {
+		        indexCurr--;
+		        refreshObj = false;
+		    }
+		
+		    console.log('undo');
+		
+		    indexCurr2 = indexCurr - 1;
+		    currentObj = listObj[indexCurr2];
+		    if (currentObj){
+		    	currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
+		    }
+		
+		    indexCurr--;
+		    currentObj.setCoords();
+		    canvas.renderAll();
+		    actionObj = true;
+		}
+		
+		function redoCanvas() {
+		    actionObj = true;
+		    if (indexCurr >= stateObj.length - 1) {
+		        return;
+		    }
+		
+		    console.log('redo');
+		
+		    indexCurr2 = indexCurr + 1;
+		    currentObj = listObj[indexCurr2];
+		    currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
+		
+		    indexCurr++;
+		    currentObj.setCoords();
+		    canvas.renderAll();
 		}
 
 		// Illustration process
@@ -47,41 +154,16 @@ define(['app'], function (app) {
 
 		// color pattern
 		$scope.changeColorPattern = function(color){
-			canvas.getActiveObject().set("fill", color);
-            canvas.renderAll();
+			if (canvas.getActiveObject()){
+				canvas.getActiveObject().set("fill", color);
+    	        canvas.renderAll();
+			}
 		};
 		$scope.listColorPatterns = [
-			'#000000',
-			'#ffff00',
-			'#ff6600',
-			'#ff0000',
-			'#ff6262',
-			'#ffa19c',
-			'#ff9933',
-			'#c45d01',
-			'#5d2b03',
-			'#ffffcc',
-			'#000000',
-			'#ffff00',
-			'#ff6600',
-			'#ff0000',
-			'#ff6262',
-			'#ffa19c',
-			'#ff9933',
-			'#c45d01',
-			'#5d2b03',
-			'#ffffcc',
-			'#000000',
-			'#ffff00',
-			'#ff6600',
-			'#ff0000',
-			'#ff6262',
-			'#ffa19c',
-			'#ff9933',
-			'#c45d01',
-			'#5d2b03',
-			'#ffffcc',
-			'#ffffcc'
+			'#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
+			'#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
+			'#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
+			'#333333'
 		];
 
 
diff --git a/app/styles/main.css b/app/styles/main.css
index aa15943..f51beee 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -386,6 +386,7 @@ aside .step .finish-design button{
 
 /*Aside modal*/
 .aside{
+  padding-left: 0;
 }
 .aside #choice-design-option{
   list-style: none;
@@ -438,17 +439,23 @@ aside .step .finish-design button{
 
 }
 .aside #choice-illustration li{
-  border: 1px solid #cdcdcd;
+  border: 1px #cdcdcd double;
+  border-radius: 5px;
   position: relative;
+  padding: 5px 10px;
+  margin-bottom: 20px;
 }
 
 .aside #choice-illustration li .title{
-  background: url("../images/bg1.png") repeat #cdcdcd;
+  /*background: url("../images/bg1.png") repeat #cdcdcd;*/
   padding: 3px 10px;
+  font-size: 13px;
+  color: #ff0f00;
+  font-weight: 600;
 }
 
 .aside #choice-illustration li .content {
-  padding: 10px 10px;
+  /*padding: 10px 10px;*/
 }
 
 .aside #choice-illustration li .content select{
@@ -463,10 +470,14 @@ aside .step .finish-design button{
 }
 
 .aside #choice-illustration li .content .illustration-list .illstration-item{
-  height: 65px;
+  height: 61px;
   overflow: hidden;
   float: left;
-  margin-left: 5px;
+  margin-left: 10px;
+  margin-top: 10px;
+  background: #e2e2e2;
+  border: #d7d7d7 solid 1px;
+  padding: 2px;
 }
 
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
@@ -474,7 +485,7 @@ aside .step .finish-design button{
 }
 
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
-  width: 62px;
+  width: 53px;
   cursor: pointer;
 }
 
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html
index ffd0e4c..090b60d 100644
--- a/app/views/tshirt-design.html
+++ b/app/views/tshirt-design.html
@@ -100,8 +100,8 @@
                             <li>
                                 <div class="hover"></div>
                                 <div class="title">
-                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-                                    items
+                                    <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+                                    イラスト・イメージ選択
                                 </div>
                                 <div class="content clearfix">
                                     <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%">
@@ -118,8 +118,9 @@
                             <li>
                                 <div class="hover"></div>
                                 <div class="title">
-                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-                                    Color to fill
+                                    <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+                                    カラー変更
+                                    <div class="pull-right">元の色に戻す</div>
                                 </div>
                                 <div class="content clearfix">
                                     <div class="color-patterns">
@@ -132,8 +133,8 @@
                             <li>
                                 <div class="hover"></div>
                                 <div class="title">
-                                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
-                                    Layer option
+                                    <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
+                                    重ね順変更
                                 </div>
                                 <div class="content clearfix">
                                     
-- 
1.8.5.3