TypeScript dom.hide函数代码示例

 initialize(options: any): void {
   super.initialize(options);
   // TODO (bev) really probably need multiple divs
   this.plot_view.canvas_overlays.appendChild(this.el);
   this.el.style.zIndex = 1010;
   hide(this.el);
 }

  update_position(): void {
    super.update_position()

    this.header_el.style.position = "absolute" // XXX: do it in position()
    position(this.header_el, this.header.bbox)

    const loc = this.model.tabs_location
    const vertical = loc == "above" || loc == "below"

    const scroll_el_size = size(this.scroll_el)
    const headers_el_size = scroll_size(this.headers_el)
    if (vertical) {
      const {width} = this.header.bbox
      if (headers_el_size.width > width)
        this.wrapper_el.style.maxWidth = `${width - scroll_el_size.width}px`
      else
        undisplay(this.scroll_el)
    } else {
      const {height} = this.header.bbox
      if (headers_el_size.height > height)
        this.wrapper_el.style.maxHeight = `${height - scroll_el_size.height}px`
      else
        undisplay(this.scroll_el)
    }

    const {child_views} = this
    for (const child_view of child_views)
      hide(child_view.el)

    show(child_views[this.model.active].el)
  }

  render() {
    let angle;
    if (!this.model.visible && (this.model.render_mode === 'css')) {
      hide(this.el);
    }
    if (!this.model.visible) {
      return;
    }

    // Here because AngleSpec does units tranform and label doesn't support specs
    switch (this.model.angle_units) {
      case "rad": angle = -1 * this.model.angle; break;
      case "deg": angle = (-1 * this.model.angle * Math.PI)/180.0; break;
    }

    const panel = this.model.panel != null ? this.model.panel : this.plot_view.frame;

    const xscale = this.plot_view.frame.xscales[this.model.x_range_name];
    const yscale = this.plot_view.frame.yscales[this.model.y_range_name];

    let sx = this.model.x_units === "data" ? xscale.compute(this.model.x) : panel.xview.compute(this.model.x);
    let sy = this.model.y_units === "data" ? yscale.compute(this.model.y) : panel.yview.compute(this.model.y);

    sx += this.model.x_offset;
    sy -= this.model.y_offset;

    const draw = this.model.render_mode === 'canvas' ? this._canvas_text.bind(this) : this._css_text.bind(this);
    return draw(this.plot_view.canvas_view.ctx, this.model.text, sx, sy, angle);
  }

  render(): void {
    super.render()

    if (!this.model.visible) {
      hide(this.el)
      return
    }

    const panel = this.model.panel!

    this.el.style.position = "absolute"
    this.el.style.left = `${panel._left.value}px`
    this.el.style.top = `${panel._top.value}px`
    this.el.style.width = `${panel._width.value}px`
    this.el.style.height = `${panel._height.value}px`

    this.el.style.overflow = "hidden"

    const toolbar = this._toolbar_views[this.model.toolbar.id]
    toolbar.render()

    empty(this.el)
    this.el.appendChild(toolbar.el)
    show(this.el)
  }

  render() {
    super.render();

    if (!this.model.visible) {
      hide(this.el);
      return;
    }

    const { panel } = this.model;

    this.el.style.position = "absolute";
    this.el.style.left = `${panel._left.value}px`;
    this.el.style.top = `${panel._top.value}px`;
    this.el.style.width = `${panel._width.value}px`;
    this.el.style.height = `${panel._height.value}px`;

    this.el.style.overflow = "hidden";

    const toolbar = this._toolbar_views[this.model.toolbar.id];
    toolbar.render();

    empty(this.el);
    this.el.appendChild(toolbar.el);
    return show(this.el);
  }

 render() {
   if (!this.model.visible && (this.model.render_mode === 'css')) {
     hide(this.el);
   }
   if (!this.model.visible) {
     return;
   }
   this._draw_span();
 }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      hide(this.el)

    if (!this.model.visible)
      return

    this._draw_span()
  }

  render() {
    if (!this.model.visible && (this.model.render_mode === 'css')) {
      hide(this.el);
    }
    if (!this.model.visible) {
      return;
    }

    // don't render if *all* position are null
    if ((this.model.left == null) && (this.model.right == null) && (this.model.top == null) && (this.model.bottom == null)) {
      hide(this.el);
      return null;
    }

    const { frame } = this.plot_model;
    const xscale = frame.xscales[this.model.x_range_name];
    const yscale = frame.yscales[this.model.y_range_name];

    const _calc_dim = (dim, dim_units, scale, view, frame_extrema) => {
      let sdim;
      if (dim != null) {
        if (this.model.screen) {
          sdim = dim;
        } else {
          if (dim_units === 'data') {
            sdim = scale.compute(dim);
          } else {
            sdim = view.compute(dim);
          }
        }
      } else {
        sdim = frame_extrema;
      }
      return sdim;
    };

    const sleft   = _calc_dim(this.model.left,   this.model.left_units,   xscale, frame.xview, frame._left.value);
    const sright  = _calc_dim(this.model.right,  this.model.right_units,  xscale, frame.xview, frame._right.value);
    const stop    = _calc_dim(this.model.top,    this.model.top_units,    yscale, frame.yview, frame._top.value);
    const sbottom = _calc_dim(this.model.bottom, this.model.bottom_units, yscale, frame.yview, frame._bottom.value);

    const draw = this.model.render_mode === 'css' ? this._css_box.bind(this) : this._canvas_box.bind(this);
    return draw(sleft, sright, sbottom, stop);
  }

  render(): void {
    if (!this.model.visible && this.model.render_mode == 'css')
      hide(this.el)

    if (!this.model.visible)
      return

    // don't render if *all* position are null
    if (this.model.left == null && this.model.right == null && this.model.top == null && this.model.bottom == null) {
      hide(this.el)
      return
    }

    const {frame} = this.plot_model
    const xscale = frame.xscales[this.model.x_range_name]
    const yscale = frame.yscales[this.model.y_range_name]

    const _calc_dim = (dim: number | null, dim_units: SpatialUnits, scale: Scale, view: ViewTransform, frame_extrema: number): number => {
      let sdim
      if (dim != null) {
        if (this.model.screen)
          sdim = dim
        else {
          if (dim_units == 'data')
            sdim = scale.compute(dim)
          else
            sdim = view.compute(dim)
        }
      } else
        sdim = frame_extrema
      return sdim
    }

    this.sleft   = _calc_dim(this.model.left,   this.model.left_units,   xscale, frame.xview, frame._left.value)
    this.sright  = _calc_dim(this.model.right,  this.model.right_units,  xscale, frame.xview, frame._right.value)
    this.stop    = _calc_dim(this.model.top,    this.model.top_units,    yscale, frame.yview, frame._top.value)
    this.sbottom = _calc_dim(this.model.bottom, this.model.bottom_units, yscale, frame.yview, frame._bottom.value)

    const draw = this.model.render_mode == 'css' ? this._css_box.bind(this) : this._canvas_box.bind(this)

    draw(this.sleft, this.sright, this.sbottom, this.stop)
  }

  update_position(): void {
    super.update_position()

    position(this.header_el, this.header.bbox)

    const {child_views} = this
    for (const child_view of child_views)
      hide(child_view.el)

    show(child_views[this.model.active].el)
  }