FlowGram.AI
  • 简体中文

      • Playground

      画布实例

      > API Detail

      const ctx = useClientContext()

console.log(ctx.playground)

      config

      画布配置, 提供 zoom、scroll 等状态

      > API Detail

      updateConfig

      • zoom number 当前缩放比例
      • scrollX
      • scrollY
      • minZoom
      • maxZoom
      • readonly
      • disabled
      • width
      • height
      // get current config state
ctx.playground.config.config.zoom
ctx.playground.config.config.readonly

// updateConfig
ctx.playground.config.updateConfig({
  zoom: 0.8,
  minZoom: 0.1,
  maxZoom: 2,
  readonly: true
})

      fitView

      节点适应画布窗口, 需要传入节点的 bounds

      /**
 * 适应大小
 * @param bounds {Rectangle} 目标大小
 * @param easing {number} 是否开启动画，默认开启
 * @param padding {number} 边界空白
 */
ctx.playground.config.fitView(node.bounds, true, 10)

      scrollToView

      指定节点位置并滚动到画布可见区域, 如果位置已经在可见区域则不会滚动，除非加上 scrollToCenter 强制滚动

      
/**
 * 详细参数说明
 * @param opts {PlaygroundConfigRevealOpts}
**/
interface PlaygroundConfigRevealOpts {
  entities?: Entity[]
  position?: PositionSchema // 滚动到指定位置，并居中
  bounds?: Rectangle // 滚动的 bounds
  scrollDelta?: PositionSchema
  zoom?: number // 需要缩放的比例
  easing?: boolean // 是否开启缓动，默认开启
  easingDuration?: number // 默认 500 ms
  scrollToCenter?: boolean // 是否强制滚动到中心
}

ctx.playground.config.scrollToView({
  bounds: ctx.document.getNode('start').bounds,
})

      zoomin

      放大画布

      zoomout

      缩小画布

      getPoseFromMouseEvent

      将浏览器鼠标位置转成画布坐标系

      
const pos: { x: number, y: number } = ctx.playground.config.getPoseFromMouseEvent(domMouseEvent)

      scroll

      滚动画布, 需要传入滚动位置, 以及是否平滑滚动, 滚动时间

      ctx.playground.config.scroll({ scrollX: 100, scrollY: 100 }, true, 300)

      isViewportVisible

      判断当前节点是否在视窗以内

      ctx.playground.config.isViewportVisible(node.bounds)