vue2-client 1.2.5 → 1.2.8

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

@@ -1,34 +0,0 @@
-<template>
-  <div>
-    <Core></Core>
-  </div>
-</template>
-<script>
-
-import Core from '@vue2-client/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

@@ -1,43 +0,0 @@
-<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

@@ -1,16 +0,0 @@
-
-// 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

@@ -1,44 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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
-    }
-  })
-}