mylomen-server/static/js/event/impl/MutationObserverImpl.js

"use strict";
/**
 * 使用样式事件
 */
define(function (require, exports, module) {

    function handle(mutationList) {
        for (let mutation of mutationList) {


            switch (mutation.type) {
                case "childList":
                    addNewP(mutation);
                    break;
                case "characterData":
                    updateText(mutation);
                    break;
                case "attributes":
                    //暂时忽略属性变化
                    break
                default: {
                    other(mutation);
                }
            }
        }
    }

    function other(mutation) {
        // console.log("other ", mutation)
        // console.log("other -> mutation : ", mutation,
        //     // 观察的变动类型（attributes、characterData或者childList）。
        //     "\ntype", mutation.type,
        //     //发生变动的DOM节点。
        //     "\ntarget", mutation.target, mutation.target.nodeName, mutation.previousSibling,
        //     "\ntargetParent", mutation.target.parentElement, mutation.target.parentNode,
        //     //新增的DOM节点。
        //     "\naddedNodes", mutation.addedNodes,
        //     //删除的DOM节点。
        //     "\nremovedNodes", mutation.removedNodes,
        //     //前一个同级节点，如果没有则返回null。
        //     "\npreviousSibling", mutation.previousSibling,
        //     //下一个同级节点，如果没有则返回null。
        //     "\nnextSibling", mutation.nextSibling,
        //     //发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。
        //     "\nattributeName", mutation.attributeName,
        //     //变动前的值。这个属性只对attribute和characterData变动有效，如果发生childList变动，则返回null。
        //     "\noldValue", mutation.oldValue);
    }

    function addNewP(mutation) {
        let ctx = require("../../common/ctx");
        let utils = require("../../common/utils");
        //div 下新增p元素
        let target = mutation.target;
        // target.clone()
        if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
            let newParagraph = mutation.previousSibling.nextSibling;
            // console.log(
            //     "addNewP target: ", target,
            //     "\nnodeType: ", target.nodeType,
            //     "\nnodeName: ", target.nodeName,
            //     "\ndata: ", target.value,
            //     "\n next: ", newParagraph,
            //     "\ncurRowNo: ", ctx.getCurRowNo()
            // )
            if (newParagraph !== undefined && newParagraph !== null) {
                newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
                let curNo = ctx.incrementNumThenReturn();
                newParagraph.setAttribute("data-order", curNo);
                //内置span
                let spanContent = newParagraph.querySelector("span[data-flag='span_content']");
                if (spanContent === undefined || spanContent === null) {
                    spanContent = document.createElement("span");
                    // spanContent.append(document.createElement("br"));
                    spanContent.setAttribute("data-flag", "span_content")
                    if (curNo === 0) { //首行有提示
                        spanContent.setAttribute("placeholder", "请输入内容")
                    } else {
                        spanContent.setAttribute("placeholder", "请输入内容")
                        spanContent.innerHTML = " "
                    }

                    // console.dir(mutation)

                    newParagraph.appendChild(spanContent);
                } else {
                    console.log("newParagraph spanContent exist", spanContent);
                    spanContent.innerHTML = " "
                }

                utils.GetSelection().removeAllRanges();
                utils.GetSelection().setPosition(spanContent, 0);
                spanContent.focus();
            }

            return
        }

        //解决（flex 布局 for 无序列表 前面可以输入问题）回车不换行问题
        // console.log(" fix ", mutation)
        if (target.nodeName === "P"
            && target.getAttribute("data-order") != null
            && mutation.previousSibling !== null
            && mutation.previousSibling.getAttribute("data-flag") === "span_content") { //
            let utils = require("../../common/utils");
            let flagP = target;
            for (let i = 0; i < mutation.addedNodes.length; i++) {
                let tmpSpan = mutation.addedNodes[i];
                let tmpP = document.createElement("p");
                let curNo = ctx.getCurRowNo();
                if (curNo === 0) { //首行有提示
                    tmpSpan.setAttribute("placeholder", "请输入内容")
                } else {
                    tmpSpan.textContent = "\n"
                }
                tmpP.appendChild(tmpSpan)
                utils.InsertAfter(flagP, tmpP);
                flagP = tmpP;
            }
            return;
        }

        other(mutation);
    }

    function updateText(mutation) {
        let target = mutation.target;
        if (target.nodeType === 3 && target.nodeName === "#text") {
            let utils = require("../../common/utils");
            let ctx = require("../../common/ctx");
            //测试内容填写
            // let testDiv = document.getElementById("testDevice");
            // testDiv.innerText = mutation.oldValue

            let grandfatherElement = target.parentNode?.parentElement;
            //处理添加了样式的 行
            if (grandfatherElement != null && grandfatherElement.getAttribute("data-flag") === "span_content") {
                //正在输入中文直接忽略
                if (ctx.Compositionstart) {
                    return;
                }
                let select = utils.GetSelection();
                let selectRange = select.getRangeAt(0);
                if (select.isCollapsed) { //输入场景
                    let tmpSpan = selectRange.startContainer.parentElement;
                    console.log(utils.GetText(tmpSpan))
                    let curTxt = utils.GetText(tmpSpan);
                    if (curTxt.trim().length <= 1) {
                        return
                    }
                    // console.dir(select)
                    // console.dir(mutation)
                    // console.dir(grandfatherElement)
                    // console.dir(tmpSpan)
                    // console.log(tmpSpan)
                    // console.log(curTxt.split(''))
                    let curTxtArr = curTxt.split('');
                    //保留一个
                    tmpSpan.innerText = curTxtArr[0];
                    let lastSpan = tmpSpan;
                    for (let i = 1; i < curTxtArr.length; i++) {
                        let tmpSpan = document.createElement("span");
                        tmpSpan.innerText = curTxtArr[i];
                        utils.InsertAfter(lastSpan, tmpSpan);
                        lastSpan = tmpSpan;
                    }
                    //选区调整
                    // console.log("lastSpan : ", lastSpan)
                    utils.GetSelection().setPosition(lastSpan, 1);
                } else {
                    console.log("TODO 暂时不支持")
                }
            } else { // 处理没有添加样式的行
                console.log("TODO 暂时不支持")
            }


            //处理无序列表和有序列表 探究
            if (target.parentNode === undefined || target.parentNode?.parentElement === undefined) {
                return;
            }
            // console.log(
            //     "updateText mutation: ", mutation,
            //     "\ntarget: ", target,
            //     "\nnodeType: ", target.nodeType,
            //     "\nnodeName: ", target.nodeName,
            //     "\ndata: ", target.value,
            //     "\noldValue: ", target.oldValue, target.oldValue?.startsWith("- "),
            //     "\nparentNode: ", target.parentNode, target.parentElement,
            //     "\nparentNode_parentNode: ", target.parentNode?.parentElement,
            // )
            let curP = target.parentElement?.closest("p");
            let curSpanContent = curP.querySelector("span[data-flag='span_content']")
            // console.log("curSpanContent: ", curSpanContent)

        } else {
            other(mutation);
        }
    }

    //导出
    exports.handle = handle;
});