mirror of
https://github.com/documize/community.git
synced 2025-08-04 21:15:24 +02:00
PlantUML integration
This commit is contained in:
sauls8t
parent
0f3de51ad5
commit
7d3473365a
18 changed files with 521 additions and 291 deletions
|
|
@ -1,169 +0,0 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. 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 <sales@documize.com>.
|
||||
//
|
||||
// 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 <br/>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();
|
||||
}
|
||||
}
|
||||
});
|
||||
342
gui/app/components/section/plantuml/type-editor.js
Normal file
342
gui/app/components/section/plantuml/type-editor.js
Normal file
|
|
@ -0,0 +1,342 @@
|
|||
// Copyright 2016 Documize Inc. <legal@documize.com>. 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 <sales@documize.com>.
|
||||
//
|
||||
// https://documize.com
|
||||
|
||||
import { schedule } from '@ember/runloop';
|
||||
import { inject as service } from '@ember/service';
|
||||
import { computed, observer } from '@ember/object';
|
||||
import Component from '@ember/component';
|
||||
|
||||
export default Component.extend({
|
||||
appMeta: service(),
|
||||
sectionSvc: service('section'),
|
||||
isDirty: false,
|
||||
waiting: false,
|
||||
diagramText: '',
|
||||
diagramPreview: null,
|
||||
previewButtonCaption: 'Preview',
|
||||
|
||||
editorId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `plantuml-editor-${page.id}`;
|
||||
}),
|
||||
previewId: computed('page', function () {
|
||||
let page = this.get('page');
|
||||
return `plantuml-preview-${page.id}`;
|
||||
}),
|
||||
|
||||
generatePreview() {
|
||||
this.set('waiting', true);
|
||||
this.set('previewButtonCaption', 'Generating preview...');
|
||||
|
||||
let self = this;
|
||||
let data = { data: this.get('diagramText') };
|
||||
|
||||
schedule('afterRender', () => {
|
||||
this.get('sectionSvc').fetch(this.get('page'), 'preview', data).then(function (response) {
|
||||
self.set('diagramPreview', response.data);
|
||||
self.set('waiting', false);
|
||||
self.set('previewButtonCaption', 'Preview');
|
||||
}, function (reason) { // eslint-disable-line no-unused-vars
|
||||
self.set('diagramPreview', null);
|
||||
self.set('waiting', false);
|
||||
self.set('previewButtonCaption', 'Preview');
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
didReceiveAttrs() {
|
||||
this._super(...arguments);
|
||||
this.set('waiting', false);
|
||||
this.set('diagramText', this.get('meta.rawBody'));
|
||||
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
actions: {
|
||||
isDirty() {
|
||||
return this.get('isDirty') || (this.get('diagramText') !== this.get('meta.rawBody'));
|
||||
},
|
||||
|
||||
onCancel() {
|
||||
let cb = this.get('onCancel');
|
||||
cb();
|
||||
},
|
||||
|
||||
onPreview() {
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onAction(title) {
|
||||
this.set('waiting', true);
|
||||
let page = this.get('page');
|
||||
let meta = this.get('meta');
|
||||
|
||||
meta.set('rawBody', this.get('diagramText'));
|
||||
page.set('title', title);
|
||||
|
||||
let cb = this.get('onAction');
|
||||
cb(page, meta);
|
||||
this.set('waiting', false);
|
||||
},
|
||||
|
||||
onInsertActivity() {
|
||||
let txt = `
|
||||
@startuml
|
||||
title Servlet Container
|
||||
|
||||
(*) --> "ClickServlet.handleRequest()"
|
||||
--> "new Page"
|
||||
|
||||
if "Page.onSecurityCheck" then
|
||||
->[true] "Page.onInit()"
|
||||
|
||||
if "isForward?" then
|
||||
->[no] "Process controls"
|
||||
|
||||
if "continue processing?" then
|
||||
-->[yes] ===RENDERING===
|
||||
else
|
||||
-->[no] ===REDIRECT_CHECK===
|
||||
endif
|
||||
|
||||
else
|
||||
-->[yes] ===RENDERING===
|
||||
endif
|
||||
|
||||
if "is Post?" then
|
||||
-->[yes] "Page.onPost()"
|
||||
--> "Page.onRender()" as render
|
||||
--> ===REDIRECT_CHECK===
|
||||
else
|
||||
-->[no] "Page.onGet()"
|
||||
--> render
|
||||
endif
|
||||
|
||||
else
|
||||
-->[false] ===REDIRECT_CHECK===
|
||||
endif
|
||||
|
||||
if "Do redirect?" then
|
||||
->[yes] "redirect request"
|
||||
--> ==BEFORE_DESTROY===
|
||||
else
|
||||
if "Do Forward?" then
|
||||
-left->[yes] "Forward request"
|
||||
--> ==BEFORE_DESTROY===
|
||||
else
|
||||
-right->[no] "Render page template"
|
||||
--> ==BEFORE_DESTROY===
|
||||
endif
|
||||
endif
|
||||
|
||||
--> "Page.onDestroy()"
|
||||
-->(*)
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertSequence() {
|
||||
let txt = `
|
||||
@startuml
|
||||
actor Bob #red
|
||||
' The only difference between actor
|
||||
'and participant is the drawing
|
||||
participant Alice
|
||||
participant "I have a reallylong name" as L #99FF99
|
||||
/' You can also declare:
|
||||
participant L as "I have a really long name" #99FF99
|
||||
'/
|
||||
|
||||
Alice->Bob: Authentication Request
|
||||
Bob->Alice: Authentication Response
|
||||
Bob->L: Log transaction
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertUseCase() {
|
||||
let txt = `
|
||||
@startuml
|
||||
:Main Admin: as Admin
|
||||
(Use the application) as (Use)
|
||||
|
||||
User -> (Start)
|
||||
User --> (Use)
|
||||
|
||||
Admin ---> (Use)
|
||||
|
||||
note right of Admin : This is an example.
|
||||
|
||||
note right of (Use)
|
||||
A note can also
|
||||
be on several lines
|
||||
end note
|
||||
|
||||
note "This note is connected to several objects." as N2
|
||||
(Start) .. N2
|
||||
N2 .. (Use)
|
||||
@enduml
|
||||
`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertClass() {
|
||||
let txt = `
|
||||
@startuml
|
||||
class Foo1 {
|
||||
You can use
|
||||
several lines
|
||||
..
|
||||
as you want
|
||||
and group
|
||||
==
|
||||
things together.
|
||||
__
|
||||
You can have as many groups
|
||||
as you want
|
||||
--
|
||||
End of class
|
||||
}
|
||||
|
||||
class User {
|
||||
.. Simple Getter ..
|
||||
+ getName()
|
||||
+ getAddress()
|
||||
.. Some setter ..
|
||||
+ setName()
|
||||
__ private data __
|
||||
int age
|
||||
-- encrypted --
|
||||
String password
|
||||
}
|
||||
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertActivityNew() {
|
||||
let txt = `
|
||||
@startuml
|
||||
|
||||
start
|
||||
:ClickServlet.handleRequest();
|
||||
:new page;
|
||||
if (Page.onSecurityCheck) then (true)
|
||||
:Page.onInit();
|
||||
if (isForward?) then (no)
|
||||
:Process controls;
|
||||
if (continue processing?) then (no)
|
||||
stop
|
||||
endif
|
||||
|
||||
if (isPost?) then (yes)
|
||||
:Page.onPost();
|
||||
else (no)
|
||||
:Page.onGet();
|
||||
endif
|
||||
:Page.onRender();
|
||||
endif
|
||||
else (false)
|
||||
endif
|
||||
|
||||
if (do redirect?) then (yes)
|
||||
:redirect process;
|
||||
else
|
||||
if (do forward?) then (yes)
|
||||
:Forward request;
|
||||
else (no)
|
||||
:Render page template;
|
||||
endif
|
||||
endif
|
||||
|
||||
stop
|
||||
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertComponent() {
|
||||
let txt = `
|
||||
@startuml
|
||||
|
||||
package "Some Group" {
|
||||
HTTP - [First Component]
|
||||
[Another Component]
|
||||
}
|
||||
|
||||
node "Other Groups" {
|
||||
FTP - [Second Component]
|
||||
[First Component] --> FTP
|
||||
}
|
||||
|
||||
cloud {
|
||||
[Example 1]
|
||||
}
|
||||
|
||||
|
||||
database "MySql" {
|
||||
folder "This is my folder" {
|
||||
[Folder 3]
|
||||
}
|
||||
frame "Foo" {
|
||||
[Frame 4]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[Another Component] --> [Example 1]
|
||||
[Example 1] --> [Folder 3]
|
||||
[Folder 3] --> [Frame 4]
|
||||
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
},
|
||||
|
||||
onInsertState() {
|
||||
let txt = `
|
||||
@startuml
|
||||
scale 600 width
|
||||
|
||||
[*] -> State1
|
||||
State1 --> State2 : Succeeded
|
||||
State1 --> [*] : Aborted
|
||||
State2 --> State3 : Succeeded
|
||||
State2 --> [*] : Aborted
|
||||
state State3 {
|
||||
state "Some State Name" as long1
|
||||
long1 : Just a test
|
||||
[*] --> long1
|
||||
long1 --> long1 : New Data
|
||||
long1 --> ProcessData : Enough Data
|
||||
}
|
||||
State3 --> State3 : Failed
|
||||
State3 --> [*] : Succeeded / Save Result
|
||||
State3 --> [*] : Aborted
|
||||
|
||||
@enduml`;
|
||||
|
||||
this.set('diagramText', txt);
|
||||
this.generatePreview();
|
||||
}
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue