Set some features programatically: Grid

[nwaelti]

I can't seem to find a way to turn on the Grid by default or programatically.

I'm using editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), false); in order to set Autoresize, but there is no setGridEnabled()

Also checking on the BackgroundStyle, I've seen a getBackgroundStyle but not a set...

Am I completely wrong? When not, it would be nice to have such function, either in the settings like gridEnabled: true or with a dispach like editor.dispatchNoAnnounce(editor.image.setGridEnabled(true), false);.

Cheers, Nick

[personalizedrefrigerator]

Thank you for asking!

Internally, this is done by replacing the existing background with a new BackgroundComponent with the correct grid type. The API for this is much more complicated than it should be, however.

In short,

1. Erase the background layer
2. Add a new BackgroundComponent with the correct color and pattern.

Complete example with the current API

```ts import { Editor, Vec3, Mat33, EditorSettings, BackgroundComponentBackgroundType as BackgroundType, BackgroundComponent, uniteCommands, Erase, Color4, } from 'js-draw'; import 'js-draw/styles'; (async () => { const editor = new Editor(document.body); const toolbar = editor.addToolbar(); // Add a default background editor.dispatchNoAnnounce( editor.image.addElement(new BackgroundComponent(BackgroundType.Grid, Color4.black)), ); // Make the background fill the screen editor.dispatchNoAnnounce(editor.image.setAutoresizeEnabled(true), false); toolbar.addActionButton('Toggle grid', () => { const backgroundLayerComponents = editor.image.getBackgroundComponents(); // Get information about the existing background let backgroundPattern = BackgroundType.None; let backgroundColor = Color4.transparent; for (const component of backgroundLayerComponents) { if (component instanceof BackgroundComponent) { backgroundPattern = component.getBackgroundType(); backgroundColor = component.getStyle().color; break; } } const newBackgroundType = ( backgroundPattern === BackgroundType.Grid ? BackgroundType.SolidColor : BackgroundType.Grid ); const newBackground = new BackgroundComponent(newBackgroundType, backgroundColor); // Remove the existing background layer, replace it with newBackground. const addToHistory = true; editor.dispatch(uniteCommands([ new Erase(backgroundLayerComponents), editor.image.addElement(newBackground), ]), addToHistory); }); })(); ```

Some notes:

• The current API relies on deleting everything from the background layer. This isn't very future-proof, should the background layer eventually be used for non-BackgroundComponents.
• editor.dispatchNoAnnounce(editor.image.setGridEnabled(true), false); or even editor.dispatchNoAnnounce(BackgroundComponent.setPattern(BackgroundPattern.Grid), false); would be much easier to use and maintain, as mentioned above.

[nwaelti]

Okay, it is fairly complicated, but at least with your example I can go further with editor.dispatchNoAnnounce( editor.image.addElement(new BackgroundComponent(BackgroundType.Grid, Color4.white)), ); Thanks a lot for your help ;)

[personalizedrefrigerator]

Version 1.7.0 has a simplified API for this. See Editor.setBackgroundStyle.