DHTML WYSIWYG-control for PDF-relations

ChangeLog

@@ -5,6 +5,14 @@ phpMyAdmin - Changelog
 $Id$
 $Source$
 
+2003-06-23 Garvin Hicking <me@supergarv.de>
+    * ChangeLog, Documentation.html, config.inc.php3, pdf_pages.php3,
+      css/phpmyadmin.css.php3, libraries/common.lib.php3, 
+      libraries/config_import.lib.php3, libraries/dom-drag.js,
+      libraries/functions.js: Added Patch #757907: DHTML WYSIWYG-control 
+      for PDF-relation setup. Based on DOM-drag.js, a library provided
+      by Aaron Boodman (youngpup.net).
+    
 2003-06-23 Alexander M. Turek  <rabus@users.sourceforge.net>
     * lang/arabic-*.inc.php3, lang/czech-*.inc.php3, lang/finnish-*.inc.php3,
       lang/french-*.inc.php3, lang/georgian-utf-8.inc.php3,

Documentation.html

@@ -1645,6 +1645,31 @@ $cfg['PmaAbsoluteUri'] = (!empty($_SERVER['HTTPS']) ? 'https' : 'http') . '://'
     <br /><br />
     </dd>
 
+    <dt><b>$cfg['WYSIWYG-PDF'] </b>boolean</dt>
+    <dd>
+        Utilizes a WYSIWYG editing control to easily place elements of a PDF page.
+        By clicking on the button 'toggle Drag and Drop area' on the page wher you
+        edit x/y coordinates of those elements you can activate a scratchboard where
+        all your elements are placed. By clicking on an element, you can move them
+        around in the pre-defined area and the x/y coordinates will get updated
+        dynamically. Likewise, when entering a new position directly into the
+        input field, the new position in the scratchboard changes after your
+        cursors leaves the input field.<br />
+        You have to click on the 'OK'-button below the tables to save the new positions.
+        If you want to place a new element, first add it to the table of elements and
+        then you can drag the new element around.<br />
+        By changing the paper size and the orientation you can change the size of the
+        scratchboard as well. You can do so by just changing the dropdown field below,
+        and the scratchboard will resize automatically, without interfering with the
+        current placement of the elements.<br />
+        If ever an element gets out of range you can either enlarge the paper size
+        or click on the 'reset' button to place all elements below each other.<br />
+        <b>NOTE:</b> You have to use a recent browser like IE6 or Mozilla to get this control
+        to work. The basic Drag&amp;Drop script functionality was kindly borrowed from www.youngpup.net and
+        is underlying so specific license.
+    <br /><br />
+    </dd>
+
     <dt><b>$cfg['SQP']['fmtType']</b> string [<tt>html</tt>|<tt>none</tt>]</dt>
     <dd>
     The main use of the new SQL Parser is to pretty-print SQL queries. By

config.inc.php3

@@ -471,6 +471,8 @@ $cfg['QueryHistoryMax']     = 25;           // When using DB-based query history
 $cfg['BrowseMIME']          = TRUE;         // Use MIME-Types (stored in column comments table) for
 $cfg['MaxExactCount']       = 20000;        // When approximate count < this, PMA will get exact count for
                                             // table rows.
+$cfg['WYSIWYG-PDF']         = TRUE;         // Utilize DHTML/JS capabilities to allow WYSIWYG editing of
+                                            // the PDF page editor. Requires an IE6/Mozilla based browser.
 
 /**
  * SQL Query box settings

css/phpmyadmin.css.php3

@@ -190,6 +190,29 @@ fieldset fieldset {
     margin:     0.8em;
 }
 
+.pdflayout {
+    overflow:         hidden;
+    clip:             inherit;
+    background-color: #FFFFFF;
+    display:          none;
+    border:           1px solid #000000;
+    position:         relative;
+}
+
+.pdflayout_table {
+    background:       <?php echo $GLOBALS['cfg']['ThBgcolor']; ?>;
+    color:            #000000;
+    overflow:         hidden;
+    clip:             inherit;
+    z-index:          2;
+    display:          inline;
+    visibility:       inherit;
+    cursor:           move;
+    position:         absolute; 
+    font-size:        <?php echo $font_smaller; ?>;
+    border:           1px dashed #000000;
+}
+
 .print{font-family:arial;font-size:8pt;}
 
 .syntax {font-family: sans-serif; font-size: <?php echo $font_smaller; ?>;}

libraries/common.lib.php3

@@ -138,7 +138,7 @@ h1    {font-family: sans-serif; font-size: large; font-weight: bold}
      * Includes compatibility code for older config.inc.php3 revisions
      * if necessary
      */
