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

Download as
Browse Code »

Commit 2f4c317491d77c8ee85a615ec780b3609f8565fa

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

Fix text design and reposive

Showing 8 changed files with 189 additions and 103 deletions Inline Diff

app/bower_components/fabric-customise-controls/.bower.json
Diff comments   View file @ 2f4c317
1 { 1 {
2 "name": "fabric-customise-controls", 2 "name": "fabric-customise-controls",
3 "version": "0.1.8", 3 "version": "0.1.8",
4 "main": "dist/customiseControls.js", 4 "main": "dist/customiseControls.js",
5 "ignore": [ 5 "ignore": [
6 "source", 6 "source",
7 "spec", 7 "spec",
8 ".bowerrc", 8 ".bowerrc",
9 ".gitignore", 9 ".gitignore",
10 ".jscsrc", 10 ".jscsrc",
11 "bower.json", 11 "bower.json",
12 "gruntfile.js", 12 "gruntfile.js",
13 "package.json", 13 "package.json",
14 "README.md" 14 "README.md"
15 ], 15 ],
16 "authors": [ 16 "authors": [
17 "Simon Kunz" 17 "Simon Kunz"
18 ], 18 ],
19 "license": "MIT", 19 "license": "MIT",
20 "dependencies": { 20 "dependencies": {
21 "fabric": "~1.6.6" 21 "fabric": "~1.6.6"
22 }, 22 },
23 "homepage": "https://github.com/pixolith/fabricjs-customise-controls-extension", 23 "homepage": "https://github.com/pixolith/fabricjs-customise-controls-extension",
24 "_release": "0.1.8", 24 "_release": "0.1.8",
25 "_resolution": { 25 "_resolution": {
26 "type": "version", 26 "type": "version",
27 "tag": "0.1.8", 27 "tag": "0.1.8",
28 "commit": "5586eb55027446026f22e086dc4bca8f5fa35f7f" 28 "commit": "5586eb55027446026f22e086dc4bca8f5fa35f7f"
29 }, 29 },
30 "_source": "https://github.com/pixolith/fabricjs-customise-controls-extension.git", 30 "_source": "https://github.com/pixolith/fabricjs-customise-controls-extension.git",
31 "_target": "^0.1.8", 31 "_target": "^0.1.8",
32 "_originalSource": "fabric-customise-controls" 32 "_originalSource": "fabric-customise-controls",
33 "_direct": true
33 } 34 }
app/images/control-icon/trash.png
Diff comments   View file @ 2f4c317

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