merge conflict

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

merge conflict
Merge branch 'master' of timesfun.net:TRUONG/t-shats
TRUONG
2 parents e5669639a3 8eafc64c46
Showing 6 changed files Side-by-side Diff
app/index.html
app/scripts/controllers/tshirtdesign.js
app/views/design_part/text.html
dist/index.html
dist/scripts/controllers/tshirtdesign.js
dist/views/design_part/text.html
@@ -46,7 +46,7 @@
     <script src="bower_components/json3/lib/json3.min.js"></script>
     <![endif]-->
     <script type="text/javascript">
-        var VERSION = '17-11_02';
+        var VERSION = '17-11_03';
         var require = {
           urlArgs: "ver="+VERSION,
         };
@@ -6,17 +6,16 @@
 		fabric.Object.prototype.transparentCorners = false;
  
 		canvas.on('after:render', function() {
+			console.log('after render');
 		});
 		canvas.on({
-			'object:added': onIllustrationAdded,
-			'object:moving': onIllustrationChange,
-			'object:scaling': onIllustrationChange,
-			'object:rotating': onIllustrationChange,
-			'object:selected': onIllustrationSelected,
-			'object:modified': onIllustrationModifield,
-			'selected:deselected' : onIllustrationOut,
-			//'selected:out'     : onIllustrationOut,
-			//'mouse:up' : onIllustrationOut,
+			'object:added'      : onIllustrationAdded,
+			'object:moving'     : onIllustrationChange,
+			'object:scaling'    : onIllustrationChange,
+			'object:rotating'   : onIllustrationChange,
+			'object:selected'   : onObjectSelected,
+			'object:modified'   : onIllustrationModifield,
+			'selection:cleared' : onObjectOut,
 		});
  
 		var currentObj;
@@ -26,6 +25,7 @@
 		var indexCurr2 = 0;
 		var actionObj = false;
 		var refreshObj = true;
+		var spacingNum = 0;
  
 		function onIllustrationAdded(options){
 			var object = options.target;
@@ -92,8 +92,9 @@
  
 		}
  
