TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 21a01f6ac960d773d571b4698ecf75437a391af6

Authored by Dang YoungWorld
1 parent 39a1e279b1
Exists in master and in 1 other branch develop

fix bug action "OK" control

Showing 1 changed file with 7 additions and 2 deletions Inline Diff

app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 21a01f6
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { 3 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4 4
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 //Set width and height canvas 6 //Set width and height canvas
7 var _modalWidth = $('.modal-dialog').width(); 7 var _modalWidth = $('.modal-dialog').width();
8 var _windowWidth = window.innerWidth; 8 var _windowWidth = window.innerWidth;
9 if(_windowWidth > 762) { 9 if(_windowWidth > 762) {
10 var _contentCanvasWidth = _modalWidth*8/12 - 100; 10 var _contentCanvasWidth = _modalWidth*8/12 - 100;
11 } else { 11 } else {
12 var _contentCanvasWidth = _windowWidth-70; 12 var _contentCanvasWidth = _windowWidth-70;
13 } 13 }
14 14
15 console.log(canvas); 15 console.log(canvas);
16 canvas.setWidth(_contentCanvasWidth); 16 canvas.setWidth(_contentCanvasWidth);
17 canvas.setHeight(650); 17 canvas.setHeight(650);
18 canvas._onMouseDown = function () { 18 canvas._onMouseDown = function () {
19 alert('in mouse up'); 19 alert('in mouse up');
20 }; 20 };
21 //Custom control 21 //Custom control
22 fabric.Object.prototype.transparentCorners = false; 22 fabric.Object.prototype.transparentCorners = true;
23 fabric.Object.prototype.hasRotatingPoint = false; 23 fabric.Object.prototype.hasRotatingPoint = false;
24 // fabric.Object.prototype.selectable = false;
24 25
25 // fabric.Canvas.prototype.__onMouseDown = function (e) { 26 // fabric.Canvas.prototype.__onMouseDown = function (e) {
26 // // return false; 27 // // return false;
27 // }; 28 // };
28 29
29 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 30 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
30 for(key in ctrVisible) { 31 for(key in ctrVisible) {
31 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 32 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
32 } 33 }
33 34
34 fabric.Object.prototype.customiseCornerIcons({ 35 fabric.Object.prototype.customiseCornerIcons({
35 settings: { 36 settings: {
36 borderColor: '#0000ff', 37 borderColor: '#0000ff',
37 cornerSize: 25, 38 cornerSize: 25,
38 cornerShape: 'circle', 39 cornerShape: 'circle',
39 cornerBackgroundColor: '#0171b4', 40 cornerBackgroundColor: '#0171b4',
40 cornerPadding: 6 41 cornerPadding: 6
41 }, 42 },
42 mt: { 43 mt: {
43 icon: 'images/control-icon/ok.png' 44 icon: 'images/control-icon/ok.png'
44 }, 45 },
45 br: { 46 br: {
46 icon: 'images/control-icon/resize.png' 47 icon: 'images/control-icon/resize.png'
47 }, 48 },
48 tr: { 49 tr: {
49 icon: 'images/control-icon/rotate.png' 50 icon: 'images/control-icon/rotate.png'
50 } 51 }
51 }); 52 });
52 53
53 fabric.Canvas.prototype.customiseControls({ 54 fabric.Canvas.prototype.customiseControls({
54 mt: { 55 mt: {
55 cursor: 'pointer', 56 cursor: 'pointer',
56 action: function(e, target) { 57 action: function(e, target) {
57 canvas.deactivateAll().renderAll(); 58 fabric.Object.prototype.selectable = false;
59 canvas.deactivateAll();
60 $timeout(function(){
61 fabric.Object.prototype.selectable = true;
62 },20);
58 } 63 }
59 }, 64 },
60 br: { 65 br: {
61 66
62 }, 67 },
63 tr: { 68 tr: {
64 action: 'rotate', 69 action: 'rotate',
65 cursor: 'crosshair' 70 cursor: 'crosshair'
66 } 71 }
67 }); 72 });
68 73
69 canvas.on('after:render', function() { 74 canvas.on('after:render', function() {
70 // console.log('after render'); 75 // console.log('after render');
71 }); 76 });
72 canvas.on({ 77 canvas.on({
73 'object:added' : onIllustrationAdded, 78 'object:added' : onIllustrationAdded,
74 'object:moving' : onIllustrationMoving, 79 'object:moving' : onIllustrationMoving,
75 'object:scaling' : onIllustrationChange, 80 'object:scaling' : onIllustrationChange,
76 'object:rotating' : onIllustrationChange, 81 'object:rotating' : onIllustrationChange,
77 'object:selected' : onObjectSelected, 82 'object:selected' : onObjectSelected,
78 'object:modified' : onIllustrationModifield, 83 'object:modified' : onIllustrationModifield,
79 'selection:cleared' : onObjectOut, 84 'selection:cleared' : onObjectOut,
80 }); 85 });
81 86
82 var currentObj; 87 var currentObj;
83 var listObj = []; 88 var listObj = [];
84 var stateObj = []; 89 var stateObj = [];
85 var indexCurr = 0; 90 var indexCurr = 0;
86 var indexCurr2 = 0; 91 var indexCurr2 = 0;
87 var actionObj = false; 92 var actionObj = false;
88 var refreshObj = true; 93 var refreshObj = true;
89 var spacingNum = 0; 94 var spacingNum = 0;
90 $scope.itemFont = 0; 95 $scope.itemFont = 0;
91 96
92 97
93 $scope.showDesignTab = function(tab){ 98 $scope.showDesignTab = function(tab){
94 canvas.deactivateAll().renderAll(); 99 canvas.deactivateAll().renderAll();
95 $rootScope.isShowLeftPanel = tab; 100 $rootScope.isShowLeftPanel = tab;
96 switch (tab) { 101 switch (tab) {
97 case 'illustration': { 102 case 'illustration': {
98 $scope.IllustrationList = $illustration.getAll(); 103 $scope.IllustrationList = $illustration.getAll();
99 $rootScope.outputImage = false; 104 $rootScope.outputImage = false;
100 $scope.illustrationSelectConfig = { 105 $scope.illustrationSelectConfig = {
101 allowClear:true 106 allowClear:true
102 }; 107 };
103 $timeout(function(){ 108 $timeout(function(){
104 $('.illstration-item').tooltip({ 109 $('.illstration-item').tooltip({
105 animated: 'fade', 110 animated: 'fade',
106 placement: 'bottom', 111 placement: 'bottom',
107 html: true 112 html: true
108 }); 113 });
109 // console.log('here'); 114 // console.log('here');
110 },1000); 115 },1000);
111 break; 116 break;
112 } 117 }
113 case 'text': { 118 case 'text': {
114 break; 119 break;
115 } 120 }
116 } 121 }
117 }; 122 };
118 $scope.showDesignTab('default'); 123 $scope.showDesignTab('default');
119 124
120 125
121 function onIllustrationAdded(options){ 126 function onIllustrationAdded(options){
122 var object = options.target; 127 var object = options.target;
123 // console.log('object:added'); 128 // console.log('object:added');
124 129
125 if (actionObj === true) { 130 if (actionObj === true) {
126 stateObj = [stateObj[indexCurr2]]; 131 stateObj = [stateObj[indexCurr2]];
127 listObj = [listObj[indexCurr2]]; 132 listObj = [listObj[indexCurr2]];
128 133
129 actionObj = false; 134 actionObj = false;
130 console.log(stateObj); 135 console.log(stateObj);
131 indexCurr = 1; 136 indexCurr = 1;
132 } 137 }
133 object.saveState(); 138 object.saveState();
134 139
135 console.log(object.originalState); 140 console.log(object.originalState);
136 stateObj[indexCurr] = JSON.stringify(object.originalState); 141 stateObj[indexCurr] = JSON.stringify(object.originalState);
137 listObj[indexCurr] = object; 142 listObj[indexCurr] = object;
138 indexCurr++; 143 indexCurr++;
139 indexCurr2 = indexCurr - 1; 144 indexCurr2 = indexCurr - 1;
140 refreshObj = true; 145 refreshObj = true;
141 } 146 }
142 147
143 function onIllustrationModifield(options){ 148 function onIllustrationModifield(options){
144 // 149 //
145 var pointer = canvas.getPointer(options.e); 150 var pointer = canvas.getPointer(options.e);
146 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 151 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
147 canvas.getActiveObject().remove(); 152 canvas.getActiveObject().remove();
148 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 153 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
149 return; 154 return;
150 } 155 }
151 156
152 // 157 //
153 var objOffset = canvas.getActiveObject().getBoundingRect(); 158 var objOffset = canvas.getActiveObject().getBoundingRect();
154 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 159 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
155 //console.log(objOffset,canvas.height,canvas.width); 160 //console.log(objOffset,canvas.height,canvas.width);
156 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 161 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
157 if (confirm('削除してもよろしいですか')){ 162 if (confirm('削除してもよろしいですか')){
158 canvas.getActiveObject().remove(); 163 canvas.getActiveObject().remove();
159 }else{ 164 }else{
160 undoCanvas(); 165 undoCanvas();
161 return; 166 return;
162 } 167 }
163 } 168 }
164 169
165 var object = options.target; 170 var object = options.target;
166 // console.log('object:modified'); 171 // console.log('object:modified');
167 if (actionObj === true) { 172 if (actionObj === true) {
168 stateObj = [stateObj[indexCurr2]]; 173 stateObj = [stateObj[indexCurr2]];
169 listObj = [listObj[indexCurr2]]; 174 listObj = [listObj[indexCurr2]];
170 175
171 actionObj = false; 176 actionObj = false;
172 console.log(stateObj); 177 console.log(stateObj);
173 indexCurr = 1; 178 indexCurr = 1;
174 } 179 }
175 180
176 object.saveState(); 181 object.saveState();
177 182
178 stateObj[indexCurr] = JSON.stringify(object.originalState); 183 stateObj[indexCurr] = JSON.stringify(object.originalState);
179 listObj[indexCurr] = object; 184 listObj[indexCurr] = object;
180 indexCurr++; 185 indexCurr++;
181 indexCurr2 = indexCurr - 1; 186 indexCurr2 = indexCurr - 1;
182 // console.log(stateObj); 187 // console.log(stateObj);
183 refreshObj = true; 188 refreshObj = true;
184 } 189 }
185 190
186 function onIllustrationChange(options) { 191 function onIllustrationChange(options) {
187 // options.target.setCoords(); 192 // options.target.setCoords();
188 // canvas.forEachObject(function(obj) { 193 // canvas.forEachObject(function(obj) {
189 // if (obj === options.target) return; 194 // if (obj === options.target) return;
190 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 195 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
191 // }); 196 // });
192 } 197 }
193 198
194 function onIllustrationMoving(options) { 199 function onIllustrationMoving(options) {
195 var pointer = canvas.getPointer(options.e); 200 var pointer = canvas.getPointer(options.e);
196 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 201 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
197 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 202 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
198 }else{ 203 }else{
199 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 204 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
200 } 205 }
201 } 206 }
202 207
203 function onObjectOut() { 208 function onObjectOut() {
204 delete currentObj; 209 delete currentObj;
205 $scope.designTextValue = ''; 210 $scope.designTextValue = '';
206 } 211 }
207 212
208 function undoCanvas() { 213 function undoCanvas() {
209 if (indexCurr <= 0) { 214 if (indexCurr <= 0) {
210 indexCurr = 0; 215 indexCurr = 0;
211 return; 216 return;
212 } 217 }
213 218
214 if (refreshObj === true) { 219 if (refreshObj === true) {
215 indexCurr--; 220 indexCurr--;
216 refreshObj = false; 221 refreshObj = false;
217 } 222 }
218 223
219 console.log('undo'); 224 console.log('undo');
220 225
221 indexCurr2 = indexCurr - 1; 226 indexCurr2 = indexCurr - 1;
222 currentObj = listObj[indexCurr2]; 227 currentObj = listObj[indexCurr2];
223 if (currentObj){ 228 if (currentObj){
224 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 229 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
225 } 230 }
226 231
227 indexCurr--; 232 indexCurr--;
228 currentObj.setCoords(); 233 currentObj.setCoords();
229 canvas.renderAll(); 234 canvas.renderAll();
230 actionObj = true; 235 actionObj = true;
231 } 236 }
232 237
233 function redoCanvas() { 238 function redoCanvas() {
234 actionObj = true; 239 actionObj = true;
235 if (indexCurr >= stateObj.length - 1) { 240 if (indexCurr >= stateObj.length - 1) {
236 return; 241 return;
237 } 242 }
238 243
239 console.log('redo'); 244 console.log('redo');
240 245
241 indexCurr2 = indexCurr + 1; 246 indexCurr2 = indexCurr + 1;
242 currentObj = listObj[indexCurr2]; 247 currentObj = listObj[indexCurr2];
243 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 248 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
244 249
245 indexCurr++; 250 indexCurr++;
246 currentObj.setCoords(); 251 currentObj.setCoords();
247 canvas.renderAll(); 252 canvas.renderAll();
248 } 253 }
249 254
250 $scope.canvasClearAll = function(){ 255 $scope.canvasClearAll = function(){
251 if (confirm('配置されたすべての文字や画像を消去します')){ 256 if (confirm('配置されたすべての文字や画像を消去します')){
252 canvas.clear(); 257 canvas.clear();
253 } 258 }
254 } 259 }
255 260
256 function onObjectSelected(options) { 261 function onObjectSelected(options) {
257 var currentObj = options.target; 262 var currentObj = options.target;
258 263
259 264
260 $scope.typeObject = currentObj.type; 265 $scope.typeObject = currentObj.type;
261 switch ($scope.typeObject) { 266 switch ($scope.typeObject) {
262 case 'i-text' : 267 case 'i-text' :
263 $rootScope.isShowLeftPanel = 'text'; 268 $rootScope.isShowLeftPanel = 'text';
264 var text = currentObj.text; 269 var text = currentObj.text;
265 if(text != '') { 270 if(text != '') {
266 $scope.designText = text; 271 $scope.designText = text;
267 $scope.designTextValue = text; 272 $scope.designTextValue = text;
268 } 273 }
269 break; 274 break;
270 275
271 case 'path-group' : 276 case 'path-group' :
272 $rootScope.isShowLeftPanel = 'illustration'; 277 $rootScope.isShowLeftPanel = 'illustration';
273 break; 278 break;
274 279
275 case 'image': 280 case 'image':
276 $rootScope.isShowLeftPanel = 'image'; 281 $rootScope.isShowLeftPanel = 'image';
277 break; 282 break;
278 283
279 default : 284 default :
280 $rootScope.isShowLeftPanel = 'default'; 285 $rootScope.isShowLeftPanel = 'default';
281 break; 286 break;
282 } 287 }
283 $rootScope.safeApply(); 288 $rootScope.safeApply();
284 } 289 }
285 290
286 // Illustration process 291 // Illustration process
287 $scope.changeIllustrationCategory = function(currentIllustration){ 292 $scope.changeIllustrationCategory = function(currentIllustration){
288 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 293 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
289 //console.log($scope.currentIllustrationCate); 294 //console.log($scope.currentIllustrationCate);
290 }; 295 };
291 296
292 $scope.insertSvg = function(item){ 297 $scope.insertSvg = function(item){
293 fabric.loadSVGFromURL(item.path, function(objects, options) { 298 fabric.loadSVGFromURL(item.path, function(objects, options) {
294 var shape = fabric.util.groupSVGElements(objects, options); 299 var shape = fabric.util.groupSVGElements(objects, options);
295 //shape.setFill('green'); 300 //shape.setFill('green');
296 canvas.add(shape.scale(0.6)); 301 canvas.add(shape.scale(0.6));
297 shape.set({ left: 150, top: 200 }).setCoords(); 302 shape.set({ left: 150, top: 200 }).setCoords();
298 canvas.renderAll(); 303 canvas.renderAll();
299 canvas.setActiveObject(shape); 304 canvas.setActiveObject(shape);
300 }); 305 });
301 }; 306 };
302 307
303 // color pattern 308 // color pattern
304 $scope.listColorPatterns = [ 309 $scope.listColorPatterns = [
305 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 310 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
306 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 311 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
307 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 312 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
308 '#333333' 313 '#333333'
309 ]; 314 ];
310 315
311 $scope.changeColorPattern = function(color){ 316 $scope.changeColorPattern = function(color){
312 var obj = canvas.getActiveObject(); 317 var obj = canvas.getActiveObject();
313 if (!color){ 318 if (!color){
314 color = 'none'; 319 color = 'none';
315 } 320 }
316 if (obj instanceof fabric.PathGroup) { 321 if (obj instanceof fabric.PathGroup) {
317 obj.getObjects().forEach(function(o) { 322 obj.getObjects().forEach(function(o) {
318 o.fill = color; 323 o.fill = color;
319 }); 324 });
320 } 325 }
321 else { 326 else {
322 obj.fill = color; 327 obj.fill = color;
323 } 328 }
324 canvas.renderAll(); 329 canvas.renderAll();
325 // if (canvas.getActiveObject()){ 330 // if (canvas.getActiveObject()){
326 // canvas.getActiveObject().set("fill", color); 331 // canvas.getActiveObject().set("fill", color);
327 // canvas.renderAll(); 332 // canvas.renderAll();
328 // } 333 // }
329 }; 334 };
330 335
331 //Font 336 //Font
332 $scope.listFontFamily = [ 337 $scope.listFontFamily = [
333 { 338 {
334 name : 'GN Aki iro Sesami Cookies', 339 name : 'GN Aki iro Sesami Cookies',
335 slug : 'gn_aki_iro_sesami_cookies', 340 slug : 'gn_aki_iro_sesami_cookies',
336 }, 341 },
337 { 342 {
338 name : 'GN-Fuyu-iro_Script_Bold', 343 name : 'GN-Fuyu-iro_Script_Bold',
339 slug : 'gn_fuyu_iro_script_bold' 344 slug : 'gn_fuyu_iro_script_bold'
340 }, 345 },
341 { 346 {
342 name : 'GN Killgothic U Kanana', 347 name : 'GN Killgothic U Kanana',
343 slug : 'gn_killgothic_u_kanana' 348 slug : 'gn_killgothic_u_kanana'
344 }, 349 },
345 { 350 {
346 name : 'GN-Kin-iro_Alphabet_Cookies', 351 name : 'GN-Kin-iro_Alphabet_Cookies',
347 slug : 'gn_kin_iro_alphabet_cookies' 352 slug : 'gn_kin_iro_alphabet_cookies'
348 353
349 }, 354 },
350 { 355 {
351 name : 'GN-Kin-iro_SansSerif', 356 name : 'GN-Kin-iro_SansSerif',
352 slug : 'gn_kin_iro_sansserif' 357 slug : 'gn_kin_iro_sansserif'
353 358
354 }, 359 },
355 { 360 {
356 name : 'GN-Koharuiro_Sunray', 361 name : 'GN-Koharuiro_Sunray',
357 slug : 'gn_koharuiro_sunray' 362 slug : 'gn_koharuiro_sunray'
358 363
359 }, 364 },
360 { 365 {
361 name : 'GN-Kyu-pin', 366 name : 'GN-Kyu-pin',
362 slug : 'gn_kyu_pin' 367 slug : 'gn_kyu_pin'
363 }, 368 },
364 { 369 {
365 name : 'gn_natsu_iro_schedule', 370 name : 'gn_natsu_iro_schedule',
366 slug : 'gn_natsu_iro_schedule' 371 slug : 'gn_natsu_iro_schedule'
367 372
368 }, 373 },
369 { 374 {
370 name : 'gnkana_kiniro_sansserif_l', 375 name : 'gnkana_kiniro_sansserif_l',
371 slug : 'gnkana_kiniro_sansserif_l' 376 slug : 'gnkana_kiniro_sansserif_l'
372 377
373 }, 378 },
374 { 379 {
375 name : 'gnkana_kiniro_sansserif_st', 380 name : 'gnkana_kiniro_sansserif_st',
376 slug : 'gnkana_kiniro_sansserif_st' 381 slug : 'gnkana_kiniro_sansserif_st'
377 }, 382 },
378 { 383 {
379 name : 'gnkana_kon_iro_nightfall', 384 name : 'gnkana_kon_iro_nightfall',
380 slug : 'gnkana_kon_iro_nightfall' 385 slug : 'gnkana_kon_iro_nightfall'
381 386
382 }, 387 },
383 { 388 {
384 name : 'ms_gothic', 389 name : 'ms_gothic',
385 slug : 'ms_gothic' 390 slug : 'ms_gothic'
386 391
387 }, 392 },
388 { 393 {
389 name : 'msmincho', 394 name : 'msmincho',
390 slug : 'msmincho' 395 slug : 'msmincho'
391 }, 396 },
392 { 397 {
393 name : 'ufonts_com_ms_pgothic', 398 name : 'ufonts_com_ms_pgothic',
394 slug : 'ufonts_com_ms_pgothic' 399 slug : 'ufonts_com_ms_pgothic'
395 } 400 }
396 ]; 401 ];
397 402
398 // layer process 403 // layer process
399 $scope.layerProcess = function(mode) { 404 $scope.layerProcess = function(mode) {
400 // console.log('layerProcess'); 405 // console.log('layerProcess');
401 var activeObject = canvas.getActiveObject(); 406 var activeObject = canvas.getActiveObject();
402 407
403 console.log(activeObject); 408 console.log(activeObject);
404 409
405 if (activeObject){ 410 if (activeObject){
406 switch (mode) { 411 switch (mode) {
407 case 1: 412 case 1:
408 // canvas.bringForward(activeObject); 413 // canvas.bringForward(activeObject);
409 activeObject.bringForward(); 414 activeObject.bringForward();
410 break; 415 break;
411 case 2: 416 case 2:
412 // canvas.sendBackwards(activeObject); 417 // canvas.sendBackwards(activeObject);
413 activeObject.sendBackwards(); 418 activeObject.sendBackwards();
414 break; 419 break;
415 case 3: 420 case 3:
416 // canvas.bringToFront(activeObject); 421 // canvas.bringToFront(activeObject);
417 activeObject.bringToFront(); 422 activeObject.bringToFront();
418 break; 423 break;
419 case 4: 424 case 4:
420 // canvas.sendToBack(activeObject); 425 // canvas.sendToBack(activeObject);
421 activeObject.sendToBack(); 426 activeObject.sendToBack();
422 break; 427 break;
423 } 428 }
424 canvas.deactivateAll().renderAll(); 429 canvas.deactivateAll().renderAll();
425 } 430 }
426 }; 431 };
427 432
428 $scope.focusInputText = function(text) { 433 $scope.focusInputText = function(text) {
429 currentObj = canvas.getActiveObject(); 434 currentObj = canvas.getActiveObject();
430 if(typeof currentObj == 'undefined' || currentObj == null) { 435 if(typeof currentObj == 'undefined' || currentObj == null) {
431 $scope.iText = new fabric.IText('', { 436 $scope.iText = new fabric.IText('', {
432 left: 150, 437 left: 150,
433 top: 200, 438 top: 200,
434 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 439 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
435 fontWeight: 'normal', 440 fontWeight: 'normal',
436 textAlign: 'center', 441 textAlign: 'center',
437 fontSize: 28, 442 fontSize: 28,
438 fill: 'black' 443 fill: 'black'
439 }); 444 });
440 } else { 445 } else {
441 if(currentObj.type != 'i-text') { 446 if(currentObj.type != 'i-text') {
442 $scope.iText = new fabric.IText('', { 447 $scope.iText = new fabric.IText('', {
443 left: 150, 448 left: 150,
444 top: 200, 449 top: 200,
445 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 450 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
446 fontWeight: 'normal', 451 fontWeight: 'normal',
447 textAlign: 'center', 452 textAlign: 'center',
448 fontSize: 28, 453 fontSize: 28,
449 fill: 'black' 454 fill: 'black'
450 }); 455 });
451 } else{ 456 } else{
452 $scope.iText = currentObj; 457 $scope.iText = currentObj;
453 } 458 }
454 } 459 }
455 }; 460 };
456 461
457 //Design text 462 //Design text
458 $scope.inputText = function(e) { 463 $scope.inputText = function(e) {
459 if(typeof $scope.iText != "undefined") { 464 if(typeof $scope.iText != "undefined") {
460 var iText = $scope.iText; 465 var iText = $scope.iText;
461 iText.text = e; 466 iText.text = e;
462 canvas.add(iText); 467 canvas.add(iText);
463 canvas.renderAll(); 468 canvas.renderAll();
464 canvas.setActiveObject(iText); 469 canvas.setActiveObject(iText);
465 } 470 }
466 }; 471 };
467 $scope.setFontFamily = function(font,index) { 472 $scope.setFontFamily = function(font,index) {
468 $scope.itemFont = index; 473 $scope.itemFont = index;
469 if(canvas.getActiveObject()) { 474 if(canvas.getActiveObject()) {
470 var currentObj = canvas.getActiveObject(); 475 var currentObj = canvas.getActiveObject();
471 if(currentObj.type == 'i-text') { 476 if(currentObj.type == 'i-text') {
472 currentObj.set('fontFamily', font); 477 currentObj.set('fontFamily', font);
473 canvas.renderAll(); 478 canvas.renderAll();
474 canvas.setActiveObject(currentObj); 479 canvas.setActiveObject(currentObj);
475 } 480 }
476 481
477 } 482 }
478 }; 483 };
479 //Set letter spacing text 484 //Set letter spacing text
480 $scope.setLetterSpacingText = function(e) { 485 $scope.setLetterSpacingText = function(e) {
481 if(canvas.getActiveObject()) { 486 if(canvas.getActiveObject()) {
482 var currentObj = canvas.getActiveObject(); 487 var currentObj = canvas.getActiveObject();
483 if(currentObj.type == 'i-text') { 488 if(currentObj.type == 'i-text') {
484 if(e == 'plus') 489 if(e == 'plus')
485 spacingNum = spacingNum + 30; 490 spacingNum = spacingNum + 30;
486 else if (spacingNum >= -30){ 491 else if (spacingNum >= -30){
487 spacingNum = spacingNum - 30; 492 spacingNum = spacingNum - 30;
488 } 493 }
489 currentObj.set('charSpacing', spacingNum); 494 currentObj.set('charSpacing', spacingNum);
490 canvas.renderAll(); 495 canvas.renderAll();
491 canvas.setActiveObject(currentObj); 496 canvas.setActiveObject(currentObj);
492 } 497 }
493 } 498 }
494 }; 499 };
495 500
496 $scope.setLetterSpacingTextDefault = function() { 501 $scope.setLetterSpacingTextDefault = function() {
497 if(canvas.getActiveObject()) { 502 if(canvas.getActiveObject()) {
498 var currentObj = canvas.getActiveObject(); 503 var currentObj = canvas.getActiveObject();
499 if(currentObj.type == 'i-text') { 504 if(currentObj.type == 'i-text') {
500 spacingNum = 0; 505 spacingNum = 0;
501 currentObj.set('charSpacing', spacingNum); 506 currentObj.set('charSpacing', spacingNum);
502 canvas.renderAll(); 507 canvas.renderAll();
503 canvas.setActiveObject(currentObj); 508 canvas.setActiveObject(currentObj);
504 } 509 }
505 } 510 }
506 }; 511 };
507 512
508 513
509 /**** process insert image */ 514 /**** process insert image */
510 if (typeof($window.localStorage.recentImages) != 'undefined'){ 515 if (typeof($window.localStorage.recentImages) != 'undefined'){
511 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 516 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
512 }else{ 517 }else{
513 $scope.recentImages = {}; 518 $scope.recentImages = {};
514 } 519 }
515 520
516 var addToRecentImage = function(name, data){ 521 var addToRecentImage = function(name, data){
517 if (typeof($window.localStorage.recentImages) != 'undefined'){ 522 if (typeof($window.localStorage.recentImages) != 'undefined'){
518 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 523 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
519 }else{ 524 }else{
520 $scope.recentImages = {}; 525 $scope.recentImages = {};
521 } 526 }
522 527
523 if (typeof($scope.recentImages[name]) == 'undefined'){ 528 if (typeof($scope.recentImages[name]) == 'undefined'){
524 var ii=0; 529 var ii=0;
525 var II = 0; 530 var II = 0;
526 for(var item in $scope.recentImages){ 531 for(var item in $scope.recentImages){
527 if (II==0){ 532 if (II==0){
528 II = item; 533 II = item;
529 } 534 }
530 ii++; 535 ii++;
531 } 536 }
532 if (ii>16 && II!=0){ 537 if (ii>16 && II!=0){
533 delete $scope.recentImages[II]; 538 delete $scope.recentImages[II];
534 } 539 }
535 $scope.recentImages[name] = data; 540 $scope.recentImages[name] = data;
536 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 541 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
537 } 542 }
538 } 543 }
539 $scope.chooseImage = function(e){//console.log(e); 544 $scope.chooseImage = function(e){//console.log(e);
540 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 545 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
541 alert('アップロードできませんでした'); 546 alert('アップロードできませんでした');
542 return; 547 return;
543 } 548 }
544 var reader = new FileReader(); 549 var reader = new FileReader();
545 reader.onload = function (event) { 550 reader.onload = function (event) {
546 addToRecentImage ($('#imgLoader').val(), event.target.result); 551 addToRecentImage ($('#imgLoader').val(), event.target.result);
547 var imgObj = new Image();//console.log($('#imgLoader').val()); 552 var imgObj = new Image();//console.log($('#imgLoader').val());
548 imgObj.src = event.target.result; 553 imgObj.src = event.target.result;
549 imgObj.onload = function () { 554 imgObj.onload = function () {
550 // start fabricJS stuff 555 // start fabricJS stuff
551 556
552 var image = new fabric.Image(imgObj); 557 var image = new fabric.Image(imgObj);
553 image.set({ 558 image.set({
554 left: 50, 559 left: 50,
555 top: 50 560 top: 50
556 }); 561 });
557 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 562 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
558 image.scaleToWidth(200); 563 image.scaleToWidth(200);
559 canvas.add(image); 564 canvas.add(image);
560 } 565 }
561 } 566 }
562 reader.readAsDataURL(e.target.files[0]); 567 reader.readAsDataURL(e.target.files[0]);
563 } 568 }
564 569
565 $scope.insertRecentImage = function(data){ 570 $scope.insertRecentImage = function(data){
566 var imgObj = new Image(); 571 var imgObj = new Image();
567 imgObj.src = data; 572 imgObj.src = data;
568 imgObj.onload = function () { 573 imgObj.onload = function () {
569 // start fabricJS stuff 574 // start fabricJS stuff
570 575
571 var image = new fabric.Image(imgObj); 576 var image = new fabric.Image(imgObj);
572 image.set({ 577 image.set({
573 left: 50, 578 left: 50,
574 top: 50 579 top: 50
575 }); 580 });
576 image.scaleToWidth(200); 581 image.scaleToWidth(200);
577 canvas.add(image); 582 canvas.add(image);
578 } 583 }
579 } 584 }
580 585
581 //Traslation text 586 //Traslation text
582 $scope.rotateText = function(style) { 587 $scope.rotateText = function(style) {
583 if(canvas.getActiveObject()) { 588 if(canvas.getActiveObject()) {
584 var currentObj = canvas.getActiveObject(); 589 var currentObj = canvas.getActiveObject();
585 if(currentObj.type == 'i-text') { 590 if(currentObj.type == 'i-text') {
586 currentObj.set('rotate', Math.PI / 4); 591 currentObj.set('rotate', Math.PI / 4);
587 canvas.renderAll(); 592 canvas.renderAll();
588 canvas.setActiveObject(currentObj); 593 canvas.setActiveObject(currentObj);
589 } 594 }
590 } 595 }
591 }; 596 };
592 597
593 598
594 /* Process output */ 599 /* Process output */
595 $scope.outputDesign = function(){ 600 $scope.outputDesign = function(){
596 $rootScope.outputImage = canvas.toDataURL('png'); 601 $rootScope.outputImage = canvas.toDataURL('png');
597 // console.log(); 602 // console.log();
598 $('#tshirt-design').modal('hide'); 603 $('#tshirt-design').modal('hide');
599 } 604 }
600 }); 605 });
601 }); 606 });
602 607