TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 1be40f088ea9859f31658f5667578aa58f683e76

Authored by TRUONG
2 parents 3ab3e50f83 3806b5973e
Exists in master and in 1 other branch develop

merge conflict 

Merge branch 'master' of timesfun.net:TRUONG/t-shats

Showing 10 changed files Inline Diff

No preview for this file type
No preview for this file type
app/images/.DS_Store
Diff comments   View file @ 1be40f0
No preview for this file type
app/images/control-icon/ok.png
Diff comments   View file @ 1be40f0

3.45 KB
app/images/control-icon/resize.png
Diff comments   View file @ 1be40f0

3.78 KB
app/images/control-icon/rotate.png
Diff comments   View file @ 1be40f0

4.07 KB
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 <!--[if lt IE 9]> 45 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 48 <![endif]-->
48 <script type="text/javascript"> 49 <script type="text/javascript">
49 var VERSION = '22-11_01'; 50 var VERSION = '22-11_01';
50 var require = { 51 var require = {
51 urlArgs: "ver="+VERSION, 52 urlArgs: "ver="+VERSION,
52 }; 53 };
53 </script> 54 </script>
54 <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>
55 </body> 56 </body>
56 </html> 57 </html>
57 58
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 1be40f0
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 fabric.Object.prototype.hasRotatingPoint = false;
8 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
9 for(key in ctrVisible) {
10 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
11 }
12 fabric.Object.prototype.customiseCornerIcons({
13 settings: {
14 borderColor: '#0000ff',
15 cornerSize: 25,
16 cornerShape: 'circle',
17 cornerBackgroundColor: '#0171b4',
18 cornerPadding: 6
19 },
20 mt: {
21 icon: 'images/control-icon/ok.png'
22 },
23 br: {
24 icon: 'images/control-icon/resize.png'
25 },
26 tr: {
27 icon: 'images/control-icon/rotate.png'
28 }
29 });
7 30
31 fabric.Canvas.prototype.customiseControls({
32 mt: {
33 cursor: 'pointer',
34 action: function (e, target) {
35 target.hasControls = false;
36 target.hasBorders = false;
37 canvas.deactivateAll().renderAll();
38 setTimeout(function() {
39 target.hasControls = true;
40 target.hasBorders = true;
41 }, 1);
42 }
43 },
44 br: {
45
46 },
47 tr: {
48 action: 'rotate',
49 cursor: 'crosshair'
50 }
51 });
52
8 canvas.on('after:render', function() { 53 canvas.on('after:render', function() {
9 // console.log('after render'); 54 // console.log('after render');
10 }); 55 });
11 canvas.on({ 56 canvas.on({
57 'mouse:up' : mouseUp,
12 'object:added' : onIllustrationAdded, 58 'object:added' : onIllustrationAdded,
13 'object:moving' : onIllustrationMoving, 59 'object:moving' : onIllustrationMoving,
14 'object:scaling' : onIllustrationChange, 60 'object:scaling' : onIllustrationChange,
15 'object:rotating' : onIllustrationChange, 61 'object:rotating' : onIllustrationChange,
16 'object:selected' : onObjectSelected, 62 'object:selected' : onObjectSelected,
17 'object:modified' : onIllustrationModifield, 63 'object:modified' : onIllustrationModifield,
18 'selection:cleared' : onObjectOut, 64 'selection:cleared' : onObjectOut,
19 }); 65 });
20 66
21 var currentObj; 67 var currentObj;
22 var listObj = []; 68 var listObj = [];
23 var stateObj = []; 69 var stateObj = [];
24 var indexCurr = 0; 70 var indexCurr = 0;
25 var indexCurr2 = 0; 71 var indexCurr2 = 0;
26 var actionObj = false; 72 var actionObj = false;
27 var refreshObj = true; 73 var refreshObj = true;
28 var spacingNum = 0; 74 var spacingNum = 0;
75
76 function mouseUp(e) {
77 currentObj = canvas.getActiveObject();
78 console.log(currentObj);
79 currentObj.activate();
80 }
81
29 82
30 function onIllustrationAdded(options){ 83 function onIllustrationAdded(options){
31 var object = options.target; 84 var object = options.target;
32 // console.log('object:added'); 85 // console.log('object:added');
33 86
34 if (actionObj === true) { 87 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 88 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 89 listObj = [listObj[indexCurr2]];
37 90
38 actionObj = false; 91 actionObj = false;
39 console.log(stateObj); 92 console.log(stateObj);
40 indexCurr = 1; 93 indexCurr = 1;
41 } 94 }
42 object.saveState(); 95 object.saveState();
43 96
44 console.log(object.originalState); 97 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 98 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 99 listObj[indexCurr] = object;
47 indexCurr++; 100 indexCurr++;
48 indexCurr2 = indexCurr - 1; 101 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 102 refreshObj = true;
50 } 103 }
51 104
52 function onIllustrationModifield(options){ 105 function onIllustrationModifield(options){
53 // 106 //
54 var pointer = canvas.getPointer(options.e); 107 var pointer = canvas.getPointer(options.e);
55 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 108 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
56 canvas.getActiveObject().remove(); 109 canvas.getActiveObject().remove();
57 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 110 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
58 return; 111 return;
59 } 112 }
60 113
61 // 114 //
62 var objOffset = canvas.getActiveObject().getBoundingRect(); 115 var objOffset = canvas.getActiveObject().getBoundingRect();
63 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 116 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
64 //console.log(objOffset,canvas.height,canvas.width); 117 //console.log(objOffset,canvas.height,canvas.width);
65 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 118 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
66 if (confirm('削除してもよろしいですか')){ 119 if (confirm('削除してもよろしいですか')){
67 canvas.getActiveObject().remove(); 120 canvas.getActiveObject().remove();
68 }else{ 121 }else{
69 undoCanvas(); 122 undoCanvas();
70 return; 123 return;
71 } 124 }
72 } 125 }
73 126
74 var object = options.target; 127 var object = options.target;
75 // console.log('object:modified'); 128 // console.log('object:modified');
76 if (actionObj === true) { 129 if (actionObj === true) {
77 stateObj = [stateObj[indexCurr2]]; 130 stateObj = [stateObj[indexCurr2]];
78 listObj = [listObj[indexCurr2]]; 131 listObj = [listObj[indexCurr2]];
79 132
80 actionObj = false; 133 actionObj = false;
81 console.log(stateObj); 134 console.log(stateObj);
82 indexCurr = 1; 135 indexCurr = 1;
83 } 136 }
84 137
85 object.saveState(); 138 object.saveState();
86 139
87 stateObj[indexCurr] = JSON.stringify(object.originalState); 140 stateObj[indexCurr] = JSON.stringify(object.originalState);
88 listObj[indexCurr] = object; 141 listObj[indexCurr] = object;
89 indexCurr++; 142 indexCurr++;
90 indexCurr2 = indexCurr - 1; 143 indexCurr2 = indexCurr - 1;
91 // console.log(stateObj); 144 // console.log(stateObj);
92 refreshObj = true; 145 refreshObj = true;
93 } 146 }
94 147
95 function onIllustrationChange(options) { 148 function onIllustrationChange(options) {
96 // options.target.setCoords(); 149 // options.target.setCoords();
97 // canvas.forEachObject(function(obj) { 150 // canvas.forEachObject(function(obj) {
98 // if (obj === options.target) return; 151 // if (obj === options.target) return;
99 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 152 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
100 // }); 153 // });
101 } 154 }
102 155
103 function onIllustrationMoving(options) { 156 function onIllustrationMoving(options) {
104 var pointer = canvas.getPointer(options.e); 157 var pointer = canvas.getPointer(options.e);
105 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 158 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
106 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 159 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
107 }else{ 160 }else{
108 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 161 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
109 } 162 }
110 } 163 }
111 164
112 function onObjectOut() { 165 function onObjectOut() {
113 delete currentObj; 166 delete currentObj;
114 $scope.designTextValue = ''; 167 $scope.designTextValue = '';
115 } 168 }
116 169
117 function undoCanvas() { 170 function undoCanvas() {
118 if (indexCurr <= 0) { 171 if (indexCurr <= 0) {
119 indexCurr = 0; 172 indexCurr = 0;
120 return; 173 return;
121 } 174 }
122 175
123 if (refreshObj === true) { 176 if (refreshObj === true) {
124 indexCurr--; 177 indexCurr--;
125 refreshObj = false; 178 refreshObj = false;
126 } 179 }
127 180
128 console.log('undo'); 181 console.log('undo');
129 182
130 indexCurr2 = indexCurr - 1; 183 indexCurr2 = indexCurr - 1;
131 currentObj = listObj[indexCurr2]; 184 currentObj = listObj[indexCurr2];
132 if (currentObj){ 185 if (currentObj){
133 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 186 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
134 } 187 }
135 188
136 indexCurr--; 189 indexCurr--;
137 currentObj.setCoords(); 190 currentObj.setCoords();
138 canvas.renderAll(); 191 canvas.renderAll();
139 actionObj = true; 192 actionObj = true;
140 } 193 }
141 194
142 function redoCanvas() { 195 function redoCanvas() {
143 actionObj = true; 196 actionObj = true;
144 if (indexCurr >= stateObj.length - 1) { 197 if (indexCurr >= stateObj.length - 1) {
145 return; 198 return;
146 } 199 }
147 200
148 console.log('redo'); 201 console.log('redo');
149 202
150 indexCurr2 = indexCurr + 1; 203 indexCurr2 = indexCurr + 1;
151 currentObj = listObj[indexCurr2]; 204 currentObj = listObj[indexCurr2];
152 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 205 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
153 206
154 indexCurr++; 207 indexCurr++;
155 currentObj.setCoords(); 208 currentObj.setCoords();
156 canvas.renderAll(); 209 canvas.renderAll();
157 } 210 }
158 211
159 $scope.canvasClearAll = function(){ 212 $scope.canvasClearAll = function(){
160 if (confirm('配置されたすべての文字や画像を消去します')){ 213 if (confirm('配置されたすべての文字や画像を消去します')){
161 canvas.clear(); 214 canvas.clear();
162 } 215 }
163 } 216 }
164 217
165 function onObjectSelected(options) { 218 function onObjectSelected(options) {
166 var currentObj = options.target; 219 var currentObj = options.target;
167 // console.log(currentObj.text); 220 //Set default
221 console.log('selected object');
222 // currentObj.hasControls = true;
223 // currentObj.hasBorders = true;
168 $scope.typeObject = currentObj.type; 224 $scope.typeObject = currentObj.type;
169 switch ($scope.typeObject) { 225 switch ($scope.typeObject) {
170 case 'i-text' : 226 case 'i-text' :
171 $rootScope.isShowLeftPanel = 'text'; 227 $rootScope.isShowLeftPanel = 'text';
172 var text = currentObj.text; 228 var text = currentObj.text;
173 if(text != '') { 229 if(text != '') {
174 $scope.designText = text; 230 $scope.designText = text;
175 $scope.designTextValue = text; 231 $scope.designTextValue = text;
176 } 232 }
177 break; 233 break;
178 234
179 case 'path-group' : 235 case 'path-group' :
180 $rootScope.isShowLeftPanel = 'illustration'; 236 $rootScope.isShowLeftPanel = 'illustration';
181 break; 237 break;
182 238
183 case 'image': 239 case 'image':
184 $rootScope.isShowLeftPanel = 'image'; 240 $rootScope.isShowLeftPanel = 'image';
185 break; 241 break;
186 242
187 default : 243 default :
188 $rootScope.isShowLeftPanel = 'default'; 244 $rootScope.isShowLeftPanel = 'default';
189 break; 245 break;
190 } 246 }
191 $rootScope.safeApply(); 247 $rootScope.safeApply();
192 } 248 }
193 249
194 // Illustration process 250 // Illustration process
195 $scope.changeIllustrationCategory = function(currentIllustration){ 251 $scope.changeIllustrationCategory = function(currentIllustration){
196 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 252 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
197 //console.log($scope.currentIllustrationCate); 253 //console.log($scope.currentIllustrationCate);
198 }; 254 };
199 255
200 $scope.insertSvg = function(item){ 256 $scope.insertSvg = function(item){
201 fabric.loadSVGFromURL(item.path, function(objects, options) { 257 fabric.loadSVGFromURL(item.path, function(objects, options) {
202 var shape = fabric.util.groupSVGElements(objects, options); 258 var shape = fabric.util.groupSVGElements(objects, options);
203 //shape.setFill('green'); 259 //shape.setFill('green');
204 canvas.add(shape.scale(0.6)); 260 canvas.add(shape.scale(0.6));
205 shape.set({ left: 150, top: 200 }).setCoords(); 261 shape.set({ left: 150, top: 200 }).setCoords();
206 canvas.renderAll(); 262 canvas.renderAll();
207 canvas.setActiveObject(shape); 263 canvas.setActiveObject(shape);
208 }); 264 });
209 }; 265 };
210 266
211 // color pattern 267 // color pattern
212 $scope.listColorPatterns = [ 268 $scope.listColorPatterns = [
213 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 269 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
214 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 270 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
215 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 271 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
216 '#333333' 272 '#333333'
217 ]; 273 ];
218 274
219 $scope.changeColorPattern = function(color){ 275 $scope.changeColorPattern = function(color){
220 var obj = canvas.getActiveObject(); 276 var obj = canvas.getActiveObject();
221 if (!color){ 277 if (!color){
222 color = 'none'; 278 color = 'none';
223 } 279 }
224 if (obj instanceof fabric.PathGroup) { 280 if (obj instanceof fabric.PathGroup) {
225 obj.getObjects().forEach(function(o) { 281 obj.getObjects().forEach(function(o) {
226 o.fill = color; 282 o.fill = color;
227 }); 283 });
228 } 284 }
229 else { 285 else {
230 obj.fill = color; 286 obj.fill = color;
231 } 287 }
232 canvas.renderAll(); 288 canvas.renderAll();
233 // if (canvas.getActiveObject()){ 289 // if (canvas.getActiveObject()){
234 // canvas.getActiveObject().set("fill", color); 290 // canvas.getActiveObject().set("fill", color);
235 // canvas.renderAll(); 291 // canvas.renderAll();
236 // } 292 // }
237 }; 293 };
238 294
239 //Font 295 //Font
240 $scope.listFontFamily = [ 296 $scope.listFontFamily = [
241 { 297 {
242 name : 'GN Aki iro Sesami Cookies', 298 name : 'GN Aki iro Sesami Cookies',
243 slug : 'gn_aki_iro_sesami_cookies', 299 slug : 'gn_aki_iro_sesami_cookies',
244 }, 300 },
245 { 301 {
246 name : 'GN-Fuyu-iro_Script_Bold', 302 name : 'GN-Fuyu-iro_Script_Bold',
247 slug : 'gn_fuyu_iro_script_bold' 303 slug : 'gn_fuyu_iro_script_bold'
248 }, 304 },
249 { 305 {
250 name : 'GN Killgothic U Kanana', 306 name : 'GN Killgothic U Kanana',
251 slug : 'gn_killgothic_u_kanana' 307 slug : 'gn_killgothic_u_kanana'
252 }, 308 },
253 { 309 {
254 name : 'GN-Kin-iro_Alphabet_Cookies', 310 name : 'GN-Kin-iro_Alphabet_Cookies',
255 slug : 'gn_kin_iro_alphabet_cookies' 311 slug : 'gn_kin_iro_alphabet_cookies'
256 312
257 }, 313 },
258 { 314 {
259 name : 'GN-Kin-iro_SansSerif', 315 name : 'GN-Kin-iro_SansSerif',
260 slug : 'gn_kin_iro_sansserif' 316 slug : 'gn_kin_iro_sansserif'
261 317
262 }, 318 },
263 { 319 {
264 name : 'GN-Koharuiro_Sunray', 320 name : 'GN-Koharuiro_Sunray',
265 slug : 'gn_koharuiro_sunray' 321 slug : 'gn_koharuiro_sunray'
266 322
267 }, 323 },
268 { 324 {
269 name : 'GN-Kyu-pin', 325 name : 'GN-Kyu-pin',
270 slug : 'gn_kyu_pin' 326 slug : 'gn_kyu_pin'
271 }, 327 },
272 { 328 {
273 name : 'gn_natsu_iro_schedule', 329 name : 'gn_natsu_iro_schedule',
274 slug : 'gn_natsu_iro_schedule' 330 slug : 'gn_natsu_iro_schedule'
275 331
276 }, 332 },
277 { 333 {
278 name : 'gnkana_kiniro_sansserif_l', 334 name : 'gnkana_kiniro_sansserif_l',
279 slug : 'gnkana_kiniro_sansserif_l' 335 slug : 'gnkana_kiniro_sansserif_l'
280 336
281 }, 337 },
282 { 338 {
283 name : 'gnkana_kiniro_sansserif_st', 339 name : 'gnkana_kiniro_sansserif_st',
284 slug : 'gnkana_kiniro_sansserif_st' 340 slug : 'gnkana_kiniro_sansserif_st'
285 }, 341 },
286 { 342 {
287 name : 'gnkana_kon_iro_nightfall', 343 name : 'gnkana_kon_iro_nightfall',
288 slug : 'gnkana_kon_iro_nightfall' 344 slug : 'gnkana_kon_iro_nightfall'
289 345
290 }, 346 },
291 { 347 {
292 name : 'ms_gothic', 348 name : 'ms_gothic',
293 slug : 'ms_gothic' 349 slug : 'ms_gothic'
294 350
295 }, 351 },
296 { 352 {
297 name : 'msmincho', 353 name : 'msmincho',
298 slug : 'msmincho' 354 slug : 'msmincho'
299 }, 355 },
300 { 356 {
301 name : 'ufonts_com_ms_pgothic', 357 name : 'ufonts_com_ms_pgothic',
302 slug : 'ufonts_com_ms_pgothic' 358 slug : 'ufonts_com_ms_pgothic'
303 } 359 }
304 ]; 360 ];
305 361
306 // layer process 362 // layer process
307 $scope.layerProcess = function(mode) { 363 $scope.layerProcess = function(mode) {
308 // console.log('layerProcess'); 364 // console.log('layerProcess');
309 var activeObject = canvas.getActiveObject(); 365 var activeObject = canvas.getActiveObject();
310 366
311 console.log(activeObject); 367 console.log(activeObject);
312 368
313 if (activeObject){ 369 if (activeObject){
314 switch (mode) { 370 switch (mode) {
315 case 1: 371 case 1:
316 // canvas.bringForward(activeObject); 372 // canvas.bringForward(activeObject);
317 activeObject.bringForward(); 373 activeObject.bringForward();
318 break; 374 break;
319 case 2: 375 case 2:
320 // canvas.sendBackwards(activeObject); 376 // canvas.sendBackwards(activeObject);
321 activeObject.sendBackwards(); 377 activeObject.sendBackwards();
322 break; 378 break;
323 case 3: 379 case 3:
324 // canvas.bringToFront(activeObject); 380 // canvas.bringToFront(activeObject);
325 activeObject.bringToFront(); 381 activeObject.bringToFront();
326 break; 382 break;
327 case 4: 383 case 4:
328 // canvas.sendToBack(activeObject); 384 // canvas.sendToBack(activeObject);
329 activeObject.sendToBack(); 385 activeObject.sendToBack();
330 break; 386 break;
331 } 387 }
332 canvas.deactivateAll().renderAll(); 388 canvas.deactivateAll().renderAll();
333 } 389 }
334 }; 390 };
335 391
336 $scope.focusInputText = function(text) { 392 $scope.focusInputText = function(text) {
337 currentObj = canvas.getActiveObject(); 393 currentObj = canvas.getActiveObject();
338 if(typeof currentObj == 'undefined' || currentObj == null) { 394 if(typeof currentObj == 'undefined' || currentObj == null) {
339 $scope.iText = new fabric.IText('', { 395 $scope.iText = new fabric.IText('', {
340 left: 150, 396 left: 150,
341 top: 200, 397 top: 200,
342 fontFamily: 'Arial', 398 fontFamily: 'Arial',
343 fontWeight: 'normal', 399 fontWeight: 'normal',
344 textAlign: 'center', 400 textAlign: 'center',
345 fontSize: 28, 401 fontSize: 28,
346 fill: 'black' 402 fill: 'black'
347 }); 403 });
348 } else { 404 } else {
349 if(currentObj.type != 'i-text') { 405 if(currentObj.type != 'i-text') {
350 $scope.iText = new fabric.IText('', { 406 $scope.iText = new fabric.IText('', {
351 left: 150, 407 left: 150,
352 top: 200, 408 top: 200,
353 fontFamily: 'Arial', 409 fontFamily: 'Arial',
354 fontWeight: 'normal', 410 fontWeight: 'normal',
355 textAlign: 'center', 411 textAlign: 'center',
356 fontSize: 28, 412 fontSize: 28,
357 fill: 'black' 413 fill: 'black'
358 }); 414 });
359 } else{ 415 } else{
360 $scope.iText = currentObj; 416 $scope.iText = currentObj;
361 } 417 }
362 } 418 }
363 }; 419 };
364 420
365 //Design text 421 //Design text
366 $scope.inputText = function(e) { 422 $scope.inputText = function(e) {
367 if(typeof $scope.iText != "undefined") { 423 if(typeof $scope.iText != "undefined") {
368 var iText = $scope.iText; 424 var iText = $scope.iText;
369 iText.text = e; 425 iText.text = e;
370 canvas.add(iText); 426 canvas.add(iText);
371 canvas.renderAll(); 427 canvas.renderAll();
372 canvas.setActiveObject(iText); 428 canvas.setActiveObject(iText);
373 } 429 }
374 }; 430 };
375 $scope.setFontFamily = function(font) { 431 $scope.setFontFamily = function(font) {
376 if(canvas.getActiveObject()) { 432 if(canvas.getActiveObject()) {
377 var currentObj = canvas.getActiveObject(); 433 var currentObj = canvas.getActiveObject();
378 if(currentObj.type == 'i-text') { 434 if(currentObj.type == 'i-text') {
379 currentObj.set('fontFamily', font); 435 currentObj.set('fontFamily', font);
380 canvas.renderAll(); 436 canvas.renderAll();
381 canvas.setActiveObject(currentObj); 437 canvas.setActiveObject(currentObj);
382 } 438 }
383 439
384 } 440 }
385 }; 441 };
386 //Set letter spacing text 442 //Set letter spacing text
387 $scope.setLetterSpacingText = function(e) { 443 $scope.setLetterSpacingText = function(e) {
388 if(canvas.getActiveObject()) { 444 if(canvas.getActiveObject()) {
389 var currentObj = canvas.getActiveObject(); 445 var currentObj = canvas.getActiveObject();
390 if(currentObj.type == 'i-text') { 446 if(currentObj.type == 'i-text') {
391 if(e == 'plus') 447 if(e == 'plus')
392 spacingNum = spacingNum + 30; 448 spacingNum = spacingNum + 30;
393 else if (spacingNum >= 30){ 449 else if (spacingNum >= 30){
394 spacingNum = spacingNum - 30; 450 spacingNum = spacingNum - 30;
395 } 451 }
396 currentObj.set('charSpacing', spacingNum); 452 currentObj.set('charSpacing', spacingNum);
397 canvas.renderAll(); 453 canvas.renderAll();
398 canvas.setActiveObject(currentObj); 454 canvas.setActiveObject(currentObj);
399 } 455 }
400 } 456 }
401 } 457 }
402 458
403 459
404 /**** process insert image */ 460 /**** process insert image */
405 $scope.chooseImage = function(e){console.log(e); 461 $scope.chooseImage = function(e){console.log(e);
406 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 462 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
407 alert('アップロードできませんでした'); 463 alert('アップロードできませんでした');
408 return; 464 return;
409 } 465 }
410 var reader = new FileReader(); 466 var reader = new FileReader();
411 reader.onload = function (event) { 467 reader.onload = function (event) {
412 var imgObj = new Image();//console.log(event.target); 468 var imgObj = new Image();//console.log(event.target);
413 imgObj.src = event.target.result; 469 imgObj.src = event.target.result;
414 imgObj.onload = function () { 470 imgObj.onload = function () {
415 // start fabricJS stuff 471 // start fabricJS stuff
416 472
417 var image = new fabric.Image(imgObj); 473 var image = new fabric.Image(imgObj);
418 image.set({ 474 image.set({
419 left: 50, 475 left: 50,
420 top: 50 476 top: 50
421 }); 477 });
422 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 478 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
423 image.scaleToWidth(200); 479 image.scaleToWidth(200);
424 canvas.add(image); 480 canvas.add(image);
425 } 481 }
426 } 482 }
427 reader.readAsDataURL(e.target.files[0]); 483 reader.readAsDataURL(e.target.files[0]);
428 } 484 }
429 485
430 //Traslation text 486 //Traslation text
431 $scope.rotateText = function(style) { 487 $scope.rotateText = function(style) {
432 if(canvas.getActiveObject()) { 488 if(canvas.getActiveObject()) {
433 var currentObj = canvas.getActiveObject(); 489 var currentObj = canvas.getActiveObject();
434 if(currentObj.type == 'i-text') { 490 if(currentObj.type == 'i-text') {
435 currentObj.set('rotate', Math.PI / 4); 491 currentObj.set('rotate', Math.PI / 4);
436 canvas.renderAll(); 492 canvas.renderAll();
437 canvas.setActiveObject(currentObj); 493 canvas.setActiveObject(currentObj);
438 } 494 }
439 } 495 }
440 }; 496 };
441 497
442 498
443 /* Process output */ 499 /* Process output */
444 $scope.outputDesign = function(){ 500 $scope.outputDesign = function(){
445 $rootScope.outputImage = canvas.toDataURL('png'); 501 $rootScope.outputImage = canvas.toDataURL('png');
446 // console.log(); 502 // console.log();
447 $('#tshirt-design').modal('hide'); 503 $('#tshirt-design').modal('hide');
448 } 504 }
449 }); 505 });
450 }); 506 });
451 507
app/views/tshirt-design.html
Diff comments   View file @ 1be40f0
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3 3
4 <div class="modal-dialog" role="document"> 4 <div class="modal-dialog" role="document">
5 <div class="modal-content"> 5 <div class="modal-content">
6 <div class="modal-header"> 6 <div class="modal-header">
7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> 7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> 8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9 </div> 9 </div>
10 <div class="modal-body"> 10 <div class="modal-body">
11 <header class="clearfix"> 11 <header class="clearfix">
12 <ul class="nav pull-left"> 12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> 13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字 14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li> 15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> 16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ 17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li> 18 </li>
19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> 19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li> 21 </li>
22 <li ng-click="canvasClearAll()"> 22 <li ng-click="canvasClearAll()">
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li> 24 </li>
25 </ul> 25 </ul>
26 <div class="action pull-right"> 26 <div class="action pull-right">
27 <button class="white"> 27 <button class="white">
28 アルバムを開く 28 アルバムを開く
29 </button> 29 </button>
30 <button class="white"> 30 <button class="white">
31 アルバムに入れる 31 アルバムに入れる
32 </button> 32 </button>
33 </div> 33 </div>
34 </header> 34 </header>
35 <section class="tshirt-design-container clearfix"> 35 <section class="tshirt-design-container clearfix">
36 <div class="aside col-xs-4"> 36 <div class="aside col-sm-4">
37 <!-- Default--> 37 <!-- Default-->
38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> 38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
39 </ul> 39 </ul>
40 <!-- Illustration design--> 40 <!-- Illustration design-->
41 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> 41 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
42 </ul> 42 </ul>
43 <!-- Custom image design--> 43 <!-- Custom image design-->
44 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> 44 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
45 </ul> 45 </ul>
46 <!-- Text design--> 46 <!-- Text design-->
47 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> 47 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
48 </ul> 48 </ul>
49 </div> 49 </div>
50 <div class="design-content col-xs-8"> 50 <div class="design-content col-sm-8">
51 <div class="content" ng-style="{'background-color' : tShirtColorCode}"> 51 <div class="content" ng-style="{'background-color' : tShirtColorCode}">
52 <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> 52 <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
53 53
54 </canvas> 54 </canvas>
55 </div> 55 </div>
56 <div class="agree-design" ng-click="outputDesign()"> 56 <div class="agree-design" ng-click="outputDesign()">
57 <img src="images/agree-design.png" alt="agree design" /> 57 <img src="images/agree-design.png" alt="agree design" />
58 </div> 58 </div>
59 <div class="trash-design"> 59 <div class="trash-design">
60 <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>--> 60 <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
61 <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>--> 61 <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
62 <img src="images/trash.png" alt="trash design" /> 62 <img src="images/trash.png" alt="trash design" />
63 </div> 63 </div>
64 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> 64 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" />
65 </div> 65 </div>
66 </section> 66 </section>
67 </div> 67 </div>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
1 { 1 {
2 "name": "tshats", 2 "name": "tshats",
3 "version": "0.0.0", 3 "version": "0.0.0",
4 "dependencies": { 4 "dependencies": {
5 "angular": "~1.5.9", 5 "angular": "~1.5.9",
6 "json3": "~3.2.6", 6 "json3": "~3.2.6",
7 "requirejs": "~2.1.10", 7 "requirejs": "~2.1.10",
8 "es5-shim": "~2.1.0", 8 "es5-shim": "~2.1.0",
9 "angular-resource": "1.2.11", 9 "angular-resource": "1.2.11",
10 "angular-cookies": "~1.5.9", 10 "angular-cookies": "~1.5.9",
11 "angular-sanitize": "1.2.11", 11 "angular-sanitize": "1.2.11",
12 "angular-route": "~1.5.9", 12 "angular-route": "~1.5.9",
13 "FortAwesome/Font-Awesome": "*", 13 "FortAwesome/Font-Awesome": "*",
14 "bootstrap": "~3.3.7", 14 "bootstrap": "~3.3.7",
15 "jquery": "~3.1.1", 15 "jquery": "~3.1.1",
16 "fabric.js": "fabric#^1.6.6", 16 "fabric.js": "fabric#^1.6.6",
17 "angular-ui-select2": "^0.0.5" 17 "angular-ui-select2": "^0.0.5",
18 "fabric-customise-controls": "^0.1.8"
18 }, 19 },
19 "devDependencies": { 20 "devDependencies": {
20 "angular-mocks": "1.2.11", 21 "angular-mocks": "1.2.11",
21 "angular-scenario": "1.2.11" 22 "angular-scenario": "1.2.11"
22 }, 23 },
23 "resolutions": { 24 "resolutions": {
24 "angular": "~1.5.9" 25 "angular": "~1.5.9"
25 } 26 }
26 } 27 }
27 28