initialize(): void {
    super.initialize()

    this.reset = new Signal0(this, "reset")

    for (const xr of values(this.extra_x_ranges).concat(this.x_range)) {
      let plots = xr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        xr.setv({plots: plots}, {silent: true})
      }
    }

    for (const yr of values(this.extra_y_ranges).concat(this.y_range)) {
      let plots = yr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        yr.setv({plots: plots}, {silent: true})
      }
    }
    // Min border applies to the edge of everything
    if (this.min_border != null) {
      if (this.min_border_top == null)
        this.min_border_top = this.min_border
      if (this.min_border_bottom == null)
        this.min_border_bottom = this.min_border
      if (this.min_border_left == null)
        this.min_border_left = this.min_border
      if (this.min_border_right == null)
        this.min_border_right = this.min_border
    }

    // Setup side renderers
    for (const side of ['above', 'below', 'left', 'right']) {
      const layout_renderers = this.getv(side)
      for (const renderer of layout_renderers)
        renderer.add_panel(side)
    }

    this._init_title_panel()
    this._init_toolbar_panel()

    this._plot_canvas = this._init_plot_canvas()
    this.plot_canvas.toolbar = this.toolbar

    // Set width & height to be the passed in plot_width and plot_height
    // We may need to be more subtle about this - not sure why people use one
    // or the other.
    if (this.width == null)
      this.width = this.plot_width
    if (this.height == null)
      this.height = this.plot_height
  }

  protected _paint_levels(ctx: Context2d, levels: string[], clip_region?: FrameBox): void {
    ctx.save()

    if (clip_region != null) {
      ctx.beginPath()
      ctx.rect.apply(ctx, clip_region)
      ctx.clip()
    }

    const indices: {[key: string]: number} = {}
    for (let i = 0; i < this.model.plot.renderers.length; i++) {
      const renderer = this.model.plot.renderers[i]
      indices[renderer.id] = i
    }

    const sortKey = (renderer_view: RendererView) => indices[renderer_view.model.id]

    for (const level of levels) {
      const renderer_views = sortBy(values(this.levels[level]), sortKey)

      for (const renderer_view of renderer_views) {
        renderer_view.render()
      }
    }

    ctx.restore()
  }

  _paint_levels(ctx: Context2d, levels, clip_region = null) {
    ctx.save();

    if ((clip_region != null) && (this.model.plot.output_backend === "canvas")) {
      ctx.beginPath();
      ctx.rect.apply(ctx, clip_region);
      ctx.clip();
    }

    const indices = {};
    for (let i = 0; i < this.model.plot.renderers.length; i++) {
      const renderer = this.model.plot.renderers[i];
      indices[renderer.id] = i;
    }

    const sortKey = renderer_view => indices[renderer_view.model.id];

    for (const level of levels) {
      const renderer_views = sortBy(values(this.levels[level]), sortKey);

      for (const renderer_view of renderer_views) {
        renderer_view.render();
      }
    }

    return ctx.restore();
  }

  it("computes complicated patch for models added during construction", () => {
    // this test simulates how from_json has to compute changes
    // to send back to the server, when the client side makes
    // changes while constructing the parsed document.
    const d = new Document()
    expect(d.roots().length).to.equal(0)
    expect(Object.keys(d._all_models).length).to.equal(0)

    const root1 = new ComplicatedModelWithConstructTimeChanges()
    // change it so it doesn't match what initialize() does
    const serialized_values = {
      name: 'foo',
      tags: ['bar'],
      list_prop: [new AnotherModel({ bar: 42 })],
      dict_prop: { foo: new AnotherModel({ bar: 43 }) },
      obj_prop: new ModelWithConstructTimeChanges(),
      dict_of_list_prop: { foo: [new AnotherModel({ bar: 44 })] },
    }
    root1.setv(serialized_values)

    d.add_root(root1)

    // in computing this, we will construct a
    // ComplicatedModelWithConstructTimeChanges which will set
    // stuff in initialize(), overwriting serialized_values above.
    const json = d.to_json_string()
    const parsed = JSON.parse(json)
    parsed.version = js_version
    const copy = Document.from_json_string(JSON.stringify(parsed))

    const patch = Document._compute_patch_since_json(JSON.parse(json), copy)

    // document should have the values we set above
    for (const key in serialized_values) {
      const value = (serialized_values as any)[key] // XXX: own
      expect(root1.getv(key)).to.deep.equal(value)
    }

    expect(root1.list_prop[0].bar).to.equal(42)
    expect(root1.dict_prop.foo.bar).to.equal(43)

    expect(patch.events.length).to.equal(4)

    // but when we apply the patch, initialize() should override
    // what we had in the json only for the four things that
    // ComplicatedModelWithConstructTimeChanges changes (not name
    // and tags)
    d.apply_json_patch(patch)
    expect(root1.name).to.equal('foo')
    expect(root1.tags).to.deep.equal(['bar'])
    expect(root1.list_prop.length).to.equal(1)
    expect(root1.list_prop[0].bar).to.equal(1)
    expect(Object.keys(root1.dict_prop).length).to.equal(1)
    expect(root1.dict_prop.foo.bar).to.equal(1)
    expect(root1.obj_prop).to.be.an.instanceof(ModelWithConstructTimeChanges)
    expect(root1.obj_prop.child).to.be.an.instanceof(AnotherModel)
    expect(Object.keys(root1.dict_of_list_prop).length).to.equal(1)
    expect(values(root1.dict_of_list_prop)[0].length).to.equal(1)
  })

  initialize(): void {
    super.initialize()

    this.reset = new Signal0(this, "reset")

    for (const xr of values(this.extra_x_ranges).concat(this.x_range)) {
      let plots = xr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        xr.setv({plots}, {silent: true})
      }
    }

    for (const yr of values(this.extra_y_ranges).concat(this.y_range)) {
      let plots = yr.plots
      if (isArray(plots)) {
        plots = plots.concat(this)
        yr.setv({plots}, {silent: true})
      }
    }
  }

  get_length(soft: boolean = true): number | null {
    const lengths = uniq(values(this.data).map((v) => v.length))

    switch (lengths.length) {
      case 0: {
        return null // XXX: don't guess, treat on case-by-case basis
      }
      case 1: {
        return lengths[0]
      }
      default: {
        const msg = "data source has columns of inconsistent lengths"
        if (soft) {
          logger.warn(msg)
          return lengths.sort()[0]
        } else
          throw new Error(msg)
      }
    }
  }

 get values(): any[] {
   return values(this.args)
 }

  update_dataranges(): void {
    // Update any DataRange1ds here
    const {frame} = this.model

    const bounds: {[key: string]: Rect} = {}
    const log_bounds: {[key: string]: Rect} = {}

    let calculate_log_bounds = false
    for (const r of values(frame.x_ranges).concat(values(frame.y_ranges))) {
      if (r instanceof DataRange1d) {
        if (r.scale_hint == "log")
          calculate_log_bounds = true
      }
    }

    for (const id in this.renderer_views) {
      const view = this.renderer_views[id]
      if (view instanceof GlyphRendererView) {
        const bds = view.glyph.bounds()
        if (bds != null)
          bounds[id] = bds

        if (calculate_log_bounds) {
          const log_bds = view.glyph.log_bounds()
          if (log_bds != null)
            log_bounds[id] = log_bds
        }
      }
    }

    let follow_enabled = false
    let has_bounds = false

    let r: number | undefined
    if (this.model.plot.match_aspect !== false && this.frame._width.value != 0 && this.frame._height.value != 0)
      r = (1/this.model.plot.aspect_scale)*(this.frame._width.value/this.frame._height.value)

    for (const xr of values(frame.x_ranges)) {
      if (xr instanceof DataRange1d) {
        const bounds_to_use = xr.scale_hint == "log" ? log_bounds : bounds
        xr.update(bounds_to_use, 0, this.model.id, r)
        if (xr.follow) {
          follow_enabled = true
        }
      }
      if (xr.bounds != null)
        has_bounds = true
    }

    for (const yr of values(frame.y_ranges)) {
      if (yr instanceof DataRange1d) {
        const bounds_to_use = yr.scale_hint == "log" ? log_bounds : bounds
        yr.update(bounds_to_use, 1, this.model.id, r)
        if (yr.follow) {
          follow_enabled = true
        }
      }
      if (yr.bounds != null)
        has_bounds = true
    }

    if (follow_enabled && has_bounds) {
      logger.warn('Follow enabled so bounds are unset.')
      for (const xr of values(frame.x_ranges)) {
        xr.bounds = null
      }
      for (const yr of values(frame.y_ranges)) {
        yr.bounds = null
      }
    }

    this.range_update_timestamp = Date.now()
  }

 _make_values() { return values(this.args); }

  compute_legend_bbox(): BBox {
    const legend_names = this.model.get_legend_names()

    const {glyph_height, glyph_width} = this.model
    const {label_height, label_width} = this.model

    this.max_label_height = max(
      [measure_font(this.visuals.label_text.font_value()).height, label_height, glyph_height],
    )

    // this is to measure text properties
    const { ctx } = this.plot_view.canvas_view
    ctx.save()
    this.visuals.label_text.set_value(ctx)
    this.text_widths = {}
    for (const name of legend_names) {
      this.text_widths[name] = max([ctx.measureText(name).width, label_width])
    }

    this.visuals.title_text.set_value(ctx)
    this.title_height = this.model.title ? measure_font(this.visuals.title_text.font_value()).height + this.model.title_standoff : 0
    this.title_width = this.model.title ? ctx.measureText(this.model.title).width : 0

    ctx.restore()

    const max_label_width = Math.max(max(values(this.text_widths)), 0)

    const legend_margin = this.model.margin
    const {legend_padding} = this
    const legend_spacing = this.model.spacing
    const {label_standoff} =  this.model

    let legend_height: number, legend_width: number
    if (this.model.orientation == "vertical") {
      legend_height = legend_names.length*this.max_label_height + Math.max(legend_names.length - 1, 0)*legend_spacing + 2*legend_padding + this.title_height
      legend_width = max([(max_label_width + glyph_width + label_standoff + 2*legend_padding), this.title_width + 2*legend_padding])
    } else {
      let item_width = 2*legend_padding + Math.max(legend_names.length - 1, 0)*legend_spacing
      for (const name in this.text_widths) {
        const width = this.text_widths[name]
        item_width += max([width, label_width]) + glyph_width + label_standoff
      }
      legend_width = max([this.title_width + 2*legend_padding, item_width])
      legend_height = this.max_label_height + this.title_height + 2*legend_padding
    }

    const panel = this.panel != null ? this.panel : this.plot_view.frame
    const [hr, vr] = panel.bbox.ranges

    const {location} = this.model
    let sx: number, sy: number
    if (isString(location)) {
      switch (location) {
        case 'top_left':
          sx = hr.start + legend_margin
          sy = vr.start + legend_margin
          break
        case 'top_center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = vr.start + legend_margin
          break
        case 'top_right':
          sx = hr.end - legend_margin - legend_width
          sy = vr.start + legend_margin
          break
        case 'bottom_right':
          sx = hr.end - legend_margin - legend_width
          sy = vr.end - legend_margin - legend_height
          break
        case 'bottom_center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = vr.end - legend_margin - legend_height
          break
        case 'bottom_left':
          sx = hr.start + legend_margin
          sy = vr.end - legend_margin - legend_height
          break
        case 'center_left':
          sx = hr.start + legend_margin
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        case 'center':
          sx = (hr.end + hr.start)/2 - legend_width/2
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        case 'center_right':
          sx = hr.end - legend_margin - legend_width
          sy = (vr.end + vr.start)/2 - legend_height/2
          break
        default:
          throw new Error("unreachable code")
      }
    } else if (isArray(location) && location.length == 2) {
      const [vx, vy] = location
      sx = panel.xview.compute(vx)
      sy = panel.yview.compute(vy) - legend_height
    } else
      throw new Error("unreachable code")

    return new BBox({left: sx, top: sy, width: legend_width, height: legend_height})
//.........这里部分代码省略.........