How to create horizontal gridlines that snap, no vertical gridlines

[er...@elementalpath.com]

Hello,

Please help me figure out how to make a custom grid that only has horizontal lines.  So basically the mesh gridlines but only the lines that go horizontally.

Thanks,

Eric

[Vladimír Talaš]

Hi Eric, 

in JointJs v1.1 there is a new way how to define a grid. You have some pre-defined grid as described here http://resources.jointjs.com/docs/jointjs/v1.1/joint.html#dia.Paper.prototype.options.drawGrid, but also you can define your own grids as well (Please note defining own grids is a feature in alpha state ans it's not documented yet). 

So how to create a custom grid? 

You can get some inspiration from the implementation of pre-defined grids: `joint.dia.Paper.gridPatterns`. In your case, horizontal lines grid could look like as follows: 

Render red horizontal lines, with 10px space between lines 

var graph = new joint.dia.Graph;

var paper = new joint.dia.Paper({
    el: $('#paper'),
    width: 650,
    height: 400,
    gridSize: 10,
    drawGrid: {
        color: 'red',
        thickness: 1,
        // grid shape element
        markup: 'path',

        // refresh grid element attributes on change (like paper scale change, gridSize change etc.)
        /**
         * @param el Grid element, it's the reference to element defined by the drawGrid.markup
         * @param opt drawgrid extended with some useful stuff like current paper transformations, actual grid size
         */
        update: function(el, opt) {

            var d;
            // actual grid size (defined by paper.options.gridSize, scaled according to paper scale)
            var width = opt.width;
            var height = opt.height;
            var thickness = opt.thickness;

            if (width - thickness >= 0 && height - thickness >= 0) {
                d = ['M', width, 0, 'H0'].join(' ');
            } else {
                d = 'M 0 0 0 0';
            }

            V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
        }
    },
    model: graph
});

Regards,

Vladimir

 

------ Původní zpráva ------

Od: er...@elementalpath.com

Komu: "JointJS" <joi...@googlegroups.com>

Odesláno: 01.09.2017 18:51:37

Předmět: How to create horizontal gridlines that snap, no vertical gridlines

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Žilvinas Klimantavičius]

Is there a way to have a grid but to disable snap to grid function?