-    if (!isset($cfg['FileRevision']) || (int) substr($cfg['FileRevision'], 13, 3) < 185) {
+    if (!isset($cfg['FileRevision']) || (int) substr($cfg['FileRevision'], 13, 3) < 188) {
         include('./libraries/config_import.lib.php3');
     }
 

libraries/config_import.lib.php3

@@ -741,6 +741,10 @@ if (!defined('PMA_CONFIG_IMPORT_LIB_INCLUDED')) {
         $cfg['MaxExactCount'] = 20000;
     }
 
+    if (!isset($cfg['WYSIWYG-PDF'])) {
+        $cfg['WYSIWYG-PDF'] = TRUE;
+    }
+
     if (!isset($cfg['ShowTooltipAliasDB'])) {
         $cfg['ShowTooltipAliasDB'] = FALSE;
     }

libraries/dom-drag.js

@@ -0,0 +1,121 @@
+/**************************************************
+ * dom-drag.js
+ * 09.25.2001
+ * www.youngpup.net
+ **************************************************
+ * 10.28.2001 - fixed minor bug where events
+ * sometimes fired off the handle, not the root.
+ **************************************************/
+
+var Drag = {
+
+	obj : null,
+
+	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
+	{
+		o.onmousedown	= Drag.start;
+
+		o.hmode			= bSwapHorzRef ? false : true ;
+		o.vmode			= bSwapVertRef ? false : true ;
+
+		o.root = oRoot && oRoot != null ? oRoot : o ;
+
+		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
+		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
+		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
+		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";
+
+		o.minX	= typeof minX != 'undefined' ? minX : null;
+		o.minY	= typeof minY != 'undefined' ? minY : null;
+		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
+		o.maxY	= typeof maxY != 'undefined' ? maxY : null;
+
+		o.xMapper = fXMapper ? fXMapper : null;
+		o.yMapper = fYMapper ? fYMapper : null;
+
+		o.root.onDragStart	= new Function();
+		o.root.onDragEnd	= new Function();
+		o.root.onDrag		= new Function();
+	},
+
+	start : function(e)
+	{
+		var o = Drag.obj = this;
+		e = Drag.fixE(e);
+		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
+		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+		o.root.onDragStart(x, y);
+
+		o.lastMouseX	= e.clientX;
+		o.lastMouseY	= e.clientY;
+
+		if (o.hmode) {
+			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
+			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
+		} else {
+			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
+			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
+		}
+
+		if (o.vmode) {
+			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
+			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
+		} else {
+			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
+			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
+		}
+
+		document.onmousemove	= Drag.drag;
+		document.onmouseup		= Drag.end;
+
+		return false;
+	},
+
+	drag : function(e)
+	{
+		e = Drag.fixE(e);
+		var o = Drag.obj;
+
+		var ey	= e.clientY;
+		var ex	= e.clientX;
+		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
+		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
+		var nx, ny;
+
+		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
+		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
+		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
+		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);
+
+		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
+		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));
+
+		if (o.xMapper)		nx = o.xMapper(y)
+		else if (o.yMapper)	ny = o.yMapper(x)
+
+		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
+		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
+		Drag.obj.lastMouseX	= ex;
+		Drag.obj.lastMouseY	= ey;
+
+		Drag.obj.root.onDrag(nx, ny);
+		return false;
+	},
+
+	end : function()
+	{
+		document.onmousemove = null;
+		document.onmouseup   = null;
+		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
+									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
+		Drag.obj = null;
+	},
+
+	fixE : function(e)
+	{
+		if (typeof e == 'undefined') e = window.event;
+		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
+		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
+		return e;
+	}
+};

