Add centering guidelines script and update script references in designer view

app/Http/Controllers/PrintPatternController.php

@@ -5,6 +5,7 @@ use App\Http\Controllers\Controller;
 
 use Illuminate\Support\Facades\Request1;	
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
 use App\Models\PrintPatternModel;
 use App\Models\SizesModel;
 
@@ -46,7 +47,7 @@ class PrintPatternController extends Controller {
 		$NewImageName = $templateSize.'.'.$imageExt;
 		
 
-		$thumbnail = "uniform-templates/".$templatecode."/".$templateType."/SIZES/" . $NewImageName;
+		$thumbnail = "uploads/images/uniform-templates/".$templatecode."/".$templateType."/SIZES/" . $NewImageName;
 
 		$data = array(
 						'TemplateCode' 	=> $templatecode,
@@ -58,9 +59,7 @@ class PrintPatternController extends Controller {
 		$i 	= 	$m->insertPrintPattern($data);
 		//var_dump($data);
 		if($i){
-			$r = $request->file('preview_print_template')->move(
+			Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templatecode.'/'.$templateType.'/SIZES/'.$NewImageName, file_get_contents($request->file('preview_print_template')->getRealPath()));
-			    base_path() . "/public/images/uniform-templates/".$templatecode."/".$templateType."/SIZES/", $NewImageName
-			);
 			echo '<div class="alert alert-success alert-dismissible">
 	                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
 	                <h4><i class="icon fa fa-check"></i> Success!</h4>

app/Http/Controllers/TemplatesController.php

@@ -4,6 +4,7 @@ use App\Http\Requests;
 use App\Http\Controllers\Controller;
 
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Storage;
 use App\Models\TemplatesModel;
 use App\Models\SportsModel;
 use App\Models\PrintPatternModel;
@@ -48,7 +49,7 @@ class TemplatesController extends Controller {
 							<h3><?php echo $row->TemplateName ?></h3>
 						</div>
 		                <div class="sports-border">
-		                    <a href=""><img src="<?php echo url('public') . "/" . $row->Thumbnail ?>" alt="Sports" height="400px;" class="img img-responsive product-center" /></a>
+		                    <a href=""><img src="<?php echo minio_url($row->Thumbnail) ?>" alt="Sports" height="400px;" class="img img-responsive product-center" /></a>
 		                    <div class="sport-edit-btn">
 		                        <a href="<?php echo   url('admin/templates') . "/edit/" . $row->TemplateCode . "/" ?>" class="btn btn-primary btn-block"><i class="fa fa-edit"></i> Edit</a>
 		                    </div>
@@ -129,15 +130,13 @@ class TemplatesController extends Controller {
 
 
 		if($i){
-			$request->file('tempateImage')->move(
+			Storage::disk('minio')->put('images/templates/thumbnail/' . $NewImageName, file_get_contents($request->file('tempateImage')->getRealPath()));
-			    base_path() . '/public/images/templates/thumbnail', $NewImageName
-			);
 
 			//for front jersey
 			if(!empty($request->file('svgJerseyFront')->getClientOriginalName())){
 				
 				$svgName = $request->file('svgJerseyFront')->getClientOriginalName();
-				$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+				$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 				//var_dump($svgThumbnail);
 				$Templatedata = array(
 						'TemplateCode' => $templateCode,
@@ -149,16 +148,14 @@ class TemplatesController extends Controller {
 
 				$i 	= 	$m->insertTempaltePaths($Templatedata);
 				if($i){
-					$request->file('svgJerseyFront')->move(
+					Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgJerseyFront')->getRealPath()));
-					    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-					);
 				}
 			}
 
 			if(!empty($request->file('svgJerseyBack')->getClientOriginalName())){
 				
 				$svgName = $request->file('svgJerseyBack')->getClientOriginalName();
-				$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+				$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 				$Templatedata = array(
 						'TemplateCode' => $templateCode,
@@ -170,16 +167,14 @@ class TemplatesController extends Controller {
 
 				$i 	= 	$m->insertTempaltePaths($Templatedata);
 				if($i){
-					$request->file('svgJerseyBack')->move(
+					Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgJerseyBack')->getRealPath()));
-					    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-					);
 				}
 			}
 
 			if(!empty($request->file('svgShortRight')->getClientOriginalName())){
 				
 				$svgName = $request->file('svgShortRight')->getClientOriginalName();
-				$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+				$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 				$Templatedata = array(
 						'TemplateCode' => $templateCode,
@@ -191,16 +186,14 @@ class TemplatesController extends Controller {
 
 				$i 	= 	$m->insertTempaltePaths($Templatedata);
 				if($i){
-					$request->file('svgShortRight')->move(
+					Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgShortRight')->getRealPath()));
-					    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-					);
 				}
 			}
 
 			if(!empty($request->file('svgShortLeft')->getClientOriginalName())){
 				
 				$svgName = $request->file('svgShortLeft')->getClientOriginalName();
-				$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+				$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 				$Templatedata = array(
 						'TemplateCode' => $templateCode,
@@ -212,9 +205,7 @@ class TemplatesController extends Controller {
 
 				$i 	= 	$m->insertTempaltePaths($Templatedata);
 				if($i){
-					$request->file('svgShortLeft')->move(
+					Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgShortLeft')->getRealPath()));
-					    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-					);
 				}
 			}
 			
@@ -270,9 +261,7 @@ class TemplatesController extends Controller {
 							'PatternId' => $getSkins
 						);
 
-			$request->file('tempateImage')->move(
+			Storage::disk('minio')->put('images/templates/thumbnail/' . $NewImageName, file_get_contents($request->file('tempateImage')->getRealPath()));
-			    base_path() . '/public/images/templates/thumbnail', $NewImageName
-			);
 
 		}else{
 
@@ -298,7 +287,7 @@ class TemplatesController extends Controller {
 		    	//echo 'meron jerset front';
 		    
 		    	$svgName = $request->file('svgJerseyFront')->getClientOriginalName();
-				$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+				$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 				$Templatedata = array(
 						'Type' => 'Jersey',
@@ -308,9 +297,7 @@ class TemplatesController extends Controller {
 
 				$i 	= 	$m->updateTemplatePaths($Templatedata, $post['id_svgJerseyFront']);
 				if($i){
-					$request->file('svgJerseyFront')->move(
+					Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgJerseyFront')->getRealPath()));
-					    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-					);
 					//echo 'image move success';
 				}
 		}
@@ -318,7 +305,7 @@ class TemplatesController extends Controller {
 		if (array_key_exists('svgJerseyBack', $post)) {
 		
 		   	$svgName = $request->file('svgJerseyBack')->getClientOriginalName();
-			$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+			$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 			$Templatedata = array(
 					'Type' => 'Jersey',
@@ -327,16 +314,13 @@ class TemplatesController extends Controller {
 				);
 			$i 	= 	$m->updateTemplatePaths($Templatedata, $post['id_svgJerseyBack']);
 			if($i){
-
+				Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgJerseyBack')->getRealPath()));
-				$request->file('svgJerseyBack')->move(
-				    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-				);
 			}
 		}
 			
 		if (array_key_exists('svgShortRight', $post)) {
 			$svgName = $request->file('svgShortRight')->getClientOriginalName();
-			$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+			$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 			$Templatedata = array(
 					'Type' => 'Shorts',
@@ -346,15 +330,13 @@ class TemplatesController extends Controller {
 
 			$i 	= 	$m->updateTemplatePaths($Templatedata, $post['id_svgShortRight']);
 			if($i){
-				$request->file('svgShortRight')->move(
+				Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgShortRight')->getRealPath()));
-				    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-				);
 			}
 		}
 			
 		if (array_key_exists('svgShortLeft', $post)) {
 	    	$svgName = $request->file('svgShortLeft')->getClientOriginalName();
-			$svgThumbnail = "uniform-templates/".$templateCode."/DISPLAY/".$svgName;
+			$svgThumbnail = "uploads/images/uniform-templates/".$templateCode."/DISPLAY/".$svgName;
 
 			$Templatedata = array(
 					'Type' => 'Shorts',
@@ -364,9 +346,7 @@ class TemplatesController extends Controller {
 
 			$i 	= 	$m->updateTemplatePaths($Templatedata, $post['id_svgShortLeft']);
 			if($i){
-				$request->file('svgShortLeft')->move(
+				Storage::disk('minio')->put('uploads/images/uniform-templates/'.$templateCode.'/DISPLAY/'.$svgName, file_get_contents($request->file('svgShortLeft')->getRealPath()));
-				    base_path() . '/public/images/uniform-templates/'.$templateCode. '/DISPLAY' , $svgName
-				);
 			}
 		}
 

public/designer/js/centering_guidelines.js

@@ -0,0 +1,90 @@
+/**
+ * Augments canvas by assigning to `onObjectMove` and `onAfterRender`.
+ * This kind of sucks because other code using those methods will stop functioning.
+ * Need to fix it by replacing callbacks with pub/sub kind of subscription model.
+ * (or maybe use existing fabric.util.fire/observe (if it won't be too slow))
+ */
+function initCenteringGuidelines(canvas) {
+
+  var canvasWidth = canvas.getWidth(),
+      canvasHeight = canvas.getHeight(),
+      canvasWidthCenter = canvasWidth / 2,
+      canvasHeightCenter = canvasHeight / 2,
+      canvasWidthCenterMap = { },
+      canvasHeightCenterMap = { },
+      centerLineMargin = 4,
+      centerLineColor = 'rgba(255,0,241,0.5)',
+      centerLineWidth = 1,
+      ctx = canvas.getSelectionContext(),
+      viewportTransform;
+
+  for (var i = canvasWidthCenter - centerLineMargin, len = canvasWidthCenter + centerLineMargin; i <= len; i++) {
+    canvasWidthCenterMap[Math.round(i)] = true;
+  }
+  for (var i = canvasHeightCenter - centerLineMargin, len = canvasHeightCenter + centerLineMargin; i <= len; i++) {
+    canvasHeightCenterMap[Math.round(i)] = true;
+  }
+
+  function showVerticalCenterLine() {
+    showCenterLine(canvasWidthCenter + 0.5, 0, canvasWidthCenter + 0.5, canvasHeight);
+  }
+
+  function showHorizontalCenterLine() {
+    showCenterLine(0, canvasHeightCenter + 0.5, canvasWidth, canvasHeightCenter + 0.5);
+  }
+
+  function showCenterLine(x1, y1, x2, y2) {
+    ctx.save();
+    ctx.strokeStyle = centerLineColor;
+    ctx.lineWidth = centerLineWidth;
+    ctx.beginPath();
+    ctx.moveTo(x1 * viewportTransform[0], y1 * viewportTransform[3]);
+    ctx.lineTo(x2 * viewportTransform[0], y2 * viewportTransform[3]);
+    ctx.stroke();
+    ctx.restore();
+  }
+
+  var afterRenderActions = [],
+      isInVerticalCenter,
+      isInHorizontalCenter;
+
+  canvas.on('mouse:down', function () {
+    viewportTransform = canvas.viewportTransform;
+  });
+
+  canvas.on('object:moving', function(e) {
+    var object = e.target,
+        objectCenter = object.getCenterPoint(),
+        transform = canvas._currentTransform;
+
+    if (!transform) return;
+
+    isInVerticalCenter = Math.round(objectCenter.x) in canvasWidthCenterMap,
+    isInHorizontalCenter = Math.round(objectCenter.y) in canvasHeightCenterMap;
+
+    if (isInHorizontalCenter || isInVerticalCenter) {
+      object.setPositionByOrigin(new fabric.Point((isInVerticalCenter ? canvasWidthCenter : objectCenter.x), (isInHorizontalCenter ? canvasHeightCenter : objectCenter.y)), 'center', 'center');
+    }
+  });
+
+  canvas.on('before:render', function() {
+    if (canvas.contextTop) {
+      canvas.clearContext(canvas.contextTop);
+    }
+  });
+
+  canvas.on('after:render', function() {
+    if (isInVerticalCenter) {
+      showVerticalCenterLine();
+    }
+    if (isInHorizontalCenter) {
+      showHorizontalCenterLine();
+    }
+  });
+
+  canvas.on('mouse:up', function() {
+    // clear these values, to stop drawing guidelines once mouse is up
+    isInVerticalCenter = isInHorizontalCenter = null;
+    canvas.renderAll();
+  });
+}

resources/views/designer/designer.blade.php

@@ -886,8 +886,8 @@
         <script src="{{asset('/designer/js/custom-script.js')}}"></script>
         <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
         <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
-        <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/centering_guidelines.js"></script>
+        <script src="{{asset('/designer/js/centering_guidelines.js')}}"></script>
-        <script src="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
+        <script src="{{asset('/designer/js/aligning_guidelines.js')}}"></script>
         <script>
             
             $(document).ready(function() {