Error in displaying source and target arrowheads while using the Manhattan router with jointJS/Rappid

Is there a way to ensure that a specific cell is always positioned to the back, allowing for a graph to be placed on top of it seamlessly? When using the Manhattan router, I have noticed that the source and target arrowheads do not display correctly in this scenario.

https://i.stack.imgur.com/bz45t.png

The method I used to set this cell to the back is shown below:

cell.toBack();

This ensures that the cell remains at the lowest level within the graph structure.

How can I adjust the layout so that all transitions over this cell appear as though they are seamlessly integrated into the design, similar to the example provided in the image below?

https://i.stack.imgur.com/wInPq.png

jquerybackbone.jsjointjsrappid

Answer №1

Issue

In this scenario, the Manhattan router is unable to find a suitable route because both the source and target elements are obstructed by a large obstacle in the form of a light blue rectangle.

Fix 1

  1. Ensure that the container element has a distinct type.

    var Container = joint.dia.Element.define('ns.Container', {
  attrs: {
    rect: {
      refWidth: '100%',
      refHeight: '100%',
      stroke: 'black',
      fill: 'lightblue'
    }
  }  
}, {
  markup: 'rect'
});

var container = new Container;
container.resize(200,200);
container.position(100, 100);
container.addTo(graph);

    For older versions of JointJS/Rappid

    var Container = joint.dia.Element.extend({
  markup: 'rect',
  defaults: joint.util.deepSupplement({
    type: 'ns.Container',
    attrs: {
      rect: {
        'ref-width': '100%',
        'ref-height': '100%',
        'stroke': 'black',
        'fill': 'lightblue'
       }
    }
  }, joint.dia.Element.prototype.defaults)
});

  2. Specify to the Manhattan router that the container element should not be considered as an obstacle.

    new joint.dia.Paper({
  defaulRouter: {
    name: 'manhattan',
    args: { excludeTypes: 'ns.Container' }
  }
});

Fix 2

If you embed the elements within the container, the Manhattan router will automatically ignore the container.

container.embed(activity1);
container.embed(activity2);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The web server is receiving Ajax calls but none of the callback functions are being executed

The given JavaScript function demonstrates the use of ajax to make a POST request and handle the response. The function is structured as follows: function Verify(ccode,dgh) { var retData = ''; str = "ccode="+ccode+"&dgh="+dgh; co ...

jqueryajax

Synchronizing client information in real-time: tips, tricks, and expert advice

Currently, I am developing a PHP backend and utilizing JS/Jquery for the front end of an application that aims to facilitate near real-time communication among users. My main concern right now is determining the most effective approach to achieve this goal ...

javascriptphpjqueryajaxsockets

AJAX in jQuery cannot be used to send data to a PHP

I am facing an issue with my script that uses AJAX to post data to the server and display it, but unfortunately, it is not functioning properly... Here is the current output: Your viewport width is 1332x670 Ajax initialization failed! In this scenario, ...

phpjqueryajaxpost

jQuery's ajax function fails to detect a 401 error

Having trouble with exception handling on the client side? Everything was going smoothly until I introduced HTTP401. Take a look at my base controller that overrides OnException: protected override void OnException(ExceptionContext filterContext) { va ...

jqueryajaxasp.net-mvc

Tips for using jQuery to identify the most recently modified row in an HTML table

Is there a way to identify the most recently modified (either newly added or changed) row in an HTML table? ...

javascriptjqueryhtml

Challenge with implementing infinite scrolling and reordering columns in jQuery DataTables

Is there a way to integrate DataTables with both infinite scrolling and column re-ordering without loading all the data when initializing the table? In our case, our result set is very large, so we constantly fetch more data from the server via ajax to po ...

jquerydatatables

the angular-ui-tinymce directive allows for seamless image uploads using a file browser

Utilizing jQuery, we have the ability to incorporate local images into the tinymce editor similar to what is demonstrated in this jsfiddle, by following the guidelines provided in the documentation. The Angular module for tinymce can be found at angular-u ...

javascriptjqueryangularjstinymcetinymce-4

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Executing a $.when promise while iterating through an array

Here is the code snippet I am working with: var arrOutfit = []; // will be populated ... $.when( $.each(arrOutfit, function(key, sAdd) { $.post('/checkout/addArticle', 'sAdd=' + sAdd + '&sQuantity=1'); }); ).t ...

jqueryajaxcallbackjquery-deferred

template strings receive null value

I am currently facing an issue with the execution of certain template literals in my jQuery functions. Although some are functioning as expected, there is a specific block that is not being executed. function viewUserDetails(data) { // retrieves integer v ...

jqueryajaxstringliterals

Trigger the jQuery function based on the ID modification executed by jQuery

Is it possible to change the id of an HTML element using this function? $("#test").attr('id', 'test2'); Here is an example of the code: $("#test").click(function() { $("#test").attr('id', 'test2'); alert(& ...

javascriptjquery

Dynamically scrolling an element using jQuery without specifying specific values

I need to keep an element fixed when scrolling on a page without setting specific height values. Do you know of any way to achieve this? Below is the code for reference: // Keep the orange box at the top after scrolling to a certain extent $(window).sc ...

jquerycss

The jQuery datetimepicker fails to reflect changes made to the minDate property

I have encountered a datetimepicker object that was previously set up with the following configuration: $('#startDate').datetimepicker({ monthNames: DATE_TIME_MONTHS_NAMES, monthNamesShort: DATE_TIME_MONTHS_NAMES_SHORT, dayNames: DAT ...

javascriptjquerydatetimepicker

How can I determine the remaining amount of scroll left in my HTML document?

Is there a method to determine how many pixels of scroll remain on the page when the scrollbar is set at a specific position? I am currently utilizing jQuery's scrollLeft feature, which can be found here: http://api.jquery.com/scrollLeft/. I want to ...

javascriptjqueryhtmlcss

Ajax completes a request without receiving a response

Recently, I crafted an AJAX request that redirects the page once it's completed, without paying attention to the response it receives. My main goal is to ensure that the POST request is fully sent before triggering the redirect. Most of the informati ...

jqueryajax

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

Recently, I decided to explore the Foundation framework. However, my first stumbling block was figuring out how to use the "active" class in a dropdown menu. I am hoping to have the class applied to the page link that is currently being viewed by the user ...

jquerycsszurb-foundationzurb-foundation-5

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

javascriptjqueryhtmlcss

Using Javascript to extract a custom attribute from a button element

In my HTML, there is a button that has a custom property called data-filter-params: <button class="button" type="submit" data-filter-params="{'Type', 'Filter.Type'},{'Code','Filter.Code'}" >Filter</button&g ...

javascriptjqueryhtmlasp.net-mvc

What strategies can I implement to streamline, refine, and enhance the efficiency of this jQuery code?

I've been working on the front-end of a website and I have a bunch of jQuery functions. While I'm not a jQuery expert, I have started reading the sitepoint book to improve my skills. I believe that my code could use some cleaning up to make it mo ...

jqueryoptimization

What methods can be employed to ensure that the DRF (Django-REST-Framework) Token remains intact and does not disappear with each page refresh?

IMPORTANT: I am utilizing Pure HTML+jQuery+AJAX without Python, Django, or Templates for the front-end development. I have successfully managed to retrieve a User-Based Token from the API Backend, inserted it into the Header File for subsequent requests, ...

jquerydjangoajaxapidjango-rest-framework