• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript dom.display函数代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中core/dom.display函数的典型用法代码示例。如果您正苦于以下问题:TypeScript display函数的具体用法?TypeScript display怎么用?TypeScript display使用的例子?那么恭喜您, 这里精选的函数代码示例或许可以为您提供帮助。



在下文中一共展示了display函数的5个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: update_position

  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`
        display(this.scroll_el)
      } else {
        this.wrapper_el.style.maxWidth = ""
        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`
        display(this.scroll_el)
      } else {
        this.wrapper_el.style.maxHeight = ""
        undisplay(this.scroll_el)
      }
    }

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

    const tab = child_views[this.model.active]
    if (tab != null)
      show(tab.el)
  }
开发者ID:digitalsatori,项目名称:Bokeh,代码行数:39,代码来源:tabs.ts


示例2: _css_box

  protected _css_box(sleft: number, sright: number, sbottom: number, stop: number): void {
    const line_width = this.model.properties.line_width.value()
    const sw = Math.floor(sright - sleft) - line_width
    const sh = Math.floor(sbottom - stop) - line_width

    this.el.style.left = `${sleft}px`
    this.el.style.width = `${sw}px`
    this.el.style.top = `${stop}px`
    this.el.style.height = `${sh}px`
    this.el.style.borderWidth = `${line_width}px`
    this.el.style.borderColor = this.model.properties.line_color.value()
    this.el.style.backgroundColor = this.model.properties.fill_color.value()
    this.el.style.opacity = this.model.properties.fill_alpha.value()

    // try our best to honor line dashing in some way, if we can
    const ld = this.model.properties.line_dash.value().length < 2 ? "solid" : "dashed"
    this.el.style.borderStyle = ld

    display(this.el)
  }
开发者ID:digitalsatori,项目名称:Bokeh,代码行数:20,代码来源:box_annotation.ts


示例3: _v_css_text

  protected _v_css_text(ctx: Context2d, i: number, text: string, sx: number, sy: number, angle: number): void {
    const el = this.el.children[i] as HTMLElement
    el.textContent = text

    this.visuals.text.set_vectorize(ctx, i)
    const bbox_dims = this._calculate_bounding_box_dimensions(ctx, text)

    // attempt to support vector-style ("8 4 8") line dashing for css mode
    const ld = this.visuals.border_line.line_dash.value()
    const line_dash = ld.length < 2 ? "solid" : "dashed"

    this.visuals.border_line.set_vectorize(ctx, i)
    this.visuals.background_fill.set_vectorize(ctx, i)

    el.style.position = 'absolute'
    el.style.left = `${sx + bbox_dims[0]}px`
    el.style.top = `${sy + bbox_dims[1]}px`
    el.style.color = `${this.visuals.text.text_color.value()}`
    el.style.opacity = `${this.visuals.text.text_alpha.value()}`
    el.style.font = `${this.visuals.text.font_value()}`
    el.style.lineHeight = "normal"  // needed to prevent ipynb css override

    if (angle) {
      el.style.transform = `rotate(${angle}rad)`
    }

    if (this.visuals.background_fill.doit) {
      el.style.backgroundColor = `${this.visuals.background_fill.color_value()}`
    }

    if (this.visuals.border_line.doit) {
      el.style.borderStyle = `${line_dash}`
      el.style.borderWidth = `${this.visuals.border_line.line_width.value()}px`
      el.style.borderColor = `${this.visuals.border_line.color_value()}`
    }

    display(el)
  }
开发者ID:jsignell,项目名称:bokeh,代码行数:38,代码来源:label_set.ts


