update illustration interactive

TRUONG
1 parent b0bc7eb37a
Showing 4 changed files with 143 additions and 49 deletions Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/views/tshirt-design.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,
         };
@@ -9,11 +9,78 @@
 		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,11 +89,51 @@
 			// });
 		}
  
-		$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
 		$scope.changeIllustrationCategory = function(currentIllustration){
  
@@ -47,41 +154,16 @@
  
 		// 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'
 		];
  
  
@@ -386,6 +386,7 @@
  
 /*Aside modal*/
 .aside{
+  padding-left: 0;
 }
 .aside #choice-design-option{
   list-style: none;
  
  
  
  
@@ -438,17 +439,23 @@
  
 }
 .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 #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 #choice-illustration li .content .illustration-list .illstration-item img {
-  width: 62px;
+  width: 53px;
   cursor: pointer;
 }
  
@@ -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">
...	...	@@ -46,7 +46,7 @@
46	46	<script src="bower_components/json3/lib/json3.min.js"></script>
47	47	<![endif]-->
48	48	<script type="text/javascript">
49		- var VERSION = '13-11_01';
	49	+ var VERSION = new Date().getTime();
50	50	var require = {
51	51	urlArgs: "ver="+VERSION,
52	52	};
...	...	@@ -9,11 +9,78 @@
9	9	canvas.on('after:render', function() {
10	10	});
11	11	canvas.on({
	12	+ 'object:added': onIllustrationAdded,
12	13	'object:moving': onIllustrationChange,
13	14	'object:scaling': onIllustrationChange,
14	15	'object:rotating': onIllustrationChange,
15	16	'object:selected': onllustrationSelected,
	17	+ 'object:modified': onllustrationModifield
16	18	});
	19	+
	20	+ var currentObj;
	21	+ var listObj = [];
	22	+ var stateObj = [];
	23	+ var indexCurr = 0;
	24	+ var indexCurr2 = 0;
	25	+ var actionObj = false;
	26	+ var refreshObj = true;
	27	+
	28	+ function onIllustrationAdded(options){
	29	+ var object = options.target;
	30	+ console.log('object:added');
	31	+
	32	+ if (actionObj === true) {
	33	+ stateObj = [stateObj[indexCurr2]];
	34	+ listObj = [listObj[indexCurr2]];
	35	+
	36	+ actionObj = false;
	37	+ console.log(stateObj);
	38	+ indexCurr = 1;
	39	+ }
	40	+ object.saveState();
	41	+
	42	+ console.log(object.originalState);
	43	+ stateObj[indexCurr] = JSON.stringify(object.originalState);
	44	+ listObj[indexCurr] = object;
	45	+ indexCurr++;
	46	+ indexCurr2 = indexCurr - 1;
	47	+ refreshObj = true;
	48	+ }
	49	+
	50	+ function onllustrationModifield(options){
	51	+ var objOffset = canvas.getActiveObject().getBoundingRect();
	52	+ var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
	53	+ console.log(objOffset,canvas.height,canvas.width);
	54	+ if (objOffset.left<W0-objOffset.width \|\| objOffset.left>cW-W0 \|\| objOffset.top<H0-objOffset.height \|\| objOffset.top>cH-H0){
	55	+ if (confirm('削除してもよろしいですか')){
	56	+ canvas.getActiveObject().remove();
	57	+ }else{
	58	+ undoCanvas();
	59	+ return;
	60	+ }
	61	+ }
	62	+
	63	+ var object = options.target;
	64	+ console.log('object:modified');
	65	+ if (actionObj === true) {
	66	+ stateObj = [stateObj[indexCurr2]];
	67	+ listObj = [listObj[indexCurr2]];
	68	+
	69	+ actionObj = false;
	70	+ console.log(stateObj);
	71	+ indexCurr = 1;
	72	+ }
	73	+
	74	+ object.saveState();
	75	+
	76	+ stateObj[indexCurr] = JSON.stringify(object.originalState);
	77	+ listObj[indexCurr] = object;
	78	+ indexCurr++;
	79	+ indexCurr2 = indexCurr - 1;
	80	+ console.log(stateObj);
	81	+ refreshObj = true;
	82	+ }
	83	+
17	84	function onIllustrationChange(options) {
18	85	// options.target.setCoords();
19	86	// canvas.forEachObject(function(obj) {
20	87
21	88
...	...	@@ -22,11 +89,51 @@
22	89	// });
23	90	}
24	91
25		- $scope.currentObject = null;
26	92	function onllustrationSelected(options){
27		- $scope.currentObject = canvas.getActiveObject();
28		- console.log(canvas.getActiveObject());
	93	+ //console.log(canvas.getActiveObject());
29	94	}
	95	+
	96	+ function undoCanvas() {
	97	+ if (indexCurr <= 0) {
	98	+ indexCurr = 0;
	99	+ return;
	100	+ }
	101	+
	102	+ if (refreshObj === true) {
	103	+ indexCurr--;
	104	+ refreshObj = false;
	105	+ }
	106	+
	107	+ console.log('undo');
	108	+
	109	+ indexCurr2 = indexCurr - 1;
	110	+ currentObj = listObj[indexCurr2];
	111	+ if (currentObj){
	112	+ currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
	113	+ }
	114	+
	115	+ indexCurr--;
	116	+ currentObj.setCoords();
	117	+ canvas.renderAll();
	118	+ actionObj = true;
	119	+ }
	120	+
	121	+ function redoCanvas() {
	122	+ actionObj = true;
	123	+ if (indexCurr >= stateObj.length - 1) {
	124	+ return;
	125	+ }
	126	+
	127	+ console.log('redo');
	128	+
	129	+ indexCurr2 = indexCurr + 1;
	130	+ currentObj = listObj[indexCurr2];
	131	+ currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
	132	+
	133	+ indexCurr++;
	134	+ currentObj.setCoords();
	135	+ canvas.renderAll();
	136	+ }
