Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

Question

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

In my current project, I am utilizing Excalidraw to draw a layer of <div>s on top of the <canvas>. While everything is functioning well, I have encountered an issue with scrolling through the infinite canvas. When the mouse hovers over one of the <div>s, scroll events do not pass through to the canvas below, resulting in a clunky user experience.

Is there a way to prevent these <div>s from responding to scroll events? I have attempted using pointer-events: none in CSS, which does work, but then the <div>s become unresponsive to any interactions at all.

You can view an example in this CodeSandbox by following this link, and the relevant code snippet can be summarized as:

"use client";

import { useMemo } from "react";

import dynamic from "next/dynamic";

const Excalidraw = dynamic(
  async () => {
    const mod = await import("@excalidraw/excalidraw");
    return mod.Excalidraw;
  },
  { ssr: false },
)

export default function Home() {
  const Excal = useMemo(() => <Excalidraw gridModeEnabled />, [])

  return (
    <main className="absolute w-screen h-screen">
      <div
        style={{
          position: "fixed",
          zIndex: 100,
          top: "100px",
          left: "100px",
          backgroundColor: "yellow",
          cursor: "pointer",
        }}
      >
        <p>here</p>
      </div>
      {Excal}
    </main>
  )
}

html css reactjs next.js html5-canvas

Answer 1

Answer №1

In order to achieve a seamless scrolling experience with interactive <div> elements on top of the Excalidraw canvas, a combination of CSS and JavaScript can be utilized. The main objective is to allow scroll events to pass through the overlaying <div> elements to reach the Excalidraw canvas, while ensuring that other events like clicks or drags remain responsive within the <div> elements.

Below is the modified code snippet for your Home component:

"use client"

import { useMemo, useEffect } from "react"
import dynamic from "next/dynamic"

const Excalidraw = dynamic(
  async () => {
    const mod = await import("@excalidraw/excalidraw")
    return mod.Excalidraw
  },
  { ssr: false }
)

export default function Home() {
  const Excal = useMemo(() => <Excalidraw gridModeEnabled />, [])

  useEffect(() => {
    const overlayDiv = document.querySelector(".overlay")
    if (overlayDiv) {
      const handleWheel = (event) => {
        event.preventDefault() // Prevent the default scroll behavior
        const excalidrawWrapper = document.querySelector(".excalidraw-wrapper")
        if (excalidrawWrapper) {
          excalidrawWrapper.scrollBy(event.deltaX, event.deltaY)
        }
      }

      overlayDiv.addEventListener("wheel", handleWheel)

      return () => {
        overlayDiv.removeEventListener("wheel", handleWheel)
      }
    }
  }, [])

  return (
    <main className="absolute w-screen h-screen">
      <div
        className="overlay"
        style={{
          position: "fixed",
          zIndex: 100,
          top: "100px",
          left: "100px",
          backgroundColor: "yellow",
          cursor: "pointer",
        }}
      >
        <p>here</p>
      </div>
      {Excal}
    </main>
  )
}

Answer 2

In order to achieve a seamless scrolling experience with interactive <div> elements on top of the Excalidraw canvas, a combination of CSS and JavaScript can be utilized. The main objective is to allow scroll events to pass through the overlaying <div> elements to reach the Excalidraw canvas, while ensuring that other events like clicks or drags remain responsive within the <div> elements.

Below is the modified code snippet for your Home component:

"use client"

import { useMemo, useEffect } from "react"
import dynamic from "next/dynamic"

const Excalidraw = dynamic(
  async () => {
    const mod = await import("@excalidraw/excalidraw")
    return mod.Excalidraw
  },
  { ssr: false }
)

