CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

PDF editor: Upgrade fabric.js (#3196)

Browse Source 
Co-authored-by: Richard Schreiber <schreiber@rami.io>
This commit is contained in:
Raphael Michel
2023-04-24 13:17:11 +02:00
committed by GitHub
parent 0655a7cad1
commit c2cc49bf34
3 changed files with 14634 additions and 10327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24779
src/pretix/static/fabric/fabric.js vendored
View File

File diff suppressed because it is too large Load Diff

10
src/pretix/static/fabric/fabric.min.js vendored
View File

File diff suppressed because one or more lines are too long

172
src/pretix/static/pretixcontrol/js/ui/editor.js
View File

@@ -5,7 +5,8 @@ fabric.Poweredby = fabric.util.createClass(fabric.Image, {
initialize: function (options) { initialize: function (options) {
options || (options = {}); options || (options = {});
this.callSuper('initialize', $("#poweredby-" + options.content).get(0), options); var el = $("#poweredby-" + options.content).get(0)
this.callSuper('initialize', el, options);
this.set('label', options.label || ''); this.set('label', options.label || '');
}, },
@@ -150,7 +151,7 @@ var editor = {
left += o.group.left + o.group.width / 2; left += o.group.left + o.group.width / 2;
} }
if (o.type === "textarea") { if (o.type === "textarea") {
var col = (new fabric.Color(o.getFill()))._source; var col = (new fabric.Color(o.fill))._source;
var bottom = editor.pdf_viewport.height - o.height - top; var bottom = editor.pdf_viewport.height - o.height - top;
if (o.downward) { if (o.downward) {
bottom = editor.pdf_viewport.height - top; bottom = editor.pdf_viewport.height - top;
@@ -161,7 +162,7 @@ var editor = {
locale: $("#pdf-info-locale").val(), locale: $("#pdf-info-locale").val(),
left: editor._px2mm(left).toFixed(2), left: editor._px2mm(left).toFixed(2),
bottom: editor._px2mm(bottom).toFixed(2), bottom: editor._px2mm(bottom).toFixed(2),
fontsize: editor._px2pt(o.getFontSize()).toFixed(1), fontsize: editor._px2pt(o.fontSize).toFixed(1),
lineheight: o.lineHeight, lineheight: o.lineHeight,
color: col, color: col,
fontfamily: o.fontFamily, fontfamily: o.fontFamily,
@@ -230,37 +231,37 @@ var editor = {
} else if (d.type === "imagearea") { } else if (d.type === "imagearea") {
o = editor._add_imagearea(d.content); o = editor._add_imagearea(d.content);
o.content = d.content; o.content = d.content;
o.setHeight(editor._mm2px(d.height)); o.set('height', editor._mm2px(d.height));
o.setWidth(editor._mm2px(d.width)); o.set('width', editor._mm2px(d.width));
o.setScaleX(1); o.set('scaleX', 1);
o.setScaleY(1); o.set('scaleY', 1);
} else if (d.type === "poweredby") { } else if (d.type === "poweredby") {
o = editor._add_poweredby(d.content); o = editor._add_poweredby(d.content);
o.content = d.content; o.content = d.content;
o.scaleToHeight(editor._mm2px(d.size)); o.scaleToHeight(editor._mm2px(d.size));
} else if (d.type === "textarea" || o.type === "text") { } else if (d.type === "textarea" || o.type === "text") {
o = editor._add_text(); o = editor._add_text();
o.setColor('rgb(' + d.color[0] + ',' + d.color[1] + ',' + d.color[2] + ')'); o.set('fill', 'rgb(' + d.color[0] + ',' + d.color[1] + ',' + d.color[2] + ')');
o.setFontSize(editor._pt2px(d.fontsize)); o.set('fontSize', editor._pt2px(d.fontsize));
o.setLineHeight(d.lineheight || 1); o.set('lineHeight', d.lineheight || 1);
o.setFontFamily(d.fontfamily); o.set('fontFamily', d.fontfamily);
o.setFontWeight(d.bold ? 'bold' : 'normal'); o.set('fontWeight', d.bold ? 'bold' : 'normal');
o.setFontStyle(d.italic ? 'italic' : 'normal'); o.set('fontStyle', d.italic ? 'italic' : 'normal');
o.downward = d.downward || false; o.downward = d.downward || false;
o.content = d.content; o.content = d.content;
o.setTextAlign(d.align); o.set('textAlign', d.align);
if (d.rotation) { if (d.rotation) {
o.rotate(d.rotation); o.rotate(d.rotation);
} }
if (d.content === "other") { if (d.content === "other") {
o.setText(d.text); o.set('text', d.text);
} else if (d.content === "other_i18n") { } else if (d.content === "other_i18n") {
o.text_i18n = d.text_i18n o.text_i18n = d.text_i18n
o.setText(d.text_i18n[Object.keys(d.text_i18n)[0]]); o.set('text', d.text_i18n[Object.keys(d.text_i18n)[0]]);
} else if (d.content) { } else if (d.content) {
o.setText(editor._get_text_sample(d.content)); o.set('text', editor._get_text_sample(d.content));
} }
o.setWidth(editor._mm2px(d.width)); // needs to be after setText o.set('width', editor._mm2px(d.width)); // needs to be after setText
if (d.locale) { if (d.locale) {
// The data format allows to set the locale per text field but we currently only expose a global field // The data format allows to set the locale per text field but we currently only expose a global field
$("#pdf-info-locale").val(d.locale); $("#pdf-info-locale").val(d.locale);
@@ -354,7 +355,7 @@ var editor = {
} }
$("#page_nav").append($li) $("#page_nav").append($li)
$a.on("click", function (event) { $a.on("click", function (event) {
editor.fabric.deactivateAll(); editor.fabric.discardActiveObject();
editor._load_page(parseInt($(this).attr("data-page"))); editor._load_page(parseInt($(this).attr("data-page")));
event.preventDefault(); event.preventDefault();
return true; return true;
@@ -397,11 +398,8 @@ var editor = {
editor.fabric.on('object:added', editor._create_savepoint); editor.fabric.on('object:added', editor._create_savepoint);
editor.fabric.on('selection:cleared', editor._update_toolbox); editor.fabric.on('selection:cleared', editor._update_toolbox);
editor.fabric.on('selection:created', editor._update_toolbox); editor.fabric.on('selection:created', editor._update_toolbox);
editor.fabric.on('object:selected', editor._update_toolbox); editor.fabric.on('selection:updated', editor._update_toolbox);
editor.fabric.on('object:moving', editor._update_toolbox_values);
editor.fabric.on('object:modified', editor._update_toolbox_values); editor.fabric.on('object:modified', editor._update_toolbox_values);
editor.fabric.on('object:rotating', editor._update_toolbox_values);
editor.fabric.on('object:scaling', editor._update_toolbox_values);
editor._update_toolbox(); editor._update_toolbox();
$("#toolbox-content-other").hide(); $("#toolbox-content-other").hide();
@@ -459,10 +457,7 @@ var editor = {
_update_toolbox_values: function () { _update_toolbox_values: function () {
var o = editor.fabric.getActiveObject(); var o = editor.fabric.getActiveObject();
if (!o) { if (!o) {
o = editor.fabric.getActiveGroup(); return;
if (!o) {
return;
}
} }
var bottom = editor.pdf_viewport.height - o.height * o.scaleY - o.top; var bottom = editor.pdf_viewport.height - o.height * o.scaleY - o.top;
if (o.downward) { if (o.downward) {
@@ -482,7 +477,7 @@ var editor = {
$("#toolbox-squaresize").val(editor._px2mm(o.height * o.scaleY).toFixed(2)); $("#toolbox-squaresize").val(editor._px2mm(o.height * o.scaleY).toFixed(2));
$("#toolbox-poweredby-style").val(o.content); $("#toolbox-poweredby-style").val(o.content);
} else if (o.type === "text" || o.type === "textarea") { } else if (o.type === "text" || o.type === "textarea") {
var col = (new fabric.Color(o.getFill()))._source; var col = (new fabric.Color(o.fill))._source;
$("#toolbox-col").val("#" + ((1 << 24) + (col[0] << 16) + (col[1] << 8) + col[2]).toString(16).slice(1)); $("#toolbox-col").val("#" + ((1 << 24) + (col[0] << 16) + (col[1] << 8) + col[2]).toString(16).slice(1));
$("#toolbox-fontsize").val(editor._px2pt(o.fontSize).toFixed(1)); $("#toolbox-fontsize").val(editor._px2pt(o.fontSize).toFixed(1));
$("#toolbox-lineheight").val(o.lineHeight || 1); $("#toolbox-lineheight").val(o.lineHeight || 1);
@@ -525,10 +520,7 @@ var editor = {
_update_values_from_toolbox: function (e) { _update_values_from_toolbox: function (e) {
var o = editor.fabric.getActiveObject(); var o = editor.fabric.getActiveObject();
if (!o) { if (!o) {
o = editor.fabric.getActiveGroup(); return;
if (!o) {
return;
}
} }
var new_top = editor.pdf_viewport.height - editor._mm2px($("#toolbox-position-y").val()) - o.height * o.scaleY; var new_top = editor.pdf_viewport.height - editor._mm2px($("#toolbox-position-y").val()) - o.height * o.scaleY;
@@ -543,10 +535,10 @@ var editor = {
if (o.type === "barcodearea") { if (o.type === "barcodearea") {
var new_h = editor._mm2px($("#toolbox-squaresize").val()); var new_h = editor._mm2px($("#toolbox-squaresize").val());
new_top += o.height * o.scaleY - new_h; new_top += o.height * o.scaleY - new_h;
o.setHeight(new_h); o.set('height', new_h);
o.setWidth(new_h); o.set('width', new_h);
o.setScaleX(1); o.set('scaleX', 1);
o.setScaleY(1); o.set('scaleY', 1);
o.set('top', new_top) o.set('top', new_top)
o.nowhitespace = $("#toolbox-qrwhitespace").prop("checked") || false; o.nowhitespace = $("#toolbox-qrwhitespace").prop("checked") || false;
@@ -576,39 +568,38 @@ var editor = {
var new_w = editor._mm2px($("#toolbox-width").val()); var new_w = editor._mm2px($("#toolbox-width").val());
var new_h = editor._mm2px($("#toolbox-height").val()); var new_h = editor._mm2px($("#toolbox-height").val());
new_top += o.height * o.scaleY - new_h; new_top += o.height * o.scaleY - new_h;
o.setHeight(new_h); o.set('height', new_h);
o.setWidth(new_w); o.set('width', new_w);
o.setScaleX(1); o.set('scaleX', 1);
o.setScaleY(1); o.set('scaleY', 1);
o.set('top', new_top) o.set('top', new_top)
o.content = $("#toolbox-imagecontent").val(); o.content = $("#toolbox-imagecontent").val();
} else if (o.type === "poweredby") { } else if (o.type === "poweredby") {
var new_h = Math.max(1, editor._mm2px($("#toolbox-squaresize").val())); var new_h = Math.max(1, editor._mm2px($("#toolbox-squaresize").val()));
new_top += o.height * o.scaleY - new_h; new_top += o.height * o.scaleY - new_h;
o.setWidth(new_h / o.height * o.width); o.set('width', new_h / o.height * o.width);
o.setHeight(new_h); o.set('height', new_h);
o.setScaleX(1); o.set('scaleX', 1);
o.setScaleY(1); o.set('scaleY', 1);
o.set('top', new_top) o.set('top', new_top)
if ($("#toolbox-poweredby-style").val() !== o.content) { if ($("#toolbox-poweredby-style").val() !== o.content) {
var data = editor.dump([o]); var data = editor.dump([o]);
data[0].content = $("#toolbox-poweredby-style").val(); data[0].content = $("#toolbox-poweredby-style").val();
var newo = editor._add_from_data(data[0]); var newo = editor._add_from_data(data[0]);
o.remove(); editor.fabric.remove(o);
editor.fabric.discardActiveGroup();
editor.fabric.discardActiveObject(); editor.fabric.discardActiveObject();
editor.fabric.setActiveObject(newo); editor.fabric.setActiveObject(newo);
} }
} else if (o.type === "textarea" || o.type === "text") { } else if (o.type === "textarea" || o.type === "text") {
o.setColor($("#toolbox-col").val()); o.set('fill', $("#toolbox-col").val());
o.setFontSize(editor._pt2px($("#toolbox-fontsize").val())); o.set('fontSize', editor._pt2px($("#toolbox-fontsize").val()));
o.setLineHeight($("#toolbox-lineheight").val() || 1); o.set('lineHeight', $("#toolbox-lineheight").val() || 1);
o.setFontFamily($("#toolbox-fontfamily").val()); o.set('fontFamily', $("#toolbox-fontfamily").val());
o.setFontWeight($("#toolbox").find("button[data-action=bold]").is('.active') ? 'bold' : 'normal'); o.set('fontWeight', $("#toolbox").find("button[data-action=bold]").is('.active') ? 'bold' : 'normal');
o.setFontStyle($("#toolbox").find("button[data-action=italic]").is('.active') ? 'italic' : 'normal'); o.set('fontStyle', $("#toolbox").find("button[data-action=italic]").is('.active') ? 'italic' : 'normal');
var align = $("#toolbox-align").find(".active").attr("data-action"); var align = $("#toolbox-align").find(".active").attr("data-action");
if (align) { if (align) {
o.setTextAlign(align); o.set('textAlign', align);
} }
o.downward = $("#toolbox").find("button[data-action=downward]").is('.active'); o.downward = $("#toolbox").find("button[data-action=downward]").is('.active');
o.rotate(parseFloat($("#toolbox-textrotation").val())); o.rotate(parseFloat($("#toolbox-textrotation").val()));
@@ -621,7 +612,7 @@ var editor = {
// user used dropdown to switch content-type, update value with value from i18n textarea // user used dropdown to switch content-type, update value with value from i18n textarea
$("#toolbox-content-other").val($("#toolbox-content-other-i18n textarea").val()); $("#toolbox-content-other").val($("#toolbox-content-other-i18n textarea").val());
} }
o.setText($("#toolbox-content-other").val()); o.set('text', $("#toolbox-content-other").val());
} else if ($("#toolbox-content").val() === "other_i18n") { } else if ($("#toolbox-content").val() === "other_i18n") {
if (e.target.id === "toolbox-content") { if (e.target.id === "toolbox-content") {
// user used dropdown to switch content-type, update value with value from "other" textarea // user used dropdown to switch content-type, update value with value from "other" textarea
@@ -631,11 +622,11 @@ var editor = {
$("#toolbox-content-other-i18n textarea").each(function () { $("#toolbox-content-other-i18n textarea").each(function () {
o.text_i18n[$(this).attr("lang")] = $(this).val(); o.text_i18n[$(this).attr("lang")] = $(this).val();
}); });
o.setText($("#toolbox-content-other-i18n textarea").first().val()); o.set('text', $("#toolbox-content-other-i18n textarea").first().val());
} else { } else {
o.setText(editor._get_text_sample($("#toolbox-content").val())); o.set('text', editor._get_text_sample($("#toolbox-content").val()));
} }
o.setWidth(editor._mm2px($("#toolbox-textwidth").val())); o.set('width', editor._mm2px($("#toolbox-textwidth").val()));
} }
// empty text-inputs if not in use // empty text-inputs if not in use
@@ -651,12 +642,12 @@ var editor = {
}, },
_update_toolbox: function () { _update_toolbox: function () {
if (editor.fabric.getActiveGroup()) { var selected = editor.fabric.getActiveObjects();
if (selected.length > 1) {
$("#toolbox").attr("data-type", "group"); $("#toolbox").attr("data-type", "group");
$("#toolbox-heading").text(gettext("Group of objects")); $("#toolbox-heading").text(gettext("Group of objects"));
var g = editor.fabric.getActiveGroup(); } else if (selected.length == 1) {
} else if (editor.fabric.getActiveObject()) { var o = selected[0];
var o = editor.fabric.getActiveObject();
$("#toolbox").attr("data-type", o.type); $("#toolbox").attr("data-type", o.type);
if (o.type === "textarea" || o.type === "text") { if (o.type === "textarea" || o.type === "text") {
$("#toolbox-heading").text(gettext("Text object")); $("#toolbox-heading").text(gettext("Text object"));
@@ -716,13 +707,13 @@ var editor = {
var rect = new fabric.Poweredby({ var rect = new fabric.Poweredby({
left: 100, left: 100,
top: 100, top: 100,
width: 205, height: 629,
height: 126, width: 1024,
lockRotation: true, lockRotation: true,
lockUniScaling: true,
content: content content: content
}); });
rect.setControlsVisibility({'mtr': false}); rect.scaleToHeight(126);
rect.setControlsVisibility({'mtr': false, 'mb': false, 'mt': false, 'mr': false, 'ml': false});
editor.fabric.add(rect); editor.fabric.add(rect);
editor._create_savepoint(); editor._create_savepoint();
return rect; return rect;
@@ -751,13 +742,12 @@ var editor = {
width: 100, width: 100,
height: 100, height: 100,
lockRotation: true, lockRotation: true,
lockUniScaling: true,
fill: '#666', fill: '#666',
content: $(this).attr("data-content"), content: $(this).attr("data-content"),
text: '', text: '',
nowhitespace: true, nowhitespace: true,
}); });
rect.setControlsVisibility({'mtr': false}); rect.setControlsVisibility({'mtr': false, 'mb': false, 'mt': false, 'mr': false, 'ml': false});
editor.fabric.add(rect); editor.fabric.add(rect);
editor._create_savepoint(); editor._create_savepoint();
return rect; return rect;
@@ -765,18 +755,17 @@ var editor = {
_cut: function () { _cut: function () {
editor._history_modification_in_progress = true; editor._history_modification_in_progress = true;
var thing = editor.fabric.getActiveObject() ? editor.fabric.getActiveObject() : editor.fabric.getActiveGroup(); var thing = editor.fabric.getActiveObject();
if (thing.type === "group") { if (thing.type === "activeSelection") {
editor.clipboard = editor.dump(thing._objects); editor.clipboard = editor.dump(thing._objects);
thing.forEachObject(function (o) { thing.forEachObject(function (o) {
o.remove(); editor.fabric.remove(o);
}); });
thing.remove(); editor.fabric.remove(thing);
} else { } else {
editor.clipboard = editor.dump([thing]); editor.clipboard = editor.dump([thing]);
thing.remove(); editor.fabric.remove(thing);
} }
editor.fabric.discardActiveGroup();
editor.fabric.discardActiveObject(); editor.fabric.discardActiveObject();
editor._history_modification_in_progress = false; editor._history_modification_in_progress = false;
editor._create_savepoint(); editor._create_savepoint();
@@ -784,8 +773,8 @@ var editor = {
_copy: function () { _copy: function () {
editor._history_modification_in_progress = true; editor._history_modification_in_progress = true;
var thing = editor.fabric.getActiveObject() ? editor.fabric.getActiveObject() : editor.fabric.getActiveGroup(); var thing = editor.fabric.getActiveObject();
if (thing.type === "group") { if (thing.type === "activeSelection") {
editor.clipboard = editor.dump(thing._objects); editor.clipboard = editor.dump(thing._objects);
} else { } else {
editor.clipboard = editor.dump([thing]); editor.clipboard = editor.dump([thing]);
@@ -805,16 +794,9 @@ var editor = {
objs.push(editor._add_from_data(editor.clipboard[i])); objs.push(editor._add_from_data(editor.clipboard[i]));
} }
editor.fabric.discardActiveObject(); editor.fabric.discardActiveObject();
editor.fabric.discardActiveGroup();
if (editor.clipboard.length > 1) { if (editor.clipboard.length > 1) {
var group = new fabric.Group(objs, { var selection = new fabric.ActiveSelection(objs, {canvas: editor.fabric});
originX: 'left', editor.fabric.setActiveObject(selection);
originY: 'top',
left: 100,
top: 100,
});
group.setCoords();
editor.fabric.setActiveGroup(group);
} else { } else {
editor.fabric.setActiveObject(objs[0]); editor.fabric.setActiveObject(objs[0]);
} }
@@ -823,15 +805,15 @@ var editor = {
}, },
_delete: function () { _delete: function () {
var thing = editor.fabric.getActiveObject() ? editor.fabric.getActiveObject() : editor.fabric.getActiveGroup(); var thing = editor.fabric.getActiveObject();
if (thing.type === "group") { if (thing.type === "activeSelection") {
thing.forEachObject(function (o) { thing.forEachObject(function (o) {
o.remove(); editor.fabric.remove(o);
}); });
thing.remove(); editor.fabric.remove(thing);
editor.fabric.discardActiveGroup(); editor.fabric.discardActiveObject();
} else { } else {
thing.remove(); editor.fabric.remove(thing);
editor.fabric.discardActiveObject(); editor.fabric.discardActiveObject();
} }
editor._create_savepoint(); editor._create_savepoint();
@@ -839,7 +821,7 @@ var editor = {
_on_keydown: function (e) { _on_keydown: function (e) {
var step = e.shiftKey ? editor._mm2px(10) : editor._mm2px(1); var step = e.shiftKey ? editor._mm2px(10) : editor._mm2px(1);
var thing = editor.fabric.getActiveObject() ? editor.fabric.getActiveObject() : editor.fabric.getActiveGroup(); var thing = editor.fabric.getActiveObject();
if ($("#source-container").is(':visible')) { if ($("#source-container").is(':visible')) {
return true; return true;
} }
@@ -921,12 +903,8 @@ var editor = {
}, },
_selectAll: function () { _selectAll: function () {
var group = new fabric.Group(editor.fabric.getObjects(), { var selection = new fabric.ActiveSelection(editor.fabric._objects, {canvas: editor.fabric});
originX: 'center', editor.fabric.setActiveObject(selection);
originY: 'center',
});
group.setCoords();
editor.fabric.setActiveGroup(group);
}, },
_undo: function undo() { _undo: function undo() {