Skip to content

Commit 62f2b91

Browse files
add bpmn modeler and icons
1 parent 75fa319 commit 62f2b91

File tree

71 files changed

+1829
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+1829
-1
lines changed

src/Blazorized.AdminLte.Plugins.Shared/MainLayout.razor

+9
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,15 @@
107107
</SideBarMenuItem>
108108
</Items>
109109
</SideBarTreeView>
110+
<SideBarTreeView Icon="fas fa-tachometer-alt">
111+
<Title>Process Management</Title>
112+
<Items>
113+
<SideBarMenuItem Icon="fas fa-th" Link="/bpmn/example">
114+
BPMN Modeler
115+
</SideBarMenuItem>
116+
</Items>
117+
</SideBarTreeView>
118+
110119
</SideBarMenu>
111120
</SideBar>
112121
</SideBarContainer>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@page "/bpmn/example"
2+
@namespace Blazorized.AdminLte.Plugins.Shared.Pages
3+
<div style="height: calc(100vh - 115px);">
4+
<Blazorized.AdminLte.Plugins.Components.BpmnModeler></Blazorized.AdminLte.Plugins.Components.BpmnModeler>
5+
</div>
6+
7+

src/Blazorized.AdminLte.Plugins.Site/Pages/_Host.cshtml

+23
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,21 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>Blazor.AdminLte.Site</title>
1313
<base href="~/" />
14+
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
15+
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
16+
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
17+
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
18+
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
19+
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
20+
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
21+
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
22+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
23+
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
24+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
25+
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
26+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
27+
<link rel="manifest" href="/manifest.json">
28+
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
1429
<!-- Google Font: Source Sans Pro -->
1530
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback" />
1631
<!-- Font Awesome Icons -->
@@ -29,6 +44,10 @@
2944
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
3045
<!-- overlay scrollbars -->
3146
<link type="text/css" href="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css" rel="stylesheet" />
47+
<!-- BPMN Modeler-->
48+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/diagram-js.css">
49+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/bpmn.css">
50+
3251
</head>
3352
<body class="hold-transition sidebar-mini sidebar-collapse">
3453
<div class="wrapper">
@@ -68,6 +87,10 @@
6887
<script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>
6988
<!-- Import the plotly.js interop functions -->
7089
<script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>
90+
<!--BPMN Modeler -->
91+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.min.js"></script>
92+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.interop.js"></script>
93+
<!--/BPMN Modeler -->
7194
<!--BlazorMonaco-->
7295
<!--BlazorMonaco Yaml-->
7396
<script src="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/loader.js"></script>
Binary file not shown.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
7+
<title>Blazorized.AdminLte.Plugins.Wasm</title>
8+
<base href="/" />
9+
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
10+
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
11+
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
12+
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
13+
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
14+
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
15+
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
16+
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
17+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
18+
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
19+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
20+
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
21+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
22+
<link rel="manifest" href="/manifest.json">
23+
24+
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
25+
<!-- Google Font: Source Sans Pro -->
26+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
27+
<!-- Font Awesome Icons -->
28+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/plugins/fontawesome-free/css/all.min.css">
29+
<!--BlazorMonaco-->
30+
<link href="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/editor/editor.main.css" rel="stylesheet" />
31+
<!--/BlazorMonaco-->
32+
<!-- Theme style -->
33+
<!-- Blazorized.AdmintLte.Plugins -->
34+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/css/monaco.css" />
35+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/css/split.css" />
36+
<!-- /Blazorized.AdmintLte.Plugins -->
37+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Content/dist/css/adminlte.min.css" />
38+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins.Shared/css/site.css" />
39+
<!-- Blazor Chart -->
40+
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
41+
<!-- overlay scrollbars -->
42+
<link type="text/css" href="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css" rel="stylesheet" />
43+
<!-- BPMN Modeler-->
44+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/diagram-js.css">
45+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/bpmn.css">
46+
</head>
47+
48+
<body class="hold-transition sidebar-mini sidebar-collapse">
49+
<div class="wrapper">
50+
<div id="app">
51+
<div class="app-load">
52+
<div class="rect1"></div>
53+
<div class="rect2"></div>
54+
<div class="rect3"></div>
55+
<div class="rect4"></div>
56+
<div class="rect5"></div>
57+
</div>
58+
</div>
59+
<div id="blazor-error-ui">
60+
An unhandled error has occurred.
61+
<a href="" class="reload">Reload</a>
62+
<a class="dismiss">🗙</a>
63+
</div>
64+
</div>
65+
<script src="_framework/blazor.webassembly.js"></script>
66+
<script>navigator.serviceWorker.register('service-worker.js');</script>
67+
<!-- jQuery -->
68+
<script src="_content/Blazorized.AdminLte.Content/plugins/jquery/jquery.min.js"></script>
69+
<script src="_content/Blazorized.AdminLte.Plugins/js/split.js"></script>
70+
<!-- overlay scrollbars -->
71+
<script src="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
72+
<!-- Bootstrap 4 -->
73+
<script src="_content/Blazorized.AdminLte.Content/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
74+
<!-- AdminLTE App -->
75+
<script src="_content/Blazorized.AdminLte.Content/dist/js/adminlte.min.js"></script>
76+
<script src="_content/Blazorized.AdminLte/js/interop.js"></script>
77+
<!-- ChartJs Blazor -->
78+
<script src="_content/ChartJs.Blazor/moment-with-locales.min.js" type="text/javascript" language="javascript"></script>
79+
<script src="_content/ChartJs.Blazor/Chart.min.js" type="text/javascript" language="javascript"></script>
80+
<script src="_content/ChartJs.Blazor/ChartJsBlazorInterop.js" type="text/javascript" language="javascript"></script>
81+
<!-- Blazorized.AdmintLte.Plugins -->
82+
<script src="_content/Blazorized.AdminLte.Plugins/js/split.interop.js"></script>
83+
<!-- Import the plotly.js library -->
84+
<script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>
85+
<!-- Import the plotly.js interop functions -->
86+
<script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>
87+
<!--BPMN Modeler -->
88+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.min.js"></script>
89+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.interop.js"></script>
90+
<!--/BPMN Modeler -->
91+
<!-- /Blazorized.AdmintLte.Plugins -->
92+
<!--BlazorMonaco-->
93+
<!--BlazorMonaco Yaml-->
94+
<script src="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/loader.js"></script>
95+
<script>require.config({ paths: { 'vs': '_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs' } });</script>
96+
<script src="_content/BlazorMonacoYaml/lib/monaco-editor-yaml/min/vs/editor/editor.main.js"></script>
97+
<!--/BlazorMonaco Yaml-->
98+
<script src="_content/BlazorMonaco/jsInterop.js"></script>
99+
<!--/BlazorMonaco-->
100+
</body>
101+
102+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "Blazorized.AdminLte.Plugins.Wasm",
3+
"short_name": "Blazorized.AdminLte.Plugins.Wasm",
4+
"start_url": "./",
5+
"display": "standalone",
6+
"background_color": "#FFFFFF",
7+
"theme_color": "#03173d",
8+
"icons": [
9+
{
10+
"src": "icon-512.png",
11+
"type": "image/png",
12+
"sizes": "512x512"
13+
},
14+
{
15+
"src": "\/android-icon-36x36.png",
16+
"sizes": "36x36",
17+
"type": "image\/png",
18+
"density": "0.75"
19+
},
20+
{
21+
"src": "\/android-icon-48x48.png",
22+
"sizes": "48x48",
23+
"type": "image\/png",
24+
"density": "1.0"
25+
},
26+
{
27+
"src": "\/android-icon-72x72.png",
28+
"sizes": "72x72",
29+
"type": "image\/png",
30+
"density": "1.5"
31+
},
32+
{
33+
"src": "\/android-icon-96x96.png",
34+
"sizes": "96x96",
35+
"type": "image\/png",
36+
"density": "2.0"
37+
},
38+
{
39+
"src": "\/android-icon-144x144.png",
40+
"sizes": "144x144",
41+
"type": "image\/png",
42+
"density": "3.0"
43+
},
44+
{
45+
"src": "\/android-icon-192x192.png",
46+
"sizes": "192x192",
47+
"type": "image\/png",
48+
"density": "4.0"
49+
}
50+
]
51+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// In development, always fetch from the network and do not enable offline support.
2+
// This is because caching would make development more difficult (changes would not
3+
// be reflected on the first load after each change).
4+
self.addEventListener('fetch', () => { });
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Caution! Be sure you understand the caveats before publishing an application with
2+
// offline support. See https://aka.ms/blazor-offline-considerations
3+
4+
self.importScripts('./service-worker-assets.js');
5+
self.addEventListener('install', event => event.waitUntil(onInstall(event)));
6+
self.addEventListener('activate', event => event.waitUntil(onActivate(event)));
7+
self.addEventListener('fetch', event => event.respondWith(onFetch(event)));
8+
9+
const cacheNamePrefix = 'offline-cache-';
10+
const cacheName = `${cacheNamePrefix}${self.assetsManifest.version}`;
11+
const offlineAssetsInclude = [ /\.dll$/, /\.pdb$/, /\.wasm/, /\.html/, /\.js$/, /\.json$/, /\.css$/, /\.woff$/, /\.png$/, /\.jpe?g$/, /\.gif$/, /\.ico$/ ];
12+
const offlineAssetsExclude = [ /^service-worker\.js$/ ];
13+
14+
async function onInstall(event) {
15+
console.info('Service worker: Install');
16+
17+
// Fetch and cache all matching items from the assets manifest
18+
const assetsRequests = self.assetsManifest.assets
19+
.filter(asset => offlineAssetsInclude.some(pattern => pattern.test(asset.url)))
20+
.filter(asset => !offlineAssetsExclude.some(pattern => pattern.test(asset.url)))
21+
.map(asset => new Request(asset.url, { integrity: asset.hash }));
22+
await caches.open(cacheName).then(cache => cache.addAll(assetsRequests));
23+
}
24+
25+
async function onActivate(event) {
26+
console.info('Service worker: Activate');
27+
28+
// Delete unused caches
29+
const cacheKeys = await caches.keys();
30+
await Promise.all(cacheKeys
31+
.filter(key => key.startsWith(cacheNamePrefix) && key !== cacheName)
32+
.map(key => caches.delete(key)));
33+
}
34+
35+
async function onFetch(event) {
36+
let cachedResponse = null;
37+
if (event.request.method === 'GET') {
38+
// For all navigation requests, try to serve index.html from cache
39+
// If you need some URLs to be server-rendered, edit the following check to exclude those URLs
40+
const shouldServeIndexHtml = event.request.mode === 'navigate';
41+
42+
const request = shouldServeIndexHtml ? 'index.html' : event.request;
43+
const cache = await caches.open(cacheName);
44+
cachedResponse = await cache.match(request);
45+
}
46+
47+
return cachedResponse || fetch(event.request);
48+
}
Binary file not shown.

