TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit ac7ca4a60a3750cca715674ae59d41be0b749f4f

Authored by DANG
1 parent afc65cdc72
Exists in master and in 1 other branch develop

fix

Showing 1 changed file with 21 additions and 28 deletions Inline Diff

app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ ac7ca4a
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) { 2 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration, $favorite) {
3 $scope.Math = window.Math; 3 $scope.Math = window.Math;
4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION; 4 $scope.savedFrameView = 'views/design_part/tshirt-saved.html?ver='+VERSION;
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 var diffX = 40, diffY = 40; 6 var diffX = 40, diffY = 40;
7 var _coorTrash_x = 567; 7 var _coorTrash_x = 567;
8 var _coorTrash_y = 545; 8 var _coorTrash_y = 545;
9 var ObjectOrd=0; 9 var ObjectOrd=0;
10 //Set width and height canvas 10 //Set width and height canvas
11 function setSizeCanvas() { 11 function setSizeCanvas() {
12 if(typeof $rootScope.placeTshirt.place == 'undefined') 12 if(typeof $rootScope.placeTshirt.place == 'undefined')
13 return; 13 return;
14 14
15 var _modalWidth = $('.modal-dialog').width(); 15 var _modalWidth = $('.modal-dialog').width();
16 var _windowWidth = window.innerWidth; 16 var _windowWidth = window.innerWidth;
17 var place = $rootScope.placeTshirt.place; 17 var place = $rootScope.placeTshirt.place;
18 18
19 switch (place) { 19 switch (place) {
20 case 't_shirt_p_1' : 20 case 't_shirt_p_1' :
21 $scope.designCanvasClass = 'design-content-t_shirt_p_1'; 21 $scope.designCanvasClass = 'design-content-t_shirt_p_1';
22 if(_windowWidth > 762) { 22 if(_windowWidth > 762) {
23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 23 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
24 var _contentCanvasHeight = _contentCanvasWidth; 24 var _contentCanvasHeight = _contentCanvasWidth;
25 } else { 25 } else {
26 var _contentCanvasWidth = _windowWidth-70; 26 var _contentCanvasWidth = _windowWidth-70;
27 var _contentCanvasHeight = _contentCanvasWidth; 27 var _contentCanvasHeight = _contentCanvasWidth;
28 } 28 }
29 break; 29 break;
30 case 't_shirt_p_2' : 30 case 't_shirt_p_2' :
31 $scope.designCanvasClass = 'design-content-t_shirt_p_2'; 31 $scope.designCanvasClass = 'design-content-t_shirt_p_2';
32 if(_windowWidth > 762) { 32 if(_windowWidth > 762) {
33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2; 33 var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2; 34 var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
35 35
36 } else { 36 } else {
37 var _contentCanvasWidth = _windowWidth-70; 37 var _contentCanvasWidth = _windowWidth-70;
38 var _contentCanvasHeight = (_windowWidth)/2.5; 38 var _contentCanvasHeight = (_windowWidth)/2.5;
39 } 39 }
40 break; 40 break;
41 default: 41 default:
42 break; 42 break;
43 } 43 }
44 44
45 canvas.setWidth(_contentCanvasWidth); 45 canvas.setWidth(_contentCanvasWidth);
46 canvas.setHeight(_contentCanvasHeight); 46 canvas.setHeight(_contentCanvasHeight);
47 47
48 var mainDsWidth = (_modalWidth*8/12)-30; 48 var mainDsWidth = (_modalWidth*8/12)-30;
49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight; 49 var mainDsHeight = (place == 't_shirt_p_1' ? 80 : 400) + _contentCanvasHeight;
50 // console.log(mainDsWidth, mainDsHeight); 50 // console.log(mainDsWidth, mainDsHeight);
51 diffX = 40; 51 diffX = 40;
52 diffY = (mainDsHeight - _contentCanvasHeight)/2; 52 diffY = (mainDsHeight - _contentCanvasHeight)/2;
53 _coorTrash_x = _contentCanvasWidth + 20; 53 _coorTrash_x = _contentCanvasWidth + 20;
54 _coorTrash_y = _contentCanvasHeight + diffY - 90; 54 _coorTrash_y = _contentCanvasHeight + diffY - 90;
55 console.log(_coorTrash_x, _coorTrash_y); 55 console.log(_coorTrash_x, _coorTrash_y);
56 } 56 }
57 setSizeCanvas(); 57 setSizeCanvas();
58 //Window resize event 58 //Window resize event
59 $(window).resize(function () { 59 $(window).resize(function () {
60 setSizeCanvas(); 60 setSizeCanvas();
61 }); 61 });
62 62
63 //Custom control 63 //Custom control
64 fabric.Object.prototype.transparentCorners = true; 64 fabric.Object.prototype.transparentCorners = true;
65 fabric.Object.prototype.hasRotatingPoint = false; 65 fabric.Object.prototype.hasRotatingPoint = false;
66 canvas.selection = false; 66 canvas.selection = false;
67 67
68 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; 68 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
69 for(key in ctrVisible) { 69 for(key in ctrVisible) {
70 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); 70 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
71 } 71 }
72 72
73 fabric.Object.prototype.customiseCornerIcons({ 73 fabric.Object.prototype.customiseCornerIcons({
74 settings: { 74 settings: {
75 borderColor: '#0000ff', 75 borderColor: '#0000ff',
76 cornerSize: 25, 76 cornerSize: 25,
77 cornerShape: 'circle', 77 cornerShape: 'circle',
78 cornerBackgroundColor: '#0171b4', 78 cornerBackgroundColor: '#0171b4',
79 cornerPadding: 6 79 cornerPadding: 6
80 }, 80 },
81 mt: { 81 mt: {
82 icon: 'images/control-icon/ok.png' 82 icon: 'images/control-icon/ok.png'
83 }, 83 },
84 br: { 84 br: {
85 icon: 'images/control-icon/resize.png' 85 icon: 'images/control-icon/resize.png'
86 }, 86 },
87 tr: { 87 tr: {
88 icon: 'images/control-icon/rotate.png' 88 icon: 'images/control-icon/rotate.png'
89 } 89 }
90 }); 90 });
91 91
92 fabric.Canvas.prototype.customiseControls({ 92 fabric.Canvas.prototype.customiseControls({
93 mt: { 93 mt: {
94 cursor: 'pointer', 94 cursor: 'pointer',
95 action: function(e, target) { 95 action: function(e, target) {
96 fabric.Object.prototype.selectable = false; 96 fabric.Object.prototype.selectable = false;
97 canvas.deactivateAll().renderAll(); 97 canvas.deactivateAll().renderAll();
98 delete currentObj; 98 delete currentObj;
99 $scope.designTextValue = ''; 99 $scope.designTextValue = '';
100 $timeout(function(){ 100 $timeout(function(){
101 fabric.Object.prototype.selectable = true; 101 fabric.Object.prototype.selectable = true;
102 },20); 102 },20);
103 } 103 }
104 }, 104 },
105 br: { 105 br: {
106 106
107 }, 107 },
108 tr: { 108 tr: {
109 action: 'rotate', 109 action: 'rotate',
110 cursor: 'crosshair' 110 cursor: 'crosshair'
111 } 111 }
112 }); 112 });
113 113
114 canvas.on({ 114 canvas.on({
115 'object:added' : onIllustrationAdded, 115 'object:added' : onIllustrationAdded,
116 'object:moving' : onIllustrationMoving, 116 'object:moving' : onIllustrationMoving,
117 'object:scaling' : onIllustrationChange, 117 'object:scaling' : onIllustrationChange,
118 'object:rotating' : onIllustrationChange, 118 'object:rotating' : onIllustrationChange,
119 'object:selected' : onObjectSelected, 119 'object:selected' : onObjectSelected,
120 'object:modified' : onIllustrationModifield, 120 'object:modified' : onIllustrationModifield,
121 'selection:cleared' : onObjectOut, 121 'selection:cleared' : onObjectOut,
122 }); 122 });
123 123
124 var currentObj; 124 var currentObj;
125 var listObj = []; 125 var listObj = [];
126 var stateObj = []; 126 var stateObj = [];
127 var indexCurr = 0; 127 var indexCurr = 0;
128 var indexCurr2 = 0; 128 var indexCurr2 = 0;
129 var actionObj = false; 129 var actionObj = false;
130 var refreshObj = true; 130 var refreshObj = true;
131 var spacingNum = 0; 131 var spacingNum = 0;
132 $scope.itemFont = 0; 132 $scope.itemFont = 0;
133 133
134 $scope.showDesignTab = function(tab){ 134 $scope.showDesignTab = function(tab){
135 canvas.deactivateAll().renderAll(); 135 canvas.deactivateAll().renderAll();
136 $rootScope.isShowLeftPanel = tab; 136 $rootScope.isShowLeftPanel = tab;
137 switch (tab) { 137 switch (tab) {
138 case 'illustration': { 138 case 'illustration': {
139 $scope.IllustrationList = $illustration.getAll(); 139 $scope.IllustrationList = $illustration.getAll();
140 $rootScope.outputImage = false; 140 $rootScope.outputImage = false;
141 $scope.illustrationSelectConfig = { 141 $scope.illustrationSelectConfig = {
142 allowClear:true 142 allowClear:true
143 }; 143 };
144 $timeout(function(){ 144 $timeout(function(){
145 $('.illstration-item').tooltip({ 145 $('.illstration-item').tooltip({
146 animated: 'fade', 146 animated: 'fade',
147 placement: 'bottom', 147 placement: 'bottom',
148 html: true 148 html: true
149 }); 149 });
150 },1000); 150 },1000);
151 break; 151 break;
152 } 152 }
153 case 'text': { 153 case 'text': {
154 break; 154 break;
155 } 155 }
156 } 156 }
157 }; 157 };
158 $scope.showDesignTab('default'); 158 $scope.showDesignTab('default');
159 159
160 160
161 function onIllustrationAdded(options){ 161 function onIllustrationAdded(options){
162 var object = options.target; 162 var object = options.target;
163 163
164 if (actionObj === true) { 164 if (actionObj === true) {
165 stateObj = [stateObj[indexCurr2]]; 165 stateObj = [stateObj[indexCurr2]];
166 listObj = [listObj[indexCurr2]]; 166 listObj = [listObj[indexCurr2]];
167 167
168 actionObj = false; 168 actionObj = false;
169 console.log(stateObj); 169 console.log(stateObj);
170 indexCurr = 1; 170 indexCurr = 1;
171 } 171 }
172 object.saveState(); 172 object.saveState();
173 173
174 // console.log(object.originalState); 174 // console.log(object.originalState);
175 stateObj[indexCurr] = JSON.stringify(object.originalState); 175 stateObj[indexCurr] = JSON.stringify(object.originalState);
176 listObj[indexCurr] = object; 176 listObj[indexCurr] = object;
177 indexCurr++; 177 indexCurr++;
178 indexCurr2 = indexCurr - 1; 178 indexCurr2 = indexCurr - 1;
179 refreshObj = true; 179 refreshObj = true;
180 } 180 }
181 181
182 function onIllustrationModifield(options){ 182 function onIllustrationModifield(options){
183 $('.object-border').hide(); 183 $('.object-border').hide();
184 // 184 //
185 var pointer = canvas.getPointer(options.e); 185 var pointer = canvas.getPointer(options.e);
186 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 186 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
187 canvas.getActiveObject().remove(); 187 canvas.getActiveObject().remove();
188 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 188 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
189 return; 189 return;
190 } 190 }
191 191
192 // 192 //
193 try{ 193 try{
194 var objOffset = canvas.getActiveObject().getBoundingRect(); 194 var objOffset = canvas.getActiveObject().getBoundingRect();
195 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 195 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
196 //console.log(objOffset,canvas.height,canvas.width); 196 //console.log(objOffset,canvas.height,canvas.width);
197 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 197 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
198 if (confirm('削除してもよろしいですか')){ 198 if (confirm('削除してもよろしいですか')){
199 canvas.getActiveObject().remove(); 199 canvas.getActiveObject().remove();
200 }else{ 200 }else{
201 undoCanvas(); 201 undoCanvas();
202 return; 202 return;
203 } 203 }
204 } 204 }
205 }catch (e){ 205 }catch (e){
206 // 206 //
207 } 207 }
208 208
209 var object = options.target; 209 var object = options.target;
210 if (actionObj === true) { 210 if (actionObj === true) {
211 stateObj = [stateObj[indexCurr2]]; 211 stateObj = [stateObj[indexCurr2]];
212 listObj = [listObj[indexCurr2]]; 212 listObj = [listObj[indexCurr2]];
213 213
214 actionObj = false; 214 actionObj = false;
215 console.log(stateObj); 215 console.log(stateObj);
216 indexCurr = 1; 216 indexCurr = 1;
217 } 217 }
218 218
219 object.saveState(); 219 object.saveState();
220 220
221 stateObj[indexCurr] = JSON.stringify(object.originalState); 221 stateObj[indexCurr] = JSON.stringify(object.originalState);
222 listObj[indexCurr] = object; 222 listObj[indexCurr] = object;
223 indexCurr++; 223 indexCurr++;
224 indexCurr2 = indexCurr - 1; 224 indexCurr2 = indexCurr - 1;
225 refreshObj = true; 225 refreshObj = true;
226 } 226 }
227 227
228 function onIllustrationChange(options) { 228 function onIllustrationChange(options) {
229 229
230 } 230 }
231 231
232 function onIllustrationMoving(options) { 232 function onIllustrationMoving(options) {
233 var object = options.target; 233 var object = options.target;
234 var pointer = canvas.getPointer(options.e); 234 var pointer = canvas.getPointer(options.e);
235 // console.log(pointer.x, pointer.y); 235 // console.log(pointer.x, pointer.y);
236 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){ 236 if (pointer.x >= _coorTrash_x && pointer.y >= _coorTrash_y && pointer.x <= _coorTrash_x+50 && pointer.y <= _coorTrash_y+70){
237 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 237 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
238 }else{ 238 }else{
239 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 239 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
240 } 240 }
241 241
242 // console.log(object.oCoords,object.originalState); 242 // console.log(object.oCoords,object.originalState);
243 object.setCoords(); 243 object.setCoords();
244 var Coords = object.oCoords; 244 var Coords = object.oCoords;
245 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; 245 var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2;
246 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; 246 var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2;
247 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 247 $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
248 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); 248 $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX});
249 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); 249 $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX});
250 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); 250 $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX});
251 $('.object-border').css({ 251 $('.object-border').css({
252 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ 252 '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */
253 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ 253 '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */
254 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ 254 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */
255 }); 255 });
256 $('.object-border').show(); 256 $('.object-border').show();
257 } 257 }
258 258
259 function onObjectOut() { 259 function onObjectOut() {
260 console.log('onObjectOut'); 260 console.log('onObjectOut');
261 canvas.deactivateAll().renderAll(); 261 canvas.deactivateAll().renderAll();
262 delete currentObj; 262 delete currentObj;
263 $scope.designTextValue = ''; 263 $scope.designTextValue = '';
264 $scope.safeApply(); 264 $scope.safeApply();
265 } 265 }
266 266
267 function undoCanvas() { 267 function undoCanvas() {
268 if (indexCurr <= 0) { 268 if (indexCurr <= 0) {
269 indexCurr = 0; 269 indexCurr = 0;
270 return; 270 return;
271 } 271 }
272 272
273 if (refreshObj === true) { 273 if (refreshObj === true) {
274 indexCurr--; 274 indexCurr--;
275 refreshObj = false; 275 refreshObj = false;
276 } 276 }
277 277
278 console.log('undo'); 278 console.log('undo');
279 279
280 indexCurr2 = indexCurr - 1; 280 indexCurr2 = indexCurr - 1;
281 currentObj = listObj[indexCurr2]; 281 currentObj = listObj[indexCurr2];
282 if (currentObj){ 282 if (currentObj){
283 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 283 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
284 } 284 }
285 285
286 indexCurr--; 286 indexCurr--;
287 currentObj.setCoords(); 287 currentObj.setCoords();
288 canvas.renderAll(); 288 canvas.renderAll();
289 actionObj = true; 289 actionObj = true;
290 } 290 }
291 291
292 function redoCanvas() { 292 function redoCanvas() {
293 actionObj = true; 293 actionObj = true;
294 if (indexCurr >= stateObj.length - 1) { 294 if (indexCurr >= stateObj.length - 1) {
295 return; 295 return;
296 } 296 }
297 297
298 console.log('redo'); 298 console.log('redo');
299 299
300 indexCurr2 = indexCurr + 1; 300 indexCurr2 = indexCurr + 1;
301 currentObj = listObj[indexCurr2]; 301 currentObj = listObj[indexCurr2];
302 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 302 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
303 303
304 indexCurr++; 304 indexCurr++;
305 currentObj.setCoords(); 305 currentObj.setCoords();
306 canvas.renderAll(); 306 canvas.renderAll();
307 } 307 }
308 308
309 $scope.canvasClearAll = function(){ 309 $scope.canvasClearAll = function(){
310 if (confirm('配置されたすべての文字や画像を消去します')){ 310 if (confirm('配置されたすべての文字や画像を消去します')){
311 canvas.clear(); 311 canvas.clear();
312 ObjectOrd = 0; 312 ObjectOrd = 0;
313 } 313 }
314 } 314 }
315 315
316 function onObjectSelected(options) { 316 function onObjectSelected(options) {
317 var currentObj = options.target; 317 var currentObj = options.target;
318 if (typeof currentObj.toOrd != 'function'){ 318 if (typeof currentObj.toOrd != 'function'){
319 var currentObjOrd = ++ObjectOrd; 319 var currentObjOrd = ++ObjectOrd;
320 currentObj.toOrd = function(){ 320 currentObj.toOrd = function(){
321 return currentObjOrd; 321 return currentObjOrd;
322 } 322 }
323 } 323 }
324 console.log(currentObj.toOrd()); 324 console.log(currentObj.toOrd());
325 $scope.typeObject = currentObj.type; 325 $scope.typeObject = currentObj.type;
326 switch ($scope.typeObject) { 326 switch ($scope.typeObject) {
327 case 'i-text' : 327 case 'i-text' :
328 $rootScope.isShowLeftPanel = 'text'; 328 $rootScope.isShowLeftPanel = 'text';
329 var text = currentObj.text; 329 var text = currentObj.text;
330 if(text != '') { 330 if(text != '') {
331 $scope.designText = text; 331 $scope.designText = text;
332 $scope.designTextValue = text; 332 $scope.designTextValue = text;
333 } 333 }
334 break; 334 break;
335 335
336 case 'path-group' : 336 case 'path-group' :
337 $rootScope.isShowLeftPanel = 'illustration'; 337 $rootScope.isShowLeftPanel = 'illustration';
338 break; 338 break;
339 339
340 case 'image': 340 case 'image':
341 $rootScope.isShowLeftPanel = 'image'; 341 $rootScope.isShowLeftPanel = 'image';
342 break; 342 break;
343 343
344 default : 344 default :
345 $rootScope.isShowLeftPanel = 'default'; 345 $rootScope.isShowLeftPanel = 'default';
346 break; 346 break;
347 } 347 }
348 $rootScope.safeApply(); 348 $rootScope.safeApply();
349 } 349 }
350 350
351 // Illustration process 351 // Illustration process
352 $scope.changeIllustrationCategory = function(currentIllustration){ 352 $scope.changeIllustrationCategory = function(currentIllustration){
353 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 353 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
354 }; 354 };
355 355
356 var arrSvgOriginal = []; 356 var arrSvgOriginal = [];
357 $scope.insertSvg = function(item){ 357 $scope.insertSvg = function(item){
358 fabric.loadSVGFromURL(item.path, function(objects, options) { 358 fabric.loadSVGFromURL(item.path, function(objects, options) {
359 var shape = fabric.util.groupSVGElements(objects, options); 359 var shape = fabric.util.groupSVGElements(objects, options);
360 var currentObjOrd = ++ObjectOrd; 360 var currentObjOrd = ++ObjectOrd;
361 arrSvgOriginal[currentObjOrd] = item.path; 361 arrSvgOriginal[currentObjOrd] = item.path;
362 shape.toOrd = function(){ 362 shape.toOrd = function(){
363 return currentObjOrd; 363 return currentObjOrd;
364 } 364 }
365 canvas.add(shape.scale(0.6)); 365 canvas.add(shape.scale(0.6));
366 shape.set({ left: 150, top: 100 }).setCoords(); 366 shape.set({ left: 150, top: 100 }).setCoords();
367 canvas.renderAll(); 367 canvas.renderAll();
368 canvas.setActiveObject(shape); 368 canvas.setActiveObject(shape);
369 }); 369 });
370 }; 370 };
371 371
372 // color pattern 372 // color pattern
373 $scope.listColorPatterns = [ 373 $scope.listColorPatterns = [
374 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 374 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
375 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 375 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
376 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 376 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
377 '#333333' 377 '#333333'
378 ]; 378 ];
379 379
380 $scope.changeColorPattern = function(color){ 380 $scope.changeColorPattern = function(color){
381 var obj = canvas.getActiveObject(); 381 var obj = canvas.getActiveObject();
382 if (!color){ 382 if (!color){
383 color = 'none'; 383 color = 'none';
384 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]); 384 // console.log(obj.toOrd(), arrSvgOriginal[obj.toOrd()]);
385 if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){ 385 if (typeof obj.toOrd == 'function' && typeof arrSvgOriginal[obj.toOrd()] != 'undefined'){
386 var currentObjOrd = obj.toOrd(); 386 var currentObjOrd = obj.toOrd();
387 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) { 387 fabric.loadSVGFromURL(arrSvgOriginal[obj.toOrd()], function(objects, options) {
388 var shape = fabric.util.groupSVGElements(objects, options); 388 var shape = fabric.util.groupSVGElements(objects, options);
389 shape.toOrd = function(){ 389 shape.toOrd = function(){
390 return currentObjOrd; 390 return currentObjOrd;
391 } 391 }
392 obj.setCoords(); 392 obj.setCoords();
393 shape.setScaleX(obj.getScaleX()); 393 shape.setScaleX(obj.getScaleX());
394 shape.setScaleY(obj.getScaleY()); 394 shape.setScaleY(obj.getScaleY());
395 shape.set('top',obj.getTop()); 395 shape.set('top',obj.getTop());
396 shape.set('left',obj.getLeft()); 396 shape.set('left',obj.getLeft());
397 shape.set('angle',obj.getAngle()); 397 shape.set('angle',obj.getAngle());
398 // shape.set('height',obj.getHeight()); 398 // shape.set('height',obj.getHeight());
399 // shape.set('width',obj.getWidth()); 399 // shape.set('width',obj.getWidth());
400 canvas.add(shape); 400 canvas.add(shape);
401 shape.setCoords(); 401 shape.setCoords();
402 // shape.set({ left: 150, top: 100 }).setCoords(); 402 // shape.set({ left: 150, top: 100 }).setCoords();
403 canvas.renderAll(); 403 canvas.renderAll();
404 canvas.setActiveObject(shape); 404 canvas.setActiveObject(shape);
405 obj.remove(); 405 obj.remove();
406 }); 406 });
407 } 407 }
408 }else{ 408 }else{
409 if (obj instanceof fabric.PathGroup) { 409 if (obj instanceof fabric.PathGroup) {
410 obj.getObjects().forEach(function(o) { 410 obj.getObjects().forEach(function(o) {
411 o.fill = color; 411 o.fill = color;
412 }); 412 });
413 } 413 }
414 else { 414 else {
415 obj.fill = color; 415 obj.fill = color;
416 } 416 }
417 canvas.renderAll(); 417 canvas.renderAll();
418 } 418 }
419 }; 419 };
420 420
421 //Font 421 //Font
422 $scope.listFontFamily = [ 422 $scope.listFontFamily = [
423 { 423 {
424 name : 'GN Aki iro Sesami Cookies', 424 name : 'GN Aki iro Sesami Cookies',
425 slug : 'gn_aki_iro_sesami_cookies', 425 slug : 'gn_aki_iro_sesami_cookies',
426 }, 426 },
427 { 427 {
428 name : 'GN-Fuyu-iro_Script_Bold', 428 name : 'GN-Fuyu-iro_Script_Bold',
429 slug : 'gn_fuyu_iro_script_bold' 429 slug : 'gn_fuyu_iro_script_bold'
430 }, 430 },
431 { 431 {
432 name : 'GN Killgothic U Kanana', 432 name : 'GN Killgothic U Kanana',
433 slug : 'gn_killgothic_u_kanana' 433 slug : 'gn_killgothic_u_kanana'
434 }, 434 },
435 { 435 {
436 name : 'GN-Kin-iro_Alphabet_Cookies', 436 name : 'GN-Kin-iro_Alphabet_Cookies',
437 slug : 'gn_kin_iro_alphabet_cookies' 437 slug : 'gn_kin_iro_alphabet_cookies'
438 438
439 }, 439 },
440 { 440 {
441 name : 'GN-Kin-iro_SansSerif', 441 name : 'GN-Kin-iro_SansSerif',
442 slug : 'gn_kin_iro_sansserif' 442 slug : 'gn_kin_iro_sansserif'
443 443
444 }, 444 },
445 { 445 {
446 name : 'GN-Koharuiro_Sunray', 446 name : 'GN-Koharuiro_Sunray',
447 slug : 'gn_koharuiro_sunray' 447 slug : 'gn_koharuiro_sunray'
448 448
449 }, 449 },
450 { 450 {
451 name : 'GN-Kyu-pin', 451 name : 'GN-Kyu-pin',
452 slug : 'gn_kyu_pin' 452 slug : 'gn_kyu_pin'
453 }, 453 },
454 { 454 {
455 name : 'gn_natsu_iro_schedule', 455 name : 'gn_natsu_iro_schedule',
456 slug : 'gn_natsu_iro_schedule' 456 slug : 'gn_natsu_iro_schedule'
457 457
458 }, 458 },
459 { 459 {
460 name : 'gnkana_kiniro_sansserif_l', 460 name : 'gnkana_kiniro_sansserif_l',
461 slug : 'gnkana_kiniro_sansserif_l' 461 slug : 'gnkana_kiniro_sansserif_l'
462 462
463 }, 463 },
464 { 464 {
465 name : 'gnkana_kiniro_sansserif_st', 465 name : 'gnkana_kiniro_sansserif_st',
466 slug : 'gnkana_kiniro_sansserif_st' 466 slug : 'gnkana_kiniro_sansserif_st'
467 }, 467 },
468 { 468 {
469 name : 'gnkana_kon_iro_nightfall', 469 name : 'gnkana_kon_iro_nightfall',
470 slug : 'gnkana_kon_iro_nightfall' 470 slug : 'gnkana_kon_iro_nightfall'
471 471
472 }, 472 },
473 { 473 {
474 name : 'ms_gothic', 474 name : 'ms_gothic',
475 slug : 'ms_gothic' 475 slug : 'ms_gothic'
476 476
477 }, 477 },
478 { 478 {
479 name : 'msmincho', 479 name : 'msmincho',
480 slug : 'msmincho' 480 slug : 'msmincho'
481 }, 481 },
482 { 482 {
483 name : 'ufonts_com_ms_pgothic', 483 name : 'ufonts_com_ms_pgothic',
484 slug : 'ufonts_com_ms_pgothic' 484 slug : 'ufonts_com_ms_pgothic'
485 } 485 }
486 ]; 486 ];
487 487
488 // layer process 488 // layer process
489 $scope.layerProcess = function(mode) { 489 $scope.layerProcess = function(mode) {
490 // console.log('layerProcess'); 490 // console.log('layerProcess');
491 var activeObject = canvas.getActiveObject(); 491 var activeObject = canvas.getActiveObject();
492 492
493 if (activeObject){ 493 if (activeObject){
494 switch (mode) { 494 switch (mode) {
495 case 1: 495 case 1:
496 activeObject.bringForward(); 496 activeObject.bringForward();
497 break; 497 break;
498 case 2: 498 case 2:
499 activeObject.sendBackwards(); 499 activeObject.sendBackwards();
500 break; 500 break;
501 case 3: 501 case 3:
502 activeObject.bringToFront(); 502 activeObject.bringToFront();
503 break; 503 break;
504 case 4: 504 case 4:
505 activeObject.sendToBack(); 505 activeObject.sendToBack();
506 break; 506 break;
507 } 507 }
508 canvas.deactivateAll().renderAll(); 508 canvas.deactivateAll().renderAll();
509 } 509 }
510 }; 510 };
511 511
512 512
513 //Design text 513 //Design text
514 $scope.inputText = function(e) { 514 $scope.inputText = function(e) {
515 currentObj = canvas.getActiveObject(); 515 currentObj = canvas.getActiveObject();
516 if(typeof currentObj == 'undefined' || currentObj == null) { 516 var _iText = new fabric.IText('', {
517 var _iText = new fabric.IText('', { 517 left: 150,
518 left: 150, 518 top: 200,
519 top: 200, 519 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug,
520 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 520 fontWeight: 'normal',
521 fontWeight: 'normal', 521 textAlign: 'center',
522 textAlign: 'center', 522 fontSize: 28,
523 fontSize: 28, 523 fill: 'black',
524 fill: 'black', 524 editable: false
525 editable: false 525 });
526 }); 526 if(typeof currentObj != 'undefined' && currentObj != null) {
527 } else { 527 _iText.set({
528 if(currentObj.type != 'i-text') { 528 left: currentObj.left,
529 var _iText = new fabric.IText('', { 529 top: currentObj.top,
530 left: 150, 530 fontFamily: currentObj.fontFamily,
531 top: 200, 531 fontSize: currentObj.fontSize,
532 fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, 532 fill: currentObj.fill
533 fontWeight: 'normal', 533 })
534 textAlign: 'center',
535 fontSize: 28,
536 fill: 'black',
537 editable: false
538 });
539 } else{
540 var _iText = currentObj;
541 }
542 } 534 }
543 535
544 _iText.set('text', e); 536
545 if(e.length > 1 && canvas.getActiveObject()) 537 if(canvas.getActiveObject())
546 canvas.getActiveObject().remove(); 538 canvas.getActiveObject().remove();
547 539
540 _iText.set('text', e);
548 canvas.add(_iText); 541 canvas.add(_iText);
549 canvas.setActiveObject(_iText); 542 canvas.setActiveObject(_iText);
550 canvas.renderAll(); 543 canvas.renderAll();
551 544
552 }; 545 };
553 $scope.setFontFamily = function(font,index) { 546 $scope.setFontFamily = function(font,index) {
554 $scope.itemFont = index; 547 $scope.itemFont = index;
555 if(canvas.getActiveObject()) { 548 if(canvas.getActiveObject()) {
556 var currentObj = canvas.getActiveObject(); 549 var currentObj = canvas.getActiveObject();
557 if(currentObj.type == 'i-text') { 550 if(currentObj.type == 'i-text') {
558 currentObj.set('fontFamily', font); 551 currentObj.set('fontFamily', font);
559 canvas.renderAll(); 552 canvas.renderAll();
560 canvas.setActiveObject(currentObj); 553 canvas.setActiveObject(currentObj);
561 } 554 }
562 555
563 } 556 }
564 }; 557 };
565 //Set letter spacing text 558 //Set letter spacing text
566 $scope.setLetterSpacingText = function(e) { 559 $scope.setLetterSpacingText = function(e) {
567 if(canvas.getActiveObject()) { 560 if(canvas.getActiveObject()) {
568 var currentObj = canvas.getActiveObject(); 561 var currentObj = canvas.getActiveObject();
569 if(currentObj.type == 'i-text') { 562 if(currentObj.type == 'i-text') {
570 if(e == 'plus') 563 if(e == 'plus')
571 spacingNum = spacingNum + 30; 564 spacingNum = spacingNum + 30;
572 else if (spacingNum >= -30){ 565 else if (spacingNum >= -30){
573 spacingNum = spacingNum - 30; 566 spacingNum = spacingNum - 30;
574 } 567 }
575 if(e == 'default') 568 if(e == 'default')
576 spacingNum = 0; 569 spacingNum = 0;
577 570
578 currentObj.set('charSpacing', spacingNum); 571 currentObj.set('charSpacing', spacingNum);
579 canvas.renderAll(); 572 canvas.renderAll();
580 canvas.setActiveObject(currentObj); 573 canvas.setActiveObject(currentObj);
581 } 574 }
582 } 575 }
583 }; 576 };
584 577
585 578
586 /**** process insert image */ 579 /**** process insert image */
587 if (typeof($window.localStorage.recentImages) != 'undefined'){ 580 if (typeof($window.localStorage.recentImages) != 'undefined'){
588 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 581 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
589 }else{ 582 }else{
590 $scope.recentImages = {}; 583 $scope.recentImages = {};
591 } 584 }
592 585
593 var addToRecentImage = function(name, data){ 586 var addToRecentImage = function(name, data){
594 if (typeof($window.localStorage.recentImages) != 'undefined'){ 587 if (typeof($window.localStorage.recentImages) != 'undefined'){
595 $scope.recentImages = JSON.parse($window.localStorage.recentImages); 588 $scope.recentImages = JSON.parse($window.localStorage.recentImages);
596 }else{ 589 }else{
597 $scope.recentImages = {}; 590 $scope.recentImages = {};
598 } 591 }
599 592
600 if (typeof($scope.recentImages[name]) == 'undefined'){ 593 if (typeof($scope.recentImages[name]) == 'undefined'){
601 var ii=0; 594 var ii=0;
602 var II = 0; 595 var II = 0;
603 for(var item in $scope.recentImages){ 596 for(var item in $scope.recentImages){
604 if (II==0){ 597 if (II==0){
605 II = item; 598 II = item;
606 } 599 }
607 ii++; 600 ii++;
608 } 601 }
609 if (ii>16 && II!=0){ 602 if (ii>16 && II!=0){
610 delete $scope.recentImages[II]; 603 delete $scope.recentImages[II];
611 } 604 }
612 $scope.recentImages[name] = data; 605 $scope.recentImages[name] = data;
613 $window.localStorage.recentImages = JSON.stringify($scope.recentImages); 606 $window.localStorage.recentImages = JSON.stringify($scope.recentImages);
614 } 607 }
615 } 608 }
616 $scope.chooseImage = function(e){//console.log(e); 609 $scope.chooseImage = function(e){//console.log(e);
617 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 610 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
618 alert('アップロードできませんでした'); 611 alert('アップロードできませんでした');
619 return; 612 return;
620 } 613 }
621 var reader = new FileReader(); 614 var reader = new FileReader();
622 reader.onload = function (event) { 615 reader.onload = function (event) {
623 addToRecentImage ($('#imgLoader').val(), event.target.result); 616 addToRecentImage ($('#imgLoader').val(), event.target.result);
624 var imgObj = new Image();//console.log($('#imgLoader').val()); 617 var imgObj = new Image();//console.log($('#imgLoader').val());
625 imgObj.src = event.target.result; 618 imgObj.src = event.target.result;
626 imgObj.onload = function () { 619 imgObj.onload = function () {
627 // start fabricJS stuff 620 // start fabricJS stuff
628 621
629 var image = new fabric.Image(imgObj); 622 var image = new fabric.Image(imgObj);
630 image.set({ 623 image.set({
631 left: 50, 624 left: 50,
632 top: 50 625 top: 50
633 }); 626 });
634 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 627 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
635 image.scaleToWidth(200); 628 image.scaleToWidth(200);
636 canvas.add(image); 629 canvas.add(image);
637 } 630 }
638 } 631 }
639 reader.readAsDataURL(e.target.files[0]); 632 reader.readAsDataURL(e.target.files[0]);
640 } 633 }
641 634
642 $scope.insertRecentImage = function(data){ 635 $scope.insertRecentImage = function(data){
643 var imgObj = new Image(); 636 var imgObj = new Image();
644 imgObj.src = data; 637 imgObj.src = data;
645 imgObj.onload = function () { 638 imgObj.onload = function () {
646 // start fabricJS stuff 639 // start fabricJS stuff
647 640
648 var image = new fabric.Image(imgObj); 641 var image = new fabric.Image(imgObj);
649 image.set({ 642 image.set({
650 left: 50, 643 left: 50,
651 top: 50 644 top: 50
652 }); 645 });
653 image.scaleToWidth(200); 646 image.scaleToWidth(200);
654 canvas.add(image); 647 canvas.add(image);
655 } 648 }
656 } 649 }
657 650
658 //Traslation text 651 //Traslation text
659 $scope.rotateText = function(style) { 652 $scope.rotateText = function(style) {
660 if(canvas.getActiveObject()) { 653 if(canvas.getActiveObject()) {
661 var currentObj = canvas.getActiveObject(); 654 var currentObj = canvas.getActiveObject();
662 if(currentObj.type == 'i-text') { 655 if(currentObj.type == 'i-text') {
663 currentObj.set('rotate', Math.PI / 4); 656 currentObj.set('rotate', Math.PI / 4);
664 canvas.renderAll(); 657 canvas.renderAll();
665 canvas.setActiveObject(currentObj); 658 canvas.setActiveObject(currentObj);
666 } 659 }
667 } 660 }
668 }; 661 };
669 662
670 663
671 /* Process output */ 664 /* Process output */
672 $scope.outputDesign = function(){ 665 $scope.outputDesign = function(){
673 $rootScope.outputImage = canvas.toDataURL('png'); 666 $rootScope.outputImage = canvas.toDataURL('png');
674 // console.log(); 667 // console.log();
675 $('#tshirt-design').modal('hide'); 668 $('#tshirt-design').modal('hide');
676 } 669 }
677 670
678 $scope.showRecommend = function(){ 671 $scope.showRecommend = function(){
679 $scope.recommendList = $favorite.getAll(); 672 $scope.recommendList = $favorite.getAll();
680 $scope.favoriteList = $favorite.getAll(); 673 $scope.favoriteList = $favorite.getAll();
681 $('#tshirt-design-saved').modal({ 674 $('#tshirt-design-saved').modal({
682 backdrop: 'static', 675 backdrop: 'static',
683 keyboard: false 676 keyboard: false
684 }); 677 });
685 $timeout(function(){ 678 $timeout(function(){
686 $('.saved-item').tooltip({ 679 $('.saved-item').tooltip({
687 animated: 'fade', 680 animated: 'fade',
688 placement: 'bottom', 681 placement: 'bottom',
689 html: true 682 html: true
690 }); 683 });
691 },1000); 684 },1000);
692 } 685 }
693 686
694 $scope.closeSavedModal = function(){ 687 $scope.closeSavedModal = function(){
695 $('#tshirt-design-saved').modal('hide'); 688 $('#tshirt-design-saved').modal('hide');
696 } 689 }
697 690
698 $scope.openSavedTab = function(tab){ 691 $scope.openSavedTab = function(tab){
699 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active'); 692 $('#tshirt-design-saved .subframe-design .nav-tabs li').removeClass('active');
700 $('#tab-saved-'+tab).addClass('active'); 693 $('#tab-saved-'+tab).addClass('active');
701 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active'); 694 $('#tshirt-design-saved .subframe-design .tab-content .tab-pane').removeClass('active');
702 $('#content-saved-'+tab).addClass('active'); 695 $('#content-saved-'+tab).addClass('active');
703 696
704 $timeout(function(){ 697 $timeout(function(){
705 $('.saved-item img').tooltip({ 698 $('.saved-item img').tooltip({
706 animated: 'fade', 699 animated: 'fade',
707 placement: 'bottom', 700 placement: 'bottom',
708 html: true 701 html: true
709 }); 702 });
710 },500); 703 },500);
711 } 704 }
712 705
713 $favorite.loadFromRemote(); 706 $favorite.loadFromRemote();
714 $scope.saveFavorite = function(){ 707 $scope.saveFavorite = function(){
715 if (!confirm('Do you want to put current design to your favorite?')){ 708 if (!confirm('Do you want to put current design to your favorite?')){
716 return; 709 return;
717 } 710 }
718 var dataDump = { 711 var dataDump = {
719 thumb: canvas.toDataURL('png'), 712 thumb: canvas.toDataURL('png'),
720 data: JSON.stringify(canvas) 713 data: JSON.stringify(canvas)
721 } 714 }
722 $favorite.addToFavorite({ 715 $favorite.addToFavorite({
723 data: dataDump 716 data: dataDump
724 }) 717 })
725 // console.log(JSON.stringify(dataDump)); 718 // console.log(JSON.stringify(dataDump));
726 alert('saved'); 719 alert('saved');
727 } 720 }
728 721
729 $scope.restoreSaved = function(item){ 722 $scope.restoreSaved = function(item){
730 if (!confirm('this may be clear all current design frame, are you sure ?')){ 723 if (!confirm('this may be clear all current design frame, are you sure ?')){
731 return; 724 return;
732 } 725 }
733 $('#tshirt-design-saved').modal('hide'); 726 $('#tshirt-design-saved').modal('hide');
734 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas)); 727 canvas.loadFromJSON(item.data,canvas.renderAll.bind(canvas));
735 ObjectOrd = 0; 728 ObjectOrd = 0;
736 canvas.forEachObject(function(obj){ 729 canvas.forEachObject(function(obj){
737 var currentObjOrd = ++ObjectOrd; 730 var currentObjOrd = ++ObjectOrd;
738 obj.toOrd = function(){ 731 obj.toOrd = function(){
739 return currentObjOrd; 732 return currentObjOrd;
740 } 733 }
741 }); 734 });
742 } 735 }
743 736
744 $scope.deleteFavorite = function(idx){ 737 $scope.deleteFavorite = function(idx){
745 if (confirm('are you sure?')){ 738 if (confirm('are you sure?')){
746 $favorite.removeFromFavorite({ 739 $favorite.removeFromFavorite({
747 idx: idx 740 idx: idx
748 }); 741 });
749 $scope.recommendList = $favorite.getAll(); 742 $scope.recommendList = $favorite.getAll();
750 $scope.favoriteList = $favorite.getAll(); 743 $scope.favoriteList = $favorite.getAll();
751 } 744 }
752 } 745 }
753 }); 746 });
754 }); 747 });