zydx-plus 1.35.600 → 1.35.601

package/package.json

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

package/src/components/coloring/src/coloring.vue

@@ -55,7 +55,8 @@ export default {
       Rgb:{r:255,g:255,b:255},
       opacity: 1,
       s: 0,
-      l: 0
+      l: 0,
+      maskRgb:{}
     }
   },
   props: {
@@ -64,8 +65,7 @@ export default {
   },
   created() {
     this.$nextTick(() => {
-      console.log(this.color)
-      if(this.color === undefined) return
+      if(!this.color) return
       this.alternativeColor(this.color)
     })
   },
@@ -126,8 +126,8 @@ export default {
       if(x >= w) this.colorX = w
       if(y  <= 0) this.colorY  = 0
       if(y  >= h) this.colorY  = h
-      this.s = x / w
-      this.l = (h - y) / h
+      this.s = w? x / w : 0
+      this.l = h? (h - y) / h : 0
       this.rgbaColor()
     },
     rgbaColor() {

package/src/components/coloring/src/data.js

@@ -17,7 +17,6 @@ function hsv2rgb(h, s, v) {
         case 4: r = t; g = p; b = v; break;
         case 5: r = v, g = p, b = q; break;
     }
-
     var round = (value) => Math.round(value * 255)
     return {
         r: round(r),
@@ -92,12 +91,12 @@ function rgbToHsb(rgb) {
 function rgb2Hex(r, g, b) {
     var o = (r << 16 | g << 8 | b).toString(16)
     return o.length < 6 ? ("#".concat("0".repeat(6 - o.length)).concat(o)):"#".concat(o);
-}
-
-
-module.exports = {
-	hsv2rgb,
-	rgb2hsv,
-	rgbToHsb,
-	rgb2Hex
+}
+
+
+module.exports = {
+	hsv2rgb,
+	rgb2hsv,
+	rgbToHsb,
+	rgb2Hex
 }

package/src/components/mind/src/lineTool.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="node-style node-style-line" :class="{'node-s': show, 'node-h': !show}">
+    <div class="style-li">
+      <img @click="nodeStyle"
+           src="data:image/png;base64,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"
+           alt=""/>
+      <div class="style-title">文字</div>
+      <div class="style-list">
+        <div class="node-left zIndex2">
+          <span>字号</span>
+          <Select :options="optionSize" v-model:value="sizeValue"></Select>
+        </div>
+        <div class="node-left padd zIndex2">
+          <span>行高</span>
+          <Select :options="optionRow" v-model:value="rowValue"></Select>
+        </div>
+      </div>
+      <div class="style-list">
+        <div class="node-left">
+          <span>颜色</span>
+          <div @click="colorTap($event,'associativeLineTextColor')" :style="{'background-color': associativeLineTextColor}" class="backColor"></div>
+        </div>
+      </div>
+    </div>
+    <div class="style-li">
+      <div class="style-title">边框</div>
+      <div class="style-list">
+        <div class="node-left">
+          <span>颜色</span>
+          <div @click="colorTap($event,'associativeLineColor')" :style="{'background-color': associativeLineColor}" class="backColor"></div>
+        </div>
+        <div class="node-left padd zIndex3">
+          <span>线宽</span>
+          <Select :options="optionLine" v-model:value="styleValue"></Select>
+        </div>
+      </div>
+    </div>
+    <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
+      <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="colorRgba"></Coloring>
+    </div>
+  </div>
+</template>
+
+<script>
+import Select from '../../select/src/select.vue'
+import Coloring from '../../coloring/src/coloring.vue'
+
+export default {
+  components: {Select, Coloring},
+  data() {
+    return {
+      show: false,
+      top: 0,
+      colorRgba: '',
+      colorShow: false,
+      colorType: '',
+      optionSize: [
+        {label: "12", value: 12},
+        {label: "14", value: 14},
+        {label: "16", value: 16},
+        {label: "18", value: 18},
+        {label: "20", value: 20},
+        {label: "24", value: 24},
+        {label: "26", value: 26},
+        {label: "28", value: 28},
+        {label: "30", value: 30}
+      ],
+      sizeValue: 14,
+      optionRow: [
+        {label: "1.2", value: 1.2},
+        {label: "1.5", value: 1.5},
+        {label: "2", value: 2},
+        {label: "2.5", value: 2.5},
+        {label: "3", value: 3}
+      ],
+      rowValue: 1.2,
+      optionLine: [
+        {label: "0", value: 0},
+        {label: "1", value: 1},
+        {label: "2", value: 2},
+        {label: "3", value: 3},
+        {label: "4", value: 4},
+        {label: "5", value: 5},
+        {label: "6", value: 6},
+        {label: "7", value: 7}
+      ],
+      styleValue: 2,
+      associativeLineTextColor: '',
+      associativeLineColor: ''
+    }
+  },
+  emits: ['update:open', 'select'],
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    node: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  watch: {
+    open: {
+      handler(val) {
+        this.show = val
+      },
+      deep: true
+    },
+    show: {
+      handler(val) {
+        this.$emit('update:open', val)
+      },
+      deep: true
+    },
+    node: {
+      handler(val) {
+        if (val) {
+          this.colorShow = false
+          this.sizeValue = val.associativeLineTextFontSize || 14
+          this.rowValue = val.associativeLineTextLineHeight || 1.2
+          this.styleValue = val.associativeLineWidth || 2
+          this.associativeLineTextColor = val.associativeLineTextColor || 'rgba(51, 51, 51, 1)'
+          this.associativeLineColor = val.associativeLineColor || 'rgba(51, 51, 51, 1)'
+        }
+      }
+    },
+    sizeValue: {
+      handler(val) {
+        this.$emit('select', {associativeLineTextFontSize: val})
+      },
+      deep: true
+    },
+    rowValue: {
+      handler(val) {
+        this.$emit('select', {associativeLineTextLineHeight: val})
+      },
+      deep: true
+    },
+    styleValue: {
+      handler(val) {
+        this.$emit('select', {associativeLineWidth: val})
+      },
+      deep: true
+    },
+  },
+  mounted() {
+
+  },
+  methods: {
+    nodeStyle() {
+      this.show = false
+    },
+    colorTap(e, i) {
+      this.colorType = i
+      if(this.colorType === 'associativeLineTextColor') this.colorRgba = this.associativeLineTextColor
+      if(this.colorType === 'associativeLineColor') this.colorRgba = this.associativeLineColor
+      this.colorShow = !this.colorShow
+    },
+    rgba(e) {
+      let color = {}
+      color[this.colorType] = e.rgba
+      if(this.colorType === 'associativeLineTextColor') this.associativeLineTextColor = e.rgba
+      if(this.colorType === 'associativeLineColor') this.associativeLineColor = e.rgba
+      this.$emit('select', color)
+    },
+    submit() {
+      this.colorShow = false
+    },
+    empty() {
+      this.colorShow = false
+    },
+  }
+}
+</script>
+
+<style scoped src="./mind.css"></style>

package/src/components/mind/src/mind.css

@@ -119,6 +119,10 @@
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
     z-index: 10;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
 }
 
 .style-li {
@@ -173,6 +177,11 @@
     display: none;
 }
 
+.node-style-line {
+    height: 240px;
+    margin-top: -120px;
+}
+
 .mind-table button {
     background-color: #fff;
     border: 1px solid #ccc;
@@ -182,7 +191,33 @@
     line-height: 30px;
     flex: 1;
 }
-
+.mind-btn{
+    background-color: #fff;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    font-size: 14px;
+    height: 30px;
+    line-height: 28px;
+    flex: 1;
+    position: relative;
+    text-align: center;
+}
+.mind-btn:hover .mind-btn-list{
+    display: block;
+}
+.mind-btn-list{
+    display: none;
+}
+.mind-btn-list button{
+    background-color: #fff;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    font-size: 14px;
+    height: 30px;
+    line-height: 28px;
+    flex: 1;
+    width: 100%;
+}
 .mind-table button:last-child {
     margin-right: 0;
 }
@@ -206,3 +241,6 @@
     left: 0;
     z-index: 100;
 }
+.font-color-back{
+    color: #fff;
+}

package/src/components/mind/src/mind.vue

@@ -6,10 +6,19 @@
         <button :disabled="mindShow" @click="brotherNode">兄弟节点</button>
         <button :disabled="mindShow" @click="delNode">删除节点</button>
         <button :disabled="mindShow" @click="associativeLine">关联线</button>
+        <button :disabled="lineShow" @click="lineStyle">关联样式</button>
         <button :disabled="mindShow" @click="nodeStyle">节点样式</button>
-        <button @click="structure">结构切换</button>
+        <div class="mind-btn">
+          <span>结构切换</span>
+          <div class="mind-btn-list">
+            <button @click="structure('logicalStructure')" :disabled="layoutList === 'logicalStructure' || layoutList === ''">向右结构</button>
+            <button @click="structure('organizationStructure')" :disabled="layoutList === 'organizationStructure'">向下结构</button>
+            <button @click="structure('mindMap')" :disabled="layoutList === 'mindMap'">左右结构</button>
+          </div>
+        </div>
         <button :disabled="retShow" @click="ret">上一步</button>
         <button :disabled="forwardShow" @click="forward">下一步</button>
+        <button @click="reset">重置位置</button>
         <button v-if="protectShow" @click="preservation">保存</button>
         <button @click="fullTap" v-if="fullShow">全屏</button>
         <button @click="fullDel" v-else>退出</button>
@@ -17,6 +26,7 @@
     </div>
     <div :id="id" class="mindMapContainer"></div>
     <Tool v-model:open="styleStatus" :node="nodeData" @select="toolSelect"></Tool>
+    <LineTool v-model:open="lineStyleStatus" :node="lineData" @select="lineToolSelect"></LineTool>
   </div>
 </template>
 
@@ -27,13 +37,14 @@ import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
 import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
 import Export from 'simple-mind-map/src/plugins/Export.js'
 import Tool from "./tool.vue";
+import LineTool from "./lineTool.vue";
 
 MindMap.usePlugin(AssociativeLine)
 MindMap.usePlugin(TouchEvent)
 MindMap.usePlugin(Export)
 
 export default {
-  components: {Tool},
+  components: {LineTool, Tool},
   name: "zydx-mind",
   data() {
     return {
@@ -43,7 +54,10 @@ export default {
       retShow: false,
       forwardShow: false,
       nodeData: null,
+      lineData: null,
       colorShow: false,
+      lineStyleStatus: false,
+      lineShow: true,
       top: 0,
       activeNodes: null,
       defaultData: {
@@ -55,7 +69,9 @@ export default {
       fullShow: true,
       layoutList: '',
       updateInit: false,
-      styleStatus: false
+      styleStatus: false,
+      activeLineNode: null,
+      activeLineToNode: null
     }
   },
   props: {
@@ -125,6 +141,21 @@ export default {
     }
   },
   methods: {
+    lineToolSelect(v) {
+      const associativeLineStyle = this.activeLineNode.getData('associativeLineStyle') || {}
+      const toNodeUid = this.activeLineToNode.getData('uid')
+      const lineStyle = associativeLineStyle[toNodeUid] || {}
+      this.activeLineNode.setData({
+        associativeLineStyle: {
+          ...associativeLineStyle,
+          [toNodeUid]: {
+            ...lineStyle,
+            ...v
+          }
+        }
+      })
+      this.mindMap.associativeLine.updateActiveLineStyle()
+    },
     toolSelect(v) {
       this.activeNodes.forEach(node => {
         node.setStyle(v.type, v.value)
@@ -194,6 +225,7 @@ export default {
       const that = this
       this.mindMap = new MindMap({
         el: document.getElementById(that.id),
+        openPerformance: true,
         enableFreeDrag: false, // 是否开启自由拖拽
         enableNodeTransitionMove: false, // 是否开启节点过渡动画
         layout: that.data.layoutList || 'logicalStructure', // 节点布局方式
@@ -202,16 +234,39 @@ export default {
         data: that.msgFun(that.data)
       });
       this.mindMap.setMode(this.readOnly ? 'readonly' : 'edit')
+      // 节点点击
       this.mindMap.on('node_active', (node, activeNodeList) => {
         this.nodeData = node
-        this.mindShow = node === null;
-        if(node === null) this.styleStatus = false
         this.activeNodes = activeNodeList
+        this.mindShow = !node
+        if(node) {
+          this.lineData = null
+          this.lineShow = true
+        }
       })
+      // 后退前进
       this.mindMap.on('back_forward', (index, len) => {
         this.retShow = index <= 0;
         this.forwardShow = index >= len - 1
       })
+      // 关联线点击
+      this.mindMap.on('associative_line_click', (path, clickPath, node, toNode) => {
+        this.activeLineNode = node
+        this.activeLineToNode = toNode
+        this.lineData = this.mindMap.associativeLine.getStyleConfig(node, toNode)
+        this.lineShow = false
+      })
+      // 点击画布
+      this.mindMap.on('draw_click', () => {
+        this.lineStyleStatus = false
+        this.styleStatus = false
+        this.lineShow = true
+        this.mindShow = true
+        this.nodeData = null
+        this.activeNodes = []
+        this.lineData = null
+      })
+      // 数据改变
       this.mindMap.on('data_change', (data) => {
         this.$emit('dataChange', {
           data: data,
@@ -219,16 +274,8 @@ export default {
         })
       })
     },
-    structure() {
-      this.layoutList = 'logicalStructure'
-      const layout = this.mindMap.getLayout()
-      if (layout === 'mindMap') {
-        this.layoutList = 'organizationStructure'
-      } else if (layout === 'organizationStructure') {
-        this.layoutList = 'logicalStructure'
-      } else {
-        this.layoutList = 'mindMap'
-      }
+    structure(v) {
+      this.layoutList = v
       this.mindMap.setLayout(this.layoutList)
     },
     // 保存
@@ -255,8 +302,13 @@ export default {
       const name = v? v : 'mind'
       this.mindMap.export('png', true, name, true, false, null, true)
     },
+    lineStyle() {
+      this.lineStyleStatus = true
+      this.styleStatus = false
+    },
     nodeStyle() {
       this.styleStatus = true
+      this.lineStyleStatus = false
     },
     // 关联线
     associativeLine() {
@@ -281,6 +333,9 @@ export default {
     // 兄弟节点
     brotherNode() {
       this.mindMap.execCommand('INSERT_NODE')
+    },
+    reset() {
+      this.mindMap.renderer.setRootNodeCenter()
     }
   }
 }

package/src/components/mind/src/tool.vue

@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="node-but">
-        <button @click="colorTap($event,'color')">颜色</button>
+        <button @click="colorTap($event,'color')" class="font-color-back" :style="{'background-color': color}">颜色</button>
         <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}"
                 @click="bolds">粗体
         </button>
@@ -33,7 +33,7 @@
       <div class="style-list">
         <div class="node-left">
           <span>颜色</span>
-          <div @click="colorTap($event,'borderColor')" class="backColor"></div>
+          <div @click="colorTap($event,'borderColor')" :style="{'background-color': borderColor}" class="backColor"></div>
         </div>
         <div class="node-left padd zIndex3">
           <span>样式</span>
@@ -56,7 +56,7 @@
       <div class="style-list">
         <div class="node-left">
           <span>颜色</span>
-          <div @click="colorTap($event,'fillColor')" class="backColor"></div>
+          <div @click="colorTap($event,'fillColor')" :style="{'background-color': fillColor}" class="backColor"></div>
         </div>
       </div>
     </div>
@@ -75,7 +75,7 @@
       <div class="style-list">
         <div class="node-left">
           <span>颜色</span>
-          <div @click="colorTap($event,'lineColor')" class="backColor"></div>
+          <div @click="colorTap($event,'lineColor')" :style="{'background-color': lineColor}" class="backColor"></div>
         </div>
       </div>
     </div>
@@ -89,7 +89,7 @@
       </div>
     </div>
     <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
-      <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="color"></Coloring>
+      <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="colorRgba"></Coloring>
     </div>
   </div>
 </template>
@@ -123,7 +123,11 @@ export default {
         {label: "3", value: '3'}
       ],
       rowValue: '1.5',
-      color: 'rgba(0,0,0,1)',
+      colorRgba: '',
+      color: '',
+      borderColor: '',
+      fillColor: '',
+      lineColor: '',
       boldAct: false,
       italicAct: false,
       scribeAct: false,
@@ -182,27 +186,28 @@ export default {
     open: {
       handler(val) {
         this.show = val
+        this.colorShow = false
       },
       deep: true
     },
     node: {
       handler(val) {
         if (val) {
-          console.log(val.nodeData.data)
+          this.colorShow = false
           this.sizeValue = val.nodeData.data.fontSize || '16'
           this.rowValue = val.nodeData.data.lineHeight || '1.5'
           this.boldAct = val.nodeData.data.fontWeight === 'bold'
           this.italicAct = val.nodeData.data.fontStyle === 'italic'
           this.scribeAct = val.nodeData.data.textDecoration === 'underline'
-          if(this.colorType === 'color') this.color = val.nodeData.data.color || 'rgba(0,0,0,1)'
-          if(this.colorType === 'borderColor') this.color = val.nodeData.data.borderColor || 'rgba(84, 150, 136,1)'
+          this.color = val.nodeData.data.color || 'rgba(0,0,0,1)'
+          this.borderColor = val.nodeData.data.borderColor || 'rgba(84, 150, 136,1)'
           this.styleValue = val.nodeData.data.borderDasharray || 'none'
           this.widthValue = val.nodeData.data.borderWidth || 1
           this.filletValue = val.nodeData.data.borderRadius || 5
-          if(this.colorType === 'fillColor') this.color = val.nodeData.data.fillColor || 'rgba(255,255,255,1)'
+          this.fillColor = val.nodeData.data.fillColor || 'rgba(255,255,255,1)'
           this.lineValue = val.nodeData.data.lineWidth || 1
           this.lineDasharray = val.nodeData.data.lineDasharray || 'none'
-          if(this.colorType === 'lineColor') this.color = val.nodeData.data.lineColor || 'rgba(84, 150, 136,1)'
+          this.lineColor = val.nodeData.data.lineColor || 'rgba(84, 150, 136,1)'
           this.shapeValue = val.nodeData.data.shape || 'rectangle'
         }
       }
@@ -283,9 +288,17 @@ export default {
     },
     colorTap(e, i) {
       this.colorType = i
+      if(this.colorType === 'color') this.colorRgba = this.color
+      if(this.colorType === 'borderColor') this.colorRgba = this.borderColor
+      if(this.colorType === 'fillColor') this.colorRgba = this.fillColor
+      if(this.colorType === 'lineColor') this.colorRgba = this.lineColor
       this.colorShow = !this.colorShow
     },
     rgba(e) {
+      if(this.colorType === 'color') this.color = e.rgba
+      if(this.colorType === 'borderColor') this.borderColor = e.rgba
+      if(this.colorType === 'fillColor') this.fillColor = e.rgba
+      if(this.colorType === 'lineColor') this.lineColor = e.rgba
       this.$emit('select', {type: this.colorType, value: e.rgba})
     },
     submit() {

package/src/index.js

@@ -87,7 +87,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.35.600',
+    version: '1.35.601',
     install,
     Calendar,
     Message,