ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code »

Commit e872619e5e6236bd496e73b9c64ee95b7b8cde20

Authored by Dang YoungWorld
1 parent 83f7186e9d
Exists in master and in 1 other branch develop

delete comment

Showing 6 changed files with 14 additions and 44 deletions Inline Diff

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