src/Blazorized.AdminLte.Plugins.Wasm/wwwroot/index.html

+22-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,21 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
77
<title>Blazorized.AdminLte.Plugins.Wasm</title>
88
<base href="/" />
9+
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
10+
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
11+
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
12+
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
13+
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
14+
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
15+
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
16+
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
17+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
18+
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
19+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
20+
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
21+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
22+
<link rel="manifest" href="/manifest.json">
23+
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
924
<!-- Google Font: Source Sans Pro -->
1025
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
1126
<!-- Font Awesome Icons -->
@@ -24,7 +39,9 @@
2439
<link rel="stylesheet" href="_content/ChartJs.Blazor/ChartJSBlazor.css" />
2540
<!-- overlay scrollbars -->
2641
<link type="text/css" href="_content/Blazorized.AdminLte.Content/plugins/overlayScrollbars/css/OverlayScrollbars.min.css" rel="stylesheet" />
27-
42+
<!-- BPMN Modeler-->
43+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/diagram-js.css">
44+
<link rel="stylesheet" href="_content/Blazorized.AdminLte.Plugins/bpmn/css/bpmn.css">
2845
</head>
2946

3047
<body class="hold-transition sidebar-mini sidebar-collapse">
@@ -66,6 +83,10 @@
6683
<script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>
6784
<!-- Import the plotly.js interop functions -->
6885
<script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>
86+
<!--BPMN Modeler -->
87+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.min.js"></script>
88+
<script src="_content/Blazorized.AdminLte.Plugins/js/bpmn/bpmn-modeler.interop.js"></script>
89+
<!--/BPMN Modeler -->
6990
<!-- /Blazorized.AdmintLte.Plugins -->
7091
<!--BlazorMonaco-->
7192
<!--BlazorMonaco Yaml-->