libraries/functions.js

@@ -701,3 +701,216 @@ function getElement(e,f){
     }
     return document.getElementById(e);
 }
+
+/**
+  * Refresh the WYSIWYG-PDF scratchboard after changes have been made
+  */
+function refreshDragOption(e) {
+    myid = getElement(e);
+    if (myid.style.visibility == 'visible') {
+        refreshLayout();
+    }
+}
+
+/**
+  * Refresh/resize the WYSIWYG-PDF scratchboard
+  */
+function refreshLayout() {
+        myid = getElement('pdflayout');
+
+        if (document.pdfoptions.orientation.value == 'P') {
+            posa = 'x';
+            posb = 'y';
+        } else {
+            posa = 'y';
+            posb = 'x';
+        }
+
+        myid.style.width = pdfPaperSize(document.pdfoptions.paper.value, posa) + 'px';
+        myid.style.height = pdfPaperSize(document.pdfoptions.paper.value, posb) + 'px';
+}
+
+/**
+  * Show/hide the WYSIWYG-PDF scratchboard
+  */
+function ToggleDragDrop(e) {
+    myid = getElement(e);
+
+    if (myid.style.visibility == 'hidden') {
+        init();
+        myid.style.visibility = 'visible';
+        myid.style.display = 'block';
+        document.edcoord.showwysiwyg.value = '1';
+    } else {
+        myid.style.visibility = 'hidden';
+        myid.style.display = 'none';
+        document.edcoord.showwysiwyg.value = '0';
+    }
+}
+
+/**
+  * PDF scratchboard: When a position is entered manually, update
+  * the fields inside the scratchboard.
+  */
+function dragPlace(no, axis, value) {
+    if (axis == 'x') {
+        getElement("table_" + no).style.left = value + 'px';
+    } else {
+        getElement("table_" + no).style.top  = value + 'px';
+    }
+}
+
+/**
+  * Returns paper sizes for a given format
+  */
+function pdfPaperSize(format, axis) {
+    switch (format) {
+        case '4A0':
+            if (axis == 'x') return 4767.87; else return 6740.79;
+            break;
+        case '2A0':
+            if (axis == 'x') return 3370.39; else return 4767.87;
+            break;
+        case 'A0':
+            if (axis == 'x') return 2383.94; else return 3370.39;
+            break;
+        case 'A1':
+            if (axis == 'x') return 1683.78; else return 2383.94;
+            break;
+        case 'A2':
+            if (axis == 'x') return 1190.55; else return 1683.78;
+            break;
+        case 'A3':
+            if (axis == 'x') return 841.89; else return 1190.55;
+            break;
+        case 'A4':
+            if (axis == 'x') return 595.28; else return 841.89;
+            break;
+        case 'A5':
+            if (axis == 'x') return 419.53; else return 595.28;
+            break;
+        case 'A6':
+            if (axis == 'x') return 297.64; else return 419.53;
+            break;
+        case 'A7':
+            if (axis == 'x') return 209.76; else return 297.64;
+            break;
+        case 'A8':
+            if (axis == 'x') return 147.40; else return 209.76;
+            break;
+        case 'A9':
+            if (axis == 'x') return 104.88; else return 147.40;
+            break;
+        case 'A10':
+            if (axis == 'x') return 73.70; else return 104.88;
+            break;
+        case 'B0':
+            if (axis == 'x') return 2834.65; else return 4008.19;
+            break;
+        case 'B1':
+            if (axis == 'x') return 2004.09; else return 2834.65;
+            break;
+        case 'B2':
+            if (axis == 'x') return 1417.32; else return 2004.09;
+            break;
+        case 'B3':
+            if (axis == 'x') return 1000.63; else return 1417.32;
+            break;
+        case 'B4':
+            if (axis == 'x') return 708.66; else return 1000.63;
+            break;
+        case 'B5':
+            if (axis == 'x') return 498.90; else return 708.66;
+            break;
+        case 'B6':
+            if (axis == 'x') return 354.33; else return 498.90;
+            break;
+        case 'B7':
+            if (axis == 'x') return 249.45; else return 354.33;
+            break;
+        case 'B8':
+            if (axis == 'x') return 175.75; else return 249.45;
+            break;
+        case 'B9':
+            if (axis == 'x') return 124.72; else return 175.75;
+            break;
+        case 'B10':
+            if (axis == 'x') return 87.87; else return 124.72;
+            break;
+        case 'C0':
+            if (axis == 'x') return 2599.37; else return 3676.54;
+            break;
+        case 'C1':
+            if (axis == 'x') return 1836.85; else return 2599.37;
+            break;
+        case 'C2':
+            if (axis == 'x') return 1298.27; else return 1836.85;
+            break;
+        case 'C3':
+            if (axis == 'x') return 918.43; else return 1298.27;
+            break;
+        case 'C4':
+            if (axis == 'x') return 649.13; else return 918.43;
+            break;
+        case 'C5':
+            if (axis == 'x') return 459.21; else return 649.13;
+            break;
+        case 'C6':
+            if (axis == 'x') return 323.15; else return 459.21;
+            break;
+        case 'C7':
+            if (axis == 'x') return 229.61; else return 323.15;
+            break;
+        case 'C8':
+            if (axis == 'x') return 161.57; else return 229.61;
+            break;
+        case 'C9':
+            if (axis == 'x') return 113.39; else return 161.57;
+            break;
+        case 'C10':
+            if (axis == 'x') return 79.37; else return 113.39;
+            break;
+        case 'RA0':
+            if (axis == 'x') return 2437.80; else return 3458.27;
+            break;
+        case 'RA1':
+            if (axis == 'x') return 1729.13; else return 2437.80;
+            break;
+        case 'RA2':
+            if (axis == 'x') return 1218.90; else return 1729.13;
+            break;
+        case 'RA3':
+            if (axis == 'x') return 864.57; else return 1218.90;
+            break;
+        case 'RA4':
+            if (axis == 'x') return 609.45; else return 864.57;
+            break;
+        case 'SRA0':
+            if (axis == 'x') return 2551.18; else return 3628.35;
+            break;
+        case 'SRA1':
+            if (axis == 'x') return 1814.17; else return 2551.18;
+            break;
+        case 'SRA2':
+            if (axis == 'x') return 1275.59; else return 1814.17;
+            break;
+        case 'SRA3':
+            if (axis == 'x') return 907.09; else return 1275.59;
+            break;
+        case 'SRA4':
+            if (axis == 'x') return 637.80; else return 907.09;
+            break;
+        case 'LETTER':
+            if (axis == 'x') return 612.00; else return 792.00;
+            break;
+        case 'LEGAL':
+            if (axis == 'x') return 612.00; else return 1008.00;
+            break;
+        case 'EXECUTIVE':
+            if (axis == 'x') return 521.86; else return 756.00;
+            break;
+        case 'FOLIO':
+            if (axis == 'x') return 612.00; else return 936.00;
+            break;
+    } // end switch
+}

