search

Ju99ernaut / grapesjs-rulers

Rulers and guides for grapesjs designer mode
MIT License
37 stars 14 forks source link

GrapesJS ruler displayed the wrong vertical dimension when the vertical dimension of GrapesJS was not full screen #6

Closed maivanchuong95 closed 3 years ago

maivanchuong95 commented 3 years ago

GrapesJS ruler displayed the wrong vertical dimension when the vertical dimension of GrapesJS was not full screen

Ju99ernaut commented 3 years ago

Can you provide steps to reproduce this?

maivanchuong95 commented 3 years ago

image

maivanchuong95 commented 3 years ago

editor = grapesjs.init({ container:'#gis', clearOnRender: true, height: '100%', width:'100%', noticeOnUnload: false, // If set to true, then the content within the wrapper element overrides the following config, fromElement: true, resizable:true, editable:true, // The components accepts HTML string or a JSON of components // Here, at first, we check and use components if are already defined, otherwise // the HTML string gonna be used components: temp_html, // We might want to make the same check for styles style: temp_css, // As we already initialize the editor with the template we can skip the autoload plugins: ['gjs-preset-webpage', 'grapesjs-script-editor', 'grapesjs-rulers', 'gjs-blocks-flexbox', 'grapesjs-style-bg', 'grapesjs-custom-code'], pluginsOpts: { 'gjs-preset-webpage': { blocksBasicOpts:{ category:'Basic', }, navbarOpts:false, countdownOpts:false, formsOpts:false, textExtra:'Merge Fields', }, 'grapesjs-script-editor': {}, 'grapesjs-rulers':{}, 'grapesjs-custom-code': { category:'Basic', }, 'gjs-blocks-flexbox':{ flexboxBlock: {},

                // Classes prefix
                stylePrefix: '',

                // Row label
                labelRow: 'Row',

                // Column label
                labelColumn: 'Column',
            },
            'grapesjs-style-bg':{},
        });

const pn = editor.Panels; const panelViews = pn.addPanel({ id: "options" }); //add ruler panelViews.get("buttons").add([ { active: 1, context: 'sw-visibility', attributes: { title: "Toggle Rulers" }, label: <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-rulers" viewBox="0 0 16 16"><path d="M1 0a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h5v-1H2v-1h4v-1H4v-1h2v-1H2v-1h4V9H4V8h2V7H2V6h4V2h1v4h1V4h1v2h1V2h1v4h1V4h1v2h1V2h1v4h1V1a1 1 0 0 0-1-1H1z"/></svg>, command: "ruler-visibility", id: "ruler-visibility" } ]); editor.runCommand("ruler-visibility");

maivanchuong95 commented 3 years ago

The position marked on the ruler is different from the vertical cursor position

Ju99ernaut commented 3 years ago

I'll try investigate and see if I can find a fix, but it looks like the offsets aren't being applied correctly to the indicators. Thanks!!

maivanchuong95 commented 3 years ago

it doesn't seem to be getting the body right My screen video https://www.youtube.com/watch?v=-_kMsBDrp-Q

Ju99ernaut commented 3 years ago

Fix in #7 solves this issue as well