tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix svg text rotation in firefox 

Use the SVG transform attribute instead of the writing-mode attribute to support firefox.
This commit is contained in:
Matthias Jentsch 2014-07-22 11:26:35 +02:00
parent 0a500efd8a
commit 4b8bb99fa1
3 changed files with 91 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
library/Icinga/Chart/Axis.php
View File

@ -9,6 +9,7 @@ use Icinga\Chart\Primitive\Drawable;
use Icinga\Chart\Primitive\Line;
use Icinga\Chart\Primitive\Text;
use Icinga\Chart\Render\RenderContext;
use Icinga\Chart\Render\Rotator;
use Icinga\Chart\Unit\AxisUnit;
use Icinga\Chart\Unit\CalendarUnit;
use Icinga\Chart\Unit\LinearUnit;
@ -188,11 +189,11 @@ class Axis implements Drawable
$labelField->setFontSize('2.5em');
}
if ($this->labelRotationStyle === self::LABEL_ROTATE_DIAGONAL) {
$labelField = new Rotator($labelField, 45);
}
$labelField = $labelField->toSvg($ctx);
if ($this->labelRotationStyle === self::LABEL_ROTATE_DIAGONAL) {
$labelField = $this->rotate($ctx, $labelField, 45);
}
$group->appendChild($labelField);
if ($this->drawYGrid) {
@ -214,34 +215,6 @@ class Axis implements Drawable
}
}
/**
* Rotate the given element.
*
* @param RenderContext $ctx The rendering context
* @param DOMElement $el The element to rotate
* @param $degrees The rotation degrees
*
* @return DOMElement
*/
private function rotate(RenderContext $ctx, DOMElement $el, $degrees)
{
// Create a box containing the rotated element relative to the original text position
$container = $ctx->getDocument()->createElement('g');
$x = $el->getAttribute('x');
$y = $el->getAttribute('y');
$container->setAttribute('transform', 'translate(' . $x . ',' . $y . ')');
$el->removeAttribute('x');
$el->removeAttribute('y');
// Create a rotated box containing the text
$rotate = $ctx->getDocument()->createElement('g');
$rotate->setAttribute('transform', 'rotate(' . $degrees . ')');
$rotate->appendChild($el);
$container->appendChild($rotate);
return $container;
}
/**
* Render the vertical axis
*
@ -275,9 +248,9 @@ class Axis implements Drawable
if ($this->yLabel) {
$axisLabel = new Text(-8, 50, $this->yLabel);
$axisLabel->setFontSize('2em')
->setAdditionalStyle(Text::ORIENTATION_VERTICAL)
->setFontWeight('bold')
->setAlignment(Text::ALIGN_MIDDLE);
$axisLabel = new Rotator($axisLabel, 90);
$group->appendChild($axisLabel->toSvg($ctx));
}

10
library/Icinga/Chart/Primitive/Text.php
View File

@ -30,16 +30,6 @@ class Text extends Styleable implements Drawable
*/
const ALIGN_MIDDLE = 'middle';
/**
* Normal left to right orientation
*/
const ORIENTATION_HORIZONTAL = "";
/**
* Top down orientation (rotated by 90°)
*/
const ORIENTATION_VERTICAL = "writing-mode: tb;";
/**
* The x position of the Text
*

86
library/Icinga/Chart/Render/Rotator.php Normal file
View File

@ -0,0 +1,86 @@
<?php
/**
* Created by PhpStorm.
* User: mjentsch
* Date: 22.07.14
* Time: 10:17
*/
namespace Icinga\Chart\Render;
use Icinga\Chart\Render\RenderContext;
use Icinga\Chart\Primitive\Drawable;
use DOMElement;
/**
* Class Rotator
* @package Icinga\Chart\Render
*/
class Rotator implements Drawable
{
/**
* The drawable element to rotate
*
* @var Drawable
*/
private $element;
/**
* @var int
*/
private $degrees;
/**
* Wrap an element into a new instance of Rotator
*
* @param Drawable $element The element to rotate
* @param int $degrees The amount of degrees
*/
public function __construct(Drawable $element, $degrees)
{
$this->element = $element;
$this->degrees = $degrees;
}
/**
* Rotate the given element.
*
* @param RenderContext $ctx The rendering context
* @param DOMElement $el The element to rotate
* @param $degrees The amount of degrees
*
* @return DOMElement The rotated DOMElement
*/
private function rotate(RenderContext $ctx, DOMElement $el, $degrees)
{
// Create a box containing the rotated element relative to the original element position
$container = $ctx->getDocument()->createElement('g');
$x = $el->getAttribute('x');
$y = $el->getAttribute('y');
$container->setAttribute('transform', 'translate(' . $x . ',' . $y . ')');
$el->removeAttribute('x');
$el->removeAttribute('y');
// Put the element into a rotated group
//$rotate = $ctx->getDocument()->createElement('g');
$el->setAttribute('transform', 'rotate(' . $degrees . ')');
//$rotate->appendChild($el);
$container->appendChild($el);
return $container;
}
/**
* Create the SVG representation from this Drawable
*
* @param RenderContext $ctx The context to use for rendering
*
* @return DOMElement The SVG Element
*/
public function toSvg(RenderContext $ctx)
{
$el = $this->element->toSvg($ctx);
return $this->rotate($ctx, $el, $this->degrees);
}
}