TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 0181c19ffccaf64d61587228e4116364e0597e73

Authored by TRUONG
1 parent 80ff9bbd4d
Exists in master and in 1 other branch develop

fix bugs and optimal.

Showing 3 changed files with 11 additions and 7 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 <!--[if lt IE 9]> 44 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 47 <![endif]-->
48 <script type="text/javascript"> 48 <script type="text/javascript">
49 var VERSION = '20-11_01'; 49 var VERSION = '19-11_02';
50 var require = { 50 var require = {
51 urlArgs: "ver="+VERSION, 51 urlArgs: "ver="+VERSION,
52 }; 52 };
53 </script> 53 </script>
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55 </body> 55 </body>
56 </html> 56 </html>
57 57
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 0181c19
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 console.log('after render'); 9 // console.log('after render');
10 }); 10 });
11 canvas.on({ 11 canvas.on({
12 'object:added' : onIllustrationAdded, 12 'object:added' : onIllustrationAdded,
13 'object:moving' : onIllustrationChange, 13 'object:moving' : onIllustrationChange,
14 'object:scaling' : onIllustrationChange, 14 'object:scaling' : onIllustrationChange,
15 'object:rotating' : onIllustrationChange, 15 'object:rotating' : onIllustrationChange,
16 'object:selected' : onObjectSelected, 16 'object:selected' : onObjectSelected,
17 'object:modified' : onIllustrationModifield, 17 'object:modified' : onIllustrationModifield,
18 'selection:cleared' : onObjectOut, 18 'selection:cleared' : onObjectOut,
19 }); 19 });
20 20
21 var currentObj; 21 var currentObj;
22 var listObj = []; 22 var listObj = [];
23 var stateObj = []; 23 var stateObj = [];
24 var indexCurr = 0; 24 var indexCurr = 0;
25 var indexCurr2 = 0; 25 var indexCurr2 = 0;
26 var actionObj = false; 26 var actionObj = false;
27 var refreshObj = true; 27 var refreshObj = true;
28 var spacingNum = 0; 28 var spacingNum = 0;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 console.log('object:added'); 32 // console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
55 //console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
57 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
58 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
59 }else{ 59 }else{
60 undoCanvas(); 60 undoCanvas();
61 return; 61 return;
62 } 62 }
63 } 63 }
64 64
65 var object = options.target; 65 var object = options.target;
66 console.log('object:modified'); 66 // console.log('object:modified');
67 if (actionObj === true) { 67 if (actionObj === true) {
68 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
69 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
70 70
71 actionObj = false; 71 actionObj = false;
72 console.log(stateObj); 72 console.log(stateObj);
73 indexCurr = 1; 73 indexCurr = 1;
74 } 74 }
75 75
76 object.saveState(); 76 object.saveState();
77 77
78 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
79 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
80 indexCurr++; 80 indexCurr++;
81 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
82 // console.log(stateObj); 82 // console.log(stateObj);
83 refreshObj = true; 83 refreshObj = true;
84 } 84 }
85 85
86 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
87 // options.target.setCoords(); 87 // options.target.setCoords();
88 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
89 // if (obj === options.target) return; 89 // if (obj === options.target) return;
90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
91 // }); 91 // });
92 } 92 }
93 93
94 function onObjectOut() { 94 function onObjectOut() {
95 delete currentObj; 95 delete currentObj;
96 $scope.designTextValue = ''; 96 $scope.designTextValue = '';
97 } 97 }
98 98
99 function undoCanvas() { 99 function undoCanvas() {
100 if (indexCurr <= 0) { 100 if (indexCurr <= 0) {
101 indexCurr = 0; 101 indexCurr = 0;
102 return; 102 return;
103 } 103 }
104 104
105 if (refreshObj === true) { 105 if (refreshObj === true) {
106 indexCurr--; 106 indexCurr--;
107 refreshObj = false; 107 refreshObj = false;
108 } 108 }
109 109
110 console.log('undo'); 110 console.log('undo');
111 111
112 indexCurr2 = indexCurr - 1; 112 indexCurr2 = indexCurr - 1;
113 currentObj = listObj[indexCurr2]; 113 currentObj = listObj[indexCurr2];
114 if (currentObj){ 114 if (currentObj){
115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
116 } 116 }
117 117
118 indexCurr--; 118 indexCurr--;
119 currentObj.setCoords(); 119 currentObj.setCoords();
120 canvas.renderAll(); 120 canvas.renderAll();
121 actionObj = true; 121 actionObj = true;
122 } 122 }
123 123
124 function redoCanvas() { 124 function redoCanvas() {
125 actionObj = true; 125 actionObj = true;
126 if (indexCurr >= stateObj.length - 1) { 126 if (indexCurr >= stateObj.length - 1) {
127 return; 127 return;
128 } 128 }
129 129
130 console.log('redo'); 130 console.log('redo');
131 131
132 indexCurr2 = indexCurr + 1; 132 indexCurr2 = indexCurr + 1;
133 currentObj = listObj[indexCurr2]; 133 currentObj = listObj[indexCurr2];
134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
135 135
136 indexCurr++; 136 indexCurr++;
137 currentObj.setCoords(); 137 currentObj.setCoords();
138 canvas.renderAll(); 138 canvas.renderAll();
139 } 139 }
140 140
141 $scope.canvasClearAll = function(){ 141 $scope.canvasClearAll = function(){
142 if (confirm('Do you want to reset design frame ?')){ 142 if (confirm('Do you want to reset design frame ?')){
143 canvas.clear(); 143 canvas.clear();
144 } 144 }
145 } 145 }
146 146
147 function onObjectSelected(options) { 147 function onObjectSelected(options) {
148 var currentObj = options.target; 148 var currentObj = options.target;
149 // console.log(currentObj.text); 149 // console.log(currentObj.text);
150 $scope.typeObject = currentObj.type; 150 $scope.typeObject = currentObj.type;
151 switch ($scope.typeObject) { 151 switch ($scope.typeObject) {
152 case 'i-text' : 152 case 'i-text' :
153 $rootScope.isShowLeftPanel = 'text'; 153 $rootScope.isShowLeftPanel = 'text';
154 var text = currentObj.text; 154 var text = currentObj.text;
155 if(text != '') { 155 if(text != '') {
156 $scope.designText = text; 156 $scope.designText = text;
157 $scope.designTextValue = text; 157 $scope.designTextValue = text;
158 } 158 }
159 break; 159 break;
160 160
161 case 'path-group' : 161 case 'path-group' :
162 $rootScope.isShowLeftPanel = 'illustration'; 162 $rootScope.isShowLeftPanel = 'illustration';
163 break; 163 break;
164 164
165 case 'image': 165 case 'image':
166 $rootScope.isShowLeftPanel = 'image'; 166 $rootScope.isShowLeftPanel = 'image';
167 break; 167 break;
168 168
169 default : 169 default :
170 $rootScope.isShowLeftPanel = 'default'; 170 $rootScope.isShowLeftPanel = 'default';
171 break; 171 break;
172 } 172 }
173 $rootScope.safeApply(); 173 $rootScope.safeApply();
174 } 174 }
175 175
176 // Illustration process 176 // Illustration process
177 $scope.changeIllustrationCategory = function(currentIllustration){ 177 $scope.changeIllustrationCategory = function(currentIllustration){
178 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 178 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
179 //console.log($scope.currentIllustrationCate); 179 //console.log($scope.currentIllustrationCate);
180 }; 180 };
181 181
182 $scope.insertSvg = function(item){ 182 $scope.insertSvg = function(item){
183 fabric.loadSVGFromURL(item.path, function(objects, options) { 183 fabric.loadSVGFromURL(item.path, function(objects, options) {
184 var shape = fabric.util.groupSVGElements(objects, options); 184 var shape = fabric.util.groupSVGElements(objects, options);
185 //shape.setFill('green'); 185 //shape.setFill('green');
186 canvas.add(shape.scale(0.6)); 186 canvas.add(shape.scale(0.6));
187 shape.set({ left: 150, top: 200 }).setCoords(); 187 shape.set({ left: 150, top: 200 }).setCoords();
188 canvas.renderAll(); 188 canvas.renderAll();
189 canvas.setActiveObject(shape); 189 canvas.setActiveObject(shape);
190 }); 190 });
191 }; 191 };
192 192
193 // color pattern 193 // color pattern
194 $scope.listColorPatterns = [ 194 $scope.listColorPatterns = [
195 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 195 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
196 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 196 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
197 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 197 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
198 '#333333' 198 '#333333'
199 ]; 199 ];
200 200
201 $scope.changeColorPattern = function(color){ 201 $scope.changeColorPattern = function(color){
202 var obj = canvas.getActiveObject(); 202 var obj = canvas.getActiveObject();
203 if (!color){ 203 if (!color){
204 color = 'none'; 204 color = 'none';
205 } 205 }
206 if (obj instanceof fabric.PathGroup) { 206 if (obj instanceof fabric.PathGroup) {
207 obj.getObjects().forEach(function(o) { 207 obj.getObjects().forEach(function(o) {
208 o.fill = color; 208 o.fill = color;
209 }); 209 });
210 } 210 }
211 else { 211 else {
212 obj.fill = color; 212 obj.fill = color;
213 } 213 }
214 canvas.renderAll(); 214 canvas.renderAll();
215 // if (canvas.getActiveObject()){ 215 // if (canvas.getActiveObject()){
216 // canvas.getActiveObject().set("fill", color); 216 // canvas.getActiveObject().set("fill", color);
217 // canvas.renderAll(); 217 // canvas.renderAll();
218 // } 218 // }
219 }; 219 };
220 220
221 //Font 221 //Font
222 $scope.listFontFamily = [ 222 $scope.listFontFamily = [
223 { 223 {
224 name : 'GN Aki iro Sesami Cookies', 224 name : 'GN Aki iro Sesami Cookies',
225 slug : 'gn_aki_iro_sesami_cookies', 225 slug : 'gn_aki_iro_sesami_cookies',
226 }, 226 },
227 { 227 {
228 name : 'GN-Fuyu-iro_Script_Bold', 228 name : 'GN-Fuyu-iro_Script_Bold',
229 slug : 'gn_fuyu_iro_script_bold' 229 slug : 'gn_fuyu_iro_script_bold'
230 }, 230 },
231 { 231 {
232 name : 'GN Killgothic U Kanana', 232 name : 'GN Killgothic U Kanana',
233 slug : 'gn_killgothic_u_kanana' 233 slug : 'gn_killgothic_u_kanana'
234 }, 234 },
235 { 235 {
236 name : 'GN-Kin-iro_Alphabet_Cookies', 236 name : 'GN-Kin-iro_Alphabet_Cookies',
237 slug : 'gn_kin_iro_alphabet_cookies' 237 slug : 'gn_kin_iro_alphabet_cookies'
238 238
239 }, 239 },
240 { 240 {
241 name : 'GN-Kin-iro_SansSerif', 241 name : 'GN-Kin-iro_SansSerif',
242 slug : 'gn_kin_iro_sansserif' 242 slug : 'gn_kin_iro_sansserif'
243 243
244 }, 244 },
245 { 245 {
246 name : 'GN-Koharuiro_Sunray', 246 name : 'GN-Koharuiro_Sunray',
247 slug : 'gn_koharuiro_sunray' 247 slug : 'gn_koharuiro_sunray'
248 248
249 }, 249 },
250 { 250 {
251 name : 'GN-Kyu-pin', 251 name : 'GN-Kyu-pin',
252 slug : 'gn_kyu_pin' 252 slug : 'gn_kyu_pin'
253 }, 253 },
254 { 254 {
255 name : 'gn_natsu_iro_schedule', 255 name : 'gn_natsu_iro_schedule',
256 slug : 'gn_natsu_iro_schedule' 256 slug : 'gn_natsu_iro_schedule'
257 257
258 }, 258 },
259 { 259 {
260 name : 'gnkana_kiniro_sansserif_l', 260 name : 'gnkana_kiniro_sansserif_l',
261 slug : 'gnkana_kiniro_sansserif_l' 261 slug : 'gnkana_kiniro_sansserif_l'
262 262
263 }, 263 },
264 { 264 {
265 name : 'gnkana_kiniro_sansserif_st', 265 name : 'gnkana_kiniro_sansserif_st',
266 slug : 'gnkana_kiniro_sansserif_st' 266 slug : 'gnkana_kiniro_sansserif_st'
267 }, 267 },
268 { 268 {
269 name : 'gnkana_kon_iro_nightfall', 269 name : 'gnkana_kon_iro_nightfall',
270 slug : 'gnkana_kon_iro_nightfall' 270 slug : 'gnkana_kon_iro_nightfall'
271 271
272 }, 272 },
273 { 273 {
274 name : 'ms_gothic', 274 name : 'ms_gothic',
275 slug : 'ms_gothic' 275 slug : 'ms_gothic'
276 276
277 }, 277 },
278 { 278 {
279 name : 'msmincho', 279 name : 'msmincho',
280 slug : 'msmincho' 280 slug : 'msmincho'
281 }, 281 },
282 { 282 {
283 name : 'ufonts_com_ms_pgothic', 283 name : 'ufonts_com_ms_pgothic',
284 slug : 'ufonts_com_ms_pgothic' 284 slug : 'ufonts_com_ms_pgothic'
285 } 285 }
286 ]; 286 ];
287 287
288 // layer process 288 // layer process
289 $scope.layerProcess = function(mode) { 289 $scope.layerProcess = function(mode) {
290 // console.log('layerProcess'); 290 // console.log('layerProcess');
291 var activeObject = canvas.getActiveObject(); 291 var activeObject = canvas.getActiveObject();
292 292
293 console.log(activeObject); 293 console.log(activeObject);
294 294
295 if (activeObject){ 295 if (activeObject){
296 switch (mode) { 296 switch (mode) {
297 case 1: 297 case 1:
298 // canvas.bringForward(activeObject); 298 // canvas.bringForward(activeObject);
299 activeObject.bringForward(); 299 activeObject.bringForward();
300 break; 300 break;
301 case 2: 301 case 2:
302 // canvas.sendBackwards(activeObject); 302 // canvas.sendBackwards(activeObject);
303 activeObject.sendBackwards(); 303 activeObject.sendBackwards();
304 break; 304 break;
305 case 3: 305 case 3:
306 // canvas.bringToFront(activeObject); 306 // canvas.bringToFront(activeObject);
307 activeObject.bringToFront(); 307 activeObject.bringToFront();
308 break; 308 break;
309 case 4: 309 case 4:
310 // canvas.sendToBack(activeObject); 310 // canvas.sendToBack(activeObject);
311 activeObject.sendToBack(); 311 activeObject.sendToBack();
312 break; 312 break;
313 } 313 }
314 canvas.deactivateAll().renderAll(); 314 canvas.deactivateAll().renderAll();
315 } 315 }
316 }; 316 };
317 317
318 $scope.focusInputText = function(text) { 318 $scope.focusInputText = function(text) {
319 currentObj = canvas.getActiveObject(); 319 currentObj = canvas.getActiveObject();
320 if(typeof currentObj == 'undefined' || currentObj == null) { 320 if(typeof currentObj == 'undefined' || currentObj == null) {
321 $scope.iText = new fabric.IText('', { 321 $scope.iText = new fabric.IText('', {
322 left: 150, 322 left: 150,
323 top: 200, 323 top: 200,
324 fontFamily: 'Arial', 324 fontFamily: 'Arial',
325 fontWeight: 'normal', 325 fontWeight: 'normal',
326 textAlign: 'center', 326 textAlign: 'center',
327 fontSize: 28, 327 fontSize: 28,
328 fill: 'black' 328 fill: 'black'
329 }); 329 });
330 } else { 330 } else {
331 if(currentObj.type != 'i-text') { 331 if(currentObj.type != 'i-text') {
332 $scope.iText = new fabric.IText('', { 332 $scope.iText = new fabric.IText('', {
333 left: 150, 333 left: 150,
334 top: 200, 334 top: 200,
335 fontFamily: 'Arial', 335 fontFamily: 'Arial',
336 fontWeight: 'normal', 336 fontWeight: 'normal',
337 textAlign: 'center', 337 textAlign: 'center',
338 fontSize: 28, 338 fontSize: 28,
339 fill: 'black' 339 fill: 'black'
340 }); 340 });
341 } else{ 341 } else{
342 $scope.iText = currentObj; 342 $scope.iText = currentObj;
343 } 343 }
344 } 344 }
345 }; 345 };
346 346
347 //Design text 347 //Design text
348 $scope.inputText = function(e) { 348 $scope.inputText = function(e) {
349 if(typeof $scope.iText != "undefined") { 349 if(typeof $scope.iText != "undefined") {
350 var iText = $scope.iText; 350 var iText = $scope.iText;
351 iText.text = e; 351 iText.text = e;
352 canvas.add(iText); 352 canvas.add(iText);
353 canvas.renderAll(); 353 canvas.renderAll();
354 canvas.setActiveObject(iText); 354 canvas.setActiveObject(iText);
355 } 355 }
356 }; 356 };
357 $scope.setFontFamily = function(font) { 357 $scope.setFontFamily = function(font) {
358 if(canvas.getActiveObject()) { 358 if(canvas.getActiveObject()) {
359 var currentObj = canvas.getActiveObject(); 359 var currentObj = canvas.getActiveObject();
360 if(currentObj.type == 'i-text') { 360 if(currentObj.type == 'i-text') {
361 currentObj.set('fontFamily', font); 361 currentObj.set('fontFamily', font);
362 canvas.renderAll(); 362 canvas.renderAll();
363 canvas.setActiveObject(currentObj); 363 canvas.setActiveObject(currentObj);
364 } 364 }
365 365
366 } 366 }
367 }; 367 };
368 //Set letter spacing text 368 //Set letter spacing text
369 $scope.setLetterSpacingText = function(e) { 369 $scope.setLetterSpacingText = function(e) {
370 if(canvas.getActiveObject()) { 370 if(canvas.getActiveObject()) {
371 var currentObj = canvas.getActiveObject(); 371 var currentObj = canvas.getActiveObject();
372 if(currentObj.type == 'i-text') { 372 if(currentObj.type == 'i-text') {
373 if(e == 'plus') 373 if(e == 'plus')
374 spacingNum = spacingNum + 30; 374 spacingNum = spacingNum + 30;
375 else if (spacingNum >= 30){ 375 else if (spacingNum >= 30){
376 spacingNum = spacingNum - 30; 376 spacingNum = spacingNum - 30;
377 } 377 }
378 currentObj.set('charSpacing', spacingNum); 378 currentObj.set('charSpacing', spacingNum);
379 canvas.renderAll(); 379 canvas.renderAll();
380 canvas.setActiveObject(currentObj); 380 canvas.setActiveObject(currentObj);
381 } 381 }
382 } 382 }
383 } 383 }
384 384
385 385
386 /**** process insert image */ 386 /**** process insert image */
387 $scope.chooseImage = function(e){console.log(e); 387 $scope.chooseImage = function(e){console.log(e);
388 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
389 alert('file size much be <= 5MB');
390 return;
391 }
388 var reader = new FileReader(); 392 var reader = new FileReader();
389 reader.onload = function (event) { console.log('fdsf'); 393 reader.onload = function (event) {
390 var imgObj = new Image(); 394 var imgObj = new Image();//console.log(event.target);
391 imgObj.src = event.target.result; 395 imgObj.src = event.target.result;
392 imgObj.onload = function () { 396 imgObj.onload = function () {
393 // start fabricJS stuff 397 // start fabricJS stuff
394 398
395 var image = new fabric.Image(imgObj); 399 var image = new fabric.Image(imgObj);
396 image.set({ 400 image.set({
397 left: 50, 401 left: 50,
398 top: 50 402 top: 50
399 }); 403 });
400 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 404 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
401 image.scaleToWidth(200); 405 image.scaleToWidth(200);
402 canvas.add(image); 406 canvas.add(image);
403 } 407 }
404 } 408 }
405 reader.readAsDataURL(e.target.files[0]); 409 reader.readAsDataURL(e.target.files[0]);
406 } 410 }
407 411
408 //Traslation text 412 //Traslation text
409 $scope.rotateText = function(style) { 413 $scope.rotateText = function(style) {
410 if(canvas.getActiveObject()) { 414 if(canvas.getActiveObject()) {
411 var currentObj = canvas.getActiveObject(); 415 var currentObj = canvas.getActiveObject();
412 if(currentObj.type == 'i-text') { 416 if(currentObj.type == 'i-text') {
413 currentObj.set('rotate', Math.PI / 4); 417 currentObj.set('rotate', Math.PI / 4);
414 canvas.renderAll(); 418 canvas.renderAll();
415 canvas.setActiveObject(currentObj); 419 canvas.setActiveObject(currentObj);
416 } 420 }
417 } 421 }
418 }; 422 };
419 423
420 424
421 /* Process output */ 425 /* Process output */
422 $scope.outputDesign = function(){ 426 $scope.outputDesign = function(){
423 $rootScope.outputImage = canvas.toDataURL('png'); 427 $rootScope.outputImage = canvas.toDataURL('png');
424 // console.log(); 428 // console.log();
425 $('#tshirt-design').modal('hide'); 429 $('#tshirt-design').modal('hide');
426 } 430 }
427 }); 431 });
428 }); 432 });
429 433
1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> 1 <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2 <div class="row"> 2 <div class="row">
3 <header> 3 <header>
4 <div class="logo"> 4 <div class="logo">
5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> 5 <img src="images/logo_mobile_world.png" alt="Logo Mobile World" />
6 MOBILE WORLD 6 MOBILE WORLD
7 </div> 7 </div>
8 </header> 8 </header>
9 <nav class="clearfix"> 9 <nav class="clearfix">
10 <div class="col-sm-12"> 10 <div class="col-sm-12">
11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> 11 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
12 <ul class="pull-right"> 12 <ul class="pull-right">
13 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> 13 <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
14 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> 14 <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
15 <li class="action">デザインする</li> 15 <li class="action">デザインする</li>
16 </ul> 16 </ul>
17 </div> 17 </div>
18 </nav> 18 </nav>
19 <article class="clearfix"> 19 <article class="clearfix">
20 <aside class="col-sm-5"> 20 <aside class="col-sm-5">
21 <div class="step"> 21 <div class="step">
22 <div class="title"> 22 <div class="title">
23 1. デザインを作る 23 1. デザインを作る
24 </div> 24 </div>
25 <div class="step-box"> 25 <div class="step-box">
26 <div class="tshirt-design clearfix"> 26 <div class="tshirt-design clearfix">
27 <div class="icon"> 27 <div class="icon">
28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> 28 <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
29 </div> 29 </div>
30 <div class="name"> 30 <div class="name">
31 背中背中 (28x22) 31 背中背中 (28x22)
32 </div> 32 </div>
33 <div class="action"> 33 <div class="action">
34 <button class="red" ng-click="modalTShirtDesign()"> 34 <button class="red" ng-click="modalTShirtDesign()">
35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る 35 <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
36 </button> 36 </button>
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- BREAK DOWN--> 42 <!-- BREAK DOWN-->
43 <div class="text-center break-down"> 43 <div class="text-center break-down">
44 <img src="images/bg_step_arrow.gif" alt="arrow" /> 44 <img src="images/bg_step_arrow.gif" alt="arrow" />
45 </div> 45 </div>
46 46
47 <!-- STEP 2--> 47 <!-- STEP 2-->
48 <div class="step"> 48 <div class="step">
49 <div class="title"> 49 <div class="title">
50 2.アイテムカラーを変更する 50 2.アイテムカラーを変更する
51 </div> 51 </div>
52 <div class="step-box clearfix"> 52 <div class="step-box clearfix">
53 <div class="tshirt-color"> 53 <div class="tshirt-color">
54 <ul class="choice-color clearfix"> 54 <ul class="choice-color clearfix">
55 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> 55 <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
56 <div ng-style="{'background-color' : color.code}"></div> 56 <div ng-style="{'background-color' : color.code}"></div>
57 </li> 57 </li>
58 </ul> 58 </ul>
59 <div class="color-name" ng-bind="tShirtColorName"></div> 59 <div class="color-name" ng-bind="tShirtColorName"></div>
60 <div class="view-more"> 60 <div class="view-more">
61 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 61 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
62 </div> 62 </div>
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>
66 66
67 <!-- BREAK DOWN--> 67 <!-- BREAK DOWN-->
68 <div class="text-center break-down"> 68 <div class="text-center break-down">
69 <img src="images/bg_step_arrow.gif" alt="arrow" /> 69 <img src="images/bg_step_arrow.gif" alt="arrow" />
70 </div> 70 </div>
71 71
72 <!-- STEP 3--> 72 <!-- STEP 3-->
73 <div class="step"> 73 <div class="step">
74 <div class="step-box clearfix"> 74 <div class="step-box clearfix">
75 <div class="tshirt-saveorder"> 75 <div class="tshirt-saveorder">
76 <div class="clearfix"> 76 <div class="clearfix">
77 <div class="action"> 77 <div class="action">
78 <button class="white"> 78 <button class="white">
79 <div class="text"> 79 <div class="text">
80 このデザインを保存する 80 このデザインを保存する
81 </div> 81 </div>
82 <div class="arrow"> 82 <div class="arrow">
83 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 83 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
84 </div> 84 </div>
85 </button> 85 </button>
86 </div> 86 </div>
87 <div class="action"> 87 <div class="action">
88 <button class="red"> 88 <button class="red">
89 <div class="text"> 89 <div class="text">
90 このデザインで注文する 90 このデザインで注文する
91 </div> 91 </div>
92 <div class="arrow clearfix"> 92 <div class="arrow clearfix">
93 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 93 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
94 </div> 94 </div>
95 </button> 95 </button>
96 </div> 96 </div>
97 </div> 97 </div>
98 <div class="notice"> 98 <div class="notice">
99 デザインを保存するには、ログインしてください 99 デザインを保存するには、ログインしてください
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 103
104 <!-- BREAL LINE--> 104 <!-- BREAL LINE-->
105 <div class="text-center break-line"> 105 <div class="text-center break-line">
106 <hr /> 106 <hr />
107 </div> 107 </div>
108 108
109 <!-- STEP 4--> 109 <!-- STEP 4-->
110 <div class="step"> 110 <div class="step">
111 <div class="title-notice"> 111 <div class="title-notice">
112 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> 112 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span>
113 </div> 113 </div>
114 <div class="step-box"> 114 <div class="step-box">
115 <div class="change-design"> 115 <div class="change-design">
116 <table> 116 <table>
117 <tr> 117 <tr>
118 <td class="text-center">商品</td> 118 <td class="text-center">商品</td>
119 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td> 119 <td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
120 <td class="text-right"> 120 <td class="text-right">
121 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 121 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
122 </td> 122 </td>
123 </tr> 123 </tr>
124 <tr> 124 <tr>
125 <td width="10%" class="text-center">加工方法</td> 125 <td width="10%" class="text-center">加工方法</td>
126 <td width="70%">シルク：胸中央 (27×27)</td> 126 <td width="70%">シルク：胸中央 (27×27)</td>
127 <td width="20%" class="text-right"> 127 <td width="20%" class="text-right">
128 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> 128 <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button>
129 </td> 129 </td>
130 </tr> 130 </tr>
131 </table> 131 </table>
132 </div> 132 </div>
133 </div> 133 </div>
134 </div> 134 </div>
135 <!-- STEP 5- finish--> 135 <!-- STEP 5- finish-->
136 <div class="step"> 136 <div class="step">
137 <div class="finish-design"> 137 <div class="finish-design">
138 <button class="white"> 138 <button class="white">
139 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> 139 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
140 </button> 140 </button>
141 </div> 141 </div>
142 142
143 </div> 143 </div>
144 </div> 144 </div>
145 </aside> 145 </aside>
146 <section id="tshirt-content" class="col-sm-7 text-center"> 146 <section id="tshirt-content" class="col-sm-7 text-center">
147 <div class="switch-border-design"> 147 <div class="switch-border-design">
148 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す 148 <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
149 </div> 149 </div>
150 <div class="tshirt-image"> 150 <div class="tshirt-image">
151 <img ng-src="{{ tShirtImg }}" alt="" /> 151 <img ng-src="{{ tShirtImg }}" alt="" />
152 <div id="preview-design" onClick="$('#tshirt-design').modal('show');"> 152 <div id="preview-design" ng-click="modalTShirtDesign()">
153 <img ng-src="{{outputImage}}" ng-show="outputImage"/> 153 <img ng-src="{{outputImage}}" ng-show="outputImage"/>
154 </div> 154 </div>
155 </div> 155 </div>
156 <div class="tshirt-choice"> 156 <div class="tshirt-choice">
157 <ul> 157 <ul>
158 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 158 <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
159 <div>前</div> 159 <div>前</div>
160 <div class="image" ng-click="choiceTShirtBackFront('front')"> 160 <div class="image" ng-click="choiceTShirtBackFront('front')">
161 <img ng-src="{{ tShirtImgFront }}" alt="" /> 161 <img ng-src="{{ tShirtImgFront }}" alt="" />
162 </div> 162 </div>
163 163
164 </li> 164 </li>
165 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> 165 <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
166 <div>後</div> 166 <div>後</div>
167 <div class="image" ng-click="choiceTShirtBackFront('back')"> 167 <div class="image" ng-click="choiceTShirtBackFront('back')">
168 <img ng-src="{{ tShirtImgBack }}" alt="" /> 168 <img ng-src="{{ tShirtImgBack }}" alt="" />
169 </div> 169 </div>
170 170
171 </li> 171 </li>
172 </ul> 172 </ul>
173 </div> 173 </div>
174 </section> 174 </section>
175 </article> 175 </article>
176 <footer class="clearfix"> 176 <footer class="clearfix">
177 <ul class="nav-footer"> 177 <ul class="nav-footer">
178 <li><a href="#">店舗検索</a></li> 178 <li><a href="#">店舗検索</a></li>
179 <li><a href="#">お客様窓口</a></li> 179 <li><a href="#">お客様窓口</a></li>
180 <li><a href="#">企業情報</a></li> 180 <li><a href="#">企業情報</a></li>
181 <li><a href="#">採用情報</a></li> 181 <li><a href="#">採用情報</a></li>
182 <li><a href="#">プライバシーポリシー</a></li> 182 <li><a href="#">プライバシーポリシー</a></li>
183 </ul> 183 </ul>
184 </footer> 184 </footer>
185 185
186 <!--MODAL CONTENT--> 186 <!--MODAL CONTENT-->
187 <div ng-include="designFrameView"></div> 187 <div ng-include="designFrameView"></div>
188 </div> 188 </div>
189 189
190 190
191 </div> 191 </div>
192 192