src/Blazorized.AdminLte.Plugins.Wasm/wwwroot/manifest.json

+36
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,42 @@
1010
"src": "icon-512.png",
1111
"type": "image/png",
1212
"sizes": "512x512"
13+
},
14+
{
15+
"src": "\/android-icon-36x36.png",
16+
"sizes": "36x36",
17+
"type": "image\/png",
18+
"density": "0.75"
19+
},
20+
{
21+
"src": "\/android-icon-48x48.png",
22+
"sizes": "48x48",
23+
"type": "image\/png",
24+
"density": "1.0"
25+
},
26+
{
27+
"src": "\/android-icon-72x72.png",
28+
"sizes": "72x72",
29+
"type": "image\/png",
30+
"density": "1.5"
31+
},
32+
{
33+
"src": "\/android-icon-96x96.png",
34+
"sizes": "96x96",
35+
"type": "image\/png",
36+
"density": "2.0"
37+
},
38+
{
39+
"src": "\/android-icon-144x144.png",
40+
"sizes": "144x144",
41+
"type": "image\/png",
42+
"density": "3.0"
43+
},
44+
{
45+
"src": "\/android-icon-192x192.png",
46+
"sizes": "192x192",
47+
"type": "image\/png",
48+
"density": "4.0"
1349
}
1450
]
1551
}

