mirror of
https://github.com/sartography/bpmn-js.git
synced 2025-01-11 17:44:12 +00:00
chore(examples): remove from repo
Examples now reside in their own repository: https://github.com/bpmn-io/bpmn-js-examples
This commit is contained in:
Nico Rehwaldt
parent
de0b0a411a
commit
9112024e88
@ -1,78 +0,0 @@
|
||||
/**
|
||||
* outline styles
|
||||
*/
|
||||
.djs-outline {
|
||||
fill: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.djs-group.hover .djs-outline,
|
||||
.djs-group.selected .djs-outline {
|
||||
visibility: visible;
|
||||
stroke-dasharray: 2,4;
|
||||
}
|
||||
|
||||
.djs-group.selected .djs-outline {
|
||||
stroke: blue;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.djs-group.hover .djs-outline {
|
||||
stroke: red;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.djs-group.drop-ok .djs-visual {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
.djs-group.drop-not-ok .djs-visual {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
/**
|
||||
* drag styles
|
||||
*/
|
||||
.djs-dragger {
|
||||
fill: white;
|
||||
opacity: 0.3;
|
||||
stroke: #333;
|
||||
stroke-dasharray: 2,1;
|
||||
}
|
||||
|
||||
.djs-shape.djs-dragging {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
* hit shape styles
|
||||
*/
|
||||
.djs-hit {
|
||||
stroke-opacity: 0.0;
|
||||
stroke-width: 10px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* shape / connection basic styles
|
||||
*/
|
||||
.djs-shape .djs-visual { }
|
||||
|
||||
.djs-connection .djs-visual {
|
||||
stroke-width: 2px;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.djs-connection .djs-bendpoint {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.djs-connection:hover .djs-bendpoint {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.djs-connection .djs-bendpoint:hover {
|
||||
stroke: #CCC;
|
||||
stroke-width: 1px;
|
||||
fill: yellow;
|
||||
}
|
||||
@ -1,96 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body, html {
|
||||
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.content,
|
||||
.content > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content > .message {
|
||||
text-align: center;
|
||||
display: table;
|
||||
|
||||
font-size: 16px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.content > .message .note {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.content .error .details {
|
||||
max-width: 500px;
|
||||
font-size: 12px;
|
||||
margin: 20px auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.content .error pre {
|
||||
border: solid 1px #CCC;
|
||||
background: #EEE;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.content:not(.with-error) .error,
|
||||
.content.with-error .intro,
|
||||
.content.with-diagram .intro {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.content .canvas,
|
||||
.content.with-error .canvas {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.content.with-diagram .canvas {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.buttons > li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.buttons > li > a {
|
||||
background: #DDD;
|
||||
border: solid 1px #666;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.buttons a {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.buttons a.active {
|
||||
opacity: 1.0;
|
||||
}
|
||||
@ -1,155 +0,0 @@
|
||||
(function(BpmnJS, $) {
|
||||
|
||||
var container = $('#js-drop-zone');
|
||||
|
||||
var canvas = $('#js-canvas');
|
||||
|
||||
var renderer = new BpmnJS({ container: canvas, width: '100%', height: '100%' });
|
||||
|
||||
var newDiagramXML =
|
||||
'<?xml version="1.0" encoding="UTF-8"?>' +
|
||||
'<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn">' +
|
||||
' <bpmn2:process id="Process_1" isExecutable="false">' +
|
||||
' <bpmn2:startEvent id="StartEvent_1"/>' +
|
||||
' </bpmn2:process>' +
|
||||
' <bpmndi:BPMNDiagram id="BPMNDiagram_1">' +
|
||||
' <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">' +
|
||||
' <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">' +
|
||||
' <dc:Bounds height="36.0" width="36.0" x="412.0" y="240.0"/>' +
|
||||
' </bpmndi:BPMNShape>' +
|
||||
' </bpmndi:BPMNPlane>' +
|
||||
' </bpmndi:BPMNDiagram>' +
|
||||
'</bpmn2:definitions>';
|
||||
|
||||
function createNewDiagram() {
|
||||
openDiagram(newDiagramXML);
|
||||
}
|
||||
|
||||
function openDiagram(xml) {
|
||||
|
||||
renderer.importXML(xml, function(err) {
|
||||
|
||||
if (err) {
|
||||
container
|
||||
.removeClass('with-diagram')
|
||||
.addClass('with-error');
|
||||
|
||||
container.find('.error pre').text(err.message);
|
||||
|
||||
console.error(err);
|
||||
} else {
|
||||
container
|
||||
.removeClass('with-error')
|
||||
.addClass('with-diagram');
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function saveSVG(done) {
|
||||
renderer.saveSVG(done);
|
||||
}
|
||||
|
||||
function saveDiagram(done) {
|
||||
|
||||
renderer.saveXML({ format: true }, function(err, xml) {
|
||||
done(err, xml);
|
||||
});
|
||||
}
|
||||
|
||||
////// file drag / drop ///////////////////////
|
||||
|
||||
// check file api availability
|
||||
if (!window.FileList || !window.FileReader) {
|
||||
window.alert(
|
||||
'Looks like you use an older browser that does not support drag and drop. ' +
|
||||
'Try using Chrome, Firefox or the Internet Explorer > 10.');
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
(function onFileDrop(container, callback) {
|
||||
|
||||
function handleFileSelect(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
var files = e.dataTransfer.files;
|
||||
|
||||
var file = files[0];
|
||||
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
|
||||
var xml = e.target.result;
|
||||
|
||||
callback(xml);
|
||||
};
|
||||
|
||||
reader.readAsText(file);
|
||||
}
|
||||
|
||||
function handleDragOver(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
||||
}
|
||||
|
||||
container.get(0).addEventListener('dragover', handleDragOver, false);
|
||||
container.get(0).addEventListener('drop', handleFileSelect, false);
|
||||
|
||||
})(container, openDiagram);
|
||||
|
||||
|
||||
$(document).on('ready', function() {
|
||||
|
||||
$('#js-create-diagram').click(function(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
createNewDiagram();
|
||||
});
|
||||
|
||||
var downloadLink = $('#js-download-diagram');
|
||||
var downloadSvgLink = $('#js-download-svg');
|
||||
|
||||
$('.buttons a').click(function(e) {
|
||||
if (!$(this).is('.active')) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
});
|
||||
|
||||
function setEncoded(link, name, data) {
|
||||
var encodedData = encodeURIComponent(data);
|
||||
|
||||
if (data) {
|
||||
link.addClass('active').attr({
|
||||
'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
|
||||
'download': name
|
||||
});
|
||||
} else {
|
||||
link.removeClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
var _ = require('lodash');
|
||||
|
||||
var exportArtifacts = _.debounce(function() {
|
||||
|
||||
saveSVG(function(err, svg) {
|
||||
setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
|
||||
});
|
||||
|
||||
saveDiagram(function(err, xml) {
|
||||
setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
renderer.on('commandStack.changed', exportArtifacts);
|
||||
});
|
||||
|
||||
})(window.BpmnJS, require('jquery'));
|
||||
@ -1,59 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>bpmn-js modeler demo</title>
|
||||
|
||||
<link rel="stylesheet" href="app.css" />
|
||||
<link rel="stylesheet" href="../css/diagram-js.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="js-drop-zone">
|
||||
|
||||
<div class="message intro">
|
||||
<div class="note">
|
||||
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message error">
|
||||
<div class="note">
|
||||
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
|
||||
|
||||
<div class="details">
|
||||
<span>cause of the problem</span>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" id="js-canvas"></div>
|
||||
</div>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
download
|
||||
</li>
|
||||
<li>
|
||||
<a id="js-download-diagram" href title="download BPMN diagram">
|
||||
BPMN diagram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="js-download-svg" href title="download as SVG image">
|
||||
SVG image
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var str = window.location.search;
|
||||
var min = !/\?debug=/.test(str);
|
||||
|
||||
document.write('<script src="../../bpmn' + (min ? '.min': '') + '.js"></' + 'script>');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var BpmnJS = require('bpmn-js/Modeler');
|
||||
</script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</html>
|
||||
@ -1,59 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>bpmn-js viewer demo</title>
|
||||
|
||||
<link rel="stylesheet" href="app.css" />
|
||||
<link rel="stylesheet" href="../css/diagram-js.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="content" id="js-drop-zone">
|
||||
|
||||
<div class="message intro">
|
||||
<div class="note">
|
||||
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message error">
|
||||
<div class="note">
|
||||
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
|
||||
|
||||
<div class="details">
|
||||
<span>cause of the problem</span>
|
||||
<pre></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="canvas" id="js-canvas"></div>
|
||||
</div>
|
||||
|
||||
<ul class="buttons">
|
||||
<li>
|
||||
download
|
||||
</li>
|
||||
<li>
|
||||
<a id="js-download-diagram" href title="download BPMN diagram">
|
||||
BPMN diagram
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a id="js-download-svg" href title="download as SVG image">
|
||||
SVG image
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
var str = window.location.search;
|
||||
var min = !/\?debug=/.test(str);
|
||||
|
||||
document.write('<script src="../../bpmn-viewer' + (min ? '.min': '') + '.js"></' + 'script>');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var BpmnJS = require('bpmn-js/Viewer');
|
||||
</script>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,103 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>bpmn-js url viewer demo</title>
|
||||
<link rel="stylesheet" href="../css/diagram-js.css" />
|
||||
|
||||
<style>
|
||||
.header input[type=text] {
|
||||
width: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.console textarea {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>Open BPMN 2.0 diagram from URL</h1>
|
||||
<p>
|
||||
<input type="text" id="js-url" placeholder="path to diagram" /><button id="js-open">Open</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="canvas">
|
||||
<h3>diagram</h3>
|
||||
<div id="js-canvas"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="console">
|
||||
<h3>console</h3>
|
||||
<textarea id="js-console"></textarea>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
///// auto open ?url=diagram-url ///////////////////////
|
||||
|
||||
(function() {
|
||||
var str = window.location.search;
|
||||
var min = !/(?:\&|\?)debug=/.test(str);
|
||||
|
||||
document.write('<script src="../../bpmn' + (min ? '.min': '') + '.js"></' + 'script>');
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
var BpmnViewer = require('bpmn-js/Viewer');
|
||||
var $ = require('jquery');
|
||||
|
||||
var viewer = new BpmnViewer({ container: $('#js-canvas'), width: '100%', height: 600 });
|
||||
|
||||
function log(str) {
|
||||
var console = $('#js-console');
|
||||
console.val(console.val() + str + '\n');
|
||||
}
|
||||
|
||||
function openFromUrl(url) {
|
||||
|
||||
log('attempting to open <' + url + '>');
|
||||
|
||||
$.ajax(url, { dataType : 'text' }).done(function(xml) {
|
||||
|
||||
viewer.importXML(xml, function(err) {
|
||||
|
||||
if (err) {
|
||||
log('error: ' + err.message);
|
||||
console.error(err);
|
||||
} else {
|
||||
log('success');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$('#js-open').click(function() {
|
||||
var url = $('#js-url').val();
|
||||
openFromUrl(url);
|
||||
});
|
||||
|
||||
///// auto open ?url=diagram-url ///////////////////////
|
||||
|
||||
(function() {
|
||||
var str = window.location.search;
|
||||
var match = /(?:\&|\?)url=([^&]+)/.exec(str);
|
||||
|
||||
if (match) {
|
||||
var url = decodeURIComponent(match[1]);
|
||||
$('#js-url').val(url);
|
||||
openFromUrl(url);
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user