From b87dec09e44269227830facd10a6454db41f6d5a Mon Sep 17 00:00:00 2001 From: HemanginiPatel Date: Fri, 4 Jun 2021 18:24:56 +0530 Subject: [PATCH] [ADD/MIG]Migrated the module web_widget_mermaid in v14. --- web_widget_mermaid/README.rst | 136 +++++ web_widget_mermaid/__init__.py | 1 + web_widget_mermaid/__manifest__.py | 19 + .../demo/res_users_flowchart.xml | 25 + web_widget_mermaid/i18n/ca.po | 27 + web_widget_mermaid/i18n/es.po | 27 + web_widget_mermaid/i18n/fr.po | 27 + web_widget_mermaid/i18n/pt_BR.po | 27 + .../i18n/web_widget_mermaid.pot | 25 + web_widget_mermaid/readme/CONTRIBUTORS.rst | 1 + web_widget_mermaid/readme/DESCRIPTION.rst | 2 + web_widget_mermaid/readme/USAGE.rst | 58 +++ .../static/description/flowchart_example.png | Bin 0 -> 1121 bytes .../static/description/icon.png | Bin 0 -> 9455 bytes .../static/description/index.html | 488 ++++++++++++++++++ .../static/src/js/web_widget_mermaid.js | 113 ++++ .../web_widget_mermaid_default_theme.scss | 408 +++++++++++++++ .../view/web_widget_mermaid_view.xml | 10 + 18 files changed, 1394 insertions(+) create mode 100644 web_widget_mermaid/README.rst create mode 100644 web_widget_mermaid/__init__.py create mode 100644 web_widget_mermaid/__manifest__.py create mode 100644 web_widget_mermaid/demo/res_users_flowchart.xml create mode 100644 web_widget_mermaid/i18n/ca.po create mode 100644 web_widget_mermaid/i18n/es.po create mode 100644 web_widget_mermaid/i18n/fr.po create mode 100644 web_widget_mermaid/i18n/pt_BR.po create mode 100644 web_widget_mermaid/i18n/web_widget_mermaid.pot create mode 100644 web_widget_mermaid/readme/CONTRIBUTORS.rst create mode 100644 web_widget_mermaid/readme/DESCRIPTION.rst create mode 100644 web_widget_mermaid/readme/USAGE.rst create mode 100644 web_widget_mermaid/static/description/flowchart_example.png create mode 100644 web_widget_mermaid/static/description/icon.png create mode 100644 web_widget_mermaid/static/description/index.html create mode 100644 web_widget_mermaid/static/src/js/web_widget_mermaid.js create mode 100644 web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss create mode 100644 web_widget_mermaid/view/web_widget_mermaid_view.xml diff --git a/web_widget_mermaid/README.rst b/web_widget_mermaid/README.rst new file mode 100644 index 000000000..901e9a2e8 --- /dev/null +++ b/web_widget_mermaid/README.rst @@ -0,0 +1,136 @@ +======================== +Mermaid flowchart widget +======================== + +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png + :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html + :alt: License: AGPL-3 +.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/14.0/web_widget_mermaid + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-14-0/web-14-0-web_widget_mermaid + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png + :target: https://runbot.odoo-community.org/runbot/162/14.0 + :alt: Try me on Runbot + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module adds a basic widget for rendering text fields as flowcharts using +`mermaid `_. + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +Put a ``widget="mermaid"`` attribute in relevant field tags in the view +declaration:: + + + +Optionally, use an ``options`` attribute to pass a JSON object with +`mermaid configuration `_:: + + + +The syntax for creating diagrams is described in +`mermaid's documentation `_. + +As an example, this text:: + + graph LR + 10.0 --> 11.0 + 11.0 --> 12.0 + 12.0 -.-> 13.0 + +Produces this flowchart: + +.. image:: https://raw.githubusercontent.com/OCA/web/14.0/web_widget_mermaid/static/description/flowchart_example.png + :alt: Flowchart + +Demonstration +============= + +In demo mode, the addon adds a flowchart field to users so you can try it. This shows up in Runbot instances. + +Upgrading Mermaid +================= + +This information is only relevant for the development of this addon, not for users. + +This addon uses a slightly tweaked build of Mermaid that works in older browsers. To reproduce it, take the following steps: + +- Clone ``https://github.com/knsv/mermaid/`` +- Checkout the version you want to upgrade to (e.g. ``git checkout 8.4.0``) +- In ``webpack.config.base.js``, in ``const jsRule = ...``, remove the ``include`` key (so all dependencies are transpiled) +- In ``babel.config.js``, in ``targets``, add some browsers besides ``node: 'current'``. I arbitrarily went with this:: + + targets: { + node: 'current', + ie: '11', + edge: '20', + firefox: '35', + chrome: '45', + safari: '9', + } + +- Run ``yarn install`` +- Run ``yarn build`` +- The completed file is now in ``dist/mermaid.js``. Try running ``grep 'let ' dist/mermaid.js`` to make sure everything was transpiled. The only output should be from comments. +- Copy ``dist/mermaid.js`` to ``web_widget_mermaid/static/lib/mermaid/mermaid.js``. +- Bump the version number in ``__manifest__.py`` to match the Mermaid version. + +Bug Tracker +=========== + +Bugs are tracked on `GitHub Issues `_. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +~~~~~~~ + +* Therp BV + +Contributors +~~~~~~~~~~~~ + +* Jan Verbeek + +Maintainers +~~~~~~~~~~~ + +This module is maintained by the OCA. + +.. image:: https://odoo-community.org/logo.png + :alt: Odoo Community Association + :target: https://odoo-community.org + +OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use. + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_widget_mermaid/__init__.py b/web_widget_mermaid/__init__.py new file mode 100644 index 000000000..e58fedf20 --- /dev/null +++ b/web_widget_mermaid/__init__.py @@ -0,0 +1 @@ +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) diff --git a/web_widget_mermaid/__manifest__.py b/web_widget_mermaid/__manifest__.py new file mode 100644 index 000000000..8730c593f --- /dev/null +++ b/web_widget_mermaid/__manifest__.py @@ -0,0 +1,19 @@ +# Copyright 2019 Therp BV +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl.html) + +{ + "name": "Mermaid flowchart widget", + "category": "Web", + "author": "Therp BV,Odoo Community Association (OCA)", + "version": "14.0.1.0.0", + "license": "AGPL-3", + "summary": "Render mermaid markdown flowcharts", + "website": "https://github.com/OCA/web", + "depends": ['web'], + "data": [ + "view/web_widget_mermaid_view.xml", + ], + "demo": [ + "demo/res_users_flowchart.xml", + ], +} diff --git a/web_widget_mermaid/demo/res_users_flowchart.xml b/web_widget_mermaid/demo/res_users_flowchart.xml new file mode 100644 index 000000000..0322d81f1 --- /dev/null +++ b/web_widget_mermaid/demo/res_users_flowchart.xml @@ -0,0 +1,25 @@ + + + + x_flowchart + + Demo mermaid flowchart + char + + + + res.users + + + + + + + + + + graph TD +A[This is an example flowchart] --> B{{Edit it}} +B -. save it .-> C(See what happens) + + diff --git a/web_widget_mermaid/i18n/ca.po b/web_widget_mermaid/i18n/ca.po new file mode 100644 index 000000000..c77553ff4 --- /dev/null +++ b/web_widget_mermaid/i18n/ca.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-02-17 13:45+0000\n" +"Last-Translator: claudiagn \n" +"Language-Team: none\n" +"Language: ca\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Diagrama de flux de sirena de demostració" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Diagrama de flux de sirena" diff --git a/web_widget_mermaid/i18n/es.po b/web_widget_mermaid/i18n/es.po new file mode 100644 index 000000000..1a628b8a9 --- /dev/null +++ b/web_widget_mermaid/i18n/es.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2020-09-16 14:00+0000\n" +"Last-Translator: claudiagn \n" +"Language-Team: none\n" +"Language: es\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n != 1;\n" +"X-Generator: Weblate 3.10\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Diagrama de flujo de sirena de demostración" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Diagrama de flujo de sirena" diff --git a/web_widget_mermaid/i18n/fr.po b/web_widget_mermaid/i18n/fr.po new file mode 100644 index 000000000..24296e880 --- /dev/null +++ b/web_widget_mermaid/i18n/fr.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-02-01 12:44+0000\n" +"Last-Translator: Yann Papouin \n" +"Language-Team: none\n" +"Language: fr\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n > 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Organigramme de démonstration Mermaid" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Organigramme Mermaid" diff --git a/web_widget_mermaid/i18n/pt_BR.po b/web_widget_mermaid/i18n/pt_BR.po new file mode 100644 index 000000000..705aea47a --- /dev/null +++ b/web_widget_mermaid/i18n/pt_BR.po @@ -0,0 +1,27 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"PO-Revision-Date: 2021-03-15 06:45+0000\n" +"Last-Translator: Marcel Savegnago \n" +"Language-Team: none\n" +"Language: pt_BR\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: nplurals=2; plural=n > 1;\n" +"X-Generator: Weblate 4.3.2\n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "Fluxograma de demonstração do mermaid" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "Fluxograma Mermaid" diff --git a/web_widget_mermaid/i18n/web_widget_mermaid.pot b/web_widget_mermaid/i18n/web_widget_mermaid.pot new file mode 100644 index 000000000..443eba65e --- /dev/null +++ b/web_widget_mermaid/i18n/web_widget_mermaid.pot @@ -0,0 +1,25 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_mermaid +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"Last-Translator: <>\n" +"Language-Team: \n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=UTF-8\n" +"Content-Transfer-Encoding: \n" +"Plural-Forms: \n" + +#. module: web_widget_mermaid +#: model:ir.model.fields,field_description:web_widget_mermaid.res_users_flowchart +msgid "Demo mermaid flowchart" +msgstr "" + +#. module: web_widget_mermaid +#: model_terms:ir.ui.view,arch_db:web_widget_mermaid.view_users_form_flowchart +msgid "Mermaid flowchart" +msgstr "" + diff --git a/web_widget_mermaid/readme/CONTRIBUTORS.rst b/web_widget_mermaid/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000..672a6cc5a --- /dev/null +++ b/web_widget_mermaid/readme/CONTRIBUTORS.rst @@ -0,0 +1 @@ +* Jan Verbeek diff --git a/web_widget_mermaid/readme/DESCRIPTION.rst b/web_widget_mermaid/readme/DESCRIPTION.rst new file mode 100644 index 000000000..96efcbb46 --- /dev/null +++ b/web_widget_mermaid/readme/DESCRIPTION.rst @@ -0,0 +1,2 @@ +This module adds a basic widget for rendering text fields as flowcharts using +`mermaid `_. diff --git a/web_widget_mermaid/readme/USAGE.rst b/web_widget_mermaid/readme/USAGE.rst new file mode 100644 index 000000000..4dff90c1b --- /dev/null +++ b/web_widget_mermaid/readme/USAGE.rst @@ -0,0 +1,58 @@ +Put a ``widget="mermaid"`` attribute in relevant field tags in the view +declaration:: + + + +Optionally, use an ``options`` attribute to pass a JSON object with +`mermaid configuration `_:: + + + +The syntax for creating diagrams is described in +`mermaid's documentation `_. + +As an example, this text:: + + graph LR + 10.0 --> 11.0 + 11.0 --> 12.0 + 12.0 -.-> 13.0 + +Produces this flowchart: + +.. image:: ./static/description/flowchart_example.png + :alt: Flowchart + +Demonstration +============= + +In demo mode, the addon adds a flowchart field to users so you can try it. This shows up in Runbot instances. + +Upgrading Mermaid +================= + +This information is only relevant for the development of this addon, not for users. + +This addon uses a slightly tweaked build of Mermaid that works in older browsers. To reproduce it, take the following steps: + +- Clone ``https://github.com/knsv/mermaid/`` +- Checkout the version you want to upgrade to (e.g. ``git checkout 8.4.0``) +- In ``webpack.config.base.js``, in ``const jsRule = ...``, remove the ``include`` key (so all dependencies are transpiled) +- In ``babel.config.js``, in ``targets``, add some browsers besides ``node: 'current'``. I arbitrarily went with this:: + + targets: { + node: 'current', + ie: '11', + edge: '20', + firefox: '35', + chrome: '45', + safari: '9', + } + +- Run ``yarn install`` +- Run ``yarn build`` +- The completed file is now in ``dist/mermaid.js``. Try running ``grep 'let ' dist/mermaid.js`` to make sure everything was transpiled. The only output should be from comments. +- Copy ``dist/mermaid.js`` to ``web_widget_mermaid/static/lib/mermaid/mermaid.js``. +- Bump the version number in ``__manifest__.py`` to match the Mermaid version. diff --git a/web_widget_mermaid/static/description/flowchart_example.png b/web_widget_mermaid/static/description/flowchart_example.png new file mode 100644 index 0000000000000000000000000000000000000000..4c12b32cc3671eb11b8d2edcfe274f3a5a03f8fa GIT binary patch literal 1121 zcmZ9Mc}&x17{`kw1dO1v7*q^XGbUe{;0%IH&3dk`!+1#X9jySHk0X;b!M*%5V zEJ8UHYd4f~l(t-@R4P;`(3YD*eZPM^@AKv*+z#-u zJbd~v1Ol;y-tr8FKup5H+Qr-y^!#_c7vN(0&;uH3Zf-t3A2{wfq_}EXkIK9OT-Jq!;2%JMwUiLmL?|@laq>>8Rdr$ zD+}|$!UC`eYH@98aZRDv_{WG^sZ_75Y_6_u0f1)Bh-Q6#dt-fDy|JTK?`Sld?QQLj z5#8>tZf|d2tJUjt`u+Wb|1cN~A3+!Y(U**||Lu z=i}BzWagRSC!hsN+cNtHYPqnJTUNmDpWmqF#*PhUInGjnA5z=lxQFKkNMt6}{z@#= zFWeaTR7w-Yt_Qy1{@Rk04h=3q58BFIcNY-0^&TZ(IU%wWV&s(+8g`i;)M@8XZQb4b zbjioh8`^%Sv(1}h*)GVr;PeI zYAyhjQVGqGVp<4?e0vd6|4KKNl`FSLDQFkFaEEv~eP^|1^kb&-aqLHz^kLL2N1q1# zX4R@Y&6C-rKbT6@xwA)NRq+6stRMD=+jXq$Q?-`rR^%OZGCU_NcbkDlaM&T`34xeZ z`*d3;W2D{3Vd#b%*qDJhv826LoQu3uoIGJKwSyW|h&Wgkcou2qK7V~KJbBCJa?KP4 z&qQy2KL#c02?zc>}t&i?3%5i-F zf8H7Ni}{S!wkN`-KT0SFypR!WHN?nop4BRgQ-1LZF%%%nX(+c_V8S=)OIO>iU286i zYr92bMQFWKdbZNE>LYI2^Z%PAIM(EAu_Vej)l}WG$Fr1}!Cx;$zK*|IfWl7)O@j}G fD*t53ClqdR6)tX?#B)D^e+C5V72sL#aWC^<#2Aa~ literal 0 HcmV?d00001 diff --git a/web_widget_mermaid/static/description/icon.png b/web_widget_mermaid/static/description/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..3a0328b516c4980e8e44cdb63fd945757ddd132d GIT binary patch literal 9455 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 z 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 Xviia!U7SGha1wx#SCgwmn*{w2TRX*I literal 0 HcmV?d00001 diff --git a/web_widget_mermaid/static/description/index.html b/web_widget_mermaid/static/description/index.html new file mode 100644 index 000000000..d9ae65c28 --- /dev/null +++ b/web_widget_mermaid/static/description/index.html @@ -0,0 +1,488 @@ + + + + + + +Mermaid flowchart widget + + + +
+

