Add bpmn-js integration.
-- Original fork (in case you do not want to add an extra dependency for that specific use case): https://github.com/sabatale/filebrowser -- Adds bpmn-js (new dependency) integration for diagrams: https://github.com/bpmn-io/bpmn-js. Any .bpmn file will open with the bpmn-js viewer instead of showing up as an XML file. No side-effects to be exepected since this introduces a new getter (IsDiagrams) for .bpmn extensions. You can drag the diagram around and zoom in/out as well. Use the folder "demo diagrams" for an actual .bpmn example as well as some extra documentation.
This commit is contained in:
sabatale
parent
fb13ded8e8
commit
887eeff98e
30
demo diagrams/bpmn-integration.md
Normal file
30
demo diagrams/bpmn-integration.md
Normal file
@ -0,0 +1,30 @@
|
||||
<p align="center">
|
||||
<h2>BPMN-JS Integration</h2>
|
||||
<h3>View diagrams in filebrowser!</h3>
|
||||
</p>
|
||||
|
||||
> ⚠ WARNING: **In case the .bpmn still opens in the Files Editor, try adding the mime regedit entry locally. See [the official GOlang documentation](https://golang.org/pkg/mime/) for more info about "TypeByExtension"!**
|
||||
|
||||
|
||||
|
||||
|
||||
Nowadays, business diagrams follow the universal BPMN standard.
|
||||
|
||||
The open-source solution bpmn-js from BPMN.io makes it very easy to view and build such diagrams.
|
||||
|
||||
This new filebrowser feature enables the integration with bpmn-js for viewing only.
|
||||
|
||||
## Features
|
||||
|
||||
Open any .bpmn file to view the diagram.
|
||||
|
||||
You can click and hold the mouse in order to move the diagram around.
|
||||
|
||||
You can also zoom with CTRL + Scroll!
|
||||
|
||||
## To do
|
||||
|
||||
Add bpmn-js extensions.
|
||||
|
||||
## Author
|
||||
Alexandre S.
|
||||
148
demo diagrams/diagram.bpmn
Normal file
148
demo diagrams/diagram.bpmn
Normal file
@ -0,0 +1,148 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
|
||||
<collaboration id="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
|
||||
<participant id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" name="Customer" processRef="sid-C3803939-0872-457F-8336-EAE484DC4A04" />
|
||||
</collaboration>
|
||||
<process id="sid-C3803939-0872-457F-8336-EAE484DC4A04" name="Customer" processType="None" isClosed="false" isExecutable="false">
|
||||
<extensionElements />
|
||||
<laneSet id="sid-b167d0d7-e761-4636-9200-76b7f0e8e83a">
|
||||
<lane id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254">
|
||||
<flowNodeRef>sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26</flowNodeRef>
|
||||
<flowNodeRef>sid-E49425CF-8287-4798-B622-D2A7D78EF00B</flowNodeRef>
|
||||
<flowNodeRef>sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138</flowNodeRef>
|
||||
<flowNodeRef>sid-E433566C-2289-4BEB-A19C-1697048900D2</flowNodeRef>
|
||||
<flowNodeRef>sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9</flowNodeRef>
|
||||
<flowNodeRef>SCAN_OK</flowNodeRef>
|
||||
</lane>
|
||||
</laneSet>
|
||||
<task id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" name="Scan QR code">
|
||||
<incoming>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</incoming>
|
||||
<outgoing>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</outgoing>
|
||||
</task>
|
||||
<task id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" name="Open product information in mobile app">
|
||||
<incoming>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</incoming>
|
||||
<outgoing>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</outgoing>
|
||||
</task>
|
||||
<startEvent id="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" name="Notices QR code">
|
||||
<outgoing>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</outgoing>
|
||||
</startEvent>
|
||||
<endEvent id="sid-E433566C-2289-4BEB-A19C-1697048900D2" name="Is informed">
|
||||
<incoming>sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C</incoming>
|
||||
</endEvent>
|
||||
<exclusiveGateway id="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9">
|
||||
<incoming>sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD</incoming>
|
||||
<incoming>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</incoming>
|
||||
<outgoing>sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D</outgoing>
|
||||
</exclusiveGateway>
|
||||
<exclusiveGateway id="SCAN_OK" name="Scan successful? ">
|
||||
<incoming>sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A</incoming>
|
||||
<outgoing>sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB</outgoing>
|
||||
<outgoing>sid-337A23B9-A923-4CCE-B613-3E247B773CCE</outgoing>
|
||||
</exclusiveGateway>
|
||||
<sequenceFlow id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE" name="Yes" sourceRef="SCAN_OK" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
|
||||
<sequenceFlow id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D" sourceRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" targetRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" />
|
||||
<sequenceFlow id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB" name="No" sourceRef="SCAN_OK" targetRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" />
|
||||
<sequenceFlow id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C" sourceRef="sid-E49425CF-8287-4798-B622-D2A7D78EF00B" targetRef="sid-E433566C-2289-4BEB-A19C-1697048900D2" />
|
||||
<sequenceFlow id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A" sourceRef="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26" targetRef="SCAN_OK" />
|
||||
<sequenceFlow id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD" sourceRef="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138" targetRef="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" />
|
||||
</process>
|
||||
<bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
|
||||
<bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424">
|
||||
<bpmndi:BPMNShape id="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F_gui" bpmnElement="sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F" isHorizontal="true">
|
||||
<omgdc:Bounds x="83" y="105" width="933" height="250" />
|
||||
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
||||
<omgdc:Bounds x="47.49999999999999" y="170.42857360839844" width="12.000000000000014" height="59.142852783203125" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254_gui" bpmnElement="sid-57E4FE0D-18E4-478D-BC5D-B15164E93254" isHorizontal="true">
|
||||
<omgdc:Bounds x="113" y="105" width="903" height="250" />
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26_gui" bpmnElement="sid-52EB1772-F36E-433E-8F5B-D5DFD26E6F26">
|
||||
<omgdc:Bounds x="393" y="170" width="100" height="80" />
|
||||
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
||||
<omgdc:Bounds x="360.5" y="172" width="84" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="sid-E49425CF-8287-4798-B622-D2A7D78EF00B_gui" bpmnElement="sid-E49425CF-8287-4798-B622-D2A7D78EF00B">
|
||||
<omgdc:Bounds x="728" y="170" width="100" height="80" />
|
||||
<bpmndi:BPMNLabel labelStyle="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
||||
<omgdc:Bounds x="695.9285736083984" y="162" width="83.14285278320312" height="36" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNEdge id="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A_gui" bpmnElement="sid-EE8A7BA0-5D66-4F8B-80E3-CC2751B3856A">
|
||||
<omgdi:waypoint x="493" y="210" />
|
||||
<omgdi:waypoint x="585" y="210" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="494" y="185" width="90" height="20" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB_gui" bpmnElement="sid-8B820AF5-DC5C-4618-B854-E08B71FB55CB">
|
||||
<omgdi:waypoint x="635" y="210" />
|
||||
<omgdi:waypoint x="728" y="210" />
|
||||
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
||||
<omgdc:Bounds x="642" y="185" width="16" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD_gui" bpmnElement="sid-7B791A11-2F2E-4D80-AFB3-91A02CF2B4FD">
|
||||
<omgdi:waypoint x="223" y="210" />
|
||||
<omgdi:waypoint x="275" y="210" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="204" y="185" width="90" height="20" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D_gui" bpmnElement="sid-4DC479E5-5C20-4948-BCFC-9EC5E2F66D8D">
|
||||
<omgdi:waypoint x="325" y="210" />
|
||||
<omgdi:waypoint x="393" y="210" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="314" y="185" width="90" height="20" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C_gui" bpmnElement="sid-57EB1F24-BD94-479A-BF1F-57F1EAA19C6C">
|
||||
<omgdi:waypoint x="828" y="210" />
|
||||
<omgdi:waypoint x="901" y="210" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="820" y="185" width="90" height="20" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNEdge id="sid-337A23B9-A923-4CCE-B613-3E247B773CCE_gui" bpmnElement="sid-337A23B9-A923-4CCE-B613-3E247B773CCE">
|
||||
<omgdi:waypoint x="611" y="234" />
|
||||
<omgdi:waypoint x="610.5" y="299" />
|
||||
<omgdi:waypoint x="300.5" y="299" />
|
||||
<omgdi:waypoint x="301" y="234" />
|
||||
<bpmndi:BPMNLabel labelStyle="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
||||
<omgdc:Bounds x="585" y="236" width="21" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNEdge>
|
||||
<bpmndi:BPMNShape id="StartEvent_0l6sgn0_di" bpmnElement="sid-D7F237E8-56D0-4283-A3CE-4F0EFE446138">
|
||||
<omgdc:Bounds x="187" y="192" width="36" height="36" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="182" y="229" width="46" height="24" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="EndEvent_0xwuvv5_di" bpmnElement="sid-E433566C-2289-4BEB-A19C-1697048900D2">
|
||||
<omgdc:Bounds x="901" y="192" width="36" height="36" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="892" y="231" width="56" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="ExclusiveGateway_1g0eih2_di" bpmnElement="sid-5134932A-1863-4FFA-BB3C-A4B4078B11A9" isMarkerVisible="true">
|
||||
<omgdc:Bounds x="275" y="185" width="50" height="50" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="210" y="160" width="90" height="12" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
<bpmndi:BPMNShape id="ExclusiveGateway_0vci1x5_di" bpmnElement="SCAN_OK" isMarkerVisible="true">
|
||||
<omgdc:Bounds x="585" y="185" width="50" height="50" />
|
||||
<bpmndi:BPMNLabel>
|
||||
<omgdc:Bounds x="568" y="157" width="88" height="24" />
|
||||
</bpmndi:BPMNLabel>
|
||||
</bpmndi:BPMNShape>
|
||||
</bpmndi:BPMNPlane>
|
||||
<bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
|
||||
<omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
|
||||
</bpmndi:BPMNLabelStyle>
|
||||
<bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
|
||||
<omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
|
||||
</bpmndi:BPMNLabelStyle>
|
||||
</bpmndi:BPMNDiagram>
|
||||
</definitions>
|
||||
@ -149,11 +149,25 @@ func (i *FileInfo) detectType(modify, saveContent bool) error {
|
||||
}
|
||||
|
||||
mimetype := mime.TypeByExtension(i.Extension)
|
||||
if i.Extension == ".bpmn" { //Hardcoded extension because BPMN is not available in mime-db.
|
||||
mimetype = "bpmn"
|
||||
}
|
||||
if mimetype == "" {
|
||||
mimetype = http.DetectContentType(buffer[:n])
|
||||
}
|
||||
|
||||
switch {
|
||||
case strings.HasPrefix(mimetype, "bpmn"):
|
||||
i.Type = "bpmn"
|
||||
// START - Store content from API json for further use cases
|
||||
afs := &afero.Afero{Fs: i.Fs}
|
||||
content, err := afs.ReadFile(i.Path)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
i.Content = string(content)
|
||||
// END - Store content from API json for further use cases
|
||||
return nil
|
||||
case strings.HasPrefix(mimetype, "video"):
|
||||
i.Type = "video"
|
||||
i.detectSubtitles()
|
||||
|
||||
187
frontend/package-lock.json
generated
187
frontend/package-lock.json
generated
@ -2904,6 +2904,39 @@
|
||||
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
|
||||
"dev": true
|
||||
},
|
||||
"bpmn-font": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/bpmn-font/-/bpmn-font-0.8.0.tgz",
|
||||
"integrity": "sha512-j8u5k7EcGkmg7WkPgObxyvMEccr0qyiCuvXGnM5G2Q+kza119vVq3gblt0Rro/UDjl7i3VmfG3ojeZ04VHeVFg=="
|
||||
},
|
||||
"bpmn-js": {
|
||||
"version": "3.5.0",
|
||||
"resolved": "https://registry.npmjs.org/bpmn-js/-/bpmn-js-3.5.0.tgz",
|
||||
"integrity": "sha512-PfNM0UbztNyd7+8+hQCThQTwo3ViIAJbpGff1N93dJauwTeF1sYPdjF2w2mQi5pucoYtPmf33fsH8SD3BAjd2g==",
|
||||
"requires": {
|
||||
"bpmn-font": "^0.8.0",
|
||||
"bpmn-moddle": "^5.1.6",
|
||||
"css.escape": "^1.5.1",
|
||||
"diagram-js": "^3.3.1",
|
||||
"diagram-js-direct-editing": "^1.4.3",
|
||||
"ids": "^0.2.0",
|
||||
"inherits": "^2.0.1",
|
||||
"min-dash": "^3.4.0",
|
||||
"min-dom": "^3.0.0",
|
||||
"object-refs": "^0.3.0",
|
||||
"tiny-svg": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"bpmn-moddle": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/bpmn-moddle/-/bpmn-moddle-5.2.0.tgz",
|
||||
"integrity": "sha512-MZTlpIXWcHTelp09vR4hs23diCdeHl4JbwOXGmif10qf9v/kqreiCMeo0B9w8eEmZqdRdkulTIScKavTYOxTQw==",
|
||||
"requires": {
|
||||
"min-dash": "^3.0.0",
|
||||
"moddle": "^4.1.0",
|
||||
"moddle-xml": "^7.5.0"
|
||||
}
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -3562,6 +3595,21 @@
|
||||
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
|
||||
"dev": true
|
||||
},
|
||||
"closest": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/closest/-/closest-0.0.1.tgz",
|
||||
"integrity": "sha1-JtpvgLPg4X5x+A8SeCgZ6fZTSVw=",
|
||||
"requires": {
|
||||
"matches-selector": "0.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"matches-selector": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-0.0.1.tgz",
|
||||
"integrity": "sha1-HfUmIkOuNBwaCATdMCBIJnrHE7s="
|
||||
}
|
||||
}
|
||||
},
|
||||
"coa": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
|
||||
@ -3651,6 +3699,11 @@
|
||||
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
|
||||
"dev": true
|
||||
},
|
||||
"component-event": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/component-event/-/component-event-0.1.4.tgz",
|
||||
"integrity": "sha1-PeePwoeCOBeH4kvyp8U2vwFCybQ="
|
||||
},
|
||||
"compressible": {
|
||||
"version": "2.0.17",
|
||||
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
|
||||
@ -4140,6 +4193,11 @@
|
||||
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
|
||||
"dev": true
|
||||
},
|
||||
"css.escape": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
|
||||
"integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
|
||||
},
|
||||
"cssesc": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
|
||||
@ -4573,6 +4631,15 @@
|
||||
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
|
||||
},
|
||||
"delegate-events": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/delegate-events/-/delegate-events-1.1.1.tgz",
|
||||
"integrity": "sha1-2rSQqcHx1AykDrzSHtr3F7Zx1NQ=",
|
||||
"requires": {
|
||||
"closest": "*",
|
||||
"component-event": "*"
|
||||
}
|
||||
},
|
||||
"depd": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
|
||||
@ -4601,6 +4668,36 @@
|
||||
"integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
|
||||
"dev": true
|
||||
},
|
||||
"diagram-js": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-3.3.1.tgz",
|
||||
"integrity": "sha512-O4jdbcajP8D82U8NvUVVIgA4FuA64D3le2yLuaLTkYbkZookU06lm80cXxomAznLuJugEUy0xWugW9bHeJxnoA==",
|
||||
"requires": {
|
||||
"css.escape": "^1.5.1",
|
||||
"didi": "^4.0.0",
|
||||
"hammerjs": "^2.0.1",
|
||||
"inherits": "^2.0.1",
|
||||
"min-dash": "^3.2.0",
|
||||
"min-dom": "^3.0.0",
|
||||
"object-refs": "^0.3.0",
|
||||
"path-intersection": "^1.0.2",
|
||||
"tiny-svg": "^2.2.1"
|
||||
}
|
||||
},
|
||||
"diagram-js-direct-editing": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/diagram-js-direct-editing/-/diagram-js-direct-editing-1.6.0.tgz",
|
||||
"integrity": "sha512-bO9FqB6lJm+kaA6tSrXO0jT+Fu++yJTHbBf/wYb+AfJYAB92zZJrxwHRPTRhZGB4Md7XMEba5LAuNL8u9bjf3w==",
|
||||
"requires": {
|
||||
"min-dash": "^3.0.0",
|
||||
"min-dom": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"didi": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/didi/-/didi-4.0.0.tgz",
|
||||
"integrity": "sha512-AzMElh8mCHOPWPCWfGjoJRla31fMXUT6+287W5ef3IPmtuBcyG9+MkFS7uPP6v3t2Cl086KwWfRB9mESa0OsHQ=="
|
||||
},
|
||||
"diffie-hellman": {
|
||||
"version": "5.0.3",
|
||||
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
|
||||
@ -4694,6 +4791,11 @@
|
||||
"domelementtype": "1"
|
||||
}
|
||||
},
|
||||
"domify": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/domify/-/domify-1.4.0.tgz",
|
||||
"integrity": "sha1-EUg2F/dk+GlZdbS9x5sU8IA7Yps="
|
||||
},
|
||||
"domutils": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
|
||||
@ -6583,6 +6685,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"hammerjs": {
|
||||
"version": "2.0.8",
|
||||
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
|
||||
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
|
||||
},
|
||||
"handle-thing": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
|
||||
@ -6701,6 +6808,11 @@
|
||||
"minimalistic-assert": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"hat": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/hat/-/hat-0.0.3.tgz",
|
||||
"integrity": "sha1-uwFKnmSzeIrtgAWRdBPU/z1QLYo="
|
||||
},
|
||||
"he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
@ -6962,6 +7074,14 @@
|
||||
"postcss": "^7.0.14"
|
||||
}
|
||||
},
|
||||
"ids": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/ids/-/ids-0.2.2.tgz",
|
||||
"integrity": "sha512-icIO8S7A7Hat9x/59VYjS5uwfBU1xRTDxeFC4t9wNceLxZFm2JbPhO4lC/xhFqFNVaxw2idwpLgUfkVQrjsxIw==",
|
||||
"requires": {
|
||||
"hat": "^0.0.3"
|
||||
}
|
||||
},
|
||||
"ieee754": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
|
||||
@ -7039,8 +7159,7 @@
|
||||
"indexof": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
|
||||
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=",
|
||||
"dev": true
|
||||
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
|
||||
},
|
||||
"infer-owner": {
|
||||
"version": "1.0.4",
|
||||
@ -7061,8 +7180,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
||||
},
|
||||
"internal-ip": {
|
||||
"version": "4.3.0",
|
||||
@ -7854,6 +7972,11 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"matches-selector": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/matches-selector/-/matches-selector-1.2.0.tgz",
|
||||
"integrity": "sha512-c4vLwYWyl+Ji+U43eU/G5FwxWd4ZH0ePUsFs5y0uwD9HUEFBXUQ1zUUan+78IpRD+y4pUfG0nAzNM292K7ItvA=="
|
||||
},
|
||||
"material-design-icons": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz",
|
||||
@ -8010,6 +8133,24 @@
|
||||
"integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
|
||||
"dev": true
|
||||
},
|
||||
"min-dash": {
|
||||
"version": "3.5.2",
|
||||
"resolved": "https://registry.npmjs.org/min-dash/-/min-dash-3.5.2.tgz",
|
||||
"integrity": "sha512-YVbJZUtnzT5QsgJUp9H9uyJTW6NJgswFqI27RI/+MSox860uIjaGMbSQBftEzbMXiJVRG24hpoIh3SG666SHgA=="
|
||||
},
|
||||
"min-dom": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/min-dom/-/min-dom-3.1.1.tgz",
|
||||
"integrity": "sha512-qvURYMN2jHw9kPg1oFKdOd/VNJOsUNGV5H5j+zpJLkFVyP49tqmTQN8xWMYCDpIKetyQAC6jV5JjskNZr+JHpg==",
|
||||
"requires": {
|
||||
"closest": "0.0.1",
|
||||
"component-event": "^0.1.4",
|
||||
"delegate-events": "^1.1.1",
|
||||
"domify": "^1.3.1",
|
||||
"indexof": "0.0.1",
|
||||
"matches-selector": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.8.0",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz",
|
||||
@ -8163,6 +8304,24 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"moddle": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/moddle/-/moddle-4.1.0.tgz",
|
||||
"integrity": "sha512-asBaDLTTNpv4oC8iFdwonfMf/noPVvaBDXoSL7AsXZUDqwokgy8Lsf5eXwdnjXiDqm0olYi/S3Do544uVJSQDg==",
|
||||
"requires": {
|
||||
"min-dash": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"moddle-xml": {
|
||||
"version": "7.5.0",
|
||||
"resolved": "https://registry.npmjs.org/moddle-xml/-/moddle-xml-7.5.0.tgz",
|
||||
"integrity": "sha512-wPm3TD9910Iblp4lg1okHDRilY9gTvNBdo7ZHBmBzH4OioF5R2hvG3SMyn7cAUjOUg0kYUfChHgcUEO+qUc77Q==",
|
||||
"requires": {
|
||||
"min-dash": "^3.0.0",
|
||||
"moddle": "^4.1.0",
|
||||
"saxen": "^8.1.0"
|
||||
}
|
||||
},
|
||||
"moment": {
|
||||
"version": "2.24.0",
|
||||
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
|
||||
@ -8484,6 +8643,11 @@
|
||||
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
|
||||
"dev": true
|
||||
},
|
||||
"object-refs": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/object-refs/-/object-refs-0.3.0.tgz",
|
||||
"integrity": "sha512-eP0ywuoWOaDoiake/6kTJlPJhs+k0qNm4nYRzXLNHj6vh+5M3i9R1epJTdxIPGlhWc4fNRQ7a6XJNCX+/L4FOQ=="
|
||||
},
|
||||
"object-visit": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
|
||||
@ -8850,6 +9014,11 @@
|
||||
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
|
||||
"dev": true
|
||||
},
|
||||
"path-intersection": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/path-intersection/-/path-intersection-1.1.1.tgz",
|
||||
"integrity": "sha512-EdeUuXCm0+tb/2gv8PmRhd9fYYOtbDeTYkwCnzkBuAEjevEZi2mWUi1DVFF5nqSObYsxKcchvKUhnRULWOFreQ=="
|
||||
},
|
||||
"path-is-absolute": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
||||
@ -10166,6 +10335,11 @@
|
||||
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
|
||||
"dev": true
|
||||
},
|
||||
"saxen": {
|
||||
"version": "8.1.0",
|
||||
"resolved": "https://registry.npmjs.org/saxen/-/saxen-8.1.0.tgz",
|
||||
"integrity": "sha512-34U5SdDUxECB5Jkwbc2mAdxHyGvbfCHv0iHgf+x2jaYLlwsPpju9651Lld9CpFpF4zJsoWcF3Q05blXXNOb/cg=="
|
||||
},
|
||||
"schema-utils": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
|
||||
@ -11159,6 +11333,11 @@
|
||||
"resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
|
||||
"integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow=="
|
||||
},
|
||||
"tiny-svg": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tiny-svg/-/tiny-svg-2.2.2.tgz",
|
||||
"integrity": "sha512-u6zCuMkDR/3VAh83X7hDRn/pi0XhwG2ycuNS0cTFtQjGdOG2tSvEb8ds65VeGWc3H6PUjJKeunueXqgkZqtMsg=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
|
||||
@ -22,7 +22,8 @@
|
||||
"vue-i18n": "^8.15.0",
|
||||
"vue-router": "^3.1.3",
|
||||
"vuex": "^3.1.1",
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
"vuex-router-sync": "^5.0.0",
|
||||
"bpmn-js": "^3.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^4.0.5",
|
||||
|
||||
68
frontend/src/components/files/Bpmn.vue
Normal file
68
frontend/src/components/files/Bpmn.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div
|
||||
ref="container"
|
||||
class="vue-bpmn-diagram-container"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BpmnJS from 'bpmn-js/dist/bpmn-navigated-viewer.production.min.js';
|
||||
import { mapState } from 'vuex';
|
||||
import { baseURL } from '@/utils/constants';
|
||||
|
||||
export default {
|
||||
name: 'Bpmn',
|
||||
data() {
|
||||
return {
|
||||
url: `${baseURL}/api/raw`,
|
||||
diagramXML: null,
|
||||
activities: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const { container } = this.$refs;
|
||||
this.bpmnViewer = new BpmnJS({ container });
|
||||
const { bpmnViewer, fetchDiagram } = this;
|
||||
bpmnViewer.on('import.done', ({ error, warnings }) => {
|
||||
if (error) {
|
||||
this.$emit('error', error);
|
||||
} else {
|
||||
this.$emit('shown', warnings);
|
||||
}
|
||||
bpmnViewer
|
||||
.get('canvas')
|
||||
.zoom('fit-viewport')
|
||||
});
|
||||
fetchDiagram();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnViewer.destroy();
|
||||
},
|
||||
watch: {
|
||||
url() {
|
||||
this.$emit('loading');
|
||||
this.fetchDiagram();
|
||||
},
|
||||
diagramXML(val) {
|
||||
this.bpmnViewer.importXML(val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchDiagram() {
|
||||
fetch(`${this.url}/${this.req.path}?auth=${this.jwt}`)
|
||||
.then(response => response.text())
|
||||
// eslint-disable-next-line no-return-assign
|
||||
.then(text => (this.diagramXML = text))
|
||||
.catch(err => this.$emit('error', err));
|
||||
}
|
||||
},
|
||||
computed: mapState(['data', 'req', 'jwt']),
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.vue-bpmn-diagram-container {
|
||||
height: 83vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
21
frontend/src/components/files/DiagramsViewer.vue
Normal file
21
frontend/src/components/files/DiagramsViewer.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="vue-bpmn-diagram-container">
|
||||
<br />Click and hold the mouse to move the diagram. Use CTRL+Scroll to zoom.<br />
|
||||
<Bpmn />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Bpmn from '@/components/files/Bpmn';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Bpmn
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ const getters = {
|
||||
isFiles: state => !state.loading && state.route.name === 'Files',
|
||||
isListing: (state, getters) => getters.isFiles && state.req.isDir,
|
||||
isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
|
||||
isDiagrams: state => getters.isFiles && (state.req.type === 'bpmn'), // Only required for DiagramsViewer integration.
|
||||
selectedCount: state => state.selected.length
|
||||
}
|
||||
|
||||
|
||||
@ -16,6 +16,7 @@
|
||||
<internal-error v-else></internal-error>
|
||||
</div>
|
||||
<editor v-else-if="isEditor"></editor>
|
||||
<diagrams v-else-if="isDiagrams"></diagrams>
|
||||
<listing :class="{ multiple }" v-else-if="isListing"></listing>
|
||||
<preview v-else-if="isPreview"></preview>
|
||||
<div v-else>
|
||||
@ -35,6 +36,7 @@ import Listing from '@/components/files/Listing'
|
||||
import Editor from '@/components/files/Editor'
|
||||
import { files as api } from '@/api'
|
||||
import { mapGetters, mapState, mapMutations } from 'vuex'
|
||||
import Diagrams from '@/components/files/DiagramsViewer'
|
||||
|
||||
function clean (path) {
|
||||
return path.endsWith('/') ? path.slice(0, -1) : path
|
||||
@ -48,14 +50,16 @@ export default {
|
||||
InternalError,
|
||||
Preview,
|
||||
Listing,
|
||||
Editor
|
||||
Editor,
|
||||
Diagrams
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'selectedCount',
|
||||
'isListing',
|
||||
'isEditor',
|
||||
'isFiles'
|
||||
'isFiles',
|
||||
'isDiagrams'
|
||||
]),
|
||||
...mapState([
|
||||
'req',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user