diff --git a/core/core-frontend/config/base.ts b/core/core-frontend/config/base.ts index ddb203e13c..61513f83d1 100644 --- a/core/core-frontend/config/base.ts +++ b/core/core-frontend/config/base.ts @@ -26,6 +26,6 @@ export default { } } }, - sourcemap: true + sourcemap: false } } diff --git a/core/core-frontend/src/components/data-visualization/canvas/MarkLine.vue b/core/core-frontend/src/components/data-visualization/canvas/MarkLine.vue index a585fd99b6..fda43811bc 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/MarkLine.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/MarkLine.vue @@ -34,123 +34,126 @@ const showLine = (isDownward, isRightward) => { hideLine() components.forEach(component => { - if (component === curComponent.value) return - const componentStyle = getComponentRotatedStyle(component.style) - const { top, left, bottom, right } = componentStyle - const componentHalfWidth = componentStyle.width / 2 - const componentHalfHeight = componentStyle.height / 2 + try { + if (component === curComponent.value) return + const componentStyle = getComponentRotatedStyle(component.style) + const { top, left, bottom, right } = componentStyle + const componentHalfWidth = componentStyle.width / 2 + const componentHalfHeight = componentStyle.height / 2 + const conditions = { + top: [ + { + isNearly: isNearly(curComponentStyle.top, top), + lineNode: linesRef.xt[0], // xt + line: 'xt', + dragShift: top, + lineShift: top + }, + { + isNearly: isNearly(curComponentStyle.bottom, top), + lineNode: linesRef.xt[0], // xt + line: 'xt', + dragShift: top - curComponentStyle.height, + lineShift: top + }, + { + // 组件与拖拽节点的中间是否对齐 + isNearly: isNearly( + curComponentStyle.top + curComponentHalfHeight, + top + componentHalfHeight + ), + lineNode: linesRef.xc[0], // xc + line: 'xc', + dragShift: top + componentHalfHeight - curComponentHalfHeight, + lineShift: top + componentHalfHeight + }, + { + isNearly: isNearly(curComponentStyle.top, bottom), + lineNode: linesRef.xb[0], // xb + line: 'xb', + dragShift: bottom, + lineShift: bottom + }, + { + isNearly: isNearly(curComponentStyle.bottom, bottom), + lineNode: linesRef.xb[0], // xb + line: 'xb', + dragShift: bottom - curComponentStyle.height, + lineShift: bottom + } + ], + left: [ + { + isNearly: isNearly(curComponentStyle.left, left), + lineNode: linesRef.yl[0], // yl + line: 'yl', + dragShift: left, + lineShift: left + }, + { + isNearly: isNearly(curComponentStyle.right, left), + lineNode: linesRef.yl[0], // yl + line: 'yl', + dragShift: left - curComponentStyle.width, + lineShift: left + }, + { + // 组件与拖拽节点的中间是否对齐 + isNearly: isNearly( + curComponentStyle.left + curComponentHalfWidth, + left + componentHalfWidth + ), + lineNode: linesRef.yc[0], // yc + line: 'yc', + dragShift: left + componentHalfWidth - curComponentHalfWidth, + lineShift: left + componentHalfWidth + }, + { + isNearly: isNearly(curComponentStyle.left, right), + lineNode: linesRef.yr[0], // yr + line: 'yr', + dragShift: right, + lineShift: right + }, + { + isNearly: isNearly(curComponentStyle.right, right), + lineNode: linesRef.yr[0], // yr + line: 'yr', + dragShift: right - curComponentStyle.width, + lineShift: right + } + ] + } - const conditions = { - top: [ - { - isNearly: isNearly(curComponentStyle.top, top), - lineNode: linesRef.xt[0], // xt - line: 'xt', - dragShift: top, - lineShift: top - }, - { - isNearly: isNearly(curComponentStyle.bottom, top), - lineNode: linesRef.xt[0], // xt - line: 'xt', - dragShift: top - curComponentStyle.height, - lineShift: top - }, - { - // 组件与拖拽节点的中间是否对齐 - isNearly: isNearly( - curComponentStyle.top + curComponentHalfHeight, - top + componentHalfHeight - ), - lineNode: linesRef.xc[0], // xc - line: 'xc', - dragShift: top + componentHalfHeight - curComponentHalfHeight, - lineShift: top + componentHalfHeight - }, - { - isNearly: isNearly(curComponentStyle.top, bottom), - lineNode: linesRef.xb[0], // xb - line: 'xb', - dragShift: bottom, - lineShift: bottom - }, - { - isNearly: isNearly(curComponentStyle.bottom, bottom), - lineNode: linesRef.xb[0], // xb - line: 'xb', - dragShift: bottom - curComponentStyle.height, - lineShift: bottom - } - ], - left: [ - { - isNearly: isNearly(curComponentStyle.left, left), - lineNode: linesRef.yl[0], // yl - line: 'yl', - dragShift: left, - lineShift: left - }, - { - isNearly: isNearly(curComponentStyle.right, left), - lineNode: linesRef.yl[0], // yl - line: 'yl', - dragShift: left - curComponentStyle.width, - lineShift: left - }, - { - // 组件与拖拽节点的中间是否对齐 - isNearly: isNearly( - curComponentStyle.left + curComponentHalfWidth, - left + componentHalfWidth - ), - lineNode: linesRef.yc[0], // yc - line: 'yc', - dragShift: left + componentHalfWidth - curComponentHalfWidth, - lineShift: left + componentHalfWidth - }, - { - isNearly: isNearly(curComponentStyle.left, right), - lineNode: linesRef.yr[0], // yr - line: 'yr', - dragShift: right, - lineShift: right - }, - { - isNearly: isNearly(curComponentStyle.right, right), - lineNode: linesRef.yr[0], // yr - line: 'yr', - dragShift: right - curComponentStyle.width, - lineShift: right - } - ] - } - - const needToShow = [] - const { rotate } = curComponent.value.style - if (conditions) { - Object.keys(conditions).forEach(key => { - // 遍历符合的条件并处理 - if (conditions[key]) { - conditions[key].forEach(condition => { - if (!condition.isNearly) return - // 修改当前组件位移 - dvMainStore.setShapeSingleStyle({ - key, - value: - rotate != 0 - ? translateCurComponentShift(key, condition, curComponentStyle) - : condition.dragShift + const needToShow = [] + const { rotate } = curComponent.value.style + if (conditions) { + Object.keys(conditions).forEach(key => { + // 遍历符合的条件并处理 + if (conditions[key]) { + conditions[key].forEach(condition => { + if (!condition.isNearly) return + // 修改当前组件位移 + dvMainStore.setShapeSingleStyle({ + key, + value: + rotate != 0 + ? translateCurComponentShift(key, condition, curComponentStyle) + : condition.dragShift + }) + if (condition.lineNode) { + condition.lineNode.style[key] = `${condition.lineShift}px` + } + needToShow.push(condition.line) }) - if (condition.lineNode) { - condition.lineNode.style[key] = `${condition.lineShift}px` - } - needToShow.push(condition.line) - }) - } - }) - } - if (needToShow.length) { - chooseTheTrueLine(needToShow, isDownward, isRightward) + } + }) + } + if (needToShow.length) { + chooseTheTrueLine(needToShow, isDownward, isRightward) + } + } catch (e) { + console.warn('markLine disabled') } }) } diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue index eb09577e50..59f2949f8e 100644 --- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue +++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue @@ -83,10 +83,10 @@ const onPositionChange = key => { positionMounted.value[key] = 0 } const originRadio = curComponent.value.style.width / curComponent.value.style.height - curComponent.value.style[key] = Math.round( - (positionMounted.value[key] * canvasStyleData.value.scale) / 100 - ) if (curComponent.value.maintainRadio) { + curComponent.value.style[key] = Math.ceil( + (positionMounted.value[key] * canvasStyleData.value.scale) / 100 + ) if (key === 'width') { curComponent.value.style['height'] = curComponent.value.style['width'] / originRadio positionMounted.value['height'] = Math.round(positionMounted.value['width'] / originRadio) @@ -94,6 +94,10 @@ const onPositionChange = key => { curComponent.value.style['width'] = curComponent.value.style['height'] * originRadio positionMounted.value['width'] = Math.round(positionMounted.value['height'] * originRadio) } + } else { + curComponent.value.style[key] = Math.round( + (positionMounted.value[key] * canvasStyleData.value.scale) / 100 + ) } if (curComponent.value.component === 'Group') {