Mermaid flowchart widget

+ + +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runbot

+

This module adds a basic widget for rendering text fields as flowcharts using +mermaid.

+

Table of contents

+ +
+

Usage

+

Put a widget="mermaid" attribute in relevant field tags in the view +declaration:

+
+<field name="flowchart" widget="mermaid"/>
+
+

Optionally, use an options attribute to pass a JSON object with +mermaid configuration:

+
+<field name="flowchart"
+       widget="mermaid"
+       options='{"theme": "forest", "gantt": {"fontSize": 14}}'/>
+
+

The syntax for creating diagrams is described in +mermaid’s documentation.

+

As an example, this text:

+
+graph LR
+    10.0 --> 11.0
+    11.0 --> 12.0
+    12.0 -.-> 13.0
+
+

Produces this flowchart:

+Flowchart +
+
+

Demonstration

+

In demo mode, the addon adds a flowchart field to users so you can try it. This shows up in Runbot instances.

+
+
+

Upgrading Mermaid

+

This information is only relevant for the development of this addon, not for users.

+

This addon uses a slightly tweaked build of Mermaid that works in older browsers. To reproduce it, take the following steps:

+
    +

  • Clone https://github.com/knsv/mermaid/

    +
    • +

  • Checkout the version you want to upgrade to (e.g. git checkout 8.4.0)

    +
    • +

  • In webpack.config.base.js, in const jsRule = ..., remove the include key (so all dependencies are transpiled)

    +
    • +

  • In babel.config.js, in targets, add some browsers besides node: 'current'. I arbitrarily went with this:

    +
    +targets: {
+  node: 'current',
+  ie: '11',
+  edge: '20',
+  firefox: '35',
+  chrome: '45',
+  safari: '9',
+}
+
    +
    • +

  • Run yarn install

    +
    • +

  • Run yarn build

    +
    • +

  • The completed file is now in dist/mermaid.js. Try running grep 'let ' dist/mermaid.js to make sure everything was transpiled. The only output should be from comments.

    +
    • +

  • Copy dist/mermaid.js to web_widget_mermaid/static/lib/mermaid/mermaid.js.

    +
    • +

  • Bump the version number in __manifest__.py to match the Mermaid version.

    +
    • +
