Skip to content

Commit

Permalink
Merge branch 'release-v1.0.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Michele Tessaro committed Feb 21, 2021
2 parents 5bf6982 + d017320 commit c7ce922
Show file tree
Hide file tree
Showing 21 changed files with 499 additions and 171 deletions.
21 changes: 21 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,27 @@
# Changelog


## development (unreleased)

### New

* Added page and layer selector for XML diagrams (refs #86) [Michele Tessaro]

* Fixed patch for building draw.io server (fixes #81) [Michele Tessaro]

### Changes

* Updated README for the new release. [Michele Tessaro]

* Updated CHANGELOG. [Michele Tessaro]

### Fix

* Fixed save on recents dmsf (refs #87) [Michele Tessaro]

* Fixed wrong url hint in config dialog. [Michele Tessaro]


## v0.9.9 (2020-12-19)

### New
Expand Down
78 changes: 41 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,43 +33,35 @@ In the configuration form you can set the Drawio server url; the default is `//e

In this form you can also enable the mathematical symbol support for SVG diagrams. The default is disabled because enabling this adds about 170k of Javascript to download, so enable only if you really need it.


## Usage

There are three macros that can be used to embed diagrams in wiki pages/issues; use what best fits your needs.


### `drawio` macro
This macro draws diagrams saved in attachments. This is for compatibility with `0.1.x` versions of the plugin and is now a bit obsolete. To use it:

- save your [draw.io] diagram locally and upload it as attachment to a Wiki or issue page.
- in Wiki (or issue) pages use the `drawio` macro to load the widget, specifying the name of the attachment. For example:
This macro is now deprecated and not working anymore. Use the `drawio_attach` macro as a direct replacement.

```
{{drawio(activity.xml, options)}}
```
- the following macro options are available (default values are shown):
- ``lightbox=false`` : enable lightbox usage
- ``resize=false`` : enable zoom control box
- ``zoom=100`` : initial zoom of diagram (percentage of original diagram)
- ``fit=true`` : fit page width (only if ``resize=false``)
- ``hilight=#0000ff`` : color to hilight hyperlinks

With this macro diagrams are drawn using SVG (or maybe Canvas) so they are interactive: they are navigable,
they respond to ``over`` and ``click`` actions. Hyperlinks can be used to navigate to other items.

This macro render diagrams as SVG, so diagrams are interactive and navigable (link can be used to navigate to other pages).
### `drawio_attach` macro

This macro is now obsolete: you can now use SVG diagrams with the other two macros (``drawio_attach`` and ``drawio_dmsf``)
but you must import the the diagram in the *draw.io editor* and then export as SVG with an included copy of the diagram
(see the *Export as SVG* function of the *draw.io editor*).
This macro handles diagrams saved as attachments of issues or wiki pages.

### `drawio_attach` macro
This macro handles diagrams saved as attachments of issues or wiki pages.
The supported diagrams format are:
* `xml`: normal diagram source in XML format
* `png`: PNG image with an embedded XML source of the diagram (PNG+XML)
* `svg`: SVG image with an embedded XML source of the diagram (SVG+XML)

The `xml` format uses a Javascript viewer to render the diagram runtime. It maybe a bit slow, but adds navigation options to the diagram (zoom, page and layer selector).

With this macro the attachments are in PNG+XML, a special format consisting in an PNG image of the diagram plus the XML diagram source embeded as a field of the image.

With an``.svg`` attachment name extension the image format is handled as SVG+XML; like the PNG+XML, this is an SVG image
with an embedded XML source of the diagram (the diagram must be created with the *draw.io editor*, normal SVG are displayed but cannot be edited).

From version `1.0.0` are also supported diagrams in XML format (as used with the old `drawio` macro).

Usage is very simple:

- **make sure ``REST`` API are enabled in Redmine global settings**; this **is needed** to be able to save diagrams as attachments. To enable it, go into `Administration` -> `Settings` -> `API` tab and check the `Enable REST web service` flag.
Expand All @@ -81,19 +73,30 @@ Usage is very simple:

![Diagram placeholder][diagramPlaceholder]

Double click on the diagram to start editing with the embedded editor. When you save the the diagram the editor will close, the diagram will be saved in a new attachment and the reference in the wiki/issue page is updated.
For PNG and SVG diagrams, double click on the diagram to start editing with the embedded editor. When you save the the diagram the editor will close, the diagram will be saved in a new attachment and the reference in the wiki/issue page is updated.

For XML diagrams, a toolbar will appear when the mouse enters the diagram area; in the toolbar there is a button for start editing the diagram.

The **diagram attachments are versioned** by suffixing the name with a counter. This is necessary because is not possible to update an existing attachment. Moreover, is not possible to delete attachments throught rest API (seems to be possible from Redmine 3.3.0, but I need to experiment), so the old versions of an attachment must be explicitly (manually) deleted from the Redmine web interface.

- the following macro options are available (default values are shown):
- ``size=number`` : force image width, in pixels (default, show in original size)
- only for XML diagrams:
- ``hilight=#0000ff``: color to highlight diagram hyperlinks
- ``tbautohide=true``: if `false` the toolbar is always visibile (if there are buttons), else it will be shown only when the mouse enters the diagram area
- ``lightbox=false``: activates the *LightBox* viewer button in the toolbar
- ``zoom=false``: activates the zoom buttons in the toolbar
- ``page=number``: if not empty a *page selector* will appear in the toolbar (for multi-page diagrams) and the initial page (starting from 0) will be selected
- ``layers``: if set as a list of space separated number of layers, those layer will be activated for default, and a *layer selector* controlo will appear in the toolbar.

In the toolbar editor there is a button with icon ![drawio_attach icon](assets/images/jstb_drawio_attach.png) that opens a dialog that can be used to insert a macro for a new diagram to be saved as attachment (for lazy people).

The dialog can be used also for modifying a macro: simply place the caret (the cursor in the editing area) somewhere in the body of the macro, click the corresponding button in the toolbar, and the dialog will open with fields pre-filled with values from the macro source. When confirming new values, the macro source will be updated.


### `drawio_dmsf` macro
This macro handles diagrams saved in the [DMSF] repository as PNG+XML or SVG+XML images. The DMSF module must be enabled for the project to be able to use this macro.
This macro handles diagrams saved in the [DMSF] repository as PNG+XML or SVG+XML images, or as XML documents (from version `1.0.0`). The DMSF module must be enabled for the project to be able to use this macro.

Usage is very simple:

- **enable the WebDAV functionality of the [DMSF] plugin in ``Read/Write`` mode**; this is necessary to be able to save the diagram from the embedded editor. If you prefer you can disable WebDAV after all editings are done.
Expand All @@ -105,21 +108,32 @@ Usage is very simple:

![Diagram placeholder][diagramPlaceholder]

Double click on the diagram to start editing with the embedded editor. When you save the the diagram the editor will close, the diagram will be saved (versioned) in the specified DMSF documents path for the current project, and the diagram will be automatically updated.
For PNG and SVG diagrams, double click on the diagram to start editing with the embedded editor. When you save the the diagram the editor will close, the diagram will be saved in a new attachment and the reference in the wiki/issue page is updated.

For XML diagrams, a toolbar will appear when the mouse enters the diagram area; in the toolbar there is a button for start editing the diagram.

- the following macro options are available (default values are shown):
- ``size=number`` : force image width, in pixels (default, show in original size)
- only for XML diagrams:
- ``hilight=#0000ff``: color to highlight diagram hyperlinks
- ``tbautohide=true``: if `false` the toolbar is always visibile (if there are buttons), else it will be shown only when the mouse enters the diagram area
- ``lightbox=false``: activates the *LightBox* viewer button in the toolbar
- ``zoom=false``: activates the zoom buttons in the toolbar
- ``page=number``: if not empty a *page selector* will appear in the toolbar (for multi-page diagrams) and the initial page (starting from 0) will be selected
- ``layers``: if set as a list of space separated number of layers, those layer will be activated for default, and a *layer selector* controlo will appear in the toolbar.

Like for the ``drawio_attach`` macro, in the toolbar editor there is a button with icon ![drawio_attach icon](assets/images/jstb_drawio_dmsf.png) that opens a dialog that can be used to insert a macro for a new diagram to be saved as [DMSF] document.

As for the `drawio_attach` macro, the dialog can be used for updating a macro simply by positioning the editing cursor in the right place and clicking the button.


## Some note on the drawio editor

Someone can be concerned about security in sending own diagrams to the [draw.io] site.

The diagrams aren't sent to [draw.io] for editing/rendering, but all the operations are done by the browser using only Javascript and HTML5. The only things loaded externally are the scripts and the editor page, when the diagram editor is opened. The diagram source remains local to browser/redmine site.


## Using a personal installation of draw.io

If you like, you can configure this plugin to use your own installation of the [draw.io] site.
Expand Down Expand Up @@ -163,6 +177,7 @@ However it is possible to use a local installation of the library following thes

Once updated the settings, go to a wiki page with a mathematical SVG diagram and you should see the diagram exactly as before. You can check from where the library is downloaded using the browser developer tools.


## Known issues

- Diagrams are rendered on the browser so they aren't visible inside a PDF export. As workaround you can print the web page as PDF document (easy with Linux, a bit more problematic in Windows), or export the diagram in PNG format and include it as image.
Expand All @@ -171,6 +186,7 @@ Once updated the settings, go to a wiki page with a mathematical SVG diagram and

- The ``drawio_attach`` macro doesn't completly work with issue notes: Redmine APIs allow to create new issue notes, but not to change them, so the issue note must be changed manually. As alternative use the ``drawio`` and ``drawio_dmsf`` macros, which work fine.


## TODO

- Allow specify diagrams from other other sources:
Expand All @@ -186,24 +202,12 @@ Once updated the settings, go to a wiki page with a mathematical SVG diagram and
+ url of image: the url is generated by the macro (from attachment or [DMSF]), using in a widget may require an AJAX call


## Other works
If you are using [draw.io] to create *Entity Relationship* database schemas, you may be interested to the [schema2script].

This is a Ruby command line tool that parses a [draw.io] ER diagram and produces a DDL script to initialize a database schema.

For now only [H2](http://www.h2database.com) and [Oracle](https://www.oracle.com/it/database) SQL dialects are supported, but it will grow in the future.

Related to [schema2script] is the [sboot] project, that helps to create a skeleton Java application based on [Spring boot](https://projects.spring.io/spring-boot). It creates entities, repositories ([Hibernate](http://hibernate.org) based for now), DTOs, services, REST interfaces, up to a simple CRUD web interface based on [Thymeleaf](www.thymeleaf.org) or [Angular2](https://angular.io). It also creates some tests, which can be used as a starting point for other, more specific tests.

It is in early state but it is promising; with the current version you can create a complete skeleton application starting from an ER schema, which may be a good starting point for more complex applications.


## Contributing

Any code contribution is well accepted. There are only a few rules that I would like to be respected to easy merging:

- work on ``develop`` branch and leave the ``master`` branch untouched. This is importat to keep the released versions stable.
- I would prefer comments in the style used by [gitchangelog](https://github.com/vaab/gitchangelog); this will simplify generation of the ``CHANGELOG.md``.
- I would prefer comments in the style used by [gitchangelog](https://github.com/vaab/gitchangelog); this will simplify generation of the ``CHANGELOG.md``.
It isn't fundamental, I can edit comments and insert prefixes, or edit manually the ``CHANGELOG.md``, but it would be nice if you can help me.


Expand Down
29 changes: 29 additions & 0 deletions app/views/redmine_drawio/_macro_dialog.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,41 @@
<label for="drawio_diagType"><%= l(:drawio_dlg_diagType) %></label>
<input type="radio" name="drawio_diagType" value="png" checked="checked"/>PNG
<input type="radio" name="drawio_diagType" value="svg" style="margin-left:1em"/>SVG
<input type="radio" name="drawio_diagType" value="xml" style="margin-left:1em" id="drawio_diagTypeXml"/>XML
</p>
<p>
<label for="drawio_size"><%= l(:drawio_dlg_size) %></label>
<input type="text" name="drawio_size" id="drawio_size" class="digits" size="4" maxlength="4"/> pixel
</p>
</div>
</fieldset>
<fieldset id="drawio_xml_params" style="display: none">
<div class="tabular">
<p>
<label for="drawio_tbautohide"><%= l(:drawio_dlg_toolbar_autohide) %></label>
<input type="checkbox" name="drawio_tbautohide" id="drawio_tbautohide" checked="checked"/>
</p>
<p>
<label for="drawio_lightbox"><%= l(:drawio_dlg_lightbox) %></label>
<input type="checkbox" name="drawio_lightbox" id="drawio_lightbox"/>
</p>
<p>
<label for="drawio_zoom"><%= l(:drawio_dlg_zoom) %></label>
<input type="checkbox" name="drawio_zoom" id="drawio_zoom"/>
</p>
<p>
<label for="drawio_page"><%= l(:drawio_dlg_page) %></label>
<input type="text" name="drawio_page" id="drawio_page"/>
</p>
<p>
<label for="drawio_layers"><%= l(:drawio_dlg_layers) %></label>
<input type="text" name="drawio_layers" id="drawio_layers"/>
</p>
<p>
<label for="drawio_hilight"><%= l(:drawio_dlg_hiligh) %></label>
<input type="text" name="drawio_hilight" id="drawio_hilight" value="#0000ff"/>
</p>
</div>
</fieldset>
</form>
</div>
Loading

0 comments on commit c7ce922

Please sign in to comment.