TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit f2c8c5649ed091347051866fd64a3052ddada6d1

Authored by TRUONG
1 parent 37cd3d6626
Exists in master and in 1 other branch develop

fix & update

Showing 2 changed files with 3 additions and 3 deletions Inline Diff

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