-		function onIllustrationOut() {
-			console.log('out object');
+		function onObjectOut() {
+			delete currentObj;
+			$scope.designTextValue = '';
 		}
  
 		function undoCanvas() {
  
@@ -137,17 +138,19 @@
 		    currentObj.setCoords();
 		    canvas.renderAll();
 		}
-		
-		$scope.currentObject = null;
-		function onIllustrationSelected(options) {
-			var object = options.target;
-			$scope.typeObject = object.type;
+
+		function onObjectSelected(options) {
+			var currentObj = options.target;
+			console.log(currentObj.text);
+			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
 					$rootScope.isShowLeftPanel = 'text';
-					$('#input-design-text').focus(function() {
-
-					});
+					var text = currentObj.text;
+					if(text != '') {
+						$scope.designText = text;
+						$scope.designTextValue = text;
+					}
 					break;
  
 				case 'path-group' :
  
  
  
  
  
  
  
  
  
  
@@ -264,47 +267,69 @@
 		};
  
 		// layer process
-		$scope.layerProcess = function(mode){
-			var activeObject = canvas.getActiveObject()
+		$scope.layerProcess = function(mode) {
+			// console.log('layerProcess');
+			var activeObject = canvas.getActiveObject();
+
+			console.log(activeObject);
+
 			if (activeObject){
 				switch (mode) {
 					case 1:
+						// canvas.bringForward(activeObject);
 						activeObject.bringForward();
 						break;
 					case 2:
+						// canvas.sendBackwards(activeObject);
 						activeObject.sendBackwards();
 						break;
 					case 3:
+						// canvas.bringToFront(activeObject);
 						activeObject.bringToFront();
 						break;
 					case 4:
+						// canvas.sendToBack(activeObject);
 						activeObject.sendToBack();
 						break;
 				}
     	        canvas.renderAll();
 			}
 		};
-		
  
-
-		$scope.focusInputText = function() {
-			if($scope.typeObject != 'i-text')
+		$scope.focusInputText = function(text) {
+			currentObj = canvas.getActiveObject();
+			if(typeof currentObj == 'undefined' || currentObj == null) {
 				$scope.iText = new fabric.IText('', {
 					left: 150,
 					top: 200,
 					fontFamily: 'Arial',
 					fontWeight: 'normal',
+					textAlign:  'center',
 					fontSize: 28,
 					fill: 'black'
 				});
+			} else {
+				if(currentObj.type != 'i-text') {
+					$scope.iText = new fabric.IText('', {
+						left: 150,
+						top: 200,
+						fontFamily: 'Arial',
+						fontWeight: 'normal',
+						textAlign:  'center',
+						fontSize: 28,
+						fill: 'black'
+					});
+				} else{
+					$scope.iText = currentObj;
+				}
+			}
 		};
  
 		//Design text
 		$scope.inputText = function(e) {
-			var iText = $scope.iText;
-			if(e != '') {
+			if(typeof $scope.iText != "undefined") {
+				var iText = $scope.iText;
 				iText.text = e;
-				iText.set().setCoords();
 				canvas.add(iText);
 				canvas.renderAll();
 				canvas.setActiveObject(iText);
  
  
  
  
  
  
  
@@ -312,31 +337,29 @@
 		};
 		$scope.setFontFamily = function(font) {
 			if(canvas.getActiveObject()) {
-				var currentObject = canvas.getActiveObject();
-				if(currentObject.type == 'i-text') {
-					currentObject.set('fontFamily', font);
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
+					currentObj.set('fontFamily', font);
 					canvas.renderAll();
-					canvas.setActiveObject(currentObject);
+					canvas.setActiveObject(currentObj);
 				}
  
 			}
 		};
 		//Set letter spacing text
-		var spacingNum = 0;
 		$scope.setLetterSpacingText = function(e) {
 			if(canvas.getActiveObject()) {
-				var currentObject = canvas.getActiveObject();
-				if(currentObject.type == 'i-text') {
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
 					if(e == 'plus')
 						spacingNum = spacingNum + 30;
-					else if (spacingNum>=30){
+					else if (spacingNum >= 30){
 						spacingNum = spacingNum - 30;
 					}
-					currentObject.set('charSpacing', spacingNum);
+					currentObj.set('charSpacing', spacingNum);
 					canvas.renderAll();
-					canvas.setActiveObject(currentObject);
+					canvas.setActiveObject(currentObj);
 				}
-
 			}
 		}
  
@@ -362,6 +385,18 @@
 		    }
     		reader.readAsDataURL(e.target.files[0]);
 		}
+	
+		//Traslation text
+		$scope.rotateText =  function(style) {
+			if(canvas.getActiveObject()) {
+				var currentObj = canvas.getActiveObject();
+				if(currentObj.type == 'i-text') {
+					currentObj.set('rotate', Math.PI / 4);
+					canvas.renderAll();
+					canvas.setActiveObject(currentObj);
+				}
+			}
+		};
 	});
 });
@@ -5,7 +5,7 @@
     </div>
     <div class="content clearfix">
         <div>
-            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
+            <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">
         </div>
         <div>
             <ul class="font-family-box">
@@ -13,7 +13,7 @@
             </ul>
         </div>
         <div>
-            <div>文字を変形する</div>
+            <div ng-click="rotateText('1')">文字を変形する</div>
         </div>
         <div class="clearfix spacing-letter ">
             <div class="pull-left text-label">
@@ -9,7 +9,7 @@
        ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
     <script src="bower_components/es5-shim/es5-shim.js"></script>
     <script src="bower_components/json3/lib/json3.min.js"></script>
-    <![endif]--><script type="text/javascript">var VERSION = '17-11_01';
+    <![endif]--><script type="text/javascript">var VERSION = '17-11_03';
         var require = {
           urlArgs: "ver="+VERSION,
         };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
-define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text",$("#input-design-text").focus(function(){});break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(currentObject.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObject))}};var spacingNum=0;$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObject.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})});
+define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=text&&($scope.designText=text,$scope.designTextValue=text);break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj||null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})});
@@ -5,7 +5,7 @@
     </div>
     <div class="content clearfix">
         <div>
-            <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
+            <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">
         </div>
         <div>
             <ul class="font-family-box">
@@ -13,7 +13,7 @@
             </ul>
         </div>
         <div>
-            <div>文字を変形する</div>
+            <div ng-click="rotateText('1')">文字を変形する</div>
         </div>
         <div class="clearfix spacing-letter ">
             <div class="pull-left text-label">
...	...	@@ -46,7 +46,7 @@
46	46	<script src="bower_components/json3/lib/json3.min.js"></script>
47	47	<![endif]-->
48	48	<script type="text/javascript">
49		- var VERSION = '17-11_02';
	49	+ var VERSION = '17-11_03';
