Add Quick CTA for Script, PostScript and PreScript (#112)
Co-authored-by: theaubmov <ayoubaitlachgar98@gmail.com>
This commit is contained in:
Kevin Burnett
GitHub
parent
020de78f82
commit
d34eb99383
|
|
@ -1,5 +1,5 @@
|
|||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ html, body {
|
|||
#container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#modeler {
|
||||
|
|
@ -34,9 +34,9 @@ Remove the height of the header from the main content area,
|
|||
adjust CSS props so that padding won't add to dimensions.
|
||||
*/
|
||||
#container:has(#modeler) {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 65px);
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -72,12 +72,12 @@ adjust CSS props so that padding won't add to dimensions.
|
|||
max-width: 350px;
|
||||
}
|
||||
|
||||
.bio-properties-panel-group-entries > .bio-properties-panel-description {
|
||||
.bio-properties-panel-group-entries>.bio-properties-panel-description {
|
||||
padding-inline: 15px;
|
||||
padding-block: 5px;
|
||||
}
|
||||
|
||||
.bio-properties-panel-group-entries.open > .bio-properties-panel-group {
|
||||
.bio-properties-panel-group-entries.open>.bio-properties-panel-group {
|
||||
margin-inline: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
|
|
@ -97,25 +97,33 @@ adjust CSS props so that padding won't add to dimensions.
|
|||
|
||||
/* Code Editor -- provided as a div overlay */
|
||||
.overlay {
|
||||
position: fixed; /* Sit on top of the page content */
|
||||
display: none; /* Hidden by default */
|
||||
width: 100%; /* Full width (cover the whole page) */
|
||||
height: 100%; /* Full height (cover the whole page) */
|
||||
position: fixed;
|
||||
/* Sit on top of the page content */
|
||||
display: none;
|
||||
/* Hidden by default */
|
||||
width: 100%;
|
||||
/* Full width (cover the whole page) */
|
||||
height: 100%;
|
||||
/* Full height (cover the whole page) */
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
|
||||
z-index: 200; /* BPMN Canvas has some huge z-indexes, pop-up tools are 100 for ex.*/
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
/* Black background with opacity */
|
||||
z-index: 200;
|
||||
/* BPMN Canvas has some huge z-indexes, pop-up tools are 100 for ex.*/
|
||||
}
|
||||
|
||||
#code_editor, #markdown_editor {
|
||||
#code_editor,
|
||||
#markdown_editor {
|
||||
background-color: #ccc;
|
||||
margin: 50px auto 10px auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
#code_buttons, #markdown_buttons {
|
||||
#code_buttons,
|
||||
#markdown_buttons {
|
||||
margin: 50px auto 10px auto;
|
||||
max-width: 800px;
|
||||
right: 10px;
|
||||
|
|
@ -149,4 +157,37 @@ adjust CSS props so that padding won't add to dimensions.
|
|||
|
||||
.d-grid {
|
||||
display: grid !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bpmn-icon-post-script-trigger {
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23126D82' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M18.56,11.62L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68L19.73,14.4a3.59,3.59,0,0,1-1.16-2.79Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-2-1.38H24.64l3.24,2.21-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M26.85,1.14,21.13,11A1.28,1.28,0,0,0,22.23,13H33.68A1.28,1.28,0,0,0,34.78,11L29.06,1.14A1.28,1.28,0,0,0,26.85,1.14Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
/* /*Black background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M18.56,11.62L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68L19.73,14.4a3.59,3.59,0,0,1-1.16-2.79Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-2-1.38H24.64l3.24,2.21-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M26.85,1.14,21.13,11A1.28,1.28,0,0,0,22.23,13H33.68A1.28,1.28,0,0,0,34.78,11L29.06,1.14A1.28,1.28,0,0,0,26.85,1.14Z'%3E%3C/path%3E%3C/svg%3E") !important; */
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bpmn-icon-pre-script-trigger {
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23126D82' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-6.53-4.45A1,1,0,1,0,22.55,14l5.32,3.63-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M19.94,9.83a.9.9,0,0,0-1.09.66L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68l3.44-13.81A.9.9,0,0,0,19.94,9.83Z'%3E%3C/path%3E%3Ccircle cx='30' cy='6' r='5'%3E%3C/circle%3E%3C/svg%3E") !important;
|
||||
/* *Black background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-6.53-4.45A1,1,0,1,0,22.55,14l5.32,3.63-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M19.94,9.83a.9.9,0,0,0-1.09.66L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68l3.44-13.81A.9.9,0,0,0,19.94,9.83Z'%3E%3C/path%3E%3Ccircle cx='30' cy='6' r='5'%3E%3C/circle%3E%3C/svg%3E") !important; */
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.bpmn-icon-pre-script-trigger:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23126D82' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-6.53-4.45A1,1,0,1,0,22.55,14l5.32,3.63-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M19.94,9.83a.9.9,0,0,0-1.09.66L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68l3.44-13.81A.9.9,0,0,0,19.94,9.83Z'%3E%3C/path%3E%3Ccircle cx='30' cy='6' r='5'%3E%3C/circle%3E%3C/svg%3E") !important;
|
||||
}
|
||||
|
||||
.bpmn-icon-post-script-trigger:hover {
|
||||
background-image: url("data:image/svg+xml,%3Csvg fill='%23126D82' viewBox='0 0 36 36' version='1.1' preserveAspectRatio='xMidYMid meet' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M13.71,12.59a1,1,0,0,0-1.39-.26L5.79,16.78a1,1,0,0,0,0,1.65l6.53,4.45a1,1,0,1,0,1.13-1.65L8.13,17.61,13.45,14A1,1,0,0,0,13.71,12.59Z'%3E%3C/path%3E%3Cpath d='M18.56,11.62L15.41,24.29a.9.9,0,0,0,.66,1.09l.22,0a.9.9,0,0,0,.87-.68L19.73,14.4a3.59,3.59,0,0,1-1.16-2.79Z'%3E%3C/path%3E%3Cpath d='M30.21,16.78l-2-1.38H24.64l3.24,2.21-5.32,3.63a1,1,0,0,0,1.13,1.65l6.53-4.45a1,1,0,0,0,0-1.65Z'%3E%3C/path%3E%3Cpath d='M26.85,1.14,21.13,11A1.28,1.28,0,0,0,22.23,13H33.68A1.28,1.28,0,0,0,34.78,11L29.06,1.14A1.28,1.28,0,0,0,26.85,1.14Z'%3E%3C/path%3E%3C/svg%3E") !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
import { is } from "bpmn-js/lib/util/ModelUtil";
|
||||
import { getScriptString, updateScript } from "../propertiesPanel/SpiffScriptGroup";
|
||||
|
||||
const LOW_PRIORITY = 500;
|
||||
|
||||
export default function CustomContextPadProvider(contextPad, eventBus, commandStack, moddle) {
|
||||
contextPad.registerProvider(LOW_PRIORITY, this);
|
||||
|
||||
this.getContextPadEntries = function (element) {
|
||||
return function (entries) {
|
||||
if (is(element, 'bpmn:ScriptTask')) {
|
||||
entries['trigger-script'] = {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-script',
|
||||
title: 'Open Script Editor',
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
triggerScript(element, 'bpmn:script', eventBus, commandStack, moddle)
|
||||
}
|
||||
}
|
||||
};
|
||||
} else if (
|
||||
hasPreAndPostScript(element)
|
||||
) {
|
||||
const PreScript = getScriptString(element, 'spiffworkflow:PreScript');
|
||||
if (PreScript && PreScript !== '') {
|
||||
entries['trigger-preScript'] = {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-pre-script-trigger',
|
||||
title: 'Open PreScript Editor',
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
triggerScript(element, 'spiffworkflow:PreScript', eventBus, commandStack, moddle)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const PostScript = getScriptString(element, 'spiffworkflow:PostScript');
|
||||
if (PostScript && PostScript !== '') {
|
||||
entries['trigger-postScript'] = {
|
||||
group: 'connect',
|
||||
className: 'bpmn-icon-post-script-trigger',
|
||||
title: 'Open PostScript Editor',
|
||||
action: {
|
||||
click: function (event, element) {
|
||||
triggerScript(element, 'spiffworkflow:PostScript', eventBus, commandStack, moddle)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return entries;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
CustomContextPadProvider.$inject = [
|
||||
'contextPad',
|
||||
'eventBus',
|
||||
'commandStack',
|
||||
'moddle'
|
||||
];
|
||||
|
||||
function hasPreAndPostScript(element) {
|
||||
return is(element, 'bpmn:Task') ||
|
||||
is(element, 'bpmn:UserTask') ||
|
||||
is(element, 'bpmn:ServiceTask') ||
|
||||
is(element, 'bpmn:SendTask') ||
|
||||
is(element, 'bpmn:ReceiveTask') ||
|
||||
is(element, 'bpmn:ManualTask') ||
|
||||
is(element, 'bpmn:CallActivity') ||
|
||||
is(element, 'bpmn:BusinessRuleTask') ||
|
||||
is(element, 'bpmn:SubProcess');
|
||||
}
|
||||
|
||||
function triggerScript(element, type, eventBus, commandStack, moddle) {
|
||||
const script = getScriptString(element, type);
|
||||
eventBus.fire('spiff.script.edit', {
|
||||
element,
|
||||
scriptType: type,
|
||||
script,
|
||||
eventBus,
|
||||
});
|
||||
eventBus.once('spiff.script.update', (event) => {
|
||||
updateScript(
|
||||
commandStack,
|
||||
moddle,
|
||||
element,
|
||||
event.scriptType,
|
||||
event.script
|
||||
);
|
||||
});
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import CustomContextPadProvider from './contextPad/CustomContextPadProvider';
|
||||
import ExtensionsPropertiesProvider from './propertiesPanel/ExtensionsPropertiesProvider';
|
||||
|
||||
export default {
|
||||
__init__: [ 'extensionsPropertiesProvider' ],
|
||||
__init__: [ 'extensionsPropertiesProvider', 'customContextPadProvider' ],
|
||||
extensionsPropertiesProvider: [ 'type', ExtensionsPropertiesProvider ],
|
||||
customContextPadProvider: [ 'type', CustomContextPadProvider ],
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ function getScriptObject(element, scriptType) {
|
|||
})[0];
|
||||
}
|
||||
|
||||
function updateScript(commandStack, moddle, element, scriptType, newValue) {
|
||||
export function updateScript(commandStack, moddle, element, scriptType, newValue) {
|
||||
const { businessObject } = element;
|
||||
let scriptObj = getScriptObject(element, scriptType);
|
||||
// Create the script object if needed.
|
||||
|
|
@ -136,7 +136,7 @@ function updateScript(commandStack, moddle, element, scriptType, newValue) {
|
|||
}
|
||||
}
|
||||
|
||||
function getScriptString(element, scriptType) {
|
||||
export function getScriptString(element, scriptType) {
|
||||
const scriptObj = getScriptObject(element, scriptType);
|
||||
if (scriptObj && scriptObj.value) {
|
||||
return scriptObj.value;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ import StandardLoopPropertiesProvider from './loops/StandardLoopPropertiesProvid
|
|||
import MultiInstancePropertiesProvider from './loops/MultiInstancePropertiesProvider';
|
||||
import CallActivityInterceptor from './callActivity/CallActivityInterceptor';
|
||||
import MessageInterceptor from './messages/MessageInterceptor';
|
||||
import CustomContextPadProvider from './extensions/contextPad/CustomContextPadProvider';
|
||||
|
||||
export default {
|
||||
__depends__: [RulesModule],
|
||||
|
|
@ -33,6 +34,7 @@ export default {
|
|||
'dataStorePropertiesProvider',
|
||||
'conditionsPropertiesProvider',
|
||||
'extensionsPropertiesProvider',
|
||||
'customContextPadProvider',
|
||||
'messagesPropertiesProvider',
|
||||
'messageInterceptor',
|
||||
'signalPropertiesProvider',
|
||||
|
|
@ -57,6 +59,7 @@ export default {
|
|||
dataStorePropertiesProvider: ['type', DataStorePropertiesProvider],
|
||||
conditionsPropertiesProvider: ['type', ConditionsPropertiesProvider],
|
||||
extensionsPropertiesProvider: ['type', ExtensionsPropertiesProvider],
|
||||
customContextPadProvider: ['type', CustomContextPadProvider],
|
||||
signalPropertiesProvider: ['type', SignalPropertiesProvider],
|
||||
errorPropertiesProvider: ['type', ErrorPropertiesProvider],
|
||||
escalationPropertiesProvider: ['type', EscalationPropertiesProvider],
|
||||
|
|
|
|||
Loading…
Reference in New Issue