overlapMode设置为1时，选中节点无法置顶 #1395

az6161311 · 2023-10-31T02:08:50Z

问题描述

说明中：值为1: 递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会保持层级。

加粗部分无法生效。

最简复现

http://www.mipcode.com/m/az6161311/HtmlqWGQm-I-2fOB28aR3we26

相关信息 context

LogicFlow Version: 1.2.17

az6161311 · 2023-11-20T06:09:37Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

wumail · 2023-11-20T08:06:12Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法：
1、事先记录好各节点各边的原始层级
2、通过

lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}

覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的

az6161311 · 2023-11-20T08:21:16Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法： 1、事先记录好各节点各边的原始层级 2、通过
lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}
覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的

@wumail
我使用你修复后的，发现每次选中时置顶（toFront）会记录在history中，按照我这边的需求，应该是递增模式，选中、取消选中按照节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。但是这个过程不记录在history中，跟文档中的默认模式有点相似，唯一的区别就是会存储zIndex。使用之前的版本，我大致的代码是这么实现这个过程的，比较粗暴...

if (model.BaseType == "node") {
                if (model.isSelected && model._zIndex == undefined) { 
                    model._zIndex = model.zIndex;
                    var element1 = $(This.rootEl).parents(".lf-node").eq(0);
                    var element2 = $(This.rootEl).parents(".lf-base").eq(0).find(".lf-node:last").eq(0);
                    model._zIndex_1_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element1);
                    model._zIndex_2_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element2);
                    element1.insertAfter(element2);
                    element2.insertBefore($(This.rootEl).parents(".lf-base").find(".lf-node").eq(model._zIndex_1_Index)); 
                }
                else if (!model.isSelected && model._zIndex != undefined) { 
                    model._zIndex = undefined;
                    model._zIndex_1_Index = undefined;
                    model._zIndex_2_Index = undefined;
                }
            }

wumail · 2023-11-21T08:51:01Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法： 1、事先记录好各节点各边的原始层级 2、通过
lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}
覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的
@wumail 我使用你修复后的，发现每次选中时置顶（toFront）会记录在history中，按照我这边的需求，应该是递增模式，选中、取消选中按照节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。但是这个过程不记录在history中，跟文档中的默认模式有点相似，唯一的区别就是会存储zIndex。使用之前的版本，我大致的代码是这么实现这个过程的，比较粗暴...
if (model.BaseType == "node") {
                if (model.isSelected && model._zIndex == undefined) { 
                    model._zIndex = model.zIndex;
                    var element1 = $(This.rootEl).parents(".lf-node").eq(0);
                    var element2 = $(This.rootEl).parents(".lf-base").eq(0).find(".lf-node:last").eq(0);
                    model._zIndex_1_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element1);
                    model._zIndex_2_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element2);
                    element1.insertAfter(element2);
                    element2.insertBefore($(This.rootEl).parents(".lf-base").find(".lf-node").eq(model._zIndex_1_Index)); 
                }
                else if (!model.isSelected && model._zIndex != undefined) { 
                    model._zIndex = undefined;
                    model._zIndex_1_Index = undefined;
                    model._zIndex_2_Index = undefined;
                }
            }

「修复后的」，修复是指「overlapMode设置为1时，选中节点无法置顶」这个吗？

az6161311 · 2023-11-24T06:21:46Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法： 1、事先记录好各节点各边的原始层级 2、通过
lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}
覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的
@wumail 我使用你修复后的，发现每次选中时置顶（toFront）会记录在history中，按照我这边的需求，应该是递增模式，选中、取消选中按照节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。但是这个过程不记录在history中，跟文档中的默认模式有点相似，唯一的区别就是会存储zIndex。使用之前的版本，我大致的代码是这么实现这个过程的，比较粗暴...
if (model.BaseType == "node") {
                if (model.isSelected && model._zIndex == undefined) { 
                    model._zIndex = model.zIndex;
                    var element1 = $(This.rootEl).parents(".lf-node").eq(0);
                    var element2 = $(This.rootEl).parents(".lf-base").eq(0).find(".lf-node:last").eq(0);
                    model._zIndex_1_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element1);
                    model._zIndex_2_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element2);
                    element1.insertAfter(element2);
                    element2.insertBefore($(This.rootEl).parents(".lf-base").find(".lf-node").eq(model._zIndex_1_Index)); 
                }
                else if (!model.isSelected && model._zIndex != undefined) { 
                    model._zIndex = undefined;
                    model._zIndex_1_Index = undefined;
                    model._zIndex_2_Index = undefined;
                }
            }
「修复后的」，修复是指「overlapMode设置为1时，选中节点无法置顶」这个吗？

对，使用的是你这一版签入的代码。

wumail · 2023-11-27T02:26:14Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法： 1、事先记录好各节点各边的原始层级 2、通过
lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}
覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的
@wumail 我使用你修复后的，发现每次选中时置顶（toFront）会记录在history中，按照我这边的需求，应该是递增模式，选中、取消选中按照节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。但是这个过程不记录在history中，跟文档中的默认模式有点相似，唯一的区别就是会存储zIndex。使用之前的版本，我大致的代码是这么实现这个过程的，比较粗暴...
if (model.BaseType == "node") {
                if (model.isSelected && model._zIndex == undefined) { 
                    model._zIndex = model.zIndex;
                    var element1 = $(This.rootEl).parents(".lf-node").eq(0);
                    var element2 = $(This.rootEl).parents(".lf-base").eq(0).find(".lf-node:last").eq(0);
                    model._zIndex_1_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element1);
                    model._zIndex_2_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element2);
                    element1.insertAfter(element2);
                    element2.insertBefore($(This.rootEl).parents(".lf-base").find(".lf-node").eq(model._zIndex_1_Index)); 
                }
                else if (!model.isSelected && model._zIndex != undefined) { 
                    model._zIndex = undefined;
                    model._zIndex_1_Index = undefined;
                    model._zIndex_2_Index = undefined;
                }
            }
