jgeorgi/GlModelViewer
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Refactor to MediaHandler transform #20

Merged
jgeorgi merged 2 commits from bas-doTransform into main 2024-10-27 04:11:16 +00:00
Conversation 0 Commits 2 Files Changed 6 +395 -269
6 changed files with 395 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7264fcc570 - Show all commits

4
extension.json
View File

@@ -3,7 +3,7 @@
"author": "Justin Georgi", "author": "Justin Georgi",
"url": "https://gitea.azgeorgis.net/jgeorgi/mwModelViewer", "url": "https://gitea.azgeorgis.net/jgeorgi/mwModelViewer",
"description": "This extension allows .glb and .gltf files to be added, displayed, and annotated in MediaWiki", "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", "license-name": "MIT",
"type": "media", "type": "media",
"manifest_version": 2, "manifest_version": 2,
@@ -17,7 +17,7 @@
"MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit", "MimeMagicInit": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicInit",
"MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension", "MimeMagicImproveFromExtension": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onMimeMagicImproveFromExtension",
"BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay", "BeforePageDisplay": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onBeforePageDisplay",
"ImageBeforeProduceHTML": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageBeforeProduceHTML", "ImageOpenShowImageInlineBefore": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onImageOpenShowImageInlineBefore",
"AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview" "AlternateEditPreview": "MediaWiki\\Extension\\GlModelViewer\\GlModelHooks::onAlternateEditPreview"
}, },
"ResourceFileModulePaths": { "ResourceFileModulePaths": {

28
includes/GlModelHandler.php
View File

@@ -2,6 +2,7 @@
namespace MediaWiki\Extension\GlModelViewer; namespace MediaWiki\Extension\GlModelViewer;
use ImageHandler; use ImageHandler;
use Html;
class GlModelHandler extends ImageHandler { class GlModelHandler extends ImageHandler {
/** /**
@@ -35,16 +36,25 @@ class GlModelHandler extends ImageHandler {
* @return MediaTransformOutput * @return MediaTransformOutput
*/ */
public function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) { public function doTransform($image, $dstPath, $dstUrl, $params, $flags = 0) {
echo '<script>'; return new GlModelTransformOutput($image, $params);
self::console_log($image); }
self::console_log($dstPath);
self::console_log($dstUrl);
self::console_log($params);
self::console_log($flags);
echo '</script>';
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 * Small helper function to display information on the browser console

138
includes/GlModelHooks.php
View File

@@ -3,6 +3,7 @@ namespace MediaWiki\Extension\GlModelViewer;
use MediaWiki\MediaWikiServices; use MediaWiki\MediaWikiServices;
use Html; use Html;
use ParserOutput;
class GlModelHooks { 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 * MWHook: Display model on file page
* *
@@ -87,16 +62,9 @@ class GlModelHooks {
*/ */
public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){ public static function onImageOpenShowImageInlineBefore( $imagepage, $out ){
$file = $imagepage->getFile(); $file = $imagepage->getFile();
$mh = $file->getHandler();
$mt = $file->getMediaType();
//$mmt = $mh->getHandler();
echo '<script>';
self::console_log($mh);
self::console_log($mt);
echo '</script>';
if ($file->getMimeType() == 'model/gltf-binary') { if ($file->getMimeType() == 'model/gltf-binary') {
$viewer = self::buildViewer($file->getDescriptionText(), $file->getFullUrl(), ['class' => 'view-default']); $out->clearHTML();
$out->addHtml(Html::rawElement('div',['id' => 'file', 'class' => 'fullModelView'],$viewer)); $out->addWikiTextAsContent('[[' . $file->getTitle()->getFullText() . '|800x600px]]');
} }
} }
@@ -116,10 +84,12 @@ class GlModelHooks {
if (!$file || $file->getMimeType() !== 'model/gltf-binary') { if (!$file || $file->getMimeType() !== 'model/gltf-binary') {
return true; return true;
} }
$out = $editor->getContext()->getOutput(); $out = $editor->getContext()->getOutput();
$out->addModules('ext.glmv'); $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( $addButtonAttr = array(
'class' => 'AddHotspot', 'class' => 'AddHotspot',
@@ -131,102 +101,6 @@ class GlModelHooks {
return false; 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('/<pre>([\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 * Small helper function to display information on the browser console
* *

179
includes/GlModelTransformOutput.php
View File

@@ -16,7 +16,10 @@ class GlModelTransformOutput extends MediaTransformOutput {
public function __construct($file, $parameters) { public function __construct($file, $parameters) {
$this->file = $file; $this->file = $file;
$this->parameters = $parameters; $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 * @return string HTML
*/ */
public function toHtml($options = []) { public function toHtml($options = []) {
return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' ); if ($this->thumb) {
/* return Html::rawElement('span',['class' => 'fake-thumbnail'],'Gltf model thumbnail');
$parameters = $this->parameters; }
//return Html::rawElement( 'div',[ 'class' => 'my-model-class'], $this->url . ' is a ' . $this->parameters['type'] . ' 3D model!' );
$style = []; if (isset($options['img-class'])) {
$style[] = "max-width: 100%;"; $this->parameters['class'] = $options['img-class'];
$style[] = "max-height: 100%;"; }
if (empty($options['no-dimensions'])) { return self::buildViewer($this->file->getDescriptionText(),$this->url,$this->parameters);
$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 );
*/
} }
/**
* 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('/<pre>([\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 '<script>';
* self::console_log('logged string');
* echo '</script>';
*
* @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 = '<script>'. $command . '</script>';
}
echo $command;
}
} }

32
modules/glmv.js
View File

@@ -20,32 +20,32 @@ readyAddHotspot = function() {
clickAddHotspot = function(e) { clickAddHotspot = function(e) {
const previewMv = $('model-viewer') const previewMv = $('model-viewer')
previewMv.removeClass('AddingHotspot') previewMv.removeClass('AddingHotspot')
let hsPosition = null; let hsPosition = null
let targetModel = previewMv[0] let targetModel = previewMv[0]
targetModel.disableTap = false targetModel.disableTap = false
if (targetModel) { if (targetModel) {
hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY); hsPosition = targetModel.positionAndNormalFromPoint(e.clientX, e.clientY)
} }
if (hsPosition) { if (hsPosition) {
let currentText = $('#wpTextbox1').val(); let currentText = $('#wpTextbox1').val()
let extractMetadata = currentText.match(/<pre>([\S\s]*?)<\/pre>/); let extractMetadata = currentText.match(/<pre>([\S\s]*?)<\/pre>/)
let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: [], annotationSets: {}}; let metadata = (extractMetadata.length >= 2) ? JSON.parse(extractMetadata[1]) : {viewerConfig: {}, annotations: {}, annotationSets: {}}
if (metadata.annotations === undefined) { if (metadata.annotations === undefined) {
metadata.annotations = []; metadata.annotations = {}
} }
let hsOutput = {label: 'NewHotspot'}; let hsOutput = {}
hsOutput['data-position'] = hsPosition.position.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m"); 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"); hsOutput['data-normal'] = hsPosition.normal.toString().replaceAll(/(\d{5})(\d*?m)/g,"$1m")
let orbitObj = targetModel.getCameraOrbit() let orbitObj = targetModel.getCameraOrbit()
hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`; hsOutput['data-orbit'] = `${orbitObj.theta.toFixed(2)}rad ${orbitObj.phi.toFixed(2)}rad ${orbitObj.radius.toFixed(2)}m`
let targetObj = targetModel.getCameraTarget(); let targetObj = targetModel.getCameraTarget()
hsOutput['data-target'] = `${targetObj.x.toFixed(5)}m ${targetObj.y.toFixed(5)}m ${targetObj.z.toFixed(5)}m`; 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)); //navigator.clipboard.writeText(JSON.stringify(hsOutput, null, 2));
metadata.annotations.push(hsOutput); metadata.annotations['New Hotspot'] = hsOutput
let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`); let newText = currentText.replace(/(.*?<pre>)[\S\s]*?(<\/pre>.*)/,`$1\n${JSON.stringify(metadata, null, 2)}\n$2`)
$('#wpTextbox1').val(newText); $('#wpTextbox1').val(newText)
} }
}; }
/** /**
* Event listener callback to toggle the visibility * Event listener callback to toggle the visibility