Skip to content

Commit

Permalink
Add support for zooming the diagram in view mode #32
Browse files Browse the repository at this point in the history 
Add support for viewing the diagram in full screen mode #63
* Show the edit button and the diagram title on the toolbar
* Modify the diagram macro to not show the caption when the toolbar is shown
  • Loading branch information
@mflorea
mflorea committed Sep 12, 2019
1 parent f2b3c8c commit 3514e84
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 44 deletions.
75 changes: 40 additions & 35 deletions src/main/resources/Diagram/DiagramMacro.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,45 +163,50 @@
<code>{{velocity output="false"}}
#macro (displayDiagram $reference)
#set ($discard = $xwiki.ssx.use('Diagram.DiagramSheet'))
(% class="diagram-container" %)(((
(% class="thumbnail" %)(((
#if ($services.security.authorization.hasAccess('view', $reference))
#set ($diagram = $xwiki.getDocument($reference))
#set ($diagramTitle = $diagram.plainTitle)
#if ($diagram.getObject('Diagram.DiagramClass'))
#if ($xcontext.action == 'edit' || ($xcontext.macro.params.cached == 'true' &amp;&amp; $xcontext.action != 'export'))
{{html clean="false"}}
$!diagram.getValue('svg')
{{/html}}
#else
{{display reference="$services.rendering.escape($reference, $xcontext.macro.doc.syntax)" /}}
#end
#else
{{warning}}$services.localization.render('diagram.macro.invalidReference'){{/warning}}
#end
#set ($showCaption = true)
#if ($services.security.authorization.hasAccess('view', $reference))
#set ($diagram = $xwiki.getDocument($reference))
#set ($diagramTitle = $diagram.plainTitle)
#if ($diagram.getObject('Diagram.DiagramClass'))
#if ($xcontext.action == 'edit' || ($xcontext.macro.params.cached == 'true' &amp;&amp; $xcontext.action != 'export'))
#set ($output = "{{html clean='false'}}$!diagram.getValue('svg'){{/html}}")
#else
{{warning}}$services.localization.render('diagram.macro.viewNotAllowed'){{/warning}}
#if ($reference.name == $services.model.getEntityReference('DOCUMENT', 'default'))
#set ($diagramTitle = $reference.parent.name)
#else
#set ($diagramTitle = $reference.name)
#end
#set ($output = "{{display reference='$services.rendering.escape($reference, $xcontext.macro.doc.syntax)' /}}")
#set ($showCaption = false)
#end
#else
#set ($output = "{{warning}}$services.localization.render('diagram.macro.invalidReference'){{/warning}}")
#end
#else
#set ($output = "{{warning}}$services.localization.render('diagram.macro.viewNotAllowed'){{/warning}}")
#if ($reference.name == $services.model.getEntityReference('DOCUMENT', 'default'))
#set ($diagramTitle = $reference.parent.name)
#else
#set ($diagramTitle = $reference.name)
#end
#end
#if ($showCaption)
(% class="diagram-container" %)(((
(% class="thumbnail" %)(((
#end
$output
#if ($showCaption)

{{html clean="true"}}
&lt;div class="caption"&gt;
&lt;a class="diagram-title" href="$xwiki.getURL($reference)"
title="$escapetool.xml($services.localization.render('diagram.macro.view'))"
&gt;$escapetool.xml($diagramTitle)&lt;/a&gt;
#if ($services.security.authorization.hasAccess('edit', $reference))
&lt;a class="diagram-edit" href="$xwiki.getURL($reference, 'edit', $NULL)"
title="$escapetool.xml($services.localization.render('diagram.macro.edit'))"
target="_blank"&gt;$services.icon.renderHTML('pencil')&lt;/a&gt;
#end
&lt;/div&gt;
{{/html}}
{{html clean="true"}}
&lt;div class="caption"&gt;
&lt;a class="diagram-title" href="$xwiki.getURL($reference)"
title="$escapetool.xml($services.localization.render('diagram.macro.view'))"
&gt;$escapetool.xml($diagramTitle)&lt;/a&gt;
#if ($services.security.authorization.hasAccess('edit', $reference))
&lt;a class="diagram-edit" href="$xwiki.getURL($reference, 'edit', $NULL)"
title="$escapetool.xml($services.localization.render('diagram.macro.edit'))"
target="_blank"&gt;$services.icon.renderHTML('pencil')&lt;/a&gt;
#end
&lt;/div&gt;
{{/html}}
)))
)))
)))
#end
#end

#macro (createDiagram $reference)
Expand Down
50 changes: 41 additions & 9 deletions src/main/resources/Diagram/DiagramViewSheet.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@
#set ($discard = $xwiki.jsx.use('Diagram.DiagramViewSheet'))
{{html clean="false"}}
## Check if the query contains the parameter for getting the diagram from URL.
&lt;div class="diagram loading" #if ("$!request.source" == '') data-model="$escapetool.xml($tdoc.content)" #end&gt;&lt;/div&gt;
&lt;div class="diagram loading"#if ("$!request.source" == '') data-model="$escapetool.xml($tdoc.content)"
data-reference="$escapetool.xml($services.model.serialize($tdoc.documentReference, 'default'))"
data-title="$escapetool.xml($tdoc.plainTitle)"#end&gt;&lt;/div&gt;
{{/html}}
#end
#end
Expand Down Expand Up @@ -320,9 +322,6 @@ define('spin-global', ['spin'], function(spin) {
// This is required for the clipart images.
GraphViewer.prototype.imageBaseUrl = getOrigin();

// We don't support loading multiple pages (tabbed UI).
EditorUi.prototype.initPages = function() {};

// Fix the diagram printing from the lightbox. mxPrintPreview#addGraphFragment optimizes the diagram rendering when
// previewing the print by rendering only the shapes that intersect the clip associated with the print page. The
// computations are wrong in view mode (either when computing the bounding rect of the shapes or the clip of the print
Expand All @@ -333,15 +332,48 @@ define('spin-global', ['spin'], function(spin) {
// See https://github.com/jgraph/mxgraph/commit/d5c1345ec946b9d55a9c2a8c1c5df0f154561edf
mxPrintPreview.prototype.clipping = false;

$.fn.viewDiagram = function(options) {
options = $.extend({
var getDiagramViewerConfig = function(diagramContainer) {
var config = {
title: diagramContainer.data('title'),
lightbox: false,
toolbar: 'zoom layers lightbox'
}, options);
toolbar: 'zoom layers pages lightbox',
'toolbar-buttons': {
edit: {
title: mxResources.get('edit'),
image: Editor.editImage
}
}
};
if (diagramContainer.data('reference')) {
config.toolbar = 'edit ' + config.toolbar;
var diagramReference = XWiki.Model.resolve(diagramContainer.data('reference'), XWiki.EntityType.DOCUMENT);
config.reference = diagramReference;
var diagramEditURL = new XWiki.Document(diagramReference).getURL('edit');
config['toolbar-buttons'].edit.handler = function() {
window.location.href = diagramEditURL;
};
}
var toolbar = diagramContainer.data('toolbar');
if (toolbar === 'false') {
delete config.toolbar;
} else if (typeof toolbar === 'string') {
config.toolbar = toolbar;
}
return config;
};

$.fn.viewDiagram = function(configOverride) {
return this.each(function() {
var diagramXML = diagramUtils.getDiagramXMLFromURL(window.location.href) || $(this).data('model');
var diagramRootNode = mxUtils.parseXml(diagramXML).documentElement;
var graphViewer = new GraphViewer(this, diagramRootNode, options);
var config = $.extend(getDiagramViewerConfig($(this)), configOverride);
var graphViewer = new GraphViewer(this, diagramRootNode, config);
// Make the diagram title from the tool bar a link to the diagram page.
if (config.title &amp;&amp; config.reference) {
var diagramViewURL = new XWiki.Document(config.reference).getURL();
var diagramLink = $('&lt;a/&gt;').attr('href', diagramViewURL).text(config.title);
$(graphViewer.toolbar).children().last().empty().append(diagramLink);
}
}).removeClass('loading');
};

Expand Down

0 comments on commit 3514e84

Please sign in to comment.