How to use spritejs - 10 common examples

constructor(attrs) {
    super();
    this.sizeBox = [ 0, 0, 0, 0 ]; // group内部大小
    this.renderBox = [ 0, 0, 0, 0 ] // 对于外接容器大小
    this.container = new Group();
    this.container.attr({ bgcolor: 'rgba(255,255,255,0.1)', size: [ 0.1, 0.1 ], clipOverflow: false });// 将group设置成非常小，不影响其他dom，并且不clip内部元素
    this.validatorSchema(attrs);
    [ 'dragstart', 'drag', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop', 'click', 'dblclick', 'mouseenter', 'mouseleave', 'mousemove', 'mousedown' ].forEach(evt => { // 透传container上的事件
      this.container.on(evt, (e) => {
        this.dispatchEvent(evt, e);
      })
    });

    // workflow append 的时候触发mounted
    this.on('mounted', this.mounted);

    // 拖动的时候，修改renderBox
    this.on('drag', () => {
      const [ oX, oY ] = this.container.renderBox;
      this.renderBox = [ oX + this.sizeBox[ 0 ], oY + this.sizeBox[ 1 ], oX + this.sizeBox[ 2 ], oY + this.sizeBox[ 3 ] ];
    })

draw: function () {
      const { text, fillColor, textAttrs, shapeAttrs } = this.attr();
      this.points = this.points || shapeAttrs.points;
      this.$shape = new Polygon();
      let mergeShapeAttr = newObj({
        points: this.points,
        fillColor,
        // anchor: [0.5, 0.5],
      }, shapeAttrs);
      this.points = mergeShapeAttr.points;
      this.attr({ shapeAttrs: mergeShapeAttr });
      this.$shape.attr(mergeShapeAttr);
      this.append(this.$shape);
      addLabel.call(this, text, textAttrs)
    }
  }

import { install } from 'sprite-extend-shapes'
import { Base } from './base'
import { Step } from './step'
import { Link } from './link'
import * as spritejs from 'spritejs'
import { _steps, _links, _workflow, _render, _isDragging, _hasLinkReject } from './symbolNames'
import * as functions from './functions'
import { getType } from './utils'
import { Ticks } from './ticks'

