编辑器里的元素【组合】功能和双击编辑【组合内元素】应该如何设计呢？

Question

例如如图的功能，将多个元素组合成一个了，这样可以一次操作多个元素，然后双击某个元素，就进入到组合内的元素进行操作。

类似 sketch、photoshop 那样的。

不知道该如何合理规划dom结构和各种判断逻辑。

我想到

1. 各元素应该是平级的

   div#box1
   div#box2
   div#box3

2. 如果组成组合

   .group
     div#box1
     div#box2
     div#box3
   

如果这个方向是对的，那逻辑应该如何做呢？

Answer 1

双击编辑内容的行为逻辑，给你给简单示例
至于双击时候具体的UI，比如边上出现的那个框框，就是你自己改样式的事了

直接查看示例：
https://jsfiddle.net/qzwavav9/

或者查看下面代码
HTML

<div class="demo">Lorem ipsum dolor sit amet.</div>

CSS

body {
    background-color: #eee;
}

input {
    vertical-align: top;
    outline: 0;
    border: 0;
}

.demo {
    cursor: pointer;
    border-bottom: 1px dashed;
}

.textarea-focus,
.demo {
    width: 300px;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-align: center;
    padding-bottom: 5px;
}

.textarea-focus {
    border: 1px solid #ccc;
    background-color: #eee;
}

JS

   let demo = document.querySelector('.demo');
    demo.ondblclick = function() {
        let nowText = this.innerText; //初始的文本内容
        let textarea = document.createElement('input'); //创建编辑用的文本框
        textarea.type = 'text';
        textarea.value = nowText;
        textarea.className = 'textarea-focus';

        this.innerText = '';
        this.appendChild(textarea); //只有双击时向div添加input子标签，非双击时会被移除
        textarea.focus(); //双击时候触发input文本框的获得焦点事件

        textarea.onblur = function() { //文本框失去焦点时
            demo.innerText = this.value;
            //重设div的文本为在input文本框中输入的内容
        };
    };