How to use the @antv/g6/src/util.mix function in @antv/g6

To help you get started, we’ve selected a few @antv/g6 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OXOYO / X-Flowchart-Vue / src / global / g6 / node / step.js View on Github external
// 左上
        [ 'M', -width / 2, -height / 2 ],
        // 右上
        [ 'L', width * 3 / 8, -height / 2 ],
        // 右顶点
        [ 'L', width / 2, 0 ],
        // 右下
        [ 'L', width * 3 / 8, height / 2 ],
        // 左下
        [ 'L', -width / 2, height / 2 ],
        // 左顶点
        [ 'L', -width * 3 / 8, 0 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / rounded-rectangle.js View on Github external
// 右上顶点
        [ 'L', width / 2 - r, -height / 2 ],
        // 右上弧
        [ 'Q', width / 2, -height / 2, width / 2, -height / 2 + r ],
        // 右下顶点
        [ 'L', width / 2, height / 2 - r ],
        // 右下弧
        [ 'Q', width / 2, height / 2, width / 2 - r, height / 2 ],
        // 左下顶点
        [ 'L', -width / 2 + r, height / 2 ],
        // 左下弧
        [ 'Q', -width / 2, height / 2, -width / 2, height / 2 - r ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / general / bidirectional-arrow.js View on Github external
// 右上
        [ 'L', P5.x, P5.y ],
        // 右顶点
        [ 'L', P6.x, P6.y ],
        // 右下
        [ 'L', P7.x, P7.y ],
        // 右下中
        [ 'L', P8.x, P8.y ],
        // 左下中
        [ 'L', P9.x, P9.y ],
        // 左下
        [ 'L', P10.x, P10.y ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / rectangle.js View on Github external
const y = 0 - height / 2
      const path = [
        // 左顶点
        [ 'M', -width / 2, 0 ],
        // 左上顶点
        [ 'L', -width / 2, -height / 2 ],
        // 右上顶点
        [ 'L', width / 2, -height / 2 ],
        // 右下顶点
        [ 'L', width / 2, height / 2 ],
        // 左下顶点
        [ 'L', -width / 2, height / 2 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / and.js View on Github external
getShapeStyle (cfg) {
      const size = this.getSize(cfg)
      const width = size[0]
      const height = size[1]
      const x = 0 - width / 2
      const y = 0 - height / 2
      const path = [
        // 左上
        [ 'M', -width / 2, -height / 2 ],
        // 右弧
        [ 'C', width / 2, -height * 3 / 5, width / 2, height * 3 / 5, -width / 2, height / 2 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / ellipse.js View on Github external
const size = this.getSize(cfg)
      const width = size[0]
      const height = size[1]
      const x = 0 - width / 2
      const y = 0 - height / 2
      const path = [
        // 左顶点
        [ 'M', -width / 2, 0 ],
        // 上弧
        [ 'A', width / 2, height / 2, 0, 1, 1, width / 2, 0 ],
        // 下弧
        [ 'A', width / 2, height / 2, -180, 1, 1, -width / 2, 0 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / cloud.js View on Github external
[ 'M', -width * 6 / 20, height * 2 / 20 ],
        // 弧1 左->右
        [ 'C', -width * 10 / 20, height * 1 / 20, -width * 7 / 20, -height * 3 / 20, -width * 4 / 20, -height * 3 / 20 ],
        // 弧2 左->右
        [ 'C', -width * 4 / 20, -height * 6 / 20, width * 2 / 20, -height * 6 / 20, width * 4 / 20, -height * 4 / 20 ],
        // 弧3 左->右
        [ 'C', width * 6 / 20, -height * 5 / 20, width * 9 / 20, -height * 4 / 20, width * 7 / 20, -height * 2 / 20 ],
        // 弧4 左->右
        [ 'C', width * 10 / 20, height * 1 / 20, width * 8 / 20, height * 2 / 20, width * 5 / 20, height * 3 / 20 ],
        // 弧5 左->右
        [ 'C', width * 3 / 20, height * 6 / 20, -width * 4 / 20, height * 5 / 20, -width * 3 / 20, height * 3 / 20 ],
        // 弧6 左->右
        [ 'C', -width * 3 / 20, height * 4 / 20, -width * 8 / 20, height * 5 / 20, -width * 6 / 20, height * 2 / 20 ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / cube.js View on Github external
// 右上拐
        [ 'L', width / 2, -height * 3 / 8 ],
        // 横线
        [ 'L', width / 2, -height * 3 / 8 ],
        [ 'L', -width * 3 / 8, -height * 3 / 8 ],
        // 竖线
        [ 'L', -width * 3 / 8, height / 2 ],
        // 左下拐
        [ 'L', -width / 2, height * 3 / 8 ],
        // 左上
        [ 'L', -width / 2, -height / 2 ],
        // 斜线
        [ 'L', -width * 3 / 8, -height * 3 / 8 ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / or.js View on Github external
getShapeStyle (cfg) {
      const size = this.getSize(cfg)
      const width = size[0]
      const height = size[1]
      const x = 0 - width / 2
      const y = 0 - height / 2
      const path = [
        // 左上
        [ 'M', -width / 2, -height / 2 ],
        // 右弧
        [ 'C', width / 2, -height * 3 / 5, width / 2, height * 3 / 5, -width / 2, height / 2 ],
        // 左弧
        [ 'C', -width / 4, 0, -width / 4, 0, -width / 2, -height / 2 ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }
github OXOYO / X-Flowchart-Vue / src / global / g6 / node / data-storage.js View on Github external
const x = 0 - width / 2
      const y = 0 - height / 2
      const path = [
        // 左上
        [ 'M', -width / 4, -height / 2 ],
        // 右上
        [ 'L', width / 2, -height / 2 ],
        // 右弧
        [ 'C', width * 0.3, 0, width * 0.3, 0, width / 2, height / 2 ],
        // 左下
        [ 'L', -width / 4, height / 2 ],
        // 左弧
        [ 'C', -width * 0.45, 0, -width * 0.45, 0, -width / 4, -height / 2 ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定,所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }