vue-wiring-diagram 1.1.21 → 1.1.23

package/packages/components/edge-control/index.vue

@@ -1,94 +1,94 @@
-/**
-* @Author: HuaYJ
-* @Date: 2025/4/9 09:22
-*/
-<template>
-    <div class="container">
-        <div class="row-column" style="padding:5px 1px 10px">
-            <el-row :gutter="20">
-                <el-col :span="12">
-                    <div class="row-label">线段类型</div>
-                </el-col>
-                <el-col :span="12">
-                    <el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
-                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
-                        </el-option>
-                    </el-select>
-                </el-col>
-            </el-row>
-        </div>
-        <component :is="component" :payload="payload" :itemId="itemId"></component>
-    </div>
-</template>
-
-<script setup>
-import {ARROW, LINE, PIPE, typeList} from "packages/components/enums.js";
-import {onMounted, ref, shallowRef} from "vue";
-import {arrowOptions, defaultLine, lineOptions, pipeOptions} from "packages/components/settings.js";
-import DefaultLine from "packages/components/edge-control/default-line.vue";
-import PipeLine from "packages/components/edge-control/pipe-line.vue";
-import ArrowLine from "packages/components/edge-control/arrow-line.vue";
-
-const props = defineProps({
-    payload: Object,
-    itemId: {
-        type: String,
-        default: ''
-    }
-})
-
-// 线段类型
-const type = ref(props.payload.data.type)
-
-/**
- * 更改线段类型
- */
-const changeType = () => {
-    props.payload.data.type = type.value
-    if (type.value === LINE) {
-        lineOptions.attrs = defaultLine.attrs
-        lineOptions.markup = defaultLine.markup
-    }
-    if (type.value === PIPE) {
-        lineOptions.attrs = pipeOptions.attrs
-        lineOptions.markup = pipeOptions.markup
-    }
-    if (type.value === ARROW) {
-        lineOptions.attrs = arrowOptions.attrs
-        lineOptions.markup = arrowOptions.markup
-    }
-    props.payload.attrs = null
-    props.payload.attr(lineOptions.attrs)
-    props.payload.markup = lineOptions.markup
-    setComponent()
-}
-
-// 组件
-const component = shallowRef(null)
-
-/**
- * 设置组件
- */
-const setComponent = () => {
-    component.value = null
-    if (type.value === LINE) {
-        component.value = DefaultLine
-    }
-    if (type.value === PIPE) {
-        component.value = PipeLine
-    }
-    if (type.value === ARROW) {
-        component.value = ArrowLine
-    }
-}
-
-onMounted(() => {
-    setComponent()
-})
-
-</script>
-
-<style scoped lang="scss">
-@use "../../styles/editor.scss";
-
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2025/4/9 09:22
+*/
+<template>
+    <div class="container">
+        <div class="row-column" style="padding:5px 1px 10px">
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <div class="row-label">线段类型</div>
+                </el-col>
+                <el-col :span="12">
+                    <el-select v-model="type" placeholder="请选择线段类型" clearable size="small" @change="changeType">
+                        <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value">
+                        </el-option>
+                    </el-select>
+                </el-col>
+            </el-row>
+        </div>
+        <component :is="component" :payload="payload" :itemId="itemId"></component>
+    </div>
+</template>
+
+<script setup>
+import {ARROW, LINE, PIPE, typeList} from "packages/components/enums.js";
+import {onMounted, ref, shallowRef} from "vue";
+import {arrowOptions, defaultLine, lineOptions, pipeOptions} from "packages/components/settings.js";
+import DefaultLine from "packages/components/edge-control/default-line.vue";
+import PipeLine from "packages/components/edge-control/pipe-line.vue";
+import ArrowLine from "packages/components/edge-control/arrow-line.vue";
+
+const props = defineProps({
+    payload: Object,
+    itemId: {
+        type: String,
+        default: ''
+    }
+})
+
+// 线段类型
+const type = ref(props.payload.data.type)
+
+/**
+ * 更改线段类型
+ */
+const changeType = () => {
+    props.payload.data.type = type.value
+    if (type.value === LINE) {
+        lineOptions.attrs = defaultLine.attrs
+        lineOptions.markup = defaultLine.markup
+    }
+    if (type.value === PIPE) {
+        lineOptions.attrs = pipeOptions.attrs
+        lineOptions.markup = pipeOptions.markup
+    }
+    if (type.value === ARROW) {
+        lineOptions.attrs = arrowOptions.attrs
+        lineOptions.markup = arrowOptions.markup
+    }
+    props.payload.attrs = null
+    props.payload.attr(lineOptions.attrs)
+    props.payload.markup = lineOptions.markup
+    setComponent()
+}
+
+// 组件
+const component = shallowRef(null)
+
+/**
+ * 设置组件
+ */
+const setComponent = () => {
+    component.value = null
+    if (type.value === LINE) {
+        component.value = DefaultLine
+    }
+    if (type.value === PIPE) {
+        component.value = PipeLine
+    }
+    if (type.value === ARROW) {
+        component.value = ArrowLine
+    }
+}
+
+onMounted(() => {
+    setComponent()
+})
+
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/editor.scss";
+
+</style>