diff --git a/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.core.debug.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.core.debug.js new file mode 100644 index 00000000..fab58bd8 --- /dev/null +++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/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/versionCompare/version.core.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.core.js new file mode 100644 index 00000000..ecc5e418 --- /dev/null +++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.core.js @@ -0,0 +1 @@ +const VersionDesigner={config:{panelItemWidth:30,panelItemHeight:30,pageMargin:10,anchorSize:8,rotaterSize:9,anchorColor:"#833",selectorColor:"#833",scale:{left:1,right:1}},init(e){this.initialize.initModel(e),this.initialize.initCanvas(e),this.initialize.initPageShapes(e),this.initialize.initEvent(e)},initialize:{initModel:function(e){let t=pageDefinition[e],i=PageModel[e];null!=t&&null!=t.localAttribute?i.define.localAttribute=t.localAttribute:i.define.localAttribute={},null!=t&&null!=t.commonShapeConfig?i.define.commonShapeConfig=t.commonShapeConfig:i.define.commonShapeConfig={},i.shapeTemplateObj={},i.persistence={page:Utils.copy(i.define.page),elements:{},localAttribute:{},commonShapeConfig:{}}},initCanvas:function(e){let t=PageModel[e];var i=t.define.page.width.toScale(e),a=t.define.page.height.toScale(e),n=t.define.page.backgroundColor,r=Utils.getDarkerColor(n),s=Utils.getDarkestColor(n);$("#designer-canvas-"+e).css({"background-color":"rgb("+r+")"});var o=$("#designer-grids-"+e);o.attr({width:i,height:a});var l=o[0].getContext("2d");l.clearRect(0,0,i,a);var h=t.define.page.padding.toScale(e),d=i-2*h,p=a-2*h;l.fillStyle="rgb("+n+")",l.beginPath(),l.rect(h,h,d,p),l.fill();var c=Math.round(t.define.page.gridSize.toScale(e));if(c<10&&(c=10),t.define.page.showGrid){l.translate(h,h),l.lineWidth=1,l.save();for(var f=.5,g=0;f<=p;)l.restore(),l.strokeStyle=g%4==0?"rgb("+s+")":"rgb("+r+")",l.beginPath(),l.moveTo(0,f),l.lineTo(d,f),f+=c,g++,l.stroke();for(f=.5,g=0;f<=d;)l.restore(),l.strokeStyle=g%4==0?"rgb("+s+")":"rgb("+r+")",l.beginPath(),l.moveTo(f,0),l.lineTo(f,p),f+=c,g++,l.stroke()}$("#canvas-container-"+e).css({width:i,height:a,padding:VersionDesigner.config.pageMargin})},initPageShapes:function(e){var t=pageDefinition[e].elements;let i=PageModel[e];var a=0;for(var n in t){"linker"!=(r=t[n]).name&&(Schema.initShapeFunctions(r),VersionDesigner.painter.renderShape(r,e),i.add(r,!1)),a++}for(var n in t){var r;"linker"==(r=t[n]).name&&(VersionDesigner.painter.renderLinker(e,r),i.add(r,!1))}0==a&&i.build(),diffNode.filter(e=>e.type.includes("delete")).forEach(e=>{let t=PageModel.left.getShapeById(e.id);"linker"!==t.name&&VersionDesigner.painter.renderDiffNode(t,"right")})},initEvent:function(e){$("#designer-canvas-"+e).off("mousedown").on("mousedown",function(t){var i=$("#designer-canvas-"+e),a=Utils.getRelativePos(t.pageX,t.pageY,i),n=Utils.getShapeByPosition(e,a.x,a.y);null!=n?"dataAttribute"==n.type||(Utils.unselect(e),Utils.selectShape(e,n.shape.id)):Utils.unselect(e),versionCompareFun.updateAttributeView(e),$(".shape-tip").hide(),Utils.selectedOtherShape(e)}),document.addEventListener("wheel",function(e){if(e.ctrlKey&&$(e.target).closest(".version-designer-layout").length>0){e.preventDefault();let t=e.deltaY<0,i=$(e.target).closest(".version-designer-layout").attr("position");versionCompareFun.pageZoom(i,t?"zoomIn":"zoomOut")}},{passive:!1})}},painter:{controlStatus:{resizeDir:[],rotatable:!0},actions:{move:function(e){this.moveTo(e.x,e.y),this.prePoint=e,null==this.beginPoint&&(this.beginPoint=e)},line:function(e){if(void 0!==this.webkitLineDash&&void 0===this.lineDashOffset&&0!=this.lineWidth){for(var t=this.webkitLineDash,i=this.prePoint,a=0,n=1/Utils.measureDistance(i,e),r=i,s=0,o=!0;a<1;){(a+=n)>1&&(a=1);var l={x:(1-a)*i.x+a*e.x,y:(1-a)*i.y+a*e.y};(Utils.measureDistance(r,l)>=t[s]||a>=1)&&(o?this.lineTo(l.x,l.y):this.moveTo(l.x,l.y),o=!o,r=l,++s>=t.length&&(s=0))}this.moveTo(e.x,e.y)}else this.lineTo(e.x,e.y);this.prePoint=e,null==this.beginPoint&&(this.beginPoint=e)},curve:function(e){if(void 0!==this.webkitLineDash&&void 0===this.lineDashOffset&&0!=this.lineWidth){for(var t=this.webkitLineDash,i=this.prePoint,a=0,n=1/Utils.measureDistance(i,e),r=i,s=0,o=!0,l=0;a<1;){(a+=n)>1&&(a=1);var h={x:i.x*Math.pow(1-a,3)+e.x1*a*Math.pow(1-a,2)*3+e.x2*Math.pow(a,2)*(1-a)*3+e.x*Math.pow(a,3),y:i.y*Math.pow(1-a,3)+e.y1*a*Math.pow(1-a,2)*3+e.y2*Math.pow(a,2)*(1-a)*3+e.y*Math.pow(a,3)};if(Utils.measureDistance(r,h)>=t[s]||a>=1){if(o){var d=l+(a-l)/2,p={x:i.x*Math.pow(1-d,3)+e.x1*d*Math.pow(1-d,2)*3+e.x2*Math.pow(d,2)*(1-d)*3+e.x*Math.pow(d,3),y:i.y*Math.pow(1-d,3)+e.y1*d*Math.pow(1-d,2)*3+e.y2*Math.pow(d,2)*(1-d)*3+e.y*Math.pow(d,3)};this.lineTo(p.x,p.y),this.lineTo(h.x,h.y)}else this.moveTo(h.x,h.y);o=!o,r=h,l=a,++s>=t.length&&(s=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,null==this.beginPoint&&(this.beginPoint=e)},quadraticCurve:function(e){if(void 0!==this.webkitLineDash&&void 0===this.lineDashOffset&&0!=this.lineWidth){for(var t=this.webkitLineDash,i=this.prePoint,a=0,n=1/Utils.measureDistance(i,e),r=i,s=0,o=!0,l=0;a<1;){(a+=n)>1&&(a=1);var h={x:i.x*Math.pow(1-a,2)+e.x1*a*(1-a)*2+e.x*Math.pow(a,2),y:i.y*Math.pow(1-a,2)+e.y1*a*(1-a)*2+e.y*Math.pow(a,2)};if(Utils.measureDistance(r,h)>=t[s]||a>=1){if(o){var d=l+(a-l)/2,p={x:i.x*Math.pow(1-d,2)+e.x1*d*(1-d)*2+e.x*Math.pow(d,2),y:i.y*Math.pow(1-d,2)+e.y1*d*(1-d)*2+e.y*Math.pow(d,2)};this.lineTo(p.x,p.y),this.lineTo(h.x,h.y)}else this.moveTo(h.x,h.y);o=!o,r=h,l=a,++s>=t.length&&(s=0)}}this.moveTo(e.x,e.y)}else this.quadraticCurveTo(e.x1,e.y1,e.x,e.y);this.prePoint=e,null==this.beginPoint&&(this.beginPoint=e)},close:function(){if(void 0!==this.webkitLineDash&&void 0===this.lineDashOffset&&0!=this.lineWidth)for(var e=this.webkitLineDash,t=this.prePoint,i=this.beginPoint,a=0,n=1/Utils.measureDistance(t,i),r=t,s=0,o=!0;a<1;){(a+=n)>1&&(a=1);var l={x:(1-a)*t.x+a*i.x,y:(1-a)*t.y+a*i.y};(Utils.measureDistance(r,l)>=e[s]||a>=1)&&(o?this.lineTo(l.x,l.y):this.moveTo(l.x,l.y),o=!o,r=l,++s>=e.length&&(s=0))}this.closePath()},curveArc:function(e){this.arc(e.centerX,e.centerY,e.radius,e.startAngle,e.endAngle,!0)}},setLineDash:function(e,t){e.setLineDash||(e.setLineDash=function(){}),e.setLineDash(t),e.mozDash=t,e.webkitLineDash=t},renderShapePath:function(e,t,i,a){var n;n=a&&i.drawIcon?i.drawIcon(i.props.w,i.props.h):i.getPath(e),this.renderPath(t,i,n,a)},renderPath:function(e,t,i,a){for(var n=0;n=0;n--){(a=t.dataAttributes[n]).horizontal,a.vertical;if(a.hasOwnProperty("attributesJsonArray")){var r=a.dataShowConfig;null!=r&&(r.value=[]);break}}var s=t.name;for(n=0;n0)for(var v=0;v=0&&(p+"").trim().length>0&&(p="("+o.attrName+")"+p),"relation"==g){var u=t.id+"_"+f,x=relationShapeModelObject,m="";x.hasOwnProperty(u)&&(m=x[u]),p=m,o.isShowAttrName&&(p="("+o.attrName+")"+p)}c.showType="attr",c.value=p,c.color=o.color}t.dataAttributes||(t.dataAttributes=[]),c.id=Utils.newId(),c.category="custom",a.dataShowConfig||(a.dataShowConfig={},a.dataShowConfig.value||(a.dataShowConfig.value=[])),a.dataShowConfig.value.push(c)}else{c={w:16,h:16,textw:20,texth:17,imgT:0,category:"custom",icon:o.iconContent,name:s,showName:!1,showType:"icon",type:"string",value:"",horizontal:h,vertical:d};t.dataAttributes||(t.dataAttributes=[]),c.id=Utils.newId(),c.category="custom",a.dataShowConfig||(a.dataShowConfig={},a.dataShowConfig.value||(a.dataShowConfig.value=[])),a.dataShowConfig.value.push(c)}}},renderShape:function(e,t){if("linker"==e.name)return void this.renderLinker(t,e);let i=PageModel[t];for(var a,n,r=Utils.copy(i.define.commonShapeConfig),s=e.dataAttributes,o=0;o0)for(o=0;o=0||d.push(r[o])}p=d.length>0?a.concat(d):a,this.handleShapeConfigData(p,e,n)}var v=$("#designer-canvas-"+t),y=v.find("#"+e.id);0==y.length&&(y="lane"==e.category?$("
").appendTo(v):$("
").appendTo(v));var u=Utils.getShapeBox(e),x=(u.w+20).toScale(t),m=(u.h+20).toScale(t);y.find(".shape_canvas").attr({width:x,height:m}),y.css({left:(u.x-10).toScale(t)+"px",top:(u.y-10).toScale(t)+"px",width:x,height:m});var w=y.find(".shape_canvas")[0].getContext("2d");w.clearRect(0,0,e.props.w+20,e.props.h+20),w.scale(VersionDesigner.config.scale[t],VersionDesigner.config.scale[t]),w.translate(10,10),w.translate(e.props.x-u.x,e.props.y-u.y),w.translate(e.props.w/2,e.props.h/2),w.rotate(e.props.angle),w.translate(-e.props.w/2,-e.props.h/2),e.highLight&&(w.shadowBlur=9,w.shadowColor="rgba(0, 0, 0, 0.5)");e.lineStyle;w.globalAlpha=e.shapeStyle.alpha,w.lineJoin="round",this.renderShapePath(t,w,e),this.renderMarkers(w,e);var S=e.getPath(t),b=Utils.copy(S[S.length-1]);b.fillStyle={type:"none"},b.lineStyle={lineWidth:0};var D=[b];if(this.renderPath(w,e,D),this.renderText(t,e,u),this.renderDataAttributes(t,e,u),this.renderTitleShow(t,e,u),!isProcessExec&&(VersionDesigner.painter.renderShapeLink(y,e),VersionDesigner.painter.renderSahpeAttachment(t,y,e),null!=n&&n.length>0)){y.find(".shape_danger").remove(),y.find(".shape_regulate").remove();var M=!1,I=!1;for(var k in n){var C=n[k];if(null!=C&&"danger"==C.key&&null!=C.value&&""!=C.value&&null!=relationShapeInfo[t])if("object"==typeof C.value&&C.value.constructor==Array){for(S=0;S").appendTo(y);if(I)$("
").appendTo(y)}this.renderDiffNode(e,t)},renderDiffNode:function(e,t){if("right"===t){let i=diffNode.findIndex(t=>t.id===e.id);if(-1!==i){const a=$("#designer-canvas-"+t),n={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 r=diffNode[i].type,s="";r.forEach(e=>{s+=`\n\t\t\t\t\t\t\t\t\t\t${n[e].code}\n\t\t\t\t\t\t\t\t\t`});let o,l,h,d,p,c,f=a.find("#diff-node-"+e.id);if(0===f.length&&(f=$(`
`).appendTo(a)),r.includes("delete")){let t=$("#designer-canvas-left").find("#"+e.id);o=parseInt(t.css("width")).restoreScale("left").toScale("right"),l=parseInt(t.css("height")).restoreScale("left").toScale("right"),h=parseInt(t.css("left")).restoreScale("left").toScale("right"),d=parseInt(t.css("top")).restoreScale("left").toScale("right"),p="rgba(224, 32, 32, 0.15)",c="#E02020"}else{let t=a.find("#"+e.id);o=parseInt(t.css("width")),l=parseInt(t.css("height")),h=parseInt(t.css("left")),d=parseInt(t.css("top")),p=r.includes("add")?"rgba(224, 32, 32, 0.15)":"rgba(255, 143, 11, 0.15)",c=r.includes("add")?"#E02020":"#FF8F0B"}if(f.css({boxSizing:"border-box",left:h+"px",top:d+"px",width:o+"px",height:l+"px",background:p,border:`1.2px dashed ${c}`}),0===f.find(".diff-icon-wrapper").length){let i=$(`
${s}
`).appendTo(f);i.children("span[type=info]").off("mousedown").on("mousedown",function(e){e.stopPropagation()}),i.children("span[type=info]").off("click").on("click",function(i){i.stopPropagation(),Utils.unselect(t),Utils.selectShape(t,e.id),versionCompareFun.openAttributeView(t),Utils.selectedOtherShape(t)})}}}},iconImage:function(e,t,i){if(i){t.save();var a,n=imageDefMap[i.imageId],r=e.props.h;"colorOverlay"===i.type&&(r=30),a=.65*r;var s=$(".shape_img[src='"+n+"']");0===s.length?(s=$("").appendTo("#shape_img_container")).one("load.drawshape",function(){t.translate(0,0),o(s,r,a),s.attr("loaded","1")}):"0"===s.attr("loaded")?s.one("load.drawshape",function(){t.translate(0,0),o(s,r,a)}):o(s,r,a)}function o(e,i,a){var n,r;t.save();var s=e[0].width/e[0].height;s>1?n=(r=a)*s:r=(n=a)*s;var o=i/2,l=o-r/2,h=o-n/2;t.drawImage(e[0],l,h,r,n),t.restore()}},fillShape:function(e,t,i){if(t.save(),void 0!==i.colorOverlay&&"multiplyOverlay"===i.colorOverlay&&(i.color=function(e){let[t,i,a]=e.split(",").map(Number),[n,r,s]=e.split(",").map(Number),o=t/255*(n/255)*255,l=i/255*(r/255)*255,h=a/255*(s/255)*255;return`${Math.round(o)}, ${Math.round(l)}, ${Math.round(h)}`}(i.color)),"solid"==i.type)t.fillStyle="rgb("+i.color+")",t.fill();else if("gradient"==i.type){var a;a="linear"==i.gradientType?GradientHelper.createLinearGradient(e,t,i):GradientHelper.createRadialGradient(e,t,i),t.fillStyle=a,t.fill()}else if("image"===i.type||"imageDef"===i.type){let a=!1,s=i.fileId;"insert"===i.from&&(s=shapeImages[i.fileId]),"imageDef"===i.type&&(imageDefMap[i.fileId]?s=imageDefMap[i.fileId]:(s=shapeImages[i.fileId],a=!0));var n=$(".shape_img[src='"+s+"']");0==n.length?((n=$("").appendTo("#shape_img_container")).bind("load.drawshape",function(){var s="insert"===i.from?0:(VersionDesigner.config.panelItemWidth-e.props.w)/2,o="insert"===i.from?0:(VersionDesigner.config.panelItemHeight-e.props.h)/2;a&&(o=0,s=0),t.translate(s,o),r(n),t.restore(),$(this).attr("loaded","1")}),n.attr("src",s)):"0"==n.attr("loaded")?n.bind("load.drawshape",function(){t.translate(0,0),r(n),t.restore()}):r(n)}function r(a){if(t.save(),t.clip(),"fit"==i.display)if((c=(l=a.width())/(h=a.height()))>e.props.w/e.props.h){var n=0,r=(o=e.props.w)/c,s=e.props.h/2-r/2;t.drawImage(a[0],n,s,o,r)}else{s=0;var o=(r=e.props.h)*c;n=e.props.w/2-o/2;t.drawImage(a[0],n,s,o,r)}else if("stretch"==i.display)t.drawImage(a[0],0,0,e.props.w,e.props.h);else if("original"==i.display){var l=a.width(),h=a.height();n=e.props.w/2-l/2,s=e.props.h/2-h/2;t.drawImage(a[0],n,s,l,h)}else if("tile"==i.display)for(n=0,l=a.width(),h=a.height();ne.props.w/e.props.h){s=0,o=(r=e.props.h)*c,n=e.props.w/2-o/2;t.drawImage(a[0],n,s,o,r)}else{n=0,r=(o=e.props.w)/c,s=e.props.h/2-r/2;t.drawImage(a[0],n,s,o,r)}}t.restore()}t.restore()},renderText:function(e,t,i){var a=$("#designer-canvas-"+e).find("#"+t.id),n=a.find(".text_canvas[forshape="+t.id+"]");if(0==n.length&&(n=$("").appendTo(a)).bind("focus",function(){$(this).blur()}),n.attr("readonly","readonly"),null==t.text||""==t.text.trim()||0==t.attribute.editable&&t.title==t.text)n.css({height:"0px",width:"0px"}).hide();else{var r=t.fontStyle,s={"line-height":Math.round(1.25*r.size)+"px","font-size":r.size+"px","font-family":r.fontFamily,"font-weight":r.bold?"bold":"normal","font-style":r.italic?"italic":"normal","text-align":r.textAlign,color:"rgb("+r.color+")","text-decoration":r.underline?"underline":"none",opacity:t.shapeStyle.alpha};n.css(s),n.show();var o=t.getTextBlock();if("horizontal"==t.fontStyle.orientation){var l={x:o.x+o.w/2,y:o.y+o.h/2};o={x:l.x-o.h/2,y:l.y-o.w/2,w:o.h,h:o.w}}n.css({width:o.w}),n.height(0),n.val(t.text),n.scrollTop(99999);var h=n.scrollTop(),d=0;d="middle"==r.vAlign?o.y+o.h/2-h/2:"bottom"==t.fontStyle.vAlign?o.y+o.h-h:o.y;var p={x:o.x+o.w/2,y:d+h/2},c=t.props.angle;if(0!=c){var f={x:t.props.w/2,y:t.props.h/2};p=Utils.getRotated(f,p,c)}"horizontal"==r.orientation&&(c=(1.5*Math.PI+c)%(2*Math.PI));var g="rotate("+Math.round(c/(2*Math.PI)*360)+"deg) scale("+VersionDesigner.config.scale[e]+")",v=o.w,y=h;n.css({width:v,height:y,left:(p.x+(t.props.x-i.x)+10).toScale(e)-o.w/2,top:(p.y+(t.props.y-i.y)+10).toScale(e)-h/2,"-webkit-transform":g,"-ms-transform":g,"-o-transform":g,"-moz-transform":g,transform:g})}},renderLinker:function(e,t){let i=PageModel[e];"curve"!=t.linkerType&&"broken"!=t.linkerType||t.points&&0!=t.points.length||(t.points=Utils.getLinkerPoints(t));var a=t.points,n=Utils.copy(t.from),r=Utils.copy(t.to);if(t.attribute&&t.attribute.collapseBy)$("#designer-canvas-"+e).find("#"+t.id).hide();else{$("#designer-canvas-"+e).find("#"+t.id).show();var s=Utils.getEndpointAngle(t,"from"),o=Utils.getEndpointAngle(t,"to"),l=Utils.getLinkerLineStyle(e,t.lineStyle);T(e,n,t,l.beginArrowStyle,s),T(e,r,t,l.endArrowStyle,o);var h=r.x,d=r.y,p=n.x,c=n.y;r.xp&&(p=g.x),g.yc&&(c=g.y)}var v=h,y=d,u=p-h,x=c-d,m=$("#designer-canvas-"+e).find("#"+t.id);if(0==m.length){var w=$("#designer-canvas-"+e);m=$("
").appendTo(w)}i.getShapeById(t.id)||(m.css("z-index",i.orderList.length+1),m.css({"pointer-events":"none"}));var S=m.find(".shape_canvas");S.attr({width:(u+20).toScale(e),height:(x+20).toScale(e)}),m.css({left:(v-10).toScale(e),top:(y-10).toScale(e),width:(u+20).toScale(e),height:(x+20).toScale(e)});var b=S[0].getContext("2d");b.scale(VersionDesigner.config.scale[e],VersionDesigner.config.scale[e]),b.translate(10,10);var D=Utils.getLinkerLineStyle(e,t.lineStyle);b.lineWidth=D.lineWidth,b.strokeStyle="rgb("+D.lineColor+")",b.fillStyle="rgb("+D.lineColor+")",t.highLight&&(b.shadowBlur=15,b.shadowColor="rgba(0, 0, 0, 0.5)"),b.save();var M={x:n.x-v,y:n.y-y},I={x:r.x-v,y:r.y-y};if(b.save(),"dashed"==D.lineStyle?this.setLineDash(b,[5*D.lineWidth,2*D.lineWidth]):"dot"==D.lineStyle?this.setLineDash(b,[D.lineWidth,1.5*D.lineWidth]):"dashdot"==D.lineStyle&&this.setLineDash(b,[5*D.lineWidth,2*D.lineWidth,D.lineWidth,2*D.lineWidth]),b.lineJoin="round",b.beginPath(),this.actions.move.call(b,M),"curve"==t.linkerType){var k=a[0],C=a[1],P={x1:k.x-v,y1:k.y-y,x2:C.x-v,y2:C.y-y,x:I.x,y:I.y};this.actions.curve.call(b,P)}else{for(f=0;fe.id===t.id)&&(b.shadowBlur=4,b.shadowColor="#833")}b.stroke(),b.restore(),delete b.webkitLineDash,L(M,s,n.id,D.beginArrowStyle,t,n.angle),L(I,o,r.id,D.endArrowStyle,t,r.angle),b.restore(),this.renderLinkerText(e,t)}function T(e,t,i,a,n){let r=PageModel[e];if(t.id){var s=r.getShapeById(t.id);if(s){var o={x:0,y:0},l=Utils.getShapeLineStyle(e,s.lineStyle),h=Utils.getLinkerLineStyle(e,i.lineStyle);o.x="none"==a||"cross"==a?-l.lineWidth/2:"solidArrow"==a||"dashedArrow"==a?-l.lineWidth/2-1.3*h.lineWidth:"solidDiamond"==a||"dashedDiamond"==a?-l.lineWidth/2-h.lineWidth:-l.lineWidth/2-h.lineWidth/2;var d=Utils.getRotated({x:0,y:0},o,n);t.x+=d.x,t.y+=d.y}}}function L(e,t,i,a,n,r){if("normal"==a){var s=12,o=Math.PI/5,l=s/Math.cos(o),h=e.x-l*Math.cos(t-o),d=e.y-l*Math.sin(t-o),p=e.x-l*Math.sin(Math.PI/2-t-o),c=e.y-l*Math.cos(Math.PI/2-t-o);b.beginPath(),b.moveTo(h,d),b.lineTo(e.x,e.y),b.lineTo(p,c),b.stroke()}else if("solidArrow"==a){s=12,o=Math.PI/10,l=s/Math.cos(o),h=e.x-l*Math.cos(t-o),d=e.y-l*Math.sin(t-o),p=e.x-l*Math.sin(Math.PI/2-t-o),c=e.y-l*Math.cos(Math.PI/2-t-o);b.beginPath(),b.moveTo(e.x,e.y),b.lineTo(h,d),b.lineTo(p,c),b.lineTo(e.x,e.y),b.closePath(),b.fill(),b.stroke()}else if("dashedArrow"==a){b.save();s=12,o=Math.PI/10,l=s/Math.cos(o),h=e.x-l*Math.cos(t-o),d=e.y-l*Math.sin(t-o),p=e.x-l*Math.sin(Math.PI/2-t-o),c=e.y-l*Math.cos(Math.PI/2-t-o);b.beginPath(),b.moveTo(e.x,e.y),b.lineTo(h,d),b.lineTo(p,c),b.lineTo(e.x,e.y),b.closePath(),b.fillStyle="white",b.fill(),b.stroke(),b.restore()}else if("solidCircle"==a){b.save();var f=4,g=e.x-f*Math.cos(t),v=e.y-f*Math.sin(t);b.beginPath(),b.arc(g,v,f,0,2*Math.PI,!1),b.closePath(),b.fill(),b.stroke(),b.restore()}else if("dashedCircle"==a){b.save();f=4,g=e.x-f*Math.cos(t),v=e.y-f*Math.sin(t);b.beginPath(),b.arc(g,v,f,0,2*Math.PI,!1),b.closePath(),b.fillStyle="white",b.fill(),b.stroke(),b.restore()}else if("solidDiamond"==a){b.save();s=8,o=Math.PI/7,l=s/Math.cos(o),h=e.x-l*Math.cos(t-o),d=e.y-l*Math.sin(t-o),p=e.x-l*Math.sin(Math.PI/2-t-o),c=e.y-l*Math.cos(Math.PI/2-t-o);var y=e.x-2*s*Math.cos(t),u=e.y-2*s*Math.sin(t);b.beginPath(),b.moveTo(e.x,e.y),b.lineTo(h,d),b.lineTo(y,u),b.lineTo(p,c),b.lineTo(e.x,e.y),b.closePath(),b.fill(),b.stroke(),b.restore()}else if("dashedDiamond"==a){b.save();s=8,o=Math.PI/7,l=s/Math.cos(o),h=e.x-l*Math.cos(t-o),d=e.y-l*Math.sin(t-o),p=e.x-l*Math.sin(Math.PI/2-t-o),c=e.y-l*Math.cos(Math.PI/2-t-o),y=e.x-2*s*Math.cos(t),u=e.y-2*s*Math.sin(t);b.beginPath(),b.moveTo(e.x,e.y),b.lineTo(h,d),b.lineTo(y,u),b.lineTo(p,c),b.lineTo(e.x,e.y),b.closePath(),b.fillStyle="white",b.fill(),b.stroke(),b.restore()}else if("cross"==a){var x=6*Math.cos(Math.PI/2-t),m=6*Math.sin(Math.PI/2-t),w=e.x+x,S=e.y-m,D=(y=e.x-14*Math.cos(t))-x,M=(u=e.y-14*Math.sin(t))+m;b.beginPath(),b.moveTo(w,S),b.lineTo(D,M),b.stroke()}}},renderLinkerText:function(e,t){var i=$("#designer-canvas-"+e).find("#"+t.id),a=i.find(".text_canvas");0==a.length&&(a=$("
").appendTo(i));var n=t.fontStyle,r="scale("+VersionDesigner.config.scale[e]+")",s={"line-height":Math.round(1.25*n.size)+"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":r,"-ms-transform":r,"-o-transform":r,"-moz-transform":r,transform:r};if(a.css(s),null!=t.text&&""!=t.text){a.show();var o=t.text.replace(//g,">").replace(/\n/g,"
");a.html(o+"
");var l=this.getLinkerMidpoint(t),h=i.position();a.css({left:l.x.toScale(e)-h.left-a.width()/2,top:l.y.toScale(e)-h.top-a.height()/2})}else a.hide()},renderMarkers:function(e,t,i){if(t.attribute&&t.attribute.markers&&t.attribute.markers.length>0){var a=t.attribute.markers,n=Schema.config.markerSize;i&&(n=10);var r=t.attribute.markerOffset;i&&(r=5);for(var s=a.length*n+4*(a.length-1),o=t.props.w/2-s/2,l=0;l").appendTo($("#designer-canvas-"+e).find("#"+t.id));a.css({left:(10+t.props.titleProps.x)*VersionDesigner.config.scale[e]+"px",top:(17+t.props.titleProps.y)*VersionDesigner.config.scale[e]+"px"});var n=a[0].getContext("2d"),r="13px ";let i=(n.measureText(t.title).width+20).toScale(e),s=parseInt(r).toScale(e)+10;a.attr({width:i,height:s}),r+=t.fontStyle.fontFamily,n.font=r,n.fillStyle="#696969",t.titleStyle&&t.titleStyle.titleColor&&(n.fillStyle=t.titleStyle.titleColor),n.scale(VersionDesigner.config.scale[e],VersionDesigner.config.scale[e]),n.fillText(t.title,0,12)}},renderDataAttributes:function(pos,i,k){if($("#designer-canvas-"+pos).find("#"+i.id).children(".attr_canvas").remove(),i.dataAttributes&&0!=i.dataAttributes.length)for(var n={x:i.props.w/2,y:i.props.h/2},p=0;p0)for(var n=0;n").appendTo($("#designer-canvas-"+pos).find("#"+i.id)),b=H[0].getContext("2d"),w="12px ";w+=i.fontStyle.fontFamily,b.font=w;var D=b.measureText(y).width,a=20,E,F;""!=x&&(D+=20),"mostleft"==h?E=-D-2:"leftedge"==h?E=-D/2:"left"==h?E=2:"center"==h?E=(i.props.w-D)/2:"right"==h&&(E=i.props.w-D-2,E="rightedge"==h?i.props.w-D/2:i.props.w+2),F="mosttop"==I?-a:"topedge"==I?-a/2:"top"==I?0:"middle"==I?(i.props.h-a)/2:"bottom"==I?i.props.h-a:"bottomedge"==I?i.props.h-a/2:i.props.h;var g={x:E,y:F,w:D,h:a},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),e=(G.y+(i.props.y-k.y)+10).toScale(pos);if("mostleft"==h&&"left"!=h&&"right"==h||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,"link"==c.type?b.fillStyle="#4183C4":b.fillStyle="#333","text"==c.showType&&(b.fillStyle=c.color),"attr"==c.showType&&(b.fillStyle=c.color),b.textBaseline="middle",D>i.props.w){var tempShapeWidth=i.props.w;tempShapeWidth<100&&(tempShapeWidth=100),H[0].width=tempShapeWidth+10,H[0].height=10*Math.ceil(D/tempShapeWidth)+15;for(var v=0;v1&&H.css({left:15,top:e}),"right"==h&&"mosttop"!=I&&"bottom"!=I&&(d=tempShapeWidth/4,H.css({left:d,top:e}))}else"mostleft"==h&&(d=-D,H.css({left:d,top:e})),"right"==h&&(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],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",f=$(".shape_img[src='"+J+"']");0==f.length&&(f=$("").appendTo("#shape_img_container")),"true"==f.attr("loaded")?b.drawImage(f[0],g.w-20,0,20,20):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(e,t){if(e.find(".shape_link_point").remove(),t.link)$(`
`).appendTo(e)},renderSahpeAttachment:function(e,t,i){const a="left"===e?versionData:curData;let n=a.shapeUpFile[i.id].value,r=a.shapeRelationUpFile[i.id].value;if(t.find(".shape_attachment_point").remove(),n.length>0||r.length>0)$(`
`).appendTo(t)},drawControls:function(e,t){let i=PageModel[e];var a=$("#shape-controls-"+e);if(0==a.length){var n=$("#designer-canvas-"+e);(a=$(`
`).appendTo(n)).append(``),a.append("
"),a.append("
"),a.append("
"),a.append("
"),a.append("
"),a.append("
"),a.append("
"),a.append("
"),$(".shape_controller").css({"border-color":VersionDesigner.config.anchorColor,width:VersionDesigner.config.anchorSize-2,height:VersionDesigner.config.anchorSize-2})}$(".shape_controller").css({"z-index":i.orderList.length+3}),a.show();var r,s,o=0;1==t.length?(r=(g=i.getShapeById(t[0])).props,o=g.props.angle,s=g.resizeDir):(r=Utils.getControlBox(e,t),s=["tl","tr","br","bl"]);var l=!0;let h=!1;const d=t.findIndex(e=>!i.getShapeById(e).hasOwnProperty("e2eContainerId")),p=t.findIndex(e=>"scopeLimitation"===i.getShapeById(e).name),c=t.findIndex(e=>"scopeLimitation"!==i.getShapeById(e).name&&i.getShapeById(e).hasOwnProperty("e2eContainerId"));if(-1==d&&-1==p&&-1!==c)h=!0;else if(-1!==c){t.filter(e=>"scopeLimitation"!==i.getShapeById(e).name&&i.getShapeById(e).hasOwnProperty("e2eContainerId")).forEach(e=>{-1==t.findIndex(t=>t===i.getShapeById(e).e2eContainerId)&&(h=!0)})}for(var f=0;f1)&&(s=[])}return h&&(l=!1,s=[]),this.controlStatus.rotatable=l,this.controlStatus.resizeDir=s,this.rotateControls(r,o,e),a},rotateControls:function(e,t,i){var a=$("#shape-controls-"+i),n=Utils.getRotatedBox(e,t),r=n.w.toScale(i),s=n.h.toScale(i);a.css({left:n.x.toScale(i),top:n.y.toScale(i),width:r,height:s});var o=r+20,l=s+20,h=$("#controls-bounding-"+i);h.attr({width:o,height:l});var d=h[0].getContext("2d");d.lineJoin="round",0==this.controlStatus.resizeDir.length?(d.lineWidth=2,d.strokeStyle=VersionDesigner.config.selectorColor,d.globalAlpha=.8):(d.lineWidth=1,d.strokeStyle=VersionDesigner.config.selectorColor,d.globalAlpha=.5),d.save(),d.clearRect(0,0,o,l),d.translate(o/2,l/2),d.rotate(t),d.translate(-o/2,-l/2),d.translate(9.5,9.5);var p={x:Math.round((e.x-n.x).toScale(i)),y:Math.round((e.y-n.y).toScale(i)),w:Math.floor(e.w.toScale(i)+1),h:Math.floor(e.h.toScale(i)+1)};d.strokeRect(p.x,p.y,p.w,p.h),d.restore();var c=0-VersionDesigner.config.anchorSize/2;e=Utils.toScale(i,e),n=Utils.toScale(i,n);var f={x:e.x+e.w/2,y:e.y+e.h/2};a.children(".shape_controller").hide();for(var g=0;g=0?e.x:u.indexOf("r")>=0?e.x+e.w:e.x+e.w/2,y=u.indexOf("t")>=0?e.y:u.indexOf("b")>=0?e.y+e.h:e.y+e.h/2;var m=Utils.getRotated(f,{x:v,y:y},t);x.css({left:m.x-n.x+c,top:m.y-n.y+c})}var w=Math.PI/8;a.children(".shape_controller").removeClass("s n e w"),t>w&&t<=3*w?(a.children("div[resizeDir=tl]").addClass("n"),a.children("div[resizeDir=tr]").addClass("e"),a.children("div[resizeDir=br]").addClass("s"),a.children("div[resizeDir=bl]").addClass("w"),a.children("div[resizeDir=l]").addClass("n w"),a.children("div[resizeDir=r]").addClass("s e"),a.children("div[resizeDir=b]").addClass("s w"),a.children("div[resizeDir=t]").addClass("n e")):t>3*w&&t<=5*w?(a.children("div[resizeDir=tl]").addClass("n e"),a.children("div[resizeDir=tr]").addClass("s e"),a.children("div[resizeDir=br]").addClass("s w"),a.children("div[resizeDir=bl]").addClass("n w"),a.children("div[resizeDir=l]").addClass("n"),a.children("div[resizeDir=r]").addClass("s"),a.children("div[resizeDir=b]").addClass("w"),a.children("div[resizeDir=t]").addClass("e")):t>5*w&&t<=7*w?(a.children("div[resizeDir=tl]").addClass("e"),a.children("div[resizeDir=tr]").addClass("s"),a.children("div[resizeDir=br]").addClass("w"),a.children("div[resizeDir=bl]").addClass("n"),a.children("div[resizeDir=l]").addClass("n e"),a.children("div[resizeDir=r]").addClass("s w"),a.children("div[resizeDir=b]").addClass("n w"),a.children("div[resizeDir=t]").addClass("s e")):t>7*w&&t<=9*w?(a.children("div[resizeDir=tl]").addClass("s e"),a.children("div[resizeDir=tr]").addClass("s w"),a.children("div[resizeDir=br]").addClass("n w"),a.children("div[resizeDir=bl]").addClass("n e"),a.children("div[resizeDir=l]").addClass("e"),a.children("div[resizeDir=r]").addClass("w"),a.children("div[resizeDir=b]").addClass("n"),a.children("div[resizeDir=t]").addClass("s")):t>9*w&&t<=11*w?(a.children("div[resizeDir=tl]").addClass("s"),a.children("div[resizeDir=tr]").addClass("w"),a.children("div[resizeDir=br]").addClass("n"),a.children("div[resizeDir=bl]").addClass("e"),a.children("div[resizeDir=l]").addClass("s e"),a.children("div[resizeDir=r]").addClass("n w"),a.children("div[resizeDir=b]").addClass("n e"),a.children("div[resizeDir=t]").addClass("s w")):t>11*w&&t<=13*w?(a.children("div[resizeDir=tl]").addClass("s w"),a.children("div[resizeDir=tr]").addClass("n w"),a.children("div[resizeDir=br]").addClass("n e"),a.children("div[resizeDir=bl]").addClass("s e"),a.children("div[resizeDir=l]").addClass("s"),a.children("div[resizeDir=r]").addClass("n"),a.children("div[resizeDir=b]").addClass("e"),a.children("div[resizeDir=t]").addClass("w")):t>13*w&&t<=15*w?(a.children("div[resizeDir=tl]").addClass("w"),a.children("div[resizeDir=tr]").addClass("n"),a.children("div[resizeDir=br]").addClass("e"),a.children("div[resizeDir=bl]").addClass("s"),a.children("div[resizeDir=l]").addClass("s w"),a.children("div[resizeDir=r]").addClass("n e"),a.children("div[resizeDir=b]").addClass("s e"),a.children("div[resizeDir=t]").addClass("n w")):(a.children("div[resizeDir=tl]").addClass("n w"),a.children("div[resizeDir=tr]").addClass("n e"),a.children("div[resizeDir=br]").addClass("s e"),a.children("div[resizeDir=bl]").addClass("s w"),a.children("div[resizeDir=l]").addClass("w"),a.children("div[resizeDir=r]").addClass("e"),a.children("div[resizeDir=b]").addClass("s"),a.children("div[resizeDir=t]").addClass("n"))},getLinkerMidpoint:function(e){var t={};if("normal"==e.linkerType)t={x:.5*e.from.x+.5*e.to.x,y:.5*e.from.y+.5*e.to.y};else if("curve"==e.linkerType){var i=e.from,a=e.points[0],n=e.points[1],r=e.to;t={x:.125*i.x+.375*a.x+.375*n.x+.125*r.x,y:.125*i.y+.375*a.y+.375*n.y+.125*r.y}}else{var s=[];s.push(e.from),(s=s.concat(e.points)).push(e.to);for(var o=0,l=1;lh){var f=(h-d)/p;t={x:(1-f)*a.x+f*n.x,y:(1-f)*a.y+f*n.y};break}d=c}}return t}},bindEvent:{designerLayoutScroll:function(e){let t=$("#designer-layout-"+e);t.bind("scroll",function(){if(Navigator.setView(e),isSameOperate){let i=$("#designer-layout-"+("left"===e?"right":"left"));i.scrollTop(t.scrollTop()),i.scrollLeft(t.scrollLeft())}})}},setZoomScale:function(e,t){t<.25&&(t=.25),t>4&&(t=4),VersionDesigner.config.scale[e]=t,VersionDesigner.initialize.initCanvas(e);let i=PageModel[e];for(var a in i.define.elements){var n=i.define.elements[a];VersionDesigner.painter.renderShape(n,e)}var r=Utils.getSelectedIds(e);Utils.unselect(e),Utils.selectShape(e,r),diffNode.filter(e=>e.type.includes("delete")).forEach(e=>{let t=PageModel.left.getShapeById(e.id);"linker"!==t.name&&VersionDesigner.painter.renderDiffNode(t,"right")})}},PageModel={left:{define:{page:{padding:60,backgroundColor:"255,255,255",gridSize:15,width:1600,showGrid:!0,height:2500},elements:{}},persistence:{},orderList:[],maxZIndex:0,linkerMap:{map:{},add:function(e,t){this.map[e]||(this.map[e]=[]),this.map[e].indexOf(t)<0&&this.map[e].push(t)},remove:function(e,t){this.map[e]&&Utils.removeFromArray(this.map[e],t)},empty:function(){this.map={}}},groupMap:{map:{},add:function(e,t){this.map[e]=t},push:function(e,t){this.map[e]||(this.map[e]=[]),this.map[e].push(t)},remove:function(e){delete this.map[e]},empty:function(){this.map={}}},add:function(e,t){this.addMulti([e],t)},addMulti:function(e,t){void 0===t&&(t=!0);for(var i=[],a=0;a0&&(a=this.orderList[this.orderList.length-1].zindex),this.maxZIndex=a}},right:{}};PageModel.right=deepCopy(PageModel.left),Number.prototype.toScale=function(e){return this*VersionDesigner.config.scale[e]},Number.prototype.restoreScale=function(e){return this/VersionDesigner.config.scale[e]};const Utils={selectIds:{left:[],right:[]},selectShape:function(e,t,i){let a=PageModel[e];if("string"==typeof t){var n=t;(t=[]).push(n)}if(t.length<=0)return;for(var r=Utils.mergeArray([],t),s=0;s0&&!c)VersionDesigner.painter.drawControls(e,l);void 0===i&&(i=!0),this.selectCallback&&i&&this.selectCallback();let f=!0;if(1===t.length){const e=a.getShapeById(t[0]);f=!e.hasOwnProperty("e2eContainerId")||""===e.e2eContainerId||"scopeLimitation"===e.name}else{const e=[];for(let i=0;i!e.hasOwnProperty("e2eContainerId")||"scopeLimitation"===e.name)}},selectedOtherShape:function(e){if(isSameOperate){let t="left"===e?"right":"left";if(Utils.getSelectedIds(e).length>0){let i=Utils.getSelectedIds(e)[0];if(PageModel[t].define.elements[i]){Utils.unselect(t),Utils.selectShape(t,i);let e=$("#designer-layout-"+t),a=e.width(),n=e.height(),r=e.scrollTop(),s=e.scrollLeft(),o=$("#designer-canvas-"+t).find("#"+i),l=parseInt(o.css("left")),h=parseInt(o.css("top")),d=parseInt(o.css("width")),p=parseInt(o.css("height")),c="";s-10>=l+d/2&&(c=图元位于画布左侧可解除同步锁定查看),l-s>=a-20-d/2&&(c=图元位于画布右侧可解除同步锁定查看),r-10>=h+p/2&&(c=图元位于画布顶部可解除同步锁定查看),h-r>=n-20-p/2&&(c=图元位于画布底部可解除同步锁定查看);let f=$(".shape-tip-"+t);c&&(f.text(c),f.show())}}else Utils.unselect(t);versionCompareFun.updateAttributeView(t)}},getDarkerColor:function(e,t){t||(t=13);var i=e.split(","),a=parseInt(i[0]),n=parseInt(i[1]),r=parseInt(i[2]),s=Math.round(a-a/255*t);s<0&&(s=0);var o=Math.round(n-n/255*t);o<0&&(o=0);var l=Math.round(r-r/255*t);return l<0&&(l=0),s+","+o+","+l},getDarkestColor:function(e){return this.getDarkerColor(e,26)},copy:function(e){return $.extend(!0,{},e)},getEndpointAngle:function(e,t){var i,a;if(i="from"==t?e.from:e.to,"normal"==e.linkerType)a="from"==t?e.to:e.from;else if("broken"==e.linkerType)a="from"==t?e.points[0]:e.points[e.points.length-1];else{var n,r=Utils.measureDistance(e.from,e.to);a={x:(1-(n="from"==t?12/r:1-12/r))*(1-n)*(1-n)*e.from.x+3*(1-n)*(1-n)*n*e.points[0].x+3*(1-n)*n*n*e.points[1].x+n*n*n*e.to.x,y:(1-n)*(1-n)*(1-n)*e.from.y+3*(1-n)*(1-n)*n*e.points[0].y+3*(1-n)*n*n*e.points[1].y+n*n*n*e.to.y}}return this.getAngle(a,i)},getAngle:function(e,t){var i=isNaN(Math.atan(Math.abs(e.y-t.y)/Math.abs(e.x-t.x)))?0:Math.atan(Math.abs(e.y-t.y)/Math.abs(e.x-t.x));return t.x<=e.x&&t.y>e.y?i=Math.PI-i:t.x=e.x&&t.y=e.x&&t.y>=e.y?n=Math.PI-n:t.x<=e.x&&t.y>=e.y?n=Math.PI+n:t.x<=e.x&&t.y<=e.y&&(n=2*Math.PI-n);var r=((n%=2*Math.PI)+i)%(2*Math.PI);return{x:e.x+Math.sin(r)*a,y:e.y-Math.cos(r)*a}},measureDistance:function(e,t){var i=t.y-e.y,a=t.x-e.x;return Math.sqrt(Math.pow(i,2)+Math.pow(a,2))},isSelected:function(e,t){return this.selectIds[t].indexOf(e)>=0&&!this.isLocked(t,e)},isLocked:function(e,t){let i=PageModel[e];return!(!i.getShapeById(t)||!i.getShapeById(t).locked)},getShapeBox:function(e){var t=e.props,i=e.props.angle;return this.getRotatedBox(t,i)},getLinkerLinePoints:function(e){var t=[];if("curve"!=e.linkerType)t.push(e.from),t=t.concat(e.points);else for(var i=0;i<=1;){var a={x:(1-i)*(1-i)*(1-i)*e.from.x+3*(1-i)*(1-i)*i*e.points[0].x+3*(1-i)*i*i*e.points[1].x+i*i*i*e.to.x,y:(1-i)*(1-i)*(1-i)*e.from.y+3*(1-i)*(1-i)*i*e.points[0].y+3*(1-i)*i*i*e.points[1].y+i*i*i*e.to.y};t.push(a),i+=.05}return t.push(e.to),t},getLinkerBox:function(e){for(var t=this.getLinkerLinePoints(e),i=t[0].x,a=t[0].y,n=t[0].x,r=t[0].y,s=0;sn&&(n=o.x),o.yr&&(r=o.y)}return{x:i,y:a,w:n-i,h:r-a}},pointInLinker:function(e,t,i){for(var a=this.getLinkerLinePoints(t),n={x:e.x-i,y:e.y},r={x:e.x+i,y:e.y},s={x:e.x,y:e.y-i},o={x:e.x,y:e.y+i},l=1;l=0;s--){var o=n.orderList[s].id,l=$("#designer-canvas-"+e).find("#"+o),h=n.getShapeById(o),d=l.position(),p=t-d.left,c=i-d.top,f={x:d.left,y:d.top,w:l.width(),h:l.height()},g=l.find(".shape_canvas")[0].getContext("2d"),v=this.pointInRect(t,i,f);if("linker"==h.name){if(!v)continue;if(a)continue;var y={x:t-(w=(w=10).toScale(e)),y:i-w,w:2*w,h:2*w};if(this.pointInRect(h.to.x.toScale(e),h.to.y.toScale(e),y)){var u={type:"linker_point",point:"end",shape:h};r.push(u)}else if(this.pointInRect(h.from.x.toScale(e),h.from.y.toScale(e),y)){u={type:"linker_point",point:"from",shape:h};r.push(u)}else{var x=l.find(".text_canvas"),m=x.position();y={x:m.left,y:m.top,w:x.width(),h:x.height()};if(this.pointInRect(p,c,y)){u={type:"linker_text",shape:h};r.push(u);continue}if(w=(w=7).toScale(e),(W=this.pointInLinker({x:t.restoreScale(e),y:i.restoreScale(e)},h,w))>-1){u={type:"linker",shape:h,pointIndex:W};r.push(u)}}}else{if(v&&h.locked&&!a){if(g.isPointInPath(p,c)){u={type:"shape",shape:h};r.push(u)}continue}var w=7;if(v){y={x:t-(w=w.toScale(e)),y:i-w,w:2*w,h:2*w};for(var S={x:h.props.x+h.props.w/2,y:h.props.y+h.props.h/2},b=h.getAnchors(),D=(u=null,0);D0){var z=P.position(),T=p-z.left,L=c-z.top;if(P[0].getContext("2d").isPointInPath(T,L)){u={type:"dataAttribute",shape:h,attribute:C};break}}}}if(null!=u){r.push(u);continue}}if(!v)continue;if(g.isPointInPath(p,c))if(a){if((b=h.getAnchors())&&b.length){u={type:"shape",shape:h};r.push(u)}}else{u={type:"shape",shape:h};r.push(u)}else if(!h.attribute||void 0===h.attribute.linkable||h.attribute.linkable)if(null!=(I=Utils.getPointAngle(e,o,t.restoreScale(e),i.restoreScale(e),w))){u=null;for(var U={angle:I},A=1;A<=w;A++)if(0==I?(U.x=p+A,U.y=c):I1&&a)u=r[0];else if(r.length>1){var _=r[0];if("bounding"==_.type&&"linker_point"!=_.type&&"linker"!=_.type)return _;var W=[],B=[],V=[];for(s=0;s0&&B.length>0)for(s=0;s0&&(B.sort(function(e,t){return Utils.isSelected(e.shape.id)&&!Utils.isSelected(t.shape.id)?-1:!Utils.isSelected(e.shape.id)&&Utils.isSelected(t.shape.id)?1:t.shape.props.zindex-e.shape.props.zindex}),u=B[0]),null==u&&W.length>0&&(W.sort(function(e,t){return Utils.isSelected(e.shape.id)&&!Utils.isSelected(t.shape.id)?-1:!Utils.isSelected(e.shape.id)&&Utils.isSelected(t.shape.id)?1:t.shape.props.zindex-e.shape.props.zindex}),u=W[0]),null==u&&(u=r[0])}return u},getCirclePoints:function(e,t,i){for(var a=Math.PI/18,n=[],r=0;r<36;r++){var s=a*r,o={x:e-Math.cos(s)*i,y:t-Math.sin(s)*i,angle:s};n.push(o)}return n},getPointAngle:function(e,t,i,a,n){var r=$("#"+t).position(),s=Utils.getShapeContext(t);i=i.toScale(e)-r.left,a=a.toScale(e)-r.top;for(var o=this.getCirclePoints(i,a,n),l=o.length,h=!1,d=0;d=0&&s<=1&&o>=0&&o<=1&&(n=!0)}return n},pointInRect:function(e,t,i){return e>=i.x&&e<=i.x+i.w&&t>=i.y&&t<=i.y+i.h},unselect:function(e){let t=PageModel[e];var i=this.selectIds[e];this.selectIds[e]=[];for(var a=0;aa.x2)&&(a.x2=r.x+r.w),(null==a.y2||r.y+r.h>a.y2)&&(a.y2=r.y+r.h)}return{x:a.x1,y:a.y1,w:a.x2-a.x1,h:a.y2-a.y1}},getSelected:function(e){let t=PageModel[e];for(var i=[],a=0;a").appendTo(i),t=e[0].getContext("2d");return t.strokeStyle="#777",t.lineWidth=1,t.beginPath(),t.moveTo(2,2),t.lineTo(9,9),t.moveTo(2,9),t.lineTo(9,2),t.stroke(),e})().css({left:t.x.toScale(e)-a.left-5,top:t.y.toScale(e)-a.top-5})}if("linker"!=t.name){var r=t.props,s={x:r.x+r.w/2,y:r.y+r.h/2};n(this.getRotated(s,{x:r.x,y:r.y},t.props.angle)),n(this.getRotated(s,{x:r.x+r.w,y:r.y},t.props.angle)),n(this.getRotated(s,{x:r.x+r.w,y:r.y+r.h},t.props.angle)),n(this.getRotated(s,{x:r.x,y:r.y+r.h},t.props.angle))}else n(t.from),n(t.to)},removeLockers:function(){$(".shape_locker").remove()}},GradientHelper={createLinearGradient:function(e,t,i){var a,n,r,s=e.props;if(s.w>s.h?(a={x:0,y:s.h/2},n={x:s.w,y:s.h/2},r=(i.angle+Math.PI/2)%(2*Math.PI)):(a={x:s.w/2,y:0},n={x:s.w/2,y:s.h},r=i.angle),0!=r){var o={x:s.w/2,y:s.h/2};a=Utils.getRotated(o,a,r),n=Utils.getRotated(o,n,r),a.x<0&&(a.x=0),a.x>e.props.w&&(a.x=e.props.w),a.y<0&&(a.y=0),a.y>e.props.h&&(a.y=e.props.h),n.x<0&&(n.x=0),n.x>e.props.w&&(n.x=e.props.w),n.y<0&&(n.y=0),n.y>e.props.h&&(n.y=e.props.h)}var l=t.createLinearGradient(a.x,a.y,n.x,n.y);return l.addColorStop(0,"rgb("+i.beginColor+")"),l.addColorStop(1,"rgb("+i.endColor+")"),l}};var Navigator={init:function(e){VersionDesigner.bindEvent.designerLayoutScroll(e),$("#navigation-eye-"+e).bind("mousedown",function(t){var i=$(this),a=i.position();$("#designer-layout-"+e).unbind("scroll");var n=$("#designer-layout-"+e),r=n.scrollTop(),s=n.scrollLeft(),o=$("#designer-canvas-"+e),l=o.width(),h=o.height(),d=$("#navigation-canvas-"+e),p=d.width(),c=d.height(),f=l/p,g=h/c;$(document).bind("mousemove.navigator",function(o){var l=o.pageX-t.pageX,h=o.pageY-t.pageY,d=s+l*f;n.scrollLeft(d);var p=r+h*g;if(n.scrollTop(p),i.css({left:a.left+l,top:a.top+h}),isSameOperate){let t="left"===e?"right":"left",i=$("#designer-layout-"+t),n=$("#navigation-eye-"+t);i.scrollLeft(d),i.scrollTop(p),n.css({left:a.left+l,top:a.top+h})}}),$(document).bind("mouseup.navigator",function(t){$(document).unbind("mousemove.navigator"),$(document).unbind("mouseup.navigator"),Navigator.setView(e),VersionDesigner.bindEvent.designerLayoutScroll(e)})}),$("#navigation-canvas-"+e).bind("click",function(t){var i=Utils.getRelativePos(t.pageX,t.pageY,$(this)),a=$("#designer-canvas-"+e),n=a.width(),r=a.height(),s=$("#navigation-canvas-"+e),o=n/s.width(),l=r/s.height(),h=i.x*o,d=i.y*l,p=$("#designer-layout-"+e),c=VersionDesigner.config.pageMargin;p.scrollLeft(h+c-p.width()/2),p.scrollTop(d+c-p.height()/2)}),this.setView(e)},drawNavigationTimeout:{left:null,right:null},draw:function(e){let t=PageModel[e];this.drawNavigationTimeout[e]&&window.clearTimeout(this.drawNavigationTimeout[e]),this.drawNavigationTimeout[e]=setTimeout(function(){var i=$("#navigation-canvas-"+e),a=i[0].getContext("2d");a.save(),a.clearRect(0,0,i.width(),i.height()),a.scale(i.width()/t.define.page.width,i.height()/t.define.page.height);for(var n=0;na&&(c=a),f>a?f=a:f<0&&(f=0);var g=p-i.scrollTop(),v=g+d;g<0?g=0:g>n&&(g=n),v>n?v=n:v<0&&(v=0);var y=f-c,u=v-g;if(0==y||0==u)t.hide();else{var x=i.scrollLeft()-p;x<0&&(x=0),x*=s/h;var m=i.scrollTop()-p;m<0&&(m=0),m*=o/d;var w=y*(s/h),S=u*(o/d);t.css({left:x-1,top:m-1,width:w,height:S}).show()}}};function deepCopy(e){if("object"!=typeof e||null===e)return e;let t=Array.isArray(e)?[]:{};for(let i in e)e.hasOwnProperty(i)&&(t[i]=deepCopy(e[i]));return t}$(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,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);for(var anchorsEval="shape.getAnchors = function(){var w = this.props.w; var h = this.props.h; return [",i=0;i 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/scripts/versionCompare/version.methods.js b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.methods.js new file mode 100644 index 00000000..c7ff0da4 --- /dev/null +++ b/com.actionsoft.apps.coe.pal/web/com.actionsoft.apps.coe.pal/lib/designer/scripts/versionCompare/version.methods.js @@ -0,0 +1 @@ +const versionListFun={versionList:[],historyList:[],openVersionList(){$("#versionList").length>0?this.closeVersionList():($('
').appendTo("#designer_header"),this.loadVersionList())},loadVersionList(){function t(t){return`\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t${t.versionNo} ${t.versionStatus1}\n\t\t\t\t\t\t\t${t.updateTime}${t.updateUser}${修改}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t${t.createTime}\n\t\t\t\t\t\t\t ${由}${t.createUser}${创建}\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t${t.hasCreatePerm?``:""}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t`}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(e){if("ok"===e.result){const i={use:设计中,publish:已发布,stop:已停用,approval:审核中,designer:设计};let s=e.data.versionList,a=e.data.historyList;s.forEach(t=>{t.versionStatus1=i[t.versionStatus]}),a.forEach(t=>{t.versionStatus1=i[t.versionStatus]}),versionListFun.versionList=[...s],versionListFun.historyList=[...a];let n="";s.forEach(e=>{n+=t(e)}),a.length>0&&(n+=`
${历史版本}
`,a.forEach(e=>{n+=t({...e,isHistory:!0})})),$("#versionList").empty(),$("#versionList").append(n)}}})},closeVersionList(){$("#versionList")&&$("#versionList").remove()},createNewVersion(t,e){if(t.stopPropagation(),versionListFun.historyList.length>0&&"true"!=isBpmSupportMinor)$.confirm({title:提示,content:`${确定将} ${e.versionNo} ${e.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:e.plId,isLargeIteration:!0,isHistory:e.isHistory||!1},ok:function(t){"ok"===t.result&&versionListFun.loadVersionList()}})}});else{let{plId:t,versionNo:i}=e,s=$("#select_"+t);if(s.is(":visible"))return s.empty(),void s.hide();$(".select-version").hide(),s.show();let a,n,o,r=parseInt(i.match(/\d+\.\d+/g)[0]),l=[],d=[];versionListFun.versionList.concat(versionListFun.historyList).map(t=>t.versionNo.match(/\d+\.\d+/g)[0].split(".")).forEach(t=>{l.push(parseInt(t[0])),t[0]==r&&d.push(parseInt(t[1]))}),a=Math.max(...d)+1,n="v"+(Math.max(...l)+1).toFixed(1),o=e.isHistory?"v"+Math.max(...l)+"."+a:"v"+r+"."+a,s.html(`\n\t\t\t\t
${请选择版本号}:
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t${n}\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t${o}\n\t\t\t\t
\n\t\t\t`),$("input[name='versionRadio']").on("click",function(t){t.stopPropagation();let i="true"==$(this).attr("isLargeIteration");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:e.plId,isLargeIteration:i,isHistory:e.isHistory||!1},ok:function(t){if("ok"===t.result){let e=t.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:e},ok:function(t){if("ok"===t.result){let t=window.location.href,i=new URL(t),s=new URLSearchParams(i.search);s.set("uuid",e),i.search=s.toString(),window.location.href=i.toString()}}})}}})})}},openComparePage(t,e){t.stopPropagation();let i=$("#versionCompareBox");i.empty(),i.show();i.append(''),$("#versionCompareContent").attr("src","./w?sid="+sid+"&cmd=com.actionsoft.apps.coe.pal_pl_repository_designer_version_compare&wsId="+wsId+"&compareVerId="+e.plId+"&curId="+ruuid+"&teamId="+teamId+"&isHistory="+e.isHistory),versionListFun.closeVersionList()},closeComparePage(){parent.$("#versionCompareBox").hide(),parent.$("#versionCompareBox").empty()},switchVersion(t,e){t.stopPropagation(),$("#saving_tip").text()==文件已修改未保存?$.confirm({title:提示,content:文件修改未保存+"，"+是否继续切换,onConfirm:function(){versionListFun.changeCurVersion(e.plId)}}):versionListFun.changeCurVersion(e.plId)},changeCurVersion(t){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:t},ok:function(e){if("ok"===e.result){let e=window.location.href,i=new URL(e),s=new URLSearchParams(i.search);s.set("uuid",t),i.search=s.toString(),window.location.href=i.toString()}}})}},designerZoom={left:100,right:100},fileTabStr=`
\n \t\t\t\t\t\t
${文件属性}
\n \t\t\t\t\t
\n \t\t\t\t\t
\n \t\t\t\t\t\t
${附件}
\n \t\t\t\t\t
\n \t\t\t\t `,shapeTabStr=`
\n \t\t\t\t\t\t
${形状属性}
\n \t\t\t\t\t
\n \t\t\t\t\t
\n \t\t\t\t\t\t
${附件}
\n \t\t\t\t\t
\n \t\t\t\t\t
\n \t\t\t\t\t\t
${链接}
\n \t\t\t\t\t
\n \t\t\t\t `,versionCompareFun={pageZoom(t,e){if(function(t,e){"zoomIn"==e?designerZoom[t]+10>200?designerZoom[t]=200:designerZoom[t]=designerZoom[t]+10:"zoomOut"==e?designerZoom[t]-10<50?designerZoom[t]=50:designerZoom[t]=designerZoom[t]-10:designerZoom[t]=100,VersionDesigner.setZoomScale(t,designerZoom[t]/100),$("#zoom-value-"+t).text(Math.round(100*VersionDesigner.config.scale[t])+"%")}(t,e),isSameOperate){let e="left"===t?"right":"left";designerZoom[e]=designerZoom[t],VersionDesigner.setZoomScale(e,designerZoom[t]/100),$("#zoom-value-"+e).text(Math.round(100*VersionDesigner.config.scale[e])+"%")}},openNavigation:function(t,e){function i(t,e){e?($("#navigation-view-"+t).show(),Navigator.draw(t),$("#show-nav-"+t).hide(),$("#close-nav-"+t).show()):($("#navigation-view-"+t).hide(),$("#show-nav-"+t).show(),$("#close-nav-"+t).hide())}if(i(t,e),isSameOperate){i("left"===t?"right":"left",e)}},openAttributeView:function(t){function e(t){let e=Utils.getSelected(t).length,i=$("#attribute-view-"+t),s=i.find(".head-left");e>0?(s.attr("viewType","shape"),s.html(shapeTabStr),versionCompareFun.writeShapeAttributeHtml(t)):(s.attr("viewType","file"),s.html(fileTabStr),versionCompareFun.writeFileAttributeHtml(t)),i.show();let a=$("#view-btn-"+t);a.find(".btn-text").remove(),a.css("width","45px"),a.hide(),versionCompareFun.attrViewEvent(t)}if(e(t),isSameOperate){e("left"===t?"right":"left")}},closeAttributeView:function(t){if($("#attribute-view-"+t).hide(),$("#view-btn-"+t).show(),isSameOperate){let e="left"===t?"right":"left";$("#attribute-view-"+e).hide(),$("#view-btn-"+e).show()}},attrViewEvent:function(t){let e="left"===t?"right":"left",i=$("#attribute-view-"+t),s=$("#view-body-"+t),a=$("#attribute-view-"+e);i.find(".head-left").off("click").on("click",".attr-tab",function(){i.find(".head-left div.active-tab").removeClass("active-tab"),$(this).addClass("active-tab");let n=$(this).attr("tab");if(s.children().css("display","none"),s.find(".view-"+n).show(),isSameOperate&&a.is(":visible")){let i=$(this).parent().attr("viewType"),s=a.find(".head-left"),r=$("#view-body-"+e);if(i===s.attr("viewType"))o(s,r,n);else if("shape"===i){let i=Utils.getSelectedIds(t)[0];PageModel[e].define.elements[i]&&(Utils.selectShape(e,i),versionCompareFun.updateAttributeView(e),o(s,r,n))}else Utils.unselect(e),versionCompareFun.updateAttributeView(e),o(s,r,n)}function o(t,e,i){t.children().removeClass("active-tab"),t.find(`div[tab=${i}]`).addClass("active-tab"),e.children().css("display","none"),e.find(".view-"+i).show()}}),s.off("scroll").on("scroll",function(){if(isSameOperate&&a.is(":visible")){$("#view-body-"+e).scrollTop($(this).scrollTop())}})},updateAttributeView:function(t){let e=$("#attribute-view-"+t),i=e.find(".head-left"),s=i.attr("viewType");if(e.is(":visible")){let e=Utils.getSelected(t).length;"file"===s?e>0&&(i.html(shapeTabStr),i.attr("viewType","shape"),this.writeShapeAttributeHtml(t)):e>0?this.writeShapeAttributeHtml(t):(i.html(fileTabStr),i.attr("viewType","file"),this.writeFileAttributeHtml(t)),this.attrViewEvent(t)}},writeFileAttributeHtml:function(t){const e=$("#attribute-view-"+t),i=e.find(".active-tab").attr("tab");let s=$("#view-body-"+t);s.empty();let a="left"===t?versionData:curData,n=a.fileAttr,o=a.fileUpFile,r=a.fileRelationUpFile,l=this.getAttrStr(t,n),d=`\n\t\t\t\t\t `;s.html(d),s.find(".view-"+i).show(),e.find(".tab-name").removeClass("attr-diff"),n&&n.some(t=>t.isDiff)&&e.find("div[tab=attr]").find(".tab-name").addClass("attr-diff")},writeShapeAttributeHtml:function(t){const e=$("#attribute-view-"+t),i=e.find(".active-tab").attr("tab");let s=$("#view-body-"+t);s.empty();let a=Utils.getSelected(t)[0];const n="left"===t?versionData:curData;let o=n.shapeAttr[a.id]||[],r=n.shapeUpFile[a.id]||{},l=n.shapeRelationUpFile[a.id]||{},d=n.shapeLink[a.id]||{file:{},custom:{}},c=this.getAttrStr(t,o),p=`\n\t\t\t\t\t \n\t\t\t\t\t `;s.html(p),s.find(".view-"+i).show(),e.find(".tab-name").removeClass("attr-diff"),o.some(t=>t.isDiff)&&e.find("div[tab=attr]").find(".tab-name").addClass("attr-diff"),(r.isDiff||l.isDiff)&&e.find("div[tab=upFile]").find(".tab-name").addClass("attr-diff"),(d.file.isDiff||d.custom.isDiff)&&e.find("div[tab=link]").find(".tab-name").addClass("attr-diff")},getAttrStr:function(t,e){let i="";return e?(e.forEach(e=>{"relation"!==e.type&&"awsorg"!==e.type||(e.value=e.value.toString());let s="";switch(e.type){case"table":if(e.value){let t="",i=JSON.parse(e.value).table;t+=`
\n\t\t\t\t\t\t\t\t\t\t
${i[0].name}
\n\t\t\t\t\t\t\t\t\t\t
${i[0].desc}
\n\t\t\t\t\t\t\t\t\t
`;for(let e=1;e\n\t\t\t\t\t\t\t\t\t\t\t
${i[e].name}
\n\t\t\t\t\t\t\t\t\t\t\t
${i[e].desc}
\n\t\t\t\t\t\t\t\t\t\t`}s=`
${t}
`}else s=`
${暂无}${e.name}
`;break;case"file":let i=!1,a=e.value||[],n="";a.forEach(e=>{let s="";i&&(s=`${e.securityInfo.name}`),n+=`
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t${e.fileName}\n\t\t\t\t\t\t\t\t\t\t\t${s}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
`}),s=`
${""===n?`${暂无}${e.name}`:n}
`;break;case"link":s=`
\n\t\t\t\t\t\t\t\t\t${""===e.value?`${暂无}${e.name}`:`${e.value}`}\n\t\t\t\t\t\t\t\t
`;break;case"shapeLink":let o="";(e.value||[]).forEach(t=>{o+=`
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t${t.value}\n\t\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
`}),s=`
${""===o?`${暂无}${e.name}`:o}
`;break;default:s=`
\n\t\t\t\t\t\t\t\t\t${""===e.value?`${暂无}${e.name}`:`${e.value}`}\n\t\t\t\t\t\t\t\t
`}i+=`
\n\t\t\t\t\t\t
${e.name}
\n\t\t\t\t\t\t${s}\n\t\t\t\t\t
`}),i):i},previewFile(t,e){const i=e.fileName.split(".").reverse()[0];if(!["jpg","jpeg","gif","png"].includes(i))return void window.open(e.downloadUrl);$("#attribute-view-"+t).css("opacity",0),$("#model-"+t).show();const s="left"===t?"right":"left",a=document.body.clientWidth,n=$("#file-preview-"+t),o=$("#file-preview-"+s),r=new Image;r.src=e.downloadUrl,r.addEventListener("load",function(){n.find("img").attr("src",r.src),n.dialog({title:e.fileName,width:650,height:480,model:!1,onClose:function(){$("#model-"+t).hide(),$("#attribute-view-"+t).css("opacity",1)}});let i=n.outerWidth(!0),l=o.outerWidth(!0),d=a/2/2-i/2;if("right"===t&&(d+=a/2),n.css({left:d+"px"}),o.is(":visible")){let t=a/2/2-l/2;"right"===s&&(t+=a/2),o.css({left:t+"px"})}})},isOpenSameOperate(t){isSameOperate=t,t?($(".opend-operate").show(),$(".closed-operate").hide()):($(".opend-operate").hide(),$(".closed-operate").show())},openCompareList(){versionCompareFun.closeAttributeView("left"),versionCompareFun.closeAttributeView("right");let t=$("#compareVersionList");t.is(":visible")?(t.hide(),t.empty()):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(e){if("ok"===e.result){const i={use:设计中,publish:已发布,stop:已停用,approval:审核中,designer:设计};let s=e.data.versionList,a=e.data.historyList;s.forEach(t=>{t.versionStatus1=i[t.versionStatus]}),a.forEach(t=>{t.isHistory=!0,t.versionStatus1=i[t.versionStatus]});let n=s.concat(a);t.empty();let o="";n.forEach(t=>{let e=t.versionNo===versionData.versionNo||t.versionNo===curData.versionNo;o+=`\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t${t.versionNo} ${t.versionStatus1}\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t${t.updateTime} ${由}${t.updateUser}${修改}\n\t\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\t${t.versionNo===versionData.versionNo?"":""}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t`}),t.append(o),t.show()}}})},closeVersionListByClick(t){let e=$("#compareVersionList");if(!e.is(":visible"))return;let i=t.target,s=document.getElementById("compareVersionList").contains(i),a=document.querySelector(".center-top").contains(i);s||a||(e.hide(),e.empty())},changeComparePageUrl(t,e,i){if($(t).hasClass("disabled"))return;let s=$("#compareVersionList"),a=parent.$("#versionCompareContent");s.hide(),s.empty(),parent.$.simpleAlert(正在切换,"loading"),a.attr("src","./w?sid="+parent.sid+"&cmd=com.actionsoft.apps.coe.pal_pl_repository_designer_version_compare&wsId="+parent.wsId+"&compareVerId="+e+"&curId="+curData.plId+"&teamId="+parent.teamId+"&isHistory="+i),a.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(t){if("ok"===t.result){let t=parent.window.location.href,e=new URL(t),i=new URLSearchParams(e.search);i.set("uuid",versionData.plId),e.search=i.toString(),parent.window.location.href=e.toString()}}})}})}}; \ No newline at end of file