RappidJS question, can you show the halo boxContent for every item at once?

[Arian Hojat]

I wanted to make a checkbox on the page, so when I click it, every element in the SVG RappidJS document shows its boxContent (so the user can quickly get a good overview of the items he has added).

Right now I only show the boxContent when you click on the element via code I probably copied from somewhere (code attached below).

But i was thinking maybe I can do something like $('#show-all-elements-box-content').change(function(){    if(this.is(':checked')){ RappidJS.showAllHaloContent(); }   });  (guess IF it is possible I'd have to write a custom showAllHaloContent() function as its probably not built into the JS api).

paper.on('cell:pointerup', function(cellView) {

    // We don't want to transform links.

    if (cellView.model instanceof joint.dia.Link) return;

var isShiftPressed = true;

var freeTransform = new joint.ui.FreeTransform({ 'cellView': cellView, 'preserveAspectRatio': isShiftPressed });

var halo = new joint.ui.Halo({ 'cellView': cellView, 'rotateAngleGrid': 5,

boxContent: function boxContent(cellView, boxDOMElement){ 

var show_general    = $('#show-general').is(':checked');

var show_detail     = $('#show-detail').is(':checked');

var show_extra_info = $('#show-extra-info').is(':checked');

var content = '';

if(show_general) {

content += ''

...

}

if(show_detail) {

content += ''

...

}

if(show_extra_info) {

content += ''

                                        ...

}

return content;

}

});

// As we're using the FreeTransform plugin, there is no need for an extra resize tool in Halo.

// Therefore, remove the resize tool handle and reposition the clone tool handle to make the

// handles nicely spread around the elements.

halo.removeHandle('resize');

//halo.removeHandle('link');

//halo.removeHandle('unlink');

halo.changeHandle('clone', { position: 'se' });

freeTransform.render();

halo.render();

createInspector(cellView);

// not sure what this is used for yet: this.selectionView.cancelSelection();

// not sure what this is used for yet: this.selection.reset([cellView.model]);

});

[vladimir talas]

Hi,

try this code:

            paper.on('blank:pointerdown', function() {

                _.each(this.graph.getElements(), function(cell) {

                    new joint.ui.Halo({
                        clearAll: false,
                        cellView: this.paper.findViewByModel(cell),
                        handles: App.config.halo.handles
                    }).render();
                }, this);

            }, this);

In this example when you click on the empty space on the paper it will show the Halo on every elements on the page. Replace the `paper.on('blank:pointerdown'` with a event you need.

Regards,

Vladimir

--

---
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.

[Arian Hojat]

Awesome it worked, Thanks!

Did something simple like so with checkbox to turn on and off all Halo's :

$(function(){

$('#show-all-labels').click( function() {

var checked = $(this).is(':checked');

if( checked ) {

_.each(graph.getElements(), function(cell) {

new joint.ui.Halo({

clearAll: false,

cellView: paper.findViewByModel(cell),

boxContent: function boxContent(cellView, boxDOMElement){ 

var content = 'some custom Halo content'; //build custom content

return content;

}

}).removeHandles().render();

}, this);

} else {

joint.ui.Halo.clear(paper);

}

});

});