efront 4.23.3 → 4.23.5

package/coms//350/214/250/350/217/260//347/274/226/350/276/221/346/241/206.xht

@@ -1,11 +1,10 @@
 <style>
     & {
         overflow: auto;
-        border: 6px solid transparent;
         border-top: 0;
         border-bottom: 0;
         display: block;
-        padding: 6px 0;
+        padding: 0;
     }
 
     &.noinput {
@@ -23,13 +22,91 @@
             content: "当前浏览器编辑会造成异常";
         }
     }
+
+    @ntype(@len) {
+
+        &[ntype="@{len}"] {
+            @w: @len/2+2;
+            @bg: --bgcolor;
+
+            >[nlist],
+            >[clist] {
+                display: inline-block;
+                vertical-align: top;
+                min-height: 100%;
+                outline: none;
+
+                >r,
+                >d {
+                    display: block;
+                }
+
+            }
+
+            >[clist] {
+                background: #2c2d2c;
+                margin-left:-@{w}em;
+                border-left: @{w}em solid transparent;
+                width: 100%;
+                overflow-x: scroll;
+            }
+
+            >[nlist] {
+                z-index: 1;
+                width: @{w}em;
+                text-align: right;
+                padding-right: .6em;
+                color: #666;
+                position: relative;
+            }
+        }
+    }
+
+    @ntype(0);
+    @ntype(1);
+    @ntype(2);
+    @ntype(3);
+    @ntype(4);
+    @ntype(5);
+    @ntype(6);
+    @ntype(7);
+
+    >list {
+        display: inline-block;
+        border-top: 6px solid #2c2d2c;
+
+        &[nlist] {
+            background: #222;
+            border-color: #222;
+        }
+
+        >d {
+            outline: none;
+            border: none;
+
+            &:focus {
+                outline: 1px solid #fff3;
+            }
+        }
+
+        >n,
+        >d {
+            display: block;
+            height: 1.36em;
+        }
+    }
 </style>
-<编辑框 spellcheck=false e-class="上色.className" e-style="{whiteSpace:'pre'}" onkeydown="updatechar"
-    onkeydown.tab.prevent.only="keytab(1)" onkeydown.tab.shift.prevent.only="keytab(-1)" onkeyup.enter.only="tab(false)"
-    oninput='!event.isComposing&&updatecode(event)' onkeydown.space.only='fixpace'>
+<编辑框 spellcheck=false e-class="上色.className" e-style="{whiteSpace:'pre'}" ntype:="codeSpan">
+    <list contenteditable="false" nlist# :src="(r,i) in coderows" -style="{height:codeHeight}">
+        <n -bind="i+1"></n>
+    </list>
+    <list clist# contenteditable="true" :src="(r,i) in coderows" -style="{height:codeHeight}">
+        <d -html="r"></d>
+    </list>
 </编辑框>
 <script>
     var coder = this;
+    vbox(this);
     if (!('oninput' in document)) {
         on('focus')(this, function () {
             if (this.contentEditable) addClass(this, "noinput");
@@ -38,6 +115,8 @@
             removeClass(this, 'noinput');
         })
     }
+    var codeHeight = '';
+    var codeSpan = 1;
     var coderid = 0;
     care(coder, async function ([text, type]) {
         try {
@@ -47,113 +126,85 @@
             if (typeof text === 'string') coder.innerHTML = 渲染.encode(text);
         }
     });
+    var refresh = function () {
+        codeHeight = coderows.length * 1.36 + 10 + 'em';
+        codeSpan = (coderows.length).toString().length;
+    };
+    on('scroll')(coder, function () {
+        nlist.refresh();
+        clist.refresh();
+    })
+    var coderows = [], codetext = '';
     coder.setValue = async function (text) {
+        codetext = text;
         var id = ++coderid;
-        var colored = await 上色.text(this.type, text);
+        var colored = 上色.rows(this.type, text);
         if (id !== coderid) return;
-        coder.innerHTML = colored;
+        coderows = colored;
+        codeHistory = [[codetext]];
+        historyIndex = 0;
+        render.refresh();
     };
     coder.getValue = function () {
-        return coder.innerText;
+        return codetext;
     };
