@hailin-zheng/editor-core 2.0.16 → 2.0.17

package/index.js

@@ -2243,12 +2243,14 @@ class DataEleListProps extends DataEleBaseTextProps {
      * 是否允许多选
      */
     multiSelect;
+    displayField = 'value';
     clone(dest) {
         const clone = dest ?? new DataEleListProps();
         super.clone(clone);
         clone.options = [...this.options];
         clone.dropDownStyle = this.dropDownStyle;
         clone.multiSelect = this.multiSelect;
+        clone.displayField = this.displayField;
         return clone;
     }
     getSerializeProps(options) {
@@ -2257,6 +2259,9 @@ class DataEleListProps extends DataEleBaseTextProps {
             multiSelect: this.multiSelect,
             dropDownStyle: this.dropDownStyle,
         };
+        if (this.displayField && this.displayField !== 'value') {
+            props['displayField'] = this.displayField;
+        }
         super.getBaseProps(props, options);
         return props;
     }
@@ -2265,6 +2270,7 @@ class DataEleListProps extends DataEleBaseTextProps {
         this.options = props.options;
         this.multiSelect = props.multiSelect;
         this.dropDownStyle = props.dropDownStyle;
+        this.displayField = props.displayField;
     }
 }
 class CommContentProps extends INotifyPropertyChanged {
@@ -2318,6 +2324,7 @@ class DataEleCheckProps extends DataEleBaseProps {
     falseChar = falseChar;
     trueStateColor = '#f00000';
     falseStateColor = '#000000';
+    style = 'CheckBox';
     clone(dest) {
         const clone = dest ?? new DataEleCheckProps();
         super.cloneBaseProps(clone);
@@ -2332,6 +2339,7 @@ class DataEleCheckProps extends DataEleBaseProps {
         clone.border = this.border;
         clone.trueStateColor = this.trueStateColor;
         clone.falseStateColor = this.falseStateColor;
+        clone.style = this.style;
         return clone;
     }
     getSerializeProps(options) {
@@ -2360,6 +2368,9 @@ class DataEleCheckProps extends DataEleBaseProps {
         if (this.falseStateColor !== '#000000') {
             props.falseStateColor = this.falseStateColor;
         }
+        if (this.style !== 'CheckBox') {
+            props.style = this.style;
+        }
         this.getBaseProps(props, options);
         return props;
     }
@@ -2376,6 +2387,7 @@ class DataEleCheckProps extends DataEleBaseProps {
         this.trueStateColor = props.trueStateColor;
         this.falseStateColor = props.falseStateColor;
         this.border = props.border;
+        this.style = props.style;
     }
 }
 class DataEleImageProps extends DataEleBaseProps {
@@ -4749,7 +4761,7 @@ class TextGroupRenderObject extends LeafRenderObject {
             return curr.actualSize + prev;
         }, this.rect.x);
         const x = arr.join(' ');
-        const y = this.textMeasures.map(item => this.rect.y + vertHeight).join(' ');
+        const y = this.rect.y + vertHeight; //this.textMeasures.map(item => this.rect.y + vertHeight).join(' ');
         const text = this.textMeasures.map(item => {
             return item.char;
         }).join('');
@@ -10859,74 +10871,83 @@ class DataElementCheckRenderObject extends LeafRenderObject {
             });
         }
         else {
+            const style = props.style;
             if (props.multiSelect) {
-                t.children.push({
-                    sel: 'rect',
-                    data: {
-                        ns: "http://www.w3.org/2000/svg",
-                        attrs: {
-                            x: 2,
-                            y: 0,
-                            width,
-                            height,
-                            stroke: 'black',
-                            fill: 'none',
-                            'stroke-width': 1
-                        }
-                    }
-                });
-                if (props.checked) {
-                    const paths = ElementUtil.getCheckboxPath(2, 0, props.size, props.size);
-                    t.children.push({
-                        sel: 'path',
-                        data: {
-                            ns: "http://www.w3.org/2000/svg",
-                            attrs: {
-                                d: paths.map((item, index) => {
-                                    return `${index === 0 ? 'M' : 'L'}${item.x},${item.y}`;
-                                }).join(' '),
-                                stroke: 'red',
-                                fill: 'none',
-                                'stroke-width': 2
-                            }
-                        }
-                    });
-                }
+                style === 'RadioButton' ? this.drawCircleCheckbox(t, width, height, props.checked)
+                    : this.drawRectCheckbox(t, width, height, props.size, props.checked);
             }
             else {
-                t.children.push({
-                    sel: 'circle',
-                    data: {
-                        ns: "http://www.w3.org/2000/svg",
-                        attrs: {
-                            cx: 2 + width / 2,
-                            cy: height / 2,
-                            r: width / 3,
-                            stroke: 'black',
-                            fill: 'none',
-                            'stroke-width': 1
-                        }
+                style === 'CheckBox' ? this.drawRectCheckbox(t, width, height, props.size, props.checked)
+                    : this.drawCircleCheckbox(t, width, height, props.checked);
+            }
+        }
+        return t;
+    }
+    drawRectCheckbox(t, width, height, size, checked) {
+        t.children.push({
+            sel: 'rect',
+            data: {
+                ns: "http://www.w3.org/2000/svg",
+                attrs: {
+                    x: 2,
+                    y: 0,
+                    width,
+                    height,
+                    stroke: 'black',
+                    fill: 'none',
+                    'stroke-width': 1
+                }
+            }
+        });
+        if (checked) {
+            const paths = ElementUtil.getCheckboxPath(2, 0, size, size);
+            t.children.push({
+                sel: 'path',
+                data: {
+                    ns: "http://www.w3.org/2000/svg",
+                    attrs: {
+                        d: paths.map((item, index) => {
+                            return `${index === 0 ? 'M' : 'L'}${item.x},${item.y}`;
+                        }).join(' '),
+                        stroke: 'red',
+                        fill: 'none',
+                        'stroke-width': 2
                     }
-                });
-                if (props.checked) {
-                    t.children.push({
-                        sel: 'circle',
-                        data: {
-                            ns: "http://www.w3.org/2000/svg",
-                            attrs: {
-                                cx: 2 + width / 2,
-                                cy: height / 2,
-                                r: width / 5,
-                                stroke: 'black',
-                                fill: 'black',
-                                'stroke-width': 1
-                            }
-                        }
-                    });
+                }
+            });
+        }
+    }
+    drawCircleCheckbox(t, width, height, checked) {
+        t.children.push({
+            sel: 'circle',
+            data: {
+                ns: "http://www.w3.org/2000/svg",
+                attrs: {
+                    cx: 2 + width / 2,
+                    cy: height / 2,
+                    r: width / 3,
+                    stroke: 'black',
+                    fill: 'none',
+                    'stroke-width': 1
                 }
             }
+        });
+        if (checked) {
+            t.children.push({
+                sel: 'circle',
+                data: {
+                    ns: "http://www.w3.org/2000/svg",
+                    attrs: {
+                        cx: 2 + width / 2,
+                        cy: height / 2,
+                        r: width / 5,
+                        stroke: 'black',
+                        fill: 'black',
+                        'stroke-width': 1
+                    }
+                }
+            });
         }
-        return t;
     }
 }
 class DataElementCheckFactory extends ElementFactory {
@@ -10951,6 +10972,7 @@ class DataElementCheckFactory extends ElementFactory {
         dataEleProps.trueChar = props.trueChar ?? trueChar;
         dataEleProps.falseChar = props.falseChar ?? falseChar;
         dataEleProps.border = props.border ?? true;
+        dataEleProps.style = props.style ?? 'CheckBox';
         return dataEleProps;
     }
 }
@@ -11345,6 +11367,8 @@ class DataElementList extends DataElementInlineGroup {
         }
         this.pubOnChange('self');
         this.clearInnerItems();
+        let displayField = this.props.displayField;
+        displayField = displayField ? displayField : 'value';
         if (this.props.multiSelect) {
             for (let i = 0; i < vals.length; i++) {
                 const val = vals[i];
@@ -11353,12 +11377,14 @@ class DataElementList extends DataElementInlineGroup {
                     const valueText = new TextGroupElement();
                     this.props.valueTextProps.clone(valueText.props);
                     const splitSymbol = i < vals.length - 1 ? ';' : '';
-                    valueText.text = option.value + splitSymbol;
+                    valueText.text = option[displayField] + splitSymbol;
                     this.addChild(valueText, this.length - 1);
                 }
             }
         }
         else {
+            let displayField = this.props.displayField;
+            displayField = displayField ? displayField : 'value';
             if (vals.length > 1) {
                 console.warn('当前下拉框是单选模式,不能传入多个值');
             }
@@ -11367,7 +11393,7 @@ class DataElementList extends DataElementInlineGroup {
             if (option) {
                 const valueText = new TextGroupElement();
                 this.props.valueTextProps.clone(valueText.props);
-                valueText.text = option.value;
+                valueText.text = option[displayField];
                 this.addChild(valueText, this.length - 1);
             }
         }
@@ -11378,10 +11404,12 @@ class DataElementList extends DataElementInlineGroup {
         if (!values) {
             return '';
         }
+        let displayField = this.props.displayField;
+        displayField = displayField ? displayField : 'value';
         const valueItems = values.split(';');
         const valueCode = [];
         for (const valueItem of valueItems) {
-            const option = this.props.options.find(item => item.value === valueItem);
+            const option = this.props.options.find(item => item[displayField] === valueItem);
             if (option) {
                 valueCode.push(option.code);
             }
@@ -11426,6 +11454,7 @@ class DataElementListFactory extends DataElementBaseFactory {
         dataEleProps.multiSelect = props.multiSelect;
         dataEleProps.options = [...options];
         dataEleProps.dropDownStyle = props.dropDownStyle;
+        dataEleProps.displayField = props.displayField ?? 'value';
         return dataEleProps;
     }
 }
@@ -27534,6 +27563,15 @@ class DocEditor {
         const { startControl, startOffset } = this.selectionState;
         this.insertElement(startControl, startOffset, [ele]);
     }
+    test() {
+        const text = new TextGroupElement();
+        text.props.fontName = '宋体';
+        text.props.fontSize = 14;
+        text.text = '哈哈';
+        const br = new BreakElement();
+        const { startControl, startOffset } = this.selectionState;
+        this.insertElement(startControl, startOffset, [text, br]);
+    }
     switchPageLayout(mode) {
         this.viewOptions.pageLayoutMode = mode;
         this.flushToSchedule();
@@ -27684,7 +27722,7 @@ class DocEditor {
         const vNodeFunc = this.renderRoot();
         setActiveEditorContext(null);
         const render = () => {
-            console.time('patch');
+            //console.time('patch');
             setActiveEditorContext(this);
             const vNode = vNodeFunc.render();
             setActiveEditorContext(null);
@@ -27696,7 +27734,7 @@ class DocEditor {
                 this.vNodeDocContent = this.nodePatch(this.svgContainer, vNode);
             }
             this.afterNodePatch.next();
-            console.timeEnd('patch');
+            //console.timeEnd('patch');
         };
         render();
         this.onShouldRender.subscribe(() => {