@hailin-zheng/editor-core 2.2.17 → 2.2.18

package/index-cjs.js

@@ -1749,18 +1749,26 @@ class ViewOptions {
     dataEleEmptyBgColor = '';
     //数据元鼠标悬浮颜色
     dataEleMouseEnterBgColor = '#d9d9d9';
+    dataEleMouseEnterDecoratorMode = 'background';
     //数据元只读背景颜色
     dataEleReadOnlyBgColor = '#d9d9d9';
     //数据元焦点背景颜色
     dataEleFocusedBgColor = '#d9d9d9';
+    dataEleFocusedDecoratorMode = 'background';
     //数据元正常背景颜色
     dataEleNormalBgColor = '#fafafa';
+    //数据元外部框线颜色
+    dataEleOutlineColor = '#0050b3';
+    //数据组外部框线颜色
+    dataGroupOutlineColor = '#0050b3';
     //数据元错误背景颜色
     dataEleErrorBgColor = '#ff4d4f';
     //数据组修饰符号颜色
     dataGroupDecoratorNormalColor = '#0050b3';
     dataGroupDecoratorMouseEnterColor = '#0050b3';
+    dataGroupMouseEnterDecoratorMode = 'outline';
     dataGroupDecoratorFocusedColor = '#0050b3';
+    dataGroupFocusedDecoratorMode = 'outline';
     //数据组正常背景颜色
     dataGroupNormalBgColor = '#fafafa';
     //数据元没有输入值时背景颜色
@@ -1781,8 +1789,6 @@ class ViewOptions {
     trackDelColor = '#000';
     showLineRect;
     showCharRect;
-    //数据元交互修饰模式
-    dataEleDecoratorMode = 'outline';
     showTabChar;
     showSpaceChar;
     showLineBreak;
@@ -3759,7 +3765,7 @@ class DocumentRenderObject extends BlockContainerRenderObject {
                 },
             },
             children: [
-                pageCorner, highlight, ...CommonUtil.toArray(event.getChildNodes(this)), pageNum, selection, copyright
+                pageCorner, highlight, selection, ...CommonUtil.toArray(event.getChildNodes(this)), pageNum, copyright
             ]
         };
     }
@@ -4086,7 +4092,11 @@ class DataElementInlineGroup extends InlineGroupInputElement {
                     }
                 });
             }
