TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit 92271fd7c0bd66301033c89ad87be49bb2d19697

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

add event

Showing 2 changed files with 76 additions and 42 deletions Side-by-side Diff

app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 92271fd
... ... @@ -6,17 +6,16 @@
6 6 fabric.Object.prototype.transparentCorners = false;
7 7  
8 8 canvas.on('after:render', function() {
  9 + console.log('after render');
9 10 });
10 11 canvas.on({
11   - 'object:added': onIllustrationAdded,
12   - 'object:moving': onIllustrationChange,
13   - 'object:scaling': onIllustrationChange,
14   - 'object:rotating': onIllustrationChange,
15   - 'object:selected': onIllustrationSelected,
16   - 'object:modified': onIllustrationModifield,
17   - 'selected:deselected' : onIllustrationOut,
18   - //'selected:out' : onIllustrationOut,
19   - //'mouse:up' : onIllustrationOut,
  12 + 'object:added' : onIllustrationAdded,
  13 + 'object:moving' : onIllustrationChange,
  14 + 'object:scaling' : onIllustrationChange,
  15 + 'object:rotating' : onIllustrationChange,
  16 + 'object:selected' : onObjectSelected,
  17 + 'object:modified' : onIllustrationModifield,
  18 + 'selection:cleared' : onObjectOut,
20 19 });
21 20  
22 21 var currentObj;
... ... @@ -26,6 +25,7 @@
26 25 var indexCurr2 = 0;
27 26 var actionObj = false;
28 27 var refreshObj = true;
  28 + var spacingNum = 0;
