zydx-plus 1.35.598 → 1.35.600

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

@@ -16,188 +16,36 @@
       </div>
     </div>
     <div :id="id" class="mindMapContainer"></div>
-    <div class="node-style" :ref="id+'e'" :class="{'node-s': trans, 'node-h': !trans}">
-      <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="node-but">
-          <button @click="colorTap($event,'color')">颜色</button>
-          <button :style="{'background-color': (boldAct)? '#549688': '#fff','color': (boldAct)? '#fff': '#333'}"
-                  @click="bolds">粗体
-          </button>
-          <button :style="{'background-color': (italicAct)? '#549688': '#fff','color': (italicAct)? '#fff': '#333'}"
-                  @click="italics">斜体
-          </button>
-          <button :style="{'background-color': (scribeAct)? '#549688': '#fff','color': (scribeAct)? '#fff': '#333'}"
-                  @click="scribes">划线
-          </button>
-        </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,'borderColor')" class="backColor"></div>
-          </div>
-          <div class="node-left padd zIndex3">
-            <span>样式</span>
-            <Select :options="optionLine" v-model:value="styleValue"></Select>
-          </div>
-        </div>
-        <div class="style-list">
-          <div class="node-left zIndex3">
-            <span>宽度</span>
-            <Select :options="optionWidth" v-model:value="widthValue"></Select>
-          </div>
-          <div class="node-left padd zIndex4">
-            <span>圆角</span>
-            <Select :options="optionWidth" v-model:value="filletValue"></Select>
-          </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,'fillColor')" class="backColor"></div>
-          </div>
-        </div>
-      </div>
-      <div class="style-li">
-        <div class="style-title">线条</div>
-        <div class="style-list">
-          <div class="node-left zIndex">
-            <span>宽度</span>
-            <Select :options="optionWidth" v-model:value="lineValue"></Select>
-          </div>
-          <div class="node-left padd zIndex">
-            <span>样式</span>
-            <Select :options="optionLine" v-model:value="lineStyleValue"></Select>
-          </div>
-        </div>
-        <div class="style-list">
-          <div class="node-left">
-            <span>颜色</span>
-            <div @click="colorTap($event,'lineColor')" 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>
-            <Select :options="optionShape" v-model:value="shapeValue"></Select>
-          </div>
-        </div>
-      </div>
-      <div class="back-col" :style="{top: top + 'px'}" v-if="colorShow">
-        <Coloring @submit="submit" @empty="empty" @rgba="rgba" :color="color"></Coloring>
-      </div>
-    </div>
+    <Tool v-model:open="styleStatus" :node="nodeData" @select="toolSelect"></Tool>
   </div>
 </template>
 
 <script>
