remove 设计器无用代码 调整请假查询
This commit is contained in:
gssong
parent
2d1333c3ed
commit
67286fc207
@ -1,512 +0,0 @@
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
function _cmmnGetColor(element, defaultColor)
|
||||
{
|
||||
var strokeColor;
|
||||
if(element.current) {
|
||||
strokeColor = CURRENT_COLOR;
|
||||
} else if(element.completed) {
|
||||
strokeColor = COMPLETED_COLOR;
|
||||
} else {
|
||||
strokeColor = defaultColor;
|
||||
}
|
||||
return strokeColor;
|
||||
}
|
||||
|
||||
function _drawPlanModel(planModel)
|
||||
{
|
||||
var rect = paper.rect(planModel.x, planModel.y, planModel.width, planModel.height);
|
||||
|
||||
rect.attr({"stroke-width": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "white"
|
||||
});
|
||||
|
||||
if (planModel.name)
|
||||
{
|
||||
var planModelName = paper.text(planModel.x + 14, planModel.y + (planModel.height / 2), planModel.name).attr({
|
||||
"text-anchor" : "middle",
|
||||
"font-family" : "Arial",
|
||||
"font-size" : "12",
|
||||
"fill" : "#000000"
|
||||
});
|
||||
|
||||
planModelName.transform("r270");
|
||||
}
|
||||
}
|
||||
|
||||
function _drawSubProcess(element)
|
||||
{
|
||||
var rect = paper.rect(element.x, element.y, element.width, element.height, 4);
|
||||
|
||||
var strokeColor = _cmmnGetColor(element, MAIN_STROKE_COLOR);
|
||||
|
||||
rect.attr({"stroke-width": 1,
|
||||
"stroke": strokeColor,
|
||||
"fill": "white"
|
||||
});
|
||||
}
|
||||
|
||||
function _drawServiceTaskTypeIcon(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
if (element.taskType === "mail")
|
||||
{
|
||||
_drawSendTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
}
|
||||
else if (element.taskType === "camel")
|
||||
{
|
||||
_drawCamelTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
}
|
||||
else if (element.taskType === "mule")
|
||||
{
|
||||
_drawMuleTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
}
|
||||
else if (element.taskType === "http")
|
||||
{
|
||||
_drawHttpTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
}
|
||||
else if (element.stencilIconId)
|
||||
{
|
||||
paper.image("../service/stencilitem/" + element.stencilIconId + "/icon", element.x + 4, element.y + 4, 16, 16);
|
||||
}
|
||||
else
|
||||
{
|
||||
_drawServiceTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
}
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawHttpServiceTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawHttpTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawHumanTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawHumanTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawCaseTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawCaseTaskIcon(paper, element.x + 1, element.y + 1);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawProcessTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawProcessTaskIcon(paper, element.x + 1, element.y + 1);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawScriptTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("m 5,2 0,0.094 c 0.23706,0.064 0.53189,0.1645 0.8125,0.375 0.5582,0.4186 1.05109,1.228 1.15625,2.5312 l 8.03125,0 1,0 1,0 c 0,-3 -2,-3 -2,-3 l -10,0 z M 4,3 4,13 2,13 c 0,3 2,3 2,3 l 9,0 c 0,0 2,0 2,-3 L 15,6 6,6 6,5.5 C 6,4.1111 5.5595,3.529 5.1875,3.25 4.8155,2.971 4.5,3 4.5,3 L 4,3 z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var scriptTaskIcon = paper.set();
|
||||
scriptTaskIcon.push(path1);
|
||||
|
||||
scriptTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawScriptServiceTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawScriptTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawSendEventServiceTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawSendTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawExternalWorkerServiceTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawServiceTaskIcon(paper, element.x + 4, element.y + 4);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawDecisionTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawDecisionTaskIcon(paper, element.x + 1, element.y + 1);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawServiceTask(element)
|
||||
{
|
||||
_drawTask(element);
|
||||
_drawServiceTaskTypeIcon(element);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawTask(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _cmmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth;
|
||||
if (strokeColor === ACTIVITY_STROKE_COLOR) {
|
||||
strokeWidth = TASK_STROKE;
|
||||
} else {
|
||||
strokeWidth = TASK_HIGHLIGHT_STROKE;
|
||||
}
|
||||
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 4);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = ACTIVITY_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x, element.y, element.width, element.height, "middle", "middle", 11);
|
||||
}
|
||||
}
|
||||
|
||||
function _drawTimerEventListener(element)
|
||||
{
|
||||
_drawEventListener(element);
|
||||
_drawTimerEventListenerIcon(paper, element);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawUserEventListener(element)
|
||||
{
|
||||
_drawEventListener(element);
|
||||
_drawUserEventListenerIcon(paper, element);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawVariableEventListener(element)
|
||||
{
|
||||
_drawEventListener(element);
|
||||
_drawVariableEventListenerIcon(paper, element);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawGenericEventListener(element)
|
||||
{
|
||||
_drawEventListener(element);
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawEventListener(element)
|
||||
{
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
|
||||
var circle = paper.circle(x, y, 15);
|
||||
|
||||
circle.attr({"stroke-width": 1,
|
||||
"stroke": "black",
|
||||
"fill": "white"
|
||||
});
|
||||
|
||||
circle.id = element.id;
|
||||
}
|
||||
|
||||
function _drawMilestone(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _cmmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth;
|
||||
if (strokeColor === ACTIVITY_STROKE_COLOR) {
|
||||
strokeWidth = TASK_STROKE;
|
||||
} else {
|
||||
strokeWidth = TASK_HIGHLIGHT_STROKE;
|
||||
}
|
||||
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 24);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = WHITE_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x, element.y, element.width, element.height, "middle", "middle", 11);
|
||||
}
|
||||
}
|
||||
|
||||
function _drawStage(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _cmmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth;
|
||||
if (strokeColor === ACTIVITY_STROKE_COLOR) {
|
||||
strokeWidth = TASK_STROKE;
|
||||
} else {
|
||||
strokeWidth = TASK_HIGHLIGHT_STROKE;
|
||||
}
|
||||
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 16);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = WHITE_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x + 10, element.y + 5, element.width, element.height, "start", "top", 11);
|
||||
}
|
||||
}
|
||||
|
||||
function _drawPlanModel(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _cmmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth;
|
||||
if (strokeColor === ACTIVITY_STROKE_COLOR) {
|
||||
strokeWidth = TASK_STROKE;
|
||||
} else {
|
||||
strokeWidth = TASK_HIGHLIGHT_STROKE;
|
||||
}
|
||||
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 4);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = WHITE_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
var path1 = paper.path("M20 55 L37 34 L275 34 L291 55");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": strokeColor,
|
||||
"fill": "#ffffff"
|
||||
});
|
||||
|
||||
var planModelHeader = paper.set();
|
||||
planModelHeader.push(path1);
|
||||
|
||||
planModelHeader.translate(element.x, element.y - 55);
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x + 10, element.y - 16, 275, element.height, "middle", "top", 11);
|
||||
}
|
||||
}
|
||||
|
||||
function _drawEntryCriterion(element)
|
||||
{
|
||||
var strokeColor = _cmmnGetColor(element, MAIN_STROKE_COLOR);
|
||||
|
||||
var rhombus = paper.path("M" + element.x + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + (element.y + element.height) +
|
||||
"L" + (element.x + element.width) + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + element.y + "z"
|
||||
);
|
||||
|
||||
// Fill
|
||||
var gatewayFillColor = WHITE_FILL_COLOR;
|
||||
|
||||
// Opacity
|
||||
var gatewayOpacity = 1.0;
|
||||
|
||||
rhombus.attr("stroke-width", 1);
|
||||
rhombus.attr("stroke", strokeColor);
|
||||
rhombus.attr("fill", gatewayFillColor);
|
||||
rhombus.attr("fill-opacity", gatewayOpacity);
|
||||
|
||||
rhombus.id = element.id;
|
||||
}
|
||||
|
||||
function _drawExitCriterion(element)
|
||||
{
|
||||
var strokeColor = _cmmnGetColor(element, MAIN_STROKE_COLOR);
|
||||
|
||||
var rhombus = paper.path("M" + element.x + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + (element.y + element.height) +
|
||||
"L" + (element.x + element.width) + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + element.y + "z"
|
||||
);
|
||||
|
||||
// Fill
|
||||
var gatewayFillColor = '#000000';
|
||||
|
||||
// Opacity
|
||||
var gatewayOpacity = 1.0;
|
||||
|
||||
rhombus.attr("stroke-width", 1);
|
||||
rhombus.attr("stroke", strokeColor);
|
||||
rhombus.attr("fill", gatewayFillColor);
|
||||
rhombus.attr("fill-opacity", gatewayOpacity);
|
||||
|
||||
rhombus.id = element.id;
|
||||
}
|
||||
|
||||
function _drawMultilineText(text, x, y, boxWidth, boxHeight, horizontalAnchor, verticalAnchor, fontSize)
|
||||
{
|
||||
if (!text || text == "")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var textBoxX, textBoxY;
|
||||
var width = boxWidth - (2 * TEXT_PADDING);
|
||||
|
||||
if (horizontalAnchor === "middle")
|
||||
{
|
||||
textBoxX = x + (boxWidth / 2);
|
||||
}
|
||||
else if (horizontalAnchor === "start")
|
||||
{
|
||||
textBoxX = x;
|
||||
}
|
||||
|
||||
textBoxY = y + (boxHeight / 2);
|
||||
|
||||
var t = paper.text(textBoxX + TEXT_PADDING, textBoxY + TEXT_PADDING).attr({
|
||||
"text-anchor" : horizontalAnchor,
|
||||
"font-family" : "Arial",
|
||||
"font-size" : fontSize,
|
||||
"fill" : "#373e48"
|
||||
});
|
||||
|
||||
var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
t.attr({
|
||||
"text" : abc
|
||||
});
|
||||
var letterWidth = t.getBBox().width / abc.length;
|
||||
|
||||
t.attr({
|
||||
"text" : text
|
||||
});
|
||||
var removedLineBreaks = text.split("\n");
|
||||
var x = 0, s = [];
|
||||
for (var r = 0; r < removedLineBreaks.length; r++)
|
||||
{
|
||||
var words = removedLineBreaks[r].split(" ");
|
||||
for ( var i = 0; i < words.length; i++) {
|
||||
|
||||
var l = words[i].length;
|
||||
if (x + (l * letterWidth) > width) {
|
||||
s.push("\n");
|
||||
x = 0;
|
||||
}
|
||||
x += l * letterWidth;
|
||||
s.push(words[i] + " ");
|
||||
}
|
||||
s.push("\n");
|
||||
x = 0;
|
||||
}
|
||||
t.attr({
|
||||
"text" : s.join("")
|
||||
});
|
||||
|
||||
if (verticalAnchor && verticalAnchor === "top")
|
||||
{
|
||||
t.attr({"y": y + (t.getBBox().height / 2)});
|
||||
}
|
||||
}
|
||||
|
||||
function _drawAssociation(flow){
|
||||
|
||||
var polyline = new Polyline(flow.id, flow.waypoints, ASSOCIATION_STROKE, paper);
|
||||
polyline.element = paper.path(polyline.path);
|
||||
polyline.element.attr({"stroke-width": ASSOCIATION_STROKE});
|
||||
polyline.element.attr({"stroke-dasharray": ". "});
|
||||
polyline.element.attr({"stroke":"#585858"});
|
||||
|
||||
polyline.element.id = flow.id;
|
||||
|
||||
var polylineInvisible = new Polyline(flow.id, flow.waypoints, ASSOCIATION_STROKE, paper);
|
||||
|
||||
polylineInvisible.element = paper.path(polyline.path);
|
||||
polylineInvisible.element.attr({
|
||||
"opacity": 0,
|
||||
"stroke-width": 8,
|
||||
"stroke" : "#000000"
|
||||
});
|
||||
|
||||
_showTip(jQuery(polylineInvisible.element.node), flow);
|
||||
|
||||
polylineInvisible.element.mouseover(function() {
|
||||
paper.getById(polyline.element.id).attr({"stroke":"blue"});
|
||||
});
|
||||
|
||||
polylineInvisible.element.mouseout(function() {
|
||||
paper.getById(polyline.element.id).attr({"stroke":"#585858"});
|
||||
});
|
||||
}
|
||||
|
||||
function _drawArrowHead(line, connectionType)
|
||||
{
|
||||
var doubleArrowWidth = 2 * ARROW_WIDTH;
|
||||
|
||||
var arrowHead = paper.path("M0 0L-" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH/2 + .5) + " -" + doubleArrowWidth + "z");
|
||||
|
||||
// anti smoothing
|
||||
if (this.strokeWidth%2 == 1)
|
||||
line.x2 += .5, line.y2 += .5;
|
||||
|
||||
arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
|
||||
arrowHead.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
|
||||
|
||||
arrowHead.attr("fill", "#585858");
|
||||
|
||||
arrowHead.attr("stroke-width", SEQUENCEFLOW_STROKE);
|
||||
arrowHead.attr("stroke", "#585858");
|
||||
|
||||
return arrowHead;
|
||||
}
|
||||
@ -1,216 +0,0 @@
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
function _drawHumanTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111 l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c 0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#d1b575"
|
||||
});
|
||||
|
||||
var userTaskIcon = paper.set();
|
||||
userTaskIcon.push(path1);
|
||||
|
||||
userTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawServiceTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375 6.6676654,3.4929791 6.3336971,3.6092802 6.03125,3.78125 6.02349,3.78566 6.007733,3.77681 6,3.78125 5.8811373,3.761018 5.8125,3.71875 5.8125,3.71875 l -1.6875,-1 -1.40625,1.4375 0.96875,1.65625 c 0,0 0.065705,0.068637 0.09375,0.1875 0.002,0.00849 -0.00169,0.022138 0,0.03125 C 3.6092802,6.3336971 3.4929791,6.6676654 3.375,7 3.3629836,7.0338489 3.3239228,7.0596246 3.3125,7.09375 3.125763,7.4756184 2.875,7.5 2.875,7.5 L 1,8 l 0,2 1.875,0.5 c 0,0 0.250763,0.02438 0.4375,0.40625 0.017853,0.03651 0.046318,0.04988 0.0625,0.09375 0.1129372,0.318132 0.2124732,0.646641 0.375,0.9375 -0.00302,0.215512 -0.09375,0.34375 -0.09375,0.34375 L 2.6875,13.9375 4.09375,15.34375 5.78125,14.375 c 0,0 0.1229911,-0.09744 0.34375,-0.09375 0.2720511,0.147787 0.5795915,0.23888 0.875,0.34375 0.033849,0.01202 0.059625,0.05108 0.09375,0.0625 C 7.4756199,14.874237 7.5,15.125 7.5,15.125 L 8,17 l 2,0 0.5,-1.875 c 0,0 0.02438,-0.250763 0.40625,-0.4375 0.03651,-0.01785 0.04988,-0.04632 0.09375,-0.0625 0.332335,-0.117979 0.666303,-0.23428 0.96875,-0.40625 0.177303,0.0173 0.28125,0.09375 0.28125,0.09375 l 1.65625,0.96875 1.40625,-1.40625 -0.96875,-1.65625 c 0,0 -0.07645,-0.103947 -0.09375,-0.28125 0.162527,-0.290859 0.262063,-0.619368 0.375,-0.9375 0.01618,-0.04387 0.04465,-0.05724 0.0625,-0.09375 C 14.874237,10.52438 15.125,10.5 15.125,10.5 L 17,10 17,8 15.125,7.5 c 0,0 -0.250763,-0.024382 -0.4375,-0.40625 C 14.669647,7.0572406 14.641181,7.0438697 14.625,7 14.55912,6.8144282 14.520616,6.6141566 14.4375,6.4375 c -0.224363,-0.4866 0,-0.71875 0,-0.71875 L 15.40625,4.0625 14,2.625 l -1.65625,1 c 0,0 -0.253337,0.1695664 -0.71875,-0.03125 l -0.03125,0 C 11.405359,3.5035185 11.198648,3.4455201 11,3.375 10.95613,3.3588185 10.942759,3.3303534 10.90625,3.3125 10.524382,3.125763 10.5,2.875 10.5,2.875 L 10,1 8,1 z m 1,5 c 1.656854,0 3,1.3431458 3,3 0,1.656854 -1.343146,3 -3,3 C 7.3431458,12 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var serviceTaskIcon = paper.set();
|
||||
serviceTaskIcon.push(path1);
|
||||
|
||||
serviceTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawCaseTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M5 8 L9 4 L18 4 L 21 7");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#000000"
|
||||
});
|
||||
|
||||
var path2 = paper.path("M1 23 L1 4 L30 4 L30 23z");
|
||||
path2.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var caseTaskIcon = paper.set();
|
||||
caseTaskIcon.push(path1);
|
||||
caseTaskIcon.push(path2);
|
||||
|
||||
caseTaskIcon.translate(startX, startY);
|
||||
caseTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawProcessTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M1 23 L7 11 L1 0 L30 0 L 35 11 L 30 23z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var processTaskIcon = paper.set();
|
||||
processTaskIcon.push(path1);
|
||||
|
||||
processTaskIcon.translate(startX, startY);
|
||||
processTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawSendTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M 1 3 L 9 11 L 17 3 L 1 3 z M 1 5 L 1 13 L 5 9 L 1 5 z M 17 5 L 13 9 L 17 13 L 17 5 z M 6 10 L 1 15 L 17 15 L 12 10 L 9 13 L 6 10 z");
|
||||
path1.attr({
|
||||
"stroke": "none",
|
||||
"fill": "#16964d"
|
||||
});
|
||||
|
||||
var sendTaskIcon = paper.set();
|
||||
sendTaskIcon.push(path1);
|
||||
|
||||
sendTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawDecisionTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("m 1,2 0,14 16,0 0,-14 z m 1.9,2.4000386 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var decisionTaskIcon = paper.set();
|
||||
decisionTaskIcon.push(path1);
|
||||
|
||||
decisionTaskIcon.translate(startX, startY);
|
||||
decisionTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawHttpTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path = paper.path("m 16.704699,5.9229055 q 0.358098,0 0.608767,0.2506681 0.250669,0.250668 0.250669,0.6087677 0,0.3580997 -0.250669,0.6087677 -0.250669,0.2506679 -0.608767,0.2506679 -0.358098,0 -0.608767,-0.2506679 -0.250669,-0.250668 -0.250669,-0.6087677 0,-0.3580997 0.250669,-0.6087677 0.250669,-0.2506681 0.608767,-0.2506681 z m 2.578308,-2.0053502 q -2.229162,0 -3.854034,0.6759125 -1.624871,0.6759067 -3.227361,2.2694472 -0.716197,0.725146 -1.575633,1.7457293 L 7.2329969,8.7876913 Q 7.0897576,8.8055849 7.000233,8.9309334 L 4.9948821,12.368677 q -0.035811,0.06267 -0.035811,0.143242 0,0.107426 0.080572,0.205905 l 0.5729577,0.572957 q 0.125334,0.116384 0.2864786,0.07162 l 2.4708789,-0.760963 2.5156417,2.515645 -0.76096,2.470876 q -0.009,0.02687 -0.009,0.08057 0,0.125338 0.08058,0.205905 l 0.572957,0.572958 q 0.170096,0.152194 0.349146,0.04476 l 3.437744,-2.005351 q 0.125335,-0.08953 0.143239,-0.232763 l 0.17905,-3.392986 q 1.02058,-0.859435 1.745729,-1.575629 1.67411,-1.6830612 2.309735,-3.2049805 0.635625,-1.5219191 0.635625,-3.8585111 0,-0.1253369 -0.08505,-0.2148575 -0.08505,-0.089526 -0.201431,-0.089526 z");
|
||||
path.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#16964d"
|
||||
});
|
||||
|
||||
startX += -2;
|
||||
startY += -2;
|
||||
|
||||
path.transform("T" + startX + "," + startY);
|
||||
|
||||
}
|
||||
|
||||
function _drawBusinessRuleTaskIcon(paper, startX, startY) {
|
||||
var path1 = paper.path("m 1,2 0,14 16,0 0,-14 z m 1.45458,5.6000386 2.90906,0 0,2.7999224 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.7999224 -8.72718,0 z m -4.36364,4.1998844 2.90906,0 0,2.800116 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.800116 -8.72718,0 z");
|
||||
path1.attr({
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var businessRuleTaskIcon = paper.set();
|
||||
businessRuleTaskIcon.push(path1);
|
||||
|
||||
businessRuleTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawTimerEventListenerIcon(paper, element)
|
||||
{
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
|
||||
var circle = paper.circle(x, y, 10);
|
||||
|
||||
circle.attr({"stroke-width": 1,
|
||||
"stroke": "black",
|
||||
"fill": "none"
|
||||
});
|
||||
|
||||
var path = paper.path("M 10 0 C 4.4771525 0 0 4.4771525 0 10 C 0 15.522847 4.4771525 20 10 20 C 15.522847 20 20 15.522847 20 10 C 20 4.4771525 15.522847 1.1842379e-15 10 0 z M 9.09375 1.03125 C 9.2292164 1.0174926 9.362825 1.0389311 9.5 1.03125 L 9.5 3.5 L 10.5 3.5 L 10.5 1.03125 C 15.063526 1.2867831 18.713217 4.9364738 18.96875 9.5 L 16.5 9.5 L 16.5 10.5 L 18.96875 10.5 C 18.713217 15.063526 15.063526 18.713217 10.5 18.96875 L 10.5 16.5 L 9.5 16.5 L 9.5 18.96875 C 4.9364738 18.713217 1.2867831 15.063526 1.03125 10.5 L 3.5 10.5 L 3.5 9.5 L 1.03125 9.5 C 1.279102 5.0736488 4.7225326 1.4751713 9.09375 1.03125 z M 9.5 5 L 9.5 8.0625 C 8.6373007 8.2844627 8 9.0680195 8 10 C 8 11.104569 8.8954305 12 10 12 C 10.931981 12 11.715537 11.362699 11.9375 10.5 L 14 10.5 L 14 9.5 L 11.9375 9.5 C 11.756642 8.7970599 11.20294 8.2433585 10.5 8.0625 L 10.5 5 L 9.5 5 z");
|
||||
path.attr({
|
||||
"stroke": "none",
|
||||
"fill": "#585858"
|
||||
});
|
||||
path.transform("T" + (element.x + 5) + "," + (element.y + 5));
|
||||
return path;
|
||||
}
|
||||
|
||||
function _drawUserEventListenerIcon(paper, element) {
|
||||
var userTaskIcon = paper.set();
|
||||
var path1 = paper.path("M0.585,24.167h24.083v-7.833c0,0-2.333-3.917-7.083-5.167h-9.25 c-4.417,1.333-7.833,5.75-7.833,5.75L0.585,24.167z");
|
||||
path1.attr({"opacity": 1, "stroke": "none", "fill": "#F4F6F7"});
|
||||
userTaskIcon.push(path1);
|
||||
|
||||
var path2 = paper.path("M6,20L6,24");
|
||||
path2.attr({"opacity": 1, "stroke": "white", "fill": "none"});
|
||||
userTaskIcon.push(path2);
|
||||
|
||||
var path3 = paper.path("M20,20L20,24");
|
||||
path3.attr({"opacity": 1, "stroke": "white", "fill": "none"});
|
||||
userTaskIcon.push(path3);
|
||||
|
||||
var circle = paper.circle(13.002, 5.916, 5.417);
|
||||
circle.attr({"stroke-width": 1, "stroke": "black", "fill": "#000000"});
|
||||
userTaskIcon.push(circle);
|
||||
|
||||
var path4 = paper.path("M8.043,7.083c0,0,2.814-2.426,5.376-1.807s4.624-0.693,4.624-0.693 c0.25,1.688,0.042,3.75-1.458,5.584c0,0,1.083,0.75,1.083,1.5s0.125,1.875-1,3s-5.5,1.25-6.75,0S8.668,12.834,8.668,12 s0.583-1.25,1.25-1.917C8.835,9.5,7.419,7.708,8.043,7.083z");
|
||||
path4.attr({"opacity": 1, "stroke": "none", "fill": "#F0EFF0"});
|
||||
userTaskIcon.push(path4);
|
||||
|
||||
var x = (element.width / 2) - 2;
|
||||
var y = (element.height / 2) - 2;
|
||||
var circle2 = paper.circle(x, y, 17);
|
||||
circle2.attr({"stroke-width": 1, "stroke": "#F0EFF0", "fill": "none"});
|
||||
userTaskIcon.push(circle2);
|
||||
|
||||
userTaskIcon.transform("S0.7,0.7T" + (element.x + 2) + "," + (element.y + 2));
|
||||
return userTaskIcon;
|
||||
}
|
||||
|
||||
function _drawVariableEventListenerIcon(paper, element) {
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
|
||||
var circle = paper.circle(x, y, 10);
|
||||
|
||||
circle.attr({"stroke-width": 1,
|
||||
"stroke": "black",
|
||||
"fill": "none"
|
||||
});
|
||||
|
||||
var path = paper.path("M 20.834856,22.874369 L 10.762008,22.873529 L 7.650126,13.293421 L 15.799725,7.3734296 L 23.948336,13.294781 L 20.834856,22.874369 z");
|
||||
path.attr({
|
||||
"stroke": "#585858",
|
||||
"fill": "none"
|
||||
});
|
||||
|
||||
path.transform("S0.8,0.8T" + (element.x - 1) + "," + (element.y - 1));
|
||||
|
||||
return path;
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
div[class*='ui-tooltip-flowable-'] {
|
||||
background-color: #ffffff;
|
||||
border-color: #c5c5c5;
|
||||
color: #4a4a4a;
|
||||
font-family: Verdana;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div[class*='ui-tooltip-flowable-'] .qtip-content {
|
||||
color: #4a4a4a;
|
||||
background-color: #ffffff;
|
||||
font-family: Verdana;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ui-tooltip-flowable-cmmn .qtip-titlebar {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
background: #2B414F;
|
||||
}
|
||||
|
||||
.ui-tooltip-flowable-cmmn .qtip-tip {
|
||||
background-color: #2B414F;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="display/jquery.qtip.min.css" />
|
||||
<link type="text/css" rel="stylesheet" href="display-cmmn/displaymodel.css" />
|
||||
|
||||
<script type="text/javascript" src="display/jquery.qtip.min.js"></script>
|
||||
<script type="text/javascript" src="display/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="display-cmmn/cmmn-draw.js"></script>
|
||||
<script type="text/javascript" src="display-cmmn/cmmn-icons.js"></script>
|
||||
<script type="text/javascript" src="display/Polyline.js"></script>
|
||||
<script type="text/javascript" src="display-cmmn/displaymodel.js"></script>
|
||||
|
||||
</head>
|
||||
</html>
|
||||
@ -1,272 +0,0 @@
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
var NORMAL_STROKE = 1;
|
||||
var ASSOCIATION_STROKE = 2;
|
||||
var TASK_STROKE = 1;
|
||||
var TASK_HIGHLIGHT_STROKE = 2;
|
||||
|
||||
var TEXT_COLOR= "#373e48";
|
||||
var CURRENT_COLOR= "#017501";
|
||||
var HOVER_COLOR= "#666666";
|
||||
var ACTIVITY_STROKE_COLOR = "#bbbbbb";
|
||||
var ACTIVITY_FILL_COLOR = "#f9f9f9";
|
||||
var WHITE_FILL_COLOR = "#ffffff";
|
||||
var MAIN_STROKE_COLOR = "#585858";
|
||||
|
||||
var TEXT_PADDING = 3;
|
||||
var ARROW_WIDTH = 4;
|
||||
var MARKER_WIDTH = 12;
|
||||
|
||||
var TASK_FONT = {font: "11px Arial", opacity: 1, fill: Raphael.rgb(0, 0, 0)};
|
||||
|
||||
// icons
|
||||
var ICON_SIZE = 16;
|
||||
var ICON_PADDING = 4;
|
||||
|
||||
var INITIAL_CANVAS_WIDTH;
|
||||
var INITIAL_CANVAS_HEIGHT;
|
||||
|
||||
var paper;
|
||||
var viewBox;
|
||||
var viewBoxWidth;
|
||||
var viewBoxHeight;
|
||||
|
||||
var canvasWidth;
|
||||
var canvasHeight;
|
||||
|
||||
var modelDiv = jQuery('#cmmnModel');
|
||||
var modelId = modelDiv.attr('data-model-id');
|
||||
var historyModelId = modelDiv.attr('data-history-id');
|
||||
var caseDefinitionId = modelDiv.attr('data-case-definition-id');
|
||||
var modelType = modelDiv.attr('data-model-type');
|
||||
|
||||
var elementsAdded = new Array();
|
||||
var elementsRemoved = new Array();
|
||||
|
||||
function _showTip(htmlNode, element)
|
||||
{
|
||||
// Default tooltip, no custom tool tip set
|
||||
if (documentation === undefined) {
|
||||
var documentation = "";
|
||||
if (element.name && element.name.length > 0) {
|
||||
documentation += "<b>Name</b>: <i>" + element.name + "</i><br/><br/>";
|
||||
}
|
||||
|
||||
if (element.properties) {
|
||||
for (var i = 0; i < element.properties.length; i++) {
|
||||
var propName = element.properties[i].name;
|
||||
if (element.properties[i].type && element.properties[i].type === 'list') {
|
||||
documentation += '<b>' + propName + '</b>:<br/>';
|
||||
for (var j = 0; j < element.properties[i].value.length; j++) {
|
||||
documentation += '<i>' + element.properties[i].value[j] + '</i><br/>';
|
||||
}
|
||||
}
|
||||
else {
|
||||
documentation += '<b>' + propName + '</b>: <i>' + element.properties[i].value + '</i><br/>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var text = element.type + " ";
|
||||
if (element.name && element.name.length > 0)
|
||||
{
|
||||
text += element.name;
|
||||
}
|
||||
else
|
||||
{
|
||||
text += element.id;
|
||||
}
|
||||
|
||||
htmlNode.qtip({
|
||||
content: {
|
||||
text: documentation,
|
||||
title: {
|
||||
text: text
|
||||
}
|
||||
},
|
||||
position: {
|
||||
my: 'top left',
|
||||
at: 'bottom center',
|
||||
viewport: jQuery('#cmmnModel')
|
||||
},
|
||||
hide: {
|
||||
fixed: true, delay: 500,
|
||||
event: 'click mouseleave'
|
||||
},
|
||||
style: {
|
||||
classes: 'ui-tooltip-flowable-cmmn'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _addHoverLogic(element, type, defaultColor)
|
||||
{
|
||||
var strokeColor = _cmmnGetColor(element, defaultColor);
|
||||
var topBodyRect = null;
|
||||
if (type === "rect")
|
||||
{
|
||||
topBodyRect = paper.rect(element.x, element.y, element.width, element.height);
|
||||
}
|
||||
else if (type === "circle")
|
||||
{
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
topBodyRect = paper.circle(x, y, 15);
|
||||
}
|
||||
else if (type === "rhombus")
|
||||
{
|
||||
topBodyRect = paper.path("M" + element.x + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + (element.y + element.height) +
|
||||
"L" + (element.x + element.width) + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + element.y + "z"
|
||||
);
|
||||
}
|
||||
|
||||
var opacity = 0;
|
||||
var fillColor = "#ffffff";
|
||||
if (jQuery.inArray(element.id, elementsAdded) >= 0)
|
||||
{
|
||||
opacity = 0.2;
|
||||
fillColor = "green";
|
||||
}
|
||||
|
||||
if (jQuery.inArray(element.id, elementsRemoved) >= 0)
|
||||
{
|
||||
opacity = 0.2;
|
||||
fillColor = "red";
|
||||
}
|
||||
|
||||
topBodyRect.attr({
|
||||
"opacity": opacity,
|
||||
"stroke" : "none",
|
||||
"fill" : fillColor
|
||||
});
|
||||
_showTip(jQuery(topBodyRect.node), element);
|
||||
|
||||
topBodyRect.mouseover(function() {
|
||||
paper.getById(element.id).attr({"stroke":HOVER_COLOR});
|
||||
});
|
||||
|
||||
topBodyRect.mouseout(function() {
|
||||
paper.getById(element.id).attr({"stroke":strokeColor});
|
||||
});
|
||||
}
|
||||
|
||||
function _zoom(zoomIn)
|
||||
{
|
||||
var tmpCanvasWidth, tmpCanvasHeight;
|
||||
if (zoomIn)
|
||||
{
|
||||
tmpCanvasWidth = canvasWidth * (1.0/0.90);
|
||||
tmpCanvasHeight = canvasHeight * (1.0/0.90);
|
||||
}
|
||||
else
|
||||
{
|
||||
tmpCanvasWidth = canvasWidth * (1.0/1.10);
|
||||
tmpCanvasHeight = canvasHeight * (1.0/1.10);
|
||||
}
|
||||
|
||||
if (tmpCanvasWidth != canvasWidth || tmpCanvasHeight != canvasHeight)
|
||||
{
|
||||
canvasWidth = tmpCanvasWidth;
|
||||
canvasHeight = tmpCanvasHeight;
|
||||
paper.setSize(canvasWidth, canvasHeight);
|
||||
}
|
||||
}
|
||||
|
||||
var modelUrl;
|
||||
|
||||
if (modelType == 'runtime') {
|
||||
if (historyModelId) {
|
||||
modelUrl = FLOWABLE.APP_URL.getCaseInstancesHistoryModelJsonUrl(historyModelId);
|
||||
} else {
|
||||
modelUrl = FLOWABLE.APP_URL.getCaseInstancesModelJsonUrl(modelId);
|
||||
}
|
||||
} else if (modelType == 'design') {
|
||||
if (historyModelId) {
|
||||
modelUrl = FLOWABLE.APP_URL.getModelHistoryModelJsonUrl(modelId, historyModelId);
|
||||
} else {
|
||||
modelUrl = FLOWABLE.APP_URL.getModelModelJsonUrl(modelId);
|
||||
}
|
||||
} else if (modelType == 'case-definition') {
|
||||
modelUrl = FLOWABLE.APP_URL.getCaseDefinitionModelJsonUrl(caseDefinitionId);
|
||||
}
|
||||
|
||||
var request = jQuery.ajax({
|
||||
type: 'get',
|
||||
url: modelUrl + '?nocaching=' + new Date().getTime()
|
||||
});
|
||||
|
||||
request.success(function(data, textStatus, jqXHR) {
|
||||
|
||||
if ((!data.elements || data.elements.length == 0) && (!data.pools || data.pools.length == 0)) return;
|
||||
|
||||
INITIAL_CANVAS_WIDTH = data.diagramWidth;
|
||||
|
||||
if (modelType == 'design') {
|
||||
INITIAL_CANVAS_WIDTH += 20;
|
||||
} else {
|
||||
INITIAL_CANVAS_WIDTH += 30;
|
||||
}
|
||||
|
||||
INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50;
|
||||
canvasWidth = INITIAL_CANVAS_WIDTH;
|
||||
canvasHeight = INITIAL_CANVAS_HEIGHT;
|
||||
viewBoxWidth = INITIAL_CANVAS_WIDTH;
|
||||
viewBoxHeight = INITIAL_CANVAS_HEIGHT;
|
||||
|
||||
if (modelType == 'design') {
|
||||
var headerBarHeight = 170;
|
||||
var offsetY = 0;
|
||||
if (jQuery(window).height() > (canvasHeight + headerBarHeight))
|
||||
{
|
||||
offsetY = (jQuery(window).height() - headerBarHeight - canvasHeight) / 2;
|
||||
}
|
||||
|
||||
if (offsetY > 50) {
|
||||
offsetY = 50;
|
||||
}
|
||||
|
||||
jQuery('#cmmnModel').css('marginTop', offsetY);
|
||||
}
|
||||
|
||||
jQuery('#cmmnModel').width(INITIAL_CANVAS_WIDTH);
|
||||
jQuery('#cmmnModel').height(INITIAL_CANVAS_HEIGHT);
|
||||
paper = Raphael(document.getElementById('cmmnModel'), canvasWidth, canvasHeight);
|
||||
paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
|
||||
paper.renderfix();
|
||||
|
||||
var modelElements = data.elements;
|
||||
for (var i = 0; i < modelElements.length; i++)
|
||||
{
|
||||
var element = modelElements[i];
|
||||
//try {
|
||||
var drawFunction = eval("_draw" + element.type);
|
||||
drawFunction(element);
|
||||
//} catch(err) {console.log(err);}
|
||||
}
|
||||
|
||||
if (data.flows)
|
||||
{
|
||||
for (var i = 0; i < data.flows.length; i++)
|
||||
{
|
||||
var flow = data.flows[i];
|
||||
_drawAssociation(flow);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
request.error(function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error");
|
||||
});
|
||||
@ -1,24 +0,0 @@
|
||||
div[class*='ui-tooltip-flowable-'] {
|
||||
background-color: #ffffff;
|
||||
border-color: #c5c5c5;
|
||||
color: #4a4a4a;
|
||||
font-family: Verdana;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div[class*='ui-tooltip-flowable-'] .qtip-content {
|
||||
color: #4a4a4a;
|
||||
background-color: #ffffff;
|
||||
font-family: Verdana;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ui-tooltip-flowable-cmmn .qtip-titlebar {
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
background: #2B414F;
|
||||
}
|
||||
|
||||
.ui-tooltip-flowable-cmmn .qtip-tip {
|
||||
background-color: #2B414F;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="display/jquery.qtip.min.css" />
|
||||
<link type="text/css" rel="stylesheet" href="display-dmn/displaymodel.css" />
|
||||
|
||||
<script type="text/javascript" src="display/jquery.qtip.min.js"></script>
|
||||
<script type="text/javascript" src="display/raphael.min.js"></script>
|
||||
<script type="text/javascript" src="display-dmn/dmn-draw.js"></script>
|
||||
<script type="text/javascript" src="display-dmn/dmn-icons.js"></script>
|
||||
<script type="text/javascript" src="display/Polyline.js"></script>
|
||||
<script type="text/javascript" src="display-dmn/displaymodel.js"></script>
|
||||
|
||||
</head>
|
||||
</html>
|
||||
@ -1,270 +0,0 @@
|
||||
/* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
var NORMAL_STROKE = 1;
|
||||
var ASSOCIATION_STROKE = 2;
|
||||
var TASK_STROKE = 1;
|
||||
var TASK_HIGHLIGHT_STROKE = 2;
|
||||
var DECISION_SERVICE_STROKE = 3;
|
||||
|
||||
var COMPLETED_COLOR = "#2632aa";
|
||||
var TEXT_COLOR= "#373e48";
|
||||
var CURRENT_COLOR= "#017501";
|
||||
var AVAILABLE_COLOR = "#e3da82";
|
||||
var HOVER_COLOR= "#666666";
|
||||
var ACTIVITY_STROKE_COLOR = "#bbbbbb";
|
||||
var ACTIVITY_FILL_COLOR = "#f9f9f9";
|
||||
var WHITE_FILL_COLOR = "#ffffff";
|
||||
var MAIN_STROKE_COLOR = "#585858";
|
||||
|
||||
var TEXT_PADDING = 3;
|
||||
var ARROW_WIDTH = 4;
|
||||
var MARKER_WIDTH = 12;
|
||||
|
||||
var TASK_FONT = {font: "11px Arial", opacity: 1, fill: Raphael.rgb(0, 0, 0)};
|
||||
|
||||
// icons
|
||||
var ICON_SIZE = 16;
|
||||
var ICON_PADDING = 4;
|
||||
|
||||
var INITIAL_CANVAS_WIDTH;
|
||||
var INITIAL_CANVAS_HEIGHT;
|
||||
|
||||
var paper;
|
||||
var viewBox;
|
||||
var viewBoxWidth;
|
||||
var viewBoxHeight;
|
||||
|
||||
var canvasWidth;
|
||||
var canvasHeight;
|
||||
|
||||
var modelDiv = jQuery('#dmnModel');
|
||||
var modelId = modelDiv.attr('data-model-id');
|
||||
var historyModelId = modelDiv.attr('data-history-id');
|
||||
var decisionDefinitionId = modelDiv.attr('data-decision-definition-id');
|
||||
var modelType = modelDiv.attr('data-model-type');
|
||||
|
||||
var elementsAdded = new Array();
|
||||
var elementsRemoved = new Array();
|
||||
|
||||
function _showTip(htmlNode, element)
|
||||
{
|
||||
// Default tooltip, no custom tool tip set
|
||||
if (documentation === undefined) {
|
||||
var documentation = "";
|
||||
if (element.name && element.name.length > 0) {
|
||||
documentation += "<b>Name</b>: <i>" + element.name + "</i><br/><br/>";
|
||||
}
|
||||
|
||||
if (element.properties) {
|
||||
for (var i = 0; i < element.properties.length; i++) {
|
||||
var propName = element.properties[i].name;
|
||||
if (element.properties[i].type && element.properties[i].type === 'list') {
|
||||
documentation += '<b>' + propName + '</b>:<br/>';
|
||||
for (var j = 0; j < element.properties[i].value.length; j++) {
|
||||
documentation += '<i>' + element.properties[i].value[j] + '</i><br/>';
|
||||
}
|
||||
}
|
||||
else {
|
||||
documentation += '<b>' + propName + '</b>: <i>' + element.properties[i].value + '</i><br/>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var text = element.type + " ";
|
||||
if (element.name && element.name.length > 0)
|
||||
{
|
||||
text += element.name;
|
||||
}
|
||||
else
|
||||
{
|
||||
text += element.id;
|
||||
}
|
||||
|
||||
htmlNode.qtip({
|
||||
content: {
|
||||
text: documentation,
|
||||
title: {
|
||||
text: text
|
||||
}
|
||||
},
|
||||
position: {
|
||||
my: 'top left',
|
||||
at: 'bottom center',
|
||||
viewport: jQuery('#dmnModel')
|
||||
},
|
||||
hide: {
|
||||
fixed: true, delay: 500,
|
||||
event: 'click mouseleave'
|
||||
},
|
||||
style: {
|
||||
classes: 'ui-tooltip-flowable-cmmn'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function _addHoverLogic(element, type, defaultColor)
|
||||
{
|
||||
var strokeColor = _dmnGetColor(element, defaultColor);
|
||||
var topBodyRect = null;
|
||||
if (type === "rect")
|
||||
{
|
||||
topBodyRect = paper.rect(element.x, element.y, element.width, element.height);
|
||||
}
|
||||
else if (type === "circle")
|
||||
{
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
topBodyRect = paper.circle(x, y, 15);
|
||||
}
|
||||
else if (type === "rhombus")
|
||||
{
|
||||
topBodyRect = paper.path("M" + element.x + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + (element.y + element.height) +
|
||||
"L" + (element.x + element.width) + " " + (element.y + (element.height / 2)) +
|
||||
"L" + (element.x + (element.width / 2)) + " " + element.y + "z"
|
||||
);
|
||||
}
|
||||
|
||||
var opacity = 0;
|
||||
var fillColor = "#ffffff";
|
||||
if (jQuery.inArray(element.id, elementsAdded) >= 0)
|
||||
{
|
||||
opacity = 0.2;
|
||||
fillColor = "green";
|
||||
}
|
||||
|
||||
if (jQuery.inArray(element.id, elementsRemoved) >= 0)
|
||||
{
|
||||
opacity = 0.2;
|
||||
fillColor = "red";
|
||||
}
|
||||
|
||||
topBodyRect.attr({
|
||||
"opacity": opacity,
|
||||
"stroke" : "none",
|
||||
"fill" : fillColor
|
||||
});
|
||||
_showTip(jQuery(topBodyRect.node), element);
|
||||
|
||||
topBodyRect.mouseover(function() {
|
||||
paper.getById(element.id).attr({"stroke":HOVER_COLOR});
|
||||
paper.getById("divider_"+element.id) != undefined ? paper.getById("divider_"+element.id).attr({"stroke":HOVER_COLOR}) : '';
|
||||
});
|
||||
|
||||
topBodyRect.mouseout(function() {
|
||||
paper.getById(element.id).attr({"stroke":strokeColor});
|
||||
paper.getById("divider_"+element.id) != undefined ? paper.getById("divider_"+element.id).attr({"stroke":strokeColor}) : '';
|
||||
});
|
||||
}
|
||||
|
||||
function _zoom(zoomIn)
|
||||
{
|
||||
var tmpCanvasWidth, tmpCanvasHeight;
|
||||
if (zoomIn)
|
||||
{
|
||||
tmpCanvasWidth = canvasWidth * (1.0/0.90);
|
||||
tmpCanvasHeight = canvasHeight * (1.0/0.90);
|
||||
}
|
||||
else
|
||||
{
|
||||
tmpCanvasWidth = canvasWidth * (1.0/1.10);
|
||||
tmpCanvasHeight = canvasHeight * (1.0/1.10);
|
||||
}
|
||||
|
||||
if (tmpCanvasWidth != canvasWidth || tmpCanvasHeight != canvasHeight)
|
||||
{
|
||||
canvasWidth = tmpCanvasWidth;
|
||||
canvasHeight = tmpCanvasHeight;
|
||||
paper.setSize(canvasWidth, canvasHeight);
|
||||
}
|
||||
}
|
||||
|
||||
var modelUrl;
|
||||
if (modelType == 'decision-service') {
|
||||
// modelUrl = FLOWABLE.APP_URL.getDgetCaseDefinitionModelJsonUrl(caseDefinitionId);
|
||||
modelUrl = './app/rest/admin/decisions/decision-service/' + decisionDefinitionId + '/model-json';
|
||||
} else if (modelType == 'design') {
|
||||
if (historyModelId) {
|
||||
modelUrl = FLOWABLE.APP_URL.getModelHistoryModelJsonUrl(modelId, historyModelId);
|
||||
} else {
|
||||
modelUrl = FLOWABLE.APP_URL.getModelModelJsonUrl(modelId);
|
||||
}
|
||||
}
|
||||
|
||||
var request = jQuery.ajax({
|
||||
type: 'get',
|
||||
url: modelUrl + '?nocaching=' + new Date().getTime()
|
||||
});
|
||||
|
||||
request.success(function(data, textStatus, jqXHR) {
|
||||
if ((!data.elements || data.elements.length == 0) && (!data.pools || data.pools.length == 0)) return;
|
||||
|
||||
INITIAL_CANVAS_WIDTH = data.diagramWidth;
|
||||
|
||||
if (modelType == 'design') {
|
||||
INITIAL_CANVAS_WIDTH += 20;
|
||||
} else {
|
||||
INITIAL_CANVAS_WIDTH += 30;
|
||||
}
|
||||
|
||||
INITIAL_CANVAS_HEIGHT = data.diagramHeight + 50;
|
||||
canvasWidth = INITIAL_CANVAS_WIDTH;
|
||||
canvasHeight = INITIAL_CANVAS_HEIGHT;
|
||||
viewBoxWidth = INITIAL_CANVAS_WIDTH;
|
||||
viewBoxHeight = INITIAL_CANVAS_HEIGHT;
|
||||
|
||||
if (modelType == 'design') {
|
||||
var headerBarHeight = 170;
|
||||
var offsetY = 0;
|
||||
if (jQuery(window).height() > (canvasHeight + headerBarHeight))
|
||||
{
|
||||
offsetY = (jQuery(window).height() - headerBarHeight - canvasHeight) / 2;
|
||||
}
|
||||
|
||||
if (offsetY > 50) {
|
||||
offsetY = 50;
|
||||
}
|
||||
|
||||
jQuery('#dmnModel').css('marginTop', offsetY);
|
||||
}
|
||||
|
||||
jQuery('#dmnModel').width(INITIAL_CANVAS_WIDTH);
|
||||
jQuery('#dmnModel').height('100%');
|
||||
paper = Raphael(document.getElementById('dmnModel'), canvasWidth, canvasHeight);
|
||||
paper.setViewBox(0, 0, viewBoxWidth, viewBoxHeight, false);
|
||||
paper.renderfix();
|
||||
|
||||
var modelElements = data.elements;
|
||||
for (var i = 0; i < modelElements.length; i++)
|
||||
{
|
||||
var element = modelElements[i];
|
||||
//try {
|
||||
var drawFunction = eval("_draw" + element.type);
|
||||
drawFunction(element);
|
||||
//} catch(err) {console.log(err);}
|
||||
}
|
||||
|
||||
if (data.flows)
|
||||
{
|
||||
for (var i = 0; i < data.flows.length; i++)
|
||||
{
|
||||
var flow = data.flows[i];
|
||||
_drawInformationRequirement(flow);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
request.error(function(jqXHR, textStatus, errorThrown) {
|
||||
alert("error");
|
||||
});
|
||||
@ -1,206 +0,0 @@
|
||||
function _dmnGetColor(element, defaultColor)
|
||||
{
|
||||
var strokeColor;
|
||||
if (element.current) {
|
||||
strokeColor = CURRENT_COLOR;
|
||||
} else if (element.completed) {
|
||||
strokeColor = COMPLETED_COLOR;
|
||||
} else if (element.available) {
|
||||
strokeColor = AVAILABLE_COLOR;
|
||||
} else {
|
||||
strokeColor = defaultColor;
|
||||
}
|
||||
return strokeColor;
|
||||
}
|
||||
|
||||
function _drawDecisionService(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _dmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth = DECISION_SERVICE_STROKE;
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 16);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = WHITE_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
var dividerElement = element.divider;
|
||||
var divider = new Polyline("divider_" + element.id, dividerElement.waypoints, ACTIVITY_STROKE_COLOR, paper);
|
||||
divider.element = paper.path(divider.path);
|
||||
divider.element.attr({"stroke-width": ASSOCIATION_STROKE});
|
||||
divider.element.attr({"stroke":"#bbbbbb"});
|
||||
divider.element.id = "divider_" + element.id;
|
||||
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x + 10, element.y + 5, element.width, element.height, "start", "top", 11);
|
||||
}
|
||||
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawDecision(element)
|
||||
{
|
||||
var rectAttrs = {};
|
||||
|
||||
// Stroke
|
||||
var strokeColor = _dmnGetColor(element, ACTIVITY_STROKE_COLOR);
|
||||
rectAttrs['stroke'] = strokeColor;
|
||||
|
||||
var strokeWidth;
|
||||
if (strokeColor === ACTIVITY_STROKE_COLOR) {
|
||||
strokeWidth = TASK_STROKE;
|
||||
} else {
|
||||
strokeWidth = TASK_HIGHLIGHT_STROKE;
|
||||
}
|
||||
|
||||
var width = element.width - (strokeWidth / 2);
|
||||
var height = element.height - (strokeWidth / 2);
|
||||
|
||||
var rect = paper.rect(element.x, element.y, width, height, 4);
|
||||
rectAttrs['stroke-width'] = strokeWidth;
|
||||
|
||||
// Fill
|
||||
rectAttrs['fill'] = ACTIVITY_FILL_COLOR;
|
||||
|
||||
rect.attr(rectAttrs);
|
||||
rect.id = element.id;
|
||||
|
||||
if (element.name) {
|
||||
this._drawMultilineText(element.name, element.x, element.y, element.width, element.height, "middle", "middle", 11);
|
||||
}
|
||||
_addHoverLogic(element, "rect", ACTIVITY_STROKE_COLOR);
|
||||
}
|
||||
|
||||
function _drawInformationRequirement(flow){
|
||||
|
||||
var polyline = new Polyline(flow.id, flow.waypoints, ASSOCIATION_STROKE, paper);
|
||||
|
||||
var strokeColor = _dmnGetColor(flow, MAIN_STROKE_COLOR);
|
||||
|
||||
polyline.element = paper.path(polyline.path);
|
||||
polyline.element.attr({"stroke-width": ASSOCIATION_STROKE});
|
||||
polyline.element.attr({"stroke":strokeColor});
|
||||
|
||||
polyline.element.id = flow.id;
|
||||
|
||||
var lastLineIndex = polyline.getLinesCount() - 1;
|
||||
var line = polyline.getLine(lastLineIndex);
|
||||
|
||||
var polylineInvisible = new Polyline(flow.id, flow.waypoints, ASSOCIATION_STROKE, paper);
|
||||
|
||||
polylineInvisible.element = paper.path(polyline.path);
|
||||
polylineInvisible.element.attr({
|
||||
"opacity": 0,
|
||||
"stroke-width": 8,
|
||||
"stroke" : "#000000"
|
||||
});
|
||||
|
||||
_showTip(jQuery(polylineInvisible.element.node), flow);
|
||||
|
||||
polylineInvisible.element.mouseover(function() {
|
||||
paper.getById(polyline.element.id).attr({"stroke":HOVER_COLOR});
|
||||
});
|
||||
|
||||
polylineInvisible.element.mouseout(function() {
|
||||
paper.getById(polyline.element.id).attr({"stroke":strokeColor});
|
||||
});
|
||||
|
||||
_drawArrowHead(line, strokeColor, paper);
|
||||
|
||||
}
|
||||
|
||||
function _drawMultilineText(text, x, y, boxWidth, boxHeight, horizontalAnchor, verticalAnchor, fontSize)
|
||||
{
|
||||
if (!text || text == "")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
var textBoxX, textBoxY;
|
||||
var width = boxWidth - (2 * TEXT_PADDING);
|
||||
|
||||
if (horizontalAnchor === "middle")
|
||||
{
|
||||
textBoxX = x + (boxWidth / 2);
|
||||
}
|
||||
else if (horizontalAnchor === "start")
|
||||
{
|
||||
textBoxX = x;
|
||||
}
|
||||
|
||||
textBoxY = y + (boxHeight / 2);
|
||||
|
||||
var t = paper.text(textBoxX + TEXT_PADDING, textBoxY + TEXT_PADDING).attr({
|
||||
"text-anchor" : horizontalAnchor,
|
||||
"font-family" : "Arial",
|
||||
"font-size" : fontSize,
|
||||
"fill" : "#373e48"
|
||||
});
|
||||
|
||||
var abc = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
t.attr({
|
||||
"text" : abc
|
||||
});
|
||||
var letterWidth = t.getBBox().width / abc.length;
|
||||
|
||||
t.attr({
|
||||
"text" : text
|
||||
});
|
||||
var removedLineBreaks = text.split("\n");
|
||||
var x = 0, s = [];
|
||||
for (var r = 0; r < removedLineBreaks.length; r++)
|
||||
{
|
||||
var words = removedLineBreaks[r].split(" ");
|
||||
for ( var i = 0; i < words.length; i++) {
|
||||
|
||||
var l = words[i].length;
|
||||
if (x + (l * letterWidth) > width) {
|
||||
s.push("\n");
|
||||
x = 0;
|
||||
}
|
||||
x += l * letterWidth;
|
||||
s.push(words[i] + " ");
|
||||
}
|
||||
s.push("\n");
|
||||
x = 0;
|
||||
}
|
||||
t.attr({
|
||||
"text" : s.join("")
|
||||
});
|
||||
|
||||
if (verticalAnchor && verticalAnchor === "top")
|
||||
{
|
||||
t.attr({"y": y + (t.getBBox().height / 2)});
|
||||
}
|
||||
}
|
||||
|
||||
function _drawArrowHead(line, connectionType)
|
||||
{
|
||||
var doubleArrowWidth = 2 * ARROW_WIDTH;
|
||||
|
||||
var arrowHead = paper.path("M0 0L-" + (ARROW_WIDTH / 2 + .5) + " -" + doubleArrowWidth + "L" + (ARROW_WIDTH/2 + .5) + " -" + doubleArrowWidth + "z");
|
||||
|
||||
// anti smoothing
|
||||
if (this.strokeWidth%2 == 1)
|
||||
line.x2 += .5, line.y2 += .5;
|
||||
|
||||
arrowHead.transform("t" + line.x2 + "," + line.y2 + "");
|
||||
arrowHead.transform("...r" + Raphael.deg(line.angle - Math.PI / 2) + " " + 0 + " " + 0);
|
||||
|
||||
arrowHead.attr("fill", "#585858");
|
||||
|
||||
arrowHead.attr("stroke-width", ASSOCIATION_STROKE);
|
||||
arrowHead.attr("stroke", "#585858");
|
||||
|
||||
return arrowHead;
|
||||
}
|
||||
@ -1,182 +0,0 @@
|
||||
function _drawHumanTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("m 1,17 16,0 0,-1.7778 -5.333332,-3.5555 0,-1.7778 c 1.244444,0 1.244444,-2.3111 1.244444,-2.3111 l 0,-3.0222 C 12.555557,0.8221 9.0000001,1.0001 9.0000001,1.0001 c 0,0 -3.5555556,-0.178 -3.9111111,3.5555 l 0,3.0222 c 0,0 0,2.3111 1.2444443,2.3111 l 0,1.7778 L 1,15.2222 1,17 17,17");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#d1b575"
|
||||
});
|
||||
|
||||
var userTaskIcon = paper.set();
|
||||
userTaskIcon.push(path1);
|
||||
|
||||
userTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawServiceTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M 8,1 7.5,2.875 c 0,0 -0.02438,0.250763 -0.40625,0.4375 C 7.05724,3.330353 7.04387,3.358818 7,3.375 6.6676654,3.4929791 6.3336971,3.6092802 6.03125,3.78125 6.02349,3.78566 6.007733,3.77681 6,3.78125 5.8811373,3.761018 5.8125,3.71875 5.8125,3.71875 l -1.6875,-1 -1.40625,1.4375 0.96875,1.65625 c 0,0 0.065705,0.068637 0.09375,0.1875 0.002,0.00849 -0.00169,0.022138 0,0.03125 C 3.6092802,6.3336971 3.4929791,6.6676654 3.375,7 3.3629836,7.0338489 3.3239228,7.0596246 3.3125,7.09375 3.125763,7.4756184 2.875,7.5 2.875,7.5 L 1,8 l 0,2 1.875,0.5 c 0,0 0.250763,0.02438 0.4375,0.40625 0.017853,0.03651 0.046318,0.04988 0.0625,0.09375 0.1129372,0.318132 0.2124732,0.646641 0.375,0.9375 -0.00302,0.215512 -0.09375,0.34375 -0.09375,0.34375 L 2.6875,13.9375 4.09375,15.34375 5.78125,14.375 c 0,0 0.1229911,-0.09744 0.34375,-0.09375 0.2720511,0.147787 0.5795915,0.23888 0.875,0.34375 0.033849,0.01202 0.059625,0.05108 0.09375,0.0625 C 7.4756199,14.874237 7.5,15.125 7.5,15.125 L 8,17 l 2,0 0.5,-1.875 c 0,0 0.02438,-0.250763 0.40625,-0.4375 0.03651,-0.01785 0.04988,-0.04632 0.09375,-0.0625 0.332335,-0.117979 0.666303,-0.23428 0.96875,-0.40625 0.177303,0.0173 0.28125,0.09375 0.28125,0.09375 l 1.65625,0.96875 1.40625,-1.40625 -0.96875,-1.65625 c 0,0 -0.07645,-0.103947 -0.09375,-0.28125 0.162527,-0.290859 0.262063,-0.619368 0.375,-0.9375 0.01618,-0.04387 0.04465,-0.05724 0.0625,-0.09375 C 14.874237,10.52438 15.125,10.5 15.125,10.5 L 17,10 17,8 15.125,7.5 c 0,0 -0.250763,-0.024382 -0.4375,-0.40625 C 14.669647,7.0572406 14.641181,7.0438697 14.625,7 14.55912,6.8144282 14.520616,6.6141566 14.4375,6.4375 c -0.224363,-0.4866 0,-0.71875 0,-0.71875 L 15.40625,4.0625 14,2.625 l -1.65625,1 c 0,0 -0.253337,0.1695664 -0.71875,-0.03125 l -0.03125,0 C 11.405359,3.5035185 11.198648,3.4455201 11,3.375 10.95613,3.3588185 10.942759,3.3303534 10.90625,3.3125 10.524382,3.125763 10.5,2.875 10.5,2.875 L 10,1 8,1 z m 1,5 c 1.656854,0 3,1.3431458 3,3 0,1.656854 -1.343146,3 -3,3 C 7.3431458,12 6,10.656854 6,9 6,7.3431458 7.3431458,6 9,6 z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var serviceTaskIcon = paper.set();
|
||||
serviceTaskIcon.push(path1);
|
||||
|
||||
serviceTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawCaseTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M5 8 L9 4 L18 4 L 21 7");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#000000"
|
||||
});
|
||||
|
||||
var path2 = paper.path("M1 23 L1 4 L30 4 L30 23z");
|
||||
path2.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var caseTaskIcon = paper.set();
|
||||
caseTaskIcon.push(path1);
|
||||
caseTaskIcon.push(path2);
|
||||
|
||||
caseTaskIcon.translate(startX, startY);
|
||||
caseTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawProcessTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("M1 23 L7 11 L1 0 L30 0 L 35 11 L 30 23z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var processTaskIcon = paper.set();
|
||||
processTaskIcon.push(path1);
|
||||
|
||||
processTaskIcon.translate(startX, startY);
|
||||
processTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawDecisionTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path1 = paper.path("m 1,2 0,14 16,0 0,-14 z m 1.9,2.4000386 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m -8.67364,3.9 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z m 4.36364,0 3.7,0 0,2.7999224 -3.7,0 z");
|
||||
path1.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "#000000",
|
||||
"fill": "#F4F6F7"
|
||||
});
|
||||
|
||||
var decisionTaskIcon = paper.set();
|
||||
decisionTaskIcon.push(path1);
|
||||
|
||||
decisionTaskIcon.translate(startX, startY);
|
||||
decisionTaskIcon.scale(0.7, 0.7);
|
||||
}
|
||||
|
||||
function _drawHttpTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path = paper.path("m 16.704699,5.9229055 q 0.358098,0 0.608767,0.2506681 0.250669,0.250668 0.250669,0.6087677 0,0.3580997 -0.250669,0.6087677 -0.250669,0.2506679 -0.608767,0.2506679 -0.358098,0 -0.608767,-0.2506679 -0.250669,-0.250668 -0.250669,-0.6087677 0,-0.3580997 0.250669,-0.6087677 0.250669,-0.2506681 0.608767,-0.2506681 z m 2.578308,-2.0053502 q -2.229162,0 -3.854034,0.6759125 -1.624871,0.6759067 -3.227361,2.2694472 -0.716197,0.725146 -1.575633,1.7457293 L 7.2329969,8.7876913 Q 7.0897576,8.8055849 7.000233,8.9309334 L 4.9948821,12.368677 q -0.035811,0.06267 -0.035811,0.143242 0,0.107426 0.080572,0.205905 l 0.5729577,0.572957 q 0.125334,0.116384 0.2864786,0.07162 l 2.4708789,-0.760963 2.5156417,2.515645 -0.76096,2.470876 q -0.009,0.02687 -0.009,0.08057 0,0.125338 0.08058,0.205905 l 0.572957,0.572958 q 0.170096,0.152194 0.349146,0.04476 l 3.437744,-2.005351 q 0.125335,-0.08953 0.143239,-0.232763 l 0.17905,-3.392986 q 1.02058,-0.859435 1.745729,-1.575629 1.67411,-1.6830612 2.309735,-3.2049805 0.635625,-1.5219191 0.635625,-3.8585111 0,-0.1253369 -0.08505,-0.2148575 -0.08505,-0.089526 -0.201431,-0.089526 z");
|
||||
path.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#16964d"
|
||||
});
|
||||
|
||||
startX += -2;
|
||||
startY += -2;
|
||||
|
||||
path.transform("T" + startX + "," + startY);
|
||||
|
||||
}
|
||||
|
||||
function _drawSendEventTaskIcon(paper, startX, startY)
|
||||
{
|
||||
var path = paper.path("m 0.5,2.5 0,13 17,0 0,-13 z M 2,4 6.5,8.5 2,13 z M 4,4 14,4 9,9 z m 12,0 0,9 -4.5,-4.5 z M 7.5,9.5 9,11 10.5,9.5 15,14 3,14 z");
|
||||
path.attr({
|
||||
"opacity": 1,
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var sendEventTaskIcon = paper.set();
|
||||
sendEventTaskIcon.push(path);
|
||||
|
||||
sendEventTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawBusinessRuleTaskIcon(paper, startX, startY) {
|
||||
var path1 = paper.path("m 1,2 0,14 16,0 0,-14 z m 1.45458,5.6000386 2.90906,0 0,2.7999224 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.7999224 -8.72718,0 z m -4.36364,4.1998844 2.90906,0 0,2.800116 -2.90906,0 z m 4.36364,0 8.72718,0 0,2.800116 -8.72718,0 z");
|
||||
path1.attr({
|
||||
"stroke": "none",
|
||||
"fill": "#72a7d0"
|
||||
});
|
||||
|
||||
var businessRuleTaskIcon = paper.set();
|
||||
businessRuleTaskIcon.push(path1);
|
||||
|
||||
businessRuleTaskIcon.transform("T" + startX + "," + startY);
|
||||
}
|
||||
|
||||
function _drawTimerEventListenerIcon(paper, element)
|
||||
{
|
||||
var x = element.x + (element.width / 2);
|
||||
var y = element.y + (element.height / 2);
|
||||
|
||||
var circle = paper.circle(x, y, 10);
|
||||
|
||||
circle.attr({"stroke-width": 1,
|
||||
"stroke": "black",
|
||||
"fill": "none"
|
||||
});
|
||||
|
||||
var path = paper.path("M 10 0 C 4.4771525 0 0 4.4771525 0 10 C 0 15.522847 4.4771525 20 10 20 C 15.522847 20 20 15.522847 20 10 C 20 4.4771525 15.522847 1.1842379e-15 10 0 z M 9.09375 1.03125 C 9.2292164 1.0174926 9.362825 1.0389311 9.5 1.03125 L 9.5 3.5 L 10.5 3.5 L 10.5 1.03125 C 15.063526 1.2867831 18.713217 4.9364738 18.96875 9.5 L 16.5 9.5 L 16.5 10.5 L 18.96875 10.5 C 18.713217 15.063526 15.063526 18.713217 10.5 18.96875 L 10.5 16.5 L 9.5 16.5 L 9.5 18.96875 C 4.9364738 18.713217 1.2867831 15.063526 1.03125 10.5 L 3.5 10.5 L 3.5 9.5 L 1.03125 9.5 C 1.279102 5.0736488 4.7225326 1.4751713 9.09375 1.03125 z M 9.5 5 L 9.5 8.0625 C 8.6373007 8.2844627 8 9.0680195 8 10 C 8 11.104569 8.8954305 12 10 12 C 10.931981 12 11.715537 11.362699 11.9375 10.5 L 14 10.5 L 14 9.5 L 11.9375 9.5 C 11.756642 8.7970599 11.20294 8.2433585 10.5 8.0625 L 10.5 5 L 9.5 5 z");
|
||||
path.attr({
|
||||
"stroke": "none",
|
||||
"fill": "#585858"
|
||||
});
|
||||
path.transform("T" + (element.x + 5) + "," + (element.y + 5));
|
||||
return path;
|
||||
}
|
||||
|
||||
function _drawUserEventListenerIcon(paper, element) {
|
||||
var userTaskIcon = paper.set();
|
||||
var path1 = paper.path("M0.585,24.167h24.083v-7.833c0,0-2.333-3.917-7.083-5.167h-9.25 c-4.417,1.333-7.833,5.75-7.833,5.75L0.585,24.167z");
|
||||
path1.attr({"opacity": 1, "stroke": "none", "fill": "#F4F6F7"});
|
||||
userTaskIcon.push(path1);
|
||||
|
||||
var path2 = paper.path("M6,20L6,24");
|
||||
path2.attr({"opacity": 1, "stroke": "white", "fill": "none"});
|
||||
userTaskIcon.push(path2);
|
||||
|
||||
var path3 = paper.path("M20,20L20,24");
|
||||
path3.attr({"opacity": 1, "stroke": "white", "fill": "none"});
|
||||
userTaskIcon.push(path3);
|
||||
|
||||
var circle = paper.circle(13.002, 5.916, 5.417);
|
||||
circle.attr({"stroke-width": 1, "stroke": "black", "fill": "#000000"});
|
||||
userTaskIcon.push(circle);
|
||||
|
||||
var path4 = paper.path("M8.043,7.083c0,0,2.814-2.426,5.376-1.807s4.624-0.693,4.624-0.693 c0.25,1.688,0.042,3.75-1.458,5.584c0,0,1.083,0.75,1.083,1.5s0.125,1.875-1,3s-5.5,1.25-6.75,0S8.668,12.834,8.668,12 s0.583-1.25,1.25-1.917C8.835,9.5,7.419,7.708,8.043,7.083z");
|
||||
path4.attr({"opacity": 1, "stroke": "none", "fill": "#F0EFF0"});
|
||||
userTaskIcon.push(path4);
|
||||
|
||||
var x = (element.width / 2) - 2;
|
||||
var y = (element.height / 2) - 2;
|
||||
var circle2 = paper.circle(x, y, 17);
|
||||
circle2.attr({"stroke-width": 1, "stroke": "#F0EFF0", "fill": "none"});
|
||||
userTaskIcon.push(circle2);
|
||||
|
||||
userTaskIcon.transform("S0.7,0.7" + "T" + (element.x + 2) + "," + (element.y + 2));
|
||||
return userTaskIcon;
|
||||
}
|
||||
@ -66,5 +66,9 @@ export interface LeaveQuery extends PageQuery {
|
||||
/**
|
||||
* 请假天数
|
||||
*/
|
||||
leaveDays?: number;
|
||||
startLeaveDays?: number;
|
||||
/**
|
||||
* 请假天数
|
||||
*/
|
||||
endLeaveDays?: number;
|
||||
}
|
||||
|
||||
@ -3,8 +3,14 @@
|
||||
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
|
||||
<div class="search" v-show="showSearch">
|
||||
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
|
||||
<el-form-item label="请假天数" prop="leaveDays">
|
||||
<el-input v-model="queryParams.leaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
|
||||
<el-form-item label="请假天数" prop="startLeaveDays">
|
||||
<el-input v-model="queryParams.startLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="endLeaveDays">
|
||||
至
|
||||
</el-form-item>
|
||||
<el-form-item prop="endLeaveDays">
|
||||
<el-input v-model="queryParams.endLeaveDays" placeholder="请输入请假天数" clearable @keyup.enter="handleQuery" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
@ -184,7 +190,8 @@ const data = reactive<PageData<LeaveForm, LeaveQuery>>({
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
leaveDays: undefined
|
||||
startLeaveDays: undefined,
|
||||
endLeaveDays: undefined
|
||||
},
|
||||
rules: {
|
||||
id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user