Dragmode changes from Absolute to Translate when the Rulers are turned off.

[sidiqim]

First of all, thanks a lot for this wonderful plugin.

Is this an issue or am I not able to get it right?
Please have a look at this -> https://jsfiddle.net/tfupj7ro/

Initially rulers are not active, dragmodeis set to Absolute, after turning on rulers, dragmodeis still Absolute. But once rulers are turned off, dragmodeis getting changed to Translate, and again after turning on rulers, dragmodeis getting back to Absolute. (Try dropping components each time and check the behavior.)

I want to always keep dragmodeto Absolute. How do I achieve this, please suggest.

The other issue is, when canvas is cleared, rulers are getting turned off and dragmode is getting changed to Translate. I want to keep the rulers' visibility state same even after canvas is cleared.

[Ju99ernaut]

At the moment turning off the rulers just resets the dragmode to default so I'll fix this so it returns to the user's default. By default the plugin switches between dragmode default and translate GrapesJS/grapesjs#1936. I'm not sure why the rulers are turned of when the canvas is cleared, maybe it stops all commands. I'll look into it but if that's the case I'm not sure there'd be any fix for that.

[Ju99ernaut]

The second issue is related to context check here GrapesJS/grapesjs#2852, but tldr; is the panel buttons act like radio buttons if they have the same context, so using one button toggles off all other buttons in the same context.

TLDR; solution:

{
  attributes: {
    title: 'Toggle Rulers'
  },
  context: 'toggle-rulers', //! Add context
  label: `<svg width="18" viewBox="0 0 16 16"><path d="M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z"/><path d="M4 3h8a1 1 0 0 1 1 1v2.5h1V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2.5h1V4a1 1 0 0 1 1-1zM3 9.5H2V12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V9.5h-1V12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9.5z"/></svg>`,
  command: 'ruler-visibility',
  id: 'ruler-visibility'
}

[Ju99ernaut]

The first issue has been fixed in the latest release.

[sidiqim]

Thanks for addressing the issue with the update, and guidance on second issue.

Would be glad for a solution for hiding rulers in preview mode.

[Ju99ernaut]

You can hide them with:

editor.on('run:preview', () => editor.stopCommand('ruler-visibility'));

[sidiqim]

Thank you once again... Based on your guidance I used the following code to maintain the rulers' state after returning back from preview mode.

const rulersButton = editor.Panels.getButton('options','ruler-visibility');
var rulersActiveBeforePreview;

//Hide rulers (if active) in Preview Mode.
editor.on('run:preview', function() {  
  rulersActiveBeforePreview = rulersButton.get('active');
  if (rulersActiveBeforePreview) {
    editor.stopCommand('ruler-visibility');
    rulersButton.set('active', false);
  }  
});

//Show rulers (if active before preview is clicked) upon exit from Preview Mode.
editor.on('stop:preview', function() {
  if (rulersActiveBeforePreview) {
    editor.runCommand('ruler-visibility');
    rulersButton.set('active', true);
  }  
});