@hailin-zheng/editor-core 2.2.41 → 2.2.42

package/editor.css

@@ -261,6 +261,47 @@
 	font-size: 12px;
 }
 
+.data-list-footer {
+	border-top: 1px solid;
+	display: flex;
+	align-items: center;
+	height: 30px;
+	font-size: 12px;
+}
+
+.data-list-arrow{
+	position: absolute;
+	background: #0050b3;
+	width: 20px;
+	height: 20px;
+	cursor: default;
+	display: flex;
+	justify-content: center;
+}
+
+.data-list-arrow::after{
+	content: '▾';
+	font-size: 20px;
+	color: #fff;
+}
+
+.data-list-footer-btn {
+	padding: 4px 6px;
+	margin: 2px 6px;
+	font-size: 14px;
+	cursor: default;
+	user-select: none;
+	border: 1px solid black;
+}
+
+.data-list-footer-btn:hover {
+	outline: 1px solid rgb(118, 142, 222);
+}
+
+.data-list-footer-btn:active {
+	outline: 1px solid rgb(95, 19, 216);
+}
+
 .editor-calendar-footer-right-btn {
 	padding: 2px 3px;
 	cursor: default;

package/index-cjs.js

@@ -907,6 +907,25 @@ class CommonUtil {
         const keyCombination = modifiers.length > 0 ? `${modifiers}+${key}` : key;
         return keyCombination;
     }
+    static resizePosition(elm, position, scale) {
+        const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
+        if (parent) {
+            const parentRect = parent.getBoundingClientRect();
+            const elmRect = elm.getBoundingClientRect();
+            parseInt(elm.style.top);
+            // elmRect.width /= scale;
+            // elmRect.height /= scale;
+            // parentRect.width /= scale;
+            // parentRect.height /= scale;
+            if (elmRect.top < parentRect.top) {
+                elm.style.top = (position.y - elmRect.height / scale) + 'px';
+            }
+            if (elmRect.left < parentRect.left) {
+                elm.style.left = (position.x - 10) + 'px';
+            }
+            return;
+        }
+    }
 }
 
 const docOpsMap = new Map();
@@ -21932,6 +21951,220 @@ class SearchPanel {
     }
 }
 
