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> + + + + + +

+ +
+ + + + +
+
+
+ +
+
+
+
+ + +
Arial
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+ + + + + + + + + +
+
+
+
+ +
+
V<#processVersion>
+
<#versionName>
+
+ +
+
+ +
+ + + + +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ : +
+
+
+ : +
+
+
+
+
+ +
+ : +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
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>
+
<#checkouttime>,
+
+
+
+ + + + + + + + + + + + + + + + + + + + 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("&#x") >= 0) { + var icon = x.split("|")[0]; + var iconColor = x.split("|")[1]; + b.font = "19px awsui-iconfont"; + icon = eval("('" + icon.replace('&#x', '\\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 = ` + ` + 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 = ` + + ` + 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 += `
+
${t1}
+
${t2}
+
` + for (let i = 1; i < table.length; i++) { + let t1 = table[i].name, t2 = table[i].desc + tableStr += `
+
${t1}
+
${t2}
+
` + } + 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 += `
+
+ ${i.value} +
+
` + }) + 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