Skip to content
Snippets Groups Projects
Commit 12792346 authored by Dr. Carl Corea's avatar Dr. Carl Corea
Browse files

Changed the button appearance in the bpmnVSdmn tool. Created an init button...

Changed the button appearance in the bpmnVSdmn tool. Created an init button that is called when a new file is created or uploaded
parent a32867c9
No related branches found
No related tags found
No related merge requests found
File added
......@@ -3,6 +3,67 @@
position: relative;
}
#uploadBPMN > label, #uploadDMN > label {
background-image: url(../img/upload.png);
width: 50px;
}
#downloadBPMN > label, #downloadDMN > label {
background-image: url(../img/download.png);
width: 50px;
}
#emptyBPMN > label, #emptyDMN > label {
background-image: url(../img/emptyFile.png);
width: 50px;
}
.bpmn > label, .dmn > label, .btn {
height: 52px;
border: 2px solid #0b3004;
border-radius: 5px;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: 85%;
cursor: pointer;
float: left;
margin: 10px;
font-family: Impact, Charcoal, sans-serif;
color: #0b3004;
}
.button.dropdown::after{
border-color: #0b3004 transparent transparent;
}
.button{
background: #fff !important;
border: 2px solid #0b3004;
border-radius: 5px;
font-family: Impact, Charcoal, sans-serif;
color: #0b3004;
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3);
cursor: pointer;
}
.button:hover{
color: #0b3004;
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
}
.btn{
padding: 0px 10px;
height: 40px;
float: none !important;
}
.clickable {
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .3);
cursor: pointer;
}
.clickable:hover {
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
}
.bubble{
animation: animateElement linear .3s;
animation-iteration-count: 1;
......
dmnverifierfrontend/src/main/resources/META-INF/resources/bpmn-verifier/img/download.png

32.8 KiB

dmnverifierfrontend/src/main/resources/META-INF/resources/bpmn-verifier/img/upload.png

33.4 KiB

......@@ -10,34 +10,38 @@
</head>
<body>
<div class="grid-x">
<div class="small-1 cell" id="uploadBPMN">
<label class="button" for="bpmn-file-upload">Upload BPMN</label>
<input class="show-for-sr" id="bpmn-file-upload" type="file"/>
</div>
<div class="small-1 cell" id="downloadBPMN">
<label class="button" for="bpmn-file-download">Download BPMN</label>
<input class="show-for-sr" id="bpmn-file-download" type="button"/>
</div>
<div class="small-1 cell" id="emptyBPMN">
<label class="button" for="bpmn-file-empty">Empty BPMN</label>
<input class="show-for-sr" id="bpmn-file-empty" type="button"/>
</div>
<div class="small-3 cell">
</div>
<div class="small-1 cell" id="uploadDMN">
<label class="button" for="dmn-file-upload">Upload DMN</label>
<input class="show-for-sr" id="dmn-file-upload" type="file"/>
</div>
<div class="small-1 cell" id="downloadDMN">
<label class="button" for="dmn-file-download">Download DMN</label>
<input class="show-for-sr" id="dmn-file-download" type="button"/>
</div>
<div class="small-1 cell" id="emptyDMN">
<label class="button" for="dmn-file-empty">Empty DMN</label>
<input class="show-for-sr" id="dmn-file-empty" type="button"/>
</div>
<div class="small-3 cell">
<div class="small-6 cell">
<div class="bpmn" id="uploadBPMN">
<label class="clickable" for="bpmn-file-upload" title="Upload dmn">
</label>
<!--<label class="button" for="bpmn-file-upload">Upload BPMN</label>-->
<input class="show-for-sr" id="bpmn-file-upload" type="file"/>
</div>
<div class="cell bpmn" id="downloadBPMN">
<label class="clickable" for="bpmn-file-download"></label>
<input class="show-for-sr" id="bpmn-file-download" type="button"/>
</div>
<div class="cell bpmn" id="emptyBPMN">
<label class="clickable" for="bpmn-file-empty"></label>
<input class="show-for-sr" id="bpmn-file-empty" type="button"/>
</div>
</div>
<div class="small-6 cell">
<div class="dmn" id="uploadDMN">
<label class="clickable" for="dmn-file-upload"></label>
<input class="show-for-sr" id="dmn-file-upload" type="file"/>
</div>
<div class="dmn" id="downloadDMN">
<label class="clickable" for="dmn-file-download"></label>
<input class="show-for-sr" id="dmn-file-download" type="button"/>
</div>
<div class="dmn" id="emptyDMN">
<label class="clickable" for="dmn-file-empty"></label>
<input class="show-for-sr" id="dmn-file-empty" type="button"/>
</div>
</div>
</div>
<div class="grid-x">
<div class="small-6 cell" id="canvasBPMN"></div>
......@@ -47,7 +51,8 @@
<!--<input id="searchString" />
<button id="search" class="button">Search</button>-->
<button class="button" id="checkAllMissing">Check Synchronization</button>
<button class="btn clickable" id="checkAllMissing">Check Synchronization</button>
<div id="actionArea"></div>
......
......@@ -3,12 +3,16 @@ $(document).foundation();
const rootUrl = 'http://dmn.fg-bks.uni-koblenz.de/';
// const rootUrl = 'http://localhost:8081/';
//==============================================================================
//
// BPMN Init
//
//==============================================================================
//Init
var viewer = new BpmnJS({
container: '#canvasBPMN'
......@@ -32,6 +36,7 @@ function loadBPMNFromFile(evt) {
eventBus = viewer.get('eventBus');
canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
initEverything();
}
);
};
......@@ -47,6 +52,7 @@ $('#bpmn-file-empty').on('click', function () {
eventBus = viewer.get('eventBus');
canvas = viewer.get('canvas');
canvas.zoom('fit-viewport');
initEverything()
});
// Init Download BPMN
......@@ -165,6 +171,7 @@ function loadDmnFromFile(evt) {
elementsDMN = activeEditor.get("elementRegistry");
eventBusDMN = activeEditor.get('eventBus');
initEverything()
}
);
};
......@@ -197,6 +204,7 @@ $('#dmn-file-empty').on('click', function () {
elementsDMN = activeEditor.get("elementRegistry");
eventBusDMN = activeEditor.get('eventBus');
initEverything()
}
);
}
......@@ -888,3 +896,36 @@ function getRandomNewPointInCycle(sourceX, sourceY, w, offsetX, offsetY) {
y: sourceY + dy
};
}
function initEverything(){
setTimeout(function () {
$("#actionArea").html("");
elements.getAll().forEach(function (e) {
//Highlight
model.setColor(e, {
stroke: 'black'
});
});
elementsDMN.getAll().forEach(function (e) {
//Unnecessary Input Data
if (e.type == "dmn:InputData") {
//color
$('[data-element-id=' + e.id + '] > g > rect').css("stroke", "black");
}
//Unnecessary Table Row Outputs
if (e.businessObject.$type == "dmn:LiteralExpression") {
//color
$("[data-row-id='" + e.row.id + "']").css("background-color", "black");
}
});
}, 10);
}
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment