Merge pull request #90 from sartography/feature/line-highlighting
Added Line HighLighting to Script Editor
This commit is contained in:
Dan Funk
GitHub
commit
92c532f2b9
|
|
@ -42,7 +42,7 @@
|
|||
"camunda-bpmn-moddle": "^4.4.0",
|
||||
"camunda-dmn-moddle": "^1.0.0",
|
||||
"diagram-js": "^6.6.1",
|
||||
"diagram-js-code-editor": "^1.1.1",
|
||||
"diagram-js-code-editor": "^1.1.5",
|
||||
"diagram-js-minimap": "^2.0.3",
|
||||
"dmn-js": "^7.5.1",
|
||||
"dmn-js-properties-panel": "^0.3.5",
|
||||
|
|
|
|||
|
|
@ -27,10 +27,11 @@ import { dmnModelerConfig } from './dmn-modeler-config';
|
|||
export class DiagramComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
|
||||
@Input() fileName: string;
|
||||
@Input() validation_data: Object = {};
|
||||
@Input() validation_state: string;
|
||||
@ViewChild('containerRef', { static: true }) containerRef: ElementRef;
|
||||
@ViewChild('propertiesRef', { static: true }) propertiesRef: ElementRef;
|
||||
@Output() private importDone: EventEmitter<ImportEvent> = new EventEmitter();
|
||||
@Input() validationState: string;
|
||||
|
||||
@Output() validationStart: EventEmitter<string> = new EventEmitter();
|
||||
private diagramType: FileType;
|
||||
private modeler: BpmnModeler | DmnModeler;
|
||||
|
|
@ -69,7 +70,20 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit, On
|
|||
if (changes.validation_data) {
|
||||
this.validation_data = changes.validation_data.currentValue;
|
||||
if (this.modeler) {
|
||||
this.modeler.get('eventBus').fire('editor.objects.response', { objects: this.validation_data });
|
||||
if(this.validation_data['task_data']) {
|
||||
this.modeler.get('eventBus').fire('editor.objects.response', {objects: this.validation_data['task_data']});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (changes.validation_state) {
|
||||
this.validation_state = changes.validation_state.currentValue;
|
||||
if (this.modeler) {
|
||||
const resp = {state: this.validation_state, line_number: undefined
|
||||
};
|
||||
if (this.validation_data['line_number']){
|
||||
resp.line_number = this.validation_data['line_number'];
|
||||
}
|
||||
this.modeler.get('eventBus').fire('editor.validation.response', resp);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -226,7 +240,7 @@ export class DiagramComponent implements ControlValueAccessor, AfterViewInit, On
|
|||
});
|
||||
});
|
||||
|
||||
eventBus.on('editor.validate.request', (request) => {
|
||||
eventBus.on('editor.validation.request', (request) => {
|
||||
this.validationStart.emit(request.task_name);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<div fxLayout="column">
|
||||
<div class="diagram-parent">
|
||||
<app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()" [validation_data]="validationData" (validationStart)="partially_validate($event)" ></app-diagram>
|
||||
<app-diagram #diagram (importDone)="handleImported($event)" [fileName]="getFileName()" [validation_state]="validationState" [validation_data]="validationData" (validationStart)="partially_validate($event)" ></app-diagram>
|
||||
|
||||
<div *ngIf="importError" class="import-error">
|
||||
<strong>Failed to render diagram: </strong>
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@ export class ModelerComponent implements AfterViewInit {
|
|||
@ViewChild(DiagramComponent) private diagramComponent: DiagramComponent;
|
||||
@ViewChild('fileInput', { static: true }) fileInput: ElementRef;
|
||||
private diagramType: FileType;
|
||||
private validationState: boolean;
|
||||
private validationState: string;
|
||||
validationData: Object = {};
|
||||
private workflowSpecId: string;
|
||||
private fileMetaId: number;
|
||||
|
|
@ -202,19 +202,20 @@ export class ModelerComponent implements AfterViewInit {
|
|||
partially_validate(until_task: string) {
|
||||
this.saveChanges();
|
||||
const study_id = this.settingsService.getStudyIdForValidation();
|
||||
this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id, until_task, study_id).subscribe(apiErrors => {
|
||||
this.validationState = true;
|
||||
this.validationData = { 'required_only': undefined, 'all_fields': undefined };
|
||||
if (apiErrors && apiErrors.length === 2) {
|
||||
if (apiErrors[0].code === 'validation_break') {
|
||||
this.validationData['all_fields'] = apiErrors[0].task_data;
|
||||
} else { this.validationState = false; }
|
||||
if (apiErrors[1].code === 'validation_break') {
|
||||
this.validationData['required_only'] = apiErrors[1].task_data;
|
||||
} else { this.validationState = false; }
|
||||
} else { this.validationState = false; }
|
||||
this.validationState = 'unknown';
|
||||
this.validationData = { 'testing_only': {a: 1, b: 'b', c: false, e: [], d: undefined}, 'real_fields': undefined };
|
||||
|
||||
if (this.validationState === false) {
|
||||
this.api.validateWorkflowSpecification(this.diagramFileMeta.workflow_spec_id, until_task, study_id).subscribe(apiErrors => {
|
||||
if (apiErrors && apiErrors.length === 1) {
|
||||
if (apiErrors[0].code === 'validation_break') {
|
||||
this.validationData = apiErrors[0];
|
||||
this.validationState = 'passing';
|
||||
} else {
|
||||
this.validationData = apiErrors[0];
|
||||
this.validationState = 'failing';
|
||||
}
|
||||
}
|
||||
if (apiErrors.length > 0 && this.validationState !== 'passing') {
|
||||
this.bottomSheet.open(ApiErrorsComponent, { data: { apiErrors: apiErrors } });
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,467 +1,467 @@
|
|||
.dmn-decision-table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-cell .input-label,
|
||||
.dmn-decision-table-container .input-cell .input-expression,
|
||||
.dmn-decision-table-container .input-cell .output-label,
|
||||
.dmn-decision-table-container .input-cell .output-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** actionable icon */
|
||||
.dmn-decision-table-container .action-icon {
|
||||
border-radius: 2px;
|
||||
color: #52b415;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .action-icon:before {
|
||||
margin-left: .1em;
|
||||
margin-right: .1em;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .actionable:hover .action-icon {
|
||||
background-color: #52b415;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/** end actionable icon */
|
||||
|
||||
|
||||
/* basic styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
color: #444;
|
||||
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* end basic styles */
|
||||
|
||||
|
||||
/* basic table styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
|
||||
border: solid 1px #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table > tbody:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container table thead {
|
||||
border-bottom: 3px double #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container td,
|
||||
.dmn-decision-table-container th {
|
||||
border: solid 1px #444;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tr .output-cell {
|
||||
border-left: 3px double #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tr .output-cell + .output-cell {
|
||||
border-left: 1px solid #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th {
|
||||
min-width: 192px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th,
|
||||
.dmn-decision-table-container td {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.hit-policy {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.annotation.header {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container td.rule-index {
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container thead .input-expression,
|
||||
.dmn-decision-table-container thead .input-variable,
|
||||
.dmn-decision-table-container thead .output-name,
|
||||
.dmn-decision-table-container thead .type-ref,
|
||||
.dmn-decision-table-container .script-editor {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tbody tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* end basic table styles */
|
||||
|
||||
|
||||
/* selection styles */
|
||||
|
||||
.dmn-decision-table-container th,
|
||||
.dmn-decision-table-container td,
|
||||
.dmn-decision-table-container h3,
|
||||
.dmn-decision-table-container h5 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .selected:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border: solid 2px #4285f4;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.selected:not(.focussed) {
|
||||
background: #e9f1ff;
|
||||
}
|
||||
|
||||
/* end selection styles */
|
||||
|
||||
|
||||
/* footer styles */
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule td.add-rule-add {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule td {
|
||||
border-color: #AAA;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule:hover td {
|
||||
border-color: #444;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
|
||||
/* end footer styles */
|
||||
|
||||
|
||||
/* content editable styles */
|
||||
|
||||
.dmn-decision-table-container [contenteditable],
|
||||
.dmn-decision-table-container [tabindex] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* end content editable styles */
|
||||
|
||||
|
||||
/* context menu styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* decision table properties */
|
||||
.dmn-decision-table-container .decision-table-properties {
|
||||
color: #444;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
border: solid 1px #444;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
min-width: 100px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-name,
|
||||
.dmn-decision-table-container .decision-table-id {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-id.invalid {
|
||||
background: #f4cecd;
|
||||
color: #c9302c;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-id {
|
||||
border-top: 1px solid #444;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* end decision table properties */
|
||||
|
||||
/* view drd */
|
||||
.dmn-decision-table-container .view-drd {
|
||||
float: right;
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .view-drd .view-drd-button {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .view-drd .view-drd-button:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
/* end view drd */
|
||||
|
||||
|
||||
/* powered by */
|
||||
.dmn-decision-table-container .powered-by-logo {
|
||||
float: right;
|
||||
width: 38px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-logo .logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content div:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* end powered by */
|
||||
|
||||
|
||||
/* simple mode */
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button {
|
||||
color: #444;
|
||||
background-color: #f6f6f6;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #CCC;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
z-index: 2;
|
||||
opacity: .8;
|
||||
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button.disabled,
|
||||
.dmn-decision-table-container .simple-mode-button.disabled:hover {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
/* end simple mode */
|
||||
|
||||
/**
|
||||
* badges
|
||||
*/
|
||||
.dms-badge {
|
||||
border-radius: 2px;
|
||||
padding: 3px 6px;
|
||||
font-size: .8em;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dms-badge-icon + .dms-badge-label {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.dms-badge.dmn-variable-name {
|
||||
background: #9e9e9e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dms-badge.dmn-expression-language {
|
||||
background: rgba(84, 146, 250, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dms-badge + .dms-badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dmn-expression-language .dms-badge-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label,
|
||||
.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-editor .dmn-variable-name,
|
||||
.dmn-decision-table-container .input-editor .dmn-expression-language {
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language {
|
||||
background: #92b9fc;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .cell .dms-badge.dmn-expression-language {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* cell expression language */
|
||||
|
||||
.dmn-decision-table-container .cell .dmn-expression-language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* end cell expression language */
|
||||
|
||||
/* drag and drop */
|
||||
.dmn-decision-table-container .dragover:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #666;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.top:before {
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
height: 5px;
|
||||
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.right:before {
|
||||
top: -6px;
|
||||
bottom: -6px;
|
||||
width: 5px;
|
||||
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.bottom:before {
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
height: 5px;
|
||||
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.left:before {
|
||||
top: -6px;
|
||||
bottom: -6px;
|
||||
width: 5px;
|
||||
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragged {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* cell description */
|
||||
|
||||
.dmn-decision-table-container .description-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid black;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-cell .input-label,
|
||||
.dmn-decision-table-container .input-cell .input-expression,
|
||||
.dmn-decision-table-container .input-cell .output-label,
|
||||
.dmn-decision-table-container .input-cell .output-name {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/** actionable icon */
|
||||
.dmn-decision-table-container .action-icon {
|
||||
border-radius: 2px;
|
||||
color: #52b415;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .action-icon:before {
|
||||
margin-left: .1em;
|
||||
margin-right: .1em;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .actionable:hover .action-icon {
|
||||
background-color: #52b415;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/** end actionable icon */
|
||||
|
||||
|
||||
/* basic styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
color: #444;
|
||||
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
/* end basic styles */
|
||||
|
||||
|
||||
/* basic table styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
|
||||
border: solid 1px #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table > tbody:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container table thead {
|
||||
border-bottom: 3px double #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container td,
|
||||
.dmn-decision-table-container th {
|
||||
border: solid 1px #444;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tr .output-cell {
|
||||
border-left: 3px double #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tr .output-cell + .output-cell {
|
||||
border-left: 1px solid #444;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th {
|
||||
min-width: 192px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th,
|
||||
.dmn-decision-table-container td {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.hit-policy {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.header {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.annotation.header {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container td.rule-index {
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container thead .input-expression,
|
||||
.dmn-decision-table-container thead .input-variable,
|
||||
.dmn-decision-table-container thead .output-name,
|
||||
.dmn-decision-table-container thead .type-ref,
|
||||
.dmn-decision-table-container .script-editor {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .tjs-table tbody tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* end basic table styles */
|
||||
|
||||
|
||||
/* selection styles */
|
||||
|
||||
.dmn-decision-table-container th,
|
||||
.dmn-decision-table-container td,
|
||||
.dmn-decision-table-container h3,
|
||||
.dmn-decision-table-container h5 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .selected:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
bottom: -1px;
|
||||
right: -1px;
|
||||
border: solid 2px #4285f4;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container th.selected:not(.focussed) {
|
||||
background: #e9f1ff;
|
||||
}
|
||||
|
||||
/* end selection styles */
|
||||
|
||||
|
||||
/* footer styles */
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule td.add-rule-add {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule td {
|
||||
border-color: #AAA;
|
||||
color: #AAA;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container tfoot.add-rule:hover td {
|
||||
border-color: #444;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
|
||||
/* end footer styles */
|
||||
|
||||
|
||||
/* content editable styles */
|
||||
|
||||
.dmn-decision-table-container [contenteditable],
|
||||
.dmn-decision-table-container [tabindex] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* end content editable styles */
|
||||
|
||||
|
||||
/* context menu styles */
|
||||
|
||||
.dmn-decision-table-container {
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* decision table properties */
|
||||
.dmn-decision-table-container .decision-table-properties {
|
||||
color: #444;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
border: solid 1px #444;
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
min-width: 100px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-name,
|
||||
.dmn-decision-table-container .decision-table-id {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-id.invalid {
|
||||
background: #f4cecd;
|
||||
color: #c9302c;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .decision-table-id {
|
||||
border-top: 1px solid #444;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* end decision table properties */
|
||||
|
||||
/* view drd */
|
||||
.dmn-decision-table-container .view-drd {
|
||||
float: right;
|
||||
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .view-drd .view-drd-button {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .view-drd .view-drd-button:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
/* end view drd */
|
||||
|
||||
|
||||
/* powered by */
|
||||
.dmn-decision-table-container .powered-by-logo {
|
||||
float: right;
|
||||
width: 38px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-logo .logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .powered-by-overlay .powered-by-overlay-content div:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* end powered by */
|
||||
|
||||
|
||||
/* simple mode */
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button {
|
||||
color: #444;
|
||||
background-color: #f6f6f6;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
border: solid 1px #CCC;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
z-index: 2;
|
||||
opacity: .8;
|
||||
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .simple-mode-button.disabled,
|
||||
.dmn-decision-table-container .simple-mode-button.disabled:hover {
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
/* end simple mode */
|
||||
|
||||
/**
|
||||
* badges
|
||||
*/
|
||||
.dms-badge {
|
||||
border-radius: 2px;
|
||||
padding: 3px 6px;
|
||||
font-size: .8em;
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
.dms-badge-icon + .dms-badge-label {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.dms-badge.dmn-variable-name {
|
||||
background: #9e9e9e;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dms-badge.dmn-expression-language {
|
||||
background: rgba(84, 146, 250, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dms-badge + .dms-badge {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dmn-expression-language .dms-badge-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-cell:hover .dmn-expression-language .dms-badge-label,
|
||||
.dmn-decision-table-container .output-cell:hover .dmn-expression-language .dms-badge-label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .input-editor .dmn-variable-name,
|
||||
.dmn-decision-table-container .input-editor .dmn-expression-language {
|
||||
margin-top: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .cell:hover .dms-badge.dmn-expression-language {
|
||||
background: #92b9fc;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .cell .dms-badge.dmn-expression-language {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* cell expression language */
|
||||
|
||||
.dmn-decision-table-container .cell .dmn-expression-language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* end cell expression language */
|
||||
|
||||
/* drag and drop */
|
||||
.dmn-decision-table-container .dragover:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: #666;
|
||||
border-radius: 5px;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.top:before {
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
height: 5px;
|
||||
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.right:before {
|
||||
top: -6px;
|
||||
bottom: -6px;
|
||||
width: 5px;
|
||||
|
||||
right: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.bottom:before {
|
||||
left: -6px;
|
||||
right: -6px;
|
||||
height: 5px;
|
||||
|
||||
bottom: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragover.left:before {
|
||||
top: -6px;
|
||||
bottom: -6px;
|
||||
width: 5px;
|
||||
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.dmn-decision-table-container .dragged {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* cell description */
|
||||
|
||||
.dmn-decision-table-container .description-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -4px;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid black;
|
||||
transform: rotate(45deg);
|
||||
transform-origin: top;
|
||||
}
|
||||
|
||||
/* end cell description */
|
||||
|
|
@ -1,189 +1,189 @@
|
|||
.dmn-literal-expression-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
position: relative;
|
||||
color: #444;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* decision properties */
|
||||
.dmn-literal-expression-container .decision-properties {
|
||||
color: #444;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
border: 1px solid #444;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
min-width: 192px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name:not(.editor),
|
||||
.dmn-literal-expression-container .decision-id:not(.editor) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name.editor,
|
||||
.dmn-literal-expression-container .decision-id.editor {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name,
|
||||
.dmn-literal-expression-container .decision-id {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name div,
|
||||
.dmn-literal-expression-container .decision-id div {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name.editor:not(.focussed):hover,
|
||||
.dmn-literal-expression-container .decision-id.editor:not(.focussed):hover {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-id {
|
||||
border-top: 1px solid #444;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
.dmn-literal-expression-container .textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
border: 1px solid #444;
|
||||
border-bottom-width: 1px;
|
||||
white-space: pre;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea .content,
|
||||
.dmn-literal-expression-container .textarea .content-editable {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea .content-editable {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea.editor {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea:not(.editor) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* literal expression properties */
|
||||
.dmn-literal-expression-container .literal-expression-properties {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 1px solid #444;
|
||||
border-top: none;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table {
|
||||
border-spacing: 8px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table tr td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table tr td:last-child {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* view drd */
|
||||
.dmn-literal-expression-container .view-drd {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .view-drd .view-drd-button {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .view-drd .view-drd-button:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
/* powered by */
|
||||
.dmn-literal-expression-container .powered-by-logo {
|
||||
float: right;
|
||||
width: 38px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-logo .logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content div:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.dmn-literal-expression-container {
|
||||
font-family: 'Arial', sans-serif;
|
||||
position: relative;
|
||||
color: #444;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* decision properties */
|
||||
.dmn-literal-expression-container .decision-properties {
|
||||
color: #444;
|
||||
background-color: #fff;
|
||||
display: inline-block;
|
||||
border: 1px solid #444;
|
||||
border-bottom: none;
|
||||
position: relative;
|
||||
min-width: 192px;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name:not(.editor),
|
||||
.dmn-literal-expression-container .decision-id:not(.editor) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name.editor,
|
||||
.dmn-literal-expression-container .decision-id.editor {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name,
|
||||
.dmn-literal-expression-container .decision-id {
|
||||
margin: 0;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name div,
|
||||
.dmn-literal-expression-container .decision-id div {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name.editor:not(.focussed):hover,
|
||||
.dmn-literal-expression-container .decision-id.editor:not(.focussed):hover {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-name {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
padding: .3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .decision-id {
|
||||
border-top: 1px solid #444;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
.dmn-literal-expression-container .textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
border: 1px solid #444;
|
||||
border-bottom-width: 1px;
|
||||
white-space: pre;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea .content,
|
||||
.dmn-literal-expression-container .textarea .content-editable {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea .content-editable {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea div:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea.editor {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .textarea:not(.editor) {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* literal expression properties */
|
||||
.dmn-literal-expression-container .literal-expression-properties {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 1px solid #444;
|
||||
border-top: none;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table {
|
||||
border-spacing: 8px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table tr td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .literal-expression-properties table tr td:last-child {
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* view drd */
|
||||
.dmn-literal-expression-container .view-drd {
|
||||
float: right;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .view-drd .view-drd-button {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .view-drd .view-drd-button:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
/* powered by */
|
||||
.dmn-literal-expression-container .powered-by-logo {
|
||||
float: right;
|
||||
width: 38px;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-logo .logo {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content {
|
||||
background: #fff;
|
||||
padding: 8px;
|
||||
border: solid 1px #CCC;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
.dmn-literal-expression-container .powered-by-overlay .powered-by-overlay-content div:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue