diff --git a/domain/section/mermaid/mermaid.go b/domain/section/mermaid/mermaid.go new file mode 100644 index 00000000..48c8d9cc --- /dev/null +++ b/domain/section/mermaid/mermaid.go @@ -0,0 +1,55 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +package mermaid + +import ( + "net/http" + + "github.com/documize/community/core/env" + "github.com/documize/community/domain" + "github.com/documize/community/domain/section/provider" +) + +// Provider represents Mermaid Diagram +type Provider struct { + Runtime *env.Runtime + Store *domain.Store +} + +// Meta describes us +func (*Provider) Meta() provider.TypeMeta { + section := provider.TypeMeta{} + + section.ID = "f1067a60-45e5-40b5-89f6-aa3b03dd7f35" + section.Title = "Mermaid Diagram" + section.Description = "Diagrams generated from textual descriptions" + section.ContentType = "mermaid" + section.PageType = "tab" + section.Order = 9990 + + return section +} + +// Command stub. +func (*Provider) Command(ctx *provider.Context, w http.ResponseWriter, r *http.Request) { + provider.WriteEmpty(w) +} + +// Render returns data as-is (HTML). +func (*Provider) Render(ctx *provider.Context, config, data string) string { + return data +} + +// Refresh just sends back data as-is. +func (*Provider) Refresh(ctx *provider.Context, config, data string) string { + return data +} diff --git a/gui/.eslintrc.js b/gui/.eslintrc.js index 20f01e08..b6a983ed 100644 --- a/gui/.eslintrc.js +++ b/gui/.eslintrc.js @@ -45,6 +45,7 @@ module.exports = { ], globals: { "is": true, + "mermaid": true, "_": true, "tinymce": true, "CodeMirror": true, diff --git a/gui/app/components/section/mermaid/type-editor.js b/gui/app/components/section/mermaid/type-editor.js new file mode 100644 index 00000000..d99a3698 --- /dev/null +++ b/gui/app/components/section/mermaid/type-editor.js @@ -0,0 +1,169 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +import { computed, observer } from '@ember/object'; +import Component from '@ember/component'; + +export default Component.extend({ + isDirty: false, + diagramText: '', + diagramPreview: null, + config: null, + + editorId: computed('page', function () { + let page = this.get('page'); + return `mermaid-editor-${page.id}`; + }), + previewId: computed('page', function () { + let page = this.get('page'); + return `mermaid-preview-${page.id}`; + }), + // generateDiagram: observer('diagramText', function() { + // let txt = this.get('diagramText'); + // console.log('calc diaggram'); + + // let self = this; + // var cb = function(svg) { + // return svg; + // // self.set('diagramPreview', svg); + // }; + + // if (is.empty(this.get('diagramText'))) return ''; + + // mermaid.render(this.get('previewId'), txt, cb); + // }), + + keyUp() { + this.generateDiagram(); + }, + + generateDiagram() { + console.log('calc diaggram'); + + let txt = this.get('diagramText'); + if (is.empty(this.get('diagramText'))) this.set('diagramPreview', ''); + + let self = this; + var cb = function(svg) { + self.set('diagramPreview', svg); + }; + + mermaid.render(this.get('previewId'), txt, cb); + }, + + didReceiveAttrs() { + this._super(...arguments); + let config = {}; + mermaid.initialize({}); + console.log('dra'); + + try { + config = JSON.parse(this.get('meta.config')); + } catch (e) {} // eslint-disable-line no-empty + + if (is.empty(config)) { + config = { + txt: "" + }; + } + + this.set('diagramText', config.txt); + this.set('config', config); + + this.generateDiagram(); + }, + + // onType: function() { + // debounce(this, this.generateDiagram, 350); + // }.observes('diagramText'), + + actions: { + isDirty() { + return this.get('isDirty') || (this.get('diagramText') !== this.get('config.txt')); + }, + + onCancel() { + let cb = this.get('onCancel'); + cb(); + }, + + onAction(title) { + let page = this.get('page'); + let meta = this.get('meta'); + + meta.set('config', JSON.stringify({ txt: this.get('diagramText') })); + meta.set('rawBody', this.get('diagramPreview')); + page.set('body', this.get('diagramPreview')); + page.set('title', title); + + let cb = this.get('onAction'); + cb(page, meta); + }, + + onInsertFlowchart() { + let txt = `graph TB + c1-->a2 + subgraph one + a1-->a2 + end + subgraph two + b1-->b2 + end + subgraph three + c1-->c2 + end`; + + // this.set('diagramPreview', null); + this.set('diagramText', txt); + this.generateDiagram(); + }, + + onInsertSequence() { + let txt = `sequenceDiagram + participant Alice + participant Bob + Alice->John: Hello John, how are you? + loop Healthcheck + John->John: Fight against hypochondria + end + Note right of John: Rational thoughts
prevail... + John-->Alice: Great! + John->Bob: How about you? + Bob-->John: Jolly good!`; + + // this.set('diagramPreview', null); + this.set('diagramText', txt); + this.generateDiagram(); + }, + + onInsertGantt() { + let txt = `gantt + dateFormat YYYY-MM-DD + title Adding GANTT diagram functionality to mermaid + section A section + Completed task :done, des1, 2014-01-06,2014-01-08 + Active task :active, des2, 2014-01-09, 3d + Future task : des3, after des2, 5d + Future task2 : des4, after des3, 5d + section Critical tasks + Completed task in the critical line :crit, done, 2014-01-06,24h + Implement parser and jison :crit, done, after des1, 2d + Create tests for parser :crit, active, 3d + Future task in critical line :crit, 5d + Create tests for renderer :2d + Add to mermaid :1d`; + + // this.set('diagramPreview', null); + this.set('diagramText', txt); + this.generateDiagram(); + } + } +}); diff --git a/gui/app/components/section/mermaid/type-renderer.js b/gui/app/components/section/mermaid/type-renderer.js new file mode 100644 index 00000000..e790b207 --- /dev/null +++ b/gui/app/components/section/mermaid/type-renderer.js @@ -0,0 +1,15 @@ +// Copyright 2016 Documize Inc. . All rights reserved. +// +// This software (Documize Community Edition) is licensed under +// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html +// +// You can operate outside the AGPL restrictions by purchasing +// Documize Enterprise Edition and obtaining a commercial license +// by contacting . +// +// https://documize.com + +import Component from '@ember/component'; + +export default Component.extend({ +}); diff --git a/gui/app/styles/app.scss b/gui/app/styles/app.scss index 3eba2a09..3a94f533 100644 --- a/gui/app/styles/app.scss +++ b/gui/app/styles/app.scss @@ -28,6 +28,7 @@ @import "section/markdown.scss"; @import "section/table.scss"; @import "section/code.scss"; +@import "section/mermaid.scss"; @import "section/papertrail.scss"; @import "section/wysiwyg.scss"; diff --git a/gui/app/styles/base.scss b/gui/app/styles/base.scss index 053b5055..5001429e 100644 --- a/gui/app/styles/base.scss +++ b/gui/app/styles/base.scss @@ -23,7 +23,7 @@ body { height: 100%; min-height: 100%; width: 100%; - overflow-y: scroll; + // overflow-y: scroll; } a { diff --git a/gui/app/styles/section/mermaid.scss b/gui/app/styles/section/mermaid.scss new file mode 100644 index 00000000..254b2b05 --- /dev/null +++ b/gui/app/styles/section/mermaid.scss @@ -0,0 +1,4 @@ +.section-mermaid-diagram { + margin: 0; + padding: 0; +} diff --git a/gui/app/templates/components/section/mermaid/type-editor.hbs b/gui/app/templates/components/section/mermaid/type-editor.hbs new file mode 100644 index 00000000..58614594 --- /dev/null +++ b/gui/app/templates/components/section/mermaid/type-editor.hbs @@ -0,0 +1,30 @@ +{{#section/base-editor document=document folder=folder page=page tip="Concise name that describes the diagram" isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}} +
+
+
+
+
+ (Mermaid User Guide) + +
+

Insert sample diagrams:

+

+ + + +

+
+
+
+
+
+ +
+ {{{diagramPreview}}} +
+
+
+
+
+
+{{/section/base-editor}} diff --git a/gui/app/templates/components/section/mermaid/type-renderer.hbs b/gui/app/templates/components/section/mermaid/type-renderer.hbs new file mode 100644 index 00000000..dd2e0251 --- /dev/null +++ b/gui/app/templates/components/section/mermaid/type-renderer.hbs @@ -0,0 +1,3 @@ +
+ {{{page.body}}} +
diff --git a/gui/public/sections/mermaid.png b/gui/public/sections/mermaid.png new file mode 100644 index 00000000..56ee0627 Binary files /dev/null and b/gui/public/sections/mermaid.png differ diff --git a/gui/public/sections/mermaid@2x.png b/gui/public/sections/mermaid@2x.png new file mode 100644 index 00000000..8ddb71b6 Binary files /dev/null and b/gui/public/sections/mermaid@2x.png differ