When embedding, if there are multiple parents behind, it is attached to the last parent.

[james-ep01]

Introduction

When embedding, if there are multiple parents behind, it is attached to the parent at the back. It seems that the z-index is targeting the one at the back, but it seems common sense to attach it to the parent right behind.
And I tried implementing it by finding the parent right behind it as a coordinate. Currently, it is broken because it brings all the children of the parent right behind it as children of the parent right behind it.

Or, please tell me how to attach it to the parent right behind it.
Thank you.

embed.mp4

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS, JointJS+

[kumilingus]

Please see findParentBy option.

[james-ep01]

Thanks for the answer.
A dumb person like me can't explain it even if you link to it like this.
Without an example of how to use it, most people like me will never understand it.
I have no idea what you are telling me to do by looking at the joint document in the link.

[kumilingus]

Do you use the embeddingMode paper option to implement the embedding or this is a custom solution?

• If you use the embeddingMode then it should work correctly out-of-the-box (the behavior can be controlled with findParentBy option).
• If this is a custom solution, then I can't answer your question without seeing the code.

Please share the code with us (JSFiddle, CodeSandbox, ...) in both cases.

[james-ep01]

I don't use the embeddingMode option, I just simply embed it.
When I create my app code, I don't know what to do even when looking at the documentation, so I look for examples and create my code.

The example I mentioned is not an example in my app, but simply put, it is an example of a large square box parent (2 or more) and embedding a small object right behind it into the parent.

If there is an example like this, I can create and modify the code based on the example, and if there is a problem with my app, I think I can use the method you mentioned.

[kumilingus]

If you "simply embed it" as you say, then you are the one selecting the parent for embedding the children. You should choose the container with the highest z index.

Alternatively, here's a simple example of embeddingMode: https://www.jointjs.com/demos/discrete-event-system-specification
Using the embeddingMode should resolve your other issues with links too: #2915

[james-ep01]

What is the problem with the error that occurs when embedding directly into a duplicate parent in a stencil?
I removed all embedding-related code and tried it by inserting only the code below.

stencil_embed_error.mp4

My Paper option code:

embeddingMode : true,
validateEmbedding: function(childView, parentView) {
console.log( 'parentView', childView, parentView );
const model = parentView.model;
if( childView.model.get('parent') ) {
console.log( 'parent Exist..... ');
return false;
}
if( childView.model.prop('is_embed_below') == true ){
return false;
}
return parentView.model.prop('is_embed_below')?parentView.model.prop('is_embed_below'):false; },
frontParentOnly: true,

Error:

joint-plus.js:14 Uncaught Error: Embedding of already embedded cells is not allowed. at Ho.n.embed (joint-plus.js:14:170793)
at Ho.n.finalizeEmbedding (joint-plus.js:14:317595)
at Ho.n.onDrop (joint-plus.js:14:840770)
at Ho.n.onDragEnd (joint-plus.js:14:839897)
at A.event.dispatch (joint-plus.js:14:122969)
at h.handle (joint-plus.js:14:121050)

The object dragged to the pager is embedded well in the overlapping area. However, if I drag it directly from the stencil to the overlapping area, an error occurs.

What is the problem?

[kumilingus]

Please provide an example and steps to reproduce.
You can create an example from scratch. You don't need to share your application.

[james-ep01]

As you told me, I modified my existing code by looking at the example and it works well.

### The code I am implementing is based on the kitchen app, and it has been implemented for about half a year, so it is very difficult to create an example, reproduce it, and ask for help. Please understand this.

Since I only use the embeddingMode: true option and implement it in validateEmbedding, the complicated code I created before that only used embed and unembed has become clean. If I had known from the beginning, I would not have had a hard time. It is a pity.

However, I have two questions here.

1. When copying and pasting an object, the embed of the copied parent disappears and goes to paper. How do I solve this? When printing to the console, it seems that the parent disappears when pasting.

2. When there are two or more parents, if it is embedded in the last parent and moves from the last parent and cannot be attached to another parent, if validateEmbedding returns false, I want to attach it to the parent it was originally attached to (the last parent), but it goes to the paper behind. How do I solve this problem?

The structure of the second question is as follows.

Embed the second embed into the parent that is embeddable.

If it overlaps with a non-embeddable parent, the last parent will be embedded, so it must be attached to the last parent.

Thank you.