|
@@ -15,11 +15,7 @@
|
|
|
<div class="mx-palette">
|
|
|
<div class="palette-title">基本图形</div>
|
|
|
<div class="palette-shape">
|
|
|
- <span
|
|
|
- v-for="(shape, index) in shapes"
|
|
|
- :key="index"
|
|
|
- :style="shape.style"
|
|
|
- :class="shape.class"
|
|
|
+ <span v-for="(shape, index) in shapes" :key="index" :style="shape.style" :class="shape.class"
|
|
|
ref="baseShapeRef">
|
|
|
<!-- <span class="shape-label">{{ shape.label }}</span> -->
|
|
|
</span>
|
|
@@ -35,19 +31,11 @@
|
|
|
</div>
|
|
|
<div class="property-item">
|
|
|
<label>宽度:</label>
|
|
|
- <input
|
|
|
- v-model.number="cellGeometry.width"
|
|
|
- @change="updateCellGeometry"
|
|
|
- type="number"
|
|
|
- min="10" />
|
|
|
+ <input v-model.number="cellGeometry.width" @change="updateCellGeometry" type="number" min="10" />
|
|
|
</div>
|
|
|
<div class="property-item">
|
|
|
<label>高度:</label>
|
|
|
- <input
|
|
|
- v-model.number="cellGeometry.height"
|
|
|
- @change="updateCellGeometry"
|
|
|
- type="number"
|
|
|
- min="10" />
|
|
|
+ <input v-model.number="cellGeometry.height" @change="updateCellGeometry" type="number" min="10" />
|
|
|
</div>
|
|
|
<div class="property-item">
|
|
|
<label>填充色:</label>
|
|
@@ -68,7 +56,6 @@ import {
|
|
|
myMxConstants,
|
|
|
myMxGraph,
|
|
|
myMxEvent,
|
|
|
- myMxPopupMenu,
|
|
|
myMxEditor,
|
|
|
myMxPerimeter,
|
|
|
myMxClient,
|
|
@@ -77,8 +64,6 @@ import {
|
|
|
myMxVertexHandler,
|
|
|
myMxUtils,
|
|
|
myMxPoint,
|
|
|
- myMxRectangle,
|
|
|
- myMxImageShape,
|
|
|
myMxCell,
|
|
|
myMxGeometry,
|
|
|
myMxRubberband,
|
|
@@ -105,9 +90,9 @@ const graph = ref<typeof myMxGraph | null>(null)
|
|
|
const editor = ref<typeof myMxEditor | null>(null)
|
|
|
const undoMng = ref<typeof myMxUndoManager | null>(null)
|
|
|
const outline = ref<typeof myMxOutline | null>(null)
|
|
|
-const currentNormalType = ref<typeof myMxCell | null>(null)
|
|
|
+// const currentNormalType = ref<typeof myMxCell | null>(null)
|
|
|
const textValue = ref('')
|
|
|
-const uploadDataVisible = ref(false)
|
|
|
+// const uploadDataVisible = ref(false)
|
|
|
const isNode = ref(false)
|
|
|
const cellStyle = ref<Record<string, any>>({})
|
|
|
const edgeStyle = ref('orthogonalEdgeStyle')
|
|
@@ -207,6 +192,7 @@ const initGraph = (container: HTMLElement) => {
|
|
|
console.log('拖放')
|
|
|
return true
|
|
|
}
|
|
|
+ return false
|
|
|
}
|
|
|
|
|
|
// 禁用分组的收缩功能 方法2:
|
|
@@ -384,7 +370,7 @@ const configureStyles = (graph: typeof myMxGraph) => {
|
|
|
})
|
|
|
|
|
|
var edgeStyles = graph.getStylesheet().getDefaultEdgeStyle()
|
|
|
- let labelStyle = graph.getStylesheet().getDefaultVertexStyle()
|
|
|
+ // let labelStyle = graph.getStylesheet().getDefaultVertexStyle()
|
|
|
|
|
|
// 设置连线风格(设置为正交折线)
|
|
|
edgeStyles['edgeStyle'] = 'orthogonalEdgeStyle'
|
|
@@ -536,12 +522,12 @@ const configMouseEvent = () => {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- mouseMove: (sender, me) => {
|
|
|
+ mouseMove: (_sender, me) => {
|
|
|
graphX.value = Math.ceil(me.graphX)
|
|
|
graphY.value = Math.ceil(me.graphY)
|
|
|
},
|
|
|
|
|
|
- mouseUp: (sender, evt) => {
|
|
|
+ mouseUp: (_sender: any, evt: any) => {
|
|
|
console.log('mouseUp')
|
|
|
if (evt.sourceState === undefined) {
|
|
|
return false
|
|
@@ -556,6 +542,7 @@ const configMouseEvent = () => {
|
|
|
if (!isNode.value) {
|
|
|
// 点击的不是节点
|
|
|
getcellStyle ? (edgeStyle.value = getcellStyle) : 'orthogonalEdgeStyle'
|
|
|
+ return false
|
|
|
} else {
|
|
|
// 点击的是节点
|
|
|
if (getcellStyle) {
|
|
@@ -568,10 +555,13 @@ const configMouseEvent = () => {
|
|
|
}
|
|
|
})
|
|
|
cellStyle.value = styleObject
|
|
|
+ return true
|
|
|
}
|
|
|
+ return false
|
|
|
}
|
|
|
} else {
|
|
|
alert('请选择节点或者连线')
|
|
|
+ return false
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -701,6 +691,7 @@ onMounted(async () => {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
@import '@/assets/graph/style/general-shap.css';
|
|
|
+
|
|
|
.app-container {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
@@ -749,6 +740,7 @@ h1 {
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-around;
|
|
|
align-content: space-around;
|
|
|
+
|
|
|
.common {
|
|
|
width: 30%;
|
|
|
cursor: pointer;
|
|
@@ -756,6 +748,7 @@ h1 {
|
|
|
white-space: wrap;
|
|
|
text-align: center;
|
|
|
position: relative;
|
|
|
+
|
|
|
.shape-label {
|
|
|
position: absolute;
|
|
|
bottom: -30px;
|