src/Blazorized.AdminLte.Plugins/Blazorized.AdminLte.Plugins.csproj

+3
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,7 @@
4444
<PackagePath></PackagePath>
4545
</None>
4646
</ItemGroup>
47+
<ItemGroup>
48+
<Folder Include="Bpmn\" />
49+
</ItemGroup>
4750
</Project>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@using System.Net
2+
@using System.Text
3+
@inject IJSRuntime JSRuntime
4+
<div @ref="Canvas" id="canvas" style="height:100%"></div>
5+
@code {
6+
7+
public ElementReference Canvas { get; set; }
8+
public string NamedInstance { get; set; } = Guid.NewGuid().ToString();
9+
10+
protected async override void OnAfterRender(bool firstRender)
11+
{
12+
// in js/bpmn.interop.js
13+
await JSRuntime.InvokeAsync<object>("bpmnModeler.create", new object[] { NamedInstance, Canvas /* DotNetObjectReference.Create(this) */ });
14+
string xmlResult = string.Empty;
15+
using (HttpClient client = new HttpClient())
16+
{
17+
//client.Encoding = UTF8Encoding.UTF8;
18+
//client.Headers[HttpRequestHeader.ContentType] = "text/xml";
19+
xmlResult = await client.GetStringAsync("https://raw.githubusercontent.com/bpmn-io/bpmn-js/72745c7c97e52ac8f4c65b381ca9724690f27aa5/test/fixtures/bpmn/features/replace/01_replace.bpmn");
20+
}
21+
await JSRuntime.InvokeAsync<object>("bpmnModeler.openDiagram", new object[] { NamedInstance, xmlResult });
22+
}
23+
}

0 commit comments

Comments
 (0)