Unexpected behavior when playing with z-index / .toFront() and .prop("z")

This issue has been tracked since 2022-07-20.

I have created a simple demo case in which an unexpected behavior when playing with .toFront() and .prop("z") methods can be observed.

https://codesandbox.io/s/jointjs-dom-graph-forked-ycptm

The demo consists of 3 nodes connected with 2 links. There are 2 event listeners:

  • link:mouseenter - this one gets the current z prop and stores it in the model, in a tmp_z prop. Then it calls .toFront(). It also performs a modification in the link's view (further details in the comments of the code).
  • link:mouseleave - this one sets the z prop to the value of tmp_z.

Expected behavior: hovering each link should make it "highlighted" (the stroke should switch to a dash-array style); moreover, the "highlighted" effect should be visible across the entire length of the line.
If the DOM is inspected, the "last" element in the joint-cells-layer should be the link that is currently being hovered. Hovering over the other link should make that one the "last" element in the joint-cells-layer. When the cursor has left a link, it's initial z index should be restored.

Expected behavior when each link is hovered (visual sample):

Cursor_y_Affinity_Photo_-jointjs-dom-graph__forked_-CodeSandbox_png__Modificado___197_1_

Current behavior: hovering over each link a couple of times will "break" the z-index, and then only one of the links will be able to gain that "highlighted" style. Inspecting the DOM reveals that the call to .toFront() is not being honored and the link that is being hovered is not the "last" element in the joint-cells-layer.

Further debugging on this revealed that if line 173 is commented, the bug won't happen anymore. My guts are telling me that if the z prop is set, the .toFront() refuses to modify it.

kumilingus wrote this answer on 2022-07-28

You can not set the z attribute silently (toFront() is not called silently either).

linkView.model.prop("z", linkView.model.prop("tmp_z"));
alexandernst wrote this answer on 2022-07-28

Ooohhh!! That makes sense. Because I assume you're relying on Backbone's internal event dispatcher to react to z changes. Thank you!

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date