+
+
+

Bug Tracker

+

Bugs are tracked on GitHub Issues. +In case of trouble, please check there if your issue has already been reported. +If you spotted it first, help us smashing it by providing a detailed and welcomed +feedback.

+

Do not contact contributors directly about support or help with technical issues.

+
+
+

Credits

+
+

Authors

+
    +
  • Therp BV
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+Odoo Community Association +

OCA, or the Odoo Community Association, is a nonprofit organization whose +mission is to support the collaborative development of Odoo features and +promote its widespread use.

+

This module is part of the OCA/web project on GitHub.

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_widget_mermaid/static/src/js/web_widget_mermaid.js b/web_widget_mermaid/static/src/js/web_widget_mermaid.js new file mode 100644 index 000000000..447851d51 --- /dev/null +++ b/web_widget_mermaid/static/src/js/web_widget_mermaid.js @@ -0,0 +1,113 @@ +odoo.define('web.web_widget_mermaid', function(require) { + "use strict"; + + var core = require('web.core'); + var basic_fields = require('web.basic_fields'); + var field_registry = require('web.field_registry'); + + // Calling mermaid.initialize() multiple times is ok. + // But there's a catch: it will keep the config of previous calls unless + // explicitly overridden, instead of reverting to the default settings. + // Therefore we make the default config explicit. This is taken from + // https://mermaidjs.github.io/#/mermaidAPI?id=mermaidapi-configuration-defaults + // so try copying from there if you update to a new version of mermaid + // with new options/defaults. + // Changes to the original default are marked with comments. + + var defaultConfig = { + theme: null, // We define a custom Odoo theme in a stylesheet + logLevel: 'fatal', + securityLevel: 'strict', + startOnLoad: false, // Rendering is initiated manually + arrowMarkerAbsolute: false, + + flowchart: { + htmlLabels: true, + curve: 'linear', + }, + + sequence: { + diagramMarginX: 50, + diagramMarginY: 10, + actorMargin: 50, + width: 150, + height: 65, + boxMargin: 10, + boxTextMargin: 5, + noteMargin: 10, + messageMargin: 35, + mirrorActors: true, + bottomMarginAdj: 1, + useMaxWidth: true, + rightAngles: false, + showSequenceNumbers: false, + }, + + gantt: { + titleTopMargin: 25, + barHeight: 20, + barGap: 4, + topPadding: 50, + leftPadding: 75, + gridLineStartPadding: 35, + fontSize: 11, + fontFamily: '"Lucida Grande", Helvetica, Verdana, Arial, ' + + 'sans-serif', // Match Odoo's font choices + numberSectionStyles: 4, + // Match configured date format + axisFormat: core._t.database.parameters.date_format, + } + }; + + var MermaidField = basic_fields.FieldText.extend({ + init: function() { + this._super.apply(this, arguments); + this.chartId = _.uniqueId('mermaid_chart_'); + }, + className: 'o_form_field_mermaid', + _renderReadonly: function() { + if (!this.value) { + return; + } + var config = _.extend( + {}, + defaultConfig, + this.attrs.options + ); + mermaid.mermaidAPI.initialize(config); + try { + mermaid.mermaidAPI.render( + this.chartId, + this.value, + this.$el.html.bind(this.$el) + ); + } catch (e) { + this.$el.html($('
').text(e.message || e.str));
+            }
+            // Mermaid uses a temporary div for rendering. It doesn't remove
+            // it if an error occurs, and perhaps in other cases too, so get
+            // rid of it if it's still around. The id is based on the chartId.
+            $('#d' + this.chartId).remove();
+        },
+        _parseValue: function(value) {
+            if (this.errorMessage) {
+                this.errorMessage.remove();
+            }
+            try {
+                mermaid.parse(value);
+            } catch (e) {
+                this.errorMessage = $('
').text(e.message || e.str);
+                this.$el.after(this.errorMessage);
+                throw e;
+            }
+            return value;
+        },
+    });
+
+    field_registry.add('mermaid', MermaidField);
+
+    return {
+        MermaidField: MermaidField,
+        defaultConfig: defaultConfig,
+    };
+});
diff --git a/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
new file mode 100644
index 000000000..1f9aab945
--- /dev/null
+++ b/web_widget_mermaid/static/src/scss/web_widget_mermaid_default_theme.scss
@@ -0,0 +1,408 @@
+.o_form_field_mermaid .label {
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  text-align: inherit;
+  color: inherit;
+}
+
+.o_form_field_mermaid .node .label {
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  color: $o-tooltip-color; }
+
+.o_form_field_mermaid .cluster .label {
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  color: $o-main-text-color; }
+
+.o_form_field_mermaid .label text {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .node rect,
+.o_form_field_mermaid .node circle,
+.o_form_field_mermaid .node ellipse,
+.o_form_field_mermaid .node polygon {
+  fill: $o-brand-primary;
+  stroke: $o-brand-primary;
+  stroke-width: 1px; }
+
+.o_form_field_mermaid .node.clickable {
+  cursor: pointer; }
+
+.o_form_field_mermaid .arrowheadPath {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .edgePath .path {
+  stroke: $o-main-text-color;
+  stroke-width: 1.5px; }
+
+.o_form_field_mermaid .edgeLabel {
+  background-color: #e8e8e8; }
+
+.o_form_field_mermaid .cluster rect {
+  fill: $o-brand-secondary;
+  stroke: $o-main-color-muted;
+  stroke-width: 1px; }
+
+.o_form_field_mermaid .cluster text {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 12px;
+  background: $o-brand-secondary;
+  border: 1px solid $o-main-color-muted;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 100; }
+
+.o_form_field_mermaid .actor {
+  stroke: $o-brand-primary;
+  fill: $o-brand-primary; }
+
+.o_form_field_mermaid text.actor {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .actor-line {
+  stroke: grey; }
+
+.o_form_field_mermaid .messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid .messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: '2 2';
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid #arrowhead {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sequenceNumber {
+  fill: white; }
+
+.o_form_field_mermaid #sequencenumber {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid #crosshead path {
+  fill: $o-main-text-color !important;
+  stroke: $o-main-text-color !important; }
+
+.o_form_field_mermaid .messageText {
+  fill: $o-main-text-color;
+  stroke: none; }
+
+.o_form_field_mermaid .labelBox {
+  stroke: $o-brand-primary;
+  fill: $o-brand-primary; }
+
+.o_form_field_mermaid .labelText {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .loopText {
+  fill: white;
+  stroke: none; }
+
+.o_form_field_mermaid .loopLine {
+  stroke-width: 2;
+  stroke-dasharray: '2 2';
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .note {
+  stroke: $o-main-color-muted;
+  fill: #fff5ad; }
+
+.o_form_field_mermaid .noteText {
+  fill: black;
+  stroke: none;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 14px; }
+
+.o_form_field_mermaid .activation0 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+.o_form_field_mermaid .activation1 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+.o_form_field_mermaid .activation2 {
+  fill: #f4f4f4;
+  stroke: #666; }
+
+/** Section styling */
+.o_form_field_mermaid .section {
+  stroke: none;
+  opacity: 0.2; }
+
+.o_form_field_mermaid .section0 {
+  fill: rgba(102, 102, 255, 0.49); }
+
+.o_form_field_mermaid .section2 {
+  fill: #fff400; }
+
+.o_form_field_mermaid .section1,
+.o_form_field_mermaid .section3 {
+  fill: white;
+  opacity: 0.2; }
+
+.o_form_field_mermaid .sectionTitle0 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle1 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle2 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle3 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px; }
+
+/* Grid and axis */
+.o_form_field_mermaid .grid .tick {
+  stroke: lightgrey;
+  opacity: 0.3;
+  shape-rendering: crispEdges; }
+
+.o_form_field_mermaid .grid path {
+  stroke-width: 0; }
+
+/* Today line */
+.o_form_field_mermaid .today {
+  fill: none;
+  stroke: red;
+  stroke-width: 2px; }
+
+/* Task styling */
+/* Default task */
+.o_form_field_mermaid .task {
+  stroke-width: 2; }
+
+.o_form_field_mermaid .taskText {
+  text-anchor: middle;
+  font-size: 11px; }
+
+.o_form_field_mermaid .taskTextOutsideRight {
+  fill: $o-main-text-color;
+  text-anchor: start;
+  font-size: 11px; }
+
+.o_form_field_mermaid .taskTextOutsideLeft {
+  fill: $o-main-text-color;
+  text-anchor: end;
+  font-size: 11px; }
+
+/* Special case clickable */
+.o_form_field_mermaid .task.clickable {
+  cursor: pointer; }
+
+.o_form_field_mermaid .taskText.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+.o_form_field_mermaid .taskTextOutsideLeft.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+.o_form_field_mermaid .taskTextOutsideRight.clickable {
+  cursor: pointer;
+  fill: #003163 !important;
+  font-weight: bold; }
+
+/* Specific task settings for the sections*/
+.o_form_field_mermaid .taskText0,
+.o_form_field_mermaid .taskText1,
+.o_form_field_mermaid .taskText2,
+.o_form_field_mermaid .taskText3 {
+  fill: white; }
+
+.o_form_field_mermaid .task0,
+.o_form_field_mermaid .task1,
+.o_form_field_mermaid .task2,
+.o_form_field_mermaid .task3 {
+  fill: $o-brand-primary;
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .taskTextOutside0,
+.o_form_field_mermaid .taskTextOutside2 {
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid .taskTextOutside1,
+.o_form_field_mermaid .taskTextOutside3 {
+  fill: $o-main-text-color; }
+
+/* Active task */
+.o_form_field_mermaid .active0,
+.o_form_field_mermaid .active1,
+.o_form_field_mermaid .active2,
+.o_form_field_mermaid .active3 {
+  fill: #bfc7ff;
+  stroke: $o-brand-primary; }
+
+.o_form_field_mermaid .activeText0,
+.o_form_field_mermaid .activeText1,
+.o_form_field_mermaid .activeText2,
+.o_form_field_mermaid .activeText3 {
+  fill: $o-main-text-color !important; }
+
+/* Completed task */
+.o_form_field_mermaid .done0,
+.o_form_field_mermaid .done1,
+.o_form_field_mermaid .done2,
+.o_form_field_mermaid .done3 {
+  stroke: grey;
+  fill: lightgrey;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .doneText0,
+.o_form_field_mermaid .doneText1,
+.o_form_field_mermaid .doneText2,
+.o_form_field_mermaid .doneText3 {
+  fill: $o-main-text-color !important; }
+
+/* Tasks on the critical line */
+.o_form_field_mermaid .crit0,
+.o_form_field_mermaid .crit1,
+.o_form_field_mermaid .crit2,
+.o_form_field_mermaid .crit3 {
+  stroke: #ff8888;
+  fill: red;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .activeCrit0,
+.o_form_field_mermaid .activeCrit1,
+.o_form_field_mermaid .activeCrit2,
+.o_form_field_mermaid .activeCrit3 {
+  stroke: #ff8888;
+  fill: #bfc7ff;
+  stroke-width: 2; }
+
+.o_form_field_mermaid .doneCrit0,
+.o_form_field_mermaid .doneCrit1,
+.o_form_field_mermaid .doneCrit2,
+.o_form_field_mermaid .doneCrit3 {
+  stroke: #ff8888;
+  fill: lightgrey;
+  stroke-width: 2;
+  cursor: pointer;
+  shape-rendering: crispEdges; }
+
+.o_form_field_mermaid .milestone {
+  transform: rotate(45deg) scale(0.8, 0.8); }
+
+.o_form_field_mermaid .milestoneText {
+  font-style: italic; }
+
+.o_form_field_mermaid .doneCritText0,
+.o_form_field_mermaid .doneCritText1,
+.o_form_field_mermaid .doneCritText2,
+.o_form_field_mermaid .doneCritText3 {
+  fill: $o-main-text-color !important; }
+
+.o_form_field_mermaid .activeCritText0,
+.o_form_field_mermaid .activeCritText1,
+.o_form_field_mermaid .activeCritText2,
+.o_form_field_mermaid .activeCritText3 {
+  fill: $o-main-text-color !important; }
+
+.o_form_field_mermaid .titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: $o-main-text-color; }
+
+.o_form_field_mermaid g.classGroup text {
+  fill: white;
+  stroke: none;
+  font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif;
+  font-size: 10px; }
+
+.o_form_field_mermaid g.classGroup rect {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color; }
+
+.o_form_field_mermaid g.classGroup line {
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid .classLabel .box {
+  stroke: none;
+  stroke-width: 0;
+  fill: $o-brand-primary;
+  opacity: 0.5; }
+
+.o_form_field_mermaid .classLabel .label {
+  fill: $o-main-text-color;
+  font-size: 10px;
+  font-weight: normal; }
+
+.o_form_field_mermaid .relation {
+  stroke: $o-main-text-color;
+  stroke-width: 1;
+  fill: none; }
+
+.o_form_field_mermaid #compositionStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #compositionEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #aggregationStart {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #aggregationEnd {
+  fill: $o-brand-primary;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #dependencyStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #dependencyEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #extensionStart {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid #extensionEnd {
+  fill: $o-main-text-color;
+  stroke: $o-main-text-color;
+  stroke-width: 1; }
+
+.o_form_field_mermaid .commit-id,
+.o_form_field_mermaid .commit-msg,
+.o_form_field_mermaid .branch-label {
+  fill: lightgrey;
+  color: $o-main-text-color; }
+
+.o_form_field_mermaid .node-label p {
+  margin-top: 9px; }
+
+.o_form_field_mermaid .pieTitleText {
+  text-anchor: middle;
+  font-size: 25px;
+  fill: $o-main-text-color; }
diff --git a/web_widget_mermaid/view/web_widget_mermaid_view.xml b/web_widget_mermaid/view/web_widget_mermaid_view.xml
new file mode 100644
index 000000000..0f2a67293
--- /dev/null
+++ b/web_widget_mermaid/view/web_widget_mermaid_view.xml
@@ -0,0 +1,10 @@
+
+
+    
+