nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add bpmn-js integration.

Browse Source 
-- 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 2019-11-04 17:10:03 -05:00
parent fb13ded8e8
commit 887eeff98e
10 changed files with 475 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
demo diagrams/bpmn-integration.md Normal file
View 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"!**
![Preview](https://user-images.githubusercontent.com/50220345/68059408-c9c56780-fcd2-11e9-88aa-0fcf4d03c438.gif)
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
View 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&#10;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?&#10;">
<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>

14
files/file.go
View File

@ -149,11 +149,25 @@ func (i *FileInfo) detectType(modify, saveContent bool) error {
} }
mimetype := mime.TypeByExtension(i.Extension) mimetype := mime.TypeByExtension(i.Extension)
if i.Extension == ".bpmn" { //Hardcoded extension because BPMN is not available in mime-db.
mimetype = "bpmn"
}
if mimetype == "" { if mimetype == "" {
mimetype = http.DetectContentType(buffer[:n]) mimetype = http.DetectContentType(buffer[:n])
} }
switch { 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"): case strings.HasPrefix(mimetype, "video"):
i.Type = "video" i.Type = "video"
i.detectSubtitles() i.detectSubtitles()

187
frontend/package-lock.json generated
View File

@ -2904,6 +2904,39 @@
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
"dev": true "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": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -3562,6 +3595,21 @@
"integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=", "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
"dev": true "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": { "coa": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz",
@ -3651,6 +3699,11 @@
"integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
"dev": true "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": { "compressible": {
"version": "2.0.17", "version": "2.0.17",
"resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.17.tgz",
@ -4140,6 +4193,11 @@
"integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==", "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
"dev": true "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": { "cssesc": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==" "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": { "depd": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@ -4601,6 +4668,36 @@
"integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==", "integrity": "sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==",
"dev": true "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": { "diffie-hellman": {
"version": "5.0.3", "version": "5.0.3",
"resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz", "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@ -4694,6 +4791,11 @@
"domelementtype": "1" "domelementtype": "1"
} }
}, },
"domify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/domify/-/domify-1.4.0.tgz",
"integrity": "sha1-EUg2F/dk+GlZdbS9x5sU8IA7Yps="
},
"domutils": { "domutils": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz", "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": { "handle-thing": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
@ -6701,6 +6808,11 @@
"minimalistic-assert": "^1.0.1" "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": { "he": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@ -6962,6 +7074,14 @@
"postcss": "^7.0.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": { "ieee754": {
"version": "1.1.12", "version": "1.1.12",
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.12.tgz",
@ -7039,8 +7159,7 @@
"indexof": { "indexof": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz",
"integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=", "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10="
"dev": true
}, },
"infer-owner": { "infer-owner": {
"version": "1.0.4", "version": "1.0.4",
@ -7061,8 +7180,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
"dev": true
}, },
"internal-ip": { "internal-ip": {
"version": "4.3.0", "version": "4.3.0",
@ -7854,6 +7972,11 @@
"object-visit": "^1.0.0" "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": { "material-design-icons": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/material-design-icons/-/material-design-icons-3.0.1.tgz", "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==", "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
"dev": true "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": { "mini-css-extract-plugin": {
"version": "0.8.0", "version": "0.8.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz", "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": { "moment": {
"version": "2.24.0", "version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
@ -8484,6 +8643,11 @@
"integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==", "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
"dev": true "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": { "object-visit": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz", "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
@ -8850,6 +9014,11 @@
"integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=", "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
"dev": true "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": { "path-is-absolute": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
@ -10166,6 +10335,11 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true "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": { "schema-utils": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz", "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", "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
"integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==" "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": { "tmp": {
"version": "0.0.33", "version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",

3
frontend/package.json
View File

@ -22,7 +22,8 @@
"vue-i18n": "^8.15.0", "vue-i18n": "^8.15.0",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.1.1", "vuex": "^3.1.1",
"vuex-router-sync": "^5.0.0" "vuex-router-sync": "^5.0.0",
"bpmn-js": "^3.2.3"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.0.5", "@vue/cli-plugin-babel": "^4.0.5",

68
frontend/src/components/files/Bpmn.vue Normal file
View 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
View 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>

1
frontend/src/store/getters.js
View File

@ -3,6 +3,7 @@ const getters = {
isFiles: state => !state.loading && state.route.name === 'Files', isFiles: state => !state.loading && state.route.name === 'Files',
isListing: (state, getters) => getters.isFiles && state.req.isDir, isListing: (state, getters) => getters.isFiles && state.req.isDir,
isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'), 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 selectedCount: state => state.selected.length
} }

8
frontend/src/views/Files.vue
View File

@ -16,6 +16,7 @@
<internal-error v-else></internal-error> <internal-error v-else></internal-error>
</div> </div>
<editor v-else-if="isEditor"></editor> <editor v-else-if="isEditor"></editor>
<diagrams v-else-if="isDiagrams"></diagrams>
<listing :class="{ multiple }" v-else-if="isListing"></listing> <listing :class="{ multiple }" v-else-if="isListing"></listing>
<preview v-else-if="isPreview"></preview> <preview v-else-if="isPreview"></preview>
<div v-else> <div v-else>
@ -35,6 +36,7 @@ import Listing from '@/components/files/Listing'
import Editor from '@/components/files/Editor' import Editor from '@/components/files/Editor'
import { files as api } from '@/api' import { files as api } from '@/api'
import { mapGetters, mapState, mapMutations } from 'vuex' import { mapGetters, mapState, mapMutations } from 'vuex'
import Diagrams from '@/components/files/DiagramsViewer'
function clean (path) { function clean (path) {
return path.endsWith('/') ? path.slice(0, -1) : path return path.endsWith('/') ? path.slice(0, -1) : path
@ -48,14 +50,16 @@ export default {
InternalError, InternalError,
Preview, Preview,
Listing, Listing,
Editor Editor,
Diagrams
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'selectedCount', 'selectedCount',
'isListing', 'isListing',
'isEditor', 'isEditor',
'isFiles' 'isFiles',
'isDiagrams'
]), ]),
...mapState([ ...mapState([
'req', 'req',

2
go.mod
View File

@ -35,3 +35,5 @@ require (
gopkg.in/natefinch/lumberjack.v2 v2.0.0 gopkg.in/natefinch/lumberjack.v2 v2.0.0
gopkg.in/yaml.v2 v2.2.4 gopkg.in/yaml.v2 v2.2.4
) )
go 1.13