FlowGram.AI
Guide
Examples
Common APIs
API Documentation
Guide
Examples
Common APIs
API Documentation

Playground

Canvas instance

> API Detail

const ctx = useClientContext()

console.log(ctx.playground)

config

Canvas configuration, provides zoom, scroll, etc.

> API Detail

updateConfig

  • zoom number Current zoom ratio
  • 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

Node fit canvas window, need to pass in the node's bounds

/**
 * Fit size
 * @param bounds {Rectangle} Target size
 * @param easing {number} Whether to start animation, default is true
 * @param padding {number} Boundary padding
 */
ctx.playground.config.fitView(node.bounds, true, 10)

scrollToView

Specify the node position and scroll to the canvas visible area, if the position is already in the visible area, it will not scroll unless scrollToCenter is forced to scroll


/**
 * Detailed parameter description
 * @param opts {PlaygroundConfigRevealOpts}
**/
interface PlaygroundConfigRevealOpts {
  entities?: Entity[]
  position?: PositionSchema // Scroll to the specified position and center
  bounds?: Rectangle // Scroll bounds
  scrollDelta?: PositionSchema
  zoom?: number // Need to scale the ratio
  easing?: boolean // Whether to start animation, default is true
  easingDuration?: number // Default 500 ms
  scrollToCenter?: boolean // Whether to force scroll to center
}

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

zoomin

Zoom In

zoomout

Zoom Out

getPoseFromMouseEvent

Convert browser mouse position to canvas coordinate system


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

scroll

Scroll canvas, need to pass in the scroll position, and whether to smooth scroll, scroll time

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

isViewportVisible

Determine whether the current node is within the viewport

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