export default function Home() {
  const Excal = useMemo(() => <Excalidraw gridModeEnabled />, [])

  useEffect(() => {
    const overlayDiv = document.querySelector(".overlay")
    if (overlayDiv) {
      const handleWheel = (event) => {
        event.preventDefault() // Prevent the default scroll behavior
        const excalidrawWrapper = document.querySelector(".excalidraw-wrapper")
        if (excalidrawWrapper) {
          excalidrawWrapper.scrollBy(event.deltaX, event.deltaY)
        }
      }

      overlayDiv.addEventListener("wheel", handleWheel)

      return () => {
        overlayDiv.removeEventListener("wheel", handleWheel)
      }
    }
  }, [])

  return (
    <main className="absolute w-screen h-screen">
      <div
        className="overlay"
        style={{
          position: "fixed",
          zIndex: 100,
          top: "100px",
          left: "100px",
          backgroundColor: "yellow",
          cursor: "pointer",
        }}
      >
        <p>here</p>
      </div>
      {Excal}
    </main>
  )
}

Answer 3

Answer №2

Unfortunately, I am unable to make changes directly to the code in your sandbox. However, I was able to successfully edit it using Chrome DevTools. You can follow the same steps in your source code. To resolve the issue, you need to intercept the wheel event and manually dispatch it to the canvas.

In order to reference the yellow box in my javascript code, I assigned it an ID (my123). Additionally, I created a variable that points to the canvas within our event handler:

myCanvas = $('.excalidraw__canvas.interactive')

Then, I added the following code:

$('#my123').onmousewheel = function(e) {
    e.preventDefault();
    myCanvas.dispatchEvent(new WheelEvent('wheel', {
        bubbles: e.bubbles,
        cancelable: e.cancelable,
        ctrlKey: e.ctrlKey,
        shiftKey: e.shiftKey,
        deltaX: e.deltaX,
        deltaY: e.deltaY,
        deltaMode: e.deltaMode
    }));
}

By including the ctrlKey and shiftKey properties, you can enable zooming and horizontal scrolling as well.

Make sure to set myCanvas after the canvas has been created.

Answer 4

Unfortunately, I am unable to make changes directly to the code in your sandbox. However, I was able to successfully edit it using Chrome DevTools. You can follow the same steps in your source code. To resolve the issue, you need to intercept the wheel event and manually dispatch it to the canvas.

In order to reference the yellow box in my javascript code, I assigned it an ID (my123). Additionally, I created a variable that points to the canvas within our event handler:

myCanvas = $('.excalidraw__canvas.interactive')

Then, I added the following code:

$('#my123').onmousewheel = function(e) {
    e.preventDefault();
    myCanvas.dispatchEvent(new WheelEvent('wheel', {
        bubbles: e.bubbles,
        cancelable: e.cancelable,
        ctrlKey: e.ctrlKey,
        shiftKey: e.shiftKey,
        deltaX: e.deltaX,
        deltaY: e.deltaY,
        deltaMode: e.deltaMode
    }));
}

By including the ctrlKey and shiftKey properties, you can enable zooming and horizontal scrolling as well.

Make sure to set myCanvas after the canvas has been created.

Allowing scroll events to flow through from a child <div> to <canvas> in Excalidraw

Answer №1

Answer №2

Similar questions

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

The correct way to write media queries in CSS for the iPhone

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Conceal the secret key for the Firebase FCM service worker

Fade effects on hover with a changing background color

The information displayed in Next.js appears in the form of an array, which is distinct from the JSON object provided by the API

Using Bootstrap to Position DIVs at the Top, Middle, and Bottom

The latest bug fix and update in Bootstrap 4.5.2 now includes an updated version of Popper.js. Make sure to use the

Can I exclusively utilize selectFromResult within an RTK query component that is a descendant, or is it permissible to use it in any location?

The fancybox scroll feature is visible when using a browser, but unfortunately, it does not appear on the

Global Reject in Redux Toolkit allows you to reject or handle errors

Using NextJS App Router to implement redirects within the useEffect hook

React - Issue with state not being updated accurately

A guide on implementing the href attribute in Material-ui

Capture the beauty of Safari with images displayed in the input file element

Acquiring HTML form information in ASP.NET controller

jQuery Show/Hide Not Working Properly

Route Handler 13 is encountering difficulties in retrieving data from the body in the (app/api/auth) endpoint

Unveiling the Secrets of Implementing Interactive HTML Tabs

Unlocking the power of python with web2py by tapping into html form values