示例4: _draw_tips

  protected _draw_tips(): void {
    const {data} = this.model
    empty(this.el)
    undisplay(this.el)

    if (this.model.custom)
      this.el.classList.add("bk-tooltip-custom")
    else
      this.el.classList.remove("bk-tooltip-custom")

    if (data.length == 0)
      return

    const {frame} = this.plot_view

    for (const [sx, sy, content] of data) {
      if (this.model.inner_only && !frame.bbox.contains(sx, sy))
          continue

      const tip = div({}, content)
      this.el.appendChild(tip)
    }

    const [sx, sy] = data[data.length - 1] // XXX: this previously depended on {sx, sy} leaking from the for-loop

    const side = compute_side(this.model.attachment, sx, sy, frame._hcenter.value, frame._vcenter.value)

    this.el.classList.remove("bk-right")
    this.el.classList.remove("bk-left")
    this.el.classList.remove("bk-above")
    this.el.classList.remove("bk-below")

    const arrow_size = 10  // XXX: keep in sync with less

    display(this.el)  // XXX: {offset,client}Width() gives 0 when display="none"

    // slightly confusing: side "left" (for example) is relative to point that
    // is being annotated but CS class "bk-left" is relative to the tooltip itself
    let left: number, top: number
    switch (side) {
      case "right":
        this.el.classList.add("bk-left")
        left = sx + (this.el.offsetWidth - this.el.clientWidth) + arrow_size
        top = sy - this.el.offsetHeight/2
        break
      case "left":
        this.el.classList.add("bk-right")
        left = sx - this.el.offsetWidth - arrow_size
        top = sy - this.el.offsetHeight/2
        break
      case "below":
        this.el.classList.add("bk-above")
        top = sy + (this.el.offsetHeight - this.el.clientHeight) + arrow_size
        left = Math.round(sx - this.el.offsetWidth/2)
        break
      case "above":
        this.el.classList.add("bk-below")
        top = sy - this.el.offsetHeight - arrow_size
        left = Math.round(sx - this.el.offsetWidth/2)
        break
      default:
        throw new Error("unreachable code")
    }

    if (this.model.show_arrow)
      this.el.classList.add("bk-tooltip-arrow")

    // TODO (bev) this is not currently bulletproof. If there are
    // two hits, not colocated and one is off the screen, that can
    // be problematic
    if (this.el.childNodes.length > 0) {
      this.el.style.top = `${top}px`
      this.el.style.left = `${left}px`
    } else
      undisplay(this.el)
  }
开发者ID:jsignell,项目名称:bokeh,代码行数:76,代码来源:tooltip.ts


示例5: _draw_span

  protected _draw_span(): void {
    const loc = this.model.for_hover ? this.model.computed_location : this.model.location
    if (loc == null) {
      undisplay(this.el)
      return
    }

    const {frame} = this.plot_view

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

    const _calc_dim = (scale: Scale, view: CoordinateTransform): number => {
      if (this.model.for_hover)
        return this.model.computed_location!
      else {
        if (this.model.location_units == 'data')
          return scale.compute(loc)
        else
          return view.compute(loc)
      }
    }

    let height: number, sleft: number, stop: number, width: number
    if (this.model.dimension == 'width') {
      stop = _calc_dim(yscale, frame.yview)
      sleft = frame._left.value
      width = frame._width.value
      height = this.model.properties.line_width.value()
    } else {
      stop = frame._top.value
      sleft = _calc_dim(xscale, frame.xview)
      width = this.model.properties.line_width.value()
      height = frame._height.value
    }

    if (this.model.render_mode == "css") {
      this.el.style.top = `${stop}px`
      this.el.style.left = `${sleft}px`
      this.el.style.width = `${width}px`
      this.el.style.height = `${height}px`
      this.el.style.backgroundColor = this.model.properties.line_color.value()
      this.el.style.opacity = this.model.properties.line_alpha.value()
      display(this.el)
    } else if (this.model.render_mode == "canvas") {
      const {ctx} = this.plot_view.canvas_view
      ctx.save()

      ctx.beginPath()
      this.visuals.line.set_value(ctx)
      ctx.moveTo(sleft, stop)
      if (this.model.dimension == "width") {
        ctx.lineTo(sleft + width, stop)
      } else {
        ctx.lineTo(sleft, stop + height)
      }
      ctx.stroke()

      ctx.restore()
    }
  }
开发者ID:digitalsatori,项目名称:Bokeh,代码行数:61,代码来源:span.ts



注:本文中的core/dom.display函数示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript dom.div函数代码示例发布时间:2022-05-24
下一篇:
TypeScript dom.classes函数代码示例发布时间:2022-05-24
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap