vue2-client 0.1.0 → 1.1.0

package/src/pages/system/applyInstallView/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <Core></Core>
+  </div>
+</template>
+<script>
+
+import Core from '@/pages/system/applyInstallView/Core'
+
+export default {
+  name: 'Test',
+  data () {
+    return {
+      isShowOne: false,
+      isShowTwo: false
+    }
+  },
+  components: {
+    Core
+  },
+  methods: {
+    goto () {
+      this.isShowTwo = false
+      this.isShowOne = true
+    },
+    goto2 () {
+      this.isShowTwo = true
+      this.isShowOne = false
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/pages/system/applyInstallView/registerNode/Connect.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="connect">
+    <p>{{ name }}</p>
+    <p>您好，请问需要买保险吗？</p>
+    <div class="button-list">
+      <button @mousedown.stop="done(1)">有保险了</button>
+      <button @mousedown.stop="done(2)">不需要</button>
+      <button @mousedown.stop="done(3)">需要</button>
+      <button @mousedown.stop="done(4)">特殊</button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String
+  },
+  methods: {
+    done (type) {
+      this.$emit('select-button', type)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.connect {
+  width: 100%;
+  height: 100%;
+  background: #FFF;
+  border: 1px solid #9a9a9b;
+  box-sizing: border-box;
+  padding: 10px;
+}
+.connect p {
+  margin: 0;
+}
+.button-list {
+  position: absolute;
+  bottom: 10px;
+}
+</style>

package/src/pages/system/applyInstallView/registerNode/index.js

@@ -0,0 +1,16 @@
+
+// svg png 图片资源来自阿里字体库
+// [阿里字体库](https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4)
+// svg图标建议使用自己创建的
+import registerStart from './registerStart'
+import registerBase from './registerBase'
+import registerEnd from './registerEnd'
+import registerPush from './registerPush'
+import registerStep from './registerStep'
+import registerDownload from './registerDownload'
+import registerPolyline from './registerPolyline'
+import registerTask from './registerTask'
+import registerConnect from './registerConnect'
+
+import registerBackEdge from './registerBackEdge'
+export { registerBackEdge, registerStart, registerBase, registerEnd, registerPush, registerStep, registerDownload, registerPolyline, registerTask, registerConnect }

package/src/pages/system/applyInstallView/registerNode/registerBackEdge.js

@@ -0,0 +1,44 @@
+export default function registerBackEdge (lf) {
+  lf.register('backEdge', ({ PolylineEdge, PolylineEdgeModel }) => {
+    class SequenceModel extends PolylineEdgeModel {
+      setAttributes () {
+        this.offset = 20
+      }
+
+      getAnimation () {
+        const animation = super.getAnimation()
+        animation.stroke = 'blue'
+        return animation
+      }
+
+      getEdgeStyle () {
+        const style = super.getEdgeStyle()
+        const { properties } = this
+        if (properties.isActived) {
+          style.strokeDasharray = '4 4'
+        }
+        style.stroke = 'orange'
+        return style
+      }
+
+      getTextStyle () {
+        const style = super.getTextStyle()
+        style.color = '#3451F1'
+        style.fontSize = 30
+        style.background.fill = '#F2F131'
+        return style
+      }
+
+      getOutlineStyle () {
+        const style = super.getOutlineStyle()
+        style.stroke = 'red'
+        style.hover.stroke = 'red'
+        return style
+      }
+    }
+    return {
+      view: PolylineEdge,
+      model: SequenceModel
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerBase.js

@@ -0,0 +1,139 @@
+export default function registerBase (lf, clickPlus, mouseDownPlus, showPropView) {
+  lf.register('base', ({ PolygonNode, PolygonNodeModel, h }) => {
+    class Node extends PolygonNode {
+      getIconShape () {
+        const { model } = this.props
+        const { stroke } = model.getNodeStyle()
+        return h(
+          'svg',
+          {
+            x: 20,
+            y: 18,
+            width: 30,
+            height: 30,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M511.02 884.57l413.96-239-413.96-239.01L97.05 645.57z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M513.08 617.44l413.97-239.01-413.97-239-413.96 239z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#3D4265',
+              d: 'M694.67 512.6L513.08 617.44 329.43 511.4l181.59-104.84z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { width, height, x, y, points } = model
+        const { fill, fillOpacity, strokeWidth, stroke, strokeOpacity } = model.getNodeStyle()
+        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
+        const pointsPath = points.map(point => point.join(',')).join(' ')
+        return h(
+          'g',
+          {
+            transform
+          },
+          [
+            h(
+              'polygon',
+              {
+                points: pointsPath,
+                fill,
+                stroke,
+                strokeWidth,
+                strokeOpacity,
+                fillOpacity
+              }
+            ),
+            this.getIconShape()
+          ]
+        )
+      }
+    }
+    class Model extends PolygonNodeModel {
+      constructor (data, graphModel) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 50
+        }
+        super(data, graphModel)
+        // 右键菜单自由配置，也可以通过边的properties或者其他属性条件更换不同菜单
+        this.menu = [
+          {
+            className: 'lf-menu-delete',
+            text: '删除',
+            callback (node) {
+              // const comfirm = window.confirm('你确定要删除吗？')
+              lf.deleteNode(node.id)
+            }
+          },
+          {
+            text: '编辑文本',
+            className: 'lf-menu-item',
+            callback (node) {
+              lf.editText(node.id)
+            }
+          },
+          {
+            text: '编辑属性',
+            className: 'lf-menu-item',
+            callback (node) {
+              showPropView(node)
+            }
+          },
+          {
+            text: '复制',
+            className: 'lf-menu-item',
+            callback (node) {
+              lf.cloneNode(node.id)
+            }
+          }
+        ]
+      }
+      initNodeData (data) {
+        super.initNodeData(data)
+        const lenght = 35
+        this.points = [
+          [lenght, 0],
+          [lenght * 2, lenght],
+          [lenght, lenght * 2],
+          [0, lenght]
+        ]
+      }
+      // 自定义锚点样式
+      getAnchorStyle () {
+        const style = super.getAnchorStyle()
+        style.hover.r = 8
+        style.hover.fill = 'rgb(24, 125, 255)'
+        style.hover.stroke = 'rgb(24, 125, 255)'
+        return style
+      }
+      // 自定义节点样式
+      getNodeStyle () {
+        const style = super.getNodeStyle()
+        style.stroke = '#386BF3'
+        style.strokeWidth = 3
+        return style
+      }
+    }
+    return {
+      view: Node,
+      model: Model
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerConnect.js

@@ -0,0 +1,60 @@
+import Vue from 'vue'
+import Connect from './Connect.vue'
+
+export default function registerConnect (lf) {
+  lf.register('connect', ({ HtmlNode, HtmlNodeModel }) => {
+    class ConnectNode extends HtmlNode {
+      shouldUpdate () {
+        const { properties } = this.props.model
+        if (this.currrentProperties && this.currrentProperties !== '{}' && this.currrentProperties === JSON.stringify(properties)) return false
+        this.currrentProperties = JSON.stringify(properties)
+        return true
+      }
+      setHtml (rootEl) {
+        // todo: 和react不一样，还没有找到合适的利用vue内置的diff算法来计算节点是否需要更新。
+        if (!this.shouldUpdate()) return
+        const { properties } = this.props.model
+        const el = document.createElement('div')
+        rootEl.innerHTML = ''
+        rootEl.appendChild(el)
+        const Profile = Vue.extend({
+          render: function (h) {
+            return h(Connect, {
+              props: {
+                name: properties.name
+              },
+              on: {
+                'select-button': (type) => {
+                  console.log('select-button', type)
+                }
+              }
+            })
+          }
+        })
+        new Profile().$mount(el)
+      }
+    }
+    class ConnectNodeModel extends HtmlNodeModel {
+      initNodeData (data) {
+        if (data.text) {
+          data.text.editable = false
+        }
+        super.initNodeData(data)
+        const width = 300
+        const height = 150
+        this.width = width
+        this.height = height
+        this.anchorsOffset = [
+          [width / 2, 0],
+          [0, height / 2],
+          [-width / 2, 0],
+          [0, -height / 2]
+        ]
+      }
+    }
+    return {
+      view: ConnectNode,
+      model: ConnectNodeModel
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerDownload.js

@@ -0,0 +1,92 @@
+const NODE_COLOR = '#9932CC'
+export default function registerDownload (lf) {
+  lf.register('download', ({ PolygonNode, PolygonNodeModel, h }) => {
+    class Node extends PolygonNode {
+      getIconShape () {
+        return h(
+          'svg',
+          {
+            x: 14,
+            y: 13,
+            width: 23,
+            height: 23,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: NODE_COLOR,
+              d: 'M831.513034 319.863005h-95.945189c-17.662265 0-31.980365 14.3181-31.980365 31.980365 0 17.662265 14.3181 31.980365 31.980365 31.980366h64.218604c17.520025 0 31.722492 14.202467 31.722492 31.722492V863.786065c0 17.520025-14.202467 31.722492-31.722492 31.722492H159.66442c-17.520025 0-31.722492-14.202467-31.722493-31.722492V415.546228c0-17.520025 14.202467-31.722492 31.722493-31.722492h64.218603c17.662265 0 31.980365-14.3181 31.980366-31.980366 0-17.662265-14.3181-31.980365-31.980366-31.980365H127.937834c-35.322483 0-63.956637 28.634154-63.956637 63.956637v511.693008c0 35.322483 28.634154 63.956637 63.956637 63.956638h703.5752c35.322483 0 63.956637-28.634154 63.956638-63.956638V383.819642c0-35.32146-28.634154-63.956637-63.956638-63.956637z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: NODE_COLOR,
+              d: 'M310.382073 521.036817c-12.388145-12.388145-32.473599-12.388145-44.862767 0l-0.364297 0.364297c-12.388145 12.388145-12.388145 32.473599 0 44.862767l190.186573 190.186574c5.818519 6.813173 14.465456 11.137665 24.126491 11.137664h0.515746c9.662057 0 18.307971-4.324492 24.12649-11.137664L694.296883 566.263881c12.388145-12.388145 12.388145-32.473599 0-44.862767l-0.364297-0.364297c-12.388145-12.388145-32.473599-12.388145-44.862767 0L511.706311 658.400325V95.743598c0-17.520025-14.202467-31.722492-31.722492-31.722492h-0.515746c-17.520025 0-31.722492 14.202467-31.722493 31.722492v562.656727L310.382073 521.036817z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { width, height, x, y, points } = model
+        const {
+          fill,
+          fillOpacity,
+          strokeWidth,
+          stroke,
+          strokeOpacity
+        } = model.getNodeStyle()
+        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
+        const pointsPath = points.map(point => point.join(',')).join(' ')
+        return h(
+          'g',
+          {
+            transform
+          },
+          [
+            h(
+              'polygon',
+              {
+                points: pointsPath,
+                fill,
+                stroke,
+                strokeWidth,
+                strokeOpacity,
+                fillOpacity
+              }
+            ),
+            this.getIconShape()
+          ]
+        )
+      }
+    }
+    class Model extends PolygonNodeModel {
+      constructor (data, graphModel) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 50
+        }
+        super(data, graphModel)
+        const lenght = 25
+        this.points = [
+          [lenght, 0],
+          [lenght * 2, lenght],
+          [lenght, lenght * 2],
+          [0, lenght]
+        ]
+      }
+      getNodeStyle () {
+        const style = super.getNodeStyle()
+        style.stroke = NODE_COLOR
+        return style
+      }
+    }
+    return {
+      view: Node,
+      model: Model
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerEnd.js

@@ -0,0 +1,110 @@
+export default function registerEnd (lf) {
+  lf.register('end', ({ CircleNode, CircleNodeModel, h }) => {
+    class EndNode extends CircleNode {
+      getIconShape () {
+        const { model } = this.props
+        const { stroke } = model.getNodeStyle()
+        const {
+          x,
+          y,
+          width,
+          height
+        } = model
+        return h(
+          'svg',
+          {
+            x: x - width / 2 + 8,
+            y: y - height / 2 + 7,
+            width: 25,
+            height: 25,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#FFFFFF',
+              d: 'M282.482759 282.482759h459.034482v459.034482H282.482759z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { x, y, r } = model
+        const { fill, stroke, strokeWidth } = model.getNodeStyle()
+        return h(
+          'g',
+          {
+          },
+          [
+            h(
+              'circle',
+              {
+                cx: x,
+                cy: y,
+                r,
+                fill,
+                stroke,
+                strokeWidth
+              }
+            ),
+            this.getIconShape()
+          ]
+        )
+      }
+    }
+    class EndModel extends CircleNodeModel {
+      // 自定义节点形状属性
+      initNodeData (data) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 35
+        }
+        super.initNodeData(data)
+        this.r = 20
+      }
+      // 自定义节点样式属性
+      getNodeStyle () {
+        const style = super.getNodeStyle()
+        style.stroke = '#D75A4A'
+        style.strokeWidth = 3
+        return style
+      }
+      // 自定义锚点样式
+      getAnchorStyle () {
+        const style = super.getAnchorStyle()
+        style.hover.r = 8
+        style.hover.fill = 'rgb(24, 125, 255)'
+        style.hover.stroke = 'rgb(24, 125, 255)'
+        return style
+      }
+      // 自定义节点outline
+      getOutlineStyle () {
+        const style = super.getOutlineStyle()
+        style.stroke = '#88f'
+        return style
+      }
+      getConnectedSourceRules () {
+        const rules = super.getConnectedSourceRules()
+        const notAsTarget = {
+          message: '终止节点不能作为连线的起点',
+          validate: () => false
+        }
+        rules.push(notAsTarget)
+        return rules
+      }
+    }
+    return {
+      view: EndNode,
+      model: EndModel
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerPolyline.js

@@ -0,0 +1,14 @@
+export default function registerPolyline (lf) {
+  lf.register('polyline', ({ PolylineEdge, PolylineEdgeModel }) => {
+    class ConnnectionModel extends PolylineEdgeModel {
+      // eslint-disable-next-line no-useless-constructor
+      constructor (data, graphModel) {
+        super(data, graphModel)
+      }
+    }
+    return {
+      view: PolylineEdge,
+      model: ConnnectionModel
+    }
+  })
+}

package/src/pages/system/applyInstallView/registerNode/registerPush.js

@@ -0,0 +1,127 @@
+export default function registerPush (lf, clickPlus, mouseDownPlus) {
+  lf.register('push', ({ PolygonNode, PolygonNodeModel, h }) => {
+    class Node extends PolygonNode {
+      getIconShape () {
+        const { model } = this.props
+        const { stroke } = model.getNodeStyle()
+        return h(
+          'svg',
+          {
+            x: 20,
+            y: 18,
+            width: 30,
+            height: 30,
+            viewBox: '0 0 1024 1024'
+          },
+          h(
+            'path',
+            {
+              fill: stroke,
+              d: 'M866.461538 39.384615H393.846154c-43.323077 0-78.769231 35.446154-78.769231 78.769231v1.969231c0 13.784615 7.876923 27.569231 19.692308 35.446154 5.907692 3.938462 80.738462 78.769231 80.738461 78.769231 5.907692 5.907692 15.753846 0 15.753846-7.876924 0-15.753846 13.784615-31.507692 29.538462-31.507692h334.769231c15.753846 0 31.507692 15.753846 31.507692 31.507692v531.692308c0 15.753846-15.753846 27.569231-31.507692 27.569231h-334.769231c-15.753846 0-27.569231-11.815385-27.569231-27.569231v-1.969231c0-7.876923-9.846154-11.815385-15.753846-5.907692 0 0-74.830769 74.830769-82.707692 78.769231-11.815385 7.876923-19.692308 19.692308-19.692308 35.446154v39.384615c0 43.323077 33.476923 78.769231 76.8 78.769231h472.615385c43.323077 0 80.738462-35.446154 80.738461-78.769231V118.153846c0-43.323077-35.446154-78.769231-78.769231-78.769231zM630.153846 945.230769c-33.476923 0-59.076923-25.6-59.076923-59.076923s25.6-59.076923 59.076923-59.076923 59.076923 25.6 59.076923 59.076923-25.6 59.076923-59.076923 59.076923z m-86.646154-474.584615L297.353846 224.492308c-11.815385-11.815385-29.538462-11.815385-41.353846 0l-41.353846 41.353846c-11.815385 11.815385-11.815385 29.538462 0 41.353846l90.584615 90.584615c11.815385 11.815385 3.938462 33.476923-13.784615 33.476923H29.538462c-15.753846 1.969231-29.538462 15.753846-29.538462 31.507693v59.076923c0 15.753846 13.784615 29.538462 29.538462 29.538461h259.938461c17.723077 0 25.6 21.661538 13.784615 33.476923l-90.584615 90.584616c-11.815385 11.815385-11.815385 29.538462 0 41.353846l41.353846 41.353846c11.815385 11.815385 29.538462 11.815385 41.353846 0L543.507692 512c9.846154-9.846154 9.846154-29.538462 0-41.353846z'
+            }
+          )
+        )
+      }
+      getPulsShape () {
+        const { model } = this.props
+        // 判断当前节点是否子节点
+        const graphData = lf.getGraphData()
+        const edges = graphData.edges
+        let hasChildNode = false
+        edges.some(item => {
+          if (item.sourceNodeId === model.id) {
+            hasChildNode = true
+            return true
+          }
+        })
+        if (hasChildNode) {
+          return
+        }
+        return h(
+          'svg',
+          {
+            x: 70,
+            y: 20,
+            width: 30,
+            height: 30,
+            viewBox: '0 0 1024 1024',
+            class: 'time-plus',
+            onClick: (e) => clickPlus(e, model),
+            onMousedown: (e) => mouseDownPlus(e, model),
+            onMouseUp: (e) => mouseDownPlus(e, model)
+          },
+          h(
+            'path',
+            {
+              fill: '#f17611',
+              d: 'M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#ffffff',
+              d: 'M448 298.666667h128v426.666666h-128z'
+            }
+          ),
+          h(
+            'path',
+            {
+              fill: '#ffffff',
+              d: 'M298.666667 448h426.666666v128H298.666667z'
+            }
+          )
+        )
+      }
+      getShape () {
+        const { model } = this.props
+        const { width, height, x, y, points } = model
+        const { fill, fillOpacity, strokeWidth, stroke, strokeOpacity } = model.getNodeStyle()
+        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
+        const pointsPath = points.map(point => point.join(',')).join(' ')
+        return h(
+          'g',
+          {
+            transform
+          },
+          [
+            h(
+              'polygon',
+              {
+                points: pointsPath,
+                fill,
+                stroke,
+                strokeWidth,
+                strokeOpacity,
+                fillOpacity
+              }
+            ),
+            this.getIconShape(),
+            this.getPulsShape()
+          ]
+        )
+      }
+    }
+    class Model extends PolygonNodeModel {
+      constructor (data, graphModel) {
+        data.text = {
+          value: (data.text && data.text.value) || '',
+          x: data.x,
+          y: data.y + 50
+        }
+        super(data, graphModel)
+        const lenght = 35
+        this.points = [
+          [lenght, 0],
+          [lenght * 2, lenght],
+          [lenght, lenght * 2],
+          [0, lenght]
+        ]
+      }
+    }
+    return {
+      view: Node,
+      model: Model
+    }
+  })
+}