Wrapper zoom in and zoom out

[bgrand-ch]

Demonstration

Screen.Recording.2024-02-02.at.00.04.48.mp4

Code

CSS

import grapesjs from 'grapesjs'

import type { EditorConfig } from 'grapesjs'

const config: EditorConfig = {
  // ...
  canvasCss: `
    [class*="zoom-"] {
      transform-origin: top;
    }

    .zoom-10 {
      transform: scale(10%);
    }
    .zoom-20 {
      transform: scale(20%);
    }
    .zoom-30 {
      transform: scale(30%);
    }
    .zoom-40 {
      transform: scale(40%);
    }
    .zoom-50 {
      transform: scale(50%);
    }
    .zoom-60 {
      transform: scale(60%);
    }
    .zoom-70 {
      transform: scale(70%);
    }
    .zoom-80 {
      transform: scale(80%);
    }
    .zoom-90 {
      transform: scale(90%);
    }
    .zoom-100 {
      transform: scale(100%);
    }
  `
  // ...
}
const editor = grapesjs.init(config)

JS

import type { Editor, Component } from 'grapesjs'

type ZoomAction = 'in'|'out'

function getZoomClass (wrapperComp: Component): string|undefined {
  const currClasses = wrapperComp.getClasses()

  if (!Array.isArray(currClasses)) {
    return
  }

  return currClasses.find(currClass => currClass.includes('zoom-'))
}

function wrapperZoom (editor: Editor, action: ZoomAction) {
  const wrapperComp = editor.getWrapper()

  if (!wrapperComp) {
    return
  }

  const currZoomClass = getZoomClass(wrapperComp)

  if (!currZoomClass) {
    const initialZoomClass = action === 'in' ? 'zoom-100' : 'zoom-90'

    wrapperComp.addClass(initialZoomClass)
    editor.refresh({ tools: true })
    return
  }

  const currZoomPercentage = Number(currZoomClass.split('-')[1])

  if (
    (action === 'in' && currZoomPercentage === 100) ||
    (action === 'out' && currZoomPercentage === 10)
  ) {
    return
  }

  const newZoomPercentage = action === 'in' ? currZoomPercentage + 10 : currZoomPercentage - 10
  const newZoomClass = `zoom-${newZoomPercentage}`

  wrapperComp.removeClass(currZoomClass)
  wrapperComp.addClass(newZoomClass)

  editor.refresh({ tools: true })
}

[bgrand-ch]

I tried the following plugin, which works great (with the GrapesJS Canvas's native zoom functionality), but the Canvas kept the size fixed with scrollbars inside.

https://github.com/gxanshu/grapesjs-zoom-plugin

Screen.Recording.2024-02-02.at.00.25.14.mp4

[bgrand-ch]

@artf Hello, would it be possible to add zoom functionality to the Wrapper like you did with the Canvas? It would be cleaner than my solution above.

[artf]

I think your solution would be WAY CLEANER without those static classes 😅 just apply inline styles to the wrapper DOM element.
I'm not even sure why you're doing it on the model instead of the view/DOM (you need the zoom classes applied on the exported HTML?)

Anyway, I don't see any reason to bring that functionality on the wrapper itself, quite nonsense to me. If you need it, for any reason, you're still able to do so as you did, so there is no need to enlarge the core.

The point you're making about scrollbars in grapesjs-zoom-plugin it's totally valid but the proper solution would be to make those scrollbars disappear.

I actually started, months ago, exploring infiniteCanvas feature that can make internal iframes dynamic in size but stopped due to lack of time. You can try it though

canvas: {
  infiniteCanvas: true,
},

You will see how the iframe will be dynamic in height and you won't see any scrollbars.

grapesjs-infinite-canvas.mp4

[bgrand-ch]

Yes, I'd like to save the class with the content so that I can display the zoom again when editing. I'll think about it, I wonder if it's really useful.

The main objective is to zoom out to display all the content. It's great for getting an overview of vertical content. We could imagine a "scroll to" when a component is clicked while zoomed out.

Zooming out of the canvas is useless in my opinion, as it displays exactly the same content already visible before, only smaller. 🤔

I tested inifiniteCanvas, works great, its a nice feature!

[artf]

Ok, I think I understand better now your use case, still, too much of an edge case in my opinion.

Zooming out of the canvas is useless in my opinion, as it displays exactly the same content already visible before, only smaller. 🤔

Probably as it is, it might look useless, but the goal of this feature is to allow you to create multiple frames of the same page (and also other pages) with different screen sizes so you can edit your content more seamlessly (that would also cover your case).