TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit ee675eec19f7c063adfe9d6dccae734b6b95a863

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

Update font

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

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