search

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works
https://projectstorm.cloud/react-diagrams
MIT License
8.58k stars 1.17k forks source link

How to change the background? #818

Closed thn80 closed 3 years ago

thn80 commented 3 years ago

Hi,

how can the background of the whole diagram be changed? Currently I'm using the "diagrams-demo-project" which shows a gray background color, while all the examples in "diagrams-demo-gallery" have a gray background with a grid. Where do I have to start when changing the background?

sinanyaman95 commented 3 years ago

Hey @thn80 , diagrams are wrapped inside a Canvas. All the stories in the storybook for example, are wrapped inside the DemoCanvasWidget and that is styled with emotion: 

<DemoCanvasWidget>
    <CanvasWidget engine={engine} />
</DemoCanvasWidget>

You can find the style here: https://github.com/projectstorm/react-diagrams/blob/master/diagrams-demo-gallery/demos/helpers/DemoCanvasWidget.tsx (the long linear gradient). That said, you can do the same approach and style the background as you want

thn80 commented 3 years ago

Thanks, this helped.

sinanyaman95 commented 3 years ago

You are welcome, you can close the issue if you want

movahedan commented 2 years ago

I thought that maybe I'd better reopen the issue because my question is related to the background of the canvas.

Is there any way to have a miro-like background for the canvas? For instance, I want to reposition the background when the user drags the canvas and moves it to another place.

I have created another div around the canvas, and I'm using these styling rules:

background-image: linear-gradient(#c7c1c1 1px, transparent 1px),
    linear-gradient(to right, #c7c1c1 1px, #e7e5e5 1px);
background-size: ${(props) => `${props.zoomLevel}% ${props.zoomLevel}%`};

It's working correctly while the user tries to zoom in/zoom out. But I don't how to implement the dragging feature. Is it possible? I put the screenshots of a simple page in miro. You can see the background is being repositioned after I zoom-in/zoom-out or even drag the page and move it.

image image