webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update designer with sleeves and all over print

Browse Source
This commit is contained in:
Frank John Begornia
2019-06-03 18:00:37 +08:00
parent 30962d3b4e
commit 03f9649f9b
7 changed files with 598 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

498
resources/views/designer/designer.blade.php
View File

@@ -44,7 +44,7 @@
padding: 20px;
}
.visualizer-container{
height: 510px;
height: 520px;
width: 100%;
margin: auto;
}
@@ -213,7 +213,7 @@
@foreach($templatepaths_arrays as $k => $template)
<li class="@if ($template->Side == 'Front') active @endif" data-tab="li_{{ $template->Side }}_{{ $template->Type }}" data-object-svg="objSVG_{{ $template->Type }}_{{ $template->Side }}" data-canvas-id="canvas_{{ $template->Type }}_{{ $template->Side }}" >
<a i href="#a_{{ $template->Side }}_{{ $template->Type }}" data-toggle="tab" class="svg">
{{ $template->Type }} {{ $template->Side }}
{{ $template->Side }}
</a>
</li>
@endforeach
@@ -225,31 +225,46 @@
<div class="tab-pane @if ($template->Side == 'Front') active @endif" id="a_{{ $template->Side }}_{{ $template->Type }}">
<div class="col-md-12" style="overflow: auto;">
<div class="visualizer-container divName">
<div id="objSVG_{{ $template->Type }}_{{ $template->Side }}" height="504px" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
<div id="objSVG_{{ $template->Type }}_{{ $template->Side }}" style="position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);">
</div>
@if(($template->Type == "Jersey" || $template->Type == "Shirts") && $template->Side == "Front")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:42px; margin-left: 0px;"></canvas>
<!-- Basketball Uniform -->
@if($template->Type == "Jersey" && $template->Side == "Front")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:47px; margin-left: 0px;"></canvas>
@endif
@if($template->Type == "Jersey" && $template->Side == "Back")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:22px; margin-left:0px;"></canvas>
@endif
@if(($template->Type == "Jersey" || $template->Type == "Shirts") && $template->Side == "Back")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:16px; margin-left:-1px;"></canvas>
@endif
@if($template->Type == "Shorts" && $template->Side == "Right")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:175px; margin-left: 0px;" ></canvas>
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:180px; margin-left: 0px;" ></canvas>
@endif
@if($template->Type == "Shorts" && $template->Side == "Left")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:175px; margin-left: 0px;" ></canvas>
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:180px; margin-left: 0px;" ></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Right")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:188px; margin-left: 0px;" ></canvas>
<!-- Shirts -->
@if($template->Type == "Shirts" && $template->Side == "Front" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="222px" height="380px" style="margin-top:59px; margin-left: 0px;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Back" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="221.107px" height="379.04px" style="margin-top:23px; margin-left:-1px;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Right" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="96px" height="112px" style="margin-top:257px; margin-left: -17px;" ></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Left")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="157.933px" height="315.863px" style="margin-top:188px; margin-left: 0px;" ></canvas>
@if($template->Type == "Shirts" && $template->Side == "Left" && $template->TemplateFormat == "svg")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="96px" height="112px" style="margin-top:257px; margin-left: 17px;" ></canvas>
@endif
<!-- Shirts All over Print -->
@if($template->Type == "Shirts" && $template->Side == "Front" && $template->TemplateFormat == "png")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="512px" height="512px" style="position:absolute; top: 50%; left: 50%;"></canvas>
@endif
@if($template->Type == "Shirts" && $template->Side == "Back" && $template->TemplateFormat == "png")
<canvas id="canvas_{{ $template->Type }}_{{ $template->Side }}" width="512px" height="512px" style="position:absolute; top: 50%; left: 50%;"></canvas>
@endif
</div>
@@ -265,31 +280,56 @@
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs nav-justified" id="side-controls">
@if($template->Type != "Shirts")
<li class="active"><a href="#tab-change-color" id="tab-change-color1" data-toggle="tab"><b style="color:red;">Step 1</b><br>Uniform Color</a></li>
<li><a href="#tab-add-text" id="tab-add-text1" data-toggle="tab"><b style="color:red;">Step 2</b><br>Team Name</a></li>
<li><a href="#tab-add-number" id="tab-add-number1" data-toggle="tab"><b style="color:red;">Step 3</b><br>Name / Number</a></li>
@elseif($template->Type == "Shirts")
<li class="active"><a href="#tab-change-color" id="tab-change-color1" data-toggle="tab"><br><br>Body Color</a></li>
<li><a href="#tab-add-text" id="tab-add-text1" data-toggle="tab"><i class="fa fa-font"></i><br><br>Text</a></li>
@endif
<li><a href="#tab-clipart" id="tab-clipart1" data-toggle="tab"><i class="fa fa-shirtsinbulk" aria-hidden="true"></i><br>Add<br>Clipart(s)</a></li>
<li><a href="#tab-upload-image" id="tab-upload-image1" data-toggle="tab"><i class="fa fa-image" aria-hidden="true"></i><br>Add<br>Image(s)</a></li>
</ul>
</div>
<div class="panel-body" style="height: 441px; overflow:auto;">
<div class="row">
<div class="form-group col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" id="grid_lines" data-toggle="toggle" data-on="Enabled" data-off="Disabled" data-size="small">
<i class="fa fa-th"></i> Grid Line
</label>
<!-- <div class="row"> -->
<!-- <div class="col-sm-12"> -->
<div class="well">
<div class="form-inline">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="grid_lines" data-toggle="toggle" style="width:75px;" data-width="100px" data-on="<i class='fa fa-check-circle'></i> Grid" data-off="<i class='fa fa-ban'></i> Grid" data-size="small">
</div>
</div>
<div class="form-group">
<div style="margin-right:10px;"></div>
</div>
<div class="form-group upper-buttons">
<button id="copy" class="btn btn-default btn-sm" title="Copy"><i class="fa fa-clone"></i></button>
<button id="paste" class="btn btn-default btn-sm" title="Paste" disabled="disabled"><i class="fa fa-clipboard"></i></button>
<button class="btn btn-default btn-sm remove" title="Delete" disabled="disabled"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-default btn-sm btn-lock-object" data-status="unlock" title="Lock" disabled="disabled"><i class="fa fa-unlock-alt"></i></button>
<!-- <button type="button" class="btn btn-default btn-sm remove" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button> -->
<!-- <button id="flip_x">flip X</button>
<button id="flip_y">flip Y</button> -->
</div>
</div>
</div>
</div>
</div>
<!-- </div>
</div> -->
<div class="tab-content">
<div class="tab-pane fade in active" id="tab-change-color">
<h4>Body Color</h4>
<ul class="nav nav-pills nav-stacked col-md-4">
<li class="active"><a href="#tab_basecolor" data-toggle="pill">Solid Color</a></li>
@if($template_arrays[0]->WithGradient != 'no')
<li><a href="#tab_gradient" data-toggle="pill">Gradient</a></li>
@endif
<li><a href="#tab_bodypattern" data-toggle="pill">Pattern</a></li>
</ul>
<div class="tab-content col-md-8">
@@ -308,7 +348,7 @@
</tr>
</table>
</div>
<div class="tab-pane" id="tab_gradient">
<table class="table table-custom" >
<tr>
@@ -390,11 +430,15 @@
@if($template->Type == "Shirts")
@if($i == 1)
<h4>Neck Line</h4>
<h4>Right Sleeve</h4>
@endif
@if($i == 2)
<h4>Sleeves</h4>
<h4>Left Sleeve</h4>
@endif
@if($i == 3)
<h4>Neck Line</h4>
@endif
@else
@@ -482,7 +526,7 @@
<div id="addNewTextId">
<div class="row">
<div class="form-group col-sm-12">
<button type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
<!-- <button type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button> -->
<button type="button" onclick="addNewText();" class="btn btn-primary pull-right btn-sm"><i class="fa fa-plus" aria-hidden="true"></i> New Text</button>
</div>
</div>
@@ -507,7 +551,6 @@
</div>
</div>
</div>
<div id="textProperties">
@include('designer.text_properties')
</div>
@@ -569,8 +612,8 @@
</div>
<div class="col-md-6">
<button class="btn btn-sm btn-default pull-right addMarginLeft" id="btn-close-clipart-properties" title="Close Clipart Properties"><i class="fa fa-remove" aria-hidden="true"></i> Close</button>
<button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></button>
<!-- <button id="img-remove-btn" type="button" class="btn btn-danger pull-right btn-sm remove addMarginLeft" title="Remove object"><i class="fa fa-trash" aria-hidden="true"></i></button> -->
<!-- <button type="button" class="btn btn-danger pull-right btn-sm addMarginLeft copyObject" title="Duplicate object"><i class="fa fa-copy" aria-hidden="true"></i></button> -->
</div>
</div>
<div class="row">
@@ -605,9 +648,13 @@
</div>
<div class="form-group col-md-7 col-sm-6 col-xs-6">
<label>Position</label><br>
<button class="btn btn-sm btn-default btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<!-- <button class="btn btn-sm btn-default btn-send-middle" style="margin:2px;" onclick="centerOnly();"></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerVer();"></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button>
<button class="btn btn-sm btn-default center-horizontal" style="margin:2px;" onclick="centerHor();" ></button> -->
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Vertical" onclick="centerVer();"><i class="fa fa-arrows-v"></i></button>
<button class="btn btn-sm btn-default" style="min-width:35px;" title="Center Horizontal" onclick="centerHor();" ><i class="fa fa-arrows-h"></i></button>
<button class="btn btn-sm btn-default flip-vertically" style="min-width:35px;" title="Flip Vertically"><i class="fa fa-angle-double-up"></i></button>
<button class="btn btn-sm btn-default flip-horizontally" style="min-width:35px;" title="Flip Horizontally"><i class="fa fa-angle-double-right"></i></button>
</div>
</div>
<hr>
@@ -794,7 +841,8 @@
<script src="{{asset('/public/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="https://rawgit.com/fabricjs/fabric.js/master/lib/aligning_guidelines.js"></script>
<script>
$(document).ready(function() {
@@ -812,17 +860,118 @@
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
if($(this).prop('checked')){
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "");
}else{
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "none");
}
try{
if($(this).prop('checked')){
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "");
}else{
document.getElementById(sideName + '_Grid_Lines').setAttribute("display", "none");
}
}catch(e){
}
}
});
$("#copy").click(function(){
copy();
});
$("#paste").click(function(){
paste();
});
$(".btn-lock-object").click(function(){
if($(this).data('status') == 'unlock'){
lockObject();
}else{
unLockObject();
}
});
$(document).on('button click', '.flip-horizontally', function(){
// console.log('flipx');
var object = canvas.getActiveObject();
object.toggle('flipX');
canvas.renderAll();
});
$(document).on('button click', '.flip-vertically', function(){
var object = canvas.getActiveObject();
object.toggle('flipY');
canvas.renderAll();
});
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
//console.log('escape');
onDeSelected();
}
});
var copiedObject,
copiedObjects = new Array();
function copy(){
copiedObjects = new Array();
if(canvas.getActiveGroup()){
//console.log(canvas.getActiveGroup().getObjects());
canvas.getActiveGroup().getObjects().forEach(function(o){
var object = fabric.util.object.clone(o);
copiedObjects.push(object);
});
$('#paste').attr("disabled", false);
}
else if(canvas.getActiveObject()){
// var object = fabric.util.object.clone(canvas.getActiveObject());
var object = canvas.getActiveObject().toObject(['id']);
copiedObject = object;
copiedObjects = new Array();
$('#paste').attr("disabled", false);
}
}
function paste(){
if(copiedObjects.length > 0){
for(var i in copiedObjects){
copiedObjects[i]=fabric.util.object.clone(copiedObjects[i]);
//copiedObjects[i].set("top", copiedObjects[i].top+100);
//copiedObjects[i].set("left", copiedObjects[i].left+100);
canvas.add(copiedObjects[i]);
canvas.item(canvas.size() - 1).hasControls = true;
}
}
else if(copiedObject){
// copiedObject= fabric.util.object.clone(copiedObject);
// copiedObject.set("top", 150);
// copiedObject.set("left", 150);
// canvas.add(copiedObject);
// canvas.item(canvas.size() - 1).hasControls = true;
fabric.util.enlivenObjects([copiedObject], function(objects) {
objects.forEach(function(o) {
o.set({
// top: o.top + 1,
// left: o.left + 1,
borderColor: '#71b7f3',
cornerColor: '#71b7f3',
cornerSize: 10,
transparentCorners: false
});
canvas.add(o);
canvas.setActiveObject(o);
});
canvas.renderAll();
});
}
canvas.renderAll();
}
$("#frm-login").validate({
rules: {
email: {
@@ -905,14 +1054,13 @@
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var contentName = "content_" + type + "_" + sideName;
console.log(canvasName);
var contentName = "content_" + sideName;
//console.log(contentName);
contentName = JSON.stringify(window['canvas_' + type + '_' + sideName].toObject(['idNumber', 'id'])); // = new fabric.Canvas(canvasName);
//console.log(contentName);
var inputName = "json_" + type + "_" + sideName;
var hiddenFieldContentDesign = "field_" + type + "_" + sideName;
var inputName = "json_" + sideName;
var hiddenFieldContentDesign = "field_" + sideName;
hiddenFieldContentDesign = document.createElement("input");
hiddenFieldContentDesign.setAttribute("type", "hidden");
@@ -920,7 +1068,7 @@
hiddenFieldContentDesign.setAttribute("value", contentName);
newformSaveDesign.appendChild(hiddenFieldContentDesign);
}
var hiddenFieldTemplateDetails = document.createElement("input");
hiddenFieldTemplateDetails.setAttribute("type", "hidden");
hiddenFieldTemplateDetails.setAttribute("name", "templateDetails");
@@ -1032,8 +1180,6 @@
// }
});
;
}
finalJSON.push({
@@ -1310,22 +1456,42 @@
function changeData() {
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
var canvas;
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var pathLocation = SideAndPath[i]['Path'];
var templateFormat = SideAndPath[i]['TemplateFormat'];
var objectId = "objSVG_" + type + "_" + sideName;
var SVGColorId = type +"_"+sideName+"_Color";
var gradientIds = sideName+"_"+type+"_Gradients";
var gradientPrefix = sideName+"_"+type+"_";
if(!document.getElementById(objectId))
return false;
var tempPath = "{{ config('site_config.uploads') }}" + pathLocation;
// console.log(tempPath);
loadTemplate(tempPath, objectId, gradientIds, gradientPrefix);
// console.log(tempPath)
if(!document.getElementById(objectId))
return false;
if(templateFormat == 'png'){
var canvasName = "canvas_" + type + "_" + sideName;
// $('#'+objectId).html('<canvas id="canvas_'+type+'_'+sideName+'" width="512px" height="512px" style="border: 1px solid red;"></canvas>');
// window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
// window['canvas_' + type + '_' + sideName].setOverlayImage(tempPath, window['canvas_' + type + '_' + sideName].renderAll.bind(canvas), {
// width: window['canvas_' + type + '_' + sideName].width,
// height: window['canvas_' + type + '_' + sideName].height
// });
}
if(templateFormat == 'svg'){
console.log('asdasda');
loadTemplate(tempPath, objectId, gradientIds, gradientPrefix);
}
}
}
@@ -1470,8 +1636,20 @@
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var pathLocation = SideAndPath[i]['Path'];
var canvasName = "canvas_" + type + "_" + sideName;
var tempPath = "{{ config('site_config.uploads') }}" + pathLocation;
window['canvas_' + type + '_' + sideName] = new fabric.Canvas(canvasName);
var templateFormat = SideAndPath[i]['TemplateFormat'];
if(templateFormat == 'png'){
window['canvas_' + type + '_' + sideName].setOverlayImage(tempPath, window['canvas_' + type + '_' + sideName].renderAll.bind(window['canvas_' + type + '_' + sideName]), {
width: window['canvas_' + type + '_' + sideName].width,
height: window['canvas_' + type + '_' + sideName].height
});
}
}
@@ -1479,7 +1657,10 @@
var canvas = window['canvas_' + SideAndPath[0]['Type'] + '_' + SideAndPath[0]['Side']]; //canvas_Jersey_Front;
var canvasID = 'canvas_' + SideAndPath[0]['Type'] + '_' + SideAndPath[0]['Side'];
/* ############################ */
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
$('#side-controls a').click(function (e) {
onDeSelected();
});
@@ -1490,12 +1671,16 @@
canvasID = $(this).attr('data-canvas-id');
canvas.calcOffset();
initCanvas();
canvas.on('object:moving', function(options) {
// canvas.on('object:moving', function(options) {
console.log('asdasd')
});
// console.log('asdasd')
// });
// canvas.on('selection:cleared', onDeSelected);
// canvas.on('object:selected', onSelected);
initCenteringGuidelines(canvas);
initAligningGuidelines(canvas);
canvas.selection = false;
canvas.controlsAboveOverlay = true;
});
//trigger enter ######################################################################
@@ -1592,18 +1777,18 @@
// canvas.on('object:modified', onModified);
var snapZone = 4;
canvas.on('object:moving', function(options) {
var objectMiddle = options.target.left + options.target.getWidth() / 2;
if (objectMiddle > canvas.width / 2 - snapZone &&
objectMiddle < canvas.width / 2 + snapZone) {
options.target.set({
left: canvas.width / 2 - options.target.getWidth() / 2,
}).setCoords();
// var objectMiddle = options.target.left + options.target.getWidth() / 2;
// if (objectMiddle > canvas.width / 2 - snapZone &&
// objectMiddle < canvas.width / 2 + snapZone) {
// options.target.set({
// left: canvas.width / 2 - options.target.getWidth() / 2,
// }).setCoords();
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
// // $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
// document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}
console.log('asdasd')
// }
// console.log('asdasd')
});
canvas.on('object:rotating', onRotating);
@@ -1623,16 +1808,21 @@
canvas.on('mouse:up', function(element) {
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "none" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
}catch(e){
}
_isMouseDown = false;
var isDragEnd = _isDragging;
_isDragging = false;
if (isDragEnd) {
try{
default_canvas_width = 219;
default_canvas_height = 383;
default_canvas_width = canvas.width;
default_canvas_height = canvas.height;
var obj = canvas.getActiveObject();
getWidth = obj.getWidth();
@@ -1706,13 +1896,68 @@
onDeSelected();
}
function lockObject(){
var obj = canvas.getActiveObject();
obj.set({
'lockStatus' : true,
'lockMovementX': true,
'lockMovementY': true,
'lockScalingX': true,
'lockScalingY': true,
'lockRotation': true,
});
$('.btn-lock-object').html('<i class="fa fa-lock"></i>');
$('.btn-lock-object').attr('title', 'Unlock');
$('.btn-lock-object').addClass('active');
$('.btn-lock-object').data('status', 'lock');
canvas.renderAll();
}
function unLockObject(){
var obj = canvas.getActiveObject();
obj.set({
'lockStatus' : false,
'lockMovementX': false,
'lockMovementY': false,
'lockScalingX': false,
'lockScalingY': false,
'lockRotation': false,
});
$('.btn-lock-object').html('<i class="fa fa-unlock"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').removeClass('active');
$('.btn-lock-object').data('status', 'unlock');
canvas.renderAll();
}
function onSelected(){
var obj = canvas.getActiveObject();
// console.log("Height =", (obj.getScaleY() * obj.getHeight()).toFixed(2));
// console.log("Width = ", (obj.getScaleX() * obj.getWidth()).toFixed(2));
console.log('left-', obj.left, 'top-', obj.top);
$('.remove').attr("disabled", false);
var getLockStatus = canvas.getActiveObject().get('lockStatus');
// console.log(getLockStatus);
$('.btn-lock-object').attr("disabled", false);
if(getLockStatus == true){
$('.btn-lock-object').html('<i class="fa fa-lock"></i>');
$('.btn-lock-object').attr('title', 'Unlock');
$('.btn-lock-object').addClass('active');
$('.btn-lock-object').data('status', 'lock');
}else{
$('.btn-lock-object').html('<i class="fa fa-unlock"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').data('status', 'unlock');
// $('.btn-lock-object').addClass('active');
}
// console.log('left-', obj.left, 'top-', obj.top);
// console.log('font-', obj.fontSize);
if(obj != null){
@@ -1827,13 +2072,24 @@
return false;
}
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
}
}
}
function onDeSelected(){
var obj = canvas.getActiveObject();
$('.remove').attr("disabled", true);
$('.btn-lock-object').attr("disabled", true);
$('.btn-lock-object').html('<i class="fa fa-unlock-alt"></i>');
$('.btn-lock-object').attr('title', 'Lock');
$('.btn-lock-object').removeClass('active');
$('.btn-lock-object').data('status', 'unlock');
$("#textProperties").css({ "display" : "none" });
$("#addNewTextId").css({ "display" : "none" });
@@ -1861,8 +2117,12 @@
canvas.discardActiveObject();
canvas.renderAll();
// $("#"+canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").css({ "display" : "none" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "none");
}catch(e){
}
}
@@ -1938,10 +2198,14 @@
} else if (activeGroup) {
activeGroup.setCoords();
canvas.renderAll();
}
}
try{
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}catch(e){
// $("#"+canvasID).css({ "border" : "1px solid #b1abfb" });
document.getElementById(canvasID.split("_")[2] + "_" +canvasID.split("_")[1] + "_Border").setAttribute("display", "");
}
};
window.addEventListener("keydown", processKeys, false);
@@ -1966,7 +2230,8 @@
$(document).on('button click', '.copyObject', function(event){
event.preventDefault();
var copyData = canvas.getActiveObject().toObject(['id']);
var copyData = canvas.getActiveObject().toObject(['id']);
fabric.util.enlivenObjects([copyData], function(objects) {
objects.forEach(function(o) {
o.set({
@@ -2062,16 +2327,21 @@
$(document).on('input change', '.offsetGradientColor', function() {
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
var templateType = "{{ $template->Type }}";
// console.log(templateType);
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var objectId = "objSVG_" + type + "_" + sideName;
// console.log($(this).attr('data-gradient-id'));
try {
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
if(templateType == "Shirts" && (sideName == "Right" || sideName == "Left")) {
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", ($(this).val() * 10) - 40 + "%");
}else{
document.getElementById(sideName + "_" + type +"_" + $(this).attr('data-gradient-id')).setAttribute("offset", $(this).val() * 10 + "%");
}
}
catch (e) {
//console.log(e);
@@ -2279,12 +2549,12 @@
$("#okBtn").html("Please Wait");
$("#okBtn").attr('disabled', true);
canvas.centerObject(oText);
canvas.add(oText);
setTimeout(function() {
//canvas.add(oText);
canvas.setActiveObject(oText);
oText.bringToFront();
oText.centerH();
oText.setCoords();
//var div_textProperties = document.getElementById('wait-msg-jfront');
@@ -2308,10 +2578,10 @@
beforeSend:function(xhr){
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
xhr.setRequestHeader( 'X-Requested-With', 'XMLHttpRequest');
},
success: function(response){
data = response;
@@ -3005,6 +3275,7 @@
//hasRotatingPoint: false,
// });
}).scaleToWidth(100);
canvas.centerObject(clipart);
canvas.add(clipart);
canvas.setActiveObject(clipart);
canvas.renderAll();
@@ -3058,7 +3329,7 @@
// 5TH TAB
// for upload image
document.getElementById('upload-images').onchange = function handleImage(e) {
console.log(event);
// console.log(event);
var reader = new FileReader();
reader.onload = function (event) {
@@ -3081,12 +3352,13 @@
hasControls: true,
lockScalingFlip: true,
cache: false,
crossOrigin : 'anonymous'
// width: 15.6
}).scale(0.1);
//image.scale(getRandomNum(0.1, 0.25)).setCoords();
canvas.centerObject(image);
canvas.add(image);
canvas.renderAll(image);
canvas.setActiveObject(image);
@@ -3122,42 +3394,48 @@
var onMoveColor = color.toHexString(); // #ff0000
var SideAndPath = {!! json_encode($templatepaths_arrays) !!};
try{
for (var i = 0; i < SideAndPath.length; i++) {
var sideName = SideAndPath[i]['Side'];
var type = SideAndPath[i]['Type'];
var templateFormat = SideAndPath[i]['TemplateFormat'];
if(templateFormat == "png"){
window['canvas_' + type + '_' + sideName].backgroundColor = onMoveColor;
window['canvas_' + type + '_' + sideName].renderAll();
}
var mainColorId = type + "_" + sideName + "_" + "Color";
var objectId = "objSVG_" + type + "_" + sideName;
var y = 0.2126*color._r + 0.7152*color._g + 0.0722*color._b;
// var c = y < 128 ? 'white' : 'black';
try{
if(y < 128){
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "white");
if(y < 128){
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "white");
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
$(border_stroke).children("path").attr("fill", "yellow");
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
$(border_stroke).children("path").attr("fill", "yellow");
}else{
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "black");
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
$(border_stroke).children("path").attr("fill", "rgb(106, 77, 169)");
}
// console.log(border_stroke)
// document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
}catch(e){
}else{
document.getElementById(sideName+'_Grid_Lines_Path').setAttribute("stroke", "black");
var border_stroke = document.getElementById(sideName + '_' + type + '_Border');
$(border_stroke).children("path").attr("fill", "rgb(106, 77, 169)");
}
// console.log(border_stroke)
document.getElementById(mainColorId).setAttribute("fill", onMoveColor);
}
}catch(e){
}
$('#row-body-gradient').css({