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 3ab3e50f83 3806b5973e
Showing 10 changed files Side-by-side Diff
.DS_Store
app/.DS_Store
app/images/.DS_Store
app/images/control-icon/ok.png
app/images/control-icon/resize.png
app/images/control-icon/rotate.png
app/index.html
app/scripts/controllers/tshirtdesign.js
app/views/tshirt-design.html
bower.json
@@ -41,6 +41,7 @@
     <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>
+    <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.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>
@@ -4,11 +4,57 @@
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
 		var canvas = new fabric.Canvas('main-design-container');
 		fabric.Object.prototype.transparentCorners = false;
+		fabric.Object.prototype.hasRotatingPoint = false;
+		var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
+		for(key in ctrVisible) {
+			fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
+		}
+		fabric.Object.prototype.customiseCornerIcons({
+			settings: {
+				borderColor: '#0000ff',
+				cornerSize: 25,
+				cornerShape: 'circle',
+				cornerBackgroundColor: '#0171b4',
+				cornerPadding: 6
+			},
+			mt: {
+				icon: 'images/control-icon/ok.png'
+			},
+			br: {
+				icon: 'images/control-icon/resize.png'
+			},
+			tr: {
+				icon: 'images/control-icon/rotate.png'
+			}
+		});
  
+		fabric.Canvas.prototype.customiseControls({
+			mt: {
+				cursor: 'pointer',
+				action: function (e, target) {
+					target.hasControls = false;
+					target.hasBorders = false;
+					canvas.deactivateAll().renderAll();
+					setTimeout(function() {
+						target.hasControls = true;
+						target.hasBorders = true;
+					}, 1);
+				}
+			},
+			br: {
+
+			},
+			tr: {
+				action: 'rotate',
+				cursor: 'crosshair'
+			}
+		});
+
 		canvas.on('after:render', function() {
 			// console.log('after render');
 		});
 		canvas.on({
+			'mouse:up'          : mouseUp,
 			'object:added'      : onIllustrationAdded,
 			'object:moving'     : onIllustrationMoving,
 			'object:scaling'    : onIllustrationChange,
@@ -26,6 +72,13 @@
 		var actionObj = false;
 		var refreshObj = true;
 		var spacingNum = 0;
+
+		function mouseUp(e) {
+			currentObj = canvas.getActiveObject();
+			console.log(currentObj);
+			currentObj.activate();
+		}
+
  
 		function onIllustrationAdded(options){
 			var object = options.target;
@@ -164,7 +217,10 @@
  
 		function onObjectSelected(options) {
 			var currentObj = options.target;
-			// console.log(currentObj.text);
+			//Set default
+			console.log('selected object');
+			// currentObj.hasControls = true;
+			// currentObj.hasBorders = true;
 			$scope.typeObject = currentObj.type;
 			switch ($scope.typeObject) {
 				case 'i-text' :
@@ -33,7 +33,7 @@
                     </div>
                 </header>
                 <section class="tshirt-design-container clearfix">
-                    <div class="aside col-xs-4">
+                    <div class="aside col-sm-4">
                         <!-- Default-->
                         <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
                         </ul>
@@ -47,7 +47,7 @@
                         <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
                         </ul>
                     </div>
-                    <div class="design-content col-xs-8">
+                    <div class="design-content col-sm-8">
                         <div class="content" ng-style="{'background-color' : tShirtColorCode}">
                             <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
  
@@ -14,7 +14,8 @@
     "bootstrap": "~3.3.7",
     "jquery": "~3.1.1",
     "fabric.js": "fabric#^1.6.6",
-    "angular-ui-select2": "^0.0.5"
+    "angular-ui-select2": "^0.0.5",
+    "fabric-customise-controls": "^0.1.8"
   },
   "devDependencies": {
     "angular-mocks": "1.2.11",
...	...	@@ -41,6 +41,7 @@
41	41	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42	42	<script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43	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	45	<!--[if lt IE 9]>
45	46	<script src="bower_components/es5-shim/es5-shim.js"></script>
46	47	<script src="bower_components/json3/lib/json3.min.js"></script>
...	...	@@ -4,11 +4,57 @@
4	4	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5	5	var canvas = new fabric.Canvas('main-design-container');
6	6	fabric.Object.prototype.transparentCorners = false;
	7	+ 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};
	9	+ for(key in ctrVisible) {
	10	+ fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
	11	+ }
	12	+ fabric.Object.prototype.customiseCornerIcons({
	13	+ settings: {
	14	+ borderColor: '#0000ff',
	15	+ cornerSize: 25,
	16	+ cornerShape: 'circle',
	17	+ cornerBackgroundColor: '#0171b4',
	18	+ cornerPadding: 6
	19	+ },
	20	+ mt: {
	21	+ icon: 'images/control-icon/ok.png'
	22	+ },
	23	+ br: {
	24	+ icon: 'images/control-icon/resize.png'
	25	+ },
	26	+ tr: {
	27	+ icon: 'images/control-icon/rotate.png'
	28	+ }
	29	+ });
7	30
	31	+ fabric.Canvas.prototype.customiseControls({
	32	+ mt: {
	33	+ cursor: 'pointer',
	34	+ action: function (e, target) {
	35	+ target.hasControls = false;
	36	+ target.hasBorders = false;
	37	+ canvas.deactivateAll().renderAll();
	38	+ setTimeout(function() {
	39	+ target.hasControls = true;
	40	+ target.hasBorders = true;
	41	+ }, 1);
	42	+ }
	43	+ },
	44	+ br: {
	45	+
	46	+ },
	47	+ tr: {
	48	+ action: 'rotate',
	49	+ cursor: 'crosshair'
	50	+ }
	51	+ });
	52	+
8	53	canvas.on('after:render', function() {
9	54	// console.log('after render');
10	55	});
11	56	canvas.on({
	57	+ 'mouse:up' : mouseUp,
12	58	'object:added' : onIllustrationAdded,
13	59	'object:moving' : onIllustrationMoving,
14	60	'object:scaling' : onIllustrationChange,
...	...	@@ -26,6 +72,13 @@
26	72	var actionObj = false;
27	73	var refreshObj = true;
28	74	var spacingNum = 0;
	75	+
	76	+ function mouseUp(e) {
	77	+ currentObj = canvas.getActiveObject();
	78	+ console.log(currentObj);
	79	+ currentObj.activate();
	80	+ }
	81	+
29	82
30	83	function onIllustrationAdded(options){
31	84	var object = options.target;
...	...	@@ -164,7 +217,10 @@
164	217
165	218	function onObjectSelected(options) {
166	219	var currentObj = options.target;
167		- // console.log(currentObj.text);
	220	+ //Set default
	221	+ console.log('selected object');
	222	+ // currentObj.hasControls = true;
	223	+ // currentObj.hasBorders = true;
168	224	$scope.typeObject = currentObj.type;
169	225	switch ($scope.typeObject) {
170	226	case 'i-text' :
...	...	@@ -33,7 +33,7 @@
33	33	</div>
34	34	</header>
35	35	<section class="tshirt-design-container clearfix">
36		- <div class="aside col-xs-4">
	36	+ <div class="aside col-sm-4">
37	37	<!-- Default-->
38	38	<ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
39	39	</ul>
...	...	@@ -47,7 +47,7 @@
47	47	<ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
48	48	</ul>
49	49	</div>
50		- <div class="design-content col-xs-8">
	50	+ <div class="design-content col-sm-8">
51	51	<div class="content" ng-style="{'background-color' : tShirtColorCode}">
52	52	<canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
53	53
...	...	@@ -14,7 +14,8 @@
14	14	"bootstrap": "~3.3.7",
15	15	"jquery": "~3.1.1",
16	16	"fabric.js": "fabric#^1.6.6",
17		- "angular-ui-select2": "^0.0.5"
	17	+ "angular-ui-select2": "^0.0.5",
	18	+ "fabric-customise-controls": "^0.1.8"
18	19	},
19	20	"devDependencies": {
20	21	"angular-mocks": "1.2.11",