vue-wiring-diagram 1.1.22 → 1.1.24

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

@@ -1,110 +1,110 @@
-/**
-* @Author: HuaYJ
-* @Date: 2024/10/24 10:23
-*/
-<template>
-  <div class="form-container">
-    <el-button type="primary" size="small" @click="addItemBtnClick" style="margin-bottom: 10px">添加条件</el-button>
-    <el-table :data="items" size="small" border>
-      <el-table-column prop="min" label="最小值" width="150" align="center">
-        <template #default="scope">
-          <el-input-number v-model="scope.row.min" size="small" controls-position="right"></el-input-number>
-        </template>
-      </el-table-column>
-      <el-table-column prop="max" label="最大值" width="150" align="center">
-        <template #default="scope">
-          <el-input-number v-model="scope.row.max" size="small" controls-position="right"></el-input-number>
-        </template>
-      </el-table-column>
-      <el-table-column prop="direction" label="流向" v-if="type === 'pipe'" align="center">
-        <template #default="scope">
-          <el-select v-model="scope.row.direction" size="small">
-            <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
-          </el-select>
-        </template>
-      </el-table-column>
-      <el-table-column prop="direction" label="方向" v-if="type === 'arrow'" align="center">
-        <template #default="scope">
-          <el-switch v-model="scope.row.direction" :active-value="ARROWFORWARD" active-text="正向" :inactive-value="ARROWBACKWORD"
-                     inactive-text="反向" size="small"/>
-        </template>
-      </el-table-column>
-      <el-table-column prop="direction" label="动作" v-if="type === 'arrow'" align="center">
-        <template #default="scope">
-          <el-switch v-model="scope.row.animation" :active-value="FLASHING" active-text="闪烁" :inactive-value="STOP" inactive-text="静止"
-                     size="small"/>
-        </template>
-      </el-table-column>
-      <el-table-column prop="display" label="显示" v-if="type === 'arrow'" align="center">
-        <template #default="scope">
-          <el-switch v-model="scope.row.display" :active-value="'block'" active-text="显示" :inactive-value="'none'" inactive-text="隐藏"
-                     size="small"/>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center">
-        <template #default="scope">
-          <el-button type="danger" size="small" @click="deleteItemBtnClick(scope.$index)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="footer" style="margin-top: 10px">
-      <el-button type="primary" @click="saveBtnClick">保存</el-button>
-      <el-button @click="cancelBtnClick">取消</el-button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {ref} from "vue";
-import {ARROWBACKWORD, ARROWFORWARD, directionList, FLASHING, STOP} from "packages/components/enums.js";
-import {defaultArrowCondition, defaultPipeCondition} from "packages/components/tools.js";
-
-const props = defineProps({
-  payload: {
-    type: Array,
-  },
-  type: {
-    type: String,
-  }
-})
-
-
-const items = ref(props.payload)
-
-/**
- * 添加条件
- */
-const addItemBtnClick = () => {
-  items.value.push(JSON.parse(JSON.stringify(props.type === 'pipe' ? defaultPipeCondition : defaultArrowCondition)))
-}
-
-/**
- * 删除条件
- * @param index
- */
-const deleteItemBtnClick = (index) => {
-  items.value.splice(index, 1)
-}
-
-const emit = defineEmits(['close'])
-
-/**
- * 保存
- */
-const saveBtnClick = () => {
-  emit('close', items.value)
-}
-
-/**
- * 取消
- */
-const cancelBtnClick = () => {
-  emit('close', false)
-}
-
-</script>
-
-<style scoped lang="scss">
-@use '/packages/styles/elPath.scss';
-@use '/packages/styles/dialog.scss';
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2024/10/24 10:23
+*/
+<template>
+  <div class="form-container">
+    <el-button type="primary" size="small" @click="addItemBtnClick" style="margin-bottom: 10px">添加条件</el-button>
+    <el-table :data="items" size="small" border>
+      <el-table-column prop="min" label="最小值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.min" size="small" controls-position="right"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="max" label="最大值" width="150" align="center">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.max" size="small" controls-position="right"></el-input-number>
+        </template>
+      </el-table-column>
+      <el-table-column prop="direction" label="流向" v-if="type === 'pipe'" align="center">
+        <template #default="scope">
+          <el-select v-model="scope.row.direction" size="small">
+            <el-option v-for="item in directionList" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </template>
+      </el-table-column>
+      <el-table-column prop="direction" label="方向" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.direction" :active-value="ARROWFORWARD" active-text="正向" :inactive-value="ARROWBACKWORD"
+                     inactive-text="反向" size="small"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="direction" label="动作" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.animation" :active-value="FLASHING" active-text="闪烁" :inactive-value="STOP" inactive-text="静止"
+                     size="small"/>
+        </template>
+      </el-table-column>
+      <el-table-column prop="display" label="显示" v-if="type === 'arrow'" align="center">
+        <template #default="scope">
+          <el-switch v-model="scope.row.display" :active-value="'block'" active-text="显示" :inactive-value="'none'" inactive-text="隐藏"
+                     size="small"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="danger" size="small" @click="deleteItemBtnClick(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="footer" style="margin-top: 10px">
+      <el-button type="primary" @click="saveBtnClick">保存</el-button>
+      <el-button @click="cancelBtnClick">取消</el-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {ref} from "vue";
+import {ARROWBACKWORD, ARROWFORWARD, directionList, FLASHING, STOP} from "packages/components/enums.js";
+import {defaultArrowCondition, defaultPipeCondition} from "packages/components/tools.js";
+
+const props = defineProps({
+  payload: {
+    type: Array,
+  },
+  type: {
+    type: String,
+  }
+})
+
+
+const items = ref(props.payload)
+
+/**
+ * 添加条件
+ */
+const addItemBtnClick = () => {
+  items.value.push(JSON.parse(JSON.stringify(props.type === 'pipe' ? defaultPipeCondition : defaultArrowCondition)))
+}
+
+/**
+ * 删除条件
+ * @param index
+ */
+const deleteItemBtnClick = (index) => {
+  items.value.splice(index, 1)
+}
+
+const emit = defineEmits(['close'])
+
+/**
+ * 保存
+ */
+const saveBtnClick = () => {
+  emit('close', items.value)
+}
+
+/**
+ * 取消
+ */
+const cancelBtnClick = () => {
+  emit('close', false)
+}
+
+</script>
+
+<style scoped lang="scss">
+@use '/packages/styles/elPath.scss';
+@use '/packages/styles/dialog.scss';
+</style>