+class EditorListVNode {
+    editor;
+    currentEle;
+    currentOpenStatus;
+    currentOptions = [];
+    changed;
+    constructor(editor) {
+        this.editor = editor;
+        this.currentOpenStatus = createSignal('init');
+        this.changed = createSignal(null);
+    }
+    clear() {
+        this.currentEle = null;
+        this.currentOptions.length = 0;
+        this.currentOpenStatus.value = 'init';
+    }
+    init() {
+        const editor = this.editor;
+        const dataEle = editor.getCurrentDataElement();
+        //不是下拉数据元
+        if (!dataEle || !(dataEle instanceof DataElementList) || !dataEle.props.editable) {
+            this.clear();
+            return;
+        }
+        if (this.currentEle && this.currentEle !== dataEle) {
+            this.clear();
+        }
+        if (this.currentEle === dataEle) {
+            return;
+        }
+        this.currentEle = dataEle;
+        const options = dataEle.props.options.map((item) => ({ checked: false, ...item }));
+        const values = dataEle.getValue().split(";");
+        options.filter((item) => values.includes(item.code + '')).forEach((item) => (item.checked = true));
+        this.currentOptions.push(...options);
+        this.currentOpenStatus.value = 'open';
+    }
+    render() {
+        // const editor = this.editor;
+        // if (editor.viewOptions.docMode === DocMode.View || !editor.selectionState.editable || editor['documentEvent'].ismousedown) {
+        //     return null;
+        // }
+        // this.init();
+        // const dataEle = editor.getCurrentDataElement();
+        // if (dataEle && dataEle instanceof DataElementList && dataEle.props.editable) {
+        //     const position = editor.getDataElementPosition(dataEle.startDecorate) as Rect;
+        //     const options = dataEle.props.options.map((item) => ({ checked: false, ...item }));
+        //     const values = dataEle.getValue().split(";");
+        //     options.filter((item) => values.includes(item.code + '')).forEach((item) => (item.checked = true));
+        //     const multiSelect = dataEle.props.multiSelect;
+        // } else {
+        //     return null;
+        // }
+        this.init();
+        if (!this.currentEle) {
+            return null;
+        }
+        const editor = this.editor;
+        const multiSelect = this.currentEle.props.multiSelect;
+        const position = editor.getDataElementPosition(this.currentEle.startDecorate);
+        const onChangeHandler = (code) => {
+            if (!multiSelect) {
+                this.currentOptions.forEach((item) => {
+                    if (item.code === code && code !== null) {
+                        if (this.currentEle.props.required) {
+                            item.checked = true;
+                        }
+                        else {
+                            item.checked = !item.checked;
+                        }
+                    }
+                    else {
+                        item.checked = false;
+                    }
+                });
+                onSave();
+            }
+            else {
+                this.currentOptions.forEach((item) => {
+                    if (item.code === code && code !== null) {
+                        item.checked = !item.checked;
+                    }
+                });
+            }
+            this.changed.onChange();
+            // const values = options.filter(item => item.checked).map(item => item.code);
+            // dataEle.setValue(values);
+            // editor.setDataElemEndFocus(dataEle);
+            // if (!multiSelect) {
+            //     editor.selectionState.resetRange(dataEle.endDecorate, 1);
+            // }
+        };
+        const onSave = () => {
+            const values = this.currentOptions.filter(item => item.checked).map(item => item.code);
+            this.currentEle.setValue(values);
+            editor.setDataElemEndFocus(this.currentEle);
+            if (!multiSelect) {
+                editor.selectionState.resetRange(this.currentEle.endDecorate, 1);
+            }
+        };
+        const itemsVNode = this.currentOptions.map(item => {
+            const ckbVNode = {
+                sel: multiSelect ? 'div.editor-list-checkbox' : 'div.editor-list-radiobox',
+                data: {}
+            };
+            if (item.checked) {
+                ckbVNode.sel += '.checked';
+                //ckbVNode.data.attrs['checked'] = true;
+            }
+            return {
+                sel: 'div', data: {
+                    on: {
+                        click: () => {
+                            onChangeHandler(item.code);
+                        }
+                    }
+                }, children: [ckbVNode, {
+                        sel: 'label',
+                        data: {},
+                        text: item.value
+                    }]
+            };
+        });
+        const downArrowVNode = {
+            sel: 'div.data-list-arrow',
+            data: {
+                style: {
+                    left: '-28px',
+                    top: (-position.height - 5) + 'px'
+                },
+                on: {
+                    click: () => {
+                        if (this.currentOpenStatus.value === 'open') {
+                            this.currentOpenStatus.value = 'close';
+                        }
+                        else if (this.currentOpenStatus.value === 'close') {
+                            this.currentOpenStatus.value = 'open';
+                        }
+                    }
+                }
+            },
+            children: []
+        };
+        const footerVNode = {
+            sel: 'div.data-list-footer',
+            data: {},
+            children: [{
+                    sel: 'div.data-list-footer-btn',
+                    data: {
+                        on: {
+                            click: () => {
+                                this.currentOpenStatus.value = 'close';
+                                onSave();
+                            }
+                        }
+                    },
+                    text: '确定'
+                },
+                {
+                    sel: 'div.data-list-footer-btn',
+                    data: {
+                        on: {
+                            click: () => {
+                                this.currentOpenStatus.value = 'close';
+                            }
+                        }
+                    },
+                    text: '取消'
+                }, {
+                    sel: 'div.data-list-footer-btn',
+                    data: {
+                        on: {
+                            click: () => {
+                                this.currentEle.setValue(null);
+                                editor.selectionState.resetRange(this.currentEle.endDecorate, 1);
+                            }
+                        }
+                    },
+                    text: '清除'
+                }
+            ]
+        };
+        return {
+            sel: 'div.data-list-container',
+            data: {
+                style: {
+                    position: 'absolute',
+                    left: (position.x) + 'px',
+                    top: position.y + 5 + position.height + 'px',
+                },
+                hook: {
+                    insert: (vnode) => {
+                        const elm = vnode.elm;
+                        CommonUtil.resizePosition(elm, position, editor.viewOptions.scale);
+                    },
+                    update: (oldVnode, vnode) => {
+                        const elm = vnode.elm;
+                        CommonUtil.resizePosition(elm, position, editor.viewOptions.scale);
+                    }
+                },
+            },
+            children: [
+                multiSelect ? downArrowVNode : undefined,
+                this.currentOpenStatus.value === 'open' ? {
+                    sel: 'div#data-list.data-list',
+                    data: {},
+                    children: [...itemsVNode]
+                } : undefined,
+                this.currentOpenStatus.value === 'open' && multiSelect ? footerVNode : undefined
+            ]
+        };
+    }
+}
+
 class DocEditor {
     svgContainer;
     //设置vue 不允许代理
@@ -22059,6 +22292,7 @@ class DocEditor {
         const calendarFunc = this.renderCalendar();
         const menuFunc = this.renderContextmenu();
         const suggestionFunc = this.renderSuggestions();
+        const listVNode = this.renderDataListVNode();
         const ruleFunc = new DocRule(this.docCtx);
         const onSizeChange = () => {
             this.adjustPageLayout();
@@ -22090,7 +22324,6 @@ class DocEditor {
                         on: this.documentInput.getEventListener()
                     }
                 };
-                const listVNode = this.renderDataListVNode();
                 const dropContainer = {
                     sel: 'div.absolute-container',
                     data: {
@@ -22254,7 +22487,9 @@ class DocEditor {
      * 载入文档
      * @param data json对象、json字符串、DocumentElement对象
      */
-    loadDoc(data) {
+    loadDoc(data, options) {
+        options = options || {};
+        options.autoScrollToTop = options.autoScrollToTop ?? true;
         suppressTracking(() => {
             this.noEffectChange(() => {
                 this.adjustPageLayout();
@@ -22262,7 +22497,7 @@ class DocEditor {
                 this.refreshDocument();
                 this.historyMange.clear();
                 this.documentEvent.clear();
-                this.scrollToPosition({ x: 0, y: 0 });
+                options.autoScrollToTop && this.scrollToPosition({ x: 0, y: 0 });
             });
         });
     }
@@ -23331,126 +23566,13 @@ class DocEditor {
      * @private
      */
     renderDataListVNode() {
-        const editor = this;
+        const dataList = new EditorListVNode(this);
         return {
             render() {
-                if (editor.viewOptions.docMode === exports.DocMode.View || !editor.selectionState.editable || editor.documentEvent.ismousedown) {
-                    return null;
-                }
-                const dataEle = editor.getCurrentDataElement();
-                if (dataEle && dataEle instanceof DataElementList && dataEle.props.editable) {
-                    const position = editor.getDataElementPosition(dataEle.startDecorate);
-                    const options = dataEle.props.options.map((item) => ({ checked: false, ...item }));
-                    const values = dataEle.getValue().split(";");
-                    options.filter((item) => values.includes(item.code + '')).forEach((item) => (item.checked = true));
-                    const multiSelect = dataEle.props.multiSelect;
-                    const onChangeHandler = (code) => {
-                        if (!multiSelect) {
-                            options.forEach((item) => {
-                                if (item.code === code && code !== null) {
-                                    if (dataEle.props.required) {
-                                        item.checked = true;
-                                    }
-                                    else {
-                                        item.checked = !item.checked;
-                                    }
-                                }
-                                else {
-                                    item.checked = false;
-                                }
-                            });
-                        }
-                        else {
-                            options.forEach((item) => {
-                                if (item.code === code && code !== null) {
-                                    item.checked = !item.checked;
-                                }
-                            });
-                        }
-                        const values = options.filter(item => item.checked).map(item => item.code);
-                        dataEle.setValue(values);
-                        editor.setDataElemEndFocus(dataEle);
-                        if (!multiSelect) {
-                            editor.selectionState.resetRange(dataEle.endDecorate, 1);
-                        }
-                    };
-                    const itemsVNode = options.map(item => {
-                        const ckbVNode = {
-                            sel: multiSelect ? 'div.editor-list-checkbox' : 'div.editor-list-radiobox',
-                            data: {}
-                        };
-                        if (item.checked) {
-                            ckbVNode.sel += '.checked';
-                            //ckbVNode.data.attrs['checked'] = true;
-                        }
-                        return {
-                            sel: 'div', data: {
-                                on: {
-                                    click: () => {
-                                        onChangeHandler(item.code);
-                                    }
-                                }
-                            }, children: [ckbVNode, {
-                                    sel: 'label',
-                                    data: {},
-                                    text: item.value
-                                }]
-                        };
-                    });
-                    return {
-                        sel: 'div.data-list-container',
-                        data: {
-                            style: {
-                                position: 'absolute',
-                                left: (position.x) + 'px',
-                                top: position.y + 5 + position.height + 'px',
-                            },
-                            hook: {
-                                insert: (vnode) => {
-                                    const elm = vnode.elm;
-                                    editor.resizePosition(elm, position);
-                                },
-                                update: (oldVnode, vnode) => {
-                                    const elm = vnode.elm;
-                                    editor.resizePosition(elm, position);
-                                }
-                            },
-                        },
-                        children: [
-                            {
-                                sel: 'div#data-list.data-list',
-                                data: {},
-                                children: [...itemsVNode]
-                            }
-                        ]
-                    };
-                }
-                else {
-                    return null;
-                }
+                return dataList.render();
             }
         };
     }
-    resizePosition(elm, position) {
-        const parent = CommonUtil.findParent(elm, (item) => item.className === 'scroll-container');
-        const scale = this.viewOptions.scale;
-        if (parent) {
-            const parentRect = parent.getBoundingClientRect();
-            const elmRect = elm.getBoundingClientRect();
-            parseInt(elm.style.top);
-            // elmRect.width /= scale;
-            // elmRect.height /= scale;
-            // parentRect.width /= scale;
-            // parentRect.height /= scale;
-            if (elmRect.top < parentRect.top) {
-                elm.style.top = (position.y - elmRect.height / scale) + 'px';
-            }
-            if (elmRect.left < parentRect.left) {
-                elm.style.left = (position.x - 10) + 'px';
-            }
-            return;
-        }
-    }
     renderCalendar() {
         const calendar = new EditorCalendarVNode(this.viewOptions);
         const editor = this;
@@ -23557,7 +23679,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.2.41";
+        return "2.2.42";
     }
     switchPageHeaderEditor() {
         this.docCtx.document.switchPageHeaderEditor(this.selectionState, null);