Blame view

app/scripts/controllers/tshirtdesign.js 6.42 KB
6f105dbd5   Truong LD   add source code i...
1
  define(['app'], function (app) {
c8bfdfd96   DANG   event click object
2
  	//'use strict';
6f105dbd5   Truong LD   add source code i...
3

422e7837d   DANG   Change color t-shirt
4
  	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
6f105dbd5   Truong LD   add source code i...
5
6
7
8
9
10
  		var canvas = new fabric.Canvas('main-design-container');
  		fabric.Object.prototype.transparentCorners = false;
  
  		canvas.on('after:render', function() {
  		});
  		canvas.on({
aff3eb043   TRUONG   update illustrati...
11
  			'object:added': onIllustrationAdded,
6f105dbd5   Truong LD   add source code i...
12
13
14
  			'object:moving': onIllustrationChange,
  			'object:scaling': onIllustrationChange,
  			'object:rotating': onIllustrationChange,
c8bfdfd96   DANG   event click object
15
  			'object:selected': onIllustrationSelected,
1d6ddfa62   TRUONG   merge
16
  			'object:modified': onIllustrationModifield,
c8bfdfd96   DANG   event click object
17
18
19
  			'selected:deselected' : onIllustrationOut,
  			//'selected:out'     : onIllustrationOut,
  			//'mouse:up' : onIllustrationOut,
6f105dbd5   Truong LD   add source code i...
20
  		});
aff3eb043   TRUONG   update illustrati...
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
  		
  		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;
  		}
  		
1d6ddfa62   TRUONG   merge
52
  		function onIllustrationModifield(options){
aff3eb043   TRUONG   update illustrati...
53
54
  			var objOffset = canvas.getActiveObject().getBoundingRect();
  			var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
1d6ddfa62   TRUONG   merge
55
  			//console.log(objOffset,canvas.height,canvas.width);
aff3eb043   TRUONG   update illustrati...
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
  			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;
  		}
  		
6f105dbd5   Truong LD   add source code i...
86
  		function onIllustrationChange(options) {
d75c45c56   Truong LD   remove test showcase
87
88
89
90
91
  			// options.target.setCoords();
  			// canvas.forEachObject(function(obj) {
  			// if (obj === options.target) return;
  			// 	obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
  			// });
c8bfdfd96   DANG   event click object
92

6f105dbd5   Truong LD   add source code i...
93
  		}
c8bfdfd96   DANG   event click object
94
95
  		function onIllustrationOut() {
  			console.log('out object');
aff3eb043   TRUONG   update illustrati...
96
  		}
6f105dbd5   Truong LD   add source code i...
97

aff3eb043   TRUONG   update illustrati...
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
  		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();
6f105dbd5   Truong LD   add source code i...
138
  		}
1d6ddfa62   TRUONG   merge
139
  		
6f105dbd5   Truong LD   add source code i...
140
  		$scope.currentObject = null;
c8bfdfd96   DANG   event click object
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
  		function onIllustrationSelected(options) {
  			var object = options.target;
  			$scope.typeObject = object.type;
  			switch ($scope.typeObject) {
  				case 'i-text' :
  					$('#input-design-text').focus();
  					$rootScope.isShowLeftPanel = 'text';
  					break;
  
  				case 'path-group' :
  					$rootScope.isShowLeftPanel = 'illustration';
  					break;
  
  				default :
  					$rootScope.isShowLeftPanel = 'default';
  					break;
  			}
  			$rootScope.safeApply();
6f105dbd5   Truong LD   add source code i...
159
160
161
162
163
  		}
  
  		// Illustration process
  		$scope.changeIllustrationCategory = function(currentIllustration){
  			$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
c8bfdfd96   DANG   event click object
164
  			//console.log($scope.currentIllustrationCate);
422e7837d   DANG   Change color t-shirt
165
  		};
6f105dbd5   Truong LD   add source code i...
166
167
168
169
  
  		$scope.insertSvg = function(item){
  			fabric.loadSVGFromURL(item.path, function(objects, options) {
  				var shape = fabric.util.groupSVGElements(objects, options);
d75c45c56   Truong LD   remove test showcase
170
  				// shape.setFill('green');
6f105dbd5   Truong LD   add source code i...
171
172
173
174
175
  				canvas.add(shape.scale(0.6));
  				shape.set({ left: 150, top: 200 }).setCoords();
  				canvas.renderAll();
  				canvas.setActiveObject(shape);
  			});
422e7837d   DANG   Change color t-shirt
176
  		};
6f105dbd5   Truong LD   add source code i...
177
178
179
  
  		// color pattern
  		$scope.changeColorPattern = function(color){
aff3eb043   TRUONG   update illustrati...
180
181
182
183
  			if (canvas.getActiveObject()){
  				canvas.getActiveObject().set("fill", color);
      	        canvas.renderAll();
  			}
422e7837d   DANG   Change color t-shirt
184
  		};
6f105dbd5   Truong LD   add source code i...
185
  		$scope.listColorPatterns = [
aff3eb043   TRUONG   update illustrati...
186
187
188
189
  			'#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'
422e7837d   DANG   Change color t-shirt
190
  		];
ba689b493   DANG   canvas font text
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
  		$scope.listFontFamily = [
  			{
  				name : 'GN-Aki-iro_Sesami_Cookies',
  				slug : 'gn_aki_iro_sesami_cookies',
  			},
  			{
  				name : 'Tahoma',
  				slug : 'tahoma',
  			},
  			{
  				name : 'GN-Fuyu-iro_Script_Bold',
  				slug : 'gn_fuyu_iro_script_bold'
  			},
  			{
  				name : 'GN Killgothic U Kanana',
  				slug : 'gn_killgothic_u_kanana'
  
  			}
  		];
422e7837d   DANG   Change color t-shirt
210

c8bfdfd96   DANG   event click object
211
212
  		$scope.focusInputText = function() {
  			if($scope.typeObject != 'i-text')
ba689b493   DANG   canvas font text
213
214
215
216
217
218
219
220
  				$scope.iText = new fabric.IText('', {
  					left: 150,
  					top: 200,
  					fontFamily: 'Arial',
  					fontWeight: 'normal',
  					fontSize: 28,
  					fill: 'black'
  				});
c8bfdfd96   DANG   event click object
221
  		};
422e7837d   DANG   Change color t-shirt
222

98acd3acd   DANG   Change text
223
224
  		//Design text
  		$scope.inputText = function(e) {
c8bfdfd96   DANG   event click object
225
  			var iText = $scope.iText;
ba689b493   DANG   canvas font text
226
227
228
229
230
231
232
  			if(e != '') {
  				iText.text = e;
  				iText.set().setCoords();
  				canvas.add(iText);
  				canvas.renderAll();
  				canvas.setActiveObject(iText);
  			}
c8bfdfd96   DANG   event click object
233
  		};
ba689b493   DANG   canvas font text
234
235
236
237
238
239
240
241
  		$scope.setFontFamily = function(font) {
  			if(canvas.getActiveObject()) {
  				var currentObject = canvas.getActiveObject();
  				if(currentObject.type == 'i-text') {
  					console.log(font);
  
  					currentObject.set('fontFamily', font);
  					currentObject.selectWord();
98acd3acd   DANG   Change text
242

ba689b493   DANG   canvas font text
243
244
245
246
247
248
249
250
  					canvas.renderAll();
  					// currentObject.getActiveObject();
  					canvas.setActiveObject(currentObject);
  				}
  
  			}
  
  		}
6f105dbd5   Truong LD   add source code i...
251
252
  	});
  });