编辑路线时提高svg层级
This commit is contained in:
yyy
parent
b5a5827f89
commit
0b68d94c82
@ -669,7 +669,12 @@
|
||||
<svg
|
||||
:width="imgBgObj.width"
|
||||
:height="imgBgObj.height"
|
||||
style="position: absolute; top: 0; left: 0; z-index: 9"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
zIndex: state.svgRouteZIndex
|
||||
}"
|
||||
id="svgId"
|
||||
>
|
||||
<!-- 实时绘制当前直线 -->
|
||||
@ -753,27 +758,49 @@
|
||||
stroke-dasharray="4"
|
||||
stroke-width="2"
|
||||
/>
|
||||
<circle
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
id="startCircle"
|
||||
:cx="curve.beginControlX"
|
||||
:cy="curve.beginControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#2d72d9'"
|
||||
@mousedown="startDrag(curve, index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-if="state.currentDragTarget.index == index"
|
||||
id="endCircle"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
:fill="curve.isSelected ? '#f48924' : '#2d72d9'"
|
||||
@mousedown="startDrag(curve, index, 'end')"
|
||||
/>
|
||||
<!-- 控制点circle已移至SVG末尾 -->
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 控制点circle统一渲染，保证层级最高 -->
|
||||
<template v-if="state.currentDragTarget.index !== null">
|
||||
<circle
|
||||
id="startCircle"
|
||||
:cx="state.mapRouteList[state.currentDragTarget.index].beginControlX"
|
||||
:cy="state.mapRouteList[state.currentDragTarget.index].beginControlY"
|
||||
r="5"
|
||||
:fill="
|
||||
state.mapRouteList[state.currentDragTarget.index].isSelected
|
||||
? '#f48924'
|
||||
: '#2d72d9'
|
||||
"
|
||||
@mousedown="
|
||||
startDrag(
|
||||
state.mapRouteList[state.currentDragTarget.index],
|
||||
state.currentDragTarget.index,
|
||||
'start'
|
||||
)
|
||||
"
|
||||
/>
|
||||
<circle
|
||||
id="endCircle"
|
||||
:cx="state.mapRouteList[state.currentDragTarget.index].endControlX"
|
||||
:cy="state.mapRouteList[state.currentDragTarget.index].endControlY"
|
||||
r="5"
|
||||
:fill="
|
||||
state.mapRouteList[state.currentDragTarget.index].isSelected
|
||||
? '#f48924'
|
||||
: '#2d72d9'
|
||||
"
|
||||
@mousedown="
|
||||
startDrag(
|
||||
state.mapRouteList[state.currentDragTarget.index],
|
||||
state.currentDragTarget.index,
|
||||
'end'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
@ -1684,7 +1711,8 @@ const state = reactive({
|
||||
MathPI: Math.PI,
|
||||
routeDirection: 2, //1单2双
|
||||
vLine: [],
|
||||
hLine: []
|
||||
hLine: [],
|
||||
svgRouteZIndex: 9
|
||||
})
|
||||
|
||||
const getRefLineParams = (params) => {
|
||||
@ -1778,6 +1806,13 @@ const toolbarClick = async (item) => {
|
||||
state.cursorStyle = `auto`
|
||||
}
|
||||
|
||||
//编辑路线的时候更换svg层级
|
||||
if (toolbarSwitchType.value === 'editRoute') {
|
||||
state.svgRouteZIndex = 999
|
||||
} else {
|
||||
state.svgRouteZIndex = 9
|
||||
}
|
||||
|
||||
//非测距
|
||||
if (toolbarSwitchType.value !== 'ranging') {
|
||||
state.measureDistancesPoints = [] // 清空存储点击的点位
|
||||
|
||||
@ -57,156 +57,11 @@ module.exports = {
|
||||
{
|
||||
severity: 'warning'
|
||||
}
|
||||
],
|
||||
// Specify the alphabetical order of the attributes in the declaration block
|
||||
'order/properties-order': [
|
||||
'position',
|
||||
'top',
|
||||
'right',
|
||||
'bottom',
|
||||
'left',
|
||||
'z-index',
|
||||
'display',
|
||||
'float',
|
||||
'width',
|
||||
'height',
|
||||
'max-width',
|
||||
'max-height',
|
||||
'min-width',
|
||||
'min-height',
|
||||
'padding',
|
||||
'padding-top',
|
||||
'padding-right',
|
||||
'padding-bottom',
|
||||
'padding-left',
|
||||
'margin',
|
||||
'margin-top',
|
||||
'margin-right',
|
||||
'margin-bottom',
|
||||
'margin-left',
|
||||
'margin-collapse',
|
||||
'margin-top-collapse',
|
||||
'margin-right-collapse',
|
||||
'margin-bottom-collapse',
|
||||
'margin-left-collapse',
|
||||
'overflow',
|
||||
'overflow-x',
|
||||
'overflow-y',
|
||||
'clip',
|
||||
'clear',
|
||||
'font',
|
||||
'font-family',
|
||||
'font-size',
|
||||
'font-smoothing',
|
||||
'osx-font-smoothing',
|
||||
'font-style',
|
||||
'font-weight',
|
||||
'hyphens',
|
||||
'src',
|
||||
'line-height',
|
||||
'letter-spacing',
|
||||
'word-spacing',
|
||||
'color',
|
||||
'text-align',
|
||||
'text-decoration',
|
||||
'text-indent',
|
||||
'text-overflow',
|
||||
'text-rendering',
|
||||
'text-size-adjust',
|
||||
'text-shadow',
|
||||
'text-transform',
|
||||
'word-break',
|
||||
'word-wrap',
|
||||
'white-space',
|
||||
'vertical-align',
|
||||
'list-style',
|
||||
'list-style-type',
|
||||
'list-style-position',
|
||||
'list-style-image',
|
||||
'pointer-events',
|
||||
'cursor',
|
||||
'background',
|
||||
'background-attachment',
|
||||
'background-color',
|
||||
'background-image',
|
||||
'background-position',
|
||||
'background-repeat',
|
||||
'background-size',
|
||||
'border',
|
||||
'border-collapse',
|
||||
'border-top',
|
||||
'border-right',
|
||||
'border-bottom',
|
||||
'border-left',
|
||||
'border-color',
|
||||
'border-image',
|
||||
'border-top-color',
|
||||
'border-right-color',
|
||||
'border-bottom-color',
|
||||
'border-left-color',
|
||||
'border-spacing',
|
||||
'border-style',
|
||||
'border-top-style',
|
||||
'border-right-style',
|
||||
'border-bottom-style',
|
||||
'border-left-style',
|
||||
'border-width',
|
||||
'border-top-width',
|
||||
'border-right-width',
|
||||
'border-bottom-width',
|
||||
'border-left-width',
|
||||
'border-radius',
|
||||
'border-top-right-radius',
|
||||
'border-bottom-right-radius',
|
||||
'border-bottom-left-radius',
|
||||
'border-top-left-radius',
|
||||
'border-radius-topright',
|
||||
'border-radius-bottomright',
|
||||
'border-radius-bottomleft',
|
||||
'border-radius-topleft',
|
||||
'content',
|
||||
'quotes',
|
||||
'outline',
|
||||
'outline-offset',
|
||||
'opacity',
|
||||
'filter',
|
||||
'visibility',
|
||||
'size',
|
||||
'zoom',
|
||||
'transform',
|
||||
'box-align',
|
||||
'box-flex',
|
||||
'box-orient',
|
||||
'box-pack',
|
||||
'box-shadow',
|
||||
'box-sizing',
|
||||
'table-layout',
|
||||
'animation',
|
||||
'animation-delay',
|
||||
'animation-duration',
|
||||
'animation-iteration-count',
|
||||
'animation-name',
|
||||
'animation-play-state',
|
||||
'animation-timing-function',
|
||||
'animation-fill-mode',
|
||||
'transition',
|
||||
'transition-delay',
|
||||
'transition-duration',
|
||||
'transition-property',
|
||||
'transition-timing-function',
|
||||
'background-clip',
|
||||
'backface-visibility',
|
||||
'resize',
|
||||
'appearance',
|
||||
'user-select',
|
||||
'interpolation-mode',
|
||||
'direction',
|
||||
'marks',
|
||||
'page',
|
||||
'set-link-source',
|
||||
'unicode-bidi',
|
||||
'speak'
|
||||
]
|
||||
// Specify the alphabetical order of the attributes in the declaration block
|
||||
// 'order/properties-order': [
|
||||
// ...
|
||||
// ],
|
||||
},
|
||||
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
|
||||
overrides: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user