24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

Texte draggable

Browse Source
This commit is contained in:
Vincent LAURENT 2021-10-04 00:08:05 +02:00
parent ba3fd22677
commit 93ebb20a5e
2 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/js/app.js
View File

@ -36,27 +36,23 @@ loadingTask.promise.then(function(pdf) {
var svgButton = document.createElement('label'); var svgButton = document.createElement('label');
svgButton.classList.add('position-relative'); svgButton.classList.add('position-relative');
svgButton.classList.add('btn'); svgButton.classList.add('btn');
svgButton.classList.add('btn-svg');
svgButton.classList.add('btn-outline-secondary'); svgButton.classList.add('btn-outline-secondary');
svgButton.htmlFor = "radio_svg_"+i; svgButton.htmlFor = "radio_svg_"+i;
if(svg.type == 'signature') { if(svg.type == 'signature') {
svgButton.innerHTML += '<i class="bi bi-vector-pen text-black align-middle float-start"></i> '; svgButton.innerHTML += '<i class="bi bi-vector-pen text-black align-middle float-start"></i>';
} }
if(svg.type == 'initials') { if(svg.type == 'initials') {
svgButton.innerHTML += '<i class="bi bi-type text-black align-middle float-start"></i> '; svgButton.innerHTML += '<i class="bi bi-type text-black align-middle float-start"></i>';
} }
if(svg.type == 'rubber_stamber') { if(svg.type == 'rubber_stamber') {
svgButton.innerHTML += '<i class="bi bi-card-text text-black align-middle float-start"></i> '; svgButton.innerHTML += '<i class="bi bi-card-text text-black align-middle float-start"></i>';
} }
if(svg.type) { if(svg.type) {
document.querySelector('.btn-add-svg-type[data-type="'+svg.type+'"]').classList.add('d-none'); document.querySelector('.btn-add-svg-type[data-type="'+svg.type+'"]').classList.add('d-none');
} }
svgButton.innerHTML += '<a title="Supprimer" data-index="'+i+'" class="btn-svg-list-suppression opacity-50 link-dark position-absolute" style="right: 6px; top: 2px;"><i class="bi bi-trash"></i></a>'; svgButton.innerHTML += '<a title="Supprimer" data-index="'+i+'" class="btn-svg-list-suppression opacity-50 link-dark position-absolute" style="right: 6px; top: 2px;"><i class="bi bi-trash"></i></a>';
svgButton.draggable = true; svgButton.draggable = true;
svgButton.addEventListener('dragstart', function(event) {
document.getElementById(this.htmlFor).checked = true;
});
var svgImg = document.createElement('img'); var svgImg = document.createElement('img');
svgImg.src = svg.svg; svgImg.src = svg.svg;
svgImg.draggable = false; svgImg.draggable = false;
@ -71,6 +67,12 @@ loadingTask.promise.then(function(pdf) {
return svgContainer; return svgContainer;
} }
document.querySelectorAll('label.btn-svg').forEach(function(item) {
item.addEventListener('dragstart', function(event) {
document.getElementById(this.htmlFor).checked = true;
});
});
var displaysSVG = function() { var displaysSVG = function() {
document.getElementById('svg_list').innerHTML = ""; document.getElementById('svg_list').innerHTML = "";
document.getElementById('svg_list_signature').innerHTML = ""; document.getElementById('svg_list_signature').innerHTML = "";
@ -322,6 +324,9 @@ loadingTask.promise.then(function(pdf) {
fabric.loadSVGFromURL(item, function(objects, options) { fabric.loadSVGFromURL(item, function(objects, options) {
var svg = fabric.util.groupSVGElements(objects, options); var svg = fabric.util.groupSVGElements(objects, options);
svg.scaleToHeight(100); svg.scaleToHeight(100);
if(svg.getScaledWidth() > 200) {
svg.scaleToWidth(200);
}
svg.top = y - (svg.getScaledHeight() / 2); svg.top = y - (svg.getScaledHeight() / 2);
svg.left = x - (svg.getScaledWidth() / 2); svg.left = x - (svg.getScaledWidth() / 2);
canvas.add(svg).renderAll(); canvas.add(svg).renderAll();

2
templates/pdf.html.php
View File

@ -46,7 +46,7 @@
</div> </div>
<div class="d-grid gap-2 mb-2 list-item-add"> <div class="d-grid gap-2 mb-2 list-item-add">
<input type="radio" class="btn-check" id="radio_svg_text" name="svg_2_add" autocomplete="off" value="text"> <input type="radio" class="btn-check" id="radio_svg_text" name="svg_2_add" autocomplete="off" value="text">
<label class="btn btn-outline-secondary text-black text-start" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label> <label draggable="true" style="cursor: grab;" class="btn btn-outline-secondary text-black text-start btn-svg" for="radio_svg_text"><i class="bi bi-textarea-t"></i> Texte</label>
</div> </div>
<div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div> <div id="svg_list" class="d-grid gap-2 mt-2 mb-2 list-item-add"></div>