Adding Zoom-in-out Canvas Functionality in GrapesJS Editor

[shelendravashishtha2]

I want to implement Canva like UI for GrapesJS Pages(screens) to render, edit all the screens present in GrapesJs PageManager in React JS. According to the knowledge I have, functionality to render all the Pages(screens) in the GrapesJs is not there. So the problem is that I can't handle the state of Every Page

So I tried to make a function that manually creates container div for every screen by using DOM functionality. But the problem is I can't Save the style JSON for each component as for every render the screen is getting updated and component's css selectors might be getting updated.

Function to render the all screens on the GrapesJS Editor ( that acts as the Canvas).

 const calculateTheJson = async () => {
    
    let pageContainerStyle = {
      height: percentage + "%",
      width: percentage + "%",
      border: "1px solid",
      position: "relative",
      margin: "8px",
      overflow: "hidden",
    };

    let pagesArray = [];

//Pages is the redux array containing JSON's of all Pages

    for (let i in pages) {
      // console.log(pages[i]);
      let grapesPageJson = {
        tagName: "div",
        attributes: { id: "page_container", page_id: pages[i]._id },
        style: pageContainerStyle,
      };
      let pageJson = pages[i].by_route_name;

// getJson is just the function that returns the page json using page id 
      // let pageJson = getJson(pages[i].by_route_name, pages[i]._id);
      // console.log(pageJson);
      grapesPageJson.components = pageJson;
      pagesArray.push(grapesPageJson);
    }
    let json = {
      tagName: "div",
      style: {
        display: "flex",
        height: "100vh",
        width: "100vw",
        "flex-wrap": "wrap",
        "justify-content": "center",
      },
      attributes: { id: "zoom_container" },
      components: pagesArray,
    };
    // console.log("JSON ", json);
    // console.log(json);
    let isExistsPage = window.editor.Pages.get("zoomoutpage");
    window.editor.Pages.add({ id: "zoomoutpage" });
    window.editor.Pages.select(window.editor.Pages.get("zoomoutpage"));
    window.editor.setComponents(json);
    let zoomcontainer = document
      .querySelector("iframe")
      .contentWindow.document.getElementById("zoom_container");
    let container = document.createElement("div");

    // let button = document.createElement("button");
    container.innerHTML = `<svg id="Layer_1" height="25px" width="25px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 122.88"><path fill="#ffffff" d="M61.44,0A61.46,61.46,0,1,1,18,18,61.25,61.25,0,0,1,61.44,0ZM88.6,56.82v9.24a4,4,0,0,1-4,4H70V84.62a4,4,0,0,1-4,4H56.82a4,4,0,0,1-4-4V70H38.26a4,4,0,0,1-4-4V56.82a4,4,0,0,1,4-4H52.84V38.26a4,4,0,0,1,4-4h9.24a4,4,0,0,1,4,4V52.84H84.62a4,4,0,0,1,4,4Zm8.83-31.37a50.92,50.92,0,1,0,14.9,36,50.78,50.78,0,0,0-14.9-36Z"></path></svg>`;
    // button.innerText = "AddBtn";
    // // container.style.height = "53px";
    container.style.display = "flex";
    container.style.justifyContent = "center";
    container.style.alignItems = "center";
    container.style.height = "50px";
    container.style.width = "50px";
    // container.style.padding = "12px 12px";
    container.style.background = "cornflowerblue";
    container.style.borderRadius = "8px";
    container.addEventListener("click", () => {
      // console.log("Add page clicked");
      setOpenPageDialog(true);
    });
    // container.appendChild(button);
    zoomcontainer.appendChild(container);
  };

The result above code produces is :

• For Zooming I have use Grapesjs Editors editor.Canvas.setZoom('[zoomPercentage]') function
• Note : Function is async just because there was some asynchronous work done in the function.