How to use the @antv/x6.util.toPx function in @antv/x6

To help you get started, we’ve selected a few @antv/x6 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github antvis / x6 / packages / x6-react-shape / src / shape.ts View on Github external
const bounds = this.bounds.clone()
    let transform = `translate(${bounds.x},${bounds.y})`
    const deg = this.getShapeRotation()
    if (deg !== 0) {
      transform += ` rotate(${deg},${bounds.width / 2},${bounds.height / 2})`
    }

    const g = util.createSvgElement('g')
    g.setAttribute('transform', transform)

    const fo = util.createSvgElement('foreignObject')
    util.setAttributes(fo, { width: bounds.width, height: bounds.height })

    const div = util.createElement('div')
    div.style.width = util.toPx(bounds.width)
    div.style.height = util.toPx(bounds.height)
    div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'
    container.style.width = util.toPx(Math.round(bounds.width / this.scale))
    container.style.height = util.toPx(Math.round(bounds.height / this.scale))
github antvis / x6 / examples / x6-example-drawio / src / pages / graph / sidebar-util.ts View on Github external
graph.view.scaleAndTranslate(
    scale,
    Math.floor((thumbWidth - bounds.width * scale) / 2 / scale - bounds.x),
    Math.floor((thumbHeight - bounds.height * scale) / 2 / scale - bounds.y),
  )

  let node = util.createElement('div')
  if (graph.dialect === 'svg') {
    const stage = graph.view.getStage() as SVGGElement
    const svg = stage.ownerSVGElement!.cloneNode(true) as SVGElement
    svg.style.position = 'relative'
    svg.style.overflow = 'hidden'
    svg.style.left = ''
    svg.style.top = ''
    svg.style.width = util.toPx(thumbWidth)
    svg.style.height = util.toPx(thumbHeight)

    node.appendChild(svg)
  } else {
    node.innerHTML = graph.container.innerHTML
  }

  container.appendChild(node)
  graph.getModel().clear()

  return node
}
github antvis / x6 / packages / x6-react-shape / src / shape.ts View on Github external
div.style.height = util.toPx(bounds.height)
    div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'
    container.style.width = util.toPx(Math.round(bounds.width / this.scale))
    container.style.height = util.toPx(Math.round(bounds.height / this.scale))
    container.style.transform = `scale(${this.scale})`
    container.style.transformOrigin = '0 0'

    div.appendChild(this.container)

    if (this.elem) {
      this.elem.appendChild(g)
    }
  }
github antvis / x6 / packages / x6-react-shape / src / shape.ts View on Github external
div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'
    container.style.width = util.toPx(Math.round(bounds.width / this.scale))
    container.style.height = util.toPx(Math.round(bounds.height / this.scale))
    container.style.transform = `scale(${this.scale})`
    container.style.transformOrigin = '0 0'

    div.appendChild(this.container)

    if (this.elem) {
      this.elem.appendChild(g)
    }
  }
github antvis / x6 / packages / x6-react-shape / src / shape.ts View on Github external
renderReactComponent() {
    const bounds = this.bounds.clone()
    let transform = `translate(${bounds.x},${bounds.y})`
    const deg = this.getShapeRotation()
    if (deg !== 0) {
      transform += ` rotate(${deg},${bounds.width / 2},${bounds.height / 2})`
    }

    const g = util.createSvgElement('g')
    g.setAttribute('transform', transform)

    const fo = util.createSvgElement('foreignObject')
    util.setAttributes(fo, { width: bounds.width, height: bounds.height })

    const div = util.createElement('div')
    div.style.width = util.toPx(bounds.width)
    div.style.height = util.toPx(bounds.height)
    div.style.overflow = 'hidden'

    g.appendChild(fo)
    fo.appendChild(div)

    if (this.container == null) {
      this.container = util.createElement('div')
      if (this.component != null) {
        ReactDOM.render(this.component, this.container)
      }
    }

    const container = this.container
    container.style.overflow = 'hidden'
    container.style.width = util.toPx(Math.round(bounds.width / this.scale))