-            this.parserExpress = { compliedCode, func: new Function(`with(this){ ${compliedCode} }`), depItems: depEleMap };
+            this.parserExpress = {
+                compliedCode,
+                func: new Function(`with(this){ ${compliedCode} }`),
+                depItems: depEleMap
+            };
         }
         catch (e) {
             console.error('解析表达式出错,parseEleExpression', this.props.expression);
@@ -4203,6 +4213,7 @@ function exportDataEleDecoratorSVG$1(event, r) {
         return;
     }
     const options = event.options;
+    let mode = 'background';
     let color = options.dataEleNormalBgColor;
     //空数据元填充颜色
     if (r.element.length === 2 && options.dataEleEmptyBgColor) {
@@ -4210,17 +4221,69 @@ function exportDataEleDecoratorSVG$1(event, r) {
     }
     if (r.element.isMouseenter && options.dataEleMouseEnterBgColor) {
         color = options.dataEleMouseEnterBgColor;
+        mode = options.dataEleMouseEnterDecoratorMode;
     }
     if (r.element.isFocused && options.dataEleFocusedBgColor) {
         color = options.dataEleFocusedBgColor;
+        mode = options.dataEleFocusedDecoratorMode;
     }
     if (!color) {
         return;
     }
     //绘制背景
-    const bgX = event.relativePagePos.x;
-    const bgY = event.relativePagePos.y;
-    event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+    if (['all', 'background'].includes(mode)) {
+        const bgX = event.relativePagePos.x;
+        const bgY = event.relativePagePos.y;
+        event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+    }
+    if (['all', 'outline'].includes(mode)) {
+        color = event.options.dataEleOutlineColor;
+        const verOffset = 0;
+        const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
+        if (renderPosMap.length > 1) {
+            const secondGroupRenderPos = renderPosMap[1].pos;
+            if (secondGroupRenderPos.x + renderPosMap[1].render.rect.width > event.relativePagePos.x) {
+                const leftPoints = [];
+                const rightPoints = [];
+                for (let i = 0; i < renderPosMap.length; i++) {
+                    const groupRender = renderPosMap[i].render;
+                    const groupRenderPos = renderPosMap[i].pos;
+                    leftPoints.push({ x: groupRenderPos.x, y: groupRenderPos.y - verOffset });
+                    rightPoints.push({
+                        x: groupRenderPos.x + groupRender.rect.width,
+                        y: groupRenderPos.y - verOffset
+                    });
+                    leftPoints.push({
+                        x: groupRenderPos.x,
+                        y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
+                    });
+                    rightPoints.push({
+                        x: groupRenderPos.x + groupRender.rect.width,
+                        y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
+                    });
+                }
+                const sharpPoints1 = CommonUtil.resharpPoints(rightPoints);
+                const sharpPoints = CommonUtil.resharpPoints([...leftPoints.reverse()]);
+                const path = [...sharpPoints, ...sharpPoints1, sharpPoints[0]].map((item, index) => ((index === 0) ? 'M' : "L") + item.x + " " + item.y).join(" ");
+                event.highlights.push(ElementUtil.createSvgPath({
+                    d: path,
+                    stroke: color,
+                    fill: 'none',
+                    'stroke-width': 1
+                }));
+                return;
+            }
+        }
+        for (let i = 0; i < renderPosMap.length; i++) {
+            const currRen = renderPosMap[i];
+            event.highlights.push(ElementUtil.createSvgPath({
+                d: `M${currRen.pos.x} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y + currRen.render.rect.height} L${currRen.pos.x} ${currRen.pos.y + currRen.render.rect.height} Z`,
+                stroke: color,
+                fill: 'none',
+                'stroke-width': 1
+            }));
+        }
+    }
     // const canPaint = r.element.isMouseenter || r.element.isFocused;
     // if (!canPaint) {
     //     return;
@@ -4235,51 +4298,6 @@ function exportDataEleDecoratorSVG$1(event, r) {
     //     event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
     //     return;
     // } else if (mode === 'outline') {
-    //     const verOffset = 0;
-    //     const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
-    //     if (renderPosMap.length > 1) {
-    //         const secondGroupRenderPos = renderPosMap[1].pos;
-    //         if (secondGroupRenderPos.x + renderPosMap[1].render.rect.width > event.relativePagePos.x) {
-    //             const leftPoints: Array<Position> = [];
-    //             const rightPoints: Array<Position> = [];
-    //             for (let i = 0; i < renderPosMap.length; i++) {
-    //                 const groupRender = renderPosMap[i].render;
-    //                 const groupRenderPos = renderPosMap[i].pos;
-    //                 leftPoints.push({ x: groupRenderPos.x, y: groupRenderPos.y - verOffset });
-    //                 rightPoints.push({
-    //                     x: groupRenderPos.x + groupRender.rect.width,
-    //                     y: groupRenderPos.y - verOffset
-    //                 });
-    //                 leftPoints.push({
-    //                     x: groupRenderPos.x,
-    //                     y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
-    //                 });
-    //                 rightPoints.push({
-    //                     x: groupRenderPos.x + groupRender.rect.width,
-    //                     y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
-    //                 });
-    //             }
-    //             const sharpPoints1 = CommonUtil.resharpPoints(rightPoints);
-    //             const sharpPoints = CommonUtil.resharpPoints([...leftPoints.reverse()]);
-    //             const path = [...sharpPoints, ...sharpPoints1, sharpPoints[0]].map((item, index) => ((index === 0) ? 'M' : "L") + item.x + " " + item.y).join(" ")
-    //             event.highlights.push(ElementUtil.createSvgPath({
-    //                 d: path,
-    //                 stroke: color,
-    //                 fill: 'none',
-    //                 'stroke-width': 1
-    //             }));
-    //             return;
-    //         }
-    //     }
-    //     for (let i = 0; i < renderPosMap.length; i++) {
-    //         const currRen = renderPosMap[i];
-    //         event.highlights.push(ElementUtil.createSvgPath({
-    //             d: `M${currRen.pos.x} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y + currRen.render.rect.height} L${currRen.pos.x} ${currRen.pos.y + currRen.render.rect.height} Z`,
-    //             stroke: '#0050b3',
-    //             fill: 'none',
-    //             'stroke-width': 1
-    //         }));
-    //     }
     // }
 }
 /**
@@ -4386,6 +4404,30 @@ function renderUnderWavyLine(event, r, color) {
     const path = ElementUtil.createSvgPath({ d, fill: 'none', stroke: color });
     event.highlights.push(path);
 }
+/**
+ * 获取渲染元素相对稳当的位置
+ * @param render
+ * @param refPos
+ */
+function getRenderPosToDoc(render, refPos = null) {
+    refPos = refPos ?? { x: 0, y: 0 };
+    if (render instanceof DocumentRenderObject) {
+        return refPos;
+    }
+    const currPos = { x: render.rect.x + refPos.x, y: render.rect.y + refPos.y };
+    return getRenderPosToDoc(render.parent, currPos);
+}
+function getCurrentParaGroupRenders(r) {
+    const renders = [];
+    const currParaRender = ElementUtil.getParentRender(r, ParagraphRenderObject);
+    for (let i = 0; i < r.element.paintRenders.length; i++) {
+        const paraRender = ElementUtil.getParentRender(r.element.paintRenders[i], ParagraphRenderObject);
+        if (paraRender === currParaRender) {
+            renders.push(r.element.paintRenders[i]);
+        }
+    }
+    return renders;
+}
 function renderUnderline(event, render) {
     const { x, y } = event.relativePagePos;
     event.highlights.push({
@@ -8928,23 +8970,76 @@ function exportDataEleDecoratorSVG(event, r) {
     }
     const options = event.options;
     let color = options.dataGroupNormalBgColor;
+    let mode = 'background';
     //空数据元填充颜色
     if (r.element.length === 2 && options.dataGroupEmptyBgColor) {
         color = options.dataGroupEmptyBgColor;
     }
     if (r.element.isMouseenter && options.dataGroupMouseEnterBgColor) {
         color = options.dataGroupMouseEnterBgColor;
+        mode = options.dataGroupMouseEnterDecoratorMode;
     }
     if (r.element.isFocused && options.dataGroupFocusedBgColor) {
         color = options.dataGroupFocusedBgColor;
+        mode = options.dataGroupFocusedDecoratorMode;
     }
     if (!color) {
         return;
     }
     //绘制背景
-    const bgX = event.relativePagePos.x;
-    const bgY = event.relativePagePos.y;
-    event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+    if (['all', 'background'].includes(mode)) {
+        const bgX = event.relativePagePos.x;
+        const bgY = event.relativePagePos.y;
+        event.highlights.push(ElementUtil.getFillSvgRect(bgX, bgY, r.rect.width, r.rect.height, color));
+    }
+    if (['all', 'outline'].includes(mode)) {
+        color = event.options.dataGroupOutlineColor;
+        const verOffset = 0;
+        const renderPosMap = getCurrentParaGroupRenders(r).map(item => ({ pos: getRenderPosToDoc(item), render: item }));
+        if (renderPosMap.length > 1) {
+            const secondGroupRenderPos = renderPosMap[1].pos;
+            if (secondGroupRenderPos.x + renderPosMap[1].render.rect.width > event.relativePagePos.x) {
+                const leftPoints = [];
+                const rightPoints = [];
+                for (let i = 0; i < renderPosMap.length; i++) {
+                    const groupRender = renderPosMap[i].render;
+                    const groupRenderPos = renderPosMap[i].pos;
+                    leftPoints.push({ x: groupRenderPos.x, y: groupRenderPos.y - verOffset });
+                    rightPoints.push({
+                        x: groupRenderPos.x + groupRender.rect.width,
+                        y: groupRenderPos.y - verOffset
+                    });
+                    leftPoints.push({
+                        x: groupRenderPos.x,
+                        y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
+                    });
+                    rightPoints.push({
+                        x: groupRenderPos.x + groupRender.rect.width,
+                        y: groupRenderPos.y + groupRender.rect.height + verOffset * 2
+                    });
+                }
+                const sharpPoints1 = CommonUtil.resharpPoints(rightPoints);
+                const sharpPoints = CommonUtil.resharpPoints([...leftPoints.reverse()]);
+                const path = [...sharpPoints, ...sharpPoints1, sharpPoints[0]].map((item, index) => ((index === 0) ? 'M' : "L") + item.x + " " + item.y).join(" ");
+                event.highlights.push(ElementUtil.createSvgPath({
+                    d: path,
+                    stroke: color,
+                    fill: 'none',
+                    'stroke-width': 1
+                }));
+                return;
+            }
+        }
+        for (let i = 0; i < renderPosMap.length; i++) {
+            const currRen = renderPosMap[i];
+            event.highlights.push(ElementUtil.createSvgPath({
+                d: `M${currRen.pos.x} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y} L${currRen.pos.x + currRen.render.rect.width} ${currRen.pos.y + currRen.render.rect.height} L${currRen.pos.x} ${currRen.pos.y + currRen.render.rect.height} Z`,
+                stroke: color,
+                fill: 'none',
+                'stroke-width': 1
+            }));
+        }
+    }
 }
 
 class DataElementImage extends DataElementLeaf {
@@ -14257,6 +14352,11 @@ class ParagraphMeasure {
             parent: parentLine,
             isCloseToBody: parentLine.isCloseToBody,
             applyNewLine() {
+                //申请新行前，需要将当前内联元素的宽度扩充到可用最大宽度
+                const space = parentLine.limitWidth - parentLine.lineWidth();
+                if (space > 0) {
+                    render.rect.width += space;
+                }
                 parentLine.applyNewLine();
                 render = ele.createRenderObject({ options, renderCtx, execute });
                 parentLine.add(render);
@@ -19752,7 +19852,6 @@ class DocumentSvg {
                     fill: item.color ?? this.viewOptions.selectionColor,
                     'paint-order': 'stroke fill markers',
                     d: `M${item.x} ${item.y} L${item.x + item.width} ${item.y} L${item.x + item.width} ${item.y + item.height} L${item.x} ${item.y + item.height} Z`,
-                    'fill-opacity': '0.5'
                 }
             }
         }));
@@ -22374,7 +22473,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.2.17";
+        return "2.2.18";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);
@@ -28366,7 +28465,9 @@ exports.formatEle = formatEle;
 exports.fromEvent = fromEvent;
 exports.generatePatch = generatePatch;
 exports.getCalleeName = getCalleeName;
+exports.getCurrentParaGroupRenders = getCurrentParaGroupRenders;
 exports.getFocusTextSegment = getFocusTextSegment;
+exports.getRenderPosToDoc = getRenderPosToDoc;
 exports.inputText = inputText;
 exports.insertEle = insertEle;
 exports.invokeTypeHandler = invokeTypeHandler;