Infinite canvas: moving and zooming problem

[bgrand-ch]

Hello,

I use the infinite canvas with a fixed width (1920px) and height (1080px) frame (.gjs-cv-canvas__frames, .gjs-frame).

When I zoom in/out or move around the canvas, there's no limit and the frame disappears (no longer visible on the screen). I do the same thing in the opposite direction, but my frame doesn't always come back. (watch the video below)

Screen.Recording.2024-09-01.at.23.52.11.mp4

Here is an example of the transform value on .gjs-cv-canvas__frames:

transform: scale(0.1) translate(-9.64695e+07px, 1.45928e+06px);

I'd always like to have at least 1 pixel of my frame visible in the canvas to avoid an "infinite scroll" that prevents you from finding the frame.

Unfortunately, I can't find a solution for the moment 🤔
Could someone help me by adding this feature to GrapesJS or giving me some hints on how to do it please? 🙏

[bgrand-ch]

I found a solution with canvas:zoom event and canvas:coords event:

import type { Plugin } from 'grapesjs'
import type { PlaylistOrientation } from 'shared-types/playlist'

export type CanvasOptions = {
  orientation: PlaylistOrientation
}

const logScope = '[editor::canvas]'
const maxSize = 1920
const minSize = 1080
const sizeUnit = 'px'

const plugin: Plugin<CanvasOptions> = (editor, options) => {
  const isLandscape = options.orientation === 'landscape'
  const pageWidth = isLandscape ? maxSize : minSize
  const pageHeight = isLandscape ? minSize : maxSize
  const pageHalfWidth = pageWidth / 2
  const pageHalfHeight = pageHeight / 2

  try {
    editor.once('load', () => {
      const canvas = editor.Canvas
      const editorEl = editor.getEl()!
      const framesEl = canvas.getFramesEl()
      const frameEl = canvas.getFrameEl()

      const editorWidth = editorEl.offsetWidth
      const editorHeight = editorEl.offsetHeight
      const editorHalfWidth = editorWidth / 2
      const editorHalfHeight = editorHeight / 2

      const pageCenterX = editorHalfWidth - pageHalfWidth
      const pageCenterY = editorHalfHeight - pageHalfHeight
      const pageMaxX = editorWidth - pageHalfWidth
      const pageMaxY = editorHeight - pageHalfHeight

      framesEl.style.transformOrigin = 'center'
      framesEl.style.boxShadow = '0px 0px 20px 5px rgba(0,0,0,.1)'
      framesEl.style.width = frameEl.style.width = pageWidth + sizeUnit
      framesEl.style.height = frameEl.style.height = pageHeight + sizeUnit

      canvas.setCoords(pageCenterX, pageCenterY)
      canvas.setZoom(50)

      editor.on('canvas:zoom', () => {
        const currZoom = canvas.getZoom()

        if (currZoom > 100) {
          canvas.setZoom(100)
          return
        }

        if (currZoom < 10) {
          canvas.setZoom(10)
        }
      })

      editor.on('canvas:coords', () => {
        const { x: currX, y: currY } = canvas.getCoords()

        const isNegativeX = currX < 0
        const currPositiveX = Math.abs(currX) // negative to positive number

        const isNegativeY = currY < 0
        const currPositiveY = Math.abs(currY) // negative to positive number

        let newX = currX

        if (isNegativeX && currPositiveX > pageHalfWidth) {
          newX = -pageHalfWidth
          canvas.setCoords(newX, currY)
        } else if (!isNegativeX && currPositiveX > pageMaxX) {
          newX = pageMaxX
          canvas.setCoords(newX, currY)
        }

        if (isNegativeY && currPositiveY > pageHalfHeight) {
          canvas.setCoords(newX, -pageHalfHeight)
        } else if (!isNegativeY && currPositiveY > pageMaxY) {
          canvas.setCoords(newX, pageMaxY)
        }
      })
    })
  } catch (err) {
    const error = err as Error
    console.error(`${logScope} Error`, error)
  }
}

export default plugin

Do you have another solution? 🤔

[artf]

You're free to use your own solution here.
From what I've seen, applications with the infinite canvas implementation never take care of that problem (eg. Figma) but usually provide an option to center the viewport to the desired element and this is something we already provide:

const firstFrame = editor.Canvas.getFrame();
editor.Canvas.fitViewport({ frame: firstFrame });

I'd also like to point out that the infinite canvas option is an experimental option so the API might change.