const { Scene } = spritejs;
spritejs.use(install);
class Workflow extends Base {
  constructor(attrs) {
    super(attrs);
    /*****
  * selector:css选择器
  * size:canvas大小
  * zoom:是缩放
  * **/
    this.ticks = new Ticks(); // 自身的ticks函数处理
    this.attr(Object.assign({
      'selector': '',
      'size': [ 600, 400 ],
      'zoom': [ 0.5, 2 ]
    }, attrs));
    const { selector, size } = this.attr();
    const scene = new Scene(selector, {

draw: function () {
      const { text, fillColor, textAttrs, shapeAttrs } = this.attr();
      this.$shape = new Ellipse();
      let mergeShapeAttr = newObj({
        fillColor,
        radiusX: 50,
        radiusY: 24,
        // anchor: [0.5, 0.5]
      }, shapeAttrs);
      this.attr({ shapeAttrs: mergeShapeAttr });
      this.$shape.attr(mergeShapeAttr)
      this.append(this.$shape);
      addLabel.call(this, text, textAttrs)
    }
  },

curve: function() {
      this.$line = new Polycurve();
      const { points, lineAttrs } = this.attr();
      let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee' }, lineAttrs, { points: points });
      this.$line.attr(mergeLinkAttrs);
      this.append(this.$line)
    },
    polyline: function () { // 折线连接

polyline: function () { // 折线连接
      this.$line = new Polyline();
      this.$arrow = new Triangle();
      const { startPoint, endPoint, text, textAttrs, lineAttrs } = this.attr();
      const { lineWidth = 1 } = lineAttrs;
      let insertPoint = [ endPoint[ 0 ], startPoint[ 1 ] ];
      if (Math.abs(endPoint[ 1 ] - startPoint[ 1 ]) < Math.abs(endPoint[ 0 ] - startPoint[ 0 ])) {
        insertPoint = [ startPoint[ 0 ], endPoint[ 1 ] ];
      }
      let lineEndPoint = getPointByDistance(endPoint, insertPoint, lineWidth)
      let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee', bgcolor: '#f00' }, lineAttrs, { points: [ startPoint, insertPoint, lineEndPoint ] });
      this.$line.attr(mergeLinkAttrs);
      this.$arrow.attr({ color: mergeLinkAttrs.color, pos: [ endPoint ], sides: [ 8 + lineWidth, 8 + lineWidth ], angle: 45, fillColor: mergeLinkAttrs.color });
      this.append(this.$line);
      this.append(this.$arrow);
      if (getType(text) === 'string') {
        this.$label = new Label(text);
        this.$label.attr(newObj({}, textAttrs, { anchor: [ 0.5, 0.5 ], clipOverflow: false }))

polyline: function () { // 折线连接
      this.$line = new Polyline();
      this.$arrow = new Triangle();
      const { startPoint, endPoint, text, textAttrs, lineAttrs } = this.attr();
      const { lineWidth = 1 } = lineAttrs;
      let insertPoint = [ endPoint[ 0 ], startPoint[ 1 ] ];
      if (Math.abs(endPoint[ 1 ] - startPoint[ 1 ]) < Math.abs(endPoint[ 0 ] - startPoint[ 0 ])) {
        insertPoint = [ startPoint[ 0 ], endPoint[ 1 ] ];
      }
      let lineEndPoint = getPointByDistance(endPoint, insertPoint, lineWidth)
      let mergeLinkAttrs = newObj({ lineWidth: 1, color: '#eee', bgcolor: '#f00' }, lineAttrs, { points: [ startPoint, insertPoint, lineEndPoint ] });
      this.$line.attr(mergeLinkAttrs);
      this.$arrow.attr({ color: mergeLinkAttrs.color, pos: [ endPoint ], sides: [ 8 + lineWidth, 8 + lineWidth ], angle: 45, fillColor: mergeLinkAttrs.color });
      this.append(this.$line);
      this.append(this.$arrow);
      if (getType(text) === 'string') {
        this.$label = new Label(text);
        this.$label.attr(newObj({}, textAttrs, { anchor: [ 0.5, 0.5 ], clipOverflow: false }))
        this.append(this.$label);

if (!isWeixinApp() && opts.forceFit) {
      opts.viewport = 'auto'
    } else {
      opts.viewport = opts.size ? opts.size : [opts.width, opts.height]
    }

    /**
      {
        vwr: 1,
        layer: 'fglayer',
      }
     */
    if (isWeixinApp()) {
      let [width, height] = opts.viewport;
      let pixelRatio = opts.pixelRatio || 'px';
      this.scene = new Scene(Number(width) || null, Number(height) || null, pixelRatio);
    } else {
      this.scene = new Scene(container, {
        displayRatio: 'auto',
        ...opts
      })
    }
    const layerID = opts.layer || 'default'
    if (isWeixinApp()) {
      this.layer = this.scene.layer(layerID, opts.component)
    } else {
      this.layer = this.scene.layer(layerID)
    }

    if (isDev) {
      this.layer.on('update', debounce(() => {
        console.info(

} else {
      opts.viewport = opts.size ? opts.size : [opts.width, opts.height]
    }

    /**
      {
        vwr: 1,
        layer: 'fglayer',
      }
     */
    if (isWeixinApp()) {
      let [width, height] = opts.viewport;
      let pixelRatio = opts.pixelRatio || 'px';
      this.scene = new Scene(Number(width) || null, Number(height) || null, pixelRatio);
    } else {
      this.scene = new Scene(container, {
        displayRatio: 'auto',
        ...opts
      })
    }
    const layerID = opts.layer || 'default'
    if (isWeixinApp()) {
      this.layer = this.scene.layer(layerID, opts.component)
    } else {
      this.layer = this.scene.layer(layerID)
    }

    if (isDev) {
      this.layer.on('update', debounce(() => {
        console.info(
          `%c如果持续打印该信息，说明 layer 在不断重绘，需要找出问题！`,
          'color: red'

let lines = this.renderLines
    let patchPoints = {
      start: [],
      end: []
    }
    let areaAttrs = { lineWidth: 0, opacity: 0.5 }
    let cusAttrs = this.style('area')(areaAttrs, null, 0)
    Object.assign(areaAttrs, cusAttrs)
    let layer = this.areaLayer
    layer.canvas.style.opacity = areaAttrs.opacity
    layer.clear()
    if (compositeOperation) {
      layer.context.globalCompositeOperation = compositeOperation
    }
    let group = new Group()
    group.attr(this.attr())
    layer.append(group)
    this.renderLines.forEach((line, i) => {
      let color = this.color(i)
      let areaAttrs = {
        fillColor: color,
        lineWidth: 0,
        strokeColor: 'transparent'
      }
      let cusAttrs = this.style('area')(
        areaAttrs,
        line.data.map(item => item.dataOrigin),
        i
      )
      Object.assign(areaAttrs, cusAttrs)
      if (cusAttrs !== false) {