From 7bdee7d2c457e088ac69122e3aeb109bb4216f3e Mon Sep 17 00:00:00 2001 From: zhangyu Date: Thu, 11 Aug 2022 10:30:56 +0800 Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E4=BC=98=E5=8C=96diagram=E7=9B=B8?= =?UTF-8?q?=E5=85=B3=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/ChartDiagram/diagram.vue | 75 ++++------ .../common/project/L5/services/canvas.js | 128 ++++++++++++------ .../common/project/topologyMixin.js | 3 + 3 files changed, 121 insertions(+), 85 deletions(-) diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue index adc82c05e..53194265a 100644 --- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue +++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue @@ -333,17 +333,11 @@ import imgDefault from '@/components/common/project/L5/services/img' import { Tools, imageTemp2, - rectangleImg, - rectangleImgAnchors, + rectangleImg2, + rectangleImgAnchors2, disposeTopoOldData, - // myShape, - // myAnchors, - // myIconRect, - // myTextRect, onChangeAnimate, onChangeAnimateLine - // myCubec, - // myCubeAnchors } from '@/components/common/project/L5/services/canvas.js' import { getTopology, setTopology, dealImg, topologyImg } from '../js/common' @@ -360,14 +354,6 @@ import { getMetricTypeValue, dealLegendAlias } from '../js/tools' import bus from '../../../libs/bus' import topologyMixin from '@/components/common/project/topologyMixin' -const canvasOptions = { - rotateCursor: '/img/rotate.cur', - translateKey: 'None', - disableEmptyLine: true, - autoExpandDistance: 0, - minScale: 0.2 - // scaleKey: -1 -} export default { name: 'diagram', mixins: [topologyMixin], @@ -388,7 +374,7 @@ export default { group: 'Diagram', children: [ { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', @@ -408,7 +394,7 @@ export default { } }, { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', @@ -428,7 +414,7 @@ export default { } }, { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', @@ -832,8 +818,8 @@ export default { getTopology(this.topologyIndex).register(sequencePens()) getTopology(this.topologyIndex).registerCanvasDraw(sequencePensbyCtx()) getTopology(this.topologyIndex).registerCanvasDraw(formPens()) - getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg: rectangleImg }) - getTopology(this.topologyIndex).registerAnchors({ rectangleImg: rectangleImgAnchors }) + getTopology(this.topologyIndex).registerCanvasDraw({ rectangleImg2: rectangleImg2 }) + getTopology(this.topologyIndex).registerAnchors({ rectangleImg2: rectangleImgAnchors2 }) getTopology(this.topologyIndex).on('translate', this.topTranslate) // 平移· getTopology(this.topologyIndex).on('active', this.pensActive) // 选中· getTopology(this.topologyIndex).on('scale', this.topoScale) // 缩放· @@ -1174,28 +1160,30 @@ export default { } }, + /* topology 方法 */ /* topology 方法 */ onDrag (event, node) { + console.log(event, node) this.dragFlag = false - node.data.text = '' - setTimeout(() => { + const timer = setTimeout(() => { this.dragFlag = true + clearTimeout(timer) }, 100) event.dataTransfer.setData('Text', JSON.stringify({ ...node.data, data: { imageId: node.data.imageId } })) }, dragFlagChange (node) { - getTopology(this.topologyIndex).addNode( + console.log(node) + getTopology(this.topologyIndex).addPen( { ...node.data, - rect: { - ...node.data.rect, - x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50, - y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50 - }, + ...node.data.rect, + x: this.$refs['topology-canvas' + this.topologyIndexF].offsetWidth / 2 - 50, + y: this.$refs['topology-canvas' + this.topologyIndexF].offsetHeight / 2 - 50, data: { imageId: node.data.imageId } }) - setTimeout(() => { + const timer = setTimeout(() => { this.dragFlag = true + clearTimeout(timer) }, 100) }, getLocked (data) { @@ -1398,14 +1386,13 @@ export default { group: 'Diagram', children: [ { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', - rect: { - width: 30, - height: 20 - }, + width: 30, + height: 20, + type: 0, paddingLeft: 10, paddingRight: 10, paddingTop: 10, @@ -1418,14 +1405,13 @@ export default { } }, { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', - rect: { - width: 30, - height: 30 - }, + width: 30, + height: 30, + type: 0, paddingLeft: 10, paddingRight: 10, paddingTop: 10, @@ -1438,14 +1424,13 @@ export default { } }, { - name: 'rectangle2', + name: 'rectangleImg2', icon: 'icon-rect', data: { text: 'rect', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, + type: 0, paddingLeft: 10, paddingRight: 10, paddingTop: 10, diff --git a/nezha-fronted/src/components/common/project/L5/services/canvas.js b/nezha-fronted/src/components/common/project/L5/services/canvas.js index 548bbef17..4aaf2d3e6 100644 --- a/nezha-fronted/src/components/common/project/L5/services/canvas.js +++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js @@ -27,10 +27,8 @@ export const Tools = [ icon: 'icon-rect', data: { text: 'rect', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, paddingLeft: 10, paddingRight: 10, paddingTop: 10, @@ -43,10 +41,8 @@ export const Tools = [ icon: 'icon-rectangle', data: { text: 'rectangle', - rect: { - width: 200, - height: 50 - }, + width: 200, + height: 50, paddingLeft: 10, paddingRight: 10, paddingTop: 10, @@ -63,10 +59,8 @@ export const Tools = [ icon: 'icon-circle', data: { text: 'circle', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, name: 'circle', textMaxLine: 1 } @@ -76,10 +70,8 @@ export const Tools = [ icon: 'icon-triangle', data: { text: 'triangle', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, name: 'triangle' } }, @@ -88,10 +80,8 @@ export const Tools = [ icon: 'icon-diamond', data: { text: 'diamond', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, name: 'diamond' } }, @@ -100,10 +90,8 @@ export const Tools = [ icon: 'icon-pentagon', data: { text: 'pentagon', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, name: 'pentagon' } }, @@ -112,10 +100,8 @@ export const Tools = [ icon: 'icon-hexagon', data: { text: 'hexagon', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, paddingTop: 10, paddingBottom: 10, name: 'hexagon' @@ -126,10 +112,8 @@ export const Tools = [ icon: 'icon-pentagram', data: { text: 'pentagram', - rect: { - width: 100, - height: 100 - }, + width: 100, + height: 100, name: 'pentagram' } } @@ -184,16 +168,14 @@ export const imageTemp = { } } export const imageTemp2 = { - name: 'rectangleImg2', + name: 'rectangleImg', icon: 'icon-image', data: { type: 0, - rect: { - x: 922, - y: 406, - width: 100, - height: 100 - }, + x: 922, + y: 406, + width: 100, + height: 100, imageRatio: false, lineWidth: 0, rotate: 0, @@ -203,7 +185,7 @@ export const imageTemp2 = { color: '#000000', background: '#ffffff00', animatePos: 0, - name: 'rectangleImg2', + name: 'rectangleImg', lineDashOffset: 0, text: '', textOffsetX: 0, @@ -297,6 +279,72 @@ export function rectangleImgAnchors (pen) { // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right)) // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom)) } +export function rectangleImg2 (ctx, pen) { + ctx.beginPath() + + ctx.rect(pen.x, pen.y, pen.width, pen.height) + if (pen.data && !pen.data.animateNeedLine) { + if (pen.data && pen.data.lineWidth <= 0) { + ctx.strokeStyle = 'rgba(0,0,0,0)' + } + } + // 必须判空再填充 + (pen.background || pen.bkType) && ctx.fill() + pen.calculative.worldIconRect = { + height: pen.height - 10, + rotate: 0, + width: pen.width - 10, + x: pen.x + 5, + y: pen.y + 5 + } + pen.calculative.worldTextRect = { + height: 20, + width: pen.width - 10, + x: pen.x + 5, + y: pen.y + pen.height + } + // pen.iconRect = new Rect(pen.x + pen.paddingLeft, pen.y + pen.paddingTop, pen.width - (pen.paddingLeft + pen.paddingRight), pen.height - 20 - (pen.paddingTop + pen.paddingBottom)) + // pen.fullIconRect = { width: 80, height: 90, center: { x: 972, y: 456 }, ex: 1012, ey: 496 } + ctx.stroke() +} +export function rectangleImgAnchors2 (pen) { + const anchors = [] + anchors.push({ + id: '0', + penId: pen.id, + x: pen.x, + y: pen.y + pen.height / 2 + }) + anchors.push({ + id: '1', + penId: pen.id, + x: pen.x + pen.width / 2, + y: pen.y + }) + anchors.push({ + id: '2', + penId: pen.id, + x: pen.x + pen.width, + y: pen.y + pen.height / 2 + }) + anchors.push({ + id: '3', + penId: pen.id, + x: pen.x + pen.width / 2, + y: pen.y + pen.height + }) + anchors.push({ + id: '4', + penId: pen.id, + x: pen.x, + y: pen.y + pen.height / 8 + }) + return anchors + // pen.anchors.push(new Point(pen.x, pen.y + pen.height / 2, Direction.Left)) + // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y, Direction.Up)) + // pen.anchors.push(new Point(pen.x + pen.width, pen.y + pen.height / 2, Direction.Right)) + // pen.anchors.push(new Point(pen.x + pen.width / 2, pen.y + pen.height, Direction.Bottom)) +} export function disposeTopoOldData (pen, allPen) { // 处理旧数据 let obj = {} if (pen.type === 0) { diff --git a/nezha-fronted/src/components/common/project/topologyMixin.js b/nezha-fronted/src/components/common/project/topologyMixin.js index d04ec69c9..c43640be7 100644 --- a/nezha-fronted/src/components/common/project/topologyMixin.js +++ b/nezha-fronted/src/components/common/project/topologyMixin.js @@ -6,6 +6,7 @@ export default { }, methods: { appPen (pen) { + console.log(pen) this.modulesDiff() const data = pen[0] if (data.type === 0 && !data.data.moduleId) { @@ -104,8 +105,10 @@ export default { if (data.type === 0 || data.type === 1) { data.lineWidth = data.data.lineWidth } + getTopology(this.topologyIndex).setValue(data) }, pensActive (pens) { + console.log(pens) this.props = { node: null, line: null,