-import Select from '../../select/src/select.vue'
-import Coloring from '../../coloring/src/coloring.vue'
+
 import MindMap from "simple-mind-map";
 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";
 
 MindMap.usePlugin(AssociativeLine)
 MindMap.usePlugin(TouchEvent)
 MindMap.usePlugin(Export)
 
 export default {
-  components: {Select, Coloring},
+  components: {Tool},
   name: "zydx-mind",
   data() {
     return {
       id: null,
       mindMap: null,
-      mindShow: false,
+      mindShow: true,
       retShow: false,
       forwardShow: false,
-      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: '18',
-      optionRow: [
-        {label: "1", value: '1'},
-        {label: "1.5", value: '1.5'},
-        {label: "2", value: '2'},
-        {label: "2.5", value: '2.5'},
-        {label: "3", value: '3'}
-      ],
-      rowValue: '1.5',
-      optionWidth: [
-        {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},
-        {label: "8", value: 8},
-        {label: "9", value: 9},
-        {label: "10", value: 10},
-      ],
-      widthValue: 1,
-      filletValue: '5',
-      lineValue: '1',
-      optionLine: [
-        {label: "实线", value: 'none'},
-        {label: "虚线", value: '5,5'},
-        {label: "点线", value: '1,5'}
-      ],
-      lineStyleValue: 'none',
-      styleValue: 'none',
-      optionShape: [
-        {label: "矩形", value: 'rectangle'},
-        {label: "菱形", value: 'diamond'},
-        {label: "平行四边形", value: 'parallelogram'},
-        {label: "圆角矩形", value: 'roundedRectangle'},
-        {label: "八角形", value: 'octagonalRectangle'},
-        {label: "外三角矩形", value: 'outerTriangularRectangle'},
-        {label: "内三角矩形", value: 'innerTriangularRectangle'},
-        {label: "椭圆", value: 'ellipse'},
-        {label: "圆", value: 'circle'},
-      ],
-      shapeValue: 'rectangle',
-      trans: false,
+      nodeData: null,
       colorShow: false,
       top: 0,
-      colorData: {},
       activeNodes: null,
-      color: 'rgba(84,150,136,1)',
-      boldAct: false,
-      italicAct: false,
-      scribeAct: false,
       defaultData: {
         "data": {
           "text": "根节点"
@@ -207,6 +55,7 @@ export default {
       fullShow: true,
       layoutList: '',
       updateInit: false,
+      styleStatus: false
     }
   },
   props: {
@@ -257,46 +106,11 @@ export default {
       },
       immediate: true
     },
-    sizeValue(e) { // 字号
-      this.activeNodes.forEach(node => {
-        node.setStyle('fontSize', e)
-      })
-    },
-    rowValue(e) { // 行高
-      this.activeNodes.forEach(node => {
-        node.setStyle('lineHeight', e)
-      })
-    },
-    styleValue(e) { // 粗斜体
-      this.activeNodes.forEach(node => {
-        node.setStyle('borderDasharray', e)
-      })
-    },
-    widthValue(e) { // 线宽
-      this.activeNodes.forEach(node => {
-        node.setStyle('borderWidth', e)
-      })
-    },
-    filletValue(e) { // 圆角
-      this.activeNodes.forEach(node => {
-        node.setStyle('borderRadius', e)
-      })
-    },
     shapeValue(e) { // 形状
       this.activeNodes.forEach(node => {
         node.setStyle('shape', e)
       })
     },
-    lineValue(e) { // 线宽
-      this.activeNodes.forEach(node => {
-        node.setStyle('lineWidth', e)
-      })
-    },
-    lineStyleValue(e) { // 线宽
-      this.activeNodes.forEach(node => {
-        node.setStyle('lineDasharray', e)
-      })
-    },
   },
   mounted() {
     this.id = this.randomId()
@@ -311,6 +125,11 @@ export default {
     }
   },
   methods: {
+    toolSelect(v) {
+      this.activeNodes.forEach(node => {
+        node.setStyle(v.type, v.value)
+      })
+    },
     randomId() {
       const id = Math.random().toString(36).substr(2)
       return id.replace(/[0-9]/g, '')
@@ -383,17 +202,16 @@ export default {
         data: that.msgFun(that.data)
       });
       this.mindMap.setMode(this.readOnly ? 'readonly' : 'edit')
-      this.mindMap.on('node_active', (node) => {
+      this.mindMap.on('node_active', (node, activeNodeList) => {
+        this.nodeData = node
         this.mindShow = node === null;
+        if(node === null) this.styleStatus = false
+        this.activeNodes = activeNodeList
       })
       this.mindMap.on('back_forward', (index, len) => {
         this.retShow = index <= 0;
         this.forwardShow = index >= len - 1
       })
-      this.mindMap.on('node_active', (node, activeNodeList) => {
-        console.log('activeNodeList', activeNodeList)
-        this.activeNodes = activeNodeList
-      })
       this.mindMap.on('data_change', (data) => {
         this.$emit('dataChange', {
           data: data,
@@ -401,44 +219,6 @@ export default {
         })
       })
     },
-    scribes() {
-      this.scribeAct = !this.scribeAct
-      this.activeNodes.forEach(node => {
-        node.setStyle('textDecoration', (!this.scribeAct) ? 'none' : 'underline')
-      })
-    },
-    italics() {
-      this.italicAct = !this.italicAct
-      this.activeNodes.forEach(node => {
-        node.setStyle('fontStyle', (!this.italicAct) ? 'normal' : 'italic')
-      })
-    },
-    bolds() {
-      this.boldAct = !this.boldAct
-      this.activeNodes.forEach(node => {
-        node.setStyle('fontWeight', (!this.boldAct) ? 'normal' : 'bold')
-      })
-    },
-    rgba(e) {
-      this.colorData.data.target.style.backgroundColor = e.rgba
-    },
-    submit(e) {
-      this.activeNodes.forEach(node => {
-        node.setStyle(this.colorData.index, e.rgba)
-      })
-      this.colorData.data.target.style.backgroundColor = e.rgba
-      this.colorShow = false
-    },
-    empty() {
-      this.colorShow = false
-    },
-    colorTap(e, i) {
-      this.colorData = {index: i, data: e}
-      let parent = this.colorData.data.target.parentNode.offsetTop + 32
-      if (parent > 330) parent = 300
-      this.colorShow = !this.colorShow
-      this.top = parent
-    },
     structure() {
       this.layoutList = 'logicalStructure'
       const layout = this.mindMap.getLayout()
@@ -461,12 +241,6 @@ export default {
         },
         url: ''
       })
-      // that.mindMap.doExport.png().then((data) => {
-      //     that.$emit('preservation', {
-      //         data: that.mindMap.getData(),
-      //         url: data
-      //     })
-      // })
     },
     getContent() {
       let that = this
@@ -482,15 +256,7 @@ export default {
       this.mindMap.export('png', true, name, true, false, null, true)
     },
     nodeStyle() {
-      this.$refs[`${this.id}e`].style.display = 'block'
-      this.$refs[this.id].style.overflow = 'hidden'
-      this.trans = !this.trans
-      setTimeout(() => {
-        this.$refs[this.id].style.overflow = 'visible'
-        if (!this.trans) {
-          this.$refs[`${this.id}e`].style.display = 'none'
-        }
-      }, 250)
+      this.styleStatus = true
     },
     // 关联线
     associativeLine() {
@@ -520,212 +286,4 @@ export default {
 }
 </script>
 
-<style scoped>
-:deep(.custom-select-options li) {
-  padding: 0 10px !important;
-}
-
-.table-left {
-  margin-right: 5px;
-  display: flex;
-  width: 100%;
-}
-
-.node-s {
-  animation: nodeShow 0.3s;
-  display: block;
-}
-
-.node-h {
-  animation: nodeHide 0.3s;
-}
-
-@keyframes nodeHide {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(110%);
-  }
-}
-
-@keyframes nodeShow {
-  0% {
-    opacity: 0;
-    transform: translateX(110%);
-  }
-  10% {
-    opacity: 1;
-    transform: translateX(100%);
-  }
-  100% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-.zIndex {
-  position: relative;
-  z-index: 30;
-}
-
-.zIndex2 {
-  position: relative;
-  z-index: 33;
-}
-
-.zIndex3 {
-  position: relative;
-  z-index: 32;
-}
-
-.zIndex4 {
-  position: relative;
-  z-index: 31;
-}
-
-.backColor {
-  width: 93px;
-  height: 30px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  margin-left: -40px;
-  box-shadow: 0 1px 0 1px rgb(0 0 0 / 4%);
-  cursor: pointer;
-  background-color: #549688;
-}
-
-.back-col {
-  position: absolute;
-  top: 0;
-  left: 60px;
-  z-index: 40;
-}
-
-.node-but {
-  display: flex;
-  padding: 5px 0;
-}
-
-.node-but button {
-  flex: 1;
-  margin-right: 5px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  padding: 5px 10px;
-  cursor: pointer;
-  font-size: 12px;
-}
-
-.node-but button:last-child {
-  margin: 0;
-}
-
-.style-title {
-  font-size: 16px;
-  font-weight: bold;
-  padding: 5px 0 10px 0;
-}
-
-.mind {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.mind-table {
-  background-color: #fff;
-  border-radius: 5px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
-  z-index: 10;
-}
-
-.style-li {
-  position: relative;
-}
-
-.style-li img {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-}
-
-.style-list {
-  display: flex;
-  padding: 5px 0;
-}
-
-.node-left {
-  display: flex;
-  padding-right: 10px;
-}
-
-.node-left > span {
-  display: inline-block;
-  width: 80px;
-  line-height: 32px;
-  padding-right: 10px;
-  box-sizing: border-box;
-}
-
-.padd {
-  padding-right: 0;
-}
-
-.node-style {
-  position: absolute;
-  right: 0;
-  top: 50%;
-  background-color: #fff;
-  border-bottom-left-radius: 5px;
-  border-top-left-radius: 5px;
-  padding: 20px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 16px 0;
-  z-index: 11;
-  width: 320px;
-  height: 550px;
-  margin-top: -270px;
-  display: none;
-}
-
-.mind-table button {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  cursor: pointer;
-  font-size: 14px;
-  height: 30px;
-  line-height: 30px;
-  flex: 1;
-}
-
-.mind-table button:last-child {
-  margin-right: 0;
-}
-
-.mindMapContainer {
-  width: 100%;
-  height: 100%;
-}
-
-:deep(.custom-select) {
-  width: 94px;
-  margin-left: -40px;
-}
-
-.full-screen {
-  background: #fff;
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 100;
-}
-</style>
+<style scoped src="./mind.css"></style>