Improve text rendering options in PDF editor (#1540)

Improve text rendering options in PDF editor

src/pretix/base/pdf.py

@@ -472,10 +472,21 @@ class Renderer:
         text = "<br/>".join(get_display(reshaper.reshape(l)) for l in text.split("<br/>"))
 
         p = Paragraph(text, style=style)
-        p.wrapOn(canvas, float(o['width']) * mm, 1000 * mm)
+        w, h = p.wrapOn(canvas, float(o['width']) * mm, 1000 * mm)
         # p_size = p.wrap(float(o['width']) * mm, 1000 * mm)
         ad = getAscentDescent(font, float(o['fontsize']))
-        p.drawOn(canvas, float(o['left']) * mm, float(o['bottom']) * mm - ad[1])
+        canvas.saveState()
+        # The ascent/descent offsets here are not really proven to be correct, they're just empirical values to get
+        # reportlab render similarly to browser canvas.
+        if o.get('downward', False):
+            canvas.translate(float(o['left']) * mm, float(o['bottom']) * mm)
+            canvas.rotate(o.get('rotation', 0) * -1)
+            p.drawOn(canvas, 0, -h - ad[1] / 2)
+        else:
+            canvas.translate(float(o['left']) * mm, float(o['bottom']) * mm + h)
+            canvas.rotate(o.get('rotation', 0) * -1)
+            p.drawOn(canvas, 0, -h - ad[1])
+        canvas.restoreState()
 
     def draw_page(self, canvas: Canvas, order: Order, op: OrderPosition):
         for o in self.layout:

src/pretix/control/templates/pretixcontrol/pdf/index.html

@@ -264,6 +264,12 @@
                                         <span class="fa fa-italic"></span>
                                     </button>
                                 </div>
+                                <div class="btn-group" role="group">
+                                    <button type="button" class="btn btn-default toggling" data-action="downward"
+                                        data-toggle="tooltip" title="{% trans "Flow multiple lines downward from specified position" %}">
+                                        <span class="fa fa-caret-square-o-down"></span>
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -306,11 +312,16 @@
                         </div>
                     </div>
                     <div class="row control-group text">
-                        <div class="col-sm-12">
+                        <div class="col-sm-6">
                             <label>{% trans "Width (mm)" %}</label><br>
                             <input type="number" value="13" class="input-block-level form-control" step="0.01"
                                     id="toolbox-textwidth">
                         </div>
+                        <div class="col-sm-6">
+                            <label>{% trans "Rotation (°)" %}</label><br>
+                            <input type="number" value="0" class="input-block-level form-control" step="0.1"
+                                    id="toolbox-textrotation">
+                        </div>
                     </div>
                     <div class="row control-group poweredby">
                         <div class="col-sm-12">

src/pretix/static/pretixcontrol/js/ui/editor.js

@@ -117,11 +117,15 @@ var editor = {
             }
             if (o.type === "textarea") {
                 var col = (new fabric.Color(o.getFill()))._source;
+                var bottom = editor.pdf_viewport.height - o.height - top;
+                if (o.downward) {
+                    bottom = editor.pdf_viewport.height - top;
+                }
                 d.push({
                     type: "textarea",
                     locale: $("#pdf-info-locale").val(),
                     left: editor._px2mm(left).toFixed(2),
-                    bottom: editor._px2mm(editor.pdf_viewport.height - o.height - top).toFixed(2),
+                    bottom: editor._px2mm(bottom).toFixed(2),
                     fontsize: editor._px2pt(o.getFontSize()).toFixed(1),
                     color: col,
                     //lineheight: o.lineHeight,
@@ -129,8 +133,10 @@ var editor = {
                     bold: o.fontWeight === 'bold',
                     italic: o.fontStyle === 'italic',
                     width: editor._px2mm(o.width).toFixed(2),
+                    downward: o.downward || false,
                     content: o.content,
                     text: o.text,
+                    rotation: o.angle,
                     align: o.textAlign,
                 });
             } else  if (o.type === "barcodearea") {
@@ -172,8 +178,10 @@ var editor = {
             o.setFontWeight(d.bold ? 'bold' : 'normal');
             o.setFontStyle(d.italic ? 'italic' : 'normal');
             o.setWidth(editor._mm2px(d.width));
+            o.downward = d.downward || false;
             o.content = d.content;
             o.setTextAlign(d.align);
+            o.rotate(d.rotation);
             if (d.content === "other") {
                 o.setText(d.text);
             } else {
@@ -186,6 +194,9 @@ var editor = {
         }
 
         var new_top = editor.pdf_viewport.height - editor._mm2px(d.bottom) - (o.height * o.scaleY);
+        if (o.downward) {
+            new_top = editor.pdf_viewport.height - editor._mm2px(d.bottom);
+        }
         o.set('left', editor._mm2px(d.left));
         o.set('top', new_top);
         o.setCoords();
@@ -268,6 +279,7 @@ var editor = {
         editor.fabric.on('object:selected', 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:rotating', editor._update_toolbox_values);
         editor.fabric.on('object:scaling', editor._update_toolbox_values);
         editor._update_toolbox();
 
@@ -322,8 +334,12 @@ var editor = {
                 return;
             }
         }
+        var bottom = editor.pdf_viewport.height - o.height * o.scaleY - o.top;
+        if (o.downward) {
+            bottom = editor.pdf_viewport.height - o.top;
+        }
         $("#toolbox-position-x").val(editor._px2mm(o.left).toFixed(2));
-        $("#toolbox-position-y").val(editor._px2mm(editor.pdf_viewport.height - o.height * o.scaleY - o.top).toFixed(2));
+        $("#toolbox-position-y").val(editor._px2mm(bottom).toFixed(2));
 
         if (o.type === "barcodearea") {
             $("#toolbox-squaresize").val(editor._px2mm(o.height * o.scaleY).toFixed(2));
@@ -338,10 +354,12 @@ var editor = {
             $("#toolbox-fontfamily").val(o.fontFamily);
             $("#toolbox").find("button[data-action=bold]").toggleClass('active', o.fontWeight === 'bold');
             $("#toolbox").find("button[data-action=italic]").toggleClass('active', o.fontStyle === 'italic');
+            $("#toolbox").find("button[data-action=downward]").toggleClass('active', o.downward || false);
             $("#toolbox").find("button[data-action=left]").toggleClass('active', o.textAlign === 'left');
             $("#toolbox").find("button[data-action=center]").toggleClass('active', o.textAlign === 'center');
             $("#toolbox").find("button[data-action=right]").toggleClass('active', o.textAlign === 'right');
             $("#toolbox-textwidth").val(editor._px2mm(o.width).toFixed(2));
+            $("#toolbox-textrotation").val((o.angle || 0.0).toFixed(1));
             if (o.type === "textarea") {
                 $("#toolbox-content").val(o.content);
                 $("#toolbox-content-other").toggle($("#toolbox-content").val() === "other");
@@ -364,6 +382,11 @@ var editor = {
         }
 
         var new_top = editor.pdf_viewport.height - editor._mm2px($("#toolbox-position-y").val()) - o.height * o.scaleY;
+        if (o.type === "textarea" || o.type === "text") {
+            if ($("#toolbox").find("button[data-action=downward]").is('.active')) {
+                new_top = editor.pdf_viewport.height - editor._mm2px($("#toolbox-position-y").val());
+            }
+        }
         o.set('left', editor._mm2px($("#toolbox-position-x").val()));
         o.set('top', new_top);
 
@@ -404,6 +427,8 @@ var editor = {
                 o.setTextAlign(align);
             }
             o.setWidth(editor._mm2px($("#toolbox-textwidth").val()));
+            o.downward = $("#toolbox").find("button[data-action=downward]").is('.active');
+            o.rotate(parseFloat($("#toolbox-textrotation").val()));
             $("#toolbox-content-other").toggle($("#toolbox-content").val() === "other");
             o.content = $("#toolbox-content").val();
             if ($("#toolbox-content").val() === "other") {
@@ -452,13 +477,14 @@ var editor = {
             left: 100,
             top: 100,
             width: editor._mm2px(50),
-            lockRotation: true,
+            lockRotation: false,
             fontFamily: 'Open Sans',
             lineHeight: 1,
             content: 'item',
             editable: false,
             fontSize: editor._pt2px(13)
         });
+        text.downward = true;
         text.setControlsVisibility({
             'tr': false,
             'tl': false,
@@ -468,7 +494,7 @@ var editor = {
             'mb': false,
             'mr': true,
             'ml': true,
-            'mtr': false
+            'mtr': true
         });
         editor.fabric.add(text);
         editor._create_savepoint();
@@ -584,6 +610,9 @@ var editor = {
     _on_keydown: function (e) {
         var step = e.shiftKey ? editor._mm2px(10) : editor._mm2px(1);
         var thing = editor.fabric.getActiveObject() ? editor.fabric.getActiveObject() : editor.fabric.getActiveGroup();
+        if ($("#source-container").is(':visible')) {
+            return true;
+        }
         switch (e.keyCode) {
             case 38:  /* Up arrow */
                 thing.set('top', thing.get('top') - step);