zydx-plus 1.36.641 → 1.36.642

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.36.641",
+  "version": "1.36.642",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/graph/src/graph.css

@@ -49,6 +49,9 @@
 .graph-tab button:last-child{
     border-right: none;
 }
+.graph-tab button.del-line-btn{
+    color: #f5222d;
+}
 .graph-relation{
     height: calc(100% - 30px);
 }

package/src/components/graph/src/graph.vue

@@ -10,7 +10,7 @@
       <button :disabled="!nodeData" @click="add">添加节点</button>
       <button :disabled="delDisabled" @click="del">删除节点</button>
       <button :disabled="!nodeData && !lines" @click="style">设置样式</button>
-      <button @click="dots">关联线</button>
+      <button :class="{'del-line-btn': lines}" @click="lines ? delLine() : dots($event)">{{ lines ? '删除关联线' : '关联线' }}</button>
       <button :disabled="undoDisabled" @click="undo">上一步</button>
       <button :disabled="forwardDisabled" @click="redo">下一步</button>
       <button @click="download">下载图片</button>
@@ -164,10 +164,13 @@ export default {
     })
     // 监听窗口尺寸变化，全屏/退出或窗口缩放时重绘画布
     window.addEventListener('resize', this.handleWindowResize)
+    // 注册删除快捷键（Delete / Backspace）
+    window.addEventListener('keydown', this.handleKeydown)
   },
   beforeUnmount() {
     // 移除窗口事件监听，避免内存泄漏
     window.removeEventListener('resize', this.handleWindowResize)
+    window.removeEventListener('keydown', this.handleKeydown)
   },
   methods: {
     // ===== 全屏相关 =====
@@ -325,6 +328,32 @@ export default {
         this.recordHistory()
       }
     },
