diff --git a/extension.json b/extension.json
index e338f18..43e465f 100644
--- a/extension.json
+++ b/extension.json
@@ -3,7 +3,7 @@
"author": "Justin Georgi",
"url": "https://gitea.azgeorgis.net/jgeorgi/mwModelViewer",
"description": "This extension allows .glb and .gltf files to be added, displayed, and annotated in MediaWiki",
- "version": "0.0.5",
+ "version": "0.0.6",
"license-name": "MIT",
"type": "media",
"manifest_version": 2,
@@ -17,7 +17,7 @@
"MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit",
"MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension",
"BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay",
- "ImageBeforeProduceHTML": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageBeforeProduceHTML",
+ "ImageOpenShowImageInlineBefore": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageOpenShowImageInlineBefore",
"AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview"
},
"ResourceFileModulePaths": {
diff --git a/includes/GlModelHandler.php b/includes/GlModelHandler.php
index 1346df3..49b626d 100644
--- a/includes/GlModelHandler.php
+++ b/includes/GlModelHandler.php
@@ -2,6 +2,7 @@
namespace MediaWiki\Extension\GlModelViewer;
use ImageHandler;
+use Html;
class GlModelHandler extends ImageHandler {
/**
@@ -35,16 +36,25 @@ class GlModelHandler extends ImageHandler {
* @return MediaTransformOutput
*/
public function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) {
- echo '';
+ return new GlModelTransformOutput($image, $params);
+ }
- return new GlModelTransformOutput($image, ['type' => 'glb']);
- }
+ /**
+ * Check the incoming media parameters
+ *
+ * @param string $name
+ * @param string $value
+ * @return bool
+ */
+ public function validateParam( $name, $value ) {
+ if (in_array($name, ['width', 'height'])) {
+ return $value > 0;
+ } else if (in_array($name, ['view', 'hsset'])) {
+ return true;
+ } else {
+ return false;
+ }
+ }
/**
* Small helper function to display information on the browser console
diff --git a/includes/GlModelHooks.php b/includes/GlModelHooks.php
index 581b0c6..0d5f7e5 100644
--- a/includes/GlModelHooks.php
+++ b/includes/GlModelHooks.php
@@ -3,6 +3,7 @@ namespace MediaWiki\Extension\GlModelViewer;
use MediaWiki\MediaWikiServices;
use Html;
+use ParserOutput;
class GlModelHooks {
/**
@@ -51,32 +52,6 @@ class GlModelHooks {
}
}
- /**
- * MWHook: Replace File link rendered image with model-viewer element
- *
- * @see https://www.mediawiki.org/wiki/Manual:Hooks/ImageBeforeProduceHTML
- *
- * @param DummyLinker &$linker
- * @param Title &$title
- * @param FileObject &$file object containing information regarding the actual file for the File page
- * @param array &$frameParams any added parameters of the file link such as class etc.
- * @param array &$handlerParams
- * @param &$time
- * @param &$result By reference access to the rendered html result of the image
- * @param Parser $parser
- * @param string &$query
- * @param &$widthOption
- * @return bool|void True to continue default processing or false to abort for custom processing
- */
- public static function onImageBeforeProduceHTML( &$linker, &$title, &$file, array &$frameParams, array &$handlerParams, &$time, &$result, $parser, string &$query, &$widthOption ) {
- if ($file->getMimeType() !== 'model/gltf-binary') {
- return true;
- }
-
- $result = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), $frameParams);
- return false;
- }
-
/**
* MWHook: Display model on file page
*
@@ -87,16 +62,9 @@ class GlModelHooks {
*/
public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){
$file = $imagepage->getFile();
- $mh = $file->getHandler();
- $mt = $file->getMediaType();
- //$mmt = $mh->getHandler();
- echo '';
if ($file->getMimeType() == 'model/gltf-binary') {
- $viewer = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), ['class' => 'view-default']);
- $out->addHtml(Html::rawElement('div',['id' => 'file', 'class' => 'fullModelView'],$viewer));
+ $out->clearHTML();
+ $out->addWikiTextAsContent('[[' . $file->getTitle()->getFullText() . '|800x600px]]');
}
}
@@ -116,10 +84,12 @@ class GlModelHooks {
if (!$file || $file->getMimeType() !== 'model/gltf-binary') {
return true;
}
+
$out = $editor->getContext()->getOutput();
$out->addModules('ext.glmv');
- $previewViewer = self::buildViewer($content->getText(), $file->getFullUrl(), ['class' => 'view-default']);
+ $mvTransform = $file->transform([ 'width' => '800', 'hight' => '600']);
+ $previewViewer = $mvTransform->toHtml();
$addButtonAttr = array(
'class' => 'AddHotspot',
@@ -131,102 +101,6 @@ class GlModelHooks {
return false;
}
- /**
- * Build model-viewer and child elements
- *
- * This takes in the metadata text from the model page (or the current editor)
- * and produces the html string for the model-viewer and all relevant child
- * elements.
- *
- * @param string $inText The metadata text which must include a json formatted string inside a pre tag
- * @param string $srcUrl The full url pointing to the model file
- * @param array $frameParams The additional user defined parameters for the viewer such as hotspot and view classes
- * @return string Html string of the complete model-viewer element inside a div container
- */
- private static function buildViewer($inText, $srcUrl, $frameParams) {
- //Gather basic data
- preg_match('/([\S\s]*?)<\/pre>/',$inText,$modelDescript);
- $metadata = json_decode($modelDescript[1], true);
- $viewClass = self::extractClassParams('view',$frameParams['class']);
- $hsSetClass = self::extractClassParams('hsset',$frameParams['class']);
-
- //Handle annotations and annotation sets
- if (isset($metadata['annotations'])) {
- $hotspots = [];
- $annotations = [];
- if ($hsSetClass != 'default' && isset($metadata['annotationSets'])) {
- foreach($metadata['annotationSets'][$hsSetClass] as $includeAn) {
- if (isset($metadata['annotations'][$includeAn])) {
- $annotations[$includeAn] = $metadata['annotations'][$includeAn];
- }
- }
- } else {
- $annotations = $metadata['annotations'];
- }
- foreach($annotations as $label => $an) {
- $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label);
- $hsDefault = array(
- 'class' => 'Hotspot',
- 'slot' => 'hotspot-'.(count($hotspots) +1),
- 'onmousedown' => 'event.stopPropagation()',
- 'ontouchstart' => 'event.stopPropagation()',
- 'onclick' => 'onAnnotation(event)'
- );
- $attrHotspot = array_merge($hsDefault, $an);
- $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
- array_push($hotspots, $elHotspot);
- }
- }
-
- //Set viewer configurations or use basic default if none defined
- if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$viewClass])) {
- $attrModelView = $metadata['viewerConfig'][$viewClass];
- } else {
- $attrModelView = array('camera-controls' => true);
- }
-
- //Add important additional attributes and render model-viewer with hotspots
- $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView);
- $attrModelView['style'] = 'width: 100%; height: 100%; min-height: 400px;';
- $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
-
- $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
-
- //Render and return container element with model-viewer
- $attrContainer = array(
- 'style' => "width: 800px; height: 600px;",
- 'onmousedown' => 'clearAnnotations()',
- 'ontouchstart' => 'clearAnnotations()'
- );
- return Html::rawElement('div', $attrContainer, $elModel);
- }
-
- /**
- * Detect and return model user params from link classes
- *
- * The best way to send information in a file link is by adding classes to the
- * link. This function parses the array of those classes and returns the information
- * or 'default'
- *
- * @param string $paramType the type of parameter to be extracted 'view'|'hsset'
- * @param string $classList the string of class names as returned in $frameParams or default construction
- * @return string parameter name or 'default'
- */
- private static function extractClassParams(string $paramType, string $classList) {
- if (!in_array($paramType, ['view', 'hsset'])) {
- return 'default';
- }
-
- if (!isset($classList)) {
- return 'default';
- }
-
- $searchString = '/' . $paramType . '-(\S*)/';
- preg_match($searchString,$classList,$extractInfo);
-
- return ($extractInfo[1]) ? $extractInfo[1] : 'default';
- }
-
/**
* Small helper function to display information on the browser console
*
diff --git a/includes/GlModelTransformOutput.php b/includes/GlModelTransformOutput.php
index 05a778c..2572244 100644
--- a/includes/GlModelTransformOutput.php
+++ b/includes/GlModelTransformOutput.php
@@ -16,7 +16,10 @@ class GlModelTransformOutput extends MediaTransformOutput {
public function __construct($file, $parameters) {
$this->file = $file;
$this->parameters = $parameters;
- $this->url = $file->getFullUrl();
+ $this->width = (isset($parameters['width'])) ? $parameters['width'] : '800';
+ $this->height = (isset($parameters['height'])) ? $parameters['height'] : (int)($this->width * .75);
+ $this->url = $file->getFullUrl();
+ $this->thumb = isset($parameters['isFilePageThumb']);
}
/**
@@ -37,56 +40,128 @@ class GlModelTransformOutput extends MediaTransformOutput {
* @return string HTML
*/
public function toHtml($options = []) {
- return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' );
- /*
- $parameters = $this->parameters;
-
- $style = [];
- $style[] = "max-width: 100%;";
- $style[] = "max-height: 100%;";
- if (empty($options['no-dimensions'])) {
- $parameters['width'] = $this->getWidth();
- $parameters['height'] = $this->getHeight();
- $style[] = "width: {$this->getWidth()}px;";
- $style[] = "height: {$this->getHeight()}px;";
- }
-
- if (!empty($options['valign'])) {
- $style[] = "vertical-align: {$options['valign']};";
- }
-
- if (!empty($options['img-class'])) {
- $class = $options['img-class'];
- }
-
- if (!isset($parameters['start'])) {
- $parameters['start'] = null;
- }
- if (!isset($parameters['end'])) {
- $parameters['end'] = null;
- }
-
- $inOut = false;
- if ($parameters['start'] !== $parameters['end']) {
- if ($parameters['start'] !== false) {
- $inOut[] = $parameters['start'];
- }
-
- if ($parameters['end'] !== false) {
- $inOut[] = $parameters['end'];
- }
- }
-
- $descLink = Html::element( 'a', [ 'href' => $parameters['descriptionUrl'] ], $parameters['descriptionUrl'] );
-
- return Html::rawElement( 'video', [
- 'src' => $this->url . ($inOut !== false ? '#t=' . implode(',', $inOut) : ''),
- 'width' => $this->getWidth(),
- 'height' => $this->getHeight(),
- 'class' => $class ?? false,
- 'style' => $style ? implode( ' ', $style ) : false,
- 'controls' => true,
- ], $descLink );
- */
+ if ($this->thumb) {
+ return Html::rawElement('span',['class' => 'fake-thumbnail'],'Gltf model thumbnail');
+ }
+ //return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' );
+ if (isset($options['img-class'])) {
+ $this->parameters['class'] = $options['img-class'];
+ }
+ return self::buildViewer($this->file->getDescriptionText(),$this->url,$this->parameters);
}
+
+ /**
+ * Build model-viewer and child elements
+ *
+ * This takes in the metadata text from the model page (or the current editor)
+ * and produces the html string for the model-viewer and all relevant child
+ * elements.
+ *
+ * @param string $inText The metadata text which must include a json formatted string inside a pre tag
+ * @param string $srcUrl The full url pointing to the model file
+ * @param array $frameParams The additional user defined parameters for the viewer such as hotspot and view classes
+ * @return string Html string of the complete model-viewer element inside a div container
+ */
+ private function buildViewer($inText, $srcUrl, $viewParams) {
+ //Gather basic data
+ preg_match('/([\S\s]*?)<\/pre>/',$inText,$modelDescript);
+ $metadata = json_decode($modelDescript[1], true);
+ $viewClass = self::extractClassParams('view',$viewParams['class']);
+ $hsSetClass = self::extractClassParams('hsset',$viewParams['class']);
+
+ //Handle annotations and annotation sets
+ if (isset($metadata['annotations'])) {
+ $hotspots = [];
+ $annotations = [];
+ if ($hsSetClass != 'default' && isset($metadata['annotationSets'])) {
+ foreach($metadata['annotationSets'][$hsSetClass] as $includeAn) {
+ if (isset($metadata['annotations'][$includeAn])) {
+ $annotations[$includeAn] = $metadata['annotations'][$includeAn];
+ }
+ }
+ } else {
+ $annotations = $metadata['annotations'];
+ }
+ foreach($annotations as $label => $an) {
+ $elAnnot = Html::rawElement('div',['class' => 'HotspotAnnotation HiddenAnnotation'],$label);
+ $hsDefault = array(
+ 'class' => 'Hotspot',
+ 'slot' => 'hotspot-'.(count($hotspots) +1),
+ 'onmousedown' => 'event.stopPropagation()',
+ 'ontouchstart' => 'event.stopPropagation()',
+ 'onclick' => 'onAnnotation(event)'
+ );
+ $attrHotspot = array_merge($hsDefault, $an);
+ $elHotspot = Html::rawElement('button',$attrHotspot,$elAnnot.(count($hotspots) +1));
+ array_push($hotspots, $elHotspot);
+ }
+ }
+
+ //Set viewer configurations or use basic default if none defined
+ if (isset($metadata['viewerConfig']) && isset($metadata['viewerConfig'][$viewClass])) {
+ $attrModelView = $metadata['viewerConfig'][$viewClass];
+ } else {
+ $attrModelView = array('camera-controls' => true);
+ }
+
+ //Add important additional attributes and render model-viewer with hotspots
+ $attrModelView = array_merge(['src' => $srcUrl, 'class' => 'mv-model', 'interpolation-decay' => '100'], $attrModelView);
+ $attrModelView['style'] = 'width: 100%; height: 100%;';
+ $hotspotHtml = (isset($hotspots)) ? implode($hotspots) : '';
+
+ $elModel = Html::rawElement('model-viewer', $attrModelView, $hotspotHtml);
+
+ //Render and return container element with model-viewer
+ $attrContainer = array(
+ 'style' => 'width: ' . $this->width . 'px; height: ' . $this->height . 'px;',
+ 'onmousedown' => 'clearAnnotations()',
+ 'ontouchstart' => 'clearAnnotations()'
+ );
+ return Html::rawElement('div', $attrContainer, $elModel);
+ }
+
+ /**
+ * Detect and return model user params from link classes
+ *
+ * The best way to send information in a file link is by adding classes to the
+ * link. This function parses the array of those classes and returns the information
+ * or 'default'
+ *
+ * @param string $paramType the type of parameter to be extracted 'view'|'hsset'
+ * @param string $classList a string of class names
+ * @return string parameter name or 'default'
+ */
+ private static function extractClassParams(string $paramType, ? string $classList) {
+ if (!in_array($paramType, ['view', 'hsset'])) {
+ return 'default';
+ }
+
+ if (!isset($classList)) {
+ return 'default';
+ }
+
+ $searchString = '/' . $paramType . '-(\S*)/';
+ preg_match($searchString,$classList,$extractInfo);
+
+ return ($extractInfo[1]) ? $extractInfo[1] : 'default';
+ }
+
+ /**
+ * Small helper function to display information on the browser console
+ *
+ * Usage:
+ * echo '';
+ *
+ * @param $data information to display
+ * @param bool $add_script_tags true to put information is inside complete script tag
+ */
+ public static function console_log($data, $add_script_tags = false) {
+ $command = 'console.log('. json_encode($data, JSON_HEX_TAG).');';
+ if ($add_script_tags) {
+ $command = '';
+ }
+ echo $command;
+ }
}
\ No newline at end of file
diff --git a/modules/glmv.js b/modules/glmv.js
index 56625cd..45dc0c9 100644
--- a/modules/glmv.js
+++ b/modules/glmv.js
@@ -20,32 +20,32 @@ readyAddHotspot = function() {
clickAddHotspot = function(e) {
const previewMv = $('model-viewer')
previewMv.removeClass('AddingHotspot')
- let hsPosition = null;
+ let hsPosition = null
let targetModel = previewMv[0]
targetModel.disableTap = false
if (targetModel) {
- hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY);
+ hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
}
if (hsPosition) {
- let currentText = $('#wpTextbox1').val();
- let extractMetadata = currentText.match(/([\S\s]*?)<\/pre>/);
- let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: [], annotationSets: {}};
+ let currentText = $('#wpTextbox1').val()
+ let extractMetadata = currentText.match(/([\S\s]*?)<\/pre>/)
+ let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (metadata.annotations === undefined) {
- metadata.annotations = [];
+ metadata.annotations = {}
}
- let hsOutput = {label: 'NewHotspot'};
- hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
- hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m");
+ let hsOutput = {}
+ hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
+ hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
let orbitObj = targetModel.getCameraOrbit()
- hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`;
- let targetObj = targetModel.getCameraTarget();
- hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`;
+ hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`
+ let targetObj = targetModel.getCameraTarget()
+ hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`
//navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
- metadata.annotations.push(hsOutput);
- let newText = currentText.replace(/(.*?)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`);
- $('#wpTextbox1').val(newText);
+ metadata.annotations['New Hotspot'] = hsOutput
+ let newText = currentText.replace(/(.*?)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
+ $('#wpTextbox1').val(newText)
}
-};
+}
/**
* Event listener callback to toggle the visibility