pdf_pages.php3

@@ -285,6 +285,67 @@ if ($cfgRelation['pdfwork']) {
 <hr />
 
 <h2><?php echo $strSelectTables ;?></h2>
+
+<?php
+$page_query = 'SELECT * FROM ' . PMA_backquote($cfgRelation['table_coords'])
+            . ' WHERE db_name = \'' . PMA_sqlAddslashes($db) . '\''
+            . ' AND pdf_page_number = ' . $chpage;
+$page_rs    = PMA_query_as_cu($page_query);
+$array_sh_page = array();
+$draginit = '';
+$reset_draginit = '';
+$i = 0;
+while ($temp_sh_page = @PMA_mysql_fetch_array($page_rs)) {
+    $array_sh_page[] = $temp_sh_page;
+}
+reset($array_sh_page);
+
+// garvin: Display WYSIWYG-PDF parts?
+if ($cfg['WYSIWYG-PDF']) {
+?>
+<script type="text/javascript" src="./libraries/dom-drag.js"></script>
+<form method="post" action="pdf_pages.php3" name="dragdrop">
+<input type="button" name="dragdrop" value="toggle Drag and Drop area" onclick="ToggleDragDrop('pdflayout');" />
+ <input type="button" name="dragdropreset" value="reset" onclick="resetDrag();" />
+</form>
+<div id="pdflayout" class="pdflayout" style="visibility: hidden;">
+<?php
+while (list($key, $temp_sh_page) = each($array_sh_page)) {
+    $drag_x = $temp_sh_page['x'];
+    $drag_y = $temp_sh_page['y'];
+    
+    $draginit       .= '    Drag.init(getElement("table_' . $i . '"), null, 0, parseInt(myid.style.width)-2, 0, parseInt(myid.style.height)-5);' . "\n";
+    $draginit       .= '    getElement("table_' . $i . '").onDrag = function (x, y) { document.edcoord.elements["c_table_' . $i . '[x]"].value = parseInt(x); document.edcoord.elements["c_table_' . $i . '[y]"].value = parseInt(y) }' . "\n";
+    $draginit       .= '    getElement("table_' . $i . '").style.left = "' . $drag_x . 'px";' . "\n";
+    $draginit       .= '    getElement("table_' . $i . '").style.top  = "' . $drag_y . 'px";' . "\n";
+    $reset_draginit .= '    getElement("table_' . $i . '").style.left = "2px";' . "\n";
+    $reset_draginit .= '    getElement("table_' . $i . '").style.top  = "' . (15 * $i) . 'px";' . "\n";
+    $reset_draginit .= '    document.edcoord.elements["c_table_' . $i . '[x]"].value = "2"' . "\n";
+    $reset_draginit .= '    document.edcoord.elements["c_table_' . $i . '[y]"].value = "' . (15 * $i) . '"' . "\n";
+
+    echo '<div id="table_' . $i . '" class="pdflayout_table">' . $temp_sh_page['table_name'] . '</div>' . "\n";
+    $i++;
+}
+reset($array_sh_page);
+?>
+</div>
+<script type="text/javascript">
+<!--
+function init() {
+    refreshLayout();
+    myid = getElement('pdflayout');
+    <?php echo $draginit; ?>
+}
+
+function resetDrag() {
+    <?php echo $reset_draginit; ?>
+}
+// -->
+</script>
+<?php
+} // end if WYSIWYG-PDF
+?>
+
 <form method="post" action="pdf_pages.php3" name="edcoord">
     <?php echo PMA_generate_common_hidden_inputs($db, $table); ?>
     <input type="hidden" name="chpage" value="<?php echo $chpage; ?>" />
@@ -301,13 +362,9 @@ if ($cfgRelation['pdfwork']) {
             unset($ctable);
         }
 
-        $page_query = 'SELECT * FROM ' . PMA_backquote($cfgRelation['table_coords'])
-                    . ' WHERE db_name = \'' . PMA_sqlAddslashes($db) . '\''
-                    . ' AND pdf_page_number = ' . $chpage;
-        $page_rs    = PMA_query_as_cu($page_query);
 
         $i = 0;
-        while ($sh_page = @PMA_mysql_fetch_array($page_rs)) {
+        while (list($dummy_sh_page, $sh_page) = each($array_sh_page)) {
             $_mtab       = $sh_page['table_name'];
             $tabExist[$_mtab] = FALSE;
             echo "\n" . '    <tr ';
@@ -334,10 +391,10 @@ if ($cfgRelation['pdfwork']) {
                  . "\n" . '            <input type="checkbox" name="c_table_' . $i . '[delete]" value="y" />' . $strDelete;
             echo "\n" . '        </td>';
             echo "\n" . '        <td>'
-                 . "\n" . '            <input type="text" name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
+                 . "\n" . '            <input type="text" ' . ($cfg['WYSIWYG-PDF'] ? 'onchange="dragPlace(' . $i . ', \'x\', this.value)"' : '') . ' name="c_table_' . $i . '[x]" value="' . $sh_page['x'] . '" />';
             echo "\n" . '        </td>';
             echo "\n" . '        <td>'
-                 . "\n" . '            <input type="text" name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
+                 . "\n" . '            <input type="text" ' . ($cfg['WYSIWYG-PDF'] ? 'onchange="dragPlace(' . $i . ', \'y\', this.value)"' : '') . ' name="c_table_' . $i . '[y]" value="' . $sh_page['y'] . '" />';
             echo "\n" . '        </td>';
             echo "\n" . '    </tr>';
             $i++;
@@ -371,6 +428,7 @@ if ($cfgRelation['pdfwork']) {
         echo "\n" . '    </table>' . "\n";
 
         echo "\n" . '    <input type="hidden" name="c_table_rows" value="' . ($i + 1) . '" />';
+        echo ($cfg['WYSIWYG-PDF'] ? "\n" . '    <input type="hidden" name="showwysiwyg" value="' . ((isset($showwysiwyg) && $showwysiwyg == '1') ? '1' : '0') . '" />' : '');
         echo "\n" . '    <input type="submit" value="' . $strGo . '" />';
         echo "\n" . '</form>' . "\n\n";
     } // end if
@@ -411,7 +469,7 @@ if ($cfgRelation['pdfwork']) {
        || ($do == 'choosepage' && isset($chpage))
        || ($do == 'createpage' && isset($chpage)))) {
         ?>
-<form method="post" action="pdf_schema.php3">
+<form method="post" action="pdf_schema.php3" name="pdfoptions">
     <?php echo PMA_generate_common_hidden_inputs($db); ?>
     <input type="hidden" name="pdf_page_number" value="<?php echo $chpage; ?>" />
     <?php echo $strDisplayPDF; ?>&nbsp;:<br />
@@ -426,12 +484,12 @@ if ($cfgRelation['pdfwork']) {
     <input type="checkbox" name="with_doc" id="with_doc" checked="checked" />
     <label for="with_doc"><?php echo $strDataDict; ?></label> <br />
     <?php echo $strShowDatadictAs; ?>
-    <select name="orientation">
+    <select name="orientation" <?php echo ($cfg['WYSIWYG-PDF'] ? 'onchange="refreshDragOption(\'pdflayout\');"' : ''); ?>>
         <option value="L"><?php echo $strLandscape;?></option>
         <option value="P"><?php echo $strPortrait;?></option>
     </select><br />
     <?php echo $strPaperSize; ?>
-    <select name="paper">
+    <select name="paper" <?php echo ($cfg['WYSIWYG-PDF'] ? 'onchange="refreshDragOption(\'pdflayout\');"' : ''); ?>>
 <?php
     while (list($key,$val) = each($cfg['PDFPageSizes'])) {
         echo '<option value="' . $val . '"';
@@ -445,6 +503,15 @@ if ($cfgRelation['pdfwork']) {
     &nbsp;&nbsp;<input type="submit" value="<?php echo $strGo; ?>" />
 </form>
         <?php
+        if ((isset($showwysiwyg) && $showwysiwyg == '1')) {
+        ?>
+<script type="text/javascript">
+<!--
+ToggleDragDrop('pdflayout');    
+// -->
+</script>
+        <?php
+        }
     } // end if
 } // end if ($cfgRelation['pdfwork'])