+    // 删除关联线：移除当前选中的关联线，并同步数据、记录历史
+    delLine() {
+      if(!this.lines) return
+      const index = this.nodes.lines.findIndex(x => x.id === this.lines.id)
+      if(index > -1) this.nodes.lines.splice(index, 1)
+      this.graphInstance.removeLineById(this.lines.id)
+      this.lines = null
+      this.lineStatus = false
+      this.recordHistory()
+    },
+    // 删除快捷键：选中关联线按 Delete/Backspace 删除线；选中节点删除节点
+    handleKeydown(e) {
+      if (this.readOnly) return
+      // 正在文本编辑（输入框聚焦）时不触发删除，避免误删
+      const ae = document.activeElement
+      const tag = (ae && ae.tagName) || ''
+      if (tag === 'INPUT' || tag === 'TEXTAREA') return
+      if (e.key === 'Delete' || e.key === 'Backspace') {
+        e.preventDefault()
+        if (this.lines) {
+          this.delLine()
+        } else if (this.nodeData && !this.delDisabled) {
+          this.del()
+        }
+      }
+    },
     // 设置样式
     style() {
       if(this.lines) this.lineStatus = true
@@ -419,6 +448,11 @@ export default {
     widthUpdate() {
       if(!this.nodeData || this.readOnly) return
       const node = this.graphInstance.getNodeById(this.nodeData.id)
+      if (!node) {
+        // 节点已被删除，清空选中态避免后续访问 undefined 的属性
+        this.nodeData = null
+        return
+      }
       this.nodeUpdate(node, {type: 'width', value: node.width})
       this.nodeUpdate(node, {type: 'height', value: node.height})
     },

package/src/components/graph/src/lineTool.vue

@@ -24,13 +24,13 @@
       <div class="style-list">
         <div class="node-left padd">
           <span>文字颜色</span>
-          <div @click="colorTap($event,'fontColor')" class="node-back-color"></div>
+          <div @click="colorTap($event,'fontColor')" class="node-back-color" :style="{backgroundColor: fontColorVal}"></div>
         </div>
       </div>
       <div class="style-list">
         <div class="node-left padd">
           <span>线颜色</span>
-          <div @click="colorTap($event,'color')" class="node-back-color"></div>
+          <div @click="colorTap($event,'color')" class="node-back-color" :style="{backgroundColor: lineColorVal}"></div>
         </div>
       </div>
       <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
@@ -67,6 +67,11 @@ export default {
       type: '',
       color: 'rgba(84,150,136,1)',
       text: '',
+      // ===== 颜色色块预览（随 node 数据/实时选取变化） =====
+      /** 当前文字颜色 */
+      fontColorVal: 'rgba(64, 158, 255, 1)',
+      /** 当前线颜色 */
+      lineColorVal: 'rgba(95,176,253,1)',
       styleLine: [
         {label: "直线", value: '1'},
         {label: "鱼尾", value: '3'},
@@ -98,6 +103,9 @@ export default {
         this.styleValue =  this.node.lineWidth || '2'
         this.text = this.node.text || ''
         this.styleValue = this.node.lineShape.toString() || '1'
+        // 从连线数据中回填文字/线颜色到色块预览
+        this.fontColorVal = this.node.fontColor || 'rgba(64, 158, 255, 1)'
+        this.lineColorVal = this.node.color || 'rgba(95,176,253,1)'
         if(this.type === 'fontColor') this.color = this.node.fontColor || 'rgba(64, 158, 255, 1)'
         if(this.type === 'color') this.color = this.node.color || 'rgba(95,176,253,1)'
       },
@@ -146,6 +154,9 @@ export default {
       this.colorShow = false
     },
     rgba(v) {
+      // 实时更新对应色块预览
+      if (this.type === 'fontColor') this.fontColorVal = v.rgba
+      if (this.type === 'color') this.lineColorVal = v.rgba
       this.$emit('select', {type: this.type, value: v.rgba})
     },
   }

package/src/components/graph/src/tool.vue

@@ -36,7 +36,7 @@
         <div class="style-list">
           <div class="node-left">
             <span>颜色</span>
-            <div @click="colorTap($event,'borderColor')" class="backColor"></div>
+            <div @click="colorTap($event,'borderColor')" class="backColor" :style="{backgroundColor: borderColorVal}"></div>
           </div>
           <div class="node-left padd">
             <span>宽度</span>
@@ -51,7 +51,7 @@
         <div class="style-list">
           <div class="node-left">
             <span>颜色</span>
-            <div @click="colorTap($event,'color')" class="backColor"></div>
+            <div @click="colorTap($event,'color')" class="backColor" :style="{backgroundColor: bgColorVal}"></div>
           </div>
         </div>
       </div>
@@ -155,6 +155,12 @@ export default {
       /** 当前边框宽度 */
       styleValue: '0',
 
+      // ===== 颜色色块预览（随 node 数据/实时选取变化） =====
+      /** 当前边框颜色 */
+      borderColorVal: 'rgba(64, 158, 255, 1)',
+      /** 当前背景颜色 */
+      bgColorVal: 'rgba(64, 158, 255, 1)',
+
       // ===== 形状选项 =====
       optionShape: [
         {label: "圆形", value: '0'},
@@ -187,6 +193,12 @@ export default {
   emits: ['update:open', 'select'],
 
   watch: {
+    node: {
+      handler(val) {
+        console.log(val)
+      },
+      deep: true
+    },
     /**
      * 监听弹窗打开/关闭
      * 打开时从 node 中回填当前样式值；关闭时隐藏颜色选择器
@@ -206,6 +218,9 @@ export default {
         this.scribeAct = this.node.textDecoration === 'underline'
         this.styleValue = this.node.borderWidth || '0'
         this.shapeValue = this.node.nodeShape || '0'
+        // 从节点数据回填边框/背景颜色到色块预览
+        this.borderColorVal = this.node.borderColor || 'rgba(64, 158, 255, 1)'
+        this.bgColorVal = this.node.color || 'rgba(64, 158, 255, 1)'
         // 根据当前颜色编辑类型初始化颜色值
         if (this.type === 'fontColor') this.color = this.node.fontColor || 'rgba(255, 255, 255, 1)'
         if (this.type === 'borderColor') this.color = this.node.borderColor || 'rgba(64, 158, 255, 1)'
@@ -306,6 +321,9 @@ export default {
      * @param {{rgba: string}} v - 颜色选择器输出的 rgba 值
      */
     rgba(v) {
+      // 实时更新对应色块预览
+      if (this.type === 'borderColor') this.borderColorVal = v.rgba
+      if (this.type === 'color') this.bgColorVal = v.rgba
       this.$emit('select', {type: this.type, value: v.rgba})
     },
 

package/src/index.js

@@ -89,7 +89,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.36.641',
+    version: '1.36.642',
     install,
     Calendar,
     Message,