30	137
31	138	// Illustration process
32	139	$scope.changeIllustrationCategory = function(currentIllustration){
33	140
...	...	@@ -47,41 +154,16 @@
47	154
48	155	// color pattern
49	156	$scope.changeColorPattern = function(color){
50		- canvas.getActiveObject().set("fill", color);
51		- canvas.renderAll();
	157	+ if (canvas.getActiveObject()){
	158	+ canvas.getActiveObject().set("fill", color);
	159	+ canvas.renderAll();
	160	+ }
52	161	};
53	162	$scope.listColorPatterns = [
54		- '#000000',
55		- '#ffff00',
56		- '#ff6600',
57		- '#ff0000',
58		- '#ff6262',
59		- '#ffa19c',
60		- '#ff9933',
61		- '#c45d01',
62		- '#5d2b03',
63		- '#ffffcc',
64		- '#000000',
65		- '#ffff00',
66		- '#ff6600',
67		- '#ff0000',
68		- '#ff6262',
69		- '#ffa19c',
70		- '#ff9933',
71		- '#c45d01',
72		- '#5d2b03',
73		- '#ffffcc',
74		- '#000000',
75		- '#ffff00',
76		- '#ff6600',
77		- '#ff0000',
78		- '#ff6262',
79		- '#ffa19c',
80		- '#ff9933',
81		- '#c45d01',
82		- '#5d2b03',
83		- '#ffffcc',
84		- '#ffffcc'
	163	+ '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
	164	+ '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
	165	+ '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
	166	+ '#333333'
85	167	];
86	168
87	169
...	...	@@ -386,6 +386,7 @@
386	386
387	387	/Aside modal/
388	388	.aside{
	389	+ padding-left: 0;
389	390	}
390	391	.aside #choice-design-option{
391	392	list-style: none;
392	393
393	394
394	395
395	396
...	...	@@ -438,17 +439,23 @@
438	439
439	440	}
440	441	.aside #choice-illustration li{
441		- border: 1px solid #cdcdcd;
	442	+ border: 1px #cdcdcd double;
	443	+ border-radius: 5px;
442	444	position: relative;
	445	+ padding: 5px 10px;
	446	+ margin-bottom: 20px;
443	447	}
444	448
445	449	.aside #choice-illustration li .title{
446		- background: url("../images/bg1.png") repeat #cdcdcd;
	450	+ /background: url("../images/bg1.png") repeat #cdcdcd;/
447	451	padding: 3px 10px;
	452	+ font-size: 13px;
	453	+ color: #ff0f00;
	454	+ font-weight: 600;
448	455	}
449	456
450	457	.aside #choice-illustration li .content {
451		- padding: 10px 10px;
	458	+ /padding: 10px 10px;/
452	459	}
453	460
454	461	.aside #choice-illustration li .content select{
455	462
...	...	@@ -463,10 +470,14 @@
463	470	}
464	471
465	472	.aside #choice-illustration li .content .illustration-list .illstration-item{
466		- height: 65px;
	473	+ height: 61px;
467	474	overflow: hidden;
468	475	float: left;
469		- margin-left: 5px;
	476	+ margin-left: 10px;
	477	+ margin-top: 10px;
	478	+ background: #e2e2e2;
	479	+ border: #d7d7d7 solid 1px;
	480	+ padding: 2px;
470	481	}
471	482
472	483	.aside #choice-illustration li .content .illustration-list .illstration-item:hover {
...	...	@@ -474,7 +485,7 @@
474	485	}
475	486
476	487	.aside #choice-illustration li .content .illustration-list .illstration-item img {
477		- width: 62px;
	488	+ width: 53px;
478	489	cursor: pointer;
479	490	}
480	491
...	...	@@ -100,8 +100,8 @@
100	100	<li>
101	101	<div class="hover"></div>
102	102	<div class="title">
103		- <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
104		- items
	103	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	104	+ イラスト・イメージ選択
105	105	</div>
106	106	<div class="content clearfix">
107	107	<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 @@
118	118	<li>
119	119	<div class="hover"></div>
120	120	<div class="title">
121		- <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
122		- Color to fill
	121	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	122	+ カラー変更
	123	+ <div class="pull-right">元の色に戻す</div>
123	124	</div>
124	125	<div class="content clearfix">
125	126	<div class="color-patterns">
...	...	@@ -132,8 +133,8 @@
132	133	<li>
133	134	<div class="hover"></div>
134	135	<div class="title">
135		- <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
136		- Layer option
	136	+ <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	137	+ 重ね順変更
137	138	</div>
138	139	<div class="content clearfix">
139	140