29 29  
30 30 function onIllustrationAdded(options){
31 31 var object = options.target;
... ... @@ -92,8 +92,9 @@
92 92  
93 93 }
94 94  
95   - function onIllustrationOut() {
96   - console.log('out object');
  95 + function onObjectOut() {
  96 + delete currentObj;
  97 + $scope.designTextValue = '';
97 98 }
98 99  
99 100 function undoCanvas() {
100 101  
... ... @@ -137,17 +138,19 @@
137 138 currentObj.setCoords();
138 139 canvas.renderAll();
139 140 }
140   -
141   - $scope.currentObject = null;
142   - function onIllustrationSelected(options) {
143   - var object = options.target;
144   - $scope.typeObject = object.type;
  141 +
  142 + function onObjectSelected(options) {
  143 + var currentObj = options.target;
  144 + console.log(currentObj.text);
  145 + $scope.typeObject = currentObj.type;
145 146 switch ($scope.typeObject) {
146 147 case 'i-text' :
147 148 $rootScope.isShowLeftPanel = 'text';
148   - $('#input-design-text').focus(function() {
149   -
150   - });
  149 + var text = currentObj.text;
  150 + if(text != '') {
  151 + $scope.designText = text;
  152 + $scope.designTextValue = text;
  153 + }
151 154 break;
152 155  
153 156 case 'path-group' :
154 157  
155 158  
156 159  
157 160  
158 161  
159 162  
160 163  
161 164  
162 165  
163 166  
... ... @@ -260,47 +263,69 @@
260 263 };
261 264  
262 265 // layer process
263   - $scope.layerProcess = function(mode){
264   - var activeObject = canvas.getActiveObject()
  266 + $scope.layerProcess = function(mode) {
  267 + // console.log('layerProcess');
  268 + var activeObject = canvas.getActiveObject();
  269 +
  270 + console.log(activeObject);
  271 +
265 272 if (activeObject){
266 273 switch (mode) {
267 274 case 1:
  275 + // canvas.bringForward(activeObject);
268 276 activeObject.bringForward();
269 277 break;
270 278 case 2:
  279 + // canvas.sendBackwards(activeObject);
271 280 activeObject.sendBackwards();
272 281 break;
273 282 case 3:
  283 + // canvas.bringToFront(activeObject);
274 284 activeObject.bringToFront();
275 285 break;
276 286 case 4:
  287 + // canvas.sendToBack(activeObject);
277 288 activeObject.sendToBack();
278 289 break;
279 290 }
280 291 canvas.renderAll();
281 292 }
282 293 };
283   -
284 294  
285   -
286   - $scope.focusInputText = function() {
287   - if($scope.typeObject != 'i-text')
  295 + $scope.focusInputText = function(text) {
  296 + currentObj = canvas.getActiveObject();
  297 + if(typeof currentObj == 'undefined' || currentObj == null) {
288 298 $scope.iText = new fabric.IText('', {
289 299 left: 150,
290 300 top: 200,
291 301 fontFamily: 'Arial',
292 302 fontWeight: 'normal',
  303 + textAlign: 'center',
293 304 fontSize: 28,
294 305 fill: 'black'
295 306 });
  307 + } else {
  308 + if(currentObj.type != 'i-text') {
  309 + $scope.iText = new fabric.IText('', {
  310 + left: 150,
  311 + top: 200,
  312 + fontFamily: 'Arial',
  313 + fontWeight: 'normal',
  314 + textAlign: 'center',
  315 + fontSize: 28,
  316 + fill: 'black'
  317 + });
  318 + } else{
  319 + $scope.iText = currentObj;
  320 + }
  321 + }
296 322 };
297 323  
298 324 //Design text
299 325 $scope.inputText = function(e) {
300   - var iText = $scope.iText;
301   - if(e != '') {
  326 + if(typeof $scope.iText != "undefined") {
  327 + var iText = $scope.iText;
302 328 iText.text = e;
303   - iText.set().setCoords();
304 329 canvas.add(iText);
305 330 canvas.renderAll();
306 331 canvas.setActiveObject(iText);
307 332  
308 333  
309 334  
310 335  
311 336  
312 337  
313 338  
314 339  
... ... @@ -308,33 +333,42 @@
308 333 };
309 334 $scope.setFontFamily = function(font) {
310 335 if(canvas.getActiveObject()) {
311   - var currentObject = canvas.getActiveObject();
312   - if(currentObject.type == 'i-text') {
313   - currentObject.set('fontFamily', font);
  336 + var currentObj = canvas.getActiveObject();
  337 + if(currentObj.type == 'i-text') {
  338 + currentObj.set('fontFamily', font);
314 339 canvas.renderAll();
315   - canvas.setActiveObject(currentObject);
  340 + canvas.setActiveObject(currentObj);
316 341 }
317 342  
318 343 }
319 344 };
320 345 //Set letter spacing text
321   - var spacingNum = 0;
322 346 $scope.setLetterSpacingText = function(e) {
323 347 if(canvas.getActiveObject()) {
324   - var currentObject = canvas.getActiveObject();
325   - if(currentObject.type == 'i-text') {
  348 + var currentObj = canvas.getActiveObject();
  349 + if(currentObj.type == 'i-text') {
326 350 if(e == 'plus')
327 351 spacingNum = spacingNum + 30;
328   - else if (spacingNum>=30){
  352 + else if (spacingNum >= 30){
329 353 spacingNum = spacingNum - 30;
330 354 }
331   - currentObject.set('charSpacing', spacingNum);
  355 + currentObj.set('charSpacing', spacingNum);
332 356 canvas.renderAll();
333   - canvas.setActiveObject(currentObject);
  357 + canvas.setActiveObject(currentObj);
334 358 }
335   -
336 359 }
337   - }
  360 + };
  361 + //Traslation text
  362 + $scope.rotateText = function(style) {
  363 + if(canvas.getActiveObject()) {
  364 + var currentObj = canvas.getActiveObject();
  365 + if(currentObj.type == 'i-text') {
  366 + currentObj.set('rotate', Math.PI / 4);
  367 + canvas.renderAll();
  368 + canvas.setActiveObject(currentObj);
  369 + }
  370 + }
  371 + };
338 372 });
339 373 });
app/views/design_part/text.html
Diff comments   View file @ 92271fd
... ... @@ -5,7 +5,7 @@
5 5 </div>
6 6 <div class="content clearfix">
7 7 <div>
8   - <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
  8 + <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9 9 </div>
10 10 <div>
11 11 <ul class="font-family-box">
... ... @@ -13,7 +13,7 @@
13 13 </ul>
14 14 </div>
15 15 <div>
16   - <div>文字を変形する</div>
  16 + <div ng-click="rotateText('1')">文字を変形する</div>
17 17 </div>
18 18 <div class="clearfix spacing-letter ">
19 19 <div class="pull-left text-label">