@hailin-zheng/editor-core 2.1.1 → 2.1.2

package/index.js

@@ -651,6 +651,23 @@ class CommonUtil {
         }
         return this.findParent(curr.parentElement, predicate);
     }
+    static isIntersect(rect1, rect2) {
+        const left1 = rect1.x;
+        const top1 = rect1.y;
+        const right1 = rect1.x + rect1.width;
+        const bottom1 = rect1.y + rect1.height;
+        const left2 = rect2.x;
+        const top2 = rect2.y;
+        const right2 = rect2.x + rect2.width;
+        const bottom2 = rect2.y + rect2.height;
+        if (left1 >= right2 || left2 >= right1) {
+            return false;
+        }
+        if (top1 >= bottom2 || top2 >= bottom1) {
+            return false;
+        }
+        return true;
+    }
 }
 
 const docOpsMap = new Map();
@@ -1517,6 +1534,8 @@ class ViewOptions {
     paraSymbolColor = 'rgb(128,128,128)';
     dataGroupColor = 'rgb(0,80,179)';
     defaultLineHeight = 1;
+    //虚拟视图模式,处理可视区域内的元素
+    virtualViewMode = false;
     //新增-留痕块文本颜色
     trackInsColor = '#ff4d4f';
     //删除-留痕块文本颜色
@@ -16156,13 +16175,13 @@ class DocumentPaint {
         this.docContainer.clear();
         const { pageLayoutMode, viewSettings: { width: viewWidth } } = this.viewOptions;
         //文档内容区宽度
-        const contentWidth = this.viewOptions.contentWidth;
+        const { contentWidth, scale } = this.viewOptions;
         //文档容器总宽度等于内容宽度
         //单页模式，docContainer居中
         this.docContainer.rect.width = viewWidth;
         //let docLeft = Math.floor((viewWidth - contentWidth) / 2);
         //处理由于缩放问题，transform-origin:left-top,因此需要提前计算需要偏移的位置
-        let docLeft = Math.floor((viewWidth - contentWidth * (this.viewOptions.scale)) / 2);
+        let docLeft = Math.floor((viewWidth - contentWidth * scale) / 2) / scale;
         docLeft = docLeft < 0 ? 0 : docLeft;
         pages.forEach(item => item.rect.x = docLeft);
         this.docContainer.rect.x = 0;
@@ -16313,6 +16332,132 @@ class PageBreakFactory extends ElementFactory {
     }
 }
 
+const fontSize = 12;
+const verPadding = 2;
+/**
+ * 恒牙牙位图
+ */
+class PermanentTeethElement extends LeafElement {
+    constructor() {
+        super('permanent-teeth');
+        this.props = new PermanentTeethProps();
+        this.props.topLeft = '87654321';
+        this.props.topRight = '12345678';
+        this.props.bottomLeft = '87654321';
+        this.props.bottomRight = '12345678';
+    }
+    clone(data) {
+        const clone = new PermanentTeethElement();
+        clone.props = this.props.clone();
+        return clone;
+    }
+    createRenderObject(data) {
+        const clone = new PermanentTeethRenderObject(this);
+        clone.rect.width = 150;
+        //字体大小*2+上下间距2*2
+        clone.rect.height = fontSize * 2 + verPadding * 2;
+        //clone.rect= ElementUtil.cloneRect(this.rect);
+        return clone;
+    }
+    serialize(viewOptions) {
+        return {
+            type: this.type,
+            props: this.props.getSerializeProps(viewOptions)
+        };
+    }
+}
+class PermanentTeethRenderObject extends LeafRenderObject {
+    render(e) {
+    }
+    clone() {
+        const clone = new PermanentTeethRenderObject(this.element);
+        clone.rect = ElementUtil.cloneRect(this.rect);
+        return clone;
+    }
+    // measure(): { width: number, height: number } {
+    //     const ele = this.element;
+    //
+    // }
+    exportHTML(event) {
+        const ele = this.element;
+        const g = super.exportHTML(event);
+        const contentHorPadding = 4;
+        g.children = [];
+        // g.children.push(ElementUtil.getFillSvgPath(`M 0 ${this.rect.height / 2} h${this.rect.width}`, '#000', 1));
+        // g.children.push(ElementUtil.getFillSvgPath(`M ${this.rect.width / 2} 0 v${this.rect.height}`, '#000', 1));
+        //
+        g.children.push(ElementUtil.getFillSvgRect(0, this.rect.height / 2, this.rect.width, 1, '#000'));
+        g.children.push(ElementUtil.getFillSvgRect(this.rect.width / 2, 0, 1, this.rect.height, '#000'));
+        const getSvgText = (text, x, y) => {
+            return {
+                sel: 'text',
+                text: text,
+                data: {
+                    ns: "http://www.w3.org/2000/svg",
+                    attrs: {
+                        'dominant-baseline': 'hanging',
+                        'font-family': 'Arial',
+                        'font-size': fontSize,
+                        x,
+                        y,
+                    }
+                },
+            };
+        };
+        const topLeftWidth = event.renderCtx.mainContext.measureTextWidth(ele.props.topLeft, {
+            fontSize: fontSize,
+            fontName: 'Arial'
+        });
+        const bottomLeftWidth = event.renderCtx.mainContext.measureTextWidth(ele.props.bottomLeft, {
+            fontSize: fontSize,
+            fontName: 'Arial'
+        });
+        g.children.push(getSvgText(ele.props.topLeft, this.rect.width / 2 - topLeftWidth - contentHorPadding, verPadding));
+        g.children.push(getSvgText(ele.props.topRight, this.rect.width / 2 + contentHorPadding, verPadding));
+        g.children.push(getSvgText(ele.props.bottomLeft, this.rect.width / 2 - bottomLeftWidth - contentHorPadding, this.rect.height - fontSize + verPadding));
+        g.children.push(getSvgText(ele.props.bottomRight, this.rect.width / 2 + contentHorPadding, this.rect.height - fontSize + verPadding));
+        return g;
+    }
+}
+class PermanentTeethFactory extends ElementFactory {
+    match(type) {
+        return type === 'permanent-teeth';
+    }
+    createElement(data) {
+        const ele = new PermanentTeethElement();
+        ele.props.bottomLeft = data.props?.bottomLeft ?? '';
+        ele.props.bottomRight = data.props?.bottomRight ?? '';
+        ele.props.topLeft = data.props?.topLeft ?? '';
+        ele.props.topRight = data.props?.topRight ?? '';
+        return ele;
+    }
+}
+/**
+ * 恒牙牙位图属性
+ */
+class PermanentTeethProps extends INotifyPropertyChanged {
+    topLeft;
+    topRight;
+    bottomLeft;
+    bottomRight;
+    getSerializeProps(viewOptions) {
+        return {
+            topLeft: this.topLeft,
+            topRight: this.topRight,
+            bottomLeft: this.bottomLeft,
+            bottomRight: this.bottomRight,
+        };
+    }
+    clone(dest) {
+        dest = dest || new PermanentTeethProps();
+        dest.topLeft = this.topLeft;
+        dest.topRight = this.topRight;
+        dest.bottomLeft = this.bottomLeft;
+        dest.bottomRight = this.bottomRight;
+        return dest;
+    }
+}
+
 class ElementReader {
     docCtx;
     constructor(docCtx) {
@@ -16354,6 +16499,7 @@ class ElementReader {
         this.addFactory(DocumentBodyPartFactory);
         this.addFactory(PageBreakFactory);
         this.addFactory(TabFactory);
+        this.addFactory(PermanentTeethFactory);
         // this.registerReadFunc<TrackRunProps>('ins-run', (data) => {
         //     const props = new TrackRunProps(data.type);
         //     props.userId = data.userId;
@@ -17047,6 +17193,7 @@ class DocumentEvent {
         docEvent.shift = evt.shiftKey;
         docEvent.ctrl = evt.ctrlKey;
         this.ismousedown = false;
+        this.mousedownPos = { x: docEvent.globalX, y: docEvent.globalY };
         //console.log('松开了')
         this.edgeRenderInfo = null;
     }
@@ -20945,7 +21092,7 @@ class DocumentSvg {
     }
     getHTMLVNode(docRenders) {
         this.counterMap = {};
-        const pageNodes = docRenders.map(item => {
+        const pageNodes = docRenders.filter(item => this.checkInViewBox(item)).map(item => {
             const pageSvg = this.getPageSvgVNode(item);
             const pageUnit = {
                 sel: 'div.page-unit',
@@ -20970,6 +21117,24 @@ class DocumentSvg {
         });
         return pageNodes;
     }
+    /**
+     * 判断当前元素是否在视窗内
+     * @param rect
+     * @private
+     */
+    checkInViewBox(item) {
+        if (!this.viewOptions.virtualViewMode || this.mode === 'print') {
+            return true;
+        }
+        const viewBoxRect = {
+            x: this.viewOptions.pageOffset.x,
+            y: this.viewOptions.pageOffset.y,
+            width: this.viewOptions.viewSettings.width,
+            height: this.viewOptions.viewSettings.height
+        };
+        const eleRect = item.rect;
+        return CommonUtil.isIntersect(viewBoxRect, eleRect);
+    }
     getPageSvgVNode(item) {
         this.highlights = [];
         const rects = [];
@@ -28454,7 +28619,7 @@ class DocEditor {
         rule.setRuleOptions({ width: this.viewOptions.docPageSettings.width, pagePL, pagePR, docLeft });
     }
     version() {
-        return "2.1.1";
+        return "2.1.2";
     }
 }