diff --git a/com.actionsoft.apps.coe.pal/template/page/console.m.process.design.bpmn.designer.htm b/com.actionsoft.apps.coe.pal/template/page/console.m.process.design.bpmn.designer.htm
new file mode 100644
index 00000000..d0107caa
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/template/page/console.m.process.design.bpmn.designer.htm
@@ -0,0 +1,1708 @@
+
+
+
+
+ <#processName>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <#processdeftpl_js>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
X:
+
+
:
+
+
+
Y:
+
+
:
+
+
+
+
+
+
+
+
+
+
+
+
:
+
+
+
:
+
+
+
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
:
+
+
+
:
+
+
+
:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alt
+
+
+ Ctrl
+
+
+ Ctrl + < , Ctrl + >,
+
+
+ Ctrl + A
+
+
+ Esc
+
+
+ T
+
+
+ I
+
+
+ L
+
+
+
+
+ (←↑↓→)
+
+
+ Ctrl + (←↑↓→)
+
+
+ Ctrl +
+
+
+
+ Ctrl + Z
+
+
+ Ctrl + Y
+
+
+
+ Ctrl + X
+
+
+ Ctrl + C
+
+
+ Ctrl + V
+
+
+ Ctrl + D
+
+
+ Ctrl + Shift + B
+
+
+ Delete, Backspace
+
+
+
+ Ctrl + ]
+
+
+ Ctrl + [
+
+
+ Ctrl + Shift + ]
+
+
+ Ctrl + Shift + [
+
+
+
+ Ctrl + L
+
+
+ Ctrl + Shift + L
+
+
+
+ Ctrl + G
+
+
+ Ctrl + Shift + G
+
+
+
+
+
+
+
+ Ctrl + B
+
+
+ Ctrl + I
+
+
+ Ctrl + U
+
+
+ Ctrl + Enter
+
+
+
+
+
+
+
+
+
+
+ 您可以把使用中遇到的问题功能的建议评论等发送给我们我们迫切希望得到您有价值的反馈有您的反馈我们会做的更好!
:
+
+
+ :
+
+
+
+
+ :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+
+ |
+
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
<#checkoutusername>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 未设置启动权限,暂时不能提交申请
+
+
+
+
+
+
diff --git a/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.graph.versionCompare.htm b/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.graph.versionCompare.htm
new file mode 100644
index 00000000..fbcad69d
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/template/page/pal.pl.repository.designer.graph.versionCompare.htm
@@ -0,0 +1,280 @@
+
+
+
+
+ <#fileName>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.core.debug.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.core.debug.js
new file mode 100644
index 00000000..8889470b
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.core.debug.js
@@ -0,0 +1,3641 @@
+/**
+ * 抽取的核心渲染画布的代码
+ */
+
+const VersionDesigner = {
+ config: {
+ panelItemWidth: 30,
+ panelItemHeight: 30,
+ pageMargin: 10,
+ anchorSize: 8,
+ rotaterSize: 9,
+ anchorColor: "#833",
+ selectorColor: "#833",
+ scale: {
+ left: 1,
+ right: 1
+ }
+ },
+ init(pos) {
+ this.initialize.initModel(pos)
+ this.initialize.initCanvas(pos)
+ this.initialize.initPageShapes(pos)
+ this.initialize.initEvent(pos)
+ },
+ initialize: {
+ initModel: function (pos) {
+ let definition = pageDefinition[pos], Model = PageModel[pos]
+ if (definition != undefined && definition.localAttribute != undefined) {
+ Model.define.localAttribute = definition.localAttribute
+ } else {
+ Model.define.localAttribute = {}
+ }
+ if (definition != undefined && definition.commonShapeConfig != undefined) {
+ Model.define.commonShapeConfig = definition.commonShapeConfig
+ } else {
+ Model.define.commonShapeConfig = {}
+ }
+ Model.shapeTemplateObj = {}
+ Model.persistence = {
+ page: Utils.copy(Model.define.page),
+ elements: {},
+ localAttribute: {},
+ commonShapeConfig: {}
+ }
+ },
+ initCanvas: function (pos) {
+ let Model = PageModel[pos];
+ var q = Model.define.page.width.toScale(pos);
+ var v = Model.define.page.height.toScale(pos);
+ var B = Model.define.page.backgroundColor;
+ var s = Utils.getDarkerColor(B);
+ var A = Utils.getDarkestColor(B);
+ $("#designer-canvas-" + pos).css({
+ "background-color": "rgb(" + s + ")"
+ });
+ var w = $("#designer-grids-" + pos);
+ w.attr({
+ width: q,
+ height: v
+ });
+ var h = w[0].getContext("2d");
+ h.clearRect(0, 0, q, v);
+ var r = Model.define.page.padding.toScale(pos);
+ var y = q - r * 2;
+ var p = v - r * 2;
+ h.fillStyle = "rgb(" + B + ")";
+ h.beginPath();
+ h.rect(r, r, y, p);
+ h.fill();
+ var x = Math.round(Model.define.page.gridSize.toScale(pos));
+ if (x < 10) {
+ x = 10
+ }
+ if (Model.define.page.showGrid) {
+ h.translate(r, r);
+ h.lineWidth = 1;
+ h.save();
+ var t = 0.5;
+ var u = 0;
+ while (t <= p) {
+ h.restore();
+ if (u % 4 == 0) {
+ h.strokeStyle = "rgb(" + A + ")"
+ } else {
+ h.strokeStyle = "rgb(" + s + ")"
+ }
+ h.beginPath();
+ h.moveTo(0, t);
+ h.lineTo(y, t);
+ t += x;
+ u++;
+ h.stroke()
+ }
+ t = 0.5;
+ u = 0;
+ while (t <= y) {
+ h.restore();
+ if (u % 4 == 0) {
+ h.strokeStyle = "rgb(" + A + ")"
+ } else {
+ h.strokeStyle = "rgb(" + s + ")"
+ }
+ h.beginPath();
+ h.moveTo(t, 0);
+ h.lineTo(t, p);
+ t += x;
+ u++;
+ h.stroke()
+ }
+ }
+ $("#canvas-container-" + pos).css({
+ width: q,
+ height: v,
+ padding: VersionDesigner.config.pageMargin
+ });
+ },
+ initPageShapes: function (pos) {
+ var shapes = pageDefinition[pos].elements;
+ let Model = PageModel[pos];
+ var shapeCount = 0;
+ for (var shapeId in shapes) {
+ var shape = shapes[shapeId];
+ if (shape.name != "linker") {
+ Schema.initShapeFunctions(shape);
+ VersionDesigner.painter.renderShape(shape, pos);
+ Model.add(shape, false);
+ }
+ shapeCount++;
+ }
+ for (var shapeId in shapes) {
+ var shape = shapes[shapeId];
+ if (shape.name == "linker") {
+ VersionDesigner.painter.renderLinker(pos, shape);
+ Model.add(shape, false);
+ }
+ }
+ if (shapeCount == 0) {
+ Model.build();
+ }
+ // 绘制差异节点中的删除(已经不在当前版本中了具体信息要从对比版本获取)
+ let diffDelete = diffNode.filter(i => i.type.includes('delete'))
+ diffDelete.forEach(i => {
+ let shape = PageModel.left.getShapeById(i.id)
+ if (shape.name !== 'linker') {
+ VersionDesigner.painter.renderDiffNode(shape, 'right')
+ }
+ })
+ },
+ initEvent: function (pos) {
+ $("#designer-canvas-" + pos).off("mousedown").on("mousedown", function (g) {
+ var b = $("#designer-canvas-" + pos);
+ var f = Utils.getRelativePos(g.pageX, g.pageY, b);
+ var c = Utils.getShapeByPosition(pos, f.x, f.y);
+ if (c != null) {
+ if (c.type == "dataAttribute") {
+ } else {
+ Utils.unselect(pos);
+ Utils.selectShape(pos, c.shape.id);
+ }
+ } else {
+ Utils.unselect(pos);
+ }
+ versionCompareFun.updateAttributeView(pos)
+ $('.shape-tip').hide()
+ Utils.selectedOtherShape(pos)
+ });
+ document.addEventListener('wheel', function (event) {
+ if (event.ctrlKey) {
+ if ($(event.target).closest('.version-designer-layout').length > 0) {
+ event.preventDefault()
+ let isUp = event.deltaY < 0 // 大于0向下滚动 -- 缩小 小于0向上滚动 -- 放大
+ let pos = $(event.target).closest('.version-designer-layout').attr('position')
+ versionCompareFun.pageZoom(pos, isUp ? 'zoomIn' : 'zoomOut')
+ }
+ }
+ }, {passive: false}) // 添加事件监听器时明确指定 { passive: false } 这告诉浏览器该监听器可能需要调用 preventDefault()
+ }
+ },
+ painter: {
+ controlStatus: {
+ resizeDir: [],
+ rotatable: true
+ },
+ actions: {
+ move: function (b) {
+ this.moveTo(b.x, b.y);
+ this.prePoint = b;
+ if (this.beginPoint == null) {
+ this.beginPoint = b
+ }
+ },
+ line: function (d) {
+ if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
+ var f = this.webkitLineDash;
+ var c = this.prePoint;
+ var h = Utils.measureDistance(c, d);
+ var k = 0;
+ var b = 1 / h;
+ var j = c;
+ var e = 0;
+ var g = true;
+ while (k < 1) {
+ k += b;
+ if (k > 1) {
+ k = 1
+ }
+ var i = {
+ x: (1 - k) * c.x + k * d.x,
+ y: (1 - k) * c.y + k * d.y
+ };
+ var a = Utils.measureDistance(j, i);
+ if (a >= f[e] || k >= 1) {
+ if (g) {
+ this.lineTo(i.x, i.y)
+ } else {
+ this.moveTo(i.x, i.y)
+ }
+ g = !g;
+ j = i;
+ e++;
+ if (e >= f.length) {
+ e = 0
+ }
+ }
+ }
+ this.moveTo(d.x, d.y)
+ } else {
+ this.lineTo(d.x, d.y)
+ }
+ this.prePoint = d;
+ if (this.beginPoint == null) {
+ this.beginPoint = d
+ }
+ },
+ curve: function (e) {
+ if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
+ var g = this.webkitLineDash;
+ var d = this.prePoint;
+ var i = Utils.measureDistance(d, e);
+ var n = 0;
+ var b = 1 / i;
+ var l = d;
+ var f = 0;
+ var h = true;
+ var c = 0;
+ while (n < 1) {
+ n += b;
+ if (n > 1) {
+ n = 1
+ }
+ var k = {
+ x: d.x * Math.pow((1 - n), 3) + e.x1 * n * Math.pow((1 - n), 2) * 3 + e.x2 * Math.pow(n, 2) * (1 - n) * 3 + e.x * Math.pow(n, 3),
+ y: d.y * Math.pow((1 - n), 3) + e.y1 * n * Math.pow((1 - n), 2) * 3 + e.y2 * Math.pow(n, 2) * (1 - n) * 3 + e.y * Math.pow(n, 3)
+ };
+ var a = Utils.measureDistance(l, k);
+ if (a >= g[f] || n >= 1) {
+ if (h) {
+ var m = c + (n - c) / 2;
+ var j = {
+ x: d.x * Math.pow((1 - m), 3) + e.x1 * m * Math.pow((1 - m), 2) * 3 + e.x2 * Math.pow(m, 2) * (1 - m) * 3 + e.x * Math.pow(m, 3),
+ y: d.y * Math.pow((1 - m), 3) + e.y1 * m * Math.pow((1 - m), 2) * 3 + e.y2 * Math.pow(m, 2) * (1 - m) * 3 + e.y * Math.pow(m, 3)
+ };
+ this.lineTo(j.x, j.y);
+ this.lineTo(k.x, k.y)
+ } else {
+ this.moveTo(k.x, k.y)
+ }
+ h = !h;
+ l = k;
+ c = n;
+ f++;
+ if (f >= g.length) {
+ f = 0
+ }
+ }
+ }
+ this.moveTo(e.x, e.y)
+ } else {
+ this.bezierCurveTo(e.x1, e.y1, e.x2, e.y2, e.x, e.y)
+ }
+ this.prePoint = e;
+ if (this.beginPoint == null) {
+ this.beginPoint = e
+ }
+ },
+ quadraticCurve: function (e) {
+ if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
+ var g = this.webkitLineDash;
+ var d = this.prePoint;
+ var i = Utils.measureDistance(d, e);
+ var n = 0;
+ var b = 1 / i;
+ var l = d;
+ var f = 0;
+ var h = true;
+ var c = 0;
+ while (n < 1) {
+ n += b;
+ if (n > 1) {
+ n = 1
+ }
+ var k = {
+ x: d.x * Math.pow((1 - n), 2) + e.x1 * n * (1 - n) * 2 + e.x * Math.pow(n, 2),
+ y: d.y * Math.pow((1 - n), 2) + e.y1 * n * (1 - n) * 2 + e.y * Math.pow(n, 2)
+ };
+ var a = Utils.measureDistance(l, k);
+ if (a >= g[f] || n >= 1) {
+ if (h) {
+ var m = c + (n - c) / 2;
+ var j = {
+ x: d.x * Math.pow((1 - m), 2) + e.x1 * m * (1 - m) * 2 + e.x * Math.pow(m, 2),
+ y: d.y * Math.pow((1 - m), 2) + e.y1 * m * (1 - m) * 2 + e.y * Math.pow(m, 2)
+ };
+ this.lineTo(j.x, j.y);
+ this.lineTo(k.x, k.y)
+ } else {
+ this.moveTo(k.x, k.y)
+ }
+ h = !h;
+ l = k;
+ c = n;
+ f++;
+ if (f >= g.length) {
+ f = 0
+ }
+ }
+ }
+ this.moveTo(e.x, e.y)
+ } else {
+ this.quadraticCurveTo(e.x1, e.y1, e.x, e.y)
+ }
+ this.prePoint = e;
+ if (this.beginPoint == null) {
+ this.beginPoint = e
+ }
+ },
+ close: function () {
+ if (typeof this.webkitLineDash != "undefined" && typeof this.lineDashOffset == "undefined" && this.lineWidth != 0) {
+ var f = this.webkitLineDash;
+ var c = this.prePoint;
+ var d = this.beginPoint;
+ var h = Utils.measureDistance(c, d);
+ var k = 0;
+ var b = 1 / h;
+ var j = c;
+ var e = 0;
+ var g = true;
+ while (k < 1) {
+ k += b;
+ if (k > 1) {
+ k = 1
+ }
+ var i = {
+ x: (1 - k) * c.x + k * d.x,
+ y: (1 - k) * c.y + k * d.y
+ };
+ var a = Utils.measureDistance(j, i);
+ if (a >= f[e] || k >= 1) {
+ if (g) {
+ this.lineTo(i.x, i.y)
+ } else {
+ this.moveTo(i.x, i.y)
+ }
+ g = !g;
+ j = i;
+ e++;
+ if (e >= f.length) {
+ e = 0
+ }
+ }
+ }
+ }
+ this.closePath()
+ },
+ curveArc: function (a) {
+ this.arc(a.centerX, a.centerY, a.radius, a.startAngle, a.endAngle, true);
+ }
+ },
+ setLineDash: function (d, c) {
+ if (!d.setLineDash) {
+ d.setLineDash = function () {
+ }
+ }
+ d.setLineDash(c);
+ d.mozDash = c;
+ d.webkitLineDash = c
+ },
+ renderShapePath: function (pos, f, e, h) {
+ var g;
+ if (h && e.drawIcon) {
+ g = e.drawIcon(e.props.w, e.props.h)
+ } else {
+ g = e.getPath(pos)
+ }
+ this.renderPath(f, e, g, h)
+ },
+ renderPath: function (m, o, i, t) {
+ for (var q = 0; q < i.length; q++) {
+ var s = i[q];
+ m.save();
+ m.beginPath();
+ var p = $.extend({},
+ o.lineStyle, s.lineStyle);
+ var n = $.extend({},
+ o.fillStyle, s.fillStyle);
+ if (s.textStyle) {
+ // path 中文字处理
+ m.font = s.textStyle.size + " " + o.fontStyle.fontFamily;
+ m.fillStyle = "rgb(" + s.textStyle.color + ")";
+ m.fillText(s.textStyle.text, s.textStyle.x, s.textStyle.y);
+ }
+ for (var r = 0; r < s.actions.length; r++) {
+ var j = s.actions[r];
+ this.actions[j.action].call(m, j)
+ }
+ this.fillShape(o, m, n);
+ this.iconImage(o, m, s.iconImage);
+ if (p.lineWidth) {
+ m.lineWidth = p.lineWidth;
+ m.strokeStyle = "rgb(" + p.lineColor + ")";
+ if (p.lineStyle == "dashed") {
+ if (t) {
+ this.setLineDash(m, [p.lineWidth * 4, p.lineWidth * 2])
+ } else {
+ this.setLineDash(m, [p.lineWidth * 6, p.lineWidth * 3])
+ }
+ } else if (p.lineStyle == "dot") {
+ this.setLineDash(m, [p.lineWidth, p.lineWidth * 2])
+ } else if (p.lineStyle == "dashdot") {
+ this.setLineDash(m, [p.lineWidth * 6, p.lineWidth * 2, p.lineWidth, p.lineWidth * 2])
+ }
+ m.stroke()
+ }
+ m.restore()
+ }
+ },
+ handleShapeConfigData: function (dataArray, q, attributesJsonArray) {
+ //先去除重复的配置--在拼装数据前,先删除数据
+ var temp1;
+ for (var i = q.dataAttributes.length - 1; i >= 0; i--) {
+ temp1 = q.dataAttributes[i];
+ var hor = temp1.horizontal;
+ var ver = temp1.vertical;
+ if (temp1.hasOwnProperty("attributesJsonArray")) {
+ var temp2 = temp1.dataShowConfig;
+ if (temp2 != undefined) {
+ temp2.value = [];
+ }
+ break
+ }
+ }
+ var key = q.name;
+ for (var i = 0; i < dataArray.length; i++) {
+ var temp = dataArray[i];
+ var showType = temp.showType;
+ var horizontal = temp.horizontal;
+ horizontal = horizontal.toLowerCase();
+ var verity = temp.verity;
+ verity = verity.toLowerCase();
+ if (verity == "center") {
+ verity = "middle";
+ }
+ if (showType == "text" || showType == "attribute") {
+ var cfgContent = temp.cfgContent;
+ var params = {
+ "w": 30,
+ "h": 30,
+ "textw": 20,
+ "texth": 17,
+ "imgT": 0,
+ "category": "custom",
+ "icon": "",
+ "name": key,
+ "showName": false,
+ "showType": "text", //text icon
+ "type": "string",
+ "value": cfgContent,
+ "horizontal": horizontal,
+ "vertical": verity,
+ "radius": 5,
+ "title": "",
+ "color": temp.color
+ };
+ if (showType == "attribute") {
+ var attrId = temp.key;
+ var attrType = "string";
+ if (attributesJsonArray.length > 0) {
+ for (var j = 0; j < attributesJsonArray.length; j++) {
+ var attr = attributesJsonArray[j];
+ if (attr.key == attrId) {
+ attrType = attr.type;
+ cfgContent = attr.value;
+ break;
+ }
+ }
+ }
+ var attrTypeArray = ['string', 'select', 'select_m', 'textarea'];
+ if (temp.isShowAttrName && attrTypeArray.indexOf(attrType) >= 0 && (cfgContent + '').trim().length > 0) {
+ cfgContent = "(" + temp.attrName + ")" + cfgContent;
+ }
+ if (attrType == "relation") {
+ var shapeIdAttrId = q.id + "_" + attrId;
+ var relationData = relationShapeModelObject;
+ var relationValue = "";
+ // for (var j = 0; j < cfgContent.length; j++) {
+ // if (j == cfgContent.length - 1) {
+ // if (relationData.hasOwnProperty(shapeIdAttrId)) {
+ // var tempRelationValue = relationData[shapeIdAttrId];
+ // relationValue = relationValue + tempRelationValue;
+ // }
+ // } else if (relationData.hasOwnProperty(shapeIdAttrId)) {
+ // var tempRelationValue = relationData[shapeIdAttrId] + "|";
+ // relationValue = relationValue + tempRelationValue;
+ // }
+ // }
+ if (relationData.hasOwnProperty(shapeIdAttrId)) {
+ relationValue = relationData[shapeIdAttrId]
+ }
+ cfgContent = relationValue;
+ if (temp.isShowAttrName) {
+ cfgContent = "(" + temp.attrName + ")" + cfgContent;
+ }
+ }
+ params.showType = "attr";
+ params.value = cfgContent;
+ params.color = temp.color
+ }
+ if (!q.dataAttributes) {
+ q.dataAttributes = [];
+ }
+ params.id = Utils.newId();
+ params.category = "custom";
+ if (!temp1.dataShowConfig) {
+ temp1.dataShowConfig = {};
+ if (!temp1.dataShowConfig.value) {
+ temp1.dataShowConfig.value = [];
+ }
+ }
+ temp1.dataShowConfig.value.push(params);
+ //Model.updateMulti([q]);
+ } else {
+ var iconContent = temp.iconContent;
+ var params = {
+ "w": 16,
+ "h": 16,
+ "textw": 20,
+ "texth": 17,
+ "imgT": 0,
+ "category": "custom",
+ "icon": iconContent,
+ "name": key,
+ "showName": false,
+ "showType": "icon", //text icon
+ "type": "string",
+ "value": "",
+ "horizontal": horizontal,
+ "vertical": verity
+ };
+ if (!q.dataAttributes) {
+ q.dataAttributes = [];
+ }
+ params.id = Utils.newId();
+ params.category = "custom";
+ if (!temp1.dataShowConfig) {
+ temp1.dataShowConfig = {};
+ if (!temp1.dataShowConfig.value) {
+ temp1.dataShowConfig.value = [];
+ }
+ }
+ temp1.dataShowConfig.value.push(params);
+ //Model.updateMulti([q]);
+ }
+ }
+ },
+ renderShape: function (q, pos) {
+ if (q.name == "linker") {
+ this.renderLinker(pos, q);
+ return
+ }
+ let Model = PageModel[pos];
+ var commonShapeConfig = Utils.copy(Model.define.commonShapeConfig);
+ var specialShapeConfig;
+ var attributesJsonArray;
+ var dataAttributes = q.dataAttributes;
+ for (var i = 0; i < dataAttributes.length; i++) {
+ var temp = dataAttributes[i];
+ if (temp.hasOwnProperty("attributesJsonArray")) {
+ if (temp.dataShowConfig) {
+ specialShapeConfig = temp.dataShowConfig.config;
+ }
+ attributesJsonArray = temp.attributesJsonArray;
+ break;
+ }
+ }
+ var key = q.name;
+ if (specialShapeConfig == undefined) {
+ if (commonShapeConfig != undefined && commonShapeConfig[key] != undefined) {
+ commonShapeConfig = commonShapeConfig[key];
+ this.handleShapeConfigData(commonShapeConfig, q, attributesJsonArray);
+ }
+ } else {
+ if (commonShapeConfig == undefined) {
+ this.handleShapeConfigData(Utils.copy(specialShapeConfig), q, attributesJsonArray);
+ } else {
+ commonShapeConfig = commonShapeConfig[key];
+ var tempCommonShapeConfig = [];
+ if (commonShapeConfig != undefined) {
+ var dataArray = [];
+ var tempArray = [];
+ for (i = 0; i < commonShapeConfig.length; i++) {
+ var temp1 = commonShapeConfig[i];
+ for (j = 0; j < specialShapeConfig.length; j++) {
+ var temp2 = specialShapeConfig[j];
+ if (temp1.horizontal == temp2.horizontal && temp1.verity == temp2.verity) {
+ tempArray.push(i);
+ break;
+ }
+ }
+ }
+ if (tempArray.length > 0) {
+ for (i = 0; i < commonShapeConfig.length; i++) {
+ if (!(tempArray.indexOf(i) >= 0)) {
+ tempCommonShapeConfig.push(commonShapeConfig[i]);
+ }
+ }
+ }
+ }
+ if (tempCommonShapeConfig.length > 0) {
+ dataArray = specialShapeConfig.concat(tempCommonShapeConfig);
+ } else {
+ dataArray = specialShapeConfig;
+ }
+ this.handleShapeConfigData(dataArray, q, attributesJsonArray);
+ }
+ }
+ var v = $("#designer-canvas-" + pos);
+ var o = v.find("#" + q.id);
+ if (o.length == 0) {
+ if (q.category == 'lane') {
+ o = $("").appendTo(v)
+ } else {
+ o = $("").appendTo(v)
+ }
+ }
+ var t = Utils.getShapeBox(q);
+ var w = (t.w + 20).toScale(pos);
+ var s = (t.h + 20).toScale(pos);
+ o.find(".shape_canvas").attr({
+ width: w,
+ height: s
+ });
+ o.css({
+ left: (t.x - 10).toScale(pos) + "px",
+ top: (t.y - 10).toScale(pos) + "px",
+ width: w,
+ height: s
+ });
+ var n = o.find(".shape_canvas")[0].getContext("2d");
+ n.clearRect(0, 0, q.props.w + 20, q.props.h + 20);
+ n.scale(VersionDesigner.config.scale[pos], VersionDesigner.config.scale[pos]);
+ n.translate(10, 10);
+ n.translate(q.props.x - t.x, q.props.y - t.y);
+ n.translate(q.props.w / 2, q.props.h / 2);
+ n.rotate(q.props.angle);
+ n.translate(-(q.props.w / 2), -(q.props.h / 2));
+ if (q.highLight) {
+ n.shadowBlur = 9;
+ n.shadowColor = "rgba(0, 0, 0, 0.5)";
+ }
+ var x = q.lineStyle;
+ n.globalAlpha = q.shapeStyle.alpha;
+ n.lineJoin = "round";
+ this.renderShapePath(pos, n, q);
+ this.renderMarkers(n, q);
+ var m = q.getPath(pos);
+ var p = Utils.copy(m[m.length - 1]);
+ p.fillStyle = {
+ type: "none"
+ };
+ p.lineStyle = {
+ lineWidth: 0
+ };
+ var u = [p];
+ this.renderPath(n, q, u);
+ this.renderText(pos, q, t);
+ this.renderDataAttributes(pos, q, t);
+ this.renderTitleShow(pos, q, t);
+ if (!isProcessExec) {
+ VersionDesigner.painter.renderShapeLink(o, q); //节点链接
+ VersionDesigner.painter.renderSahpeAttachment(pos, o, q); //节点附件
+ if (attributesJsonArray != undefined && attributesJsonArray.length > 0) {
+ o.find(".shape_danger").remove();
+ o.find(".shape_regulate").remove();
+ var A = false;
+ var z = false;
+ for (var r in attributesJsonArray) {
+ var l = attributesJsonArray[r];
+ if (l != undefined && l.key == "danger" && l.value != undefined && l.value != "" && relationShapeInfo[pos] != undefined) {
+ if (typeof l.value == 'object' && l.value.constructor == Array) {
+ for (var m = 0; m < l.value.length; m++) {
+ if (relationShapeInfo[pos][l.value[m]] != undefined) {
+ A = true;
+ break;
+ }
+ }
+ } else if (relationShapeInfo[pos][l.value] != undefined) {
+ A = true;
+ }
+ } else {
+ if (l != undefined && l.key == "regulate" && l.value != undefined && l.value != "" && relationShapeInfo[pos] != undefined) {
+ if (typeof l.value == 'object' && l.value.constructor == Array) {
+ for (var m = 0; m < l.value.length; m++) {
+ if (relationShapeInfo[pos][l.value[m]] != undefined) {
+ z = true;
+ break;
+ }
+ }
+ } else if (relationShapeInfo[pos][l.value] != undefined) {
+ z = true;
+ }
+ }
+ }
+ }
+ if (A) {
+ var y = $("").appendTo(o)
+ }
+ if (z) {
+ var y = $("").appendTo(o)
+ }
+ }
+ }
+ this.renderDiffNode(q, pos)
+ },
+ renderDiffNode: function (q, pos) {
+ if (pos === 'right') {
+ // 右侧是当前版本 差异图元只会在右侧渲染
+ let index = diffNode.findIndex(i => i.id === q.id)
+ if (index !== -1) {
+ const v = $("#designer-canvas-" + pos);
+ const icon = {
+ add: {
+ code: '',
+ color: '#E02020',
+ qtip: 新增图元
+ },
+ delete: {
+ code: '',
+ color: '#E02020',
+ qtip: 删除图元
+ },
+ position: {
+ code: '',
+ color: '#FF8F0B',
+ qtip: 图元位置变化
+ },
+ info: {
+ code: '',
+ color: '#FF8F0B',
+ qtip: 图元信息变化
+ },
+ style: {
+ code: '',
+ color: '#FF8F0B',
+ qtip: 图元名称样式变化
+ },
+ }
+ let type = diffNode[index].type
+ let iconStr = ''
+ type.forEach(i => {
+ iconStr += `
+ ${icon[i].code}
+ `
+ })
+ let diffDom = v.find("#diff-node-" + q.id)
+ let width, height, left, top, background, border
+ if (diffDom.length === 0) {
+ diffDom = $(``).appendTo(v)
+ }
+ if (type.includes('delete')) {
+ let a = $("#designer-canvas-left").find("#" + q.id)
+ width = parseInt(a.css('width')).restoreScale('left').toScale('right')
+ height = parseInt(a.css('height')).restoreScale('left').toScale('right')
+ left = parseInt(a.css('left')).restoreScale('left').toScale('right')
+ top = parseInt(a.css('top')).restoreScale('left').toScale('right')
+ background = 'rgba(224, 32, 32, 0.15)'
+ border = '#E02020'
+ } else {
+ let a = v.find("#" + q.id)
+ width = parseInt(a.css('width'))
+ height = parseInt(a.css('height'))
+ left = parseInt(a.css('left'))
+ top = parseInt(a.css('top'))
+ background = type.includes('add') ? 'rgba(224, 32, 32, 0.15)' : 'rgba(255, 143, 11, 0.15)'
+ border = type.includes('add') ? '#E02020' : '#FF8F0B'
+ }
+ diffDom.css({
+ boxSizing: 'border-box',
+ left: left + 'px',
+ top: top + 'px',
+ width: width + 'px',
+ height: height + 'px',
+ background: background,
+ border: `1.2px dashed ${border}`
+ })
+ let a = diffDom.find(".diff-icon-wrapper")
+ if (a.length === 0) {
+ let b = $(`${iconStr}
`).appendTo(diffDom)
+ b.children('span[type=info]').off('mousedown').on('mousedown', function (eve) {
+ eve.stopPropagation()
+ })
+ b.children('span[type=info]').off('click').on('click', function (eve) {
+ eve.stopPropagation()
+ Utils.unselect(pos);
+ Utils.selectShape(pos, q.id)
+ versionCompareFun.openAttributeView(pos)
+ Utils.selectedOtherShape(pos)
+ })
+ }
+ }
+ }
+ },
+ iconImage: function (n, i, h) {
+ if (!h) {
+ return;
+ }
+ // 画布保存
+ i.save();
+ var m = imageDefMap[h.imageId];
+ var maxLength = n.props.h, relLength;
+ if (h.type === "colorOverlay") {
+ maxLength = 30;
+ }
+ relLength = maxLength * 0.65
+ // 获取或创建图片元素
+ var k = $(".shape_img[src='" + m + "']");
+ if (k.length === 0) {
+ k = $("
").appendTo("#shape_img_container");
+ k.one("load.drawshape", function () {
+ i.translate(0, 0);
+ drawIcon(k, maxLength, relLength);
+ k.attr("loaded", "1");
+ });
+ } else if (k.attr("loaded") === "0") {
+ k.one("load.drawshape", function () {
+ i.translate(0, 0);
+ drawIcon(k, maxLength, relLength);
+ });
+ } else {
+ drawIcon(k, maxLength, relLength);
+ }
+
+ // 图片icon绘制,按图片比例处理
+ function drawIcon(r, maxLength, relLength) {
+ i.save();
+ var desiredHeight, desiredWidth;
+ var aspectRatio = r[0].width / r[0].height;
+ if (aspectRatio > 1) {
+ desiredWidth = relLength;
+ desiredHeight = desiredWidth * aspectRatio;
+ } else {
+ desiredHeight = relLength;
+ desiredWidth = desiredHeight * aspectRatio;
+ }
+ var center = maxLength / 2
+ var adjustedX = center - desiredWidth / 2;
+ var adjustedY = center - desiredHeight / 2;
+ i.drawImage(r[0], adjustedX, adjustedY, desiredWidth, desiredHeight);
+ i.restore();
+ }
+ },
+ fillShape: function (n, i, h) {
+ i.save();
+ // 颜色叠加
+ if (typeof h.colorOverlay !== 'undefined') {
+ if (h.colorOverlay === 'multiplyOverlay') {
+ h.color = multiplyColors(h.color);
+ }
+ }
+ if (h.type == "solid") {
+ i.fillStyle = "rgb(" + h.color + ")";
+ i.fill()
+ } else if (h.type == "gradient") {
+ var j;
+ if (h.gradientType == "linear") {
+ j = GradientHelper.createLinearGradient(n, i, h)
+ } else {
+ j = GradientHelper.createRadialGradient(n, i, h)
+ }
+ i.fillStyle = j;
+ i.fill()
+ } else if (h.type === "image" || h.type === "imageDef") {
+ let isInvalidImage = false // 自定义图片图元 图片是否被替换标志位
+ let m = h.fileId
+ if (h.from === 'insert') {
+ m = shapeImages[h.fileId]
+ }
+ if (h.type === "imageDef") {
+ if (imageDefMap[h.fileId]) {
+ m = imageDefMap[h.fileId]
+ } else {
+ m = shapeImages[h.fileId]
+ isInvalidImage = true
+ }
+ }
+ var k = $(".shape_img[src='" + m + "']");
+ if (k.length == 0) {
+ k = $("
").appendTo("#shape_img_container");
+ k.bind("load.drawshape",
+ function () {
+ var b = h.from === 'insert' ? 0 : (VersionDesigner.config.panelItemWidth - n.props.w) / 2;
+ var a = h.from === 'insert' ? 0 : (VersionDesigner.config.panelItemHeight - n.props.h) / 2;
+ if (isInvalidImage) {
+ a = 0
+ b = 0
+ }
+ i.translate(b, a);
+ l(k);
+ i.restore();
+ $(this).attr("loaded", "1")
+ });
+ k.attr("src", m)
+ } else if (k.attr("loaded") == "0") {
+ k.bind("load.drawshape",
+ function () {
+ // var b = (VersionDesigner.config.panelItemWidth - n.props.w) / 2;
+ // var a = (VersionDesigner.config.panelItemHeight - n.props.h) / 2;
+ var b = 0;// by sunlh 20200716 svg shape
+ var a = 0;
+ i.translate(b, a);
+ l(k);
+ i.restore()
+ })
+ } else {
+ l(k)
+ }
+ }
+
+ // 颜色叠加 乘法处理
+ function multiplyColors(color1) {
+ // 将颜色转换为RGB数组格式
+ let [r1, g1, b1] = color1.split(',').map(Number);
+ let [r2, g2, b2] = color1.split(',').map(Number);
+ let r = (r1 / 255) * (r2 / 255) * 255;
+ let g = (g1 / 255) * (g2 / 255) * 255;
+ let b = (b1 / 255) * (b2 / 255) * 255;
+ // 返回新的RGB颜色字符串
+ return `${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}`;
+ }
+
+ i.restore();
+
+ function l(r) {
+ i.save();
+ i.clip();
+ if (h.display == "fit") {
+ var d = r.width();
+ var q = r.height();
+ var a = d / q;
+ var e = n.props.w / n.props.h;
+ if (a > e) {
+ var g = n.props.w;
+ var b = 0;
+ var s = g / a;
+ var c = n.props.h / 2 - s / 2;
+ i.drawImage(r[0], b, c, g, s)
+ } else {
+ var s = n.props.h;
+ var c = 0;
+ var g = s * a;
+ var b = n.props.w / 2 - g / 2;
+ i.drawImage(r[0], b, c, g, s)
+ }
+ } else {
+ if (h.display == "stretch") {
+ i.drawImage(r[0], 0, 0, n.props.w, n.props.h)
+ } else {
+ if (h.display == "original") {
+ var d = r.width();
+ var q = r.height();
+ var b = n.props.w / 2 - d / 2;
+ var c = n.props.h / 2 - q / 2;
+ i.drawImage(r[0], b, c, d, q)
+ } else {
+ if (h.display == "tile") {
+ var b = 0;
+ var d = r.width();
+ var q = r.height();
+ while (b < n.props.w) {
+ var c = 0;
+ while (c < n.props.h) {
+ i.drawImage(r[0], b, c, d, q);
+ c += q
+ }
+ b += d
+ }
+ } else {
+ if (h.display == "static") {
+ var u = 0;
+ var t = r.width();
+ var f = r.height();
+ i.drawImage(r[0], h.imageX, h.imageY, t, f)
+ } else {
+ if (h.display == "zoom") {
+ var u = 0;
+ var t = r.width();
+ var f = r.height();
+ i.drawImage(r[0], h.imageX, h.imageY, t, f, h.canvasX, h.canvasY, h.canvasW, h.canvasH)
+ } else {
+ var d = r.width();
+ var q = r.height();
+ var a = d / q;
+ var e = n.props.w / n.props.h;
+ if (a > e) {
+ var s = n.props.h;
+ var c = 0;
+ var g = s * a;
+ var b = n.props.w / 2 - g / 2;
+ i.drawImage(r[0], b, c, g, s)
+ } else {
+ var g = n.props.w;
+ var b = 0;
+ var s = g / a;
+ var c = n.props.h / 2 - s / 2;
+ i.drawImage(r[0], b, c, g, s)
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ i.restore()
+ }
+ },
+ renderText: function (pos, z, r) {
+ var B = $("#designer-canvas-" + pos).find("#" + z.id);
+ var v = B.find(".text_canvas[forshape=" + z.id + "]");
+ if (v.length == 0) {
+ v = $("").appendTo(B);
+ v.bind("focus",
+ function () {
+ $(this).blur()
+ })
+ }
+ v.attr("readonly", "readonly");
+ if (z.text == null || z.text.trim() == "" || (z.attribute.editable == false && z.title == z.text)) {
+ v.css({
+ height: "0px",
+ width: "0px"
+ }).hide();
+ return
+ }
+ var C = z.fontStyle;
+ var G = {
+ "line-height": Math.round(C.size * 1.25) + "px",
+ "font-size": C.size + "px",
+ "font-family": C.fontFamily,
+ "font-weight": C.bold ? "bold" : "normal",
+ "font-style": C.italic ? "italic" : "normal",
+ "text-align": C.textAlign,
+ color: "rgb(" + C.color + ")",
+ "text-decoration": C.underline ? "underline" : "none",
+ opacity: z.shapeStyle.alpha
+ };
+ v.css(G);
+ v.show();
+ var s = z.getTextBlock();
+ if (z.fontStyle.orientation == "horizontal") {
+ var D = {
+ x: s.x + s.w / 2,
+ y: s.y + s.h / 2
+ };
+ s = {
+ x: D.x - s.h / 2,
+ y: D.y - s.w / 2,
+ w: s.h,
+ h: s.w
+ }
+ }
+ v.css({
+ width: s.w
+ });
+ v.height(0);
+ v.val(z.text);
+ v.scrollTop(99999);
+ var E = v.scrollTop();
+ var y = 0;
+ if (C.vAlign == "middle") {
+ y = (s.y + s.h / 2 - E / 2)
+ } else {
+ if (z.fontStyle.vAlign == "bottom") {
+ y = (s.y + s.h - E)
+ } else {
+ y = s.y
+ }
+ }
+ var t = {
+ x: s.x + s.w / 2,
+ y: y + E / 2
+ };
+ var w = z.props.angle;
+ if (w != 0) {
+ var H = {
+ x: z.props.w / 2,
+ y: z.props.h / 2
+ };
+ t = Utils.getRotated(H, t, w)
+ }
+ if (C.orientation == "horizontal") {
+ w = (Math.PI * 1.5 + w) % (Math.PI * 2)
+ }
+ var F = Math.round(w / (Math.PI * 2) * 360);
+ var x = "rotate(" + F + "deg) scale(" + VersionDesigner.config.scale[pos] + ")";
+ var A = s.w;
+ var u = E;
+ v.css({
+ width: A,
+ height: u,
+ left: (t.x + (z.props.x - r.x) + 10).toScale(pos) - s.w / 2,
+ top: (t.y + (z.props.y - r.y) + 10).toScale(pos) - E / 2,
+ "-webkit-transform": x,
+ "-ms-transform": x,
+ "-o-transform": x,
+ "-moz-transform": x,
+ transform: x
+ })
+ },
+ renderLinker: function (pos, h) {
+ let Model = PageModel[pos]
+ if (h.linkerType == "curve" || h.linkerType == "broken") {
+ if (!h.points || h.points.length == 0) {
+ h.points = Utils.getLinkerPoints(h)
+ }
+ }
+ var q = h.points;
+ var o = Utils.copy(h.from);
+ var a = Utils.copy(h.to);
+ if (h.attribute && h.attribute.collapseBy) {
+ $("#designer-canvas-" + pos).find("#" + h.id).hide()
+ return
+ } else {
+ $("#designer-canvas-" + pos).find("#" + h.id).show()
+ }
+ var p = Utils.getEndpointAngle(h, "from");
+ var d = Utils.getEndpointAngle(h, "to");
+ var b = Utils.getLinkerLineStyle(pos, h.lineStyle);
+ l(pos, o, h, b.beginArrowStyle, p);
+ l(pos, a, h, b.endArrowStyle, d);
+ var B = a.x;
+ var x = a.y;
+ var y = o.x;
+ var w = o.y;
+ if (a.x < o.x) {
+ B = a.x;
+ y = o.x
+ } else {
+ B = o.x;
+ y = a.x
+ }
+ if (a.y < o.y) {
+ x = a.y;
+ w = o.y
+ } else {
+ x = o.y;
+ w = a.y
+ }
+ for (var r = 0; r < q.length; r++) {
+ var n = q[r];
+ if (n.x < B) {
+ B = n.x
+ } else {
+ if (n.x > y) {
+ y = n.x
+ }
+ }
+ if (n.y < x) {
+ x = n.y
+ } else {
+ if (n.y > w) {
+ w = n.y
+ }
+ }
+ }
+ var f = {
+ x: B,
+ y: x,
+ w: y - B,
+ h: w - x
+ };
+ var C = $("#designer-canvas-" + pos).find("#" + h.id);
+ if (C.length == 0) {
+ var g = $("#designer-canvas-" + pos);
+ C = $("").appendTo(g)
+ }
+ if (!Model.getShapeById(h.id)) {
+ C.css("z-index", Model.orderList.length + 1)
+ C.css({'pointer-events': 'none'})
+ }
+ var A = C.find(".shape_canvas");
+ A.attr({
+ width: (f.w + 20).toScale(pos),
+ height: (f.h + 20).toScale(pos)
+ });
+ C.css({
+ left: (f.x - 10).toScale(pos),
+ top: (f.y - 10).toScale(pos),
+ width: (f.w + 20).toScale(pos),
+ height: (f.h + 20).toScale(pos)
+ });
+ var m = A[0].getContext("2d");
+ m.scale(VersionDesigner.config.scale[pos], VersionDesigner.config.scale[pos]);
+ m.translate(10, 10);
+ var s = Utils.getLinkerLineStyle(pos, h.lineStyle);
+ m.lineWidth = s.lineWidth;
+ m.strokeStyle = "rgb(" + s.lineColor + ")";
+ m.fillStyle = "rgb(" + s.lineColor + ")";
+ if (h.highLight) {
+ m.shadowBlur = 15;
+ m.shadowColor = "rgba(0, 0, 0, 0.5)";
+ }
+ m.save();
+ var z = {
+ x: o.x - f.x,
+ y: o.y - f.y
+ };
+ var c = {
+ x: a.x - f.x,
+ y: a.y - f.y
+ };
+ m.save();
+ if (s.lineStyle == "dashed") {
+ this.setLineDash(m, [s.lineWidth * 5, s.lineWidth * 2])
+ } else {
+ if (s.lineStyle == "dot") {
+ this.setLineDash(m, [s.lineWidth, s.lineWidth * 1.5])
+ } else {
+ if (s.lineStyle == "dashdot") {
+ this.setLineDash(m, [s.lineWidth * 5, s.lineWidth * 2, s.lineWidth, s.lineWidth * 2])
+ }
+ }
+ }
+ m.lineJoin = "round";
+ m.beginPath();
+ this.actions.move.call(m, z);
+ if (h.linkerType == "curve") {
+ var v = q[0];
+ var u = q[1];
+ var t = {
+ x1: v.x - f.x,
+ y1: v.y - f.y,
+ x2: u.x - f.x,
+ y2: u.y - f.y,
+ x: c.x,
+ y: c.y
+ };
+ this.actions.curve.call(m, t)
+ } else {
+ for (var r = 0; r < q.length; r++) {
+ var D = q[r];
+ this.actions.line.call(m, {
+ x: D.x - f.x,
+ y: D.y - f.y
+ })
+ }
+ this.actions.line.call(m, c)
+ }
+ var j = Utils.isSelected(h.id, pos);
+ if (j) {
+ m.shadowBlur = 4;
+ m.shadowColor = "#833";
+ if (h.linkerType == "curve" && Utils.getSelectedIds(pos).length == 1) {
+ }
+ }
+ // region 差异线
+ if (pos === 'right') {
+ let index = diffNode.findIndex(i => i.id === h.id)
+ if (index !== -1) {
+ m.shadowBlur = 4;
+ m.shadowColor = "#833";
+ }
+ }
+ // endregion
+ m.stroke();
+ m.restore();
+ delete m.webkitLineDash;
+ e(z, p, o.id, s.beginArrowStyle, h, o.angle);
+ e(c, d, a.id, s.endArrowStyle, h, a.angle);
+ m.restore();
+ this.renderLinkerText(pos, h);
+
+ function l(pos, M, H, i, J) {
+ let Model = PageModel[pos]
+ if (M.id) {
+ var E = Model.getShapeById(M.id);
+ if (E) {
+ var G = {
+ x: 0,
+ y: 0
+ };
+ var I = Utils.getShapeLineStyle(pos, E.lineStyle);
+ var L = Utils.getLinkerLineStyle(pos, H.lineStyle);
+ if (i == "none" || i == "cross") {
+ G.x = -I.lineWidth / 2
+ } else {
+ if (i == "solidArrow" || i == "dashedArrow") {
+ G.x = -I.lineWidth / 2 - L.lineWidth * 1.3
+ } else {
+ if (i == "solidDiamond" || i == "dashedDiamond") {
+ G.x = -I.lineWidth / 2 - L.lineWidth
+ } else {
+ G.x = -I.lineWidth / 2 - L.lineWidth / 2
+ }
+ }
+ }
+ var K = {
+ x: 0,
+ y: 0
+ };
+ var F = Utils.getRotated(K, G, J);
+ M.x += F.x;
+ M.y += F.y
+ }
+ }
+ }
+
+ function e(W, M, Q, Y, R, E) {
+ if (Y == "normal") {
+ var S = 12;
+ var ac = Math.PI / 5;
+ var V = S / Math.cos(ac);
+ var L = W.x - V * Math.cos(M - ac);
+ var K = W.y - V * Math.sin(M - ac);
+ var O = W.x - V * Math.sin(Math.PI / 2 - M - ac);
+ var N = W.y - V * Math.cos(Math.PI / 2 - M - ac);
+ m.beginPath();
+ m.moveTo(L, K);
+ m.lineTo(W.x, W.y);
+ m.lineTo(O, N);
+ m.stroke()
+ } else {
+ if (Y == "solidArrow") {
+ var S = 12;
+ var ac = Math.PI / 10;
+ var V = S / Math.cos(ac);
+ var L = W.x - V * Math.cos(M - ac);
+ var K = W.y - V * Math.sin(M - ac);
+ var O = W.x - V * Math.sin(Math.PI / 2 - M - ac);
+ var N = W.y - V * Math.cos(Math.PI / 2 - M - ac);
+ m.beginPath();
+ m.moveTo(W.x, W.y);
+ m.lineTo(L, K);
+ m.lineTo(O, N);
+ m.lineTo(W.x, W.y);
+ m.closePath();
+ m.fill();
+ m.stroke()
+ } else {
+ if (Y == "dashedArrow") {
+ m.save();
+ var S = 12;
+ var ac = Math.PI / 10;
+ var V = S / Math.cos(ac);
+ var L = W.x - V * Math.cos(M - ac);
+ var K = W.y - V * Math.sin(M - ac);
+ var O = W.x - V * Math.sin(Math.PI / 2 - M - ac);
+ var N = W.y - V * Math.cos(Math.PI / 2 - M - ac);
+ m.beginPath();
+ m.moveTo(W.x, W.y);
+ m.lineTo(L, K);
+ m.lineTo(O, N);
+ m.lineTo(W.x, W.y);
+ m.closePath();
+ m.fillStyle = "white";
+ m.fill();
+ m.stroke();
+ m.restore()
+ } else {
+ if (Y == "solidCircle") {
+ m.save();
+ var i = 4;
+ var J = W.x - i * Math.cos(M);
+ var I = W.y - i * Math.sin(M);
+ m.beginPath();
+ m.arc(J, I, i, 0, Math.PI * 2, false);
+ m.closePath();
+ m.fill();
+ m.stroke();
+ m.restore()
+ } else {
+ if (Y == "dashedCircle") {
+ m.save();
+ var i = 4;
+ var J = W.x - i * Math.cos(M);
+ var I = W.y - i * Math.sin(M);
+ m.beginPath();
+ m.arc(J, I, i, 0, Math.PI * 2, false);
+ m.closePath();
+ m.fillStyle = "white";
+ m.fill();
+ m.stroke();
+ m.restore()
+ } else {
+ if (Y == "solidDiamond") {
+ m.save();
+ var S = 8;
+ var ac = Math.PI / 7;
+ var V = S / Math.cos(ac);
+ var L = W.x - V * Math.cos(M - ac);
+ var K = W.y - V * Math.sin(M - ac);
+ var O = W.x - V * Math.sin(Math.PI / 2 - M - ac);
+ var N = W.y - V * Math.cos(Math.PI / 2 - M - ac);
+ var U = W.x - S * 2 * Math.cos(M);
+ var T = W.y - S * 2 * Math.sin(M);
+ m.beginPath();
+ m.moveTo(W.x, W.y);
+ m.lineTo(L, K);
+ m.lineTo(U, T);
+ m.lineTo(O, N);
+ m.lineTo(W.x, W.y);
+ m.closePath();
+ m.fill();
+ m.stroke();
+ m.restore()
+ } else {
+ if (Y == "dashedDiamond") {
+ m.save();
+ var S = 8;
+ var ac = Math.PI / 7;
+ var V = S / Math.cos(ac);
+ var L = W.x - V * Math.cos(M - ac);
+ var K = W.y - V * Math.sin(M - ac);
+ var O = W.x - V * Math.sin(Math.PI / 2 - M - ac);
+ var N = W.y - V * Math.cos(Math.PI / 2 - M - ac);
+ var U = W.x - S * 2 * Math.cos(M);
+ var T = W.y - S * 2 * Math.sin(M);
+ m.beginPath();
+ m.moveTo(W.x, W.y);
+ m.lineTo(L, K);
+ m.lineTo(U, T);
+ m.lineTo(O, N);
+ m.lineTo(W.x, W.y);
+ m.closePath();
+ m.fillStyle = "white";
+ m.fill();
+ m.stroke();
+ m.restore()
+ } else {
+ if (Y == "cross") {
+ var H = 6;
+ var P = 14;
+ var ab = H * Math.cos(Math.PI / 2 - M);
+ var aa = H * Math.sin(Math.PI / 2 - M);
+ var Z = W.x + ab;
+ var G = W.y - aa;
+ var U = W.x - P * Math.cos(M);
+ var T = W.y - P * Math.sin(M);
+ var X = U - ab;
+ var F = T + aa;
+ m.beginPath();
+ m.moveTo(Z, G);
+ m.lineTo(X, F);
+ m.stroke()
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ renderLinkerText: function (pos, l) {
+ var m = $("#designer-canvas-" + pos).find("#" + l.id);
+ var q = m.find(".text_canvas");
+ if (q.length == 0) {
+ q = $("").appendTo(m)
+ }
+ var n = l.fontStyle;
+ var p = "scale(" + VersionDesigner.config.scale[pos] + ")";
+ var r = {
+ "line-height": Math.round(n.size * 1.25) + "px",
+ "font-size": n.size + "px",
+ "font-family": n.fontFamily,
+ "font-weight": n.bold ? "bold" : "normal",
+ "font-style": n.italic ? "italic" : "normal",
+ "text-align": n.textAlign,
+ color: "rgb(" + n.color + ")",
+ "text-decoration": n.underline ? "underline" : "none",
+ "-webkit-transform": p,
+ "-ms-transform": p,
+ "-o-transform": p,
+ "-moz-transform": p,
+ transform: p
+ };
+ q.css(r);
+ if (l.text == null || l.text == "") {
+ q.hide();
+ return
+ }
+ q.show();
+ var k = l.text.replace(//g, ">").replace(/\n/g, "
");
+ q.html(k + "
");
+ var j = this.getLinkerMidpoint(l);
+ var o = m.position();
+ q.css({
+ left: j.x.toScale(pos) - o.left - q.width() / 2,
+ top: j.y.toScale(pos) - o.top - q.height() / 2
+ })
+ },
+ renderMarkers: function (n, r, v) {
+ if (r.attribute && r.attribute.markers && r.attribute.markers.length > 0) {
+ var u = r.attribute.markers;
+ var i = Schema.config.markerSize;
+ var q = 4;
+ if (v) {
+ i = 10
+ }
+ var t = r.attribute.markerOffset;
+ if (v) {
+ t = 5
+ }
+ var w = u.length * i + (u.length - 1) * q;
+ var p = r.props.w / 2 - w / 2;
+ for (var s = 0; s < u.length; s++) {
+ var o = u[s];
+ n.save();
+ n.translate(p, r.props.h - i - t);
+ var x = Schema.markers[o].call(r, i);
+ this.renderPath(n, r, x);
+ n.restore();
+ p += i + q
+ }
+ }
+ },
+ renderTitleShow: function (pos, i, k) {
+ if (i.props.titleProps) {
+ var H = $("").appendTo($("#designer-canvas-" + pos).find("#" + i.id));
+ H.css({
+ left: (10 + i.props.titleProps.x) * VersionDesigner.config.scale[pos] + 'px',
+ top: (17 + i.props.titleProps.y) * VersionDesigner.config.scale[pos] + 'px',
+ });
+ var b = H[0].getContext("2d");
+ var w = "13px ";
+ let metrics = b.measureText(i.title)
+ let width = (metrics.width + 20).toScale(pos) ,height = parseInt(w).toScale(pos) + 10
+ H.attr({
+ width: width,
+ height: height
+ })
+ w += i.fontStyle.fontFamily;
+ b.font = w;
+ b.fillStyle = "#696969";
+ if (i.titleStyle && i.titleStyle.titleColor) {
+ b.fillStyle = i.titleStyle.titleColor;
+ }
+ b.scale(VersionDesigner.config.scale[pos], VersionDesigner.config.scale[pos]);
+ b.fillText(i.title, 0, 12);
+ }
+ },
+ renderDataAttributes: function (pos, i, k) {
+ $("#designer-canvas-" + pos).find("#" + i.id).children(".attr_canvas").remove();
+ if (!i.dataAttributes || i.dataAttributes.length == 0) {
+ return
+ }
+ var n = {
+ x: i.props.w / 2,
+ y: i.props.h / 2
+ };
+ for (var p = 0; p < i.dataAttributes.length; p++) {
+ var j = i.dataAttributes[p];
+ if (j.hasOwnProperty("attributesJsonArray")) {
+ if (!j.dataShowConfig) {
+ continue
+ }
+ var jj = j.dataShowConfig.value;
+ if (jj && jj.length > 0) {
+ for (var n = 0; n < jj.length; n++) {
+ var jjj = jj[n];
+ var l = "";
+ var o = "";
+ if (jjj.showName) {
+ l = j.name + ": "
+ }
+ if (jjj.showType == "text" || jjj.showType == "attr") {
+ l += jjj.value
+ } else {
+ if (jjj.showType == "icon") {
+ o = jjj.icon
+ }
+ }
+ if (l == "" && o == "") {
+ continue
+ }
+ m(jjj, l, o)
+ }
+ }
+ }
+ }
+
+ function m(c, y, x) {
+ var h = c.horizontal;
+ var I = c.vertical;
+ var H = $("").appendTo($("#designer-canvas-" + pos).find("#" + i.id));
+ var b = H[0].getContext("2d");
+ var w = "12px ";
+ w += i.fontStyle.fontFamily;
+ b.font = w;
+ var D = b.measureText(y).width;
+ var a = 20;
+ if (x != "") {
+ D += 20
+ }
+ var E, F;
+ if (h == "mostleft") {
+ E = -D - 2
+ } else {
+ if (h == "leftedge") {
+ E = -D / 2
+ } else {
+ if (h == "left") {
+ E = 2
+ } else {
+ if (h == "center") {
+ E = (i.props.w - D) / 2;
+ } else {
+ if (h == "right") {
+ E = i.props.w - D - 2;
+ if (h == "rightedge") {
+ E = i.props.w - D / 2
+ } else {
+ E = i.props.w + 2
+ }
+ }
+ }
+ }
+ }
+ }
+ if (I == "mosttop") {
+ F = -a
+ } else {
+ if (I == "topedge") {
+ F = -a / 2
+ } else {
+ if (I == "top") {
+ F = 0
+ } else {
+ if (I == "middle") {
+ F = (i.props.h - a) / 2
+ } else {
+ if (I == "bottom") {
+ F = i.props.h - a
+ } else {
+ if (I == "bottomedge") {
+ F = i.props.h - a / 2
+ } else {
+ F = i.props.h
+ }
+ }
+ }
+ }
+ }
+ }
+ var g = {
+ x: E,
+ y: F,
+ w: D,
+ h: a
+ };
+ var G = Utils.getRotatedBox(g, i.props.angle, n);
+ H.attr({
+ width: G.w.toScale(pos),
+ height: G.h.toScale(pos)
+ });
+ b.font = w;
+ var d = (G.x + (i.props.x - k.x) + 10).toScale(pos);
+ var e = (G.y + (i.props.y - k.y) + 10).toScale(pos);
+ if (h != "mostleft" || h == "left" || h != "right") {
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ b.scale(VersionDesigner.config.scale[pos], VersionDesigner.config.scale[pos]);
+ b.translate(G.w / 2, G.h / 2);
+ b.rotate(i.props.angle);
+ b.translate(-G.w / 2, -G.h / 2);
+ b.translate((G.w - g.w) / 2, (G.h - g.h) / 2);
+ b.globalAlpha = i.shapeStyle.alpha;
+ if (c.type == "link") {
+ b.fillStyle = "#4183C4"
+ } else {
+ b.fillStyle = "#333"
+ }
+ if (c.showType == "text") {
+ b.fillStyle = c.color;
+ }
+ if (c.showType == "attr") {
+ b.fillStyle = c.color;
+ }
+ b.textBaseline = "middle";
+ if (D > i.props.w) {
+ var tempShapeWidth = i.props.w;
+ if (tempShapeWidth < 100) {
+ tempShapeWidth = 100;
+ }
+ H[0].width = tempShapeWidth + 10;
+ H[0].height = Math.ceil(D / tempShapeWidth) * 10 + 15;
+ for (var v = 0; v < Math.ceil(D / tempShapeWidth); v++) {
+ var tempL = (v + 1) * tempShapeWidth;
+ var tempX = 0;
+ if (c.showType == "text") {
+ b.fillStyle = c.color;
+ }
+ if (c.showType == "attr") {
+ b.fillStyle = c.color;
+ }
+ var tempY = a / 2 + v * 12;
+ if (tempL < D) {
+ b.fillText(y.substring(v * tempShapeWidth / (D / y.length), tempL / (D / y.length)), tempX, tempY);
+ } else {
+ b.fillText(y.substring(v * tempShapeWidth / (D / y.length), D / (D / y.length)), tempX, tempY);
+ }
+ }
+ if (h == "mostleft") {
+ d = -tempShapeWidth + tempShapeWidth * 0.2;
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ if (h == "left") {
+ H.css({
+ left: d,
+ top: e - 5
+ });
+ }
+ if (h == "left" && I != "bottom") {
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ if (h == "right") {
+ d = tempShapeWidth / 4;
+ H.css({
+ left: d,
+ top: e - 5
+ });
+ }
+ if (I == "mosttop" || I == "bottom") {
+ e = e - Math.ceil(D / tempShapeWidth) * 5;
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ if (h == "center" && Math.ceil(D / tempShapeWidth) > 1) {
+ H.css({
+ left: 15,
+ top: e
+ });
+ }
+ if (h == "right" && I != "mosttop" && I != "bottom") {
+ d = tempShapeWidth / 4;
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ } else {
+ if (h == "mostleft") {
+ d = -D;
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ if (h == "right") {
+ d = i.props.w - D;
+ H.css({
+ left: d,
+ top: e
+ });
+ }
+ b.fillText(y, 0, a / 2);
+ }
+ if (x != "") {
+ if (x.indexOf("") >= 0) {
+ var icon = x.split("|")[0];
+ var iconColor = x.split("|")[1];
+ b.font = "19px awsui-iconfont";
+ icon = eval("('" + icon.replace('', '\\u').replace(';', '') + "')");
+ b.fillStyle = iconColor;
+ b.fillText(icon, 0, a / 2);
+ iconCavCode = H[0].toDataURL("image/png");
+ c.iconCavCode = iconCavCode;
+ } else {
+ var J = "/images/data-attr/" + x + ".png";
+ var f = $(".shape_img[src='" + J + "']");
+ if (f.length == 0) {
+ f = $("
").appendTo("#shape_img_container")
+ }
+ if (f.attr("loaded") == "true") {
+ b.drawImage(f[0], g.w - 20, 0, 20, 20)
+ } else {
+ f.bind("load.drawshape",
+ function () {
+ $(this).attr("loaded", "true");
+ b.drawImage(f[0], g.w - 20, 0, 20, 20)
+ })
+ }
+ }
+ }
+ b.beginPath();
+ b.rect(0, 0, D, a);
+ b.closePath()
+ }
+ },
+ // 形状链接
+ renderShapeLink: function (o, q) {
+ o.find(".shape_link_point").remove();
+ if (q.link) {
+ let icon = $(`
`).appendTo(o)
+ }
+ },
+ // 形状附件
+ renderSahpeAttachment: function (pos, o, q) {
+ const allData = pos === 'left' ? versionData : curData
+ let shapeUpFile = allData.shapeUpFile[q.id].value, shapeRelationUpFile = allData.shapeRelationUpFile[q.id].value
+ o.find(".shape_attachment_point").remove()
+ if (shapeUpFile.length > 0 || shapeRelationUpFile.length > 0) {
+ let icon = $(`
`).appendTo(o)
+ }
+ },
+ drawControls: function (pos, m) {
+ let Model = PageModel[pos]
+ var n = $("#shape-controls-" + pos);
+ if (n.length == 0) {
+ var r = $("#designer-canvas-" + pos);
+ n = $(``).appendTo(r);
+ n.append(``);
+ n.append("");
+ n.append("");
+ n.append("");
+ n.append("");
+ n.append("");
+ n.append("");
+ n.append("");
+ n.append("");
+ $(".shape_controller").css({
+ "border-color": VersionDesigner.config.anchorColor,
+ width: VersionDesigner.config.anchorSize - 2,
+ height: VersionDesigner.config.anchorSize - 2
+ })
+ }
+ $(".shape_controller").css({
+ "z-index": Model.orderList.length + 3
+ });
+ n.show();
+ var p = 0;
+ var i;
+ var q;
+ if (m.length == 1) {
+ var l = Model.getShapeById(m[0]);
+ i = l.props;
+ p = l.props.angle;
+ q = l.resizeDir;
+ } else {
+ i = Utils.getControlBox(pos, m);
+ q = ["tl", "tr", "br", "bl"]
+ }
+ var t = true;
+ let pass = false;
+ // 查找是否有别的元素
+ const index = m.findIndex(item => {
+ return !(Model.getShapeById(item).hasOwnProperty('e2eContainerId'))
+ })
+ // 查找是否有范围选择框
+ const index1 = m.findIndex(item => {
+ return Model.getShapeById(item).name === 'scopeLimitation'
+ })
+ // 查找是否有范围选择框内元素
+ const index2 = m.findIndex(item => {
+ return Model.getShapeById(item).name !== 'scopeLimitation' && Model.getShapeById(item).hasOwnProperty('e2eContainerId')
+ })
+ if (index == -1 && index1 == -1 && index2 !== -1) {
+ pass = true
+ } else if (index2 !== -1) {
+ const rangeEles = m.filter(item => {
+ return Model.getShapeById(item).name !== 'scopeLimitation' && Model.getShapeById(item).hasOwnProperty('e2eContainerId')
+ })
+ let range = []
+ rangeEles.forEach(item => {
+ const index = m.findIndex(it => {
+ return it === Model.getShapeById(item).e2eContainerId
+ })
+ if (index == -1) {
+ pass = true
+ }
+ })
+ }
+ for (var o = 0; o < m.length; o++) {
+ var s = m[o];
+ var l = Model.getShapeById(s);
+ if (l.attribute && l.attribute.rotatable == false) {
+ t = false
+ }
+ if ((l.resizeDir && l.resizeDir.length == 0) || (l.parent && m.length > 1)) {
+ q = []
+ }
+ }
+ if (pass) {
+ t = false
+ q = []
+ }
+ this.controlStatus.rotatable = t;
+ this.controlStatus.resizeDir = q;
+ this.rotateControls(i, p, pos);
+ return n
+ },
+ rotateControls: function (R, E, pos) {
+ var O = $("#shape-controls-" + pos);
+ var N = Utils.getRotatedBox(R, E);
+ var i = N.w.toScale(pos);
+ var Q = N.h.toScale(pos);
+ O.css({
+ left: N.x.toScale(pos),
+ top: N.y.toScale(pos),
+ width: i,
+ height: Q
+ // "z-index": Model.orderList.length
+ });
+ var P = i + 20;
+ var K = Q + 20;
+ var S = $("#controls-bounding-" + pos);
+ S.attr({
+ width: P,
+ height: K
+ });
+ var J = S[0].getContext("2d");
+ J.lineJoin = "round";
+ if (this.controlStatus.resizeDir.length == 0) {
+ J.lineWidth = 2;
+ J.strokeStyle = VersionDesigner.config.selectorColor;
+ J.globalAlpha = 0.8
+ } else {
+ J.lineWidth = 1;
+ J.strokeStyle = VersionDesigner.config.selectorColor;
+ J.globalAlpha = 0.5
+ }
+ J.save();
+ J.clearRect(0, 0, P, K);
+ J.translate(P / 2, K / 2);
+ J.rotate(E);
+ J.translate(-P / 2, -K / 2);
+ J.translate(9.5, 9.5);
+ var W = {
+ x: Math.round((R.x - N.x).toScale(pos)),
+ y: Math.round((R.y - N.y).toScale(pos)),
+ w: Math.floor(R.w.toScale(pos) + 1),
+ h: Math.floor(R.h.toScale(pos) + 1)
+ };
+ J.strokeRect(W.x, W.y, W.w, W.h);
+ J.restore();
+ var A = 0 - VersionDesigner.config.anchorSize / 2;
+ var G = {};
+ R = Utils.toScale(pos, R);
+ N = Utils.toScale(pos, N);
+ var D = {
+ x: (R.x + R.w / 2),
+ y: R.y + R.h / 2
+ };
+ O.children(".shape_controller").hide();
+ for (var H = 0; H < this.controlStatus.resizeDir.length; H++) {
+ var L = this.controlStatus.resizeDir[H];
+ var X = O.children(".shape_controller[resizeDir=" + L + "]");
+ X.show();
+ var U, V;
+ if (L.indexOf("l") >= 0) {
+ U = R.x
+ } else {
+ if (L.indexOf("r") >= 0) {
+ U = R.x + R.w
+ } else {
+ U = R.x + R.w / 2
+ }
+ }
+ if (L.indexOf("t") >= 0) {
+ V = R.y
+ } else {
+ if (L.indexOf("b") >= 0) {
+ V = R.y + R.h
+ } else {
+ V = R.y + R.h / 2
+ }
+ }
+ var T = Utils.getRotated(D, {
+ x: U,
+ y: V
+ },
+ E);
+ X.css({
+ left: T.x - N.x + A,
+ top: T.y - N.y + A
+ })
+ }
+ var M = Math.PI / 8;
+ O.children(".shape_controller").removeClass("s n e w");
+ if (E > M && E <= M * 3) {
+ O.children("div[resizeDir=tl]").addClass("n");
+ O.children("div[resizeDir=tr]").addClass("e");
+ O.children("div[resizeDir=br]").addClass("s");
+ O.children("div[resizeDir=bl]").addClass("w");
+ O.children("div[resizeDir=l]").addClass("n w");
+ O.children("div[resizeDir=r]").addClass("s e");
+ O.children("div[resizeDir=b]").addClass("s w");
+ O.children("div[resizeDir=t]").addClass("n e")
+ } else {
+ if (E > M * 3 && E <= M * 5) {
+ O.children("div[resizeDir=tl]").addClass("n e");
+ O.children("div[resizeDir=tr]").addClass("s e");
+ O.children("div[resizeDir=br]").addClass("s w");
+ O.children("div[resizeDir=bl]").addClass("n w");
+ O.children("div[resizeDir=l]").addClass("n");
+ O.children("div[resizeDir=r]").addClass("s");
+ O.children("div[resizeDir=b]").addClass("w");
+ O.children("div[resizeDir=t]").addClass("e")
+ } else {
+ if (E > M * 5 && E <= M * 7) {
+ O.children("div[resizeDir=tl]").addClass("e");
+ O.children("div[resizeDir=tr]").addClass("s");
+ O.children("div[resizeDir=br]").addClass("w");
+ O.children("div[resizeDir=bl]").addClass("n");
+ O.children("div[resizeDir=l]").addClass("n e");
+ O.children("div[resizeDir=r]").addClass("s w");
+ O.children("div[resizeDir=b]").addClass("n w");
+ O.children("div[resizeDir=t]").addClass("s e")
+ } else {
+ if (E > M * 7 && E <= M * 9) {
+ O.children("div[resizeDir=tl]").addClass("s e");
+ O.children("div[resizeDir=tr]").addClass("s w");
+ O.children("div[resizeDir=br]").addClass("n w");
+ O.children("div[resizeDir=bl]").addClass("n e");
+ O.children("div[resizeDir=l]").addClass("e");
+ O.children("div[resizeDir=r]").addClass("w");
+ O.children("div[resizeDir=b]").addClass("n");
+ O.children("div[resizeDir=t]").addClass("s")
+ } else {
+ if (E > M * 9 && E <= M * 11) {
+ O.children("div[resizeDir=tl]").addClass("s");
+ O.children("div[resizeDir=tr]").addClass("w");
+ O.children("div[resizeDir=br]").addClass("n");
+ O.children("div[resizeDir=bl]").addClass("e");
+ O.children("div[resizeDir=l]").addClass("s e");
+ O.children("div[resizeDir=r]").addClass("n w");
+ O.children("div[resizeDir=b]").addClass("n e");
+ O.children("div[resizeDir=t]").addClass("s w")
+ } else {
+ if (E > M * 11 && E <= M * 13) {
+ O.children("div[resizeDir=tl]").addClass("s w");
+ O.children("div[resizeDir=tr]").addClass("n w");
+ O.children("div[resizeDir=br]").addClass("n e");
+ O.children("div[resizeDir=bl]").addClass("s e");
+ O.children("div[resizeDir=l]").addClass("s");
+ O.children("div[resizeDir=r]").addClass("n");
+ O.children("div[resizeDir=b]").addClass("e");
+ O.children("div[resizeDir=t]").addClass("w")
+ } else {
+ if (E > M * 13 && E <= M * 15) {
+ O.children("div[resizeDir=tl]").addClass("w");
+ O.children("div[resizeDir=tr]").addClass("n");
+ O.children("div[resizeDir=br]").addClass("e");
+ O.children("div[resizeDir=bl]").addClass("s");
+ O.children("div[resizeDir=l]").addClass("s w");
+ O.children("div[resizeDir=r]").addClass("n e");
+ O.children("div[resizeDir=b]").addClass("s e");
+ O.children("div[resizeDir=t]").addClass("n w")
+ } else {
+ O.children("div[resizeDir=tl]").addClass("n w");
+ O.children("div[resizeDir=tr]").addClass("n e");
+ O.children("div[resizeDir=br]").addClass("s e");
+ O.children("div[resizeDir=bl]").addClass("s w");
+ O.children("div[resizeDir=l]").addClass("w");
+ O.children("div[resizeDir=r]").addClass("e");
+ O.children("div[resizeDir=b]").addClass("s");
+ O.children("div[resizeDir=t]").addClass("n")
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ getLinkerMidpoint: function (z) {
+ var w = {};
+ if (z.linkerType == "normal") {
+ w = {
+ x: 0.5 * z.from.x + 0.5 * z.to.x,
+ y: 0.5 * z.from.y + 0.5 * z.to.y
+ }
+ } else {
+ if (z.linkerType == "curve") {
+ var d = z.from;
+ var q = z.points[0];
+ var v = z.points[1];
+ var x = z.to;
+ w = {
+ x: d.x * 0.125 + q.x * 0.375 + v.x * 0.375 + x.x * 0.125,
+ y: d.y * 0.125 + q.y * 0.375 + v.y * 0.375 + x.y * 0.125
+ }
+ } else {
+ var u = [];
+ u.push(z.from);
+ u = u.concat(z.points);
+ u.push(z.to);
+ var r = 0;
+ for (var A = 1; A < u.length; A++) {
+ var q = u[A - 1];
+ var v = u[A];
+ var y = Utils.measureDistance(q, v);
+ r += y
+ }
+ var s = r / 2;
+ var B = 0;
+ for (var A = 1; A < u.length; A++) {
+ var q = u[A - 1];
+ var v = u[A];
+ var y = Utils.measureDistance(q, v);
+ var t = B + y;
+ if (t > s) {
+ var p = (s - B) / y;
+ w = {
+ x: (1 - p) * q.x + p * v.x,
+ y: (1 - p) * q.y + p * v.y
+ };
+ break
+ }
+ B = t
+ }
+ }
+ }
+ return w
+ },
+ },
+ bindEvent: {
+ designerLayoutScroll: function (pos) {
+ let dom1 = $("#designer-layout-" + pos)
+ dom1.bind("scroll", function () {
+ Navigator.setView(pos);
+ if (isSameOperate) {
+ let otherPos = pos === "left" ? "right" : "left";
+ let dom2 = $("#designer-layout-" + otherPos);
+ dom2.scrollTop(dom1.scrollTop());
+ dom2.scrollLeft(dom1.scrollLeft());
+ }
+ });
+ }
+ },
+ setZoomScale: function (pos, newScale) {
+ if (newScale < 0.25) {
+ newScale = 0.25;
+ }
+ if (newScale > 4) {
+ newScale = 4;
+ }
+ VersionDesigner.config.scale[pos] = newScale;
+ VersionDesigner.initialize.initCanvas(pos);
+ let Model = PageModel[pos]
+ for (var shapeId in Model.define.elements) {
+ var shape = Model.define.elements[shapeId];
+ VersionDesigner.painter.renderShape(shape, pos);
+ }
+ //重新选中
+ var selectedIds = Utils.getSelectedIds(pos);
+ Utils.unselect(pos);
+ Utils.selectShape(pos, selectedIds);
+ // 绘制差异节点中的删除
+ let diffDelete = diffNode.filter(i => i.type.includes('delete'))
+ diffDelete.forEach(i => {
+ let shape = PageModel.left.getShapeById(i.id)
+ if (shape.name !== 'linker') {
+ VersionDesigner.painter.renderDiffNode(shape, 'right')
+ }
+ })
+ }
+}
+const PageModel = {
+ left: {
+ define: {
+ page: {
+ "padding": 60,
+ "backgroundColor": "255,255,255",
+ "gridSize": 15,
+ "width": 1600,
+ "showGrid": true,
+ "height": 2500
+ },
+ elements: {}
+ },
+ persistence: {},
+ orderList: [],
+ maxZIndex: 0,
+ linkerMap: {
+ map: {},
+ add: function (c, d) {
+ if (!this.map[c]) {
+ this.map[c] = []
+ }
+ if (this.map[c].indexOf(d) < 0) {
+ this.map[c].push(d)
+ }
+ },
+ remove: function (c, d) {
+ if (this.map[c]) {
+ Utils.removeFromArray(this.map[c], d)
+ }
+ },
+ empty: function () {
+ this.map = {}
+ }
+ },
+ groupMap: {
+ map: {},
+ add: function (d, c) {
+ this.map[d] = c
+ },
+ push: function (d, c) {
+ if (!this.map[d]) {
+ this.map[d] = []
+ }
+ this.map[d].push(c)
+ },
+ remove: function (b) {
+ delete this.map[b]
+ },
+ empty: function () {
+ this.map = {}
+ }
+ },
+ add: function (d, c) {
+ this.addMulti([d], c)
+ },
+ addMulti: function (shapes, popMsg) {
+ if (typeof popMsg == "undefined") {
+ popMsg = true;
+ }
+ var addShapes = [];
+ for (var i = 0; i < shapes.length; i++) {
+ var shape = shapes[i];
+ if (shape.name != "linker") {
+ //shape.textBlock = shape.getTextBlock();
+ shape.textBlockFinal = shape.getTextBlock();
+ }
+ addShapes.push(Utils.copy(shape));
+ this.define.elements[shape.id] = Utils.copy(shape);
+ // 重新创建,以免互相影响
+ this.persistence.elements[shape.id] = Utils.copy(shape);
+ }
+ this.build();
+ },
+ getShapeById: function (b) {
+ return this.define.elements[b]
+ },
+ getGroupShapes: function (b) {
+ return this.groupMap.map[b]
+ },
+ build: function () {
+ this.orderList = [];
+ this.linkerMap.empty();
+ for (var h in this.define.elements) {
+ var g = this.getShapeById(h);
+ this.orderList.push({
+ id: g.id,
+ zindex: g.props.zindex
+ });
+ if (g.name == "linker") {
+ if (g.from.id != null) {
+ this.linkerMap.add(g.from.id, g.id)
+ }
+ if (g.to.id != null) {
+ this.linkerMap.add(g.to.id, g.id)
+ }
+ }
+ if (g.group) {
+ this.groupMap.push(g.group, g.id)
+ }
+ }
+ this.orderList.sort(function i(a, b) {
+ return a.zindex - b.zindex;
+ });
+ for (var j = 0; j < this.orderList.length; j++) {
+ var h = this.orderList[j].id;
+ var g = this.getShapeById(h);
+ if (methodId === 'process.endtoend') {
+ $("#" + h).css("z-index", g.props.zindex);
+ } else {
+ $("#" + h).css("z-index", j);
+ }
+ }
+ var f = 0;
+ if (this.orderList.length > 0) {
+ f = this.orderList[this.orderList.length - 1].zindex
+ }
+ this.maxZIndex = f
+ },
+ },
+ right: {}
+}
+PageModel.right = deepCopy(PageModel.left)
+Number.prototype.toScale = function (pos) {
+ return this * VersionDesigner.config.scale[pos]
+};
+Number.prototype.restoreScale = function (pos) {
+ return this / VersionDesigner.config.scale[pos]
+};
+const Utils = {
+ selectIds: {
+ left: [],
+ right: []
+ },
+ selectShape: function (pos, s, w) {
+ let Model = PageModel[pos];
+ if (typeof s == "string") {
+ var o = s;
+ s = [];
+ s.push(o)
+ }
+ if (s.length <= 0) {
+ return
+ }
+ var r = Utils.mergeArray([], s);
+ for (var u = 0; u < s.length; u++) {
+ var p = Model.getShapeById(s[u]);
+ if (p && p.group) {
+ var x = Model.getGroupShapes(p.group);
+ Utils.mergeArray(r, x)
+ }
+ }
+ var z = [];
+ for (var u = 0; u < r.length; u++) {
+ var y = r[u];
+ var p = Model.getShapeById(y);
+ if (p && p.parent && p.resizeDir.length == 0 && z.indexOf(p.parent) < 0) {
+ z.push(p.parent)
+ } else {
+ if (z.indexOf(y) < 0) {
+ z.push(y)
+ }
+ }
+ }
+ s = z;
+ Utils.removeAnchors();
+ Utils.selectIds[pos] = [];
+ for (var q = 0; q < s.length; q++) {
+ var o = s[q];
+ var p = Model.getShapeById(o);
+ Utils.selectIds[pos].push(o);
+ if (p && p.name == "linker") {
+ if (this.isLocked(pos, p.id)) {
+ Utils.showLockers(pos, p)
+ } else {
+ VersionDesigner.painter.renderLinker(pos, p)
+ }
+ } else {
+ if (p && this.isLocked(pos, p.id)) {
+ Utils.showLockers(pos, p)
+ }
+ }
+ }
+ var z = Utils.getSelectedIds(pos);
+ var i = false;
+ if (z.length == 1) {
+ var t = Model.getShapeById(z[0]);
+ if (t.name == "linker") {
+ i = true;
+ }
+ }
+ if (z.length > 0 && !i) {
+ var v = VersionDesigner.painter.drawControls(pos, z)
+ }
+ if (typeof w == "undefined") {
+ w = true
+ }
+ if (this.selectCallback && w) {
+ this.selectCallback()
+ }
+ let pass = true
+ if (s.length === 1) {
+ const shape = Model.getShapeById(s[0]);
+ if (shape.hasOwnProperty('e2eContainerId') && shape.e2eContainerId !== "" && shape.name !== 'scopeLimitation') {
+ pass = false
+ } else {
+ pass = true
+ }
+ } else {
+ const shapes = []
+ for (let i = 0; i < s.length; i++) {
+ shapes.push(Model.getShapeById(s[i]));
+ }
+ const index = shapes.findIndex(item => {
+ return !item.hasOwnProperty('e2eContainerId') || item.name === 'scopeLimitation'
+ })
+ if (index == -1) {
+ pass = false
+ } else {
+ pass = true
+ }
+ }
+ // if (pass) {
+ // VersionDesigner.events.push("selectChanged");
+ // }
+ },
+ selectedOtherShape: function (pos) {
+ if (isSameOperate) {
+ let otherPos = pos === 'left' ? 'right' : 'left'
+ if (Utils.getSelectedIds(pos).length > 0) {
+ let selectedIds = Utils.getSelectedIds(pos)[0]
+ let ele = PageModel[otherPos].define.elements
+ if (ele[selectedIds]) {
+ Utils.unselect(otherPos);
+ Utils.selectShape(otherPos, selectedIds)
+ let layoutDom = $("#designer-layout-" + otherPos)
+ let layoutWidth = layoutDom.width(), layoutHeight = layoutDom.height(), layoutScrollTop = layoutDom.scrollTop(), layoutScrollLeft = layoutDom.scrollLeft()
+ let shapeDom = $("#designer-canvas-" + otherPos).find("#" + selectedIds)
+ let x = parseInt(shapeDom.css('left')), y = parseInt(shapeDom.css('top')), w = parseInt(shapeDom.css('width')), h = parseInt(shapeDom.css('height'))
+ let text = ''
+ if (layoutScrollLeft - 10 >= x + w / 2) {
+ text = 图元位于画布左侧可解除同步锁定查看
+ }
+ if (x - layoutScrollLeft >= layoutWidth - 20 - w / 2) {
+ text = 图元位于画布右侧可解除同步锁定查看
+ }
+ if (layoutScrollTop - 10 >= y + h / 2) {
+ text = 图元位于画布顶部可解除同步锁定查看
+ }
+ if (y - layoutScrollTop >= layoutHeight - 20 - h / 2) {
+ text = 图元位于画布底部可解除同步锁定查看
+ }
+ let tip = $('.shape-tip-' + otherPos)
+ if (text) {
+ tip.text(text)
+ tip.show()
+ }
+ }
+ } else {
+ Utils.unselect(otherPos)
+ }
+ versionCompareFun.updateAttributeView(otherPos)
+ }
+ },
+ getDarkerColor: function (q, m) {
+ if (!m) {
+ m = 13
+ }
+ var n = q.split(",");
+ var r = parseInt(n[0]);
+ var o = parseInt(n[1]);
+ var l = parseInt(n[2]);
+ var p = Math.round(r - r / 255 * m);
+ if (p < 0) {
+ p = 0
+ }
+ var g = Math.round(o - o / 255 * m);
+ if (g < 0) {
+ g = 0
+ }
+ var b = Math.round(l - l / 255 * m);
+ if (b < 0) {
+ b = 0
+ }
+ return p + "," + g + "," + b
+ },
+ getDarkestColor: function (b) {
+ return this.getDarkerColor(b, 26)
+ },
+ copy: function (b) {
+ return $.extend(true, {}, b)
+ },
+ getEndpointAngle: function (m, k) {
+ var i;
+ if (k == "from") {
+ i = m.from
+ } else {
+ i = m.to
+ }
+ var n;
+ if (m.linkerType == "normal") {
+ if (k == "from") {
+ n = m.to
+ } else {
+ n = m.from
+ }
+ } else {
+ if (m.linkerType == "broken") {
+ if (k == "from") {
+ n = m.points[0]
+ } else {
+ n = m.points[m.points.length - 1]
+ }
+ } else {
+ var l = 12;
+ var h;
+ var j = Utils.measureDistance(m.from, m.to);
+ if (k == "from") {
+ h = l / j
+ } else {
+ h = 1 - l / j
+ }
+ n = {
+ x: (1 - h) * (1 - h) * (1 - h) * m.from.x + 3 * (1 - h) * (1 - h) * h * m.points[0].x + 3 * (1 - h) * h * h * m.points[1].x + h * h * h * m.to.x,
+ y: (1 - h) * (1 - h) * (1 - h) * m.from.y + 3 * (1 - h) * (1 - h) * h * m.points[0].y + 3 * (1 - h) * h * h * m.points[1].y + h * h * h * m.to.y
+ }
+ }
+ }
+ return this.getAngle(n, i)
+ },
+ getAngle: function (f, e) {
+ var d = isNaN(Math.atan(Math.abs(f.y - e.y) / Math.abs(f.x - e.x))) ? 0 : Math.atan(Math.abs(f.y - e.y) / Math.abs(f.x - e.x));
+ if (e.x <= f.x && e.y > f.y) {
+ d = Math.PI - d
+ } else {
+ if (e.x < f.x && e.y <= f.y) {
+ d = Math.PI + d
+ } else {
+ if (e.x >= f.x && e.y < f.y) {
+ d = Math.PI * 2 - d
+ }
+ }
+ }
+ return d
+ },
+ getLinkerLineStyle: function (pos, a, b) {
+ let Model = PageModel[pos]
+ if (b == false || !Model.define.theme || !Model.define.theme.linker) {
+ return $.extend({}, Schema.linkerDefaults.lineStyle, a)
+ } else {
+ return $.extend({}, Schema.linkerDefaults.lineStyle, Model.define.theme.linker.lineStyle, a)
+ }
+ },
+ getShapeLineStyle: function (pos, a, b) {
+ let Model = PageModel[pos]
+ if (b == false || !Model.define.theme || !Model.define.theme.shape) {
+ return $.extend({}, Schema.shapeDefaults.lineStyle, a)
+ } else {
+ return $.extend({}, Schema.shapeDefaults.lineStyle, Model.define.theme.shape.lineStyle, a)
+ }
+ },
+ getShapeFillStyle: function (pos, a, b) {
+ let Model = PageModel[pos]
+ if (b == false || !Model.define.theme || !Model.define.theme.shape) {
+ return $.extend({}, Schema.shapeDefaults.fillStyle, a)
+ } else {
+ return $.extend({}, Schema.shapeDefaults.fillStyle, Model.define.theme.shape.fillStyle, a)
+ }
+ },
+ getRotated: function (n, h, j) {
+ var k = this.measureDistance(n, h);
+ if (k == 0 || j == 0) {
+ return h
+ }
+ var m = Math.atan(Math.abs(h.x - n.x) / Math.abs(n.y - h.y));
+ if (h.x >= n.x && h.y >= n.y) {
+ m = Math.PI - m
+ } else {
+ if (h.x <= n.x && h.y >= n.y) {
+ m = Math.PI + m
+ } else {
+ if (h.x <= n.x && h.y <= n.y) {
+ m = Math.PI * 2 - m
+ }
+ }
+ }
+ m = m % (Math.PI * 2);
+ var l = (m + j) % (Math.PI * 2);
+ var i = {
+ x: n.x + Math.sin(l) * k,
+ y: n.y - Math.cos(l) * k
+ };
+ return i
+ },
+ measureDistance: function (g, h) {
+ var e = h.y - g.y;
+ var f = h.x - g.x;
+ return Math.sqrt(Math.pow(e, 2) + Math.pow(f, 2))
+ },
+ isSelected: function (b, pos) {
+ if (this.selectIds[pos].indexOf(b) >= 0 && !this.isLocked(pos, b)) {
+ return true
+ }
+ return false
+ },
+ isLocked: function (pos, b) {
+ let Model = PageModel[pos]
+ if (Model.getShapeById(b) && Model.getShapeById(b).locked) {
+ return true
+ } else {
+ return false
+ }
+ },
+ getShapeBox: function (e) {
+ var d = e.props;
+ var f = e.props.angle;
+ return this.getRotatedBox(d, f)
+ },
+ getLinkerLinePoints: function (i) {
+ var f = [];
+ if (i.linkerType != "curve") {
+ f.push(i.from);
+ f = f.concat(i.points)
+ } else {
+ var j = 0.05;
+ var g = 0;
+ while (g <= 1) {
+ var h = {
+ x: (1 - g) * (1 - g) * (1 - g) * i.from.x + 3 * (1 - g) * (1 - g) * g * i.points[0].x + 3 * (1 - g) * g * g * i.points[1].x + g * g * g * i.to.x,
+ y: (1 - g) * (1 - g) * (1 - g) * i.from.y + 3 * (1 - g) * (1 - g) * g * i.points[0].y + 3 * (1 - g) * g * g * i.points[1].y + g * g * g * i.to.y
+ };
+ f.push(h);
+ g += j
+ }
+ }
+ f.push(i.to);
+ return f
+ },
+ getLinkerBox: function (l) {
+ var i = this.getLinkerLinePoints(l);
+ var o = i[0].x;
+ var p = i[0].y;
+ var q = i[0].x;
+ var r = i[0].y;
+ for (var n = 0; n < i.length; n++) {
+ var k = i[n];
+ if (k.x < o) {
+ o = k.x
+ } else {
+ if (k.x > q) {
+ q = k.x
+ }
+ }
+ if (k.y < p) {
+ p = k.y
+ } else {
+ if (k.y > r) {
+ r = k.y
+ }
+ }
+ }
+ var m = {
+ x: o,
+ y: p,
+ w: q - o,
+ h: r - p
+ };
+ return m
+ },
+ pointInLinker: function (q, t, s) {
+ var o = this.getLinkerLinePoints(t);
+ var v = {
+ x: q.x - s,
+ y: q.y
+ };
+ var w = {
+ x: q.x + s,
+ y: q.y
+ };
+ var x = {
+ x: q.x,
+ y: q.y - s
+ };
+ var m = {
+ x: q.x,
+ y: q.y + s
+ };
+ for (var u = 1; u < o.length; u++) {
+ var n = o[u - 1];
+ var p = o[u];
+ var r = this.checkCross(v, w, n, p);
+ if (r) {
+ return u
+ }
+ r = this.checkCross(x, m, n, p);
+ if (r) {
+ return u
+ }
+ }
+ return -1
+ },
+ getRotatedBox: function (p, r, u) {
+ if (r == 0) {
+ return p
+ } else {
+ if (!u) {
+ u = {
+ x: p.x + p.w / 2,
+ y: p.y + p.h / 2
+ }
+ }
+ var l = this.getRotated(u, {
+ x: p.x,
+ y: p.y
+ },
+ r);
+ var m = this.getRotated(u, {
+ x: p.x + p.w,
+ y: p.y
+ },
+ r);
+ var n = this.getRotated(u, {
+ x: p.x + p.w,
+ y: p.y + p.h
+ },
+ r);
+ var o = this.getRotated(u, {
+ x: p.x,
+ y: p.y + p.h
+ },
+ r);
+ var q = Math.min(l.x, m.x, n.x, o.x);
+ var t = Math.max(l.x, m.x, n.x, o.x);
+ var s = Math.min(l.y, m.y, n.y, o.y);
+ var v = Math.max(l.y, m.y, n.y, o.y);
+ return {
+ x: q,
+ y: s,
+ w: t - q,
+ h: v - s
+ }
+ }
+ },
+ newId: function () {
+ var c = Math.random();
+ var d = (c + new Date().getTime());
+ return d.toString(16).replace(".", "")
+ },
+ getRelativePos: function (h, e, g) {
+ var f = g.offset();
+ if (f == null) {
+ f = {
+ left: 0,
+ top: 0
+ }
+ }
+ return {
+ x: h - f.left + g.scrollLeft(),
+ y: e - f.top + g.scrollTop()
+ }
+ },
+ getShapeByPosition: function (pos, V, W, ab) {
+ let Model = PageModel[pos]
+ var at = [];
+ for (var x = Model.orderList.length - 1; x >= 0; x--) {
+ var S = Model.orderList[x].id;
+ var i = $("#designer-canvas-" + pos).find("#" + S);
+ var am = Model.getShapeById(S);
+ var ak = i.position();
+ var ac = V - ak.left;
+ var ad = W - ak.top;
+ var R = {
+ x: ak.left,
+ y: ak.top,
+ w: i.width(),
+ h: i.height()
+ };
+ var y = i.find(".shape_canvas")[0];
+ var av = y.getContext("2d");
+ var aB = this.pointInRect(V, W, R);
+ if (am.name == "linker") {
+ if (!aB) {
+ continue
+ }
+ if (ab) {
+ continue
+ }
+ var U = 10;
+ U = U.toScale(pos);
+ var ae = {
+ x: V - U,
+ y: W - U,
+ w: U * 2,
+ h: U * 2
+ };
+ if (this.pointInRect(am.to.x.toScale(pos), am.to.y.toScale(pos), ae)) {
+ var al = {
+ type: "linker_point",
+ point: "end",
+ shape: am
+ };
+ at.push(al);
+ } else {
+ if (this.pointInRect(am.from.x.toScale(pos), am.from.y.toScale(pos), ae)) {
+ var al = {
+ type: "linker_point",
+ point: "from",
+ shape: am
+ };
+ at.push(al);
+ } else {
+ var aj = i.find(".text_canvas");
+ var ah = aj.position();
+ var ae = {
+ x: ah.left,
+ y: ah.top,
+ w: aj.width(),
+ h: aj.height()
+ };
+ if (this.pointInRect(ac, ad, ae)) {
+ var al = {
+ type: "linker_text",
+ shape: am
+ };
+ at.push(al);
+ continue
+ }
+ U = 7;
+ U = U.toScale(pos);
+ var ag = this.pointInLinker({
+ x: V.restoreScale(pos),
+ y: W.restoreScale(pos)
+ },
+ am, U);
+ if (ag > -1) {
+ var al = {
+ type: "linker",
+ shape: am,
+ pointIndex: ag
+ };
+ at.push(al);
+ }
+ }
+ }
+ } else {
+ if (aB && am.locked && !ab) {
+ if (av.isPointInPath(ac, ad)) {
+ var al = {
+ type: "shape",
+ shape: am
+ };
+ at.push(al)
+ }
+ continue
+ }
+ var U = 7;
+ if (aB) {
+ U = U.toScale(pos);
+ var ae = {
+ x: V - U,
+ y: W - U,
+ w: U * 2,
+ h: U * 2
+ };
+ var Z = {
+ x: am.props.x + am.props.w / 2,
+ y: am.props.y + am.props.h / 2
+ };
+ var ao = am.getAnchors();
+ var al = null;
+ for (var aw = 0; aw < ao.length; aw++) {
+ var ay = ao[aw];
+ ay = this.getRotated(Z, {
+ x: am.props.x + ay.x,
+ y: am.props.y + ay.y
+ },
+ am.props.angle);
+ if (Utils.pointInRect(ay.x.toScale(pos), ay.y.toScale(pos), ae)) {
+ var an = Utils.getPointAngle(pos, S, ay.x, ay.y, U);
+ ay.angle = an;
+ al = {
+ type: "bounding",
+ shape: am,
+ linkPoint: ay
+ };
+ if (av.isPointInPath(ac, ad)) {
+ al.inPath = true
+ }
+ break
+ }
+ }
+ if (al != null) {
+ at.push(al);
+ continue
+ }
+ }
+ if (am.dataAttributes) {
+ var al = null;
+ for (var au = 0; au < am.dataAttributes.length; au++) {
+ var ap = am.dataAttributes[au];
+ if (ap.type == "link" && ap.showType && ap.showType != "none") {
+ var af = i.children("#attr_canvas_" + ap.id);
+ if (af.length > 0) {
+ var ai = af.position();
+ var X = ac - ai.left;
+ var Y = ad - ai.top;
+ var ar = af[0].getContext("2d");
+ if (ar.isPointInPath(X, Y)) {
+ al = {
+ type: "dataAttribute",
+ shape: am,
+ attribute: ap
+ };
+ break
+ }
+ }
+ }
+ }
+ if (al != null) {
+ at.push(al);
+ continue
+ }
+ }
+ if (!aB) {
+ continue
+ }
+ if (av.isPointInPath(ac, ad)) {
+ if (ab) {
+ var ao = am.getAnchors();
+ if (ao && ao.length) {
+ var al = {
+ type: "shape",
+ shape: am
+ };
+ at.push(al);
+ } else {
+ }
+ } else {
+ var al = {
+ type: "shape",
+ shape: am
+ };
+ at.push(al);
+ }
+ } else {
+ if (!am.attribute || typeof am.attribute.linkable == "undefined" || am.attribute.linkable) {
+ var an = Utils.getPointAngle(pos, S, V.restoreScale(pos), W.restoreScale(pos), U);
+ if (an != null) {
+ var al = null;
+ var aC = {
+ angle: an
+ };
+ for (var aa = 1; aa <= U; aa++) {
+ if (an == 0) {
+ aC.x = ac + aa;
+ aC.y = ad
+ } else {
+ if (an < Math.PI / 2) {
+ aC.x = ac + aa * Math.cos(an);
+ aC.y = ad + aa * Math.sin(an)
+ } else {
+ if (an == Math.PI / 2) {
+ aC.x = ac;
+ aC.y = ad + aa
+ } else {
+ if (an < Math.PI) {
+ aC.x = ac - aa * Math.sin(an - Math.PI / 2);
+ aC.y = ad + aa * Math.cos(an - Math.PI / 2)
+ } else {
+ if (an == Math.PI / 2) {
+ aC.x = ac - aa;
+ aC.y = ad
+ } else {
+ if (an < Math.PI / 2 * 3) {
+ aC.x = ac - aa * Math.cos(an - Math.PI);
+ aC.y = ad - aa * Math.sin(an - Math.PI)
+ } else {
+ if (an == Math.PI / 2 * 3) {
+ aC.x = ac;
+ aC.y = ad - aa
+ } else {
+ aC.x = ac + aa * Math.sin(an - Math.PI / 2 * 3);
+ aC.y = ad - aa * Math.cos(an - Math.PI / 2 * 3)
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ if (av.isPointInPath(aC.x, aC.y)) {
+ aC.x += ak.left;
+ aC.y += ak.top;
+ aC.x = aC.x.restoreScale(pos);
+ aC.y = aC.y.restoreScale(pos);
+ al = {
+ type: "bounding",
+ shape: am,
+ linkPoint: aC
+ };
+ break
+ }
+ }
+ if (al != null) {
+ at.push(al);
+ }
+ }
+ }
+ }
+ }
+ }
+ var al = null;
+ if (at.length == 1) {
+ al = at[0]
+ }
+ if (at.length > 1 && ab) {
+ al = at[0]
+ } else {
+ if (at.length > 1) {
+ var ax = at[0];
+ if (ax.type == "bounding" && ax.type != "linker_point" && ax.type != "linker") {
+ return ax
+ }
+ var ag = [];
+ var aA = [];
+ var aq = [];
+ for (var x = 0; x < at.length; x++) {
+ var T = at[x];
+ if (T.type == "bounding") {
+ aq.push(T)
+ } else {
+ if (T.type == "linker") {
+ ag.push(T)
+ } else {
+ if (T.type == "linker_point") {
+ aA.push(T)
+ }
+ }
+ }
+ }
+ if (aq.length > 0 && aA.length > 0) {
+ for (var x = 0; x < aq.length; x++) {
+ var T = aq[x];
+ if (T.inPath) {
+ al = T;
+ break
+ }
+ }
+ }
+ if (al == null && aA.length > 0) {
+ aA.sort(function az(a, b) {
+ if (Utils.isSelected(a.shape.id) && !Utils.isSelected(b.shape.id)) {
+ return -1
+ } else {
+ if (!Utils.isSelected(a.shape.id) && Utils.isSelected(b.shape.id)) {
+ return 1
+ } else {
+ return b.shape.props.zindex - a.shape.props.zindex
+ }
+ }
+ });
+ al = aA[0]
+ }
+ if (al == null && ag.length > 0) {
+ ag.sort(function az(a, b) {
+ if (Utils.isSelected(a.shape.id) && !Utils.isSelected(b.shape.id)) {
+ return -1
+ } else {
+ if (!Utils.isSelected(a.shape.id) && Utils.isSelected(b.shape.id)) {
+ return 1
+ } else {
+ return b.shape.props.zindex - a.shape.props.zindex
+ }
+ }
+ });
+ al = ag[0]
+ }
+ if (al == null) {
+ al = at[0]
+ }
+ }
+ }
+ return al
+ },
+ getCirclePoints: function (j, k, n) {
+ var l = Math.PI / 18;
+ var o = [];
+ for (var p = 0; p < 36; p++) {
+ var i = l * p;
+ var m = {
+ x: j - Math.cos(i) * n,
+ y: k - Math.sin(i) * n,
+ angle: i
+ };
+ o.push(m)
+ }
+ return o
+ },
+ getPointAngle: function (pos, r, i, p, F) {
+ var x = $("#" + r).position();
+ var y = Utils.getShapeContext(r);
+ i = i.toScale(pos) - x.left;
+ p = p.toScale(pos) - x.top;
+ var E = this.getCirclePoints(i, p, F);
+ var u = E.length;
+ var G = false;
+ for (var w = 0; w < u; w++) {
+ var D = E[w];
+ if (y.isPointInPath(D.x, D.y)) {
+ D.inPath = true;
+ G = true
+ } else {
+ D.inPath = false
+ }
+ }
+ if (G == false) {
+ return null
+ }
+ var C = null;
+ var z = null;
+ for (var w = 0; w < u; w++) {
+ var D = E[w];
+ if (!D.inPath) {
+ if (C == null) {
+ var A = E[(w - 1 + u) % u];
+ if (A.inPath) {
+ C = D.angle
+ }
+ }
+ if (z == null) {
+ var v = E[(w + 1 + u) % u];
+ if (v.inPath) {
+ z = D.angle
+ }
+ }
+ if (C != null && z != null) {
+ break
+ }
+ }
+ }
+ var H = (Math.PI * 2 + z - C) % (Math.PI * 2) / 2;
+ var B = (C + H) % (Math.PI * 2);
+ return B
+ },
+ checkCross: function (k, m, n, o) {
+ var j = false;
+ var l = (m.x - k.x) * (o.y - n.y) - (m.y - k.y) * (o.x - n.x);
+ if (l != 0) {
+ var p = ((k.y - n.y) * (o.x - n.x) - (k.x - n.x) * (o.y - n.y)) / l;
+ var d = ((k.y - n.y) * (m.x - k.x) - (k.x - n.x) * (m.y - k.y)) / l;
+ if ((p >= 0) && (p <= 1) && (d >= 0) && (d <= 1)) {
+ j = true
+ }
+ }
+ return j
+ },
+ pointInRect: function (d, e, f) {
+ if (d >= f.x && d <= f.x + f.w && e >= f.y && e <= f.y + f.h) {
+ return true
+ }
+ return false
+ },
+ unselect: function (pos) {
+ let Model = PageModel[pos];
+ var h = this.selectIds[pos];
+ this.selectIds[pos] = [];
+ for (var e = 0; e < h.length; e++) {
+ var g = h[e];
+ var f = Model.getShapeById(g);
+ if (f.name == "linker") {
+ VersionDesigner.painter.renderLinker(pos, f)
+ }
+ }
+ Utils.removeLockers()
+ $("#shape-controls-" + pos).hide();
+ },
+ mergeArray: function (e, f) {
+ for (var h = 0; h < f.length; h++) {
+ var g = f[h];
+ if (e.indexOf(g) < 0) {
+ e.push(g)
+ }
+ }
+ return e
+ },
+ removeAnchors: function () {
+ $(".shape_contour").remove()
+ },
+ getSelectedIds: function (pos) {
+ var e = [];
+ for (var d = 0; d < this.selectIds[pos].length; d++) {
+ var f = this.selectIds[pos][d];
+ e.push(f)
+ }
+ return e
+ },
+ toScale: function (pos, f) {
+ var e = {};
+ for (var d in f) {
+ e[d] = f[d];
+ if (typeof f[d] == "number") {
+ e[d] = e[d].toScale(pos)
+ }
+ }
+ return e
+ },
+ getShapeContext: function (c) {
+ var d = document.getElementById(c)
+ return d.getElementsByTagName("canvas")[0].getContext("2d")
+ },
+ getControlBox: function (pos, l) {
+ let Model = PageModel[pos];
+ var j = {
+ x1: null,
+ y1: null,
+ x2: null,
+ y2: null
+ };
+ for (var h = 0; h < l.length; h++) {
+ var k = l[h];
+ var i = Model.getShapeById(k);
+ var m;
+ if (i.name == "linker") {
+ m = this.getLinkerBox(i)
+ } else {
+ m = this.getShapeBox(i)
+ }
+ if (j.x1 == null || m.x < j.x1) {
+ j.x1 = m.x
+ }
+ if (j.y1 == null || m.y < j.y1) {
+ j.y1 = m.y
+ }
+ if (j.x2 == null || m.x + m.w > j.x2) {
+ j.x2 = m.x + m.w
+ }
+ if (j.y2 == null || m.y + m.h > j.y2) {
+ j.y2 = m.y + m.h
+ }
+ }
+ var n = {
+ x: j.x1,
+ y: j.y1,
+ w: j.x2 - j.x1,
+ h: j.y2 - j.y1
+ };
+ return n
+ },
+ getSelected: function (pos) {
+ let Model = PageModel[pos];
+ var f = [];
+ for (var e = 0; e < this.selectIds[pos].length; e++) {
+ var g = this.selectIds[pos][e];
+ if (!Utils.isLocked(pos, g)) {
+ var h = Model.getShapeById(g);
+ f.push(h)
+ }
+ }
+ return f
+ },
+ showLockers: function (pos, s) {
+ var m = $("#" + s.id);
+ var q = m.position();
+
+ function t() {
+ var c = $("").appendTo(m);
+ var a = c[0].getContext("2d");
+ a.strokeStyle = "#777";
+ a.lineWidth = 1;
+ var b = 9;
+ a.beginPath();
+ a.moveTo(2, 2);
+ a.lineTo(b, b);
+ a.moveTo(2, b);
+ a.lineTo(b, 2);
+ a.stroke();
+ return c
+ }
+
+ function r(b) {
+ var a = t();
+ a.css({
+ left: b.x.toScale(pos) - q.left - 5,
+ top: b.y.toScale(pos) - q.top - 5
+ })
+ }
+
+ if (s.name != "linker") {
+ var u = s.props;
+ var v = {
+ x: u.x + u.w / 2,
+ y: u.y + u.h / 2
+ };
+ var l = this.getRotated(v, {
+ x: u.x,
+ y: u.y
+ },
+ s.props.angle);
+ r(l);
+ var n = this.getRotated(v, {
+ x: u.x + u.w,
+ y: u.y
+ },
+ s.props.angle);
+ r(n);
+ var o = this.getRotated(v, {
+ x: u.x + u.w,
+ y: u.y + u.h
+ },
+ s.props.angle);
+ r(o);
+ var p = this.getRotated(v, {
+ x: u.x,
+ y: u.y + u.h
+ },
+ s.props.angle);
+ r(p)
+ } else {
+ r(s.from);
+ r(s.to)
+ }
+ },
+ removeLockers: function () {
+ $(".shape_locker").remove()
+ }
+}
+const GradientHelper = {
+ createLinearGradient: function (m, j, k) {
+ var q = m.props;
+ var p;
+ var n;
+ var o;
+ if (q.w > q.h) {
+ p = {
+ x: 0,
+ y: q.h / 2
+ };
+ n = {
+ x: q.w,
+ y: q.h / 2
+ };
+ o = (k.angle + Math.PI / 2) % (Math.PI * 2)
+ } else {
+ p = {
+ x: q.w / 2,
+ y: 0
+ };
+ n = {
+ x: q.w / 2,
+ y: q.h
+ };
+ o = k.angle
+ }
+ if (o != 0) {
+ var r = {
+ x: q.w / 2,
+ y: q.h / 2
+ };
+ p = Utils.getRotated(r, p, o);
+ n = Utils.getRotated(r, n, o);
+ if (p.x < 0) {
+ p.x = 0
+ }
+ if (p.x > m.props.w) {
+ p.x = m.props.w
+ }
+ if (p.y < 0) {
+ p.y = 0
+ }
+ if (p.y > m.props.h) {
+ p.y = m.props.h
+ }
+ if (n.x < 0) {
+ n.x = 0
+ }
+ if (n.x > m.props.w) {
+ n.x = m.props.w
+ }
+ if (n.y < 0) {
+ n.y = 0
+ }
+ if (n.y > m.props.h) {
+ n.y = m.props.h
+ }
+ }
+ var l = j.createLinearGradient(p.x, p.y, n.x, n.y);
+ l.addColorStop(0, "rgb(" + k.beginColor + ")");
+ l.addColorStop(1, "rgb(" + k.endColor + ")");
+ return l
+ },
+};
+var Navigator = {
+ /**
+ * 初始化
+ */
+ init: function (pos) {
+ VersionDesigner.bindEvent.designerLayoutScroll(pos)
+ // 绑定拖动
+ $("#navigation-eye-" + pos).bind("mousedown", function (downE) {
+ var eye = $(this);
+ var beginPos = eye.position();
+ // 先取消滚动事件
+ $("#designer-layout-" + pos).unbind("scroll");
+ var layout = $("#designer-layout-" + pos);
+ var beginTop = layout.scrollTop();
+ var beginLeft = layout.scrollLeft();
+ // 设计器画布
+ var designerCanvas = $("#designer-canvas-" + pos);
+ var canvasW = designerCanvas.width();
+ var canvasH = designerCanvas.height();
+ // 鹰眼视图画布
+ var canvas = $("#navigation-canvas-" + pos);
+ var navW = canvas.width();
+ var navH = canvas.height();
+ // 宽高比例
+ var scaleW = canvasW / navW;
+ var scaleH = canvasH / navH;
+ $(document).bind("mousemove.navigator", function (moveE) {
+ var offsetX = moveE.pageX - downE.pageX;
+ var offsetY = moveE.pageY - downE.pageY;
+ var newLeft = beginLeft + offsetX * scaleW;
+ layout.scrollLeft(newLeft);
+ var newTop = beginTop + offsetY * scaleH;
+ layout.scrollTop(newTop);
+ eye.css({
+ left: beginPos.left + offsetX,
+ top: beginPos.top + offsetY
+ });
+ if (isSameOperate) {
+ let otherPos = pos === "left" ? "right" : "left";
+ let otherLayout = $("#designer-layout-" + otherPos);
+ let otherEye = $("#navigation-eye-" + otherPos);
+ otherLayout.scrollLeft(newLeft);
+ otherLayout.scrollTop(newTop);
+ otherEye.css({
+ left: beginPos.left + offsetX,
+ top: beginPos.top + offsetY
+ })
+ }
+ });
+ $(document).bind("mouseup.navigator", function (moveE) {
+ $(document).unbind("mousemove.navigator");
+ $(document).unbind("mouseup.navigator");
+ Navigator.setView(pos);
+ // 重新绑定
+ VersionDesigner.bindEvent.designerLayoutScroll(pos)
+ });
+ });
+ $("#navigation-canvas-" + pos).bind("click", function (e) {
+ var point = Utils.getRelativePos(e.pageX, e.pageY, $(this));
+ // 设计器画布
+ var designerCanvas = $("#designer-canvas-" + pos);
+ var canvasW = designerCanvas.width();
+ var canvasH = designerCanvas.height();
+ // 鹰眼视图画布
+ var canvas = $("#navigation-canvas-" + pos);
+ var navW = canvas.width();
+ var navH = canvas.height();
+ // 宽高比例
+ var scaleW = canvasW / navW;
+ var scaleH = canvasH / navH;
+ // 得到点击位置,相对于设计器画布的坐标
+ var canvasX = point.x * scaleW;
+ var canvasY = point.y * scaleH;
+ // 把点击坐标,置于屏幕中心
+ var layout = $("#designer-layout-" + pos);
+ var margin = VersionDesigner.config.pageMargin;
+ layout.scrollLeft(canvasX + margin - layout.width() / 2);
+ layout.scrollTop(canvasY + margin - layout.height() / 2);
+ });
+ this.setView(pos);
+ },
+ /**
+ * 绘制鹰眼视图
+ */
+ drawNavigationTimeout: {
+ left: null,
+ right: null
+ },
+ draw: function (pos) {
+ let Model = PageModel[pos];
+ if (this.drawNavigationTimeout[pos]) {
+ window.clearTimeout(this.drawNavigationTimeout[pos]);
+ }
+ this.drawNavigationTimeout[pos] = setTimeout(function () {
+ var canvas = $("#navigation-canvas-" + pos);
+ var ctx = canvas[0].getContext("2d");
+ ctx.save();
+ ctx.clearRect(0, 0, canvas.width(), canvas.height());
+ ctx.scale(canvas.width() / Model.define.page.width, canvas
+ .height()
+ / Model.define.page.height);
+ // 从最底层开始绘制图形
+ for (var i = 0; i < Model.orderList.length; i++) {
+ var shapeId = Model.orderList[i].id;
+ var shape = Model.getShapeById(shapeId);
+ ctx.save();
+ if (shape.name != "linker") {
+ // 对图形执行绘制
+ var p = shape.props;
+ var style = shape.lineStyle;
+ ctx.translate(p.x, p.y);
+ ctx.translate(p.w / 2, p.h / 2);
+ ctx.rotate(p.angle);
+ ctx.translate(-(p.w / 2), -(p.h / 2));
+ ctx.globalAlpha = shape.shapeStyle.alpha;
+ VersionDesigner.painter.renderShapePath(pos, ctx, shape);
+ } else {
+ var linker = shape;
+ var style = linker.lineStyle;
+ var points = linker.points;
+ var from = linker.from;
+ var to = linker.to;
+ ctx.beginPath();
+ ctx.moveTo(from.x, from.y);
+ if (linker.linkerType == "curve") {
+ var cp1 = points[0];
+ var cp2 = points[1];
+ ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y,
+ to.x, to.y);
+ } else {
+ for (var j = 0; j < points.length; j++) {
+ // 如果是折线,会有折点
+ var linkerPoint = points[j];
+ ctx.lineTo(linkerPoint.x, linkerPoint.y);
+ }
+ ctx.lineTo(to.x, to.y);
+ }
+ ctx.lineWidth = style.lineWidth;
+ ctx.strokeStyle = "rgb(" + style.lineColor + ")";
+ ctx.stroke();
+ }
+ ctx.restore();
+ }
+ ctx.restore();
+ Navigator.setView(pos);
+ this.drawNavigationTimeout = {
+ left: null,
+ right: null
+ };
+ }, 100);
+ },
+ /**
+ * 设置鹰眼视图
+ */
+ setView: function (pos) {
+ var navigator = $("#navigation-eye-" + pos);
+ // 设计器可见视图
+ var layout = $("#designer-layout-" + pos);
+ var viewW = layout.width();
+ var viewH = layout.height();
+ // 鹰眼视图画布
+ var canvas = $("#navigation-canvas-" + pos);
+ var navW = canvas.width();
+ var navH = canvas.height();
+ // 设计器画布
+ var designerCanvas = $("#designer-canvas-" + pos);
+ var canvasW = designerCanvas.width();
+ var canvasH = designerCanvas.height();
+ var margin = VersionDesigner.config.pageMargin;
+ // 得到设计器画布在可视窗口中的left, top
+ var visibleLeft = margin - layout.scrollLeft();
+ var visibleRight = visibleLeft + canvasW;
+ if (visibleLeft < 0) {
+ visibleLeft = 0;
+ } else if (visibleLeft > viewW) {
+ visibleLeft = viewW;
+ }
+ if (visibleRight > viewW) {
+ visibleRight = viewW;
+ } else if (visibleRight < 0) {
+ visibleRight = 0;
+ }
+ var visibleTop = margin - layout.scrollTop();
+ var visibleBottom = visibleTop + canvasH;
+ if (visibleTop < 0) {
+ visibleTop = 0;
+ } else if (visibleTop > viewH) {
+ visibleTop = viewH;
+ }
+ if (visibleBottom > viewH) {
+ visibleBottom = viewH;
+ } else if (visibleBottom < 0) {
+ visibleBottom = 0;
+ }
+ var visibleW = visibleRight - visibleLeft;
+ var visibleH = visibleBottom - visibleTop;
+ if (visibleW == 0 || visibleH == 0) {
+ // 画布已经不可见
+ navigator.hide();
+ } else {
+ // 换算成鹰眼视图中的left, top
+ var navLeft = layout.scrollLeft() - margin;
+ if (navLeft < 0) {
+ navLeft = 0;
+ }
+ navLeft = navLeft * (navW / canvasW);
+ var navTop = layout.scrollTop() - margin;
+ if (navTop < 0) {
+ navTop = 0;
+ }
+ navTop = navTop * (navH / canvasH);
+ var navViewW = visibleW * (navW / canvasW);
+ var navViewH = visibleH * (navH / canvasH);
+ navigator.css({
+ left: navLeft - 1,
+ top: navTop - 1,
+ width: navViewW,
+ height: navViewH
+ }).show();
+ }
+ }
+};
+$(function () {
+ VersionDesigner.init('left')
+ VersionDesigner.init('right')
+ Navigator.init('left');
+ Navigator.init('right');
+})
+Schema.initShapeFunctions = function (shape) {
+ var pathEval = "shape.getPath = function(pos){var color = [255,255,255];var fillStyle = Utils.getShapeFillStyle(pos,this.fillStyle, false);if(fillStyle.color && fillStyle.color.length > 0){color = fillStyle.color.split(',');}var r = color[0]; var g = color[1]; var b = color[2]; var a = color[3] || 1,radial = 'radial',linear = 'linear';var w = this.props.w; var height = this.props.height; var h = this.props.h;var lineStyle = Utils.getShapeLineStyle(pos,this.lineStyle, false); var lineWidth = lineStyle.lineWidth; ";
+ pathEval += SchemaHelper.constructPathFunBody(shape.path) + "}";
+ eval(pathEval);
+ var block = shape.textBlock;
+ var textEval = "shape.getTextBlock = function(){var w = this.props.w; var h = this.props.h; var height = this.props.height; return {x:";
+ textEval += block.x + ",y:" + block.y + ",w:" + block.w + ",h:" + block.h + "}}";
+ eval(textEval);
+ var anchorsEval = "shape.getAnchors = function(){var w = this.props.w; var h = this.props.h; return [";
+ for (var i = 0; i < shape.anchors.length; i++) {
+ var anchor = shape.anchors[i];
+ anchorsEval += "{x:" + anchor.x + ", y:" + anchor.y + "}";
+ if (i < shape.anchors.length - 1) {
+ anchorsEval += ","
+ }
+ }
+ anchorsEval += "];}";
+ eval(anchorsEval)
+}
+Schema.init(true);
+Schema.initMarkers();
+
+function deepCopy(obj) {
+ if (typeof obj !== 'object' || obj === null) {
+ return obj;
+ }
+ let newObj = Array.isArray(obj) ? [] : {}
+ for (let key in obj) {
+ if (obj.hasOwnProperty(key)) {
+ newObj[key] = deepCopy(obj[key]);
+ }
+ }
+ return newObj;
+}
\ No newline at end of file
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.methods.debug.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.methods.debug.js
new file mode 100644
index 00000000..7bab33ad
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/diagraming/versionCompare/version.methods.debug.js
@@ -0,0 +1,785 @@
+/**
+ * 业务代码
+ */
+
+// main页面打开版本列表
+const versionListFun = {
+ versionList: [],
+ historyList: [],
+ openVersionList() {
+ let page = $("#versionList")
+ if (page.length > 0) {
+ this.closeVersionList()
+ return
+ }
+ $(``).appendTo("#designer_header")
+ this.loadVersionList()
+ },
+ loadVersionList() {
+ function versionItem(item) {
+ return `
+
+
+
+ ${item.versionNo} ${item.versionStatus1}
+ ${item.updateTime}${item.updateUser}${修改}
+
+
+ ${item.createTime}
+ ${由}${item.createUser}${创建}
+
+
+
+ ${item.hasCreatePerm ? `
` : ''}
+
+
+
+
+
+ `
+ }
+
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_list',
+ sid: sid,
+ wsId: wsId,
+ teamId: teamId,
+ id: ruuid
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ const status = {
+ use: 设计中,
+ publish: 已发布,
+ stop: 已停用,
+ approval: 审核中,
+ designer: 设计
+ }
+ let versionList = res.data.versionList, historyList = res.data.historyList
+ versionList.forEach(item => {
+ item.versionStatus1 = status[item.versionStatus]
+ })
+ historyList.forEach(item => {
+ item.versionStatus1 = status[item.versionStatus]
+ })
+ versionListFun.versionList = [...versionList]
+ versionListFun.historyList = [...historyList]
+ let str = ''
+ versionList.forEach(item => {
+ str += versionItem(item)
+ })
+ if (historyList.length > 0) {
+ str += `${历史版本}
`
+ historyList.forEach(item => {
+ str += versionItem({...item, isHistory: true})
+ })
+ }
+ $("#versionList").empty()
+ $("#versionList").append(str)
+ }
+ }
+ })
+ },
+ closeVersionList() {
+ if ($("#versionList")) {
+ $("#versionList").remove()
+ }
+ },
+ // 创建新版本
+ createNewVersion(event, item) {
+ event.stopPropagation()
+ if (versionListFun.historyList.length > 0 && isBpmSupportMinor != 'true') { // 不支持小版本迭代
+ $.confirm({
+ title: 提示,
+ content: `${确定将} ${item.versionNo} ${item.isHistory ? 历史版本为模板创建新版本文件 : 版本为模板创建新版本文件}?`,
+ onConfirm: function () {
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_manager_create',
+ sid: sid,
+ wsId: wsId,
+ teamId: teamId,
+ id: item.plId,
+ isLargeIteration: true,
+ isHistory: item.isHistory || false
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ versionListFun.loadVersionList()
+ }
+ }
+ })
+ }
+ })
+ } else {
+ let {plId, versionNo} = item
+ let selectVersion = $("#select_" + plId)
+ if (selectVersion.is(":visible")) {
+ selectVersion.empty()
+ selectVersion.hide()
+ return
+ }
+ $(".select-version").hide()
+ selectVersion.show()
+ let smallVersionInteger = parseInt(versionNo.match(/\d+\.\d+/g)[0]); // 小版本整数位
+ let smallVersionDecimal; // 小版本小数位
+ let arr1 = []; // 大版本号
+ let arr2 = []; // 以当前版本为大版本的所有小版本
+ let largeVersion, smallVersion
+ let allVersion = versionListFun.versionList.concat(versionListFun.historyList).map(item => item.versionNo.match(/\d+\.\d+/g)[0].split('.'))
+ allVersion.forEach(item => {
+ arr1.push(parseInt(item[0]))
+ if (item[0] == smallVersionInteger) {
+ arr2.push(parseInt(item[1]))
+ }
+ })
+ smallVersionDecimal = Math.max(...arr2) + 1
+ largeVersion = 'v' + (Math.max(...arr1) + 1).toFixed(1)
+ if (item.isHistory) {
+ smallVersion = 'v' + Math.max(...arr1) + '.' + smallVersionDecimal
+ } else {
+ smallVersion = 'v' + smallVersionInteger + '.' + smallVersionDecimal
+ }
+ selectVersion.html(`
+ ${请选择版本号}:
+
+
+ ${largeVersion}
+
+
+
+ ${smallVersion}
+
+ `)
+ $("input[name='versionRadio']").on("click", function (event) {
+ event.stopPropagation()
+ let isLargeIteration = $(this).attr("isLargeIteration") == 'true'
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_manager_create',
+ sid: sid,
+ wsId: wsId,
+ teamId: teamId,
+ id: item.plId,
+ isLargeIteration: isLargeIteration,
+ isHistory: item.isHistory || false
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ let newId = res.data.uuid
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_manager_use',
+ sid: sid,
+ wsId: wsId,
+ teamId: teamId,
+ id: newId,
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ let currentURL = window.location.href
+ let url = new URL(currentURL)
+ let searchParams = new URLSearchParams(url.search)
+ searchParams.set('uuid', newId);
+ url.search = searchParams.toString()
+ window.location.href = url.toString()
+ }
+ }
+ })
+ }
+ }
+ })
+ });
+ }
+ },
+ // 打开版本对比
+ openComparePage(event, item) {
+ event.stopPropagation()
+ let compareBox = $("#versionCompareBox")
+ compareBox.empty()
+ compareBox.show()
+ let str = '';
+ compareBox.append(str);
+ $('#versionCompareContent').attr(
+ 'src', "./w?sid=" + sid
+ + "&cmd=com.actionsoft.apps.coe.pal_pl_repository_designer_version_compare"
+ + "&wsId=" + wsId
+ + "&compareVerId=" + item.plId
+ + "&curId=" + ruuid
+ + "&teamId=" + teamId
+ // 添加子页面所需参数:是否为历史版本
+ + "&isHistory=" + item.isHistory
+ )
+ versionListFun.closeVersionList()
+ },
+ // 关闭版本对比
+ closeComparePage() {
+ parent.$("#versionCompareBox").hide()
+ parent.$("#versionCompareBox").empty()
+ },
+ // 切换版本
+ switchVersion(event, item) {
+ event.stopPropagation()
+ if ($("#saving_tip").text() == 文件已修改未保存) {
+ $.confirm({
+ title: 提示,
+ content: 文件修改未保存 + ',' + 是否继续切换,
+ onConfirm: function () {
+ versionListFun.changeCurVersion(item.plId)
+ }
+ })
+ } else {
+ versionListFun.changeCurVersion(item.plId)
+ }
+ },
+ changeCurVersion(uuid) {
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_manager_use',
+ sid: sid,
+ wsId: wsId,
+ teamId: teamId,
+ id: uuid,
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ let currentURL = window.location.href
+ let url = new URL(currentURL)
+ let searchParams = new URLSearchParams(url.search)
+ searchParams.set('uuid', uuid);
+ url.search = searchParams.toString()
+ window.location.href = url.toString()
+ }
+ }
+ })
+ }
+}
+// 版本对比页面
+const designerZoomYl = {
+ left: 100,
+ right: 100
+}
+const fileTabStr = `
+
+ `
+const shapeTabStr = `
+
+
+ `
+const versionCompareFun = {
+ // 缩放
+ pageZoom(position, type) {
+ function handleZoom(position, type) {
+ if (type == 'zoomIn') {
+ if (designerZoomYl[position] + 10 > 200) {
+ designerZoomYl[position] = 200;
+ } else {
+ designerZoomYl[position] = designerZoomYl[position] + 10;
+ }
+ } else if (type == 'zoomOut') {
+ if (designerZoomYl[position] - 10 < 50) {
+ designerZoomYl[position] = 50;
+ } else {
+ designerZoomYl[position] = designerZoomYl[position] - 10;
+ }
+ } else {
+ designerZoomYl[position] = 100;
+ }
+ VersionDesigner.setZoomScale(position, designerZoomYl[position] / 100);
+ $("#zoom-value-" + position).text(Math.round(VersionDesigner.config.scale[position] * 100) + '%')
+ }
+
+ handleZoom(position, type)
+ if (isSameOperate) {
+ let otherPos = position === "left" ? "right" : "left";
+ designerZoomYl[otherPos] = designerZoomYl[position]
+ VersionDesigner.setZoomScale(otherPos, designerZoomYl[position] / 100);
+ $("#zoom-value-" + otherPos).text(Math.round(VersionDesigner.config.scale[otherPos] * 100) + '%')
+ }
+ },
+ // 鹰眼导航
+ openNavigation: function (position, isShow) {
+ function handleNav(position, isShow) {
+ if (isShow) {
+ $("#navigation-view-" + position).show()
+ Navigator.draw(position)
+ $('#show-nav-' + position).hide()
+ $('#close-nav-' + position).show()
+ } else {
+ $("#navigation-view-" + position).hide()
+ $('#show-nav-' + position).show()
+ $('#close-nav-' + position).hide()
+ }
+ }
+
+ handleNav(position, isShow)
+ if (isSameOperate) {
+ let otherPos = position === "left" ? "right" : "left";
+ handleNav(otherPos, isShow)
+ }
+ },
+ openAttributeView: function (position) {
+ function handleAttrView(position) {
+ let selectedLength = Utils.getSelected(position).length
+ let view = $("#attribute-view-" + position)
+ let headLeft = view.find('.head-left')
+ if (selectedLength > 0) {
+ headLeft.attr('viewType', 'shape')
+ headLeft.html(shapeTabStr)
+ versionCompareFun.writeShapeAttributeHtml(position)
+ } else {
+ headLeft.attr('viewType', 'file')
+ headLeft.html(fileTabStr)
+ versionCompareFun.writeFileAttributeHtml(position)
+ }
+ view.show()
+ let btn = $("#view-btn-" + position)
+ btn.find('.btn-text').remove()
+ btn.css('width', '45px')
+ btn.hide()
+ versionCompareFun.attrViewEvent(position)
+ }
+
+ handleAttrView(position)
+ if (isSameOperate) {
+ let otherPos = position === "left" ? "right" : "left";
+ handleAttrView(otherPos)
+ }
+ },
+ closeAttributeView: function (position) {
+ $("#attribute-view-" + position).hide()
+ $("#view-btn-" + position).show()
+ if (isSameOperate) {
+ let otherPos = position === "left" ? "right" : "left";
+ $("#attribute-view-" + otherPos).hide()
+ $("#view-btn-" + otherPos).show()
+ }
+ },
+ // view事件
+ attrViewEvent: function (position) {
+ let otherPos = position === "left" ? "right" : "left";
+ let view = $("#attribute-view-" + position), viewBody = $("#view-body-" + position)
+ let otherView = $("#attribute-view-" + otherPos)
+ // tab点击
+ view.find(".head-left").off("click").on("click", ".attr-tab", function () {
+ view.find(".head-left div.active-tab").removeClass("active-tab");
+ $(this).addClass("active-tab");
+ let activeTab = $(this).attr("tab")
+ viewBody.children().css('display', 'none')
+ viewBody.find('.view-' + activeTab).show()
+ if (isSameOperate) {
+ if (otherView.is(":visible")) {
+ let curType = $(this).parent().attr("viewType") // 当前是文件属性还是数据属性 file/shape
+ let otherViewHead = otherView.find('.head-left'), otherViewBody = $("#view-body-" + otherPos), otherType = otherViewHead.attr("viewType")
+ if (curType === otherType) {
+ updateActiveTab(otherViewHead, otherViewBody, activeTab)
+ } else {
+ if (curType === 'shape') {
+ let selectedId = Utils.getSelectedIds(position)[0]
+ if (PageModel[otherPos].define.elements[selectedId]) {
+ Utils.selectShape(otherPos, selectedId)
+ versionCompareFun.updateAttributeView(otherPos)
+ updateActiveTab(otherViewHead, otherViewBody, activeTab)
+ }
+ } else {
+ Utils.unselect(otherPos)
+ versionCompareFun.updateAttributeView(otherPos)
+ updateActiveTab(otherViewHead, otherViewBody, activeTab)
+ }
+ }
+ }
+ }
+
+ function updateActiveTab(otherViewHead, otherViewBody, activeTab) {
+ otherViewHead.children().removeClass("active-tab")
+ otherViewHead.find(`div[tab=${activeTab}]`).addClass("active-tab")
+ otherViewBody.children().css('display', 'none')
+ otherViewBody.find('.view-' + activeTab).show()
+ }
+ })
+ // 内容滚动
+ viewBody.off("scroll").on("scroll", function () {
+ if (isSameOperate) {
+ if (otherView.is(":visible")) {
+ let otherViewBody = $("#view-body-" + otherPos)
+ otherViewBody.scrollTop($(this).scrollTop())
+ }
+ }
+ })
+ },
+ // 点击画布更新属性页面
+ updateAttributeView: function (position) {
+ let view = $("#attribute-view-" + position)
+ let headLeft = view.find('.head-left')
+ let viewType = headLeft.attr('viewType') // 当前是文件属性还是数据属性 file/shape
+ if (view.is(":visible")) {
+ let selectedLength = Utils.getSelected(position).length
+ if (viewType === 'file') { // 已经打开了文件属性窗口
+ if (selectedLength > 0) {
+ headLeft.html(shapeTabStr)
+ headLeft.attr('viewType', 'shape')
+ this.writeShapeAttributeHtml(position)
+ }
+ } else { // 已经打开了数据属性窗口
+ if (selectedLength > 0) {
+ this.writeShapeAttributeHtml(position)
+ } else {
+ headLeft.html(fileTabStr)
+ headLeft.attr('viewType', 'file')
+ this.writeFileAttributeHtml(position)
+ }
+ }
+ this.attrViewEvent(position)
+ }
+ },
+ // 文件属性
+ writeFileAttributeHtml: function (position) {
+ const view = $("#attribute-view-" + position)
+ const activeTab = view.find(".active-tab").attr("tab")
+ let body = $("#view-body-" + position)
+ body.empty()
+ let allData = position === 'left' ? versionData : curData
+ let attr = allData.fileAttr, upFile = allData.fileUpFile, relationUpFile = allData.fileRelationUpFile
+ let attrStr = this.getAttrStr(position, attr)
+ let bodyStr = `
+ ${attrStr === '' ? `
${暂无文件属性}
` : `${attrStr}`}
+
+
+ ${this.getAttrStr(position, [{type: 'file', name: 附件, value: upFile.value, isDiff: upFile.isDiff,}])}
+ ${this.getAttrStr(position, [{type: 'file', name: 关联附件, value: relationUpFile.value, isDiff: relationUpFile.isDiff}])}
+
`
+ body.html(bodyStr)
+ body.find('.view-' + activeTab).show()
+ // 追加差异样式
+ view.find(".tab-name").removeClass('attr-diff')
+ if (attr && attr.some(i => i.isDiff)) {
+ view.find('div[tab=attr]').find('.tab-name').addClass('attr-diff')
+ }
+ },
+ // 形状属性
+ writeShapeAttributeHtml: function (position) {
+ const view = $("#attribute-view-" + position)
+ const activeTab = view.find(".active-tab").attr("tab")
+ let body = $("#view-body-" + position)
+ body.empty()
+ let shape = Utils.getSelected(position)[0]
+ const allData = position === 'left' ? versionData : curData
+ let attributeArr = allData.shapeAttr[shape.id] || [],
+ shapeUpFile = allData.shapeUpFile[shape.id] || {},
+ shapeRelationUpFile = allData.shapeRelationUpFile[shape.id] || {},
+ shapeLink = allData.shapeLink[shape.id] || {file: {}, custom: {}}
+ let attrStr = this.getAttrStr(position, attributeArr)
+ let bodyStr = `
+ ${attrStr === '' ? `
${暂无形状属性}
` : `${attrStr}`}
+
+
+ ${this.getAttrStr(position, [{type: 'file', name: 附件, value: shapeUpFile.value, isDiff: shapeUpFile.isDiff,}])}
+ ${this.getAttrStr(position, [{type: 'file', name: 关联附件, value: shapeRelationUpFile.value, isDiff: shapeRelationUpFile.isDiff}])}
+
+
+ ${this.getAttrStr(position, [{type: 'shapeLink', name: 文件链接, value: shapeLink.file.value, isDiff: shapeLink.file.isDiff}])}
+ ${this.getAttrStr(position, [{type: 'shapeLink', name: 自定义链接, value: shapeLink.custom.value, isDiff: shapeLink.custom.isDiff}])}
+
`
+ body.html(bodyStr)
+ body.find('.view-' + activeTab).show()
+ // 追加差异样式
+ view.find(".tab-name").removeClass('attr-diff')
+ if (attributeArr.some(i => i.isDiff)) {
+ view.find('div[tab=attr]').find('.tab-name').addClass('attr-diff')
+ }
+ if (shapeUpFile.isDiff || shapeRelationUpFile.isDiff) {
+ view.find('div[tab=upFile]').find('.tab-name').addClass('attr-diff')
+ }
+ if (shapeLink.file.isDiff || shapeLink.custom.isDiff) {
+ view.find('div[tab=link]').find('.tab-name').addClass('attr-diff')
+ }
+ },
+ getAttrStr: function (position, attr) {
+ let str = ''
+ if (!attr) return str;
+ attr.forEach(item => {
+ if (item.type === 'relation' || item.type === 'awsorg') {
+ item.value = item.value.toString()
+ }
+ let contentStr = ''
+ switch (item.type) {
+ case 'table':
+ if (item.value) {
+ let tableStr = ''
+ let table = JSON.parse(item.value).table
+ let t1 = table[0].name, t2 = table[0].desc
+ tableStr += ``
+ for (let i = 1; i < table.length; i++) {
+ let t1 = table[i].name, t2 = table[i].desc
+ tableStr += ``
+ }
+ contentStr = `${tableStr}
`
+ } else {
+ contentStr = `${暂无}${item.name}
`
+ }
+ break;
+ case 'file':
+ let isHighSecurity = false
+ let fileList = item.value || []
+ let listStr = ''
+ fileList.forEach(item => {
+ let security = '' // 三元
+ if (isHighSecurity) {
+ security = `${item.securityInfo.name}`
+ }
+ listStr += `
+
+ ${item.fileName}
+ ${security}
+
+
+
`
+ })
+ contentStr = `${listStr === '' ? `${暂无}${item.name}` : listStr}
`
+ break;
+ case 'link':
+ contentStr = `
+ ${item.value === '' ? `${暂无}${item.name}` : `
${item.value}`}
+
`
+ break;
+ case 'shapeLink':
+ let linkStr = '', list = item.value || []
+ list.forEach(i => {
+ linkStr += ``
+ })
+ contentStr = `${linkStr === '' ? `${暂无}${item.name}` : linkStr}
`
+ break;
+ default:
+ contentStr = `
+ ${item.value === '' ? `${暂无}${item.name}` : `${item.value}`}
+
`
+ }
+ str += `
+
${item.name}
+ ${contentStr}
+
`
+ })
+ return str
+ },
+ // 预览
+ previewFile(position, file) {
+ const imgType = ['jpg', 'jpeg', 'gif', 'png']
+ const fileType = file.fileName.split('.').reverse()[0]
+ if (!imgType.includes(fileType)) { // 不是图片
+ window.open(file.downloadUrl)
+ return
+ }
+ $("#attribute-view-" + position).css('opacity', 0)
+ $('#model-' + position).show()
+ const otherPos = position === 'left' ? 'right' : 'left'
+ const windowWidth = document.body.clientWidth
+ const dialog = $('#file-preview-' + position), otherDialog = $('#file-preview-' + otherPos)
+ const img = new Image()
+ img.src = file.downloadUrl
+ img.addEventListener('load', function () {
+ dialog.find('img').attr('src', img.src)
+ dialog.dialog({
+ title: file.fileName,
+ width: 650,
+ height: 480,
+ model: false,
+ onClose: function () {
+ $('#model-' + position).hide()
+ $("#attribute-view-" + position).css('opacity', 1)
+ }
+ })
+ let dialogWidth = dialog.outerWidth(true), otherDialogWidth = otherDialog.outerWidth(true)
+ let x = windowWidth / 2 / 2 - dialogWidth / 2
+ if (position === 'right') {
+ x += windowWidth / 2
+ }
+ dialog.css({
+ left: x + 'px'
+ })
+ if (otherDialog.is(":visible")) {
+ // dialog机制会把已经打开的dialog居中 这里重新设置一下
+ let x = windowWidth / 2 / 2 - otherDialogWidth / 2
+ if (otherPos === 'right') {
+ x += windowWidth / 2
+ }
+ otherDialog.css({
+ left: x + 'px'
+ })
+ }
+ })
+ },
+ // 同步操作
+ isOpenSameOperate(isOpen) {
+ isSameOperate = isOpen
+ if (isOpen) {
+ $('.opend-operate').show()
+ $('.closed-operate').hide()
+ } else {
+ $('.opend-operate').hide()
+ $('.closed-operate').show()
+ }
+ },
+ // 版本列表
+ openCompareList() {
+ versionCompareFun.closeAttributeView('left')
+ versionCompareFun.closeAttributeView('right')
+ let page = $("#compareVersionList")
+ if (page.is(":visible")) {
+ page.hide()
+ page.empty()
+ } else {
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_list',
+ sid: parent.sid,
+ wsId: parent.wsId,
+ teamId: parent.teamId,
+ id: parent.ruuid
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ const status = {
+ use: 设计中,
+ publish: 已发布,
+ stop: 已停用,
+ approval: 审核中,
+ designer: 设计
+ }
+ let versionList = res.data.versionList, historyList = res.data.historyList
+ versionList.forEach(item => {
+ item.versionStatus1 = status[item.versionStatus]
+ })
+ historyList.forEach(item => {
+ item.isHistory = true
+ item.versionStatus1 = status[item.versionStatus]
+ })
+ let allList = versionList.concat(historyList)
+ page.empty()
+ let str = ''
+ allList.forEach(item => {
+ let isDisabled = item.versionNo === versionData.versionNo || item.versionNo === curData.versionNo
+ str += `
+
+
+
+ ${item.versionNo} ${item.versionStatus1}
+
+
+ ${item.updateTime} ${由}${item.updateUser}${修改}
+
+
+
+ ${item.versionNo === versionData.versionNo ? '' : ''}
+
+
+ `
+ })
+ page.append(str)
+ page.show()
+ }
+ }
+ })
+ }
+ },
+ // 点击监听 关闭版本列表
+ closeVersionListByClick(event) {
+ let page = $("#compareVersionList")
+ if (!page.is(":visible")) {
+ return;
+ }
+ let targetElement = event.target; // 获取被点击的元素
+ let isClickInsideDropdown = document.getElementById('compareVersionList').contains(targetElement); // 检查点击是否在下拉框内
+ let isClickOnButton = document.querySelector('.center-top').contains(targetElement); // 检查点击是否在触发按钮内
+ if (!isClickInsideDropdown && !isClickOnButton) {
+ // 关闭下拉框
+ page.hide()
+ page.empty()
+ }
+ },
+ // 切换对比版本
+ changeComparePageUrl($this, compareVerId, isHistory) {
+ if ($($this).hasClass('disabled')) return
+ let listBox = $("#compareVersionList"), iframe = parent.$('#versionCompareContent')
+ listBox.hide()
+ listBox.empty()
+ parent.$.simpleAlert(正在切换, 'loading')
+ iframe.attr(
+ 'src', "./w?sid=" + parent.sid
+ + "&cmd=com.actionsoft.apps.coe.pal_pl_repository_designer_version_compare"
+ + "&wsId=" + parent.wsId
+ + "&compareVerId=" + compareVerId
+ + "&curId=" + curData.plId
+ + "&teamId=" + parent.teamId
+ // 添加子页面所需参数:是否为历史版本
+ + "&isHistory=" + isHistory
+ )
+ iframe.on('load', function () {
+ parent.$.simpleAlert("close")
+ })
+ },
+ // 切换到该版本
+ changeToSelectedV() {
+ $.confirm({
+ title: 提示,
+ content: 是否将 + ` ${versionData.versionNo} ` + 切换为使用中,
+ onConfirm: function () {
+ awsui.ajax.request({
+ url: './jd',
+ method: 'POST',
+ data: {
+ cmd: 'com.actionsoft.apps.coe.pal_pl_repository_designer_version_manager_use',
+ sid: parent.sid,
+ wsId: parent.wsId,
+ teamId: parent.teamId,
+ id: versionData.plId,
+ },
+ ok: function (res) {
+ if (res.result === 'ok') {
+ let currentURL = parent.window.location.href
+ let url = new URL(currentURL)
+ let searchParams = new URLSearchParams(url.search)
+ searchParams.set('uuid', versionData.plId);
+ url.search = searchParams.toString()
+ parent.window.location.href = url.toString()
+ }
+ }
+ })
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.versionCompare.css b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.versionCompare.css
new file mode 100644
index 00000000..1c9d721b
--- /dev/null
+++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/themes/default/diagraming/designer.versionCompare.css
@@ -0,0 +1,643 @@
+.compare-main {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 9999
+}
+
+.versionList {
+ position: absolute;
+ top: 45px;
+ right: 75px;
+ width: 430px;
+ height: 310px;
+ padding: 10px;
+ overflow: auto;
+ background: #fff;
+ box-shadow: 0px 6px 18px 0px rgba(0, 21, 44, 0.1);
+ border-radius: 8px;
+ z-index: 9999;
+}
+
+.compare-version-list {
+ position: absolute;
+ top: 40px;
+ left: -131px;
+ width: 290px;
+ height: 310px;
+ padding: 10px;
+ overflow: auto;
+ background: #fff;
+ box-shadow: 0px 6px 18px 0px rgba(0, 21, 44, 0.1);
+ border-radius: 8px;
+ z-index: 9999;
+}
+
+.version-item {
+ height: 60px;
+ margin-bottom: 2px;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ padding: 0 14px 0 18px
+}
+
+.disabled {
+ background: #f2f2f2 !important;
+ color: #c0c4cc;
+ cursor: not-allowed;
+}
+
+.version-state-use {
+ color: #4E7FF9
+}
+
+.version-state-publish {
+ color: #1FDD00
+}
+
+.version-state-stop {
+ color: #E02020
+}
+
+.version-state-approval {
+ color: #FF8F0B
+}
+
+.version-state-designer {
+ color: #8592A6
+}
+
+.version-item:hover {
+ background: #F1F6FF;
+}
+
+.version-item:hover .version-icon {
+ visibility: visible;
+}
+
+.version-content {
+ flex: 1
+}
+
+.version-content .left-span {
+ display: inline-block;
+ width: 90px;
+}
+
+.version-content .top-info {
+ font-size: 14px;
+ padding: 3px 0;
+}
+
+.version-content .bottom-info {
+ color: #8592A6;
+ font-size: 12px;
+}
+
+.version-content .update-user-name {
+ display: inline-block;
+ max-width: 80px;
+ padding: 0 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.version-content .create-user-name {
+ display: inline-block;
+ max-width: 150px;
+ padding: 0 5px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.version-icon {
+ position: relative;
+ width: 85px;
+ visibility: hidden;
+}
+
+.version-icon i {
+ font-size: 17px;
+ cursor: pointer;
+ color: #8592A6;
+}
+
+.select-version {
+ display: none;
+ position: absolute;
+ top: 23px;
+ left: -110px;
+ width: 140px;
+ height: 100px;
+ font-size: 14px;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+ border-radius: 4px;
+ padding: 10px 15px;
+ box-sizing: border-box;
+ z-index: 1;
+}
+
+.history-title {
+ border-top: 1px solid #D9D9D9;
+ margin-top: 5px;
+ font-weight: 500;
+ font-size: 14px;
+ color: #333333;
+ padding: 12px 0 12px 20px;
+}
+
+
+
+
+/********************************** 下面是版本对比页面 ******************************************************/
+
+.flex-center {
+ display: flex;
+ align-items: center;
+ justify-content: space-between
+}
+
+.page-head {
+ height: 60px;
+ padding: 0 10px;
+}
+
+.left,
+.right {
+ flex: 1;
+ display: flex;
+}
+
+.page-head .method-icon {
+ display: inline-block;
+ color: white;
+ width: 30px;
+ height: 30px;
+ margin: 0 10px;
+ border-radius: 3px;
+ text-align: center;
+ line-height: 30px;
+}
+
+.page-head .left-right {
+ min-width: 90px;
+ padding: 0 5px;
+ height: 34px;
+ line-height: 34px;
+ background: #FFFFFF;
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #DDDDDD;
+ text-align: center;
+ margin-right: 15px;
+ cursor: pointer;
+}
+
+.page-head .left-center {
+ height: 40px;
+ width: 100px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.page-head .update-time {
+ font-size: 12px;
+ color: #8592A6;
+}
+
+.center-top {
+ font-size: 14px;
+ cursor: pointer;
+}
+
+.same-operate {
+ width: 26px;
+ height: 26px;
+ line-height: 26px;
+ border-radius: 2px;
+ color: #fff;
+ text-align: center;
+ cursor: pointer;
+ box-shadow: 5px -5px 0px 0px #83AEFF;
+}
+
+.opend-operate {
+ background: #2978FF;
+ box-shadow: 5px -5px 0px 0px #83AEFF;
+}
+
+.closed-operate {
+ background: #5B606A;
+ box-shadow: 5px -5px 0px 0px #A0AAB5;
+}
+
+.designer-wrapper {
+ position: relative;
+ width: 50%;
+ height: calc(100vh - 60px - 35px);
+ border-top: 1px solid #666;
+}
+
+.version-designer-layout {
+ width: 100%;
+ height: 100%;
+ background: url(../images/diagraming/canvas_bg.jpg) repeat;
+ overflow: auto;
+}
+
+.version-canvas_container {
+ padding: 10px;
+}
+
+.version-canvas {
+ position: relative;
+ background: #fff;
+ width: 100%;
+ height: 100%;
+ cursor: default;
+}
+
+.version-footer {
+ height: 35px;
+ display: flex;
+}
+
+.footer-half {
+ position: relative;
+ height: 100%;
+ width: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.footer-half .zoom-value {
+ display: inline-block;
+ font-size: 14px;
+ width: 50px;
+ text-align: center;
+ cursor: pointer;
+}
+
+.footer-half i {
+ cursor: pointer;
+ margin: 0 10px;
+ user-select: none;
+}
+
+.shape_box {
+ position: absolute;
+}
+
+.text_canvas {
+ position: absolute;
+ padding: 0px;
+ border: none;
+ background: transparent;
+ cursor: inherit;
+ overflow: hidden;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+}
+
+.attr_canvas {
+ position: absolute;
+}
+
+input,
+textarea {
+ resize: none;
+ outline: none;
+ font-size: 13px;
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.shape-controls {
+ position: absolute;
+}
+
+.shape-controls .controls-bounding {
+ position: absolute;
+ left: -10px;
+ top: -10px;
+}
+
+.shape_controller {
+ position: absolute;
+ border-style: solid;
+ border-width: 1px;
+ background: white;
+}
+
+.shape_locker {
+ position: absolute;
+}
+
+.diff-icon-wrapper {
+ position: absolute;
+ left: 0;
+ top: -23px;
+ z-index: 200;
+}
+
+.diff-icon-span {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ border-radius: 50%;
+ text-align: center;
+ margin-right: 4px;
+}
+
+.diff-icon-span i {
+ color: #fff;
+ font-size: 14px;
+}
+
+.shape_link_point {
+ cursor: pointer;
+ position: absolute;
+ right: -14px;
+ bottom: -0px;
+ width: 10px;
+ height: 10px;
+ color: #515151;
+}
+
+.shape_attachment_point {
+ cursor: pointer;
+ position: absolute;
+ right: -14px;
+ bottom: 16px;
+ width: 10px;
+ height: 10px;
+}
+
+/********************************** 鹰眼视图开始 ***************************************/
+.version-dock_view {
+ display: none;
+ position: absolute;
+ top: -200px;
+ right: 20px;
+ width: 220px;
+ background: #f5f5f5;
+ border: 1px solid #999;
+ -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.33);
+ -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.33);
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.33);
+}
+
+.navigation_bounding {
+ padding: 10px 0px;
+ overflow: hidden;
+}
+
+.navigation_view_container {
+ margin: 0px auto;
+ position: relative;
+ width: 120px;
+}
+
+.navigation_canvas {
+ background: white;
+ border: 1px solid #888;
+}
+
+.navigation_eye {
+ position: absolute;
+ border: 2px solid #6EB1EB;
+ top: 0px;
+ left: 0px;
+ width: 100px;
+ height: 80px;
+}
+
+/********************************** 鹰眼视图结束 ***************************************/
+
+.attribute-view {
+ display: none;
+ position: absolute;
+ right: 2px;
+ top: 2px;
+ height: calc(100% - 4px);
+ width: 390px;
+ background: #FFFFFF;
+ box-shadow: -6px 0px 18px 0px rgba(0, 0, 0, 0.1);
+ z-index: 299;
+}
+
+.attribute-view-btn {
+ position: absolute;
+ right: 0;
+ top: 30px;
+ width: 40px;
+ height: 40px;
+ background: #FFFFFF;
+ box-shadow: 0 2px 10px 0 rgba(227, 233, 241, 0.7);
+ border-radius: 25px 0 0 25px;
+ border: 1px solid #DFE5F0;
+ padding: 0 5px 0 8px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ /*transition: width .1s ease-in-out;*/
+ user-select: none;
+ z-index: 299;
+}
+
+.attribute-view-btn .btn-icon {
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ pointer-events: none;
+}
+
+.attribute-view .view-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 54px;
+ padding: 0 16px;
+ border-bottom: 1px solid #DFE5F0;
+ font-size: 14px;
+ font-weight: 500;
+}
+
+.view-head .head-left {
+ height: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.attr-tab {
+ height: 100%;
+ display: flex;
+ align-items: center;
+ margin-right: 15px;
+ border-bottom: solid 2px transparent;
+}
+
+.attr-tab .tab-name {
+ padding: 3px;
+ cursor: pointer;
+}
+
+.head-right i {
+ cursor: pointer;
+ font-size: 12px;
+ color: #4C576C;
+}
+
+.active-tab {
+ cursor: default;
+ border-bottom: solid 2px #4e7ff9;
+ color: #4e7ff9;
+}
+
+.attribute-view .view-body {
+ box-sizing: border-box;
+ padding: 8px;
+ height: calc(100% - 54px);
+ overflow: auto;
+}
+
+.category-item {
+ padding: 8px;
+ margin-bottom: 2px;
+}
+
+.attr-diff {
+ background: rgba(255, 143, 11, 0.15);
+ border: 2px dashed #FF8F0B;
+}
+
+.category-item .attr-title {
+ font-weight: 500;
+ font-size: 14px;
+ color: #333333;
+ margin-bottom: 10px;
+}
+
+.category-item .category-content {
+ background: #F5F5F5;
+ border-radius: 4px;
+ padding: 5px 10px;
+ min-height: 15px;
+}
+
+.attr-table-content {
+ border-radius: 4px 4px 0 0;
+ border: 1px solid #D9D9D9;
+}
+
+.attr-table-content .table-header {
+ display: flex;
+ height: 32px;
+ line-height: 32px;
+ background: #F5F5F5;
+ border-radius: 4px 4px 0 0;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.table-header div {
+ text-align: center;
+}
+
+.attr-table-content .table-row {
+ display: flex;
+ border-bottom: 1px solid #D9D9D9;
+}
+
+.category-item .table-row:last-child {
+ border-bottom: none;
+}
+
+.table-row div {
+ padding: 6px 5px;
+}
+
+.attr-table-content .left-tr {
+ box-sizing: border-box;
+ width: 110px;
+ border-right: 1px solid #D9D9D9;
+}
+
+.attr-table-content .right-tr {
+ flex: 1;
+}
+
+.file-item {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 5px;
+}
+
+.name-box {
+ width: calc(100% - 30px);
+ display: flex;
+ align-items: center;
+}
+
+.name-box .name-content {
+ display: inline-block;
+ max-width: calc(100% - 30px);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.file-item .file-menu {
+ visibility: hidden;
+}
+
+.file-item:hover .file-menu {
+ cursor: pointer;
+ visibility: visible;
+}
+
+.dialog-model {
+ position: absolute;
+ top: 60px;
+ width: 50%;
+ height: calc(100% - 60px);
+ background: #fff;
+ z-index: 299;
+ opacity: 0.6;
+}
+
+.shape-tip {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 299;
+ color: #E02020;
+ writing-mode: vertical-rl;
+ text-align: center;
+ padding: 35px 6px;
+ background: #FFFCFC;
+ letter-spacing: 3px;
+ display: none;
+}
+
+.shape-tip-left {
+ right: 0;
+ clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 calc(100% - 30px));
+}
+
+.shape-tip-right {
+ left: 0;
+ clip-path: polygon(0 0, 100% 30px, 100% calc(100% - 30px), 0 100%);
+}
\ No newline at end of file