Proper file and gallery display

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

includes/AnnotationHandler.php

@@ -7,11 +7,11 @@ use Devium\Toml\Toml;
 use Devium\Toml\TomlError;
 use MediaWiki\MediaWikiServices;
 use Content;
-use Title;
+use MediaWiki\Title\Title;
 use CodeContentHandler;
 use MediaWiki\Content\Renderer\ContentParseParams;
 use ParserOutput;
-use Html;
+use MediaWiki\Html\Html;
 use IContextSource;
 use MediaWiki\Content\ValidationParams;
 use Status;
@@ -88,6 +88,8 @@ class AnnotationHandler extends CodeContentHandler {
     private function buildSvg($metadata) {
         //Set SVG UID-ish for element IDs
         $svgID = bin2hex(random_bytes(6));
+        self::console_log($svgID, true);
+        self::console_log(wfRandomString(12), true);
 
         //Check if the image to annotate has been set
         if (isset($metadata['baseImage'])) {
@@ -102,18 +104,20 @@ class AnnotationHandler extends CodeContentHandler {
         $vbHeight = 100;
         $vbWidth = 100;
         if ($baseImage) {
-            $baseImageUrl = $baseImage->getFullUrl();
+            $imageStr = 'data:image/png;base64,' . base64_encode(file_get_contents($baseImage->getLocalRefPath()));
             $baseHeight = $baseImage->getHeight();
             $baseWidth = $baseImage->getWidth();
             $baseAspect = $baseHeight / $baseWidth;
             $vbWidth = 100 / sqrt($baseAspect);
-            $vbHeight = $baseAspect * $vbWidth;
+            $fixScale = $baseWidth / 100 * sqrt($baseAspect);
+            self::console_log($fixScale, true);
+            //$vbHeight = $baseAspect * $vbWidth;
             $attrBase = array(
                 'class' => 'annot-base',
                 'preserveAspectRatio' => 'none',
-                'width' => $vbWidth,
+                'width' => '100%',
-                'height' => $vbHeight,
+                'height' => '100%',
-                'href' => $baseImageUrl
+                'href' => $imageStr
             );
             $elBaseImg = Html::rawElement('image', $attrBase);
             }
@@ -122,7 +126,7 @@ class AnnotationHandler extends CodeContentHandler {
         $attrSvg = array(
             'class' => 'annot-svg',
             'version' => '1.1',
-            'viewBox' => "0 0 {$vbWidth} {$vbHeight}",
+            'viewBox' => "0 0 {$baseWidth} {$baseHeight}",
             'xml:space' => 'preserve',
             'xmlns' => 'http://www.w3.org/2000/svg',
             'width' => $baseWidth,
@@ -131,12 +135,42 @@ class AnnotationHandler extends CodeContentHandler {
 
         );
 
+        if (isset($metadata['view'])) {
+            $viewLabels = self::getCompassLabels($metadata['view']['direction'], $metadata['view']['rostral']);
+            $attrCompass = array(
+                'id' => "compass{$svgID}",
+                'viewBox' => '0 0 100 100',
+                'preserveAspectRatio' => 'xMinYMin meet',
+                'refX' => 'left',
+                'refY' => 'top',
+                'style' => "font-family:'TeX Gyre DejaVu Math';font-size:11.686px;letter-spacing:0px;line-height:125%;text-align:center;text-anchor:middle;word-spacing:0px;"
+            );
+            $compass = array(
+                Html::openElement('symbol',$attrCompass)
+            );
+            $attrCompBack = array(
+                'cx' => '50',
+                'cy' => '50',
+                'r' => '50',
+                'style' => 'fill-opacity:.35;fill:#ffffff;'
+            );
+            array_push($compass,Html::rawElement('circle',$attrCompBack));
+            $attrCompBkArrow = array(
+                'd' => 'M 50,81.3 41.4,58.6 18.7,50 41.4,41.4 50,18.7 58.6,41.4 81.3,50 58.6,58.6 Z',
+                'style' => 'fill:#ffffff;stroke-width:1.5025'
+            );
+            array_push($compass, Html::rawElement('path',$attrCompBkArrow));
+
+            array_push($compass,Html::closeElement('symbol'));
+        }
+
         if (isset($metadata['annotation'])) {
-            $markers = [];
+            $annotations = [];
             $maskCircles = [];
             $leadLines = [];
             foreach($metadata['annotation'] as $label => $annot) {
                 if (isset($annot['position'])) {
+                    $marker = array(Html::openElement('g',array('transform' => "scale( {$fixScale} {$fixScale})")));
                     $attrMask = array(
                         'cx' => $annot['position']['0'],
                         'cy' => $annot['position']['1'],
@@ -154,14 +188,14 @@ class AnnotationHandler extends CodeContentHandler {
                         'fill' => (isset($annot['light']) && $annot['light']) ? 'white' : 'black'
                     );
                     $markCirc = Html::rawElement('circle',$attrMarkerCirc);
-                    array_push($markers,$markCirc);
+                    array_push($marker,$markCirc);
                     $attrMarkerText = array(
                         'x' => $annot['position']['0'], 
                         'y' => $annot['position']['1'],
                         'style' => "fill: {$markColor}; font-size: 5px; stroke-linejoin: bevel; stroke-width: .6968; text-align: center; text-anchor: middle; transform: translateY(1.5px);"
                     );
                     $markText = Html::rawElement('text',$attrMarkerText, isset($annot['label']) ? $annot['label'] : $label );
-                    array_push($markers,$markText);
+                    array_push($marker,$markText);
 
                     if(isset($annot['leader'])) {
                         foreach($annot['leader'] as $line) {
@@ -171,9 +205,11 @@ class AnnotationHandler extends CodeContentHandler {
                                 'style' => "fill-opacity:.35; fill: {$markColor}; stroke-linejoin:bevel; stroke-width:.4; stroke: {$markColor};"
                             );
                             $lineText = Html::rawElement('path', $lineAttr);
-                            array_push($leadLines, $lineText);
+                            array_push($marker, $lineText);
                         }
                     }
+                    array_push($marker,Html::closeElement('g'));
+                    array_push($annotations, implode($marker));
                 }
             }
             $attrMaskRect = array(
@@ -186,7 +222,7 @@ class AnnotationHandler extends CodeContentHandler {
             $svgDefs = Html::rawElement('defs',array(),$markMask);
         }
 
-        return Html::rawElement('svg', $attrSvg, $svgDefs . $elBaseImg . implode($markers) . implode($leadLines) );
+        return Html::rawElement('svg', $attrSvg, $svgDefs. implode($compass) . $elBaseImg . implode($annotations) );
     }
 
 	public function validateSave( Content $content, ValidationParams $validationParams ) {
@@ -233,6 +269,32 @@ class AnnotationHandler extends CodeContentHandler {
 		return $status;
 	}
 
+    /**
+     * Return the correct sequence of view compass labels based on the defined view
+     * 
+     * @param string $direction the defined view direction
+     * @param bool true if 'rostral' should be used in place of 'cranial'
+     * @return string[] sequence of view labels
+     */
+    private function getCompassLabels($direction = 'L', $rostral = false) {
+        self::console_log(print_r($direction,true), true);
+        if ($rostral && $direction == 'Cr') {
+            $direction = 'Ro';
+        }
+        $views = array(
+            'L' => array('L','D','Cd','V','Cr'),
+            'Lm' => array('L','D','Cd','V','Cr'),
+            'R' => array('R','D','Cr','V','Cd'),
+            'Rm' => array('R','D','Cr','V','Cd'),
+            'D' => array('D','Cr','R','Cd','L'),
+            'V' => array('V','Cr','L','Cd','R'),
+            'Cr' => array('Cr','D','L','V','R'),
+            'Ro' => array('Ro','D','L','V','R'),
+            'Cd' => array('Cd','D','R','V','L')
+        );
+	
+    	return $views[$direction];
+    }
     /**
      * Small helper function to display information on the browser console
      *