-    var markAnchorOffset = function (光标) {
-        var { anchorNode, anchorOffset } = document.getSelection();
-        if (!anchorNode || !coder) return;
-        var [c] = coder.children;
-        if (anchorNode.nodeType === 1) {
-            var node = document.createTextNode(光标);
-            anchorNode.insertBefore(node, anchorNode.childNodes[anchorOffset])
-        }
-        else if (anchorNode.nodeType === 3) {
-            anchorNode.nodeValue = anchorNode.nodeValue.slice(0, anchorOffset) + 光标 + anchorNode.nodeValue.slice(anchorOffset);
-        }
+    var selection;
+    var markAnchorOffset = function () {
+        selection = getSelection();
     };
-    var unmarkAnchorOffset = function () {
-        var c = coder;
-        var node = c.firstChild;
-        while (node) {
-            if (node.nodeType === 1) {
-                if (node.innerText.indexOf(光标) >= 0) {
-                    node = node.firstChild;
+    var getNodeAt = function (row, col) {
+        var d = clist.at(row);
+        if (!d) return [];
+        var c = d.firstChild;
+        var inc = 0;
+        while (c) {
+            if (c.nodeType === 1) {
+                var t = c.innerText;
+                var tl = t.length;
+                if (inc + tl >= col) {
+                    c = c.firstChild;
                     continue;
                 }
+                inc += tl;
+                c = c.nextSibling;
             }
-            else if (node.nodeType === 3) {
-                if (node.nodeValue.indexOf(光标) >= 0) break;
-            }
-            node = node.nextSibling;
-        }
-        if (node) {
-            var offset = node.nodeValue.indexOf(光标);
-            node.nodeValue = node.nodeValue.slice(0, offset) + node.nodeValue.slice(offset + 1);
-            document.getSelection().setBaseAndExtent(node, offset, node, offset);
-            if (!node.nodeValue) {
-                remove(node);
-            }
-        }
-    }
-    var getAnchorOffset = function () {
-        var { anchorNode, anchorOffset } = document.getSelection();
-        var [c] = coder.children;
-        if (anchorNode === c || !anchorNode) return -anchorOffset;
-        var sibling = anchorNode.previousSibling ? anchorNode.previousSibling : anchorNode.parentNode.previousSibling;
-        while (sibling && sibling !== c) {
-            switch (sibling.nodeType) {
-                case 1:
-                    anchorOffset += sibling.innerText.length || 1;
-                    break;
-                case 3:
-                    anchorOffset += sibling.nodeValue.length;
-                    break;
-            }
-            sibling = sibling.previousSibling ? sibling.previousSibling : sibling.parentNode.previousSibling;
-        }
-        return anchorOffset;
-    };
-    var setAnchorOffset = function (anchorOffset) {
-        var [c] = coder.children;
-        if (anchorOffset < 0) {
-            anchorOffset = -anchorOffset;
-            if (anchorOffset > c.childNodes.length) anchorOffset = c.childNodes.length;
-            return document.getSelection().setBaseAndExtent(c, anchorOffset, c, anchorOffset);
-        }
-        var offset = anchorOffset;
-        var child = c.firstChild;
-        while (child) {
-            var delta = 0;
-            switch (child.nodeType) {
-                case 1:
-                    delta = child.innerText.length || 1;
-                    break;
-                case 3:
-                    delta = child.nodeValue.length;
-                    break;
-            }
-            if (delta >= offset) {
-                if (child.nodeType === 1) {
-                    if (child.firstChild) {
-                        child = child.firstChild;
-                        continue;
+            else if (c.nodeType === 3) {
+                var t = c.nodeValue;
+                var tl = t.length;
+                if (inc + tl > col) {
+                    col -= inc;
+                    inc = 0;
+                    if (t.charAt(col - 1) === " ") {
+                        col++;
                     }
-                    offset -= 1;
                     break;
                 }
-                break;
+                else if (inc + tl === col) {
+                    if (t.charAt(col - inc - 1) === " ") col++;
+                    else break;
+                }
+                inc += tl;
+                c = c.nextSibling;
             }
-            offset -= delta;
-            if (offset <= 0) break;
-            child = child.nextSibling;
         }
-        if (!child) child = c, offset = c.childNodes.length;
-        return document.getSelection().setBaseAndExtent(child, offset, child, offset);
+        if (!c) return [d, d.childNodes.length];
+        return [c, col - inc];
+    }
+    var unmarkAnchorOffset = function () {
+        if (!selection) return;
+        var [an, ai, fn, fi] = selection;
+        [fn, fi] = getNodeAt(fn, fi);
+        [an, ai] = fn === an && fi === ai ? [fn, fi] : getNodeAt(an, ai);
+        document.getSelection().setBaseAndExtent(an, ai, fn, fi);
     }
     var trimspace = (_, a) => a ? "" : " ";
-    var 更新 = function (colored) {
-        var { scrollTop, scrollLeft } = coder;
-        coder.innerHTML = colored;
-        coder.scrollTop = scrollTop;
-        coder.scrollLeft = scrollLeft;
-        unmarkAnchorOffset();
+    var 更新 = function () {
+        var { scrollTop, scrollLeft } = clist;
+        refresh();
+        render.refresh(clist);
+        render.refresh(nlist);
+        clist.scrollTop = scrollTop;
+        clist.scrollLeft = scrollLeft;
     };
     var anchorChar = null, inText = false;
     var followChar = null, beforeText = false;
@@ -162,6 +213,7 @@
         document.execCommand('insertText', false, ' ');
     };
     var updatechar = function (event) {
+        if (event.defaultPrevented) return;
         coderid++;
         var { anchorNode, anchorOffset } = document.getSelection();
         if (!coder || !anchorNode) return;
@@ -187,8 +239,8 @@
             }
             if (anchorOffset === 0) {
                 anchorNode = anchorNode.previousSibling || anchorNode.parentNode.previousSibling;
-                if (!anchorNode) return;
                 do {
+                    if (!anchorNode) return;
                     if (anchorNode.nodeType === 1) {
                         if (anchorNode.lastChild) {
                             anchorOffset = anchorNode.childNodes.length;
@@ -258,11 +310,57 @@
         var [k, p] = a.split('');
         pairsmap[k] = p;
     });
-    var codeHistory = [];
+    var codeHistory = [""];
     var historyIndex = 0;
+    var getRow = function (node) {
+        var d = getTargetIn(clist, node, false);
+        if (!d) return;
+        var i = d.i;
+        if (isFinit(i)) return i;
+        if (d.previousSibling) i = d.previousSibling.i + 1;
+        else if (d.nextSibling) i = d.nextSibling.i - 1;
+        return i;
+    };
+    var getCol = function (node, offset) {
+        var d = getTargetIn(clist, node, false);
+        if (!d) return;
+        if (node.nodeType === 1) node = node.childNodes[offset], offset = 0;
+        while (node && node !== d) {
+            var p = node.previousSibling;
+            if (p) {
+                if (p.nodeType === 1) {
+                    offset += p.innerText.length;
+                }
+                else if (p.nodeType === 3) {
+                    offset += p.nodeValue.length;
+                }
+                node = p;
+                continue;
+            }
+            node = node.parentNode;
+        }
+        return offset;
+    };
+    var getFocusRow = function () {
+        var { focusNode } = document.getSelection();
+        return getRow(focusNode);
+    };
+    var getSelection = function () {
+        var { focusNode, anchorNode, focusOffset, anchorOffset } = document.getSelection();
+        var fn = getRow(focusNode);
+        var an = anchorNode === focusNode ? fn : getRow(anchorNode);
+        var fi = getCol(focusNode, focusOffset);
+        var ai = anchorNode == focusNode && anchorOffset === focusOffset ? fi : getCol(anchorNode, anchorOffset);
+        if (fn === an) {
+            if (ai > fi) [ai, fi] = [fi, ai];
+        }
+        else if (an > fn) {
+            [fn, an] = [an, fn];
+        }
+        return [an, ai, fn, fi];
+    };
     var updatecode = function (event) {
         var { data, inputType } = event;
-        coderid++;
         var patchAfter = '';
         switch (inputType) {
             case "insertText":
@@ -283,7 +381,10 @@
                     }
                 }
                 break;
-            case "insertParagraph": return;
+            case "insertParagraph":
+                var i = getFocusRow();
+                tab(clist, false);
+                return;
             case "deleteContentForward": return;
             case "deleteContentBackward":
                 if (anchorChar in pairsmap && followChar === pairsmap[anchorChar]) {
@@ -292,22 +393,107 @@
                 return;
 
         }
-        markAnchorOffset(光标 + patchAfter);
-        var markedText = coder.innerText;
-        historyIndex = codeHistory.length;
-        codeHistory.push(coder.innerHTML);
+        if (patchAfter) {
+            document.execCommand("insertText", false, patchAfter);
+        }
+        return patchAfter;
+    };
+    var removeEndBR = function (d) {
+        var e = d.lastChild;
+        while (e) {
+            if (e.tagName === 'BR') {
+                remove(e);
+                return;
+            }
+            e = e.lastChild;
+        }
+    };
+    var patchRows = function (rows, k) {
+        var ds = clist.children;
+        ds = Array.apply(null, ds);
+        ds.forEach(removeEndBR);
+        var marked = ds.map(d => {
+            return d[k]
+        });
+        var i = clist.start;
+        var e = clist.end;
+        rows.splice(i, e - i, ...marked);
+    }
+    var getCodeText = function () {
+        var rows = codetext.split(/\r\n|\r|\n/);
+        patchRows(rows, 'innerText');
+        return rows.join('\r\n');
+    };
+    var updateCodeHtml = function () {
+        patchRows(coderows, "innerHTML");
+    };
+    var keytab = function (direction) {
+        tab(clist, direction);
+        markAnchorOffset();
+        pudo();
+    };
+    on("input")(coder, function (event) {
+        if (event.isComposing) return;
+        var id = ++coderid;
+        if (updatecode(event) == null) {
+            if (id !== coderid) return;
+            // codetext = getCodeText();
+            updateCodeHtml();
+            pudo();
+            更新();
+            unmarkAnchorOffset();
+            return;
+        }
+        if (id !== coderid) return;
+        pudo();
+        coderows = 上色.rows(coder.type, codetext);
+        更新();
+        unmarkAnchorOffset();
+        coderows.forEach(function (c, i) {
+            var d = c.indexOf(光标);
+            if (d > 0) coderows[i] = c.slice(0, d) + c.slice(d + 1);
+        });
+    });
+    on('keydown.space.only')(coder, fixpace);
+    on('keydown.tab.shift.prevent.only')(coder, function () {
+        keytab(-1);
+    });
+    on('keydown.tab.prevent.only')(coder, function () {
+        keytab(1);
+    });
+    var updo = function () {
+        [codetext, selection] = codeHistory[historyIndex];
+        coderows = 上色.rows(coder.type, codetext);
+        更新();
         unmarkAnchorOffset();
-        updateonly(coderid, markedText);
+        codetext = getCodeText();
     };
-    var updateonly = lazy(async function (id, markedText) {
-        if (coderid !== id) return;
-        markedText = await 上色.text(coder.type, markedText);
-        if (coderid !== id) return;
-        更新(markedText);
+    var pudo = function (markedText) {
+        markAnchorOffset();
+        codetext = getCodeText();
+        historyIndex++;
+        codeHistory.splice(historyIndex, codeHistory.length - historyIndex);
+        if (historyIndex > 6000) {
+            codeHistory.splice(0, 1000);
+            historyIndex -= 1000;
+        }
+        codeHistory.push([codetext, selection]);
         return;
-    }, -60);
-    var keytab = function (direction) {
-        tab(direction);
     };
-
+    var undo = function () {
+        if (historyIndex > 0) {
+            historyIndex--;
+            updo();
+        }
+    };
+    var redo = function () {
+        if (historyIndex + 1 < codeHistory.length) {
+            historyIndex++;
+            updo();
+        }
+    };
+    on('keydown.ctrl.z.prevent.only')(coder, undo);
+    on('keydown.ctrl.shift.z.prevent.only')(coder, redo);
+    on('keydown.ctrl.y.prevent.only')(coder, redo);
+    on('keydown')(coder, updatechar)
 </script>

package/docs//347/273/204/344/273/266.xht

@@ -73,9 +73,8 @@
         overflow: auto;
         display: block;
         white-space: pre;
-        height: auto;
+        height: 100%;
         min-height: 100%;
-        border-width: 10px 20px 40px 20px;
         outline: none;
     }
 
@@ -125,7 +124,7 @@
         </p4>
     </div>
     <div body codearea -elseif="tags[1].actived">
-        <cigu contenteditable #coder></cigu>
+        <cigu #coder></cigu>
     </div>
     <resultpad -if="tags[1].actived" .result #coderesult></resultpad>
     <div foot -if="tags[1].actived">
@@ -272,7 +271,7 @@
             if (live) live = live[1];
             var commap = initCommap(live);
             remove(coderesult.childNodes);
-            var jstext = coder.innerText;
+            var jstext = coder.getValue();
             jstext = jstext.replace(/[\u2002\u00a0]/g, ' ');
             data.patchInstance("docscode", { codetext: jstext })
             var code = compile$scanner2(jstext);
@@ -299,6 +298,10 @@
                 ["$mounted*" + live]: $mounted,
                 ["$watches*" + live]: $watches,
                 ["$renders*" + live]: $renders,
+                ["$cared*" + live]: $cared,
+                ["$casted*" + live]: $casted,
+                ["$eval*" + live]: $eval,
+                ["$upwith*" + live]: $upwith,
             })));
             var func = createFunction("", jstext, argNames, code.async, code.yield);
             var res = func.apply(window, args);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "efront",
-    "version": "4.23.3",
+    "version": "4.23.5",
     "description": "一个开发环境，提供一种自由的前端开发模式，也可作为辅助工具使用。",
     "main": "public/efront.js",
     "directories": {