How to use the spritejs.Group function in spritejs

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 ] ];
    })

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) {

subPlot(pos, size) {
    const $group = new Group({
      boxSizing: 'border-box',
      ...this.recalculateLayout(pos, size)
    })
    this.layer.appendChild($group)
    this.plots.push({ $group, pos, size })
    return $group
  }

forceUpdate() {
    invariant(
      this.chart && this.chart.$group,
      `This component hasn't connect to chart now!`
    )
    const attr = JSON.parse(JSON.stringify(this.$group.attr()))
    const $group = new Group(attr)
    this.chart.$group.replaceChild($group, this.$group)
    this.$group = $group
    const data = this.beforeUpdate && this.beforeUpdate()
    const vnode = this.render && this.render(data)
    $group.attr({ ...vnode.attrs })
    this.__vnode__ = vnode
    render(vnode.children, $group)
    this.updated()
  }
}

[_renderChild](child) {
    invariant(child.render, `Chart need a instance which has render method!`)
    invariant(
      this.dataset,
      `The chart can't render because havn't source data!`
    )

    if (!child.dataset) {
      child.dataset = this.dataset
    }

    this.dataset.addDep(child)
    const $group = new Group()
    this.$group.appendChild($group)
    child.$group = $group

    const data = child.beforeRender && child.beforeRender()
    const vnode = child.render && child.render(data)

    $group.attr({ ...vnode.attrs })

    child.__vnode__ = vnode
    render(vnode.children, $group)
    child.__isRendered__ = true
    child.rendered()
  }