50	50	var require = {
51	51	urlArgs: "ver="+VERSION,
52	52	};
...	...	@@ -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
...	...	@@ -264,47 +267,69 @@
264	267	};
265	268
266	269	// layer process
267		- $scope.layerProcess = function(mode){
268		- var activeObject = canvas.getActiveObject()
	270	+ $scope.layerProcess = function(mode) {
	271	+ // console.log('layerProcess');
	272	+ var activeObject = canvas.getActiveObject();
	273	+
	274	+ console.log(activeObject);
	275	+
269	276	if (activeObject){
270	277	switch (mode) {
271	278	case 1:
	279	+ // canvas.bringForward(activeObject);
272	280	activeObject.bringForward();
273	281	break;
274	282	case 2:
	283	+ // canvas.sendBackwards(activeObject);
275	284	activeObject.sendBackwards();
276	285	break;
277	286	case 3:
	287	+ // canvas.bringToFront(activeObject);
278	288	activeObject.bringToFront();
279	289	break;
280	290	case 4:
	291	+ // canvas.sendToBack(activeObject);
281	292	activeObject.sendToBack();
282	293	break;
283	294	}
284	295	canvas.renderAll();
285	296	}
286	297	};
287		-
288	298
289		-
290		- $scope.focusInputText = function() {
291		- if($scope.typeObject != 'i-text')
	299	+ $scope.focusInputText = function(text) {
	300	+ currentObj = canvas.getActiveObject();
	301	+ if(typeof currentObj == 'undefined' \|\| currentObj == null) {
292	302	$scope.iText = new fabric.IText('', {
293	303	left: 150,
294	304	top: 200,
295	305	fontFamily: 'Arial',
296	306	fontWeight: 'normal',
	307	+ textAlign: 'center',
297	308	fontSize: 28,
298	309	fill: 'black'
299	310	});
	311	+ } else {
	312	+ if(currentObj.type != 'i-text') {
	313	+ $scope.iText = new fabric.IText('', {
	314	+ left: 150,
	315	+ top: 200,
	316	+ fontFamily: 'Arial',
	317	+ fontWeight: 'normal',
	318	+ textAlign: 'center',
	319	+ fontSize: 28,
	320	+ fill: 'black'
	321	+ });
	322	+ } else{
	323	+ $scope.iText = currentObj;
	324	+ }
	325	+ }
300	326	};
301	327
302	328	//Design text
303	329	$scope.inputText = function(e) {
304		- var iText = $scope.iText;
305		- if(e != '') {
	330	+ if(typeof $scope.iText != "undefined") {
	331	+ var iText = $scope.iText;
306	332	iText.text = e;
307		- iText.set().setCoords();
308	333	canvas.add(iText);
309	334	canvas.renderAll();
310	335	canvas.setActiveObject(iText);
311	336
312	337
313	338
314	339
315	340
316	341
317	342
...	...	@@ -312,31 +337,29 @@
312	337	};
313	338	$scope.setFontFamily = function(font) {
314	339	if(canvas.getActiveObject()) {
315		- var currentObject = canvas.getActiveObject();
316		- if(currentObject.type == 'i-text') {
317		- currentObject.set('fontFamily', font);
	340	+ var currentObj = canvas.getActiveObject();
	341	+ if(currentObj.type == 'i-text') {
	342	+ currentObj.set('fontFamily', font);
318	343	canvas.renderAll();
319		- canvas.setActiveObject(currentObject);
	344	+ canvas.setActiveObject(currentObj);
320	345	}
321	346
322	347	}
323	348	};
324	349	//Set letter spacing text
325		- var spacingNum = 0;
326	350	$scope.setLetterSpacingText = function(e) {
327	351	if(canvas.getActiveObject()) {
328		- var currentObject = canvas.getActiveObject();
329		- if(currentObject.type == 'i-text') {
	352	+ var currentObj = canvas.getActiveObject();
	353	+ if(currentObj.type == 'i-text') {
330	354	if(e == 'plus')
331	355	spacingNum = spacingNum + 30;
332		- else if (spacingNum>=30){
	356	+ else if (spacingNum >= 30){
333	357	spacingNum = spacingNum - 30;
334	358	}
335		- currentObject.set('charSpacing', spacingNum);
	359	+ currentObj.set('charSpacing', spacingNum);
336	360	canvas.renderAll();
337		- canvas.setActiveObject(currentObject);
	361	+ canvas.setActiveObject(currentObj);
338	362	}
339		-
340	363	}
341	364	}
342	365
...	...	@@ -362,6 +385,18 @@
362	385	}
363	386	reader.readAsDataURL(e.target.files[0]);
364	387	}
	388	+
	389	+ //Traslation text
	390	+ $scope.rotateText = function(style) {
	391	+ if(canvas.getActiveObject()) {
	392	+ var currentObj = canvas.getActiveObject();
	393	+ if(currentObj.type == 'i-text') {
	394	+ currentObj.set('rotate', Math.PI / 4);
	395	+ canvas.renderAll();
	396	+ canvas.setActiveObject(currentObj);
	397	+ }
	398	+ }
	399	+ };
365	400	});
366	401	});
...	...	@@ -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">
...	...	@@ -9,7 +9,7 @@
9	9	ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
10	10	<script src="bower_components/es5-shim/es5-shim.js"></script>
11	11	<script src="bower_components/json3/lib/json3.min.js"></script>
12		- <![endif]--><script type="text/javascript">var VERSION = '17-11_01';
	12	+ <![endif]--><script type="text/javascript">var VERSION = '17-11_03';
13	13	var require = {
14	14	urlArgs: "ver="+VERSION,
15	15	};</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
1		-define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width\|\|objOffset.left>cW-W0\|\|objOffset.top<H0-objOffset.height\|\|objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text",$("#input-design-text").focus(function(){});break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(currentObject.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObject))}};var spacingNum=0;$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObject.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})});
	1	+define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width\|\|objOffset.left>cW-W0\|\|objOffset.top<H0-objOffset.height\|\|objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=text&&($scope.designText=text,$scope.designTextValue=text);break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj\|\|null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})});