backbone.js - JointJS Element with ports and tool items (delete, settings etc.) -

-

i managed enhance svg-shape ports via:

joint.shapes.devs.element = joint.shapes.basic.generic.extend(_.extend({},      joint.shapes.basic.portsmodelinterface, {     // svg markup ports });

with output:

svg shape ports

i want enhance shape delete button. have:

joint.shapes.devs.toolelement = joint.shapes.basic.generic.extend({     // markup delete button });

based on mike goodwin´s solution in how give jointjs elements remove tool?

my question: how can combine portmodelinterface delete tool? solution should this:

delete action , ports combined

thanks helping me out.

solution

the key this plugin. author extended portsmodelinterface own code move-, resize- , ports-tool. extended further implementing delete functionality. way devs-model open extension in case of functionality.

how it´s done

in tooledviewplugin.js there joint.plugins.tooledmodelinterface = {}. in there added: 

deletetoolmarkup: '<circle fill="red" r="11"/><path transform="scale(.8) translate(-16, -16)" d="m24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z"/><title>remove element model</title>',

below in joint.plugins.tooledviewinterface = {} wrote

renderdeletetool: function () {     var deletecontainer = this.$('.deletetool').empty();     var markup = v(this.model.deletetoolmarkup);     for(var id in markup)         deletecontainer.append(markup[id].node); }

an example shape special svg markup other simple rectangle. note <g class="deletetool"/> in markup:

joint.shapes.devs.unspecifiedprocess = joint.shapes.devs.model.extend(_.extend({}, joint.plugins.tooledmodelinterface, {  markup: ['<g class="rotatable">',             '<g class="scalable">',                 '<rect class="body"/>',                 '<g xmlns="http://www.w3.org/2000/svg" transform="translate(-549.49953,-824.87393)" id="layer1">',                     '<g transform="matrix(0.933025,0,0,-0.2986125,549.49953,846.37362)" id="g3553">',                       '<g transform="scale(0.98976,3.0047)" id="g3555">',                         '<g clip-path="url(#clippath3559)" id="g3557">',                           '<path d="m 57.805,0.90155 -57.805,0 0,23.06045 57.805,0 l 72.244,12.432 57.805,0.90155 z" id="path3563" style="fill:#b8cde8;fill-opacity:1;fill-rule:evenodd;stroke:none"/>',                         '</g>',                       '</g>',                     '</g>',                 '</g>',             '</g>',             '<g class="inports"/>',             '<g class="outports"/>',             '<g class="movetool"/>',             '<g class="resizetool"/>',             '<g class="portstool"/>',             '<g class="deletetool"/>',             '<title class="tooltip"/>',         '</g>'].join(''),  defaults: joint.util.deepsupplement({     type: 'devs.unspecifiedprocess',     inports: [''],     outports: [''],     movetool: true,     resizetool: true,     size: { width: 100, height: 31},     attrs: {         '.inports circle': { fill: '#fff' },         '.outports circle': { fill: '#fff' },         '.body': {             width: 67, height: 21,             stroke: 'none'         },     } }, joint.shapes.devs.model.prototype.defaults), })); joint.shapes.devs.unspecifiedprocessview = joint.shapes.devs.modelview.extend(joint.plugins.tooledviewinterface);

the final part instantiating element new joint.shapes.devs.unspecifiedprocess. present drag , drop logic might useful too:

//drag , drop shapes if (modernizr.draganddrop) {     // mouse position     var posx = 0,         posy = 0;     // selected element start of dragging     var selectedel = "";     var selectedobj = null;     var oldobj = null;     //     $(".draggable-svg").on("dragstart", function(e) {         selectedel = this.id;         console.log(selectedel);     });      $("#drawing-area").on("dragover", function(e) {         e.preventdefault();         posx = e.originalevent.pagex - sidebarw;         posy = e.originalevent.pagey - topbarh;     });      $("#drawing-area").on("drop", function(e) {         e.preventdefault();         var element = new joint.shapes.devs[selectedel]({             position: { x: posx, y: posy }         });         graph.addcell(element);         selectedel = "";         oldobj = selectedobj;         selectedobj = element;      });  } else {     alert("your browser old. please update."); }

Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more