package/packages/components/edge-control/default-line.vue

@@ -1,156 +1,156 @@
-/**
-* @Author: HuaYJ
-* @Date: 2025/4/9 09:21
-*/
-<template>
-  <div class="container">
-    <el-collapse v-model="activeName" accordion>
-      <el-collapse-item title="线段设置" name="0">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">颜色</div>
-            </el-col>
-            <el-col :span="12">
-              <el-color-picker v-model="stroke" :show-alpha="true" size="small" @change="changeLine"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">粗细</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="strokeWidth" size="small" controls-position="right" @change="changeLine" :min="1" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-      <el-collapse-item title="箭头1设置" name="1">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">类型</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="sourceMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
-                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">宽</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">高</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">偏移</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="sourceMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-      <el-collapse-item title="箭头2设置" name="2">
-        <div class="row-column">
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">类型</div>
-            </el-col>
-            <el-col :span="12">
-              <el-select v-model="targetMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
-                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
-                </el-option>
-              </el-select>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">宽</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">高</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-          <el-row :gutter="20">
-            <el-col :span="12">
-              <div class="row-label">偏移</div>
-            </el-col>
-            <el-col :span="12">
-              <el-input-number v-model="targetMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
-                               :step="1"/>
-            </el-col>
-          </el-row>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-
-<script setup>
-import {reactive, ref} from "vue";
-import {lineOptions} from "packages/components/settings.js";
-import {arrowList} from "packages/components/enums.js";
-
-const props = defineProps({
-  payload: Object
-})
-
-const activeName = ref('0')
-
-const stroke = ref(props.payload.attrs.line.stroke) // 线段颜色
-const strokeWidth = ref(props.payload.attrs.line.strokeWidth)  // 线段粗细
-const sourceMarker = reactive({
-  name: props.payload.attrs.line.sourceMarker?.name ?? null,
-  args: props.payload.attrs.line.sourceMarker?.args ?? {}
-})
-const targetMarker = reactive({
-  name: props.payload.attrs.line.targetMarker?.name ?? null,
-  args: props.payload.attrs.line.targetMarker?.args ?? {}
-})
-
-/**
- * 改变线段属性
- */
-const changeLine = () => {
-  props.payload.attr('line/stroke', stroke.value)
-  props.payload.attr('line/strokeWidth', strokeWidth.value)
-  props.payload.attr('line/sourceMarker/name', sourceMarker.name)
-  props.payload.attr('line/sourceMarker/args', sourceMarker.args)
-  props.payload.attr('line/targetMarker/name', targetMarker.name)
-  props.payload.attr('line/targetMarker/args', targetMarker.args)
-  lineOptions.markup = props.payload.markup
-  lineOptions.attrs = props.payload.attrs
-}
-</script>
-
-<style scoped lang="scss">
-@use "../../styles/editor.scss";
-</style>
+/**
+* @Author: HuaYJ
+* @Date: 2025/4/9 09:21
+*/
+<template>
+  <div class="container">
+    <el-collapse v-model="activeName" accordion>
+      <el-collapse-item title="线段设置" name="0">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">颜色</div>
+            </el-col>
+            <el-col :span="12">
+              <el-color-picker v-model="stroke" :show-alpha="true" size="small" @change="changeLine"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">粗细</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="strokeWidth" size="small" controls-position="right" @change="changeLine" :min="1" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="箭头1设置" name="1">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">类型</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="sourceMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
+                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">宽</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="sourceMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">高</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="sourceMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">偏移</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="sourceMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+      <el-collapse-item title="箭头2设置" name="2">
+        <div class="row-column">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">类型</div>
+            </el-col>
+            <el-col :span="12">
+              <el-select v-model="targetMarker.name" placeholder="请选择箭头类型" clearable size="small" @change="changeLine">
+                <el-option v-for="item in arrowList" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">宽</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="targetMarker.args.width" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">高</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="targetMarker.args.height" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="row-label">偏移</div>
+            </el-col>
+            <el-col :span="12">
+              <el-input-number v-model="targetMarker.args.offset" size="small" controls-position="right" @change="changeLine" :min="0" :max="10"
+                               :step="1"/>
+            </el-col>
+          </el-row>
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+
+<script setup>
+import {reactive, ref} from "vue";
+import {lineOptions} from "packages/components/settings.js";
+import {arrowList} from "packages/components/enums.js";
+
+const props = defineProps({
+  payload: Object
+})
+
+const activeName = ref('0')
+
+const stroke = ref(props.payload.attrs.line.stroke) // 线段颜色
+const strokeWidth = ref(props.payload.attrs.line.strokeWidth)  // 线段粗细
+const sourceMarker = reactive({
+  name: props.payload.attrs.line.sourceMarker?.name ?? null,
+  args: props.payload.attrs.line.sourceMarker?.args ?? {}
+})
+const targetMarker = reactive({
+  name: props.payload.attrs.line.targetMarker?.name ?? null,
+  args: props.payload.attrs.line.targetMarker?.args ?? {}
+})
+
+/**
+ * 改变线段属性
+ */
+const changeLine = () => {
+  props.payload.attr('line/stroke', stroke.value)
+  props.payload.attr('line/strokeWidth', strokeWidth.value)
+  props.payload.attr('line/sourceMarker/name', sourceMarker.name)
+  props.payload.attr('line/sourceMarker/args', sourceMarker.args)
+  props.payload.attr('line/targetMarker/name', targetMarker.name)
+  props.payload.attr('line/targetMarker/args', targetMarker.args)
+  lineOptions.markup = props.payload.markup
+  lineOptions.attrs = props.payload.attrs
+}
+</script>
+
+<style scoped lang="scss">
+@use "../../styles/editor.scss";
+</style>