「修复后的」，修复是指「overlapMode设置为1时，选中节点无法置顶」这个吗？
对，使用的是你这一版签入的代码。

我有点没太理解，提出这个问题时应该还没有发布新版本才是，「这一版签入的代码」是什么代码🧐

az6161311 · 2023-11-27T03:16:12Z

@wumail 你好，请问如果我想实现：递增模式，节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。应该怎么实现？

目前看没有什么太好的实现方法，堆叠模式这部分代码里的限制比较多，理论上节点取消选中后是否恢复层级跟是何种堆叠模式没有关系，所以目前来说要实现你说的这种效果比较麻烦，有一个比较hack的方法： 1、事先记录好各节点各边的原始层级 2、通过
lf.graphModel.clearSelectElements = function(){
+   const zIndex = .... //获取元素的原始 层级
     this.selectElements.forEach(element => {
      element?.setSelected(false);
+    element.setZIndex(zIndex); 
    });
    this.selectElements.clear();
    /**
     * 如果堆叠模式为默认模式，则将置顶元素重新恢复原有层级
     */
    if (this.overlapMode === OverlapMode.DEFAULT) {
      this.topElement?.setZIndex();
    }
}
覆盖原本的clearSelectElements(clearSelectElements方法会在每次选中元素前调用)，+号标记行是在原clearSelectElements方法上新增的
@wumail 我使用你修复后的，发现每次选中时置顶（toFront）会记录在history中，按照我这边的需求，应该是递增模式，选中、取消选中按照节点和边被选中，会被显示在最上面。当取消选中后，元素会恢复之前的层级。但是这个过程不记录在history中，跟文档中的默认模式有点相似，唯一的区别就是会存储zIndex。使用之前的版本，我大致的代码是这么实现这个过程的，比较粗暴...
if (model.BaseType == "node") {
                if (model.isSelected && model._zIndex == undefined) { 
                    model._zIndex = model.zIndex;
                    var element1 = $(This.rootEl).parents(".lf-node").eq(0);
                    var element2 = $(This.rootEl).parents(".lf-base").eq(0).find(".lf-node:last").eq(0);
                    model._zIndex_1_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element1);
                    model._zIndex_2_Index = $(This.rootEl).parents(".lf-base").find(".lf-node").index(element2);
                    element1.insertAfter(element2);
                    element2.insertBefore($(This.rootEl).parents(".lf-base").find(".lf-node").eq(model._zIndex_1_Index)); 
                }
                else if (!model.isSelected && model._zIndex != undefined) { 
                    model._zIndex = undefined;
                    model._zIndex_1_Index = undefined;
                    model._zIndex_2_Index = undefined;
                }
            }
「修复后的」，修复是指「overlapMode设置为1时，选中节点无法置顶」这个吗？
对，使用的是你这一版签入的代码。
我有点没太理解，提出这个问题时应该还没有发布新版本才是，「这一版签入的代码」是什么代码🧐

不是合并代码了嘛？我不是能下载下来编译嘛....

wumail · 2023-11-28T06:46:27Z

明白了，我后续跟进下这个问题，近期有些忙

az6161311 · 2023-11-30T05:53:29Z

明白了，我后续跟进下这个问题，近期有些忙

3Q

wumail mentioned this issue Oct 31, 2023

fix(core): anchorId missed after point adjusting(#1365) #1392

Merged

boyongjiong closed this as completed in #1392 Nov 1, 2023

boyongjiong pushed a commit that referenced this issue Nov 1, 2023

fix(core): zIndex problem in overlapMode(#1395)

ae41283

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

overlapMode设置为1时，选中节点无法置顶 #1395

overlapMode设置为1时，选中节点无法置顶 #1395

az6161311 commented Oct 31, 2023

az6161311 commented Nov 20, 2023

wumail commented Nov 20, 2023 •

edited

Loading

az6161311 commented Nov 20, 2023 •

edited by wumail

Loading

wumail commented Nov 21, 2023

az6161311 commented Nov 24, 2023

wumail commented Nov 27, 2023

az6161311 commented Nov 27, 2023

wumail commented Nov 28, 2023

az6161311 commented Nov 30, 2023

overlapMode设置为1时，选中节点无法置顶 #1395

overlapMode设置为1时，选中节点无法置顶 #1395

Comments

az6161311 commented Oct 31, 2023

问题描述

最简复现

相关信息 context

az6161311 commented Nov 20, 2023

wumail commented Nov 20, 2023 • edited Loading

az6161311 commented Nov 20, 2023 • edited by wumail Loading

wumail commented Nov 21, 2023

az6161311 commented Nov 24, 2023

wumail commented Nov 27, 2023

az6161311 commented Nov 27, 2023

wumail commented Nov 28, 2023

az6161311 commented Nov 30, 2023

wumail commented Nov 20, 2023 •

edited

Loading

az6161311 commented Nov 20, 2023 •

edited by wumail

Loading